
/*         http://www.azgita.gov/digital_gov/az_gov/tips/        */

/* FYI -  
1) "#nav li a.top_link" (<li class="top">) sets the text size for the text in the TABS, as does body {font:1.0em arial...) 
2) "#bnr_center" is the style that contains the header image (../images/bnr_mid_back.jpg) for the AzDWR Web site 
3) The text size in the drop down menu is set by the .fly class 
*/

/*
Note the length of the text-input-area of the Google search bar is set in GoogleCSESearch.inc via this line
    <input type="text" name="q" size="51" /> <!-- this sets the length of the text-input-area of the Google search bar -->
*/

/* ------------------------ Basic Body CSS Starts -------------------------*/
body{
	behavior: url(ie_fix.htc);
	behavior: url(/AzDWR/images/Assets/css/ie_fix.htc); /* full path added to "Assets/css/ie_fix.htc" 5/13/2009 */
	padding:0px;
	margin:0px;
	background: #ECECEC;
	font: 1.0em Arial, Helvetica, sans-serif; /* this controls the sise of the font in the menu tabs. See 1) above. It appears to need to stay at 1.0 */ /* was 1 */
}
img {
	border:none;
}
.printwrapper  {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;

}

#mock_footer {
	text-align: center;
	font-size: .8em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666666;
	background: url(../images/footer_back.jpg) repeat-x left top; /* aml: Thought this blew the tab out of the water, but it doesn't */
}
.content_wrapper{
/*
I want the content area to expand to 100% of the screen.
width: 980px;  ------change to 100% to fill screen-------
*/
	width: 1010px; /* 980px; the width of the main (center) content area*/
	margin-right: auto;
	margin-left: auto;
}
#mock_footer a {
	color: #333333;
	text-decoration: none;
	/* padding-right: 10px;  - aml: This blows the tab out of the water */
	/* padding-left: 10px;  - aml: This blows the tab out of the water */
}

#main1 {
	margin:0;
	padding:0;
	/* background:#FFFFFF url(../images/left.gif) repeat-y left top; */ /* the image is width="190" height="10" */
		}
#main2 {
	margin:0;
	padding:0;
	/* background:url(../images/right.gif) repeat-y right top;  */ /* the image is width="190" height="10" */
		}
#left_column { /* set the width of all 3 columns here: #middle_column, along with #right_column, and #Left_column */
	float:left;
	width:0em; /* was 12em */
	margin:0;
	padding:0;
		}
#right_column { /* set the width of all 3 columns here: #middle_column, along with #right_column, and #Left_column */
	float:right;
	width:0em; /* was 12em */
	margin:0;
	padding:0;
	color: #FFF;
		}
		
		
#middle_column {   /* set the width of all 3 columns here: #middle_column, along with #right_column, and #Left_column */
	background:#FFFFFF;
	margin-top: 0;
	margin-right: 0em; /* was 12em - controls the BACKGROUND width of the "center column". If this is 0 there is no RIGHT column */ 
	margin-bottom: 0;
	margin-left: 0em; /* was 12em - controls the BACKGROUND width of the "center column". If this is 0 there is no LEFT column */ 
		}
		
		
.middle_content {
	margin:0;
	padding-top: 0.5em; /* pushes the entire content area down from the Search Box */
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: .5em;
	font-size: 0.9em;
	color: #333333; /* this is the text color */
		}
#middle_column .breadcrumb {
	font-size: .7em;
	border-bottom-width: 1px; /* The line across the page under the breadcrumb */
	border-bottom-style: solid;
	border-bottom-color: #999999;
}
#middle_column .breadcrumb a {
	text-decoration: none;
	font-weight: bold;
	color: #333333;  /* This is the static anchor color */
}
#mccont {
	display: block;
	height: 100%;
	}
#mccont p {
	padding: 0px;
	margin-top: 0.5em;
	margin-right: 0em;
	margin-bottom: 0.5em;
	margin-left: 0em;	
	
	}
