@charset "UTF-8";
/* CSS Document */

/* The Basics */

body {
	background-color:#ffffff;
	background-image:url(images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
	margin: 20px 0px 0px;
	overflow-x:hidden;
	width:100%;	
	}
	
p {
	color:#777;
	font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
	}	

h1 {
	float:left;
	height:70px;
	margin-left:10px;
	margin-top:0px;	
	width:219px;
	}
	
	h1 img:hover{
	opacity: .5;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 200ms;
	}

h2 {
	color:#425660;
	font-family: Helvetica, Arial, sans-serif;
	font-size:18px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: bold;
	text-align: left;
	}	
	
	
h2 a:link {
	color:#2eb6f4;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

h2 a:visited {
	color:#2eb6f4;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;	
	padding:2px 2px;
	}

h2 a:hover {
	background-color:#2eb6f4;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}	
	

h3 {
	color:#777;
	font-family: Helvetica, Arial, sans-serif;
	font-size:18px;
	font-weight: bold;
	line-height: 15px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	}	

h4 {
	color:#777;
	font-family: Helvetica, Arial, sans-serif;
	font-size:10px;
	margin-top:-15px;
	}	

a img {border: none; }

ul{
	color:#777;	
	font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
	list-style: url(images/ul.gif);
	}
	

/* Main Wrappers and holders */	
/* Commented BG colours for positioning */	
	
	
#wrapper {
/*	background-color: #000000;*/
	height:960px;
	margin-left: auto;
	margin-right: auto;
	width:960px;
	}
	

/* header elements */
	
	
#header {
	/*background-color:#999999;*/
	height:100px;
	width:100%;
	}	
	
#nav {
	width:312px;
	height:35px;
	margin: 0px 10px 0px 0px;
	background-position: top;
	float:right;
	}


#navhome {
	background-image: url(images/home.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	float:left;
	height: 32px;
	margin-right:15px;
	width: 45px;
	}

#navhome:hover { 
  	background-image: url(images/home_mo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#navhome span { display: none; }

#navmywork { 	
	background-image: url(images/mywork.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	float:left;
	height: 32px;
	width: 77px;
	margin-right:15px;
	}

#navmywork:hover { 
  	background-image: url(images/mywork_mo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#navmywork span { display: none; }

#navabout {
	background-image: url(images/about.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	float:left;
	height: 32px;
	width: 79px;
	margin-right:15px;
	}

#navabout:hover { 
  	background-image: url(images/about_mo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#navabout span { display: none; }

#navcontact {
	background-image: url(images/contact.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	float:left;
	height: 32px;
	margin-right:15px;
	width: 62px;
	}

#navcontact:hover { 
  	background-image: url(images/contact_mo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#navcontact span { display: none; }

#navblog {
	background-image: url(images/myblog.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	float:left;
	display: block;
	height: 32px;
	margin-right:15px;
	width: 40px;
	}

#navblog:hover { 
  	background-image: url(images/myblog_mo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#navblog span { display: none; }

#hireme {
	float:right;
	display: block;
	width: 103px;
	height: 32px;
	background-image: url(images/hireme.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#hireme:hover { 
  	background-image: url(images/hireme_mo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

#hireme span { display: none;}


/* content elements */

#contentwrapper {
	/*background-color:#333333;*/
	height:804px;
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;	
	width:100%;
	} 

#featurewrapper {
	/*background-color:#FF0000;*/
	float:left;
	height:850px;
	margin: 0px 0px 0px 10px;
	overflow:hidden;
	width:650px;
	}

#sidewrapper {
	/*background-color:#0000FF;*/
	float:right;
	height:800px;
	margin: 90px 10px 0px 0px;
	width:265px;
	}

#pagewrapper {
	float:left;
	height:650px;
	margin: 90px 0px 0px 10px;
	width:650px;
	}

#pagecopy { width:640px; }
	
#workholder {
	float:left;
	height:820px;
	width:650px;	
	}	

/* feature elements */

#pageheader {
	height:31px;
	margin-bottom:20px;
	}

.workewrapper {
	height:250px;
	margin-bottom:20px;
	width:650px;
	}

.workleft {
	background-color:#f0f0f0;
	border:1px solid #FFFFFF;
	float:left;
	height:100%;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	width:310px;
	}

.workright {
	background-color:#f0f0f0;
	border:1px solid #FFFFFF;
	float:right;
	height:100%;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;	 
	 width:310px;
	 }

.workimage img {
	height:160px;
	margin-top:20px;
	margin-left:21px;
	margin-right:21px;
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	box-shadow: 0 1px 10px rgba(0,0,0,.5);
	opacity: 1;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 500ms;
	width: 268px;
	}

.workimage img:hover{
	opacity: .2;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 800ms;
	}

.worktext {
	height:50px;
	margin-left: auto;
	margin-right: auto;
	margin-top:10px;
	width: 270px;
	}

/* work Pages */

#workheader {
	height:31px;
	margin-bottom:20px;
	margin:85px 10px 20px 10px;
	}

.examplesleft {
	background-color:#999999;
	float:left;
	margin-left:10px;
	margin-right:auto;
	margin-bottom:10px;
	width:310px;
	
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	box-shadow: 0 1px 10px rgba(0,0,0,.5);
	}

.examplesright {
	width:310px;
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	box-shadow: 0 1px 10px rgba(0,0,0,.5);
	background-color:#999999;
	margin-left:auto;
	margin-right:10px;
	float:right;
	margin-bottom:10px;
	}

