.style1 {font-size: 10px;font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;}
.style2 {font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: normal}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FF0000}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: normal;color: #000099}
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #FFFF00}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 13px;font-weight: normal;color: #CC6600}

.blankmenu { 
background: #FFFFFF ; 
color: #FFEFD5; 
cursor: none;
border: 0px none;
}

.menutitle { 
text-align:center;
background: #A0A0A0 ; 
color: #FFEFD5; 
cursor: auto; display
}

body {
margin: 0;
padding: 0;
background: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;	/*change size of font, if size is too big, may need to increase size of box and frame so that it can be seen*/
font-weight: normal;
color: #000000;
}

dl, dt, dd, ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
}

#menu {
width: 22em;	/* width: 22em; change width of boxes, and need to go index.html to change the size of frame as well so that it can be seen.*/
}

#menu dt {	
cursor: pointer;
margin: 2px;
height: 20px;
line-height: 20px;	/*change the height of grey boxes*/
text-align: center;
font-weight: normal;
border: 1px solid gray;
background: #ccc;
}

#menu dd {
border: 1px solid gray;
}

#menu li {
text-align: center;
background: #fff;
padding-bottom: 0px	/*increase the spacing between each link box */
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0px none;
height: 100%
}

#menu li a:hover, #menu dt a:hover {
background: #eee;
color:#FF0000;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}

HTML {overflow-x:hidden;overflow-y:auto;}