/* stylesheet for mouseover-driven image gallery */

/* general purpose elements */
body { font-family: verdana, helvetica, arial, sans-serif; background-color: #7a7a7a; background-image: url('gradient1.jpg'); background-repeat: repeat-y; }

#page {margin: 5px 10px 5px 10px; }

h2 { margin: 0; padding: 0 0 4px 0; font-size: 1.5em; color: #678;}

p#comment { font-size: .8em; margin: 0; padding: 0 0 5px 0; }

/* the horizontal navigation tabs */

#footer { position: relative; top: 10px; clear: both; }

#tabs { clear: both; }

#tabs ul { list-style:none; display:inline; float:left; margin:0; padding: 0; }

#tabs ul li {display:inline; width:90px; height:20px; float:left; background-color:#ddd; text-align: center; margin:0 5px 5px 0; padding: 4px; }

#tabs ul li a { color: #000; font-size: .8em; text-decoration: none; }

#tabs ul li.active { background-color: #678; font-weight: bold; }

#tabs ul li.active a { text-decoration: none; color: #fff; }

#tabs ul li:hover { background-color: #bbb; }

#tabs ul li a:hover { text-decoration: underline; }

#tabs ul li.active:hover { background-color: #678; text-decoration: none; }

#tabs ul li.active a:hover { text-decoration: none; }



/* the gallery */
#gallery {width:750px;}
#gallery ul {list-style:none; padding:0; margin:0; width:260px; position:relative; float:left;}
#gallery ul li {display:inline; width:122px; height:122px; float:left; margin:0 5px 5px 0; overflow: hidden; }
#gallery ul li a {display:block; width:120px; height:120px; text-decoration:none; border:1px solid #000; color: #fff;}

#gallery ul li a img {display:block; width:120px; height:120px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#666; background-color: #ccc; color: #000; }
#gallery ul li a:hover img {position:absolute; left:254px; top:0; width:auto; height:auto; border:1px solid #000; background-color:#ccc; width:auto; height:auto; }

#gallery ul li a span { display: block; font-size: .8em; padding: 5px; }


/* the slidehsow */
#slideshow { float: left; clear: left; }
#slideshow img { border:1px solid #000; color: #fff; }

#slidestext { width: 800px; padding: 0 0 6px 2px; margin-top: 2px; font-size: .9em; font-weight: bold; color: #456;}

#controls { float: right; font-size: .8em; padding: 8px; border:1px solid #000; background-color:#fff; margin: 0 4em 0 2em; text-align: center; }

input { color:#678; font: bold .8em arial,helvetica,sans-serif; } 


/* the slideviewer */
/*preload classes*/ 
.svw {width: 50px; height: 20px; background: #fff;} 
.svw ul {position: relative; left: -999em;} 
 
/*core classes*/ 
.stripViewer {  
position: relative;
overflow: hidden;  
border: 5px solid #678;   
margin: 0 0 1px 0; 
} 
.stripViewer ul { /* this is your UL of images */ 
margin: 0; 
padding: 0; 
position: relative; 
left: 0; 
top: 0; 
width: 1%; 
list-style-type: none; 
} 
.stripViewer ul li {  
float:left; 
} 
.stripTransmitter { 
overflow: auto; 
width: 1%; 
} 
.stripTransmitter ul { 
margin: 0; 
padding: 0; 
position: relative; 
list-style-type: none; 
} 
.stripTransmitter ul li{ 
width: 20px; 
float:left; 
margin: 0 1px 1px 0; 
} 
.stripTransmitter a{ 
font: bold 10px Verdana, Arial; 
text-align: center; 
line-height: 22px; 
background: #678; 
color: #fff; 
text-decoration: none; 
display: block; 
} 
.stripTransmitter a:hover, a.current{ 
background: #ddd; 
color: #000; 
} 
 
/*tooltips formatting*/ 
#tooltip { 
background: #fff; 
color: #000; 
opacity: 0.85; 
border: 5px solid #dedede; 
} 
#tooltip h3 {  
font: normal 10px Verdana;  
margin: 0;  
padding: 6px 2px;  
border: 0; 
}