/*****************************************************************************************
 *			Fieldset styling
 ****************************************************************************************/
 
/************************
 *  fieldsets
 ************************/
fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}


/************************
 * legend 
 ************************/
fieldset h2.legend,
fieldset .legend,
fieldset legend {
	font-weight: bold;
	margin: 0;
	padding: 0;
	font-size: 1em;
}


/*****************************************************************************************
 * Default form items appearance
 ****************************************************************************************/
 
input.text, input.textbox {
	margin: 0;
	padding: 3px 2px;
	font-size: 1.1em;
	border: 1px solid #b6d7ec;
	background: #fff url(../../images/sprites.gif) 0 0 no-repeat;
	color:#036;
	/*border-color:#b6d7ec;*/
}

textarea {
	margin: 0;
	padding: 2px;
	border: 1px solid #b6d7ec;
	color:#036;
}

.form-item select {
	margin: 0;
	display: inline;
	padding: 1px !important;
	font-size: 1.0em;
	/*border: 1px solid #999;*/
	_margin-left: 20px; /* Not sure what this is for */
}

.form-item label {
	vertical-align: middle;
	font-weight: normal;
	font-size:0.9em;
}

.read-only-form-item .value {
	padding-top: 3px;
}


/************************
 *  buttons
 ************************/

.buttons-form-item {
	/*text-align: right;*/
	margin-top: 10px;
}

.buttons-form-item input, input.button{
	border:none;
	background: transparent url(../../images/sprites.gif) 0 -200px no-repeat;
	color:#FFFFFF;
	font-size:16px;
	border: none !important;
	width:71px;
	height:36px;
}

.buttons-form-item .btn{
	display:inline-block;
}

a.button2,
input.button2 {
	border:none;
	display: block;
	background: transparent url(../../images/sprites.gif) 0 -150px no-repeat;
	color:#FFFFFF;
	font-size:16px;
	border: none !important;
	width:126px !important;
	height:36px !important;
}
a.button2 span {
	display: block;
	padding-top: 10px;
	text-align: center;
}


/* 
	hovers integrated with a below
*/

input.btn-small{
	background-position:0 -250px;
	width: 61px;
}
input.btn-medium{
	background-position:0 -150px;
	width: 126px;
}
input.btn-large{
	background-position:0 -100px;
	width: 163px;
	height:48px;
}

/************
*  Pseudo "buttons" using <a> - four sizes small, (default), medium large. two types submit(default) and cancel
*
*   Usage:  class="btn btn-large" (large submit button), class="btn-cancel" (small cancel button)
*
*************/


a.btn,a.btn-cancel{
	background: transparent url(../../images/sprites.gif) 0 -300px no-repeat;
	display: block;
	margin: 0;
	color:#fff;
	text-align:center;
	background-position:0 -200px;
	font-size:16px;
	padding-top:10px;
	width: 71px;
	height: 26px;
	_height: 36px;
}
a.btn-cancel{
	background-position:-400px -200px;
}

a.btn:hover,input.btn:hover,input.button:hover,a.btn-cancel:hover{
	text-decoration:none;
	background-position:-200px -200px;
}
a.btn-cancel:hover{
	background-position:-600px -200px;
}

a.btn-small{
	font-size:12px;
	width:61px;
	padding-top:5px;
	height:18px;
	_height: 23px;
	background-position:0 -250px;
}
a.btn-small:hover,input.btn-small:hover{
	background-position:-200px -250px;
}

a.btn-medium{
	width:126px;
	background-position:0 -150px;
}
a.btn-medium:hover,input.btn-medium:hover{
	background-position:-200px -150px;
}

a.btn-large{
	font-size:18px;
	width:163px;
	padding-top:14px;
	height:34px;
	_height: 48px;
	background-position:0 -100px;
}
a.btn-large:hover,input.btn-large:hover{
	background-position:-200px -100px;
}

a.btn-cancel.btn-small{
	background-position:-400px -250px;
}

a.btn-cancel.btn-small:hover{
	background-position:-600px -250px;
}

a.btn-cancel.btn-medium{
	background-position:-400px -150px;
}

