@charset "utf-8"; /* Theme Name: HWD Theme URI: http://www.hodgeman.co.nz/ Description: A WordPress theme designed for and used by Hodgeman Web and Design. Author: Adrian Hodge Author URI: http://www.adrianhodge.com/ Version: 2.0 */ /* reset */ html{overflow-y:scroll} html,body,address,blockquote,div,dl,form,h1,h2,h3,h4,h5,h6,ol,p,pre,ul,dd,dt,li,table,tbody,td,tfoot,th,thead,tr,button,del,ins,map,object,a,abbr,acronym,big,cite,code,dfn,em,img,q,small,span,strong,sub,sup,legend,fieldset,label,input,textarea,select{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} img,fieldset{border:0} ol, ul{list-style:none} a{outline:none} textarea{overflow:auto} body, select, input, textarea {font: 62.5%/1.5 Verdana, Arial, 'Helvetica Neue', Helvetica, sans-serif} body{background:#111 url(images/bg_footer.jpg) 50% top;color:#777;font-size:12px;lineheight:20px} a, a:visited{text-decoration:none;color:#fa811f} h3{font-size:1.4em;margin-bottom:5px;font-weight:normal} h3 a, h3 a:visited{color:#777} #header, #masthead, #content, #footer, .navigation{float:left;width:100%;position:relative} ol,ul,p,blockquote,iframe,h1,h2,.tagcloud, .navigation, #social-share{margin-bottom:20px} .container{width:90%;max-width:940px;margin:0 auto;position:relative} .container:after, .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} #header a#logo, #prevBtn a, #nextBtn a{background-image:url(images/hwd_sprite.png);display:block;background-repeat:no-repeat;cursor:pointer} #header{height:200px;background:url(images/bg_header.jpg) center top} #header .shadow{background:url(images/bg_header.png) center top no-repeat;height:200px;width:100%} #header .container{height:176px;padding-top:24px} #header a#logo{background-position:0 0;height:163px;width:380px;text-indent:-9999px;display:block} #header ul{position:absolute;right:0;list-style:none;top:160px} #header ul li{float:left;margin-right:10px} #header ul li a{font-family:'News Cycle', Helvetica, Tahoma, Verdana;float:left;padding-left:10px;color:#CCC;font-size:20px;line-height:30px;height:30px} #header ul li a:hover{color:#EEE} #header ul li.current_menu_item a, #header ul li.current_menu_parent a, #header ul li.current_page_item a, #header ul li.current_page_parent a{color:#fa811f} #masthead, #footer{background:url(images/bg_masthead.jpg) center top} #masthead .container{padding:30px 0} #masthead .container, #content #top .container{background-image:url(images/shadow.png);background-position:top center; background-repeat:no-repeat;background-size:100%} #masthead h1{text-shadow:0 2px 2px #000;color:#999} #content{background:#EEE url(images/bg_body.jpg) center top} #top, #bottom{background:url(images/shadows_drop.png) repeat-x;height:20px;width:100%} #top{background-position:top} #bottom{background-position:bottom} #content .container{padding-top:30px} #content #top .container{height:20px;padding-top:0} #gallery{position:relative;width:460px;height:300px;background:url(images/bg_gallery.gif) no-repeat} #slideshow{position:relative;width:95%;height:95%;background:url(images/ajax-loader.gif) 50% 50% no-repeat;margin:2.5%} #slideshow img{position:absolute;top:0;left:0;display:none;width:100%;height:100%} #slideshow a{border:0;display:block} #portfolio{position:relative;width:100%;height:450px;margin-bottom:50px} #portfolio img{position:absolute;top:0;left:0;display:none} .nivo-controlNav{position:absolute;bottom:-25px;text-align:center;width:300px;left:320px} #gallery a.nivo-control{width:11px;height:11px;background:url(images/hwd_sprite.png) -980px -290px no-repeat;display:inline-block;text-indent:-9999px;margin:0 3px} #gallery a.nivo-control:hover{background-position:-980px -305px} #gallery a.active{background-position:-980px -320px} h1{font-size:30px;margin-bottom:0;font-weight:normal} .container h2{font-size:32px;margin-bottom:10px;font-weight:normal;color:#999} #content .container h2{text-shadow:0 1px 1px #FFF} .homepage #intro, .homepage #gallery{width:48.93%;max-width:460px;float:left} .homepage #intro{margin-right:2.1%} .homepage h1{margin-bottom:40px} .blocks ul, .quarters, .thirds, #social, ul.meta{list-style:none;margin-bottom:0} .blocks li, .quarters li, .third, .thirds li, #social li, .half li{float:left;margin:0 2.1% 20px 0} .blocks li.last, .quarters li.last, .third.last, .thirds li.last, .thirds li.column-3, .portfolio li.column-4, .portfolio li.last{margin-right:0} .quarters li{width:220px} .quarters h2 a, .quote h2 a, .twitter h2 a{height:50px;line-height:50px;background-image:url(images/hwd_sprite.png);background-repeat:no-repeat;display:block} .blocks p, .quarters p{margin-bottom:10px} .portfolio h2 a{padding-left:70px;background-position:-1080px -346px} .services h2 a{padding-left:70px;background-position:-1080px -406px} .about h2 a{padding-left:70px;background-position:-1080px -465px} .contact h2 a{padding-left:70px;background-position:-1080px -522px} .quote h2 a{padding-left:70px;background-position:-1080px -290px} .twitter h2 a{padding-left:70px;background-position:-1080px -580px} .third, .thirds li{width:31.91%;max-width:300px;min-width:200px} .third{margin-bottom:0} .thirds li h3, .half li h3{font-size:16px;line-height:18px;margin-bottom:10px} .thirds li h3 a, .half li h3 a{color:#666} .thirds li p, .half li p{margin-bottom:10px;text-align:justify} .thirds li.last{margin-right:0} .half li{width:48.93%;max-width:460px;min-width:273px} .half li.last{margin-right:0} .portfolio li{background-image:url(images/hwd_sprite.png);background-repeat:no-repeat;width:21.25%;max-width:200px;height:130px;padding:10px;background-position:-390px 0;position:relative;overflow:hidden;float:left;margin:0 20px 20px 0} .portfolio li h2{font-size:1.2em;font-weight:bold;font-family:Verdana, Arial, 'Helvetica Neue', Helvetica, sans-serif;margin-bottom:5px} .portfolio li img{width:100%;position:absolute;top:0;left:0;-webkit-transition: top .5s ease-out;-moz-transition: top .5s ease-out;transition: top .5s ease-out;-webkit-box-shadow: 0px 0px 5px #666;-moz-box-shadow: 0px 0px 5px #666;box-shadow: 0px 0px 5px #666} .portfolio li:hover img{top:70px;-webkit-transition: top .3s ease-out;-moz-transition: top .3s ease-out;transition: top .3s ease-out} li h2 a{color:#666} li h2 a:hover{color:#999} hr{background:url(images/hwd_sprite.png) 0 -180px no-repeat;height:2px;width:100%;border:none;margin:0 0 10px;clear:both} #sidebar hr{width:100%} #main hr{width:100%} .alignleft{float:left} .alignright{float:right} img.alignleft, .wp-caption.alignleft{margin:0 20px 10px 0} img.alignright, .wp-caption.alignright, #accordion div img{float:right;margin:0 0 10px 20px} #footer{padding:30px 0 40px} #footer .alignright{text-align:right} #lasttweet{float:left;width:24%;padding-left:70px;background:url(images/hwd_sprite.png) -1020px -190px no-repeat} #social{float:left;width:100%} #social li{margin:0 10px 10px 0} #social li a{background-image:url(images/hwd_sprite.png);background-repeat:no-repeat;width:40px;height:40px;opacity:0.5;text-indent:-9999px;display:block} #social li a:hover{opacity:1} .facebook a{background-position:-610px 0} .twitter a{background-position:-650px 0} .rss a{background-position:-690px 0} .linkedin a{background-position:-730px 0} .gplus a{background-position:-770px 0} .skype a{background-position:-810px 0} ul.meta{overflow:hidden;margin-bottom:10px;font-size:.9em} ul.meta li{float:left;margin-right:10px;background:url(images/hwd_sprite.png) no-repeat;width:auto;padding-left:15px;margin-bottom:0} ul.meta li.date{background-position:-1129px 0;color:#888} ul.meta li.cat{background-position:-1129px -20px} li.cat a{color:#999} li.cat a:hover{color:#fa811f} #main{float:left;width:70%;max-width:660px;font-size:1.1em} #main ol, #main ul{margin-left:20px} #main ol{list-style:decimal} #main ul{list-style:disc} #main li{margin-bottom:10px} #main h1{margin-bottom:20px} #main ul.meta{list-style:none;margin-left:0;font-size:11px} #sidebar{float:left;margin-right:5%;width:25%;max-width:240px} #testimonials-sidebar h2{text-align:right} #subnav{background:url(images/hr.gif) bottom no-repeat;width:100%;padding-bottom:2px} #subnav li{text-align:right;padding:10px 0;background:url(images/hr.gif) top no-repeat;width:100%;position:relative} #subnav li a{display:block;padding:0 10px 0 0;color:#666;font-size:1.2em;line-height:20px;height:20} #subnav li a:hover{color:#999} #subnav li.current_page_item a, #subnav li.current-cat a{color:#fa811f} form{font-size:1.2em} input, textarea, select{font-size:1.2em;padding:5px;border:1px solid #666;background-color:#EEE;color:#333} #accordion h3{cursor:pointer;outline:none} #accordion h3:hover{color:#999} #accordion h3.ui-state-active{color:#fa811f} .fb-like{width:44px;overflow:hidden} .widget{background:url(images/bg_subnav_sep.gif) bottom no-repeat;margin-bottom:10px;padding-bottom:1px} #recent-posts-4 ul, #categories-4 ul{list-style:square;margin-left:20px} .widget li{margin-bottom:5px} #text-7{background:none} .wp-caption img.size-thumbnail{border:1px solid #999;margin-bottom:5px} .wp-caption-text{font-size:10px;font-style:italic;padding-right:10px;text-align:center;margin-bottom:0} a.btn{background:url(images/sprite_buttons.png) no-repeat;height:34px;display:block;text-indent:-9999px} a.next{background-position:0 0;width:139px} a.next:hover{background-position:0 -50px} a.next:active{background-position:0 -100px} a.prev{background-position:-160px 0;width:162px} a.prev:hover{background-position:-160px -50px} a.prev:active{background-position:-160px -100px} a.test{background-position:-340px 0;width:187px} a.test:hover{background-position:-340px -50px} a.test:active{background-position:-340px -100px} a.port{background-position:0 -150px;width:187px} a.port:hover{background-position:0 -200px} a.port:active{background-position:0 -250px} a.serv{background-position:-210px -150px;width:187px} a.serv:hover{background-position:-210px -200px} a.serv:active{background-position:-210px -250px} a.case{background-position:0 -300px;width:187px} a.case:hover{background-position:0 -350px} a.case:active{background-position:0 -400px} #social-share iframe{margin-bottom:0} ul.half li #social-share{margin:20px 0 0} /* Tablet Layout: 768px */ @media only screen and (min-width: 768px) and (max-width: 991px) {} /* Wide Mobile Layout: 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #header a#logo{height:129px;width:300px;margin-bottom:10px;background:url(images/480_logo.png) no-repeat;background-size:100%} #header ul{position:static} #header ul li a{font-size:14px} h1{font-size:22px} #masthead .container{padding:20px 0} #content .container{padding-top:15px} .homepage #intro, .homepage #gallery, .portfolio li, .quarters li{width:100%;margin-right:0} } /* Mobile Layout: 320px */ @media only screen and (max-width: 479px) { #header a#logo{height:120px;width:100%;margin-bottom:10px;background:url(images/480_logo.png) no-repeat;background-size:100%} #header ul{position:static} #header ul li{margin:0 5px 0 0} #header ul li a{font-size:12px;padding-left:5px} h1{font-size:20px} #masthead .container{padding:10px 0 15px} #content .container{padding-top:0} .homepage #intro, .homepage #gallery, .portfolio li, .quarters li{width:100%;margin-right:0} .third, .thirds li, .half li{width:100%;max-width:100%} #sidebar{width:100%;max-width:100%;margin-right:0} #main{width:100%} }