@import "style-colors.css";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.section {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px
  background-color: var(--color-dark);
}

.header {
  border: none;
  border-spacing: 0px;
  width: 100%;
  height: 8%;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-light);
}

.title {
  font-size: 2em;
  text-decoration: none;
  color: var(--color-title);
}

.title_small {
  font-size: 0em;
  text-decoration: none;
  color: var(--color-title);
}

.header_menu {
  font-size: 1em;
  text-decoration: none;
  color: var(--color-title);
}

.content {
  background-color: var(--color-light);
}

.responsive_image {
  width: 100%;
  max-width: 80%;
  height: auto;
}

.visited {
  color: var(--color-visited);
}

.search_result {
  color: var(--color-search-result); 
}

/* Title */
.np_title {
  text-decoration: none;
  color: var(--color-title);
  font-size: 1.5em;
}

/* Header frame */
.np_frame_header {
  width: 100%;
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  background: var(--color-dark);
}

/* Menu frame */
.np_frame_menu {
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 2px;
  background: var(--color-dark);
}

/* Content frame */
.np_frame_content {
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 2px;
  background: var(--color-dark);
}

/* Header table */
.header_table {
  border: none;
  padding: 2px;
  background: var(--color-dark);
}

.np_button_hidden {
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid var(--color-title);
  color: var(--color-text-alt);
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-dark);
  border-radius: 5px;
}
/* Header buttons */
.np_header_button_link {
  padding-left: 5px;
  padding-right: 5px;
  border: none;
  color: var(--color-text-alt);
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-dark);
  border-radius: 5px;
  font-size: 1.8em;
}

/* Username buttons */
.np_username_button_link {
  padding-left: 5px;
  padding-right: 5px;
  border: none;
  color: var(--color-text-alt);
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-dark);
  border-radius: 5px;
  font-size: 0.9em;
}

.np_header_button_link:hover {
  color: var(--color-dark);
  background: var(--color-text-alt);
}

.np_username_button_link:hover {
  color: var(--color-dark);
  background: var(--color-text-alt);
}

.np_header_bar_large {
  background: var(--color-dark);
  padding: 1px;
  margin-bottom: 1px;
  color: black;
  font-size: 0.5em;
}

.np_header_bar_small {
  background: var(--color-dark);
  padding: 1px;
  margin-bottom: 1px;
  color: black;
  font-size: 0.6em;
}

.display_headers:active .display_headers_on {
   display:block;
}

#trigger_headers:checked + .display_headers_on {
   display:block;
}

.display_headers_on {
    display: none;  /* NEW */
    background: var(--color-dark);;
    padding: 3px;
    border: solid 1px #26598f;
    word-wrap: break-word;
    position: absolute;
    z-index: 1000;
    width:98%;
    height: auto;
}

.display_headers_on:hover {
    display:block;
}

.display_headers {
//   margin:100px;
}

div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

input {
  background-color: var(--color-medium);
  border: none;
  color: var(--color-title);
}

textarea.postbody {
  background-color: var(--color-medium);
  border: none;
  color: var(--color-title);
  height: calc(1em * 1.5 * 20);
  width: calc(1em * 1.5 * 40);
}

/* Mobile Styles */
@media only screen and (max-device-width: 480px) {
  body {
    color: var(--color-title);
    background: var(--color-bg-alt);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1em + 2vw);
  }
    .header {
      margin: 5px;
      height: 10%; 
    } 
    .menu {
      margin: 0px; 
      width: 0%;
      height: 0%
    }
    .content {
      margin: 10px;
      width: 100%;
      height: 89%;
    }
    .title {
      font-size: 0em;
    }
    .title_small {
      font-size: 1.2em;
    }
    .header_menu {
      font-size: 0.7em;
    }
    .np_header_button_link {
      font-size: 1em;
    }
    .np_header_bar_large {
      display: none;
    }
    .np_title {
      font-size: 1em;
    }
    textarea.postbody {
      height: calc(1em *1.5 * 10);
      width: 100%;
    }
    input.post {
      width: 90%;
    }
}

/* Tablet Styles */
@media only screen and (min-device-width: 481px) and (max-device-width: 820px) {
  body {
    color: var(--color-title);
    background: var(--color-bg-alt);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1em + 1vw);
  }
    .header {
      margin: 5px;
      height: 10%;
    }
    .menu {
      margin: 0px;
      width: 0%;
      height: 0%
    }
    .content {
      margin: 10px;
      width: 100%;
      height: 89%;
    }
    .title {
      font-size: 1.2em;
    }
    .header_menu {
      font-size: 0.8em;
    }
    .np_header_button_link {
      font-size: 1.5em;
    }
    .np_header_bar_large {
      display: none;
    }
}

