❓ Ask for help here + See Frequently Asked Questions

@import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css";
@import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Violet.css";
@import "http://fonts.googleapis.com/css?family=Rosario";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
body {
font-family:Rosario;
}
.header_title {
background-color:transparent;
color:white;
font-size:26px;
}
.animetitle, .animetitle:visited {
color:white;
font-size:22px;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-size:15px;
}
.td1[align="center"][width="45"], .td2[align="center"][width="45"] {
color:white !important;
font-size:40px;
left:500px;
margin-top:64px;
position:absolute;
width:70px;
}
.td1[align="center"][width="45"] a, .td2[align="center"][width="45"] a {
color:white;
font-size:40px;
}
.td1[align="center"][width="45"]::before, .td2[align="center"][width="45"]::before {
color:white;
content:' My Score ';
font-size:15px;
}
td:nth-of-type(6) a {
color:white;
content:' My Score ';
font-size:15px;
}
#list_surround {
width:600px;
}
#list_surround {
left:-700px !important;
position:absolute !important;
}
#list_surround {
background-image:none;
}
.hide {
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:2px solid white;
display:inline-block !important;
height:157px;
margin-bottom:3px;
margin-left:13px;
margin-top:3px;
position:relative;
width:112px !important;
}
body {
background-attachment:fixed;
background-position:0 0;
background-size:cover;
}
.table_header:nth-of-type(3) {
background-color:transparent;
position:absolute;
right:24px;
top:87px;
width:106px;
}
.table_header:nth-of-type(3) {
}
.table_header:nth-of-type(3)::before {
color:white;
content:' Sort by: ';
font-size:14px;
font-weight:normal;
}
td:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
height:146px !important;
margin-left:-456px;
margin-top:45px;
position:absolute;
width:359px;
}
body {
background-repeat:no-repeat no-repeat;
}
#list_surround {
left:0;
margin:auto;
position:absolute;
right:0;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
text-decoration:underline;
}
.category_totals, .td1, .td2, #grand_totals, #copyright {
background-image:none;
border-width:0;
padding:2px;
}
.category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover {
border-width:0;
padding:2px;
}
#copyright::after {
}
.thickbox {
color:#00FFFF;
font-size:12px;
}
.header_title {
height:32px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
margin:0 auto;
text-align:center;
}
.table_header:nth-of-type(6) {
display:none;
}
#inlineContent {
background-image:url(http://i39.tinypic.com/2exr03p.png);
background-position:50% 50%;
background-repeat:repeat no-repeat;
bottom:0;
display:block !important;
height:80px;
left:0;
margin-bottom:0;
position:fixed;
width:100%;
z-index:-1;
}
td:nth-of-type(6) small {
content:' Edit Review ';
font-size:0;
height:20px;
margin-left:17px;
margin-top:-12px;
position:absolute;
}
.header_title { font-size: 0; }
.header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw {
position: fixed;
content: '';
width: 100%;
height:100%;
left: 0;
top: 0;
background-size: cover;
z-index: -1;
}

.header_cw { background-image: url('http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/crossoverlist/WatchingBG_zps58f5a7be.png'); }

.header_completed { background-image: url('http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/crossoverlist/CompletedBG_zps12ea0e79.png'); }

.header_onhold { background-image: url('http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/crossoverlist/OnHoldBG_zpsc951634b.png'); }

.header_dropped { background-image: url('http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/crossoverlist/DroppedBG_zps9310dff8.png'); }

.header_ptw { background-image: url('http://i1121.photobucket.com/albums/l506/Kagare/My%20Anime%20List%20-%20DONT%20MOVE/crossoverlist/PlanToWatchBG_zps6e3bd59e.png'); }

.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
display:none;
}
.status_not_selected a, .status_selected a {
padding: 2px;
color: white;
}
.status_selected a {
text-decoration:blink;
}
td:nth-of-type(6) small::after {
content:' Review ';
font-size:13px !important;
}

/* Math part of the layout, don't change unless you know what you're doing */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";

body{
/* Set up a background image: */
background-image: url("http://i1.minus.com/ipemrPhaiORD8.png");

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}

