/* main CSS */

@import url("/css/blob.css");

:root {
--main_bg: #E5E9EE;
--notepad_bg: #EFEED9;
--notepad_line_even: var(--notepad_bg);
--notepad_line_odd: #c5c4b0;
--button_bg: #6498cb;
--button_bg_shade: #355a7a;
--link_color: #2F466A;
--link_hover: #3385DC;
--text_box: #E5E9EE;
--text_box_nest: #EFEED9;
--text_color: #355a7a;
--text_light: white;
--text_shade: #6498cb;
--text_input: #000000;
--text_form: var(--blog_tile_bg);
--border: #355a7a;
--border_light: #afcce8;
--border_blog: #afcce8;
--border_shade: #8dadc9;
--code_bg: #000000;
--code_bg_even: var(--code_bg);
--code_bg_odd: #26282A;
--code_text: lightgreen;
--blog_tile_bg: #D2D9E3;
--blog_tile_bg_shade: #D0DEF6;
--focus: white;
}

::selection {
    color: darkblue;
    background-color: lightgreen; }

html {
  height: 100%;
  color: #000000;
  background: url("/content/bluemarb.jpg");
  background-repeat: repeat;
  background-color: var(--main_bg);
  margin: 0px;
  padding: 0px;
  border: 0px;
  }

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 15px;
  height: 100%;
  color: var(--text_color);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.main {
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  /*background: url("/content/corner.bmp") repeat-x;*/
  background-color: var(--main_bg);
  text-align: left;
  width: 100%;
  box-shadow: 2px 2px 0 0 var(--border), 0 0 1px 1px var(--border); }
.valign {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100%; }

a, .comment_toggle {
  word-break: break-all;
  transition: color .2s ease-in-out;
  color: var(--link_color); }
  a:hover, .comment_toggle:hover {
    transition: color .2s ease-in-out;
    color: var(--link_hover); }
  .link {
    word-break: normal; }

hr {
  border-color: var(--border); }

h1 {
  filter: drop-shadow(0px 0px 4px #FFFFFF);
  text-shadow: 2px 2px var(--text_color);
  color: var(--text_shade); }
li {
  list-style-position: inside }

.sidebar {
  border-right: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  padding: 4px;
  min-width: 120px;
  width: 160px;
  vertical-align: top;
  background-color: #FFFFFF; }
  .sidebar_item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0px 4px;
    display: block; }
  .sidebar_item_active {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0px 4px;
    background-color: #d1caec;
    display: block; }
  .sidebar_item:hover {
    color: red;
    transition: background-color 150ms; }

.hide {
  display: none; }

.sitenav {
  text-align: center;
  border-bottom: 1px solid #56516d;
  background-color: #d1caec; 
  background-repeat: repeat; }
  .sitenav_button, .homepage_button {
    padding: 8px 16px;
    font-size: 15px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    transition: color .5s ease-in-out;
    margin: 2px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--border_shade);
    border-radius: 0px 4px;
    background-color: var(--button_bg);
    background-image: linear-gradient(var(--button_bg),var(--border_shade));
    min-width: 48px;
    max-height: 37px;
    color: var(--text_light);
    box-shadow: inset -1px -1px var(--border), inset 1px 1px var(--border_light) }
    .sitenav_button:active, .homepage_button:active {
      background-image: none;
      background-color: var(--button_bg_shade);
      border-bottom: 1px solid var(--border_shade);
      border-right: 1px solid var(--border_shade);
      box-shadow: inset -1px -1px var(--border_light), inset 1px 1px var(--border); }
    .sitenav_button:focus, .homepage_button:focus {
      background-image: none;
      background-color: var(--button_bg_shade);
      outline: 1px dotted var(--focus);
      outline-offset: -7px;
      text-shadow: 0px 0px 5px var(--border_light);
      color: var(--text_light); }
    .sitenav_button:hover, .homepage_button:hover {
      transition: color .2s ease-in-out;
      text-shadow: 0px 0px 5px var(--border_light);
      color: var(--text_light); }
  .sitenav_button_disabled {
    font-size: 15px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    padding: 8px 16px;
    margin: 2px;
    text-align: center;
    border-bottom: 1px solid var(--border_light);
    border-right: 1px solid var(--border_light);
    border: 1px solid var(--border_shade);
    border-radius: 0px 4px;
    box-shadow: inset 1px 1px var(--border), inset -1px -1px var(--border_light);
    background-color: var(--border);
    background-image: linear-gradient(var(--border),var(--button_bg));
    min-width: 48px;
    min-height: 25px;
    color: var(--text_shade);}
    .sitenav_button_disabled:hover {
      color:  var(--text_shade);}

