@charset "UTF-8";




html, body {

	margin:0 auto;
   width: 100%;
   height:100%;
  
   background-color:#000000;
	margin-top:0px;
	font: 100% Arial, Helvetica, sans-serif;
	/*font-size: 6vmin;*/
}

 
body {
	background-image: url(resources/darkwater.jpg);
	background-repeat: repeat;
	margin-left: auto;
	margin-right: auto;
	background-color: darkblue;
	font-size: 3vh;
	color:white;
}

#gameGrid {
	width:100%;
	height: 100%;
	margin:0px auto;
	text-align:center;
	overflow: auto;
}
#prelude, #overWarning {
	position:absolute;
	display: inline-block;
	top:0;
	left:0;
	width:100%;
	font-size: 1em;
	text-align: center;
	height:100%;
	margin:0px auto;
	background:black;
	color:white;
	z-index: 1001;
	overflow:auto;
}
#overWarning {
	font-size: 2em;
	color: red;
	background:transparent;
}



#signin {
	display:inline-block;
	width:96%;
	padding:2%;
	margin:0px auto;
}
#OnePlayer, #TwoPlayer, #ThreePlayer, #FourPlayer, #FivePlayer, #SixPlayer, #play5, #play12, #play18, #playAll {
	display:inline-block;
	margin:0 1vw 0 1vw;
	width:2em;
	opacity:0.8;
}
#play5, #play12, #play18, #playAll {
	margin: 0 3vw 0 3vw;
}

#OnePlayer:hover, #TwoPlayer:hover, #ThreePlayer:hover, #FourPlayer:hover, #FivePlayer:hover, #SixPlayer:hover, #play5:hover, #play12:hover, #play18:hover, #playAll:hover {
	cursor:pointer;
	opacity:1;
}
#bannerboard{
	display:inline;
	height:auto;
	margin:0px auto;
	text-align:center;
	font-size:1em;
	/*background-color:black;*/
}

#preludeLogo {
	margin:0px auto;
	margin-top:20vh;
	align-content: center;
	width: 50%;
	max-width:500px;
	height:auto;
	min-width: 300px;
}
#preludeLogo:hover {
	cursor: pointer;
}
#logo
{
	position:absolute;
	top:1vh;
	left:0;
	width:18vw;
	max-width:250px;
}
#logoblock {
	display:block;
	width:98%;
	max-height:22vh;

	/*-moz-opacity: 1;
    opacity: 1;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);*/
}



#scoreboard
{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0px auto;
	padding:1vh 1vw 1vh 1vw;
	width:100%;
	height:auto;
	min-height:9vh;
	
	color:black;
	background: black;
	text-align:center;
	
}
#score{
	width:auto;
	overflow-x:scroll;
  white-space: nowrap;
}



#T1, #T2, #T3, #T4, #T5, #T6, #scorekeeper {
	float: left;

	margin:1vh 1vw 1vh 1vw;
	background-image: url("../images/bg1.jpg");
	color: black;
	padding: 0.5vh 0.5vw 0.5vh 0.5vw ;
	min-width:6vw;
	font-size: 1.1em;
	overflow-x:scroll;
  white-space: nowrap;
}
#scorekeeper {
	font-size: 0.8em;
	color:red;
	background-image:none;
	background-color:black;
	float:right;
	margin-right:2vw;
	max-width:55vw;
	overflow-x:scroll;
  white-space: nowrap;
}
#T2 {
	background-color: lightgray;
	background-image: url("../images/bg2.jpg");
}
#T3 {
	background-color: lightblue;
	background-image: url("../images/bg3.jpg");
}
#T4 {
	background-color: pink;
	background-image: url("../images/bg4.jpg");
}
#T5 {
	background-color: aquamarine;
	background-image: url("../images/bg5.jpg");
}
#T6 {
	background-color: coral;
	background-image: url("../images/bg6.jpg");
}
#T1, #T2, #T3, #T4, #T5, #T6 {
	cursor: pointer;
}


#score
{
	color: white;
}

#counter
{
	position: absolute;
	top: 2vh;
	right: 2vw;
	font-size:1.1em;
	color:red;
}


