*{
margin:0px;
padding: 0px ;
}
body{
 background-color: black;
 background-image: url(http://stock-wallpapers.com/wp-content/uploads/2014/05/Optimus-G2-Wallpaper-15.jpg);
  
}
#nadpis{
height 30%;
background-color: rgb(0,204,255);
background-image: url(http://i.imgur.com/IF0dVuY.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 36%;

}
#nadpis h1{
color: red;
height: 75px;
}
#menu{
float: left;
width: 13%;
min-width: 30px;
}
#menu ul{

width: 150px;

list-style-type: none;
height: 180px;
border-bottom-right-radius: 10%;
}
#menu ul li{
background-color: rgb(0,204,255);
height: 27px;
border-bottom-right-radius: 30px;
border-top-right-radius: 30px;

margin-top: 4px;
padding-bottom: 10px;
transition: all 1s;
font-size: xx-large;
}
#menu ul li:hover{
background-color: rgb(204,255,102);
}
#menu ul li a{
   color: #FFFFFF;
   font-family: Arial Black, Gadget, sans-serif;
   text-shadow: 0px 0px 0 rgb(198,198,198),1px 1px 0 rgb(183,183,183),2px 2px 0 rgb(168,168,168),
3px 3px  0 rgb(153,153,153),4px 4px 3px rgba(0,0,0,0.13),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
text-decoration: none;
display: block;
font-size: 18pt;
}
#obsah{
float:right;

width: 87%;
height: 100%;
 margin-top: 4px;
 padding-bottom: 100px;
}
#obrazek img{
width: 96.5%;
transition: all 1s;
border: 3px solid rgb(0,0,0);
}
#obrazek img:hover{
background-color: rgb(102,0,255);
}
#obrazek{
min-width: 100px;
width: 10%;
float: left;
margin: 10px 10px 75px 50px;
font-size: large;
border: 2px solid rgb(0,0,0);
border-radius: 0px 0px 10px 10px;
transition: all 1s;
background-color: none;
}
#obrazek:hover{
width: 13%;
font-size: x-large;
 border: 4px solid rgb(0,0,0);
 border-radius: 0px 0px 30px 30px;
 margin: 10px 10px 0px 50px;
background-color: rgb(102,204,255);
}
#sombra:hover{
background-image: url(http://kimasendorf.com/12c/images/12c-9_10_1_13_31%20Kopie.gif);
}
#WIDOWMAKER{
min-width: 100px;
width: 10%;
float: left;
margin: 10px 10px 75px 50px;
font-size: medium;
border: 2px solid rgb(0,0,0);
border-radius: 0px 0px 10px 10px;
transition: all 1s;
background-color: none;
}
#WIDOWMAKER:hover{
width: 13%;
font-size: large;
 border: 4px solid rgb(0,0,0);
 border-radius: 0px 0px 30px 30px;
 margin: 10px 10px 0px 50px;
background-color: rgb(102,204,255); 
}
#WIDOWMAKER img{
width: 96.5%;
transition: all 1s;
border: 3px solid rgb(0,0,0);
}
#WIDOWMAKER img:hover{
background-color: rgb(102,0,255);
}
#uvodni{
padding-right: 10px;
font-size: 15pt;
font-weight: bold;
padding-left: 10%;
padding-top: 5%;
color: #FFFFFF;
   font-family: Arial Black, Gadget, sans-serif;
   text-shadow: 0px 0px 0 rgb(198,198,198),1px 1px 0 rgb(183,183,183),2px 2px 0 rgb(168,168,168),
3px 3px  0 rgb(153,153,153),4px 4px 3px rgba(0,0,0,0.13),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);


}
#tlacitko{
border-radius: 30px 30px 30px 30px;
border: 3px solid rgb(102,255,102);
background: rgb(153,255,102);
font-size: 16pt;
width: 230px;
padding-bottom: 5px;
transition: all 1s;
}
#tlacitko a{
display: block;
color:white;
text-decoration: none;
}
#tlacitko:hover{
border-color: rgb(0,204,255);
background: rgb(0,204,204);
}
#r1{
padding-right: 1%;
width:24%;
float: left;
 color: #FFFFFF;
   font-family: Arial Black, Gadget, sans-serif;
   text-shadow: 0px 0px 0 rgb(198,198,198),1px 1px 0 rgb(183,183,183),2px 2px 0 rgb(168,168,168),
3px 3px  0 rgb(153,153,153),4px 4px 3px rgba(0,0,0,0.13),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
font-size: 15pt;
}
#maps{
float: right;
width: 25%;
padding-left: 7%;

}
#maps img{
width: 90%;
border: 3px double rgb(51,102,255);
}
#mod{
color: #FFFFFF;
   font-family: Arial Black, Gadget, sans-serif;
   text-shadow: 0px 0px 0 rgb(198,198,198),1px 1px 0 rgb(183,183,183),2px 2px 0 rgb(168,168,168),
3px 3px  0 rgb(153,153,153),4px 4px 3px rgba(0,0,0,0.13),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
font-size: 13pt;
float:left;
width:50%
}