/* -- Position -------------------------------------------------------------- */

.header,
.nav
{
position:absolute;
left:3em;
}

.header
{
top:1em;
}

.nav
{
top:6em;
}

.content
{
margin: 0em 0 0 17em;
width:55em;
}

.content .text
{
margin-top:10em;
}
.content .section-img {
margin-top:10.5em;
}
.film .work,
.content .toppad {
padding-top: 10em;
}

.lhs, .rhs
{
width:25em;
position: relative;
float:left;
}

.lhs {
margin-right: 3em;
}

.page-info
{
position: absolute;
top:0.8em;
left:45em;
width:24em;
}

.download{
position:absolute;
left:4em;
top:32.5em;
}

.footer{
color: #555;
margin:0em 0 0 14em;
width:60em;
letter-spacing: 1px;
padding-top: 2em;
}


/* -- boxes -------------------------------------------------------------- */
.box,
.nav
{
border-radius:.63em;
-o-border-radius:.63em;
-icab-border-radius:.63em;
-khtml-border-radius:.63em;
-moz-border-radius:.63em;
-webkit-border-radius:.63em;

border:1px solid #666666;
padding:0.63em 0.38em;
padding:0.8em 1em;
}

/* -- fonts -------------------------------------------------------------- */
html,body
{
background-color: ffffff;
font-family:"Bell MT", Georgia, serif;
}

body
{
font-size: 16px;
}

a
{
color: inherit;
}

.content a
{
color: #611;
}

a:hover
{
background-color: #eff;
}

h2
{
margin-bottom: 1em;
font-weight: normal;
}

p
{
font-size: 0.8em;
margin-bottom: 1em;
}



.title {
font-weight: bold;
}

.logo
{
display: block;
width:400px;
height:46px;
background: url(../img/logo.png) no-repeat 0 0;
}


.nav
{
width:9em;
padding:.6em;
letter-spacing: 2px;
color: #333333;
}

.nav a
{
padding:2px 0 2px 0.5em;
margin-bottom: 4px;
display: block;
}

.subnav span
{
display: block;
padding:2px 0 2px 0em;
margin-bottom: 0;
letter-spacing: 2px;
font-size: 1.2em;	
}

.content .subnav {
margin-bottom: 7em;
}

.page-info {
text-align: center;
}
.page-no {
font-size: 3em;
margin-bottom: 0.6em;
color: #333333;
}
.page-name{
font-size: 2em;
}

.content
{
color: #333333;
letter-spacing: 1px;
}
.content .text{
height:23.4em;
overflow: hidden;
}
.works .content .text{
height:24.5em;
}

.content .work-text {
padding:0 1em 0 0;
color: #333333;
letter-spacing: 1px;
}

.content .work-text h2 {
margin-bottom: 0.4em;
text-align: center;
color: black;
}

.section-img
{
height:24em;
width:23.3em;
margin-top: 0.5em;
}

.text .link {
margin-bottom: 0.5em;
font-size: 0.75em;
}
.text .work-list div {
margin-bottom: 1em;	
}

.text .work-list a{
display: block;
color: red;
}
.work-title{
color: #000;
}


.quote {
font-size: 0.7em;
margin-bottom: 0.5em;

}

.home .text:hover{
background: url(../img/birds.gif) center center no-repeat;
}

.home .page-no{
color:red;
}
.home .page-name{
color:#333;
}

.footer .strap {
text-align: right;
margin-right:4.2em;
}
.strap {
font-family:Helvetica, "Trebuchet MS", sans-serif;
letter-spacing: 4px;
font-size: 1.4em;
color:#008ECD;
}

.duration {
font-weight: normal;
font-size: 0.7em;
}


.work-title {
margin-left: 1.04em;
}
.selected .work-title {
margin-left: 0em;
}
.selected .wrap:before {
content:"< "
}
.work-info {
margin-left: 1.4em;
}

.notebook .work-list a span,
.workshops .work-list a span {
color: #000;
}

.notebook .work-list .selected:after,
.workshops .work-list .selected:after {
content:" >";
}

.notebook .work-list a,
.workshops .work-list a {
margin-left: 1.04em;
}

.notebook .work-list p,
.workshops .work-list p {
margin-bottom: 0.8em;
}

