/*
Theme Name: Pentascape
Theme URI: http://pentascape.com/
Description:  Pentascape Portfolio version 4 (2008)
Version: 4.0
Author: Chris Willmott BSc
Author URI: http://pentascape.com/
Tags: 
*/

/* Global Styles ********************/
html {
	overflow-y:scroll; /* Force vertical scrolling in non IE browsers, stops page bouncing about */
}
body {
	margin:0;
	background-image:url('../_img/bg/bg.gif');
	font:12px Verdana,Geneva,Arial,Helvetica,sans-serif;
}
img {
	border:none;
}
h1 {
	display:none;
}
h2 {
	margin:0px; padding:5px; float:left; display:inline;
	font:bold 14px "Trebuchet MS",sans-serif;
}
#content h2 a {
	border:none;
}
p {
	text-align:justify;
	margin-top:0px;
}
a {
	text-decoration:none;
}
.cb {
	clear:both;
}
.warning {
	margin:30px 39px 0 39px; padding:10px 10px 10px 35px;
	border:1px solid #f60;
	background:url('../_img/bg/error.png') 10px 10px no-repeat #ffeedd;
}
.warning strong {
	color:#f60;
}
.error {
	margin:30px 39px 0 39px; padding:10px 10px 10px 35px;
	border:1px solid #f00;
	background:url('../_img/bg/exclamation.png') 10px 10px no-repeat #ffeedd;
}
.error strong {
	color:#f00;
}

/* Section Colours ********************/
.film h2, .film a {
	color:#039;
}
.audio h2, .audio a {
	color:#930;
}
.live h2, .live a {
	color:#306;
}
.web h2, .web a {
	color:#060;
}
.research h2, .research a {
	color:#903;
}

/* Structure ********************/
#page {
	background-color:#ccc;
}
#surface {
	width:798px; margin:0 auto 0 auto;
	background-image:url('../_img/bg/surface-bg.gif');
}

/* Header ********************/
#header {
	width:780px; height:90px; margin:0 9px 0 9px;
	background-image:url('../_img/bg/header-bg.gif'); 
}
	img#p {
		margin:17px 30px;
	}
	img#h0 {
		margin:15px 0;
	}
	
/* Navigation ********************/
#nav {
	width:780px; height:37px; margin:0 9px 0 9px;
	background-image:url('../_img/bg/nav-bg.gif');
}
	#navLeft {
		width:10px; height:37px; float:left;
		background-image:url('../_img/bg/nav-bg-left.gif');
	}
	#navRight {
		width:10px; height:37px; float:right;
		background-image:url('../_img/bg/nav-bg-right.gif');
	}
	#nav ul {
		margin:0px; padding:0px; float:left;
	}
		#nav ul li {
			float:left; margin:13px 0 0 20px;
			list-style-type:none;
		}
			#nav ul li img {
				width:128px; height:14px;
			}
#tabs {
	width:780px; height:7px; margin:0 9px 0 9px;
	background-image:url('../_img/bg/tabs-bg.gif');
}
	#tabsLeft {
		width:10px; height:7px; float:left;
		background-image:url('../_img/bg/tabs-bg-left.gif');
	}
	#portfolio {
		width:128px; height:7px; margin-left:20px; float:left;
		background-color:#fff;
	}
	#skillset {
		width:128px; height:7px; margin-left:168px; float:left;
		background-color:#fff;
	}
	#contact {
		width:128px; height:7px; margin-left:316px; float:left;
		background-color:#fff;
	}
	#tabsRight {
		width:10px; height:7px; float:right;
		background-image:url('../_img/bg/tabs-bg-right.gif');
	}
#subnav {
	margin:10px 0 0 19px; padding:0px;
}
	#subnav li {
		float:left; height:27px; margin:0 0 0 20px;
		list-style-type:none;
	}
#splash {
	margin:0 9px;
}

/* Content ********************/
#content p a, #ankle a {
	border-bottom:1px dotted;
}
#content {
	margin:30px 39px;
}
#paneWrap {
	margin:0 9px; 
	background:url('../_img/bg/pane-bg-mc.gif');
}

#paneWrap, #paneWrap div {
	height:624px;
}

