@font-face
{
	font-family: Mouser;
	src: url('mouser.regular.ttf');
}

@font-face
{
	font-family: African;
	src: url('african.ttf') format('truetype');
}


html {
	overflow-y: scroll;
}

body {
	background-color:burlywood;
	color:#121212;
	/*background-image: url('background_wood.jpg');*/
	

	
}

.Body {
	width: 98%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	text-align: center;
	

	
}




.home_option {
	width: 50%;
	height: 100px;
	margin: 15px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
	font-family: "Mouser";
	font-size: 300%;
	background-color: gray;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-box-shadow: 0 10px 6px -6px #444;
	-moz-box-shadow: 0 10px 6px -6px #444;
	box-shadow: 0 10px 6px -6px #444;

}

#returnToMatt {
	font-size: 200%;
}







.player_option {
	width: 50%;
	height: 50px;
	margin-top: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
	font-family: "Mouser";
	font-size: 200%;
	background-color: gray;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-box-shadow: 0 10px 6px -6px #444;
	-moz-box-shadow: 0 10px 6px -6px #444;
	box-shadow: 0 10px 6px -6px #444;

}

.tallyButton {
	width: 50%;
	height: 50px;
	margin-top: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
	font-family: "Mouser";
	font-size: 200%;
	background-color: gray;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}



.home_option:hover, .player_option:hover, .tallyButton:hover {
	cursor: pointer;
	background-color: #999999;
}

.player_option.selected {
	
	
	
	border-style: solid;
	border-width: 4px;
	border-color: saddlebrown;
	/*-webkit-box-shadow: inset 0 0 40px #f00, 0 0 40px #f00;
    -moz-box-shadow: inset 0 0 40px #f00, 0 0 40px #f00;
    box-shadow: inset 0 0 40px #f00, 0 0 40px #f00;
	*/
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

}

#playerOptions h2 {
	margin-bottom: 0px;
}

#playerOptions p{
	margin-top: 2px;
}

#playerOptions form{
	display: none;
}

input[type='text'],textarea {font-size:1em;}



#rules{
	max-width: 900px;

	margin: auto;
}

#allrules {
	text-align: left;
}

#allrules img{
	max-width: 100%;
	height: auto;
}




.tableHolder{
	
	max-width: 500px;
	width: 90%;
	margin: auto;
	height: auto;
}

.effect1{
	-webkit-box-shadow: 0 10px 6px -6px #444;
	-moz-box-shadow: 0 10px 6px -6px #444;
	box-shadow: 0 10px 6px -6px #444;
}

.effect2 {
	position: relative;
}

.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 13px;
  left: 10px;
  width: 50%;
  top: 50%;
  max-width:300px;
  background: #444;
  -webkit-box-shadow: 0 15px 10px #444;
  -moz-box-shadow: 0 15px 10px #444;
  box-shadow: 0 15px 10px #444;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}



#scores table{
	
	background-color:burlywood;
	
}

#scores table td{
	overflow: hidden;
	background-color: #eeeeaa;
	height: 2em;
	font-family: Sans-Serif;
}

#scores .tableName{
	font-family: "Mouser";
	font-size: 110%;
}

#scores .tableScore {
	font-family: "Mouser";
	font-size: 110%;
}



#playerAlert{
	padding-top: 100px;
	padding-bottom: 100px;
	font-family: "African";
	font-size: 200%;
}



.text_content {
	font-family: Sans-Serif;
}

.text_content #lostCities, #roundNum, #colorText {
	font-family: "African";
}

.text_content #lostCities {
	font-size: 110%;
}

.bluePage #colorText{
	color: #5b96d4;
}

.greenPage #colorText{
	color: #8ab527;
}

.redPage #colorText {
	color: #b5000f;
}

.yellowPage #colorText {
	color: #ebd429;
}

.whitePage #colorText {
	color: #eee;
}

.card_buttons {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	max-width: 1000px;
	margin: auto;
	color: black;
}

#hs1, #hs2, #hs3, #no_cards {
	border-color: #121212;
	color: #121212;
}

.redCards .card {
	color: #b5000f;
	border-color: #b5000f;
	/*background-color: #ff3b3b;*/
}

.redCards #hs1, .redCards #hs2, .redCards #hs3, .redCards #no_cards{
	
	background: #b5000f;
}


.greenCards .card {
	color: #8ab527;
	border-color: #8ab527;
}

.greenCards #hs1, .greenCards #hs2, .greenCards #hs3, .greenCards #no_cards{
	
	background: #8ab527;
}

/*
#greenCards .card.selected {
	background-color: #00ff00;
}

#greenCards .card:hover {
	background-color: #00dd00;
}
*/

