/*
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: #f7f3d8 url("https://dl.dropbox.com/s/ax9lulk4jbicsmj/background.png?dl=0") fixed repeat;
	cursor: url("https://dl.dropbox.com/s/ti4dmrgcsnb8adn/pointer.cur?dl=0") 1 2, auto;
}

/*
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("https://dl.dropbox.com/s/9lntg82oy9cl6o2/misaka.png?dl=0") bottom left no-repeat;
	background-size: contain;
	display: inline-block !important;
	height: 100% !important;
	left: 10% !important;
	margin: auto !important;
	position: fixed !important;
	right: 0 !important;
	top: 20px !important;
	width: 100% !important;
	z-index: -1 !important;
}

/*
TITLE
The List header which by default says My Anime List
can be changed out here.
*/
#list_surround {
	background: url("https://dl.dropbox.com/s/zk8cd8bslygmezl/header.png?dl=0") no-repeat scroll 50% 50px;
	font-size: 81.25%;
	line-height: 1;
	float: right;
	margin-right: 10%;
	padding-bottom: 10px;
	padding-top: 210px;
	width: 780px;
}

/*
FONT
Font used across the whole list. 
*/
@import url(https://fonts.googleapis.com/css?family=Exo:400,600&subset=latin,latin-ext);

body {
	font-family: 'Exo', sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/*
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: #ffffff;
	text-decoration: none;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.5);
	cursor: url("https://dl.dropbox.com/s/mz59zitr4vvvelz/hand.cur?dl=0") 1 2, auto;
}
a:hover {
	text-shadow: 2px 1px 2px #000000;
}

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

}

.animetitle + small {
	background-color: rgba(59, 180, 67, 0.6);
	border: 0 none;
	border-radius: 5px;
	margin-left: 5px;
	padding: 2px 3px;
	color: #ffffff;
	text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.5);
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* CATEGORY LINKS */
.status_not_selected, .status_selected {
	border: 0 none !important;
	height: auto !important;
	padding: 0 8px;
	text-align: center !important;
	width: 16.667% !important;
}
.status_not_selected a, .status_selected a {
	background-color: rgba(0, 153, 255, 0.6);
	color: #ffffff;
	border-radius: 20px;
	display: block !important;
	font-weight: 600;
	padding: 8px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
}
.status_selected a {
	background-color: rgba(255, 51, 102, 0.6);
	box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
}
.status_not_selected a:hover {
	background-color: #0099ff;

}
.status_selected a:hover {
	background-color: #ff3366;

}
.status_not_selected a:active {
	background-color: #ff3366;
    box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
}
.status_selected a:active {
	background-color: #ff3366;
    box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
}

.status_not_selected a:active:after, .status_selected a:active:after { 
	content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0;}

/* TABLE HEADER */
.table_header {
	background-color: rgba(0, 153, 255, 0.6);
}
.table_header:first-of-type {
	border-radius: 20px 0 0 0;
}
.table_header:nth-of-type(2) {
	text-align: left;
}
.table_header:last-of-type {
	border-radius: 0 20px 0 0;
}

/* TABLE 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(15, 15, 25, 0.3);
}
.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(15, 15, 25, 0.35);
}

/* TABLE ROWS HOVER */
tr:hover [class^="td"] {
	background-color: rgba(255, 51, 102, 0.6);
	padding: 10px 2px;
	box-shadow: inset 0 -8px 6px -6px rgba(0, 0, 0, 0.20), inset 0 8px 6px -6px rgba(0, 0, 0, 0.20);
}
tr:hover [class^="a"] {
	font-size: 15px;	
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
	text-align: left;
}
.td1:nth-of-type(2):hover, .td2:nth-of-type(2):hover {
	padding-left: 20px;	
}

/* 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: 2px;
	text-align: center;
	vertical-align: middle;
}
.table_header, .td1, .td2, .category_totals {
	line-height: 30px;
}
.borderRBL{
	line-height: normal !important;
}
[cellspacing="0"] {
	line-height: 17px;
}
table[class^="header_"] + table{
	border-collapse: separate !important;
}

/*
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('https://dl.dropbox.com/s/iizjam7nixebb91/watching.png?dl=0');
	background-position: center;
	display: inline-block !important;
	height: 115px;
	width: 780px;
	margin-bottom: -45px;
	background-color: transparent;
	background-repeat: no-repeat;
	z-index: 2 !important;
}

/*
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('https://dl.dropbox.com/s/f2ms2ukwmy05d43/completed.png?dl=0');
	background-position: center;
	display: inline-block !important;
	height: 115px;
	width: 780px;
	margin-bottom: -45px;
	background-color: transparent;
	background-repeat: no-repeat;
	z-index: 2 !important;
}

/*
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('https://dl.dropbox.com/s/3n0g680y9ftc9q4/on-hold.png?dl=0');
	background-position: center;
	display: inline-block !important;
	height: 115px;
	width: 780px;
	margin-bottom: -45px;
	background-color: transparent;
	background-repeat: no-repeat;
	z-index: 2 !important;
}

/*
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('https://dl.dropbox.com/s/osl5zzh84w3trmn/dropped.png?dl=0');
	background-position: center;
	display: inline-block !important;
	height: 115px;
	width: 780px;
	margin-bottom: -45px;
	background-color: transparent;
	background-repeat: no-repeat;
	z-index: 2 !important;
}

/*
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('https://dl.dropbox.com/s/cbefd4cif09ybb3/plan-to-watch.png?dl=0');
	background-position: center;
	display: inline-block !important;
	height: 115px;
	width: 780px;
	margin-bottom: -45px;
	background-color: transparent;
	background-repeat: no-repeat;
	z-index: 2 !important;
}

/*
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 span {
	display: none;
}

/* 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(0, 153, 255, 0.6);
	border-radius: 0 0 20px 20px;
	color: #ffffff;
	text-align: center;
}

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

/* BOTTOM OF LIST */
#grand_totals {
	background-color: rgba(59, 180, 67, 0.6);
	border: 0 none;
	border-radius: 20px;
	color: #ffffff;
	line-height: 20px;
	min-height: 20px;
	padding: 8px;
	text-align: center;
	vertical-align: middle;
}
#copyright {
	background-color: rgba(255, 51, 102, 0.6);
	border-radius: 30px;
	color: #ffffff;
	line-height: 17px;
	margin-top: 10px;
	padding: 8px;
	text-align: center;
}

