@charset "utf-8";
/* CSS Document */

html {
	color: #464646;
	background: #fff;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
body {
	font: normal normal normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
	color: #464646;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img { border: 0; }
sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub { top: 0.4em; }
select, input, button, textarea, button {
	font: normal normal normal 12px/16px Arial, Helvetica, sans-serif;
	vertical-align: middle;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
}


a {
	color: #24bbac;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}

.photo {
	margin: 6px;
	border: 1px solid #fa6862;
}

/**********************************************************
***  Skeleton
**********************************************************/
#wrapper {
	margin: 0 auto;
	width: 980px;
}
.inner-wrapper {
	position: relative;
	background: url(/images/background.gif) left top repeat-y;
}
.footer {
	position: relative;
	height: 26px;
	padding: 23px 14px 16px 16px;
	background: url(/images/footer.gif) left top no-repeat;
	font-size: 10px;
	color: #666666;
}
.footer a {
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}
.disclaimer {
	padding: 5px 14px 16px 16px;
	font-size: 10px;
	color: #666666;
}
/**********************************************************
***  Headers
**********************************************************/
.header {
	position: relative;
	z-index: 2;
	width: 980px;
	height: 147px;
	background: url(/images/header-default.gif) left top no-repeat;
}
.home .header {
	background: url(/images/header-home.gif) left top no-repeat;
}
.health-beauty .header, .nutrition-facts .header {
	background: url(/images/header-health-beauty.gif) left top no-repeat;
}
.recipes .header {
	background: url(/images/header-recipes.gif) left top no-repeat;
}
.active-recipe .header {
	background: url(/images/header-active-recipe.gif) left top no-repeat;
}
.about .header {
	background: url(/images/header-about.gif) left top no-repeat;
}
.newsroom .header {
	background: url(/images/header-newsroom.gif) left top no-repeat;
}
.frank .header {
	background: url(/images/header-frank.gif) left top no-repeat;
}

/*** Header links and search ***/
#home-link {
	display: block;
	position: absolute;
	width: 40px;
	height: 0;
	padding-top: 40px;
	overflow: hidden;
	top: 1px;
	left: 940px;
	background: url(/images/header-button-home.gif) left top no-repeat;
}
#home-link:hover {
	background-position: right top;
}
#frank-link {
	display: block;
	position: absolute;
	width: 59px;
	height: 0;
	padding-top: 139px;
	overflow: hidden;
	top: 0;
	left: 0;
}
#header-share {
	display: block;
	z-index: 10;
	position: absolute;
	width: 40px;
	height: 0;
	padding-top: 40px;
	overflow: hidden;
	top: 42px;
	left: 940px;
	background: url(/images/header-button-share.gif) left top no-repeat;
}
#header-share:hover, #header-share.active {
	background-position: right top;
}
#home-query {
	position: absolute;
	width: 150px;
	height: 18px;
	top: 95px;
	left: 789px;
	border: none;
	background: transparent;
}
#home-search {
	position: absolute;
	width: 40px;
	height: 0;
	padding-top: 40px;
	overflow: hidden;
	top: 82px;
	left: 940px;
	background: url(/images/header-button-search.gif) left top no-repeat;
}
#home-search:hover {
	background-position: right top;
}
#share-box {
	position: absolute;
	z-index: 2;
	top: 68px;
	left: -10000em;
	width: 260px;
	height: 180px;
	background: #daf5f2;
	border: 4px solid #e7736e;
}
#share-box.active {
	left: 697px;
}
#share-box a {
	display: block;
	float: left;
	margin: 9px;
	width: 110px;
	text-align: center;
}
#share-box a span {
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 39px;
}
#header-email-this span {
	background: url(/images/teal-email-this.gif) left top no-repeat;
}
#header-frank-this span {
	background: url(/images/teal-frank-this.gif) left top no-repeat;
}
#header-tweet-this span {
	background: url(/images/teal-tweet-this.gif) left top no-repeat;
}
#header-share-this span {
	background: url(/images/teal-share-this.gif) left top no-repeat;
}
#header-email-this span:hover, 
#header-frank-this span:hover, 
#header-tweet-this span:hover, 
#header-share-this span:hover {
	background-position: right top;
}


/**********************************************************
***  footer
**********************************************************/
#footer-social {
	position: absolute;
	top: 23px;
	left: 610px;
}
#footer-search {
	
}
#footer-query {
	position: absolute;
	top: 23px;
	left: 790px;
	width: 150px;
	height: 18px;
	padding: 4px 0 4px 6px;
	border: none;
	background: url(/images/footer-query.gif) center left no-repeat;
}
#footer-search-button {
	position: absolute;
	display: block;
	width: 40px;
	height: 39px;
	top: 16px;
	left: 945px;
	background: url(/images/bottom-search.gif) left top no-repeat;
}
#footer-search-button:hover {
	background-position: left bottom;
}

