/* ########################################################################

    Theme Name: Mikzlog Klare Lijn
    Theme URI: http://mikz.net/log
    Version: 1.0
    Author: mike
    Author URI: http://mikz.net/log
    
    This stylesheet is handcrafted for mikzlog by mike.
  
    I wanted mikzlog to be clean and beautiful: easy navigation on top,
    a random post button, nice typography and a sticky footer.
   
    version 0.1: 17-12-2009
	version 0.2: 20-01-2012 changed date representation
	version 0.3: 30-01-2012 added social side buttons
   
   ######################################################################## */

* {margin:0;padding:0;} 

/* always use padding instead of vertical margins, else the footer will fail */

html, body, #wrap {height: 100%; background: #FFFFFC;}

body > #wrap {height: auto; min-height: 100%; position: relative;}

#main {padding-bottom: 150px;}  /* same height as the footer */

#bar {
    height: 5px;
    background: #A0522D;
}

#header {
    color: #333;
    padding: 10px;
    padding-left:110px;
    border: 0px;
    height: 100px;
    background: #FFFFFC;
}

#navigation {
    padding-top: 5px;
    padding-bottom: 5px;
    border: 0px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #FBFAF4;
    padding-left: 110px;    
}

#randombutton {
    position: absolute;
    top: 80px;
    left: 610px;
    width: 154px;
    height: 119px;
    background-image:url(http://mikz.net/log/wp-content/themes/klarelijn/img/refreshr.png);
}

#randombutton a {display:block}
#randombutton img {width:100%; height:100%}
#randombutton a:hover img {visibility:hidden;}

#content { 
    width: 685px;
    border: 0px;
    background: #FFFFFC;
    padding-top: 20px;
    padding-bottom: 20px;
}

#footer {
    position: relative;
	 margin-top: -150px; /* negative value of footer height + border */
    /*padding-top: 30px;*/	
	 height: 149px;
	 background: #FBFAF4;
	 border-top: 1px solid #333;
	 clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* ########################################################################

   Globals
   
   ######################################################################## */

h1 {
    color: #333;
    font-size:38px;
    text-align:left;
    font-family:"Times New Roman",Times,serif;
    font-weight:normal;
}

h2 {
    color: #A0522D;
    font-size:26px;
    text-align:left;
    font-family:"Times New Roman",Times,serif;
    font-weight:normal;
	letter-spacing:1px;
}

a:link,
a:visited{
  color: #A0522D;
  text-decoration: none;
}

textarea {
    width: 570px;
    font-size : 20px ;
	font-family : Georgia, serif;
	color : #333;
}

input {
	font-size : 20px; 
	font-family: Georgia, serif;  
	color : #333; 
}

input[type=submit]
{
    font-family: Verdana, Arial, sans-serif;
    font-size : 16px;
}


img {
    border: 0px;
}

img.align-left {
    float:left;
    /*clear:left;*/
    vertical-align:text-top;
    margin-right: 30px;
    padding-bottom: 10px;
}

img.align-right {
    float:right;
    clear:right;
    vertical-align:text-top;
    margin-left: 30px;
    padding-bottom: 10px;
}

