/* COMMON */
*, *::before, *::after {box-sizing: border-box;}
html, body {width: 100%; height: 100%; overflow: hidden;}
body {background:var(--pageBg); color:var(--pageTxt); margin:0; overflow:auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size:1.1em;}
main {margin:0 auto; clear:both; width:100%; max-width:1200px;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 50px auto;
  grid-template-areas: "rootNav topNav" "content content"; align-items: start;}
#content {grid-area:content;}
#contentFull {grid-area: 1 / 1 / 4 / 4;}
#rootNav {grid-area:rootNav; justify-self:start;}
.pageNav {grid-area:topNav;}

hr {clear:both; margin: 15px 0; border-width:0; border-top:var(--line); width:100%;}
ul {line-height:1.4; padding-left:24px;}
a:link {color:var(--theme);} a:visited {color:var(--theme);} a:hover {color:var(--pageTxt);} a:active {color:var(--pageTxt);}
footer {clear:both; margin: 40px auto 0; max-width:1200px; text-align:center; color:var(--txtAlt); font-size:0.8em; padding: 20px 10px 20px; border-top:var(--line); background:var(--pageBg);}
input, button {-webkit-appearance:none; appearance:none; border:none; background-image:none; background-color:transparent; box-shadow: none;}
input:focus, input:active {outline-color:var(--theme);}
button:focus, button:active {outline: none;}
input::placeholder {color:var(--txtAlt);}
.space, .nthng, .space_10, .space_20, .space_30, .space_40 {clear:both; height:5px; width: 100%; margin:0px; padding:0px; font-size:1px; }
.nthng {height:0px; font-size:0px;}
.space_10 {height: 10px;}
.space_20 {height: 20px;}
.space_30 {height: 30px;}
.space_40 {height: 40px;}
.nomargin {margin: 0; padding: 0;}
.hide {display:none;}
.show {display:block;}
.center {text-align:center;}
.right {text-align:right;}
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
i.divider {display:inline-block; width:1px; height:20px; border-right:var(--lineAlt); margin:0px 5px 0 4px;}

#toTopNav { display:none; position:fixed; bottom:15px; right:15px; z-index:99; border:none; outline:none;  background-color:var(--bgAlt); color:var(--txtAlt); cursor:pointer; padding:15px; border-radius:50%; box-shadow:var(--cardShadow); opacity:.6;}
#toTopNav i {width:30px; height:30px; font-size:30px; line-height:30px;}
#toTopNav:hover { background-color:var(--theme); color:var(--cardBg); opacity:1;}

.inputField, .inputField:valid {color:var(--txt); background:var(--pageBg); border:none; border-bottom: 1px solid var(--txt); border-radius:0px; font-size:14px; margin: 5px 0; padding:10px 5px; width:100%; position:relative; display:inline-block;}
.inputField:focus {border-bottom: 1px solid var(--theme); background:var(--themeLight); outline:none;}
/* PAGE */
#logo {display:block; max-width:100%; top:0; left:0; margin:0; padding:.5em 0 .6em; background: url('img/header_bgr.jpg') center no-repeat; background-size:cover;}
#logo::after {content: url(sys/img/trekkies_logo.svg); display:block; width:153px; height:90px; margin:0 auto 0;}
#container, #logo {transition: all .2s ease-out;}
#container {position:relative; margin: 0 10px;}

.alertMsg {color:var(--alert);}
.chyba, .uspech, .info {clear:both; padding:10px 15px; border-radius:8px; box-shadow:var(--shadow-1);}
.chyba {color:var(--error); background:var(--errorBg);}
.uspech {color:var(--success); background:var(--successBg);}
.info {color:var(--pageTxt); background:var(--pageBg);}

