Removed and made changes to CSS and HTML names and ids, Fixed button …

…images and added blue button images to options

.gitignore

@@ -0,0 +1,3 @@
+Goal Tooltip Images/Thumbs.db
+Thumbs.db
+*.swp

bingo.css

@@ -15,7 +15,7 @@
 
 html, body {
 	background-color: #F6F6F6;
-	background-image: url("background.png");
+	/*background-image: url("background.png"); */
 	background-size: 1920px 1080px;
 }
 
@@ -26,6 +26,7 @@ html, body {
 	box-shadow: 0px 10px 5px -10px #575757;
 	/* background-image: url("stonetile.png"); */
 	border-bottom: 5px solid;
+	margin-bottom: 10px;
 }
 
 #top_section h1 {
@@ -44,6 +45,28 @@ html, body {
 	-webkit-text-stroke-color: black;
 }
 
+#streamer_mode {
+	//border-bottom: 5px solid;
+	display: none;
+}
+
+#streamer_mode p {
+	padding: 10px;
+	font-family: settingsFont;
+	text-align: center;
+}
+
+#streamer_mode p input {
+	font-family: settingsFont;
+	font-weight: bold;
+}
+
+#streamer_mode .exit_link {
+	margin-top: 20px;
+	font-size: 0.7em;
+	text-align: right;
+}
+
 .top_settings p {
 	text-align: center;
 	font-weight: bold;
@@ -54,7 +77,6 @@ html, body {
 #mid_section {
 	width: 720px;
 	height: 650px;
-	margin-top: 10px;
 	padding-top: 10px;
 	padding-bottom: 10px;
 	margin-left: auto;
@@ -79,7 +101,6 @@ html, body {
 
 #tooltip img {
 	border: 2px solid #EBEBEB;
-	margin-bottom: 10px;
 	margin-right: 5px;
 	width: 64px;
 	height: 64px;
@@ -96,6 +117,10 @@ html, body {
 	position: absolute;
 }
 
+#tooltip p {
+	overflow: hidden;
+}
+
 #tooltiptext {
 	border-radius: 5px;
 	text-shadow: 2px 2px #000;
@@ -108,10 +133,9 @@ html, body {
 }
 
 #bingo {
-	float:center;
 	margin-top: 50px;
-	width:700px;
-	height:600px;
+	width: 700px;
+	height: 600px;
 	margin: 0px auto;
 	border-spacing: 0px;
 	border: solid 4px #FFF;
@@ -139,35 +163,149 @@ html, body {
 	color: #000;
 	padding: 5px 5px 5px 7px;
 	position: relative;
+	visibility: hidden;
 }
 
 #bingo td img{
 	visibility: hidden;
 }
 
+#hiddenTable {
+	font-family: settingsFont;
+	position: absolute;
+	top: 40px;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 540px;
+	background-color: white;
+	border: 2px solid #000;
+	padding: 20px;
+	text-align: center;
+	font-size: 0.75em;
+	display: none;
+}
+
+#hiddenTable p {
+	margin-top: 10px;
+}
+
+#hiddenTableSeed {
+	font-size: 1.5em;
+}
+
+#hiddenTableSeed input {
+	font-size: 1em;
+	width: 200px;
+}
+
+.showTableButton {
+	background-color: #6F6F6F;
+	color: #000;
+	background-image: url("button-background.png");
+	background-repeat: no-repeat;
+	height: 50px;
+	width: 440px;
+	border: 2px solid #000;
+	text-align: center;
+	margin: 40px auto 20px auto;
+}
+
+.showTableButton a {
+	text-decoration: none;
+	color: white;
+	font-size: 20px;
+}
+
+.showTableButton a:hover {
+	color: #FFF787;
+}
+
 .tooltipQ {
 	opacity: 0.5;
 	width: 15px;
 	height: 15px;
 	position: absolute;
 	padding-top: 4px;
-    right: 5px;
-    top: 5px;
+	right: 5px;
+	top: 5px;
 }
 
 .tooltipQhidden {
 	visibility: hidden !important;
 }
 
-
 .dropdown  {
 	position: relative;
 	float: right;
 }
 
+.diffslider {
+	cursor: pointer;
+	height: 54px;
+	width: 248px;
+	background: rgba(0, 0, 0, 0);
+	position: relative;
+	top: -54px;
+	-webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+	border: 1px solid #000000;
+	height: 50px;
+	width: 16px;
+	background-image: url("button-background.png");
+	background-repeat: no-repeat;
+	cursor: pointer;
+	border-radius: 0px;
+	-webkit-appearance: none;
+}
+
+input[type=range]::-moz-range-thumb {
+	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+	border: 1px solid #000000;
+	height: 50px;
+	width: 16px;
+	background-image: url("button-background.png");
+	background-repeat: no-repeat;
+	cursor: pointer;
+	border-radius: 0px;
+}
+
+input[type=range]::-moz-range-track {
+	visibility: hidden;
+}
+
+input[type=range]::-ms-thumb {
+	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+	border: 1px solid #000000;
+	height: 50px;
+	width: 16px;
+	background-image: url("button-background.png");
+	background-repeat: no-repeat;
+	cursor: pointer;
+	border-radius: 0px;
+}
+
+.diffsliderimg{
+	color: #FFF;
+	background-image: url("slider-background.png");
+	background-repeat: no-repeat;
+	height: 50px;
+	font-family: settingsFont;
+	width: 246px;
+	border: 2px solid #000;
+	text-align: center;
+	font-size: 20px;
+	vertical-align: middle;
+	line-height: 50px;
+}
+
 /* Dropdown Button */
 .dropbtn {
-    background-color: #6F6F6F;
+	cursor: pointer;
+    	background-color: #6F6F6F;
 	color: #FFF;
 	background-image: url("button-background.png");
 	background-repeat: no-repeat;
@@ -182,23 +320,23 @@ html, body {
 }
 
 /* Dropdown button on hover & focus */
-.dropbtn:hover{
-    background-color: #3e8e41;
+.dropbtn:hover {
+	background-color: #3e8e41;
 	color: #FFF787;
 }
 
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
-    display: none;
-    position: absolute;
-    z-index: 3;
+	display: none;
+	position: absolute;
+	z-index: 3;
 }
 
 /* Links inside the dropdown */
 .dropdown-content a {
-    color: black;
-    text-decoration: none;
-    display: block;
+	color: black;
+	text-decoration: none;
+	display: block;
 }
 
 
@@ -266,6 +404,15 @@ html, body {
 	margin-right: auto;
 }
 
+#bottomlinks {
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	text-align:center;
+	padding: 4px;
+	font-size: 0.8em;
+}
+
 #bottom_section ul {
 	margin-left: 20px;
 }
@@ -275,6 +422,10 @@ html, body {
 	padding: 5px;
 }
 
+#bottom_section ol {
+	margin-left: 20px;
+}
+
 #bottom_section ol li {
 	list-style-type: inside;
 	padding: 5px;