/*******************************************************
 * http://skyrock.com V4
 * /m/account/subscribe
 * Inscription en 3 étapes
 * ****************************************************/
@import url(forms.css);
/*******************************************************
 * Inscription Skyrock.com
 * *****************************************************/

#admskyrock .inscription {
    padding-top: 20px;
}
.inscription .content {
    min-height: 300px;
    padding: 40px;
    margin: 0 auto;
    border: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    background: #303030; 
}

.box_dark {
    padding: 20px;
    background: #252525;
    border-radius: 3px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.75);
}

.box_inputs {
    padding: 2px;
    background: #F9F9F9;
    border-radius: 3px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.40);
}

.inscription p,
.inscription h2,
.inscription h3,
#subscribe label,
#forms_blog_profil label,
.createblogprofil_adm label {
    color: #fff;
}

.inscription h1{
    color: #0099FF;
    font-size: 30px;
    text-align: center;
}

.inscription h2 {
    font-size: 23px;
}

.inscription h3 {
    font-size: 18px;
}

.step1-1 .label_birth,
.step1-3 .label_birth,
.inscription .label_big,
#forms_blog_profil label,
.createblogprofil_adm label {
    display: block;
    font-size: 18px;
}

.step1-1 .label_sexe {
    font-size: 18px;
}

.step1-1 #sexe-man,
.step1-1 #sexe-woman {
    margin: 0 5px;
}

.box_inputs label,
#forms_blog_profil .box_inputs label {
    display: inline-block;
    padding: 13px 10px 10px;
    margin-right: 5px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.box_inputs input,
.box_inputs select {
    background: #F9F9F9;
}

.box_inputs input.text {
    box-shadow: none;
}

.step1-2 label,
.step1-3 label {
    font-size: 13px;
}

.step1-2 label strong,
.step1-3 label strong {
    color: #2C88D6;
}

.inscription .row {
    margin-bottom: 15px;
}
.inscription .row .label_birth {
    margin-bottom: 10px;
}

#wrap.inscription label.hide {
    display: none;
    display: block\9; /* FIX ie placeholder */
}

#subscribe .last {
    margin-bottom: 0;
}

.separator {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #303030;
}

.separator_bottom {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #303030;
}

.inscription .text,
.inscription .select {
    padding: 4px 10px;
    color:#4c4c4c !important;
    font-size: 19px;
    border: 2px solid transparent;
    -webkit-transition: border-color 0.4s ease-in-out;
    -moz-transition: border-color 0.4s ease-in-out;
    -o-transition: border-color 0.4s ease-in-out;
    transition: border-color 0.4s ease-in-out;
    background: #F9F9F9;
}

.inscription .select {
    padding-right: 5px;
}

.box_inputs .select {
    border-color: #F9F9F9;
}

.inscription input.text:hover,
.inscription input.text:focus,
.inscription textarea.text:hover,
.inscription textarea.text:focus,
.inscription select.select:hover,
.inscription select.select:focus {
    border-color: #0099FF;
}

#subscribe input.text {
    width: 304px;
}

#subscribe select.day {
    width: 85px !important;
}

#subscribe select.year {
    width: 105px !important;
}

#subscribe select.month {
    width: 125px !important;
}

#birthday_container span,
#form_profil .box_inputs label  {
    position: relative;
    display: inline-block;
}

#form_profil .box_inputs label  {
    text-transform: uppercase;
}

#birthday_container span:after,
#form_profil .box_inputs label:after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 26px;
    top: -2px;
    right: -2px;
    background: #ccc;
}

#birthday_container span:last-child:after,
#form_profil .box_inputs label:last-child:after {
    display: none;
}

.step1 #subscribe {
    margin: 0 auto !important;
}

#subscribe.step1-1,
#subscribe.step1-3 {
    width: 430px;
}

#subscribe.step1-1 {
    float: left;
}

#subscribe.step1-2 {
    width: 600px;
}

.step1 #subscribe .box_dark  {
    padding: 50px;
}

.inscription .rules {
    width: 300px;
    text-align: left;
}

.step1-3 .rules {
    width: 240px;
}

.inscription .rules,
.inscription .rules a {
    color: #676767;
}

.inscription .rules a {
    text-decoration: underline;
}

.hide_important {
    display: none !important;
}

