/**** Main Body Text ****/  
@font-face {
  font-family: 'Font_Body';
  src: URL('/z_fonts/TravelingTypewriter.ttf') format('truetype');
  font-weight: bold;
  font-style: bold;
}

/**** Heading Text ****/  
@font-face {
  font-family: 'Font_Head';
  /* src: URL('/z_fonts/summerbreeze_g-webfont.ttf') format('truetype');*/
  /* src: URL('/z_fonts/XXII DIRTY-ARMY.ttf') format('truetype'); */
  src: URL('/z_fonts/XXII STRAIGHT-ARMY.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; 
}

/*
* {
    margin: 0;
    padding: 0;
}
*/

/*body, option, select, input {*/
body, option {
	background-color: 		black;
	background-image: 		url(/z_pictures/background_01.png);
    background-attachment: 	fixed !important;
	background-position: 	left;
	background-repeat: 		no-repeat;
  	background-size: 		100% 100%;
    padding-left: 			2pt;
	font-size: 				20px;
	font-family: 			Font_Body, Arial, sans-serif !important;
	text-shadow: 			2px 5px 5px #777 !important;
}

input, select {
	background-color: whitesmoke !important; /* lightgrey orange white */
	font-size: 		20px;
	font-family: TravelingTypewriter, Arial, sans-serif !important;
	text-shadow: 2px 5px 5px #777 !important;
    background-attachment: fixed;
}

button , .button {
	font-size: 				20px;
	font-family: 			TravelingTypewriter,Arial, sans-serif !important;
	text-shadow: 			2px 5px 5px #777 !important;
}

/*
.login_centered {
  width: 50%;
  padding: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: black !important;
}
*/

#wrapper {
    /*width: 					100%;*/
    width: 					1680px;
    /* width: 				1480px;
     margin: 				0 auto; */
	padding-top: 			10pt !important;
	padding-left: 			10pt !important;
	padding-right: 			10pt !important;
    text-align: 			left; 
}

aside {
    width: 					350px;
    margin-left:			0px;
    margin-right:			0px;
    float: 					right;
}

aside a {
    color: black;
    text-decoration: none;
}

aside p {
    padding-left: 	30px;
    padding-bottom: 5px;
}

aside ul {
    padding-left: 	30px;
    padding-bottom: 5px;
}

aside img {
    color: black;
    text-decoration: none;
}

section {
    /* margin-left:			320px; */
    margin-left:			0px;
    margin-right:			350px;
    /* margin-right:			15%; */
    text-align: 			left !important; 
    background-color: 		lightgrey;
	border-radius: 			15px; /* new add-on */
}

section a {
    color: black;
    text-decoration: none;
}

section a:hover {
	color: 					black;
	background: 			orange;
}	

section p {
    padding-left: 	30px;
    padding-bottom: 5px;
}

section ul {
    padding-left: 3em;
}

section li {
    padding-bottom: 0.5em;
}

.runes_h1 {
	font-family: 			'Font_Head' !important;
	font-weight: 			100 !important;
	font-size: 				40px;
    letter-spacing: 		3px !important;
	/* letter-spacing: 		0.0em;
	margin: 				2px;
    padding: 				20px; */
    text-align: 			left;
}

.runes_h2 {
	font-family: 			'Font_Head' !important;
	font-weight: 			50 !important;
	font-size: 				30px;
    letter-spacing: 		3px !important;
	/* letter-spacing: 		0.0em;
	line-height: 			10px;
    margin: 				2px;
    padding-top: 			20px;
    padding-left: 			20px; */
    text-align: 			left;
}

.runes_h4 {
	font-family: 			'Font_Head' !important;
	font-weight: 			18 !important;
	font-size: 				20px;
    letter-spacing: 		3px !important;
    text-align: 			left;
    vertical-align:			text-bottom !important;
}

/************************/
/**** Header Section ****/  
* {
	margin: 				0;
	padding: 				0;
	/* font-family: 		Font_Body, Arial, sans-serif; */
}
	
header {
	/* background-color: 		yellow; */
	background-color: 		gray;
	width: 					100%;
	float: 					left;
	border-bottom: 			1px solid black;
	font-family: 			Font_Head, Arial, sans-serif;
}
	
