Css
#header, #top-bar {
    margin:0 auto;
}
body {
    background-color:#BFB89C;
    background-image:url(http://cyclods.wikidot.com/local--files/start:2010/Sides-Brown-Gradient.gif);
    color:#000000;
    font-size:0.8em;
}
 
#search-top-box {
    color:white;
    left:700px;
    position:absolute;
    text-align:left;
    top:90px;
    width:52px;
    z-index:9;
}
#search-top-box form {
    background-color:white;
    height:18px;
    left:120px;
    margin:0;
    padding:0;
    position:absolute;
    top:-5px;
    z-index:9;
}
#search-top-box input.button {
    display:none;
}
#search-top-box input.empty {
    color:#B2B2B2;
}
#login-status {
    color:#AAAAAA;
    font-size:90%;
    height:10px;
    margin:0;
    overflow:visible;
    padding:0;
    position:absolute;
    top:4px;
    width:900px;
    z-index:6;
}
#login-status a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    color:#DDDDDD;
}
#login-status ul a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    color:#770000;
}
#account-topbutton {
    background-color:#FFFFFF;
    border:1px solid #888888;
    font-size:80%;
    font-weight:bold;
    margin-left:5px;
    padding:0 5px;
    text-decoration:none;
}
#account-topbutton {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#CCCCCC none repeat scroll 0 0;
    color:#770000;
}
 
#account-options {
    background-color:black;
    border:0 none;
    color:white;
    display:none;
    opacity:0.5;
    padding:0;
    position:absolute;
    right:700px;
    text-align:center;
    width:135px;
    z-index:7;
}
#account-options ul {
    color:white;
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
}
#account-options li {
    color:white;
    display:block;
    margin:0;
    padding:0;
    width:100%;
}
#account-options li a {
    -moz-box-sizing:border-box;
    color:white;
    display:block;
    padding:2px 5px;
    width:100%;
    z-index:8;
}
#account-options li a:hover {
    background-color:white;
    color:black;
    opacity:0.5;
}
 
.printuser img.small {
    margin-right:0.4em;
}
 
div.buttons input, input.button, button, file, a.button {
background-color:#F4F4F4;
border:1px solid #AAAAAA;
color:#000000;
margin:0 2px;
padding:0 0.5em;
text-decoration:none;
}
input.empty {
background-color:transparent;
font-size:80%;
}
 
input.text {
    background-color:transparent;
    border:1px solid #777777;
    color:black;
}
 
input {
    font-size:80%;
}
 
#top-bar {
    font-size:75%;
    height:10px;
    left:400px;
    line-height:10px;
    position:absolute;
    top:56px;
    z-index:10;
}
 
#top-bar li ul li a {
    background-color:transparent;
    border:0 none;
    text-align:left;
    width:10em;
}
 
#top-bar ul {
    border:0 none;
    float:left;
    margin-left:15px;
}
 
#top-bar a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    border:0 none;
    color:#FFFFFF;
}
 
#top-bar ul li ul {
    border:0 none;
    vertical-align:bottom;
}
 
#top-bar ul li a {
    border:0 none;
    line-height:23px;
    max-height:23px;
    overflow:hidden;
    text-decoration:none;
}
 
#top-bar ul li.sfhover a {
    border:0 none;
}
 
#top-bar ul li:hover a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    border:0 none;
}
 
#top-bar ul li.sfhover ul li a {
    border:0 none;
}
 
#top-bar ul li:hover ul li a {
    border:0 none;
    height:auto;
    line-height:200%;
    max-height:none;
    padding-bottom:0;
    padding-top:0;
    width:110px;
}
 
#top-bar ul li.sfhover a:hover {
    border:0 none;
}
 
#top-bar ul li:hover a:hover {
    background-image:url(http://cyclods.wikidot.com/local--files/start:2010/Top-Header-Menu-Hover.gif);
    border:0 none;
    text-decoration:none;
}
 
#top-bar ul ul li:hover a:hover {
    background-image:url(http://cyclods.wikidot.com/local--files/start:2010/Top-Header-List-Hover.gif);
    color:white;
}
 
#top-bar ul li ul {
    background-color:#AD0000;
    color:white;
    width:auto;
}
 
#top-bar ul li ul li {
    background-image:none;
}
 
#top-bar ul li ul li.sfhover {
    background-image:none;
}
 
#top-bar ul li ul li {
    background-image:none;
}
 
#top-bar ul li ul li:hover {
    background-image:none;
}
 
#side-bar {
/*
    border:none;
    clear:both;
    margin:0 0 0 2em;
    background:transparent;
    width:12em;
    position:absolute;
*/
    display: none;
}
#main-content {
    background-image:url(http://cyclods.wikidot.com/local--files/start:2010/Main-Area-Top-v2.png);
    margin:0 auto;
    padding:20px 20px 0;
    position:relative;
    width:910px;
}
 
.page-options-bottom {
    height:1%;
    margin:0 0;
    position:relative;
    text-align:right;
    top:5px;
    z-index:20;
}
#footer {
    background-image:url(http://cyclods.wdfiles.com/local--files/start:2010/Main-Area-Bottom-v3.png);
    bottom:0;
    height:75px;
    margin:auto;
    padding:5px 10px 0;
    position:relative;
    top:0;
    width:930px;
    z-index:1;
    font-size:70%;
}
 
#footer .options {
    color:white;
    float:right;
    font-size:90%;
    margin-right:10px;
    padding:53px 0;
    z-index:1;
}
 
#license-area {
    color:#555555;
    font-size:80%;
    padding:0;
    text-align:center;
}
 
#content-wrap {
    margin-top:0;
}
 
h1, #page-title {
    color:#000000;
    font-weight:normal;
    margin:0 0 0.6em;
    padding:0 0 0.25em;
}
 
h1 {
    font-weight:bold;
    margin-top:0.7em;
    padding:0;
}
 
h2, h3, h4, h5, h6, h7 {
    letter-spacing:1px;
    margin:0.5em 0 0.4em;
    padding:0;
}
 
#page-title {
    border-color:#000000;
}
 
ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:square;
}
 
li, p {
    line-height:141%;
}
 
a {
    color:#B70000;
    text-decoration:none;
}
 
a.newpage {
    color:#AB0C0C;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
 
#header {
    background-image: url(http://cyclods.wikidot.com/local--files/start:2010/Top-Header-v6.png);
    background-repeat:no-repeat;
    background-position:center bottom;
    height:93px;
    padding-bottom:0;
    position:relative;
    top:0;
    width:950px;
}
 
#header h1 {
    left:0;
    padding:0;
    top:25px;
    width:375px;
}
 
#header h1 a {
    background-color:transparent;
    color:transparent;
    filter:alpha(opacity=0);
    font-size:180%;
    left:0;
    position:absolute;
    text-decoration:none;
    top:25px;
    width:375px;
}
 
#header h1 a span {
    float:left;
    width:375px;
}
 
#header h2 {
    display:none;
}
Site Design, Syntax and Examples by Rob Elliott 2008-2016