/**** Liste de profil simple - fb_connect ****/
.list_avatar {
    clear: both;
}
.list_avatar li {
    float: left;
    display: inline;
    width: 80px;
    height: 72px;
    margin: 5px;
    text-align: center;
    overflow: hidden;
}
.list_avatar .pseudo {
    padding-top: 2px;
    display: inline-block;
    white-space: nowrap;
    color: #0262dd;
}

#subscribe_nav li {
    float: left;
    display: block;
    width: 235px;
    height: 58px;
    line-height: 58px;
    color: #7b7b7b;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: #000;
    list-style-type: none;
}

#subscribe_nav li:first-child {
    border-top-left-radius: 2px;
}

#subscribe_nav li:last-child {
    border-top-right-radius: 2px;
}

#subscribe_nav li span {
    display: inline-block;
}

#subscribe_nav .active,
#subscribe_nav .done {
    color: #fff;
    background-color: #303030;
}

#subscribe_nav .active {
    background-image: url(/img/inscription/arrow_bottom.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

#subscribe_nav .done span {
    padding-left: 22px;
    background-image: url(/img/inscription/picto_confirm.png);
    background-repeat: no-repeat;
    background-position: left 14px;
}

#subscribe_nav .active span {
    color: #0099ff;
}

/**************************************
 * Etape 1
 * **********************************/

.submit .confirm,
.submit .cancel,
.submit .arrow_back {
    padding: 10px 25px 10px 35px;
    background-position: 15px 50%;
    font-size: 17px;
    font-weight: bold;
}

.submit .arrow_back {
    background-color: #272727;
}

.inscription .warning input,
.inscription .warning select {
    color: #292929 !important;
    background: #fff !important;
    border-color: transparent !important;
}

.message {
    display: block;
    position: absolute;
    width: 230px;
    padding: 8px 16px;
    top: 0;
    top: 20px\9;
    left: 345px;
    color: #fff;
    border: 2px solid #fff;
    background: #E42845;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0,0,0,0.75);
    z-index: 1;
}

.message a {
    color: #fff;
    font-weight: bold;
}

.message:before,
.message:after {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    top: 7px;
    border: solid transparent;
    border-width: 8px;
}

.message:before {
    left: -18px;
    border-right-color: #fff;
}

.message:after {
    left: -15px;
    border-right-color: #E42845;
}

#pseudo_free,
#password_security_high,
#password_security_medium {
    background: #87B201;
}

#pseudo_free:after,
#password_security_high:after,
#password_security_medium:after {
    border-right-color: #87B201;
}

#birth_group_invalid,
#birth_group_tooYoung {
    top: 60px;
}

#password_security_low strong {
    color: #fff;
}
#pseudo_taken .list {
    border-top: 1px dashed #fff;
    margin-top: 5px;
    padding-top: 5px;
}

#pseudo_taken span {
    display: block;
}

#pseudo_taken .msg {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #b3b3b3;
}


/**************************************
 * Etape 2
 * **********************************/

#inscription_choice li {
    float: left;
    position: relative;
    width: 260px;
    margin-right: 20px;
}

#inscription_choice .last {
    margin-right: 0;
}

.js #inscription_choice input {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
}

#inscription_choice label,
#inscription_choice .description {
    font-size: 18px;
}

#inscription_choice label {
    display: block;
    width: 220px;
    padding: 20px;
    font-size: 18px;
    color: #fff;
    background-color: #1f1f1f;
}

#inscription_choice label,
#inscription_choice label .description {
    -webkit-transition: color 0.3s, background-color 0.3s ease-in-out;
    -moz-transition: color 0.3s, background-color 0.3s ease-in-out;
    -o-transition: color 0.3s, background-color 0.3s ease-in-out;
    transition: color 0.3s, background-color 0.3s ease-in-out;
}

#inscription_choice label:hover,
#inscription_choice .selected {
    background-color: #0099ff;
}

#inscription_choice label:hover .description,
#inscription_choice .selected .description {
    color: #fff;
    background: #292929;
}

#inscription_choice img {
    display: block;
    width: 220px;
    height: 140px;
    background: #000;
}


#inscription_choice .title {
    display: block;
    margin-bottom: 20px;
}

#inscription_choice .description {
    display: block;
    color: #292929;
    font-weight: bold;
    background: #fff;
    text-align: center;
    padding: 22px 0;
}

