body{
text-align: center;
background: transparent url('img/bg.jpg') repeat;
font-family: Tahoma, Verdana, Arial, sans;
font-size: 12px;
color: black;
margin: 20px;
}

a{
color: black;
text-decoration: none;
font-weight: bold;
}

a:hover{color: gray;}

img {border: none;}
/*------------------------------- MENU -------------------------------*/
#menu{
width: 370px;
height: 365px;
position: relative;
margin: 0 auto;
}

/*------------------------------- FOTKE -------------------------------*/
#fotke{
width: 185px;
height: 183px;
position: relative;
background: transparent url('img/fotke.png') no-repeat;
float: left;
}

#fotke:hover{background: transparent url('img/fotke2.png') no-repeat;}

/*------------------------------- SOURCE -------------------------------*/
#source{
width: 185px;
height: 183px;
position: relative;
background: transparent url('img/source.png') no-repeat;
float: left;
}

#source:hover{background: transparent url('img/source2.png') no-repeat;}

/*------------------------------- BIO -------------------------------*/
#bio{
width: 185px;
height: 182px;
position: relative;
background: transparent url('img/bio.png') no-repeat;
float: left;
}

#bio:hover{background: transparent url('img/bio2.png') no-repeat;}

/*------------------------------- KONTAKT -------------------------------*/
#kontakt{
width: 185px;
height: 182px;
position: relative;
background: transparent url('img/kontakt.png') no-repeat;
float: left;
}

#kontakt:hover{background: transparent url('img/kontakt2.png') no-repeat;}

/*------------------------------- CONTENTS -------------------------------*/
#contents{
text-align: center;
position: relative;
margin: 2em auto 0 auto;
background: transparent url('img/white.png') repeat;
border: 3px solid black;
padding: 2em;
max-width: 950px; 
}

/*------------------------------- FOOTER -------------------------------*/
#footer{
text-align: center;
position: relative;
margin: 30px auto;
}

/*------------------------------- SITNICE -------------------------------*/
.preload{display:none;}