/* ================================================================ 

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.cssplay.co.uk/menu/slide_show.html

Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.

This stylesheet and the assocaited (x)html may be modified in any 

way to fit your requirements.

=================================================================== */



/* common styling */

/* set up the overall width of the menu div and the margins */

.menu2 {

font-family: verdana, arial, sans-serif; 

width:580px;

height:31px;

background: url(617.jpg) repeat;

padding:0;

margin:0 auto; 

position:relative;

z-index:1;

border-bottom:10px solid #333;

margin-bottom:600px;

}

/* position the instructions using a dl */

.menu2 dl {

font-family:verdana, arial, sans-serif;

font-size:0.9em;

position:absolute;

width:300px;

top:60px;

left:50px;

}

.menu2 dl dt {font-size:1.2em; margin-bottom:1.5em; font-weight:bold;}

.menu2 dl dd { padding:0; margin:0; line-height:1.2em; margin-bottom:2em;}

.menu2 dl dd:first-letter {font-weight:bold;}



/* remove the bullets and set the margin and padding to zero for the unordered list */

.menu2 ul {

padding:0; 

margin:0;

list-style-type: none;

border:0;

}

/* Width of Dividing Line Block  */

.menu2 ul li {

display:block;

float:left;

width:141px;

height:31px;

}

/* Menu Text */

.menu2 ul li a, .menu2 ul li a:visited {

display:block; 

float:left;

text-align:center; 

text-decoration:none; 

width:140px; 

height:31px; 

color:#ddd;

border-right:1px solid #fff;

background:#333; 

line-height:30px; 

font-size:11px;

}



/* clear the float at the end of each line of four slides */

span.clr {display:block; clear:both; width:0; height:0; font-size:0; line-height:0;}



/* make the dropdown ul invisible */

.menu2 ul li ul {

display: none;

}



/* remove the table styling */

table {

border-collapse:collapse;

margin:0; 

padding:0;

}





/* specific to non IE browsers */

/* set the background and foreground color of the main menu li link on hover */

.menu2 ul li:hover a{

color:#fff; 

background:#000;

cursor:default;

}



/* make the sub menu ul visible and position it beneath the first list item */

.menu2 ul li:hover ul {

text-align:left;

display:block; 

position:absolute; 

top:31px; 

left:0;

}



/* Dimensions of overall grey box */

.menu2 ul li:hover ul li {

cursor:pointer;

width:530px;

height:600px;

border:10px solid #000;

border-width:20px 5px;

background:#ddd url(linen.jpg); 

color:#fff;

padding:20px 20px;

cursor:default;

}



/* Thumnail Dimensions */

.menu2 ul li:hover ul li a {

background:#333;

width:125px;

height:130px;

border:1px solid #ddd;

border-color:#888 #000 #000 #888;

}





/* keep the large image hidden */

.menu2 ul li:hover ul li a em {

display:none;

}

/* Horizontal Thumnail Positioning based on top margin */

.menu2 ul li:hover ul li a.horiz span img {

border:1px solid #888;

margin-top:21px;

}

/* Vertical Thumnail Positioning based on top margin */

.menu2 ul li:hover ul li a.vert span img {

border:1px solid #888;

margin-top:7px;

}



.menu2 ul li:hover ul li a:hover {

background:#000;

}





/* make the active links zero size so the active dotted border does not show through the large image */

.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {background:#aaa; height:0; width:0; border:0;}

.menu2 ul li:hover ul li a:active em, .menu2 ul li:hover ul li a:focus em {background:#bbb; height:0; width:0; padding:0; margin:0; border:0;}





/* make the large image visible and set the border, position them using position absolute centrally over the slides */

/* horizontal large image styling */

.menu2 ul li:hover ul li a.horiz:active em, .menu2 ul li:hover ul li a.horiz:focus em {display:block; background:#ddd; position:absolute; left:20px; top:40px; width:540px; height:540px; z-index:200; z-index:500; cursor:default; border:1px solid #fff;}

.menu2 ul li:hover ul li a.horiz:active em img, .menu2 ul li:hover ul li a.horiz:focus em img {border:0;}

/* vertical large image styling */

.menu2 ul li:hover ul li a.vert:active em, .menu2 ul li:hover ul li a.vert:focus em {display:block; background:#ddd; position:absolute; left:20px; top:40px; width:540px; height:540px; z-index:200; z-index:500; cursor:default;  border:1px solid #fff;}

.menu2 ul li:hover ul li a.vert:active em img, .menu2 ul li:hover ul li a.vert:focus em img {border:0;}