@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600");

/*
based on 
	Parallelism by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}


html {
    height:100%;
}

body {

    /*background-color:rgb(120,120,120);*/
    background-color:rgb(200,200,200);
    background-size:100% 100%; 
    margin:5px;
    padding:10px;
    font-family: 'Source Sans Pro';
    color:white;
    font-size:1.2em;
}

/*
hr {
    border:0;
    width:80%;
    height:3px;
    background-color:#f00;
    color:#f00;
    border-color: #f00;
}*/

/*
hr {
    width:100px;
    height:2px;
    background-color:white;
    margin-top:20px;
    margin-bottom:20px;
}*/

hr {
    border: 0;
    width:80%;
    height:1px;
    border-top: 1px solid black;
    color: black;
    margin-top:20px;
    margin-bottom:20px;
}

a {
    /*color:rgb(255,255,255);*/
    color:rgb(55,55,55);
		-moz-transition: color 0.25s ease-in-out;
		-webkit-transition: color 0.25s ease-in-out;
		-ms-transition: color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out;
	}
	


a:hover {
			color: white;
			background-color:red;
			padding:0px;
		}


#wrapper {
    margin:auto;
    width:950px;
    background-color:rgb(240,240,240);
   
}

#boxSpacer {
    justify-content:space-between;
    display:flex;
    width:100%;
    padding:0px;
    margin-bottom:2em;
}

#box {
    border-style:solid; 
    border-width:8px;
    /*border-color:white; */
    border-color:rgb(57, 57, 57);
    background-color:rgb(100,100,100);
    padding:0px;
    height:252px;
    /*margin-left:0.25em;
    margin-right:0.25em;  */
    margin-left:auto;
    margin-right:auto;
    margin-bottom:1em;
}

#header{
    padding:10px;
    /*width:500px; */
    height:180px; 
    margin-bottom:3em;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    border-style:solid; 
    border-width:10px;
    border-color:white; 
    background-color:rgb(100,100,100);
}

#separator {
    display:block;
    border:none;
    height:20px;
}


.item {

    border-style:solid; 
    border-width:10px;
    border-color:white; 
    background-color:rgb(100,100,100);
    padding:0px;
    height:212px;

    display: inline-block;
  	position: relative;
	vertical-align: middle;
	margin-left:0em;
	margin-right:0em;
	margin-bottom:1em;  
	padding:0px;
}


#itemNavi {
    width:18.5%; /* 150px */  
    height:70px;
    margin-bottom:3em; 
    /*background-color:red;*/
    background-color:rgb(50,50,50);
    /*background-color:rgb(42,42,42);*/ /*42, 48, 69 */
    padding:5px;
}


#itemNavi:hover{
    /*background-color:rgb(150,150,150);*/
    background-color:red;
    color:white;
}

#itemNavi a{
    text-decoration:none;
}


#itemNavi:hover a{
    text-decoration:none;
    background-color:red;
    color:white;
}


.name {
    font-size:1em;
    color:rgba(0,0,0,60);
}

.center {
    text-align:center;
}

.smaller {
    text-align:left;
    font-size:1em;
}




img {
    display: block;
	z-index: 1;
}

h2 {
    position:absolute;
    left:0px;
    bottom:0px;
    display:inline-block;
    text-align:center;
    font-size:1em;
    z-index: 2;
    /*background: rgba(18, 21, 29, 0.85);*/
    background: rgba(200, 200, 200, 0.85);
    width: 100%;
    padding-top:0.5em;
    padding-bottom:0.5em;
    /*color:rgb(230,230,230);*/
	color:rgb(50,50,50);
}


h4 {
    font-size:1.25em;
    /*color:rgb(230, 230, 230);*/
    color:rgb(50,50,50);
}

h5 {
    font-size:1.25em;
    color:rgb(80, 80, 80);
}

.bildTitle {
    /*position:absolute;*/
    left:0px;
    bottom:0px;
    display:inline-block;
    text-align:center;
    font-size:0.75em;
    z-index: 2;
    /*background: rgba(18, 21, 29, 0.85);*/
    background: rgba(230,230,230,0.85);
    width: 100%;
    padding-top:0.5em;
    padding-bottom:0.5em;
	/*padding: 1em;*/
}


.bildTitle p {
    text-align:left;
    font-size:1.2em;
    padding:10px;
    color:black;
}

.bildTitle li {
    color:black;
    text-align:left;
    font-size:1.2em;
    margin-left:30px;
}

.bildTitle h6{
    color:rgb(100,100,100);
    font-weight:bold;
    text-align:left;
    margin-left:10px;
    font-size:1.4em;
    margin-top:2em;
    margin-bottom:0.5em;
}


.bildTitle p a{
    color:black;
    text-decoration:underline;
}

#info {
    text-align:left;
    padding:10px;
    color:red;
    font-weight:bold;
    font-size:1.5em;
}

h1 {
	font-size: 1.8em;
	line-height: 1em;
	color:white;
}

#header h3 {
    font-style:italics;
    font-size: 1.25em;
    line-height:1.5em;
    text-align:center;
}



p {
					font-size: 1.25em;
					line-height: 1.5em;
					margin: 0.5em 0 0 0;
					color:rgb(230,230,230);
}

#header p {
    font-size: 1.25em;
	line-height: 1.5em;
	margin: 0.5em 0 0 0;
	color:rgb(230,230,230);
}


#footer {
    text-align:right;
    position:float;
    bottom:20px;
    right:20px;
    display:block;
    margin-top:3em;
    border-top-style:dotted;
    border-top-width:3px;
    border-top-color:rgba(80,80,80, 60);
}

.smaller-center {
    font-size:1em;
    text-align:center;
    /*color:rgba(200,200,200, 60);*/
     color:rgb(100,100,100);
}



.hiddenOverlay{
    display:none;
    position: absolute;
    top:1em;
    margin-left:1em;
    width:450px;
    height:auto;
    border-style:solid; 
    border-width:50px;
    border-color:rgb(57,57,57);
    background-color:rgb(255,255,255); /*240 */
    z-index:1002;
}

.blackOverlay{
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: rgb(230,230,230); /* 100*/
        z-index:1001;
        -moz-opacity: 0.95;
        opacity:.95;
        filter: alpha(opacity=95);
    }



.overlayClose{
    position:absolute;
    /*right:-75px;
    top:-10px;*/
    right:-50px;
    bottom:-95px;
    display:inline-block;
    text-align:right;
    font-size:0.9em;
    z-index: 3;
    background: rgba(80, 80, 80, 0.8);
    width: 200px;
    padding:0.5em;
    border-width:0px;
    border-style:solid;
    border-color:white;
}


.bildTitle ul {
    font-size:1em;
}


ul#navigator
 {
    padding: 0;
    justify-content:space-between;
    display:flex;
}

ul#navigator li {
    display: inline;
    color:rgb(200,200,200);
}

ul#navigator li a {
    color:rgb(200,200,200);
}

ul#navigator li a:hover {
    color:white;
}

img.resize {
    width:100%;
    height:auto;
}

p i {
    font-style:italic;
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:red;
    padding-left:10px;
    color:red;
}

il p {
    font-size:1.2em;
} 


label {
    width:150px;
    text-align:left;
    color:black;
}
input {
    width:auto;
    text-align:left;
    color:black;
}

form {
    text-align:left;
    width:100%;
    margin-left:1em;
}

.cell {
    display:inline;
    vertical-align:text-top;
}

.cell150 {
    width:150px;
    display:inline;
    vertical-align:text-top;
}