a.btn-cancel.btn-medium:hover{
	background-position:-600px -150px;
}

a.btn-cancel.btn-large{
	background-position:-400px -100px;
}
a.btn-cancel.btn-large:hover{
	background-position:-600px -100px;
}

/*******
*    Form nav - candidate apply profile edit nav button group
*******/

.form-nav {
	clear:both;
	height:50px;
	margin:10px 15px 30px 0;
}

.form-nav a{
	float:right;
	margin-left:10px;
}


/************************
 *  radios / checkboxes
 ************************/

/* style the input/label container */
#page .checkboxes-form-item .form-item,
#page .radios-form-item .form-item {
	margin: 0 0 3px 0;
	padding: 0;
}

/* get the label and input to sit nicely beside each other */
#page .checkboxes-form-item label,
#page .checkboxes-form-item input,
#page .radios-form-item label,
#page .radios-form-item input {
	display: inline;
	vertical-align: middle;
}

/* push the label away from the input slightly */
#page .checkboxes-form-item input,
#page .radios-form-item input {
	margin-right: 5px;
	width: 13px; /* for ie */
	height: 13px; /* For ie */
}

/* styling for the label */
#page .radios-form-item label,
#page .checkboxes-form-item label {
	font-weight: normal;
	float: none;
	margin: 0;
}


/************************
 * enhanced textareas
 ************************/
.enhanced-textarea .textarea-footer {
	background-color: #ececec;
	border: 1px solid #999;
	border-top: none;
}
 
.enhanced-textarea .grippie {
	min-height: 5px;
	_height: 5px;
	background: url(../../images/backgrounds/bg_grippie.gif) #ececec 50% 50% no-repeat;
}

.enhanced-textarea .grippie:hover {
	cursor: n-resize
}

.enhanced-textarea .textarea-length-counter {
	text-align: right;
	padding: 2px;
}


/************************
 *  container / inline form items
 ************************/

fieldset.container-form-item {

}

#page fieldset.container-form-item .form-item {
	float: left; 
	_float: none; /* ie 6 had crazy jumping label issues when these boxes were floated. make it display inline and no float instead to line up the items */
	_display: inline;
	margin: 0 10px 0 0;
	clear: none;
	padding: 0 0 1.4em 0;
	position: relative;
	overflow: visible; /* IE7 chops off content if this is hidden */
}

#page fieldset.container-form-item .form-item label {
	margin: 0;
	position: absolute;
	text-align: left;
	width: auto;
	bottom: 0; 
	left: 0;
	font-size: 0.92em;
}

#page fieldset.container-form-item .read-only-form-item label {
	display: none;
}


#page fieldset.container-form-item legend {
	font-weight: normal;
}

#page fieldset.container-form-item .form-item input.text,
#page fieldset.container-form-item .form-item  select {
	float: left;
	clear: left;
	max-width: 1000px;
}


/************************
 *  error form items
 ************************/
.error-form-item {

}

.error-form-item .error-message {
	display: block;
	margin: 5px 0;
}

.error-form-item input.text,
.error-form-item textarea,
.error-form-item select {
	border-color: #f00;
}


/************************
 *  file uploader form item
 ************************/

.file-form-item dl.file-details {
	margin: 0;	
}

.file-form-item dl.file-details dt {
	float: left;
	width: 50px;
}

.file-form-item dl.file-details dd {
	padding: 0 0 0 60px;
}


/************************
 *  image uploader form item
 ************************/

.image-file-form-item dl.file-details {
	padding-left: 100px;
}

.image-file-form-item dl.file-details dt.thumbnail {
	position: absolute;
	left: -1000em;
	top: -1000em;
}

.image-file-form-item dl.file-details dd.thumbnail {
	padding: 0;
	float: left; display: inline;
	margin: 0 10px 0 -100px;
}


/************************
 *  date picker form item
 ************************/
