Bloody minimalist

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
@import url(http://fonts.googleapis.com/css?family=Fauna+One);

/*
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(insert url here);
background-attachment: fixed;
}

/*
background refitting
this refits the background to whatever screen size looks at this list.
*/
body{
background-size: cover;}

/*
foreground
this originally puts an image in front of the very bottom of the list at all times.
to change the background, change the link in parenthesis after "background: url"
you can also change the rest of the background settings to suit the image you're trying to put in there. don't touch the other options below background unless you really know what you're doing. lower z-index to -1 or less to put it behind the list.
*/
#inlineContent {
	position: fixed !important;
	display: inline !important;
        margin: auto;
	content: ' ';
	width: 1600px;
	height: 340px;
	top: 0;
	right: 0px;
	background: url(http://i42.tinypic.com/2i7w8dz.jpg) no-repeat;
	z-index: 2;
}

/*
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).
*/

.header_title {
background-color: white;
font-family:Fauna One;
color: #FF0000;
font-size: 30px;
font-variant: small-caps;
text-align: center;
}

/*
sub-headers background color color
below each main header is the sub-header which says score, episodes, tags, etc.
*/

.table_header {
background-color:white;
font-family: Fauna One;
}

/*
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: darkgrey;
font-family: Alegreya Sans SC;
font-size: 14px;
}


/*
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: #785A5A;
font-family: copperplate gothic light;
font-size: 12px;
}

/*
list width
use this to increase the width of your list!
*/

#list_surround {
width:950px;
}

/*
tags row width
*/

td:nth-of-type(6){
width: 175px;
}

/*
tags header width
*/
.table_header:nth-of-type(6) {
width: 175px;
}

/*
animetitle's box width
*/
td:nth-of-type(2) {
width: 350px;
}

/*
list position
this centers the list in between the two characters. add to left or right's px amout to move the
list a little that way from center if you want.
*/
#list_surround {
position: absolute;
margin: auto;
right: 0px;
left: 0px;}

#list_surround {
position: absolute !important;
top: 320px;}

/*
Custom cursors.
For more information: http://myanimelist.net/forum/?topicid=202008
*/
/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-4/cur330.cur), progress !important;} /* End http://www.cursors-4u.com */


/*other codes
important codes for the layout's setup. please don't mess with these unless you know what you're doing! if you want to customize more on the page, use the link at the top of the css!
*/
body {
font-weight: light;
background-position: center top;
background-repeat: no-repeat;
background-color: #ffffff;
}

#list_surround {
background-image:url();
}

a {
text-decoration:none;
}

a:visited {
text-decoration:none;
}

a:hover, a:visited:hover {
color: #FF0000;
text-decoration:underline;
}

.category_totals,
#grand_totals,
#copyright {
background-image:url(insert url here);
border-width:0;
padding:2px;
text-align: center;
}

td1,
.td2,
background-image:url(insert url here);
border-width:0;
}
.category_totals:hover,
.td1:hover,
.td2:hover,
#grand_totals:hover,
#copyright:hover {background-color:white;
border-width:0;
}

#copyright:after {
content: " custom css by shishio-kun. google 'shishio's custom lists' for more designs and info. edited by xxshiawase.";
}

.status_selected {
background-color:white;
padding:0px;
color:#00EFFF;
text-decoration: none;
}
.status_not_selected {
background-color:white;
padding: 0px;
font-size:20px;
color: #FF0000;
}
.status_selected a{
color:#00EFFF;
}
.status_not_selected a{
color: darkgrey;
}

}
.header_title {
height:40px;
}

.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}

.category_totals {
height:28px;
}

/*
custom category links area
these codes control the spaces around the 6 links to your list categories. when you customize these parts you will customize the link with it for the most part. see this page for further info on altering the background or moving the links:
http://myanimelist.net/forum/?topicid=416069
*/

/*
currently watching/reading link area
*/
.status_selected,
.status_not_selected {
background: url(none) repeat scroll 0 0 transparant !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin: auto;
margin-top: ;
left: 0px;
right: 750px;
top: 325px;
bottom: ;
z-index: 4;
}

/*
completed link area
*/
.status_selected + .status_not_selected,
.status_not_selected + .status_selected,
.status_not_selected + .status_not_selected{
background: url(none) repeat scroll 0 0 transparant !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin: auto;
margin-top: ;
left: 0px;
right: 375px;
top: 325px;
bottom: ;
z-index: 3;
}

/*
on hold link area
*/
.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{
background: url(none) repeat scroll 0 0 transparant !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin: auto;
margin-top: ;
left: 0px;
right: 50px;
top: 325px;
bottom: ;
z-index: 3;
}

/*
dropped link area
*/
.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{
background: url(none) repeat scroll 0 0 transparant !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin: auto;
margin-top: ;
left: 250px;
right: 0px;
top: 325px;
bottom: ;
z-index: 3;
}

/*
planned link area
*/
.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{
background: url(none) repeat scroll 0 0 transparant !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin: auto;
margin-top: ;
left: 525px;
right: 0px;
top: 325px;
bottom: ;
z-index: 3;
}

/*
all anime/manga link area
*/
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_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_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,
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{
background: url(none) repeat scroll 0 0 transparant !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin: auto;
margin-top: ;
left: 800px;
right: 0px;
top: 325px;
bottom: ;
z-index: 3;
}

/*
borders
just delete all similar codes to these ones, to delete all the borders.
*/
.table_header {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
}

.td1 {
color: #675d5d;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: dashed;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-top-color: #ffffff;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding: 7px;
background-color: #ffffff;
}

.td2 {
color: #675d5d;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: dashed;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-top-color: #ffffff;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding: 7px;
background-color: #ffffff;
}

.header_cw
{
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding:6px;
}

.header_completed
{
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding:6px;
}

.header_onhold
{
color:#730601 !important;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding:6px;
}

.header_dropped
{
color:#730601 !important;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding:6px;
}

.header_ptw
{
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
padding:6px;
}

.header_title
{
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #badae9;
border-bottom-color: #dfdfdf;
border-left-color: #badae9;
}

#copyright, #grand_totals {

border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #dfdfdf;
border-right-color: #ffffff;
border-bottom-color: #dfdfdf;
border-left-color: #ffffff;
padding-top: 6px;
text-align: center;

margin: 0 auto;
}

/*
This causes the blood splatters. I am aware that not everyone has Paradise kiss on her/his list, but it is not that difficult to change the link to an anime to your liking or you can just leave it out.
For more information: http://myanimelist.net/forum/?topicid=410755
*/
a[href="/anime/25517/Magic_Kaito_1412"]{
background-image: url(http://i44.tinypic.com/ifa8op.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
background-color: transparent;
padding-bottom: 200px;
padding-right: 225px !important;
color: !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: 20;
}
 #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: 19;
}
 #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: 18;
}
 #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: 17;
}
 #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;
}
}

/*
This causes the blood splatters. I am aware that not everyone has Paradise kiss on her/his list, but it is not that difficult to change the link to an anime to your liking or you can just leave it out.
For more information: http://myanimelist.net/forum/?topicid=410755
*/
a[href="/anime/235/Detective_Conan"]{
background-image: url(http://i44.tinypic.com/ifa8op.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
background-color: transparent;
padding-bottom: 200px;
padding-right: 225px !important;
color: !important;
}