/* This is the Football Predictions CSS page */
/* Default theme */
/* Author : Guy Morin */

html, body {
 margin: 0;
 padding: 0;
 overflow-x:hidden;
 }
html {
 background:#147b45;
}
body {
 height: 100vh;
 font-family: Calibri, sans-serif; 
 font-size: .9em;
 text-align:center;
}
body.home {
 background: no-repeat center url("goal.jpg");
}

h1 {
 text-align: center;
} 
h2, h3 {
 text-align: left;
 margin: 0;
 padding:.2em .4em;
}
h2 {
 font: 1.1em sans-serif; 
 background-color: #299b59;
 color:#fff;
}
h3 {
 font: 1em Arial, sans-serif; 
 background-color: #52b440;
 color: #fff;
 margin-bottom: 1.1em;
 }
h4 {
 text-align: center;
 font: 1em Arial, sans-serif; 
 font-weight: bold;
 color: #333;
 border-bottom: 1px solid #c8c8c8;
 margin: 0 1em;
 padding-bottom: .5em;
}
select {min-width:10em;}
select, input {font-size:.8em;}
table input {min-width:0}
select {margin-bottom:1em}
th,td {padding:.2em .5em}
a{color:#c8c8c8;;text-decoration:none;padding:0 .5em}
a:hover{color:#fff;}

header a:hover, table a, table a:hover{background:none}

table{color:#dcdcdc;display:inline-table;min-width:50%;font-size:.9em;margin:1em auto;border-collapse: collapse;border:1px solid #000 !important;}
tr:nth-child(odd){background:#333;border-top:1px solid #299b59}
tr:nth-child(even){background:#444;border-top:1px solid #299b59}
th{padding:.4em;background:#222;color:#fff;font-weight:normal;border-bottom:2px solid #299b59}
input[type='date'] {font-size:1.2em}
input[type='number'] {width:6em;padding:1em 0}

/* Header and nav */

header{
	width:100vw;
	height:2.35em;
	overflow:hidden;
	position:fixed;
	background: #147b45;
	z-index: 99;
}
header h1 {
	margin:0;
	padding:0;
	width:100%;
}
header h1 a {
	font: .7em Calibri, sans-serif;
	padding:0 0 .8em 0;
	letter-spacing:.5em;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow: 2px 2px 1px #0e5f31;
	color:#fff;
	vertical-align: middle;
}
header h1 a:hover {text-decoration:none}

nav {background: #147b45;}
.home nav {background: none;}
nav a {
	color:white;
	text-decoration:none;
}

/* Main menu */
#fp {
	background:none;
	margin:0 0 0 .5em;
	padding:0;
	display:block;
	float:left;
}
#fp input {display: none;}
#fp .hamburger {
	position: absolute;
	top: -.1em;
	left: 0;
	padding: 0 .3em;
	font-size:1.8em;
	font-weight: bold;
	color:#fff !important;
    cursor: pointer;
	transition:color .2s;
}
#fp input:checked + label,
#fp label:focus,
#fp label:hover{color:#ddd;}

#fp-menu {
	position:fixed;
	left:0;top:2.35em;
	z-index:1;
	width:100vw;
	height:100vh;
	padding:0;
	list-style-type: none;
	background:#0009;
}
#fp input:not(:checked) ~ #fp-menu {
	opacity:0;
	visibility:hidden;
}
#fp input:checked ~ #fp-menu {
	opacity:1;
	visibility:visible;
	transition:opacity .2s;
}
#fp input:not(:checked) ~ #fp-menu ul {
	transform: translate(-100%, 0);
}
#fp input:checked ~ #fp-menu ul {
	transform: none;
	transition:transform .2s;
}
.layer {
	position:absolute;
	left:calc(20vw + 2em);
	top:0;
	width:100vw;
	height:100vh;
}
#fp-menu ul {
	list-style:none;
	margin:0;
	padding:0;
	width:calc(20vw + 2em);
	height:100vh;
	overflow:hidden;
	background:#eee;
}
#fp-menu li a
 {
 	color:#222;
	background:#eee;
	border-bottom:1px solid #ccc;
	text-shadow:1px 1px #0003;
	display: block;
	text-decoration: none;
	font-size: 1em;
	margin:0;
	padding:.8em 1em;
	text-align:left;
	width:20vw;
}
#fp-menu li a:hover,
#fp-menu li a:focus {
  background:#fff;
}

