/* ============================================================

	Author:	Svend Richter <svend.richter@factorial-seven.com>
	Date:	14.11.2012
	File:	css-layout.css


	*** Table of contents ***

	1. General styles and helper classes
		1.1 Buttons
		1.1.1 Read on
		1.1.2 Social Links
		1.2 Thumbnails
	2. Layout
		2.1 Header navigation
		2.2 Blog
		2.3 Content
		2.4 Slider
		2.5 Gallery
		2.6 Comments
		2.7 Sidebar
		2.8 Widgets
		2.9 Formulars
	X. Clearfix


	*** Color Palette ***

	#4c4c4c - Text grey
	#eeeeee - Footer background

	#e49d05	- Corporate color
	#ab7500	- Corporate color dark

	e49d05
	ab7500

   ============================================================ */


/* ============================================================
	1. General styles and helper classes
   ============================================================ */

hr {
    border: 0;
    height: 1px;
    background: #000;
}

.button:hover,
#header .nav a:hover {
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.breadcrumbs {
    margin: 0 0 3em 0;
}


/*	1.1 Buttons
   ============================================================ */

.button {
    border: 1px solid #000;
    padding: 0.5em 1em;
    margin: 0.5em 0;
    display: block;
    color: #e49d05;
    background: #fff;
}

.button:hover {
    background: #e49d05;
    color: #fff;
}

.button:active {
    background: #ab7500;
}


/*	1.1.1 Read on
   ============================================================ */

.readon {
    position: absolute;
    right: 0;
}


/*	1.1.2 Social-Links
   ============================================================ */


/*	1.2 Thumbnails
   ============================================================ */

.thumb {
    margin: 0;
    padding: 5px;
    background: #fff;
    display: block;
    border: 1px solid #000;
}

.thumb img {
    display: block;
}

.thumb:hover {
    background: #e49d05;
}

.thumb.small,
.thumb.small img {
    width: 50px;
    height: 50px;
}

.thumb.big,
.thumb.big img {
    width: 150px;
    height: 150px;
}

.content-main img,
.content-main iframe {
    max-width: 100%;
}

.article .article-content .thumb.big {
    float: left;
    margin: 0 20px 20px 0;
    height: auto;
}

.article .article-content .thumb.big img {
    height: auto;
}

.article .article-content .thumblist .thumb {
    float: left;
    margin: 0 1em 1em 0;
}


/* ============================================================
	2. Layout
   ============================================================ */

body {
    /*background: url(images/rock_pop_preis.png) no-repeat top right;*/
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1em;
}

#header {
    margin: 0;
    padding: 0;
    background: #fff;
    grid-column: 1 / 2;
    grid-row: 1;
}

.header-content h1 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    justify-items: center;
    column-gap: 1em;
}

.rock-pop,
.logo {
    display: inline-block;
}

.logo {
    grid-column-start: 1 / 2;
    grid-row: 1;
}

.rock-pop {
    width: 75px;
    height: 75pxpx;
    grid-column-start: 2 / 3;
    grid-row: 1;
}

#content {
    padding: 3em 2.5% 0;
    background: rgba(255, 255, 255, 0.75);
    grid-column: 1 / 2;
    grid-row: 2;
}

#footer {
    grid-column: 1 / 2;
    grid-row: 3;
}

@media (min-width: 655px) {
    .grid-container {
        grid-template-columns: 1fr 3fr;
    }
    #header {
        grid-column: 1 / 2;
        grid-row: 1;
    }
    #content {
        grid-column: 2 / 3;
        grid-row: 1;
    }
    #footer {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}


/*	2.1 Navigation
   ============================================================ */

#header .nav {
    list-style: none;
    padding: 0 1em;
}

#header .nav a {
    border: 1px solid #000;
    padding: 0.5em 1em;
    margin: 0.5em 0;
    display: block;
    font-size: 1.25em;
}

#header .nav a:hover {
    background: #e49d05;
    color: #fff;
}

#header .nav a:active {
    background: #ab7500;
}

#header .nav .selected a {
    background: #e49d05;
    color: #fff;
}

#footer {
    text-align: center;
    margin: 2em 0 1em;
}

#footer .nav {
    padding: 0;
}

#footer .nav li {
    display: inline;
}

#footer .nav li a {
    padding: 0.5em 1em;
}


@media (max-width: 655px) {
    .nav li,
    .nav.responsive .burger{
        display: none;
    }
    .nav .burger,
    .nav.responsive li {
        display: block;
    }
}

@media (min-width: 655px) {
    .nav .burger {
        display: none;
    }
}


/*	2.2 Blog
   ============================================================ */

.article {
    margin: 0 0 2em 0;
    position: relative;
}

.article .postinfo {
    list-style: none;
    padding: 0;
}

.article .postinfo li {
    display: inline;
}

.article .postinfo li.date {
    padding: 0 1em 0 0;
    margin: 0 1em 0 0;
    /*border-right: 1px solid #000;*/
}


/*	2.3 Content
   ============================================================ */


/*	2.4 Slider
   ============================================================ */


/*	2.5 Gallery
   ============================================================ */


/*	2.6 Comments
   ============================================================ */


/*	2.7 Sidebar
   ============================================================ */


/*	2.8 Widgets
   ============================================================ */


/*	2.9 Formulars
   ============================================================ */

form {
    padding: 1em;
    margin: 0;
}

form label,
form input,
form textarea {
    width: 100%;
    margin: 0 0 1em 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

form span.email {
    display: none;
}

form textarea {
    min-width: 100%;
    max-width: 100%;
    height: 10em;
}

form .button {
    width: auto;
    float: right;
}


/*	2.10 Datepicker
   ============================================================ */


/* ============================================================
	X. Clearfix
   ============================================================ */


/* For modern browsers */

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}


/* For IE 6/7 (trigger hasLayout) */

.clearfix {
    zoom: 1;
}