/**********************************************************
***  Navigation
**********************************************************/
#global-nav {
	position: relative;
	list-style: none;
	list-style-type:none;
}
#global-nav li {
	list-style-type:none;
	list-style: none;
}
#global-nav a {
	display: block;
	position: absolute;
	top: 0;
	width: 135px;
	height: 0px;
	padding: 70px 0 0 0;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	color: #10544E;
}
#nav-health-beauty-benefits a {
	left: 374px;
	background: url(/images/nav-health-beauty.gif) left top no-repeat;
}
#nav-easy-recipes a {
	left: 517px;
	background: url(/images/nav-easy-recipes.gif) left top no-repeat;
}
#nav-about-grapefruit a {
	left: 660px;
	background: url(/images/nav-about-grapefruit.gif) left top no-repeat;
}
#nav-newsroom a {
	left: 802px;
	background: url(/images/nav-newsroom.gif) left top no-repeat;
}
#global-nav a:hover {
	background-position: left -70px;
}
#global-nav a.active {
	background-position: left -140px;
}
/**********************************************************
***  Breadcrumbs
**********************************************************/
.breadcrumbs {
	font-size: 10px;
	color: #22baa9;
}
.breadcrumbs .active {
	color: #fb7a75;
}
.nutrition-facts .breadcrumbs {
	padding: 43px 20px 0 20px;	
}
.active-recipe .breadcrumbs {
	padding: 43px 20px 0 20px;	
}
.frank .breadcrumbs {
	padding: 43px 20px 0 20px;	
}


/**********************************************************
***  Containers
**********************************************************/
.content p, .content ul, .content ol {
	padding: .5em 0;
	color: #222222;
}
.content li {
	margin: 0 0 0 1.5em;
}
.content ul li {
	list-style-image: url(/images/bullet.gif);
}
.share-buttons a {
	display: inline;
	float: left;
	margin: 5px 0;
	width: 100px;
	height: 39px;
	padding: 0 0 0 49px;
	font-size: 11px;
	line-height: 39px;
	text-decoration: none;
	vertical-align: middle;
}
#print-this {
	background: url(/images/print-this.gif) left top no-repeat;
}
#email-this {
	background: url(/images/email-this.gif) left top no-repeat;
}
#tweet-this {
	background: url(/images/tweet-this.gif) left top no-repeat;
}
#share-this {
	background: url(/images/share-this.gif) left top no-repeat;
}
#print-this:hover, 
#email-this:hover, 
#tweet-this:hover, 
#share-this:hover, 
#add-comment:hover {
	text-decoration: underline;
	background-position: left bottom;
}

/*** Meet Frank ***/
.home .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/content-background-home.gif) left top no-repeat;	
}
.home .content {
	float: left;
	width: 581px;
	margin: 0 0 0 6px;
	padding: 43px 20px 0 20px;
}



/*** home page boxes ****/
#home-boxes {
	position: relative;
	width: 950px;
	height: 197px;
	background: url(/images/home-boxes.gif) left top no-repeat;
}
#home-box-eat {
	position: absolute;
	width: 115px;
	height: 125px;
	top: 56px;
	left: 182px;
}
#home-box-eat-photo {
	position: absolute;
	width: 148px;
	height: 184px;
	top: 6px;
	left: 7px;
}
/*#home-box-glam {
	position: absolute;
	width: 130px;
	height: 125px;
	top: 56px;
	left: 485px;
}
#home-box-glam-photo {
	position: absolute;
	width: 148px;
	height: 184px;
	top: 6px;
	left: 324px;
}*/

#home-box-glam {
	position: absolute;
	width: 303px;
	height: 186px;
	top: 4px;
	left: 324px;
	background: #fae3e2 url(/images/home-glam-boxBG.jpg) top left no-repeat;
}
#home-box-glam-copy {
	margin-left:150px;
	padding: 50px 10px 10px 5px;
}
#home-box-updates {
	position: absolute;
	width: 285px;
	height: 125px;
	top: 56px;
	left: 650px;
}

