/* This is the MATH part of the layout. Don't touch it unless you know what you're doing */
@import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css);
/* Remove the following line if you don't want to use my top bar redux */
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);

body{
/* Set up a background image: */
        background-image: url(http://i.imgur.com/ph0ES5L.jpg);
        background-attachment:fixed;
        background-clip:border-box;
        background-color:transparent;
        background-repeat:no-repeat no-repeat;
        background-size:cover;
        font-family:calibri;

/* 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. Default: point to Okabe's face.
 */
        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;
}

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

/* Background color for hovered row in 'the rest' section
 * I made it more opaque and a bit gray
 * You may remove the following 3 lines if you don't want this effect.
 */
tr:hover [class^='td']{
        background-color: rgba(45,45,45,0.9) !important;
}

/* 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:
 * http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png
 * or you can make one yourself. It's not that difficult.
*/
.header_title{
        background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png);
}

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

/* 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('http://i060.radikal.ru/1203/28/2c26e350723d.png');
}

/* upd 11th March 2012 */