/* Minification failed. Returning unminified contents.
(1091,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '+'
 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style:disc;
}
li {
	margin-bottom:0;
}
ol {
	list-style-type:decimal;
	text-align:left;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
span.ord {
    font-variant-numeric: ordinal;
    -moz-font-feature-settings: "ordn";
    -ms-font-feature-settings: "ordn";
    -webkit-font-feature-settings: "ordn";
    font-feature-settings: "ordn";
}

.news, .grid2, .grid3 {
    width: 90%;
    max-width: 1200px;
    margin: 0.5em auto 1em auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
}
.card {
    background: white;
    text-decoration: none;
    color: #444;
    border: 1px solid gray;
/*    box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
    display: flex;
    flex-direction: column;
    min-height: 100%;
/*    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;*/
    -webkit-box-shadow: 5px 5px 3px 0 #AAAAAA;
    -moz-box-shadow: 5px 5px 3px 0 #AAAAAA;
    box-shadow: 5px 5px 3px 0 #AAAAAA;
}
.card .head {
    height: 6em;
    display: grid;
    background-size: cover;
    background-position: center center;
}
.card .head div {
    display:inline-block;
    margin:auto;
    font-weight:bold;
    font-size:220%;
/*    border:1px solid yellow;*/
}
.card .story {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.fact {
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.card p {
    flex: 1; /* make p grow to fill available space*/
    line-height: 1.4;
}

.card .invert {
    color: white;
    text-shadow: 0 0 8px black;
}
.card span {
    display:inline-block;
    margin:0 1ex;
}

@media only screen and (min-width: 560px) {
    .news {
        grid-template-columns: 1fr 1fr;
    }
    .news-1, .news-2, .news-3, .news-4 {
        grid-column: 1/3;
    }
}

@media only screen and (min-width: 720px) {
    .grid2 {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (min-width: 960px) {
    .news{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .news-2, .news-4 {
        grid-column: 3/5;
    }
}
div.flex {
    width: 90%;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin: 0 auto;
}
div.flex-item {
    padding:0.5em;
}
div.flex-item1 {
    padding: 0.5em;
    width: 80%;
    max-width:50em;
}
div.flex-item2 {
    padding: 0.5em;
    width: 45%;
    min-width:30em;
}

body {
	text-align:center;
	font-family: Calibri, Arial, Tahoma, Helvetica, sans-serif;
	background-color:#EFEFEF;
/*	max-width: min(56em, 98vw);*/
	margin: 0 auto;
}
div.page-div {
	width: 90%;
	max-width: 1200px;
	margin: 0.5em auto 1em auto;
}
h1, h2, h3, h4, h5 {
	margin-top:0.8em;
	margin-bottom:0.3em;
	padding:0;
	text-decoration:none;
}

h1, h2, h3, h4 {
	font-weight:bold;
}
.primary {
	color: #B01010;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
	font-weight: bold;
}
.secondary {
	color: darkgreen;
}
p {margin:0.5em 0;}

a.plain {
	border:none;
	text-decoration:none;
}
a.plain:hover {
	text-decoration:underline;
}
.follow-top {
	margin-bottom:0 !important;
}
.follow-bottom {
	margin-top:0 !important;
}
.extra-top{
	margin-top:1.5em !important;
}
.bold, b {
	font-weight:bold;
}
.underline {
	text-decoration:underline;
}
.hide {
	display: none;
}
.indent {
	margin-left:1.5em;
}
.text {
	text-align:justify !important;
}
.left {
	text-align:left !important;
}
.right {
	text-align:right !important;
}
.center {
	text-align: center !important;
}
.middle {
	vertical-align: middle !important;
}
.under {
	text-decoration:underline !important;
}
em, i {
	font-style:italic;
}
.team-name {
	font-weight: bold;
	font-style: italic;
}
.match-time-normal {
	font-size:90%;
	color: mediumblue;
}
.match-time-abnormal {
	font-size:90%;
	color: crimson;
}
span.match-cancel, span.match-lost, span.match-pending {
	color: crimson;
	font-weight:bold;
}
span.match-forfeit-loss {
	color: crimson;
}
span.match-forfeit-win {
	color: green;
}
span.match-error {
	color:purple;
}
span.match-makeup {
	color: purple;
	font-weight: bold;
}
span.match-won {
	color: green;
	font-weight: bold;
}
span.match-waiting, span.match-resched {
	color: blue;
	font-weight: bold;
}
span.match-games {
	font-weight: bold;
	color: black;
}
span.match-points {
	color: black;
}
.red {
	color: crimson;
}
.dark-red {
	color: #cc0000;
}
.green {
	color: green;
}
.dark-green {
	color: #009900;
}
.black {
	color: black;
}
.blue  {
	color:mediumblue;
}
.dark-blue {
	color: navy;
}
.dark-orange {
	color:chocolate;
}
.purple  {
	color: purple;
}
.dark-purple {
	color: #660066;
}
.dark-pink {
	color: #ff4d6a;
}
.dark-yellow {
	color: #664d00;
}
.dark-default {
	color: black;
}
.font-150 {
	font-size: 150% !important;
}
.font-120 {
	font-size: 120% !important;
}
.font-100 {
	font-size: 100% !important;
}
.help {
	color: #2F5597;
}
.neutral {
	color: lightslategrey;
}
.shadow {
	-webkit-box-shadow: 5px 5px 3px 0 #AAAAAA;
	-moz-box-shadow: 5px 5px 3px 0 #AAAAAA;
	box-shadow: 5px 5px 3px 0 #AAAAAA;
}
.truncate {
	overflow-x:hidden;
}
span.node-label {
	font-size: 100%;
}
span.node-sublabel {
	color:crimson;
	font-size:80%;
}
span.canceled {
	color:grey;
	text-decoration:line-through;
}
span.canceled:after 
{
	display:inline-block;
	content:"\A0 CANCELED";
	color:crimson;
	font-weight:bold;
	font-style:italic;
	text-decoration:none;
}
div.canceled {
	padding:2lh 0;
	background-image:url("/Content/images/CancelStamp.png");
	background-size: 50% auto;
	background-position:center center;
	background-repeat:no-repeat;
}

/*
div.panel-A, div.panel-B, div.panel-C, div.panel-W {
	margin: 1em auto;
	padding: 0.3em 0.8em 0.5em 0.8em;
	height: 100%;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	-webkit-box-shadow: 5px 5px 3px 0px #AAAAAA;
	-moz-box-shadow: 5px 5px 3px 0px #AAAAAA;
	box-shadow: 5px 5px 3px 0px #AAAAAA;
}

div.panel-A {
	border: 0.1em solid #B01010;
	background-color: #FFE0E0;
}

hr.panel-A {
	border-top: 1px solid #B01010;
}

div.panel-B {
	border: 0.1em solid darkgreen;
	background-color: #F4FFF4;
}

hr.panel-B {
	border-top: 1px solid darkgreen;
}

div.panel-C {
	border: 0.1em solid #CC9933;
	background-color: cornsilk;
}

hr.panel-C {
	border-top: 1px solid #CC9933;
}

div.panel-W {
	border: 0.1em solid gray;
	background-color: white;
}

hr.panel-W {
	border-top: 1px solid gray;
}*/
div.league-list {
	display: inline-block;
}
span.league-label {
	color:crimson;
}
.league-label {
	font-weight:bold;
	padding: 0 1em;
}
div.seasons, div.boards {
	margin: 0 auto;
	text-align:center;
}
div.season, div.board {
	display: inline-block;
	margin: 0.5lh 0.5em;
	vertical-align: top;
}
div.board {
	width: 30em;
	height: 8lh;
	display: grid;
	grid-template-columns: 10em 20em;
	background-color: white;
	border: 2px solid blue;
	border-radius: 4px;
}
div.season p {
	text-align:center;
	color:green;
	font-weight:bold;
	font-size: 120%;
	margin: 0 auto;
}
ul.group {
	text-align: center;
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}
ul.group li {
	margin-bottom: 0.5lh;
}
a.playoff {
	font-style:italic;
}

div.feedback {
	position: relative;
	width: 70%;
	max-width: 25em;
	font-weight: bold;
	padding: 0.5em 1em 0.8em 2.5em;
	margin: 0.5em auto;
	min-height: 2em;
	border-radius: 0.5em;
	box-shadow: 4px 4px 3px 0 #AAAAAA;
	background-repeat: no-repeat;
	background-position: 0.2em 0.2em;
	background-size: 2em;
	text-align: left;
}

img.close-button {
	position: absolute;
	top: 0.3em;
	right: 0.7ex;
	float: right;
	cursor: pointer;
}

div.feedback ul {
	list-style: square;
}

div.feedback-info {
	color: Navy;
	background-color: #ebf6f9;
	border: 1px solid Navy;
	background-image: url('/Content/images/info_icon.png');
	background-size: 2em;
}

div.feedback-warning {
	color: #B88A2E;
	background-color: lemonchiffon;
	border: 1px solid #B88A2E;
	background-image: url('/Content/images/warning_icon.png');
	background-size: 2em;
}

div.feedback-error {
	border: 1px solid #B01010;
	background-color: #FFE0E0;
	color: #B01010;
	background-image: url('/Content/images/error_icon.png');
	background-size: 2em;
}

div.note {
	width: 95%;
	min-height: 6.5em;
	height: auto;
	font-weight: bold;
	padding: 0.5em;
	margin: 0.5em auto;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	-webkit-box-shadow: 4px 4px 3px 0px #AAAAAA;
	-moz-box-shadow: 4px 4px 3px 0px #AAAAAA;
	box-shadow: 4px 4px 3px 0px #AAAAAA;
	text-align: left;
}

div.note-info {
	color: DarkGreen;
	background-color: #DEFADE;
	border: 1px solid DarkGreen;
}

div.note-warning {
	color: #B88A2E;
	background-color: lemonchiffon;
	border: 1px solid #B88A2E;
}

div.note-error {
	border: 1px solid #B01010;
	background-color: #FFE0E0;
	color: #B01010;
}

div.note img {
	max-height: 6em;
	max-width: 6em;
	height: auto;
	width: auto;
}

img.portrait {
	border: 2px solid navy;
	border-radius: 2px;
	background-color:white;
}
img.portrait-large {
	width:7em;
	height:auto;
}
img.portrait-card {
	height: 4lh;
	width:auto;
}

button.basic, button.cancel, button.edit, button.submit, button.info, button.admin, button.admin-disabled, button.login, button.disabled, button.red, button.green, button.blue, button.cornhole-rank, button.dark-blue {
	margin: 0.2em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: visible;
	-webkit-appearance: button;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
	vertical-align: middle;
	white-space: nowrap;
	text-align: center;
	line-height: 1.43;
	font-size: 95%;
	font-weight: 600;
	padding: 0.1em 0.4em;
	text-decoration: none;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
	display: inline-block;
}

button.medium {
	min-width: 4em;
}

button.wide {
	min-width: 6em;
}

.none {
	color: darkslateblue;
	font-style: italic;
}

button.cancel, button.red {
	border: 1px solid #df0909;
	background-color: #f62b2b;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f62b2b), to(#d20202));
	background-image: -webkit-linear-gradient(top, #f62b2b, #d20202);
	background-image: -moz-linear-gradient(top, #f62b2b, #d20202);
	background-image: -o-linear-gradient(top, #f62b2b, #d20202);
	background-image: linear-gradient(to bottom, #f62b2b, #d20202);
	border: 1px solid #b30808;
	background-color: #e40a0a;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e40a0a), to(#9f0202));
	background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
	background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
	background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
	background-image: linear-gradient(to bottom, #e40a0a, #9f0202);
}

button.edit, button.blue {
	border: 1px solid #25729a;
	background-color: #3093c7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
	background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
	background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
}

button.edit:hover, button.blue:hover {
	border: 1px solid #1c5675;
	background-color: #26759e;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
	background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
	background-image: -moz-linear-gradient(top, #26759e, #133d5b);
	background-image: -o-linear-gradient(top, #26759e, #133d5b);
	background-image: linear-gradient(to bottom, #26759e, #133d5b);
}

button.cornhole-rank, button.dark-blue {
	color: white;
	border: 1px solid navy;
	background: rgb(2,0,36);
	background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(77,38,231,1) 0%, rgba(80,61,204,1) 0%);
}

button.cornhole-rank:hover, button.dark-blue:hover {
	color: white;
	border: 1px solid navy;
	background: rgb(2,0,36);
	background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(77,38,231,1) 0%, rgba(33,19,124,1) 0%);
}

button.submit, button.green {
	border: 1px solid #34740e;
	background-color: #4ba614;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4ba614), to(#008c00));
	background-image: -webkit-linear-gradient(top, #4ba614, #008c00);
	background-image: -moz-linear-gradient(top, #4ba614, #008c00);
	background-image: -o-linear-gradient(top, #4ba614, #008c00);
	background-image: linear-gradient(to bottom, #4ba614, #008c00);
}

button.submit:hover, button.green:hover {
	border: 1px solid #224b09;
	background-color: #36780f;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#36780f), to(#005900));
	background-image: -webkit-linear-gradient(top, #36780f, #005900);
	background-image: -moz-linear-gradient(top, #36780f, #005900);
	background-image: -o-linear-gradient(top, #36780f, #005900);
	background-image: linear-gradient(to bottom, #36780f, #005900);
}

button.info {
	border: 1px solid #15aeec;
	background-color: #49c0f0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
	background-image: -webkit-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image: -moz-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image: -o-linear-gradient(top, #49c0f0, #2CAFE3);
	background-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);
}

button.info:hover {
	border: 1px solid #1090c3;
	background-color: #1ab0ec;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1ab0ec), to(#1a92c2));
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: -moz-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: -o-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}

button.disabled {
	border: 1px solid #b7b7b7;
	background-color: #d3d3d3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#707070));
	background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
	background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
	background-image: -o-linear-gradient(top, #d3d3d3, #707070);
	background-image: linear-gradient(to bottom, #d3d3d3, #707070);
	color: #f0f0f0;
}

button.select-on {
	border: 1px solid #e0c67f;
	background-color: #ebdaac;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebdaac), to(#B88A2E));
	background-image: -webkit-linear-gradient(top, #ebdaac, #B88A2E);
	background-image: -moz-linear-gradient(top, #ebdaac, #B88A2E);
	background-image: -o-linear-gradient(top, #ebdaac, #B88A2E);
	background-image: linear-gradient(to bottom, #ebdaac, #B88A2E);
}

button.select-on:hover {
	border: 1px solid #d7b55a;
	background-color: #e1c883;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e1c883), to(#8f6b24));
	background-image: -webkit-linear-gradient(top, #e1c883, #8f6b24);
	background-image: -moz-linear-gradient(top, #e1c883, #8f6b24);
	background-image: -o-linear-gradient(top, #e1c883, #8f6b24);
	background-image: linear-gradient(to bottom, #e1c883, #8f6b24);
}

button.select-off {
	border: 1px solid #cacaca;
	background-color: #E6E6E6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC));
	background-image: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
	background-image: -moz-linear-gradient(top, #E6E6E6, #CCCCCC);
	background-image: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
	background-image: linear-gradient(to bottom, #E6E6E6, #CCCCCC);
}

button.select-off:hover {
	border: 1px solid #b3b3b3;
	background-color: #cdcdcd;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#b3b3b3));
	background-image: -webkit-linear-gradient(top, #cdcdcd, #b3b3b3);
	background-image: -moz-linear-gradient(top, #cdcdcd, #b3b3b3);
	background-image: -o-linear-gradient(top, #cdcdcd, #b3b3b3);
	background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);
}

button.admin, button.admin-disabled {
	border: 1px solid gray;
	background-color: #f4f5f5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
	background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
}

button.admin:hover {
	border: 1px solid darkgray;
	background-color: #d9dddd;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d9dddd), to(#c6c3c3));
	background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
	background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
	background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
	background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}

button.basic:hover {
	border: 1px solid darkgray;
}

div.mast {
    width: 92%;
    margin: 0.2lh auto 0 auto;
}
table.mast {
    width:100%;
    margin:0 auto;
}

td.mast-logo {
    width:60%;
    text-align:left;
    vertical-align:bottom;
}
td.mast-logo img {
    width:100%;
    max-width:26em;
}

td.mast-menu {
    width:40%;
    text-align:right;
    vertical-align:bottom;
    padding-right:1em;
}
td.mast-home {
    width:10%;
    text-align:right;
    vertical-align:bottom
}

td.mast-home a {
    display: inline-block;
/*    position: relative;
    bottom: 0;
    margin: 0 0 0 1em; 
    padding: 0;
    border: none;*/
    width: 1.7em;
    height: 1.7em;
    background-image: url('/Content/images/home.png');
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
}

td.mast-home a:hover {
    background-image: url('/Content/images/home_hover.png');
}

td.mast-home a:active {
    background-image: url('/Content/images/home_active.png');
}

div.login {
    display: inline-block;
    position: relative;
    padding: 0.2em 0 0.2em 0.2em;
    margin: 0;
    background: transparent;
    color: darkgreen;
    cursor: pointer;
}

div.login ul {
    position: absolute;
    right: 0.2em;
    width: 4em;
    text-align: center;
    margin: 4px;
    ;
    padding: 4px;
    background: cornsilk;
    border: 1px solid darkgreen;
    -webkit-box-shadow: 4px 4px 3px 0px #AAAAAA;
    -moz-box-shadow: 4px 4px 3px 0px #AAAAAA;
    box-shadow: 4px 4px 3px 0px #AAAAAA;
    z-index: 20;
}

div.login ul li {
    display: block;
    width: 100%;
    text-align: center;
    padding-right: 0.2em;
    font-weight: normal;
    text-decoration: none;
    margin: 0;
}

div.login a {
    color: darkgreen;
    text-decoration: none;
}
table.form {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1em auto;
}
td.form-prompt {
    vertical-align: middle;
    padding: 4px 2px;
}

td.form-prompt-top {
    vertical-align: top;
    padding: 0.5em 2px 4px 2px;
}

span.form-prompt, td.form-prompt, td.form-prompt-top {
    color: darkgreen;
    text-align: right;
    font-size: 90%;
}

td.form-field, td.form-disp, td.form-show {
    padding: 4px 2px;
    text-align: left;
    vertical-align: middle;
    max-width: 100%;
}
span.form-note {
    font-size: 90%;
    color: mediumblue;
    font-style: italic;
}
.required::before {
    content: "\2605" "\A0";
    color: crimson;
    font-size: 90%;
}
/* Removes awkward default styles on some inputs for iOS */

input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
}
input.form-disabled {
    background-color: white;
}

input[type="text"], select, textarea {
    width: 100%;
    font-size: 90%;
}

input[type="text"].form-tiny {
    width: 5ex;
}

input[type="text"].form-small {
    width: 9ex;
}

input[type="text"].form-medium {
    width: 18ex;
}

button.cancel, button.edit, button.submit, button.info, button.admin, button.admin-disabled, button.login, button.disabled, button.red-button, button.green-button, button.blue-button {
    margin: 0.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: visible;
    -webkit-appearance: button;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    font-size: 110%;
    font-weight: 600;
    padding: 0.1em 0.4em;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
    display: inline-block;
}

button.tall {
    height: 2.5em;
}

button.medium {
    min-width: 4em;
}

button.wide {
    min-width: 6em;
}

button.cancel, button.red-button {
    border: 1px solid #df0909;
    background-color: #f62b2b;
    background-image: linear-gradient(to bottom, #f62b2b, #d20202);
}

button.cancel:hover, button.red-button:hover {
    border: 1px solid #b30808;
    background-color: #e40a0a;
    background-image: linear-gradient(to bottom, #e40a0a, #9f0202);
}

button.edit, button.blue-button {
    border: 1px solid #25729a;
    background-color: #3093c7;
    background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
}

button.edit:hover, button.blue-button:hover {
    border: 1px solid #1c5675;
    background-color: #26759e;
    background-image: linear-gradient(to bottom, #26759e, #133d5b);
}

button.submit, button.green-button {
    border: 1px solid #34740e;
    background-color: #4ba614;
    background-image: linear-gradient(to bottom, #4ba614, #008c00);
}

button.submit:hover, button.green-button:hover {
    border: 1px solid #224b09;
    background-color: #36780f;
    background-image: linear-gradient(to bottom, #36780f, #005900);
}

button.info {
    border: 1px solid #15aeec;
    background-color: #49c0f0;
    background-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);
}

button.info:hover {
    border: 1px solid #1090c3;
    background-color: #1ab0ec;
    background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}

button.disabled {
    border: 1px solid #b7b7b7;
    background-color: #d3d3d3;
    background-image: linear-gradient(to bottom, #d3d3d3, #707070);
    color: #f0f0f0;
}
/*button.select-on{
 border:1px solid #e0c67f;
 background-color: #ebdaac;
 background-image: linear-gradient(to bottom, #ebdaac, #B88A2E);
}
button.select-on:hover{
 border:1px solid #d7b55a;
 background-color: #e1c883; 
 background-image: linear-gradient(to bottom, #e1c883, #8f6b24);
}
button.select-off{
 border:1px solid #cacaca; 
 background-color: #E6E6E6; 
 background-image: linear-gradient(to bottom, #E6E6E6, #CCCCCC);
}
button.select-off:hover{
 border:1px solid #b3b3b3;
 background-color: #cdcdcd; 
 background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);
}*/
button.admin, button.admin-disabled {
    border: 1px solid gray;
    background-color: #f4f5f5;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
}

button.admin:hover {
    border: 1px solid darkgray;
    background-color: #d9dddd;
    background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}

button.login {
    border: 1px solid #222222;
    background-color: #f4f5f5;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
}

button.login:hover {+
    border: 1px solid black;
    background-color: #d9dddd;
    background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}

div.buttons {
    min-height: 2em;
    margin: 0.8em 0 0.1em 0;
    text-align: center;
}

div.big-buttons {
    font-size: 125%;
}

button.submit, button.cancel, button.edit, button.info, button.red-button, button.green-button, button.blue-button, button.select-on, button.select-off {
    color: white;
}

td.admin-button {
    vertical-align: middle;
    text-align: center;
    margin: 3px;
}

button.admin img, button.admin-disabled {
    width: 64px;
    height: 64px;
    vertical-align: middle;
    text-align: center;
    background-color: transparent;
}
p.admin-text, p.admin-blocked {
    text-align: left;
    padding-left: 0.5em;
    vertical-align: middle;
}
p.admin-title {
    text-align:left;
    font-weight:bold;
    font-size:110%;
    margin: 0 0.3lh;
    color:navy;
}
p.admin-text {
    color: darkgreen;
}
p.admin-blocked {
    color:crimson;
}
img.button-image {
    width: auto;
    height: 1.2em;
}
.shout, .working {
    color: red;
    font-weight: bold;
}

.working {
    font-size: 105%;
    margin-top: 0.8em;
}

div.x-wide, div.wide, div.medium, div.small, div.narrow, div.x-narrow {
    max-width: 90%;
    text-align: center;
    margin:0 auto;
}

div.full {
    width: 100%;
}

div.x-wide {
    width: 100em;
}

div.wide {
    width: 80em;
}

div.medium {
    width: 48em;
}

div.small {
    width: 38em;
}

div.narrow {
    width: 28em;
}

div.x-narrow {
    width: 20em;
}

div.panel {
    padding: 0.3lh 0.8em 0.5lh 0.8em;
    margin-top: 1lh;
    height:100%;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    -webkit-box-shadow: 5px 5px 3px 0 #AAAAAA;
    -moz-box-shadow: 5px 5px 3px 0 #AAAAAA;
    box-shadow: 5px 5px 3px 0 #AAAAAA;
}

div.panel-pink, div.panel-A {
    border: 0.1em solid #B01010;
    background-color: #FFE0E0;
}

div.panel-pink hr {
    border-top: 2px solid #B01010;
}
div.panel-green, div.panel-B {
    border: 0.1em solid darkgreen;
    background-color: #F4FFF4;
}
div.panel-green hr {
    border-top: 2px solid darkgreen;
}
div.panel-yellow, div.panel-C {
    border: 0.1em solid #CC9933;
    background-color: cornsilk;
}
div.panel-yellow hr {
    border-top: 2px solid #CC9933;
}
div.panel-white {
    border: 0.1em solid gray;
    background-color: white;
}
div.panel-white hr {
    border-top: 2px solid gray;
}
div.panel-info {
    border: 0.1em solid navy;
    background-color: #e6ffff;
}
div.panel-info hr {
    border-top: 2px solid navy;
}
div.inset {
    width: 95%;
    margin: 0.2em auto;
}

div.inset-little {
    width: 95%;
    margin: 0 auto;
}
table.bocce, table.bocce-base {
	border-collapse:collapse;
	border-spacing:0;
	margin:0.5em auto;
	text-align:center;
	table-layout:fixed;
	max-width:96%;
}
div.directors {
	margin: 0.5lh auto;
}
div.role-card
{
	display:inline-block;
	height: 7lh;
	margin: 0.5lh 0.5em;
}
table.role-card {
	border-collapse: collapse;
	text-align: center;
	table-layout: fixed;
	background-color:white;
}
table.role-card tr {
	border: 2px solid navy;
	height: 7lh;
}
span.role-title, span.role-job {
	font-weight: bold;
	font-style: italic;
}
span.role-title {
	color:crimson;
}
span.role-job {
	color:gray;
}
tr.role-board {
	background-color:white;
}
tr.role-non-board {
	background-color:ghostwhite;
}
td.role-portrait {
	width:8ex;
}
td.role-portrait img {
	width:100%;
	height:auto;
	max-height:100%;
	border: 2px solid navy;
}
td.role-info {
	width: 36ex;
	text-align:left !important;
}
table.bocce {
	background-color:white;
}
table.bocce td, table.role-card td {
	text-align:center;
	vertical-align:middle;
	padding-right:1ex;
	padding-left: 1ex;
}
table.tall-rows tbody  td {
	padding-top: 0.5lh;
	padding-bottom:0.5lh;
}
table.tall-rows thead td {
	padding-top: 0.2lh;
	padding-bottom: 0.2lh;
}
.bocce-border {
	border:1px solid darkgreen;
}
table.bocce thead td, table.bocce thead, tfoot.bocce td {
	color:white;
	font-weight:bold;
	background-color:darkgreen;
}
tfoot.footnote {
	background-color: white;
}
tfoot.footnote div {
	width: 90%;
	margin: 0.2em auto;
	font-size: 90%;
	text-align: left;
}
table.bocce-border > tfoot {
	border-top:1px solid darkgreen;
}
table.bocce td.team-name {
	padding:0.2em 1ex;
	line-height: 1;
}
table.bocce td.result {
	line-height: 1;
}
tr.selectable {
	cursor:pointer;
}
tr.selectable:hover td {
	background-color:yellow !important;
}
tr.selected td {
	background-color: yellow !important;
}
col.court, col.num {
	min-width: 3.5ex;
}
span.hh {
	font-size:80%;
	font-style:italic;
	font-weight:bold;
	color:slateblue;
}
span.invis {
	visibility:hidden;
}
col.cal, col.counts {
	width: 4.5ex;
}
col.counts-x {
	width: 6.5ex;
}
col.pf, col.pa, col.id {
	width: 5ex;
}
col.diff, col.pct {
	width: 5.5ex;
}
col.waiver {
	width: 8ex;
}
col.person-first {
	width: 10ex;
}
col.phone, col.person-last {
	width: 14ex;
}
/*td.team-name, col.email, col.person-full {
	min-width:50ex;
}*/
col.result {
	width: 10ex;
}
col.pct {
	text-align: right;
}
table.weather td {
	padding:0;
}
div.scroll {
	overflow-x: auto;
	width: 100%;
}
div.scroll table {
	table-layout: fixed;
	max-width: 100%;
}
td.rank, th.rank {
	width:5.5ex;
	position:sticky;
	left: 0;
	z-index:5;
}
td.team-name, th.team-name {
	min-width:16ex;
	max-width:35ex;
	text-wrap: wrap;
	position: sticky;
	left: 5.5ex;
	z-index:5;
}
table.bocce-striped tbody tr:nth-of-type(even),
table.bocce-striped tbody tr:nth-of-type(even) td {
	background-color: #FFE0E0;
}
table.gray-striped tbody tr:nth-of-type(even),
table.gray-striped tbody tr:nth-of-type(even) td {
	background-color: whitesmoke;
}
table.bocce-striped tbody tr:nth-of-type(odd) td,
table.gray-striped tbody tr:nth-of-type(odd) td {
	background-color: white;
}
.odd {background-color: #FFE0E0;}
.gray-odd {	background-color: whitesmoke;}
.even, .gray-even {	background-color: white;}
tr.cutoff {
	border-bottom: 0.1lh solid crimson;
}
.box-top, .box {
	border-top: 1px solid darkgreen;
}

.box-bot, .box {
	border-bottom: 1px solid darkgreen;
}

.box-right, .box {
	border-right: 1px solid darkgreen;
}

.box-left, .box {
	border-left: 1px solid darkgreen;
}
div.bocce-small {display:table;}
div.bocce-full {display:none;}

@media only screen and (min-width:600px) {
	div.bocce-small {display: none;}
	div.bocce-full {display: table;}
}
div.logo-list {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin: 0 auto;
}
div.logo-list > div {
    height: 7lh;
    padding:0.5em;
    display: block;
    text-align:center;
}
div.logo-list a img {
    width: auto;
    height: 5lh;
}
div.logo-list > div > span {
    font-size:80%;
    font-weight:bold;
    color:crimson;
}
div.place-thumb-list {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin: 2em auto;
    max-width:1200px;
}
a.place-thumb-box {
    width: 16em;
    text-decoration:none;
    background-color: white;
    color: #444;
    margin: 0.5em;
    border: 1px solid gray;
    -webkit-box-shadow: 5px 5px 3px 0 #AAAAAA;
    -moz-box-shadow: 5px 5px 3px 0 #AAAAAA;
    box-shadow: 5px 5px 3px 0 #AAAAAA;
}
a.place-thumb-box:hover{
    background-color:cornsilk;
}
div.place-thumb-picture {
    width: 15em;
    height: 11em;
    margin:0.5em;
    display:flex;
    align-items:center;
    justify-content:center;
    background-repeat: no-repeat;
    background-position:center center;
    background-size: contain;
}
div.place-panel {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: auto;
    grid-gap: 8px;
    cursor:pointer;
}
div.place-arrow {
    grid-row: 1/2;
    min-height: 100%;
    font-weight: bold;
    font-size: 200%;
    color: slategray;
    display:flex;
    align-items:center;
/*    border: 1px solid red;*/
}
div.place-arrow-left {
    grid-column: 1/2;
    justify-self: right;
}
div.place-arrow-right {
    grid-column: 3/4;
    justify-self: left;
}
div.place-box {
    grid-row: 1/2;
    grid-column: 2/3;
    background-color: white;
    color: #444;
    min-height: 100%;
    border: 1px solid gray;
    -webkit-box-shadow: 5px 5px 3px 0 #AAAAAA;
    -moz-box-shadow: 5px 5px 3px 0 #AAAAAA;
    box-shadow: 5px 5px 3px 0 #AAAAAA;
}
div.place-picture {
    width: 100%;
    text-align:center;
}
div.place-picture img {
    width: 95%;
    height:auto;
    padding-top:2.5%;
}
div.place-text {
    margin:0.5em;
    text-align:center;
}
div.place-text p {
    margin: 0.3em 0;
}
.place-leader {
    color:darkblue;
    font-size:90%;
    font-style:italic;
}
.place-namelist {
    font-weight:bold;
}
p.place-label {
    font-weight:bold;
    font-size:160%;
    color:darkblue;
}
p.place-title {
    font-weight: bold;
    font-size: 140%;
    color: crimson;
}
p.place-name {
    font-weight: bold;
    font-style:italic;
    font-size: 160%;
    color: black;
}
p.place-caption {
    font-weight: bold;
    font-size: 115%;
    color: black;
}
div.bracket {
	display:inline-block;
	margin: 1em auto;
	padding: 0.5em;
	background: white;
	text-decoration: none;
	color: #444;
	border: 1px solid gray;
	-webkit-box-shadow: 5px 5px 3px 0 #AAAAAA;
	-moz-box-shadow: 5px 5px 3px 0 #AAAAAA;
	box-shadow: 5px 5px 3px 0 #AAAAAA;
}

table.bracket {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
	overflow-x: auto;
}
td.brLarge, td.brBottom {
	min-width: 8em;
	max-width: 14em;
}
td.brMedium {
	min-width: 6.5em;
	max-width: 14em;
}
td.brSmall {
	min-width: 5em;
	max-width: 14em;
}

td.brRank, td.brPrefixSeed, td.brPrefixScore, td.brPrefixWinner, td.brPrefixLoser {
	padding-right: 1ex;
	padding-left: 0.5ex;
	text-align: left;
	font-weight: bold;
	font-size: 90%;
}

td.brRank, td.brPrefixLoser {
	color:crimson;
}

td.brPrefixSeed {
	color: darkmagenta;
}

td.brPrefixScore {
	color: sienna;
}

td.brPrefixWinner {
	color: forestgreen;
}

td.brSide {
	font-size: 85%;
	font-weight: bold;
	color: red;
	text-align: center;
	padding-right: 0.5ex;
	padding-left: 0.5ex;
	min-width: 5ex;
}

td.brBottom, td.brTeam, td.brRank, td.brNonTeam, td.brSide, td.brPrefixSeed, td.brPrefixScore, td.brPrefixWinner, td.brPrefixLoser {
	border-bottom: 1px solid Black;
	vertical-align: bottom;
}

td.brRight {
	border-right: 1px solid Black;
}

.brTeam {
	font-size: 90%;
	font-weight: bold;
	color: black;
	font-style: italic;
	min-width:15ex;
}

td.brTitle {
	font-weight: bold;
	font-style: italic;
	font-size: 120%;
	text-align: left;
	color: crimson;
	height: 2em;
	vertical-align: middle;
}

a.bracket {
	color: inherit;
	text-decoration: none;
}

a.bracket:hover {
	color: blue;
}
div.snap-opts {
	font-size:130%;
	margin:0.5em;
}
p.snap-opt {
	cursor: pointer;
}
span.snap-title {
	font-size: 150%;
	font-weight: bold;
	color:darkblue;
}
dialog.snap-update {
	text-align: center;
	border: 2px solid darkblue;
	box-shadow: 5px 5px 3px darkgray;
}

td.brNote {
	font-size: 80%;
	color:mediumblue;
	vertical-align:middle;
}

td.brPlace {
	font-size: 90%;
	color:green;
}

td.brHigh {
	height: 1.6em;
}
span.brUpset:after {
	color: mediumblue;
	font-weight: 900;
	content: "\2605";
}
span.brForfeit:after {
	color: mediumblue;
	font-weight: 900;
	content: "F";
	font-style:italic;
}
table.part-table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: white;
	margin: 1lh auto;
	padding: 0.5lh;
	background: white;
	text-decoration: none;
	text-align: center;
	table-layout: fixed;
	overflow-x: auto;
}
table.part-table thead {
	font-weight: bold;
}
table.part-table thead td {
	font-size: 110%;
	padding: 0 0.5ch;
	vertical-align: bottom;
}
tr.pad-high td {
	padding-top: 0.2lh;
	padding-bottom: 0.2lh;
}
table.part-table tbody td {
	padding: 0.1lh 0.3ch;
	vertical-align: middle;
}
td.part-self {
	background-color:lightgray;
}
td.part-team-name {
	font-style:italic;
	font-size:110%;
	font-weight:bold;
	min-width:12ch;
	max-width:30ch;
	padding:0.2ch 0.4ch !important;
}
td.part-team-number {
	font-weight: bold;
	font-size: 110%;
	color:slategray;

}
td.part-team-loc {
	padding: 0.2ch 0.4ch !important;
}
td.part-team-players {
	padding: 0.2ch 0.4ch !important;
}
td.part-rank, td.part-seed {
	font-weight: bold;
	color: crimson;
}
td.part-total, td.part-pos {
	font-weight:bold;
}
td.part-score {
	min-width: 6ch;
}
span.part-note {
	font-size:80%;
	color:blue;
}
span.part-score {
}
table.red-wine, table.red-wine td {
	border: 1px solid purple;
}
table.red-wine thead {
	background-color: purple;
	color:white;
}
table.red-wine tbody {
	color:purple;
}
table.white-wine, table.white-wine td {
	border: 1px solid #5c7b1e;
}
table.white-wine thead {
	background-color: #5c7b1e;
	color: white;
}
table.white-wine tbody {
	color: #5c7b1e;
}
table.part-default, table.part-default td {
	border: 1px solid darkblue;
}
table.part-default thead, td.part-default {
	background-color: cornsilk;
	color: navy;
}
table.part-default tbody {
	color:darkblue;
}
table.part-red, table.part-red td {
	border: 1px solid black;
}
table.part-red thead, td.part-red {
	background-color: #ff4040;
	color: white;
}
table.part-red tbody {
	color:crimson;
}
table.part-blue, table.part-blue td {
	border: 1px solid black;
}
table.part-blue thead, td.part-blue {
	background-color: dodgerblue;
	color: ghostwhite;
}
table.part-blue tbody {
	color:mediumblue;
}
table.part-purple, table.part-purple td {
	border: 1px solid black;
}
table.part-purple thead, td.part-purple {
	background-color: #b265d9;
	color: ghostwhite;
}
table.part-purple tbody {
	color:purple;
}

table.part-green, table.part-green td {
	border: 1px solid black;
}
table.part-green thead, td.part-green {
	background-color: #009900;
	color: ghostwhite;
}
table.part-green tbody {
	color:darkgreen;
}
table.part-orange, table.part-orange td {
	border: 1px solid black;
}
table.part-orange thead, td.part-orange {
	background-color: orange;
	color: black;
}
table.part-orange tbody {
	color:darkorange;
}
table.part-pink, table.part-pink td {
	border: 1px solid black;
}
table.part-pink thead, td.part-pink {
	background-color: lightpink;
	color: black;
}
table.part-pink tbody {
	color:deeppink;
}
table.part-yellow, table.part-yellow td {
	border: 1px solid black;
}
table.part-yellow thead, td.part-yellow {
	background-color: #ffff66;
	color: black;
}
table.part-yellow tbody {
	color: #664d00;
}
table.part-black, table.part-black td {
	border: 1px solid black;
}
table.part-black thead, td.part-black {
	background-color:darkslategray;
	color: white;
}
table.part-black tbody {
	color: black;
}
.white-wine {
	color: #5c7b1e;
}

.red-wine {
	color: purple;
}
div.part-desc {
	font-size: 110%;
	background-color: aliceblue;
	border: 2px solid mediumblue;
	color: mediumblue;
}
div.part-text {
	background-color: whitesmoke;
	border: 2px solid black;
	color: black;
}
div.part-warn {
	background-color: cornsilk;
	border: 2px solid crimson;
	color: crimson;
}
div.part-desc, div.part-text, div.part-warn {
	margin: 0.5em auto;
	padding: 0.3em;
	max-width: 75ex;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}
.flyer {
	margin:1ch auto;
}
.flyer-border {
	border: 1px solid gray;
	background-color: white;
}
.flyer-large {
	width: 90%;
	max-width: 600px;
}
.flyer-medium {
	width: 75%;
	max-width: 450px;
}
.flyer-small {
	max-width: 300px;
}
div.scoreboard-container {
    position:relative;
    width: 30em;
    height: 12em;
    margin: 1em auto;
    font-size:75%;
}
div.scoreboard {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: 0 0;
    background-size:cover;
}

img.scoreboard-overlay {
    position: absolute;
    left:25%;
    top:50%;
    width: 50%;
    height: 28%;
    z-index:10;
}
div.scoreboard table {
    font-size: 125%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    position: absolute;
    top: 4.8em;
    left: 0.5em;
    width: 22.5em;
    height: 3em;
/*    border: 1px solid blue;*/
}

div.scoreboard table tr {
    height:1em;
}
div.scoreboard-Bocce table thead {
    font-weight: bold;
    color: darkgreen;
}
div.scoreboard-Cornhole table thead {
    font-weight: bold;
    color: darkblue;
}
table.escore {
    font-size:85%;
}

@media only screen and (min-width:400px) {
    div.scoreboard-container {
        font-size: 75%;
    }
}
@media only screen and (min-width:560px) {
    div.scoreboard-container {
        font-size: 100%;
    }
    table.escore {
        font-size: 110%
    }
}
@media only screen and (min-width:800px) {
    div.scoreboard-container {
        font-size: 110%;
    }
    table.escore {
        font-size: 120%
    }
}

div.pop {
  display: inline-block;
  position: relative;
  cursor:pointer;
}
.login:hover, .login a:hover {
  color:#B01010;
  font-weight:bold;
}
ul.pop-menu {
	position: absolute;
	text-align:center;
	margin:0;
	padding:0;
	z-index:20;
}
div.pop ul, div.pop div {
	position: absolute;
	min-width: 5em;
	margin: 0;
	padding: 0;
	z-index: 20;
}

div.pop-auto .popup, div.login ul {
	display: none;
}

div.pop ul li { 
  display: block; 
  background:#E0E8F0;
  color: navy;
  width:95%;
  text-align:inherit;
  font-weight:normal;
  text-decoration:none;
}

div.login ul li:hover  {   
	color:#B01010;
	font-weight:bold; 
}
div.pop-auto:hover .popup, div.login-auto:hover ul {
  display: block;
}

ul.cal-menu{
	width:14em;
	left:-0.5em;
	text-align:left;
	border:solid 2px navy;
	box-shadow:5px 5px 5px gray;
	background:#E0E8F0;
}
div.pop-weather {
	left:-1em;
	width:9em;
	border:solid 2px navy;
	box-shadow:5px 5px 5px gray;
	background:lightyellow;
	color:navy;
	text-align:center;
}


/* (A) LIST TO MENU */

.tree, .tree-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.tree li {
  padding: 0.2em;
}

/* (B) SUB-SECTIONS */
/* (B1) TOGGLE SHOW/HIDE */
.tree-section ul { display: none; }
.tree-section input:checked ~ ul { display: block; }

/* (B2) HIDE CHECKBOX */
.tree-section input[type=checkbox] { display: none; }

/* (B3) ADD EXPAND/COLLAPSE ICON  */
.tree-section {
    position: relative;
    padding-left: 2em !important;
    padding-top: 0.8em !important;
}
.tree-section label:after {
    content: "\0002B";
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    text-align: center;
    font-size: 2em;
    color: #23c37a;
    transition: all 0.5s;
}
.tree-section input:checked ~ label:after {
    color: #f00;
    transform: rotate(45deg);
}

/* (B4) SUB-SECTION ITEMS */
.tree-section ul { margin-top: 0.5em; }
/*.tree-section ul li { color: #d43d3d; }*/

div.pop-weather {
    left: -1em;
    width: 9em;
    border: solid 2px navy;
    box-shadow: 5px 5px 5px gray;
    background: lightyellow;
    color: navy;
    text-align: center;
}
div.pop-auto .popup {
	display: none;
}
div.pop-auto:hover .popup {
    display: block;
}
div.pop {
    display: inline-block;
    position: relative;
    cursor: pointer;
}
div.pop div {
    position: absolute;
    min-width: 5em;
    margin: 0;
    padding: 0;
    z-index: 20;
}
span.tran-normal {
    color: black;
}
span.tran-pop {
    color: red;
}
span.tran-inactive {
    color: gray;
    text-decoration: line-through;
}
td.tran-amount {
    text-align: right !important;
}
body {font-size:10px;width:100%;}
h1, .s1 {font-size:200%;}
h2, .s2  {font-size:170%;}
h3, .s3 {font-size:150%;}
h4, .s4 {font-size:135%;}
h5, .s5 {font-size:122%;}
h6, .s6 {font-size:110%;}

div {
	box-sizing:border-box;
}



/*div.test {background-color: black;color: white;}
div.test:after { content:"0";}*/

@media only screen and (min-width:320px)
{
	/*	div.test {background-color:darkcyan}
	div.test:after { content:"320";}*/
	div.mast {	font-size: 100%;}
}
@media only screen and (min-width:400px) {
	body {font-size: 12px;}
/*	div.test {background-color:darkgreen;}
	div.test:after { content:"400";}*/
}
@media only screen and (min-width:560px) {
	div.mast {font-size: 1.2rem;}
	body {font-size: 14px;}
/*	div.test {background-color: darkred;}
	div.test:after { content:"560";}*/
}
@media only screen and (min-width:720px) {
    body {font-size: 16px;}
/*	div.test {background-color: darkblue; }
	div.test:after { content: "720"; }*/
}
@media only screen and (min-width:800px) {
	body {font-size: 18px;}
	div.mast {font-size: 1.3rem;}
/*	div.test {background-color: darkorange}
	div.test:after {content: "800";	}*/
}
@media only screen and (min-width:960px) {
/*	body {font-size: 16px;}*/
/*	div.test {background-color:purple;}
	div.test:after { content:"960";}*/
}
/*@media only screen and (min-width:1280px) {*/
	/*div.test {background-color: green; }
	div.test:after { content: "1280"; }
}*/