/*-----TITLE: Global screen styles | AUTHOR: Emily P. Lewis | UPDATED: 10/09/07-----*/
/*-----COLORS: Orange - #ec8a1b | Blue - #00007a | Dark brown - #5f5143 | Tan - #ceb7a0-----*/
/*---STRUCTURE/LAYOUT---*/
/*Height values on HTML and BODY required for sticky footer*/
html {height:100%;}
body{font:small Tahoma, Arial, Helvetica, sans-serif; background: #feedc1 url(/images/site/pageBG.jpg) repeat-y center top;/*background-attachment:fixed;*/color: #5f5143;width: 920px; margin: auto;height:100%;}
/*Height value ensures content, regardless of size, fills the window*/
#outerContainer {background:#ceb7a0 url(/images/site/topGradient.png) repeat-x 0 15px;height:100%;}
/*Relative positioning and min-height required for sticky footer*/
#innerContainer {position: relative;min-height: 100%;background:transparent url(/images/site/bottomGradient.png) repeat-x 0 100%;}
/*Min-height ensures top and bottom gradients don't overlap on pages with short content; Bottom padding ensures sidebar & content don't fall behind sticky footer (must be same value as height of #stickyFooter)*/
#main {min-height:331px;margin: 0 15px 0 0;padding-bottom:146px;}
/*All values are required for sticky footer except BG image*/
#stickyFooter {position: absolute;bottom:0;width:100%;background:#ceb7a0 url(/images/site/footerBG.png) no-repeat 0 100%;height:146px;}
/*--Positioning--*/
.clearL {clear:left;}
.clearR {clear:right;}
.clearB {clear:both;}
/*--Display--*/
.printOnly, .nonVisual, #skipOptions {display:none;}
/*---TYPE ELEMENTS---*/
abbr, acronym{cursor:help; border-bottom:1px dotted #feedc1;}
strong {font-weight:bold;}
em {font-style:italic;}
address {font-style:normal;}
.alert {color: #f60;}
/*--Links--*/
/*IE needs cursor specified for links that are styled with images*/
a, a:link, a:visited {color: #5f5143;cursor:pointer}
a:hover, a:focus, a:active {color: #000;}
/*-Specialized Links-*/
/*Back to Top*/
.top {margin-top:15px;text-align:right;width:497px;margin-left:118px;font-size:75%;}
.top a, .top a:link, .top a:visited {display:block;color: #ec8a1b;text-decoration:none;text-transform:uppercase;padding-right:10px;padding-bottom:4px;padding-top:5px;background:url(/images/site/backToTop.png) no-repeat 100% -21px;}
.top a:hover, .top a:focus, .top a:active {color:#5f5143;background-position:100% -67px}
/*Action*/
.action {font-size:85%;}
.action a, .action a:link, .action a:visited {color: #ec8a1b;text-decoration:none;text-transform:uppercase;padding-left:14px;background:url(/images/site/arrow.gif) no-repeat 0 -7px;}
.action a:hover, .action a:focus, .action a:active {color:#5f5143;background-position:0 -25px;}
/*vCard download*/
.downloadVcard a{padding-left:20px; background:url(/images/site/vCard.gif) no-repeat 0 1px;}
a.map {padding-left:20px; background:url(/images/site/map.png) no-repeat 0 0;}
/*---FORMS---*/
form {font-size:90%;}
form p {font-weight:bold;font-style:italic;height:1%;}
/*Clear:left necesary for Safari; doesn't affect other browsers*/
fieldset{border:0;border-top:1px solid #5f5143;padding:10px 0 0 0;margin-bottom:25px;clear:left;}
fieldset.button{border:0;padding:0;margin-top:-20px;}
legend{font-weight:bold;margin:0 0 10px 0;background:#f7f3ef;border:1px solid #5f5143;border-top:2px solid #5f5143; border-bottom:2px solid #5f5143;padding:5px;font-size:110%;} 
label{float:left;padding:0 15px 15px 0;margin-left:10px;}
input, select, textarea{clear:left;float:left;border:1px solid #5f5143;padding:3px;margin-top:3px;font:100% Tahoma, Arial, Helvetica, sans-serif;color: #5f5143;}
input:focus, select:focus, textarea:focus, input:active, select:active, textarea:active{border:1px solid #ec8a1b;background:#f7f3ef}
input, .checkbox, .radio {width:272px;}
input.large {width:580px;}
input.small {width:125px;}
select{padding:2px 0;min-width:278px;}
option{padding:3px 10px 0 10px}
.other {margin-top:-10px;}
.checkbox input, .radio input{display:inline;width:20px;margin:0 5px 0 0;padding:0;border:0}
.errFld{border:1px solid #de3831;background:#fff3d5}
.errMsg{color:#de3831;clear:left;margin:-30px 0 45px 0;white-space:pre;font-weight:bold}
form label .errMsg{margin:0;padding:0}
/*Submit Buttons*/
#submit{width:auto;border:1px solid #5f5143;border-top:2px solid #5f5143; border-bottom:2px solid #5f5143;background:#f7f3ef url(/images/site/arrow.gif) no-repeat 90% -19px;padding:5px 20px 5px 3px;font-weight:bold;color:#5f5143;text-transform:uppercase;font-size:100%;}
#submit:hover, #submit:active{cursor:pointer;color:#ec8a1b;background-position:90% -1px;border-color:#ec8a1b}

/*---HEADER---*/
#header {background:transparent url(/images/site/headerBG.png) repeat-x 0 0;height:210px;}
/*Padding is less than the 15px to account for drop shadow*/
#company {float:left;margin-top:71px;padding-left:10px;}
/*--Logo--*/
#company h1 {position: relative;width: 232px;height:117px;font-weight:bold;}
#company h1 span {position: absolute;top: 0;left: 0;width: 232px;height: 117px;background: url(/images/site/logo.png) no-repeat 0 0;}
/*--Tagline--*/
#company p {position: relative;width: 232px;height: 22px;}
#company p span {position: absolute;top: 0;left: 0;width: 232px;height: 22px;background: url(/images/site/tagline.png) no-repeat;}
#primaryNav, #featuredProject {float:right;}
/*--Primary (Top) Navigation--*/
/*Padding is less than the 15px to account for drop shadow; line-height for when images are off (visually mimics padding)*/
#primaryNav {margin-bottom:18px;padding-right:12px;font-size:85%;line-height:4;}
#primaryNav li {float:left;}
#primaryNav li a {display:block;position:relative;height:53px;width:50px;}
#primaryNav li a span{position:absolute;top:0;left:0;height:53px;width:50px; background: url(/images/site/navigation.png) no-repeat 0 -53px;}
#primaryNav .home a:hover span {background-position: 0 -159px;}
#primaryNav .about a {width:80px;}
#primaryNav .about a span {width:80px;background-position: -53px -53px;}
#primaryNav .about a:hover span {background-position: -53px -159px;}
#primaryNav .services a {width:69px;}
#primaryNav .services a span {width:69px;background-position: -132px -53px;}
#primaryNav .services a:hover span {background-position: -132px -159px;}
#primaryNav .projects a {width:71px;}
#primaryNav .projects a span {width:71px;background-position: -200px -53px;}
#primaryNav .projects a:hover span {background-position: -200px -159px;}
#primaryNav .faq a {width:50px;}
#primaryNav .faq a span {width:50px;background-position: -271px -53px;}
#primaryNav .faq a:hover span {background-position: -271px -159px;}
#primaryNav .contact a {width:82px;}
#primaryNav .contact a span {width:82px;background-position: 100% -53px;}
#primaryNav .contact a:hover span {width:82px;background-position: 100% -159px;}
/*-Section Indicators-*/
#about #primaryNav .about a span{background-position: -53px -159px;}
#services #primaryNav .services a span{background-position: -132px -159px;}
#project-gallery #primaryNav .projects a span{background-position: -200px -159px;}
#faq #primaryNav .faq a span{background-position: -271px -159px;}
#contact #primaryNav .contact a span{background-position: 100% -159px;}
/*Section Home (links appear inactive)*/
#about.sectionHome #primaryNav .about a, #services.sectionHome #primaryNav .services a, #project-gallery.sectionHome #primaryNav .projects a, #contact.sectionHome #primaryNav .contact a {cursor:default;}
/*--Featured Project--*/
/*Padding is less than the 15px to account for drop shadow*/
#featuredProject {clear:right;background:url(/images/site/featuredProjectBG.png) no-repeat 0 0;height:139px;width:655px;padding-right:10px;}
#featuredProject img {margin:5px 10px;}
/*---CONTENT---*/
/*Min-height required so gradient doesn't get cut off*/
#content {float:right;background:#fff url(/images/site/largeContentBG.png) no-repeat 0 0;margin-top:15px;width:615px;padding:15px;min-height:174px}
/*--Headings--*/
#content h2, #content h3, #content h4, #content h5, #content h6 {font-weight:bold;margin-bottom:10px;margin-top:5px;}
#content h2 {font-size:145%;}
#content h2 .separator {color:#ec8a1b;font-size:150%;line-height:0;}
#content h3 {font-size:135%;font-style:italic;}
#content h4 {font-size:105%;}
#content h6 {font-style:italic;}
#content p, #content ul, #content dl, #content ol {line-height:1.65;margin-bottom:15px;}
/*--Unordered Lists--*/
#content ul {margin-left:10px;}
#content ul li {padding-left:15px;background: url(/images/site/bullet.gif) no-repeat 0 8px;}

/*--Ordered Lists--*/
#content ol {margin-left:30px;list-style-type:decimal;}
#content ol li {font-weight:bold; font-size:100%;color: #ec8a1b;}
#content ol li span {font-weight:normal;font-size:95%;color:#5f5143}

/*--Definition Lists--*/
#content dl dt {font-weight:bold;}
/*-DT and DD display inline-*/
#content dl.inline dt {margin-right:8px;}
#content dl.inline dt, #content dl.inline dd {display:inline}
#content dl.inline dd.description {display:block;padding-left:15px;padding-bottom:15px;}
#content dl.inline dd.detail {margin-right:400px;}
/*-DT displays with bullets-*/
#content dl.withBullets dt {padding-left:15px;background: url(/images/site/bullet.gif) no-repeat 0 5px;}
/*--With multiple DTs and DDs per DT--*/
#content dl.multiple {margin-bottom:5px;}
#content dl.multiple dt {float:left;margin-right:8px;}
#content dl.multiple dd {padding-left:15px;padding-bottom:10px;}
#content dl.multiple.withBullets dt {background-position:0 7px;}
/*--Quotes--*/
blockquote {background:url(/images/site/openQuote.gif) no-repeat 0 4px;margin-bottom:30px;padding-left:20px;padding-top:10px;}
blockquote p {padding-right:20px;}
blockquote .citation {margin-top:-10px;text-align:right;background:url(/images/site/closeQuote.gif) no-repeat 100% 100%;padding-bottom:5px;}
blockquote cite {font-style:italic;}

/*--Photos--*/
.photo {border:1px solid #ccc; padding:5px;background:#fff;}
.portrait, .clientLogo {float:right;margin:0 0 10px 10px;}
img.full {margin-bottom:5px}

/*-- LINKS --*/
.offsite {padding-left:13px;background: transparent url(/images/site/icon_offsite.gif) no-repeat 0 -19px;}
.offsite:hover {background-position:0 3px}

/*---SIDEBAR---*/
/*Top margin is less than 15px to account for drop shadow*/
#sidebar {float:left; width:245px;margin-top:13px;}
/*--Secondary (Left) Navigation--*/
/*Left margin is less than 15px to account for drop shadow; height value for IE6 & 7 peekaboo bug (doesn't affect other browsers);font-size is odd number to support Opera*/
#secondaryNav {margin-left:10px;margin-bottom:15px;font-size:93%;background:url(/images/site/secondaryNavMiddleGradient.png) repeat-y 0 0;}
#secondaryNav #navContain {background:url(/images/site/secondaryNavTopGradient.png) no-repeat 0 0;}
#secondaryNav ul {padding:5px 25px 30px 25px;background:url(/images/site/secondaryNavBottomGradient.png) no-repeat 0 100%;min-height:100px;}
#secondaryNav ul li {padding-top:15px;}
#secondaryNav ul li ul {background:none;padding:0 15px;min-height:0;}
#secondaryNav h2 {position: relative;width: 241px;height:23px;}
#secondaryNav h2 span {position: absolute;top: 0;left: 0;width: 241px;height: 23px;background: url(/images/site/secondaryNavigation.png) no-repeat 0 -23px;}
/*-Section Indicators-*/
#services #secondaryNav h2 span {background-position:0 -69px;}
#project-gallery #secondaryNav h2 span {background-position:0 -114px;}
#contact #secondaryNav h2 span {background-position:0 -160px;}
#faq #secondaryNav h2 span {background-position:0 -206px;}
/*-Current Page Indicator-*/
#secondaryNav ul .currentPage {font-weight:bold;padding-right:25px;background: url(/images/site/arrow.gif) no-repeat 100% -24px;text-decoration:none;cursor:text;}
#secondaryNav ul .currentPage:hover {color: #5f5143;}
/*--Company Blurb--*/
/*Left margin is less than 15px to account for drop shadow*/
#companyBlurb {width: 230px;height: 215px;text-indent:-5000px;background: url(/images/site/companyBlurbTransparent.png) no-repeat 0 0;margin-left:10px;}

/*---PROJECT GALLERY---*/
#projectGallery {overflow:hidden;}
#projectGallery .imageElement {
	float:left;
	margin-right:12px;
	margin-bottom:12px;
	overflow:hidden;
	position:relative;
	border-radius: 3px;
	-moz-border-radius:3px;
	border:1px solid #ccc;
	background:#fff;
	padding:5px;
	width:185px;
}
#projectGallery .imageElement:hover {
	background:#ccc;
	border-color: #dedede #aaa #aaa #dedede;
	z-index:99;
}
#projectGallery .imageElement.right {margin-right:0;}
#projectGallery .imageElement p {
	position:absolute;
	bottom:0;
	opacity:0;
	background: #ccc;
	color:#111;
	width:177px;
	margin:0;
	padding:3px 10px;
	text-align:center;
	line-height:1.1;
	-webkit-transition:opacity 200ms linear;
	-moz-transition:opacity 200ms linear;
	transition:opacity 200ms linear;
	text-shadow:0 -1px 0 rgba(0,0,0,0.15),
				0 1px 0 rgba(255,255,255,0.8)
}
#projectGallery .imageElement:hover p {
	opacity:1;
	-webkit-transition:opacity 400ms linear;
	-moz-transition:opacity 400ms linear;
	transition:opacity 400ms linear;
}
#projectGallery .imageElement img {
	opacity:0.5;
	-webkit-transition:opacity 200ms linear;
	-moz-transition:opacity 200ms linear;
	transition:opacity 200ms linear;
}
#projectGallery .imageElement:hover img {
	opacity:1;
	-webkit-transition:opacity 400ms linear;
	-moz-transition:opacity 400ms linear;
	transition:opacity 400ms linear;
}
#projectGallery .imageWrap {
	display:block;
	overflow:hidden;
	top:5px;left:5px;
}
#projectGallery .imageElement a {
	color:#000;
	text-decoration:none;
}

/*---FOOTER---*/
/*Padding bottom is required for Opera support - removing top padding resolves in other browsers; font size required for consistent display in Safari*/
#footer {position:absolute; bottom:0; padding-bottom:15px;color: #fff;font-size:86%;padding-left:15px;padding-right:15px;}
#footer a {color: #fff;}
#footer .vcard {float:left;width:230px;margin-right:15px;line-height:1.15;}
#footer .vcard .url {font-weight:bold; text-decoration:none;}
#footer .vcard .url:hover {text-decoration:underline;}
#footer .vcard .street-address {display:block;}
#footer .downloadVcard {margin-top:10px;}

#copyTechnical {float:right;width:645px;padding-top:87px;}
#feeds {float:left;}
#copyright {float:right;}
#feeds dd {float:left;margin-right:40px;margin-left:10px;}