#main {
	position:absolute;
	top:17vh;
	left:0;
	margin: 0px auto;
	align-content:center;
	text-align: center;
	padding:1%;
	width: 98%;
	height:70vh;
	overflow:auto;
}
#thezapbutton, #playAgain, #Team1, #Team2, #Team3, #Team4, #Team5, #Team6, #clueButton, #againButton, #zHomeButton{
	transform:scale(0.9);
	width:auto;
	width:15vw;
	max-width:400px;
	margin:0px auto;
	opacity: 0.8;
	z-index: 999;
}
#thezapbutton {
	width:25vw;
}

#thezapbutton:hover, #playAgain:hover, #Team1:hover, #Team2:hover, #Team3:hover, #Team4:hover, #Team5:hover, #Team6:hover, #zapButton0:hover, #againButton:hover, #zHomeButton:hover {
	cursor: pointer;
	opacity: 1;
	transform:scale(1);
}






#hint
{
	clear:both;
	display:block;
	padding:2% 5% 2% 5%;
	width:90%;
	margin:0px auto;
	color:#EAD9DA;
	font-size:1em;
	font-style:italic;
	text-align:center;

}

.h1 {
	font-size:1.1em;
}

#intro {
	display:block;
	padding:0 2% 0 2%;
	margin:0px auto;
	width:96%;
	max-width:900px;
	color:white;
	height:auto;
	max-height:40%;
	font-size:0.6em;
	overflow:auto;
}
#intro:hover {
	cursor:pointer;
	font-size:1em;
}
#subtitle {
	padding:3%;
	margin:0px auto;
	width:94%;
	color:white;
	height:auto;
	max-height:30%;
	font-size:1.25em;
	font-style: italic;
	overflow:auto;
}

#thechoice {
	clear:both;
	display:none;
	/*background-color:#320000;*/
	color:yellow;
	padding:1%;
	font-size:2em;
	text-align:center;
	height:auto;
	margin:0px auto;

}
#thechoice:hover {
	cursor: pointer;
}



#theWord
{
	display:none;
	width:100%;
	/*padding:2%;*/
	background-color:transparent;

	margin:0px auto;
	 /*line-height:auto;*/
  overflow-x: scroll;
    overflow-y: hidden;
	white-space:nowrap;

}

.letterButton
{
	font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";

	-webkit-appearance: none;
	margin:auto 0px;
	font-size: 2em;
  -webkit-border-radius: 1px;
	border-radius: 1px;
	letter-spacing: 0px;
	background-color:white;
	color:black;
	cursor:pointer;
	
}



.letterButton:hover
{
	background-color:#F1D05A;
	cursor: pointer;

}

#ZgameZ{
	position: absolute;
	left:3%;
	bottom:10%;
	filter: saturate(50%);
}

#vowels
{
	display: none;

	/*align-content: center;*/
	text-align: center;
	clear: both;
	margin:1vh 1vw 2vh 1vw;
	width:100%;
	height:auto;

  
}

.navButton
{
	display:inline;
	background-color:transparent;
	-webkit-appearance: none;
	color:lightcoral;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	/*font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif"*/
	/*font-size: 60px;*/
	font-size: 2.2em;
	
	cursor:pointer;

	margin:0px auto;
}

.navButton:hover
{
   /* -moz-border-radius: 10px;
    -webkit-border-radius: 10px;*/
	
	color:cyan;
	background-color:transparent;
    /*box-shadow: 0px 0px 1px #777;*/
}





#message {
	display:block;
	text-align: center;
	margin:0px auto;
	font-style:italic;
	background-color:transparent;
	color:lightgray;
	font-size:0.5em;
	line-height:1em;
	padding-top:1%;

	float:none;
	overflow:auto;

   	overflow-x: scroll;
    overflow-y: hidden;
	white-space:nowrap;
}



#allscores
{
	display:none;
	text-align:center;
	background-color: transparent;
	color: lightcyan;
	font-size:3vmin;
	margin-top:5vh;
	max-height:18vmin;
	overflow:auto;
}

#statBar {
	position:absolute;
	padding-bottom:1.5vh;
	height:10vh;
	display:none;
	bottom:0;
	left:0;
	width:100%;
	font-size:0.5em;
	background:black;
	display:inline-block;
	overflow-x:scroll;
  white-space: nowrap;
}

