/*
  -- Site skeleton
*/

.col {
    float: left;
    display: inline;
    margin-left: 16px;
}

.row {
	clear: both;
	display: block;
}

.box {
	width: 100%;
	position: relative;
	border-radius: 3px;
	margin-bottom: 10px;
	background-color: #FFF;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.box>.box-inner {
	padding: 5px;
	margin: 0px auto;
	width: calc(100% - 10px) !important;
	width: -o-calc(100% - 10px) !important;
	width: -ms-calc(100% - 10px) !important;
	width: -moz-calc(100% - 10px) !important;
	width: -webkit-calc(100% - 10px) !important;
}

.box .title-flat {
	color: #FFF;
	width: auto;
	height: auto;
	display: block;
	font-size: 20px;
	font-weight: 600;
	position: relative;
	background-color: #ccc;
	padding: 7px 10px 7px 28px;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .2);
}

.box .title-bubble {
	color: #FFF;
	width: 100%;
	display: block;
	font-size: 14px;
	padding-top: 5px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5px;
	border-radius: 2px;
	padding-bottom: 5px;
	background-color: #CCC;
	-webkit-border-radius: 2px;
}

.box .content-flat {
	zoom: 1;
	color: #FFF;
	height: auto;
	font-size: 12px;
	font-weight: 400;
	line-height: 125%;
	position: absolute;
	text-align: justify;
	background: rgba(0,0,0,0.55);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .2);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#73000000,endColorstr=#73000000); 
}

.hide {
    display: none !important;
	visibility: hidden !important;
}

.grid {
    width: 930px;
    margin: 0 auto;
    text-align: left;
	position: relative;
}

.row {
    margin-left: -16px;
}

.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-13,.col-14,.col-15,.col-16,.col-17,.col-18,.col-19,.col-20,.col-21,.col-22,.col-23,.col-24,.col-25,.col-26,.col-27,.col-28,.col-29,.col-30 {
    float: left;
    display: inline;
    margin-left: 16px;
}

.col-2,.gap-2 {
    width: 48px;
}

.col-3,.gap-3 {
    width: 80px;
}

.col-4,.gap-4 {
    width: 112px;
}

.col-5,.gap-5 {
    width: 144px;
}

.col-6,.gap-6 {
    width: 160px;
}

.col-7,.gap-7 {
    width: 220px;
}

.col-8,.gap-8 {
    width: 240px;
}

.col-9,.gap-9 {
    width: 272px;
}

.col-10,.gap-10 {
    width: 304px;
}

.col-11,.gap-11 {
    width: 336px;
}

.col-12,.gap-12 {
    width: 368px;
}

.col-13,.gap-13 {
    width: 400px;
}

.col-14,.gap-14 {
    width: 432px;
}

.col-15,.gap-15 {
    width: 464px;
}

.col-16,.gap-16 {
    width: 496px;
}

.col-17,.gap-17 {
    width: 528px;
}

.col-18,.gap-18 {
    width: 560px;
}

.col-19,.gap-19 {
    width: 592px;
}

.col-20,.gap-20 {
    width: 624px;
}

.col-21,.gap-21 {
    width: 656px;
}

.col-22,.gap-22 {
    width: 697px;
}

.col-23,.gap-23 {
    width: 720px;
}

.col-24,.gap-24 {
    width: 760px;
}

.col-25,.gap-25 {
    width: 784px;
}

.col-26,.gap-26 {
    width: 816px;
}

.col-27,.gap-27 {
    width: 848px;
}

.col-28,.gap-28 {
    width: 880px;
}

.col-29,.gap-29 {
    width: 912px;
}

.col-30,.gap-30 {
    width: 930px;
}

.no-margin {
	margin: 0 !important;
}

.icon {
font: 0/0 a;
width: 16px;
height: 16px;
cursor: pointer;
color: transparent;
display: inline-block;
vertical-align: middle;
background: url() no-repeat left top;
}

.canvas {
	width: auto;
    position: relative;
}

.push-sep {
	left: 10px;
	top: -25px;
	width: 1px;
	content: "";
	height: 100%;
	background: #eeeeee;
	background: linear-gradient(#fff,#ddd,#fff);
	background: -o-linear-gradient(#fff,#ddd,#fff);
	background: -moz-linear-gradient(#fff,#ddd,#fff);
	background: -webkit-linear-gradient(#fff,#ddd,#fff);
}

.push-fix {
	clear: both !important;
}

.push-vtop {
	vertical-align: top !important;
}

.push-vmid {
	vertical-align: middle !important;
}

.push-left {
	float: left !important;
}

.push-right {
	float: right !important;
}

.field-selectable {
	line-height: 1.5;
	white-space: nowrap;
	border: 1px solid #ddd;
	border-top-color: #ccc;
	background-color: #FFF;
	transition: box-shadow .3s ease,border-color .2s ease;
	-o-transition: box-shadow .3s ease,border-color .2s ease;
	-ms-transition: box-shadow .3s ease,border-color .2s ease;
	-moz-transition: box-shadow .3s ease,border-color .2s ease;
	-webkit-transition: box-shadow .3s ease,border-color .2s ease;
}

.field-selectable:focus {
	outline: 0;
	border-color: #1EA0D4;
	box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1),
					     0 0 6px 0 rgba(30,160,212,0.6);
}

input:focus, textarea:focus {
	outline: none !important;
}

input:focus:-moz-placeholder {
	opacity: .4;
	text-indent: -100%;
	filter: alpha(opacity=40);
	transition: opacity .4s ease-out, text-indent 1s .5s ease;
}

input:focus::-moz-placeholder {
	opacity: .4;
	text-indent: -100%;
	filter: alpha(opacity=40);
	transition: opacity .4s ease-out, text-indent 1s .5s ease;
}

input:focus::input-placeholder {
	opacity: .4;
	text-indent: -100%;
	filter: alpha(opacity=40);
	transition: opacity .4s ease-out, text-indent 1s .5s ease;
	-ms-transition: opacity .4s ease-out, text-indent 1s .5s ease;
	-moz-transition: opacity .4s ease-out, text-indent 1s .5s ease;
	-webkit-transition: opacity .4s ease-out, text-indent 1s .5s ease;
}
input:focus:-ms-input-placeholder {
	opacity: .4;
	text-indent: -100%;
	filter: alpha(opacity=40);
	transition: opacity .4s ease-out, text-indent 1s .5s ease;
	-ms-transition: opacity .4s ease-out, text-indent 1s .5s ease;
}

input:focus::-webkit-input-placeholder {
	opacity: .4;
	text-indent: -100%;
	filter: alpha(opacity=40);
	transition: opacity .4s ease-out, text-indent 1s .5s ease;
	-webkit-transition: opacity .4s ease-out, text-indent 1s .5s ease;
}