@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap');

html {
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  -webkit-text-size-adjust: none;}

body {
  line-height: 1.5;
  margin: auto;
  padding: 0px;
}

main, header, footer {
  width: 900px;
  margin: auto;
  box-sizing: border-box;
}

main {padding-top: 20px;}

header {
  width: 100%;
  background-color: black;
  padding-top: 30px;
  padding-bottom: 30px;
}

footer {font-size: 0.8rem;}

h1 {
  width: 900px;
  margin: auto;
  color: white;
}

.gray {
  color: gray;
  font-style: italic;
}

a {color: #0A4260;}

.upozorneni, .dulezite {
  padding: 20px;
}

.upozorneni {
  border: 1px solid #FF6A62;
  background-color: #FF6A62;
  color: white;
}

.dulezite {background-color: #99D5F5;}

ul li {list-style-type: square;}
ul {padding-left: 20px;}
ol {padding-left: 0px; list-style-position: inside;}

table {
  border-collapse: collapse;
  border-bottom: 1px solid black;
}

table th {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  font-weight: normal;
}
th, td {padding: 3px 10px 3px 10px;}

ol.ukoly {list-style: none; padding-left: 0px;}

ol.ukoly > li {
  padding: 15px 15px 10px 15px;
  background-color: #f5f2f0;
  border-left: 7px solid gray;
  margin-bottom: 20px;
}

ol.ukoly h2 {
  font-size: 1rem;
  text-transform: uppercase;
  color: gray;
  font-weight: bold;
  display: inline;
}

@media all and (max-width: 900px) {
   main, header, footer {width: 100%; padding-left: 20px; padding-right: 20px;}
   h1 {width: 100%;}
}