html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    min-width: 300px;
    margin: 0;
    padding: 0;
    color: #004477;
}

body {
    min-height: 100vh;
    min-width: 300px;
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

a:link {
    color: #0044ff;
}
a:visited {
    color: #0000ff;
}
a:hover {
    color: #0088ff;
}

p {
    margin: 0.4em;
}

h1, span.h1 {
    display: block;
    text-align: center;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 1em 0;
    font-size: 1.5em;
    font-weight: bold;
}

h2, span.h2 {
    display: block;
    -webkit-margin-before: 0.8em;
    -webkit-margin-after: 0.8em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0.8em 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

h3, span.h3 {
    display: block;
    -webkit-margin-before: 0.6em;
    -webkit-margin-after: 0.6em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0.6em;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
}

h4, span.h4 {
    display: block;
    -webkit-margin-before: 0.4em;
    -webkit-margin-after: 0.4em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0.4em;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
}
form {
    /* Just to center the form on the page */
    margin: 0 auto;
    width: 100%;
    padding: 0.5em 0;
}
form > div {
    position: relative;
    padding-left: 0.5em;
}
form > div > label.opaque {
    text-align: left;
}
form div + div {
    margin-top: 0.2em;
}
form label.opaque {
    position: relative;
    top: -1.4em;
    bottom: 0;
    left: 40%;
    height:1.3em;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.2s;
}
form label.correction {
    display: inline-block;
    position: relative;
    top: -2.7em;
    width: 96%;
    text-align: right;
    padding: 0 1em;
}
div.correction label {
    display: inline-block;
    width: 96%;
    text-align: right;
    padding: 0 1em;
}
.correction {
    color: red;
}
.alert {
    background-color: lightpink !important;
}
.frame {
    border: 1px solid black;
    border-radius: 1em;
}
/*
div.col + div.col {
    display: none;
}
*/
/*
input[type=checkbox].inline, input[type=checkbox].inline + label {
    width: auto;
}
form input[type=checkbox], form input[type=checkbox] label {
     margin-top: 0;
}
*/
form input:focus ~ label.opaque {
    top: -3em;
    filter: alpha(opacity=10);
    opacity: 0.1;

}
form input:focus ~ label.correction {
    top: -4.4em;
    filter: alpha(opacity=10);
    opacity: 0.1;
}
form textarea:focus ~ label.opaque {
    top: -3em;
    filter: alpha(opacity=10);
    opacity: 0.1;
}
form textarea:focus ~ label.correction {
    top: -3em;
    filter: alpha(opacity=10);
    opacity: 0.1;
}
form input:valid + label.opaque, form textarea:valid + label.opaque {
  filter: alpha(opacity=0);
  opacity: 0;
}
form > div.Test {
    border: medium solid yellow;
}
form > div.Run {
    border: thick double red;
}
.dimmed {
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=60);

  /* Modern Browsers */
  opacity: 0.6;
}
.opaque {
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=40);

  /* Modern Browsers */
  opacity: 0.4;
}
.translucent {
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=10);

  /* Modern Browsers */
  opacity: 0.1;
}
input, textarea {
    /* background: transparent; */
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text field */
    width:100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid black;
    border-radius: 10px;
}
textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;
    /* To give enough room to type some text */
    height: 10em;

    /* To allow users to resize any textarea vertically
       It does not work on every browsers */
    resize: vertical;
}
.row {
    height: 1.3em;
    line-height: 1.3em;
    padding: 0.1em;
}
select {
    background-color: white;
    font: 1em sans-serif;
    border-radius: 1em;
    width:100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*
.row {
    flex-wrap: nowrap;
    align-items: flex-start;
    display: inline-flex;
    height: 1.3em;
    width: 100%;
}
.col {
    display: inline-flex;
    width: auto;
}
.stacked {
    display: inline-block;
}
*/
.warning {
    font-size: larger;
    color: red;
}
.signature {
    display: block;
    -webkit-margin-before: 0.4em;
    -webkit-margin-after: 0.4em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0.4em;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    font-style: italic;
}
.button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex-flow: row-reverse nowrap;
    -moz-flex-flow: row-reverse nowrap;
    -ms-flex-flow: row-reverse nowrap;
    flex-flow: row-reverse nowrap;
    box-sizing: border-box;
    width: 100%;
    height: 1.5em;
}
button, .info_field, .gender_choice {
    color: black;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-end;
    -ms-align-self: flex-end;
    align-self: flex-end;
    margin: 0.1em;
    font-weight: 600;
    font: 1.1em "Oswald";
    width: auto;
    border: 1px solid black;
    border-radius: 1em;
    cursor: pointer;
}
#validate, #validated {
    -webkit-align-self: flex-end;
    -ms-align-self: flex-end;
    align-self: flex-end;
    height: 1.4em;
    font-weight: 800;
    font: 1.1em "Oswald";
}
#validate {
    background-color: tomato;
}
#validated {
    background-color: limegreen;
}
#delete {
    -ms-flex-order: 3;
    order: 3;
    background-color: lightpink;
}
#add {
    -ms-flex-order: 2;
    order: 2;
    margin-top: 0.5em;
    background-color: lightgreen;
}
#pay_button {
    z-index: 1;
    width: 5em;
    min-width: 5em;
    max-width: 5em;
}
#pay {
    position:fixed;
    z-index: 2;
    top: 75%;
    top: calc(90% - 4.5em);
    left: 0;
    width: 5em;
    min-width: 5em;
    max-width: 5em;
    #border: 1px solid black;
    border-radius: 10px;
    padding: 0.5em;
    margin: 1em;
    height: 3em;
    text-align: center;
    background-color: lightskyblue;
    font-weight: bold;
    color: #047054;
}
#sum_field {
    position: fixed;
    z-index: 1;
    top: 85%;
    top: calc(90% - 1.5em);
    /*left: 70%;*/
    /*left: calc(75% - 1.5em);*/
    left: 0;
    border: 1px solid black;
    border-radius: 10px;
    padding: 0.5em;
    margin: 1em;
    width: 5em;
    min-width: 5em;
    max-width: 5em;
    height: 2em;
    font-weight: bold;
    text-align: center;
    background-color: lightgray;
    color: #047054;
}
button:disabled#pay, button[disabled]:active#pay, button[disabled]#pay,
input[type="button"][disabled]:active#pay, input[type="button"][disabled]#pay,
input[type="submit"][disabled]:active#pay, input[type="submit"][disabled]#pay,
input[type="reset"][disabled]:active#pay, input[type="reset"][disabled]#pay,
button[disabled]:hover#pay, input[type="button"][disabled]:hover#pay,
input[type="submit"][disabled]:hover#pay, input[type="reset"][disabled]:hover#pay
{
    background-color: lightpink;
}
#save, #save0, #save1 {
    -ms-flex-order: 1;
    order: 1;
    margin-top: 0.2em;
    background-color: greenyellow;
}
#id_search, #name_search {
    background-color: yellow;
}
#result_text {
    font-weight: 400;
    font-family: 'Inconsolata', monospace;
}
.info_field {
    display: inline-block;
    border: inset darkgoldenrod thin;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: lightgray;
    height: 1.2em;
    font-weight: 800;
    font: 1em "Oswald";
    width: 100%;
}
div.footer form {
    display: inline-block;
    background: red;
    width: 4em;
    padding: 0.5em 0;
    border: 1px solid black;
    border-radius: 1em;
}
div.footer form button {
    height: 1.5em;
    font: 1.2em sans-serif;
    width: 80%;
    border-radius: 1em;
}
div.checkbutton {
    display: inline-block;
    width: 6em;
    max-width: 45%;
    height: 1.2em;
    margin: 4px 0 4px 12px;
    padding: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid black;
}
div.checkbutton input[type=checkbox] {
    position: absolute;
    opacity: 1;
    width: 100%;
    height: 100%;
}
label.checkbutton {
    position: absolute;
    font: 1em sans-serif;
    background-color: grey;
    text-align: center;
    opacity: 1 !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
div.checkbutton input[type=checkbox] + label.checkbutton:after {
    content: "?";
}
div.checkbutton input[type=checkbox]:checked + label.checkbutton:after {
    content: "ed!";
}
dt {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
dd {
    margin-top: 0.2em;
}

iframe {
    width: 100%;
    height: 60vh;
}
iframe[seamless] {
    display: block;
}

span.subpara {
    display: inline-block;
    padding-bottom: 0.4em;
}
/* Outer container style: */

.container {
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 100vh;
    margin: 0 auto;
    max-width: 800px;
    text-align: left;
}
.wider {
    max-width: 1400px;
}
/* Inner container for headers: */

.header {
    /*outline: 1px solid red;*/
    display: -webkit-flex;
    display:flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    font-family: "Oswald", sans-serif;
}

#center_logo {
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
}

/* Inner container for contents: */

.christmas {
    background-color: white;
    color: red;
    font-weight: 900;
    font-style: italic;
    border-radius: 100%;
    border: 6px double silver;
    text-align: center;
    padding: 3em 2em;
}

.christmas a:link {
    color: blue;
}
.christmas a:visited {
    color: black;
}
.christmas a:hover {
    color: blue;
}

.headline {
    text-align: center;
    font-weight: 600;
}

.sub_header {
    font-size: 0.8em;
    font-weight: 300;
    font-style: italic;
    text-align: center;
}

.date_stamp {
    font-family: "Droid Serif", serif;
    font-weight: 400;
    font-size: 0.8em;
    font-style: italic;
    text-align: center;
}

.contents {
    /*outline: 1px solid yellow;*/
    /*font-family: "Droid Serif", serif;*/
    font-family: 'Oswald', sans-serif;
    -webkit-flex: 1;
    flex: 1;
    font-size: 1.2em;
    margin: 0 0.6em;
}

/* Inner container for footer:  */

.footer {
    /*outline: 1px solid lightgreen;*/
    font-size: 0.9em;
    text-align: center;
    padding-top: 0.7em;
    min-height: 2em;
}

.logout_link {
    height: 1.5em;
    font: 1.2em sans-serif;
    width: 80%;
    padding: 4px 8px;
    border-radius: 1em;
    color:white;
    background-color:red;
}
/*Menu related styles:*/

.menu h1 {
    margin: 0;
}

.menu {
    position:fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    padding: 0;
    background: rgb(150,150,150);
    background: rgba(200,200,200,0.7);
    /*color: #006600; */
    /*color: #cd083d; */
    transition: all 500ms ease;
    overflow: hidden;
    box-sizing: border-box;
}

.navigation {
    list-style: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
}

.nav-item {
    border: 1px solid white;
    border-right-color: #006600;
    border-bottom-color: #006600;
    margin: 4px;
}

.nav-item a {
    display: block;
    /* background-color: rgb(254,209,54); */
    /*color: #006600; */
    color: #003366; /* #cc0033; */
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    width: 100%;
}

.actionlist {
    list-style: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
}

.action-item button {
    font-weight: 600;
    text-decoration: none;
    width: 100%;
}

.action-item input {
    font-weight: 600;
    text-decoration: none;
    width: 79%;
}
.action-item label {
    text-align: right;
    font-weight: 600;
    width: 19%;
    display: inline-block;
}

.credit {
    display: inline-flex;
    list-style: none;
    width: 250px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: none;
}

.cred-img a img {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    border: 2px solid rgba(200,200,200,.3);
    margin: 1px;
    background-color: inherit;
}

.donate {
    display: block;
    width: 10em;
}

.donate input {
    border: 0 hidden;
}

#toggle {
    position: fixed;
    clip: rect(0, 0, 0, 0);
    cursor: pointer;
    left: -100%;
    top: -100%;
}

