❓ Ask for help here + See Frequently Asked Questions

/*TOP BAR*/
@import "https://dl.dropboxusercontent.com/s/osgqlwua0qe1sza/top%20bar.css";

/*=======================================================================*/

/*COVERS*/

/*Display Covers*/
@import "https://dl.dropboxusercontent.com/s/96kmfggw3umrhcu/Covers.css";

/*Hover Settings*/
@import "https://googledrive.com/host/0BxjwQr0BBXs-d3FsNkY4amVQU0U";

/*Anime Cover Images*/
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";

/*=======================================================================*/

/*CUSTOM CATEGORY LINKS*/
@import "https://dl.dropboxusercontent.com/s/o8b7z0q0c82o3ft/TabLinks.css";

/*=======================================================================*/

/*HEADERS*/
@import "https://dl.dropboxusercontent.com/s/gwtajsybe2nevdv/Headers.css";

/*=======================================================================*/

/*BACKGROUNDS*/
@import "https://dl.dropboxusercontent.com/s/4n1fdl86gswqof3/Backgrounds.css";

/*=======================================================================*/

/*SORT LIST*/
/*=========TYPES HEADERS=========*/

/* 1-># | 2->Anime-Name | 3->Score | 4->Type | 5->Progress | 6->Rated */

#list_surround > table:nth-of-type(n+4) ~ .header_cw + table,
#list_surround > table:nth-of-type(n+4) ~ .header_completed + table,
#list_surround > table:nth-of-type(n+4) ~ .header_onhold + table,
#list_surround > table:nth-of-type(n+4) ~ .header_dropped + table,
#list_surround > table:nth-of-type(n+4) ~ .header_ptw + table {
display: none;
}

.header_cw + table, .header_completed + table, .header_onhold + table,
.header_dropped + table, .header_ptw + table {
position: absolute;
right: 56px;
top: -40px;
width: 350px;
table-layout: fixed;
border-spacing: 8px 0;
}

.table_header:first-of-type { display:none; }

.table_headerLink strong:after {
position: absolute;
display: block;
content: "Sort By:";
top: -6px;
margin-left: -64px;
font-size: 14px;
color: White;
font-weight: bold;
text-shadow:
-1px -1px 0 #000,
0px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
0px 1px 0 #000,
1px 1px 0 #000;
background-color: rgb(50, 50, 50);
padding: 7px 404px 6px 5px;
border-radius: 5px;
white-space: nowrap;
z-index:-1;
}

.table_headerLink strong:before, .table_header:nth-of-type(3) a, .table_header:nth-of-type(4) a, .table_header a:before {
display: block;
width: 64px;
padding: 0 5px;
font-size: 14px;
text-align: center;
border-style: solid !important;
border-width: 1px;
border-color: #FFFFFF;
background-color: rgb(0, 0, 0);
border-radius: 10px;
}

.table_headerLink strong, .table_header:nth-of-type(5) a, .table_header:nth-of-type(6) a {
color: transparent;
font-size: 0;
}

.table_headerLink strong:before, .table_header a:before {
color: #FFFFFF;
font-size: 14px;
}

.table_headerLink strong:before { content: "Name"; }

.table_header:nth-of-type(5) a:before { content: "Episodes"; }

.table_header:nth-of-type(6) a:before { content: "Rating"; }

.table_headerLink strong:hover:before, .table_header:nth-of-type(3) a:hover, .table_header:nth-of-type(4) a:hover, .table_header a:hover:before {
color: black;
background-color: white;
border-color: white;
}

.table_headerLink strong:before { margin-left: -6px; }
.table_header:nth-of-type(3) a { margin-left: -22px; }
.table_header:nth-of-type(4) a { margin-left: 4px; }
.table_header:nth-of-type(5) a:before { margin-left: 25px; }
.table_header:nth-of-type(6) a:before { margin-left: 26px; }

/*=======================================================================*/

/*Hover Settings*/
#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
}

