/********************************************************************************* 
* Purpose:  Contains style settings for overall layout and navigation elements
*           of the page.
* History:
* 2008-09-09 - Luther Casey
*    - Modified styles related to the top navigation bar (navbarmenu) and associated fly-out
*      menus.  Alignment of flyouts now works correctly in IE7.  Background color
*      of menu items changes with mouseovers for IE, Firefox and Opera.
*      For "selected" menu entries, the mousepointer keeps the "default" appearance 
*      and text does not underline.
**********************************************************************************/
body #page {				/* wrapper for centering */
	margin: 0 auto;			
	width: 97%;
	min-width: 848px;
	font-size: 1.3em;		/* 13-pixel default size */
}

#utils {					/* links at the top of the page, above the banner */
	float: left;
	font-size: .85em;
	padding: 1.1em 0;
}

#utils ul {
	padding: 0;
	margin: 0;
}

#utils li {
	list-style-type: none;
	margin: 0;
}

#global-utils li {			
	float: left;
}

#site-utils li {			
	float: right;
	text-transform: lowercase;
}

#banner {					/* logo, titles, and search center */
	float: left;
	clear: both;
	padding: 1em 0 1.2em 0;
	margin: 0;
	width: 100%;
}

#banner input, 
#banner select {
	font-size: .85em;
}

#logo {
	display: block;
	float: left;
	margin: 0 1em 0 .7em;
	padding: 0;
}

#banner-text {				/* home page title link and tag line */
	float: left;
}

#homepage-link {
	display: block;
	font-size: 1.7em;
}

#homepage-link:link, 
#homepage-link:visited {
	text-decoration: none;
}

#homepage-link:focus,
#homepage-link:hover {
	text-decoration: underline;
}

#tagline {
	display: block;
	margin-top: .3em;
	font-size: .85em;
}

#search-center,
#language-selection {
	float: right;
	margin: 1em .5em 0 1em;
}

#micro-banner {
	font-size: 1.1em; 
	font-weight: bold;
	padding: .5em;
}

/********************************************************************************* 
* Top Navigation Bar Settings - Start
*
* These settings are more complicated than need to be in order to support IE6
* which isn't a W3C compliant browser with styles.
**********************************************************************************/
/* 
* ID of the div tag that surrounds the top navigation bar elements.
*/
.navBarMenuDiv 
{ 
	/* border-bottom: 1px solid #ccc; */
	border-bottom: 1px solid Silver;
	border-top: 1px solid Silver;
	color: Black;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;  /* Infocentre uses fixed width of 959px; */
}

/*
* Single UL element, inside of the navbarmenu div tag, that contains all of the 
* top navigation bar elements.  Each primary nav bar entry is an "li" item within 
* this "ul"
*/
.navBarMenuUL
{
	height: 1.75em;    
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;       
	z-index: 99;       /* Places subnavs on top of other content */	
}

/*
* LI elements that are always visible as each entry of the navigation bar.  Each
* entry contains an A tag whose settings are below.
*/
li.mainnav,
li.mainnavSelected,
li.mainnavHighlighted
{
	border-left: solid 1px Silver;
	border-right: solid 1px Silver;
	color: Black;                  
	display: block;
	float: left;
	line-height: normal;
	margin: 0;
	padding: 0;
	position: relative;         /* anchor point for absolutely positioned subnavs */
	text-align:center;
}

#nav>li.mainnav:hover {
	z-index: 96;  /* Opera 7 */
	}

/*
* A elements that are in each primary navigation LI element 
* and are always visible. We are applying the same settings 
* for all entries (whether selected or not) and then overridding
* some settings for the selected entry below.  
*/
.mainnavA,
.mainnavA:link, 
.mainnavA:visited,
.mainnavA:focus,
.mainnavA:hover,
.mainnavASelected,
.mainnavASelected:link, 
.mainnavASelected:visited,
.mainnavASelected:focus,
.mainnavASelected:hover 
.mainnavAHighlighted,
.mainnavAHighlighted:link, 
.mainnavAHighlighted:visited,
.mainnavAHighlighted:focus,
.mainnavAHighlighted:hover 
{
	background: transparent;
	display: block;
	color: Black;                  
	float: none;              
	font-size: .85em;         
	font-weight: bold;
	letter-spacing: 0;
	padding: .5em 0 .3em 0;   
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}


