/* global */
#cluetip-close img { border: 0px none; }
#cluetip-title { overflow: hidden; }

#cluetip-title #cluetip-close
{
	float: right;
	position: relative;
}

#cluetip-waitimage
{
	width: 43px;
	height: 11px;
	position: absolute;
	background-image: url('wait.gif');
}

.cluetip-arrows
{
	display: none;
	position: absolute;
	top: 0;
	left: -11px;
	height: 22px;
	width: 11px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

#cluetip-extra { display: none; }

/***************************************
   =cluetipClass: 'default' 
-------------------------------------- */

.cluetip-default { background-color: #FFF; }

/* content box */
.cluetip-default #cluetip-outer
{
	position: relative;
	margin: 0;
	background-color: #ffe680;
	text-align: left;
	border: 1px #824b10 solid;
}

.cluetip-default h3#cluetip-title
{
	margin: 0 0 5px;
	padding: 4px 10px 4px;
	font-size: 1.25em;
	font-weight: bold;
	background-color: #824b10;
	color: #ffe680;
	text-align: left;
}

.cluetip-default #cluetip-title a
{
	color: #d9d9c2;
	font-size: 0.95em;
}

.cluetip-default #cluetip-inner { padding: 10px; }

.cluetip-default div#cluetip-close
{
	text-align: right;
	margin: 0 5px 5px;
	color: #900;
}

/* default arrows */
.clue-right-default .cluetip-arrows { background-image: url('cluetip/arrow_title_left.gif'); }

.clue-left-default .cluetip-arrows
{
	background-image: url('cluetip/arrow_title_right.gif');
	left: 100%;
	margin-right: -11px
}

.clue-top-default .cluetip-arrows
{
	background-image: url('cluetip/darrowdown.gif');
	top: 100%;
	left: 50%;
	margin-left: -11px;
	height: 11px;
	width: 22px
}

.clue-bottom-default .cluetip-arrows
{
	background-image: url('cluetip/darrowup.gif');
	top: -11px;
	left: 50%;
	margin-left: -11px;
	height: 11px;
	width: 22px
}

/***************************************
   =cluetipClass: 'jtip'
-------------------------------------- */

.cluetip-jtip { background-color: transparent; }

.cluetip-jtip #cluetip-outer
{
	border: 2px solid #ccc;
	position: relative;
	background-color: #fff;
}

.cluetip-jtip h3#cluetip-title
{
	margin: 0 0 5px;
	padding: 2px 5px;
	font-size: 16px;
	font-weight: normal;
	background-color: #ccc;
	color: #333;
}

.cluetip-jtip #cluetip-inner
{
	padding: 0 5px 5px;
	display: inline-block;
}

.cluetip-jtip div#cluetip-close
{
	text-align: right;
	margin: 0 5px 5px;
	color: #900;
}

/* jtip arrows */
.clue-right-jtip .cluetip-arrows { background-image: url('cluetip/arrowtitle_left.gif'); }

.clue-left-jtip .cluetip-arrows
{
	background-image: url('cluetip/arrow_title_right.gif');
	left: 100%;
	margin-right: -11px
}

.clue-top-jtip .cluetip-arrows
{
	background-image: url('cluetip/arrowdown.gif');
	top: 100%;
	left: 50%;
	margin-left: -11px;
	height: 11px;
	width: 22px
}

.clue-bottom-jtip .cluetip-arrows
{
	background-image: url('cluetip/arrowup.gif');
	top: -11px;
	left: 50%;
	margin-left: -11px;
	height: 11px;
	width: 22px
}

/***************************************
   =cluetipClass: 'rounded'
-------------------------------------- */

.cluetip-rounded
{
	background: url('cluetip/bl.gif') no-repeat 0 100%;
	margin-top: 10px;
	margin-left: 12px
}

.cluetip-rounded #cluetip-outer
{
	background: url('cluetip/tl.gif') no-repeat 0 0;
	margin-top: -12px
}

.cluetip-rounded #cluetip-title
{
	background-color: transparent;
	padding: 12px 12px 0;
	margin: 0 -12px 0 0;
	position: relative;
}

.cluetip-rounded #cluetip-extra
{
	position: absolute;
	display: block;
	background: url('cluetip/tr.gif') no-repeat 100% 0;
	top: 0;
	right: 0;
	width: 12px;
	height: 30px;
	margin-left:0; margin-right:-12px; margin-top:-12px; margin-bottom:0
}

.cluetip-rounded #cluetip-inner
{
	background: url('cluetip/br.gif') no-repeat 100% 100%;
	position: relative; margin-left:0; margin-right:-12px; margin-top:-18px; margin-bottom:0; padding-left:12px; padding-right:12px; padding-top:5px; padding-bottom:12px
}

.cluetip-rounded div#cluetip-close
{
	text-align: right;
	margin: 0 5px 5px;
	color: #009;
	background: transparent;
}

.cluetip-rounded div#cluetip-close a { color: #777; }

/* rounded arrows */
.clue-right-rounded .cluetip-arrows { background-image: url('cluetip/rarrowleft.gif'); }

.clue-left-rounded .cluetip-arrows
{
	background-image: url('cluetip/rarrowright.gif');
	left: 100%;
	margin-left: 12px
}

.clue-top-rounded .cluetip-arrows
{
	background-image: url('cluetip/rarrowdown.gif');
	top: 100%;
	left: 50%;
	margin-left: -11px;
	height: 11px;
	width: 22px
}

.clue-bottom-rounded .cluetip-arrows
{
	background-image: url('cluetip/rarrowup.gif');
	top: -23px;
	left: 50%;
	margin-left: -11px;
	height: 11px;
	width: 22px
}

/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner { zoom: 1; }