@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);

body {
	font-family: Arial, sans-serif;
}

.stage {
	margin: auto;
	margin-top: 100px;
	position: relative;
	border: 1px solid black;
	width: 1000px;
	height: 500px;
	overflow: hidden;

}

.top {
	z-index: 100;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hide {
	display: none;
}

.tiny {
	width: 0px;
	height: 0px;
	opacity: 0;
}

a {
	text-decoration: none;
}

body {
	background-color: lightblue;
}

.prop {
	position: absolute;
}

.flipped {
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
}

#textBox {

	border: 2.5px solid black;
	left: 35px;
	bottom: 0px;
	width: 900px;
	padding: 10px;
	margin: auto;
	margin-top: 450px;
	text-align: center;
	background-color: white;
	z-index: 100;
	margin-bottom: 10px;
	cursor: pointer;
}

#puzzle {
	cursor:move;
	z-index: 20;
}

#speaker,#textOutput {
	padding: 0;
	margin: 0;
	display: inline;
}

#speaker {
	text-transform: capitalize;
	font-weight: bold;
}

#textBox:hover {
	background-color: lightgrey;
}

#helpBox {
	width: 480px;
	padding: 10px;
	background-color: white;
	border: 1px solid black;
	left: 249px;
	top: 80px;
	z-index: 1000;
	text-align: center;
}

/*-------index.html----------------*/
#index {
	background-image: url("backgrounds/skybackground.jpg");
	text-align: center;
}

#index img {
	margin-top: 80px;
}

#index h3 {
	font-size: 200%;
	font-family: Architects Daughter;
}

#control {
	top: 350px;
	left: 10px;
}

.btn {
	font-size: 100%;
	background: #5daee3;
  background-image: -webkit-linear-gradient(top, #5daee3, #2980b9);
  background-image: -moz-linear-gradient(top, #5daee3, #2980b9);
  background-image: -ms-linear-gradient(top, #5daee3, #2980b9);
  background-image: -o-linear-gradient(top, #5daee3, #2980b9);
  background-image: linear-gradient(to bottom, #5daee3, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 3px #050005;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
	width: 110px;
	text-align: center;
	margin: auto;
	cursor: pointer;
	margin-top: 15px;
}

.btn:hover {
	background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}


/*--------page1.html-------------*/
#outsidehome {
	background-image: url("backgrounds/homeoutside.jpg");
	background-size: cover;
}


/*--------page2.html-------------*/
#livingRoom {
	background-image: url("backgrounds/livingroom.png");
	background-position: center;
	background-repeat: no-repeat;
}



/*--------page3.html-------------*/

#kitchen {
	background-image: url("backgrounds/kitchen.jpg");
	background-size: cover;
}

#bdayCard {
	left: 450px;
	top: 250px;
}



/*--------hubworld.html-------------*/
#map {
	background-image: url("backgrounds/springfieldmaplarge.jpg");
	background-size: cover;
}


/*--------outsideMoes.html-------------*/
#outsideMoes {
	background-image: url("backgrounds/moesoutside.png");
	background-size: cover;
}


/*--------insideMoes.html-------------*/
#insideMoes {
	background-image: url("backgrounds/moesInside.jpg");
	background-size: cover;
}

#money {
	cursor:move;
}

#gameTimer {
	width: 200px;
	height: 30px;
	border: 4px solid black;
	border-radius: 5px;
	right: 10px;
	top: 10px;
	background-color: grey;
}

#innerBar {
	background-color: red;
	width: 200px;
	height: 30px;
}

#score {
	top: 5px;
	left: 10px;
	color: white;
	font-size: 200%;
	margin: 0px;
	text-align: center;
}

.beers {
	cursor: crosshair;
	user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


/*--------outsideApus.html-------------*/
#outsideApus {
	background-image: url("backgrounds/kwikemartoutside.PNG");
	background-position: center;
	background-size: cover;
}


/*--------insideApus.html-------------*/
#insideApus {
	background-image: url("backgrounds/insideApus3.jpg");
}

#shelf {
	background-image: url("props/woodshelf.png");
	width: 835px;
	height:441px;
	border: 3px solid black;
	background-size: cover;
}

