/* Resetting the usual suspects */

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;

}

ul, li {

    list-style: none;

}

input::-moz-focus-inner /*Remove button padding in FF*/

{ 

    border: 0;

    padding: 0;

}

table {

    border-collapse: separate; border-spacing: 0;

}

th, td {

    vertical-align: top;

}

img a {

    border: none;

}

html {

    overflow: hidden;

}

/* Fonts */

@font-face {

    font-family: 'Futura-Medium';

    src: url('../fonts/Futura-Medium.woff') format('woff'),

         url('../fonts/Futura-Medium.ttf') format('truetype'),

         url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');

}

/* End of the reset part */

body {

    background: #000000; font-family: Helvetica, Arial, sans-serif;

}

/* Top Bar */

.top-bar {

    height: 40px;

}

/* Main Video Frame */

.main-video {

    height: 562px; position: relative;

}

.project-title {

    text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0;

    font-family: 'Futura-Medium';

}

.tags {

    position: absolute; top: 0; left: 0; width: 140px; z-index: 2; font-size: 12px; cursor: pointer;

}

.tags-title {

    line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;

    font-family: 'Futura-Medium'; text-transform: uppercase;

}

.tags:hover .tags-title {

    background: #404040; color: #ffffff;

}

.tags-list {

    background: #303030;

    padding: 10px 0; display: none;

}

.tag {

    color: #cccccc; padding: 5px 15px;

}

.tag:hover {

    color: #ffffff; background: #202020;

}

.tag.found {

    color: #ffffff;

}

/* Annotation colors */

.video {

    color: #be4477;

}

.audio {

    color:#63be6c;

}

.slideshow {

    color: #f69058;

}

.text {

    color:#5e90cb;

}

.quote {

    color:#00aeb5;

}

.link {

    color:#8985bb;

}

/* Pictograms on the left */

.pictolist {

    position: absolute;

    left: 14px; bottom: 24px;

}

.pictolist li {

    line-height: 38px; opacity: 0; display: none; height: 0;

    padding: 6px; width: 38px; overflow: hidden;

}

.pictolist li.hover {

    width: 400px;

}

.picto {

    float: left; padding: 7px; background:black;

    border-radius: 19px; cursor: pointer;

}

.picto-title {

    margin-left: 8px; font-size: 12px; text-transform: uppercase;

}

.picto a {

    background: url(../img/sprites.png); display: block; width: 24px; height: 24px;

}

.video.hover .picto ,

.video.current .picto {

    background: #be4477;

}

.video.hover .picto a ,

.video.current .picto a {

    background-position: -24px 0;

}

.audio .picto a {

    background-position: 0 -24px;

}

.audio.hover .picto,

.audio.current .picto {

    background: #63be6c;

}

.audio.hover .picto a ,

.audio.current .picto a {

    background-position: -24px -24px;

}

.slideshow .picto a {

    background-position: 0 -48px;

}

.slideshow.hover .picto ,

.slideshow.current .picto {

    background: #f69058;

}

.slideshow.hover .picto a ,

.slideshow.current .picto a {

    background-position: -24px -48px;

}

.text .picto a {

    background-position: 0 -72px;

}

.text.hover .picto ,

.text.current .picto {

    background: #5e90cb;

}

.text.hover .picto a ,

.text.current .picto a {

    background-position: -24px -72px;

}

.quote .picto a {

    background-position: 0 -96px;

}

.quote.hover .picto ,

.quote.current .picto {

    background: #00aeb5;

}

.quote.hover .picto a ,

.quote.current .picto a {

    background-position: -24px -96px;

}

.link .picto a {

    background-position: 0 -120px;

}

.link.hover .picto ,

.link.current .picto {

    background: #8985bb;

}

.link.hover .picto a ,

.link.current .picto a {

    background-position: -24px -120px;

}

/* Annotations */

.annotation-templates {

    display: none;

}

.annotation {

    position: absolute;

}

.annotation-title {

    font-family: 'Futura-Medium'; text-align: center;

}

.close-annotation {

}

.annotation {

    left: 45px; top: 800px; right: 35px;

}

.annotation-main:after {

    content: "."; visibility: hidden; display: block; height: 1px; clear: both;

}

/* Narrow annotations */

.narrow-annotation {

    left: 210px; right: 200px;

}

/* White annotations */

.white-annotation {

    background: #ffffff; max-height: 522px; overflow: auto;

}

.white-annotation {

    color: #000000;

}

.white-annotation .close-annotation:hover {

}

.white-annotation .annotation-title {

    font-size: 23px; margin: 24px 0;

}

/* Black annotations */

.black-annotation .annotation-main {

}

.black-annotation .annotation-title {

    height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;

}

.black-annotation .close-annotation {

}

.black-annotation .close-annotation:hover {

}

.black-annotation p {

    margin: 10px 25px 10px 15px;

    font-size: 12px; color: #CCCCCC;

}

/* Text annotation */

.text-contents {

    font-family: Georgia, 'Times New Roman', serif;

    margin: 0 45px 35px;

    column-count: 2; column-gap: 60px;

    -moz-column-count: 2; -moz-column-gap: 60px;

    -webkit-column-count: 2; -webkit-column-gap: 60px;

}

.text-contents p, .text-contents ul, .text-contents ol {

    column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid;

    margin-bottom: 10px; font-size: 15px;

}

.text-contents h2, .text-contents h3, .text-contents h4 {