/* Upload d'avatar */
#createblogprofil #avatar img {
    padding: 5px 5px 20px;
    -moz-box-shadow: 0 0 13px #CCCCCC;
    -webkit-box-shadow: 0 0 13px #CCCCCC;
    box-shadow: 0 0 13px #CCCCCC;
    float: left;
    margin-right: 20px;
}

/* Titre et description du blog */

#blog_title_container {
    position: relative;
}

#blog_title,
#blog_description {
    width: 95%;
    margin-bottom: 15px;
}

#blog_title_container .message {
    left: 535px;
}

/* Params profil */

#createblogprofil .row .radio-checkbox {
    text-align: left;
}

/* Submit : idem step 1 */
#createblogprofil div.submit {
    text-align: center;
}
#createblogprofil div.submit input {
    padding: 10px 25px 10px 35px;
    background-position: 15px 50%;
}
fieldset#photo_and_habillage dl {
    width: 345px;
    margin-right: 10px;
    float: left;
}
fieldset#photo_and_habillage dl.habillage {
    width: 200px;
}

#photo_and_habillage #img_template {
    border: 1px solid #D3D3D3;
}

fieldset#photo_and_habillage dt,
fieldset#photo_and_habillage dd {
    float: none;
    text-align: left;
    margin-bottom: 0.5em;
    width: 100%;
}
fieldset#photo_and_habillage label {
    font-weight: bold;
}
/**************************************
 * Etape 2 more.. & creation de blog
 * **********************************/
fieldset.template a {
    text-decoration: none;
}
fieldset.template a span:hover {
    text-decoration: underline;
}
/**************************************
 * Etape 2 - Blog Music
 * **********************************/
#musicLabelType label,
#music-form label {
    padding-right: 5px;
}

#music-form .addremovebutton {
    display: inline-block;
    margin-left: 5px;
    margin-top: -10px;
}

#musicLabelType1 .text {
    width: 500px;
}

#music-form .text,
#music-form .select {
    width: 320px;
    margin-bottom: 10px;
}

#cgu { 
    height: 20em;
    padding: 1em;
    overflow: auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}
#cgu pre {
    font-family: Arial, sans-serif;
}
/**************************************
 * Etape 3 
 * ***********************************/

#avatar_upload_container {
    width: 275px;
    height: 160px;
}

.createblogprofil_adm #avatar_upload_container {
    height: auto;
}

#avatar_upload {
    display: block;
    position: relative;
    width: 275px;
    height: 160px;
    color: #fff;
    background: url(/img/inscription/picto_add.png) 25px 25px no-repeat #1a1a1a;
    border-radius: 3px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.75);
}

#avatar_upload:hover {
    cursor: pointer;
    text-decoration: none;
}

.js #common_photo {
    display: block;
    visibility: hidden;
    height: 0;
}

/* FIX IE upload basic 
#avatar_upload_container #common_photo {
    visibility: visible\9;
    height: auto\9;
    margin-top: 5px\9;
}
*/

#avatar_data {
    margin-top: 5px;
    overflow: hidden;
}

#avatar_data strong {
    padding-right: 5px;
    white-space: nowrap;
}

#avatar_upload span,
#avatar_upload img {
    display: block;
    position: absolute;
}

#avatar_upload span {
    width: 110px;
    line-height: 22px;
    top:  90px;
    left: 25px;
    font-size: 22px;
    font-weight: bold;
}

#avatar_upload img {
    width: 100px;
    height: 100px;
    bottom: 15px;
    right: 15px;
}

#avatar_upload .default {
    width: 132px;
    height: 140px;
    bottom: 0;
}

.createblogprofil_adm #profil_photo,
.createblogprofil_adm #blog_photo  {
    width: 275px;
    margin-top: 1px;
    background: #fff;
}

#forms_blog_profil {
    width: 525px;
}

#form_profil .box_inputs {
    float: left;
    width: 250px;
    margin-right: 15px;
}

#form_profil .last {
    margin-right: 0;
}

#form_profil .box_inputs label {
    width: 60px;
}

#form_profil .box_inputs select {
    width: 165px;
}

/**************************************
 * need confirmation
 * ***********************************/
h2#validation {
    background: url(/img/inscription/validation.jpg) no-repeat left center;
    padding: 0.5em 0 0.5em 40px;
    font-weight: normal;
}
#noconfirmationmail {
    text-align: left !important;
}
#noconfirmationmail input.txt {
    width: 200px;
}