#toggle + label {
    position: fixed;
    left: 0;
    z-index: 1;
    width: 2.2em;
    border-radius: 3px;
    padding: 0 0 0.3em;
    margin: 0;
    color: rgb(246, 246, 246);
    color: rgba(246, 246, 246,0.7);
    background: rgb(200,200,200);
    background: rgba(200,200,200,0.7);
    color: white;
    line-height: 1.7em;
    font-size: 1.4em;
    font-weight: 800;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    transition: all 500ms ease;
}

#toggle + label:after {
    content: "Menu";
    font-size: large;
}

#toggle:checked ~ .menu {
    left: 0;
}

#toggle:checked + label {
    left: 220px;
    left: calc(250px - 2.3em);
}

#toggle:checked + label:after {
    content: "X";
    font-size: large;
}

/*
#toggle +label:hover {
    line-height: 1.6em;
    color: gold;
    font-size: 1.5em;
}
*/

/* Modified version of */
/* http://www.realcombiz.com/2014/01/how-to-expand-collapse-toggle-div-layer.html */
.toggle-box {
    display: none;
}

.toggle-box + label.toggle-box {
    cursor: pointer;
    display: block;
    font-weight: bold;
    font-size: 1.6em;
    line-height: 21px;
    margin-bottom: 5px;
}

