[CSS - CLASSIC] Display covers and mini-reviews on hover

@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/TopMenu.css);
@import url(http://dl.dropboxusercontent.com/u/78340470/anime.css);
@import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css);

/*
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(http://i44.tinypic.com/23vdxm8.jpg);
background-attachment: fixed;
}



/*
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). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations).
*/

.header_title {
background-color:blue;
color:yellow;
font-family:english111 vivace bt;
font-size:48px;
}

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

.table_header { background-color:navy; }

/*
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:cyan;
font-family:comic Sans MS;
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:white;
font-family:Lucida Grande;
}

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

#list_surround {
width:800px;
}

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

/*
Anime List only

.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw {
height: 350px;
margin-bottom: 0;
background-color: transparent;
background-repeat: no-repeat;
}

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://i41.tinypic.com/30ii9hv.jpg); }

/*
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://i40.tinypic.com/2vd5s35.png); }

/*
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://i41.tinypic.com/2nly3op.png); }

/*
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://i42.tinypic.com/r9e41v.jpg); }

/*
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://i41.tinypic.com/s4ncsi.png); }

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

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

/* 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 actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
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
*/

:hover + .hide {
background-color: rgba(200, 5, 200, 0.75);
background-position: 50% 18% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: block !important;
height: 498px;
left: 677px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 60px;
width: 234px;
}

/* 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: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "PREVIEW";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}


/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: transparent !important;
display: none;
height: 145px;
left: 686px;
padding: 10px 10px 0 24px;
position: fixed;
top: 459px;
width: 235px;
z-index: 1;
background-image: url(none) !important;
}

/* HEADER
Deletes the header Tags which isn't necessary.
*/
.table_header:nth-of-type(6) {
display: none;
}

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6)a {
display: none;
}

@import url(http://fonts.googleapis.com/css?family=Belleza|Bilbo+Swash+Caps);
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/IconStyleCSS_darker.css";


#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
}

BODY
{
color: #DEDEFA;
font-size: 16px;
font-family: Belleza, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-weight: 300;
background-color: rgb(0, 0, 0);
background-image: url(http://i980.photobucket.com/albums/ae283/xuyguo/kurumi_zps34fa0258.png~original);
/*background image from OolimekilnoO http://oolimekilnoo.deviantart.com/art/Date-A-Live-Kurumi-Tokisaki-Wallpaper-418197189*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/*
// Determines the positioning of your list
*/

#list_surround
{
width: 900px !important;
margin-left: 60px;
}

/*
// All links on your list
*/

a
{
color: #DEDEFA;
text-decoration: none;
}

a:visited
{
color: #DEDEFA;
}

a:hover
{
color: #fff76d;
}


/*
// Alternating row color 1
*/

.td1
{
/*background: rgba(147,35,0,.7);*/
background: rgba(30,30,30,.7);
}

/*
// Alternating row color 2
*/

.td2
{
background: rgba(30,30,30,.7);
}

/*
// This represents the "Anime Title", "Score", "# Eps" columns
*/

.table_header
{
background: rgba(147, 35, 0, 0.7);
font-weight: 600;
}

/*Borders*/
.td1, .td2, .table_header {
border-color: #828282;
border-style: solid;
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

tr:hover [class^=td] {
background-color: rgba(147, 35, 0, 0.7) !important;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}
tr:hover [class^=td]:last-of-type{
background-color: rgba(30, 30, 30, 0.7) !important;
}


/*
// headerLink represents the color of the links inside the_header
*/

.table_headerLink
{
color: ;
}

.table_headerLink:Visited
{
color: ;
}

.table_headerLink:Hover
{
color: ;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form
{
border-width: 8px;
border-color: #A60000;
border-style: double;
color: #333333;
padding: 10px;
font-size: 12px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;;
}

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
color: #e3c41e;
font-size: 36px;
font-weight: 700;
font-family: 'Bilbo Swash Caps', fantasy, Arial, sans-serif;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 20px;

}


.category_totals
{

}

#grand_totals
{
text-align: center;
}

/* header_al is thesurrounding "User's Anime List" at the top */

.header_al
{
font-weight: bold;
font-size: 16px;
}

/* header_al_links is thewith your "Profile" and "MyAnimeList home" links */
.header_al_links
{

}

/* controls what styles you can give to all the anime titles in your list */
.animetitle
{
font-weight: 600;
}

td[class^='td']:nth-child(1) { width: 30px; }

td[class^='td']:nth-child(2) { display: inline-block; width: 665px; }

td[class^='td']:nth-child(3) { width: 45px; }

td[class^='td']:nth-child(4) { width: 50px; }

td[class^='td']:nth-child(5) { width: 70px; }

/* 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 actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
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
*/

:hover + .hide {
background-color: rgba(30, 30, 30, 0.7);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: #828282;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 350px;
left: 1050px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 112px;
width: 234px;
}

/* 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: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}*/


/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

td[class^='td']:nth-of-type(6) {
background-color: rgba(30, 30, 30, .7) !important;
border-color: #828282;
border-radius: 8px;
border-style: solid;
border-width: 2px !important;
display: none;
height: 160px;
width: 250px;
padding: 10px 10px 0 24px;
position: fixed;
top: 570px;
left: 1050px;
}

/* TABLE HEADER
Deletes the table header Tags which isn't necessary.
*/
.table_header[width="125"] { display: none; }

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) div a {
display: none;
}

/*Global Padding*/
.header_title:hover, #grand_totals:hover, .table_header:hover, .category_totals:hover, #copyright:hover, .header_title, .td1, #grand_totals, .table_header, .category_totals, .td2, #copyright{
padding: 4px;
}

.table_header:nth-of-type(1) {
border-radius: 8px 0 0 0;
}

.table_header:nth-of-type(5) {
border-radius: 0 8px 0 0;
}


/*Move the damn links*/
/*
CURRENTLY WATCHING/READING LINK AREA
*/
.status_selected, .status_not_selected {
position: fixed;
margin-top: 0;
right:60px;
top: 112px;
min-width: 201px;
padding: 18px 0 18px 0;
border-radius: 10px 10px 10px 10px;
font-size: 19px;

}

.status_not_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_black.png) rgba(30,30,30,.7);
border: 1px solid #828282 !important;
}

