/* Theme Name: Giles Butler April 2010 Theme URI: www.gilesbutler.co.uk Description: Theme design for GilesButler.co.uk Version: 1.0 Author: Giles Butler Tags: ... Colour Chart: red - #a71c21 */ /* --------->>> 960.GS <<<-------- */ 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,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,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-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block} /* --------->>> 960.GS <<<-------- */ body {background: #252525; font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; color: #333; font-weight: 300;} /* -----------------------------------*/ /* ----------->>> Text <<<------------*/ /* -----------------------------------*/ /* -----------------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* -----------------------------------*/ .clear { clear:both; } .float-left { float:left; } .float-right { float:right; } .underline {text-decoration: underline;} .red {color: #a71c21;} .grey {color: #777;} .text-right {text-align: right;} img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin-left: auto; margin-right: auto} a img.alignright {float:right; margin:0 0 1em 1em} a img.alignleft {float:left; margin:0 1em 1em 0} a img.aligncenter {display: block; margin-left: auto; margin-right: auto} #page {background: url(i/page-bkg.jpg) scroll repeat 0 0;} .line-break {display: block; background: url(i/line-break.png) scroll repeat-x 0 0; height: 1px;} /* -----------------------------------*/ /* ---------->>> LINKS <<<------------*/ /* -----------------------------------*/ a, a:link, a:visited {text-decoration:none; color: #000; cursor: pointer;} a:hover {color: #8a00ff;} /* -----------------------------------*/ /* ---------->>> MENU <<<-------------*/ /* -----------------------------------*/ #menu-bar {display: block; border-top: 7px solid #252525; background: transparent url(i/menu-bar.png) scroll repeat-x 0 bottom; height: 41px; position: fixed; width: 100%; z-index: 150;} #menu-bar div.grid_16 {position: relative;} #menu-bar h1 a, #menu-bar h1 a:visited {display: block; background: url(i/logo.png) scroll no-repeat 0 bottom; text-indent: -9999px; width: 142px; height: 23px; margin: 5px 17px 0 0; float: left;} #menu-bar h1 a:hover {background-position: 0 0;} ul#nav li {display: inline; float: left; margin: 0 0 0 40px;} ul#nav li:first-child {margin-left: 0;} ul#nav li a, ul#nav li a:visited {display: block; font-size: 15px; color: #252525; padding-top: 11px; text-shadow: 1px 1px #fff;} ul#nav li a:hover {color: #8a00ff;} ul#nav li.current_page_item {background: url(i/menu-arrow.png) scroll no-repeat center top;} a#skype, a:visited#skype {display: block; font-size: 15px; float: right; background: url(i/skype.png) scroll no-repeat right 0; height: 20px; padding: 1px 20px 0 0; margin-top: 11px; color: #252525; text-shadow: 1px 1px #fff;} a:hover#skype {background-position: right -30px; color: #3CA0F3;} a#client-login, a:visited#client-login {display: none; height: 38px; width: 149px; background: url(i/client-login.png) scroll no-repeat 0 0; text-indent: -9999px; position: absolute; right: -4px; bottom: -42px;} a:hover#client-login {background-position: 0 bottom;} #custom-clear {display: block; height: 43px;} /* -----------------------------------*/ /* ---------->>> Header <<<-----------*/ /* -----------------------------------*/ #header {display: block; background: url(i/header-bkg2.png) scroll no-repeat 0 0; height: auto; padding-top: 69px;} #header h2 {display: block; background: url(i/myname.png) scroll no-repeat 0 0; width: 707px; height: 51px; text-indent: -9999px;} #header h3 {font-size: 27px; font-weight: 300; letter-spacing: -1px; margin-bottom: 60px; text-shadow: 1px 1px #fff; line-height: 37px;} #header h3 a, #header h3 a:visited {color: #282828; font-weight: bold; border-bottom: 1px dotted #aaa;} #header h3 a:hover {color: #8a00ff;} #intro-box {display: none; margin: 20px 0;height: 125px; background: url(i/what-else.png) scroll no-repeat 0 0; padding: 25px 20px 0;} #what-else {display: block; width: 720px; float: left;} #what-else p {color: #555; font-size: 18px; font-weight: 500; font-style: italic; margin-bottom: 5px; text-shadow: 0 1px #000;} #what-else li acronym {display: inline; float: left; color: #ccc; text-transform: uppercase; float: left; background-color: #1e1e1e; padding: 8px; margin: 2px 3px 2px 2px; font-size: 18px; cursor: help; text-shadow: 1px 1px #0d0d0d; letter-spacing: -0.07em; font-weight: 500;} #what-else li acronym:hover {background-color: #1a1a1a;} a#say-hello, a:visited#say-hello {display: block; background: url(i/say-hello.png) scroll no-repeat 0 0; width: 150px; height: 82px; text-indent: -9999px; float: right; margin: 13px 10px 0 0;} a:hover#say-hello {background-position: 0 bottom;} /* -----------------------------------*/ /* ----------->>> MAIN <<<------------*/ /* -----------------------------------*/ #main {margin-bottom: 40px;} #col-a h5, #col-b h5, #col-c h5, #portfolio h5 {padding: 15px 0; background: url(i/line-break.png) scroll repeat-x 0 bottom; text-shadow: 1px 1px #fff; margin-bottom: 15px; cursor: help;} #portfolio-tip, #twitter-tip {display:none; background:transparent url(i/tooltip.png) scroll no-repeat 0 0; font-size:14px; line-height: 20px; height:50px; width:170px; padding:25px; color:#fff; z-index: 100;} #twitter-tip a, #twitter-tip a:visited {color: #15B0E4;} ul#flickr li {margin-bottom: 35px; text-align: center;} ul#flickr li a, ul#flickr li a:visited {display: block; border: 1px solid #999; margin: 10px auto; width: 100px;} ul#flickr li p {width: 200px; font-size: 12px; margin: 0 auto; text-shadow: 0 1px #fff;} #twit-top {display: block; background: url(i/twit-top.png) scroll no-repeat 0 0; width: 220px; height: 24px; margin-top: -5px;} div.aktt_tweets {display: block; background: url(i/twit-bkg.png) scroll repeat-y 0 0;} .aktt_tweets li {text-align: center;font-size: 14px; line-height: 18px; padding: 5px; width: 210px;} #twit-btm {display: block; background: url(i/twit-btm.png) scroll no-repeat 0 0; width: 220px; height: 15px; margin-bottom: 35px; } #portfolio .ngg-gallery-thumbnail {margin: 10px 15px 30px 0 !important} /* -----------------------------------*/ /* ---------->>> SLIDER <<<-----------*/ /* -----------------------------------*/ #slider {display: block; height: 270px; background: url(i/slider-bkg.png) scroll repeat-x 0 0; position: relative;} #slider-arrow {display: block; background: url(i/slider-arrow.png) scroll no-repeat 0 0; width: 22px; height: 13px; margin: 0 auto; position: absolute; left: 0; right: 0; top: -9px;} #col-1, #col-3 {display: block; background: url(i/slider-box.png) scroll no-repeat 0 0; height: 202px; margin-top: 41px; width: 241px;} #col-2 {display: block; background: url(i/slider-box-main.png) scroll no-repeat 0 0; width: 339px; height: 244px; margin-top: 17px;} a.arrow, a:visited.arrow {display: block; background: url(i/arrows.png) scroll no-repeat 0 0; width: 31px; height: 29px; text-indent: -9999px; margin-top: 119px;} a#arrow-right, a:visited#arrow-right {background-position: right bottom;} #slider-btm {display: block; height: 23px; width: 959px; background: url(i/slider-btm.png) scroll no-repeat 0 0; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: -14px;} /* -----------------------------------*/ /* ---------->>> FOOTER <<<-----------*/ /* -----------------------------------*/ #footer {background-color: #252525; padding: 35px 0;text-shadow: 0 1px #000; border-top: 5px solid #111;} #footer h5 {padding-bottom: 15px; background: url(i/line-break.png) scroll repeat-x 0 bottom; text-shadow: 1px 1px #000; margin-bottom: 10px; color: #474747; font-style: italic;} #footer-a {width: 300px; position: relative;} ul#footer-form li input, ul#footer-form li textarea {display: block; background: url(i/form.png) scroll no-repeat 0 -41px; width: 291px; height: 34px; margin-bottom: 2px; border: 0; font-size: 16px; color: #444; padding: 0 5px;text-shadow: 0 1px #000;} ul#footer-form li textarea#message {resize:none;height: 79px; background-position: 0 -83px; padding: 5px; font-family:�HelveticaNeue-Light�,�Helvetica Neue Light�,�Helvetica Neue�,Helvetica,arial,sans-serif;} #footer-a small {font-size: 11px; color: #666; position: relative; top: 18px; left: 5px;} #footer-submit {display: block; background: url(i/form.png) scroll no-repeat left -191px; text-indent: -9999px; width: 72px; height: 41px; float: right; border: 0; margin-top: -8px; cursor: pointer;} #footer-b {padding-left: 50px;} #footer-b h6 {font-size: 14px; color: #a9a9a9; font-weight: 400; text-shadow: 0 1px #000; margin-bottom: 5px;} #footer-b p {color: #666; font-size: 13px; line-height: 15px; margin-bottom: 10px;} ul#social-btns li {display: inline; float: left;} ul#social-btns a, ul#social-btns a:visited {display: block; background: url(i/social-btns.png) scroll no-repeat; height: 41px; text-indent: -9999px; margin: 0 10px 4px 0;} li a#foot-rss, li a:visited#foot-rss {width: 77px; background-position: 0 -410px;} li a:hover#foot-rss {background-position: 0 -451px;} li a#foot-flickr, li a:visited#foot-flickr {width: 93px; background-position: 0 -328px;} li a:hover#foot-flickr {background-position: 0 -369px;} li a#foot-twitter, li a:visited#foot-twitter {width: 93px; background-position: 0 -246px;} li a:hover#foot-twitter {background-position: 0 -287px;} li a#foot-imgspark, li a:visited#foot-imgspark {width: 115px; background-position: 0 0;} li a:hover#foot-imgspark {background-position: 0 -41px;} li a#foot-delicious, li a:visited#foot-delicious {width: 115px; background-position: 0 -82px;} li a:hover#foot-delicious {background-position: 0 -123px;} li a#foot-digg, li a:visited#foot-digg {width: 82px; background-position: 0 -164px;} li a:hover#foot-digg {background-position: 0 -205px;} #footer-c {width: 250px; padding-left: 40px;} #search-box {display: block; background: url(i/form.png) scroll no-repeat 0 0; width: 241px; height: 34px; border: 0; color: #444; font-size: 16px; text-shadow: 0 1px #000; padding: 0 5px;} #foot-search p {font-size: 13px; color: #666; text-shadow: 1px 1px #111; padding: 20px 0 0 7px; float: left;} #search-submit {float: right; background: url(i/form.png) scroll no-repeat right -191px; width: 93px; height: 41px; border: 0; text-indent: -9999px; margin: 4px 0 10px; cursor: pointer;} ul#links li {display: inline; float: left;margin: 0 20px 5px 0; width: 105px; height: 35px;} ul#links li a, ul#links li a:visited {display: block; background: url(i/social-btns.png) scroll no-repeat -105px -481px; font-size: 13px; color: #666; padding: 5px 0 5px 15px; overflow: hidden;} ul#links li a:hover {color: #8a00ff;} #btm-bar {display: block; background-color: #f4f4f1; height: 20px; text-align: center; padding-top: 12px;border-top: 5px solid #111;} #btm-bar p, #btm-bar a, #btm-bar a:visited {color: #999; text-shadow: 0 1px #fff; font-size: 12px;} #btm-bar a, #btm-bar a:visited {color: #555;} #btm-bar a:hover {color: #8a00ff;} /* -----------------------------------*/ /* ------->>> CONTACT FORM <<<--------*/ /* -----------------------------------*/ div.wpcf7-response-output {background-color: #222; line-height: 20px; text-shadow: 0 1px #000; color: #eee; position: absolute; bottom: -40px; font-size: 12px; width: 188px; left: -2px;} div.wpcf7-mail-sent-ok {bottom: -20px;} li span.wpcf7-not-valid-tip {background-color: #eee; width: auto; text-shadow: 0 1px #fff; padding: 5px; top: 3px;}