/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*                                                                            */
/* FIREMAN'S FUND MAIN CSS - UPDATED 11/05/2012                               */
/*                                                                            */
/* This CSS file contains classes that conform with version 5 of the Allianz  */
/* Application Design Guidelines.  This file is developed and maintained by   */
/* Matt Denko and Sven Hansen of the IT User Centered Design (UCD) team.      */
/* Please contact them at matt.denko@ffic.com or sven.hansen@ffic.com to      */
/* request fixes or additions to any of the HTML elements or classes defined  */
/* in this file.                                                              */
/*                                                                            */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


/* ========================================================================== */
/* Reset CSS                                                                  */
/* ========================================================================== */

/* This section resets CSS properties for standard HTML elements to mitigate differences in major vendor browser implementations. */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote, input {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }

/* end reset */

/* ========================================================================== */
/* Standard HTML elements                                                     */
/* ========================================================================== */

/* default browser font size is 16px.  To achieve a uniform/easy to scale base 
size, we want set our base font size to 10px.  16px * .0625  = 10 px base
font size.  We can then use ems or percentages to scale the base size.  */

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	/* Uncomment the following two lines to apply a background grid for use in troubleshooting your layouts */
	/* background-image: url('images/background_grid.png');
	background-repeat: no-repeat;*/
	
}


h1, h2, h3, h4, h5, h6, p, td, th, li, select, input, textarea, label {
	font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6, p {
	padding-bottom: 1em;
}


h1 {
	padding-top: 1em;
	font-size: 1.3em;
}

p {
	line-height: 1.25em;
}

p.textAreaLabel {
	padding-bottom: 0;
}

p.textArea {
	padding-top: 0;
}

ul , ol{
	margin-left: 4px;
	margin-bottom: 1em;
}

ul {
	list-style: disc;
}

ol {
	margin-left: 8px;
}

li {
	font-size: 1.1em;
	line-height: 1.25em;
}

li li {
	font-size: 1em;
}

h1, h2, h3, h4, h5, h6, th{
	font-weight: bold;
}

table {
	margin-left: -4px;
	margin-right: -4px;
}

th {
	background: #b5b7bd; 
	/* min-height: 14px; */
}

th, td {
	vertical-align: top;
	padding: 4px;
	border: 2px solid #eeeeee;
} 

td select {
	margin-top: -2px;
}

/* Offset top margin of th/td images for info icon placement (should be offset 3px from top rather than 4px per standard) */

th img, td img {
	margin-top: -1px;
}

/* Class rules for nested table elements */

td input, td select, td label, td textarea , th table th, th table td, td table th, td table td{
	font-size: 1em;
}

td label {
	padding-left: 4px;
	padding-right: 4px;
	display: inline-block;
	vertical-align: top;
}

td input[type="text"], td input[type="password"] {
	margin-top: -4px;
	margin-bottom: -4px;
	margin-left: -4px;
 	margin-right: -4px;
	height: 16px;
	overflow: hidden;
} 

td input[type="checkbox"], td input[type="radio"] {
	margin: 0;
	padding: 0;
	/* Only way can get cell height right is by adding a height to these elements */
	height: 11px;
}


td select {
	padding: 0;
	margin-bottom: -2px;
	margin-top: -2px;
}

hr {
	color: #898D93;
	height: 1px;
}

a {color: #A0A0A0;}

/* end standard HTML elements */

/* ========================================================================== */
/* FFIC PAGE ELEMENTS                                                         */
/* 																			  */
/* The remainder of this document details the FFIC-specific classes and page  */
/* elements.  Classes are presented roughly in the order they would appear    */
/* in an actual HTML page, beginning with the header and navigation elements. */
/* Thie file concludes with a number of popup dialog classes.                 */
/*																			  */
/* ========================================================================== */


/* ========================================================================== */
/* PAGE WRAPPER CLASSES 													  */
/* ========================================================================== */

/* WRAPPER - wraps entire contents of page */ 

#wrapper_3column, #wrapper_4column, #wrapper_5column, #wrapper_6column {
	position: absolute;
	top: 0;
	left: 0;
	border-left: 2px solid white;
	border-right: 2px solid white;
}

#wrapper_3column {
	width: 490px;
}

#wrapper_4column {
	width: 654px;
}

#wrapper_5column {	
	width: 818px;
}

#wrapper_6column {
	width: 984px;
}

/* end wrapper classes */

