/* Global styles
---------------------------------------- */
html { 
  background: 				url(../graphics_template/stamm.png) no-repeat left top fixed, 
							url(../graphics_template/background.jpg) no-repeat center center fixed black; 
  -webkit-background-size: 	cover;
  -moz-background-size: 	cover;
  -o-background-size: 		cover;
  -ms-background-size:		cover;
  background-size: 			cover;
  min-height: 				100%;
}

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

body { 
  color:					white;
  font-family:      		"Times New Roman", Times, serif;
  font-size:        		11pt;
  text-align:				left;
  text-shadow:				0.1em 0.1em 0.2em rgba(0, 0, 0, .8);
  border:					0px;
  margin:					0px;
  padding:   				0px;
  line-height:				normal;
  min-height: 				100%;
}

#allcontent {
  margin-left:      		310px;
  margin-right:     		130px;
  min-height: 				100%;
}

h1 {
  font-size:				200%;
}

h2 {
  font-size:				150%;
}

h3, .like-h3 {
  font-size:				115%;
}

h4{
  font-size:				100%;
}

img {
  border:					0px;
}

a, summary {
  outline:					none;
  color:					white;
  -webkit-transition: 		all 1000ms ease-in-out;
  -moz-transition: 			all 1000ms ease-in-out;
  -o-transition: 			all 1000ms ease-in-out;
  -ms-transition: 			all 1000ms ease-in-out;
  transition: 				all 1000ms ease-in-out; 
}

a:link, summary:link {
  color:					white;
  -webkit-transition: 		all 1000ms ease-in-out;
  -moz-transition: 			all 1000ms ease-in-out;
  -o-transition: 			all 1000ms ease-in-out;
  -ms-transition: 			all 1000ms ease-in-out;
  transition: 				all 1000ms ease-in-out; 
}

a:visited, summary:visited {
  color:					white;
}

a:hover, a:focus, summary:hover, summary:focus {
  color:					orange;
  text-shadow:				-0.1em -0.2em .4em rgba(256, 0, 0, 1.0), 0.1em 0.2em .4em rgba(80, 0, 0, 1.0);
}

a:active, summary:active {
  color:					#CC0000;
  text-shadow:				-0.1em -0.2em .4em rgba(256, 0, 0, 1.0), 0.1em 0.2em .4em rgba(80, 0, 0, 1.0);
  -webkit-transition: 		all 150ms ease-in-out;
  -moz-transition: 			all 150ms ease-in-out;
  -o-transition: 			all 150ms ease-in-out;
  -ms-transition: 			all 150ms ease-in-out;
  transition: 				all 150ms ease-in-out; 
}

/* Code for offsetting anchor targets. add class="jumptarget" to all targets. */
.jumptarget:before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

/* Navigation styles
---------------------------------------- */

nav {
  font-family:      		teutonic_no1demibold, "Times New Roman", Times, serif;
  font-size:				170%;
  background-color: 		rgba(0, 0, 0, .2);
  -webkit-box-shadow: 		0px 0px 50px 50px rgba(0, 0, 0, .2);
  -moz-box-shadow: 			0px 0px 50px 50px rgba(0, 0, 0, .2);
  box-shadow:				0px 0px 50px 50px rgba(0, 0, 0, .2);
  display:					block;
  padding:					20px;
  margin:           		0px;
  bottom: 					20px;
  left:						30px;
  text-align:				left;
  position: 				fixed;
  z-index:					2;
}

nav ul {
   list-style-type:			none;
   margin:					0;
   padding:					0;
}

nav  li{
  text-align:				left;
}

nav a {
  display:					block;
  text-decoration:			none;
  height:					35px;
  color:					white;
  text-shadow:				0.1em 0.2em .4em rgba(0, 0, 0, 1.0);
  -webkit-transition: 		all 1000ms ease-in-out;
  -moz-transition: 			all 1000ms ease-in-out;
  -o-transition: 			all 1000ms ease-in-out;
  -ms-transition: 			all 1000ms ease-in-out;
  transition: 				all 1000ms ease-in-out;  
}

