@charset "UTF-8";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,hr small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,textarea, input { border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; margin:0; padding:0;text-decoration:none; font-weight:normal; }  ol,ul { list-style:none; }  table { border-collapse:collapse; border-spacing:0; }  hr { display:block; height:1px; border-top:1px solid #ccc; margin:1em 0; }  input,textarea,select { vertical-align:middle; }  article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

/* COLOURS

Pink #cc00cc:  

*/

@font-face {
    font-family: 'frutigerroman';
    src: url('fonts/ftr_____-webfont.eot');
    src: url('fonts/ftr_____-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/ftr_____-webfont.woff') format('woff'),
		url('fonts/ftr_____-webfont.ttf') format('truetype'),
		url('fonts/ftr_____-webfont.svg#frutigerroman') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	font-family: 'frutigerroman', Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #555;
	-webkit-text-size-adjust: 100%;
}

/********** LAYOUT ***********/

header, .container, #breadcrumbs ul {
	width:1000px;
	margin:0 auto;
	position:relative;
}

header {
	height:102px;
}

/********** CORE ***********/

h1 {
	font-size:16px;
	margin:0 0 10px 0;
	z-index:1000;
}

h1.Yes {
	margin-top:-100px;
}

h1, h2, h3 {
	color: #111;
}

p {
	margin:0 0 10px 0;
}

/********** SHARED ***********/

.clear {
    width: 100%;
    clear: both !important;
    display: inline-block;
}

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html .clear {
    height: 1%;
}

/********** LISTS ***********/

.content li {
	font-size:1.2em;
	line-height: 20px;
	padding-left:18px;
}

.content ul li:Before {
	content: "■";
	padding-right:11px;
	width:18px;
	margin-left:-18px;
	overflow:hidden;
}

.content ol {
	counter-reset: li;
	margin-bottom:15px;
}

.content ol li {
	padding-left:18px;
}

.content ol li:Before {
	content: counter(li)". ";
	counter-increment: li;
	padding-right:5px;
	width:18px;
	margin-left:-18px;
	overflow:hidden;
}

/********** HEADER ***********/

#logo {
	font-size:22px;
	position:absolute;
	left:0;
	top:60px;
	display:block;
	color:#222;
}

#logo:Hover {
	color:#cc00cc;
}

/********** BREADCRUMBS ***********/

#breadcrumbs {
	background:#efefef;
	height:21px;
	margin-bottom:27px;
}

#breadcrumbs li {
	font-size:10px;
	padding:5px 0;
	color:#999;
	display:inline;
	float:left;
	text-transform: capitalize;
}

#breadcrumbs li a, #breadcrumbs li a:Visited {
	color:#999;
	padding: 0 10px;
}

#breadcrumbs li:after {
    content: '/';
}

#breadcrumbs li:last-child {
    padding-left:10px;
}

#breadcrumbs li:last-child:after {
    content: none;
}

#breadcrumbs li:first-child a {
	padding: 0 10px 0 0;
}

#breadcrumbs li.norman {
	padding:5px 0;
}

/********** FOOTER ***********/

footer {
	border-top: 1px solid #ccc;
	padding:15px 0;
	min-height:30px;
}

footer li, footer li a {
	color:#ccc;
	display:inline;
	float:left;
}

footer li {
	display:inline;
	float:left;
	padding: 0 20px;
	border-left: 1px solid #ccc;
	font-size:11px;
}

footer li:first-child {
	padding-left: 0;
	border:none;
}

footer li:last-child {
	padding-right: 0;
	float:right;
	border:none;
}

footer li a {
	display:block;
}

/********** NAV ***********/

nav {
	float:right;
	margin-top:68px;
}

nav li {
	font-size:13px;
	display:inline;
	float:left;
}

nav li a, nav li a:Visited {
	color:#222;
	margin:0 0 0 28px;
	padding: 0 0 17px 0;
	display:block;
	width:auto;
}

nav li a:Hover,
.home nav li.home a,
.about nav li.about a,
.team nav li.team a,
.publications nav li.publications a,
.press nav li.press a,
.projects.public nav li.public a,
.projects.private nav li.private a,
.contact nav li.contact a
{
	border-bottom: 4px solid #cc00cc;
}

.shownav {
	display:none;
	background:#cc00cc url(../images/nav-icon.gif) 5px 5px no-repeat;
	width:20px;
	height:20px;
	padding:5px;
	position:absolute;
	top:20px;
	right:0;
	cursor:pointer;
}

/********** CONTENT ***********/

.content {
	margin:20px 0 30px 0;
	width:510px;
	line-height:1.6;
}

.home .content h1 {
	display:none;
}