/*
* The selected menu entry is also a li.mainnav but also has an 
* "id" of nav-menu-selected.
*/
#nav-menu-selected, 
#nav-menu-highlighted
{
	background: Silver;
	background-color:Silver;
	color: Black;
}

.mainnavASelected:hover
{
	color: Black;   
	cursor: default;           
}


/*
* When the user puts the mouse over a navigation 
* menu item we want the background color to change and the text to be underlined 
* to make it obvious they can click on it to navigate.
*/
/* Settings for the LI element*/
li.mainnav:hover,
li.mainnavHighlighted:hover
{
	background: Gray;
	background-color: Gray;
    color: White;
}   
/* Settings for the A element inside of the LI element*/
li.mainnav a:focus,   
li.mainnav a:hover,
li.mainnavHighlighted a:focus,   
li.mainnavHighlighted a:hover 
{
	background: Gray;
	background-color: Gray;
    color: White;
	text-decoration: underline;
}


/*
* UL elements that define fly-out menu entries.  When present, sub-menus are defined
* as an unordered list (ul) withing the LI element that defines the top level
* menu entry.
*/
.flyOutMenuUL
{
	background: White; 
	border: 1px solid Silver;
	color: Black;
	/* Set display to hide the fly-outs by default.  Then some JavaScript 
     * in the mouseover event of the primary nav will set display to 
     * "block" to show it. */
	display: none;   
	padding: 0;
	position: absolute;
	left: 0px;    /* As the default we want fly-out menus to be left aligned with the parent menu entry */
	list-style: none;
	margin: 0;
	margin-left: -1px;
	overflow: hidden;
	text-align: left;
	top: 100%; /* IE */
	width: 100%;
}

/*
* LI elements that make each entry of the flyout menu.  Each
* entry contains an A tag whose settings are below.
*/
.flyOutMenuLI
{
	margin: 0;
	padding: 0;
	text-align: left;
	width: 100%;
}
	
/*
* A elements that are in each LI element for the flyout menu.   
*/
.flyOutMenuA,
.flyOutMenuA:link, 
.flyOutMenuA:visited,
.flyOutMenuA:focus,
.flyOutMenuA:hover 
{
	background: White; 
	border-top: none;
	border-right: 1px solid Silver;
	border-left: 0px solid Silver;
	border-bottom: 1px solid Silver;
	color: Black;
	display: block;
	font-size: .85em; 
	font-weight: normal;
	line-height: 1.2;
	margin: 1px 1px 0 1px;
	padding: 4px;
	text-align: left;
	text-decoration: none;
	width: 100%;
} 

/* 
* Highlight unselected flyout menu entries as the mouse rolls over them
*/
.flyOutMenuA:hover 
{ 
	color: White;
	border-color: Silver;
	border-bottom: 1px solid Silver;
	background-color: Gray;
	text-decoration: underline;
}

/*
* UL settings for the flyout entry that represents the current
* page the user is viewing.  This element will have an 
* "id=flyout-menu-selected" attribute.  So these settings will apply
* to that single entry to represent it is already selected.
*/	
#flyout-menu-selected,
#flyout-menu-selected:hover,
#flyout-menu-selected:focus
{
	background: Silver !important; 
	background-color: Silver !important;
	border-top: none !important;
	border-right: 3px solid Silver !important;
	border-left: 3px solid Silver !important;
	border-bottom: 1px solid Silver !important;
	cursor:default;
}