nav a:hover, nav a:focus {
  color:					orange;
  text-shadow:				-0.1em -0.2em .4em rgba(256, 0, 0, 1.0), 0.1em 0.2em .4em rgba(80, 0, 0, 1.0);
}

nav a:active {
  color:					#CC0000;
  text-shadow:				-0.1em -0.2em .4em rgba(256, 0, 0, 1.0), 0.1em 0.2em .4em rgba(80, 0, 0, 1.0);
  -webkit-transition: 		all 150ms ease-in-out;
  -moz-transition: 			all 150ms ease-in-out;
  -o-transition: 			all 150ms ease-in-out;
  -ms-transition: 			all 150ms ease-in-out;
  transition: 				all 150ms ease-in-out;  
}

#nav_home a#home,
#nav_heim a#heim,
#nav_the-kaiser a#the-kaiser,
#nav_der-kaiser a#der-kaiser,
#nav_music a#music,
#nav_musik a#musik,
#nav_videos a#videos,
#nav_lyrics a#lyrics,
#nav_liedertexte a#liedertexte,
#nav_pictures a#pictures,
#nav_bilder a#bilder,
#nav_library a#library,
#nav_bibliothek a#bibliothek,
#nav_downloads a#downloads,
#nav_gratis a#gratis,
#nav_links a#links,
#nav_verbindungen a#verbindungen,
#nav_contacts a#contacts,
#nav_kontakte a#kontakte,
#nav_webstore a#webstore,
#nav_netzladen a#netzladen {
  color:					orange;
  text-shadow:				-0.1em -0.2em .4em rgba(256, 0, 0, 1.0), 0.1em 0.2em .4em rgba(80, 0, 0, 1.0);
}

#language_handheld {
  display:					none;
}

#language {
  width: 					100px;
  height: 					130px;
  top: 						80px;
  right:					0;
  background-repeat: 		no-repeat;
  background-position:		center top;
  text-align:				center;
  padding:					0px;
  margin:					20px;
  position: 				fixed;
  z-index:					1;
}


#language a {
  display:					block;
}

#language img {
  -webkit-transition: 		opacity 1000ms ease-in-out;
  -moz-transition: 			opacity 1000ms ease-in-out;
  -o-transition: 			opacity 1000ms ease-in-out;
  -ms-transition: 			opacity 1000ms ease-in-out;
  transition: 				opacity 1000ms ease-in-out;
}

#language img.top:hover, #language img.top:focus {
  opacity:					0;
}

/* Main Article styles
---------------------------------------- */

#page {
  padding:          		0px 0px 0px 0px;
  max-width:            	700px;
  min-width:				350px;				
  margin:           		0px auto 0px auto;
  top:						0px;
  bottom:					0px;
  min-height: 				100%;
}

#symbol {
  text-align:				center;
}

#symbol_handheld {
  display:					none;
}

#titel {
  text-align:				center;
}

#page_content {	
  padding:          		40px 20px;
  margin:           		0px;
  background-color: 		rgba(0, 0, 0, .5);
  -webkit-box-shadow: 		0px 0px 100px 20px rgba(0, 0, 0, .8);
  -moz-box-shadow: 			0px 0px 100px 20px rgba(0, 0, 0, .8);
  box-shadow:				0px 0px 100px 20px rgba(0, 0, 0, .8);
  min-height: 				100%;
}

.back-to-top {
  text-align:				right;
}

#publish_date{
  text-align:				right;
}

/* Header and Footer styles
---------------------------------------- */

header {
  color:					white;
  text-align:				right;
  font-family:      		teutonic_no1demibold, "Times New Roman", Times, serif;
  font-size:				90%;
  padding:					3px 2% 3px 2%;
  margin:           		0px;
  top: 						0px;
  left:						0px;
  width: 					96%;
  height: 					30px;
  background-image:			url(../graphics_template/board.jpg);
  background-color: 		rgba(0, 0, 0, .8);
  -webkit-box-shadow: 		0px 0px 20px 5px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 			0px 0px 20px 5px rgba(0, 0, 0, 0.6);
  box-shadow:				0px 0px 20px 5px rgba(0, 0, 0, 0.6);
  position: 				fixed;
  z-index:					3;
  min-width:				600px;
}

