/*----------------------

	1 WEBFONTS
	2 HTML5
	3 RESET
	4 CLEARFIX
	5 JQUERYSCROLL
	6 RESPONSIVE

------------------------*/

/*----------------------*/
/*		1 WEBFONTS		*/
/*----------------------*/

/* LOCATOR */
@font-face{
	font-family:"LocatorWeb-Light";
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebLight.eot');
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebLight.eot?#iefix') format('embedded-opentype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebLight.ttf') format('truetype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebLight.woff') format('woff'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebLight.svg#locator_weblight') format('svg');
	font-weight:normal;
	font-style:normal;
	}
@font-face{
	font-family:"LocatorWeb-Regular";
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebRegular.eot');
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebRegular.eot?#iefix') format('embedded-opentype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebRegular.ttf') format('truetype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebRegular.woff') format('woff'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebRegular.svg#locator_webregular') format('svg');
	font-weight:normal;
	font-style:normal;
	}
@font-face{
	font-family:"LocatorWeb-Medium";
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebMedium.eot');
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebMedium.eot?#iefix') format('embedded-opentype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebMedium.ttf') format('truetype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebMedium.woff') format('woff'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebMedium.svg#locator_webmedium') format('svg');
	font-weight:normal;
	font-style:normal;
	}
