API tools faq
paste
Advertisement
ValerioLyndon

Patch for GochiUsa by Takana no Hana 19-08-09 Light

ValerioLyndon
Apr 10th, 2019
260
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 60.03 KB | None | 0 0
raw download clone embed print report
  1. /* A GochiUsa layout for modern CSS
  2. ** Visit Shishio's club for more premade layouts
  3. ** You can customize a few things in this layout
  4. **
  5. */
  6.  
  7.  
  8. /* General codes */
  9.  
  10. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/datatitleafter";
  11. @\import "https://fonts.googleapis.com/css?family=Orbitron";
  12. @\import "http://fonts.googleapis.com/css?family=Amaranth";
  13. @\import "https://fonts.googleapis.com/css?family=Rancho";
  14. @\import "https://fonts.googleapis.com/css?family=Romanesco";
  15. #advanced-options {
  16.     position: fixed;
  17.     top: 24px;
  18.     left: 0;
  19.     right: 0;
  20.     background-color: #F6F6F6;
  21.     display: none;
  22.     width: 860px;
  23.     margin: 0 auto;
  24.     padding: 25px 0px 30px;
  25.     -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  26.     -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  27.     -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  28.     -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  29.     box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  30.     color: #323232;
  31.     text-align: left;
  32.     font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  33.     z-index: 1101;
  34.     border: 5px solid rgba(255,255,255, 0.7);
  35. background-image: url(http://i.imgur.com/4bgsxkl.png);
  36.     background-repeat: no-repeat;
  37.     background-size: contain;
  38.     background-position: 50% 50%;   }
  39.    
  40. #advanced-options .advanced-options-header {
  41.     width: 750px;
  42.     margin: 0px auto;
  43.     padding-bottom: 4px;
  44.     border-bottom: 1px solid #BEBEBE;
  45.     font-size: 16px;
  46.     color:#fff !important;
  47. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 5px #000, 0 0 0 #000 !important;
  48. }
  49.  
  50.  
  51. #advanced-options .advanced-options-header .description {
  52.     font-size: 12px;
  53.     font-weight: normal;
  54.     margin-left: 8px;
  55.     color:#fff !important;
  56. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 5px #000, 0 0 0 #000 !important;
  57. }
  58.  
  59. #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header, #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text {
  60. color:#fff !important;
  61. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 5px #000, 0 0 0 #000 !important;
  62. }
  63.  
  64. #advanced-options select {
  65.     -ms-appearance: none;
  66.     -webkit-appearance: none;
  67.     -moz-appearance: none;
  68.     appearance: none;
  69.     background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png);
  70.     background-repeat: no-repeat;
  71.     background-position: center right;
  72.     background-size: 18px 8px;
  73.     background-color: #FFFFFF;
  74.     display: inline-block;
  75.     height: 25px;
  76.     padding: 4px 20px 4px 4px;
  77.     padding-right: 4px\0;
  78.     border: #BEBEBE 1px solid;
  79.     border-radius: 0px;
  80.     font-size: 12px;
  81. }
  82. #advanced-options select::-ms-expand {
  83.     display: none;
  84. }
  85.  
  86. #advanced-options select:disabled {
  87.     background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png);
  88.     color: #9B9B9B;
  89. }
  90.  
  91. #advanced-options input[type=text] {
  92.     padding: 4px;
  93.     border: #BEBEBE 1px solid;
  94. }
  95.  
  96. #advanced-options input:focus {
  97.     outline: none;
  98. }
  99.  
  100.  
  101. /* sort */
  102. #advanced-options .sort-widget {
  103.     margin: 0px auto;
  104.     padding: 12px 0px 0px;
  105.     width: 750px;
  106. }
  107. #advanced-options .sort-widget:last-of-type {
  108.     padding-bottom: 45px;
  109. }
  110.  
  111. #advanced-options .sort-widget select {
  112.     width: 172px;
  113.     margin-right: 8px;
  114. }
  115.  
  116. #advanced-options .sort-widget input[type=radio] {
  117.     display: none;
  118. }
  119. #advanced-options .sort-widget input[type=radio] + label {
  120.     background-color: #FFFFFF;
  121.     display: inline-block;
  122.     width: 56px;
  123.     padding: 5px 0px;
  124.     border: #BEBEBE 1px solid;
  125.     border-radius: 4px;
  126.     color: #323232;
  127.     font-size: 12px;
  128.     text-align: center;
  129.     cursor: pointer;
  130. }
  131. #advanced-options .sort-widget input[type=radio]:checked + label {
  132.     background-color: #244291;
  133.     border: #244291 1px solid;
  134.     color: #FFFFFF;
  135. }
  136. #advanced-options .sort-widget input[type=radio]:disabled + label {
  137.     border: #BEBEBE 1px solid;
  138.     color: #9B9B9B;
  139. }
  140. #advanced-options .sort-widget input[type=radio]:checked:disabled + label {
  141.     background-color: #FFFFFF;
  142.     border: #BEBEBE 1px solid;
  143.     color: #9B9B9B;
  144. }
  145.  
  146. /* filter */
  147. #advanced-options .filter-widget {
  148.     margin: 0px auto;
  149.     padding: 12px 0px 0;
  150.     width: 750px;
  151. }
  152.  
  153. #advanced-options .filter-widget select {
  154.     margin-right: 8px;
  155.     font-size: 12px;
  156. }
  157.  
  158. #advanced-options .filter-widget.title input[type=text] {
  159.     width: 360px;
  160. }
  161.  
  162. #advanced-options .filter-widget.airing-status select,
  163. #advanced-options .filter-widget.publishing-status select {
  164.     width: 152px;
  165. }
  166.  
  167. #advanced-options .filter-widget.producer select,
  168. #advanced-options .filter-widget.magazine select {
  169.     width: 360px;
  170. }
  171.  
  172. #advanced-options .filter-widget.aired-date select.year,
  173. #advanced-options .filter-widget.published-date select.year {
  174.     width: 80px;
  175. }
  176.  
  177. #advanced-options .filter-widget.aired-date select.month,
  178. #advanced-options .filter-widget.published-date select.month,
  179. #advanced-options .filter-widget.aired-date select.day,
  180. #advanced-options .filter-widget.published-date select.day {
  181.     width: 60px;
  182. }
  183.  
  184. #advanced-options .filter-widget.aired-date .text,
  185. #advanced-options .filter-widget.published-date .text {
  186.     display: inline-block;
  187.     margin-right: 4px;
  188.     font-size: 12px;
  189. }
  190.  
  191. #advanced-options .filter-widget.aired-season select.year {
  192.     width: 80px;
  193. }
  194.  
  195. #advanced-options .filter-widget.aired-season select.season {
  196.     width: 110px;
  197. }
  198.  
  199. #advanced-options .sort-widget .widget-header,
  200. #advanced-options .filter-widget .widget-header {
  201.     display: inline-block;
  202.     width: 110px;
  203.     font-size: 12px;
  204.     font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  205. }
  206.  
  207. #advanced-options .sort-widget:last-of-type,
  208. #advanced-options .filter-widget:last-of-type {
  209.     padding-bottom: 40px;
  210. }
  211.  
  212. #advanced-options .advanced-options-button {
  213.     width: 750px;
  214.     margin: 0px auto;
  215.     padding: 12px 0px 0px;
  216.     border-top: 1px solid #BEBEBE;
  217.     text-align: center;
  218. }
  219.  
  220. #advanced-options .btn-apply,
  221. #advanced-options .btn-clear {
  222.     background-color: rgba(36, 66, 145, 1);
  223.     display: inline-block;
  224.     width: 135px;
  225.     margin: 0 4px;
  226.     padding: 6px 0px;
  227.     border-radius: 4px;
  228.     font-size: 12px;
  229.     color: #FFFFFF;
  230.     text-align: center;
  231.     -moz-transition-property: all;
  232.     -o-transition-property: all;
  233.     -webkit-transition-property: all;
  234.     transition-property: all;
  235.     -moz-transition-duration: 0.3s;
  236.     -o-transition-duration: 0.3s;
  237.     -webkit-transition-duration: 0.3s;
  238.     transition-duration: 0.3s;
  239.     -moz-transition-timing-function: ease-in-out;
  240.     -o-transition-timing-function: ease-in-out;
  241.     -webkit-transition-timing-function: ease-in-out;
  242.     transition-timing-function: ease-in-out
  243. }
  244.  
  245. #advanced-options .btn-apply:hover,
  246. #advanced-options .btn-clear:hover {
  247.   background-color: rgba(36, 66, 145, 0.8);
  248. }
  249.  
  250.  
  251. td {
  252.     line-height: 1.5em;
  253.     height: 40px !important;
  254. }
  255.  
  256. a {
  257.     color: #000;
  258.     text-decoration: none;
  259. }
  260. a:hover {
  261.     color: #fff !important;
  262.     text-decoration: none;
  263. }
  264.  
  265. #footer-block {
  266.     padding: 15px 0;
  267.     background-color: #244291;
  268.     color: #FFFFFF;
  269.     font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif;
  270.     display:none;
  271. }
  272.  
  273. #copyright {
  274.     font-size: 12px;
  275.     color: #FFFFFF;
  276.     padding-top: 3px;
  277.     text-align: center;
  278. }
  279.  
  280. /*
  281.  * Header
  282.  */
  283. .header a {
  284.     font-weight: bold;
  285.     color: #fff !important;
  286. }
  287. .header a:hover {
  288.     text-decoration: underline;
  289. }
  290.  
  291.  
  292.  
  293. .header {
  294.     position: absolute;
  295.     color: #fff;
  296.     display: block;
  297.     width: 100%;
  298.     height: 50px;
  299.     top: 450px;
  300.     margin: 0 auto
  301.     border:none;
  302.     box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
  303.     z-index: 20;
  304.    
  305.   background: -webkit-linear-gradient(rgba(79,16,21,1), rgba(115,36,46,1), rgba(79,16,21,1)) !important; /* For Safari 5.1 to 6.0 */
  306.   background: -o-linear-gradient(rgba(79,16,21,1), rgba(115,36,46,1), rgba(79,16,21,1))!important; /* For Opera 11.1 to 12.0 */
  307.   background: -moz-linear-gradient(rgba(79,16,21,1), rgba(115,36,46,1), rgba(79,16,21,1))!important; /* For Firefox 3.6 to 15 */
  308.   background: linear-gradient(rgba(79,16,21,1), rgba(115,36,46,1), rgba(79,16,21,1))!important; /* Standard syntax */
  309. }
  310.  
  311. .header:before {
  312. top:0;
  313. content:"";
  314. display:block;
  315. height:50px;
  316. position:absolute;
  317. width:100%;
  318. z-index:-15 !important;
  319.      
  320.     background-image: url(http://i.imgur.com/OmmoTGd.png);
  321.     background-repeat: repeat-x;
  322.     background-size:contain;
  323. }
  324.  
  325. .header:after{
  326. /* Background image header */
  327. background-image:url(http://i.imgur.com/rFwqkZK.png);
  328. background-position:top;
  329. background-repeat:no-repeat;
  330. background-size:cover;
  331. top:10px;
  332. content:"";
  333. display:block;
  334. height:70px;
  335. position:absolute;
  336. width:258px;
  337. z-index:1;
  338. transform: translateX(-50%);
  339. left:50%;
  340. }
  341.  
  342.  
  343.  
  344. .header .header-menu {
  345.     position: absolute;
  346.     top: 5px;
  347.     right: 4px
  348. }
  349. .header .header-menu.other {
  350.     top: 5px;
  351. }
  352.  
  353.  
  354.  
  355. .header .header-menu .header-info {
  356.     font-size: 10px;
  357.     margin-top: 6px;
  358.     margin-right: 15px;
  359.     text-align: right;
  360. }
  361.  
  362. .header .username {
  363.     font-weight: bold;
  364. }
  365.  
  366. .header .header-menu .list-menu {
  367.     position: absolute;
  368.     top: 25px;
  369.     right: -4px;
  370.     background-color: #ffffff;
  371.     display: none;
  372.     border: #2E51A2 1px solid;
  373.     -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  374.     -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  375.     box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  376.     z-index: 1;
  377. }
  378.  
  379. .header .header-menu .list-menu .icon-menu {
  380.     display: block;
  381.     width: 150px;
  382.     height: 30px;
  383.     color: #2E51A2;
  384.     font-size: 14px;
  385.     font-weight: bold;
  386.     text-decoration: none;
  387.     -moz-transition-property: all;
  388.     -o-transition-property: all;
  389.     -webkit-transition-property: all;
  390.     transition-property: all;
  391.     -moz-transition-duration: 0.3s;
  392.     -o-transition-duration: 0.3s;
  393.     -webkit-transition-duration: 0.3s;
  394.     transition-duration: 0.3s;
  395.     -moz-transition-timing-function: ease-in-out;
  396.     -o-transition-timing-function: ease-in-out;
  397.     -webkit-transition-timing-function: ease-in-out;
  398.     transition-timing-function: ease-in-out;
  399. }
  400.  
  401. .header .header-menu .list-menu .icon-menu:hover {
  402.     background-color: #e1e7f5
  403. }
  404.  
  405. .header .header-menu .list-menu .icon-menu svg.icon {
  406.     position: absolute;
  407.     fill: #2E51A2;
  408.     left: 12px;
  409.     top: 4px;
  410. }
  411.  
  412. .header .header-menu .list-menu .icon-menu .text {
  413.     position: absolute;
  414.     left: 52px;
  415.     top: 6px;
  416. }
  417.  
  418. .header .header-menu .btn-menu {
  419. display: block;
  420.     text-align: right;
  421. color: rgba(255,255,255,0.8) !important;
  422. font-size: 12px !important;
  423. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  424. }
  425.  
  426.  
  427. /**
  428.  * Floating Menu
  429.  */
  430. .list-menu-float
  431. {
  432.   position: absolute;
  433.   display: block;
  434.   width: 60px;
  435.   height: 60px;
  436.   overflow: hidden;
  437.   z-index: 100;
  438.   transition: width 0.3s ease-in-out;
  439.   left: 50%;
  440.   transform: translateX(-50%);
  441.   right: auto;
  442.   top: 450px;
  443.   margin-top: 15px !important;
  444.   background: transparent; /* Standard syntax */
  445.   border-bottom: none;
  446.   border-right: none;
  447.   border-left: none;
  448.   border-top: none;
  449. }
  450.  
  451. .list-menu-float:hover
  452. {
  453.   width: 700px;
  454. }
  455.  
  456. .list-menu-float .icon-menu
  457. {
  458.   position: absolute;
  459.   background-color: transparent !important;
  460.   display: block;
  461.   width: 0px;
  462.   height: 0px;
  463.   opacity: 1;
  464.  
  465. }
  466.  
  467. .list-menu-float .icon-menu svg.icon
  468. {
  469.   position: absolute;
  470.   fill: rgba(255,255,255,.6);
  471. }
  472.  
  473. .list-menu-float .icon-menu:hover svg.icon
  474. {
  475.   position: absolute;
  476.   fill: rgba(255,255,255,1);
  477. }
  478.  
  479. .list-menu-float .icon-menu.profile
  480. {
  481. position: fixed;
  482.   width: 60px;
  483.   height: 60px;
  484.   background-size: cover;
  485.   left: 0px;
  486.  border-radius:180px;
  487.  -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  488.     -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  489.     box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  490.     display:inline-block!important;
  491.  
  492. }
  493.  
  494.  
  495. .list-menu-float .icon-menu.profile:before
  496. {
  497.   position: fixed;
  498.   width: 60px;
  499.   height: 6px;
  500. /*  content: '+';*/
  501.   background-color: transparent;
  502.   content: '';
  503.   font-size: 35px;
  504.   left: 0px;
  505.   background-image: url("");
  506.   background-position: bottom center;
  507.   background-repeat: no-repeat;
  508.   background-size: 45px auto;
  509.   color: rgb(74,72,73);
  510.  
  511. }
  512.  
  513. .list-menu-float:hover .icon-menu.profile:before
  514. {
  515.   visibility: hidden;
  516. }
  517.  
  518. .list-menu-float:hover .icon-menu.profile {
  519. position: fixed;
  520. left: 50%;
  521.   transform: translateX(-50%);
  522. }
  523.  
  524. .list-menu-float .icon-menu.quick-add
  525. {
  526.   margin-left: 0px;
  527.   margin-top: 0px;
  528. }
  529.  
  530. .list-menu-float .icon-menu.quick-add svg.icon-quick-add
  531. {
  532.   margin-left: 120px;
  533.   margin-top: -10px;
  534. }
  535.  
  536. .list-menu-float .icon-menu.anime-list
  537. {
  538.   margin-left: 0px;
  539.   margin-top: 0px;
  540. }
  541.  
  542. .list-menu-float .icon-menu.anime-list svg.icon-anime-list
  543. {
  544.   margin-left: 150px;
  545.   margin-top: -10px;
  546. }
  547.  
  548. .list-menu-float .icon-menu.manga-list
  549. {
  550.   margin-left: 180px;
  551.   margin-top: -10px;
  552. }
  553.  
  554. .list-menu-float .icon-menu.manga-list svg.icon-manga-list
  555. {
  556.   margin-right: 0px;
  557.   margin-top: 0px;
  558. }
  559.  
  560. .list-menu-float .icon-menu.history
  561. {
  562.   margin-left: 470px;
  563.   margin-top: -10px;
  564. }
  565.  
  566. .list-menu-float .icon-menu.history svg.icon-history
  567. {
  568.   margin-left: 0px;
  569.   margin-top: 0px;
  570. }
  571.  
  572. .list-menu-float .icon-menu.login
  573. {
  574.   margin-left: 170px;
  575.   margin-top: -10px;
  576. }
  577.  
  578. .list-menu-float .icon-menu.login svg.icon-login
  579. {
  580.   margin-left: 0px;
  581.   margin-top: 0px;
  582. }
  583.  
  584. .list-menu-float .icon-menu.logout
  585. {
  586.   margin-left: 500px;
  587.   margin-top: -10px;
  588. }
  589.  
  590. .list-menu-float .icon-menu.logout svg.icon-logout
  591. {
  592.   margin-left: 0px;
  593.   margin-top: 0px;
  594. }
  595.  
  596. .list-menu-float .icon-menu.export
  597. {
  598.   margin-left: 530px;
  599.   margin-top: -10px;
  600. }
  601.  
  602. .list-menu-float .icon-menu.export svg.icon-export
  603. {
  604.   margin-left: 0px;
  605.   margin-top: -3px;
  606. }
  607.  
  608. .list-menu-float .icon-menu.setting
  609. {
  610.   margin-left: 230px;
  611.   margin-top: 0px;
  612. }
  613.  
  614. .list-menu-float .icon-menu.setting svg.icon-setting
  615. {
  616.   margin-left: 0px;
  617.   margin-top: 0px;
  618. }
  619.  
  620. .list-menu-float .icon-menu:not(.profile):hover
  621. {
  622.   background-color: transparent;
  623.   width: 0px;
  624. }
  625.  
  626. .list-menu-float .icon-menu.setting .text
  627. {
  628.   height: 50px;
  629.   top: 0px;
  630.   width: 0px;
  631.   opacity: 0;
  632.  
  633.   font-size: 13px;
  634. }
  635.  
  636. .list-menu-float .icon-menu.setting:hover .text
  637. {
  638.   height: 50px;
  639.   top: 0px;
  640.   width: 80px;
  641.   opacity: 1
  642. }
  643.  
  644. .list-menu-float .icon-menu.setting .text .link-list-setting,
  645. .list-menu-float .icon-menu.setting .text .link-style-setting
  646. {
  647.   display: block;
  648.   opacity: 0;
  649. }
  650.  
  651. .list-menu-float .icon-menu.setting:hover .text .link-list-setting,
  652. .list-menu-float .icon-menu.setting:hover .text .link-style-setting
  653. {
  654.   height: 25px;
  655.   line-height: 25px;
  656.   background-color: white;
  657.   color: rgb(74,72,73);
  658.   position: absolute;
  659.   display: block;
  660.   width: 80px;
  661.   text-decoration: none;
  662.   opacity: 1;
  663. }
  664.  
  665. .list-menu-float .icon-menu.setting:hover .text .link-list-setting
  666. {
  667.   top: 0px;
  668. }
  669.  
  670. .list-menu-float .icon-menu.setting:hover .text .link-style-setting
  671. {
  672.   border-top: rgb(74,72,73) 1px solid;
  673.   top: 25px;
  674. }
  675. .list-menu-float .icon-menu:not(.setting) .text,
  676. .list-menu-float .icon-menu:not(.setting):hover .text {display: none;}
  677.  
  678. /* setting */
  679. .list-menu-float .icon-menu.setting .text {
  680.     top: 0px;
  681.     width: 0px;
  682.     height: 50px;
  683.     opacity: 0;
  684.    
  685. }
  686. .list-menu-float .icon-menu.setting:hover .text {
  687.     top: 0px;
  688.     width: 114px;
  689.     height: 100px;
  690.     opacity: 1
  691. }
  692.  
  693. .list-menu-float .icon-menu.setting .text .link-list-setting,
  694. .list-menu-float .icon-menu.setting .text .link-style-setting {
  695.     display: block;
  696.     opacity: 0;
  697. }
  698.  
  699. .list-menu-float .icon-menu.setting:hover .text .link-list-setting,
  700. .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  701.     position: absolute;
  702.     background: linear-gradient(rgba(71, 49, 121, 0.9), rgba(15, 5, 32, 1)); /* Standard syntax */
  703.     display: block;
  704.     width: 110px;
  705.     height: 50px;
  706.     line-height: 25px;
  707.     text-decoration: none;
  708.     color: #ffffff;
  709.     opacity: 1;
  710. }
  711. .list-menu-float .icon-menu.setting:hover .text .link-list-setting {
  712.     top: 0px;
  713. }
  714.  
  715.  
  716. svg.icon.icon-setting {display:none;}
  717.  
  718. /**
  719.  * List Container
  720.  */
  721.  
  722. .list-container {
  723.     position: absolute;
  724.     background-color: transparent !important;
  725.     width: 600px;
  726.     right: 16%;
  727.     margin-right: auto;
  728.     margin-left: auto;
  729.     text-align: left;
  730.     top: 550px;
  731.     margin:auto !important;
  732.     margin-bottom:30px !important;
  733.      min-height: 0;
  734.     border: 6px solid rgba(255,255,255, 0.7);
  735.         box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
  736. border-image: url(http://i.imgur.com/ilIkHet.png) 6 stretch;
  737.  
  738.  
  739. }
  740.  
  741. /**
  742.  * List Container - Cover Block
  743.  */
  744. .cover-block {
  745.     display: block;
  746.     width: 600px;
  747.     margin: 0 auto;
  748.     text-align: center;
  749.     vertical-align: middle;
  750. }
  751.  
  752. .cover-block .image-container {
  753.     display: table-cell;
  754.     padding-top: 0px;
  755.     width: 600px;
  756. }
  757.  
  758. .cover-block .image-container.hide {
  759.     display: none;
  760. }
  761.  
  762. .cover-block .image-container img {
  763.     max-width: 600px;
  764. }
  765.  
  766. /* setting icon */
  767. .cover-block .image-container .btn-list-setting {
  768.     display: none;
  769. }
  770.  
  771. .cover-block .image-container:hover .btn-list-setting {
  772.     display: block;
  773.     position: absolute;
  774.     top: 20px;
  775.     right: 28px;
  776.     padding: 8px;
  777.     border: rgba(255,255,255,0) 1px solid;
  778.     font-size: 14px;
  779.     color: #ffffff;
  780.     font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  781. }
  782.  
  783. .cover-block .image-container .btn-list-setting:hover {
  784.     position: absolute;
  785.     top: 20px;
  786.     right: 28px;
  787.     background-color: rgba(0,0,0,0.6);
  788.     padding: 8px;
  789.     border: none;
  790.     -moz-box-shadow: 0 0 4px #000000;
  791.     -webkit-box-shadow: 0 0 4px #000000;
  792.     -o-box-shadow: 0 0 4px #000000;
  793.     -ms-box-shadow: 0 0 4px #000000;
  794.     box-shadow: 0 0 4px #000000;
  795.     font-size: 14px;
  796.     color: #ffffff;
  797.     text-shadow: #323232 1px 1px 1px;
  798. }
  799.  
  800. .cover-block .image-container .btn-list-setting .fa-camera {
  801.     font-size: 16px;
  802.     -moz-text-shadow: #000000 1px 1px 3px;
  803.     -webkit-text-shadow: #000000 1px 1px 3px;
  804.     -o-text-shadow: #000000 1px 1px 3px;
  805.     -ms-text-shadow: #000000 1px 1px 3px;
  806.     text-shadow: #000000 1px 1px 3px;
  807.     -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)";
  808. }
  809.  
  810. .cover-block .image-container .btn-list-setting .icon-plus-circle {
  811.     position: absolute;
  812.     top: 4px;
  813.     left: 18px;
  814.     background-color: rgba(0,0,0,0.6);
  815.     border-radius: 50%;
  816.     -moz-box-shadow: -1px 1px 0px 0px #323232;
  817.     -webkit-box-shadow: -1px 1px 0px 0px #323232;
  818.     -o-box-shadow: -1px 1px 0px 0px #323232;
  819.     -ms-box-shadow: -1px 1px 0px 0px #323232;
  820.     box-shadow: -1px 1px 0px 0px #323232;
  821.     font-size: 10px;
  822. }
  823.  
  824. .cover-block .image-container .btn-list-setting .text {
  825.   display: none;
  826. }
  827.  
  828. .cover-block .image-container .btn-list-setting:hover .text {
  829.   display: inline-block;;
  830.   margin-left: 4px;
  831. }
  832.  
  833.  
  834. /**
  835.  * List Container - Status Menu
  836.  */
  837.  
  838.  /* animation */
  839.  @keyframes shake {
  840.   10%, 90% {
  841.     transform: translate3d(-1px, 0, 0);
  842.   }
  843.  
  844.   20%, 80% {
  845.     transform: translate3d(2px, 0, 0);
  846.   }
  847.  
  848.   30%, 50%, 70% {
  849.     transform: translate3d(-4px, 0, 0);
  850.   }
  851.  
  852.   40%, 60% {
  853.     transform: translate3d(4px, 0, 0);
  854.   }
  855. }
  856.  
  857.  
  858.  .status-menu-container:before {
  859.  opacity: 1;
  860.     position: fixed;
  861.     display: block;
  862.     content: '';
  863.     left: 0px;
  864.     top: 0;
  865.     width: 110px;
  866.     height: 85px;
  867.     background-image: url(http://i.imgur.com/aR0b2Ji.png);
  868.     background-size: contain;
  869.     background-repeat: no-repeat;
  870.      -webkit-transition:all 0.2s ease-in-out 0.2s;
  871. transition: all 0.2s ease-in-out 0.2s;
  872.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  873.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  874.     z-index: 6;
  875.  }
  876.  
  877.  .status-menu-container:hover:before {
  878. animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
  879.   transform: translate3d(0, 0, 0);
  880.   backface-visibility: hidden;
  881.   perspective: 1000px;
  882.  opacity: 0;
  883.  margin-top: -30px !important;
  884.  -webkit-transition:all 0.5s ease-in-out 0.5s;
  885. transition: all 0.5s ease-in-out 0.5s;
  886.  -moz-transition-property: all 0.5s ease-in-out 0.5s;
  887.     -o-transition-property: all 0.5s ease-in-out 0.5s;
  888.  }
  889.  
  890. .status-menu-container {
  891. position: fixed;
  892. display: block;
  893. top: 50px;
  894. left: 0;
  895.     width: 0;
  896.     height: 200px;
  897.     background-color: transparent;
  898.     border-bottom: none;
  899.     z-index: 60;
  900.     margin-left:-100px;
  901.      transition: margin-left .5s ease-out, z-index .5s linear .2s;
  902.     -webkit-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  903.  -moz-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  904.     -o-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  905. }
  906.  
  907. .status-menu-container:hover, .status-menu-container.fixed:hover{
  908.     margin-left: 0 !important;
  909.      transition: margin-left .5s ease-out, z-index .5s linear .2s;
  910.     -webkit-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  911.  -moz-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  912.     -o-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  913.     transition-delay: .5s;}
  914.  
  915. .status-menu-container.fixed {
  916.    position: fixed;
  917. display: block;
  918. top: 50px;
  919. left: 0;
  920.     width: 0;
  921.     height: 200px;
  922.     background-color: transparent;
  923.     border-bottom: none;
  924.     z-index: 60;
  925.     margin-left:-100px;
  926.      transition: margin-left .5s ease-out, z-index .5s linear .2s;
  927.     -webkit-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  928.  -moz-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  929.     -o-transition: margin-left .5s ease-out, z-index .5s linear .2s;
  930. }
  931.  
  932. .status-menu-container.fixed + div.list-block {
  933.     margin:0;
  934. }
  935.  
  936. .status-menu-container .status-menu {
  937.     display: block;
  938.     margin: 0 auto;
  939.     border-collapse: separate;
  940.     border-spacing: 20px 0;
  941. }
  942.  
  943. .status-menu-container .status-menu .status-button {
  944.     position: relative;
  945.     display: block;
  946.     padding: 0;
  947.     color: transparent;
  948.     content: none;
  949.     width: 100px;
  950.     height: 100px;
  951.      background-size: cover;
  952.   background-repeat: no-repeat;
  953.   font-size: 0 !important;
  954. background-position:50% 50%;
  955. /*
  956. border:3px solid #fff;
  957.     -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  958.     -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  959.     box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  960.     border-radius:180px; */
  961.    
  962. }
  963.  
  964.  
  965.  
  966. .status-menu-container .status-menu .status-button.on {
  967.     background: linear-gradient(rgba(71, 49, 121, 0.9), rgba(15, 5, 32, 1)); /* Standard syntax */
  968.     width: 100px;
  969.     height: 100px;
  970.     color: transparent;
  971.     content: none;
  972.     background-size: cover;
  973.   background-repeat: no-repeat;
  974. background-position:50% 50%;
  975. /* border:3px solid #fff;
  976.     -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  977.     -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  978.     box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  979.     border-radius:180px;
  980.     display:inline-block!important; */
  981. }
  982.  
  983. .status-menu-container .status-menu .status-button:after {
  984.     position: absolute;
  985.     top: 0px;
  986.     left: 0px;
  987.     background: transparent; /* Standard syntax */
  988.     display: block;
  989.     width: 100px;
  990.     height: 100px;
  991.     color: #fff !important;
  992.     font-size: 20px !important;
  993.     font-family:Romanesco;
  994.     text-align: center;
  995. vertical-align: middle;
  996. line-height: 50px !important;
  997.  text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  998.  font-weight: bold;
  999.     opacity: 0;
  1000.     -moz-transition-property: all;
  1001.     -o-transition-property: all;
  1002.     -webkit-transition-property: all;
  1003.     transition-property: all;
  1004.     -moz-transition-duration: 0.3s;
  1005.     -o-transition-duration: 0.3s;
  1006.     -webkit-transition-duration: 0.3s;
  1007.     transition-duration: 0.3s;
  1008.     -moz-transition-timing-function: ease-in-out;
  1009.     -o-transition-timing-function: ease-in-out;
  1010.     -webkit-transition-timing-function: ease-in-out;
  1011.     transition-timing-function: ease-in-out;
  1012.     z-index:60;
  1013. }
  1014.  
  1015.  .status-menu .status-button:hover:after {
  1016.     opacity: 1;
  1017.     margin-top: 50px !important;
  1018.      -webkit-transition:all 0.2s ease-in-out 0.2s;
  1019. transition: all 0.2s ease-in-out 0.2s;
  1020.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1021.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1022. }
  1023.  
  1024. .status-menu-container .status-menu .status-button.on:after{
  1025. opacity: 0
  1026. }
  1027.  
  1028. /* watching */
  1029.  
  1030. .status-menu-container .status-menu .status-button.watching {
  1031.   background-image: url("http://i.imgur.com/qI2ZIMF.png");
  1032.   opacity: 1;
  1033.   z-index: 1;
  1034.   -webkit-transition:all 0.2s ease-in-out 0.2s;
  1035. transition: all 0.2s ease-in-out 0.2s;
  1036.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1037.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1038. }
  1039.  
  1040. .status-menu-container .status-menu .status-button.watching:hover {
  1041.   opacity: 1;
  1042.   background-image: url("http://i.imgur.com/FlsbAlM.png");
  1043.   z-index: 1;
  1044.   -webkit-transition:all 0.2s ease-in-out 0s;
  1045. transition: all 0.2s ease-in-out 0s;
  1046.  -moz-transition-property: all 0.3s ease-in-out 0s;
  1047.     -o-transition-property: all 0.3s ease-in-out 0s;
  1048.     margin-left: 0 !important;
  1049.  
  1050. }
  1051.  
  1052. .status-menu-container .status-menu .status-button.watching.on {
  1053.   background-image: url("http://i.imgur.com/FlsbAlM.png");
  1054.   opacity: 1;
  1055.   z-index: 1;
  1056.   margin-left: 0 !important;
  1057. }
  1058.  
  1059. .status-menu-container .status-menu .status-button.watching:after {
  1060.  content: 'Watching';
  1061.  z-index: 1;
  1062. }
  1063.  
  1064.  
  1065. /* completed */
  1066.  
  1067. .status-menu-container .status-menu .status-button.completed {
  1068.   background-image: url("http://i.imgur.com/l1WxqGk.png");
  1069.   opacity: 1;
  1070.   margin-top: -20px !important;
  1071.   z-index: 2;
  1072.    -webkit-transition:all 0.2s ease-in-out 0.2s;
  1073. transition: all 0.2s ease-in-out 0.2s;
  1074.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1075.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1076.   }
  1077.  
  1078.   .status-menu-container .status-menu .status-button.completed:hover {
  1079.   background-image: url("http://i.imgur.com/FRyNKSO.png");
  1080.   opacity: 1;
  1081.   margin-top: -20px !important;
  1082.    z-index: 2;
  1083.   -webkit-transition:all 0.2s ease-in-out 0s;
  1084. transition: all 0.2s ease-in-out 0s;
  1085.  -moz-transition-property: all 0.3s ease-in-out 0s;
  1086.     -o-transition-property: all 0.3s ease-in-out 0s;
  1087.     margin-left: 0 !important;
  1088.   }
  1089.  
  1090. .status-menu-container .status-menu .status-button.completed.on {
  1091.   background-image: url("http://i.imgur.com/FRyNKSO.png");
  1092.   opacity: 1;
  1093.   margin-top: -20px !important;
  1094.   z-index: 2;
  1095.   margin-left: 0 !important;
  1096. }
  1097.  
  1098. .status-menu-container .status-menu .status-button.completed:after {
  1099.  content: 'Complete';
  1100.  margin-top: -20px !important;
  1101.  z-index: 2;
  1102. }
  1103.  
  1104.  
  1105. .status-menu .status-button.completed:hover:after {
  1106.     opacity: 1;
  1107.     margin-top: 50px !important;
  1108.      -webkit-transition:all 0.2s ease-in-out 0.2s;
  1109. transition: all 0.2s ease-in-out 0.2s;
  1110.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1111.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1112. }
  1113. /* on hold */
  1114.  
  1115. .status-menu-container .status-menu .status-button.onhold {
  1116.   background-image: url("http://i.imgur.com/B2pIB9G.png");
  1117.   opacity: 1;
  1118.   margin-top: -20px !important;
  1119.  z-index: 3;
  1120.   -webkit-transition:all 0.2s ease-in-out 0.2s;
  1121. transition: all 0.2s ease-in-out 0.2s;
  1122.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1123.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1124.   }
  1125.  
  1126.   .status-menu-container .status-menu .status-button.onhold:hover{
  1127.   opacity: 1;
  1128.   background-image: url("http://i.imgur.com/3pb1bsA.png");
  1129.   margin-top: -20px !important;
  1130.   z-index: 3;
  1131.   -webkit-transition:all 0.2s ease-in-out 0s;
  1132. transition: all 0.2s ease-in-out 0s;
  1133.  -moz-transition-property: all 0.3s ease-in-out 0s;
  1134.     -o-transition-property: all 0.3s ease-in-out 0s;
  1135.     margin-left: 0 !important;
  1136.   }
  1137.  
  1138. .status-menu-container .status-menu .status-button.onhold.on {
  1139.   background-image: url("http://i.imgur.com/3pb1bsA.png");
  1140.   opacity: 1;
  1141.   margin-top: -20px !important;
  1142.  z-index: 3;
  1143.  margin-left: 0 !important;
  1144. }
  1145.  
  1146.   .status-menu-container .status-menu .status-button.onhold:after {
  1147.  content: 'Hold';
  1148.  margin-top: -20px !important;
  1149.  z-index: 3;
  1150. }
  1151.  
  1152. .status-menu .status-button.onhold:hover:after {
  1153.     opacity: 1;
  1154.     margin-top: 50px !important;
  1155.      -webkit-transition:all 0.2s ease-in-out 0.2s;
  1156. transition: all 0.2s ease-in-out 0.2s;
  1157.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1158.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1159. }
  1160.  
  1161. /* dropped */
  1162.  
  1163. .status-menu-container .status-menu .status-button.dropped {
  1164.   background-image: url("http://i.imgur.com/YOEj0OD.png");
  1165.   opacity: 1;
  1166.   margin-top: -20px !important;
  1167.  z-index: 4;
  1168.   -webkit-transition:all 0.2s ease-in-out 0.2s;
  1169. transition: all 0.2s ease-in-out 0.2s;
  1170.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1171.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1172. }
  1173. .status-menu-container .status-menu .status-button.dropped:hover{
  1174.  opacity: 1;
  1175.   background-image: url("http://i.imgur.com/wQSJPAF.png");
  1176.   margin-top: -20px !important;
  1177.  z-index: 4;
  1178.   -webkit-transition:all 0.2s ease-in-out 0s;
  1179. transition: all 0.2s ease-in-out 0s;
  1180.  -moz-transition-property: all 0.3s ease-in-out 0s;
  1181.     -o-transition-property: all 0.3s ease-in-out 0s;
  1182.     margin-left: 0 !important;
  1183.  
  1184. }
  1185.  
  1186. .status-menu-container .status-menu .status-button.dropped.on {
  1187.   background-image: url("http://i.imgur.com/wQSJPAF.png");
  1188.   opacity: 1;
  1189.   margin-top: -20px !important;
  1190.  z-index: 4;
  1191.  margin-left: 0 !important;
  1192. }
  1193.   .status-menu-container .status-menu .status-button.dropped:after {
  1194.  content: 'Dropped';
  1195.  margin-top: -20px !important;
  1196.  z-index: 4;
  1197. }
  1198.  
  1199. .status-menu .status-button.dropped:hover:after {
  1200.     opacity: 1;
  1201.     margin-top: 50px !important;
  1202.      -webkit-transition:all 0.2s ease-in-out 0.2s;
  1203. transition: all 0.2s ease-in-out 0.2s;
  1204.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1205.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1206. }
  1207.  
  1208. /* PTW */
  1209.  
  1210. .status-menu-container .status-menu .status-button.plantowatch {
  1211.   background-image: url("http://i.imgur.com/5AvBfdn.png");
  1212.   opacity: 1;
  1213.   margin-top: -20px !important;
  1214.  z-index: 5;
  1215.   -webkit-transition:all 0.2s ease-in-out 0.2s;
  1216. transition: all 0.2s ease-in-out 0.2s;
  1217.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1218.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1219. }
  1220. .status-menu-container .status-menu .status-button.plantowatch:hover{
  1221. opacity: 1;
  1222. background-image: url("http://i.imgur.com/mQCWKiE.png");
  1223. margin-top: -20px !important;
  1224.   z-index: 5;
  1225.   -webkit-transition:all 0.2s ease-in-out 0s;
  1226. transition: all 0.2s ease-in-out 0s;
  1227.  -moz-transition-property: all 0.3s ease-in-out 0s;
  1228.     -o-transition-property: all 0.3s ease-in-out 0s;
  1229.     margin-left: 0 !important;
  1230. }
  1231.  
  1232. .status-menu-container .status-menu .status-button.plantowatch.on {
  1233.   background-image: url("http://i.imgur.com/mQCWKiE.png");
  1234.   opacity: 1;
  1235.   margin-top: -20px !important;
  1236.  z-index: 5;
  1237.  margin-left: 0 !important;
  1238. }
  1239.  
  1240. .status-menu-container .status-menu .status-button.plantowatch:after {
  1241.  content: 'Plan';
  1242.  margin-top: -20px !important;
  1243.  z-index: 5;
  1244. }
  1245.  
  1246. .status-menu .status-button.plantowatch:hover:after {
  1247.     opacity: 1;
  1248.     margin-top: 50px !important;
  1249.      -webkit-transition:all 0.2s ease-in-out 0.2s;
  1250. transition: all 0.2s ease-in-out 0.2s;
  1251.  -moz-transition-property: all 0.2s ease-in-out 0.2s;
  1252.     -o-transition-property: all 0.2s ease-in-out 0.2s;
  1253. }
  1254.  
  1255. /*scroll bar*/
  1256.  
  1257. ::-webkit-scrollbar
  1258. {height: 7px;
  1259. width: 7px;
  1260. background-color: #f5f5f5;}
  1261. ::-webkit-scrollbar-thumb
  1262. {border: 2px solid #f5f5f5;
  1263. background-color: #a50066;}
  1264.  
  1265. /**
  1266.  * List Container - Status Menu - Search
  1267.  */
  1268. .status-menu-container .search-container {
  1269.     position: fixed;
  1270.     left: 10px;
  1271.     bottom: 10px;
  1272.     width: 140px !important;
  1273.    
  1274. }
  1275. .status-menu-container .search-container #search-button {
  1276.     display: inline-block;
  1277.     height: 22px;
  1278.     margin-top: 15px;
  1279.     color: #787878;
  1280.     font-size: 1.6em;
  1281.     vertical-align: middle;
  1282. }
  1283.  
  1284. .status-menu-container .search-container #search-box {
  1285.     display: inline-block;
  1286.     width: 0;
  1287.     height: 22px;
  1288.     overflow: hidden;
  1289.     margin-top: 13px;
  1290.     -webkit-transition: width 0.3s;
  1291.     -moz-transition: width 0.3s;
  1292.     transition: width 0.3s;
  1293.     -webkit-backface-visibility: hidden;
  1294.     vertical-align: middle;
  1295. }
  1296.  
  1297. .status-menu-container .search-container #search-box.open {
  1298.     display: inline-block;
  1299.     width: 100px;
  1300. }
  1301.  
  1302. .status-menu-container .search-container #search-box input {
  1303.     width: 100%;
  1304.     height: 100%;
  1305.     box-sizing: border-box;
  1306. }
  1307.  
  1308.  
  1309. /* cover image */
  1310.  
  1311. #cover-image{
  1312.  
  1313.   margin:auto;
  1314.   width:600px !important;
  1315.   height:auto;
  1316.   background-color:rgba(0,0,0,.5) !important;
  1317.   background-size: contain !important;
  1318.  
  1319. }
  1320.  
  1321.  
  1322.  
  1323. /**
  1324.  * List Container - List Block
  1325.  */
  1326. .list-block {
  1327.     margin: 0;
  1328.     min-height:0;
  1329. }
  1330.  
  1331. .list-unit {
  1332.     margin: 0;
  1333.     width: 600px;
  1334. }
  1335.  
  1336. /**
  1337.  * List Container - List Status Title (with Stats)
  1338.  */
  1339. .list-unit .list-status-title {
  1340.     position: relative;
  1341.     display: table-cell;
  1342.     background-color: transparent;
  1343.     width: 600px;
  1344.     height: 470px !important;
  1345.  
  1346. }
  1347.  
  1348. .list-unit .list-status-title .text {
  1349.     display:none;
  1350.  
  1351. }
  1352.  
  1353. .list-unit .list-status-title .stats {
  1354.     position: absolute;
  1355.     height: 38px;
  1356.     line-height: 38px;
  1357.     right: 4px;
  1358.     margin-top: 420px !important;
  1359. }
  1360.  
  1361. .list-unit .list-status-title .stats a {
  1362.     margin-right: 8px;
  1363.     color: #FFF;
  1364.     text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  1365.    
  1366. }
  1367.  
  1368. .list-unit .list-status-title .stats a.filterd {
  1369.     text-shadow: 0px 0px 2px #FFF;
  1370. }
  1371.  
  1372. .list-unit .list-stats {
  1373.   background-color:rgba(255,255,255,0.7) !important;
  1374. bottom: 0px !important;
  1375. color : #323232;
  1376. height: 35px;
  1377. left: 50%;
  1378. margin-left: -300px;
  1379. position: fixed;
  1380. width: 600px !important;
  1381. z-index: 1;
  1382. }
  1383.  
  1384.  
  1385. /**
  1386.  * List Container - List Table
  1387.  */
  1388.  
  1389. .list-table {
  1390.     width: 100%;
  1391.     margin: 0 auto;
  1392.     border-collapse: collapse;
  1393.     background-color:transparent !important;
  1394.     color: #000 !important;
  1395.     border:none;
  1396. }
  1397.  
  1398. .list-table > tbody:nth-of-type(2n+1) {
  1399.     background-color: rgba(222, 222, 222, 0.6) !important;
  1400.  
  1401.  
  1402. }
  1403.  
  1404. .list-table > tbody:nth-of-type(2n) {
  1405. background-color: rgba(255, 255, 255, 0.6) !important;
  1406.  
  1407. }
  1408.  
  1409.  
  1410.  
  1411. /**
  1412.  * List Container - List Table - Header
  1413.  */
  1414.  
  1415. .list-table .list-table-header .header-title {
  1416. position: absolute;
  1417.     background: transparent;
  1418.     display: block;
  1419.     height: 36px;
  1420.     text-align: center;
  1421.     vertical-align: middle;
  1422.     width: 600px;
  1423. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  1424.  font-style: italic !important;
  1425.  border:none;
  1426.  color: #fff !important;
  1427.  z-index:10;
  1428.  left: 50%;
  1429.  margin-top: -40px;
  1430.  transform: translateX(-50%);
  1431. }
  1432.  
  1433.  
  1434. .list-table .list-table-header .header-title:last-child {
  1435.     background-image: none;
  1436.     color: #fff !important;
  1437. }
  1438.  
  1439. .list-table .list-table-header .header-title.status {
  1440.     background-image: none;
  1441.     width: 4px
  1442.     color: #fff !important;
  1443. }
  1444.  
  1445. .list-table .list-table-header .header-title.number {
  1446.     display: none;
  1447. }
  1448.  
  1449. .list-table .list-table-header .header-title.image {
  1450.     display: none;
  1451. }
  1452.  
  1453. .list-table .list-table-header .header-title.title {
  1454.     display: none;
  1455. }
  1456.  
  1457. .list-table .list-table-header .header-title.score {
  1458.     width: 65px
  1459.     color: #fff !important;
  1460.     margin-left: -65px;
  1461.    
  1462. }
  1463.  
  1464. .list-table .list-table-header .header-title.type {
  1465.     width: 60px
  1466.     color: #fff !important;
  1467.    
  1468. }
  1469.  
  1470. .list-table .list-table-header .header-title.progress {
  1471.     width: 90px
  1472.     color: #fff !important;
  1473.     margin-left: 65px;
  1474. }
  1475.  
  1476. .list-table .list-table-header .header-title.chapters {
  1477.     width: 90px
  1478. }
  1479.  
  1480. .list-table .list-table-header .header-title.volumes {
  1481.     width: 90px
  1482. }
  1483.  
  1484. .list-table .list-table-header .header-title.tags {
  1485.     width: 120px
  1486. }
  1487.  
  1488. .list-table .list-table-header .header-title.rated {
  1489.     width: 70px
  1490. }
  1491.  
  1492. .list-table .list-table-header .header-title.started {
  1493.     width: 110px
  1494. }
  1495.  
  1496. .list-table .list-table-header .header-title.finished {
  1497.     width: 110px
  1498. }
  1499.  
  1500. .list-table .list-table-header .header-title.days {
  1501.     width: 45px
  1502. }
  1503.  
  1504. .list-table .list-table-header .header-title.storage {
  1505.     width: 75px
  1506. }
  1507.  
  1508. .list-table .list-table-header .header-title.retail {
  1509.     width: 65px
  1510. }
  1511.  
  1512. .list-table .list-table-header .header-title.priority {
  1513.     width: 70px
  1514. }
  1515.  
  1516. .list-table .list-table-header .header-title .link {
  1517.     font-size: 11px;
  1518.     color: #000;
  1519.     text-decoration: none
  1520. }
  1521.  
  1522. .list-table .list-table-header .header-title .link.sort {
  1523.     position: relative;
  1524.     display: inline-block;
  1525.     color: #fff;
  1526.     white-space: nowrap;
  1527.     -moz-transition-property: all;
  1528.     -o-transition-property: all;
  1529.     -webkit-transition-property: all;
  1530.     transition-property: all;
  1531.     -moz-transition-duration: 0.3s;
  1532.     -o-transition-duration: 0.3s;
  1533.     -webkit-transition-duration: 0.3s;
  1534.     transition-duration: 0.3s;
  1535.     -moz-transition-timing-function: ease-in-out;
  1536.     -o-transition-timing-function: ease-in-out;
  1537.     -webkit-transition-timing-function: ease-in-out;
  1538.     transition-timing-function: ease-in-out
  1539. }
  1540.  
  1541. .list-table .list-table-header .header-title .link.sort:hover {
  1542.     color: #787878;
  1543. }
  1544.  
  1545. .list-table .list-table-header .header-title .sort-icon {
  1546.     color: #fff;
  1547. }
  1548.  
  1549. .list-table .list-table-data:hover {
  1550.     transition: .2s linear;
  1551.     background-color: rgba(107, 65, 124, 0.6);
  1552.     color: #fff !important;
  1553. }
  1554.  
  1555. .list-table .list-table-data:hover a{
  1556. color: #fff !important;
  1557. }
  1558.  
  1559. .list-table .list-table-data:hover .data.title  {
  1560.   text-shadow: 0 0 2px #5c4ef5, 0 0 1px #5c4ef5, 0 1px 7px #5c4ef5, 0 0 0.5px #5c4ef5;
  1561.   transition: .1s linear;
  1562.   color: #fff !important;
  1563.   }
  1564.  
  1565. .list-table .list-table-data .data.number:hover {
  1566. transition: .5s linear;
  1567.     background-color: rgba(107, 65, 124, 0.8);
  1568. }
  1569.  
  1570. .header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover {
  1571. text-decoration:underline;
  1572. }
  1573.  
  1574.  
  1575. /**
  1576.  * List Container - List Table - Items
  1577.  */
  1578.  
  1579. .list-table .list-table-data .data {
  1580.     display: table-cell;
  1581.     padding: 4px 0;
  1582.     text-align: center;
  1583.     vertical-align: middle;
  1584.     color: #000 !important;
  1585.     border:none;
  1586. }
  1587.  
  1588. .list-table .list-table-data:hover .data {
  1589. color: #fff !important;
  1590. }
  1591.  
  1592. .list-table .list-table-data a:not(.edit-disabled):hover {
  1593.     text-decoration: underline;
  1594.     color: #fff !important;
  1595. }
  1596.  
  1597. .list-table .list-table-data a.edit-disabled {
  1598.     cursor: text;
  1599.     color: #000;
  1600. }
  1601.  
  1602. .list-table .list-table-data .tags .edit {
  1603.     display: block;
  1604.     width: 100%;
  1605.     text-align: center;
  1606.     color:  #2db039;
  1607.     font-size: 10px;
  1608.     font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  1609.     display:none;
  1610. }
  1611. .list-table .list-table-data .tags .edit:hover {
  1612.     display:none;
  1613. }
  1614.  
  1615. .list-table .list-table-data .tags textarea {
  1616.     box-sizing: border-box;
  1617.     width: 100%;
  1618.     height: 60px;
  1619. }
  1620.  
  1621. .list-table .list-table-data .data.image a {
  1622.     display: inline-block;
  1623.    
  1624. /* small list image */
  1625.  
  1626. }
  1627. .list-table .list-table-data .data.image .image {
  1628.     width: 30px;
  1629.     height: 30px;
  1630.     background-size:cover;
  1631.     border:2px solid #fff;
  1632.     -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  1633.     -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  1634.     box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  1635.     border-radius:180px;
  1636.     display:inline-block!important;
  1637. }
  1638.  
  1639. .list-table .list-table-data:hover .data.image {
  1640. position: absolute;
  1641. margin-left: -30px !important;
  1642. opacity: 0;
  1643.     -moz-transition-duration: 0.3s ease-in-out;
  1644.     -o-transition-duration: 0.3s ease-in-out;
  1645.     -webkit-transition-duration: 0.3s ease-in-out;
  1646.     transition-duration: 0.3s ease-in-out;
  1647.     -moz-transition-timing-function: ease-in-out;
  1648.     -o-transition-timing-function: ease-in-out;
  1649.     -webkit-transition-timing-function: ease-in-out;
  1650.     transition-timing-function: ease-in-out
  1651.     -moz-transition:all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;
  1652. }
  1653.  
  1654. /* */
  1655.  
  1656.  
  1657. .list-table .list-table-data .data.title {
  1658.     padding-left: 8px;
  1659.     text-align: left;
  1660.     word-wrap: break-word
  1661.    
  1662. }
  1663.  
  1664. .list-table .list-table-data .data.title .link {
  1665.     font-size: 17px !important;
  1666.  text-decoration: none !important;
  1667. font-family: Rancho !important;
  1668. font-weight:100 !important;
  1669. transition: all 0.1s ease 0s;
  1670. }
  1671.  
  1672. .list-table .list-table-data:hover .data.title .link {
  1673.   letter-spacing: 0.5px;
  1674.   transition: all 0.1s ease 0s;
  1675.   color: #fff !important;
  1676. }
  1677.  
  1678. .list-table .list-table-data .data.title .rewatching, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .content-status {
  1679.     text-shadow: 0 0 2px #1a1aff, 0 0 1px #1a1aff, 1px 1px 7px #1a1aff, 0 0 0 #1a1aff !important;
  1680.     color: #fff !important;
  1681.     font-size: 0.9em
  1682. }
  1683.  
  1684. .list-table .list-table-data .data.score .link {
  1685.     font-size: 1.1em;
  1686.     font-weight: bold
  1687. }
  1688.  
  1689. td.td1.borderRBL {
  1690. color: #000 !important;
  1691. }
  1692.  
  1693. /*add edit */
  1694.  
  1695. .list-table .list-table-data .data.title .add-edit-more {
  1696.     float: right;
  1697.     margin-right: 10px;
  1698.    font-size:0 !important;
  1699.  
  1700. }
  1701.  
  1702.  
  1703. .add-edit-more {
  1704.     opacity: 0;
  1705.     transition: all 0.2s ease 0s;
  1706.  
  1707. }
  1708. .list-item:hover .add-edit-more {
  1709.     opacity: 1;
  1710.     transition: all 0.2s ease 0s;
  1711. }
  1712.  
  1713. .list-table .list-table-data .data.title .edit a {
  1714.     background-image: url(http://i.imgur.com/OT1yCLP.png);
  1715.     display: inline-block;
  1716. width: 15px;
  1717. height: 15px;
  1718.     background-size: cover;
  1719.     color: transparent !important;
  1720.     margin-right: 7px !important;
  1721. }
  1722.  
  1723. .list-table .list-table-data .data.title .more a {
  1724.     background-image: url(http://i.imgur.com/cUAaila.png);
  1725.     display: inline-block;
  1726. width: 15px;
  1727. height: 15px;
  1728.     background-size: cover;
  1729.     color: transparent !important;
  1730. }
  1731.  
  1732. .list-table .list-table-data .data.title .add a {
  1733.     background-image: url(http://i.imgur.com/AoTgUAL.png);
  1734.     display: inline-block;
  1735. width: 15px;
  1736. height: 15px;
  1737.     background-size: cover;
  1738.     color: transparent !important;
  1739.     margin-right: 7px !important;
  1740. }
  1741.  
  1742.  
  1743. /* */
  1744. .list-table .list-table-data .data.title .more {
  1745.     position: relative;
  1746. }
  1747.  
  1748. .list-table .more-info {
  1749.     display: none;
  1750. }
  1751.  
  1752. .list-table .more-info .more-content {
  1753.     padding: 10px;
  1754. }
  1755.  
  1756. /* review section */
  1757.  
  1758. .list-table .list-table-data .data.tags {
  1759.      position: fixed;
  1760.     left: -30px;
  1761. top:90px;
  1762.     opacity: 0;
  1763. display: inline !important;
  1764. line-height: 16px !important;
  1765. font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif;
  1766. padding: 10px;
  1767. text-align:left;
  1768. width:135px;
  1769. height:auto !important;
  1770.     background-repeat: no-repeat;
  1771. pointer-events: none;
  1772. /* animation */
  1773. transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;
  1774. }
  1775.  
  1776. .list-table .list-table-data .data.tags span:after {
  1777.    position: fixed;
  1778.     left: -30px;
  1779. top:90px;
  1780.     opacity: 0;
  1781. display: block !important;
  1782. content:'';
  1783. width:150px;
  1784. height:224px !important;
  1785. background-image: url(http://i.imgur.com/sSnHx6Z.png);
  1786.     background-position: center;
  1787.         background-size:contain;
  1788.     background-repeat: no-repeat;
  1789.         box-shadow: 0 2px 5px rgba(0,0,0, 1);
  1790. pointer-events: none;
  1791. /* animation */
  1792.  transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;
  1793. z-index: -1;
  1794. }
  1795.  
  1796. .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after {
  1797.  opacity: 1;
  1798.  margin-left: 162px !important;
  1799.  transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;
  1800.  
  1801. }
  1802.  
  1803. .list-table .list-table-header .header-title.tags {
  1804. display:none;
  1805. }
  1806.  
  1807. .link.sort + a {display: none;} /* remove watch buttons */
  1808.  
  1809.    /**
  1810. * Large full-res hover images
  1811. */
  1812.  
  1813. @import url(http://mal-fellow-writer.appspot.com/anime/takana_no_hana/?covers=https://dl.dropboxusercontent.com/u/188037746/.modern.styles/fellow.writer/covers.link.sort.after);
  1814.  
  1815.  
  1816. .link.sort:after
  1817. {content: "";
  1818. display: block !important;
  1819. position: fixed;
  1820. left: -20px !important;
  1821. top: 90px !important;
  1822. width: 122px;
  1823. height: 180px;
  1824. background-color: rgba(0,0,0,.3);
  1825. background-position: center !important;
  1826. background-repeat: no-repeat !important;
  1827. background-size: cover;
  1828. border: 1px solid #ffffff;
  1829. box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
  1830. visibility: hidden;
  1831. opacity: 0;
  1832. transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
  1833. z-index: 5;}
  1834.  
  1835.  
  1836.  
  1837. .list-table .list-table-data:hover .link.sort:after {
  1838. visibility: visible;
  1839. opacity: 1;
  1840. margin-left: 30px !important;
  1841. transition: .3s ease-out;}
  1842.  
  1843. /* */
  1844.  
  1845. .list-table .list-table-data .data.status {
  1846.     width: 4px
  1847. }
  1848.  
  1849. .list-table .list-table-data .data.status .text {
  1850.     display: none
  1851. }
  1852.  
  1853. .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching {
  1854.     background-color: #2db039
  1855. }
  1856.  
  1857. .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch {
  1858.     background-color: #c3c3c3
  1859. }
  1860.  
  1861. .list-table .list-table-data .data.status.completed {
  1862.     background-color: #26448f
  1863. }
  1864.  
  1865. .list-table .list-table-data .data.status.onhold {
  1866.     background-color: #f1c83e
  1867. }
  1868.  
  1869. .list-table .list-table-data .data.status.dropped {
  1870.     background-color: #a12f31
  1871. }
  1872.  
  1873.  
  1874. /* */
  1875.  
  1876. .list-table .list-table-data .data.title {
  1877.     padding-left: 8px;
  1878.     text-align: left
  1879. }
  1880.  
  1881. .list-unit .loading-space {
  1882.     background-color:rgba(0, 0, 0, 0);
  1883.      color: #fff !important;
  1884.      display: inline-block;
  1885.      margin: auto;
  1886.     width: 600px;
  1887.     font-size: 11px;
  1888.     line-height:15px;
  1889.     text-align: middle !important;
  1890.     padding-top: 0px;
  1891.  margin-bottom: 0px;
  1892.   height:241px;
  1893.   background-attachment:scroll;
  1894.   background-image:url(http://i.imgur.com/q2TtrwV.jpg);
  1895.   background-repeat: no-repeat no-repeat;
  1896.   background-position: 0% 100%;
  1897. }
  1898.  
  1899. /*override codes*/
  1900. .header .header-info > a {color: rgba(255,255,255,1) !important;}
  1901. .header .header-info {color: rgba(255,255,255,0.8) !important;}
  1902. .header .header-menu {color: rgba(255,255,255,0.8) !important;}
  1903. .header .header-menu .btn-menu {color: rgba(255,255,255,0.8) !important;}
  1904. .username {color: rgba(255,255,255,1) !important;}
  1905. #header-menu-button {color: rgba(255,255,255,0.8) !important;}
  1906. .header a {
  1907.     font-weight: bold;
  1908.     color: #fff !important;
  1909. }
  1910.  
  1911. .data.status.all_anime, .status-button.all_anime, .data.status.all_anime, .status-button.all_anime.on, a.status-button.all_anime {
  1912. display:none !important;
  1913. }
  1914.  
  1915.  
  1916.  
  1917. .cover-block::before {
  1918.    background: -webkit-linear-gradient(left, rgba(255, 255, 255, .9), rgba(255, 255, 255, .1)) !important; /* For Safari 5.1 to 6.0 */
  1919.     background: -o-linear-gradient(right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .1)) !important; /* For Opera 11.1 to 12.0 */
  1920.     background: -moz-linear-gradient(right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .1)) !important; /* For Firefox 3.6 to 15 */
  1921.     background: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .1)) !important; /* Standard syntax */
  1922.     position: absolute;
  1923.     top: 390px;
  1924. left: 20%;
  1925. margin-left: 305px !important;
  1926. width: 170px;
  1927. z-index: 1;
  1928.  color: #ffffff;
  1929.     display: block;
  1930.     font-size: 18px !important;
  1931.     font-family: Rancho;
  1932. text-align: left;
  1933.     text-shadow: 0 0 2px #b40bc3, 0 0 1px #b40bc3, 1px 1px 7px #b40bc3, 0 0 0 #FFF !important;
  1934. letter-spacing: 0 !important;
  1935. padding-left: 20px;
  1936. }
  1937.  
  1938. /* */
  1939. .header .header-title {
  1940. position: absolute;
  1941. top: 0px;
  1942. left: 0px;
  1943. background-image: url("http://i.imgur.com/VgrYqgb.png");
  1944. background-position: left top;
  1945. background-repeat: no-repeat;
  1946. background-size: auto 50px;
  1947. display: block;
  1948. width: 50px !important;
  1949. height: 50px;
  1950. text-indent: -9999px;
  1951. overflow: hidden
  1952. }
  1953.  
  1954. a.header-title {
  1955. position: absolute;
  1956. top: 0px;
  1957. left: 0px;
  1958. width: 50px;
  1959. height: 50px;
  1960. }
  1961.  
  1962. /* customization */
  1963.  
  1964. /*body animation */
  1965. @-webkit-keyframes Floatingx{
  1966.     from {-webkit-transform:translate(0, 0px);}
  1967.     65% {-webkit-transform:translate(0, -15px);}
  1968.     to {-webkit-transform: translate(0, -0px);    }    
  1969.  
  1970. }
  1971.    
  1972. @-moz-keyframes Floating{
  1973.     from {-moz-transform:translate(0, 0px);}
  1974.     65% {-moz-transform:translate(0, -15px);}
  1975.     to {-moz-transform: translate(0, -0px);}  
  1976.  
  1977. }
  1978.  
  1979.  
  1980.  
  1981. /* The list background */
  1982. body:before {
  1983.     position: absolute;
  1984.     display: block;
  1985.     content: '';
  1986.     top: 0;
  1987.     left: 0px;
  1988.     height: 470px !important;
  1989. width:100%;
  1990. }
  1991.  
  1992. body:before {
  1993.     background-image: url(http://i.imgur.com/W3Ok3fj.png);
  1994.     background-position: 50% 50%;
  1995.         background-size:contain;
  1996.     background-repeat: no-repeat;
  1997.     z-index: 10;
  1998.     background-color: transparent;
  1999.     /*animation*/
  2000.      float: left;
  2001.     -webkit-animation-name: Floatingx;
  2002.     -webkit-animation-duration: 3s;
  2003.     -webkit-animation-iteration-count: infinite;
  2004.     -webkit-animation-timing-function: ease-in-out;
  2005.     -moz-animation-name: Floating;
  2006.     -moz-animation-duration: 3s;
  2007.     -moz-animation-iteration-count: infinite;
  2008.     -moz-animation-timing-function: ease-in-out;
  2009.  
  2010. }
  2011.  
  2012. /* body:after {
  2013. position: absolute;
  2014.     display: block;
  2015.     content: '';
  2016.     top: 0;
  2017.     left: 0px;
  2018.     height: 470px !important;
  2019. width:100%;
  2020.     background-image: url("http://i.imgur.com/Hm8he2A.jpg");
  2021. background-color: #fffcf9;
  2022. background-size:contain;
  2023. background-repeat:repeat-x;
  2024. z-index: 9;
  2025. } */
  2026.  
  2027. body:after {
  2028. position: absolute;
  2029.     display: block;
  2030.     content: '';
  2031.     top: 0;
  2032.     left: 0px;
  2033.     height: 470px !important;
  2034. width:100%;
  2035.     background-image: url("http://i.imgur.com/BtUITOH.png");
  2036. background-color: #fffcf9;
  2037. background-size:cover;
  2038. background-repeat:no-repeat;
  2039. background-position: right top;
  2040. z-index: 9;
  2041. }
  2042.  
  2043. body {
  2044.     content: '';
  2045. text-align: center;
  2046. font-family: Verdana, Arial;
  2047. font-size: 11px;
  2048. background-color: #fffcf9;
  2049. padding-bottom: 10px !important;
  2050. cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;
  2051.   overflow-x: hidden;
  2052.        overflow-y: auto;
  2053.        background-image: url(http://i.imgur.com/JsJCEPV.png);
  2054.        background-size:contain;
  2055.        background-position: right bottom;
  2056.        background-attachment:fixed;
  2057.        background-repeat: no-repeat;
  2058. }
  2059.  
  2060. /*
  2061. **Characters render in each category. You can delete this part if you don't like
  2062. default img
  2063. http://i.imgur.com/7ouzCUu.jpg
  2064. */
  2065. .list-item:nth-of-type(2) .status.watching:after
  2066. {
  2067. position: fixed;
  2068.     display: block;
  2069.     content: '';
  2070.     top: 0;
  2071.     height: 100%;
  2072. width:100%;
  2073. background-image: url("http://i.imgur.com/3GtASXm.jpg");
  2074. background-position:right !important;
  2075. background-size: contain;
  2076. background-repeat: no-repeat;
  2077. right: calc(17% + 600px);
  2078. border-width: 0;
  2079. background-color: #fffcf9;
  2080. content: "";
  2081. z-index: -4;
  2082. pointer-events: none;
  2083. }
  2084.  
  2085. .list-item:nth-of-type(2) .status.completed:after {
  2086. position: fixed;
  2087.     display: block;
  2088.     content: '';
  2089.     top: 0;
  2090.     height: 100%;
  2091. width:100%;
  2092. background-image: url("http://i.imgur.com/MQsODjt.jpg");
  2093. background-position:right !important;
  2094. background-size: contain;
  2095. background-repeat: no-repeat;
  2096. right: calc(17% + 600px);
  2097. border-width: 0;
  2098. background-color: #fffcf9;
  2099. content: "";
  2100. z-index: -4;
  2101. pointer-events: none;
  2102. }
  2103.  
  2104. .list-item:nth-of-type(2) .status.onhold:after {
  2105.  position: fixed;
  2106.     display: block;
  2107.     content: '';
  2108.     bottom: 0; 
  2109.     height: 90%;
  2110. width:90%;
  2111. background-image: url("http://i.imgur.com/6uwJHq8.jpg");
  2112. background-position:bottom right !important;
  2113. background-size: contain;
  2114. background-repeat: no-repeat;
  2115. right: calc(17% + 600px);
  2116. border-width: 0;
  2117. background-color: #fffcf9;
  2118. content: "";
  2119. z-index: -4;
  2120. pointer-events: none;
  2121.  }
  2122.  
  2123. .list-item:nth-of-type(2) status.dropped:after {
  2124. position: fixed;
  2125.     display: block;
  2126.     content: '';
  2127.     top: 0;
  2128.     height: 100%;
  2129. width:100%;
  2130. background-image: url("http://i.imgur.com/ogorszZ.jpg");
  2131. background-position:right !important;
  2132. background-size: contain;
  2133. background-repeat: no-repeat;
  2134. right: calc(17% + 600px);
  2135. border-width: 0;
  2136. background-color: #fffcf9;
  2137. content: "";
  2138. z-index: -4;
  2139. pointer-events: none;
  2140. }
  2141.  
  2142.  
  2143. .list-item:nth-of-type(2) .status.plantowatch:after{
  2144. position: fixed;
  2145.     display: block;
  2146.     content: '';
  2147.     top: 0;
  2148.     height: 100%;
  2149. width:100%;
  2150. background-image: url("http://i.imgur.com/YKISJ02.jpg");
  2151. background-position:right !important;
  2152. background-size: contain;
  2153. background-repeat: no-repeat;
  2154. right: calc(17% + 600px);
  2155. border-width: 0;
  2156. background-color: #fffcf9;
  2157. content: "";
  2158. z-index: -4;
  2159. pointer-events: none;
  2160. }
  2161.  
  2162. /*status watching, etc background*/
  2163.  
  2164. .list-unit.completed .list-status-title:after {
  2165. color: transparent;
  2166. height: 550px !important;
  2167. width: 600px! important;
  2168. background-image: url("http://i.imgur.com/uSgnQd2.png");
  2169. background-repeat: no-repeat;
  2170. background-size: contain;
  2171. position: absolute !important;
  2172. display: block !important;
  2173. left: 0 !important;
  2174. right: 0 !important;
  2175. top: 0 !important;
  2176. content: "";
  2177. z-index: -1 !important;
  2178. background-color: transparent;
  2179. margin-bottom: 20px !important;
  2180. pointer-events: none;
  2181. }
  2182.  
  2183. .list-unit.watching .list-status-title:after {
  2184. color: transparent;
  2185. height: 682px !important;
  2186. width: 600px! important;
  2187. background-image: url("http://i.imgur.com/jzbIsrM.png");
  2188. background-repeat: no-repeat;
  2189. background-size: contain;
  2190. position: absolute !important;
  2191. display: block !important;
  2192. left: 0 !important;
  2193. right: 0 !important;
  2194. top: 0 !important;
  2195. content: "";
  2196. z-index: -1 !important;
  2197. background-color: transparent;
  2198. margin-bottom: 20px !important;
  2199. pointer-events: none;
  2200. }
  2201.  
  2202. .list-unit.onhold .list-status-title:after {
  2203. color: transparent;
  2204. height: 682px !important;
  2205. width: 600px! important;
  2206. background-image: url("http://i.imgur.com/vm4BlEq.png");
  2207. background-repeat: no-repeat;
  2208. background-size: contain;
  2209. position: absolute !important;
  2210. display: block !important;
  2211. left: 0 !important;
  2212. right: 0 !important;
  2213. top: 0 !important;
  2214. content: "";
  2215. z-index: -1 !important;
  2216. background-color: transparent;
  2217. margin-bottom: 20px !important;
  2218. pointer-events: none;
  2219. }
  2220.  
  2221. .list-unit.dropped .list-status-title:after {
  2222. color: transparent;
  2223. height: 682px !important;
  2224. width: 600px! important;
  2225. background-image: url("http://i.imgur.com/U6LDgyh.png");
  2226. background-repeat: no-repeat;
  2227. background-size: contain;
  2228. position: absolute !important;
  2229. display: block !important;
  2230. left: 0 !important;
  2231. right: 0 !important;
  2232. top: 0 !important;
  2233. content: "";
  2234. z-index: -1 !important;
  2235. background-color: transparent;
  2236. margin-bottom: 20px !important;
  2237. pointer-events: none;
  2238. }
  2239.  
  2240. .list-unit.plantowatch .list-status-title:after {
  2241. color: transparent;
  2242. height: 682px !important;
  2243. width: 600px! important;
  2244. background-image: url("http://i.imgur.com/rYE0y4R.png");
  2245. background-repeat: no-repeat;
  2246. background-size: contain;
  2247. position: absolute !important;
  2248. display: block !important;
  2249. left: 0 !important;
  2250. right: 0 !important;
  2251. top: 0 !important;
  2252. content: "";
  2253. z-index: -1 !important;
  2254. background-color: transparent;
  2255. margin-bottom: 20px !important;
  2256. pointer-events: none;
  2257. }
  2258.  
  2259.  
  2260.  
  2261.  
  2262.  
  2263. /* white opacity background of the category images */
  2264.  
  2265. .list-unit.watching .list-status-title:before, .list-unit.onhold .list-status-title:before, .list-unit.plantowatch .list-status-title:before, .list-unit.completed .list-status-title:before, .list-unit.dropped .list-status-title:before {
  2266. color: transparent;
  2267. height: 470px !important;
  2268. width: 600px! important;
  2269. background-image: url("");
  2270. background-repeat: no-repeat;
  2271. background-size: contain;
  2272. position: absolute !important;
  2273. display: block !important;
  2274. left: 0 !important;
  2275. right: 0 !important;
  2276. top: 0 !important;
  2277. content: "";
  2278. z-index: -2 !important;
  2279. background-color: rgba(255,255,255,0.6) !important;
  2280. margin-bottom: 20px !important;
  2281. pointer-events: none;
  2282. }
  2283.    
  2284. /*
  2285. Animation
  2286.  
  2287.    
  2288. @keyframes move-twink-back {
  2289.     from {background-position:0 0;}
  2290.     to {background-position:-10000px 5000px;}
  2291.  
  2292. }
  2293.  
  2294. @-webkit-keyframes move-twink-back {
  2295.     from {background-position:0 0;}
  2296.     to {background-position:-10000px 5000px;}
  2297. }
  2298.  
  2299. @-moz-keyframes move-twink-back {
  2300.     from {background-position:0 0;}
  2301.     to {background-position:-10000px 5000px;}
  2302. }
  2303.  
  2304. @-ms-keyframes move-twink-back {
  2305.     from {background-position:0 0;}
  2306.     to {background-position:-10000px 5000px;}
  2307. }
  2308.  
  2309.  
  2310. @keyframes move-clouds-back {
  2311.     from {background-position:0 0;}
  2312.     to {background-position:10000px 0;}
  2313. }
  2314.  
  2315. @-webkit-keyframes move-clouds-back {
  2316.     from {background-position:0 0;}
  2317.     to {background-position:10000px 0;}
  2318. }
  2319.  
  2320. @-moz-keyframes move-clouds-back {
  2321.     from {background-position:0 0;}
  2322.     to {background-position:10000px 0;}
  2323. }
  2324.  
  2325. @-ms-keyframes move-clouds-back {
  2326.     from {background-position: 0;}
  2327.     to {background-position:10000px 0;}
  2328. }
  2329.  
  2330. .list-container:after {
  2331.  position: fixed;
  2332.     display: block;
  2333.     content: '';
  2334.     left: 0;
  2335. bottom:0;
  2336.     width: 100%;
  2337.     height: 100%;
  2338.     background:transparent url(http://i.imgur.com/4Ku9eFe.png) repeat top center;
  2339.   -moz-animation:move-twink-back 200s linear infinite;
  2340.   -ms-animation:move-twink-back 200s linear infinite;
  2341.   -o-animation:move-twink-back 200s linear infinite;
  2342.   -webkit-animation:move-twink-back 200s linear infinite;
  2343.   animation:move-twink-back 200s linear infinite;
  2344. z-index: -1 !important;
  2345. }
  2346.  
  2347. .list-container:before {
  2348.  position: fixed;
  2349.     display: block;
  2350.     content: '';
  2351.     left: 0;
  2352. bottom:0;
  2353.     width: 100%;
  2354.     height: 100%;
  2355.     top: calc(100% - 400px) !important;
  2356.     background:transparent url(http://i.imgur.com/yB8QBAc.png) repeat top center;
  2357.   -moz-animation:move-clouds-back 200s linear infinite;
  2358.   -ms-animation:move-clouds-back 200s linear infinite;
  2359.   -o-animation:move-clouds-back 200s linear infinite;
  2360.   -webkit-animation:move-clouds-back 200s linear infinite;
  2361.   animation:move-clouds-back 200s linear infinite;
  2362. z-index: -1 !important;
  2363. }
  2364. */
  2365.  
  2366. .status-menu-container .status-menu .status-button.all_anime.on:hover:after,
  2367. .status-menu-container .status-menu .status-button.watching.on:hover:after,
  2368. .status-menu-container .status-menu .status-button.reading.on:hover:after,
  2369. .status-menu-container .status-menu .status-button.completed.on:hover:after,
  2370. .status-menu-container .status-menu .status-button.onhold.on:hover:after,
  2371. .status-menu-container .status-menu .status-button.dropped.on:hover:after,
  2372. .status-menu-container .status-menu .status-button.plantowatch.on:hover:after,
  2373. .status-menu-container .status-menu .status-button.plantoread.on:hover:after
  2374. {
  2375.   opacity: 1 !important;
  2376.   margin-top: 50px !important;
  2377.      -moz-transition-property: all;
  2378.     -o-transition-property: all;
  2379.     -webkit-transition-property: all;
  2380.     transition-property: all;
  2381.     -moz-transition-duration: 0.3s;
  2382.     -o-transition-duration: 0.3s;
  2383.     -webkit-transition-duration: 0.3s;
  2384.     transition-duration: 0.3s;
  2385.     -moz-transition-timing-function: ease-in-out;
  2386.     -o-transition-timing-function: ease-in-out;
  2387.     -webkit-transition-timing-function: ease-in-out;
  2388.     transition-timing-function: ease-in-out;
  2389. }
  2390.  
  2391. /* testing */
  2392.  
  2393. .list-unit.watching:after {
  2394.   content: "";
  2395.   display: block;
  2396.   width: 20%;
  2397.   height: 100%;
  2398.   position: fixed;
  2399.   bottom: 0px !important;
  2400.   right: 0px !important;
  2401.   background: url(http://i.imgur.com/4850NrO.png) no-repeat bottom right;
  2402.   background-size: 100%;
  2403.   pointer-events: none;
  2404.   z-index: 9;
  2405. }
  2406.  
  2407. .list-unit.completed:before {
  2408.   content: "";
  2409.   display: block;
  2410.   width: 20%;
  2411.   height: 100%;
  2412.   position: fixed;
  2413.   bottom: 0px !important;
  2414.   right: 0px !important;
  2415.   background: url(http://i.imgur.com/QIQv5oU.png) no-repeat bottom right;
  2416.   background-size: 100%;
  2417.   pointer-events: none;
  2418.   z-index: 9;
  2419. }
  2420.  
  2421. .list-unit.onhold:before {
  2422.   content: "";
  2423.   display: block;
  2424.   width: 20%;
  2425.   height: 100%;
  2426.   position: fixed;
  2427.   bottom: 0px !important;
  2428.   right: 0px !important;
  2429.   background: url(http://i.imgur.com/mxSdlQX.png) no-repeat bottom right;
  2430.   background-size: 100%;
  2431.   pointer-events: none;
  2432.   z-index: 9;
  2433. }
  2434.  
  2435. .list-unit.dropped:before {
  2436.   content: "";
  2437.   display: block;
  2438.   width: 20%;
  2439.   height: 100%;
  2440.   position: fixed;
  2441.   bottom: 0px !important;
  2442.   right: 0px !important;
  2443.   background: url(http://i.imgur.com/UoPx37I.png) no-repeat bottom right;
  2444.   background-size: 100%;
  2445.   pointer-events: none;
  2446.   z-index: 9;
  2447. }
  2448.  
  2449. .list-unit.plantowatch:before {
  2450.   content: "";
  2451.   display: block;
  2452.   width: 20%;
  2453.   height: 100%;
  2454.   position: fixed;
  2455.   bottom: 0px !important;
  2456.   right: 0px !important;
  2457.   background: url(http://i.imgur.com/jfCq1dV.png) no-repeat bottom right;
  2458.   background-size: 100%;
  2459.   pointer-events: none;
  2460.   z-index: 9;
  2461.  
  2462. }
  2463.  
  2464.  
  2465.  
  2466. .link:hover {
  2467. cursor: url(http://cur.cursors-4u.net/games/gam-14/gam1394.cur), progress !important;
  2468. }
  2469.  
  2470. .list-table .list-table-data .data.score {
  2471. width: 21px !important;
  2472. height: 21px !important;
  2473. background-image: url(http://i.imgur.com/udzEw6G.png);
  2474. background-repeat: no-repeat;
  2475. background-size:contain;
  2476. background-position: 50% 50%;
  2477. }
  2478.  
  2479. .list-table .list-table-data .data.score a {color:#fff !important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!