body { background: #181818 url(../img/wood.png) left top; font-family: "Calibri", "Lucida Grande", "Helvetica Neue", Arial, sans-serif; } body.blog-page { background: #093a68 url(../img/blue-bground.jpg) center top; } .main-section { clear: both; } .widthwrap { width: 960px; margin-left: auto; margin-right: auto; position: relative; } * { margin: 0; } html, body { height: 100%; } .footerfix { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -14px; } .push { height: 0px; } /* ############### ################## LINKS */ /* base */ a { text-decoration: underline; } a:link { color: #0c75ce; } a:visited { color: #774acd; } a:hover { color: #ff4800; } a:active { color: #ff9900; } a:focus { color: #ff4800; } /* .header */ .header a:link { color: #ff4800; } .header a:visited { color: #ff4800; } .header a:hover { text-decoration: underline; } /* ############### ################## SITENAV */ #sitenav { position: relative; width: 100%; z-index: 40; background: #181818; float: left; display: inline; padding: 10px 0 20px 0; margin: 0; border-top: 1px solid #050505; border-bottom: 1px solid #111; } #sitenav ul { margin: 0 auto; padding: 0; list-style: none; text-align: right; position: relative; } #sitenav li { margin: 0 0 -1px 2px; padding: 0; display: inline; float: right; position: relative; overflow: visible; } /* current page */ /* sitenav */ #sitenav a { display: block; padding: 0 20px; background: transparent; margin: 0; text-align: left; text-decoration: none; line-height: 30px; font-size: 16px; text-shadow: #111b29 1px 1px 1px; } #sitenav a.tab { border: 0; margin-bottom: -4px; margin-top: 2px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .js #sitenav .blog-nav a.tab { padding-right: 30px; background-image: url(../img/nav-blog-arrow.png); background-position: 55px center; background-repeat: no-repeat; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; } #blog-front.js #sitenav .blog-nav a.tab { background-image: url(../img/nav-blog-arrow-atblog.png); } #sitenav a.tab:link, #sitenav a.tab:visited { color: #ccc; } #sitenav a.tab:hover { color: #fff; background: #0f5376 url(../img/blue-bground.jpg) center top; } #sitenav a.tab:active { color: #96cc07; background: #001A26; } #sitenav a.tab:focus { color: #fff; background: #0f5376 url(../img/blue-bground.jpg) center top; } /* sitnav primary links location */ #home #sitenav .home-nav a.tab, #portfolio #sitenav .portfolio-nav a.tab, #blog-front #sitenav .blog-nav a.tab, #about #sitenav .about-nav a.tab { color: #ABFF00; background-color: transparent; } /* sitenav overlay */ .hover-overlay { display: block; position: absolute; top: 32px; left:0; z-index: 0; background: #181818; width: 100%; white-space: nowrap; font-size: 10px; line-height: 20px; color: #fff; padding: 0; width: 100%; margin: 0; text-align: center; font-family: Verdana, Arial, sans-serif; border-bottom: 1px solid #115c82; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; } #hover-overlay { display: none; /* no JS? don't show the note explaining JS functionality */ } /* sitenav menu */ #sitenav .menu { position: absolute; top: 32px; left: 0; background: #F2EEE1; border-style: solid; border-color: #181818; border-top-color: #115c82; border-width: 2px 2px 6px 2px; text-align: left; padding: 0; width: 315px; font-size: 13px; line-height: 1.3em; text-shadow: 1px 1px 1px #fff; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; } #sitenav .menu { display: none; /* CSS hides the menu if they can't run JS because it needs interaction layer to be worthwhile. */ } #sitenav .menu a { font-weight: normal; padding: 5px 20px; position: relative; border-bottom: 1px solid transparent; text-shadow: 1px 1px 1px #fff; font-size: 13px; line-height: 1.3em; border-width: 0 0 1px 0; } #sitenav .menu a:link { color: #0c75ce; } #sitenav .menu a:visited { color: #774acd; } #sitenav .menu a:hover { color: #ff4800; background: #fff; border-bottom: 1px solid #ccc; } #sitenav .menu a:active { color: #ff9900; } #sitenav .menu a:focus { color: #ff4800; } #sitenav dl, #sitenav dt, #sitenav dd { padding: 0; margin: 0; } #sitenav .section { padding: 15px 0; display: block; border: 1px solid #fff; border-bottom: 1px solid #ccc; } #sitenav dt, #sitenav .external strong { font-size: 16px; position: relative; padding-bottom: 5px; } #sitenav dt, #sitenav .external strong, #sitenav .links strong { font-weight: normal; color: #222; } #sitenav dt { padding: 0 20px 10px 20px; } #sitenav a.archive-link { position: absolute; right: 10px; top: -1px; padding: 2px 0px; background: #ccc; font-size: 10px; text-shadow: none; width: 75px; text-align: center; border-bottom: 1px solid #a5a5a5;} #sitenav a.archive-link:hover { background: #fff; } /* sitenav title */ #sitenav h1 { position: absolute; left: 0px; top: -3px; z-index: 10; font-size: 1em; line-height: 1; padding: 0; margin: 0; } #home #sitenav h1 { display: none; } #sitenav h1 a { float: left; display: inline; width: auto; height: 30px; background: url(../img/hl-logo-30.png) 20px center no-repeat; padding: 8px 20px 3px 65px; line-height: 15px; margin: 0; color: #666; font-family: Helvetica Neue, Helvetica, Arial; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #sitenav h1 a span { font-size: 12px; display: inline; float: left; } #sitenav h1 a span em { display: block; text-transform: uppercase; color: #444; font-weight: normal; font-style: normal; font-size: 11px; } #sitenav h1 a:hover { color: #fff; background-color: #0f5376; } #sitenav h1 a:hover span em { color: #ccc; } /* articles */ #sitenav .articles dd a { padding-right: 95px; } #sitenav .articles dd a .date { position: absolute; right: 10px; width: 75px; text-align: center; color: #6C7880; text-transform: none; font-size: 10px;} #sitenav .articles .extended { display: none; } /* external */ #sitenav .external { padding: 10px 0; } #sitenav .external a { padding: 10px 20px 10px 60px; display: block; background-position: 20px center; background-repeat: no-repeat; } #sitenav .external a:hover { background-position: 20px center; background-repeat: no-repeat; background-color: #fff; } #sitenav .external .flickr, #sitenav .external a.flickr:hover { background-image: url(../img/flickr.png); } #sitenav .external .twitter, #sitenav .external a.twitter:hover { background-image: url(../img/twitter.png); } #sitenav .external strong { line-height: 1; } #sitenav .external span { display: block; padding-top: 4px; line-height: 1; } /* links */ #sitenav .links { clear: both; } #sitenav .links a img { width: 14px; height: 14px; float: left; display: inline; padding-right: 10px; clear: left; } #sitenav .links .extended { display: block; padding: 2px 0 0 0; font-size: 11px; padding-left: 24px; } /* ############### ################## PAGE INTRO */ #page-intro { padding: 0; margin: 0; width: 100%; position: relative; background: #093a68 url(../img/blue-bground.jpg) center top; float: left; display: inline; border-top: 1px solid #111; font-size: 14px; text-shadow: #111b29 1px 1px 1px; } body.blog-page #page-intro { display: none; } #page-intro .bground-1 { background: url(../img/blue-wood-divide.jpg) center bottom repeat-x; float: left; display: inline; width: 100%; padding: 0; height: auto; border-top: 1px solid #115C82; color: #acd3de; } #page-intro h1, #page-intro h2, #page-intro h3 { color: #fff; font-family: 'Aller'; } #page-intro a:link, #page-intro a:visited { color: #A5DB10; text-decoration: none; } #page-intro a:hover, #page-intro a:active, #page-intro a:focus { text-decoration: underline;} /* branding */ #branding { float: left; display: inline; padding: 0; overflow: visible; margin: 40px 0 70px 0; height: auto;} #home #branding h1 { width: 320px; float: left; display: inline; margin: 0; } #home #branding h1 span { overflow: hidden; text-indent: -9999px; outline: 0; background: url(../img/hl-logo-full.png) left center no-repeat; height: 97px; width: 100px; display: block; margin: 40px auto 0 auto; } #home #branding .content-introduction { width: 640px; float: right; display: inline; margin: 0; padding: 0; text-align: left; } #home #branding h2 { font-size: 20px; line-height: 32px; text-align: center; font-weight: normal; margin: 0 10px 30px 10px; } #home #branding h3 { font-size:13px; display: block; font-weight: normal; margin-bottom: 30px; text-align: center; line-height: 1; } #home #branding h3 { display: none; } #home #branding .content-introduction ul { margin: 0; padding: 0; clear: both;} #home #branding .content-introduction li { background: url(../img/skill-icons.png) 7px .4em no-repeat; padding: 0 10px 3px 30px; margin: 2px 10px; line-height: 20px; width: 260px; float: left; display: inline;} #home #branding .content-introduction li.semantics { background-position: 7px .4em; } #home #branding .content-introduction li.microformats { background-position: 3px -398px; } #home #branding .content-introduction li.cms { background-position: left -297px; } #home #branding .content-introduction li.mobile { background-position: 3px -498px; } #home #branding .content-introduction li.jquery { background-position: 0 -197px; } #home #branding .content-introduction li.compatibility { background-position: 1px -96px; } #home #branding .content-introduction .amp { font-size: .9em; line-height: 1; } /* ############### ################## PAGE MIDDLE */ #page-middle { width: 100%; color: #444; clear: both; margin: 0; position: relative; text-shadow: #fff 0 0 6px; padding: 40px 0; border-top: 0; } body.blog-page #page-middle { border-top: 1px solid #115C82; padding: 60px 0; } #page-middle h2, #page-middle h3, #page-middle h4, #page-middle h5, #page-middle dt { color: #352b1c; font-weight: bold; font-family: 'Aller'; } /* focus items */ #focus-items { position: relative; height: 350px; clear: both; z-index: 5; } #focus-items #items-list { width: 960px; margin: 0; padding: 0; list-style: none; float: left; display: inline; position: absolute; top: 0; left: 0; z-index: 5; } #items-list .item { padding: 0; margin: 0; float: left; display: inline; position: relative; overflow: hidden; z-index: 5; background: #eadfc1 url(../home-gradients/0.jpg) center top no-repeat; border-left: 1px solid #cab88b; } #items-list .cardClick { position: absolute; top: 0; left: 0; z-index: 1; cursor: pointer; } #items-list .item, #items-list .cardClick { height: 320px; width: 59px; } #items-list .selected .cardClick { display: none; } #items-list #item1 { width: 780px; margin-top: -10px; height: 350px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border: 0; } #items-list #item2 { } #items-list #item3 { } #items-list #item4 { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; } #items-list .item:hover { background: #ccbb87 url(../home-gradients/0.jpg) left top no-repeat; } #items-list .selected, #items-list li.selected:hover { background: #fffdf1 url(../home-gradients/1.jpg) center center no-repeat; border: 0; z-index: 6; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.8);} #items-list .badge { position: absolute; bottom: 6px; left: 6px; margin: 0; padding: 0; width: 48px; height: 48px; overflow: visible; background: url(../badges/badge-shadow.png) center bottom no-repeat; } #items-list .badge img { display: block; position: absolute; left: 0; top: 0; width: 48px; height: 48px; } #items-list .selected .content { display: block; position: absolute; left: 0; top: 0; width: 780px; height: 300px; text-align: center; overflow: hidden; } #items-list .badge span { display: block; position: absolute; left: 54px; bottom: 0; color: #555; width: 600px; height: 20px; line-height: 20px; font-family: Helvetica Neue; font-size: 9px; font-weight: bold; } #items-list .content h4 { position: absolute; width: 520px; left: 130px; top: 190px; font-size: 24px; line-height: 1em; text-align: center; } #items-list .content .graphic { position: absolute; top: 30px; height: 140px; width: 520px; left: 130px; background: url(../badges/blue.png) center center no-repeat; } #items-list #item2 .content .graphic { background-image: url(../badges/yellow.png); } #items-list #item3 .content .graphic { background-image: url(../badges/orange.png); } #items-list #item4 .content .graphic { background-image: url(../badges/green.png); } #items-list .content .cont { position: absolute; width: 520px; left: 130px; top: 230px; font-size: 15px; text-align: center; } #items-list .content p { margin: 0; line-height: 1.6em; } /* focus items individual styles */ #items-list .active_dev .content h4, #items-list .active_dev .content .cont { text-align: left; } #items-list .active_dev .graphic { display: none; } #items-list .active_dev h4 { top: 70px; } #items-list .active_dev .cont { top: 140px; } #items-list .kodak .content h4 { background: url(../focus/kodak_logo.png) 0 0 no-repeat; width: 306px; height: 79px; left: 237px; top: 80px; } #items-list .kodak .cont { top: 190px ;} #items-list .kodak .content ul { display:inline; margin: 0 auto; padding: 0; list-style: none; } #items-list .kodak .content li { margin: 0; padding: 0 5px; display: inline; } #items-list .hopenhagen.selected { background-image: url(../focus/hopenhagen_bground.jpg) !important; } #items-list .hopenhagen h4 { display:none; } #items-list .hopenhagen .cont { text-align: left; width: 400px; left: 60px; top: 180px; } /* focus item reusable logos */ #items-list .logos li { height: 30px; line-height: 30px; font-weight: bold; vertical-align: top; } /* region */ #page-middle div.region { position: relative; z-index: 3; background: #F2EEE1; margin: 0; padding: 0; border-bottom: 1px solid #eee; font-size: 14px; line-height: 1.6em; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.6); } #page-middle div.region .content { padding: 0 40px; } /* ############### ################## PAGE BOTTOM */ #page-bottom { background: rgba(0,0,0,0.6); padding: 10px 0; float: left; display: inline; width: 100%; color: #fff; margin-bottom: 30px;} #page-bottom .widthwrap { } /* client list */ #clientlist { width: 100%; float: left; display: inline; clear: both; margin: 0; padding: 0; position: relative; font-family: 'Helvetica Neue';color: #ccc; } #clientlist h3 { padding: 0; font-size: 24px; line-height: 32px; margin: 0 0 20px 0; font-weight: normal; color: #b1f525; text-shadow: 1px 1px 1px #000; } #clientlist .intro { width: 260px; margin: 0; padding: 20px 20px 0 20px; font-size: 14px; line-height: 18px;background: rgba(0,0,0,0.5); bottom: 0; top: 0; left: 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: absolute; } #clientlist .intro p { padding-bottom: 10px; line-height: 1.6em; } #clientlist .icons { float: left; display: inline; width: 480px; padding: 0; margin: 10px 10px 0 300px; list-style: none; clear: right; text-align: center;} #clientlist .icons li { text-align: center; float: left; margin: 0 10px 10px; padding: 0; height: 50px; line-height: 50px; background-repeat: no-repeat; background-position: center center; width: 138px; border: 1px solid transparent; text-indent: -9999px; overflow: hidden; outline: 0; background-color: transparent;} #clientlist .non-icons { float:right;display:inline;width:138px;padding:0;margin: 10px 10px 0 0;clear:none;text-align: left; line-height:; 1.6em; color: #fff;} #clientlist .non-icons h4 { border-bottom: 1px solid #fff; line-height: 1; padding: 0 0 .5em; margin: 0 0 .5em 0;} #clientlist .non-icons ul {list-style: none; margin: 0; padding: 0; color: #ccc;} #clientlist .non-icons li {padding: 0 0 1em;} #clientlist .portfolio-entry { display: block; margin: 0; position: absolute; bottom: 20px; left: 20px; right: 20px; } #clientlist .portfolio-entry a { text-decoration: none; display: block; text-align: right; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 1px #000; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #clientlist .icons .quiddities { background-image: url(../img/logos/quiddities.png); } #clientlist .icons .wsd { background-image: url(../img/logos/wsd.png) } #clientlist .icons .ucbas { background-image: url(../img/logos/ucbas.png) } #clientlist .icons .seagate { background-image: url(../img/logos/seagate.png) } #clientlist .icons .awakemedia { background-image: url(../img/logos/awakemedia.png) } #clientlist .icons .macthemes { background-image: url(../img/logos/macthemes.png) } #clientlist .icons .ntc { background-image: url(../img/logos/ntc.png) } #clientlist .icons .unsanity { background-image: url(../img/logos/unsanity.png) } #clientlist .icons .cei { background-image: url(../img/logos/cei.png) } #clientlist .icons .boomboom { background-image: url(../img/logos/boomboom.png) } #clientlist .icons .hrdds { background-image: url(../img/logos/hrdds.png) } #clientlist .icons .scdic { background-image: url(../img/logos/scdic.png) } #clientlist .icons .lhs { background-image: url(../img/logos/lhs.png) } #clientlist .icons .uc-mail { background-image: url(../img/logos/uc-mail.png) } #clientlist .icons .bsad { background-image: url(../img/logos/bsad.png) } #clientlist .icons .toktok { background-image: url(../img/logos/toktok.png) } /* ############### ################## COPYRIGHT */ #copyright { width: 100%; background: #010609; clear: both; color: #444; border-top: 1px solid #000; text-transform: uppercase; } #copyright p { margin: 0; padding: 0 10px 2px 10px; line-height: 11px; height: 11px; text-align: right; font-size: 9px; } /* ############### ################## ABOUT AND CONTACT */ #about .bground-1 { padding-top: 40px; background: none; line-height: 1.6; } #about #bio { float: left; display: inline; width: 420px; padding: 0 10px 80px 10px; } #about #bio h2 { border-bottom: 1px solid #115C82; padding: 0; height: 50px; margin-bottom: 20px; line-height: 50px; font-size: 20px; font-weight: normal;} #about #bio h3 { font-size: 16px; font-weight: normal; } #about #page-intro #biopic { float: left; display: inline; border: 5px solid #115C82; background: #115C82 url(../../about/skydiving.jpg) center top no-repeat; margin: 30px 10px 0 10px; height: 460px; width: 170px; position: relative; } #about #actions { clear: right; float: right; display: inline; width: 300px; padding: 40px 10px 80px 10px; list-style: none; margin: 0; } #about #actions li { margin: 0 0 10px -30px; padding: 20px 20px 20px 110px; background: #181818; position: relative; z-index: 5; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #0c5073;} #about #testimonials { border-top: 5px solid #115C82; clear: both; float: left; display: inline; padding: 60px 0; } #about #testimonials blockquote { width: 300px; padding: 0 10px; float: left; display: inline; clear: none; font-style: normal; position: relative; z-index: 5; } #about #testimonials .quote-punc-first { display: block; margin: 0; padding: 0; position:absolute; left: -10px; top: -.2em; font-size: 5em; z-index: -1; line-height: 1; text-shadow: none; color: #115C82; } #about #testimonials blockquote .attribution { font-style: italic; padding: 0; } #about #testimonials blockquote strong { color: #fff; } #about #recognition-awards { border-top: 5px solid #115C82; clear: both; float: left; display: inline; padding: 60px 0; } #about #recognition-awards dl { width: 380px; padding: 0 10px 60px 90px; float: left; display: inline; } #about #recognition-awards dt { margin: 0; padding: 0; color: #fff; } #about #recognition-awards dd { margin: 0; padding: 0 0 10px 0; min-height: 3em; } #about #copyright { display: none; } /* about vcard */ #about #page-intro .vcard { float: right; display: inline; width: 220px; padding: 0 10px 0 10px; margin: 50px 0 0 0; color: #fff; } #about #page-intro .vcard .type { color: #acd3de; margin-left: -80px; width: 60px; } #about #page-intro .vcard .fn, #about #page-intro .vcard .title { margin-left: -80px; width: 300px; font-weight: normal; padding-bottom: 0; } #about #page-intro .vcard .fn { padding-top: 20px; border-top: 1px solid #115C82; } #about #page-intro .vcard .title { padding-bottom: 20px; border-bottom: 1px solid #115C82; margin-bottom: 10px; color: #acd3de; } /* ################################# ################################# ################################# ################################# */ .displaynone { display: none; } .clear { clear: both; } .indent { text-indent: -9999px; outline: 0; overflow: hidden; } /* awesomepersands */ abbr.amp { font-family: Baskerville, Palatino, Constantia, "Book Antiqua", "URW Palladio L", serif; border: 0; text-decoration: none; font-style: italic; font-weight: normal; }