/* ===========================================================================
   DO NOT PRETTIFY THIS FILE.

   This stylesheet deliberately reproduces a Thai hospital web application from
   around 2008: Tahoma 12px, #316AC5 title bars, #ECE9D8 window chrome, beveled
   <input type=button>, table layout, 1px #7F9DB9 borders, no border-radius, no
   shadows, no animation. That ugliness is load-bearing: this screen is the
   "before" half of a before/after comparison, and it is the control condition
   for the whole demonstration. Anyone who modernises it has destroyed the
   thing it exists to prove.

   No frameworks, no build step, no web fonts, no external requests.
   =========================================================================== */

html, body {
    margin: 0;
    padding: 0;
    background: #ECE9D8;
    color: #000000;
    font-family: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", "Leelawadee UI", Thonburi, sans-serif;
    font-size: 12px;
    line-height: 1.35;
}

table { font-size: 12px; }
a { color: #003399; text-decoration: underline; }
a:visited { color: #003399; }
a:hover { color: #CC0000; }

table.page { border-collapse: collapse; }

/* --- window chrome ------------------------------------------------------ */

td.titlebar {
    background: #316AC5;
    color: #FFFFFF;
    padding: 4px 6px;
    border-bottom: 1px solid #17427F;
}
td.titlebar td.tl { color: #FFFFFF; font-weight: bold; font-size: 12px; }
td.titlebar td.tr { color: #C6D9F1; font-size: 11px; text-align: right; }

td.menubar {
    background: #ECE9D8;
    border-bottom: 1px solid #7F9DB9;
    padding: 3px 6px;
    font-size: 11px;
    color: #7B7B70;
}
td.menubar a { margin: 0 3px; }
td.menubar span.dis { margin: 0 3px; color: #A0A0A0; }

td.work { background: #F6F6F0; padding: 6px; vertical-align: top; }

td.statusbar {
    background: #ECE9D8;
    border-top: 1px solid #7F9DB9;
    padding: 2px 4px;
    font-size: 11px;
    color: #333333;
}
td.statusbar td.sb {
    border: 1px inset #ECE9D8;
    padding: 1px 6px;
    white-space: nowrap;
}

/* --- tab strip ---------------------------------------------------------- */

div.tabs { padding: 4px 2px 0 2px; }
div.tabs span {
    display: inline-block;
    padding: 2px 12px;
    margin-right: 2px;
    border: 1px solid #7F9DB9;
    border-bottom: none;
    font-size: 11px;
}
div.tabs span.on { background: #FFFFFF; font-weight: bold; }
div.tabs span.off { background: #ECE9D8; color: #7B7B70; }

/* --- group box ---------------------------------------------------------- */

div.gb {
    border: 1px solid #7F9DB9;
    background: #FFFFFF;
    margin: 0 0 6px 0;
}
div.gb div.cap {
    background: #316AC5;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
}
div.gb div.gbin { padding: 6px; }

/* --- forms and grids ---------------------------------------------------- */

table.frm td { padding: 2px 4px; vertical-align: middle; }
td.lbl, div.lbl {
    background: #ECE9D8;
    font-weight: bold;
    white-space: nowrap;
    padding: 2px 6px;
}
div.lbl { display: inline-block; margin: 4px 0 2px 0; border: 1px solid #D4D0C8; }

table.pt { border: 1px solid #7F9DB9; border-collapse: collapse; }
table.pt td { border: 1px solid #D4D0C8; padding: 3px 6px; }
table.pt td.lbl { width: 90px; }

div.ptbox { border: 1px solid #7F9DB9; padding: 2px; }
div.ptbox div.pt-row { border-bottom: 1px solid #D4D0C8; padding: 2px 0; }
div.ptbox span.pt-k {
    display: inline-block;
    width: 110px;
    background: #ECE9D8;
    font-weight: bold;
    padding: 2px 6px;
}
div.ptbox span.pt-v { padding: 2px 6px; }

ul.meds { margin: 4px 0 4px 18px; padding: 0; }
ul.meds li { padding: 1px 0; }

table.grid { border: 1px solid #7F9DB9; border-collapse: collapse; margin: 4px 0; }
table.grid td { border: 1px solid #D4D0C8; padding: 2px 5px; }
table.grid tr.hdr td {
    background: #316AC5;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    border: 1px solid #17427F;
}
table.grid tr.alt td { background: #F1F1F1; }

input[type=text], input[type=password], select {
    border: 1px solid #7F9DB9;
    background: #FFFFFF;
    font-family: Tahoma, "MS Sans Serif", "Leelawadee UI", Thonburi, sans-serif;
    font-size: 12px;
    padding: 1px 2px;
}
input[type=text]:focus, input[type=password]:focus, select:focus { background: #FFFFE1; }

input[type=button], input[type=submit] {
    background: #ECE9D8;
    border: 1px solid;
    border-color: #FFFFFF #808080 #808080 #FFFFFF;
    outline: 1px solid #ACA899;
    font-family: Tahoma, "MS Sans Serif", "Leelawadee UI", Thonburi, sans-serif;
    font-size: 11px;
    padding: 2px 10px;
    cursor: default;
}
input[type=button]:active, input[type=submit]:active {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
}
input.btnDel { padding: 0 6px; font-size: 11px; }

div.btnrow { padding: 6px 2px 2px 2px; border-top: 1px solid #D4D0C8; margin-top: 6px; }
div.valrow { min-height: 14px; }
span.val, div.err { color: #CC0000; font-size: 11px; font-weight: bold; }
div.err { padding: 8px 4px; }
span.note { color: #7B7B70; font-size: 11px; }
div.empty { padding: 10px 4px; color: #7B7B70; }

div.aspnet_hidden { display: none; }

/* --- printed prescription ----------------------------------------------- */

div.paper { border: 1px solid #D4D0C8; padding: 10px; }
div.paper div.ph { font-size: 14px; font-weight: bold; text-align: center; }
div.paper div.ph2 { font-size: 12px; text-align: center; padding-bottom: 8px; }
td.sign { padding-top: 24px; font-size: 11px; }

@media print {
    td.titlebar, td.menubar, td.statusbar, div.tabs, div.gb div.cap, .noprint { display: none; }
    body, td.work { background: #FFFFFF; }
    div.gb { border: none; }
    div.paper { border: none; }
}