/*for inline err such as with calc*/
.inlineErrMsg {
    color: red;
    font-style: italic;
    font-weight: bold;
    font-size: 0.5em;
    vertical-align: top;
}

.text-error {
    color: red;
    font-weight: bold;
    font-style: italic;
}

.text-success {
    color: #87b15a;
    font-weight:bold;
    font-style: italic;
}

.errorNote {
    background: none repeat scroll 0 0 #FF0000;
    border-bottom: 1px dashed #FFFFFF;
    font-family: Helvetica,sans-serif;
    font-size: 1.4em;
    font-style: italic;
    margin-bottom: 20px;
}

.errorNote ul {
    background: none repeat scroll 0 0 #FF0000;
    display: block;
    float: left;
    list-style: none outside none;
    padding: 0;
}

/*have this relative and then the aside positioned
abs relative to the errWrapper*/
.errWrapper {
    position:relative;
}

.errWrapper > aside{
    position:absolute;
    right:101%;
    background: red;
    color:white;
    border:1px solid white;
    border-radius: 5px;
    padding:5px;
    width: 160px;
    opacity: 0.9;
    z-index: 2000;
}

.errWrapper > aside.right{
    left:101%;
    right: auto;
}

/*Use rendering order of pseudo element:
 you can use the :before element to make a white tooltip then the
 :after element to make a (slightly smaller and moved vertically slighty)
red tooltip that then gets rendered on top*/
.errWrapper > aside:before,aside:after {
    /*bigger triangle for border*/
    content: ".";
    position: absolute;
    color:transparent;
    top:5px; /*pos of big triangle*/
    width: 0;
    height: 0;
    left:100%; /*overlay bigger triangle at this pos*/
    border-left: 15px solid white; /*tip bord color*/
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent; 
}

.errWrapper > aside.right:before,aside.right:after {
    /*bigger triangle for border*/
    right:100%; /*overlay bigger triangle at this pos*/
    left:auto;
    border-right: 15px solid white; /*tip bord color*/
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent; 
    border-left:0;
}
 
.errWrapper > aside:after {
    top:7px; /*tip pos*/
    border-left: 13px solid red; /*top color*/
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent; /*tip color*/
}

.errWrapper > aside.right:after {
    border-left: 0;
    border-right: 13px solid red; /*top color*/
}

.errWrapper ul {
    background: none repeat scroll 0 0 #FF0000;
    display: block;
    float: left;
    list-style: none outside none;
    padding: 0;
}