Misc. CSS + data file fixes

css/style.css

@@ -13,7 +13,7 @@
 body {
 	background-color: #a1a1a1;
 	background-image: url('../img/wood.background.png');
-	font-family: "BodoniSvtyTwoOSITCTT-Bold", serif;
+	font-family: "BodoniSvtyTwoOSITCTT-Bold", "Georgia", serif;
 	text-rendering: optimizeLegibility;
 }
 
@@ -90,24 +90,24 @@ body {
 }
 
 .text {
-	font-family: "HelveticaNeue-CondensedBold", sans-serif;
+	font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", Arial, sans-serif;
 	vertical-align: middle;
-	font-size: 1.4em;
+	font-size: 1.2em;
-	line-height: 1.0em;
+	line-height: 1.2em;
 }
 
 .small {
-	font-size: 0.6em;
-}
-
-.medium {
 	font-size: 0.8em;
 }
 
-.large {
+.medium {
 	font-size: 1.0em;
 }
 
+.large {
+	font-size: 1.2em;
+}
+
 .win {
 	color: #ffffff !important;
    	background-color: red;
@@ -134,7 +134,7 @@ and (max-device-width : 480px) {
 	}
 
 	.text {
-		font-size: 1.6em;
+		font-size: 1.2em;
-		line-height: 1.0em;
+		line-height: 1.2em;
 	}
 }

js/data.js

@@ -10,29 +10,35 @@ var clickSnd = new Audio("audio/click.mp3");
 var winSnd = new Audio("audio/win.mp3");
 
 var JSONBingo = {"squares": [
-        {"square": "<span class='large'>one</span>"},
+        {"square": "one"},
-        {"square": "<span class='large'>two</span>"},
+        {"square": "two"},
-        {"square": "<span class='large'>three</span>"},
+        {"square": "three"},
-        {"square": "<span class='large'>four</span>"},
+        {"square": "four"},
-        {"square": "<span class='large'>five</span>"},
+        {"square": "five"},
-        {"square": "<span class='large'>six</span>"},
+        {"square": "six"},
-        {"square": "<span class='large'>seven</span>"},
+        {"square": "seven"},
-        {"square": "<span class='large'>eight</span>"},
+        {"square": "eight"},
-        {"square": "<span class='large'>nine</span>"},
+        {"square": "nine"},
-        {"square": "<span class='large'>ten</span>"},
+        {"square": "ten"},
-        {"square": "<span class='large'>eleven</span>"},
+        {"square": "eleven"},
-        {"square": "<span class='large'>twelve</span>"},
+        {"square": "twelve"},
-        {"square": "<span class='large'>thirteen</span>"},
+        {"square": "thirteen"},
-        {"square": "<span class='large'>fourteen</span>"},
+        {"square": "fourteen"},
-        {"square": "<span class='large'>fifteen</span>"},
+        {"square": "fifteen"},
-        {"square": "<span class='large'>sixteen</span>"},
+        {"square": "sixteen"},
-        {"square": "<span class='large'>seventeen</span>"},
+        {"square": "seventeen"},
-        {"square": "<span class='large'>eighteen</span>"},
+        {"square": "eighteen"},
-        {"square": "<span class='large'>nineteen</span>"},
+        {"square": "nineteen"},
-        {"square": "<span class='large'>twenty</span>"},
+        {"square": "twenty"},
-        {"square": "<span class='large'>twenty one</span>"},
+        {"square": "twenty one"},
-        {"square": "<span class='large'>twenty two</span>"},
+        {"square": "twenty two"},
-        {"square": "<span class='large'>twenty three</span>"},
+        {"square": "twenty three"},
-        {"square": "<span class='large'>twenty four</span>"}    	
+        {"square": "twenty four"},    	
+        {"square": "twenty five"},    	
+        {"square": "twenty six"},    	
+        {"square": "twenty seven"}, 
+        {"square": "twenty eight"},    	
+        {"square": "twenty nine"},    	
+        {"square": "thirty"}    	
     ]
 };

js/script.js

@@ -48,8 +48,8 @@ $(document).ready(function() {
 		if (row1 == 5 || row2 == 5 || row3 == 5 || row4 == 5 || row5 == 5 || col1 == 5 || col2 == 5 || col3 == 5  || col4 == 5  || col5 == 5 || diag1 == 5 || diag2 == 5) {
 			$('#header').html(winText);
 			$('#header').addClass("win");
-			
+	
-         		winSnd.play();
+         	winSnd.play();
     		
     	} else {
 			$('#header').html(headerText);