body { margin: 10px; background: #ebf9ff url("../images/body-bg-blue.gif") repeat-x 0 0; font-size: 75%; font-family: Arial, sans-serif; color: #37526b; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; }
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}

a { color: #9f1127; }
a:hover { text-decoration: none; }

#wrap { position: relative; width: 950px; height: 550px; margin: 0 auto; overflow: hidden; }
#footer { display: none; width: 950px; margin: 0 auto; font-size: 11px; color: #7b919a; text-align: right; }
#panel-wrap { position: relative; height: 100%; }
.panel { position: absolute; height: 100%; }

.body { height: 100%; padding: 10px; }
.blade { height: 550px; width: 50px; }
.blade img { position: absolute; bottom: 10px; left: 12px; }
.blue { background: #ebf9ff url("../images/body-bg-blue.gif") repeat-x 0 0; }
.red { background: #901127 url("../images/body-bg-red.gif") repeat 0 0; }

#intro { width: 950px; padding-left: 60px; }
#intro h1 { float: left; margin-left: -20px; }

#intro #helpful-info { float: left; width: 405px; margin: 120px 0 0 5px; }
#intro #helpful-info p { background: transparent url("../images/home-info-bg.gif") no-repeat 0 0; padding: 10px 10px 30px 10px; margin: 0 0 20px 0; }
#intro #helpful-info p img { float: left; margin: -5px 20px 10px 0; }

#intro #gender-age { float: left; width: 820px; height: 123px; padding: 20px; background: #fafdff url("../images/home-control-bg.gif") no-repeat 0 0; }

#intro #gender-age #intro-copy { float: left; width: 400px; }
#intro #gender-age #intro-copy p { font-size: 16px; line-height: 125%; margin: 0; }

#intro #gender-age #gender h2, #intro  #gender-age #age h2 { margin: 0 0 10px 0; color: #8d1f28; font-size: 18px; }
#intro #gender-age #gender p { margin: 0 0 0 20px; }
#intro #gender-age #gender p span { font-size: 30px; font-weight: bold; cursor: pointer; }
#intro #gender-age #gender { float: left; width: 190px; margin: 0 0 0 20px; }

#intro #gender-age #age { float: left; width: 190px; margin: 0 0 0 20px; }
#intro #gender-age #age #user-age { width: 134px; font-size: 50px; font-weight: bold; color: #37526b; }
#intro #gender-age #age p { margin: 0 0 0 20px; }

#intro #gender-age #button { float: right; margin: 0 40px 0 0; }
#intro #gender-age #button p { margin: 0; }
#intro #gender-age #button button { width: auto; margin: 5px 0 0 0; background: transparent; padding: 0; border: 0; cursor: pointer; text-align: right; }

#intro #gender-age #daily-requirement { float: left; margin-left: 50px; margin-top: 20px; }
#intro #gender-age #daily-requirement p { float: left; margin: 25px 30px 0 0; font-size: 19px; }
#intro #gender-age #daily-requirement p#fiber-req { font-size: 75px; font-weight: bold; margin: 0; }

#continue-panel { text-align: right; }

#transition { width: 2000px; height: 100%; }
#transition .body { padding: 0; }
.transition-image { float: right; }

#next { margin-left: 3px; }		

#tool { width: 897px; }
#tool #tool-header, #tool #tool-grid { width: 610px; margin: 0 0 0 3px; }

#tool #tool-header { position: relative; height: 130px; background: transparent url("../images/search-bg.gif") repeat-x 0 100%; }
#tool #tool-header h1 { position: absolute; top: 0; left: 0; }
#tool #tool-header #search { position: absolute; right: 5px; bottom: 7px; font-size: 18px; color: #9f2117; }

#food-wrap { float: left; height: 235px; width: 610px; overflow-y: scroll; background: #fff; border-bottom: 1px solid #d7dee1; }

#food-header { width: 610px; }
#food-header th { text-align: left; font-size: 16px; background: #fff; }
#food td, #food-header th { padding: 3px 0; }
#food td.name, #food-header th.name { width: 305px; }
#food td.fiber, #food-header th.fiber { width: 50px; text-align: center; }
#food td.size, #food-header th.size { width: 80px; text-align: right; padding: 0 10px 0 0; }
#food-header th.controls { width: 125px; }
#food-header th.reset { width: 47px; text-align: right; }
#food td.controls { width: 80px; text-align: center; }
#food td.servings { width: 80px; }
#food td.controls img { margin: 0 5px 0 0; }
.odd-row { background: #f2f6f9; }
#food-header #reset { } /* margin: 0px 0 0 8px; */


#instructions { display: none; position: absolute; top: 137px; left: 222px; width: 505px; padding: 10px; background: #f4fbfd; border: 2px solid #666; }
#instructions h1 { color: #9f1127; }
#instructions p { font-size: 20px; }
#instructions div.close { float: right; padding: 3px 5px 5px 5px; cursor: pointer; background: #901127; font-size: 16px; color: #fff; }

#guage-wrap { position: absolute; top: 87px; left: 617px; width: 44px; border: 2px solid #af6115; }
#guage-background { height: 390px; padding: 3px; background: transparent url("../images/guage-notches.gif") repeat-y 0 0; }
#guage { position: relative; width: 100%; height: 100%; overflow: hidden; }
#guage #progress { position: absolute; overflow: hidden; bottom: 0px; width: 100%; background: #af6115 url("../images/guage-progress.gif") repeat-y 0 0; }
#to-go { padding: 4px 1px; background: #b16016; color: #fff; font-weight: bold; text-align: center; }

#groups { margin: 0; padding: 0; overflow: auto; height: 65px; list-style: none; background: #b8cad4 url("../images/menu-background-off.gif") repeat-x 0 0; }
#groups li { display: block; width: 75px; height: 65px; float: left; border-right: 1px solid #e7f8ff; background: #b8cad4 url("../images/menu-background-off.gif") repeat-x 0 0; text-align: center; font-size: 11px; font-weight: bold; cursor: pointer; }
#groups li:hover { background: #f2f0f0; }

#sub-groups { clear: left; height: 30px; margin: 0; padding: 0; overflow: auto; list-style: none; background: #f2f0f0; }
#sub-groups li { display: block; float: left; margin: 0 1px 0 0; padding: 0 3px; line-height: 30px; background: #f2f0f0; cursor: pointer; }
#sub-groups li:hover { font-weight: bold; }

#so-far { position: absolute; top: 414px; right: 0; width: 220px; padding: 4px; background: #2a4565; color: #fff; }
#so-far .label { width: 50%; padding: 0 10px 15px 0; vertical-align: bottom; text-align: right; font-size: 14px; }
#so-far .so-far-val { font-size: 65px; font-weight: bold; }

#header-message { position: absolute; top: 0; right: 0; width: 273px; min-height: 93px; overflow: hidden; background: transparent url("../images/header-message-bg.gif") no-repeat 0 0; }
#header-message p { font-size: 11px; font-weight: bold; margin: 5px 3px 0px 17px; }

#additional-info { position: absolute; top: 87px; right: 0; width: 220px; }
#additional-info p { margin: .75em 0 .75em 0; }
#additional-info p img { margin: 0; padding: 0; }
#additional-info p strong { color: #8d1f28; }

#each-day { position: absolute; top: 492px; left: 20px; width: 550px; font-size: 24px; }
#each-day p { margin: 0; }
#each-day p.disclaimer { font-size: 11px; }

#goal-met { display: none; position: absolute; top: 137px; left: 150px; width: 605px; height: 290px; padding: 10px; background: #f4fbfd url("../images/logo-small.jpg") no-repeat 100% 100%; border: 2px solid #666; }
#goal-met h1 { color: #9f1127; }
#goal-met p { font-size: 16px; font-weight: bold; margin: 0 100px 15px 0; }
#goal-met div.close { float: right; padding: 3px 5px 5px 5px; cursor: pointer; background: #901127; font-size: 16px; color: #fff; }

.clear { clear: both; }