* {margin: 0;padding: 0; }
body {background-color: #f0f0f0;line-height:1;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;color: #000;font-size:100%}
a:hover {opacity:.5;}

#top-background {background:#ff9d00;height:60px}
#top-container {height:40px;position:relative;top:-50px;max-width:1020px;margin:0 auto;z-index:100}
#logo {float:left;margin-left:1%;}
#top-navigation {float:left;margin-top:10px;margin-left:1%;font-family:'PT Sans Narrow';font-size:150%}
#top-navigation ul {list-style: none; display:inline;}
#top-navigation ul li {display:inline;padding-right:20px;}
#top-navigation a {text-decoration: none;color:black;}
#byline {float:right;margin-top:3px;margin-right:8px;font-size:250%;font-family: 'Cookie', Helvetica, sans-serif;}
#page-container {background-color: white;max-width:1020px;margin:0 auto;position:relative;top:-40px;height:100%}
#breadcrumbs{font-family:Arial, Helvetica, sans-serif;padding-top:10px}
#breadcrumbs li {display:inline;text-decoration: none;}
#side-bar {clear:both;width:30%;text-align:center;float:left;margin-top:10px}
#side-bar ul{line-height:150%;list-style-type: none;margin-bottom:10px}
#side-bar a {text-decoration:none;color:black}
#main-content {line-height:150%;margin-right:2%;margin-left:2%;width:66%;float:right;margin-bottom:30px}
h1 {text-align:center;font-family:'Trebuchet MS', 'Gill Sans', 'Gill Sans MT', Calibri,sans-serif;line-height:110%}
#introduction {margin-top:25px;font-family:'Times New Roman', Times, serif;font-size:130%;}
#introduction img {float:right;padding-left:5px}
#introduction p {margin-bottom:2%}
#social-buttons1 {width:100%;margin:25px auto 10px auto;text-align:center}
#social-buttons1 li{display:inline;padding:0 20px;}
#ad-side-bar, #ad-mid-page, #ad-bottom-page {text-align:center;max-width:95%;margin:0 auto;}
#ad-bottom-page {text-align:center;max-width: 95%;margin:20px auto;clear:both}
#about {font-size:1.1em;line-height:1.5em;}

#puzzle { margin: 0 auto; width:560px;line-height:1em;}
#puzzle table, td {border-style: solid;border-color: #C0C0C0;border-width: thin; border-collapse: collapse;color: #000000;}
#puzzle td {width:40px;height:39px;font-size: 23px;vertical-align: middle; text-align: center;text-transform: uppercase;}
#canvas-positioner {position:relative;margin: 0 auto; width:560px;}
#canvas,#canvas-temp{position:absolute; top:0px; left:0px;width:100%}
#words-to-find {max-width:560px;margin: 10px auto;columns: 125px 4;line-height:1;text-align:center;}
.wordFound { text-decoration: line-through; color: gray;}
input {border: 0;margin:0;width:125px;text-align:center;font-weight:600;font-family:"Comic Sans MS";font-size:.8em}
#controls {text-align:center;line-height:2.5;}
#controls select {display:inline-block;margin:0 10px;width:17%;}
#controls button {display:inline-block;margin:0 10px;width:17%;}
#overlay {display:none;background:grey;position:fixed;top:0;width:100%;min-height:100%;opacity:50%}
#success-message {display:none;position:fixed;top:15%;left:50%;margin-left:-280px; text-align:right; padding-right:20px; background-image: url('https://www.wordsearchwhiz.com/images/wordsearchwhiz-thumbsupman.png');background-repeat: no-repeat;background-size:560px;height: 560px; width:560px;background-color:#ffffa1;border:2px solid black;}
#success-message p {font-size:1.7em;font-weight:600;margin-right:25px;margin-top:10px}
#success-message p:first-of-type {margin-top:100px}
#social-buttons {width:450px;line-height:6;margin-top:-50px;}

#buttons li{display:inline-block;padding:40px 10px}
.button {display: inline-block;text-align: center;vertical-align: middle;width:200px;padding:10px 0;border: 1px solid #196ff6;border-radius: 12px;background: #196ff6;background: -webkit-gradient(linear, left top, left bottom, from(#196ff6), to(#196ff6));background: -moz-linear-gradient(top, #196ff6, #196ff6);background: linear-gradient(to bottom, #196ff6, #196ff6);font: normal normal normal 21px verdana;color: #ffffff;text-decoration: none;}
.button:hover,.button:focus {border: 1px solid ##3bb238;background: #52be4c;background: -webkit-gradient(linear, left top, left bottom, from(#52be4c), to(#38aa36));background: -moz-linear-gradient(top, #52be4c, #38aa36);background: linear-gradient(to bottom, #52be4c, #38aa36);color: #ffffff;text-decoration: none;}
.button:active {background: #295f26;background: -webkit-gradient(linear, left top, left bottom, from(#295f26), to(#196ff6));background: -moz-linear-gradient(top, #295f26, #196ff6);background: linear-gradient(to bottom, #295f26, #196ff6);}
.button:before{content:  "\0000a0";display: inline-block;height: 24px;width: 24px;line-height: 24px;margin: 0 4px -6px -4px;position: relative;top: 0px;left: -5px;background-size: 100% 100%;}
.button:before {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD+ElEQVRIiZ2WzYscVRTFf6/qVVVXO92d9MRxwJgZmEVgIGIwMBkN2CCkIYgLiZtZRv8FN3ETF4EILjKMm7gQXIVZupCsxlklBIngQiRIMkhnEYzNdHqquqq76n246A/6ayR4oOC+qvfuOefWu69KMAdBEBQ9zyvMezYPi4uLp65du3Z1Z2fnu2az2Zw3xxmPr1+/vp2mqT3uSpLERlFk2+22bbVa9unTp/bg4MBubGxcmU4s55HkeV7wfR8hBNZagIk4z3O01iilyPOcLMsIggBrrRzLZaYJAKjValdXVlbWgVHC8VhrPXMZY+ZVwxknGM4o3rhx4+vV1dVVIcRMHY0xo6RKqVFsrR13eDwbQKFQwBgzo95ae6z6OQ5GeWfegZQSpdREWY5TP7w3dDCFiRKNrFlryfN8YsG0+nGyoQMhxHDNhJ0ZB3Eck2UZUafHs797tNqKXBs8afrKlSbtZlij8aWmXLQErmU6z4DIcQcDsbi4WN3Y2PiwXq9/+jw+FT58LDAiQAYFwjDEOiGOLOL4CwTFCo5foaNKPDss8svjlHfPhjQajXaaps04jlt5nisA4bquv7Oz88PW1tYnpVLJF0Lw8PeYX//sUvAdhAtWWIy1aG3RBowWKAXaWIwBTMoXW2/R7Xax1hJFUby9vf3trVu3vhSXLl36eH9//0fH6TsTQvDbk5Tvf2oQiJcIz0f5ZbQxGANKWZQSoB0cPArSp1JUfPXZmxPNmKapWV9fPy83Nzc/GCYfvtAgcDhodmnHMUiBcWKEgPJrBVove3RTS5ZCN4HQK3Ll/Tdmdl0Yhs7FixdrslQqnZjeX77vEpaLVJZOExRAeuAI0AaWlqCXQtqBpANJBOMCx1Eul1+XxvR3h+u6owdhIGgdHfLPX00KPniyT2AM9BR0e32CNIYscfho8/yEegClFNZaR2qtOTo6mlARAt98fpbn7RU8B6QDQoCxoDRkGvIMsh54rss7ZwTtdnuizMP+kMYYOp3OjL2qgOpM8Y6BgSgahINjQwjRJ9BakyTJqN2TJGFvbw+t9Stm72NtbY1z586NOtz3fbTWyDzPzbiDu3fvcvv27Qm745geD1GtVrl37x5BECCEIE3TvoOkj9HEcrnMzZs3WVpaemX11lp2d3fpdDr0er1ReYwxRu7t7e0vLy/XXNeVACdPnqzWarXled+D/8LCwkL24MGDJ8Ox1jq7f//+vgB84AT9g8+5c+fObr1ef2+eSsdxyLIMz/NmCLrdrrl8+XK90Wj8MbilgEMJZMALgDAMlyuVyulHjx7N/BkIIQjDkCiKkFLOO/+5cOHC241G42fGjuzhrGETSODMwNX/wQvgcBAbgH8BaXRz65G9J1gAAAAASUVORK5CYII=") no-repeat left center transparent;}
#puzzle-image img {display: block; margin:0 auto;width: 90%;background-color: #ff9d00;}

#directions{max-width:560px;margin: 10px auto;text-align:center;}
.invisible {display:none}
h2 {text-align:center;font-family:'Trebuchet MS', 'Gill Sans', 'Gill Sans MT', Calibri,sans-serif;text-transform:uppercase;margin:30px 0;}
#more-puzzles, #link-all {line-height:120%;text-align:center;}
#more-puzzles {clear:both}
#more-puzzles li, #link-all li {display:inline-block;width:20%;margin: 10px auto;vertical-align:top;}
#more-puzzles img, #link-all img{border:1px grey solid;border-radius: 3px;}
#more-puzzles p, #link-all p{width:80%;margin:0 auto}
#footer-navigation {padding-top:50px;text-align:center;}
#footer-navigation  li {display:inline;margin:0 3%}
#footer-navigation li a {color:grey}
#copyright {padding:30px 0;text-align:center}

@media only screen and (max-width : 850px) {
	#side-bar {float:none;text-align:center;width:100%;margin-top:0;}
	#side-bar nav {columns: 120px 3;margin-bottom:30px;margin-top:30px}
	#side-bar ul{line-height:220%;}
	#main-content {float:none; margin:0 1%;width:100%;padding-top:10px}
	#success-message {top:120px;background-size:420px;height: 420px; width:420px;margin-left:-210px}
	#success-message p {margin-right:10px;margin-top:10px;font-size:1.2em}
	#success-message p:first-of-type {margin-top:70px}
	#social-buttons {width:350px;line-height:3;margin-top:-15px;}
    #byline {font-size:200%;margin-top:10px}
}

@media only screen and (max-width : 750px) {
	#more-puzzles li, #link-all li {width:150px;display:block;}
}

@media only screen and (max-width : 650px) {
	#byline {display:none}
	#puzzle {width:420px;}
	#puzzle td {width:30px;height:29px;font-size: 18px;}
	#canvas-positioner {width:420px;}
}

@media only screen and (max-width : 460px) {
	.puzzleSquare {height: 20px;width: 20px;font-size: 12px;}
	#puzzle {margin: 0 auto; width:280px;}
	#puzzle td {width:20px;height:19px;font-size: 12px;}
	#canvas-positioner {width:280px;}
	#success-message {background-size:320px;height: 320px; width:320px;margin-left:-160px}
	#success-message p {margin-right:10px;margin-top:10px;font-size:1em}
	#success-message p:first-of-type {margin-top:60px}
	#social-buttons {width:280px;line-height:1;margin-top:-10px;}
}