dd.mailOptinSearch { 
    margin-bottom: 0.5em; 
    margin-left: 40%; 
    font-size: 0.9em;
}
* html dd.mailOptinSearch { 
    margin-left: 100px; 
}

/**************************************
 * Colonne de droite
 * ***********************************/
#why-account {
    background: #e6e7fb;
    border: 1px solid #b6d2e0;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 1em;
    margin-bottom: 0.5em;
}
#why-account ul {
    list-style: disc inside;
}
#why-account li {
    padding: 0.9em 0;
}
#why-account li#chat, #why-account li#write, #why-account li#movies {
    padding-left: 62px;
}
#why-account li#creetonblog, #why-account li#creetonprofil, #why-account li#creetonhabillage,
#why-account li#bloguer, #why-account li#profiler, #why-account li#grabberiser {
    padding-left: 45px;
}
#why-account li#chat {
    background: url(/img/icons/talk-big.jpg) left center no-repeat;
}
#why-account li#movies {
    background: url(/img/icons/movie-big.jpg) left center no-repeat;
}
#why-account li#write {
    background: url(/img/icons/write-big.jpg) left center no-repeat;
}
#why-account li#creetonblog {
    background: url(/img/inscription/picto_activerblog.png) left center no-repeat;
}
#why-account li#creetonprofil {
    background: url(/img/inscription/picto_activerprofil.png) left center no-repeat;
}
#why-account li#creetonhabillage {
    background: url(/img/inscription/picto_habillage.png) left center no-repeat;
}
#why-account li#bloguer {
    background: url(/img/inscription/picto_ecrirearticle.png) left center no-repeat;
}
#why-account li#profiler {
    background: url(/img/inscription/picto_ecrireprofil.png) left center no-repeat;
}
#why-account li#grabberiser {
    background: url(/img/inscription/picto_ajoutamis.png) left center no-repeat;
}
/**************************************
 * Colonne de droite // admin
 * ***********************************/
div.resume { 
    padding: 0.5em;
    margin-bottom: 5px;
    background: #DFEDF6;
    border: 1px solid #cacaca;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
}
ul.resume {
    background: #fff;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
}
ul.resume li a.wrap {
    display: block;
    width: 274px;
    overflow: hidden;
}
div.resume h5 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

/**************************************
 * Page login/connexion
 * ***********************************/

#loginbox h3 { 
    margin: 0 0 28px; 
} 
#loginbox li { 
    padding: 0 0 20px; 
    overflow: hidden; 
    zoom: 1; 
} 

#loginbox li label,
#forgottenPassword label {
    float: left;
    width: 140px;
    margin: 5px 20px 0 0;   
    text-align: right;
}

#loginbox li .text,
#forgottenPassword .text {
    float: left;
    width: 289px;
    border: 1px solid #999999;
    padding: 4px;    
}

#loginbox  li .text:focus { 
    border-color: #000; 
} 
#loginbox .extraLogin, 
#loginbox .clearfix { 
    width: 297px; 
    padding: 0 0 20px 160px; 
    font-size: 0.9em; 
} 
#loginbox #falsepseudo { 
    text-align: right; 
} 

#loginbox p.hide { 
    display:none; 
} 
#loginbox .floatleft{ 
    margin:10px 0 0;
} 

#admin-popup #loginbox h3 {
    margin: 0 0 10px;
}

#admin-popup #loginbox  li {
    padding: 0 0 10px;
}

#admin-popup #loginbox  li .text,
#admin-popup #forgottenPassword .text {
    width: 270px; 
}

#admin-popup #loginbox .extraLogin,
#admin-popup #loginbox .clearfix {
    width: auto;
    padding: 0 0 10px 160px;
}

/** Col droite login **/
.login_info {
    margin: 0 0 20px;
    padding: 15px 17px 18px;
    border: 1px solid #ddd;
    background: #f6f6f6;
    text-align: center;
}
.login_info h4 {
    padding: 0 0 10px;
    font-size: 1.5em;
}
.login_info h4 a {
    color: #333;
}
.login_info ul {
    padding: 0 0 5px;
}

.login_info li {
    list-style: inside disc;
    padding: 0 0 5px;
    font-size: 0.9em;
    text-align: left;  
}
/** Col droite login (popup) **/
#admin-popup .comment-edit {
    width: 440px;
    margin: 0 auto;
}
#admin-popup #loginbox h3 {
    font-size: 17px;
}

