@charset "utf-8";
/* Spencers Core CSS Document */

@import "spencers-common.css";

#contentcontainer { border: 1px solid #fff; width: 943px; padding: 5px; background: url(images/40p-transparent-bg.png); margin-right: 10px; }


/* Page Banner */
#mainbanner { border: none; width: 943px; padding: 0; background: none; margin-bottom: 6px; }
#mainbanner .herospace { height: 170px; background: url(images/pageheaders/aboutus.jpg) no-repeat top left; }

.herospace#banner_about_us { background: url(images/pageheaders/aboutus.jpg) no-repeat top left; }
.herospace#banner_products { background: url(images/pageheaders/products.jpg) no-repeat top left; }
.herospace#banner_stockists { background: url(images/pageheaders/stockists.jpg) no-repeat top left; }
.herospace#banner_news { background: url(images/pageheaders/news.jpg) no-repeat top left; }
.herospace#banner_recipes { background: url(images/pageheaders/recipes.jpg) no-repeat top left; }
.herospace#banner_contact_us { background: url(images/pageheaders/contact.jpg) no-repeat top left; }
.herospace#banner_faqs { background: url(images/pageheaders/faqs.jpg) no-repeat top left; }

.herospace .parentitle { display: inline; margin-top: 77px; float: right; height: 34px; padding: 12px 46px 0 52px; background: url(images/internal-parenttitle-bg.gif) no-repeat; }
.herospace .parentitle h1 { width: 230px; font-size: 19px; color: #fff; margin: 0; font-weight: normal; letter-spacing: -1px; }


/* Content Containment */
#copycontainer { width: 943px; padding: 30px 0 73px 0; background-color: #fff; }
#copycontainer .innercontainer { width: 920px; padding: 0 0 0 23px; min-height: 250px; height: auto !important; height: 250px; background: url(images/inner-copy-divideline.gif) repeat-y; }


/* Left Column */
#leftcol { float: left; width: 186px; }
#leftcol h1 { margin: 0; background-color: #fff; padding: 0 0 9px 24px; font-size: 140%; color: #036731; text-transform: uppercase; }

#leftcol #subnav { width: 186px; }
#leftcol #subnav ul { margin: 0; padding: 0; width: 186px; list-style: none; }
#leftcol #subnav li { list-style-type: none; }
#leftcol #subnav li a { text-decoration: none; display: block; width: 162px; padding: 4px 0 4px 24px; border-bottom: 2px solid #fff; background: #f2efea url(images/arrow-right-brown.gif) no-repeat 11px 8px; font-weight: bold; color: #403f3f; }
#leftcol #subnav li a:hover { font-weight: bold; color: #000; background-color: #f8f8f7; }
#leftcol #subnav li a.active { font-weight: bold; color: #000; background-color: #f8f8f7; }

#leftcol #subsecond { float: left; border-left: 1px solid #fff; width: 192px; height: 445px; overflow: auto; background-color: #f5f4f2; }
#leftcol #subsecond ul { margin: 0; padding: 5px 0; list-style: none; }
#leftcol #subsecond li { list-style-type: none; padding: 4px 0; }
#leftcol #subsecond li a { display: block; width: 158px; padding: 0 0 0 14px; color: #4a4a4a; text-decoration: none; }
#leftcol #subsecond li a:hover { color: #000; background: url(images/arrow-right-brown.gif) no-repeat 5px 5px; }
#leftcol #subsecond li a.active { color: #000; background: url(images/arrow-right-brown.gif) no-repeat 5px 5px; }


/* Main Copy */
#maincopy { float: left; width: 652px; padding: 20px 0 0 38px; font-size: 110%; line-height: 150%; }
#maincopy h1.pagetitle { margin: 0 0 10px 0; padding: 0; font-size: 30px; color: #036731; }
\ html body #maincopy h1.pagetitle { margin-bottom: 15px; }

#maincopy .introblock { font-weight: bold; }


/* Spencers Offers (About page) */
ul.spencersoffers { margin: 0; padding: 0; list-style: none; font-weight: bold; font-size: 90%; }
ul.spencersoffers li { float: left; width: 219px; padding: 0 0 10px 12px; background: url(images/arrow-right-lightgreen.gif) no-repeat 2px 6px; }


/* Products Landing Page */
#productslanding { position: relative; margin-top: -20px; }

#productslanding .categoryrow { height: 150px; padding: 22px 0; border-bottom: 1px solid #e6e3dd; }
#productslanding .categoryrow.last { border-bottom: none; }

#productslanding .categoryrow .listcategory { line-height: normal; float: left; width: 162px; height: 150px; text-align: center; border-right: 1px solid #e6e3dd; }
#productslanding .categoryrow .listcategory span { padding: 0 5px; display: block; text-align: center; margin-top: 7px; }
#productslanding .categoryrow .listcategory.last { border-right: none; }
#productslanding .categoryrow .listcategory a { font-size: 90%; font-weight: bold; display: block; width: 162px; height: 150px; }
#productslanding .categoryrow .listcategory a:hover { text-decoration: none; color: #000; }
#productslanding .categoryrow .listcategory img.arrow { display: inline; }


/* Category Landing Page */
.otheroptions { float: left; width: 179px; position: relative; margin-left: -28px; padding-top: 50px; }
* html body .otheroptions { margin-left: -14px; }
.categoryimage { float: right; width: 280px; }

img.authenticbase { margin-top: 10px; }


/* Product Deatils Page */
.productlargeshot { float: left; width: 195px; }
.productinformation { float: left; width: 245px; padding-left: 15px; }

#relatedrecipes { border-top: 1px solid #e3e2de; padding: 15px 0 15px 5px; margin-top: 15px; }
#relatedrecipes h4 { margin: 0; font-size: 13px; color: #036731; }

#relatedrecipes .recipe { float: left; width: 150px; font-size: 90%; line-height: normal; }
#relatedrecipes .recipe img { float: left; width: 65px; height: 67px; border: 1px solid #e1e1e1; }
#relatedrecipes .recipe p { float: left; width: 70px; margin: 0; padding: 8px 0 0 13px; }
#relatedrecipes .recipe a { color: #000; }
#relatedrecipes .recipe a:hover { color: #036731; }


/* Recipe Details Page */
.recipephoto { float: right; }
.recipephoto a.fullimage { display: block; margin-top: 10px; padding: 0 6px 0 10px; float: right; background: url(images/arrow-right-brown.gif) no-repeat left center; color: #000; font-weight: bold; }
.recipephoto a:hover.fullimage { color: #036731; }

.recipeinstructions { float: left; width: 345px; font-size: 90%; }
.recipeinstructions ol { margin: 0; padding: 0 0 0 17px; }
.recipeinstructions ol li { padding-bottom: 10px; }

\ html body .recipeinstructions ol { margin: 0; padding: 0 0 0 22px; }

.recipelisting { float: left; width: 310px; padding: 0 0 20px 10px; font-weight: bold; }
.recipelisting .thumbnail { float: left; width: 85px; }
.recipelisting .thumbnail a { outline: none; }
.recipelisting .recipetitle { padding-top: 10px; }
.recipedivide { clear: both; height: 20px; font-size: 1px; line-height: 0px; border-top: 1px solid #e6e3dd; }

a.backtorecipes { display: block; float: left; margin: -20px 0 20px 0; padding: 6px 12px 6px 20px; background: #f8f7f4 url(images/arrow-left-brown.gif) no-repeat 9px center; font-weight: bold; }
a:hover.backtorecipes { background-color: #edebe4; text-decoration: none; }

form#recipeCategoriesFrm { margin: 0; padding: 0 0 10px 0; border-bottom: 1px solid #e6e3dd; }
form#recipeCategoriesFrm label { padding-right: 10px; }
form#recipeCategoriesFrm select { width: 150px; }

.norecipies { text-align: center; color: #a7a49d; font-weight: bold; }


/* News Styling */
.newsteaser a { position: relative; margin: 0; padding: 15px 0 15px 0; display: block; text-decoration: none; border-bottom: 1px solid #e6e3dd; }
.newsteaser .clearfloats { display: block; }
.newsteaser a:hover { display: block; }
.newsteaser a .teasertitle { font-weight: bold; color: #046831; display: block; }
.newsteaser a .teasertitle span { font-weight: bold; padding-right: 10px; color: #9e957e; }
.newsteaser p { margin-bottom: 0; }
.newsteaser a p { color: #000; }
.newsteaser a:hover p { color: #000; text-decoration: underline; }

.newsdate { position: relative; margin: 0 0 0 -5px; padding: 0 5px 12px 5px; margin-bottom: 15px; font-size: 90%; font-weight: bold; color: #9e957e; border-bottom: 1px solid #e6e3dd; }
.newssource { position: relative; margin: 0 0 0 -5px; padding: 12px 5px 0 63px; margin-top: 15px; font-size: 90%; color: #9e957e; background: url(images/news-page-source.gif) no-repeat 0px 17px; border-top: 1px solid #e6e3dd; }
\ html body .newssource { position: static; background: url(images/news-page-source.gif) no-repeat 0px 19px; }

p.newslisting a { text-decoration: none; display: block; width: 150px; padding: 0 12px 0 24px; border-bottom: none; background: none; font-weight: normal; color: #4a4a4a; }
p.newslisting a:hover { color: #000; font-weight: normal; background: transparent url(images/arrow-right-brown.gif) no-repeat 12px 19px; }
p.newslisting a.active { color: #000; font-weight: normal; background: transparent url(images/arrow-right-brown.gif) no-repeat 12px 19px; }
p.newslisting a strong { color: #036731; font-size: 90%; }


/* Search Site */
#searchresults { border: 1px solid #c5c0b7; background-color: #f8f8f7; padding: 15px; margin: 0 0 25px 0; }
#searchresults form { margin: 0; padding: 0; }
#searchresults form{ font-size: 11px; color: #666666; }

.searchreturn { border: 1px solid #e6e3dd; padding: 15px; margin: 0 0 10px 0; }
.searchreturn span.failure { font-weight: bold; color: #0077ae; }
.searchreturn .searchtoprow { display: block; padding-bottom: 5px; }


/* FAQS */
.faqdetails { display: block; padding: 0 0 10px 10px; }
.faqdetails .que { margin: 25px 0 5px 0; line-height: normal; font-size: 1.2em; font-weight: bold; color: #036731; }
.faq-que { margin: 0; padding: 0 0 0 10px; font-size: 100%; font-weight: bold; color: #036731; background: url(images/arrowright.gif) no-repeat top left; }
a.totop { text-decoration: none; color: #036731; display: block; margin: 10px 0 0 0; padding-left: 15px; font-size: 90%; background: url(images/top.gif) no-repeat top left; }
a.totop:hover { color: #036731; font-weight: bold; }

.faqlist ul li { list-style: none; padding-bottom: 3px; }
.faqlist a { text-decoration: none; }
.faqlist ul { margin: 0; padding: 0 0 20px 0; border-bottom: 1px solid #ece4d3; }


/* TV Ads page */

.videoWrap {border-bottom:1px solid #cacaca; padding:0 0 30px 0;}
