❓ Ask for help here + See Frequently Asked Questions

@import url(https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE);
@import "http://dl.dropbox.com/u/102421246/MAL/CSS/AnoHanaCustom2/topbarAnohana.css";
@import "https://dl.dropboxusercontent.com/u/82846412/mal_layouts/Covers/animes.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
@import "http://fonts.googleapis.com/css?family=Electrolize";
@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/HNEditButton.css";

/*  ANIMATED INTRO'S MAIN BACKGROUND (sliding, for all 5 category pages)
Change and adjust the background images in the intro here.
*/

.header_cw:before{
background-image: url("http://i60.tinypic.com/xpv76x.gif");
background-size: cover;
background-position: center;
}

.header_completed:before{
background-image: url("http://i60.tinypic.com/xpv76x.gif");
background-size: cover;
background-position: center;
}

.header_onhold:before{
background-image: url("http://i60.tinypic.com/xpv76x.gif");
background-size: cover;
background-position: center;
}

.header_dropped:before{
background-image: url("http://i60.tinypic.com/xpv76x.gif");
background-size: cover;
background-position: center;
}

.header_ptw:before {
background-image: url("http://i60.tinypic.com/xpv76x.gif");
background-position: center;
background-size: 130%;
}




/*  ANIMATED INTRO RIGHT SIDE (renders)
Background-size is the amount of percentage you see of the render.
*/
.header_cw span:after{
background: transparent url("http://i173.photobucket.com/albums/w45/l_mathiesen/300dance.gif") no-repeat;
background-size: 100%;
content: "";
color: black !important;
font-size: 32px !important;
}


.header_completed span:after{
background: transparent url("http://i173.photobucket.com/albums/w45/l_mathiesen/300dance.gif") no-repeat;
background-size: 100%;
content: "";
color: black !important;
font-size: 32px !important;
}


.header_onhold span:after{
background: transparent url("http://i173.photobucket.com/albums/w45/l_mathiesen/300dance.gif") no-repeat;
background-size: 100%;
content: "";
color: black !important;
font-size: 32px !important;
}

.header_dropped span:after{
background: transparent url("http://i173.photobucket.com/albums/w45/l_mathiesen/300dance.gif") no-repeat;
background-size: 100%;
content: "";
color: black !important;
font-size: 32px !important;
}

.header_ptw span:after{
background: transparent url("http://i173.photobucket.com/albums/w45/l_mathiesen/300dance.gif") no-repeat;
background-size: 100%;
content: "";
color: black !important;
font-size: 32px !important;
}


/*  ANIMATED INTRO OTHER SETTINGS
The first set of codes is for the background seen behind the animations.
The second set is for the left side of the animated intro. The third set controls the intro on the right. 

the #s codes at the bottom after mymove codes control the timing of the animations. Lower or raise them to make the animations longer. 
*/

.header_cw:before,
.header_completed:before,
.header_onhold:before,
.header_dropped:before,
.header_ptw:before {
background-color: black;
background-attachment: fixed;
background-repeat: no-repeat;
height: 100% !important;
left: 0 !important;
position: fixed !important;
top: 0 !important;
width: 100% !Important;
z-index: 101;
color: transparent;
content: "";
pointer-events: none;
opacity: 0;
-moz-animation:mymove 5s; /* Firefox */
-webkit-animation:mymove 5s; /* Safari and Chrome */
}


.header_cw span:before,
.header_completed span:before,
.header_onhold span:before,
.header_dropped span:before,
.header_ptw span:before {
position: fixed;
text-align: center;
font-family: Century Gothic;
text-shadow: 1px 2px 3px white;
height: 100%;
width: 45%;
left: 0 !important;
pointer-events: none;
opacity: 0;
z-index: 110 !Important;
-moz-animation:mymove 5s; /* Firefox */
-webkit-animation:mymove 5s; /* Safari and Chrome */
}



.header_cw span:after,
.header_completed span:after,
.header_onhold span:after,
.header_dropped span:after,
.header_ptw span:after
{
position: fixed;
height: 100%;
width: 100%;
right: 0 !important;
top: 0 !important;
z-index: 110;
pointer-events: none;
opacity: 0;
background-position: 100% 0;
padding-top: 20%;
-moz-animation:mymove2 5s; /* Firefox */
-webkit-animation:mymove2 5s; /* Safari and Chrome */
}



