/* CSS Document */
body {text-align:center; padding:0; margin:0 auto; font-family: 'Fredoka One', cursive; background-color:#E9011B;  background-image: url("../images/bg.jpg");}
.game {width:99%; margin:0 auto; padding:5px;}
.banner {padding:10px; margin:0;}
.banner img {width:728px; height:55px;}
.directions {font-size:16px;}
.playgame {padding:30px; background-color:#FFFFCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.scrambled {height:72px; padding:0 0 20px 0;}
.guess {height:50px; border:5px #80000F solid; background-color:#E9011B;}
.guessleft {float:left; width:20%; text-align:center; background-color:#FFF; color:#E9011B; height:50px; line-height:50px; font-size:16px;}
.guessright {float:left; width:80%; height:50px; background-color:#E9011B; color:#FFF;}
.spacer {height:30px; overflow:auto;}
.answer {height:50px; border:5px #6C0 solid; background-color:#090;}
.answerleft {float:left; width:20%; text-align:center; background-color:#FFF; color:#090; height:50px; line-height:50px; font-size:16px;}
.answerright {float:left; width:80%; height:50px; background-color:#090; color:#FFF;}
.left {float:left; font-size:16px;}
A.scramble {font-size: 50px; color: black; position: relative; text-decoration:none;}
a.assemble {font-size: 41px; position: relative; color:white; text-decoration:none;}
SPAN#theWord {font-size: 41px; position: relative; color:white;}
A:hover {color: white; background-color: black;}

/* Button Style Reset */
input, textarea, button {
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;

    -webkit-border-radius: 0; 
}

/* Button Style */
#btngreen {
  border: 1px solid #777777;
  background: #390;
  color: white;
  font-size: 20px;
  font-family: 'Fredoka One', cursive;
  padding: 10px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
#btnorange {
  border: 1px solid #777777;
  background: #E9011B;
  color: white;
  font-size: 20px;
  font-family: 'Fredoka One', cursive;
  padding: 10px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
#btnblack {
  border: 1px solid #777777;
  background: #000;
  color: white;
  font-size: 20px;
  font-family: 'Fredoka One', cursive;
  padding: 10px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

/* rotate */
.turnDeviceNotificationLandscape {
  position:fixed;
  z-index:9999;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
  background:url('../../images/mobile-rotate-landscape.png') center center no-repeat;
  background-color:#000;
}

/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 700px){
/* Styles */
.game {width:97%}
.banner {padding:1px; margin:0;}
.banner img {width:397px; height:30px;}
.playgame {padding:0 5px;}
.directions {font-size:12px;}
.scrambled {padding:0;}
.guess {height:30px; border:5px #FC6 solid; background-color:#E9011B;}
.guessleft {float:left; width:20%; text-align:center; background-color:#FFF; color:#E9011B; height:30px; line-height:30px;}
.guessright {float:left; width:80%; height:30px; background-color:#E9011B; color:#FFF;}

.answer {height:30px;}
.answerleft {float:left; width:20%; text-align:center; background-color:#FFF; color:#090; height:30px; line-height:30px;}
.answerright {float:left; width:80%; height:30px; background-color:#090; color:#FFF;}
a.assemble {font-size:27px;}
SPAN#theWord {font-size:27px;}
.spacer {height:10px; overflow:auto;}
}