/*  Last Updated 02062008 - drewfaces.com */

html {
height: 101%;
}
.hide {
display: none; 
}
body {
background: #F5F5F5;
margin-top: 50px;
padding: 0;
font-family: arial, san-serif; 
font-size: 12px; 
color: #888; 
font-weight: normal; 
text-decoration:none;
height: 101%;
text-align: left;
}
div {
color: #888;
}
p, td {
color: #888;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 5px;
padding: 0;
}
.light-img {
border: 1px solid white;
}
.backtotop {
color: #888;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
padding: 0;
}
a.backtotop, a.backtotop:link, a.backtotop:active {
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}
a.backtotop:hover {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-weight: normal;
font-size: 10px;
text-decoration: underline;
}
ul, li{
color: #888;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 0;
margin-left: 8px;
padding: 0;
}
#navi {
height: 20px;
width: 700px;
margin: 0 auto;
margin-top: 20px;
background: #F5F5F5;
text-align: left;
}
#logo {
float: right;
width: 191px;
height: 20px;
padding: 0;
margin-right: 20px;
}
#mainnav {
width: 192px;
height: 20px;
padding: 0;
margin-left: 20px;
}
#mainnav ul {
font-size: 10px;
padding: 0;
margin: 0;
list-style: none;
float: left;
display: inline;
} 
#mainnav ul li {
padding: 0;
margin: 0;
float: left; 
}
#mainnav ul li img {
padding: 0;
margin: 0;
float: left; 
}
#content {
background: #F5F5F5;
margin: 0 auto;
text-align: left;
}
a, a:link a:active {
font-family: arial, san-serif;
color: #666;
font-weight: normal;
font-size: 12px;
text-decoration: none;
outline:none;
}
a:hover {
font-family: arial, san-serif;
color: #CC6633;
font-weight: normal;
font-size: 12px;
text-decoration: underline;
outline:none;
}

hr {
border: 1px dashed #CCC;
margin-top: 15px;
margin-bottom: 12px;
}

/* Thumbnails */
.gallery-title {
font-family: arial, san-serif;
color: #666;
font-weight: bold;
font-size: 12px;
margin: 5px 0 5px 0;
}
.gallery-subtitle {
font-family: arial, san-serif;
color: #666;
font-weight: bold;
font-size: 12px;
margin: 5px 0 3px 0;
}
.gallery-content-title {
font-family: arial, san-serif;
color: #CC6633;
font-weight: bold;
font-size: 12px;
margin: 0 0 5px 0;
}
.gallerycontainer-right-column{
border-left: 1px dashed #AAA;
float: right;
width: 455px;
padding: 0;
margin-right: 10px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.gallerycontainer-right-content{
float: right;
padding: 0;
margin-left: 12px;
margin-bottom: 20px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.gallerycontainer{
position: relative;
margin: 20px 0 20px 20px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail:hover img{
border: 1px dashed #999;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFF;
padding: 5px;
left: -1000px;
border: 1px solid #AAA;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: auto;
left: auto; /*position where enlarged image should offset horizontally */
}
#footer {
height: 20px;
width: 700px;
margin: 0 auto;
margin-top: 5px;
background: #F5F5F5;
text-align: left;
}
#footer-cont {
color: #666;
float: right;
font-size: 12px;
width: 300px;
height: 20px;
padding: 0;
margin-right: 20px;
text-align: right;
}
#footer-copy {
color: #AAA;
width: 300px;
font-size: 12px;
height: 20px;
padding: 0;
margin-left: 20px;
}