header a {
  display:					block;
  text-decoration:			none;
}

header p {
  font-size:				200%;
  margin-top: 				0;
  margin-bottom:			0;
}

#webadress {
  text-decoration:			none;
 }

footer {
  background-image:			url(../graphics_template/board.jpg);
  color:					white;
  margin:           		0px;
  position: 				fixed;
  left:						0px;
  bottom: 					0px;
  padding:					4px 2% 4px 2%;
  width: 					96%;
  height:					18px;
  background-color: 		rgba(0, 0, 0, .8);
  -webkit-box-shadow: 		0px 0px 20px 5px rgba(0, 0, 0, .6);
  -moz-box-shadow: 			0px 0px 20px 5px rgba(0, 0, 0, .6);
  box-shadow:				0px 0px 20px 5px rgba(0, 0, 0, .6);
  z-index:					4;
  min-width:				600px;
}

#mailinglist {
  float:					right;
  background-image: 		url(../graphics_template/couvert_hover.jpg);
  background-repeat: 		no-repeat;
  background-position:		right top;
}

#couvert_handheld {
  display:					none;
}

#mailinglist img {
  position: 				absolute;
  top:						4px;
  right:					2%;  
  -webkit-transition: 		opacity 1000ms ease-in-out;
  -moz-transition: 			opacity 1000ms ease-in-out;
  -o-transition: 			opacity 1000ms ease-in-out;
  -ms-transition: 			opacity 1000ms ease-in-out;
  transition: 				opacity 1000ms ease-in-out;
}

#mailinglist img.top:hover, #mailinglist img.top:focus {
  opacity:					0;
}

.mailinglist {
  vertical-align:			top;
  padding:					0px 45px 0px 15px;
}

#copyright_handheld {
  display:					none;
}

#copyright {
  float:					left;
}

/* Global Content Styles
---------------------------------------- */
.textlink {
  text-decoration:			none;
}

.handheld {
  display: 					none;
}

