/* CSS layout - Bernhard Goller.de Webseite */
* {
	box-sizing: border-box; /*The box-sizing property allows to include the padding and border in an element's total width and height.*/
}

body {
  margin: 0px auto;
  padding: 0;
  background-color: #333f50; /*Allgemeiner Hintergrund dunkelgrau bläulich; von früher Grau #c0c0c0*/ 
  font-family: Verdana, Arial, sans-serif;
  max-width: 897px;
}

#wrapper {
  background-color: #008080; /*Farbe auch für Hintergrund Menüschaltflächen links und Footer*/
  color: #000000; /*black*/
  margin: 0 auto 10px auto;
}


/**************************************************
********************HEADER*************************
**************************************************/

header {
	background-image: url("images/styles/arunachala.jpg");
    background-repeat: no-repeat;
    border-bottom: 2px #4a484d solid;
    border-top: 2px #4a484d solid;
    height: 230px;
}

#header-weblink {float: left; 
	
    font-size: 1.3em;
    font-family: arial, helvetica, verdana, sans-serif;
    font-weight: bold;
    margin: 15px 0px 15px 25px;
    color: #ffffff; /*weiß*/
}

#header-weblink a:link,
#header-weblink a:visited,
#header-weblink a:active {

    text-decoration: none;
    color: #ffffff /*weiß*/;
}

#header-weblink a:hover,
#header-weblink a:focus {
	
	text-decoration: underline;
	color: #ffffff; /*weiß*/
}


#header-text {
	color: #ffffff; float: left; margin-left: -15px;} 
	
#header-text ul li {
	display: inline; margin: 0px 20px 0px 0px;
}
/**********************************************************************
**********************NAVIGATION links, vertikal***********************
**********************************************************************/

/*****************************************************************************
********************NAVIGATION Toggle Label Style***************************
****************************************************************************
******************************************************************************/


/*****Toggle Menü Style für Labels***
/***********************************/

label {
  cursor: pointer; /*Hand*/
  color: #060643; /*Tiefes Blau*/
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0px 0px 8px 8px;
  
	
}


label.nav-toggle {
	 }

/***Toggle Hamburger 3er Linien Style***/

.toggle-lines {
	font-size: 1.2em;
}/*Style auch, wenn Footer Link active*/

.toggle-lines-active {
	font-size: 1.2em;
	color: #FFFFFF;
}

/*****Toggle Menü Style für Labels***
/***********************************/

label {
	display: none;
}

/****************Navigation links Style allgemein************/

#menu-toggle {
  display: none; /* hide the checkbox */
}

/************************/


nav {
	background-color: #008080; /*Farbe Hintergrund Menüschaltflächen links, an dieser Stelle optional, da schon in Wrapper angegeben*/
  	float: left;
  	width: 27%;
  	
  
}

nav ul {
    font-size: 0.9em;
  	font-family: verdana, arial, sans-serif;
  	font-weight: bold;
  	list-style-type: none;
  	text-align: left;
  	padding: 0px;
  	margin: 30px 5px 0px 5px;
  	letter-spacing: 0.0em;
}

nav ul li {
  
  	margin: 0;
  	padding: 5px; /*Abstand zwischen Menüschaltflächen*/
}

