body {
	font: 16px/1.5 Calibri, Arial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;	  
  background: #F3F8FF url('https://www.vetkom.cz/images/body-background.png') repeat-x scroll 0% 0%;
}

.main {
  background-color: #fff;
  border: 0px solid #fff;
  border-radius: 0.5em;
  box-shadow: 0px 0px 5px #888;
  width: 80%;
  margin: 2em auto;
} 

.main .content {
  margin: 1em;
}

.main .content.aside {
  margin: 0 0 0 16em; 
  padding: 1em;
}  

.cleaner {
  clear: both;
}

.footer {
  text-align: center;
  color: #888;
}

#ajax-spinner {
	margin: 15px 0 0 15px;
	padding: 13px;
	background: white url('../images/spinner.gif') no-repeat 50% 50%;
	font-size: 0;
	z-index: 123456;
	display: none;
}

div.flash {
	color: black;
	background: #FFF9D7;
	border: 1px solid #E2C822;
	padding: 1em;
	margin: 1em 0;
}

form ul.error {
	color: #000;
	background: #FFD7D7;
	border: 1px solid #E22222;
	padding: 1em;
	margin: 1em 0;
	list-style: none;
}


a[href^="#error:"] {
	background: red;
	color: white;
}


table {
  border-collapse: collapse;
}

table, td, th {
 	border: 1px solid black;  
  padding: 0.2em; 
}

th {
 	background: #cbddf9;     
}

form th, form td {
	vertical-align: top;
	font-weight: normal;
}

form th {
	text-align: right;
}

form .required label {
	font-weight: bold;
}

form span.error {
	color: #D00;
}

h1, h2 {
  /*	color: #3484D2; */
	font-size: 1.9em;
	font-weight: normal;
}

h1 {
	font-weight: bold;
	margin: 0 0 0.5em 0;
}	


h1 a {
	color: #3484D2;	
}

h2 {
	font-size: 1.44em;
}



textarea {
	min-width: 400px;
	min-height: 200px;
}



/*
.navig {
  float: right;
	margin: 0 0 1em;
	padding: 0;
	text-align: right;
}

.navig li {
	display: inline;
	margin: 0 1em 0 0;
	padding: 0;
}
*/



/* Mystyles */
/* http://codepen.io/chriscoyier/pen/DmnlJ */
form * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form > div {
  /* clear: both; */
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}

form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 25%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: right;
}
form > div > fieldset label {
	font-size: %; 
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
textarea,
select {
	width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  height: 15em;
}
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
select {
 /*  width: 50%; */ 
 height: 2em; 
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=checkbox]:focus,
textarea:focus {
  outline: 0;
  border-color: #1087c0;
  box-shadow: 0px 0px 4px #1087c0;
}
@media (max-width: 900px) {
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > div > label,
	legend {
  	text-align: right;
  }
}




  /* Záhlaví */
  .header {
    background: #1087c0;
    border-radius: 0.5em 0.5em 0 0;
    color: #fff;
    font-weight: bold;
    padding: 1em;
    border-bottom: 1px solid #0c5f87;
  }
  
  .header div {
    font-size: 1.9em;      
  }   

  .header div a {
    color: #fff;  
    text-decoration: none;    
  }

  .header div a:hover {
    text-shadow: 0px 0px 5px #F3F8FF;      
  }    
      
   
      
   /* Zápatí */
  .footer {
    margin-top: 1em;
    text-align: center;
    color: #888;
  }

  .footer a {
    color: #888;
    text-decoration: none;
  }
  
  .footer a:hover {
    color: #008;
    text-decoration: underline;
  }



   /* Dlazdice na homepage */
   .tile {
    padding-left: 50px; /* prostor na ikonku */    
    width: 40%;
    float: left;
    margin-bottom: 1em;
   }

   .tile p {
     margin: 0px;
   }
  
   .tile h2 {
     margin: 0px;    
   }  
   
   .tile h2 a {
     text-decoration: none;
   }

   .tile h2 a:hover {
     text-decoration: underline;
   }
   
   .tile.users {
     background: url("32x32/users_4.png") left 50% no-repeat;    
   }

   .tile.import {
     background: url("32x32/database_go.png") left 50% no-repeat;    
   }

   .tile.account {
     background: url("32x32/user.png") left 50% no-repeat;    
   }

   .tile.apps {
     background: url("32x32/application_cascade.png") left 50% no-repeat;    
   }
   
   .tile.logout {
     background: url("32x32/lock.png") left 50% no-repeat;    
   }   
   

   /* Dlazdice v menu */
   .menu {
     padding: 1em 0 1em 1em;
     width: 14.5em;
     overflow: visible;
     float: left;
   }
   .menu .tile {    
    padding-left: 50px; /* prostor na ikonku */
    width: 14em;    
    position: relative;
   }
   .menu .tile h2 {    
     font-size: 1.2em;
     line-height: 2em;
   }
   .menu .tile p {    
    display: none;    
   }
   /* .menu .tile:hover p {    
    display: block;
    position: absolute;
    width: 25em;
    top: 0;
    left: 10em;
    z-index: 10;
	  color: black;
	  background: #FFF9D7;
	  opacity: 0.9;	  
	  border: 1px solid #E2C822;
	  padding: 0.5em;	  
   } */ /* Bublina s nápovědou */

   



  /* Dekorace odkazů */
  
  
  a.editAccount {
    padding-left: 20px;
    background: url('16x16/vcard_edit.png') no-repeat 0 50%;
  }
  a.editEmail {
    padding-left: 20px;
    background: url('16x16/email_edit.png') no-repeat 0 50%;
  }
  a.editPassword {
    padding-left: 20px;
    background: url('16x16/lock_edit.png') no-repeat 0 50%;
  }
  a.editPhone {
    padding-left: 20px;
    background: url('16x16/phone.png') no-repeat 0 50%;
    background: url('16x16/bullet_edit.png') no-repeat 0 50%, url('16x16/phone.png') no-repeat 0 50%;
  }
  a.back {
    padding-left: 20px;
    background: url('16x16/arrow_left.png') no-repeat 0 50%;
  }
  a.forward {
    padding-left: 20px;
    background: url('16x16/arrow_right.png') no-repeat 0 50%;
  }
  a.cancel {
    padding-left: 20px;
    background: url('16x16/cross.png') no-repeat 0 50%;
  }
  a.add {
    padding-left: 20px;
    background: url('16x16/add.png') no-repeat 0 50%;
  }
  a.first {
    padding-left: 20px;
    background: url('16x16/control_start_blue.png') no-repeat 0 50%;
  }
  a.prev {
    padding-left: 20px;
    background: url('16x16/control_rewind_blue.png') no-repeat 0 50%;
  }
  a.next {
    padding-left: 20px;
    background: url('16x16/control_fastforward_blue.png') no-repeat 0 50%;
  }
  a.last {
    padding-left: 20px;
    background: url('16x16/control_end_blue.png') no-repeat 0 50%;
  }