/* Desktop Styles */
@media only screen and (min-device-width: 821px) {
  body {
    margin-left: 10px;
    margin-right: 10px;
    color: var(--color-title);
    background: var(--color-bg-alt);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1em + 1vw);
    }
    .header {
      margin: 0px;
      height: 8%;
    }
    .menu {
      width: 20%;
      height: 92%
    }
    .content {
      width: 80%;
      height: 92%;
    }
    .title {
      font-size: 1.5em;
    }
    .header_menu {
      font-size: 0.8em;
    }
    .np_button_hidden {
      padding-left: 0px;
      padding-right: 0px;
      border: none;
      color: transparent;
      font-size: 0em;
    }
    .np_header_bar_small {
      display: none;
    }
}

/* =========== Index Layout ============== */

/* headline */
h1.np_index_headline {
  font-size: 0.8em;
}

/* Table around the groups */
table.np_groups_table {
  width: 100%;
  table-layout: fixed;
/*  border: solid 1px #26598f; */
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 0.5em;
}

/* border around all groups */
.np_index_groups {
/*  background: #eeeeee; */
  background: var(--color-dark);
  padding: 0px;
  border: solid 1px #26598f;
}

/* a block of groups */
.np_index_groupblock {
  margin-bottom: 20px;
  background: var(--color-dark);
}

/* headline of a group of blocks */
.np_index_grouphead {
  border: solid 1px #26598f;
/*  background: #26598f; */
  background: var(--color-dark);
  color: var(--color-title);
  font-size: 0.7em;
  font-style: italic;
}

/* a single group */
.np_index_group {
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 0.8em;
}

/* Text inside a Line */
span.np_group_line_text {
  font-size: 1.2em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-text-alt) !important;
}

/* =========== Thread Layout ============== */

/* Headline */
h1.np_thread_headline {
  font-size: 0.6em;
  margin-top: 5px;
  margin-bottom: 10px;
}


/* Table around the thread */
table.np_thread_table {
  width: 100%;
  table-layout: fixed;
/*  border: solid 1px #26598f; */
  border: solid 1px var(--color-text-alt);
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 0.5em;
}

/* Head of the table */
tr.np_thread_head,td.np_thread_head {
  color: var(--color-text-alt);
  background: var(--color-light);
  margin: 0px;
}



/* Even line numbers in the thread */
tr.np_thread_line1,td.np_thread_line1 {
  padding-left:   3px;
  padding-top:    3px;
  padding-right:  0px;
  padding-bottom: 3px;
  background: var(--color-dark);
//  border-top: 1px solid var(--color-medium); 
//  border-bottom: 1px solid var(--color-text-alt);
  border-right: 1px solid var(--color-row-border);
  margin: 0px;
}

/* Odd line numbers in the thread */
tr.np_thread_line2,td.np_thread_line2 {
  padding-left: 3px;
  padding-top:    3px;
  padding-right:  0px;
  padding-bottom: 3px;
  background: var(--color-light);
  border-top: 1px solid var(--color-row-border);
  border-bottom: 1px solid var(--color-row-border);
  border-right: 1px solid var(--color-row-border);
  margin: 0px;
}

