body {
	font-family: 'Comic Sans MS', 'Comic Neue', cursive !important;
	font-size: 16px !important;
	overflow: hidden;
}

h2 {
	COLOR: maroon;
}

.Rainout {
	color: red;
	font-size: 1.8em;
}

.RainoutSmall {
	color: red;
	font-size: 1em;
}

.RainoutXSmall {
	color: red;
	font-size: .8em;
}

marquee {

}	

.sheaDiv {
	background-color: #d2ffbf;
}
.slepDiv {
	background-color: #ffbfbf;
}


.hideme {
	display: none;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
	width: 70%;
	margin: auto;
}

.homebackground {
	height: 80vh;
	background: url(stanne-background.jpg) no-repeat;
	background-size: cover;
}  

@media all and (min-width: 320px) {
	/* menu */
	ul {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  background-color: #333333;
	}

	li {
	  float: left;
	}

	li a {
	  display: block;
	  color: white;
	  text-align: center;
	  padding: 16px !important;
	  text-decoration: none;
	}

	li a:hover {
	  background-color: #111111;
	}

	
	.navbar-nav {
		margin: 0 !important;
	}
	
	.navbar-nav > li > a {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
		
	
	/* end menu */

	.small-screen {
		display: block;
	}
	
	.large-screen {
		display: none;
	}
	
	.flex-container {
		display: -webkit-flex;
		display: flex;
		width: 100%;
		height: 250px;
		background-color: green;
	}

	.flex-item {
		background-color: cornflowerblue;
		width: 100px;
		height: 100px;
		margin: 10px;
	}

		

	.flex-row {
	  width: 100%;
	  display: flex;
	  flex-flow: row wrap;
	}

	.flex-col {
		width: 100%;
		display: flex;
	}

	.break {
		width: 0px;
		height: 0px;
		overflow: hidden;
	}
	
	.edit-score {
		width: 100px;
		margin-left: 3px;
	}
	
	.schedCol1 {
		width: 20%;
		margin-left: 3px;
	}

	.schedCol1-edit {
		width: 10%;
		margin-left: 3px;
	}
	
	.weekNbr {
		font-weight: bold;	
	}

	.schedCol2 {
		width: 45%;
		display: flex;
	}
	
	.schedCol2-edit {
		width: 28%;
		display: flex;
	}
	
	.schedDate {
		width: 62%;
		font-weight: bold;
	}

	.frontback {
		width: 35%;
		font-weight: bold;
	}
	
	.schedCol3 {
		width: 10%;
	}
	.schedCol4 {
		width: 12%;

	}
	.schedCol5 {
		width: 10%;

	}
	
	.schedCol6 {
		width: 20%;
		margin-left: 3px;
	}

	.schedCol6-edit {
		width: 10%;
		margin-left: 3px;
	}
	
	.schedCol7 {
		width: 45%;
		display: flex;
	}

	.schedCol7-edit {
		width: 30%;
		display: flex;
	}
	.schedCol8 {
		width: 10%;

	}
	.schedCol9 {
		width: 12%;

	}
	.schedCol10 {
		width: 10%;

	}

	.filters {
		margin: 20px 0 0 20px;
		display: inline-flex;
	}
	

	#playerstable, #teamstable{
		width: 99vw;
		margin: 0 auto;
		margin-top: 30px;
		margin-left: -12px;
		background: #fff;
		height: 60vh;
		border: 1px solid darkgrey;
	}

	#scheduletable {
		width: 100%;
		margin: 0 auto;
		margin-top: 30px;
		background: #fff;
		height: 60vh;
		border: 1px solid darkgrey;
	}

	
}

@media only screen and (min-width: 600px) {

	
}


@media only screen and (min-width: 768px) {
	
}

