/******************************
*  RESULT
******************************/
#result
{
	clear: both;
	overflow: hidden;
	background-color: #fff;
}

#word_finder
{
	overflow: hidden;	
	display: inline-block;
}

#word_finder h2
{
	text-align: left;
	font-size: 30px;
	letter-spacing: 2px;
	font-weight: normal;
}

#placed_words
{
	float: left;
	overflow: hidden;
	text-align: left;
	padding: 0px;
	list-style: none;
	margin: 0 0 10px 0px;
	line-height: 20px;
    font-size: 14px;
}

#placed_words ul {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
}

#placed_words ul.last {
    margin-right: 0;
}

#placed_words ul li {
    list-style: none;
}

#placed_words a
{
	text-decoration: none;
	color: #333;
}

#placed_words a:hover
{
	color: #e3cb1c;
}

#placed_words a.checked
{
	text-decoration: line-through;
}

.solution a.btnToggleSolution,
#placed_words a.btnReset {
    color: #77beff;
    text-decoration: none;
}

.solution a.btnToggleSolution:hover, 
#placed_words a.btnReset:hover {
    color: #000;
}

#placed_words a.btnReset.disabled {
    display: none;
}

.placed-words-tip {
    margin-top: 12px;
    clear: both;
    float: left;
}

.placed-words-tip .glyphicon  {
    color: #77beff;
    transform: rotate(-68deg);
}

#word_finder .puzzle
{
	float: left;
	margin-right: 20px;
	margin-bottom: 4px;
}

#word_finder .tbl
{	
	border: 1px solid #000;
}

.puzzle.lowercase
{
	text-transform: lowercase;
}

.puzzle-row {
    overflow: hidden;
}

.cell
{
	font-size: 16px;
    line-height: 31px;
	background-color: #ffffff; 
	height: 31px; 
	width: 31px; 
	text-align: center;
    float: left;
    overflow: hidden;
    border: none;
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
	
	-webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
}

.cell.last {
    border-right: none; 
}

.puzzle-row.last .cell {
    border-bottom: none; 
}

.cell.check
{
	background-color: #77BEFF;
	-webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
}

.cell.highlight
{
	background-color: #FFED69!important;
}

.cell.example {
    background-color: #e0f5ff;
}

.solution {
    clear: both;
    padding-top: 12px;
}

.solution .text {
    margin: 0 0 5px 0;
    padding: 0;
    display: block;
}

.solution .word {
    margin: 0 10px 5px 0px;
    white-space: nowrap;
    display: inline-block;
}

.solution .char {
    width: 20px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    border: #000 solid 1px;
    border-right: none;
    background-color: #fff;
    display: inline-block;
    margin-right: -4px;
    text-align: center;
    color: #aaa;
}

.solution .char.last {
    border-right: #000 solid 1px;
}

.placed_words.lowercase
{
	text-transform: lowercase;
}

#word-finder-overlay {
	position: absolute;
}

.watermark
{
	clear: both;
	float: left;
	font-size: 13px;
    color: #8a8a8a;
}

.watermark a {
    color: #333;
    text-decoration: none;
}

.watermark a:hover {
    color: #1593cc;
}

@media only screen and (max-width: 991px) {
    .result-container {margin: 20px 0;}
}

