/**
* Windows 8 Style MyAnimeList
* Created by Ricky K
* Version 1.2

Colours:
# 0072C6 - blue
# 5E34BA - purple
# 079B00 - green
# AB234B - red
# DF5628 - orange
# 009CAD - torquoise

*/

body {
	font-family: "Segoe UI Web Semibold", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
	font-size: 15px;
	color: #424242;
}


a:visited, a:link, a:active {
	text-decoration: none;
}


#list_surround {
	width: 1008px;
	margin-left: auto;
	margin-right: auto;
}

/* The Currently Watching, Completed, etc buttons on the top to filter */
.status_not_selected, .status_selected {
	background-color: #0072C6;
	height: 80px;
	line-height: 80px;
	border-right: 8px solid white!important;
}

.status_not_selected a:visited, .status_not_selected a:link,.status_not_selected a:active, 
.status_selected a:visited, .status_selected a:link, .status_selected a:active {
	color: white;
	display: block; /* Makes the entire block clickable rather than just words */
}

.status_not_selected a:visited, .status_not_selected a:link,.status_not_selected a:active, 
.status_selected a:visited, .status_selected a:link, .status_selected a:active,
.status_not_selected, .status_selected {
	width: 160px;
}


/* The Watching, Completed, etc title that appears above the lists (a div)
use .header_cw, .header_completed, etc for the table that it is in */
.header_title {
	font-size: 24px;
}





/* All the links that appear in the Anime Title, Score, Type, Progress, etc row */
table .table_header,
table .table_header .table_headerLink,
table .table_header .table_headerLink:link,
table .table_header .table_headerLink:visited,
table .table_header .table_headerLink:active {
	color: white;
}

table .table_header b {
	font-weight: normal;
}


/* Background colour for the top tile, the list header, and the MORE */
.header_cw  + table .table_header,
#list_surround br:first-child + table tr td:nth-child(1),
.header_cw ~ .hide  {
	background-color: #0072C6; /* blue */
}

#list_surround br:first-child + table tr td:nth-child(1):hover {
	background-color: #0089C8;
	background-color: #0061C8;
}

/* Link colours
this block make mouseover slow */
.header_cw *, 
.header_cw ~ table a:visited, 
.header_cw ~ table a:link, 
.header_cw ~ table a:active {
	color: #0072C6;
}


.header_completed  + table .table_header,
#list_surround br:first-child + table tr td:nth-child(2),
.header_completed ~ .hide {
	background-color: #5E34BA;
}

#list_surround br:first-child + table tr td:nth-child(2):hover {
	background-color: #4D34BB;
	background-color: #5530A6;
}

.header_completed *, 
.header_completed ~ table a:visited, 
.header_completed ~ table a:link, 
.header_completed ~ table a:active {
	color: #5E34BA;
}




.header_onhold  + table .table_header,
#list_surround br:first-child + table tr td:nth-child(3),
.header_onhold ~ .hide  {
	background-color: #DF5628;
}

#list_surround br:first-child + table tr td:nth-child(3):hover {
	background-color: #D15025;
}

.header_onhold *, 
.header_onhold ~ table a:visited, 
.header_onhold ~ table a:link, 
.header_onhold ~ table a:active {
	color: #DF5628;
}





.header_dropped  + table .table_header,
#list_surround br:first-child + table tr td:nth-child(4),
.header_dropped ~ .hide  {
	background-color: #009CAD;
}

#list_surround br:first-child + table tr td:nth-child(4):hover {
	background-color: #008BAE;
}

.header_dropped *, 
.header_dropped ~ table a:visited, 
.header_dropped ~ table a:link, 
.header_dropped ~ table a:active {
	color: #009CAD;
}


.header_ptw  + table .table_header,
#list_surround br:first-child + table tr td:nth-child(5),
.header_ptw ~ .hide {
	background-color: #AB234B;
}

#list_surround br:first-child + table tr td:nth-child(5):hover {
	background-color: #901C3F;
}

.header_ptw *, 
.header_ptw ~ table a:visited, 
.header_ptw ~ table a:link, 
.header_ptw ~ table a:active {
	color: #AB234B;
}


#list_surround br:first-child + table tr td:nth-child(6) {
	background-color: #079B00;
}

#list_surround br:first-child + table tr td:nth-child(6):hover {
	background-color: #0A8104;
}







/* The cells of the Anime Title, Score, Type, etc */
.table_header {
	/* background-color: #0072C6; */
	padding: 8px 0;
}

.table_headerLink, .table_headerLink:visited, .table_headerLink:link, 
.table_headerLink:active, .table_header strong {
	text-decoration: none;
	font-weight: normal;
}


/* All the columns on EVEN numbered rows */
.td2 {
	background-color: #FAFAFA;
}

/* All the columns on the ODD numbered rows */ 
.td1 {
	/* background-color: white; */
}

/* All the cells in the lists */
.td2, .td1 {
	padding-bottom: 5px;
	padding-top: 5px;
}


/* The column for Anime Title (and the cell for Anime Title column title) */
tr .td1:nth-child(2), tr .td2:nth-child(2), .table_header:nth-child(2) {
	width: 500px;
}


