html,body
{
/*ie nedds these*/
margin:0px;
padding:0px;
font-size:24px;
font-family:Arial;
height:100%;
/*align center for IE*/
text-align:center;
background-color: #000000
}
/*
make text more visible
*/
div
{
text-align:left;
line-height:1.2em;
}
/*we use container DIV to center #content and #navigation in the page*/
#container
{
position:relative;
/*our page width*/
width:1000px;
/*center relative div*/
margin:auto auto;
/*make space for the header*/
/*margin-top:200px;*/
min-height:100%;
}
#trophy a {
font-family: serif;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: large;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: capitalize;
text-align: left;
text-indent: 0ex;
border:none;
cursor:pointer;}
#trophy a:hover {color:red;
font-family: serif;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: large;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: capitalize;
text-align: left;
text-indent: 0ex;}
#content
{
/* we substracted navigation width from page width and got 800px*/
position:absolute;
width:770px;
height:100%;
/* have a minimum height, this does not work in IE*/
min-height:300px;
/* use float to inverse position with navigation DIV*/
right:0;
top:230px;
/*color section for identification*/
background:#000000;
padding-bottom:35px;
}
#content a {color:#FFFF00;
text-decoration: none;
font-weight:bold;
border:none;}
#content a:hover {color:red;
text-decoration: none;
font-weight:bold;
border:none;}
/*
internet explorer min-height fix
can be removed if you don't need a minimum height
in this way your CSS will be clean from hacks
*/
* html #content
{
height:auto;
}
#navigation
{
/* set margin top to header height*/
position:absolute;
width:200px;
top:230px;
left:0;
height:100%;
text-align:left;
line-height:1.2em;
font-size:0.6em;
font-family:Verdana;
color: #999999;
padding-bottom:35px;
/* have a minimum height, this does not work in IEmin-height:300px;*/
/*color section for identification*/
background:#000000;
}
#navigation a {color:#FFFFFF;
text-decoration: none;
font-weight:bold;
font-size:0.9em;
}
#navigation a:hover {color:red;
text-decoration: none;
font-weight:bold;
font-size:0.9em;
}
#navigation li {
text-indent: -0.5em;
}
/*
internet explorer min-height fix
can be removed if you don't need a minimum height
in this way your CSS will be clean from hacks
*/
* html #navigation
{
height:100%; /* have a minimum height, this does not work in IEmin-height:300px;*/
}
#header
{
/* postion absolute so we can place our div anywhere on the page, in this case the first div*/
position:absolute;
/*our page width*/
width:1000px;
/*center absolute div*/
/*put div on the center of the page*/
left:50%;
/*move div 50% right to put it in the center of the page*/
margin-left:-500px;
/*pu the div fist on the page*/
top:0px;
height:200px;
/*color section for identification*/
background:#000000;
background-image: url("http://www.synunderground.com/layout/SynHeader.jpg");
}
.cssnav {
position:absolute;
left: 345px;top: 130px;
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
background: url(http://www.synunderground.com/layout/overbtn.jpg) repeat;
width: 70px;
height: 40px;
white-space: nowrap;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav a {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
width: 70px;
height: 40px;
display: block;
float: left;
color: #ffffff;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav a:hover {
color: black;
}
.cssnav img {width: 70px; height: 40px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 1px;top: 5px;
text-align: center;
width: 70px;
cursor: pointer;
}
.cssnav1 {
position:absolute;
left: 425px;top: 155px;
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
background: url(http://www.synunderground.com/layout/overbtn.jpg) repeat;
width: 70px;
height: 40px;
white-space: nowrap;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav1 a {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
width: 70px;
height: 40px;
display: block;
float: left;
color: #ffffff;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav1 a:hover {
color: black;
}
.cssnav1 img {width: 70px; height: 40px; border: 0; }
* html a:hover {visibility:visible}
.cssnav1 a:hover img{visibility:hidden}
.cssnav1 span {
position: absolute;
left: 1px;top: 5px;
text-align: center;
width: 70px;
cursor: pointer;
}
.cssnav2 {
position:absolute;
left: 505px;top: 155px;
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
background: url(http://www.synunderground.com/layout/overbtn.jpg) repeat;
width: 70px;
height: 40px;
white-space: nowrap;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav2 a {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
width: 70px;
height: 40px;
display: block;
float: left;
color: #ffffff;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav2 a:hover {
color: black;
}
.cssnav2 img {width: 70px; height: 40px; border: 0; }
* html a:hover {visibility:visible}
.cssnav2 a:hover img{visibility:hidden}
.cssnav2 span {
position: absolute;
left: 1px;top: 5px;
text-align: center;
width: 70px;
cursor: pointer;
}
.cssnav3 {
position:absolute;
left: 585px;top: 130px;
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
background: url(http://www.synunderground.com/layout/overbtn.jpg) repeat;
width: 70px;
height: 40px;
white-space: nowrap;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav3 a {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
width: 70px;
height: 40px;
display: block;
float: left;
color: #ffffff;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav3 a:hover {
color: black;
}
.cssnav3 img {width: 70px; height: 40px; border: 0; }
* html a:hover {visibility:visible}
.cssnav3 a:hover img{visibility:hidden}
.cssnav3 span {
position: absolute;
left: 1px;top: 5px;
text-align: center;
width: 70px;
cursor: pointer;
}
H1 {font-weight: normal;
text-align: center;
color: #FFFF00;
vertical-align: middle;
font-size:1.9em;
font-family: Comic Sans MS}
H3 {
text-align: left;
color: #FFFFFF;
font-size:0.7em;
font-family: ariel}
H2 {
text-align: left;
color: #FFFFFF;
font-size:0.6em;
font-family: times}
H4 {
text-align: left;
color: #990000;
font-size:0.4em;
font-family: times}
H6 {
text-align: left;
color: #cc0000;
font-size:1.0em;
font-family: Comic Sans MS}
td#padded {
padding-top:37px;
color: #3333CC;
font-weight:bold;
text-align:left;
text-indent: 0.2em;
font-family:ariel;
font-size:0.8em;
}
td#headtitle {
color: #FFFF00;
font-weight:normal;
text-align:center;
font-family:Verdana;
font-size:2.0em;
}
td#subheadtitle {
color: #FFFF00;
font-weight:normal;
text-align:center;
font-family:Verdana;
font-size:1.0em;
}
td#slogan {
color: #FFFF00;
font-weight:normal;
text-align:center;
font-family:verdana;
font-size:1.0em;
text-indent: -8.7em;
}
td#slogan2 {
color: #ff0000;
font-weight:normal;
text-align:center;
font-family:verdana;
font-size:0.5em;
text-indent: -12.7em;
}
td#slogan3 {
color: #ffff00;
font-weight:normal;
text-align:center;
font-family:verdana;
font-size:0.8em;
font-style:italic;
}
td#slogan5 {
color: #FFFF00;
font-weight:normal;
text-align:left;
font-family:times;
font-size:0.9em;
font-style:italic;
}
td#slogan5 a {
color: #cccccc;
font-weight:normal;
text-align:left;
font-family:times;
font-size:0.9em;
font-style:italic;
}
td#slogan5 a:hover {
color: white;
font-weight:normal;
text-align:left;
font-family:times;
font-size:0.9em;
font-style:italic;
}
td#topten {
color: #FFFF00;
font-weight:normal;
text-align:center;
font-family:verdana;
font-size:1.2em;
}
td#topfive {
padding-top:40px;
color: #3333CC;
font-weight:normal;
text-align:center;
font-family:verdana;
font-size:1.2em;
}
td#archtitle {
color: #FFFF00;
font-weight:normal;
text-align:center;
font-family:Verdana;
font-size:1.5em;
}
td#index {
padding-top:10px;
color: #990000;
font-weight:normal;
text-align:center;
font-family:ariel;
font-size:0.7em;
}
td#profile {
padding-top:0.4em;
vertical-align:top;
color: #FFFF00;
font-weight:normal;
text-align:left;
font-family:ariel;
font-size:0.5em;
line-height: 1.0em;
}
td#points {
padding-top:2px;
color: #990000;
font-weight:normal;
text-align:center;
font-family:ariel;
font-size:0.5em;
}
td#indexi {
color: #FFFF00;
font-weight:normal;
text-align:left;
font-family:ariel;
font-size:1.1em;
}
td#newdate {
color: #990000;
font-weight:bold;
text-align:left;
font-family:verdana;
font-size:0.5em;
text-indent: 1.7em;
}
td#newdate1 {
color: #990000;
font-weight:bold;
text-align:left;
font-family:verdana;
font-size:0.8em;
text-indent: 0.7em;
}
td#latest1 {
padding-top:5px;
font-weight:bold;
color: blue;
text-align:left;
text-indent: 1.5em;
font-family:ariel;
font-size:0.8em;
}
td#latest2 {
padding-top:1px;
color: white;
text-align:left;
text-indent: 2.9em;
font-family:ariel;
font-size:0.6em;
}
td#trophy1 {
color: #990000;
font-weight:bold;
text-align:left;
font-family:verdana;
font-size:0.7em;
text-indent: 0.9em;
}
td#trophypic {
padding-top:1px;
font-weight:bold;
color: white;
text-align:left;
text-indent: 1.8em;
font-family:ariel;
font-size:0.7em;
}
td#trophypic1 {
padding-top:0px;
font-weight:bold;
color: white;
text-align:left;
text-indent: 1.8em;
font-family:ariel;
font-size:0.7em;
vertical-align:top;
}
td#trophy2 {
padding-bottom:0.5px;
font-weight:bold;
color: white;
text-align:left;
text-indent: 1.2em;
font-family:ariel;
font-size:0.7em;
}
td#trophy3 {
color: #3399ff;
font-weight:normal;
text-align:left;
padding-top: 0.0em;
padding-bottom: 2.0em;
padding-left: 5.0em;
font-family:verdana;
font-size:0.5em;
line-height: 1.0em;
}
td#trophy4 {
font-weight:bold;
color: white;
text-align:left;
text-indent: 0.2em;
font-family:ariel;
font-size:0.7em;
}
td#trophy5 {
color: #3399ff;
font-weight:normal;
text-align:left;
padding-top: 0.0em;
padding-bottom: 1.0em;
padding-left: 3.0em;
font-family:verdana;
font-size:0.5em;
line-height: 1.0em;
}
td#trophy6 {
font-weight:bold;
color: #FFFF00;
text-align:left;
text-indent: 0.7em;
font-family:ariel;
font-size:0.6em;
}
td#winner {
padding-top:2px;
font-weight:bold;
color: #990000;
text-align:left;
text-indent: 1.8em;
font-family:times;
font-size:0.7em;
}
td#topwinner {
padding-top:2px;
font-weight:bold;
color: #ffff00;
text-align:left;
text-indent: 0.7em;
font-family:times;
font-size:0.8em;
}
td#item3 {
color: blue;
padding-top:5px;
font-weight:normal;
text-align:left;
font-family:verdana;
font-size:0.5em;
text-indent:1.0em;
line-height: 1.0em;
}
td#newitem {
color: #3366FF;
font-weight:normal;
text-align:right;
font-family:verdana;
font-size:0.8em;
line-height: 2.2em;
}
td#itemi {
color: #FFFFFF;
font-weight:normal;
text-align:left;
font-family:verdana;
font-size:0.6em;
text-indent:1.9em;
}
#itemi a {color:#3366FF;
text-decoration: none;
font-weight:normal;
border:none;}
#itemi a:hover {color:#990000;
text-decoration: none;
font-weight:normal;
border:none;}
#archivelist {
font-family: Arial;
font-weight: bold;
font-size: 13px;
color: #FFFFFF;
text-align:left;
text-indent: 0.3em;
}
#archivelist2 {
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
text-align:left;
text-indent: 0.3em;
line-height: 1.0em;
}
td#latest {
padding-top:20px;
color: white;
line-height: 1.2em;
text-align:left;
text-indent: 0.3em;
font-family:ariel;
font-size:0.7em;
}
td#newlink {
padding-bottom:70px;
color: #990000;
font-weight:normal;
text-align:left;
text-indent: 1.9em;
font-family:ariel;
font-size:0.5em;
}
#comment {
font-family: Arial;
font-size: 15px;
font-weight: normal;
color: #FFFFFF;
text-align:left;
text-indent:0em;
}
#comment a {color:#3333CC;
text-decoration: none;
font-weight:bold;
border:none;}
#comment a:hover {color:red;
text-decoration: none;
font-weight:bold;
border:none;}
#cover a {color:#FFFFFF;
text-decoration: none;
font-weight:normal;
border:none;}
#cover a:hover {color:#990000;
text-decoration: none;
font-weight:normal;
border:none;}
#icolist {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-indent: -1em;
list-style-type: none;
list-style: none;
padding-left: 1em;
padding-top: 0.7em;
margin-left: 0;
line-height: 1.2em;
}
#icolist li {
margin-bottom: 1.0em;
}
.js-rating-labelText { color:#FFFFFF;}
#comments
{
/* we substracted navigation width from page width and got 800px*/
position:absolute;
width:770px;
height:100%;
/* have a minimum height, this does not work in IE*/
min-height:300px;
/* use float to inverse position with navigation DIV*/
right:0;
top:230px;
/*color section for identification*/
background:#000000;
padding-bottom:35px;
}
#comments a {color:#3333CC;
text-decoration: none;
font-weight:bold;
border:none;}
#comments a:hover {color:red;
text-decoration: none;
font-weight:bold;
border:none;}
#content label
{
width: 8em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color: #ffffff;
font-family: Arial;
font-size: 0.7em;
}
#content legend
{
color: #FFFF00;
background: #333333;
border: 2px solid #990000;
font-size: 0.9em;
padding: 2px 6px
}
#content fieldset
{
border: 2px solid #990000;
width: 20em
}
#content .submit input
{
margin-left: 6.5em;
color: #000000;
font-weight:bold;
background: #999999;
border: 1px outset #CCCCCC;
}
#content .input
{
color: #fff;
background: #000;
border: 2px solid #fff;
}