/*LIST HOVER COLOR
This configures the look of the part with sort links:
* the border and the background.
* Colors are in rgba format which means first three values
* define a color in Red-Green-Blue mode and the last one
* sets up an opacity of the color: rgba(R,G,B,a)
* Use color picker in Photoshop (or other image editor),
* Opera Dragonfly or Rainbow Firefox extension to get desired
* RGB values and then play with opacity until you get what you
* wanted.
*/

tr:hover [class^=td] {
background-color: rgba(4, 150, 100, 0.9) !important;
}

.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}


.table_header, .table_headerLink{
/* Color of the sort links. I used short hex notation here but
* you may use whatever you want, rgb, rgba or full-hex. This
* won't be mentioned below, the way to change colors is the same
*/
color: #FFF;

/* Remove the following line if you want links to be underlined */
text-decoration: none;
}

.table_headerLink:hover{
/* This configures a light white glow on hovered links
* Changing colors should be enough here so I'll leave it for you.
* It's the same rgba we've encountered.
*/
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* The look of the rest of the
* Configures background, border and text color for non-links
* I made it a bit more opaque than sorting headers
*/
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}

/* This is for the links in the rest of the */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #ffc700; /* Paints links orange */
}

/* Glow effect on link hover. The same text-shadow property */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}


/* This makes all text ins bold except for Edit - More */
#list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold}

/* CSS sprite for Currently Watching, Completed, Dropped, etc...
* Note there is only one image used for all headers. I've made an
* inverted version for bright layouts:
* [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png
* or you can make one yourself. It's not that difficult.
*/
.header_title{
background-image: url(http://i.imgur.com/VImNB.png);
}

/* Block displaying category totals
* It's redesigned to be the part of the layout
* and you've already encountered all the properties here
* so it won't be hard for you to customise this.
* Note that a different shadow colors used for glow effect
*/
.category_totals{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}

/* Text displaying global totals */
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
/* The following line makes it ALL-CAPS */
text-transform: uppercase;
}

/* Modifying copyright section. It's designed to look similar
* to the whole layout, ok?
*/
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}

/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #FFF;
}

#list_surround {
position: absolute !important;
left: 1px !important;}

/*
Tags Row Width
*/


#list_surround {
width: 100% !important;
}
td:nth-of-type(6) {
opacity: 0;
width: 510px;
transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-webkit-transition: opacity .3s linear;
}
tr:hover td:nth-of-type(6) {
opacity: 1;
}

/* Math part of the layout, don't change unless you know what you're doing */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";

body{
/* Set up a background image: */
background-image: url("http://i1.minus.com/ipemrPhaiORD8.png");

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}

/*LIST HOVER COLOR
This configures the look of the part with sort links:
* the border and the background.
* Colors are in rgba format which means first three values
* define a color in Red-Green-Blue mode and the last one
* sets up an opacity of the color: rgba(R,G,B,a)
* Use color picker in Photoshop (or other image editor),
* Opera Dragonfly or Rainbow Firefox extension to get desired
* RGB values and then play with opacity until you get what you
* wanted.
*/

tr:hover [class^=td] {
background-color: rgba(4, 150, 100, 0.9) !important;
}

.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}


.table_header, .table_headerLink{
/* Color of the sort links. I used short hex notation here but
* you may use whatever you want, rgb, rgba or full-hex. This
* won't be mentioned below, the way to change colors is the same
*/
color: #FFF;

/* Remove the following line if you want links to be underlined */
text-decoration: none;
}

.table_headerLink:hover{
/* This configures a light white glow on hovered links
* Changing colors should be enough here so I'll leave it for you.
* It's the same rgba we've encountered.
*/
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* The look of the rest of the
* Configures background, border and text color for non-links
* I made it a bit more opaque than sorting headers
*/
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}

/* This is for the links in the rest of the */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #ffc700; /* Paints links orange */
}

/* Glow effect on link hover. The same text-shadow property */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}


/* This makes all text ins bold except for Edit - More */
#list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold}

/* CSS sprite for Currently Watching, Completed, Dropped, etc...
* Note there is only one image used for all headers. I've made an
* inverted version for bright layouts:
* [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png
* or you can make one yourself. It's not that difficult.
*/
.header_title{
background-image: url(http://i.imgur.com/VImNB.png);
}

/* Block displaying category totals
* It's redesigned to be the part of the layout
* and you've already encountered all the properties here
* so it won't be hard for you to customise this.
* Note that a different shadow colors used for glow effect
*/
.category_totals{
display: block;
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-align: center;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
width: calc(100% - 556px);
width: -moz-calc(100% - 556px);
width: -webkit-calc(100% - 556px);
}

/* Text displaying global totals */
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
/* The following line makes it ALL-CAPS */
text-transform: uppercase;
}

