/* tiptip css - version 1.4 */

.tiptip {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}

.tiptip .content {
	font-size: 11px;
	color: black;
	border: 2px solid #aaa;
	padding: 4px 8px;
	background-color: #f3f3f3;
	background: -moz-linear-gradient(100% 100% 90deg, #dcdcdc, #ededed);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#dcdcdc));
}

.tiptip .content .field {   
    
}
    .tiptip .content .field label {
        width: 90px; 
        display: block;
        color: #666;
        float: left;        
        font-size: 11px;
        padding: 0px;
        padding-left: 3px;
        margin: 0;
        line-height: 13px;
    }
    .tiptip .content .field span {
        line-height: 13px;
        font-size: 11px;
        color: black;
    }

/* make space for the border */
.tiptip.tip_top {
	padding-bottom: 5px;
}
.tiptip.tip_bottom {
	padding-top: 5px;
}
.tiptip.tip_right {
	padding-left: 5px;
}
.tiptip.tip_left {
	padding-right: 5px;
}

/* the arrow is made with a border (it's a trick) */
.tiptip .arrow,
.tiptip .arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

/* outside border of arrow */
.tiptip.tip_top .arrow {
	border-top-color: white;
}
.tiptip.tip_bottom .arrow {
	border-bottom-color: white;
}
.tiptip.tip_right .arrow {
	border-right-color: white;
}
.tiptip.tip_left .arrow {
	border-left-color: white;
}

/* inside color of arrow */
.tiptip.tip_top .arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: #aaa;
}
.tiptip.tip_bottom .arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: #aaa;
}
.tiptip.tip_right .arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: #aaa;
}
.tiptip.tip_left .arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: #aaa;
}

/* styles */

.tiptip.error .content {
	color: white;
	border: 1px solid white;
	background-color: red;
}
.tiptip.error.tip_right .arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: red;
}


.tiptip.tiptip-validation-error .content {
    background: white;
    color: black;
    border: 1px solid orange;
}
.tiptip.tiptip-validation-error.tip_right .arrow_inner
{
	border-right-color: orange;
}
.tiptip.tiptip-validation-error.tip_left .arrow_inner
{
	border-left-color: orange;
}
.tiptip.tiptip-validation-error.tip_top .arrow_inner
{
	border-top-color: orange;
}
.tiptip.tiptip-validation-error.tip_bottom .arrow_inner
{
	border-bottom-color: orange;
}

.tiptip.error.tip_top .arrow { border-top-color: white; }
.tiptip.error.tip_bottom .arrow { border-bottom-color: white; }
.tiptip.error.tip_right .arrow { border-right-color: white; }
.tiptip.error.tip_left .arrow { border-left-color: white; }

.tiptip.error.tip_top .arrow_inner { border-top-color: red; }
.tiptip.error.tip_bottom .arrow_inner { border-bottom-color: red; }
.tiptip.error.tip_right .arrow_inner { border-right-color: red; }
.tiptip.error.tip_left .arrow_inner { border-left-color: red; }


.tiptip.warning .content {
	color: red;
	border: 1px solid red;
	background-color: orange;
}

.tiptip.warning.tip_top .arrow { border-top-color: red; }
.tiptip.warning.tip_bottom .arrow { border-bottom-color: red; }
.tiptip.warning.tip_right .arrow { border-right-color: red; }
.tiptip.warning.tip_left .arrow { border-left-color: red; }

.tiptip.warning.tip_top .arrow_inner { border-top-color: orange; }
.tiptip.warning.tip_bottom .arrow_inner { border-bottom-color: orange; }
.tiptip.warning.tip_right .arrow_inner { border-right-color: orange; }
.tiptip.warning.tip_left .arrow_inner { border-left-color: orange; }