/* 
* A element settings for the flyout menu entry for the current page.
* The A element will be present but will not have a URL.  No point
* in the user being able to click it since they are already on
* the page for this entry.
*/
.flyOutMenuASelected,
.flyOutMenuASelected:link, 
.flyOutMenuASelected:visited,
.flyOutMenuASelected:focus,
.flyOutMenuASelected:hover 
{
	background: Silver; 
	background-color: Silver !important;
    border-top: none;
	border-right: 3px solid Silver;
	border-left: 3px solid Silver;
	border-bottom: 1px solid Silver;
	color: Black !important;
	cursor:default !important;
    display: block;
	font-size: .85em; 
	font-weight: bold;
	line-height: 1.2;
	margin: 1px 1px 0 1px;
	padding: 4px;
	text-align: left;
	text-decoration: none !important;
	width: 100%;
} 



/********************************************************************************* 
* Top Navigation Bar Settings - End
**********************************************************************************/



#content {					/* below the banner and nav menu */
	clear: both;
	float: left;
	border-top: solid 4px #fff;
	background-color: White;
	width: 100%;
	padding: 0;
	margin: 0;
}

#main {
	float: right;
	border-left: solid 1px #ccc;
	width: 82%;
	min-width: 666px;
}

#content form {
	padding: 1em .5em 2em 1em;
	background-color: White;
}

.pageMenuDiv /* WLC 2008-09-13 */
{
	float: left;
	width: 15%;
	min-width: 100px;
	margin: 0;
	padding: 0;
}


#page-menu {				/* down the left side */
	float: left;
	width: 100%;
	/* min-width: 100px; */
	margin: 0;
	padding: 0;
	border-top: solid 1px Silver;
	border-bottom: solid 1px Silver;
	border-right: solid 1px Silver;
	border-left: solid 1px Silver;
	list-style: none;
	overflow: hidden; /* WLC 2008-09-13 */
}

#page-menu a {
	display: block;
	width: 100%;
	border-top: solid 1px Silver;
	border-bottom: solid 0px Silver;
	border-right: solid 1px Silver;
	padding: .5em .75em;
	color: #333;
	text-decoration: none;
	font-size: .85em;
}

#page-menu li {
	margin: 0;
	width: 100%; /* WLC 2008-09-13 */
}

#page-menu a:focus,
#page-menu a:hover {
	background-color: Gray;
	color: White;
	text-decoration: underline;
}

#page-menu-selected,
#page-menu-selected:hover,
#page-menu-selected:focus {
	background-color: Silver !important;
	text-decoration: none !important;
	color: Black  !important;
	font-weight:bold;
	cursor:default;
}



#page-menu a.nolink {
	text-decoration: none !important;
	background-color: #eee !important;
}

#page-menu ul {			/* sub-menus */
	margin: 0;
	/* padding: 0 0 0 1em; */
	padding: 0 0 0 0; /* WLC 2008-09-13 */
	list-style: none;
	width: 100%; /* WLC 2008-09-13 */
}


#page-menu ul a {
	border-left: solid 1px #fff;
}



#side {						/* Related Links, etc. */
	float: right;
	clear: right;
	width: 18%;
	border-left: solid 1px #ccc;
	margin: 1em .5em .5em 1em;
	padding-left: .5em;
}

#side h2 {
	padding: .4em;
	margin: 0 0 0 .2em;
	background-color: #ddd;
	font-size: .9em;
	font-weight: bold;
	letter-spacing: -1px;
}

#side ul {
	padding: 0;
	margin: 0 0 0 1.5em ;
}

#side li {
	margin: .5em 0 .5em 1.5em;
	font-size: .85em;
	list-style-position: outside;
}

#page-footer {				/* links at the bottom of the page */
	clear: both;
	padding: 1.5em 0;
	margin: 0;
	width: 100%;
	border-top: solid 1px #999;
	background-color: inherit;
	font-size: .85em;
	text-align: center;
	text-transform: lowercase;
}

#page-footer li {
	display: inline;
	list-style-type: none;
}

#copyright {
	margin: 1em 1em 2em 1em;
	padding: 0;
	color: #999;
	font-size: .85em;
	text-align: center;
}

#copyright a {
	color: #999;
}