/* Theme Name: Peer Pressure Creative Theme URI: http://www.peerpressurecreative.com Description: This WordPress theme created by Peer Pressure Creative is for use by Peer Pressure Creative Only. Author: Peer Pressure Creative Author URI: http://www.peerpressurecreative.com */ /** ALL MIGHTY RESET **/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, strike, sub, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;} * {margin: 0;} :focus {outline: 0;} html {height: 100%; /* FLIP 'DAT SITE!! -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); */} body {background: url(images/bg.png) repeat-x #ffffff; font-family: Helvetica; color: #000000; height: 100%; } ol, ul {list-style: none;} h1 {font-family: Helvetica; font-size: 25px; color: #dddddd;} h2 {font-family: Georgia; font-weight: normal; font-size: 30px; line-height: 36px;} .clear {clear: both;} a {color: #e86f3d; text-decoration: none;} a:hover {text-decoration: none; color: #000000;} abbr:hover {cursor: help;} ::selection {background: #e86f3d;} ::-moz-selection {background: #e86f3d;} /* HEADER --------------------------------------------------------------------------------------------------------------------------------------- */ #screen-reader {position: absolute; left: -99999px; top: -99999px;} #header {background: url(images/header-bg.jpg) no-repeat; width: 960px; height: 209px;} #logo a {background: url(images/sprite.png) 0px -272px no-repeat; width: 178px; height: 180px; display: block; margin: -195px 0 0 5px; text-indent: -99999px;} /* NAVIGATION */ #main-nav {float: right; margin: -194px 110px 0 0;} #main-nav ul li {float: left; margin-right: 20px; position: relative; text-indent: -99999px; display: block;} #main-nav ul li a {position: relative; display: block;} p.site-link {font-size: 13px; margin-top: 20px;} li#home a {background: url(images/nav-sprite.png) 0px -80px no-repeat; width: 80px; height: 70px;} li#about a {background: url(images/nav-sprite.png) -80px -80px no-repeat; width: 80px; height: 70px;} li#work a {background: url(images/nav-sprite.png) -160px -80px no-repeat; width: 100px; height: 70px;} li#blog a {background: url(images/nav-sprite.png) -260px -80px no-repeat; width: 80px; height: 70px;} li#contact a {background: url(images/nav-sprite.png) -340px -80px no-repeat; width: 100px; height: 70px;} li#home a:hover {background: url(images/nav-sprite.png) 0px 0px no-repeat; width: 80px; height: 70px;} li#about a:hover {background: url(images/nav-sprite.png) -80px 0px no-repeat; width: 80px; height: 70px;} li#work a:hover {background: url(images/nav-sprite.png) -160px 0px no-repeat; width: 100px; height: 70px;} li#blog a:hover {background: url(images/nav-sprite.png) -260px 0px no-repeat; width: 80px; height: 70px;} li#contact a:hover {background: url(images/nav-sprite.png) -340px 0px no-repeat; width: 100px; height: 70px;} li#home.here a {background: url(images/nav-sprite.png) 0px 0px no-repeat; width: 80px; height: 70px;} li#about.here a {background: url(images/nav-sprite.png) -80px 0px no-repeat; width: 80px; height: 70px;} li#work.here a {background: url(images/nav-sprite.png) -160px 0px no-repeat; width: 100px; height: 70px;} li#blog.here a {background: url(images/nav-sprite.png) -260px 0px no-repeat; width: 80px; height: 70px;} /* BODY ------------------------------------------------------------------------------------------------------------------------------------------ */ #page-wrap {width: 960px; margin: 0 auto -365px; min-height: 100%; height: auto !important; height: 100%;} #main-column {width: 660px; float: left; margin-top: 45px;} /* CONTACT BOX */ #contact-box {background: url(images/contact-box.png) no-repeat; width: 960px; height: 460px; position: absolute; top: 0; z-index: 100;} #contact-box p {color: #ffffff;} #contact-box a:hover{color: #ffffff;} p.close-copy {font-size: 13px;} p#close a {background: url(images/sprite.png) 0px -473px no-repeat; width: 140px; height: 17px; margin: 360px 0 0 790px; display: block; text-indent: -99999px; position: relative; z-index: 10;} p#close a:hover {background: url(images/sprite.png) 0px -453px no-repeat; width: 140px; height: 17px; margin: 360px 0 0 790px; display: block; text-indent: -99999px; position: relative; z-index: 10;} p.title {font-size: 20px; font-weight: bold; padding-bottom: 10px;} p.email {margin-top: 10px;} h2#h2-contact {margin: 20px 0 0 68px; color: #ffffff;} #my-site {width: 600px; display: inline; float: right; margin: 24px 30px 0 0;} #me {width: 600px; display: inline; float: right; margin: 19px 30px 0 0;} #chat {width: 600px; display: inline; float: right; margin: 19px 30px 0 0;} #contact-map a {background: url(images/map.jpg) 0px 0px no-repeat; width: 279px; height: 300px; float: left; margin: 30px 0 0 30px; display: block; text-indent: -99999px;} #contact-map a:hover{background: url(images/map.jpg) 0px -313px no-repeat; width: 279px; height: 300px; float: left; margin: 30px 0 0 30px; display: block; text-indent: -99999px;} /* HOME PAGE */ ul#home-testes a {text-indent: -99999px;} li#home-uswo a {background: url(images/uswo.jpg) no-repeat; display: block; width: 960px; height: 319px;} li#home-f9b9 a {background: url(images/f9b9.jpg) no-repeat; display: block; width: 960px; height: 319px;} li#home-vs a {background: url(images/valleysocial.jpg) no-repeat; display: block; width: 960px; height: 319px;} li#home-hawley a {background: url(images/hawley.jpg) no-repeat; display: block; width: 960px; height: 319px;} #about-block {background: url(images/home-block-sprite.jpg) 0px 0px no-repeat; width: 300px; height: 250px; margin: 20px 0 0 0; float: left;} #blog-block {background: url(images/home-block-sprite.jpg) -300px 0px no-repeat; width: 300px; height: 250px; margin: 20px 0 0 19px; float: left;} #work-block {background: url(images/home-block-sprite.jpg) -600px 0px no-repeat; width: 300px; height: 250px; margin: 20px 0 0 19px; float: left;} h3.block-headers {text-indent: -99999px;} p.block-copy {margin: 45px 0 0 32px;} p.block-url {margin: 10px 0 0 32px;} /* INSIDE PAGES ----------------------------------------------------------------------------------------------------------------------------------- */ /* ABOUT PAGE */ #about-tag {background: url(images/tag-sprite.png) 0px 0px no-repeat; width: 960px; height: 55px; margin: 20px 0 10px 0; text-indent: -99999px;} #images {width: 320px; height: 740px; float: left; overflow: hidden;} li#tommy {background: url(images/about-sprite.jpg) 0px 0px no-repeat; width: 318px; height: 740px; text-indent: -99999px;} li#door {background: url(images/about-sprite.jpg) 0px -2960px no-repeat; width: 318px; height: 740px; text-indent: -99999px;} li#office {background: url(images/about-sprite.jpg) 0px -740px no-repeat; width: 318px; height: 740px; text-indent: -99999px;} li#desks {background: url(images/about-sprite.jpg) 0px -2220px no-repeat; width: 318px; height: 740px; text-indent: -99999px;} li#desk {background: url(images/about-sprite.jpg) 0px -1480px no-repeat; width: 318px; height: 740px; text-indent: -99999px;} h2#started {background: url(images/about-titles-sprite.png) 0px -60px no-repeat; width: 200px; height: 20px; margin: 10px 0 5px 0; text-indent: -99999px;} h2#web-standards {background: url(images/about-titles-sprite.png) 0px 0px no-repeat; width: 200px; height: 20px; margin: 10px 0 5px 0; text-indent: -99999px;} h2#web-accessibility{background: url(images/about-titles-sprite.png) 0px -20px no-repeat; width: 200px; height: 20px; margin: 10px 0 5px 0; text-indent: -99999px;} h2#what-we-know {background: url(images/about-titles-sprite.png) 0px -40px no-repeat; width: 200px; height: 20px; margin: 10px 0 5px 0; text-indent: -99999px;} #copy {width: 640px; float: right;} #copy p {line-height: 20px;} /* WORK PAGE */ #portfolio-tag {background: url(images/tag-sprite.png) 0px -55px no-repeat; width: 960px; height: 55px; margin: 20px 0 10px 0; text-indent: -99999px;} #portfolio-container{width: 800px; margin: 0 auto;} ul#portfolio li {float: left; height: 300px; padding: 10px;} ul#portfolio li a {text-decoration: none;} ul#portfolio li h3 {padding: 245px 0 5px 5px; color: #000000; font-size: 18px;} div.text {color: #939598; font-size: 12px; text-transform: uppercase; padding-left: 5px;} li#uswo a {background: url(images/portfolio-sprite.jpg) 0px 0px no-repeat; width: 240px; height: 240px; display: block;} li#hawley a {background: url(images/portfolio-sprite.jpg) 0px -240px no-repeat; width: 240px; height: 240px; display: block;} li#vs a {background: url(images/portfolio-sprite.jpg) 0px -480px no-repeat; width: 240px; height: 240px; display: block;} li#f9b9 a {background: url(images/portfolio-sprite.jpg) 0px -720px no-repeat; width: 240px; height: 240px; display: block;} li#chateau a {background: url(images/portfolio-sprite.jpg) 0px -960px no-repeat; width: 240px; height: 240px; display: block;} li#sf a {background: url(images/portfolio-sprite.jpg) 0px -1200px no-repeat; width: 240px; height: 240px; display: block;} li#uswo a:hover {background: url(images/portfolio-sprite.jpg) -240px 0px no-repeat; width: 240px; height: 240px; display: block;} li#hawley a:hover {background: url(images/portfolio-sprite.jpg) -240px -240px no-repeat; width: 240px; height: 240px; display: block;} li#vs a:hover {background: url(images/portfolio-sprite.jpg) -240px -480px no-repeat; width: 240px; height: 240px; display: block;} li#f9b9 a:hover {background: url(images/portfolio-sprite.jpg) -240px -720px no-repeat; width: 240px; height: 240px; display: block;} li#chateau a:hover {background: url(images/portfolio-sprite.jpg) -240px -960px no-repeat; width: 240px; height: 240px; display: block;} li#sf a:hover {background: url(images/portfolio-sprite.jpg) -240px -1200px no-repeat; width: 240px; height: 240px; display: block;} /* INSIDE WORK PAGE */ #breadcrumb {margin: 15px 0 0 10px; float: left; width: 430px;} #advance {margin: 15px 0 0 0; float: right;} a.darklink {color: #000000;} #services-utilized {background: url(images/casestudies-subnav.png) no-repeat; width: 232px; height: 287px; margin: 20px 0 0 10px; padding-top: 6px; float: left;} #services-utilized h3 {padding-bottom: 5px;} #services-utilized ul {padding: 5px 0 0 0; width: 210px; font-size: 12px;} #services-utilized ul li{padding-bottom: 7px;} #project-copy {width: 715px; float: right;} .technology {margin: -303px 48px 0 0; width: 60px; float: right;} li.ps a {background: url(images/technology-icons.jpg) 0px 0px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} li.ai a {background: url(images/technology-icons.jpg) 0px -30px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} li.fl a {background: url(images/technology-icons.jpg) 0px -60px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} li.coda a {background: url(images/technology-icons.jpg) 0px -90px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} li.cake a {background: url(images/technology-icons.jpg) 0px -120px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} li.wp a {background: url(images/technology-icons.jpg) 0px -150px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} li.jQ a {background: url(images/technology-icons.jpg) 0px -180px no-repeat; width: 32px; height: 30px; display: block; text-indent: -99999px;} /* WORK PAGE PICS */ ul#uswo-pics {width: 605px;} ul#uswo-pics li#web {background: url(images/work/uswo-sprite.jpg) 0px 0px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#uswo-pics li#print {background: url(images/work/uswo-sprite.jpg) 0px -340px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#uswo-pics li#email {background: url(images/work/uswo-sprite.jpg) 0px -680px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#hawley-pics {width: 605px;} ul#hawley-pics li#web {background: url(images/work/hawley-sprite.jpg) 0px 0px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#hawley-pics li#print {background: url(images/work/hawley-sprite.jpg) 0px -340px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#hawley-pics li#email {background: url(images/work/hawley-sprite.jpg) 0px -680px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#vs-pics {width: 605px;} ul#vs-pics li#web {background: url(images/work/vs-sprite.jpg) 0px 0px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#vs-pics li#email {background: url(images/work/vs-sprite.jpg) 0px -340px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#ifa-pics {width: 605px;} ul#ifa-pics li#web {background: url(images/work/ifa-sprite.jpg) 0px 0px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#ifa-pics li#email {background: url(images/work/ifa-sprite.jpg) 0px -340px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#bowwow-pics {width: 605px;} ul#bowwow-pics li#web {background: url(images/work/bowwow-sprite.jpg) 0px 0px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#bowwow-pics li#email {background: url(images/work/bowwow-sprite.jpg) 0px -340px no-repeat; width: 605px; height: 340px; text-indent: -99999px;} ul#sf-pics {width: 605px;} ul#sf-pics li#web {background: url(images/work/sf.jpg) no-repeat; width: 605px; height: 340px; text-indent: -99999px;} h3.client {margin-bottom: 15px; font-size: 28px;} h3.client-quote {margin-top: 30px;} p.role {margin-bottom: 10px; text-transform: uppercase;} p.project-info {margin-bottom: 10px; line-height: 20px;} blockquote {border-left: 1px solid #ddd; margin-top: 20px; padding-left: 20px; font-style: italic;} blockquote p {font: normal normal 18px Georgia, "Times New Roman", Times, serif; color: #8D8D8D;} p.testimonial {margin: 5px 0 5px 0; font-size: 14px; font-style: italic; line-height: 18px;} p.signature {margin-bottom: 5px; font-size: 14px; font-style: italic; line-height: 18px; font-weight: bold; float: right; text-align: right;} /* BLOG PAGE */ #blog-pg {width: 910px; margin: 10px 0 0 20px;} #blog-pg p {margin: 10px 0 20px 0; line-height: 22px;} span.bold {font-weight: bold;} h2.blog-titles {margin: 40px 0 20px 0;} /* SITE MAP */ #site-map-wrap {width: 850px; margin: 0 auto; padding: 20px 0 0 0px;} #site-map-wrap ul {width: 150px; display: block; float: left; padding: 0 10px 0 10px;} #site-map-wrap li.cat a {color: #000000; line-height: 30px;} #site-map-wrap li.work a {font-size: 13px;} /* FOOTER ----------------------------------------------------------------------------------------------------------------------------------------- */ .push {height: 375px;} #footer {background: url(images/footer-bg.jpg) no-repeat #ffffff scroll 51% 0; min-height: 365px; height: auto;} #footer-wrap {width: 960px; margin: 0 auto;} #address {background: url(images/sprite.png) 0px 0px no-repeat; width: 244px; height: 96px; margin: 215px 0 0 5px; float: left; text-indent: -99999px;} #twitter a {background: url(images/sprite.png) 0px -92px no-repeat; width: 115px; height: 23px; margin: 0 0 0 3px; float: left; text-indent: -99999px;} #chuck a {background: url(images/sprite.png) 0px -115px no-repeat; width: 130px; height: 158px; margin: -200px 20px 0 0; float: right; text-indent: -99999px;} #copyright {color: #ffffff; margin: 30px 25px 0 0; font-size: 10px; text-align: right;} /* NAVIGATION */ #footer-nav {float: right; margin: -20px 20px 0 0;} #footer-nav ul li {float: left; margin-right: 10px; position: relative; text-indent: -99999px;} #footer-nav ul li a {position: relative; display: block;} li#xhtml a {background: url(images/nav-sprite.png) 0px -181px no-repeat; width: 70px; height: 25px;} li#css a {background: url(images/nav-sprite.png) -70px -181px no-repeat; width: 50px; height: 25px;} li#five-o-eight a {background: url(images/nav-sprite.png) -120px -181px no-repeat; width: 40px; height: 25px;} li#site-map a {background: url(images/nav-sprite.png) -160px -181px no-repeat; width: 110px; height: 25px;} li#xhtml a:hover {background: url(images/nav-sprite.png) 0px -212px no-repeat; width: 70px; height: 25px;} li#css a:hover {background: url(images/nav-sprite.png) -70px -212px no-repeat; width: 50px; height: 25px;} li#five-o-eight a:hover {background: url(images/nav-sprite.png) -120px -212px no-repeat; width: 40px; height: 25px;} li#site-map a:hover {background: url(images/nav-sprite.png) -160px -212px no-repeat; width: 110px; height: 25px;} li#site-map.here a {background: url(images/nav-sprite.png) -160px -212px no-repeat; width: 110px; height: 25px;}