MAL Saber Custom with Text Box.css

/*
Saber Theme by Hahaido, Modified by Marat
Changes Made:
	1) Theme is now one CSS file, instead of multiple includes
	2) Image links replaced with variables that are easily changeable. This makes fixing the links, and customizing exponentially easier

Potential to-do list:
	1) Make variables for key colors to make theme even more modular
	2) Clean up "junk"
*/

:root {

/*
Variables for static images
Variable names correlate to the filename of the default images.
 */	
  --fatedropmenu: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.1/fatedropmenu.png); /* Image shown when mousing over the top right menu */
  
  --bluebackground: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.2/darkerpurplebackground.jpg);
  
  --saber: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.2/Jeanne_and_Jalter.png); /*Character ontop of the list*/
  
  --sectionheaders: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.1/sectionheaders.png);
  
  --sectioncorners: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.1/sectioncorners.png);
  
  --animation1: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.1/animation1.png);
  
  --animation2: url(https://github.com/marat569/MAL-Saber-Custom/releases/download/0.1/animation2.png);
  
 /*
 Variables for other elements
 */
	--maincolor: #ddc38b; /*Default is #ddc38b , a goldish color, mostly borders */
	--fontcolor: #ddc38b; /*Default is #ddc38b */
	--fontcolortwo: #e6ca8b; /*default is #e6ca8b */

/*
Textbox variables
\A = New line
\25C8 for diamond
*/
	--textcontent: "\25C8 Disliked Genres: \A SoL, Drama, Comedy, Sports. \A \A \25C8 My Rating System: \A 10: Loved it \A 9: Enjoyed it \A 8: Enjoyed it, but not as much as 9 \A 7: Better than watching nothing \A Note: I don't rate anything lower than a 7";
}

#list_surround > table:first-of-type:before, #list_surround > table:first-of-type a, #list_surround > table:first-of-type a:after {
	font-family: 'Oswald', sans-serif;
	color: #e2de9a;
	font-size: 24px;
	text-align: center;
}

#list_surround > table:first-of-type:before {
	opacity: 1;
	position: absolute;
	display: block;
	content: 'Sheets';
	margin-top: 100px;
	right: 86px;
	width: 50px;
	font-size: 16px;
	background-image: linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	background-image: -moz-linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	background-image: -webkit-linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	box-shadow: 0 0 2px #000000 inset;
	border-style: solid;
	border-color: var(--maincolor);
	border-width: 0 0 1px 0;
	transition: opacity .5s linear .3s;
	-webkit-transition: opacity .5s linear .3s;
}

#list_surround > table:first-of-type:hover:before { opacity: 0; } 

#list_surround > table:first-of-type {
	position: fixed !important;
	display: block;
	margin-top: -100px;
	height: 100px;
	width: 100%;
	left: 0;
	top: 0;
	background: var(--fatedropmenu) left center no-repeat, 
			      linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%);
	background: var(--fatedropmenu) left center no-repeat, 
			      -moz-linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%);
	background: var(--fatedropmenu) left center no-repeat, 
			      -webkit-linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%);
	transition: margin-top .5s ease-out, z-index .5s linear .2s;
	-webkit-transition: margin-top .5s ease-out, z-index .5s linear .2s;
	z-index: 1;
}

#list_surround > table:first-of-type tr { 
	position: absolute;
	display: block;
	left: calc(100% - 737px);
}

#list_surround > table:first-of-type:hover { 
	margin-top: 0 !important; 
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	z-index: 5; 
}

.status_selected, .status_not_selected { position: relative !important; display: inline-block; width: 120px; }

