/* CSS scheme for Jo Plumbe
   by Tom Lwis (tom@webstarsltd.com) 
   @2006.10.21 */


/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */

body {
 padding-top: 3px;
 background-color: White;
 color: Black;
 font: .8em/normal Arial, Helvetica, sans-serif;
 text-align: center;
}
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix { display: inline-block; }
/* hide from ie/mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* end hide */


a,
a:visited {
 color: #a7a9ac;
}
a:hover,
a.on {
 color: Black;
}

p { padding: 10px 0; }



div.container {
 position: relative;
 width: 760px;
 margin: 0 auto;
 text-align: left !important;
}
#content {
 padding: 0px 0;
}
#header {
 padding: 10px 25px;
 background-color: #c4c6ce;
 text-align: left !important;
}
#header div.container {
 background: url("images/circles.gif") top right no-repeat;
}

h1 {
 position: absolute;
 top: 5px;
 left: 0;
 z-index: 1;
}



/* Navigation */

#nav {
 width: 254px;
 margin-left: 202px;
 padding: 5px 0;
 border-left: solid 2px #ffffff;
 border-right: solid 2px #ffffff;
 background: #c4c6ce url("images/bg_nav.gif") top center repeat-y;
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 250px;
}
html>#nav {
 width: 250px;
} 
#nav li {
 float: left;
 width: 125px;
}
#nav li a,
#nav li a:visited {
 display: block;
 padding: 0 12px;
 color: Black;
}
#nav li a:hover,
#nav li a.on {
 color: White !important;
}

.left{
	float:left;
	width:455px;
}
.right{
	float:left;
	width:250px;
	padding:10px 0 0 30px;
}
.clear{
	clear:both;
}



/* Main layers */

#maximum_image_area {
 float: left;
 margin-top:20px;
 width:530px;
 background: url("images/loading.gif") center center no-repeat;
}
#image_area {
 width: 455px;
 height: 455px;
 float:left;
 margin:20px 30px 0px 0px; 
}
#description {
 position: relative;
 float: left;
 margin-top:20px;
 height:480px;
}
#description p {padding-bottom:2px;}
#dline {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 0 !important;
}
#thumbnails {
 position: relative;
 float: left;
 width: 202px;
 height: 455px;
 margin-top:20px
}
#th {
 float: left;
 margin: 0px 10px 10px 0px;
}



/* Backward & forward buttons, 
 descriptive text 

#browse { margin-top: 1em; }
#browse li {
 float: left;
 width: 33%;
}
#desctext {
 width: 34% !important;
 text-align: center;
}
#backward { text-align: right; }
#backward, #forward { margin-top: 5px; }
#backward img, #forward img { margin: 0 5px; }

#project_links li { float: none !important; width: 100% !important; }
*/

#browse {
 position: absolute;
 bottom: 0;
 left: 0;
}
#browse #buttons { padding: 15px 0 0; }
#browse #buttons img { margin-right: 20px; }


/* Contact */

#contact_notes {
 float: left;
 width: 202px;
 padding: 20px 0;
}
#contact_form {
 float: right;
 width: 558px;
 background-color: #f2f3f6;
}
#contact_form form {
 padding: 10px 0 50px 0;
}
#contact_form textarea {
 width: 247px;
 height: 75px;
 background-color: White;
 border: 0;
 font-family: Arial, sans-serif;
 font-size: 1em;
}
#contact_form label {
 display: block;
 padding: 5px 0;
}
#contact_form input.text {
 width: 247px;
 border: 0;
 padding: 2px 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1em;
}
#contact_form ul li {
 float: left;
 width: 100%;
 margin: 2px 0;
}
#contact_form ul li li {
 float: left;
 width: 247px;
 padding-left: 21px;
}
#contact_form ul li li.opposite {
 float: right;
 padding: 0 21px 0 0 !important;
}
#contact_form ul li li.buttons {
 text-align: right;
}

#clickHere a:hover {color: #a7a9ac;}

input#submit{ background:url("images/button_submit.gif") no-repeat; border:none; width:61px; height:21px; }
input#submit:hover{ background-position: left bottom!important; cursor:pointer; }
input#reset{ background:url("images/button_reset.gif") no-repeat; border:none; width:56px; height:21px; }
input#reset:hover{ background-position: left bottom!important; cursor:point

div#fade{color:#ccc; margin-top:600px; font-size:0.8em;}
div#fade h2{ font-size:1em; }


/* Links */

#links li {
 border-bottom: solid 2px #eeeeef;
 padding: 7px 0;
}
#links li.nologo { padding-left: 222px; }
#links li img { margin: 0 73px 0 43px; }