@charset "UTF-8";
/* Primary Divs */

body {
	background-color:#EEE;
	font-family: Helvetica, Arial, Sans-serif;
	font-weight:bold;
	font-size:14px;
	padding: 0;
	margin: 0;
	}

#wrapper {
	width: 666px;
	margin: auto;
}

#nav {
	width: 163px;
	height: 335px;
	position:fixed;
	margin-left: 684px;
	margin-top:100px;
}

#images {
	width: 686px;
	position:relative;
	left: 0;
	margin: 0;
	padding:0;
	display: inline-block;
}

#images li {
	list-style:none;
}

#images img {
	padding: 0;
	margin: 5px 0 10px 0;
	border:0;
}

#header {
	width: 140px;
	position: fixed;
	margin-top: 270px;
	margin-left:688px;
	color: #666;
}

#header p {
	margin:0;
	margin-bottom: 10px;
	padding:0;
	font-weight: normal;
	font-size:11px;
	font-family: Lucida Grande, Verdana, Arial, Sans-serif;
}

#header a {
	font-weight: bold;
	color:#666;
}

#header a:hover {
	color: #0FC;
}

#twitter {
	width: 200px;
	position:fixed;
	margin-top: 100px;
	margin-left: -60px;
	z-index: 10;
}

/* MAIN NAVIGATION HOVERLINKS */
.navhover {
	width: 140px;
	height: 24px;
	position: relative;
	left: -40px;
	z-index:10;
	background-repeat:no-repeat;
}

.navhover:hover {
	background-position: 0 -24px;
}

#activeportfoliolink {
	background-image:url(../img/assets/portfolio_a.png);
}

#activeaboutlink {
	background-image:url(../img/assets/about_a.png);
}

#portfoliolink {
	background-image:url(../img/assets/portfolio.png);
}

#aboutlink {
	background-image:url(../img/assets/about.png);
}

#twitterlink {
	background-image:url(../img/assets/twitter.png);
	width: 78px;
	height: 78px;
	position:relative;
	left: -10px;
}

#twitterlink:hover {
	background-position: 0 -78px;
}


a {
	text-decoration: none;
}

h1 {
	font-size:20px;
}

#graycard {
	background:url(../img/assets/contactcard.png);
	}

.thumbnail {
	width: 211px;
	height: 132px;
	display:inline-block;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color:#999;
}

.thumbnail:hover {
	/* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
}

#chrononaut {
	background-image:url(../img/projects/chrononaut-thumb.jpg);
}

#coldplay {
	background-image:url(../img/projects/coldplay-thumb.jpg);
}

#equilateral {
	background-image:url(../img/projects/equilateral-thumb.jpg);
}

#fifth {
	background-image:url(../img/projects/fifth-thumb.jpg);
}

#flat {
	background-image:url(../img/projects/flat-thumb.jpg);
}

#fourth {
	background-image:url(../img/projects/fourth-thumb.jpg);
}

#garp {
	background-image:url(../img/projects/garp-thumb.jpg);
}

#gradball {
	background-image:url(../img/projects/gradball-thumb.jpg);
}

#hellotype {
	background-image:url(../img/projects/hellotype-thumb.jpg);
}

#joanna {
	background-image:url(../img/projects/joanna-thumb.jpg);
}

#third {
	background-image:url(../img/projects/third-thumb.jpg);
}

#eco {
	background-image:url(../img/projects/eco-thumb.jpg);
}

#dave {
	background-image:url(../img/projects/dave-thumb.jpg);
}

#catalogue {
	background-image:url(../img/projects/catalogue-thumb.jpg);
}

#banks {
	background-image:url(../img/projects/banks-thumb.jpg);
}


.portfoliohover {
	width: 666px;
	height: 444px;
	margin-top:5px;
	margin-bottom:10px;
}

.portfoliohover:hover {
	background-position: 0 -444px;
}

#cataloguehover {
	background-image:url(../img/projects/catalogue-03.jpg);
}

#chrononauthover {
	background-image:url(../img/projects/chrononaut-03.jpg);
}

.webscreen {
	width:840px;
	position:relative;
	left: -85px;
}