body {
	background-color: #2E2E2E; /*#7EC1D7;*/
}

header {
	height: 50px;
}

h1 { 
	color: white;
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;
}

#logoTop{
	width: 300px;
	height: auto;
	margin: auto;
}

a#exitButton {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 30px;
	height: 35px;
	padding: 8px;
	background-color: white;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	font-family: 'Josefin Sans', sans-serif;
	color: #C4002D;
	vertical-align: middle;
	font-size: 26px;
}

#soundEffectControl{
	position: absolute;
	top: 0px;
	left: 100px;
	width: 30px;
	height: 35px;
	padding: 8px;
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}

#soundEffectControl img{
	height: 23px;
	width: auto;
}

#musicControl {
	position: absolute;
	top: 0px;
	left: 50px;
	width: 30px;
	height: 35px;
	padding: 8px;
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}

#musicControl img{
	height: 24px;
	width: auto;
	position: absolute;
	left: 10px;
}

/*-------------------------index.html styling------------------------------------*/

#container {
	width: 760px;
	height: 480px;
	position: relative;
	margin: auto;
	overflow: hidden;
	border-radius: 0px 10px 10px 10px;
	user-select: none;
	padding-top: 35px;
}

#indexStage {
	width: 760px;
	height: 480px;
	position:absolute;
	background-color: black /*#0D2D43*/;
	overflow: hidden;
	margin: auto;
	border-radius: 0px 10px 10px 10px;
}

#indexStageLogo{
	overflow: hidden;
	position: absolute;
	margin: auto;
	width: 600px;
	height: auto;
	left: 100px;
	top: 100px;
	background-position: center;
}

#startButton {
	position: absolute;
	bottom: 100px;
	left: 360px;
	height: 40px;
	width: 60px;
	background-color: white;
	border-radius: 20px;
	text-align: center;
}

#startButton a, #startButton a:active, #startButton a:visited {
	position: absolute;
	text-decoration: none;
	color: #279C33;
	font-family: Josefin Sans;
	text-transform: lowercase;
	top: 9px;
	right: 0px;
	height: 40px;
	width: 60px;
}

#startButton a:hover {
	color: #F9A12E;
	text-decoration: none;
	height: 40px;
	width: 60px;
}

/*-------------------------- page2.html Styling ------------------------------------------*/

#stage {
	width: 760px;
	height: 400px;
	position: absolute;
	background-color: #7EC1D7;
	overflow: hidden;
	border-radius: 0px 10px 10px 10px;
/*	margin-bottom: 0px;*/
}


#storyStageImage {
	width: 760px;
	height: auto;
	position: absolute;
	top: 0px;
	left: 0px;
}

.storyStageImageLayer {
	width: 760px;
	height: auto;
	position: absolute;
	top: 0px;
	left: 0px;
}


#textbox {
	width: 760px;
	height: 100px;
	background-color: black;
	position: absolute;
	bottom: 0px;
	color: white;
	border-radius: 0px 0px 15px 15px;
	z-index: 999;
}

#textboxProfile {
	width: auto;
	height: 60px;
	position: absolute;
	left: 10px;
	bottom: 15px;
}

#textboxProfile img {
	position: absolute;
	top: 15px;
	left: 10px;
}


/*---used to be 650px width with inventory---*/
/*---- stage with inventory dimensions -----*/


.gameStageImage {
	width: 650px;
	height: 400px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#inventory {
	width: 110px;
	height: 400px;
	position: absolute;
	background-color: #136486;
	border-radius: 0px 10px 0px 0px;
	right: 0px;
	top: 35px;
	margin: 0;

}


#inventory p {
	text-align: center;
	font-family: Josefin Sans;
	color: white;
	z-index: 999;
}


/*------- stage and game stage elements -----*/

#text {
	width: 600px;
	height: 80px;
	position: absolute;
	left: 80px;
	top: 15px;
	user-select: none;
}

.textDesign {
	font-family: Josefin Sans;
	color: white;
	font-size: 16px;
}

