/*
-----------------------------------------------
Figureground - 'Figureground_v6'
created: 2008.09.23
version:  2008.09.27
author: Nick Zlonis
----------------------------------------------- */

* {
	margin:0;
	padding:0;
}


/* =Structure
----------------------------------------------- */

body {
	background:#dfdaca url(/img/body_bg.jpg) center top no-repeat;
	color:#3d2500;
	font-family:"Helvetica Neue",helvetica,arial,sans-serif;
	font-size:90%;
	margin:0;
	padding:0;
	text-align:center;
	}

#errorbox {
	background:#f3e5a3 url(/img/alert_icon.gif) 10px 50% no-repeat;
	border:2px solid #e0d6a9;
	padding:20px 20px 20px 80px;
	left:260px;
	position:absolute;
	top:290px;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
}
	
#footer {
	border-top:2px solid #94a180;
	color:#9d9276;
	font-size:0.9em;
	height:70px;
	margin:20px 0 0 0;
	padding:20px 0 0 0;
	}
	body.contact #footer {
	height:220px;
	position:absolute;
	top:460px;
	width:900px;
	}

#form_container {
	background: url(/img/sent_icon.gif) -9999px -9999px no-repeat;
	height:440px;
	position:absolute;
	top:0px;
}
	
#head {
	background:#dfdaca url(/img/body_bg.jpg) center top repeat-x;
	height:100px;
	margin:0;
	padding:0;
	text-align:center;
	}
	#head .pad {
	background:url(/img/alert_icon.gif) -9999px -9999px no-repeat;
	margin:0 auto;
	text-align:left;
	width:900px;
	}
	
#main {	
	background:url(/img/screens_7.png) no-repeat;
	height:300px;
	left:470px;
	position:absolute;
	top:-10px;
	width:450px;
}
	body.contact #main {
	background:url(/img/screens_8.png) no-repeat;
	}
	body.portfolio #main {
	background:url(/img/screens_9.png) no-repeat;
	}

#nav {
	position:absolute;
	text-align:right;
	top:50px;
	}


#page {
	margin:10px auto 0 auto;
	position:relative;
	text-align:left;
	width:900px;
}
	body.home #page{
	margin:10px auto 0 auto;
	}
	body.portfolio #page{
	margin:10px auto 0 auto;
	}

.portfolio_box {
	float:left;
	margin-bottom:14px;
	width:300px;
}
.portfolio_box .pad {
	padding-right:30px;
}

#sentbox {
	background:#d9e6bf url(/img/sent_icon.gif) 10px 50% no-repeat;
	border:2px solid #a8b987;
	font-size:2em;
	left:290px;
	padding:20px 20px 20px 80px;
	position:absolute;
	top:290px;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;

}

.screen { 
	background:#fff;
	border:1px solid #c5bda8; 
	margin-bottom:10px;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
}

body.portfolio div#spacer {
	height:240px;
}

/* =Layout
----------------------------------------------- */

.column {
	float:left;
	width:300px;
}
	body.contact .column {
	padding-top:240px;
	width:440px;
	}
	body.home .column, body.portfolio .column {
	padding-top:240px;
	}
.column_ctr .pad {
	padding:0 15px 0 15px;
}
.column_l .pad {
	padding:0 30px 0 0;
}

.column_r .pad {
	padding:0 0 0 30px;
}
.column_wide {
	width:600px;
}
.column_wide .pad {
	0 15px 0 0;
}
#head .pad {
	margin:0 auto;
	width:900px;
}


/* =Typography
----------------------------------------------- */

h1 {
	background:url(/img/fg_logo.jpg) 0 34px no-repeat;
	color:#dfdaca;
	font-weight:lighter;
	height:84px;
	left:-15px;
	letter-spacing:-1px;
	position:relative;
	text-align:left;
	text-indent:-9999px;
	text-shadow:#000 0 0 8px;
	width:175px;
}
	h1 span {
	color:#c3df8f;
	}

h2 {
	border-top:2px solid #94a180;
	color:#3d2500;
	font-size:1.2em;
	font-weight:lighter;
	padding:12px 0 8px 0;
}
	h2.checkmark {
	background:url(/img/checkmark_icon.gif) 0 50% no-repeat;
	padding:12px 0 8px 20px;
	}
	h2.info {
	background:url(/img/info_icon.gif) 0 50% no-repeat;
	padding:12px 0 8px 20px;
	}
	h2#h2_main {
	border-top:none;
	color:#252d14;
	font-size:2.5em;
	position:absolute;
	text-shadow:#000 0 0 2px;
	top:60px;
	}
	body.home h2#h2_main {
	background:url(/img/h2_home.png) 0 0 no-repeat;
	height:86px;
	left:0px;
	text-indent:-9999px;
	width:384px;
	}
	body.portfolio h2#h2_main {
	background:url(/img/h2_portfolio.png) 0 0 no-repeat;
	height:86px;
	left:0px;
	text-indent:-9999px;
	width:384px;
	}
	body.contact h2#h2_main {
	background:url(/img/h2_contact.png) 0 0 no-repeat;
	height:86px;
	left:0px;
	text-indent:-9999px;
	width:384px;
	}
	h2.red {
	border-top:2px solid #6e372c;
	}
	h2.blue {
	border-top:2px solid #369;
	}

	h2 span {
	color:#9d9276;
	}


