body { font-family: sans-serif; margin: 0 auto; margin-top: 20px; padding: 0 10px; width: 600px;}
h1#title { background: #DDFFDD; border-bottom: 4px solid #009900; 
	font-family: Trebuchet MS, sans-serif; font-weight: 300;}

a { text-decoration: none;}
a:hover { text-decoration: underline;}

#main { width: 350px;}

#results { float: right; width: 220px; padding-left: 10px; border-left: 1px solid #999; 
	font-family: monospace; font-size: 120%; height: 350px; overflow: auto; font-size: 16px;
	padding-right: 5px; }
.sidebox { float: right; width: 220px; padding-left: 10px; border-left: 1px solid #999; 
	height: 350px; overflow: auto; padding-right: 5px; display: none; font-size: 80%;}
.sidebox .title { font-size: 120%;}

#footer { border-top: 2px solid #666; padding-top: 5px; margin: 23px 0 0 0; clear: both;}

#overlay { background: #FFF; display: none; filter: alpha(opacity=20); height: 305px; 
	moz-opacity: .80; opacity: .80; padding-top: 50px; position: absolute; top: 155px; 
	width: 760px;}
#overlaytext { background: #F6F6F6; display: none; font-size: 200%; margin-left: 250px; 
	padding: 20px; position: absolute; text-align: center; top: 220px; width: 200px;}

form { border-bottom: 1px solid #999; margin-bottom: 5px; padding: 0 0 5px 0;}
#calcinput { display: inline; font-size: 20px; height: 28px; margin: 0; padding: 2px; width: 330px;
	margin-bottom: 20px;}
#results { display: block;}

/* Classes
 ***********************/

#prefs a { font-size: 70%;}
#prefs a.active { font-weight: bold;}

.preview { height: 10px; margin-left: 310px; width: 50px;}
.answer { text-align: right; word-wrap: break-word;}
.question { word-wrap: break-word;}
.emphasis { font-size: 200%; font-weight: bold;}
.slink { cursor: pointer; border-bottom: 1px dashed #666;}

.hspace { display: inline; padding-left: 7px;}
.vspace { display: inline; padding-top: 5px;}

.shift td { text-align: center; font-size: 9px; padding: 0 !important; height: 6px;}
.shifttext { position: relative; top: 1px; cursor: pointer;}
.shifttext sup { position: relative; top: 4px;}

.clear { clear: both;}

/* Buttons 
 ***********************/
.buttonarea { border-spacing: 0;}
.buttonarea td { padding: 0 2px; margin: 0;}
.button { height: 26px; background: #E9E9E9; border: 1px solid #CCC; 
	font-weight: bold; cursor: pointer; width: 38px; margin: 0; text-align: center;
	display:table-cell; padding-top: 4px;}
.button:active { background: #CCC;}
.button:hover { background: #F2F2F2;}
.button:selection{ background: none; color: inherit; }
.topbuttons { font-weight: normal !important; font-size: 80% !important;}
.topbuttons td { padding: 0 2px; margin: 0;}
.topbuttons .button { width: 36px !important;}

#help .button { height: 20px; width: 35px; float: left; margin: 0 5px 5px 0;}

.blue { background: #DBE8FF; border-color: #A8C8FF;}
.blue:hover { background: #F5F9FF;}
.blue:active { background: #A8C8FF}

.red { background: #FFCCCC; border-color: #F99}
.red:hover { background: #FFE5E5;}
.red:active { background: #F99;}

.green { background: #B3FFB3; border-color: #00E700;}
.green:hover { background: #DDFFDD;}
.green:active { background: #00E700;}

.orange { background: #FFE187; border-color: #FFCD3A;}
.orange:hover { background: #FFEBAF;}
.orange:active { background: #FFCD3A;}

#equal { width: 89px;}