/*General Rules*/
@import url(typography.css); 

body {line-height: 1.3em;}

input.readonly, textarea.readonly, select.readonly {
  color: blue;
  background-color: #FFFFDF;
}

span.mceEditorContainer {
    border-bottom: 40px;
    display:block;
}

fieldset {
    border: none;
}

input.ft-save, input.ft-nav, input.ft-confirm, input.ft-warn, input.ft-save-nav, input.ft-reset, input.ft-disabled {
}
input.disabled {
    background-color: #cfcfc7;
}
input[type="button"] {
background-color:#336699;
border-color:#DDDDDD #BBBBBB #AAAAAA #AAD2CD;
border-style:solid;
border-width:2px;
color:#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
margin-bottom:2px;	
}
input[type="button"].ft-disabled {
background-color:#DDDDDD;
border-color:#CCCCCC;
border-style:solid;
border-width:2px;
color:#AAAAAA;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
margin-bottom:2px;	
}

div.error, div.error input, div.error textarea, div.error select{
    color: red;
    font-weight: bold;
}
div.survey-changed {
}

div.field input, div.field select, div.field textarea{
	margin: 0px;
	padding: 0px;
}

div.survey-name, div.page-name, div.section-name, span.field-name {
    display: inline;
}
div.survey-text, div.page-text, div.field-text{
    margin-top: 12px;
}
div.field-text {
    display: inline;
}

div.section-text {
    margin-bottom: 12px;
}

div.ben, div.pt {
    display: inline;
}

div.ft, div.pt {
    font-style: italic;
}

#review div.survey-text, #review div.page-text, #review div.section-text, #review div.field-text{

}


div.bold {
    display: inline;
    font-weight: bold;
}

h1 {
    text-align: center;
    width: 640px;
    text-align:left;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 5px;
    font-weight: bold;
    font-style: normal;
    font-size: 2em;
    margin: 0px;
    color: red;
}
h1 a:link, h1 a:hover, h1 a:active, h1 a:visited {
	text-decoration: none;
	color: red;
}
h3.page-header, div.survey-navigation, div.auxiliary-nav {
    color: #5A8092;
}
h4.section-header {
    color: #003063;
    font-weight: bold;
    font-style: normal;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #003063; 
  	background: #dfdfd7;
  	padding: 0 4px 2px 4px;
}
a:link, a:visited {
	color: #0033CC;
	font-weight: bold;
}
a:active, a:hover {
	color: #3399FF;
	font-weight: bold;	
}

/*Survey*/
#surveyForm {
	margin: 0;
	padding: 0;		
}

div.survey {
    float: right;
	width: 580px;
}
div.survey-close{
    clear: both;
	margin: auto;
	text-align: left;
	padding-top: 5px;
}

/*Navigation*/
div.ft-save-nav, div.ft-confirm, div.ft-nav {
	background: #EFEFE7;
	border: 1px solid #5A8092;
	margin: 2px 0;
	padding: 5px 10px;
	font-weight: bold;
}
div.ft-save, div.ft-nav, div.ft-confirm, div.ft-warn, div.ft-save-nav, div.ft-reset, div.ft-disabled {
    padding-bottom:9px;
}
div.ft-save, div.ft-nav, div.ft-confirm, div.ft-warn, div.ft-save-nav, div.ft-reset {
}
div.ft-hover{
	background: #DFDFD7;
	text-decoration: underline;
	color: black;
}
div.ft-current-page{
    font-weight: bold;  
    background: #5A8092;
    color: white;
    padding: 5px 10px;
}


a.ft-save, a.ft-nav, a.ft-confirm, a.ft-warn, a.ft-save-nav, a.ft-reset, a.ft-disabled {
    color: #FFDA2F;
    display: block;
}

div.survey-navigation  {
	padding: 3px 5px 3px 5px;
    float: left;
    clear: left;
	width: 180px;
	height: 100%;
}

div.auxiliary-nav {
    margin-top: 15px;
}

/*Page*/
h3.page-header {
    text-align: left;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 5px;
    font-weight: normal;
    font-style: normal;
    margin: 0px;
}

/*Section*/
div.section-container{
 	margin: 5px;
	padding: 5px;
}

/*Fields and  Subfields*/
label {font-weight: bold;}
div.incomplete {background-color: #FFFFA5}
div.field-container-invalid, div.field-subfield-invalid {border: red thin solid}
div.field-container-incomplete, div.field-subfield-incomplete {background-color: #FFFFA5}
div.field-container-skipped {color: gray}
div.field-subfield-skipped, div.field-subfield-empty{display: none;}
div.field-container-empty {}
div.field[type="singlecheck"] {text-indent: -1.8em; margin-left: 1.8em;}
label.singlecheck {font-weight: normal;}

div.field-container{
	margin: 5px 5px 12px 5px;
}
div.field-header {
    padding: 0px;
    margin: 5px 0px 0px 0px;
	line-height: 100%;
}

div.field{
	margin: 5px 5px 1px 0px;
	padding: 0px;
	line-height: 100%;
	/*font-size: 12px;*/
}
div.field-group {
	margin: 5px 5px 1px 0px;
}
div.field-subfield-header {
    display: inline;
    margin-left:  5px;
    margin-right: 5px;
}
div.field, div.field-subfield{
    xmargin-left: 16px;
}

div.field-subfield-complex {
    display: inline;
}
div.field-subfield-describe {
    display: block;
}
div.field-group-item {
    display: block;
    margin-left: 10px;
}
div.field-group-item label {
    font-weight: normal;
}

div.field-option{
    display: inline;
	padding-left: 5px;
}
div.field-explanation {
    display: block;
	font-style: italic;
	/*font-size: 9pt;*/
}
div.field-explanation label {
	line-height: 1.3;
	font-weight: normal;
}
div.ben {
	font-weight: bold;
}

#table_function div.field-header, #table_function input, #table_function td {
    /*font-size: 12px;*/
}

div.field-close { 
    clear: both;
}
#table_function div.field-error, div.field-error { 
    display:block;
	margin-top:2px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-align: left;
	padding-top: 0px;
	/*font-size: 9px;*/ 
	/*line-height: 9px;*/
}

