/*******************************************************************************

  CSS on Sails Framework
  Title: Site Name
  Author: XHTMLized (http://www.xhtmlized.com/)
  Date: May 2010

********************************************************************************

  1. BASE
      1.1 Reset
      1.2 Accessibility Navigation & Hide
      1.3 Clearfix
      1.4 Default Styles

  2. COMMON
      2.1 Container
      2.2 Header
      2.3 Navigation
      2.4 Content
      2.5 Sidebar
      2.6 Footer
      
  3. PAGES
      3.1 Home page
      3.2 Content
      3.3 Recipe

*******************************************************************************/


/* 1. BASE
--------------------------------------------------------------------------------
==============================================================================*/


/* 1.1 Reset
------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
a {outline: none;}
th, td { vertical-align: top; }
th { text-align: left; }


/* 1.2 Accessibility Navigation & Hide
------------------------------------------------------------------------------*/

#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3 Clearfix
------------------------------------------------------------------------------*/

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4 Default Styles
------------------------------------------------------------------------------*/

body { background: #fff; color: #666; font: 62.5%/1.30 Verdana, Arial, Helvetica, sans-serif; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
ul li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font-family: Arial, Helvetica, sans-serif; }
a, a:visited { color: #e36e2c; text-decoration: underline; }
a:hover, a:active { text-decoration: none; }
small { font-size: smaller; }
h1 { margin: 0 0 20px; font: 25px "Myriad Pro Semibold", Arial, sans-serif; color: #000; }
h2 { margin: 36px 0 10px; padding: 0 0 5px; font: 17px Verdana, Arial, sans-serif; border-bottom: 1px solid #e36e2c; }
h1+h2 { margin: 17px 0; }
h3 { padding: 0 0 12px; font: 15px Verdana, Arial, sans-serif; }
p { margin: 0 0 12px; }
ul { margin: 8px 0; }
ul li { padding: 3px 0 4px 15px; background: url(../images/bullet_li.png) 3px .80em no-repeat; }
ol li { padding: 3px 0 4px 10px;}
ol {margin-left: 27px;}

/* 2. COMMON
--------------------------------------------------------------------------------
==============================================================================*/


/* 2.1 Container
------------------------------------------------------------------------------*/

.container { width: 962px; position: relative; margin: 0 auto; padding: 31px; font-size: 1.2em; }


/* 2.2 Header
------------------------------------------------------------------------------*/

#header { background: url(../images/bg_header.png) right top no-repeat; position: relative; }
#header .site-name,
#header .site-name span { display: block; overflow: hidden; width: 436px; height: 146px; text-decoration: none;}
#header .site-name { position: relative; margin: 0; text-indent: -9999px; }
#header .site-name span { background: url(../images/logo.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; }
#header a.site-name span { cursor: pointer; }


/* 2.3 Navigation
------------------------------------------------------------------------------*/

#navigation { position: relative; height: 35px; padding-left: 243px; border-top: 3px solid #e36e2c; font: 15px/33px "Myriad Pro Semibold", arial, sans-serif; text-transform: uppercase; 
background: #97979a url(../images/bg_navigation.png) 11px top no-repeat; z-index: 2; }
#navigation ul { margin: 0; }
#navigation li { float: left; padding: 0 2px 0 0; position: relative; height: 35px; background: #97979a url(../images/bg_separator.png) right top no-repeat; }
#navigation li ul {display: none;}
.last { background: #97979a !important; padding-right: 0; }
#navigation li a { float: left; height: 35px; padding: 0 6px; text-decoration: none; color: #fff; }
#navigation li:hover a { background: #e36e2c; }
#navigation li a:hover { background: #e36e2c; }

#left-nav { position: absolute; left: 0; top: 0; padding: 0; background: #000; }
#left-nav li { padding: 0; background: #000; }
.ln-st { background: #000 url(../images/bg_separator-2.png) right top no-repeat !important; padding-right: 2px !important; }

#navigation li ul { position: absolute; left: 0; top: 35px; padding: 3px 0 5px; font: 12px/15px "Myriad Pro Semibold", arial, sans-serif; background: #e36e2c; z-index:99;}
#navigation li ul li { float: none; height: 15px; background: #e36e2c; }
#navigation li ul li:hover {background: #db5b12;}
#navigation li ul li a { height: 15px; padding: 0 7px; }
#navigation li ul li a:hover {background: #db5b12;}
/* 2.4 Content
------------------------------------------------------------------------------*/

#content { padding: 29px 0 20px; }
#content.homepage { background: url(../images/bg_home.jpg) right top no-repeat; padding-top: 0; }

/* 2.5 Sidebar
------------------------------------------------------------------------------*/

/* 2.6 Footer
------------------------------------------------------------------------------*/

#footer { clear: both; padding-top: 3px; border-top: 8px solid #e36e2c; }
#footer p { float: right; }
#footer a { text-decoration: none; color: #666; }


/* 3. PAGES
--------------------------------------------------------------------------------
==============================================================================*/


/* 3.1 Home page
------------------------------------------------------------------------------*/
.intro { position: relative; height: 334px; padding: 0 543px 0 0; border-bottom: 8px solid #e36e2c; }
.intro p { margin: 6px 0 0; font: 17px/21px "Myriad Pro Semibold", arial, sans-serif; }
.chefs .intro p { font: 23px/27px "Myriad Pro Semibold", arial, sans-serif;}
.main-recipe { position: absolute; right: 0; top: 0; }
.box { float: left; width: 222px; margin-right: 24px; }
.box h2 { margin: 0; padding: 0; width: 222px; height: 59px; border: none; }
.box h2 a { display: block; overflow: hidden; width: 222px; height: 59px; text-decoration: none; }
.box h2 a span { visibility: hidden; }
.heading-1 a { background: url(../images/txt_heading-1.png); }
.heading-2 a { background: url(../images/txt_heading-2.png); }
.heading-3 a { background: url(../images/txt_heading-3.png); }
.heading-3w a { background: url(../images/_txt_heading-3.png); }
.heading-4 a { background: url(../images/txt_heading-4.png); }
.heading-5 a { background: url(../images/txt_heading-5.png); }
.heading-6 a { background: url(../images/txt_heading-6.png); }
.heading-7 a { background: url(../images/txt_heading-7.png); }
.heading-8 a { background: url(../images/txt_heading-8.png); }
.heading-9 a { background: url(../images/txt_heading-9.png); }
.border { margin-bottom: 15px; border-bottom: 3px solid #e36e2c; }
.box-4, .box-9 { margin: 0;}
.box p { margin: 10px 0; font: 15px/18px Verdana, Arial, sans-serif; }
.watch { display: block; width: 222px; height: 25px; margin-top: 18px; text-decoration: none !important; background: url(../images/btn_watch.png); }
.watch span { visibility: hidden; }

.ingredients { margin-bottom: 15px; }
.ingredients span { float: left;  width: 37px; height: 32px; background: url(../images/ico_ing.png); }

#recipeIcons img {margin-right: 5px;}
#recipeIcons {height: 45px;}

.post-ratings p {margin: 0 0 6px;}

.subscribe { text-align: right; }
.subscribe table { width: 100%; text-align: left; }
.subscribe td { padding: 3px 0 4px 3px; border: 1px solid #97979a; }
.subscribe input { border: 0; }
.submit { margin-top: 9px; padding: 3px; border: none; background: #e36e2c; color: #fff; cursor: pointer; }

/* 3.2 Content
------------------------------------------------------------------------------*/
.intro-2 { padding: 0 300px 40px 0; border-bottom: 3px solid #e36e2c; }
.content-promos {border-top: 3px solid #e36e2c; margin-top: 40px;}

/* 3.3 Recipe
------------------------------------------------------------------------------*/
.left-col { float: left; width: 610px; }
.right-col { float: right; width: 278px; margin-top: 8px; }

.comment { line-height: 1.2; }
.comment p {margin-top: 1.2em; line-height: 1.3em;}
.comment-author { display: inline-block; padding: 3px 5px 5px; background: #97979a; color: #fff; margin-bottom: 4px;}
.comment-form label { position: relative; display: block; padding: 10px 0 4px; }
.comment-form label sub { position: relative; top: 5px; }
.text-field { border-width: 1px 2px 3px 1px; border-style: solid; border-color: #97979a; }
.block { display: block; }

.recipe-box { border: 1px solid #97979a; }
.recipe-box img {display: block;}
.recipe-box .ingredients { margin-bottom: 11px; }
.recipe-head { padding: 10px 20px 14px; background: #97979a; color: #fff; }
.recipeImage img {width: 154px; margin-top: 66px;}
#recipeMeta { padding: 10px 20px 14px; font: 14px/1.3 Verdana, Arial, sans-serif; }
#recipeMeta ul, #recipeMeta p { margin: 0; }
#recipeMeta ul li { padding: 0 0 0 20px; background-position: 8px .60em; }
.margin-top { margin-top: 10px; }
.post-ratings img {display: inline;}
#recipeIcons img {margin-right: 5px; display: inline;}

/* 3.3 Recipe index
------------------------------------------------------------------------------*/
.recipe-index {width: 1010px;}
.recipe-index p {margin-bottom: 2.5em;}
.recipeContainer {width: 154px; float: left; border: solid 1px #e36e2c; margin-right: 45px; margin-bottom: 30px; position: relative;}
.recipeName {}
.recipeName a {color: #656565; text-decoration: none; font-weight: bold; font-size: 0.9em; position: absolute; width: 142px; height: 214px; display: block; padding: 3px 6px;}
.recipeIcons {padding: 3px 0 3px 9px;}
.recipeIcons img {margin-right: 5px; display: inline;}

/* 3.3 Recipe search
------------------------------------------------------------------------------*/
#recipeSearch {position: absolute; top: 209px; left: 31px; width: 194px; background: #e36e2c; padding: 7px; z-index: 99; display: none;}
#signMeUp {position: absolute; top: 209px; left: 31px; z-index: 99; display: none;}
#recipeSearch .button {float: right; display: block; width: 56px; height: 21px; overflow: hidden; text-indent: -9999px; line-height: 0; font-size: 0; background: url(/_ui/images/search.png) no-repeat; border: none;}
#recipeSearch label {color: #fff; text-transform: uppercase; font: 15px "Myriad Pro Semibold",arial,sans-serif;}
.searchTxt {color: #656565; margin: 7px 0; font-size: 1.3em; width: 184px; padding: 5px; border: none;}

/* 4.0 Forms
------------------------------------------------------------------------------*/
.content input, .content select {font: 14px "Myriad Pro Semibold", arial, sans-serif;}
.content label.radio, input.radio {float: left; font-weight: normal;}
.formLeft, .formRight {width: 117px; float: left;}
.formLeft .textMed, .formRight .textMed {width: 107px;}
.textMed, .content textarea {margin-bottom: 10px; padding: 5px; width: 240px; border: none;}

.feedback {background: url(../images/feedback.png) no-repeat;}
.bringback {background: url(../images/bring_back.png) no-repeat;}
.next {background: url(../images/next.png) no-repeat;} 
.entry {background: url(../images/enter.png) no-repeat;}
.invention {background: url(../images/submit_recipe.png) no-repeat;}
.formLeft {margin-right: 16px;}
input.subscribe {background: url(../images/subscribe.png) no-repeat;}
.check {vertical-align: -2px;}

.content fieldset {background: #e36e2c; width: 250px; padding: 15px; float: left; margin-right: 60px; position: relative; margin-top: 30px;}
.content fieldset .button, #win01 .button {width: 250px; height: 26px; display: block; font-size: 0; line-height: 0; overflow: hidden; text-indent: -999px; border: none; margin: 12px 0; cursor: pointer;}
.content fieldset p, .content fieldset a {color: #fff;}
.content label {color: #fff; font-weight: bold; margin-bottom: 4px; display: block;}
.content legend {margin-top: -40px; margin-left: -15px; font-weight: bold; font-size: 1.3em;}
.content select {margin-bottom: 10px; padding: 3px;}
.content textarea {height: 137px;}
.content #invention textarea {height: 292px;}

.content fieldset.shallow {width: 930px; margin: 60px 0 0;}
.content fieldset.shallow div {width: 250px; height: 51px; margin-right: 90px; float: left;}
.content fieldset.shallow div p {margin: 0;}

#verify {width: 142px; font-size: 30px; margin-top: 13px; letter-spacing: 0.3em;}

#win01 label {float: left; color: #666666; font-weight: normal; margin-top: 1px; width: 220px;}
#win01 input {float: left;}
#win01 p {clear: left; padding-top: 1em;}
#win01 .button {width: 65px; height: 21px; margin-left: 220px;}

/* ADDED
------------------------------------------------------------------------------*/

#chefsProd h3, #chefsProd ul {width: 572px;display: block;clear: both;float: none;margin-top: 30px;}
#chefsProd ul {margin: 0;margin-top: 20px;padding: 0;}
#chefsProd li {list-style: none outside;float: left;margin-right: 20px;width: 113px;height: 30px;padding: 175px 5px 0 5px;text-align: center;background-repeat: no-repeat;}
div.floatStop { width: 100%; height: 1px; display: block; float: none; clear: both;}
.floatRight {float: right;}
.floatLeft {float: left;}
.floatRight img {margin: 2px 0 2px 20px;}
.floatLeft img {margin: 2px 20px 2px 0;}
.chefsComp {background:#e36e2c;}
.chefsComp td, .chefsComp th {background:#FFFFFF; padding:10px; vertical-align:top; width:50%;}
.chefsComp th  {background:#e36e2c; color:#FFFFFF;}

.boxLinks ul {list-style: none outside; margin: 0; padding: 0;}
.boxLinks li {float: left; display: block; background: #e36e2c; margin-right: 40px;  margin-top: 20px; padding: 0;}
.boxLinks a {display: block; padding: 15px 20px; color: #fff; text-decoration: none; font-size: 1.5em; font-weight: bold;}

#terms {margin: 10px;}
#terms p {font-size: 120%;}

#timedRecipes a {display: block; float: left; width: 250px; height: 20px; padding-top: 120px; background-repeat: no-repeat; background-image: url(../images/0-20.png); text-decoration: none; color: #666; text-align: center; margin-right: 86px; margin: 0 30px;}
#timedRecipes a.min20 {background-image: url(../images/20-40.png)}
#timedRecipes a.min40 {margin-right: 0; background-image: url(../images/40_plus.png)}

#like_tweet {padding-top: 40px}
p+#like_tweet {padding: 0 20px;}
#shareTxt, #fbLikeBtn, #tweetBtn {float: left;}
#shareTxt {font-size: 1em; margin-right: 20px; }

.videoLink {margin-top: 20px;}
.videoLink img {border: 1px solid #97979A;}

#homeContact {position: absolute; bottom: 0; right: 0;}
#homeContact a {display: block; text-indent: -999em; overflow: hidden; float: left; margin-bottom: 13px;}
#homeLnk {width: 17px; height: 16px; background: url(/_ui/images/home_icon.png) no-repeat; margin-right: 11px;}
#contactLnk {width: 20px; height: 16px; background: url(/_ui/images/contact_bubble.png) no-repeat;}

/* AVAILABILITY */

.whereBuy {display: block; position: relative;}
.whereBuy ul {margin: 0; padding: 0; list-style: none outside; width: 850px; height: 40px; display: block; float: none; }
.whereBuy li {float: left; padding: 0; background: none; width: 74px; display: block; height: 40px; margin: 8px 8px 0 0; border: solid 1px #999999; text-indent: -9999px; overflow: hidden;}
.whereBuy .wbTesco {background: url(../images/tesco.png) no-repeat;}
.whereBuy .wbSains {background: url(../images/sainsburys.png) no-repeat;}
.whereBuy .wbWait {background: url(../images/waitrose.png) no-repeat;}
.whereBuy .wbAsda {background: url(../images/asda.png) no-repeat;}