/* Maverick Construction Photo Gallery CSS */

#scroller {
 width:500px;
 float: right;
 margin-top: 1.25%;
 margin-right: 1.25%;
 height:470px; 
 position:relative;
 padding:1em; 
 background:#fff url(../images/gallery_default.jpg) 25px 225px no-repeat;
 border: 1px solid #aaa;
filter:alpha(opacity=75);
opacity:0.75;
-moz-opacity:0.75;  }

#scroller em {display:block; width:350px; height:120px; position:relative; float:left; }
/*#scroller span {display:block; width:360px; height:365px; position:absolute; top:0; left:0; border:1px solid #f00;} */

#scroller b#thumbs {display:block; width:125px; height:470px; overflow:auto; float:right; }
#scroller b#thumbs a {display:block; float:right; margin:6px; background:#f8f8ff; width:80px; height:60px; border:3px double #444; cursor:default;}
#scroller b#thumbs a.int {border:3px double #f00; cursor:pointer;}
#scroller b#thumbs a img {width:80px; height:60px; border:0;}

#scroller b#thumbs a:hover {border:3px dotted #ccc; background:#fff url(click_on.gif);}
#scroller b#thumbs a.int:hover {border:3px dotted #f00;}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:3px double #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
/* #scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;} */

#scroller b#thumbs a:hover img.hr {width:333px; height:250px; left:25px; top:225px; border:1px solid #000;}
#scroller b#thumbs a:hover img.vt {width:250px; height:333px; right:100px; top:160px; border:1px solid #000;}

/*
#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:320px; height:240px; left:20px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:240px; height:320px; left:60px; top:7px; border:1px solid #333;}
*/

#scroller_sg {
 position:relative;
 width:925px;
 height:470px; 
 margin: 1.25%;
 padding:1em; }
 
#scroller_sg em { position:absolute; width:150px; height:300px; right:140px; margin-top:1%; padding:.5em;}
/*#scroller_sg span {display:block; width:360px; height:365px; position:absolute; top:0; left:0; border:1px solid #f00;} */

#scroller_sg b#thumbs {display:block; width:125px; height:470px; overflow:auto; float:right; }
#scroller_sg b#thumbs a {display:block; float:right; margin:6px; background:#f8f8ff; width:80px; height:60px; border:3px double #000;}
#scroller_sg b#thumbs a.int {border:3px double #f00; cursor:pointer;}
#scroller_sg b#thumbs a img {width:80px; height:60px; border:0;}

#scroller_sg b#thumbs a:hover {border:3px dotted #ccc; background:#fff url(click_on.gif);}
#scroller_sg b#thumbs a.int:hover {border:3px dotted #ccc;}
#scroller_sg b#thumbs a:active, #scroller b#thumbs a:focus {border:3px double #fff; background:#fff; outline:0;}
#scroller_sg b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
/* #scroller_sg b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;} */

#scroller_sg b#thumbs a:hover img.hr {width:600px; height:450px; left:25px; bottom:25px; border:1px solid #000;}
#scroller_sg b#thumbs a:hover img.vt {width:337.5px; height:450px; left:157px; bottom:25px; border:1px solid #000;}

/*
#scroller_sg b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:320px; height:240px; left:20px; top:7px; border:1px solid #333;}
#scroller_sg b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:240px; height:320px; left:60px; top:7px; border:1px solid #333;}
*/