/* Tell the browser to render HTML 5 elements as block */
header,footer,section,aside,nav,article {
display:block;
}

body {
background:#fff url(../images/body.png) fixed repeat;
margin:0 auto;
padding:0 10px;
width:940px;
font-family:'ComicSerif', Helvetica, Arial, sans-serif;
text-shadow:2px 2px 2px rgba(0, 0, 0, 0.2);
}

a { text-decoration:none; }
a:hover { color:#555; }

/* COLOURS ------------------------------------------------------*/
.orange {color:#ff4000;}
.pink {color:#d9417e;}
.lime {color:#88e70e;}
.blue {color:#0e65e8;}
.red {color:#d41d1d;}
.cyan {color:#1eb5d4;}

/* FONTS ------------------------------------------------------*/
.DagnyOT {font-family:'DagnyOT';}
.ComicSerif {font-family:'ComicSerif';}

header {
border-radius:20px;
box-shadow:0 0 3px #555;
-moz-border-radius:20px;
-moz-box-shadow:0 0 3px #555;
-webkit-border-radius:20px;
-webkit-box-shadow:0 0 3px #555;
background:#fff url(../images/header-scape.jpg) bottom center no-repeat;
margin-top:30px;
padding:20px 20px 74px;
height:128px;
}

nav {
border-radius:10px;
box-shadow:0 0 3px #555;
-moz-border-radius:10px;
-moz-box-shadow:0 0 3px #555;
-webkit-border-radius:10px;
-webkit-box-shadow:0 0 3px #555;
background:#fff;
height:45px;
margin-left:385px;
position:fixed;
top:10px;
z-index:99;
}

nav ul {
padding:10px 14px 14px;
}

nav li {
display:inline;
}

nav li a {
font-size:18pt;
letter-spacing:-1px;
text-decoration:none;
}

nav li a:hover {
color:#555;
}

#about {
background:url(../images/bg-about.png) top left no-repeat;
color:#fff;
height:1099px;
}

#about .button {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
font-size:14px;
letter-spacing:1px;
padding:5px 10px;
margin-left:230px;
color:#fff;
background:#ff4000;
}

#about .button:hover {
background:#555;
}

#about .statements {
margin-bottom:20px;	
}

#about .blog-link {
margin:0 0 20px 50px;
}

#about .title {
margin-top:70px;
}

#about article {
-o-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
height:390px;
font-size:16px;
letter-spacing:1px;
line-height:20px;
margin-left:123px;
padding:25px;
width:664px;
}
#about article p.first {margin-right:50px;}

#about #adobe-programs { margin:80px 0 0 45px; }
#about #adobe-programs li { display:inline; list-style:none; }
#about #adobe-programs li img { vertical-align:middle;}


#about p {
margin-bottom:10px;
}

#about p a { color:#980B44; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:0 2px 0 3px; margin:0 2px; background:#fff; }
#about p a:hover { color:#E3709E; background:#980B44; }

#play {
background:url(../images/bg-play.png) top left no-repeat;
height:1004px;
padding:0 16px;
}

#play article {
	margin-top:240px;
	color:#fff;
	font-size:20px;
}
#play article p { line-height:24px; margin-bottom:10px; }
#play article p a { color:#5b990b; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:0 2px 0 3px; margin:0 2px; background:#fff; }
#play article p a:hover { color:#b1e36f; background:#2f5400; }

#cu3er-container {width:900px; margin:20px 0;outline:0; border:2px solid #b1e36f;}

#play p.twitter-post {
	font-size:20px;
	margin-left:142px;
	width:345px;
	height:124px;
	padding:10px;
}

#play p.twitter-post a {
color:#88e70e;
}

#work p.twitter-post {
	font-size:20px;
	margin-left:182px;
	width:345px;
	height:124px;
	padding:10px;
	word-wrap: break-word;
}

#work p.twitter-post a {
color:#0e65e8;
word-wrap: break-word;
}

#play p.twitter-time {
	margin-left:140px;
	width:350px;
	height:40px;
	text-align:right;
	
}

#play p.twitter-time a {
color:#88e70e;
text-decoration:underline;
}

#work p.twitter-time {
	margin-left:180px;
	width:350px;
	height:40px;
	text-align:right;
	color:#fff;
}

#work p.twitter-time a {
color:#fff;
text-decoration:underline;
}
#play p.twitter-time a:hover, #play p.twitter-post a:hover { color:#555; text-decoration:none; }
#work p.twitter-time a:hover, #work p.twitter-post a:hover { color:#555; text-decoration:none; }

#work {
border-radius:0 0 20px 20px;
-moz-border-radius:0 0 20px 20px;
-webkit-border-radius:0 0 20px 20px;
background:#fff url(../images/bg-work.jpg) top left no-repeat;
padding-bottom:30px;
}

#work .workHeader {
margin:210px 0 10px 70px;
padding-top:60px;
}

#work p.first {
	margin:300px 0 30px 0;
}

#work p.first, #work p.main-content {
	text-align:center;
	padding:0 50px 20px;
	font-size:20px;
	line-height:22px;
	color:#5285a3;
	font-family:Helvetica, Arial, sans-serif;
}

#work p.first a, #work p.main-content a { color:#7EACC7; }
#work p.first a:hover, #work p.main-content a:hover { color:#555; }

#work img.strawb {
margin:0 20px;
vertical-align:middle;
}

#contact {
background:url(../images/bg-contact.png) top left no-repeat;
height:1067px;
margin-top:198px;
}

#contact article {
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
background:#d41d1d;
height:422px;
margin-top:-3px;
}

#contact article .theUK
{float: left; padding:50px 100px 10px 100px;}
#contact article p
{padding:30px; font-family:"ComicSerif"; font-size:18px; color:#fff; line-height:24px;}
#contact p a { color:#d41d1d; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:0 2px 0 3px; margin:0 2px; background:#fff; }
#contact p a:hover { color:#d41d1d; background:#000; }
#contact ul#socialites { padding-top:20px; }
#contact #socialites li { display:inline; list-style:none; margin-right:10px; }
#contact #socialites li:first-child { margin-left:40px; }

#links {
color:#fff;
padding-top:745px;
background:url(../images/bg-links.png) top left no-repeat;
}

#links article {
border-radius:0 0 20px 20px;
-moz-border-radius:0 0 20px 20px;
-webkit-border-radius:0 0 20px 20px;
padding:20px 0 30px 40px;
background:#000;
font-size:20px;
}

#links h2 { margin-top:30px;font-size:40px; }
#links h2 b { font-size:40px; }
#twit-col-1, #twit-col-2, #twit-col-3 {
margin:30px 0;
float:left;
width:300px;
list-style:none;
}

#links article ul li { font-size:22px; margin-bottom:8px; }
#links article ul li a.name { color:#fff; padding:5px; margin-left:-4px; }
#links article ul li a.name:hover { color:#000; background:#fff; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
#links article ul li a img { width:38px; border:2px solid #333; vertical-align:middle; }
#links article ul li img.bubble { position:relative; top:2px; left:-15px; }

#contactSection, #linksSection {position:relative; top:-200px;}
footer { text-align:center; padding:30px;}
footer p {padding:10px 0;}
.clear { clear:both; }