/*
 * @author: Johan Voeten - johan@procurios.nl
 * @about: 	This file defines the default layout of the ProBase Password Strength checker
 */

/**
 * 	show/hide password field container
 */

.has-js .psc-show-password {
	display: block;
}

/** By default hide the toggle elem. Force it to be hidden in browsers that don't support changing type values with JS */
.psc-show-password,
.ie8 .psc-show-password,
.ie7 .psc-show-password,
.ie6 .psc-show-password {
	display: none;
	margin: 0.5em 0;
}

/**
 * 	show/hide password text checkbox
 */

.psc-show-password input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
}

/**
 * 	show/hide password text label
 */

.psc-show-password label.field {
	float: none;
	display: inline-block;
	width: auto;
	margin: 0;
    padding: 0 0 0 5px;
    font-weight: normal;
    vertical-align: middle;
}

/**
 * 	password strength input container
 */

.psc-pi-strength {
	position: relative;
	display: inline-block;
	*display: inline;
	margin-left: 10px;
	border: none;
	white-space: nowrap;
	color: #333;
	background: #e9e9e9;
}

.psc-pi-strength input {
	position: relative;
	margin-bottom: 0;
	margin-left: -10px;
	outline: none;
	vertical-align: middle;
	z-index: 20;
}

/**
 * 	password strength element
 */

.psc-password-strength-weak,
.psc-password-strength-fair,
.psc-password-strength-strong,
.psc-password-strength-verystrong {
	display: inline-block;
	*display: inline;
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.psc-password-strength-weak {
	border-right: 0.2em solid #ff4d4d;
}

.psc-password-strength-fair {
	border-right: 0.2em solid #ffa366;
}

.psc-password-strength-strong {
	border-right: 0.2em solid #ffdb00;
}

.psc-password-strength-verystrong {
	border-right: 0.2em solid #09da0d;
}

.psc-password-strength-weak:hover,
.psc-password-strength-fair:hover,
.psc-password-strength-strong:hover,
.psc-password-strength-verystrong:hover {
	cursor: help;
	background: #e5e5e5;
}

/**
 * 	strength text element
 */

.psc-pi-strength .psc-ps-text {
	display: inline-block;
	padding: 0;
	text-indent: -70px;
	border-right: 0;
	font-size: 12px;
	font-weight: normal;
	vertical-align: middle;
	-webkit-transition: text-indent linear 0.2s, padding linear 0.2s, width linear 0.2s;
	-moz-transition: text-indent linear 0.2s, padding linear 0.2s, width linear 0.2s;
	transition: text-indent linear 0.2s, padding linear 0.2s, width linear 0.2s;
}

.psc-password-strength-weak .psc-ps-text,
.psc-password-strength-fair .psc-ps-text,
.psc-password-strength-strong .psc-ps-text,
.psc-password-strength-verystrong .psc-ps-text {
	padding: 0 1em;
	text-indent: 0;
	-webkit-transition: text-indent linear 0.2s, padding linear 0.2s, width linear 0.2s;
	-moz-transition: text-indent linear 0.2s, padding linear 0.2s, width linear 0.2s;
	transition: text-indent linear 0.2s, padding linear 0.2s, width linear 0.2s;
}

.psc-password-repeat span,
span.psc-password-information {
	display: block;
	padding: 1ex 0 0.2ex 0;
	color: #5f5f5f;
}

.psc-showStrength:focus {
	outline: none;
}

.psc-pi-strength .pbuic-content-bubble {
	right: -75px;
	width: 200px;
}

.psc-pi-strength .pbuic-content-bubble p {
	margin: 0;
	padding: 3px 5px;
	text-shadow: none;
	white-space: normal;
	font-weight: normal;
}

/**
 * 	styling for the inpunt field and text message when invalid
 */

.psc-invalid input.proFormText:hover,
.psc-invalid input.proFormText:focus,
.psc-invalid input[type='text'],
.psc-invalid input[type='password'],
.psc-invalid input[type='text']:hover,
.psc-invalid input[type='password']:hover,
.psc-invalid input[type='text']:focus,
.psc-invalid input[type='password']:focus {
	background-color: #fee;
}

.psc-password-repeat .pbuic-pr-no-match {
	color: #f00;
}