/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/

body, html  { height: 100%; }
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body { line-height: 1; }
ol, ul { list-style: none; }


/*----------------------------------------------*/
/* Extra fonts */
/*----------------------------------------------*/

@font-face {
    font-family: 'hero';
    src: url('../css/hero-webfont.eot');
    src: url('../css/hero-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/hero-webfont.woff') format('woff'),
         url('../css/hero-webfont.ttf') format('truetype'),
         url('../css/hero-webfont.svg#CoolveticaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*----------------------------------------------*/
/*  General Styles */
/*----------------------------------------------*/

body {
	font-family: "hero", "Lucida Grande", sans-serif;
	color:#FFF;
	font-size:13px;
	line-height:1.4em;
	background:#333;
}

/*----------------------------------------
    * Header
----------------------------------------*/

.head_bar {
	width:100%;
	height:95px;
	background:#111111 url(/img/bg_header.png) 0 0 repeat-x;
/*	position:fixed;*/
	top:0;
	left:0;
	z-index:3000;
}
.head_bar .container {
	height:27px;
	padding:0;
	position:relative;
}
.head_bar .logo {
	float:left;
	height:73px;
	width:150px;
	padding:13px 0 0 0;
	position:relative;
}
.head_bar .moto {
	float:left;
	width:520px;
	height:40px;
	line-height:20px;
	margin-left:25px;
	position:relative;
	top:38px;
}
.head_bar .moto h1{
	font-size: 1.4em;
}
.head_bar .moto h2{
	font-size: 1.1em;
	letter-spacing:0px;
	color:#0099CC;
}

/*----------------------------------------
    * Top Menu
----------------------------------------*/

.topmenu {
	width:590px;
	height:40px;
	position:absolute;
	top:27px;
	right:0;
}

.topmenu .dropdown {
	float:right;
	font-family: 'hero', Arial, Helvetica, sans-serif;
	font-size:18px;
	line-height:2.7em;
	color:#fff;
	z-index:1300;
	margin:0;
	padding:0;
}

.topmenu .dropdown li {
	display:block;
	float:left;
	margin:0;
	position:relative;
	list-style:none;
	padding:0 6px;
	margin:0 6px;
}

.topmenu .dropdown li.last {
	padding-left:16px;
	margin-left:0
}

.topmenu .dropdown li a {
	display:block;
	color:#fff;
	height:25px;
	text-decoration:none
}

.topmenu .dropdown li a span {
	background:#111111;
	padding:5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	behavior: url(/js/PIE.htc);
}
.topmenu .dropdown li a b {
	background:#0099CC;
	padding:5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	behavior: url(/js/PIE.htc);
}
.topmenu .dropdown li a:hover,.topmenu .dropdown li:hover a{
	color:#36cdf1;
}
.topmenu .dropdown li a:hover span {
	cursor:pointer
}

/*----------------------------------------
    * Content
----------------------------------------*/

.margin_top{
	float:left;
	width:100%;
	height:95px;
	margin:0;
}

.container{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: 100% ;
}

.container div.bandeaupartenaire {
	margin: -15px 0 15px 0 ;
	width: 960px ;
	height: 150px ;
}

.intro_bar {
	float:left;
	width:100%;
	height:400px;
	background:url(/img/bg_intro.jpg) center top no-repeat;
	z-index:3000
}
.intro{
	float:left;
	width: 960px;
	height:380px;
}
.intro .left{
	float:left;
	width: 530px;
	padding-top:50px;
	font-family: 'hero', Arial, Helvetica, sans-serif;
	font-size:27px;
	line-height:1.2em;
	letter-spacing: -0.05em;
}
.intro .left a{
	color:white;
}
.intro .left a:hover{
	color:#0099CC;
}
.intro .left img{
	padding-right:6px;
	vertical-align: middle
}
.intro .left span{
	font-size:23px;
	line-height:1.2em;
	color:#0099CC;
	font-weight: normal;
	letter-spacing: -0.03em;
}
.intro .left h2{
	margin-top: -25px;
	font-size:23px;
	font-style:normal;
	line-height:1.2em;
	font-weight: normal;
	letter-spacing: -0.03em;
}
/* Jerome */
.intro #slider {
	width: 530px ;
	overflow:hidden;
}
.intro #slider li {
	width: 530px;
	overflow: hidden ;
}
.intro #slider ul, #slider li {
	position:relative;
	margin:0;
	padding:0;
	list-style:none;
	display:block;
}