/* ========================================================================== */
/* HEADER/BANNER CLASSES 													  */
/* ========================================================================== */

#banner {
	background-image: url("images/banner_background.png");
	background-repeat: repeat-x;
	height: 98px;
}

#topText {
	float: right;
}

.logo {
	float: left;
}

.label {
	position: absolute;
	top: 73px;
	right: 25px;
	text-transform: uppercase;
	font-size: 1.3em;
	color: white;
}

.topLink  {
	float: right;
	margin: 0;
	margin-top: 5px;
	margin-right: 7px;
	padding: 0;
	display: block;
}

.topLink li {
	list-style: none;
	display: inline;
	color: #a0a0a0;
}

.topLink a {
	margin-right: 18px;
	color: #757b8a;
}

/* end header/banner classes */

/* ========================================================================== */
/* NAVIGATION CLASSES 														  */
/* ========================================================================== */


/* mainWithSideNav: Use this class when using a side navigation element (places a white background image on the left boundary of the containing element) */

/*TOP Navigation*/
/*For use with multiple level navigation.  This is the main navigation*/

/*Main/header navigation without multiple level*/
.top1Sub , .top2Sub{
	background: #757b8a;
	border-bottom: solid 2px #ffffff;
}

#topNav{
	padding-left: 164px;
	background: #757b8a;
	height: 22px;
	border-bottom: solid 2px #ffffff;
}

/* Note for Sven: standard for single-level nav is to left align, so added a class to remove the left padding.  */

#topNav.single {
	padding-left: 0;
}

#topNav ul, .top1Sub ul, .top2Sub ul{
	list-style: none;
	padding: 0;
	margin: 0;
	height: 22px;
}

#topNav li, .top1Sub li, .top2Sub li {
	float: left;
}

#topNav li a:link, #topNav li a:visited, 
.top1Sub li a:link, .top1Sub li a:visited,
.top2Sub li a:link, .top2Sub li a:visited {
	height: 18px;
	padding-top: 4px;
	/*padding-bottom: 4px;	*/
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #757b8a;
	color: #ffffff;
	text-decoration: none;
	font: bold 11px Verdana;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#topNav li a.current {
	background-color: #c6cbd6;
	color: black;
}

#topNav li a:hover, .top1Sub li a:hover, .top2Sub li a:hover{
	background-color: #c6c9d1;
	color: #000000;
}

.navBorder{
	border-top:solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	border-left: solid 2px #ffffff;
	border-bottom: solid 2px #757b8a;
	}

/*SIDE NAVIGATION*/

/*Main/header navigation*/

#sideNav{
	position:absolute;
	background: #757b8a;
	width: 162px;

}

#sideNav li a.current {
	background-color: #c6cbd6;
	color: black;
}

#sideNav ul{
	list-style: none;
	margin:0;
	padding:0;
	border-bottom: solid 2px #ffffff;
}

#sideNav li{
	height: 21px;
}


#sideNav li a:link, #sideNav li a:visited{	
	padding-bottom: 3px;
	padding-top:4px;
	display: block;
	padding-left: 8px;
	background-color: #757b8a;
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}
#sideNav li a:hover {
	background-color: #c6c9d1;
	color: #000000;
}

#sideNav ul ul{
	text-indent: 10px;
	border-bottom: none;
}
#sideNav ul ul a:link, #sideNav ul ul a:visited{
	background-color: #757b8a;
	color: #ffffff;
}
#sideNav ul ul a:hover {
	background-color: #c6c9d1;
	color: #000000;
}
.buttonMultiNav {
	border-right: solid 2px #ffffff;
	border-left: solid 2px #ffffff;
	border-bottom: solid 2px #757b8a;
}

/* ========================================================================== */
/* APPLICATION LOG CLASSES													  */
/* ========================================================================== */

#appLog, #appLogHorizontal{
	clear: both;
	background-color: white;
	/* margin-left: -2px; */
	margin-left: 2px;
	padding: 0;
	padding-left: 2px;
	margin-right: 0;
}

#appLog {
	float: right;
	width: 160px;
}

#appLogHorizontal #appSteps {
	padding-top: 2px;
	padding-bottom: 4px;
}

#appLogHorizontal ol#appLogSteps li.appStep {
	display: inline;
	/* padding-right: 20px; */
}

#appLogHorizontal {
	margin: 0;
	margin-bottom: 2px;
	border: 1px solid #b5b7bd;
}

#appLogHorizontal .appStep {
	padding: 0;
}

