/*
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!
*/

@import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css";

@import url(http://fonts.googleapis.com/css?family=Englebert);
@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);
@import url(http://fonts.googleapis.com/css?family=Ruluko);

body {
background-image:
url(http://i62.tinypic.com/2enno0k.jpg);
background-attachment: fixed;
}

#inlineContent {
background: url(http://i61.tinypic.com/9rlqmf.jpg) no-repeat scroll left bottom transparent;
background-size: ;
display: inline-block !important;
height: 100%;
left: 20 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100%;
z-index: -1 !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(http://i60.tinypic.com/2n6zpzn.jpg);
height: 150px;
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://i58.tinypic.com/sq6tjt.jpg);
height: 150px;
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://i58.tinypic.com/25zqkag.jpg);
height: 150px;
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://i58.tinypic.com/20629hx.jpg);
height: 150px;
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://i57.tinypic.com/2ufpmcg.jpg);
height: 150px;
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;
}
Read more at http://myanimelist.net/forum/?topicid=314657#LYP79puQCgA0PpWq.99



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

.table_header {
background-color:transparent;
}



/*
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:#FF69B4;
font-family:architects daughter;
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:#DB7093;
font-family:ruluko;
}



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

#list_surround {
width:725px;
}


/*
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: repeat;
background-color: white;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:white;
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:transparent;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:transparent;
padding:2px;
color:white;
}
.status_selected a{
color:#C71585;
}
.status_not_selected a{
color:#DB7093;
}
.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;
}

/*
LIST BACKGROUND COLOR AND OPACITY
Go to this page for instructions on customizing this part,
under: Changing the list background color + opacity of the list background
http://myanimelist.net/forum/?topicid=440525
*/
.category_totals, .td1, .td2, #grand_totals, #copyright {
background: rgba(255, 192, 203, 0.5) !important;
}

.table_header {
background-color: rgba(127, 255, 212, 0.5) !important;}


/****************************/
/* Highlight on Hover */
/****************************/
tr:hover [class^=td] {
background-color: rgba(127, 255, 212, 0.9) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}


/*
COPYRIGHT SECTION
If you remove the color it will be the default color set by the layout.
You can add a new background image in the parenthesis, 
or change the color of the copyright section from transparent to something else.
You can also change the color of the text which is white by default.
You can increase height with padding top and bottom, these are the spaces above and below the copyright text.
If you want the copyright section fixed to the bottom, put "fixed" after position: but without quotations.
You can increase width too by adding a px amount, for example 600px, after width: 
*/

#copyright, #copyright:hover {
background: transparent;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
width: ;
color: white;
position:;
bottom: 0;
}


/*
COPYRIGHT SECTION WHEN CURSOR IS ON IT
This is just the background or color you'd see with your cursor on the copyright section. 
By default, it turns it black to make it readable. Remove it to have no change.
*/
#copyright:hover {
background:;
}


/*
COPYRIGHT STARTING TEXT MSG
Whats posted after Content is what it will say before the main copyright info. 
It can be a huge long message and you can change the color of the text here.
You can change it to what you want and it will leave the main copyright text alone. 
Make sure you leave a space between the quotation mark after Content: and beginning of msg. 
By default is says This is my list!
Increase padding-right number to put some space between your text and the next default text. 
If you remove the color it will be the default color of the copyright.
*/
#copyright:before {
color:;
Content: "Background from ribon.shueisha.co.jp, code frankensteined from shishio's tutorials :)";
text-allign: left;
padding-right: 10px;
font-family: times new roman;
font-size:16px;
}


/*
COPYRIGHT AFTER TEXT MSG
Whats posted after Content is what it will say after the main copyright info.
You can change it to what you want and it will leave the main copyright text alone. 
It can be a huge long message and you can change the color of the text here.
Make sure you leave a space between the quotation mark after Content: and beginning of msg. 
Please have the courtesy to leave a link to my group somehow (as in by default).
If you remove the color it will be the default color of the copyright.
Increase padding-left number to put some space between your text and the previous default text. 
*/
#copyright:after {
color:;
Content: " Google 'Shishio's Custom Lists' for more designs or info.";
text-allign: left;
padding-left: 20px;
}


/*
COPYRIGHT LINKS
Change the color of the links in your text here. 
To have it the same as the copyright default text, remove 'blue'.
*/
#copyright a{
background:;
color:;
}

/*
LIST BACKGROUND COLOR AND OPACITY
Go to this page for instructions on customizing this part,
under: Changing the list background color + opacity of the list background
http://myanimelist.net/forum/?topicid=440525

The codes control the list in this order: odd numbered rows, even numbered rows, category totals, grand totals, copyright.
*/

.td1 {
background: none repeat scroll 0 0 rgba(255, 250, 205, 0.5) !important;
}
.td2 {
background: none repeat scroll 0 0 rgba(255, 192, 203, 0.5) !important;
}
.category_totals {
background: none repeat scroll 0 0 rgba(127, 255, 212, 0.5) !important;
}
#grand_totals {
background: none repeat scroll 0 0 rgba(127, 255, 212, 0.5) !important;
}
#copyright {
background: none repeat scroll 0 0 rgba(127, 255, 212, 0.5) !important;
}
#list_surround {
position: absolute !important;
right: 20px !important;}