/* ####################################### */
/* ############## NORMALISE ############## */
/* ####################################### */

label,
input[type="button"],
input[type="submit"],
input[type="reset"], 
input[type="image"],
button {
	cursor: pointer;
}

button,
input,
select,
textarea {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline; 
    *vertical-align: middle; /* IE7 and below */
}

button,
input {
    line-height: normal;
    *overflow: visible;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

input[type="checkbox"],
input[type="radio"] {
	vertical-align: text-bottom;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button {  
	width: auto;
	overflow: visible;
}

select {
	background-image: url(/r/i/css/arrow.png);
	background-color: white;
	background-position: right center;
	background-repeat: no-repeat;
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
	cursor: pointer;
}

.browser-ie select {
	background-image: none;
}

/* ####################################### */
/* ############## =HIGH DPI ############## */
/* ####################################### */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx)  {

	select {
		background-image: url(/r/i/css/arrow@2x.png) !important;
		background-size: 32px 11px !important;
	}

	/* Remove iOS inner shadows */
	input[type="text"],
	input[type="email"],
	input[type="search"],
	input[type="password"],
	textarea {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

}

/* ####################################### */
/* ############# CORE STYLES ############# */
/* ####################################### */

.fs-container {
	margin-bottom: 1.3em;
}

/* ####################################### */
/* ################ LEGEND ############### */
/* ####################################### */

.f-heading,
legend {
	width: 100%;
	font-weight: bold;
	color: #111;
	font-size: 1.2em;
	border-bottom: 1px solid #EEE;
	display: block;
	padding-bottom: 10px;
	margin-bottom: 1.5em;
}

/* ####################################### */
/* ################ BLOCKS ############### */
/* ####################################### */

.f-block:before,
.f-block:after {
	content: ""; 
	display: table; 	
}

.f-block:after { 
	clear: both; 	
}

.f-block {
	margin-bottom: 1.3em;
}

.f-block-inline {
	display: inline-block;
}

.f-set-group .f-block {
	margin-bottom: 0.5em;
}

/* ####################################### */
/* ################ LABELS ############### */
/* ####################################### */

form label,
.f-lh-label {
	display: block;
	margin-bottom: 0.5em;
}

.h-form label {
	width: 130px;
	display: inline-block;
	text-align: right;
	padding-right: 10px;
}

/* ####################################### */
/* ################ FIELDS ############### */
/* ####################################### */

.f-block-text input,
.f-block-select select,
.f-block-text textarea,
.f-block-rich .fck-deactivated
{
	background-color: white; 
	width: 100%;
	max-width: 300px;
	border-color: #DDD;
	border-style: solid;
	border-width: 1px;
	padding: 0.5em 10px;
	border-radius: 3px;
}

.f-block-text input:hover,
.f-block-text input:focus,
.f-block-select select:hover,
.f-block-select select:focus,
.f-block-bln input:hover,
.f-block-bln input:focus,
.f-block-text textarea:hover,
.f-block-text textarea:focus {
	outline-color: #00AEFF;
}

/* ####################################### */
/* ############### BOOLEAN ############### */
/* ####################################### */

.f-bln label {
	text-align: left;
	float: none;
	display: block;
	width: auto;
}

.f-bln-label-txt,
.f-radio-label-txt,
.f-yon-label-txt {
	display: inline-block;
	overflow: hidden;
	padding-left: 6px;
	vertical-align: middle;
}

.f-bln input,
.f-radio input {
	display: inline-block;
}

.h-form .f-block-bln {
	padding-left: 130px;
}

/* ####################################### */
/* ################ SELECT ############### */
/* ####################################### */

.f-block-select select {
	padding-right: 30px;
	padding-left: 7px;
}

.browser-ie .f-block-select select {
	padding-right: 6px;
}

.f-select-multiple select {
	vertical-align: top;
	background-image: none;
}

/* ####################################### */
/* ############## TEXTAREA ############### */
/* ####################################### */

.f-area textarea {
	font-family: Arial, sans-serif;
	font-size: 13px;
}

.f-block-text .char-limit {
	display: block;
	margin-top: 10px;
	font-style: italic;
}

.h-form .f-block-text .char-limit {
	padding-left: 130px;
}

.f-block-rich .fck-deactivated,
.f-area textarea {
	height: 150px;
}

/* ####################################### */
/* ################# GRID ################ */
/* ####################################### */

.unit > .f-block select,
.unit > .f-block textarea,
.unit > .f-block input {
	max-width: none;
}

/* ####################################### */
/* ############### SUBMIT ################ */
/* ####################################### */

.form-submit-center .f-submit-unit,
.f-submit-unit {
	text-align: center;
}

.form-submit-left .f-submit-unit {
	text-align: left;
}

.form-submit-right .f-submit-unit {
	text-align: right;
}

/* Place submit button as though a label
 was placed on the left hand side */
.form-submit-label .f-submit-unit {
	padding-left: 130px;
	text-align: left;
}

/* ####################################### */
/* ############### TAGCODE ############### */
/* ####################################### */

.f-tagcode input {
	max-width: 70px;
}

.f-tagcode img {
	display: inline-block;
	vertical-align: text-bottom;
	margin-left: 5px;
}

.tagcodesep {
	margin: 0px 5px;
}

/* ####################################### */
/* ################# DATES ############### */
/* ####################################### */

.f-dtd select,
.unit > .f-dtd select {
	max-width: 80px;
}

.f-dtd .f-datepicker-month,
.unit > .f-dtd .f-datepicker-month {
	max-width: 110px;
}

.f-item-datetime input {
	max-width: 80px;
}

a.date-picker-control:link, a.date-picker-control:visited {
	top: 7px;
}

/* ####################################### */
/* ################ YES OR NO ############ */
/* ####################################### */

.f-yon-block {
	display: block;
}

.f-yon-block label {
	display: inline-block;
	margin-right: 20px;
}

/* ####################################### */
/* ############### MISSING ############### */
/* ####################################### */

.f-missing input,
.f-missing select,
.f-missing textarea {
	border-color: #C87872;
}

.f-missing label {
	color: #B94A48;
} 


/* ####################################### */
/* ############## REQUIRED ############### */
/* ####################################### */

.f-required label:after {
	content: '*';
	color: #FF0000;
	text-align: right;
}