@import url(http://fonts.googleapis.com/css?family=Amaranth);
@import url(https://fonts.googleapis.com/css?family=Rancho);
@import url(https://dl.dropbox.com/s/i4j80zjuwup0tj4/cssmenu.css);
@import url(https://fonts.googleapis.com/css?family=Playball);
/*
MAIN BACKGROUND
The space background by default.
*/


body:before, body:after {
	position: absolute;
	display: block;
	content: '';
	left: 0;
	top: 0;
	height: 525px !important;
width:100%;
}

body:before {
	background-image: url();
	background-position: right top;
        background-size:cover;
	background-repeat: repeat-x;
	z-index: -3;

}

body:after {
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
top: 0px;
left: 0px;
border-width: 0;
background-color:;
content: "";
height: ;
position: absolute;
z-index: -2;
box-sizing: border-box;
}

body {
        font-size: 14px;
	font-family:calibri;
color: #000000 !important;
	background-color: #092145;
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;
  overflow-x: hidden;
       overflow-y: auto;
}


   
/*
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. 
*/
   
.header_cw:after {
    background-image: url("https://i.imgur.com/uYoxTAH.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    display: inline-block !important;
    height: 100%;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: -5 !important;
    content: "";
}

 .header_completed:after  {
    background-image: url("https://i.imgur.com/WSNzbMf.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    display: inline-block !important;
    height: 100%;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: -5 !important;
    content: "";
}

.header_onhold:after {
    background-image: url("https://i.imgur.com/d2rVFgx.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    display: inline-block !important;
    height: 100%;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: -5 !important;
    content: "";
}

.header_dropped:after   {
    background-image: url("http://i.imgur.com/XU7Unx8.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    display: inline-block !important;
    height: 100%;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: -5 !important;
    content: "";
}

.header_ptw:after   {
    background-image: url("https://i.imgur.com/V5G3hs6.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    display: inline-block !important;
    height: 100%;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: -5 !important;
    content: "";
}



/* bg color */

.header_cw:before, .header_completed:before, .header_onhold:before, .header_dropped:before, .header_ptw:before   {
background-image: url(http://i.imgur.com/XCPY0aZ.jpg);
background-color: transparent;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
height:100%;
    display: inline-block !important;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: -6 !important;
    content: "";
}
   

   
   
/*
LOGO AND LIST TOP SPACING
Background-image is the Magica logo at page top. You can move it with background position. 
Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will 
   
move farther down the page. 
*/
   
#list_surround {    
    background-image: url("http://i.imgur.com/ZoLSXvJ.png");
    background-position:;
    background-attachment: scroll;
    background-color: rgba(255, 255, 255, 0.95);
    background-repeat: no-repeat no-repeat;
    line-height: 1;
top: 20px;
padding-top: 450px;
margin-left: 20px;
margin-bottom: 10px;
position:relative !important;
width: 760px;
border: 10px solid rgba(255,255,255, 1);
        box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
}

#list_surround:before{
background-image:url("http://i.imgur.com/H3Yo7Ta.png");
background-repeat:no-repeat;
content:"";
display:block ! important;
height:200px ! important;
left:10px;
position:absolute;
top:360px;
width:760px;
z-index:1 !important;
opacity: 0.8;
}



tr:hover [class^="td"] {
    transition: .5s linear;
    background-color: rgba(204, 204, 204, 0.8);
}

 
br:nth-of-type(-n+3) {display: none;}
   
/*
CUSTOM HEADERS
*/
      
.header_cw {
    background-image: url("https://i.imgur.com/2JbxeVk.png");
    background-position: 100% 22px;
}
.header_completed {
    background-image: url("http://i.imgur.com/f7Aj1YK.png");
    background-position: 100% 22px;
}
.header_onhold {
    background-image: url("http://i.imgur.com/ufhxKAa.png");
    background-position: 100% 22px;
}
.header_dropped {
    background-image: url("http://i.imgur.com/wkp68BZ.png");
    background-position: 100% 22px;
}
.header_ptw {
    background-image: url("http://i.imgur.com/QVky9s6.png");
    background-position: 100% 22px;
}
   
.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw {
    background-repeat: no-repeat;
    background-color: transparent;
    height: 410px;
width: 760px;
background-size:cover;
    font-size: 0;
margin: 0 0 -200px 0;
display: block;
}
   
/*
COVER PIC POSITION (hover)
This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the 
   
right, 
take away from the amount below. 
*/
.hide {
        pointer-events: none;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	display: block !important;
	margin-left: 450px !important;
	margin-top: -45px !important;
	width: 150px;
	height: 200px;
	border: 5px solid white;;
        box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
-webkit-transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
        -moz-transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
         transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
	background-repeat: no-repeat;
	background-position: center 50%;
	background-size: 100% 100%;	
	z-index: 5;
}

:hover +.hide  { 
	visibility: visible; 
	opacity: 1;
	margin-left: 770px !important;
z-index: 5;
}


 /* review section */
.table_header:last-child {display: none;}
[class^="td"]:last-child {
    position: absolute;
    right: -230px;
margin-top:185px;
    opacity: 0;
display: inline !important;
line-height: 18px !important;
font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif;
padding: 20px;
text-align:justify;
width:180px;
height:auto;
background-image: url(http://i.imgur.com/XfZdF6B.jpg);
	background-position: center;
        background-size:cover;
	background-repeat: no-repeat;
border: 1px solid white;
border: 1px solid white;
        box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
pointer-events: none;
/* animation */
transition: opacity .3s linear;
}

tr:hover [class^="td"]:last-child {
opacity: 1;
background-color: transparent;
}   

/*
TAGS EDIT BUTTON
The button link "Edit" will show up under your anime title number.
*/
   
.td1:nth-of-type(6) *, .td2:nth-of-type(6) * {
    color: #ffffff !important;
    font-size: 12px;
  

    text-decoration: none;
    z-index: 1 !important;
}

/* REMOVE TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) small {
display: none;
}
/*
LIST TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel itself.  
   
Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-
   
color:".
*/
.table_header, .table_header a{
color: ;
font-family:Amaranth;}
   
.table_header {
    background-color: transparent;
}   
   
/*
LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR
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.  
*/
   
.td1 {
background-color:transparent;
height:20px;
}
.td2 {
background-color:transparent;
height:20px;
}
.List_LightBox {
color: white;
}
   
   
/*
LIST BOTTOM COLORS
The first set controls color for the category totals, and second for the copyright section.
*/
   
.category_totals {
    position: relative;
color: #000000 !important;
    display: inline-block;
    padding-top: 0px;
    width: 752px;
    font-size: 13px;
    text-align: center; 
background-color:rgba(201, 223, 223, 0.9);
}
  
  
#grand_totals { display:none; }
 
 
#copyright {
     background-color:rgba(255, 255, 255, 0.9);
     color: #fff !important;
     display: inline-block;
     margin-top: -14px ! important;
    width: 760px;
    font-size: 11px;
    line-height:15px;
    text-align: middle !important;
 padding-top: 3px;
  height:712px;
  background-attachment:scroll;
  background-image:url(http://i.imgur.com/AlvenEE.png);
  background-repeat: no-repeat no-repeat;
  background-position: 0% 100%;
}


/*
LIST FONT COLOR AND TYPE
You can control the font type and colors for the list here; for the anime titles and tags see after
*/
   
.td1, .td2 {
color:black !important;
font-family: ;
}
   
/*
ANIME TITLE/AIRING 
You can control the font-colors for anime titles here, and the Airing text on currently airing anime.
*/
   
.animetitle {
    color: #000000 !important;
    font-size: 17px !important;
	font-family:Arial;
 text-decoration: none !important;
 text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 1px 5px #fff, 0 0 1px #fff;

}
.animetitle + small { 
	visibility: hidden !important;
	opacity: 0;
	position: absolute;
	display: block;
	left: 865px;
	margin-top: -22px;
	padding: 2px;
	color: #FFFFFF;
text-shadow: 0 0 2px #F54EE7, 0 0 1px #F54EE7, 1px 1px 7px #E32BD4, 0 0 0 #F54EE7 !important;
	font-size: 12px;
font-weight: bold !important; 
	line-height: 14px;
width: 40px;
	text-align: center;
	background-color: rgba(0, 0, 0, .8);
	transition: opacity .2s linear .9s;
	-webkit-transition: opacity .2s linear .9s;
	z-index: 6;
}

tr:hover .animetitle + small { visibility: visible !important; opacity: 1 !important; }



/*
Hide edit-more
*/
tr:hover td.td1 small, tr:hover td.td2 small {
color: white !important; 
	 text-shadow: 0 0 3px #3974c4, 0 0 2px #3974c4, 0 1px 5px #3974c4, 0 0 1px #3974c4;
	font-size: 11px;
font-weight: bold !important; 
opacity: 1;
}
.td1 small, .td2 small {
opacity: 0;
font-size: 11px;
}

   
tr:hover .animetitle {
 color: white !important; 
	 text-shadow: 0 0 3px #3974c4, 0 0 2px #3974c4, 0 1px 5px #3974c4, 0 0 1px #3974c4;
  letter-spacing: 0.5px;
  transition: all 0.1s ease 0s;
}

/*
SIDE BUTTONS 
The first code controls the type of positioning of the buttons- if you change absolute to fixed, it will fix the buttons to 
   
the page. You'll have to change left: -300px; to left: 0px; after if you want them fixed. 
   
All the following codes control the background image for the buttons in this order: Current, Complete, On-hold, Dropped, 
   
Planned, and All Anime. 
   
If you don't want the All Anime button on your list, remove the X from display: Xnone; if you want the All Anime button 
   
back, add the X back or delete display:none;
*/
   
.status_selected {
position:absolute;
top: 425px;
z-index: 2 !important;
}


.status_not_selected {
position:absolute;
top: 410px;
z-index: 2 !important;
}
   
.status_selected:first-of-type, .status_not_selected:first-of-type {
background-image:url(http://i.imgur.com/Aev0upR.png);
background-position:0 0;
left: 20px;
}
   
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) {
background-image:url(http://i.imgur.com/od8YKmR.png);
background-position:100% 0;
left:120px;
}
   
   
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) {
background-image:url(http://i.imgur.com/lIsKmnx.png);
background-position:0 0;
left:220px;
}
   
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) {
background-image:url(http://i.imgur.com/spY9vkT.png);
background-position:100% 0;
left:320px;
}
   
   
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) {
background-image:url(http://i.imgur.com/HHEMWdV.png);
background-position:0 0;
left:420px;
}
   
   
.status_selected:last-of-type, .status_not_selected:last-of-type {
background-image:url(http://i.imgur.com/f51zMZq.png);
background-position:100% 0;
left:370px;
display: none;
}
   

.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:40px;
width:50px;
}
   
.status_selected,
.status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:contain;
background-position: center;
display:block;
padding:0;
height:40px;
width:50px;

}
   
.status_not_selected {
opacity:0.7;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
top: 425px;
-webkit-transition:all 0.2s ease-in-out 0s;
transition:all 0.2s ease-in-out 0s;
}

[class^=status] a {
display: block;
font-size: 0px;
color: rgba(255, 255, 255, .8) !important;
white-space: nowrap;
}
[class^=status] a:hover, .status_selected a {
color: #60b1b4 !important; 
	 text-shadow: 0 0 3px #fffc8e, 0 0 2px #fffc8e, 0 1px 5px #fffc8e, 0 0 1px #fffc8e;
-webkit-transition:all 0.1s ease-in-out 0s;
transition:all 0.1s ease-in-out 0s;

}

[class^=status] a:after {
font-size: 23px !important;
font-family: Rancho;
position: absolute;
display: none;
left: 0;
width: 100%;
top: -25px;
}
[class^=status]:first-of-type a:after {content: "Watching";}
[class^=status]:nth-of-type(2) a:after {content: "Completed";}
[class^=status]:nth-of-type(3) a:after {content: "On Hold";}
[class^=status]:nth-of-type(4) a:after {content: "Dropped";}
[class^=status]:nth-of-type(5) a:after {content: "Plan to Watch";}


[class^=status]:hover a:after, .status_selected a:after {
display: inline-block !important;
margin: auto;
}
   
   
   

/*
OTHER CODES
Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. 
*/
   
   
::-webkit-scrollbar {
width: 8px;
background: -webkit-linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* Standard syntax */
}
   
::-webkit-scrollbar-thumb {
background: #9e8cb6;
}
   
  
   
a {
    color: black;
text-decoration: none;
}
   
   
/*
OTHER CODES
Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. 
*/
   
   
::-webkit-scrollbar {
width: 8px;
background: -webkit-linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(227, 227, 227, 1), rgba(227, 227, 227, 1)); /* Standard syntax */
}
   
::-webkit-scrollbar-thumb {
background: #9e8cb6;
}
   
   
 
   
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
padding-left:15px;
text-align:left;
}

.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
vertical-align:top;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}
   
.category_totals {
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0;
border-top-right-radius:0;
color:black;
text-align:center;
}

.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#000000;
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:#000000;
line-height:1px;
min-height:1px;
padding:1px;
text-align:center;
vertical-align:middle;
}
 
#copyright {
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
  
/* For list cover v1 */   
 
.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:10px;
text-align:left;
}
   
.td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
transition:all 0.25s ease-in-out 0s;
}
   
#list_surround small a:last-of-type {
    display: none !important;
}
   
   
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}
   
   
   
   
#list_surround small a:last-of-type {
    display: none !important;
}
   

   
#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
}
   
