/**
 * == Basic containers ==
 */
body {
  padding:0px;
  margin:0px;
  /* always reserve space for scrollbar: */
  overflow:overlay;
  scrollbar-gutter:always;
}
header {
  margin-top:20px;
}
header nav {
  background-color:rgba(0,0,0,0.8);
  padding:14px;
  padding-top:16px;
  padding-left:30px;
}
div.page-not-found,
div#main {
  background-color:rgba(255,255,255,0.8);
  padding:30px;
  margin:30px;
}
@media (min-width: 1260px) {
  div#main {
    width:1200px;
    margin:auto;
  }
}
footer {
  background-color:rgb(255,255,255);
}

/**
 * == Global styles ==
 */
a {
  color:rgb(17,165,156);
  text-decoration:none;
  font-weight:bold;
  font-family:"Teko",sans-serif;
}
a:hover {
  color:rgb(10,194,185);
}
a.button-like,
button,
input.button-like {
  cursor:pointer;
  display:block;
  background-color:rgb(17,165,156);
  border:2px solid rgb(17,165,156);
  color:white;
  line-height:2em;
  padding-left:20px;
  padding-right:20px;
  padding-top:0.1em;
  padding-bottom:0px;
  font-size:1.2em;
  text-align:center;
  font-weight:normal;
}
button,
input.button-like {
  font-family:"Teko",sans-serif;
}
a.button-like:hover,
button:hover,
input.button-like:hover {
  background-color:white;
  color:rgb(17,165,156);
}
a.large,
button.large {
  text-transform:uppercase;
  letter-spacing:0.035em;
}
/**
 * == Sticky footer ==
 * We force the footer down by making the content div take up as much space
 * as available.
 */
body {
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
div#main {
  flex:1;
}

/**
 * == Header arrangments ==
 */
header nav ul,
header nav li {
  list-style:none;
  display:inline-block;
  padding:0px;
  margin:0px;
}
header nav input {
  display:none;
}
@media (min-width: 600px) {
  /* Left align the logo on desktop */
  header .logo {
    float:left;
    margin-left:20px;
  }
  /* Hide the hamburger logic on desktop */
  header input#nav-toggle-show + label,
  header input#nav-toggle-hide + label {
    display:none;
  }
  /* Navigation shares space with the logo */
  header nav {
    margin-left:370px;
  }
}

@media (max-width: 599px) {
  /* Center the logo on mobile */
  header .logo img {
    display:block;
    margin:auto;
  }
  header {
    position:-webkit-sticky;
    position:sticky;
    top:-79px;
    z-index:800;
  }
  header nav a.parent::after {
    display:none;
  }
  header nav li {
    display:block;
  }
  header nav ul > li > ul > li {
    display:inline-block;
  }
}

/**
 * == Black navigation magic ==
 */
@media (min-width: 600px) {
  /* Dynamic submenus, entirely without JS */
  header nav a + ul {
    display:none;
  }
  header nav a + ul li {
    display:block;
  }
  header nav a + ul:hover,
  header nav a:hover + ul {
    display:block;
    margin-top:-2px;
    margin-left:-15px;
    padding:15px;
    /* the magic keywords; break element out of page flow but keeps its position unless we specify another: */
    position:absolute;
    z-index:1000; /* make sure floated elements don't hide us */
  }
}

@media (max-width: 599px) {
  /* Hamburger magic with hidden checkboxes */
  header nav input#nav-toggle-hide:checked ~ ul {
    display:none;
  }
  header nav input#nav-toggle-show + label {
    display:block;
  }
  header nav input#nav-toggle-hide + label {
    display:none;
  }
  header nav input#nav-toggle-show:checked ~ ul {
    display:inline-block;
  }
  header nav input#nav-toggle-show:checked ~ input#nav-toggle-hide + label {
    display:block;
    margin-top:-24px; /* we pretend the hide label is the same as the show label */
  }
  header nav label:hover {
    color:rgba(0,0,0,0);
  }
}

/**
 * == Footer arrangements ==
 */
footer div.copyright,
footer div.waffles {
  margin: auto;
  text-align:center;
}

/**
 * == Main body arrangements ==
 */
@media (max-width: 599px) {
  /* Don't give content a chance to screw up our viewport */
  div#main {
    overflow-x:scroll;
  }
}

/**
 * == Basic, global prettifications ==
 */