.status_not_selected:hover, .status_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_red.png) rgba(147,35,0,.7);
border: 1px solid #828282 !important;
}
/*
COMPLETED LINK AREA
*/

.status_not_selected:nth-of-type(2), .status_selected:nth-of-type(2) {
top: 172px;
}

/*
ON HOLD LINK AREA
*/

.status_not_selected:nth-of-type(3), .status_selected:nth-of-type(3) {
top: 232px;
}

/*
DROPPED LINK AREA
*/

.status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){
top: 292px;
}

/*
PLANNED LINK AREA
*/

.status_not_selected:nth-of-type(5), .status_selected:nth-of-type(5) {
top:352px;
}

/*
ALL ANIME/MANGA LINK AREA
*/

.status_not_selected:nth-of-type(6), .status_selected:nth-of-type(6) {
top: 412px;
}

.status_selected {
margin-right: 3px;
}

.status_not_selected:hover{
margin-right: 6px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright
{
padding-top: 6px;
text-align: center;
margin: 0 auto;
width: px;
}

@import url(http://fonts.googleapis.com/css?family=Belleza|Bilbo+Swash+Caps);
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/IconStyleCSS_darker.css";

#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
}

BODY
{
color: #DEDEFA;
font-size: 16px;
font-family: Belleza, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-weight: 300;
background-color: rgb(0, 0, 0);
background-image: url(http://i980.photobucket.com/albums/ae283/xuyguo/kurumi_zps34fa0258.png~original);
/*background image from OolimekilnoO http://oolimekilnoo.deviantart.com/art/Date-A-Live-Kurumi-Tokisaki-Wallpaper-418197189*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}
/*
// Determines the positioning of your list
*/

#list_surround
{
width: 900px !important;
margin-left: 60px;
}

/*
// All links on your list
*/

a
{
color: #DEDEFA;
text-decoration: none;
}

a:visited
{
color: #DEDEFA;
}

a:hover
{
color: #fff76d;
}


/*
// Alternating row color 1
*/

.td1
{
/*background: rgba(147,35,0,.7);*/
background: rgba(30,30,30,.7);
}

/*
// Alternating row color 2
*/

.td2
{
background: rgba(30,30,30,.7);
}

/*
// This represents the "Anime Title", "Score", "# Eps" columns
*/

.table_header
{
background: rgba(147, 35, 0, 0.7);
font-weight: 600;
}

/*Borders*/
.td1, .td2, .table_header {
border-color: #828282;
border-style: solid;
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

tr:hover [class^=td] {
background-color: rgba(147, 35, 0, 0.7) !important;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}
tr:hover [class^=td]:last-of-type{
background-color: rgba(30, 30, 30, 0.7) !important;
}


/*
// headerLink represents the color of the links inside the_header
*/

.table_headerLink
{
color: ;
}

.table_headerLink:Visited
{
color: ;
}

.table_headerLink:Hover
{
color: ;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form
{
border-width: 8px;
border-color: #A60000;
border-style: double;
color: #333333;
padding: 10px;
font-size: 12px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;;
}

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
color: #e3c41e;
font-size: 36px;
font-weight: 700;
font-family: 'Bilbo Swash Caps', fantasy, Arial, sans-serif;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 20px;

}


.category_totals
{

}

#grand_totals
{
text-align: center;
}

/* header_al is thesurrounding "User's Anime List" at the top */

.header_al
{
font-weight: bold;
font-size: 16px;
}

/* header_al_links is thewith your "Profile" and "MyAnimeList home" links */
.header_al_links
{

}

/* controls what styles you can give to all the anime titles in your list */
.animetitle
{
font-weight: 600;
}

/*Reduces row shift effect in chrome, but messes up appearence when you zoom in.*/
td[class^='td']:nth-child(2) { display: inline-block; width: 705px; }

/* 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 actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
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
*/

:hover + .hide {
background-color: rgba(30, 30, 30, 0.7);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: #828282;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 350px;
left: 1110px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 112px;
width: 234px;
}

/* 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: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}*/


/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

td[class^='td']:nth-of-type(6) {
visibility: hidden;
background-color: rgba(30, 30, 30, .7) !important;
border-color: #828282;
border-radius: 8px;
border-style: solid;
border-width: 2px !important;
display: block;
height: 160px;
width: 250px;
padding: 10px 10px 0 24px;
position: fixed;
top: 570px;
left: 1110px;
}

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

/* TABLE HEADER
Deletes the table header Tags which isn't necessary.
*/
.table_header[width="125"] { display: none; }

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) div a {
display: none;
}

/*Global Padding*/
.header_title:hover, #grand_totals:hover, .table_header:hover, .category_totals:hover, #copyright:hover, .header_title, .td1, #grand_totals, .table_header, .category_totals, .td2, #copyright{
padding: 4px;
}

.table_header:nth-of-type(1) {
border-radius: 8px 0 0 0;
}

.table_header:nth-of-type(5) {
border-radius: 0 8px 0 0;
}


/*Move the damn links*/
/*
CURRENTLY WATCHING/READING LINK AREA
*/
.status_selected, .status_not_selected {
position: fixed;
margin-top: 0;
right:60px;
top: 112px;
min-width: 201px;
padding: 18px 0 18px 0;
border-radius: 10px 10px 10px 10px;
font-size: 19px;

}

.status_not_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_black.png) rgba(30,30,30,.7);
border: 1px solid #828282 !important;
}

