<!--
.menu2 {
font-family: verdana, arial, sans-serif; 
width:673px;
height:31px;
background:#000000;
padding:0;
margin:0 auto; 
position:relative;
z-index:1;
border-bottom:20px solid #333;
}
/* 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;
}
/* float the list so that the items are in a line */

.menu2 ul li {
display:block;
float:left;
width:101px;
height:31px;
}

/* style the links to be 50px wide by 31px high with a right border 1px solid white. Set the background color and the font size. */

.menu2 ul li a, .menu2 ul li a:visited {
display:block; 
float:left;
text-align:center; 
text-decoration:none; 
width:100px; 
height:31px; 
color:#ddd;
border-right:1px solid #000000;
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:#787878;

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;

}



/* make the sub menu ul li the full width with padding and border. */

.menu2 ul li:hover ul li {

cursor:pointer;

width:483px;

height:483px;

border:20px solid #787878;

border-width:20px 5px;

background:#000; 

color:#fff;

padding:82px 90px;

cursor:default;

}



/* style the background and foreground color of the submenu links */

.menu2 ul li:hover ul li a {

background:#333;

width:118px;

height:118px;

border:1px solid #ddd;

border-color:#888 #232323 #232323 #888;

}





/* keep the large image hidden */

.menu2 ul li:hover ul li a em {

display:none;

}

/* add a border to the horizontal slide and position it centrally using a top margin */

.menu2 ul li:hover ul li a.horiz span img {

border:1px solid #888;

margin-top:21px;

}

/* add a border to the vertical slide and position it centrally using a top margin */

.menu2 ul li:hover ul li a.vert span img {

border:1px solid #888;

margin-top:9px;

}



.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:#000000; 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:#000000; 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:#000000; position:absolute; left:15px; top:100px; width:640px; height:480px; 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:#000000; position:absolute; left:95px; top:23px; width:480px; height:640px; 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;}
-->