html, body { background: #FFFFFF; margin: 0 }
body, input { font-family: Segoe UI, Verdana, Arial }
* { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust:none;}
form { margin: 0; border-bottom: 0px solid #CCC; text-align: center; display: table-row; width: 100% }
label { color: #666; display: table-cell; padding: 0.25em }
form span { width: 100%; display: table-cell; }
form span input { width: 100%; margin: 0; padding: 0.333em; border: 0; font-size: 100% }
form input[type=submit] { margin-right: 0.25em }

#vystup, #obsah, #http, #vice, #analyza { display: none; clear: both }
#vystup.http #http, #vystup.obsah #obsah, #vystup.vice #vice, #vystup.analyza #analyza { display: block }
#zalo { float: right }
.zalozky { overflow: hidden; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA+CAQAAABAMLl6AAAAFklEQVQIHWNgAIN6FiYGpgFCjOTZCwCuJAFv80s79AAAAABJRU5ErkJggg==") repeat-x scroll 0 100% / contain #FFF; font-size: 110%; margin-bottom: -0.5px }
.zalozky a { float: left; padding: 0 1.5em; line-height: 2em; position: relative; z-index: 1; color: #AAA }
.zalozky a span { margin: 0 -0.75em; display: block; color: #555; }
.zalozky a span:after { position: absolute; text-decoration: none; left: 0; right: 0; bottom: 4px; font-size: 70%; line-height: 1em; font-weight: bold; text-align: center; z-index: 1; color: rgba(255,255,255,1); text-shadow: 0 0 2px #000 }
#vystup.http #zalhttp, #vystup.obsah #zalobsah, #vystup.vice #zalvice, #vystup.analyza #zalanalyza { color: #000; text-decoration: none; cursor: default; z-index: 0; background: url(pokus1.svg) no-repeat 0 0 / cover, url(pokus1.svg) no-repeat 100% 0 / cover, url(pokus1.svg) no-repeat 50% 0 / cover content-box; padding: 0 3em; margin: 0 -1.5em }
#vystup.http #zalhttp span, #vystup.obsah #zalobsah span, #vystup.vice #zalvice span, #vystup.analyza #zalanalyza span { color: inherit }
#vystup.obsah #zalobsah { background-image: url(pokus.svg), url(pokus.svg), url(pokus.svg?) }
#vystup.obsah #zalobsah, #vystup.obsah #zalobsah span { color: rgba(255,255,255,1); }
#zalhttp span:after { content: attr(status); }
#vystup.http #zalhttp span:after { content: none; }

#obsah pre { word-wrap: break-word; width: 100%; margin: 0; padding: 0; white-space: pre-wrap; }
#obsah { background: #272822; color: #FFF; padding: 0.5em; }
#obsah p { margin: 0 0 0.5em 0 }

#analyza, #vice, #http { padding: 0.5em 0.5em 1em 0.5em }
#http th { text-align: right; white-space: nowrap; font-weight; padding: 0.125em 0; width: 0; vertical-align: top }
#http td { word-wrap: break-word; color: #000; padding: 0 0.333em }
#http table { border-collapse: collapse; width: 100%; background: #FFF; line-height: 1.3em }
#http [druh] i:after { display: none }
#http tbody[druh] tr:first-child i:after { display: block; float: right; font-size: 80%; padding: 0 0.5em; margin: 0.333em 0 -0.75em 0; line-height: 1.3em; background: #FFF; position: relative }
#http tbody[druh] tr:first-child { border-bottom: 1px dotted }
#http tbody[druh] tr:first-child + tr td, #http tbody[druh] tr:first-child + tr th { padding-top: 0.6em }
[druh='1'] { color: #008 }
[druh='2'] { color: #160 }
[druh='3'] { color: #A00 }
[druh='4'] { color: #088 }
[druh='5'] { color: #606 }
[druh='6'] { color: #A80 }
[druh='9'] { color: #666 }
[druh='1'] i:after { content: 'Popis obsahu' }
[druh='2'] i:after { content: 'Kešování' }
[druh='3'] i:after { content: 'Zabezpečení' }
[druh='4'] i:after { content: 'Metadata' }
[druh='5'] i:after { content: 'Procesní informace' }
[druh='6'] i:after { content: 'Očůrávání patníků' }
[druh='9'] i:after { content: 'Ostatní' }

@media (max-width: 640px)
{
  label { display: none }
  form, form span { display: block }
  form input { letter-spacing: -0.5px }
  input[type=submit] { display: none }

  .zalozky { font-size: 100% }
  #http { padding: 0.5em 0 1em 0 }
  #http table, #http tbody, #http tr, #http th, #http td { display: block; float: left; width: 100% }
  #http th { text-align: left; padding: 0 0.333em }
  #http td { text-align: left; padding: 0 0.333em 0.5em 1em }
  #http tbody[druh] tr:first-child { display: none }
  #http tbody[druh] tr:first-child + tr td { padding-top: 0 }
  #http tbody[druh] tr:first-child + tr th { padding-top: 0 }
  #http tr[druh] { background: currentcolor }
  #http tr[druh] th { background: rgba(255,255,255,0.9); }
  #http tr[druh] td { background: #FFF }
  #http [druh] i:after { display: inline; float: right; font-weight: normal; font-size: 70%; margin: 0 0.5em; color: rgba(0,0,0,0.4); line-height: 1.85em }
  #obsah pre { font-size: 75% }
}

@media (max-width: 320px)
{
  .zalozky { font-size: 95% }
}

@media (max-width: 640px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 640px) and (min-resolution: 120dpi)
{
  #obsah pre { font-size: 60% }
}
@media (max-width: 640px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 640px) and (min-resolution: 144dpi)
{
  #obsah pre { font-size: 50% }
}


#logo { padding: 64px 48px 0 48px; width: 170px; position: absolute; top: 3em; left: 50%; margin: 0 0 0 -85px; display: none; font-size: 100% }
#logo span { width: 48px; height: 48px; box-sizing: border-box; display: block; border: 1px solid #000; margin-top: -1px; position: relative; }
#logo b { display: block; line-height: 46px; position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 140%; font-weight: normal; font-family: "Segoe UI", Calibri }
#logo #logocara { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABAQMAAADZzn0AAAAABlBMVEUAAAD///+l2Z/dAAAACklEQVQIHWOQBgAAHQAcCZNktQAAAABJRU5ErkJggg==) repeat-x 0 0; height: 48px; width: 200px; margin-left: -48px; box-shadow: 0 -24px 48px 12px #FFF inset }