html {font-family:calibri;background:white;color:black;}
html,body{height:100%;}
body {display: flex;flex-direction: column;margin:0px}
table {border-collapse:collapse;}
.borders tr td {border:1px solid black;}
th {background-color:#cd9c7b;font-weight:bold;}
.th td{background-color:#cd9c7b;font-weight:bold;}
td {vertical-align:top;}
        .bbottom td,th {
            border-bottom:1px solid black;
        }
        .btop td,th {
            border-top:1px solid black;
        }
        .pad td,th {
            padding-top:9px;
            padding-bottom:9px;
        }
        .middle td,th {
            vertical-align:middle;
        }
h1{color:DarkOliveGreen}
body.code h3{color:#e6e6e6;}
button{
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: DarkOliveGreen;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
            transform 150ms ease;
}
.list tr:nth-child(odd) td {
    background-color:#dcdcdc;
}
.button {
    padding: 1px;
    background: DarkOliveGreen;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
}
button:active {transform: scale(0.99);}
button:hover {background-color:Black}
.foot{font-size:0.7em;padding:0.7em;}
button.image:hover{background-color:white;border:2px solid red;}
code {font-family:consolas;}
input[type=button]{
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin: 0;
    text-decoration: none;
    background: DarkOliveGreen;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
            transform 150ms ease;
}
hr{color:#646464;}
nav {
	background-color:black;
	overflow:hidden;
	position:absolute;
	right:0px;
	top:31px;
}
nav a {
	float: left;
	display: block;
	width:100px;
	color: white;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
}
.menu {
    display:inline;
    border:none;
    background:transparent;
    color:white;
    padding:0;
}
nav a:hover {
	background-color: DarkOliveGreen;
	color:white;
}
nav .active {
	background-color:DarkSlateGrey;
	color:white;
}
nav .icon {
	display:none;
	font-size:1.5em;
	padding:5px 5px;
}
.banner{
    display:inline-block;
}
.body{padding:10px;}
.bold{font-weight:bold;}
.bkpink{background-color:magenta;}
.center{text-align:center;}
.code{background-color:black;}
.comment {color:#4dc07c;}
.content {flex: 1 0 auto; margin:10px}
.flashcard {
    background-color:LightYellow;
    border-radius:10px;
    box-shadow: 5px 5px 5px gray;
    padding:10px;
}
.float-left {float:left;}
.float-right {float:right;}
.footer {flex-shrink: 0;background-color:black;}
.image {
    background-color:white;
    color:Black;
    border-radius:5px;
    border: 2px solid DarkOliveGreen;
    vertical-align:bottom;
}
.inline {display:inline-block;}
.pink{color:magenta;}
.progress-bar {
    margin:0;
    display:inline-block;
    padding:0;
    height:20px;
    color:black;
    background-color:#bee1ff;
}
.progress {
    padding:1px 1px 1px 1px;
    position:relative;
    margin:1px;
    border:1px solid black;
}
.progess-value{
    position:absolute;
    display:block;
    text-align:right;
    width:100%;
    top:3px;
    right:3px;
    padding-right:3px;
}
.raised {
    background-color:white;
    border-radius:5px;
    box-shadow: 5px 5px 5px gray;
    padding:5px;
}
.right {text-align:right;}
.square{
            height:42px;
            width:42px;
            font-size:1.2em;
            margin:5px 5px 5px 5px;
            padding:0;
        }
.squaregray{
    height:36px;
    width:36px;
    font-size:2.0em;
    font-weight:bold;
    color:gray;
    margin:1px 1px 1px 1px;
    padding:0;
    background: transparent;
    border:none;
}
.tiny {
    height:32px;
    width:32px;
    font-size:1.5em;
    font-weight:bold;
    margin:1px 1px 1px 1px;
    padding:0;
}
.tinygray{
    height:32px;
    width:32px;
    background: transparent;
    font-size:1.5em;
    font-weight:bold;
    color:gray;
    margin:1px 1px 1px 1px;
    padding:0;
    border:none;
}
.camo {
    background-color:transparent;
    color:black;
    height:24px;
    width:24px;
    font-size:1em;
    font-weight:normal;
    margin:0;
    padding:0;
}
.tab {
  border: none;
  display: inline-block;
  font-weight:bold;
  font-size: 1.2em;
  border-radius:0;
  background-color:#b9f8ae;
  width:120px;
  height:36px;
  vertical-align:middle;
}
.tabcontrol {
  border-bottom:3px solid #84f370;
}
.tabselected {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight:bold;
  font-size: 1.2em;
  background-color:#84f370;
  width:120px;
  height:36px;
  vertical-align:middle;
  border-radius:0;
}
.trebuchet {font-family:Trebuchet,sans-serif;}
.xmas-hatch {
    background:white;
    background:repeating-linear-gradient(45deg, transparent, transparent 7px, red 8px),
            repeating-linear-gradient(135deg, white, white 7px, red 8px);
    border:5px white solid;
    border-radius:5px;
}
.header {
    background-color:black;
    color:white;
    font-weight:bold;
    padding: 10px 10px 0px 10px;
	margin:0px;
}
.heading {background-color:black;}
.xmas {
    color:white;
    background: repeating-linear-gradient(45deg, red, red 10px,white 10px,white 20px);
}
@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;
    }
    td {
        font-size: 0.7em;
    }
    .tiny {
        height:24px;
        width:24px;
        font-size:1em;
        font-weight:bold;
        margin: 1px;
        padding: 0;
    }
}