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

.menu2 {
   width:744px;
   height:31px;
   background:#4a6d9c;
   margin:0 auto; 
   position:relative;
   z-index:1;
   border-bottom:10px solid #e0e1d9;
   margin-bottom:650px;
}

/* position the instructions using a dl */
.menu2 dl {
   position:absolute;
   width:644px;
   top:70px;
   left:50px;
}
.menu2 dl dt {
   font-size:1.2em;
   margin-bottom:2em;
   font-weight:bold;
}
.menu2 dl dd {
   padding:0;
   margin:0;
   margin-bottom:1em;
}

#copyright {
   border-top: 1px solid #e0e1d9;
   padding-top: 5px;
   font-size: 80%;
}

/* 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;
   list-style-image: none;
   border:0;
   width:auto;
}
/* float the list so that the items are in a line */
.menu2 ul li {
   float:left;
   width:62px;
   padding-left: 0;
}
/* style the links to be 60px wide by 31px high with a right border 2px 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:60px; 
   height:31px; 
   color:#737453;
   border-right:2px solid #4a6d9c;
   background:#e0e1d9; 
   line-height:30px; 
}

/* clear the float at the end of each line of five slides */
span.clr {
   display:block;
   clear:both;
   width:0;
   height:0;
   font-size:0;
   line-height:0.1;
}

/* 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:#e0e1d9; 
   background:#737453;
   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;
   width: auto;
}

/* make the sub menu ul li the full width with padding and border. */
.menu2 ul li:hover ul li {
   cursor:pointer;
   width:600px;
   height:583px;
   border:20px solid #737453;
   border-width:20px 5px;
   background:#e0e1d9;
   color:#e0e1d9;
   padding:67px 67px;
   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 #e0e1d9;
   border-color:#888 #000 #000 #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 #e0e1d9;
   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 #e0e1d9;
   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:#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:#e0e1d9;
   position:absolute;
   left:48px;
   top:85px;
   width:640px;
   height:480px;
   z-index:200;
   z-index:500;
   cursor:default;
   border:1px solid #e0e1d9;
}

.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:#e0e1d9;
   position:absolute;
   left:57px;
   top:23px;
   width:620px;
   height:640px;
   z-index:200;
   z-index:500;
   cursor:default;
   border:1px solid #e0e1d9;
}

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