/*
*************************************************
    
    Published Authors
    General Screen Styles
    
    Made with love by Icelab
    http://www.icelab.com.au/
    
*************************************************
*/

@import url("reset.css");

/*----- Generic ---------------------------*/

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



/*----- General ---------------------------*/

html {
   background: #f4f1f3;
}

body {
  background: #efeaed;     
  font: normal 81%/1.5 Georgia, Helvetica, Arial, Verdana, sans-serif;
  min-width: 940px; 
  color: #474747;
  }
  
  body#home {
     background: #efeaed url(../img/bg-home.jpg) top center no-repeat;     
  }
  
  body#how-it-works {
     background: #efeaed url(../img/bg-how-it-works.jpg) top center no-repeat;     
  }
  
  body#cookbooks-prices {
     background: #efeaed url(../img/bg-cookbooks.jpg) top center no-repeat;     
  }
  
  body#faqs {
     background: #efeaed url(../img/bg-faqs.jpg) top center no-repeat;     
  }
  
  body#about-us/*, body#testimonials*/ {
     background: #efeaed url(../img/bg-about-us.jpg) top center no-repeat;     
  }
  
  body#contact-us {
     background: #efeaed url(../img/bg-contact-us.jpg) top center no-repeat;     
  }
  
  body#recipes { background: #efeaed url(../img/bg-recipes.jpg) top center no-repeat; }
  body#recipes #content { min-height: 600px; }
  body.step-new, body.step-edit { background: #efeaed url(../img/bg-recipes-new.jpg) bottom center no-repeat !important; }
  body.step-review { background: #efeaed url(../img/bg-recipes-review.jpg) bottom center no-repeat !important; }
  body.step-success { background: #efeaed url(../img/bg-recipes-success.jpg) bottom center no-repeat !important; }

#content .container {
}  

.wrapper {
  width: 940px;
  margin: 0 auto; }
  
.bottom-bar {
   border-top: 1px #dfd6dc solid;
}

.top {
   border-bottom: 1px #dfd6dc solid;
   margin-bottom: 10px;
}

.border-left {
   padding-left: 20px;
   border-left: 1px #dfd6dc solid;
}

.box-left,
.box-mid,
.box-right {
   padding-top: 10px;
}

.box-mid {
   border-left: 1px #dfd6dc solid;   
   padding: 10px 20px 0 20px;
}

.box-right {
   border-left: 1px #dfd6dc solid;
   padding-left: 20px;
}

#footer {
   background: #f4f1f3;
   margin-top: 40px;
}

.guide-dog {
   float: left;
   width: 410px;
   padding: 6px 20px;
}

div.body {
   padding-top: 16px;
}

/*----- Typography ------------------------*/

h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #2e2d2d; }
h1 { font-size: 130%; text-transform: uppercase; letter-spacing: .12em;}
h2 { font-size: 276%; color: #8e340a; border-bottom: 1px #d9ced5 solid; padding: 0 0 10px 0; line-height: 1.3em;}
h3 { font-size: 185%; color: #8e340a; margin-bottom: 10px; line-height: 1.3em; padding-top: 5px;}
h4 { font-size: 90%; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 10px;}
h5 { font-size: 110%; }
h6 { font-size: 100%; }
p { margin-bottom: 1em;}
a {color: #098e81; text-decoration: none;}
a:hover {color:#000; text-decoration: underline;}
p.intro {font-size: 123%; line-height: 21px;}
ul {list-style: circle; margin-left: 20px; margin-bottom: 18px;}
ul li {margin-bottom: 4px;}
h3 span {color: #474747;}

/*------------------------------------------- 
  Grids are sometimes good.
  
  * A structure for generic content based
    on the 960.gs framework.
-------------------------------------------*/


.container {width:940px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
body {margin: 0;}
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right: 20px;}

div.last {margin-right:0;}
.span-1  { width: 20px;}
.span-2  { width: 60px;}
.span-3  { width: 100px;}
.span-4  { width: 140px;}
.span-5  { width: 180px;}
.span-6  { width: 220px;}
.span-7  { width: 260px;}
.span-8  { width: 300px;}
.span-9  { width: 340px;}
.span-10 { width: 380px;}
.span-11 { width: 420px;}
.span-12 { width: 460px;}
.span-13 { width: 500px;}
.span-14 { width: 540px;}
.span-15 { width: 580px;}
.span-16 { width: 620px;}
.span-17 { width: 660px;}
.span-18 { width: 700px;}
.span-19 { width: 740px;}
.span-20 { width: 780px;}
.span-21 { width: 820px;}
.span-22 { width: 860px;}
.span-23 { width: 900px;}
.span-24, div.span-24 { width: 940px; margin: 0; }

.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}

div.border{padding-right:9px;margin-right:10px;border-right:1px solid #eee;}
div.colborder { padding-right:11px;margin-right:10px;border-right:1px solid #eee;}
.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}
.pull-5 { margin-left: -200px;}
.pull-6 { margin-left: -240px;}
.pull-7 { margin-left: -280px;}
.pull-8 { margin-left: -320px;}
.pull-9 { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}
.pull-20 { margin-left: -800px;}
.pull-21 { margin-left: -840px;}
.pull-22 { margin-left: -880px;}
.pull-23 { margin-left: -920px;}
.pull-24 { margin-left: -960px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}

.push-1 { margin: 0 -40px 1.5em 40px;}
.push-2 { margin: 0 -80px 1.5em 80px;}
.push-3 { margin: 0 -120px 1.5em 120px;}
.push-4 { margin: 0 -160px 1.5em 160px;}
.push-5 { margin: 0 -200px 1.5em 200px;}
.push-6 { margin: 0 -240px 1.5em 240px;}
.push-7 { margin: 0 -280px 1.5em 280px;}
.push-8 { margin: 0 -320px 1.5em 320px;}
.push-9 { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}
.push-20 { margin: 0 -800px 1.5em 800px;}
.push-21 { margin: 0 -840px 1.5em 840px;}
.push-22 { margin: 0 -880px 1.5em 880px;}
.push-23 { margin: 0 -920px 1.5em 920px;}
.push-24 { margin: 0 -960px 1.5em 960px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}

.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:1.4em 0;border:none;}
hr.space {background:#fff;color:#fff;}
.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}
.clear {clear:both;}


/*----- Nav ----------------------------*/

#nav {
   background: #f5f2f5;
   margin: 0 0 26px 0;
   font-size: 14px;
}

#nav .container {
   
}

#nav ul {
   list-style: none;     
   padding:0;
   margin:0;
}


#nav ul li {
   float: left;
   margin-bottom: 0;   
}

#nav ul a {
   color: #098e81;
   padding: 11px 18px 9px;
   display: block;
   border-left: #dfdbde 1px solid;
   text-decoration: none;   
   font: 14px Helvetica, Arial, sans-serif;   
}

   #nav a.home {
      background: transparent url(../img/home.gif) 20px 10px no-repeat;
      padding-left: 40px;
      padding-right: 30px;
   }

   #nav ul li.selected {
      background: #efeaed;
   }
   
   #nav ul li a.last {
      border-right: #dfdbde 1px solid;
   }
   
   #nav ul a:hover {
      background: #fff;
   }
   
      #nav ul a.home:hover {
         background: #fff url(../img/home.gif) 20px 10px no-repeat;
      }
      
   