#fp-submenu a:focus, #fp-submenu a:hover,
#fp a:focus, #fp a:hover {
	background:#fff;
	color:#222;
	text-decoration:none
}

/* Submenu */
#fp-submenu {
	border-top:1px solid #0e5f31;
	color:#c8c8c8;
	position:fixed;
	margin-top:2.35em;
	overflow-y:hidden;
	overflow-x:auto;
	width:100%;
	text-align:center;
	white-space: nowrap;
	opacity:1;
	transition: opacity 1s;
}
#fp-submenu.off {
	opacity:0;
}
#fp-submenu a {
	display:inline-block;
	text-transform: uppercase;
	margin: 0;
	padding:.5em;
	background-color:#0e5f31;
	border-bottom: 2px solid #279c5f;
	color:#fff;
	transition:background .2s;
}
#fp-submenu a:hover, #fp-submenu a:focus {
	padding:.5em;
	color:#fff;
	background-color:#178c4f;
	border-bottom: 2px solid #52b440;
	transition:background .2s;
}

#fp-submenu a.main {
	color: #fff;
	border-bottom: 2px solid #0e5f31;
}

#fp-submenu a.main:hover {
	color: #fff;
	border-bottom: 2px solid #52b440;
}

#fp-submenu .current, #fp-submenu a.current:hover, #fp-submenu a.current:focus {
	background-color: #147b45;
	border-bottom: 2px solid #147b45;
	cursor: default;
}
tr.current {
	background:#222;
}
tr.current button {
	opacity: 0.5;
}
#fp-submenu .session {color:#fff}
#fp-submenu form {
	display:inline-block;
	margin: 0;
	padding:.2em 0 .2em .5em;
	color:#fff;
	transition:background .2s;
}
#fp-submenu select, #fp-submenu .hamburger, #fp-submenu input {margin:0 .5em;padding:0}
#fp-submenu label {margin-right:.2em}
#fp-submenu select {min-width:10em;font-size:.6em}

/* Section */

section {
	background: #fff;
	width:90%;
	min-height: 3em;
	text-align:center;
	margin:5.7em auto .7em auto;
	padding-bottom: 1em;
	display:inline-block;
}
section ul {list-style:none;padding:.2em 0 0 0;margin:0}
section ul li, section ul li ul {display:inline}

