[CSS] Hahaido's tips to stylize your layout

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle:before
{
pointer-events: none;
position: absolute;
visibility: hidden;
content: ' ';
/* Comments position */
margin-top: 0px;
margin-left: 114%;
width: 160%; /* Comments size */
padding: .2em;
font-size: 14px !important;

border: solid 1px rgba(137,130,48,.2); /* Border around comments */

/* The form of comments border */
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#list_surround table:nth-of-type(n+4) tbody:hover .animetitle span
{
position: relative;
display: table !important;
/* titles size */
width: 110%;
height: 25px;
/* titles position */
top: 5%;
left: -5%;
padding: 2px;
color: #FFFFFF !important; /* titles color */

border: solid 1px rgba(137,130,48,.2); /* Border around titles */
/* The form of titles border */
border-radius: 5px;
/* for cross-browser support */
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

/* you might to add some effects to give your titles unusual look */

transform: rotate(-3deg); /* change the value in deg from -360 to 360 to manipulate the angle of rotation */
/* for cross-browser support */
-o-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);

/* add a gradient background */
background:
linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(0,0,0,.7) 100%);
/*
0% and 100% are points where gradient is starts and ends
255,255,255 or 0,0,0 are colors
.7 (0.7) is opacity level (change it from 0 to 1)
*/
/* for cross-browser support */
background:
-moz-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(0,0,0,.7) 100%);
background:
-webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,.7)),
color-stop(100%,rgba(0,0,0,.7)));
}

.animetitle
{
/* your code */

background-size: 0px 0px;

/* your code */
}

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle
{
/* your code */

position: relative: !important;
display: block !important;
background-repeat: no-repeat !important;
background-size: 225px 320px !important; /* determines a cover size */
margin-right: 100px !important; /* determines a cover aligning */

/* use for center align*/
margin-left: auto !important;
margin-right: auto !important;
/* use for center align*/

/* your code */
}

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle + small {
position: relative !important;
display: block !important;
margin-top: -334px !important; /* 'airing' position */
}

@import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css";
@import "http://dl.dropbox.com/u/78340470/animetitle.css";
@import url(http://fonts.googleapis.com/css?family=Life+Savers);
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);
@import "https://dl.dropbox.com/u/101477602/myanimelist.css";
@import "https://dl.dropbox.com/u/101477602/code.css";

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle + small {
position: relative !important;
display: block !important;
margin-top: -334px !important; /* 'airing' position */
}

@import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css";
@import url(http://fonts.googleapis.com/css?family=Life+Savers);
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);
@import url('http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/MM-Rosiie_animetitle.css');
@import url('http://dl.dropbox.com/u/101477602/Style%2079399/Airing.css');

body {
background-color: black;
background-image: url('http://dl.dropbox.com/u/101477602/Style%2079399/YKWallpaper.jpg');
background-position: right top;
background-attachment: fixed;
background-repeat: no-repeat;
font-weight: light;
}

.header_title {
background-color:transparent;
color:white;
font-family:Life Savers;
font-size:49px;
}

.table_header {
background-color:transparent;
color:black;
}

.animetitle, .animetitle:visited {
color:white;
font-family:Verdana;
font-size:12px;
}

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Raleway;
}

.td1, .td2, .category_totals, .table_header, #grand_totals, #copyright {
padding-left:7px;
padding-right:7px;
}

#list_surround {
position: absolute !important;
margin: auto;
right: 100px !important;
padding-top:50px;
width:700px;
}

a {
text-decoration:none;
}

a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}

.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png);
border-width:0;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {
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;
font-family:Light Savers;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:transparent;
padding:2px;
color:white;
}
.status_selected a{
color:white;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:white;
font-family:Light Savers;
font-size:12px;
}
.header_title {
height:55px;
padding:3px;
}
.table_header {
border-width:0;
font-weight:bold;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}
body {
background-size: cover;
}

#inlineContent {
background-image: url(http://i39.tinypic.com/2exr03p.png);
bottom: 0;
display: inline !important;
height: 75px;
margin-bottom: 0;
position: fixed;
right: 0px;
width: 100%;
z-index: 10 !important;
}

.td1, .td2, .table_header {
border-color: white;
border-style:dashed;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-top-width: 0 !important;
}

.category_totals{
border-color: white;
border-style: solid;
border-width: 0 1px 1px;
}

#mal_control_strip{z-index:1000 !important}

.td1, .td2 {
transition: line-height .5s ease .1s;
-o-transition: line-height .5s ease .1s;
-moz-transition: line-height .5s ease .1s;
-webkit-transition: line-height .7s ease .1s;
}

.td1, .td2 {
line-height: 30px;
}

tr:hover .td1, tr:hover .td2 {
line-height: 350px;
}

/* AIRING */
.animetitle + small {
position: relative;
line-height: 1px !important;
}

/* Disables History, Forum, Export, Log in, Create an Anime List, Learn more. You can't enable links */
#mal_cs_otherlinks { display: none; }
/* Disables History, Forum, Export, Log in, Create an Anime List, Learn more. You can enable some links */
#mal_cs_otherlinks { visibility: hidden; }
/* To enable some links from disabled list */
#mal_cs_otherlinks div a[href*="export"] { visibility: visible; } /* Enabling Export link */

#mal_control_strip
/* Horizontally centered */
{
left: 50% !important;
margin-left: -100px !important; /* Must be 1/2 of the menu width */
}
/* Vertically centered */
{
top: 50% !important;
margin-top: -100px !important; /* Must be 1/2 of the menu height */
}

#mal_cs_pic img { display: none; } /* Disables default MyAnimeList logo */