body {
  background-image:url(/themes/darkmyst/assets/background.jpg);
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:hsl(175,19%,21%); /* dark turquoise */
  font-family:"Titillium Web",sans-serif;
}
@media (min-width:600px) and (max-width: 926px) {
  header nav,
  header nav a + ul {
    background-color:black;
  }
  header nav a + ul {
    background-image:none;
  }
}
@media (min-width: 927px) {
  /* rounded corners for nav on desktop (but only if large enough!) */
  header nav {
    border-top-left-radius:40px;
    border-bottom-left-radius:40px;
  }
}
/* make top-level nav links more imposing than other links */
header nav > ul > li > a {
  font-weight:normal;
  font-size:1.3em;
  line-height:1.6em;
  text-transform:uppercase;
  letter-spacing:0.085em;
}
/* give top-level nav links more space */
header nav ul > li {
  margin-right:15px;
}
/* down-arrows beside parent links */
header nav a.parent::after {
  content:"\f103";
  font-family:"FontAwesome";
}
/* hamburger menu text */
header nav input#nav-toggle-hide + label,
header nav input#nav-toggle-show + label {
  text-align:center;
}
header nav input#nav-toggle-hide + label {
  color:rgb(255,255,255);
}
@media (min-width: 600px) {
  /* desktop submenus */
  header nav a + ul {
    background-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 16px, rgba(0,0,0,0.8) 16px, rgba(0,0,0,1));
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
  }
  header nav a + ul li {
    padding:6px;
  }
  header nav a + ul a {
    font-size:0.8em;
    font-family:"Titillium Web",sans-serif;
  }
}

@media (max-width: 600px) {
  /* mobile menus */
  header nav label {
    color:rgb(10,194,185);
  }
  header nav ul ul {
    padding:5px;
    padding-left:12px;
    border-radius:3px;
    background-color:rgb(0,0,0);
  }
  header nav a + ul a {
    font-weight:normal;
  }
}

/**
 * == Link accessibility ==
 */
header nav a {
  color:rgb(10,194,185);
}
header nav a.selected,
header nav a:hover {
  color:rgb(255,255,255);
}

/**
 * == Other ==
 */
.staff table,
.servers table {
  width:100%;
}
@media (max-width: 399px) {
  .servers table th + th,
  .servers table td + td,
  .staff table th + th,
  .staff table td + td {
    display:none;
  }
}
@media (max-width: 599px) {
  .servers table th + th + th,
  .servers table td + td + td {
    display:none;
  }
  .staff table th + th,
  .staff table td + td {
    display:none;
  }
  .staff table th + th + th,
  .staff table td + td + td {
    display:table-cell;
  }
}
.work-in-progress {
  display:block;
  margin:20px;
  padding:10px 15px;
  background-color:red;
  color:white;
}
.image-embed-full {
  display:inline-block;
  max-width:100%;
}
.image-embed-thumb {
  display:none;
}
div.page-not-found form.site-search span {
  display:none;
}
h2,
h3 {
  margin:0px;
  border-bottom:1px solid #aaa;
}
h2 {
  padding-bottom:15px;
  margin-bottom:15px;
}
h3 {
  border-color:#ccc;
  padding-bottom:5px;
  margin-bottom:5px;
  margin-top:10px;
}
@media (max-width: 599px) {
  .image-embed-full {
    display:none;
  }
  .image-embed-thumb {
    display:inline-block;
  }
}
ul.semantic-only,
ul.semantic-only > li {
  display:block;
  list-style-type:none;
  padding:0px;
  margin:0px;
}
.site-search > button {
  display:inline-block;
  line-height:1.6em;
  border-radius:5px;
}
.site-search > input {
  display:inline-block;
  padding-left:5px;
  padding-right:5px;
  line-height:1.3em;
  font-size:1em;
  border:1px solid #ccc;
  border-radius:5px;
}
pre {
  white-space: pre-wrap;
}
@media (max-width: 599px) {
  .site-search {
    float:none;
  }
  .site-search > input,
  .site-search > button {
    display:block;
    margin:auto;
  }
  .site-search > input {
    width:100%;
  }
  .site-search > button {
    padding-left:40px;
    padding-right:40px;
    margin-top:5px;
  }
  .site-search > span {
    display:none;
  }
  .site-search > input {
    box-sizing:border-box;
    width:100%;
    margin:auto;
    line-height:1.5em;
    font-size:1.1em;
  }
}