.banner_box {
    margin-bottom: 12px;
    background-image: url(/images/wheat_field_banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 4px 4px 0 0 var(--border), 0 0 1px 1px var(--border);}

.innersection {
  height: 100%;
  width: 100%; }

.content_adapt {
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
  border-width: 2px;
  border-color: var(--border_blog);
  border-radius: 4px;
  vertical-align: top;
  margin-left: auto;
  margin-right: auto;
  min-width: 470px;
  max-width: 900px;
  background-color: var(--main_bg);
  background: url("/content/bg_list_n.jpg");
  background-repeat: repeat;
  /*background-image: url("/content/texture.png");
  background-repeat: repeat;*/}

.content_area {
  vertical-align: top;
  padding: 5px; }
  .content_area_bottom {
    vertical-align: bottom;
    padding: 5px; }

.content_preview {
  vertical-align: top;
  padding: 5px; }

.center_nav {
  vertical-align: middle;
  width: 50%; }

.logo {
  vertical-align: middle; }

article {
  margin: 20px 4px 4px 4px;
  background-color: var(--blog_tile_bg_shade);
  border: 1px solid var(--border);
  /**background: url("/content/tile.gif") repeat;**/
  /**background: url("/content/night_sky.png") no-repeat;**/
  background-position: bottom; }

.center {
  vertical-align: middle;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.play-music {
  min-height: 40px; }

.code {
  font-family: "Courier New", Courier, monospace;
  color: var(--code_text);
  display: block;
  border: 1px solid var(--code_text);
  border-radius: 4px;
  padding: 4px;
  background-color: var(--code_bg);
  box-shadow: 4px 4px 0 0 var(--border_shade), 0 0 1px 1px var(--border_shade);
  margin-left: auto;
  margin-right: auto;
  min-width: 440px;
  width: 80%;
  Overflow-x: auto; }
  .code .p_prefix::before {
    content: attr(prefix);
    display: inline-block;
    margin-right: 0.5rem; }

.code_text {
  font-family: "Courier New", Courier, monospace;
  color: var(--code_text);
  display: block;
  border: 1px solid var(--code_text);
  border-radius: 4px;
  padding: 4px;
  background-color: var(--code_bg);
  box-shadow: 4px 4px 0 0 var(--border_shade), 0 0 1px 1px var(--border_shade);
  margin-left: auto;
  margin-right: auto;
  min-width: 440px;
  max-width: 700px;
  width: 80%;
  Overflow-x: auto; }
  .code_text tr:nth-child(even) {
    background-color: var(--code_bg_even);}
  .code_text tr:nth-child(odd) {
    background-color: var(--code_bg_odd);}

.blog_tile {
  font-size: 15px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
  transition: color .2s ease-in-out;
  border-radius: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 6px;
  padding-right: 6px;
  background-color: var(--blog_tile_bg);}
h2 {
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--text_light);
  border: 1px solid var(--border);
  transition: color .2s ease-in-out;
  border-radius: 4px;
  background-image: linear-gradient(var(--button_bg),var(--border_shade));}
  .blog_tile h3 {
    padding: 0px;
    margin: 0px;
    word-break: normal; }
  .blog_tile:hover, .blog_tile:focus {
    background-color: var(--blog_tile_bg_shade);
    text-shadow: 0px 0px 10px var(--text_light);
    transition: border-color .2s ease-in-out; }

.img_style, .img_blog, .img_banner {
  border-radius: 0px;
  box-shadow: 4px 4px 0 0 var(--border), 0 0 1px 1px var(--border);box-shadow: 4px 4px 0 0 var(--border), 0 0 1px 1px var(--border); }

.note_form {
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 4px 4px 0 0 var(--notepad_line_odd);
  background-color: var(--notepad_bg);
  background-image: url("/content/tack.png");
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: right 3px top 3px;}

.text_form {
  padding: 4px;
  border: 1px dashed var(--text_color);
  border-radius: 4px;
  background-color: var(--text_form);}

.news_table tr:nth-child(even) {
  background-color: var(--notepad_line_even);}
  .news_table tr:nth-child(odd) {
    background-color: var(--notepad_bg);}

.index_row a {
  display: block;}
  .index_row:hover {
    background-color: var(--notepad_bg);}

.monitor {
  border-left: 75px solid;
  border-right: 75px solid;
  border-top: 104px solid;
  border-bottom: 80px solid;
  border-image: url("../videos/images/trinitron.gif");
  border-image-slice: 265 199 205 199;
  outline: none; }

.pagination a, .homepage_button {
  border-radius: 0px 4px;
  padding: 8px 16px;}
  .pagination a.active {
    pointer-events: none;}
  .pagination a.empty {
    cursor: not-allowed;}

.comment_state {
  display: none;}
#comment_toggle {
  display: none;}
#comment_toggle, .comment_toggle {
  text-decoration: underline;
  cursor: pointer;}