.contact .text .middle{
padding-top: 5em;
}



/* -- Colours ----------------------------------------------------------*/
.about .nav .about,
.works .nav .works,
.workpage .nav .works,
.workshops .nav .workshops,
.notebook .nav .notebook,
.contact .nav .contact,
.links .nav .links
{
background-color: #eff;
}

.about .nav .about,
.nav  a.about:hover,
.about .page-name{
color:OrangeRed;
}

.workpage .nav .works,
.works .nav .works,
.nav a.works:hover,
.works .page-name{
color:SeaGreen;
color:teal;
}

.workshops .nav .workshops,
.nav a.workshops:hover,
.workshops .page-name{
color: orange;
}

.notebook .nav .notebook,
.nav a.notebook:hover,
.notebook .page-name{
color:#008ECD;
}

.contact .nav .contact,
.nav a.contact:hover,
.contact .page-name{
color: OrangeRed;
}

.polaroid .nav .polaroid,
.nav a.polaroid:hover,
.polaroid .page-name {
color:SeaGreen;
color:teal;
}

.links .nav .links,
.nav a.links:hover,
.links .page-name{
color: orange;
}

.film .page-name,
body .film,
body .film a
{
color:#FA8072;
color:OrangeRed;
}

.performance .page-name,
body .performance a,
body .performance 
{
color:green;
color:SeaGreen;
color:teal;
}

.installation .page-name,
body .installation a,
body .installation 
{
color: orange;

}

.collaboration .page-name,
body .collaboration,
body .collaboration a
{
color:#008ECD;
}

.work-info
{
display: block;
font-size: smaller;
color: black;
}

.divider
{
margin-top: 2em;
}

img.inset
{
position: absolute;
top:24em;
left:-42.5em;
}

.next-nav {
float:right;
}

.big-red-arrow {
position: absolute;
top:20em;
left:41.4em;
}

.big-red-arrow span
{
font-size: 4em;
color: red;
}

.about .box {
padding-right: 0.8em;
}

.about p {
margin-bottom: 0.8em;
}

.contact .page-name {
position: absolute;
top:14.2em;
left:0.1em;
}

.collaboration .text {
height: auto;
}

.download a {
display: block;
color: #333;
font-size: 0.8em;
}

.download em {
font-size: 2em;
font-style: normal;
margin-right: 0.2em;
}

/*
body.workpage .content {
margin-top:0;
}

.workpage .content .work {
padding-top:10em;
}

.workpage .content .text {
padding-top:10em;
}
*/

#works .no-still,
#works .still
{
width:374px;height:210px;background:LightGrey;margin-bottom:16px;
}

#current-polaroid,
.polaroid-background
{
/*373x384
height:24em;
width:23.3em;


width:340px;
height:382px;
*/
width:301px;
height:344px;
margin:0 auto;
}
.polaroid-background {

}

.polaroid-text {
margin:0.6em 0 0.4em 0.6em;
}

.polaroid-text p {
font-size: 1.4em;
line-height: 1.1em;
}

.click-prompt {
	position: absolute;
	top:22em;
	left:-5em;
}

.click-prompt span{
	font-size:0.6em;
	color:#333;
}
.click-prompt em {
	color: red;
}

/* ----------------------------------------------------------------*/
/*
HACKS
*/

/* Thanks to http://www.positioniseverything.net/easyclearing.html for 	this! */
/* lets elements containing floating elements scale to the proper vertical size */
.content:after,
.clearfix:after
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.content,
.clearfix
{display: inline-block;}

/* Hides from IE-mac \*/
* html .content,
* html .clearfix 
{height: 1%;}

.content,
.clearfix {display: block;}
/* End hide from IE-mac */

.hidden {
  margin: 0;
  padding: 0;
  /* Take this out of flow of doc so page isn't effected when resizing */
  position: absolute;
  /* So hidden text doesn't become visible when resizing */
  margin-left: -312.50em;
}

/* class to hide nested objects in IE */
/* hides the second object from all versions of IE */
* html object.hiddenObjectForIE { display: none; }

/* display the second object only for IE5 Mac */
/* IE Mac \*//*/
* html object.hiddenObjectForIE { display: inline; }
/**/


/* ----------------------------------------------------------------*/