#appLogHorizontal .appLog {
	display: none;
}

#appLogHorizontal #appSteps{
	border: none;
}

.appLog{
	padding-top: 5px;
	padding-bottom: 4px;
	margin: 0;
	padding-left: 4px;
	padding-right: 4px;
	text-transform: uppercase;
	color: #113388;
	/* font: bold 11px Verdana; */
	border: 1px solid #b5b7bd;
}

#appSteps{
	margin-top: 2px;
	border: 1px solid #b5b7bd;
	margin-bottom: 2px;
}
ol#appLogSteps {
	list-style:none;
	margin-top: 2px;
	margin-left: 2px;
	margin-bottom:2px;
	padding: 0;
}
ol#appLogSteps li.appLog{
	margin: 0;
	padding-left: 10px;
	padding-right: 15px;
	color: #113388;
	/* font: bold 11px Verdana; */
	border: 1px solid #b5b7bd;
}

ol#appLogSteps li.appStep{
	padding-top: 4px;
	/* padding-bottom:2px; */
	color: #95abc9;
	height: 20px;
}

/* MD NOTE: Added to get horizontal app log padding working right */

#appLogHorizontal #appSteps {
	padding: 4px;
	margin:0;
	margin-left: -6px;
	
}

ol#appLogSteps a {
	color: #b5b7bd;
	/* font: 11px Verdana; */
	padding-right: 4px;
	padding-left: 4px;
	text-decoration: none;
}
ol#appLogSteps a.current{
	color: #113388;
	/* font: bold 11px Verdana; */
}
ol#appLogSteps a.current span{
	color: #ffffff;
	background: #113388;
	border-color: #113388;
}
span.appLogNum{
	margin-right: 5px;
	border-color:  #b5b7bd;
	font: bold 1.3em Verdana;
	margin-left: -2px;
	color: #ffffff;
	background: #b5b7bd;
	padding: 2px;
	padding-left: 5px;
	padding-right: 6px;
}
.appText{
margin:0;
}

/* ========================================================================== */
/* PRIMARY PAGE CONTENT CLASSES 											  */
/* ========================================================================== */


#main, #mainWithSideNav {
	clear: both;
	background: #eeeeee;
	padding-left: 8px;
	padding-right: 4px;
}

#mainWithSideNav, #mainWithSideNavLog {
	padding-left: 4px;
	margin-left: 164px;
}

#mainWithSideLog , #mainWithSideNavLog{
	background: #EEEEEE;
	padding-left: 8px;
	padding-right: 4px;
	margin-right: 162px;
}

#main a, #content a {
	color: black;
}

.wide {
	margin-right: 4px;
}

.errorSection {
	background: #fbbc01;
	background-image: url("images/error.gif");
	background-repeat: no-repeat;
	background-position: 2% 12%;
	margin-left: -4px;
	margin-right: -4px;
	min-height: 30px;
	padding-left: 38px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-bottom: solid 2px white;
}

.error {
	background: #fbbc01;
}

span.error {
	margin-right: 2px;
}

input.error, select.error {
	border: 1px solid #7b9ebd;
	padding: 1px;
}

td.error input[type="checkbox"], td.error input[type="radio"] {
	margin-right: 2px;
}

td.error {
	background: none;
}


/* ERROR PARAGRAPHS: Maintain an 81px offset (one column) from the right margin as per the Allianz design standards.  */

.errorSection p {
	margin-right: 81px;
}

/* WAITING CURSOR: Class for placing animated Waiting gif */

#waiting {
	background: none;
	background-image: url("images/waitingCursor.gif");
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 40px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}

#newSearch {
	float: right;
	margin-right: 25px;
	font-size: 1.1em;
	font-weight: normal;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.clearLeft {
	clear: left;
}

.clearRight {
	clear: right;
}

/* INFO: Class for Info Icon images.  Use only when placing info icons next to inline elements in paragraphs, next to headers,
etc.  When placing info icons in table headers, use the floatRight class. */

.info {
	position: absolute;
	margin-left: 4px;
	margin-top: 0;
}

.hide {
	display: none;
}
/* Apply margin offsets for the log */
.log {
	margin-left: -1px;
	margin-top: -2px;
}

.noteSection {
	background: #ffe8a6;
	background-image: url("images/error.gif");
	background-repeat: no-repeat;
	background-position: 2% 12%;
	padding-left: 38px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: -4px;
	margin-right: -4px;
	margin-bottom: 10px;
	border-bottom: solid 2px white;
}