@font-face{
	font-family:"LocatorWeb-Bold";
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebBold.eot');
	src: url('../../../resources/freefromspots/webfonts/Locator/LocatorWebBold.eot?#iefix') format('embedded-opentype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebBold.ttf') format('truetype'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebBold.woff') format('woff'),
		 url('../../../resources/freefromspots/webfonts/Locator/LocatorWebBold.svg#locator_webbold') format('svg');
	font-weight:normal;
	font-style:normal;
	}

@font-face {
font-family:"journal";
src :	url("../../../resources/freefromspots/webfonts/journal/journal.eot?#iefix");
src :	url("../../../resources/freefromspots/webfonts/journal/journal.eot?#iefix") format("eot"),
		url("../../../resources/freefromspots/webfonts/journal/journal.woff") format("woff")
}

/*------------------*/
/*		2 HTML5		*/
/*------------------*/
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section { display : block; }



/*------------------*/
/*		3 RESET		*/
/*------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section  {
	box-sizing : border-box;
	margin : 0;
	padding : 0;
	border : 0;
	outline : 0;
	font-weight : normal;
	font-style : inherit;
	font-family : inherit;
	vertical-align : top;
}

/* remember to define focus styles! */
:focus { outline : 0; }

body {
	font-family: 'LocatorWeb-Regular'; font-size: 16px; color : #333333;
}

h1, h2, h3, h4, h5, h6 {
	font-size : 10px;
}

ol, ul { list-style : none; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse : separate;
	border-spacing : 0;
}

table tr { vertical-align : top; }

caption, th, td {
	text-align : left;
	font-weight : normal;
}

a {
	text-decoration : none;
	cursor : pointer;
	outline : none;
	transition : all 300ms ease-in-out;
	-webkit-transition : all 300ms ease-in-out;
	   -moz-transition : all 300ms ease-in-out;
		 -o-transition : all 300ms ease-in-out;
}

input {
	border-radius : 0;
	-webkit-appearance: none;
}

img {
	max-width : 100%;
	height : auto;
	width : auto;
}

sup{
	display:inline-block;
	margin-top:-0.5em;
	font-size:70%;
	}
sub{
	display:inline-block;
	margin-top:0.5em;
	font-size:70%;
	}

.offscreen {
	position : absolute;
	top : 0;
	left : -9999em;
}
/**************************/
/***** 7 - FORMULAIRES *****/
/**************************/
/*		CUSTOM CHECKBOX		*/
.custom-checkbox{
	position :relative;
	z-index :0;
}
.obj_checkbox label{
	position :relative;
	display :block;
	padding:0 0 0 30px;
	cursor :pointer;
	z-index :5;
	}
.obj_checkbox label:before{
	content:"";
	position:absolute;
	top:0; left:0;
	margin-top:-3px;
	width:20px; height:20px;
	background:#fff;
	border:1px solid #dedede;
	-webkit-transition :all 0.05s;
	   -moz-transition :all 0.05s;
		 -o-transition :all 0.05s;
			transition :all 0.05s;
	}
.obj_checkbox label.hover:before{
	border:1px solid #c8c8c8;
	}
.obj_checkbox.error label:before{
	border-color:#bd0000;
	}
.obj_checkbox label:after{
	content:"";
	position:absolute;
	top:3px; left:3px;
	margin-top:-3px;
	width:16px; height:16px;
	background:#fff;
	}
.obj_checkbox label.hover:after{
	background:#d9d9d9;
	}
.obj_checkbox label.checked:after{
	background:#008fcd;
	}
.obj_checkbox.error label.hover:after{
	background:#bd0000;
	opacity:0.2;
	}
.obj_checkbox.error label.checked:after{
	background:#bd0000;
	opacity:1;
	}
	
.obj_checkbox input{
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	}
/*----------------------*/
/*		4 CLEARFIX		*/
/*----------------------*/
.clearfix:after {
	content : ".";
	display : block;
	height : 0;
	clear : both;
	visibility : hidden;
}

.clearfix { display : inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height : 1%; }
.clearfix { display : block; }

/* End hide from IE-mac */
.clear { clear: both; }


/*--------------------------*/
/*		5 JQUERYSCROLL		*/
/*--------------------------*/
.jQueryScroll {}
.jspContainer{overflow: hidden;position: relative; height:200px;}
.jspPane { position: absolute; }
.jspVerticalBar {background:#f4f4f4;width: 7px; right: 2px; position: absolute; top: 0; height: 100%;}
.jspHorizontalBar {background: transparent; width: 7px; bottom: 2px; position: absolute; left: 0; width: 100%;}
.jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: transparent; position: relative; }
.jspDrag { background: #008fcd; position: relative; top: 0; left: 0; cursor: pointer;}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled { cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }


/*--------------------------*/
/*		6 RESPONSIVE		*/
/*--------------------------*/

/** Mobile **/
@media screen and (max-width: 640px) {

html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

}
/*--------------------------*/
/*		7 FORMULAIRES		*/
/*--------------------------*/
/* ========================================
 *	$ =	STRUCTURES
 * ======================================== */
.obj_form{
	font-size:1em;
	padding:10px 0;
	margin:0 auto;
	}
.obj_form fieldset > div{
	margin:0 0 20px;
	}
.obj_form h1{
	padding:0 0 0 160px;
	}
/* ========================================
 *	$ =	ELEMENTS NATIFS
 * ======================================== */
/* ----------------------------------------
 * FIELDSET & LEGEND 
 * ------------------------------------- */
fieldset legend{
	margin:0 0 20px;
	}
/* ----------------------------------------
 * CONTENEURS
 * ------------------------------------- */	
.obj_form .text,
.obj_form .textarea,
.obj_form .select,
.obj_form .radio,
.obj_form .checkbox,
.obj_form .birthdate{
	padding:5px 0;
	margin:0;
	}
/* ----------------------------------------
 * LABEL
 * ------------------------------------- */	
.text label, .text h4,
.textarea label, .textarea h4,
.select label, .select h4,
.radio > span, .radio h4,
.checkbox > span, .checkbox h4,
.birthdate > span:first-child{
	display:block;
	margin:0 0 10px;
	font:1em/1em 'LocatorWeb-Regular';
	}
.textarea label{
	vertical-align:top;
	}
/* ----------------------------------------
 * INPUT TYPE TEXT & TEXTAREA
 * ------------------------------------- */	
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea{
	box-sizing:border-box;
	width:100%;
	padding:10px;
	border:1px solid #C6CCCF;
	font:1em/1.2em 'LocatorWeb-Regular';
	}
input[type=text].error,
input[type=email].error,
input[type=url].error,
input[type=tel].error,
input[type=password].error,
textarea.error{
	border-color:#bd0000;
	}
textarea{
	resize:vertical;
	height:150px;
	min-height:150px;
	}
/* birthdate */
.text.birthdate div{
	width:33.333%;
	float:left;
	padding:0 10px 0 0;
	}
.text.birthdate div:last-child{
	padding:0;
	}
.text.birthdate input[type=text]{
	width:100%;
	}
.text.birthdate span + input[type=text]{
	margin:0;
	}
/* ----------------------------------------
 * BUTTON
 * ------------------------------------- */	
button[type=reset],
button[type=submit]{
	margin:0 0 0 10px;
	padding:5px 15px;
	border: 1px solid #C6CCCF;
	background:#EFEFEF;
	}
button[type=reset]:hover,
button[type=submit]:hover{
	cursor:pointer;
	background:#dcdcdc;
	}
/* ========================================
 *	$ =	ARIA
 * ======================================== */
/* ----------------------------------------
 * COMMON
 * ------------------------------------- */	
input[aria-hidden=true],
select[aria-hidden=true]{
	display:none;
	}
/* ----------------------------------------
 * RADIO & CHECKBOX
 * ------------------------------------- */	
.checkbox.var_optin > .ctn_checkbox{
	position:relative;
	}
.checkbox.var_optin span[role=checkbox]{
	position:absolute;
	top:0; left:0;
	}
.checkbox.var_optin label{
	position:relative;
	display:block;
	padding-left:30px;
	}
.radio label,
.checkbox label{
	margin:0 10px 0 0;
	color:#000;
	cursor:pointer;
	}
span[role=radio],
span[role=checkbox]{
	display:inline-block;
	position:relative;
	top:-3px;
	text-align:left;
	text-indent:-10000px;
	line-height:1em;
	margin:0 5px 0 0;
	width:22px;
	height:22px;
	background-repeat:no-repeat;
	background-position:left top;
	vertical-align:top;
	cursor:pointer;
	}
.ie7 span[role=radio],
.ie7 span[role=checkbox]{
	text-indent:0;
	font-size:0;
	text-align:0;
	}
span[role=radio]{
	background:url("../../../resources/freefromspots/images/sprite_icon.png") no-repeat -645px 0 / 1024px 1024px;
	}
.rating span[role=radio],
.rating span[role=radio][aria-checked=false]{
	top:-2px;
	margin:0;
	float:left;
	width:25px; height:22px;
	background:url("../../../resources/freefromspots/images/sprite_icon.png") no-repeat -903px 0 / 1024px 1024px;
	}
.rating span[role=radio]:hover,
.rating span[role=radio][aria-checked=true]:hover,
.rating span[role=radio][aria-checked=true].over:hover,
.rating span[role=radio].over,
.rating span[role=radio][aria-checked=true],
.rating span[role=radio][aria-checked=true]:focus,
.rating span[role=radio][aria-checked=true].over,
.rating span[role=radio][aria-checked=true].over:focus{
	background-position:-878px -22px;
	}
span[role=checkbox]{
	background:url("../../../resources/freefromspots/images/sprite_icon.png") no-repeat -601px 0 / 1024px 1024px;
	}
	
/* position hover */
span[role=radio]:hover,
span[role=radio]:focus,
span[role=radio].over{
	background-position:-645px -22px;
	}	
/* position hover */
span[role=checkbox]:hover,
span[role=checkbox]:focus,
span[role=checkbox].over{
	background-position:-601px -22px;
	}
/* position hover checked */
span[role=radio][aria-checked=true]{
	background-position:-645px -44px;
	}
span[role=checkbox][aria-checked=true]{
	background-position:-601px -44px;
	}
/* position hover checked focus */
span[role=radio][aria-checked=true]:hover,
span[role=radio][aria-checked=true]:focus,
span[role=radio][aria-checked=true].over{
	background-position:-645px -66px;
	}
span[role=checkbox][aria-checked=true]:hover,
span[role=checkbox][aria-checked=true]:focus,
span[role=checkbox][aria-checked=true].over{
	background-position:-601px -66px;
	}
/* error */
.error,
.ctn_error{
	color:#bd0000;
	}
.ctn_error p{
	margin:20px 0;
	text-align:center;
	}
span[role=radio].error{
	background-position:-667px 0;
	}
span[role=checkbox].error{
	background-position:-623px 0;
	}
/* position hover */
span[role=radio].error:hover,
span[role=radio].error:focus,
span[role=radio].error.over{
	background-position:-667px -22px;
	}
span[role=checkbox].error:hover,
span[role=checkbox].error:focus,
span[role=checkbox].error.over{
	background-position:-623px -22px;
	}
/* position hover checked */
span[role=radio][aria-checked=true].error{
	background-position:-667px -44px;
	}
span[role=checkbox][aria-checked=true].error{
	background-position:-623px -44px;
	}
/* position hover checked focus */
span[role=radio][aria-checked=true].error:hover,
span[role=radio][aria-checked=true].error:focus,
span[role=radio][aria-checked=true].error.over{
	background-position:-667px -66px;
	}
span[role=checkbox][aria-checked=true].error:hover,
span[role=checkbox][aria-checked=true].error:focus,
span[role=checkbox][aria-checked=true].error.over{
	background-position:-623px -66px;
	}
/* ----------------------------------------
 * SELECT
 * ------------------------------------- */	
span[role=combobox]{
	display:inline-block;
	width:100%;
	padding:6px 29px 6px 9px;
	border:1px solid #C6CCCF;
	background:#fff;
	cursor:pointer;
	}
span[role=combobox]:after{
	display:inline-block;
	content:"";
	position:absolute;
	top:50%; right:10px;
	margin:-2px 0 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #000 transparent transparent transparent;
	}
span[role=combobox].error{
	border-color:#d95f6d;
	}
span[role=combobox]:focus{
	background:#efefef;
	}
/* liste */
span[role=combobox] + div{
	position:absolute;
	top:28px;
	left:-10000px;
	width:100%;
	}
span[role=combobox][aria-expanded=true] + div{
	left:0;
	}
span[role=combobox] + div .border{
	border:1px solid #C6CCCF;
	background:#fff;
	}
span[role=combobox] + div .jQueryScroll{
	height:150px;
	max-height:150px;
	width:100%;
	}
/* optgroup */
ul[role=listbox] > li > span{
	font-weight:bold;
	font-style:italic;
	}
ul[role=listbox] ul{
	margin:0 0 10px;
	}
/* option */
li[role=option]{
	padding:2px 10px;
	cursor:pointer;
	}
li[role=option]:hover{
	cursor:pointer;
	background:#efefef;
	}
li[role=option][aria-selected=true]{
	background:#efefef;
	}
/* ----------------------------------------
 * SELECT BIRTHDATE
 * ------------------------------------- */	
.select.birthdate .ctn_select{
	}
.select.birthdate select + span{
	display:inline-block;
	float:left;
	margin:0 3% 0 0;
	width:30%;
	cursor:pointer;
	}
.select.birthdate select + span:last-child{
	margin:0;
	width:34%;
	}
.select.birthdate span[role=combobox]{
	width:100%;
	}
.select > span{
	width:100%;
	}
	
.obj_compteur{font-size:0.875em;}
/* ============================= *
 * ERROR
 * ============================= */ 
.msg_error{
	margin:10px 0;
	color:#bd0000;
	text-align:center;
	}
.ctn_mandatory{
	margin:10px 0;
	font-size:0.875em;
	color:#C6CCCF;
	}