#lccont {
	display: block;
	height: 100%;
	clear: both;
	}
#lccont p {
	padding: 0px;
	margin-top: 0.5em;
	margin-right: 0em;
	margin-bottom: 0.5em;
	margin-left: 0em;	
	
	}
#mccont h1 {
	font-size: 1.1em;
	padding: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
.right_content {
	margin:0;
	padding-top: 0.5em;
	padding-right: .5em;
	padding-bottom: 0.5em;
	padding-left: .5em;
	font-size: .9em;
		}
.left_content {
	margin:0;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	font-size: 0.9em;
	color: #FFF;
		}
.block {
		clear:both;
		height:1px;
		font-size:1px;
		border:none;
		margin:0; padding:0;
		background:transparent;
		}
/* -------------------------- Basic Body CSS Ends  ---------------------------*/
/* -------------------------- Banner CSS Starts  ----------------------------*/
#helpmenu{
	width: 100%;
	height: 1.5em; /*Height of top frame div*/
	overflow: hidden;
	background: #FFFFFF;
	text-align: right;
	display: table;
	font-weight: bold;
	color: #999;
	line-height: 1.5em;
	font-size: 0.9em;
	font-style: normal;
	}

#helpmenu a{
	color: #666;
	text-decoration: none;
	padding-right: 5px;
	padding-left: 5px;
	}

#headerTop{
	font-size: .85em;
}

#MinWidthContainer {
	padding-left:0px; /* orig= 790px These 2 cause the header to fly out to the right when edited in Contribute / Dreamweaver*/
	height: 135px;
}
#MinWidthContainer #PageContainer {
	height: 1px;
}
#MinWidthContainer #PageContainer #PageContentContainer {
	margin-left:0px; /* orig= -790px */
	position: relative;
	height: 1px;
}
.hidden_link {
	display: none;
	visibility: hidden;
}

#searchbar {
	padding-right: 10px;
	padding-left: 10px;
	float: right;
	margin: 0px;
	padding-top: 0px; /* orig was 0px - drives the search bar and button down.  */
	padding-bottom: 0px; /* aml 11/3/2010: added */
	white-space:nowrap; /* aml 8/10/2010: added */
}
#searchbar form {
	margin: 0px;
	padding: 0px;
	white-space:nowrap; /* aml 8/10/2010: added */
}

.search{
	width: 25em;
	margin-right: -0.3em;
	border: 1px none #FFFFFF;
	background: #FFFFFF no-repeat left center;
	}
.search:hover{
	background: #FFFFCC url(none);
	}
.search:active{
	background: #FFFFCC url(none);
	}

.searchbutton{
	color: #000000;
	background: #999999;
	width: 5em;
	border: 1px solid #333333;
	font-size: 0.9em;
	}

	
.searchbutton:hover {
	background: #666;
	cursor: pointer;
	color: #FFFFFF;
}
#azlogo{
	height: 75px;
	float: left;
	width: 302px;
	text-align: left;
	margin-right: -20em;
	background: url(../images/azagency_logo.jpg) no-repeat;
	}

.seal{
	float: right;
	background: url(../images/azlogo.jpg) no-repeat left;
	height: 75px;
	width: 302px;
	text-align: right;
	margin-left: -20em;
	}

#bnr_wrapper { /* this is *** NOT *** the header image. Next one down is */
	background: #333333 url(../images/bnr_back.jpg) repeat-x left top; /* blue gradient background of the header */
	white-space: nowrap;
	min-width:800px;
	display: table;
	width: 100%;
	text-align: center;
	height: 98px; /* aml 8/10/2010: orig: 7em - attempting to stop the gray background housing the search bar, and the Serving Arizonas Water Future from expanfdin down into, and covereing the top part of the web page. the 40px could just as easily be 20px */ 
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
	font-family: Arial, Helvetica, sans-serif;
}

