html { overflow:hidden }

body {
margin:0;
padding:0;
background:url('/img/body-bg.jpg') repeat
}

h1, h2 { margin:0 }
img { border:none }

ul { list-style-type: none }

*:focus { outline: none }

cufon canvas { -moz-user-select:text; -webkit-user-select:text; user-select:text }

#loading {
position: absolute;
background: #1e1e1e;
width: 100%;
height: 100%;
z-index: 100;
overflow:hidden;
color:#fff;
cursor:wait
}

#loading div {
margin: 0 auto;
width: 300px;
height: 100px;
padding-top: 20%;
font-family: "Georgia";
text-transform: uppercase;
letter-spacing:1px;
font-size:14px;
color:#fff8d4
}

.container {
background:url('/img/wire.png') no-repeat;
width:9778px;
height:100%;
position:absolute;
top:0;
left:0
}

#intro {
border-top:solid 3px #fff;
background:url('/img/head-bg.png') repeat-x;
height:500px;
width:100%;
margin:0;
padding:0
}

#intro #corner {
background:url('/img/corner.gif') no-repeat;
position:absolute;
right:0px;
top:260px;
height:69px;
width:69px;
display:block
}

#intro h1 {
text-indent:-9999px;
height:96px;
width:895px;
background:url('/img/title.gif') no-repeat;
position:relative;
top:230px;
left:111px
}

#intro p {
color:#919090;
font-size:30px;
background:url('/img/hire-me.png') no-repeat;
margin:0;padding:0;
position:absolute;
left:520px;
top:103px;
padding-top:90px
}

#intro p a {
color:#919090;
text-decoration:none;
margin-left:25px
}

#intro p a:hover { color:#B088E7 }
#intro p a:active { outline: none }

#intro ul {
margin:0;padding:0;
position:absolute;
top:381px;
left:345px
}

#intro li {
color:#fffcec;
line-height:60px
}

#intro li b,#intro li strong {
color:#9ccaeb;
font-weight:normal
}

#intro .big { font-size:48px }
#intro .medium { font-size:36px }
#intro .small { font-size:30px }

#intro .photo {
background:url('/img/photo-message.png') no-repeat;
position:absolute;
left:-232px;
top:-35px;
z-index:-1;
padding-top:35px;
width:400px
}

#intro .photo img {
background:url('/img/photo-bg.jpg') no-repeat;
padding:8px
}


#portfolio {
position:absolute;
left:2808px;
top:0;
padding:0;margin:0;
z-index:1;
height:100%;
width:821px
}

#portfolio h2 {
color:#fffcec;
font-size:48px;
background:url('/img/portfolio-message.png') no-repeat top left;
padding-bottom:20px;
width:296px;
font-weight:lighter;
margin-top:45px;
padding-top:20px
}

#portfolio dt {
font-family: "Georgia";
text-transform: uppercase;
letter-spacing:1px;
font-size:14px;
color:#fff8d4;
margin:0;
padding-bottom:10px;
width:195px
}

#portfolio dd {
font-family: "Trebuchet MS";
font-size:12px;
color:#eeeeee;
background:url('/img/tick.png') no-repeat top left;
width:150px;
padding-left:20px;
margin:0
}

#portfolio dl {
position:relative;
right:16px;
background:url('/img/skillset-bg.jpg') no-repeat;
width:207px;
height:195px;
margin-top:60px;
padding:20px 0 0 20px
}

#portfolio dd acronym { background:url('/img/acronym.png') repeat; border:none; cursor: help; }

#portfolio dd acronym:hover {
background:url('/img/acronym.png') repeat bottom left;
}


#portfolio div.sc_menu_wrapper {
position:absolute;
top:0;
left:480px;
height: 100%;
width: 362px;
overflow: auto
}

#portfolio .sc_menu {
width: 362px
}

#portfolio img {
background:url('/img/thumb-bg.gif') no-repeat;
padding:8px;
position:relative;z-index:-1;
display: block
}

#portfolio .sc_menu a {
outline: none;
display: block;
margin-bottom: 5px;
width: 342px;
background:url('/img/thumb-border.png') no-repeat 8px 8px;
margin-right:5px
}


#about {
position:absolute;
left:5592px;
top:0;
width:851px;
height:500px;
margin:0;
padding:35px 0
}

#about h2 {
color:#fffcec;
font-size:48px;
background:url('/img/about-message.png') no-repeat bottom left;
padding-bottom:25px;
width:296px;
font-weight:lighter;
margin:0
}


#about .keepinitreal {
position:absolute;
left:650px;
top:55px;
padding-top:53px;
background:url('/img/keepin-it-real.png') no-repeat top right;
}

#about img {
background:url('/img/photo-bg.jpg') no-repeat
padding:8px;
}

#about p {
line-height:28px;
font-size:23px;
width:609px;
color:#fffcec
}

#about b,#about strong {
color:#9ccaeb;
font-weight:normal
}

