<style>
body{
	touch-action: manipulation;	//This disables double-tap zooming in on iOS devices.
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
div{
	font-family: Arial, sans-serif;
	font-size:16px;
}
a{
	color:black;
}
.bigLetter4{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 95px; 
	line-height: 95px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:150px; 
	height:95px; 
	z-index:428;
}
.bigLetter5{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 76px; 
	line-height: 76px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:120px; 
	height:76px; 
	z-index:428;
}
.bigLetter6{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 63px; 
	line-height: 63px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:100px; 
	height:63px; 
	z-index:428; 
}
.bigLetter7{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 55.01px; 
	line-height: 55.01px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:87px;
	height:55.01px; 
}
.bigLetterStroke4{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 95px; 
	line-height: 150px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:150px; 
	height:150px; 
}
.bigLetterStroke5{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 76px; 
	line-height: 120px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:120px; 
	height:120px; 
}

.bigLetterStroke6{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 63px; 
	line-height: 100px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:100px; 
	height:100px; 
}

.bigLetterStroke7{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 55.01px; 
	line-height: 87px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:87px;
	height:87px; 
	z-index:428; 
}
.midLetter4{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 45px; 
	line-height: 45px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:75px; 
	height:45px; 
	z-index:421; 
	opacity:0.6;
}
.midLetter5{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 36px; 
	line-height: 36px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:60px; 
	height:36px; 
	z-index:421; 
	opacity:0.6;
}
.midLetter6{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 30px; 
	line-height: 30px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:50px; 
	height:30px; 
	z-index:421; 
	opacity:0.6;
}
.midLetter7{
	position:absolute; 
	display: table;
	font-family: Arial, sans-serif;
	font-size: 26.1px; 
	line-height: 26.1px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:43.5px; 
	height:26.1px; 
	z-index:421; 
	opacity:0.6;
}
.keyboardLetter{
	position:absolute; 
	font-family: Arial, sans-serif;
	font-size: 40px; 
	line-height: 40px;
	color: black; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	width:61px; 
	height:40px; 
}
.smallLetter28{
	font-family: Arial, sans-serif;
	font-size: 15.5px; 
	line-height: 15.5px;
	font-weight: bold;
	text-align: center; 
	position:absolute; 
	width:28px; 
	height:15.5px; 
	z-index:428;
}
.guessIndex28{
	font-family: Arial, sans-serif;
	font-size: 8.5px; 
	line-height: 8.5px;
	font-weight: bold;
	text-align: left; 
	position:absolute; 
	width:28px; 
	height:8.5px; 
	z-index:489;
	margin-left:2px;
	margin-top:2px;
}

.smallLetter21{
	font-family: Arial, sans-serif;
	font-size: 11.625px; 
	line-height: 11.625px;
	font-weight: bold;
	text-align: center; 
	position:absolute; 
	width:21px; 
	height:10px; 
	z-index:428;
}
.guessIndex21{
	font-family: Arial, sans-serif;
	font-size: 7px; 
	line-height: 7px;
	font-weight: bold;
	text-align: left; 
	position:absolute; 
	width:21px; 
	height:7px; 
	z-index:489;
	margin-left:1.2px;
	margin-top:1.2px;
}
.smallLetter25{
	font-family: Arial, sans-serif;
	font-size: 14.25px; 
	line-height: 14.25px;
	font-weight: bold;
	text-align: center; 
	position:absolute; 
	width:25px; 
	height:25px; 
	z-index:428;
}
.guessIndex25{
	font-family: Arial, sans-serif;
	font-size: 8px; 
	line-height: 8px;
	font-weight: bold;
	text-align: left; 
	position:absolute; 
	width:25px; 
	height:7px; 
	z-index:489;
	margin-left:1.2px;
	margin-top:1.2px;
}
.smallLetter33{
	font-family: Arial, sans-serif;
	font-size: 19px; 
	line-height: 19px;
	font-weight: bold;
	text-align: center; 
	position:absolute; 
	width:33px; 
	height:33px; 
	z-index:428;
}
.guessIndex33{
	font-family: Arial, sans-serif;
	font-size: 8.9px; 
	line-height: 8.9px;
	font-weight: bold;
	text-align: left; 
	position:absolute; 
	width:21px; 
	height:8.9px; 
	z-index:489;
	margin-left:1px;
	margin-top:0.9px;
}
.smallLetter37{
	font-family: Arial, sans-serif;
	font-size: 26px; 
	line-height: 26px;
	font-weight: bold;
	text-align: center; 
	position:absolute; 
	width:37px; 
	height:26px; 
	z-index:428;
}
.guessIndex37{
	font-family: Arial, sans-serif;
	font-size: 10.75px; 
	line-height: 10.75px;
	font-weight: bold;
	text-align: left; 
	position:absolute; 
	width:37px; 
	height:10.75px; 
	z-index:489;
	margin-left:2px;
	margin-top:2px;
}
.smallLetter39{
	font-family: Arial, sans-serif;
	font-size: 27px; 
	line-height: 27px;
	font-weight: bold;
	text-align: center; 
	position:absolute; 
	width:39px; 
	height:27px; 
	z-index:428;
}
.guessIndex39{
	font-family: Arial, sans-serif;
	font-size: 11.33px; 
	line-height: 11.33px;
	font-weight: bold;
	text-align: left; 
	position:absolute; 
	width:39px; 
	height:11.33px; 
	z-index:489;
	margin-left:2px;
	margin-top:2px;
}
.remainingNum4{
	font-family: Arial, sans-serif;
	display: table;
	font-size: 50px; 
	height:50px;
	line-height:120px;
	color: white; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	position:absolute; 
	z-index:32;
}
.remainingNum5{
	font-family: Arial, sans-serif;
	display: table;
	font-size: 50px; 
	height:50px;
	line-height:120px;
	color: white; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	position:absolute; 
	z-index:32;
}
.remainingNum6{
	font-family: Arial, sans-serif;
	display: table;
	font-size: 41.67px; 
	height:41.67px;
	line-height:100px;
	color: white; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	position:absolute; 
	z-index:32;
}
.remainingNum7{
	font-family: Arial, sans-serif;
	display: table;
	font-size: 36.25px; 
	height:36.25px;
	line-height:87px;
	color: white; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	position:absolute; 
	z-index:32;
}
.remainingNum{
	font-family: Arial, sans-serif;
	display: table;
	color: white; 
	font-weight: bold;
	text-align: center; 
	margin: 0 auto;
	position:absolute; 
	z-index:32;
}

/* The switch - the box around the slider */
.switch{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align: middle;
}

/* Hide default HTML checkbox */
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before{
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider{
  background-color: #2196F3;
}

input:focus + .slider{
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before{
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round{
  border-radius: 34px;
}
.slider.round:before{
  border-radius: 50%;
}
.statsBig{
	text-shadow:-1px -1px 0 #6aaa64,0 -1px 0 #6aaa64,1px -1px 0 #6aaa64,1px 0 0 #6aaa64,1px  1px 0 #6aaa64,0 1px 0 #6aaa64,-1px  1px 0 #6aaa64,-1px 0 0 #6aaa64;
	font-family: Arial;
	font-size: 32px;
	text-align: center;
}
.statsTiny{
	text-shadow:-1px -1px 0 #ffffff,0 -1px 0 #ffffff,1px -1px 0 #ffffff,1px 0 0 #ffffff,1px  1px 0 #ffffff,0 1px 0 #ffffff,-1px  1px 0 #ffffff,-1px 0 0 #ffffff;
	color: gray;
	font-family: Arial;
	font-size: 10px;
}
.greenStroke{
	text-shadow:-1px -1px 0 #6aaa64,0 -1px 0 #6aaa64,1px -1px 0 #6aaa64,1px 0 0 #6aaa64,1px  1px 0 #6aaa64,0 1px 0 #6aaa64,-1px  1px 0 #6aaa64,-1px 0 0 #6aaa64;
}
.grayStroke{
	text-shadow:-1px -1px 0 #979797,0 -1px 0 #979797,1px -1px 0 #979797,1px 0 0 #979797,1px  1px 0 #979797,0 1px 0 #979797,-1px  1px 0 #979797,-1px 0 0 #979797;
}
.redStroke{
	text-shadow:-1px -1px 0 #990000,0 -1px 0 #990000,1px -1px 0 #990000,1px 0 0 #990000,1px  1px 0 #990000,0 1px 0 #990000,-1px  1px 0 #990000,-1px 0 0 #990000;
}
.bigRedStroke{
	text-shadow:-2px -2px 0 #990000,0 -2px 0 #990000,2px -2px 0 #990000,2px 0 0 #990000,2px  2px 0 #990000,0 2px 0 #990000,-2px  2px 0 #990000,-2px 0 0 #990000;
}

.grayBox{
	position:relative;
	width:120px;
	height:120px;
	background-image: url('graphics/gray.png');
	color:black;
	font-weight: bold;
	font-size:20px; 
}
.grayResize{
	position:absolute;
	background-color: rgb(151, 151, 151);
	background-size: contain;
}
.blueSquare{
	background-image:url('graphics/blue.png');
	background-size: cover;
	font-weight: bold;
}
.blankSpace{
	text-decoration: none;
}
.grayBox{
	position:relative;
	width: 120px;
	height: 120px;
	background-image: url('graphics/gray.png');
	color: black;
	font-weight: bold;
	font-size: 20px; 
}
.modeBox{
	font-weight: bold;
	font-size: 20px; 
	color: black; 
	width: 120px;
	height: 120px;
	background-size: contain;
}
.modeCornersGreen{
	background-image: url("graphics/corners.png");
	background-color: #6aaa64;
}
.modeCornersBlack{
	background-image: url("graphics/corners.png");
	background-color: #585858;
	font-size:19px; 
}
.modeCornersWhite{
	background-image: url("graphics/corners.png");
	background-color: #e9e9e9;
}
.modeCornersPurple{
	background-image: url("graphics/corners.png");
	background-color: #957de6;
}
.modeCornersOrange11{
	background-image: url("graphics/v1.png"),url("graphics/h1.png"),url("graphics/corners.png");
	background-color: #f49200;
	font-size:19px; 
}
.modeCornersOrange12{
	background-image: url("graphics/v1.png"),url("graphics/h2.png"),url("graphics/corners.png");
	background-color: #f49200;
	font-size:19px; 
}

.modeCornersRed10{
	background-image: url("graphics/v1.png"),url("graphics/corners.png");
	background-color: #9f0000;
}
.modeCornersRed20{
	background-image: url("graphics/v2.png"),url("graphics/corners.png");
	background-color: #9f0000;
}
.modeCornersYellow01{
	background-image: url("graphics/h1.png"),url("graphics/corners.png");
	background-color: #ffcc00;
}
.modeCornersYellow02{
	background-image: url("graphics/h2.png"),url("graphics/corners.png");
	background-color: #ffcc00;
}


.modeCornersGreenDM{
	background-image: url("graphics/corners_dm.png");
	background-color: #6aaa64;
}
.modeCornersBlackDM{
	background-image: url("graphics/corners_dm.png");
	background-color: #585858;
	font-size:19px; 
}
.modeCornersWhiteDM{
	background-image: url("graphics/corners_dm.png");
	background-color: #e9e9e9;
	font-size:19px; 
}
.modeCornersPurpleDM{
	background-image: url("graphics/corners_dm.png");
	background-color: #957de6;
}
.modeCornersOrange11DM{
	background-image: url("graphics/v1.png"),url("graphics/h1.png"),url("graphics/corners_dm.png");
	background-color: #f49200;
	font-size:19px; 
}
.modeCornersOrange12DM{
	background-image: url("graphics/v1.png"),url("graphics/h2.png"),url("graphics/corners_dm.png");
	background-color: #f49200;
	font-size:19px; 
}
.modeCornersRed10DM{
	background-image: url("graphics/v1.png"),url("graphics/corners_dm.png");
	background-color: #9f0000;
}
.modeCornersRed20DM{
	background-image: url("graphics/v2.png"),url("graphics/corners_dm.png");
	background-color: #9f0000;
}
.modeCornersYellow01DM{
	background-image: url("graphics/h1.png"),url("graphics/corners_dm.png");
	background-color: #ffcc00;
}
.modeCornersYellow02DM{
	background-image: url("graphics/h2.png"),url("graphics/corners_dm.png");
	background-color: #ffcc00;
}
.modeBr3Lines{
	line-height: 28.5px;
}
.modeBr3_5Lines{
	line-height: 22.5px;
}
.modeBr4Lines{
	line-height:15px;
}
.distIndexRules{
	position:relative;
	left:-35px;
	font-size: 12px;
	font-weight: bold;
}
select{
	font-size: 28px; 
}
</style>