/* * Buffalo and Springs 2009 * Edreamz August 2009 * JJohnson / Yperez */ /* * * Admin * (WYSIWYG Content) * */ h1.amtypewriter{color: #703c09; font-weight: normal; font-size: 36px; padding:0; margin:0;} h1{color: #703c09; font-weight: normal; font-size: 22px; padding:0; margin:0; font-family: Arial;} h2{color: #5a6833; font-weight: normal; font-size: 16px; font-weight: bold; font-family: Arial;} #wrapper{width: 960px; margin: 0 auto;} #content{background: #fff url('../images/bg-footer.gif') no-repeat 430px bottom; padding: 15px 20px; width: 848px; margin: 0 auto; position: relative;} a {color: #8cc2ce; font-weight:normal; text-decoration: none;} a:hover {color: #8cc2ce; font-weight:normal; text-decoration: underline;} a.blue{ background: url('../images/blue-arrow.gif') top right no-repeat; padding-right: 10px;} p { padding: 0 5px 10px 0; line-height: 20px;} .nobg{ background-image: none;} /* * * Main Navigation * * */ #nav { margin: 0; padding: 0; height: 43px; list-style: none; display: inline; overflow: hidden; } #nav li { margin: 0; padding: 0; list-style: none; display: inline;} #nav a { float: left; padding: 43px 0 0 0; overflow: hidden; height: 0px !important; height /**/:43px; /* for IE5/Win only */} #nav a:hover { background-position: 0 -43px; } #nav a:active, #nav a.selected { background-position: 0 -43px;} #tabout a{ background-image: url('../images/nav/about.jpg'); width: 115px;} #tstory a{ background-image: url('../images/nav/coffee.jpg'); width: 161px;} #tsustain a{ background-image: url('../images/nav/sustainable.jpg'); width: 178px;} #tcoffees a{ background-image: url('../images/nav/coffees.jpg'); width: 95px;} #tindustries a{ background-image: url('../images/nav/industries.jpg'); width: 172px;} #tresources a{ background-image: url('../images/nav/resources.jpg'); width: 112px;} #tcontact a{ background-image: url('../images/nav/contact.jpg'); width: 127px;} /* * * Secondary Navigation * * */ #subnav ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; } #subnav ul li { margin: 0; padding: 0; list-style: none;} #subnav ul li a{width: 250px; float: left;} #about a{ background-image: url('../images/nav/sub-about.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #about a:hover { background-position: 0 -41px; } #about a:active, #about a.selected { background-position: 0 -41px;} #leafs a{ background-image: url('../images/nav/sub-leafs.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #leafs a:hover { background-position: 0 -35px; } #leafs a:active, #leafs a.selected { background-position: 0 -35px;} #news a{ background-image: url('../images/nav/sub-news.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #news a:hover { background-position: 0 -35px; } #news a:active, #news a.selected { background-position: 0 -35px;} #sdcoffee a{ background-image: url('../images/nav/sub-sdcoffee.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #sdcoffee a:hover { background-position: 0 -50px; } #sdcoffee a:active, #sdcoffee a.selected { background-position: 0 -50px;} #custom a{ background-image: url('../images/nav/sub-cupping-house.jpg'); padding: 47px 0 0 0; overflow: hidden; height: 0px;} #custom a:hover { background-position: 0 -47px; } #custom a:active, #custom a.selected { background-position: 0 -47px;} #story a{ background-image: url('../images/nav/sub-story.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #story a:hover { background-position: 0 -41px; } #story a:active, #story a.selected { background-position: 0 -41px;} #country a{ background-image: url('../images/nav/sub-country.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #country a:hover { background-position: 0 -35px; } #country a:active, #country a.selected { background-position: 0 -35px;} #processing a{ background-image: url('../images/nav/sub-processing.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #processing a:hover { background-position: 0 -35px; } #processing a:active, #processing a.selected { background-position: 0 -35px;} #brewing a{ background-image: url('../images/nav/sub-brewing.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #brewing a:hover { background-position: 0 -35px; } #brewing a:active, #brewing a.selected { background-position: 0 -35px;} #roasting a{ background-image: url('../images/nav/sub-roasting.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #roasting a:hover { background-position: 0 -35px; } #roasting a:active, #roasting a.selected { background-position: 0 -35px;} #experience a{ background-image: url('../images/nav/sub-experience.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #experience a:hover { background-position: 0 -50px; } #experience a:active, #experience a.selected { background-position: 0 -50px;} #efforts a{ background-image: url('../images/nav/sub-sustainable.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #efforts a:hover { background-position: 0 -41px; } #efforts a:active, #efforts a.selected { background-position: 0 -41px;} #rainforest a{ background-image: url('../images/nav/sub-rainforest.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #rainforest a:hover { background-position: 0 -35px; } #rainforest a:active, #rainforest a.selected { background-position: 0 -35px;} #trade a{ background-image: url('../images/nav/sub-trade.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #trade a:hover { background-position: 0 -35px; } #trade a:active, #trade a.selected { background-position: 0 -35px;} #certified a{ background-image: url('../images/nav/sub-certified.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #certified a:hover { background-position: 0 -35px; } #certified a:active, #certified a.selected { background-position: 0 -35px;} #shade a{ background-image: url('../images/nav/sub-shade.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #shade a:hover { background-position: 0 -35px; } #shade a:active, #shade a.selected { background-position: 0 -35px;} #kids a{ background-image: url('../images/nav/sub-kids.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #kids a:hover { background-position: 0 -35px; } #kids a:active, #kids a.selected { background-position: 0 -35px;} #bird a{ background-image: url('../images/nav/sub-bird.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #bird a:hover { background-position: 0 -35px; } #bird a:active, #bird a.selected { background-position: 0 -35px;} #cafe a{ background-image: url('../images/nav/sub-cafe.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #cafe a:hover { background-position: 0 -50px; } #cafe a:active, #cafe a.selected { background-position: 0 -50px;} #coffee a{ background-image: url('../images/nav/sub-coffees.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #coffee a:hover { background-position: 0 -41px; } #coffee a:active, #coffee a.selected { background-position: 0 -41px;} #buffalospring a{ background-image: url('../images/nav/sub-buffalospring.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #buffalospring a:hover { background-position: 0 -35px; } #buffalospring a:active, #buffalospring a.selected { background-position: 0 -35px;} #tradecertified a{ background-image: url('../images/nav/sub-fairtrade.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #tradecertified a:hover { background-position: 0 -35px; } #tradecertified a:active, #tradecertified a.selected { background-position: 0 -35px;} #rainforestcertified a{ background-image: url('../images/nav/sub-rainforest-certified.jpg'); padding: 70px 0 0 0; overflow: hidden; height: 0px;} #rainforestcertified a:hover { background-position: 0 -70px; } #rainforestcertified a:active, #rainforestcertified a.selected { background-position: 0 -70px;} #organic a{ background-image: url('../images/nav/sub-certified-organic.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #organic a:hover { background-position: 0 -35px; } #organic a:active, #organic a.selected { background-position: 0 -35px;} #classic a{ background-image: url('../images/nav/sub-classic.jpg'); padding: 58px 0 0 0; overflow: hidden; height: 0px;} #classic a:hover { background-position: 0 -58px; } #classic a:active, #classic a.selected { background-position: 0 -58px;} #barnies a{ background-image: url('../images/nav/sub-barnies.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #barnies a:hover { background-position: 0 -35px; } #barnies a:active, #barnies a.selected { background-position: 0 -35px;} #puravida a{ background-image: url('../images/nav/sub-puravida.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #puravida a:hover { background-position: 0 -35px; } #puravida a:active, #puravida a.selected { background-position: 0 -35px;} #blend a{ background-image: url('../images/nav/sub-whatsblend.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #blend a:hover { background-position: 0 -50px; } #blend a:active, #blend a.selected { background-position: 0 -50px;} #industries a{ background-image: url('../images/nav/sub-industries.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #industries a:hover { background-position: 0 -41px; } #industries a:active, #industries a.selected { background-position: 0 -41px;} #colleges a{ background-image: url('../images/nav/sub-colleges.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #colleges a:hover { background-position: 0 -35px; } #colleges a:active, #colleges a.selected { background-position: 0 -35px;} #lodging a{ background-image: url('../images/nav/sub-lodging.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #lodging a:hover { background-position: 0 -35px; } #lodging a:active, #lodging a.selected { background-position: 0 -35px;} #food a{ background-image: url('../images/nav/sub-foodservices.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #food a:hover { background-position: 0 -35px; } #food a:active, #food a.selected { background-position: 0 -35px;} #house a{ background-image: url('../images/nav/sub-coffeehouse.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #house a:hover { background-position: 0 -35px; } #house a:active, #house a.selected { background-position: 0 -35px;} #other a{ background-image: url('../images/nav/sub-other.jpg'); padding: 35px 0 0 0; overflow: hidden; height: 0px;} #other a:hover { background-position: 0 -35px; } #other a:active, #other a.selected { background-position: 0 -35px;} #marketing a{ background-image: url('../images/nav/sub-marketing.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #marketing a:hover { background-position: 0 -50px; } #marketing a:active, #marketing a.selected { background-position: 0 -50px;} #resources a{ background-image: url('../images/nav/sub-resources.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #resources a:hover { background-position: 0 -41px; } #resources a:active, #resources a.selected { background-position: 0 -41px;} #videos a{ background-image: url('../images/nav/sub-videos.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #videos a:hover { background-position: 0 -50px; } #videos a:active, #videos a.selected { background-position: 0 -50px;} #contact a{ background-image: url('../images/nav/sub-contact.jpg'); padding: 41px 0 0 0; overflow: hidden; height: 0px;} #contact a:hover { background-position: 0 -41px; } #contact a:active, #contact a.selected { background-position: 0 -41px;} #share a{ background-image: url('../images/nav/sub-share.jpg'); padding: 50px 0 0 0; overflow: hidden; height: 0px;} #share a:hover { background-position: 0 -50px; } #share a:active, #share a.selected { background-position: 0 -50px;} /* * * Tiertiary Navigation * * */ #thirdnav { margin: 0 0 15px 0; padding: 0; height: 46px; list-style: none; background: url('../images/nav/third-navbg.jpg') top left no-repeat; width: 599px; display: inline; overflow: hidden; float: left; } #thirdnav ul{margin: 0; padding: 0;} #thirdnav li { margin: 0; padding: 0; list-style: none; display: inline;} #thirdnav a { float: left; padding: 46px 0 0 0; overflow: hidden; height: 0px !important;} #thirdnav a:hover { background-position: 0 -46px; } #thirdnav a:active, #thirdnav a.selected { background-position: 0 -46px;} #buffalo3rd a{ background-image: url('../images/nav/third-buffalo.jpg'); width: 138px;} #proprietary a{ background-image: url('../images/nav/third-proprietary.jpg'); width: 228px;} #varietals a{ background-image: url('../images/nav/third-varietals.jpg'); width: 78px;} #flavored a{ background-image: url('../images/nav/third-flavored.jpg'); width: 78px;} #decaf a{ background-image: url('../images/nav/third-decaf.jpg'); width: 60px;} #classic3rd a{ background-image: url('../images/nav/third-classic.jpg'); width: 114px;} #benefits a{ background-image: url('../images/nav/third-benefits.jpg'); width: 72px;} #casestudies a{ background-image: url('../images/nav/third-case.jpg'); width: 102px;} /* * * Layout / Formatting * */ body{ font-size: 13px; color: #000; font-family: Arial, Verdana, sans-serif; background: #540000 url('../images/bg-page.jpg') repeat-x left top;} #hd{background: url('../images/bg-hd.jpg') no-repeat left top; height: 186px; position: relative; z-index: 500;} #hd .logo{background: url('../images/web-logo.gif') no-repeat left top; width: 195px; height: 113px; position: absolute; left: 50px; top: 40px;} #hd .logo a{display: block; width: 170px; height: 113px; text-indent: -99999em;} #navbar{position: absolute; left: 0; bottom: -2px;} #hummingbird{position: relative; z-index: 505;} .left{float: left;} .right{float: right;} #content .left{width: 350px; background: url('../images/bg-stitchonwhite.gif') repeat-y right top; padding: 0 31px 0 0; margin: 0 15px 0 0;} #content .right{width: 450px;} #hero{background: url(../images/bg-hero-shadow.gif) no-repeat bottom center; padding-bottom: 10px;} #hero .left{width: 293px;} #hero .right{width: 667px; background: url('../images/bg-hero-right.jpg') no-repeat left top; height: 360px; position: relative;} #content .left.coffeebg{position: relative; padding-bottom: 186px;} #content .left .coffee{position: absolute; bottom: -41px; left: -92px;} /*.panels ul, .panels ul li{margin: 0; padding: 0; list-style:none;} .panels ul{margin-top: 27px;}*/ .panels {padding-top: 27px;} .panelNav{position: absolute; right: 35px; bottom: 30px;} #flickrGallery{ background:url('../images/bg-share-cta.jpg') no-repeat left top; position: relative; z-index: 500; padding-bottom: 25px;} #flickrGallery .left{ width:170px; background: none; padding: 0; margin: 0;} #flickrGallery .left img{ border: 1px solid #475429; margin: 32px 0 0 32px;} #flickrGallery .right{ width:205px; position: relative;} #flickrGallery .thumbs{ margin: 150px 0 0 -10px;} #flickrGallery .thumbs ul{ margin: 0; padding: 0;} #flickrGallery .thumbs ul li{ list-style:none; margin: 0 8px 0 0; padding: 0; display: inline;} #flickrGallery .thumbs ul li img{ border: 1px solid #475429;} #flickrGallery .seemore{ width: 85px; height: 20px; display: block; position: absolute; right: 40px; bottom: 4px; text-indent: -99999em;} .flickr-prev{ position: absolute; left: -25px; bottom: 5px;} .flickr-next{ position: absolute; right: 33px; bottom: 5px;} #wagonpanel{ width: 448px; height: 113px;} .buffwagon{ display: block; background: url('../images/cta/buffalo-wagon.jpg') no-repeat left top; text-indent: -99999em; width: 448px; height: 113px;} /* * * Layout / Secondary Pages * */ .greentitle{ color: #5a6833; font-weight: bold; font-size: 15px;} .bluetitle{ color: #8ec2cb; font-weight: bold; font-size: 12px;} .pagetop{ width: 960px; height: 36px; background: url('../images/page-top.jpg') top left no-repeat;} #content-int{ background: #fff url('../images/bg-footer.gif') no-repeat 430px bottom; padding: 15px 0 37px 0; width: 888px; margin: 0 auto; position: relative;} #content-int .coffeebottom{ width: 363px; height: 156px; position: absolute; bottom: -25px; left: -52px; background: url('../images/bg-coffee.gif') bottom left no-repeat;} #content-int .leftCol{width: 250px; float: left; margin-left: 15px; padding-bottom: 150px;} #content-int .leftCol .cta{ width: 250px; margin: 15px 0;} #content-int .leftCol .cta .text{ width: 250px; text-align: center; font-size: 14px; margin-top: 5px; color:#666666; padding-bottom: 5px;} #content-int .leftCol .ctasubmit{ width: 250px; height: 211px; margin: 15px 0; background: url('../images/cta/submit-story.jpg') top left no-repeat; position: relative;} #content-int .leftCol .ctasubmit .text {color: #fff; font-size: 13px; position: absolute; top: 130px; left: 20px; width: 210px;} #content-int .leftCol .ctasubmit a.submitlink {width: 210px; height: 70px; display: block; position: absolute; top: 35px; left: 20px; } #content-int .leftCol .contactinfo{ width: 210px; height: 215px; margin: 15px 0; background: url('../images/contactinfo-bg.jpg') top left no-repeat; color: #ffffff; padding: 40px 0 0 40px;} #content-int .leftCol .guidelinks { width: 200px; margin: 20px auto 0 auto;} #content-int .leftCol .guidelinks ul {padding-left:0; margin:0; list-style: none;} #content-int .leftCol .guidelinks ul li{ width: 200px; border-bottom: #999999 1px dotted; padding: 7px 0;} #content-int .leftCol .guidelinks ul li a{ color: #340e0b; background: url('../images/brown-arrow.gif') top left no-repeat; padding-left: 15px; font-weight: bold;} #content-int .leftCol .guidelinks ul li a:hover{ color: #8cc2ce; text-decoration: none;} #content-int .leftCol .guidelinks ul li a.selected{ color: #8cc2ce; text-decoration: none;} #content-int .rightCol{ width: 600px; margin-left: 15px; float: left; line-height: 22px;} #content-int .rightCol.rightline{ background: url('../images/right-line.gif') top left repeat-y;} #content-int .rightCol .marginright{ margin-right: 15px;} #content-int .rightCol .textside{ width: 400px; float: left;} #content-int .rightCol .screenside{ width: 180px; float: left; padding-left: 20px; text-align: center;} #content-int .rightCol .screenside img{ margin-bottom: 10px;} #content-int .rightCol .imagepanel{ width: 595px; margin-bottom: 25px;} #content-int .rightCol .pagetitle{ width: 595px; background: url('../images/pagetitle-underline.gif') bottom left no-repeat; padding-bottom: 13px; margin-bottom: 20px;} #content-int .rightCol .pagetitle-blend{ width: 595px; background: none; padding-bottom: 0; margin-bottom: 10px;} #content-int .rightCol .column{ width: 290px; float: left; position: relative;} #content-int .rightCol .column .seeall{ position: absolute; top: 10px; right: 15px;} #content-int .rightCol .column .author{ color: #8ec2cb; font-weight: bold; font-size: 12px;} #content-int .rightCol .column-right{ width: 300px; float: left; position: relative;} #content-int .rightCol .column-right .content{ width: 285px; padding: 0 0 25px 15px;} #content-int .rightCol .column-right .content.photos{ background: url('../images/photos-underline.gif') bottom left no-repeat;} #content-int .rightCol .column-right .content.photos .thumb-row{width: 275px; height: 42px; margin-top: 20px;} #content-int .rightCol .column-right .content.photos .thumb-row .thumbnail{ width: 56px; float: left; margin: 0 4px;} #content-int .rightCol .column-right .content.photos .thumb-row .thumbnail ul li{ margin: 0 2px 0 0;} #content-int .rightCol .column-right .content.photos .thumb-row .button{ width: 8px; float: left;} #content-int .rightCol .column-right .content .author{ color: #8ec2cb; font-weight: bold; font-size: 12px;} #content-int .rightCol .column-right .content .story{ margin: 10px 0 25px 0;} #content-int .rightCol .ctarow { width: 595px; margin-bottom: 10px;} #content-int .rightCol .ctarow .smallcta{ width: 148px; float: left;} #content-int .rightCol .blends{ width: 595px; background: url('../images/pagetitle-underline.gif') top left no-repeat; padding-bottom: 15px; } #content-int .rightCol .blends .blend{width: 295px; float: left; padding-top: 30px; color: #434343;} #content-int .rightCol .blends .blend .image{width: 75px; padding-right: 10px; float: left;} #content-int .rightCol .blends .blend .text{ width: 200px; float: left;} .titlearea{width: 585px; height: 24px; font-size: 16px; font-weight: bold; background: url('../images/title-bg.jpg') top left no-repeat; color: #fff; padding: 2px 0 0 10px;} .titlearea a{font-size: 12px; float: right; color: #fff; margin-right: 10px;} .titlearea a:hover{color: #fff;} .blenddetail{ width: 520px;} .blenddetail .image{ width: 120px; margin-right: 10px; float: left;} .blenddetail .text{ width: 390px; float: left;} .newsrow { margin-top: 10px; padding-bottom:10px; width: 595px; background: url('../images/dotted-line.gif') bottom left no-repeat;} .newsrow .header{ width: 585px; color: #ffffff; font-weight: bold; background: url('../images/news-title-bg.jpg') top left no-repeat; padding: 10px 0 5px 10px; } .newsrow .text{ width: 585px; padding: 10px 5px 10px 10px; background: url('../images/news-bg.jpg') top left no-repeat; min-height: 95px;} .newsrow .text .learn-more{ float: right;} .date{ color: #aac65e; font-weight: bold;} #slideshow{margin-left: 40px;} .industries-row{padding-bottom: 15px;} /*.industry{ width: 160px; height: 160px; float: left; margin-right: 10px; position: relative;}*/ .industry.small{ width: 118px; height: 200px; float: left; margin-right: 2px;} .industry a.benefits{ position: absolute; bottom: 10px; left: 10px;} .industry a.casestudies{ position: absolute; bottom: 10px; left: 85px;} /*.industry.college{ background: url('../images/industry-college.jpg') top left no-repeat;} .industry.lodging{ background: url('../images/industry-lodging.jpg') top left no-repeat;} .industry.food{ background: url('../images/industry-food.jpg') top left no-repeat;} .industry.houses{ background: url('../images/industry-houses.jpg') top left no-repeat;} .industry.other{ background: url('../images/industry-other.jpg') top left no-repeat;} */ .featuredvideo{ width: 416px; height: 261px; background: url('../images/video-bg.jpg') top left no-repeat; padding: 15px 0 0 95px; margin: 0 0 20px 40px;} .videoarea {width: 500px; background: #f7e7b5 url('../images/quiz-top.jpg') top left no-repeat; padding: 35px 0; margin-left: 50px;} .videoarea .videoitem{ border-bottom: #be763c 1px dotted; padding-bottom: 15px; width: 450px; margin: 0 0 20px 25px;} .videoarea .videoitem .image{ width: 140px; float: left; position: relative;} .videoarea .videoitem .image .playbutton{ width: 40px; height: 40px; position: absolute; top: 30px; left: 45px;} .videoarea .videoitem .text{ width: 300px; float: left;} .smCol{width: 250px; float: left; margin-left: 20px;} .sitemap {width: 250px;} .sitemap ul {padding-left:0; margin:0; list-style: none;} .sitemap ul li{ width: 200px; border-bottom: #999999 1px dotted; padding: 7px 0;} .sitemap ul li a{ color: #8cc2ce; background: url('../images/brown-arrow.gif') top left no-repeat; padding-left: 15px; font-weight: bold;} .sitemap ul li a:hover{ color: #8cc2ce; text-decoration: underline;} .screenlinks{margin: 10px 0 0 50px;} /* * * Layout / Quiz * */ .quiz {width: 500px; background: #f7e7b5 url('../images/quiz-top.jpg') top left no-repeat; padding: 35px 0; margin-left: 50px;} .quiz .question{ width: 400px; margin: 15px 0 0 50px; border-bottom: #be763c 1px dotted; padding-bottom: 15px;} .quiz .question .image{ width: 100px; float: left;} .quiz .question .answers{ width: 300px; float: left;} /* * * Graphic Buttons * * */ a.details{ width: 70px; height: 20px; overflow: hidden; background: url('../images/btn-details.gif') top left no-repeat; text-indent: -9999em; display: block;} a.details:hover { background-position: 0 -20px;} a.download{ width: 90px; height: 20px; overflow: hidden; background: url('../images/btn-download.gif') top left no-repeat; text-indent: -9999em; display: block;} a.download:hover { background-position: 0 -20px;} a.visit{ width: 90px; height: 20px; overflow: hidden; background: url('../images/btn-visitlink.gif') top left no-repeat; text-indent: -9999em; display: block;} a.visit:hover { background-position: 0 -20px;} a.back{ width: 165px; height: 20px; overflow: hidden; background: url('../images/btn-back-news.gif') top left no-repeat; text-indent: -9999em; display: block; margin: 25px 0 0 40px;} a.back:hover { background-position: 0 -20px;} a.seeall{ width: 63px; height: 12px; overflow: hidden; background: url('../images/btn-seeall.gif') top left no-repeat; text-indent: -9999em; display: block;} a.seeall:hover { background-position: 0 -12px;} a.backexperience{ width: 205px; height: 20px; overflow: hidden; background: url('../images/btn-back-experience.gif') top left no-repeat; text-indent: -9999em; display: block; margin: 25px 0 0 23px;} a.backexperience:hover { background-position: 0 -20px;} a.benefits{ width: 61px; height: 59px; overflow: hidden; background: url('../images/btn-benefits.gif') top left no-repeat; text-indent: -9999em; display: block;} a.benefits:hover { background-position: 0 -59px;} a.casestudies{ width: 61px; height: 59px; overflow: hidden; background: url('../images/btn-casestudies.gif') top left no-repeat; text-indent: -9999em; display: block;} a.casestudies:hover { background-position: 0 -59px;} a.casestudies2{ width: 100px; height: 20px; overflow: hidden; background: url('../images/btn-casestudies2.gif') top left no-repeat; text-indent: -9999em; display: block; margin-bottom: 5px;} a.casestudies2:hover { background-position: 0 -20px;} a.benefits2{ width: 118px; height: 20px; overflow: hidden; background: url('../images/btn-benefits2.gif') top left no-repeat; text-indent: -9999em; display: block;} a.benefits2:hover { background-position: 0 -20px;} a.backresources{ width: 140px; height: 20px; overflow: hidden; background: url('../images/btn-back-resources.gif') top left no-repeat; text-indent: -9999em; display: block; margin: 25px 0 0 40px;} a.backresources:hover { background-position: 0 -20px;} a.pc{ width: 70px; height: 20px; overflow: hidden; background: url('../images/btn-pc.gif') top left no-repeat; text-indent: -9999em; display: block; float: left;} a.pc:hover { background-position: 0 -20px;} a.mac{ width: 70px; height: 20px; overflow: hidden; background: url('../images/btn-mac.gif') top left no-repeat; text-indent: -9999em; display: block; float: left; margin-left: 8px;} a.mac:hover { background-position: 0 -20px;} a.downloadanchor{ width: 100px; height: 20px; overflow: hidden; background: url('../images/btn-download-anchor.gif') top left no-repeat; text-indent: -9999em; display: block; float: right; margin-right: 2px;} a.downloadanchor:hover { background-position: 0 -20px;} a.linksanchor{ width: 100px; height: 20px; overflow: hidden; background: url('../images/btn-links-anchor.gif') top left no-repeat; text-indent: -9999em; display: block; float: right; margin-right: 2px;} a.linksanchor:hover { background-position: 0 -20px;} /* * * Layout / Form * */ label{color: #FFFFFF;} .form{ padding: 5px 15px 50px 20px; width: 476px; margin:0 auto; background: url('../images/form-bg.jpg') top left no-repeat; color: #FFFFFF;} .form.lg{background: url('../images/form-bg2.jpg') top left no-repeat;} .formRow{ margin-top: 12px;} .formItem { width: 210px; float: left;} .formItem .textfield{ width: 200px;} .formItem .textfield-small{ width: 50px;} .formItem .dropdown{ height: 23px;} .formItemSmall{ width: 40px; float: left;} .formItemSmall .textfield{ width: 30px;} .formItemLong { width: 450px; float: left;} .formItemLong .textfield{ width: 450px;} .formItemLong .textfield2{ width: 200px;} .formItemLong .textfield-small{ width: 50px;} .formItemLong .textarea { width: 450px;} .formItemLong .textarea2 { width: 450px; height: 100px;} .formItemLong .dropdown{ height: 23px;} .city{ width: 210px; float: left;} .city .textfield{ width: 200px;} .state{ width: 60px; float: left;} .state .dropdown{ height: 23px;} .zipcode{ width: 50px; float: left; margin-left:0;} .zipcode .textfield{ width: 50px;} .phone{ width: 210px; float: left;} .phone .textfield{ width: 30px;} .phone .textfield2{ width: 35px;} #spacer { width: 960px; float: left; background: #ffffff; height: 10px; display: block;} /* * * Layout / Footer * */ #ft{width: 888px; margin: 0 auto;} #ft{position: relative;} #ft .snd{position: absolute; right: 32px; top: -23px; z-index: 999;} #ft ul{margin: 0; padding: 0;} #ft ul.secondrow{ width: 350px; margin-left: -37px;} #ft ul li{display: inline; padding-right: 6px; padding-left: 4px; margin-right: 1px;} #ft .top{font-size: 11px; padding: 7px 140px 7px 435px; text-align: right; position: relative; z-index: 99;} #ft .top a{color: #cdc69e;} #ft .top li{background: url('../images/footer-border.gif') top right no-repeat;} #ft .top li.last{border:none;} #ft .bottom{font-size: 10px; background: url('../images/ft-bottom-bg.gif') no-repeat 95px 0; text-align: center; line-height: 16px; padding: 10px 0 0 0;} #ft .bottom a{color: #819748;} #ft .bottom li{border-right: 1px solid #819748;} #ft .bottom li.last{border:none;} div.hulu { position:relative; height:40px; /* black background with a gradient */ background:#000 url(/images/hulu.png) repeat-x 0 -4px; width:320px; } /* play/pause button */ div.hulu a.play, div.hulu a.pause { position:absolute; width: 46px; height: 40px; display:block; text-indent:-9999em; background:url(/images/hulu.png) no-repeat 10px -61px; cursor:pointer; border-right:1px solid #000; } div.hulu a.play:hover { background-position:10px -105px; } /* pause state */ div.hulu a.pause { background-position:11px -148px; } div.hulu a.pause:hover { background-position:11px -192px; } /* the timeline (or "scrubber") */ div.hulu div.track { left:47px; position:absolute; cursor:pointer; width:135px; border-left:1px solid #999; height:40px; } /* the draggable playhead */ div.hulu div.playhead { position:absolute; cursor:pointer; background-color:#fff; opacity:0.3; filter: alpha(opacity=30); width:3px; height:40px; border-right:1px solid #444; } /* buffer- and progress bars. upon runtime the width of these elements grows */ div.hulu div.progress, div.hulu div.buffer { position:absolute; background-color:#fff; filter: alpha(opacity=10); opacity:0.1; width:0px; height:40px; } div.hulu div.buffer { background-color:#fff; opacity:0.1; filter: alpha(opacity=10); } /* time display */ div.hulu div.time { position:absolute; width:100px; left:180px; padding:10px 0 8px 0; text-align:center; border:1px solid #999; border-width:0 1px; font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial; font-size:12px; color:#fff; } /* total duration in time display */ div.hulu div.time strong { font-weight:normal; color:#666; } /* mute / unmute buttons */ div.hulu a.mute, div.hulu a.unmute { position:absolute; left:280px; width:40px; height:40px; text-align:center; padding:8px 0; cursor:pointer; text-indent:-9999em; background:url(/images/hulu.png) no-repeat 5px -323px; } div.hulu a.mute:hover { background-position:5px -367px; } /* unmute state */ div.hulu a.unmute { background-position:5px -235px; } div.hulu a.unmute:hover { background-position:5px -279px; } .videoholder{background: url(../images/video-bg-small.jpg) top left no-repeat; width: 600px; height: 360px; padding: 20px 0;}