#bereichlogo {
	color: 					white; /* white */
	background-color: 		grey; /* limegreen */
	display: 				block;
	padding: 				0.5em;
	text-decoration: 		none;
	float: 					left;	
}

#bereichlogo {
	width: 					auto;
}
	
/*
#wrapper {
    width: 					1480px;
     /* margin: 			0 auto;
	padding-top: 			10pt !important;
	padding-left: 			10pt !important;
    text-align: 			left; 
}
*/

#steuerung li {
	list-style: 			none;
	float: 					left;
}
	
#steuerung a {
	display: 				block;
	height: 				100%;
	width: 					100%;
	padding: 				0.5em;
	text-decoration: 		none;
	color: 					white;
	background-color: 		gray;
}	

.menue-button {
	display: 				none;
}		
	
#steuerung {
	float: 					right;
}
	
#steuerung a:hover {
	color: 					black;
	background: 			orange;
}	

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
/*
 * @media only screen and (max-width:600px) {
	.menue-button {
		display: block;
	}

	.menue-button {
		background-color: darkblue;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	

	#bereichlogo {
		width: 100%;
	}

	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}	

	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}	

	.menue-button:hover {
		color: black;
		background: orange;
	}
}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
/*
 * #nav-menue:target #steuerung {
	display: block;
}
	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
/*
 * #nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
	
table {
	/* border-collapse: collapse;*/
	border: 0 !important;
}

.table_main {
	padding-left: 			20px;

}

th {
	margin: 				3px;
	padding: 				3px;
	vertical-align: 		top;
	text-align: 			left;
	font-size: 				20px;
    vertical-align:			bottom !important;
}

td {
	margin: 				3px;
	padding: 				3px;
	vertical-align: 		top;
	text-align: 			left;
	font-size: 				20px;
}

td.td_neutral {
	font-size: 				20px;
	font-family: 			Font_Body, Arial, sans-serif !important;
	text-shadow: 			2px 5px 5px #777 !important;
	/* no values */
}

td.border-bottom,th.border-bottom  {
	border-bottom: 			1px solid black !important; 
}

td.border-right,th.border-right  {
	border-right: 			1px solid black !important; 
}

.tr_head {
	background-color:		lightgrey;
	color:					black;
	border-bottom: 			1px solid black !important; 
}

.th_head {
	background-color:		grey;
}

.th_head_bottom_line {
	font-size: 			20px;
	text-align: 		center;
	font-weight: 		bold !important;
	/*font-style: 		bolder !important;*/
	background-color:	#E8E8E8 !important;
	border-bottom: 		1px solid black !important; 
	border-right: 		1px solid black !important; 
}

.th_head_bottom_line_left {
	font-size: 			20px;
	text-align: 		left;
	font-weight: 		bold !important;
	/*font-style: 		bolder !important;*/
	background-color:	#E8E8E8 !important;
	border-bottom: 		1px solid black !important; 
	border-right: 		1px solid black !important; 
}

.td_head_bottom_line {
	font-size: 			20px;
	border-bottom: 		1px dotted black !important; 
	border-right: 		1px dotted black !important; 
}

.td_head_right_line {
	font-size: 			20px;
	border-right: 		1px dotted black !important; 
}

.td_head_middle {
	border-left: 		1px solid black !important; 
	border-right: 		1px solid black !important; 
}

.td_head_right {
	border-right: 		1px solid black !important; 
}

.th_dottet_left_right {
	padding: 			15px !important;
	text-align: 		center !important;
	border-bottom: 		1px dotted black !important;
}

.th_dottet_middle {
	padding: 			15px !important;
	text-align: 		center !important;
	border-bottom: 		1px dotted black !important;
	border-left: 		1px dotted black !important; 
	border-right: 		1px dotted black !important; 
}

select.list1 option.option1 {
	background-color:	white !important;
}

.tooltip {
  position: 			relative;
  display: 				inline-block;
  border-bottom: 		1px dotted black;
}

.tooltip .tooltiptext {
  visibility: 			hidden;
  width: 				200px;
  background-color: 	black;
  color: 				#fff;
  text-align: 			center;
  border-radius: 		6px;
  padding: 				5px 0;

  /* Position the tooltip */
  position: 			absolute;
  z-index: 				1;
}

.tooltip:hover .tooltiptext {
  visibility: 			visible;
}