@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/ComicNeue-Regular.woff2') format('woff2'), /* Even Moderner Browsers */
       url('fonts/ComicNeue-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 300;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/ComicNeue-Bold.woff2') format('woff2'), /* Even Moderner Browsers */
       url('fonts/ComicNeue-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 700;
}

body {
	background:#97E9F5 url(bgPaper4.jpg) repeat top left;
	color:#101010; margin-bottom:25px; text-shadow:0 1px 1px rgba(255,255,255,0.5);
}

h1 {
	font-family: 'Comic Neue', sans-serif;
    font-weight: 700; font-size: 26px; line-height: 1em; text-align:center;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
}
h2 {
	font-family: 'Comic Neue', sans-serif;
    font-weight: 700; font-size: 22px; line-height: 1em; text-align:center;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
}
h3, h4, h5, h6 {
	font-family: 'Comic Neue', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5em;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
}
p, ol {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0 33px 13px 0;
}

.likeh1 {
	font-family: 'Comic Neue', sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.5em;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
    margin: 15px 0 23px 0;
	text-align:center;
}

.highlight { color:#EE2D79; }

.content { margin:25px 0; }

#directions {
	background:transparent url(bgNote.png) no-repeat bottom left;
	padding-top:25px; padding-bottom:100px;
}
ol li { margin:10px 0; }

.download { 
	margin-top:20px;
	text-align:center;
}

#gameboard { text-align:center; }

.footer {
	text-align:center;
}

.fb-comments {
	background-color:#ffffff; 
	margin-top:25px; padding:20px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

.container {
	margin:0 auto; width:98%;
}

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

h1 {
	font-family: 'Comic Neue', sans-serif;
    font-weight: 700; font-size: 24px; line-height: 1em; text-align:center;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
}

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

h1 {
	font-family: 'Comic Neue', sans-serif;
    font-weight: 700; font-size: 22px; line-height: 1em; text-align:center;
    /* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
    font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
}

}