.toggle-box:not(:checked) + label.toggle-box + div {
    display: none;
    margin-bottom: 5px;
}

.toggle-box:checked + label.toggle-box + div {
    display: block;
    margin-bottom: 5px;
}

.toggle-box:not(:checked) + label.toggle-box:before {
    background-color: gold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #006600;
    content: "+";
    opacity: 1;
    display: block;
    float: left;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    text-align: center;
    width: 20px;
}

.toggle-box:checked + label.toggle-box:before {
    display: none;
    /*content: "\2212";*/
}

.segmented-button {
  padding: 0.1em;
}
.segmented-button input[type="radio"] {
    display: none;
    height: 1em;
    width: 0;
}
.segmented-button label {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
    text-shadow: gold;
    border: 1px solid black;
    padding: 0 1em;
    -moz-box-orient: vertical;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -o-border-radius: 1em;
    -ms-border-radius: 1em;
    -khtml-border-radius: 1em;
    border-radius: 1em;
    background-color: green;
    color: black;
}
.segmented-button label:active, .segmented-button label.active {
    background: limegreen;
}
.segmented-button input:checked + label, .segmented-button label.selected {
    background: lime;
}
.segmented-button label.correction {
    top: 0;
    border: 0;
    background: transparent;
    width: auto;
}
/* From http://tutorialzine.com/2014/07/css-inline-help-tips/ */
.help-tip{
	position: absolute;
	top: 8px;
	right: 8px;
	text-align: center;
	background-color: lightskyblue;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 44px;
	cursor: default;
}
.help-tip:before{
	content:'?';
	font-weight: bold;
	color:yellow;
}
.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;
    z-index: 999;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}
