@import url(http://fonts.googleapis.com/css?family=Roboto);
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css";
@import "https://dl.dropboxusercontent.com/s/68e70rc6a1bsyda/AnimeCovers.css";
/*
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("");
background-color: white;
background-attachment: fixed;
background-size: cover;
}

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

#list_surround {
background: url("https://puu.sh/tpDhP/b1ca4f0592.png") no-repeat scroll 50% 1px transparent;
font-size: 100%;
line-height: 1;
margin: 0 auto;
padding-bottom: 180px;
padding-top: 210px;
width: 650px;
}



/*
FONT
Font used across the whole list.
*/
body {
font-family: Roboto;
color: black;
font-size: 9pt;
}


/*
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: black;
text-decoration: none;
text-shadow: none;
}
a:hover {
color: black;
}

/* HEADER */
.table_header {
background-color: rgba(185, 98, 98, 1.0);
}
.table_header:first-of-type {
border-radius: 0px 0 0 0;
}
.table_header:nth-of-type(2) {
text-align: left;
}
.table_header:last-of-type {
border-radius: 0 0px 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(5, 51, 51, 0.0);
color: #000000
}
.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(51, 51, 51, 0.0);
color: #000000
}

/* ROWS HOVER */
tr:hover [class^="td"] {
background-color: rgba(159, 74, 74, 1.0);
}
.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: 22px;
}
.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, 1.0);
color: #EEEEEE;
}

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

/* BOTTOM OF LIST */
#grand_totals {
background-color: rgba(72, 64, 87, 1.0);
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, 1.0);
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 17px;
margin-top: 10px;
padding: 8px;
text-align: center;
}
#copyright:after {
content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info.";
}

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

/*
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(https://puu.sh/tpDij/67aba1269a.png);
height: 100px;
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(https://puu.sh/tpDi9/98bfcbc549.png);
height: 100px;
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(https://puu.sh/tpDj0/4d5083282d.png);
height: 100px;
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(https://puu.sh/tpDiT/402d378e75.png);
height: 100px;
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(https://puu.sh/tpDja/877451dc56.png);
height: 100px;
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;}


::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.0);
}

::-webkit-scrollbar-thumb {
background-color: rgba(251, 184, 218, 1.0);
}

.animetitle + small {
letter-spacing: 0.05em;
color: #333333;
}









/*
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 exapnd the width for more positioning options.
All the other codes should be left alone.
*/

#inlineContent {
background: url("http://puu.sh/tt7hp/eb91a65d02.png") left no-repeat;
background-size: contain;
display: inline-block !important;
height: 100% !important;
left: 0px !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100% !important;
z-index: -1 !important;}






/*
COLOR OF THE ICONS
Change the color, and adjust the opacity for brighter color.
Remove the display: none to match the selected icon to the other icons.
*/
#mal_cs_listinfo:before, #mal_cs_links:before,
#mal_cs_otherlinks:before, #mal_cs_powered:before {
background: transparent;
opacity: .9;

}



/*
BORDER OF ICONS
If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it.

*/
#mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before,
#mal_cs_otherlinks:before, #mal_cs_powered:before {
border-color: ;
border-style: ;
border-width: ;
height: 32px !important;
}

/*
BUTTONS COLOR AND BORDER
Buttons within the hover menus, not the icons themselves.
Second code is for button color on hover.
*/
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{
background-color: rgba(64, 60, 90, 0.6) !important;
border-color: transparent;
border-style: solid !important;
border-width: 1px !important;
}


#mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover {
background-color: #403C5A !important;
}



/*
COLOR OF HOVER MENUS AND SELECTED ICONS
Remove display none from the second code to match the colors of the selected icon to the icons above.
*/
#mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div,
#mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a {
background-color: rgba(255, 255, 255, 0.6) !important;
}

#mal_cs_listinfo:hover:before, #mal_cs_links:hover:before,
#mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before,
#mal_cs_listinfo:hover:after, #mal_cs_links:hover:after,
#mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after {
display: none;
background-color: ;
opacity: .2;
}

/*
COLOR OF USERNAME (for visitors)
You don't see this username on the menus when you're logged in, log out to see it.
*/
#mal_cs_otherlinks strong a {
color: #333333 !important;
}

#mal_cs_otherlinks strong a:hover {
color: blue !important;
background-color: transparent !important;
}

/*
POSITION OF TOP BAR
Change to absolute if you want it to not scroll with the page.
*/
#mal_control_strip
{
position: absolute !important;
background-color: transparent !important;
background-image: url(none) !important;
}




/*
OTHER CODES
If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own.
*/

#mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered {
-moz-box-sizing: border-box;
transition: all 0.4s ease 0s;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
position: absolute;
right: 4px;
text-align: center;
top: 4px;
width: 150px;
z-index: 10;
}
#mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover {
height: 200px !important;
padding-top: 32px;
width: 150px;
}
#mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd {
transition: opacity 0.4s ease-in-out 0s;
border-radius: 3px 0 0 0;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0;
}
#mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd {
opacity: 1;
}
#mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) {
border-radius: 0 0 3px 3px;
padding: 4px 0 8px;
}
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a {
background-color: rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
font: 13px/17px arial,sans-serif;
margin: 4px 12px 0;
padding: 3px 0;
text-decoration: none;
}
#mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) {
margin-top: 0;
}

