/* DEEJ STYLES */

/* global styles */
html {
		font-size: 1em;
	}

body {
	background-color: #60c900;
	font-family: monospace;
}

#wrapper {
	position: relative;
	width: 1100px;
	height: 750px;
	margin: 0 auto;
	background-image: url(../images/room.png);
	background-size: auto 780px;
	background-position: center;
}

.site-id a{
	position: absolute;
	bottom: 50px;
	left: 300px;
	display: block;
	width: 300px;
	height: 134px;
	background-image: url(../images/site-id.png);
	background-size: 300px;
}

/* homepage layout */

.home span {
	opacity: 0;
}

.desk {
	position: absolute;
	top: 94px;
	left: 434px;
	display: block;
	height: 170px;
	width: 170px;
	z-index: 1;
	background-image: url(../images/desk.png);
	background-size: 170px;
}

.rug {
	position: absolute;
	top: 248px;
	right: 302px;
	display: block;
	height: 70px;
	width: 170px;
	background-image: url(../images/rug.png);
	background-size: 170px;
	
}
.homepage-interaction ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.homepage-interaction a {
	display: block;
	position: absolute;
}

.homepage-interaction a:hover {
	opacity: .5;
}

.homepage-interaction .lore a {
	top: 62px;
	left: 210px;
	height: 220px;
	width: 220px;
	background-image: url(../images/dresser.png);
	background-size: 220px;
}

.homepage-interaction .food a {
	top: 180px;
	left: 459px;
	height: 56px;
	width: 53px;
	z-index: 3;
	background-image: url(../images/bowl.png);
	background-size: 53px;
}

.homepage-interaction .catnip a {
	top: 176px;
	right: 519px;
	height: 50px;
	width: 37px;
	z-index: 2;
	background-image: url(../images/catnip.png);
	background-size: 37px;
}

.homepage-interaction .box a {
	bottom: 46px;
	right: 250px;
	height: 180px;
	width: 180px;
	background-image: url(../images/box.png);
	background-size: 180px;
}

iframe {
	position: absolute;
	border: 0;
}

iframe.door  {
	top: 52px;
	right: 260px;
	height: 300px;
	width: 250px;
	z-index: 2
}

iframe.deej {
	top: 310px;
	left: 460px;
	height: 240px;
	width: 230px;
}

iframe.hamper {
	top: 310px;
	left: 270px;
	height: 180px;
	width: 170px;
}
/*lore page styles */
.lore span {
	opacity: 0;
}
.lore .text {
	position: absolute;
	bottom: 204px;
	right: 298px;
	width: 314px;
	padding: 10px 20px;
	border: 5px solid black;
	background-color: white;
}
.lore .image {
	position: absolute;
	width: 250px;
	bottom: 204px;
	left: 172px;
}
.lore .dresser {
	position: absolute;
	top: 49px;
	left: 210px;
	height: 220px;
	width: 220px;
	background-image: url(../pages/images/dresser-open.png);
	background-size: 220px;
}

/*food and catnip page styles */
.food span, .catnip span {
	opacity: 0;
}
.food .text, .catnip .text {
	position: absolute;
	width: 490px;
	top: 300px;
	left: 270px;
	padding: 10px 20px;
	border: 5px solid black;
	background-color: white;
}
.food .image, .catnip .image {
	position: absolute;
	top: 70px;
	left: 200px;
	height: 220px;
}
.food .food, .catnip .catnip {
	position: absolute;
	top: 94px;
	left: 434px;
	height: 170px;
	width: 170px;
	background-image: url(../pages/images/full-desk.png);
	background-size: 170px;
}
/* box page styles */

.box span {
	opacity: 0;
}

.box .text {
	position: absolute;
	width: 450px;
	top: 140px;
	left: 280px;
	padding: 10px 20px;
	border: 5px solid black;
	background-color: white;
}

.box .box {
	position: absolute;
	bottom: 34px;
	right: 250px;
	height: 180px;
	width: 180px;
	background-image: url(../pages/images/cat-box.png);
	background-size: 180px;
}

.word-link {
	text-decoration: none;
	color: #447a89;
	font-weight: bold;
	font-size: 1.2em;
	
}

.word-link:hover {
	color: #60c900;
	font-size: 2em;
}