/* Default stylesheet for Special Diets Consulting
 *
 * Written by Andy Wardley <abw@wardley.org>, incorporating various other
 * stylesheet fragments (e.g. Erik Meyer's reset, jQuery Lightbox).
 *
 */

/*------------------------------------------------------------------------
 * css/reset
 *   Resets default browser styles.  Created by Erik Meyer
 *   http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 *------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, 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;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

html, body {                                                                  
    margin : 0px;                                                             
    border : 0px;
    font-family : Verdana, Helvetica, sans;                                   
    font-size : 12px;                                                         
    height : 100%;                                                            
}  

/* Remember to define focus styles! */
:focus {
    outline: 0;
}

body {
    line-height: 1;
    color: black;
    background: white;
}

ol, ul {
    list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

/*------------------------------------------------------------------------*/
/* end of reset                                                           */
/*------------------------------------------------------------------------*/

/*------------------------------------------------------------------------
 * css/typography
 *   Define the default typography styles.  
 *   Written by Andy Wardley http://wardley.org/
 *   Derived from the Blueprint CSS framework http://bjorkoy.com/blueprint/
 *------------------------------------------------------------------------*/

body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th,
caption,pre,p,blockquote,input,textarea {
    font-family: Trebuchet MS;
    font-size: 14px;
    line-height: 20px;
    color: #444;
}

h1,h2,h3,h4,h5,h6 { 
    font-family: Trebuchet MS;
    margin: 0; 
    padding: 5px 0;
    color: #444;
/*    clear: both;  */
}


h1 { font-size: 24px; line-height: 30px }
h2 { font-size: 22px;  line-height: 30px }
h3 { font-size: 18px;  line-height: 24px }
h4 { font-size: 16px; }
h5 { font-size: 14px; font-weight:bold; }
h6 { font-size: 12px; font-weight:bold; }

h2.subtitle { margin-top: -12px }
h2.top_section,
h2.section {
    position: relative;
    padding-top: 40px;
    padding-right: 50px;
    border-bottom: 2px solid #731214;
    margin-bottom: 20px;
}

h2.top_section {
    padding-top: 0px;
}

/* Text elements */
p           { margin: 0 0 20px 0; /* text-align:justify; */ }
p.last      { margin-bottom:0; }
/* p img       { float: left; margin: 20px 20px 20px 0; padding:0; } */
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */

ul, ol      { margin: 20px 0 20px 20px; list-style-type:disc; }
li          { line-height:20px; }
ol          { list-style-type: decimal; }
dl          { margin: 20px 0; }
dl dt       { font-weight: bold; }

a           { color: #ab1b1e; text-decoration: none; outline: none; text-decoration: underline }
a:visited   { color: #98171a; }
a:hover     { color: #c81f23; }

strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 20px; line-height:20px; padding:8px; border:1px solid ; }
blockquote  { 
    margin: 20px 0 20px 28px; 
    font-size: 14px; 
    color: #444; 
    font-style: italic; 
}


/* Tables */
/*
table   { margin-bottom: 13px; border-top:; border-left:; background-color:; }
th,td   { height:19px; padding:0 0.5em; border-bottom:; border-right:; }
*/
th      { font-weight:bold; }


/* Some default classes */
.tiny,  .tiny  p    { font-size: 11px; }
.small, .small p    { font-size: 12px; }
.large, .large p    { font-size: 16px; line-height: 150%; }
.huge,  .huge p     { font-size: 18px; line-height: 150%; }
.hide               { display: none; }
.text               { display: none; }
.indent             { padding-left: 20px; }
.top, h2.top        { margin-top: 0; padding-top: 0 }
.bot                { margin-bottom: 0 }
.info, .about       { font-size: 13px; line-height: 130%; color: #808080; }
p.intro             { font-size: 16px; line-height: 140%; }
p.prompt            { font-size: 12px; line-height: 16px; margin-bottom: 4px; }
.hover              { cursor: pointer }
.fll                { float: left }
.flr                { float: right }
.cll                { clear: left }
.clr                { clear: right }
.clear              { clear: both }
.edge               { border: 1px solid #ab1b1e }
body {
    background: #731214 url('../images/layout/top_strip_middle.gif') repeat-x top left;
}

#layout {
    background:  url('../images/layout/top_band_right.gif') no-repeat top right;
}

#page {
    width: 920px;
    margin: 0 auto;
    background: url('../images/layout/side_head.jpg') no-repeat top right;
}

#header {
    position: relative;
    height: 220px;
    background: url('../images/layout/header.jpg') no-repeat top left;
    overflow: visible;
}

#header #home {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 420px;
    height: 100px;
}

#header #helping {
    display: block;
    position: absolute;
    bottom: 70px;
    left: 20px;
    width: 270px;
    height: 30px;
    background: url('../images/layout/helping.gif') no-repeat top left;
}

