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

/*
Top bar
*/
@import "https://dl.dropbox.com/s/6ruszt29qyk3yzi/SakorasouTopBar.css";

/*
Images
*/
@import url(http://mal-fellow-writer.appspot.com/anime/cupcakedreams/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more);

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
*/

body {
background-image:
url(http://i876.photobucket.com/albums/ab324/AReallyHappyMeal/backgrounds127_zpsfba7f2d4.gif);
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:transparent;
color:#9F7758;
font-family:century gothic;
font-size:14px;
font-weight:bold;
}



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

.table_header, .table_header a, .table_header a:visited {
background-color:#F6EAC8;
color:#9F7758;
font-size:11px;
font-family:century gothic;
}



/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list.
*/

.animetitle, .animetitle:visited {
margin-left:5px;
color:#3DB6C4;
font-family:century gothic;
font-size:11px;
font-weight:bold;
}



/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2 {
color:#9F7758;
font-size:11px;
font-family:century gothic;
}

.td1 a, .td2 a, .td1 a:visited, .td2 a:visited {
color:#3DB6C4;
font-size:11px;
font-family:century gothic;
}

#grand_totals, #grand_totals a, #grand_totals a:visited{
color:#9F7758;
font-family:century gothic;
font-size:12px;
}

#copyright, #copyright a, #copyright a:visited{
color:#9F7758;
font-family:century gothic;
font-size:11px;
font-weight:bold;
}

.category_totals{
font-size:12px;
color:#9F7758;
font-family:century gothic;
background-color:transparent;
}

a, a:visited {
font-family:century gothic;
text-decoration:none;
}

a:hover, a:visited:hover {
color:#afce3b !important;
text-decoration:none;
}



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

#list_surround {
width:900px;
}


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

body{
background-position: top left;}



/*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: #ffffff;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}

.category_totals,
.td1,
.td2,
#grand_totals,
#copyright 
{
background-color:transparent;
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {
background-color:transparent;
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 , .status_selected a, .status_not_selected, .status_not_selected a{
background-color:#ffffff;
font-size:12px;
padding:2px;
color:#3DB6C4;;
text-decoration: blink;
}

.thickbox {
font-weight:bold;
color:cyan;
font-family:century gothic;
font-size:12px;
}
.header_title {
height:15px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:10px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

/*LIST BORDERS
You can change the color of the border with border-color. You can increase the size of the border by increasing the px amount after any of the border-width codes. They're all set to 1px- make sure you increase all the border widths the same amount. Leave the border amounts that are set to zero alone. 
*/

.td1, .td2, .td1:hover, .td2:hover {
border-color:#FF92A0;
border-style:solid;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:0px;
border-top-width:0px !important;
}

.status_selected, .status_selected:hover, .status_not_selected, .status_not_selected:hover {
border-color:#FF92A0;
border-style:solid;
border-width:1px;
}

.header_title, .header_title:hover {
border-color:#FF92A0;
border-style:solid;
border-right-width:0;
border-bottom-width:1px;
border-left-width:0;
border-top-width:0 !important;
}

.table_header, .table_header:hover {
border-color:#FF92A0;
border-style:solid;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:0;
border-top-width:0 !important;
}


/*
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
*/
.td1, .td2
{
background: rgba(255, 255, 255, 1) !important;
}


/*
Cursor
*/
body {
cursor:url(http://i876.photobucket.com/albums/ab324/AReallyHappyMeal/ButteflyCursor_zps3cddfb73.png) 1 2, auto;
}
a:hover {
cursor: url(http://i876.photobucket.com/albums/ab324/AReallyHappyMeal/ButteflyCursor_zps3cddfb73.png) 1 2, auto;
}

/*
Settings for review part in hover window
*/
#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;
}

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

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

.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
    visibility: visible !important;
}

.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
    text-decoration: underline;
}

/*
Covers and text window
*/

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row.

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(255, 255, 255, 100);
background-position: 50% 18% !important;
background-repeat: no-repeat !important;
background-size: 200px auto !important;
border-color: #FF92A0;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: block !important;
height: 500px;
left: 50px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 150px;
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: black;
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;
color: black;
display: none;
height: 145px;
left: 55px;
padding: 10px 10px 0 24px;
position: fixed;
top: 489px;
width: 235px;
z-index: 1;
background-image: url(none) !important;
  border: 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;
}

/*ROW WIDTH AND SPACING
This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. 
*/
.td1:nth-of-type(2), .td2:nth-of-type(2) {
height: 40px;
}