/********************************************************************************************

	TOC:	- GENERAL & HEADINGS
			- STRUCTURE
			- NAVIGATION
			- CONTENT & FORMS
			- FOOTER
			- LIGHTBOX


********************************************************************************************/


/****************************************  GENERAL  ****************************************/

/* backslash hack \*/
html, body {height:100%;}
/* end hack */

html, body, ul {
	border:0;
	margin:0;
	padding:0
}

body {
	background:#F6F2EE url(images/bg_wood.jpg) repeat-x;
	color:#4F3426;
	font:0.8em Arial, Helvetica, sans-serif;
}

img {border:none}


/*** Links ***/

a {outline:none}
a:link, a:visited {color:#CC3300; text-decoration:underline}
a:active, a:hover {color:#FF9966; text-decoration:none}

#requests a:link, #requests a:visited {color:#4F3426; font-weight:bold; text-decoration:none}
#requests a:active, #requests a:hover {color:#FF9966; font-weight:bold; text-decoration:none}
#requestsclose a:link, #requestsclose a:visited {color:#4F3426; font-weight:bold; text-decoration:none}
#requestsclose a:active, #requestsclose a:hover {color:#FF9966; font-weight:bold; text-decoration:none}

#services a:link, #services a:visited {color:#999; text-decoration:none}
#services a:active, #services a:hover {font-weight:bold}

.project strong a:link, .project strong a:visited {color:#4F3426; text-decoration:none}
.project strong a:active, .project strong a:hover {color:#86604d; text-decoration:none}

.projects strong a:link, .projects strong a:visited {color:#4F3426; text-decoration:none}
.projects strong a:active, .projects strong a:hover {color:#86604d; text-decoration:none}

a.arrow {background:url(images/icon_arrow.png) 0 50% no-repeat; padding-left:15px}


/*** Headings ***/

h1 {
	color:#B62015;
	font:bold 2.7em "Lucida Sans", "Lucida Grande", Helvetica, Arial sans-serif;
	letter-spacing:-0.08em;
	margin:0 0 30px 0;
	padding:0;
}

h1.intro {font-size:2.75em; letter-spacing:-0.05em; margin:0 0 30px 0}
#services h1, #side h1 {
	color:#4F3426;
	font:italic 1.7em "Lucida Sans", "Lucida Grande", Helvetica, Arial sans-serif;
	letter-spacing:-0.05em;
	margin:15px 0;
	padding:0
}

#side h1.line {background:url(images/bg_h1.gif) 0 20px repeat-x;}
#side h1 span {background:#F6F2EE; padding-right:7px}
#requests h1, #requestsclose h1  {margin:5px 0 15px 0;}

#footer h1 {
	background:url(images/bg_h1.gif) 0 22px repeat-x;
	color:#4F3426;
	font:italic 1.9em "Lucida Sans", "Lucida Grande", Helvetica, Arial sans-serif;
	letter-spacing:-0.05em;
	margin:15px 0;
	padding:0
}

#footer h1 span {background:#EBE2D9; padding-right:7px}

h2 {
	background:url(images/bg_h2.gif) bottom no-repeat;
	color:#917260;
	font:1.3em "Lucida Sans", "Lucida Grande", Helvetica, Arial sans-serif;
	letter-spacing:-0.05em;
	margin:30px 0 20px 0;
	padding:0 0 4px 0
}


/****************************************  STRUCTURE  ****************************************/

#wrapper {
	width:955px;
	margin:0 auto;
	min-height:100%;
	margin-bottom:-265px;
	height:auto;
}

*html #wrapper {height:100%;}

#header {height:100px; width:955px}

#logo {
	background:url(images/logo.png) left no-repeat;
	height:87px;
	float:left;
	margin-top:10px;
	position:absolute;
	text-align:left;
	width:279px
}

* html #logo {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/logo.png")}

#navigation {float:right; height:30px; margin-top:51px}

#contentwrapper {padding:50px 0; width:955px}

#content {float:left; width:616px}
#contenthome {height:230px; width:955px}
	#intro, #introde {float:left; font-size:1.3em; line-height:1.3em; width:616px}
	#services {background:url(images/bg_paper.png) no-repeat; float:right; height:222px; padding:4px 18px; width:243px}
	#spotlight {clear:both; width:955px}
		#left {float:left; width:477px}
		#right {float:right; width:477px}

#side {float:right; width:280px}
	#subnavigation {background:url(images/bg_paper.png) no-repeat; height:254px; padding:4px 18px 55px 18px; width:243px}
	#news {padding:20px 0 60px 0px}
	#requests {background:url(images/bg_requests_open.png); height:98px; padding:20px; width:239px}
	#requestsclose {background:url(images/bg_requests_close.png); height:98px; padding:20px; width:239px}

#footer {background:#EBE2D9 url(images/bg_footer_bottom.gif) bottom repeat-x; height:265px; min-width:955px}
	#footertop {background:url(images/bg_footer_top.gif) repeat-x; height:14px}
	#footerwrapper {margin:0 auto; width:955px}
	#footerleft {background:url(images/scribble_about.gif) 105px 188px no-repeat; float:left; padding-bottom:10px; width:400px}
	#footerleftde {background:url(images/scribble_about_de.gif) 105px 204px no-repeat; float:left; padding-bottom:10px; width:405px}
	#footerright {float:right; width:300px}


/****************************************  NAVIGATION  ****************************************/

#navigation ul, #subnavigation ul {
   list-style:none;
   margin:0;
   padding:0;
}

#navigation ul li {display:inline}

#navigation ul li a {
	display:block;
	color:#C8AE8B;
	height:30px;
	float:left;
	font-weight:bold;
	background:url(images/tab_inactive.gif) top left no-repeat; 
	margin:0 3px 0 0;
	text-decoration:none
}

