@import 'grid.less';
@import 'baseline.less';
@import 'iconset-1.less';

@base-img: "chicago-webdesigns.com/wp-content/themes/thesis_182/custom-19/images/";


////////////////////////
//// Color Schemes /////
////////////////////////


@primary: #14627C;
@secondary: #94C5D5;
@tertiary: #D6C694;
@black: #2D3A3F;
@gray: #8f8f8f;
@white: #FFFFFF;

.black-gradient {
	.gradient(@black, lighten(@black, 5%), @black);
}

.primary-gradient {
	.gradient(@primary, darken(@primary, 5%), @primary);
}

.primary-gradient-hover {
	.gradient(lighten(@primary, 10%), saturate(darken(@primary, 5%), 15%), lighten(@primary, 10%));
}

.secondary-gradient {
	.gradient(@secondary, saturate(lighten(@secondary, 8%), 15%), @secondary);
}

.secondary-gradient-hover {
	.gradient(lighten(@secondary, 10%), saturate(darken(@secondary, 5%), 15%), lighten(@secondary, 10%));
}

.tertiary-gradient {
	.gradient(@tertiary, saturate(lighten(@tertiary, 8%), 15%), @tertiary);
}

.tertiary-gradient-hover {
	.gradient(lighten(@tertiary, 10%), saturate(darken(@tertiary, 5%), 15%), lighten(@tertiary, 10%));
}

.silver-gradient {
	.gradient(darken(@white, 2%), darken(@white, 12%), darken(@white, 1%));
}

/* General Typefaces */

.sans-serif {
	font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
}

.serif {
	font-family: Georgia, Times New Roman, serif;
}


/*//////////////
//// Layout ////
//////////////*/


/* Universal */

.full_width {
	.page {
		max-width: 1000px;
		min-width: 320px;
		width: auto;
	}
}

.col_1 {
	.column(12); 
	margin-top: @baseline;	
}

.col_2 {
	.column(6);
	margin-top: @baseline;
	
	h3 {
		margin-bottom: @baseline;
		margin-top: 0;
		font-size: 1em;
	}
	
	p {
		font-size: 1em;
		line-height: 1.6em;
	}
	
	img {
		border: 1px solid @gray;
		.drop-shadow(0,2px,2px,0.1);
	}
}

a {
	color: @primary;
}

.divider-top {
	background: url("http://@{base-img}divider-top.png") no-repeat top center;
	padding-top: @baseline * 2;
	padding-bottom: 0;
	background-size: 100%;
}

.col_3 {.column(4);}
.col_4 {.column(3);}

.fleximage {
	img {
		width: 100%;
		height: auto;
	}
}

#header {
	.clearfix;
	padding-bottom: 0;
}


/* Menu */

.custom-menu {
	.black-gradient;
	.clearfix;
}

.menu-main-menu-container {
		
	.column(6);

	.menu {
		border: none;
		padding: (@baseline / 3) 0;
		
		li {
			
			a {
				.sans-serif;
				background: none;
				border: none;
				color: darken(@white, 30%);
				letter-spacing: normal;
			}
		}
	}
}

.menu a:hover, 
.menu .current ul a:hover, 
.menu .current-cat ul a:hover, 
.menu .current-parent a:hover, 
.menu .current-menu-item ul a:hover, 
.menu .current-menu-ancestor a:hover {
	background: transparent!important;
	color: @white!important;
}


/* Header */

#header_area {
	.primary-gradient;
	.inner-shadow(0, 0, 60px, .4);
	.clearfix;
	
	.page {
		background: transparent;
	}
}

