body {
    text-align:center;
    background-color:#fff;
    border:0;
    padding:0;
}

* {
    border:0;
    margin:0;
    padding:0;
    text-decoration:none;
}

canvas#animation {
    margin:0 auto 0 auto;
    text-align:left;
}

#wrapper {
    width:1024px;
    height:571px;
    text-align:left;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
}

#wrapper ul {
    list-style: none outside none;
}

#wrapper #control-panel {
    position:relative;
    z-index:2;
    width:1024px;
    height:33px;
    background-color:#fff;
    margin-left:0;
    margin-top:-43px;
    border-bottom:1px solid #e5e5e5;
    font-family:'Yanone Kaffeesatz', sans-serif;
    line-height:20px;
}

#wrapper #central-play-button {
    position:absolute;
    z-index:3;
    margin-left:352px;
    margin-top:230px;
    cursor:pointer;
}

#wrapper #credits-panel, #wrapper #glossary-panel {
    position:absolute;
    z-index:4;
    width:700px;
    height:380px;
    border-radius:20px;
    background-color:#fff;
    margin-top:60px;
    margin-left:142px;
    display:none;
    opacity:0;
    color:#000;
    font-size:18px;
    font-family:'Yanone Kaffeesatz', sans-serif;
}

#wrapper #credits-panel, #wrapper #glossary-panel, #wrapper #control-panel #chapters-details {
    -webkit-box-shadow: 0 0 6px #666;
       -moz-box-shadow: 0 0 6px #666;
            box-shadow: 0 0 6px #666;
}

#wrapper #credits-panel {
    text-align:center;
}

#wrapper #glossary-panel {
    text-align:left;
}

#wrapper .vertical-menu {
     text-align:right;
     color:#b7b7b7;
     float:left;
     width:170px;
}

#wrapper .definitions {
     float:left;
     margin-left:30px;
     width:480px;
}

#wrapper .vertical-menu , #wrapper .definitions {
    height:300px;
}

#wrapper .definitions li {
    display:none;
    width:480px;
}

#wrapper .definitions h4 {
    color:#df5239;
    font-size:18px;
    margin-bottom:4px;
    font-weight:700;
}

#wrapper .vertical-menu li {
    width:170px;
    height:22px;
    cursor:pointer;
    display:block;
}

#wrapper .vertical-menu li.selected {
     color:#000;
}

#wrapper h2 {
    float:left;
    color:#df5239;
    font-size:22px;
    font-weight:700;
    padding:15px;
    margin-top:-10px;
}

#wrapper .right-annotation {
    float:right;
    padding:10px;
}

#wrapper a.bottom-annotations {
    text-decoration:none;
    color:#b7b7b7;
    float:right;
    margin-right:15px;
}

#wrapper #mask {
    position:absolute;
    z-index:3;
    width:1024px;
    height:576px;
    background-color:#fff;
    opacity:0.3;
    margin-top:0;
    margin-left:0;
}

#wrapper img.close {
    float:right;
    cursor:pointer;
    margin-right:6px;
    margin-top:6px;
}

#wrapper .spacer {
    clear:both;    
}

#wrapper #control-panel>div {
    float:left;
    height:26px;
    margin-top:7px;
    border-right:2px solid #e5e5e5;
    text-align:center;
    cursor:pointer;
    padding:0 10px;
}

#wrapper #control-panel #chapters {
    width:250px;
    color:#df5239;
    font-size:20px;
    font-weight:700;
}

#wrapper #control-panel #chapters-details {
    position:absolute;
    z-index:3;
    border-radius:10px;
    background-color:#fff;
    width:250px;
    height:auto;
    margin-top:40px;
    margin-left:0;
    padding:10px;
}

#wrapper #control-panel #chapters-details li {
    width:100%;
    padding:4px 0;
}

#wrapper #control-panel #chapters-details li.main-chapter {
    color:#df5239;
    font-size:20px;
    font-weight:700;
}

#wrapper #control-panel #chapters-details li.chapter {
    border-bottom:2px solid #e5e5e5;
    cursor:pointer;
}

#wrapper #control-panel .texts {
    width:auto;
    color:#b7b7b7;
    font-size:18px;
}

#wrapper #control-panel #timeline-container {
    padding:8px 10px;
    height:10px;
    text-align:left;
    width:auto;
    margin-right:480px;
    border:none;
}

#wrapper #control-panel #timeline-container .timeline-chapter {
    height:5px;
    background-color:#b3b3b3;
    margin-right:2px;
    float:left;
}

#wrapper #control-panel #timeline-container .timeline-played {
    height:5px;
    background-color:#3744ae;
    width:0;
}

#wrapper #control-panel .button {
    width:24px;
    height:24px;
    padding:1px 0;
}

#wrapper #control-panel #previous-chapter.button {
    background: url('../img/buttons.png') -24px -48px no-repeat;
}

#wrapper #control-panel #next-chapter.button {
    background: url('../img/buttons.png') 0 -48px no-repeat;
}

#wrapper #control-panel #pause.button {
    background: url('../img/buttons.png') -24px 0 no-repeat;
}

#wrapper #control-panel #play.button {
    background: url('../img/buttons.png') 0 0 no-repeat;
}

#wrapper #control-panel #replay.button {
    background: url('../img/buttons.png') 0 -96px no-repeat;
}

#wrapper #control-panel .toolTip {
    position:absolute;
    margin-top:-35px;
    width:auto;
    min-height:18px;
    padding:2px 5px;
    border-radius:4px;
    background-color:#fff;
    color:#b7b7b7;
}