html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: inherit;
font-family: inherit;
vertical-align: baseline;
/*list-style: none;*/
}
/* remember to define focus styles! */
:focus {
outline: 0px;
}
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
.container {
position: relative;
margin: 0px auto;
height: 100%;
}
body {
background: #3e2d17 url('/public/images/front_bg1.jpg') repeat top center;
font-family: Trebuchet MS;
font-size: 12px;
}
.container a {
color: #5a96e8;
text-decoration: none;
}
.container a:hover {
color: #5a96e8;
text-decoration: underline;
}
/*-------------------------------- BEGIN LAYOUT ----------------------------------------- */
/*##############################################################################
##############################################################################
## Body Texture & Division Containers ##
############################################################################*/
#headerContainer { position: absolute; width: 100%; min-height: 444px; margin: 0; padding: 0; background: url('/public/images/front_bg2_after2.jpg') repeat-x top center; }
#headerSides { position: relative; width: 100%; min-height: 444px; margin: 0; padding: 0; background: url('/public/images/front_bg3_after2.png') no-repeat top center; }
/*##############################################################################
##############################################################################
## Header ##
############################################################################*/
#identity { width: 1004px; height: 380px; margin: 0; padding: 0; background: url('/public/images/front_logo_after.jpg') no-repeat top left; }
#brands { width: 909px; height: 90px; margin: 0; padding: 0 0 0 95px; background: url('/public/images/front_bg4.png') no-repeat top left; }
/*##############################################################################
##############################################################################*/
/*###########################################
## Product Feature ##
###########################################*/
#identity .rowOne { width: 1004px; margin: 0; padding: 0; }
#identity .rowOne #corporateLogo { width: 481px; margin: 0; padding: 0; }
#identity .rowOne #corporateLogo h1 { width: 265px; height: 150px; margin: 0 0 0 68px; padding: 0; }
#identity .rowOne #corporateLogo h1 a { display: block; width: 265px; height: 150px; margin: 0; padding: 0; text-indent: -9999px; cursor: pointer; }
#identity .rowOne #productDetails { width: 523px; margin: 0; padding: 0; }
#identity .rowOne #productFeature { width: 523px; margin: 0; padding: 0; }
#identity .rowOne #productFeature img { float: left; margin: -26px 10px 0 0; border: 0; }
#identity .rowOne #productFeature b { display: block; margin: 26px 0 0 0; padding: 0; color: #5b1300; font-size: 14px; font-weight: bold; line-height: 14px; }
#identity .rowOne #productFeature p { width: 440px; margin: 0 0 10px 0; padding: 0; color: #5b1300; font-size: 12px; font-weight: normal; line-height: 14px; }
#identity .rowOne #productFeature span { display: block; margin: 0; padding: 0; }
#identity .rowOne #productFeature a { color: #3f7565; font-size: 12px; font-weight: bold; line-height: 12px; text-decoration: none; }
#identity .rowOne #productFeature a:hover { color: #3f7565; font-size: 12px; font-weight: bold; line-height: 12px; text-decoration: underline; }
#identity .rowOne #cse-search-box { margin: -5px 0 0 0; padding: 0; text-align: right; }
#identity .rowOne #cse-search-box form { margin: 0; padding: 0; }
#identity .rowOne #cse-search-box .leftSide { width: 12px; height: 22px; margin: 0 0 0 6px; padding: 0; background: url('/public/images/search_left.jpg') no-repeat top left; }
#identity .rowOne #cse-search-box .rightSide { width: 12px; height: 22px; margin: 0; padding: 0; background: url('/public/images/search_right.jpg') no-repeat top left; }
#identity .rowOne #cse-search-box #siteSearch { width: 130px; height: 22px; margin: 0; padding: 0; }
#identity .rowOne #cse-search-box #siteSearch input { width: 126px; height: 18px; border: 0; background: url('/public/images/search_bg.jpg') repeat-x top left; margin: 0; padding: 4px 0 0 4px; color: #ffffff; font-size: 11px; font-weight: bold; }
#identity .rowOne #cse-search-box #searchSubmit { width: 64px; height: 22px; margin: 0; padding: 0; }
/*###########################################
## New And Noteworthy ##
###########################################*/
#identity .rowTwo { width: 1004px; margin: 0; padding: 0; }
#identity .rowTwo .logoPush { margin: 0; padding: 0; }
#identity .rowTwo #newAndNoteworthy { width: 500px; margin: 0 0 0 0; padding: 0; }
#identity .rowTwo #newAndNoteworthy h2 { margin: 0; padding: 0; color: #5d1603; font-size: 1.3em; }
#identity .rowTwo #newAndNoteworthy #newsArticles { width: 465px; margin: 10px 0 0 0; padding: 0 0 0 35px; }
#identity .rowTwo #newAndNoteworthy #newsArticles ul { list-style: disc inside; margin: 0; padding: 0 0 0 0; }
#identity .rowTwo #newAndNoteworthy #newsArticles li { float: left; width: 195px; margin: 0 0 0 0; padding: 0 0 12px 25px; color: #5d1603; font-size: 12px; font-weight: normal; line-height: 14px; }
#identity .rowTwo #newAndNoteworthy #newsArticles li a { color: #5d1603; font-size: 12px; font-weight: normal; text-decoration: none; }
#identity .rowTwo #newAndNoteworthy #newsArticles li a:hover { color: #5d1603; font-size: 12px; font-weight: normal; text-decoration: underline; }
#identity .rowTwo #newAndNoteworthy .footer { width: 415px; margin: 5px 0 0 0; padding: 0 0 0 60px; }
#identity .rowTwo #newAndNoteworthy .footer .feed { width: 207px; margin: 0; padding: 0; }
#identity .rowTwo #newAndNoteworthy .footer .feed a { display: block; width: 56px; height: 17px; margin: 0; padding: 5px 0 0 24px; color: #ffffff; font-size: 11px; font-weight: bold; line-height: 12px; background: url('/public/images/news_rss.jpg') no-repeat top left; cursor: pointer; text-decoration: none; }
#identity .rowTwo #newAndNoteworthy .footer .feed a:hover { text-decoration: underline; }
#identity .rowTwo #newAndNoteworthy .footer .more { width: 208px; margin: 0; padding: 0; }
#identity .rowTwo #newAndNoteworthy .footer .more a { background: url('/public/images/news_more.jpg') no-repeat top left; width: 184px; height: 20px; margin: 0 0 0 0; padding: 3px 0 0 8px; display: block; color: #ffffff; font-size: 0.9em; line-height: 14px; cursor: pointer; }
#identity .rowTwo #newAndNoteworthy .footer .more a:hover { text-decoration: none; }
/*###########################################
## Brands ##
###########################################*/
#brands a { float: left; color: #5d1603; font-size: 12px; font-weight: normal; line-height: 12px; text-decoration: none; }
#brands a:hover { color: #5d1603; font-size: 12px; font-weight: normal; line-height: 12px; text-decoration: underline; }
#brands sup { font-size: xx-small; vertical-align: top; }
/*###########################################
## Brand Logo Styles ##
###########################################*/
#brands .greatdaynaturals { display: block; width: 105px; height: 88px; margin: 0; padding: 0; background: url('/public/images/brands/greatdaynaturals.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#brands .greatdaybreakfast { display: block; width: 112px; height: 88px; margin: 0; padding: 0; background: url('/public/images/brands/greatdaybreakfast.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#brands .farmersmarket { display: block; width: 155px; height: 88px; margin: 0; padding: 0; background: url('/public/images/brands/farmersmarket.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#brands .farmersharvest { display: block; width: 170px; height: 88px; margin: 0; padding: 0; background: url('/public/images/brands/farmersharvest.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#brands .oldehearthbakery { display: block; width: 125px; height: 88px; margin: 0; padding: 0; background: url('/public/images/brands/oldehearth.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#brands .ringoschickenrings { display: block; width: 140px; height: 88px; margin: 0; padding: 0; background: url('/public/images/brands/ringos.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
/*###########################################
## Main Image Promotion ##
###########################################*/
/* Container */
#mainPromo { width: 1004px; height: 340px; margin: -42px 0 0 0; padding: 0; background: url('/public/images/env_top.png') no-repeat bottom right; }
/* Options */
#mainPromo #imageRotation { width: 726px; height: 298px; margin: 0; padding: 22px 0 0 24px; background: url('/public/images/front_rotation.png') no-repeat top left; }
#mainPromo #imageRotation #imageFeature { width: 700px; height: 275px; margin: 0; padding: 0; }
#mainPromo #imageRotation #imageFeature #homeSlider { width: 700px; height: 275px; margin: 0; padding: 0; }
/*###########################################
## Recipe of the Day ##
###########################################*/
#mainPromo #recipeOfTheDay { width: 214px; min-height: 298px; margin: 22px 0 0 0; padding: 35px 20px 0 20px; background: url('/public/images/front_logo_bottom_after.jpg') no-repeat top left; }
#mainPromo #recipeOfTheDay h2 { color: #ffffff; font-size: 1.3em; margin: 0 0 10px 0; padding: 0; }
#mainPromo #recipeOfTheDay img { border: 0; }
#mainPromo #recipeOfTheDay .photo { width: 210px; margin: 0; padding: 0; }
#mainPromo #recipeOfTheDay .photo a { display: block; width: 195px; height: 85px; margin: 0; padding: 8px; background: url('/public/images/recipe_photobg.png') repeat top left; }
#mainPromo #recipeOfTheDay .photo a:hover { display: block; width: 195px; height: 85px; margin: 0; padding: 8px; background: url('/public/images/recipe_photobg_hover.png') repeat top left; }
#mainPromo #recipeOfTheDay .recipe { width: 210px; }
#mainPromo #recipeOfTheDay .recipe h3 { margin: 10px 0 8px 0; padding: 0; color: #ffd967; font-size: 14px; font-weight: bold; line-height: 14px; }
#mainPromo #recipeOfTheDay .recipe h3 a { color: #ffd967; font-size: 14px; font-weight: bold; line-height: 14px; text-decoration: none; }
#mainPromo #recipeOfTheDay .recipe h3 a:hover { color: #ffd967; font-size: 14px; font-weight: bold; line-height: 14px; text-decoration: underline; }
#mainPromo #recipeOfTheDay .recipe h4 { margin: 0 0 10px 0; padding: 0; color: #ffffff; font-size: 12px; font-weight: normal; line-height: 18px; text-decoration: underline; }
#mainPromo #recipeOfTheDay .recipe p { margin: 0 0 0 0; padding: 0; color: #ffffff; font-size: 12px; font-weight: normal; line-height: 18px; }
#mainPromo #recipeOfTheDay .footer { width: 210px; margin: 10px 0 0 0; padding: 0; }
#mainPromo #recipeOfTheDay .footer .more { width: 125px; margin: 0; padding: 0; }
#mainPromo #recipeOfTheDay .footer .more a { color: #8d602b; font-size: 13px; font-weight: bold; line-height: 14px; text-decoration: none; }
#mainPromo #recipeOfTheDay .footer .more a:hover { text-decoration: underline; }
#mainPromo #recipeOfTheDay .footer .feed { width: 85px; margin: 0; padding: 0; }
#mainPromo #recipeOfTheDay .footer .feed a { display: block; height: 16px; margin: 0; padding: 1px 0 0 18px; color: #ffa029; font-size: 11px; font-weight: bold; line-height: 12px; background: url('/public/images/rss.png') no-repeat top left; text-decoration: none; }
#mainPromo #recipeOfTheDay .footer .feed a:hover { text-decoration: underline; }
/*###########################################
## Egg Facts ##
###########################################*/
#leftColumnTop { width: 1004px; height: 22px; margin: 0; padding: 0; background: url('/public/images/front_leftColumn_top.png') no-repeat top left; }
#eggFacts { width: 195px; margin: 0; padding: 97px 28px 0 27px; background: url('/public/images/eggfacts_header.jpg') no-repeat top left; }
#eggFacts ul { list-style: none; margin: 0 ; padding: 0; }
#eggFacts li { width: 171px; margin: 0 0 1px 0; padding: 12px 12px 12px 12px; background: url('/public/images/eggfacts_bg.jpg') repeat-y top left; color: #ffffff; font-size: 11px; font-weight: bold; line-height: 14px; text-align: left; }
#eggFacts h2 { margin: 9px 12px 0 0; padding: 0; color: #ffd967; font-size: 14px; font-weight: bold; text-align: right; }
#eggFacts h2 a { color: #ffd967; font-size: 14px; font-weight: bold; text-decoration: none; }
#eggFacts h2 a:hover { text-decoration: underline; }
/*##############################################################################
##############################################################################*/
/*##############################################################################
##############################################################################
## Body ##
############################################################################*/
#bodyColumns { width: 699px; min-height: 325px; margin: 0 0 40px 0; padding: 0 0 0 0; color: #d7b27f; font-size: 12px; font-weight: normal; line-height: 18px; text-align: left; }
#bodyColumns h2 { color: #ffffff; font-size: 1.25em; font-weight: normal; line-height: 18px; }
#bodyColumns .push { margin: 0 0 0 55px; }
#bodyColumns p { margin: 12px 0 62px 0; padding: 0 8px 0 8px; }
#bodyColumns a.more { float: right; display: block; width: 59px; height: 22px; margin: 5px 0 0 0; padding: 0; background: url('/public/images/body_more.jpg') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#bodyColumns a.env { display: block; width: 345px; height: 230px; margin: 5px 0 0 0; padding: 0; background: url('/public/images/env_main.png') no-repeat top left; text-indent: -9999px; cursor: pointer; }
#bodyColumns .photo { width: 305px; margin: 10px 0 10px 0; padding: 0; }
#bodyColumns .photo a { display: block; width: 305px; height: 85px; margin: 0; padding: 8px; background: url('/public/images/recipe_photobg.png') repeat top left; }
#bodyColumns .photo a:hover { display: block; width: 305px; height: 85px; margin: 0; padding: 8px; background: url('/public/images/recipe_photobg_hover.png') repeat top left; }
#bodyColumns .wrapped { float: left; display: block; margin: 0; padding: 0; }
#bodyColumns .left { width: 315px; min-height: 325px; margin: 0; padding: 18px 30px 0 0; }
#bodyColumns .division { width: 9px; min-height: 325px; margin: 18px 0 0 0; padding: 0; background: url('/public/images/body_div.png') repeat-y top left; }
#bodyColumns .division #environmentLeft { width: 9px; height: 195px; margin: 0; padding: 0; background: url('/public/images/env_left.png') no-repeat top left; }
#bodyColumns .right { width: 345px; min-height: 325px; margin: 0; padding: 18px 0 0 0; background: url('/public/images/env_top2.png') no-repeat top left; }
#bodyColumns .right p { margin: 0px 0 12px 0; padding: 0 8px 0 32px; }
#bodyColumns .right ul { list-style: disc inside; margin: 0 0 0 32px; line-height: 18px; }
#bodyColumns .right a { color: #f45d23; font-size: 12px; font-weight: normal; text-decoration: none; }
#bodyColumns .right a:hover { color: #f45d23; font-size: 12px; font-weight: normal; text-decoration: underline; }
/*###########################################
## Bottom ##
###########################################*/
#bodyBottom { width: 699px; height: 100px; margin: 0; padding: 0; color: #946f42; font-size: 11px; font-weight: bold; }
#bodyBottom p { margin: 18px 0 0 0; padding: 0; }
#bodyBottom a { color: #ffffff; font-size: 11px; font-weight: bold; }
#bodyBottom #allFeeds { display: block; width: 500px; height: 16px; border: 1px solid #573d1c; margin: 0; padding: 8px 10px 6px 10px; }
#bodyBottom #allFeeds a { display: block; float: left; height: 16px; margin: 0 20px 0 0; padding: 1px 0 0 18px; color: #ffa029; font-size: 11px; font-weight: bold; line-height: 12px; background: url('/public/images/rss.png') no-repeat top left; text-decoration: none; }
#bodyBottom #allFeeds a:hover { text-decoration: underline; }
#bodyBottom #bottomNav { width: 600px; margin: 0; padding: 0; }
#bodyBottom #footer { width: 699px; margin: 0; padding: 0; }
#bodyBottom #legal { width: 325px; margin: 0; padding: 0; color: #946f42; font-size: 10px; font-weight: normal; font-family: Trebuchet MS; line-height: 20px; }
#bodyBottom #credit { width: 325px; margin: 0; padding: 0; }
#bodyBottom #credit h4 { width: 248px; height: 22px; margin: 18px 0 0 100px; padding: 0; }
#bodyBottom #credit h4 a { background: url('/public/images/flex360.png') no-repeat top left; width: 248px; height: 22px; margin: 0; padding: 0; display: block; text-indent: -99999px; cursor: pointer; }
/*##############################################################################
##############################################################################*/
/*##############################################################################
##############################################################################
## Brands Slider ##
############################################################################*/
.anythingSliderBrands { width: 810px; height: 88px; position: relative; margin: 0; }
.anythingSliderBrands .wrapper { width: 810px; overflow: auto; height: 88px; margin: 0; position: absolute; top: 0; left: 0; }
.anythingSliderBrands .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSliderBrands ul li { display: block; float: left; padding: 0; height: 88px; width: 810px; margin: 0; }
.anythingSliderBrands .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSliderBrands .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }
.anythingSliderBrands .arrow { display: block; height: 30px; width: 70px; background: url('/public/images/brands_more.jpg') no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSliderBrands .forward { background-position: 0 0px; top: 28px; left: 815px; right: 0px; }
/*##############################################################################
##############################################################################*/
/*##############################################################################
##############################################################################
## Promo Image Slider ##
############################################################################*/
.anythingSlider { width: 700px; height: 275px; position: relative; margin: 0; padding: 0; }
.anythingSlider .wrapper { width: 700px; overflow: auto; height: 275px; margin: 0; position: absolute; top: 0; left: 0; }
.anythingSlider .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSlider ul li { display: block; float: left; padding: 0; height: 275px; width: 700px; margin: 0; }
.anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }
#thumbNav { position: relative; top: 282px; text-align: right; color: #78562a; font-size: 12px; font-weight: bold; }
#thumbNav a { display: inline-block; width: 19px; height: 17px; background: #52340f; padding: 3px 0 0 2px; height: 18px; margin: 0 0 0 5px; color: #946f42; font-size: 12px; font-weight: bold; font-family: Trebuchet MS; text-align: center; }
#thumbNav a:hover { text-decoration: underline; }
#thumbNav a.cur { color: #ffffff; background: #724814; }
#sliderNav { margin: 0; padding: 18px 0 0 0; text-align: right; color: #78562a; font-size: 12px; font-weight: bold; }
#sliderNav a { display: inline-block; width: 19px; height: 17px; background: #52340f; padding: 3px 0 0 2px; height: 18px; margin: 0 0 0 5px; color: #946f42; font-size: 12px; font-weight: bold; font-family: Trebuchet MS; text-align: center; }
#sliderNav a:hover { text-decoration: underline; }
#sliderNav a.activeSlide { color: #ffffff; background: #724814; }
/*##############################################################################
##############################################################################*/
/*##############################################################################
##############################################################################
## Navigation ##
############################################################################*/
/* Controls */
#navigation li:hover, #navigation li.over { position: static; /* make menus not sticky in ie7 */ }
#navigation li ul { position: absolute; left: -999em; }
#navigation li:hover ul { left: auto; }
#navigation li:hover ul, #navigation li.sfhover ul { left: auto; }
/* Options */
#navigation { width: 934px; height: 36px; margin: 18px 0 0 0; padding: 0 0 0 70px; background: url('/public/images/front_navigation.jpg') no-repeat top left; }
#navigation h2 { height: 36px; color: #5b1300; font-size: 1em; letter-spacing: -0.025em; margin: 0; padding: 0; }
#navOptions { margin: 0; padding: 8px 0 0 0; list-style: none; }
#navOptions li { display: block; float: left; min-height: 23px; margin: 0 0 0 10px; padding: 0 12px 0 0; background: url('/public/images/navigation_div.jpg') no-repeat top right; }
#navOptions li.first { margin: -1px 0 0 0; font-weight: bold; }
#navOptions li.facebook { margin: 0 0 0 8px; padding: 0 0 0 25px; background: url('/public/images/navigation_fb.jpg') no-repeat top left; }
#navOptions li a { color: #5b1300; font-size: 1.1em; letter-spacing: -0.025em; margin: 0; padding: 0 0 0 0; text-decoration: none; }
#navOptions li a:hover { color: #5b1300; font-size: 1.1em; letter-spacing: -0.025em; margin: 0; padding: 0 0 0 0; text-decoration: underline; }
/* Dropdown */
#navigation .dropdownNav { z-index: 99; position: absolute; width: 236px; margin: -9px 0 0 -24px; padding: 0 0 30px 0; line-height: 14px; background: url('/public/images/navigation_bottom.png') no-repeat bottom left; }
#navigation .dropdownNav li:first-child,
#navigation .dropdownNav li.firstChild { padding: 14px 18px 6px 19px !important; }
#navigation .dropdownNav li { width: 199px; min-height: 22px; margin: 0 0 0 0px; padding: 0px 18px 6px 19px; background: url('/public/images/navigation_bg.png') repeat-y top left; line-height: 12px; }
#navigation .dropdownNav li a { display: block; width: auto; margin: 0; padding: 4px 6px 5px 9px; color: #480100; font-size: 12px; font-weight: normal; font-family: Trebuchet MS; text-decoration: none; }
#navigation .dropdownNav li a:hover { color: #ffffff; background: #5b1300; text-decoration: none; }
#navigation .dropdownNav li a.small { font-size: 10px; font-weight: bold; }
#navigation #productsNav li { position: relative; z-index: 1; }
#navigation #productsNav li a.top:hover { color: #480100; color: #ffffff; background: transparent; }
#navigation #productsNav li .top img { position: absolute; left: 20px; width: 80px; }
#navigation #productsNav li div { padding: 0 0 5px 85px; border-bottom: 1px solid #FFE58E; min-height: 50px; }
#navigation #productsNav li div div { padding: 0; border: 0 none; display: block; position: relative; min-height: 0; z-index: 1;}
#navigation #productsNav li span a { padding: 3px; font-size: 11px; width: auto; }
#navigation #productsNav .subcat { margin: 0; padding: 0; display: none; background: #ffffff; opacity: .9; filter: alpha(opacity=90); }
#navigation #productsNav div div:hover { z-index: 10; }
#navigation #productsNav div div:hover .subcat { display: block; top: 0; left: 100%; }
#navigation #productsNav .subcat li, #navigation #productsNav .subcat li:first-child { display: block; width:auto; min-width: 100%; min-height: 0; margin: 0; padding: 0!important; background: none; }
#navigation #productsNav .subcat span a { display: block; }
#navigation #productsNav .subcat a { padding: 3px 6px 3px 15px; white-space: nowrap; zoom: 1; }
/* Brands Showcase */
#navigation #brandShowcase { z-index: 99; position: absolute; width: 656px; margin: -9px 0 0 -24px; padding: 0 0 30px 0; line-height: 14px; background: url('/public/images/navigation_showcase_bottom.png') no-repeat bottom left; }
#navigation #brandShowcase li:first-child,
#navigation #brandShowcase li.firstChild { padding: 0 18px 0 19px !important; }
#navigation #brandShowcase li { width: 620px; margin: 0 0 0 0; padding: 0 18px 0 19px; background: url('/public/images/navigation_showcase_bg.png') repeat-y top left; }
#navigation #brandShowcase li a { display: block; width: 225px; margin: 0; padding: 0; color: #480100; font-size: 12px; font-weight: normal; font-family: Trebuchet MS; text-decoration: none; }
#navigation #brandShowcase li a:hover { margin: 0; padding: 0; color: #ffffff; font-size: 12px; font-weight: normal; font-family: Trebuchet MS; text-decoration: none; background: #5b1300; }
#navigation #brandShowcase .columns { clear: both; width: 620px; min-height: 150px; margin: 0; padding: 0; }
#navigation #brandShowcase .columns .intro { float: left; width: 150px; min-height: 150px; margin: 0; padding: 10px 0 0 20px; border-top: 10px solid #009ee4; color: #9e9e9e; font-size: 11px; font-weight: normal; line-height: 16px; }
#navigation #brandShowcase .columns .intro p { margin: 0 0 15px 0; padding: 0; }
#navigation #brandShowcase .columns .intro a { display: block; width: 135px; color: #009ee3; font-size: 1.05em; font-weight: normal; text-decoration: none; background: url('/public/images/showcase/browse.jpg') no-repeat top right; }
#navigation #brandShowcase .columns .intro a:hover { color: #480100; font-size: 1.05em; font-weight: normal; text-decoration: none; background: url('/public/images/showcase/browse_hover.jpg') no-repeat top right; }
#navigation #brandShowcase .columns .showcaseBrands { float: left; width: 215px; min-height: 152px; margin: 0; padding: 18px 0 10px 10px; }
#navigation #brandShowcase .columns .showcaseBrands a { color: #6b3815; font-size: 12px; font-weight: normal; line-height: 16px; text-decoration: none; }
#navigation #brandShowcase .columns .showcaseBrands a:hover { color: #6b3815; font-size: 12px; font-weight: normal; line-height: 16px; text-decoration: underline; }
#navigation #brandShowcase .columns .showcaseBrands sup { font-size: xx-small; vertical-align: top; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer { clear: both; display: block; width: 205px; height: 50px; margin: 0; padding: 0; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .logo { float: left; display: block; width: 85px; height: 50px; margin: 0; padding: 0; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .logo img { border: 0; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .logo a { background: none; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .logo a:hover { background: none; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .name { float: left; display: block; width: 120px; height: 35px; margin: 0; padding: 15px 0 0 0; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .name a { background: none; }
#navigation #brandShowcase .columns .showcaseBrands .brandContainer .name a:hover { background: none; }
/*###########################################
## Brand Logo Styles ##
###########################################*/
/*
#navigation #brandShowcase .columns .showcaseBrands .greatdaynaturals { display: block; width: 125px; height: 35px; margin: 0 0 0 0; padding: 15px 0 0 80px; background: url('/public/images/showcase/greatdaynaturals.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .greatdaybreakfast { display: block; width: 125px; height: 35px; margin: 0 0 0 0; padding: 15px 0 0 80px; background: url('/public/images/showcase/greatdaybreakfast.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .farmersmarket { display: block; width: 120px; height: 25px; margin: 0 0 0 0; padding: 5px 0 0 85px; background: url('/public/images/showcase/farmersmarket.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .farmersharvest { display: block; width: 120px; height: 25px; margin: 5px 0 5px 0; padding: 5px 0 0 85px; background: url('/public/images/showcase/farmersharvest.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .oldehearth { display: block; width: 125px; height: 35px; margin: 0 0 0 0; padding: 15px 0 0 80px; background: url('/public/images/showcase/oldehearth.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .ringos { display: block; width: 120px; height: 35px; margin: 0 0 0 0; padding: 10px 0 0 85px; background: url('/public/images/showcase/ringos.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .huevosdecalidad { display: block; width: 125px; height: 35px; margin: 0 0 0 0; padding: 15px 0 0 80px; background: url('/public/images/showcase/huevosdecalidad.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .greatdayfoods { display: block; width: 125px; height: 35px; margin: 0 0 0 0; padding: 15px 0 0 80px; background: url('/public/images/showcase/greatdayfoods.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .pieshoppe { display: block; width: 120px; height: 22px; margin: 0 0 5px 0; padding: 8px 0 0 85px; background: url('/public/images/showcase/pieshoppe.png') no-repeat top left; }
#navigation #brandShowcase .columns .showcaseBrands .greatdayliquideggs { display: block; width: 125px; height: 35px; margin: 0 0 0 0; padding: 15px 0 0 80px; background: url('/public/images/showcase/greatdayliquideggs.png') no-repeat top left; }
*/
/* Brands Facebook */
#navigation #brandConnect { z-index: 99; position: absolute; width: 236px; margin: -9px 0 0 -160px; padding: 0 0 30px 0; line-height: 14px; background: url('/public/images/navigation_bottom.png') no-repeat bottom left; }
#navigation #brandConnect li a { display: block; width: 150px; height: 22px; margin: 0 0 0 9px; padding: 8px 0 0 40px; color: #480100; font-size: 12px; font-weight: normal; font-family: Trebuchet MS; text-decoration: none; background: url('/public/images/icon_facebook.png') no-repeat top left; }
#navigation #brandConnect li a:hover { margin: 0 0 0 9px; padding: 8px 0 0 40px; color: #ffffff; font-size: 12px; font-weight: normal; font-family: Trebuchet MS; text-decoration: none; background: #5b1300 url('/public/images/icon_facebook.png') no-repeat top left; }
/*##############################################################################
##############################################################################*/
/*##############################################################################
##############################################################################
## Liquid 3-column layout structure ##
############################################################################*/
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
z-index: 1;
margin-bottom: -14px; /* snug as a bug in a rug */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
z-index: 1;
}
.mainBody,
.leftBody,
.rightBody {
float:left;
position:relative;
padding:0 0 0 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:visible;
z-index: 1;
}
/* 3 Column settings */
.threecol { /*background:#000;*/ /* right column background colour */ }
.shadowed { background: url('/public/images/front_leftColumn.jpg') repeat-y top left; }
.threecol .colmid { right:24px; /* width of the right column */ }
.threecol .colleft { right:730px; /* width of the middle column */ }
.threecol .mainBody {
width:700px; /* width of center column content (column width minus padding on either side) */
left:100%; /* 100% plus left padding of center column */
/*background:#ffffff;*/ /* center column background colour */
/*height: 500px;*/
padding: 0 0 40px 30px;
}
.threecol .leftBody {
width:250px; /* Width of left column content (column width minus padding on either side) */
left:24px; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
padding: 0 0 40px 0;
}
.threecol .rightBody {
width:24px; /* Width of right column content (column width minus padding on either side) */
left:754px; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/*##############################################################################
##############################################################################*/
/*###########################################
## Universals ##
###########################################*/
.clear { clear: both; }
.stripped { margin: 0; padding: 0; }
ol { list-style-type: decimal; list-style-position: inside; }
ol { list-style-type: lower-alpha; }
em, i { font-style: italic; }
/*###########################################
## Floating Feedback Box ##
###########################################*/
#floating_box { width: 170px; height: 199px; margin: 0; padding: 0; border: 0; top: 450px; right: 0px; position: absolute; z-index: 9999; }
#floating_box .brand { width: 170px; height: 88px; margin: 0; padding: 0; text-align: right; }
#floating_box .brand img { border: 0; }
#floating_box .feedback { width: 97px; height: 111px; margin: 10px 0 0 65px; padding: 4px 0 0 8px; background: url('/public/images/feedbackbox_bg.png') no-repeat top left; }
#floating_box .feedback a { display: block; width: 97px; height: 101px; margin: 0; padding: 0; /*text-indent: -9999px;*/ cursor: pointer; text-decoration: none; }
#floating_box .feedback a:hover { display: block; width: 97px; height: 101px; margin: 0; padding: 0; /*text-indent: -9999px;*/ cursor: pointer; text-decoration: none; }