/* The "body" is the largest element - it contains the "container" but nothing else */

body {
	background-color:teal;  /* teal background screen */
}

/* The code that follows styles the "container," "masthead," "navigation," */
/* "content" and "footer" boxes.  BUT NOT THE CONTENT OF THOSE BOXES.  */

/*This is the red/orange "container" that sits on top of the teal background */
#container {
	background-color: #FF3300; /* red-orange */
	width: 940px; /* originally 930 - widened for older browsers - will that work? */
	border: 4px  black  solid;  	/*the black border allows Firefox and Safari 
	                                to recognize the margin around the masthead and footer*/
	padding:0px 0px 0px 0px; /* the contents of the container will need a margin 
	                         around them to keep them off the border of the container */
	margin: 10px auto;	/* 10px of the teal background at both the top and the bottom */
	                    /* auto centers the container (left/right) in the body */
}

/*This is the masthead at the top of all pages */
#masthead {
	background-color: white; 
	width: 900px;
	height:130px;
	border:  1px  solid  black;
    padding: 0px 0px 0px 0px;  /* the contents of the masthead will need  margins */
	margin-top:10px;
	margin-bottom:0px; /* the navigation & content boxes will need margins at the top */
	margin-left:14px; /* centers the masthead in the 930px wide container */
}

/* This refers to the box containing the content of the site */
#content {
	background-color: white;
    float: left;  
    width: 688px;  /* calculated to make everything line up correctly */
	border: 1px solid black;
	padding: 0px 0px 0px 0px;
	margin-top: 10px; 
	margin-left: 10px;
	margin-bottom: 10px;
}

#AlertBox {
	background-color: white;
    width: 900px;  
	border: 1px solid black;
	padding: 0px 0px 0px 0px;
	margin-top: 10px; 
	margin-bottom: 0px;
	margin-left: 14px;
}

#AlertBox h2 {
	color:black;
	padding:5px 0px 0px 0px;
	margin:0px 0px 10px 0px;
	border:0 transparent none;
	text-align:center;
	font-size:x-large; /* Over-rides 12px setting in the body. */
	line-height:normal; /* Normal for a font-size of x-large. Over-rides 14px setting in body*/ 	
}

/* This refers to the box containing the footer */
/* The footer is empty - but I need this box for FireFox and Safari */
#footer {
	clear: both; 
}

/* Now we style the contents of the various containers */

/* First the container */
#container {
	font-family: Verdana, Arial, "Times New Roman", sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-weight:normal; /* Is "normal" different for different browsers? */
}

#container p {         /* This seems necessary so that all browsers provide the same spacing */
	border:0px;
	padding:0 0 0 0;
	margin-top:0px;
	margin-bottom:20px;
}

/* Nothing for the masthead */

/* Next, the content */

#content h1 {
	color:  #009999;
	border:1px transparent solid;
	padding:10px 0px 0px 0px;
	margin:0px 0px 10px 0px; 
	text-align:center;
	font-size:xx-large; /* Over-rides 12px setting in the body. */
	line-height:normal; /* Normal for a font-size of xx-large. Over-rides 14px setting in body*/ 
}

#content h2 {
	color:black;
	padding:0px 0px 0px 0px;
	margin:20px 0px 20px 0px;
	border:0 transparent none;
	text-align:center;
	font-size:x-large; /* Over-rides 12px setting in the body. */
	line-height:normal; /* Normal for a font-size of x-large. Over-rides 14px setting in body*/ 
}

#content img {
	padding: 5px;
	border: 1px solid #808080;
}


#content .caption {   /* modifies the container p */
    font-size: x-small; 
	margin-top:-20px; /* over-rides the margin-bottom of the paragraph containing the picture set in "container p" */
	padding:0px;
	border:0px;
	line-height:normal  /* The line-height is set for the "body" at 1.2em. This over-rides. */
}

/* Begin My Personal Styles */

.center {
    text-align: center;
}

.underline{
	text-decoration:underline;
}

/* End My Personal Styles */

.noUnderline {
	text-decoration:none;
}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#menu {float:left; width:200px; position:relative; font-size:11px; margin-bottom:10px; 
       margin-left:14px; margin-top:10px;}
       
#menu ul {padding:0; margin:0;list-style-type: none;} /* controls left-right positioning of sub-menu */

#menu ul li {float:left; margin-right:1px; position:relative;} /* controls up-down positioning of sub-menu */

#menu ul li {display:block;  width:200px; height:20px; 
               border:1px solid #FF3300;   /*the border is the color of the container*/
               background:white; line-height:19px; font-size:11px;}

#menu ul li a {display:block; text-decoration: none; background:white;color:black;
               text-align:center; } /*controls style of top menu before hover */
                                    /*but code immediately above is important */
                                    /*in ways that I cannot figure out        */
                                   

#menu ul li ul li {text-align:center; height:20px;}  /*handles the headings for the various staff categories */
#menu ul li ul li:hover {text-decoration:underline;color:white;background:black;} /*underlines a staff category heading when user hovers over one */

/*controls style of text of top level menu on hovering*/
#menu ul li:hover a {display:block; color:white; background:black;text-decoration:underline;} 

/*controls the colors of the sub-menu when hovering over the top menu */
#menu ul li:hover ul li a {color:black; background:white; text-decoration:none;}

/*controls the colors of the sub-menu when hovering over the sub-menu */
#menu ul li:hover ul li a:hover {color:white; background:black; text-decoration:underline;}



/*PREVENTS the sub-menu from being displayed until user hovers*/
/*without this line the sub-menu is embedded in the top menu*/
#menu ul li ul {display: none;} 

/*CAUSES the sub-menu to be displayed when user hovers and also positions the sub-menu*/
#menu ul li:hover ul {display:block; position:absolute; top:0; left:200px; width:200px; height:20px;}

/*PREVENTS the 3rd level menu from being displayed until user hovers*/
#menu ul li:hover ul li ul {display: none;}

/*CAUSES the 3rd level to be displayed when user hovers and also positions the sub-menu*/
#menu ul li:hover ul li:hover ul {display:block; position:absolute; top:0; left:200px; color:#000; height:20px;}

#logon {
    visibility:visible;
	}
#logoff {
    visibility:hidden;
	}
#addresses {	
    visibility:hidden;
    }
#calendar {	
    visibility:hidden;
    }
#survey {	
    visibility:hidden;
    }