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

@font-face {
        font-family: 'myAnimeFont';
        src: url(https://copy.com/HqKL0KBOgr0k4zmm/youmurdererbb_reg.otf);
}

@font-face {
        font-family: 'penta';
        src: url(https://copy.com/GTLCC7Hb0B7ChOBV/penta.ttf);
}

/***************************
TOPBAR AND WARNING
***************************/


#mal\_control\_strip{
top: -200px !important;
position: absolute;
}

#mal_cs_listinfo strong:nth-child(1) a {
  top: 35%;
  left: 85%;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #550000;
  font-family: myAnimeFont;
  font-size: 40px;
  opacity: .7;
  text-decoration: none !important;  
  transform: rotate(8deg);
  position: fixed;
  font-style: normal !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

#mal_cs_listinfo strong:nth-child(1) a:before{
  content: "no escape ";
  font-family: myAnimeFont;
  opacity: .95;
  text-decoration: none !important;  
  background-color: transparent;
  position: fixed;
  margin-top: -3%;
  width: 100%;
  text-align: left;
}

 #mal_cs_pic:before {
  top: 35%;
  left: 85%;
  width: 100%;
  text-align: left;
  color: #550000;
  font-family: myAnimeFont;
  font-size: 60px;
  transform: rotate(8deg);
  font-style: normal !important;
  z-index: 10 !important;
  pointer-events: none !important;
  content: "no escape ";
  font-family: myAnimeFont;
  opacity: .95;
  text-decoration: none !important;  
  background-color: transparent;
  position: fixed;
}


/***************************
LIST
***************************/


#list_surround{
background-color: transparent;
background-attachment:scroll;
position: absolute;
left: 0px;
right: 0px;
width: 600px;
top: 900px;
padding: 12px;
}

#list_surround{
margin: auto !important;
}

.table_header a{
  text-decoration: underline !important;
  color:white;
}

#list_surround, .td1 a, .td2 a{
  color:white;
  text-decoration: none !important;
  font-family: tahoma;
  font-size: 12px;
}

.td1, .td2, .table_header, .category_totals {
font-family: tahoma;
font-size: 12px;
}

.td1, .td2{
line-height: 18px;    
}

.category_totals {
text-align: center;
padding: 20px;
font-size: 11px;
}

#copyright{
font-size: 11px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}

#list_surround
{
background-color: rgba(0,0,0,.9);
border-radius: 5px;
animation-name: mist;
animation-duration: 20s;
animation-iteration-count: infinite;
}

@-moz-keyframes mist /* Firefox */
{
0% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}
50% {box-shadow: 0px 0px 20px 10px rgba(255,0,0,1);}
100% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}
}

@-webkit-keyframes mist /* Chrome */
{
0% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}
50% {box-shadow: 0px 0px 20px 10px rgba(255,0,0,1);}
100% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}
}

.header_title {
font-family: penta;
font-size: 45px;
text-align: center; 
margin-top: -50px;
} 

tr:hover [class^="td"] {
background-color: rgba(155, 0, 0, .7) !important;
box-shadow: 0px 0px 20px 10px rgba(155,0,0,1);
}

/***************************
LEFT DOOR
***************************/

#list_surround:before{
background-image: url(http://i.imgur.com/nbv53YS.jpg);
background-color: black;
background-position: right center;
background-size: contain;
position: fixed;
left: -100%;
right: 0;
top: 0;
width: 100%;
content: "";
height: 100%;
z-index: 0 !important;
animation-name: leftdoor;
animation-duration: 300s;
}

#list_surround:before{
margin: auto;
}

@-moz-keyframes leftdoor /* Firefox */
{
0% {left: -100%;}
1% {left: -100%;}
3% {left: -160%;}
95% {left: -160%;}
99% {left: -100%;}
}

@-webkit-keyframes leftdoor /* Safari and Chrome */
{
0% {left: -100%;}
1% {left: -100%;}
3% {left: -160%;}
95% {left: -160%;}
99% {left: -100%;}
}


/***************************
RIGHT DOOR
***************************/

#list_surround:after{
background-image: url(http://i.imgur.com/mTQNUo6.jpg);
background-position: left center;
background-size: contain;
background-color: black;
position: fixed;
left: 50%;
right: 0;
top: 0;
width: 100%;
content: "";
height: 100%;
z-index: 0 !important;
animation-name: rightdoor;
animation-duration: 300s;
}

