❓ Ask for help here + See Frequently Asked Questions

@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);

@import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css);
@import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Gray.css);


/*
// Self-explanatory
*/

BODY {
color: #acacac;
font-size: 10px;
font-family: calibri;
background-color: #f1f1f1;
background-image: url('http://s5.postimage.org/btk1qjn1z/mal_02.png');
letter-spacing: 1px;
text-transform: normal;
}

/*
// Determines the positioning of your list
*/

#list_surround {
position: absolute !important;
left: 4px !important;
width: 700px;
}

/*
// All links on your list
*/

a {
color: #46BBBB;
text-decoration: none;
font-weight: normal;
}

a:visited {
color: #46BBBB;
text-decoration: none;
}

a:hover {
color: #46BBBB;
text-decoration: none;
}

/*
// Alternating row color 1 
*/

.td1 {
color: #acacac;
border-width: 0px;
border-style: solid;
border-color: #f6f6f6;
padding: 5px;
background-color: #f6f6f6; 
font-weight: normal;
}
   
/*
// Alternating row color 2 
*/

.td2 {
color: #acacac;
border-width: 0px;
border-style: solid;
border-color: #fdfdfd;
padding: 5px;
background-color: #fdfdfd; 
}
   
/*
// This represents the "Anime Title", "Score", "# Eps" columns 
*/
   
.table_header {
color: #46BBBB;
border-width: 0px;
background-color: #46BBBB;
padding: 5px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
    
/*
// headerLink represents the color of the links inside the_header 
*/
	
.table_headerLink {
color: #ffffff;
}
    
.table_headerLink:Visited {
color: #ffffff;
}
    
.table_headerLink:Hover {
color: #ffffff;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form {
border-width: ;
border-color: ;
border-style: ;
color: ;
padding: ;
font-size: px;
font-family: ;
}
		
/* Which 'status' up top is selected? */

.status_selected {
color: #acacac;
font-weight: bold;
padding: 8px;
background-color: #fdfdfd;
font-family: Palatino;
font-size: 8px;
text-transform: uppercase;
margin-left: 5px;
}

.status_selected a {
color: #acacac;
text-decoration: line-through;
}

.status_selected a:hover {
color: #46BBBB;
}

.status_not_selected {
color: #acacac;
font-weight: bold;
padding: 8px;
background-color: #fdfdfd;
font-family: Palatino;
font-size: 8px;
text-transform: uppercase;
margin-left: 5px;
}

.status_not_selected a {
color: #acacac;
}

.status_not_selected a:hover {
color: #46BBBB;
}

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_title {
font-family: Palatino;
font-size: 40px;
color: #46BBBB;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -3px;
text-align: center;
padding-bottom: 5px;
margin-top: 15px;
}


.category_totals {
}

#grand_totals {
text-align: center;
}

/* header_al is thesurrounding "User's Anime List" at the top */

.header_al {
font-weight: bold;
font-size: 16px;
}

/* header_al_links is thewith your "Profile" and "MyAnimeList home" links */

.header_al_links
{
}

/* controls what styles you can give to all the anime titles in your list */

.animetitle {
font-weight: normal;
}

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright {
padding-top: 6px;
text-align: center;
margin: 0 auto;
width: px;
}

/* 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.
*/
.hide {
background-size: cover;
left: 780px;
top: 100px;
height: 230px;
width: 180px;
border-style: solid;
border-color: white;
border-top: 1px solid white;;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-radius: 25px 25px 25px 25px;
background-color: rgba(200, 5, 200, 0.75);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
visibility: hidden;
opacity: 0;
}

/* 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 {
background: transparent;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 150px;
top: -25px;
border-radius: 25px 25px 0 0;
}


/*
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: 340px;
left: 780px;
background-color: rgba(224, 224, 224, 0.75) !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
font-size: 10px;
height: 50px;
width: 180px;
padding: 12px 12px 0px 12px;
color: white !important;
z-index: 1;
}

/* TAG TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(6) a { 
color: rgba(70, 187, 187, 0.75) !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;
}

/* 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 if your columns are uneven in Chrome. 
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
td[class^='td']:nth-of-type(2) {
width: 470px !important;}
}

/****************************/
/* Silver highlight and font resize on Hover */
/****************************/
tr:hover [class^="td"] {
background-color: rgba(224, 224, 224, 0.75) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}