#header #with_sarah {
    display: block;
    position: absolute;
    bottom: 70px;
    right: 150px;
    width: 150px;
    height: 30px;
    background: url('../images/layout/with_sarah.gif') no-repeat top left;
}
    
#body {
}

#main {
    position: relative;
    width: 670px;
    float: left;
    background: url('../images/layout/main_body.gif') repeat-y top left;
}

#main div.foot {
    height: 20px;
    margin-top: 20px;
    background: url('../images/layout/main_foot.gif') no-repeat bottom left;
}

#side {
    position: relative;
    width: 250px;
    min-height: 40px;
    float: right;
    text-align: left;
    background: url('../images/layout/side_body.gif') repeat-y top left;
    overflow: visible;
}

#side div.foot {
    height: 20px;
    margin-top: 20px;
    background: url('../images/layout/side_foot.gif') no-repeat bottom left;
}


#footer {
    clear: left;
    margin: 20px;
    width: 630px;
    font-size: 12px;
    color: #cea88e;
    margin-bottom: 40px;
}

#footer #copyright {
    float: left;
    width: 300px;
    height: 20px;
}

#footer #links {
    float: right;
    text-align: right;
    width: 300px;
    height: 20px;
}

#footer #links a,
#footer #links a:hover {
    font-size: 12px;
    color: #cea88e;
    text-decoration: none;
}

#footer #links a:hover {
    color: #fff;
}

div.pane {
    background-color: white;
    margin: 0 20px 10px;
    border: 1px solid #e1c5a4;
    padding: 20px;
}

#side div.pane {
    padding: 10px;
    margin-top: 30px;
    color: #666;
}

#side div.pane p {
    color: #666;
    margin-bottom: 5px;
}

#side div.top {
    padding: 10px;
    border-top: 0px;
    margin-top: 0;
}

#side div.pane h6.title {
    display: block;
    width: 80px;
    height: 15px;
    text-align: center;
    margin: -30px 0 0 -11px;
    background: url('../images/layout/sidebar_tabs.gif') no-repeat top left;
    color: #666;
    font-size: 13px;
    line-height: 15px;
    font-weight: normal;
}

#side div.top h6.title {
    background-image: none;
}

#side div.news h6.title {
    background-position: 0px -30px;
}

#side div.courses h6.title {
    background-position: 0px -60px;
}


#menu {
    position: absolute;
    display: block;
    bottom: 0px;
    left: 0px;
    width: 670px;
    height: 80px;
    background: url('../images/layout/main_head.gif') no-repeat bottom left;
    z-index: 10;
}

#tabs {
    margin: 15px 0 0 17px;
}

#tabs li {
    display: inline;
}

#tabs li a {
    display: block;
    float: left;
    width: 106px;
    height: 36px;
    background: url('../images/layout/tabs.gif') no-repeat top left;
}

#tabs li.home a       { background-position:    0px -0px }
#tabs li.home a:hover { background-position: -106px -0px }
#tabs li.home a.hot   { background-position: -212px -0px }
#tabs li.about_us a       { background-position:    0px -45px }
#tabs li.about_us a:hover { background-position: -106px -45px }
#tabs li.about_us a.hot   { background-position: -212px -45px }
#tabs li.ingredients a       { background-position:    0px -90px }
#tabs li.ingredients a:hover { background-position: -106px -90px }
#tabs li.ingredients a.hot   { background-position: -212px -90px }
#tabs li.recipes a       { background-position:    0px -135px }
#tabs li.recipes a:hover { background-position: -106px -135px }
#tabs li.recipes a.hot   { background-position: -212px -135px }
#tabs li.eating_out a       { background-position:    0px -180px }
#tabs li.eating_out a:hover { background-position: -106px -180px }
#tabs li.eating_out a.hot   { background-position: -212px -180px }
#tabs li.products a       { background-position:    0px -225px }
#tabs li.products a:hover { background-position: -106px -225px }
#tabs li.products a.hot   { background-position: -212px -225px }
#tabs li.allergy_info a       { background-position:    0px -270px }
#tabs li.allergy_info a:hover { background-position: -106px -270px }
#tabs li.allergy_info a.hot   { background-position: -212px -270px }
#tabs li.courses a       { background-position:    0px -315px }
#tabs li.courses a:hover { background-position: -106px -315px }
#tabs li.courses a.hot   { background-position: -212px -315px }



