/* 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;

}

/* End of the reset part */

html {

    overflow: hidden;

}

/* Fonts */

@font-face {

    font-family: 'OpenSans';

    font-weight: 400;

    src: url('../fonts/OpenSans-Regular.woff') format('woff'),

         url('../fonts/OpenSans-Regular.ttf') format('truetype'),

         url('../fonts/OpenSans-Regular.svg#OpenSans') format('svg');

}

@font-face {

    font-family: 'OpenSans';

    font-weight: 700;

    src: url('../fonts/OpenSans-Bold.woff') format('woff'),

         url('../fonts/OpenSans-Bold.ttf') format('truetype'),

         url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');

}

@font-face {

    font-family: 'OpenSans';

    font-weight: 800;

    src: url('../fonts/OpenSans-ExtraBold.woff') format('woff'),

         url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'),

         url('../fonts/OpenSans-ExtraBold.svg#OpenSans-Extrabold') format('svg');

}

@font-face {

    font-family: 'OpenSans-CondensedBold';

    src: url('../fonts/OpenSans-CondBold.woff') format('woff'),

         url('../fonts/OpenSans-CondBold.ttf') format('truetype'),

         url('../fonts/OpenSans-CondBold.svg#OpenSans-CondensedBold') format('svg');

}

body {

    background: #000000; font-family: 'OpenSans'; font-weight: 400;

}

/* Top Bar */

.top-bar {

    position: absolute; left: 0; right: 0; top: 0; height: 40px;

}

.topright-buttons {

    float: right;

}

.topright-buttons a {

    float: left; background-image: url(../img/sprites.png); margin: 8px 8px 0 0; opacity: .5;

    transition: opacity 0.5s; -webkit-transition: opacity 0.5s; width: 24px; height: 24px;

}

.topright-buttons a:hover {

    opacity: 1;

}

.about {

    background-position: -24px -232px;

}

.full-screen {

    background-position: 0 -232px;

}

/* Main Video Frame */

.main-video {

    position: absolute; z-index: 1; top: 40px; left: 0; right: 0; bottom: 96px;

}

.video-container {

    position: absolute; left: 0; top: 0; width: 100%; height: 100%;

}

.video-container video {

    max-width: 100%; max-height: 100%; margin: 0 auto; display: block;

}

.project-title {

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

    font-weight: 700;

}

.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-weight: 700; 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: 0; bottom: 0; margin: 0 0 24px 14px;

}

.pictolist li {

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

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

    -webkit-transition: width 0.5s;

    transition: width 0.5s;

}

.pictolist li.hover {

    width: 400px;

}

.picto {

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

    border-radius: 19px; cursor: pointer;

    -webkit-transition: background 0.5s;

    transition: background 0.5s;

}

.picto-title {

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

    padding: 4px 6px; background: rgba(0, 0, 0, .7);

    font-family: 'OpenSans-CondensedBold';

}

.found .picto-title {

    background: rgba(255, 255, 255, .7);

}

.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;

}

.found .picto,

.current.found picto,

.hover.found .picto {

    background: #ffffff;

}

/* Annotations */

.annotation-templates {

    display: none;

}

.annotation {

    position: absolute;

}

.annotation-title {

    font-weight: 800; text-align: center;

}

.close-annotation {

    float: right; margin: 10px 10px 0 0; width: 11px; height: 10px; background-image: url(../img/sprites.png);

}

.annotation {

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

    transition: top 0.5s; -webkit-transition: top 0.5s;

}

.annotation-main:after, .about-collaboration:after {

    content: "."; visibility: hidden; display: block; height: 0; line-height: 0; 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;

}