/* The EDIT, MORE links */
tr .td1:nth-child(2) small a, tr .td2:nth-child(2) small a {
	display: inline-block;
	height: 20px;
	
	/* Disable highlighting text : http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
tr .td1:nth-child(2) small a::selection, tr .td2:nth-child(2) small a:selection {
	background: none;
}


/* The Edit, More links and the dash (-) in between them */
/* tr .td1:nth-child(2) small, tr .td2:nth-child(2) small, 
tr .td1:nth-child(2) small a, tr .td2:nth-child(2) small a {
	color: transparent;
} */
tr .td1 > div > small, tr .td2 > div > small, 
tr .td1 > div > small a:link, tr .td1 > div > small a:active, tr .td1 > div > small a:visited,
tr .td2 > div > small a:link, tr .td2 > div > small a:active, tr .td2 > div > small a:visited {
	color: transparent;
}

/* Edit button */
/* tr .td1:nth-child(2) small a:first-child, tr .td2:nth-child(2) small a:first-child {
	background: url(edit_20.png) no-repeat center center;
} */
tr .td1 > div > small a:first-child, tr .td2 > div > small a:first-child {
	background: url(edit_20.png) no-repeat center center;
}

/* More button */
/* tr .td1:nth-child(2) small a:last-child, tr .td2:nth-child(2) small a:last-child {
	background: url(more_20.png) no-repeat center center;
} */
tr .td1 > div > small a:last-child, tr .td2 > div > small a:last-child {
	background: url(more_20.png) no-repeat center center;
}



/* The cell containing all the information about the list at the bottom
eg. TV: 16, OVA: 1, Movies: 0, ..., Mean Score: 0 */
.category_totals {
	border-top: 10px solid transparent;
	border-left: 2px solid transparent;
	border-bottom: 10px solid transparent;
}


/* The MORE section that appears when you press the MORE link */
/* The div */
.hide {
	margin-left: 50px;
	padding: 15px;
	animation: 1s fadeIn;
	-webkit-animation: 1s fadeIn;
}

@keyframes fadeIn {
	from {opacity: 0.1;}
	to {opacity: 1;}
}
@-webkit-keyframes fadeIn {
	from {opacity: 0.1;}
	to {opacity: 1;}
}

.hide .borderRBL {
	background-color: transparent;
}

.hide, .borderRBL > div a {
	color: white;
}


.hide a:visited, .hide a:active, .hide a:link {
	color: white;
	text-decoration: underline;
}


/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/
#copyright {
	text-align: center;
	margin: 0 auto;
	background-color: #F2F2F2;
	padding: 20px;
	margin-bottom: 20px;
}


/* ============================= The top strip above everything */
#mal_control_strip {
	background-image: none!important;
	background-color: #005C7A!important;
	height: 80px!important;
	width: 1008px!important;
	margin-left: auto!important;
	margin-right: auto!important;
	margin-bottom: -12px!important;
	margin-top: 10px!important;
	border: 0!important;
}

/* Links on it */
#mal_control_strip a:link, #mal_control_strip a:visited, #mal_control_strip a:active {
	text-decoration: none!important;
}

/* The three sections (table cells) ie: username/logout, add to list/home/anime(manga)list, history, forum, export */
#mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic {
	border: 0!important;
	border-right: 8px solid white!important;
	width: 33.333% !important;
}

/* Profile/logout section */
#mal_cs_listinfo {
	background: url(listinfo_icon.png) no-repeat 260px center;
}

/* Add to list, Home, Animelist, Mangalist section */
#mal_cs_links {
	background: url(links_icon.png) no-repeat 260px center;
}

/* History, Forum, Export section */
#mal_cs_otherlinks {
	background: url(otherlinks_icon.png) no-repeat 260px center;
}

/* The divs in history, forum, export section */
#mal_cs_otherlinks > div {
	width: 243px!important;
}

/* The bold in the 3rd tile */
#mal_cs_otherlinks > div strong {
	font-weight: normal!important;
}

/* The Home and Manga List link */
#mal_cs_links div a:nth-child(2) {
	padding-left: 20px!important;
}

#mal_cs_pic + #mal_cs_otherlinks {
	background: url(otherlinks_icon.png) no-repeat 420px center;
}

/* Your username on the strip */
#mal_cs_listinfo div:first-child a {
	/* font-size: 22px!important; */
	font-size: 20px!important;
}

/* The bold on your username */
#mal_cs_listinfo div:first-child a strong {
	font-weight: normal!important;
}

/* All the divs in each of #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic, etc */
#mal_control_strip td > div {
	padding-left: 5px!important;
}


/* Search bar */
#mal_cs_powered {
	display: none!important;
}


/* The box that pops up when you press Edit */
#fancybox-wrap {
	background-color: #0072C6!important;
}

#fancybox-wrap, #fancybox-outer{
	animation: 0.5s fadeIn;
	-webkit-animation: 0.5s fadeIn;
}

.fancy-bg {
	background: none!important;
}

#fancybox-close {
	background: url(exit.png) top left no-repeat!important;
}