#pwdscore { color: #000; font-size: 85%; position:absolute; text-align: center; width: 220px; z-index: 10; } #pwdscore { font-weight: bold; } #pwdscorebar { background-image: url(bg_strength_gradient.jpg); background-repeat: no-repeat; background-position: 0 0; position:absolute; width: 220px; z-index: 0; } #pwdscorebarBorder { background: whiteSmoke; border: 1px #000 solid; height: 16px; margin: 2px; width: 218px; } #pswd_info { position:absolute; width:250px; padding:15px; background:#fefefe; font-size:.875em; border-radius:5px; box-shadow:0 1px 3px #ccc; border:1px solid #ddd; display:none; } #pswd_info h4 { margin:0 0 10px 0; padding:0; font-weight:normal; } #pswd_info::before { content: "\25B2"; position:absolute; top:-12px; left:45%; font-size:14px; line-height:14px; color:#ddd; text-shadow:none; display:block; } .invalid { background:url(cross.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#ec3f41; } .valid { background:url(accept.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#3a7d34; }