abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{background:0 0;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}*{box-sizing:border-box}

/** 
 * main.css
 * 
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 * 
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */

* {
	box-sizing: border-box; 
}

body {
	background: rgb(0,0,0);
	padding: 5%;
	max-width: 1000px; 
	margin: 0 auto; 
}

body, td, input[type=text], textarea {
	font-family: 'work sans', sans-serif;
	font-size: 100%; 
	line-height: 1.5;
	color: rgb(220,220,220);
}

img {
	max-width: 100%; 
}
header {
	display: grid;
	grid-template-columns: 20% 80%;
	grid-gap: 1rem;
	margin-top: -2rem
}
h1 {
	font-family: "FuturaBT-Light", sans-serif;
	font-size: 2rem;
	margin: 0 0 1rem 0
}
h2 {
	font-family: "FuturaBT-Light", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 00 0 1rem 0;
}
section{
	display: grid;
	grid-gap: 0.5rem;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 2rem
}
section h2{
	grid-column: 1/3
}

section .bild{
	align-self: end;
	grid-column: 1/3;
	grid-row: 2
}
section .text{
	grid-column: 2/4;
	color: rgb(220,220,220);
	grid-row: 2;
	padding: 2rem 0 0 5rem;
	align-self: end;
}
p{
	margin-bottom: 1rem
}
div.heute{
	background: rgb(50,50,50);
	padding: 0.5rem;
}
div.heute h2 {
	background: rgb(255,0,0);
	display: inline;
	padding:0.5rem  
}
div.gigblock{
	margin-top: 1.5rem;
}
.gig_list{	
	border-bottom: 1px dotted white;
	display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: 30% 70%;
	margin-top: 1rem;
}

.gig_list:last-of-type{
	border-bottom: none
}

.gig_date{
	grid-column: 1
}
.gig_ort, .gig_info, .gig_url{
	grid-column: 2
}
.gig_info {
	margin-bottom: 0
}
a {
	color: rgb(255,0,0);
	text-decoration: none;
}
	a:hover {
		color: #666;
	}

ul.audio {
	list-style: none
}

audio{
	background: grey
}
/*********************************************************************
 * 2. Masthead area
 *
 */

.topnav, .topnav li {
	list-style: none; 
	padding: 0;
	margin: 0;
	align-self: end
}
	.topnav li {
		float: left; 
		margin-right: 1em;
		margin-bottom: 1em;
	}
	.topnav a {
	border-bottom: 1px solid #000;
		padding: 0.25em 0.5em;
		text-decoration: none; 
		display: block;
		color: rgb(220,220,220); 
	}
	.topnav a:hover {
	border-bottom: 1px solid #ccc;
	}
	.topnav li.current a {
	border-bottom: 1px solid #ccc; 
	}


/*********************************************************************
 * 3. Main content and sidebar
 *
 */

#main {
	border-top: 1px solid #eee; 
	padding-top: 1em; 
	margin-top: 1em; 
	clear: both; 
}

#content {
	width: 100%; 
}

#content {
	padding-bottom: 2em; 
}

body.has-sidebar #content {
	width: 65%; 
	float: left;
}



/*********************************************************************
 * 4. Footer
 *
 */

#footer {
	clear: both; 
	border-top: 1px solid #eee; 
	font-size: 80%; 
}
#footer p{
	float: right;
	padding-top: 0.5rem
}

/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 739px) {
	/* mobile layout */ 

	body, td, textarea {
		font-size: 100%; 
	}
	
	section .bild {
		grid-column: 1/4;
	}
	
	section .text {
		grid-column: 1/4;
		grid-row: 3;
		padding-left: 0
	}
	
}

@media only screen and (min-width: 1200px) {
	/* extra-wide desktop layout */ 
	
	body, td, textarea {
		font-size: 115%; 
	}
}
@media only screen and (max-width: 512px){
	
	header {
		grid-template-columns: 30% 70%;
		margin-top: 0;
	}
	
	.topnav li {
		width: 100%
	}
	.topnav a {
		border-bottom: 1px solid black
	}
}
/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
	clip: auto;
	overflow: visible;
	height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #333;
	color: #fff;
}