section .menu {
	text-align:center;
	padding:.2em 1em;
}
section .menu li {
	display:inline-block;
	margin: .4em;
	vertical-align:top;
}
section .menu li ul {clear:left;}
section .menu li ul li {
	margin:.5em 0 0 0;
}
section .menu li ul li a {
	display:block;
	padding:.5em 1em;
	margin:.2em;
}
section a.red {
	background:red;
	color:#fff;
	text-shadow: none;
}
section .menu li ul li a:hover {background:linear-gradient(#4a2,#6c4);border:1px solid green;color:white;}

section #changeMD {
	display:block;
	margin:1em auto;
	width: 100%;
}
section #changeMD input[type=submit] {
	 width:10em;
}
section #leftArrow {float:left;display:block;width:11em;}
section #rightArrow {float:right;display:block;width:11em;}
section #leftArrow, section #rightArrow {
	display:block; height:4em; margin-top: .4em;
}
section a {font-weight: bold;}
section li a {font-weight: normal;}
section table.admin td:first-child{width:10em;text-align:right;font-weight:bold}
section table.admin td:nth-child(3){text-align:left}
section table.matchdayTable td{width:3em}
section table.prediction th:first-child,
section table.prediction td:first-child{width:12em;text-align:left}
section table.stats th,
section table.stats td{height:2em;width:25%}
section table.stats td:first-child,
section table.stats td:nth-child(3){text-align:right;font-weight:bold}
section table.stats td:nth-child(2),
section table.stats td:nth-child(4){text-align:right}
section table.matchdayStats td:first-child{width:10em;text-align:left}
section table.team td:first-child{text-align:left}
section table.team td:nth-child(2) input{width:3em}
section table.teamOfTheWeek td:nth-child(2){text-align:left}
section table.teamOfTheWeek td:nth-child(3) input{width:3em}
.green {color: #6f6;}
.red {color: #f66;}
section .graph {
	background:#333;
	border:1px solid #000;
	display:inline-block;
	min-width:50%;
}
section .graph svg {color: #fff;padding:.5em;}

section .graph svg .layer circle.green {fill: #6f6}
section .graph svg .layer circle.red   {fill: #f66}
section .graph svg .layer line.green   {stroke: #6f6; stroke-width: 1;}
section .graph svg .layer line.red     {stroke: #f66; stroke-width: 1;}

section #results {width: 100%; overflow-x: auto;}
section #results td:nth-child(3){width:10em;text-align:left}

section #teamOfTheWeek td:nth-child(2){width:20em;}

section #criterion table {margin-bottom:1em}
section #criterion table td:first-child,
section #criterion table td:first-child {width:10em;text-align:left}
section #criterion table td:nth-child(2),
section #criterion table td:nth-child(3),
section #criterion table td:nth-child(4){width:10em;text-align:center}
section #criterion table td:nth-child(3){width:3em}
section #criterion table input[type='radio'] {margin-bottom:.3em}

section form {text-align:center;margin: 0 auto;}
section form input, section form select {color:#000;font-size:.95em;}
section form label {color:#fff;vertical-align: middle;text-align:right;margin:0 .5em;display:inline-block;}
section .menu form label, .center {text-align:center}
section form label.right {text-align:right;padding-right:.2em;min-width:1em;}
section form p {text-align:right;margin:.2em auto;padding:.4em;}
section form .update p {text-align:center;}

section .menu form p {margin:0;padding:0;}

section form fieldset {
	background:#5c5c5c;
	color: #c8c8c8;
	border: none;
	border-radius:3px;
	margin:.5em;
	display:inline;
	text-align: center;
	vertical-align: top;
}
section form fieldset a {color: #c8c8c8;}
section form fieldset a:hover {color: #fff;}

section form fieldset legend {display:none;}
section form fieldset fieldset {background:#5c5c5c;border:none;}
section form fieldset fieldset legend {background:#5c5c5c;font-weight:bold;border:none;color:#fff;display:inline;}
section form fieldset.odds label,
section form fieldset.result label {width:2em}
section form fieldset.position {text-align: right;}
section form fieldset input[type='radio']{vertical-align:bottom;}
section button[type='submit'], section input[type='submit'] {margin:.5em;padding:.5em 1em;min-width:10em;}
section fieldset button[type='submit'], section fieldset input[type='submit'] {min-width:15em;}
section .admin button[type='submit'], section .admin input[type='submit'] {min-width:20em;}
section table.matchdayList button[type="submit"],
section table.matchdayTable button[type="submit"]{text-align: left;}

/* Standing table buttons */
section #standing table {margin-top: 0;}
section #standing ul {display:block;margin-top: 1em}
/* Others button */
section #standing li a,
section #standing li p {
	font-size:1em;
	display:inline-block;
	background-color: #555;
	color:#c8c8c8;
	padding:.2em 1em;
	margin:0;
}
/* Current button */
section #standing li p {background-color: #222;color:#fff;}
/* Hover button */
section #standing li a:hover{text-decoration:none;background-color:#555;color:#eee}
section #standing th {min-width:2em}
section #standing td:nth-child(2),
section .player td:nth-child(2),
section .player td:nth-child(3),
section .playerTeam td:first-child,
section .playerTeam td:nth-child(2)  {text-align: left;}
section .tooltip span{
  display:none; 
}
section .tooltip{
  text-decoration:none;
  position: relative;
}
section .tooltip:hover span,.tooltip:focus span{
  display:block;
  z-index: 99;
  width:11em;
  text-align:center;
  position:absolute; 
  background:#fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 10px #333;
  color:#333;
  margin-top:.5em;
  padding:.4em .8em;
  transition:background .2s;
}

footer {clear:both;font-size:.9em;color:#564;padding:.5em;margin-top:1em;text-align:center}
footer strong {color:#222}

/* Error */
@keyframes errorDiv {
  0% 	{opacity:1;padding:.4em;height:inherit;color:#f00;}
  80% 	{opacity:1;padding:.4em;height:inherit;color:#f00;}
  81% 	{opacity:1;padding:.4em;height:inherit;color:#f000;}
  100% 	{opacity:0;padding:0;height:0;color:#f000;}
}
.error {
	animation-delay: 0;
	animation-duration: 4s;
	animation-name: errorDiv;
	height:0;
	color:#f000;
	background:#fff;
	border:1px solid #f93;
	border-radius:3px;
	margin:0;
	padding:0;
	display:block;
	opacity:0;
	text-align: center;
}

/* Buttons */
.update a,
section .menu li ul li a,
button[type=submit], input[type=submit], input[type=button], input[type=reset] {
	background:#ffe71f;
	transition: background .2s, border .2s;
	color:#333;
	border: 1px solid #2223;
	border-radius:3px;
	font-size:1em;
	font-weight: bold;
	margin:0 .5em .5em .5em;
	text-decoration:none;
 	cursor: pointer;
}
.update a:hover,.update a:focus,
section .menu li ul li a:hover,section .menu li ul li a:focus,
button[type=submit]:hover:enabled, input[type=submit]:hover:enabled, input[type=button]:hover:enabled, input[type=reset]:hover:enabled,
button[type=submit]:focus:enabled, input[type=submit]:focus:enabled, input[type=button]:focus:enabled, input[type=reset]:focus:enabled {
	background:#ffea45;
	transition: background .2s, border .2s;
	border: 1px solid #2223;
	border-radius:3px;
  	color:#333;
 	text-decoration: none;
 	text-shadow:none;
 	cursor: pointer;
}

/* Popup */
#overlay {
  position: fixed;
  display: flex;
  overflow:hidden;
  top: 5em;
  bottom: 0;
  left: 0;
  right: 0;
  background: #147b45;
  transition: opacity 500ms;
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.update {
  margin:auto;
  top: -2.3em;
  padding:.2em .2em .4em .2em;
  background: white;
  border-radius: 3px;
  text-align:center;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  color:black;
}
.update a {padding:.5em 1em}
.update a:hover,.update a:focus {padding:.5em 1em}
.update .close {margin:0;padding:0;}
.update .close a {
  font-size: 1.5em;
  line-height: .8em;
  font-weight: bold;
  text-decoration: none;
  background:none;border:none;color:#888;
  float:right;
  transition: all 20ms;
  margin:0;
  padding:0 .2em;
}
.update .close a:hover, .update .close a:focus {
  background:none;
  border:none;
  color:#000;
}
.update p {clear:right;}
.update span, .update span a {
	display:inline-block;
}
.confirm p, .confirm form {display:block;margin:0;padding:0}

/* Loader */
#loading {
	position: fixed;
	background:#0009;
	width: 100%;
	height: 100%;
	line-height: 100%;
  	white-space: nowrap;
	margin:0 auto;
	display: none;
	z-index: 9999;
}
.loader{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  margin: auto;
}
#loader-1:before, #loader-1:after{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid #fff;
  border-top-color: #52b440;
}
#loader-1:before{
  z-index: 100;
  animation: spin 1s infinite;
}
#loader-1:after{
  border: 10px solid #ccc;
}
@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Media */
@media all and (max-width:1024px){
	body {font-size: 1.4em;}
	#fp-menu ul {
		width: calc(40vw + 2em);
	}
	#fp-menu li a {width: 40vw;}
	table, .graph {width: 100%;}
}

@media all and (max-width:720px){
	body {font-size: 1.7em;}
	section {
		margin: 6.7em auto .7em auto;
		overflow-x: auto;
	}
	#fp-menu ul {
		width: calc(60vw + 2em);
	}
	#fp-menu li a {width: 60vw;}
	header h1 a {font-size: .8em;}
}

@media all and (max-width:480px){
	body {font-size: 1.9em;}
	section {
		margin: 7.7em auto .7em auto;
		overflow-x: auto;
	}
	#fp-menu ul {
		width: calc(80vw + 2em);
	}
	#fp-menu li a {width: 80vw;}
	header h1 a {font-size: .6em;}
}