/*
DIV #theGrid
	DIV #rf-searchgamecontainer
		TABLE #rf-tablegrid .rf-tablestyle
			tbody
      				tr
      					td
      						rf-tgrid
							EACH LETTER
	DIV #rf-wordcontainer
		WORDLIST
 */

/* GRID/DIV SCREEN SIZES */

@media screen and (min-width: 200px) {
#rf-searchgamecontainer{width:96%}
#rf-tablegrid{width:98%;}
}

@media screen and (min-width: 320px) {
#rf-searchgamecontainer{width:96%}
#rf-tablegrid{}
}

@media screen and (min-width: 480px) {
#rf-searchgamecontainer{width:92%}
#rf-tablegrid{width:100%;}
}

@media screen and (min-width: 600px) {
#rf-searchgamecontainer{width:98%}
#rf-tablegrid{}
}

@media screen and (min-width: 768px) {
#rf-searchgamecontainer{width:98%}
#rf-tablegrid{}
}

@media screen and (min-width: 900px) {
#rf-searchgamecontainer{width:85%}
#rf-tablegrid{}
#rf-wordcontainer{}
}

@media screen and (min-width: 1200px) {
#rf-searchgamecontainer{width:75%}
#rf-tablegrid{}
#rf-wordcontainer{}
}



/* Style for the grid */
.rf-tablestyle{
border:2px solid #6699cc;
background-color:ghostwhite;
cursor:pointer;
border-radius:.3em;
}

/* Style for the div containing the grid */
#rf-searchgamecontainer{
float:left;
padding-right:30px;
margin-bottom:6px;
}

/* Style for the div containing the word list */
#rf-wordcontainer{
float:left;
padding:8px;
cursor:default;
border:2px solid #6699cc;
border-radius:.5em;
cursor:pointer;
}

#rf-wordcontainer ul{line-height:1.4em !important;list-style:none;padding-left:0;margin:0;}

#rf-wordcontainer ul li{}

/* Style for individual letter cells */
.rf-tgrid{
vertical-align:middle;
text-align:center;
font-family:monospace;
}

/* Style for the words that have been found */
.rf-foundword{
text-decoration:line-through;
color:red;
font-style:italic;
}

#rf-tablegrid .rf-highlight{
background:#ddd;
}

#rf-tablegrid .rf-glowing{
background:#ddd;
border:1px solid silver;
color:#ff9000;
}

#rf-tablegrid .rf-selected{
background-color:#ff9000;
color:#fff;
}

/* style for words that didn't make it on the grid */
.rf-pfalse{
color:red;
display:none;
}

/* WORDSEARCH SCREEN SIZES */

@media screen and (min-width: 200px) {
.rf-tgrid{font-size:1.2em;margin:1px;padding:3px 3px;}
#rf-tablegrid .rf-glowing{padding:0px 2px;}
}

@media screen and (min-width: 320px) {
.rf-tgrid{margin:1px;padding:5px 5px;}
#rf-tablegrid .rf-glowing{padding:1px 3px;}
}

@media screen and (min-width: 480px) {
.rf-tgrid{margin:1px;padding:8px 8px;}
#rf-tablegrid .rf-glowing{padding:4px 7px;}
}

@media screen and (min-width: 600px) {
.rf-tgrid{margin:1px;padding:6px 6px;}
#rf-tablegrid .rf-glowing{padding:1px 5px;}
}

@media screen and (min-width: 768px) {
.rf-tgrid{}
#rf-tablegrid .rf-glowing{padding:4px 8px;}
}

@media screen and (min-width: 900px) {
.rf-tgrid{font-size:1.4em;margin:1px;padding:11px 11px;}
#rf-tablegrid .rf-glowing{padding:7px 10px;}
}

@media screen and (min-width: 1200px) {
.rf-tgrid{font-size:1.5em;padding:12px 14px;}
#rf-tablegrid .rf-glowing{padding:7px 11px;}
}