body {
    scrollbar-arrow-color: gree;
    scrollbar-face-color: gold;
    scrollbar-highlight-color: gree;
    scrollbar-3dlight-color: green;
    scrollbar-shadow-color: gold;
    scrollbar-darkshadow-color: green;
    scrollbar-track-color: gold;
 font-size:10px;
 font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
 color:#000000; 
}

a:hover {
 text-decoration: underline; background: "#F2E8C7";
}

P {
 FONT-SIZE:11px;
 font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
}

/* canvas & it's shadow border layout styles */
#canvas, #sb1, #sb2, #sb3, #sb4, #sb5 {
 position: relative; 
}

#canvas {
 background:white;
 color:black;
 border:1px solid #000000;
 text-align:left; 
}

/*
: IMPORTANT NOTE ON SB's (aka Shadow border's):

These are a little complex/sensitive/fragile. One cannot change the width or height to be smaller
than it's containing div. Therefore, in order to tweak the borders, you have to play with negative
margin's for the bottom & right side's. The positioning, is for offsettin' the sb from it's containing
div's top & left sides. It's not as hard as it sounds, but just take a look at what's going on here
before you tweak with it.

*/

#sb1 {
 width:951px;
 background:#CCCCCC;
 color:transparent;
 top:-1px;
 right:auto;
 bottom:auto;
 left:-1px;
 margin:15px -2px 0px 8px; 
}

/*border-bottom: 1px solid #999900;*/
#sb2 {
 width:950px;
 background:#999999;
 color:transparent;
 top:-1px;
 right:auto;
 bottom:auto;
 left:-1px;
 padding-bottom:1px;
 padding-left:1px;
 margin-right:-1px; 
}

#sb3 {
 width:950px;
 background:#808080;
 color:transparent;
 top:0px;
 right:auto;
 bottom:auto;
 left:-1px; 
}

#sb4 {
 width:950px;
 background:#666666;
 color:transparent;
 top:-1px;
 right:auto;
 bottom:auto;
 left:-1px; 
}

#sb5 {
 width:950px;
 background:#000000;
 color:transparent;
 top:-3px;
 right:auto;
 bottom:auto;
 left:-3px;
 margin-bottom:-2px;
 margin-right:-2px; 
}
/* END content & shadow border layout styles */