.textDesignCentre {
	font-family: Josefin Sans;
	color: white;
	font-size: 16px;
	text-align: center;
}

#textboxNameContainer {
	position: absolute;
	bottom: 100px;
	width: 130px;
	height: 30px;
	background-color: black;
	z-index: 99;
}

#textboxNameContainer p {
	left: 60px;
	font-size: 10px;
	text-transform: uppercase;
	text-align: center;
}

a.buttonNext {
	display: none;
	background-color: green;
	cursor: pointer;
	font-family: Josefin Sans;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	color: white;
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 18px;
	padding-top: 9px;
	box-sizing: border-box;
	height: 35px;
	width: 50px;
	border-radius: 10px;
	z-index: 20000;
}

a.buttonNext:focus {
    outline: none;
}
a.buttonNext:active {
    transform: scale(0.90);
}

button {
	position: absolute;
	bottom: 10px;
	right: 10px;
    height: 35px;
	width: 50px;
	border-radius: 10px;
	padding: 8px;
    margin: 0;
    text-decoration: none;
    background: white;
    color: black;
    font-family: sans-serif;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    border-color: 1px solid #888888;
}

button:focus {
    outline: none;
}
button:active {
    transform: scale(0.90);
}

/*----------------BoxPuzzle--------------------------*/


#puzzleBoxContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0;
	margin: 0;
	z-index: 9;
}

.puzzleBox img, li {
	width: auto;
	height: 330px;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	top: 10px;
	left: 40px;
	z-index: 10;
}

.draggedItem {
	z-index: 999;
	background-color: green;
	cursor: move;
}

/*----------------Page 4--------------------------*/

#characterTalk {
	position: absolute;
	bottom: 45px;
	left: 270px;
	z-index: 4;
	height: 200px;
	width: auto;
}

#characterTalk2 {
	position: absolute;
	bottom: 45px;
	left: 270px;
	z-index: 4;
	height: 200px;
	width: auto;
}

#youngElderAngry {
	position: absolute;
	bottom: 50px;
	left: 270px;
	z-index: 100;
	height: 200px;
	width: auto;
}

.characterMove {
	animation: bounce 0.5s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

.characterMove:hover {
	animation: shake 0.3s cubic-bezier(.36,.07,.19,.97);
}

.shake {
	animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) infinite;
	animation-direction: alternate;
}

.answerBox {
 	position: absolute;
 	top: 20%;
 	left: 30%;
 	height: 150px;
 	width: 300px;
 	border-radius: 10px;
 	background-color: black;
  	text-align: center;
  	text-decoration: none;
 	z-index: 101;
}

a.answerBoxButton, a:active.answerBoxButton, a:hover.answerBoxButton, a:visited.answerBoxButton {
	color: white;
	text-decoration: none;
	position: absolute;
	height: 30px;
	width: 50px;
	border-radius: 10px;
	text-align: center;
	padding-top: 8px;
	box-sizing: border-box;
}

#answerBoxYes {
	background-color: green;
	position: absolute;
	left: 50px;
	bottom: 30px;
}


#answerBoxNo {
	background-color: red;
	position: absolute;
	right: 50px;
	bottom: 30px;
}

#endGame{
	height: 760px;
	width: 800px;
	background-color: black;
	color: white;
	z-index: 1000;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	padding: 200px;
	box-sizing: border-box;
}


/* --------- CSS animation -------------------------- */

@keyframes bounce {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(0, 5px, 0); }
}

@keyframes shake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
}


/* --------- Page 5 -------------------------- */


#cookieboxAppear {
	position: absolute;
	top: 50px;
	left: 150px;
	height: 300px;
	width: auto;
	z-index: 999;
}

#dragCookieBox {
	height: 50px;
	width: auto;
	position: absolute;
	left: 215px;
	top: 310px;
	transform: rotate(340deg);
	z-index: 3;
}

#dragSyrup {
	height: 30px;
	width: auto;
	position: absolute;
	left: 70px;
	bottom: 75px;
	transform: rotate(30deg);
	z-index: 3;
}

