/*----------------------------------------------------------------------
	1. CSS RESET
---------------------------------------------------------------------- */

/* @import url(reset.css); */

/*----------------------------------------------------------------------
	2 BODY
---------------------------------------------------------------------- */

html, body {
	background-color: #000000;
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
	outline: none;
}

img {
	border-style: none;
	outline: none;
}

/*----------------------------------------------------------------------
	3. TOP NAVIGATION
---------------------------------------------------------------------- */

#navigation {
	background-color: #000000;
	border-bottom: 1px solid #666666;
	margin: 0px;
	width: 100%;
	height: 35px;
}

#menu {
	margin: 0px 0px 0px 10px;
	padding: 0px;
	height: 35px;
	position: absolute;
	left: 0px;
	overflow: hidden;
}

#menu li {
	display: inline;
}

#menu li a {
	background: url(../images/navigation.gif) no-repeat;
	text-indent: -9999px;
	width: 210px;
	height: 35px;
	display: block;
	float: left;
}

#menu li#home  a{
	background-position: 0px 0px;
}

#menu li#home a:hover, #menu li#home a.hover {
	background-position: 0px -35px;
}

#contact {
	margin: 0px 10px 0px 0px;
	padding: 0px;
	height: 35px;
	position: absolute;
	right: 0px;
	overflow: hidden;
}

#contact li {
	display: inline;
}

#contact li a {
	background: url(../images/navigation.gif) no-repeat;
	text-indent: -9999px;
	width: 200px;
	height: 35px;
	display: block;
	float: right;
}

#contact li#linkedin a {
	width: 25px;
	background-position: -260px 0px;
}

#contact li#linkedin a:hover, #contact li#linkedin a.hover {
	background-position: -260px -35px;
}

#contact li#email a {
	margin: 0px 10px 0px 0px;
	width: 30px;
	background-position: -220px 0px;
}

#contact li#email a:hover, #contact li#email a.hover {
	background-position: -220px -35px;
}

/*----------------------------------------------------------------------
	4. HEADER
---------------------------------------------------------------------- */

#header {
	background: url(../images/header-bg.jpg) no-repeat;
	width: 100%;
	height: 500px;
}

#title {
	text-align: center;
	margin: 0px auto 0px -480px;
	width: 960px;
	position: absolute;
	top: 85px;
	left: 50%;
}

/*----------------------------------------------------------------------
	5. CONTENT
---------------------------------------------------------------------- */

#wrapper {
	margin: 0px auto 0px -480px;
	width: 960px;
	height: 300px;
	position: relative;
	top: 110px;
	left: 50%;
}

.portfolioHeader {
	margin: 0px 10px 20px 10px;
	width: 460px;
	height: 30px;
	position: relative;
	float: left;
}

.portfolioContainer {
	background-color: #191919;
	border-color: #2a2a2a;
	border-style: solid;
	border-width: 0 1px 1px 0;
	margin: 0px 10px 0px 10px;
	padding: 5px 5px 0px 5px;
	width: 209px;
	height: 195px;
	position: relative;
	float: left;
}

.portfolioContainer h3 {
	color: #b3b3b3;
	text-transform: uppercase;
	font: bold 11px century gothic;
	margin: 7px 0px 0px 1px;
}

.portfolioContainer h4 {
	color: #ffffff;
	font: italic 10px arial, helvetica, sans-serif;
	margin: 3px 0px 0px 1px;
}

.portfolioContainer a.external {
	color: #b3b3b3;
	text-decoration: none;
	outline: none;
	background: url(../images/external.png) no-repeat scroll right 2px transparent;
	padding:0 15px 0 0;
}

.portfolioContainer a:hover, .portfolioContainer a.hover {
	color: #636363;
	background-position: right -17px;
}

.imageContainer {
	border: 1px solid #2a2a2a;
	padding: 2px;
	width: 203px;
	height: 110px;
	position: relative;
	float: left;
}