div.loading
{
    position: fixed;  
    height:100%;
    width:100%;
    left: 0;
    top:0;
    line-height:350px;
    vertical-align:middle;
    text-align:center;
    z-index:9999;  
    font-size:x-large;
    color:White;
    background-image:url(../images/loadingBack.png);
}

.section
{
	position: relative;
	/*width: 95%;	must have a width for ie to position corners correctly*/
	overflow: auto;
	margin-top: 0.5em;		/*if ie wasn't stupid the sibling selector would suffice - in this case we will have to remember to remove padding from the topmost section*/
	margin-bottom: 0.25em;
	margin-left: 0;
	margin-right: 0;
	padding: 0.5em;
	padding-top: 1em;
	border: solid 1px #c1bb84;
	width: 668px;
	background: url("../images/form-bg.gif") #f6f5ef bottom right no-repeat;
}
.messageSection td
{
	/*border: none;*/
	/*border-color:#f0f6ef;*/
	border-color:#f0f6ef;
	background-color:#f0f6ef;	
}

.messageSection
{
    position: relative;
	width: 675px;
	overflow: auto;
	
	margin-top: 0.5em;		/*if ie wasn't stupid the sibling selector would suffice - in this case we will have to remember to remove padding from the topmost section*/
	margin-bottom: 0.25em;
	margin-left: 0;
	margin-right: 0;
	padding: 0.5em;
	padding-top: 0;
	
	border: solid 1px #4fc039;
	padding: 3px 3px 3px 3px;
	background-color: #f0f6ef;
}

