/* ****************************
      WEBSITE STYLE FOR
   http://www.bhagavad-gita.de  

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

/*   NAVIGATION and Verse Links  
-------------------------------------- */

body {margin:0; padding:0;}
  .nav-top { 
	max-width:800px;  /* hinzugefügt */
	margin:0 auto;    /* hinzugefügt */
	list-style:none;
	text-align:center;
	margin:0;
	padding:0px 0 0px 0;
	background-color: transparent;
	  /* margin-right:16px;margin-left:16px; */
	  /* padding-top:8px; padding-bottom:8px; */
	}
 .nav-top a {
	display:inline-block;   /* alternative to FLOAT - "inline-block" must be on a-Element */
	padding:0.3em 0.7em; 	/* spacing height and width of Tabs */
	margin:0px 0 0 0;  	/* war vorher 6px 0 0 0; */
	vertical-align:12px; 	/* neu, gabs vorher nicht */
   	font-size:13px;
   	font-family: arial, sans-serif;
	white-space:nowrap;   /* NO line-break between words */
	color: #c00;  /* TEXT-Color of TAB must be on a-Element */
	background-color:#fff;  /* background-Color of TAB must be on a-Element */
    	text-decoration:none; 
	border:1px solid transparent;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-radius:0\9;
	border-right:1px solid #b8b8b8;   /* styling for 3D effect */
	border-bottom:1px solid #b8b8b8;  /* styling for 3D effect */	
	transition: .2s background-color;  /* gives background transition bei hover, needs to be in a tag */	
	}
 .nav-top li {
	display:inline; /* alternative to FLOAT - "inline" must be on li-Element */
	vertical-align:0px;  /* 2px vertical spacing when browser windows is re-sized smaller, on li-Element */
	}
 .nav-top a:hover{color:#fff;background-color:#111;border:1px solid white;text-decoration:none; /* when mouse is over */ }
 .nav-top a:focus{color:#111;border:1px solid white;background-color:#fff; /* when mouse is released */ }
 .nav-top a:active{color:#fff;border:1px solid white;background-color:#003300; /* when mouse is pressed */}

/* --------------------------------------------- */

 .nav-kapitel {
	list-style:none;
	text-align:center;
	margin:0;
	padding:0 0 3px 0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	background-color:transparent;
	margin-right:16px;margin-left:16px; 
	padding-top:5px; padding-bottom:8px;
	}
 .nav-kapitel a {
	display:inline-block;  /* alternative to FLOAT - "inline-block" must be on a-Element */
	padding:0.2em 0.8em; 	/* spacing height and width of Tabs */
	margin:3px 0 0 0;
   	font-size:14px;
   	font-family: arial, sans-serif;
	white-space:nowrap;   /* NO line-break between words */
	color: #c00;  /* TEXT-Color of TAB must be on a-Element */
	background-color:#fff;  /* background-Color of TAB must be on a-Element */
    	text-decoration:none; 
	border:1px solid #B8B8B8;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-radius:0\9;
	border-right:1px solid #b8b8b8;   /* styling for 3D effect */
	border-bottom:1px solid #b8b8b8;  /* styling for 3D effect */	
	transition: .2s background-color;  /* gives background transition bei hover, needs to be in a tag */	
	}
 .nav-kapitel li {
	display:inline; /* alternative to FLOAT - "inline" must be on li-Element */
	vertical-align:0;  /* 2px; vertical spacing when browser windows is re-sized smaller, on li-Element */
	}
 .nav-kapitel a:hover{color:#fff;background-color:#c00;text-decoration:none;/* when mouse is over */ }
 .nav-kapitel a:focus{color:#111;background-color:#fff; /* when mouse is released */ }
 .nav-kapitel a:active{color:#fff;background-color:#003300; /* when mouse is pressed */ 
 } 

.gita-txt {color:#111;text-align:center;font-size:18pt;margin-top:10px;margin-bottom:5px;}

.verse-links a:link {color:#000099; background-color: white;text-decoration:none;padding:1px;}
.verse-links a:visited {color:#000; background-color: white;text-decoration:none;padding:1px;}
.verse-links a:hover {color:#FFFFFF; background-color:#0052FF;text-decoration:underline;padding:1px;}
.verse-links a:active{color:#CC0000; background-color: white;text-decoration:none;padding:1px;}


.navmenu {
 display: block; /* Get all images to show in a row */
 width: 100%; /* Show all logos per row */
 }

@media (max-width: 960px) and (min-width: 501px) {
 .navmenu li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
 .navmenu li { width: 100%; } /* On small screens, show one logo per row */
}

@media (max-width: 960px) {
 .navmenu {
 display: block;
 }
 
 .navmenu li {
 display: inline;
 }
 .one {padding-bottom:30px;padding-top:20px;}   /* NEU CHANGED */ 
}