/*
Theme Name: Haartfeldt Simple Magazine
Theme URI: http://www.voxmediagroup.net/
Description: Simple and Modern Magazine theme for Haartfeldt
Version: 1.0
Author: Haartfeldt HB
Author URI: http://www.haartfeldt.com
*/

* {
 margin: 0px; padding: 0px;
}

div {
 border: 1px dotted;
 border: none;
 margin: 1px; padding: 1px;
 margin: 0px; padding: 0px;
}
/* De-bugging */
pre {
 border: 1px solid #000;
 overflow: auto;
 max-height: 10em;
 padding: 0px 1em;
 font-size: 12px;
 background-color: #ff9;
}

/* BASIC */
body {
 margin: 0px; padding: 0px;
 font-family: Arial, Helvetica, Verdana, Geneva, Tahoma, "Trebuchet MS", sans-serif;
 font-size: 11px;
}

h1, h2, h3, h4 {
 font-weight: normal;
 margin: 0px; padding: 0px;
}
a {
 color: #c00;
}
a:visited {
 color: #600;
}
a:hover {
}
img, a img {border:none;}

#container {
 margin: 0px auto;
 width: 918px;
 background-color: #fff;
 clear: both;
}

/* HEADER */
#header {
 overflow: hidden;
 position:relative;
}

#header #title {
 position:absolute;
 top: 61px;
 left: 310px;
 font-size: 19px;
 letter-spacing: 0px;
 font-weight: bold;
 color: #666;
 text-align: right;
}
#header #logo {
 position:absolute;
 top: 10px;
 left:0px;
}
#header #introtext {
 width: 300px;
 float: right;
 margin-right: 6px;
 margin-bottom: 6px;
 background-color: #c00;
 font-size: 12px;
 color: #fff;
 
}
#header #introtext div.column {
 width: 125px;
 padding: 10px 15px;
 text-align: justify;
 float:left;
}
#header #introtext #column1 {
 padding-right: 10px;
}
#header #introtext #column2 {
 padding-left: 10px;
}

/* SIDEBAR */
#sidebar {
 width: 300px;
 float:left;
}
#sidebar h2 {
 font-size: 18px;
 font-weight: bold;
}
#sidebar div {
 background-color: #ededed;
 padding: 10px;
 margin-bottom: 6px;
}
#sidebar ul {
 list-style:none;
}
#sidebar li, #sidebar p {
 font-size: 15px;
}
#sidebar li {
 list-style:none;
 margin-bottom: 5px; 
}
#sidebar div.banner {
 background-color: #fff;
 padding: 0px;
 margin-bottom: 0px;
}
#sidebar div.banner a, #sidebar div.banner p {
 margin-bottom: 6px;
 padding: 0px;
 display:block;
}
#sidebar div.banner p a {
 text-align: center;
 border: 1px solid #ccc;
 padding: 2em 0px;
 margin: 0px;
 text-decoration: none;
}
#sidebar div.banner p a:hover {
 border: 1px solid #C00;
 text-decoration: underline;
 text-decoration: none;
}


/* MAIN */
#main {
 width: 612px;
 float:right;
}
#main div.post {
 width: 298px;
 float: left;
 border: none;
 border: 1px solid #ccc;
 margin-right: 6px;
 margin-bottom: 6px;
 position:relative;
 font-size: 14px;
}
#main div.post img.image {
 width: 288px;
}
#main div.post img.flag {
 position:absolute;
 top:5px; 
 right:5px;
}
#main div.post a {
 color: #333;
 display: block;
 padding: 5px;
 text-decoration:none;
}
#main div.post a .posttitle {
 position:absolute;
 bottom:10px; 
 left:0px;
 padding: 2px 5px;
 background-color: #ddd;
 font-weight:bold;
} 
#main div.smallpost {
 width: 145px;
 overflow:hidden;
 font-size: 0.9em;
}
#main div.smallpost img.image {
 width: 135px;
}
#main div.bigpost {
 margin-top: 20px;
 width: 604px;
 float: none;
 clear:both;
 font-size: 2em;
}
#main div.bigpost img.image {
 width: 594px;
}
#main div.bigpost a span.posttitle {
 bottom:20px; 
}
#main div.single {
 margin-top: 0px;
}
#main div.single div.postheader {
 color: #333;
 display: block;
 padding: 5px;
 text-decoration:none;
}
#main div.post div.postheader .posttitle {
 position:absolute;
 bottom:10px; 
 left:0px;
 padding: 2px 5px;
 background-color: #ddd;
 font-weight:bold;
 font-size: 32px;
} 
#main #content {
 width: 590px;
 padding: 8px;
 
}
#main #content p {
 line-height: 1.4em;
 margin-bottom: .5em;
 font-size: 15px;
 text-align:justify;
}
#main #content p.content_link {
 line-height: 1em;
 padding-bottom: 1em;
}
#main #content p.content_link a {
 text-decoration: none;
}
#main #content p.content_link a:hover {
 text-decoration: underline;
}
#main #content p.content_link small {
}

#main #actions {
}
#main #actions #related_posts {
 width: 306px;
 float:left;
}
#main div.related {
 float:left;
}

#main div.banner {
 float:right;
 width: 300px;
 background-color: #fff;
 padding: 0px;
 margin-bottom: 0px;
 margin-right: 6px;
}
#main div.banner a, #main div.banner p {
 margin-bottom: 6px;
}
#main div.banner p a {
 text-align: center;
 border: 1px solid #ccc;
 display:block;
 padding: 3em 0px;
 text-decoration: none;
 font-size: 15px;
}
#main div.banner p a:hover {
 border: 1px solid #C00;
 text-decoration: underline;
 text-decoration: none;
}
#main div.rotator {
 float:right;
}
#main div.rotator span.advertise_here {
 display: block;
 text-align:right;
 font-size: 9px;
 height: 20px;
}
#main div.rotator span.advertise_here a {
 color: #ccc;
 text-decoration: none;
}
#main div.rotator span.advertise_here a:hover {
 color: #c00;
}

/* FOOTER */
#footer {
 margin: 10px auto;
 width: 880px;
 clear: both;
 padding:;
 font-size: 9px;
 text-align:right;
 color: #999;
}



/* CLASSES */
.alignleft {
 text-align: left;
}
.alignright {
 text-align: right;
}
.floatright {
 float: right;
}
.floatleft {
 float: left;
}
.clear {
 clear: both;
}