/* variables */
:root {
  --green-grey-190: #DEEFDD;
  --green-grey-180: #D1E3CF;
  --green-grey-170: #becebb;
  --green-190:#F2FFF2;
  --green-180:#DDEEDC;
  --green-170:#D0F2CE;
  --green-150:#BBDDB9;
  --green-140:#97BC96;
  --green-110:#457345;
  --green-100:#365C36;
  --green-80:#1E371E;

  --grey-180:#ebebeb;
  --grey-175: #B1B1B1;
  --grey-150: #999999;
  --grey-100: #646464;
  --white: #ffffff;
  --black: #111111;
}

/* body */
body {margin:0; background:var(--green-grey-190); font-family:Verdana, Geneva, sans-serif; font-size:16px;}

/* elements */
a {color:var(--green-100); fill:var(--green-100); text-decoration:none;}
a:hover {color:var(--green-140); fill:var(--green-140);}

h1 {margin:15px 0 5px 0; font-size:150%;}
h2 {margin:50px 0 0 0; font-size:120%;}
h3 {margin:5px 0 5px 0; font-size:110%;}
h4 {margin:0; font-size:100%;}

pre {white-space:pre-line; font-family:Verdana, Geneva, sans-serif;}

table {width:100%; font-size:90%;}
  table td {border-bottom:1px solid #999;}
  table tr:hover td {border-bottom:1px solid #ccc; background:var(--green-grey-180);}
  table .main {min-width:250px;}
  .tableIcon {text-align:center; width:24px;}


/* layout */ 

#header {display:flex; align-items:center; justify-content:space-between; width:1200px; margin:auto; padding:10px 5px 5px 5px;}
  .logo, .logo-title {height:40px;}

#toplines {width:100%; margin-top:0px; overflow:hidden;}
  #toplines1 {width:100%; height:30px; border-top:1px solid var(--grey-150); background:var(--green-170);}
  #toplines2 {width:100%; height:5px; border-bottom:1px solid var(--grey-100); background:var(--green-140);}

#menu {display:flex; justify-content:space-between; max-width:1200px; margin:0 auto;}
  #menu .item {display:block; height:100%;}
  #menu .item .title {display:flex; align-items:center; padding:3px 20px; font-weight:bold; font-size:125%;}
  #menu .item .icon {width:16px; height:16px; margin-right:10px;}
  #menu .item:hover .icon {opacity:0.7;}
  #menu .item.active .bar,#menu .item:hover .bar {display:block; height:10px; background:var(--green-110);}
#menu-mobile {display:none;}

.submenu {display:flex; flex-direction:column; margin-bottom:15px;}
  .submenu .icon {width:14px;}
  .submenu .list-item {padding:2px 5px;}
    .submenu .list-item.active {background:var(--green-grey-170);}
  

#container {display:flex; justify-content:space-between; width:1200px; min-height:1000px; margin:auto;}
  #leftcol {width:15%; min-height:300px; border-left:1px solid var(--grey-100); border-right:1px solid var(--grey-150); background:var(--green-grey-180);}
  #middlecol {width:85%;}
    #container.threecol #middlecol {width:60%;}
  #rightcol {width:25%; min-height:300px; border-right:1px solid var(--grey-100); border-left:1px solid var(--grey-150); background:var(--green-grey-180);}
  
  #leftcol h2, #rightcol h2 {margin-top:0px; margin-bottom:5px; padding:3px 5px; background:var(--green-140); font-size:100%;}
  #leftcol h2 img, #rightcol h2 img {width:14px; margin-right:5px;}

.h1desc {margin-bottom:20px;}
.mainbox {clear:both; margin:0 10px 10px 10px;}
  .mainbox.promo {display:flex; justify-content:space-between;}
  .mainbox.columns {display:flex; justify-content:space-around;}
  .mainbox.gallery {display:flex; flex-wrap:wrap;  justify-content:space-between;}
    .mainbox.gallery .item {width:225px; margin-bottom:10px; font-size:80%;}
  .mainbox.right {display:flex; justify-content:flex-start;}
    .mainbox.right .img {margin-right:10px;}
    
#footer {display:flex; align-items:center; justify-content:space-between; width:1200px; margin:0 auto 50px auto; border-top:1px solid var(--black); font-size:90%; text-align:center;}


/* classes */
.icon {width:16px; height:16px;}
.icolink {display:inline-flex; align-items:center;}
  .icolink .icon {width:10px; height:10px; margin:0 2px;}
.list-item {display:flex; align-items:center; gap:5px; margin-bottom:5px;}
  .list-item .icon {margin-right:2px;}
.promo .item {width:32%; padding-bottom:10px; border:1px solid var(--black); border-radius:5px; background:var(--green-grey-180); font-size:80%; text-align:center;}
  .promo .item img {width:100%;}
.mobileOnly {display:none;}
.noMobile {}
.item-news {margin-bottom:10px; font-size:85%;}
.poznamka, .note {font-size:80%; color:var(--grey-100);}
.count {margin-left:3px; padding:0px 3px; border:1px solid var(--green-100); border-radius:30%; background:var(--green-180); color:var(--green-100); font-size:70%;}


/* buttons */
.button-dog {display:flex; align-items:flex-end; margin-bottom:25px;}
  .button-dog img {width:64px; margin-right:5px;}
  .button-dog .title { font-size:80%;}

.imgCont {height:150px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--green-100); border-radius:5px;}
  .imgCont img {width:105%;}
.imgDetail {width:100%;}
  .imgDetail img {max-width:100%;}


.generation {display:flex; flex-direction:column; text-align:center;}
.generation .row {display:flex;}
.genLine {height:30px; margin:auto; border:1px solid var(--black); border-bottom:0;}

.gen2 a, .gen2 .genLine {width:50%; font-size:90%;}
.gen3 a, .gen3 .genLine {width:25%; font-size:80%;}
.gen4 a, .gen4 .genLine {width:12.5%; font-size:70%;}
.gen5 a, .gen5 .genLine {width:6.25%; font-size:60%;}






/* mobile */
@media only screen and (max-width: 600px) {
body {width:99%; margin:auto; font-size:90%;}
.mobileOnly {display:block;}
.noMobile {display:none;}

#container {flex-direction:column; width:100%;}
  #header {width:95%;} 
  #footer {width:100%;} 
  .logo, .logo-title {height:30px;}
  h1 {margin:5px 0 2px 0; font-size:130%;}
  #leftcol h2, #rightcol h2 {margin-top:25px; background:none;}
  .menu-mobile h1 {margin:0;}
  #leftcol {display:none;}
  #middlecol, #rightcol, #container.threecol #middlecol {width:100%; background:none; border:0;}

  #menu .item.active {background:var(--green-grey-170);}
    #menu .item.active .bar,#menu .item:hover .bar {height:5px;}
  .submenu {flex-direction:row; overflow:auto;}
    .submenu .list-item {padding:5px 10px;}
  .mainbox.promo, .mainbox.right {display:flex; flex-direction:column;}
  .promo .item {width:98%; margin-bottom:5px; padding:5px; font-size:90%;}
  .promo h3 {text-align:left; margin-top:0px;}
  .promo .item .cont {display:flex; text-align:left;}
  .promo .item img {width:40%; margin-right:5px;}
  .mainbox.gallery .item {width:175px;}
  .imgCont {height:100px;}
  table .main {min-width:150px;}
  
#menu {position:absolute; right:10px; display:none; background:var(--green-190); border:1px solid #000; z-index:10;}
#menu-mobile {display:flex; justify-content:space-between; align-items:center; margin:5px; padding:0 5px;}
#menu-mobile .icon {width:20px;}
}