.messageSectionError
{
    position: relative;
	width: 675px;
	overflow: auto;
	margin-top: 0.5em;		/*if ie wasn't stupid the sibling selector would suffice - in this case we will have to remember to remove padding from the topmost section*/
	margin-bottom: 0.25em;
	margin-left: 0;
	margin-right: 0;
	border: solid 1px #e3967a;
	padding: 3px 3px 3px 3px;
	background-color: #feefea;
}
.messageSectionError div table {margin: 0; padding: 0; border: none; background-color: #feefea;}
.messageSectionError div table tr, .messageSectionError div table td
{
	border: none;
	margin: 0;
	background-color:#feefea;	
}

.messageSection h2
{
	font-size: 1.1em;
	/*font-weight: bold;*/
	font-family: Arial, sans-serif;
	color: red;/*#0066CC;*/
	padding: 0;
	margin: 0;
	text-indent: 2px;	
}

.section + .section /*for sensible browsers place extra margin when after another section*/
{
	margin-top: 0.5em;
}


/* Content ********************************************************************** */
.information
{
    width: 100%;
	clear: both;
	
	margin: 0.25em 0 0.25em 0;
	-moz-box-sizing: border-box; /*we want the width to include the border, not just the content*/
}

.information .fieldLabel
{
	white-space: nowrap;
	float:left;
	display: inline; /*ie fix http://www.positioniseverything.net/explorer/floatIndent.html*/
	clear: left;
	text-align: left;
	
}

.information label
{
	white-space: nowrap;
	float:left;
	display: inline; /*ie fix http://www.positioniseverything.net/explorer/floatIndent.html*/
	text-align: left;
}

.data
{
	width: 95%;
	margin: 0.25em 0 0.25em 5%;
	color:#337AAA;
	font-weight:bold;
}
.selection .data {margin: 0; width: auto;}

.fieldLabel			/* the labels don't play nicely with the input controls - they don't center properly against the text input*/
{
	position: relative;
	text-align:left;
	white-space: nowrap;
	float:left;
	display: inline; /*ie fix http://www.positioniseverything.net/explorer/floatIndent.html*/
}

.fieldLabelMandatory
{
	font-size: 1em;
	font-weight:bold;
	color: Red;
}

.data[id] .fieldLabel		/*Mozilla doesn't display it properly but ie doesn't support attribute selectors so will ignore this. Fix for Moz*/
{
	position:static;
	top: auto;
	bottom: auto;
	margin:auto;
}
.data label			/* the labels don't play nicely with the input controls - they don't center properly against the text input*/
{
	position: relative;
	top: 5px;
	text-align:left;
	white-space: nowrap;
	float:left;
}
.selection .data label {width: 200px;}
.data[id] label		/*Mozilla doesn't display it properly but ie doesn't support attribute selectors so will ignore this. Fix for Moz
{
	position:static;
	top: auto;
	bottom: auto;
	margin:auto;
}*/


.details
{
	margin-left: 12em;
}

.details[id]				 /*do not apply the workaround to nice browsers*/
{	
	text-indent: 0;
	margin-left: 12em;
}

.field
{
	margin-left: 16em;
}
.selection label {width: auto; margin: 0; padding: 0;}
.selection .data .field
{
	margin: 0;
}

.data .field
{
	margin-left: 16em;
	width: auto;
}

.mandatory .fieldLabel
{
    /*color: red;*/
	color: #337AAA;
	font-weight:bold;
	width: 200px;
	margin: 0; padding: 0;
}

/* Tooltip ********************************************************************** */
.tooltipBubble
{
	position: absolute;
	z-index: 99;
	display: none;
	
	padding-top: 4px;
	padding-bottom: 12px;
	
	margin-left:7px;
	
	background-image: url(../../../Themes/Default/Images/bubbleUpRight.gif);
	background-position: 5px bottom;
	background-repeat: no-repeat;
}

.tooltipBubbleDown
{
	position: absolute;
	z-index: 99;
	display: none;
	
	padding-top: 12px;
	padding-bottom: 4px;
	
	margin-left:-7px;
	
	background-image: url(../../../Themes/Default/Images/bubbleDownRight.gif);
	background-position: 5px top;
	background-repeat: no-repeat;
}

span.tooltip
{
	padding: 0.25em;
	margin-bottom: 8px;
	
	border-top: solid 1px #3F464A;
	border-left: solid 1px #3F464A;
	border-right: solid 2px #3F464A;
	border-bottom: solid 2px #3F464A;
	background-color: #FFFFAA;
	color: black;
}



/* Miscellaneous ********************************************************************** */
.clear	/*need this when we use floating divs otherwise container will not size properly*/
{
	clear: both;
}

/* Input Types ********************************************************************** */
.changed	/*style that gets applied to inputs that have changed since page load*/
{
	color: #0E89CC;
}

.textbox
{
	border: solid 1px #7F9DB9;	
}

.focus	/*because IE does not support the :focus selector*/
{
	/*border: solid 1px black;*/
	background-color: #ffc;
}

.missing /*will be applied to mandatory fields that are currently blank*/
{
	background-color: #f4f4ff !important;
	/*background-color: #ffc !important;*/  /*nice yellow*/
}

.checkbox label  /*we changed label settings earlier - fix them back up for checkboxes*/
{
	position: static;		/*undo the relative positioning*/
	margin: auto;			/*undo changing margin (to center)*/
	display: inline;		/*undo display block*/
	width: auto;        
	white-space: normal;
	float: none;
	text-align:left;
}

span.checkbox	/*lines checkbox up with edges of text fields*/
{
	position: relative;
	left: -4px;
}


.checkboxlist label
{
	display: inline;
	width: auto;
	white-space: normal;
	float: none;
	text-align:left;
	position: static;
	color: #000;
}

.checkboxlist td	/*font settings don't cascade from body into tables - fix checkboxlists*/
{
	font-size: 1em;
}

table.checkboxlist td	/*lines checkbox lists up with edges of text fields*/
{
	position: relative;
	left: 0;
}
table[class='checkboxlist']	/*for Mozilla move table not cells*/
{
	position: relative;
	left: 0;
}

.radiobutton label  /*we changed label settings earlier - fix them back up for radiobuttons*/
{
	position: static;		/*undo the relative positioning*/
	margin: auto;			/*undo changing margine (to center)*/
	display: inline;		/*undo display block*/
	width: auto;        
	white-space: normal;
	float: none;
	text-align:left;
}
.selection table, .selection tr, .selection td {background-color: transparent; border: none;}
.selection table tr td label {font-weight: bold; margin-left: 10px;}
span.radiobutton			/*lines radiobutton up with edges of text fields*/
{
	position: relative;
	left: -4px;
}
span[class='radiobutton']	/*Moz needs a pixel more*/
{
	position: relative;
	left: -5px;
}

.radiobuttonlist label  /*we changed label settings earlier - fix them back up for radiobuttonLists*/
{
	display: inline;
	width: auto;
	white-space: normal;
	float: none;
	text-align:left;
	position: static;
}

table.radiobuttonlist td	/*lines radiopbutton lists up with edges of text fields*/
{
	position: relative;
}

table[class='radiobuttonlist']	/*for Mozilla move table not cells*/
{
	position: relative;
}

.radiobuttonlist td	/*font settings don't cascade from body into tables - fix radiobuttonlists*/
{
	font-size: 1em;
}


/* Input Sizes ********************************************************************** */
.tiny
{
	width: 10%;
}
.section .tiny {width: 90px;}
.short
{
	width: 25%;
}

.medium
{
	width: 50%;
}

.long
{
	width: 75%;
}

.full
{
	width: 98%;
}


/*textarea*/
.shortHeight
{
	height: 3em;	/*approx 2 lines*/
}

.mediumHeight
{
	height: 6.5em;	/*approx 5 lines*/
}

.longHeight
{
	height: 12.5em;	/*approx 10 lines*/
}

.longerHeight
{
	height: 19em;
}

/* Error ********************************************************************** */
.invalid input
{
	border: red 1px solid;
	background: #ffcccc !important;
	padding: 0.125em;
	margin: 1px;
}

.invalidValue
{
	color: red !important;	/*make it important just in case anything else is trying to touch the colors*/
}


#Section1
{
    margin: 15px 51px 15px 15px;
}

#dhtmltooltip
{
    position: absolute;
    left: -300px;
    width: 100px;
    border: 1px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer
{
    position:absolute;
    left: -300px;
    z-index: 101;
    visibility: hidden;
}

/* TABS */


.menuItem, .menuItem table, menuItem tr, .menuItem td, .menuHover, .menuHover table, menuHover tr, .menuHover td {border: none; padding: 0; margin: 0; width: auto;}
.menuItem td table tr td, .menuHover td table tr td {padding: 0; margin: 0;}

.menuItem {color: #fff; background-color: #337aaa; border: none; border: solid 1px #337aaa; margin: 0; padding: 5px 0 0 0; height: 25px;}

.menuItem a, .menuItem a:link, .menuItem a:visited {color: #fff; font-weight: bold; text-decoration: none; font-family: arial, Sans-Serif; padding: 4px 10px;}
.menuItem a:hover, .menuItem a:visited:hover {color: #fff; font-weight: bold; text-decoration: none; font-family: arial, Sans-Serif; padding: 4px 10px;}

.menuHover {color:#000 !important; background-color: #fff !important; font-weight: bold; border: solid 1px #ccc; font-family: arial !important; height: 25px; margin: 0; padding: 5px 0 0 0;}

/*.menuHover a, .menuHover a:link, .menuHover a:visited {text-decoration: none; color: #fff; font-family: arial, Sans-Serif; padding: 4px 20px;}
.menuHover a:hover, .menuHover a:visited:hover {text-decoration: none; color: #fff; font-family: arial, Sans-Serif; padding: 4px 20px;}*/

.menuActive {border-left: solid 1px #ccc; border-top: solid 1px #ccc; border-right: solid 1px #ccc; height: 25px;}
.menuActive a, .menuActive a:link, .menuActive a:visited {color: #000; background-color: #fff; border: solid 1px #ccc;}

/*.menuStatic
{
    color:#fff !important;
    background-color:#337aaa;
    border: none;
    text-decoration: none;
    font-weight: bold;
    border-top: solid 1px #337aaa;
    border-left: solid 1px #337aaa;
    border-right: solid 1px #337aaa;
    
}
.menuStatic a:link {text-decoration: none;}

.menuStatic a:link {text-decoration: none; color: Red;}*/ /* Andrew original */

/* OVER RIDE STYLES ABOVE FOR JC */
.textbox
{
	border: solid 1px #333;	
}