@font-face {
    font-family: BenSenHandwriting;
    src: url("fonts/BenSenHandwriting.ttf");
}

body{
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

#wordsearch { 
  border: 1px solid #000; 
  /*margin-top: 7%;*/
}
#tempCanvas { position: absolute; top: 1px; left: 1px; }
#footer { position: absolute; width: 400px; font-size: 20px; }
#timer { height: 35px; float:left; }
#showScore { position:absolute; padding-left:40%; font-weight:bold; }
#wordsLeft{ float:right; }

#suggestion { 
  width: 100%; 
  height: 60px; 
  position: relative; 
  background: #E0E0E0; 
  color: black; 
  display: inline-block;
  /*font-size: 25px;*/
  /*text-decoration: line-through;*/
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#home, #categories, #gameBoard, #gameover{ 
  border: 1px solid #000;
  text-align: center; 
  vertical-align: middle;
  /*width: 87%;*/
  /*height: 100%;*/
  position: relative;
  font-family: BenSenHandwriting;
  background-image: url("images/bg.png");
  background-size: 100% 100%;
  color: #CCC;


  /*border-style: solid;
  border-width: 18px 0px 40px 38px;
  -moz-border-image: url(images/bg.png) 18 0 40 38 stretch;
  -webkit-border-image: url(images/bg.png) 18 0 40 38 stretch;
  -o-border-image: url(images/bg.png) 18 0 40 38 stretch;
  border-image: url(images/bg.png) 18 0 40 38 fill stretch;*/

  /*border: 20px solid #ccb089; 
  border-image-source: url('images/wooden_frame.jpg'); 
  border-image-slice: 50 65;*/

  /*border: #2e1a12 solid 20px;
  -webkit-border-image: url(images/wood.png) 20 stretch;
  -moz-border-image: url(images/wood.png) 20 stretch;
  border-image: url(images/wood.png) 20 stretch;*/

  /*background-image: url("images/solid-bg.png");
  background-size: 100% 100%;*/
}

#categories a, #gameBoard a, #gameover a{
  color: #CCC;
  text-decoration: none;
}

#gameBoard h2{
  font-size: 25px;
}

#categories a:hover, #gameBoard a:hover, #gameover a:hover{
  text-decoration: underline;
}

#home h1, h1#gameoverHeader{
  padding: 5%;
  font-size: 50px;
}

/*#categoryTable{
	margin: 0 auto;
	width: 75%;
}

#categoryTable tr{

}

#categoryTable td{
	border: 1px solid #000;
	width: 33%;
	background: rgba(255, 255, 255, 0.2);
}*/


#categoryTable{
	display:table;
	width:75%;
	/*border-collapse: collapse;*/
	border-spacing: 10px;
	margin: 0 auto;
}
.table-row{  
	display:table-row;
	text-align: center;
}
.col{ 
	display:table-cell;
	border: 1px solid #CCC;
	width: 30%;
	cursor: pointer;
	font-size: 25px;
	background: rgba(255, 255, 255, 0.2);
	padding: 8px 0px;
}



/*#gameover { display: none; border: 1px solid #000; width: 400px; height: 400px; display: table-cell; text-align: center; vertical-align: middle; }*/

.content {
  width: 100%;
  /*height: 92%;*/
  display: inline-block;
  overflow: hidden;
}

.btn {
  /*background: #e0e0e0;
  background-image: -webkit-linear-gradient(top, #e0e0e0, #d0d0d0);
  background-image: -moz-linear-gradient(top, #e0e0e0, #d0d0d0);
  background-image: -ms-linear-gradient(top, #e0e0e0, #d0d0d0);
  background-image: -o-linear-gradient(top, #e0e0e0, #d0d0d0);
  background-image: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;*/
  /*font-family: Arial;*/
  color: #CCC;
  font-size: 25px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  line-height: 50px;
}

.btn:hover {
  /*background: #f0f0f0;
  background-image: -webkit-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: -moz-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: -ms-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: -o-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0);*/
  text-decoration: underline;
}

/* Float Shadow */
.float-shadow {
  /*display: inline-block;*/
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/*@media screen and (min-width: 320px;) and (max-width: 767px;){
  #wordSearch{
    width: 320px;
  }
}

@media screen and (min-width: 768px;) and (max-width: 1023px;){
  #home{
    width: 768px;
  }
}

@media screen and (min-width: 1024px;){
  #home{
    width: 1024px;
  }
}
*/