@import url(https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE);
/*thin top bar*/
@import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css";


/*Fonts*/
@import url("http://fonts.googleapis.com/css?family=Nova+Slim");
@import url(http://fonts.googleapis.com/css?family=Segoe+Print);

/*
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://i62.tinypic.com/2s7ctjr.jpg);
background-attachment: fixed;
background-size: cover;
}



/*
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: rgba(0, 0, 0, 0);
color: #FFFFFF;
font-family: 'Segoe Print', sans-serif;
font-size:30px;
border-radius: 20px 20px 0px 0px;
font-weight: 700;
text-align: left;
text-shadow: 2px 2px 2px #06F;
}


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

.table_header {
background-color: rgba(15, 15, 25, 0.575);
}


/*
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:white;
font-family: 'Segoe Print', sans-serif;
font-size:14px;
text-shadow: 2px 2px 2px #FFF;
}

.animetitle + small {
color:#660099;
font-family: "Segoe Print";
font-size:12px;
text-shadow: 1px 1px 1px #FFF;
}

/*
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:#FFFFFF;
padding-left:4px;
text-align: left;
font-size:13px;
font-family: 'Segoe Print', sans-serif;
text-shadow: 2px 2px 2px #06F;
}



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

#list_surround {
width:950px
}

/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa. 
*/
#list_surround {
left: 500px;
position: relative;
}


/*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 this CSS or ask in my club!
*/


body {
font-weight: light;
background-repeat: no-repeat;
background-color: #000000;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
color: #FFFFFF !important;
text-shadow: -1px -1px 3px #00CCFF, 1px 1px 3px #0066FF;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-color: rgba(0, 0, 0, 0);
border-width:0;
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}

.category_totals a,
.td1 a,
.td2 a,
#grand_totals a,
#copyright a {
transition: all .8s ease 0s;/* CSS3 reference */
-o-transition: all .8s ease 0s; /* for Opera compatibility */
-ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */
-moz-transition: all .8s ease 0s; /* for Firefox compatibility */
-webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:rgba(0,0,0, 0);
border-width:0;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Theme and edited by goshujin_sama241.";
}
#copyright {
margin-bottom: 30px !important;
border-radius: 20px;
padding: 10px;
}
.thickbox {
color:#0066FF;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
border-radius: 0px 0px 20px 20px;
height: 40px;
text-align: center;
}
#grand_totals {
text-align: center;
margin:0 auto;
border-radius: 20px;
padding: 10px 20px;
width: 600px;
}

/* 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
*/
.hide {
background-size: cover;
left: 200px;
top: 160px;
height: 350px;
width: 226px;
padding-bottom: 0px;
border-style: solid;
border-color: white;
border-top: 1px solid white;;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-radius: 25px 25px 25px 25px;
background-color: rgba(200, 5, 200, 0.75);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
visibility: hidden;
opacity: 0;
}

/* 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 {
color: white;
background: transparent;
content: #list_surround:nth-of-type(n+4):hover td:nth-of-type(2) .animetitle;
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}


/* OTHER SETTINGS */
:hover + .hide {
visibility: visible;
opacity: 1;
}

/*
CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)
Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. 
*/

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