/*
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 table:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) {
    display: table-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;
}

@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);
@import url(http://storage.live.com/items/4A07C1EEED420167%21150);
/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!

If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/

body {
background-image:
url(http://i.imgur.com/zm9Yen1.jpg);
background-attachment: fixed;
}



/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations).
*/

.header_title {
background-color:transparent;
color:blue;
font-family:english111 vivace bt;
font-size:48px;
}



/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header {
background-color:navy;
}



/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:white;
font-family:comic Sans MS;
font-size:20px;
}



/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Lucida Grande;
}



/*
LIST WIDTH
Use this to increase the width of your list!
*/

#list_surround {
width:600px;
}


/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.

You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center.

So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%".
If you want it to start from the top and left, use "top left"
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...

Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: center 43%;}



/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/


body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png);
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:black;
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:cyan;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}
body {
background-size: cover;
}
/*
SIDE BUTTONS
*/

#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i.imgur.com/Sc2lNEh.png);
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid transparent;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
display:block;
left:0px;
padding:0;
position:fixed;
top:60px;
width:263px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/KOYdmsj.png);
background-position:100% 0;
top:180px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/tvmFRA7.png);
background-position:0 0;
top:300px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/pgjr9ZG.png);
background-position:100% 0;
top:420px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/yEnTwde.png);
background-position:0 0;
top:540px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i.imgur.com/5xhsV2r.png);
background-position:100% 0;
top:660px;
}

.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity:0.7;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}
#list_surround {
left:0 !important;
margin:auto !important;
position:absolute !important;
right:0 !important;
}
#list_surround {
position: absolute !important;
right: 1px !important;}
/****************************/
/* Blue Highlight on Hover */
/****************************/
tr:hover [class^=td] {
background-color: rgba(80, 50, 225, 0.9) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}
/* THUMBNAIL SETTINGS
Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/
.hide {
height:55px;
width:35px;
margin-left:33px;
margin-top:-65px;
border:1px solid #FFFFFF;
background-color:rgba(248, 162, 200, 0.7);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
position: absolute;
}

/*THUMBNAIL HOVER SETTING
This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */
.hide:hover {
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px;
position:absolute;
z-index:1;
}


/*THUMBNAIL HOVER FLICKER FIX
If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! 
*/
.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 210px;
z-index: 20;
}


/*ANIMATION FOR ZOOM
Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default.
*/
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}


