/* Prototip.css */

.tooltip {background: #eee; width: 320px; color: #000; border:1px black solid;}
.tooltip .title { background: #eee; font: italic 17px Georgia, serif; }
.tooltip .content { font: 11px Arial, Helvetica, sans-serif; font-weight:bold; }

#tipTarget{
	position:static;
	z-index:50;
	left:50%;
	top:25%;
	width:200px;
}


.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; }


.supplements { width: 200px; }
.supplements .title, .supplements .content { border: 5px solid #yellow; padding: 5px; }
.supplements .title { border-bottom: none; background: #green; color: #fff; font: italic 17px Georgia, serif; }
.supplements .content { border-top: none; background: #red; color: #fff; font: 11px Arial, Helvetica, sans-serif; }

/* supplements dans le #cart */
.tooltip ul.selected_supplements li{
  display: block;
  line-height:1em;
  padding:0.5em;
}