.inventoryItems {
	height: 100px;
	width: 110px;
	position: relative;
	z-index: 3;
}

#invCookieBox {
	height: 50px;
	width: auto;
	z-index: 3;
	padding: 20px;
	display: none;
}

#invSyrup {
	height: 50px;
	width: auto;
	position: relative;
	z-index: 3;
	padding: 10px 40px 0px 40px;
	display: none;
}

#invStolenIngredients {
	height: 70px;
	width: auto;
	position: relative;
	padding: 15px;
	display: none;
}


.blink{
    animation: blink 1000ms infinite alternate;
}

@keyframes blink {
    from { opacity:1; }
    to { opacity:0; }
};

.invMove{
	animation: bounce 3s;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
}

#logImg {
	position: absolute;
	left: 200px;
	bottom: 25px;
	z-index: 3;
	height: 40px;
}

#rockImg {
	position: absolute;
	left: 55px;
	bottom: 65px;
	z-index: 3;
	height: 25px;
}


/* --------- Page 7 -------------------------- */


#slideTileGame {
	width: 302px;
	height: 302px;
	box-sizing: border-box;
	border: 1px solid black;
	margin: auto;
	position: absolute;
	top: 30px;
	left: 220px;
}

.item{
	height: 100px;
	width: 100px;
	position: absolute;
	color:rgba(0, 0, 0, 0);
	background: url(images/slideGameLock.png);
	background-size: 300px 300px;
}

#item1 {	
	background-position: left top;
}

#item2 {
	background-position: center top;
}

#item3 {
	background-position: right top;
}

#item4 {
	background-position: left center;
}

#item5 {
	background-position: center center;
}

#item6 {
	background-position: right center;
}

#item7 {
	background-position: left bottom;
}

#item8 {
	background-position: center bottom;
}

/*------------------------------------------- Ingredients ---------------------------------------*/

.stolenIngredientsBulk {
	height: 100px;
	width: auto;
	z-index: 4;
}

#droppableLog {
	z-index: 2;
	height: 120px;
	width: auto;
	position: absolute;
	bottom: 60px;
	left: 80px;
}

.gingerKids {
	z-index: 3;
	position: absolute;
	bottom: 30px;
	height: 100px;
	width: auto;
}

#gingerKid1 {
	left: 200px;
}

#gingerKid2 {
	left: 400px;
}

#elderGinger {
	position: absolute;
	height: 200px;
	z-index: 1;
	bottom: 100px;
	left: 200px;
}

#player {
	height: 32px;
	width: auto;
	position: absolute;
	z-index: 1002;
	left: 0px;
	top: 150px;
}

header {
	width: 400px;
	height: 70px;
	margin: auto;
	text-align: center;
}


#maze {
	z-index: 1000;
	width: 100%;
	height: 88%;
	position: absolute;
	bottom: 20px;
	margin: auto;
}

#mazeExit {
	position: absolute;
	z-index: 1000;
	right: 0px;
	bottom: 175px;
	background-color: white;
	opacity: 0.1;
	height: 55px;
	width: 13px;
}

#mazeExitBlock {
	position: absolute;
	z-index: 1001;
	right: 0px;
	bottom: 175px;
	background-color: #191724;
	opacity: 1;
	height: 55px;
	width: 13px;
}

#mazeStats {
	position: absolute;
	width: 100%;
	height: 30px;
	background-color: black;
	top: 0px;
	color: white;
}

#cinnamonCollected {
	padding-top: 7px;
	text-align: center;
}

.cinnamonStick {
	position: absolute;
	z-index: 1001;
	height: 30px;
	width: auto;
}

#cinnamonStick1 {
	bottom: 40px;
	left: 30px;
}

#cinnamonStick2 {
	bottom: 40px;
	left: 515px;
}

#cinnamonStick3 {
	bottom: 200px;
	left: 585px;
}

