@CHARSET "UTF-8";

/* reset */
html{color:#000;background:#FFF; overflow:auto; padding: 0;-webkit-font-smoothing: antialiased;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;vertical-align:middle;}
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, sub, sup, 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;font-variant:normal;}
article, .aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sub, sup {font-size: 75%;line-height: 0;position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
small {font-size: 85%;}
pre {white-space: pre;white-space: pre-wrap;word-wrap: break-word;padding: 15px;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
button, input, select, textarea {width: auto;overflow: visible;margin: 0;font-size: 100%;vertical-align: baseline;}
textarea {overflow: auto;vertical-align:text-top;}
input::-moz-focus-inner, button::-moz-focus-inner {border: 0;padding: 0;}
html, body { border: 0; margin: 0; outline: 0;  vertical-align:baseline;}
a {text-decoration: none; color: inherit; }
.clear { display: block; clear: both; height: 0; font-size: 0; line-height: 0; visibility: hidden; }
em,i{font-style:italic; }
b, strong { font-weight: bold; }
* {outline: none;}
hr { border: 0; }

/* fonts */
.neo { font-family: 'GFS Neohellenic', sans-serif; }
.opensans { font-family: 'Open Sans', sans-serif; }

/* general */
hr { width: 100px; height: 1px; color: #f88; background-color: #fbb; margin: 15px auto; }
.sprite { background-image: url('../sprites/site.png');  }
.left { float: left; display:block; }
.right { float: right; display:block; }
.center { margin: 0 auto; }
.clear { float: none; }
.transparent { zoom: 1; filter: alpha(opacity=30); opacity: 0.3; -moz-opacity:0.3; -khtml-opacity:0.3;}

/* menu */
#title { color: red; font-variant: small-caps; font-size: 22px; margin-top: 40px; width: 100%; text-align: center; }
#menu { text-transform: uppercase; font-size: 14px; text-align: center;}
#menu, #language { letter-spacing: 2px; }
#menu .option { margin: 10px 0; }
#menu .option.open .option-title {filter: alpha(opacity=100); opacity: 1; -moz-opacity:1; -khtml-opacity:1; }
#menu .x { visibility: hidden; width: 10px; height: 10px; background-position: -89px -4px; display: inline-block; }
#menu .option.open .x { visibility: visible;}
#menu .option-title { position: relative; left: 12px;}
.option-title, #language, footer li a{
	-webkit-transition:	all 0.5s;
	-moz-transition:	all 0.5s;
	-ms-transition:		all 0.5s;
	-o-transition:		all 0.5s;
	filter: alpha(opacity=30); opacity: 0.3; -moz-opacity:0.3; -khtml-opacity:0.3;
}
.option-title:hover, #language:hover, footer li a:hover {
	filter: alpha(opacity=100); opacity: 1; -moz-opacity:1; -khtml-opacity:1;
}


/* footer */
#language { font-size: 12px; margin: 0 auto; cursor: pointer;}
footer { text-align: center; margin-bottom: 40px; }
footer .sprite { height: 17px; }
footer ul { margin: 0; padding:0; list-style-type: none; text-align: center; }
footer ul li { display: inline; }
footer ul a { margin:0 10px; display: inline-block; }
.vimeo { width: 55px; background-position: -1px 0; }
.facebook { width: 10px; background-position: -57px 0; }
.linkedin { width: 16px; background-position: -68px 0; margin: 0;}

/* section */
#menu section.option-section { visibility: hidden; overflow: hidden; text-transform: none; }
#menu section.option-section.page { font-size: 12px; color: black; line-height: 20px; width: 75%; margin: 0 auto; letter-spacing: 1px;
	-webkit-transition:	margin 0.5s;
	-moz-transition:	margin 0.5s;
	-ms-transition:		margin 0.5s;
	-o-transition:		margin 0.5s;
}
#menu li.open section.option-section.page{ margin: 20px auto; }

