/*
=============================================================================
Started as CSS-file for three column layout 2006
http://www.savio.no/
Developed by Eivind Savio
Modifications and Additions by Mike Sargent
-----------------------------------------------------------------------------
=============================================================================
*/

/*
=============================================================================
Global settings
-----------------------------------------------------------------------------
Body
Headers and Paragraphs
Links
=============================================================================
*/

body, html { 
color: #000; 
font-family: Arial, Helvetica, sans-serif;
background-color: #9a9a9a; 
text-align: center; /*** Centers the design in old IE versions ***/


}

body {
font-size: 13px; /* font-size: 80%; */
}

h1 {font-size:23px; color:#000000; font-weight:bold; padding:0; margin:0.2em 0;}
h2 {font-size:16px; color:#003366; font-weight:bold; text-decoration:underline; padding:0; margin:0.2em 0;}
h3 {font-size:16px; color:#000000; padding:0; margin:0.2em 0;}

h1 a, #header h2{
color: #fff;
}

p {
  display: block;
  font-size: 13px;
 /* margin: 1em 0;*/
}

a {
color: #0000dd;
}

a:hover{
color: #0000FF;
text-decoration: none;
}

/*
=============================================================================
Layout
-----------------------------------------------------------------------------
=============================================================================
*/

#mainContainer {
width: 810px; /*800px 760px */
margin: 5px auto 0 auto; /*** Centers the design ***/
/* min-height: 300px; */
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 200px; /*300px;*//*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

/************************** 
HEADER
**************************/
#header {
background-image: url(../images/fmla-banner05.png);
width: 810px;
height: 103px; /*102*/
}

/**************************
NAVBAR
**************************/
#navbar {
padding: 74px 0 0 0; /* padding for no change in text size: 82px 0 0 24px; */
color: #ffffff; /* #1fcf37; */
font-size: 13px;
text-align: center;
}

#navbar p {padding-top:11px; color: #134565;}

.navlinks { margin: 1em 0;}

#navbar a { color: #00aa00} /* bdd7e1 a3c9d7*/

#navbar a:hover { color: #fff; text-decoration:none}

#navbar2
{
	/*padding: 4.5em 0 0 0;*/ /* 80px 0 0 24px; */
	padding: 0;
	text-align: center;
	position: relative;
	top: 0px;
	/* padding for no change in text size: 82px 0 0 24px; */
	color: #000000;
	font-size: 16px;
	font-family: arial;
	font-style: normal;
	font-weight: bold;
}

#navbar2 p { padding-top:8px; color: #134565;}


/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;  
padding-right: 120px;
}
* html .outer {

}
.inner {
width: 635px; /*595px*/ /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 630px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#content {
background: #fff url(../images/main-content-bg.png) repeat-y;
float: left;
padding: 0; margin: 0;
width: 810px; /*800px 794px 470px*/
position: relative; /*** IE needs this  ***/
/*border-left: 3px solid #4b6e7c;*/ /*395966*/
/*border-right: 3px solid #4b6e7c;*/ /*395966*/
}
* html #content {

}
.contentWrap {
padding: 15px;
}

.innerContentWrap {
margin: 15px auto;
}