#navigate {
    position: absolute;
    display: block;
    bottom: -1px;
/*    margin-bottom: -1px; */
    left: 20px;
    width: 630px;
    height: 25px;
    z-index: 20;
    overflow: visible;
}

#navigate a.prev,
#navigate a.next,
#navigate span.pageno {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    font-size: 12px;
    line-height: 14px;
    color: #9a5346;
    text-decoration: none;
    cursor: pointer;
}

#navigate span.pageno {
    top: 3px;
    width: 30px;
    text-align: center;
    right: 20px;
}

#navigate a.prev {
    right: 50px;
    background: url('../images/layout/prev.gif') no-repeat top left;
}

#navigate a.next {
    right: 0px;
    background: url('../images/layout/next.gif') no-repeat top right;
}

#navigate a.prev:hover {
    background-image: url('../images/layout/prev_roll.gif');
}

#navigate a.next:hover {
    background-image: url('../images/layout/next_roll.gif');
}

#navigate a.prev span.tip, 
#navigate a.next span.tip {
    display: none;
}

#navigate a.prev:hover span.tip, 
#navigate a.next:hover span.tip {
    display: block;
    position: absolute;
    top: 32px;
    right: 25px;
    width: 300px;
    height: 18px;
    text-align: right;
    background-color: white;
    padding: 0;
}

#navigate #submenu,
#navigate #submenu a {
    position: relative;
    margin: 0 6px;
    text-decoration: none;
    color: #9a5346;
    overflow: visible;
    font-size: 13px;
}

#navigate #submenu a img.notch {
    display: block;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 7px;
    background: url('../images/layout/notch.gif') no-repeat bottom left;
}

#navigate #submenu a.hot,
#navigate #submenu a:hover {
    color: #731214;
}

.icon {
    display: block;
    position: relative;
    display: block;
    width: 30px;
    height: 45px;
    margin: 0px;
    background: url('../images/icons/free_from_icons_boxed_small.gif') no-repeat 0px -30px;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.df { 
    background-position: -2px -30px 
}
.ef { 
    background-position: -72px -30px 
}
.gf { 
    background-position: -142px -30px 
}
.nf { 
    background-position: -212px -30px 
}
.nsf { 
    background-position: -282px -30px 
}
.sf { 
    background-position: -352px -30px 
}
.sof { 
    background-position: -422px -30px 
}
.wf { 
    background-position: -492px -30px 
}
.yf { 
    background-position: -562px -30px 
}


.icon span.key {
    font-size: 11px;
    text-decoration: none;
    position: relative;
    top: 23px;
    display: block;
    width: 30px; 
    text-align: center;
    height: 14px;
    line-height: 14px;
    color: #666;
    color: white;
}


#side form {
    padding: 0px 0 10px 0;
}

#side form input.email {
    margin: 0;
    width: 180px;
    height: 15px;
    padding: 3px 0 2px 6px;
    background: url('../images/layout/input.gif') no-repeat top left;
    border: 1px solid #cea88e;
    font-size: 12px;
    color: #aaa;
}

#side form input.email:focus {
    border: 1px solid #731214;
    color: #444;
}

#side form input.submit {
    float: right;
    width: 54px;
    margin: 5px 0;
    height: 20px;
    background: url('../images/layout/submit.gif') no-repeat -1px 0;
    border: 0px;
}

#side form input.submit:hover {
    background-position: -54px 0;
}
  
#side form a.arrow {
    font-size: 11px;
    display: block;
    margin-top: 5px;
    float: left;
    width: 80px;
    height: 20px;
    padding-left: 10px;
    background: url('../images/layout/arrows.gif') no-repeat 0 7px;
    text-decoration: none;
}

#side form a.arrow:hover {
    color: #444;
    background: url('../images/layout/arrows.gif') no-repeat 0 -13px;
}

form.signup {
    border: 1px solid red;
    width: 530px;
    padding: 10px;
    margin: 20px 20px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}

form.signup fieldset {
    clear: left;
    width: 508px;
    border: 1px solid #ddd;
    background-color: #eee;
    padding: 10px;
    margin-top: 5px;
}

form.signup legend {
    font-size: 14px;
/*    border: 1px solid #4e433c 
    background-color: #d8d8d8;*/
}

form.signup div.field {
    clear: left;
    padding: 0;
    margin-bottom: 5px;
}

form.signup label {
    font-size: 12px;
    display: block;
    width: 180px;
    height: 20px;
    text-align: right;
    float: left;
}

