/* global */
#cluetip-close img {
  border: 0;
}
#cluetip-title {
  overflow: hidden;
}
#cluetip-title #cluetip-close {
  float: right;
  position: relative;
}
#cluetip-waitimage {
  width: 43px;
  height: 11px;
  position: absolute;
  background-image: url(../img/cluetip/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 {
text-align:left;
  background-color: #ddd;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #ccc;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #ccc;
  color: #706f74;
}
.cluetip-default #cluetip-title a {
  color: #706f74;
  font-size: 0.90em;
}  
.cluetip-default #cluetip-inner {
  background-color: #fff;
  padding: 10px;
}
.cluetip-default div#cluetip-close { 
  text-align: right;
  margin: 1px 5px 6px;
  color: #666;
}

/* default arrows */
.clue-right-default .cluetip-arrows {
  background-image: url(../img/cluetip/arrowleft.gif);
}
.clue-left-default .cluetip-arrows {
  background-image: url(../img/cluetip/arrowright.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-default .cluetip-arrows {
  background-image: url(../img/cluetip/arrowdown.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-default .cluetip-arrows {
  background-image: url(../img/cluetip/arrowup.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}

/***************************************
   =cluetipClass: 'gray' 
-------------------------------------- */

.cluetip-gray,.cluetip-gray_w,.cluetip-checksum {
text-align:left;
  background-color: #ddd;
}
.cluetip-gray #cluetip-outer,.cluetip-gray_w #cluetip-outer,.cluetip-checksum #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #706f74;
}
.cluetip-gray h3#cluetip-title,.cluetip-gray_w h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #706f74 ;
  color: #fff;
}
.cluetip-checksum h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.0em;
  font-weight: bold;
  background-color: #706f74 ;
  color: #fff;
}
.cluetip-gray #cluetip-title a,.cluetip-gray_w #cluetip-title a,.cluetip-checksum #cluetip-title a {
  color: #fff;
  font-size: 0.90em;
}  
.cluetip-gray #cluetip-inner {
  background-color: #eaeaea;
  padding: 10px;
}
.cluetip-gray_w #cluetip-inner {
  background-color: #ffffff;
  padding: 10px;
}
.cluetip-checksum #cluetip-inner {
  background-color: #ffffff;
  padding: 5px;
}
.cluetip-gray div#cluetip-close,.cluetip-gray_w div#cluetip-close,.cluetip-checksum div#cluetip-close { 
  text-align: right;
  margin: 1px 5px 6px;
  color: #666;
}

/* gray arrows */
.clue-right-gray .cluetip-arrows,.clue-right-gray_w .cluetip-arrows,.clue-right-checksum .cluetip-arrows {
  background-image: url(../img/cluetip/arrowleft-gray.gif);
}
.clue-left-gray .cluetip-arrows,.clue-left-gray_w .cluetip-arrows.clue-left-checksum .cluetip-arrows {
  background-image: url(../img/cluetip/arrowright-gray.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-gray .cluetip-arrows,.clue-top-gray_w .cluetip-arrows,.clue-top-checksum .cluetip-arrows {
  background-image: url(../img/cluetip/arrowdown-gray.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-gray .cluetip-arrows,.clue-bottom-gray_w .cluetip-arrows,.clue-bottom-checksum .cluetip-arrows {
  background-image: url(../img/cluetip/arrowup-gray.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}

/***************************************
   =cluetipClass: 'orange' 
-------------------------------------- */

.cluetip-orange,.cluetip-orange_w {
text-align:left;
  background-color: #ddd;
}
.cluetip-orange #cluetip-outer,.cluetip-orange_w #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #f7941d ;
}
.cluetip-orange h3#cluetip-title,.cluetip-orange_w h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #f7941d ;
  color: #fff;
}
.cluetip-orange #cluetip-title a,.cluetip-orange_w #cluetip-title a {
  color: #fff;
  font-size: 0.90em;
}  
.cluetip-orange #cluetip-inner {
  background-color: #eaeaea;
  padding: 10px;
}
.cluetip-orange_w #cluetip-inner {
  background-color: #ffffff;
  padding: 10px;
}
.cluetip-orange div#cluetip-close,.cluetip-orange_w div#cluetip-close { 
  text-align: right;
  margin: 1px 5px 6px;
  color: #666;
}

