/*============================================================================= Account creation : the first page (#user-register-form) Page : /user/register The form's top "steps" are styled here too for the account edition form ========================================================================== */ body.page-user-edit ul.register-steps, body.page-user-register ul.register-steps { list-style: none inside none; display: inline-block; padding: 15px 0 0 0; margin: 0; width: 100%; } body.page-user-register #mandatory_fields, body.page-user-register #cnil_terms { padding: 27px 29px 15px; } body.page-user-edit ul.register-steps li, body.page-user-register ul.register-steps li { display: inline-block; margin-left: 3px; width: 23%; } body.page-user-edit ul.register-steps li.step1, body.page-user-edit ul.register-steps li.step2, body.page-user-edit ul.register-steps li.step3, body.page-user-edit ul.register-steps li.step4, body.page-user-register ul.register-steps li.step1, body.page-user-register ul.register-steps li.step2, body.page-user-register ul.register-steps li.step3, body.page-user-register ul.register-steps li.step4 { color: #CECAC2; text-align: center; } body.page-user-edit ul.register-steps li.current-step, body.page-user-register ul.register-steps li.current-step { color: #E0107C; } body.page-user-edit ul.register-steps li.previous-step { color: #8c7b74; } body.page-user-edit ul.register-steps li.previous-step .step-number, body.page-user-register ul.register-steps li.previous-step .step-number { background: url('../images/validate-green.png') no-repeat left center white; padding-left: 10px; } body.page-user-edit ul.register-steps li .step-number, body.page-user-register ul.register-steps li .step-number { background-color: #FFFFFF; font-size: 0.9em; font-weight: bold; margin: 0 auto; max-width: 95px; padding-left: 5px; } body.page-user-edit ul.register-steps li.step4 .step-number, body.page-user-register ul.register-steps li.step4 .step-number { max-width: 95px; } body.page-user-edit ul.register-steps li .step-description , body.page-user-register ul.register-steps li .step-description { font-size: 1.1em; font-family: Deibi; } body.page-user-edit div.item-list ul.register-steps, body.page-user-register div.item-list ul.register-steps { background: url("../images/bg_dots_line_big.png") 60px 25px no-repeat transparent; } body.page-user-edit div.item-list:after, body.page-user-register div.item-list:after { background: url('../images/form_white_down.png') bottom center no-repeat transparent; bottom: 1px; //content: " "; display: inline-block; height: 24px; left: 466px; position: absolute; top: 375px; width: 26px; z-index: 2; } body.page-user-edit div.item-list:after, body.page-user-register div.item-list:after { top: 52px; } body.page-user-register div.item-list { top: 12px; background: url("../images/form_arrow_0.png") no-repeat center 0 white; margin: 0 auto 0 auto ; position: relative; } body.page-user-edit div.item-list { background: url("../images/form_arrow_0.png") no-repeat center 0 white; margin: 7px auto; position: relative; } body.page-user-edit .item-list { background-color: #FFF; padding: 0; min-width: 940px; } #user-register-form { color: #826F68; min-width: 942px; margin-bottom: 0; margin-top: 28px; font-weight: normal; .form-item { margin: 20px 0; .form-item { margin: 0; } } } #user-register-form .newsletter { text-align: center; } #user-register-form .newsletter { text-align: center; } #user-register-form .container-inline-date .date-padding{ padding: 0; } #user-register-form .confirm-parent, #user-register-form .password-parent { width: auto; } /*user_user_form_group_user_account #user-register-form .group-user-account*/ #user-register-form .group-user-you:after, #user-register-form .group-user-account:after, #user-register-form .group-your-children:after { background: url('../images/form_white_down.png') bottom center no-repeat transparent; content: " "; height: 24px; left: 466px; position: relative; display: inline-block; top: 18px; width: 26px; z-index: 2; } #user-register-form fieldset.captcha div.form-item { margin-top: 0; } #user-register-form fieldset.captcha:before { background: url('../images/form_white_down.png') bottom center no-repeat transparent; content: " "; height: 24px; position: relative; display: inline-block; width: 26px; z-index: 2; top: -27px; left: 467px; } #user-register-form .group-user-you { background: url("../images/form_arrow_5.png") no-repeat center -1px white; } #user-register-form .group-user-account { background: url("../images/form_arrow_5.png") no-repeat center -1px white; margin-top: 16px; } #user-register-form .group-your-children { background: url("../images/form_arrow_5.png") no-repeat center -1px white; margin-top: 16px; } #user-register-form .group-user-newsletters { background: url("../images/form_arrow_5.png") no-repeat center -1px white; height: auto; overflow: hidden; margin-top: 16px; } #user-register-form { .group-user-you, .group-user-account, .group-user-newsletters, .group-your-children { h3, h2 { margin-top: 15px; padding: 5px; position: relative; top: -6px; text-transform: uppercase; margin-left: 20px; text-align: center; line-height: 1em; span { font-weight: normal; font-size: 13px; line-height: 13px; } } } .group-user-you { h3, h2 { color: white; background-color: #DF117D; width: 45px; &:before { content: " "; background: url('../images/pli_form.png') bottom center no-repeat transparent; font-weight: normal; width: 6px; height: 6px; position: absolute; top: 0; left: 55px; } } } } #user-register-form .group-user-account h3 { color: white; background-color: #ABC22D; width: 115px; } #user-register-form .group-user-account h3:before { content: " "; background: url('../images/pli_form.png') bottom center no-repeat transparent; width: 6px; height: 6px; position: absolute; top: 0; left: 125px; } #user-register-form .group-your-children .group-user-birth-date-children { } #user-register-form .group-your-children h3 { color: white; background-color: #F1B435; width: 94px; } #user-register-form .group-your-children h3:before { content: " "; background: url('../images/pli_form.png') bottom center no-repeat transparent; width: 6px; height: 6px; position: absolute; top: 0; left: 104px; } #user-register-form .group-user-newsletters h3 { color: white; background-color: #1f7dbd; max-width: 310px; padding: 5px; position: absolute; text-transform: uppercase; margin-left: 20px; text-align: center; margin-top: 0; } #user-register-form .group-user-newsletters h3:before { content: " "; background: url('../images/pli_form.png') bottom center no-repeat transparent; width: 6px; height: 6px; position: absolute; top: 0; left: 320px; } #user-register-form .group-user-newsletters { .newsletter h3 { background: none; margin: 0px 0 0 16px; max-width: 100%; padding: 0; &:before, &:after { display: none; } } .form-item-field-user-newsletter-recipe-und, .form-item-field-user-newsletter-brand-und { p { margin-top: 260px; overflow: hidden; } } } #user-register-form .group-user-birth-date-children .description { margin-left: -117px; margin-top: -27px; } #user-register-form .group-your-children .field-type-datetime div > .form-item > label { left: -410px; top: 20px; } #user-register-form .group-user-birth-date-children .date-date, #user-register-form .group-user-birth-date-children .container-inline-date, #user-register-form .group-user-you .form-radios, #user-register-form .group-user-you .form-radios .form-type-radio, #user-register-form .group-user-you .container-inline-date, #user-register-form .group-user-account .form-type-password, #user-register-form .group-user-newsletters .form-type-radio { display: inline-block; } #user-register-form .group-user-you input[type=text], #user-register-form .group-user-birth-date-children input[type=text], #user-register-form .group-user-account input[type=text], #user-register-form .group-user-account input[type=password], #user-register-form .captcha input[type=text] { color: #8C7B74; max-width: 255px; border: 2px solid #CAC6C3; border-radius: 0; height: 33px; } #user-register-form .group-user-you input#edit-field-user-birth-date-und-0-value-date { margin-left: 3px; } #user-register-form .group-user-you input#edit-field-user-birth-date-und-0-value-date, #user-register-form .group-user-birth-date-children input[type=text] { max-width: 115px; } body.page-user-register #user-register-form .field-name-field-user-birth-date { position: relative; } body.page-user-register #user-register-form .field-name-field-user-birth-date .form-item .description { float: left; } body.page-user-register #user-register-form .field-name-field-user-birth-date .form-item input.date-clear { padding-left: 5px; padding-bottom: 3px; } body.page-user-register #user-register-form .field-name-field-user-birth-date .form-item input.date-clear.valid { padding: 5px; padding-bottom: 8px; } body.page-user-register #user-register-form .field-name-field-user-birth-date .form-item div.error { margin-left: 3px; margin-bottom: -6px; float: left; position: absolute; } body.page-user-register #user-register-form .field-name-field-user-birth-date .form-item div.error + .description { margin-bottom: 3px; } #user-register-form .group-user-you .form-type-radios label:first-child, #user-register-form .form-type-textfield label, #user-register-form .form-type-password label, #user-register-form .group-user-you .form-type-date-combo label, #user-register-form #edit-field-user-child-number .form-type-select label, #user-register-form .group-user-birth-date-children label, #user-register-form .form-type-password.form-item-pass-pass2 label { display: inline-block; margin-left: 290px; min-width: 138px; font-weight: normal; font-size: 14px; } #user-register-form #user-user-form-group-user-account #edit-account > div { margin-bottom: 10px; } #user-register-form .form-type-password.form-item-pass-pass2 { position: relative; top: -1px; } #user-register-form .form-type-password.form-item-pass-pass2 label { margin-right: 18px; position: relative; top: 20px; min-width: 120px; width: 120px; } #user-register-form #user-user-form-group-user-account .form-item-mail { top: -15px; position: relative; } #user-register-form #edit-field-user-child-number .form-type-select label { float: left; width: 290px; } #user-register-form .group-your-children .group-user-birth-date-children h3:before{ content: ''; background-image: none; } #user-profile-form #edit-field-user-child-number .select-clv-style, #user-register-form #edit-field-user-child-number .select-clv-style { float: left; margin-top: 3px; } //Style for selects on mobile without chosen support #user-profile-form #edit-field-user-child-number select.mobile-select, #user-register-form #edit-field-user-child-number select.mobile-select { position: relative !important; right: 0 !important; width: 140px; display: inline-block; vertical-align: middle; color: #999; border: solid 3px #CAC6C3; text-decoration: none; white-space: nowrap; font-size: 16px; border-radius: 0; height: 34px; line-height: 1; padding-left: 9px; background: url(/sites/all/themes/croquonslavie/images/select_button_blue_chosen.png) no-repeat right white; -webkit-appearance: none; } #user-register-form .form-type-date-combo label { position: relative; top: 0; } #user-register-form .date-no-float { max-width: 420px; } #user-register-form .group-user-you .form-radios .option { margin-right: 30px; } #user-register-form .form-type-password { position: relative; width: 100%; } #user-register-form .password-strength { position: absolute; top: 0; right: 10px; font-size: 12px; margin-left: 60px; margin-top: -10px; } #user-register-form div.password-confirm { float: right; font-size: 13px; margin-top: 17px; margin-left: 5px; //max-width: 12em; visibility: hidden; } #user-register-form #user-user-form-group-user-newsletters h3:after { content: " "; background: url('../images/pli_form.png') bottom center no-repeat transparent; width: 6px; height: 6px; position: absolute; // is to go with the overflow of parent top: 0; margin-left: 5px; } #user-register-form #user-user-form-group-user-newsletters h3:before { background: url('../images/croqs130_big_orange.png') no-repeat center top white; content: " "; display: inline-block; height: 95px; left: 793px; top: 20px; width: 95px; } #user-register-form { #edit-field-user-newsletter-partners, #edit-field-user-newsletter-recipe, #edit-field-user-newsletter-brand { display: block; float: left; min-width: 880px; margin: 19px 30px 0 40px; padding: 0; label { font-weight: normal; font-size: 14px; &:first-child { float: left; width: 620px; } } div { margin: 0 5px; } &-und { float: right; margin-right: 20px; position: relative; top: 5px; } } #edit-field-user-newsletter-partners { margin-bottom: 10px; } } #user-register-form fieldset.captcha { background-color: white; top: 0; margin: 0; background: url("../images/form_arrow_5.png") no-repeat center -1px white; position: relative; padding: 0; top: 4px; } #user-register-form fieldset.captcha .fieldset-wrapper div:first-child { display: none; } #user-register-form fieldset.captcha legend { display: none; } #user-register-form div #edit-actions { padding-bottom: 5px; background-color: white; border-bottom: 1px dotted #826F68; } #user-register-form .fieldset-wrapper label { margin-left: 0; } #user-register-form input[type=submit] { background: url("../images/arrow_right_white.png") no-repeat 130px center #E0117D; border: 0 none; color: #FFFFFF; height: 31px; margin: 0 20px 0 431px; padding: 8px 10px; text-align: center; min-width: 164px } #user-register-form .captcha label { display: none; } #user-register-form .captcha input[type=text] { margin-top: 10px; } #user-register-form .captcha .description { margin: 5px 10px 5px 45px;; width: 200px; } #user-register-form .captcha .fieldset-wrapper { margin: 0 ; } #user-register-form fieldset.captcha img { float: right; margin-right: 100px; margin-top: -10px; } body.page-user-register .block-ft-common-user { display: none; } #user-register-form .field-name-field-user-birth-date .form-item .description { margin-left: -138px; margin-top: -18px; } #user-register-form #user-user-form-group-user-birth-date-children h3 { display: none; } /* IE correction */ #user-register-form .field-name-field-user-birth-date label { float: left; } /* Margin differences between logged, not logged & the steps */ body.page-user-register #user-register-form fieldset.captcha { top: 0; height: 110px; margin-top: 15px; padding-top: 1px; } body.page-user-register #user-register-form div #edit-actions { margin-top: 0; margin-bottom: 0; border: 0; } body.page-user-register #user-register-form .form-required { color: #8C7B74; } #edit-field-user-title-und .form-item *.error { border:none 0 !important; } /*small fb block in register*/ #user-register-form .group-user-you #fb-login { background: url("../images/inscript_win_time_fb.png") no-repeat scroll center center rgba(0, 0, 0, 0); float: right; height: 100px; padding-right: 35px; width: 185px; } #user-register-form .group-user-you #fb-login .fb_iframe_widget span { height: 22px; left: 17px; top: 96px; vertical-align: bottom; width: 89px; } #user-user-form-group-user-third-step-form { margin-top: 20px; //margin-bottom: -20px; } #user-user-form-group-user-second-step-form { margin-top: 20px; } #user-profile-form #user-user-form-group-user-first-step-form[style*='none'] ~ #user-user-form-group-user-second-step-form { margin-top: 40px; } #user-profile-form #user-user-form-group-user-second-step-form[style*='none'] ~ #user-user-form-group-user-third-step-form { margin-top: 40px; } #user-profile-form #user-user-form-group-user-third-step-form[style*='none'] ~ #user-user-form-group-user-fourth-step-form { margin-top: 40px; } #edit-actions .earn-croqs{ z-index: 99; background: url("/sites/all/themes/croquonslavie/images/croqs_medium_orange.png") no-repeat scroll 2px 3px rgba(0, 0, 0, 0); color: #ffffff; display: inline-block; font-size: 14px; height: 53px; line-height: 1.01em; padding-top: 15px; position: relative; text-align: center; white-space: normal; width: 54px; } #user-register-form { .form-item-field-user-birth-date-und-0-value { margin-left: 3px; .select-clv-style { margin-right: 5px; } } #field-user-birth-date-add-more-wrapper { .form-item { margin-bottom: -3px; input[type=text] { margin-left: 3px; width: 206px; } } } #field-user-first-name-add-more-wrapper { > .form-item { margin-top: 16px; } } #edit-field-user-title { margin-top: -25px; > .form-item { margin-bottom: 18px; } } }