/* Modifying copyright section. It's designed to look similar
* to the whole layout, ok?
*/
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}

/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #FFF;
}

#list_surround {
position: absolute !important;
left: 1px !important;}

/*
Tags Row Width
*/


#list_surround {
width: 100% !important;
}
td:nth-of-type(6) {
opacity: 0;
width: 510px;
transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-webkit-transition: opacity .3s linear;
}
tr:hover td:nth-of-type(6) {
opacity: 1;
}

/*
Square Layout
u531355 - 2012
*/

/* 1) Generated covers */
@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/animetitle_after.css);

/* 3) Top-bar icons */
@import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css);

/*Tags*/
.td1:nth-of-type(6), .td2:nth-of-type(6){
height: auto !important;
text-align: justify;
}

.td1:nth-of-type(6) a:hover, .td2:nth-of-type(6) a:hover{
color: rgb(39, 195, 255) !important;
}

span[id*="tagLinks"] {
font-size: 0px !important;
}

.td1:nth-of-type(6) span[id*="tagRow"], .td2:nth-of-type(6) span[id*="tagRow"] {
font-size: 11px;
display: block !important;
color: rgb(39, 195, 255) !important;
}

/*edit button for tags*/
a small {
color: white;
}
a small:hover {
color: red !important;
text-decoration: underline;
background-color: gold !important;
border-radius: 3px;
}
/* "Edit" window for Tags*/
input.inputtext, textarea.textarea, textarea.inputtext {
height: 100px;
width: 180px !important;
}

/* 6) Options */
/* Determines the number of covers on each row, it should be a multiple of 242px */
body {max-width: 1210px;}

/* Header picture */
#inlineContent {background-image: url(https://dl.dropbox.com/u/101477602/Natsume.jpg);}

/* Links color */
a {color: rgb(39, 195, 255);}

/* More infos on http://myanimelist.net/forum/?topicid=459189 */

/*#############*/
/*TEST by Monsterguy*/
/*#############*/

#mal_control_strip {
left: calc(9% - 88px) !important;
}

#list_surround {
width: 125%;
margin: 526px 0px 64px -137px;
padding: 11px 12px 42px 16px;
}

body {
margin: calc(9% + 30px) !important;
}

.List_LightBox:after, .animetitle:after {
pointer-events: none;
position: absolute !important;
display: block !important;
content: '';
width: 220px !important;
height: 220px !important;
border-radius: 13px;
box-shadow: 0px 0px 11px 2px rgb(13, 13, 13) inset;
}

.List_LightBox:after {
visibility: hidden;
opacity: 1;
margin-left: -1px !important;
background-color: rgb(26, 26, 26);
transition: opacity .3s linear .2s;
-moz-transition: opacity .3s linear .2s;
-webkit-transition: opacity .3s linear .2s;
z-index: 101;
}

.animetitle:after {
display: block !important;
margin-left: -19px !important;
margin-top: -172px !important;
background-repeat: no-repeat !important;
background-position: center center;
z-index: -1;
}

#list_surround table:nth-of-type(n+4) tbody:hover .List_LightBox:after {
visibility: visible;
opacity: 0;
}

#list_surround table:nth-of-type(n+4) tbody:hover .animetitle:after {
z-index: 100;
}

#inlineContent {
pointer-events: none;
display: block !important;
position: absolute;
top: 0px;
left: 0px;
height: 420px;
width: 100%;
background-position: right;
border-bottom-width: 42px;
border-bottom-style: solid;
z-index: -1;
}

#mal_control_strip {
position: absolute;
top: 0px;
left: auto !important;
width: 686px !important;
height: 120px;
background-image: none !important;
border-radius: 0px 0px 13px 13px;
}

#mal_control_strip div {
margin: 0px !important;
font-size: 0px !important;
}

#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks {
padding: 0px !important;
}

#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right-style: none !important;
}

#mal_cs_pic {
position: absolute;
top: 11px;
left: 11px;
}

#mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a {
display: block;
position: absolute;
top: 11px;
width: 64px;
height: 64px;
line-height: 64px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
letter-spacing: -1px;
font-size: 0px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 7px;
}

#mal_cs_listinfo div a:hover, #mal_cs_links div a:hover, #mal_cs_otherlinks div a:hover {
font-size: 11px;
}

#mal_cs_listinfo div:first-of-type a {left: 11px;}
#mal_cs_listinfo div:last-of-type a {left: 86px;}
#mal_cs_links div:first-of-type a:first-of-type {left: 161px;}
#mal_cs_links div:last-of-type a:first-of-type {left: 236px;}
#mal_cs_links div:last-of-type a:last-of-type {left: 311px;}
#mal_cs_links div:first-of-type a:last-of-type,
#mal_cs_otherlinks div:first-of-type a {left: 386px;}
#mal_cs_otherlinks div a[href="http://myanimelist.net/forum/"],
#mal_cs_otherlinks div a[href^="http://myanimelist.net/mangalist/"],
#mal_cs_otherlinks div a[href^="http://myanimelist.net/animelist/"],
#mal_cs_otherlinks div a[href="http://myanimelist.net/login.php"] {left: 461px;}
#mal_cs_otherlinks div a[href^="http://myanimelist.net/history/"],
#mal_cs_otherlinks div a[href="http://myanimelist.net/register.php"] {left: 536px;}
#mal_cs_otherlinks div a[href="http://myanimelist.net/panel.php?go=export"],
#mal_cs_otherlinks div a[href^="http://myanimelist.net/shared"],
#mal_cs_otherlinks div a[href="http://myanimelist.net/modules.php?go=faq"] {left: 611px;}

#mal_cs_listinfo div a:before, #mal_cs_links div a:before, #mal_cs_otherlinks div a:before {
position: absolute;
top: 0px;
left: 0px;
width: 64px;
height: 64px;
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: 56px;
}

#mal_cs_listinfo div a:hover:before, #mal_cs_links div a:hover:before, #mal_cs_otherlinks div a:hover:before {
content: none;
}

#mal_cs_powered {
top: 86px !important;
left: 461px;
right: auto !important;
}

#mal_cs_powered img {
display: none;
}

#searchBox {
position: absolute;
top: 0px;
left: 0px;
padding: 4px 7px;
width: 200px !important;
height: 15px;
font-size: 11px !important;
text-align: center;
border: none;
border-radius: 4px;
}

.header_cw + table, .header_completed + table, .header_onhold + table,
.header_dropped + table, .header_ptw + table {
position: absolute;
top: 86px;
width: 461px;
table-layout: fixed;
border-spacing: 11px 0px;
}

#list_surround > table:nth-of-type(n+4) ~ .header_cw + table,
#list_surround > table:nth-of-type(n+4) ~ .header_completed + table,
#list_surround > table:nth-of-type(n+4) ~ .header_onhold + table,
#list_surround > table:nth-of-type(n+4) ~ .header_dropped + table,
#list_surround > table:nth-of-type(n+4) ~ .header_ptw + table {
display: none;
}

.table_header {
width: auto;
}

.table_header:first-of-type, .table_header:nth-of-type(n+6) {
display: none;
}

.table_headerLink {
display: block;
padding: 4px 7px;
height: 15px;
text-align: center;
border-radius: 4px;
}

#list_surround > table:first-of-type {
position: absolute;
top: 398px;
width: auto;
font-size: 13px;
font-weight: bold;
border-spacing: 11px;
border-radius: 13px 13px 0px 0px;
}

.status_selected, .status_not_selected {
width: auto;
white-space: nowrap;
border-radius: 7px;
}

.status_selected a, .status_not_selected a {
display: block;
padding: 0px 22px;
line-height: 42px;
}

body {
margin: auto !important;
width: 77%;
min-width: 726px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a {
text-decoration: none;
}

#list_surround {
margin: 526px 0px 64px -31px;
padding: 11px 31px 42px 31px;
width: 100%;
border-radius: 42px;
}

.header_cw, .header_completed, .header_onhold,
.header_dropped, .header_ptw {
clear: both;
position: relative;
top: 31px;
margin: 0px 0px 42px 0px;
padding: 11px 0px;
border-radius: 13px;
}