/*----- Footer ----------------------------*/

#footer h6 {
   width: 90px;
   background: transparent url(../img/pub-auth-logo.gif) top center no-repeat;
   height: 54px;
   text-indent: -999em;
   outline: none;
   float: left;
   margin-right: 20px;
   margin-top: 20px;
}

#footer ul {
   float: left;
   display: block;
}

#footer ul li {
   float: left;
   overflow: hidden;
   zoom: 1;
}

#footer ul li a {
   font: 13px Helvetica, Arial, sans-serif;   
   padding: 9px 16px;
   color: #098e81;
   border-left: #e0dcdf 1px solid;
   display: block;
}

#footer ul li a.last {
   border-right: #e0dcdf 1px solid;
}

#footer .guide-dog p {
   font: 13px Helvetica, Arial, sans-serif;   
   line-height: 18px;
}
/*----- Re-sizing ----------------------------*/

.span-9-box  { width: 318px; padding-right: 0;}
.span-5-box  { width: 159px;}

/*----- Buttons ----------------------------*/

a.button {
   display: block;
   background: #8e340a url(../img/button-bg.gif) bottom left repeat-x;   
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   color: #fff;
   margin-bottom: 10px;
   font-size: 138%;
   text-align: center;
   padding: 10px 0;
   margin-bottom: 20px;
}

