* {margin:0; padding:0;}

html{
font-size:125%; /* This sets 1em to 20 pixels */
}

body{
font-family: verdana, arial, helvetica, sans-serif;
font-style: normal;
font-size:50%; /* Now 1em is 10 pixels (points) */
color: white;
background-color:black;
}

h1{
/*font-family: lucida handwriting,garamond, serif;*/
font-family: garamond, serif;
font-size: 3.6em;
}

h2{
/*font-family: lucida handwriting,garamond, serif;*/
font-size: 2.6em;
padding: 0.1em 0em;
}

h3{
/*font-family: lucida handwriting,garamond, serif;*/
font-size: 1.7em;
padding: 0.1em 0em;
}

h3 a {
color:red;
}

h3 a:hover{
text-decoration: underline;
color:red;
}

h4{
/*font-family: lucida handwriting,garamond, serif;*/
font-size: 1.6em;
}

h5{
/*font-family: lucida handwriting,garamond, serif;*/
font-size: 1.4em;
}

h5 a{
/*font-family: lucida handwriting,garamond, serif;*/
font-size: 1.0em;
}

h6{
/*font-family: lucida handwriting,garamond, serif;*/
font-size:1.2em;
padding: 0.1em 0em 0.2em 0em;
}

h6 a{
color: rgb(255,165,0); /* orange */
}

p{
/*font-family: lucida handwriting, garamond, serif;*/
font-size: 1.2em;
padding: 0.1em 0em 0.2em 0em;
}

ul, ol, dl {
font-size:1.2em;
margin: 0.0em 0.0em 0.0em 1.0em;
}

ul{
list-style-type:none;
}

a {
color: white;
font-size:1.2em;
text-decoration:none;
}

a:hover{
color:red;
text-decoration:none;
}

.main-menu{
font-size:1.0em;
margin: 1em 0 0 0;
}

.course-menu{
font-size:1.2em;
margin: 0.0em 0.0em 1.0em 1.0em;
}

.ital {font-style: italic;}
.oblq {font-style: oblique;}

.brown {color: brown;}

.block-up {display: block;}
.line-up {display: inline;}

.block-center{margin: auto;}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right{text-align: right;}

.clear-top{margin-top: 1em;}
.float-left{float: left;}
.float-right{float: right;}

.clear-left{clear: left;}
.clear-right{clear: right;}
.clear-both{clear: both;}

.no-margin{margin:0;}
.no-padding{padding:0;}
.no-border{border-width:0;}

.no-clearance{
margin:0;
padding:0;
border-width:0;
}

.right-blurb{
padding: 0 0 0 2.0em;
}

.padding-one{
margin:1.0em 2.0em 0.0em 0.0em;
}

/* set general button styles */
dt.btn {margin-bottom: 5px; text-align: center}

/* set general anchor styles - fill the container */
dt.btn a {display: block; text-decoration: none; color: white; font-size: 1.3em; font-weight: bold}

/* MouseOut state (default) */
dt.btn a {background: blue; border: 5px outset blue;}

/* MouseOver state (hover) */
/* bug in IE - must restate color */
dt.btn a:hover {background: blue; border: 5px outset blue; color:white}

/******** Horizontal Menu from CSS Easy p168 */
/* set tabs menu position */
dl.hmenu{
padding: 1.0em 0 2.0em 0;
margin: auto;
}

/* set general tab styles - horizontal format */
dt.tab{
display: block;
float: left;
margin: 0;
text-align:center;
}

/* set general anchor styles - fill the container */
dt.tab a{
display: block;
text-decoration: none;
color: white;
font-size: 1.0em;
font-weight: bold;
background: rgb(153,102,50); /* brown */
border: 5px outset rgb(153,102,50);
width: 100px;
}

/* MouseOver state (hover) */
dt.tab a:hover{
text-decoration: none;
color:white;
background: red;
border: 5px outset red;
}

dt.tabolive{
margin: 0;
text-align:center;
}

dt.tabolive a{
float:left;
text-decoration: none;
color: white;
font-size: 1.0em;
font-weight: bold;
background: rgb(10,10,10);
border: 5px outset rgb(5,5,5);
width: 80px;
}

/* MouseOver state (hover) */
dt.tabolive a:hover{
text-decoration: none;
color:white;
background: red;
border: 5px outset red;
}

/*********** end of Horizontal Menu from CSS Easy p168 */

table.contact{
width: 100%;
table-layout:auto;
caption-side: top;
font-size: 1.2em;
margin-bottom: 1em;
padding:1em;
border-collapse: collapse;
text-align: center;
}

table.contact td {
color:white;
font-size: 1.0em;
font-weight:bold;
padding: 0.1em;
}

table.contact th{
color: rgb(153,102,50);
font-size:1.4em;
}