.examplescentre {
	width:630px;
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.5);
	box-shadow: 0 1px 10px rgba(0,0,0,.5);
	margin-left:auto;
	margin-right:auto;
	clear:both;	
	}


/* side elements */

#about {
	margin-bottom:25px;
	width: 265px;
	}

#about a:link {
	color:#c24634;
	font-weight: bold;
	font-family:inherit;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

#about a:visited {
	color:#c24634;
	font-family:inherit;
	text-decoration:none;
	font-weight: bold;
	text-decoration:underline;
	padding:2px 2px;
	}

#about a:hover {
	background-color:#c24634;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}

#twitterbox {
	
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	font-family:inherit;
	margin-bottom:25px;
	width: 265px;
	}

#twitterbox a:link {
	color:#90ba20;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;	
	}

#twitterbox a:visited {
	color:#90ba20;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

#twitterbox a:hover {
	background-color:#90ba20;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}


#blog {
	margin-bottom:25px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	width: 265px;
	}


#blog a:link {
	color:#425660;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

#blog a:visited {
	color:#425660;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

#blog a:hover {
	background-color:#425660;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}
	
#page {
	width: 265px;
	margin-bottom:25px;
	}

#page a:link {
	color:#2eb6f4;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

#page a:visited {
	color:#2eb6f4;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;	
	padding:2px 2px;
	}

#page a:hover {
	background-color:#2eb6f4;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}	

#project {
	width: 265px;
	margin-bottom:25px;
	}

#project a:link {
	color:#425660;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	}

#project a:visited {
	color:#425660;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;	
	}

#project a:hover {
	background-color:#425660;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}


/* footer */ 

#footer {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	height:30px;
	margin-left: auto;
	margin-right: auto;
	width:960px;
	margin-top: 20px;
	}

#footer a:link {
	color:#777;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	margin:0px 6px 0px 6px;
	padding:2px 2px;
	}

#footer a:visited {
	color:#777;
	font-family:inherit;
	font-weight: bold;
	text-decoration:none;
	text-decoration:underline;
	padding:2px 2px;
	}

#footer a:hover {
	background-color:#425660;
	color: #ffffff;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	padding:2px 2px;
	}
	
	
/* form */

input, textarea {  
    padding: 9px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 13px/100% Verdana, Tahoma, sans-serif;  
    width: 200px;  
    background: #FFFFFF;  
    }  
  
textarea {  
    width: 310px;  
    max-width: 400px;  
    height: 150px;  
    line-height: 150%;  
    }  
  
input:hover, textarea:hover,  
input:focus, textarea:focus {  
    border-color: #C9C9C9;  
    }  
  
.form label {  
    margin-left: 10px;  
    color: #999999;  
    }  
  
.submit input {  
    width: auto;  
    padding: 9px 15px;  
    background: #425660;  
    border: 0;  
    font-size: 14px;  
    color: #FFFFFF;  
    }  


/* About page Layout elements */

#aboutpagecols {
	margin-top:20px;
	width:100%;
	}

#aboutpagecolleft {
	float:left;
	width: 210px;
	}

#aboutpagecolmiddle {
	float:left;
	margin-left:9px;
	margin-right:5px;
	width:210px;
	}
	
#aboutpagecolright {
	float:right;
	width: 210px;
	}	


#cloud1 {
	overflow:hidden;
	position:absolute;
	width:100%;
	margin-top:-24px;
	z-index:-1;
	margin-left:619px;
		
}


#cloud2 {
	overflow:hidden;	
	position:absolute;
	width:100%;
	z-index:-1;
	margin-top:38px;
	
}

#cloud3 {
	overflow:hidden;
	position:absolute;
	margin-top:-40px;
	margin-left:10px;
	width:100%;
	z-index:-1;
		
}

#cloud4 {
	overflow:hidden;
	position:absolute;
	margin-top:70px;
	margin-left:900px;
	width:100%;
	z-index:-1;
		
}


#cloud5 {
	overflow:hidden;	
	position:absolute;
	width:100%;
	z-index:-1;
	margin-top:38px;
	margin-left:-500px;
	
}

#cloud1 img {
	-webkit-animation-duration: 320s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name: cloud1;	
	-webkit-animation-direction: normal ;
	
}

#cloud2 img {
	-webkit-animation-duration: 300s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name: cloud2;	
	-webkit-animation-direction: normal ;
}

#cloud3 img {
	-webkit-animation-duration: 500s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name: cloud3;	
	-webkit-animation-direction: normal ;
}

#cloud4 img {
	-webkit-animation-duration: 600s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-webkit-animation-name: cloud4;	
	-webkit-animation-direction: normal ;
}


@-webkit-keyframes cloud1 {
 0%   { margin-left:0%; top:0;}
 100% { margin-left:100%; top:0; }
}

@-webkit-keyframes cloud2 {
 0%   { margin-left:10%; top:-10;}
 100% { margin-left:100%; top:0; }

}


@-webkit-keyframes cloud3 {
 0%   { margin-left:0%; top:0;}
 100% { margin-left:100%; top:0; }

}

@-webkit-keyframes cloud4 {
 0%   { margin-left:0%; top:0;}
 100% { margin-left:100%; top:0; }

}

@-webkit-keyframes cloud5 {
 0%   { margin-left:0%; top:0;}
 100% { margin-left:100%; top:0; }

}