a.button:hover {
   background: #622507;
   text-decoration: none;
}


/*----- Page: Home ----------------------------*/

body#home p {
   font-size: 13px;
}

body#home p.intro {
   font-size: 18px;
   line-height: 1.3em;
}
.step {
   display: block;
   background: transparent url(../img/arrow.gif) bottom center no-repeat;
   padding-bottom: 22px;
   overflow: hidden;
   margin-bottom: 7px;
   zoom: 1;
}

   .steps .three {
      background: none;
   }

.step .bg {
   background: #fff;
   overflow: hidden;
   padding: 10px 16px;
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   zoom: 1;
}

.step h3 {
   width: 46px;
   display: block;
   float: left;
   height: 1.2em;
   color: #8E340A;
   font-size: 461%;
   line-height: 1.4em;
   padding-left: 7px;
   padding-top: 0;
   margin-top: -20px;
}

body#home .step p {
   float: left;
   width: 330px;   
   font-size: 16px;
   margin-bottom: 0;
   line-height: 1.4em;
}

   body#home .step p.bottom,
   .step hr {
      margin-bottom: .7em;
   }

   body#home .step p.full {
      width: 385px;
   }
   
   body#home .step p.more {
      color: #098e81;
      margin-left: 20px;
   }
     
   .side img {
      display: block;
      margin-bottom: 7px;
   }
   
body#home p.caption { 
   font-size: 14px; 
   font-style: italic; 
}

body#home h5 {
   font-size: 16px;
   color: #8e340a;
   margin-bottom: 10px;
}

body#home .steps p {
   font-size: 16px;
}

.three, 
.three .bg {
   margin-bottom: 0;
}
/*----- Page: How it works ----------------------------*/

#how-it-works .steps p.intro {
   font-size: 138%;
}

.step-list {
   float: right;
   width: 480px;
}

/*----- Page: About Us ----------------------------*/
.para-list li {
   margin-bottom: 18px;
}

li.nested {
   margin-bottom: 4px;
}

/*----- Page: FAQ ----------------------------*/
body#contact-us h3.anchor a,
body#faqs h3 a {
   color: #8e340a;
}

body#contact-us h3 a:hover,
body#faqs h3 a:hover {
   text-decoration: none;
}


/*----- Page: Recipes submission ---------------------*/

#submit-steps {
  background: #fff;
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 10px 0 0;
  zoom: 1;
}
  #submit-steps li {
    color: #358078;
    float: left;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin: 3px;
    text-align: center;
    padding: 8px 0;
    width: 229px;
  }
    #submit-steps li.selected {
      background: #358078;
      color: #fff;
    }

#recipe-start {
  overflow: hidden;
  zoom: 1;
  margin-bottom: 2em;
}

#recipe-start select {
  float: left;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-weight: normal;
  width: 300px;
}
#recipe-start button, .button-submit {
  background: #612407;
  border: 1px #444 solid;
  color: #fff;
  cursor: pointer;
  float: left;
  font-family: Georgia, Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-weight: normal;
  padding: 5px;
  margin-left: 20px;
  width: 360px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.button-submit {
  float: right;
  margin-right: 320px;
  width: auto;
  padding: 5px 15px;
}
  #recipe-start button:hover, .button-submit:hover {
    background: #358078;
  }

