/*  
Theme Name: Jana
Theme URI: http://chris.leipold.ws/
Description: Theme for Jana Knott's Blog
Version: 1.0
Author: Chris Leipold
Author URI: http://chris.leipold.ws/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/


a {
  color:black;
}
abbr {
border-bottom:1px dashed #000;
cursor:help;
}
img {
  border:0;
}
body {
  margin:0;
  padding:0;
  background:#faf9f3;
  font-family:Verdana, Arial, sans-serif;
  font-size:10pt;
}
#header {
  margin-top:2em;
  border-bottom:1px solid #e1dfcb;
  background:#f9f8f1;
}
#header .middle {
  padding:4em 0 1em 0;
}
h1, h2 {
  font-weight:normal;
  display:inline;
}
#header img {
  margin: 0 0 0 1em;
}
h1 {
  font-size:160%;
  letter-spacing:-.1ex;
  margin:0 1em 0 1em;
}
h2 {
  font-size:120%;
  letter-spacing:-.1ex;
  color:#999;
}
#main {
  background:white;
  border-bottom:1px solid #e1dfcb;
}
#main #leadImage {
  width:100%;
  margin-top:-2em;
} 
#content {
  margin:0 2em;
}
#navi {
  float:left;
  margin:5em 0 0 -10em;
  padding:0;
  width:10em;
  list-style:none;
  position:relative;
  left:-1px;
}
#navi li {
  border-bottom:1px dotted #36a7eb;
  padding:.5ex 0;
}
#navi li.active {
  background:url(../img/bg_navi.gif) repeat-y right;
}
#navi a {
  text-decoration:none;
}
#navi a:hover, #navi a.active {
  font-weight:bold;
}
#navi ul {
  margin:0;
  padding:0;
  list-style:none;
}
#navi ul li {
  font-size:80%;
  margin:0;
  padding:.5ex 0 .5ex 1em;
  border-top:1px dotted #9e9e96;
  border-bottom:0;
}
  
h3, h3 a {
  font-weight:normal;
  font-size:140%;
  color:#999;
  text-decoration:none;
}

#footer {
  text-align:right;
  color:#666;
}
#footer .middle {
  padding:1em 0 3em 0;
}
#footer p {
  margin:0 2em;
  font-size:80%;
}
#footer #url {
  display:none;
}
#decoration {
  background:linear-gradient(to bottom, #f3f2e4 0%,#faf9f3 100%);
  height:30px;
  width:50%;
  padding:0;
  margin:0 auto 20px auto;
  position:relative;
}
#decoration:before, #decoration:after {
  content:" ";
  width:1px;
  height:100%;
  position:absolute;
  left:-1px;
  top:0;
  background:linear-gradient(to bottom, rgba(225,223,203,1) 0%,rgba(225,223,203,0) 100%);
}
#decoration:after {
  left:auto;
  right:-1px;
}
.middle {
  padding:2em 0;
  width:50%;
  margin:0 auto;
  background:#f3f2e4;
  border-left:1px solid #e1dfcb;
  border-right:1px solid #e1dfcb;
}
#tools {
  position:absolute;
  top:0;
  left:0;
  height:2em;
  line-height:2em;
  width:100%;
  text-align:right;
  background:#423735;
  color:white;
}
#tools ul {
  width:50%;
  list-style:none;
  margin:0 auto;
  position:relative;
  right:1em;
  padding:0;
}
#tools ul li {
  display:inline;
}
#tools a {
  color:white;
  text-decoration:none;
}
#tools a:hover, #tools a.active {
  text-decoration:underline;
}


@media only screen and (max-width: 900px) {
  .middle {
    width:auto;
    margin:0 2em 0 12em;
  }
  #decoration {
    width:auto;
    margin:0 2em 0 12em;
  }
  #decoration:before {left:0;}
  #decoration:after {right:0;}
}

@media only screen and (max-width: 700px) {
  .middle {
    width:auto;
    margin:0;
  }
  #decoration {
    width:auto;
    margin:0;
  }
  #decoration:before {left:0;}
  #decoration:after {right:0;}

  #main #leadImage {margin:0;}
  #navi {
    float: none;
    margin: 0;
    padding: 0;
    width: auto;
    list-style: none;
    position: relative;
    left: 1em;
  }
  #navi li a {
    line-height:32px;
  }
}