/* ****************
obsah
  obecné
  body a spol.
  horejsek
  dolejsek
**************** */

/* obecné */

.klikaci {cursor: pointer;}
.barva-zakladni-text {color: rgb(83, 84, 86); }
.doprava {text-align: right;}
.centrovat {text-align: center;}

/* body a spol. */

#obsah {clear: both;}

body {
    background-color: white;
    color: #334048;   
    font-family: Tahoma, Arial, Sans-serif;  
    font-size: 16px;         
}


ul {list-style-type: circle;}
ul li {margin-bottom: 0.5em;}

/* a, a:visited {color: #334048} */ 

a, a:visited {color: #a66b00;}
a.excel {background-image: url('../images/layout/excel-icon.gif'); background-repeat: no-repeat; padding-left: 20px;}


/* a, a:visited {color: rgb(231, 120, 23);} */


#obalka {
    width: 960px;
    margin-left: auto; margin-right: auto;    
}

/* horejsek */

#vernier_pruh {
    /* background-color: rgb(55,79,67); */
    background-color: rgb(31,78,0);
    background-color: rgb(0,51,34);
    height: 85px;
    padding: 10px;    
}

#logo {
    border-width: 0px;
    float: left;    
    margin-right: 20px;
    margin-left: 10px;
    
}

#hlavni-nadpis {    
    font-size: 30px;
    color: #EEEEEE;   
    margin-bottom: 0;        
    text-align: right; 
    margin-top: 15px;        
    width: 700px;
    float: right;   
    margin-right: 10px;
}


/* bubliny */

.bublina {width: 310px; margin-top: 0;}
.bublina div h2 {margin-top: 5px; font-size: 18px;}
.bublina div {font-size: 14px; width: 300px; overflow: hidden; padding: 5px; padding-left: 10px; padding-right: 10px; }

.bublina50 {background-image:url(../images/layout/bublina-310x50.png); height: 50px;}
.bublina50 div {height: 40px; }

.bublina100 {background-image:url(../images/layout/bublina-310x100.png); height: 100px;}
.bublina100 div {height: 90px; }

.bublina135 {background-image:url(../images/layout/bublina-310x135.png); height: 135px;}
.bublina135 div {height: 125px;  }

.bublina135vyzkousejte {background-image:url(../images/layout/bublina-310x135.png); height: 135px; margin-top: 10px;}
.bublina135vyzkousejte div {height: 125px;  }

.bublina200 {background-image:url(../images/layout/bublina-310x200.png); height: 200px;}
.bublina200 div {height: 190px; }

.bublina250 {background-image:url(../images/layout/bublina-310x250.png); height: 250px;}
.bublina250 div {height: 240px; }

.bublina250video {background-image:url(../images/layout/bublina-310x250.png); height: 250px; position: relative; top: 0px;}


.bublina300 {background-image:url(../images/layout/bublina-310x300.png); height: 300px;}
.bublina300 div {height: 290px; }

.bublina400 {background-image:url(../images/layout/bublina-310x400.png); height: 400px;}
.bublina400 div {height: 390px; }

.bublina500 {background-image:url(../images/layout/bublina-310x500.png); height: 500px;}
.bublina500 div {height: 490px; }


#radek-nabidek-horni {}
/*#radek-nabidek-horni ul {margin: 0; margin-top: 15px; padding: 0; float: right; margin-right: 10px; background-color: rgb(55,79,67);} 
#radek-nabidek-horni a, #radek-nabidek-horni a:visited {color: #EEEEEE; text-decoration: none; font-size: 18px;}

#radek-nabidek-horni a:hover {color: white; text-decoration: underline;}

#radek-nabidek-horni li {display: inline; margin-left: 17px;} */


/* dolejsek */ 

#dolejsek p {text-align: center; font-size: 12px;}

#dolejsek {clear: both; width: 960px; height: 30px;}




/* dhtmlgoodies menu */

	#dhtmlgoodies_menu li.currentDepth1{		
		float: left;
	}

	#dhtmlgoodies_menu{
		margin-left: 275px;
	}
	
	#dhtmlgoodies_menu img{
		border:0px;		
	}


	#dhtmlgoodies_menu ul li ul{
		display:none;	/* Needed to display ok in Opera */
	}
		
	#dhtmlgoodies_menu{
		/*visibility:hidden;*/	
	}
	#dhtmlgoodies_menu ul{
		margin:0px;	/* No indent */
		padding:0px;	/* No indent */
	}
	#dhtmlgoodies_menu li{
		list-style-type:none;	/* No bullets */
	}	
	#dhtmlgoodies_menu a{

		color: #EEEEEE; text-decoration: none; font-size: 18px;
    margin:0px;
		padding:0px;
		margin-top: 0px;
	}
	/* End general configuration CSS */
	
	
	/* Cosmetic */
	
	/***********************************************************************
		CSS - MENU BLOCKS
	 	General rules for all menu blocks (group of sub items) 
	***********************************************************************/

	#dhtmlgoodies_menu ul {
		border:1px solid #000;
		background-color:#FFF;		
    padding:1px;
		margin-left: 0px;
		margin-top: 0px;        		
  }
		
	#dhtmlgoodies_menu ul.menuBlock1{	/* Menu bar - main menu items */
		border:0px;
    padding:1px;
		border:0px solid #317082;
		/* background-color: rgb(55,79,67);*/
		background-color: rgb(31,78,0);
		background-color: rgb(0,51,34);
    /*background-color:#E2EBED;*/
		overflow:visible;
		height: 0px;
	}
	#dhtmlgoodies_menu ul.menuBlock2{	/* Menu bar - main menu items */
		border:0px;
		padding:1px;
		border:1px solid #555;	
    color: black;
