/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
/* remember to define focus styles! */
:focus {outline:0;}
/* remember to highlight inserts somehow! */
ins {text-decoration:none;}
del {text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:collapse;border-spacing:0;}
/* END RESET */

body {
	position: relative;
	background: #E0F9FA url(../images/body-background.png) 0 0 repeat-x;
	color: #452C0E;
}
body.error {
	background: #3d270c url(../images/body-error-background.png) 0 0 repeat-x;
}

#overlayWrapper{
	z-index: 110;
	position: relative;
	display: none;
}

#overlay{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	background-color: #333;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

a{
	color: #2DAAB9;
}

a:hover{
	text-decoration: none;
}

h1#logo{
	position: absolute;
	top: 30px;
	left: 110px;
	display: block;
	width: 357px;
	height: 45px;
	background: transparent url(../images/eecoder-logo.png) 0 0 no-repeat;
}

	h1#logo a{
		display: block;
		width: 357px;
		height: 45px;
	}
	
		h1#logo a span{
			display: none;
		}
		
		h2#tagLine{
			position: absolute;
			text-indent: -5000em;
			top: 0;
			left: 0;
		}
	
#mainNavigation{
	position: absolute;
	top: 115px;
	left: 0;
	width: 100%;
	padding: 0 0 153px 0;
	background: transparent url(../images/nav-background.jpg) 0 100% repeat-x;
}

	#mainNavigation li{
		display: block;
		width: 100%;
		height: 51px;
	}
	
		#mainNavigation li a{
			display: block;
			height: 51px;
			line-height: 51px;
			background: transparent url(../images/nav-item-background.png) 0 0 repeat-x;
			color: #FFF;
			text-decoration: none;
			font-family: Avenir, Arial;
			font-weight: normal;
		}
		
			#mainNavigation li a span{
				text-align: right;
				display: block;
				width: 225px;
				padding: 0 25px 0 0;
				background: transparent url(../images/nav-item-hightlight.png) 105% 5px no-repeat;
			}
		
		#mainNavigation li a:hover{
			background-position: 0 -51px;
		}
		
		#mainNavigation li a.active{
			background-position: 0 -102px;
		}

#pageContent{
	position: relative;
	margin: 0 0 0 250px;
	padding: 12px 150px 80px 40px;
	top: 115px;
	background: #FFF url(../images/page-content-background.jpg) 0 100% repeat-x;
	width: 450px;
	font-size: 16px;
	color: #452C0E;
	font-family: Georgia;
}

	#pageContent p{
		font-size: 16px;	
		line-height: 1.4;
		margin: 0 0 30px 0;
	}
	
	#pageContent p + p{
		margin-top: -15px;
	}

	#pageContent h2{
		color: #E63C1B;
		font-family: Avenir, Arial;
		font-weight: normal;
		font-size: 26px;
		line-height: /*32px*/ normal;
		margin: 0 0 20px;
		margin-bottom: 5px;
	}
	
		#pageContent h2 em{
			font-weight: bold;
			font-style: normal;
		}
		
	#pageContent .columns{
		border-top: 1px dashed #86E0EB;
		margin: 15px 0 0 0;
		padding: 30px 0 0 0;
		overflow: hidden;
		font-family: Arial;
	}
	
		#pageContent .columns h2{
			font-size: 22px;
			margin: 0 0 10px 0;
		}
		
		#pageContent .columns h3{
			color: #C49D16;
			font-weight: normal;
			font-size: 14px;
			line-height: 1.2;
			margin: 0 0 5px 0;
		}

		#pageContent .columns p{
			margin-bottom: 10px;
			font-size: 14px;
			line-height: 1.3;
		}
		
			#pageContent .columns p + a{
				font-size: 13px;
			}
		
			#pageContent .columns .col{
				width: 190px;
				float: left;
				margin: 0 70px 0 0;
			}
			
			#pageContent .columns .col + .col{
				width: 150px;
				margin: 0 0 0 0;
			}
	
