div.menu
{
width:100%;
position:relative;
background-color:#91219E; /*CHANGED*/
height:20px;
}

/*The next step is to format the unordered lists. These lists are the top level of the menu, they will be visible all the time.*/

ul.menu
{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#ee00ee;
float:left;
}

/*We've removed the default padding and margins of the UL and made it float left. This way all of the ULs will fit next to eachother. Up next are the second level ULs.*/

ul.menu ul
{
position:relative;
list-style-type:none;
margin:0px;
display:none;
background-color:#ee00ee;
}

/*The lists are now hidden and positioned under the first level UL. Now it's time for the third level ULs.*/

ul.menu ul ul
{
position:absolute;
display:none;
margin-top:0px;
margin-left:0px;
}

/*These ULs are also hidden, and they position is set to absolute to make them appear on top of other elements. We will make the ULs become visible and invisible 
with ":hover".*/

ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}

/*This makes the second level ULs become visible when the mouse is over the first level UL, the third level ULs will remain hidded until the mouse is over the second level 
UL. Finally, we format the links.*/

a.menu
{
background-color:#91219E; /*CHANGED*/
display:block;
width:125px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
margin-bottom:-1px
}
a.menu:hover
{
background-color:#91219E; /*CHANGED*/
color:#66FFFF;
}




#section1 {background-image: url(images/system_images/purple_gradient_1.jpg);}
#join_and_photos {width: 100%}
#photo_section { width:170px; height:200px; float: right;}

#top_left  {margin: 1%; height:200px; width: 80%; float: left;}
#left_section {border-style:solid; border-width: thin; border-color: #BF3EFF; height: 500px; width: 65%; overflow: hidden; background-color: #ffffff;  float: left}

#latest_results {border-style:solid; border-width: thin; border-color: #BF3EFF; background-color: #ffffff;  height: 232px; width: 30%; overflow: hidden; float: right}
#upcoming_events {border-style:solid; border-width: thin; border-color: #BF3EFF; background-color: #ffffff;  height: 232px; width: 30%; overflow: hidden; 
 margin-bottom: 3%; float: right}
#half_left {width: 53%; float: left; overflow: hidden}
#half_right {width: 46%; float: right; overflow: hidden}
#default_sub_page_div_for_user  {border-color: #ffffff; border-width: thick; border-style: solid; background-color: #ffffff; width: 99%}