@charset "utf-8";

html, body{
  min-height: 100%;
}
/* CSS Document */
/* Background pattern from subtlepatterns.com */
#worldFrame{
	width: 2443px; 
    height: 1080px;
    background-image:url(../Assets/room/wolfRoom/background.png);
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 100;
	transform: scale(0,0);
}

.innerworld{
	width: 80px;
	height: 45px;
	left: 10px;
	top: 17px;
	position: relative;
	background: #0C0;
}

/**************/
/*  In Scene  */
/**************/
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
  z-index: 2000;
  display: none;
  overflow: hidden;
}

.overlayWolfHands{
	position: absolute;
	top: 300px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-image:url(../Assets/room/wolfRoom/overlay-WolfHands.png);
	background-size: cover;
	z-index: 11;
	pointer-events:none;
}
.overlayWolfThumbL {
	position: absolute;
	top: 560px;
	left: 160px;
	width: 248px;
	height: 677px;
	background-image: url(../Assets/room/wolfRoom/wolfThumbLeft.png);
	background-size: cover;
	z-index: 2003;
	pointer-events:none;
}
.overlayWolfThumbR {
	position: absolute;
	top: 570px;
	left: 2000px;
	width: 290px;
	height: 656px;
	background-image: url(../Assets/room/wolfRoom/wolfThumbRight.png);
	background-size: cover;
	z-index: 2003;
	pointer-events:none;
}

.overlayFrame {
	width: 2000px;
	height: 1000px;
	line-height: 200px;
	position: absolute;
	top: 40px;
	left: 221px;
	/* margin-top: -450px; */
	/* margin-left: -525px; */
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 5px;
	text-align: center;
	z-index: 2001;
}
.overlayBody {
	width: 1900px;
	height: 900px;
	margin-top: 50px;
	margin-left: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 2002;
}

.albumWrapper {
	width: 1900px;
	height: 900px;
	margin-bottom: 50px;
	cursor: pointer;
}

.albumFront{
	position: absolute;
	width: 900px;
	height: 900px;
}

.albumBack{
	position: absolute;
	width: 900px;
	height: 900px;
}

.albumFrame {
	position: relative;
	float: left;
	width: 900px;
	height: 900px;
	background-size:cover;
}

.playerContainer{
	position: absolute;
	left: 866px;
	top: 350px;
	width: 500px;
	height: 42px;
	z-index: 474;
	display: none;
}

.playerShadow{
	position: absolute;
	left: 24px;
	top: 62px;
	width: 452px;
	height: 54px;
	background: url(../Assets/room/wolfRoom/Player-Shadow.png) no-repeat;
	z-index: 473;
	opacity: 0.5;
}

.records{
	position: absolute;
	left: 981px;
	top: 558px;
	width: 272px;
	height: 106px;
	background: url(../Assets/room/wolfRoom/records.png) no-repeat;
	cursor: pointer;
	z-index: 559;
}

.fadeIn{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-image:url(../Assets/basic/dark_exa.png);
	z-index: 1000;
}

.fadeLoading{
	z-index: 1001;
}

.chest{
position: absolute;
left: 6px;
top: 753px;
width: 349px;
height: 320px;
background: url(../Assets/room/wolfRoom/chest.png) no-repeat;
z-index: 500;
}

.alienEgg {
	position: absolute;
	left: 1307px;
	top: 755px;
	width: 200px;
	height: 207px;
	background: url(../Assets/room/wolfRoom/alienEgg.png) no-repeat;
	z-index: 487;
	cursor: pointer;
}

.alienWolfPos {
	position: absolute;
	left: 957px;
	top: 665px;
	width: 578px;
	height: 191px;
	background: url(/Assets/Campaigns/AlienSaga/alienWolfBR.png) no-repeat;
	z-index: 484;
	pointer-events: none;
}

.hidden-panel{
position: absolute;
left: 1515px;
top: 791px;
width: 91px;
height: 281px;
background: url(../Assets/room/wolfRoom/hidden-panel.png) no-repeat;
z-index: 495;
}

#b_closet{
position: absolute;
left: 775px;
top: 598px;
width: 378px;
height: 434px;
background: url(../Assets/room/wolfRoom/b_closet.png) no-repeat;
z-index: 562;
pointer-events: none;
}
.closet_animIdle {
	animation: closIdle 1s steps(1) infinite;
}
.closet_animActive {
	animation: closAction 0.3s steps(9) infinite;
}
@keyframes closIdle {
	0% { background-position: 0px 0px; }
	100%{ background-position: 0px 0px; }
}

@keyframes closAction {
	0% { background-position: 0px 0px; }
   100% { background-position: -3402px 0px; }
}

.jugs{
position: absolute;
left: 1097px;
top: 715px;
width: 204px;
height: 236px;
background: url(../Assets/room/wolfRoom/jugs.png) no-repeat;
z-index: 485;
}

.b_guest{
position: absolute;
left: 1306px;
top: 529px;
width: 271px;
height: 311px;
background: url(../Assets/room/wolfRoom/b_guest.png) no-repeat;
z-index: 480;
}

#b_activity{
position: absolute;
left: 665px;
top: 136px;
width: 248px;
height: 648px;
background: url(../Assets/room/wolfRoom/b_activity.png) no-repeat;
z-index: 561;
}

