/* Screen CSS */

@import url("reset.css");

/* General
######################################################## */

body {
	font: normal 75% Arial, Helvetica, sans-serif;
	color: #222;
}

hr, #company-logo {
	display: none;
}

#skip {
	position: absolute;
	text-indent: -9999px;
}

/* Typography
######################################################## */

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

}

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

}

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

}

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

}

h1 {
	font: normal 1.6em "ArimoRegular", Helvetica, sans-serif;
	margin: 0 0 20px;
}

h2 {
	font: normal 1.4em "ArimoRegular", Helvetica, sans-serif;
	margin: 0 0 15px;
}

h3 {
	font: normal 1.2em "ArimoRegular", Helvetica, sans-serif;
	margin: 0 0 10px;
}

h4 {
	font: normal 1.1em "ArimoRegular", Helvetica, sans-serif;
	margin: 0 0 10px;
}

h5 {
	font: normal 1em "ArimoRegular", Helvetica, sans-serif;
	margin: 0 0 10px;
}

h6 {
	font: normal 0.9em "ArimoRegular", Helvetica, sans-serif;
	margin: 0 0 5px;
}

p {
	font: normal 1em Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
}

a, a:visited {
	outline: none;
	color: #222;
	text-decoration:underline;
}

a:hover {
	outline: none;
	color: #222;
	text-decoration:none;
}

a:focus {outline:none;}

a.external_link {
	background:  url("../images/layout/external-link.gif") 100% 2px no-repeat;
	padding: 1px 13px 1px 1px;
	margin: 0;
}

a.external_link:hover, a.external_link:focus {
	background: url("../images/layout/external-link-hover.gif") 100% 2px no-repeat;
	padding: 1px 13px 1px 1px;
}

a.external_link span.external_icon {
	position: absolute;
	left: -9999px;
}


/* Layout
######################################################## */

#container {
	position: relative;
	width: 1180px;
	margin: 0 auto;
}

header {
	position: relative;
	width:100%;
	border-bottom:1px solid #acacac;
}

#header-inside {
	position:relative;
	margin: 0 auto;
	width: 1180px;
	height: 79px;
}

#content {
	position: relative;
	float: right;
	width: 880px;
	margin:40px 0;
}

/* Left Column
--------------------------------------------------------*/

#left-col {
	position: relative;
	float: left;
	width: 280px;
	margin:40px 20px 40px 0;
}

#left-col a {
	text-decoration:none;
	display: block;
}



/* CV
--------------------------------------------------------*/


#cv-top {
	float:left;
	width:100%;
	margin-bottom:40px;
}

table.cv {
	width:100%;
	color:#525254;
}

table.cv th {
	text-align:left;
	padding:5px 0 15px;
}

table.cv td.date {
	width:15%;
	vertical-align:top;
	padding:0 0 10px;
}

table.cv td.content {
	width:85%;
	vertical-align:top;
	padding:0 0 10px;
	text-align:left;
}

table.cv a {
	font-weight:bold;
}



/* CONTACT
--------------------------------------------------------*/

form#contact_form { 
	float: left;
	width: 880px;
}

form#contact_form fieldset { 
	width: 880px;
	padding: 20px 0;
}

form#contact_form fieldset legend { 
	margin-top: -12px;
	text-indent: -99999em;
}

form#contact_form ol { 
	float: left;
	width: 880px;
}

form#contact_form li { 
	float: left;
	width: 880px;
	margin-bottom: 24px;
}

form#contact_form li label { 
	float: left;
	width: 120px;
	padding: 5px 12px 0 0;
	font: normal 1.2em "ArimoRegular", Helvetica, sans-serif;
}

form#contact_form li label.error { 
	float: left;
	width: 120px;
	padding: 6px 0 0 170px;
	text-align: left;
	color: #ff0000;
	font: normal 1.2em "ArimoRegular", Helvetica, sans-serif;
}

