#list_surround > table:first-of-type:before {
	position: absolute;
	display: block;
	content: '';
	left: 0;
	top: 0;
	width: 220px;
	height: 220px;
	background: url(https://repo.hexatm.com/mal/rect.png) no-repeat;
	transition: all .3s linear;
	-webkit-transition: all .3s linear;
}

#list_surround > table:first-of-type:after {
	opacity: 1;
	position: absolute;
	display: block;
	content: 'menu';
	left: 170px;
	top: 100px;
	width: 120px;
	height: 20px;
	color: #FFFFFF;
	text-align: center;
	background-color: rgb(0, 0, 0);
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transition: opacity .5s linear .5s, left 0s linear .5s;
	-webkit-transition: opacity .5s linear .5s, left 0s linear .5s;
}

#list_surround > table:first-of-type:hover:after {
	opacity: 0;
	left: -100px;
	transition: opacity .5s linear, left 0s linear .5s;
	-webkit-transition: opacity .5s linear, left 0s linear .5s;
}

#list_surround > table:first-of-type {
	position: fixed !important;
	display: block;
	left: -220px;
	top: calc(50% - 110px);
	width: 0;
	height: 0;
	transition: all .5s linear;
	-webkit-transition: all .5s linear;
	z-index: 1;
}

#list_surround > table:first-of-type:hover { left: 0; }

/* MENU BUTTONS */
.status_not_selected, .status_selected { 
	position: absolute !important; 
	display: block;
	width: 32px; 
	height: 25px;
}

.status_not_selected a, .status_selected a {
	position: absolute;
	display: block;
	width: 32px; 
	height: 25px;
	font-size: 0;
}

.status_not_selected a:after {
	pointer-events: none;
	opacity: 0;
	display: block;
	margin-top: -40px;
	width: 80px;
	padding: 4px;
	font-size: 14px;
	color: #26bae0;
	background-color: rgb(255, 255, 255);
	border: solid 1px #26bae0;
	border-radius: 4px;
	transition: all .3s linear;
	-webkit-transition: all .3s linear;
}

.status_not_selected a:hover:after { opacity: 1; margin-top: -20px; }

.status_selected a { pointer-events: none; }

/* Currently watching */
.status_not_selected a[href*="status=1"]:after { content: 'Watching'; }
.status_not_selected:first-child, .status_selected:first-child { left: 65px; margin-top: 99px; }

/* Completed */
.status_not_selected a[href*="status=2"]:after { content: 'Completed'; }
.status_not_selected:nth-child(2), .status_selected:nth-child(2) { left: 90px; margin-top: 19px; }
  
/* On hold */
.status_not_selected  a[href*="status=3"]:after { content: 'On Hold'; }
.status_not_selected:nth-child(3), .status_selected:nth-child(3) { left: 20px; margin-top: 99px; }

/* Dropped */
.status_not_selected a[href*="status=4"]:after { content: 'Dropped'; }
.status_not_selected:nth-child(4), .status_selected:nth-child(4) { left: 100px; margin-top: 176px; }
  
/* Planned */
.status_not_selected a[href*="status=6"]:after { content: 'Planned'; }
.status_not_selected:nth-child(5), .status_selected:nth-child(5) { left: 180px; margin-top: 99px; }
  
/* All */
.status_not_selected a[href*="status=7"]:after { content: 'All';  }
.status_not_selected:last-child, .status_selected:last-child { left: 122px; margin-top: 99px; }