/**
 * Stylesheet für Eingedenk.de
 * Autor: Mirko Westermeier, mirko@westermeier.de
 */

/* Schriften */

@font-face {
    font-family     : 'union';
    src             : url('/fonts/union.ttf');
}

@font-face {
    font-family     : 'unionbd';
    src             : url('/fonts/unionbd.ttf');
}

/* Allgemein */

body {
    font-family     : 'Lucida Grande', Helvetica, sans-serif;
    color           : black;
    background-color: white;
    font-size       : 15px;
}

p, ul, ol, dl, th, td, address {
    line-height     : 150%;
}

strong {
    font-weight     : bold;
}

em {
    font-style      : italic;
}

a {
    text-decoration : underline;
}

a img {
    border          : none;
}

/* Layout */

body {
    margin          : 0;
    padding         : 0;
    background      : gray url('/images/bg.jpg') repeat;
}

#canvas {
    width           : 960px;
    margin          : 0 auto;
    padding         : 0 10px;
    background      : white url('/images/canvasbg.jpg') repeat-y top left;
}

#header {
    width           : 960px;
    height          : 360px;
    margin          : 0;
    padding         : 1px 0 0;
    background      : white url('/images/header.jpg') no-repeat top left;
}

#header #info {
    width           : 435px;
    height          : 120px;
    margin          : 169px 0 0 450px;
    padding         : 20px 40px 20px 25px;
    border          : solid #111;
    border-width    : 10px 0 10px 10px;
    color           : white;
    background      : black url('/images/infobox.jpg') no-repeat top left;
    font-size       : 13px;
}

#header #info img {
    float           : left;
    border          : 5px solid #222;
}

#header #info a:hover img {
    border-color    : #444;
}

#header #info h2 {
    margin          : 0;
    padding         : 0;
    font-family     : union, serif;
    font-weight     : normal;
    font-size       : 1.5em;
}

#header #info p {
    margin          : .66em 0;
}

#header #info h2, #header #info p {
    margin-left     : 95px;
}

#eingedenk {
    float           : left;
    margin          : 50px 0 0 70px;
}

#spacershit {
    height          : 100px;
}

#navi {
    float           : right;
    width           : 350px;
    height          : 15px;
    line-height     : 100%;
    font-size       : 13px;
    margin          : 0;
    padding         : 10px 0;
    background-color: #e8e8e8;
}

#navi li {
    display         : inline;
    padding         : 10px 15px;
    border-left     : 1px solid #ccc;
}

#navi li:first-child {
    border-left     : none;
}

#navi li a {
    color           : black;
    text-decoration : none;
    padding         : 0 2px 3px 2px;
}

#navi li a:hover {
    border-bottom   : 3px solid #bbb;
}

#content {
    margin          : 30px 80px 0 320px;
    padding         : 0;
}

#content h1, #content h2, #content h3 {
    font-family     : union, serif;
    font-weight     : normal;
    padding         : 0;
    line-height     : 120%;
}

#content h1 {
    font-size       : 2em;
    margin          : 1.5em 0 .5em;
    padding-bottom  : .4em;
    border-bottom   : 1px solid #ccc;
}

#content h2 {
    font-size       : 1.5em;
    margin          : 1.5em 0 1em;
}

#content h3 {
    font-family     : 'Lucida Grande', Helvetica, sans-serif;
    font-size       : 1.1em;
    margin          : 1.5em 0 1em;
    font-weight     : bold;
}

#content a {
    color           : black;
}

#content a:visited {
    color           : #666;
}

#content h2 a {
    text-decoration : none;
    padding-bottom  : .1em;
}

#content h2 a:hover {
    border-bottom   : 2px solid #ccc;
}

#content h2 a:visited {
    color           : black;
}

#footer {
    clear           : both;
    margin          : 50px 0 0;
    padding         : 60px 60px 40px;
    font-size       : .7em;
    color           : #aaa;
    background      : #222 url('/images/footer.jpg') no-repeat 30px 30px;
    line-height     : 140%;
    border-top       :2px solid #111;
}

#footer .box {
    width           : 205px;
    float           : left;
    margin          : 0 0 2em 50px;
}

#footer .box:first-child {
    margin-left     : 80px;
}

#footer address {
    font-style      : normal;
    font-size       : 1.2em;
}

#footer p {
    margin          : 0 0 1em;
}

#footer a {
    color           : #ccc;
}

#footer #thanks {
    list-style-image: url('/images/heart.jpg');
    margin          : 0 0 1em;
    padding         : 0;
}

#footer #thanks li {
    margin          : 1.5em 0 0 18px;
    padding         : 0;
}

#footer #clickies {
    list-style-image: url('/images/miniblitz.jpg');
    margin          : 0 0 1em;
    padding         : 0;
}

#footer #clickies li {
    margin          : 1.5em 0 0 25px;
    padding         : 0;
}

#footer #sian {
    margin-top      : 20px;
}

#footer .bla {
    clear           : both;
    color           : #666;
    font-size       : .9em;
    margin-left     : 80px;
}

/* Speziell: Große Artikelliste */

#articles .article {
    padding         : 1em 0;
    border-top      : 1px solid #ddd;
}

#articles .article:first-child {
    border-top      : none;
}

#articles .article h2.title {
    margin          : .5em 0 .5em;
}

/* Speziell: Große Artikelliste und Artikel */

.article .formalia {
    font-size       : .9em;
    color           : #666;
}

.article .formalia .tags a {
    margin          : 0;
    padding         : .1em .3em;
    text-decoration : none;
    font-weight     : bold;
}

.article .formalia .tags a:hover {
    background-color: #eee;
    border-radius   : .5em;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
}

#addtoany {
    margin          : 2em 0;
}

#pager {
    text-align      : center;
    margin          : 1em 0 0;
    padding         : 0;
    line-height     : 170%;
}

#pager .separator {
    margin          : 0 1ex;
    color           : #aaa;
}

#pager .inactive {
    color           : #aaa;
}

/* Speziell: Kleine Artikelliste */

.article-list .title {
}

.article-list .date {
    font-size       : .9em;
    color           : #666;
}

/* Speziell: Tagcloud */

#tagcloud {
    line-height     : 2.2em;
}

ul#tagcloud li {
    display         : inline;
}

#tagcloud a:link, #tagcloud a:visited {
    margin          : 0;
    padding         : 0 .5em .1em;
    text-decoration : none;
    color           : black;
}

#tagcloud a:hover {
    background-color: #ccc;
    border-radius   : .5em;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
}