/* =Structure 
---------------------------------*/

body {
  background-color: lightgrey;
  font-family: Verdana, Arial, sans serif;  
  font-size: 13px; /* 0.8em;*/
}

/* =Headings 
----------------------------------*/

/* Image replacement */
h1 {
  font-size: 1.5em; 
  height: 90px;
  margin: 0; 
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 383px;  
}

h1 span {
  display: block;
  left: 0;
  margin: 0;
  padding:0;  
  position: absolute;
  top: 0;
  width:383px; height:90px;
  z-index: 1; /* For opera 5 and 6) */
}

h2 {;
  font-size:1.4em;
  font-weight: bold
  margin-top: 0;
  margin-bottom: 0.6em;  
}

h3 {
  font-size: 1.3em;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0.2em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1.1em;
}

h6 {
  font-size: 1em;
}
/* =Misc 
--------------------------------------------*/
p {
  font-size: 0.9em;
  margin: 0;
  margin-bottom: 10px;
}

/* =Structure 
--------------------------------------------*/
#container {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5px;  
  width: 900px;
}


/* =Header =Structure
--------------------------------------------*/

#header {
  background-color: #24a8e1;
  border-bottom: 1px solid #fff;
  border-top: 5px solid #fff;
  height: 90px;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

/* =Menu =Structure
----------------------------------------------*/

#menu ul {
  background-color: #24a8e1;
  color: #fff;
  float: left;
  margin-left: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 0;
  width: 100%;  
}

#menu ul li { 
  display: inline; 
  line-height: 1.6em;
}

#menu ul li a {
  background-color: #24a8e1;
  border-bottom: 0;
  border-right: 4px solid #fff;
  color: #000;
  float: left;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.1em; 
  padding: 3px 8px;
  text-decoration: none;
}

#menu ul li a:hover {
  background-color: #000;
  color: #fff;
}

/* =Content =Structure 
------------------------------------------*/
#contentcontainer {
  border-top: 1px solid #ddd; 
  clear: both;
  margin-top: 10px;
  margin: 0;
  padding-top: 1em;
  width: 100%;
}

#content {
  border-right: 1px solid #ddd;
  float: left;
  line-height: 20px;
  margin-left: 15px;
  margin-right: 15px;
  margin:0;
  margin-left: 15px;
  padding-right: 10px; 
  position: relative;
  width: 531px;
  word-spacing: 2px;	
}

#sidebar {
  float: left;
  margin-left: 15px;
  width: 308px;
}	

/* =Sidebar =Weblog =Structure 
------------------------------------------*/
#tagcloud_and_archive {
  clear: left;
}

/* =Sidebar =Widgets =Weblog
----------------------------------------*/
#widget-1 {
  float: left;
  margin-right: 0.5em;
}

#widget-2 {
  float: left;
}

#widget-3 {
  clear: left;
  padding-top: 1em;
}


/* =Footer
-----------------------------------------------*/
#footer {
  background-color: #24a8e1;
  border-bottom: 5px solid #fff;
  border-top: 10px solid #fff;
  clear: both;
  font-size: 0.7em; /* =optie: 0.8 misschien mooier? */
  font-weight: bold; /* =optie: misschien weg?*/
  height: 1.75em;
  letter-spacing: 0.1em;  
  padding: 4px 8px 2px 8px;
  text-align: center;
}

/* =ContentItems
--------------------------------------------*/
#mainitem {
  margin-bottom: 25px;
}

.metadate {
  font-size: 0.8em;
  font-weight: bold;
}

#songtext_credits {
  font-size: 0.7em;
  line-height: 1.2em;
}

.project {
  clear: both;
  margin-bottom: 10px;
  overflow: hidden;
}

#projectdetail {
  margin-left: 14px;
  overflow: hidden;
  padding-right: 5px;
}

#projectdetail img {
  margin-right: 20px;
}

/* =Weblog =ContentItems
--------------------------------------------*/
.post {
  border-bottom: dotted 1px #24a8e1;
}