.noteSection li {
	margin-left: -10px;
}

.confirmation {
	font-weight: bold;
	color: #216F2C;
}

/* NOTE PARAGRAPHS: Maintain an 81px offset (one column) from the right margin as per the Allianz design standards.  */

.note p {
	margin-right: 81px;
}

/* TABLE CLASSES */
/* ---------------------------------------------------------------------------*/

.formTable th, .formTable td {
	height: 13px;
	padding: 4px;
	table-layout: fixed;
}

#main table, #mainWithSideLog table {
	margin-left: -2px;
}

.formTable td input {
	padding-right: 4px;
}

.formTable td select {
	padding-left: 4px;
	margin-right: -4px;
}


.formTable th {
	font-weight: normal;
}

.formTable input, .formTable select {
	margin: -4px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

td.stacked {
	padding: 0;
	margin: 0;
}

td.stacked input {
	display: inline-block;
	vertical-align: middle;
	margin: 4px 0 4px 0;
	margin-right: 6px;
	height: 12px;
}

td.stacked input[type="radio"], td.stacked input[type="checkbox"] {
	margin: 4px;
}

table .stacked label {
	vertical-align: middle;
	display: block;
	margin: 0;
	padding: 0;
}


/* MD NOTE 08/17/12: Only way I've found to get select properly positioned in IE 7 is by wrapping it in a div with a margin offset.  Continue investigating if possible to achieve some other way; otherwise update the select examples in the pattern library. */

.currency, tr.currency td {
	text-align: right;
}

.selectContainer {
	margin-top: -2px;
}

.fullWidth {
	width: 100%;
}

.oneColumn {
	width: 154px;
}

.oneColumnLeft {
	width: 146px;
}

.oneColumnRight {
	width: 152px;
}

.oneAndHalfColumn {
	width: 236px;
}

.oneAndHalfColumnLeft {
	width: 228px;
}

.oneAndHalfColumnRight {
	width: 234px;
}

.twoColumn {
	width: 318px;
}

.twoColumnLeft {
	width: 310px;
}

.twoColumnRight {
	width: 316px;
}

.threeColumn {
	width: 482px;
}

.threeColumnLeft {
	width: 474px;
}

.threeColumnRight {
	width: 480px;
}

.fourColumn {
	width: 646px;
}

.fourColumnLeft {
	width: 638px;
}

.fourColumnRight {
	width: 644px;
}

/* Sven's table classes */

#pageNavLeft {
	margin-top: 2px;
	float: left;
}

#pageNavOne {
	margin-top: 2px;
	/* margin-left: 164px; */
}

#pageNavMid {
	margin-top:2px;
	/* margin-left: 164px; */
}

.pg-normal {
	color: black;
	font-weight: normal;
	text-decoration: none;    
	cursor: pointer;   
}
.pg-selected {
	color: black;
	font-weight: bold;        
	text-decoration: underline;
	cursor: pointer;
}

/* For Accordion tables - activeatables is the javascript library */

.tableAccord {
	padding-top: 5px;
	/* font: bold 11px Verdana;	 */
	height: 22px;
	list-style: none;
	background: #95abc9;
	padding-left:15px;
	cursor: pointer;
	margin-left: -2px;
	margin-right: -2px;
}

#main .tableAccord {
	margin-left: 0;
}

#appTabs{
	height: 44px;
	border-bottom:solid 2px #eeeeee;
}	
ol#appTabContent {
	list-style:none;
	margin:0;
	padding:0;
	height:22px;
}
ol#appTabContent li{
	float:left;
	color: #95abc9;
}

ol#appTabContent a {
	padding-top: 5px;
	padding-bottom: 4px;
	color: #000000;
	/* font: bold 11px Verdana; */
	padding-left: 15px;
	padding-right: 15px;
	display: block;
	text-decoration: none;
		border-right: 2px solid #eeeeee;
}

.appMidContent.inactive{
	display: none;
}


/*=========TAB COLORS=========================================================*/

ol#appTabContent a {  /*background for inactive tabs*/

	background: #b3c4dc;
}
ol#appTabContent li a.active { /*background for active tabs, should match #appTabs*/
	background: #95abc9;
}

#appTabs{ /*background for bar below tabs, should match above*/
	background: #95abc9;
}	
ol#appTabContent { /*background for the unoccupied area of the row the tabs are in*/
	background: #eeeeee;
}