/*** Health & Beauty ***/
.health-beauty .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/background-health-beauty.gif) left top repeat-y;
	border-bottom: 10px solid #fb7a75;
}
.health-beauty .content {
	float: left;
	width: 581px;
	margin: 0 0 0 6px;
	padding: 43px 20px 0 20px;
	background: url(/images/content-background-health-beauty.gif) left top no-repeat;
}
.health-beauty .rail {
	float: left;
	width: 323px;
	min-height: 574px;
	background: url(/images/rail-health-beauty.gif) left top no-repeat;
	color:#FFFFFF;
}

.health-beauty .rail a, 
.newsroom .rail a {
	color:#FFFFFF;
	text-decoration:underline;
	font-weight:bold;
}
.health-beauty .rail a:hover,
.newsroom .rail a:hover {
	color:#E8E8E8;
	text-decoration:none;
	font-weight:bold;
}

/*** Beauty tips and nutrition facts ***/
.nutrition-facts .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/background-beauty-nutrition.gif) left top no-repeat;	
}
.nutrition-facts .content {
	float: left;
	width: 581px;
	margin: 0 0 0 6px;
	padding: 43px 20px 0 20px;
}
.nutrition-facts .rail {
	float: left;
	padding: 24px 0 0 20px;
	width: 299px;
}
#nutrition-facts-footer {
	position: relative;
	margin: 0 auto;
	padding: 25px 0 15px 0;
	width: 880px;
	height: 150px;
	background: url(/images/nutrition-facts-footer.gif) left 25px no-repeat;
}
#get-the-charts {
	position: absolute;
	top: 101px;
	left: 542px;
}
#order-the-wheel {
	position: absolute;
	top: 101px;
	left: 724px;
}

/*** Recipes ***/
.recipes .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/background-recipes.gif) left top no-repeat;
}
.recipes .content {
	float: left;
	width: 581px;
	height: 256px;
	margin: 0 0 0 6px;
	padding: 43px 20px 0 20px;
}
.recipes .content h2 {	
	font: bold 16px/18px Verdana, Arial, Helvetica, sans-serif;
}

.recipes .rail {
	position: relative;
	float: left;
	width: 323px;
	height: 299px;
}
.recipes #recipe-search-field {
	position: absolute;
	top: 47px;
	left: 20px;
	width: 221px;
	height: 18px;
	border: none;
}
.recipes #recipe-search-btn {
	position: absolute;
	display: block;
	width: 55px;
	height: 21px;
	top: 45px;
	left: 254px;
	background: url(/images/recipe-search.gif) left top no-repeat;
}
.recipes #recipe-search-btn:hover {
	background-position: left bottom;
}
#recipe-carousel {
	width: 950px;
	background: #d3f2ee;
}

/*** Active recipe ***/
.active-recipe .container {
	position: relative;
	margin: 0 auto;
	width: 950px;
	background: url(/images/background-active-recipe.gif) left top no-repeat;	
}
.active-recipe .content {
	float: left;
	width: 581px;
	margin: 0 0 0 6px;
	padding: 43px 20px 0 20px;
}
.active-recipe .rail {
	float: left;
	padding: 24px 0 0 20px;
	width: 299px;
	min-height: 574px;
}
.active-recipe #recipe-search-field {
	position: absolute;
	top: 47px;
	left: 647px;
	width: 221px;
	height: 18px;
	border: none;
}
.active-recipe #recipe-search-btn {
	position: absolute;
	display: block;
	top: 45px;
	left: 881px;
	width: 55px;
	height: 21px;
	background: url(/images/recipe-search.gif) left top no-repeat;

}
.active-recipe #recipe-search-btn:hover {
	background-position: left bottom;
}
.recipe-rater {
	padding: 10px 0 8px 2px;
}

/*** Comments ***/
#comments-box {
	margin: 34px 0 0 0;
	width: 599px;
	background: url(/images/background-comments.gif) left top no-repeat;
}
#add-comment {
	display: block;
	float: left;
	margin: 20px 0 10px 0;
	width: 100px;
	height: 39px;
	padding: 0 0 0 49px;
	font-size: 11px;
	line-height: 39px;
	text-decoration: none;
	vertical-align: middle;
	background: url(/images/add-comment.gif) left top no-repeat;
}
#add-comment:hover {
	text-decoration: underline;
}
.comment {

}

/*** About ***/
.about .container {
	margin: 0 auto;
	width: 950px;
	background: #fbe797;
}
.about .content {
	float: left;
	width: 635px;
	background: url(/images/content-background-about.gif) left top no-repeat;
}
.about .rail {
	position: relative;
	float: left;
	width: 315px;
	height: 625px;
	background: url(/images/fpo-about-rail.gif) left top no-repeat;
}
.about .intro {
	padding: 43px 20px 0 20px;
	border-left: 3px solid #f0994c;
	border-bottom: 8px solid #f39b4d;
	background: url(/images/content-background-about.gif) right top no-repeat #ffffff;
}