#comment_toggle:checked ~ .comment_state {
  display: block;}

#comments .forum,#comments .ex,#comments .err {
  min-width: 400px;}

#comments .err {
  background :#faa; }

#comments .ex {
  background: #ffa; }

#comments ul {
  list-style: none;
  padding: 0;
  margin: 5px 0 0; }

#comments li {
  min-width: 400px;
  background-color: var(--text_box_nest);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0px 10px 0;
  margin: 8px 0; }

#comments > ul > li {
  min-width: 400px;
  max-height: 600px;
  background-color: var(--text_box);
  border: 1px solid var(--border);
  padding: 0px 10px 0;
  margin: 8px 0;
  overflow: auto; }

#comments p,#comments pre {
  font-size: 12px;
  margin-top: 0; }
  pre {
    word-wrap: break-word;
    white-space: pre-wrap;}

#comments a,#comments .date {
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: var(--link_color);
  cursor: pointer;
  margin: 0 10px 0 0; }

#comments a:hover {
  color: var(--link_hover); }

#comments form {
  margin: 0 0 20px;
  display: none; }

#comments .id {
  height: 0; }

#comments textarea {
  color: var(--text_color);
  padding: 5px;
  background-color: var(--text_light);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 50%;
  max-width: 80%;
  min-height: 81px;
  max-height: 300px;
  width: 442px;
  height: 70px;}

#comments .captcha_input {
  color: var(--text_color);
  font-family: Verdana, Helvetica, Arial, sans-serif;
  vertical-align: top;
  border-radius: 0px;
  padding: 5px;
  height: 20px;
  width: 305px;
  background-color: var(--text_light);
  border: 1px solid var(--border);} 
  #comments input::placeholder, #comments textarea::placeholder {
    color: var(--text_color);}

#comments .captcha_button {
  padding: 8px 16px; }

#comments .captcha_img {
  border: 1px solid var(--border);}

#comments .capbox {
width: 100%;}

#comments .capbox-inner {
color: var(--text_color); }

.nav_buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center; }

.grid_container {
  grid-gap: 4px;
  display: grid; }
  .grid_container_fill {
    word-break: normal;
    display: grid;
    grid-template-columns: 45% 55% }
  .grid_container_fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .grid_container_nav {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.grid_element h3 {
  margin-top: 0px;}
  .grid_image {
  width: 100%;
  border-radius: 0px;
  box-shadow: 4px 4px 0 0 var(--border), 0 0 1px 1px var(--border);box-shadow: 4px 4px 0 0 var(--border), 0 0 1px 1px var(--border); }
  .grid_item {
    padding: 8px; }

.flex_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 5px; }

.flex_text {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row; }

.container {
  word-break: normal;
  transition: color .2s ease-in-out;
  text-decoration: none;
  margin: 2px;
  padding: 5px;
  flex: 47%; }
  .container img, .container video {
    width: 100%;
    display: block; }
  .container:hover, .container:hover a {
    border-color: lightblue;
    transition: .2s ease-in-out; }

.container_text {
  text-decoration: none;
  flex: 50%;
  display: inline-block; }


.left {
  margin: 20px;
  max-width: 48%;
  float: left; }
.right {
  margin: 20px;
  max-width: 48%;
  float: right; }


.variable {
  font-weight: normal;
  border: 1px solid lightgreen;
  border-radius: 4px;
  background-color: var(--notepad_bg); }

.play_btn {
  width: 19px;
  height: 12px;
  border: none;
  background: url("/music/images/play_normal.bmp") no-repeat; }
  .play_btn:active {
    background: url("/music/images/play_highlight.bmp") no-repeat; }
.pause_btn {
  width: 19px;
  height: 12px;
  border: none;
  background: url("/music/images/pause_normal.bmp") no-repeat; }
  .pause_btn:active {
    background: url("/music/images/pause_highlight.bmp") no-repeat; }
.stop_btn {
  width: 19px;
  height: 12px;
  border: none;
  background: url("/music/images/stop_normal.bmp") no-repeat; }
  .stop_btn:active {
    background: url("/music/images/stop_highlight.bmp") no-repeat; }

#seekbar {
  background: red;
  width: 100%;
  height: 10px;
  display: block;
  background: url("/music/images/posbar.bmp"); /* Otherwise white in Chrome */
  background-repeat: repeat; }

input:focus {
    outline: none;}
  input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    height: 10px;
    background: url("/music/images/posbar.bmp"); /* Otherwise white in Chrome */
    background-repeat: repeat; }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 8px;
      background-color: #319CFF;
      border: 1px solid #319CFF;
      border-radius: 4px; }
    input[type=range]::-ms-track {
      width: 100%;
      cursor: pointer; /* Hides the slider so custom styles can be added */
      background: transparent; 
      border-color: transparent;
      color: transparent; }
    input[type=range]:focus {
      outline: none; } /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */

.homepage_body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 15px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px; }

.homepage_main {
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  /*background: url("/content/corner.bmp") repeat-x;*/
  background-color: var(--main_bg);
  text-align: left;
  width: 55%;
  box-shadow: 2px 2px 0 0 var(--border), 0 0 1px 1px var(--border); }

.home_title, .blog_title, .video_title{
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--text_light);
  border: 1px solid var(--border);
  transition: color .2s ease-in-out;
  border-radius: 4px;
  background-color: var(--button_bg);}

.homepage_adapt {
  vertical-align: top;
  border-width: 2px;
  border-color: var(--border_light);
  border-radius: 4px;
  vertical-align: top;
  margin-left: auto;
  margin-right: auto;
  min-width: 780px;
  max-width: 1600px;
  background-color: var(--main_bg);
  background-image: url("/content/bg_list.jpg");
  background-repeat: repeat;
  /*background-image: url("/content/texture.png");
  background-repeat: repeat;*/}

.home_container {
  word-break: normal;
  text-decoration: none;
  margin: 4px;
  padding: 5px;
  flex: 300px; }

.homepage_table {
  border-collapse: collapse; }
  .homepage_table, homepage_table tr, homepage_table td {
    border: none; }

.homepage_box, .video_box, .blog_box{
    margin-top:2px;
    margin-bottom: 2px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background-color: var(--main_bg);}
  aside .homepage_box pre, aside .homepage_box p, aside .homepage_box a, aside .homepage_box iframe{
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px; }

.homepage_date {
  background-color: none; }

.homepage_input {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 15px;
  vertical-align: top;
  padding: 8px 16px;
  margin: 2px;
  border: 1px solid var(--border);
  border-radius: 0px 4px;
  background-color: var(--text_light);
  max-height: 33px;
  color: var(--text_input);
  box-shadow: 3px 3px 0 0 var(--button_bg_shade); }

.homepage_notif {
  border-radius: 4px;
  border: 1px solid #9e95ff;
  background-color: var(--notepad_bg);}

.homepage_desc {
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 0px;
  margin-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  border-left: 1px solid #9e95ff;
  border-right: 1px solid #9e95ff;
  border-bottom: 1px solid #9e95ff;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: var(--notepad_bg); }

.tabs {
  background: var(--blog_tile_bg_shade);
  user-select: none;
  position: relative;
  height: 90px; /* This part sucks */
  clear: both; }
.tab {
  float: left; }
  .tab [type=radio] {
    display: none; }
  .tab label {
    transition: .2s ease-in-out;
    margin: 0px;
    padding: 0px 5px 0px 5px;
    position: relative;
    left: 70px }
    .tab label:hover {
      transition: color .2s ease-in-out;
      background-color: var(--notepad_bg);
      color: var(--link_hover);
      cursor: pointer; }

[type=radio]:checked ~ label {
  color: var(--text_color);
  border-bottom: 1px solid var(--text_color);
  z-index: 2; }
[type=radio]:checked ~ label ~ .content {
  z-index: 1; }

.content {
  position: absolute;
  top: 21px;
  left: 0;
  background: var(--blog_tile_bg_shade);
  right: 0;
  bottom: 0; }

.item_list {
  display: block; }
  .item_list:hover {
    background-color: var(--notepad_bg); }

@media print { 
  .no-print, .no-print *, .sitenav_button, .sitenav_button_disabled, .forum, video, .homepage_input, .homepage_button {
    display: none !important; }
  .body {
    color: black;
    font-family: none; }
  .main, article, .blog_box, .video_box{
    border-style: none;
    background: none;
    text-align: left;
    width: 100%;
    box-shadow: none; }
  .blog_tile, h2 {
    color: black;
    border: 1px solid;
    text-shadow: none;
    font-family: none; }
  .note_form {
    border-color: black;
    border-radius: 0px;
    box-shadow: none; }
  .img, .img_style, .img_blog, .grid_image {
    border-radius: 0px;
    box-shadow: none; }
  hr {
    border-color: black; }
  a {
    color: black; }
  p, li, ul, ol, blockquote, h1 {
    color: black;
    text-shadow: none; }
  .text_form {
    border: none; }
  .code, .code_text {
    color: black;
    border-radius: 0px;
    border-color: black;
    box-shadow: none; }
  .variable {
    border-color: black; }
}

@media only screen and (max-width: 640px) {
  .left {
    vertical-align: middle;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    max-width: 100%;
    float: none; }
  .right {
    vertical-align: middle;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    max-width: 100%;
    float: none; }
  .main .img_style, .img_blog {
    width: 80%; }
  .grid_image,
  .main .container .img_style {
    width: 70%; }
  .grid_container_fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}
}