/* 
    Document   : ais5
    Created on : 06.05.2013, 15:38:02
    Author     : WerWolf
    Description:
        Purpose of the stylesheet follows.
*/

#main {
    display: table;
    cursor : default !important;
    width  : 100%;
    height : 100%;
}

#preload.default {
    display:    table;
    position: relative;
    width:      200px;
    height:     200px;
    margin:     auto;
    text-align: center;
    top:        20%;
}

#preload.small {
    text-align: center;
}
#preload.small *{
    display: none;
}
#preload.small img{
    display: inline-block;
    height: 100%;
    max-height: 166px;
    top:0px;
}

#playerbox {
    text-align: center;
}

#canvasDivRow {
    display: table-row;
    text-align: center;
    height: 100%;
}

#canvasDivCell {
    display: inline-block;
    vertical-align: bottom;
}

#controls {
    display: table-cell;
    background: #f5f5f5;
    padding: 3px;
    text-align: center;
    width: 100%;
    
    //src: http://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

#controls > div {
    white-space: nowrap;
    display: inline;
    margin: 0px 10px;
}

#controls span, #controls input  {
    cursor: pointer;
    vertical-align: middle;
}

#controls span[id^="btn"] {
    width:  24px;
    height: 24px;
    display:inline-block; 
    background: no-repeat transparent;
}
#controls input{
    margin: 0px; 
    border: 0px;
}
#controls #speedbar{
    width: 50px;
}
#controls #progbar{
    min-width: 50%; 
    max-width: 100%;
}

#controls #btnBack         {background-image: url('./img/backw.gif')}
#controls #btnBack:hover   {background-image: url('./img/backw_over.gif')}
#controls #btnBack:active  {background-image: url('./img/backw_pressed.gif')}

#controls #btnPlay.play         {background-image: url('./img/play.gif')}
#controls #btnPlay.play:hover   {background-image: url('./img/play_over.gif')}
#controls #btnPlay.play:active  {background-image: url('./img/play_pressed.gif')}

#controls #btnPlay.pause         {background-image: url('./img/pause.gif')}
#controls #btnPlay.pause:hover   {background-image: url('./img/pause_over.gif')}
#controls #btnPlay.pause:active  {background-image: url('./img/pause_pressed.gif')}

#controls #btnStop         {background-image: url('./img/stop.gif')}
#controls #btnStop:hover   {background-image: url('./img/stop_over.gif')}
#controls #btnStop:active  {background-image: url('./img/stop_pressed.gif')}

#controls #btnForw         {background-image: url('./img/forw.gif')}
#controls #btnForw:hover   {background-image: url('./img/forw_over.gif')}
#controls #btnForw:active  {background-image: url('./img/forw_pressed.gif')}

#controls #btnSlower         {background-image: url('./img/slower.gif')}
#controls #btnSlower:hover   {background-image: url('./img/slower_over.gif')}

#controls #btnFaster         {background-image: url('./img/faster.gif')}
#controls #btnFaster:hover   {background-image: url('./img/faster_over.gif')}