html, body {
  width            : 100%;
}

body {
  color            : #33cc33;
  background-color : #000000;
  font-family      : Liberation Sans, Helvetica, sans-serif;
}

body, #canvas, #kopf, #menu {
  margin           : 0;
  padding          : 0;
}

div#canvas {
  overflow          : auto;
}


div#kopf {
  background-image : url(bilder/nerd4u-keyboard-title-600.jpg);
  background-repeat: repeat-x;
  background-color : #333333;
  color            : #00ff00;
  border-bottom    : 8px #999999 ridge;
}

#kopf a:link, #kopf a:visited {
  background-color : #333333;
  color            : #00ff00;
  text-decoration  : none;
}  

#kopf a:hover, #kopf a:active {
  background-color : #00ff00;
  color            : #333333;
  text-decoration  : none;
}

#kopf #logo {
  width            : 15em;
  height           : 10.3em;
  margin           : 1.5em 0 0 1.5em;
  padding          : 0;
  background-color : #333333;
  color            : #00ff00;
  text-align       : center;
  vertical-align   : middle;
  border           : 8px #999999 ridge;
}

#kopf #logo a {
  display          : block;
  width            : 15em;
}

#kopf #logo h1 {
  margin           : 0;
  padding          : .2em 0 0 0;
  font-family      : Liberation Sans, Helvetica, sans-serif;
  font-weight      : bold;
  font-size        : 300%;
}

#kopf #logo p {
  margin           : 0;
  padding          : 0 0 2em 0;
  font-family      : Liberation Mono, Lucida Console, Courier New, monospace;
  font-size        : 80%;
}

#kopf #navi {
  margin           : -1em 1em 0 0;
  text-align       : right;
  font-family      : Liberation Mono, Lucida Console, Courier New, monospace;
  font-weight      : bold;
}

#kopf #navi ul {
  margin-left      : 0;
  padding-left     : 0;
  white-space      : nowrap;
}

#kopf #navi li {
  display: inline;
  list-style-type: none;
}

#kopf #navi li a {
  padding          : .4em 1em .4em 1em;
}


div#content {
  max-width        : 40em;
  margin           : 1em 20em .5em 1em;
  padding          : 0 2em .5em 2em;   
  background-color : #ffffff;
  color            : #003300;
  border           : 5px #999999 ridge;
  font-family      : Liberation Sans, Helvetica, sans-serif;
}

#content h1,#content h2,#content h3,#content h4 {
  margin           : 0;
  padding          : 0;
  background-color : #ffffff;
  color            : #009900;
  text-align       : center;
}

#content h2 {
  margin           : 1em 0 0 0;
}

#content h2 a:link, #content h2 a:visited {
  text-decoration  : none;
  background-color : transparent;
  color            : #009900;
}

#content h2 a:hover, #content h2 a:active {
  text-decoration  : none;
  background-color : #009900;
  color            : #ffffff;
}

#content p {
  line-height      : 1.5em;
  text-align       : justify;
}

#content p.small {
  font-size        : 80%;
}

#content p.center {
  text-align       : center;
  margin           : 0 3em 0 3em;
}

#content p.right {
  text-align       : right;
  margin           : 0 1em 0 1em;
}

#content div.navigation {
  display          : block;
  margin           : 1em 1em 0 0;
  padding          : .5em;
  height           : 1.5em;
}

#content div.navigation div.navileft {
  float            : left;
}

#content div.navigation div.naviright {
  float            : right;
} 

#content div.navigation a, #content div.navigation a:visited {
  text-decoration  : none;
  color            : #006600;
  background-color : #ffffff;
}

#content div.navigation a:hover, #content div.navigation a:active {
  text-decoration  : none;
  color            : #ffffff;
  background-color : #006600;
}

#content div.posting {
  margin           : 0 0 1em 0;
  text-align       : justify;
}

#content div.posting hr {
  margin           : 1em 0 1em 0;
  border           : 3px #999999 ridge;
}

