/*      *************************************      */
/*      **   CSS styl pro www.noabe.com    **      */
/*      **   Autor:   Pavel Zalesky        **      */
/*      **   Verze:   24.6.2021            **      */
/*      *************************************      */



/*   -------------------------------------------   */
/*     DEFINICE FONTU                              */
/*     Definice fontu a zakladnich prvku           */
/*   -------------------------------------------   */ 



                                  /* Definice fontu Neris Thin */
@font-face {
         font-family: 'Neris_Thin';
         src: url('/components/Neris-Thin-webfont.woff') format('woff');
         font-weight: normal;
         font-style: normal;
}

                                   /* Omezení šířky zobrazovaného obsahu */
#xbody {
         margin: 0 auto;
         padding: 0;
         width: 80%;
         min-width: 400px;
         max-width: 950px;
}

                                   /* Základní text */
p {
         font-family: arial;
         font-size: 17px;
         line-height: 25px;
         font-weight: normal;
         text-decoration: none;
         color: #000;
         margin: 15px 0 0 0;
}

ol {
         font-family: arial;
         font-size: 17px;
         line-height: 25px;
         font-weight: normal;
         text-decoration: none;
         color: #000;
         margin: 15px 0 0 0;  
}

ol li {
         padding: 10px;
}

                                  /* Odkaz - zakladni a hover */
a {
         text-decoration: underline dotted;
         color: #000;
}

a:hover {
         text-decoration: underline;
         font-weight: bold;
         color: #75b94e;
}

                                   /* Tucny font */
strong {
         font-weight: bold;
}

                                   /* Hlavni nadpis stranky */
h1 {
         font-family: arial;
         font-size: 45px;
         line-height: 60px;
         font-weight: bold;
         text-decoration: none;
         color: #000;
         margin-top: 20px;
         margin-bottom: 0px;
         margin-right: 0px;
         margin-left: 0px;      
         padding: 0;
}

                                  /* Podnadpis stranky */
h2 {
         font-family: 'Neris_Thin';
         font-size: 35px;
         line-height: 40px;
         font-weight: normal;
         text-decoration: none;    
         margin-top: 15px;
         margin-bottom: 0px;
         margin-right: 0px;
         margin-left: 0px;
         color: #000; 
}

                                  /* Nadpis v textu */
h3 {
         font-family: 'Neris_Thin';
         font-size: 28px;
         line-height: 35px;
         font-weight: normal;
         text-decoration: none;    
         margin-top: 35px;
         margin-bottom: 0px;
         margin-right: 0px;
         margin-left: 0px;
         color: #000; 
}

                                  /* Standardni perex stranky */
.perex {
         font-family: 'Neris_Thin';
         font-size: 23px;
         line-height: 32px;
         font-weight: normal;
         text-decoration: none;      
         color: #555f61;
         /* color: #888888; */
         padding: 0;
         /* max-width: 420px;  */       
         margin-top: 32px;
         margin-bottom: 32px;
         margin-right: 0px;
         margin-left: 0px;
}


                                  /* Mezera, volne misto */
.space {
         height: 35px;
}

                                  /* Mezera, volne misto - velka*/
.space_big {
         height: 70px;
}

                                 /* Seda horizontalni linka */
.hor_line {
         height: 2px;
         /* background-color: #f3f3f3;  */
         background-color: #eeeeee;
}

                                 /* Sekce vystredeneho obrazku */
.center_image {
         width: 80%;
         display: block;
         margin-left: auto;
         margin-right: auto;
         margin-top: 24px;
         margin-bottom: 24px;       
}

                                 /* Sekce vystredeneho obrazku - width 98% */
.center_image_100 {
         width: 98%;
         display: block;
         margin-left: auto;
         margin-right: auto;
         margin-top: auto;
         margin-bottom: auto;       
     
}

                                 /* Kulaty obrazek */
.rounded_image {
         border-radius: 50%;
}

/*   -------------------------------------------   */
/*     SLOUPCE                                     */
/*     Obsah rozdeleny do vice sloupcu             */
/*   -------------------------------------------   */   

                                /* Kontejner radek */
.row {
         display: flex;
         column-gap: 35px;
}
                                /* Sloupec 60 % sirky, responsivni */
.column_60 {
         flex: 60%;
}
                                /* Sloupec 50 % sirky, responsivni */
.column_50 {
         flex: 50%;        
}
                                /* Sloupec 40 % sirky, responsivni */
.column_40 {
         flex: 40%;
}
                                /* Sloupec 33 % sirky, sedy podklad, responsivni. Primarne pro Where to buy. */
.column_33_gray {
         flex: 33%;
         background-color: #f0f0f0;
         padding: 25px; 
}
                                /* Sloupec 33 % sirky, bez podkladu, responsivni, pri zuzeni obrazovky mizi. Primarne pro Where to buy. */
.column_33_empty {
         flex: 33%;
         padding: 25px;
}
                                /* Responsivni layout - pokud je obrazovka uzsi nez 850px, obsah sloupcu se radi nad sebe (ne vedle sebe) */