@-moz-keyframes mymove /* Firefox */
{
0% {opacity: 1}
80% {opacity: 1}
95% {opacity: 0}
99% {opacity: 0}
}


@-moz-keyframes mymove2 /* Firefox */
{
0% {opacity: 1; background-position: -100% 0;}
40% {opacity: 1; background-position: 100% 0;}
80% {opacity: 1}
95% {opacity: 1}
99% {opacity: 0}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {opacity: 1}
80% {opacity: 1}
95% {opacity: 0}
99% {opacity: 0}
}

@-webkit-keyframes mymove2 /* Safari and Chrome */
{
0% {opacity: 1; background-position: 0% 0;}
40% {opacity: 1; background-position: 100% 0;}
80% {opacity: 1}
95% {opacity: 1}
99% {opacity: 0}
}

#copyright {
z-index: 10000 !important;
position: relative;
}
body {
cursor:url(http://fc01.deviantart.net/fs71/i/2012/163/a/3/madoka_cursor_by_anime_rai-d5379s6.gif) 1 2, auto;
}
a:hover {
cursor: url(http://fc01.deviantart.net/fs71/i/2012/163/a/3/madoka_cursor_by_anime_rai-d5379s6.gif) 1 2, auto;
}


body {
cursor:url(http://fc01.deviantart.net/fs71/i/2012/163/a/3/madoka_cursor_by_anime_rai-d5379s6.gif) 1 2, auto;
}
a:hover {
cursor: url(http://fc01.deviantart.net/fs71/i/2012/163/a/3/madoka_cursor_by_anime_rai-d5379s6.gif) 1 2, auto;
}

* {
    text-decoration: none;
}
body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://arteanime.com/wp-content/uploads/Puella-Magi-Madoka-Magica-mahou-shoujo-madoka-magica-32925033-2628-1898.jpg");
    background-position: 49% 0;
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    font-family: Comic Sans MS;
}
#list_surround {
    background-attachment: fixed;
    background-position: 24% 0;
    background-repeat: no-repeat no-repeat;
    font-size: 16px;
    height: 250px;
    left: 0;
    line-height: 1;
    margin: 0 auto;
    padding-bottom: 0;
    padding-top: 140px;
    position: absolute;
    right: 0;
    width: 750px;
    z-index: 0;
}
a {
    color: white;
    text-shadow: 1px 2px 3px black;
}
tr:hover [class^="td"] {
    background-color: rgba(123, 168, 251, 0.8);
}
tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 {
    font-weight: bold;
    transition: all 0.4s ease 0s;
}
a:hover {
    color: yellow !important;
    text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
.td1:nth-of-type(4), .td2:nth-of-type(4) {
    text-shadow: 1px 2px 3px black;
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
    color: white;
    text-shadow: 1px 2px 3px black;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
    color: white;
    text-shadow: 1px 2px 3px black;
}
.table_header:nth-of-type(1) {
    border-top-left-radius: 15px;
    color: white;
    text-shadow: 1px 2px 3px black;
}
.table_header:nth-of-type(2) {
    text-align: left;
}
.table_header:nth-of-type(5) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 15px;
    color: white;
    text-shadow: 1px 2px 3px black;
}
.table_header, .category_totals {
    background-color: rgba(229, 180, 253, 0.25);
    border: 0 none;
    opacity: 1;
    padding: 4px;
    text-align: center;
    vertical-align: top;
}
.td1, .td2 {
    background-color: rgba(229, 180, 253, 0.25);
    color: white !important;
    padding: 5px;
transition: background-color 0.5s linear 0s;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
    text-align: left;
}
.table_header:nth-of-type(6) {
    display: none;
    width: 0;
}
small {
    color: #FBA47B;
    font-weight: bold;
    text-shadow: 1px 2px 3px black;
}
.table_header, .td1, .td2, .category_totals {
    color: grey;
}
.borderRBL {
    line-height: normal !important;
}
[cellspacing="0"] {
    line-height: 17px;
}
.category_totals {
    background-color: rgba(229, 180, 253, 0.25);
    border-radius: 0 0 12px 12px;
    color: white;
    text-align: center;
    text-shadow: 1px 2px 3px black;
}
.category_totals:hover {
    background-color: #005FF9;
    color: #FFFFFF;
}
[class^="header_"] * {
    background-repeat: no-repeat no-repeat;
    border-radius: 20px 20px 0 0;
    font-size: 0;
    height: 300px;
    line-height: 24px;
    padding-bottom: 0;
    text-align: right;
    vertical-align: bottom;
}
.header_title {
    border: medium none !important;
    color: transparent !important;
    display: none;
    font-size: 0 !important;
    font-style: italic;
    height: auto;
    padding: 0 8px 0 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
    background-color: rgba(229, 180, 253, 0.25);
    border: 0 none;
    border-radius: 3px 3px 3px 3px;
    color: white;
    line-height: 20px;
    min-height: 20px;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.status_selected a, .status_not_selected a {
    color: transparent;
    display: block;
    font-size: 0px !important;
    height: 100px !important;
    width: 300px !important;
    background-color: transparent;
    border-radius: 0 20px 20px 0;
    border: 1px solid #FFFFFF;
    position: fixed;
    transition: .4s;
}

.status_selected a {
    left: -8px;
}

.status_not_selected a {
    left: -65px;
    opacity: 0.7;
}

.status_not_selected a:hover {
left: 0px;
}

td[class^="status_"]:first-of-type a {
    background-image: url("http://i62.tinypic.com/5oinar.jpg");
    top: 150px;
}
td[class^="status_"]:nth-of-type(2) a {
    background-image: url("http://i60.tinypic.com/2556mtc.jpg");
    top: 260px;
}
td[class^="status_"]:nth-of-type(3) a {
    background-image: url("http://i62.tinypic.com/w4rrr.jpg");
    top: 370px;
}
td[class^="status_"]:nth-of-type(4) a {
    background-image: url("http://i59.tinypic.com/vwsthx.jpg");
    background-repeat: repeat repeat;
    top: 480px;
}
td[class^="status_"]:nth-of-type(5) a {
    background-image: url("http://i62.tinypic.com/2n1yfxt.jpg");
    top: 590px;
}
td[class^="status_"]:last-of-type a {
display: none;
}

.header_cw {
    background-image: url("http://i57.tinypic.com/1195nwj.jpg");
    background-position: 97% 0;
    background-repeat: no-repeat no-repeat;
    z-index: 0 !important;
}
.header_completed {
    background-image: url("http://i60.tinypic.com/mjy7iv.png");
    background-position: 97% 0;
    background-repeat: no-repeat no-repeat;
}
.header_onhold {
    background-image: url("http://i61.tinypic.com/1zbwjh1.png");
    background-position: 97% 0;
    background-repeat: no-repeat no-repeat;
}
.header_dropped {
    background-image: url("http://i59.tinypic.com/2mg8f1t.png");
    background-position: 97% 0;
    background-repeat: no-repeat no-repeat;
}
.header_ptw {
    background-image: url("http://i62.tinypic.com/1zp14lt.png");
    background-position: 97% 0;
    background-repeat: no-repeat no-repeat;
}
:hover + .hide {
    background-color: rgba(229, 180, 253, 0.25);
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    border-color: white;
    border-radius: 25px 25px 25px 25px;
    border-style: solid;
    border-width: 1px;
    display: block !important;
    height: 350px;
    padding-bottom: 0;
    position: fixed;
    right: 51px;
    top: 160px;
    width: 226px;
}
.hide:before {
    background: none repeat scroll 0 0 transparent;
    border-radius: 25px 25px 0 0;
    color: white;
    content: "";
    padding-bottom: 5px;
    position: absolute;
    text-align: center;
    top: -25px;
    width: 225px;
}
.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
    color: white !important;
    font-size: 14px;
    text-shadow: 0 0 0 black;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
    background-color: rgba(229, 180, 253, 0.25) !important;
    border-color: white;
    border-radius: 25px 25px 25px 25px;
    border-style: solid;
    border-width: 1px;
    display: none;
    height: auto;
    padding: 10px 20px 10px 30px;
    position: fixed;
    right: 28px;
    text-align: center;
    top: 522px;
    width: 232px;
    z-index: 1;
}
#copyright, #copyright:hover {
    background-color: rgba(229, 180, 253, 0.25);
    border-radius: 5px 5px 5px 5px;
    bottom: 0;
    color: white;
    padding: 2px;
    width: 100%;
}
#copyright:before {
    color: white;
    content: " Design by PoissonRouge";
    font-size: 17px;
    padding-right: 10px;
    padding-top: 10px !important;
    text-shadow: 1px 2px 3px black;
}
#copyright:after {
    color: #FFD700;
    content: " ";
    padding-left: 20px;
}

@media all and (max-width: 1366px) { #list_surround { position: absolute !important; width: 690px } }