form.signup input.text {
    display: block;
    width: 250px;
    height: 15px;
    padding: 3px 5px 2px 5px;
    float: left;
    margin: 0 0 0 10px;
    background-color: #f8f8f8;
    border: 1px solid #cea88e;
    font-size: 12px;
    color: #aaa;
}

form.signup input.text:focus {
    background-color: #fff;
    border: 1px solid #731214;
    color: #444;
}

form.signup input.submit {
    float: right;
    width: 75px;
    margin: 10px 0;
    height: 25px;
    background: url('../images/layout/large_submit.gif') no-repeat top left;
    border: 0px;
}

form.signup input.submit:hover {
    background-position: -80px 0;
}

form.signup div.checkfield {
    width: 210px;
    float: left;
    padding: 0;
    margin: 0 30px 5px 0;
}

form.signup input.checkbox {
    display: block;
    float: left;
    height: 18px;
    width: 18px;
    margin: 0 0 0 10px;
    background-color: #f8f8f8;
    border: 1px solid #cea88e;
    font-size: 12px;
    color: #aaa;
}

form.signup div.error {
    color: #D8000C;
    padding-left: 190px;
    font-size: 11px;
}a.arrow {
    font-size: 12px;
    color: #888;
    padding-left: 14px;
    background: url('../images/layout/arrows.gif') no-repeat top left;
}

ul.arrow {
    margin: 5px;
    padding: 0;
}

ul.arrow li {
    list-style: none;
    margin: 2px 0 4px 0;
    padding: 0 0 0 10px;
    background: url('../images/layout/arrow.gif') no-repeat 0 4px;
}

ul.arrow li.heading {
    padding-left: 0;
    background-image: none;
    font-size: 14px;
    line-height: 18px;
}

ul.arrow li,
ul.arrow li a {
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
}

div.toc {
}

div.index {
    margin-left: 15px;
}

div.toc h4.title {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: -4px;
}

div.toc ul {
    margin: 0 0 10px 10px;
    padding: 0;
}

div.toc ul li {
    list-style: none;
    margin: 1px 0 1px 0;
    padding: 0 0 0 10px;
    background: url('../images/layout/arrow.gif') no-repeat 0 4px;
}

div.toc ul li,
div.toc ul li a {
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
}

div.toc ul li.hot {
    background-image: url('../images/layout/arrow_hot.gif');
}

div.toc ul li.hot a {
    font-weight: bold;
}

div.toc ul li.down a {
    padding-right: 16px;
    background: url('../images/layout/arrow_down.gif') no-repeat right 6px;
}

div.toc ul li.sub {
    padding: 0 0 0 20px;
    background-position: 10px 4px;
}

div.toc ul li.sub a {
    font-size: 13px;
    line-height: 13px;
    padding-right: 16px;
    background: url('../images/layout/arrow_down.gif') no-repeat right 6px;
}

div.toc ul li.down a:hover,
div.toc ul li.sub a:hover {
    background-position: right -14px;
}

div.index ul li,
div.index ul li a {
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
}

div.toplink {
    position: relative;
    height: 20px;
}

a.top {
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
    width: 40px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    padding-right: 16px;
    text-align: right;
    text-decoration: none;
    background: url('../images/layout/arrow_up.gif') no-repeat right 4px;
}

div.toplink a.top {
    top: 0px;
}

a.top:hover {
    background-position: right -16px;
}

a.note {
    font-size: 11px;
    vertical-align: baseline;
    position: relative;
    bottom: 0.33em; 
    text-decoration: none;
    padding-left: 2px;
}

ol.notes {
    margin-top: -8px;
}

ol.notes li {
    font-size: 11px;
    line-height: 16px;
}

div.product,
div.directory {
    position: relative;
    font-size: 13px;
    line-height: 17px;
    padding: 10px 0 0 20px;
    margin: 10px 0 10px 0;
}

div.featured {
    position: relative;
/*    background: url('../images/icons/best_buy_small.gif') no-repeat top right; */
/*    background: url('../images/misc/grad1.gif') repeat-y top left; */
/*    border: 1px solid #d0d0d0;  ff7f00; 0e0e0; */
}

div.best_buy {
    background: url('../images/misc/grad1.gif') repeat-y top left;
    border: 2px solid #d0d0d0; /* ff7f00; 0e0e0; */
    padding: 20px 20px 10px 20px;
}

div.best_buy p,
div.best_buy p.about,
div.best_buy p.info {
    color: #555;
}

div.awards {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 45px;
}
    