img.midden {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.border {
    padding:10px;
    border:1px solid #021a40;
    background: #FFFFFF;
}

ul {
    padding-left: 30px;
    color: #333;
    font-family: Georgia, serif;
    font-size: 20px;
	line-height: 30px;
    text-align: justify;
    padding-bottom: 20px;
}

blockquote {
    padding-left: 30px;
}

/* ########################################################################

   Theming
   
   ######################################################################## */

.title {
    color: #A0522D;
    font-size:28px;
    text-align:left;
    font-family:"Times New Roman",Times,serif;
    font-weight:normal;
	letter-spacing:1px;
	padding-bottom: 20px;
}

.post{
    margin-left:110px;
}

.post p {
    color: #333;
    font-family: Georgia, serif;
    font-size: 20px;
	line-height: 30px;
    text-align: justify;
    padding-bottom: 20px;

}

/*
.post-date {
    float: left;
    margin-left: 30px;
    padding-top: 5px;
    width: 49px;
    height: 62px;
    background-image: url(http://mikz.net/log/wp-content/themes/klarelijn/img/datebg.png);
    background-repeat: no-repeat;
}
*/

.postdate {
  position: relative;
  margin-left: 30px;
  margin-top: 10px;
  width: 49px;
  height: 72px;
  float: left;
  background: #FFFFFC;
}

.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(http://mikz.net/log/wp-content/themes/klarelijn/img/mikzlogdata30grey.png);
  background-repeat: no-repeat;
}

.day { top: 0; left: 0; width: 35px; height: 43px;}
.year { top: 0; right: 0; width: 12px; height: 43px;}
.month { bottom: 0; left: 0; width: 49px; height: 27px;}

.d-01 { background-position: -20px -69px;}
.d-02 { background-position: -21px -129px;}
.d-03 { background-position: -21px -189px;}
.d-04 { background-position: -21px -249px;}
.d-05 { background-position: -21px -309px;}
.d-06 { background-position: -21px -369px;}
.d-07 { background-position: -21px -429px;}
.d-08 { background-position: -21px -489px;}
.d-09 { background-position: -82px -69px;}
.d-10 { background-position: -82px -129px;}
.d-11 { background-position: -81px -189px;}
.d-12 { background-position: -82px -249px;}
.d-13 { background-position: -82px -309px;}
.d-14 { background-position: -82px -369px;}
.d-15 { background-position: -82px -429px;}
.d-16 { background-position: -82px -489px;}
.d-17 { background-position: -143px -69px;}
.d-18 { background-position: -143px -129px;}
.d-19 { background-position: -143px -189px;}
.d-20 { background-position: -141px -249px;}
.d-21 { background-position: -140px -309px;}
.d-22 { background-position: -141px -369px;}
.d-23 { background-position: -141px -429px;}
.d-24 { background-position: -141px -489px;}
.d-25 { background-position: -202px -69px;}
.d-26 { background-position: -202px -129px;}
.d-27 { background-position: -202px -189px;}
.d-28 { background-position: -202px -249px;}
.d-29 { background-position: -202px -309px;}
.d-30 { background-position: -202px -369px;}
.d-31 { background-position: -199px -429px;}

.y-2002 { background-position: -29px -19px;}
.y-2003 { background-position: -49px -19px;}
.y-2004 { background-position: -69px -19px;}
.y-2005 { background-position: -89px -19px;}
.y-2006 { background-position: -109px -19px;}
.y-2007 { background-position: -129px -19px;}
.y-2008 { background-position: -149px -19px;}
.y-2009 { background-position: -169px -19px;}
.y-2010 { background-position: -189px -19px;}
.y-2011 { background-position: -209px -19px;}
.y-2012 { background-position: -229px -19px;}
.y-2013 { background-position: -249px -19px;}
.y-2014 { background-position: -269px -19px;}
.y-2015 { background-position: -289px -19px;}

.m-01 { background-position: -258px -81px;}
.m-02 { background-position: -262px -109px;}
.m-03 { background-position: -262px -143px;}
.m-04 { background-position: -260px -173px;}
.m-05 { background-position: -262px -202px;}
.m-06 { background-position: -258px -230px;}
.m-07 { background-position: -258px -260px;}
.m-08 { background-position: -262px -294px;}
.m-09 { background-position: -262px -323px;}
.m-10 { background-position: -262px -350px;}
.m-11 { background-position: -262px -383px;}
.m-12 { background-position: -262px -410px;}

.navigation {
    color: #666;
    font-size: 16px;
    letter-spacing:1px;
    font-family: Georgia, serif;
}

.navigation a:link,
.navigation a:visited{
  color: #666;
  text-decoration: none;
}

.navigation a:hover,
.navigation a:active{
    color: #333;
}

.separation {
    padding-top: 20px;    
    padding-bottom: 20px;
}

.comments {
    margin-left:110px;
}

.comments p {
    color: #666;
    font-family: Georgia, serif;
    font-size: 20px;
	line-height: 30px;
    text-align: justify;
    padding-bottom: 20px;

}

.comment-author {
    color: #333;
    font-family: Georgia, serif;
    font-size: 20px;
    padding-bottom: 20px;
}

#respond {
    padding-top: 20px;
}

.italic {
    color: #333;
    font-family: Georgia, serif;
    font-size: 20px;
    padding-bottom: 20px;
    font-style: italic;
}

.colofon p {
    color: #666;
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 18px;
    margin-left:110px;
}

.colofon a:link,
.colofon a:visited{
  color: #666;
  text-decoration: none;
}

.colofon a:hover,
.colofon a:active{
  color: #333;
}

.archive {
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
    margin-left:110px;
    padding-bottom: 20px;
}

.archive a:link,
.archive a:visited{
  color: #666;
  text-decoration: none;
}

.archive a:hover,
.archive a:active{
  color: #333;
}

.linklijst {
    margin-left:110px;
}

.linklijst p {
    color: #666;
    font-family: Georgia, serif;
    font-size: 20px;
    text-align: justify;
    padding-bottom: 20px;

}

.nobullet {
  list-style-type: none}

/* ########################################################################

   Side links
   
   ######################################################################## */

#rsstab {
	background: url(http://mikz.net/log/wp-content/themes/klarelijn/img/side_rss.png) no-repeat; /* Path to Image */
	right:5px;  /* change this to left: 1px; to put it on the left of the screen */
	top:239px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;
}

#rsstab a{
	display:block;width:100%;height:100%;
}

#twtab {
	background: url(http://mikz.net/log/wp-content/themes/klarelijn/img/side_twitter.png) no-repeat; /* Path to Image */
	right:5px;  /* change this to left: 1px; to put it on the left of the screen */
	top:292px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;
}

#twtab a{
	display:block;width:100%;height:100%;
}
  
/* ######################################################################## */