/*==================================================================*/
/* Dieses Stylesheet gehoert zur Homepage pundd 
/* Programmiert von: Peter Limacher und Daniela Lehner 
/* Erstellt am: 2013-10-07  
 * Geaendert am:
 * 2013-10-09: Aufgerauumt
 * 2013-10-25: Umgebaut auf Responsive Layout
 * 2013-10-26: Die Media Queries eingebaut
 * 2013-10-28: Beim Iphone Hochformat ist die Steuerung nun floating
 * 2013-12-31: Alle Änderungen werden nun im Projekttagebuch erfasst
/*==================================================================*/

/* Für maximalen Support sind die Meta Tags nun auch im CSS:*/
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}
@viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

/*==================================================================*/
/* Schriften */
/*==================================================================*/

    
@font-face {
    font-family: 'dejavu_sanscondensed';
    src: url('fonts/dejavusanscondensed-webfont.eot');     
    src: url('fonts/dejavusanscondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dejavusanscondensed-webfont.woff') format('woff'),  
         url('fonts/dejavusanscondensed-webfont.ttf') format('truetype'),
         url('fonts/dejavusanscondensed-webfont.svg#fonts/dejavu_sanscondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}  


@font-face {
    font-family: 'dejavu_sanscondensed_oblique';
    src: url('fonts/dejavusanscondensed-oblique-webfont.eot');
    src: url('fonts/dejavusanscondensed-oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dejavusanscondensed-oblique-webfont.woff') format('woff'),
         url('fonts/dejavusanscondensed-oblique-webfont.ttf') format('truetype'),
         url('fonts/dejavusanscondensed-oblique-webfont.svg#fonts/dejavu_sanscondensed_oblique') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*==================================================================*/
/* Allgemein gueltige Einstellungen fuers Layout */
/*==================================================================*/

/* Alle Abstaende generell zuruecksetzen */
* { padding: 0; margin: 0;}


html {
    height: 101%;   /* erzwingt Scrollbar in Firefox */
    background-color: #A3A3A3;   /* Hintergrundfarbe Browser */
    -webkit-text-size-adjust: none; /* Abschalten der Textvergroesserung der Iphones */
    
}
/* Allgemeine Einstellungen zum Body der Webpage */
body {
    text-align: center; 
    font: 100% Arial, sans-serif; /* 95% war vorher */
    font-weight: normal;
    line-height: 150%;
    text-align:  justify; 
    margin: 0;
    padding: 0;
}
/* Rahmen um den kompletten Inhalt, inklusive Kopf und Fuss. Ebenfalls 
 * festgelegt wird hier die Breite der Internetseite */
#layout-mittig { 
    width: 95%;
    max-width: 1000px;
    margin: 2% auto;
    text-align: left;
    color: black;
    background-color: #FFFFF4;
	box-shadow: 0.8em 0.8em 0.8em 0 #333333;
	border: 2px solid #848484;
}
img {
    border: none;
    height: auto;
    width: auto;
    line-height: 0;
}
/* Definition der Ueberschriften */
/*------------------------------*/
h1 {
    font-weight: normal;
    font-family: dejavu_sanscondensed, Calibri, Arial, sans-serif;
    font-size: 2em;
    line-height: 120%;
    margin: 0.9em 0 0.4em;
    
}
h2 {
    font-weight: normal;
    font-family: dejavu_sanscondensed,Calibri, Arial, sans-serif;
    font-size: 1.7em;
    line-height: 120%;
    margin: 0.9em 0 0.4em;
}
h3 {
    font-weight: normal;
    font-family: dejavu_sanscondensed, Calibri, Arial, sans-serif;
    font-size: 1.4em;
    line-height: 120%;
    margin: 0.9em 0 0.3em;
}

/* Ort in der Ueberschrift anders darstellen */
.ort {
    font-size: 0.7em !important;
    font-weight: normal !important;
    font-family: dejavu_sanscondensed_oblique, Calibri, Arial, sans-serif;
    margin-top: 0em;
    line-height: 100%;
    white-space: nowrap;
}

.textlink {
    color: #804040;
    text-decoration: underline;
}

/* Absaetze */
/* ---------*/
/* Allgemein */
p {
    text-align: justify;
    margin: 0.4em 0 0.8em 0;
}
/* Bilderlinks */
/* -----------*/
a {
    text-decoration: none;
    color: black;
}
/* Kursiver Text */
.kursiv {
    font-style:  italic;
}
/* Klasse fuer den Inhalt, bei der der Text weiss und der Hintergrund 
 * schwarz wird */ 
.schwarz {
    color: white;
    background-color: black;
}
/*==================================================================*/
/* Einstellungen des Kopfes */
/*==================================================================*/

#kopf img { width: 100%;}
/*==================================================================*/
/* Einstellungen des Fusses */
/*==================================================================*/
#fuss {
   clear: both; 
   text-align: center;
   margin-left: 0;
   border-top: 1px solid #BBBBBB;
   line-height: 100%;
   margin: 0;
   padding: 0;
       
}
#fuss ul {
   margin: 0.2em 0;
   padding: 0;    
}