/*MAIN*/
/*==============================FONTS=====================================*/

/*===ANIME TITLE FONTS===*/

.animetitle, .animetitle:visited {
color:silver;/*#66CCFF*/
font-family:Century Gothic;
font-size:16px;
font-weight: bold;
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000,
0px 1px 0 #000,
0px -1px 0 #000,
-1px 0px 0 #000,
1px 0px 0 #000,
2px 2px 0 #000,
-2px 2px 0 #000,
2px -2px 0 #000,
-2px -2px 0 #000,
0px 2px 0 #000,
0px -2px 0 #000,
-2px 0px 0 #000,
2px 0px 0 #000,
1px 2px 0 #000,
-1px 2px 0 #000,
1px -2px 0 #000,
-1px -2px 0 #000,
2px 1px 0 #000,
-2px 1px 0 #000,
2px -1px 0 #000,
-2px -1px 0 #000;
}

/*===NOT ANIME TITLES FONTS===*/

a, a:visited,
.td1, .td2,
.table_header,
.category_totals,
#grand_totals, #copyright
{
color:white;
font-family:Century Gothic;
}


/*=======================================================================*/

/*===LIST WIDTH++===*/

#list_surround
{
width:600px;
right: 10px !important;
position: absolute !important;
top: 50px;
border-radius: 25px;
}

/*===LIST BACKGROUND===*/

.td1,.td2,
.category_totals,
#grand_totals,#copyright
{
background-color: rgba(0, 0, 0, 0.50);
}

/*=======================================================================*/

/*===COPYRIGHTS ETC===*/

.category_totals
{
border-top: 1px solid #000;
font-size:14px ;
text-align: center;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

#copyright, #grand_totals
{
text-align: center;
margin: 0 !important;
font-size:12px;
}

#copyright
{
border-top: 1px solid #000;
border-radius: 0px 0px 25px 25px
}

/*===WHATEVER THIS IS===*/

.header_title
{
color: transparent !important;
font-size: 0 !important;
}

.thickbox
{
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}

/*=============================HOVER=====================================*/

/*==="EDIT" SHOWS ON HOVER===*/

#list_surround small { visibility: hidden; }

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

#list_surround tr:hover .animetitle + small, #list_surround tr:hover small a:first-of-type { visibility: visible; }

/*===LIST HOVER===*/

a:hover , a:visited:hover
{
color:red;
text-decoration:none;
}

.td1:HOVER,.td2:HOVER,.category_totals:HOVER,#grand_totals:HOVER,#copyright:HOVER
{
background-color: rgba(255,0, 0, 0.50);
}

tr:hover [class^=td]
{
background-color: rgba(255,0, 0, 0.50);
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-transition: .4s ease;
}

/*=======================================================================*/

/*=======================================================================*/

/*CURSOR*/
/* Start http://www.cursors-4u.com */
body {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;
}
a:hover {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), progress !important;
}
/* End http://www.cursors-4u.com */

/*==============================FIXES======================================*/

/*===UNDERLINE FIX===*/

a { text-decoration:none; }

/*===REMOVE GAP ON TOP OF LIST===*/

#list_surround br { display: none !important; }

/*=======================================================================*/

@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "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://img72.imageshack.us/img72/8517/konachancom57453beachbl.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center top;
}