.help-tip p{	/* The tooltip */
	display: none;
	text-align: left;
	background-color: #1E2021;
	padding: 20px;
	width: 260px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: 4px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#1E2021;
	right:10px;
	top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
	width:100%;
	height:40px;
	content:'';
	position: absolute;
	top:-40px;
	left:0;
}
/* unvisited link */
.help-tip a:link { color: yellow; }
/* visited link */
.help-tip a:visited { color: orange; }
/* CSS animation */
@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
		transform: scale(0.6);
	}

	100% {
		opacity:100;
		transform: scale(1);
	}
}
@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100; }
}
.silver_shadow {
    text-shadow: 1px 0 1px #cccccc, 0 1px 1px #bbbbbb,
    2px 1px 1px #cccccc, 1px 2px 1px #bbbbbb,
    3px 2px 1px #cccccc, 2px 3px 1px #bbbbbb,
    4px 3px 1px #cccccc;
}

.silver_gradient_radiant {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,c8c8c8+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 47%, rgba(200,200,200,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 47%,rgba(200,200,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 47%,rgba(200,200,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c8c8c8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.silver_gradient_vertical {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+10,c8c8c8+50,f6f6f6+90 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 10%, rgba(200,200,200,1) 50%, rgba(255,255,255,1) 90%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 10%,rgba(200,200,200,1) 50%,rgba(255,255,255,1) 90%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 10%,rgba(200,200,200,1) 50%,rgba(255,255,255,1) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}

/*
#front_twitter {
    text-align: center;
}
#front_twitter iframe {
    height 600px;
    width 100%;
}
*/
.section {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    padding: 3px;
    margin: 2px;
    border: 3px solid rgba(200,200,200,.3);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,c8c8c8+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 47%, rgba(200,200,200,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 47%,rgba(200,200,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 47%,rgba(200,200,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c8c8c8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

table#entries {
    font-size: 0.8em;
    white-space: nowrap;
}
/* Styles depending on screen size: */

@media all and (max-width: 499px) { /* Up to 500 px wide */
    /* .container {
        background: url("/images/logo_small_50th.png") top center;
    } */

    .header {
        font-weight: 600;
        font-size: 2em;
        max-height: 3em;
    }

    #left, #right {
        margin-top: 10px;
        object-fit: contain;
        max-width: 100px;
    }

    #center {
        margin-top: 10px;
        object-fit: contain;
        max-width: 100px;
    }

    form label.opaque {
        left: 0.5em;
    }
    /* Force table to not be like tables anymore */
    table,
    table thead,
    table tbody,
    table th,
    table td,
    table tr {
        display: block;
    }
    table th {
        display: none;
    }
    table {
        border-collapse: collapse;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    table thead tr {
        display: none;
    /*  position: absolute;
        top: -9999px;
        left: -9999px;  */
    }
    table tr { border: 1px solid #ccc; }
    /* Behave  like a "row" */
    table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 30%;
    }
    /* Now like a table header */
    table td:before {
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 25%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        color: black;
        filter: alpha(opacity=80);
        opacity: 0.8;
        background: whitesmoke;
    }
    tr:nth-of-type(even) {
        color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: white;
    }
    /* Label the team list data */
    table#teamlist td:nth-of-type(1):before { content: "Team Code"; }
    table#teamlist td:nth-of-type(2):before { content: "School"; }
    table#teamlist td:nth-of-type(3):before { content: "Area"; }
    table#teamlist td:nth-of-type(4):before { content: "State"; }
    /* Label the my entry data */
    table#entrylist td:nth-of-type(1):before { content: "Name"; }
    table#entrylist td:nth-of-type(2):before { content: "ID"; }
    table#entrylist td:nth-of-type(3):before { content: "Rating"; }
    table#entrylist td:nth-of-type(4):before { content: "Section"; }
    table#entrylist td:nth-of-type(5):before { content: "Grade"; }
    table#entrylist td:nth-of-type(6):before { content: "Team"; }
    table#entrylist td:nth-of-type(7):before { content: "School"; }
    /* Label the all entries data */
    table#entries td:nth-of-type(1):before { content: "Name"; }
    table#entries td:nth-of-type(2):before { content: "Rating"; }
    table#entries td:nth-of-type(3):before { content: "Section";}
    table#entries td:nth-of-type(4):before { content: "Grade"; }
    table#entries td:nth-of-type(5):before { content: "Team"; }
    table#entries td:nth-of-type(6):before { content: "School"; }
}

@media all and (min-width: 500px) { /* Between 500 px and 799 px wide */
    /* .container {
        background: url("/images/logo_medium_50th.png") top center;
    } */

    .header {
        font-weight: 700;
        font-size: 4em;
        max-height: 6em;
    }

    #left, #right {
        margin-top: 10px;
        object-fit: contain;
        max-width: 150px;
    }

    #center {
        margin-top: 10px;
        object-fit: contain;
        max-width: 200px;
    }
    form label.opaque {
        left: 7em;
    }
    /* Force table to not be like tables anymore */
    table,
    table thead,
    table tbody,
    table th,
    table td,
    table tr {
        display: block;
        width: 100%;
    }
    table th {
        display: none;
    }
    table {
        border-collapse: collapse;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    table thead tr {
        display: none;
    /*  position: absolute;
        top: -9999px;
        left: -9999px;  */
    }
    table tr { border: 1px solid #ccc; }
    /* Label the team list data */
    table#teamlist td:nth-of-type(1):before { content: "Team Code"; }
    table#teamlist td:nth-of-type(2):before { content: "School"; }
    table#teamlist td:nth-of-type(3):before { content: "Area"; }
    table#teamlist td:nth-of-type(4):before { content: "State"; }
    /* Label the my entry data */
    table#entrylist td:nth-of-type(1):before { content: "Name"; }
    table#entrylist td:nth-of-type(2):before { content: "ID"; }
    table#entrylist td:nth-of-type(3):before { content: "Rating"; }
    table#entrylist td:nth-of-type(4):before { content: "Section"; }
    table#entrylist td:nth-of-type(5):before { content: "Grade"; }
    table#entrylist td:nth-of-type(6):before { content: "Team"; }
    table#entrylist td:nth-of-type(7):before { content: "School"; }
    /* Label the all entries data */
    table#entries td:nth-of-type(1):before { content: "Name"; }
    table#entries td:nth-of-type(2):before { content: "Rating"; }
    table#entries td:nth-of-type(3):before { content: "Section";}
    table#entries td:nth-of-type(4):before { content: "Grade"; }
    table#entries td:nth-of-type(5):before { content: "Team"; }
    table#entries td:nth-of-type(6):before { content: "School"; }
    /* Behave  like a "row" */
    table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 30%;
    }
    /* Now like a table header */
    table td:before {
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 25%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        color: black;
        filter: alpha(opacity=80);
        opacity: 0.8;
        background: whitesmoke;
    }
    tr:nth-of-type(even) {
        color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: white;
    }
}

@media all and (min-width: 800px) { /* Between 800 px and 12800 px */
    /* .container {
        background: url("/images/logo_50th.png") top center;
    } */

    .header {
        font-weight: 800;
        font-size: 8em;
        max-height: 12em;
    }

    #left, #right {
        margin-top: 10px;
        object-fit: contain;
        max-width: 180px;
    }

    #center {
        margin-top: 10px;
        object-fit: contain;
        max-width: 300px;
    }
    form label.opaque {
        left: 10em;
    }
    /* Generic Table Styling, for Desktops/Laptops */
    table {
        display: table;
        width: 100%;
    }
    table thead {
        display: table-header-group;
    }
    table tbody {
        display: table;
    }
    table th {
        display: table-cell;
        text-align: center;
        width: auto;
        padding: 0.1em 0.5em;
    }
    table td {
        display: table-cell;
    }
    table tr {
        display: table-row;
    }
    table {
        border-collapse: separate;
    }
    table thead tr {
        display: table-row;
        position: relative;
        top: 0;
        left: 0;
    }
    table tr { border: 1px solid #ccc; }
    table td:before { content: ""; }
    table td {
        width: auto;
        border: inherit;
        position: inherit;
        padding: 0;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        color: black;
        filter: alpha(opacity=80);
        opacity: 0.8;
        background: whitesmoke;
    }
    tr:nth-of-type(even) {
        color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: white;
    }
    table td:before { content: ""; }
}

@media all and (min-width: 1280px) {
    /* From 1300 px and wider */
    /* To open the menu "automagically" at this width, we have to switch some styles around. */
    .menu {
        left: 0;
    }
    #toggle + label {
        left: 220px;
        left: calc(250px - 2.3em);
    }
    #toggle + label:after {
        content: "X";
        font-size: large;
    }
    #toggle:checked ~ .menu {
        left: -250px;
    }
    #toggle:checked + label {
        left: 0;
    }
    #toggle:checked + label:after {
        content: "Menu";
        font-size: large;
    }


    form label.opaque {
        left: 30%;
    }
    /* Generic Table Styling, for Desktops/Laptops */
    table {
        display: table;
        width: 100%;
    }
    table thead {
        display: table-header-group;
    }
    table tbody {
        display: table;
    }
    table th {
        display: table-cell;
        text-align: center;
        width: auto;
        padding: 0.1em 0.5em;
    }
    table td {
        display: table-cell;
    }
    table tr {
        display: table-row;
    }
    table {
        border-collapse: separate;
    }
    table thead tr {
        display: table-row;
        position: relative;
        top: 0;
        left: 0;
    }
    table tr { border: 1px solid #ccc; }
    table td {
        width: auto;
        border: inherit;
        position: inherit;
        padding: 0;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        color: black;
        filter: alpha(opacity=80);
        opacity: 0.8;
        background: whitesmoke;
    }
    tr:nth-of-type(even) {
        color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: white;
    }
    table td:before { content: ""; }
}