#fuss ul li {
    display: inline;
    list-style-type: none;  
    text-align: center;
    padding: 0 0.5em;
    border-right: 1px dotted gray;
    font-size: 0.9em;
    
}
/* Das letzte Element hat keinen Strich rechts */
#fuss ul li.letzte {
    border-right: none;
}
#fuss ul li a {
    text-decoration: none;
    color: black;       
}
/*==================================================================*/
/* Einstellungen der Kopfsteuerung */
/*==================================================================*/
#kopfsteuerung{
   width: 100%;
   text-align: center;
   border-bottom: 1px solid #BBBBBB;
   
}
#kopfsteuerung ul {
    margin: 0.08em 0;
    padding: 0;   
}
#kopfsteuerung ul li {
    display: inline;
    list-style-type: none;
    text-align: center;
    margin: 0.15 0;    
    padding: 0.0em 0.5em ;
    border-right: 1px dotted gray;
    font-size: 1.4em;

}
/* Das letzte Element hat keinen Strich rechts */
#kopfsteuerung ul li.letzte {
    border-right: none;
}
#kopfsteuerung ul li a {
    text-decoration: none;
    color: black;
    padding: 0;
}
/* Aktives Element */
#kopfsteuerung ul li:hover,
#kopfsteuerung ul li.aktiv,
#kopfsteuerung ul li a:hover {
    font-weight: bold;
    
}
/*==================================================================*/
/* Einstellungen der Steuerung */
/*==================================================================*/
/* Kommentar: Allgemeine Einstellungen zur Steuerung */
#steuerung {   
    width: 12em;
    float: left;
    margin: 0;
    padding: 0;
    line-height: 120%; 
    position: sticky;
    position: -webkit-sticky;
    top: 0; 
    overflow-y: auto;
    height: 100vh; 
}

/* Steuerbutton wird nicht angezeigt */
#steuerung > a {
display: none;
}

/* Einstellungen fuer das Bild, das nach den Links gezeigt wird*/
#steuerung img {
    width: 20%;    
}
/* Einstellungen fuer die erste Ebene der Steuerung */
/* -------------------------------------------------*/

/* Titel der Steuerung */
#steuerung ul li.hauptlink a {
	font-size: 1.3em; 
	font-weight: bold;
	border-top : none;
	margin: 0 0.5em;
	padding: 0.5em 0.1em;
}

/* Allgemeine Einstellungen zur Steuerung */
#steuerung ul{
    padding: 0;
    margin: 1em 0 1em 0; 
    list-style-type: none;
    empty-cells: hide;
    width: 100%;
    border-bottom: none; /* 2px solid #848484; */
    border-top: none; /* 2px solid #848484;   */
}

/* Einstellungen der Links der ersten Ebene */
#steuerung ul li a {
    display: block;
    margin: 0 0.7em;
    padding: 0.5em 0.3em;
    font-weight: normal;
    font-size: 1em;	
    border-top : 1px dotted gray;   
}

