/* CSS DOCUMENT */
*{ margin: 0; padding: 0; }

body { font-size: 62.5%; background: url(images/bg.png) repeat-y #8ccdcf; }

#header { height: 30px; padding: 5px; background: #444; border-bottom: 2px solid #000;}
#header a {text-decoration: none; color: #999; font-size: 1.4em; }
#header a:hover { text-decoration: underline; color: #ccc; }
#header p { color: #999; font-size: 2em; margin: 5px 0 0 10px; }

#page {background: url(images/yellow_bg.png) repeat-y #f9f6da; margin-left: 600px; padding:20px 10px 20px 30px;color: #57564c; height: 900px;}

#page h1 { font-size: 4em; font-weight: normal;}
#page h2 { font-size: 2.5em; font-weight: normal; margin: 1em 0;}

#page p { margin: 1em 0; font-size: 1.4em;}
#page input { color: #115966; background: url(images/button_bg.png) repeat-x center center #b5ddde; padding: 5px;-moz-border-radius: 1em; -webkit-border-radius: 1em; border: 1px solid #83c6c8; font-size: 1.2em; font-weight: bold;}
#page table { margin: 0 0 1em 0; width: 95%; }
#page th { padding: 5px; font-size: 1.6em; margin: 2px; background: #217282; color: #f9f6da;}
#page td { padding: 5px; font-size: 1.6em; margin: 1px; background: #a2d4d6; color: #115966; text-align: right;}
#page td input { background: none; border: none; display: inline; width: 50px; text-align: right; font-size: 0.9em;}
#images {position: absolute; top: 60px; left: 0; font-family: Palatino, Georgia, Times, sans-serif; }

#images img {position: absolute;}
#images #hose {top:0; left:0; z-index: 2;}
#images #funnel {top: 170px; left: 61px; z-index: 2;}
#images #jug, #images #jug_water {top: 275px; left:33px; z-index: 2;}
#images #jug {display: none;}
#images #water {top:135px; left:81px; z-index: 1;}

.field { text-align: center; width: 200px; color: #217282; position: absolute; background: #a2d4d6; padding: 10px;-moz-border-radius: 1em; -webkit-border-radius: 1em; border: 3px solid #83c6c8;}
.field label { display: block; font-size: 2em;}
.field .suffix, .field .prefix { float: right; font-size: 4.5em; color: #115966;}
.field .prefix { float: left;}
.field input { border: none; background: #acdee0; font-size: 4.5em; color: #115966; width: 185px; text-align: center; font-family: Palatino, Georgia, Times, sans-serif; }
.field input.short { width: 160px; text-align: right;}
.field .description { font-style: italic; font-size: 1.4em;}

#traffic_box {top:50px; left:140px; z-index: 3;}
#convert_box {top: 125px; left: 375px; z-index: 3;}
#conversion_box {top:200px; left:165px; z-index: 3; width: 150px;}
#conversion_box input.short { width: 100px;}
#value_box {top:285px; left:350px; z-index: 3;}
#profit_box { top: 425px; left: 190px; z-index: 3;}