#header {

	.col_2.button {
		.headbutton {
			float: right;
			
		}
	}

	.col_2 {
		padding-top: @baseline / 2;
	
		h1 {
			.sans-serif;
			padding-top: @baseline / 2;
			font-size: 5.5em;
			font-weight: bold;
			text-shadow: 1px 1px rgba(0,0,0,0.5);
			margin-bottom: @baseline * 1.5;
			color: @white;
		}
		
		p {
			@size: 1.7em;
			
			.sans-serif;
			color: darken(@white, 15%);
			text-shadow: 1px 1px rgba(0,0,0,0.3);
			font-size: @size;
			margin-bottom: @baseline * 2;
			line-height: (@size * .8);
			font-style: italic;
		}
		
		button {
			.tertiary-gradient;
			.sans-serif;
			.rounded(15px);
			.button-glow(0,0,10px,0.8,0.3);
			font-size: 3em;
			font-weight: bold;
			padding: (@baseline / 2) 0;
			width: 98%;
			color: @black;
			border: 2px solid darken(@tertiary, 15%);
			text-shadow: 1px 1px rgba(255, 255, 255, .7);
			margin-bottom: @baseline * 3;
			cursor: pointer;
			
			&:hover {
				.tertiary-gradient-hover;
			}
		}
		
		img {
			border: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
	}
}

/* Special Header Button */


#header .col_2 .headbutton {

    .rounded(50px);
    .gradient(rgba(246,246,246,1), rgba(255,255,255,1), rgba(237,237,237,1));
    -moz-transition: box-shadow 0.3s ease-in-out;
    -webkit-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
    padding: 15px 30px 13px 70px;
    position: relative;
    float:left;
    display: block;
    overflow: hidden;
    margin: 10px 0;
    box-shadow:
        0px 0px 7px rgba(0,0,0,0.2),
        0px 0px 0px 1px rgba(188,188,188,0.1);
        
    &:hover {
    	background: @white;
    	box-shadow:
    		0px 0px 9px rgba(0,0,0,0.4),
    		0px 0px 0 1px rgba(188,188,188,.1);
    }
    
    &:active {
    	background: @tertiary;
    	box-shadow: 
    		0 2px 2px rgba(0,0,0,0.6) inset,
    		0 0 0 1px rgba(188,188,188,0.1);
    }
    
	.a-btn-symbol {
    	background: url("http://@{base-img}arrow_down_black.png");
    	position:absolute;
    	left: 25px;
    	margin-top: 5px;
    	transition: opacity 0.3s ease-in-out;
    	height: 21px;
    	width: 22px;
    	text-indent: -999px;
	}

	.a-btn-text{
    	font-size: 25px;
    	color: @primary;
    	line-height: 19px;
    	font-weight: bold;
    	font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
    	text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    	display: block;
    	
    	&:active {
    		text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
    	}
	}

	.a-btn-slide-text{
    	font-family: Arial, sans-serif;
    	font-size: 10px;
    	letter-spacing: 1px;
    	text-transform: uppercase;
    	color: #555;
    	text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
	}

	.a-btn-slide-icon{
    	position:absolute;
    	top:-30px;
    	width: 22px;
    	height: 22px;
   		background: transparent url(../images/arrow_down_black.png) no-repeat top left;
    	left:20px;
    	opacity: 0.4;
	}
}


#header .fleximage img {max-width: 430px; float: right; margin-bottom: -20px;}


/* Header Front Page */

.custom.home {
	#header_area .page #header {
		padding-top: @baseline;
	}
}


/* Header Inside Pages */



#header_area .page #header {
	margin-top: 0;
	padding-top: 0;
		
	.col_2 {
		padding-top: 0;
	}
}



/* Social Icons */

.soc_media {
	.column(6);
    float: right;
	margin: 12px 15px 12px 0;
    vertical-align: middle;
    z-index: 999;
	
	.soc-wrap {

		float:right;
		margin-left: 5px;
	}
	
	.social-icon {
    	background: url("http://@{base-img}g_social.gif") repeat scroll 0 0 transparent;
    	height: 16px;
    	width: 16px;
    	cursor: pointer;
    	float: left;
    	display: block;
    	text-indent: -9999px;
    	
    	&#twitter {
   			background-position: left top;
   			
   			&:hover {
   				background-position: left bottom;
   			}
		}
		
		&#facebook {
    		background-position: -17px top;
    		
    		&:hover {
    			background-position: -17px bottom;
    		}
		}
		
		&#linkedin {
    		background-position: -34px top;
    		
    		&:hover {
    			background-position: -34px bottom;
    		}
		}
		
		&#youtube {
    		background-position: -51px top;
    		
    		&:hover {
    			background-position: -51px bottom;
    		}
		}
			
		&#rss {
    		background-position: right top;
    		
    		&:hover {
    			background-position: right bottom;
    		}
		}				

	}
}