/******************************************
 * Mot de passe oublié
 * ***************************************/
#forgottenPassword h3 {
    padding: 0 0 15px;
}
#forgottenPassword fieldset {
    margin: 10px 0 20px;
}
#forgottenPassword .floatleft {
    padding:5px 0 0;
}

/******************************************
 * Inscription suite invitation // grabber
 * ***************************************/
#login-invit-left {
    clear: left;
    float: left;
    padding: 0 5px;
    width: 238px;
    height: 225px;
}
#login-invit-left h2 {
    font-size: 1em;
    margin: 15px 0 25px 1.5em;
}
#login-invit-left h2 span {
    font-size: 1.5em;
    color: #2B343D;
}
/*******************************************
 * Captcha
 * ****************************************/
 
.captcha_container label {
    font-size: 14px;
    width: 308px;
	height: 62px;
	margin: 0 0 0 5px;
	float: left;
}
.recaptcha2 label {
    height: 30px;
    width: 100%;
}
.recaptcha2 div {
    clear: both;
}
#recaptcha_widget_div {
    background: #fff;
    clear: both;
}
.captcha_img_container {
    float: left;
}
.captcha_img_container img.captcha_captcha {
    display: block;
    border: 1px solid #ccc;
}
.captcha_img_container a.captcha_refresh {
    background: url(/img/icons/listicos/change.png) left center no-repeat;
    padding-left: 20px;
    position: absolute;
    top: 1em;
    right: 3em;
    font-weight: bold;
}
/* recaptcha */

#recaptcha_widget_div {
    margin-top: 20px;
    padding: 20px 0;
    text-align: center;
    border-radius: 4px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.35);
}
#recaptcha_table {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* subscribe modes */
.hidetext {
    display: inline-block;
    text-indent: -999999px;
    width: 42px;
}

#subscribe_mode {
    float: right;
    position: relative;
    width: 300px;
    margin-top: 100px;
    text-align: center;
    z-index: 0;
    color: #fff;
}
#subscribe_mode ul {
    padding-top: 40px;
}
#subscribe_mode ul li {
    display: inline-block;
    margin: 5px 3px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

#subscribe_mode ul li.google_signin {
    margin: 2px 3px;
}
#subscribe_mode ul li a:hover {
    text-decoration: none;
}

#subscribe_mode .subscribe_fb {
    margin: 0 auto 30px;
}

#subscribe_mode .fb_facepile, #subscribe_mode .google_signin {
    border: 0;
    margin: 0 auto 30px;
    background: none;
}