margin-left: 17px;
margin-top: 0px;
padding-top: 5px;
	}
	
	/***********************************************************************
		CSS - MENU ITEMS
	 	Here, you could assign rules to the menu items at different depths.
	***********************************************************************/
	/* General rules for all menu items */
	#dhtmlgoodies_menu a{
		color: #EEEEEE; text-decoration: none; font-size: 18px;    
		text-decoration:none;
		padding-left:2px;
		padding-right:2px;    		
	
	}
	
	#dhtmlgoodies_menu .currentDepth2 a{
    color: black;	
	}

	/*
	Main menu items 
	*/
	
	#dhtmlgoodies_menu .currentDepth1{
		margin-top: 15px;
    padding-left:17px;		
		border:0px solid #E2EBED;	
    text-decoration: none;	
	}
	#dhtmlgoodies_menu .currentDepth1over{
		margin-top: 15px;
    padding-left:17px;
		color: #FFF;
		text-decoration: underline;
    /*padding-left:5px;
		padding-right:5px;
		/*background-color:#317082;*/
		/*border:0px solid #000;*/		
		
		
	}
	#dhtmlgoodies_menu .currentDepth1 a{
		/* font-weight:bold;*/
         
	}
	#dhtmlgoodies_menu .currentDepth1over a{	/* Text rules */
		/*color:black;

background-color: #FFF;*/
		/* font-weight:bold; */
	}
	
	/* Sub menu depth 1 */
	#dhtmlgoodies_menu .currentDepth2{
		padding-right:2px;
		padding-left: 2px;

		/* border:1px solid #FFF;*/
    color: black;  
	}
	#dhtmlgoodies_menu .currentDepth2over{
		padding-right:2px;
		padding-left: 2px;
		/*padding-right:2px;*/
		/*background-color:rgb(55,79,67);*/
		/*border:1px solid #000;*/
		text-decoration: underline;
		color: black;
	}	
	#dhtmlgoodies_menu .currentDepth2over a{	/* Text rules */
		color:#000;
	}	
	/* Sub menu depth 2 */
	#dhtmlgoodies_menu .currentDepth3{
		padding-right:2px;
		border:1px solid #FFF;
	}
	#dhtmlgoodies_menu .currentDepth3over{
		padding-right:2px;
		background-color:#EDE3EB;
		border:1px solid #000;
	}
	/* Sub menu depth 3 */
	#dhtmlgoodies_menu .currentDepth4{
		padding-right:2px;
		border:1px solid #FFF;
	}
	#dhtmlgoodies_menu .currentDepth4over{
		padding-right:2px;
		background-color:#EBEDE3;
		border:1px solid #000;
	}	
	



    /* Responsivita nová úvodní stránka */
    
    
    .gridUvodExperimenty {grid-area: experimenty; }
    .gridUvodSkoleni {grid-area: skoleni; font-size: 14px; text-align: left; }
    .gridUvodBalicky {grid-area: balicky; font-size: 14px; }
    .gridUvodKatalog {grid-area: katalog; font-size: 14px; }
    .gridUvodAktuality {grid-area: aktuality; }
    .gridUvodZapujcka {grid-area: zapujcka; }
    .gridUvodOdber {grid-area: odber; }
    .gridUvodLABQ2 {grid-area: LABQ2; }
    .gridUvodText {grid-area: text; }
    .gridUvodBYOD {grid-area: BYOD; font-size: 14px;}

    
    
    .gridUvodZapujcka {font-size: 14px;}
        
    .gridUvodOdber {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  min-width: 290px;
  font-size: 14px;}


.gridUvod {
  padding-top: 5px;
  display: grid;
  grid-gap: 10px;
   }
   

@media screen and (max-width: 629px) {
.gridUvod {
    grid-template-areas:
    
    'text'
    'LABQ2'
    'BYOD'
    'katalog'
    'experimenty'
    'skoleni'
    'balicky'
    'odber'
    'aktuality';
    
   }
  }


