/* 
this site uses absolute positioning for main elements... while maintaining expandable width.
*/


body{
margin:0;
padding:0;
background-image:url("../images/bg_topleft.gif");
background-repeat:no-repeat;
background-color:#c1d1a1;
font-family:georgia,times,serif;
font-size:x-small;
color:#333333;
}

a img{
border:none;
}

span.previous{
text-size:x-small;
float:left;
width:120px;
}

span.next{
text-size:x-small;
float:right;
width:120px;
text-align:right;
}

a{
color:#996600;
text-decoration:none;
}

a:hover{
color:#663300;
}

#logo{
position:absolute;
top:27px;
left:22px;
}

#banner{
position:absolute;
top:17px;
left:258px;
}

#thumbs{
position:absolute;
top:170px;
left:12px;
padding:0;
margin:0;
width:218px;
height:100%;
}

#thumbs #header{
font-weight:bold;
background-image:url("../images/thumbsheader.gif");
background-repeat:no-repeat;
color:#427F53;
font-size:small;
line-height:180%;
text-align:center;
text-transform:uppercase; 
/* sometimes its nice to force formatting */
height:44px;
}

#thumbs #listing{
background-color:#ffffff;
text-align:center;
border-left:2px #c1d1a1 solid;
}

#listing p{
background-color:#ffffff;
text-align:left;
font-size:1.3em;
padding:0 0 20px 50px; 
margin:0;
}

#thumbs img{
margin:0 0 0 0;
}

#thumbs #cap{
/*
background image and container for thumbcollumn header
*/
background-image:url("../images/thumbscap.gif");
background-repeat:no-repeat;
height:34px;
}

#content{
margin:140px 0 0 255px;
padding-top:16px;
height:100%
width:100%
}

.photo{
/* text-align :: makes photo stay centered in content region as the browser resizes */
text-align:center;
padding:22px;
background-color:#ffffff;	
margin:0;
width:100%;
}
.photon{
padding:20px 30px 5px 80px; 
background-color:#ffffff;	
margin:0;
height:auto;
width:100%;
}

div#content ul{
font-size:1.3em;
background-color:#ffffff;
margin:0;
width:80%;
}


#content p{
font-size:small;
background-color:#ffffff;
margin:0;
padding:0 12px 0 12px;
}

#content p.caption{
text-align:left;
font-size:x-small;
border-top:#666666 1px solid;
margin-top:10px;
padding-top:5px;
}

div#content h2{
background-color:#ffffff;
text-align:left;
text-indent:-10px;
color:#427F53;
font-size:1.3em;
line-height:130%;
font-style:italic;
margin:0;
padding:5px;
}

#content h3{
color:#427F53;
font-size:small;
line-height:130%;
font-style:italic;
margin:0;
padding:0 0 0 10px;
height:25px;
min-width:400px;
width:60%;
white-space:nowrap;
/* if the headers wrap they break the illusion created by the background image... */
float:right;
/* anchors it to the right of the page */
background-image:url("../images/header.gif");
background-repeat:no-repeat;
}

.bottomcap{
/*
bottom corner of white content containers... 
its a small 1600 pixel wide .gif repeat is set to false 
in the event that  someone has a monitor that large...
the pattern ends instead of repeating.
*/
background-image:url("../images/bottomcorner.gif");
background-position:bottom left;
background-repeat:no-repeat;
height:24px;
line-height:15px;
margin-bottom:15px;
}

.maintext{ 
font-size: 11px;
font-family:georgia,times,serif;
line-height:150%
}

.welcome{
background-color:#ffffff;
height:25px;
line-height:15px;
}

.topcap{
/* see notes for bottomcap */
background-image:url("../images/topcorner.gif");
height:25px;
line-height:15px;
}