#list_surround:after{
margin: auto;
}

@-moz-keyframes rightdoor /* Firefox */
{
0% {left: 50%;}
1% {left: 50%;}
3% {left: 80%;}
95% {left: 80%;}
99% {left: 50%;}
}

@-webkit-keyframes rightdoor /* Safari and Chrome */
{
0% {left: 50%;}
1% {left: 50%;}
3% {left: 80%;}
95% {left: 80%;}
99% {left: 50%;}
}

/***************************
LEFT WALL
***************************/

.status_selected{
background-color: transparent;
background-image: url(http://i.imgur.com/iC6p26P.png);
background-attachment: scroll;
background-position: right top;
z-index: 9 !important;
position: fixed !important;
left: 0%;
top: 0%;
height: 100%;
width: 20%;
}

/***************************
RIGHT WALL
***************************/

.status_selected:before{
background-color: transparent;
background-image: url(http://i.imgur.com/oGBaoyp.png);
background-attachment: scroll;
background-position: left top;
z-index: 9 !important;
position: fixed !important;
right: 0%;
top: 0%;
height: 100%;
width: 20%;
content: "";
}

/***************************
CATEGORY LINKS (ELEVATOR BUTTONS)
***************************/
.status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{
background-color: black;
  background-image: -webkit-linear-gradient(top, #333333, #000000);
  background-image: -moz-linear-gradient(top, #333333, #000000);
  background-image: -ms-linear-gradient(top, #333333, #000000);
  background-image: -o-linear-gradient(top, #333333, #000000);
  background-image: linear-gradient(to bottom, #333333, #000000);
font-family: verdana;
position: fixed;
z-index: 10 !important;
position: fixed;
left: 3%;
top: 60px;
font-size: 0;
text-decoration: none !important;
width: 100px;
height: 50px;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 3px;
color: white;
text-align: center;
padding-top: 20px;
}

.status_selected a[href*="status=1"]:before, .status_not_selected a[href*="status=1"]:before{
content: "Hospital";
font-size: 20px !important;
}

.status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"]{
background-color: black;
  background-image: -webkit-linear-gradient(top, #333333, #000000);
  background-image: -moz-linear-gradient(top, #333333, #000000);
  background-image: -ms-linear-gradient(top, #333333, #000000);
  background-image: -o-linear-gradient(top, #333333, #000000);
  background-image: linear-gradient(to bottom, #333333, #000000);
font-family: verdana;
z-index: 10 !important;
position: fixed;
left: 3%;
top: 140px;
font-size: 0;
text-decoration: none !important;
width: 100px;
height: 50px;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 3px;
color: white;
text-align: center;
padding-top: 20px;
}

.status_selected a[href*="status=2"]:before, .status_not_selected a[href*="status=2"]:before{
content: "Lobby";
font-size: 20px !important;
}

.status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"]{
background-color: black;
  background-image: -webkit-linear-gradient(top, #333333, #000000);
  background-image: -moz-linear-gradient(top, #333333, #000000);
  background-image: -ms-linear-gradient(top, #333333, #000000);
  background-image: -o-linear-gradient(top, #333333, #000000);
  background-image: linear-gradient(to bottom, #333333, #000000);
font-family: verdana;
z-index: 10 !important;
position: fixed;
left: 3%;
top: 220px;
font-size: 0;
text-decoration: none !important;
width: 100px;
height: 50px;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 3px;
color: white;
text-align: center;
padding-top: 20px;
}


.status_selected a[href*="status=3"]:before, .status_not_selected a[href*="status=3"]:before{
content: "Storage";
font-size: 20px !important;
}

.status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"]{
background-color: black;
  background-image: -webkit-linear-gradient(top, #333333, #000000);
  background-image: -moz-linear-gradient(top, #333333, #000000);
  background-image: -ms-linear-gradient(top, #333333, #000000);
  background-image: -o-linear-gradient(top, #333333, #000000);
  background-image: linear-gradient(to bottom, #333333, #000000);
font-family: verdana;
z-index: 10 !important;
position: fixed;
left: 3%;
top: 300px;
font-size: 0;
text-decoration: none !important;
width: 100px;
height: 50px;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 3px;
color: white;
text-align: center;
padding-top: 20px;
}

.status_selected a[href*="status=4"]:before, .status_not_selected a[href*="status=4"]:before{
content: "Asylum";
font-size: 20px !important;
}

.status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"]{
background-color: black;
  background-image: -webkit-linear-gradient(top, #333333, #000000);
  background-image: -moz-linear-gradient(top, #333333, #000000);
  background-image: -ms-linear-gradient(top, #333333, #000000);
  background-image: -o-linear-gradient(top, #333333, #000000);
  background-image: linear-gradient(to bottom, #333333, #000000);
font-family: verdana;
z-index: 10 !important;
position: fixed;
left: 3%;
top: 380px;
font-size: 0;
text-decoration: none !important;
width: 100px;
height: 50px;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 3px;
color: white;
text-align: center;
padding-top: 20px;
}

.status_selected a[href*="status=6"]:before, .status_not_selected a[href*="status=6"]:before{
content: "Morgue";
font-size: 20px !important;
}


.status_not_selected a[href*="status=1"]:hover, 
.status_not_selected a[href*="status=2"]:hover,
.status_not_selected a[href*="status=3"]:hover,
.status_not_selected a[href*="status=4"]:hover,
.status_not_selected a[href*="status=6"]:hover,
.status_selected a[href*="status=1"]:hover, 
.status_selected a[href*="status=2"]:hover,
.status_selected a[href*="status=3"]:hover,
.status_selected a[href*="status=4"]:hover,
.status_selected a[href*="status=6"]:hover{
 background-color: #fcfac0; background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfac0), to(#f6f283));
 background-image: -webkit-linear-gradient(top, #fcfac0, #f6f283);
 background-image: -moz-linear-gradient(top, #fcfac0, #f6f283);
 background-image: -ms-linear-gradient(top, #fcfac0, #f6f283);
 background-image: -o-linear-gradient(top, #fcfac0, #f6f283);
border-color: white;
border-style: solid;
border-width: 1px;
    -webkit-box-shadow: 0px 0px 10px gold;
       -moz-box-shadow: 0px 0px 10px gold;
            box-shadow: 0px 0px 10px gold;
}


.status_selected a[href*="status=1"], 
.status_selected a[href*="status=2"],
.status_selected a[href*="status=3"],
.status_selected a[href*="status=4"],
.status_selected a[href*="status=6"]{
border-color: white;
border-style: solid;
border-width: 1px;
 xbackground-color: #eab92d; 
xbackground-image: -webkit-gradient(linear, left top, left bottom, from(#eab92d), to(#c79810));
 xbackground-image: -webkit-linear-gradient(top, #eab92d, #c79810);
 xbackground-image: -moz-linear-gradient(top, #eab92d, #c79810);
 xbackground-image: -ms-linear-gradient(top, #eab92d, #c79810);
 xbackground-image: -o-linear-gradient(top, #eab92d, #c79810);

    -webkit-box-shadow: 0px 0px 10px gold;
       -moz-box-shadow: 0px 0px 10px gold;
            box-shadow: 0px 0px 10px gold;
}

.status_selected:after{
content: "";
color: transparent;
font-size: 0 !important;
  background: #525252;
  background-image: -webkit-linear-gradient(top, #616061, #171717) !important;
  background-image: -moz-linear-gradient(top, #616061, #171717) !important;
  background-image: -ms-linear-gradient(top, #616061, #171717);
  background-image: -o-linear-gradient(top, #616061, #171717);
  background-image: linear-gradient(to bottom, #616061, #171717);
position: fixed;
top: 30px;
left:3%;
margin-left: -30px;
height:450px;
width: 160px;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 3px;
opacity: .8;
}

.status_not_selected a[href*="status=7"]{
display: none;}



/***************************
CURRENT BACKGROUND
***************************/

body {
background-image: url(http://i.imgur.com/ghNXkuJ.jpg);
background-position: bottom center;
background-attachment: fixed;
background-size: cover;
background-color: black;
}



.header_cw span:before{
content: "";
background-image:url(http://i.imgur.com/M6YCdzV.png);
background-color: transparent;
z-index: -3 !Important;
top: 0;
left: 0;
position: fixed !important;
background-position:28% center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
width: 100%;

animation-name: nurse;
animation-duration: 300s;
animation-delay: 0s;
}

@-moz-keyframes nurse /* Firefox */
{
0% {opacity: 0;}
5% {opacity: 0;}
6% {opacity: 1;}
95% {opacity: 1;}
99% {opacity: 0;}
}


@-webkit-keyframes nurse /* Safari and Chrome */
{
0% {background-position:-65% center;}
5% {background-position:-65% center;}
6% {background-position:28% center;}
95% {background-position:28% center;}
99% {background-position:28% center;}
}



/***************************
CURRENT TEXTS
***************************/


.header_cw:after{
content: "Wow, how did you end up here? You can hear people screaming in pain on this floor. You should get out! But wait- a bloodstained nurse approaches you!";
font-size: 14px;
font-family: 'Aldrich', sans-serif;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 4%;
left: 28%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 10%;
width: 25%;
animation-name: hospitaltext;
animation-duration: 300s;
animation-iteration-count: infinite;
}

@-moz-keyframes hospitaltext /* Firefox */
{
0% {opacity: 0;}
2% {opacity: 0;}
3% {opacity: 1;}
8% {opacity: 1;}
9% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes hospitaltext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
2% {color: transparent; background-color: transparent; border-color: transparent;}
3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
8% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
9% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_cw:after{
margin: auto !important;
}


.header_cw span:after{
content: " 'Please wait here, we will operate on you soon. Try any of these series Shishio is currently watching while you wait. Oh you are looking for an exit? No need, you will be here forever...' ";
font-family: 'Aldrich', sans-serif;
font-size: 14px;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 40%;
left: 27%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 10%;
width: 26%;
z-index: -1 !important;
opacity: 1;
animation-name: nursetext;
animation-duration: 300s;
animation-iteration-count: infinite;
}

@-moz-keyframes nursetext /* Firefox */
{
0% {opacity: 0;}
5% {opacity: 0;}
6% {opacity: 1;}
10% {opacity: 1;}
11% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes nursetext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
5% {color: transparent; background-color: transparent; border-color: transparent;}
6% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
10% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
11% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_cw span:after{
margin: auto !important;
}





.header_cw:before {
content: "You need to escape from here! There has to be an exit somewhere- search another floor.";
font-family: 'Aldrich', sans-serif;
font-size: 14px;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: 0 !Important;
top: 5%;
left: 28%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 10%;
width: 26%;
z-index: -1 !important;
opacity: 1;
animation-name: escape;
animation-duration: 300s;
animation-iteration-count: infinite;
}

@-moz-keyframes escape /* Firefox */
{
0% {opacity: 0;}
9% {opacity: 0;}
10% {opacity: 1;}
15% {opacity: 1;}
16% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes escape /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
9% {color: transparent; background-color: transparent; border-color: transparent;}
10% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
15% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
16% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_cw:before{
margin: auto !important;
}



/***************************
COMPLETED BACKGROUND
***************************/

.header_completed span:before{
content: "";
background-image:url(http://i.imgur.com/NWocMxQ.png);
background-color: black;
z-index: -3 !Important;
top: 0;
left: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}

.header_completed span:after{
content: "";
z-index: -2 !Important;
top: 0;
left: 0;
position: fixed !important;
background-position:-200% top;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/JZZOTx1.png);
background-size: contain;
height: 100%;
width: 100%;

animation-name: lights;
animation-duration: 80s;
animation-iteration-count: 1;
}

@-moz-keyframes lights /* Firefox */
{
0% {background-color: transparent; background-position: -200% top;}
20.8%{background-color: transparent;background-position: -200% top;}
21% {background-color: rgba(0,0,0,.7); background-position: -200% top;}
21.2% {background-color: transparent; background-position: -200% top;}
27.5% {background-color: transparent; background-position: -200% top;}
28% {background-color: rgba(0,0,0,.7); background-position: -200% top;}
28.5% {background-color: rgba(0,0,0,.0); background-position: -200% top;}
32% {background-position: -200% top;}
33% {background-position: 200% top;}
55.9% {background-color: rgba(0,0,0,.05); background-position: 200% top;}
56% {background-color: rgba(0,0,0,.7); background-position: 200% top;}
56.1% {background-color: transparent; background-position: 200% top;}
56.4% {background-color: transparent; background-position: 200% top;}
56.5% {background-color: rgba(0,0,0,.7); background-position: 200% top;}
56.6% {background-color: transparent; background-position: 200% top;}
80.8%{background-color: transparent; background-position: 200% top;}
81% {background-color: rgba(0,0,0,.7); background-position: 200% top;}
81.2% {background-color: transparent; background-position: 200% top;}
100% {background-color: transparent; background-position: 200% top;}
}

@-webkit-keyframes lights /* Safari and Chrome */
{
0% {background-color: transparent; background-position: -200% top;}
20.8%{background-color: transparent;background-position: -200% top;}
21% {background-color: rgba(0,0,0,.7); background-position: -200% top;}
21.2% {background-color: transparent; background-position: -200% top;}
27.5% {background-color: transparent; background-position: -200% top;}
28% {background-color: rgba(0,0,0,.7); background-position: -200% top;}
28.5% {background-color: rgba(0,0,0,.0); background-position: -200% top;}
32% {background-position: -200% top;}
33% {background-position: 200% top;}
55.9% {background-color: rgba(0,0,0,.05); background-position: 200% top;}
56% {background-color: rgba(0,0,0,.7); background-position: 200% top;}
56.1% {background-color: transparent; background-position: 200% top;}
56.4% {background-color: transparent; background-position: 200% top;}
56.5% {background-color: rgba(0,0,0,.7); background-position: 200% top;}
56.6% {background-color: transparent; background-position: 200% top;}
80.8%{background-color: transparent; background-position: 200% top;}
81% {background-color: rgba(0,0,0,.7); background-position: 200% top;}
81.2% {background-color: transparent; background-position: 200% top;}
100% {background-color: transparent; background-position: 200% top;}
}



/***************************
COMPLETED TEXT
***************************/

.header_completed:after{
content: "This is the lobby, but all the ways out are locked. You're alone here, but at least you found Shishio's completed anime to keep you company here. Wait- maybe you're not alone! Did you see that?!";
font-size: 14px;
font-family: 'Aldrich', sans-serif;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 4%;
left: 28%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 16%;
width: 25%;
animation-name: lobbytext;
animation-duration: 300s;
animation-iteration-count: infinite;
}

@-moz-keyframes lobbytext /* Firefox */
{
0% {opacity: 0;}
2% {opacity: 0;}
3% {opacity: 1;}
14% {opacity: 1;}
15% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes lobbytext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
2% {color: transparent; background-color: transparent; border-color: transparent;}
3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
14% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
15% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_completed:after{
margin: auto !important;
}


/***************************
ON-HOLD BACKGROUND
***************************/


.header_onhold span:before{
content: "";
background-image:url(http://i.imgur.com/mUVeBfX.jpg);
background-color: black;
z-index: -3 !Important;
top: 0;
left: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}

.header_onhold span:after{
content: "";
background-color: white;
z-index: 10 !Important;
top: -800px;
left: -50px;
position: absolute !important;
background-position:top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 300px;
width: 800px;
opacity: 0;
}



/***************************
ON-HOLD SOUNDS
***************************/

a#xmenu25013 {background: red;
position: absolute;
  top: -900px;
  left: 400px;
  height: 100px;
  width: 200px;
opacity: 0;
}

#more25013 .borderRBL {
  background: orange;
  position: absolute;
  top: -1200px;
  left: 300px;
  font-size: 0;
opacity: 0;
}


a#xmenu2288 {background: blue;
position: absolute;
  height: 100px;
  width: 200px;
top: -900px;
left: 10px;
opacity: 0;
}

#more2288 .borderRBL {
  background: purple;
  position: absolute;
  top: -1200px;
  left: -50px;
  font-size: 0;
  opacity: 0;
}


a#xmenu2882 {
  background: green;
height: 100px;
  width: 200px;
position: absolute;
top: -530px;
left: 500px;
opacity: 0;
} 


#more2882 .borderRBL {
  background: cyan;
  position: absolute;
  top: -1200px;
  left: 500px;
  font-size: 0;
opacity: 0;
}


/***************************
ON HOLD TEXT
***************************/

.header_onhold:after{
content: "Hmm, this floor is just a dark, smoky hall with one door at the end. Is it an exit?? Damn- it won't open! Well, at least you found Shishio's on-hold anime here. But wait, do you hear something? Maybe if you click around the smoke carefully...";
font-size: 14px;
font-family: 'Aldrich', sans-serif;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 25%;
left: 28%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 16%;
width: 25%;
animation-name: darktext;
animation-duration: 300s;
animation-iteration-count: infinite;
}

@-moz-keyframes darktext /* Firefox */
{
0% {opacity: 0;}
2% {opacity: 0;}
3% {opacity: 1;}
14% {opacity: 1;}
15% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes darktext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
2% {color: transparent; background-color: transparent; border-color: transparent;}
3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
14% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
15% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_onhold:after{
margin: auto !important;
}




/***************************
DROPPED BACKGROUND
***************************/

.header_dropped span:before{
content: "";
background-image:url(http://i.imgur.com/VaOE7Nu.jpg);
background-color: black;
z-index: -3 !Important;
top: 0;
left: 0;
position: fixed !important;
background-position:bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}

.header_dropped span:after{
content: "";
z-index: -2 !Important;
top: 0;
left: 0;
position: fixed !important;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/kEnHttg.png);
background-size: 12%;
height: 100%;
width: 100%;
background-color: rgba(20,0,0,.7); 
background-position: center 50%; 
opacity:1;

animation-name: attack;
animation-duration: 100s;
animation-iteration-count: 1;
}

@-moz-keyframes attack /* Firefox */
{
0% {background-color: transparent; background-position: center 50%; opacity:0;}
16%{background-color: transparent; background-position: center 50%; opacity:0;}
21% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
22% {background-color: transparent; background-position: center 50%; opacity:1;}
22.1% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
22.2% {background-color: transparent; background-position: center 50%; opacity:1;}
22.3% {background-color: transparent; background-position: center 50%; opacity:1;}
22.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
22.5% {background-color: transparent; background-position: center 50%; opacity:1;}
22.6% {background-color: transparent; background-position: center 50%; opacity:1;}
22.7% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
22.8% {background-color: transparent; background-position: center 50%; opacity:1;}
22.9% {background-color: transparent; background-position: center 50%; opacity:1;}
23% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
23.1% {background-color: transparent; background-position: center 50%; opacity:1;}
23.2% {background-color: transparent; background-position: center 50%; opacity:1;}
23.3% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
23.4% {background-color: transparent; background-position: center 50%; opacity:1;}
28.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}
32.4% {background-color: rgba(20,0,0,.7); background-position: center 50%; opacity:1;}
100% {background-color: rgba(20,0,0,.7); background-position: center 50%; opacity:1;}
}

@-webkit-keyframes attack /* Safari and Chrome */
{
0% {background-color: transparent; background-position: -100% 50%; }
16%{background-color: transparent; background-position: -100% 50%; }
20.99% {background-color: rgba(0,0,0,.7); background-position: -100% 50%; }
21% {background-color: rgba(0,0,0,.7); background-position: center 50%;}
22% {background-color: transparent; background-position: center 50%; }
22.1% {background-color: rgba(0,0,0,.7); background-position: center 50%; }
22.2% {background-color: transparent; background-position: center 50%; }
22.3% {background-color: transparent; background-position: center 50%; }
22.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; }
22.5% {background-color: transparent; background-position: center 50%; }
22.6% {background-color: transparent; background-position: center 50%; }
22.7% {background-color: rgba(0,0,0,.7); background-position: center 50%; }
22.8% {background-color: transparent; background-position: center 50%; }
22.9% {background-color: transparent; background-position: center 50%; }
23% {background-color: rgba(0,0,0,.7); background-position: center 50%; }
23.1% {background-color: transparent; background-position: center 50%; }
23.2% {background-color: transparent; background-position: center 50%; }
23.3% {background-color: rgba(0,0,0,.7); background-position: center 50%; }
23.4% {background-color: transparent; background-position: center 50%; }
28.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; }
32.4% {background-color: rgba(20,0,0,.7); background-position: center 50%; }
100% {background-color: rgba(20,0,0,.7); background-position: center 50%; }
}




/***************************
DROPPED TEXT
***************************/

.header_dropped:before{
content: "Whoa! You feel evil in the air, and smell death too. Everyone on this floor is dead!! Could the terrible anime from Shishio's dropped list have killed them??";
font-size: 14px;
font-family: 'Aldrich', sans-serif;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 4%;
left: 28%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 14%;
width: 25%;
animation-name: droppedtext;
animation-duration: 100s;
animation-iteration-count: infinite;
}

@-moz-keyframes droppedtext /* Firefox */
{
0% {opacity: 0;}
6% {opacity: 0;}
7% {opacity: 1;}
20% {opacity: 1;}
21% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes droppedtext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
6% {color: transparent; background-color: transparent; border-color: transparent;}
7% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
20% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
21% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_dropped:before{
margin: auto !important;
}




.header_dropped:after{
content: "Oh no! The vengeful spirits of those who died watching terrible anime like Hetalia are still here! The exit isn't on this floor, so try another and stay clear of these series!";
font-family: 'Aldrich', sans-serif;
font-size: 14px;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: 0 !Important;
top: 4%;
left: 27%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 10%;
width: 26%;
z-index: 0 !important;
opacity: 1;
animation-name: ghosttext;
animation-duration: 100s;
animation-iteration-count: infinite;
}

@-moz-keyframes ghosttext /* Firefox */
{
0% {opacity: 0;}
24% {opacity: 0;}
25% {opacity: 1;}
39% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes ghosttext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
24% {color: transparent; background-color: transparent; border-color: transparent;}
25% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
39% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
40% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}


.header_dropped:after{
margin: auto !important;
}





/***************************
PTW BACKGROUNDS
***************************/


.header_ptw span:before{
content: "";
background-image:url(http://i.imgur.com/fu24T4U.jpg);
background-color: black;
z-index: -3 !Important;
top: 0;
left: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}


.header_ptw span:after{
content: "";
background-image:url(http://i.imgur.com/ihMqH90.png);
background-color: transparent;
z-index: -3 !Important;
bottom: 0;
left: 0;
position: fixed !important;
background-position:center top;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
width: 100%;
}

/***************************
PTW TEXT
***************************/


.header_ptw:before{
content: "AHHH! ITS YUNO! AND SHES GOT THAT YANDERE LOOK IN HER EYES! YOU'RE DEAD FOR SURE. WELL... BYE!";
font-size: 14px;
font-family: 'Aldrich', sans-serif;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 4%;
left: 28%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 14%;
width: 25%;
animation-name: cowardtext;
animation-duration: 500s;
animation-iteration-count: 1;
}

@-moz-keyframes cowardtext /* Firefox */
{
0% {opacity: 0;}
1.2% {opacity: 0;}
1.3% {opacity: 1;}
2.5% {opacity: 1;}
2.6% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes cowardtext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
1.2% {color: transparent; background-color: transparent; border-color: transparent;}
1.3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
2.5% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
2.6% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}

.header_ptw:before{
margin: auto !important;
}




.header_ptw:after{
content: " 'Hey don't worry, I'm not going to hurt you.. not today haha. I'm only here to get some anime off Shishio's list. Yeah the list is a little haunted, hehe. Fun, huh? Oh you're trying to find the exit? Just click on me when you're done checking out Shishi's planned anime here.' ";
font-family: 'Aldrich', sans-serif;
font-size: 14px;

color: white; background-color: rgba(0,0,0,.85); border-color: white;
border-style: solid;
border-width: 1px;
padding: 4px;

display: block;
z-index: -2 !Important;
top: 20%;
left: -27%;
right: 0;
position: fixed !important;
background-position:top center;
background-attachment: fixed;
background-size: cover;
height: 16%;
width: 26%;
opacity: 1;
animation-name: Yunotext;
animation-duration: 100s;
animation-iteration-count: infinite;
}

@-moz-keyframes Yunotext /* Firefox */
{
0% {opacity: 0;}
14% {opacity: 0;}
15% {opacity: 1;}
49% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes Yunotext /* Safari and Chrome */
{
0% {color: transparent; background-color: transparent; border-color: transparent;}
14% {color: transparent; background-color: transparent; border-color: transparent;}
15% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
49% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}
50% {color: transparent; background-color: transparent; border-color: transparent;}
100% {color: transparent; background-color: transparent; border-color: transparent;}
}


.header_ptw:after{
margin: auto !important;
} 


/***************************
EXIT
***************************/

a#xmenu1583 {background: red;
position: absolute;
  top: -800px;
  left: 300px;
  height: 850px;
  width: 300px;
  opacity: 0;
}

#more1583 .borderRBL{
  background-color: rgba(0,0,0,.9);
  box-shadow: 0px 0px 20px 10px rgba(255,0,0,1);
  position: absolute;
  top: -700px;
  left: 00px;
  width: 600px;
  height: 300px;
  color: transparent !important;
  font-size: 0 !important;
}


#more1583 .borderRBL a{
  color: transparent ;
  font-size: 0 ;
} 


a[href="http://myanimelist.net/profile/Shishio-kun"]{
    color: white !important;
  background-color: transparent;
    background-image: url(http://i.imgur.com/fuwDR93.png);
background-size: 40%;
background-position: center bottom;
background-repeat: no-repeat;
  font-size: 16px !important;
  top: -200px;
  position: relative;
 padding-bottom: 260px;
 padding-left: 20px;
 width: 500px;
}





/***************************
RESOLUTION COMPATIBILITY
***************************/


/* Media query for normal devices*/
@media all and (min-device-width:1px) {

#list_surround {
width: 530px;
}
  
 #mal_cs_pic:before {
   font-size: 40px;
 }

.header_cw:after{
height: 18%;
}

.header_cw span:after{
height: 20%;
}

.header_cw:before {
height: 10%;
}


.header_completed:after{
height: 27%;
}

.header_onhold:after{
height: 27%;
}

.header_dropped:after{
height: 17%;
}

.header_dropped:before{
height: 21%;
}

.header_ptw:before{
height: 14%;}

.header_ptw:after{
height: 27%;}
  
}

/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {
 

#list_surround {
width: 700px;
  }

 #mal_cs_pic:before {
   font-size: 60px;
 }

.header_cw:after{
height: 10%;
}

.header_cw span:after{
height: 10%;
}

.header_cw:before {
height: 10%;
}


.header_completed:after{
height: 21%;
}

.header_onhold:after{
height: 16%;
}

.header_dropped:after{
height: 10%;
}

.header_dropped:before{
height: 14%;
}

.header_ptw:before{
height: 14%;}

.header_ptw:after{
height: 16%;}

}

/* Media query for devices above 1366px */
@media all and (min-device-width:1599px) {
  

#list_surround {
width: 800px;
 }
  
#mal_cs_pic:before {
   font-size: 70px;
 }

#mal_cs_listinfo strong:nth-child(1) a {
  left: 84%;
  font-size: 80px;
}

.header_cw:after{
font-size: 16px;
}

.header_cw span:after{
font-size: 17px;
}

.header_cw:before {
font-size: 17px;
}


.header_completed:after{
font-size: 17px;
}

.header_onhold:after{
font-size: 17px;
}

.header_dropped:after{
font-size: 17px;
}

.header_dropped:before{
font-size: 17px;
}

.header_ptw:before{
font-size: 17px;
}

.header_ptw:after{
font-size: 17px;}

}

/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {


#list_surround {
width: 900px;
  }

#mal_cs_listinfo strong:nth-child(1) a {
  left: 83%;
}

    
#mal_cs_pic:before {
   font-size: 80px;
}

  
.header_cw:after{
font-size: 20px;
}

.header_cw span:after{
font-size: 20px;
}

.header_cw:before {
font-size: 20px;
}

.header_completed:after{
font-size: 20px;
}

.header_onhold:after{
font-size: 20px;
}

.header_dropped:after{
font-size: 20px;
}

.header_dropped:before{
font-size: 20px;
}

.header_ptw:before{
font-size: 20px;
}

.header_ptw:after{
font-size: 20px;
}

}



/***************************
COVERS (never got added!)
***************************/


/***************************
CREDITS
***************************/

#copyright:after{
content: "Coding and concept by Shishio-kun. Thanks Al_exs for the awesome nurse render. Thanks Hahaido for the sick doors and wall graphics. All other backgrounds acquired at DeviantArt. The layout wouldn't be the same without these images!"}