/* 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: 20px; }

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

/* 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:114px; 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:540px; 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:508px; 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 { padding: 0 0 4px 2px; margin-top: 2px;}

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

