/* 
	File:			recipes.css
	Author:			Brian Seward
	Created:		7/31/09
	Description:	This file contains all styles for Williams-Sonoma recipe pages. 
*/
/**** Common Recipe Styles ****/
div#sidebar ul#recipe-search { padding: .7em 0 1em 1em; margin-bottom: 1em; }
div#sidebar ul#recipe-search li { padding: 0;}
div#sidebar input#recipe.recipe-text { width: 8em; margin-right: .2em; font-size: 1em; float: left;}
input#recipe.recipe-text { width: 15em;}
div#content { margin-top: 3.4em; padding-bottom: 1em; }
div.the-bar a.return-to-previous { font-size: 1.2em; text-align: right;}
div#bottom-bar {  padding-top: 1em; }
div#hero-area { float: left; width: 30.5em; }

#sub-course-list ul li img { padding-left: .3em;}
#hero-area img { margin-bottom: 0em;}
#hero-area h2 img { margin-bottom: .1em;}
#hero-area h2 { vertical-align: middle;}

ul.error { color: #4A2300; padding: 0.2em 0 0.5em 0;}
ul.error li span.alert-icon { display: none;}
div#content ul.error li.message { font-size: 1.5em;}

/**** / Common Recipe Styles ****/

/**** Recipe Landing ****/
div#recipe-landing div.heroImage div.hero_wall img { float: left;}
div#recipe-landing div.heroImage div.hero_wall { width: 78.5em; padding: 0;}
div#recipe-landing div.section { float: left ; border-left: none; width: auto; padding: 0; margin-top: 2em;}
div#recipe-landing div.section ul.links { padding: 0; margin: 0; float: left;}
div#recipe-landing div.section ul.links li { float: left; clear: left;}
div#recipe-landing div#column-three { margin-right: -0.2em; *margin-right: -0.1em; }
div#recipe-landing div#column-three a { float: left; padding: 0; margin: 0;}
div#recipe-landing div#column-two a { float: left; padding: 0; margin: 0;}
div#recipe-landing div#column-one a { float: left; padding: 0; margin: 0;}
/**** /Recipe Landing ****/

/**** Recipe Search ****/
#recipe-search div.form-wrapper { background: #fffce5; padding: 2em; margin-bottom: 1.5em; }
#recipe-search div.form-wrapper ul.error { padding-bottom: .5em; }
#recipe-search div.form-wrapper label { display: block; font-weight: bold; }
#recipe-search div.form-wrapper input { vertical-align: bottom; }
#recipe-search div.form-wrapper input.button-search { margin-left: .6em; }
#recipe-search div.search-tips h2 { font-family: Georgia, "Times New Roman", Times, serif; }
#recipe-search div.search-tips ul { margin-bottom: .1em; }
#recipe-search div.search-tips ul li { background-image:url("../images/common/img_bullet.gif"); background-position: 0.8em 0.7em; background-repeat:no-repeat; list-style-position: outside; padding: 0.2em 1.8em; }
/**** / Recipe Search ****/

/**** Recipe Search Results ****/
#recipes #results #results-container { float: left; width: 100%;/* I don't particularly like floating this main column (inside a container div, no less), but doing so hugely reduces float-related headaches when styling its contents. */ }
#recipes #results ul.pagination { top: 0; }
#recipes #results #refinements, #recipes #results #secondary-results { width: 31.4em; padding: 0 3em 1em; float: left; }
#recipes #results h1 { border-bottom: none; margin-bottom: 0; padding-left: 1.5em; }
#recipes #results #refinements h2 { margin-top: .8em; font-family: Georgia, "Times New Roman", Times, serif;  }
#recipes #results #refinements ul#refinements-list { padding-bottom: 1.6em; }
#recipes #results #refinements ul#refinements-list li { float: left; white-space: nowrap;/* This keeps IE6/7 from destoying the list when a floated item hits the edge of its container. */ padding-right: .8em; }
#recipes #results #refinements ul#refinements-list li span.active { font-weight: bold; }
#recipes #results #refinements a#return-to-all-results { margin-top: 1.3em; font-weight: bold; }
#recipes #results #refinements span.search-term { font-weight: bold; }
#recipes #results #secondary-results h2 { font-size: 1.2em; line-height: 1.4em; font-weight: bold; }
#recipes #results #secondary-results ul#tips-list { margin-bottom: 1.4em; }
#recipes #results #secondary-results ul li { padding: 0.1em 0; }
#recipes #results div.the-bar { width: 100%; }
#recipes #results div#primary-results { padding-left: 0.5em;}
#recipes #results #top-results { border-bottom: 1px solid #d9d9d9; margin-bottom: -1px; }

#recipes #results #recipe-hero { width: 33em; *width: 33.5em; float: left; overflow: hidden; padding: 1em 2.8em 1em 3em; border: solid #d9d9d9; border-width: 1px 0 0 1px; margin-left: -0.2em; *margin-left: 0; }
#recipes #results #recipe-hero img.recipe-thumb { margin-bottom: .8em; display: block; }

div#content ul.recipe-list { float: left; font-size: 1em; width: 100%; margin-bottom: -0.1em; display: block; position: relative; border-bottom: 1px solid #d9d9d9; margin-right: -1px; }
div#content ul.recipe-list li { float: left; display: block; width: 13.6em; padding: 1em 2.9em 1.5em 2.8em; margin-left: -0.1em; font-size: 1em; border: solid #d9d9d9; border-width: 1px 0 0 1px; }

#recipes #results #top-results ul.recipe-list { width: 38.8em; *width: 38.7em; clear: both; float: left;  }
#recipes #results #top-results ul.recipe-list li { border-right: 1px solid #d9d9d9; padding: 1em 2.8em 1.5em 2.8em;}

#recipes #results li.recipe img.recipe-thumb { margin-bottom: .8em; }
#recipes #results li.recipe span.recipe-img { display: block; min-height: 13.5em; _height: 13.5em; width: 13.5em;}
#recipes #results li.recipe span.recipe-name { display: block; font-size: 1.1em; }
#recipes #results li.recipe a:hover span.recipe-name,
#recipes #results li.recipe a:active span.recipe-name { text-decoration: underline;}
/**** / Recipe Search Results ****/

/****  Recipe Page Styles ****/
div#recipe div.page_title h1 { padding-right: 20em;}
div#recipe input.unbooked,
div#recipe img.booked { float: right; padding-top: 0.9em; _padding-top: 1em;}
div#recipe img.booked { padding-top: 1.2em;}
div#recipe div.btn-printer-friendly-version { float: right; margin-top: 1.1em; _margin-top: 1.2em; margin-right: 1em; }
div#recipe div.btn-printer-friendly-version a { height: 1.1em;}
div#recipe div#content { margin-top: 0; padding-bottom: 1em;  }
div#recipe div.the-bar { padding-bottom: 0.2em; text-align: right; }
div#recipe div#top-bar { margin-bottom: 0; padding-top: 2em;  }
div#recipe div#bottom-bar { width: 100%; clear:both; }
div#recipe-instructions { margin-left: 32em;}
div#recipe-instructions h2 { font-weight: bold; font-size: 1.2em; color: #4A2300; padding: .3em 0 0 0; }
div#recipe-instructions h3 { font-weight: bold; font-size: 1.2em; color: #505050; padding: 0.7em 0 0 0; }
div#recipe-instructions p { padding: 0; margin-bottom: 1em; font-size: 1em;}
div#recipe-instructions ul { padding: .5em 0 1em 0;}
div#recipe-instructions ul li {  padding: 0.3em 0;}
div#recipe-instructions ul li a { line-height: 1.3em;}
div.recipe-description { padding-top: .5em; margin-bottom: 1em; font-size: 1.2em; line-height: 1.4em; }
div.directions { padding-top: .5em; margin-bottom: 1em; font-size: 1.2em; line-height: 1.4em; }
div.source { padding-top: .5em; margin-bottom: 1em; font-size: 1.2em; line-height: 1.4em; }
div.yield { padding-top: .5em; margin-bottom: 1em; font-size: 1.2em; line-height: 1.4em; }



div#hero-area div.related-content { display: block; width: 28.5em; }
div#hero-area div.related-content h2 { color: #4A2300; font-weight: bold; font-size: 1.2em; padding-bottom: 0.2em;}
div#hero-area div#related-tips, 
div#hero-area div#related-recipes { background-color: #FFFBE5; padding: 2em 1em 1em 1em; }
div#hero-area div#related-items { margin-top: 2em; width: 30.4em; }
div#hero-area div#related-items h2 { border-bottom: 1px solid #D9D9D9; }
div#hero-area div#related-items li { padding: 1em 0 0 11em; min-height: 10em; _height: 10em; font-size: 1em; }
div#hero-area div#related-items span.product-thumb { float: left; margin-left: -11em; }
div#hero-area div#related-items span.product-name, div#hero-area div#related-items span.product-price, div#hero-area div#related-items span.product-price span { display: block; }
div#hero-area div#related-items span.product-name { font-size: 1.2em; padding-top: .3em; padding-bottom: .15em; }
div#hero-area div#related-items span.product-name a { line-height: 1.08em; }
div#hero-area div#related-items div.inline-rating { padding-top: .4em; *padding-top: .5em; }
/****  /Recipe Page Styles ****/

/****  Course Page Styles ****/
div#course div#content { _height: 70em; padding-bottom: 0;}
div#course div#hero-area { padding-bottom: 1em;}
div#course div#content h2 {  font-family: Georgia, "Times New Roman", Times, serif; font-size: 1em;  }
div#course div#content h2 a.block-text-link { font-size: 1.8em;}
div#course div#sub-course-list { margin-left: 31.5em;}
div#course div#top-bar a.return-to-previous  { float: right; margin-top: 1em; }
div#course div#sub-course-list ul li { padding: 0.1em 0;}
div#course div#bottom-bar { text-align: right; border-top: 1px solid #EDEAE2; width: 100%; float: right; }
/****  /Course Page Styles ****/

/****  Sub-Course Page Styles ****/
div#sub-course div#top-bar ul.pagination {  margin-top: -0.2em }
div#sub-course div#top-bar { padding-top: 0;}
div#sub-course div.recipe-list ul {overflow: hidden; width: 100%; border-bottom: 1px solid #EDEAE2;}
div#sub-course div.recipe-list ul li {float: left; width: 11.2em; height: 18em;  border-right: 1px solid #EDEAE2; padding: 0 .8em 1em .8em; margin: 0; }
div#sub-course div.recipe-list ul li:last-child { border-right:none;}
div#sub-course div.recipe-list ul li img { display: block; margin-top: 1em; margin-bottom: .5em;}
div#sub-course #content h1 { margin-bottom:0;}
div#sub-course div.recipe-list ul li span { display: block;}
/****  /Sub-Course Page Styles ****/

/**** Tips ****/
div#tip-view div#top-bar { margin-bottom: 1em; }
div#tip-view div#top-bar a.return-to-previous  { float: right; margin-top: 0.5em; }
div#tip-view div#bottom-bar { text-align: right; border-top: 1px solid #EDEAE2; width: 100%; clear:both; }
div#tip-view div.tips-description { padding-bottom: 1em; padding-right: 0.4em; font-size: 1.2em; line-height: 1.4em; }
#recipes #tip-view #main-content { width: 60em; float: left; position: relative; padding-right: .8em; }

div#tip-view div#main-content.has-related { border-right: 1px solid #EDEAE2;}
div#tip-view #main-content h3 { font-size: 1.2em; padding-bottom: .4em; font-weight: bold; padding-top: 0.8em; }
div#tip-view p { padding-bottom: 0;}
div#tip-view p p { padding-bottom: 1em;}
div#tip-view div.tips-description p { padding-bottom: 1em; font-size: 1em;}
div#tip-view div.tipgroup-description p { padding-bottom: 1em; font-size: 1em;}
div#tip-view p.tip-intro { padding-bottom: 1.5em;}
div#tip-view #main-content img.hero { float: left; padding-right: 1.5em; padding-bottom: 1.5em; }
div#tip-view #main-content .previous { position: absolute; top: .35em; right: .8em; }
div#tip-view div.tip-section { clear: left; }
div#tip-view div.tip-section div.tip-text {  margin-left: 0;}
div#tip-view div.tip-section div.tip-text p p { margin-top: -1em; }
div#tip-view div.tip-section ul { margin-bottom: 1em; overflow:hidden;}
div#tip-view div.tip-section li { background-image:url("../images/common/img_bullet.gif"); background-position: 0.8em 0.7em; background-repeat:no-repeat; list-style-position: outside; padding: 0.2em 1.8em; }
div#tip-view div.tips-description table { width: 100%; margin-bottom: 1em; }
div#tip-view div.tips-description ul { overflow:hidden; }
div#tip-view div.tips-description li { background-image:url("../images/common/img_bullet.gif"); background-position: 0.8em 0.7em; background-repeat:no-repeat; list-style-position: outside; padding: 0.2em 1.8em; list-style-type: none; font-size: 1em; line-height: 1.3em; }
div#tip-view ul.quick-tips-list { margin-top: 1em; margin-bottom: 1em; margin-left: -1.5em; width: 61.5em;  }
div#tip-view ul.quick-tips-list li { width: 16em; margin-left: 1em; float: left; }
div#tip-view ul.quick-tips-list li img { margin-bottom: .7em; display: block; width: 188px; height: 188px; }
div#tip-view div#main-content ul.quick-tips-list li h3 { font-size: 1.2em; padding-bottom: .4em; padding-top: 0.3em; }
div#tip-view p.source { margin-top: 2em; }

div#tip-view #related-elements {width: 16em; float: left; margin-left: -1px; padding: 0 0 0 1em; border-left: 1px solid #edeae2;}
div#tip-view #related-elements h2 { font-size: 1.2em; font-weight: bold; margin-bottom: .8em; padding-bottom: .3em; border-bottom:  1px solid #edeae2; }
div#tip-view div#related-recipes, #recipes #tip-view div.related-content, #recipes #tip-view div#related-tips { margin-bottom: 4em; }
div#tip-view div#related-recipes ul, #recipes #tip-view div#related-tips ul { margin-left: 1em; }
#recipes #tip-view div#related-recipes ul li span.recipe-name { padding-right: 1.2em; display: inline; font-size: 1.1em;}
#recipes #tip-view div#related-recipes ul li span.arrow-right { background-position: left 2px; width: 0.8em; margin-left: -1em; }
#recipes #tip-view div#related-tips ul li a span { margin-right: -1.4em;}
#recipes #tip-view div#related-recipes li { font-size: 1.1em; }
#recipes #tip-view div#related-elements div#related-items ul { margin-left: 1em; }
#recipes #tip-view div#related-elements div#related-items span.number-of-reviews { display: inline-block; font-size: .9177em; }
#recipes #tip-view div#related-items ul li { margin-bottom: 1.6em; }
#recipes #tip-view div.related-content ul li { margin-bottom: .4em; }
#recipes #tip-view div.related-content span { display: block; }
#recipes #tip-view div.related-content span.arrow-right { display: inline-block; }
#recipes #tip-view div.related-content span.product-name a { line-height: 1.08em; }
#recipes #tip-view div.related-content span.product-price { margin-top: .3em; }
#recipes #tip-view div.related-content span.product-price span { display: block; font-size: 1em;}
#recipes #tip-view div.related-content span.product-price span span { display: inline; }
#recipes #tip-view div.related-content div.inline-rating { padding-top: .1em; *padding-top: .25em; }


#recipes #tip-view #content.tip-group { position: relative; width: 70em; }
#recipes #tip-view #main-tipgroup  { margin-left: 32em; }
#recipes #tip-view #main-tipgroup .tipgroup-description { font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.5em; }
#recipes #tip-view #main-tipgroup .tipgroup-description  * { font-size: 1em; }
div#tip-view #main-tipgroup h2 { font-weight: bold; margin-bottom: .4em; padding-bottom: .3em; border-bottom: 1px solid #edeae2; font-size: 1.2em; }
#recipes #tip-view #main-tipgroup div#related-tips { margin-bottom: 2.5em; width: 24.8em; }
#recipes #tip-view #main-tipgroup div#related-recipes { margin-bottom: 2em; width: 24.8em; }
#recipes #tip-view #main-tipgroup li { margin-bottom: .4em; }
/**** /Tips ****/

/**** Recipe Print ****/
body#recipe-print #recipe.wrap { width: 56em; }
body#recipe-print div#content { margin: 1em 0 0 1em; padding-left: 0; border-left: 0; width: 55em; }
body#recipe-print h1 { margin-bottom: 0; padding-right: 7.5em; }
div#content.print_pop div#recipe-instructions {margin-left: 0;}
div#content.print_pop #controls {float: right; position: relative; top: -2.5em; }
div#content.print_pop #controls div { float: right; padding-right: 2em; }
div#content.print_pop img {margin-bottom: 2em;}
/**** /Recipe Print ****/

/**** Menu Group ****/
div#menu-group div#content { padding-left: 1.6em; width: 70em;}
div#menu-group div#top-bar a.return-to-previous  { float: right; margin-top: 1em; }
div#menu-group div#bottom-bar { text-align: right; float: right; border-top: 1px solid #EDEAE2; width: 100%; margin-top: 1em; }
div#menu-group ul.menu_group li { float: left;}
#content ul.menu_group li.even { margin-bottom: 2em;}
#content ul.menu_group li.even img { float: right;}
#content ul.menu_group li.even div { margin: 0 26.5em 0 0;}
#content ul.menu_group li.even p { padding: .5em 0 0 0; }
#content ul.menu_group li.odd { margin-bottom: 2em;}
#content ul.menu_group li.odd img { float: left; }
#content ul.menu_group li.odd div { margin: 0 0 0 26.5em;}
#content ul.menu_group li.odd p { padding: .5em 0 0 0;  }
/**** /Menu Group ****/

/**** Menu ****/
div#menu div#content { width: 70em;}
div#menu div#content div#hero-area { padding-top: 0.5em;}
div#menu div#top-bar a.return-to-previous  { float: right; margin-top: .6em; }
div#menu div#bottom-bar { text-align: right; float: right; border-top: 1px solid #EDEAE2; width: 100%; margin-top: 1em; }
div#menu div#recipe-instructions h2 { border-bottom: 1px solid #D9D9D9;}
div#menu div#recipe-instructions div.related-content { width: 25em;}
div#menu div#recipe-instructions div.related-content ul { padding: 1em;}
div#menu div#recipe-instructions p { padding: 0; margin-bottom: 1em; font-size: 1em;}
div#menu div.recipe-description { padding-top: .5em; margin-bottom: 1em; font-size: 1.2em; line-height: 1.4em; }
div#menu span.arrow-right { background-position: right 1px; }
/**** /Menu ****/

/**** Tips & Techniques ****/
div#content div.heroImage div.hero_wall img { float: left;}
div#content div.heroImage div.hero_wall { width: 78.5em; padding: 0;}

div#ws-kids div#content div.section { float: left ;  border-left: 1px solid #dfdfdf; width: 24.4em; *width: 24.6em;  padding: 0 .9em .5em .9em; margin-top: 1.2em; min-height: 75em; }
div#ws-kids div#content div#first.section { border: none; width: 23.9em; *width: 24.1em; }
div#ws-kids div#content div#third.section { width: 23.9em; *width: 24.1em; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; margin-top:0; padding-top:1.2em; background-color: #fbf9f2; }
div#entertaining-ideas div#content div.section { float: left ;  border-left: 1px solid #dfdfdf; width: 24em;  padding: 0 .9em .5em .9em; margin-top: 2em; min-height: 86em; }
div#entertaining-ideas div#content div#first.section { border: none; }
div#tips-techniques div#content div.section { float: left ;  border-left: 1px solid #dfdfdf; width: 24em;  padding: 0 .9em .5em .9em; margin-top: 2em; min-height: 80em; }
div#tips-techniques div#content div#first.section { border: none; }
div#content div#first.section { border: none; }
div#ws-kids div#content h1, div#tips-techniques div#content h1, div#entertaining-ideas div#content h1 { border-bottom: 0; padding-bottom: 0; }
div#content div.section h2 {clear: left; padding-top: 1em; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em;}
div#content div.section h2.tip_one { padding-top: .3em;}
div#content div.section div.hero img { float: right; padding: 0 0 1em 1em; }
div#content div.section div.links ul { margin-bottom: 2em; }
div#ws-kids div#content div.section div.links ul { margin-bottom: 1em; }
div#content div.section div.links ul li { padding: 0 0 0.3em 0; line-height: 1.3em; }
div#ws-kids div#content div.section div.links ul li { padding: 0 0 0.5em 0; }
div#content div.section div.links ul li.copy { padding: 0 0 0.3em 0; line-height: 1.3em; }
div#content div.section div.links ul li a, 
div#content div.section div.links ul li a:hover, 
div#content div.section div.links ul li a:active { line-height: 1em; padding: 0; }
div#content div.section div.links ul li a span.arrow-right { background-position: left 1px; }
div#ws-kids div#content div.section div.links ul li span.arrow-right { background-position: left 3px; }
#content div.section div.links li.copy {margin-bottom: 1em;}
#content div.section h2.tip_two {border-top: 1px solid #dfdfdf;}
div#ws-kids div#content div#third.section h2.tip_two { border: none; }
/**** /Tips & Techniques ****/

/**** PDF Recipe ****/
div#pdf-recipe div#top-bar a.return-to-previous  { float: right; margin-top: 1em; }
div#pdf-recipe div#bottom-bar { text-align: right; float: right; border-top: 1px solid #EDEAE2; width: 100%; margin-top: 1em; }
div#pdf-recipe div.btn-recipe-pdf { float: left; margin-right: 2em; margin-top: 2em; background-image: url('../images/recipe/pdf/btn_pdf.gif'); background-repeat: no-repeat; padding-left: 3.5em; width: 7em;}
div#pdf-recipe div.btn-recipe-pdf a { width: auto; height: 3em; font-size: 1.1em; display: block; }

div#pdf-recipe div.btn-acrobat-reader { float: left; margin-top: 2em;}
/**** /PDF Recipe ****/

/****  Video Library ****/
div#video-library div#content { margin-left: 0; margin-top: 1em; border-left: none; padding-left: 0; }
div#video-library h1 { margin-left: .5em; color : #4b690f; font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; border: none;}
div#video-library p { margin: 0 10em 1em .9em; }