/*
	CSS Regeln für stomeck.de

	Farbschema
	----------
	*** Primary Color:

	   var. 1 = #EFEFE4 = rgb(239,239,228)
	   var. 2 = #B3B3AD = rgb(179,179,173)
	   var. 3 = #9B9B4A = rgb(155,155,74)
	   var. 4 = #F7F7EE = rgb(247,247,238)
	   var. 5 = #F7F7F1 = rgb(247,247,241)	/ schmutziges weiß / Hintergrund #container

	*** Secondary Color A:

	   var. 1 = #DCDFD5 = rgb(220,223,213)
	   var. 2 = #A5A7A2 = rgb(165,167,162)
	   var. 3 = #789145 = rgb(120,145,69)	/ grün
	   var. 4 = #ECEFE7 = rgb(236,239,231)	/ hellgrau
	   var. 5 = #EDEFE9 = rgb(237,239,233)	/ hellgrau

	*** Secondary Color B:

	   var. 1 = #EFEDE4 = rgb(239,237,228)	/ hellgrau
	   var. 2 = #B3B2AD = rgb(179,178,173)	/ hellgrau
	   var. 3 = #9B8D4A = rgb(155,141,74)	/ braun-grün
	   var. 4 = #F7F6EE = rgb(247,246,238)	/ schmutziges weiß
	   var. 5 = #F7F6F1 = rgb(247,246,241)	/ schmutziges weiß

	*** Complementary Color:

	   var. 1 = #9D99A0 = rgb(157,153,160)	/ grau
	   var. 2 = #767478 = rgb(118,116,120)	/ dunkelgrau / Farbe Überschriften
	   var. 3 = #553268 = rgb(85,50,104)	/ dunkellila
	   var. 4 = #CDC9CF = rgb(205,201,207)	/ hellgrau
	   var. 5 = #CECACF = rgb(206,202,207)	/ hellgrau
*/


/*
	Schriften
	=========
*/

@import url(https://fonts.googleapis.com/css?family=Lato:700|Archivo+Narrow|Anonymous+Pro|EB+Garamond);
/*@import url(http://weloveiconfonts.com/api/?family=fontawesome);*/
@import url(https://weloveiconfonts.com/api/?family=entypo);

/* Serif */

blockquote, section p, address {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
}


/*Sans-serif */

footer, section time {
    font-family: 'Archivo Narrow', sans-serif;
    /* font-size: 1em; */
}

h1, h2, h3, h1 a:link {
    font-family: 'Lato', sans-serif;
}


/* Monospaced */

.number {
    font-family: 'Anonymous Pro', monospace;
}


/* Symbole */

[class*="entypo-"]:before {
    font-family: 'entypo';
    font-size: 1.5em;
}


/*
	Elemente
	========
*/

html, body {
    font-size: 16px;
    background-color: #efefe4;
    font-family: serif;
    color: #333;
    line-height: 150%;
}

h1, h2, h3 {
    color: #767478;
}

h1 {
    font-size: 2.1em;
    margin: 0 4px;
    padding: 10px 0 0.5em 0;
    border-bottom: 1px solid #767478;
    text-shadow: 4px 4px 8px #767478;
}

h1 a:link {
    color: steelblue;
    text-decoration: none;
    transition: color 0.3s ease;
}

h1 a:visited {
    color: steelblue;
}

h1 a:hover {
    color: cornflowerblue;
}

h2 {
    font-size: 1.2em;
    margin: 0.9em 10px 10px;
    padding-bottom: 0.3em;
}

h3 {
    font-size: 1em;
    margin: 20px 10px 0 10px;
}

a:link {
    color: #553268;
    text-decoration: none;
}

a:visited {
    color: #553268;
    text-decoration: none;
}

blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: 3em;
    margin-right: 3em;
    background-color: rgba(211, 211, 211, 0.3);
    padding: 1.5em;
    font-style: italic;
    border-left: 3px solid #333;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

nav ul {
    margin-left: 2em;
    margin-top: 1em;
}

nav a {
    padding: 2px 3px;
    color: steelblue;
    text-decoration: none;
    border-bottom: 1px dotted gray;
    border-radius: 3px;
    transition: color 0.3s, background 0.3s;
}

nav h2 {
    margin-left: 0;
}

nav h2 > a {
    border-bottom: none;
}

nav a:hover {
    background-color: steelblue;
    color: white;
}

nav {
    transition: 0.3s;
}

td {
    padding: 0.5em;
    vertical-align: middle;
}

li {
    margin-bottom: 10px;
}


/*
	Klassen
	=======
*/

.bRounded {
    border-radius: 0.5em;
}

.shadowed {
    box-shadow: 1px 1px 6px rgba(118, 116, 120, 0.5), inset 0 0 28px rgba(0, 0, 0, 0.1);
}

section h2 {
    border-bottom: 1px dotted gray;
}

section p {
    display: inline-block;
    margin: 0.5em 1.5em 1em 1.5em;
}

section > p:first-child {
    margin-top: 1em;
}

/* .no_sidebar {} */

/* .sidebar {} */

section time {
    float: right;
    margin: 0.8em 10px 0 0;
    text-align: right;
    font-size: 0.9em;
    color: gray;
}

.smallH1 {
    font-size: 0.5em;
    vertical-align: top;
    position: absolute;
    right: 1em;
}

.smallIcon {
    height: 22px;
}

section {
    border: 1px solid white;
    background-color: white;
    padding: 1em 1.5em;
    margin-bottom: 2em;
    margin-left: 1.5em;
    margin-right: 1.5em;
}

header img {
    float: left;
    margin-right: 5px;
    height: 40px;
    margin-top: -7px;
}

img.smallRight {
    float: right;
    margin-right: 0.2em;
    margin-top: 0.2em;
    margin-left: 0.5em;
}

nav {
    background-color: white;
    border: 1px solid white;
}

footer {
    padding-bottom: 0.5em;
    color: gray;
    background-color: #F7F7F1;
    border-top: 1px solid #767478;
    font-size: 0.85em;
}

footer a:link {
    color: #0F627C;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:visited {
    color: #0F627C;
    text-decoration: none;
}

footer p {
    margin: 2px 0 0 10px;
    padding: 0;
}

footer time {
    position: absolute;
    right: 10px;
    color: gray;
}

.btn_link {
    border: solid 1px #333;
    border-radius: 1em;
    padding: 10px 60px;
    color: steelblue;
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 2em;
}

a.btn_link {
    color: steelblue;
}

a.btn_link:hover {
    box-shadow: 1px 1px 6px rgba(185, 33, 33, 0.5), inset 0 0 12px rgba(185, 33, 33, 0.3);
}

a.btn_link:visited {
    color: steelblue;
}


/*
	Bereiche
*/

#container {
    border: 1px solid #767478;
    background-color: #F7F7F1;
}


/* || === iPhone 5 === */

@media only screen
    and (max-width: 320px)
    and (max-height: 568px) {
    #container {
        margin: 0;
        border: none;
        font-size: 1.2em;
    }
    /* article {} */
    nav {
        font-size: 0.9em;
    }
    nav ul {
        margin: 0.2em 0 0 0;
        display: inline-block;
    }
    /* nav li {} */
    nav > h2 {
        /* float: left; */
        margin: 0.2em 0 0 0.5em;
        display: inline-block;
        padding: 0;
        font-size: 0.9em;
    }
    nav h2 > a {
        display: none;
    }
    footer {
        font-size: 0.75em;
    }
    h1 {
        font-size: 1.1em;
        margin: 0 10px 0 10px;
    }
    h2 {
        font-size: inherit;
        margin: 0.5em 0.1em 0.1em 0.1em;
    }
    blockquote {
        margin-left: 0.3em;
        margin-right: 0.3em;
        padding: 1em;
    }
    td {
        font-size: 0.8em;
    }
    .shadowed {
        box-shadow: 1px 1px 6px rgba(118, 116, 120, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.1);
    }
    section time {
        font-size: 0.7em;
        margin-top: 0.1em;
        margin-right: 0;
    }
    /* section h3 {} */
    /* header img {} */
    img.smallRight {
        max-width: 100px;
        margin-left: 0.1em;
        margin-right: 0;
    }
    nav {
        vertical-align: middle;
    }
    li {
        float: left;
        text-indent: -5px;
        margin-left: 1em;
        margin-bottom: initial;
    }
    section {
        padding: 0.5em 0.3em;
        margin-bottom: 1.5em;
        margin-left: initial;
        font-size: 1em;
        margin-right: initial;
    }
    section p {
        margin: 0.5em 0.2em;
    }
    section > p:first-child {
        margin-top: initial;
    }
    /* .no_sidebar {} */
    .number {
        font-size: 0.9em;
    }
    footer time {
        font-size: 0.8em;
    }
    /* .smallIcon {} */
}