#content p.postmetadata {
  background-color : #ffffff;
  color            : #333333;
  border           : 8px #00ff00 ridge;
  margin           : 0 2em 0 2em;
  padding          : .5em;
  text-indent      : 0;
  text-align       : justify;
  font-size        : 90%;
  font-style       : italic;
}

#content p.break {
  clear            : both;
}

#content li {
  margin           : 0;
  padding          : .1em 0 0 0;
  text-align       : left;
  font-weight      : normal;
}

#content li.text {
  padding-top      : .5em;
}  

#content ol.commentlist, #content #commentform input, #content #commentform textarea {
  font-size        : .9em;
}

#content ol.commentlist li {
  text-align       : left;
  font-weight      : bold;
}

#content ol.commentlist cite, #content ol.commentlist cite a {
  font-weight      : bold;
  font-style       : normal;
  font-size        : 1.1em;
} 

#content ol.commentlist p {
  font-weight      : normal;
  line-height      : 1.5em;
  text-transform   : none;
}

#content ol.commentlist ul li, #content ol.commentlist ol li {
  font-weight      : normal;
}

#content ol.commentmetadata {
  font-weight      : normal;
} 

#content .invers {
  padding-top      : 0;
  background-color : #000000;
  color            : #ffffff;
}

#content .strike {
  text-decoration  : line-through;
}

#content hr {
  border           : 3px #999999 ridge;
}  

#content table {
  margin           : 0;  
  border           : 1px #000000 solid;
  padding          : 0;
}

#content table.left {
  float            : left;
  margin           : 0 1em 0 0;
}

#content tr {
  margin           : 0;
  padding          : 0;
}

#content th {
  border-right     : 1px #000000 solid;
  border-bottom    : 1px #000000 solid;
  margin           : 0;
  padding          : 0 .2em 0 .2em;
  font-style       : bold;
  text-align       : center;
  vertical-align   : center;
}

#content td {
  border-right     : 1px #000000 solid;
  border-bottom    : 1px #000000 solid;
  margin           : 0;
  padding          : .1em .2em .1em .2em;
  vertical-align   : top;
  text-align       : left;
}

#content td.greycol {
  background-color : #dddddd;
  color            : #000000;
}

#content td.right {
  text-align       : right;
}

#content td p {
  vertical-align   : top;
  margin           : 0;
  text-indent      : 0;
}  

#content td.sub {
  font-size        : 80%;
  letter-spacing   : -.1em;
}

#content table.chatlog { 
  border            : 0;
  margin            : 0;
  padding           : 0;
}

#content td.chatlog {
  border           : #ffffff 2px solid;
  margin           : 0;
  padding          : 0;
}

#content div.picleft {
  margin           : 1em 0 .5em 0;
  padding          : 0 2em 0 0;
  float            : left;
}

#content div.picright {
  margin           : 1em 0 .5em 0;
  padding          : 0 0 0 2em;
  float            : right;
}

#content div.avatar {
  margin           : 0 0 .5em 0;
  padding          : 0;
  float            : right;
}

#content div.console {
  background-color : #333333;
  color            : #99ff99;
  text-align       : left;
  overflow         : auto;
  margin           : .5em 0 .2em 0;
  padding          : .5em;
}

#content div.console p {
  text-align       : left;
  text-indent      : 0;
  font-family      : FreeMono, Liberation Mono, Nimbus Mono L, Courier New, monospace;
  font-weight      : bold;
}

#content div.console pre {
  background-color : inherit;
  color            : inherit;
}

#content pre {
  font-family      : Lucida Console, Courier New, Courier, monospace;
}

#content .write {
  font-family      : Times, serif;
  font-style       : italic;
}

#content .unprop {
  font-family      : Lucida Console, Liberation Mono, Courier New, Courier, monospace;
  font-style       : normal;
  font-weight      : bold;
}

