.animetitle{
	white-space:nowrap!important;
}


#list_surround{
	width:600px;
	position:absolute;
	left:230px;
	top:-80px;
}

.header_title, .table_header, .table_headerLink{
	background-color:rgba(109,59,61,0.5);
	text-shadow:black 2px 2px 3px;
	color:white;
}

.table_header:hover a{
	border-bottom-style:solid;
	border-bottom-width:4px;
	border-bottom-color:red;
}
/*Category buttons*/


.status_not_selected a[href*="status"], .status_selected a[href*="status"]{
	position:fixed;  
	left:50px; 
	padding-top:5px;
	padding-bottom:5px;
	width:150px;
	border-width: 3px!important;
	border-style:solid;
	border-color:rgba(109,59,61,0.5);
	border-radius:20px;

	text-shadow: -1px 0 3px black, 0 1px 3px black 1px 0 3px white, 0 -1px 3px white;
	font-weight:bold;

	box-shadow: 1px 1px 0px #999,
                2px 2px 0px #999,
                3px 3px 0px #999,
                4px 4px 0px #999,
                5px 5px 0px #999;
	background-color:rgba(30,30,30,0.5);

}
.status_not_selected a[href*="status=1"], .status_selected a[href*="status=1"]{top: 320px;}
.status_not_selected a[href*="status=2"], .status_selected a[href*="status=2"]{top: 370px;}
.status_not_selected a[href*="status=3"], .status_selected a[href*="status=3"]{top: 420px;}
.status_not_selected a[href*="status=4"], .status_selected a[href*="status=4"]{top: 470px;}
.status_not_selected a[href*="status=6"], .status_selected a[href*="status=6"]{top: 520px;}
.status_not_selected a[href*="status=7"], .status_selected a[href*="status=7"]{top: 570px;}

.status_selected a[href*="status"]:before{content:"> ";}
.status_selected a[href*="status"]:after{content:" <";}

.status_selected a[href*="status"]{
	background-color:rgba(109,59,61,0.5);
	border-color:white}

/*category buttons hover*/
.status_not_selected a[href*="status"]:hover{box-shadow: 1px 1px 0px #999,2px 2px 0px #999,3px 3px 0px #999;left:52px;}
.status_not_selected a[href*="status=1"]:hover{top: 322px; }
.status_not_selected a[href*="status=2"]:hover{top: 372px;}
.status_not_selected a[href*="status=3"]:hover{top: 422px;}
.status_not_selected a[href*="status=4"]:hover{top: 472px;}
.status_not_selected a[href*="status=6"]:hover{top: 522px}
.status_not_selected a[href*="status=7"]:hover{top: 572px;}







.header_title{
	border-radius:25px 25px 0px 0px;
	font-size:50px;
	text-transform: capitalize;
	text-align:center;
}

.header_title:before{
	content:"> ";

}
.header_title:after{
	content:"<";
}

.td1:first-of-type, .td2:first-of-type{
	border-width: 0px 0px 0px 3px!important;
	border-style:solid;
	border-color:rgba(109,59,61,0.5);
}
.td1:last-of-type, .td2:last-of-type{
	border-width: 0px 3px 0px 0px!important;
	border-style:solid;
	border-color:rgba(109,59,61,0.5);
}
{
	background-color:red;

}
.category_totals{
	border-width: 3px 0px 0px 0px;
	border-style:solid;
	border-color:rgba(109,59,61,0.5);
	font-size:0px;
}

body{
	background: url(https://i.imgur.com/U6aP5DN.gif) no-repeat left top -100px fixed;
	padding-bottom:100px;
	background-size: cover;
	font-family: 'Constantia';
	font-size:15px;
	color:white;
	
}
a{color:white;}
a:link{text-decoration:none;}

td{
	height:30px;
}

[id^=tagLink]{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:block;
	max-width:100px;
}




.animetitle{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:block;
	max-width:300px;
	background-image:none;
}

tr:hover .animetitle, tr:hover [id^=tagLink]  {
	white-space:normal;
	overflow:visible;
	text-overflow:clip;
	

}
tr:hover [id^=tagLink]{
}



tr:hover .animetitle{
	position:relative;
	text-align: center;
}









/*
ROWS TRANSITION (REPLACEMENT FOR "CSS FOR CATGIRLS" IMPORT)
This controls the part where pics appear on your rows.
It controls the timing. You can change the numbers.

The first number in each row by default is .5s, this is a half second.
It controls how fast the pic window "opens".
The second number is the time it takes the window to begin opening.
By default its set to .1s, a tenth of a second.
If you changed it to 2s, it would take two seconds for the window to open.

You'll need to change all the rows timings!
They change different browser's timings.
*/
.td1, .td2 {
transition: line-height .75s ease .1s;
-o-transition: line-height .75s ease .1s;
-moz-transition: line-height .75s ease .1s;
-webkit-transition: line-height .75s ease .2s;

}

.animetitle{
}

/*
LIST ROWS HEIGHT ON HOVER
This is the height of the rows when you put your cursor on them.
*/
tr:hover .td1, tr:hover .td2 {
line-height: 360px;
}

/*
AIRING
*/
.animetitle + small {
position: relative;
line-height: 1px !important;
}

/*
HEIGHT/WIDTH/POSITION OF TITLES ON HOVER
Background size is the height/width of titles.
Margin-right lets you move the cover's position on hover. 
*/







#list_surround tab\le:nth-of-type(n+4) tbody:hover .animetitle {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 225px 320px !important;
    display: block !important;
    margin-right: 0px !important;
}

#list_surround tab\le:nth-of-type(n+4) tbody .animetitle{
    background-position: center center !important;
}

