* { margin: 0; padding: 0; }
* 
html { 
overflow-y: scroll;
}

body { 
background:#F0F0F0;  
color: #000000; 
font-family: Arial, helvetica, sans-serif;
}

#menu ol, ul { 
list-style: none; 
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
background-color: #152635; 
}

#menu ul li {
margin: 0; 
padding: 0;
background-color: #152635; 
}

h1 { 
color: #111111;
}	

#menu a {
font-size: 14pt;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif; 
text-decoration: none; 
color: #FFF; 
padding-top: 8px;
padding-bottom: 8px;
padding-right: 5px;
padding-left: 5px;
}

#menu a:hover {
background-color: #ed8600;  
padding-top: 8px;
padding-bottom: 8px;
padding-right: 5px; 
padding-left: 5px;  
}

p { 
font-size: 11pt;
margin-top: 10px;
}

img { 
display: block; 
margin-bottom: 10px;
}

aside { 
font-style: italic; 
font-size: 0.9em;
}

article, aside, details, figcaption, figure,
footer, hgroup, header; menu, nav, section { 
display: block;
}
	
/* Structure */
#page {
width: 100%;
margin: auto;	
margin-top: 20px;
background-image: url(../skin/back_body.png);
background-repeat: repeat-x;
background-color: #D7B46D;
} 
  
#menu {
text-align: center;
margin-top: -20px;
} 

#content {
width: 930px;
min-height: 250px;
margin: auto;
background-color: #FFFFFF;  
padding: 20px;  
background-image: url(../skin/back_content.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;     
}

#content h1 {
color: #404344;  
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif;           
}

#content strong {
color: #152635; 
font-size: 12pt;               
}

#content ol {
padding-left: 25px;
font-size: 11pt;            
}

#main {
width: 90%;
margin-top: 30px;
padding: 2%;
}		
		
aside {
width: 35%;
float: right;
}

header {
width: 960px;
margin: auto;  
background:#F0F0F0; 
margin-bottom: 0px;    
}
       
header h1 {
margin-left: 5%;
height: 140px;
width: 250px;
background: url(../skin/logo.png) 0 0 no-repeat;
}
	
#ucet {
float: right;
margin-right: 2%;  
} 

#facebook {
float: right;
margin-right: 5%;  
} 

#footer {
clear: both;
background-color: #152635;
color: #ffffff; 
}

.text {
width: 960px;  
margin: auto;
padding: 10px;
text-align: justify;  
}        
        
.text p {
font-size: 10pt;          
} 

.login {
text-align: center; 
font-size: 8pt;      
}

.login a {
color: #ffffff;
text-decoration: none;         
}

.login a:hover {
color: #ffffff;
text-decoration: underline;         
}

/* Nav */
#menu nav {
margin-top: 20px; 
}
	
#menu nav li {
display: inline;
margin-left: 15px;
}


/* Banner */			
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
}

#banner img {
width: 100%;
}


/*  obsah */

a img{
border: none;     
}
a {
text-decoration: none; 
border: none;  
}
                                  
a .col4 {
border: solid 8px #f0f0f0; 
text-decoration: none;  
}

a:hover .col4 {
border: solid 8px #F2E3CA;           
}

.clear {
clear: both;
}
     
.col4 {
height: 290px;
width: 200px;
border: solid 8px #f0f0f0;
margin: 20px 10px;
}


/* Form */

#contact {
width: 500px;
float: right; 
margin-bottom: 50px;      
}

#contact input[type="text"] {
width: 465px;
height: 35px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #CECECE;
padding-left: 5px;
margin-bottom: 10px;
}

#contact textarea {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #CECECE;
width: 465px;
height: 115px;
font-family: arial;
padding-left: 5px;
padding-top: 5px;
margin-bottom: 10px;
}

#contact input[type="submit"] {
background-color: #ED8600;
color: white;
font-weight: bold;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-width: 0px;
padding: 8px;
width: 150px;
cursor: pointer;   
}

#contact input[type="submit"]:hover {
background-color: #496D09;
}


#contact form {
margin-top: 20px;
}

#contact label {
font-weight: bold;
margin-top: 10px;
}

#contact ul.errors {
list-style: none;
color: red;
font-weight: bold;
font-size: 11px;
position: relative;
top: -10px;
left: 5px;
margin-bottom: -25px;
}



/* Media Queries */

@media (min-width: 1024px) {

.container {
width: 960px;
margin: auto;
padding: 20px;
padding-left: 40px;
}

.col4 {
width: 200px;
float: left;
}
}


@media (min-width: 600px) and (max-width: 1023px) {

#content {
width: 96%;  
padding: 2%;        
}
  
.container {
width: 96%;
margin: 0 2%;
float: left;
}

.col4 {
float: left;
}
  
.clear {
clear: both;
}

.text {
width: 95%;
padding: 2%;      
}

/*  menu            */

#menu a {
padding: 2px 5px 2px 5px;
}

#menu a:hover {
padding: 2px 5px 2px 5px;
}
}


@media (max-width: 599px) {

.col4 {
width: 200px;
}

#content {
width: 96%; 
padding: 2%;         
}

.container {
width: 96%;
margin: 0 2%;
float: left;
}

.clear {
clear: both;
}

.text {
width: 95%;
padding: 2%;      
}
}


@media screen and (max-width: 768px) {

#content {
width: 96%; 
padding: 2%;         
}

.col4 {
width: 200px;
margin-left: 40px;
}

header {
width: 100%;       
}
       
#footer {
width: 100%        
} 
          
header h1 {
margin-left: 50px;
margin-top: 50px;
}

#ucet, #facebook {
margin-top: -50px;             
}

#ucet {
margin-right: 50px;      
}

#facebook {
margin-right: 10px;      
}
}


@media screen and (max-width: 480px) {

.container {
width: 96%;
margin: auto;
}

.col4 {  
width: 175px;
height: 255px;
border: solid 4px #f0f0f0;
margin: 2%;
margin-right: 5%;
float: right;
}

.col4 img {
width: 175px;
}
  
a .col4 {
border: solid 4px #f0f0f0; 
text-decoration: none;  
}

a:hover .col4 {
border: solid 4px #F2E3CA;           
}
  
#content {
width: 96%;   
padding: 2%; 
margin-top: 170px;    
}

header {
width: 100%;       
}
       
#footer {
width: 100%        
}
        
#text {
width: 98%;      
}                      

header h1 {
margin-left: 10px;
margin-top: 50px;
}

#ucet, #facebook {
margin-top: -50px;             
}

#ucet {
margin-right: 100px;      
}

#facebook {
margin-right: 10px;      
}

nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px; 
width: 100%;
}	
    
#menu nav li {
margin: 0;
padding: 0;
background-color: #152635; 
display: block;
margin-bottom: 3px;
border-bottom: solid 2px #F0F0F0;
}
      
#menu nav a {
display: block;
text-align: center;
}			
}


@media screen and (max-width: 320px) {

.container {
width: 80%;
margin: auto;
}

.col4 {  
width: 175px;
height: 255px;
border: solid 4px #f0f0f0;
margin: 2%;
}

.col4 img {
width: 175px;
}
}