.post_header {
  margin-bottom: 5px;
}

.post_header h2 {
  margin-bottom: 0;
}

.post_header .metadate {
  color: grey;
  font-size: 1.1em;
}

.post_footer {
/*  border: 1px solid #24a8e1;*/
  clear: both;
  overflow: hidden;
  padding: 0;
}



.comments {
  float: right;
  margin: 0;
}

.postlist {
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
}

img.nothing {
  border: 0;
}

ul#archivelist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* =Tags =ContentItems
TODO: fix/cleanup
--------------------------------------------*/

ul#taglist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#taglist li{
  display: inline;
}

#taglist li.keyword1 {
font-size:0.7em;
}
#taglist li.keyword2 {
font-size:0.9em;
}
#taglist li.keyword3 {
font-size:1em;
}
#taglist li.keyword4 {
font-size:1.1em;
}
#taglist li.keyword5 {
font-size:1.2em;
}
#taglist li.keyword6 {
font-size:1.3em;
}
#taglist li.keyword7 {
font-size:1.4em;
}
#taglist li.keyword8 {
font-size:1.5em;
}
#taglist li.keyword9 {
font-size:1.6em;
}
#taglist li.keyword10 {
font-size:1.7em;
}
#taglist li.keyword11 {
font-size:1.8em;
}
#taglist li.keyword12 {
font-size:1.9em;
}
#taglist li.keyword13 {
font-size:2em;
}
#taglist li.keyword14 {
font-size:2.1em;
}
#taglist li.keyword15 {
font-size:2.2em;
}



.nube1 {font-size: .6em;}
  .nube2 {font-size: 1.0em;}
  .nube3 {font-size: 1.3em;}
  .nube4 {font-size: 1.6em;}
  .nube5 {font-size: 1.9em;}
  .nube6 {font-size: 2.1em;}


/* =Lists =ContentItems
--------------------------------------------*/ 
#projectlist, #sidebarlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


/* =Links =ContentItems
--------------------------------------------*/ 
a {
  color:#24a8e1;
  text-decoration: none;
}
a:hover {
  border-bottom: dotted 1px #24a8e1;
  color: #24a8e1;
}

a.imagelink {
  border: 0;
}
a.imagelink img {
  border: solid 2px #fff;
}

a.imagelink:hover img {
  border: dotted 2px #24a8e1;   
}

/* =Links =Footer
--------------------------------------------*/
a.incolor {
  color: black;
}

a.incolor:hover {
  color: white;
}


/* =Images =ContentItems
--------------------------------------------*/ 
img.projectlist {
  float: left;
}
 
/* =Forms =ContentItems
----------------------------------------------*/

fieldset {
 border: solid 1px #24a8e1;
 padding-bottom: 7px;
 padding-top: 10px;
}

fieldset p {
  margin-bottom: 0;
}

legend {
  display:none;
  background-color: #24a8e1;
  color: #000;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0.1em; 
  padding: 2px 8px; 
}

label {
  display: -moz-inline-box;
  display: inline-block;
  padding-left: 4px;
  vertical-align: top;
  width: 90px;
}
input, textarea {
  border: solid 1px #24a8e1;
  margin-bottom: 4px;
}

textarea {
  vertical-align: bottom;
  width: 320px;
}

#contactsubmit {
  margin-left: 7px;
  margin-right: 0;
  vertical-align: bottom;
}

/* =Contact =ContentItems 
----------------------------------------*/
#other_contact {
  margin-top: 10px;
}

#other_contact span {
  display: block;
}

/* =Ads 
----------------------------------------*/
#footerad {
  clear: left;
  margin-top: 1em;
}

#sidebar-topad {
  margin-top: 1em;
}

/* =HCard =Microformats =Contact =ContentItems 
----------------------------------------*/
.type {
  display:none;
} 

/* errors, todo,fix */
.fieldWithErrors {
  display: inline;
}
.fieldWithErrors input,
.fieldWithErrors textarea {
  border: solid 1px red;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}