/*
OTHER CODES
*/
.td1, .td2 {
line-height: 35px;
background-color:rgba(30,30,30,0.5);
color:white;
}


#list_surround tab\le:nth-of-type(n+4) td:nth-of-type(3),
#list_surround tab\le:nth-of-type(n+4) td:nth-of-type(4), 
#list_surround tab\le:nth-of-type(n+4) td:nth-of-type(5), 
#list_surround tab\le:nth-of-type(n+4) td:nth-of-type(6), 
#list_surround tab\le:nth-of-type(n+4) td:nth-of-type(7),
#list_surround tab\le:nth-of-type(n+4) td:nth-of-type(8) {
    line-height: 20px !important;
}


.animetitle { background-size: 0 !important; 
color:white;
}




@-webkit-keyframes titleswap{
	0% { left: -100px; top:0px;}
	100%{  left: 0px; top:-170px;}
}
@-moz-keyframes titleswap{
	0% { left: -100px; top:0px;}
	100%{  left: 0px; top:-170px;}
}



tbody:hover .animetitle span{
	position:relative;
	top:-170px;
	font-weight: bold;
	-webkit-animation-name: titleswap;
	-webkit-animation-duration: 1.2s;
	-moz-animation-name: titleswap;
	-moz-animation-duration: 1.2s;
	color:white;
	text-shadow: -1px 0 3px black, 0 1px 3px black, 1px 0 3px black, 0 -1px 3px black;

}
tbody:hover .animetitle span:before{
	content:"> ";

}
tbody:hover .animetitle span:after{
	content:" <";
}



tr:hover td[class^="td"]{

	border-top-width: 3px!important;
	border-bottom-width:3px!important;
	border-top-style:solid;
	border-bottom-style:solid;
	border-color:rgba(109,59,61,0.5);
	border-color:rgba(109,59,61,0.5);
	font-weight:bold;
}


.animetitle+small{
	display:none;
}









.header_onhold:after{
	text-align:center;
	display:block;
	content:"Watching in a distant future...";
	text-shadow:black 2px 2px 3px;
	color:yellow;
	background-color:rgba(109,59,61,0.5);
	font-weight:bold;
	font-size:20px;
	white-space:pre;



}

.header_ptw:after span{
	background-color:red;
	content:"test"

}
.animetitle{
	padding-left:2px;
}

#grand_totals{display:none;}

#copyright{
	margin-top:-30px!important;
	padding-bottom:20px;
	color:white;
}

#copyright:after{
	content:"Made by myanimelist.net/profile/Satiriques";
	color:white;
	background-color: rgba(109,59,61,0.5);
	border-radius: 7px 7px 7px 7px;
	padding: 1px;
	margin-left:150px;
	margin-right:150px;
}