❓ Ask for help here + See Frequently Asked Questions

@import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css";

@import "http://mal-image.appspot.com/anime/CynicalWarner";

   /*********************************************************/
/* MAL Miku Style by b1o2r3i4s5 (2012)                   */
/* Special Thanks to Kyouhansha, al_exs, and Shishio-kun */
/*********************************************************/

/****************/
/* Icon top bar */
/****************/

@import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css";

/*********************/
/* Anime Cover Image */
/*********************/

@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";

/***************************************/
/* Background & Universal text Styling */
/***************************************/

body {
    background-image: url(http://i58.tinypic.com/2i0u7iq.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    color: #fff;
    font-size: 14.20px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    /*text-shadow: 2px 2px 6px #aaa;*/
}

/*************/
/* List Area */
/*************/

#list_surround {
    margin-left:15px;
    margin-top:-60px;
    margin-bottom: 100px;
    width:800px;
    background: rgba(0, 0, 0, 0.6);
    
/* Gradient Borders */
    border: 20px solid transparent;
    -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
    -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
    -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
    border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
	-webkit-background-clip: padding-box !important;
	background-clip: padding-box !important;
}

/****************************/
/* Highlights Rows on Hover */
/****************************/

:hover tbody.td1,:hover tbody.td2 {
    background-image:url(https://dl.dropbox.com/s/mh1xxfqpkpebxm8/hl2.png);
    background-size:100% 100%;
}

/* Highlight Image for First Column */
:hover tbody.td1:first-of-type,:hover tbody.td2:first-of-type
{background-image:url(https://dl.dropbox.com/s/1brcvy03yoln0eu/hl3.png);}

/* Highlight Image for Last Column */
:hover tbody.td1:last-of-type,:hover tbody.td2:last-of-type
{background-image:url(https://dl.dropbox.com/s/p58vjxqufjitetw/hl4.png);}

/*****************/
/* Styling */
/*****************/

/* Header Styling */
.header_title
{
    font-weight: bold;
    padding: 3px;
    text-align:center;
    font-size: 20px;
/* Highlight Headers */
    background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png);
    background-size:100% 100%;
}

/* cell Styling */
.td1, .td2, .table_header {padding: 2px 3px;}

/* Links Styling */
a {color: #fff; text-decoration: none;}
a:hover {text-decoration: underline;}

/*************************/
/* Hides category totals */
/*************************/

.category_totals {display:none;}

/********************/
/* Grand Total Area */
/********************/

#grand_totals
{
    padding:3px;
    margin-bottom:20px;
    text-align:center;
    font-size:12px;
/* Highlight Grand total Header */
    background-image:url(https://dl.dropbox.com/s/bogat6oa13f6iyl/hl.png);
    background-size:100% 70%;
    background-position:center top;
    background-repeat:no-repeat;
}

/*Grand total Header*/
#grand_totals:before
{
    content:"Grand Totals \a ";
    white-space: pre;
    font-weight: bold;
    padding: 3px;
    text-align:center;
    font-size: 18px;
}

/******************/
/* Copyright Info */
/******************/

#copyright
{
    padding:3px;
    font-size:12px;
    margin-bottom:5px;
}

/*****************/
/* Style Credits */
/*****************/

#copyright:before
{
    content:"CSS Style created by b1o2r3i4s5 \a Special Thanks to Kyouhansha, al_exs, and Shishio-kun \a \a";
    white-space: pre;
}


body {
background-size: cover;
}

/*PADDING
The space around the words in your list.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover,
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals,
.status_not_selected, .table_header, .category_totals, .td2, #copyright{
padding: 6px;
}


.table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) {
position: relative !important;
right: 75px;
}

/*
CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)
Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. 
*/

#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) {
display: tab\le-cell;
}

#list_surround small a:last-of-type {
display: none !important;
}

.animetitle + small {
visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="], 
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
visibility: visible !important;
margin-right: 10px
}

.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
visibility: visible !important;
}

.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
text-decoration: underline;
}

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS).
Left and top adjust the position it appears on screen.
Control the height and width of the pic with height and width.
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.
*/

:hover + .hide {
display:block !important;
position:fixed;
top:160px;
left:830px;
width:225px;
height:450px;
background-color: rgba(0, 0, 0, 0.6);
border: 30px solid transparent;
-moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
-webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
-o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
background-repeat: no-repeat;
background-size: 225px 315px;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
content:"Preview \a ";
white-space: pre;
display:block;
font-weight: bold;
padding: 6px;
font-size: 18px;
margin-top:-30px;
}


/*
MINI REVIEW (HOVER TAG)
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial:
http://myanimelist.net/forum/?topicid=563993
*/
td[class^='td']:nth-of-type(6) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 515px;
left: 860px;
font-size: 12px;
width: 245px;
color: white !important;
z-index: 1;
background: transparent !important;
}