span.error-text {
	color: red;
}
span.field-status {
    font-style: italic;
}

span.field-marker {
    margin-left: -10px;
}

#progressMeter {
	width: 150px;
	height: 22px;
	background: #fff url(../images/progress_bar.gif) no-repeat 0% 0%;
	border: 1px solid black;
	float: right;	
	position: absolute;
	top: 6px;
	right: 6px;
}
#progressScale {
	width: 150px;
	height: 18px;
	padding: 4px 0 0 0;
	text-align: center;
	font-weight: bold;
	background: transparent url(../images/progress_scale.gif) no-repeat 0% 0%;
}
#progressNotes {
	position: absolute;
	bottom: 28px;
	right: 10px;	
}

/*Header/Footer*/

#WAT_header {
	width: 800px;
	margin: auto;
	padding: 10px 0;
}
#WAT_header h1 {
	margin-top: 20px;
	float: left;
	width: 500px;
}
#WAT_header #loginBox {
	float: right;
}
#loginBox label {
	display: block;
	width: 9em;
	float: left;
	clear: left;
}
#loginBox form {
	margin: 0;
	padding: 0;
}
#logout {
	float: right;
	margin-top: 24px;	
}
#WAT_wrapper {
	clear: both;
	width: 800px;
	border-left: 16px solid #9CB3BE;
	border-top: 2px solid #336699;
	border-right: 2px solid #336699;
	border-bottom: 2px solid #336699;
	margin: auto;
	position: relative;
}
#WAT_container {
	border-left: 2px solid #336699;
    width: 780px;
	padding: 6px 6px 4px 6px;
}
#userInfoBox {
	background: #EFEFE7;
	border: 1px solid #5A8092;
	width: 170px;
	padding: 4px;
	margin-left: 5px;
	margin-bottom: 4px;
	float: left;		
}
#userInfoLegal {
	width: 430px;
	float: left;
	padding: 4px;
}
#subMenu {
	float: left;
	width: 250px;
	padding: 4px;	
}
#WAT_footer {
	border-top: 2px solid #336699;
	border-left: 2px solid #336699;
	padding: 2px 10px;
}
#WAT_copyright {
	margin: auto;
	padding: 10px;
	width: 800px;
	text-align: center;
}

.sectionhead {
	padding:5px 0px 0px 5px;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #000066;
	border-bottom:2px solid #336699;
}
div.primary-buttons {
	padding-left: 210px;
}
.button {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #336699;
	font-weight: bold;
	margin-bottom: 2px;
	border-color:#DDDDDD #BBBBBB #AAAAAA #AAD2CD;
	border-style:solid;
	border-width:2px;
	padding: 1px 2px;
}
.startButton {
	background-color: #EFEFE7;
	margin-bottom: 2px;
	border-color:#9CB3BE #003366 #336699 #9CB3BE;
	border-style:solid;
	border-width: 2px;
	padding: 2px 4px 4px 4px;
}
a.button:link, a.button:hover, a.button:active, a.button:visited{
	color: #ffffff;
	text-decoration: none;	
}
.acctOption {
	margin: 6px 4px;	
}
#surveyStatus {
	width: auto;	
}

table#table_function, table.functionBox {
	margin-bottom: 0;	
}
.functionBox {
	background: #DFDFD7;
	border: 1px solid #5A8092;	
}
.functionBox div.field-subfield-header {
    margin-left:  0px;
}
.functionRemoveButton {
	text-align: right;	
}
#functionAddButton {
	padding-left: 10px;
}
/* hide empty section header */
#page__registrationPage #section__registrationSection h4,
#page__demographicsPage #section__ageSection h4,
#page__demographicsPage #section__demographicsSection h4,
#page__skillShortagePage #section__functionSection h4,
#page__trainPage #section__fiftySection h4,
#page__trainPage #section__importanceSection h4,
#page__benefitsPage #section__ptSection h4,
#page__workplacePage #section__importanceSection h4,
#page__environmentPage #section__importanceSection h4,
#page__recruitPage #section__sec-rehire h4,
#page__recruitPage #section__importanceSection h4,
#page__recruitPage #section__closingMsg h4
{
	display: none;
}

/* special case: turn header back on for rehire section of recruitment page */
#page__recruitPage #section__sec-rehire h4.override
{
	display: block;	
}

/* add borders to group sections */
#page__knowledgePage #section__knowledgeSection,
#page__demographicsPage #section__ageSection, 
#page__flexPage #section__sec-fwa,
#page__trainPage #section__sec-train,
#page__benefitsPage #section__sec-health,
#page__benefitsPage #section__sec-finance,
#page__benefitsPage #section__sec-other,
#page__workplacePage #section__infoSection,
#page__workplacePage #section__sec-accom,
#page__environmentPage #section__sec-pos,
#page__recruitPage #section__sec-recruit,
#page__recruitPage #section__sec-rehire
{
	padding-left: 8px;
	border: 1px solid #cccccc;
}

div.groupBox
{
	padding: 8px;
	border: 1px solid #cccccc;
}

div.clearingBlock {
	width: 0px;
	height: 0px;
	clear: both;
}
