@import "https://dl.dropbox.com/s/8vjos6cpj8yo4ek/RedTopBar.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.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 and can see the starter layout on your list, 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. It will put this premade layout on your list instead of the starter one from the tutorial! 


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://i60.tinypic.com/2m7t2ld.jpg);
background-position:0 0%, 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 {
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;
background-size: contain !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.3);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.3);
height:65px;
}
tr:hover [class^="td"] {
transition: .1s linear;
background-color: rgba(153, 3, 0, 0.6);
}


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

#list_surround {
background-attachment:scroll;
background-color:transparent;
background-image: url();
background-position: -50px -40px;
background-repeat:no-repeat no-repeat;
font-size:100%;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:100px;
position:absolute;
right:-4px !important;
width:700px;
}


/*
SIDE BUTTONS 
*/

#list_surround .status_selected, #list_surround .status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-image:url(http://i59.tinypic.com/f4l0y1.jpg);
background-position:0 0;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid transparent;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
display:block;
left:-300px;
padding:0;
position:absolute;
top:20px;
width:263px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-image:url(http://i59.tinypic.com/2ajnk7k.jpg);
background-position:100% 0;
top:140px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i59.tinypic.com/xqg7q.jpg);
background-position:0 0;
top:260px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i59.tinypic.com/rjmm4h.jpg);
background-position:100% 0;
top:380px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i57.tinypic.com/xp96w4.jpg);
background-position:0 0;
top:500px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-image:url(http://i59.tinypic.com/30cww8o.jpg);
background-position:100% 0;
top:620px;
}

/*
CUSTOM HEADERS
*/

.header_cw {
background-color: transparent;
background-image: url("http://i58.tinypic.com/2hem4qw.jpg");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i59.tinypic.com/140x7vq.jpg");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i60.tinypic.com/2ivbark.jpg");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i60.tinypic.com/dzbif8.jpg");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i60.tinypic.com/919jkh.jpg");
background-position: 50% 10px;
background-repeat: no-repeat no-repeat;
height: 50px;
margin-bottom: 0;
margin-top: -100px;
}




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


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

.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:10px;
}
.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(0, 100, 205, 0.6);
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;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-attachment:scroll;
background-color:transparent;
background-image:none;
background-position:0 0;
background-repeat:repeat repeat;
border-bottom-style:none !important;
border-bottom-width:medium !important;
display:inline-block;
font-family:cursive;
font-size:9pt;
height:0 !important;
left:70px;
line-height:16px !important;
margin-top:16px;
position:absolute;
text-align:justify !important;
width:720px;
z-index:2;
}
.table_header:nth-of-type(6) {
display:none;
}
span[id*="tagRow"] {
display:block !important;
}
span[id*="tagLinks"] {
display:none !important;
}
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;
}
#list_surround {
left:0 !important;
margin:auto !important;
position:absolute !important;
right:0 !important;
}

.animetitle {
font-weight: bold;}

.animetitle + small {
color:#CC33FF !important;
font-weight:bold;
}

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

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

.td1:nth-of-type(6), .td2:nth-of-type(6){
background-color: transparent !important;
font-family: helvetica;}

td:nth-of-type(6) small {
font-size: 0;
color: white;
left: 42px;
position: relative;
text-shadow: black 1px 1px 5px;
}


td:nth-of-type(6) small:after {
font-size: 12px !important;
content: "Edit Tags"
}


@media screen and (-webkit-min-device-pixel-ratio:0) {

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 73% !important;
}

.animetitle {
padding-left: 5px;
}

}


/* Media query for devices above 1000px */
@media all and (min-device-width:1001px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -270px;}

#list_surround {
left: 24% !important;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 7pt !important;
width: 370px !important;
padding-top: 8px;}

}

/* Media query for devices above 1024px */
@media all and (min-device-width:1025px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -300px;}

#list_surround {
left: 17% !important;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 7pt !important;
width: 370px !important;}

}

/* Media query for devices above 1140px */
@media all and (min-device-width:1141px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -290px;}

#list_surround {
left: 17% !important;
width: 850px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 530px !important;}


}

/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -330px;}

#list_surround {
left: 18% !important;
width: 900px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 575px !important;}

}


/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -385px;}

#list_surround {
left: 17% !important;
width: 960px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 635px !important;}

#list_surround {
background-position: center -40px;}

}


/* Media query for devices above 1680px */
@media all and (min-device-width:1681px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -430px;}

#list_surround {
left: 16% !important;
width: 1050px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 720px !important;}


}

/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {


#list_surround .status_selected, #list_surround .status_not_selected {
left: -530px;}

#list_surround {
left: 10% !important;
width: 1100px;}

.td1:nth-of-type(6), .td2:nth-of-type(6) {
font-size: 9pt !important;
width: 770px !important;}


}