@charset "UTF-8";
/* CSS Document */
html {
	height:100%;
}
body {
	margin:0;
	font:62.5% helvetica, arial, sans-serif;
	height:100%;
	overflow:auto;
	background:#000;
}


a{
	text-decoration:none;
	font-weight:bold;
	color:#000;
}
a:hover{
	color:#FFF;
}





#links, #contact,#projects{
	margin:16px 0px;
}





#navigation{
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 64px;
	overflow: hidden;
	margin:0;
	z-index:1;
}
#navigation p{
	position: fixed; 
	z-index:3;
	margin:0;
}

#navigation-flash{
	position:fixed;
	top: 0; 
	left: 0; 
	z-index:2;
}
#sub-navigation{
	position: fixed;
	z-index:5;
	top: 64px; 
	left: 0; 
	width: 100%; 
	height: 32px;
	overflow: hidden;
	background-color:#000;
}



#navigation.work{ background-color:#0FF; }
#navigation.feed{ background-color:#FC0; }
#navigation.links{ background-color:#F0F; }
#navigation.contact{ background-color:#0F0; }
#navigation.projects{ background-color:#CF0; }

#navigation ul{
	position:fixed;
	z-index:4;
	margin:0;padding:0;
	margin-left:96px;
	padding-top:34px;
	padding-bottom:20px;
}
#navigation li{
	display:inline;
	font-size:1.4em;
	margin:0;padding:0;
	margin-right:12px;
	padding-bottom:15px;
}
#navigation li.selected{ background:url(pointer-white.png) no-repeat 50% 19px;}
#navigation li.selected-alt{ background:url(pointer-black.png) no-repeat 50% 19px;}


#sub-navigation ul{
	margin:0;padding:0;
	margin-left:96px;
	padding-top:10px;
}
#sub-navigation li{
	font-weight:normal;
	display:inline;
	font-size:1.2em;
	margin:0;padding:0;
	margin-right:12px;
	padding-bottom:15px;
}
#sub-navigation li a{
	font-weight:normal;
	text-decoration:none;
	color:#fff;
}
#sub-navigation.work, #sub-navigation.work a:hover{ color:#0FF; }
#navigation.feed #sub-navigation li a:hover{ color:#FC0; }
#navigation.links #sub-navigation li a:hover{ color:#F0F; }
#navigation.contact #sub-navigation li a:hover{ color:#0F0; }
#navigation.projects #sub-navigation li a:hover{ color:#CF0; }

#frame{
	/* for remote sites */
	position: fixed; 
	padding-top:64px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	height:100%;
}
#frame2{
	/* for local pages */
	position: absolute;
	margin-top:64px;
	width:100%;
}
#frame.alt{
	top:96px;
}
#frame2.alt{
	margin-top:96px;
}


.header-logo{
float:left;margin-left:32px;margin-top:16px;	
}

p.large,p.medium{
	margin:0;
	border-bottom:1px solid #DDDDDD;
	background-color:#EEEEEE;
}
p.large{
	font-size:2.8em;
	padding:32px;
}
p.medium{
	font-size:2em;
	padding:16px 32px;
}
p.large a{
	color:#0F0;
	text-decoration:none;
	font-weight:normal;
}



/*

WORK ARCHIVE

*/

#work-archive{
	margin:16px 0px;
	/*float:left;
	width:100%;*/
}
/*
#work-archive img{
	float:left;
	margin-bottom:16px;
}
#work-archive a:hover{
	opacity:0.7;	
}
*/
#work-archive ul,
#work-archive ul li {
		/* Setting a common base */
		margin: 0;
		padding: 0;
	}

#work-archive ul { text-align:left; }

#work-archive ul li {
		display: inline-block;
		padding:0;margin:0;
		margin-bottom:16px;
		width:204px;
		height:138px;
		vertical-align:top;
		background:#0FF;

		/* For IE 7 */
		zoom: 1;
		*display: inline;
		
		
}
img.semi{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}







/*

LINKS

*/


