/* Title: Kaboom Creative style Author: oli@kaboomcreative.co.uk Copyright: 2010, Kaboom Creative All rights resevered (please don't re-use without permission). oooo .o8 `888 "888 888 oooo .oooo. 888oooo. .ooooo. .ooooo. ooo. .oo. .oo. 888 .8P' `P )88b d88' `88b d88' `88b d88' `88b `888P"Y88bP"Y88b 888888. .oP"888 888 888 888 888 888 888 888 888 888 888 `88b. d8( 888 888 888 888 888 888 888 888 888 888 o888o o888o `Y888""8o `Y8bod8P' `Y8bod8P' `Y8bod8P' o888o o888o o888o . o8o .o8 `"' .ooooo. oooo d8b .ooooo. .oooo. .o888oo oooo oooo ooo .ooooo. d88' `"Y8 `888""8P d88' `88b `P )88b 888 `888 `88. .8' d88' `88b 888 888 888ooo888 .oP"888 888 888 `88..8' 888ooo888 888 .o8 888 888 .o d8( 888 888 . 888 `888' 888 .o `Y8bod8P' d888b `Y8bod8P' `Y888""8o "888" o888o `8' `Y8bod8P' */ @import url("clearfix.css"); /* Reset */ 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,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0 none;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;/*line-height:1;*/margin:0;padding:0;text-align:left;vertical-align:baseline;} /* Ready, steady, go! */ body{margin:0;font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","Helvetica Neue",helvetica,arial,sans-serif;/*font-size:62.5%;*/color:#444;background:#f7f7f7 url(/themes/site_themes/default/bg_body.jpg) repeat 0 0;text-shadow:0 1px 0 rgba(255,255,255,1);} ul{margin:0;padding:0;} img{border:none;} blockquote{font-size:24px;color:#888;margin:40px 0 0 40px;font-family:georgia,times;font-style:italic;font-weight:normal;background:transparent url(/themes/site_themes/default/quoleft.png) left top no-repeat;line-height:30px;} blockquote div{padding:10px 0 0 60px;} p,li{margin:0 0 14px 0;font-size:14px;line-height:20px;} .pad p,.pad h1,.pad h2,.pad h3,.pad h4,.pad h5{padding:0 20px 0 0;} strong{font-weight:bold;} p em{font-style:italic;line-height:inherit;font-size:inherit;} .note{font-size:10px;} a{color:#000;text-decoration:underline;font-size:inherit;} a:visited{color:#000;} a:hover{color:#c72c19;} a:active{position:relative;top:1px;} .left{float:left;} .right{float:right;} h1,h2,h3,h4,h5{font-weight:bold;} /* h1{font:bold 3em "Lucida Grande","Lucida Sans Unicode","Lucida Sans","Helvetica Neue",helvetica,arial,sans-serif;line-height:1.3em;margin:-0.17em 0 0.5em;letter-spacing:-.05em;} */ h2{font-size:14px;line-height:20px;color:#E43621;margin:0 0 18px 0;} /* h2{font:normal 18px georgia;margin:0 0 18px 0;} */ h1,h3{font:bold 24px/30px "Lucida Grande","Lucida Sans Unicode","Lucida Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:0 0 .2em 0;letter-spacing:-.05em;} h1{margin:-0.17em 0 0.5em;} h4{font-size:11px;line-height:150%;margin:0 0 1.5em 0;text-transform:uppercase;text-shadow:none;} h4 span{background:rgb(102,102,102);background:rgba(0,0,0,.6);color:#fff;padding:3px 5px;line-height:150%;} #does h4 span{background:#E43621;} h5{font-size:10px;line-height:150%;font-weight:bold;text-transform:uppercase;margin:0 0 1em 0;} h5 a,h5 a:visited{text-decoration:none;color:#E43621;} .btn{padding:4px 15px 3px 15px;line-height:20px;margin:20px 0 20px 0;display:inline-block;font-size:11px;font-weight:bold;border:1px solid #ccc;color:#333;text-decoration:none;background:rgb(229,229,229);background:rgba(0,0,0,.1);-webkit-border-radius:15px;-moz-border-radius:20px;-radius:15px;} a:hover.btn{background:#d7d7d7;background:rgba(0,0,0,.15);color:#444;} /* Layout */ #page{width:960px;margin:0 auto;} .half{width:460px;float:left;margin:0 20px 0 0;} .quater{width:210px;margin:0 20px 0 0;} .padd{padding-right:12px;} .third{width:300px;margin:0 30px 30px 0;float:left;} .two-third{width:630px;margin:0 30px 30px 0;float:left;clear:none;} #header{margin-bottom:0;position:relative;height:110px;} #header #brand{width:211px;height:62px;float:left;margin:24px 0 24px 10px;} #header #brand a{display:block;outline:none;height:72px;text-indent:-9999px;background:transparent url(/themes/site_themes/default/logo.png) no-repeat 0 0;} #header h2{position:absolute;left:960px;bottom:-305px;width:28px;height:303px;margin:0;text-indent:-9999px;background:transparent url(/themes/site_themes/default/slogan.png) no-repeat 0 0;} #navigation{float:right;margin:48px 0 0 20px;list-style:none;} #navigation li{float:left;margin:0;} #navigation li a{font-size:15px;line-height:22px;padding:2px 10px;margin-right:15px;display:block;text-decoration:none;} #navigation li a{color:#8d8d8d;} #navigation li a:visited{color:#8d8d8d;} #navigation li a:hover{color:#E43621;} #navigation li a:active{position:relative;top:1px;} #navigation li a.current{border-bottom:4px solid #eee;color:#E43621;} .framed{position:relative;margin-bottom:20px;border:1px solid #fff;background-color:rgba(0,0,0,.1);padding:13px;font-size:0px;line-height:0;} #leader{position:relative;padding:10px;background:transparent url(/themes/site_themes/default/billboard.png) no-repeat 0 0;} #content{padding:30px 10px;} #footer{background:#efefef;border-top:1px solid #dedede;padding:30px 0 20px 0;text-shadow:0 1px 0 rgba(255,255,255,1);} #footer .three_col{margin:0 auto;width:960px;color:#777;list-style:none;} #footer .three_col li h5{font-size:13px;text-transform:uppercase;} #footer .three_col li p{font-size:11px;line-height:1.5em;} #footer .three_col li p a{color:#444;text-decoration:underline;} #footer .three_col li p a:hover{text-decoration:none;} #flickr{list-style:none;} #flickr li.logo{width:18px;} #flickr li.logo a{width:18px;height:85px;padding:0;background:transparent url(/themes/site_themes/default/flickr_logo.png) no-repeat right 0;text-indent:-9999px;} #flickr li.logo a:hover{background-position:0 0;background-color:transparent;} #flickr li{float:left;margin:0 9px 10px 0;width:81px;} #flickr li a{line-height:0;font-size:0;display:block;padding:3px;height:75px;background-color:#ccc;} #flickr li a:hover{background-color:#fefefe;} #copyright{background:#333;color:#666;padding:7px;border-top:1px solid #222;} #copyright p{margin:0 auto;width:960px;text-shadow:0 1px 0 rgba(0,0,0,.3);font-size:10px;} .three_col{list-style:none;} .three_col li{width:299px;margin:0 30px 30px 0;float:left;} .last,li.last{margin-right:0;} #portfolio li{position:relative;height:180px;} #portfolio li p{position:absolute;bottom:0;left:0;margin:0;padding:10px 10px;width:280px;background-color:rgba(0,0,0,.5);color:#fff;text-shadow:none;} #portfolio li p strong{font-size:16px;} /* =homepage */ .pod ul{list-style:none;margin-bottom:15px;} .pod ul li{margin:0 0 5px 0;} .pod ul li,.pod ul li p{font-size:12px;} .pod ul li p{line-height:17px;} .pod ul li h5{font-size:13px;line-height:20px;} /* =Who we Are */ #kaboomians{list-style:none;} #kaboomians li{font-size:10px;float:left;width:210px;margin-right:30px;} #kaboomians li.last{margin-right:0;} #kaboomians li img{border:1px solid #fff;background:rgb(229,229,229);background:rgba(0,0,0,.1);float:left;margin:0 10px 5px 0;padding:5px;width:62px;} #kaboomians li p{margin:0 0 5px 0;font-size:12px;line-height:15px;} #kaboomians li p strong{display:block;font-family:georgia;font-weight:normal;font-size:15px;margin:0 0 5px;} #kaboomians li p.drink{font-size:10px;line-height:13px;color:#E43621;} /* =What we do */ #services ul{margin:0 0 0 15px;} #services ul li{margin:0 0 0 0;} /* = What we've made */ .recent-work{float:left;width:460px;list-style:none;} .recent-work li{float:left;width:210px;padding:0;position:relative;line-height:0;} .recent-work li p{font-size:12px;line-height:18px;position:absolute;bottom:0;left:0;margin:0;padding:5px 10px;width:190px;background:rgb(102,102,102);background:rgba(0,0,0,.7);color:#fff;text-shadow:none;} .recent-work li p a{color:#fff;font-size:11px;} .recent-work li.last{margin-right:0;float:right;} /* Contact */ #contact_form{padding:0;} #contact_form .form-input,#contact_form .form-textarea{margin-bottom:5px;float:left;width:450px;line-height:22px;} #contact_form input:focus, #contact_form textarea:focus {border-color:#7c899a} #contact_form input,#contact_form textarea{float:left;margin:0px;font-size:14px;font-family:Arial,sans-serif;color:#323232;padding:4px 5px;border:1px solid #999;background:#fff;} #contact_form label {display:block;font-size:13px;font-weight:bold;line-height:19px;padding:3px 0 10px 0;} #contact_form .form-input label{width:90px;} #contact_form .form-input input{width:300px;} #contact_form textarea{overflow:auto;width:430px;} #contact_form .form-click{margin:10px 27px 0 0;float:left;padding:0;} #contact_form .form-click .button{background-color:#E43621;background-image:none;color:#fff;border:1px solid #E43621;-moz-border-radius:4px;border-radius:4px;-webkit-border-radius:4px;padding:4px 30px;overflow:visible;}