/* ========================================================================== */
/* TABLE/TAB COLORS														  */
/* ========================================================================== */
/*Change color as you want, available colors are, in order from dark to light:
	Blues(tables/tabs): 113388, 426bbe, 819ccc, 95abc9, b3c4dc, e5ecf6
	Yellow (highlighting only): fbbc01
	Green (highlighting only): 216f2c
*/

/*==========TABLE COLORS =====================================================*/

table.lightSkyBlue th {
	background-color: #e5ecf6;
}

table.midSkyBlue th {
	background-color: #b3c4dc;
}

table.darkSkyBlue th {
	background-color: #95abc9;
}

table.lightBlue th {
	background-color: #819ccc;
}

table.midBlue th {
	background-color: #426bb3;
	color: white;
}

table.darkBlue th {
	background-color: #113388;
	color: white;
}

/* Apply the tr.white class to achieve alternating row colors (apply class to every other table row) */

table tr.white {
	background-color: white;
}

/* end table classes */

/* BUTTON CLASSES */
/* ---------------------------------------------------------------------------*/

.buttonRow {
	margin-left: -8px;
	margin-right: -4px;
	border: 2px solid white;
	border-right: none;
	border-left: none;
	background: #eeeeee;
	text-align: right;
	padding: 0;
}

#mainWithSideNav .buttonRow {
	margin-left: -4px;
}


/* BUTTON: Apply to Submit buttons to get rid of the weird sizing discrepencies when buttons have long labels.  */

.button, .buttonDisabled {
	width: auto;
	border: none;
	border-left: solid 2px white;
	overflow: visible;
	background: #757b8a;
	height: 25px;
	margin-left: -4px;
	padding-top: 3px;
	padding-right: 25px;
	padding-bottom: 5px;
	padding-left: 7px;
	font-weight: bold;
	font-size: 1.1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: white;
}

.buttonDisabled {
	background-color: #b5b7bd;
}

.button:hover{
	background-color: #b5b7bd;
	color: white;
}

/* end button classes */

/* ========================================================================== */
/* FOOTER CLASSES 															  */
/* ========================================================================== */

#footer, #footer_sideNav, #popup_footer {
	font-size: 1em;
	padding-top: 1em;
	margin-bottom: 3em;
	color: #A0A0A0;
	padding-left: 4px;
	padding-right: 4px;
	background: white;
	/* background-image: url('images/top.gif');
	background-repeat: no-repeat;
	background-position: right bottom; */
	border: 1px solid white;
}

#wrapper_3column #footer .links, #popup_wrapper #footer .links {
	width: 100%;
	margin-top: .5em;
	display: block;
}

#topLink {
	position: absolute;
	display: block;
	text-align: right;
	right: 0;
	bottom: 30px;
	padding: 0;
	border: 1px solid white;
}

#popup_footer {
	width: 520px;
}

#footer_sideNav {
	margin-left: 164px;
}

/* end footer classes */


/* ========================================================================== */
/* POPUP DIALOG CLASSES 													  */
/* ========================================================================== */

#popup_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 596px;
	background: white;
	border: 2px solid white;
	margin: 0;
}

#popup_header {
	margin: 0;
	margin: 0;
	margin-top: 40px;
	padding: 0;
}

#popup_header p {
	margin: 0;
	padding: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}

#popup_label {
	display: inline-block;
	height: 20px;
	padding: 0;
	padding-top: 5px;
	padding-left: 7px;
	padding-right: 25px;
	font-weight: bold;
	color: white;
	background: #757B8A;
}

#popup_content {
	margin: 0;
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 8px;
	padding-right: 4px;
	background: #EEEEEE;
}

#popup_content p {
	padding-top: 0;
	margin-top: 0;
	padding-bottom: .5em;
}

/* end popup dialog classes */

/* EXPERIMENTAL - PRINT MEDIA CLASSES */

@media print {
	body {
		margin-top: 37px;
	}
	
	#wrapper_3column, #wrapper_4column, #wrapper_5column, #wrapper_6column {
		margin-left: 70px;
		margin-right: 35px;
	}
	
	div.label {
		display: none;
	}
	
	#banner {
		margin-bottom: 32px;
	}
	
	#banner img {
		float: right;
	}
	
	#banner .topLink {
		display: none;
	}
	
	
	.buttonRow {
		display: none;
	}
	
	#footer {
		margin-bottom: 32px;
	}
	
	#footer  img{
		display: none;
	}
}