/*-----------------------------------------------------------------------------
Please visit http://lesscss.org/ for information on .less stylsheet use
To allow a .less file to function as a regular CSS file in Dreamweaver, 
please visit: http://www.kaisersblog.com/2011/09/less-css-in-adobe-dreamweaver/

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:950px;}
.curvy {-moz-border-radius:6px;-webkit-border-radius:6px;border-radius: 6px; 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);
	}
.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: #ead199;}
a:hover, a:active {color: #fff;}
a:active {text-decoration: none;}
h1, h2, h3, h4, h5, h6, th {padding:0; margin-top:0; color:#fff;}
h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
.normal-font, .hcard {font-size:14px; line-height:24px; margin-bottom:1em; color:#d4e3b5;}
.normal-link {color:#69f;}
.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;} /*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;}
/*----------------------------------------------------------------------------- 
	Containers
-----------------------------------------------------------------------------*/	
html {padding:0; margin:0; background:url(../images/template/html-back.png); font-family: 'Varela', sans-serif;}
body {text-align: center; background:url(../images/template/body-back.png) top center no-repeat;}
#document {
	margin:0 auto /*this centers the web page in the middle of the screen*/; position:relative;
	.page-width;
	.clearfix;
	header, nav, #banner, #content, #content-top, #content-bottom, .images, footer {.page-width;}	
	}
header {
	height:222px; z-index:2; text-align:left; position:relative /*gives the ability to position child items within *this* container */ /*for CSS3 PIE */;
	#logo {position: absolute; top:25px; left:8px;}
	#contact-info {
		position:absolute;
		top:95px;
		right:30px;
			p {color:#819881; text-align:right; font-size:24px; line-height:30px; strong {color:#fff; font-weight:normal;}}
		}		
	}
#content-top {height:60px; background:url(../images/template/content-btop.png) top left no-repeat; margin:0; padding:0;}
#content {
	clear:both;float:left; text-align:left; z-index:1;
	.clearfix;
	p, ul, ol, td {.normal-font;}
	strong {color:#fff;}	
	#banner {
		.col-1 {float:left; width:390px; margin-left:30px;}
		.col-2 {float:right; width:450px; margin-right:30px;}
		.clearfix;
		}
	#wide-content {width:890px; margin:30px;
		h1 {font-size:48px; text-transform:uppercase;}
	}
	#primary-content {
		float:left; width:560px; margin:0 0 0 30px; position:relative; /*for CSS3 PIE */
		h1 {font-size:48px; text-transform:uppercase;}
		}
	#secondary-content {
		float:right; width:280px; margin:0 30px 0 0;  position:relative /*for CSS3 PIE */;
		}	
	}
#index #content { background:url(../images/template/content-middle.png) top left repeat-y;}
#content-bottom {height:29px; background:url(../images/template/content-bottom.png) bottom left no-repeat; margin:0; padding:0; clear:both; margin-bottom:20px;}
#teasers {
	background:url(../images/template/teaser-back.png) top left repeat-x; height:273px; clear:both;
	.gutter {padding-top:40px;}
	}
footer {clear:both; position:relative; padding:20px 0;
	ul, ol, p, h5, a {margin-bottom:0 !important; font-size:11px; color:#819881 !important; font-weight:normal;}
	}
/*----------------------------------------------------------------------------- 
	Navigation
-----------------------------------------------------------------------------*/	
#main-nav {height:63px; margin-bottom:20px; background:url(../images/template/nav-border.png) top left repeat-x; font-family: 'Varela', sans-serif;
	ul {margin:0; padding:0; float:left; text-align:center;}
	li {float:left; font-size:16px; color:#ead199; list-style:none;
		a {float:left; display:block;line-height:63px; color:#ead199; padding:0 25px; text-decoration:none;}
		a:hover, a:focus, a.active {color:#fff; background:url(../images/template/nav-back.png) top center no-repeat;}
		a.active:hover {cursor: default;}
		}
	}
#footer-nav {.page-width;
	li {display:inline;}
	li:after {content:" | ";}
	li.last:after {content:"";}
	}
/*----------------------------------------------------------------------------- 
	Images
-----------------------------------------------------------------------------*/	
.img-right {float:right; margin:0 0 1em 1em;}
.img-left {float:left; margin:0 1em 1em 0;}
/* container for slides */
.images {
	position:relative;	
	height:50px;
	float:left;	
	cursor:pointer;
	text-align:center;
	p, ul, ol, td {.normal-font;}
}

/* single slide */
.images div {
	display:none;
	position:absolute;
	width:950px;
	top:0;
	left:0;		
	height:50px;
	p {color:#fff; font-size:16px;}
}

/* header */
/* tabs (those little circles below slides) */
.slidetabs {}

/* single tab */
.slidetabs a {}

/* mouseover state */
.slidetabs a:hover {}

/* active state (current page state) */
.slidetabs a.current {} 	


/* prev and next buttons */
.forward, .backward {}

/* next */
.forward 				{ background-position: 0 -30px; clear:right; }
.forward:hover 		{ background-position:-30px -30px; }
.forward:active 	 	{ background-position:-60px -30px; } 


/* prev */
.backward:hover  		{ background-position:-30px 0; }
.backward:active  	{ background-position:-60px 0; }

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
	visibility:hidden !important;		
}


/*----------------------------------------------------------------------------- 
	Forms
-----------------------------------------------------------------------------*/	
label {display: block;}
input[placeholder], [placeholder], *[placeholder]{color: #999 !important;}

/*----------------------------------------------------------------------------- 
	Tables
-----------------------------------------------------------------------------*/	
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/*
"Tiger Striping"
if you want the rows to alternate colors, add class="stripe" to the 
table tag on your web page.
*/
.stripe {width:100%; border-collapse:collapse;}
.stripe td {padding:5px;}
.stripe tr.alt td {background-color:#f4f4f4} /*This will make every other table row a different back ground color. */
.stripe tr.over td {background-color:#000 !important;} /*This will make the background color change when you hover over a table row. */