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