html {font-family:calibri;background:FloralWhite;color:black;}
html,body{height:100%;}
body {display: flex;flex-direction: column;margin:0px}
table {border-collapse:collapse;}
th {background-color:DarkMagenta;color:white;font-weight:bold;vertical-align:middle}
td {vertical-align:top;}
h1{color:DarkMagenta;}
body.code h3{color:#e6e6e6;}
button{
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: DarkOliveGreen;
    color: White;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    vertical-align:middle;
    transition: background 250ms ease-in-out, 
            transform 150ms ease;
}
button:active {transform: scale(0.99);}
button:hover {
    background-color:white;
    color:DarkOliveGreen;
}
code {font-family:consolas;}
hr {color:DarkMagenta;}
input,select {
    font-family:consolas;
    font-size:1.0em;
    border:2px solid gray;
    border-radius:5px;
}
input[type="button"]{
    display: inline-block;
    border: none;
    border-radius:0;
    padding: 0;
    margin: 0;
    text-decoration: none;
    background: DarkOliveGreen;
    color: White;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    vertical-align:middle;
    transition: background 250ms ease-in-out, 
            transform 150ms ease;
}
input[type="number"] {
    width:80px;
}
label {padding-right:5px;}
nav {
	background-color:DarkOliveGreen;
	overflow:hidden;
	position:absolute;
	right:0;
	top:31px;
}
nav a {
	float: left;
	display: block;
	width:100px;
	color: white;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
}
nav a:hover {
	background-color: White;
	color:DarkOliveGreen;
}
nav a.active {
	background-color:Olive;
	color:white;
}
nav .icon {
	display:none;
	font-size:1.5em;
	padding:5px 5px;
}
.banner{
    display:inline-block;
}
.bborder td {border-bottom:1px solid DarkMagenta;}
.bkgreen {background-color:DarkOliveGreen;color:white;}
.bkpink {background-color:DarkMagenta;color:white;}
.blank {
    background:none;
    border:0;
    color:black;
    margin:0;
    padding:0;
}
.bold {font-weight:bold;}
.borders tr td {border:1px solid DarkMagenta;}
.bottom {vertical-align:bottom;}
.center{text-align:center;}
.circle{
  height:40px;
  width:40px;
  text-align:center;
  display:inline-block;
  border-radius:50%;
  background-color:GreenYellow;
  color: white;
  font-weight:bold;
  font-size:1.5em;
  vertical-align:middle;
}
.code{background-color:black;font-family:consolas;}
.comment {color:#4dc07c;}
.content {flex: 1 0 auto; margin:5px;}
.float-left {float:left;}
.float-right {float:right;}
.foot{font-size:0.7em;padding:0.7em}
.footer {flex-shrink: 0;background-color:black;}
.full {width:100%;}
.green {color:DarkOliveGreen;}
.h3 {font-size:1.2em;}
.header {
    background-color:DarkOliveGreen;
    color:white;
    font-weight:bold;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:0;
    padding-left:10px;
	margin:0;
}
.heading {background-color:black;}
.inline {display:inline-block;}
.left {text-align:left;}
.middle {vertical-align:middle;}
.pink {color:DarkMagenta;}
.raised {
    background-color:white;
    border-radius:5px;
    box-shadow: 5px 5px 5px gray;
    padding:5px;
}
.right {text-align:right;}
.search {
    background-image: url('https://stieg3boys.fun/common/search.png');
    background-repeat:no-repeat;
    background-position: left center;
    height:36px;
    padding-left:30px;
}
.square{
    height:42px;
    width:42px;
    font-size:1.2em;
    margin:5px 5px 5px 5px;
    padding:0;
}
.tab {
  border: none;
  padding:0;
  display: inline-block;
  font-weight:bold;
  font-size: 1.2em;
  border-radius:0;
  background-color:Orchid;
  width:120px;
  height:36px;
  vertical-align:middle;
}
.tab:hover{
    Color:DarkMagenta;
}
.tabcontrol {
  border-bottom:4px solid DarkMagenta;
  margin:0;
  padding:0;
}
.tabselected {
  border: none;
  text-align: center;
  text-decoration: none;
  padding:0;
  display: inline-block;
  font-weight:bold;
  font-size: 1.2em;
  background-color:DarkMagenta;
  width:120px;
  height:36px;
  vertical-align:middle;
  border-radius:0;
}
.tabselected:hover{
    Color:DarkMagenta;
}
.tiny{
    height:32px;
    width:32px;
    font-size:1em;
    margin:5px 5px 5px 5px;
    padding:0;
}
.top {vertical-align:top;}


@media screen and (max-width: 600px){
    nav a{display: none;}
    nav a.icon {
        display: block;
    }
    nav.responsive {position: relative;}
    nav.responsive a {
        float: none;
        display: block;
        text-align: center;
	    width:100%;
    }
    table.flex thead{display:none}
    table.flex td{display:flex;width:100%;}
    table.flex tr td:last-child{border-bottom: 0.5em solid #ffffff}
    table.flex tr.flex td{background-color:#ebebeb;}
    table.flex tr.flex td::before{
        content: attr(label);
        font-weight: bold;
        width: 100px;
        min-width: 100px;
    }
    
}