/* Prototip.css */

.tooltip { width:139px; color: #fff;}
.tooltip .title {color:#CBD4B7; background: #899855;font-weight:600; font: 16px Verdana, serif; padding: 5px;}
.tooltip .content { background: #899855; font: 12px Arial, Helvetica, sans-serif; padding: 10px; border:solid 1px #f1f1f1;}

.pinktip { border: 5px solid #a1a1a1; }
.pinktip .title { background: #ff1e53; color: #fff; font: italic 17px Georgia, serif; padding: 5px; }
.pinktip .content { background: #fff; color: #555555; padding: 5px; }

/* 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 .title, .darktip .content { 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; }

.round { width:139px;z-index:13000; }
.round .title { font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; margin:0; color:#9fd4ff; padding:8px 8px 4px; background:url(/images/layout/tooltip.png) top right no-repeat ;}
.round .content { color:#fff; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:4px 8px 8px; background:url(/images/layout/tooltip.png) bottom left no-repeat;}