/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls/gallery/left_right_click.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #gallery {width:534px; position:relative; height:60px; padding-top:400px; margin:95px 10px 10px 113px;} #gallery img.left {width:55px; height:27px; float:left;cursor:pointer; margin-left:55px;} #gallery img.right {width:55px; height:27px; float:left;cursor:pointer;} #gallery ul {list-style:none; padding:0; margin:0; float:left; } #gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px; cursor:pointer;} #gallery ul li.hide {display:none;} /* using background images */ #gallery ul li.th1 {background:url(thumbs/th1.jpg);} #gallery ul li.th2 {background:url(thumbs/th2.jpg);} #gallery ul li.th3 {background:url(thumbs/th3.jpg);} #gallery ul li.th4 {background:url(thumbs/th4.jpg);} #gallery ul li.th5 {background:url(thumbs/th5.jpg);} #gallery ul li.th6 {background:url(thumbs/th6.jpg);} #gallery ul li.th7 {background:url(thumbs/th7.jpg);} #gallery ul li.th8 {background:url(thumbs/th8.jpg);} #gallery ul li.th9 {background:url(thumbs/th9.jpg);} #gallery ul li.th10 {background:url(thumbs/th10.jpg);} #gallery ul li.th11 {background:url(thumbs/th11.jpg);} #gallery ul li.th12 {background:url(thumbs/th12.jpg);} #gallery ul li.th13 {background:url(thumbs/th13.jpg);} #gallery ul li.th14 {background:url(thumbs/th14.jpg);} #gallery ul li.th15 {background:url(thumbs/th15.jpg);} #gallery ul li.th16 {background:url(thumbs/th16.jpg);} #gallery ul li.th17 {background:url(thumbs/th17.jpg);} #gallery ul li.th18 {background:url(thumbs/th18.jpg);} #gallery ul li.th19 {background:url(thumbs/th19.jpg);} /* remove visibility:hidden; if you want to use the original images as thumbnails */ #gallery ul li img {visibility:hidden; display:block; width:50px; height:50px;} #gallery ul li span {display:none; position:absolute; left:61px; top:380px; width:411px;font-family:verdana, arial, sans-serif; color:#333333; font-size:11px; line-height:15px; text-align:center;} #gallery ul li b {color:#333333;} #gallery ul li.chosen {border-color:#fff; cursor:default;} #gallery ul li.chosen div {position:absolute; left:0; top:0; width:532px; height:355px;} #gallery ul li.chosen div i {width:530px; height:355px; display:table-cell; vertical-align:middle; text-align:center;} #gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; margin:0 auto;} #gallery ul li.chosen span {display:block;} * { padding: 0; margin: 0; } html, body { margin:0px; padding:0px; text-align:center; overflow:hidden; } body { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #666666; background-color:#E1EDC3; line-height: 14px; background:url(/images/AndrewLook.jpg) no-repeat; background-color : #e1edc3; } a:link { color: #CC3366; text-decoration: none; font-weight:bold; } a:visited { text-decoration: none; color: #FF0099; font-weight:bold; } a:hover { text-decoration: none; color:#CC3366; } a:active { text-decoration: none; color: #FF3300; } .wrap { width : 823px; margin-top: 20px; margin-left : auto; margin-right : auto; background:url(/images/Look.jpg) no-repeat; text-align : center; background-color : #ffffff; overflow:hidden; } #header { height:28px; width: 823px; text-align: center; position:relative; background:url(/images/top.jpg) no-repeat; margin-top:0px; } #header h1 { height : 37px; width : 225px; margin-top : 10px; margin-right : 19px; background : url(/images/AndrewName.jpg) no-repeat; float : right; text-indent : -9000px; z-index:1; } #header h2 { background : url(/images/Look.jpg) no-repeat; float:left; position:absolute; left:0px; width:95px; height:320px; margin: 5px 0 0 0; text-indent : -9000px; z-index: 0; } #content{ margin: 5px 0 0; } #contentmain { position:relative; background:url(/images/Look.jpg) no-repeat; float:left: left: 0; } #contentmain h1 { padding-top : 105px; font-family : Georgia, "Times New Roman", Times, serif; font-size : 10px; color : #cc6666; text-align : left; margin-left : 4px; } #nav, #nav ul { padding:0 0 1px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; position:relative; z-index:200; } #nav {height:25px; padding:15px;} #nav li {float:left; width: 7em} #nav li li {float:none;} /* a hack for IE5.x and IE6 */ * html #nav li li {float:left;} #nav li a {display:block; float:left; color:#cc3366; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap; text-align:left; text-decoration : none; width: 1em;} #nav li li a {height:20px; line-height:20px; float:none;} #nav li:hover {position:relative; z-index:300;} #nav li:hover ul {left:0; top:22px;} /* another hack for IE5.5 and IE6 */ * html #nav li:hover ul {left:10px;} #nav li:hover ul, #nav li.sfhover ul { left: 0; } #nav ul {position:absolute; left:-9999px; top:-9999px;} /* yet another hack for IE5.x and IE6 */ * html #nav ul {width:1px;} /* it could have been this simple if all browsers understood */ /* show next level */ #nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;} /* keep further levels hidden */ #nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;} /* show path followed */ #nav li:hover > a {text-decoration:none; color:#99cc00;} /* but IE5.x and IE6 need this lot to style the flyouts and path followed */ /* show next level */ #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:-15px; margin-left:100%; top:-1px;} /* keep further levels hidden */ #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px;} /* show path followed */ #nav li:hover a, #nav li:hover li:hover a, #nav li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover li:hover a {text-decoration:none; color:#99cc00;} /* hide futher possible paths */ #nav li:hover li a, #nav li:hover li:hover li a, #nav li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li:hover li a {text-decoration:none; color:#CC3366;} .clear{margin:0 0 0 0;} #top_menu { clear:both; text-align:right; font-size : 9px; font-weight : bold; float: right; padding-right: 19px; } #top_menu a:link { color : #cc3366; text-decoration : none; font-weight : bold; } #top_menu a:visited { text-decoration : none; color :#CC3366;; font-weight : bold; } #top_menu a:hover { text-decoration : none; color : #99cc00; } #top_menu a:active { text-decoration : none; color : #ff3300; }