.header_title {
padding-left: 242px;
font-size: 22px;
font-weight: bold;
text-align: center;
}

#list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide {
float: left;
position: relative;
width: 220px;
height: 220px;
margin: 11px;
border-radius: 13px;
}

#list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw) {
z-index: 1;
}

.td1, .td2 {
position: absolute;
padding: 4px 7px;
border-radius: 4px;
}

.td1:nth-of-type(2), .td2:nth-of-type(2) {
visibility: hidden;
padding: 0px;
width: 100%;
height: 100%;
}

.td1:first-of-type:before, .td2:first-of-type:before {
content: "#";
}

.td1:first-of-type, .td2:first-of-type {
top: 11px;
left: 11px;
width: 42px;
z-index: 1;
}

.td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small {
display: block;
visibility: visible;
position: absolute;
top: 11px;
left: 82px;
width: 43px;
padding: 4px 7px;
font-size: 11px;
text-align: center;
word-wrap: break-word;
border-radius: 4px;
}

.td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"] {
top: 11px;
right: 11px;
width: 42px;
}

td[width="70"] + .td1:nth-of-type(5):before, [width="70"] + .td2:nth-of-type(5):before {
content: "Volumes: ";
}

td[width="70"] + .td1:nth-of-type(5), td[width="70"] + .td2:nth-of-type(5) {
top: 11px;
right: 11px;
width: auto;
text-align: right;
}

.td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small {
display: block;
visibility: visible;
position: absolute;
top: 41px;
right: 11px;
width: auto;
padding: 4px 7px;
font-size: 11px;
text-align: right;
border-radius: 4px;
}

.animetitle {
display: block;
visibility: visible;
position: absolute;
left: 11px;
bottom: 41px;
padding: 7px;
width: 184px;
text-align: center;
font-size: 13px;
font-weight: bold;
border-radius: 7px;
}

.td1:nth-of-type(3):before, .td2:nth-of-type(3):before {
content: "Score: ";
}

.td1:nth-of-type(3), .td2:nth-of-type(3) {
left: 11px;
bottom: 11px;
width: auto;
text-align: left;
}

td[width="50"] + .td1:nth-of-type(5):before, [width="50"] + .td2:nth-of-type(5):before {
content: "Episodes: ";
}

td[width="50"] + .td1:nth-of-type(5), td[width="50"] + .td2:nth-of-type(5) {
right: 11px;
bottom: 11px;
width: auto;
text-align: right;
}

.td1:nth-of-type(4)[width="70"]:before, .td2:nth-of-type(4)[width="70"]:before {
content: "Chapters: ";
}

.td1:nth-of-type(4)[width="70"], .td2:nth-of-type(4)[width="70"] {
bottom: 11px;
right: 11px;
width: auto;
text-align: right;
}

.td1:nth-of-type(n+6), .td2:nth-of-type(n+6) {
display: none;
}

.td1[width="125"], .td2[width="125"] {
left: 11px;
top: 71px;
width: 184px;
height: 45px;
overflow: auto;
}

#list_surround > table:hover .td1[width="125"],
#list_surround > table:hover .td2[width="125"] {
display: block;
}

input[type=text] {
width: 100%;
text-align: right;
border: none;
border-radius: 4px;
}

input[value=Go] {
display: none;
}

#list_surround .List_LightBox {
display: block;
visibility: visible;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-size: 0px;
}

.category_totals {
padding: 0px 31px;
text-align: center;
white-space: pre-line;
border-radius: 13px;
}

.category_totals:before {
display: block;
content: "Totals:";
text-align: center;
font-weight: bold;
}

#grand_totals, #copyright {
clear: both;
position: relative;
top: 31px;
padding: 11px 0px;
text-align: center;
}

#grand_totals {
margin-bottom: 22px;
border-radius: 7px;
}

#copyright {
margin-top: 0px !important;
margin-bottom: 31px;
border-radius: 13px;
}

#list_surround > br {
display: none;
}




