@charset "utf-8";

@font-face {
    font-family: 'warugakiregular';
    src: url('../media/fonts/warugaki-webfont.eot');
    src: url('../media/fonts/warugaki-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/warugaki-webfont.woff2') format('woff2'),
         url('../media/fonts/warugaki-webfont.woff') format('woff'),
         url('../media/fonts/warugaki-webfont.ttf') format('truetype'),
         url('../media/fonts/warugaki-webfont.svg#warugakiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Here you can freely modify the settings for each text field in the game */
/* --- STYLING FOR TEXT FIELDS BEGINS HERE ------------------------------------------------------------- */

/* SET THE FONT FOR ALL THE TEXTS */
*
{
	font-family: 'warugakiregular', Arial, Helvetica, sans-serif;
}

#orientation-change-image
{
	display: none;
	z-index: 1000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

#txt-tapbegin
{
	position: absolute;
	top: 465px;
	left: 0px;
	width: 100%;	

	font-size: 3.8rem;
	text-align: center;
	color: #fd9310;

	text-shadow:		
		#ba1700 0px 3px 0px,
		#ba1700 0px 3px 0px,
		#ba1700 0px 3px 0px,
		#ba1700 0px 3px 0px;
}

#txt-loading
{
	position: absolute;
	top: 465px;
	left: 0px;
	width: 100%;	

	font-size: 3.8rem;
	text-align: center;
	color: #fd9310;

	text-shadow:		
		#ba1700 0px 3px 0px,
		#ba1700 0px 3px 0px,
		#ba1700 0px 3px 0px,
		#ba1700 0px 3px 0px;		
}

#txt-levels-remaining
{
	position: absolute;
	top: 23px;
	left: 221px;

	width: 40px;
	height: 10px;

	font-size: 1.1rem;
	text-align: center;
	color: #fff324;
}

#txt-play-button
{
	font-size: 2.8rem;
	text-align: center;
	color: #fff324;

	vertical-align: middle;
	line-height: 100px;

	text-shadow:		
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px;
}

#txt-tutorial-close-label1
{
	position: absolute;
	top: 15px;
	left: 0;

	width: 100%;
	font-size: 1.2rem;
	color: white;
	text-align: center;
}

#txt-tutorial-close-label2
{
	position: absolute;
	bottom: 13px;
	left: 0;

	width: 100%;
	font-size: 2rem;
	color: #fff324;
	text-align: center;
}

#txt-comic-1
{
	left: 214px;
	top: 51px;
	width: 269px;
}

#txt-comic-2
{
	left: 247px;
	top: 365px;
	width: 263px;
}

#txt-comic-milk
{
	left: 80px;
	top: 235px;
	font-size: 3.2rem;
	font-weight: 600;
	color: white;
	text-shadow: 2px 2px 1px black, -2px -2px 1px black, 2px -2px 1px black, -2px 2px 1px black;
}

#txt-comic-3
{
	left: 539px;
	top: 65px;
	width: 241px;
}

.txt-story-close-label
{
	font-size: 2.8rem;
	text-align: center;
	color: #fff324;

	vertical-align: middle;

	width: 100%;
	line-height: 76px !important;

	-webkit-transform: none !important;
	-ms-transform: none !important;
	transform: none !important;

	text-shadow:		
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px;
}

#comic-intro-container p
{
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

#txt-comic-intro-1
{
	position: absolute;
	left: 40px;
	top: 50px;
	width: 320px;


	color: #7a430e;
	font-size: 2rem;
}

#txt-comic-intro-2
{
	position: absolute;
	left: 40px;
	top: 548px;
	width: 320px;

	font-size: 2rem;
	color: #FFF;	
	text-align: right;	
}

#tutorial-instructions-container-desktop p
{
	position: absolute;
}

#txt-tutorial-desktop-1
{
	left: 141px;
	top: 110px;	
	width: 133px;
	height: 22px;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 24px;
}

#txt-tutorial-desktop-2
{
	left: 37px;
	top: 163px;	
	width: 83px;
	height: 94px;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 24px;
}

#txt-tutorial-desktop-3
{
	left: 165px;
	top: 154px;	
	width: 171px;
	height: 92px;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 24px;
}

#txt-tutorial-desktop-4
{
	left: 11px;
	top: 433px;	
	width: 193px;
	height: 68px;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 24px;
}

#txt-tutorial-desktop-5
{
	left: 220px;
	top: 408px;	
	width: 176px;
	height: 147px;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 24px;
}

.txt-tutorial-pnp-name, .txt-tutorial-chorse-name, .txt-tutorial-mrmjart-name
{
	position: absolute;
	font-size: 1.6rem;
	color: #FFF;
	width: 225px;
	left: 510px;
}

.txt-tutorial-upgrade, .txt-tutorial-add
{
	position: absolute;
	left: 408px;
	font-size: 1.1rem;
	color: #BBB;
	text-align: center;
	width: 276px;
}

.txt-tutorial-pnp-name
{
	top: 100px;
}

.txt-tutorial-chorse-name
{
	top: 284px;
}

.txt-tutorial-mrmjart-name
{
	top: 468px;
}

.txt-tutorial-upgrade
{
	top: 200px;
}

.txt-tutorial-add
{
	top: 384px;
}

#feedback-buttshark
{
	width: 254px;
	height: 51px;
}

#feedback-freestyle
{
	width: 238px;
	height: 83px;
}

#feedback-tigereyes
{
	width: 301px;
	height: 112px;
}

#feedback-chorse
{
	width: 319px;
	height: 54px;
}

#feedback-mrmjart
{
	width: 206px;
	height: 99px;
}

#feedback-footface
{
	width: 121px;
	height: 124px;
}

#feedback-mcsweats
{
	width: 160px;
	height: 100px;
}

#feedback-sneakyp
{
	width: 284px;
	height: 50px;
}

#feedback-lazer
{
	width: 143px;
	height: 106px;
}

#txt-feedback-buttshark
{
	font-size: 3.7rem;
	text-align: center;
	color: #2BD7F3;

	width: 100%;

	position: absolute;
	top: 145px;
	left:0;

	text-shadow:		
		#025360 0px 3px 0px,
		#025360 0px 3px 0px;
}

#txt-feedback-freestyle
{
	font-size: 3.9rem;
	text-align: center;
	color: #F77DE6;

	width: 100%;
	line-height: 45px;

	position: absolute;
	top: 127px;
	left:0;

	text-shadow:		
		#790D55 0px 3px 0px,
		#790D55 0px 3px 0px;
}

#txt-feedback-freestyle::first-line
{
	font-size: 2.9rem;	
}

#txt-feedback-tigereyes
{
	font-size: 5rem;
	text-align: center;
	color: #F79406;

	width: 100%;
	line-height: 62px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#623902 0px 3px 0px,
		#623902 0px 3px 0px;
}

#txt-feedback-chorse
{
	font-size: 4rem;
	text-align: center;
	color: #3dbdff;

	width: 100%;
	line-height: 51px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#0c3e58 0px 3px 0px,
		#0c3e58 0px 3px 0px;
}

#txt-feedback-chorse::first-line
{
	font-size: 5rem;
}

#txt-feedback-mrmjart
{
	font-size: 4rem;
	text-align: center;
	color: #ffe778;

	width: 100%;
	line-height: 48px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#4d451e 0px 3px 0px,
		#4d451e 0px 3px 0px;
}

#txt-feedback-mrmjart::first-line
{
	font-size: 3.5rem;
}

#txt-feedback-footface
{
	font-size: 3rem;
	text-align: center;
	color: #ff4a4a;

	width: 100%;
	line-height: 33px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#4f0815 0px 3px 0px,
		#4f0815 0px 3px 0px;
}

#txt-feedback-footface span
{
	font-size: 4rem;
	line-height: 49px;
}

#txt-feedback-mcsweats
{
	font-size: 4rem;
	text-align: center;
	color: #d87f49;

	width: 100%;
	line-height: 46px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#3a2418 0px 3px 0px,
		#3a2418 0px 3px 0px;
}

#txt-feedback-mcsweats::first-line
{
	font-size: 3.5rem;
}

#txt-feedback-sneakyp
{
	font-size: 5rem;
	text-align: center;
	color: #eb68ff;

	width: 100%;
	line-height: 62px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#561d57 0px 3px 0px,
		#561d57 0px 3px 0px;
}

#txt-feedback-lazer
{
	font-size: 5rem;
	text-align: center;
	color: #fdeb50;

	width: 100%;
	line-height: 62px;

	position: absolute;
	top: 119px;
	left:0;

	text-shadow:		
		#5d4017 0px 3px 0px,
		#5d4017 0px 3px 0px;
}

#txt-home-confirm
{
	position: absolute;
	top: 145px;
	left: 5%;
	width: 90%;

	text-align: center;

	font-size: 3rem;
	color: white;
}

#txt-confirm-yes
{
	font-size: 2.5rem;
	text-align: center;
	color: #fff324;

	vertical-align: middle;
	line-height: 55px;

	text-shadow:		
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px;
}

#txt-confirm-no
{
	font-size: 2.5rem;
	text-align: center;
	color: #fff324;

	vertical-align: middle;
	line-height: 55px;

	text-shadow:		
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px;
}

#txt-pause-resume
{
	font-size: 2.8rem;
	text-align: center;
	color: #fff324;

	vertical-align: middle;
	line-height: 90px;

	text-shadow:		
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px,
		#807777 0px 3px 0px;
}

#txt-game-timer
{
	position: absolute;
	text-align: left;
	left: 60px;
	top: 43px;

	line-height: 25px;
	font-size: 1.5rem;
	color: #FF0000;
}

#txt-total-pennies
{
	width: 250px;

	display: inline-block;

	line-height: 50px;
	font-size: 1.5rem;
	color: #fff325;
}

#txt-total-cowbells
{
	display: inline-block;

	width: 75px;
	text-align: right;
	line-height: 48px;
	margin-right: 10px;
	font-size: 2.5rem;
	color: #fd9310;
	text-shadow: #ba1700 0px 3px 0px;
}

#txt-pause-title
{
	position: absolute;
	top: 15px;

	width: 100%;

	text-align: center;

	font-size: 3rem;
	color: white;
}

#txt-pause-game-timer
{
	display: inline-block;

	line-height: 25px;
	font-size: 1.8rem;
	color: #fff325;
}

#txt-pause-total-pennies
{
	display: inline-block;

	line-height: 50px;
	font-size: 1.5rem;
	color: #fff325;
}

#txt-timeup
{
	margin: 5px auto;

	font-size: 3.3rem;
	color: white;

	text-shadow: 0px 1px 3px black;
}

#txt-score-total-pennies
{	
	display: inline-block;

	line-height: 50px;
	font-size: 1.9rem;
	color: #fff325;
	text-align: center;
}

#txt-score-total-cowbells
{
	display: inline-block;

	width: 75px;
	line-height: 48px;
	font-size: 2.5rem;
	color: #fff325;
}

#txt-score-cowbells-sofar
{
	position: absolute;
	top: 170px;
	left: 0px;

	width: 100%;

	text-align: center;
	font-size: 1.2rem;
	color: #fff325;
}

.txt-purchase-label
{
	position: absolute;
	top: 5px;
	left: 0;

	width: 100%;
	text-align: center;
	
	font-size: 1.1rem;
	color: #FFF;
}

.txt-purchase-x10-label
{
	position: absolute;
	top: 8px;
	left: 0;

	width: 100%;
	text-align: center;
	
	font-size: 2.2rem;
	color: #FFF;
}

.txt-purchase-x10-label::first-letter
{	
	font-size: 1.6rem;
}

.txt-purchase-value
{
	position: absolute;
	bottom: 3px;
	left: 0;

	width: 100%;
	text-align: center;
	
	font-size: 2rem;
	color: #FFF;
}

.txt-upgrade-name
{
	font-size: 1.6rem;
	color: #FFF;
}

.txt-upgrade-churns-second
{
	font-size: 1rem;
	color: #000;
}

.txt-upgrade-description-1
{
	position: absolute;
	top: 107px;
	left: 15px;

	width: 345px;
	line-height: 17px;
}

.txt-upgrade-description-2
{
	position: absolute;
	top: 176px;
	left: 15px;

	width: 345px;
	line-height: 17px;

	font-style: italic;
}

.txt-character-level
{
	position: absolute;
	top: 74px;
	left: 14px;

	width: 40px;
	height: 20px;

	text-align: center;
	font-size: 1rem;
	color: #fff325;
}

.txt-feedback
{
	font-weight: 600;
	font-size: 2rem;
	line-height: 40px;
	color: #F4E6C4;
}

.txt-money-feedback
{
	display: inline;
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 30px;
	color: #fff325;
}

.txt-pu-feedback
{
	display: inline;
	font-size: 1.6rem;
	line-height: 25px;
	color: #4D4C43;
}

/* 
 * STYLING FOR THE MOBILE VERSION OF THE GAME / SCREENS SMALLER THAN 800px
 */
@media only screen and (max-width: 749px)
{
	#txt-tapbegin
	{
		position: absolute;
		top: 465px;
		left: 0px;
		width: 100%;	

		font-size: 3.8rem;
		text-align: center;
		color: #fd9310;

		text-shadow:		
			#ba1700 0px 3px 0px,
			#ba1700 0px 3px 0px,
			#ba1700 0px 3px 0px,
			#ba1700 0px 3px 0px;
	}

	#txt-loading
	{
		position: absolute;
		top: 465px;
		left: 0px;
		width: 100%;	

		font-size: 3.8rem;
		text-align: center;
		color: #fd9310;

		text-shadow:		
			#ba1700 0px 3px 0px,
			#ba1700 0px 3px 0px,
			#ba1700 0px 3px 0px,
			#ba1700 0px 3px 0px;		
	}

	#tutorial-instructions-container-mobile-1 p, #tutorial-instructions-container-mobile-2 p
	{
		position: absolute;
	}

	#txt-tutorial-mobile-1
	{
		left: 141px;
		top: 110px;	
		width: 138px;
		height: 22px;
		color: #FFF;
		font-size: 1.6rem;
		line-height: 24px;
	}

	#txt-tutorial-mobile-2
	{
		left: 37px;
		top: 163px;	
		width: 83px;
		height: 94px;
		color: #FFF;
		font-size: 1.6rem;
		line-height: 24px;
	}

	#txt-tutorial-mobile-3
	{
		left: 156px;
		top: 146px;	
		width: 185px;
		height: 92px;
		color: #FFF;
		font-size: 1.6rem;
		line-height: 24px;
	}

	#txt-tutorial-mobile-4
	{
		left: 8px;
		top: 384px;	
		width: 186px;
		height: 68px;
		color: #FFF;
		font-size: 1.6rem;
		line-height: 24px;
	}

	#txt-tutorial-mobile-5
	{
		left: 188px;
		top: 384px;	
		width: 210px;
		height: 95px;
		color: #FFF;
		font-size: 1.6rem;
		line-height: 24px;
	}

	#txt-tutorial-mobile-6
	{
		left: 50px;
		top: 30px;	
		width: 300px;
		height: 95px;
		color: #FFF;
		font-size: 2.2rem;
		line-height: 31px;
	}

	#txt-comic-3
	{
		left: 139px;
		top: 65px;
		width: 241px;
	}

	.txt-tutorial-pnp-name, .txt-tutorial-chorse-name
	{
		left: 110px;
	}

	.txt-tutorial-pnp-name
	{
		top: 355px;
	}

	.txt-tutorial-chorse-name
	{
		top: 539px;
	}

	.txt-tutorial-upgrade
	{
		top: 454px;
		left: 9px;
	}

	#txt-levels-remaining
	{
		position: absolute;
		top: 23px;
		left: 221px;

		width: 40px;
		height: 10px;

		font-size: 1.1rem;
		text-align: center;
		color: #fff324;
	}

	#txt-play-button
	{
		font-size: 2.8rem;
		text-align: center;
		color: #fff324;

		vertical-align: middle;
		line-height: 100px;

		text-shadow:		
			#807777 0px 3px 0px,
			#807777 0px 3px 0px,
			#807777 0px 3px 0px,
			#807777 0px 3px 0px;
	}

	#txt-pause-resume
	{
		font-size: 2.8rem;
		text-align: center;
		color: #fff324;

		vertical-align: middle;
		line-height: 90px;

		text-shadow:		
			#807777 0px 3px 0px,
			#807777 0px 3px 0px,
			#807777 0px 3px 0px,
			#807777 0px 3px 0px;
	}

	#txt-game-timer
	{
		position: absolute;
		text-align: left;
		left: 60px;
		top: 43px;

		line-height: 25px;
		font-size: 1.5rem;
		color: #FF0000;
	}

	#txt-total-pennies
	{
		width: 250px;

		display: inline-block;

		line-height: 50px;
		font-size: 1.5rem;
		color: #fff325;
	}

	#txt-total-cowbells
	{
		display: inline-block;

		width: 75px;
		text-align: right;
		line-height: 48px;
		margin-right: 10px;
		font-size: 2.5rem;
		color: #fd9310;
		text-shadow: #ba1700 0px 3px 0px;
	}

	#txt-pause-title
	{
		position: absolute;
		top: 15px;

		width: 100%;

		text-align: center;

		font-size: 3rem;
		color: white;
	}

	#txt-pause-game-timer
	{
		display: inline-block;

		line-height: 25px;
		font-size: 1.8rem;
		color: #fff325;
	}

	#txt-pause-total-pennies
	{
		display: inline-block;

		line-height: 50px;
		font-size: 1.5rem;
		color: #fff325;
	}

	#txt-timeup
	{
		margin: 5px auto;

		font-size: 3.3rem;
		color: white;
	}

	#txt-score-total-pennies
	{		
		display: inline-block;

		line-height: 50px;
		font-size: 1.9rem;
		color: #fff325;
		text-align: center;
	}

	#txt-score-total-cowbells
	{
		display: inline-block;

		position: absolute;
		right: 45px;
		top: 9px;
		width: 75px;

		text-align: right;
		line-height: 48px;
		font-size: 2.5rem;
		color: #fff325;

		text-shadow: 0px 1px 3px black;
	}

	#txt-score-cowbells-sofar
	{
		position: absolute;
		top: 543px;
		right: 25px;
		text-align: right;
		font-size: 1.3rem;
		color: #FD9310;
		text-shadow: #ba1700 0px 2px 0px;
		width: auto;
	}

	.txt-purchase-label
	{
		position: absolute;
		top: 5px;
		left: 0;

		width: 100%;
		text-align: center;
		
		font-size: 1.1rem;
		color: #FFF;
	}
	.txt-purchase-value
	{
		position: absolute;
		bottom: 3px;
		left: 0;

		width: 100%;
		text-align: center;
		
		font-size: 2rem;
		color: #FFF;
	}

	.txt-upgrade-name
	{
		font-size: 1.3rem;
		color: white;
		width: 225px;
		line-height: 30px;
	}

	.txt-upgrade-description-1
	{
		position: absolute;
		top: 107px;
		left: 15px;

		width: 345px;
		line-height: 17px;
	}

	.txt-upgrade-description-2
	{
		position: absolute;
		top: 176px;
		left: 15px;

		width: 345px;
		line-height: 17px;

		font-style: italic;
	}

	.txt-character-level
	{
		position: absolute;
		top: 76px;
		left: 17px;

		width: 40px;
		height: 20px;

		text-align: center;
		font-size: 1rem;
		color: #fff325;
	}

	.txt-feedback
	{
		font-weight: 600;
		font-size: 2rem;
		line-height: 40px;
		color: #F4E6C4;
	}
}

/* --- STYLING FOR TEXT FIELDS ENDS HERE -------------------------------------------------------------- */


/* --- STYLING FOR GAME CONTENT BEGINS HERE -------------------------------------------------------------- */
*
{
	-webkit-tap-highlight-color:transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
}

html
{
	background: #000;
	overflow: hidden;
}

body
{
	width: 100%;
	overflow: hidden;
	margin: 0 auto !important;
	background: #000;
}

body,div,img,p
{
	margin: 0px;
	padding: 0px;
}

.button-clickable, .button-clickable *
{
	cursor: pointer;
	pointer-events: all;
}

.pp-logo
{
	width: 305px;
	height: 315px;
	background: url("../media/images/localized/logo.png") no-repeat center;
}

.game-button
{
	background: url("../media/images/buttons.png") no-repeat;
}

#main
{
	position: relative;
	width: 800px;
	height: 600px;
	overflow: hidden;
	margin: 0 auto;
	background: #000;
}

#app-main
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 600px;
	overflow: hidden;
	background: #000;

	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;	
}

#game-canvas
{
	position: absolute;
	pointer-events: none;
}

#game-container
{
	margin: 0 auto;
	width: 800px;
	height: 600px;
}

#left-section-container
{	
	width: 400px;
	height: 600px;
	overflow: hidden;
}

#left-section
{
	position: relative;
	height: 100%;
	width: 100%;
}

#right-section-container
{
	position: absolute;
	left: 400px;
	top: 0;
	width: 400px;
	height: 600px;
}

#right-section
{
	position: relative;
	height: 100%;
	width: 100%;

	background: url("../media/images/shop/shop-background.png") no-repeat center;
	background-size: contain;
}

#blank-screen
{	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

/* --------------------------------------------------------------------- GAME ---- */

.special-feedback
{
	position: absolute;
	left: 50%;
	top: 170px;

	display: none;

	-webkit-transform: translate(-50%,-50%);	
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.text-special-feedback
{
	display: none;
	text-transform: uppercase;
}

#feedback-container
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.progression-increment-feedback
{
	position: absolute;
	top: 225px;
	left: 100px;
	text-align: center;
}

.money-feedback
{
	position: absolute;
	top: 225px;
	right: 75px;
	text-align: right;
}

.money-feedback-penny
{
	display: inline-block;
	height: 30px;
	vertical-align: top;
}

.pu-goldencheese-feedback-cheese
{
	display: inline-block;
	height: 25px;
	vertical-align: top;
}

.pu-coinpurse-feedback-penny
{
	display: inline-block;
	height: 25px;
	vertical-align: top;
}

.pu-goldencheese-feedback
{
	position: absolute;
}

.pu-coinpurse-feedback
{
	position: absolute;
}

.pu-feedback
{
	position: absolute;
}

.timer-icon, .penny-logo, #cowbell-icon
{
	display: inline-block;
}

.timer-icon
{
	width: 24px;
	height: 25px;
	vertical-align: top;
}

#timer-big
{
	position: absolute;
	left: -15px;
	top: 125px;

	width:110px; 
	height:87px;

	background:url("../media/images/timer.png") no-repeat;
	background-position: -2px -2px
}

#timer-big.on
{
	background-position: -114px -2px;
}

#pennies-display-container
{
	position: absolute;	
	left: 50%;
	top: 60px;

	margin-left: -160px;

	width: 320px;
	height: 50px;
}

.penny-logo
{
	width: 50px;
	height: 50px;
	vertical-align: top;
}

#txt-churns-per-second, .txt-tutorial-churnspersec
{
	position: absolute;
	top: 10px;
	width: 400px;
	text-align: center;
	color: #022625;
	font-size: 1rem;
}

#progression-display-container
{
	position: absolute;
	top: 30px;
	left: 50%;

	margin-left: -110px;

	width: 256px;
	height: 49px;

	background: url("../media/images/progressbar/ui_progressbar_under.png") no-repeat center;	
}

#progression-bar-overlay
{
	display: inline;
	position: absolute;
}

#progression-bar-container-relative
{
	display: inline;
	position: absolute;
	width: 100%;
	height: 100%;	
}

#progression-bar-container
{
	position: absolute;
	width: 205px;
	height: 15px;
	left: 5px;
	top: 14px;
}

#progression-bar
{	
	width: 0%;
	height: 15px;
	background-color: #F4E6C4;
}

#powerup-container
{
	position: absolute;
	top: 105px;
	left: 15px;

	width: 60px;
	height: 60px;

	background-color: rgba(0,0,0,0.6);
	border-radius: 20%;
}

#booster-container
{
	position: absolute;
	top: 175px;
	left: 15px;

	width: 60px;
	height: 60px;

	background-color: rgba(0,0,0,0.6);
	border-radius: 20%;
}

#cowbell-display-container
{
	position: absolute;
	bottom: 20px;
	left: 50%;

	margin-left: -70px;

	width: 140px;
	height: 70px;
}

.cowbell-icon
{
	width: 38px;
	height: 48px;
	vertical-align: top;

}

#btn-pause
{
	position: absolute;
	left: auto;
	bottom: auto;

	top: 8px;
	right: 8px;

	width: 42px;
	height: 45px;

	background-position: -198px -89px;
}

#btn-pause:active
{
	background-position: -154px -89px;
}

.game-powerup {cursor: pointer; display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url("../media/images/icons/powerups.png");}

.powerup_coinpurse {width:44px; height:66px; background-position: -2px -2px}
.powerup_goldencheese {width:53px; height:52px; background-position: -2px -70px}
.powerup_lightningstrike {width:42px; height:61px; background-position: -2px -124px}
.powerup_wheatgrassjuice {width:42px; height:58px; background-position: -2px -187px}

#game-powerups-container
{
	position: absolute;
	left: 0;
	top: 0;

	width: 100%;
	height: 100%;
}

#game-powerups-container *
{
	position: absolute;
}

/* ----------------- SPLASH ------------------ */

#splash-screen-blocker1,#splash-screen-blocker2
{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 600px;
	background-color: #000;
}

#splash-animations
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.splash-parts-container img
{
	position: absolute;
	/*transform-origin: 0px 0px;*/
}

.splash-parts-container
{
	position: relative;
	width: 100%;
	height: 100%;
}

#lazer-bkg
{
	width: 374px;
	height: 421px;

	margin-left: -187px;
	margin-top: -213px;
}
#lazer-name
{
	width: 310px;
	height: 151px;

	margin-left: -155px;
	margin-top: -75.5px;
}
#lazer-char
{
	width: 307px;
	height: 336px;

	margin-left: -153.5px;
	margin-top: -168px;
}

#chorse-bkg
{
	width: 408px;
	height: 408px;

	margin-left: -204px;
	margin-top: -204px;
}
#chorse-name1
{
	width: 360px;
	height: 110px;

	margin-left: -176px;
	margin-top: -51px;
}
#chorse-name2
{
	width: 259px;
	height: 123px;

	margin-left: -130px;
	margin-top: -65px;
}
#chorse-char1
{
	width: 196px;
	height: 220px;

	margin-left: 0px;
	margin-top: 0px;
}
#chorse-char2
{
	width: 261px;
	height: 172px;

	margin-left: 0px;
	margin-top: 0px;
}

#footface-name1
{
	width: 357px;
	height: 110px;

	margin-left: -179px;
	margin-top: -51px;
}
#footface-name2
{
	width: 179px;
	height: 123px;

	margin-left: -89px;
	margin-top: -65px;
}
#footface-bkg
{
	width: 372px;
	height: 325px;

	margin-left: -180px;
	margin-top: -152px;
}
#footface-char
{
	width: 231px;
	height: 284px;

	margin-left: -116px;
	margin-top: -154px;
}

#mcsweats-name
{
	width: 353px;
	height: 110px;

	margin-left: -174px;
	margin-top: -65px;
}
#mcsweats-bkg
{
	width: 358px;
	height: 426px;

	margin-left: -177px;
	margin-top: -260px;
}
#mcsweats-char
{
	width: 207px;
	height: 287px;

	margin-left: -103px;
	margin-top: -143px;
}

#mrmjart-name
{
	width: 337px;
	height: 112px;

	margin-left: -168px;
	margin-top: -71px;
}
#mrmjart-bkg
{
	width: 358px;
	height: 404px;

	margin-left: -176px;
	margin-top: -232px;
}
#mrmjart-char
{
	width: 177px;
	height: 365px;

	margin-left: -89px;
	margin-top: -182px;
}

#sneakyp-name1
{
	width: 281px;
	height: 123px;

	margin-left: -140px;
	margin-top: -61px;
}
#sneakyp-name2
{
	width: 214px;
	height: 125px;

	margin-left: -107px;
	margin-top: -62px;
}
#sneakyp-bkg
{
	width: 360px;
	height: 377px;

	margin-left: -180px;
	margin-top: -188px;
}
#sneakyp-char
{
	width: 199px;
	height: 359px;

	margin-left: -100px;
	margin-top: -143px;
}
/* --------------------------------------------------------------------- SHOP ---- */

.shop-sprite{background-repeat: no-repeat;background-image:url("../media/images/shop/shop.png");}
.shop-mobile-sprite{background-repeat: no-repeat;background-image:url("../media/images/shop-mobile/shop-mobile.png");}
.shop-scrollbar{background-repeat: no-repeat;background-image:url("../media/images/shop/shop-scrollbar.png");}

#scrollbar-container
{
	position: absolute;
	top: 85px;
	right: 0px;

	width: 28px;
	height: 507px;

	background-position: -2px -122px;
}

#scrollup-button
{
	position: absolute;
	top: 0px;
	right: 1px;

	width: 26px;
	height: 28px;

	background-position: -2px -92px;
}

#scrollup-button:active
{
	background-position: -2px -62px;
}

#scrolldown-button
{
	position: absolute;
	bottom: 0px;
	right: 1px;

	width: 26px;
	height: 28px;

	background-position: -2px -32px;
}

#scrolldown-button:active
{
	background-position: -2px -2px;
}

#scrollbar
{
	position: absolute;
	top: 26px;
	right: 1px;

	width: 26px;
	height: 95px;

	background-position: -2px -728px;
}

#scrollbar:active
{
	background-position: -2px -631px;
}

#shop-scroller
{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 600px;
}


#upgrades-shop-container
{
	position: absolute;
	top: 85px;

	height: 515px;
	width: 400px;
	
	overflow: hidden;

	pointer-events: none;
}

#upgrades-shop-header
{
	position: absolute;
	top: 0;

	width: 400px;
	height: 85px;

	background: url("../media/images/shop/shop-title-back-panel.png") no-repeat center;
	background-size: contain;
}

#shop-title
{
	position: absolute;
	bottom: 0;
	left: 50%;

	margin-left: -194px;

	width: 388px;
	height: 85px;
}

#open-shop-button, #close-shop-button
{
	display: none;
}

#upgrades-shop
{
	width: 100%;
	position: absolute;
}

.upgrade-block
{
	width: 372px;
	height: 184px;

	margin: 0;

	position: relative;

	background-repeat: no-repeat; background-image:url("../media/images/shop/shop.png");
	background-position: -2px -328px;
}

.upgrade-block.expanded
{
	background-repeat: no-repeat;background-image:url("../media/images/shop/shop.png");
	background-position: -2px -2px;
	height: 325px;
}

.upgrade-block table
{
	height: 90px;
	table-layout: fixed;
}

.upgrade-block table td:nth-of-type(1)
{
	width: 25%;
}

.upgrade-block table td:nth-of-type(2)
{
	width: 75%;
}

.upgrade-expander
{
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 35px;
	pointer-events: all;
}

.upgrade-scroller
{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
}

.upgrade-purchase-button
{
	position: absolute;
	bottom: 10px;
	left: 10px;
	/*margin-left: -138px;*/

	width: 276px;
	height: 63px;
	background-position: -2px -365px;
}
.upgrade-purchase-button:active
{
	background-position: -200px -300px;
}

.upgrade-block.locked .upgrade-purchase-button, .upgrade-block.locked .upgrade-purchase-button:active
{
	background-position: -478px -300px;
	
	cursor: not-allowed;
}

.upgrade-block.locked .upgrade-purchase-button *
{
	cursor: not-allowed;
}

.upgrade-purchase-x10-button
{
	position: absolute;
	bottom: 10px;
	left: 296px;

	width: 64px;
	height: 63px;
	background-position: -134px -300px;
}
.upgrade-purchase-x10-button:active
{
	background-position: -2px -300px;
}

.upgrade-purchase-x10-button.locked, .upgrade-purchase-x10-button.locked:active
{
	background-position: -68px -300px;
	
	cursor: not-allowed;
}

.upgrade-purchase-x10-button.locked p, .upgrade-purchase-x10-button.locked:active p
{
	color: #BBB !important;
}

.upgrade-purchase-x10-button.locked *
{
	cursor: not-allowed;
}

.upgrade-block.locked .upgrade-purchase-button p, .upgrade-block.locked .upgrade-purchase-x10-button p
{
	color: #BBB !important;
}

.upgrade-face-container
{
	width: 110px;
	height: 110px;
	background:url("../media/images/icons/characters.png") no-repeat;
}
.upgrade-text-container
{
	position: absolute;
	top: 15px;
	left: 110px;
}

.upgrade-block .txt-upgrade-description-1, .upgrade-block .txt-upgrade-description-2
{
	display: none;		
}
.upgrade-block.expanded .txt-upgrade-description-1, .upgrade-block.expanded .txt-upgrade-description-2
{
	display: block;		
}

.ui_charactericon_chorse {width:110px; height:110px; background-position: -2px -2px}
.ui_charactericon_chorse_locked {width:110px; height:110px; background-position: -114px -2px}
.ui_charactericon_footface {width:110px; height:110px; background-position: -226px -2px}
.ui_charactericon_footface_locked {width:110px; height:110px; background-position: -338px -2px}
.ui_charactericon_lazer {width:110px; height:110px; background-position: -450px -2px}
.ui_charactericon_lazer_locked {width:110px; height:110px; background-position: -562px -2px}
.ui_charactericon_mcsweats {width:110px; height:110px; background-position: -674px -2px}
.ui_charactericon_mcsweats_locked {width:110px; height:110px; background-position: -2px -114px}
.ui_charactericon_mrmjart {width:110px; height:110px; background-position: -114px -114px}
.ui_charactericon_mrmjart_locked {width:110px; height:110px; background-position: -226px -114px}
.ui_charactericon_pnp {width:110px; height:110px; background-position: -338px -114px}
.ui_charactericon_sneakyp {width:110px; height:110px; background-position: -450px -114px}
.ui_charactericon_sneakyp_locked {width:110px; height:110px; background-position: -562px -114px}

.game-screen
{
	position: absolute;
	top:0; left:0;
	width: 800px;
	height: 600px;
}

/* --------------------------------------------------------------------- INTRO SCREEN ---- */

#intro-screen
{
	z-index: 1000;
	background: url("../media/images/intro_bkg.png") no-repeat center;
	background-size: cover;
}

/* --------------------------------------------------------------------- LOADING SCREEN ---- */

#loading-screen
{
	z-index: 1000;

	position: absolute;
	top: 0;
	left: 0;
	
	background: url("../media/images/intro_bkg.png") no-repeat center;
	background-size: cover;
}

#preloader-anim 
{
	position: absolute;
	margin-left: -48px;
	left: 400px;
	top: 475px;

	display:inline-block; 
	overflow:hidden; 
	background-repeat:no-repeat;
	background-image:url("../media/images/preloader/preloader.png");
}

.preloader01 {width:96px; height:96px; background-position: -2px -2px}
.preloader02 {width:96px; height:96px; background-position: -100px -2px}
.preloader03 {width:96px; height:96px; background-position: -198px -2px}
.preloader04 {width:96px; height:96px; background-position: -296px -2px}
.preloader05 {width:96px; height:96px; background-position: -394px -2px}
.preloader06 {width:96px; height:96px; background-position: -2px -100px}
.preloader07 {width:96px; height:96px; background-position: -100px -100px}
.preloader08 {width:96px; height:96px; background-position: -198px -100px}
.preloader09 {width:96px; height:96px; background-position: -296px -100px}
.preloader10 {width:96px; height:96px; background-position: -394px -100px}
.preloader11 {width:96px; height:96px; background-position: -2px -198px}
.preloader12 {width:96px; height:96px; background-position: -100px -198px}
.preloader13 {width:96px; height:96px; background-position: -198px -198px}
.preloader14 {width:96px; height:96px; background-position: -296px -198px}
.preloader15 {width:96px; height:96px; background-position: -394px -198px}
.preloader16 {width:96px; height:96px; background-position: -2px -296px}
.preloader17 {width:96px; height:96px; background-position: -100px -296px}
.preloader18 {width:96px; height:96px; background-position: -198px -296px}
.preloader19 {width:96px; height:96px; background-position: -296px -296px}
.preloader20 {width:96px; height:96px; background-position: -394px -296px}
.preloader21 {width:96px; height:96px; background-position: -2px -394px}
.preloader22 {width:96px; height:96px; background-position: -100px -394px}
.preloader23 {width:96px; height:96px; background-position: -198px -394px}
.preloader24 {width:96px; height:96px; background-position: -296px -394px}


/* --------------------------------------------------------------------- MAINMENU SCREEN ---- */

#mainmenu-screen
{
	background: url("../media/images/intro_bkg.png") no-repeat center;
	background-size: cover;
}

#mainmenu-play-button
{
	position: absolute;
	top: 480px;
	left: 50%;

	margin-left: -112px;

	width: 224px;
	height: 107px;

	background-position: -544px -89px;
}

#mainmenu-play-button:active
{
	background-position: -318px -89px;
}

#mainmenu-pp-logo, #loading-pp-logo, #intro-pp-logo
{
	margin: 0 auto;
}

/* --------------------------------------------------------------------- STORY SCREEN ---- */

#story-screen
{
	background: url("../media/images/intro_bkg.png") no-repeat center;
	background-size: cover;
}

#comic-1-container p, #comic-2-container p
{
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	line-height: 17px;
	text-align: center;
}

.comic-page
{
	position: absolute;
	top: 0;
	width: 400px;
	height: 600px;
}

#comic-intro
{
	position: absolute;
	left: 0;
	top: 0;
	background: url("../media/images/story/comic-intro-desktop.png") no-repeat center;
	width: 800px;
	height: 600px;
}

#comic-1
{
	left: 0;
}

#comic-2
{
	right: 0;
}

.peanut-money
{
	position: absolute;
	top: 148px;
	left: 615px;

	width: 33px;
	height: 50px;

	background: url("../media/images/story/cashsign.png") no-repeat;
}

.peanut-money.penny
{
	position: absolute;
	top: 141px;
	left: 599px;

	width: 64px;
	height: 64px;

	background: url("../media/images/story/mjartpenny.png") no-repeat;
}

.pickle-money
{
	position: absolute;
	top: 70px;
	left: 698px;

	width: 64px;
	height: 64px;

	background: url("../media/images/story/mjartpenny.png") no-repeat;
}

.close-story-button
{
	width: 281px;
	height: 85px;

	position: absolute;
	left: 75%;
	top: 500px;
	margin-left: -140px;

	background-position: -285px -2px;
}

/* --------------------------------------------------------------------- TUTORIAL SCREEN ---- */

#tutorial-screen
{	
	background: url("../media/images/intro_bkg.png") no-repeat center;
	background-size: cover;
}

#tutorial-bkg-container
{
	position: relative;
	margin: 0 auto;

	width: 438px;
	height: 490px;
	background: url("../media/images/tutorial/ui_tutorial_desktop.png") no-repeat center;
}

#tutorial-bkg-container p
{
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	line-height: 17px;
	text-align: center;
}

#instructions-screen-mobile-1, #instructions-screen-mobile-2
{
	position: absolute;
	left: 0;
	top: 0;

	width: 400px;
	height: 600px;
}

#instructions-screen-desktop
{
	position: absolute;
	left: 0;
	top: 0;

	width: 800px;
	height: 600px;
}

#tutorial-instructions-container-desktop
{
	position: absolute;
	top: 0;
	left: 0;
	width: 800px;
	height: 600px;
}

#tutorial-instructions-container-mobile
{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 600px;
}

/* --------------------------------------------------------------------- CONFIRM SCREEN ---- */

#confirm-screen
{
	background: rgba(0,0,0,0.7);
}

#confirm-yes-button,#confirm-no-button
{
	position: absolute;
	left: 50%;
	margin-left: -138px;
	width: 276px;
	height: 63px;
	background-position: -2px -365px;
}
#confirm-yes-button:active,#confirm-no-button:active
{
	background-position: -200px -300px;
}

#confirm-yes-button
{	
	top: 325px;	
}

#confirm-no-button
{
	top: 398px;
}

/* --------------------------------------------------------------------- PAUSE SCREEN ---- */

#pause-screen
{
	background: rgba(0,0,0,0.7);
}

#pause-timer-display-container
{
	position: absolute;
	left: 50%;
	top: 105px;
	height: 30px;

	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

#pause-pennies-display-container
{
	position: absolute;	
	left: calc(50% - 8px);
	top: 140px;	
	height: 50px;

	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

#pause-toggle-sfx-button
{
	position: absolute;
	top: 210px;
	left: 50%;
	margin-left: -37px;

	width: 74px;
	height: 78px;
}
#pause-toggle-sfx-button.toggle-off
{
	background-position: -508px -365px;
}

#pause-toggle-sfx-button.toggle-on
{
	background-position: -432px -365px;
}

#pause-toggle-music-button
{
	position: absolute;
	top: 210px;
	left: calc(50% - 84px);
	margin-left: -37px;

	width: 74px;
	height: 78px;
}
#pause-toggle-music-button.toggle-off
{
	background-position: -356px -365px;
}

#pause-toggle-music-button.toggle-on
{
	background-position: -280px -365px;
}

#pause-show-tutorial-button
{
	position: absolute;
	top: 210px;
	left: calc(50% + 84px);
	margin-left: -37px;

	background-position: -644px -2px;

	width: 74px;
	height: 78px;
}

#pause-show-tutorial-button:active
{
	background-position: -568px -2px;
}

#pause-resume-button
{
	position: absolute;
	top: 325px;
	left: 50%;

	margin-left: -153.5px;

	width: 307px;
	height: 100px;

	background-position: -463px -198px;
}

#pause-resume-button:active
{
	background-position: -154px -198px;
}

#pause-home-button
{
	position: absolute;
	top: 465px;
	left: 50%;

	margin-left: -37px;

	width: 74px;
	height: 78px;
	background-position: -2px -89px;
}

#pause-home-button:active
{
	background-position: -720px -2px;
}

/* --------------------------------------------------------------------- SCORE SCREEN ---- */

#score-screen
{
	text-align: center;

	background: url("../media/images/score_bkg.png") no-repeat center;
	background-size: cover;

	pointer-events: none;
}

#score-pennies-display-container
{
	position: absolute;	
	left: 50%;
	top: 65px;
	height: 50px;

	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

#score-cowbell-display-container
{
	position: absolute;
	top: 120px;
	left: 50%;

	margin-left: -60px;

	width: 120px;
	height: 70px;
}

#stats-panel
{
	position: absolute;

	top: 123px;
	left: 50%;
	margin-left: -184px;

	width: 368px;
	height: 256px;

	background: url("../media/images/ui_statspanel.png") no-repeat center;
}

#icon-totalstirs, #icon-unitspersecond, #icon-biggestmove
{
	position: absolute;
	left: 15px;
}

#txt-totalstirs, #txt-nb-totalstirs, #txt-unitspersecond, #txt-nb-unitspersecond, #txt-biggestmove, #txt-nb-biggestmove
{
	
}

#txt-totalstirs, #txt-unitspersecond, #txt-biggestmove
{
	color: white;
	font-size: 1.1rem;
}

#txt-nb-totalstirs, #txt-nb-unitspersecond, #txt-nb-biggestmove
{
	color: #fff324;
	font-size: 1.7rem;
}

#icon-totalstirs
{
	top: 15px;
}

#txt-totalstirs
{
	top: 15px;
}

#txt-nb-totalstirs
{
	top: 40px;
}

#icon-unitspersecond
{
	top: 90px;
}

#txt-unitspersecond
{
	top: 90px;
}

#txt-nb-unitspersecond
{
	top: 115px;
}

#icon-biggestmove
{
	top: 165px;
}

#txt-biggestmove
{
	top: 165px;
}

#txt-nb-biggestmove
{
	top: 190px;
}

#stats-panel p
{
	position: absolute;
	left: 53px;

	width: 300px;
	text-align: center;
}

#score-home-button
{
	position: absolute;
	top: 490px;
	left: calc(50% - 90px);

	margin-left: -89px;
	width: 74px;
	height: 78px;
	background-position: -2px -89px
}

#score-home-button:active
{
	background-position: -720px -2px;
}

#score-reset-button
{
	position: absolute;
	top: 490px;
	left: calc(50% + 90px);

	margin-left: 15px;
	width: 74px;
	height: 78px;
	background-position: -78px -198px;
}

#score-reset-button:active
{
	background-position: -2px -198px;
}

/*
 * Mobile mode
 * For screens smaller than 800px, show only 1 screen wide
 *
 */

@media only screen and (max-height: 500px) and (orientation: landscape)
{
	#orientation-change-image
	{
		display: block;
		background: black url("../media/images/orientation_iphone.png");
	}
}

@media only screen and (min-height: 960px) and (orientation: portrait)
{
	#orientation-change-image
	{
		display: block;
		background: black url("../media/images/orientation_ipad.png");
	}
}


@media only screen and (max-width: 749px)
{
	#main
	{
		width: 400px;
	}

	#game-container
	{
		/*width: 400px;
		height: 600px;*/
	}

	#preloader-anim 
	{
		left: 200px;
	}

	.game-screen
	{		
		width: 400px;
		height: 600px;
	}

	#right-section-container
	{
		left: 0px;
		top: 600px;
		pointer-events: none;
	}

	#shop-title
	{
		bottom: -10px;
	}

	#upgrades-shop-header
	{
		pointer-events: none;
	}

	#close-shop-button
	{
		pointer-events: all;
		display: block;
		position: absolute;
		top: 5px;
		right: 7px;

		width: 53px;
		height: 55px;
		background-position: -57px -515px
	}

	#close-shop-button:active
	{
		background-position: -2px -515px;
	}

	#open-shop-button
	{
		pointer-events: all;
		display: block;
		position: absolute;
		top: -27px;
		right: 9px;

		width: 49px;
		height: 87px;
		background: url("../media/images/shop-mobile/button_mjartmart.png") no-repeat center;
	}

	#open-shop-button.on
	{
		background: url("../media/images/shop-mobile/button_mjartmart_newitem.png") no-repeat center;
	}

	#upgrades-shop-container
	{		
		top: 60px;

		height: 260px;
		width: 400px;
		
		overflow: hidden;
	}

	#upgrades-shop-header
	{	
		top: -60px;

		height: 120px;

		background: url("../media/images/shop-mobile/shop-title-back-panel.png") no-repeat center;
		background-size: contain;
	}

	.upgrade-block
	{
		width: 400px;
		/*height: 130px;*/
		background-repeat: no-repeat;background-image:url("../media/images/shop-mobile/shop-mobile.png");
		background-position: -2px -328px;
	}

	.upgrade-block.expanded
	{
		background-repeat: no-repeat;background-image:url("../media/images/shop-mobile/shop-mobile.png");
		background-position: -2px -2px;
	}

/*	.upgrade-purchase-button
	{
		position: absolute;
		top: 45px;
		left: 110px;
		margin-left: 0px;	
	}*/

	.upgrade-text-container
	{
		position: absolute;
		top: 15px;
		left: 110px;
	}

	.upgrade-block .txt-upgrade-description-1, .upgrade-block .txt-upgrade-description-2
	{
		display: none;		
	}
	.upgrade-block.expanded .txt-upgrade-description-1, .upgrade-block.expanded .txt-upgrade-description-2
	{
		display: block;		
	}

	#scrollbar-container
	{
		display: none;
	}

	#tutorial-bkg-container
	{
		position: absolute;
		top: 0;
		left: 0;

		width: 400px;
		height: 534px;
		background: url("../media/images/tutorial/ui_tutorial_mobile.png") no-repeat center;
	}

	.close-story-button
	{		
		left: 50%;
	}

	#loading-screen, #mainmenu-screen, #tutorial-screen, #story-screen
	{
		background: url("../media/images/intro_bkg_mobile.png") no-repeat center;
	}

	#score-screen
	{
		background: url("../media/images/score_bkg_mobile.png") no-repeat center;
	}

	#score-home-button
	{
		margin-left: 0;
		top: 495px;
		left: 20px;
	}

	#score-reset-button
	{
		margin-left: 0;
		top: 495px;
		right: 20px;
		left: auto;
	}

	#score-cowbell-display-container
	{
		top: 490px;
		left: auto;
		right: 25px;
		margin-left: 0px;
	}
	#score-cowbell-display-container .cowbell-icon
	{
		position: absolute;
		right: 0px;
	}

	#stats-panel
	{
		top: 130px;
	}

	#comic-intro
	{
		background: url("../media/images/story/comic-intro-mobile.png") no-repeat center;
		width: 400px;
		height: 600px;
	}

	#comic-intro-container .close-story-button
	{
		display: none;
	}

	.peanut-money
	{
		position: absolute;
		top: 148px;
		left: 215px;

		width: 33px;
		height: 50px;
	}

	.peanut-money.penny
	{
		position: absolute;
		top: 141px;
		left: 199px;

		width: 64px;
		height: 64px;
	}

	.pickle-money
	{
		position: absolute;
		top: 70px;
		left: 298px;

		width: 64px;
		height: 64px;
	}
}

/* --- STYLING FOR GAME CONTENT ENDS HERE -------------------------------------------------------------- */