#cinnamonStick4 {
	top: 50px;
	left: 700px;
}
#cinnamonStick5 {
	bottom: 193px;
	left: 380px;
}
#cinnamonStick6 {
	top: 60px;
	left: 160px;
}
#cinnamonStick7 {
	bottom: 255px;
	left: 435px;
}

#cinnamonStick8 {
	bottom: 40px;
	left: 235px;
}

#cinnamonStick9 {
	bottom: 190px;
	left: 175px;
}

#cinnamonStick10 {
	top: 50px;
	left: 560px;
}
/*------ Page 12 -----*/

#angryChef {
	z-index: 3;
	position: absolute;
	bottom: 20px;
	height: 200px;
	width: auto;
}
#angryChef2 {
	z-index: 3;
	position: absolute;
	bottom: 20px;
	height: 200px;
	width: auto;
}
#lifeBarContainer{
	position: absolute; 
	top: 10px;
	right: 40px;

}

.lifeBarGen {
	height: 40px;
	width: all;
	z-index: 4;
}

#lifeBar1 {
	position: relative;
}

#lifeBar2 {
	position: relative;

}

#lifeBar3 {
	position: relative;
}
#lifeBar4 {
	position: relative;
}

#lifeBar5 {
	position: relative;
}
#timer {
	position: absolute;
	width: 200px;
	height: 30px;
	border: 2px solid #000;
	top: 10px;
	left: 10px;
	z-index: 999;
}
#timerInner {
	width: 200px;
	height: 30px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 998;
	background-color: #45de8a;
}
#timerInnerHitChef {
	width: 200px;
	height: 30px;
	position: absolute;
	top: 30px;
	left: 0px;
	z-index: 998;
	background-color: #45de8a;
}
#bakingChef {
	height: 300px;
	position: absolute;
	z-index: 3;
	bottom: 20px;
}

#bakingTray {
	width: 400px;
	position: absolute;
	right: 150px;
	z-index: 3;
}

#mittenHands{
	width: 430px;
	position: absolute;
	right: 120px;
	z-index: 4;
}

#bottle {
	position: absolute;
	left: 57%;
	top: -40px;
	height: 140px;
 	margin-left: -100px;
	z-index: 6;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes drop {
  0% {
    bottom: 0px;
    opacity: 1;
  }
  
  80% {
    opacity: 1;
  }
  
  100% {
    opacity: 1;
    bottom: -200px;
  }
}



 #droplet {
  width: 21px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  left: 50.7%;
  top: -200px;
  margin: auto;
  background-color: #FEBE3F;
  z-index: 5;
  animation: drop 1.5s cubic-bezier(1,.19,.66,.12) .5s infinite;
}



	/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;*/
/*@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}*/

#kitchenDoor {
z-index: 3;
width: 760px;
height: auto;
position: absolute;
}

#mGingerBoy {
	position: absolute;
	height: 80px;
	bottom: 146px;
	left: 250px;
}

#mGingerGirl {
	position: absolute;
	height: 80px;
	bottom: 146px;
	left: 320px;
}

#miniGingerGirlScared {
	position: absolute;
	height: 80px;
	bottom: 146px;
	left: 320px;	
}

.shake{
	animation: shake 0.3s cubic-bezier(.36,.07,.19,.97);
}

.closeMouth {
	height: 70px;
	width: 90px;
	z-index: 5;
	position: absolute;
	bottom: 100px;
	left: 360px;
	background-color: #FBC4AC;
}

#kitchenMo {
	height: 330px;
	width: auto;
	z-index: 6;
	position: absolute;
	bottom: 40px;
	left: 50px;
}

#kitchenChefArm {
	position: absolute;
	height: 200px;
	bottom: -500px;
	left: 260px;
	z-index: 6;
}

/*------------------------------------page 14*/

.ninjaButtonDesign {
	border-radius: 50%;
	background-color: #00548B;
	position: absolute;
	height: 15px;
	width: 15px;
	z-index: 99;
}


#ninjaButton {
	bottom: 160px;
	left: 175px;
}

#ninjaButton2 {
	bottom: 140px;
	left: 175px;
}

