/* GLOBAL RESET
----------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong,tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}


blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
}

a {
	text-decoration: none;
}

/* kill borders in FF */

a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}


/* Grid >> Global
----------------------------------------------------------------------------------------------------*/


.grid_1,
.grid_2,.grid_2_5,
.grid_3,
.grid_4 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 16px;
	margin-right: 16px;
}



.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4 {
	position: absolute;
}



/* Grid >> 4 Columns
----------------------------------------------------------------------------------------------------*/


.grid_1 {
	width:234px;
}

.grid_2 {
	width:486px;
}

.grid_2_5 {
	width:585px;
}

.grid_3 {
	width:738px;
}

.grid_4 {
	width:990px;
}



/* Push Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/


.push_1 {
	left:252px;
}

.push_2 {
	left:504px;
}

.push_3 {
	left:756px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

/* GENERAL LAYOUT
----------------------------------------------------------------------------------------------------*/
header {
	position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;
	padding: 0 16px 16px 16px;
	z-index: 100;
	background-color:#fff;
	height: 32px;
}

#body {
	margin: 144px 16px 36px 16px;
}

#home {
	margin-left: 16px;
}

#home , #nav, #info {
	padding: 8px 0 4px 0;
}

#nav {
	margin-top: 0;
}

#nav li {
	display: inline;
	margin: 0 16px 0 0;
}

#info {
	position: fixed;
	right: 16px;
}

#info a {
	margin: 0 8px 0 8px;
}

.spill {
	overflow: visible;
}

.news {
	margin-left: 16px;
}

.news a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-weight: bold;
	font-size: 22px;
	line-height: 22px; 
	margin-bottom: 18px;
	position: relative;
	top: 1px;

}

.news span{
	background: #000;
	padding: 5px;
}


.news * {
	color: #fff !important;

}

.centred {
	width: 100%;
	text-align: center;
}

.spacer-bottom {
padding-bottom: 36px;
}

/* TYPOGRAPHY
----------------------------------------------------------------------------------------------------*/

/* Baseline Grid */

body								{ font-family: "Courier New", Courier, monospace; font-size: 80%; line-height: 1.5; /*13/18*/ }

h1, h2, h3, h4, h5, h6, .gratuitously_large_type
									{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; position: relative; }
h1, h2								{ line-height: 36px; margin-bottom: 18px; }
h1, h2, h3, h4						{ margin-top: 18px; }
h3, h4, h5, h6						{ line-height: 18px; }
h1									{ font-size: 36px; top: 5px; }
h2									{ font-size: 28px; top: 8px; }
h3									{ font-size: 22px; top: 1px; }
h4									{ font-size: 18px; top: 2px; }
h5									{ font-size: 15px; top: 4px; }
h6									{ font-size: 13px; top: 5px; }
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child						{ margin-top: 0; }

p, pre, address, blockquote			{ font-size: 13px; line-height: 18px; position: relative; top: 5px; margin-bottom: 18px}
small								{ font-size: 11px; }
abbr, code, kbd,
samp, small, var					{ line-height: 15px; }
ul, ol, dl, dialog					{ font-size: 13px; line-height: 18px; position: relative; top: 5px; margin-top: 18px; margin-bottom: 18px; }
li ul, li ol, ul ul, ol ol		{ top: 0; margin-top: 0; margin-bottom: 0; }
li h1, li h2, li h3,
li h4, li h5, li h6,
li p								{ top: 0; }
form, legend, label					{ font-size: 13px; line-height: 18px; }
legend								{ position: relative; top: 5px; }
table								{ font-size: 13px; }
caption								{ font-size: 13px; line-height: 18px; position: relative; }
hr									{ position: relative; height: 1px; margin: 18px 0 14px 0; }

.layout-grid		{ background-image: url(../images/baseline.png); background-repeat: repeat; background-position: 0 1px; }

.to-upper-case {
	text-transform:uppercase;	
}

.leading {
	margin-bottom: 9px !important;
}

.gratuitously_large_type { font-size: 400px; line-height: 300px; }

em, blockquote{
    font-style:italic;
}
strong, b {font-style: bold;
       }
   
/* BODYCOPY STYLES
----------------------------------------------------------------------------------------------------*/
.bodycopy p, .bodycopy address, .bodycopy						
small, .bodycopy abbr, .bodycopy var,.bodycopy
ul, .bodycopy ol, .bodycopy dl, .bodycopy blockquote, .bodycopy hr {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	line-height: 1.5;
	color:#333;
}

.bodycopy blockquote {
	font-style: italic;
	padding: 0 1.5em;
	margin-top: 18px; 
	margin-bottom: 18px;
}

.bodycopy code {
	font-family: "Courier New", Courier, monospace;
}

/* Bodycopy List Styles */

.image_wrap {
	margin: 9px 1.5em 9px 0;
}

.image_wrap img {
	display: block;
	margin-bottom: 9px;
}

.caption {
	margin: 0px 0;
}

.alignleft {
	 float: left; 
	 }


/* Bodycopy List Styles */

.bodycopy ol {
counter-reset: item;
list-style-type: decimal;
}

.bodycopy ul {
	margin-left: 1em;
	padding: none;
	list-style-type: square;
}

.bodycopy ul, .bodycopy ol {
	margin-left: 1.3em;
}

li ul, li ol {
	padding-left: 1.5em;
}

