/*
 Shamelessly stolen from "Here, There, and Everywhere",
 including but not limited to "bootstrap", "stack overflow", 
 "Mike Dane", "w3schools", et al.
 */

.backclass {
  background-image:url(/assets/images/default.png)
}

.plainclass {
  color:            white;
  background-color: #101030;
}

/* See https://www.w3schools.com/colors/colors_hsl.asp              */
/* See https://www.quackit.com/css/color/charts/hsl_color_chart.cfm */
.plainclass1 {
  color:            hsl(0, 100%, 100%);
  background-color: hsl(0, 10%, 10%);
  line-height:      120%;
  font-family:      monospace,courier;
}

.plainclass1 li {
  line-height:      140%;
}

.plainclass1 h1 {
  color:            hsl(100, 50%, 50%);
}

.plainclass1 h2 {
  color:            hsl(100, 50%, 50%);
}

.plainclass1 h3 {
  color:            hsl(100, 50%, 50%);
}

.container {
  max-width:    70%;
  margin:       0 auto;
  font-size:    1em;
  text-align:   justify;
}

.container a {
  color: #a0a0a0;
}

.container a:hover {
  color: #f0f0f0;
}

.row {
}

.column {
  float:            left;
  display:          inline-block;
  background:       #808080;
  height:           130px;
  width:            100%;
  padding-top:      10px;
  padding-bottom:   10px;
  padding-left:     10px;
  padding-right:    10px;
  text-align:       left;
}

.left {
  width:            130px;
}

.right1 {
  height:           66px;
  width:            calc(100% - 200px);
  padding-top:      24px;
  padding-bottom:   0px;
  padding-left:     30px;
  font-size:        1.9em;
  font-weight:      bold;
}

.right2 {
  height:           50px;
  width:            calc(100% - 200px);
  padding-top:      5px;
  padding-bottom:   5px;
  padding-left:     30px;
  font-size:        1.3em;
  font-weight:      bold;
}
}

.youtube {
  float:            left;
  display:          inline-block;
  height:           150px;
  width:            100%;
  padding-top:      10px;
  padding-bottom:   10px;
  padding-left:     10px;
  padding-right:    10px;
}

.yvideo {
  width:            25%;
  height:           100%;
  padding-top:      0px;
  padding-bottom:   0px;
  padding-left:     0px;
  padding-right:    0px;
}

.yinfo {
  width:            calc(75%  - 30px);
  height:           calc(100% - 20px);
  padding-top:      10px;
  padding-bottom:   10px;
  padding-left:     10px;
  padding-right:    10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.navbar {
  font-size:        0.8em;
  border-width:     0px;
  margin:           0px;
}

.navbar ul li {
  display:          inline-block;
  background-color: hsla(0,     0%,    0%, 1);
  padding:          11px;
}

.navbar ul li a {
  text-decoration:  none;
}

.navbar ul li a:hover {
  background-color: hsla(255,   100%,   50%, 1);
  font-size:        1.15em;
  font-weight:      bold;
  padding:          2px;
}

pre {
  background-color: hsla(0,     0%,    0%, 1);
  border:           1px solid hsla(0,    50%,   20%, 1);
  padding:          10px;
  font-size:        16px;
  color:            hsla(0,   100%,  100%, 1);
  border-radius:    2px;
  word-wrap:        normal;
  overflow:         auto;
  overflow-y:       hidden;
}

table {
  width: 100%;
  margin: 0 0 20px 0;
}

th {
  text-align: left;
  border-bottom: 1px dashed #b5e853;
  padding: 5px 10px;
}

td {
  padding: 5px 10px;
}

/*
  ZCZC
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px; 
  color: #b5e853;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 2px;
  word-wrap: normal;
  overflow: auto;
  overflow-y: hidden;
  max-width: 65%;

 */

/*
 ************************************************************
 */

@media screen and (max-width:768px) {
  ul {
    margin: 0;
    padding: 0;
  }
  #navbar ul li {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  #navbar ul li a {
    margin: 0;
    padding: 0;
  }
  #menu {
    display: none;
  }
  #maincontent {
    width: 100%;
    padding: 0;
  }
  h1 {
    font-size: 1em;
  }
}

/*
 ************************************************************
 */