/*Speech Bubble CSS follows*/
/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

Last modified: 2012-05-21 by Kurt V. Lee
-Customized to WebOps standards: Removed unused speech(callouts) & customized color -kvl-


Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher
------------------------------------------ */

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:5px solid #116bb0;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
    margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
    margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
    border-style:solid;
    border-color:#116bb0 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
    top:-20px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
    top:-13px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
    top:10px; /* controls vertical position */
    bottom:auto;
    left:-30px; /* value = - border-left-width - border-right-width */
    border-width:15px 30px 15px 0;
    border-color:transparent #116bb0;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 21px 9px 0;
    border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
    top:10px; /* controls vertical position */
    bottom:auto;
    left:auto;
    right:-30px; /* value = - border-left-width - border-right-width */
    border-width:15px 0 15px 30px;
    border-color:transparent #116bb0;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:auto;
    right:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 0 9px 21px;
    border-color:transparent #fff;
}

/*Password Strength Meter CSS Follows*/
#pswdStrengthFeedbackDiv {
    display: none;
    float:right;
    position: fixed;
    left: 750px;
    top: 203px;
    z-index: 9002;
}

.hide {
    display: none;
}

.pwdMeter table {
    background: #345;
    margin-bottom: 10px;
}

.pwdMeter td {
    background: #eee;
    text-align: left;
    vertical-align: top;
}

.pwdMeter th {
    background: #456;
    color: #fff;
    text-align: left;
    vertical-align: top;
}

.txtCenter {
    text-align: center;
}

.pwdMeter div.exceed {
    background-image: url(../images/ps/img_status_exceed.png);
}

.pwdMeter div.fail {
    background-image: url(../images/ps/img_status_fail.png);
}

.pwdMeter div.pass {
    background-image: url(../images/ps/img_status_pass.png);
}

.pwdMeter div.warn {
    background-image: url(../images/ps/img_status_warn.png);
}

.pwdMeter div.fail, div.pass, div.exceed, div.warn {
    background-repeat: no-repeat;
    background-position: left top;
    height: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 16px;
}

.pwdMeter td.exceed, td.fail, td.pass, td.warn {
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.pwdMeter td.exceed {
    background: #1C60A4;
}

.pwdMeter td.fail {
    background: #C00;
}

.pwdMeter td.pass {
    background: #093;
}

.pwdMeter td.warn {
    background: #f60;
}

.pwdMeter div.boxMinus, div.boxPlus {
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 2px;
    text-align: left;
    white-space: nowrap;
}

#score {
    color: #000;
    font-size: 85%;
    position: absolute;
    text-align: center;
    width: 100px;
    z-index: 10;
}

#score, #rating, #standards {
    font-weight: bold;
}

#scorebar {
    background-image: url(../images/ps/bg_strength_gradient.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 100px;
    z-index: 0;
}

#scorebarBorder {
    background: #333;
    border: 1px #000 solid;
    height: 16px;
    margin-bottom: 2px;
    width: 100px;
}