/* CSS Document */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

.frame {padding:0px; width:760px; height:340px; text-align:left;}
.frame h1 {font-size:18px; font-weight:bold; color:#E69565; padding:0; margin:0 0 0 0;}

.gallery li {list-style-type:none; width:64px; height:48px; float:left; z-index:100;}
.gallery li.lft {float:left; clear:left;}
.gallery li.rgt {float:right; clear:right;}

ul.gallery {padding:0; margin:0; width:448px; height:336px; position:relative; background:#888 url(images/surfgear_background.jpg);}
.gallery a {position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; text-decoration:none;}
.gallery a img {position:relative; width:62px; height:46px; border:1px solid #888; z-index:100;}
.gallery a:hover {width:160px; height:120px; padding:108px 144px; position:absolute; left:0px; top:0px; z-index:20;}
.gallery a:hover img {background:#eee; position:relative; width:160px; height:120px; border:0px; z-index:20;}
.gallery a:active, .gallery a:focus {background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0px; top:0px; z-index:10;}
.gallery a:active img, .gallery a:focus img {background:#eee; position:relative; width:320px; height:239px; border:0px; z-index:10;}
  

.frame ul li b {display:none;}  

.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}

.frame ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:200px; height:322px; border:1px solid #BDC3C6;
  top:0px; left:0px; color:#333333; font-weight:normal; padding:6px; font-family:Verdana; font-size:12px; background-color:#FFFFFF;
  margin-left:460px;}

  
/* hack for Internet Explorer */
.gallery li.pad {height:0; display:block; margin-top:-2px; width:448px; font-size:0;}

/* hack for Opera 7+ */
@media all and (min-width:0px){
.gallery a:hover {background:#888; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10;}
.gallery a:hover img {background:#aaa; position:relative; width:320px; height:240px; border:0; z-index:10;}
}