@media all and (min-width: 992px) {


	.small-screen {
		display: none;
	}
	
	.large-screen {
		display: block;
	}

	.flex-container {
		display: -webkit-flex;
		display: flex;
		width: 400px;
		height: 250px;
		background-color: green;
	}

	.flex-item {
		background-color: cornflowerblue;
		width: 100px;
		height: 100px;
		margin: 10px;
	}

		

	.flex-row {
	}

	.flex-col {
		width: 50%;
	}

	.flex-col60 {
		display: flex;
		width: 65%;
	}


	.schedCol1 {
		width: 20%;
		margin-left: 10px;
	}

	.weekNbr {
		font-weight: bold;	
	}

	.schedCol2 {
		width: 50%;
		display: flex;
	}

	.schedDate, .frontback {
		width: 48%;
		font-weight: bold;
	}

	.schedCol3 {
		width: 8%;
	}
	.schedCol4 {
		width: 10%;

	}
	.schedCol5 {
		width: 8%;

	}
	.schedCol6 {
		width: 20%;

	}
	.schedCol7 {
		width: 50%;
		display: flex;
	}
	.schedCol8 {
		width: 8%;

	}
	.schedCol9 {
		width: 10%;

	}
	.schedCol10 {
		width: 8%;

	}

	.filters {
		margin: 20px 0 0 20px;
		display: inline-flex;
	}
	

	#playerstable, #teamstable {
		width: 50%;
		margin: 0 auto;
		margin-top: 30px;
		background: #fff;
		height: 65vh;
		border: 1px solid darkgrey;
	}
	
	#uploadImages {
		float: left;
		width: 40%;
		margin: 0 auto;
		margin-right: 40px;
		padding: 8px;
		margin-top: 30px;
		background: #fff;
		border: 1px solid darkgrey;
	}

	#showImages {
		width: 40%;
		max-height: 70vh;
		position: fixed;
		left: 55%;
		top: 20%;
		float: left;
		margin: 0 auto;
		margin-right: 40px;
	}
	
	#imagesTable {
		background: #fff;
		padding: 8px;
		width: 80%;
	}
	
	#scheduletable {
		width: 100%;
		margin: 0 auto;
		margin-top: 30px;
		background: #fff;
		height: 65vh;
		border: 1px solid darkgrey;
	}
	
}

@media only screen and (min-width: 1200px) {
	
	
}


section {
	width: 600px;

	float: left;
	padding: 10px;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
	width: 50%;
	margin: auto;
}

img.p {
	margin-top: 2px;
}

#header {
	background-color: lightgreen;
	color: white;
	text-align: center;
	padding: 5px;
}


#nav 
{
	line-height:30px;
	background-color:white;
	height:300px;
	width:400px;
	float:left;
	padding:5px;
	margin-left: 50px;
}

#footer {
	height: 35px; 
	position: fixed; 
	bottom:0%;
	width:100%; 
	padding: 20px;
	background-color: #000;
	color: #fff;
	font-size: .85em;
}


.header{
	position: absolute;
	top: calc(50% - 165px);
	left: calc(50% - 255px);
	z-index: 2;
}

.header div{
	float: left;
	color: #000;
	font-size: 35px;
	font-weight: 200;
}

.header div span{
	color: #F00 !important;
}

.login{
	position: absolute;
	top: calc(30%);
	left: calc(50% - 134px);				/* 134 = 1/2 of form width */
	height: 150px;
	width: 267px;
	padding: 10px;
	z-index: 2;
}

.login input[type=text]{
	width: 250px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px;
	color: #FF0000;
	font-family: 'Exo', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 4px;
}

.login input[type=password]{
	width: 250px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 4px;
	margin-top: 10px;
}

.login input[type=submit]{
	width: 250px;
	height: 35px;
	background: #fff;
	border: 1px solid #fff;
	cursor: pointer;
	border-radius: 2px;
	color: #a18d6c;
	font-family: 'Exo', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 6px;
	margin-top: 10px;
}

.login input[type=submit]:hover{
	opacity: 0.8;
}

.login input[type=submit]:active{
	opacity: 0.7;
}

.login input[type=text]:focus{
	outline: none;
	border: 1px solid rgba(255,255,255,0.9);
}

