html, body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, span, a, form, img, li { font-family: GothamLight, sans-serif; color: #333; }
html, body {width: 100%; height:100%;}
html, body, a {font-size: 100.01%; }
body {text-align: center; margin: 0; padding: 0; top: 0; left: 0; background:#000; }
 
 /* Allgemein gueltige Formatierungen */

  a:link       { color: #333333; text-decoration: none; }
  a:visited { color: #333333; text-decoration: none; }
  a:hover     { color: #ff0000; text-decoration: none; }
  a:focus     { color: #ff0000; text-decoration: none; }
  a:active   { color: #ff0000; text-decoration: none; } 
  h1        { visibility: hidden; width: 0px; height: 0px;    margin: 0;  padding: 0;  overflow: hidden;}
  h2    {visibility: hidden; color: #DADADF; width: 320px; height: 60px; font-size: 30px; text-align: left; font-weight: bold; margin: 0; padding: 7px 10px 23px 15px; background: url(graphik/h2_bg.png) no-repeat top right;}
  h3    {color: #333333; font-size: 14px;  text-align: center;  font-weight: bold; margin: 0;  padding: 5px 0 5px 10px;}
  h4    {color: #333333; font-size: 13px;  text-align: center;  font-weight: bold; margin: 0;  padding: 5px 0 5px 10px;}
  h5    {color: #333333; font-size: 11px;  text-align: left;  font-weight: bold; margin: 0;  padding: 5px 0 5px 10px;}
  table {font-size: 13px;} 
  p, ul, ol {font-size: 11px;                       margin: 6px 0 0 0;} 
  hr {margin: 5px 10px;}
  strong {     font-weight: bold; }
  ol {   text-align: left; list-style: decimal; margin: 0 0 0 6px; padding-left: 0; text-indent: 0px; }
  ul {   text-align: left; list-style: circle;  margin: 0 0 0 6px; padding-left: 2px; text-indent: 0px; }
  li {margin-left: 10px;}    
  input[type="text"],  input[type="email"], textarea {display:inline-block; width:80%; border:1px solid #CCCCCC; border-top-color:#FFFFFF; border-left-color:#FFFFFF;}
	input[type="text"]:focus,  input[type="email"]:focus, textarea:focus { border-top-color:#AAAAAA; border-left-color:#AAAAAA;}
	input[type="text"].kuerzer {width:60%;}
	input[type="text"].kurz, select.kurz {width:18%; margin-right:1%;}
  
	.fKlein {display:none; cursor:pointer;}
		#menuImg {width:32px; height:32px;}
		#menueKnopp {width:32px; height:32px;}
	.fGross {display:inline-block;}
	
  .aleft {text-align:left;}
  .acenter {text-align:center;}
  .aright {text-align:right;}
  
  .ui-button {text-align:center;}
  
	.padding_top_20 {padding-top:20px;}
	.green_1 {color:#33cc33;}
	.dark_red {color:#cc3333;}
	.dick {font-weight:bold;}
  
  .glBr50 {display:inline-block; width:50px;}
  .glBr75 {display:inline-block; width:75px;}
  .glBr100 {display:inline-block; width:100px;}
  .glBr125 {display:inline-block; width:125px;}
  .glBr150 {display:inline-block; width:150px;}
  
div#ganzeSeite { width: 100%; height:100%; margin: 0; padding: 0;}
  
  div.seitenkopf {display:none;}
  div#seiteninhalt {padding:0px; margin:0px; width:100%; height:100%; text-align:center; background:url(../bilder/HntgrdHoch.png) no-repeat top center; background-size:contain;}
	img#event  {max-height:100%; max-width:100%; margin:auto;}
	#eventLayer {width:66%; padding:2% 16%;}
	#eventLayer  img {width:25%;}
	.eventTeaser {color:#fff; font-size:200%; font-family: GothamLight, sans-serif; text-align:center;}
	.eventTeaser b {font-size:140%; font-family: GothamBold, sans-serif;}
	#terminLayer {position:absolute; bottom:2%; left:0px; width: 35%; text-align:right;}
	#terminLayer span {color:#fff; font-size:180%; text-align:left; font-family: GothamMedium, sans-serif; display:inline-block;}
	#logoLayer {position:absolute; bottom:3%; right:0px; width: 15%; text-align:left;}
	#logoHalter {width: 103px; height:110px;}
  div#einladungsText {color: #9f7824; position:absolute; top:60%; width:100%; height:35%; text-align:center; text-align:center; vertical-align:middle; }
	#einldgTxt {padding:0; height:100%; margin-left:auto; margin-right:auto; font-size:300%;}
	#einldgTxt a {height:100%;}
	div#einladungsText span {color: #eeeeee;}
  #menueKnopp {position:absolute; bottom:3%; left:2%; width:32px; height:32px;}
  #kontaktKnopp {position:absolute; bottom:2%; left:2%; width:auto; text-align:center;}
  #kontaktKnopp a {margin: 5px 20px 0px 0px;}
  #knopp {font-size:90%; width:80%; display:inline-block; cursor:pointer; opacity:0.5; margin-top: calc(35% - 40px);}
  
  #kontaktForm p {margin-bottom:12px;}
  
	.hideForMobile {display:block;}
  
   div.sp1v2 {width: 49%; display: inline-block; vertical-align: top; margin-left:0px;}
   div.sp2v2 {width: 49%; display: inline-block; vertical-align: top; margin-right:0px;}
  
   div.sp1v3 {width: 320px; display: inline-block; vertical-align: top; }
   div.sp2v3 {width: 320px; display: inline-block; vertical-align: top; margin-left:5px; margin-right:5px;}
   div.sp3v3 {width: 320px; display: inline-block; vertical-align: top; }
   
   p#fusszeile { width: 100%; font-size:10px; text-align: right; margin: 0 auto 3px auto; position:absolute; bottom:0px;}
   
/*
@font-face {
	font-family: 'FrutigerLTCom-Roman';
	src: url('fonts/frutigerltstd-roman.ttf') format('truetype');
}*/

@font-face{font-family:GothamBold;src:url(fonts/Gotham-Bold.otf)}
@font-face{font-family:GothamBook;src:url(fonts/Gotham-Book.otf)}
@font-face{font-family:GothamExtraLight;src:url(fonts/Gotham-ExtraLight.otf)}
@font-face{font-family:GothamLight;src:url(fonts/Gotham-Light.otf)}
@font-face{font-family:GothamMedium;src:url(fonts/Gotham-Medium.otf)}
@font-face{font-family:GothamThin;src:url(fonts/Gotham-Thin.otf)}

@media only screen and (min-width:900px) {
	div#seiteninhalt {background:url(../bilder/Hntgrd.png) no-repeat top center; background-size:contain;}
}

@media only screen and (min-width:421px) and (max-width:880px) {
	p, ul, ol, span {font-size: 90%;                       margin: 4px 0 0 0;}
	#knopp, #knoppListe, #knoppProg, #knoppOrt, .knoppPlaylist  {padding:5px; font-size:90%;}
	#kontaktKnopp a {margin: 2px 20px 0px 0px;}
	div.sp1v2 {width: 99%; display: block;}
	div.sp2v2 {width: 99%; display: block;}
}
@media only screen and (max-width:420px) {
	p, ul, ol, span {font-size: 75%;                       margin: 2px 0 0 0;}
	#knopp, #knoppListe, #knoppProg, #knoppOrt, .knoppPlaylist  {padding:3px; font-size:75%;}
	#kontaktKnopp a {margin: 0px 20px 0px 0px;}
	div.sp1v2 {width: 99%; display: block;}
	div.sp2v2 {width: 99%; display: block;}
	
	#eventLayer {width:100%; padding:5% 0 0 0;}
	#eventLayer  img {width:50%;}
	.eventTeaser {font-size:80%;}
	#terminLayer {left:8px; bottom:16%; width: calc(100% - 70px); text-align:left;}
	#terminLayer span {font-size:120%; text-align:left; font-family: GothamMedium, sans-serif; display:inline-block;}
	#logoLayer {width: 64px; text-align:left; padding:3px;}
	#logoHalter {width: 64px; height:68px;}
	#kontaktForm p {margin-bottom:8px;}
	.hideForMobile {display:none;}
	#knopp {font-size:50%; width:100%; display:inline-block; cursor:pointer; opacity:0.5;}
}
@media only screen and (max-width:320px) {
	p, ul, ol, span {font-size: 8px; margin: 2px 0 0 0;}
}
@media only screen and (min-height:221px) and (max-height:420px) {
	p, ul, ol, span {font-size: 75%; margin: 2px 0 0 0;}
}
@media only screen and (max-height:220px) {
	p, ul, ol, span {font-size: 8px; margin: 2px 0 0 0;}
}