.date-form-item .description {
	clear: both;
}
/* For the input and anchor */
a.dp-choose-date {
	width: 16px;
	height: 16px;
	border: none;
	color: #fff;
	padding: 0;
	margin: 0 0 0 3px;
	float: left;
	overflow: hidden;
	cursor: pointer;
	background: url(../../images/buttons/but_calendar.png) #ececec left top no-repeat;
	text-indent: -1000px;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
input.dp-applied {
	float: left;
}

/* For the calendar table */
table.jCalendar {
	border: 1px solid #000;
	background: #aaa;
	width: auto;
	margin: 0;
	border-collapse: separate; /* override default table styles */
}

table.jCalendar th {
	background-color: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
	border: none;
	text-align: center;
}

table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 5px;
	text-align: center;
	vertical-align: middle;
}

table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}

table.jCalendar td.today {
	background: #666;
	color: #fff;
	font-weight: bold;
}

table.jCalendar td.selected {
	background: #f66;
	color: #fff;
	font-weight: bold;
}
table.jCalendar td.selected:hover {
	background: #f33;
	color: #fff;
}
table.jCalendar td:hover, table.jCalendar td.dp-hover {
	background: #fff;
	color: #000;
}
table.jCalendar td.disabled, table.jCalendar td.disabled:hover {
	background: #bbb;
	color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div#dp-popup {
	position: absolute;
	font-size: 10px;
	background: #ccc;
	padding: 2px;
	min-height: 172px;
	min-width: 171px;
	z-index: 2000;
}
div#dp-popup h2 {
	font-size: 12px;
	text-align: center;
	margin: 2px 0;
	padding: 0;
}

a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}

div#dp-popup a {
	color: #000;
	text-decoration: none;
	padding: 3px 2px 0;
}
div#dp-popup div#dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
}
div#dp-popup div#dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div#dp-popup div#dp-nav-prev a, div#dp-popup div#dp-nav-next a {
	cursor: pointer;
}
div#dp-popup div#dp-nav-prev a.disabled, div#dp-popup div#dp-nav-next a.disabled {
	cursor: default;
}
div#dp-popup div#dp-nav-next {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 100px;
}
div#dp-popup div#dp-nav-next a {
	float: right;
}
div#dp-popup a.disabled {
	cursor: default;
	color: #aaa;
}
div#dp-popup td {
	cursor: pointer;
}
div#dp-popup td.disabled {
	cursor: default;
}



/*****************************************************************************************
 *			focus highlighting
 ****************************************************************************************/

/* style the label when the associated control has focus */
.form-item label.arbHasFocus {

}

.form-item input[type=text].arbHasFocus,
.form-item textarea.arbHasFocus,
.form-item select.arbHasFocus {
	border: 1px solid #000;
}



/*****************************************************************************************
 * Form item widths
 ****************************************************************************************/
 
/************************
 * standard width controls
 ************************/

.form-item input.text,
x.form-item textarea,
.form-item .short-help {
	width: 250px;
}

.form-item select {
	width: 257px;
}

.form-item textarea {
	width: 98%;
}

/************************
 * extra short controls
 ************************/

.form-item .extra-short input.text,
.form-item .extra-short textarea,
.form-item input.extra-short,
.form-item textarea.extra-short,
.form-item .extra-short .short-help {
	width: 50px;
}

.form-item .extra-short select,
.form-item select.extra-short {
	width: 57px;
}


/************************
 * short controls
 ************************/

.form-item .short input.text,
.form-item .short textarea,
.form-item input.short,
.form-item textarea.short,
.form-item .short .short-help {
	width: 117px;
}

.form-item .short select,
.form-item select.short {
	width: 123px;
}


/************************
 * wide controls
 ************************/

.textbox .wide input,
x.form-item .wide textarea,
.form-item input.wide,
x.form-item textarea.wide,
.form-item .wide .short-help {
	width: 350px;
}

.form-item .wide select,
.form-item select.wide {
	width: 357px;
}



/*****************************************************************************************
 * misc
 ****************************************************************************************/
 
/************************
 * clearfix (float clearing) for controls
 ************************/
/*ClearFix for good browsers*/
html > body .form-item:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* only mac ie \*//*/
* html .form-item { display: inline-block !important; }
*//* end hack */

@media all { /* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac */
	.form-item { 
		zoom: 1; 
		display: block;
	}
}



/*
	layout for small forms (home page boxes etc.)
*/


/*****************************************************************************************
 * Small forms (home page boxes)
 ****************************************************************************************/

