@charset "utf-8";
/* CSS Document */

/*
This form of drop down is a mixture of CSS and Tables. There is a small peice of JS that may have to be used to handle z-index errors in IE.
*/

/*
This is the div that will hold all of the drop down buttons/menus. THIS DIV IS NOT NECCESARILY NEEDED! A table cell also be what holds all of the buttons/menus. Everything here can be changed to fit your needs. 
*/
#dropDownHolder{
width:730px;
padding-left:5px;
height:27px;
background-image:url(topLink.jpg);
background-repeat:repeat-x;
overflow:visible;
position:relative;
display:block;
clear:both;
clear:right;
float:right;
margin-right:16px;
z-index:1;
}

/*
This is the somewhat tricky part. The following 4 classes help define a button. The tricky part is that each drop down needs its own class. For example say you want 3 buttons. Each button would then need a class. Such as, dropDownButton1, dropDownButton2, dropDownButton3. Each of them would also then need dropDownButton1:hover, dropDownButton2:hover, and dropDownButton3:hover. 

Making this happen can be done one of two ways. 

1. You can copy the 4 classes below and paste them and put a number after them. Doing it this way means that you can define each button differently. For example: if you have two buttons but you want one to be 150px and another to be 300px. You can copy .dropDownButton and paste it and then rename it .dropDownButton2. The width of .dropDownButton is already 150px so it doesn't need to be changed and you can change the width of down2 to 300px.

2. If you want all the buttons to be the same you do not need to do any copying. You can simply put a , after a class name and define another class name. For example: .dropDownButton can be made into .dropDownButton, .dropDownButton2, .dropDownButton3{ width.....}. 

*/


/*
This is the "button" part of the drop downs. The part here that is of the most concern is the height. The height here should be the same as the height for .menuTop. This will make it so that only the "button" part of the drop down is seen if they are not hovering over the menu. 
*/
.dropDownButton, .dropDownButton2, .dropDownButton3, .dropDownButton4, .dropDownButton5{
color:#FFFFFF;
height:27px;
/*Leave stuff under here alone!!!*/
display:block;
overflow:hidden;
position:relative;
z-index:0;
}

/*This will make the "menu" part of the drop down be seen when it is hovered over. Nothing should have to be changed here*/
.dropDownButton:hover, .dropDownButton2:hover, .dropDownButton3:hover, .dropDownButton4:hover, .dropDownButton5:hover{
overflow:visible;
z-index:100;
}

/*This should be the button text or image you want people to rollover. Remember to adjust the height to be the same as the height in dropDownButton. The background color here will be the color of the button. */
.menuTop, .menuTop2, .menuTop3, .menuTop4, .menuTop5, .menuTop6, .menuTop7{
padding-top:5px;
padding-left:10px;
padding-right:15px;
color:#FFFFFF;
height:22px;
/*Leave stuff under here alone!!!*/
clear:both;
position:relative;
}

.menuTop a:link, menuTop a:hover, menuTop a:visited,.menuTop2 a:link, menuTop2 a:hover, menuTop2 a:visited,.menuTop3 a:link, menuTop3 a:hover, menuTop3 a:visited,.menuTop4 a:link, menuTop4 a:hover, menuTop4 a:visited,.menuTop5 a:link, menuTop5 a:hover, menuTop5 a:visited,.menuTop6 a:link, menuTop6 a:hover, menuTop6 a:visited,.menuTop7 a:link, menuTop7 a:hover, menuTop7 a:visited{
color:#FFFFFF;
}

.menuTop7 a:link, .menuTop7 a:visited, .menuTop6 a:link, .menuTop7 a:visited{
color:#FFFFFF;
text-decoration:none;
}

.menuHold, .menuHold2, .menuHold3, .menuHold4, .menuHold5{
width:140px;
color:#000099;
background-color:#FFFFFF;
/*Leave stuff under here alone*/
position:absolute;
border:1px solid #CCCCCC;
border-bottom:0px;
}

.menuHold a:link, .menuHold2 a:link, .menuHold3 a:link, .menuHold4 a:link, .menuHold5 a:link, .menuHold a:visited, .menuHold2 a:visited, .menuHold3 a:visited, .menuHold4 a:visited, .menuHold5 a:visited{
display:block;
text-decoration:none;
border-bottom:1px solid #CCCCCC;
padding: 3px 8px 2px;
}

.menuHold a:hover, .menuHold2 a:hover, .menuHold3 a:hover, .menuHold4 a:hover, .menuHold5 a:hover{
color:#990000;
}