#main{
    width: 700px;
    min-height: 500px;
    border: 1px solid;
    margin: 10px auto;
    border-radius: 5px;
    background:radial-gradient(#FFFFFF, #07FEF3);
}
ul{margin:0;}
#up{
   height: 70px;
   background: #ff7600;
   border-top-left-radius:  5px;
   border-top-right-radius:  5px;
}

#pocet_mist{
   height: 60px; 
}
#pocet_mist_1,#pocet_mist_2{
width: 90px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    float: left;
    margin: 10px 20px;
    cursor: pointer;
    background-color: #ffcd00;
    border-radius: 5px;
    box-shadow:black 2px 2px 2px;
}
#pocet_mist_1{
    color: green;
}
#label_pocet_mist{
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}
#up_right{
   width: 700px;
   height: 100px;
   
}
#content{
    height: 330px;
    background-image:url(images/intro.png);
    
}
#down{
   height: 100px;
   background: #ff7600;
   border-bottom-left-radius:  5px;
   border-bottom-right-radius:  5px;
}
#down_left{
   width: 400px;
   height: 100px;
   float: left;
}
#typ_hry{
   height: 60px; 
}
#typ_hry_1,#typ_hry_2{
    width: 120px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    float: left;
    margin: 10px 20px;
    cursor: pointer;
    background-color: #ffcd00;
    border-radius: 5px;
    box-shadow:black 2px 2px 2px;
}
#typ_hry_2{
    color: green;
}
#label_typ_hry{
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 75px;
}
#down_right{
   width: 300px;
   height: 100px;
   float: left;
}
.but, .but2{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-left:10px;
    cursor: pointer;
    box-shadow:2px 2px 2px;
    background-size: contain;
    float: left;
    list-style: none;
    margin-top: 3px;
}
.but:hover,.but2:hover,#kontrola:hover,#kontrola2:hover,#pocet_mist_1:hover,#pocet_mist_2:hover,#typ_hry_1:hover,#typ_hry_2:hover {
    box-shadow:1px 1px 1px;
}


#but0{
    background-image: url('images/plus.png');
}
#but1{
    background-image: url('images/minus.png');
}
#but2{
    background-image: url('images/krat.png');
}
#but3{
    background-image: url('images/deleno.png');
}
#buthelp{
    background-image: url('images/help.png');
    margin-right:50px;
    float:right;
}
#content_0{
   width: 650px;
   height: 110px;
   position: relative;
   top: 90px;
   left: 20px;
   display: none;
}
.c{
  width: 120px;
   height: 100px;
   float: left;
   border: 1px solid;
   margin-left: 10px;
   line-height: 100px;
   text-align: center;
   font-size: 40px;
   font-weight: bold;
   border-radius: 5px;
}
.ccc{
   box-shadow:2px 2px 2px inset;
}
#c2{
   box-shadow:2px 2px 2px inset;   
}
.z{width: 50px;
   height: 100px;
   float: left;
   border: 1px solid;
   margin-left: 10px;
   line-height: 100px;
   text-align: center;
   font-size: 40px;
   font-weight: bold;
   border-radius: 5px;
}
#kontrola{
   width: 80px;
    height: 30px;
    float: left;
    //border: 1px solid;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    background-color: #ffd000;
    border-radius: 5px;
    box-shadow:2px 2px 3px;
}
#content_1{
   width: 400px;
   height: 300px;
   position: relative;
   top: 0px;
   left: 20px;
   margin-top: 10px;
   display: none;
}
.cc{
    width: 80px;
    height: 40px;
    float: left;
    border: 1px solid;
    margin-left: 10px;
    line-height: 40px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-top: 5px;
   
}

.zz{    
    width: 30px;
    height: 40px;
    float: left;
/*    border: 1px solid;*/
    margin-left: 10px;
    line-height: 40px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-top: 5px;
}
#kontrola2{
    width: 160px;
    height: 60px;
    float: left;
    //border: 1px solid;
    margin-right: 10px;
    line-height: 60px;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    position: relative;
    top: -200px;
    left: -70px;
    display: none;
    background-color: #ffd000;
    border-radius: 5px;
    box-shadow:2px 2px 3px;
}
.neklikaci{    pointer-events: none;}

#help {
    background: rgba(255, 118, 0, 0.9);
    width: 600px;
    margin: 0 auto;
    height: 120px;
    position: relative;
    top: -420px;
    z-index: 100;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    border: 1px solid black;
    box-shadow: 3px 3px 3px black;
     display: none; 
    color: black;
    z-index: 10;
}
#kriz{
   float:right;
   margin:5px;
    cursor: pointer;
}
#popup_text{
  font-size: 22px;
    margin: 5px;
    font-weight: bold;
    text-align: justify;

}
#intro{
    width: 698px;
    height: 300px;
    position: relative;
    top: -300px;
    left: 0px;
    border: 1px solid;
    background-image: url('images/intro.png');
}