html {font-size: 16px;}
body {font-family: Verdana, Arial, sans-serif; background: rgb(0, 0, 51); color: rgb(204, 204, 204); margin: 0px; }

.container {
/*  .aside-bottom {padding-bottom: 10px; }*/
/*  .article-bottom {padding-bottom: 10px; }*/
}
.container > div {
  .col-1, .col-2, .col-3, .col-4, .col-7, .col-8, .col-9, .col-10  {
    padding: 0px;
  }
/*  border: 1px solid green;*/
}

/* Mobil *****************************/
@media screen and (max-width: 600px) {
/*  html {font-size: 20px; }*/
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    .col-1, .col-3, .col-7, .col-9 {
      display: none;
    }
    .col-10 {
      background-image: url("../img/noty.png");
      background-size: cover;
      padding: 25px;
      border-top: 1px solid red;
    }
    .col-2 {
      background-image: url("../img/radekdockal.png");
      background-repeat: no-repeat;
      background-position: center center;
      padding: 25px 0px;
    }
    .col-4 {
      border-bottom: 1px solid red;
      border-top: 1px solid red;
      text-align: center;
    }
  }

/* Menu */
  nav.menubar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 10px 10px 0px 10px;
    .menubutton {text-align: right; }
  }

  aside.menu {font-size: 1rem; font-weight: bold; color: white;
    border-bottom: 1px solid red;
  }
  aside.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
  }
  aside.menu ul li {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  aside.menu a {
    padding: 0 0 0 0;
  }

  article.contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    .adresa {
      font-size: 1.2rem; font-weight: normal; text-align: center; line-height: 5px;
    }
    .foto {
      text-align: center;
    }
  }

  article.content {
    .text {
      padding: 10px;
      text-align: left;
    }
  }

  article.galerie {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 10px;

    .mImg {
      width:100%;
    }
    .fullimage {
      display: none;
    }
  }

  article.ukazky {
    padding: 10px;
    font-size: 1rem;
    overflow: auto;
  }

  article.webcounter {
    padding: 10px;
    font-size: 0.7rem;
    overflow: auto;

    table.popr th.pagename {width: 135px; }
    table.popr th.pocet    {width:  35px; }
    table.popr th.datumcas {width: 105px; }
    table.popr th.ipadresa {}
    table.popr td.pagename {width: 135px; font-weight: bold; word-wrap: normal; }
    table.popr td.pocet    {width: 35px; text-align: right; }
    table.popr td.datumcas {width: 105px; text-align: center; word-wrap: normal; }
    table.popr td.ipadresa {word-break: break-all; }

    table.anno th {width: 110px; padding:0 0 2 5; vertical-align: top; text-align: left; font-weight: normal; }
  }
}