/* DISCUSSION CONFIRMATION */
#fancybox-outer {
	color: #000000;
	text-shadow: none;
}

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). 

Move the cover's location around with left and top. 
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. 
Increase height and width to make the pics bigger. 
Delete border-style: solid; to remove the border. 

For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/
table:hover + .hide {
-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-size: cover;
right: -moz-calc(10% + 800px);
right: -webkit-calc(10% + 800px);
right: -o-calc(10% + 800px);
right: calc(10% + 800px);
bottom: 10%;
height: 350px;
width: 225px;
padding-bottom: 0px;
border-radius: 0 0 20px 20px;
background-color: rgba(59, 180, 67, 0.6);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic. 
Top and width controls the position of the text.
*/
.hide:before {
background-color: rgba(59, 180, 67, 0.6);
content: "Anime artwork";
padding: 4px 0;
position: absolute;
text-align: center;
width: 225px;
top: -21px;
border-radius: 20px 20px 0 0;
}

/* HIDE UNUSABLE 'MORE' LINK */
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), 
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) {
    display: table-cell !important;
}


#list_surround small a:last-of-type {
display: none !important;
}

#list_surround small {
    visibility: hidden;
}
.animetitle + small {
    visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="], 
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
    visibility: visible !important;
    margin-right: 10px
}