/* =Internet Explorer Fixes
----------------------------------------------------------------------*/



/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0; 
padding:0;
}
/* ignore the link used by 'other browsers' */
.hoverbox  ul li a.hide, .hoverbox ul li a:visited.hide {
display:none;
}

/* make the sub menu ul visible and position it beneath the first list item */
.hoverbox ul {
text-align:left;
display:block; 
position:absolute; 
top:31px; 
left:0; 
}
/* make the sub menu ul li the full width with padding and border. Hack for IE5.5 */
.hoverbox ul li {
cursor:pointer;
width:400px;
height:568px;
color:#fff;
background: #fff url(images/galclose.gif) top center no-repeat; 
position:relative;
padding: 50px 0px;
w\idth:400px;
he\ight:390px;
}

/* style the background and foreground color of the submenu links (with hack for IE5.5)*/
.hoverbox ul li a {
float:left;
width:112px;
height:87px;
margin: 0px 20px 14px 0px;
w\idth:110px;
he\ight:85px;
}
/* keep the large image hidden with a position absolute to take it out of the page flow */
.hoverbox ul li a img.bigger {visibility:hidden; position:absolute; z-index:0;}

/* style the original image size, border and margin */
.hoverbox ul li a img {width:100px; height:75px;border:0; margin:5px}


/* style the position of the links on hover */
.hoverbox ul li a:hover {position:relative;background:#ccc}

/* make the images 2x size on hover and position absolute to make it central over the original image position */
.hoverbox ul li a:hover img {
width:200px; height:150px;
position:absolute;
left:-60px; top:-38px;
padding:5px;
background:#eee;
}


/* make the active links zero size so the active dotted border does not show through the large image */
.hoverbox ul li a:active {background:#aaa; position:relative; height:0; width:0;}
.hoverbox ul li a:active img {background:#bbb; height:0; width:0; padding:0; margin:0;}

/* make the large image visible and set the padding and border. */
.hoverbox ul li a:active img.bigger {visibility:visible; background:#eee; position:absolute; width:400px; height:380px; z-index:200; padding:5px; border-bottom:105px solid #fff; z-index:500; cursor:default;}

/* position the large image depending on which thumbnail was clicked */
.hoverbox ul li a:active img.pos1 {top:-2px; left:-10px;}
.hoverbox ul li a:active img.pos2 {top:-2px; left:-140px;}
.hoverbox ul li a:active img.pos3 {top:-2px; left:-270px;}
.hoverbox ul li a:active img.pos4 {top:-103px; left:-10px;}
.hoverbox ul li a:active img.pos5 {top:-103px; left:-140px;}
.hoverbox ul li a:active img.pos6 {top:-103px; left:-270px;}
.hoverbox ul li a:active img.pos7 {top:-200px; left:-10px;}
.hoverbox ul li a:active img.pos8 {top:-200px; left:-140px;}
.hoverbox ul li a:active img.pos9 {top:-200px; left:-270px;}
.hoverbox ul li a:active img.pos10 {top:-305px; left:-10px;}
.hoverbox ul li a:active img.pos11 {top:-305px; left:-140px;}
.hoverbox ul li a:active img.pos12 {top:-305px; left:-270px;}
.hoverbox ul li a:active img.pos13 {top:-400px; left:-10px;}
.hoverbox ul li a:active img.pos14 {top:-400px; left:-140px;}
.hoverbox ul li a:active img.pos15 {top:-400px; left:-270px;}