#links ul{
	padding:16px 32px;
	margin:0;

	list-style:none;
}
#links ul li{
	font-size:1.6em;
	line-height:1.4em;
}
#links ul li a{
	font-weight:normal;
	color:#F0F;
}
#links ul li a:hover{
	
	color:#FFF;
	
}


ul#main-links{
	margin:0;
	margin-bottom:16px;
	padding:0;
	list-style:none;
	width:100%;
}
ul#main-links li{
	font-size:2em;
	border-bottom:1px solid #666;
	color:#111;
	background-color:#111;
	padding:16px 32px;
}
ul#main-links li p{
	margin:0;
	line-height:1.3em;
	font-weight:normal;
}
ul#main-links li a{
	color:#F0F;
	font-weight:normal;
}
ul#main-links li:hover{
	background-color:#f6F;
}
ul#main-links li.no-hover:hover{
	background-color:#111;
}
ul#main-links li:hover a{
	color:#FFF;
}




/*

CONTACT

*/


#contact ul{
	margin:0;
	padding:0;
	list-style:none;
	width:100%;
}
#contact li{
	font-size:2.4em;
	border-bottom:1px solid #DDDDDD;
	background-color:#EEEEEE;
	padding:16px 32px;
	
}
#contact li p{
	margin:0;
	line-height:1.3em;
	font-weight:normal;
}
#contact li a{
	color:#0F0;
	font-weight:normal;
}
#contact li:hover{
	background-color:#6F6;
}
#contact li.no-hover:hover{
	background-color:#EEEEEE;
}
#contact li:hover a{
	color:#FFF;
}


/*

PROJECTS

*/

#projects ul,
#projects ul li {
		/* Setting a common base */
		margin: 0;
		padding: 0;
	}

#projects ul { text-align:left; }

#projects ul li {
		display: inline-block;
		padding:0;margin:0;
		padding:20px;
		width:280px;
		height:360px;
		vertical-align:top;
		background:#111;

		/* For IE 7 */
		zoom: 1;
		*display: inline;
		
		
}
#projects ul li:hover {
	border-bottom:1px solid #CF0;
}
#projects ul li h2{
	margin:0; padding:0;
	margin-top:20px;
	font-size:2em;
	color:#CF0;
}
#projects ul li p{
	font-size:1.4em;
	line-height:1.3em;
	color:#FFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:normal;
}
#projects a{
	color:#FFF;
}
#projects a:hover{
	color:#CF0;
}

#project{
	max-width:760px;	
	color:#999;
	margin:0px auto;
	padding:0px 32px;
}
#projects h1{
	padding:0;
	margin:32px 0px;
	font-size:3em;
		font-weight:normal;
	color:#CF0;
}
#projects h2{
	padding:0;
	margin:20px 0px;
	font-size:2em;
	font-weight:normal;
	color:#FFF;
}
#project p{
	font-size:1.6em;
	line-height:1.4em;
}

/*
#projects ul{
	margin:0;
	padding:0;
	list-style:none;
	width:100%;
}
#projects li{
	font-size:2.4em;
	border-bottom:1px solid #666;
	background-color:#111;
	padding:16px 32px;
	
}
#projects li p{
	margin:0;
	line-height:1.3em;
	font-weight:normal;
}
#projects li a{
	color:#CF0;
	font-weight:normal;
}
#projects li:hover{
	background-color:#CF0;
}
#projects li.no-hover:hover{
	background-color:#EEEEEE;
}
#projects li:hover a{
	color:#000;
}
*/





#footer{
	margin:64px 0;
	color:#333;
	font-size:1.8em;
	line-height:1.4em;
	width:100%;
	
}
#footer p{
	margin:0 auto;
	margin-bottom:32px;
	width:760px;
}
#footer p .highlight{
	color:#999;
}
#footer a{
	color:#0FF;
	font-weight:normal;
}
#footer a:hover{
	color:#FFF;
}

div.centred{
	width:100%;
	text-align:center;	
}
#breadcrumbs a{
	font-size:1.4em;
	margin-left:32px;
	font-weight:normal;
}