body {
    background-image: url("images/bg_body.png");
    max-height: 800px;
}
#main{
    background: radial-gradient(#FFFFFF, #BFCFFF);
    background-repeat: no-repeat;
    width: 900px;
    height: 600px;
    margin: 10px auto;
    border: black 1px solid;
    border-radius:5px;
}

#ovl{
    width: 900px;
    height: 70px;
    background: #809FFF ;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    box-shadow: 0 5px 5px -3px #100800;
}
#game{
   width: 900px;
   height: 460px;
   display:flex;
   visibility:hidden;
}
#game_left{
   flex:1;
   height:100%;
}
#game_right{
   flex:1;
   height:100%;
}
#game_right_obr{
	margin-top: 20px;
}
.obr{
    width: 100px;
    height: 100px;
    border: solid 1px #809FFF;
    border-radius: 5px;
    margin: 20px;
    float: left;
    background-size: cover;
    box-shadow: 0 5px 5px -6px #100800;
    cursor:pointer;
}
#game_left_vzor{
   width:250px;
   height:250px;
   border: solid 5px #809FFF;
   border-radius:5px;
   margin: auto;
   margin-top: 50px;
   background-size: cover;
}
#game_left_obr{
   width:1px;
   height:1px;
   //border:solid 1px;
   border-radius:5px;
   margin: auto;
   background-size: cover;
   position:relative;
   left:0;
   top:74px;
}
#game_left_but{
   width:100%;
   height:90px;
}
#game_left_text{
    width: 80%;
    height: 50px;
    box-shadow: 0 5px 5px -4px #100800 inset;
    margin: auto;
    background-color: #f2f2e7;
    font-size:25px;
    font-weight:bold;
    line-height:50px;
    color:#0a0500;
    text-align:center;
}

#down{
    width: 900px;
    height: 60px;
    background: #809FFF ;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
#alert{
    width: 600px;
    height: 50px;
    margin: 10px auto;
    font-size:25px;
    font-weight:bold;
    line-height:50px;
    text-align:center;
    color:#0a0500;
}
/*tlacitka*/
.but{
    width: 50px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin: 10px 15px;
    color: black;
    border-radius: 5px;
    border: solid 1px #e5ebfe;
    box-shadow: 0 5px 5px -6px #100800;
    background-color: #e5ebfe;
}
.but:hover,.but:active,.but:visited,.but:focus{
	box-shadow: 0 5px 5px -5px #100800 inset;
	border:1px solid #809FFF;
	outline: none;
}
.but_vzor{
    margin-top: 25px;
    float: left;
    border: solid 1px #809FFF ;
    background-color: #809FFF;
}
#but_zvuk{
    background-image:url(images/volume_ano.png);
    background-size:cover;
    visibility:hidden;
    margin-left: 100px;
}
#but_efekty{
    background-image:url(images/volume_ano.png);
    background-size:cover;
    float:right;
}
#but_zver1{
    background-image:url(images/bt_zver.png);
    background-size:cover;
}
#but_skola1{
    background-image:url(images/bt_skola.png);
    background-size:cover;
}
#but_cisla1{
    background-image:url(images/bt_cisla.png);
    background-size:cover;
}
#but_ovoce1{
    background-image:url(images/bt_ovoce.png);
    background-size:cover;
}
#but_mesto1{
    background-image:url(images/but_mesto.png);
    background-size:cover;
}
#but_byt1{
    background-image:url(images/but_byt.png);
    background-size:cover;
}
#but_dalsi{
    background-color: #809FFF;
    visibility:hidden;
    width:100px;
    margin-left: 95px;
}
#but_help{
   float:right;
   background-image:url(images/help.png);
   background-size:cover;
}
/*pomoc a demo*/
#popup_demo{
    background: rgb(255, 193, 7);
    width: 600px;
    margin: 0 auto;
    //height: 150px;
    position: relative;
    top: -450px;
    z-index: 100;
    font-size: 20px;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 3px 3px 3px;
    display: none;

}
#popup_text{
/*
    height: 150px;
    margin: 10px auto;
*/
}
#kriz{
    float: right;
    cursor: pointer;
}

/*intro*/
#intro{
    width: 900px;
    height: 460px; 
    background-image:url(images/intro.png);
    background-size: cover;
    
}