﻿<style type="text/css">


<!-- Základní nastylování nadpisů, zkrytí tagu HR, odrážky -->


h1 {
        text-align: center;
        font-size: 45px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
h2 {
        text-align: center;
        font-size: 32px;
        margin-top: 40px;
        margin-bottom: 40px;
    }


hr {
  display: none;
}


.odrazky {
    /* 1. Resetování výchozího stylu */
    list-style: none;
    padding-left: 0;
}


.odrazky li {
    /* 2. Zvýraznění bloku LI jemným podkladem a zaoblením */
    background-color: #f8f8f8;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 12px 15px 12px 40px;
    font-size: 0.9em;


    /* 3. Nastavení pozice pro vlastní odrážku (ikony) */
    position: relative;
    line-height: 1.5; /* Lepší čitelnost textu */
}




<!-- Tento styl slouží pro ukázky fragmentu HTML a CSS kódu, který chceme v obsahu explicitně zobrazit -->


.code-container {
    background-color: #f8f9fa; /* Velmi světle šedá */
    border: 1px solid #e1e4e8; /* Jemný šedý rámeček */
    border-left: 4px solid #007bff; /* Modrý akcent pro moderní vzhled */
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto; /* Posuvník pro dlouhé řádky */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #24292e;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Lehký stín pro hloubku */
}


.code-container code {
    background: none;
    padding: 0;
    color: inherit;
}


<!-- Styl pro jakoukoliv tabulku -->
        table {
                                    border-collapse: collapse;
            font-family: Arial, sans-serif;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Mírně výraznější stín */
            border-radius: 8px;
            overflow: hidden;
            text-align: left; /* Resetování text-align pro obsah tabulky */
            align-items: center;
                              min-height: 50vh;
        }


        /* Styly pro záhlaví (<thead> a <th>) */
        thead {
            background-color: #f0f0f0; /* Jemně šedé pozadí */
            color: #333;
        }


        th {
            font-weight: bold; /* Tučné písmo */
            text-align: center; /* Vycentrování */
            padding: 12px 15px; /* Vzdušný padding */
            border-bottom: 2px solid #ddd;
        }


        /* Styly pro buňky s daty (<td>) */
        td {
            padding: 10px 15px; /* Vzdušný padding */
            text-align: left;
            border-bottom: 1px solid #eee;
        }


        /* Střídání barev řádků */
        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }


        /* Efekt najetí myší */
        tbody tr:hover {
            background-color: #f1f1f1;
            cursor: default;
        }
        
        /* Styl pro kódové prvky uvnitř tabulky */
        td code {
            padding: 2px 5px;
            background-color: #e8e8e8;
            border-radius: 3px;
            font-size: 0.9em;
        }


/* --- Vlastní moderní odrážka: Šipka (Checkmark/V-tvar) --- */
.odrazky li::before {
    content: ''; /* Povinné */
    position: absolute;
    left: 15px; /* Odsazení ikony od levého okraje bloku */
    top: 50%;   /* Vertikální zarovnání do středu */
    transform: translateY(-50%) rotate(-45deg); /* Zarovnání + rotace pro šipku */


    /* 4. Vizuální styl ikony (moderní prvek) */
    display: block;
    width: 6px;
    height: 10px;
    
    /* Vytvoření V-tvaru (Checkmark) pomocí okrajů */
    border: solid #3498db; /* Výrazná moderní modrá barva */
    border-width: 0 3px 3px 0; /* Pouze spodní a pravá hrana (V-tvar) */
}


/* Volitelný bonus: Efekt při najetí myší pro ještě lepší UX */
.odrazky li:hover {
    background-color: #f0f0f0; /* Lehce tmavší šedá při najetí */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný stín pro "vyzvednutí" */
    cursor: pointer; /* Změna kurzoru */
}


.language-html {
    display: block;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    overflow-x: auto;
    background-color: #282c34;
    color: #abb2bf;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


pre {
    background-color: #f6f8fa;
    border-radius: 8px;
    padding: 1.5em;
    margin: 1.5em 0;
    overflow-x: auto;
    line-height: 1.6;
    font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace; 
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}


/* Styly pro zvýraznění syntaxe (tagy a atributy) */
.language-html .token.tag,
.language-html .token.attr-name {
    color: #e06c75; /* Červená/Růžová pro tagy a názvy atributů */
}


.language-html .token.attr-value {
    color: #98c379; /* Zelená pro hodnoty atributů (v uvozovkách) */
}


/* Styl pro číslo řádku (pokud se používá) */
.language-html .line-number {
    color: #5c6370; /* Šedá pro číslo řádku */
    margin-right: 15px;
    user-select: none; /* Zabránění výběru čísel řádků */
}


.code-wrapper::before {
    content: 'Html'; /* Text, který se zobrazí */
    position: absolute;
    top: -10px; /* Posunutí nad kód */
    left: 10px;
    background-color: #5c6370; /* Barva pozadí štítku */
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
}


a {text-decoration: underline}
.flag.flag-discount { background-color: #efe41d; }
.flags-extra .flag .price-standard, .flags-extra .flag .price-save { font-size: 12px; color: black; }


@media (min-width: 1440px) {
        .container {width: 1418px;}  /* sirka hlavicky */
}
@media (min-width: 1418px) {  /* sirka prvku v tele */
        .breadcrumbs {width: 1200px}
        .index-content-wrapper {width: 1418px}
        .ordering-process .content-wrapper-in {width: 1418px}
        .type-search .content-wrapper-in {width: 1418px}
        .type-manufacturers-listing .content-wrapper-in {width: 1200px}
        .type-manufacturer-detail .content-wrapper-in {width: 1200px}
        .type-posts-listing .content-wrapper-in {width: 1000px}
        .type-post .content-wrapper-in {width: 1000px}
        .type-page .content-wrapper-in {width: 1000px}
        .type-glossary .content-wrapper-in {width: 1000px}
        .next-to-carousel-banners {width: 1200px}
        .type-category .content {width: 1200px}
        .p-detail-inner {width: 1418px}
        .p-detail-tabs-wrapper {width: 1000px}
}
#content-wrapper p{font-size: 17px;margin-bottom:25px;line-height:1.8em;}  /* velikost zakladniho pisma */
#content-wrapper ul{font-size: 17px;}
#content-wrapper ol{font-size: 17px;}
.basic-description ul{font-size: 17px;}
.basic-description ol{font-size: 17px;}
.product{font-size: 17px;}


.button-objednavka-seo {
  background-color: #000000; /* Černá barva pozadí */
  color: white; /* Bílá barva textu */
  padding: 10px 20px; /* Horní/dolní padding: 10px, levý/pravý padding: 20px */
  text-align: center; /* Centrování textu */
  text-decoration: none; /* Žádné podtržení textu */
  display: inline-block; /* Zobrazit jako inline-block */
  font-size: 16px; /* Velikost fontu */
  margin: 1px 1px; /* Margin kolem tlačítka */
  cursor: pointer; /* Cursor bude ukazatel kliknutí */
  border: none; /* Bez okrajů */
  border-radius: 1px; /* Mírně zaoblené rohy */
  font-family: Arial, sans-serif; /* Typ písma */
  transition-duration: 0.4s; /* Doba trvání přechodu pro hover efekt */
}


.button-objednavka-seo:hover {
  background-color: #555555; /* Tmavě šedá barva pozadí při najetí myši */
  color: white; /* Text zůstává bílý */
}






</style>