/* Using CSS to make tooltips that open over an image map.
 * This one is for an image with the formula for the mean.*/
#worksheetmap {
position:relative;
height:361px; /* height of image map */
width:595px; /* width of image map */
margin-right:20px;
margin-bottom: 20px;
background:url(worksheet.png);
float: left;
}

#homebuttonmap {
position:relative;
height:132px; /* height of image map */
width:1262px; /* width of image map */
margin:20px auto;
background:url(home_buttons.png);
float: left;
}

#insertbuttonmap {
position:relative;
height:123px; /* height of image map */
width:1259px; /* width of image map */
margin:20px auto;
background:url(insert_buttons.png);
float: left;
}


a:hover {
visibility:visible; /* Fixes IE6 Bug */
}
.tooltip {
    color:#000;
    position: absolute;
    text-decoration: none;
    font-weight: bold;
}

/*** Worksheet image map */

#columnIndex.tooltip { 
top:45px;
left:25px;
height:15px;
width:570px;
}
#rowIndex.tooltip { 
top:65px;
left:1px;
width:23px;
height:295px;
}
#cells.tooltip { 
top:65px;
left:25px;
width:570px;
height:295px;
}
#formula.tooltip { 
top:12px;
left:254px;
width:338px;
height:23px;
}


/*** Home button bar image map */

#clpbd.tooltip {
top:30px;
left:2px;
width:80px;
height:85px;    
}

#font.tooltip {
top:30px;
left:90px;
width:207px;
height:85px;    
}

#algnmt.tooltip {
top:30px;
left:300px;
width:230px;
height:85px;
}

#number.tooltip {
top:30px;
left:635px;
width:120px;
height:85px;
}

#celltools.tooltip {
top:30px;
left:955px;
width:135px;
height:85px;
}

#editing.tooltip {
top:30px;
left:1092px;
width:130px;
height:85px;
}


/*** Insert button image map */
#pivot.tooltip {
top:20px;
left:2px;
width:60px;
height:75px;
}

#chart.tooltip {
top:20px;
left:448px;
width:251px;
height:75px;
}


.tooltip span { 
position:absolute;
left:-999em; 
opacity:.9; /* FX/Opera/Safari/Chrome */
-ms-filter:"alpha(opacity=90)"; /* IE8 */
filter:alpha(opacity=90); /* IE6/IE7 */
border-radius:8px;
box-shadow:#000 2px 2px 6px;
} 
.tooltip:hover span, .tooltip:focus span {
left:40px;
top:-60px;
width:120px;
padding:10px;  
border:2px solid #000;
background:#f2f2f2;
}

/* This part goes into the HTML
 * 
 *            <div id="worksheetmap"> 
                <a href="#" id="columnIndex" class="tooltip"><span>Column index - capital letters</span></a> 
                <a href="#" id="rowIndex" class="tooltip"><span>Row index - numbers</span></a> 
                <a href="#" id="cells" class="tooltip"><span>Cells - each cell can be referenced by its column index and row index (the upper left cell is A1).</span></a> 
                <a href="#" id="formula" class="tooltip"><span>Formula bar - the contents of the selected cell can be edited here.</span></a> 
              </div>
              
              <div id="homebuttonmap">
                <a href="#" id="clpbd" class="tooltip"><span>Clipboard - copy, paste editing tools</span></a> 
                <a href="#" id="font" class="tooltip"><span>Font - change font style, color, size</span></a> 
                <a href="#" id="algnmt" class="tooltip"><span>Alignment - alignment of cell contents</span></a> 
                <a href="#" id="number" class="tooltip"><span>Number - formatting of numbers, including style (money, percent) and number of decimals displayed</span></a> 
                <a href="#" id="celltools" class="tooltip"><span>Cells - inserting, deleting, formating cells</span></a> 
                <a href="#" id="editing" class="tooltip"><span>Editing - summing cells, filling a series, sorting and filtering</span></a> 
            </div>
            
            <div id="insertbuttonmap">
                <a href="#" id="pivot" class="tooltip"><span>Pivot tables - insert a pivot table</span></a> 
                <a href="#" id="chart" class="tooltip"><span>Chart - insert a new chart</span></a> 
            </div>

              
*/