/*
 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.jpg)
}

.plainclass {
  color:            #F4FCFF;
  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:            #101030;
  background-color: #F4FCFF;
  font-family:      'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

.plainclass1 h1 {
  color:            #036BFB;
  font-size:        1.9em;
  font-weight:      bold;
}

.plainclass1 h2 {
  color:            #036BFB;
  font-size:        1.4em;
  font-weight:      bold;
}

.plainclass1 h3 {
  color:            #036BFB;
}

.plainclass1 h4 {
  color:            #036BFB;
}

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

.container a {
  color: #04285A;
}

.container a:hover {
  color: #036BFB;
}

.row {
}

.column {
  float:            left;
  /* display:          inline-block; */
  background:       #CCEBDE;
  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 {
  border-radius:    25px;
  font-size:        0.8em;
  border-width:     0px;
  margin:           4px;
}

.navbar ul {
  padding:          12px;
}

.navbar ul li {
  border-radius: 12px;
  display:          inline-block;
  background-color: #CCEBDE;
  padding:          12px;
}

.navbar ul li a {
  text-decoration:  none;
  border-spacing:   6px;
}

.navbar ul li a:hover {
  box-shadow: #04285A;
}

pre {
  background-color: #04285A;
  border:           1px solid #036BFB;
  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 #036BFB;
  padding: 5px 10px;
}

td {
  padding: 5px 10px;
}

@media screen and (max-width:768px) {
  ul {
    margin: 0;
    border-radius: 25px;
    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;
  }
}