/*************************************************
 *  Page structure
 */

html {
	margin: 0;
	padding: 0;
	background: #323031;
}

body {
	text-align: center;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	color: #323031;
	background: #f1f3ec url(/images/header-gradient.png) repeat-x top left;	
	}

#canvas {
	display: block;
	clear: both;
	color: #323031;
	background: transparent url(/images/body-bg.jpg) no-repeat top center;
	}

#header, 
#content,
#header #statement .statement-canvas,
#footer-canvas   {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	}

#content {
	background: transparent;
	padding-top: 100px;
	}

#footer {
	display: block;
	clear: both;
	}

.section {padding-top: 2em;}


/*************************************************
 *  Header
 */
#header {
	background: transparent;
	height: 290px;
	}

#header h1 {
	display: none;
	}

#header a.logo {
	position: relative;
	top: 50px;
	left: -22px;
	z-index: 1000;
	margin: 0;
	padding: 0;
	}

#header a.logo img {
	margin: 0;
	padding: 0;
	}

#header h2 {
	display: none;
}

#header #statement {
	text-align: justified;
	font-size: 1.6em;
	padding: 1em 0 0 0;
	position: absolute;
	top: 150px;
	left: 0;
	background: transparent url(/images/header-statement-gradient.png) repeat-x top center;
	width: 100%;
	z-index: 0;
}

#header .statement-wrapper {
	padding: 0 0 1em 0;
	background: transparent url(/images/header-statement-gradient-bottom.png) repeat-x bottom center;
	}

#header #statement p {
	width: 450px;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	text-align: justify;
}

#header #header-stuff {
	width: 960px;
	text-align: right;
	position: absolute;
	top: 0;
	z-index: 999;
	float: right;
	}
#header #header-stuff img{ 
	margin-top: -30px;
}


/*************************************************
 *  Links
 */
a {color: #999}
a:hover {color: #4989d3}
#footer a:hover {color: #e2e6e2}
a img {border:none}


/*************************************************
 *  Recent
 */
#portfolio {	
	overflow: hidden;
	margin: 0 auto;
	width: 960px;
	position: relative;
	font-size: 100%;
}

#scroller {
	height:240px; 
	overflow: hidden;
	margin: 0 50px;
	}

#recent ul {
	margin: 0;
	padding: 0;
	width: 99999px;
	list-style-type: none;
	height:240px; 
	}

#recent ul li { 
	display: inline; 
	width: 240px;
	float:left;	
	margin: 0 37px 50px 37px;
	margin: 0 22px 50px 22px;
	}

#recent ul li img { 
	height: 128px;
	width: 240px;
	border: 1px solid #eee;
	}

#recent a {text-decoration: none;}
#recent h3 {font-weight: normal;}

#recent div.button {
	position: absolute;
	top: 30%;
	}
	
#recent div.button#left { left: 0; }
#recent div.button#right { right: 0; }


/*************************************************
 *  Form 
 */
input, textarea {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 1.6em;
	border: none;
	background: #f1f3ec;
	margin: .5em 0 0 0;
	}

label {
	display: block;	
	}


/*************************************************
 *  Scrolly pictures
 */
.pic {
	position: absolute;
	clear: none;
	top: -400px;
	right: 0;
	margin: 0;
	padding: 0;
}


/*************************************************
 *  Footer
 */
#footer {
	width: 100%;
	background: #323031;
	margin: 0 auto;
	text-align: center;
	color: #f1f3ec;
	font-size: 1.6em;
	font-weight: bold;
	padding: 2em 0 0 0;
	}

#footer h2 {
	font-size: 100%;
	padding-bottom: 1em;
	}

#footer h3 {
	display: none;
	}

#footer span.label {
	color: #c8d0d3;
	width: 4em;
	display: inline-block;
	clear: none;
	}

#footer a {
	text-decoration: none;
	color: #f1f3ec;
	}

#footer .copy {
	font-size: .625em;
	font-weight: normal;
	clear: both;
	padding: 4em 0 0 0;
	}


/*************************************************
 *  Social Icons
 */
#social-icons {
	padding: 0;
	margin: 0;
}

#social {
	padding: 3em 0 .5em 0;
	float: right;
	display: block;
	clear: both;
}

#social h3 {
	display: none;
}

#social-icons li {
	width: 32px;
	height: 32px;
	margin: 0;
	display: inline;
	float: left;
	padding: 0 5px;
}

#social-icons li.facebook {
	padding: 0 5px 0 0;
}

#social-icons li a {
	position: relative;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	width: 32px;
	height: 32px;
	background: transparent url(/images/social.png) no-repeat;
	}

#msisdn {
width: 400px;
}

#social-icons li.facebook a:hover {background-position: 0px 0;}
#social-icons li.linkedin a:hover {background-position: -96px 0}
#social-icons li.delicious a:hover {background-position: -32px  0}
#social-icons li.last-fm  a:hover {background-position: -64px 0}

#social-icons li.facebook a {background-position: 0px -32px;}
#social-icons li.linkedin a {background-position: -96px -32px;}
#social-icons li.delicious a {background-position: -32px -32px;}
#social-icons li.last-fm  a {background-position: -64px -32px;}




/*************************************************
 *  Contact
 */
#contact,
#contact-card {
	display: block;
	float: left;
	width: 450px;
	}

#contact .vcard {
	text-transform: lowercase;
	padding: 0 0 0 150px;
	background: url(/images/Crystal_Clear_mimetype_vcard.png) no-repeat 0 -17px;
	}

#footer input {
	width: 8em;
	}

#contact-card {
	float: right;
	}

#contact-card p.error,
#contact-card p.success {
	margin-top: -10px;
	padding: 10px 0 10px 35px;
	}

#contact-card p.success {
	background: url(/images/success.png) no-repeat left center;
	}

#contact-card p.error {
	background: url(/images/error.png) no-repeat left center;
	}

#contact-card form {
	margin: 0;
	min-height: 128px;
	padding: 0 0 0 85px;
	background: url(/images/sms.png) no-repeat -34px 0;
	}

#header a.contact-me {
	position: relative;
	top: 240px;
	z-index: 1000;
	margin: 0;
	padding: 0;
	width: 142px;
	height:  37px;
	text-indent: -1000em;
	display: block;
	background: url(/images/button.png) no-repeat 0 0;
	}

#header a.contact-me:hover {
	background: url(/images/button-on.png) no-repeat 0 0;
	}

input#send-sms {
	padding: 0;
	background: transparent url(/images/button-send.png) no-repeat 0 0;
	width:81px;
	height:38px;
	color: transparent;
	cursor: pointer;
	}

#send-sms:hover {
	background: transparent url(/images/button-send-on.png) no-repeat 0 0;
	}

input#msisdn {
	width:278px;
	}

/*************************************************
 *  What I do
 */
#skills ul {
	font-size: 1.6em;
	}


.skillset {
	float: left;
	width: 50%;
	}

.skillset.last {
	float: right;
	width: 40%;
	}

.skillset ul{
	list-style-type:none;
	text-indent: 0;
	padding: 0;
	}

.skillset li {
	background: url(/images/list-icon.png) no-repeat 0px 50%;
	padding-left: 30px;
	line-height: 2em;
	border: 0px solid black;
	}

/*************************************************
 *  Headers
 */
h2 {font-size: 1.8em}
h3 {font-size: 1.6em}