/* THEME NAME: DVQ v.7.0 THEME URI: http://www.dvq.co.nz/ DESCRIPTION: DVQ WordPress Theme VERSION: 7.0 AUTHOR: Matt Skiles @ DVQ AUTHOR URI: http://www.dvq.co.nz/ */ @import url(assets/css/reset.css); /* RESET CSS */ @import url(assets/css/font-face.css); /* RESET CSS */ /* BASE ---------------------------- */ body { background: rgb(237,237,237) url(assets/img/ui/bg.gif) repeat 50% 0; color: rgb(57,57,57); color: rgba(57,57,57,0.8); text-shadow: 1px 1px 0 #FFFFFF; font: 80%/1.5em Arial, sans-serif; } /* FONTs ---------------------------- */ p { margin: 0 0 1.5em 0; } strong { } em, i { } h2 { font: 220% "Myriad Pro", Arial, sans-serif; font-weight: bold; color: rgb(62,62,62); } h3 { font: 150% "Myriad Pro", Arial, sans-serif; font-weight: bold; color: rgb(97,97,97); color: rgba(57,57,57,0.8); margin: 0 0 0.5em 0; } h4 { } h5 { } h6 { } blockquote { font-style: normal; } blockquote p { border-left: 3px solid rgb(203,203,203); padding: 0.5em 0 0.5em 1.5em; margin: 0 0 1.5em 1.5em; } pre { white-space: pre; padding: 35px 9px 9px 9px; border: 1px dotted rgb(204,204,204); background: rgb(256,256,256) url(assets/img/ui/code-bg.gif) no-repeat 9px 9px; background: rgba(256,256,256,0.8) url(assets/img/ui/code-bg.gif) no-repeat 9px 9px; overflow: auto; margin: 1.5em 0; width: 441px; } code { font: 1.1em "Andale Mono", "Lucida Console", Monospace; line-height: 1.5em; } /* LINKS ------------------------------------------------------------------ */ a, a:visited { outline: none; color: rgb(55,102,152); text-decoration: none; border-bottom: 2px solid rgb(215,215,215); border-bottom: 2px solid rgba(0,0,0,0.1); } a:hover { color: rgb(223,145,20); text-decoration: none; border-bottom: 2px solid rgb(215,215,215); border-bottom: 2px solid rgba(0,0,0,0.05); } a:active, a:focus { color: rgb(146,178,0); border: none; } a { -moz-transition-duration: .33s; -moz-transition-property: color; -webkit-transition-duration: .33s; -webkit-transition-property: color; -o-transition-duration: .33s; -o-transition-property: color; } /* IMGs / VIDEOs ---------------------------- */ img { padding: 5px; border: 1px dotted rgb(204,204,204); background: rgb(256,256,256); background: rgba(256,256,256,0.8); vertical-align: bottom; } .alignleft { float: left; margin: 0 10px 10px 0; } .alignright { float: right; margin: 0 0 10px 10px; } .aligncenter { margin: 10px auto; display: block; } object { margin: 1em auto; display: block; } /* LISTs ---------------------------- */ ul, ol { margin-bottom: 1.5em; list-style: none; } ul li { background: url(assets/img/ui/bullet-arrow.png) 0.5em 0.5em no-repeat; padding-left: 1.7em; margin-bottom: 0.2em; } ol li { list-style-type: decimal; list-style-position: inside; margin-bottom: 0.2em; } ul li ul, ol li ol { margin: 0.2em 0 0 0; } ol li ol li { margin-left: 1.7em; } /* - CONTENT START ----------------------------------------------------------------------------------------------------- */ /* CONTAINERs ---------------------------- */ #bg-repeat { width: 100%; background: url(assets/img/ui/bg-repeat.gif) repeat 50% 0; } #bg-top-repeat { width: 100%; background: url(assets/img/ui/bg-top-repeat.gif) repeat-x 50% 0; } #bg-center-repeat { width: 100%; background: url(assets/img/ui/bg-center-repeat.gif) no-repeat 50% 0; } .container { width: 941px; margin: 0 auto; padding: 0 0 0 1px; } /* HEADER ---------------------------- */ #branding { width: 941px; height: 143px; margin: 0 auto 35px auto; padding: 10px 0 0 0; } #logo { width: 363px; height: 79px; margin: 30px 0 0 -6px; background: url(assets/img/ui/logo.jpg) no-repeat 0 0; text-indent: -9999px; display: block; border: none; float: left; } /* TOP NAV ---------------------------- */ #top-nav { float: right; margin: 30px 0 0 0; } #top-nav ul li { float: left; background: none; padding: 0; margin: 0 0 0 50px; } #top-nav ul li a { display: block; height: 73px; text-indent: -9999px; border: none; } #top-nav ul li a:hover { } #top-nav-home a { background: url(assets/img/ui/top-nav.gif) no-repeat 0 0; width: 22px; } #top-nav-home a:hover { background-position: 0px -73px; } #top-nav-portfolio a { background: url(assets/img/ui/top-nav.gif) no-repeat -72px 0; width: 93px; } #top-nav-portfolio a:hover { background-position: -72px -73px; } #top-nav-blog a { background: url(assets/img/ui/top-nav.gif) no-repeat -215px 0; width: 51px; } #top-nav-blog a:hover { background-position: -215px -73px; } #top-nav-contact a { background: url(assets/img/ui/top-nav.gif) no-repeat -315px 0; width: 84px; } #top-nav-contact a:hover { background-position: -315px -73px; } /* TAGLINE ---------------------------- */ h2#tagline { font: 270%/1.3em FertigoProRegular, Georgia, Arial, sans-serif; color: rgb(138,138,138); text-shadow: 1px 1px 0 rgb(256,256,256); text-align: center; display: block; margin: 0 0 35px 0; } /* CONTENT ---------------------------- */ #main-content { width: 600px; float: left; } /* HOME PAGE ---------------------------- */ #home-left-column { width: 421px; float: left; } #home-left-column a img { float: left; padding: 5px; border: 1px dotted rgb(204,204,204); background: rgb(256,256,256); background: rgba(256,256,256,0.8); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } #home-left-column a:hover img { border: 1px solid rgb(256,256,256); -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; -moz-transform: scale(1.07); -webkit-transform: scale(1.057); -o-transform: scale(1.07); } #featured-portfolio-item { } .portfolio-thumb { margin: 29px 29px 0 0; } .portfolio-thumb-last { margin: 29px 0 0 0; } #home-right-column { width: 481px; float: right; margin: 29px 0 0 0; } a#portfolio-button { width: 122px; height: 32px; background: url(assets/img/ui/portfolio-button.gif) no-repeat 0 0; float: right; display: block; text-indent: -9999px; border: none; } a#portfolio-button:hover { background-position: bottom left; } /* PORTFOLIO PAGE ---------------------------- */ .portfolio-left-column { width: 281px; float: left; display: inline; margin: 20px 39px 0 0; } .portfolio-item { width: 241px; float: left; display: inline; margin-bottom: 39px; padding: 19px; text-shadow: 1px 1px 0 #ebebeb; background: rgb(222,222,222); background: rgba(0,0,0,0.1); border: 1px dotted rgb(168,168,168); border: 1px dotted rgba(0,0,0,0.2); } .portfolio-item a img { float: left; border: none; background: none; padding: 0; margin-bottom: 9px; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } .portfolio-item a:hover img { -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; -moz-transform: scale(1.07); -webkit-transform: scale(1.057); -o-transform: scale(1.07); } .portfolio-item-title { float: left; } .portfolio-item-date { float: right; } .portfolio-item-last { margin-bottom: 0; } .portfolio-center-column { width: 301px; float: left; } .testimonial { width: 261px; margin-bottom: 39px; padding: 19px; text-shadow: 1px 1px 0 #ebebeb; background: rgb(222,222,222); background: rgba(0,0,0,0.1); border: 1px dotted rgb(168,168,168); border: 1px dotted rgba(0,0,0,0.2); -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px; } .testimonial-content { color: rgb(72,72,72); font-style: italic; } .testimonial span { font-size: 120%; font-weight: bold; color: rgb(100,100,100); padding: 0 5px; } .testimonial-author { margin: 0; } .portfolio-right-column { width: 281px; float: right; margin: 20px 0 0 0; } /* CONTACT PAGE ---------------------------- */ #contact-form { width: 100%; float: left; } .form-box { width: 100%; margin-bottom: 29px; } .form-box label { float: left; width: 98px; font-weight: bold; margin: 3px 0 0 0; } .form-box input { float: left; display: block; padding: 4px 8px; width: 345px; text-shadow: none; font: 100% Arial, sans-serif; color: rgb(57,57,57); color: rgba(57,57,57,0.8); background: rgb(250,250,248); background: rgba(256,256,256,0.6); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.2); outline: none; } .form-box textarea { float: left; display: block; padding: 4px 8px; width: 345px; text-shadow: none; font: 100% Arial, sans-serif; color: rgb(57,57,57); color: rgba(57,57,57,0.8); background: rgb(256,256,256); background: rgba(256,256,256,0.6); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.2); outline: none; } .form-box input:focus, .form-box textarea:focus { background: rgb(256,256,256); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.4); } #input-wrapper { float: right; } #input-wrapper input { float: right; cursor: pointer; background: rgb(119,119,119); padding: 5px 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; font: 100% Arial, sans-serif; color: rgb(226,226,226); color: rgba(256,256,256,0.9); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } #input-wrapper input:hover { color: rgb(256,256,256); background: rgb(91,91,91); -moz-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -moz-transform: scale(1.02); -webkit-transform: scale(1.02); -o-transform: scale(1.02); } /* 404 PAGE ---------------------------- */ .four0four-image { background: none; padding: 0 0 0 20px; border: none; display: block; margin: 0 auto; } /* BLOG ---------------------------- */ /* BLOG MAIN---------------------------- */ #page-main { width: 461px; float: left; position: relative; margin: 0 39px 0 0; padding: 17px 0 0 0; } /* BLOG SUB---------------------------- */ #blog-center-column { width: 221px; float: left; } #blog-sub { width: 181px; padding: 19px; float: left; background: rgb(256,256,256); background: rgba(256,256,256,0.4); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.2); -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px; } #blog-sub p { width: 100%; padding-bottom: 19px; border-bottom: 1px dotted rgb(197,197,197); border-bottom: 1px dotted rgba(0,0,0,0.2); } #blog-sub p a { font-weight: bold; } #blog-sub p.web-bit-last { padding: 0; margin: 0; border: none; } #more-tasty-web-bits a { float: right; } /* BLOG SIDEBAR---------------------------- */ #sidebar { width: 181px; float: right; margin: 20px 0 0 0; } /* RSS ICON ---------------------------- */ a#rss-icon { width: 16px; height: 16px; background: url(assets/img/ui/rss-icon.gif) no-repeat 0 0; float: right; margin: 2px 11px 0 0; border: none; display: block; text-indent: -9999px; } a#twitter-icon { width: 16px; height: 16px; background: url(assets/img/ui/twitter-icon.gif) no-repeat 0 0; float: right; margin: 2px -2px 0 0; border: none; display: block; text-indent: -9999px; } /* SEARCH FORM ---------------------------- */ #search-form-wrapper { width: 221px; float: left; margin: 29px 0 0 0; padding-top: 29px; border-top: 1px dotted rgb(197,197,197); border-top: 1px dotted rgba(0,0,0,0.2); } #search-form { float: left; display: block; padding: 4px 8px 4px 24px; width: 107px; text-shadow: none; font: 100% Arial, sans-serif; color: rgb(57,57,57); color: rgba(57,57,57,0.8); background: rgb(250,250,248) url(assets/img/ui/search-icon.gif) no-repeat 5% 50%; background: rgba(256,256,256,0.6) url(assets/img/ui/search-icon.gif) no-repeat 5% 50%; border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.2); outline: none; -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 5px; } #search-submit { float: right; cursor: pointer; background: rgb(119,119,119); padding: 4px 7px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; font: 100% Arial, sans-serif; color: rgb(226,226,226); color: rgba(256,256,256,0.9); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } #search-submit:hover { color: rgb(256,256,256); background: rgb(91,91,91); -moz-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -moz-transform: scale(1.02); -webkit-transform: scale(1.02); -o-transform: scale(1.02); } /* SIDEBAR ADs ---------------------------- */ .ad-box { width: 141px; float: left; font-size: 85%; text-shadow: 1px 1px 0 #ebebeb; padding: 19px; margin: 29px 0 0 0; background: rgb(222,222,222); background: rgba(0,0,0,0.1); border: 1px dotted rgb(168,168,168); border: 1px dotted rgba(0,0,0,0.2); } #ad-box-page { margin: 0 } .ad-box a { border: none; } .ad-box a img { padding: 0; float: left; background: rgb(256,256,256); background: rgba(256,256,256,0.4); -moz-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 0px 5px; } .ad-box a:hover img { background: rgb(235,235,235); background: rgba(256,256,256,0.7); -moz-box-shadow: rgba(0,0,0,0.5) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 5px; } .ad-box p.ad-description { margin: 5px 0 0 0; float: left; } .ad-box p.ad-description a { color: rgb(57,57,57); color: rgba(57,57,57,0.8); } .ad-box p.ad-description a:hover { color: rgb(0,0,0); color: rgba(0,0,0,0.8); } .ad-box p.ad-description a:active, #fusion-ad-box p.fusion-description a:focus { color: rgb(146,178,0); border: none; } .ad-box-no-margin { margin: 0; } /* POST ---------------------------- */ .post { width: 100%; padding-bottom: 29px; margin-bottom: 29px; border-bottom: 1px dotted rgb(197,197,197); border-bottom: 1px dotted rgba(0,0,0,0.2); } .post h2 a { border: none; color: rgb(57,57,57); } .post h2 a:hover { color: rgb(223,145,20); text-decoration: none; } .post h2 a:active, .post h2 a:focus { color: rgb(146,178,0); border: none; } .post h3 { color: rgb(70,70,70); color: rgba(70,70,70,0.8); font-size: 130%; text-transform: uppercase; } .entry-meta { color: rgb(102,102,102); color: rgba(102,102,102,0.8); margin: 0 0 22px 0; } .entry-content a img { border: 1px dotted rgb(204,204,204); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } .entry-content a:hover img { border: 1px solid rgb(204,204,204); -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; -moz-transform: scale(1.01); -webkit-transform: scale(1.01); -o-transform: scale(1.01); } .last-paragraph { margin-bottom: 0; } .read-more-link a { float: right; background: rgb(104,146,188); margin: -1em 0 0 0; padding: 5px 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; color: rgb(217,227,238); color: rgba(256,256,256,0.9); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } .read-more-link a:hover { color: rgb(256,256,256); background: rgb(118,161,206); -moz-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -moz-transform: scale(1.02); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); } /* POST NAVIGATION ---------------------------- */ #post-navigation { width: 100%; display: block; } #post-navigation a { float: left; background: rgb(119,119,119); padding: 5px 8px; margin: 10px 0 0 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; color: rgb(226,226,226); color: rgba(256,256,256,0.9); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } #post-navigation a:hover { color: rgb(256,256,256); background: rgb(91,91,91); -moz-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -moz-transform: scale(1.02); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); } .nav-older { float: left; } .nav-newer { float: right; } /* COMMENTS ---------------------------- */ #comments { } .comments { margin: 29px 0 0 0; } #comments-list, #trackbacks-list { position: relative; } ol.comment-list { width: 100%; border-bottom: 1px dotted rgb(197,197,197); border-bottom: 1px dotted rgba(0,0,0,0.2); } ol.comment-list li { list-style: none; display: inline; float: left; width: 100%; margin: 0; padding: 19px 0; border-top: 1px dotted rgb(197,197,197); border-top: 1px dotted rgba(0,0,0,0.2); } ol.comment-list li div.comment-left { width: 61px; float: left; padding: 0 0 0 20px; } ol.comment-list li div.comment-right { width: 341px; float: right; padding: 7px 20px 0 0; } ol.comment-list li.comment-author-admin { background: rgb(256,256,256); background: rgba(256,256,256,0.4); } ol.comment-list li.comment { } ol.comment-list li div.comment-author { font-weight: bold; float: left; } ol.comment-list li div.comment-meta { float: right; color: rgb(102,102,102); color: rgba(102,102,102,0.8); } ol.comment-list li div.comment-permalink { float: right; margin-right: 10px; } ol.comment-list li div.comment-content { margin: 9px 0 0 0; width: 100%; float: left; } ol.comment-list li p.comment-last-paragraph { margin: 0; } /* PINGBACKS ---------------------------- */ ol.trackbacks-list { width: 100%; position: relative; border-bottom: 1px dotted rgb(197,197,197); border-bottom: 1px dotted rgba(0,0,0,0.2); } ol.trackbacks-list li { list-style: none; display: inline; float: left; width: 100%; margin: 0; padding: 19px 0; border-top: 1px dotted rgb(197,197,197); border-top: 1px dotted rgba(0,0,0,0.2); } ol.trackbacks-list li div.trackback-label { width: 81px; float: left; padding-left: 20px; font-weight: bold; } ol.trackbacks-list li div.trackback-author, ol.trackbacks-list li div.trackback-date, ol.trackbacks-list li div.trackback-description { float: right; width: 321px; padding-right: 20px; } ol.trackbacks-list li p.trackback-last-paragraph { margin: 0; } ol.trackbacks-list li div.trackback-content-wrapper { margin-bottom: 5px; } ol.trackbacks-list li div.trackback-content-wrapper-last { margin: 0; } /* TOGGLER's ---------------------------- */ #show-comments-link, #show-trackbacks-link { position: absolute; top: 0; right: 0; cursor: pointer; } /* COMMENTS FORM ---------------------------- */ #respond { margin: 29px 0 0 0; } .form-section { width: 100%; margin-bottom: 29px; } .form-section label { float: left; width: 98px; font-weight: bold; margin: 3px 0 0 0; } .form-section input { float: left; display: block; padding: 4px 8px; width: 345px; text-shadow: none; font: 100% Arial, sans-serif; color: rgb(57,57,57); color: rgba(57,57,57,0.8); background: rgb(250,250,248); background: rgba(256,256,256,0.6); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.2); outline: none; } .form-section textarea { float: left; display: block; padding: 4px 8px; width: 345px; text-shadow: none; font: 100% Arial, sans-serif; color: rgb(57,57,57); color: rgba(57,57,57,0.8); background: rgb(256,256,256); background: rgba(256,256,256,0.6); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.2); outline: none; } .form-section input:focus, .form-section textarea:focus { background: rgb(256,256,256); border: 1px dotted rgb(197,197,197); border: 1px dotted rgba(0,0,0,0.4); } #form-submit input { float: right; cursor: pointer; background: rgb(119,119,119); padding: 5px 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; font: 100% Arial, sans-serif; color: rgb(256,256,256); color: rgba(256,256,256,0.9); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } #form-submit input:hover { color: rgb(256,256,256); background: rgb(91,91,91); -moz-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 0px 5px; -moz-transform: scale(1.02); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); } /* FOOTER ---------------------------- */ #footer { width: 100%; display: block; margin: 40px 0 0 0; padding: 29px 0; background: rgb(237,237,237) url(assets/img/ui/bg.gif) repeat 50% 0; border-top: 1px solid rgba(0,0,0,0.05); color: rgb(127,127,127); rgba(127,127,127,0.8); } #footer p { margin-bottom: 0; float: left; } /* BOTTOM NAV ---------------------------- */ #bottom-nav { float: right; } #bottom-nav ul li { float: left; background: none; padding: 0; margin: 0 0 0 29px; } #bottom-nav ul li a { color: rgb(127,127,127); rgba(127,127,127,0.8); border: none; } #bottom-nav ul li a:hover { color: rgb(223,145,20); } #bottom-nav ul li a:active, #bottom-nav ul li a:focus { color: rgb(146,178,0); border: none; } /* COMMON CLASSES ---------------------------- */ .divider { width: 100%; padding-bottom: 29px; border-bottom: 1px dotted rgb(197,197,197); border-bottom: 1px dotted rgba(0,0,0,0.2); } #page-main .a-no-border { border: none; } ul.sidebar-links { margin: 0; } ul.sidebar-links li { background: url(assets/img/ui/bullet-link.png) 0.5em 0.5em no-repeat; padding-left: 28px; margin-bottom: 0.4em; } ul.sidebar-links li.sidebar-links-last { margin-bottom: 0; } /* - CONTENT END ----------------------------------------------------------------------------------------------------- */