/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21.10.2015, 14:45:34
    Author     : joerg
*/
html {
    width: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: hsla(0,0%,90%,1.0);
    border-radius: 15px 0 15px 0;

}
*  {
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
.wrapper {
    width: 80%;
    margin: 15px;
    padding: 15px;
    background: hsla(0,100%,100%,0.5);
    border: 1px solid hsla(0,0%,0%,0.5);
}
header {
}
section #logo {
    width: 100%;
    height: 85px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#214a9f+0,6b99d6+100 */
background: #214a9f; /* Old browsers */
background: -moz-linear-gradient(top,  hsla(220,65%,38%,1) 0%, hsla(214,56%,63%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(220,65%,38%,1)), color-stop(100%,hsla(214,56%,63%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#214a9f', endColorstr='#6b99d6',GradientType=0 ); /* IE6-9 */
}
#logo img {
    margin-left: 50px;
    padding: 10px;
    background: hsla(0,100%,100%,0.5);
    height: 100%;
}
.menu {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6b99d6+0,214a9f+49,6b99d6+100 */
background: #6b99d6; /* Old browsers */
background: -moz-linear-gradient(top,  hsla(214,56%,63%,1) 0%, hsla(220,65%,38%,1) 50%, hsla(214,56%,63%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(214,56%,63%,1)), color-stop(50%,hsla(220,65%,38%,1)), color-stop(100%,hsla(214,56%,63%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  hsla(214,56%,63%,1) 0%,hsla(220,65%,38%,1) 50%,hsla(214,56%,63%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  hsla(214,56%,63%,1) 0%,hsla(220,65%,38%,1) 50%,hsla(214,56%,63%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  hsla(214,56%,63%,1) 0%,hsla(220,65%,38%,1) 50%,hsla(214,56%,63%,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  hsla(214,56%,63%,1) 0%,hsla(220,65%,38%,1) 50%,hsla(214,56%,63%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b99d6', endColorstr='#6b99d6',GradientType=0 ); /* IE6-9 */
display: flex;
justify-content: space-around;
color: hsla(0,100%,100%,1.0);
margin: 0;
padding: 0;
list-style: none;
}
.menu ul   {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    justify-content: space-around;
}
.menu a {
    color: hsla(0,100%,100%,1.0);
    font-weight: bold;
    font-size: 1.05em;
    text-align: center;
    flex: 100% 1 1;
}
.menu a:hover {

}
/* Haupt-Layout */
#Content {
  display: flex;
  padding: 1em 0 1em 0;

}
#Content main {
  flex: auto 1 2;
  margin:  0 1em 0 0;
  border-radius: 15px 0 15px 0;
}
#Content #breadcrumb {
    border: 1px solid orange;
    border-left: 8px solid orange;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 10px;
    background: hsla(0,100%,100%,0.8);
}
#Content aside {
  flex: 200px 1 1;
  padding: 0;
  max-width: 180px;
}

/* Footer-Module */
footer {
  display: flex;
  justify-content: space-between;

}
footer section {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#214a9f+0,6b99d6+100 */
background: #214a9f; /* Old browsers */
background: -moz-linear-gradient(top,  hsla(220,65%,38%,1) 0%, hsla(214,56%,63%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(220,65%,38%,1)), color-stop(100%,hsla(214,56%,63%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  hsla(220,65%,38%,1) 0%,hsla(214,56%,63%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#214a9f', endColorstr='#6b99d6',GradientType=0 ); /* IE6-9 */
color: hsla(0,100%,100%,1.0);
padding: 0 15px;
border-radius: 15px 0 15px 0;
border: 1px solid hsla(0,0%,0%,0.5);
}
footer section:nth-child(2) {
    margin: 0 15px;
}
/* Breadcrumb */
.breadcrumb {
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #f5f5f5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
  font-size: smaller;
}
.breadcrumb > li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	text-shadow: 0 1px 0 #fff;
}
.breadcrumb > li > .divider {
	padding: 0 5px;
	color: #ccc;
}
.breadcrumb > .active {
	color: #999;
}