div.awards a.award {
    display: block;
    width: 45px;
    height: 45px;
    margin-left: 5px;
    float: right;
    background: url('../images/icons/awards.gif') no-repeat top left;
}
    
div.awards a.new {
    background-position: -45px 0;
}

div.awards a.featured {
    background-position: -90px 0;
}

div.product h4,
div.directory h4 {
    font-weight: bold;
    line-height: 18px;
    padding: 0;
    margin: 5px 0 4px 0;
}

div.product h4 span.flags,
div.directory h4 span.flags {
    font-size: 12px;
    padding-left: 10px;
}

div.product h5.key,
div.directory h5.key {
    padding-top: 0;
    margin-top: 0;
    font-size: 12px;
}

div.product a.website,
div.directory a.website {
    display: block;
    font-size: 12px;
    font-weight: normal;
}

div.directory a.piclink {
    display: inline;
}

div.product img.picture {
    width: 150px;
    margin-top: 0px;
}

div.featured img.picture {
    margin-top: 40px;
    margin-bottom: 10px;
}

div.directory img.logo {
    width: 170px;
    height:50px;
}

div.product p.about,
div.directory div.comments {
    padding: 5px 0;
    margin-bottom: 10px;
}

div.best_buy h4 {
    font-size: 18px;
    line-height: 26px;
    color: #444;
}

div.best_buy p.about {
    color: #444;
    font-size: 110%;
}

div.best_buy a.website {
    font-size: 110%;
    margin-bottom: 10px;
}


div.product {
    padding-right: 170px;
    margin-bottom: 20px;
}

div.product img.picture {
    float: right;
    margin-right: -170px;
}

div.best_buy {
    padding-right: 185px;
    margin-bottom: 20px;
}

div.company {
    padding-top: 20px;
    margin-top: 0;
    padding-right: 190px;
    margin-bottom: 20px;
}

div.company img {
    float: right;
    margin-right: -190px;
}

div.product a {
    margin-bottom: 6px;
}

div.product p.small a {
    font-size: 12px;
    font-weight: normal;
}



table.stats {
    width: 540px;
    margin: 10px auto;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 0px;
}

