/*  
Theme Name: hdl3
Theme URI: http://hansdeloof.be/
Description: theme for my blog anythingbutwork
Version: 0.1
Author: Hans De Loof
Author URI: http://hansdeloof.be
Because there are a few images involved within the stylesheet, there is a seperate 'images.css' file.  All of the image information is contained within there.


big thanks to 
http://www.urbangiraffe.com/2005/04/12/themeguide1/
http://blog.nuclearmoose.com/wp-docs/wp-layout-explained.htm
for explaining wordpress theme stuff
http://wellstyled.com/css-2col-fluid-layout.html
for the two column laayout with a footer

inspired by the liberated theme http://theliberation.net/liberated/download/
probably not much left

*/
@import url("images.css");

/* the basics ========================BASICS======================================================= */
img {
border: none;
}

body, html {
 height: 100%;
 margin: 0;
 padding: 0;
 direction:ltr
}

body {
 font-family: verdana, sans-serif, arial, georia;
 font-size: 11px;
 color: #333;
 line-height: 2.0em;
 text-align: center;
/* background-color: grey;*/

}



/* add a class of .clearfix to any element 
containing a float needing to be cleared */
.clearfix:after {
    content: "."; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* HTML .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End fix */



/* the container=============================CONTAINER================================================ */
#container {
background: url('bkgr200.png') top left repeat-y;
 width: 740px;
 height: auto; 
 border-right: 2px solid #c5c5c5;
 border-left:  2px solid #c5c5c5;
 margin-right: auto;
 margin-left:  auto;
 text-align: justify;
 padding-top: 10px;

/* background-color: lime; */
/*makes those lines go all the way to the bottom */
/* padding-bottom: 100%; */
/* height: 100%; */

}


hr.cleaner {
      clear:both;
      height:1px;
      margin: -1px 0 0 0; padding:0;
      border:none;
      visibility: hidden;
      }

.amazon {
    display: inline;
    float: left;
    padding: 2px 6px 2px 0;

}


.thumb {
    position: relative;
    height: 80px;
    width: 80px;
    background-color: #FFF;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 0; 
}

.thumb img {
    position: relative;
    top: -60px;
    left: 0px;
}






/* the header ===============================HEADER================================================ */
#header{
/* display:block; */
 width: 718px;
 height: 240px;
 border: 1px solid #c5c5c5;
 margin-right: 10px;
 margin-left: 10px;
 background-color: #DADADA;
 padding-top: 5px;

}

#header h1, #header a{
 font-size: 35px; 
 height: 20px;
 margin-left: 7px;
 margin-top: 5px;
 font-family: verdana, lucida sans, tahoima, sans-serif;
 color: #fcfcfc;
 text-decoration: none; 
 text-align: left; 
}


/* the content ============================CONTENT================================================== */
#content{
 font-family: verdana, sans-serif, arial;
 font-size: 11px;
 width: 512px;
 top: 250px;
 margin-left: 210px;
 border-left:  1px solid #c5c5c5; 

/* big error */
/* padding-bottom: 100%; */
/* position: absolute; */
/* height: 100%;  */
}

#content p{
 margin: 10px;
}

#content h2, #content h2 a{
 font-family: verdana, sans-serif;
 color: #ccc;
 font-size: 14px;
 margin: 10px;
 text-decoration: none;
 margin-top: 45px;
}

#content h3{
 font-size: 18px;
 font-family: trebuchet ms, sans-serif;
 margin: 10px;
 margin-bottom: 0;
}

#content .single h3{
 margin-top: 30px;
}

#content h4{
 font-size: 13px;
 text-decoration: underline;
/* margin: 10px; */
}

#content .meta{
 text-align: right;
 margin: 10px;
 font-size: 10px;
 color: #999;
 margin-top: 0;
 margin-bottom: 0;
}

#content a{
 color: #3A6C83;
 text-decoration: none;
 background-color: #fffcff; 
 margin: 0; 
}

#content a:hover{
 text-decoration: underline;
 text-transform: lowercase; 
/* color: #fff;
 background-color: #3A6C83; */
}

#content .button, #submit{
 background-color: #20AFC4;
 border: 1px solid #c5c5c5;
 padding: 6px;
 font-family: tahoma, sans-serif;
 font-size: 11px;
 color: #fff;
}

#content .wide #content{
 width: 740px;
 top: 250px;
/* padding-bottom: 50px;*/
 margin-left: 0;
}

#content .postmeta{
 color: #555;
}
#content .alignright{
float: right;
margin-right: 75px;
}

#content .alignleft{
float: left;
margin-left: 75px;
}
/* the sidebar ================================SIDEBAR============================================== */

#sidebar{
float: left;
 width: 180px;
 top: 250px;
 padding-left: 10px;
 line-height: 1.6em;
 font-size: 10px; 
 text-align: left;
/* border-right: 2px solid green; */
/* border-left:  2px solid yellow; */

/* position: static ; */
/* position: absolute; */
/* padding-bottom: 100%; */
}

#fortdiv{
 border: 1px solid #CECECE;
 margin-top: 10px;
 padding: 12px;
font-size: 10px; 
}

#sidebar .box{
 border: 1px solid #CECECE;
 margin-top: 10px;
 padding: 10px;
 padding-top: 5px;
}

#sidebar li{
 list-style-type: none;
 margin: 0;
 padding: 0;
 font-size: 10px; 
}

#sidebar li h1{
 margin: 0;
 padding: 0;
 text-transform: lowercase; 
 font-size: 10px; 
}

#sidebar ul{
 margin: 0;
 padding: 0;
}

#sidebar h3{
 font-size: 13px;
 margin: 10px;
 margin-top: 45px;
}

#sidebar h2{
 font-size: 12px;
 color: #777;
 text-transform: lowercase; 
 /* this puts all of the text in the h2 area into lower case, regardless.  if you want rid of this feature, then simply delete the text-transform: lowercase; bit */
 font-family: lucida sans unicode, lucida sans, tahoma, arial, sans-serif;
}

#sidebar a{
 /*color: SLATEGREY; */
/* same color as heading of posts */
color: #3A6C83; 
text-decoration: none;
text-transform: lowercase; 
}

#sidebar a:hover{
text-decoration: underline;
text-transform: lowercase; 
}

#sidebar .searchbox{
 background-color: #f5f5f5;
 border: 1px solid #c9c9c9;
 padding: 1px;
 font-size: 9px;
 color: #c5c5c5;
}

/* comments ============================COMMENTS===================================================== */
.cmeta{
 font-size: 9px;
 color: #555;
 padding-bottom: 10px;
 border-bottom: 1px solid #c5c5c5;
 margin-left: 210px;
 margin-bottom: 10px;
}

input{
 border: 1px solid #777;
 background-color: #ccc;
 color: #111;
 font-family: tahoma;
 font-size: 11px;
 padding: 2px;
}

input:hover{
 background-color: #f5f5f5;
 border: 1px solid #69c;
}

/* footer =======================================FOOTER============================================ */

#footer {
clear: both;
/*background: #AABB88; */
 width: 718px;
 border: 1px solid #c5c5c5;
 margin-right: 10px;
 margin-left: 10px;
 background-color: #DADADA;
 padding-top: 5px;
color: #000000;
 font-family: verdana, sans-serif;  
 font: 8pt, sans-serif, serif;
 text-align: center;
 background-color: #F2F2F2; 
 padding-top:15px;
 padding-bottom:15px;

/* top: 1700px */
/*height: 50px;*/
/* border-top:  1px solid #c5c5c5;*/

}

#footer a, a:hover{
text-decoration: none;
text-transform: lowercase; 
 color: #000000;
}