/* SCROLLER CODE BEGINS */

#frame {display: block; /* defines hollow frame */
width: 376px; 
height: 276px; 
position: absolute; 
top: 48px; 
background: none;
left: 2px; 
border: 2px solid #fff;} /* ddd is grey */

#scroller {width: 620px; /* sets position and size and color of largest box */
height: 560px; 
position: relative;
padding: 5px 0; 
background: none; 
margin: 0 auto 20px 0px;}

#scroller em {display: block; /* defines upper right box */
width: 200px; 
height: 135px; 
position: absolute; 
top: 6px; 
background: grey;
left: 0px; 
border: 1px solid #ddd;} /* ddd is grey */

#scroller span {display: block; /* defines large left box */
width: 460px; 
height: 465px; 
position: absolute; 
top: 0; 
left: -20px; 
border: 0px solid #ddd;}

#scroller b#thumbs {display: block; /* defines lower left box */
width: 200px; 
height: 530px; 
overflow: auto; /* this gives us the scroll bar */
float: left; /* makes box go the left edge */
margin-top: -8px;  
margin-left: 400px; 
border: 0px solid #ccc; /* ddd is lighter grey */
border-width: 1px; 
padding: 9px;}

#scroller b#thumbs a {display: block; /* note the a */
float: left; 
margin: 0 10px 10px 0; 
background: #f8f8ff; 
width: 50px; 
height: 50px; 
border: 0px solid #000;}

#scroller b#thumbs a img 
{width: 50px; 
height: 50px; 
border: 0;}

#scroller b#thumbs a:hover /* give the hover click on */
{border: 0px dotted #ccc; 
background: url(../photos/click_on.gif);}

#scroller b#thumbs a:active, #scroller b#thumbs a:focus  /* what does focus do */
{border:0px solid #fff; 
background:grey; 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 /* upper left hover image */
{width: 160px; 
height: 120px; 
left: -2px; 
top: -2px; 
border: 0px solid #333;}

/* size and position of large left image box - horizontal */
#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr 
{width: 380px; 
height: 280px;
left: -2px; top: -2px; 
border: 0px solid #333;
}

#info h2 {font-size: 10px; 
color:#888;  
font-family: georgia, verdana, arial, sans-serif; 
font-weight: normal;}