select {
  border:none; background: none; outline:none; position: relative; margin:.4em;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
select:hover, select:focus {outline:none; border:none; margin:.4em;}
select::-ms-expand {display: none;}

/* CONTENT */
h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 2rem; font-weight: 600; color:var(--txtAlt); line-height:1.3; /*text-edge: cap alphabetic; leading-trim: both;*/ text-transform: uppercase;}
h1 {margin:0; padding: .8rem .5rem; background:#f8f8f8; font-weight:normal;}
h2 {font-size:1.4em; margin:.5em 0;}
h4  {margin:25px 0; color:var(--txt);}
.legal {font-size:.7em; line-height:1.3;}
.copy {display:block; padding:var(--spacing) 0;}
p {color:var(--txt);}
blockquote {background:var(--bgAlt); margin:.5em 0; max-width:100%; padding: 2.2em 1em; font-size: 1em; line-height: 1.5; text-align: justify; position:relative; color:var(--pageTxt); font-style:italic;}
blockquote::before {content: "\e80d"; font-weight:bold; color:var(--txtAlt); display:block; position:absolute; top:10px; left:10px;
    font: normal normal normal 2em/1 TR5; font-family:TR5; text-rendering:auto;}
blockquote::after {content: "\e80e"; font-weight:bold; color:var(--txtAlt); display:block; position:absolute; bottom:10px; right:10px;
    font: normal normal normal 2em/1 TR5; font-family:TR5; text-rendering:auto;}
.cols2 {width:auto; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:20px;}
.cols2 > .col {flex-grow:1; align-self:stretch; margin-top:0; padding-top:0;}

.btnLink, .btnStd, .btnAlt, .touchIcon, select {display: inline-block; padding:10px var(--spacing); border:none; background:none; font-size:14px; font-weight:600; text-transform:uppercase; cursor:pointer; border-radius:4px; margin:10px; text-align:center;}
.btnNone {cursor:auto;}
.btnIcon, .btnIconLeft, .btnIconRight {padding:0; color:var(--txt);}
.btnIcon i, .btnIconLeft i, .btnIconRight i {display:block; font-size:32px; width:32px; height:32px; line-height:32px;}
a.btnLink, a.btnStd, a.btnAlt, a.touchIcon {text-decoration:none; display:inline-block;}
.btnStd, a.btnStd, .touchIcon, select {display:inline-block; color:var(--txt); background:var(--themeAlt);}
.btnStd:hover {color:var(--theme); background:var(--themeLight);}
.btnLink:hover, .btnStd:hover, .linkCla:hover, select:hover, select:focus  {color:var(--theme); background:var(--bgAlt);}
.btnNone, .btnNone:hover {color:var(--txtAlt); background:none;}
.btnCta, a.btnCta {color:var(--theme);}
.btnAlt, a.btnAlt {color:var(--txtAlt);}

/* NAV */
.pageNav, .formControl {display:flex; flex-direction:row; justify-content:space-between; width:calc(100% - 10px);}
.formControl > span {display:flex; flex-direction:row;}
.pageNav span {display:flex; flex-direction:row; align-items:center;}
.pageNav span *:first-child {margin-left:0;} .pageNav span *:last-child {margin-right:0;}
.pageNav .tr5-menuRight {color:var(--txtAlt);}
.pageNav .combo/*, .formControl .combo */, #rootNav {position:relative; padding:7px 5px 8px 10px; color:var(--txt);}
.pageNav .btnLink {margin-left:0; margin-right:0;}
.pageNav a {color:var(--txt);}
/*.formControl .btnStd, .formControl .btnLink {margin: 0 5px;}*/
.breadcrumbs {display:block; margin:10px; color:var(--txt); font-weight:600; font-size:14px; text-transform: uppercase;}
.controlRight {justify-content:flex-end;}

ul.dropdown {
  background: var(--cardBg); box-shadow:var(--shadowPopup);
  border: var(--linePopup);
  list-style: none;
	margin: 7px 0 0 0; padding: 5px;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
	position: absolute;
  transition: all 0.5s ease;
  display: none;
  z-index:100;
  border-radius: 4px;
  text-align:left;
}
.dropR {right: 0;}
.dropL {left: 0;}
.dropUp {bottom:38px;}
ul.dropdown li {
  display: block;
	float: left;
	padding: 0;
	position: relative;
	text-decoration: none;
  transition-duration: 0.5s;
  border-radius: 2px;
}
ul.dropdown li.selected {background:var(--bgAlt);}
ul.dropdown li a, ul.dropdown li label {
  display: inline-block;
  color:var(--txt); text-align:left;
  margin: 0; padding: 9px 25px 10px 15px;
  white-space: nowrap; border-radius:2px;
  text-decoration:none; text-transform:none; font-weight:500; font-size:16px; line-height:24px; height:auto; width:100%;
}
ul.dropdown li a:hover {background:none;}
ul.dropdown li:hover,
ul.dropdown li:focus-within {
	background:var(--themeLight);
	cursor: pointer;
}

ul.dropdown li:focus-within a {
  outline: none;
}
.combo {position:relative;}
.combo:hover > ul.dropdown,
.combo:focus-within > ul.dropdown,
.combo ul.dropdown:hover,
.combo ul.dropdown:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}

.combo ul.dropdown li {
  clear: both;
  width: 100%;
}
.combo ul.dropdown li.dropLine {
  left:-5px; width: calc(100% + 10px); margin: 4px 0 5px; padding: 6px 10px 0;
  border-top: var(--line); color: var(--txtAlt); font-size:10px;
}
.combo ul.dropdown li.dropLine:hover {background:none;}

/* TABLET PORTRAIT */
@media only screen and (min-width:750px) {
  #logo::after {margin:1em auto; width:187px; height:110px;}
  footer {margin: 20px auto 0; padding: 0 20px 20px; border:none; background:none;}
  .btnIconLeft, .btnIconRight, a.btnIconLeft, a.btnIconRight {display:flex; flex-direction:row; align-items:center; padding-right:10px;}
  .btnIconRight, a.btnIconRight {padding-left:10px; padding-right:0;}
  .btnIconLeft i {margin-right:3px !important;} .btnIconRight i {margin-left:3px !important;}
  .btnIconLeft::after {content: " " attr(txt); display:block;}
  .btnIconRight::before {content: " " attr(txt); display:block;}
}
@media only screen and (min-width:900px) {
  main {padding:0 0 20px;
    grid-template-columns: 140px 1fr; grid-template-rows: 50px auto;
    grid-template-areas: "rootNav topNav" "rootNav content"; column-gap: 15px;}
  #rootNav {padding:0; margin:0;}
  #rootNav span {display:none;}
  #rootNav .dropdown {visibility:visible; opacity:1; display:block; background:none; border:none; box-shadow:none;}
  #rootNav ul.dropdown li.selected {background:var(--themeAlt);}
  #rootNav.sticky {position:fixed; top:0px;}
  .pageNav span i.divider:first-child {display:none;}
}
/* TABLET LANDSCAPE */
@media only screen and (min-width:1020px) {
  .cols2 {flex-direction:row;}
}
/* WIDESCREEN */
@media only screen and (min-width: 1200px) {
  /*#container {padding: 0 160px;}*/
  /*#content article:only-child {min-height:500px;}*/
  ul.dropdown li a, ul.dropdown li label {padding: 4px 25px 5px 15px; }
  #rootNav li {margin-bottom:10px;}
}