/* CSS Document for sprite Tutorial on www.m-sign.nl */
/* CSS Document done by Leichim from www.m-sign.nl */
/* The TRouBLe rule defines the order of margin values: Top, Right, Bottom Left */

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#333333;
}

a:visited {
color:#000;
}

/* CONTAINER */

#container{
margin:-10px auto;
width:800px; 
}

/* HEADER */

#header{
background:url(sprite.png) center top no-repeat;
height:270px;
width:800px;
}

#nav {
position:relative;
top:190px;
margin:0px 16px; 
height:40px;
width:768px;
}

#nav ul{
	list-style:none;
	display:inline;
}

#nav ul li{
	margin-right: 3px;
	float: left;
}

#nav ul li a{
	background: url(sprite.png) -176px 124px;	
	text-decoration: none;
	color:#000;
	display: block;
	padding: 15px 0px 0px 10px;
	height:25px;
	width:140px;
}

#nav li a:hover, #nav .current a{
	text-decoration: none;
	background: url(sprite.png) -16px 124px;
	color:#FFF;
}

#navdown {
background: url(sprite.png) -16px 164px;
position:relative;
top:190px;
margin:0px 16px; 
height:40px;
width:770px;
}

#navdown ul{
	list-style:none;
	display:inline;
}

#navdown ul li{
	margin-right: 5px;
	float: left;
}
#navdown ul li a{	
	text-decoration: none;
	font:12px Arial, Helvetica, sans-serif;
	color:#FFF;
	display: block;
	padding: 17px 0px 0px 10px;
	height:23px;
	width:110px;
}

#navdown li a:hover, #navdown .current a{
	text-decoration: none;
	background: url(sprite.png) -326px 120px;
}

/* CONTENT */

#content {
/* background:url(sprite.png) -16px 68px;  This cannot be used since it is going to be repeated! Here we should use another seperate image!*/ 
background: #FFF;
position:relative;
left:17px;
/* margin-left:17px; Does work in all normal browsers, but not in IE 6*/
float:left;
width:768px;
}

#sidebar {
width:152px;
padding:8px;
float:right;
}

#column {
width:586px;
padding:7px;
float:left;
}

#post{
position:relative;
top:10px;
}

.postcontent {
position:relative;
top:-20px;
margin-left:60px;
}

/* FOOTER */
#footer{
background:url(sprite.png) -17px 56px;
float:left;
/* margin-left:17px; Does work in all normal browsers, but not in IE 6*/ 
position:relative;
left:17px;
padding-top:5px;
width:768px;
}

/*SMALL ELEMENTS */
.postheading {
background: url(sprite.png) -730px 123px repeat-y;
padding:15px 0px 15px 60px;
}

.postdata {
position:relative;
top:-30px;
right:-60px;
width:300px;
}

.time {
background: url(sprite.png) -142px 20px;
}

.comments {
background: url(sprite.png) -300px 20px;
}

.comments, .time {
font-size:11px;
padding-left:33px;
}

.new {
padding-right:20px;
margin-left:350px;
background: url(sprite.png) -707px 21px repeat-y;
}

.old {
padding-left:15px;
margin-left:60px;
background: url(sprite.png) -460px 21px repeat-y;
}

.rss {
background: url(sprite.png) -18px 22px repeat-y;
padding-left:17px;
}