/* Localized */
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;}

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

#loading {
	position: absolute;
	background: #9966ff;
	width: 100%;
	height: 100%;
	z-index: 100;
	overflow:hidden;
	color:#302260;
	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:#302260;
}

.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:529px;
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 span { color:#302260;}
#intro li span a
{
	color: #302260;
	text-decoration: none;
}

#intro li span a:hover
{
	color: #FFF;
	text-decoration: none;
}


#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%;

/* Make bigger than a photo, because we need a place for a scrollbar. */
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 span { color:#302260 }

#about .alsoilike {padding:0 20px 4px 0;
background:url('img/smelling-petrol.png') no-repeat 400px 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; }

.detail {
float:right; 
*position:relative;
*right:190px;
}

#contact form label span {
color:#fd5d5d;
}

#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:#302260;
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:#302260;
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;
opacity:0.7;
filter:alpha(opacity=70)
}

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

#toggle .previous a:hover {
opacity:0.3;
filter:alpha(opacity=30)
}

#toggle .next a:hover {
opacity:0.3;
filter:alpha(opacity=30)
}