/* Headline Area */

.headline_area {
	.column(12);
	
	h2 {
		@size: 5em;
		
		.sans-serif;
		color: @primary;
		font-weight: bold;
		text-align: center;
		font-size: @size;
		line-height: (@size * .5);
		background: url("http://@{base-img}divider-top.png") no-repeat top center #F7F7F7;
		margin-left: -@baseline - 2;
		margin-right: -@baseline - 3;
		border-bottom: 1px solid darken(@white, 10%);
		text-shadow: -1px -1px rgba(255, 255, 255, .95);
		
	}
}


/* Header Widget */


#header_widget_1 {

	.column(12);
	margin-top: @baseline / 2;
	margin-bottom: @baseline;
	
	.sidebar_list {

		
		.widget {margin-bottom: 0;}
		
		.textwidget {
			.clearfix;
			
			.trust-badges {
				.clearfix;
				.silver-gradient;
				.rounded(5px);
				.inner-shadow(1px, 3px, 4px, .17);
				border-left: 1px solid darken(@white, 13%);
				border-right: 1px solid darken(@white, 15%);
				border-top: 1px solid dakren(@white, 15%);
				border-bottom: 1px solid darken(@white, 20%);
				padding: (@baseline - 10) 0;
				margin-top: @baseline * 1.5;
			
				ul {
					display: inline;
					list-style: none;
					
					.trust {
						.column(1.7);
						float: left;
						text-align: center;
						.sans-serif;
						font-size: .85em;
						color: lighten(@black, 20%);
						height: 75px;
						
						.tb {
							background: url("http://@{base-img}trust-badge-sprite.png") no-repeat center center;
							height: 45px;
							width: 48px;
							margin: 5px auto;
						}
						
						#opensource {background-position: -253px center;}
						#wordpress {background-position: -376px center;}
						#drupal{background-position: -498px center;}
						#joomla {background-position: -743px center;}
						#css3 {background-position: -8px center;}
						#html5 {background-position: -130px center;}
						#bbb {background-position: -621px center;}
						#magento {background-position: -875px center;}
						#adwords {background-position: -1147px center;}
						#socialmediaclub {background-position: -1013px center;}
						
						a {color: lighten(@black, 20%);}
					}
				}
			}
			
			.top_quote {
				
				img {
					.column(1.5);
					border: 2px solid darken(@white, 20%);
					margin-right: @baseline;
					float: left;
				}
				
				p {
					.column(9.8);
					.serif;
					position: relative;
					top: -15px;
					color: lighten(@black, 20%);
					text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
					font-size: 1.9em;
					line-height: 1.2em;
					font-style: italic;
					background: url("http://@{base-img}quotes.png") no-repeat;
					padding-top: 10px;
					padding-left: 40px;
					float: left;
					
					span {
						.sans-serif;
						color: @primary;
						text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
						font-size: .55em;
						text-transform: uppercase;
						font-style: normal;
						font-weight: bold;
					}
				}
			}
		}	
	}
}



/* Content Area */

#content_area {
	background: url("http://@{base-img}bg-noise.png") repeat darken(@white, 20%);
	padding-top: @baseline;
	padding-bottom: @baseline;
	
	.page {
		background: @white;
		-moz-box-shadow: 0 0 10px rgba(196, 196, 186, 0.6);
		-webkit-box-shadow: 0 0 10px rgba(196, 196, 186, 0.6);
		box-shadow: 0 0 10px rgba(196, 196, 186, 0.6);
	}
	
	.format_text {
		
		.column(12);
		
		p {
			.sans-serif;
			color: lighten(@black, 15%);
			
		}
		
		h2, h3, h4 {
			.sans-serif;
			color: @primary;
			font-weight: bold;
			text-transform: uppercase;
			
		}
		
		h4 {
			font-size: 1em;
			margin-bottom: @baseline / 2;
		}
		
		ul {
			list-style: disc;
			
			li {
				font-size: .9em;
				
				strong {
					color: @primary;
				}
				
				a {
					color: @primary;
					text-decoration: none;
				}
			}
		}
	}
}