/* topics section */
section.topics { font-family: 'GFS Neohellenic', sans-serif; }
section.topics nav.cats { width: 97%; margin: 10px auto; text-transform: uppercase; color: #ccc; font-size: 14px; letter-spacing: 0px;  }
nav.cats .cat { margin: 0 10px;
	-webkit-transition:	all 0.5s;
	-moz-transition:	all 0.5s;
	-ms-transition:		all 0.5s;
	-o-transition:		all 0.5s;
}
nav.cats .cat.selected, nav.cats .cat.enabled { color: #888; }
nav.cats.hoverable .cat:hover { color: black; }

section.gridarea { background-image: url('../sprites/grid.png'); height: 500px; overflow:hidden; }
.gradientarea{
background: #c8c8c8;
background: -moz-linear-gradient(top,  #c8c8c8 0%, #f2f2f2 5%, #f2f2f2 95%, #c8c8c8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8c8c8), color-stop(5%,#f2f2f2), color-stop(95%,#f2f2f2), color-stop(100%,#c8c8c8));
background: -webkit-linear-gradient(top,  #c8c8c8 0%,#f2f2f2 5%,#f2f2f2 95%,#c8c8c8 100%);
background: -o-linear-gradient(top,  #c8c8c8 0%,#f2f2f2 5%,#f2f2f2 95%,#c8c8c8 100%);
background: -ms-linear-gradient(top,  #c8c8c8 0%,#f2f2f2 5%,#f2f2f2 95%,#c8c8c8 100%);
background: linear-gradient(top,  #c8c8c8 0%,#f2f2f2 5%,#f2f2f2 95%,#c8c8c8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#c8c8c8',GradientType=0 );
}

/* timeline */
#timeline { position: relative; width:100%;}
#timeline.aside { width: 120px;  }
#timeline.aside .month { cursor: pointer;}
#timeline .titles { width: 50%; }
#timeline .title { padding-right: 75px; height:18px; border-bottom: 2px solid red; letter-spacing: 1px; white-space: nowrap; cursor: pointer;}
#timeline .title:hover { zoom: 1; filter: none; opacity: 1; -moz-opacity:1; -khtml-opacity:1;}
#timeline p { height:20px; }
#timeline .lines { text-align: left; width: 110px; }
#timeline .month { width: 30px; height: 18px; border-bottom: 2px solid red; }
#timeline .month.long { width: 60px;}
#timeline .year { color: #888; position: relative; bottom: 12px; float: right; font-size: 20px; cursor: default;}

/* topic, yo! */
article { text-align: left; font-size: 12px; letter-spacing: 0px; }
article .redline { width:1px; height: 460px; margin: 20px 0; background-color: red; }
article .topic-left, article .topic-right-inner { height: 460px; position: relative;}
article .topic-right-inner { margin: 20px; }
article .topic-right-inner .column { }
article .topic-left { width: 200px; margin:20px; }
article .topic-left header { text-align: right; color: black; font-size: 19px; font-weight: bold; }
.topic-info { text-align: right; display: block; position: absolute; bottom: 0; right: 0; overflow: hidden; max-height: 400px;}
.topic-info .info-title, .topic-info a.action { color: red; text-transform: uppercase; }
.topic-info li { margin: 10px 0; }
.topic-info li.last { margin: 10px 0 0 0; }
article .topic-info a {
	-webkit-transition:	all 0.5s;
	-moz-transition:	all 0.5s;
	-ms-transition:		all 0.5s;
	-o-transition:		all 0.5s;
	filter: alpha(opacity=100); opacity: 1; -moz-opacity:1; -khtml-opacity:1;
}
article .topic-info a:hover {
	filter: alpha(opacity=30); opacity: 0.3; -moz-opacity:0.3; -khtml-opacity:0.3;
}

/* topic rhs */
article .topic-right { display: block; overflow-y: hidden; }
article .topic-right section.text { height: 110px; line-height: 18px; position:relative;
	-webkit-column-width:320px;
	-moz-column-width:320px;
	column-width:320px;
}
article .topic-right section.text .column div { padding-right:10px; }

.photo-select { bottom: 310px; clear: both; position: absolute; }
.photo-select a { width: 100px; height: 20px; color: red; border: 1px solid red; text-transform: uppercase; display: block; margin-right: 10px; text-align: center; line-height: 22px; }
.photo-select a.selected { color: white; background-color: red; }

.photos { bottom: 0; position: absolute; }
.photos.not-loaded { visibility: hidden;}
.photos, .photos .media { height: 300px; }
.photos .media { margin-right: 2px; }
.photos .media.research { display: none; }