* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
  font-family:Arial;
	font-size:62.5%;
	user-select: none;
  -moz-user-select: none;
	-webkit-user-select:none;
	-o-user-select:none;
	-ms-user-select:none;
	margin:0;
	padding:0;
	width:100%;
	overflow:hidden;
	background-color:#FFFFFF;
}

.window-container {
	overflow:hidden;
	display:none;
}
.clear {
  clear:both;
}
#header {
  height:4em;
	font-size:4em;
	float:left;
	width:100%;
}
h3 {
  clear:both;
}

#logo {
  width:507px;
	height:182px;
	position:absolute;
	top:35%;
	left:7.5%;
	overflow:hidden;
	z-index:1000;
	-webkit-transform-origin:0% 0%;
	-moz-transform-origin:0% 0%;
	-ms-transform-origin:0% 0%;
	-o-transform-origin:0% 0%;
	transform-origin:0% 0%;
	display:none;
}
#logo-cold {
  width:100%;
	height:100%;
	position:absolute;
	z-index:1;
}
#logo div {
  height:182px;
}
#logo-container {
	width:493px;
	position:absolute;
	right:0;
	overflow:hidden;
	z-index:2;
}
#logo-block {
  float:right;
	width:507px;
}
#logo-hot-container {
  position:absolute;
	right:0;
	width:650px;
}
#logo-hot {
  width:15px;
	position:absolute;
	overflow:hidden;
	right:0; 	
}
#logo-hot img {
	position:absolute;
	right:0;
	height:182px;
	width:507px;
}
#logo-fade {
  float:right;
	opacity:0;
}
#logo-fade div {
  background:url(../images/logo_hot.png) repeat-x;
	float:right;
	width:20px;
} 
#logo-fade div:first-child {
	opacity:0.9;
}
#logo-fade div:nth-child(2) {
	opacity:0.8;
}
#logo-fade div:nth-child(3) {
	opacity:0.65;
}
#logo-fade div:nth-child(4) {
	opacity:0.5;
}
#logo-fade div:nth-child(5) {
	opacity:0.35;
}
#logo-fade div:last-child {
	opacity:0.2;
}

#about-hot {
	  position: absolute;
    background: white;
    border: 5px solid orange;
    width: 100vw;
   
    border-radius: 10px;
  
    text-align: center;
    font-size: 2.4em;
    text-shadow: 1px 0px 0px black;
}
#tips {
	padding:100px 0 10px 0;
}
#top-score-list {
	
	margin-top:170px;
	padding-bottom:50px;




}
.global-highscore.your-score {
	color:orange;

}





.letter {
	float: left;
	width: 14.2857%;
	height: 14.2857%;
	border-radius: 0.06em;
	border: solid 1px transparent;
	font-size: 500%;
	font-weight: 700;
	text-align: center;
	line-height:100%;
}
.active {
  color: #fef4e9;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.active-twice {
 	color: #fef4e9;
	background: blue;
	background: -webkit-gradient(linear, left top, left bottom, from(blue), to(darkblue));
	background: -moz-linear-gradient(top,  blue,  darkblue);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='blue', endColorstr='darkblue');
}
.active-thrice { /*red hot */
  color: #fef4e9;
	background: #green;
	background: -webkit-gradient(linear, left top, left bottom, from(red), to(darkred));
	background: -moz-linear-gradient(top,  red,  darkred);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='darkred');
}

.going-innactive {
  background-color:#f78d1d;
	color:white;
}
.arrow {
  position: absolute;
  width: 100%;
  height: 100%;
	z-index:100;
	pointer-events:none;
}
.arrow div {
  width:0;
	height:0;

  position: relative;	
	left: -0.14em;
	top: -0.02em;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid white;

}
.arrow-at-90 div {
 left: -0.06em; /* was -0.04 on pb */
 top: 0.09em;
}
.sensor {
  height: 58%;
  position: absolute;
  width: 58%;
  margin: 21%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#message {
  clear:both;
	height:1em;
	width:75%;
	white-space: pre-wrap;      /* CSS3 */   
  white-space: -moz-pre-wrap; /* Firefox */    
  white-space: -pre-wrap;     /* Opera <7 */   
  white-space: -o-pre-wrap;   /* Opera 7 */    
  word-wrap: break-word;   
  color:#f47a20;
	float:left;
	margin-left:0.25em;
}
#letter-points {
  float:left;
	margin-left:1em;
	color:grey;
}
#letter-points div {
  float:left;
	min-width:1.9em;
	text-align:center;
}
#letter-points span {
  float:left;
}
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
#submit {
  width: 3.1em;
	text-align: center;
	margin-left: 10px;
	font-size: 8em;
}

#lev_points {
  font-size:6em;
	float:left;
	margin-left:0.125em;
	visibility:hidden;
}
.game-start {
  position:absolute;
	right:1em;
	top:1em;
}
.new-game {
  background:url('../images/newgame.png')no-repeat;
  background-size: 30.17em 5.04em;
  width: 30.17em;
  height: 5.04em;
}
.next-level {
  background:url('../images/next.png')no-repeat;
  background-size: 17.7em 5.04em;
  width: 17.7em;
  height: 5.04em;
}
#game-area {
	width:100%;
	opacity:0.05;
}
#flipper {
  float:left;
	margin-top:5%;
	-webkit-perspective: 600;
	-moz-perspective:600;
	-o-perspective:600;
	-ms-perspective:600;
	perspective:600;
}
.timer {
  float:right;
	height: 1em;
	margin-right:0.25em;
}
#rotate {
  display:none;
  position:absolute;
	bottom:1em;
	right:1em;
