❓ Ask for help here + See Frequently Asked Questions

@import "http://dl.dropbox.com/u/78340470/animetitle.css";
@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css";
@import "http://dl.dropboxusercontent.com/u/78340470/CSSforCatgirls.css";

body{
background: url(http://i1227.photobucket.com/albums/ee433/John_Kool/Aincrad5_zpsf56e0c5d.png) no-repeat fixed top center;
background-size: cover;
font-family: Candara;
font-size: 12px;
color: #0A77BB;
}

#list_surround{
position: absolute;
width:550px;
margin-bottom:50px;
margin:auto;
left:0px;
right:30px;
}


.td1, .td2{
padding:3px;
}

.animetitle + small{
color:#f0304f !important;
}

.animetitle + small:before{
content: " ( ";
}

.animetitle + small:after{
content: " ) ";
}

td:nth-of-type(2) small{
color: #f0304f;
font-size:10px;
padding-right:10px;
}

td:nth-of-type(2) small a{
color: #f0304f;
}

.td1:nth-of-type(1), .td2:nth-of-type(1){
border-left: 2px solid #82caff !important;
background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ;
}

.td1:nth-of-type(5), .td2:nth-of-type(5){
border-right: 2px solid #82caff;;
background: url(http://i49.tinypic.com/2vrv8ye.png) 86%;
}

.td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4){
background: url(http://i49.tinypic.com/2vrv8ye.png) 74% ;
}

.td1:nth-of-type(3), .td2:nth-of-type(3){
background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
.td1:nth-of-type(3), .td2:nth-of-type(3){
background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ;
}}

td.table_header:nth-of-type(3){
background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ;
padding-right:7px;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
td.table_header:nth-of-type(3){
background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ;
padding-right:7px;
}}

.td1:nth-of-type(2), .td2:nth-of-type(2){
background: url(http://i49.tinypic.com/2vrv8ye.png) 1% ;
}

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

tr:hover td.td1 a, tr:hover td.td1,
tr:hover td.td2 a, tr:hover td.td2{
color:#0C1C97;
}



.table_header{
background: url(http://i49.tinypic.com/2vrv8ye.png);
padding:2px;
font-size: 10px;
color:#2030f0;
}

td.table_header:nth-of-type(1){
border-left: 2px solid #82caff !important;
border-top: 2px solid #82caff !important;
background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ;
border-radius: 10px 0px 0px 0px;
}

td.table_header:nth-of-type(5){
border-right: 2px solid #82caff;;
border-top: 2px solid #82caff;;
background: url(http://i49.tinypic.com/2vrv8ye.png) 86% ;
border-radius: 0px 10px 0px 0px;
}

td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4){
border-top: 2px solid #82caff;;
}

.category_totals{
background: url(http://i46.tinypic.com/n3lmgx.png);
padding:2px;
border-bottom: 2px solid #82caff;
border-left: 2px solid #82caff;;
border-right: 2px solid #82caff;
font-size: 10px;
padding-left:40px;
border-radius: 0px 0px 10px 10px;
}

.borderRBL {
background: url(http://i46.tinypic.com/n3lmgx.png) !important;
border-left: 2px solid #82caff !important;
border-right: 2px solid #82caff !important;
padding-left:39px;
font-size:11px;
color:#2030f0 !important;
}

.borderRBL a, .borderRBL a:visited{
color:#f0304f !important;
text-decoration:underline;
}

.borderRBL a:hover{
color:#f0304f!important;
}

#copyright{
background: url(http://i46.tinypic.com/n3lmgx.png);
position:relative!important;
text-align: center !important;
width:550px;
padding:2px;
top:10px;
font-size:11px;
border: 2px solid #82caff;
border-radius: 8px;
color: #2030f0;
margin-bottom:70px;
}

#copyright:after{
content: "Sword Art Online By Koolman511 ^_^" !important;
background: url(http://i46.tinypic.com/n3lmgx.png) !important;
width:550px !important;
Position:absolute!important;
top:40px !important;
left: -3px;
color: #2030f0; !important;
border: 2px solid #82caff;
border-radius: 8px;
}


#copyright a{
color:#2030f0;
}

#grand_totals{
display:none;
}

.header_title{
display:none;
}

.header_cw{
height: 200px;
background-image:url(http://i1227.photobucket.com/albums/ee433/John_Kool/testingWatching1_zpsa6d34899.png);
background-repeat: no-repeat;
position:relative;
top:9px;
}


.header_completed{
height: 200px;
background-image:url(http://i1227.photobucket.com/albums/ee433/John_Kool/Completted2_zpsb6b2e312.png);
background-repeat: no-repeat;
position:relative;
top:9px;
}

.header_onhold{
height: 200px;
background-image:url(http://i1227.photobucket.com/albums/ee433/John_Kool/Onhold_zpsb6448164.png);
background-repeat: no-repeat;
position:relative;
top:9px;
}


.header_dropped{
height: 200px;
background-image:url(http://i1227.photobucket.com/albums/ee433/John_Kool/Dropped_zps30b52e6f.png);
background-repeat: no-repeat;
position:relative;
top:9px;
}


.header_ptw{
height: 200px;
background-image:url(http://i1227.photobucket.com/albums/ee433/John_Kool/SWORDplantowatch_zps72eae0e1.png);
background-repeat: no-repeat;
position:relative;
top:9px;
}

td:nth-of-type(2) small a {
display:none;
}

td:nth-of-type(2) small{
color:transparent;
}
#{
display: none !important;}
#inlineContent {
background-image: url("http://i1227.photobucket.com/albums/ee433/John_Kool/kirito-render2_zps60fb6bbe.png"), url("http://i1227.photobucket.com/albums/ee433/John_Kool/yuuki_asuna_by_hibari_mx-d5jjxeg2_zpsef5b1a93.png");
width: 1230px !important;
margin: 0 0 0 -700px !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: 500px !important;
left: 55% !important;
position: fixed !important;
z-index: -1;
}

/*
LIST ROWS HEIGHT ON HOVER
*/
.td1, .td2 {
line-height: 15px;
transition: line-height .3s ease;
-webkit-transition: line-height .3s ease;
}

tr:hover .td1, tr:hover .td2 {
padding-top: 24px;
line-height: 280px;
}

.animetitle {
height: 15px;
transition: height .3s ease;
-webkit-transition: height .3s ease;
}

tr:hover .animetitle {
position: relative !important;
display: block !important;
width: 200px !important;
height: 284px !important;
margin: 0 auto !important;
background-repeat: no-repeat !important;
}

tr:hover .animetitle span {
position: absolute;
display: block;
margin-left: -50%;
margin-top: -16px;
width: 200%;
line-height: 15px !important;
}

/*
AIRING
*/
.animetitle + small {
position: top;
line-height: 1px !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://i40.tinypic.com/311nofb.jpg);
background-size: cover;
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:#3300FF ;
font-family:Lucida Bright Georgia serif;
font-size:38px;
font-weight: 600;
}



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

.table_header {
background-color:transparent;
color:#181818;
}

/*
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:#99FFCC;
font-family:Times New Roman, serif;
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:950px;
}


/*
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: black;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#CC00FF;
text-decoration:none;
}
.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:#00FF66;
opacity: 0.7;
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;
}

.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw {
margin: 25px auto 5px;
width: 520px;
height: 60px;
background-image: url(http://i.imgur.com/VImNB.png);
}

.header_title { font-size: 0; }

.header_cw { background-position: 0 0; }

.header_completed { background-position: 0 -60px; }

.header_onhold { background-position: 0 -120px; }

.header_dropped { background-position: 0 -240px; }

.header_ptw { background-position: 0 -180px; }

@import "https://dl.dropboxusercontent.com/u/246447329/Extra%20List%20CSS.css";
@import "https://dl.dropboxusercontent.com/u/246447329/Anime%20Covers.css";


/*
HOW TO USE
Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes:
http://myanimelist.net/forum/?topicid=200320


When you're done with the tutorial copy and paste this entire page of codes (including this part and the codes above and below)
to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box.
Save with the blue button at the bottom.


If the layout looks weird on your list after installing, you can try to alter your settings here.
Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards):
http://myanimelist.net/editprofile.php?go=listpreferences


If your list still has problems you can ask us about it here, or other questions:
http://myanimelist.net/forum/?topicid=200323


And you'll find further ways to customize your list here:
http://myanimelist.net/forum/?topicid=419405

*/


/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-attachment:fixed;
background-clip:border-box;
background-color: black;
background-image: url(http://i.imgur.com/uMK1prQ.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
font-family:calibri;
}

/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page.
*/

#inlineContent {
background: url(http://s21.postimg.org/n8n07wgx1/Satellizer3.png) no-repeat scroll right bottom transparent;
background-size: contain ;
display: inline-block !important;
height: 100%;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100%;
z-index: -1 !important;
}


/*
LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.

Google RGBA color generator for easy to copy color and opacity numbers customized for you.
*/

.td1 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
tr:hover [class^="td"] {
transition: .1s linear;
background-color: rgba(208, 32, 144, 0.6);
}


/*
FREEZING LOGO
Background-image is the Freezing logo at page top. You can move it with background position.
*/

#list_surround {
background-attachment:scroll;
background-image: url(http://i.imgur.com/NT9TM2P.png);
background-position: -50px -40px;
background-repeat:no-repeat;
font-size:100%;
line-height:1;
padding-bottom:10px;
padding-top:320px;
position:absolute;
left: 50%;
margin-left: -300px;
width:900px;
top:150px;
}


/*
SIDE BUTTONS
*/

.status_selected, .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-image:url(http://i.imgur.com/rSTuyQQ.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:contain;
border:1px solid transparent;
border-radius:10px;
display:block;
left:50% !important;
margin-left:-600px !important;
padding:0;
position:fixed;
top:130px;
width:263px;
}
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) {
background-image:url(http://i.imgur.com/RFFgCKi.png);
background-position:100% 0;
top:250px;
}
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) {
background-image:url(http://i.imgur.com/MtEHZmA.png);
background-position:0 0;
top:370px;
}
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) {
background-image:url(http://i.imgur.com/1749dJW.png);
background-position:100% 0;
top:490px;
}
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) {
background-image:url(http://i.imgur.com/DUCFdXf.png);
background-position:0 0;
top:610px;
}
.status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) {
background-image:url(http://i.imgur.com/HabwKPs.png);
background-position:100% 0;
top:730px;
}

/*
CUSTOM HEADERS
*/

.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/mWK77Ng.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i.imgur.com/wF8MQkE.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i.imgur.com/ZWprtND.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i.imgur.com/3ve4Yod.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i.imgur.com/zRGEVZy.png");
background-position: 50% 150px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -150px;
}

/*
TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel iteself.
*/


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

.table_header, .table_header a{
color: white;}


/*
LIST FONT COLOR
*/

.td1, .td2, .category_totals {
color:white;
}



/*
OTHER CODES
Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout.
*/


a {
color:#FFFFFF;
text-decoration:none;
text-shadow:none;
}
a:hover {
color:#fff;
text-decoration:underline;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:0px;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
text-align:center;
vertical-align:top;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
.category_totals {
background-color:rgba(255, 0, 255, 0.4);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:white;
text-align:center;
}
[class^="header_"] * {
background-repeat:no-repeat no-repeat;
font-size:0;
height:200px;
line-height:24px;
padding-bottom:4px;
text-align:right;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:transparent;
border:0 none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
background-color:rgba(180, 32, 48, 0.6);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
#copyright::after {
}

.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}

.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 210px;
z-index: 20;
}


.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}


a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
transition:all 0.25s ease-in-out 0s;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}
.status_selected {
display:block;
}
.status_not_selected {
display:block;
}
.status_not_selected {
opacity:0.7;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}

.animetitle {
font-weight: bold;}

.animetitle + small {
color:#CC33FF !important;
font-weight:bold;
padding-left: 5px;
font-size: 12px !important;
}

* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;}

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


.animetitle {
padding-left: 5px;
}

/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {
#list_surround {
background-position: center -40px;}
}

td:nth-of-type(2) small {
font-size: 0;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="] {
font-size: 13px;
}


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

.table_header[width="50"], .table_header[width="125"] { display: none !important; }

/* Rating */
td[class^='td']:last-child {
position: absolute !important;
display: inline-block;
margin-left: -820px;
margin-top: 32px;
width: 50px !important;
height: 20px !important;
text-align: center !important;
background-color: rgba(215, 10, 10, 1);
border-radius: 1em;
}

/* Tags */
td[class^='td']:nth-of-type(5) {
position: absolute !important;
display: inline-block;
margin-left: -760px;
margin-top: 16px;
width: 600px !important;
text-align: left !important;
background-color: transparent;
}