@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(Ubuntu.woff) format('woff');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(Ubuntu-Bold.woff) format('woff');
}

html {
    background: #444 url("debut_dark.png") repeat;
    color:#000000;
    font-family:Ubuntu,Verdana,sans-serif;
    font-size:120%;
}

h1 {
    font-size: 140%;
}

h2 {
    font-size: 125%;
}

h3 {
    font-size: 110%;
}



#page {
    width:40em;
    margin-left: auto;
    margin-right: auto;
    background-color: #f4f4f2;
    background-image: url('header.png');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 25px;
}

#header {
    min-height: 210px;
    margin-bottom: 20px;
    position: relative;
}

#navigation {
    width: 140px;
    float: left;
    background-color: #be0000;
    text-align: left;
    font-weight: bold;
    border-radius: 10px;
    position: relative;
    right: 45px;
    box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.75);
    padding: 10px;
}

#navigation a {
    padding: 5px;
}

#navigation a:hover {
background-color: #ff0000;
    border-radius: 10px;
}

#navigation a:link, #navigation a:visited {
    display: block;
    color: #000000;
    text-decoration: none;
}

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

#navigation .active {
    background-color: #dd0000;
    border-radius: 10px;
}

#navigation ul ul {
    margin-left: 20px;
}

#navigation ul a + ul {
    visibility: hidden;
    height : 0px;
}

#navigation ul a.active + ul, #navigation ul a.child_active + ul {
    visibility: visible;
    height: auto;
}

#content {
    width: 600px;
    float: left;
}

#content :first-child {
    margin-top: 0px;
}

#footer {
    position: relative;
    top: 20px;
    text-align: center;
    font-size:80%;
}

/* hack to make images not overflow/ */
#content p:after {content: ''; display: block; clear: both;} 

#content img {
    width : 90%;
    margin: 10px;
}

#content img[src*="#links"] {
    float: left;
}

#content img[src*="#rechts"] {
    float: right;
}

#content img[src*="#links-viertel"] {
    width: 25%
}

#content img[src*="#rechts-viertel"] {
    width: 25%
}

#content img[src*="#links-drittel"] {
    width: 33%
}

#content img[src*="#rechts-drittel"] {
    width: 33%
}

#content img[src*="#links-halb"] {
    width: 50%
}

#content img[src*="#rechts-halb"] {
    width: 50%
}

@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
    body {
        background-image: url("debut_dark_@2X.png");
        -webkit-background-size: 200px 200px;
        -moz-background-size: 200px 200px;
        -o-background-size: 200px 200px;
        background-size: 200px 200px;
    }
}