/*************************/ /* samhulse.co.uk v4 */ /* # Sam Hulse */ /*************************/ * { border: 0; margin: 0; padding: 0; } /* clear default styles */ html { font-size: 100%; } body { font-size: 62.5%; } /* set 10px to 1em */ body { background: #000 url("../img/bg.jpg") top center repeat; } h1 { text-indent: -99999px; height: 0; } h2 { font: 1.9em/1.4em Helvetica, Arial, sans-serif; color: #535353; font-weight: bold; } h3 { font: 1.9em/1.4em Helvetica, Arial, sans-serif; color: #535353; font-weight: bold; } p { font: 1.5em/1.5em Calibri, Helvetica, Arial, sans-serif; color: #666; padding: 0 0 20px 0; } a, a:link { color: #d20f40; text-decoration: none; background: url("../img/chalk.jpg") no-repeat bottom right; } a:visited { color: #d20f40; } a:hover { color: #910b2d; } a:active { color: #910b2d; } h2 a, h2 a:link, #work a, #work a:link { background: none; } #header { background: url("../img/header_bg.jpg") center no-repeat; height: 200px; /* margin: 0 auto;*/ min-width: 800px; } #twitter_div { text-align: right; height: 60px; padding: 103px 0 0 450px; width: 350px; margin: 0 auto; } #twitter_button { height: 32px; } #twitter_button a { text-indent: -99999px; float: right; display: block; height: 32px; width: 85px; background: url("../img/twitter.gif"); text-align: left; } #twitter_button a:hover { background: url("../img/twitter.gif") 0px 32px; } #twitter_update_list { float: right; list-style: none; font: 1.5em/1.0em Calibri, Helvetica, Arial, sans-serif; color: #666; } #twitter_update_list li:before { content: "sam hulse "; color: #d20f40; } #twitter_update_list a { font-size: 0.85em; background: none; display: block; float: right; } #twitter_update_list span a { font-size: 1.0em; background: none; display: inline; float: none; } #introduction { background: #000; height: 90px; padding: 10px 0 0 0; } #introduction h2 { display: block; margin: 0 auto; width: 800px; } #wrap { width: 800px; margin: 0 auto; } #about-me { background: url("../img/about-me_bg.gif") top right no-repeat; padding: 15px 15px 15px 235px; height: 230px; } #work { background: url("../img/work_bg.gif") top right no-repeat; padding: 20px 5px 40px 235px; height: 105px; } #work ul li { display: block; float: left; margin: 0 12px 0 0; padding: 10px; height: 80px; width: 80px; background: #000; } .work_gallerylist { visibility: hidden; display: none; height:0; } #clients { background: url("../img/clients_bg.gif") top right no-repeat; padding: 10px 5px 40px 225px; height: 250px; } #clients p { padding: 0 0 5px 0; } #clients ol li { list-style: none; background: url("../img/chalk.jpg") top left no-repeat; font: 1.3em/1.5em Calibri, Helvetica, Arial, sans-serif; color: #999; padding: 7px 0 0 10px; } #clients ol li:first-child { background: none; } #contact { background: url("../img/contact_bg.gif") top right no-repeat; padding: 10px 5px 25px 235px; height: 325px; margin: 0 0 100px 0; } #contact_res { height: 265px; } fieldset { background: #fff; height: 55px; width: 265px; margin: 1px; float: left; padding: 0 5px; } label { font: 1.5em/1.5em Calibri, Helvetica, Arial, sans-serif; color: #797979; display: block; } input[type="text"] { background: url("../img/form_input_bg.jpg"); height: 20px; width: 240px; padding: 5px 5px 0 5px; } input[type="text"]:focus { background-position: 0px 25px; } textarea { background: url("../img/form_textarea_bg.jpg"); height: 90px; width: 517px; padding: 5px; } textarea:focus { background-position: 0px 100px; } input[type="submit"] { background: url("../img/form_submit_btn.jpg"); height: 34px; width: 84px; } input[type="submit"]:hover { background-position: 0px 34px; cursor: pointer; } /* custom fieldsets for message, submit button and errors */ fieldset.message { height: 130px; width: 542px; } fieldset.submit { background: #ececec; height: 34px; width: 84px; padding: 10px 91px 11px 91px; } fieldset.error { background: #fddbde; } fieldset.error label { color: #f00; } .captcha input { width: 115px; float: left; background: url("../img/form_captcha_input_bg.jpg"); } .captcha img { float: right; margin: 0 5px 0 0; } .captcha a { cursor: help; } p.error { font-size: 1.1em; color: #f00; clear: both; } #contact li { display: block; float: left; height: 34px; width: 135px; margin: 5px; } #contact li:first-child { font: 1.6em/1.5em Calibri, Helvetica, Arial, sans-serif; color: #666666; display: block; float: left; height: 20px; width: 500px; margin: 20px 0 0 0; } #contact li a { display: block; height: 26px; margin: 0 auto; text-indent: -99999px; } /* #contact li a:hover { background-position: 0px 26px; } */ /* decided against this in favour of tooltip */ #contact li + li a { background: url("../img/contact_links_facebook.gif"); width: 132px; } #contact li + li + li a { background: url("../img/contact_links_vimeo.gif"); width: 103px; } #contact li + li + li + li a { background: url("../img/contact_links_twitter.gif"); width: 127px; } #contact li + li + li + li + li a { background: url("../img/contact_links_flickr.gif"); width: 94px; } #contact li + li + li + li + li { width: 94px; } #about-me, #work, #clients, #contact { margin-top: 100px; } /* how much padding between the content sections? */ .hidden { display: none; } #footer { background: #000; padding: 10px; } #footer p { font-size: 1.2em; width: 800px; margin: 0 auto; padding: 0; color: #333; } /* ohh my god have you seen the state of this shit? hahaha it needs a bit of a tidy up, but at least everythings up and running */ /* MILKBOX */ #mbOverlay { position: absolute; left: 0; width:100%; background-color: #d20f40; /* set the Milkbox overlay color // opacity: see the js options */ z-index:100; cursor: pointer; } #mbCenter { /* for default width and height, see the js options */ position: absolute; z-index:101; overflow:hidden; left: 50%; top:10%;/* overwritten in the js options to properly position the milkbox when activated in a scrolled window */ background-color: #fff;/* set the Milkbox background color */ border: 5px solid #fff;/* set the Milkbox border */ margin:0; padding:5px;/* set the Milkbox padding */ } .mbLoading{ background: #fff url(../img/loading.gif) no-repeat center; }/* IMAGE: loading gif */ #mbCanvas{ margin:0; padding:0; height:0; border:none; font-size:0; overflow:hidden; } .clear{ clear:both; height:0; margin:0; padding:0; font-size:0; overflow:hidden; } /* *** BOTTOM *** */ /* set text options */ #mbBottom { font: 1.6em/1.4em Calibri, Helvetica, Arial, sans-serif; color: #666; text-align: left; padding-top:8px; margin:0; } /* navigation */ /* be careful if you change buttons dimensions */ #mbNavigation{ float:right; width:27px; padding-top:3px; border-left:1px solid #9c9c9c;/* set nav border */ } #mbCount{ width:55px; overflow:hidden; padding-top:1px; float:right; text-align:right; font-size:9px; /* count font size */ } #mbCloseLink, #mbPrevLink, #mbNextLink, #mbPlayPause{ outline:none; display:block; float:right; height:19px; cursor: pointer; } #mbPrevLink, #mbNextLink{ width:15px; } #mbPrevLink{ background: transparent url(../img/prev.gif) no-repeat; }/* IMAGE: prev */ #mbNextLink{ background: transparent url(../img/next.gif) no-repeat; }/* IMAGE: next */ #mbPlayPause{ width:13px; } #mbPlayPause{ background: transparent url(../img/play-pause.gif) no-repeat; }/* IMAGE: prev */ /* NOTE: doesn't work in ie6, so, just see the js options :) */ a#mbPrevLink:hover,a#mbNextLink:hover,a#mbCloseLink:hover,a#mbPlayPause:hover { background-position: 0 -22px; } #mbCloseLink { width:17px; background: transparent url(../img/close.gif) no-repeat; /* IMAGE: close */ } /* description */ #mbDescription{ margin-right:27px; padding:0px 10px 0 0; font-weight: normal; } /*tooltips*/ .tip { background-color: #333; padding: 5px; } .tip-title { color: #d20f40; font-size: 20px; padding: 5px; font: 1.9em Calibri, Helvetica, Arial, sans-serif; } .tip-text { padding: 5px; font: 1.5em Calibri, Helvetica, Arial, sans-serif; color: #666; }