.blueCards .card {
	color: #5b96d4;
	border-color: #5b96d4;
}

.blueCards #hs1, .blueCards #hs2, .blueCards #hs3, .blueCards #no_cards{
	
	background: #5b96d4;
}

/*
#blueCards .card.selected {
	background-color: #0000ff;
}

#blueCards .card:hover {
	background-color: #0000dd;
}
*/

.yellowCards .card {
	color: #ebd429;
	border-color: #ebd429;
}

.yellowCards #hs1, .yellowCards #hs2, .yellowCards #hs3, .yellowCards #no_cards{
	
	background: #ebd429;
}

/*
#yellowCards .card.selected {
	background-color: #ffff00;
}

#yellowCards .card:hover {
	background-color: #ffffcc;
}
*/

.whiteCards .card {
	color: #eee;
	border-color: #eee;
}

.whiteCards #hs1, .whiteCards #hs2, .whiteCards #hs3, .whiteCards #no_cards{
	
	background: #eee;
}

/*
#whiteCards .card.selected {
	background-color: #eeeeee;
}

#whiteCards .card:hover {
	background-color: #999999;
}
*/

.card {
	width: 30%;
	height: 80px;
	margin: 15px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
	font-family: "Mouser";
	font-size: 400%;
	background-color: #121212;
	border-style: solid;
	border-width: 7px;
	border-radius: 10px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-box-shadow: 0 10px 6px -6px #444;
	-moz-box-shadow: 0 10px 6px -6px #444;
	box-shadow: 0 10px 6px -6px #444;

}

#hs2, #c3, #c6, #c9 {
	margin-left: 30px;
	margin-right: 30px;
}

#no_cards {
	width: 65%;
	margin: auto;
	margin-top: 30px;
}

.card.selected {
	
	
	
	border-style: solid;
	border-width: 7px;
	/*-webkit-box-shadow: inset 0 0 40px #f00, 0 0 40px #f00;
    -moz-box-shadow: inset 0 0 40px #f00, 0 0 40px #f00;
    box-shadow: inset 0 0 40px #f00, 0 0 40px #f00;
	*/
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	
	-webkit-box-shadow: 0 0 20px 8px #333;
    -moz-box-shadow: 0 0 20px 8px #333;
    box-shadow: 0 0 20px 8px #333;

}

.card:hover{
	
	cursor: pointer;
	
	
}

.card img {
	max-height: 80%;
	max-width: 80%;
	height: auto;
	width: auto;

	margin: auto;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.inner_div {
	display: table;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.inner_div p {
	display: table-cell;
	vertical-align: middle;
}



.nav {
	width: 36%;
	max-width: 200px;
	height: 50px;
	margin: 0px;
	margin-top: 6px;
	background-color: gray;
	display: inline-block;
	font-family: "Mouser";
	font-size: 200%;
	
	
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-box-shadow: 0 10px 6px -6px #444;
	-moz-box-shadow: 0 10px 6px -6px #444;
	box-shadow: 0 10px 6px -6px #444;
}
.nav:hover{
	cursor: pointer;
}

.nav_wait {
	width: 36%;
	max-width: 200px;
	height: 50px;
	margin: 0px;
	margin-top: 6px;
	background-color: #dddddd;
	color: #999999;
	display: inline-block;
	font-family: "Mouser";
	font-size: 200%;
	
	
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#proceed {
	float: right;
}

#back {
	float: left;
	font-size: 150%;
	max-width: 400px;
}
    

@media (min-width: 801px) { /* Insert your own breakpoint as needed */
	.mobile-menu { display: none; }
}
 
@media (max-width: 800px) { /* Insert your own breakpoint as needed */
	.card {
		
	}
	
	.tallyButton {
		font-size: 150%;
	}
	
	#hs2, #c3, #c6, #c9 {
		margin-left: 15px;
		margin-right: 15px;
	}
}

@media (max-width: 600px) {
	.home_option, .player_option, .tallyButton {
		width: 90%;
	}
	
	.tallyButton {
		font-size: 135%;
	}
	
	
	
	.text_content{
		font-size: 70%;
	}
	
	#rules {
		font-size: 100%;
	}
	
	.card {
		height: 45px;
		font-size: 200%;
		margin: 6px;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	#hs2, #c3, #c6, #c9 {
		margin-left: 6px;
		margin-right: 6px;
	}
	
	#no_cards {
		margin-top: 15px;
	}
	
	.nav {
		font-size: 100%;
		height: 40px;
	}
	
	#back {
		font-size: 100%;
	}
	
	.nav_wait{
		font-size: 100%;
		height: 30px;
	}
}

@media (max-width: 400px) {
	
	#back {
		font-size: 80%;
	}
	
}

@media (min-width: 1616px) {
	
}