/*
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: rgba(255, 255, 255, 0.0);
color: rgba(255, 255, 255, 0.9);
font-family: Lucida Grande;
font-size:200%;
}

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

.table_header {
background-color: rgba(0, 0, 0, 0.8);
}

/*
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: rgba(255, 255, 255, 1.0);
font-family: Lucida Grande;
font-size:90%;
}

/*
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: rgba(255, 255, 255, 1.0);
font-family: Lucida Grande;
font-size:95%;
}

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

/*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: rgba(0, 0, 0, 1.0);
}

a {
text-decoration:none;
}

a:visited {
text-decoration:none;
}

a:hover, a:visited:hover {
color: rgba(255, 255, 255, 1.0);
text-decoration:underline;
}

.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png);
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color: rgba(0, 0, 0, 1.0);
padding:2px;
}

.status_selected {
background-color: rgba(0, 0, 0, 1.0);
padding:2px;
color: rgba(255, 255, 255, 1.0);
text-decoration: blink;
}
.status_not_selected {
background-color: rgba(0, 0, 0, 1.0);
padding:2px;
color: rgba(255, 255, 255, 1.0);
}
.status_selected a{
color: rgba(168, 168, 168, 1.0);
}
.status_not_selected a{
color: rgba(255, 255, 255, 1.0);
}
.thickbox {
color: rgba(168, 168, 168, 1.0);
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
padding:2px;
text-align: center;
}
.table_header {
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

#list_surround {
position: relative !important;
left: 100%;
margin-left: -1138px;
width: 864px;
}

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

/*
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(84, 84, 84, 0.8) !important;
}
.td2 {
background: none repeat scroll 0 0 rgba(128, 128, 128, 0.8) !important;
}
.category_totals {
background: none repeat scroll 0 0 rgba(64, 64, 64, 0.8) !important;
}
#grand_totals {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8) !important;
}
#copyright {
background: none repeat scroll 0 0 rgba(64, 64, 64, 0.0) !important;
}

/*
SIDE IMAGES
Change the two characters on the sides out here. The left background image URL is for characters on the left side. The right is for the right. Use the topic for more info:
http://myanimelist.net/forum/?topicid=450489&show=0#post1

Change their spacing from left to right by replacing left or right with a % amount (like 70%),
after background positioning. You can also lower/increase the margin part -600px, or the width.
*/
#inlineContent {
background-image: url("http://img684.imageshack.us/img684/2439/kaguyarender5.png"), url("http://img6.imageshack.us/img6/304/patchoulibook6.png");
width: 1285px !important;
margin: 0 0 0 -600px !important;

background-attachment: scroll !important;
background-clip: border-box !important;
background-color: transparent !important;
background-origin: padding-box !important;
background-position: left top, right top !important;
background-repeat: no-repeat !important;
background-size: contain !important;
bottom: 0 !important;
display: inline-block !important;
height: 600px !important;
left: 50% !important;
position: fixed !important;
z-index: -1;
}

/* THUMBNAIL SETTINGS
Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/
.hide {
height:53px;
width:35px;
margin-left:38px;
margin-top:-61px;
border:1px solid #FFFFFF;
background-color:rgba(255, 255, 255, 0.7);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-radius: 7px 0 7px 7px;
display:inline-block !important;
position: absolute;
}

/*THUMBNAIL HOVER SETTING
This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */
.hide:hover {
margin-left:-274px;
padding-right:25%;
padding-top:33% !important;
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-radius:20px;
box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px;
position:absolute;
z-index:1;
}

/*THUMBNAIL HOVER FLICKER FIX
If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent!
*/
.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 350px;
z-index: 20;
}

/*ANIMATION FOR ZOOM
Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default.
*/
* {
-webkit-transition:all .25s ease-in-out;
transition:all .25s ease-in-out;
}

/*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: 62px;
padding-left: 42px;
}


/* BORDERS */

.table_header {
border-style: solid;
border-color: rgba(255, 255, 255, .8);
border-width: 0 1px 1px 0 !important;
}

.table_header:first-child {
border-left: 1px solid rgba(255, 255, 255, .8) !important;
border-radius: 16px 0 0;
}

.table_header:last-child { border-radius: 0 16px 0 0; }

.td1, .td2 { border-right: 1px solid rgba(255, 255, 255, .8); }

td[class^='td']:first-child { border-left: 1px solid rgba(255, 255, 255, .8) !important; }

.category_totals{
border-color: rgba(255, 255, 255, 0.8);
border-style: solid;
border-width: 1px 1px 1px;
}