#successStories, #successStories div {
	width:215px;
	height:504px;
	position:absolute;
	top:0;
	left:0;
}
#successStories div blockquote {
	width: 210px;
	margin-left: 5px;
}
#successStories {
	background:url(../images/success-stories.png) 0 0 no-repeat;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:22px;
	font-style:italic;
	line-height:25px;
	color:#6f4716;
	top:77px;
	left:783px;
}
#successStories h2, #successStories a {
	text-indent:-9999px;
}
#successStories img {
	display:block;
	padding:0 0 0 6px;
}
#successStories blockquote {
	padding:98px 0 10px;
}
#successStories span {
	color:#e63c1b;
	margin: 0 -3px 0 1px;
}
/* negative text indent */
#successStories blockquote p {
	text-indent: -7px;
}
#successStories a {
	display:block;
	width:203px;
	height:70px;
	background:url(../images/more-details.png) 0 0 no-repeat;
	position:absolute;
	bottom:93px;
	left:6px;
}
#successStories a:hover {
	background:url(../images/more-details.png) 0 -70px no-repeat;
}
#footer{
	position: relative;
	font-family: Arial;
	font-size: 12px;
	margin: 115px 0 100px 290px;
}


/* INTERIOR */
.interior #pageContent {
	width:560px;
	padding-right:40px;
	position:relative;
	overflow:hidden;
}
.interior h3 {
	font-family: Avenir, Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height: 18px;
	color:#c69f16/*e63c1b*/;
	margin:20px 0 10px;
	font-weight: normal;
}
.interior #client  {
	position:relative;
	margin:0 0 20px;
}
.interior #client h3 {
	font-family: Avenir, Arial;
	font-size:16px;
	font-weight:normal;
	color:#452c0e;
	margin:0 210px 15px 0;
}
.interior h3 span {
	color:#e63c1b;
}
.interior h3 a {
	color:#c49d16 !important;
	text-decoration:none;
}
.interior h3 a:hover {
	text-decoration:underline;
}

body#about-page h3 {font-size: 21px; font-weight: normal; color: #452c0e; margin-bottom: 5px;}

.interior h4 {font-size: 14px; font-family: Arial, sans-serif; padding-bottom: 7px; margin-bottom: 5px; border-bottom: 1px dashed #86e0eb; margin-right: 200px; color: #e63c1b; font-weight: normal; font-style: italic;}

.interior #pageContent a {
	color:#452C0E;
}
.interior #pageContent p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.3;
	margin:0 40px 10px 0;
}
.interior #pageContent p.who {
	font-size:12px;
}
.interior #pageContent p.who strong {
	display:block;
	font-size:11px;
	text-transform:uppercase;
}
.interior #pageContent ol,
.interior #pageContent ul {
	margin:0 0 25px;
	margin: 0;
}
.interior #pageContent ol li,
.interior #pageContent ul li{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:1.3em;
	background:url(../images/bullet.gif) 0 5px no-repeat;
	padding:0 40px 0 15px;
	margin-bottom: 10px;
}
.home ul {
	margin:-10px 0 20px;
}
.home ul li {
	line-height:1.4;
	background:url(../images/bullet.gif) 0 8px no-repeat;
	padding:0 40px 0 15px;
	margin-bottom: 10px;
}
.home strong.red {
	color:#C49D16;
}
.interior #credits {
	width:190px;
	background-color:#221607;
	color:#fff;
	position:absolute;
	top:20px;
	right:0;
}
.interior #credits a {
	font-size:12px;
	color:#fff;
}
.interior #credits blockquote p {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	font-style:italic;
	margin-right:0;
	letter-spacing: -.01em;
}
.interior #credits blockquote p.who {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-style:normal;
	margin-top:-5px;
}
.interior #credits blockquote p.who strong {
	display:inline;
	font-weight:normal;
	text-transform:uppercase;
}
.interior #credits blockquote p.who a {
	font-size:11px;
}
p.who a {
	text-decoration:none;
}
p.who a:hover {
	text-decoration:underline;
}
.interior #credits blockquote p.full {
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
}
.interior #credits blockquote span {
	color:#86e0eb;
}
.interior #quote, .interior #design {
	padding:15px 20px 8px;
}
/* negative text-indent */
.interior #quote blockquote p.snippet{
	text-indent: -6px;
	padding: 0 !important;
}
/* pull the end quote mark in */
.interior #quote blockquote p.snippet span{
	margin: 0 -3px 0 1px;
}
.interior #design {
	background-color:#734a18;
	color:#e6ce94;
	border-top:1px solid #fff;
}
.interior #design p {
	font-size:12px;
	margin-right:0;
}
#controller-top {
	position:absolute;
	top:20px;
	right:40px;
	z-index: 99;
}
#controller-bottom {
	float:right;
	margin:20px 0 0;
}
.controller {
	width:190px;
	height:41px;
}
.prev, .thumbs, .next {
	display:block;
	height:40px;
	text-indent:-9999px;
	background:url(../images/controller2.gif) 0 0 no-repeat;
	float:left;
}
.prev {
	width:74px;
}
.thumbs {
	width:68px;
	background-position:-74px 0;
}
.next {
	width:48px;
	background-position:-143px 0;
}
a:hover.prev {
	background-position:0 -40px;
}
a:hover.thumbs {
	background-position:-74px -40px;
}
a:hover.next {
	background-position:-143px -40px;
}
.interior #login {
	margin:-12px 0 0 450px;
}
.interior #login p {
	font-size:12px;
}
.interior #login a {
	font-weight:bold;
	color:#2DAAB9;
}

