/*-------------------------------------------------*/
/* Main Colors                                     */
/*-------------------------------------------------*/

:root {
	--main-bg-color: #e6f7ff;  			 /* Main Background Color - very light blue */
	--header-bg-color: #A0D5F1;          /* Header Stripe Color - light blue (matches iPhone) */
	--main-txt-color: black;             /* Standard Text Color - black */
	--standard-button-bg-color: #A0D5F1; /* Standard Button Color - light blue (matches header) */
	--back-button-bg-color: #D0D1C0;     /* Back Button Color - muted grey-green (matches action buttons) */
	--action-button-bg-color: #D0D1C0;   /* Action / Goalie Button Color - muted grey-green (matches iPhone) */
	--error-button-bg-color: #dc143c;    /* Error Button Color - crimson */
	--good-text-color: #008000;			 /* Good Text Color (e.g. game merging) - green */
	--neutral-text-color: black;		 /* Neutral Text Color (e.g. game merging) - black */
	--bad-text-color: #dc143c;			 /* Bad Text Color (e.g. game merging) - crimson */
}


/*-------------------------------------------------*/
/* Basic Element Formatting                        */
/*-------------------------------------------------*/

body {
    background-color:  var(--main-bg-color);
}

p {
	color: var(--main-txt-color);
	max-height: 999999px;   /* to fix problem with Android font boosting */
}

h1 {
	color: var(--main-txt-color);
	font-size:32pt;
	font-family: arial;
	font-weight: bold;
	max-height: 999999px;
}

h2 {
	color: var(--main-txt-color);
	font-size:24pt;
	font-family: arial;
	font-weight: bold;
	max-height: 999999px;
}

h3 {
	color: var(--main-txt-color);
	font-size:18pt;
	font-family: arial;
	font-weight: bold;
	max-height: 999999px;
}

.p_tight {
	margin-block-start: 0em;
    margin-block-end: 0.3em;
}

.h2_tight {
	margin-block-start: 0em;
    margin-block-end: 0em;
}

.h3_tight {
	margin-block-start: 0em;
    margin-block-end: 0em;
}

input, select {
	font-size:24pt;
	font-family: arial;
	font-weight: bold;
	padding-top: 12px;
	padding-right: 18px;
	padding-bottom: 12px;
	padding-left: 18px;
	color: var(--main-txt-color);
    background-color:  var(--standard-button-bg-color);
	border-radius: 10px;
}

input[type=checkbox]
{
	/* Double-sized Checkboxes */
	-ms-transform: scale(2); /* IE */
	-moz-transform: scale(2); /* FF */
	-webkit-transform: scale(2); /* Safari and Chrome */
	-o-transform: scale(2); /* Opera */
	transform: scale(2);
	padding: 0px;
}

table {
	display: table;
	width: 100%;
	font-family: arial;
}

th, td {
	border: 0px;  /*1px solid black;*/
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


/*-------------------------------------------------*/
/* Header and Footer Formatting                    */
/*-------------------------------------------------*/

/* Use 3 div containers to shove Footer to bottom Of every page */

#main-container {
  position: relative;
  min-height: 96vh;
}

#content-container {
  padding-bottom: 4rem;    /* Footer height */
  display: table;
  width: 100%
}

#footer-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}


/* Header Elements */

#header {
	text-align:        center;
}

#headerDisplay {
	background-color:  var(--header-bg-color);
	text-align:        center;
	padding:           0.3em 0;
}

.waterpoloball {
	color:             #E8AE00;
}

#toprightbutton {
	float:             right;
}


/* Colors for forward/action and backward/cancel and errors */

.actionbutton {
	background-color:  var(--action-button-bg-color);
}

.goaliebutton {
	background-color:  var(--action-button-bg-color);
}

.backbutton {
	background-color:  var(--back-button-bg-color);
}

.errorbutton {
	background-color:  var(--error-button-bg-color);
}

.goodtext {
	color: var(--good-text-color);
}

.neutraltext {
	color: var(--neutral-text-color);
}

.badtext {
	color: var(--bad-text-color);
}


/* Everything Else */

.smallbutton {
	font-size:18pt;
	font-family: arial;
	font-weight: bold;
	padding-top: 6px;
	padding-right: 12px;
	padding-bottom: 6px;
	padding-left: 12px;
	margin-left: 12px;
}

.gameoncell {
	width: 50%;
	text-align: center;
}

.gameonperiodbutton {
	width: 10%;
}

.periodbutton {
	background-color: var(--main-bg-color);
	color:            black;
	border:           2px solid black;
	padding-left:     0;
	padding-right:    0;
	width:            2em;
	text-align:       center;
}

.gameactionbutton {
	width: 80%;
}

.gameonbutton {
	width: 80%;
}

.gameonactionbutton {
	width: 80%;
}

.gameonactionbuttongoalie {
	width: 80%;
	background-color:  var(--action-button-bg-color);
}

.changegoalieplayerbutton {
	width: 40%;
	background-color:  var(--standard-button-bg-color);
}

.changegoaliegoaliebutton {
	width: 40%;
	background-color:  var(--action-button-bg-color);
}

.gameactionplayerbutton {
	width: 100%;
	background-color:  var(--action-button-bg-color);
}

.gameactionplayerbuttongoalie {
	width: 100%;
}

.pulldownmenu {
 	box-sizing: border-box;
	border: 2px solid;
	background-color:  var(--main-bg-color);
}

.textinput {
	width: 90%;
	box-sizing: border-box;
	border: 2px solid;
    background-color:  var(--main-bg-color);
  /*border-radius: 5px;*/
}

.statstable {
	border: 1px solid black;
}


/*-------------------------------------------------*/
/* Specific Formatting for User Access Table       */
/*-------------------------------------------------*/

table.useraccesstable {
	/*table-layout: fixed;*/
	width:70%;
	margin-left:15%;
	margin-right:15%;
	border:1px solid black;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
}

tr.useraccesstable {
	width:100%;
	border: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

th.useraccesstable {
	width:20%;
	border: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

td.useraccesstable {
	width:20%;
	border: 0px;
	padding-top: 0px;
	padding-right: 12px;
	padding-bottom: 0px;
	padding-left: 12px;
}