#guesses, #questions,  #gamewinner, #bestever, #Q, #thumbDown, #thumbUp, #goGamez
{
	float:left;
	margin:0.5%;
	width: auto;
	padding: 1%;
	color:tan;
	vertical-align: bottom;
	z-index: 80;
}

#answerBar {
	position: absolute;
	top:70vh;
	left:0;
	width:100%;
	margin:0px auto;
	text-align: center;
	font-size:1.25em;
	padding:1vh 3vw 1vh 3vw;
	background:rgba(0, 0, 0, 0.7);
	color:tan;
	z-index:2000;
}
#answerTip{
	margin:0px auto;
	font-size: 0.5em;
}
#guessField {
	display:inline-block;
	background:yellow;
	color:black;
	margin:0px auto;
	/*margin-left:25%;*/
	width:auto;
	font-size:1.1em;
	min-width:2%;
	text-align: center;
}

#submitButton, #cancelButton {
	display:inline-block;
	background:none;
	color: gray;
	opacity: 0.6;
}

#cancelButton{
	color:red;

}
#submitButton:hover, #cancelButton:hover {
	cursor:pointer;
	color: lightgreen;
	opacity:1;
}
#thumbUp, #thumbDown {
	width:5%;
	max-width:100px;
	opacity:0.7;
}
#guesses{
	color:orange;
}
#showGuessButton, #howToPlayButton {
	position:fixed;
	bottom:1vh;
	height:8vh;
	opacity:0.75;
}
#howToPlayButton{
	right:2vw;
}

#showGuessButton:hover, #howToPlayButton:hover {
	opacity:1;
	cursor:pointer;
}


#guesses:hover, #questions:hover, #thumbUp:hover, #thumbDown:hover, #goGamez:hover {
	cursor: pointer;
	opacity:1;
}
/*#questions, #thumbUp {
	float: right;
	color: orange;
}*/
#definition {
	/*position:absolute;
	bottom:4%;*/
	margin: 0px auto;
	color: lightcoral;
	background-color:transparent;
	font-size: 1em;
	text-align:center;
	width:100%;
	z-index:200;
	overflow: auto;
}
.footer {
	position:absolute;
	display:none;
	bottom:3%;
	left:15%;
	width:70%;
	z-index:30;
	background: transparent;
	text-align:center;
	
	font-style:oblique;
	color: orange;
	margin:0px auto;
	min-height:20px;
	
}

#volunteer, #dolearn, #books, #games, #pay, #info {
	
	float:left;
	-webkit-appearance: none;

	margin:0px auto;
	text-align: center;
	width:auto;
	
	background-color:transparent;
	border:none;
	font-size:2.75vmin;
	color:orangered;
}


#volunteer:hover, #dolearn:hover, #books:hover, #games:hover, #pay:hover, #info:hover, #fontup:hover, #fontdown:hover {
	
	color: cyan;
	cursor: pointer;
}

@media screen and (max-width: 600px)  {
	body {
	font-size:3vh;
	color:white;
}
	#main {
		top: 18vh;
	}
	#subtitle {
		font-size:1.1em;
	}
  .letterButton
{
	font-family:"Montserrat", sans-serif;
	font-size:1em;
	font-weight:100;
}
	.navButton {
		font-size:1em;
	}
}


/*

@media screen and (min-width: 980px)  {
	.letterButton {
		font-size:2em;
		
	}
	.navButton {
		font-size:2.5em;
	}
}

@media screen  and (max-width: 979px) {
  .letterButton {
		font-size:2em;
		
	}
	.navButton {
		font-size:2.5em;
	}
}

@media screen and (max-width: 500px) {
  .letterButton
{
	font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	
	font-size:1.5em;
}
	.navButton {
		font-size:2em;
	}
}




*/




/*
#l1, #l2, #l3, #l4, #l5, #l6, #l7, #l8, #l9, #l10, #l11, #l12, #l13, #l14, #l15
{
	display: inline-block;
	float:left;
	min-width: 40px;
	overflow:auto;
}

#fontup{
	width: 5%;
	
	
}
#fontdown{
	display:none;
	width: 5%;
	
}

*/