/* Hintergrundfarbe fuer die nicht markierten Zellen*/
/*#steuerung ul li {
	border-top: 1px solid gray;
}  */
/* Erster Rand wird nicht gezeichnet */
#steuerung ul li ul li ul li:first-child a {
    border-top : none;
}

/* Hintergrundfarbe fuer die markierten Zellen und die, ueber die der
 *  Mauszeiger gehalten wird */
#steuerung ul li a:hover,
#steuerung ul li ul li.aktiv a,
#steuerung ul li ul li.aktiv {
    font-weight: bold;
}                

/* Kommentar: Einstellungen fuer die zweite Ebene */
/* ----------------------------------------------*/
#steuerung ul li ul li ul {
	border: none; /* Hier brauchts kein Strich am Ende */
	margin: 0 ;
}
/* Hintergrundfarbe fuer zweite Ebene */
/*#steuerung ul li ul li {
    border-top : none;  
}  */
/* Hintergrundfarbe fuer die markierten Zellen und die, ueber die der
 *  Mauszeiger gehalten wird */
 
#steuerung ul li ul li ul li.aktiv a,
#steuerung ul li ul li ul li a:hover,
#steuerung ul li ul li ul li.aktiv {
}
/* Einstellungen fuer die Links der zweiten Ebene */
#steuerung ul li ul li ul li a {
	font-weight: normal;
	font-size: 0.9em;
	padding: 0.3em 0.3em 0.3em 1em;
	height: auto;
	border: none;
	
}
/* Markierter Text wird fett */
#steuerung ul li ul li ul li.aktiv a {
    font-weight: bold;
}
/*==================================================================*/
/* Inhalt */
/*==================================================================*/

/* Allgemeine Einstellungen, wie der Abstand von links (fuer die Steuerung),
 * sowie die Breite des inneren Feldes */
#newsseite,
#inhalt {
    margin: 1.25% 0 1.25% 12em;
    padding: 0 2%;
    border-left: 1px solid #BBBBBB;
}

/* Links allgemein -> Bilderlinks */
/*---------------*/
#inhalt a.bild,
#inhalt .newscontainer .spalte-links a {
    line-height: 0;
    display: block;   
}

/* Grosse Bilder neu!*/
/*---------------*/

#inhalt .bn-container {

}

#inhalt img {
    padding: 0 ;
    width: 100%;
	margin: 1% 0;

    
}

/* Kleine Bilder - hier wurde geändert für Weltreisehomepage */
/*---------------*/
/* Einstellungen zum Container mit den Bildern drin */
#inhalt .bkl-container {
    padding: 0;
    margin:  1% 0;
    overflow: hidden;
}

#inhalt .clear {
clear:both;
}
/* Einstellungen zu den kleinen Bildern */
#inhalt .bkl-container  img {


}
#inhalt .bkl-container .column-right {
    float: right;
	width: 49%;
    margin: 0;
    padding: 0;

}

#inhalt .bkl-container .column-left {
    float: left;
	width: 49%;
    margin: 0;
    padding: 0;
}


#inhalt  p.pic-desc {
    color: #000000 ;
    font-size: 0.9em;
    padding: 0;	
	margin: 0em 0px 1em;
    line-height: 1em;
    text-align: left;
	font-style: italic;	

}

#inhalt p.pic-photo  {
	line-height: 0;
	margin:	0;
}

/* Hochformatbilder - hier wurde geändert für Weltreisehomepage */
/*------------------*/
#inhalt .bh-container {
    text-align: center;
    margin: 1% 0;
}	

#inhalt .bh-container img {  
    width:  65%;
    margin: 0;
    padding: 0;
}

/* Absatz fuer die Bildbeschreibung */
/*----------------------------------*/
#inhalt .bildb a,
#inhalt .bildb {
    color: #000000 ;
    font-size: 0.9em;
    padding: 0;	
	margin: 0em 0px 1em;
    line-height: 1em;
    text-align: left;
	font-style: italic;	
}

