html, body { height: 100%; } body { background-color: #f5f5f5; } form { width: 100%; max-width: 400px; padding: 15px; margin: 0 auto; display: block; } form .checkbox { font-weight: 400; } form .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } form .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .registerSection { display: inline-block; } .form-signup { display: none; } .form-signup input[type="email"] { margin-bottom: 20px; } .form-signup #inputPasswordSignUp { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signup #inputPasswordSignUpRepeat { margin-bottom: 20px; border-top-left-radius: 0; border-top-right-radius: 0; } #pwdContainer { position: relative; } #passwordInfo { position: absolute; top:0px; left:400px; min-width: 300px; border: 1px solid silver; border-radius: 3px; background-color: white; font-size: 14px; padding: 10px; min-height: 88px; box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.2); display: none; } meter { margin: 10px auto 1em; width: 100%; height: 0.5em; } /* Webkit based browsers */ meter[value="1"]::-webkit-meter-optimum-value { background: red; } meter[value="2"]::-webkit-meter-optimum-value { background: yellow; } meter[value="3"]::-webkit-meter-optimum-value { background: orange; } meter[value="4"]::-webkit-meter-optimum-value { background: green; } /* Gecko based browsers */ meter[value="1"]::-moz-meter-bar { background: red; } meter[value="2"]::-moz-meter-bar { background: yellow; } meter[value="3"]::-moz-meter-bar { background: orange; } meter[value="4"]::-moz-meter-bar { background: green; } p[id^="pwdStrength"] { display:none; } #pwdStrengthTextHelper { word-wrap: none; white-space: nowrap; text-align: left; }