player/css/styles.css
author veltr
Fri, 17 May 2013 14:17:30 +0200
changeset 1 774d75a930f8
parent 0 d4c3dc50e02a
child 2 30e0ed21127c
permissions -rw-r--r--
Added pictograms

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

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

.project-title {
    text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0; font-weight: bold;
}

.tags {
    position: absolute; top: 0; left: 0; width: 110px;
}

.tags-title {
    line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F; font-weight: bold; text-transform: uppercase;
}

/* Pictograms on the left */

.pictolist {
    position: absolute;
    left: 20px; bottom: 115px;
}

.picto {
    width: 24px; height: 24px; padding: 7px; margin-top: 12px; background:black;
    border-radius: 19px; cursor: pointer;
}

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

.picto.video:hover {
    background: #be4477;
}

.picto.video:hover a {
    background-position: -24px 0;
}

.picto.audio a {
    background-position: 0 -24px;
}

.picto.audio:hover {
    background: #63be6c;
}

.picto.audio:hover a {
    background-position: -24px -24px;
}

.picto.slideshow a {
    background-position: 0 -48px;
}

.picto.slideshow:hover {
    background: #f69058;
}

.picto.slideshow:hover a {
    background-position: -24px -48px;
}

.picto.text a {
    background-position: 0 -72px;
}

.picto.text:hover {
    background: #5e90cb;
}

.picto.text:hover a {
    background-position: -24px -72px;
}

.picto.quote a {
    background-position: 0 -96px;
}

.picto.quote:hover {
    background: #00aeb5;
}

.picto.quote:hover a {
    background-position: -24px -96px;
}

.picto.link a {
    background-position: 0 -120px;
}

.picto.link:hover {
    background: #8985bb;
}

.picto.link:hover a {
    background-position: -24px -120px;
}

/* Bottom bar */

.bottom-bar {
    padding-top: 20px;
}

.play-button {
    float: left; width: 30px; height: 30px; border-radius: 15px;
    background: #555555;
    margin: 8px 0 0 15px;
}

.chapters-bar {
    margin: 0 19px 0 59px; height: 45px; position: relative;
}

.chapter {
    position: absolute; top: 0;
}

.chapter-block {
    width: 100%; height: 45px; background: #303030;
}

.chapter:hover .chapter-block {
    background: #3e3e3e;
}

.chapter-title {
    font-size: 9px; text-transform: uppercase; margin: 0 -40px;
    text-align: center; color: #909090; display: none; line-height: 30px;
}

.chapter:hover .chapter-title {
    display: block;
}