/*
 Rounded rectangle markup:
   <div class="f-tip">
        <div class="f-tip-tl"><div class="f-tip-tr"><div class="f-tip-tc"></div></div></div>
        <div class="f-tip-ml"><div class="f-tip-mr"><div class="f-tip-mc">
            <h3>YOUR TITLE HERE (optional)</h3>
            <div>YOUR CONTENT HERE</div>
        </div></div></div>
        <div class="f-tip-bl"><div class="f-tip-br"><div class="f-tip-bc"></div></div></div>
    </div>
    
    
    I would use this for our tooltips, but it only works with arrows on the top or bottom.  Left and right have float positioning issues
    with the rectangle.  That could be fixed if we knew the height of the tooltip.  But we don't.
 */

.f-tip-tl {
	background: transparent url(/images/tip/div/corners.png) no-repeat 0 0;
	zoom: 1;
}

.f-tip-tc {
	height: 10px;
	background: transparent url(/images/tip/div/tb.png) repeat-x 0 0;
	overflow: hidden;
}

.f-tip-tr {
	background: transparent url(/images/tip/div/corners.png) no-repeat right -10px;
}

.f-tip-ml {
	background: transparent url(/images/tip/div/l.png) repeat-y 0;
	padding-left: 10px;
	overflow: hidden;
	zoom: 1;
}

.f-tip-mc {
	background: transparent url(/images/tip/div/tb.png) 0 -10px;
	padding: 4px 4px;
	font-family: "Myriad Pro", "Myriad Web", "Tahoma", "Helvetica", "Arial", sans-serif; /*	color: #393939; */
	font-size: 12px;

}

.f-tip-content {
	overflow: auto;
}

.f-tip-mc h3 {
	font-size: 15px;
	font-weight: bold;
	margin: 0 0 4px 0;
	zoom: 1;
}

.f-tip-mr {
	background: transparent url(/images/tip/div/r.png) repeat-y right;
	padding-right: 10px;
	overflow: hidden;
}

.f-tip-bl {
	background: transparent url(/images/tip/div/corners.png) no-repeat 0 -20px;
	zoom: 1;
}

.f-tip-bc {
	background: transparent url(/images/tip/div/tb.png) repeat-x 0 -10px;
	height: 10px;
	overflow: hidden;
}

.f-tip-br {
	background: transparent url(/images/tip/div/corners.png) no-repeat right -30px;
}

.f-tip-tl, .f-tip-bl {
	padding-left: 10px;
	overflow: hidden;
}

.f-tip-tr, .f-tip-br {
	padding-right: 10px;
	overflow: hidden;
}

.f-tip-close-left {
	background: transparent url(/images/tip/close-button-white.png) no-repeat;
	width: 24px;
	height: 24px;
	float: left;
	margin-top: -5px;
	margin-left: -5px;
	margin-right: 4px;
	cursor: pointer; /*opacity: .5;*/
}

.f-tip-close-right {
	background: transparent url(/images/tip/close-button-white.png) no-repeat;
	width: 24px;
	height: 24px;
	float: right;
	margin-top: -5px;
	margin-right: -6px;
	cursor: pointer; /*opacity: .5;*/
}

.f-tip-container {
	position: absolute;
	z-index: 2000;
}

.f-tip {
/* 	display:inline-block; */
	color: #ddd;
}

.tip-arrow-t {
	width: 46px;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
}

.tip-arrow-r {
	float: right;
	width: 30px;
	height: 46px;
	margin-top: auto;
	margin-bottom: auto;
}

.present .f-tip h3 {
	color: #b824a4;
}

.share .f-tip h3 {
	color: #1d6dc1;
}

.approve .f-tip h3 {
	color: #31b21f;
}