a.external:link {color: #3366cc; font-size: 9pt; }
a.external:visited {color: #c0c0c0; }
a.external:hover {text-decoration: underline; background-color: #e8e8e8; }
a.external:active {color: #e8e8e8; }
/* controls outer box overall */
#gallery {width:770px; height:447px; padding:10px; border:1px solid #333; background: #e8e8e8; position:relative; }
#gallery ul li a span {display:none;}
/* this changes position of default bottom image */
#gallery b.default {position:absolute; left:10px; top:10px; width:640px; height:427px; text-align:center;}
/* ///////////// don't touch these border colors or it will throw display position off */
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee;
border-color:#555 #ddd #eee #333;}
/* below is text not for thumbs but non-moused over first text */
/* //////////////// below is color of text when not moused over */
#gallery b.default span {display:block; color:#444; font-family:verdana, arial, sans-serif;
font-weight:normal; font-size:11px; width:350px; margin:0 auto; background:#e8e8e8;}
/* //////////////// changing width from 222 to 117 */
#gallery ul {list-style:none; padding:0; margin:0; width:117px; position:relative; float:right;}
/* //////////// changed next to last number to 0 from 5 to make solid block */
#gallery ul li {display:inline; width:105px; height:70px; float:left; margin:0 0 0px 5px;}
/* ////////////// changed border below from 1px to 3 px to get space between thumbs */
#gallery ul li a {display:block; width:105px; height:70px; text-decoration:none; border:3px solid #000;
/* /////////////// changed below from ff 555 333 fff to e8e8e8 ok */
border-color:#e8e8e8 #e8e8e8 #e8e8e8 #e8e8e8;}
#gallery ul li a b {display:block; height:70px; width:105px;}
/* this is width of all 6 thumbs */
#gallery ul li a img {display:block; width:105px; height:70px; border:0;}
/* below color 777 is background for thumbnails changing 555 fff fff 333 to e8e8e8 */
#gallery ul li a:hover {white-space:normal; border-color:#e8e8e8 #e8e8e8 #e8e8e8 #e8e8e8;}
/* //////// changes position of moused over image changed left -548 to -653 */
#gallery ul li a:hover b {position:absolute; left:-653px; top:0; width:640px; height:427px; text-align:center; z-index:20;}
/* //////////////// below is color of text when moused over */
#gallery ul li a:hover span {display:block; color:#444; font-family:verdana, arial, sans-serif;
font-weight:normal; font-size:11px; width:350px; margin:0 auto; background:#e8e8e8;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee;
border-color:#555 #ddd #eee #333;}
/* /////////////// changed below from 555 fff fff 333 to e8e8e8 */
#gallery ul li a:active, #gallery ul li a:focus {white-space:normal;
border-color:#e8e8e8 #e8e8e8 #e8e8e8 #e8e8e8; outline:0;}
/* //////// changed height from 547 to 447 */
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-653px; top:0; width:640px; height:427px;
text-align:center; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#000;
font-family:verdana, arial, sans-serif;
font-weight:normal; font-size:11px; width:350px; margin:0 auto; background:#e8e8e8;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto;
border:1px solid #eee; border-color:#555 #fff #fff #333;}
body { background-color: #ffffff; margin: 10px; padding:0px; }
#header { background-color: #ffffff; width: 800px; height: 40px; margin: 0px;
padding: 0px 0px 0px 0px;
font: 12px verdana,arial,helvetica,sans-serif; }
#sidemenu { position: absolute; background-color: #ffffff;
width: 160px; height: 575px; top: 37px; left:805px; }
#footer { background-color: #ffffff; width: 790px; height: 20px; margin: 0px;
padding:0px; font: 12px verdana,arial,helvetica,sans-serif; color: #4f4f4f; }
#gallerycontent { margin: 0px 0px 0px 0px; width: 760px; height: 480px; }
rag4970
- - - - - mouse-over thumbnails
