/*
 * layout.css establishes 1em = 10px
 */

/* General settings for whole form */
form {
    width: 100%;
    font-size: 1.0em;
    padding-right: 5px;
    padding-top: 15px;
}

form fieldset{
	border: 1px solid #397F9A;
	margin-top: 10px;
	margin-bottom: 20px;
}

form legend{
	color: #9B9B9B;
	font-size: 1.0em;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
}

/* General settings for all form's labels */
form label,
form div#location_area label,
form div#relocation_area label {
    display: block;
    float: left;
    width: 30%;
    color: #9B9B9B;
    text-align: left;
    padding-left: 5px;
    margin-top: 0.2em;
    margin-bottom: 0.4em;
}

/* General settings for all form input fields or div tags which
 * surround a group of fields that comprise a compound field */
form input,
form textarea,
form select {
    float: left;
    width: 55%;
    height: 1.6em;
    font-size: 0.8em;
    border: none;
    margin-left: 0.8em;
    margin-bottom: 0.8em;
}

*:first-child+html form select {
	height: 2.6em;
}

/* General settings for all textarea or multiple select fields */
form textarea,
form select#certification,
form div#relocation_area select#relocations,
form div#relocation_area select#relocation_prov_state,
form#candidate_search select#relocation_prov_state,
form#candidate_search select#location_prov_state {
    overflow: auto;
    height: 9.5em;
    border: none;
}

/* Specific settings for Submit button */
form input#submit_info {
    float: left;
    width: auto;
    height: 2.2em;
    font-size: 1.2em;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 2px solid gray;
    border-right: 2px solid gray;
    margin-bottom: 0.8em;
}

/* Specific to the location and relocation_area div */
form div#location_area,
form div#relocation_area {
    float: left;
    width: 55%;
    height: auto;
    font-size: 1.0em;
    border: none;
    margin-left: 0.8em;
    margin-bottom: 0.8em;
}

/* Override general form label formatting for the willing to relocate radio buttons */
/* This allows the labels to be positioned on the right on for radio buttons */
form div#relocation_area label.relocate_lbl {
    padding-left: 10px;
    margin-top: 5px;
}

/* Specific formatting for the radio buttons */
form div#relocation_area input#relocate_yn {
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.5em;
    margin-top: 0.5em;
}

/* Specific formating for the location combo boxes */
form div#location_area select {
    width: 63%;
}

/*
 * Specific formatting for layout of the relocation input fields
 * This creates a 3 column layout in which the left and right columns contain select fields
 * The Middle column contains the buttons to add and remove locations */

/* Layout the left and right columns */
form div#relocation_area div#candidate_relocations,
form div#relocation_area div#relocation_choices {
    float: left;
    width: 42%;
}

/* Layout the middle column */
form div#relocation_area div#relocation_actions {
    float: left;
    width: 10%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4.0em;
    margin: 0px;
}

/* Layout the input fields in the 3 columns */
form div#relocation_area div#candidate_relocations label,
form div#relocation_area div#candidate_relocations select,
form div#relocation_area div#relocation_choices label,
form div#relocation_area div#relocation_choices select,
form div#relocation_area div#relocation_actions input {
    display: block;
    float: none;
    width: 100%;
    border: 0px;
    margin-left: 0px;
}

/* Specific formatting for the buttons in middle column */
form div#relocation_area input {
    display: block;
    width: auto;
    height: auto;
    text-align: center;
}

/* Specific formatting for Submit button wrapper */
form div#submit_wrapper {
	float: left;
	height: auto;
	margin-bottom: 0.8em;
}

/* Specific formatting for Submit button */
form input#submit_info {
	clear: both;
	height: auto;
	font-size: 1.1em;
	border-top: 2px solid white;
	border-left: 2px solid white;
	border-bottom: 2px solid gray;
	border-right: 2px solid gray;
	margin-left: 0.8em;
}

/* Used to set space of progress-bar/error message */
form div.indicator {
    display: block;
    float: right;
    overflow: hidden;
    width: 10%;
    max-width: 10%;
    height: 1.6em; /* Same height as control */
    color: #9B9B9B;
    padding-right: 5px;
    margin-bottom: 5px;
}

/* Used to toggle progress bar */
form div.progress-bar {
	display: block;
	overflow: hidden;
}

/* Used to center progress bar image */
form div.progress-bar img {
    width: 95%;
    height: 95%;
}

/* Used to display all messages related to form validation */
form div#form_errors {
	display: none;
	width: 100%;
	height: auto;
	font-size: 1.2em;
}

/* Used to clear float */
form br {
    clear: both;
}

/* Used to display error messages */
form div.validation-advice {
	display: none;
	color: white;
}