table.stats tr th,
table.stats tr td,
table.availability tr th,
table.availability tr td {
    background-color: #f8f8f8;
    border: 0px;
    padding: 2px 4px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

table.stats tr th,
table.availability tr th {
    background-color: #e8e8e8;
}

table.availability {
    width: 590px;
    margin: 10px auto;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 0px;
}

table.availability tr th,
table.availability tr td {
    font-size: 12px;
    line-height: 14px;
}

table.availability tr td.blank {
    background-color: #f0f0f0;
}

table.availability tr th.title {
    font-size: 14px;
    line-height: 18px;
}

table.availability tr th {
    background-color: #e0e0e0;
}

table.availability tr td {
    text-align: center;
    color: #666;
    font-size: 11px;
    line-height: 13px;
}

table.availability tr.alt td {
    background-color: #f0f0f0;
}


table.availability td.yes {
    background-color: #DFF2BF;
}

table.availability td.no {
    background-color: #FEEFB3;
    border: 1px solid #9F6000;
}

table.availability th a {
    text-decoration: none;
}

table.availability tr {
/*    vertical-align: middle; */
}

table.availability td span.tick {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    background: url('../images/icons/tick.png') no-repeat top left;
}


table.availability td.error {
    background-color: #FFBABA;
    border: 1px solid #D8000C;
}

div.coursepics {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

div.coursepics a img {
    border: 1px solid #ab1b1e;
    padding: 2px;
}

div.coursepics a:hover img {
    border: 1px solid #c81f23;
}



ul.revealable {
    margin: 5px;
    padding: 0;
}

ul.revealable li {
    list-style: none;
}

ul.revealable li a.revealer {
    margin: 2px 0 4px 0;
    padding: 0 0 0 20px;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    background: url('../images/layout/page_next.gif') no-repeat 0 -1px;
    color: #444;
}

ul.revealable li a.revealer:hover {
    color: #560d0f;
    background-image: url('../images/layout/page_next_roll.gif');
}

ul.revealable li.revealed a.revealer {
    background-image: url('../images/layout/page_down.gif');
}

ul.revealable li.revealed a.revealer:hover {
    background-image: url('../images/layout/page_down_roll.gif');
}

ul.revealable li ul.reveals {
    display: none;
    margin: 2px 0 2px 20px;
}

ul.revealable li.revealed ul.reveals {
    display: block;
}

ul.revealable li ul.reveals li {
    font-size: 12px;
    line-height: 16px;
    padding: 0 0 0 10px;
    background: url('../images/layout/arrows.gif') no-repeat 0 -36px;
}


div.recipe {
    position: relative;
    overflow: visible;
    margin-top: -20px;
}

div.recipe a.picture {
    display: block;
    float: right;
    width: 182px;
    height: 127px;
    margin: 10px 0 0 20px;
    border: 1px solid #ab1b1e;
}

div.recipe a.picture:hover {
    border: 1px solid #c81f23;
}

div.recipe a.picture img {
    padding: 1px;
    border: 0;
}

div.recipe h3.title {
    padding-top: 50px;
    border-bottom: 2px solid #731214;
    margin-bottom: 10px;
}

div.recipe h5 {
    padding-bottom: 4px;
    margin-bottom: 0;
}

div.recipe div.icons {
    position: absolute;
    top: 0;
    margin-top: 4px;
    right: 0;
    width: 400px;
    height: 70px;
}

div.recipe div.icons a {
    position: relative;
    display: block;
    float: right;
    overflow: visible;
    width: 35px;
    height: 70px;
    margin: 0px;
    background: url('../images/icons/free_from_icons_boxed_small.gif') no-repeat 2px 0px; 
    text-decoration: none;
}

div.recipe div.icons a:hover {
    width: 64px;
    height: 70px;
    background-position: 0 -80px;
}

div.recipe div.icons a.df { 
    background-position: -0px 0px 
}
div.recipe div.icons a.df_opt {
/*    background-position: -0px -160px  */
    background-position: -0px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.df:hover,
div.recipe div.icons a.df_opt:hover {
    background-position: -0px -80px 
}
div.recipe div.icons a.df_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.ef { 
    background-position: -70px 0px 
}
div.recipe div.icons a.ef_opt {
/*    background-position: -70px -160px  */
    background-position: -70px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.ef:hover,
div.recipe div.icons a.ef_opt:hover {
    background-position: -70px -80px 
}
div.recipe div.icons a.ef_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.gf { 
    background-position: -140px 0px 
}
div.recipe div.icons a.gf_opt {
/*    background-position: -140px -160px  */
    background-position: -140px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.gf:hover,
div.recipe div.icons a.gf_opt:hover {
    background-position: -140px -80px 
}
div.recipe div.icons a.gf_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.nf { 
    background-position: -210px 0px 
}
div.recipe div.icons a.nf_opt {
/*    background-position: -210px -160px  */
    background-position: -210px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.nf:hover,
div.recipe div.icons a.nf_opt:hover {
    background-position: -210px -80px 
}
div.recipe div.icons a.nf_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.nsf { 
    background-position: -280px 0px 
}
div.recipe div.icons a.nsf_opt {
/*    background-position: -280px -160px  */
    background-position: -280px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.nsf:hover,
div.recipe div.icons a.nsf_opt:hover {
    background-position: -280px -80px 
}
div.recipe div.icons a.nsf_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.sf { 
    background-position: -350px 0px 
}
div.recipe div.icons a.sf_opt {
/*    background-position: -350px -160px  */
    background-position: -350px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.sf:hover,
div.recipe div.icons a.sf_opt:hover {
    background-position: -350px -80px 
}
div.recipe div.icons a.sf_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.sof { 
    background-position: -420px 0px 
}
div.recipe div.icons a.sof_opt {
/*    background-position: -420px -160px  */
    background-position: -420px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.sof:hover,
div.recipe div.icons a.sof_opt:hover {
    background-position: -420px -80px 
}
div.recipe div.icons a.sof_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.wf { 
    background-position: -490px 0px 
}
div.recipe div.icons a.wf_opt {
/*    background-position: -490px -160px  */
    background-position: -490px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.wf:hover,
div.recipe div.icons a.wf_opt:hover {
    background-position: -490px -80px 
}
div.recipe div.icons a.wf_opt:hover {
    opacity: 0.8;
}
div.recipe div.icons a.yf { 
    background-position: -560px 0px 
}
div.recipe div.icons a.yf_opt {
/*    background-position: -560px -160px  */
    background-position: -560px -0px;
    opacity: 0.6;
}
div.recipe div.icons a.yf:hover,
div.recipe div.icons a.yf_opt:hover {
    background-position: -560px -80px 
}
div.recipe div.icons a.yf_opt:hover {
    opacity: 0.8;
}


div.recipe div.icons a span.key,
div.recipe div.icons a:hover span.key {
    font-size: 11px;
    text-decoration: none;
    position: relative;
    top: 54px;
    display: block;
    width: 35px; 
    text-align: center;
    height: 14px;
    line-height: 14px;
    color: #666;
    color: white;
}

div.recipe div.icons a:hover span.key {
    font-size: 14px;
    top: 50px;
}

div.recipe div.icons a span.name {
    display: none;
}

div.recipe div.icons a:hover span.key {
/*    display: none; */
}

div.recipe div.icons a:hover span.name {
    font-size: 11px;
    position: relative;
    top: -30px;
    left: -35px;
    display: block;
    width: 130px;
    text-align: center;
    height: 14px;
    line-height: 14px;
    color: #666;
}


div.recipe p.about {
  color: #444;
  margin-bottom: 10px;
}

ul.ingredients,
ul.preparation {
    margin: 5px 0 15px 25px;
}

ul.ingredients li,
ul.preparation li {
    font-size: 13px;
    line-height: 17px;
    margin: 2px 0;
}

ul.ingredients li.subtitle,
ul.preparation li.subtitle {
    list-style: none;
    font-size: 13px;
    line-height: 18px;
    margin: 6px 0 1px -20px;
}

div.key {
    margin: 0px;
    margin: 0 0 0 15px;
    padding: 5px 5px;
/*    background-color: #f8f8f8;
    border: 1px solid #ccc; */
    width: 540px;
/*    background: url('../images/icons/key_panel.gif') no-repeat top left; */
}

table.key {
    margin-left: 0px;
    width: 540px;
    padding: 0;
}

table.key tr,
table.key tr td {
    vertical-align: middle;
    padding-left: 5px;
    width: 140px;
}

table.key td.check {
    width: 35px;
    padding-left: 0;
}

a.minicard {
    display: block;
    position: relative; 
    float: left; 
    margin: 5px 5px 15px 15px; 
    padding: 1px;
    width: 90px;
    height: 140px;
    border: 1px solid #ab1b1e;
    border: 1px solid #ccc;
    text-decoration: none;
}

a.minicard:hover {
    border: 1px solid #c81f23;
}

a.minicard img {
    width: 90px;
    height: 63px;
    margin: 0;
}

a.minicard span.caption {
    display: block;
    height: 35px;
    background-color: #fff;
    font-size: 11px;
    line-height: 12px;
    text-align: center;
    padding: 3px 4px;
    margin: -4px 0 1px 0;
    border-top: 1px solid #e1c5a4;

    height: 36px;
    border: 0;
}

a.minicard span.info {
    display: block;
    height: 25px;
    background-color: #fffbe0;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    padding: 4px 5px 3px;
    color: #333;
    border-top: 1px solid #f5edbc; 
    color: #560d0f;
}


a.minicard:hover img {
}

a.minicard:hover span.caption {
    background-color: #fffbe0;
}

a.minicard:hover span.info {
    background-color: #f5edbc;
    color: black;
}

.recipe_book {
    padding-left: 110px;
    height: 120px;
    margin-top: 20px;
    background: url('../images/icons/recipe_book_small.png') no-repeat top left;
}


div.awards_key {
    display: block;
    float: right;
    width: 200px;
    height: 150px;
    border: 1px solid red;
}
    
div.awards_key span.award {
    display: block;
    width: 200px;
    height: 45px;
    margin-right: 50px;
    text-align: right;
    float: right;
    background: url('../images/icons/awards.gif') no-repeat top left;
}
    
div.awards_key span.new {
    background-position: -45px 0;
}

div.awards_key span.featured {
    background-position: -90px 0;
}
/*------------------------------------------------------------------------
 * jQuery Lightbox Plugin (balupton edition) - Lightboxes for jQuery
 * Copyright (C) 2008 Benjamin Arthur Lupton
 * http://jquery.com/plugins/project/jquerylightbox_bal
 *
 * This file is part of jQuery Lightbox (balupton edition).
 * 
 * You should have received a copy of the GNU Affero General Public License
 * along with jQuery Lightbox (balupton edition).  If not, 
 * see <http://www.gnu.org/licenses/>.
 *------------------------------------------------------------------------*/
 

#lightbox, #lightbox-overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom:auto;
	right:auto;
	
	z-index:100;
	width:100%;
	height:auto;
	
	text-align:center;
	color:#333333;
	
	/* stop stupid conflicts */
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
	line-height:0;
	
	/* general conflict stopper */
	text-decoration:none;
	background:none;
	word-spacing:normal;
	letter-spacing:normal;
	float:none;
	clear:none;
	display:block;
}

#lightbox-overlay {
	z-index: 90;
	background-color:#000000;
	height: 100%;
	position:fixed;
}
#lightbox-overlay-text {
	text-align: right;
	margin-right: 30px;
	margin-top: 20px;
	color: white;
	font-size: 14px;
	cursor: default;
	line-height:normal;
}
#lightbox-overlay-text a, #lightbox-overlay-text a:hover, #lightbox-overlay-text a:visited, #lightbox-overlay-text a:link {
	text-decoration:underline;
	color:#888;
}
#lightbox-overlay-text-about a, #lightbox-overlay-text-about a:hover, #lightbox-overlay-text-about a:visited, #lightbox-overlay-text-about a:link {
	text-decoration: none;
	font-size: 14px; 
	color:#444;
}

#lightbox-overlay-text span {
	padding-left:5px;
	padding-right:5px;
}

#lightbox-overlay-text span.caption {
    margin-top: 20px;
    font-size: 16px;
    padding-right: 0px;
}


#lightbox img, #lightbox a img, #lightbox a { border:none; outline:none; }

#lightbox-imageBox {
	position:relative;
	border:1px solid black;;
	background-color:white;
	width:400px;
	height:400px;
	margin:0 auto;
}

#lightbox-imageContainer {
	padding:1px;
}

#lightbox-loading {
	position:absolute;
	top:40%;
	left:0%;
	height:25%;
	width:100%;
	text-align:center;
	line-height:0;
}

