/* css/tooltip.css -- fancy tooltips */

.lefttool, .ingredients {
  position: relative;   /* this is key */
  text-decoration:none;
 }
 .lefttool {display:block; width:62px; height:38px;}
 
.lefttool span.lefttip, .ingredients span.lefttip { display: none; width:62px; height:38px;}


/* tooltip will display on :hover event */
 
.lefttool:hover span.lefttip {
  display: block;
  position: absolute;
  top:-112px;  left: -198px;
  width: 221px; height:159px;
  line-height: 1.2em;
  padding: 0; margin:0;
  background: url(../images/sauces/left_callout.gif) right bottom no-repeat;
  font:normal 11px arial, helvetica, sans-serif;
  color: #FFF; 
  text-align: left;
  z-index:300;
}

.ingredients:hover span.lefttip {
  display: block;
  position: absolute;
  top:-120px;  left: -230px;
  width: 221px; height:200px;
  line-height: 1.2em;
  padding: 0; margin:0;
  background: url(../images/sauces/ing_callout.gif) right bottom no-repeat;
  font:normal 11px arial, helvetica, sans-serif;
  color: #FFF; 
  text-align: left;
  z-index:300;
}

/*titles*/
.lefttool h3, .ingredients h3 {height:57px; width:221px; padding:0; margin:0;}

h3.classic_title { background: url(../images/sauces/left/tartar_title.gif) left top no-repeat;}
h3.soya_title {background: url(../images/sauces/left/soya_title.gif) left top no-repeat;}
h3.ceviche_title {background: url(../images/sauces/left/ceviche_title.gif) left top no-repeat;}
h3.swingin_title {background: url(../images/sauces/left/swingin_title.gif) left top no-repeat;}
h3.lemon_title {background: url(../images/sauces/left/lemon_title.gif) left top no-repeat;}
h3.miso_title {background: url(../images/sauces/left/miso_title.gif) left top no-repeat;}
h3.thai_title {background: url(../images/sauces/left/thai_title.gif) left top no-repeat;}
h3.coconut_title {background: url(../images/sauces/left/coconut_title.gif) left top no-repeat;}
h3.sesame_title {background: url(../images/sauces/left/sesame_title.gif) left top no-repeat;}
h3.fishmongers_title {background: url(../images/sauces/left/fishmongers_title.gif) left top no-repeat;}


.lefttool:hover span.lefttip p { padding:5px 40px 5px 15px;}
.ingredients:hover span.lefttip p { margin:5px 10px 5px 18px;}



/* sauces on home page
------------------------------------------*/

.saucy_tool {
  position: relative;   /* this is key */
  text-decoration:none;
  display:block; 
}
 
.saucy_tool span.saucetip, .saucy_tool span.saucetip_coco { display: none;}

/* tooltip will display on :hover event */
 
.saucy_tool:hover span.saucetip {
  display: block;
  position: absolute;
  top:38px;  left:40px;
  padding: 0; margin:0;
  z-index:300;
}
.saucy_tool:hover span.saucetip_coco {
  display: block;
  position: absolute;
  top:30px;  left:50px;
  padding: 0; margin:0;
  z-index:300;
}


.underline {text-decoration:underline;}