#navigation ul li a span {
	display:block;
	height:22px;
	float:left; /* IE 6 Fix */
	padding:7px 20px 1px 20px;
	background:url(images/tab_inactive_stop.gif) top right no-repeat;
}
		
#navigation ul li a:hover, #navigation ul li a.active {background:url(images/tab_active.gif) top left no-repeat; color:#4F3426}
#navigation ul li a:hover span, #navigation a.active span  {background:url(images/tab_active_stop.gif) top right no-repeat; cursor:pointer}


/*** Subnavigation ***/

#subnavigation li a {
	display:block;
	color:#999;
	height:13px;
	text-decoration:none;
	padding:12px 0 12px 25px
}

#subnavigation li a:hover {
	color:#B62015;
	font-weight:bold;
}

#subnavigation li .active {
	background:url(images/subnavigation_active.gif) 0 2px no-repeat;
	color:#B62015;
	font-weight:bold;
}

/****************************************  CONTENT & FORMS  ****************************************/

div#intro {background:url(images/scribble_reanimate.gif) 102px 125px no-repeat}
div#introde {background:url(images/scribble_reanimate.gif) 102px 144px no-repeat}

div.notfound {font-size:1.3em; line-height:1.3em}
div.notfound ul {margin-left:30px}
div.notfound li {font-size:0.77em;}

#contentwrapper span.marker {background:#EBE2D9; padding:0 3px}
#footer span.marker {background:#DFD2C5; padding:0 3px}

.separator {background:url(images/bg_separator.gif) no-repeat; float:left; height:2px; margin:40px 0; width:616px}
.separatorprojects {background:url(images/bg_separator.gif) no-repeat; height:2px; margin:30px 0 35px 0; width:616px}

div.project {height:270px; left:-40px; padding-bottom:50px; position:relative; width:511px}
	#right div.project {left:-5px}
	div.txt {margin-left:45px}
div.project img, div.projects img {margin-right:10px;}
div.projects {height:160px; width:616px}
div#stop {margin-bottom:50px;}

.small {color:#8F866D; font-size:0.8em}

#services ul {list-style:none; margin:0; padding:0}
#services li {background:url(images/icon_ok.gif) 1px 1px no-repeat; color:#999; padding:0 0 8px 23px}

div.date {float:left; font-weight:bold; width:80px}
div.news {float:left; width:200px}
div.newsclear {clear:both; padding-bottom:20px}

.photos img {margin:0 15px 15px 0}

.flickr {float:right; height:38px; position:relative; width:65px}


/*** Form ***/

form {width:300px; margin:0; padding:0}
form p {clear:left;	margin:0; padding:0}
label {float:left; width:100px; margin:4px 0 5px 0}

input, textarea, select {
	background:#F6F2EE;
	border:#fff solid 1px;
	color:#4F3426;
	font:1em Arial, Helvetica, sans-serif;
	width:188px;
	margin:0 0 5px 0;
	padding:2px 3px 2px 3px;
}

textarea {height:57px}

#submit {
	background:url(images/button_send.gif) 0 2px no-repeat;
	border:none;
	height:36px;
	margin:0 0 0 99px;
	width:91px
}

.error {
	background:#FDF5F5;
	border:1px solid #F01C26;
}

#red {
	color:#F01C26;
	display:block;
	height:25px;
	margin:0;
	padding:0;
}

#lastname {
	z-index:999;
	position:absolute;
	height:0;
	width:0;
	border:none;
	background:none;
	margin:0;
	top:0;
	left:0;
	clear:both;
	font-size:0px;
	line-height:0px;
}

/****************************************  FOOTER  ****************************************/

#footer a:link, #footer a:visited {color:#B4AF99; text-decoration:underline}
#footer a:active, #footer a:hover {color:#996633}

#top {float:right; left:290px; position:relative; top:-25px; width:63px}


/****************************************  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: #000; width: 250px; height: 250px; margin: 0 auto; }
#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(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

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

#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; }