#lightbox-nav {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:10;
}
/* #lightbox-imageBox > #lightbox-nav { left: 0; } 
#lightbox-nav a { outline: none; }*/


#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	display:block;
	width:49%;
	height: 100%;
	background:transparent url("../images/lightbox/blank.gif") no-repeat; /* Trick IE into showing hover */
	cursor: pointer;
	padding: 0px;
	margin:0px;
}

#lightbox-nav-btnPrev { 
	left:0;
	right:auto;
	float:left;
}
#lightbox-nav-btnNext { 
	left:auto;
	right:0;
	float:right;
}

/*
.preload_largeLink, #prevLink:hover, #prevLink:visited:hover {
	background:url("../images/lightbox/prev.gif") left 45% no-repeat;
}
.preload_nextLink, #nextLink:hover, #nextLink:visited:hover {
	background:url("../images/lightbox/next.gif") right 45% no-repeat;
}
*/


#lightbox-infoBox {
	font:10px Verdana, Helvetica, sans-serif;
	background-color:#FFFFFF;
	margin:0 auto;
	padding:0px;
	
	/* width: 100%;
	padding: 0 10px 0; */
}

#lightbox-infoContainer {
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	color:#666;
	
	line-height:normal;
	/* height:30px; */
}
#lightbox-infoHeader {
	width:100%;
	text-align:center; 
}
#lightbox-caption {
	text-align:justify;
}
#lightbox-caption-title {
	font-weight:bold;
}
#lightbox-caption-description {
	font-weight:normal;
}