.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small{
    visibility: visible !important;
}
   
.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
    text-decoration: underline;
}
   
 .td1:nth-of-type(5), .td2:nth-of-type(5){

}
   
.td1:nth-of-type(3) a, .td2:nth-of-type(3) a{
font-size: 15px;
font-weight: bold !important; 
}
   
   
#mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered {
  opacity: 0.7;
}
#mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover {
  opacity: 1;
}

:nth-child(5) .header_title::before {
    background: rgba(0,0,0, 0.2) none repeat scroll 0 0;
    color: #ffffff;
    display: block;
    font-size: 18px !important;
    font-family: Amaranth;
    position: relative;
    text-align: center;
    text-shadow: 0 0 3px #000000, 0 0 2px #000000, 0 1px 5px #000000, 0 0 1px #000000;
    top: -50px;
left: 0;
width: 600px;
z-index: 0;
}   

td[class^="td"].td1:nth-child(3) {
    background-image: url("");
    background-position: 49% 3px;
    background-repeat: no-repeat;
}


td[class^="td"].td2:nth-child(3) {
    background-image: url("");
    background-position: 49% 3px;
    background-repeat: no-repeat;
}

.td1:nth-of-type(3) * {
color: black !important;
 text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 1px 5px #fff, 0 0 1px #fff;
}