table.contact td a{
color: white;
text-decoration:none;
font-size:1.0em;
font-weight:bold;
}

table.contact td a:hover{
color:red;
text-decoration:underline;
font-size:1.0em;
font-weight:bold;
}
///////////////////////////////////////
table.grid{
width: 100%;
table-layout:auto;
caption-side: top;
font-size: 1.2em;
margin-bottom: 1em;
padding:1em;
border-collapse: collapse;
}

table.grid td {
color:white;
font-size: 1.0em;
font-weight:bold;
padding: 0 0 0 2em;
text-align:left;
}

table.grid td a{
color:white;
text-decoration:none;
font-size:1.0em;
font-weight:bold;
}

table.grid td a:hover{
color:red;
/*
text-decoration:underline;
font-size:1.0em;
font-weight:bold;
*/
}

table.grid th{
color: rgb(153,102,50);
font-size:1.4em;
}
////////////////////////////////////////
table.right td{
color:white;
font-size: 1.0em;
font-weight:bold;
padding: 0 2em 0 0;
text-align:right;
}

table.tmenu{
padding:1em;
border-collapse: collapse;
text-align: center;
}

table.tmenu td {
font-size: 1.2em;
font-weight:bold;
padding: 0 0.5em;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: black;
}

table.tmenu td.first {
border-width: 0px;
}

table.tmenu td a{
color:blue;
font-size:1.0em;
text-decoration: none;
}

table.tmenu td a:hover{
text-decoration: underline;
color: red;
}

/* Multilevel Drop Down Menus from Stylin page p203 */
* {margin:0; padding:0;} 
div#mlddmenu {
width:100%; 	/* makes the div full width */
float:left; /*makes the div enclose the list */
border-top:1px solid #069;	/* draws line on top edge of div */
border-bottom:1px solid #069;	 /* draws line on bottom edge of div */
font-size:1.2em;	/* SET FONT-SIZE HERE */
margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for  clarity in this example*/
}

div#mlddmenu ul {
margin:0 0 0 30px;/* indents ul from edge of container */
font-size:1.0em;
}
div#mlddmenu li {
float:left;	/* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none;	/* removes the bullet off each list item */

border-right:1px solid #069; /* creates dividing lines between the li elements */
}

div#mlddmenu li:first-child {
border-left:1px solid #069; /*the first vertical line on the menu */
}

div#mlddmenu li:hover { 
background-color:#FFF; /*sets the background of the menu items */
}

div#mlddmenu a {
display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
padding:0 6px; /*creates space each side of menu item's text */
text-decoration:none;	 /* removes the underlining of the link */
color:blue;	/* sets the type color */
}

div#mlddmenu a:hover {
color:#F33;
}
/* the horizontal menu ends here */

/* the drop-down starts here */
div#mlddmenu ul li ul {
margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you  remove TEMP above */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent  */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu  stack*/
left:-1px; /*aligns the drop exactly under the menu */
}

div#mlddmenu ul li ul li {
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid #069; /*  three sides of each drop-down item */
border-bottom:1px solid #069;
border-right:1px solid #069;
padding:0 0 1px;
}

div#mlddmenu ul li ul li:first-child {
border-top:1px solid #069; /*the top edge of the dropdown */
}

/* make the drop-down display as the menu is rolled over */
div#mlddmenu ul li ul{
display:none;
} /* conceals the drop-down when menu not hovered */

div#mlddmenu ul li:hover ul {
display:block;
} /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
body div#mlddmenu ul li ul li ul{
visibility:hidden; /* same effect as display:none in this situation */
top:-1px;
left:10em;
}

div#mlddmenu ul li ul li:hover ul {
visibility:visible;
} /* same effect as display:block in this situation */

/* another level of pop-outs */
div#mlddmenu ul li ul li:hover ul li ul {
display:none;
} /* conceals the drop-down when menu not hovered */

div#mlddmenu ul li ul li ul li:hover ul {
display:block;
} /* shows the drop-down when the menu is hovered */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#mlddmenu ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
margin-left:15px; /* IE doubles the given value above - why? */
}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#mlddmenu ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}

/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the  drop-down */
* html  div#mlddmenu ul li ul li ul { 
left:9.85em; 
voice-family: "\"}\""; 
voice-family:inherit;
left:10em;
}

/* and the "be nice to Opera" rule */
html>body div#mlddmenu ul li ul li ul {
top:-1px;
left:10em;
}

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */

@media all and (min-width: 0px{
body div#mlddmenu ul li ul {padding-bottom:70px;}
body div#mlddmenu ul li ul li ul {padding-bottom:22px;}
body div#mlddmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block  in this situation */
}
/*end Opera hack */
/* end of hack zone */
/* END OF LIST-BASED MENU */