❓ Ask for help here + See Frequently Asked Questions

@import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css);
@import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css);
@import url(http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css);

.status_not_selected a[href*="status=1"],
.status_selected a[href*="status=1"] {
visibility: hidden;
display: block;
letter-spacing: -12px;
}

.status_not_selected a[href*="status=1"]:before,
.status_selected a[href*="status=1"]:before {
visibility: visible;
position: fixed;
display: block;
content: 'Watching';
background-image: url("http://imageshack.us/a/img560/5015/glossybuttonblankblueov.png");
background-repeat: no-repeat;
left: 10px;
top: 50px;
width:116px;
letter-spacing: 0 !important;
}

/* Custom header titles */
/* Disabling original titles */
.header_cw span {
visibility: hidden;
letter-spacing: -12px;
}

.header_cw span:before {
visibility: visible;
content: 'Watching';
letter-spacing: 0 !important;
}

/*
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://img5.imageshack.us/img5/4953/formalanime1600x1200.jpg);
width: 100%;
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, .header_cw span:before {
background-color:transparent;
color:red;
font-family:vivaldi;
font-size:30px;
text-align:center;
vertical-align:middle;
}



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

.table_header {
background-color:navy;
color:yellow;
}



/*
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:orange;
font-family:Bradley Hand ITC;
font-size:16px;
}



/*
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: dark;
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;
}
.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;
}
#list_surround {
position: absolute !important;
right: 10px !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
*/
.category_totals, .td1, .td2, #grand_totals, #copyright {
background: rgba(0, 0, 0, 0.8) !important;
}
body {
background-size: cover;
}
/* 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
*/
:hover + .hide {
background-size: cover;
left: 440px;
top: 40px;
height: 262px;
width: 170px;
padding-bottom: 0px;
border-style: ;
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;
}

/* 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: transparent;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
/*
CUSTOM CATEGORY LINKS
These codes control the 6 links to your list categories. See this page for further info on altering the background or moving the links:
http://myanimelist.net/forum/?topicid=416069

Also whenever you customize one of the link codes, it can apply some of its changes to all the other parts after it, so you will need to customize those proceeding parts on their own (except for LEFT OVER BOXES).
*/

/*
CURRENTLY WATCHING/READING LINK
*/
.status_selected a,
.status_not_selected a,
{
background: url("http://imageshack.us/a/img560/5015/glossybuttonblankblueov.png/") repeat scroll 0 0 transparent !important;
padding-right: ;
padding-top: ;
padding-bottom: ;
position: fixed;
margin:;
margin-top: 0px;
left: 10px;
right:;
top: 50px;
bottom: ;
}

/*
COMPLETED LINK
*/
.status_selected + .status_not_selected a,
.status_not_selected + .status_selected a,
.status_not_selected + .status_not_selected a{
background: url("http://imageshack.us/a/img853/2919/glossybuttonblankredova.png") repeat scroll 0 0 transparent !important;
padding-right:;
padding-top: ;
padding-bottom: ;
position: fixed;
margin-top: 0px;
margin:;
left: 10px;
right:;
top: 80px;
bottom: ;
}

/*
ON HOLD LINK
*/
.status_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_selected a,
.status_not_selected + .status_not_selected + .status_not_selected a{
background: url("http://imageshack.us/a/img560/5015/glossybuttonblankblueov.png/") repeat scroll 0 0 transparent !important;
padding-right:;
padding-top: ;
padding-bottom: ;
position: fixed;
margin:;
margin-top: 0px;
left: 10px;
right:;
top: 110px;
bottom: ;
}

/*
DROPPED LINK
*/
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{
background: url("http://imageshack.us/a/img853/2919/glossybuttonblankredova.png") repeat scroll 0 0 transparent !important;
padding-right:;
padding-top: ;
padding-bottom: ;
position: fixed;
margin:;
margin-top: 0px;
left: 10px;
right:;
top: 140px;
bottom: ;
}

/*
PLANNED LINK
*/
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{
background: url("http://imageshack.us/a/img560/5015/glossybuttonblankblueov.png/") repeat scroll 0 0 transparent !important;
padding-right:;
padding-top: ;
padding-bottom: ;
position: fixed;
margin:;
margin-top: 0px;
left: 10px;
right:;
top: 170px;
bottom: ;
}

/*
ALL ANIME/MANGA LINK
*/
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a,
.status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a,
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a{
background: url("http://imageshack.us/a/img853/2919/glossybuttonblankredova.png") repeat scroll 0 0 transparent !important;
padding-right:;
padding-top: ;
padding-bottom: ;
position: fixed;
margin:;
margin-top: 0px;
left: 10px;
right:;
top: 200px;
bottom: ;
}
.status_selected a, .status_not_selected a {
font-family: times new roman;
width:116px;
text-align:center;
}
/*
LEFT OVER BOXES
These are boxes which pad the links that may get left over after customizing your links (depending on the type of list). These codes will remove them from view and don't need to be customized the same as the other links above.
*/
.status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover {
background: none repeat scroll 0 0 transparent;
border: none;

/*
// Self-explanatory
*/

.table_header:first-child { border-width: 0 !important; }

BODY
{
Background-image:
url(http://images.alphacoders.com/256/256891.jpg);
background-attachment: fixed;
background-size: cover;
color: #FFFFFF;
font-size: 11.00px;
font-family: Trebuchet MS;
background-color: #363636;
}

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

#list_surround
{
margin: 0 auto;
width: 750px;
}

/*
// All links on your list
*/

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

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

a:hover
{
color: #FFD500;
text-decoration: underline;
}

/*
// Alternating row color 1
*/

.td1
{

color: #FFFFFF;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ABABAB;
padding: 2px;
background-color: #446DB3;
}

/*
// Alternating row color 2
*/

.td2
{

color: #FFFFFF;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ABABAB;
padding: 2px;
background-color: #2E4C81;
}

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

.table_header
{

color: #FFFFFF;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ABABAB;
background-color: #363636;
padding: 0px;
}

/*
// 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: 0px 0px 0px 0px;
border-color: #ABABAB;
border-style: solid;
color: #FFFFFF;
padding: 2px;
font-size: 11.00px;
font-family: Verdana, Arial;
}


/* Which 'status' up top is selected? */

.status_selected
{

color: #000000;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ABABAB;
padding: 2px;
background-color: #363636;
}

.status_not_selected
{

color: #000000;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ABABAB;
padding: 2px;
background-color: #363636;
}

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

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
font-size: 14px;
font-weight: bold;
}


.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: 32px;
}

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

/*
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: 920px;
}
#list_surround {
position: absolute !important;
left: 1px !important;}
Read more at http://myanimelist.net/forum/?topicid=393437#9Faqs8L56EvhS985.99
body {
background-size: cover;
}/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.

For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' 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"
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.
*/