.td2:nth-of-type(3) * {
color:black !important;
 text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 1px 5px #fff, 0 0 1px #fff;
}


.td1:nth-child(3), .td2:nth-child(3), .td1:nth-child(4),.td2:nth-child(4),.td1:nth-child(5),.td2:nth-child(5)  {
color: black !important;
 text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 1px 5px #fff, 0 0 1px #fff;
}

.td1:nth-of-type(4) *,.td2:nth-of-type(4) *,.td1:nth-of-type(5) *,.td2:nth-of-type(5) * {
color: black !important;
 text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 1px 5px #fff, 0 0 1px #fff;
}

.table_header:nth-child(1), .table_header:nth-child(4), .table_header:nth-child(5) {
display: none;
}

.table_header:nth-child(2) .table_headerLink {
position:absolute;
top: 370px;
display:block;
background-image:url(http://i.imgur.com/xvIniAd.png);
background-size:contain;
background-repeat:no-repeat;
background-position:0 0;
height:40px;
width:37px;
left: 670px;
font-size:0px;
z-index: 2 !important;
transition: 0.2s ease-in-out;
	transform: scale(0.6);
}

.table_header:nth-child(2) .table_headerLink:before
{
color: #60b49d !important; 
	 text-shadow: 0 0 3px #fffc8e, 0 0 2px #fffc8e, 0 1px 5px #fffc8e, 0 0 1px #fffc8e;
background-color:transparent;
text-size: 11px;
width: 35px;
height: auto;
display: block;
position: relative;
left: 40px;
top: 10px !important;
padding: 2px;
text-align:center;
content:"Title";
font-size: 23px !important;
font-weight:bold !important;
}

.table_header:nth-child(2) .table_headerLink:hover {
transition: 0.2s ease-in-out;
	transform: scale(0.8);

}

.table_header:nth-child(3) .table_headerLink {
position:absolute;
top: 430px;
display:block;
background-image:url(http://i.imgur.com/eQKeJWv.png);
background-size:contain;
background-repeat:no-repeat;
background-position:0 0;
height:40px;
width:37px;
left: 670px;
font-size:0px;
z-index: 2 !important;
transition: 0.2s ease-in-out;
	transform: scale(0.6);
}

.table_header:nth-child(3) .table_headerLink:before
{
color: #60b49d !important; 
	 text-shadow: 0 0 3px #fffc8e, 0 0 2px #fffc8e, 0 1px 5px #fffc8e, 0 0 1px #fffc8e;
background-color:transparent;
text-size: 11px;
width: 35px;
height: auto;
display: block;
position: relative;
left: 40px;
top: 10px !important;
padding: 2px;
text-align:center;
content:"Score";
font-size: 23px !important;
}

.table_header:nth-child(3) .table_headerLink:hover {
transition: 0.2s ease-in-out;
	transform: scale(0.8);

}