/* Tabellen */
#inhalt table {
	margin: 0.4em 0 0.8em 0;
}
#inhalt th {
	padding: 0 1em 0 0 ;
}
#inhalt td {
	padding: 0 1em 0 0 ;
}


/* Links in Überschriften */
/*-----------------------*/ 
/*  -> Die brauchen einen Zeilenabstand */

/* Ungeordnete Liste im Haupttext */
#inhalt ul {
    list-style-type: disc;
    list-style-position: outside;
}

/* Spezielle Farbe für Hochzeitsseiten*/
#layout-mittig.hochzeit {
     background-color: #F0FFFF;
 }
 
/* Links im Text */
/*-----------------------*/ 
 /* Ungeordnete Liste im Haupttext */
#inhalt a.link {
    color: #0000FF ;   
    
}


/* Youtube Video Wrapper */
/*-----------------------*/

#inhalt .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin: 1% 0;	

}
#inhalt .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
}
/*==================================================================*/
/* Einstellungen für die Newsseiten
/*==================================================================*/

.newscontainer {
    padding: 1em 0;
    border-bottom: 1px solid #bbbbbb;
    overflow: hidden;
}

.newscontainer.first {
	border-bottom: 3px solid #bbbbbb;
}


#inhalt .datum {
	 font-size: 0.7em;
}

.newscontainer h1,
.newscontainer h2,
.newscontainer h3 {
    margin-top: 0em;
}

.last {
    border-bottom: none;
}
/* Bilder links auf der Newsseite*/
.spalte-links {
    width: 35% ;
    float: left;
	padding-right: 1em;
	padding-bottom: 0.2em;
	}

/* Bilder links auf der Newsseite*/
.spalte-rechts { 
	width: 100%;
    float: none; 

	}


#inhalt .newscontainer img {
    margin: 0.3em 0 0 0 ;
    padding: 0;
}

#inhalt.ganzseitig {
    margin-left: 0;
    border-left: none;
}

/*==================================================================*/
/* Einstellungen für die Laenderseiten
/*==================================================================*/

.laenderseite .newscontainer.first {
	border-bottom: 1px solid #bbbbbb;
	border-top: 1px solid #bbbbbb;
	}
	

.laenderseite .newscontainer h2 {
    font-size: 1.4em;
}
/*==================================================================*/
/* Einstellungen für das Kartenfenster der Google Karten
/*==================================================================*/
.InfoFenster {     
    font-weight: normal;
    font-family: dejavu_sanscondensed,Calibri, Arial, sans-serif;
    font-size: 1.2em;
    line-height: 135%;
    overflow: visible !important;
    white-space:nowrap;
    max-width:500px;
	}
	
/* Google Maps Karte --> Keine Ahnung wo so eine eingebaut ist... */
/*-------------------*/
#googlekarte {
    width:  100%;
    height: 12em;
    padding: 0;
    margin:  0.5em 0;
}
/*==================================================================*/
/* Clearfix --> Bilder nebeneinander in umschliessender Box anzeigen
/*==================================================================*/
/* Der Kern von Clearfix */
.bkl-container:after,
.newscontainer:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 1px;
  visibility: hidden;
}

/* IE-Patch fuer IE 7*/
*:first-child+html .bkl-container { min-height: 0;}
*:first-child+html .newscontainer { min-height: 0;}

/* IE-Patch fuer IE 6*/
* html .bkl-container { height: 1%; }
* html .newscontainer { height: 1%; }

/*==================================================================*/
/* Skiplink zum Überspringen der Navigation unsichtbar machen
/*==================================================================*/
.skiplink {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}
/*==================================================================*/
/* Anpassungen an die Gerätebreite 
/*==================================================================*/

/* Kleine PC-Bildschirme bis 1024 pixel und I-Pad */
@media
only screen and  (max-width: 1024px) {

   #layout-mittig {
       margin: 0 auto;
       width: 99%;

   }

}


