/***************/
/* main layout */
/***************/
body { margin: 0; padding: 0; background: #8ddc15 url(../images/bg.png) repeat-x left top; }

#bodyWrapper    { width: 1064px; margin: auto; background: #fff; color: #2c3233; }
#contentWrapper { width: 992px; margin: auto; padding-bottom: 4px; }

/* specific link colours for this site */
a:link 	  { color: #52851e; text-decoration: none; }
a:visited { color: #52851e; text-decoration: none; }
a:hover   { color: #52851e; text-decoration: underline; }
a:active  { color: #52851e; text-decoration: underline; }


/*******************/
/* header elements */
/*******************/

#header { background: transparent url(../images/logo.jpg) no-repeat scroll 15px 0px; margin-bottom: 21px; }

#top { padding-top: 11px; }

#rss { padding-bottom:37px; padding-right:20px;}

#top a { display: block; float: left; height: 33px; }
#top a span { display: none; }
#top a#header-starter       { width: 128px; background: transparent url(../images/header-starter.png) no-repeat scroll 0px 0px; margin-right: 3px; }
#top a#header-starter:hover { background-position: -128px 0; }
#top a#header-main          { width: 128px; background: transparent url(../images/header-main.png) no-repeat scroll 0px 0px; margin-right: 3px; }
#top a#header-main:hover    { background-position: -128px 0; }
#top a#header-dessert       { width: 128px; background: transparent url(../images/header-dessert.png) no-repeat scroll 0px 0px; margin-right: 9px; }
#top a#header-dessert:hover { background-position: -128px 0; }
#top a#header-recipe        { width: 168px; background: transparent url(../images/header-recipe.png) no-repeat scroll 0px 0px; margin-right: 11px; }
#top a#header-recipe:hover  { background-position: -168px 0; }

#mainHeader { background: #f4f4f4; color: #2f3537; padding: 10px; height: 272px; }

#nav         { float: left; width: 184px; }
#headerFlash { float: right; width: 787px; height: 272px; }

#nav > ul                { list-style: none; margin: 0; padding: 0; }
#nav > ul > li           { margin: 0; padding: 0; }
#nav > ul > li > a       { display: block; margin: 0; padding: 0; width: 184px; height: 34px; background: transparent no-repeat scroll 0px 0px; }

#nav > ul > li > a#nav-home                 { background-image: url(../images/nav/home.png); }
#nav > ul > li > a#nav-health-and-nutrition { background-image: url(../images/nav/health-and-nutrition.png); }
#nav > ul > li > a#nav-recipes              { background-image: url(../images/nav/recipes.png); }
#nav > ul > li > a#nav-education            { background-image: url(../images/nav/education.png); }
#nav > ul > li > a#nav-environment          { background-image: url(../images/nav/environment.png); }
#nav > ul > li > a#nav-free-information     { background-image: url(../images/nav/free-information.png); }
#nav > ul > li > a#nav-in-the-news          { background-image: url(../images/nav/in-the-news.png); }
#nav > ul > li > a#nav-about-us             { background-image: url(../images/nav/about-us.png); }

#nav > ul > li > a:hover   { background-position: -184px 0px !important; }
#nav > ul > li > a > span  { display: none; }


/********************/
/* content elements */
/********************/


#sidebar  { width: 273px; float: left; }
#mainArea { width: 702px; float: right; }

/* sidebar links are not good as green, nor are front boxes */
#sidebar a,
#sidebar a:link,
#sidebar a:visited,
#sidebar a:hover,
#sidebar a:active,
.box-front-main a,
.box-front-main a:link,
.box-front-main a:visited,
.box-front-main a:hover,
.box-front-main a:active { color: #2c3233; }

.content  { background: #f3f3f3; padding: 10px; margin-bottom: 10px; }

.box          {  }
.box h1       {  }
.box .content { padding: 5px; }

.box-front               { width: 273px; height: 225px; overflow: hidden; margin-bottom: 15px; font-size:90%; }
.box-front .content      { height: 193px; }
.box-front-main          { float: left; width: 220px; height: 223px; overflow: hidden; margin-right: 6px; border-top: 2px solid #454545; }
.box-front-main .content { height: 203px; }

#box-front-main-1 { width: 220px; font-size:90%; }
/*#box-front-main-2 { width: 235px; font-size:90%; }*/
#box-front-main-2 { width: 476px; font-size:90%; margin: 0; }
#box-front-main-3 { width: 235px; margin: 0; font-size:90%; }

h1.heading     { border-left: 2px solid #9cde0e; background: #454545; color: #fff; font-size: 1.333em; line-height: 1.375em; text-indent: 5px; margin: 0; }
h1#breadcrumbs { border-left: 2px solid #dec80e; background: #454545; color: #fff; font-size: 1.333em; line-height: 1.375em; text-indent: 5px; margin: 0; }

h1#breadcrumbs .breadcrumb,
h1#breadcrumbs .breadcrumb a:link,
h1#breadcrumbs .breadcrumb a:visited,
h1#breadcrumbs .breadcrumb a:hover,
h1#breadcrumbs .breadcrumb a:active { color: #dec80e }

h1#breadcrumbs .breadcrumb-first,
h1#breadcrumbs .breadcrumb-first a:link,
h1#breadcrumbs .breadcrumb-first a:visited,
h1#breadcrumbs .breadcrumb-first a:hover,
h1#breadcrumbs .breadcrumb-first a:active { color: #fff; }

#members,
#image-library { background: #cfd5d7; padding: 10px; }

.member { float: left; width: 196px; height: 154px; overflow: hidden; margin-right: 36px; margin-bottom: 36px; }

.member .memberImage { border: 2px solid #dec80e; }
.member .memberImage a { display: block; border: 1px solid #ececec; }
.member .memberImage a:hover,
.member .memberImage a:active  { border-color: #dec80e; }


.image { float: left; width: 104px; height: 132px; overflow: hidden; margin-right: 33px; margin-bottom: 18px; font-size: 0.9167em; line-height: 1.182em; }

.image .imageImage { border: 2px solid #dec80e; margin-bottom: 2px; }
.image .imageImage a { display: block; border: 1px solid #fff; }
.image .imageImage a:hover,
.image .imageImage a:active  { border-color: #dec80e; }


#webcasts { width: 332px; float: left; }
#podcasts { width: 332px; float: right; }

#webcasts .items,
#podcasts .items  { background: #cfd5d7; padding: 10px; }

.boxBottom { background: #bdc3c5; text-align: right; padding: 4px 7px 4px 0; }

#webcasts a,
#podcasts a { color: #2c3233; }

#webcasts .item .itemDetail ,
#podcasts .item .itemDetail { width: 199px; }


.downloadBox { float: right; width: 140px; border-top: 1px solid #cfd5d7; background: #dec80e; padding: 4px; font-size: 0.9167em; line-height: 1em; margin-left: 5px; }
.downloadPDF { float: left; }
.requestPack { float: right; }

.downloadBox a { color: #2c3233; }

#requestForm { background: #cfd5d7; padding: 17px; }
#requestForm input { width: 185px; }

#competitionForm { background: #cfd5d7; padding: 17px; }

#microsite {}
#microsite a img { border:1px solid #d4d4d4;}
#microsite a:hover img { border:1px solid #b7b7b7;}


/***********/
/* recipes */
/***********/

#recipeSearch { float: left; width: 453px; height: 176px; overflow: hidden; background: #454545; color: #fff; padding: 9px; }
#recipeMonth  { float: right; width: 272px; height: 180px; overflow: hidden; background: #cfd5d7 no-repeat scroll right top; padding: 7px; }
#recipeAZ     { background: #454545 url(../images/recipe-az.png) no-repeat scroll 0px 0px; color: #fff; padding-left: 141px; margin-top:8px; height: 30px; font-size: 1.25em; line-height: 2em; }


#recipeSearch .title { margin-bottom: 6px; }

#recipeSearch a { display: block; float: left; height: 24px; margin-bottom: 1px; }
#recipeSearch a span { display: none; }

#recipeSearch a#recipe-search-starter-all,
#recipeSearch a#recipe-search-main-all,
#recipeSearch a#recipe-search-dessert-all        { width: 137px; background: transparent url(../images/nav/view-all.png) no-repeat scroll 0px 0px; margin-right: 3px; }
#recipeSearch a#recipe-search-starter-all:hover,
#recipeSearch a#recipe-search-main-all:hover,
#recipeSearch a#recipe-search-dessert-all:hover  { background-position: -137px 0; }

#recipeSearch a#recipe-search-starter-meat,
#recipeSearch a#recipe-search-main-meat           { width: 137px; background: transparent url(../images/nav/meat.png) no-repeat scroll 0px 0px; margin-right: 3px; }
#recipeSearch a#recipe-search-starter-meat:hover,
#recipeSearch a#recipe-search-main-meat:hover     { background-position: -137px 0; }

#recipeSearch a#recipe-search-starter-fish,
#recipeSearch a#recipe-search-main-fish           { width: 137px; background: transparent url(../images/nav/fish.png) no-repeat scroll 0px 0px; margin-right: 3px; }
#recipeSearch a#recipe-search-starter-fish:hover,
#recipeSearch a#recipe-search-main-fish:hover     { background-position: -137px 0; }

#recipeSearch a#recipe-search-starter-vegetarian,
#recipeSearch a#recipe-search-main-vegetarian           { width: 137px; background: transparent url(../images/nav/vegetarian.png) no-repeat scroll 0px 0px; margin-right: 3px; }
#recipeSearch a#recipe-search-starter-vegetarian:hover,
#recipeSearch a#recipe-search-main-vegetarian:hover     { background-position: -137px 0; }


#recipeMonth .recipeImage   { border: 5px solid #fff; width: 68px; height: 68px; float: left; margin-right: 10px; }
#recipeMonth .recipeTitle   { font-weight: bold; font-size: 1.083em; }
#recipeMonth .recipeContent { font-size: 0.9167em; line-height: 1.636em; }
#recipeMonth .recipeMore    {  }

#recipeAZ ul    { list-style: none; margin: 0; padding: 0; color: #64a935; }
#recipeAZ ul li { float: left; display: block; margin: 0; padding: 0; }
#recipeAZ ul li a         { padding: 0 3px; }
#recipeAZ ul li a:link,
#recipeAZ ul li a:visited { color: #fff; text-decoration: none; }
#recipeAZ ul li a:hover,
#recipeAZ ul li a:active  { color: #87d916; text-decoration: none; }

.searchResultsBar { background: #cfd5d7; font-weight: bold; line-height: 1.917em; padding-left: 9px; padding-right: 4px; border-left: 1px solid #f3f3f3; }
.searchInfo  { float: left; }
.searchPages { float: right; }

.searchPages span { float: left; display: block; }
.searchPages a { float: left; display: block; line-height: 1.25em; padding: 0 7px; margin: 4px 0 4px 2px; background: #dec80e; color: #454545; text-decoration: none; }
.searchPages a:hover,
.searchPages a:active,
.searchPages a.current { background: #454545; color: #fff; text-decoration: none; }


#recipe { background: #f3f3f3 no-repeat scroll right top;  }

#recipeInfo   { float: left; width: 164px; }
#recipeDetail { float: right; width: 500px; }

#recipePrint { background: #fff; color: #000; }
#recipePrint #bodyWrapper { width: auto; background: #fff; color: #000; margin: auto; padding: 0; }
#recipePrint #contentWrapper { width: auto; margin: auto; padding: 0; }
#recipePrint #recipe { padding: 0; background: none; color: #000; }
#recipePrint #recipeInfo { float: none; }
#recipePrint #recipeDetail { float: none; width: auto; }

#recipeInfo .recipeImage   { background: #dec80e; border: 2px solid #dec80e; font-weight: bold; }
#recipeInfo .recipeImage a { display: block; border: 1px solid #fff; }
#recipeInfo .recipeImage a:hover,
#recipeInfo .recipeImage a:active { display: block; border-color: #dec80e; }

#recipeInfo .recipeDetailedInfo   { margin-top: 7px; background: #aed112; border: 2px solid #aed112; padding: 5px; font-size: 1.167em; }

#recipeInfo .recipeNutrition { margin-top: 8px; background: #87d916; border: 2px solid #87d916; }
#recipeInfo .recipeNutritionTitle { padding: 3px; font-size: 1.167em; font-weight: bold; }
#recipeInfo .recipeNutritionInner { background: #f3f3f3; padding: 3px; font-size: 0.9167em; }

#recipeDetail #recipeTitle { font-size: 1.833em; font-weight: bold; }
#recipeDetail #recipeDescription {  }
#recipeDetail #recipeIngredients { margin-top: 10px; border-top: 1px solid #cfd5d7; }
#recipeDetail #recipeIngredientsTitle { font-weight: bold; background: #dec80e; padding: 0 5px; font-size: 1.167em; line-height: 1.643em; }
#recipeDetail #recipeIngredientsBody  { background: #cfd5d7; padding: 5px; }
#recipeDetail #recipeMethod { margin-top: 11px; border-top: 1px solid #cfd5d7; }
#recipeDetail #recipeMethodTitle { font-weight: bold; background: #87d916; padding: 0 5px; font-size: 1.167em; line-height: 1.643em; }
#recipeDetail #recipeMethodBody  { padding: 5px; }

#recipeLinks { background-color:#dec80e; border-top: 1px solid #cfd5d7;}
#recipeLinks .recipeLinksLink { width:31%; float:left; padding:3px 0 3px 8px; font-size:90%;}
#recipeLinks .recipeLinksLink a { color:#2c3233;}
#recipeLinks .recipeLinksLink img { margin-right:5px;}

#relatedRecipes { margin-top: 10px; border-top: 1px solid #cfd5d7; padding-top: 10px; }
#relatedRecipes .relatedRecipe { float: left; margin-right: 20px; margin-bottom: 10px; padding: 5px; background: #cfd5d7; width: 204px; height: 135px; overflow: hidden; }

#relatedRecipes .relatedRecipe .recipeImage   { border: 5px solid #fff; width: 68px; height: 68px; float: left; margin-right: 10px; }
#relatedRecipes .relatedRecipe .recipeTitle   { font-weight: bold; font-size: 1.083em; }
#relatedRecipes .relatedRecipe .recipeContent { font-size: 0.9167em; line-height: 1.636em; }
#relatedRecipes .relatedRecipe .recipeMore    {  }


hr {
  margin: 18px 0;
  border-bottom: solid #b70062 1px;
  height: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
}

/*********/
/* items */
/*********/
.item                     { margin-bottom: 19px; border-top: 1px solid #cfd5d7; padding-top: 8px; }
.item .itemImage          { float: left; width: 100px; border: 2px solid #dec80e; }
.item .itemImage a        { display: block; border: 1px solid #fff; }
.item .itemImage a:hover,
.item .itemImage a:active { border-color: #dec80e; }

.item .itemDetail         { float: right; width: 566px; }
.item .itemHeader         { margin-bottom: 10px; }
.item .itemTitle          { font-weight: bold; font-size: 1.167em; line-height: 1em; margin-bottom: 3px; }
.item .itemContent        {  }
.item .itemMore           {  }

#itemBack                 {  }

/*****************/
/* photo gallery */
/*****************/
div.galleryItem { /* one gallery item */
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
}

/*******************/
/* footer elements */
/*******************/
#footer { font-size: 0.9167em; color: #2d2e35; }
#footer a:link,
#footer a:visited { text-decoration: none; color: #2d2e35; }
#footer a:hover,
#footer a:active  { text-decoration: none; color: #80d516; }


/***********************/
/* general form styles */
/***********************/
#contactform	{ float: left; }  /* the contact form itself */
#contact		{ float: right; } /* contact info or whatever on right */

.required { color: #f00; }

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */
div.formrow {
  clear: both;
  text-align: left;
  margin-bottom: 10px;
}

div.formrow label {
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 80px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 90px; } /* label width + label margin-right, override as above */
div.formrow.indent label { float: none; width: auto; }

#emailForm div.formrow label  { width: 160px; }
#emailForm div.formrow.indent { margin-left: 170px; }

/* message and error boxes, not just useful in contact form */
div.message { border: 1px solid #080; color: #080; padding: 3px 5px; margin-bottom: 15px; float: left; } /* you may need to clearfix this */
div.message.nomargin { margin-bottom: 0; } /* if before something with a margin-top */
div.message.info { border-color: #880; color: #880; } /* info box in yellow */
div.message.warn { border-color: #f40; color: #f40; } /* warning box in orange */
div.message.error { border-color: #f00; color: #f00; } /* error box in red */

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#recipeAZ { font-size: 1.1em; }
}