.login input[type=password]:focus{
	outline: none;
	border: 1px solid rgba(255,255,255,0.9);
}

.login input[type=submit]:focus{
	outline: none;
}

 
#loginout {
	float:right; 
	margin-top: -50px;
}
	

::-webkit-input-placeholder{
   color: rgba(255,255,255,0.6);
}

::-moz-input-placeholder{
   color: rgba(255,255,255,0.6);
}

#siteTitle {
	font-family: 'Comic Sans MS', 'Comic Neue', cursive;
	font-size: 30px;
	font-weight: bold;	
	color: Maroon;
	margin-top: 20px;
	margin-bottom: 10px;
}

.scrollTable {
	overflow: scroll;
}

table {
	margin: 0 auto;
}

th {
	text-align: center;
	padding: 7px;
}
td {
	border: 1px solid #ccc;
	padding: 2px;
}

.center {
	text-align: center;
}

#divtable {
	width: 300px;
	margin: 0 auto;
	margin-top: 30px;
	background: #fff;
	border: 1px solid darkgrey;
}
	
hr {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
}

.error {
	font-size: 18px;
	font-weight: bold;
	color: red;
	margin-bottom: 12px;
}





.form-control {
	background-color: #dfdfdf !important;
}

#datepicker {
	width: 190px;
}

#weeks, #team {
	width: 85px;
}

label {
	margin-right: 12px;
	margin-top: 4px;
}

#filter1 {
	display: inline-flex;
}

#filter2 {
	margin-left: 55px;
	display: inline-flex;
}	

#filter3 {
	margin-left: 55px;
	display: inline-flex;
}

.refreshBtn {
	margin-left: 55px;
}

#formTitle {
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
}

.add {
	width: 55px;
	float: right;
	margin-top: -41px;
}

.pushright {
	margin-left: 100px;
}

.updateForm {
	position: absolute;
	top: calc(30%);
	left: calc(50% - 200px);				/* 134 = 1/2 of form width */
	width: 400px;
	height: auto;
	padding: 10px;
	z-index: 2;
}

.updateForm input, .updateFormWide input {
	width: 85%;
	margin-bottom: 7px !important;
}

.updateForm input[type="radio"], .updateForm input[type="checkbox"],
.updateFormWide input[type="radio"], .updateFormWide input[type="checkbox"]  {
	width: 45px;
}

.updateForm input[type="submit"], .updateFormWide input[type="submit"] {
	margin-top: 20px;
}

.updateForm, .updateForm form,
.updateFormWide, .updateFormWide form {
	background: darkgrey;
}

.updateForm #formTitle {
	margin-top: -75px;
}


.updateFormWide {
	position: relative;
	top: calc(10%);
	left: calc(50% - 22vw);				/* 134 = 1/2 of form width */
	width: 44vw;
	height: auto;
	padding: 10px;
	z-index: 2;
}	

.updateFormWide input {
	width: 98%;
}
	
	
.madepts input[type=text]{
	width: 50px;
}

td {
	vertical-align: top;
}

.line2 {
	margin-top: 12px;
}

.newLine {
	display: block;
	margin-left: 20px;
}


@media screen {
	.printTable {
		width: 80%;
	}

	.printCol50 {
		width: 50%;
	}
}

@media print {
	.printTable {
		width: 100%;
	}

	.printCol50 {
		width: 50%;
	}
	
	h2 {
		margin-top: 8px !important;
		margin-bottom: 5px !important;
	}
	
	#loginout {
		display: none;
	}
	
	.container-fluid,
	#scheduletable {
		height: auto;
	}
	
	.filters { display: none;}
	
}

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ffda84;
  text-decoration: none;
  color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: #a1afa0;			/*#f9f9f9;*/
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}



.container .gallery a img {
  float: left;
  width: 20%;
  height: auto;
  border: 2px solid #fff;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
}

.container .gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}

.clear {
  clear: both;
  float: none;
  width: 100%;
}

.red {
	color: red;
}