.status_not_selected:hover, .status_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_red.png) rgba(147,35,0,.7);
border: 1px solid #828282 !important;
}
/*
COMPLETED LINK AREA
*/

.status_not_selected:nth-of-type(2), .status_selected:nth-of-type(2) {
top: 172px;
}

/*
ON HOLD LINK AREA
*/

.status_not_selected:nth-of-type(3), .status_selected:nth-of-type(3) {
top: 232px;
}

/*
DROPPED LINK AREA
*/

.status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){
top: 292px;
}

/*
PLANNED LINK AREA
*/

.status_not_selected:nth-of-type(5), .status_selected:nth-of-type(5) {
top:352px;
}

/*
ALL ANIME/MANGA LINK AREA
*/

.status_not_selected:nth-of-type(6), .status_selected:nth-of-type(6) {
top: 412px;
}

.status_selected {
margin-right: 3px;
}

.status_not_selected:hover{
margin-right: 6px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright
{
padding-top: 6px;
text-align: center;
margin: 0 auto;
}

@import url(http://fonts.googleapis.com/css?family=Belleza|Bilbo+Swash+Caps);
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/IconStyleCSS_darker.css";

#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
}

BODY
{
color: #DEDEFA;
font-size: 16px;
font-family: Belleza, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-weight: 300;
background-color: rgb(0, 0, 0);
background-image: url(http://i980.photobucket.com/albums/ae283/xuyguo/kurumi_zps34fa0258.png~original);
/*background image from OolimekilnoO http://oolimekilnoo.deviantart.com/art/Date-A-Live-Kurumi-Tokisaki-Wallpaper-418197189*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}
/*
// Determines the positioning of your list
*/

#list_surround
{
width: 900px !important;
margin-left: 60px;
}

/*
// All links on your list
*/

a
{
color: #DEDEFA;
text-decoration: none;
}

a:visited
{
color: #DEDEFA;
}

a:hover
{
color: #fff76d;
}


/*
// Alternating row color 1
*/

.td1
{
/*background: rgba(147,35,0,.7);*/
background: rgba(30,30,30,.7);
}

/*
// Alternating row color 2
*/

.td2
{
background: rgba(30,30,30,.7);
}

/*
// This represents the "Anime Title", "Score", "# Eps" columns
*/

.table_header
{
background: rgba(147, 35, 0, 0.7);
font-weight: 600;
}

/*Borders*/
.td1, .td2, .table_header {
border-color: #828282;
border-style: solid;
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

tr:hover [class^=td] {
background-color: rgba(147, 35, 0, 0.7) !important;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}
tr:hover [class^=td]:last-of-type{
background-color: rgba(30, 30, 30, 0.7) !important;
}


/*
// headerLink represents the color of the links inside the_header
*/

.table_headerLink
{
color: ;
}

.table_headerLink:Visited
{
color: ;
}

.table_headerLink:Hover
{
color: ;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form
{
border-width: 8px;
border-color: #A60000;
border-style: double;
color: #333333;
padding: 10px;
font-size: 12px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;;
}

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
color: #e3c41e;
font-size: 32px;
font-weight: 700;
font-family: 'Bilbo Swash Caps', fantasy, Arial, sans-serif;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 20px;

}


.category_totals
{

}

#grand_totals
{
text-align: center;
}

/* header_al is thesurrounding "User's Anime List" at the top */

.header_al
{
font-weight: bold;
font-size: 16px;
}

/* header_al_links is thewith your "Profile" and "MyAnimeList home" links */
.header_al_links
{

}

/* controls what styles you can give to all the anime titles in your list */
.animetitle
{
font-weight: 600;
}

/*Reduces row shift effect in chrome, but messes up appearence when you zoom in.*/
td[class^='td']:nth-child(2) { display: inline-block; width: 705px; }

/* 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 actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
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
*/

:hover + .hide {
background-color: rgba(30, 30, 30, 0.7);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: #828282;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 350px;
left: 1110px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 112px;
width: 234px;
}

/* 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: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}*/


/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

td[class^='td']:nth-of-type(6) {
visibility: hidden;
background-color: rgba(30, 30, 30, .7) !important;
border-color: #828282;
border-radius: 8px;
border-style: solid;
border-width: 2px !important;
display: block;
height: 160px;
width: 250px;
padding: 10px 10px 0 24px;
position: fixed;
top: 570px;
left: 1110px;
}

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

/* TABLE HEADER
Deletes the table header Tags which isn't necessary.
*/
.table_header[width="125"] { display: none; }

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) div a {
display: none;
}

/*Global Padding*/
.header_title:hover, #grand_totals:hover, .table_header:hover, .category_totals:hover, #copyright:hover, .header_title, .td1, #grand_totals, .table_header, .category_totals, .td2, #copyright{
padding: 4px 0;
}

.table_header:nth-of-type(1) {
border-radius: 8px 0 0 0;
}

.table_header:nth-of-type(5) {
border-radius: 0 8px 0 0;
}


/*Move the damn links*/
/*
CURRENTLY WATCHING/READING LINK AREA
*/
.status_selected, .status_not_selected {
position: fixed;
margin-top: 0;
right:60px;
top: 112px;
min-width: 201px;
padding: 18px 0 18px 0;
border-radius: 10px 10px 10px 10px;
font-size: 19px;

}

.status_not_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_black.png) rgba(30,30,30,.7);
border: 1px solid #828282 !important;
}

.status_not_selected:hover, .status_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_red.png) rgba(147,35,0,.7);
border: 1px solid #828282 !important;
}
/*
COMPLETED LINK AREA
*/

.status_not_selected:nth-of-type(2), .status_selected:nth-of-type(2) {
top: 172px;
}

/*
ON HOLD LINK AREA
*/

.status_not_selected:nth-of-type(3), .status_selected:nth-of-type(3) {
top: 232px;
}

/*
DROPPED LINK AREA
*/

.status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){
top: 292px;
}

/*
PLANNED LINK AREA
*/

.status_not_selected:nth-of-type(5), .status_selected:nth-of-type(5) {
top:352px;
}

/*
ALL ANIME/MANGA LINK AREA
*/

.status_not_selected:nth-of-type(6), .status_selected:nth-of-type(6) {
top: 412px;
}

.status_selected {
margin-right: 3px;
}

.status_not_selected:hover{
margin-right: 6px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright
{
padding-top: 6px;
text-align: center;
margin: 0 auto;
}