/* Text inside a Line */
span.np_thread_line_text {
  font-size: 1em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* The small images, a thread consists of */
img.thread_image {
  vertical-align: bottom;
}

/* =========== Article Layout ============= */

/* headline */
h1.np_article_headline {
  font-size: 0.6em;
}


/* Head of an article */
div.np_article_header {
  background: var(--color-dark);
  padding: 3px;
  border: solid 1px #26598f;
  font-size: 0.55em;
}

/* Layout of the Text-Body */
div.np_article_body {
  background: var(--color-light);
  margin-top: 20px;
/*  font-family: "Lucida Console", "Courier New", Courier, "Andale Mono", monospace; */
  font-size: 0.55em;
}

/* Layout of the Text-Body for Synchronet (to display ASCII art etc.*/
div.np_article_body_synch {
  background: var(--color-light);
  margin-top: 20px;
  font-family: "Lucida Console", "Courier New", Courier, "Andale Mono", monospace;
  font-size: 0.55em;
}

/* Layout of quoted text / graphic layout */
blockquote.np_article_quote {
  border-left: #002255 solid 1px;
  padding-left: 5px;
  color: var(--color-text-quote);
  margin: 0px;
}

/* =========== Post layout =========== */

/* headline */
h1.np_post_headline {
  font-size: 1em;
}


/* Head with the input fields for subject, name and email  */
.np_post_header {
  background: var(--color-dark);
  padding: 3px;
  border: solid 1px #26598f;
}

/* Body with the message-field and the post-button in it */
.np_post_body {
  background: var(--color-light);
  padding: 3px;
  border: solid 1px #26598f;
  margin-top: 10px;
}

/* =========== specifically for rocksolid overboard =========== */

/* results table */
table.np_results_table {
  width: 100%;
  table-layout: fixed;
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 0.5em;
}

/* overboard posted_date */
.np_ob_posted_date {
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
  color: var(--color-ob-date);
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}

/* posted_date */
.np_posted_date {
  float: right;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10;
  text-decoration: none;
  color: var(--color-ob-date);
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  width:50%;
}

/* posted_date left */
.np_posted_date_left {
  float: left;
  margin-top: 5;
  margin-bottom: 0;
  margin-right: 10;
  margin-left: 10;
  text-decoration: none;
  color: var(--color-ob-date);
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
//  width:50%;
}

#datebox {
  display: flex;
  justify-content: space-between;
}

/* last posted_date */
.np_last_posted_date {
  margin-top: 10;
  margin-bottom: 10;
  margin-right: 10;
  text-decoration: none;
  color: var(--color-ob-date);
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
}

/* group description */
.np_group_desc {
  margin-top: 2;
  margin-bottom: 10;
  margin-right: 10;
  text-decoration: none;
  color: var(--color-ob-date);
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

/* header */
.np_ob_header {
  margin-top: 0;
  margin-bottom: 15;
  margin-left: 20%;
  text-decoration: none;
  color: var(--color-ob-title);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-style: italic;
}
.np_ob_group {
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}

.np_ob_body {
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.np_ob_subject {
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.1em;
}

/* Even line numbers in the thread */
.np_result_line1 {
  padding-left:   3px;
  padding-top:    6px;
  padding-right:  0px;
  padding-bottom: 6px;
  background: var(--color-dark);
  margin: 0px;
}

/* Odd line numbers in the thread */
.np_result_line2 {
  padding-left: 3px;
  padding-top:    6px;
  padding-right:  0px;
  padding-bottom: 6px;
  background: var(--color-light);
  border-top: 1px solid var(--color-row-border);
  border-bottom: 1px solid var(--color-row-border); 
  margin: 0px;
}

.np_ob_tail {
  font-size: 0.7em;
}
/* =========== navigation buttons on top of every page =========== */
.np_buttonbar {
  background: var(--color-dark);
  padding: 1px;
  margin-bottom: 1px;
  width: 100%;
  color: black;
  font-size: 0.6em;
}

.np_button_link {
  padding-left: 5px;
  padding-right: 5px;
  border: none;
  margin-right: 10px;
  color: var(--color-text-alt);
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-dark);
  border-radius: 5px;
  border: 1px solid var(--color-ob-date);
  font-size: 1em;
}

.np_button_link:hover {
  color: var(--color-dark);
  background: var(--color-text-alt);
}

td.np_button {
  padding-left: 5px;
  padding-right: 5px;
  border-right: solid white 1px;
  color: white;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

a.np_button {
  color: white;
  text-decoration: underline;
}

.button_container {
  text-align:center;
}

.np_pages {
  color: var(--color-text-alt);
}

.np_pages_selected {
  color: var(--color-ob-date) !important;
  text-weight: bold;
  margin-left: 5px;
  font-size: 110%;
}

.np_pages_unselected {
  color: var(--color-text-alt) !important;
  text-decoration: underline;
  margin-left: 5px;
}

input[type=submit] {
    padding:5px; 
    border:1px solid var(--color-title); 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=submit]:hover {
    color: var(--color-medium);
    background: var(--color-title);
}

input[type=button] {
    padding:5px;
    border:1px solid var(--color-title);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=button]:hover {
    color: var(--color-medium);
    background: var(--color-title);
}

a:link {
    text-decoration: none;
    color: var(--color-link);
    font-size: inherit;
}

a:visited {
    text-decoration: none;
    color: var(--color-visited);
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}