#lightbox-infoFooter {
	margin-top:3px;
	color:#999999;
}
#lightbox-currentNumber {
	display:block;
	width:49%;
	float:left;
	text-align:left;
}
#lightbox-close {
	display:block;
	width:45%;
	float:right;
	text-align:right;
}
#lightbox-close-button{
	padding-left:30%;
}
#lightbox-close-button, #lightbox-close-button:link, #lightbox-close-button:visited, #lightbox-close-button:hover {
	text-decoration:underline;
	color:#999999;
}
#lightbox-close-button:hover {
	color:#666666;
}

#lightbox-infoContainer-clear {
	clear:both; 
	visibility:hidden;
}

#lightbox-overlay-text-about a {
    color: #444;
}

/*------------------------------------------------------------------------*/
/* end of lightbox                                                        */
/*------------------------------------------------------------------------*/

#gallery {
    text-align: center;
}

#gallery a img {
    padding: 1px;
    border: 1px solid #ab1b1e;
    cursor: pointer;
}

#gallery a:hover img {
    border: 1px solid #c81f23;
}
a.adpanel {
    display: block;
    position: relative;
    width: 549px;
    height: 234px;
    text-decoration: none;
}

a.kidmenot {
    background: url('../images/adverts/kid_me_not.jpg') no-repeat top left;
}

a.wellfoods {
    background: url('../images/adverts/wellfoods.jpg') no-repeat top left;
}

a.adpanel span.about {
    position: absolute;
    top: 16px;
    left: 240px;
    width: 292px;
    height: 180px;
    color: #222;
    font-size: 11px;
    line-height: 14px;
    text-decoration: none;
    text-align: justify;
}