/*   
Name: Kondwani
URI: http://kondwani.com/
Description: The Web Design Portfolio of Martin Kondwani White...
Author: Martin Kondwani White
Designer: Martin Kondwani White
Designer URI: http://kondwani.com/
Version: 2.0
.
BRRRAAAP!
.
*/

/* >>> RESET <<< */
/* ----------------------------------------- */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {margin: 0; padding: 0}
table {border-collapse: collapse; border-spacing: 0}
fieldset, img {border: 0}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal}
ol, ul, li {list-style: none}
caption, th {text-align: left}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal}
q:before, q:after { content:''}
strong {font-variant: small-caps; letter-spacing: 0.05em; color: #600;}
em {font-style: italic}
a img {border: none; outline: none;}
a {outline: none;}



/* >>> BODY <<< */
/* ------------------------------------------ */

html {
	background: #01020a url('images/bg.png');
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	line-height: 1.5em;
	margin: 0 auto;
	position: relative;
	width: 960px; 
}

/* >>> HEADER <<< */
/* ------------------------------------------ */

#header {
	background: #0c1b27 url('images/header.png') no-repeat;
	border-left: 1px solid #2f718b;
	border-right: 1px solid #2f718b;
	height: 175px;
	width: 960px; 
}


#header h1 {
	background: url('images/h1.png') no-repeat;
	height: 103px;
	left: 67px;
	position: absolute;
	text-indent: -9999px;
	top: 50px;
	width: 286px; 
}

#header p {
	text-indent: -9999px;
}

/* >>> MAIN NAVIGATION <<< */
/* ------------------------------------------ */

ul#nav-main {
	background: transparent;
	height: 20px;
	left: 487px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 52px;
	width: 300px;
}

ul#nav-main li {
	display: -moz-inline-box;
	display: inline-block;
	margin: 0;
	padding: 0;
}

ul#nav-main li.about a {
	background: transparent url(images/nav-about.png) no-repeat;
	display: block;
	height: 22px;
	outline: none;
	text-decoration: none;
	text-indent: -9999px;
	width: 63px;
}

ul#nav-main li.about a:link {
	color: #9c9;
}

ul#nav-main li.about a:visited {
	color: #9c9;
}

ul#nav-main li.about a:hover {
	background: transparent url(images/nav-about.png) no-repeat;
	background-position: 0 -22px;
	border-bottom: none;
}

ul#nav-main li.about a:active {
	border: none;
	color: #cfc;
}

ul#nav-main li.contact a {
	background: transparent url(images/nav-contact.png) no-repeat;
	display: block;
	height: 22px;
	margin: 0 0 0 116px;
	outline: none;
	text-decoration: none;
	text-indent: -9999px;
	width: 83px;
}

ul#nav-main li.contact a:link {
	color: #9c9;
}

ul#nav-main li.contact a:visited {
	color: #9c9;
}

ul#nav-main li.contact a:hover {
		background: transparent url(images/nav-contact.png) no-repeat;
		background-position: 0 -22px;
		border-bottom: none;
}

ul#nav-main li.contact a:active {
	border: none;
	color: #cfc;
}

/* >>> TYPOGRAPHY <<< */
/* ------------------------------------------ */

p {
	color: #ccc;
	font-family: "Verdana", sans-serif;
	font-size: 1.4em;
	letter-spacing: .01em;
	line-height: 1.5em;
	margin: 0;
	max-width: 480px;
	padding: 10px;
	text-align: left;
	text-shadow: 2px 2px 2px #000;
}

p a {
	color: #9c9;
	text-decoration: none
}

p a:hover {
	color: #cfc;
	text-decoration: underline
}

p.contactthanks {
	color: #ccc;
	font-family: "Verdana", sans-serif;
	font-size: 1.4em;
	letter-spacing: .01em;
	line-height: 1.5em;
	margin: 40px 0 0 36px;
	max-width: 480px;
	padding: 10px;
	text-align: left;
	text-shadow: 2px 2px 2px #000;
}

