@charset "utf-8";

/* CSS Document */

html { height:100%; }
body { margin:0px; padding:0px; height:100%; border:none; }
.logo { text-align:center; }
.logo1 { text-align:center; height:190px; margin-top:-20px; margin-bottom:15px; background:url(../images/strip_2.png); background-repeat:repeat-x; }
.logo img {width:198px;height:198px;}
.textContainer { text-align:center; margin-bottom:10px;}
.title1 { font-family:Arial; font-size:1.25em; font-weight:bold; color:#b08d11; margin-top:10px; }
.title2 { font-family:Arial; font-size:2.25em; color:#b08d11; font-weight:bold;}
.title3 { font-family:Arial; font-size:0.75em; font-weight:bold; color:#988a38; text-transform:uppercase; margin-top:10px; }
#level_selector { list-style:none; text-align:center; margin-top:25px; }
#level_selector li { margin-top:-10px; }
.animals { margin-top:0px; background:url(../images/animals.png); background-repeat:repeat-x; background-position:bottom center; margin-top:0px; padding:0px; }
.pageTitle { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#000000; text-align:center; margin-bottom:10px; }
.hintsTitle { font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#ac9d7a; margin:10px auto; text-align:center; }
.hints { font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:-10px auto 10px auto; padding:5px 10px 5px 0px; width:280px; height:auto; border:1px solid #ac9d7a; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background-color:#FFFFFF; opacity:0.6; filter:alpha(opacity=80); }
.image { width:300px; height:auto; margin: auto; text-align:center; margin-bottom:10px; padding:20px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background-color:#ffffff; }
.thumbImage { width:150px; height:150px; margin:auto; padding:20px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; 
	background-color: #1a82f7;
	background: url(images/fallback-gradient.png);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#707070), to(#161616));
	background: -webkit-linear-gradient(top, #707070, #161616);
	background: -moz-linear-gradient(top, #707070, #161616);
	background: -ms-linear-gradient(top, #707070, #161616);
	background: -o-linear-gradient(top, #707070, #161616);
}
.animalName { font-weight:bold; text-align:center; }
.bigimg { width:300px; height:auto; max-height:300px; }
.opts { text-align:center; }
.ui-content {
	margin-top:50px;
	background:url(../images/animals.png); 
	background-repeat:repeat-x; 
	background-position:bottom center;
	margin-top:0px; 
	padding:0px;
}

#wrapper {
	position:absolute; 
	z-index:1;
	top:2.5em; 
	bottom:0px; 
	width:100%;
	overflow:auto;
}
#scroller {
	position:absolute; 
	/*z-index:1;*/
	width:99%;
}

.wrapper {
	position:absolute; 
	z-index:1;
	top:2.5em; 
	bottom:0px; 
	width:100%;
	overflow:auto;
}

.scroller {
	position:relative; 
	z-index:1;
	width:100%;
}
#wrapper1 {
	position:absolute; 
	z-index:1;
	top:2.5em; 
	bottom:0px; 
	width:100%;
	overflow:auto;
}
#scroller1 {
	position:absolute; 
	z-index:1;
	width:100%;
	overflow:auto;
	padding-top:1.5em;
	
}
	
#how_to_play { background:url(images/level1.png); background-repeat:repeat; text-shadow:none; }
#how_to_play p { text-align:justify; }
.ui-bar-f {border:none;}

@media only screen and (min-device-width : 315px) and (max-device-width : 480px) {
/* Styles */
	.main{min-width:100%;}
	#wrapper1 {margin-top:-20px;}
	#scroller{ padding-top:5px; }
	.icon { width:120px; height:120px; text-align:center; }
	/*.thumbImage { width:80px; height:80px; }
	.smallImage { width:80px; height:80px; }
	.bigimg { width:150px; height:auto; }
	.image { width:150px; height:auto; }*/
	.wrapper { position:absolute; }
	h3 { font-size:12px; }
}

/* Smartphones (landscape) ----------- */
@media only screen and (max-device-width : 480px) and (orientation:landscape) {
/* Styles */
	/*.bigimg { width:150px; height:auto; }
	.image { width:150px; height:auto; }
	.thumbImage { width:80px; height:80px; }*/
	.scroller{ padding-top:5px; min-height:140%; overflow:auto; max-height:700px; }
	h3{font-size:12px; padding:5px;}
	#scr{margin-top:-10px;}
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
	.icon { width:80px; height:auto; text-align:center; }
	[data-role="page"] { font-size:12px; }
	.ui-title { margin-right:10px; margin-left:10px; font-size:12px; }
	.hints { font-size:12px;}
	.bigimg { width:120px; height:auto; }
	.image { width:120px; height:auto; }
	.thumbImage { width:80px; height:80px; }
	.smallImage { width:80px; height:80px; }
	.scroller{ margin-top:20px; overflow:auto; }
	br { height:2px; }
	#scr{margin-top:0px;}
	#wrapper1 { top:4.7em; overflow:auto; }
	#scroller { margin-top:10px; overflow:auto; }
	#scroller1 { padding-top:1.5em; overflow:auto; }
	.score { margin:auto; text-align:center; background:url(../images/scoreboard_small.png); background-repeat:no-repeat; background-position:center top; width:310px; height:320px; font-family:Arial; font-size:18px; }
	.score #text { padding-top:120px; }
	.score #text .scoreText { font-family: Verdana; font-weight:normal; font-size:26px; color:#a2822b; text-shadow:2px 2px 5px #f2a28a; padding-top:2px; padding-bottom:2px; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
	.main{min-width:100%;}
	.bigimg { width:300px; height:auto; }
	.score { margin:auto; text-align:center; background:url(../images/scoreboard.png); background-repeat:no-repeat; background-position:center top; width:640px; height:591px; font-family:Arial; font-size:28px; }
	.score #text { padding-top:250px; }
	.score #text .scoreText { font-family: Verdana; font-weight:normal; font-size:65px; color:#a2822b; text-shadow:2px 2px 5px #f2a28a; }	
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
	#scroller{ padding-top:100px; }
	.scroller{ padding-top:50px; }
	.bigimg { width:300px; height:auto; }
	.image { width:300px; height:auto; }
	#scr{margin-top:-150px;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
	#scroller{ padding-top:200px; }
	.scroller{ padding-top:160px; }
	.bigimg { width:300px; height:auto; }
	.image { width:300px; height:auto; }
	#scr{margin-top:-300px;}
}

/* Galaxy Tab (portrait and landscape) ----------- */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) {
/* Styles */
	.main{min-width:100%;}
	h3{font-size:16px; padding:0px;}
	.score { margin:auto; text-align:center; background:url(../images/scoreboard.png); background-repeat:no-repeat; background-position:center top; width:640px; height:591px; font-family:Arial; font-size:28px; }
	.score #text { padding-top:250px; }
	.score #text .scoreText { font-family: Verdana; font-weight:normal; font-size:65px; color:#a2822b; text-shadow:2px 2px 5px #f2a28a; }
}

/* Galaxy Tab (landscape) ----------- */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles */
	#scroller{ padding-top:190px; }
	.scroller{ padding-top:50px; }
	.bigimg { width:300px; height:auto; }
	.image { width:300px; height:auto; }
	#scr{margin-top:-40px;}
}

/* Galaxy Tab (portrait) ----------- */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : portrait) {
/* Styles */
	#scroller{ padding-top:330px; }
	.scroller{ padding-top:230px; }
	.bigimg { width:300px; height:auto; }
	.image { width:300px; height:auto; }
	#scr{margin-top:-400px;}
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1281px) {
/* Styles */
	#scroller{ padding-top:50px; }
	.scroller { padding-top:50px;  }
	
	#scr{margin-top:-55px;}
	.bigimg { width:300px; height:auto; }
	.image { width:300px; height:auto; }
	.score { margin:auto; text-align:center; background:url(../images/scoreboard.png); background-repeat:no-repeat; background-position:center top; width:640px; height:591px; font-family:Arial; font-size:28px; }
	.score #text { padding-top:250px; }
	.score #text .scoreText { font-family: Verdana; font-weight:normal; font-size:65px; color:#a2822b; text-shadow:2px 2px 5px #f2a28a; }
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
	#scroller{ padding-top:80px; }
	.scroller{ padding-top:50px; }
	#scr{margin-top:-40px;}
	.score { margin:auto; text-align:center; background:url(../images/scoreboard.png); background-repeat:no-repeat; background-position:center top; width:640px; height:591px; font-family:Arial; font-size:28px; }
	.score #text { padding-top:250px; }
	.score #text .scoreText { font-family: Verdana; font-weight:normal; font-size:65px; color:#a2822b; text-shadow:2px 2px 5px #f2a28a; }
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
	#scroller{ padding-top:5px; }
	.scroller{ padding-top:5px; }
	#scr{margin-top:-10px;}
	h3{font-size:12px; padding:5px;}
	.score { margin:auto; text-align:center; background:url(../images/scoreboard_small.png); background-repeat:no-repeat; background-position:center top; width:310px; height:286px; font-family:Arial; font-size:20px; }
	.score #text { padding-top:100px; }
	.score #text .scoreText { font-family: Verdana; font-weight:normal; font-size:40px; color:#a2822b; text-shadow:2px 2px 5px #f2a28a; }
}

/*@media only screen and (max-device-width: 320px){ 
	.main{min-width:100%;}
	.bigimg { width:200px; height:auto; }
	.image { width:200px; height:auto; }
	#scroller{ padding-top:10px; background:#CCCC00; }
}
@media only screen and (min-device-width: 1281px) and (max-device-width: 2200px){ 
	.main{min-width:100%;}
	#scroller{padding-top:50px;}
	.scroller{padding-top:20px;}
}
@media only screen and (min-device-width:1025) and (max-device-width: 1280px){ 
	.main{min-width:100%;}
	#scroller{padding-top:50px;}
	.scroller { padding-top:30px; }
}
@media only screen and (min-device-width:771px;) and (max-device-width: 800px){ 
	.main{min-width:100%;}
	#scroller{padding-top:250px;}
	.scroller { padding-top:160px; }
}
@media only screen and (min-device-width:481px;) and (max-device-width: 770px){ 
	.main{min-width:100%;}
	#scroller{padding-top:150px; display:none;}
	.scroller { padding-top:110px; }
}
@media only screen and (min-device-width:321px;) and (max-device-width: 480px){ 
	.main{min-width:100%;}
	.bigimg { width:300px; height:auto; max-height:300px; }
	#scroller{ padding-top:10px; background:#00FF33; }
}*/