hr {border: 0; display: block; height: 1px; clear: both; border-bottom:1px dashed #86E0EB; margin-top:20px; margin-bottom:20px;}


/* HOVER MESSAGES */
.hover {
	width:691px;
	height:497px;
	text-align:center;
	background:url(../images/hover-layer.png) 0 0 no-repeat;
	position:absolute;
	top:30px;
	left:225px;
	z-index:999;
}
.hover h2 {
	width:441px;
	height:68px;
	text-indent:-9999px;
	margin:16px auto;
}
.hover ul {
	margin:0 0 0 95px;
	overflow:hidden;
}
.hover ul li {
	float:left;
	display:inline;
	margin:0 10px 10px 0;
}
.hover ul li a, .hover ul li a img {
	display:block;
}
.hover ul li a {
	width:154px;
	height:84px;
	padding:3px;
	background-color:#66451d;
}
.hover ul li a:hover {
	background-color:#df3a1a;
}
.hover ul li a img {
	border:1px solid #fff;
}
.hover .message p {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	line-height:20px;
	text-align:/*left*/center;
	color:#333;
	margin:0 95px 10px;
}
.hover .message .controller {
	width:auto;
	height:auto;
	margin:25px 95px 55px;
}
.hover p.close, .hover p.close a {
	clear:both;
	width:441px;
	height:24px;
	margin:0 auto;
}
.hover p.close a {
	display:block;
	background:url(../images/hover-close.png) 0 0 no-repeat;
	text-indent:-9999px;
	margin:10px 0 0;
}
.hover p.close a:hover {
	background:url(../images/hover-close.png) 0 -24px no-repeat;
}
.error .hover h2 {
	background:url(../images/hover-error-title.png) 0 0 no-repeat;
}
#work-message h2 {
	background:url(../images/hover-message-title.png) 0 0 no-repeat;
}
#work-message p.close a {
	background:url(../images/hover-message-close.png) 0 0 no-repeat;
}
#work-message p.close a:hover {
	background:url(../images/hover-message-close.png) 0 -24px no-repeat;
}
#work-thumbs h2 {
	background:url(../images/hover-title.png) 0 0 no-repeat;
}
#work-thumbs a.prev-thumbs, #work-thumbs a.next-thumbs {
	display:block;
	height:50px;
	position:absolute;
	background:url(../images/thumbs-prev-next.png) 0 0 no-repeat;
	float:none;
	top:224px;
}
#work-thumbs a.prev-thumbs {
	width:62px;
	left:8px;
}
#work-thumbs a:hover.prev-thumbs {
	background:url(../images/thumbs-prev-next.png) 0 -50px no-repeat;
}
#work-thumbs a.next-thumbs {
	width:63px;
	background:url(../images/thumbs-prev-next.png) -63px 0 no-repeat;
	right:7px;
}
#work-thumbs a:hover.next-thumbs {
	background:url(../images/thumbs-prev-next.png) -63px -50px no-repeat;
}
#thanks h2 {
	background:url(../images/hover-thanks-title.png) 0 0 no-repeat;
}
#thanks .message p.closer {
	margin-bottom:215px;
}
.error .hover #sitemap {
	width:253px;
	height:140px;
	background:url(../images/hover-sitemap.png) 0 0 no-repeat;
	margin:55px auto 60px;
	position:relative;
}
.error .hover #sitemap ul {
	margin:0;
}
.error .hover #sitemap ul li a {
	width:77px;
	height:24px;
	position:absolute;
	background:none;
	padding:0;
	text-indent:-9999px;
	top:0;
}
.error .hover #sitemap ul li#site-home a {
	width:60px;
}
.error .hover #sitemap ul li#site-about a {
	left:64px;
}
.error .hover #sitemap ul li#site-dev a {
	width:118px;
	left:135px;
}
.error .hover #sitemap ul li#site-consult a {
	width:105px;
	top:48px;
	left:0;
}
.error .hover #sitemap ul li#site-work a {
	width:62px;
	top:48px;
	left:107px;
}
.error .hover #sitemap ul li#site-contact a {
	width:79px;
	top:48px;
	left:174px;
}
.error .hover #sitemap ul li#site-login a {
	width:65px;
	top:110px;
	left:95px;
}
.error .hover #sitemap ul li#site-home a:hover {
	background:url(../images/hover-sitemap.png) 0 -140px no-repeat;
}
.error .hover #sitemap ul li#site-about a:hover {
	background:url(../images/hover-sitemap.png) -64px -140px no-repeat;
}
.error .hover #sitemap ul li#site-dev a:hover {
	background:url(../images/hover-sitemap.png) -135px -140px no-repeat;
}
.error .hover #sitemap ul li#site-consult a:hover {
	background:url(../images/hover-sitemap.png) 0 -188px no-repeat;
}
.error .hover #sitemap ul li#site-work a:hover {
	background:url(../images/hover-sitemap.png) -107px -188px no-repeat;
}
.error .hover #sitemap ul li#site-contact a:hover {
	background:url(../images/hover-sitemap.png) -174px -188px no-repeat;
}
.error .hover #sitemap ul li#site-login a:hover {
	background:url(../images/hover-sitemap.png) -95px -250px no-repeat;
}
/* END HOVER MESSAGES */


