/*fonts*/
@import url(http://fonts.googleapis.com/css?family=Aladin);
/*MenuAddons*/
@import url(https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/CategoryMenu.css);
@import url(https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/TopMenu.css);
/*Covers*/
@import url(https://dl.dropboxusercontent.com/u/65414577/covers.css);

/* Custom cursor */
* { cursor: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/cursor.png') 3 3, auto; }


/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!

If you're not seeing a background, make sure you have copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/
body {
background-image: url(https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/valkyria_chronicles-wallpaper.jpg);
background-size: cover;
background-attachment: fixed;
}



/*HEADERS*/

.header_title {
background-color: transparent;
color:#413837;
font-family:'Aladin', cursive;
font-size:25px;
height: 48px;
margin-left: 20px;
margin-top: 10px;
}
.header_completed, .header_cw, .header_onhold, .header_dropped, .header_ptw{
	background-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/header.png');
	background-repeat: no-repeat;
	height: 48px;
	margin-bottom: -18px;
}



/*
SUB-HEADERS
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header {
display: none;
}



/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list
*/

.animetitle, .animetitle:visited {
color:#413837;
font-family: 'Aladin', cursive;
font-size:20px;
}



/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: #413837;
font-family:'Aladin', cursive;
}



/*
LIST WIDTH
Use this to increase the width of your list!
*/


#list_surround {
width: 600px;
}

/* ROW*/
tr [class^="td"]{
background-image: url("https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/line.png");
background-repeat: repeat-y;

background-position: center top; 
line-height: 30px;
}

tr [class^="td"]:nth-of-type(1){
vertical-align: top;
}
tr:hover [class^=td] {
background-color: rgba(30, 30, 30, 0.8) !important;
background-image: url("https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/line_hover.png");
}

/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 5px;
position: absolute;
}


/*
REPOSITION MAIN BACKGROUND
*/

body {
background-position: top right;}


/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing!
*/


body {
font-weight: light;
background-repeat: no-repeat;
background-color: #FBFDE8;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
#grand_totals
{
border-width:0;
line-height: 30px;
padding:2px;
font-size: 15px;
text-align: center;
background: url("https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/line.png");
border-radius: 8px 8px 8px 8px;
}
#grand_totals{
border-color: transparent;
border-style: solid;
-webkit-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Safari 3.1-5 */
-o-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Opera 11-12.1 */
border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round;
border-width: 30px !important;
border-image-outset: 2px; 
border-radius: 8px;
}
#copyright {
font-size: 15px;
line-height: 30px;
background: url("https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/line.png");
text-align: center;
border-color: transparent;
border-style: solid;
-webkit-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Safari 3.1-5 */
-o-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Opera 11-12.1 */
border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round;
border-width: 30px !important;
border-image-outset: 2px; 
border-radius: 8px ;
}
.td1,
.td2{
height: 30px;
}
.status_selected {
background-color:transparent;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:transparent;
padding:2px;
color:white;
}
#copyright:after {
font-size: 15px;
content: "Custom CSS by Redlord307. Google 'Shishio's Custom Lists' for more designs or info.";
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

/*
Sides of list table (anime/manga entries)
*/
.td1:first-of-type, .td2:first-of-type {
border-color: transparent;
border-style: solid;
-webkit-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Safari 3.1-5 */
-o-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Opera 11-12.1 */
border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round;
border-width: 0 0 0 30px !important;
border-image-outset: 2px;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
border-color: transparent;
border-style: solid;
-webkit-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Safari 3.1-5 */
-o-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Opera 11-12.1 */
border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round;
border-width: 0 30px 0 0 !important;
border-image-outset: 2px;
}


/*
Bottom and bottom sides
*/
.category_totals {
border-color: transparent;
border-style: solid;
-webkit-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Safari 3.1-5 */
-o-border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round; /* Opera 11-12.1 */
border-image: url('https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/border.png') 50 round;
border-width: 0 30px 30px !important;
border-image-outset: 2px;
}