form#contact_form li input.textfield, form#contact_form li textarea { 
	float: left;
	width: 400px;
	padding: 6px;
	font: normal 1.2em Geneva, Arial, Helvetica, sans-serif;
	color: #525254;
	border: none;
	background: #f2f2f2;
}

input.textfield-captcha { 
	float: left;
	width: 100px;
	padding: 6px;
	margin-right:10px;
	font: normal 1.2em Geneva, Arial, Helvetica, sans-serif;
	color: #525254;
	border: none;
	background: #f2f2f2;
}

a.reload-captcha { 
	float:left;
	padding-left:10px;
}

img#captcha { 
	float:left;
	width:120px;
	height:30px;
	margin-left:5px;
	display:inline;
	border:1px solid #000;
}

form#contact_form li textarea { 
	height: 160px;
}

form#contact_form button { 
	display: inline;
	margin-left: 130px;
	font: normal 1.2em Geneva, Arial, Helvetica, sans-serif;
	padding: 6px 12px;
	background: #f2f2f2;
	border:none;
}

form#contact_form button:hover {
	background:#cac6c6;
}



/* Links
________________________________________________________ */

ul.links { 
	float:left;
	width: 420px;
	margin-right:20px;
}

ul.links li { 
	list-style:none;
	padding:2px 40px 10px 0;
}



/* PROJECTS
________________________________________________________ */

.project-text {
	float:left;
	width:880px;
	margin-bottom:40px;
}

ul.project-thumbs {
	float:left;
	width:180px;
	margin:0;
	list-style: none;
}

ul.project-thumbs li {
	float:left;
	list-style-type: none;
	margin: 0 20px 20px 0;
	position:relative;
	z-index:1;
}

ul.project-thumbs li a {
	display:block;
	width:70px;
	height:70px;
}

ul.project-thumbs img {
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */	
}

ul.project-thumbs img:hover, ul.project-thumbs li.live img {
	opacity:1;	
	filter:alpha(opacity=100);
}

span.vid-thumb {
	position:absolute;
	right:0;
	top:0;
	width:26px;
	height:26px;
	z-index:10;
	background:url("../images/layout/vid-thumb-overlay-wee.png") left top no-repeat;		
}

.img-hidden {display:none;}

.project_element {
	float:right;
	width:700px;
	text-align:center;
}

.project_element h2 {
	margin-top:15px;
}


/* MAIN NAVIGATION
--------------------------------------------------------*/

.main-nav {
	float:left;
	margin:0 0 40px 0;
}

.main-nav ul { 
	margin: 0;
	padding: 0;
}

.main-nav li { 
	list-style-type: none;
	cursor: hand !important;
	cursor: pointer !important;
	font: normal 1.4em "ArimoRegular", Helvetica, sans-serif;
	color:#222;
}

.main-nav li.submenu {
	padding: 0 10px 15px;
}

.main-nav li a {
	padding: 7px 10px 8px;
	color:#222;
	display:block;
}

.main-nav li a:hover {
	color:#222;
}

/* ----- main navigation - general ------ */
.main-nav li:hover, .main-nav li:focus,
/* ----- main navigation - texts submenu ------ */
.life-at-the-top .main-nav a.nav-life,
.making-a-picture .main-nav a.nav-picture,
.this-terrain .main-nav a.nav-terrain,
.traces-of-light .main-nav a.nav-traces,
/* ----- main navigation - cv submenu ------ */
.cv-bio .main-nav a.nav-bio,
.cv-education .main-nav a.nav-education,
.cv-solo .main-nav a.nav-solo,
.cv-group .main-nav a.nav-group,
.cv-awards .main-nav a.nav-awards,
.cv-residencies .main-nav a.nav-residencies,
.cv-commissions .main-nav a.nav-commissions,
.cv-publications .main-nav a.nav-publications,
.cv-teaching .main-nav a.nav-teaching,
.cv-professional .main-nav a.nav-professional,
/* ----- main navigation - contact and links ------ */
#contact a.nav-contact,
#links a.nav-links {
	background: url("../images/layout/arrow.png") left 8px no-repeat;
	color:#222;
}

