/* Prototip.css */

.tooltip { width: 150px; color: #fff;}
.tooltip .title { background: #0F6788; font: italic 17px Georgia, serif; padding: 5px;}
.tooltip .content { background: dodgerblue; font: 11px Arial, Helvetica, sans-serif; padding: 5px;}

.pinktip { border: solid 5px olive; }
.pinktip .title { background: ActiveBorder url('(EmptyReference!)'); color: olive; font: italic 17px Georgia, serif; padding: 5px; border-color: olive; }
.pinktip .content { background: #fff; color: #555555; padding: 5px; border-color: olive; }


.pinktip2 { border: solid 5px #DDEBC2; }
.pinktip2 .title {
	color: white;
	padding: 5px;
	border-color: olive;
	background-color: #67CB33;
	font-family: "Gill Sans MT", Arial, Helvetica, sans-serif;
	font-size: 10pt;
/*
	font-weight: bold;
*/
	text-transform: uppercase;
}
.pinktip2 .content {
	background: #fff;
	color: #555555;
	padding: 5px;
	border-color: olive;
	font-family: "Gill Sans MT", Arial, Helvetica, sans-serif;
	font-size: 9pt;
}


/* Effects like 'blind' go a little bit better when 
   there is no border on the tooltip itself.
   Put the borders on .title and .content instead,
   here's how to do that: */
.darktip { width: 200px; }
.darktip .content { border: 5px solid #999999; padding: 5px; }
.darktip .title { border: 5px solid #999999; padding: 5px; }
.darktip .title { border-bottom: none; background: #606060; color: #fff; font: italic 17px Georgia, serif; }
.darktip .content { border-top: none; background: #808080; color: #fff; font: 11px Arial, Helvetica, sans-serif; }