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

  2. 

  3. @font-face {

  4.         font-family: 'myAnimeFont';

  5.         src: url(https://copy.com/HqKL0KBOgr0k4zmm/youmurdererbb_reg.otf);

  6. }

  7. 

  8. @font-face {

  9.         font-family: 'penta';

  10.         src: url(https://copy.com/GTLCC7Hb0B7ChOBV/penta.ttf);

  11. }

  12. 

  13. /***************************

  14. TOPBAR AND WARNING

  15. ***************************/

  16. 

  17. 

  18. #mal\_control\_strip{

  19. top: -200px !important;

  20. position: absolute;

  21. }

  22. 

  23. #mal_cs_listinfo strong:nth-child(1) a {

  24.   top: 35%;

  25.   left: 85%;

  26.   width: 100%;

  27.   text-align: left;

  28.   background: transparent;

  29.   color: #550000;

  30.   font-family: myAnimeFont;

  31.   font-size: 40px;

  32.   opacity: .7;

  33.   text-decoration: none !important;  

  34.   transform: rotate(8deg);

  35.   position: fixed;

  36.   font-style: normal !important;

  37.   z-index: 10 !important;

  38.   pointer-events: none !important;

  39. }

  40. 

  41. #mal_cs_listinfo strong:nth-child(1) a:before{

  42.   content: "no escape ";

  43.   font-family: myAnimeFont;

  44.   opacity: .95;

  45.   text-decoration: none !important;  

  46.   background-color: transparent;

  47.   position: fixed;

  48.   margin-top: -3%;

  49.   width: 100%;

  50.   text-align: left;

  51. }

  52. 

  53.  #mal_cs_pic:before {

  54.   top: 35%;

  55.   left: 85%;

  56.   width: 100%;

  57.   text-align: left;

  58.   color: #550000;

  59.   font-family: myAnimeFont;

  60.   font-size: 60px;

  61.   transform: rotate(8deg);

  62.   font-style: normal !important;

  63.   z-index: 10 !important;

  64.   pointer-events: none !important;

  65.   content: "no escape ";

  66.   font-family: myAnimeFont;

  67.   opacity: .95;

  68.   text-decoration: none !important;  

  69.   background-color: transparent;

  70.   position: fixed;

  71. }

  72. 

  73. 

  74. /***************************

  75. LIST

  76. ***************************/

  77. 

  78. 

  79. #list_surround{

  80. background-color: transparent;

  81. background-attachment:scroll;

  82. position: absolute;

  83. left: 0px;

  84. right: 0px;

  85. width: 600px;

  86. top: 900px;

  87. padding: 12px;

  88. }

  89. 

  90. #list_surround{

  91. margin: auto !important;

  92. }

  93. 

  94. .table_header a{

  95.   text-decoration: underline !important;

  96.   color:white;

  97. }

  98. 

  99. #list_surround, .td1 a, .td2 a{

  100.   color:white;

  101.   text-decoration: none !important;

  102.   font-family: tahoma;

  103.   font-size: 12px;

  104. }

  105. 

  106. .td1, .td2, .table_header, .category_totals {

  107. font-family: tahoma;

  108. font-size: 12px;

  109. }

  110. 

  111. .td1, .td2{

  112. line-height: 18px;    

  113. }

  114. 

  115. .category_totals {

  116. text-align: center;

  117. padding: 20px;

  118. font-size: 11px;

  119. }

  120. 

  121. #copyright{

  122. font-size: 11px;

  123. padding-left: 20px;

  124. padding-right: 20px;

  125. padding-bottom: 20px;

  126. }

  127. 

  128. #list_surround

  129. {

  130. background-color: rgba(0,0,0,.9);

  131. border-radius: 5px;

  132. animation-name: mist;

  133. animation-duration: 20s;

  134. animation-iteration-count: infinite;

  135. }

  136. 

  137. @-moz-keyframes mist /* Firefox */

  138. {

  139. 0% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}

  140. 50% {box-shadow: 0px 0px 20px 10px rgba(255,0,0,1);}

  141. 100% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}

  142. }

  143. 

  144. @-webkit-keyframes mist /* Chrome */

  145. {

  146. 0% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}

  147. 50% {box-shadow: 0px 0px 20px 10px rgba(255,0,0,1);}

  148. 100% {box-shadow: 0px 0px 15px 10px rgba(0,0,0,1);}

  149. }

  150. 

  151. .header_title {

  152. font-family: penta;

  153. font-size: 45px;

  154. text-align: center; 

  155. margin-top: -50px;

  156. } 

  157. 

  158. tr:hover [class^="td"] {

  159. background-color: rgba(155, 0, 0, .7) !important;

  160. box-shadow: 0px 0px 20px 10px rgba(155,0,0,1);

  161. }

  162. 

  163. /***************************

  164. LEFT DOOR

  165. ***************************/

  166. 

  167. #list_surround:before{

  168. background-image: url(http://i.imgur.com/nbv53YS.jpg);

  169. background-color: black;

  170. background-position: right center;

  171. background-size: contain;

  172. position: fixed;

  173. left: -100%;

  174. right: 0;

  175. top: 0;

  176. width: 100%;

  177. content: "";

  178. height: 100%;

  179. z-index: 0 !important;

  180. animation-name: leftdoor;

  181. animation-duration: 300s;

  182. }

  183. 

  184. #list_surround:before{

  185. margin: auto;

  186. }

  187. 

  188. @-moz-keyframes leftdoor /* Firefox */

  189. {

  190. 0% {left: -100%;}

  191. 1% {left: -100%;}

  192. 3% {left: -160%;}

  193. 95% {left: -160%;}

  194. 99% {left: -100%;}

  195. }

  196. 

  197. @-webkit-keyframes leftdoor /* Safari and Chrome */

  198. {

  199. 0% {left: -100%;}

  200. 1% {left: -100%;}

  201. 3% {left: -160%;}

  202. 95% {left: -160%;}

  203. 99% {left: -100%;}

  204. }

  205. 

  206. 

  207. /***************************

  208. RIGHT DOOR

  209. ***************************/

  210. 

  211. #list_surround:after{

  212. background-image: url(http://i.imgur.com/mTQNUo6.jpg);

  213. background-position: left center;

  214. background-size: contain;

  215. background-color: black;

  216. position: fixed;

  217. left: 50%;

  218. right: 0;

  219. top: 0;

  220. width: 100%;

  221. content: "";

  222. height: 100%;

  223. z-index: 0 !important;

  224. animation-name: rightdoor;

  225. animation-duration: 300s;

  226. }

  227. 

  228. #list_surround:after{

  229. margin: auto;

  230. }

  231. 

  232. @-moz-keyframes rightdoor /* Firefox */

  233. {

  234. 0% {left: 50%;}

  235. 1% {left: 50%;}

  236. 3% {left: 80%;}

  237. 95% {left: 80%;}

  238. 99% {left: 50%;}

  239. }

  240. 

  241. @-webkit-keyframes rightdoor /* Safari and Chrome */

  242. {

  243. 0% {left: 50%;}

  244. 1% {left: 50%;}

  245. 3% {left: 80%;}

  246. 95% {left: 80%;}

  247. 99% {left: 50%;}

  248. }

  249. 

  250. /***************************

  251. LEFT WALL

  252. ***************************/

  253. 

  254. .status_selected{

  255. background-color: transparent;

  256. background-image: url(http://i.imgur.com/iC6p26P.png);

  257. background-attachment: scroll;

  258. background-position: right top;

  259. z-index: 9 !important;

  260. position: fixed !important;

  261. left: 0%;

  262. top: 0%;

  263. height: 100%;

  264. width: 20%;

  265. }

  266. 

  267. /***************************

  268. RIGHT WALL

  269. ***************************/

  270. 

  271. .status_selected:before{

  272. background-color: transparent;

  273. background-image: url(http://i.imgur.com/oGBaoyp.png);

  274. background-attachment: scroll;

  275. background-position: left top;

  276. z-index: 9 !important;

  277. position: fixed !important;

  278. right: 0%;

  279. top: 0%;

  280. height: 100%;

  281. width: 20%;

  282. content: "";

  283. }

  284. 

  285. /***************************

  286. CATEGORY LINKS (ELEVATOR BUTTONS)

  287. ***************************/

  288. .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]{

  289. background-color: black;

  290.   background-image: -webkit-linear-gradient(top, #333333, #000000);

  291.   background-image: -moz-linear-gradient(top, #333333, #000000);

  292.   background-image: -ms-linear-gradient(top, #333333, #000000);

  293.   background-image: -o-linear-gradient(top, #333333, #000000);

  294.   background-image: linear-gradient(to bottom, #333333, #000000);

  295. font-family: verdana;

  296. position: fixed;

  297. z-index: 10 !important;

  298. position: fixed;

  299. left: 3%;

  300. top: 60px;

  301. font-size: 0;

  302. text-decoration: none !important;

  303. width: 100px;

  304. height: 50px;

  305. border-color: black;

  306. border-style: solid;

  307. border-width: 1px;

  308. border-radius: 3px;

  309. color: white;

  310. text-align: center;

  311. padding-top: 20px;

  312. }

  313. 

  314. .status_selected a[href*="status=1"]:before, .status_not_selected a[href*="status=1"]:before{

  315. content: "Hospital";

  316. font-size: 20px !important;

  317. }

  318. 

  319. .status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"]{

  320. background-color: black;

  321.   background-image: -webkit-linear-gradient(top, #333333, #000000);

  322.   background-image: -moz-linear-gradient(top, #333333, #000000);

  323.   background-image: -ms-linear-gradient(top, #333333, #000000);

  324.   background-image: -o-linear-gradient(top, #333333, #000000);

  325.   background-image: linear-gradient(to bottom, #333333, #000000);

  326. font-family: verdana;

  327. z-index: 10 !important;

  328. position: fixed;

  329. left: 3%;

  330. top: 140px;

  331. font-size: 0;

  332. text-decoration: none !important;

  333. width: 100px;

  334. height: 50px;

  335. border-color: black;

  336. border-style: solid;

  337. border-width: 1px;

  338. border-radius: 3px;

  339. color: white;

  340. text-align: center;

  341. padding-top: 20px;

  342. }

  343. 

  344. .status_selected a[href*="status=2"]:before, .status_not_selected a[href*="status=2"]:before{

  345. content: "Lobby";

  346. font-size: 20px !important;

  347. }

  348. 

  349. .status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"]{

  350. background-color: black;

  351.   background-image: -webkit-linear-gradient(top, #333333, #000000);

  352.   background-image: -moz-linear-gradient(top, #333333, #000000);

  353.   background-image: -ms-linear-gradient(top, #333333, #000000);

  354.   background-image: -o-linear-gradient(top, #333333, #000000);

  355.   background-image: linear-gradient(to bottom, #333333, #000000);

  356. font-family: verdana;

  357. z-index: 10 !important;

  358. position: fixed;

  359. left: 3%;

  360. top: 220px;

  361. font-size: 0;

  362. text-decoration: none !important;

  363. width: 100px;

  364. height: 50px;

  365. border-color: black;

  366. border-style: solid;

  367. border-width: 1px;

  368. border-radius: 3px;

  369. color: white;

  370. text-align: center;

  371. padding-top: 20px;

  372. }

  373. 

  374. 

  375. .status_selected a[href*="status=3"]:before, .status_not_selected a[href*="status=3"]:before{

  376. content: "Storage";

  377. font-size: 20px !important;

  378. }

  379. 

  380. .status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"]{

  381. background-color: black;

  382.   background-image: -webkit-linear-gradient(top, #333333, #000000);

  383.   background-image: -moz-linear-gradient(top, #333333, #000000);

  384.   background-image: -ms-linear-gradient(top, #333333, #000000);

  385.   background-image: -o-linear-gradient(top, #333333, #000000);

  386.   background-image: linear-gradient(to bottom, #333333, #000000);

  387. font-family: verdana;

  388. z-index: 10 !important;

  389. position: fixed;

  390. left: 3%;

  391. top: 300px;

  392. font-size: 0;

  393. text-decoration: none !important;

  394. width: 100px;

  395. height: 50px;

  396. border-color: black;

  397. border-style: solid;

  398. border-width: 1px;

  399. border-radius: 3px;

  400. color: white;

  401. text-align: center;

  402. padding-top: 20px;

  403. }

  404. 

  405. .status_selected a[href*="status=4"]:before, .status_not_selected a[href*="status=4"]:before{

  406. content: "Asylum";

  407. font-size: 20px !important;

  408. }

  409. 

  410. .status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"]{

  411. background-color: black;

  412.   background-image: -webkit-linear-gradient(top, #333333, #000000);

  413.   background-image: -moz-linear-gradient(top, #333333, #000000);

  414.   background-image: -ms-linear-gradient(top, #333333, #000000);

  415.   background-image: -o-linear-gradient(top, #333333, #000000);

  416.   background-image: linear-gradient(to bottom, #333333, #000000);

  417. font-family: verdana;

  418. z-index: 10 !important;

  419. position: fixed;

  420. left: 3%;

  421. top: 380px;

  422. font-size: 0;

  423. text-decoration: none !important;

  424. width: 100px;

  425. height: 50px;

  426. border-color: black;

  427. border-style: solid;

  428. border-width: 1px;

  429. border-radius: 3px;

  430. color: white;

  431. text-align: center;

  432. padding-top: 20px;

  433. }

  434. 

  435. .status_selected a[href*="status=6"]:before, .status_not_selected a[href*="status=6"]:before{

  436. content: "Morgue";

  437. font-size: 20px !important;

  438. }

  439. 

  440. 

  441. .status_not_selected a[href*="status=1"]:hover, 

  442. .status_not_selected a[href*="status=2"]:hover,

  443. .status_not_selected a[href*="status=3"]:hover,

  444. .status_not_selected a[href*="status=4"]:hover,

  445. .status_not_selected a[href*="status=6"]:hover,

  446. .status_selected a[href*="status=1"]:hover, 

  447. .status_selected a[href*="status=2"]:hover,

  448. .status_selected a[href*="status=3"]:hover,

  449. .status_selected a[href*="status=4"]:hover,

  450. .status_selected a[href*="status=6"]:hover{

  451.  background-color: #fcfac0; background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfac0), to(#f6f283));

  452.  background-image: -webkit-linear-gradient(top, #fcfac0, #f6f283);

  453.  background-image: -moz-linear-gradient(top, #fcfac0, #f6f283);

  454.  background-image: -ms-linear-gradient(top, #fcfac0, #f6f283);

  455.  background-image: -o-linear-gradient(top, #fcfac0, #f6f283);

  456. border-color: white;

  457. border-style: solid;

  458. border-width: 1px;

  459.     -webkit-box-shadow: 0px 0px 10px gold;

  460.        -moz-box-shadow: 0px 0px 10px gold;

  461.             box-shadow: 0px 0px 10px gold;

  462. }

  463. 

  464. 

  465. .status_selected a[href*="status=1"], 

  466. .status_selected a[href*="status=2"],

  467. .status_selected a[href*="status=3"],

  468. .status_selected a[href*="status=4"],

  469. .status_selected a[href*="status=6"]{

  470. border-color: white;

  471. border-style: solid;

  472. border-width: 1px;

  473.  xbackground-color: #eab92d; 

  474. xbackground-image: -webkit-gradient(linear, left top, left bottom, from(#eab92d), to(#c79810));

  475.  xbackground-image: -webkit-linear-gradient(top, #eab92d, #c79810);

  476.  xbackground-image: -moz-linear-gradient(top, #eab92d, #c79810);

  477.  xbackground-image: -ms-linear-gradient(top, #eab92d, #c79810);

  478.  xbackground-image: -o-linear-gradient(top, #eab92d, #c79810);

  479. 

  480.     -webkit-box-shadow: 0px 0px 10px gold;

  481.        -moz-box-shadow: 0px 0px 10px gold;

  482.             box-shadow: 0px 0px 10px gold;

  483. }

  484. 

  485. .status_selected:after{

  486. content: "";

  487. color: transparent;

  488. font-size: 0 !important;

  489.   background: #525252;

  490.   background-image: -webkit-linear-gradient(top, #616061, #171717) !important;

  491.   background-image: -moz-linear-gradient(top, #616061, #171717) !important;

  492.   background-image: -ms-linear-gradient(top, #616061, #171717);

  493.   background-image: -o-linear-gradient(top, #616061, #171717);

  494.   background-image: linear-gradient(to bottom, #616061, #171717);

  495. position: fixed;

  496. top: 30px;

  497. left:3%;

  498. margin-left: -30px;

  499. height:450px;

  500. width: 160px;

  501. border-color: black;

  502. border-style: solid;

  503. border-width: 1px;

  504. border-radius: 3px;

  505. opacity: .8;

  506. }

  507. 

  508. .status_not_selected a[href*="status=7"]{

  509. display: none;}

  510. 

  511. 

  512. 

  513. /***************************

  514. CURRENT BACKGROUND

  515. ***************************/

  516. 

  517. body {

  518. background-image: url(http://i.imgur.com/ghNXkuJ.jpg);

  519. background-position: bottom center;

  520. background-attachment: fixed;

  521. background-size: cover;

  522. background-color: black;

  523. }

  524. 

  525. 

  526. 

  527. .header_cw span:before{

  528. content: "";

  529. background-image:url(http://i.imgur.com/M6YCdzV.png);

  530. background-color: transparent;

  531. z-index: -3 !Important;

  532. top: 0;

  533. left: 0;

  534. position: fixed !important;

  535. background-position:28% center;

  536. background-attachment: fixed;

  537. background-repeat: no-repeat;

  538. background-size: contain;

  539. height: 100%;

  540. width: 100%;

  541. 

  542. animation-name: nurse;

  543. animation-duration: 300s;

  544. animation-delay: 0s;

  545. }

  546. 

  547. @-moz-keyframes nurse /* Firefox */

  548. {

  549. 0% {opacity: 0;}

  550. 5% {opacity: 0;}

  551. 6% {opacity: 1;}

  552. 95% {opacity: 1;}

  553. 99% {opacity: 0;}

  554. }

  555. 

  556. 

  557. @-webkit-keyframes nurse /* Safari and Chrome */

  558. {

  559. 0% {background-position:-65% center;}

  560. 5% {background-position:-65% center;}

  561. 6% {background-position:28% center;}

  562. 95% {background-position:28% center;}

  563. 99% {background-position:28% center;}

  564. }

  565. 

  566. 

  567. 

  568. /***************************

  569. CURRENT TEXTS

  570. ***************************/

  571. 

  572. 

  573. .header_cw:after{

  574. 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!";

  575. font-size: 14px;

  576. font-family: 'Aldrich', sans-serif;

  577. 

  578. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  579. border-style: solid;

  580. border-width: 1px;

  581. padding: 4px;

  582. 

  583. display: block;

  584. z-index: -2 !Important;

  585. top: 4%;

  586. left: 28%;

  587. right: 0;

  588. position: fixed !important;

  589. background-position:top center;

  590. background-attachment: fixed;

  591. background-size: cover;

  592. height: 10%;

  593. width: 25%;

  594. animation-name: hospitaltext;

  595. animation-duration: 300s;

  596. animation-iteration-count: infinite;

  597. }

  598. 

  599. @-moz-keyframes hospitaltext /* Firefox */

  600. {

  601. 0% {opacity: 0;}

  602. 2% {opacity: 0;}

  603. 3% {opacity: 1;}

  604. 8% {opacity: 1;}

  605. 9% {opacity: 0;}

  606. 100% {opacity: 0;}

  607. }

  608. 

  609. @-webkit-keyframes hospitaltext /* Safari and Chrome */

  610. {

  611. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  612. 2% {color: transparent; background-color: transparent; border-color: transparent;}

  613. 3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  614. 8% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  615. 9% {color: transparent; background-color: transparent; border-color: transparent;}

  616. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  617. }

  618. 

  619. .header_cw:after{

  620. margin: auto !important;

  621. }

  622. 

  623. 

  624. .header_cw span:after{

  625. 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...' ";

  626. font-family: 'Aldrich', sans-serif;

  627. font-size: 14px;

  628. 

  629. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  630. border-style: solid;

  631. border-width: 1px;

  632. padding: 4px;

  633. 

  634. display: block;

  635. z-index: -2 !Important;

  636. top: 40%;

  637. left: 27%;

  638. right: 0;

  639. position: fixed !important;

  640. background-position:top center;

  641. background-attachment: fixed;

  642. background-size: cover;

  643. height: 10%;

  644. width: 26%;

  645. z-index: -1 !important;

  646. opacity: 1;

  647. animation-name: nursetext;

  648. animation-duration: 300s;

  649. animation-iteration-count: infinite;

  650. }

  651. 

  652. @-moz-keyframes nursetext /* Firefox */

  653. {

  654. 0% {opacity: 0;}

  655. 5% {opacity: 0;}

  656. 6% {opacity: 1;}

  657. 10% {opacity: 1;}

  658. 11% {opacity: 0;}

  659. 100% {opacity: 0;}

  660. }

  661. 

  662. @-webkit-keyframes nursetext /* Safari and Chrome */

  663. {

  664. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  665. 5% {color: transparent; background-color: transparent; border-color: transparent;}

  666. 6% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  667. 10% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  668. 11% {color: transparent; background-color: transparent; border-color: transparent;}

  669. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  670. }

  671. 

  672. .header_cw span:after{

  673. margin: auto !important;

  674. }

  675. 

  676. 

  677. 

  678. 

  679. 

  680. .header_cw:before {

  681. content: "You need to escape from here! There has to be an exit somewhere- search another floor.";

  682. font-family: 'Aldrich', sans-serif;

  683. font-size: 14px;

  684. 

  685. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  686. border-style: solid;

  687. border-width: 1px;

  688. padding: 4px;

  689. 

  690. display: block;

  691. z-index: 0 !Important;

  692. top: 5%;

  693. left: 28%;

  694. right: 0;

  695. position: fixed !important;

  696. background-position:top center;

  697. background-attachment: fixed;

  698. background-size: cover;

  699. height: 10%;

  700. width: 26%;

  701. z-index: -1 !important;

  702. opacity: 1;

  703. animation-name: escape;

  704. animation-duration: 300s;

  705. animation-iteration-count: infinite;

  706. }

  707. 

  708. @-moz-keyframes escape /* Firefox */

  709. {

  710. 0% {opacity: 0;}

  711. 9% {opacity: 0;}

  712. 10% {opacity: 1;}

  713. 15% {opacity: 1;}

  714. 16% {opacity: 0;}

  715. 100% {opacity: 0;}

  716. }

  717. 

  718. @-webkit-keyframes escape /* Safari and Chrome */

  719. {

  720. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  721. 9% {color: transparent; background-color: transparent; border-color: transparent;}

  722. 10% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  723. 15% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  724. 16% {color: transparent; background-color: transparent; border-color: transparent;}

  725. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  726. }

  727. 

  728. .header_cw:before{

  729. margin: auto !important;

  730. }

  731. 

  732. 

  733. 

  734. /***************************

  735. COMPLETED BACKGROUND

  736. ***************************/

  737. 

  738. .header_completed span:before{

  739. content: "";

  740. background-image:url(http://i.imgur.com/NWocMxQ.png);

  741. background-color: black;

  742. z-index: -3 !Important;

  743. top: 0;

  744. left: 0;

  745. position: fixed !important;

  746. background-position:top center;

  747. background-attachment: fixed;

  748. background-repeat: no-repeat;

  749. background-size: cover;

  750. height: 100%;

  751. width: 100%;

  752. }

  753. 

  754. .header_completed span:after{

  755. content: "";

  756. z-index: -2 !Important;

  757. top: 0;

  758. left: 0;

  759. position: fixed !important;

  760. background-position:-200% top;

  761. background-attachment: fixed;

  762. background-repeat: no-repeat;

  763. background-image: url(http://i.imgur.com/JZZOTx1.png);

  764. background-size: contain;

  765. height: 100%;

  766. width: 100%;

  767. 

  768. animation-name: lights;

  769. animation-duration: 80s;

  770. animation-iteration-count: 1;

  771. }

  772. 

  773. @-moz-keyframes lights /* Firefox */

  774. {

  775. 0% {background-color: transparent; background-position: -200% top;}

  776. 20.8%{background-color: transparent;background-position: -200% top;}

  777. 21% {background-color: rgba(0,0,0,.7); background-position: -200% top;}

  778. 21.2% {background-color: transparent; background-position: -200% top;}

  779. 27.5% {background-color: transparent; background-position: -200% top;}

  780. 28% {background-color: rgba(0,0,0,.7); background-position: -200% top;}

  781. 28.5% {background-color: rgba(0,0,0,.0); background-position: -200% top;}

  782. 32% {background-position: -200% top;}

  783. 33% {background-position: 200% top;}

  784. 55.9% {background-color: rgba(0,0,0,.05); background-position: 200% top;}

  785. 56% {background-color: rgba(0,0,0,.7); background-position: 200% top;}

  786. 56.1% {background-color: transparent; background-position: 200% top;}

  787. 56.4% {background-color: transparent; background-position: 200% top;}

  788. 56.5% {background-color: rgba(0,0,0,.7); background-position: 200% top;}

  789. 56.6% {background-color: transparent; background-position: 200% top;}

  790. 80.8%{background-color: transparent; background-position: 200% top;}

  791. 81% {background-color: rgba(0,0,0,.7); background-position: 200% top;}

  792. 81.2% {background-color: transparent; background-position: 200% top;}

  793. 100% {background-color: transparent; background-position: 200% top;}

  794. }

  795. 

  796. @-webkit-keyframes lights /* Safari and Chrome */

  797. {

  798. 0% {background-color: transparent; background-position: -200% top;}

  799. 20.8%{background-color: transparent;background-position: -200% top;}

  800. 21% {background-color: rgba(0,0,0,.7); background-position: -200% top;}

  801. 21.2% {background-color: transparent; background-position: -200% top;}

  802. 27.5% {background-color: transparent; background-position: -200% top;}

  803. 28% {background-color: rgba(0,0,0,.7); background-position: -200% top;}

  804. 28.5% {background-color: rgba(0,0,0,.0); background-position: -200% top;}

  805. 32% {background-position: -200% top;}

  806. 33% {background-position: 200% top;}

  807. 55.9% {background-color: rgba(0,0,0,.05); background-position: 200% top;}

  808. 56% {background-color: rgba(0,0,0,.7); background-position: 200% top;}

  809. 56.1% {background-color: transparent; background-position: 200% top;}

  810. 56.4% {background-color: transparent; background-position: 200% top;}

  811. 56.5% {background-color: rgba(0,0,0,.7); background-position: 200% top;}

  812. 56.6% {background-color: transparent; background-position: 200% top;}

  813. 80.8%{background-color: transparent; background-position: 200% top;}

  814. 81% {background-color: rgba(0,0,0,.7); background-position: 200% top;}

  815. 81.2% {background-color: transparent; background-position: 200% top;}

  816. 100% {background-color: transparent; background-position: 200% top;}

  817. }

  818. 

  819. 

  820. 

  821. /***************************

  822. COMPLETED TEXT

  823. ***************************/

  824. 

  825. .header_completed:after{

  826. 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?!";

  827. font-size: 14px;

  828. font-family: 'Aldrich', sans-serif;

  829. 

  830. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  831. border-style: solid;

  832. border-width: 1px;

  833. padding: 4px;

  834. 

  835. display: block;

  836. z-index: -2 !Important;

  837. top: 4%;

  838. left: 28%;

  839. right: 0;

  840. position: fixed !important;

  841. background-position:top center;

  842. background-attachment: fixed;

  843. background-size: cover;

  844. height: 16%;

  845. width: 25%;

  846. animation-name: lobbytext;

  847. animation-duration: 300s;

  848. animation-iteration-count: infinite;

  849. }

  850. 

  851. @-moz-keyframes lobbytext /* Firefox */

  852. {

  853. 0% {opacity: 0;}

  854. 2% {opacity: 0;}

  855. 3% {opacity: 1;}

  856. 14% {opacity: 1;}

  857. 15% {opacity: 0;}

  858. 100% {opacity: 0;}

  859. }

  860. 

  861. @-webkit-keyframes lobbytext /* Safari and Chrome */

  862. {

  863. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  864. 2% {color: transparent; background-color: transparent; border-color: transparent;}

  865. 3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  866. 14% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  867. 15% {color: transparent; background-color: transparent; border-color: transparent;}

  868. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  869. }

  870. 

  871. .header_completed:after{

  872. margin: auto !important;

  873. }

  874. 

  875. 

  876. /***************************

  877. ON-HOLD BACKGROUND

  878. ***************************/

  879. 

  880. 

  881. .header_onhold span:before{

  882. content: "";

  883. background-image:url(http://i.imgur.com/mUVeBfX.jpg);

  884. background-color: black;

  885. z-index: -3 !Important;

  886. top: 0;

  887. left: 0;

  888. position: fixed !important;

  889. background-position:top center;

  890. background-attachment: fixed;

  891. background-repeat: no-repeat;

  892. background-size: cover;

  893. height: 100%;

  894. width: 100%;

  895. }

  896. 

  897. .header_onhold span:after{

  898. content: "";

  899. background-color: white;

  900. z-index: 10 !Important;

  901. top: -800px;

  902. left: -50px;

  903. position: absolute !important;

  904. background-position:top center;

  905. background-attachment: fixed;

  906. background-repeat: no-repeat;

  907. background-size: cover;

  908. height: 300px;

  909. width: 800px;

  910. opacity: 0;

  911. }

  912. 

  913. 

  914. 

  915. /***************************

  916. ON-HOLD SOUNDS

  917. ***************************/

  918. 

  919. a#xmenu25013 {background: red;

  920. position: absolute;

  921.   top: -900px;

  922.   left: 400px;

  923.   height: 100px;

  924.   width: 200px;

  925. opacity: 0;

  926. }

  927. 

  928. #more25013 .borderRBL {

  929.   background: orange;

  930.   position: absolute;

  931.   top: -1200px;

  932.   left: 300px;

  933.   font-size: 0;

  934. opacity: 0;

  935. }

  936. 

  937. 

  938. a#xmenu2288 {background: blue;

  939. position: absolute;

  940.   height: 100px;

  941.   width: 200px;

  942. top: -900px;

  943. left: 10px;

  944. opacity: 0;

  945. }

  946. 

  947. #more2288 .borderRBL {

  948.   background: purple;

  949.   position: absolute;

  950.   top: -1200px;

  951.   left: -50px;

  952.   font-size: 0;

  953.   opacity: 0;

  954. }

  955. 

  956. 

  957. a#xmenu2882 {

  958.   background: green;

  959. height: 100px;

  960.   width: 200px;

  961. position: absolute;

  962. top: -530px;

  963. left: 500px;

  964. opacity: 0;

  965. } 

  966. 

  967. 

  968. #more2882 .borderRBL {

  969.   background: cyan;

  970.   position: absolute;

  971.   top: -1200px;

  972.   left: 500px;

  973.   font-size: 0;

  974. opacity: 0;

  975. }

  976. 

  977. 

  978. /***************************

  979. ON HOLD TEXT

  980. ***************************/

  981. 

  982. .header_onhold:after{

  983. 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...";

  984. font-size: 14px;

  985. font-family: 'Aldrich', sans-serif;

  986. 

  987. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  988. border-style: solid;

  989. border-width: 1px;

  990. padding: 4px;

  991. 

  992. display: block;

  993. z-index: -2 !Important;

  994. top: 25%;

  995. left: 28%;

  996. right: 0;

  997. position: fixed !important;

  998. background-position:top center;

  999. background-attachment: fixed;

  1000. background-size: cover;

  1001. height: 16%;

  1002. width: 25%;

  1003. animation-name: darktext;

  1004. animation-duration: 300s;

  1005. animation-iteration-count: infinite;

  1006. }

  1007. 

  1008. @-moz-keyframes darktext /* Firefox */

  1009. {

  1010. 0% {opacity: 0;}

  1011. 2% {opacity: 0;}

  1012. 3% {opacity: 1;}

  1013. 14% {opacity: 1;}

  1014. 15% {opacity: 0;}

  1015. 100% {opacity: 0;}

  1016. }

  1017. 

  1018. @-webkit-keyframes darktext /* Safari and Chrome */

  1019. {

  1020. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  1021. 2% {color: transparent; background-color: transparent; border-color: transparent;}

  1022. 3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1023. 14% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1024. 15% {color: transparent; background-color: transparent; border-color: transparent;}

  1025. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  1026. }

  1027. 

  1028. .header_onhold:after{

  1029. margin: auto !important;

  1030. }

  1031. 

  1032. 

  1033. 

  1034. 

  1035. /***************************

  1036. DROPPED BACKGROUND

  1037. ***************************/

  1038. 

  1039. .header_dropped span:before{

  1040. content: "";

  1041. background-image:url(http://i.imgur.com/VaOE7Nu.jpg);

  1042. background-color: black;

  1043. z-index: -3 !Important;

  1044. top: 0;

  1045. left: 0;

  1046. position: fixed !important;

  1047. background-position:bottom center;

  1048. background-attachment: fixed;

  1049. background-repeat: no-repeat;

  1050. background-size: cover;

  1051. height: 100%;

  1052. width: 100%;

  1053. }

  1054. 

  1055. .header_dropped span:after{

  1056. content: "";

  1057. z-index: -2 !Important;

  1058. top: 0;

  1059. left: 0;

  1060. position: fixed !important;

  1061. background-attachment: fixed;

  1062. background-repeat: no-repeat;

  1063. background-image: url(http://i.imgur.com/kEnHttg.png);

  1064. background-size: 12%;

  1065. height: 100%;

  1066. width: 100%;

  1067. background-color: rgba(20,0,0,.7); 

  1068. background-position: center 50%; 

  1069. opacity:1;

  1070. 

  1071. animation-name: attack;

  1072. animation-duration: 100s;

  1073. animation-iteration-count: 1;

  1074. }

  1075. 

  1076. @-moz-keyframes attack /* Firefox */

  1077. {

  1078. 0% {background-color: transparent; background-position: center 50%; opacity:0;}

  1079. 16%{background-color: transparent; background-position: center 50%; opacity:0;}

  1080. 21% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1081. 22% {background-color: transparent; background-position: center 50%; opacity:1;}

  1082. 22.1% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1083. 22.2% {background-color: transparent; background-position: center 50%; opacity:1;}

  1084. 22.3% {background-color: transparent; background-position: center 50%; opacity:1;}

  1085. 22.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1086. 22.5% {background-color: transparent; background-position: center 50%; opacity:1;}

  1087. 22.6% {background-color: transparent; background-position: center 50%; opacity:1;}

  1088. 22.7% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1089. 22.8% {background-color: transparent; background-position: center 50%; opacity:1;}

  1090. 22.9% {background-color: transparent; background-position: center 50%; opacity:1;}

  1091. 23% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1092. 23.1% {background-color: transparent; background-position: center 50%; opacity:1;}

  1093. 23.2% {background-color: transparent; background-position: center 50%; opacity:1;}

  1094. 23.3% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1095. 23.4% {background-color: transparent; background-position: center 50%; opacity:1;}

  1096. 28.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; opacity:1;}

  1097. 32.4% {background-color: rgba(20,0,0,.7); background-position: center 50%; opacity:1;}

  1098. 100% {background-color: rgba(20,0,0,.7); background-position: center 50%; opacity:1;}

  1099. }

  1100. 

  1101. @-webkit-keyframes attack /* Safari and Chrome */

  1102. {

  1103. 0% {background-color: transparent; background-position: -100% 50%; }

  1104. 16%{background-color: transparent; background-position: -100% 50%; }

  1105. 20.99% {background-color: rgba(0,0,0,.7); background-position: -100% 50%; }

  1106. 21% {background-color: rgba(0,0,0,.7); background-position: center 50%;}

  1107. 22% {background-color: transparent; background-position: center 50%; }

  1108. 22.1% {background-color: rgba(0,0,0,.7); background-position: center 50%; }

  1109. 22.2% {background-color: transparent; background-position: center 50%; }

  1110. 22.3% {background-color: transparent; background-position: center 50%; }

  1111. 22.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; }

  1112. 22.5% {background-color: transparent; background-position: center 50%; }

  1113. 22.6% {background-color: transparent; background-position: center 50%; }

  1114. 22.7% {background-color: rgba(0,0,0,.7); background-position: center 50%; }

  1115. 22.8% {background-color: transparent; background-position: center 50%; }

  1116. 22.9% {background-color: transparent; background-position: center 50%; }

  1117. 23% {background-color: rgba(0,0,0,.7); background-position: center 50%; }

  1118. 23.1% {background-color: transparent; background-position: center 50%; }

  1119. 23.2% {background-color: transparent; background-position: center 50%; }

  1120. 23.3% {background-color: rgba(0,0,0,.7); background-position: center 50%; }

  1121. 23.4% {background-color: transparent; background-position: center 50%; }

  1122. 28.4% {background-color: rgba(0,0,0,.7); background-position: center 50%; }

  1123. 32.4% {background-color: rgba(20,0,0,.7); background-position: center 50%; }

  1124. 100% {background-color: rgba(20,0,0,.7); background-position: center 50%; }

  1125. }

  1126. 

  1127. 

  1128. 

  1129. 

  1130. /***************************

  1131. DROPPED TEXT

  1132. ***************************/

  1133. 

  1134. .header_dropped:before{

  1135. 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??";

  1136. font-size: 14px;

  1137. font-family: 'Aldrich', sans-serif;

  1138. 

  1139. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  1140. border-style: solid;

  1141. border-width: 1px;

  1142. padding: 4px;

  1143. 

  1144. display: block;

  1145. z-index: -2 !Important;

  1146. top: 4%;

  1147. left: 28%;

  1148. right: 0;

  1149. position: fixed !important;

  1150. background-position:top center;

  1151. background-attachment: fixed;

  1152. background-size: cover;

  1153. height: 14%;

  1154. width: 25%;

  1155. animation-name: droppedtext;

  1156. animation-duration: 100s;

  1157. animation-iteration-count: infinite;

  1158. }

  1159. 

  1160. @-moz-keyframes droppedtext /* Firefox */

  1161. {

  1162. 0% {opacity: 0;}

  1163. 6% {opacity: 0;}

  1164. 7% {opacity: 1;}

  1165. 20% {opacity: 1;}

  1166. 21% {opacity: 0;}

  1167. 100% {opacity: 0;}

  1168. }

  1169. 

  1170. @-webkit-keyframes droppedtext /* Safari and Chrome */

  1171. {

  1172. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  1173. 6% {color: transparent; background-color: transparent; border-color: transparent;}

  1174. 7% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1175. 20% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1176. 21% {color: transparent; background-color: transparent; border-color: transparent;}

  1177. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  1178. }

  1179. 

  1180. .header_dropped:before{

  1181. margin: auto !important;

  1182. }

  1183. 

  1184. 

  1185. 

  1186. 

  1187. .header_dropped:after{

  1188. 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!";

  1189. font-family: 'Aldrich', sans-serif;

  1190. font-size: 14px;

  1191. 

  1192. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  1193. border-style: solid;

  1194. border-width: 1px;

  1195. padding: 4px;

  1196. 

  1197. display: block;

  1198. z-index: 0 !Important;

  1199. top: 4%;

  1200. left: 27%;

  1201. right: 0;

  1202. position: fixed !important;

  1203. background-position:top center;

  1204. background-attachment: fixed;

  1205. background-size: cover;

  1206. height: 10%;

  1207. width: 26%;

  1208. z-index: 0 !important;

  1209. opacity: 1;

  1210. animation-name: ghosttext;

  1211. animation-duration: 100s;

  1212. animation-iteration-count: infinite;

  1213. }

  1214. 

  1215. @-moz-keyframes ghosttext /* Firefox */

  1216. {

  1217. 0% {opacity: 0;}

  1218. 24% {opacity: 0;}

  1219. 25% {opacity: 1;}

  1220. 39% {opacity: 1;}

  1221. 40% {opacity: 0;}

  1222. 100% {opacity: 0;}

  1223. }

  1224. 

  1225. @-webkit-keyframes ghosttext /* Safari and Chrome */

  1226. {

  1227. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  1228. 24% {color: transparent; background-color: transparent; border-color: transparent;}

  1229. 25% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1230. 39% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1231. 40% {color: transparent; background-color: transparent; border-color: transparent;}

  1232. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  1233. }

  1234. 

  1235. 

  1236. .header_dropped:after{

  1237. margin: auto !important;

  1238. }

  1239. 

  1240. 

  1241. 

  1242. 

  1243. 

  1244. /***************************

  1245. PTW BACKGROUNDS

  1246. ***************************/

  1247. 

  1248. 

  1249. .header_ptw span:before{

  1250. content: "";

  1251. background-image:url(http://i.imgur.com/fu24T4U.jpg);

  1252. background-color: black;

  1253. z-index: -3 !Important;

  1254. top: 0;

  1255. left: 0;

  1256. position: fixed !important;

  1257. background-position:top center;

  1258. background-attachment: fixed;

  1259. background-repeat: no-repeat;

  1260. background-size: cover;

  1261. height: 100%;

  1262. width: 100%;

  1263. }

  1264. 

  1265. 

  1266. .header_ptw span:after{

  1267. content: "";

  1268. background-image:url(http://i.imgur.com/ihMqH90.png);

  1269. background-color: transparent;

  1270. z-index: -3 !Important;

  1271. bottom: 0;

  1272. left: 0;

  1273. position: fixed !important;

  1274. background-position:center top;

  1275. background-attachment: fixed;

  1276. background-repeat: no-repeat;

  1277. background-size: contain;

  1278. height: 100%;

  1279. width: 100%;

  1280. }

  1281. 

  1282. /***************************

  1283. PTW TEXT

  1284. ***************************/

  1285. 

  1286. 

  1287. .header_ptw:before{

  1288. content: "AHHH! ITS YUNO! AND SHES GOT THAT YANDERE LOOK IN HER EYES! YOU'RE DEAD FOR SURE. WELL... BYE!";

  1289. font-size: 14px;

  1290. font-family: 'Aldrich', sans-serif;

  1291. 

  1292. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  1293. border-style: solid;

  1294. border-width: 1px;

  1295. padding: 4px;

  1296. 

  1297. display: block;

  1298. z-index: -2 !Important;

  1299. top: 4%;

  1300. left: 28%;

  1301. right: 0;

  1302. position: fixed !important;

  1303. background-position:top center;

  1304. background-attachment: fixed;

  1305. background-size: cover;

  1306. height: 14%;

  1307. width: 25%;

  1308. animation-name: cowardtext;

  1309. animation-duration: 500s;

  1310. animation-iteration-count: 1;

  1311. }

  1312. 

  1313. @-moz-keyframes cowardtext /* Firefox */

  1314. {

  1315. 0% {opacity: 0;}

  1316. 1.2% {opacity: 0;}

  1317. 1.3% {opacity: 1;}

  1318. 2.5% {opacity: 1;}

  1319. 2.6% {opacity: 0;}

  1320. 100% {opacity: 0;}

  1321. }

  1322. 

  1323. @-webkit-keyframes cowardtext /* Safari and Chrome */

  1324. {

  1325. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  1326. 1.2% {color: transparent; background-color: transparent; border-color: transparent;}

  1327. 1.3% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1328. 2.5% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1329. 2.6% {color: transparent; background-color: transparent; border-color: transparent;}

  1330. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  1331. }

  1332. 

  1333. .header_ptw:before{

  1334. margin: auto !important;

  1335. }

  1336. 

  1337. 

  1338. 

  1339. 

  1340. .header_ptw:after{

  1341. 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.' ";

  1342. font-family: 'Aldrich', sans-serif;

  1343. font-size: 14px;

  1344. 

  1345. color: white; background-color: rgba(0,0,0,.85); border-color: white;

  1346. border-style: solid;

  1347. border-width: 1px;

  1348. padding: 4px;

  1349. 

  1350. display: block;

  1351. z-index: -2 !Important;

  1352. top: 20%;

  1353. left: -27%;

  1354. right: 0;

  1355. position: fixed !important;

  1356. background-position:top center;

  1357. background-attachment: fixed;

  1358. background-size: cover;

  1359. height: 16%;

  1360. width: 26%;

  1361. opacity: 1;

  1362. animation-name: Yunotext;

  1363. animation-duration: 100s;

  1364. animation-iteration-count: infinite;

  1365. }

  1366. 

  1367. @-moz-keyframes Yunotext /* Firefox */

  1368. {

  1369. 0% {opacity: 0;}

  1370. 14% {opacity: 0;}

  1371. 15% {opacity: 1;}

  1372. 49% {opacity: 1;}

  1373. 50% {opacity: 0;}

  1374. 100% {opacity: 0;}

  1375. }

  1376. 

  1377. @-webkit-keyframes Yunotext /* Safari and Chrome */

  1378. {

  1379. 0% {color: transparent; background-color: transparent; border-color: transparent;}

  1380. 14% {color: transparent; background-color: transparent; border-color: transparent;}

  1381. 15% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1382. 49% {color: white; background-color: rgba(0,0,0,.85); border-color: white;}

  1383. 50% {color: transparent; background-color: transparent; border-color: transparent;}

  1384. 100% {color: transparent; background-color: transparent; border-color: transparent;}

  1385. }

  1386. 

  1387. 

  1388. .header_ptw:after{

  1389. margin: auto !important;

  1390. } 

  1391. 

  1392. 

  1393. /***************************

  1394. EXIT

  1395. ***************************/

  1396. 

  1397. a#xmenu1583 {background: red;

  1398. position: absolute;

  1399.   top: -800px;

  1400.   left: 300px;

  1401.   height: 850px;

  1402.   width: 300px;

  1403.   opacity: 0;

  1404. }

  1405. 

  1406. #more1583 .borderRBL{

  1407.   background-color: rgba(0,0,0,.9);

  1408.   box-shadow: 0px 0px 20px 10px rgba(255,0,0,1);

  1409.   position: absolute;

  1410.   top: -700px;

  1411.   left: 00px;

  1412.   width: 600px;

  1413.   height: 300px;

  1414.   color: transparent !important;

  1415.   font-size: 0 !important;

  1416. }

  1417. 

  1418. 

  1419. #more1583 .borderRBL a{

  1420.   color: transparent ;

  1421.   font-size: 0 ;

  1422. } 

  1423. 

  1424. 

  1425. a[href="http://myanimelist.net/profile/Shishio-kun"]{

  1426.     color: white !important;

  1427.   background-color: transparent;

  1428.     background-image: url(http://i.imgur.com/fuwDR93.png);

  1429. background-size: 40%;

  1430. background-position: center bottom;

  1431. background-repeat: no-repeat;

  1432.   font-size: 16px !important;

  1433.   top: -200px;

  1434.   position: relative;

  1435.  padding-bottom: 260px;

  1436.  padding-left: 20px;

  1437.  width: 500px;

  1438. }

  1439. 

  1440. 

  1441. 

  1442. 

  1443. 

  1444. /***************************

  1445. RESOLUTION COMPATIBILITY

  1446. ***************************/

  1447. 

  1448. 

  1449. /* Media query for normal devices*/

  1450. @media all and (min-device-width:1px) {

  1451. 

  1452. #list_surround {

  1453. width: 530px;

  1454. }

  1455.   

  1456.  #mal_cs_pic:before {

  1457.    font-size: 40px;

  1458.  }

  1459. 

  1460. .header_cw:after{

  1461. height: 18%;

  1462. }

  1463. 

  1464. .header_cw span:after{

  1465. height: 20%;

  1466. }

  1467. 

  1468. .header_cw:before {

  1469. height: 10%;

  1470. }

  1471. 

  1472. 

  1473. .header_completed:after{

  1474. height: 27%;

  1475. }

  1476. 

  1477. .header_onhold:after{

  1478. height: 27%;

  1479. }

  1480. 

  1481. .header_dropped:after{

  1482. height: 17%;

  1483. }

  1484. 

  1485. .header_dropped:before{

  1486. height: 21%;

  1487. }

  1488. 

  1489. .header_ptw:before{

  1490. height: 14%;}

  1491. 

  1492. .header_ptw:after{

  1493. height: 27%;}

  1494.   

  1495. }

  1496. 

  1497. /* Media query for devices above 1280px */

  1498. @media all and (min-device-width:1281px) {

  1499.  

  1500. 

  1501. #list_surround {

  1502. width: 700px;

  1503.   }

  1504. 

  1505.  #mal_cs_pic:before {

  1506.    font-size: 60px;

  1507.  }

  1508. 

  1509. .header_cw:after{

  1510. height: 10%;

  1511. }

  1512. 

  1513. .header_cw span:after{

  1514. height: 10%;

  1515. }

  1516. 

  1517. .header_cw:before {

  1518. height: 10%;

  1519. }

  1520. 

  1521. 

  1522. .header_completed:after{

  1523. height: 21%;

  1524. }

  1525. 

  1526. .header_onhold:after{

  1527. height: 16%;

  1528. }

  1529. 

  1530. .header_dropped:after{

  1531. height: 10%;

  1532. }

  1533. 

  1534. .header_dropped:before{

  1535. height: 14%;

  1536. }

  1537. 

  1538. .header_ptw:before{

  1539. height: 14%;}

  1540. 

  1541. .header_ptw:after{

  1542. height: 16%;}

  1543. 

  1544. }

  1545. 

  1546. /* Media query for devices above 1366px */

  1547. @media all and (min-device-width:1599px) {

  1548.   

  1549. 

  1550. #list_surround {

  1551. width: 800px;

  1552.  }

  1553.   

  1554. #mal_cs_pic:before {

  1555.    font-size: 70px;

  1556.  }

  1557. 

  1558. #mal_cs_listinfo strong:nth-child(1) a {

  1559.   left: 84%;

  1560.   font-size: 80px;

  1561. }

  1562. 

  1563. .header_cw:after{

  1564. font-size: 16px;

  1565. }

  1566. 

  1567. .header_cw span:after{

  1568. font-size: 17px;

  1569. }

  1570. 

  1571. .header_cw:before {

  1572. font-size: 17px;

  1573. }

  1574. 

  1575. 

  1576. .header_completed:after{

  1577. font-size: 17px;

  1578. }

  1579. 

  1580. .header_onhold:after{

  1581. font-size: 17px;

  1582. }

  1583. 

  1584. .header_dropped:after{

  1585. font-size: 17px;

  1586. }

  1587. 

  1588. .header_dropped:before{

  1589. font-size: 17px;

  1590. }

  1591. 

  1592. .header_ptw:before{

  1593. font-size: 17px;

  1594. }

  1595. 

  1596. .header_ptw:after{

  1597. font-size: 17px;}

  1598. 

  1599. }

  1600. 

  1601. /* Media query for devices above 1920px */

  1602. @media all and (min-device-width:1921px) {

  1603. 

  1604. 

  1605. #list_surround {

  1606. width: 900px;

  1607.   }

  1608. 

  1609. #mal_cs_listinfo strong:nth-child(1) a {

  1610.   left: 83%;

  1611. }

  1612. 

  1613.     

  1614. #mal_cs_pic:before {

  1615.    font-size: 80px;

  1616. }

  1617. 

  1618.   

  1619. .header_cw:after{

  1620. font-size: 20px;

  1621. }

  1622. 

  1623. .header_cw span:after{

  1624. font-size: 20px;

  1625. }

  1626. 

  1627. .header_cw:before {

  1628. font-size: 20px;

  1629. }

  1630. 

  1631. .header_completed:after{

  1632. font-size: 20px;

  1633. }

  1634. 

  1635. .header_onhold:after{

  1636. font-size: 20px;

  1637. }

  1638. 

  1639. .header_dropped:after{

  1640. font-size: 20px;

  1641. }

  1642. 

  1643. .header_dropped:before{

  1644. font-size: 20px;

  1645. }

  1646. 

  1647. .header_ptw:before{

  1648. font-size: 20px;

  1649. }

  1650. 

  1651. .header_ptw:after{

  1652. font-size: 20px;

  1653. }

  1654. 

  1655. }

  1656. 

  1657. 

  1658. 

  1659. /***************************

  1660. COVERS (never got added!)

  1661. ***************************/

  1662. 

  1663. 

  1664. /***************************

  1665. CREDITS

  1666. ***************************/

  1667. 

  1668. #copyright:after{

  1669. 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!"}