/* I-Phone Querformat, sehr breite Natels  */
@media
only screen and  (max-width: 767px){
   
   body { font-size: small; }
   
   #layout-mittig {
       margin: 0;
       width: 100%;
       border: none;
   }
   #kopfsteuerung {
       font-size: 1em;
   }
   #steuerung {
       font-size: 0.9em;
       width: 8em;
   }
   #steuerung ul li ul li a {
      margin: 0 0.4em;
      padding: 0.5em 0.4em;
   }
   #steuerung ul li ul li ul li a {
    	padding: 0.3em 0.3em 0.3em 0.7em;
    }
   #inhalt {
       margin-left: 8em;
       
   }
}

/* Iphone Hochformat, alle kleineren Natels hochformat */
@media
only screen and  (max-width: 479px) {
   
   body { font-size: x-small; }
   p {
       text-align: left;
       font-size: small;
       line-height: 1.5em;
   }
        
   
   #layout-mittig {
       margin: 0;
       width: 100%;
       border: none;
   }
   
   #kopfsteuerung {
        font-size: 1.2em;
	line-height: 1.5em;
        height: auto;
   }
   
   /*
   #kopfsteuerung {
       font-size: 1.5em;
	   background-color:	#ffe8ae;
	   line-height: 1.7em;
   }
   
   #kopfsteuerung ul li {
		display: block;
		text-align: left;
		background-image: url("bilder/steuerelemente/Steuerknopf.gif");
		background-repeat: repeat-x;
		background-size: contain;
   }
   */
   
   
   #steuerung  {
       margin: 0 0.8em 0 2% ;
       font-size: 1.7em;
       float: left;
       width: 95%;
       border: none;
       position:absolute; 
       z-index:2;
       height: auto;
       overflow-y: visible;

   }

   #steuerung
	{
		position: relative;
	}
	#steuerung > a
		{
		background-image: url("bilder/steuerelemente/Steuerknopf.gif");
		background-repeat: no-repeat;
		background-size:  100% 2.2em;
		font-family: dejavu_sanscondensed, Calibri, Arial, sans-serif;
		font-size: 1.2em;
		font-weight: bold;
		text-align: center;
		padding: .6em 0;
		margin: 0.3em 0;

		}
		#steuerung:not( :target ) > a:first-of-type,
		#steuerung:target > a:last-of-type
		{
			display: block;
		}

	/* first level */
	#steuerung ul li.hauptlink
	{
	padding-top: 0.6em;
	}

	#steuerung > ul
	{
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		background-color:	#ffe8aa;
		width: 80%;
	}
		#steuerung:target > ul
		{
			display: block;
		}
		#steuerung > ul > li
		{
			width: 100%;
			float: none;
			padding: 0.4em 0;
			
		}

	/* second level */

	#steuerung li ul
	{
		position: static;
		background-color:	#ffe8aa;
	}
      #steuerung ul li ul li ul{
		background-color:	#eebe4a;
  
   }
   
   #fuss {
       font-size: 0.9em;
       padding: 0.5em 0.2em;
   } 
    
   #inhalt {
       margin-left: 0;
       border:  none;
       font-size: small
   }
   #steuerung.newssteuerung {
       float: none;
   }
   

}

/* Skalierung für die Retina-Displays
/*------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)     and (min-device-width: 899px),
only screen and (   min--moz-device-pixel-ratio: 2)     and (min-device-width: 899px),
only screen and (    min--moz-device-pixel-ratio: 2)	    and (min-device-width: 899px),
only screen and (   -o-min-device-pixel-ratio: 2/1)     and (min-device-width: 899px),
only screen and (        min-device-pixel-ratio: 2)     and (min-device-width: 899px),
only screen and (    -ms-min-device-pixel-ratio: 2)     and (min-device-width: 899px),
only screen and (           min-resolution: 192dpi)     and (min-device-width: 899px),
only screen and (            min-resolution: 2dppx)     and (min-device-width: 899px) {

     #layout-mittig { max-width: 2000px;    }

}
/* Text renderung Verbessern für Hochauflösende Displays */
h1, h2, h3 { text-rendering: optimizeLegibility; }
/*==================================================================*/
/* Das Ende des Stylesheets
/*==================================================================*/