/* Prototip.css */

.tooltip { width: 300px; color: #333; text-align: left; }
.tooltip .title { background-color: #cf0b22; font-size: 12px; font-weight: bold; padding: 3px 5px; color: #fff; border-left: 3px solid #333; border-right: 3px solid #333; border-top: 3px solid #333;}
.tooltip .content { background: #e5e5e5; font-size: 12px; padding: 5px; border-left: 3px solid #333; border-right: 3px solid #333; border-bottom: 3px solid #333; }

/* 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; }