/* TAG TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(6) a {
color: white !important;
}


/* OTHER SETTINGS */
:hover + .hide , tr:hover td[class^='td']:nth-of-type(6){
visibility: visible;
opacity: 1;
}

/* REMOVE HEADER
Deletes the header Tags which isn't necessary.
*/
.table_header:nth-of-type(6) {
display: none !important;
}

/* REMOVE TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) small {
display: none;
}

/* GOOGLE CHROME FIX
Adjust this amount 50px at a time (more or less) if your columns are uneven in Chrome, until your columns are even.
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
td[class^='td']:nth-of-type(2) {
width: 420px !important;}
}

#list_surround tab\le:nth-of-type(n+4):not([class^="header_"]),
.hide {
        float: left;
        position: relative;
        width: 183px;
        height: 249px;
        margin: 11px;
        border-radius: 6px;
}
 
#list_surround tab\le:nth-of-type(n+4):not([class^="header_"]) {
        z-index: 1;
}


.hide {
        display: block !important;
        margin-left: -194px;
        background-size: cover;
        background-position: center;
        border-radius: 6px;
        box-shadow: 0px 0px 15px 5px rgb(0, 0, 0) inset;
}

.td1, .td2 {
        position: absolute;
        padding: 4px 7px;
}
 
.td1:nth-of-type(2), .td2:nth-of-type(2) {
        visibility: hidden;
        padding: 0px;
        width: 100%;
        height: 100%;
}
 
.td1:first-of-type, .td2:first-of-type {
        display: none;
}
 
.td1, .td2, .td1 a + small, .td2 a + small, .animetitle {
        background-color: rgba(0, 0, 0, 0.7);
        border: 1px solid black;
        border-radius: 3px;
        color: white;
        text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}
 
/* XXXXXXXXXX AIRING / REWATCHING XXXXXXXXXX */


.td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small {
        display: block;
        visibility: visible;
        position: absolute;
        top: 26px;
        right: 68px;
        width: auto;
        padding: 4px 7px;
        height: 8px;
        line-height: 8px;
        text-align: center;
        word-wrap: break-word;
}
 
/* XXXXXXXXXX TYPE XXXXXXXXXX */
 
.td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"] {
        top: 27px;
        left: 6px;
        width: auto;
        height: 8px;
        line-height: 8px;
}
 
/* XXXXXXXXXX ANIME TITLE XXXXXXXXXX */
 
.animetitle {
        display: block;
        visibility: visible;
        position: absolute;
        left: 0px;
        bottom: 0px;
        padding: 5px;
        width: 173px;
        max-height: 32px;
        line-height: 12px;
        overflow: hidden;
        text-align: center;
        font-size: 12px;
        color: rgb(0, 102, 255) !important;
}
 
.animetitle:hover {
        color: white !important;
}
 
/* XXXXXXXXXX SCORE XXXXXXXXXX */
 
.td1:nth-of-type(3), .td2:nth-of-type(3) {
        top: 6px;
        right: 6px;
        width: 45px;
        height: 37px;
        padding: 0px;
        text-align: center;
        font-size: 24px;
}
 
.td1:nth-of-type(3) a, .td2:nth-of-type(3) a {
        display: block;
        width: 100%;
        height: 100%;
}
 
.td1:nth-of-type(3) a span, .td2:nth-of-type(3) a span {
        display: block;
        height: 37px;
        text-align: center;
        line-height: 37px;
}
 
/* XXXXXXXXXX EPISODES XXXXXXXXXX */
 
td[width="50"] + .td1:nth-of-type(5):before, [width="50"] + .td2:nth-of-type(5):before {
        content: "Ep: ";
}
 
td[width="50"] + .td1:nth-of-type(5), td[width="50"] + .td2:nth-of-type(5) {
        left: 6px;
        top: 6px;
        width: auto;
        text-align: right;
        height: 8px;
        line-height: 8px;
}
 
/* XXXXXXXXXX TAGS AND OTHER STUFF XXXXXXXXXX */


.td1:nth-of-type(n+6), .td2:nth-of-type(n+6) {
        display: none;
}
 
#list_surround tab\le:hover .td1[width="125"],
#list_surround tab\le:hover .td2[width="125"] {
        display: none;
}


/* XXXXXXXXXX BOX THAT SHOWS UP WHEN YOU CLICK ON SCORE / EPISODES XXXXXXXXXX */
 
input[type=text] {
        width: 100%;
        text-align: right;
        border: none;
}
 
/* XXXXXXXXXX "GO" BUTTON (JUST PRESS ENTER) XXXXXXXXXX */
 
input[value=Go] {
        display: none;
}
 
/* XXXXXXXXXX EDIT ANIME INFO (COVERS THE ANIME PICTURE) XXXXXXXXXX*/
 
.List_LightBox {
        display: block;
        visibility: visible;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 181px;
        height: 247px;
        font-size: 0px;
        border: 2px solid black;
        border-radius: 6px;
       
}