@media screen and (min-width: 630px) {
.gridUvod {
    grid-template-areas:
    'text LABQ2'
    'katalog experimenty'                               
    'balicky skoleni'                               
    'aktuality BYOD'
    'aktuality odber';
   }
   .gridUvodOdber .email {font-size: 80%; width: 15em;}
   .gridUvodOdber .emailsubmit {font-size: 80%; width: 8em;}
   
  }

   
@media screen and (min-width: 980px) {
.gridUvod {
    grid-template-areas:
    'LABQ2 text BYOD'
    'aktuality experimenty katalog'
    'aktuality skoleni balicky'
    'aktuality skoleni odber';
   }
  }
  
      
   
   
 .gridUvod .box {min-width: 250px;}
 
 

.gridUvod #uvod-experimenty table {line-height: 30px; text-align: left; padding-left: 30px; padding-top: 20px;}



  /* Responsivita */
  
#obalka-obsahu {
  margin-top: 5px;
  width: 100%; }

.grid {
  padding-top: 5px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px; }

.box {
  padding: 5px;
  padding-top: 10px;
  padding-left: 10px; }
  .box div {
    font-size: 14px; }

.parent {
  display: grid;
  /* grid-template-rows: repeat(auto-fit); */
  grid-gap: 10px;
  padding: 0px; }
  .parent box {
    margin: 0px; }

.shadow {
  /* background-color: #F1E3B7;*/
  /* border-radius: 15px;*/
  text-align: center; 
  background-image: linear-gradient(to top, rgba(205, 204, 177, 0.5), rgb(255,255,255) ); 
  border-radius: 10px;
  border: 1px solid rgb(230,230,230); 
  }

.secondary {
  margin-top: 20px; }

.formbox {
  padding: 6px 4px 8px 4px;
  margin: 0px;
  min-width: 300px;
  max-height: 40px; }

#rozcestnik-fotka {
  width: 100%; }
  #rozcestnik-fotka img {
    width: 100%;
    max-width: none; }

@media only screen and (max-width: 600px) {
  .shadow {
    border-radius: 0px; } }





nav {
  float: right;
  margin-top: 10px; }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    nav ul li {
      float: left;
      position: relative;
      margin-bottom: 0px; }
      nav ul li a {
        display: block;
        padding: 0 20px;
        line-height: 40px;
        background: #003322;
        color: #ffffff;
        text-decoration: none; }
        nav ul li a:hover {
          background: #003322;
          color: #dddddd !important; }
        nav ul li a:not(:only-child):after {
          padding-left: 4px;
          content: ' ▾'; }
        nav ul li a:visited {
          color: #ffffff; }
      nav ul li ul li {
        min-width: 290px; }
        nav ul li ul li a {
          padding: 15px;
          line-height: 20px;
          z-index: 1; }

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
   }

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #003322;
  height: 75px;
  width: 75px; }

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px; }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out; }
  #nav-toggle span:before {
    top: -10px; }
  #nav-toggle span:after {
    bottom: -10px; }
  #nav-toggle.active span {
    background-color: transparent; }
    #nav-toggle.active span:before, #nav-toggle.active span:after {
      top: 0; }
    #nav-toggle.active span:before {
      transform: rotate(45deg); }
    #nav-toggle.active span:after {
      transform: rotate(-45deg); }

#headline {
  float: right;
  color: #eeeeee;
  margin-right: 45px;
  height: 50px; }

@media only screen and (max-width: 999px) {
  .nav-mobile {
    display: block;
    margin-top: 8px; }

  nav {
    width: 100%;
    padding: 40px 0 15px; }
    nav ul {
      display: none; }
      nav ul li {
        float: none; }
        nav ul li a {
          padding: 15px;
          line-height: 20px; }
        nav ul li ul li a {
          padding-left: 30px; }

  .nav-dropdown {
    position: static; }

  #headline h1 {
    display: none; } }
@media screen and (min-width: 1000px) {
  .nav-list {
    display: block !important; } }
.navigation {
  height: 105px;
  background: #003322; }

.nav-container {
  max-width: 1000px;
  margin: 0 auto; }

.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: 105px;
  text-transform: uppercase;
  font-size: 1.4em;
  margin-top: 10px; }
  .brand a,
  .brand a:visited {
    color: #ffffff;
    text-decoration: none; }
.brand img {max-height: 60px; margin-top: 10px;}

@media only screen and (max-width: 999px) {
  #obalka {
    margin: 0px;
    width: 100%;
    }

 #obsah {margin-left: 0.5em; margin-right: 0.5em;}

  #dolejsek {
    width: 100%; }

  body {
    margin: 0px; } }
@media only screen and (max-width: 609px) {
  #dolejsek {
    background: #003322;
    color: #ffffff;
    min-height: 50px;
    padding-top: 5px;
    margin-top: 10px; }
    #dolejsek hr {
      display: none; }
    #dolejsek a {
      color: #ffffff; }
      #dolejsek avisited {
        color: #ffffff; } }

/*# sourceMappingURL=meta.css.map */