#mal_cs_listinfo strong a strong {
font-weight: normal;
}
#mal_cs_otherlinks strong {
color: #333333;
display: block;
font: bold 13px/17px arial,sans-serif !important;
padding: 0 4px 4px;
text-shadow: 0 1px 1px #FFFFFF;
}
#mal_cs_otherlinks strong a {
background: none repeat scroll 0 0 transparent !important;
border-color: transparent !important;
border-radius: 0 0 0 0;
color: #333333;
display: inline;
font: bold 13px/17px arial,sans-serif !important;
margin: 0;
padding: 0;
text-shadow: 0 1px 1px #FFFFFF;
}
#mal_cs_powered a {
border-radius: 3px 0 0 0 !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0 !important;
}
#mal_cs_powered:hover a {
opacity: 1;
}
#mal_cs_powered a img {
background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
height: 0;
margin: 0 12px;
padding: 23px 0 0 126px;
width: 0;
}
#mal_cs_powered a img:hover {
background-color: #403C5A;
}
#mal_cs_powered #search {
border-radius: 0 0 3px 3px;
padding: 8px;
position: relative;
}
#mal_cs_powered #search #searchBox {
-moz-box-sizing: border-box;
border-color: #BCBCBC #D6D6D6 #D6D6D6;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #333333;
display: inline-block;
font-family: arial,sans-serif;
font-size: 13px;
height: 28px;
padding-left: 6px;
padding-right: 24px;
vertical-align: top;
width: 100%;
}
#mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus {
border-color: #ACACAC #C6C6C6 #C6C6C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
#mal_cs_powered #search #searchListButton {
background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent;
border-radius: 3px 3px 3px 3px;
height: 0;
margin: 0;
padding: 16px 0 0 16px;
position: absolute;
right: 12px;
top: 14px;
width: 0;
}
#mal_cs_listinfo {
background-image: url("http://i.imgur.com/UXZxrWI.png");
right: 106px;
}
#mal_cs_listinfo:hover {
background-image: url("http://i.imgur.com/VcVVnod.png");
}
#mal_cs_links {
background-image: url("http://i.imgur.com/LpXWTzt.png");
right: 72px;
z-index: 9;
}
#mal_cs_links:hover {
background-image: url("http://i.imgur.com/oPfKrOl.png");
}
#mal_cs_otherlinks {
background-image: url("http://i.imgur.com/ogmX9qC.png");
right: 38px;
z-index: 8;
}
#mal_cs_otherlinks:hover {
background-image: url("http://i.imgur.com/EEGHkbF.png");
}
#mal_cs_powered {
background-image: url("http://i.imgur.com/ct4BVP5.png");
right: 4px !important;
z-index: 7;
}
#mal_cs_powered:hover {
background-image: url("http://i.imgur.com/TUUWtaj.png");
}
td#mal_cs_pic a img {
display: none;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}

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

#mal_cs_listinfo:before,
#mal_cs_links:before,
#mal_cs_otherlinks:before,
#mal_cs_powered:before {
z-index: 10 !important;
content: "";
right: 0 !important;
top: 0 !important;
width: 32px !important;
position: absolute !important;
border-radius: 4px;
}

#mal_cs_listinfo:after{
background-image: url(http://i.imgur.com/856wzPZ.png);
}
#mal_cs_links:after{
background-image: url(http://i.imgur.com/rwvRyux.png);
}
#mal_cs_otherlinks:after{
background-image: url(http://i.imgur.com/fbWr1K4.png);
}
#mal_cs_powered:after{
background-image: url(http://i.imgur.com/fKvpt1F.png);
}

#mal_cs_listinfo:after,
#mal_cs_links:after,
#mal_cs_otherlinks:after,
#mal_cs_powered:after {
z-index: 10 !important;
content: "";
right: 0 !important;
top: 0 !important;
width: 32px !important;
height: 32px !important;
position: absolute !important;
}



#searchBox {
width: 128px !important;
margin-left: 1px;
}

#mal_cs_powered #search #searchListButton {
right: 15px !important;
top: 12px !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#searchBox {
width: 96px !important;
}
}

/* MENUUUUUUUUUUUUUUUUUUUU */

.status_not_selected a, .status_selected a
{
background-color: ;
height: 112px;
width: 112px;
display: block !important;
line-height: 112px;
padding-left: 0px;
text-align: center;
color: transparent;
}

.status_selected a
{
background-color: ;
height: 112px;
width: 112px;
line-height: 112px;
padding-left: 0px;
text-align: center;
color: transparent;
}

.status_not_selected a:hover
{
background-color: rgba(159, 74, 74, 1.0);
height: 112px;
width: 112px;
line-height: 112px;
padding-left: 0px;
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
text-align: center;
color: transparent;
}

.status_selected a:hover
{
background-color: rgba(159, 74, 74, 1.0);
height: 112px;
width: 112px;
line-height: 112px;
padding-left: 0px;
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
text-align: center;
color: transparent;
}

.status_selected, .status_not_selected
{
position: fixed;
text-align: center;
left:1610px;
top: 64px;
line-height: 112px;
}

.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected
{
top: 206px;
}

.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected
{
top: 348px;
}

.status_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_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
{
top: 490px;
}

.status_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_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_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected
{
top: 632px;
}

.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
{
top: 775px;
}


#copyright:after
{
color: #ffffff;
position: fixed;
content: "";
text-align: center;
display: block;
font-size: 12px;
font-family: Trebuchet MS;
text-transform: uppercase;
background-image: url("http://puu.sh/tt6US/0bcb7e0b53.png");
left:1614px;
top: 68px;
width: 112px;
height: 823px;
line-height: 25px;
z-index: -3 !important;
}