.intro .right{
	float:right;
	width: 430px;
	height:360px;
	margin-top:40px;
}
.intro .right img{
	margin-top:10px;
}
.intro .left i{
	font-size:14px;
	font-style:normal;
}
.section_bar {
	float:left;
	width:100%;
	height:46px;
	font-size:22px;
	line-height:48px;
	background:url(/img/bg_barre.png) 0 0 repeat-x;
	z-index:3000;
}
.middle_bar {
	float:left;
	width:100%;
	padding-bottom: 20px ;
/*	margin-bottom: 20px ;*/
	min-height:340px;
	padding-top:35px;
	background:url(/img/bg_middle.jpg) 0 0 repeat-x;
	z-index:3000;
}
.middle{
	width: 960px;
	min-height:200px;
}
.middle .left{
	float:left;
	width: 610px;
	font-size:18px;
	line-height:1.3em;
	margin-bottom:20px;
}
.middle .left a{
	color :#0099CC;
	text-decoration: none;
}
.middle A:hover {
	color:#FFF;
	text-decoration: underline;
}
.middle .right{
	float:right;
	width: 320px;
	margin-bottom:20px;
}
.middle .right img{
	margin: 0 10px 20px 0;
}
.clearfix {
	float: none;
	clear: both;
}
.footer_bar {
/*	position: fixed;*/
	bottom: 0px;
/*	float:left;*/
	width:100%;
	height:50px;
	border-top:1px solid #666;
	background:#000;
	z-index: 99999999 ;
/*	margin-top: 20px ;*/
}
.footer{
	width: 960px;
	text-align: right;
	font-family: arial;
	color:white;
	padding:5px 0;
}
.footerTxt{
	float:left;
	width: 385px;
	text-align: left;
	font-family: arial;
	color:white;
	padding:10px 0;
}
.footer .dropdown {
	float:right;
	font-family: 'hero', Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:2.5em;
	color:#fff;
	z-index:1300;
	margin:0;
	padding:0;
}

.footer .dropdown li {
	display:block;
	float:left;
	margin:0;
	position:relative;
	list-style:none;
	padding:0 8px;
	margin:0 6px;
}

.footer .dropdown li.last {
	padding-left:16px;
	margin-left:0
}

.footer .dropdown li a {
	display:block;
	color:#fff;
	height:25px;
	text-decoration:none
}

.footer .dropdown li a span {
	background:#333;
	padding:5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	behavior: url(/js/PIE.htc);
	position:relative
}


.buttonApple a{
	float:left;
	width: 300px;
	height:84px;
	margin-bottom:20px;
	background:url(/img/FR_b_apple.png) left 0 no-repeat;
}
.buttonApple a:hover {
	background:url(/img/FR_b_apple.png) right 0 no-repeat;
}
.buttonAndroid a{
	float:left;
	width: 300px;
	height:84px;
	margin-bottom:20px;
	background:url(/img/FR_b_android.png) left 0 no-repeat;
}
.buttonAndroid a:hover {
	background:url(/img/FR_b_android.png) right 0 no-repeat;
}
.buttonmylib a:hover{
	color:#D60000;
}

#createForm1 .msg, #createForm2 .msg, #contactForm .msg, #codeForm1 .msg, #codeForm2 .msg, #confirm2Form .msg{
	float:left;
	width:100%;
	line-height: 20px;
	height:70px;
	font-size:18px;
	line-height: 1.4em;
}
#confirm2Form{
	font-size:18px;
}
#confirm2Form b{
	font-size:22px;
	color:#0099CC;
	font-weight: normal;
}
#loginForm .msg{
	float:left;
	width:100%;
	line-height: 20px;
	height:50px;
	font-size:18px;
}
#confirmForm .msg{
	float:left;
	width:100%;
	line-height: 20px;
	height:50px;
	font-size:18px;
}
#lostPwdForm .msg{
	float:left;
	width:100%;
	line-height: 20px;
	height:50px;
	font-size:18px;
}
#lostPwdForm2 .msg{
	float:left;
	width:100%;
	line-height: 20px;
	height:50px;
	font-size:18px;
}
#accountChange .msg{
	float:left;
	width:100%;
	line-height: 14px;
	height:100px;
	font-size:14px;
}
#accountChange .msg2{
	float:left;
	width:100%;
	line-height: 14px;
	height:28px;
	font-size:18px;
}
#sync .msg{
	float:left;
	width:100%;
	line-height: 18px;
	height:130px;
	font-size:16px;
	margin:20px 0;
}
.synchro{
	float:left;
	margin-bottom:50px;
}
.legend{
        clear: both;
	float:left;
	width:40%;
	line-height: 39px;
	font-size:22px;
}