.activity_animIdle {
	animation: actIdle 1s steps(33) infinite;
}
.activity_animActive {
	animation: actAction 1s steps(22) infinite;
}
@keyframes actIdle {
	0% { background-position: 0px 0px; }
   100% { background-position: -8184px 0px; }
}

@keyframes actAction {
	0% { background-position: 0px -648px; }
   100% { background-position: -5456px -648px; }
}
.record-player{
position: absolute;
left: 992px;
top: 404px;
width: 236px;
height: 65px;
background: url(../Assets/room/wolfRoom/record-player.png) no-repeat;
z-index: 470;
cursor: pointer;
}

.record-shelf{
position: absolute;
left: 959px;
top: 452px;
width: 312px;
height: 228px;
background: url(../Assets/room/wolfRoom/record-shelf.png) no-repeat;
z-index: 465;
}

.right-speaker{
position: absolute;
left: 1230px;
top: 413px;
width: 220px;
height: 277px;
background: url(../Assets/room/wolfRoom/right-speaker.png) no-repeat;
z-index: 460;
cursor: pointer;
}

.left-speaker{
position: absolute;
left: 782px;
top: 413px;
width: 220px;
height: 277px;
background: url(../Assets/room/wolfRoom/left-speaker.png) no-repeat;
z-index: 455;
cursor: pointer;
}

.Fanart-Shrine{
position: absolute;
left: 2094px;
top: 508px;
width: 119px;
height: 212px;
background: url(../Assets/room/wolfRoom/Fanart-Shrine.png) no-repeat;
z-index: 452;
}

.Bedside-table{
position: absolute;
left: 2054px;
top: 671px;
width: 141px;
height: 185px;
background: url(../Assets/room/wolfRoom/Bedside-table.png) no-repeat;
z-index: 450;
cursor: pointer;
}

#b_bed{
position: absolute;
left: 1564px;
top: 288px;
width: 340px;
height: 357px;
background: url(../Assets/room/wolfRoom/b_bed.png) no-repeat;
z-index: 445;
}

.bed_animIdle {
	animation: bedAnim 1s steps(30) infinite;
}
.bed_animActive {
	animation: bedActive 2s steps(42) infinite;
}
@keyframes bedAnim {
	0% { background-position: 0px 0px; }
   100% { background-position: -10200px 0px; }
}

@keyframes bedActive {
	0% { background-position: 0px -357px; }
   100% { background-position: -14280px -357px; }
}
.bed{
position: absolute;
left: 1506px;
top: 505px;
width: 640px;
height: 304px;
background: url(../Assets/room/wolfRoom/Bed.png) no-repeat;
z-index: 440;
}

.number{
position: absolute;
left: 1001px;
top: 334px;
width: 14px;
height: 18px;
background: url(../Assets/room/wolfRoom/number.png) no-repeat;
z-index: 436;
}

.poster{
position: absolute;
left: 987px;
top: 30px;
width: 271px;
height: 321px;
background: url(../Assets/room/wolfRoom/poster.png) no-repeat;
z-index: 435;
}

.scene-window{
position: absolute;
left: 1956px;
top: 0px;
width: 230px;
height: 145px;
background: url(../Assets/room/wolfRoom/scene-window.png) no-repeat;
z-index: 430;
}

.Icon{
position: absolute;
left: 441px;
top: 664px;
width: 215px;
height: 87px;
background: url(../Assets/room/wolfRoom/Icon.png) no-repeat;
z-index: 425;
}

.door{
position: absolute;
left: 350px;
top: 61px;
width: 143px;
height: 693px;
background: url(../Assets/room/wolfRoom/door.png) no-repeat;
z-index: 420;
}

.sm2-bar-ui{
	-webkit-box-shadow: 0px 25px 59px -30px rgba(0,0,0,1);
	-moz-box-shadow: 0px 25px 59px -30px rgba(0,0,0,1);
	box-shadow: 0px 25px 59px -15px rgba(0,0,0,1);
}


/*FLOWER SYSTEM STYLING*/

.flowerPot {
	position: absolute;
	width: 382px;
	height: 70px;
	top: 160px;
	left: 1500px;
	background-image:url(../Assets/room/wolfRoom/flowerbed.png);
	z-index: 415;
}

.flower {
	position: absolute;
	width: 47px;
	height: 71px;
	top: 100px;
	left: 1540px;
	z-index: 416;
	cursor: pointer;
}

#flower2{
	left: 1660px;
}

#flower3{
	left: 1780px;
}

.fS0{
	background-image:url(../Assets/room/wolfRoom/flowerS0.png);
}

.fS1{
	background-image:url(../Assets/room/wolfRoom/flowerS1.png);
}

.fS2{
	background-image:url(../Assets/room/wolfRoom/flowerS2.png);
}

.fS3{
	background-image:url(../Assets/room/wolfRoom/flowerS3.png);
}

.fS4{
	background-image:url(../Assets/room/wolfRoom/flowerS4.png);
}

.fS5{
	background-image:url(../Assets/room/wolfRoom/flowerS5.png);
}

.fS6{
	background-image:url(../Assets/room/wolfRoom/flowerS6.png);
}

.fS7{
	background-image:url(../Assets/room/wolfRoom/flowerS7.png);
}