a.viewall {
	float:right;
	margin-top:58px;
	color:#222;
}

.project-list {
	margin:0 -21px 0 0;
}

.project-list article {
	width:319px;
	margin:0 21px 21px 0;
	float:left;
}

.project-list article h2 {
	font-size:12px;
	margin-top:6px;
}

.project-list img {
	width:100%;
	margin:0 21px 0 0;
}

.press img {
	width:124px;
	height:162px;
	float:left;
	margin:0 21px 21px 0;
}

.press-gallery {
	margin-right:-21px;
}

.about-image {
	position:absolute;
	top:5px;
	left:0;
	width:334px;
}

.about-content {
	margin-left:365px;
	line-height:1.6;
	padding-bottom:20px;
}

.about-content strong, .about-content b {
	font-weight:600;
}

.about-content h1, .about-content h2 {
	font-size:18px;
	margin:6px 0 10px 0;
}

.about-content h1 {
	margin-top:-5px;
}

.about-content h3 {
	margin-bottom:10px;
	font-weight: bold;
}

.about-content a, .about-content a:Visited {
	color:#0782C1;
}

.publications-images {
	position:absolute;
	top:5px;
	left:0;
}

.contact .about-content {
	min-height:450px;
}

.content-right-bottom-image {
	position: absolute;
    right: 0;
    bottom: 86px;
}

.content-right-bottom-image img {
	width: 75px;
}


/********** DESKTOP RETINA DEVICES ***********/

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

	.logo {
		background:url(../images/logo-double.png) no-repeat;
		background-size: 553px 117px;
	}

	.shownav {
		background-image:url(../images/nav-icon-double.gif);
		background-size: 20px 20px;
	}

}

@media only screen and ( max-width: 1040px ) {

	header, .container, #breadcrumbs ul {
		width:auto;
		margin:0 20px;
	}

	nav li a {
		margin:0 0 0 24px;
	}

	#logo {
		font-size:19px;
		top:63px;
	}

}


@media only screen and ( max-width: 920px ) {

	/* Adjust header to fix logo and nav interference */

	#logo {
		font-size:20px;
		top:20px;
	}

	nav {
		float:left;
	}

	nav li:first-child a {
		margin:0;
	}

}

@media only screen and ( max-width: 769px ) {

	/* Adjust header to fix logo and nav interference */


	header {
		height:auto;
	}

	#logo {
		top:auto;
		padding:25px 0 25px 0;
		font-size:20px;
		position:relative;
		width:240px;
	}

	nav {
		float:none;
		margin:0 0 27px 0;
		display:none;
	}

	nav li {
		display:block;
		float: none;
	}

	nav li:first-child a {
		border-top: 1px solid #ccc;
	}

	nav li a, nav li a:Visited {
		margin:0;
		padding:10px;
		border-bottom: 1px solid #ccc;
	}

	nav li a:Hover,
	.home nav li.home a,
	.about nav li.about a,
	.publications nav li.publications a,
	.press nav li.press a,
	.projects.public nav li.public a,
	.projects.private nav li.private a,
	.contact nav li.contact a
	{
		background:#efefef;
		border-bottom: 1px solid #ccc;
	}

	footer li:last-child {
		padding-right: 20px;
		float:left;
		border-left: 1px solid #ccc;
	}

	.content {
		width: auto;
	}

	.about-image, .publications-images {
		position:relative;
		top:auto;
		left:auto;
		margin-bottom:20px;
	}

	.about-content {
		margin-left:0;
	}

	.shownav {
		display:block;
	}

	a.viewall {
		margin-top:26px;
	}

	.contact .about-content {
		min-height:0;
	}

	.content-right-bottom-image {
		margin-top: 20px;
		position: initial;
		text-align: center;
		margin-bottom: 20px;
	}

	.content-right-bottom-image img {
		width: 45px;
	}

}

@media only screen and ( max-width: 480px ) {

	.project-list {
		margin:0;
	}

	.project-list article {
		width:100%;
		margin:0 0 21px 0;
		float:none;
	}

	.about-image, .publications-images, .flexpub, .flexpub img {
		max-width:100%;
	}

	footer {
		padding-top:8px;
	}

	footer li, footer li a {
		display:block;
		float:none;
	}

	footer li {
		padding: 6px 0;
		border-left: none;
		font-size:11px;
	}

	footer li:last-child {
		float:none;
		border: none;
	}

}

@media only screen and ( max-width: 300px ) {

	.shownav {
		top:10px;
		right:-10px;
	}

	#logo {
		padding:50px 0 10px 0;
		font-size:16px;
		width:auto;
	}


}