/*
Theme Name: Hinrich Alpers WP Theme
Theme URI: http://www.stadtkreation.de
Author: Johannes Bouchain, based upon Twentytwelve theme by the Wordpress theme
Author URI: http://www.stadtkreation.de
Description: Theme for Hinrich Alpers Pianist website
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: brown, red, simple, musician, pianist, website
Text Domain: hinrichalpers

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

* {
	margin:0;
	padding:0;
	border:0;
	font-family:Arial,Helvatica,sans-serif; }
	
iframe {
	display:none; }

html, body {
	height:100%;
	padding-bottom:1px;
	background:#651f14; }

body {
	text-align:center;
	min-width:320px;
}
	
a:focus,
a:active {
	outline:none;
}
	
p, ul, a, h2, h3, h4 {
	font-size:11px;
	line-height:15px; }
	
h1.entry-title, h2 {
	text-align:left;
	text-transform:uppercase;
	font-weight:bold;
	color:#558a92;
	letter-spacing:1px;
	font-size:11px;
	padding-bottom:8px; }
	
h3, h4 {
	text-align:left;
	font-weight:bold;
	color:#558a92;
	padding-bottom:8px;}

h4 {
	color:black;
	padding-bottom:4px;
}
	
strong {
	color:#558a92; }
	
a {
	text-decoration:none;
	color:#558a92; }
	
a:hover,
a:active,
a:focus {
	color:#bdd7db; }
	
a.post-edit-link {
	background:#bdd7db;
	padding:0 6px;
}
	
a.post-edit-link:hover,
a.post-edit-link:active,
a.post-edit-link:focus {
	color:white;
}

/* main ids */	

#main {
	position:relative;
	margin:40px auto 0;
	text-align:left;
	max-width:798px;
	padding:1px 1px 0 1px;
	background:white;
	min-height:calc(100vh - 60px);
	overflow:hidden; }
	
@media screen and (max-width:767px) {
	#main {
		margin:5px 5px 0 5px;
	}
}
	
#main.konzerte {
	min-height:639px;
}
	
header.site-header {
	position:relative;
	height:200px;
	background:#bdd7db; }
	
@media screen and (max-width:767px) {
	header.site-header {
		height:150px;
	}
}

@media screen and (max-width:499px) {
	header.site-header {
		height:110px;
	}
}

header.site-header .language-switcher {
	position:absolute;
	right:210px;
	top:5px;
}

@media screen and (max-width:767px) {
	header.site-header .language-switcher {
		right:160px;
	}
}

@media screen and (max-width:499px) {
	header.site-header .language-switcher {
		right:120px;
	}
}

header.site-header .language-switcher li {
	list-style:none;
}

header.site-header .language-switcher a:hover,
header.site-header .language-switcher a:focus,
header.site-header .language-switcher a:active {
	color:white;
}
	
header.site-header h1#site-title {
	position:absolute;
	top:50px;
	left:16px;
	width:422px;
	height:26px;
	background:url(images/titel.gif) no-repeat;
	background-size:cover;
}
	
@media screen and (max-width:767px) {
	header.site-header h1#site-title {
		top:40px;
		width:316px;
		height:19px;
	}
}

@media screen and (max-width:499px) {
	header.site-header h1#site-title {
		top:30px;
		width:211px;
		height:13px;
	}
}

@media screen and (max-width:349px) {
	header.site-header h1#site-title {
		width:170px;
		height:10px;
	}
}
	
header.site-header h1#site-title a {
	display:block;
	width:422px;
	height:26px;
	text-indent:-5000px;
	font-size:0; }

header.site-header  div#title-image {
	position:absolute;
	top:0;
	right:0;
	width:200px;
	height:200px;
	background-size:cover;
}

@media screen and (max-width:767px) {
	header.site-header  div#title-image {
		width:150px;
		height:150px;
	}
}

@media screen and (max-width:499px) {
	header.site-header  div#title-image {
		width:110px;
		height:110px;
	}
}

nav#site-navigation {
	position:absolute;
	width:calc(100% - 240px);
	max-width:554px;
	font-size:5px;
	margin-left:34px;
	/*text-align:justify;*/
	bottom:5px;
	/*bottom:-12px*/ }

@media screen and (max-width:767px) {
	nav#site-navigation {
		width:calc(100% - 190px);
	}
}

@media screen and (max-width:499px) {
	nav#site-navigation {
		width:calc(100% - 140px);
		margin-left:20px;
	}
}

nav#site-navigation  ul {
 }
	
nav#site-navigation  h3.menu-toggle,
nav#site-navigation  .assistive-text {
	font-size:0;
	text-indent:-5000px;
}
nav#site-navigation  li {
	display:inline;
	list-style:none;
	padding-right:2px;
}
nav#site-navigation a {
	font-size:11px;
	line-height:16px;
	text-transform:uppercase;
	/*letter-spacing:1px;*/ }
	
nav#site-navigation a:hover,
nav#site-navigation a:active,
nav#site-navigation a:focus {
	color:white; }
	
/* nav#site-navigation li.spacer {
	padding-right:534px;
	height:1px;
	overflow:hidden; }
*/
		
#content {
	margin:0 11px 0 1px;
	padding:28px 0 22px 33px;
	max-width:554px;
	float:left;
	text-align:justify;
	/*hyphens:auto;*/ }
	
@media screen and (max-width:767px) {
	#content {
		max-width:100%;
		float:none;
		margin-right:0;
		padding-right:20px;
	}
}
	
