/* STYLE.LESS */
@serif-font: 'PT Serif', "Times New Roman", Times, serif bold;
@sansserif-font: 'Questrial', Arial, Helvetica, sans-serif;
@blue: #5ebbf6;
@gray: #464646;
@lighter-gray: #b7b7b7;

.shadow {
	-moz-box-shadow: 0 0 5px #bbb;
	-webkit-box-shadow: 0 0 5px #bbb;
	box-shadow: 0 0 5px #bbb;
}
.transition {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.small {
	font-size: 0.8em;
	line-height: 1.7em;
}

.spacer { 
	clear: both;
	height: 30px;
}
.divider { 
	background: #fff url('images/arrow.png') center no-repeat; 
	width: 100%;
	height: 19px;
	clear: both;
	margin: 50px 0 40px 0;
}

body {
	background: #eeeee9 url('images/light-tile.gif') repeat;
	font: 1em/1.8em @serif-font;
	color: #464646;
}

h1 { font: 1.6em/1.5em @serif-font; }
h2 { font: 1.4em/1.5em @serif-font; padding: 20px 0 0 0; color: #000; background: url('images/stroke3.png') left no-repeat;  }
h3 { font: 1.25em/1.2em @sansserif-font; padding: 15px 0 0 0; text-transform: uppercase; letter-spacing: 2px; }
p { padding:0; }
p.top { text-align: right; }
blockquote { 
	background: url('images/blockquote.gif') no-repeat; 
	padding: 1px 0 0 15px; 
	width: 80%; 
	font-style: italic; 
}
ol { list-style-type: decimal; }
ul { list-style-type: circle; }
li { line-height: 2.3em; }
ul ul {  list-style-type: circle; margin: 0 0 0 20px; }

		
a { color: @blue; 
	&:hover { color: #214257; background: #dcf5fa; }
	&:active { color: @blue; background: #dcf5fa;  }
	&:visited { color: @blue; }
}

/* LOVE */
.ltw_tes_image_cont img { margin: 20px 0 0 0; box-shadow: #bbbbbb; padding: 2px; background: #fff; border: #cccccc 1px thin; }
p.ltw_tes_client_name { margin-left: 20px; font: 1.4em/1.5em @serif-font; padding: 10px 0 0 0; color: #000; background: url('images/stroke3.png') left no-repeat;  }
p.ltw_tes_testimonial { margin-left: 20px; width: 100%; font: 1em/1.8em @serif-font; color: #464646; }


/* CONTACT */

#search { 
	background: #f9f8f8 url('images/light-tile2.gif') repeat;
	height: 50px; 
	section { 
		margin: 0 auto;
		width: 78%;
	}
	.seinput {
		width: 300px;
		height: 50px;
		float: right;
		margin: 8px 0 0 10px;
		input.field {
			background: #fff;
			border: 0px;
			float: left;
			width: 200px;
			height: 25px;
			font: 0.9em @sansserif-font;
			margin: 3px 0 0 3px;
			-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
		}	
		input.submit { 
			width: 29px;
			height: 29px;
			margin-left: 6px;
			background: #fff;
			border: #494949;
			-moz-border-radius: 100px;
			-webkit-border-radius: 100px;
			border-radius: 100px;
			font: bold 0.8em @sansserif-font;
			color: #494949;
			&:hover { background: #ee432c; color: #fff; }
		}
	}	
}

.gform_wrapper .ginput_complex label, .gform_wrapper .gfield_time_hour label, .gform_wrapper .gfield_time_minute label, .gform_wrapper .gfield_date_month label, .gform_wrapper .gfield_date_day label, .gform_wrapper .gfield_date_year label, .gform_wrapper .instruction, .gform_wrapper .description, .gform_wrapper .gfield_description, .gform_wrapper .gsection_description, .gform_wrapper .instruction
  { font: 0.85em @sansserif-font; }
		
/* the word "GO" gets pushed to the right in Safari. This is a hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#search { .seinput { input.submit { font: bold 0.6em @sansserif-font; }}}
}

#container { 
	margin: 0 auto;
	margin-top: 25px;
	width: 950px;
	padding: 0 25px 15px 25px;
	background: #fff;
	-moz-box-shadow: 0 0 17px #d9d9cc;
	-webkit-box-shadow: 0 0 17px #d9d9cc;
	box-shadow: 0 0 17px #d9d9cc;
}

#main { overflow: hidden; }

#logo {
	a {
		margin-top: 20px;
		background: url('images/logo2.png') no-repeat; 
		background-position: 0px 0px; 
		display: inline-block; 
		width: 260px;
		height: 59px;
		float: left;
		&:hover { 
			background-position: 0px -59px; 	
		}
	}
	h1 { display: none;  }
}
	
#nav { 
	float: right; 
	width: 66%;
	ul { 
		text-align: right;
		list-style: none; 
		margin: 40px 0 0 0; 
		li { display: inline; 
			a { 
				padding: 8px 8px 8px 8px; 
				font: 1.15em/0.5em @sansserif-font;
				color: #6f6f6f; 
				text-decoration: none;
				&:hover { color: #000; .transition; }
			}
		}
 	} 
	select { 
		display: none; 
		/*background: transparent url('images/down-arrow-select.jpg') no-repeat right;*/
		width: 268px;
		padding: 5px;
		font-size: 16px;
		border: 1px solid #ccc;
		height: 34px;
		overflow: hidden;
	}
}

#feature { clear: both; }
	h1.level1 { text-align: center; font: 2em/0 bold; color: @gray;  }
	h1.level2 { text-align: center; font: 4em/0 @serif-font; color: @blue; margin-top: 50px; }
	h1.level3 { text-align: center; font: 1.2em/0 @sansserif-font; color: @lighter-gray; margin-top: 50px; }
	h1.combined { display: none; }

h1.frontpage { 
	text-align: center; 
	margin: 60px 0 40px 0; 
}
h1.frontpage-blog-title {
	font: 1.1em/0em @serif-font;
	float: left; 
	margin: 14px 10px 0 0; /*workaround to put it in line with paragraph */
}
.ie7 h1.frontpage-blog-title {
	float: none;
	font: 1.1em/1.7em @serif-font;
}

.selected { 
	text-align: center;
	position: relative;
	width: 100%;
	.selected-box {
		margin: 0 7px;
		display: inline-block; 
		position: relative;
		img { width: 160px; padding: 4px; border: #CCCCCC 1px solid; }
	}
	.selected-text {
		text-align: left;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 160px;
		background: transparent url('images/selected.png') repeat; 
		color: #fff;
		z-index: 1;
		padding: 5px;
		font: 0.9em/1.5em @sansserif-font;
		word-wrap: break-word; 
	}
	a:hover { background: none; }
}
/* fix for ie7/ie6 inline-block http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html */
.ie7 .selected, .ie6 .selected { .selected-box { zoom:1; display: inline; height: 160px; }}

.blog {
	a { .transition; }
	h1 a { text-decoration: none; }
	.page { 
		width: 100%; 
		h1 { font-size: 2em; }
	}
	.half-page { width: 80%; }
	article { 
		float: right; 
		img { max-width: 99%; height: auto; width: auto\9; .shadow; }
		.ie8 img {  }
		.wp-caption { max-width: 99%; height: auto; }
		.wp-caption-text {
			float: left;
			width: 20%;
			margin: 20px 0 0 -190px;
			.small;
		}
		.alignleft { 
			float: left;
			margin: 0 30px 15px 10px;
			p.wp-caption-text { width: 95%; margin: 0; }
			img { margin: 0; padding: 4px; }
		}
	}
	aside { 
		float: left;
		width: 19%;
		margin-top: 20px;
		.small;
		text-transform: lowercase;
		.date {
			line-height: 1.4em;
			.year {
				font-size: 1.65em; 
				letter-spacing: 6px;
			}
			.month-day {
				text-transform: uppercase;
				letter-spacing: 3px;
			}	
		}
		.categories { }
		.tags { }
	}
	.left { float: left; }
	.right { float: right; }
	#pricing-box {
		margin: 0 auto;
		width: 50%;
		text-align: center;
		ul { padding: 0; margin-bottom: 50px; }
	}
	#secondary-slider { display: block; }
	#secondary-slider-mobile { display: none; }
	.adverts {
		float: right;
		width: 25%;
		margin: 0 10px 40px 40px;
		padding: 10px 0 40px 50px;
		border-left: #CCCCCC 1px solid;
		h3 { margin-bottom: 20px; }
	}
	.adverts2 {
		display: none;
		float: left;
		width: 100%;
		img { width: 200px; float: left; margin: 0 10px 0 0;}
	}	
}

footer { clear: both; }

footer h1 { 
	text-align: center;
	font: 0.7em/1em @serif-font;
	color: #CCCCCC; 
	padding: 0 0 20px 0;
}

/* remove formatting from A links http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/ */
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
	background: none;
	text-decoration: none;
	border: 0 none;
}


/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 1024px) {
	#container { width: 90%; }
	#search {
		section { width: 90%; }
	}
	h1.level1 { font: 1.7em/0 @serif-font; }
	h1.level2 { font: 3.5em/0 @serif-font; }
	h1.frontpage { margin-bottom: 25px; }
	.selected { 
		.selected-box { 
			img { width: 120px; height: 120px;  }
			.selected-text { width: 120px; }
		}
	}
	.blog {	article { .wp-caption-text { margin: 20px 0 0 -165px; }	} }
}
@media only screen and (max-width: 930px) {
	.spacer { height: 10px; }
	.selected { 
		height: 100px;
		ul { li { img { width: 100px; height: 100px; } } }
		p { width: 100px; font-size: 0.8em; }
	}	
	.flexslider { margin-bottom: 75px; }
	.blog {
		.half-page { width: 100%; }
		article {
			img { margin-left: 5px;  }
			.wp-caption { margin-left: 5px; }
			.wp-caption-text {
				width: 100%;
				margin: 5px 0 20px 20px;
			}
		}
		aside {
			width: 100%; 
			.date { float: left; padding-right: 20px; margin-right: 20px; border-right: #999 1px solid; }
			.categories { margin-top: 10px; }
		}
	}
}


@media only screen and (max-width: 890px) {
	#container { width: 85%; }
	#logo { margin: 0 auto; width: 260px; }	
	#nav {
		width: 100%;
		ul { 
			text-align: center;
			padding-left: 0;
		}
	}
	.flexslider { width: 92%; }
	h1.level1 { font: 1.5em/0 @serif-font; }
	h1.level2 { font: 2.2em/0 @serif-font; margin-top: 35px; }
	h1.level3 { margin-top: 35px; }
	.selected { 
		.selected-box { 
			margin: 0 3px;
			img { width: 100px; height: 100px; }
			.selected-text { width: 100px; font: 0.8em/1.5em @sansserif-font; }
		}
	}
	.blog { 
		img, .wp-caption { width: 97%; }
		article {
			.wp-caption-text {
				margin: 5px 0 20px 0;
			}
		}
		.adverts { display: none; }
		.adverts2 {	display: block; }			
	}
}

@media only screen and (max-width: 760px) {
	.selected { 
		.selected-box { 
			margin: 0 3px;
			img { width: 80px; height: 80px; }
			.selected-text { width: 80px; height: 80px; font: 0.8em/1.5em @sansserif-font; }
		}
	}
	.flexslider { width: 90%; margin-bottom: 80px; }
}

@media only screen and (max-width: 640px) {
	#search { 
		section { 
			margin: 0 auto;
			width: 100%;
		}
	}
	#logo { margin: 0; }
	#nav {
		float: left;
		width: 40%;
		margin-top: 30px;
		ul { display: none; }
		select {
			display: inline-block;
			width: 200px;
		}
	}
	.flexslider {
		margin-top: 20px;
	}
	h1.level1, h1.level2, h1.level3 { display: none; }
	h1.combined { 
		display: block; 
		margin: 0 auto;
		width: 95%;
		font: 1.6em/1.4em @serif-font;
		text-align: center;
		.blue { color: @blue; }
		.gray { color: @gray; }
	} 
	.selected { 
		margin: 0 auto;
		width: 60%;
		height: 70%;	
		.selected-box {
			height: 130px;
			img { width: 110px; height: 110px; }
			.selected-text { font-size: 0; background: none; }
		}
	}	
}

@media only screen and (max-width: 540px) {
	#container { 
		width: 90%; 
		padding: 0 10px 15px 10px;
	}
	#logo {
		a { 
			width: 225px;
			margin: 15px 30px 0 5px;
		}
	}
	.flexslider { width: 90%; margin-bottom: 70px; }
	.selected { 
		margin: 0 auto;
		width: 100%;
		height: 350px;
		.selected-box {
			margin: 0 2px;
			height: 125px;	
			img { width: 100px; height: 100px; }
			.selected-text { height: 0; font-size: 0; background: none; }
		}
	}
	h1.combined { font: 1.25em/1.4em @serif-font; text-align: left; }
	h1.frontpage { font: 1.2em/1.4em @serif-font; }
	h1.frontpage-blog-title {
		font: 1.2em/1.4em @serif-font;
		float: none; 
		margin: 0; 
	}
	h1.frontpage { margin: 40px 0 20px 0; }
	.blog { 
		img, .wp-caption { width: 95%; }
		article {
			.wp-caption-text {
				margin: 5px 0 20px 0;
			}
		}
		#pricing-box { width: 70%; }
		#secondary-slider { display: none; }
		#secondary-slider-mobile { display: block; }
	}
}