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

   RESET

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

html, body, div, span, object, iframe,
h1, h3, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

body {
  line-height: 1.5;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }


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

   TYPOGRAPHY

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

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html {font-size:100.01%;}
body {
  font-size: 10px;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}


/* Headings
-------------------------------------------------------------- */

h1,h3,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size:3em;
line-height:1;
margin-bottom:10px; }
h2 { font-weight: bold;  }
h2, h3 { font-size: 18px; font-family:"Times New Roman",Times,serif; }
h2, h4 {
	margin-bottom: 11px;
}
h2 span, h3 span, h4 span {
	border-bottom: 1px solid black;
}

h1 img, h3 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus,
a:hover     { color: #000; }
a           { color: #000; text-decoration: none; outline: none; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         {color:#666;}

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

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

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


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

   GLOBAL

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

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  overflow:hidden; 
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear {clear:both;}


/* Structure
-------------------------------------------------------------- */

#header,
#container {
	padding:30px;
}


h1 a {
	display: block;
	width: 105px;
	height: 17px;
	background-image: url(/style/images/logo.png);
	background-repeat: no-repeat;
	text-indent: -9999em;
}


/* Header
-------------------------------------------------------------- */

#header {
	height:41px;
	width:1030px;
}

#header .column {
	float:left;
	margin-right:15px;
	width:105px;
}

#header .contact.column {
	margin-right:15px;
	width:165px
}

#header .contact.column p {
	margin-bottom: 0;
}

#header .column ul {
	list-style:none;
	margin:-3px 0 0;
	padding:0;
}

#header .column ul li.selected a {
	border-bottom: 1px solid #000;
}

#header .column ul li a:hover {
	border-bottom: 1px solid #000;
}


/* Thumbnails
-------------------------------------------------------------- */

.thumbnails .thumbnail {
	float: left;
	margin-right: 15px;
	margin-bottom: 9px;
	cursor: pointer;
}


.thumbnails .thumbnail .image {
	background-color: #eee;
	margin-bottom: 5px;
}

.js .thumbnails .thumbnail .image img,
.js #container #project .content .item .image img {
	display: none;
}

.thumbnails .thumbnail.small-landscape,
.thumbnails .thumbnail.square,
.thumbnails .thumbnail.portrait {
	width: 165px;
}

.thumbnails .thumbnail.large-landscape {
	width: 345px;
}

.thumbnails .thumbnail.small-landscape .image {
	width: 165px;
	height: 98px;
}

.thumbnails .thumbnail.square .image {
	width: 165px;
	height: 165px;
}

.thumbnails .thumbnail.portrait .image {
	width: 165px;
	height: 240px;
}

.thumbnails .thumbnail.large-landscape .image {
	height: 240px;
}

.thumbnails .thumbnail .title,
.thumbnails .thumbnail .sub-title {
	width: 165px;
}

/* Project
-------------------------------------------------------------- */

#project {
	width: 100%;
}

#project .information {
	position: absolute;
	top: 135px;
	left: 30px;
	margin-right:15px;
	width:165px;
}

#project .more .thumbnail {
	margin-bottom:10px;
	width:95px;
}

#project .more .thumbnail a {
	display: block;
	width: 95px;
}

#project .content {
	margin-left:180px;
	margin-top:7px;
}


#project .content .item {
	margin-right: 15px;
	float: left;
}

#project .content .item .image,
#project .content .item .caption {
	margin-bottom: 15px;
}

#project .content .item .caption {
	width: 165px;
	margin-top: -10px;
}


/* these are the available image widths */

#project .content .item.size-165 .image,
#project .content .item.size-165 .image img {
	width: 165px;
}
#project .content .item.size-225 .image,
#project .content .item.size-225 .image img {
	width: 225px;
}
#project .content .item.size-285 .image,
#project .content .item.size-285 .image img {
	width: 285px;
}
#project .content .item.size-345 .image,
#project .content .item.size-345 .image img {
	width: 345px;
}
#project .content .item.size-405 .image,
#project .content .item.size-405 .image img {
	width: 405px;
}
#project .content .item.size-465 .image,
#project .content .item.size-465 .image img {
	width: 465px;
}
#project .content .item.size-525 .image,
#project .content .item.size-525 .image img {
	width: 525px;
}
#project .content .item.size-585 .image,
#project .content .item.size-585 .image img {
	width: 585px;
}
#project .content .item.size-645 .image,
#project .content .item.size-645 .image img {
	width: 645px;
}
#project .content .item.size-705 .image,
#project .content .item.size-705 .image img {
	width: 705px;
}


/* Pages
-------------------------------------------------------------- */

.page-content {
	width:465px;
	margin-top:-18px;
	float: left;
}

.page-content p {
	font-family:"Times New Roman",Times,serif;
	font-size:18px;
	line-height:1.35;
}

.page-content.contact {
	margin-right:46px;
	width:240px;
}

.page-content.clients {
	width:225px;
	margin-right: 15px;
}

.page-content.press-publications {
	margin-right:15px;
	width:240px;
}

.page-content.exhibitions-workshops {
	width:405px;
	margin-right: 15px;
}

.contact-image {
	float: left;
	margin-top: 3px;
}

.page-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-content h4 {
	margin-bottom: 0;
}


/* Website color
-------------------------------------------------------------- */

/* These are the elements that need to have the global colour applied to them */

.thumbnails .thumbnail .image,
#project .more .thumbnail .image,
#project .content .item .image {
	background-color: #FF5353;
}

.js .thumbnails .thumbnail .title a,
.js .thumbnails .thumbnail .sub-title a,
#header .navigation.column ul li a,
#header .column ul li a:active,
#header .column ul li.NEW a {
	color: #FF5353;
}

#header .navigation.column ul li a:hover,
#header .navigation.column ul li.selected a,
#header .column ul li a:active,
#header .column ul li.NEW a {
	border-color: #FF5353;
}