/* CSS Document */ /* Authored by: ------------------------------------------ The Graphic Element May 2009 http://www.thegraphicelement.com License: Copyright (c) 2009, The Graphic Element, All rights reserved. ------------------------------------------ */ /* Imported Styles ------------------------------------------ */ @import url(reset.css); /* Go on just say it... ------------------------------------------ */ @import url(http://www.thegraphicelement.com/css/reset.css); /* Global ------------------------- */ body { color: #333; font-size: 62.5%; background: #cc9; } html, body { height: 100%; } a:link, a:visited, a:active, a:hover { text-decoration: none; } a:focus { outline: none; } body, input, table, td, th, textarea { font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; } h1, h2 { color: #603; font-weight: bold; } h1 { margin-bottom: 1em; font-size: 2.5em; color: #bbb; } h2 { margin-top: 1.5em; font-size: 1.5em; } h3 { margin-top: 1em; font-style: italic; font-weight: bold; } h4 { margin-top: 1em; font-weight: bold; font-size: 1.3em; } #wrapper { position: relative; margin: 0 auto; width: 826px; background: #fff url(../img/wrapper-bg.gif) repeat-y 50% 0; } #content-wrapper { margin-top: 5px; width: 800px; overflow: auto; } #header, #nav, #content-wrapper { margin-left: 13px; } img#smallbiz { position: absolute; bottom: 20px; left: 30px; } /* Header ------------------------- */ #header { position: relative; width: 800px; height: 110px; background: #fff url(../img/header-home.jpg) no-repeat 0 0; border-top: 5px solid #fff; } /* default header image */ #header a#logo { position: relative; top: 3px; left: 16px; display: block; width: 95px; height: 105px; overflow: hidden; } #header a#logo span { display: block; width: 100%; height: 100%; background: transparent url(../img/logo.png) no-repeat 0 0; } #header img { display: block; width: 0; } #header p#info { position: absolute; bottom: 8px; left: 140px; width: 215px; color: #603; font-size: 0.9em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Franklin Gothic", Helvetica, Arial, sans-serif; overflow: hidden; } #header p#info a { color: #603; } #header p#info a:hover { color: #ab7487; } /* displays appropriate header image - uses body id for selection */ body#whatsnew #header { background-image: url(../img/header-whatsnew.jpg); } body#print #header { background-image: url(../img/header-print.jpg); } body#web #header { background-image: url(../img/header-web.jpg); } body#packaging #header { background-image: url(../img/header-packaging.jpg); } body#promotions #header { background-image: url(../img/header-promotions.jpg); } body#process #header { background-image: url(../img/header-process.jpg); } body#team #header { background-image: url(../img/header-team.jpg); } body#promote #header { background-image: url(../img/header-promote.jpg); } body#contact #header { background-image: url(../img/header-contact.jpg); } /* Nav ------------------------- */ #nav { width: 800px; height: 23px; border-top: 2px solid #fff; background-color: #afab6e; } #nav a { display: block; padding: 5px 0; } #nav li { float: left; } #nav li:hover a { color: #603; } #nav li a#n-whatsnew, #nav li a#n-portfolio, #nav li a#n-process, #nav li a#n-team, #nav li a#n-promote, #nav li a#n-contact { padding: 0; height: 23px; text-indent: -999em; background-image: url(../img/nav.png); background-repeat: no-repeat; } /* BUTTONS */ #nav li a#n-whatsnew { background-position: 0 0; width: 132px; } #nav li a#n-portfolio { background-position: -132px 0; width: 100px; } #nav li a#n-process { background-position: -232px 0; width: 168px; } #nav li a#n-team { background-position: -400px 0; width: 132px; } #nav li a#n-promote { background-position: -532px 0; width: 178px; } #nav li a#n-contact { background-position: -710px 0; width: 90px; } /* OVER STATES - use li:hover so item stays selected */ #nav li:hover a#n-whatsnew { background-position: 0 -23px; } #nav li:hover a#n-portfolio { background-position: -132px -23px; } #nav li:hover a#n-process { background-position: -232px -23px; } #nav li:hover a#n-team { background-position: -400px -23px; } #nav li:hover a#n-promote { background-position: -532px -23px; } #nav li:hover a#n-contact { background-position: -710px -23px; } /* 1st drop down */ #nav ul { z-index: 500; float: left; background: #cc9; } #nav li ul { position: absolute; width: 120px; height: auto; } #nav ul li { position: relative; margin-left: 0; width: 120px; font-size: 1.1em; border-top: 1px solid #fff; } #nav li ul a { margin-left: 0; padding: .5em; } #nav li:hover ul a { color: #603; } #nav li ul a:hover, #nav li ul li:hover { color: #eeecd7; background-color: #603; } /* Hide & Reveal */ #nav ul, #nav li:hover ul ul { left: -999em; } #nav li:hover ul, #nav ul li:hover ul { left: auto; } /* Content ------------------------- */ #sidebar { float: left; margin: 0 10px 0 0; width: 130px; } #quote { float: left; position: relative; margin: 10px -200px 0 0; width: 200px; } #content { float: right; min-height: 300px; } body.col3 #content { margin-left: -440px; padding: 10px 10px 0 10px; width: 440px; } body.col2 #content { margin-left: -590px; padding: 10px 30px 0 20px; width: 610px; } body#print.col2 #content, body#web.col2 #content, body#packaging.col2 #content { padding: 10px 30px 0 40px; width: 590px; } body.col2 #quote { display: none; width: 0; } #content p { margin: 0.8em 0 1em; line-height: 1.8em; } #content p, #content li { font-size: 1.2em; } #content li ul li { font-size: 100%; } #content a, #content li a { color: #603; text-decoration: underline; } #content a:hover, #content li a:hover { color: #ab7487; text-decoration: underline; } p.clear, h2.clear, div.clear, ul.clear, .clear { clear: both; } p.center, .center { text-align: center; } p.note { color: #aaa; font-style: italic; } strong { color: #603; } /* lists */ #content ul { margin: 0.8em 0 0 30px; list-style: disc; } #content ul ul { margin-top: 0; list-style: circle; } #content ul li { margin: 0.5em 0; font-size: 1.2em; } #content ul.section { float: left; margin: 0 10px 0 30px; width: 180px; } /* width must be 220px minus left + right margins or less */ img.left, a.left, .left { float: left; margin-right: 10px; } img.right, a.right, .right { float: right; margin-left: 10px; } /* basic form styles */ #content form p { clear: left; margin: 0; padding-top: 1em; line-height: normal; } #content form p.note { padding-top: 0.4em; color: #666; } #content label { float: left; display: inline; width: 180px; } #content label em.note { display: block; margin-top: 0.5em; color: #666; font-size: 0.9em; } #content input, #content textarea { float: left; display: block; width: 300px; } input#submit, input#reset { float: left; margin: 8px 0 15px 10px; display: block; width: auto; } input#submit { margin-left: 180px; } #content fieldset { clear: left; } #content fieldset label { margin: 1em 2em 0 0; width: auto; font-size: 1.2em; } #content fieldset input { float: left; display: block; margin-right: 5px; width: auto; } #content fieldset p { float: left; margin: 0; width: 180px; } /* SIDEBAR */ body#print #sidebar ul, body#web #sidebar ul, body#packaging #sidebar ul, body#whatsnew #sidebar ul { background: #603; } #sidebar h2 { display: block; margin: 0; padding: 10px; width: 110px; color: #fff; font-size: 1.1em; letter-spacing: 1px; text-transform: uppercase; background: #603; } #sidebar #subnav { padding: 0 10px; width: 110px; min-height: 160px; list-style: none; } #sidebar #subnav li { padding: 5px 0; font-size: 1.1em; border-top: 1px solid #eeecd7; } #sidebar #subnav li a { color: #eeecd7; letter-spacing: normal; } #sidebar #subnav li a:hover { color: #fff; } #sidebar .follow-wrapper { margin-top: 10px; text-align: center; } #sidebar .follow-wrapper a { display: block; margin-top: 5px; } /* QUOTE */ #quote h1 { margin-left: 15px; } #quote p { position: relative; z-index: 1; margin: 0 50px 0 15px; color: #603; font-size: 1.8em; line-height: 1.6em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Franklin Gothic", Helvetica, Arial, sans-serif; } #quote img { position: relative; z-index: 0; display: block; } /* HOME */ body#home #content { padding-top: 20px } body#home #content h1 { margin: 0; padding-top: 10px; color: #603; font-size: 1.3em; } body#home #content h2.sub { margin: 0; font-weight: normal; font-size: 1.3em; } #content-container a.sendmestuff { color: #603; font-weight: bold; font-size: 1.3em; text-decoration:none; } form#ccform { margin-top: 2em; width: 160px; } form#ccform h2 { font-size: 1.5em; } form#ccform img { float: right; margin-top: 0.2em; } form#ccform input { margin-top: 5px; display: block; color: #999; } form#ccform input#join { color: #000; } /* WHAT'S NEW */ body#whatsnew #content h2 { margin-left: 170px; } body#whatsnew #content .entry { clear: left; margin-bottom: 4em; } body#whatsnew #content .entry p { margin-left: 170px; } body#whatsnew #content .entry img.logo { margin-left: 170px; float: none; display: block; border: none; } body#whatsnew #content .entry img { margin-top: 1.5em; float: left; border: 1px solid #cc9; } body#whatsnew #content .entry img.noborder { border: none; } body#whatsnew.press #content h2 { margin-left: 0; font-size: 1.3em; } body#whatsnew.press #content h3 { margin-top: .2em; color: #000; font-weight: bold; font-size: 1.6em; } body#whatsnew #content p.updated { color: #999; font-size: 1em; } /* PRINT */ body#print.col2 #content h1 { margin-bottom: 0.5em; } body#print #content ul.th-logos { margin: 0; width: 590px; overflow: auto; list-style: none; } /* centers thumbs on page - adjust margin for placement */ body#print #content ul.th-logos li { float: left; display: inline; margin: 0 17px 0; padding: 0; width: 160px; height: 153px; } body#print #content ul.th-marketing { margin: 0; width: 590px; overflow: auto; list-style: none; } /* centers thumbs on page - adjust margin for placement */ body#print #content ul.th-marketing li { float: left; display: inline; margin: 0 36px 36px; padding: 0 3px 3px 0; width: 72px; height: 72px; background: url(../img/th-shadow.gif) no-repeat 100% 100%; } body#print #content div.center { margin-bottom: 2em; } /* WEB */ body#web.col2 #content h1 { margin-bottom: 0.5em; text-align: center; } body#web.col2 #content .container { margin: 0; list-style: none; } body#web.col2 #content .container li { float: left; display: inline; margin: 0 20px 30px 0; width: 175px; text-align: center; } body#web.col2 #content .container li.clear { clear: left; } body#web.col2 #content .container a { width: 100%; height: 100%; font-size: 0.8em; text-decoration: none; } body#web.col2 #content .container a img { display: block; margin: 0 auto 5px; border: 1px solid #ccc; } /* PACKAGING */ body#packaging #content ul.th-retail { margin: 0; width: 590px; overflow: auto; list-style: none; } /* centers thumbs on page - adjust margin for placement */ body#packaging #content ul.th-retail li { float: left; display: inline; margin: 0 36px 36px; padding: 0 3px 3px 0; width: 72px; height: 72px; background: url(../img/th-shadow.gif) no-repeat 100% 100%; } body#packaging #content ul.th-food { margin: 0; width: 590px; overflow: auto; list-style: none; } /* centers thumbs on page - adjust margin for placement */ body#packaging #content ul.th-food li { float: left; display: inline; margin: 0 17px 10px; width: 160px; height: 105px; } body#packaging.col3.food #quote { margin-top: 40px; width: 250px; text-align: center; } body#packaging.col3.food #quote h2 { margin-bottom: 50px; color: #999; } body#packaging.col3.food #quote img { margin: 0 auto; } body#packaging.col3.food #quote p { margin: 0.5em 0 1.5em; color: #999; font-weight: bold; font-size: 1.2em; line-height: 1.4em; } body#packaging.col3.food #quote p a { color: #999; } body#packaging.col3.food #quote p a:hover { color: #ab7487; } body#packaging.col3.food #content { padding: 20px 10px 0 5px; width: 405px; } body#packaging.col3.food #content img.product { margin-bottom: 10px; } body#packaging #content ul { margin-left: 15px; } body#packaging.retail #content h1 { margin: 20px 0 0.5em; } /* DESIGN PROCESS */ body#process #content img { border: 1px solid #ccc; } body#process #content a.right { text-align: center; text-decoration: none; } body#process #content a.right img { display: block; } /* TEAM */ body#team #content h2, body#team #content h3, body#team #content p { margin-left: 120px; } body#team #content h2 { margin-top: 3em; } body#team #content h3 { margin-top: 0.5em; } body#team #content img { clear: left; float: left; margin: 3.5em 10px 0 0; border: 1px solid #cc9; } body#team #content p.fav-quote { padding: 10px 5px; line-height: normal; text-align: center; background: #eeecd7; border: 1px solid #cc9; -moz-border-radius: 10px; -webkit-border-radius: 10px; } body#team #content p.fav-quote em { display: block; } /* PROMOTE */ body#promote #content { float: none; margin-left: 0; padding: 20px 20px 0; width: 760px; } body#promote #sidebar, body#promote #quote { display: none; width: 0; } body#promote.specials #content, body#promote.quote-request #content { padding: 20px 50px 0 100px; width: 650px; } body#promote.specials #content img { display: block; margin: 0 auto; } body#promote.quote-request #content h2 { clear: left; margin: 3em 165px 0 0; border-bottom: 1px solid #ccc; } body#promote #content #howto div { float: left; margin-right: 10px; padding: 5px 5px 5px 10px; width: 165px; min-height: 110px; background: #eeecd7; border: 1px solid #cc9; -moz-border-radius: 10px; -webkit-border-radius: 10px; } body#promote #content #howto h2 { margin: 5px 0 0.5em; font-size: 1.5em; } body#promote #content #howto p { margin: 0.2em 0 0.5em; font-size: 1em; } body#promote #content #howto #promo-nav { margin-right: 0; background: none; border: none; } body#promote #content #howto #promo-nav ul { margin: 10px; list-style: none; } body#promote #content #howto div strong { color: #000; font-style: italic; } body#promote #content iframe { clear: right; margin-top: 15px; height: 500px; } /* CONTACT */ body#contact #content { padding-top: 0; } body#contact #content a img#cc { position: relative; left: 330px; } /* Footer ------------------------- */ #footer { clear: both; padding: 30px 20px 20px 100px; width: 706px; text-align: center; background: url(../img/wrapper-bg-bm.gif) no-repeat 0 100%; } #footer li { display: inline; color: #afab6e; } #footer li.copyright { display: block; margin-top: 0.6em; color: #603; } #footer a { color: #603; } #footer a:hover { color: #ab7487; }