/* Desktop ***************************/
@media screen and (min-width: 600px) {
  .container {
    width: 798px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto;

    .col-2, .col-4, .col-8, .col-10 {border-left: 2px solid red; }
    .col-3, .col-4, .col-9, .col-10  {border-top: 2px solid red; }
    .img-rd {
      background-image: url("../img/radekdockal.png");
      background-repeat: no-repeat;
      background-position: center left;
      padding: 25px;
    }
    .col-2 {padding-left: 10px; }
    .col-3 {padding-top: 5px; }
    .col-4 {font-size: 1.2rem; padding-left: 10px; }
    .col-5, .col-6 {display: none; }
    .col-7 {padding-bottom: 10px; }
    .col-9 {
      background-image: url("../img/noty1.png");
      background-repeat: no-repeat;
      padding: 35px;
    }
    .col-10 {
     background-image: url("../img/noty2.png");
     background-repeat: no-repeat;
    }
  }

/* Menu */
  aside.menu {font-size: 0.85rem; font-weight: bold; color: white;
    display: flex;
    align-items: flex-end;
    height: 400px;
  }
  aside.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  aside.menu ul li {
    width: 100%;
    margin-top: 15px;
  }
  aside.menu a {
    padding: 0 0 0 0;
  }

/* Article */
  article.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    padding: 10px;
    height: 400px;

    .adresa {
      font-size: 1rem;
      text-align: left;
      line-height: 10px;
    }
    .foto {
      text-align: right;
    }
  }

  article.content {
    padding: 10px;
    width: 648px;
    height: 400px;

    .text {
      font-size: 0.8rem;
      text-align: justify;
    }

    ul li {
      font-size: 0.8rem;
    }
  }

  article.galerie {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 55px;
    padding: 10px;
    height: 400px;

    .mImg {
      height: 48px;
      margin-right: 2px;
      cursor: hand;
      cursor: pointer;
    }
    #fullimage {
      cursor:hand;
      cursor:pointer;
    }
  }
  
  article.ukazky {  
    padding: 10px;
    width: 648px;                                
    height: 400px;
    font-size: 0.8rem;
  }

  article.webcounter {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 120px;
    padding: 10px;
    height: 400px;
    font-size: 0.8rem;

    table.popr th.pagename {width: 160px; }
    table.popr th.pocet    {width:  50px; }
    table.popr th.datumcas {width: 130px; }
    table.popr th.ipadresa {width: 250px; }
    table.popr td.pagename {width: 160px; font-weight: bold; word-wrap: normal; }
    table.popr td.pocet    {width: 50px; text-align: right; }
    table.popr td.datumcas {width: 130px; text-align: center; word-wrap: normal; }
    table.popr td.ipadresa {width: 250px; word-break: break-all; }

    table.anno th {width: 135px; border-bottom: 1px solid rgb(204, 204, 204); padding:0 0 2 5; vertical-align: top; text-align: left; font-weight: normal; }
  }
}

/* Spolecne styly */
.subheader {
  font-weight: bold;
  color: rgb(204, 204, 204);
}

.obsah {
  overflow: auto;
  width: 100%;
  height: 100%;
  padding-right: 10px;
}

/* Linky */
a         {text-decoration: none;}
a:link    {color: white;}
a:visited {color: white;}
a:hover   {text-decoration: underline;}

/* Oddelovaci cara */
.hr1 {border-width: 0px; height: 1px; background-color: rgb(204, 204, 204); }

/* Tabulka s hudebními ukázkami */
table.ukazky {border-collapse:collapse; width: 100%; padding-right: 10px; }
table.ukazky caption {text-align: left; margin-bottom: 5px; font-weight: bold; }
table.ukazky td {vertical-align: top; }
table.ukazky td.ukazky_text {vertical-align: top; height: 30px;}
table.ukazky td.ukazky_img {vertical-align: top; width: 110px; }
table.ukazky_play {width: 100%; border-top: 1px dashed rgb(204, 204, 204); margin-top: 10px; }
table.ukazky_play td {vertical-align: middle; border-bottom: 1px dashed rgb(204, 204, 204); }
table.ukazky_play td.play {width: 50px; text-align: right; }

/* Tabulka s vypisem pocitadla pristupu */
table.popr {border-collapse: collapse; table-layout: fixed; }
table.popr th {font-weight: bold; border: 1px solid rgb(0, 0, 51); padding: 5px 5px; background-color: rgb(204, 204, 204); color: rgb(0, 0, 51); }
table.popr td {border: 1px solid rgb(204, 204, 204); padding: 5px 5px; }

table.popr th.mouseover {background-color: rgb(0, 0, 51); color: white; cursor: pointer; }

table.popr td.pagename {font-weight: bold; word-wrap: normal; }
table.popr td.pocet    {text-align: right; }
table.popr td.datumcas {text-align: center; word-wrap: normal; }
table.popr td.ipadresa {word-break: break-all; }

table.anno {width: 100%; border-collapse: collapse; border-bottom: 1px solid rgb(204, 204, 204); margin-top: 10px; }
table.anno caption {font-weight: bold; text-align: left; padding:8 0 2 5; }
table.anno td {border: none; padding:1 0 1 5; vertical-align: top; }