code.css

/*

TODO: RAGGRUPPARE CODICE DUPLICATO
TODO: AGGIUNGERE HOME
TODO: AGGIUNGERE COPRI PREVIEW "GC"

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
*/
/* Not working imports (offline links), so they are disabled for performance */ /*
	@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Guilty%20Crown/ShrinkVert.css);
	@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Guilty%20Crown/ShrinkVertEmblem.css);
	@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Guilty%20Crown/ShortShrinkVert.css);
	@import url(https://dl.dropbox.com/u/78192465/MyAnimeList/Guilty%20Crown/TabContent.css);
	@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css);
	@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/UnFixed.css);
	@import url(https://dl.dropbox.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Violet.css);
	@import url(https://dl.dropbox.com/u/78192465/MyAnimeList/Guilty%20Crown/CategoryMenu.css);
	@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/covers_more.css);
*/

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/more";
@\import "https://fonts.googleapis.com/css?family=Electrolize";
@\import "https://dl.dropboxusercontent.com/s/ilgjrutef4suve9/menu_bar.css";

#list_surround table:first-of-type {
	position: absolute !important;
	left: 0;
	top: 0;
	z-index: 15;
}

/* White circle of cw, completed, onhold, ptw */
#list_surround table:first-of-type:before { 
	visibility: hidden;
	position: fixed;
	display: block;
	content: '';
	margin-left: -366px;
	margin-top: -230px;
	width: 230px;
	height: 230px;
	border: solid 1px #0c100d;
	background: rgba(255, 255, 255, 1);
	box-shadow: inset 0 0 2px #FFFFFF, inset 0 0 12px rgba(63, 65, 64, 1), inset 0 0 24px rgba(145, 145, 145, 1);
	border-radius: 50em;
}

/* White circle of cw, completed, onhold, ptw */
#list_surround table:first-of-type:after { 
	opacity: 0;
	visibility: hidden;
	position: fixed;
	display: block;
	content: '';
	margin-left: -356px;
	margin-top: -195px;
	width: 180px;
	height: 158px;
	background: url(http://i.imgur.com/14W9Hdy.png);
	z-index: 2; /* allow to cover white circle */
}

/* Animations of white circle */
#list_surround table:first-of-type:hover:before {  
	visibility: visible;
	animation: ShrinkVert linear 1.5s;
        -webkit-animation: ShrinkVert linear 1.5s;
}

 /* Animations of white circle */
#list_surround table:first-of-type:hover:after { 
	visibility: visible;
	animation: ShrinkVertEmblem linear 1.5s;
        -webkit-animation: ShrinkVertEmblem linear 1.5s;
}

.status_not_selected a, .status_selected a {
	visibility: hidden;
	position: fixed; 
	display: block;
	right: 600px;
	top: 332px;
	width: 300px;
	font-size: 20px;
	font-family: 'Electrolize', sans-serif;
	text-align: center;
	color: transparent !important;
	transition: color .2s linear 1.3s;
	-webkit-transition: color .2s linear 1.3s;
}