/* START FORM ELEMENTS */
form, 
form textarea, 
form select,
form input {font-family: Arial, sans-serif; font-size: 14px;}

form div {width: 100%; overflow: hidden; padding: 10px 0;}
form div.field-group-end {border-bottom: 1px dashed #86e0eb; padding-bottom: 15px; margin-bottom: 5px;}

form input, 
form textarea {border: 2px solid #dfcb78;}
form input:focus, 
form textarea:focus {border-color: #e63c1b;}

form input, 
form textarea,
form select {padding: 4px 2px; color: #452C0E;}
form select {padding: 0;}

form input#submit {position: relative; left: 150px; padding: 5px 7px; display: block; float: left;}

form label {display: block; width: 140px; text-align: right; float: left; padding-right: 10px; padding-top: 3px; /*border-top: 1px solid #dfcb78;*/}
form label span {font-size: 10px; display: block; padding-top: 2px; text-transform: uppercase; letter-spacing: 1px;}

form input#contact-submit {border: 0; padding: 0; position: relative; left: 150px; height: 24px; width: 181px; background: url(../images/button-contact_submit.gif) no-repeat; text-indent: -9999px; cursor: pointer; margin-top: 5px;}
form input#contact-submit:hover {background-position: 0 100%;}
/* END FORM ELEMENTS */