/* Custom logo */
#mal_cs_pic a {
position: absolute !important;
display: block;
/* Logo position */
top: 20px;
left: 40px;
/* Logo size */
width: 64px;
height: 64px;
/* Logo */
background: url('link_to_image') !important;
}

#searchListButton {
/* Button size */
width: 40px;
height: 40px;
/* Button image */
background: url(link_to_image) !important;
}

#searchBox {
position: fixed; /* Must be the same as at #mal_control_strip */
display: block !important;
/* Search box position */
left: 28px !important;
top: 162px !important;
/* Search box size */
width: 100px !important;
height: 62px;
/* Search box font settings */
font-family: 'font_name' !important; /* Your custom font */
color: #FFFFFF; /* Font color*/
font-weight: bold; /* Font weight */
font-size: 16px !important; /* Font size */
/* Removes search box frame */
border-width: 0 !impotant;
/* or */
/* Custom search box frame */
border: solid 4px #a5a5a5;
background: transparent; /* Transparent search box; rgba(255, 255, 255, 1) - custom colored search box; url(link_to_image) - to display you own picture as a background */
}

/* Image container */
#inlineContent {
position: fixed;
display: block !important;
/* Image container position */
left: 0;
top: 0;
/* Image container size */
width: 100%;
height: 256px;
overflow: hidden;
z-index: -1;
}

/* Image */
#inlineContent:before {
pointer-events: none;
position: absolute;
content: '';
/* Image size */
width: 300%;
height: 100%;
background-image: url('path_to_image');
/* linear - timing function, the same as for transition; 20s - duration, increase or decrease to speed up or slow down animation playing */
animation: name 20s linear infinite;
-o-animation: name 20s linear infinite;
-moz-animation: name 20s linear infinite;
-webkit-animation: name 20s linear infinite;
}

@keyframes name;
{
0% { left: 0; }
100% { left: -200%; }
}

/* For different browsers support */
@-o-keyframes name;
{
0% { left: 0; }
100% { left: -200%; }
}

@-ms-keyframes name;
{
0% { left: 0; }
100% { left: -200%; }
}

@-moz-keyframes name;
{
0% { left: 0; }
100% { left: -200%; }
}

@-webkit-keyframes name;
{
0% { left: 0; }
100% { left: -200%; }
}

.name;
{
animation-name: name;
/* For different browsers support */
-o-animation-name: name;
-ms-animation-name: name;
-moz-animation-name: name;
-webkit-animation-name: name;
}

/* Image */
#inlineContent:before {
pointer-events: none;
position: absolute;
content: '';
/* Image position */
margin-left: 0;
margin-top: -100%;
/* Image size */
width: 300%;
height: 300%;
background-image: url('path_to_image');
background-repeat: repeat;
/* linear - timing function, the same as for transition; 20s - duration, increase or decrease to speed up or slow down animation playing */
animation: name 20s linear infinite;
-o-animation: name 20s linear infinite;
-moz-animation: name 20s linear infinite;
-webkit-animation: name 20s linear infinite;
}

@keyframes name;
{
0% { left: 0; top: 0; }
100% { left: -200%; top: 200%; }
}

/* For different browsers support */
@-o-keyframes name;
{
0% { left: 0; top: 0; }
100% { left: -200%; top: 200%; }
}

@-ms-keyframes name;
{
0% { left: 0; top: 0; }
100% { left: -200%; top: 200%; }
}

@-moz-keyframes name;
{
0% { left: 0; top: 0; }
100% { left: -200%; top: 200%; }
}

@-webkit-keyframes name;
{
0% { left: 0; top: 0; }
100% { left: -200%; top: 200%; }
}

.name;
{
animation-name: name;
/* For different browsers support */
-o-animation-name: name;
-ms-animation-name: name;
-moz-animation-name: name;
-webkit-animation-name: name;
}

.status_not_selected a, .status_selected a {
position: absolute;
display: block;
/* Image position */
margin-top: 530px;
margin-left: -25px;
/* Image size*/
height: 72px;
width: 72px;
/* Disabling titles */
content: none !important;
color: transparent !important;
}

/* Default state image */
.status_not_selected a[href*="status=category_code"]
/* Image on mouse hover */
.status_not_selected a[href*="status=category_code"]:hover
/* Selected state image */
.status_selected a[href*="status=category_code"]
{
background-image: url('path_to_image');
}

.status_not_selected a, .status_selected a {
/* Parameters: style, width, color */
border: solid 2px #FFFFFF;
}

.status_not_selected a, .status_selected a {
/* Corners order: top left, top right, bottom right, bottom left */
border-radius: 0 0 0 0;
/* For compatibility */
-o-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
}

.status_not_selected a[href*="status=category_code"],
.status_selected a[href*="status=category_code"] {
visibility: hidden;
display: block;
letter-spacing: -12px;
}

.status_not_selected a[href*="status=category_code"]:before,
.status_selected a[href*="status=category_code"]:before {
visibility: visible;
content: 'your_text';
letter-spacing: 0 !important;
}

/* Custom header titles */
/* Disabling original titles */
.header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw {
visibility: hidden;
letter-spacing: -12px;
}

.header_cw span:before .header_completed span:before, .header_onhold span:before, .header_dropped span:before, .header_ptw span:before {
visibility: visible;
letter-spacing: 0 !important;
}

.header_cw span:before { content: 'your_text'; }
.header_completed span:before { content: 'your_text'; }
.header_onhold span:before { content: 'your_text'; }
.header_dropped span:before { content: 'your_text'; }
.header_ptw span:before{ content: 'your_text'; }