/* orange arrows */
.clue-right-orange .cluetip-arrows,.clue-right-orange .cluetip-arrows {
  background-image: url(../img/cluetip/arrowleft-orange.gif);
}
.clue-left-orange .cluetip-arrows,.clue-left-orange_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowright-orange.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-orange .cluetip-arrows,.clue-top-orange_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowdown-orange.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-orange .cluetip-arrows,.clue-bottom-orange_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowup-orange.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}


/***************************************
   =cluetipClass: 'red' 
-------------------------------------- */

.cluetip-red,.cluetip-red_w {
text-align:left;
  background-color: #ddd;
}
.cluetip-red #cluetip-outer,.cluetip-red_w #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #ec5e38 ;
}
.cluetip-red h3#cluetip-title,.cluetip-red_w h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #ec5e38 ;
  color: #fff;
}
.cluetip-red #cluetip-title a,.cluetip-red_w #cluetip-title a {
  color: #fff;
  font-size: 0.90em;
}  
.cluetip-red #cluetip-inner {
  background-color: #eaeaea;
  padding: 10px;
}
.cluetip-red_w #cluetip-inner {
  background-color: #ffffff;
  padding: 10px;
}
.cluetip-red div#cluetip-close,.cluetip-red_w div#cluetip-close { 
  text-align: right;
  margin: 1px 5px 6px;
  color: #666;
}

/* red arrows */
.clue-right-red .cluetip-arrows,.clue-right-red .cluetip-arrows {
  background-image: url(../img/cluetip/arrowleft-red.gif);
}
.clue-left-red .cluetip-arrows,.clue-left-red_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowright-red.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-red .cluetip-arrows,.clue-top-red_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowdown-red.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-red .cluetip-arrows,.clue-bottom-red_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowup-red.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}

/***************************************
   =cluetipClass: 'blue' 
-------------------------------------- */

.cluetip-blue,.cluetip-blue_w {
text-align:left;
  background-color: #ddd;
}
.cluetip-blue #cluetip-outer,.cluetip-blue_w #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #5d87a1 ;
}
.cluetip-blue h3#cluetip-title,.cluetip-blue_w h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #5d87a1 ;
  color: #fff;
}
.cluetip-blue #cluetip-title a,.cluetip-blue_w #cluetip-title a {
  color: #fff;
  font-size: 0.90em;
}  
.cluetip-blue #cluetip-inner {
  background-color: #eaeaea;
  padding: 10px;
}
.cluetip-blue_w #cluetip-inner {
  background-color: #ffffff;
  padding: 10px;
}
.cluetip-blue div#cluetip-close,.cluetip-blue_w div#cluetip-close { 
  text-align: right;
  margin: 1px 5px 6px;
  color: #666;
}

/* blue arrows */
.clue-right-blue .cluetip-arrows,.clue-right-blue_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowleft-blue.gif);
}
.clue-left-blue .cluetip-arrows,.clue-left-blue_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowright-blue.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-blue .cluetip-arrows,.clue-top-blue_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowdown-blue.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-blue .cluetip-arrows,.clue-bottom-blue_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowup-blue.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}

/***************************************
   =cluetipClass: 'green' 
-------------------------------------- */

.cluetip-green,.cluetip-green_w  {
text-align:left;
  background-color: #ddd;
}
.cluetip-green #cluetip-outer,.cluetip-green_w #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #49a942 ;
}
.cluetip-green h3#cluetip-title,.cluetip-green_w h3#cluetip-title {
  margin: 0 0 0;
  padding: 2px 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #49a942 ;
  color: #fff;
}
.cluetip-green #cluetip-title a,.cluetip-green_w #cluetip-title a {
  color: #fff;
  font-size: 0.90em;
}  
.cluetip-green #cluetip-inner {
  background-color: #eaeaea;
  padding: 10px;
}
.cluetip-green_w #cluetip-inner {
  background-color: #ffffff;
  padding: 10px;
}
.cluetip-green div#cluetip-close,.cluetip-green_w div#cluetip-close { 
  text-align: right;
  margin: 1px 5px 6px;
  color: #666;
}

/* green arrows */
.clue-right-green .cluetip-arrows,.clue-right-green_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowleft-green.gif);
}
.clue-left-green .cluetip-arrows,.clue-left-green_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowright-green.gif);
  left: 100%;
  margin-right: -11px;
}
.clue-top-green .cluetip-arrows,.clue-top-green_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowdown-green.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;  
}  
.clue-bottom-green .cluetip-arrows,.clue-bottom-green_w .cluetip-arrows {
  background-image: url(../img/cluetip/arrowup-green.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  height: 11px;
  width: 22px;
}