#paneWrap>div{
	background:url('../_img/bg/pane-bg-tc.gif') repeat-x;
}
#paneWrap>div>div{
	background:url('../_img/bg/pane-bg-bc.gif')0 100% repeat-x;
}
#paneWrap>div>div>div{
	background:url('../_img/bg/pane-bg-ml.gif') repeat-y;
}
#paneWrap>div>div>div>div{
	background:url('../_img/bg/pane-bg-mr.gif') 100% 0 repeat-y;
}
#paneWrap>div>div>div>div>div{
	background:url('../_img/bg/pane-bg-br.gif') 100% 100% no-repeat;
}
#paneWrap>div>div>div>div>div>div{
	background:url('../_img/bg/pane-bg-tl.gif') no-repeat;
}
#paneWrap>div>div>div>div>div>div>div{
	background:url('../_img/bg/pane-bg-bl.gif') 0 100% no-repeat;
}
#paneWrap>div>div>div>div>div>div>div>div{
	background:url('../_img/bg/pane-bg-tr.gif') 100% 0 no-repeat;
	padding:12px;
}
.pane {
	margin:6px 6px;
	float:left;
	
	background:url('../_img/bg/pane-bg-tc.gif') 0 100% repeat-x; /*bc*/
}
#paneWrap .pane, #paneWrap .pane div {
	width:366px; height:291px;
}
.pane>div{
	background:url('../_img/bg/pane-bg-bc.gif') repeat-x; /*tc*/
}
.pane>div>div{
	background:url('../_img/bg/pane-bg-ml.gif') 100% 0 repeat-y; /*mr*/
}
.pane>div>div>div{
	background:url('../_img/bg/pane-bg-mr.gif') repeat-y; /*ml*/
}
.pane>div>div>div>div{
	background:url('../_img/bg/pane-bl.gif') 0 100% no-repeat; /*bl*/
}
.pane>div>div>div>div>div{
	background:url('../_img/bg/pane-tl.gif') no-repeat; /*tl*/
}
.pane>div>div>div>div>div>div{
	background:url('../_img/bg/pane-br.gif') 100% 100% no-repeat; /*br*/
}
.pane>div>div>div>div>div>div>div{
	background:url('../_img/bg/pane-tr.gif') 100% 0 no-repeat; /*tr*/
	
}
#paneWrap .pane>div>div>div>div>div>div>div>div{
	background:url('../_img/bg/pane-bg.gif');
	width:342px; height:267px;
	position:relative;
	top:12px;
	left:12px;
	cursor:pointer;
}
.pane img {
	margin:20px 42px 10px 42px;
	border:1px solid #fff;
}
.pane img+img {
	margin:0px 42px;
	border:none;
}

#paneWrap .pane #browse {
	border:1px solid #fff;
	width:255px; height:192px;
	position:relative;
	top:20px; left:42px;
}
#browse img {
	border:none;
	margin:0px;
}
#browse+img {
	border:none;
	margin:32px 42px 0 42px;
}

.head {
	background:#ccc; height:30px;
}
.head span {
	float:right;
	margin:7px;
}
div.head + div {
	height:0px; width:0px; margin-left:30px;
	background:#ccc;
	border-top:10px solid #ccc; border-left:10px solid #fff; border-right:10px solid #fff;
}
div.artefact {
	width:424px; margin-bottom:10px; float:left;
}

div.text {
	width:276px; margin-bottom:10px; float:right;
}
div.more {
	/* The contents of more information */
	clear:both;
	border-top:1px dotted #ccc;
	position:relative;
}
#content div.more p a {
	border:none;
}
#content div.more img {
	margin-right:20px;
}
div.more>div {
	padding-top:10px;
	position:relative;
}
div.down, div.up {
	width:0px; height:0px; margin:5px;
	border-right:5px solid #fff; border-left:5px solid #fff; 
}
div.down {
	border-top:5px solid #333; 
}
div.up {
	border-bottom:5px solid #333; 
}
div.expand {
	/* Action div which shows/hides div.more */
	clear:both;
	margin:10px 0 40px 0;
	border-top:1px dotted #ccc;
	text-align:right; font-weight:bold;
}
div.expand * {
	float:right;
}

div.noexpand {
	clear:both;
	margin:10px 0;
}
div.col {
	/* For two colum text layout on standard pages */
	width:342px;
	float:left;
}
div.col+div.col {
	margin-left:36px;
}
.uk-screen {
	margin:10px 0 0 0; padding:10px 10px 10px 35px;
	border:1px solid #F1D802;
	background:url('../_img/bg/uk-screen.gif') 10px 10px no-repeat #fcf6c0;
}
.uk-screen strong {
	color:#F1D802;
}
.linked-in {
	margin:10px 0 0 0; padding:10px 10px 10px 35px;
	border:1px solid #069;
	background:url('../_img/bg/linked-in.gif') 10px 10px no-repeat #c0d9e6;
}
.linked-in strong {
	color:#069;
}

/*** FORM ***/
form
 { margin:10px 0 0 0; }
form, label, span
 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; }
fieldset
 { border:none; padding:0; margin:4px 0; }
label
 { height:12px; width:120px; float:left; background-color:#CCCCCC; padding:5px; margin:0 10px 0 0; }
input
 { float:left; }
input.t, textarea
 { width:250px; }
input.s
 { margin:0 0 0 140px; }
textarea
 { overflow:auto; height:100px; }
#address
 { display:none; }
#commentform label
 { width:250px; }


/* Ankle ********************/

#ankle {
	margin:0 39px; padding:10px 0; display:block; text-align:right; clear:both;
}

/* Footer ********************/
#foot {
	background-image:url('../_img/bg/bg-fringe.gif'); background-repeat:repeat-x;
	color:#fff;
	font-size:11px;
	position:relative;
}
	#foot table {
		margin:0 20px 20px 20px; position:relative; top:20px;
		background-color:#666; border:1px solid #999;
		-moz-border-radius:5px; 
	}
	#foot a {
			color:#fff; text-decoration:none;
		}
		#brc td {
			border-bottom:1px solid #999; height:27px;
		}
			#brc span {
				margin-top:7px; float:left; 
			}
			#brc img {
				margin:5px; float:left;
			}
			#brc div { /* Footer min-width */
				width:774px; height:0px; clear:both;
			}
			
			#info a {
				border-bottom:1px dotted #fff;
			}
			#info td {
				width:50%; padding:5px; vertical-align:top;
			}
			#info td:first-child {
				border-right:1px solid #999;
			}
			#info form {
				margin-top:10px;
			}

/* Print Styles ********************/
@media print {
  #header {
		background-image:url('../_img/bg/header-bg.gif')!important; 
	}
	#p {
		background:#000;
	}
}