.status_selected a, .status_not_selected a { margin-top: 40px; border-right: solid 1px #dbd352; }

.status_selected a, .status_not_selected a,
.status_selected a:after, .status_not_selected a:after { 
	display: inline-block;
	width: 120px;
}

.status_not_selected a[href*="status=1"], .status_selected a[href*="status=1"],
.status_not_selected a[href*="status=6"], .status_selected a[href*="status=6"] { font-size: 0 !important; }

/* Currently watching */
.status_not_selected a[href*="status=1"]:after, .status_selected a[href*="status=1"]:after { content: 'Watching'; }
  
/* Planned */
.status_not_selected a[href*="status=6"]:after, .status_selected a[href*="status=6"]:after { content: 'Planned'; }

.status_not_selected a[href*="status=7"], .status_selected a[href*="status=7"] { border: none; }

.status_not_selected a:hover, .status_not_selected a:hover:after {
	color: #dbd352 !important; 
	transition: color .3s linear;
	-webkit-transition: color .3s linear;
}
/*
Import for the Oswald and Crimson fonts from Google's API.
It is possible to rip the required files, and host on your own server if one wants 100% redundancy, but Google is reliable.
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:300|Crimson+Text);
/* The three links below seem to be dead, but are useless. Theme works 100% without them. */
@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fate/TopMenu.css);
@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fate/TabContent.css);
@import url(https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fate/CategoryMenu.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
*/

/* TOP MENU BUTTONS */
/* FOR ANIME LIST */
#mal\_cs_links div:last-of-type a:first-of-type { display: none; } /* DISABLE ANIMELIST BUTTON */

/* FOR MANGA LIST */
/* #mal\_cs_links div:last-of-type a:last-of-type { display: none; } */ /* DISABLE MANGALIST BUTTON */

body {
	background-image: var(--bluebackground);
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: 'Crimson Text', serif;
	font-size: 14px;
	color: var(--fontcolor);
}

a { color: var(--fontcolor); text-decoration: none; }

/*Firefox*/
@-moz-document url-prefix() {
#list_surround {
	background: var(--saber) no-repeat center 0 !important;
	margin: 20px auto 5px;
	padding: 96px 0 2px;
	width: 690px;
	}	
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#list_surround {
	background: var(--saber) no-repeat center 0 !important;
	margin: 20px auto 5px;
	padding: 113px 0 2px;
	width: 690px;
		}
}

#list_surround br { display:none; }

.td1, .td2 { 
	color: var(--fontcolor); 
	background-color: rgba(0, 0, 0, .3);
}

.borderRBL, .borderRBL a  { text-align: center !important; }

.borderRBL {
	color: #FFFFFF !important; 
	border-top: solid 1px var(--maincolor) !important; 
}

.borderRBL small { visibility: visible !important; }

tr:hover td[class^='td']:not(.borderRBL) {
	text-shadow: 0 0 10px #FF0;
	transition: all .5s ease !important;
	-webkit-transition: all .5s ease !important;
}

td[class^='td']:first-child, td[class^='td']:last-child { width: 50px !important; }

td[class^='td']:first-child { text-align: left; padding-left: 5px; border-left: double 4px var(--maincolor) !important; }

td[class^='td']:last-child { text-align: right; padding-right: 5px; border-right: double 4px var(--maincolor) !important; }

.animetitle + small {
	visibility: visible !important;
	text-transform: lowercase;
	font-size: 13px;
	color: var(--fontcolortwo);
	margin-left: 5px;
}

.animetitle + small:before { content: "/ "; }

/* EDIT-MORE */
#list_surround small { visibility: hidden; }

#list_surround tr:hover small, #list_surround tr:hover small a { visibility: visible; }

/* HEADERS */
.header_title {
	pointer-events: none;
	display: inline-block;
	height: 100px;
}

/* Headers pics */
.header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span {
	position: absolute;
	display: inline-block;
	width: 730px;
	height: 78px;
	margin-left: -20px;
	margin-top: 22px;
	font-size: 0;
	background-image: var(--sectionheaders);
	background-repeat: no-repeat;
	z-index: -1;
}

.header_cw span { background-position: center 0; }

.header_completed span { background-position: center -78px; }

.header_onhold span { background-position: center -156px; }

.header_dropped span { background-position: center -234px; }

.header_ptw span { background-position: center -312px; }

.category_totals:before {
	position: absolute;
	display: block;
	content: '';
	background: var(--sectioncorners) no-repeat;
	width: 730px;
	height: 78px;
	margin-left: -20px;
	margin-top: -20px;
	z-index: -1;
}

.category_totals {
	padding: 20px 0;
	color: var(--fontcolor);
	text-align: center;
	text-transform: lowercase !important;
}

#grand_totals { display:none; }

.borderRBL {
	color: #FFFFFF !important;
	line-height: 1;
	background-color: rgba(0, 0, 0, .3) !important;
}

#copyright:before {
	display: block;
	content: 'Base Designed by Hahaido, Modified by Marat and Spy'; 
	line-height: 1;
}

#copyright {
	color: #fff;
	height: 15px;
	padding: 100px 0;
	font-size: 10px;
	text-transform: uppercase;
}

#copyright a { font-size: 10px; color: #FFFFFF; }

#inlineContent {
	display: inline !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1; 
}

@keyframes sparkle {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: -150px -300px, 150px -300px; }
}
 
@-webkit-keyframes sparkle {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: -150px -300px, 150px -300px; }
}

