root/html/styl.css

/** Obrázky s odkazem bez rámečku */
a img {
    border: none;
}

/** Pozadí stránky a text */
html {
    background: #42afdc;
    color:black;
}

/** Bezpatkové písmo */
body {
    font-family: sans-serif;
    font-size: 12px;
}

/** Prostor pro logo a název programu */
#zahlavi {
    height: 48px;
    background-image: url('grafika/logo.png');
    background-repeat: no-repeat;
    margin-left: 5px;
}

#zahlavi h1 {
    display: none;
}

/** Obal kolem bloků */
#bloky {
    width: 1040px;
    text-align: justify;
}

.blok {
    margin: 10px;
}

/** Vstup, výstup nebo nápověda */
.vnitrekBloku {
    background-image: url('grafika/blok-pozadi.gif');
    margin: 0px;
    padding: 10px;
}

#vstup .vnitrekBloku {
    height: 150px;
    text-align: right;
}

#vstup textarea {
    width: 640px;
    height: 108px;
    padding: 8px;
    border: 1px solid silver;
}

fieldset {
    display: inline;
    border: none;
    padding: 0px;
    margin: 0px;
}

#vstup button {
    height: 20px;
    border: none;
    margin-right: 0px;
    margin-top: 5px;
    padding: 0px;
    cursor: pointer;
    background-repeat: no-repeat;
}

#vstup button.zobrazitHistorii {
    background-image: url('grafika/historie.png');
    background-color: transparent;
    background-position: center;
    width: 20px;
}

#vstup button.vykonatSQL {
    background-image: url('grafika/tlacitko-sql.png');
    width: 146px;
}

#vystup .vnitrekBloku {
    overflow: auto;
    height: 280px;
}

#napoveda .vnitrekBloku {
    height: 484px;
}

/** Nadpisy bloků */
.blok h2 {
    font-size: 12px;
    padding: 2px;
    padding-top: 4px;
    padding-left: 32px;
    margin: 0px;
    color: gray;
    height: 20px;
}

#napoveda h2 {
    background-image: url('grafika/blok-nadpis-320.png');
}

#navigace {
    background-image: url('grafika/navigace-pozadi.png');
    height: 21px;
    width: 300px;
    position: relative;
    bottom: 32px;
    left: 10px;
    text-align: center;
}

#navigace button {
    height: 20px;
    border: none;
    margin-right: 0px;
    margin-top: 5px;
    padding: 0px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    width: 20px;
    position: relative;
    top: -4px;
}

#navigace button.zpet {
    background-image: url('grafika/navigace-zpet.png');
    margin-right: 32px;
}

#navigace button.vpred {
    background-image: url('grafika/navigace-vpred.png');
    margin-left: 32px;
}

#navigace button.nasledujici {
    background-image: url('grafika/navigace-nasledujici.png');
    margin-left: 42px;
}

#navigace button.predchozi {
    background-image: url('grafika/navigace-predchozi.png');
    margin-right: 42px;
}

#navigace button.model {
    background-image: url('grafika/navigace-model.png');
}

#navigace button.pruvodce {
    background-image: url('grafika/navigace-pruvodce.png');
}

/** Vstupně-výstupní část */
#io {
    float: left;
}

#io h2 {
    background-image: url('grafika/blok-nadpis-680.png');
}

/** Blok vstupu */
#vstup {
    width: 680px;
}

/** Blok výstupu */
#vystup {
    width: 680px;
}

/** Blok nápovědy */
#napoveda {
    float: right;
    width: 320px;
}

/** Formátování (výstupní) tabulky */
table {
    border: 1px solid green;
    border-collapse:collapse;
    background-color: white;
    margin: 3px;
}

td {
    border: 1px solid black;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: top;
}

td.cislo {
    text-align: right;
}

thead {
    background: gray;
    font-weight:bold;
    background-image: url('grafika/tabulka-zahlavi.png');
    background-repeat: repeat-x;
    height: 28px;
}

thead td a {
    color: black;
    text-decoration: none;
}

thead td {
    vertical-align: middle;
}

/** Ikonky pro zprávu k výsledku */
#vystupniPole p {
    background-repeat: no-repeat;
    padding-left: 22px;
}

#vystupniPole p.vysledekOK {
    background-image: url('grafika/vysledek-ok.png');
}

#vystupniPole p.vysledekVarovani {
    background-image: url('grafika/vysledek-varovani.png');
}

#vystupniPole p.vysledekChyba {
    background-image: url('grafika/vysledek-chyba.png');
}

#vystupniPole p.vysledekTip {
    background-image: url('grafika/vysledek-tip.png');
    color: gray;
    font-style: italic;
}