p.contactthanks a {
	color: #9c9;
	text-decoration: none
}

p.contactthanks a:hover {
	color: #cfc;
	text-decoration: underline
}

/* >>> PORTFOLIO LAYOUT <<< */
/* ------------------------------------------ */

#content-portfolio {
	background: #01090f;
	border-right: 1px solid #2f718b;
	border-left: 1px solid #2f718b;
	padding-bottom: 1px;
	width: 960px;	
}

.portfolio-entry-drapetomania {
	background: #09151a url('images/bg-html.png');
	border-top: 1px solid #114a61;
	border-bottom: 1px solid #114a61;
	height: 100px;
	margin: 0 0 942px 0;
	position: relative;
	width: 960px;
}

.portfolio-entry-geraldbar {
	background: #09151a url('images/bg-html.png');
	border-top: 1px solid #114a61;
	border-bottom: 1px solid #114a61;
	height: 100px;
	margin: 0 0 1227px 0;
	position: relative;
	width: 960px;
}

.portfolio-entry-landegwhite {
	background: #09151a url('images/bg-html.png');
	border-top: 1px solid #114a61;
	border-bottom: 1px solid #114a61;
	height: 100px;
	margin: 0 0 1304px 0;
	position: relative;
	width: 960px;
}

h2.portfolio {
	color: #fff;
	font-family: Gotham, Verdana, sans-serif;
	font-size: 3em;
	font-weight: 100;
	left: 68px;
	letter-spacing: -.01em;
	text-shadow: 2px 2px 2px #000;
	top: 42px;
	position: absolute;
}

.project-info-brief {
	background: transparent url(images/bracket-left.png) no-repeat;
	left: 379px;
	position: absolute;
	top: 15px;
}

.project-info-brief li {
	color: #66accc;
	font-family: Verdana, "Gill Sans", sans-serif;
	font-size: 1.2em;
	letter-spacing: .01em;
	list-style-type: none;
	margin: 6px 0 7px 30px;
	text-align: right;
	text-shadow: 2px 2px 2px #000;
}

.project-info-build {
	background: transparent url(images/bracket-right.png) no-repeat 100% 0;
	left: 460px;
	padding-right: 40px;
	position: absolute;
	top: 15px;
}

.project-info-build li {
	color: #fff;
	font-family: Verdana, "Gill Sans", sans-serif;
	font-size: 1.2em;
	letter-spacing: .01em;
	list-style-type: none;
	margin: 6px 0 7px 30px;
	text-align: left;
	text-shadow: 2px 2px 2px #000;
}

.project-info-build li a {
	color: #9c9;
	font-size: 93%;
	letter-spacing: 0.04em;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.project-info-build li a:link {
	color: #9c9;
}

.project-info-build li a:visited {
	color: #9c9;
}

.project-info-build li a:hover {
	border-bottom: 1px solid #363;
	color: #cfc;
}

.project-info-build li a:active {
	border: none;
	color: #cfc;
}

.portfolio-image-drapetomania {
	background: #01090f;
	left: 70px;
	position: absolute;
	top: 101px;
	width: 820px;
}

.portfolio-image-drapetomania img {
	border: 1px solid #032837;
	margin: 70px 0 0 0;
	padding: 0;
}

.portfolio-image-geraldbar {
	background: #01090f;	
	left: 70px;
	position: absolute;
	top: 101px;
	width: 820px;
}

.portfolio-image-geraldbar img {
	border: 1px solid #032837;
	margin: 70px 0 0 0;
	padding: 0;
}

.portfolio-image-landegwhite {
	background: #01090f;	
	left: 70px;
	position: absolute;
	top: 101px;
	width: 820px;
}

.portfolio-image-landegwhite img {
	border: 1px solid #032837;
	margin: 70px 0 0 0;
	padding: 0;
}

#content-sup {
	background: url('images/content-sup-bg.jpg') no-repeat;
	border-top: 1px solid #032837;
	border-right: 1px solid #2f718b;
	border-left: 1px solid #2f718b;
	height: 700px;
	margin: 0;
	width: 960px;
}