.footnote {
	font-size: 11px; 
	border-top: 1px solid;
	padding-top: 9px;
}

ul {
	list-style: none;
}

.pagelink {
	padding: 9px 0;
	border-top: 1px solid;	
}


/* PROJECT INDEX LIST
----------------------------------------------------------------------------------------------------*/
#category_nav {
	position: fixed;
	top: 144px;
}

#project_index {
	padding-left: 32px;
}

.project_list {
	margin-bottom: 36px !important;
	margin-top: 0 !important;
}

.project_list li {
	margin-bottom: 18px;
	height: 36px;
	display: block;
}

.project_list li a {
	text-decoration: none;
	border: none;
	display: block;
	position: relative;
	height: 36px;
	
}

.project_list li a:hover {
	text-decoration: none;
}

.title_rollover, .desc_rollover {
	position: absolute;
	top: 0px;
}

.title_rollover {
	height: 36px;
}

.desc_rollover {
	height: 36px;
	zoom: 1;
	filter: alpha(opacity=0);
	opacity: 0;
	overflow: hidden;
}

.project_list li a:hover .title_rollover {
	zoom: 1;
	filter: alpha(opacity=0);
	opacity: 0;
}

.project_list li a:hover .desc_rollover {
	zoom: 1;
	filter: alpha(opacity=1);
	opacity: 1;
}

.title_rollover h1, .title_rollover p {
	display: inline;
	vertical-align: bottom;
}

/* SINGLE PROJECT STYLES
----------------------------------------------------------------------------------------------------*/
#related_projects ul li {
	list-style-type: none;
}


/* TIMELINE STYLES
----------------------------------------------------------------------------------------------------*/

.timeline_column {
	width: 234px;
	padding: 0 16px; 
}

.timeline_column ul {
	margin-top: 18px;
}
.timeline_column p {
	word-break:hyphenate;
}

#left_button, #right_button {
	position: fixed;
	top: 72px;
	padding: 0px 24px;
	font-size: 4em;
	z-index: 100;
	text-align: center;
	vertical-align: bottom;
	display: none;
	}
	
#left_button {
	left: 0px;
	
	
}

#right_button {
	right: 0px;
}





/* LINK STYLES 
----------------------------------------------------------------------------------------------------*/
a {
	border-bottom: 1px solid;
}

a, a:visited, a:active {
	color: #000;
}

a:hover {
	border-bottom: none;
	text-decoration: line-through;
}

.block_link {
	display: block;
}

.blank_link {
	border: none;
	text-decoration: none;
}

.blank_link:hover {
	text-decoration: none;
}

.no_underline {
    border: none;
    }

/* IMAGE GALLERY STYLES 
----------------------------------------------------------------------------------------------------*/

#pager_nav {
	margin-bottom: 9px;
	display: none;
}
.pager_nav_arrow {
	font-size: 1.8em;
	margin-right: 1em;
}

.pager_nav_arrow a {
	border: none;
}

.pager_nav_arrow a:hover {
	text-decoration: none;
	}
	
	
#gallery li {
	padding-bottom: 18px;
}
	
	#gallery img {
		margin-bottom: 18px;
	}
	
/* DOWNLOAD ICONS
----------------------------------------------------------------------------------------------------*/

.download_icons{
	margin: 18px 0;
	overflow: auto;
	
}

.download_icons a{
	display: block;
	width: 30px;
	height: 30px;
	border: none;
	float: left;
	margin-right: 1em;
}

.download_icons a.html {
	background: url(./images/icons/html.png);
}

.download_icons a.odf {
	background: url(./images/icons/odf.png);
}

.download_icons a.pdf {
	background: url(./images/icons/pdf.png);
}

.download_icons a.txt {
	background: url(./images/icons/txt.png);
}


.download_icons a.odt {
	background: url(./images/icons/odt.png);
}

.download_icons a.jpg {
	background: url(./images/icons/jpg.pdf);
}

.download_icons a:hover {
	background-position: 0px 30px;
}

/* under Construction */
.under_construction {
	color: #0FF;
}

/* FOOTER STYLES 
----------------------------------------------------------------------------------------------------*/

footer {
	position: fixed;
	bottom: 0px;	
	margin-left: 16px;
	padding: 0 16px;
	padding-bottom: 1px;
	background-color: #fff;}
	
	/* MaxImage*/
	
	.mc-hide-scrolls{
	overflow:hidden;
}

body .mc-cycle {
	height:100%;
	left:0;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100%;
	z-index:-1;
}

div.mc-image {
	/*NOTE: Mozilla flickers when fading and using 'all', so we have to be specific with what property we want to transition:
	 	If you are using fading transitions, use 'opacity: */
	-webkit-transition: opacity 1s ease-in-out; 
	-moz-transition: opacity 1s ease-in-out; 
	-o-transition: opacity 1s ease-in-out; 
	transition: opacity 1s ease-in-out;
	
	/*If you are using horizontal slide transitions, use the following CSS:
	-webkit-transition: left 1s ease-in-out; 
	-moz-transition: left 1s ease-in-out; 
	-o-transition: left 1s ease-in-out; 
	transition: left 1s ease-in-out;*/
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:center center;
	background-repeat:no-repeat;
	height:100%;
	overflow:hidden;
	width:100%;
}

.mc-old-browser .mc-image {
	overflow:hidden;
}