Mega series

/* ---------------------------------------------------------------------- * Filename: login.css * Description: CSS file for login and registration styling. * Website: http://www.smallworlds.com * Authors: Weber Li, Matt Tatnell ---------------------------------------------------------------------- */ /* Base Styles ---------------------------------------------------------------------- */ div#login_registration { font-size: 12px; position: relative; } div#login_registration form { margin: 0px; position: relative; } /* Form Elements ---------------------------------------------------------------------- */ div#login_registration input[type="text"], div#login_registration input[type="email"], div#login_registration input[type="password"], div#login_registration textarea { width: 100%; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid #03DDF9; line-height: 26px; } div#login_registration input[type="text"]:focus, div#login_registration input[type="email"]:focus, div#login_registration input[type="password"]:focus, div#login_registration textarea:focus { width: 100%; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: 1px solid #03DDF9; box-shadow: 0px 0px 5px rgba(3,221,249,.7); line-height: 26px; } div#login_registration input[type="text"].error, div#login_registration input[type="email"].error, div#login_registration input[type="password"].error, div#login_registration textarea.error { border: 1px solid #F60101; line-height: 26px; } div#login_registration input.half { width: 130px; } div#login_registration input.full { width: 275px; display: block; } input.info { background-image: url('../img/login/icon_info.png'); background-repeat: no-repeat; background-position: 6px center; } input.email { background-image: url('../img/login/icon_email.png'); background-repeat: no-repeat; background-position: 6px center; } input.password { background-image: url('../img/login/icon_password.png'); background-repeat: no-repeat; background-position: 6px center; } select { height: 30px !important; border: 1px solid #03DDF9; } select.full { width: 287px; display: block; } /* Login Styles ---------------------------------------------------------------------- */ /** Input field sizes. */ #frm_login .input { width: 248px; height: 36px; } #frm_recover_password .input { width: 201px; height: 38px; } /** Play button. */ #frm_login input[type='submit'] { background: url('../img/login/button_play.png') no-repeat; width: 248px; height: 86px; border: none; } #frm_login input[type='submit']:hover { cursor: pointer; background-position: center center; background-color: transparent; } #frm_login input[type='submit']:active { background-position: center bottom; } /* Inline Login Styles ---------------------------------------------------------------------- */ /** Main container. */ div#login_registration.login_inline { margin-left: auto; max-width: 665px; } /** Form element sizes. */ #frm_login_inline .input { /*width: 171px;*/ height: 38px; } #frm_recover_password .input { width: 201px; } #frm_login_inline input[type='submit'], #frm_recover_password input[type='submit'] { padding: 0px 15px; height: 38px; } /* Registration Styles ---------------------------------------------------------------------- */ /** Input field sizes. */ #frm_register .input-half { display: inline-block; width: 49%; height: 35px; } #frm_register .input { width: 100%; height: 35px; } select#mob { width: 65px; } select#dob { width: 51px; } select#yob { width: 65px; } /** COPPA badge. */ div#coppa_badge { background: url('../img/login/badge_age.jpg') no-repeat; width: 49px; height: 49px; position: absolute; left: 211px; top: 273px; } /** Gender selector. */ div#gender_select div.gender_outer { display: inline-block; width: 49%; background: #F3F3F3; } div#gender_select div.gender_outer.selected { background: #FFFEF1 url('../img/login/badge_check.png') no-repeat 95% 3%; border-color: #03DDF9 !important; } div#gender_select div.male, div#gender_select div.female { height: 200px; } div#gender_select div.male { background: url('../img/login/avatar_male.png'); background-repeat: no-repeat; background-position: center 0px; background-origin: content-box; } div#gender_select div.female { background: url('../img/login/avatar_female.png'); background-repeat: no-repeat; background-position: center 0px; background-origin: content-box; } div#gender_select div.male.selected, div#gender_select div.female.selected { background-position: center bottom; } div#gender_select div.male.selected { background-image: url('../img/login/avatar_male.png'); } div#gender_select div.female.selected { background-image: url('../img/login/avatar_female.png'); } div#gender_select div.male:hover, div#gender_select div.female:hover { cursor: pointer } /** Play button. */ #frm_register input[type='submit'] { background: url('../img/login/button_play.png') no-repeat; width: 248px; height: 86px; border: none; } #frm_register input[type='submit']:hover { cursor: pointer; background-position: center center; background-color: transparent; } #frm_register input[type='submit']:active { background-position: center bottom; } /* Facebook details overlay. */ div#facebook_overlay { display: block; position: absolute; top: 19px; bottom: 138px; left: -3px; right: 339px; background-color: black; border: 1px solid; z-index: 99; opacity: 0.3; filter: alpha(opacity=30); text-align: center; } div#facebook_overlay span { line-height: 262px; } /** Congratulations image. */ div#congratulations { background: url('../img/login/image_congratulations.jpg') no-repeat; width: 462px; height: 448px; } div#congratulations #btn_play { width: 265px; height: 53px; border-radius: 26px; margin: auto; cursor: pointer; position: relative; top: 315px; } div#congratulations div:hover { background-color: rgba(255, 255, 255, 0.2); } /* Create Avatar Styles ---------------------------------------------------------------------- */ #frm_avatar { width: 305px; } /** Input field sizes. */ #frm_avatar .input-half { display: inline-block; width: 49%; height: 35px; } /* Facebook Button Styles ---------------------------------------------------------------------- */ /** Login with Facebook button. */ div.btn_fb_login { background: url('../img/login/button_fb_login.gif') no-repeat; width: 107px; height: 38px; } div.btn_fb_signin { background: url('../img/login/button_fb_signin.gif') no-repeat; width: 223px; height: 38px; } div.btn_fb_signup { background: url('../img/login/button_fb_signup.png') no-repeat; width: 233px; height: 38px; } div.btn_fb_signin div, div.btn_fb_signup div { width: 100%; height: 100%; } div.btn_fb_signin div:hover, div.btn_fb_signup div:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.1); } /* Loading Overlay Styles ---------------------------------------------------------------------- */ /* Lightbox loading overlay. */ div#loading_overlay { display: none; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: black; z-index: 99; opacity: 0.3; filter: alpha(opacity=30); text-align: center; } div#loading_overlay img#login_progress { position: absolute; top: 50%; left: 50%; } div#loading_overlay img#register_progress { position: absolute; bottom: 108px; left: 260px; } div#loading_overlay img#password_progress { position: absolute; top: 138px; left: 150px; } div#loading_overlay img#create_progress { position: absolute; top: 288px; left: 10px; } /* Error Styles ---------------------------------------------------------------------- */ /* Error popup. */ div#login_registration div.popup_error { display: none; position: absolute; z-index: 1000; width: 65%; top: 35%; left: 13%; text-align: center; padding: 20px 15px; border: 4px solid #ffabab; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #fffef0; } div.password_recovery div.popup_error { top: 14% !important; } div#login_registration div.popup_error button { display: block; margin: 20px auto 0px auto; width: 80px; } /* Validation errors. */ div.validation_error { display: inline-block; position: absolute; z-index: 99; } div.validation_error .box { display: inline-block; min-height: 9px; padding: 6px 7px; border: 1px solid #D20606; border-top-style: none; white-space: nowrap; color: white; background-color: #F40C0C; } div.validation_error .box a { color: white; text-decoration: underline; } div.validation_error.right .box { margin-left: 7px; } div.validation_error.bottom .box, div.validation_error.bottom_right .box { margin-top: 7px; } div.validation_error.left .box { margin-right: 7px; } div.validation_error .arrow { width: 1px; position: absolute; } div.validation_error.right .arrow { top: 7px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #F40C0C } div.validation_error.bottom .arrow { left: 4px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #F40C0C } div.validation_error.bottom_right .arrow { right: 4px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #F40C0C } div.validation_error.left .arrow { right: 0px; top: 7px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #F40C0C }