/* column container */
.colmask {
	clear:					both;
	float:					left;
	width:					100%;			/* width of whole page */
	overflow:				hidden;			/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:					left;
	width:					100%;
	position:				relative;
}
.col1,
.col2,
.col3 {
	float:					left;
	position:				relative;
	padding:				0 0 1em 0;
	overflow:				hidden;
	text-align: 			center;
}
/* 2 Column (double page) settings */
.doublepage {
	background:				transparent;		/* right column background colour */
}
.doublepage .colleft {
	right:					50%;				/* right column width */
	background:				transparent;		/* left column background colour */
}
.doublepage .col1 {
	width:					46%;				/* left column content width (column width minus left and right padding) */
	left:					52%;				/* right column width plus left column left padding */
}
.doublepage .col2 {
	width:					46%;				/* right column content width (column width minus left and right padding) */
	left:					56%;				/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Global image and table stiles
---------------------------------------- */
video {
  border-top: 				2px solid #bbb;
  border-left: 				2px solid #bbb;
  border-right: 			2px solid #333;
  border-bottom: 			2px solid #333;
}

.shadow_box {
  background-color:			rgba(116, 113, 103, .3);
  margin:					8px 0px;
  -webkit-box-shadow: 		2px 2px 12px 4px rgba(0, 0, 0, .8);
  -moz-box-shadow: 			2px 2px 12px 4px rgba(0, 0, 0, .8);
  box-shadow:				2px 2px 12px 4px rgba(0, 0, 0, .8);
}

.thumbnail {
  margin:					8px;
  -webkit-box-shadow: 		2px 2px 12px 4px rgba(0, 0, 0, .8);
  -moz-box-shadow: 			2px 2px 12px 4px rgba(0, 0, 0, .8);
  box-shadow:				2px 2px 12px 4px rgba(0, 0, 0, .8);
}

.thumbnail_gallery {
  text-align:				left;
  margin:					0px;
  padding:					0px;
}

table, video, .image, .jp-audio, .video-container {
  margin:					15px 0px;
  -webkit-box-shadow: 		2px 2px 12px 4px rgba(0, 0, 0, .8);
  -moz-box-shadow: 			2px 2px 12px 4px rgba(0, 0, 0, .8);
  box-shadow:				2px 2px 12px 4px rgba(0, 0, 0, .8);
}

.image_right {
  float:					right;
  margin:					15px 0px 15px 15px;
  -webkit-box-shadow: 		2px 2px 12px 4px rgba(0, 0, 0, .8);
  -moz-box-shadow: 			2px 2px 12px 4px rgba(0, 0, 0, .8);
  box-shadow:				2px 2px 12px 4px rgba(0, 0, 0, .8);
}

.image_left {
  float:					left;
  margin:					15px 15px 15px 0px;
  -webkit-box-shadow: 		2px 2px 12px 4px rgba(0, 0, 0, .8);
  -moz-box-shadow: 			2px 2px 12px 4px rgba(0, 0, 0, .8);
  box-shadow:				2px 2px 12px 4px rgba(0, 0, 0, .8);
}

figure {
  display:					inline-block;
  margin:					0px;
}

.figure_right {
  float:					right;
  margin:					0px 0px 0px 15px;
}

.figure_left {
  float:					left;
  margin:					0px 15px 0px 0px;
}

figcaption {
  font-size:				105%;
  font-weight:				bold;
}

.float_right{
  float:					right;
}

.float_left{
  float:					left;
}

hr {
  border : 					0;   
  height : 					53px;
  background: 				url(../graphics_template/hr.png) 50% 0 no-repeat;
  background-size: 			100%;
  margin : 					1em 0;
}

dl {
  padding: 					0px;
}
dt {
  float: 					left;
  clear: 					left;
  width: 					170px;
  font-weight: 				bold;
}
dt:after {
  content: 					":";
}
dd {
  margin: 					0 0 0 170px;
  padding: 					0 0 0.5em 0;
  overflow:					hidden;
}

#page img { 
  width: 					inherit;
  max-width: 				100%;
  height: 					auto;
  vertical-align: 			bottom;
}

/*Image link animations*/	
.image_link {
  -webkit-transition: 		all 1000ms ease-in-out;
  -moz-transition: 			all 1000ms ease-in-out;
  -o-transition: 			all 1000ms ease-in-out;
  -ms-transition: 			all 1000ms ease-in-out;
  transition: 				all 1000ms ease-in-out; 
}

.image_link:hover, .image_link:focus {
  -moz-transform: 			scale(1.02);
  -o-transform: 			scale(1.02);
  -ms-transform: 			scale(1.02);
  -webkit-transform: 		scale(1.02);
  transform: 				scale(1.02);
}

.image_link:active {
  -webkit-transition: 		all 150ms ease-in-out;
  -moz-transition: 			all 150ms ease-in-out;
  -o-transition: 			all 150ms ease-in-out;
  -ms-transition: 			all 150ms ease-in-out;
  transition: 				all 150ms ease-in-out;
  -moz-transform: 			scale(.98);
  -o-transform: 			scale(.98);
  -ms-transform: 			scale(.98);
  -webkit-transform: 		scale(.98);
  transform: 				scale(.98);
}

table{
  border-top:				1px solid #a5a092;
  border-left:				1px solid #a5a092;
  border-right:				1px solid #403e39;
  border-bottom:			1px solid #403e39;
  background-color:			rgba(116, 113, 103, .3);
}

tr{
  background-color: 		rgba(13, 12, 11, .2);
}

.column-2, .column-3{
  text-align:				center;
}

td, th{
  padding: 					2px 5px;
}

/*Iframe Video Container for YouTube*/
.video-container {
  position: 				relative;
  padding-bottom: 			56.25%;
  padding-top: 				30px; 
  height: 					0; 
  overflow: 				hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  border:					0;
  position: 				absolute;
  top: 						0;
  left: 					0;
  width: 					100%;
  height: 					100%;
}

/*
#page table {
  width: 					inherit;
  max-width: 				100%;
  height: 					auto;
  vertical-align: 			bottom;
}
*/


