/*
 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: 15;
}

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

.f-tip.votes {
	z-index: 25;
}


.tip-arrow-t {
	background: transparent url(../../../images/tip/arrow-top.png) no-repeat;
	position:relative;
	width: 34px;
	height: 17px;
	margin-left: auto;
	margin-right: auto;
}



.tip-arrow-r {
	/*float: right;*/
	background: transparent url(../../../images/tip/arrow-right-dark.png) no-repeat;
	width: 17px;
	height: 34px;
	margin-top: 7px;
	position: absolute;
	right: 0;
	top: 10px;
	z-index:16;
	
}

.tip-arrow-l {
	/*float: right;*/
	background: transparent url(../../../images/tip/arrow-left-dark.png) no-repeat;
	width: 17px;
	height: 34px;
	margin-top: 7px;
	position: absolute;
	left: 0;
	top: 10px;
	z-index:16;
}

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

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

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

.tip-target-active img {
	border-color: #555;
	-webkit-box-shadow: 0px 1px 5px #222222;
	-moz-box-shadow: 0px 1px 3px #5a6773;
	box-shadow: 0px 1px 3px #5a6773;
}

.f-tip {
	position: absolute;
	padding: 8px;
	font-size: 11px;
	background-color: #5a6773;
	background-color: #555;
	background-color: #333;
	color: #ddd;
/*	border: 1px solid #777;*/
	-webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, .7);
/*	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 1);*/
	-moz-box-shadow: rgba(100, 100, 100, 0.70) 0px 2px 15px;
	margin: 0px auto 0 auto;
	border-radius: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
}

.attachment-detail {
	font-size: 13px;
	margin-left: 3px;
	color: #fff;
}

.attachment-detail .author {
	font-size: 13px;
	color: #ddd;
}

.attachment-detail .content {
/*	font-size: 15px;*/
	color: #fff;
}

.attachment-detail .likes {
	color: #9bd29b;
/*	text-align: right;*/
	margin-left: 3px;
}

.attachment-detail .dislikes {
	color: #ddc1c1;
/*	text-align: right;*/
	margin-left: 3px;
}

.attachment-detail .options {
	text-align: center;
	color: #ddd;
}

.f-tip h1 {
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
}

.f-tip .act {
	/*font-size: 12px;*/
	font-size: 13px;
	width: 225px;
}

.f-tip a.text {
	color: #ddd;
	text-decoration: underline;
	cursor: pointer;
}

.f-tip .small {
	font-size: 10px;
}

.f-tip a.text:hover {
	color: #fff;
}

.f-tip .act a,
.f-tip .move a,
.f-tip .delete a,
.f-tip .sites a {
	text-decoration: none;
}

.f-tip .sites {
	width: 175px;
	margin: 5px auto 0 auto;
}

.f-tip .sites img {
	vertical-align: sub;
}
.f-tip .sites .text {
	/*padding-bottom: 3px;*/
	line-height: 13px;
}

.f-tip .move, .f-tip .delete{
	border-top: 1px solid #777;
	padding-top: 5px;
	/*display: none;*/
}

.f-tip .move {
	padding-bottom: 5px;
}

.f-tip .delete a {
	color: #ac6d7a;
	color: #b73135;
	color: #d07c8e;
}

.f-tip.right {
	
}

.f-tip .col1,
.f-tip .col2 {
	width: 49%;
	display: inline-block;
	text-align: center;
	padding: 0;
	margin-top: 6px;
}

.tip-arrow {
	background-color: #5a6773;
	-webkit-transform:rotate(45deg);
	transform: rotate(45deg);
	width: 34px;
	height: 34px;
	margin-top: 5px;
	margin-left: -15px;
	margin-bottom: -20px;
}


.f-tip textarea {
	resize: vertical;
	margin-top: 4px;
	font: 11px "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
}