#inlineContent:before {
	position: fixed;
	display: block;
	content: '';
	left: 50%;
	bottom: 0;
	margin-left: -40%;
	width: 80%;
	height: 100%;
	background-image: var(--animation1),
				         var(--animation2);
	border-radius: 50em;
	animation: sparkle 15s linear infinite;
	-webkit-animation: sparkle 15s linear infinite;
}/* 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;
} 

.table_header span { display: none; }

/* Disable Tags in the Sort Options */
.table_header[width="125"] { display: none !important; }

#list_surround table:nth-of-type(3):before, .table_header a, .table_headerLink strong {
	font-family: 'Oswald', sans-serif;
	color: #e2de9a;
	font-size: 24px;
	text-align: center;
	font-weight: normal !important;
}

#list_surround table:nth-of-type(3):before {
	opacity: 1;
	position: absolute;
	display: block;
	content: 'Sort';
	margin-top: 100px;
	right: 36px;
	width: 50px;
	font-size: 16px;
	background-image: linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	background-image: -moz-linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	background-image: -webkit-linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	box-shadow: 0 0 2px #000000 inset;
	border-style: solid;
	border-color: var(--maincolor);
	border-width: 0 1px 1px 0;
	border-bottom-right-radius: 6px;
	transition: opacity .5s linear .3s;
	-webkit-transition: opacity .5s linear .3s;
}

#list_surround table:nth-of-type(3) { 
	position: fixed !important;
	display: block;
	margin-top: -100px;
	height: 100px;
	width: 100%;
	left: 0;
	top: 0;
	background: var(--fatedropmenu) left center no-repeat, 
			      linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%);
	background: var(--fatedropmenu) left center no-repeat, 
			      -moz-linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%);
	background: var(--fatedropmenu) left center no-repeat, 
			      -webkit-linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%);
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	z-index: 1;
}

#list_surround table:nth-of-type(3) tr { 
	position: absolute;
	display: block;
	left: calc(100% - 360px);
}

#list_surround table:nth-of-type(3):hover:before { opacity: 0; } 

#list_surround table:nth-of-type(3):hover { margin-top: 0 !important;  z-index: 5; }

.table_headerLink {
	display: inline-block;
	margin-top: 40px;
	width: 120px;
	border-right: solid 1px #dbd352;
}

.table_headerLink:lst-child  { border: none; }

.table_header a:hover, .table_headerLink strong:hover {
	color: #dbd352 !important; 
	transition: color .3s linear;
	-webkit-transition: color .3s linear;
}#mal\_control_strip:before, #mal\_control_strip a:after {   
	font-family: 'Oswald', sans-serif;
	color: #e2de9a !important;
	font-size: 24px !important;
	text-align: center;
}

#mal\_control_strip:before {
	opacity: 1;
	position: absolute;
	display: block;
	content: 'Menu';
	margin-top: 100px;
	right: 135px;
	width: 50px;
	font-size: 16px !important;
	background-image: -moz-linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	background-image: -webkit-linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	background-image: linear-gradient(top, rgb(38, 70, 185) 40%, rgb(13, 23, 76) 60%);
	box-shadow: 0 0 2px #000000 inset;
	border-style: solid;
	border-color: var(--maincolor);
	border-width: 0 0 1px 1px;
	border-bottom-left-radius: 6px;
	-webkit-transition: opacity .5s linear .3s;
	transition: opacity .5s linear .3s;
}

#mal\_control_strip:hover:before { opacity: 0; } 

#mal\_control_strip {
	position: fixed !important;
	display: block !important;
	margin-top: -100px !important;
	height: 100px !important;
	left: 0;
	top: 0;
	background: var(--fatedropmenu) left center no-repeat,
			      -moz-linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%) !important;
	background: var(--fatedropmenu) left center no-repeat,
			      -webkit-linear-gradient(bottom, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%) !important;
	background: var(--fatedropmenu) left center no-repeat,
			      linear-gradient(to top, rgb(48, 48, 48) 1%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 100%) !important;
	-webkit-transition: margin-top .5s ease-out, z-index .5s linear .2s;
	transition: margin-top .5s ease-out, z-index .5s linear .2s;
	z-index: 1;
}

#mal\_control_strip a { text-decoration: none !important; }

#mal\_control_strip:hover { 
	margin-top: 0 !important;
	-webkit-transition: all .5s ease-out;
	transition: all .5s ease-out;
	z-index: 5; 
}

#mal\_control_strip a:hover:after { 
	color: #dbd352 !important;
	-webkit-transition: color .3s linear;
	transition: color .3s linear;
}

#mal\_control_strip td  { display: inline !important; }

#mal\_control_strip img, #mal\_cs_powered, #mal\_cs_powered img, #mal\_cs_pic, #mal\_cs_otherlinks strong { display: none; }

#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important; }

#mal_cs_otherlinks div a[href*="history"], #mal_cs_otherlinks div a[href*="list/"], #mal_cs_otherlinks div a[href$="/forum/"],
#mal_cs_otherlinks div a[href*="export"], #mal\_cs_links div a[href$="/"],
#mal\_cs_otherlinks div a[href*="shared"], #mal\_cs_otherlinks div span[title*="Compatibility Score"] { display: none; } { display: none !important; }

#mal\_cs_otherlinks div a, #mal\_cs_listinfo div:last-of-type a, #mal\_cs_listinfo div:first-of-type a, 
#mal_cs_links div a[href*="addtolist"], #mal\_cs_links div:last-of-type a:first-of-type, #mal\_cs_links div:last-of-type a:last-of-type { 
	position: absolute !important;
	display: block;
	left: 100% !important;
	top: 40px !important;
	width: 100px !important;
	font-size: 0 !important;
	color: transparent;
}

#mal\_cs_otherlinks div a:after, #mal\_cs_listinfo div:last-of-type a:after, #mal\_cs_listinfo div:first-of-type a:after, 
#mal_cs_links div a[href*="addtolist"]:after,  #mal\_cs_links div:last-of-type a:first-of-type:after, #mal\_cs_links div:last-of-type a:last-of-type:after  { 
	position: absolute;
	display: block;
	width: 100px;
	border-right: solid 1px #dbd352;
}

/*  USERNAME */

#mal\_cs_listinfo div:first-of-type a:after { content: 'Profile'; margin-left: -400px; }

/* ADD */
#mal\_cs_links div a[href*="addtolist"]:after { content: 'Add'; margin-left: -300px; }

/* MANGALIST */
#mal\_cs_links div:last-of-type a:last-of-type  { margin-left: -200px; }

#mal\_cs_links div:last-of-type a:last-of-type:after { content: 'Manga'; }

/* ANIMELIST */
#mal\_cs_links div:last-of-type a:first-of-type { margin-left: -200px; }

#mal\_cs_links div:last-of-type a:first-of-type:after { content: 'Anime'; }

/* LOGOUT */
#mal\_cs_listinfo div:last-of-type a { margin-left: -100px; }

#mal\_cs_listinfo div:last-of-type a:after { content: 'Logout'; border: none; }

/* LOGIN */
#mal\_cs_otherlinks div a[href*="login"]:after { content: 'Login'; margin-left: -300px; }

/* CREATE A LIST */
#mal\_cs_otherlinks div a[href*="register"] { margin-left: -200px; }

#mal\_cs_otherlinks div a[href*="register"]:after { content: 'Register'; }

/* FAQ */
#mal\_cs_otherlinks div a[href*="forum"] { margin-left: -100px; }

#mal\_cs_otherlinks div a[href*="forum"]:after { content: 'Help'; border: none; }

#search {
	position: absolute; 
        display: block !important;
	margin: 5px 0 0 -150px !important;
}

#searchBox {
	position: absolute;
        display: block !important; 
	width: 124px !important;
	padding-right: 2px;
        height: 13px !important;
	border: solid 1px #303030 !important;
	text-align: right !important;
	background-color: rgb(255, 255, 255);
}

#searchListButton {
	position: absolute;
	display: block !important;
	margin-left: 128px !important;
	padding: 0 2px 3px 2px !important;
	background-color: rgb(48, 48, 48) !important;
}

.status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]{
    top: -75px;
    left: 620px;
    position: absolute;
}


/*
HORIZONTAL LINES
*/
.td1, .td2, .table_header {
border-style: solid;
border-color: var(--maincolor);
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

/*
Custom text table
*/
#list_surround:before {
    /* Position */
    position: relative;
    display: block;
    float: right;
      right: -45%;
      top: -64%;
    
    /* Box Size */
    width: 220px;
    height: auto;
    padding: 20px;

    /* Border */
    border-right: double 4px var(--maincolor) !important;
    border-left: double 4px var(--maincolor) !important;
    border-top: double 4px var(--maincolor) !important;
    border-bottom: double 4px var(--maincolor) !important;
    
    /* Font Settings */
    font-family: 'Crimson Text', serif;
    font-size: 14px;
    color: var(--fontcolor);
    
    white-space: pre;
    
    /* Text out based on variable */
    content: var(--textcontent);
}