/*  Schule Stielow CSS */

* {
        box-sizing: border-box;
}

html {
        background: url() no-repeat;
        background-color: lightgrey;
        color: black;
}

body {
        margin: 0 auto; /* Standardeinstellung für Außenabstand im Browserfenster */
        padding: 1%; /* Abstand der Seite zum Browserfenster */
        max-width: 75em; /*Begrenzung der Textbreiten */
        font-family: verdana, arial, sans-serif; /* Schriiftart */
        font-size: 0.8em;         /* Textgröße 0,8-fache des m der Standardschriftgröße der Website */
        border: 1px solid blue; /* optische Abgrenzung der Website zum Hintergrund */
        border-top: 0; /* oben keine Linie */
        background-color: white; /* Hintergrundfarbe weiß */
}

header {
        background-color: blue;
        height: 64px;
        margin: 0;
        padding: 0 1em;
        font-size: 3em;
        color: white;
}

header a#logo {
        color: white;
        text-decoration: none;
}

header a#logo span {
        font-family: Courier New;
        font-weight: bold;
}

a {
        color: blue;
        text-decoration: underline;
}

a:visited {
        color: red;
}

main {
        padding: 0 1%;
        line-height: 1.5em;
}

section {
        display: inline-block;
        width: 73%;
}


aside {
        width: 25%;
        float: right;
        clear: right;
        display: inline-block;
        padding: 0em 1% 1em;
        margin: 5em 1% 0 1%;
        border-left: 1px dotted grey;
        font-size: 0.9em;
}

aside dt {
        font-size: 1.2em;
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 0.5em;
        margin-top: 1em;
        border-top: 1px dotted grey;
}

aside dd {
        padding: 0;
        margin: 0.2em 0;
}

h1 {
        font-size: 2.7em;
        font-weight: normal;
        line-height: 0.8em;
        padding: 0.6em 0 0.2em 2%;
        margin: 0;
        border-bottom: 2px dashed blue;
}

h2,
h3,
h4 {
        font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
        color: blue;
        font-family: Georgia, "Times New Roman", Times, serif;
}

dl {
        margin-bottom: 50px;
}

dl dt {
        float: left;
        font-weight: bold;
        margin-right: 5px;
        padding: 5px;
        width: 50%;
}

dl dd {
        margin: 2px 0;
        padding: 5px 0;
}

img {
        border: solid 2px blue;
        padding: 2px;
}

.fleft {
        float: left;
        margin: 0.1 em 0.2em 0;
        width: 33%;
}

.fright {
        float: right;
        margin: 0 0 0.2em 1em;
        padding: 1px;
        width: 33%;
}

.fright1 {
        float: right;
        margin: 0 0 0.2em 1em;
        padding: 1px;
        }


footer {
        clear: both;padding: 2%;
        text-align: center;
        border-top: 2px dotted blue;
}

footer .copy span {
        margin: 0 auto;
        display: block;
}

nav ul {
        background: darkblue;
        padding: 5px 5%;
        margin: 0;
        text-align: right;
        color: white;
}

nav ul li {
        font-size: 1.2em;
        display: inline;
        list-style-type: none;
        border-left: 1px solid white;
        padding: 0 .5em 0 .5em;
        font-weight: bold;
}

nav ul li a {
        color: white;
        padding: 0.1em 1em;
        border-radius: 0.2em;
        text-decoration: none;
}

nav ul li a:hover {
        color: blue;
        background: grey;
        opacity: 0.8;
}

/* Mobile Layout */


@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4)
  and (orientation: portrait)
 {

        section,
        aside {
                float: none;
                display: block;
                width: 100%;
        }

        .fleft,
        .fright {
                width: 30%;
        }
                header a#logo,
                header a#logo span {
                font-size: 0.8em;
        }

        nav ul li {
                display: block; /* vertikal */
                border-left:1px solid darkblue;
        }

}

@media screen
  and (max-width: 600px)
 {

        section,
        aside {
                float: none;
                display: block;
                width: 100%;
        }

        .fleft,
        .fright {
                width: 30%;
        }
                header a#logo,
                header a#logo span {
                font-size: 0.8em;
        }

        nav ul li {
                display: block; /* vertikal */
                border-left:1px solid darkblue;
        }
 }