#about-me {
	float: right;
	margin: 60px 60px 50px 0;
	width: 420px
}

h2.about-me {
	background: url('images/h2-about.png') no-repeat;
	height: 25px;
	margin: 0 0 20px 9px;
	text-indent: -9999px;
	width: 157px;
}

h3.myresume a {
	background: transparent url(images/h3-resume.png) no-repeat;
	display: block;
	height: 36px;
	margin: 43px 0 0 1px;
	outline: none;
	text-decoration: none;
	text-indent: -9999px;
	width: 206px;
}

h3.myresume a:link {
	color: #9c9;
}

h3.myresume a:visited {
	color: #9c9;
}

h3.myresume a:hover {
	background: transparent url(images/h3-resume.png) no-repeat;
	background-position: 0 -36px;
	border-bottom: none;
}

#contact-form {
	float: left;
	margin: 60px 0 0 33px;
}

h2.contact {
	background: url('images/h2-contact.png') no-repeat;
	height: 24px;
	margin-left: 36px;
	text-indent: -9999px;
	width: 188px;
}

h2.contactthanks {
	color: #fff;
	font-family: Gotham, Verdana, sans-serif;
	font-size: 2.6em;
	font-weight: 100;
	letter-spacing: -.01em;
	margin: 40px 0 0 36px;
	text-shadow: 2px 2px 2px #000;
}

#form {
	background: #081219;
}

#form fieldset {
	background: transparent;
	float: left;
	display: inline;
	margin: 10px 0 0 25px;
	width: 270px;
}	
	
#form legend { display: none; }	

#form p { margin: .5em 0; }	

#form label { 
	color: #9c9;
	display: block; 
	font-family: Gotham, Verdana, sans-serif; 
	font-size: 90%; 
	text-transform: uppercase; 
}	

#form input, #form textarea {	
	background: #01020a url('images/bg-html.png');
	color: #fff;
	font-size: 110%; 	
	width: 265px;
	border: 1px solid #2f718b;
	-webkit-border-radius: .3em;
	-moz-border-radius: .3em;
	border-radius: .3em;
	padding: 7px;
}	
	
#form textarea {
	font-family: Gotham, Verdana, sans-serif;
	font-size: 110%;
	height: 125px; 
	overflow: auto;
}	
				
#form p.submit {
	clear: both;
	padding: 20px 32px 20px 25px;
	margin: 0;
	text-align: right;	
}	

#form button {
	background: url(images/button-send.png) no-repeat 0 0;
	border: none;
	cursor: pointer;
	height: 37px;
	line-height: 37px;		
	text-indent: -9999px;
	width: 164px;
}				


#footer {
	background: #070811 url('images/bg-html.png');
	border-top: 1px solid #114a61;
	border-right: 1px solid #2f718b;
	border-left: 1px solid #2f718b;
	clear: both;
	height: 100px;
	width: 960px
}


	a.back_to_top {
		background: transparent url(images/back_to_top.png) no-repeat 0px 0px;
		display: block;
		height: 118px;
		margin: -46px auto 0 auto;
		overflow: hidden;
		text-indent: -9999px;
		width: 177px;
		z-index: 100;
	}
	
	a.back_to_top:hover {
		background: transparent url(images/back_to_top.png) no-repeat 0px -120px;
		display: block;
		height: 118px;
		margin: -46px auto 0 auto;
		overflow: hidden;
		width: 177px;
		z-index: 100;
	}
	
	a.back_to_top:active {
		outline: none;
		-moz-outline-style: none;
	}
	
	a.back_to_top:focus {
		outline: none;
		-moz-outline-style: none;
	}