/* space out the form items */
.small-form .form-item {
	margin: 5px 0 0 0;
}

/* minimalist links list */
.small-form .links-form-item {
	list-style: none;
	padding: 0;
	margin-top: 15px;
}

.small-form .links-form-item li {
	font-size:0.9em;
	margin: 3px 0 0 0;
	text-align:right;
}

/* position buttons bottom right */
.small-form .buttons-form-item {
	margin: 15px 0 0 0;
	float: left;
}

/* fix spacing on collapsible fieldsets (aimed at checkboxes) */
#page .small-form fieldset.collapsible .form-item {
	margin-left: 10px;
}

#page .small-form fieldset.collapsible .collapsible-heading {
	margin-bottom: 3px;
}

/* This is a fix for an IE6 hover bug, I think it has something to do with collapsing margins */
* html #home-quick-search-form ul.links-form-item li {
	padding: 5px 0;
}


/************************
 * widths
 ************************/

.small-form .form-item input.text,
.small-form .form-item textarea,
.small-form .form-item .short-help {
	width: 194px;
}

.small-form .form-item select {
	width: 200px;
	margin: 0; /* This is to fix the homepage form, which was being styled by a _margin */
}


/*
	layout for normal forms (contact forms etc.)
*/


/*****************************************************************************************
 * Two column forms (label beside inputs)
 ****************************************************************************************/

.two-column-form 
{
    margin:0 0 0 0px;
    padding:0;
}


/************************
 * fieldset / legends
 ************************/

/* first level fieldset */
.two-column-form fieldset {
    width:443px;
    max-width:445px;
    float:left;
    clear:left;
    margin: 0 10px 0 0px;
	padding: 10px 0 13px 0;
	
	
}
.two-column-form fieldset.right{
	float:right;
    clear:right;
}
.two-column-form.one-col fieldset.right{
	float: none;
    clear: right;
}

/* second level fieldset */
.two-column-form fieldset fieldset {
	margin:0 10px 0 0 !important;
	float:left;
	clear:none;
	border:none;
}

/* third level fieldset */
.two-column-form fieldset fieldset fieldset {
	padding:0;
	margin:5px;
	padding:10px;
	float:left;
	background:#EAEAEA;
}

/* first level legend */
.two-column-form .legend {
	display: block;
	margin: 0;
	padding: 12px 0px 1px 2px;
	color: #485297;
	float: none;
	border-bottom:solid 2px #485297;
	width:443px !important;
}

.two-column-form .legend a {
	color: #432973;
	text-decoration: none;
}

/* second level legend */
.two-column-form fieldset fieldset .legend {
	
}

/* third level legend */
.two-column-form fieldset fieldset fieldset .legend {
	
}


/************************
 * styling for form items (make each one a row)
 ************************/
 
/* generic form item */
.two-column-form .form-item {
	padding: 0 0 0 176px; /* padding-left is width of first column */
	margin: 4px 0 0 0px;
	clear: left;	
}

/* form item contained within a fieldset */
.two-column-form fieldset .form-item {
	background-image: none;
	background-color: transparent;	
	
}
.two-column-form fieldset.container-form-item
{
    margin-left:163px !important;   
    width:278px !important;
}
#candidate-registration-form fieldset.container-form-item
{
    margin-left:0px !important;
}
#candidate-registration-form 
{
    padding-left:250px;
}
.two-column-form fieldset.checkboxes-form-item
{    
    width:278px !important;
}
/* secondary fieldset form item */
.two-column-form fieldset fieldset .form-item {
	

}

/* tertiary fieldset form item */
.two-column-form fieldset fieldset fieldset .form-item {
	
}

/* child form items */
.two-column-form fieldset .form-item .form-item {
	
	margin-top: 6px !important;

}

/* error form items */
.two-column-form fieldset .error-form-item {
	background: url(../../images/backgrounds/bg_error_field_frame.gif) transparent 0 0 no-repeat;
	min-height: 25px;
	margin:0px 0 0 0;
	padding: 4px 0 4px 184px;	
	width:258px;
}
.two-column-form fieldset .error-form-item input, .two-column-form fieldset .error-form-item select
{
    background:#F6CECE;
}