/*** Newsroom ***/
.newsroom .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/background-newsroom.gif) left top repeat-y;
}
.newsroom .content {
	float: left;
	width: 587px;
	padding: 43px 20px 0 20px;
	background: url(/images/content-background-newsroom.gif) left top no-repeat;
}
.newsroom .rail {
	position: relative;
	float: left;
	width: 323px;
	background: url(/images/rail-newsroom.gif) left top no-repeat #e48568;
	color:#FFFFFF;
}
.newsroom .rail #resource-box {
	margin: 50px 20px 20px 20px;
	padding:5px;
}

#images-carousel {
	width: 950px;
	border-top: 8px solid #e48568;
	background: #d3f1ee;
}

/*** Meet Frank ***/
.frank .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/content-background-frank.gif) left top no-repeat;	
}
.frank .content {
	float: left;
	width: 581px;
	margin: 0 0 0 6px;
	padding: 20px 20px 0 20px;
}
.frank .rail {
	float: left;
	padding: 24px 0 0 20px;
	width: 299px;
	min-height: 574px;
}

.frank .ecardThumb a {
	text-decoration:none;
}
.frank h1 {
	margin: 8px 20px;
}

.frank #formDiv {
	float:left;
	display:inline;
	width:350px;
	margin-left: 20px;
}
.frank #formCardDiv {
	float:right;
	display:inline;
	width: 475px;
	margin-right: 20px;
}

/*** Default page ***/
.default .container {
	margin: 0 auto;
	width: 950px;
	background: url(/images/content-background-default.gif) left top no-repeat;	
}
.default .content {
	float: left;
	width: 910px;
	padding: 40px 20px 20px 20px;
}


/**********************************************************
***  Headings
**********************************************************/
h1 {
	font-size: 21px;
	color: #fa6862;
}
.content h1 {
	margin: 32px 0 8px 0;
}
.nutrition-facts h1 {
	margin: 8px 20px;
	float:left;
	display:inline;
	width:274px;
}
.nutrition-facts h2 {
	margin: 8px 20px;
	padding-top:10px;
	float:left;
	display:inline;
	font-size: 18px;
	line-height: 18px;
	color: #24bbac;
}
.active-recipe h1 {
	margin: 8px 20px;
	/*padding: 15px 0 0 0;*/
	font: bold 18px/20px Verdana, Arial, Helvetica, sans-serif;
}



/********************************************************/
/* forms */
/********************************************************/

#comments-form label {
	font: 11px Tahoma, Helvetica, sans-serif;
	color:#666666;
	display:block;
	padding: 2px;
	overflow:hidden;
}
#comments-form input,
#comments-form select,
#comments-form textarea {
	font: 12px Arial, Helvetica, sans-serif;
	border: 1px solid #999999;
	margin: 2px;
	padding: 2px;
}
#comments-form .formAlert {
	color: #990000;
	font-weight:bold;
}
#comments-form input.noborder {
	border:none;
}

p.alert {
	color:#990000;
}
.submit-button {
	display: block;
	width: 95px;
	height: 36px;
	background: url(/images/submit.gif) left top no-repeat;
}
.submit-button:hover {
	background-position: left bottom;
}

/********************************************************/
/* comments */
/********************************************************/

.commentBox {
	background:none;
	border-bottom:1px dashed #E8E8E8;
}
.commentBox h4{
	font: bold 13px Verdana, Arial, Helvetica, sans-serif;
}
.white {
	background: #FFF;
}
.gray {
	background: #F8F8F8;
}
.commentCopyLeft {
	background:none;
	float:left;
	display:inline;
	padding: 5px;
	width: 150px;
}
.commentCopyRight {
	background:none;
	border-left:1px solid #F1F1F1;
	float:left;
	display:inline;
	padding: 9px;
	width: 300px;
}


/********************************************************/
/* pagination elements */
/********************************************************/

.pagination {
	margin: 6px auto;
	text-align:center;
	display:block;
}
.pagination a {
	padding: 1px 6px;
	margin: 1px 3px;
}
.pagination a:hover {
	padding: 1px 6px;
	margin: 1px 3px;
	background:#E8E8E8;
}
.pagination span.pagingOn {
	padding: 1px 6px;
	margin: 1px 3px;
	background:#F8F8F8;
	border: 1px solid #E8E8E8;
}


@import ("carousels.css");