/**
 * Join template for the #core container
 * Use as class name: <tag id="core" class="join">
 * @media          {screen}
 * @require        global.css
 * @toc            opening, content, clearing
 * 
 * Hierarchy :
 * [...]
 *    #opening
 *    #content
 * [...]
 */


/**
 * Page title, intro texts and images...
 * @section        opening
 * @tree           #opening < #main < #core < #wrapper < body < html
 */
.join #opening {
	margin-bottom:1.3em;padding:8px 20px;
	background:transparent url(../img/bg/opening-extended.png) repeat-y;
	color:#fff;
}

/**
 * Actual content of the page
 * @section        content
 * @tree           #content < #main < #core < #wrapper < body < html
 */
.join #content {
	margin:0; padding-left:15px;
	width:661px;
}

/* steps indicator */
.join #content ol {
	margin-top:0;
	font-weight:bold;
	list-style:decimal inside;
}

.join #content ol li {
	float:left;
	padding:.3em 10px; margin-right:10px; border:1px solid #CCC; border-width:1px 0;
}
.join #content .in2steps li {width:298px;}
.join #content .in3steps li {width:189px;}
#message h3{color:#C60000;}

.join #content ol li.on {
	border-color:#FFF;
	background:url(../img/bg/main_form_step.jpg) no-repeat 0 50%; color:#FFF;
}

/* required fields/infos */
.join #content p.required {
	margin-bottom:0;
	font-size:10px;
}

.join #content .infos {
	float:left;
	padding-left:1em;
	color:#94036A;
	font-size:10px;
	line-height:2;
}

/* fieldset (or div) and legend */
.followIn, .followInOut, .followOut {
	margin-right:14px;
	font-size:11px;
}
#selectLocation{
	margin-left : 10px;
}
.followIn {padding:1.3em 0; border-bottom:1px solid #CCC;}
.followInOut, .followOut {margin:2em 0;}
#personFidelity, #lastStayWhere {border:0;}
#lastStayWhere {padding-bottom:0;}

.join #content legend {font-weight:bold;}
.followInOut legend, .followOut legend {padding-bottom:.5em;}

/* containers */
.followIn .column1 {float:left; width:308px;}
.followIn .column2 {float:right; width:308px;}

.followInOut .box, .followOut .box {padding:.4em 0;}

.followOut .text, .followOut .select {margin-bottom:2em;}

.join #content .submit {padding:1.3em 14px 0 0;}

.join #content .clearer {
	margin:0;
	width:100%; height:1em;
	background:none;
}

fieldset#lastStayDates .date {padding-left:145px;}

/* labels */
.followIn .text label, .followIn .select label, .followIn .box span, .followIn .date span {
	float:left;
	margin:.3em 5px 0 0;
	width:145px;
}
.followIn .box label, .followInOut .box label {float:left; margin:.3em 1.3em 0 0;}
.followIn .box span span.required {float:none;}
.followIn .date span span.required {float:none;}
.followInOut .text, .followInOut .select {
	float:left;
	margin-right:10px;
}
.followOut .text label, .followOut .select label {
	float:none;
	display:block;
	padding-bottom:.2em;
	font-weight:bold;
}
.followInOut .box label, .followOut .box label {
	margin-top:.2em;
	float:left;
}
.followInOut .box label, .followOut .box label a{
	text-decoration:none;
}
#accountSubscribeTo label {font-weight:bold;}
#lastStayWhere label {
	width:190px;
	font-weight:bold;
}

#lastStayDates .date span {
	float:left;
	margin:.25em 10px 0 0;
	width:40px;
	text-align:right;
}

#lastStayDates .day, #lastStayDates .month, #lastStayDates .year, #lastStayDatesTo .day, #lastStayDatesTo .month, #lastStayDatesTo .year {
    float:left;
} 

.join #content .erreur{
	display:none;
	color:#C60000;
	font-weight:bold;
	font-family:Arial,Verdana,Helvetica,sans-serif;
	font-style:italic;
	font-size:12px;
}
.join #content .messErreur{
	display:none;
	color:#C60000;
	font-weight:bold;
	font-family:Arial,Verdana,Helvetica,sans-serif;
	font-size:12px;
	margin-bottom:10px;
}

/* fields */
.join #content .text input, .join #content .text textarea, .join #content .date input {
	float:left;
	padding:2px; border:1px solid #CC37A2;
	width:152px;
}
.join #content .text textarea {width:641px; height:7em;}
.join #content .date input {
	float:left;
	margin-right:5px;
	width:35px;
}
.join #content .date .year input {
	margin:0;
	width:60px;
}
.join #content .followOut .text input {width:184px;}
.join #content .box input {float:left; margin:.3em .3em 0 0;}
.join #content .followOut .box input {margin-top:0;}

.join #content #fLastStayWhere {width:200px;}

.join #content .select select {
	float:left;
	width:158px;
}
.join #content .followInOut .select select, .join #content .followOut .select select {width:190px;}

.join #content .prevStep {float:left;}
.join #content .nextStep {float:right;}


/**
 * Auto-clearing method (do not work in IE)
 * @section        clearing
 */
.join #content ol:after, .followIn:after, .followInOut:after, .followOut .text:after, .followOut .select:after, .join #content .box:after, .join #content .submit:after {
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
	content:".";
}