#inlineContent {
    pointer-events: none;
    position: fixed !important;
    display: block !important;
    left: 629px !important;
    top: 66px !important;
    width: 600px !important;
    height: 400px !important;
    background: url("https://dc82436e320be40b3f9870ead82c15ce547c0920.googledrive.com/host/0BytwZmpVJ_jxMFFlcEhmVmZJWWc/Valkyria%20Chronicles%20style/clipBoard.png") no-repeat scroll 0% 0% transparent;
    z-index: 5;
}

/*
CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)
Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. 
*/

#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) {
    display: tab\le-cell;
}

#list_surround small a:last-of-type {
    display: none !important;
}

.animetitle + small {
    visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="], 
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
    visibility: visible !important;
    margin-right: 10px
}

.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
    visibility: visible !important;
}

.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
    text-decoration: underline;
}

/* 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: 686px;
top: 135px;
height: 176px;
width: 132px;
background-position: center 50% !important;
background-repeat: no-repeat !important;
display: block !important;
position: fixed;
visibility: hidden;
opacity: 0;
z-index: 6
}

/* 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;
content: ""
color: white;
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: 320px;
left: 737px;
background-color: transparent !important;
font-size: 15px;
line-height: 18px;
height: 81px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}

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


/* OTHER SETTINGS */
:hover + .hide {
visibility: visible;
opacity: 0.7;
}

/* REMOVE TABLE HEADER
Deletes the table 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;
}

/*Type Hover*/
td[class^='td']:nth-of-type(4) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 138px;
left: 740px;
background-color: transparent !important;
font-size: 18px;
height: 86px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}

/* TYPE TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(4) a {
color: color: #413837 !important;
}

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

/*Rating Hover*/
td[class^='td']:nth-of-type(7) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 138px;
left: 930px;
background-color: transparent !important;
font-size: 18px;
height: 86px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}

/* TYPE TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(7) a {
color: color: #413837 !important;
}

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


/*Start Date Hover*/
td[class^='td']:nth-of-type(8) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 189px;
left: 925px;
background-color: transparent !important;
font-size: 18px;
height: 86px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}

/* TYPE TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(8) a {
color: color: #413837 !important;
}

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

/*Finished Date Hover*/
td[class^='td']:nth-of-type(9) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 228px;
left: 925px;
background-color: transparent !important;
font-size: 18px;
height: 86px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}

/* TYPE TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(9) a {
color: color: #413837 !important;
}

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

/*Score Hover*/
td[class^='td']:nth-of-type(3) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 276px;
left: 740px;
background-color: transparent !important;
font-size: 30px;
height: 86px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}

/* TYPE TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(3) a {
color: color: #413837 !important;
}

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

/*Episodes Hover*/
td[class^='td']:nth-of-type(5) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 278px;
left: 923px;
background-color: transparent !important;
font-size: 20px;
height: 86px;
width: 418px;
/*padding: 10px 10px 0px 24px;*/
color: #413837;
z-index: 6;
}
a[title^="Click to increase your watched ep number by one"]{
	display: none
}
/* TYPE TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(5) a {
color: color: #413837 !important;
}

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


/* OTHER SETTINGS */
 tr:hover td[class^='td']:nth-of-type(3), tr:hover td[class^='td']:nth-of-type(4), tr:hover td[class^='td']:nth-of-type(5), tr:hover td[class^='td']:nth-of-type(6), tr:hover td[class^='td']:nth-of-type(7), tr:hover td[class^='td']:nth-of-type(8), tr:hover td[class^='td']:nth-of-type(9){
visibility: visible;
opacity: 1;
}
 tr td[class^='td']:nth-of-type(3), tr td[class^='td']:nth-of-type(4), tr td[class^='td']:nth-of-type(5), tr td[class^='td']:nth-of-type(6), tr td[class^='td']:nth-of-type(7), tr td[class^='td']:nth-of-type(8), tr td[class^='td']:nth-of-type(9){
 background-image: 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: 520px !important;
}
}