/* fonds en dégradés */
.subscribe_fb {
    background: #5a72ab; /* Old browsers */
    background: -moz-linear-gradient(top,  #5a72ab 0%, #3d5d9f 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a72ab), color-stop(99%,#3d5d9f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5a72ab 0%,#3d5d9f 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #5a72ab 0%,#3d5d9f 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #5a72ab 0%,#3d5d9f 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a72ab', endColorstr='#3d5d9f',GradientType=0 ); /* IE6-9 */
    border-color: #7e91bd;
}
.subscribe_fb:hover {
    background: #51669a; /* Old browsers */
    background: -moz-linear-gradient(top,  #51669a 0%, #37548f 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51669a), color-stop(99%,#37548f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #51669a 0%,#37548f 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #51669a 0%,#37548f 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #51669a 0%,#37548f 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51669a', endColorstr='#37548f',GradientType=0 ); /* IE6-9 */
    border-color: #7e91bd;
}

.subscribe_twitter {
    background: #2cc4fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #2cc4fd 0%, #02a5e2 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2cc4fd), color-stop(99%,#02a5e2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2cc4fd 0%,#02a5e2 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #2cc4fd 0%,#02a5e2 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #2cc4fd 0%,#02a5e2 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cc4fd', endColorstr='#02a5e2',GradientType=0 ); /* IE6-9 */
    border-color: #80dcff;
}
.subscribe_twitter:hover {
    background: #02abeb; /* Old browsers */
    background: -moz-linear-gradient(top,  #02abeb 0%, #0092c9 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02abeb), color-stop(99%,#0092c9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #02abeb 0%,#0092c9 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #02abeb 0%,#0092c9 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #02abeb 0%,#0092c9 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02abeb', endColorstr='#0092c9',GradientType=0 ); /* IE6-9 */
    border-color: #80dcff;
}

.subscribe_google {
    background: #408afe; /* Old browsers */
    background: -moz-linear-gradient(top,  #408afe 0%, #1a73fe 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#408afe), color-stop(99%,#1a73fe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #408afe 0%,#1a73fe 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #408afe 0%,#1a73fe 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #408afe 0%,#1a73fe 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#408afe', endColorstr='#1a73fe',GradientType=0 ); /* IE6-9 */
    border-color: #72a8fd;
}
.subscribe_google:hover {
    background: #3582fc; /* Old browsers */
    background: -moz-linear-gradient(top,  #3582fc 0%, #0960e7 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3582fc), color-stop(99%,#0960e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #3582fc 0%,#0960e7 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #3582fc 0%,#0960e7 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #3582fc 0%,#0960e7 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3583fc', endColorstr='#0960e7',GradientType=0 ); /* IE6-9 */
    border-color: #72a8fd;
}

.subscribe_live {
    background: #f4f4f4; /* Old browsers */
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #e4e2e2 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(99%,#e4e2e2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#e4e2e2 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#e4e2e2 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #f4f4f4 0%,#e4e2e2 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e4e2e2',GradientType=0 ); /* IE6-9 */
    border-color: #ffffff;
}
.subscribe_live:hover {
    background: #efeeee; /* Old browsers */
    background: -moz-linear-gradient(top,  #efeeee 0%, #aeaeae 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(99%,#aeaeae)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #efeeee 0%,#aeaeae 99%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #efeeee 0%,#aeaeae 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #efeeee 0%,#aeaeae 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efeeee', endColorstr='#aeaeae',GradientType=0 ); /* IE6-9 */
    border-color: #ffffff;
}


/* fonds avec pictos social */
.subscribe_fb a,
.subscribe_twitter a,
.subscribe_google a,
.subscribe_live a {
    display: inline-block;
    padding-left: 50px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background-repeat: no-repeat;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 245px;
    line-height: 44px;
    box-shadow: 0 0 1px rgba(0,0,0,0.75);
    background-image: url(/img/icons/social_icons/sprite_inscription_social2.png?20131031);/* Happy Halloween ! */
}

.subscribe_fb a {
    width: 250px;
    line-height: 43px;
    padding-left: 44px;
    font-size: 1.25em;
}
.subscribe_twitter a {
    background-position: 0 -53px;
}

.subscribe_google a {
    background-position: 0 -98px;
}

.subscribe_live a {
    color: #6a6a6a;
    background-position: -2px -144px;
}

.subscribe_twitter,
.subscribe_google,
.subscribe_live {
    position: relative;
}

.subscribe_twitter:after,
.subscribe_google:after,
.subscribe_live:after {
    content: "";
    display: block;
    height: 44px;
    width: 0;
    position: absolute;
    left: 42px;
    top: 0;
}

.subscribe_twitter:after {
    border-right: 1px solid #2cc4fd;
    border-left: 1px solid #02a5e2;
}

.subscribe_live:after {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #d4d2d2;
}


.fb_iframe_widget iframe {
    left: 0;
}

#subscribe_mode .social_wording {
    display: block;
    position: absolute;
    top: 80px;
    left: -65px;
    font-weight: lighter;
    font-size: 32px;
}

/* Viewer themes */

.viewer,
.viewer_list {
    position: relative;
}

.viewer {
    width: 390px;
    margin: 0 auto;
    padding: 6px;
    background: #1A1A1A;
    border-radius: 3px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.75);
}

.wait,
.fading li {
    position: absolute;
    -webkit-transition: visibility 0.5s, opacity 0.5s ease-in-out;
    -moz-transition: visibility 0.5s, opacity 0.5s ease-in-out;
    -o-transition: visibility 0.5s, opacity 0.5s ease-in-out;
    transition: visibility 0.5s, opacity 0.5s ease-in-out;
}

.viewer_list .fade_out,
.viewer_list .fade_in {
    left: 0;
}

.viewer .wait {
    display: block;
    width: 24px;
    height: 24px;
    top: 44%;
    left: 44%;
    color: #fff;
    text-align: center;
    visibility: visible;
    background: url(/img/loader/loader_white_24.gif) center center no-repeat;
    overflow: hidden;
    text-indent: -9000px;
    border-radius: 2px;
}

.fading li {
    position: absolute;
    top: 0;
    left: 3000px;/* Pour éviter la superposition à l'initialisation */
    opacity: 0;
    visibility: hidden;
}

.viewer_list,
.viewer_list img {
    width: 390px;
    height: 230px;
}

.viewer_list img {
    display: block;
    line-height: 230px;
    color: #fff;
    text-align: center;
    border-radius: 2px;
}

.viewer_list span {
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    visibility: hidden;
}

.viewer_list .fade_out {
    opacity: 0;
    visibility: hidden;
}

.viewer_list .fade_in {
    opacity: 1;
    visibility: visible;
}

.viewer_menu {
    height: 0;
}

.viewer_menu .bt_prev,
.viewer_menu .bt_next {
    display: block;
    position: absolute;
    width: 35px;
    height: 37px;
    top: 40%;
    text-indent: -9000px;
    overflow: hidden;
    outline: none;
    opacity: 0.75;
    -webkit-transition: opacity 0.3s, background-position 0.3s ease-in-out;
    -moz-transition: opacity 0.3s, background-position 0.3s ease-in-out;
    -o-transition: opacity 0.3s, background-position 0.3s ease-in-out;
    transition: opacity 0.3s, background-position 0.3s ease-in-out;
}

.viewer_menu .bt_prev {
    left: -40px;
    background: url(/img/inscription/arrow_left.png) right center no-repeat;
}

.viewer_menu .bt_prev:hover {
    background-position: left center;
    opacity: 1;
}

.viewer_menu .bt_next {
    right: -40px;
    background: url(/img/inscription/arrow_right.png) left center no-repeat;
}

.viewer_menu .bt_next:hover {
    background-position: right center;
    opacity: 1;
}

/* viewer blog + profil */

.blogprofil_viewer .viewer_container {
    float: left;
    width: 48%;
    margin: 0 1%;
}

.blogprofil_viewer .viewer,
.blogprofil_viewer .viewer_list,
.blogprofil_viewer .viewer_list img {
    width: 250px;
}

.blogprofil_viewer .viewer_list,
.blogprofil_viewer .viewer_list img {
    height: 153px;
    line-height: 153px;
}

.blogprofil_viewer .viewer_menu .bt_prev,
.blogprofil_viewer .viewer_menu .bt_next {
    top: 37%;
}

/* Etape 4 */

#providers_list li {
    float: left;
    margin-right: 20px;
}

#subscribe_social_invit li {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    padding: 4px;
    margin: 0 9px 10px 0;
    background-color: #1a1a1a;
    border-radius: 2px;
    text-align: center;
    overflow: hidden;
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

#subscribe_social_invit li:hover {
    background-color: #009AFF;
}

#subscribe_social_invit li.friend_added,
#subscribe_social_invit li.friend_added:hover {
    background-color: #87B201;
}

#subscribe_social_invit li img {
    width: 98px;
    height: 98px;
    border: 1px solid transparent;
    cursor: pointer;
}

#subscribe_social_invit li:hover img,
#subscribe_social_invit li.friend_added img {
    border-color: #1a1a1a;
}

#subscribe_social_invit li.friend_added img,
#subscribe_social_invit li.friend_added:hover .bouton {
    cursor: default;
}

#subscribe_social_invit li .bouton {
    position: absolute;
    display: none;
    width: 70px;
    height: 46px;
    line-height: 46px;
    top: 58px;
    left: 4px;
    padding: 0 0 0 30px;
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    background-position: 6px center;
    border-radius: 0;
}

#subscribe_social_invit li input.bouton {
    width: 100px;
}

#subscribe_social_invit li:hover .bouton {
    display: block;
}

/* Confirmation */

#confirmation {
    margin-top: 50px;
    background: #fff;
    border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

#confirmation p,
#confirmation h2 ,
#confirmation h3 {
    color: #2B343D;
}

#confirmation_choice {
    margin: 20px 50px;
}

#confirmation_choice li {
    float: left;
    position: relative;
    width: 225px;
    height: 260px;
    margin-right: 40px;
    text-align: center;
}

#confirmation_choice li img,
#confirmation_choice li strong {
    display: block;
    margin: 0 auto;
}

#confirmation_choice .last {
    margin-right: 0;
}