Winter 2015 Minimalist List Design contest entries (voting closed)

@import url(http://fonts.googleapis.com/css?family=Lovers+Quarrel);

/*
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 are 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(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Images-/bg.png);
background-attachment: fixed;
background-position: left top;
background-size: cover;
}

/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations).
*/

.header_title {
background-color:transparent;
color:#000000;
font-family:Lovers Quarrel;
font-size:60px;
}

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

.table_header {
background-color:trasperant;
backgroud-size: 40px;
height:20px;
}

/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:#000000;
font-family:Vijaya;
font-size:18px;
}

/*
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:#383737;
font-family:Aharoni;
}



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

#list_surround { width:660px; }


/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.

You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center.

So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%".
If you want it to start from the top and left, use "top left"
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...

Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: center 50%;}

#list_surround {
position: absolute !important;
left: 285px !important;
}

*/BACKGROUND POSITION/*
*/
#list_surround {
position: absolute !important;
margin: auto !important;
right: 0px !important;
left: 0px !important;}
*

/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/


body {
font-weight: light;
background-repeat: repeat;
background-color: black;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:#383737;
text-decoration:none;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png);
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:black;
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.status_selected {
background-color:transparent;
padding:2px;
color:##a6a4a3;
text-decoration: blink;
}
.status_not_selected {
background-color:transparent;
padding:2px;
color:#383737;
}
.status_selected a{
color:#a6a4a3;
}
.status_not_selected a{
color:#383737;
}
.thickbox {
color:#FF9933;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:60px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:20px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

/*
LIST BACKGROUND COLOR AND OPACITY
Go to this page for instructions on customizing this part,
under: Changing the list background color + opacity of the list background
http://myanimelist.net/forum/?topicid=440525

.category_totals, .td1, .td2, #grand_totals, #copyright {
background: rgba(153, 51, 0, 0.3) !important;
}
*/


.category_totals, .td1, .td2, #grand_totals, #copyright {
background: rgba(153, 51, 0, 0) !important;
}

/* top lane
#mal_control_strip
{
background-image: url(http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css) !important;
} *
*/
.category_totals {
background-color:#FFFFFF;
color:#FFFFFF;
font-family:Times New Roman;
font-size:0px;
opacity: 0;
}

#grand_totals {
background-color:#FFFFFF;
color:#FFFFFF;
font-family:Times New Roman;
font-size:0px;
opacity: 0;
}

#copyright {
background-color:#FFFFFF;
color:#FFFFFF;
font-family:Times New Roman;
font-size:0px;
opacity: 0;
}
*
.header_title, .category_totals, #grand_totals, #copyright, {
opacity: 0;}

/****************************/
/* Aqua Highlight on Hover */
/****************************/
tr:hover [class^=td] {
background-color: rgba(184, 182, 181, 0.3) !important;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}
Read more at http://myanimelist.net/forum/?topicid=565111#dRsYhokOCZBBizCk.99

/*__________________________________________________*/

/*
COLOR OF THE ICONS
Change the color, and adjust the opacity for brighter color.
Remove the display: none to match the selected icon to the other icons.
*/
#mal_cs_listinfo:before, #mal_cs_links:before,
#mal_cs_otherlinks:before, #mal_cs_powered:before {
background: transparent;
opacity: .9;

}

/*
BORDER OF ICONS
If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it.

*/
#mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before,
#mal_cs_otherlinks:before, #mal_cs_powered:before {
border-color: ;
border-style: ;
border-width: ;
height: 32px !important;
}

/*
BUTTONS COLOR AND BORDER
Buttons within the hover menus, not the icons themselves.
Second code is for button color on hover.
*/
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{
background-color: rgba(64, 60, 90, 0.6) !important;
border-color: transparent;
border-style: solid !important;
border-width: 1px !important;
}


#mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover {
background-color: #403C5A !important;
}



/*
COLOR OF HOVER MENUS AND SELECTED ICONS
Remove display none from the second code to match the colors of the selected icon to the icons above.
*/
#mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div,
#mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a {
background-color: rgba(255, 255, 255, 0.6) !important;
}

#mal_cs_listinfo:hover:before, #mal_cs_links:hover:before,
#mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before,
#mal_cs_listinfo:hover:after, #mal_cs_links:hover:after,
#mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after {
display: none;
background-color: ;
opacity: .2;
}

/*
COLOR OF USERNAME (for visitors)
You don't see this username on the menus when you're logged in, log out to see it.
*/
#mal_cs_otherlinks strong a {
color: #333333 !important;
}

#mal_cs_otherlinks strong a:hover {
color: blue !important;
background-color: transparent !important;
}

/*
POSITION OF TOP BAR
Change to absolute if you want it to not scroll with the page.
*/
#mal_control_strip
{
position: fixed !important;
background-color: transparent !important;
background-image: url(none) !important;
}




/*
OTHER CODES
If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own.
*/

#mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered {
-moz-box-sizing: border-box;
transition: all 0.4s ease 0s;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
position: absolute;
right: 4px;
text-align: center;
top: 4px;
width: 150px;
z-index: 10;
}
#mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover {
height: 200px !important;
padding-top: 32px;
width: 150px;
}
#mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd {
transition: opacity 0.4s ease-in-out 0s;
border-radius: 3px 0 0 0;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0;
}
#mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd {
opacity: 1;
}
#mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) {
border-radius: 0 0 3px 3px;
padding: 4px 0 8px;
}
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a {
background-color: rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
font: 13px/17px arial,sans-serif;
margin: 4px 12px 0;
padding: 3px 0;
text-decoration: none;
}
#mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) {
margin-top: 0;
}

#mal_cs_listinfo strong a strong {
font-weight: normal;
}
#mal_cs_otherlinks strong {
color: #333333;
display: block;
font: bold 13px/17px arial,sans-serif !important;
padding: 0 4px 4px;
text-shadow: 0 1px 1px #FFFFFF;
}
#mal_cs_otherlinks strong a {
background: none repeat scroll 0 0 transparent !important;
border-color: transparent !important;
border-radius: 0 0 0 0;
color: #333333;
display: inline;
font: bold 13px/17px arial,sans-serif !important;
margin: 0;
padding: 0;
text-shadow: 0 1px 1px #FFFFFF;
}
#mal_cs_powered a {
border-radius: 3px 0 0 0 !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0 !important;
}
#mal_cs_powered:hover a {
opacity: 1;
}
#mal_cs_powered a img {
background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
height: 0;
margin: 0 12px;
padding: 23px 0 0 126px;
width: 0;
}
#mal_cs_powered a img:hover {
background-color: #403C5A;
}
#mal_cs_powered #search {
border-radius: 0 0 3px 3px;
padding: 8px;
position: relative;
}
#mal_cs_powered #search #searchBox {
-moz-box-sizing: border-box;
border-color: #BCBCBC #D6D6D6 #D6D6D6;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #333333;
display: inline-block;
font-family: arial,sans-serif;
font-size: 13px;
height: 28px;
padding-left: 6px;
padding-right: 24px;
vertical-align: top;
width: 100%;
}
#mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus {
border-color: #ACACAC #C6C6C6 #C6C6C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
#mal_cs_powered #search #searchListButton {
background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent;
border-radius: 3px 3px 3px 3px;
height: 0;
margin: 0;
padding: 16px 0 0 16px;
position: absolute;
right: 12px;
top: 14px;
width: 0;
}
#mal_cs_listinfo {
background-image: url("http://i.imgur.com/UXZxrWI.png");
right: 106px;
}
#mal_cs_listinfo:hover {
background-image: url("http://i.imgur.com/VcVVnod.png");
}
#mal_cs_links {
background-image: url("http://i.imgur.com/LpXWTzt.png");
right: 72px;
z-index: 9;
}
#mal_cs_links:hover {
background-image: url("http://i.imgur.com/oPfKrOl.png");
}
#mal_cs_otherlinks {
background-image: url("http://i.imgur.com/ogmX9qC.png");
right: 38px;
z-index: 8;
}
#mal_cs_otherlinks:hover {
background-image: url("http://i.imgur.com/EEGHkbF.png");
}
#mal_cs_powered {
background-image: url("http://i.imgur.com/ct4BVP5.png");
right: 4px !important;
z-index: 7;
}
#mal_cs_powered:hover {
background-image: url("http://i.imgur.com/TUUWtaj.png");
}
td#mal_cs_pic a img {
display: none;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}

#mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered {
padding: 32px 0 0 !important;
}

#mal_cs_listinfo:before,
#mal_cs_links:before,
#mal_cs_otherlinks:before,
#mal_cs_powered:before {
z-index: 10 !important;
content: "";
right: 0 !important;
top: 0 !important;
width: 32px !important;
position: absolute !important;
border-radius: 4px;
}

#mal_cs_listinfo:after{
background-image: url(http://i.imgur.com/856wzPZ.png);
}
#mal_cs_links:after{
background-image: url(http://i.imgur.com/rwvRyux.png);
}
#mal_cs_otherlinks:after{
background-image: url(http://i.imgur.com/fbWr1K4.png);
}
#mal_cs_powered:after{
background-image: url(http://i.imgur.com/fKvpt1F.png);
}

#mal_cs_listinfo:after,
#mal_cs_links:after,
#mal_cs_otherlinks:after,
#mal_cs_powered:after {
z-index: 10 !important;
content: "";
right: 0 !important;
top: 0 !important;
width: 32px !important;
height: 32px !important;
position: absolute !important;
}

#searchBox {
width: 128px !important;
margin-left: 1px;
}

#mal_cs_powered #search #searchListButton {
right: 15px !important;
top: 12px !important;
}

/* BORDERS */
#inlineContent {
position: fixed;
display: block !important;
left: 285;
top: 0;
}

#inlineContent:before, #inlineContent:after {
position: fixed;
display: block;
content: '';
width: 29px;
height: 100%;
}

#inlineContent:before {
margin-left: -30px;
background: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList//Images-/left_bg.png) center center repeat-y;
}

#inlineContent:after {
margin-left: 660px;
background: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Images-/right_bg.png) center center repeat-y;
}