/*	background:url('../images/rotate.gif') 50% 50%; */
}
#rotate div {
	height:3.52em;
	width:17.58em;
	background:url('../images/rotate.png') no-repeat;
  background-size: 17.58em 3.52em;
}
#flip {
  display:none;
  position:absolute;
	bottom:5em;
	right:1em;
	/*background:url('../images/rotate.gif') 50% 50%;*/
}
#flip div {
  height: 3.52em;
	width:12em;
	background:url('../images/flip.png') no-repeat;
	background-size: 12em 3.52em;
}

#pause {
  position:absolute;
	bottom:1em;
	left:1em;
	background:url('../images/pause.png') no-repeat;
	background-size: 15.3em 3.52em;
	height:3.52em;
	width:15.3em;
	display:none;
}
#pause.paused {
  background:url('../images/continue.png') no-repeat;
	background-size: 23.33em 3.52em;
	height:3.52em;
	width:23.33em;
}
#words-won {
  position:absolute;
	max-height:27.5em;
	width:100%;
	display:none;
	z-index:10;
	font-size: 2.4em;
	text-align:center;
  overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	text-shadow:1px 0px 0px black;
	margin: 7em 0 0 0;
}
#words-won span {
  min-width:33.33%;
	float:left;
	display:block;
}
#level-points {
	text-align:right;
	padding-bottom:20px;
}
.missed-words {
  color:orange;
	width:100%;

}
.word-tally {
	width:100%; 
	height:300px;
	-webkit-overflow-scrolling: touch; 
	overflow-y:auto;
	overflow-x:hidden;
	color:white;

}
.word-tally div {
	width:100%;
		margin-bottom:20px;
	float:left;
}
.side-words {
  font-size:3em;
}
.heat {
  position:absolute;
	width:100%;
	height:100%;
	pointer-events:none;
}
.wild {
  color:orange;
}
.letter-container {
  position:absolute;
	width:100%;
	height:100%;
	pointer-events:none;
	line-height: 100%;
}
.time-added {
  float: right;
  font-size: 1.7em;
	width: 4.7em;
	text-align: center;
  color:#f47a20;
	height:1.2em;
	margin-right:0.6em;
}
.container-4 {
  position:absolute;
	display:none;
	right:1em;
	top:14em;
}

#highscores {
  position:absolute;
	top:50%;
	font-size:2em;
	left:3em;
	display:none;
}
#highscores span, #longwords span {
  padding:0 1em;
}
#longwords {
  position:absolute;
	top:50%;
	font-size:2em;
	left:15em;
	max-height:22.8em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#alphabet {
  display:none;
	font-size:4em;
	position:absolute;
	width:12.1em;
	top:10em;
	left:1.25em;
	background:white;
	border:1px solid lightgrey;
}
.letter-select{
  float:left;
	background: blue;
  border-radius: 0.1em;
  width: 2em;
  text-align: center;
  border: 3px solid white;
  color: white;
}

#confirmation {
  display:none;
  width:100%;
	height:100%;
	position:absolute;
	top:20em;
	z-index:2000;
	background:white;
	padding:2em;
}
#confirmation div {
  margin-bottom:35px;
}
#confirmation span {
  font-size:2.7em;
}
.cancel {
  background:url('../images/cancel.png') no-repeat;
  background-size: 25.44em 5.04em;
  width: 25.44em;
  height: 5.04em;
}


@media only screen 
and (orientation : landscape) {
 body {
  width:100%;
	font-size:62.5%;
 }
 #message {
  width:100%;
	margin-top:1em;
 }
 .container-1 {
  display:block;
	float:left;
  width:22%;
 }
 .container-2 {
  display:block;
	width:20em;
	float:right;
 } 
 .container-3 {
  display:none;
 }
 .container-4 {
  display:block;
 }
 #flipper {
   margin:0;
 }
 #words-won {
   margin: 1em 0 0 25%;
	 width:54%;
 }
 #letter-points {
   display:none;
 }
 .time-added {
   margin-top:0.8em;
 }
 #logo {
   left: 11em;
 }
 .new-game {
   background:url('../images/newgame_landscape.png') no-repeat;
   background-size: 17.6em 10em;
   width: 17.6em;
   height: 10em;
 }
 #highscores {
 	 top:40%;
   left:22em;
 }
 #pause {
 	background-size: 100%;
	height: 3.52em;
	width: 12.3em;
 }
 #rotate div {
 	background-size:100%;
 	width:12.3em;
 }
 .new-game, .next-level {
 	background-size: 100%;
	width: 12.7em;
 }
 #confirmation div {
	height: 8em;	
	float: left;
	margin-left: 10px;
 }
 #confirmation span {
	font-size: 2.7em;
	width: 100%;
	display: block;
	text-align: center;

	margin-bottom: 6px;
  }
 
}