<h1>CSS Graphs!</h1>

<div id="gView_1" class="graphView">
<div id="gSet_1" class="graphSet" style="display:block;">
	<img class="gView_1_sizer" src="blank.gif" width="1" height="1" alt="" />
	<div class="graphBar" style="width:90%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:80%" onmouseover="setGraphContent(this);">Jan 3.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 4.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:70%" onmouseover="setGraphContent(this);">Jan 5.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:40%" onmouseover="setGraphContent(this);">Jan 6.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:20%" onmouseover="setGraphContent(this);">Jan 7.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:30%" onmouseover="setGraphContent(this);">Jan 8.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:10%" onmouseover="setGraphContent(this);">Jan 9.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:30%" onmouseover="setGraphContent(this);">Jan 10.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:80%" onmouseover="setGraphContent(this);">Jan 11.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:40%" onmouseover="setGraphContent(this);">Jan 12.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 13.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:20%" onmouseover="setGraphContent(this);">Jan 14.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:80%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:30%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:100%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:40%"  onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:20%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:80%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:30%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:90%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:40%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:20%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:80%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:60%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:50%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:30%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
	<div class="graphBar" style="width:90%" onmouseover="setGraphContent(this);">Jan 2.05 - <b>300<small>lbs.</small></b> </div>
</div>

<div id="gSet_2" class="graphSet" style="display:none;">
	<img class="gView_1_sizer" src="blank.gif" width="1" height="1" alt="" />
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
</div>

<div id="gSet_3" class="graphSet" style="display:none;">
	<img class="gView_1_sizer" src="blank.gif" width="1" height="1" alt="" />
	<div class="graphBar" style="width:20%" onmouseover="setGraphContent(this);">120</div>
	<div class="graphBar" style="width:10%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:10%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:70%">120</div>
	<div class="graphBar" style="width:20%" onmouseover="">120</div>
	<div class="graphBar" style="width:10%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:10%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:70%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
</div>
</div>

<h3>Legend:</h3>

<table>
<tr>
	<td><span id="gLabel_1">&nbsp;#1&nbsp;</span></td>
	<td><a href="javascript://" onclick="xToggle('gSet_1','','flag','on');graphToFront('gSet_1')">Graph 1 Title</a></td>
	<td><a href="javascript:xToggle('gSet_1','','flag');"><img class="flag_on" id="gSet_1_swap" src="blank.gif" width="1" height="1" alt="" /></a></td>
</tr>
<tr>
	<td><span id="gLabel_2">&nbsp;#2&nbsp;</span></td>
	<td><a href="javascript://" onclick="xToggle('gSet_2','','flag','on');graphToFront('gSet_2');">Graph 2 Title</a></td>
	<td><a href="javascript:xToggle('gSet_2','','flag');"><img class="flag_off" id="gSet_2_swap" src="blank.gif" width="1" height="1" alt="" /></a></td>
</tr>
<tr>
	<td><span id="gLabel_3">&nbsp;#3&nbsp;</span></td>
	<td><a href="javascript://" onclick="xToggle('gSet_3','','flag','on');graphToFront('gSet_3');">Graph 3 Title</a></td>
	<td><a href="javascript:xToggle('gSet_3','','flag');"><img class="flag_off" id="gSet_3_swap" src="blank.gif" width="1" height="1" alt="" /></a></td>
</tr>
</table>
<br />

<h3>Details:</h3>
<div id="graphRowContent"></div>