.buttonTransform {
	scale: 2;
}


#gingergirlCrying {
	position: absolute;
	right: 190px;
	bottom: 35px;
	height: 140px;
}

#gingerboyNoButtons {
	position: absolute;
	right: 70px;
	z-index: 2;
	height: 50px;
	bottom: 148px;
	transform: scaleX(-1);
}

#gingergirlNoArm {
	position: absolute;
	right: 150px;
	bottom: 20px;
	z-index: 2;
	height: 50px;
}

#television {
	height: 156px;
	width: 252px;
	position: absolute;
	z-index: 5;
	left: 127px;
	top: 41px;
}
#timeLapse {
	height: 100%;
	width: 100%;
	background-color: black;
	position: absolute;
	z-index: 100;
	color: white;
}
#timeLapse p {
	text-align: center;
	padding: 200px 0px;
	font-family: 'Josefin Sans', sans-serif;
}

#timeLapse2 {
	height: 100%;
	width: 100%;
	background-color: black;
	position: absolute;
	z-index: 100;
	color: white;
	text-align: center;
	padding: 100px 0px;
	font-family: 'Josefin Sans', sans-serif;
}

.gingersInForest {
	position: absolute;
	height: 140px;
	width: auto;
	bottom: 20px;
}
#gingerNurse {
	left: -120px;
}
#drGinger {
	left: -120px;
}
#elderGingerCalled {
	left: -120px;
}
#logTable {
	position: absolute;
	height: 100px;
	left: 120px;
	bottom: 110px;
}
.historyObjects {
	z-index: 1;
	position: absolute;
	bottom: 200px;
}
#cookieBoxHistory {
	left: 200px;
	height: 50px;

}
#flourHistory {
	height: 50px;
	left: 340px;

}
#polaroidHistory {
	left: 480px;
	height: 50px;

}
#touchMeNot{
    position:absolute;
    height:90px;
    width: auto;
    z-index: 100;
    overflow: none;
}
#scoreboard {
	height: 50px;
	width: 100px;
	z-index: 200;
	position: absolute;
	bottom: 0px;
}
#ninjabreadMan {
	height: 100px;
	position: absolute;
	z-index: 3;
	bottom: 30px;
	left: 10px;
}
#doorClickable {
	height: 93px;
	width: 43px;
	background-color: black;
	position: absolute;
	right: 47px;
	bottom: 40px;
	opacity: 0;
	cursor: pointer;
}
#livingroomDoor {
	position: absolute;
	height: 240px;
	width: auto;
	right: 42px;
	bottom: 106px;
	z-index: 4;
}
#enterKitchenThroughVault {
	position: absolute;
	height: 240px;
	width: 142px;
	right: 42px;
	bottom: 106px;
	z-index: 3;
	background-color: black;
	opacity: 0.5;
}
#livingroomShelf {
	position: absolute;
	height: 200px;
	width: auto;
	right: 230px;
	bottom: 140px;
	z-index: 4;
}
#livingroomBooks {
	position: absolute;
	height: 25px;
	width: auto;
	right: 230px;
	bottom: 225px;
	z-index: 4;
}
#livingroomDrawerHandle {
	position: absolute;
	height: 20px;
	width: auto;
	left: 230px;
	bottom: 40px;
	z-index: 4;
}
#livingroomVault {
	position: absolute;
	height: 70px;
	width: auto;
	right: 75px;
	bottom: 230px;
	z-index: 4;
}
#livingroomKeyPad {
	position: absolute;
	height: 30px;
	width: auto;
	right: 95px;
	bottom: 180px;
	z-index: 4;
}
#keyPadCover {
	background-color: grey;
	opacity: 0.5;
	position: absolute;
	height: 40px;
	width: 40px;
	right: 90px;
	bottom: 175px;
	z-index: 4;
}
#keyPadLock {
	position: absolute;
	height: 40px;
	width: auto;
	right: 90px;
	bottom: 145px;
	z-index: 5;
}
#vaultHandleLock {
	position: absolute;
	height: 40px;
	width: 40px;
	right: 90px;
	bottom: 225px;
	z-index: 5;
}
#livingroomGlobe1 {
	position: absolute;
	height: 40px;
	width: auto;
	right: 360px;
	bottom: 159px;
	z-index: 4;
}
#livingroomGlobe2 {
	position: absolute;
	height: 25px;
	width: auto;
	right: 364px;
	bottom: 170px;
	z-index: 4;
	cursor: pointer;
}
#lasers {
	z-index: 6;
	position: absolute;
	height: 140%;
	width: 130%;
	bottom: -20px;
	left: -50px;
}
#laserStop {
	border-radius: 50%;
	background-color: red;
	width: 10px;
	height: 10px;
	position: absolute;
	left: 175px;
	bottom: 142px;
	cursor: pointer;
	z-index: 7;
}
.lightsOff {
  	filter: brightness(20%);
}
#drawerClick {
	height: 25px;
	width: 100px;
	position: absolute;
	left: 100px;
	bottom: 105px;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}