/* Callouts */

.custom #content_area .format_text .col_3.callouts {
	
	width: 33%;

	margin: (@baseline) 0;
	
	.callout-header {
		.sans-serif;
		letter-spacing: normal;
		color: @primary;
		margin-bottom: @baseline / 2;
		font-size: 14px;
		text-transform: uppercase;
		font-weight: bold;
		
		a {
			color: @primary;
			text-decoration: none;
		}
	}
	
	p {
		.sans-serif;
		color: lighten(@black, 20%);
		font-size: .8em;
		line-height: 1.4em;
		padding-right: @baseline;
	}
}


/* WP-Table */

.wp-table-reloaded {
	background-color: transparent!important;
	color: @black;
	border-spacing: 0!important;
	
	thead {
	
		th {
			.border-radius(8px, 0, 0, 8px);
			.primary-gradient;
			.inner-glow(0, 0, 3px, .2);
			border: none;
			color: @white!important;
			line-height: 1em;
			text-align: center;
			text-shadow: 1px 1px rgba(0,0,0,0.2);
			font-size: .85em;
			line-height: 1.2em;
			padding: (@baseline / 2);
		}
		
		.column-2, .column-4 {
			.tertiary-gradient;
		}
	}
	
	tbody {
		tr {
			td {
				.sans-serif;
				color: lighten(@black, 20%);
				font-size: .9em;
				line-height: normal;
				padding: (@baseline / 2);
				
				.table-desc {
					.serif;
					font-size: .85em;
					font-style: italic;
					color: lighten(@black, 35%);
				}
			}
		}
		
		.even {
			background: desaturate(lighten(@primary, 73%), 40%);
		}
		
		.odd {
			background: lighten(@tertiary, 45%);
		}
		
		.column-2, .column-3, .column-4, .column-5 {
			text-align: center;
		}
		
		.column-2, .column-4 {
			background: rgba(170,186,92, .05);
		}
		
		.column-3, .column-5 {
			background: rgba(19,68,87, .05);
		}
	}
}


/* Footer */


#footer_area {
	.secondary-gradient;
	border-top: 1px solid darken(@secondary, 20%);
	
	.page {
		background: transparent;
		
		#footer .sidebar {
			
			.widget_text {
				.column(7);
				text-align: left;
				color: @black;
				font-size: 1.1em;
				text-shadow: 1px 1px rgba(255,255,255,0.4);
				
				h3, h4, h5, h6 {
					.sans-serif;
					color: @primary;
					font-size: 1.8em;
					letter-spacing: normal;
					font-variant: normal;
					text-transform: uppercase;
					font-weight: bold;
					margin-bottom: @baseline;
				}
				
				p {
					padding-right: @baseline;
				}
			}
			
			.gform_widget {
				.column(5);
				.serif;
				position: relative;
				top: -15px;
				
				h3, h4, h5, h6 {
					display: none;
				}
				
				.gform_wrapper {
					.gform_body {
						
						.gform_fields {
							
							.gfield {
								
								.gfield_label {
									.sans-serif;
									color: @black;
									text-shadow: 1px 1px rgba(255,255,255,0.5);
									font-size: 1.2em;
								}
								
								input {
									.rounded(5px);
									.gradient(@white, lighten(@gray, 35%), @white);
									.inner-shadow(0, 1px, 2px, 0.2);
									border: 1px solid lighten(@gray, 15%);
									font-size: 1.2em;
									padding: 10px;
									width: 98%;
									.sans-serif;
									text-shadow: 1px 1px rgba(255,255,255,0.5);
									color: @black;
								}
							}
						}
					}
					
					.gform_footer {
						margin-top: 0;
						padding-top: 0;
					}
					
					.button {
						.primary-gradient;
						.rounded(4px);
						.drop-shadow(0, 0, 3px, 0.5);
						border: 1px solid darken(@primary, 10%);
						color: @white;
						font-size: 1.2em;
						padding: .5em 1em;
						text-shadow: 1px 1px rgba(0,0,0,0.3);
						cursor: pointer;
						margin-top: @baseline / 1.5;
						margin-left: 2px;
					}
				}
			}
		}
	}
}


