/* For: http://pennedweb.com By: Eddie Giese Revision: 3 (03/2010) Thanks for taking a gander at the CSS! Hope you find something useful. Cheers! */ /* +----------- GO TERPS -------------+ */ /* Pre-Defined HTML Elements */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background:#252a31 url(images/bg.jpg) left top repeat; color:#8A868A; line-height: 1.5; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-shadow:0 1px 0 #111121; } a { text-decoration:none; border-bottom:2px solid #343c47; color:#fafafa; } a:hover { text-decoration:none; color:#b3bac4; border-color:#1f252e; } a.fade { position:relative;} abbr { cursor:help; border-bottom: 1px dotted #566171; } img { background:rgb(80,82,88); background:rgba(255,255,255,0.15); opacity:0.7; padding: 10px; box-shadow: 0 5px 18px rgba(0,0,0,0.5); -moz-box-shadow: 0 5px 18px rgba(0,0,0,0.5); -webkit-box-shadow: 0 5px 18px rgba(0,0,0,0.5); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } textarea { width:auto; overflow:auto; } /* Typography */ em { font-style:italic; color:#a9a9a9; font-family:Georgia, 'Times New Roman', Times, serif; } h1,h2,h3,h4,h5,h6 { color:#a9a9a9; font-family:Georgia, 'Times New Roman', Times, serif; line-height:1em;} h1 { margin-top:160px; } h2 { font-size:1.2em; font-weight:normal; letter-spacing:-0.5px; padding-bottom: 60px; text-transform:uppercase; text-shadow:0 1px 0 #111121, 0 3px 3px #111111;} h2 em { text-transform:lowercase; color:#555; } h3 { font-size:2em; font-weight:normal; letter-spacing:-1px; } h4 { font-size:1.8em; font-weight:normal; } p { padding-bottom:1.5em;} pre { font-family: 'Droid Sans Mono',Consolas,Monaco,'Andale Mono','Courier New', monospace; font-size:0.9em;} span.amp {font-family:Baskerville, 'Bell MT', 'Goudy Old Style', 'Palatino', 'Book Antiqua', Constantia, serif; font-style:italic;} span.apos, span.quote {font-family:Georgia,'Times New Roman',Times,serif;} h2 span.apos {letter-spacing:1.5px;} sup { vertical-align:super; } strong { font-weight:normal; color:#a9a9a9; } /* Structure & Layout */ /* clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* end clearfix */ div { position:relative; } /* saves from declaring this all the time */ #content { width:100%;} .section { padding:60px 0; border-top: 1px solid #555; border-bottom:1px solid #252525;} .adjacent { margin-top: -0.25em; } .wrapper { width:940px; margin:0 auto; padding:0 10px; } .inner-wrap { width: 700px; float:left;} .last { padding-bottom:0; } #hq { border-top:none; padding-top:0; } #intro { width:540px; float:right; } #eddie { margin:30px 0; } #eddie img { position:absolute; left:0; } #eddie h4 { float:left; margin-left:240px; width:460px; text-indent:-9999px; background: transparent url(images/eddieheader.png) 0 0 no-repeat; height:25px; margin-bottom: 16px; } #eddie p { margin-left: 240px; } #eddieresume { position:absolute; top: 180px; } #steph img { position:absolute; right:0; } #steph h4 { float:right;width :460px; margin-right:240px; text-indent :-9999px; background: transparent url(images/stephheader.png) top right no-repeat; height:29px; margin-bottom: 16px;} #steph p { margin-right:240px; } #stephresume {position:absolute; top: 180px; right:0; } .talents { float:left; width:220px; margin-right:20px; color:#A9A9A9;} .rightlist { margin-right:0;} /* Navigation */ #nav-wrap { width: 220px; position:absolute; right: 0; z-index: 800; } #nav { width: 220px; position: absolute; line-height:1; background:rgb(47, 52, 58); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); top:0; margin-top:-0.5em; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;} #nav.fixed { position:fixed; top:0; margin-top:60px; /* to match #section divs; if changed, must update FixedFloat script */ } #nav li { display:block; } #nav a { display:block; width:200px; text-align:left; float:left; padding:8px 10px; border:none;} #nav a span.aux { font-size:0.75em; font-family: Georgia, 'Times New Roman', Times, serif; color:#555; font-style:italic; float:right; margin-top:4px; } #nav a:hover span.aux { color:#999; } .sep {display:none;} /*this item is for legibility when CSS is disabled */ #nav a.current-nav { background:rgb(69, 72, 78); background: rgba(255,255,255,0.1); } #nav a.current-nav span.aux { color:#999; } /* Special Elements */ .external { padding-right:20px; background: transparent url(images/external.png) right center no-repeat; } #top { background: transparent url(images/light-source.png) center top no-repeat; margin: 0 auto -250px; height: 150px; width: 940px; } #logo-link { margin:0 auto; display:block; height:168px; width:940px; border:none; padding:0; text-indent:-9999px; background:transparent url(images/logo.png) left top no-repeat; } #tagline { background:transparent url(images/tagline.png) center center no-repeat; height:90px; width:940px; text-indent:-9999px; margin:0 auto 50px; padding-top:100px; padding-bottom:0; } #skinny { background:transparent url(images/skinny.png) 0 0 no-repeat; height:100px; width:140px; text-indent:-9999px; float:left; opacity:0.7; } #skinny:hover { background-position: 0 -100px;} #about h2 { background: transparent url(images/who-we-are.png) 0 0 no-repeat; text-indent:-9999px; margin-left:-14px; } #results { background:transparent url(images/results.png) 0 0 no-repeat; height:140px; width:340px; text-indent:-9999px; float:right; margin-left:20px; opacity:0.7; } #services h2 { background: transparent url(images/what-were-good-at.png) 0 0 no-repeat; text-indent:-9999px; margin-left:-21px; } #forged { background: transparent url(images/forged.png) left top no-repeat; height: 190px; width: 340px; text-indent:-9999px; padding-right:20px; float:left; opacity:0.7; } #talents { height:24px; width:700px; background: transparent url(images/talents.png) center top no-repeat; text-indent:-9999px; border-bottom:1px solid #555; border-bottom:1px solid rgba(255,255,255,0.2); margin:16px 0; padding-bottom:0.25em; font-size:24px;} #portfolio h2 { background: transparent url(images/what-weve-done.png) 0 0 no-repeat; text-indent:-9999px; margin-left:-28px; } #everypixel { background: transparent url(images/everypixel.png) right top no-repeat; height: 64px; width: 240px; text-indent:-9999px; float:right; opacity:0.7; } .button-portfolio { display:block; height:27px; width:139px; text-indent:-9999px; background: transparent url(images/button-portfolio.png) left top no-repeat; border:none; margin-bottom:2em;} :hover.button-portfolio {background-position: left bottom; } #contact h2 { background: transparent url(images/get-in-touch.png) 0 0 no-repeat; text-indent:-9999px; margin-left:-25px; } #contact-pre { border-bottom:1px solid #555; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom:30px; padding-bottom:0.25em; font-size:24px; text-indent:-9999px; background: transparent url(images/contact-pre.png) left top no-repeat;} /* Portfolio Grid */ #portfolio-grid li { float:left; margin-left:20px; margin-bottom :20px; } #portfolio-grid li a { border:0 none; } #portfolio-grid li.port-left { margin-left:0; } #portfolio { padding-bottom:40px; /*60px - 20px*/ } /* Contact Area */ dl { } dt { width:280px; margin-right:20px; float:left; color:#a9a9a9; height:48px;} dd { float:left; height:48px; } dd > ul { margin-top:0.5em; } dd > ul li { float:left; margin-right:20px; } dd > ul li a { height:56px; text-indent:-9999px; display:block; border: 0 none; } #ideas { display:inline-block; text-indent:-9999px; height:19px; width:107px; background:transparent url(images/ideas.png) center 1px no-repeat; border:0 none; padding: 0 2px; } #email { display:inline-block; background: transparent url(images/email.png) center bottom no-repeat; height:19px; width:188px; text-indent:-9999px; border:0 none; padding-left:2px; position:relative; top:5px;} #phone { display:inline-block; background: transparent url(images/phone.png) center bottom no-repeat; height:19px; width:115px; text-indent:-9999px; padding: 0 2px; position:relative; top:1px;} #elsewhere { height:100%; } .twitter { background:transparent url(images/twitter.png) left center no-repeat; width: 51px; } .facebook { background:transparent url(images/facebook.png) left center no-repeat; width: 26px; } .linkedin { background:transparent url(images/linkedin.png) left center no-repeat; width: 36px; } /* Footer */ #footer { padding: 25px 0; background-color: #202226;} #footer p { padding-bottom:0; } #copyright { width:380px; padding-right:20px; float:left; } #footer-nav { float:left; width:540px; } #footer-nav li { float:left; padding-left:20px; } /* Portfolio Page */ #work {} #work #logo-link { display:block; height:64px; width:340px; border:none; padding:0; text-indent:-9999px; background:transparent url(images/logo-portfolio.png) left top no-repeat; float:left; margin-right:20px; } #work #tagline { background:transparent url(images/tagline-portfolio.png) right 4px no-repeat; height:60px; width:580px; text-indent:-9999px; float:right; padding-top:0px; padding-bottom: 60px; margin-bottom:0px;} #work .description {width:220px; float:right;} #work .supplemental { /*float:left; */margin-bottom:90px; } #work #binkies .supplemental { margin-bottom:0px; } #work a.load-more { cursor:pointer; display:inline-block; height:27px; width:139px; text-indent:-9999px; background: transparent url(images/button-more.png) left top no-repeat; border:none; margin-left:180px;} #work a:hover.load-more { background-position: left bottom; } #work .learn-more { display:none; width:460px; margin-top:1em;} #work a.jump { display:block; height:27px; width:139px; text-indent:-9999px; background: transparent url(images/button-jump.png) left top no-repeat; border:none;} #work a:hover.jump {background-position: left bottom; } #work a.top { display:block; height:27px; width:139px; text-indent:-9999px; background: transparent url(images/button-top.png) left top no-repeat; border:none; float:left;} #work a:hover.top {background-position: left bottom; } #work img { padding:0; background:0 none; opacity:1; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius:0; } #work .largeimg { padding-bottom:60px; } #work .mediumimg { position:absolute; bottom:0; left:480px; } #work .provided {color:#A9A9A9; margin:1em 0 2em;} #work .provided li {list-style: none inside none; background: transparent url(images/bullet.png) left 6px no-repeat; padding-left:1em;} #work #gooseneck .largeimg { margin-top: -8px; } #work #gooseneck h3 { text-indent:-9999px; background:transparent url(images/gooseneck-h3.png) top left no-repeat; height:28px; } #work #tinytoes h3 { text-indent:-9999px; background:transparent url(images/tinytoes-h3.png) top left no-repeat; height:28px; } #work #teriwilkins h3 { text-indent:-9999px; background:transparent url(images/teriwilkins-h3.png) top left no-repeat; height:28px; } #work #intranet h3 { text-indent:-9999px; background:transparent url(images/intranet-h3.png) top left no-repeat; height:28px; } #work #tinytoes .largeimg, #work #teriwilkins .largeimg, #work #intranet .largeimg, #work #binkies .largeimg, #work #letters .largeimg { margin-top:-15px; } #work #binkies h3 { text-indent:-9999px; background:transparent url(images/binkies-h3.png) top left no-repeat; height:50px; } #work #letters h3 { text-indent:-9999px; background:transparent url(images/letters-h3.png) top left no-repeat; height:50px; } #work #follow-up h3 a { border:none; display:block; height:28px; width:365px; padding:0; margin:0 auto;text-indent :-9999px; background:transparent url(images/followup.png) left top no-repeat;} /* 404 Error Page */ #fourohfour { text-indent:-9999px; background:transparent url(images/404.png) center top no-repeat; height:74px; width: 238px; margin:0 auto; } #fourohfour-instr { width:460px; margin:30px auto 100px;} /* END OF FILE */