/* ==========================================
   1. Globální základy a dědičnost
   ========================================== */
body {
    font-family: sans-serif;
    font-size: 14px;
    color: #DDDDDD;
    background-color: #0087B4;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div { font-size: 11px; }

.main-wrapper {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* ==========================================
   2. Odkazy a interaktivní prvky
   ========================================== */
a:visited, a:active, a:focus, .sitelink {
    color: #DDDDDD;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
}
a:hover, .sitelink:hover {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline;
}

.bannerpic {
    width: 100%;
    height: auto;
    border: 1px solid black;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* ==========================================
   3. Layout, struktura a menu
   ========================================== */
.content-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.menucolumn {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menubutton {
    width: 100%;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: transparent;
    color: #FFFFFF;
    font-weight: bold;
    transition: all 0.3s ease;
}
.menubutton:hover:not(:disabled) { background-color: green; }
.menubutton:disabled {
    background-color: rgba(0, 0, 0, 0.2);
    color: yellow;
    cursor: default;
}

.webcontent {
    flex: 1;
    font-size: 13px;
    color: #DDDDDD;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
}

@media (max-width: 768px) {
    .content-layout { flex-direction: column; }
    .menucolumn { flex: 1 1 auto; }
}

/* ==========================================
   4. Tabulky a společné třídy
   ========================================== */
.menutable, .menucolumn, .webcontent, .mrownormal { background: #0087B4; }
.menutable, .appos, .applicence, .appklasifikace { border: 0; }
.appos, .applicence, .appklasifikace, .applink, .apphistory, .historytable, .apptitletable, .qemajl, .dotaz { width: 100%; }

.menutable { font-size: 11px; font-weight: bold; color: #FFFFFF; }
.mrownormal, .mrowselected { height: 32px; }

.menuitem { width: 195px; border: 1px dotted #0087B4; }
.itemselected { border: 1px dotted yellow; color: yellow; background: blue; }
.itemmouse { border: 1px dotted white; cursor: pointer; }
.separator { border: 3px outset gray; }

.sendbtn {
    width: 450px;
    height: 35px;
    border-radius: 15px;
    cursor: pointer;
}
.sendbtn:hover:not(:disabled) { background: green; }
.sendbtn:disabled {
    background-color: rgba(0, 0, 0, 0.2);
    color: gray;
    cursor: not-allowed;
}

/* Flexbox kontejner pro obsahové odkazy */
.site-content-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 25px;
    align-items: center;
    width: 100%;
    margin: 10px auto;
}
.site-content-flex .sitelink {
    display: inline-block;
    padding: 4px 8px;
}

/* ==========================================
   5. Typografie obsahu a aplikací
   ========================================== */
.western { padding: 0.05cm; color: #d0FFd0; text-align: justify; font-size: 14px; }

.emailaddr { font-family: arial; font-size: 18px; color: #FFAA00; }
.emailtext { font-size: 12px; }

.apptitle { font-family: fantasy; font-size: 32px; color: yellow; }
.appdesc { font-family: monospace; font-size: 15px; font-weight: bold; }

.appos, .applicence, .appklasifikace {
    font-weight: bold;
    font-size: 16px;
    color: #DDDDDD;
}
.apposlist, .appklasifikacelist { font-weight: normal; font-size: 12px; color: black; }
.applicencelist { font-weight: bold; font-size: 16px; color: yellow; }

.applinkpic { border: 1px dotted white; }

.historytoprow { background: #99FFAA; color: Red; font-size: 28px; height: 40px; }
.historytopcell { border: 2px solid black; }
.historycontentcell { font-family: monospace; font-size: 15px; border: 1px solid black; }

.historydate, .historydescribtion {
    border: 1px solid lightgray;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
}
.historydate { width: 100px; color: yellow; }
.historydescribtion { text-align: left; color: black; padding-left: 10px; }

.homewelcome { font-size: 12px; }
.welcome { color: #660000; font-family: arial; font-size: 42px; font-weight: bold; }
.aboutdownload { color: black; font-size: 14px; font-weight: bold; text-align: justify; }

.appweblang { width: 48px; }
.pagenotfound { font-family: serif; font-size: 32px; color: white; background: red; }
.md5style { font-family: monospace; font-size: 11px; color: black; }
.visitor { color: brown; }

.languageselection { cursor: pointer; }
.languageselection:hover { background: green; font-weight: bold; }

.kontaktinfo { text-align: left; font-size: 14px; font-weight: bold; color: #eab72f; }

.clickabl { cursor: pointer; text-decoration: underline; font-family: arial; }
.clickabl:hover { font-size: 18px; }

/* ==========================================
   6. Skupinové sekce (technologie / položky)
   ========================================== */
.inetdiv, .dbdiv, .osdiv, .hwdiv, .swdiv, .netdiv,
.progdiv, .interdiv, .shelldiv {
    font-size: 16px;
    height: 32px;
}
.inetdiv, .dbdiv, .osdiv, .hwdiv, .swdiv, .netdiv { color: yellow; }
.progdiv, .interdiv, .shelldiv { color: #8c3aa7; }

.dbdiv, .osdiv, .hwdiv, .swdiv, .netdiv,
.progdiv, .interdiv, .shelldiv {
    padding-top: 16px;
}

.inetitem, .dbitem, .ositem, .hwitem, .switem, .netitem,
.progitem, .interitem, .shellitem {
    font-size: 12px;
    padding-bottom: 8px;
}

.englishnote { color: #8f555f; font-size: 18px; text-shadow: 1px 1px black; }