nav ul li a:link,
nav ul li a:visited,
nav ul li a:active {
  	color: #331755; /*Schrift tiefblau*/
  	background-color: #66CCFF; /*leuchtend hellblau*/
  	background-image: -webkit-linear-gradient(#75ddff, #c7f1ff);
    background-image: -moz-linear-gradient(#75ddff, #c7f1ff);
    background-image: -ms-linear-gradient(#75ddff, #c7f1ff);
    background-image: -o-linear-gradient(#75ddff, #c7f1ff);
  	background-image: linear-gradient(#75ddff, #c7f1ff); /*Farbverlauf der Menüschaltflächen*/
  	text-decoration: none;
  	padding: 5px 5px 5px 10px; /*Innere Abstände in ieder Menüschaltfläche*/
 	margin: 0;
  	display: block; /*wichtig an der Stelle, sonst verziert die Menüs*/
  	line-height: 25px;
  	border-radius: 10px;
}

nav ul li a:hover,
nav ul li a:focus {
  	color: #FFFFFF; /*Schrift weiß*/
  	background-color: #605E63; /*Grau*/
  	background-image: -webkit-linear-gradient(#4a484d, #9f9fa1);
    background-image: -moz-linear-gradient(#4a484d, #9f9fa1);
    background-image: -ms-linear-gradient(#4a484d, #9f9fa1);
    background-image: -o-linear-gradient(#4a484d, #9f9fa1);
  	background-image: linear-gradient(#4a484d, #9f9fa1); /*Wichtig: ohne Leerzeichen vor der runden Klammer mit Farbenangabe!!*/
  	text-decoration: none;
  	
}

nav ul li a.hier:link,
nav ul li a.hier:visited,
nav ul li a.hier:active {
	color: #FFFFFF; /*Schrift weiß***Aktiver Link mit class="hier" in html - Notation a.hier:link statt a#hier:link für id="hier"***/
	background-color: #605E63; /*Grau*/
	background-image: -webkit-linear-gradient(#4a484d, #9f9fa1);
    background-image: -moz-linear-gradient(#4a484d, #9f9fa1);
    background-image: -ms-linear-gradient(#4a484d, #9f9fa1);
    background-image: -o-linear-gradient(#4a484d, #9f9fa1);
    background-image: linear-gradient(#4a484d, #9f9fa1); /*Wichtig: ohne Leerzeichen vor der runden Klammer mit Farbenangabe!!*/
	
}

nav ul li a.hier:hover,
nav ul li a.hier:focus {
	color: #FFFFFF; /*Schrift weiß*/
    background-color: #605E63; /*Grau*/
    background-image: -webkit-linear-gradient(#4a484d, #9f9fa1);
    background-image: -moz-linear-gradient(#4a484d, #9f9fa1);
    background-image: -ms-linear-gradient(#4a484d, #9f9fa1);
    background-image: -o-linear-gradient(#4a484d, #9f9fa1);
    background-image: linear-gradient(#4a484d, #9f9fa1); /*Wichtig: ohne Leerzeichen vor der runden Klammer mit Farbenangabe!!*/

}


/******************************************************
************************HAUPTTEXT**********************
*******************************************************/

main {
  padding: 10px 30px 30px 30px;
  /*margin: 0px 0px 0px;*/
  margin-left: 27%;
  display: block;  /*wegen Fehldarstellung IE*/
  background-color: #66CCFF; /*leuchtend hellblau*/
  
}

article {
  padding: 10px 0px 0px 0px;
  
}

article p {margin: 10px 2px;
  font-size: 1.0em;
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  text-align: justify;
  line-height: 150%;
}

article h1 {
  margin: 15px 0px 10px 0px;
 
  font-size: 1.8em;
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif;
  line-height: 150%;
  letter-spacing: 1px;
  
}

article h2 {
  margin-top: 40px;
  font-size: 1.7em;
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  line-height: 130%;
    
}

article h3 {
  margin: 50px 0px 0px 0px;
  font-size: 1.5em;
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  line-height: 150%;
  
}

article h4 {
  margin: 40px 0px 0px 0px;
  font-size: 1.375em;
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif;
  line-height: 130%;
  
}

article h5 {
  margin: 40px 0px 0px 0px;
  font-size: 1.1em;
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif;
  line-height: 130%;
  
}

a:link, a:visited, a:active {
  color: blue;
  text-decoration: underline;
  
}
a:hover {
  color: blue;
  text-decoration: underline;
}

article .note-back a:link, .note-back a:visited, .note-back a:active {
  color: #3d4384;
  font-size: 1.5em;
  text-decoration: none;
}

article .note-back a:hover {
  text-decoration: underline;
}

article ul li {
  font-size: 0.92em;
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  text-align: justify;
  line-height: 150%;
  margin: 1em 0;
}

article ol li {
  font-size: 1.0em;
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  text-align: justify;
  line-height: 150%;
  margin: 1em 0;
}
/*****************Weitere TEXT-Formatierungen**************/

/*******************************************************************************
**********Layout für die blauen Pfeile, zum Anfang der Seite********************/

.nachoben {
	margin: 20px 20px 70px 0;
}
.nachoben img {
	float: right; 
    /*width: 21px;
    height: 25px;*/   
            
}

/**************************************************************************
**********Layout für die Weiter-, Zurück-Pfeile unten am Text*************/


#next-back {
	font-size: 0.9em;
	margin: 0 0 0px 0; 

}

/***************Zurück-Pfeil**************/

#back {
	float: left;	
}

#back img {
	margin-right: 10px;
    float: left;
}


#back p {
	float: left;
}

#back a:link,
#back a:visited {
	color: black;
	text-decoration: underline;
}
#back a:hover,
#back a:active {


	color: blue;
	text-decoration: underline;
}

/***************Weiter-pfeil**************/

#next{
    float:right;
    
}

#next img {
	margin-left: 10px;
	float: right;
}

#next p {
	float: right;
	text-align: right;
       
}

#next a:link,
#next a:visited {
	color: black;
	text-decoration: underline;
}

#next a:hover,
#next a:active {
	color: blue;
	text-decoration: underline;
}

.clear {
 clear: both;
 margin: 0;
 padding: 0;
 line-height: 1px;
}

/****************************************************************
********************FOOTER und FOOTER NAVI***********************
*****************************************************************/

footer {
	background-color: #008080;  /*Farbe wie Menühintergrund*/
    border-top: 2px #4a484d solid; /*#4a484d* dunkel grau*/

}

#navifooter {
	

} 
#navifooter ul {

  	font-family: verdana, arial, sans-serif;
  	font-size: 0.9em;
  	font-weight: bold;
  	list-style-type: none;
  	margin: -20px 0px 20px 0px;
  	padding: 20px 0px 0px 0px;
 	text-align: center;
    
}

#navifooter ul li {
 	color: #331755; /*Schriftfarbe #060643*/
 	display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen.*/
    line-height: 2.2em; /*damit Menüs, wenn zweizeilig bei kleinen Bildschirmen nicht aneinander kleben*/
    margin: 0px 20px 0px 0px;
    text-decoration: none;
}


#navifooter ul li a:link,
#navifooter ul li a:visited,
#navifooter ul li a:active {
	color:  #060643; /* Schrift tiefblau dunkler -- *#331755; /*Schrift tiefblau wie Menü links*/
	text-decoration: none;
}

#navifooter ul li a:hover,
#navifooter ul li a:focus {
	color: #FFFFFF; /*Schrift weiß*/
}

#navifooter ul li a.hier:link,
#navifooter ul li a.hier:visited,
#navifooter ul li a.hier:active {
	color: #FFFFFF; /***Aktiver Link mit class="hier" in html - Notation a.hier:link statt a#hier:link für id="hier"***/

	
}

#navifooter ul li a.hier:hover,
#navifooter ul li a.hier:focus {
	color: #FFFFFF;
}




/************Footer www.bernhard-goller.de -Link zur Startseite*******/


#footer-weblink  {
	font-size: 0.8em;
    text-align: center;
    color: #FFFFFF; /*weiß*/
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    padding: 0 0 10px 0;
}

#footer-weblink a:link,
#footer-weblink a:visited,
#footer-weblink a:active {
	color: #FFFFFF;
    text-decoration: none;
}