@media screen and (max-width:499px) {
	#content {
		padding:30px 20px 20px;
	}
}

@media screen and (min-width:768px) {
	#main.konzerte #content {
		padding-bottom:100px;
		padding-right:0;
	}
}

@media screen and (max-width:767px) {
	#main.konzerte #content {
		padding-right:0;
	}
}

#content p, 
#content ul,
#content ol {
	padding:0 0 8px 0; }

#content ul,
#content ol {
	margin-left:20px;
} 

#content h1.entry-title	{
	padding-top:1px; }
	
#content .img-portrait, .img-landscape {
	width:154px;
	display:inline-block;
	text-align:left;
	padding-bottom:24px; }
	
#content .img-landscape {
	width:308px;
}

#content .img-portrait.img-right {
	width:90px;
}

#content .img-landscape.img-right {
	width:244px; }
	
#content .extending-text .side-paragraphs {
	display:none;
}

@media screen and (min-width:768px) {
	#content .extending-text .side-paragraphs {
		z-index:10;
		position:absolute;
		right:1px;
		top:201px;
		padding: 25px 0px 18px 0px;
		width:200px;
		color:#ffffff;
		line-height:15px;
		text-align:left;
		height:5000px;
		background:#558a92;	}
}

#content .extending-text .side-paragraphs p {
	padding:4px 18px 4px 18px;
}

@media screen and (max-width:767px) {
	#content .extending-text .side-paragraphs p {
		padding-left:0;
	}
}

#content .extending-text .side-paragraphs a {
	color:#bdd7db; }

#content .extending-text .side-paragraphs a:hover {
	color:white; }
	
#content .extending-text {
	display:block;
	width:566px;
	color:#333333;
	line-height:15px;
	margin-left:-34px;
	padding:4px 0 4px 34px;
}

@media screen and (max-width:767px) {
	#content .extending-text {
		width:100%;
	}
}

#content .extending-text p.left-paragraph {
	padding:0;
	cursor:pointer;
}

@media screen and (max-width:767px) {
	#content .extending-text p.left-paragraph {
		padding-right:22px;
	}
}

@media screen and (max-width:499px) {
	#content .extending-text p.left-paragraph {
		padding-right:20px;
	}
}

#content .extending-text.open {
	background:#558a92; }
	
#content .extending-text.open .left-paragraph,
#content .extending-text.open .hell {
	color:#ffffff; }
	
#content .extending-text.open a {
	color:#bdd7db; }
	
#content .extending-text.open a.post-edit-link {
	color:#558a92;
}	
	
#content .extending-text.open a:hover {
	color:#ffffff; }

@media screen and (min-width:768px) {
#content .extending-text.open .side-paragraphs {
	display:block; }

#content .extending-text:hover {
	background:#558a92; }
	
#content .extending-text:hover .left-paragraph,
#content .extending-text:hover .hell {
	color:#ffffff; }
	
#content .extending-text:hover a {
	color:#bdd7db; }
	
#content .extending-text:hover a.post-edit-link {
	color:#558a92;
}	
	
#content .extending-text:hover a:hover {
	color:#ffffff; }
	
#content .extending-text:hover .side-paragraphs {
	display:block; }
}
	
#content .extending-text.open .side-paragraphs {
	z-index:9;
}

@media screen and (max-width:767px) {
	.concerts-spacer {
		display:none;
	}
}
	
#sidebar {
	float:left;
	width:100px;
	padding-top:27px;
}

@media screen and (max-width:767px) {
	#sidebar {
		float:none;
		padding-top:0;
		padding-left:33px;
		padding-bottom:20px;
	}
}

@media screen and (max-width:499px) {
	#sidebar {
		padding-left:20px;
	}
}

#sidebar ul.submenu li {
	list-style:none;
	padding-bottom:7px;
}

#sidebar p {
	padding-bottom:7px;
}

footer#colophon {
	max-width:800px;
	margin:0 auto;
	text-align:left;
	border-top:1px solid white;
	margin-bottom:50px; }

@media screen and (max-width:767px) {
	footer#colophon {
		padding-right:20px;
		padding-left:20px;
		margin:0 5px 20px;
	}
}

footer#colophon ul {
	text-align:right;
	height:25px;
	color:#99493d;
	line-height:20px; }
	
footer#colophon li {
	display:inline;
	list-style:none;
}
	
footer#colophon a {
	color:#99493d; }
	
footer#colophon a:hover {
	color:white; }
	


/* main classes */


.clear {
	clear:both;
	height:0;
	width:0;
	overflow:hidden; }
	
.hell {
	color:#558a92; }
	
.for-text-version {
	position:absolute;
	left:-5000px;
	color:#460a0a; }
	
.no-top-spacing {
	padding-top:0px; }
	
.no-bottom-spacing {
	padding-bottom:0px; }
	
.right-align {
	text-align:right; }
	
.left-align {
	text-align:left; }
	
	
.right-navigation {
	position:absolute;
	width:200px;
	right:0; }
	
.right-navigation p {
	padding:4px 18px 4px 0; }
	
.right-marginal {
	position:absolute;
	width:200px;
	right:0px;
	padding-right:18px; }
	
/* download images */

.download-images {
	display:flex;
	flex-wrap:wrap;
	margin:0 -1em;
	width:calc(100% + 2em);
}

.download-image {
	width:calc(50% - 2em);
	margin:0 1em;
}

.download-image img {
	max-width:100% !important;
	height:auto !important;
}

@media (max-width:479px) {
	.download-image {
		width:100%;
	}