#bnr_center{ /* this *** IS *** the header image. */
	color: #FFFFFF;
	font-size: 1.7em;
	line-height: 1.1em;
	text-shadow: #000 2px 2px 2px;
	height: 75px;
	width: 950px;
	background: url(../images/bnr_mid_back.jpg) no-repeat;
	margin-right: auto;
	margin-left: auto;
}
#bnr_center .bnr_text {
	width: 350px;
	padding-top: 0.8em;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	white-space: normal;
	padding-left: 10px;
	font-size: 0.7em;
	font-weight: 900;
}
#bnr_wrapper #slogan {
	float: left;
	color: #FFFFFF; /* color of the text to the left of the search bar */
	font-size: 0.9em;
	margin-top: 3px;  /* drives down the text in the black bar */
	white-space:nowrap; /* aml 8/10/2010: added */
	/* aml 8/10/2010: removed padding-left: 20px; which indents the Slogan */
}

#bnr_wrapper #bnr2_wrapper {
	width: 900px;  /*aml 8/10/2010: orig: 980px; */ /* this may set the width of the "Securing Arizona's Water Future" box */
	margin-right: auto;
	margin-left: auto;
	white-space:nowrap; /* aml 8/10/2010: added */
	/* height:20px; aml 8/10/2010: added to try and keep search bar background from expanding down into the page */
}

/* ------------------------- Top Drop Menu Begins --------------------------- */
.topmenu_wrapper { /* there is no bnr02.jpg image */
	background: #333333 url(../images/bnr02.jpg) no-repeat left bottom; /* the background color of the menu tabs and tab strip */
	width: 100%; /* the width of the color in the menu tab bar going from left to right */
	text-align: center;
	height: 20px; /* adjusts the height of the menu tabbed bar */
	display: table;
	white-space: nowrap;
	}

.topmenu {
	color:#FFFFFF;	
	/* the change below appears to have fixed somewhat the right side "scroll problem" */
	width: 68em; /* aml 3/3/09 was 62 */ /* orig = 42em; has to do with centering the tab strip of the menu */
	margin-left:auto;
	margin-right: auto;
	position: relative;
	white-space: nowrap;
	}

#nav li:hover ul.sub
{
	left:0em;
	top:1.5em; /* 1.2em; - sets the TOP of the fly drop down menu box */
	background: #062233;
	width:68em; /* 53em; sets the WIDTH of the fly drop down menu box */
	height:5.4em; /* 5.3 */
	z-index:100;
	font-weight: normal;
	text-align: left;
	overflow: auto;
	position:absolute;
	border: 1px solid #A24500; /* orig burnt orange: #A24500; */
	/* for IE */
  	filter:alpha(opacity=90);
	/* CSS3 standard */
  	opacity:0.9;
	padding: 1px; /* orig=1px; padding all around the border of the drop down menu */ /* alan 1/22/09: was 2em. Now 1 again. This is a good change back. Then dropped the font size to .9 from 1em (just below) */
}


#nav {
	margin:0;
	list-style:none;
	z-index:500;
	padding: 0;
	width: 74em; /* 44em; - sets the width of the top menu tab bar */
	font-weight: bold; /* not sure what this sets */
}
#nav li.top {
	display:block;
	float:left;
	white-space: normal;
	
}
#nav li.top:hover {
	
}


/* "#nav li a.top_link" (<li class="top">) in /images/assets/css/aztemplate.css sets the text size for the text in the tabs */
#nav li a.top_link {
	line-height:1.5em;
	display:block;
	float:left;
	color:#FFF;
	text-decoration:none;
	cursor:pointer;
	margin-top: 0;
	margin-bottom: 0;
	padding-right: 10px;
	padding-left: 10px;
	background: url(/AzDWR/images/Assets/images/tab_corner.gif) no-repeat left top; /* the cut out on the left side of the menu tab */
	font-size: .9em; /* orig=1em; sets size of the font in the TOP TABMENU ITEMS */ /* aml - was able to set this to 9em on 1/22 after setting "#nav li:hover ul.sub" padding: 1px; from 2px. Font size is much better. */
	padding-bottom:3px; /* aml 3/4/2009 added "padding-bottom" so we could reduce the font size to .9em (above) from 1em */
}