/*ROW WIDTH AND SPACING
This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. 
*/
.td1:nth-of-type(2), .td2:nth-of-type(2) {
height: 62px;
padding-left: 42px;
}
/*
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 table:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) {
    display: table-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;
}
/*
Anime List only

CURRENTLY WATCHING HEADER
This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. 

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". 
*/
.header_cw {
background-image:url(http://i.imgur.com/w3gOv9Z.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
COMPLETED HEADER
This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. 

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". 
*/
.header_completed {
background-image:url(http://i.imgur.com/O7L6P0Y.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
ON-HOLD HEADER
This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. 

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". 
*/
.header_onhold {
background-image:url(http://i.imgur.com/UJnyC7C.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
DROPPED HEADER
This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. 

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". 
*/
.header_dropped {
background-image:url(http://i.imgur.com/7zi9q0L.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
PLAN TO WATCH HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. 

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". 
*/
.header_ptw {
background-image:url(http://i.imgur.com/Z10daK0.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}

/*
OTHER CODES
Stuff I had to add after site changes. You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}


/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Watching" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}
#list_surround {
position: static !important;
right: 1px !important;}
#list_surround {
margin-right: inherit !important;
left: inherit !important;
} 

<style type="text/css">@import "https://dl.dropbox.com/s/e5t6j0tes8e2qt3/01cov.css";

@import url(http://storage.live.com/items/4A07C1EEED420167%21152);

@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";

@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);

@import url(http://storage.live.com/items/4A07C1EEED420167%21152);

#more9253 {background-image:url(http://cdn.myanimelist.net/images/anime/5/73199.jpg);}

#more27899 {background-image: url(http://cdn.myanimelist.net/images/anime/13/71777.jpg);}

#more6746 {background-image:url(http://cdn.myanimelist.net/images/anime/10/71772.jpg);}

#more1689 {background-image:url(http://cdn.myanimelist.net/images/anime/6/73426l.jpg); }

#more457 {background-image:url(http://cdn.myanimelist.net/images/anime/2/73862l.jpg); }


/*
MAIN BACKGROUND COLOR AND IMAGE
By default, there's no image in this part of the code. Its just a background color- silver.
(the default image of Black Rock Shooter is in the next code #inlineContent)
Change the color to what you want or add an image for a backdrop here.

For more info or questions on this code:
http://myanimelist.net/forum/?topicid=412787
*/
body {
background: url(http://images4.alphacoders.com/119/119766.jpg) fixed;background-size: cover; #FFFFFF;

}

/*
SECOND BACKGROUND (with render)
The background behind the list but in front of the main background.
By default, for its own image it has the render of Black Rock Shooter (girl). 
You can change her with another render or even background image here!
Make sure you leave the width as large as the image's width.
The positioning of the background can be controlled with the % numbers after the background url, 
but you may need to expand the width for more positioning options. 
All the other codes should be left alone.
*/

/*
TITLE
The List header which by default says My Anime List
can be changed out here.
*/

#list_surround {
background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent;
font-size: 81.25%;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 227px;
width: 920px;
}



/*
FONT
Font used across the whole list. 
*/
body {
font-family: arial;
}


/*
LINK COLOR
*/
a {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
color: #EEEEEE;
text-decoration: none;
text-shadow: none;
}
a:hover {
color: #3F1786;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}



/* CATEGORY LINKS */
.status_not_selected, .status_selected {
border: 0 none !important;
height: auto !important;
padding: 0 8px;
text-align: center !important;
width: 16.667% !important;
}
.status_not_selected a, .status_selected a {
background-color: rgba(64, 60, 90, 0.6);
border-color: rgba(48, 44, 64, 0.5);
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
display: block !important;
font-weight: bold;
padding: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
.status_selected a {
background-color: rgba(180, 32, 48, 0.6);
border-color: rgba(164, 16, 32, 0.5);
}
.status_not_selected a:hover {
background-color: #403C5A;
border-color: #201C3A;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}
.status_selected a:hover {
background-color: #B42030;
border-color: rgba(148, 0, 24, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}



/* HEADER */
.table_header {
background-color: rgba(65, 35, 95, 0.6);
}
.table_header:first-of-type {
border-radius: 3px 0 0 0;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(5) {
border-radius: 0 3px 0 0;
}



/* ROWS COLOR */
.td1 {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
background-color: rgba(136, 147, 169, 0.6);
}
.td2 {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
background-color: rgba(151, 164, 183, 0.6);
}



/* ROWS HOVER */
tr:hover [class^="td"] {
background-color: rgba(72, 64, 87, 0.6);
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}



/* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */
noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 {
font-size: 15px; 
}



/* LIST SETTINGS */
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border: 0;
padding: 4px;
text-align: center;
vertical-align: middle;
}
.table_header, .td1, .td2, .category_totals {
line-height: 30px;
}
.borderRBL{
line-height: normal !important;
}
[cellspacing="0"] {
line-height: 17px;
}
[class^="header_"] +{
border-collapse: separate !important;
}



/* CATEGORY TOTALS */
.category_totals {
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
background-color: rgba(72, 64, 87, 0);
border-radius: 0 0 3px 3px;
color: rgba(51, 51, 51, 0);
text-align: center;
}
.category_totals:hover {
background-color: rgba(72, 64, 87, 0.6);
color: #EEEEEE;
}



/* HEADER TEXT AND DIMENSIONS */
[class^="header_"] * {
font-size: 19px;
height: 60px;
line-height: 24px;
padding-bottom: 4px;
text-align: left;
vertical-align: bottom;
}
.header_title {
border-radius: 4px 4px 4px 4px;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15);
}



/* BOTTOM OF LIST */
#grand_totals {
background-color: rgba(72, 64, 87, 0.6);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
#copyright {
background-color: rgba(180, 32, 48, 0.6);
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 17px;
margin-top: 10px;
padding: 8px;
text-align: center;
}
/* THUMBNAIL SETTINGS
Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/
.hide {
height:55px;
width:35px;
margin-left:33px;
margin-top:-65px;
border:1px solid #FFFFFF;
background-color:rgba(248, 162, 200, 0.7);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
position: absolute;
}

/*THUMBNAIL HOVER SETTING
This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */
.hide:hover {
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px;
position:absolute;
z-index:1;
}


/*THUMBNAIL HOVER FLICKER FIX
If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! 
*/
.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 210px;
z-index: 20;
}


/*ANIMATION FOR ZOOM
Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default.
*/
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}


/*ROW WIDTH AND SPACING
This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. 
*/
.td1:nth-of-type(2), .td2:nth-of-type(2) {
height: 62px;
padding-left: 42px;
vertical-align: top;
}

/* tags below title */
.td1:nth-of-type(6), .td2:nth-of-type(6)
{
	background: transparent !important;
	margin-left: -840px;
	margin-top: 30px;
	position: absolute;
	width: 640px;
}
/* hide tags header */
.table_header:nth-child(6)
{
	display: none;
}
 </style>

/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

body {
background-image:
url(http://i58.tinypic.com/9vbp7a.png);
background-attachment: fixed;
background-position: center center;
background-size: cover ;
}
#list_surround  > table{
	width:830px;	/*use to change list width */
	margin:auto;
}
#list_surround  > table:first-of-type{
	width:100%;		/*use to change menu to banner ratio (Max 100%)*/)
	
}
.header_title {
background-color:transparent;
color:;
font-family:english111 vivace bt;
font-size:30px;
}

.table_header {
background-color:rgba(158,226,240,0.7);
color:grey;
font-family:Lucida Grande;
}
.table_headerLink, .table_headerLink:visited {
color:grey;
}

.animetitle, .animetitle:visited {
font-family:comic Sans MS;
font-size:18px;
}


.td1, .td2, a, a:visited, .category_totals,  #grand_totals, #copyright {
color:black;
font-family:Lucida Grande;
}


#list_surround {
width:1280px;			/*banner width*/
position: relative;

}

.header_cw {
background-image:url(http://i61.tinypic.com/2q81spl.png);
height: 209px;
margin-bottom: 0px;
background-color: transparent;
transition: all 0.2s ease-in;
}


.header_completed {
background-image:url(http://i59.tinypic.com/orp4xe.png);
height: 209px;
margin-bottom: 0px;
background-color: transparent;
}

.header_onhold {
background-image:url(http://i61.tinypic.com/rt3trs.png);
height: 209px;
margin-bottom: 0px;
background-color: transparent;
}

.header_ptw {
background-image:url(http://i60.tinypic.com/33p989g.png);
height: 209px;
margin-bottom: 0px;
background-color: transparent;
}

#list_surround {
background-image: url(http://i62.tinypic.com/2d446u.png);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
padding-top: 317px ; 		/*Moving the list up and down */
}

/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/


body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
margin:auto;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:cyan;
text-decoration:underline;
}
.category_totals,
.td1,
#grand_totals,
#copyright {
background-color: rgba(209,247,255,0.5);
border-width:0;
padding:2px;
}
.td2 {
background-color: rgba(206,234,240,0.5);
padding:2px;
border-width:0;
}

tr:hover [class^="td"] {
background-color: rgba(72, 64, 87, 0.6);
color: cyan;
-moz-transition: .3s ease-out;
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
}

tr:hover .td1, tr:hover .td2 {
height: 40px;
color: cyan;
font-weight: bold
}
tr:hover [class^="td"] a {
color: cyan;
-moz-transition: .3s ease-out;
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
}
tr:hover [class^="td"] .animetitle {
text-transform: uppercase;
-moz-transition: .3s ease-out;
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
}

.status_selected, .status_not_selected {
border: 8px ridge navy;
height: 44px;
text-align: center;
width: 16.667%;
font-family: Comic Sans MS;
font-weight: bold;
}
.status_not_selected {
opacity: 0.5;
background-color: rgba(157, 229, 245, 1);
}
.status_not_selected:hover, .status_selected {
background-color: rgba(28, 137, 232, 1);
opacity: 1;
border: 12px ridge navy;
-moz-transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-o-transition: .2s ease-out;
}
.status_not_selected:hover a, .status_selected a {
color: cyan;
-moz-transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-o-transition: .2s ease-out;
}
.status_not_selected a, .status_selected a ,.status_not_selected:hover a,.status_not_selected a:hover{
	display:block;
	text-decoration:none;
}
.table_header {
height: 8px;
font-weight:bold;
padding:2px;
}
.category_totals {
height:20px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}