/* 2012 01 09 Mike Neilson
 *
 * Intial creation of the CSS ( see header-ie.css for IE specific header )
 * for the header for the public site
 *
 * This matches the general form of the district and Corps public page
 * and should be adjusted to continue to do so
 *
 * 
 *
 */
#header{
	
	/*background-color: #8B9E9A;*/
	/*margin: 0px;
	padding: 0px;
	*/
	/*
	width: 830px;
	margin-left: auto;
	margin-right: auto;
	*/
	text-align: left;
	/*background: url("/web/20161027183725oe_/http://www.spk-wc.usace.army.mil/images/header.jpg") top center repeat-x #828387;*/
	/* This is the gradient 
	 *
	 * the color at the end is an olive drab
	 */
	background: url("/web/20161027183725oe_/http://www.spk-wc.usace.army.mil/images/header.jpg") top center repeat-x #8B9E9A;
	height: 10.3em;
	margin-bottom: 0em;
	padding-bottom: 0em;
	/*border: thin solid black;*/
}

#logo{
	
	/*background-color: white;*/
	position: relative;
	/* the image used has transparency
	 * so we put it above everything else
	 */
	z-index: 20;
	/*width: 500px;*/
	width: 31.250em;
	/*height: 70px;*/
	height: 4.375em;
	top: -1.3em;
	left: 1em;
	/*
	left: -10em;
	*/
	padding: 0px;
	/*border: thin solid black;*/
}

#logo a{
	padding: 0px;
	margin: 0px;
}

#logo img{
	/*
	 * we don't want extra
	 * also it seems every browser except
	 * IE default to no border around images
	 */
	padding: 0px;
	margin: 0px;
}

#banner{
	margin: 0px;
	padding: 0px;
	padding-bottom: 0px;
	width: 100%;
	/*border: thin solid red;*/
	/*height: 85px;	*/
}
#office {
	/*
	 * This contains the 
	 * "Sacramento District Water Control Data System" text
	 *the main box just has the "Sacramento Distrcit Water Control"
	 */
	font-size: 2.5em;
	font-family: TimesNR, Times, "Times New Roman";
	/*position: relative;
	top: .5em;*/
	/*width: 380px;*/
	/*width: 10em;*/
	width: auto;
	text-align: right;
	float: right;
	color: #36614e;
	margin-right:.2em;
	/*border: thin solid blue;*/
}

#office span{
	/*
	 * This is for the "Water Control Data System" text
	 */
	font-size: .7em;
}


#banner img{
	margin: 0px;
	padding: 0px;
	float: left; /* forces the image of stuff to the left of the box */
}
#banner a{

	margin: 0px;
	padding: 0px;
}

#menu{
	/* This is the olive drabish color we were using */
	/*background-color: #8B9E9A;*/
	position: relative;
	overflow: visible;
	top: 2.9em;
	/*top: -3.3em;*/
	/*
	 * The menu div as a whole has to go under the logo div.
	 */
	z-index: 10;
	/*
	 * This is the dark to lighter gradient
	 */
	background: url("/web/20161027183725oe_/http://www.spk-wc.usace.army.mil/images/menu.gif") top center repeat-x;
	padding: 0.1em;
	margin-top: .5em;
	margin-bottom: 0.1em;
	height: 2.3em;
}
#menu ul{
	margin-left: 6em;
	padding-top: 0.2em;
	position: relative;
	left: 1em;
	overflow: auto;
}

#crayon{
	/*background: url('/web/20161027183725oe_/http://www.spk-wc.usace.army.mil/images/crayon.png') no-repeat;*/
	/*width: 7.438em;*/
	/*font-size: .8em;*/
	/*text-align: center;*/
}

#crayon a{
	font-size: 1em;
}	

#menu a{
	/* make everything stand out on the green background */
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-family: Times, TimesNR, "Times New Roman";
	/* the links themselves should be the highest.
	 * NOTE: this doesn't actually work. but the list
	 * is low enough that it doesn't matter
	 */
	z-index: 60;
	border: none;
}

#menu img{
	vertical-align: text-top;
	/*
	 * line up the image in the middle of everything.
	 * without this it looks out of place and breaks the flow.
	 */
	padding-top: 0.15em;
	margin: 0px;
	
}

#menu li{
	/*
	 * it's a list but doesn't need bullets or marks, etc.
	 */
	/*
	 * without the float and display IE (8) had the crayon outside the list block
	 * element. it also tighten up the display in both FF and IE.
	 */
	float: left;
	display: inline-block;
	list-style-type: none;
	/*
	 * force some seperation from the elements
	 */
	padding-right: 1.8em;
	width: auto;
/*	border: thin solid black;*/
}


