﻿
/* CSS Document */
body {
background-color:#fff;
color:#505050;
font-family:helvetica,Arial,Verdana;
font-size:11px;
margin:0 auto;
}
img { border:0;}

* { padding:0px; margin:0px;}

   
.container {
position: relative;
background:transparent url(../images/starburst_background.jpg) top center no-repeat;
height:836px;
margin:0 auto;
width:965px;
}

.container-short {
position: relative;
background:transparent url(../images/starburst_background_short.jpg) top center no-repeat;
height:836px;
margin:0 auto;
width:965px;
}

/*Headings and Fonts */
h1, .heading1  {font-size:22px; color:#004b8d; font-weight:bold; text-transform: uppercase; margin-left:40px; }
h2, .heading2 {font-size:12px; font-weight:bold; text-transform: uppercase;}
h3, .heading3 {font-size:14px; color:#004b8d; font-weight:bold; }
h4, .heading4 { font-size: 12px; color: #004b8d; font-weight: bold; text-transform: uppercase; word-spacing: 2px; }

.font12 { font-size:12px;}
.fontwhiteupper { color:#fff; text-transform:uppercase;}
.fontbrown { color:#b0690f;}
.font-yellow {color:#fff2ac}
.font-gray {color: #6a6a6a;}
.font-orange {color: #ea7124;}
.bluelarge { font-weight:bold; font-size:24px; color:#004b8d; text-transform:uppercase; padding-bottom:10px;}
.bluemed { font-weight:bold; font-size:14px; color:#004b8d; text-transform:uppercase;}
.lightbluemed { font-weight:bold; font-size:12px; color:#0177a1; text-transform:uppercase;}

/*Links */
a { cursor: pointer }
a:link, a:visited {color: #ea7124; font-weight:bold; text-transform:uppercase; text-decoration:none;}
a:hover { text-decoration:underline;}

a.white:link, a.white:visited, a.white:active {color: #fff; font-weight:bold; text-transform:uppercase; text-decoration:none;}
a.white:hover { text-decoration:underline;}

a.fontbrown, a.fontbrown:link, a.fontbrown:visited, a.fontbrown:active {color: #b0690f; text-decoration:none; text-transform:none; }
a.fontbrown:hover { text-decoration:underline;}

a.fontblue, a.fontblue:link, a.fontblue:visited, a.fontblue:active {color: #0a4158; text-decoration:underline; text-transform:none; }
a.fontblue:hover { text-decoration:underline;}

a.redsmall:link, a.redsmall:visited, a.redsmall:active 
{
color:#b63800; font-weight:bold; text-decoration:none; font-size:9px; 
 padding-right:5px;}
a.redsmall:hover {text-decoration:underline;}

a.arrow-small {
	font-size:9px;
	background: url(../images/arrow-orange.gif) center right no-repeat;
    padding-right: 8px;
	
	}
a.arrow-large {
	font-size:12px;
	background: url(../images/arrow-orange.gif) center right no-repeat;
    padding-right: 13px;
	}
	
a.brown-arrow-small {
	font-size:12px;
	background: url(../images/small-brown-arrow.png) center right no-repeat;
    padding-right: 10px;
    color:#ac4300;
    font-weight: bold;
    text-transform:none;
	}
a.fb
    {
	background: url(../images/icon-fb.png) center left no-repeat;
    padding:5px 0px 5px 25px;	
	}
	


/*Page Banner */
.logos {
float: left;
height:108px;
position: relative;
left:17px;
}


/*navigation*/
.topnav { float:right; padding-right:9px; height:32px; position: relative; z-index: 101} /* must be greater than pledge UC div */
.topnav li { display:inline; float:left; border-right: 2px solid #CCC; padding-right: 1px; position: relative; z-index: 101 }
.topnav div { position: relative; z-index: 1 }
.topnav li a { display:block; height: 32px; text-indent: -10000px; overflow: hidden }

.topnav li.liPartners { border-right: none; padding-right: 0 }
.topnav li.liPledge { height: 32px; width: 112px }

.topnav li.liPledge a.primary { background: url(/images/nav-pledge.gif) no-repeat top left; width: 112px } 
.topnav li.liCommunity a.primary { background: url(/images/nav-community.gif) no-repeat top left; width: 120px }
.topnav li.liAbout a.primary { background: url(/images/nav-about.gif) no-repeat top left; width: 194px }
.topnav li.liBL a.primary { background: url(/images/nav-bl.gif) no-repeat top left; width: 157px }
.topnav li.liPartners a.primary { background: url(/images/nav-partners.gif) no-repeat top left; width: 130px  }

.topnav li.liPledge a.primary:hover { background: url(/images/nav-pledge-over.gif) no-repeat top left; }
.topnav li.liCommunity a.primary:hover { background: url(/images/nav-community-over.gif) no-repeat top left; }
.topnav li.liAbout a.primary:hover { background: url(/images/nav-about-over.gif) no-repeat top left;  }
.topnav li.liBL a.primary:hover { background: url(/images/nav-bl-over.gif) no-repeat top left;  }
.topnav li.liPartners a.primary:hover { background: url(/images/nav-partners-over.gif) no-repeat top left;  }

.topnav li ul { display:none; position: absolute; top: 31px; left: -2px; z-index: 10001; border: 2px solid #ccc; border-top:none; background: #FFF; padding-bottom: 2px; }
.topnav li.liPartners ul {width: 132px; }
.topnav li.liBL ul {width: 158px; }
.topnav li ul li {  display: block; float: none; border: none; background: #d0edf6; border-top: 2px solid #a0b6bd; height: auto; padding: 1px; margin: 0 2px }
.topnav li ul li a, .topnav li ul li a:visited { display: block; color:#0095da; text-indent: 0px; background: #d0edf6; height: auto; padding: 5px; text-transform: none }
.topnav li ul li a:hover { background: #4badd6; color: white; text-decoration: none }

.topnav li.liPartners a.primary:hover ul { display: block }

/*Lists */
.partners, .bl {  position: relative; top:10px; left:48px; }
.partner-nav { width:126px;}
.partner-nav ul { margin-top: -1px; }
.partner-nav li { list-style:none; padding:0; height: 28px; border-bottom: 1px solid #beae84; overflow: hidden }
.partner-nav li.last { border-bottom:none; }

.partner-nav a, .partner-nav a:visited{ color: #0095da; text-transform: none; height: 24px; line-height: 24px; padding:0 3px 0 5px; margin: 2px 1px; display:block }
.partner-nav a:hover, .partner-nav a.selected { background-color: #4badd6; color:#fff !important; text-transform: none; width:116px; text-decoration: none  }
.partner-nav a.nav-round:hover, .partner-nav li.nav-round a.selected{ background:url(/images/partner-rounded-nav-back.png) no-repeat -1px -1px ; color:#fff !important; text-transform: none; }
.partner-nav li.last a:hover, .partner-nav li.last a.selected { background:url(/images/partner-rounded-nav-back-bottom.png) no-repeat -1px -3px; color:#fff !important; text-transform: none; }
/* biggest loser list */
.bl-nav { width:150px; margin-left: -1px; }
.bl-nav ul { margin: -3px 0 0 0; padding: 0;  }
.bl-nav li { list-style:none; padding:0; height: 29px; overflow: hidden }
.bl-nav li.last { border-bottom:none; }
.bl-nav a, .bl-nav a:visited{ color: #0095da; text-transform: none; padding:0px 5px 0px; margin: 3px 3px 3px 2px; display:block; height: 24px; line-height: 24px; font-weight: bold; }
.bl-nav a:hover, .bl-nav a.selected { background-color: #4badd6; color:#fff; text-decoration: none; }
.bl-nav li.first a:hover, .bl-nav li.first a.selected { background:url(/images/bl-rounded-nav-back.png) no-repeat 0 0; color:#fff; text-transform: none;   }
.bl-nav li.last a:hover, .bl-nav li.last a.selected { background:url(/images/bl-rounded-nav-back-bottom.png) no-repeat 0 0; color:#fff; text-transform: none;   }

ul.horizontal-list  { list-style-type: none; }
.horizontal-list li { float: left; height: 15px; line-height: 15px; margin-right: 3px; }
.horizontal-list li img { margin: 0; padding: 0; }

ul.horizontal-list-logos  { list-style-type: none }
.horizontal-list-logos li { display: inline; margin-right: 3px; }
.horizontal-list-logos li img { margin: 0; padding: 0; }

.horizontal-list-gray li.last { border:none }
.horizontal-list-gray li { display:inline; float:left; padding:0px 20px 0px 20px; border-right: #666 1px solid; height:10px  }
.horizontal-list-gray a, .horizontal-list a:visited { color: #666666; font-size:9px; text-transform:none; vertical-align: text-top  }
.horizontal-list-white { margin:0px 0px 0px 3px;}
.horizontal-list-white li { display:inline; float:left; padding:3px 15px 0px 7px; height:16px; background:url(../images/small-white-arrow.gif) center left no-repeat;}
.horizontal-list-white a, .horizontal-list-white a:visited { color: #fff; font-size:12px; vertical-align: text-top; display: block  }
.blue-list {color:#20668b; font-weight:bold; margin-left: 25px;  list-style-type: none}
.blue-list li   {margin: 2px 0; }

/*Pound Counter */
.pound-counter { float:left; padding: 0px; margin-top: 5px; border-bottom: solid 1px black; border-top: solid 1px black; border-right: solid 1px black; height: 20px;}
.participant-counter { float:left; padding: 0px; margin-top: 5px;  border-bottom: solid 1px black; border-top: solid 1px black; border-right: solid 1px black; height: 20px;}
#participant-counter { float:left; padding:0px}
.counters { float:left; margin-left:100px; width:650px;}
.counter-label { float:left; width:180px; margin-left:5px; padding:3px 0px 0px 0px}
.counter-border { width:10px; background:url(/images/counter-border.gif) top left no-repeat; float:left; height:32px;}

/* Home Page */
#main-heading { background: url(/images/main-heading.png) top left no-repeat; width: 643px; height: 105px; position: absolute; top: 104px; left: 45px; z-index: 99; }
#flashmap { position: absolute; top: 169px; left: 7px; z-index: 2; margin: 0; }
.no-flash-content { display: none; margin: 160px 0px 0px 160px; color: #0a4158; font-family: Arial; font-size: 12px; font-weight: bold; }
#box-thankyou { padding: 15px 0px 0px 366px; }
#box-text {padding: 0px 0px 0px 360px; color: #0a4158; font-family: Arial; font-size: 12px; font-weight: bold; line-height: 13px;  width: 280px; text-align: center; }

/*Leaderboard*/
.leaders { width: 235px; float: right; height:414px; position: relative; top:0px; margin:8px 6px 0px 0px; font-size:12px; font-weight:bold; padding-top:8px}
.leaderboard { height:250px; width:210px; overflow: auto; zoom: 1}
.stateleaderboard { height:360px; width:220px; overflow: auto; margin-left: 10px; zoom: 1}
.leaderboardrow { padding:5px 0px 15px 5px; background: url(/images/border-gray-trans.gif) no-repeat bottom left; zoom: 1}
.leaders-bottom {padding: 0px 8px 1px 12px; margin: 0}
.facebooklinks {  padding: 3px 0px 0px 5px; position:relative; color:#b63800; font-weight:bold; text-decoration:none; font-size:9px; }
.facebooklinks a, .facebooklinks a:visited, .facebooklinks a:active {color:#b63800; font-weight:bold; text-decoration:none; font-size:9px; 
 padding-right:5px; padding-top:5px; padding-bottom:5px; line-height:26px;}
 .facebooklinks a:hover { text-decoration: underline;}
 .leadersheadingdiv { margin: 0px 0px 0px 10px; padding:5px 10px 15px 20px; background: url(/images/border-gray-trans.png) bottom left no-repeat;}

/*Bottom Content*/
.bottomcontent { position:relative; top:0px; left:0px; background-color: transparent; margin:0px 7px 0px 7px; height:300px; }
.bottomleft { float:left; width: 473px; height:315px;}
.bottomright {float:left; width:224px; height:185px; padding: 10px 5px 10px 5px; background-color:#fff; margin-top:17px; }
.left-border { float:left; width:5px; height:305px; background:url(/images/gray-border-right.jpg) top left repeat-y; position:relative; top:17px;}
.sponsors { background:url(/images/gray-border-top.jpg) top left repeat-x; width: 462px; float:left; height:85px; padding:10px 5px 5px 5px; }
.sectioncontent-row { margin: 5px 10px 12px 10px; overflow: auto;}
.sectioncontent-top-row { margin: 0px 10px 12px 10px; overflow: auto;}
.footer { background:url(/images/gray-border-footer.jpg) top left repeat-x; padding:10px; height:13px;}

/*State Page*/
.statecontent { float:left; width:660px; margin:-32px 30px 0px 30px;}
.statecontent .pledge { right: 270px; top: 100px }
.state-info { float:left; clear:left; margin:10px 30px 0px 30px; height:100px; width:350px;}
.state-stats { float:left}
.state { float:left; margin-top:5px;}
.pledge {position:absolute; top:85px; right: 25px; z-index: 100}
.statenewsfeed {width: 100%; height: 220px; overflow: auto; font-size:14px; font-weight:bold;}
.newstabheading {font-size:14px; font-weight:bold; text-transform: uppercase; padding-bottom: 5px; }
.newsfeedrow { padding:10px 0px 10px 0px; background: url(/images/long-trans-back.png) top left repeat-x;}
.newsfeeddate {font-size: 12px; font-weight: bold; color: #808080; font-style: italic;}

/*About PFP Page*/
.container-about {background:url(/images/about-background.gif) no-repeat 37px 30px; width:960px; height: 645px; position: relative; top:20px; left:0px;}
.white-box-footer {background:url(/images/white-round-background-bottom.png) bottom center no-repeat; width: 280px; height:7px;}
.container-whiteboxes {margin:12px 30px 30px 53px;}
.container-whiteboxes h2 { font-size:13px; font-weight:bold; line-height:18px; text-transform: none; padding-right:20px;}
.white-box {  background: url(/images/white-round-background-top.png) no-repeat top left ; 
              width: 280px; padding:7px 0; float: left; margin-right:10px; margin-top:5px; overflow: hidden; position: relative  }
.white-box-content { background-color:#fff; color:#6a6a6a; font-size: 12px; font-weight:bold; line-height:16px; padding:0 9px; width: 262px; height: 270px; overflow: hidden}
.row2               { height: 165px }
.row2 img          { margin-right: 5px; }
.row2 a             { position: absolute; bottom: 13px; right: 3px }
.white-box-content p { margin:5px 0 1px; padding: 0; height: 97px;}
.white-box-content p.right { margin:5px 0 3px 7px; float:left; width:185px;}

/*Community PFP Page*/
.container-community {background:url(/images/community-background.gif) 37px 70px no-repeat; width:960px; height: 1068px; position: relative; top:20px; left:0px;}
.container-community h2 {font-size:13px; font-weight:bold; text-transform:none; padding-right:30px;}
#community-summary { width: 65%; float: left }
#community-summary * { margin-left: 0 }
#facebook-logo  { margin-right: 15px;}
.fanButton { margin: 0; padding: 0; position: absolute; right: 35px; top: 23px; width: 244px; height: 34px; }
.step-by-step {padding:20px 40px 0px 50px; font-size:12px; font-weight:bold;}
.step-by-step {padding:20px 40px 0px 50px; font-size:12px; font-weight:bold;}
.step-by-step img { clear: right; margin-bottom:5px}
.step {width:198px; margin-right:19px; float: left;}
.step-row1 {height:255px; clear:both; margin-top:20px;}
.step-row2 {height:322px; clear:both;}
.step-row3 {height:220px; clear:both;}
.step-by-step a { cursor: pointer }
.step-by-step a:link, .step-by-step a:visited {color: #0177a1; font-size:12px; font-weight:bold; text-transform:none; text-decoration:none;}
.step-by-step a:hover { text-decoration:underline;}


/*Biggest Loser Page*/
.container-biggest {background:url(/images/Background_BiggestLoser4.gif) 45px 33px no-repeat; width:960px; height: 495px; position: relative; top:20px; left:0px;}
.container-biggest h2 {font-size:13px; font-weight:bold; text-transform:none; padding-right:30px;}
.container-biggest h1 {margin-left:50px;}

.video-nav {position: absolute; top: 33px; left: 200px; width: 640px; height: 380px; padding: 7px 10px; }
.video-nav h3 {text-transform:uppercase; color: #505050 }

#video-list-container {position:absolute; top:35px; left:14px; height: 245px; width: 223px; overflow: auto;  }
#video-list-container ul { margin: 0; padding: 0; list-style-type: none; border: 2px solid #C0C0C0; border-bottom: none; }
#video-list-container ul li { margin: 0; padding: 1px; border-bottom: 2px solid #CCC }
#video-list-container ul li a { display: block; padding: 5px 8px; cursor: pointer;  text-decoration: none }
#video-list-container ul li a h3 { font-size: 13px; color: #ec700a; text-transform: none; margin: 0 0 1px 0}
#video-list-container ul li a p  { color: #7b7b7b; font-style: italic; font-weight: bold; }
#video-list-container ul li a:hover { background-color: #9ed3e9 }
#video-list-container ul li a:hover h3 { color: #20668b; }


#tips, ul#exercise, #recipes { display: none }

div.videos  { position: absolute; left: 0px; top: 44px; width: 660px; height: 250px; }
div.videos img { position: absolute; bottom: 22px; left: 15px; width: 275px; height: 240px; }
div.videos div { float: right; width: 340px; height: 300px; overflow: auto; margin-right:0; padding-right:10px }
div.videos div.full { float: right; width: 630px; height: 320px; overflow: auto; margin-right:0; padding-right:10px }
div.videos div p { margin-bottom: 15px; margin-top: 0; }
div.cornerImage { position: absolute; bottom: 22px; left: 15px; width: 275px; height: 85px; text-align: right; vertical-align: bottom; font-size:12px; font-weight:bold;}
div.videos a { position: absolute; top: 306px; right: 15px; color: #ea7124; font-weight: bold; text-transform: uppercase;}

div.blcontent  { position: absolute; left: 0px; top: 0px; width: 505px; height: 250px; }
div.blcontent img { position: absolute; top: 0px; left: 4px; width: 275px; height: 240px; }
div.blcontent div { float: right; width: 206px; height: 330px; overflow: auto; margin-right:0; padding-right:10px }
div.blcontent div p { margin-bottom: 15px; margin-top: 0; }
div.blcornerImage { position: absolute; bottom: 5px; left: 4px; width: 275px; height: 85px; text-align: right; vertical-align: bottom; font-size:12px; font-weight:bold;}

#video-player-container {position: absolute; top: 35px; left: 240px; }
#content-container {position: absolute; top: 35px; left: 150px; }

/* Other pages */
.other-content { width: 647px; height: 318px; padding: 0 20px; position: relative; top: 20px; overflow: auto; }
.container-other { background: url(/Images/other-background.gif) no-repeat; width: 717px; height: 386px; position: relative; top:40px; left:120px; margin-bottom: 83px;}
.other-content ul, .other-content ol { margin:0 0 0 20px }
.other-content ul li, .other-content ol li { margin-bottom: 15px; }
.other-content ul li ul li { margin-bottom: 0 }
.other-content p { margin-bottom: 15px; }
.other-content a { text-transform: none; font-size: inherit }

/*Our Partners Page*/
.container-partners{background:url(/images/partners_background_large.gif) 45px 33px no-repeat; width:960px; height: 495px; position: relative; top:20px; left:0px;}
.container-partners h2 {font-size:13px; font-weight:bold; text-transform:none; padding-right:30px;}
.container-partners h1 {margin-left:50px;}

.partners { width: 800px }

.partners-logo    { margin-bottom: 10px; height: 52px; }

.partners-content { position: absolute; top: 14px; left: 150px;  }
.partners-content ul { margin-left: 30px; }
.partners-main     { margin-bottom: 20px; height: 260px; }
.partners-main img { float: left }
.partners-copy   { margin-left: 240px; width: 400px; }
.partners-copy  p { margin-bottom: 15px  }
.partners-copy a.arrow {
	font-size:11px;
	font-weight: bold;
	background: url(../images/arrow-orange.gif) center right no-repeat;
	padding-right: 13px;
	text-transform: none; 
    }

.partners-bottom a { float: left; margin-right: 20px; margin-top: 15px }

.partners-bottom a.donate-now { float: right; display: block; text-indent: -100000px; padding: 0; margin: 0;  width: 108px; height: 30px; background: #FFF url(/Images/feed-america-donate.gif) no-repeat top left; }


.eat-better-content { position: absolute; top: 16px; left: 138px; width: 676px;}
.eat-better-content .header-bar { padding: 5px 10px; }
.eat-better-content .header-bar h3 { font-size: 14px; text-transform: uppercase; color: #505050; }
.eat-better-content h4 { color: #ea7124; font-size: 14px; text-transform: uppercase }
.eat-better-content a { text-transform: none; }
.recipe-content { width: 378px; height: 189px; padding: 5px 0 15px 10px; float: left; }
.recipe-content #recipe2, 
.recipe-content #recipe3,
.eat-better-content #main2,
.eat-better-content #main3 { display: none }
.recipe         { height: 82px }

.more-recipes-link { padding-right: 15px; height: 25px;  }
.more-recipes-link a { float: right;  }
.other-recipes a { padding: 3px; background: #fff; display: block; float: left; margin-right: 4px }
.other-recipes a:hover, .other-recipes a.selected { background: #4badd6 }


.recipe-main-image { float: right; padding-right: 13px }
.eat-better-bottom { float: left; clear: both; padding: 37px 0 10px; background: #fff url(/Images/gradient-border.gif) repeat-x top left; width: 673px; height: 50px; }
.eat-better-bottom img { float: left; padding-left: 20px; }
.eat-better-bottom p { width: 60%; float: right; padding-right: 15px }

.container-partners p.legal { margin-top: 64px; font-size: 9px; color: #555 }

/*Dialog Pages*/
.dialog p { margin-top:15px; line-height:16px; color:#4badd6; font-weight:bold; font-size:14px; }
#pledge-dialog { display: none }

#foodBanks { width: 440px; }

/*Misc and Global Styles*/
.clear { clear:both}
.fl { float:left}
.fr { float:right;}
.margin100 { margin-left:100px;}
.margin20 { margin-left:20px;}
.margin-top10 { margin-top:10px;}
.margin-left15 { margin-left:15px;}
.margin-right15 { margin-right:15px;}
.margin-top5{ margin-top:5px;}