#footer-weblink a:hover, 
#footer-weblink a:focus {
	color: #FFFFFF; 
    text-decoration: underline;
}

/**************************************************************************************
***************************************************************************************
******************Besonderheiten für Bildschirmgroesse max. 768px**********************
***************************************************************************************
***************************************************************************************/

@media (max-width: 768px) {

wrapper {
	/*width: 95% /*Keine Reaktion, weil Header-Grafik wird noch angezeigt*/
}

/********************Navigation links*********************/

/********************Toggle menu links*******************/
label {
	display: inline-block; 
}

#menu {
  display: none; /*hide Menü-Liste*/

}
#menu-toggle:checked + #menu {
  display: block; /*zeigt Menü beim Anklicken*/
}

/*******************************************************/
nav {
  	float: none;
 	width: 95%; /*Abstand vom rechten Rand*/
 	padding: 15px 0px 0px 0px;
 	
}
nav ul {margin: 5px 5px 0px 5px;
	font-size: 1.2em;
	
}

nav ul li {
  	letter-spacing: 0.05em;

}

nav ul li a:link,
nav ul li a:visited,
nav ul li a:active {
	line-height: 1.4em;
    margin: 3px 0px; 	/*Abstand zwischen einzelnen Menüflächen 5 px*/
	
}



/****************************************
*****************Main*******************/
main {
  margin: 0px 0px 0px 0px;
}

article {
  text-align: justify;
}

article h1 {
  margin: 10px 0px 10px 0px;
  /*text-align: left;*/
}

article p {
  font-size: 1.2em;
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  text-align: justify;
  line-height: 170%;
}