#inlineContent {
border-bottom-color: rgb(52, 52, 52);
}
#mal_control_strip {
background-color: rgb(52, 52, 52) !important;
}
#inlineContent, #searchBox, .status_selected, body, .hide {
background-color: rgb(26, 26, 26);
}
#searchBox, body, input[type=text] {
color: rgb(255, 255, 255);
}
#list_surround > table:first-of-type, #list_surround, input[type=text] {
background-color: rgb(52, 52, 52);
}
a {
color: rgb(182, 182, 182);
}
a:hover, #mal_cs_listinfo div a:hover, #mal_cs_links div a:hover, #mal_cs_otherlinks div a:hover {
color: rgb(255, 255, 255);
}
::selection {
color: rgb(245, 132, 0);
background-color: rgb(255, 255, 255);
}
::-moz-selection {
color: rgb(245, 132, 0);
background-color: rgb(255, 255, 255);
}
#mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a,
.table_headerLink, .status_not_selected,
.header_cw, .header_completed, .header_onhold,
.header_dropped, .header_ptw,
.category_totals, #grand_totals, #copyright {
background-color: rgb(26, 26, 26);
background-image: linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -o-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -moz-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -webkit-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -ms-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
}
#mal_cs_listinfo div a:hover, #mal_cs_links div a:hover, #mal_cs_otherlinks div a:hover,
.table_headerLink:hover, .status_not_selected:hover {
background-image: linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -o-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -moz-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
background-image: -ms-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%);
}
.td1, .td2, .td1 a + small, .td2 a + small, .animetitle {
background-color: rgba(13, 13, 13, 0.9);
background: transparent linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background: transparent -o-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background: transparent -moz-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background: transparent -webkit-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
background: transparent -ms-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%);
}

/*
MAIN BACKGROUND
This is the main background, at the very back of the layout.
To change it change the image link in the parenthesis after "background: url"
To change the position change right/top with other positions, like bottom or left.
To make the background scroll instead of staying in place change the background-attachment from "fixed" to "scroll".

If you need more help, check here: http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

body {
background-image: url(http://i49.tinypic.com/xt9gl.jpg);
background-position: center top;
background-attachment: fixed;
}


/*LIST SETTINGS
You can change the list width here.
To change the position of the list see my tutorial here:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/

#list_surround {
width: 650px;
position: absolute !important;
right: 15px !important;
}

/*ALTERNATING ROWS, LIST COLORS
You can alter the list colors here, see where it says blue, purple, etc.
The colors here correspond to what colors you see on the list.
Change them here. For example changing black to green here and saving will change the
black colors on the list to green.
Opacity is the degree of how transparent (see-through) the list is. .01 is almost completely clear. .99 is barely see-through.
*/
.status_selected, .td1, #grand_totals{
background-color: none;
background-image: url("http://i50.tinypic.com/6ezvk2.jpg") !important;
opacity: 0.99;
}
.status_not_selected, .table_header, .category_totals, .td2, #copyright {
background-color: none;
background-image: url("http://i50.tinypic.com/6ezvk2.jpg") !important;
opacity: 0.99;
}
.header_title{
background-color: transparent;
background-image: url("none") !important;
color: black;
opacity: 0.99;}

/*ALTERNATING ROWS, LIST COLORS ON CURSOR HOVER
This is the same as above, except its the colors you see on the list when you point your cursor on them.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover {
background-color: none;
background-image: url("http://i50.tinypic.com/6ezvk2.jpg") !important;
opacity: 0.99;
}
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover {
background-color: none;
background-image: url("http://i50.tinypic.com/6ezvk2.jpg") !important;
opacity: 0.99;}

.header_title:hover {
background-color: none;
background-image: url("none") !important;
opacity: 0.99;
}

/*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: 1px;
}

/*ANIME/MANGA TITLE FONT SETTINGS
*/
.animetitle, .animetitle:visited {
color: white;
font-weight: normal !important;
font-family: Tahoma;
font-size: 13px;
}

/*OTHER FONT SETTINGS
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-style: normal !important;
font-family: Lucida Grande;
font-size: 13px
}

/*BORDERS
*/
.status_selected, #grand_totals,
.status_not_selected, .header_title, #copyright {
border-color: #2b2b2b;
border-style: solid;
border-width: 1px;
}

.td1, .td2, .table_header {
border-color: #2b2b2b;
border-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px !important;
}

.category_totals{
border-color: #2b2b2b;
border-style: solid;
border-width: 1px;
}

.header_title{
border-color: black;
border-style: solid;
border-width: 0px;
}

/* OTHER CODES */