#content dt {
  padding          : 1em 0 .5em 0;
  font-weight      : bold;
  font-style       : italic;
}

#content dd {
  padding-top      : .5em;
  text-align       : justify;
  line-height      : 1.5em;
}

#content dd ul li {
  padding-top:     : .5em;
  text-align       : left;
  line-height      : 1em;
}

#content blockquote {
  margin:          : 1em .5em 1em .5em;
  padding          : .2em .5em .2em .5em;
  text-align       : justify;
  text-indent      : 0;
  background-color : #cccccc;
  color            : #003300;
}

#content blockquote.tweet {
  width            : 545px;
  background-color : #ffffff;
  color            : #000000;
  border           : 1px #000000 solid;
}

#content blockquote.tweet img {
  float            : left;
  margin           : 0 1em .5em 0;
  border           : 0;
}

#content blockquote.tweet div.tweetcontent {
  margin           : 0 .5em 0 60px;
}

#content blockquote.tweet p {
  margin           : .2em 0 0 0;
  text-align       : left;
  text-indent      : 0;
}

#content blockquote.tweet a.permlink {
  background-color : inherit;
  color            : #666666;
  text-decoration  : none;
  font-size        : 80%;
  font-style       : italic;
}

#content a:link, #content a:visited {
  color            : #006600;
  background-color : transparent;
  text-decoration  : none;
}

#content a:hover,#content a:active {
  color            : #000000;
  background-color : #00ff00;
  text-decoration  : none;
}

#content a.graflink,#content a.graflink:hover {
  border           : 0;
  color            : #ffffff;
  background-color : transparent;
}


div#sidebar {
  float            : right;
  width            : 28%;
  margin           : 1em 1em 0 1em;
  padding          : 0 .5em 0 .5em;
  border           : 5px #999999 ridge;
  background-color : #333333;
  color            : #00ff00;
  text-align       : left;
}

#sidebar div#twitter {
  border           : 3px #999999 ridge;
  background-color : #ffffff;
  color            : #000000;
  margin           : 0 1em 0 1em;
  padding          : 0 .5em 0 .5em;
}

#sidebar ul.menu {
  list-style-type  : none;
  padding          : 0 0 0 1em;
  color            : #00ff00;
}

#sidebar ul.menu li {
  font-size        : 120%;
  margin           : 1em 0 0 0;
} 

#sidebar ul.menu li ul {
  list-style-type  : square;
}

#sidebar ul.menu li ul li {
  margin           : .3em 0 0 0;
  padding          : .2em .5em .2em .5em;
  font-size        : 80%;
}

#sidebar a {
  text-decoration  : none;
  background-color : #333333;
  color            : #00ff00;
  padding          : .2em .5em .2em .5em;
} 

#sidebar a:hover {
  background-color : #00ff00;
  color            : #333333;
}

#sidebar a.graflink,#content a.graflink:hover {
  border           : 0;
  color            : #ffffff;
  background-color : #transparent;
}

#sidebar h4 {
  margin-left      : 1em;
  background-color : transparent;
  color            : #00ff00;
}

#sidebar p.tagcloud {
  text-align       : center;
  margin           : 0 1em 0 1em;
}

#sidebar hr {
  border           : 1px #999999 solid;
  width            : auto;
  margin           : .5em 0 .5em 0;
} 


div#footer {
  clear            : both;
  margin           : 2em 0 0 0;
  background-color : #333333;
  padding          : 10px;
  border-top       : 8px #999999 ridge;  
}
 
#footer p {
  font-family      : Liberation Mono, Lucida Console, Courier New, monospace;
  text-align       : center;
  font-size        : 80%;   
  text-indent      : 0;     
}

#footer p a, #footer p a:link, #footer p a:visited {
  text-decoration  : none;
  color            : #00ff00;
  background-color : transparent;
}

#footer p a:hover, #footer p a:active {
  text-decoration  : none;
  color            : #000000;
  background-color : #00ff00;
}