/* || === iPhone 6, 6s, 7, 8 === */
@media only screen
    and (min-width: 375px)
    and (max-height: 667px)
    and (orientation: portrait)
    and (-webkit-device-pixel-ratio: 2) {
        h1 {
            font-size: 1.3em;
        }

        footer {
            font-size: 0.75em;
        }
}

/* || === iPhone XS === */

@media only screen 
    and (min-width : 375px)
    and (max-height : 812px)
    and (orientation : portrait)
    and (-webkit-device-pixel-ratio : 3) {
        h1 {
            font-size: 1.2em;
        }

        section {
            margin-bottom: 1.5em;
            margin-left: initial;
            margin-right: initial;
            padding: 0.4em;
            font-size: 0.9em;
        }

        section p {
            margin: 0.5em 0.5em 1em 0.5em;
        }

        footer {
            height: 32px;
            font-size: 0.75em;
        }

        #container {
            font-size: 1.2em;
        }

        .shadowed {
            box-shadow: 1px 1px 6px rgba(118, 116, 120, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.1);
        }
}

/* || === iPad === */

@media only screen
    and (min-width: 768px)
    and (max-width: 1024px)
    and (orientation: portrait) {
        section p {
            margin-left: 0.5em;
            margin-right: 0.5em;
        }
        section {
            padding-top: 1.5em;
            padding-left: 2em;
            padding-right: 2em;
            margin-left: 0;
            margin-right: 0;
        }
}

@media only screen
    and (min-width: 768px)
    and (max-width: 1024px)
    and (orientation: landscape) {
        section {
            margin-left: auto;
            margin-right: auto;
            font-size: 1.2em;
            max-width: 720px;
        }

        section time {
            font-size: 0.8em;
        }

        /* section p {} */
        /* .no_sidebar {} */

        .smallRight {
            max-width: 200px;
        }

        blockquote {
            margin-left: 1.5em;
            margin-right: 1.5em;
        }
}