/* CSS Document */

/*
Taken from blog article http://www.aplus.co.yu/css/styling-form-fields/
Example site at http://www.aplus.co.yu/css/forms/?css=1
*/

#contact_details{background:#f8f8f8 url(/images/page/banner_contact_details.gif) 0 0 no-repeat; padding-top:60px;padding-bottom:20px;}
#holiday_details{background:#f8f8f8 url(/images/page/banner_booking_details.gif) 0 0 no-repeat; margin-top:20px; padding-top:60px;padding-bottom:20px;}

form 
{
	border:none; 
	margin: 0;
	
	padding-left: 0px;
				
	font-weight: normal;
	
	line-height: 150%;
				
	color: #565E61;		
	
	padding-top:0;
	padding-bottom:10px;
				
}

p.success{font-weight:bold; color:#F15A22}

input.textentry, select, textarea
{
	margin-left: .5em;
	background-color: white;
	border: 1px solid #d7d7d7;
	color:#6e6e6e;	
}

select
{
	width: 160px;
}

#fdate, #tdate{width:auto;}

textarea
{
	width: 200px;
}

input.textentry
{
	width: 200px;
}

fieldset 
{
	margin: 1em 0;
	padding: .3em 1em;	
	border:none;
}

fieldset br 
{
	display: none;	/* remove the br's - their sole purpose of existence is in the unstyled version */
}

fieldset div
{
	padding-bottom: 5px;
}

legend 
{
	font-weight: bold;
	color: #A5AAAE;
	padding: .2em .5em;
}

fieldset div 
{
	clear: both;
	margin: .1em 0;
	position: relative;
}

/*
Some of the fields have helper texts, but if displayed, they would spoil the neatness of the form. 
Use the :hover pseudo-class:
*/
fieldset div span 
{
	display: none;
}

fieldset div:hover span 
{
	color: #475461;
	background-color: #D1DBE5;
	margin-left: 20em;
	padding: .2em .5em .3em;	
	display: block;
	position: absolute;
	z-index: 100;
	float: right;
}

* html fieldset div span 	/* IE/Win does not support :hover on anything but a elements */
{
	display: none;
}

/* div for checkboxes and radio buttons have separate class. 
In this layout, those elements look best when aligned with the field column. 
So, for those labels we remove the floating and give them left margin identical to the width of the labels.
*/
label, fieldset div.cr p 
{
	margin: 0;
	display: block;
	width: 18em;
	text-align: right;
	float: left;
}

label.alt	/* used for validation reporting */
{
	margin: 0;
	padding: 0;
	display: inline;
	text-align: left;
	float: none;
	font-weight: bold;
	color: #FF6600;
	cursor: pointer;
}

fieldset div.cr label 
{
	text-align: left;
	margin-left: 15em;
	width: auto;
	float: none;
}

.mandat 
{
	color: #f15a22;
}

.mandat:before 
{
	content: "*";	/* not supported in IE/Win */
}

.buttons 
{
	text-align: center;	
}


/* For the DOB each field has its own label, but they are so obvious that we don�t to label each element. 
Therefore, labels for month and year fields has additional class called removed. */
.removed {

	display: none !important;

}

input:focus, select:focus, textarea:focus 
{
	background: #FF6600;
	color: #FFF;
}

div#ValidationError 
{
	padding: 0 0 15px 0;
	
	color: #565E61;
	
}

div#ValidationError ul {
	font-size: 80%;
	padding-left: 20px;
}

div#ValidationError p strong
{
	color: #FF6600;
	font-size: 100%;
	
}

p#OnScreenConfirmation
{
	
	padding: 10px;
	color: #000;
	
}