@media screen and (max-width: 850px) {
         .row { flex-direction: column; }
         .column_50 { flex: 100%; margin-right: auto; }
         .column_60 { flex: 100%; margin-right: auto; }
         .column_40 { flex: 100%; margin-right: auto; }
         .column_33_gray { flex: 100%; margin-right: auto; background-color: #ffffff; }
         .column_33_empty { flex: 100%; margin-right: auto; padding: 0px; }
}



/*   -------------------------------------------   */
/*     TABULKA                                     */
/*     Plna sirka obrazovky, pruhovana, zelene     */
/*     zvyrazneni radku na focus                   */
/*   -------------------------------------------   */   

table {
         width: 100%;
         border-collapse: collapse;
         border-spacing: 0;
         border: none;
         text-align: left;
         vertical-align: top;
         
         font-family: arial;
         font-size: 15px;
         line-height: 24px;
         font-weight: normal;
         text-decoration: none;
         color: #000;        
}

th, td {
         padding: 15px;
}
 
th {
         font-weight: bold;
         height: 60px;
         border-bottom: 1px solid #000000;
}

tr:nth-child(even) {
         background-color: #eeeeee;
}

tr:hover {
         background-color: #b0ed8c;
}


/*   --------------------------------------------   */
/*     BILY BUTTON                                  */
/*     Odkaz ve forme bileho button. Na focus       */
/*     zezelena                                     */
/*   --------------------------------------------   */ 

a.whitebutt {
         color: #62af32;
         background: #ffffff;
         border-radius: 6px;
         border: 1px solid #dedede;
         border-radius: 6px;
         font-weight: bold;
         text-decoration: none;
         padding: 10px 25px;
         text-align: center;
         width: 30%;
         display: inline;
         margin: 5px auto;
}

a.whitebutt:hover {
         color: #ffffff;
         background: #62af32;
         border: 1px solid #b0ed8c;
}


/*   --------------------------------------------   */
/*     HORNI HORIZONTALNI MENU                      */
/*     Hlavni menu webu - horni lista, reaguje      */
/*     na focus, prostor na logo, v malem rozlis.   */
/*     prejde na vertikalni formu a zbarvi se.      */
/*   --------------------------------------------   */ 

ul.topnav {
         list-style-type: none;       /* Bez bodiku */
         margin: 0;
         padding: 0;
         overflow: hidden;
         background-color: #ffffff;
         position: -webkit-sticky;    /* Vyjimka pro Safari */
         position: sticky;            /* Zustava nahore */
         top: 0;
         font-family: 'Neris_Thin';
         font-size: 16px;
}

ul.topnav li {float: left;}

ul.topnav li a {
         display: block;
         color: #000000;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
}

ul.topnav li a:hover:not(.navlogo) {
         background-color: #75b94e;
         color: #ffffff;
}

ul.topnav li a.navlogo {
         background-color: #75b94e;
         padding-top: 9px;
         padding-right: 18px;
         padding-bottom: 13px;
         padding-left: 18px;
}

ul.topnav li.topnav_right {float: right;}
                                   /* Responsivni design - menu pod sebe, zabarvi se, zrusi se "sticky" */
@media screen and (max-width: 850px) {
  ul.topnav li.topnav_right, 
  ul.topnav li {float: none;}
  ul.topnav {background-color: #f3f3f3; position: static;}
}
   

/*   --------------------------------------------   */
/*     SPODNI MENU V ZAPATI                         */
/*     Zapati stranky - definice sloupcu, fontu,    */
/*     a odkazu. Responsibilita.                    */
/*   --------------------------------------------   */ 

                                /* Kontejner radek */ 
.row_bottomnav {
         display: flex;
         column-gap: 35px;
}

                                /* Sloupec zapati. 25 % sirky, sedivy text, responsivni, pri poskladani pod sebe se podbravuje */
.column_bottomnav {
         flex: 25%;
         font-family: 'Neris_Thin';
         font-size: 16px;
         line-height: 22px;
         font-weight: normal;
         text-decoration: none;
         color: #555f61;
         padding: 15px;                     
}

                                /* Styl odkazu v zapati. */
.column_bottomnav a {
         text-decoration: none;
         color: #555f61;
}
                                /* Styl odkazu v zapati. Pod kurzorem. */
.column_bottomnav a:hover {
         text-decoration: underline;
         font-weight: bold;
         color: #75b94e;
}

                                /* Responsivni layout - pokud je obrazovka uzsi nez 850px, zapati má 2 misto 4 sloupců */
@media screen and (max-width: 750px) {
         .row_bottomnav { flex-direction: column; background-color: #f3f3f3; }
         .column_bottomnav { flex: 100%; margin-right: auto; }
}
                               /* Formatovani copyrightu */
.noabe_copy {
         font-family: 'Neris_Thin';
         font-size: 16px;
         line-height: 22px;
         font-weight: normal;
         text-decoration: none;
         color: #555f61;
         padding: 15px;
}
                               /* Formatovani copyrightu - odkaz */
.noabe_copy a {
         text-decoration: underline dotted #bbbbbb;
         color: #555f61;
}
                               /* Formatovani copyrightu - odkaz pod kurzorem */
.noabe_copy a:hover {
         text-decoration: underline;
         font-weight: bold;
         color: #75b94e;
}