#about .alsoilike {padding:0 20px 4px 0;
background:url('/img/smelling-petrol.png') no-repeat 275px 62px
}

#contact {
width:1000px;
height:0;
position:absolute;
top:0;
left:8346px;
margin:0;padding:35px 0
}

#contact h2 {
color:#fffcec;
font-size:48px;
background:url('/img/contact-message.png') no-repeat top left;
padding-top:25px;
width:700px;
font-weight:lighter
}

#contact form {
width:1000px;
margin:0;
padding-top:55px
}

#contact form fieldset {
border:none;
margin:10px 25px 5px 0;
width:240px
}

.input { float:left }

#header {
float:right; 
position:relative;
right:0
}

.detail {
float:right; 
position:relative;
right:10px
}

.detail {
right:200px\0/
} 

@media screen and (-webkit-min-device-pixel-ratio:0) {
.detail { right:140px } 
}

#contact form label b {
color:#fd5d5d;
font-weight:normal
}

#error {
height:height:200px;
width:200px;
display:block
}

#contact .formerror {
color:#fd5d5d;
font-family: "Trebuchet MS";
font-size:13px;
background:#fee5e5;
font-weight:bold;
margin:11px 0 11px 0;
padding:1px 3px 1px 3px;
width:200px
}

#contact .formsuccess {
color:#4db14f;
font-family: "Trebuchet MS";
font-size:13px;
background:#e5fee6;
font-weight:bold;
margin:11px 0 11px 0;
padding:1px 3px 1px 3px;
width:200px
}

#contact form label {
font-family: "Georgia";
text-transform: uppercase;
letter-spacing:1px;
font-size:14px;
color:#fff8d4;
display:block;
margin:0;
padding:0 0 7px 0
}

#contact form input {
display:block;
padding:8px;
height:18px;
width:213px;
background:url('/img/input.gif') no-repeat top right;
border:0;
font-size:12px;
color:#3b3b3b;
font-family: "Trebuchet MS"
}

#contact form input[type="text"]:focus, #contact form input.ieFocusHack {
background:url('/img/input.gif') no-repeat bottom right;
color:#1d4765
}

#contact form textarea {
padding:8px;
height:259px;
width:360px;
background:url('/img/textarea.gif') no-repeat top right;
overflow: auto;
border: none;
font-size:12px;
color:#3b3b3b;
font-family: "Trebuchet MS";
margin-bottom:50px
}

#contact form textarea:focus, #contact form textarea.ieFocusHack {
background:url('/img/textarea.gif') no-repeat bottom right;
color:#1d4765
}

#contact form ul {
margin:0;
padding:0
}

#contact form .fakecheck {
font-family: "Trebuchet MS";
font-size:12px;
color:#fff;
text-decoration: none;
outline: none;
background: url(/img/checkbox.gif) no-repeat top left;
height:19px;
display: block;
padding: 0px 0px 0px 33px;
margin:0 0 9px 0;
line-height:20px
}

#contact form .fakecheck:hover { color:#bee9ba }

#contact form .fakechecked, #contact form .fakechecked:hover {
background: url(/img/checkbox.gif) no-repeat bottom left;
color:#4abc54
}

#contact form .fakeradio {
font-family: "Trebuchet MS";
font-size:12px;
color:#fff;
text-decoration: none;
outline: none;
background: url(/img/checkbox.gif) no-repeat top left;
height:19px;
display: block;
padding: 0px 0px 0px 33px;
margin:0 0 9px 0;
line-height:20px
}

#contact form .fakeradio:hover {
color:#bee9ba
}
#contact form .fakeradioed, #contact form .fakeradioed:hover {
background: url(/img/checkbox.gif) no-repeat bottom left;
color:#4abc54
}

#contact form input[type="radio"], #contact form input[type="checkbox"] { 
display:none;
}

#contact form #send-message {
width:400px;float:left;
background: url(/img/send-message.png) no-repeat 110px 8px
}

#contact form input[type="submit"] {
clear:both;
background: url(/img/send.gif) no-repeat top left;
height:42px;
width:91px;
line-height: 1px;
text-indent: -9999px;
cursor:pointer
}

#contact form input[type="submit"]:hover {
background: url(/img/send.gif) no-repeat bottom left
}

ul #toggle { margin:0 }

#toggle .previous {
position:fixed;
bottom:40px;
left:40px;
z-index:6
}

#toggle .next {
position:fixed;
bottom:40px;
right:40px;
z-index:6
}

#toggle .previous a {
background:url('/img/previous-arrow.png') no-repeat;
display:block;
height:111px;
width:111px;
outline: none;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
opacity:0.7
}

#toggle .next a {
background:url('/img/next-arrow.png') no-repeat;
display:block;
height:111px;
width:111px;
z-index:5;
outline: none;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
opacity:0.7
}

#toggle .previous a:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity:0.3
}

#toggle .next a:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity:0.3
}