@media only screen and (max-width: 466px) {
    #word_finder .puzzle {margin-right: 0;}
    .grid-10 .puzzle .tbl {min-width: 305px;} .grid-10 .cell, .grid-10 .solution .char {font-size: 15.64px; line-height: 30.3px; height: 30.3px; width: 30.3px;} .theme .grid-10 .placed_words {font-size: 11.73px;}
    .grid-11 .puzzle .tbl {min-width: 305px;} .grid-11 .cell, .grid-11 .solution .char {font-size: 14.22px; line-height: 27.55px; height: 27.55px; width: 27.55px;} .theme .grid-11 .placed_words {font-size: 10.66px;}
    .grid-12 .puzzle .tbl {min-width: 305px;} .grid-12 .cell, .grid-12 .solution .char {font-size: 13.03px; line-height: 25.25px; height: 25.25px; width: 25.25px;} .theme .grid-12 .placed_words {font-size: 9.77px;}
    .grid-13 .puzzle .tbl {min-width: 305px;} .grid-13 .cell, .grid-13 .solution .char {font-size: 12.03px; line-height: 23.31px; height: 23.31px; width: 23.31px;} .theme .grid-13 .placed_words {font-size: 9.02px;}
    .grid-14 .puzzle .tbl {min-width: 305px;} .grid-14 .cell, .grid-14 .solution .char {font-size: 11.17px; line-height: 21.64px; height: 21.64px; width: 21.64px;} .theme .grid-14 .placed_words {font-size: 8.38px;}
    .grid-15 .puzzle .tbl {min-width: 305px;} .grid-15 .cell, .grid-15 .solution .char {font-size: 10.43px; line-height: 20.2px; height: 20.2px; width: 20.2px;} .theme .grid-15 .placed_words {font-size: 7.82px;}
    .grid-16 .puzzle .tbl {min-width: 305px;} .grid-16 .cell, .grid-16 .solution .char {font-size: 9.77px; line-height: 18.94px; height: 18.94px; width: 18.94px;} .theme .grid-16 .placed_words {font-size: 7.33px;}
    .grid-17 .puzzle .tbl {min-width: 305px;} .grid-17 .cell, .grid-17 .solution .char {font-size: 9.2px; line-height: 17.82px; height: 17.82px; width: 17.82px;} .theme .grid-17 .placed_words {font-size: 6.9px;}
    .grid-18 .puzzle .tbl {min-width: 305px;} .grid-18 .cell, .grid-18 .solution .char {font-size: 8.69px; line-height: 16.83px; height: 16.83px; width: 16.83px;} .theme .grid-18 .placed_words {font-size: 6.52px;}
    .grid-19 .puzzle .tbl {min-width: 305px;} .grid-19 .cell, .grid-19 .solution .char {font-size: 8.23px; line-height: 15.95px; height: 15.95px; width: 15.95px;} .theme .grid-19 .placed_words {font-size: 6.17px;}
    .grid-20 .puzzle .tbl {min-width: 305px;} .grid-20 .cell, .grid-20 .solution .char {font-size: 7.82px; line-height: 15.15px; height: 15.15px; width: 15.15px;} .theme .grid-20 .placed_words {font-size: 5.86px;}
    .grid-21 .puzzle .tbl {min-width: 305px;} .grid-21 .cell, .grid-21 .solution .char {font-size: 7.45px; line-height: 14.43px; height: 14.43px; width: 14.43px;} .theme .grid-21 .placed_words {font-size: 5.59px;}
    .grid-22 .puzzle .tbl {min-width: 305px;} .grid-22 .cell, .grid-22 .solution .char {font-size: 7.11px; line-height: 13.77px; height: 13.77px; width: 13.77px;} .theme .grid-22 .placed_words {font-size: 5.33px;}
    .grid-23 .puzzle .tbl {min-width: 305px;} .grid-23 .cell, .grid-23 .solution .char {font-size: 6.8px; line-height: 13.17px; height: 13.17px; width: 13.17px;} .theme .grid-23 .placed_words {font-size: 5.1px;}
    .grid-24 .puzzle .tbl {min-width: 305px;} .grid-24 .cell, .grid-24 .solution .char {font-size: 6.52px; line-height: 12.63px; height: 12.63px; width: 12.63px;} .theme .grid-24 .placed_words {font-size: 4.89px;}
    .grid-25 .puzzle .tbl {min-width: 305px;} .grid-25 .cell, .grid-25 .solution .char {font-size: 6.26px; line-height: 12.12px; height: 12.12px; width: 12.12px;} .theme .grid-25 .placed_words {font-size: 4.69px;}
}

