/*-----------------------------------------------------------------------------
	Primary Styles
	Author: ImageWorks, LLC
	Questions: Please visit http://www.imageworksllc.com or call 860-647-7725 
-----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------- 
	Mixins (can be called in other items without being duplicated)
-----------------------------------------------------------------------------*/	
.page-width {width:998px;}
.curvy {-moz-border-radius:2px;-webkit-border-radius:2px;border-radius: 2px; behavior:url(css/pie/PIE.php);}
.shadow {box-shadow:0 0 8px #333; -o-box-shadow:0 0 8px #333; -moz-box-shadow:0 0 8px #333; -webkit-box-shadow:0 0 8px #333; behavior:url(css/pie/PIE.php);}
.linear-gradient {
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
	background: -moz-linear-gradient(#EEFF99, #66EE33);
	background: linear-gradient(#EEFF99, #66EE33);
	-pie-background: linear-gradient(#EEFF99, #66EE33);
	behavior:url(css/pie/PIE.php);
	}
/* Insert vertical pipes between nav items  */
.piped-nav {
	li:after {content:" | ";}
	li.last:after {content:"";}
	}
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/*-----------------------------------------------------------------------------
	Typography
-----------------------------------------------------------------------------*/	
a:link, a:visited {color: #69f;}
a:hover, a:active {color: #292b6a; text-decoration:none;}
a:active {text-decoration: none;}
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a img {border:none;}
h1, h2, h3, h4, h5, h6, th {padding:0; margin-top:0; line-height:1em;}
h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
.normal-font {font-size:12px; line-height:1.5em; margin-bottom:1em; color:#444;}
.normal-link {color:#69f;}
.small, small {font-size:10px;}
.large {font-size:14px;}
.extra-large{font-size:16px;}
.red {color:#F00;}
.blue {color:#00F;}
.green {color:#0F0;}
.yellow {color:#FF0;}
.quotes p {text-indent: -0.5em; padding-bottom:10px; border-bottom:#f4f4f4 1px solid; margin-bottom:10px;} /*usually used for testimonials, and such */
.quotes q:before {content: "\"";}
.quotes q:after {content: "\"";}
.quotes cite {display: block;text-align: right;font-style: normal;font-weight: bold;}

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/*----------------------------------------------------------------------------- 
	Containers
-----------------------------------------------------------------------------*/	
html {padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; background:#403e41 url(../images/template/html-back.png) top left repeat-x;}
body {text-align: center; padding:0; margin:0;}
#document {
	margin:0 auto /*this centers the web page in the middle of the screen*/; position:relative;
	.page-width;
	border:#ffcc00 1px solid;
	background-color:#fff;
	padding-bottom:15px;
	.clearfix;
	header, #main-nav, #teasers, #banner, #cta, footer {width:950px; margin-left:25px;}	
	}
header {
	height:137px; z-index:2; position:relative /*gives the ability to position child items within *this* container */ /*for CSS3 PIE */;
	#logo {position: absolute; top:29px; left:0;}
	#contact-link {position:absolute; top:25px; right:186px; height:26px; width:87px; background-color:#ffcc00; a {line-height:26px; color:#2c2b6e; font-size:14px; text-decoration:none;}}	
	#phone-number {color:#ffcc00; font-size:28px; position:absolute; top:20px; right:0;}
	#our-services-link {position:absolute; top:77px; right:145px; height:44px; background-color:#292b6a; width:196px; .curvy; a {line-height:44px; color:#fff; font-size:30px;}}
	#about-link {position:absolute; top:77px; right:0; height:44px; width:143px; background-color:#e9e9f0; .curvy; a {line-height:44px; color:#292b6a; font-size:30px;}}	
	}
#banner {height:249px; background:url(../images/template/banner-back.png); position:relative;  text-align:left; margin-bottom:10px;
	img {position:absolute; top:0; right:0; z-index:0;} 
	p {position:absolute; top:48px; left:44px; margin:0; padding:0; color:#fff; font-size:48px; line-height:1em; z-index:1;}
	.curvy;
	}
#teasers {
	.clearfix;
	margin-bottom:10px !important;
	.col-1, .col-2 {float:left; width: 189px; border:#fc0 1px solid; .curvy; height:240px; margin-right:9px; padding-top:10px;}
	.col-3 {float:right; width:548px; border:#fc0 1px solid; .curvy; height:250px; text-align:left; 
		.gutter {padding:30px 25px;
			h1 {font-size:36px; line-height:1em; color:#292b6a; span {display:block; color:#fc0;} margin-bottom:0; padding-bottom:0;}
			p {font-size:14px; line-height:1.5em; color:#777; margin:0; padding:0;}
		 }
		}
	.col-2-3 {float:right; width:747px; border:#fc0 1px solid; .curvy; height:250px; text-align:left; 
		.gutter {padding:30px 25px;
			h1 {font-size:36px; line-height:1em; color:#292b6a; span {display:block; color:#fc0;} margin-bottom:0; padding-bottom:0;}
			p {font-size:14px; line-height:1.5em; color:#777; margin:0; padding:0;}
		 }
		}
	}
#cta {
	background:#fc0 url(../images/template/free-evaluation.png) bottom right no-repeat;
	float:left;
	text-align:left;
	position:relative;
	h3, h4, p, a {color:#292b6a;}
	padding-bottom:50px;
	h3, h4 {margin:0; padding:0;}
	h3 {font-size:24px;}
	h4 {font-size:20px;}
	p, ul, ol {font-size:14px; line-height:21px; margin-top:0; padding-top:0;}
	ul, ol {margin:0 0 0 1em; padding:0;}
	margin-bottom:10px;
	.clearfix;
	.col-1 {float:left; width:270px; margin:40px 10px 0 40px;}
	.col-2 {float:left; width:300px; margin:40px 10px 0 0;}
	.col-3 {float:left; width:150px; margin:40px 0 0 0;}
	}
#content {
	float:left; text-align:left; z-index:1;
	width:948px; margin:0 0 10px 25px; border:#fc0 1px solid; .curvy;
	.clearfix;
	p, ul, ol, td {.normal-font;}
	#wide-content {width:888px; margin:30px;}
	#primary-content {
		float:left; width:560px; margin:30px; position:relative; /*for CSS3 PIE */	
		}
	#secondary-content {
		float:right; width:250px; margin:30px;  position:relative /*for CSS3 PIE */;
		ul, ol {margin-left:1em; padding-left:0;}
		}	
	}
footer {clear:both; position:relative; padding:20px 0;
	ul, ol, p, h5, a {margin:0 !important; padding:!important; font-size:11px; color:#777 !important; font-weight:normal;}
	}
/*----------------------------------------------------------------------------- 
	Navigation
-----------------------------------------------------------------------------*/	
#main-nav {
	ul {margin:0; padding:0;}
	li {display:inline; font-size:14px;color:#292b6a;
		a {line-height:30px; text-decoration:none; color:#292b6a;}
		a:hover, a:focus, a.active {color:#ccc;}
		a.active:hover {cursor: default;}
		}
	
	}
/*----------------------------------------------------------------------------- 
	Images
-----------------------------------------------------------------------------*/	
.img-right {float:right; margin:0 0 1em 1em;}
.img-left {float:left; margin:0 1em 1em 0;}
/*----------------------------------------------------------------------------- 
	Forms
-----------------------------------------------------------------------------*/	
input[placeholder], [placeholder], *[placeholder]{color: #999 !important;}
label {display:block; font-weight:bold;}