.innerContent {
width: 650px;
}
/*
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}*/
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
width: 400px; /*150px*/
background: #fcc; 
min-height: 250px;
padding: 5px;
position: relative; /*** IE needs this  ***/
}
* html #left {
height: 250px;
}
/*#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}*/
/*************************
RIGHT COLUMN
**************************/
#right {
float: right; 
width: 170px; /*120px*/
background: #cfc;
padding: 5px;
min-height: 250px;
position: relative; /*** IE needs this  ***/
}
* html #right {
margin-right: -120px; /*** IE gets this margin. ***/
height: 250px;
}
/*
#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}*/
/**************************
FOOTER
**************************/
#footer {
width: 810px; /* 800 760px */
background-image: url(../images/fmla-footer05.png);
height: 67px;
margin: 0 auto;
padding: 0;
text-align: center;
/* background-color: yellow; */
}
#footer-content { padding: .1em 0 0 0; color: #e4e4e4;}
#footer-content1 { padding: .1em 0 0 0; color: #e4e4e4;}
.footer-contact { color: #e4e4e4; /*#a3c9dc;*/ font-size:13px}
#footer a { color: #a3c9d7} /* bdd7e1 */
#footer a:hover { color: #fff; text-decoration:none}

/* 
=====================================================================================================
HTML Font Tag Emulation
-----------------------------------------------------------------------------------------------------
HTML Example: <font size="5" color="#000000" face="arial"><b>Header Text</b></font>
Replace with CSS Example: <p class="size5 b">Header Text</p> 
or <span class="size5 b">Header Text</span>
=====================================================================================================
*/

.size1 {font-size:10px;}
.size2 {font-size:13px;}
.size3 {font-size:16px;}
.size4 {font-size:18px;}
.size5 {font-size:23px;}
.size6 {font-size:30px;}
.size7 {font-size:45px;}
	
.b {font-weight:bold;}
.u {text-decoration:underline;}
.i {font-style:italic;}

/*
=============================================================================
Tables
-----------------------------------------------------------------------------
=============================================================================
*/

table td {
padding: 0;
margin: 0;
font-size: 13px;
}

table.zero {margin:0; padding:0;}

table.customp p {margin:0; padding:0;}

table.stacked-rows { font-family: Arial, Helvetica, sans-serif;
font-size: 12px; background-color:#fff;
border-top: 2px solid #999;
/*border-left: 2px solid #999;
border-right: 2px solid #999;*/
}

table.stacked-rows th {
	margin: 0;
    padding: 5px;
    text-align: left;
	/*border-top: solid #445867 2px; */
	border-bottom: solid #999 2px;
	background-color: #003366; /* 203d72 */
	color: #fff;
}

table.stacked-rows td {
    padding: 5px;
	border-bottom: solid #999 2px;

}

table.stacked-rows form { padding: 0; margin: 0; }

table.stacked-rows2 { font-family: Arial, Helvetica, sans-serif;
font-size: 12px; background-color:#f4f4f4;
border-top: 2px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

table.stacked-rows2 th {
	margin: 0;
    padding: 5px;
    text-align: left;
	/*border-top: solid #445867 2px; */
	border-bottom: solid #999 2px;
	background-color: #003366; /* 203d72 */
	color: #fff;
}

table.stacked-rows2 tr { vertical-align: top;}

table.stacked-rows2 td {
    padding: 5px;
	/*border-bottom: solid #999 1px;*/
}

table.stacked-rows2 form { padding: 0; margin: 0; }

table.valign-top-updater { padding:0; margin:0 0 0 72px; }
table.valign-top-updater td { vertical-align: top; }
table.valign-top-updater input { padding:0; margin:0; }
/*
=============================================================================
CSS Message Boxes for different message types
-----------------------------------------------------------------------------
Modified From: 
http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx
=============================================================================
*/

.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 15px 0px;
padding:8px 5px 8px 44px;
background-repeat: no-repeat;
background-position: 10px center;
text-align: left;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
}
.error {
color: #cc0000; /*D8000C*/
background-color: #FFBABA;
background-image: url('../images/error.png');
}


/*
=============================================================================
Miscellaneous
-----------------------------------------------------------------------------
=============================================================================
*/

.clear { clear: both;}

.border1 { border: 2px solid #a2b0b6;}
/*
input { border: 1px solid #a2b0b6; padding: 5px}
input.drk-teal { color: #fff; background-color:#395966}
*/

/* Apply CSS class "button" to your input buttons */
.button-fix {
  width:auto; /* fix stretching in IE for 16-20 char buttons */
  overflow:visible; /* fix stretching in IE for 16-20 char buttons */
  padding-left:4px; /* force sensible padding in IE */
  padding-right:4px; /* force sensible padding in IE */
  color: #025993; /*#1c5797;*//*#1e61a9;*//*043f82*//*#000099;*//*#134465;*/ /*276892;*/ /*0000ff*/
  font-size: 12px;
  font-family: arial;
  font-style: normal;
  font-weight: bold;
}

.button-fix2 {
  width:auto; /* fix stretching in IE for 16-20 char buttons */
  overflow:visible; /* fix stretching in IE for 16-20 char buttons */
  padding-left:4px; /* force sensible padding in IE */
  padding-right:4px; /* force sensible padding in IE */
  color: #025993; /*043f82*//*0000ff*/
  font-size: 12px;
  font-family: arial;
  font-style: normal;
  /* font-weight: bold; */
}

.button-fix3 {
	color: #025993; /*#0000ff;*/
	padding: 0 2px;
	margin: 0 2px;
}
.setup-box {
  width: 475px; margin: 0 auto; text-align: left
}

/* context nav for master template */
.context-nav2 { margin: 10px 0 0 0 }
.context-nav2 form { display: inline; padding:0; margin:0;}
.context-nav2 input { color: #025993;/*#043f82;*//*#0000ff;*/ padding: 0 2px; margin: 0 2px; }

/* some list styles to compensate for spacing differences created by html 4 doctype */
.li-space li { padding: 4px 0; }

.li-space li form { padding: 0; margin: 0; }

form.fspacingfix { padding:0; margin:0; }

.li-space2 li { padding: 2px 0; }
.li-nospace li { padding:0; margin:0; }

/* p styles used to simulate indents of ol elements. Use the ol-child underneath ol-p (for parent) for text that would not wrap for long p-elements with HTMLDOCs - These styles only seem to work with inline CSS */
.ol-p { padding:0; margin: 0 0 0 20px; }
.ol-child { padding:0; margin: 0 0 0 34px; }

.greybg { background-color: #ababab; }

.red { color: #C00 }

/* tightens margins between p elements - started use with ESHC_View */
ol.tighten-p li p{ padding: 0; margin:8px 0;}
div.tighten-p p{ padding: 0; margin:8px 0;}

/* Used to style letterhead - started use with ESHC_View */
div.letterhead div.ltrhd1 { width:240px; float:left; margin: 0 10px 0 0; padding:0; }
div.letterhead div.ltrhd2 { width:auto; float:left; margin: 0 10px 0 0; padding:0; }
div.letterhead div.ltrhd3 { width:auto; float:left; margin: 0; padding: 0;}
div.letterhead p { padding: 0; margin: 0;}
div.letterhead div.clear { clear:both; }

/* For extra bottom margin on tables where below elements are crammed against the table - usually needed when a clear is used on the element directly below the table */
table.margin-btm { margin: 0 0 15px 0; }

/* Main Use: Hide/Reveal JavaScript */
.hide { /*display: none;*/ }

/*.warning { color: #CC0000; }*/

.logo-image { width: 137px; /*140px*/}

.errorMessageBox {
	margin: 15px 0;
	padding: 5px 5px 5px 34px;
	color: #fff;
	border: 2px solid #660000;
	color: #000;	
    background: #F3E6E6 url('../images/error.png') 5px 2px no-repeat; /* #FFBABA */
    border-color: #cc0000;
}

/* Started using on admin/admin_panel.tpl */
.admin-module {
	width: 400px;
	margin: 0 auto 10px auto;
	padding: 10px;
	background-color: #e2e2e2;
	border: 1px solid #8c8c8c;
}

/* Started using on admin/setup/add-admin to match password input to other inputs in ie */
.input-standard {
	width: 180px;
}

/* JQuery disable - greys out text*/
.disabled { color: #8e8e8e;  /* ababab */ }

.nomp { margin:0; padding:0;}
.zebra1 { background-color: #f4f4f4;/*dedede;*/}

.blue-bar { color: #fff; background: #003366; padding:3px 10px;}
.grey-box { background: #e7e7e7; padding: 10px 20px;}
.grey-bg { background: #e3e3e3; }
.pad10 { padding: 10px; }