/* =============================================================================================
 * Test layout for another menu style
 * File: menu-2.css     CSS page
 * 
 * Author: s.clark
 * Copyright: (c) 2013 by S.Clark
 * Created: Nov 2013
 * Browsers tested on: FireFox, IE9, Chrome, Opera
 */


/* General HTML body styling */
.body {padding: 0; margin: 0; background: LightSlateGray;}

/* Sets the styling for the Div holding Horz menu */
#wrap {
		width: 100%;
		height: 30px; 
		margin: 0; 
		z-index: 99;
		position: relative;
		background-color: orange;
		}

/* Sets the styling for the Horz menubar */
.navbar	{
			height: 30px;
			padding: 0;
			margin: 0;
			position: absolute;
			border-right: 1px solid Peru;
			}

/* Sets the Horz menu (the top level ones) items styling */
.navbar li {
			height: auto;
			width: 122.25px; 	/* you need to calc this for your body's_width/Horz_menu_cnt */
			float: left; 
			text-align: center; 
			list-style: none; 
			font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
			padding: 0;
			margin: 0;
			background-color: orange;					
			}

/* Sets the styling for all links in each menu item */
.navbar a {							
			padding: 8px 0;  
			border-left: 1px solid Peru;
			border-right: 1px solid #1f5065;
			text-decoration: none;
			color: white;
			display: block;
			}

/* Sets the styling color when the user hovers over a menu item */
.navbar li:hover, a:hover	{background-color: Peru;}

/* Hides all drop-down menu groups until an action is taken to show them */ 
.navbar li ul {
				display: none;
				height: auto;									
				margin: 0;
				padding: 0;								
				}

/* Disable this from the example on the web.
 * It left the drop-down visible even after clicking on it.
 * So i created Javascript handling to work for handling the visibility of the drop-downs.
 * It works across the 4 browsers that i test with.
 * 
 * .navbar li:hover ul {display: block;}
 * 
 * .navbar li:hover ul {
 *					display: block;									
 *					}
 */

/* Sets the drop-down items base color */				
.navbar li ul li {background-color: Peru;}

/* Sets the borders for the drop-down menu items */
.navbar li ul li a {
					border-left: 1px solid #1f5065; 
					border-right: 1px solid #1f5065; 
					border-top: 1px solid #74a3b7; 
					border-bottom: 1px solid #1f5065; 
					}

/* Changes the drop-down menu items color when user hovers over the item */
.navbar li ul li a:hover {background-color: orange;}

.SubNav {
	font-family: Arial; 
	color: Cyan; 
	font-weight: bolder;
}


/* my control of 'Contact' links colors */
a.ctact:link {color:yellow;}
a.ctact:visited {color:LightGray;}	

/* Styling for Heading text */
.myHeader1 {
	text-align: center;
}


.mnuHeading1{
	background: DarkTurquoise; 
	color: yellow; 
	font-weight: bold; 
	height: 15px; 
	padding-top: 1px;
	padding-bottom: 2px;
}

/* My version of abreviated 960 controls
 * 		i wanted a custom width for the body.
 */
.container_12{
	margin-left: auto; margin-right: auto; width: 980px;
}
.grid_12{
	display: inline;
	  float: left;
	  margin-left: 10px;
	  margin-right: 10px;
}
.container_12 .grid_12 {
  width: 980px;
}
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}