/* --------------------------------
 * STYLES INSCRIPTION
 * -------------------------------- */
 
/* Global */
#corps article{clear:both;}
a.btnInsc{clear:both;position:relative;display:block;height:72px;margin:0 13px;text-decoration:none;background:url(../img/inscription/btnInsc_fond.png) repeat-x;}
a.btnInsc span.btnGauche,a.btnInsc span.btnDroite{position:absolute;top:0;z-index:2;display:bloc;width:13px;height:72px;background:url(../img/inscription/btnInsc_bord.png) no-repeat;}
a.btnInsc span.btnGauche{left:-13px;}
a.btnInsc span.btnDroite{right:-13px;background-position:-13px 0;}
a.btnInsc .texte{float:left;font-size:15px;text-indent:7px;font-weight:700;color:#737373;line-height:72px;}
a.btnInsc .btn{float:right;display:block;width:133px;height:44px;margin:14px 1px 0 0;color:#fff;font-size:14px;font-weight:700;line-height:44px;text-align:center;text-shadow:1px 0 2px #000;background:url(../img/inscription/btnInsc.png) no-repeat;}
a.btnInsc:hover .btn{background-position:0 -44px;}

#hautInsc{width:960px;min-height:481px;margin:-35px 0 10px;background:url(../img/inscription/fondPrinc.png) no-repeat;position:relative;}
#hautInsc .artCont{overflow:hidden;padding:39px 4px 20px 4px;background:url(../img/inscription/fondPrinc-bas.png) 50% bottom no-repeat;}

.hautInsc_doc {
	position: absolute;
	top: 0;
	right:4px;
}

/* Diapo */
#diapo{overflow:hidden;position:relative;height:195px;margin:5px 0 36px;}
#diapo .slides_container .elem{margin:40px 0 0 20px;padding:0 0 0 70px;}
#diapo .slides_container .slides_control{height:170px !important;}
#diapo .slides_container .elem1{background:url(../img/inscription/diapo/elem1.png) 0 50% no-repeat;}
#diapo .slides_container .elem2{background:url(../img/inscription/diapo/elem2.png) 0 50% no-repeat; display:none;}
#diapo .slides_container .elem3{background:url(../img/inscription/diapo/elem3.png) 0 50% no-repeat; display:none;}
#diapo .slides_container .elem4{background:url(../img/inscription/diapo/elem4.png) 0 50% no-repeat; display:none;}

#diapo .slides_container figcaption{width:575px;padding-left:10px;border-left:2px solid #ddf4ff;}
#diapo .slides_container h2{margin:0 0 5px;color:#fff;text-transform:none;font-size:30px;line-height:normal;}
#diapo .slides_container p{padding:0;color:#ddf4ff;font-size:22px;line-height:normal;}
#diapo .slides_container p span{color:#fff;font-weight:700;text-decoration:underline;}

#diapo .pagination{position:absolute;left:10px;bottom:12px;z-index:2;}
#diapo .pagination li{float:left;margin:0 2px;}
#diapo .pagination li a{display:block;width:15px;height:15px;text-indent:-9999px;color:#fff;background:url(../img/inscription/diapo/sliderNav.png) no-repeat;}
#diapo .pagination li.current a{background-position:0 -15px;}


/* Video */
#hautInsc .video{float:left;margin:0 0 10px 15px;padding:0 17px 0 0;background:url(../img/inscription/videoSep.png) right 0 repeat-y;}
#hautInsc h2{margin:0 0 15px;text-transform:uppercase;}
#hautInsc h2 span{display:block;padding-right:205px;color:#57b5e4;}

#hautInsc #blocvVideo{position:relative;display:block;width:268px;height:138px;text-decoration:none;background:url(../img/inscription/video.png) no-repeat;}
#hautInsc #blocvVideo span{position:absolute;top:60px;left:105px;z-index:2;color:#fff;text-transform:uppercase;font-size:10px;font-weight:700;}

/* Partage*/
.blocSocial .partage{float:right;font-size:.9em;font-weight:700;}
.blocSocial .partage dt{float:left;margin:0 5px 0 0;font-weight:700;}
.blocSocial .partage dd{float:left;margin:0 2px;}
.blocSocial .partage dd a{display:block;width:16px;height:16px;background:url(../img/ico/social.png) no-repeat;}
.blocSocial .partage dd a.facebook{background-position:0 0;}
.blocSocial .partage dd a.twitter{background-position:-16px 0;}
.blocSocial .partage dd a.google{background-position:-32px 0;}
.blocSocial .partage dd a.linkedin{background-position:-48px 0;}
.blocSocial .partage dd a.viadeo{background-position:-64px 0;}

/* Description */
#hautInsc .description{float:right;width:582px;margin:0 15px 0 0;}
#hautInsc .description p{width:420px;margin:0 0 12px;padding:0;color:#747474;font-size:14px;line-height:18px;}
#hautInsc a.btnInsc .accroche{position:absolute;top:-63px;right:20px;width:94px;height:91px;text-indent:-9999px;background:url(../img/inscription/accroche.png) no-repeat;}

/* Formulaire inscription */
#formInsc{/*display:none;*/margin:0 0 10px;background:#fff;}
#formInsc form{overflow:visible;}
#formInsc h2{margin:30px 0 25px;padding:0 0 8px;text-transform:uppercase;text-align:center;font-size:27px;line-height:normal;color:#2b2b2b;border-bottom:1px solid #c3c3c3;}
#formInsc .formG, #formInsc .formD{width:48%;margin:0 0 10px;float:left;}
#formInsc .formD{float:right;}
#formInsc input{max-width:580px;}
#formInsc .typeLeft label{width:125px;}
#formInsc select{width:240px;}
#formInsc  h3{margin:0;padding:5px;background:#eff1ed;}
#formInsc .formTip{position:absolute;top:-32px;right:0;z-index:2;padding:5px;background:#fafafa;border:1px solid #8a8a8a;}
#formInsc .staticValue{height: 31px;line-height:31px;}

/* D�tails */
#basInsc{margin:30px 0 0;}
#basInsc h2{margin:0 0 25px;padding:0 0 8px;text-transform:uppercase;text-align:center;font-size:27px;line-height:normal;color:#2b2b2b;border-bottom:1px solid #c3c3c3;}
#basInsc .description{overflow:hidden;}
#basInsc .description > div{width:48%;min-height:110px;margin:0 0 20px;}
#basInsc .description .impair{clear:both;float:left;}
#basInsc .description .pair{float:right;}
#basInsc .description h3{color:#57b5e4;padding-left:60px;}
#basInsc .description p{padding:0;color:#747474;padding-left:60px;}
#basInsc .description p strong{color:#505050;}

#basInsc .description .elem1{background:url(../img/inscription/ico/inscription.png) no-repeat;}
#basInsc .description .elem2{background:url(../img/inscription/ico/geo.png) no-repeat;}
#basInsc .description .elem3{background:url(../img/inscription/ico/horaires.png) no-repeat;}
#basInsc .description .elem4{background:url(../img/inscription/ico/honoraires.png) no-repeat;}
#basInsc .description .elem5{background:url(../img/inscription/ico/information.png) no-repeat;}
#basInsc .description .elem6{background:url(../img/inscription/ico/stats.png) no-repeat;}

#videoBox .btnInsc{width:618px;margin-top:10px;}
#formBox .typeLeft label{width:120px;}
#validBox p.validText{font-weight:700;color:#4e981f;}
#validBox p.validIco{padding:8px 8px 8px 85px;background:#fafafa url(../img/inscription/ico/valid.png) 5px 50% no-repeat;border:1px solid #ebebeb;}
#validBox a.btnAccueil{float:right;padding:6px 8px;color:#484848;font-size:12px;font-weight:700;line-height:normal;text-decoration:none;border:2px solid #bdbdbd;background:none repeat scroll 0 0 #eaeaea;}
#validBox a.btnAccueil:hover{color:#fff;border-color:#3fa1d0;background-color:#57b5e4;}

#formInsc #formError{color:#ff0000;font-weight:700;line-height:30px;}
#formSuccess{width:600px;}

/* Recuperation */
.etape0{overflow:hidden;width:785px;margin:0 auto 10px;}
.etape0 h3{color:#57b5e4;}

.etape0 .video{width:290px;}
.etape0 .description{float:left;width:512px;margin:0 0 0 25px;}
.etape0 .description .alert{width:340px;margin-top:10px;}
.etape1 form{margin-top:0;}
.etape0 .description ul li{line-height:20px;}
.etape0 dl{margin:0 0 18px;padding:0 0 0 65px;min-height:46px;}
.etape0 dl.etapeMail{background:url(../img/inscription/ico/etapeMail.png) no-repeat;}
.etape0 dl.etapeTel{background:url(../img/inscription/ico/etapeTel.png) no-repeat;}
.etape0 dl.etapeValid{background:url(../img/inscription/ico/etapeValid.png) no-repeat;}
.etape0 dt{font-size:1.1em;font-weight:700;text-transform:uppercase;}
.etape0 dd{color:#666;}

.etape0 .btnBas{clear:both;padding:0 15px;}
.etape0 .btnBas .texte{padding:16px 0 0;line-height:normal;}
.etape0 .btnBas .info{position:absolute;top:38px;left:0;z-index:2;color:#8e8e8e;font-size:12px;}
.etape0  .video .ecran{margin:0 0 0 45px;}

.ecran{position:relative;float:left;width:203px;height:203px;margin:0 25px 0 0;padding:10px 10px 0;}
.ecran .masque{position:absolute;top:0;left:0;z-index:2;width:223px;height:203px;background:url(../img/inscription/ecran.png) no-repeat;}
.ecran .lien{position:absolute;top:65px;left:60px;z-index:2;display:inline-block;padding:5px 5px 5px 20px;text-transform:uppercase;font-size:10px;font-weight:700;color:#fff;background:#000 url(../img/inscription/ico/btnPlay.png) 5px 50% no-repeat;border:1px solid #000;}
.ecran img{width:100%;}

#recupEtape{position:relative;z-index:2;margin:0 0 20px;text-align:center;}
#recupEtape .etape a, #recupEtape .etape span{display:block;text-decoration:none;}
#recupEtape .etape{display:inline-block;vertical-align:top;width:225px;height:80px;margin-left:-4px;background:url(../img/inscription/etape_fond.png) repeat-x;}
#recupEtape .etape .prem{background:url(../img/inscription/etape-masque.png) left 0 no-repeat;}
#recupEtape .etape .dern{background:url(../img/inscription/etape-masque.png) right 0 no-repeat;}
#recupEtape .etape .icone{width:40px;height:40px;margin:0 auto 8px;text-align:center;font:700 20px/40px Arial;color:#707070;background:url(../img/inscription/etape-icone.png) 0 -40px no-repeat;}
#recupEtape .etape .titre{text-align:center;font:700 12px Arial;color:#383838;text-transform:uppercase;}
#recupEtape .etape.termine{background-color:#57b5e4;}
#recupEtape .etape.termine .icone{text-indent:-9999px;background-position:0 0;}
#recupEtape .etape.termine a:hover .titre{color:#000;}

#formcode .numberToCall{margin:20px;text-align:center;}
#code{color:#57b5e4;font-size:18px;font-weight:bold;text-align:center;}
#formcode p {text-align:center;}
#the_code > input {width:200px;text-align:center;}
.rightText{background:none repeat scroll 0 0 #fafafa;border:1px solid #ebebeb;margin:10px 0 0;overflow:hidden;padding:8px;color:#666666;font-size:12px;vertical-align:top;border-radius:8px 8px 8px 8px;margin-top:0;}
.etape1 .alert.error{padding:8px 8px 8px 32px;color:#555;background:#d5f1fc url(../img/ico/alert/ico_info.png) 8px 50% no-repeat;border-color:#b6d8e3;}

.identification {
    border-bottom: 1px solid #E3E3E3;
    color: #484848;
    font-size: 18px;
    height: 40px;
    margin: 0 0 25px;
    padding: 0 225px 0 20px;
    position: relative;
    width: 500px;
    z-index: 3;
}
#user_from_container{
	width:750px;
}
#user_from_container #user_from, #user_from_container #from_other {	
	width:420px;
}
#user_from_container #from_other {	
    float: right;
    margin-right: 85px;
    max-width: 400px;
    width: 420px;
}

/* --------------------------------
 * CSS3
 * -------------------------------- */
a.btnInsc .btn{text-shadow:1px 0 2px rgba(0,0,0,.8);}
#validBox a.btnAccueil,#validBox p.validIco,.ecran .lien{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#formInsc .formTip{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#formInsc .formTip{box-shadow:0 0 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.4);-moz-box-shadow:0 0 2px rgba(0,0,0,0.4);-o-box-shadow:0 0 2px rgba(0,0,0,0.4);}
.ecran .lien{background-color:rgba(0,0,0,.8);}

#hautInsc a.btnInsc:not(:hover) .accroche{
	-webkit-animation:shake 5s 2s infinite;
	-moz-animation:shake 5s 2s infinite;
	-o-animation:shake 5s 2s infinite;
	animation:shake 5s 2s infinite;
}
@-webkit-keyframes shake {
	0%, 20%, 100% {-webkit-transform:translateX(0);}
	2%, 6%, 10%, 14%, 18% {-webkit-transform:translateX(-5px);}
	4%, 8%, 12%, 16% {-webkit-transform:translateX(5px);}
}
@-moz-keyframes shake {
	0%, 20%, 100% {-moz-transform:translateX(0);}
	2%, 6%, 10%, 14%, 18% {-moz-transform:translateX(-5px);}
	4%, 8%, 12%, 16% {-moz-transform:translateX(5px);}
}
@-o-keyframes shake {
	0%, 20%, 100% {-o-transform:translateX(0);}
	2%, 6%, 10%, 14%, 18% {-o-transform:translateX(-5px);}
	4%, 8%, 12%, 16% {-o-transform:translateX(5px);}
}
@keyframes shake {
	0%, 20%, 100% {transform:translateX(0);}
	2%, 6%, 10%, 14%, 18% {transform:translateX(-5px);}
	4%, 8%, 12%, 16% {transform:translateX(5px);}
}