#drawerClick2 {
	height: 25px;
	width: 100px;
	position: absolute;
	left: 205px;
	bottom: 105px;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}
#key {
	position: absolute;
	z-index: 6;
	height: 30px;
	width: auto;
	bottom: 50px;
	left: 220px;
}
#keyPadType {
	background-color: grey;
	height: 300px;
	width: 300px;
	position: absolute;
	left: 230px;
	bottom: 50px;
	z-index: 10;
}
#keyPadScreen {
	height: 60px;
	width: 260px;
	position: absolute;
	left: 20px;
	top: 20px;
	background-color: black;
	color: white;
	font-size: 24px;
	box-sizing: border-box;
	padding-top: 20px;
	text-align: center;
	font-family: 'Josefin Sans', sans-serif;
}
#keyPadNumbers {
	height: 200px;
	width: 200px;
	z-index: 9;
	position: absolute;
	bottom: 10px;
	left: 45px;
}
.keyPadNumbers {
	cursor: pointer;
	opacity: 0;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	z-index: 10;
	background-color: blue;
	position: absolute;
}
#key1 {		
	left: 50px;
	bottom: 151px;
}
#key2 {
	left: 120px;
	bottom: 151px;
}
#key3 {
	left: 190px;
	bottom: 151px;
}
#key4 {
	left: 50px;
	bottom: 81px;
}
#key5 {
	left: 120px;
	bottom: 81px;
}
#key6 {
	left: 190px;
	bottom: 81px;
}
#key7 {
	left: 50px;
	bottom: 21px;
}
#key8 {
	left: 120px;
	bottom: 21px;
}
#key9 {
	left: 190px;
	bottom: 21px;
}
.spin {
	animation-name: spin;
	animation-duration: 5000ms;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear; 
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
#keyPadTypeExit{
	width: 760px;
	height: 400px;
	background-color: blue;
	opacity: 0.9;
	z-index: 9;
}
/*---------------------page 24----------------------*/
.fridge {
	position: absolute;
	height: 360px;
	width: auto;
	left: 130px;
	bottom: 0px;
	z-index: 2;
}
#kitchenCabinetClosed {
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 290px;
	height: 127px;
	width: auto;
}
#kitchenCabinetOpen {
	position: absolute;
	z-index: 2;
	top: -13px;
	left: 191px;
	height: 164px;
	width: auto;
}
.cabinetItem {
	position: absolute;
	z-index:3;
}
#flour1 {
	top: 70px;
	left: 300px;
	height: 50px;
	width: auto;
}
#flour2 {
	top: 70px;
	left: 350px;
	height: 50px;
	width: auto;
}
#flour3 {
	top: 70px;
	left: 400px;
	height: 50px;
	width: auto;
}
#flour4 {
	top: 70px;
	left: 450px;
	height: 50px;
	width: auto;
}
#sugar1 {
	top: 15px;
	left: 300px;
	height: 50px;
	width: auto;
}
#sugar2 {
	top: 15px;
	left: 350px;
	height: 50px;
	width: auto;
}
#sugar3 {
	top: 15px;
	left: 400px;
	height: 50px;
	width: auto;
}
#sugar4 {
	top: 15px;
	left: 450px;
	height: 50px;
	width: auto;
}
.fridgeItem {
	position: absolute;
	z-index:3;
}
#milk1{
	bottom: 71px;
	left: 280px;
	height: 50px;
	width: auto;
}
#milk2{
	bottom: 71px;
	left: 320px;
	height: 50px;
	width: auto;
}
#butter1{
	bottom: 137px;
	left: 270px;
	height: 50px;
	width: auto;
}
#butter2{
	bottom: 137px;
	left: 325px;
	height: 50px;
	width: auto;
}
#eggs1 {
	bottom: 146px;
	left: 183px;
	height: 50px;
	width: auto;
}
.inventoryItems2 {
	height: 50px;
	width: 55px;
	position: relative;
	z-index: 3;
	left: 30px;
}
#invFlour{
	height: 40px;
	width: auto;
	z-index: 3;
	padding: 5px;
	display: none;
}
#invSugar{
	height: 40px;
	width: auto;
	z-index: 3;
	padding: 5px;
	display: none;
}
#invEggs{
	height: 40px;
	width: auto;
	z-index: 3;
	padding: 5px;
	display: none;
}
#invButter{
	height: 40px;
	width: auto;
	z-index: 3;
	padding: 5px;
	display: none;
	overflow: hidden;
	max-width: 100%;
}
#invMilk{
	height: 40px;
	width: auto;
	z-index: 3;
	padding: 5px;
	display: none;
}
#invKSyrup{
	height: 40px;
	width: 40px;
	z-index: 3;
	padding: 5px;
	display: none;
}
.kitchenBenchItm {
	position: absolute;
	width: auto;
	bottom: 0px;
}
#kitchenBenchCups{
	height: 50px;
	left: 243px;
	z-index: 5;
}
#kitchenBenchSyrup{
	left: 279px;
	height: 50px;
	z-index: 4;
}
#kitchenBenchCM{
	height: 80px;
	left: 280px;
	z-index: 5;
}
#moveAcrossBench{
	position: absolute;
	bottom: 182px;
	width: 360px;
	height: 100px;
	right: 110px;
}

