• The Tutorial
• The CSS
• Sliding Doors
• Design is Philosophy

#header {
height:100px;
position:relative;
background-color:gray;
font-family:Arial, Helvetica, sans-serif;
}

#header ul {
position: absolute;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 10px 10px 0;
list-style: none;
font-size: 0.8em;
}

#header li {
list-style-type:none;
float: left;
background: url("img/left-over.png") no-repeat left top;
margin: 0;
padding: 0 0 0 8px;
}

/* Current page highlighting with Sliding Doors */

.page_item a {
float: left;
display: block;
background: url("img/right-over.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #DDDDDD;
text-transform: uppercase;
}

.page_item a:hover {
color:white;
}

#hearder .current_page_item {
float: left;
background: url("img/left-selected.png") no-repeat left top;
margin: 0;
padding: 0 0 0 8px;
}

.current_page_item a, .current_page_item a:hover {
float: left;
display: block;
background: url("img/right-selected.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #C7532D;
text-transform: uppercase;
}

/* END Current page highlighting */

#content {
background-color:#ffffff;
font-family:"Courier New", Courier, monospace;
font-size:1.em;
}