/* ---------------------------------------------------------------------------------- This stylesheet is for template elements ONLY. Do not put any general or page-specific styles in here. Note: All template related phase elements are in this document, however, all phases images should live in /sbd/images/phases/ ---------------------------------------------------------------------------------- */ /* UC Top *************************************************************************** */ #Phase, #Phase0, #Phase1, #Phase2, #Phase3 {width:950px;margin:0 auto;} #Main {width:auto;background:#fff url('/sbd/images/template/main_bg.jpg') bottom left no-repeat;border:#CAD6D5 solid 1px;/* Height solves the background load problem - for IE */height:100%;/* For FF */min-height:750px;} #Top {width:auto;padding:9px} /* SBD Logo ************************************************************************* */ #Header {float:left;width:682px;font:normal 11px arial} #Header #Logo {width:682px;height:77px;margin:0 0 9px} #Header #Tagline {width:476px;height:18px;} #Header a, #Header a:visited, #Header a:hover {color:#E67D62;} #Header .floatr {/* This is the row of small links */position:relative;top:2px} /* Welcome Box ********************************************************************** */ .welcome {width:228px;padding:5px;float:right;text-align:left;border:#eee solid 1px;overflow:hidden;} #WelcomeBox {font:normal 11px/14px arial;color:#000;border-bottom:#B4B4B4 dotted 1px;padding:0 0 8px;margin:0 0 5px} #WelcomeBox .currentphase img {width:10px;height:10px;background:#B4B7B6;text-decoration:none;border:none;margin:0 0 -2px 4px} /* Phase Background */ #Phase1 .welcome {background:#fff url('/sbd/images/phases/welcome_phase1_bg.gif') 0 0 repeat-x;border-color:#eee} #Phase2 .welcome {background:#fff url('/sbd/images/phases/welcome_phase2_bg.gif') 0 0 repeat-x;border-color:#CBE8E3} #Phase3 .welcome {background:#fff url('/sbd/images/phases/welcome_phase3_bg.gif') 0 0 repeat-x;border-color:#CBE8E3} /* Phase Icons */ #Phase1 .welcome .phase1 {background:#E67D62} #Phase2 .welcome .phase2 {background:#BAD235} #Phase3 .welcome .phase3 {background:#00AEC6} /* Search Box */ #Search .searchBtn {width:63px;height:23px;border:none;margin:0 0 -5px} #Search .searchButton {display:inline;position:relative;top:5px;} #Search .textbox {width:155px;margin:4px 0 0} #Search a, #Search a:hover, #Search a:visited {color:#000;font:normal 10px arial;} #Search .history {display:none} /* Replaces Welcome Box for Public Pages (No Phase) */ .publicwelcome img {width:238px;height:112px;border:#EBECE7 solid 1px;float:right;} /* Primary Nagivation *************************************************************** */ #Navigation {width:948px;height:38px;overflow:hidden;background:#fff url('/sbd/images/template/nav_bg.gif') 0 0 repeat-x;} #Navigation ul {/* This prevents floats from falling to a second line */ width:5000px;margin:1px 0 0;padding:0;} #Navigation li {background:none;width:117px;height:33px;/* overflow fixes an ie6 border issue */_overflow:hidden;float:left;list-style-type:none;padding:0;margin:0;border-right:#C0B060 solid 1px;border-left:#fff solid 1px;} #Navigation img {width:116px;height:32px;} /* Keep the image width & height 1px smaller than the li tag for border alignment. */ /* Hover and Selected States*/ #Navigation a:hover, #Navigation .selected a {display:block;background:#fff url('/sbd/images/template/nav_hover.gif') 0 0 repeat-x;position:relative;top:-1px;left:-1px;} #Navigation a:hover img, #Navigation .selected img {border:#90D5DF solid 1px;} /* Fine-tune button width so it fits exactly in the nav bar */ #Navigation #nav1 {width:114px} #Navigation #nav1 img {width:113px} /* Keep the image width 1px smaller than the li tag for border alignment. */ /* Place Button Text (This allows placement to be made to the pixel without re-cutting images) */ /* Images are in the .css document so they can be controlled from one place for both the classic & .net projects. */ #nav1 img {background:url('/sbd/images/template/nav_btn1.gif') 0 1px no-repeat;} /* Home */ #nav2 img {background:url('/sbd/images/template/nav_btn2.gif') 0 1px no-repeat;} /* My Tools */ #nav3 img {background:url('/sbd/images/template/nav_btn3.gif') 0 1px no-repeat;} /* Food & Recipes */ #nav4 img {background:url('/sbd/images/template/nav_btn4.gif') 0 1px no-repeat;} /* Advice from Dr. Agaston */ #nav5 img {background:url('/sbd/images/template/nav_btn5.gif') 0 1px no-repeat;} /* Community */ #nav6 img {background:url('/sbd/images/template/nav_btn6.gif') 0 1px no-repeat;} /* Supercharged Fitness Program */ #nav7 img {background:url('/sbd/images/template/nav_btn7.gif') 0 1px no-repeat;} /* Nutrition Counseling */ #nav8 img {background:url('/sbd/images/template/nav_btn8.gif') 0 1px no-repeat;} /* Marketplace */ /* Secondary Navigation ************************************************************* */ #Sidebar {width:160px;margin:0 0 15px} #Sidebar h4 {position:relative;top:-3px;margin:0 5px} #Sidebar ul {list-style-type:none;padding:0;margin:0;} #Sidebar li {list-style-type:none;background:none;padding:0 0 5px;margin:0;} /* Module Structure */ #Sidebar .top {width:160px;height:8px;overflow:hidden;} #Sidebar .bottom {width:160px;height:12px;overflow:hidden;} #Sidebar .outer {width:auto;padding:0 5px;} #Sidebar .inner {width:auto;padding:0 5px;border:#fff solid 1px;border-width:1px 1px 0;padding:10px 10px 5px;} #LeftNav {float:left;margin:0 15px 0 0; width:160px;} #LeftNav ul {list-style-type:none;padding:0;margin:0;} #LeftNav li {list-style-type:none;background:none;padding:0 0 5px;margin:0;} #LeftNav h3 {font-size:15px; font-weight:bold;} /* Phase 1 Skin */ #Phase1 #Sidebar .top {background:url('/sbd/images/phases/sidebar_phase1_top.gif') 0 0 no-repeat;} #Phase1 #Sidebar .bottom {background:url('/sbd/images/phases/sidebar_phase1_bottom.gif') 0 0 no-repeat;} #Phase1 #Sidebar .outer {background:url('/sbd/images/phases/sidebar_phase1_bg.gif') 0 0 repeat-y;} #Phase1 #Sidebar .inner {background:#FDE8E3;} /* Phase 2 Skin */ #Phase2 #Sidebar .top {background:url('/sbd/images/phases/sidebar_phase2_top.gif') 0 0 no-repeat;} #Phase2 #Sidebar .bottom {background:url('/sbd/images/phases/sidebar_phase2_bottom.gif') 0 0 no-repeat;} #Phase2 #Sidebar .outer {background:url('/sbd/images/phases/sidebar_phase2_bg.gif') 0 0 repeat-y;} #Phase2 #Sidebar .inner {background:#F6FAC1;} /* Phase 3 Skin */ #Phase3 #Sidebar .top {background:url('/sbd/images/phases/sidebar_phase3_top.gif') 0 0 no-repeat;} #Phase3 #Sidebar .bottom {background:url('/sbd/images/phases/sidebar_phase3_bottom.gif') 0 0 no-repeat;} #Phase3 #Sidebar .outer {background:url('/sbd/images/phases/sidebar_phase3_bg.gif') 0 0 repeat-y;} #Phase3 #Sidebar .inner {background:#E7F6F4;} /* Link Styles */ #Sidebar a, #Sidebar a:visited, #Sidebar a:hover {color:#008196} #Sidebar a, #Sidebar a:visited {text-decoration:none} #Sidebar a:hover {text-decoration:underline} /* Selected State */ #Sidebar strong {font-weight:bold} /* Quick Links ********************************************************************** */ #QuickLinks {font:normal 12px arial;} #QuickLinks ul {margin:5px 10px} #QuickLinks li.section {background:none;padding-left:0;font-weight:bold} #QuickLinks li.subsection {background:none;font:normal 11px arial} #QuickLinks a, #QuickLinks a:visited, #QuickLinks a:hover {color:#008196} /* Adjustment for Narrow Layout */ #ThreeColumnNarrow #QuickLinks ul {margin:5px} /* Template Structure *************************************************************** */ /* ----------------------------------------------------------------------------- Please Note: #Sidebar is only used for the left navigation. #Col1 is always the main content column. #Col2 is always the right rail (module) column. This is to ensure cascaded styles are always applied to the correct column. ----------------------------------------------------------------------------- */ /* Defaults (Applies to all templates) */ #Content {width:auto;padding:15px 9px 75px;/* Height solves the background load problem - for IE */height:100%;/* For FF */min-height:750px;} /* Outer container */ #Sidebar {float:left;margin:0 15px 0 0} /* Left navigation */ #Col1, #SubCol1 {float:left} /* Left Content Column */ #Col2, #SubCol2 {float:right;text-align:left} /* Right Rail */ /* No Phase (Adds dividing line) */ #Phase0 #Content, #NoPhase #Content, .NoPhaseDivider {width:auto;border-top:#CAD6D5 solid 1px;} /* Two Column Layout (No Sidebar) */ #TwoColumn #Col1 {width:615px} #TwoColumn #Col2 {width:300px} /* Three Column Layout */ #ThreeColumn #Col1 {width:440px} #ThreeColumn #Col2 {width:300px} /* Three Column Layout (Narrow Quick Links) */ #ThreeColumnNarrow #Col1 {width:584px} /* This is the length needed to work with old layout */ #ThreeColumnNarrow #Col2 {width:156px} /* Homepage */ #Homepage #Col1 {width:330px} #Homepage #Col2 {width:585px} #Homepage #SubCol1, #Homepage #SubCol2 {width:285px} /* Two Column Wide */ #referral #Col1 {width:750px} /* Footer *************************************************************************** */ #Footer {width:auto;text-align:center;color:#7C7C7C;} #Footer .FooterLinks {font-size:10px;padding:10px 0;} #Footer .FooterLinks a{color:#0097C2;margin:0 3px;} #BottomLogo {width:201px;height:38px;margin:30px auto} #Partners {width:643px;margin:0 auto;} #Partners .top {width:643px;height:5px;overflow:hidden;background:url('/sbd/images/modules/partners_top.gif') 0 0 no-repeat;margin:5px 0 0;} #Partners .outer {width:643px;background:url('/sbd/images/modules/partners_bg.gif') 0 0 repeat-y;} #Partners .outer .inner {text-align:center;padding:0 10px;} #Partners .outer .inner a {margin:0 10px;} #Partners .outer .inner a img{vertical-align:middle;} #Partners .bottom {width:643px;height:5px;overflow:hidden;background:url('/sbd/images/modules/partners_bottom.gif') 0 0 no-repeat;} /* Dr. A Page */ .draContainer {width:607px; height:203px; background:url('/sbd/images/template/bg_dra_page.gif') 0 0 no-repeat;} .draTop {padding:13px 15px 20px 12px;} /* BMI Chart */ #bmi_chart table { border-left:1px solid #326980; } #bmi_chart thead th, #bmi_chart tfoot th { border:1px solid #326980; border-width:1px 0; text-align:center; } #bmi_chart .healthy { background:#e7eff6; } #bmi_chart .overweight { background:#fef8Db; } #bmi_chart .obese { background:#f9f1f2; } #bmi_chart .healthyhdr { background:#326980; font:bold 14px arial; color:#fff; text-align:center; } #bmi_chart .bmiBorder { border-right:1px solid #326980; } #bmi_chart tfoot { font-weight:bold; } #bmi_chart tbody tr td { border-right:solid 1px #326980; border-bottom:solid 1px #e1e1e1; text-align:center; } #bmi_chart thead tr th { border-right:solid 1px #326980; } #bmi_chart tfoot tr th { border-right:solid 1px #326980; } /* Referral Pages */ #referral h1 {font:normal 24px arial;color:#B11540;margin:10px 0 10px;padding:0;} #referral h2 {font:normal 24px arial;color:#008196;margin:0 0 15px;padding:0;} #referral h4 {font:normal 18px/normal arial;color:#008196;margin:0 0 5px 0;padding:0} #referral .hr {background:transparent url(/sbd/images/pages/referral/bg-hr-referral.gif) repeat-x 0 0; width:750px; height:7px; margin:3px 0;} #referral p {font-size:14px; line-height:18px;} .pad2b {padding-bottom:2px;} body #referral #col1 div {font-size:16px; line-height:18px;} #referral li, td {font-size:13px;} #referral .optionnumber {background:transparent url(/sbd/images/pages/referral/bg-option-num.gif) no-repeat 0 0; width:16px; height:16px; color:#fff; font-weight:bold; padding:0 0 0 4px;} #referral .ReferralInviteBody {background:transparent url(/sbd/images/pages/referral/bg-referral-option.gif) repeat-x 0 0; width:725px; height:110px; padding:25px 0 0 15px; margin:10px 0 0 15px; } .optionimage {float:left; margin:0 10px 0 0;} #referral .sharelink {float:left; padding:12px 0 0 0; width:405px; _width:410px;} .green {color:#00AEC5;} #referral #Col1 {font-size:14px;} #referral #Main { background:#FFFFFF; border:1px solid #CAD6D5; height:100%; min-height:750px; width:auto; } .flyer {position:absolute;left:160px;top:588px; _top:595px;} *+html .flyer{position:absolute;left:160px;top:598px;}