@charset "utf-8";

/******
	Note that em sizes are based on a default 1em = 12pt = 16px = 100% for flexibility.
	If global type is declared differently (say 12px) then the em relationship will be
	a proportion of that. Normally, type styling should be separated from layout styling,
	but they are combined here for ease of single stylesheet.
	
	If your stylesheet defines global type as other than 1em or equivalent, you will need
	to edit the font sizes on lines 100, 155 and 177 to correct the sizing.
	
	The style initially uses a 2000px wide banner without the District Title or Building
	Strong as part of the graphic. The District title is renedered through HTML text in
	the HTML DIV called CORPS DIstrict. Building Strong is a separate graphic laid on top of 
	the blank banner.
	
	BuildingStrong.png is a 200px x 100px transparent png file.
	
	If you are using your own banner provide by Jane and VI, then remove the 
	#CorpDistrict and #BuildingStrong sections below. The rest of the style should flow.
	
	Remember to remove the comments before final publication.
******/

/* #CorpsHeader: Placeholder for isolating entire header element */
.CorpsHeader {
	width: 957%;
	min-width: 55em; /* Change this to fit the width of your existing TABLE, DIV, etc. */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	}

/* #CorpsBanner: Placeholder for graphic banner image -- base image supports 2000px width */	
.CorpsBanner {
	background-color: #fff;
	background-image: url(../Images/CorpsHeader/CorpsBanner.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 128px;
	width: 1000px;
	}
.CorpsLogo {
	float: left;
	display: block;
	margin-left: 15px;
	width: 90px;
	height: 75px;
	margin-top: 15px;
}


/* #CorpsDistrict: Placeholder for isolating District Title as an image.
   If you are using your own banner provide by Jane and VI, then remove the #CorpDistrict section below 
   and remove this comment */
.CorpsDistrict {
	float: left;
	width: 500px;
	margin-top: 95px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 25px;
	font-family: Arial;
	font-size: 26px;
	font-weight: bold;
	color: #396250;
	}
	
/* #Building Strong: Placeholder for Building Strong graphic to remain right aligned as page width scales 
   If you are using your own banner provide by Jane and VI, then remove the #BuildingStrong section below 
   and remove this comment */		
.BuildingStrong {
	width: 200px;
	height: 100px;
	float: right;
	z-index: 100;
	background-color: transparent;
	background-image: url(../Images/CorpsHeader/BuildingStrong.png);
	background-repeat: no-repeat;
	background-position: right top;
	}
	
.backtohomepage {
	float: left;
	margin-top: 45px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 15px;
	background-image: url(../Images/CorpsHeader/Corps_Logo_Red.png);
	padding: 0px;
	height: 73px;
	width: 100px;
	}


/* #CorpsDistrict: Keep the District Title as text for searches but don't show it in the browser */ 
.CorpsBanner span, .BuildingStrong span { display: none;}

/******
	Top Menu section
	Darker green horizontal menu can accommodate 6-7 items 
*****/   
	
/* #TopMenuArea: Define the box's attributes */
.TopMenuArea {
	background: #95a195;
	float: left;
	padding: 0px;
	width: 100%;
}

/* ul#TopMenuArea: Clear the list's style and margins/padding */
ul.TopMenu {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ul#TopMenuArea li: Leave layout control to the list items */
ul.TopMenu li {
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	line-height: 21px;
	white-space: nowrap;
	border-right: 1px solid #a9a9a9;
	text-transform: uppercase;
}

/* ul#TopMenuArea li a: Specify the link styles */
ul.TopMenu li a {
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 0.7em; /* Change this to a fixed pixel size if necessary */
	text-decoration: none;
	color: #000000;
	background: transparent;
}

/* Force the <a> within the menu to use full width */
.TopMenuArea>ul#TopMenu li a { width: auto; }

/* Color the menu item on mouseover */
ul.TopMenu li a:hover {
	color: #fff;
	background: #95a195;
	}

/* Search Bar 
   Can accommodate most any search that allows sizing to below */
.SearchBar {
	float: right;
	padding-right: 10px;
	width: 200px;
	font: 0.8em #000 Verdana, Arial, Helvetica, sans-serif;
	height: 21px !important;
    height: 23px;
	overflow: hidden;
	}

.SearchBar input {
    border: 0px;
	}
	
.SearchBar input.SearchButton {
 	font: 0.7em #000 Verdana, Arial, Helvetica, sans-serif;
	padding-left: 5px;
	height: 18px;
	}

/* How Do I (MainMenu) 
   Lighter Green Menu can accommodate*/

/* #MainMenuArea: Define the box's attributes */
.MainMenuArea { 
	margin: 0;
	width:100%;
	background-color: #D0D2BD;
	padding: 0 0 -5px 0;
	overflow-x:hidden; /* IE7 */
	clear:both;
	}

/* #HowDoI: Separate the "How Do I..." Text from the menu box */
.HowDoI { 
  	float: left;
	width:10%;
	margin: 2px 0 0 5px;
	font-size: 0.75em; 
	font-weight:bold;
	}
	
/* #MainMenuAreaBlock: Subcontainer for #MainMenu ul */
.MainMenuBlock {
	float:left;
	width:85%;
	}
	
.MainMenuArea ul {
    list-style-type: none;
	margin: 3px 0;
	}
	
/* #MainMenuArea ul li: Set the list's style specifically width before column-wrap */
.MainMenuArea ul li {
    float:left;
    width: 16em; /* 256 pixels */
    margin-bottom: 4px;
    padding:0;
	display: inline;
	font-size: 0.7em; /* Change this to a fixed pixel size if necessary*/
	}

/* Define the attributes for the How Do I elements */
.MainMenuArea ul li a,
.MainMenuArea ul li strong {
	width: auto;
	margin: 0;
	padding-left: 15px;
	color: #000;
	font-weight: normal;
	text-decoration: none;
	background-color: transparent;
	background-image: url(../Images/CorpsHeader/MainMenu_Bullet.png);
	background-repeat: no-repeat;
	background-position: left top;
	}
.MainMenuArea ul li a:focus,
.MainMenuArea ul li a:hover,
.MainMenuArea ul li a:active {
	color: #990000;
	text-decoration: none;
	background-color: transparent;
	background-image: url(../Images/CorpsHeader/MainMenu_Bullet-Over.png);
	background-repeat: no-repeat;
	background-position: left top;
	}