.main-nav li#nav-texts, .main-nav li#nav-cv {
	background-position:0 3px;
}

.main-nav li#nav-cv {
	padding: 0 10px 10px;
}

.main-nav li ul { 
	display: none; /*Hide them by default. Don't delete. */
	margin-top:10px;
}

.main-nav li ul li a {
	color:#7d7d7d;
	font: normal 0.5em "ArimoRegular", Helvetica, sans-serif;
}

.main-nav ul li { 
	cursor: default;
}


/* Projects Nav
--------------------------------------------------------*/

nav#projects-nav {
	position: relative;
	float:left;
	margin-bottom:40px;
}

nav#projects-nav h2 {padding-left:10px;}

nav#projects-nav ul {
	position: relative;
	float:left;
	width: 280px;
}

nav#projects-nav ul li {
	clear: left;
}

nav#projects-nav ul li a { 
	font: normal 1.2em "ArimoRegular", Helvetica, sans-serif;
	padding: 7px 10px 8px;
	color:#7d7d7d;
}

nav#projects-nav ul li a:hover, nav#projects-nav ul li a:focus,
.qprc nav#projects-nav a.nav-qprc,
.ruins nav#projects-nav a.nav-ruins,
.nomi nav#projects-nav a.nav-nomi,
.nuomena nav#projects-nav a.nav-nuomena,
.peloton nav#projects-nav a.nav-peloton,
.catterline nav#projects-nav a.nav-catterline,
.dusseldorf nav#projects-nav a.nav-dusseldorf,
.grizedale nav#projects-nav a.nav-grizedale,
.soma nav#projects-nav a.nav-soma,
.chairs nav#projects-nav a.nav-chairs,
.arttm nav#projects-nav a.nav-arttm {
	background: url("../images/layout/arrow.png") left 8px no-repeat;
	color:#222;
}



/* Footer
--------------------------------------------------------*/

#footer-full-width {
	clear: both;
	width: 100%;
	border-top:1px solid #acacac;
}

footer {
	position: relative;
	clear: both;
	width: 1180px;
	height: 100px;
	margin:20px auto 0;
}

footer ul li {
	float:left;
	display:inline;
	color:#a29f9f;
}

footer ul li.kactus {
	float:right;
	width:30px;
	height:30px;
}

footer ul li.kactus a { 
	float:right;
	width:30px;
	height:30px;
	background: url("../images/layout/kactus-pie.png") right top no-repeat;
	text-indent:-9999px;
}

footer ul li.kactus a:hover { background: url("../images/layout/kactus-pie.png") right -30px no-repeat;
}

/* Navigations
######################################################## */

/* Home Logo
-------------------------------------------------------- */

#logo {
	position: absolute;
	top: 20px;
	left: 0;
}

#logo a {
	color: #000;
	font: normal 3em "ArimoRegular", Helvetica, sans-serif;
	text-decoration:none;
}


/* Utils Navigation
-------------------------------------------------------- */

nav#utils ul {
	position: absolute;
	top: 0;
	right: 0;
	height: 30px;
}

nav#utils ul li {
	float: left;
}

nav#utils ul li a {
	display: block;
	color: #fff;
	padding: 7px 10px 8px;
	background: dodgerblue;
}

nav#utils ul li a:hover, nav#utils ul li a:focus {
	background: purple;
	text-decoration: none;
}



/* Footer Navigation
-------------------------------------------------------- */

nav#footer-nav ul {
	position: absolute;
	top: 0;
	right: 0;
	height: 30px;
}

nav#footer-nav ul li {
	float: left;
}

nav#footer-nav ul li a {
	display: block;
	color: #fff;
	padding: 7px 10px 8px;
	background: dodgerblue;
}

nav#footer-nav ul li a:hover, nav#footer-nav ul li a:focus {
	background: purple;
	text-decoration: none;
}
	
/* Sections
######################################################## */



/* Forms
######################################################## */



/* Tables
######################################################## */