body {
    font-family: 'Verdana', sans-serif;
    margin: 50px 25px;
}

a {
    color: #2a99b6;
}

a:hover {
    color: #33bbdf;
}

.text-block em {
color: red;
}

header, footer, div.page {
    margin: 0 30px 30px 30px;
    background: #daeef3;
    padding: 20px 30px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}
tr:nth-child(odd) {
    background-color: #ffffff
}

th {
    background-color: #a0aaed;
    color: white;
    padding-left: 1em;
    padding-right: 1em;
}

header h1 {
    color: #169bbd;
    margin: 0;
    font-weight: normal;
    font-size: 42px;
}

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

header nav ul li {
    display: inline;
    margin: 0 8px 0 0;
    padding: 0;
}

div.page {
    background: #f1fbfe;
}

div.figure {
   border: thin silver solid;
   background-color: white; 
   margin-top: 0.2em;
   margin-bottom: 0.2em;
   margin-left: 0.5em;
   margin-right: 0.5em;
   padding: 0.2em;
   text-align: center;
}

div.titelseite {
  float: left;
  margin-right: 1em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}  

.breadcrumb {
	/*centering*/
	width: 100%;
	display: inline-block;
	overflow: hidden;
	border-radius: 5px;
}

@media (min-width: 650px) {

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: #444;
	padding: 0 10px 0 40px;
	background: #ddd;
	position: relative;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
	padding-left: 16px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

.breadcrumb a.active, .breadcrumb a:hover{
	background: #a0aaed;
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: #a0aaed;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #ddd;
	box-shadow: 2px -2px 0 2px #f1fbfe;
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
}

.breadcrumb a:last-child:before {
	display: none;
}

.breadcrumb a:last-child {
	float: right;
	padding: 0 10px 0 10px;
	border-radius: 5px;
}


.breadcrumb a:before {
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #ddd;
	box-shadow: 0 0 0 1px #ccc;
}

}

.icon {
  position: relative;
  float: left;
  display: block;
  margin: .925em;
}
  
.icon::before,
.icon::after {
  content: "";
  position: absolute;
}

.icon_home {
  border-bottom: .938em solid black;
  border-left: .938em solid transparent;
  border-right: .938em solid transparent;
  margin-left: 1.875em;
}

.icon_home::before {
  width: .563em;
  height: .625em;
  background: black;
  margin: .938em 0 0 -.688em;
}
  
.icon_home::after {
  width: .563em;
  height: .625em;
  background: black;
  margin: .938em 0 0 .125em;
}


.zeiger {
	/*centering*/
	width: 100%;
	display: inline-block;
	overflow: hidden;
	border-radius: 5px;
}

.zeiger a {
	text-decoration: none;
	outline: none;
	display: block;
	float: right;
	margin-right: 24px;
	font-size: 12px;
	line-height: 36px;
	color: #444;
	padding: 0 10px 0 20px;
	background: #ddd;
	position: relative;
}


.zeiger a.active, .zeiger a:hover{
	background: #a0aaed;
}
.zeiger a.active:after, .zeiger a:hover:after {
	background: #a0aaed;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.zeiger a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #ddd;
	box-shadow: 2px -2px 0 2px #f1fbfe;
	border-radius: 0 5px 0 50px;
}

.zeiger a:before {
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #ddd;
	box-shadow: 0 0 0 1px #ccc;
}


@media only screen and (max-width: 899px) {
	body { margin: 0px 0px; }
	header, footer, div.page { 
		margin: 0 0px 10px 0px;
        	padding: 5px 8px;
        }
	div.figure img { 
		max-width: 100%;
		height: auto;
	}
	div.titelseite {
		max-width: 25%;
	}
	div.titelseite img {
		max-width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 649px) {
	.breadcrumb a { text-decoration: none; }
	.breadcrumb a:first-child:before { content: none; }
	.breadcrumb a:before { 
		content: ">"; 
	}
	.breadcrumb a:last-child { float: right; }
	.breadcrumb a:last-child:before { content: ""; }
}