/* Global image and table stiles
---------------------------------------- */

/*Index styles*/
.shield {
  padding:					30px 0px 30px 0px;
}

.shield:hover, .shield:focus {
  -moz-transform: 			translate(0px, 10px); 
  -o-transform: 			translate(0px, 10px);
  -ms-transform: 			translate(0px, 10px); 
  -webkit-transform: 		translate(0px, 10px);
  transform: 				translate(0px, 10px);
}

.shield:active {
  -moz-transform: 			translate(0px, 10px); 
  -o-transform: 			translate(0px, 10px);
  -ms-transform: 			translate(0px, 10px); 
  -webkit-transform: 		translate(0px, 10px);
  transform: 				translate(0px, 10px);
  -moz-transform: 			scale(.95);
  -o-transform: 			scale(.95);
  -ms-transform: 			scale(.95);
  -webkit-transform: 		scale(.95);
  transform: 				scale(.95);
}

/*Downloads - Gratis styles*/
.wallpaper-sizes-style {
  display:					inline-block;
  width: 					32%;
  min-width:				120px;
}

#albumlist {
  display: 					inline-block;
  text-align: 				center;
  width: 					140px;
  vertical-align:			top;
}

#albumlisttitle {
  height: 					30px;
}

/*Lyrics - Liedertexte styles*/
li {
  font-style:				bold; 
}

/*Pictures - Bilder styles*/
menu {
  margin:					0;
  padding:					0;
}

#gallery {
  display: 					inline-block;
  text-align: 				center;
  vertical-align:			middle;
}

.thumbnail {
  margin:					8px;
  box-shadow:				2px 2px 12px 4px rgba(0, 0, 0, .8);
}

/*Library - where to View Black metal bands that no longer exist*/
.indent {
  margin:					10px 0px 0px 20px;
}

details[open] {
  margin:					30px 0px;
}

details[open] summary {
  font-size:				115%;
}


/*Thumbnail Gallery - For thumbnails of equal height various width*/
.thumbnail_gallery_equal-height {
  display: 					inline-block;
  text-align: 				center;
  padding: 					0px 8px;
  vertical-align:			top;
}

/*Thumbnail Gallery - Fixed Width for Landscape and portrait Images containing Figure Caption*/
.thumbnail_gallery_row {
  display:					inline-block;
  width:					216px;
  text-align: 				center;
}

/*Thumbnail Gallery - Fixed Height and Width for Landscape and portrait Images*/
.thumbnail_gallery_grid {
  display:					inline-block;	/*Part one of Thumnail grid gallery. This goes in to first container*/
  height: 					216px;
  width:					216px;
  text-align: 				center;
  vertical-align: 			middle;
}
.thumbnail_gallery_grid_vertical_align {	/*Part two of Thumnail grid gallery. this goes in to nested container of the above container*/
  position: 				relative;
  top: 						50%;
  -webkit-transition: 		translateY(-50%);
  -moz-transition: 			translateY(-50%);
  -o-transition: 			translateY(-50%);
  -ms-transition: 			translateY(-50%);
  transform: 				translateY(-50%);
}


/*Padding For Figure Figcaptions*/
.figcaption_top {
  padding:					30px 0px 0px 0px;/*When Figcaption is on top of image*/
}

.figcaption_bottom {
  padding:					0px 0px 30px 0px;/*When Figcaption is on bottom of image*/
}

/*Prevents wraping of other content around Floating element*/
.clearfix { 
  clear: 					both;	
}
/*Alternative method. Prevents wraping of other content around Floating element
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}*/


/*Style Blockquotes and Quotes Italic Quotation marks automated for german and english*/
q, 
blockquote {
  font-style: 				italic;
}
q lang(en), 
blockquote lang(en) {
  quotes: 					"\201C" "\201D" "\2018" "\2019";
}
q lang(de), 
blockquote lang(de) {
  quotes: 					"\201E" "\201C" "\201A" "\2018";
}
q:before,
blockquote:before {
  content: 					open-quote;
}
q:after,
blockquote:after {
  content: 					close-quote;
}