#nav li a.top_link:hover {
  color:#FFFFFF;
  cursor:pointer;
  	
}

#nav li a.top_link span {float:left; display:block;}
#nav li a.top_link span.down {float:left; display:block;}
.down:hover {
	
}

#nav li:hover a.top_link {color:#FFFFFF; }
#nav li:hover a.top_link span {color:#FFFFFF; }
#nav li:hover a.top_link span.down{
	
}

#nav li:hover {
	z-index:400;
	background: #A24500; /* orig burnt orange: #A24500; */
	color:#FFFFFF;	

}

#nav li:hover ul.sub li
{
	position:relative;
	float:left;
	font-weight:normal;
	color:#FFF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666666;
	margin-right: 15px; /* orig=5 sets the distance between menu items in the drop down menu area. This works with "#nav li:hover ul.sub li a" / width:18em; */
	padding-top: 0px;
	white-space: normal;
}
#nav li:hover ul.sub li:hover
{
	background: #A24500; /* orig burnt orange: #A24500; */
	color:#FFFFFF;
	background: #A24500; /* orig burnt orange: #A24500; */
}
#nav li:hover ul.sub li a
{
	display:block;
	font-size:1em;
	width:18em; /* orig=14em; sets the width of the menu item display boxes in the drop down menu.  This works with "#nav li:hover ul.sub li" / margin-right: 15px;; */ 
	color:#FFF;
	text-decoration:none;
	font-weight: normal;
	padding-left: 1px;
}
.topmenu_wrapper .topmenu #nav .fly {
	font-size: 0.8em; /* 0.9em; sets the text size for the FLY MENU items */
	line-height: 2.0em; /* 1.8em; sets the height of the menu item display area */
}


#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; color:#FFFFFF; }
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{color:#FFFFFF; } 
.viewall{
	background: #A24500; /* orig burnt orange: #A24500; */
	text-align:center;
}

/* ---------------------------- Top Drop Menu ENDS---------------------------- */
/* -------------------------- Banner CSS ENDS  ----------------------------*/

/* --------------------------- left Menu Begins  ---------------------------- */

.nextlevel {
	background-color: #062233;
	 Arial, Helvetica, sans-serif;

}
.nextlevel a {
	color:#0F9;
}


#menu {
	width: 170px;
	/* position: fixed;
	top: 10em; */
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
color:#FFFFFF;
}

#menu a, #menu h2 {
	font: bold 80% Arial, Helvetica, sans-serif;
	display: block;
	margin: 0;
	padding: 10px 2px 2px 5px;
	color: #FFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666;
}

#menu a {
text-decoration: none;

}

#menu a:hover {
	color: #FFF;
	background: #A24500; /* orig burnt orange: #A24500; */
	
}

#menu li {
	position: relative; 
}
#menu li:hover {
	background: #A24500;
	color:#FFF;
}

#menu ul ul ul {
	
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	/* for IE */
  filter:alpha(opacity=95);
	/* CSS3 standard */
  opacity:0.95;
	border: 1px solid #CCC;
}
#menu ul ul ul a {
	color:#FFF
}


div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{
	display: none;	
}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


#menu ul li {float: left; width: 100%; }
#menu ul li a {height: 1%; color:} 


.arrow {
	background: url(../images/arrow.gif) no-repeat right center;
}
/* ---------------------------- left Menu Ends  ---------------------------- */

	/* BEGIN HIDDEN PRINT DIVS   */
	
.printwrapper {
	visibility:hidden;
	display:none
}

/* END HIDDEN PRINT DIVS   */

