/* Yellow hint box */
.hint {
  float:left; width:12px; height:12px;
  background: url(/images/hint-question.gif) no-repeat top left;
  margin:5px;
}
.hint .hint-content {
	   white-space:normal;
	   font-weight:normal;
    display: none;
    position: absolute;
    right: -220px;
    width: 180px;
    margin-top: -10px;
    border: 1px solid #c93;
    padding: 10px 12px;
    background: #ffc url(/images/hint-pointer.gif) no-repeat -10px 5px;
    z-index:100; 
}
 
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(/images/hint-pointer.gif) left top no-repeat;
}
 
 
/* Debug */
.debug {
	text-align:left;
	background:#fff;
	font-family:monospace;
	font-size:12px
}

.debug_item {
	background:#eee;
	border:1px solid #aaa;
	font-size:11px; padding:10px 30px; margin:5px;
}

.debug_space {
	border:1px solid #000;
	margin:5px;
	padding:0 10px 10px 10px;
}