.row {
	width: 835px;
	text-align: center;
	margin-bottom: 20px;
}

#shelf .row img{
	margin-left: 40px;
	margin-right: 40px;
}

.item {
	bottom: 0;
	right: 0;
	cursor:move;
}

#p1 {
	left: 0px;
	top:0px;
}
#p2 {
	left: 300px;
	top: 300px;
}
#p3 {
	left: 700px;
	top:70px;
}
#p4 {
	left: 250px;
	top:100px;
}
#p5 {
	left: 0px;
	top:300px;
}

#mop {
	bottom: 0px;
	right: 0px;
	z-index: 10;
	cursor:move;
}

#bucket {
	bottom: 0px;
	right: 0px;
}



/*--------outsideSchool.html-------------*/
#outSideSchool {
	background-image: url("backgrounds/schooloutside.png");
	background-position: center;
	background-size: cover;
}

/*--------insideSchool.html-------------*/
#insideSchool {
	background-image: url("backgrounds/schoolInside2.png");
	background-position: center;
	background-size: cover;
}

#gameBox {
	height: 300px;
	width: 300px;
	border: 1px solid black;
	margin-left: 350px;
	margin-top: 20px;
}

.gameRow {
	height: 100px;
	width: 300px;
	background-color: blue;

}

.gameCol {
	height: 8px;
	padding-top: 45px;
	padding-bottom: 45px;
	width: 98px;
	background: white;
	float: left;
	color: black;
	text-align: center;
	border: 1px solid black;

}


/*--------outsideBowling.html-------------*/
#outsideBowling {
	background-image: url("backgrounds/bowlingalleyoutside.jpg");
	background-size: cover;
}


/*--------insideBowling.html-------------*/
#insideBowling {
	background-image: url("backgrounds/bowlingalleyinside.jpg")
}



/*--------bowlingGame.html-------------*/
#bowlinglane {
	background-image: url("backgrounds/lanessmall.jpg");

}

/*--------backHome.html-------------*/
#outsideNeds {
	background-image: url("backgrounds/backHome.jpg");
	background-size: cover;
}

/*--------backHome1.html-------------*/

#backHome {
	background-color: white;
}

#banner {
	z-index: 1;
}

#homer {
	z-index: 10;
}

.puzzleCol {
	background-color: white;
	height: 100%;
	float: left;
	width: 25%;
	outline:1px solid black;
}

.puzzleRow {
	height: 25%;
	width: 100%;
}

.puzzlePiece {
	z-index: 100;
	top: 0;
	left: 0;
	width: 25%;
	height: 25%;
	cursor: move;
}


/*--------hubworld.html-------------*/
#map img {
	border: 5px solid black;
	border-radius: 70%;
}

#map img:hover {
	border-color: white;
}


#homeMapIcon {
	left: 450px;
	top: 50px;
}

#moesMapIcon {
	left: 140px;
	top: 70px;
}

#kwikemartMapIcon {
	top: 250px;
	left: 50px;
}

#bowlingalleyMapIcon {
	left: 700px;
	top: 230px;
}

#schoolMapIcon {
	left: 330px;
	top: 260px;
}

#tv {
	background-color: pink;
	background-repeat: no-repeat;
}

#theTv {
	left: 286px;
	z-index: 20;
}

#tvBackground {
	height: 300px;
	width: 390px;
	left: 288px;
	top: 150px;
	background-color: black;
	text-align: center;
}

#tvText {
	font-size: 170%;
	color: yellow;
	margin-top: 125px;
	font-family: Architects Daughter;
	margin-left: 40px;
	margin-right: 40px;
}

#vid {
	width: 400px;
	height: 300px;
	top: 150px;
	left: 288px;
}



.animated {
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes wobble {
	0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.wobble {
	-webkit-animation-name: wobble;
	animation-name: wobble;
}

p#stuck {
	width: 1000px;
	margin: auto;
	margin-top: 10px;
}

#puzzleHelp {
	width: 1000px;
	margin: auto;
	margin-top: 10px;

}

#puzzleHelp p {
	margin-top: 0px;
	margin-bottom: 4px;
}


#stuck:hover,#stuck2:hover {
	color: white;
	cursor: pointer;
}


.rotate {
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }