@\import "https://malscraper.azurewebsites.net/covers/anime/arbiterofwhim/presets/more";

/* fix for list style problems 8/27/14. do not remove */
@\import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css';
@\import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css';

 /*LIST HOVER COLOR
 This configures the look of the part with sort links:
 * the border and the background.
 * Colors are in rgba format which means first three values
 * define a color in Red-Green-Blue mode and the last one
 * sets up an opacity of the color: rgba(R,G,B,a)
 * Use color picker in Photoshop (or other image editor),
 * Opera Dragonfly or Rainbow Firefox extension to get desired
 * RGB values and then play with opacity until you get what you
 * wanted.
 */

 tr:hover [class^=td] {
 background-color: rgba(4, 150, 100, 0.9) !important;
 }

 .table_header{
 background-color: rgba(0,0,0,0.4);
 border-color: rgba(255,255,255,0.25);
 }


 .table_header, .table_headerLink{
 /* Color of the sort links. I used short hex notation here but
 * you may use whatever you want, rgb, rgba or full-hex. This
 * won't be mentioned below, the way to change colors is the same
 */
 color: #FFF;

 /* Remove the following line if you want links to be underlined */
 text-decoration: none;
 }

 .table_headerLink:hover{
 /* This configures a light white glow on hovered links
 * Changing colors should be enough here so I'll leave it for you.
 * It's the same rgba we've encountered.
 */
 text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
 }

 /* The look of the rest of the
 * Configures background, border and text color for non-links
 * I made it a bit more opaque than sorting headers
 */
 .td1, .td2{
 background-color: rgba(0,0,0,0.6);
 border-color: rgba(255,255,255,0.25);
 color: #FFF;
 }

 /* This is for the links in the rest of the */
 .td1 a, .td2 a{
 text-decoration: none; /* Removes underline for these */
 color: #ffc700; /* Paints links orange */
 }

 /* Glow effect on link hover. The same text-shadow property */
 .td1 a:hover, .td2 a:hover{
 text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
 }


 /* This makes all text ins bold except for Edit - More */
 #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold}

 /* CSS sprite for Currently Watching, Completed, Dropped, etc...
 * Note there is only one image used for all headers. I've made an
 * inverted version for bright layouts:
 * [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png
 * or you can make one yourself. It's not that difficult.
 */
 .header_title{
 background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAshWtarxPRL_6RceZDoVGPI);
 }

 /* Block displaying category totals
 * It's redesigned to be the part of the layout
 * and you've already encountered all the properties here
 * so it won't be hard for you to customise this.
 * Note that a different shadow colors used for glow effect
 */
 .category_totals{
 background-color: rgba(0,0,0,0.5);
 border-color: rgba(255,255,255,0.25);
 color: #fff;
 font-weight: bold;
 text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
 }

 /* Text displaying global totals */
 #grand_totals{
 color: #fff;
 font-size: larger;
 font-weight: bold;
 text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
 /* The following line makes it ALL-CAPS */
 text-transform: uppercase;
 }

 /* Modifying copyright section. It's designed to look similar
 * to the whole layout, ok?
 */
 #copyright{
 background-color: rgba(0,0,0,0.6);
 border-color: rgba(255,255,255,0.25);
 }

 #copyright:after {
 content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
 }

 /* Modifying the text color in copyright section */
 #copyright, #copyright a{
 color: #FFF;
 }

 /* Configures a CSS sprite for the bar at the bottom */
 .status_not_selected a, .status_selected a{
 background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAmFzfDboPsWO_linDnNdBSw);
 }

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS).
Left and top adjust the position it appears on screen.
Control the height and width of the pic with height and width.
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.
*/
.hide {
background-size: cover;
left: 70px;
top: 80px;
height: 350px;
width: 226px;
border-style: solid;
border-color: white;
border-top: 1px solid white;;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-radius: 25px 25px 25px 25px;
background-color: rgba(200, 5, 200, 0.75);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
visibility: hidden;
opacity: 0;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
color: white;
content: ;
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}


/*
MINI REVIEW (HOVER TAG)
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial:
http://myanimelist.net/forum/?topicid=563993
*/
td[class^='td']:nth-of-type(6) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 442px;
left: 10px;
background-color: rgba(20, 30, 255, 0.85) !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
font-size: 12px;
height: 145px;
width: 312px;
padding: 10px 10px 0px 24px;
color: white !important;
z-index: 1;
}

/* Notes hover - START
td div:nth-child(3){
background-color: red !important;
position: fixed;
top: 10px;
left: 10px;
}

tr:hover div:nth-child(3){
background-color: red !important;
display: block !important;
}

tr div:nth-child(3){
display: none;
}
 Notes hover - END */

/* TAG TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(6) a {
color: white !important;
}


/* OTHER SETTINGS */
:hover + .hide , tr:hover td[class^='td']:nth-of-type(6){
visibility: visible;
opacity: 1;
}

/* REMOVE HEADER
Deletes the header Tags which isn't necessary.
*/
.table_header:nth-of-type(6) {
display: none;
}

/* 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;
}

/* GOOGLE CHROME FIX
Adjust this amount 50px at a time if your columns are uneven in Chrome.
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
td[class^='td']:nth-of-type(2) {
width: 547px !important;}

.table_header:nth-of-type(6) {
display:none;
}

td[width="80"] {
width: 189px;
}

}

#list_surround {
position: absolute !important;
right: 35px !important;}

/*FIX FOR END OF 2015*/
/* ---------- BACKGROUND & GLOBAL TEXT STYLING ---------- */

body{
	background-repeat: no-repeat;
        background-position: 60% 18%;
        background-attachment: fixed;
        background-color: black;
	background-size: cover;
	color: #000;
	font-family: 'Segoe UI', 'Century Gothic', sans-serif;
	font-size: 11px;
	-moz-background-size: cover;
}

/* ---------- BLOCK SURROUNDING LIST ---------- */

#list_surround{
	margin: -25px auto 0;
	width: 950px;
}

/* ---------- LAYOUT ---------- */

/* header & sort links */
.table_header{
	background-color: rgba(0,0,0,0.4);
	border-bottom: 0px !important;
	border-color: rgba(255,255,255,0.25);
	border-style: solid;
	border-width: 1px 1px 0px 0px;
	color: #FFF;
	padding: 2px;
}

.table_headerLink{
	color: #FFF;
	text-decoration: none;
}

.table_headerLink:visited{
	color: #FFF;
}

.table_headerLink:hover{
	text-shadow:  rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* List body content (anime titles) */
.td1, .td2{
	background-color: rgba(0,0,0,0.6);
	border-color: rgba(255,255,255,0.25);
	border-style: solid;
	border-width: 1px 1px 0 0;
	color: #FFF;
	padding: 2px;
}

/* Links in titles */
.td1 a, .td2 a{
	color: #ffc700;
	text-decoration: none;
}

/* Glow effect on link hover */
.td1 a:hover, .td2 a:hover{
	text-shadow:  #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}

/* Highlighting hovered row */

t\d{	-o-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
	transition: background-color .2s linear;
}

/* Brackets for small text like 'rewatching' or 'airing' */
.td1 small:before, .td2 small:before{
	content:'(';
}

.td1 small:after, .td2 small:after{
	content:')';
}

/* This makes all text in list body bold except for Edit - More */
#list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold}

.borderRBL{
	border-width: 1px 1px 0 36px !important;
}

/* Header image for Currently Watching, Completed, Dropped, etc... */
.header_title{
	color: transparent;
	content: none;
	height: 60px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	width: 520px;
}

.header_cw di\v{
	background-position: 0px 0px;
}

.header_completed di\v{
	background-position: 0px -60px;
}

.header_onhold di\v{
	background-position: 0px -120px;
}

.header_dropped di\v{
	background-position: 0px -240px;
}

.header_ptw di\v{
	background-position: 0px -180px;
}

/* Block displaying category totals */
.category_totals{
	background-color: rgba(0,0,0,0.5);
	border: solid 1px rgba(255,255,255,0.25);
	color: #fff;
	font-weight: bold;
	padding-left: 37px !important;
	padding: 2px;
	text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}

/* Text displaying global totals */
#grand_totals{
	color: #fff;
	display: block;
	font-size: larger;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
	text-transform: uppercase;
}

/* Modifying copyright section */
#copyright{
	background-color: rgba(0,0,0,0.6);
	border: 1px solid rgba(255,255,255,0.25);
	color: white;
	margin-bottom: 40px;
	padding: 2px;
}

#copyright a{color: #FFF}

#copyright br{display:none}

/* ---------- BAR AT BOTTOM ---------- */

/* Setting a position */
#list_surround tab\le:first-of-type {
	bottom: 0;
	margin-left: -25px;
	position: fixed;
	width: 1000px;
        z-index: 1 !important;
}

/* Setting elements to display pure image */
#list_surround tab\le:first-of-type t\d {
	background-color: transparent;
	border-width: 0 !important;
}

.status_not_selected, .status_selected{
	border-width: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.status_not_selected a, .status_selected a{
	color: transparent !important;
	content: none;
	display: block;
	height: 30px;
	width: 150px;
}

/* Override size for wider parts */
.status_not_selected a[href*="status=1"],.status_selected a[href*="status=1"],.status_not_selected a[href*="status=7"], .status_selected a[href*="status=7"]{
	width: 200px;
}

/* Currently watching */
.status_not_selected a[href*="status=1"]{background-position: 0px 0px}
.status_not_selected a[href*="status=1"]:hover{background-position: 0px 30px}
.status_not_selected a[href*="status=1"]:active, .status_selected a[href*="status=1"]{background-position: 0px 60px}

/* Completed */
.status_not_selected a[href*="status=2"]{background-position: -200px 0px}
.status_not_selected a[href*="status=2"]:hover{background-position: -200px 30px}
.status_not_selected a[href*="status=2"]:active, .status_selected a[href*="status=2"]{background-position: -200px 60px}

/* On Hold */
.status_not_selected a[href*="status=3"]{background-position: -350px 0px}
.status_not_selected a[href*="status=3"]:hover{background-position: -350px 30px}
.status_not_selected a[href*="status=3"]:active, .status_selected a[href*="status=3"]{background-position: -350px 60px}

/* Dropped */
.status_not_selected a[href*="status=4"]{background-position: -500px 0px}
.status_not_selected a[href*="status=4"]:hover{background-position: -500px 30px}
.status_not_selected a[href*="status=4"]:active, .status_selected a[href*="status=4"]{background-position: -500px 60px}

/* Plan to watch */
.status_not_selected a[href*="status=6"]{background-position: -650px 0px}
.status_not_selected a[href*="status=6"]:hover{background-position: -650px 30px}
.status_not_selected a[href*="status=6"]:active, .status_selected a[href*="status=6"]{background-position: -650px 60px}

/* All Anime */
.status_not_selected a[href*="status=7"]{background-position: -800px 0px}
.status_not_selected a[href*="status=7"]:hover{background-position: -800px 30px}
.status_not_selected a[href*="status=7"]:active, .status_selected a[href*="status=7"]{background-position: -800px 60px}

.status_not_selected a, .status_selected a{
background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAmFzfDboPsWO_linDnNdBSw);
}


/* TOP BAR SETTINGS
the numbers in parenthesis change the color and opacity of the bar. Get a color number easily from this page:
http://www.css3maker.com/css-3-rgba.

Change position to absolute to make the bar not scroll with the page.
Change the background image out with the url in parenthesis.
*/

#mal\_control\_strip {
background-color: rgba(1,1,1,.5) !important;
background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAh2H5wTYE7OCg5yly8cL5_k) !important;
position:fixed;
}



/*
OTHER CODES
*/
#mal\_control\_strip {
background-position: bottom !important;
top: -16px;
height: 1px !important;}
#mal\_control\_strip di\v {display:inline}
#mal\_cs\_pic img {height: 24px !important; width: auto !important}
#mal\_cs\_listinfo {
  width: 26% !important;
  height: 0 !important;
  padding-bottom: 18px !important;
  padding-top: 27px !important;
background: ;
position: absolute;
top:-5px;
border-right-color: rgba(0,0,0,0.8) !important;}
#mal\_cs\_listinfo div:first-of-type:before {content:'Logged in as '}
#mal\_cs\_listinfo div:last-of-type a {text-decoration: none}
#mal\_cs\_listinfo div:last-of-type a:hover {text-decoration: underline}
#mal\_cs\_listinfo div:last-of-type:before {font-weight:normal;content:'('}
#mal\_cs\_listinfo div:last-of-type:after {font-weight:normal;content:')'}
#mal\_cs\_links {
  width: 92px !important;
  height: 0 !important;
  padding-bottom: 20px !important;
  padding-top: 27px !important;
left: 28%;
top: -7px;
position: absolute;
border-right-color: rgba(0,0,0,0.8) !important;}
#mal\_cs\_links a {background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAoCBiQOVmPLIHlGVcbBFMHY) !important;width:16px;height:16px;content:none; display: inline-block !important;color: transparent !important; letter-spacing: -1ex;font-size:xx-small}
#mal\_cs\_links div:first-of-type:after {content: '\a0'}
#mal\_cs\_links div:first-of-type a:first-of-type {background-position: 0px 0px}
#mal\_cs\_links div:first-of-type a:last-of-type {background-position: -16px 0px}
#mal\_cs\_links div:last-of-type a:first-of-type {background-position:-32px 0px}
#mal\_cs\_links div:last-of-type a:last-of-type {background-position:-48px 0px}
#mal\_cs\_otherlinks strong{
  width: 25% !important;
  height: 0 !important;
  padding-bottom: 20px !important;
  padding-top: 27px !important;
left:28%;
margin-left: 130px;
top: -5px;
position: absolute;
border-right-color: rgba(0,0,0,0.8) !important;}
#mal\_cs\_otherlinks div:last-of-type {float:right;padding-right:150px;
margin-top: 19px;}
#mal\_cs\_otherlinks div:first-of-type {float:left}
#mal\_cs\_powered img {display:none}
#searchBox {margin-top: 15px !important; width: 135px !important}
#mal\_control\_strip img {
margin-top: 15px !important;
}

#mal\_cs\_links a {background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAoCBiQOVmPLIHlGVcbBFMHY) !important;}


form[action*="logout"] {
display: inline;
}

body{
/* Set up a background image: */
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwOgsz6617gwtx3smSKqTnRg);

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}


/* Notes hover - START */
td.td1 div div{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 442px;
left: 80px;
opacity: 0;
width: 200px !important;;
		z-index: 10;
}

tr:hover td.td1 div div{
background-color: red !important;
display: block !important;
opacity: 1;
}

td.td2 div div{
background-color: rgba(20, 30, 255, 0.85) !important;
position: fixed;
top: 442px;
left: 80px;
opacity: 0;
width: 200px !important;
	z-index: 10;
}

tr:hover td.td2 div div{
background-color: purple !important;
display: block !important;
	opacity: 1;
}




td.td1 div small:nth-child(2) {display: none !important;}

td.td2 div small:nth-child(2) {display: none !important;}



td[class^='td']:nth-of-type(6) {
background-color: green !important;
height: 0 !important;
	padding:0 !important;
top: 82px;
left: 320px;
width: 100px !important;
		opacity: 0;
	position: fixed;
border: none !important;
}



/* Tag hover */
tr:hover td[class^='td']:nth-of-type(6){
background-color: green !important;
	opacity: 1;
		padding:0 !important;

}


/* Tag edit */
td:nth-of-type(6) small {
display: none !important;
}