body {
background-color: black;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover, a:visited:hover {
color: white;
text-decoration: none;
}

.category_totals, .td1, .td2, #grand_totals, #copyright {
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.thickbox {
color: black;
font-family: fantasy;
font-size: 12px;
}
.header_title {
height: 30px;
}
.table_header {
font-weight: normal;
}
.category_totals {
height: 30px;
}
#copyright, #grand_totals {
margin: 0 auto;
text-align: center;
}

body { background-size: cover; }

/*
CUSTOM BANNER
"Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing!
*/

#list_surround {
background-image: url(http://i45.tinypic.com/xaxqw9.jpg);
background-position: right top;
background-repeat: no-repeat;
padding-top: 400px;
}

#mal\_control\_strip{
background: url(none) !important;
}

#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}

/*
TOP MENU BAR ADVANCED CUSTOMIZATION
*/
#mal_cs_listinfo {
background:none !important;
}
#mal_cs_listinfo a {
background:none !important;
color:white !important;
}
#mal_cs_listinfo a strong {
color:white;
background: none;
}
#mal_cs_links {
background: none;
}
#mal_cs_links a {
background:none !important;
color:white !important;
}
#mal_cs_otherlinks {
background:none;
}
#mal_cs_otherlinks a {
background:none !important;
color:white !important;
}
#mal_cs_otherlinks strong {
background:none !important;
}
#mal_cs_otherlinks strong a {
background:none !important;
color:white !important;
}
#mal_cs_powered {
background:none !important;
}
#mal_cs_powered a {
background:none !important;
}
#mal_cs_powered img {
}
#mal_cs_powered #search {
background:none !important;
}
#searchListButton {
background:none !important;
}

/*
Anime List only

CURRENTLY WATCHING/READING HEADER
This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_cw {
background-image:url(http://i45.tinypic.com/t0t37o.jpg);
height: 108px;
margin-bottom: -9px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
COMPLETED HEADER
This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_completed {
background-image:url(http://i48.tinypic.com/t896oy.jpg);
height: 108px;
margin-bottom: -9px;
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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_onhold {
background-image:url(http://i49.tinypic.com/m90d2v.jpg);
height: 115px;
margin-bottom: -6px;
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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_dropped {
background-image:url(http://i45.tinypic.com/24y21oh.jpg);
height: 106px;
margin-bottom: -6px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
PLAN TO WATCH/READ HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_ptw {
background-image:url(http://i49.tinypic.com/m7g6eo.jpg);
height: 115px;
margin-bottom: -6px;
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: transparent !important;
font-size: 0 !important;
}

#list_surround {
position: absolute !important;
margin: auto !important;
right: 0px !important;
left: 0px !important;}

.animetitle + small {
color:#06dbce;
}

/* Tags */
td[class^='td']:nth-of-type(6):before {
opacity: 0;
position: absolute;
display: block;
margin-left: -64px;
margin-top: -2px;
content: '';
width: 0;
height: 0;
background: linear-gradient(left , rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 35%);
background: -moz-linear-gradient(left , rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 35%);
background: -webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0, rgba(0, 0, 0, .8)),
color-stop(0.35, rgba(0, 0, 0, 0)));
transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-webkit-transition: opacity .5s linear;
}

tr:hover td[class^='td']:nth-of-type(6):before { opacity: 1; }

td[class^='td']:nth-of-type(6) {
visibility: hidden;
opacity: 0;
position: absolute !important;
left: 650px !important;
width: 180px !important;
height: 180px;
font-size: 12px;
line-height: 16px !important;
color: transparent !important;
padding: 2px;
color: #FFFFFF !important;
border: solid 1px rgba(250, 1, 7, .8);
background-color: rgba(0, 0, 0, .8) !important;
transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-webkit-transition: opacity .5s linear;
}

tr:hover td[class^='td']:nth-of-type(6) {
visibility: visible;
opacity: 1;
}

span[id*="tagLinks"] {
pointer-events: none;
opacity: 1;
transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-webkit-transition: opacity .5s linear;
}

tr:hover td[class^='td']:nth-of-type(6) a { color: #FFFFFF !important; }

/* Disable Tags in the Sort Options */
.table_header[width="125"] { display: none !important; }

@media screen and (-webkit-min-device-pixel-ratio:0) {

td[class^='td']:nth-of-type(2) {
width: 560px !important;}

}