body {
    margin:         0;
    padding:        0;
    overflow:       hidden;
}

img {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

.clear {
    clear:              both;
}

.disabled {
    visibility:         hidden;
}

.hidden {
    visibility:         hidden;

}

.none {
    display:            none;
}

.canvas {
    position:           relative;
}

#thumbnails {
    position:           absolute;
    bottom:             41px;
}

.toggle {
    position:   absolute;
    height: 14px;
    text-align: right;
    position: relative;
    z-index: 1000;
    top: -5px;
}

#thumbnails .placard {
    height:             40px;
    width:              100%;
    background:         #2E262E;
    opacity:            0.8;
    z-index:            11;
    display:            none;
}

#thumbnails .content {
    height:             40px;
    width:              100%;
    position:           absolute;
    bottom:             0px;
    z-index:            12;
    display:            none;
}

#thumbnails .left {
    position:           absolute;
    left:               10px;
    bottom:             0px;
    height:             40px;
    width:              16px;
}

#thumbnails .right {
    position:           absolute;
    right:              10px;
    bottom:             0px;
    height:             40px;
    width:              16px;
}

#thumbnails .left a {
    width:              8px;
    height:             40px;
    display:            block;
}

#thumbnails .right a {
    width:              8px;
    height:             40px;
    display:            block;
}

#thumbnails .middle {
    position:           absolute;
    bottom:             0px;
    width:              185px;
    height:             40px;
    overflow:           hidden;
}

#thumbnails .thumb {
    opacity:            1.0;
}

#thumbnails .thumb.active {
    opacity:            0.8;
}


#bottom {
    height:             40px;
    width:              100%;
    position:           absolute;
    bottom:             0px;
    z-index:            2;
}

.dots {
    height:             16px;
    position:           absolute;
    top:                0px;  
}

.dots .left {
    position:           absolute;
    left:               10px;
    bottom:             0px;
    height:             16px;
    width:              16px;
}

.dots .right {
    position:           absolute;
    right:              10px;
    bottom:             0px;
    height:             16px;
    width:              16px;
}

.dots .left a, .dots .right a {
    display:            block;
    width:              16px;
    height:             16px;
}

.dots .left a {
}

.dots .right a {
}

.dots .middle {
    position:           absolute;
    bottom:             0px;
    width:              185px;
    height:             16px;
    overflow:           hidden;
}

.middle .holder {
    position:           relative;
    width:              6000px;
}

.middle .thumb {
    float:              left;
    width:              60px;
    text-align:         center;
    color:              #757075;
    font-size:          10px;
    line-height:        15px;
}

.middle .thumb a {
    color:              #757075;
    text-decoration:    none;
}

.middle .active a {
    color:              #FFC6A8;
    font-size:          16px;
}

.middle .active img {
    opacity:            0.8;
}

.controls {
    position:           absolute;
    bottom:             5px;
    font-family:        'Georgia';
    color:              #e6e6e6;
    font-size:          10px;
    width:              100%;
    text-align:         center;
}

.controls .left {
    position:           absolute;
    left:               10px;
    bottom:             0px;
}

.controls .middle {
    position:           absolute;
    bottom:             0px;
    width:              190px;
}

.controls .right {
    position:           absolute;
    right:              10px;
    bottom:             0px;
}

.slower {
    float:              left;
    width:              65px;
    text-align:         left;
    height:             16px;
    line-height:        16px; 
    font-style:         italic;
    font-size:          10px;
}

.buttons {
    float:              left;
    width:              60px;
    text-align:         left;
    height:             16px;
    line-height:        16px; 
    font-style:         italic;
    font-size:          10px;
}

.buttons .prev {
    float: left;
    text-align: center;
    width: 20px;
    height: 16px;
}

.buttons .play {
    float: left;
    text-align: center;
    width: 20px;
    height: 16px;
}

.playButton {
}   

.pauseButton {

} 

.buttons .next {
    float: left;
    text-align: center;
    width: 20px;
    height: 16px;
}



.faster {
    float:              left;
    width:              65px;
    text-align:         right;
    height:             16px;
    line-height:        16px;    
    font-style:         italic;
    font-size:          10px;    
}

.controls a {
    color:              #e6e6e6;
    text-decoration:    none;
}

.controls a:hover {
    color:              #FFC6A8;
}

#bottomPlacard {
    height:             40px;
    width:              100%;
    position:           absolute;
    bottom:             0px;
    z-index:            1;
    background:         #2E262E;
    opacity:            0.8;
}