#playerKitchen {
	height: 50px;
	width: auto;
	position: absolute;
	z-index: 1002;
	left: 0px;
	top: 150px;
}

.enemy{
	height: 30px;
	width: auto;
}
#livesContainer{
	position: absolute;
	right: 20px;
	top: 23px;
	height: 50px;
	width: 50px;
	color: white;
	z-index: 1000;
}
#livesLeft{
	position: absolute;
	z-index: 1000;
	height: 20px;
	width: 20px;	
	right: 80px;
	top: 20px;
}
.blankGingerProfile2{
	left: 50px;
}
.smoke{

}
#smokeBig{
	position: absolute;
	height: 150px;
	width: auto;
	left: 100px;
	bottom: 0px;
	z-index: 10;
}
#smokeSmall{
	position: absolute;
	height: 100px;
	width: auto;
	left: 100px;
	bottom: 50px;
	z-index: 10;
}

#elderGingerEnd{
	position: absolute;
	height: 200px;
	right: 100px;
	top: 100px;
}
#dough{
	position: absolute;
	height: 90px;
	width: auto;
	left: 250px;
	bottom: 150px;
	z-index: 10;
}
#armTransplant{
	position: absolute;
	height: 50px;
	width: auto;
	left: 350px;
	bottom: 150px;
	z-index: 10;
	transform: rotate(0deg);
}
#icingBag{
	position: absolute;
	height: 80px;
	width: auto;
	left: 250px;
	bottom: 150px;
	z-index: 10;
}
#ninjabreadManEnd{
	position: absolute;
	left: 20px;
	height: 200px;
	bottom: 10px;
	width: auto;
}