/* Gform Footer Error & Confirmation */


#footer .gform_widget {
	.gform_wrapper .validation_error {
		color: @black;
		.sans-serif;
		font-size: 1em;
	}
	
	.gfield_error {
		margin-top: 0!important;
		margin-bottom: 5px!important;
		
		.ginput_container {
			width: 96%;
			margin-top: 0;
		}
		
		.gfield_label {
			margin-top: 0;
		}
		
		.gfield_description {
			padding: 0!important;
			margin-top: 5px;
		}
	}
	
	#gforms_confirmation_message {
		.primary-gradient;
		border: 1px solid darken(@primary, 15%);
		color: @white;
		.sans-serif;
		text-shadow: 1px 1px rgba(0,0,0,0.5);
		width: 99%;
	}
}


#post-footer {
	.black-gradient;
	padding: 10px 0;
	
	.page {
		background: transparent;
		text-align: center;
		color: darken(@white, 20%);
		line-height: 2em;
		
		a {
			color: darken(@white, 20%);
		}
	}
}


/* Short Codes */


.custom p.warning,
.custom p.attention,
.custom p.success,
.custom p.error,
.custom p.comment {
	color: @white!important;
	font-family: Verdana, Helvetica, Arial, sans-serif!important;
}


/* Title Hide */

.pricing {
	.headline_area {
		display: none;
	}
}


/* Get A Quote Form */

	.gform_wrapper .get-a-quote-form, .gform_wrapper .modal-form {
		.column(12);
		margin-bottom: @baseline * 1.5;
		
		.gform_body {
			
			.gform_fields {
				.column(12);
				float: left;
				
				.gfield {
					.column(6);
					float: left;
					clear: none;
				}
				
				.gfield_error {
					.column(6);
					padding: 0;
					margin-bottom: 0;
					margin-top:0;
					border: 0;
					padding: 0 0 0 5px;
					width: 46.5%;
					
					.validation_message {
						display: none;
					}
					
					.gfield_label {
						margin-top: 0;
						margin-bottom: 0;
					}
					
					.ginput_container {
						margin-top: 0;
					}
					
					.gfield_description {
						padding: 0;
					}
				}
				
				.gfield_label {
					.sans-serif;
					color: lighten(@black, 10%);
				}
				
				.gfield_description {
					
					.serif;
					color: darken(@white, 35%);
					font-style: italic;
					padding-top: 5px;
					padding-bottom: 10px;
				}
				
				.ginput_container {
					
					.medium {
						.rounded(5px);
						.silver-gradient;
						.sans-serif;
						text-shadow: 1px 1px rgba(255, 255, 255, .4);
						
						width: 96%;
						box-shadow: 0 2px 1px rgba(188,188,188,.4) inset;
						-moz-box-shadow: 0 2px 1px rgba(188,188,188,.4) inset;
						-webkit-box-shadow: 0 2px 1px rgba(188,188,188,.4) inset;
						
						padding: 6px 4px 2px;
						font-size: 1.1em;
						
					}
					
					.gfield_checkbox {
						padding-left: @baseline / 2;
						margin-top: 0;
						
						li {
							margin-bottom: @baseline / 6;
							color: lighten(@black, 20%);
						}
					}
				}
			}
		}
		
		
		.gform_footer {
			.column(12);
			
			.button {
				.column(5.9);
				.primary-gradient;
				.rounded(4px);
				.drop-shadow(0, 0, 3px, 0.5);
				border: 1px solid darken(@primary, 10%);
				color: @white;
				font-size: 1.2em;
				padding: .5em 1em;
				text-shadow: 1px 1px rgba(0,0,0,0.3);
				cursor: pointer;
				
				&:hover {
					.primary-gradient-hover;
				}
			}
		}
		
	}



/*////////////
// FAQ PAGE //
////////////*/


.faq {
	#content_area .format_text {
		
		h3 {
			font-size: 1em;
			font-weight: bold;
			margin-top: 0;
			margin-bottom: 0;
		}
	}
}