.status_not_selected a:hover, .status_selected a:hover { visibility: visible; color: #0c100d !important; z-index: 1; }

.status_not_selected a:before, .status_selected a:before { 
	visibility: visible;
	position: fixed;
	display: block;
	content: '';
	width: 64px;
	height: 64px;
}

.status_not_selected a:before { background-image: url(http://i.imgur.com/8vhrEQp.png); }

.status_not_selected a:hover:before, .status_selected a:before { background-image: url(http://i.imgur.com/31FdKqz.png); }

/* Currently watching */
.status_not_selected a[href*="status=1"]:before, .status_not_selected a[href*="status=1"]:hover:before, .status_selected a[href*="status=1"]:before { 
	margin-left: -58px; 
	margin-top: 110px; 
	background-position: 0 0; 
}

/* Completed */
.status_not_selected a[href*="status=2"]:before, .status_not_selected a[href*="status=2"]:hover:before, .status_selected a[href*="status=2"]:before { 
	margin-left: 16px; 
	margin-top: 172px; 
	background-position: 256px 0;
}

/* On Hold */
.status_not_selected > a[href*="status=3"]:before, .status_not_selected > a[href*="status=3"]:hover:before, .status_selected > a[href*="status=3"]:before { 
	margin-left: 98px; 
	margin-top: 198px; 
	background-position: 192px 0; 
}

/* Dropped */
.status_not_selected a[href*="status=4"]:before, .status_not_selected a[href*="status=4"]:hover:before, .status_selected a[href*="status=4"]:before {  
	margin-left: 184px; 
	margin-top: 192px; 
	background-position: 128px 0; 
}

/* Planned */
.status_not_selected a[href*="status=6"]:before, .status_not_selected a[href*="status=6"]:hover:before, .status_selected a[href*="status=6"]:before {  
	margin-left: 260px; 
	margin-top: 158px; 
	background-position: 64px 0; 
}

/*All */
.status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"] { display: none; }
.animetitle[href$="/No_Game_No_Life"] span:after, 
.animetitle[href$="/Blood+"] span:after, 
.animetitle[href$="/Amagami_SS+_Plus"] span:after,
.animetitle[href$="/Sekirei:_Pure_Engagement"] span:after, 
.animetitle[href$="/Mirai_Nikki_(TV)"] span:after,
.animetitle[href$="/Kokoro_Connect:_Michi_Random"] span:after,
.animetitle[href$="/Kanon_(2006)"] span:after,
.animetitle[href$="/Sukitte_Ii_na_yo."] span:after { 
	pointer-events: none;
	position: absolute;
	display: block; 
	content: ''; 
	margin-left: -34px;
	margin-top: -17px;
	width: 10px; 
	height: 10px; 
	background-color: rgba(241, 234, 166, 1);
	border-radius: 1em;
	-o-border-radius: 1em;
	-moz-border-radius: 1em;
 	-webkit-border-radius: 1em;
}

/* Circle animation of anime */
@keyframes ShortShrinkVert
{
	0% { transform: scale(1, 1); }   
	25% { transform: scale(1, .5); }      
	50% { transform: scale(1, 0); }
	75% { transform: scale(1, .5); }
	100% { transform: scale(1, 1); }
}

@-o-keyframes ShortShrinkVert
{
	0% { -o-transform: scale(1, 1); }   
	25% { -o-transform: scale(1, .5); }      
	50% { -o-transform: scale(1, 0); }
	75% { -o-transform: scale(1, .5); }
	100% { -o-transform: scale(1, 1); }
}

@-ms-keyframes ShortShrinkVert
{
	0% { -ms-transform: scale(1, 1); }   
	25% { -ms-transform: scale(1, .5); }      
	50% { -ms-transform: scale(1, 0); }
	75% { -ms-transform: scale(1, .5); }
	100% { -ms-transform: scale(1, 1); }
}

@-moz-keyframes ShortShrinkVert
{
	0% { -moz-transform: scale(1, 1); }   
	25% { -moz-transform: scale(1, .5); }      
	50% { -moz-transform: scale(1, 0); }
	75% { -moz-transform: scale(1, .5); }
	100% { -moz-transform: scale(1, 1); }
}

@-webkit-keyframes ShortShrinkVert
{
	0% { -webkit-transform: scale(1, 1); }   
	25% { -webkit-transform: scale(1, .5); }      
	50% { -webkit-transform: scale(1, 0); }
	75% { -webkit-transform: scale(1, .5); }
	100% { -webkit-transform: scale(1, 1); }
}

.ShortShrinkVert
{
	animation-name: ShortShrinkVert;
	-o-animation-name: ShortShrinkVert;
	-ms-animation-name: ShortShrinkVert;
	-moz-animation-name: ShortShrinkVert;
	-webkit-animation-name: ShortShrinkVert;
}
/* Circle animation of filtering */
@keyframes ShrinkVert
{
	0% { transform: scale(1, 1); }   
	10% { transform: scale(1, .5); }      
	20% { transform: scale(1, 0); }
	30% { transform: scale(1, .5); }
	40% { transform: scale(1, 1); }
	60% { transform: scale(1, 1); }      
	70% { transform: scale(1, 1); }     
	80% { transform: scale(1, 0); }
	90% { transform: scale(1, .5); }
	100% { transform: scale(1, 1); }
}

@-o-keyframes ShrinkVert
{
	0% { -o-transform: scale(1, 1); }   
	10% { -o-transform: scale(1, .5); }      
	20% { -o-transform: scale(1, 0); }
	30% { -o-transform: scale(1, .5); }
	40% { -o-transform: scale(1, 1); }
	60% { -o-transform: scale(1, 1); }      
	70% { -o-transform: scale(1, 1); }     
	80% { -o-transform: scale(1, 0); }
	90% { -o-transform: scale(1, .5); }
	100% { -o-transform: scale(1, 1); }
}

@-ms-keyframes ShrinkVert
{
	0% { -ms-transform: scale(1, 1); }   
	10% { -ms-transform: scale(1, .5); }      
	20% { -ms-transform: scale(1, 0); }
	30% { -ms-transform: scale(1, .5); }
	40% { -ms-transform: scale(1, 1); }
	60% { -ms-transform: scale(1, 1); }      
	70% { -ms-transform: scale(1, 1); }     
	80% { -ms-transform: scale(1, 0); }
	90% { -ms-transform: scale(1, .5); }
	100% { -ms-transform: scale(1, 1); }
}

@-moz-keyframes ShrinkVert
{
	0% { -moz-transform: scale(1, 1); }   
	10% { -moz-transform: scale(1, .5); }      
	20% { -moz-transform: scale(1, 0); }
	30% { -moz-transform: scale(1, .5); }
	40% { -moz-transform: scale(1, 1); }
	60% { -moz-transform: scale(1, 1); }      
	70% { -moz-transform: scale(1, 1); }     
	80% { -moz-transform: scale(1, 0); }
	90% { -moz-transform: scale(1, .5); }
	100% { -moz-transform: scale(1, 1); }
}

@-webkit-keyframes ShrinkVert
{
	0% { -webkit-transform: scale(1, 1); }   
	10% { -webkit-transform: scale(1, .5); }      
	20% { -webkit-transform: scale(1, 0); }
	30% { -webkit-transform: scale(1, .5); }
	40% { -webkit-transform: scale(1, 1); }
	60% { -webkit-transform: scale(1, 1); }      
	70% { -webkit-transform: scale(1, 1); }     
	80% { -webkit-transform: scale(1, 0); }
	90% { -webkit-transform: scale(1, .5); }
	100% { -webkit-transform: scale(1, 1); }
}

.ShrinkVert
{
	animation-name: ShrinkVert;
	-o-animation-name: ShrinkVert;
	-ms-animation-name: ShrinkVert;
	-moz-animation-name: ShrinkVert;
	-webkit-animation-name: ShrinkVert;
}
/* GC Emblem animation */
@keyframes ShrinkVertEmblem
{
	0% { transform: scale(1, 1); }   
	10% { transform: scale(1, .5); }      
	20% { transform: scale(1, 0); }
	30% { transform: scale(1, .5); opacity: 0; }
	40% { transform: scale(1, 1); opacity: 1; }
	60% { transform: scale(1, 1); opacity: 1; }      
	70% { transform: scale(1, 1); opacity: 0; }     
	80% { transform: scale(1, 0); }
	90% { transform: scale(1, .5); }
	100% { transform: scale(1, 1); }
}

@-o-keyframes ShrinkVertEmblem
{
	0% { -o-transform: scale(1, 1); }   
	10% { -o-transform: scale(1, .5); }      
	20% { -o-transform: scale(1, 0); }
	30% { -o-transform: scale(1, .5); opacity: 0; }
	40% { -o-transform: scale(1, 1); opacity: 1; }
	60% { -o-transform: scale(1, 1); opacity: 1; }      
	70% { -o-transform: scale(1, 1); opacity: 0; }     
	80% { -o-transform: scale(1, 0); }
	90% { -o-transform: scale(1, .5); }
	100% { -o-transform: scale(1, 1); }
}

@-ms-keyframes ShrinkVertEmblem
{
	0% { -ms-transform: scale(1, 1); }   
	10% { -ms-transform: scale(1, .5); }      
	20% { -ms-transform: scale(1, 0); }
	30% { -ms-transform: scale(1, .5); opacity: 0; }
	40% { -ms-transform: scale(1, 1); opacity: 1; }
	60% { -ms-transform: scale(1, 1); opacity: 1; }      
	70% { -ms-transform: scale(1, 1); opacity: 0; }     
	80% { -ms-transform: scale(1, 0); }
	90% { -ms-transform: scale(1, .5); }
	100% { -ms-transform: scale(1, 1); }
}

@-moz-keyframes ShrinkVertEmblem
{
	0% { -moz-transform: scale(1, 1); }   
	10% { -moz-transform: scale(1, .5); }      
	20% { -moz-transform: scale(1, 0); }
	30% { -moz-transform: scale(1, .5); opacity: 0; }
	40% { -moz-transform: scale(1, 1); opacity: 1; }
	60% { -moz-transform: scale(1, 1); opacity: 1; }      
	70% { -moz-transform: scale(1, 1); opacity: 0; }     
	80% { -moz-transform: scale(1, 0); }
	90% { -moz-transform: scale(1, .5); }
	100% { -moz-transform: scale(1, 1); }
}

@-webkit-keyframes ShrinkVertEmblem
{
	0% { -webkit-transform: scale(1, 1); }   
	10% { -webkit-transform: scale(1, .5); }      
	20% { -webkit-transform: scale(1, 0); }
	30% { -webkit-transform: scale(1, .5); opacity: 0; }
	40% { -webkit-transform: scale(1, 1); opacity: 1; }
	60% { -webkit-transform: scale(1, 1); opacity: 1; }      
	70% { -webkit-transform: scale(1, 1); opacity: 0; }     
	80% { -webkit-transform: scale(1, 0); }
	90% { -webkit-transform: scale(1, .5); }
	100% { -webkit-transform: scale(1, 1); }
}

.ShrinkVertEmblem
{
	animation-name: ShrinkVertEmblem;
	-o-animation-name: ShrinkVertEmblem;
	-ms-animation-name: ShrinkVertEmblem;
	-moz-animation-name: ShrinkVertEmblem;
	-webkit-animation-name: ShrinkVertEmblem;
}


* { cursor: url(http://i.imgur.com/FCnd9vD.png) 1 1, auto; }

/* Covers shape */
.hide, .hide:before {
	visibility: hidden;
	display: block !important;
	border-radius: 10em;
}

/* Covers settings */
.hide {
	opacity: 0;
	position: fixed !important;
	right: 662px;
	top: 260px;
	width: 174px;
	height: 174px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 190px 270px;
	/* Animation appearance */
	transition: opacity .3s linear .4s;
	-webkit-transition: opacity .3s linear .4s;
	z-index: 15;
}

/* Covers blured borders */
.hide:before {
	position: absolute;
	content: '';
	margin-left: -1px;
	margin-top: -1px;
	width: 176px;
	height: 176px;
	box-shadow: inset 0 0 6px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 1),
		              inset 0 0 6px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 1);
}

/* Circuit behind covers */
.hide:after {
	position: absolute;
	content: '';
	margin-left: -28px;
	margin-top: -28px;
	width: 230px;
	height: 230px;
	background: url(http://i.imgur.com/xUKzSyd.png);
	z-index: -1;
}

:hover + .hide, :hover + .hide:before, :hover + .hide:after { visibility: visible !important; }

/* Additional animation */
:hover + .hide { 
	opacity: .9;
	animation: ShortShrinkVert linear .7s;
        -webkit-animation: ShortShrinkVert linear .7s;
}

body {
        color: #0c100d;
        font-size: 12px;
      	font-family: 'Electrolize', sans-serif;
	background-image: url(http://i.imgur.com/GoHHHlu.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

a { text-decoration: none; }

/* Menu image to the left of the table */
#list_surround:before {
	position: fixed;
	content: '';
	top: 92px;
	right: 514px;
	width: 450px;
	height: 458px;
	background: url(http://i.imgur.com/epKXhU4.png) no-repeat;
}

/* Girl image at the top of the table */
#list_surround:after {
	pointer-events: none;
	position: absolute;
	content: '';
	top: -464px;
	margin-left: -20px;
	width: 520px;
	height: 510px;
	background-image: url(http://i.imgur.com/LxPfmUI.png),
					 url(http://i.imgur.com/zB2ojhW.png);
	background-repeat: no-repeat;
	background-position: bottom center, top center;
}

#list_surround {
	position: absolute !important;
	right: 0;
	margin-top: 464px;
	width: 500px;
	background-color: rgba(79, 64, 131, .6);
	/* Table borders */
	background-clip: padding-box;
	border-color: transparent;
	border-style: solid; 
	border-width: 0 0 0 19px; 
	border-image: url(http://i.imgur.com/JdHRQxs.png) 0 0 0 19 stretch;
	-moz-border-image: url(http://i.imgur.com/JdHRQxs.png) 0 0 0 19 stretch;
	-webkit-border-image: url(http://i.imgur.com/JdHRQxs.png) 0 0 0 19 stretch;
}

.animetitle { 
	display: inline-block; 
	min-width: 0; 
	max-width: 350px; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 24px !important;
	font-size: 16px;
	padding-left: 18px;
	max-width: 287px;
}

.animetitle + small { display: none; }

.td1, .td2 {
	line-height: 24px !important;
	font-size: 14px;
	color: #b8bbe4;	
}

/* Titles color */
.td1 a, .td2 a { color: #b8bbe4; }

.header_title, .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { display: none; }

.category_totals {
	display: block;
	margin-left: -19px;
	padding: 8px 0 0 19px;
	text-align: right; 
	color: #b8bbe4;
	border-bottom: solid 2px #b8bbe4;
} 

#copyright {
	position: fixed;
	display: block;
	top: 0;
	left: 200px;
	width: 246px;
	text-align: left !important;
	font-size: 10px;
	z-index: -1;
}

/*#copyright a { color: #0c100d; }*/

/* Barcode */
#copyright:before { 
	position: absolute;
	display: block; 
	content: '';
	width: 185px;
	height: 90px;
	margin-left: -192px;
	background: url(http://i.imgur.com/rRvoVd1.png) center top no-repeat;
}

#copyright:after { display: inline-block; content: 'List designed by Hahaido.'; }
.hide {
	filter: url('data:image/svg+xml;utf8,#grayscale');
	-webkit-filter: grayscale(100%);
}

tr:hover > .td1, tr:hover > .td2, tr:hover > .td1 a, tr:hover > .td2 a { color: #FFFFFF; }

/* Arrow when hover a title */
#list_surround table:nth-of-type(n+4) tbody:hover .animetitle { 
	background-image: url(http://i.imgur.com/LJGgBWM.png); 
	background-repeat: no-repeat;
	background-position: left;
}

/* Circle to the left of the table */
#list_surround table:nth-of-type(n+4) .animetitle:before { 
	visibility: hidden;
	position: fixed;
	display: block;
	content: '';
	right: 633px !important;
	top: 231px !important;
	width: 230px;
	height: 230px;
	border: solid 1px #0c100d;
	background: rgba(255, 255, 255, 1);
	box-shadow: inset 0 0 2px #FFFFFF, inset 0 0 12px rgba(63, 65, 64, 1), inset 0 0 24px rgba(145, 145, 145, 1);
	border-radius: 50em;
}

#list_surround table:nth-of-type(n+4) tbody:hover .animetitle:before {  
	visibility: visible;
	animation: ShortShrinkVert linear .7s;
        -webkit-animation: ShortShrinkVert linear .7s;
}

/* EDIT */
#list_surround table:nth-of-type(n+4) tbody div small { visibility: hidden; letter-spacing: -12px; }

#list_surround table:nth-of-type(n+4) tbody small a:last-of-type { display: none !important; }

#list_surround table:nth-of-type(n+4) tbody:hover small a:first-of-type {
	visibility: visible;
	position: absolute !important;
	display: block !important;
	width: 36px;
	left: -56px !important;
	border: solid 1px #b8bbe4;
	border-right: none;
	background-color: rgba(79, 64, 131, .6);
	border-radius: 6px 0 0 6px;
	text-align: center;
	letter-spacing: 0 !important;
}

#list_surround table:nth-of-type(n+4) small a:first-of-type:hover {
	border-color: #f1eaa6 !important;
	background-color: rgba(204, 191, 147, .6) !important;
}

#list_surround table:nth-of-type(n+4) tbody:hover small a:first-of-type:after {
	visibility: visible;
	position: absolute;
	display: inline-block;
	content: '';
	left: 30px !important;
	width: 28px;
	height: 24px;
}

/* SORT */
#list_surround > table:nth-of-type(n+4) ~ .header_cw + table,
#list_surround > table:nth-of-type(n+4) ~ .header_completed + table,
#list_surround > table:nth-of-type(n+4) ~ .header_onhold + table,
#list_surround > table:nth-of-type(n+4) ~ .header_dropped + table,
#list_surround > table:nth-of-type(n+4) ~ .header_ptw + table {
	display: none;
}

.header_cw + table, .header_completed + table, .header_onhold + table,
.header_dropped + table, .header_ptw + table { 
	position: fixed; 
	display: block; 
	top: 0;
	right: 520px;
	z-index: 15;
}

.table_header { 
	position: fixed;
	display: block;
}


#list_surround table:nth-of-type(3) a {
	font-size: 24px;
	line-height: 48px;
	font-weight: normal;
margin-left:-41px;	
} 

/* Hide default text */
.table_headerLink strong, .table_headerLink[href*="order=4"], .table_headerLink[href*="order=6"], .table_headerLink[href*="order=12"] { visibility: hidden; font-weight: normal; letter-spacing: -12px; }

/* A circle */
 .table_headerLink strong:before { 
	visibility: visible;
	position: fixed;
	display: block;
	width: 48px;
	height: 48px;
margin-top: -48px;
margin-left: -48px;
	color: #b8bbe4;
	text-align: center;
	border: solid 2px #b8bbe4;
	background-color: rgba(79, 64, 131, .6);
	border-radius: 10em;
	letter-spacing: 0 !important;  
}
 
/* S circle */
  .table_headerLink[href*="order=4"]:before { 
    visibility: visible;
  	position: fixed;
	display: block;
	width: 48px;
	height: 48px;
margin-top: -48px;
margin-left: -25px;
	color: #b8bbe4;
	text-align: center;
	border: solid 2px #b8bbe4;
	background-color: rgba(79, 64, 131, .6);
	border-radius: 10em;
	letter-spacing: 0 !important;
  } 
  
  /* T circle */
  .table_headerLink[href*="order=6"]:before { 
    visibility: visible;
  	position: fixed;
	display: block;
	width: 48px;
	height: 48px;
margin-top: -48px;
margin-left: -30px;
	color: #b8bbe4;
	text-align: center;
	border: solid 2px #b8bbe4;
	background-color: rgba(79, 64, 131, .6);
	border-radius: 10em;
	letter-spacing: 0 !important;
  } 
  
  /* E circle */
  .table_headerLink[href*="order=12"]:before {
    visibility: visible;
  	position: fixed;
	display: block;
	width: 48px;
	height: 48px;
margin-top: -48px;
margin-left: -30px;
	color: #b8bbe4;
	text-align: center;
	border: solid 2px #b8bbe4;
	background-color: rgba(79, 64, 131, .6);
	border-radius: 10em;
	letter-spacing: 0 !important;
  }

/* MouseOver event */
.table_headerLink strong:hover:before,  .table_headerLink[href*="order=4"]:hover:before, .table_headerLink[href*="order=6"]:hover:before, .table_headerLink[href*="order=12"]:hover:before { color: #FFFFFF; border-color: #FFFFFF; }

/*start beta code */

/* pre animation of white circle of A,T,E,S */
.table_header:nth-of-type(2):before, .table_header:nth-of-type(3):before, .table_header:nth-of-type(4):before, .table_header:nth-of-type(5):before {
visibility: hidden;
	position: fixed;
	display: block;
	text-align: center;
	line-height: 9;
	width: 230px;
	height: 230px;
	font-size: x-large;
	border: solid 1px #0c100d;
	background: rgba(255, 255, 255, 1);
	box-shadow: inset 0 0 2px #FFFFFF, inset 0 0 12px rgba(63, 65, 64, 1), inset 0 0 24px rgba(145, 145, 145, 1);
	border-radius: 50em;
}
/* white circle position */
.table_header:nth-of-type(2):before { 	
	margin-left: -88px;
	margin-top: 82px;
	content: 'Order by Alphabet';
}
/* white circle position */
.table_header:nth-of-type(3):before { 	
	margin-left: -280px;
	margin-top: -52px; 
	content: 'Order by Score';	
}
/* white circle position */
.table_header:nth-of-type(4):before { 
	margin-left: -174px;
	margin-top: 76px;
	content: 'Order by Type';
}
/* white circle position */
.table_header:nth-of-type(5):before { 
	margin-left: -237px;
	margin-top: 35px;
	content: 'Order by Episodes';	
}

/* trigger white circle animation when mouseOver */
.table_header:nth-of-type(2):hover:before, .table_header:nth-of-type(3):hover:before, .table_header:nth-of-type(4):hover:before, .table_header:nth-of-type(5):hover:before { 
	visibility: visible;
	animation: ShortShrinkVert linear 0.5s;
        -webkit-animation: ShortShrinkVert linear 0.5s; 
}

/* NOT CORRECTLY WORKING CODE
pre animation of GC logo of A,T,E,S 
.table_header:nth-of-type(2):after, .table_header:nth-of-type(3):after, .table_header:nth-of-type(4):after, .table_header:nth-of-type(5):after {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	display: block;
	content: '';
	width: 180px;
	height: 158px;
	background: url(http://i.imgur.com/14W9Hdy.png);
	z-index: 2;  /* allow to cover white circle 
}
/* white circle position 
.table_header:nth-of-type(2):after { 	
	margin-left: -80px;
	margin-top: 74px;
}
 white circle position 
.table_header:nth-of-type(3):after { 	
	margin-left: -272px;
	margin-top: -60px; 
}
 white circle position 
.table_header:nth-of-type(4):after { 
	margin-left: -162px;
	margin-top: 68px;
}
 white circle position 
.table_header:nth-of-type(5):after { 
	margin-left: -221px;
	margin-top: 27px;	
}
  Animations of GC logo circle when mouseOver 
.table_header:nth-of-type(2):hover:after, .table_header:nth-of-type(3):hover:after, .table_header:nth-of-type(4):hover:after, .table_header:nth-of-type(5):hover:after { 
	visibility: visible;
	animation: ShrinkVertEmblem linear 1.5s;
        -webkit-animation: ShrinkVertEmblem linear 1.5s;
}
 */
 
/* Order by ALPHABET */
.table_headerLink strong:before { content: 'A'; }
/* Order by SCORE */
.table_headerLink[href*="order=4"]:before { content: 'S'; }
/* Order by TYPE */
.table_headerLink[href*="order=6"]:before { content: 'T'; } 
/* Order by Number of EPISODES */
.table_headerLink[href*="order=12"]:before { content: 'E'; }

.table_header:first-of-type { right: 931px; top: 285px; }

.table_header:nth-of-type(2) { right: 778px; top: 152px; } /* A */

.table_header:nth-of-type(3) { right: 541px; top: 286px; } /* S */

.table_header:nth-of-type(4) { right: 642px; top: 158px; } /* T */

.table_header:nth-of-type(5) { right: 559px; top: 199px; } /* E */