.submit-group {
  overflow: hidden;
  zoom: 1;
}

.submit-group span.lbl {
  display: block;
  float: left;
  width: 200px;
}

.submit-group input,
.submit-group textarea,
.submit-group select {
  float: right;
  margin-right: 20px;
  margin-top: 0;
  width: 400px;
}

.submit-group textarea {
  height: 12em;
}

.submit-description {
  padding-top: 12px;
  float: right;
  width: 300px;
}


#submit-review { }
  #submit-review .title h3 {
    font-size: 20px;
    margin-bottom: 0;
  }
  #submit-review .details {
    margin-top: 12px;
    text-align: right;
  }
  #submit-review .details p {
    margin-bottom: 0;
  }
  #submit-review .description {
    clear: both;
  }


#action-review {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 1.4em 0 .9em;
  overflow: hidden;
  clear: both;
  margin-top: 20px;
  zoom: 1;
}
  #action-review .button-submit {
    float: right;
    margin: -.5em 0 0;
  }
    #action-review .button-submit:hover {
      text-decoration: none;
      color: #fff;
    }

#action-submit {

}
  #action-submit label {
    font-weight: normal;
    overflow: hidden;
    zoom: 1;
  }
  #action-submit #page {
    display: inline;
  }
  #guardian {
    display: none;
  }
  #guardian input {
    display: inline-block;
    margin-left: 10px;
    width: 300px;
  }
  #action-submit .button-submit {
    float: none;
    margin: 20px 0 0;
  }
  #terms {
    display: inline-block;
    width: auto;
    margin: 0 8px 0 0;
  }

/*----- Tables ---------------------------*/

table {
   width: 100%;
   margin-bottom: 10px;
}

th {
   background: #fff;
   font-weight: normal;
   text-align: right;
   padding: 5px 15px 5px 5px;
}

td {
   text-align: center;
   padding: 5px;
}

th.category {
   text-align: right;
   font-weight: bold;
}

tr {
   border-bottom: #d7d7d7 1px solid;
}

tr.quantity th {
   font-weight: bold;
}


/*----- Forms ---------------------------*/

input, textarea, select {
      margin-top: 6px;
}

label {
      margin-top: 14px;
}

label,
input,
textarea,
select {
   display: block;
   font-weight: bold;
}

input,
textarea,
input,
textarea {
   width: 100%;
}

input.submit {
   margin: 14px 0 30px 0;
   float: right;
   width: 100px;
}

.search label {
   display: block;
   margin-bottom: 5px;
}

form.search  {
   display: block;
   clear: both;
}

.validation-summary {
  background: #efefef;
  border: 1px solid #ccc;
  padding: 10px 10px 0;
}
.error {
  border-color: #df7d7d;
  background: #ffdfdf; }
.success {
  background: #c8ffbf;
  border-color: #A2EF95;
}

.invalid {
  color: #c00; }
  .invalid input,
  .invalid textarea {
  color: #111;
  border: 1px #c00 solid; }
  
  
/*----- Recipe feedback ---------------------------*/

a#feedback {
   position: absolute;
   top: 60px;
   right: 30px;
   background: #fff;
   border: 2px solid #53918b;
   -moz-border-radius: 4px; 
   -webkit-border-radius: 4px;  
   padding: 6px 8px;
   margin: 0;
   display: block; 
}
body#feedback {
   min-width: 320px;
   padding-top: 20px;
   padding-bottom: 20px;
}

body#feedback .content,   
body#feedback .container {
   width: 320px;
}

#contact-us textarea,
body#feedback textarea {
   height: 150px;
}
  
body#feedback #nav,
body#feedback #footer {
   display: none;
}