@media only screen and (max-width: 375px) {
    .grid-9 .puzzle .tbl {min-width: 250px;} .grid-9 .cell, .grid-9 .solution .char {font-size: 14.22px; line-height: 27.56px; height: 27.56px; width: 27.56px;} .theme .grid-9 .placed_words {font-size: 10.67px;}
    .grid-10 .puzzle .tbl {min-width: 250px;} .grid-10 .cell, .grid-10 .solution .char {font-size: 12.8px; line-height: 24.8px; height: 24.8px; width: 24.8px;} .theme .grid-10 .placed_words {font-size: 9.6px;}
    .grid-11 .puzzle .tbl {min-width: 250px;} .grid-11 .cell, .grid-11 .solution .char {font-size: 11.64px; line-height: 22.55px; height: 22.55px; width: 22.55px;} .theme .grid-11 .placed_words {font-size: 8.73px;}
    .grid-12 .puzzle .tbl {min-width: 250px;} .grid-12 .cell, .grid-12 .solution .char {font-size: 10.67px; line-height: 20.67px; height: 20.67px; width: 20.67px;} .theme .grid-12 .placed_words {font-size: 8px;}
    .grid-13 .puzzle .tbl {min-width: 250px;} .grid-13 .cell, .grid-13 .solution .char {font-size: 9.85px; line-height: 19.08px; height: 19.08px; width: 19.08px;} .theme .grid-13 .placed_words {font-size: 7.38px;}
    .grid-14 .puzzle .tbl {min-width: 250px;} .grid-14 .cell, .grid-14 .solution .char {font-size: 9.14px; line-height: 17.71px; height: 17.71px; width: 17.71px;} .theme .grid-14 .placed_words {font-size: 6.86px;}
    .grid-15 .puzzle .tbl {min-width: 250px;} .grid-15 .cell, .grid-15 .solution .char {font-size: 8.53px; line-height: 16.53px; height: 16.53px; width: 16.53px;} .theme .grid-15 .placed_words {font-size: 6.4px;}
    .grid-16 .puzzle .tbl {min-width: 250px;} .grid-16 .cell, .grid-16 .solution .char {font-size: 8px; line-height: 15.5px; height: 15.5px; width: 15.5px;} .theme .grid-16 .placed_words {font-size: 6px;}
    .grid-17 .puzzle .tbl {min-width: 250px;} .grid-17 .cell, .grid-17 .solution .char {font-size: 7.53px; line-height: 14.59px; height: 14.59px; width: 14.59px;} .theme .grid-17 .placed_words {font-size: 5.65px;}
    .grid-18 .puzzle .tbl {min-width: 250px;} .grid-18 .cell, .grid-18 .solution .char {font-size: 7.11px; line-height: 13.78px; height: 13.78px; width: 13.78px;} .theme .grid-18 .placed_words {font-size: 5.33px;}
    .grid-19 .puzzle .tbl {min-width: 250px;} .grid-19 .cell, .grid-19 .solution .char {font-size: 6.74px; line-height: 13.05px; height: 13.05px; width: 13.05px;} .theme .grid-19 .placed_words {font-size: 5.05px;}
    .grid-20 .puzzle .tbl {min-width: 250px;} .grid-20 .cell, .grid-20 .solution .char {font-size: 6.4px; line-height: 12.4px; height: 12.4px; width: 12.4px;} .theme .grid-20 .placed_words {font-size: 4.8px;}
    .grid-21 .puzzle .tbl {min-width: 250px;} .grid-21 .cell, .grid-21 .solution .char {font-size: 6.1px; line-height: 11.81px; height: 11.81px; width: 11.81px;} .theme .grid-21 .placed_words {font-size: 4.57px;}
    .grid-22 .puzzle .tbl {min-width: 250px;} .grid-22 .cell, .grid-22 .solution .char {font-size: 5.82px; line-height: 11.27px; height: 11.27px; width: 11.27px;} .theme .grid-22 .placed_words {font-size: 4.36px;}
    .grid-23 .puzzle .tbl {min-width: 250px;} .grid-23 .cell, .grid-23 .solution .char {font-size: 5.57px; line-height: 10.78px; height: 10.78px; width: 10.78px;} .theme .grid-23 .placed_words {font-size: 4.17px;}
    .grid-24 .puzzle .tbl {min-width: 250px;} .grid-24 .cell, .grid-24 .solution .char {font-size: 5.33px; line-height: 10.33px; height: 10.33px; width: 10.33px;} .theme .grid-24 .placed_words {font-size: 4px;}
    .grid-25 .puzzle .tbl {min-width: 250px;} .grid-25 .cell, .grid-25 .solution .char {font-size: 5.12px; line-height: 9.92px; height: 9.92px; width: 9.92px;} .theme .grid-25 .placed_words {font-size: 3.84px;} 
}