/************************
 * styling for form item labels (make them the first column)
 ************************/
 
/* get rid of legends in the label position to style the inner span */
.two-column-form .form-item legend {
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	float: left; display: inline;
	overflow: visible;
	
	
	
}
/* IE 7 fix */
*:first-child+html .two-column-form fieldset.form-item legend {
	margin-left:-7px;
}

/* make the control label appear in the leftmost column */
.two-column-form .form-item label,
.two-column-form fieldset.form-item legend span {
	width: 171px;		/* width of first (label) column */
	margin: 3px 0 0 -174px;
	float: left; 
	
	font-weight: normal;
	line-height: 1.2em;
	text-align: left;
	color:#666;
	/* position: relative;  this makes the labels jump in IE with collapsible fieldsets */
}

.two-column-form fieldset.form-item legend span 
{
    
}
.two-column-form .form-item label
{
    clear:right;
}
/* reset lower level labels */
.two-column-form .form-item .form-item label {
	float: none;
	
}

/* the (required) image */
.two-column-form .form-item label img,
.two-column-form .form-item legend span img {
	float: right; display: inline;
	margin-right: -15px;
	padding-left: 0px;
	display:none;
}


/************************
 * space out buttons
 ************************/

.two-column-form .buttons-form-item {
	padding: 20px 18px 0 0;
	margin: 0;
	clear:right;
	float:right;

}
/* specific change to above made for forgottoen password page just in case this is used elsewhere */
.candidate-section .two-column-form .buttons-form-item {
	clear:both;
	float:none;
	padding-left:175px;
}

.two-column-form fieldset .buttons-form-item {
	padding-top: 4px;
	margin: 0;
}


/************************
 * 3 column checkbox lists
 ************************/

#page .two-column-form div.checkboxes-form-item  {
	padding: 6px 0 0 0 !important;
	margin:0 !important;
}

#page .two-column-form div.checkboxes-form-item .first-item 
{
	clear: left !important;
}

#page .two-column-form fieldset fieldset div.checkboxes-form-item  {
	padding-left: 41px;
}

#page .two-column-form div.checkboxes-form-item .form-item {
	float: left; display: inline;
	clear: none;
	
	margin: 0 -17px 3px 0;
	padding-left: 17px;
}
#page .two-column-form div.checkboxes-form-item .form-item input {
	float: left; display: inline;
	margin-left: -17px;
	padding-right:0px !important;
}

#page .two-column-form div.checkboxes-form-item .form-item label {
	padding-right: 30px;
	line-height: 1.1;
	_height: 0;
}


/* fieldset level descriptions*/
.two-column-form .description-form-item,
.two-column-form fieldset .description-form-item,
.two-column-form fieldset fieldset .description-form-item {
	padding-left: 0px;
	color: #333;
	margin-left: 1px !important;
}

/* form-item level descriptions*/
.two-column-form .form-item .description {
	color: #333;
	font-size: 0.91em;
	margin-botttom: 3px;
}

/* form-item level descriptions*/
.two-column-form .container-form-item .error-message {
	clear: both;
} 



/*****************************************************************************************
 * One column forms label above inputs
 ****************************************************************************************/

.one-column-form .legend,
.one-column-form label {
	margin: 20px 0 10px 0;
	display: block;
	font-weight: bold;
	color: #E6312A;
}

.one-column-form .form-item {
	margin: 10px 0;
}

.one-column-form fieldset .form-item label {
	margin: 0 0 5px 0;
	font-weight: normal;
	color: #000;
}


/*****************************************************************************************
 * Candidate register and apply flow (March 2010)
 ****************************************************************************************/

.profile-edit .required{
	color:#FF3300;
}

.profile-edit  table{
	margin-bottom:1em;
}
.profile-edit  table table{
	margin-bottom:0;
}

.profile-edit .form-item{
	margin-top:10px;
}

.profile-edit .form-item label{
	float:left;
	display:block;
	width:100px;
}

.profile-edit .checkboxes-form-item,.profile-edit .buttons-form-item,.profile-edit .links-form-item{
	padding-left:100px;
}