/* Design attributes that respond to the current environment (device,
   screen dimensions etc.) are always defined in the respective @media
   sections and never in the general section. Rationale: serves as a
   reminder that the respective attribute will behave differently for
   different environments. Also, while redundant, all relevant
   attributes for a design are always in view. */

/* GENERAL STYLES */

/* Background set to background color of footer to fill the remainder of the page.
   font-size according to https://developers.google.com/speed/docs/insights/UseLegibleFontSizes */
body {
    margin: 0px ;
    padding: 0px ;
    font-size: 16px ;
    font-family: Trebuchet,Trebuchet MS,DejaVu Sans,sans-serif;
    background: rgb(40, 40, 40) ;
    color: rgb(251, 251, 251) ;
    }

h2 {
    font-size: 160% ;
    margin: 3ex 0em 1ex 0ex ;
    }
/* border-left: solid 5px rgb(248, 128, 0) ;
   padding-left: 1ex ; */


h3 {
    font-size: 130% ;
    margin: 3ex 0em 1ex 0ex ;
    }

p.articlemeta {
    font-size: 80% ;
    color: rgb(128, 128, 128) ;
    }

p {
    line-height: 150% ;
    }


a:link {
    color: rgb(248, 128, 0) ;
    text-decoration: none ;
    }

a:hover {
    color: rgb(255, 160, 0) ;
    text-decoration: none ;
    }

a:visited {
    color: rgb(248, 128, 0) ;
    }

div.clearcolumnswithline {
    clear: both ;
    min-height: 2ex ;
    border-bottom: solid 1px rgb(248, 128, 0) ;
    }

div.clearcolumnswithline + p {
    margin-top: 4ex ;
    }

footer {
    margin: 0px ;
    padding: 1em 1em 1em 3em ;
    font-size: 80% ;
    min-height: 20% ;
    background: rgb(40, 40, 40) ;
    color: rgb(192, 192, 192) ;
    }

footer ul#navigation {
    margin: 0px ;
    padding: 0px ;
    line-height: 200% ;
    list-style: none inside ;
    }

footer ul#navigation li a:link {
    border-bottom: none ;
    }

footer ul#navigation li a:hover {
    color: rgb(196, 196, 196) ; 
    }


/* RESPONSIVE STYLES */

/* Default width: desktop screen */
@media only screen and (min-width: 1024px)
{
    pre {
        margin: 0px ;
        padding: 1em ;
        background: rgb(64, 64, 64) ;
        color: rgb(240, 240, 240) ;
        }

    header {
        padding: 1em 1em 1em 3em ;
        margin: 0px ;
        border-top: solid 2ex rgb(0, 0, 0) ;
        background: rgb(255, 255, 250) ;
        }

    /* TODO: div.centered umbenennen -> der div ist zwar zentiert beim Rauszoomen, aber der Inhalt absichtlich nicht */
    div.centered {
        margin: 0px auto ;
        padding: 0px ;
        max-width: 1280px ;
        }

    header h1 {
	display: inline ;
        margin: 0px ;
	padding: 0px ;
	line-height: 100% ;
        }

    nav {
        display: inline ;
	vertical-align: top ;
        }

    header ul#navigation {
        display: inline ;
        }

    header ul#navigation li {
        margin: 0px 3em 0px 0px ;
        display: inline ;
        }

    header ul#navigation li a:link {
        border-bottom: none ;
        }

    header ul#navigation li a:hover {
        padding: 0px 0px 1ex 0px ;
        border-bottom: solid 3px rgb(128, 128, 128) ;
        }

    main {
        margin: 0px ;
        min-height: 300px ;
        border-top: solid 1px rgb(250, 250, 250) ;
        background: rgb(0, 0, 0) ;
        padding: 1em 1em 1em 3em ;
        }

    div.columnsmall {
        width: 14% ;
        min-width: 14% ;
        margin: 0px 3em 0px 0px ;
        padding: 0px ;
        float: left ;
        }

    div.columnmedium {
        width: 28% ;
        min-width: 28% ;
        margin: 0px 3em 0px 0px ;
        padding: 0px ;
        float: left ;
        }

    div.columnlarge {
        width: 56% ;
        min-width: 56% ;
        margin: 0px 3em 0px 0px ;
        padding: 0px ;
        float: left ;
        }

    div.clearcolumns {
        clear: both ;
        }
}