h3 {
	color:#3d2500;
	font-size:1.2em;
	font-weight:lighter;
	margin:0 0 8px 8;
	padding:12px 0 8px 0;
}

p {
	color:#333;
	line-height:1.3em;
	margin:0 0 1em 0;
}
	#sentbox p {
	margin:0;
	padding:0;
	}

ul#nav {
	list-style:none;
	position:absolute;
	top:40px;
	width:900px;
}
ul#nav li {
	float:right;
	margin-left:8px;
}

ul#portfolio_nav {
	float:right;
	font-size:0.9em;
	line-height:16px;
	list-style-type:none;
	margin:250px 0 0 0;
	padding:0;
	width:720px;
}

ul#portfolio_nav li {
	float:left;
	list-style-type:none;
	margin:0;
	padding:0;
	width:240px;
}


/* =Images
----------------------------------------------- */
a img { border:none; }
img.icon { vertical-align:middle; }

div.screen img {
	margin:4px;
}

	
/* =Form elements
----------------------------------------------- */
fieldset {
	border:none;
	margin:0;
	padding:0;
}

input#contact-submit {
	float:right;
}

input.name, input.email, input.subject {
	border:3px solid #cdc6b6;
	font-size:1.2em;
	margin:0 0 9px 0;
	padding:4px;
	width:400px;
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
}

input.submit {
	color:none;
}

label {
	color:#9d9276;
	display:block;
	padding:0 0 0 4px;
}
	label.cc {
	display:inline;
	}

textarea.message {
	border:3px solid #cdc6b6;
	font-family:"Helvetica Neue",helvetica,arial,sans-serif;
	font-size:1.2em;
	height:140px;
	margin:0 0 6px 0;
	padding:4px;
	width:440px;
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
}

input:focus, select:focus, textarea:focus {
	background-color:lightyellow;
	outline-size:3px;
	outline-color:#75e33e;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
}

#contact-submit:focus {
	background-color:transparent;
	outline-size:0;
	outline-color:none;
}

/* =Linkage
----------------------------------------------- */

a:link { color:#638448; text-decoration:none; }
a:visited { color:#638448; text-decoration:none; }
a:hover { color:#252d14; text-decoration:none; }
a:active { color:#222; text-decoration:none; }

#foot a:link { color:#fff; text-decoration:none; }
#foot a:visited { color:#fff; text-decoration:none; }
#foot a:hover { color:#fff; text-decoration:underline; }
#foot a:active { color:#d4af00; text-decoration:underline; }

#nav  a {
	display:block;
	margin:0;
	padding:8px 12px 7px 12px;
	-moz-border-radius: 14px; 
	-webkit-border-radius: 14px;
	}
#nav a:link { color:#c3df8f; }
#nav a:visited { color:#c3df8f; }
#nav a:hover { background:#111; color:#dfdaca; }
#nav a:active { background:#000; color:#fff; }

body.home ul#nav li.li3 a,
body.portfolio ul#nav li.li2 a,
body.contact ul#nav li.li1 a
	{
	color:#dfdaca;
	}

ul#portfolio_nav li a {
	border-left:1px solid #9aab7b;
	display:block;
	padding:8px 10px;
}

ul#portfolio_nav li a:link { color:#252d14; }
ul#portfolio_nav li a:visited { color:#252d14; }
ul#portfolio_nav li a:hover { color:#3d2500; }
ul#portfolio_nav li a:active { color:#222; }

ul#portfolio_nav li a:link span { color:#638448; }
ul#portfolio_nav li a:visited span { color:#638448; }
ul#portfolio_nav li a:hover span { color:#3d2500; }
ul#portfolio_nav li a:active span { color:#222; }

a.button {
	color:#f6f5f1;
	font-size:0.9em;
	padding:9px 26px 6px 12px;
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px;
}
a.button:link { background-color:#c0b7a2; color:#f6f5f1; }
a.button:visited { background-color:#c0b7a2; color:#f6f5f1; }
a.button:hover { background-color:#9d9276; color:#f6f5f1; }
a.button:active { background-color:#9a8f64; color:#fff; }

a.arrow { background:url(/img/arrow_icon.gif) right 50% no-repeat; }
a.close { background:url(/img/close_icon.gif) right 50% no-repeat }
a.lock { background:url(/img/lock_icon.gif) right 50% no-repeat; }
a.newsite { background:url(/img/newsite_icon.gif) right 50% no-repeat; }
a.zoom { background:url(/img/zoom_icon.gif) right 50% no-repeat; }

	
/* =Global
----------------------------------------------- */	
.floatr { float:right; }
.floatl { float:left; }
	
/* =Hacks
----------------------------------------------- */	
div.clear {
	display:block; 
	clear:both; 
	height:0;
	margin:0; 
	padding:0; 
	visibility:hidden; 
	}

#main, #h2_main, h2 { behavior: url(inc/iepngfix.htc) }


/* =Lightbox
----------------------------------------------- */	

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ 
	position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; 
	-moz-border-radius: 8px 8px 0 0; 
	-webkit-border-radius: 8px 8px 0 0;
}
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/img/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/img/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ 
	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; 
	-moz-border-radius: 0 0 8px 8px; 
	-webkit-border-radius: 0 0 8px 8px;
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }