@font-face
{
    font-family: 'Organo';
    src: url('../font/organo.ttf') format('truetype');
}

body {
    background: #a06201;
    cursor: url(../gfx/cursor.png), auto;
}

#canvas
{
    position: relative;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
}

.footer
{
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    font-family:Arial;
    font-size:14px;
    position: absolute;
    padding-left: 0px;
    padding-right: 12px;
    top: 625px;
    text-align: right;
    line-height: 18px;
    font-weight: bold;
}

.footer .version
{
    color: white;
}

.footer a,
.footer a:visited
{
    color: rgb(24, 24, 156);
    text-decoration:none;
}

#player_panel
{
    width: 640px;
    height: 64px;
    position: absolute;
    top: 580px;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#lang_panel
{
    margin-left: 16px;
}

.button
{
    width: 64px;
    height: 64px;
    float: left;
    margin-right: 5px;
}

#playBtn
{
    left: 5px;
}

.playBtn
{
    background-image: url('../gfx/ui/buttonPlay.png');
}

.playBtn:hover
{
    background-image: url('../gfx/ui/buttonPlayHover.png');
}

.pauseBtn
{
    background-image: url('../gfx/ui/buttonPause.png');
}

.pauseBtn:hover
{
    background-image: url('../gfx/ui/buttonPauseHover.png');
}

.muteBtn
{
    background-image: url('../gfx/ui/buttonUnmute.png');
}

.muteBtn:hover
{
    background-image: url('../gfx/ui/buttonUnmuteHover.png');
}

.unmuteBtn
{
    background-image: url('../gfx/ui/buttonMute.png');
}

.unmuteBtn:hover
{
    background-image: url('../gfx/ui/buttonMuteHover.png');
}

.lang
{
    opacity: 0.7;
}

.lang:hover
{
    opacity: 1;
}

.langEN
{
    background-image: url('../gfx/ui/buttonLangEN.png');
    
}

.langPL
{
    background-image: url('../gfx/ui/buttonLangPL.png');
}

.langUR
{
    background-image: url('../gfx/ui/buttonLangUR.png');
}

/* on screen arrows panel */

#arrows_panel
{
    width: 128px;
    height: 64px;
    padding: 10px;
    position: absolute;
    margin-top: -160px;
    margin-left: 640px;

    opacity: 0.3;
    
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#arrows_panel div
{
    position: absolute;
}

.buttonAR
{
    width: 100px;
    height: 100px;
    top: 10px;
}

#keyLeftBtn
{
    left: 0px;
}
.keyLeftBtn
{
    background-image: url('../gfx/ui/buttonKeyLeft.png');
    background-size: 100px 100px;
}

#keyRightBtn
{
    left: 210px;
}
.keyRightBtn
{
    background-image: url('../gfx/ui/buttonKeyRight.png');
    background-size: 100px 100px;
}

#keyUpBtn
{
    left: 105px;
    top: -55px;
}
.keyUpBtn
{
    background-image: url('../gfx/ui/buttonKeyUp.png');
    background-size: 100px 100px;
}

#keyDownBtn
{
    left: 105px;
    top: 50px;
}
.keyDownBtn
{
    background-image: url('../gfx/ui/buttonKeyDown.png');
    background-size: 100px 100px;
}