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

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


/* IE Background-RE-size 
---------------------------- */
#bg-resize {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  }
#bg-resize img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  }

/*     IMAGE SCALING 
---------------------------- */
img {border:0; outline:0; margin:0; padding:0;	
     vertical-align:middle;  /* verhindert blue hoverline under pic */ 
    }
img.scale { 	/* class works on "img" only */
  /* corrects inline gap in enclosing div */
  display: inline-block;
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  width: auto\9; /* ie8+9 */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic; 
  }
.RS img {  	/* class works on "block-elements" DIV only */
  width:auto;  
  max-width:40%;
  height: auto;
  width: auto\9; /* ie8 */
  object-fit: contain;
  border:0;
  overflow: hidden;
  text-align:left;
  border:0; /* Remove border on imgs enclosed in anchors in IE */
  display: inline-block;
  }

/*  RoundCorner Layout TR TL BR BL
-------------------------------------- */
.dialog {
  max-width:980px;
  margin:0px auto;
  margin-top:40px;
  margin-bottom:40px; /* IE not working */
  min-width:10em;
  color:#333;
  position: relative; /* NEEDED for IE BG-Resize */
}
.dialog .hd .c,
.dialog .ft .c {
	font-size:12px; /* ensure minimum height -- Uhrzeit */
	height:160px;  /* TL and TR */
	margin-right:-40px; /* Breite von TR */
	font-family:verdana;
}
.dialog .ft .c {
 height:160px;  /* BL and BR */ 
}
.dialog .hd {
 background:transparent url(../img/top-left.png) no-repeat 0px 0px; 
}
.dialog .hd .c {
 background:transparent url(../img/top-right.png) no-repeat right 0px;
}
.dialog .bd {
 background:transparent url(../img/middle-left.png) repeat-y 0px 0px;
}
.dialog .bd .c {
 background:transparent url(../img/middle-right.png) repeat-y right 0px;
  margin-right:-40px;
}
.dialog .bd .c .s {
  margin:;  /* not needed is in inner-wrap  */
  background-color:transparent; /* this is inside content area */
  padding:0.1em;   /* TOP & Bottom Padding NEEDED sonst GAP */
}
.dialog .ft {
 background:transparent url(../img/bottom-left.png) no-repeat 0px 0px;
}
.dialog .ft .c {
 background:transparent url(../img/bottom-right.png) no-repeat right 0px;
}
/* content-specific */
.dialog h1 {
 font-size:2em;
 margin:0px;
 padding:0px;
 margin-top:-0.6em;
}
.dialog img {margin:0 auto;}

/*   LAYOUT Style 
-------------------------- */
.outer-wrap{
  max-width:1020px;
  margin:0px auto;
  padding-right:40px;
  }
.inner-wrap{
  clear:both;
  margin-right:40px;
  margin-left:40px;
  padding:0 5px;
  }

.outer {
  background: transparent url(../img/white800.png) repeat scroll top left;
  padding:18px 20px;
  border:1px dotted #cccccc;
  }

.inner {
  padding:0px;
  }

#header{
  background: url(../img/brown800.png) repeat;
  text-align:center;
  height:75px;
  padding-top:15px;
  zoom: 1;  /* IE Gap Hack */
  position: relative;  /* IE Gap Hack */
  margin-bottom:15px;   /* IE Gap Hack */
  }

#content{
  background: transparent url(../img/white800.png) repeat scroll top left;
  margin-bottom:15px;
  border:1px dotted #cccccc;
  padding:10px 25px;
  }

#footer{
  background: transparent url(../img/black650.png) repeat scroll top left;
  height:80px;
  margin-top:-96px;
  padding-left:40px;
  color:#CCCCCC;
  text-align:center;
  font-family:Verdana;
  font-size:16px;
  line-height:24px;
  }

/*   General Style 
-------------------------- */

.radius {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -goog-ms-border-radius: 6px;
  border-radius: 6px;
  }

.radius12 {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -goog-ms-border-radius: 12px;
  border-radius: 14px;
  }

.radius15 {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -goog-ms-border-radius: 15px;
  border-radius: 15px;
  }

.shadow1 {
  -goog-ms-box-shadow:2px 2px 7px -1px #666;
  -moz-box-shadow:2px 2px 7px -1px #666;
  -webkit-box-shadow: 2px 2px 7px -1px #666;
  box-shadow: 2px 2px 7px -1px #666;
  }

.shadow2 {
  -goog-ms-box-shadow: 3px 0 5px -2px #888;
  -moz-box-shadow: 3px 0 5px -2px #888;
  -webkit-box-shadow: 3px 0 5px -2px #888;
  box-shadow: 3px 0 5px -2px #888;
  }

.white {color:#FFFFFF;}

/*   NAVIGATION and Verse Links  
-------------------------------------- */
  .nav-top {
	list-style:none;
	text-align:center;
	margin:0;
	padding:0 0 3px 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.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-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:#c00;text-decoration:none; /* when mouse is over */ }
 .nav-top a:focus{color:#111;background-color:#fff; /* when mouse is released */ }
 .nav-top a:active{color:#fff;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 gray;
	border-bottom:1px solid gray;
	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;}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(168, 15, 15, 0), rgba(168, 15, 15, 0.75), rgba(0, 0, 0, 0));
    }