) 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
4) "#bnr_wrapper" is the div that runs 100% of the width of the page and includes the slogan, and search bar (divs). The "height" property sets the height of this div
*/
/* set the width of all 3 columns here: #middle_column, along with #right_column, and #Left_column */
/*
Note the length of the text-input-area of the Google search bar is set in GoogleCSESearch.inc via this line
*/
/* ------------------------ Basic Body CSS Starts -------------------------*/
body{
behavior: url(ie_fix.htc);
behavior: url(/assets/css/ie_fix.htc);
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: 0.7em;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
background: url(../images/footer_back.jpg) repeat-x left top;
display: block;
clear: both;
line-height: 1.8em;
padding-top: 5px;
color: #333;
}
.content_wrapper{
/*
I want the content area to expand to 100% of the screen.
width: 980px; ------change to 100% to fill screen-------
*/
width: 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;
padding-left: 10px;
font-weight:400; /* aml added */
}
#main1 {
margin:0;
padding:0;
background:#FFFFFF url(../images/left.gif) repeat-y left top;
}
#main2 {
margin:0;
padding:0;
background:url(../images/right.gif) repeat-y right top;
}
#left_column { /* set the width of all 3 columns here: #middle_column, along with #right_column, and #Left_column */
float:left;
width: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:12em; /* see notes on "#middle_column" below */
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: 12em; /* was 12em - controls the BACKGROUND width of the "center column". If this is 0 there is no Right column */
margin-bottom: 0;
margin-left: 12em; /* 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: 1.0em; /* 0.5em pushes the entire middle content area (only) 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: .9em;
border-bottom-width: 0px; /* 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:500;
color: #999999; /* This is the static anchor color */
}
/* these are the breadcrumb links */
#middle_column .breadcrumb a:link { color: #635F5A; text-decoration: none; background-color: transparent; font-weight:200; font-size:0.9em; }
#middle_column .breadcrumb a:visited { color: #635F5A; text-decoration: none; background-color: transparent; font-weight:200; font-size:0.9em; }
#middle_column .breadcrumb a:hover { color:#cc0033; text-decoration: none; background-color: transparent; font-weight:200; font-size:0.9em; }
#middle_column .breadcrumb a:active { color: #635F5A; text-decoration: none; background-color: transparent; font-weight:200; font-size:0.9em; }
#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;
}
.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 very-top of page, white frame div that houses the "email" icons*/
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: 1px; /* 5px; */
padding-left: 1px; /* 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 {
width:350px;
padding-top: 4px; /* aml: 4px new. 2px old - drives the search bar and button down. */
padding-bottom: 0px; /* aml added */
padding-right: 1px; /* aml added to line right edge of search button with 'edge of page'*/
float: right;
margin: 0px;
}
#searchbar form {
margin: 0px;
padding: 0px;
}
.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;
/* aml no file exists: background: url(../images/azagency_logo.jpg) no-repeat; */
}
.seal{
float: right;
/* aml no file exists: background: url(../images/azlogo.jpg) no-repeat left; */
height: 75px;
width: 302px;
text-align: right;
margin-left: -20em;
}
/*
To increase/decrease the height of the black horizontal bar that houses the Google Search Bar
change the dimension of "#bnr_wrapper { height: 100px; " right here
*/
#bnr_wrapper { /* ---- Banking ---- this is *** NOT *** the header image. Next one down is. This is the gradient background of the header */
background: #333333 url(../images/bnr_back.jpg) repeat-x left top; /* black gradient background of the header */
white-space: nowrap;
min-width:800px;
display: table;
width: 100%;
text-align: center;
height: 7.5em; /* sets the height for this div - that runs 100% of the width of the page and includes the slogan, and search bar (divs) */
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; /* Pushes the Google Search Bar down into the body of the page */
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: 7px; /* aml: 7px new. 10px old - drives down the "Banking Water Now for Arizona's Future" text in the black bar */
padding-left: 5px; /* aml: 5px new. 20px old - padding-left: 20px; indents the Slogan */
}
#bnr_wrapper #bnr2_wrapper {
width: 980px;
margin-right: auto;
margin-left: auto;
}
/* ------------------------- Top Drop Menu Begins --------------------------- */
.topmenu_wrapper { /* there is no bnr02.jpg image */
background: #333333; /* aml no file exists: url(../images/bnr02.jpg) no-repeat left bottom; */
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;
width: 42em;
margin-left:auto;
margin-right: auto;
position: relative;
white-space: nowrap;
}
#nav li:hover ul.sub
{
left:0em;
top:1.5em; /* sets the TOP of the fly drop down menu box */
background: #062233;
width:53em; /* 53em; sets the WIDTH of the fly drop down menu box */
height:5.3em;
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; /* padding all around the border of the drop down menu */
}
#nav {
margin:0;
list-style:none;
z-index:500;
padding: 0;
width: 44em; /* 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" (
) 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;
font-size:1em;
cursor:pointer;
margin-top: 0;
margin-bottom: 0;
padding-right: 10px;
padding-left: 10px;
background: url(../images/tab_corner.gif) no-repeat left top;
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: 5px; /* 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:14em; /* 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.9em; /* 0.9em; sets the text size for the FLY MENU items */
line-height: 1.8em; /* 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: #6f7052; /* color of the menu popouts */
Arial, Helvetica, sans-serif;
}
#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: #333;
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;
color:#FFF
}
/* ---------------------------- left Menu Ends ---------------------------- */
/* BEGIN HIDDEN PRINT DIVS */
.printwrapper {
visibility:hidden;
display:none
}
/* END HIDDEN PRINT DIVS */