/* A little smaller: tablets, small laptops etc. */
@media only screen and (min-width: 641px) and (max-width: 1023px)
{
    pre {
        margin: 0px ;
        padding: 1em ;
        background: rgb(64, 64, 64) ;
        color: rgb(240, 240, 240) ;
        }

    header {
        padding: 1em 1em 1em 3em ;
        margin: 0px ;
        border-top: solid 2ex rgb(0, 0, 0) ;
        background: rgb(255, 255, 250) ;
        }

    div.centered {
        margin: 0px auto ;
        padding: 0px ;
        max-width: 1280px ;
        }

    header h1 {
        margin: 0px ;
	line-height: 100% ;
        }

    nav {
        }

    header ul#navigation {
        margin: 1em 0px 0px 0px ;
        padding: 0px ;
	line-height: 200% ;
        }

    header ul#navigation li {
        margin: 0px 3em 0px 0px ;
        display: inline ;
        }

    header ul#navigation li a:link {
        border-bottom: none ;
        }

    header ul#navigation li a:hover {
        padding: 0px 0px 1ex 0px ;
        border-bottom: solid 3px rgb(128, 128, 128) ;
        }

    main {
        margin: 0px ;
        min-height: 300px ;
        border-top: solid 1px rgb(250, 250, 250) ;
        background: rgb(0, 0, 0) ;
        padding: 1em 1em 1em 3em ;
        }

    div.columnsmall {
        width: 14% ;
        min-width: 14% ;
        margin: 0px 3em 0px 0px ;
        padding: 0px ;
        float: left ;
        }

    div.columnmedium {
        width: 25% ;
        min-width: 25% ;
        margin: 0px 3em 0px 0px ;
        padding: 0px ;
        float: left ;
        }

    div.columnlarge {
        width: 56% ;
        min-width: 56% ;
        margin: 0px 3em 0px 0px ;
        padding: 0px ;
        float: left ;
        }

    div.clearcolumns {
        clear: both ;
        }
}

/* Phones in landscape view */
@media only screen and (min-width: 480px) and (max-width: 640px)
{
    pre {
        margin: 0px ;
        padding: 1em ;
        background: rgb(64, 64, 64) ;
        color: rgb(240, 240, 240) ;
        }

    header {
        padding: 1em 1em 1em 3em ;
        margin: 0px ;
        border-top: solid 2ex rgb(0, 0, 0) ;
        background: rgb(255, 255, 250) ;
        }

    div.centered {
        margin: 0px auto ;
        padding: 0px ;
        max-width: 1280px ;
        }

    header h1 {
        margin: 0px ;
	line-height: 100% ;
        }

    nav {
        }

    header ul#navigation {
        margin: 1em 0px 0px 0px ;
        padding: 0px ;
	line-height: 200% ;
        }

    header ul#navigation li {
        margin: 0px 3em 0px 0px ;
        display: inline ;
        }

    header ul#navigation li a:link {
        border-bottom: none ;
        }

    header ul#navigation li a:hover {
        padding: 0px 0px 1ex 0px ;
        border-bottom: solid 3px rgb(128, 128, 128) ;
        }

    main {
        margin: 0px ;
        min-height: 300px ;
        border-top: solid 1px rgb(250, 250, 250) ;
        background: rgb(0, 0, 0) ;
        padding: 1em 1em 1em 3em ;
        }

    img.logo {
        width:48px ;
        }

    div.columnsmall {
        }

    div.columnmedium {
        }

    div.columnlarge {
        }

    div.clearcolumns {
        }
}

/* Very small: mobile phones etc. */
@media only screen and (max-width: 479px)
{
    pre {
        font-size: 80% ;
        margin: 0px ;
        padding: 1em ;
        background: rgb(64, 64, 64) ;
        color: rgb(240, 240, 240) ;
        }

    header {
        padding: 1em ;
        text-align: center ;
        margin: 0px ;
        border-top: solid 1ex rgb(0, 0, 0) ;
        background: rgb(255, 255, 250) ;
        }

    div.centered {
        }

    header h1 {
	line-height: 100% ;
    }

    header h1 img {
        width: 100% ;
        height: 100% ;
    }

    nav {
        }

    header ul#navigation {
        margin: 0px ;
	padding: 0px ;
	list-style: inside none ;
	line-height: 200% ;
        }

    header ul#navigation li {
        margin: 0px ;
	padding: 0px ;
        }

    header ul#navigation li a:link {
        border-bottom: none ;
        }

    header ul#navigation li a:hover {
        }

    main {
        margin: 0px ;
        min-height: 300px ;
        border-top: solid 1px rgb(250, 250, 250) ;
        background: rgb(0, 0, 0) ;
        padding: 1em ;
        }

    img.logo {
        width:48px ;
        }

    div.columnsmall {
        }

    div.columnmedium {
        }

    div.columnlarge {
        }

    div.clearcolumns {
        }
}