/* ===================================================================
   Marek Andrasik - osobni stranky - styl 1997
   HTML + CSS, zadny framework. Dobove triky: <table> layout,
   beveled ramecky, hvezdne pozadi, blikajici nadpisy.
   =================================================================== */

body {
  /* Hvezdne tmave modre pozadi - generovane CSS, zadny obrazek potreba */
  background-color: #000018;
  background-image:
    radial-gradient(1px 1px at 20px 30px,  #ffffff, transparent),
    radial-gradient(1px 1px at 60px 80px,  #cfe0ff, transparent),
    radial-gradient(1px 1px at 120px 50px, #ffffff, transparent),
    radial-gradient(2px 2px at 160px 120px,#ffffaa, transparent),
    radial-gradient(1px 1px at 200px 20px, #ffffff, transparent),
    radial-gradient(1px 1px at 90px 160px, #aaccff, transparent),
    radial-gradient(1px 1px at 230px 100px,#ffffff, transparent);
  background-size: 256px 192px;
  background-repeat: repeat;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  padding: 12px 0;
}

a { color: #ffff66; }
a:hover { color: #ff3333; background-color: #000080; }
a:visited { color: #ffcc66; }

hr.rainbow {
  height: 5px;
  border: 0;
  margin: 26px 0;
  background-image: linear-gradient(to right,
    #ff0000, #ff8800, #ffff00, #00cc00, #0099ff, #6600cc, #ff0000);
}

/* ====================== KOSTRA STRANKY ====================== */
#page {
  width: 820px;
  background-color: #000033;
  border: 4px outset #5555aa;
}

/* ====================== BANNER / HLAVICKA ====================== */
#banner {
  text-align: center;
  padding: 14px 10px 4px 10px;
  background-color: #000044;
}

#logo {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 46px;
  font-weight: bold;
  margin: 0;
  letter-spacing: 2px;
  color: #ffff00;
  /* 3D / vrstveny stin - klasika 90s nadpisu */
  text-shadow:
     2px  2px 0 #ff6600,
     4px  4px 0 #cc0000,
     6px  6px 6px #000000;
}

#tagline {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 17px;
  color: #00ffcc;
  margin: 8px 0 4px 0;
  text-shadow: 1px 1px 0 #003333;
}

/* ====================== LEVY NAV SLOUPEC ====================== */
#nav {
  width: 150px;
  padding: 12px 8px;
  background-color: #000022;
  border-right: 3px ridge #4444aa;
}

.navbox {
  border: 3px outset #6666bb;
  background-color: #000066;
  margin-bottom: 18px;
  padding: 10px 6px;
  text-align: center;
  font-size: 15px;
}

.navtitle {
  font-family: "Comic Sans MS", cursive;
  color: #ffff66;
  font-weight: bold;
  margin: 0 0 8px 0;
}

#nav .navbox a {
  display: block;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  padding: 6px 2px;
  margin: 4px 0;
  border: 1px solid transparent;
}
#nav .navbox a:hover {
  color: #ffff00;
  background-color: #3333aa;
  border: 1px inset #8888cc;
}
#nav .navbox a.active {
  color: #ffff00;
  background-color: #aa0000;
  border: 1px inset #ff6666;
}
#nav .navbox a.active:before { content: "\25B8 "; }

#bestview { font-size: 12px; color: #aaccff; }
#bestview .big {
  font-family: "Comic Sans MS", cursive;
  font-size: 20px;
  color: #00ff00;
  font-weight: bold;
  margin: 4px 0;
}

/* ====================== HLAVNI OBSAH ====================== */
#content {
  padding: 12px 18px;
  background-color: #000033;
}

.section { margin-bottom: 18px; padding: 4px 0; }
.section > p { margin: 10px 0; }

#content h2 {
  font-family: "Comic Sans MS", cursive;
  font-size: 26px;
  color: #ff66cc;
  margin: 6px 0 10px 0;
  text-shadow: 2px 2px 0 #660033;
}

#content h3 {
  font-family: "Comic Sans MS", cursive;
  font-size: 17px;
  color: #66ff66;
  margin: 0 0 6px 0;
}

.lead {
  font-family: "Comic Sans MS", cursive;
  color: #ffcc00;
  font-size: 16px;
  font-style: italic;
}

/* Beveled karty pro sluzby / realizace */
.card {
  border: 3px outset #555588;
  background-color: #111144;
  padding: 12px 16px;
  margin: 16px 0;
}

/* Odrazky s hvezdickami */
.bullets td { vertical-align: top; padding: 3px 4px; }
.bullets .b { color: #ffff00; font-size: 16px; }

/* Statistiky O mne */
.stats {
  margin: 6px auto 12px auto;
  text-align: center;
  width: 100%;
}
.stats td {
  width: 33%;
  border: 2px inset #5555aa;
  background-color: #000066;
  font-size: 15px;
  color: #aaccff;
}
.stats .num {
  font-family: "Comic Sans MS", cursive;
  font-size: 30px;
  font-weight: bold;
  color: #00ffff;
}

/* Loga klientu jako beveled badge */
#klienti { text-align: center; }
.logo {
  display: inline-block;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  color: #ffffff;
  background-color: #333377;
  border: 2px outset #7777bb;
  padding: 5px 10px;
  margin: 5px 4px;
  font-size: 15px;
}

/* Realizace - katalogova tabulka s pruhovanymi radky (jiny styl nez karty) */
#reztable {
  border: 2px solid #6666bb;
  border-collapse: collapse;
  background-color: #000022;
  font-size: 16px;
  margin-top: 8px;
}
#reztable td {
  border: 1px solid #4444aa;
  vertical-align: top;
}
.rezhead td {
  background-color: #3333aa;
  color: #ffff66;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
}
.rezrow { background-color: #001144; }
.rezrow.alt { background-color: #002255; }   /* zebra pruhovani */
.rezrow:hover { background-color: #113377; }
.reznum {
  text-align: center;
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #00ffaa;
}
.rezname {
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  color: #66ff66;
}
.rezobor {
  text-align: center;
  font-style: italic;
  color: #ffcc00;
}

#kontaktbox p { margin: 6px 0; }

/* Marquee s referencemi */
#marqueebox {
  margin-top: 16px;
  border: 3px inset #5555aa;
  background-color: #000000;
  padding: 6px 0;
  color: #ffff66;
  font-family: "Comic Sans MS", cursive;
  font-size: 16px;
}

/* ====================== PATICKA + POCITADLO ====================== */
#footer {
  text-align: center;
  padding: 6px 10px 14px 10px;
  background-color: #000044;
}

#counterbox {
  margin: 10px auto;
  display: inline-block;
}

.counterlabel {
  font-family: "Comic Sans MS", cursive;
  color: #ffff66;
  font-size: 14px;
  vertical-align: middle;
  margin-right: 8px;
}

/* LED pocitadlo - cerny box, zelene "digitalni" cislice */
#counter {
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 4px;
  color: #00ff00;
  background-color: #000000;
  border: 3px inset #008800;
  padding: 4px 10px;
  vertical-align: middle;
  text-shadow: 0 0 6px #00ff00;
}

.copy {
  font-size: 13px;
  color: #8899cc;
  margin: 14px 0 0 0;
}
.heart { color: #ff3366; }

/* ====================== JS EFEKTY ====================== */
/* trida prepinana skriptem pro blikani barvy nadpisu */
.blink-color { color: #ffffff; }

/* glitter stopa mysi */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 9999;
  font-size: 10px;
  line-height: 6px;
}