/*  
 * Der gestufte Gestaltungsbogen auf PhilipOstendorf.de
 * März 2015
 *
 */

@font-face{
    font-family: "Ostendorf";
    font-style: normal;
    font-weight: 400;
    src: local("Ostendorf"), url(ostendorf.woff) format("woff");
}html{
    background: url(white.gif) center/800px repeat-y, #600 url(pattern.svg) bottom center/73px fixed;
}body{
    font-family: Ubuntu, sans-serif;
    margin: 0 auto;
    color: #222;
    overflow-y: scroll;
}header{
    width: 700px;
    margin: 50px auto 0;
    padding: 0 100px;
}a{ color: #600;
    text-decoration: none;
    outline: 0;
}a:hover{
    text-decoration: underline;
}header a, header b{
    padding: 0 15px;
}header>a:first-child{
    color: #fff;
    background: #600;
    padding: 73px 10px 10px;
    margin-right: 10px;
}header>a:first-child:hover{
    text-decoration: none;
}h1{
    display: inline;
    font: bold 16px/16px Ostendorf, Ubuntu, sans-serif;
}h2{
    text-align: left;
}.center{
    text-align: center;
}hr{
    background: #600;
    border: 0;
    height: 2px;
}section{
    width: 700px;
    margin: 40px auto;
}p{ text-align: justify;
    line-height: 22px;
}li{
    line-height: 22px;
}li.heading{
    list-style: none;
    font-weight: bold;
    margin: 20px 0 5px -20px;
}blockquote{
    font-style: italic;
    margin: 20px 10px;
    padding-left: 100px;
    min-height: 60px;
}blockquote:before{
    content: "„";
    margin-top: -150px;
    margin-left: -100px;
    font-size: 200px;
    float: left;
    font-family: serif;
    font-weight: bold;
    color: #888;
}cite{
    display: block;
    margin-top: 10px;
    text-align: right;
    color: #888;
}cite:before{
    content: "— ";
}.info{
    cursor: help;
    border-bottom: thin dotted;
}.small{
    font-size: 12px;
}h2.small{
    font-size: 20px;
}code, pre{
    font-family: "Ubuntu Mono", monospace;
    background: #fff;
    padding: 1px 3px;
    border: thin solid #444;
    border-radius: 3px;
}header form{
    display: inline;
}header form>input{
    width: 80px;
    padding: 6px 6px 6px 32px;
    background: url(suche.svg) 6px center/16px no-repeat;
    border: thin solid #aaa;
    margin: 0 0 0 15px;
    transition: 0.5s;
    color: #aaa;
}header form>input:focus{
    outline: 0;
    color: #444;
}

@media print { 
header{
    display: none;
}h2:before{
    content: "Philip Ostendorf: ";
}section:after{
    content: "https://philipostendorf.de/";
    float: right;
}html{
    background: none;
}}