.legendLogin, .legendPass{
    float:left;
    width:30%;
    line-height: 39px;
    font-size:22px;
}



.field {
	float:right;
	width:45%;
	margin:3px 10% 2px 3px;
	text-align: left;
	height:25px;
	border:0px solid #333;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-size:18px;
	padding:5px;
	position:relative;
	behavior: url(/js/PIE.htc);
}

input.field.mail, input.field.password{
    position:relative;
    left: -50px;
}

#createForm1 .formCheck{
    clear:both;
    font-size: 14px;
    height: 16px;
    width:520px;
    display:block;
    margin: 2px auto;
    margin-left: 180px;
}

#createForm1 .formCheck label{
    position: relative;
    top:-1px;
    left: -100px;
}

#createForm1 .optinCheckbox, #createForm1 .partnerOfferCheckbox{
    float: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    position: relative;
    left:-100px;
}

.select {
	float:right;
	width:48%;
	margin:5px 10% 5px 3px;
	text-align: left;
	height:32px;
	border:0px solid #333;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-size:18px;
	padding:5px;
	position:relative;
	behavior: url(/js/PIE.htc);
}
.legend2{
	width:50%;
}
.field2 {
	width:38%;
}
 .textarea {
	float:right;
	width:90%;
	height:160px;
	margin:3px 5%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border:0px solid #333;
	font-size:18px;
	padding:5px;
	position:relative;
	behavior: url(/js/PIE.htc);
}

.synclegend{
	float:left;
	height:160px;
	font-size: 14px;
	margin:20px 0;
}
.synclegend b{
	font-size: 20px;
}
.syncl1 img{
	border: 1px solid white;
}
.syncl1{
	width:200px;
}
.syncl2{
	width:390px;
}
.syncl2 img{
	vertical-align: middle;
	padding-right:10px;
}

.buttonmylib{
	float:left;
	width: 262px;
	height:91px;
	font-size:20px;
	padding-top:15px;
	padding-left:7px;
	text-align:center;
	background:url(/img/button1.png) left 0 no-repeat;
	line-height:65px;
	margin-left:130px;
	margin-top:0px;
	color:#FFFFFF;
	text-decoration: none;
}
.buttonmylib A:visited {
	color:white;
}
.buttonmylib:hover{
	background:url(/img/button1.png) right 0 no-repeat;
	color:#0099CC;
}
.button2{
	background:url(/img/button2.png) left 0 no-repeat;
}
.button2:hover{
	background:url(/img/button2.png) right 0 no-repeat;
}
.button3{
	background:url(/img/button3.png) left 0 no-repeat;
}
.button3:hover{
	background:url(/img/button3.png) right 0 no-repeat;
}
.buttonplus{
	background:url(/img/buttonplus.png) left 0 no-repeat;
}
.buttonplus:hover{
	background:url(/img/buttonplus.png) right 0 no-repeat;
}
.error{
	color:red;
}
.intro_bar .container .intro .left .about{
	float:left;
	margin-top:20px;
	font-size:18px;
	line-height:1.3em;
	color:white;
}
.intro_bar .container .intro .left .about a{
	color:#0099CC;
	text-decoration: none;
}
.intro_bar .container .intro .left .about a:hover{
	color:white;
	text-decoration: underline;
}


/* Jerome */
.h75 {
	height: 75px !important;
}
.linktolib {
	float: left ;
	padding-left: 145px ;
	font-size: 14px;
}
.deleteAccount {
	float: left ;
	font-size: 12px ;
	padding-left: 195px ;
	padding-top: 20px ;
}

.secondStepLegalnotice{
    clear:both;
    font-size:0.5em;
    line-height: 1.2em;
    margin-top: 8px;
}

div.dl{
	height: 90px;
	width: 660px;
	margin-left: auto;
	margin-right: auto;
}