#text
{
   margin: 50px auto;
   width:  500px
}

.hotspot
{
   color:          #2F2F2F;
   padding-bottom: 1px;
   border-bottom:  1px dotted #900;
   cursor:         pointer
}

#tt
{
   position: absolute;
   display:  block;
}

#tttop
{
   display:     block;
   height:      5px;
   margin-left: 5px;
   overflow:    hidden;
}

#ttcont
{
   display:     block;
   padding:     2px 1px 3px 7px;
   margin-left: 5px;
   background:  #fffef4;
   color:       #2F2F2F;
   font-weight: normal;
   border:      1px solid #fee997;
}

#ttbot
{
   display:     block;
   height:      5px;
   margin-left: 5px;
   overflow:    hidden;
}

#tooltip
{
   text-align: center;
   color:      #fff;
   background: #111;
   position:   fixed;
   z-index:    100;
   padding:    15px;
}

#tooltip.top:after
{
   border-top-color: transparent;
   border-bottom:    10px solid #111;
   top:              -20px;
   bottom:           auto;
}

#tooltip.left:after
{
   left:   10px;
   margin: 0;
}

#tooltip.right:after
{
   right:  10px;
   left:   auto;
   margin: 0;
}

#tooltip
{
   background:    #333333;
   border-radius: 5px;
   box-shadow:    0 3px 5px rgba(0, 0, 0, 0.3);
   color:         #FFFFFF;
   font-family:   Arial, helvetica, sans-serif;
   font-size:     0.7em;
   line-height:   1.5;
   padding:       5px;
   position:      fixed;
   text-align:    center;
   text-shadow:   0 1px rgba(0, 0, 0, 0.5);
   z-index:       100;
}

#tooltip .notch
{
   position:            absolute;
   top:                 -10px;
   margin:              0;
   border-top:          0;
   border-left:         10px solid transparent;
   border-right:        10px solid transparent;
   border-bottom:       10px solid #333333;
   padding:             0;
   width:               0;
   height:              0;
   /* ie6 height fix */
   font-size:           0;
   line-height:         0;
   /* ie6 transparent fix */
   _border-right-color: pink;
   _border-left-color:  pink;
   _filter:             chroma(color=pink);
}

#tooltip.top:after
{
   border-bottom:    10px solid #333333;
   border-top-color: transparent;
   bottom:           auto;
   top:              -20px;
}

#tooltip.left:after
{
   left:   10px;
   margin: 0;
}

#tooltip.right:after
{
   left:   auto;
   margin: 0;
   right:  10px;
}

span[rel="tooltip"]
{
   cursor: help !important;
}