/**
* Modules Stylesheet v1
* René Schulz (http://duofrei.de & http://rene-schulz.info)
*/

/* Custom Header & Footer */
#FTZ_header,
#FTZ_footer {
	background-color: #17407A;
}

/* Header for FTZ */ 
#FTZ_header {
	text-align: center;
	border-bottom: 0.125rem solid #152232;
	box-shadow: 0 -6px 4px 7px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 99;
}

#FTZ_header > .wrapper {
	margin: 0 auto;
	width: 55rem;
	padding: 0.5rem;
}

#FTZ_header > .wrapper {
	margin: 0 auto;
	width: 20rem;
	padding: 0.5rem;
}
	
#FTZ_header > .wrapper > .site_name > a {
	color: #fff;
}

/* Footer for FTZ */
#FTZ_footer {
	border-top: 0.125rem solid #152232;
	box-shadow: 0 6px 4px 7px rgba(0, 0, 0, 0.5);
}

#FTZ_footer > .wrapper {
	width: 100%;
	padding-top: 1rem;
}
		
#FTZ_footer > .wrapper > #foot_navigation {
		margin: 0 6rem;
}
		
#FTZ_footer #foot_navigation ul li {
		display: inline;
		margin-right: 1.5rem;	
}

#FTZ_footer #foot_navigation ul li a{
		color: #fff;
		font: normal 300 0.875rem 'Open Sans';
		transition: color 0.5s ease-out;
}

#FTZ_footer #foot_navigation ul li a:hover {
		color: #5489C7;
		transition: color 0.5s ease-in;
}

/* Hidden Sidebar on the left */
	/* General Sidebar Styles */
	#sidebar {
		height: 100%;
		float: left;
		position: absolute;
		top: 0;
		left: 0;
		width: 35rem;
	}
	
	#sidebar .sidr {
		display :none;
		position: relative;
		height: 100%;
		float: left;
		overflow-x: none;
		background-color: #D2D2D2;
		box-shadow: 0.0625rem 0 0.25rem 0 rgba(0,0,0,0.5);
		z-index: 88;
		}
	
	#sidebar #expander {
		height: 100%;
		position: relative;	
		float: left;
		z-index: 88;
	}

	/* Center Expander with percentages */ 
	#sidebar #expander .wrapper {
		position: absolute;
	  left: 50%;
	  top: 50%;
	  -ms-transform: translate(-50%, -50%); /* IE 9 */
		-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
	  transform: translate(-50%, -50%);
	  width: 40%;
	  padding: 20px;  
	  text-align: center;
	}

	/* Simple Menu For Toogle Function */
	#sidebar #simple-menu {
		display: block;
		background-color: #D2D2D2;
		float: left;
		padding: 0.5rem 0.5rem 0.5rem 0.25rem;
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
		box-shadow: -0.1875rem 0 0 0 #D2D2D2, 0.0625rem 0 0.25rem 0 rgba(0,0,0,0.5); 
		position: relative;
		transition: all 0.25s ease-in-out;
	}

		#sidebar #simple-menu:hover:before {
			color: #5489c7;
			transition: all 0.25s ease-in-out;
	}
	
	/* Sidebar Main Options */
	#sidebar #main_options {
		width: 6rem;
		height: 100%;
		float: left;
		background-color: rgba(210,210,210,1);
		border-right: 0.0625rem solid rgb(194,194,194);
	}
	
	#sidebar .main_options_item {
		width: 6rem;
		height: 4rem;
		padding: 1rem 0;
		display: block;
		overflow: auto;
		cursor: pointer;
		text-align: center;
		position: relative;
		transition: all 0.25s ease-in-out;
		text-shadow: 0 -0.03125rem 0 rgb(0,0,0), 0 0.03125rem 0 rgb(255,255,255);
		color: rgb(170,170,170);
		overflow: visible;
		transition: all 0.25s ease-in-out;
	}
	
	/* Make icons full width */
	#sidebar #main_options .icon-ftz-l {
		width: 100%;
	}
	
	#sidebar #main_options .description {
		text-transform: uppercase;
		font-size: 0.75rem;
		line-height: 1rem;
	}

	#sidebar #main_options > .main_options_item:hover {
		color: #5489c7;
		transition: all 0.25s ease-in-out;
	}

	/* Sidebar Secondary Options */
	#sidebar #secondary_options {
		position: relative;
		float: left;
		width: 24rem;
		height: 100%;
		background-color: #F2F2F2;
		overflow-y: auto;
		border-right: 0.5rem solid #D2D2D2;
    box-shadow: -0.0625rem 0 0 0 #C2C2C2 inset;
	}
	
	#sidebar #secondary_options > .wrapper {
		margin: 0 2rem;
		padding: 1rem 0;
    position: relative;
    width: 20rem;
    height: 95%; 
	}
	
	#sidebar #secondary_options .select {
		overflow-y: auto;
	}
	
	#sidebar #secondary_options .wrapper .select-menu {
		width: 100%;
		height: auto;
		float: left;
		position: relative;
		margin: 0 0 2rem;
	}
		
	#sidebar #secondary_options .selectfield {
		line-height: 3rem;
		height: 3rem;
		font-size: 1rem;
		cursor: pointer;
		margin: -0.0625rem 0 0;
		overflow: hidden;
		position: relative;
		transition: all 0.25s ease-in-out;
		box-shadow: 0 -0.0625rem 0 0 #cccccc inset;
	}
	
	#sidebar  #secondary_options .selectfield .wrapper {
		height: 3rem;
	}
		
	#sidebar #secondary_options .selectfield:hover {
		box-shadow: 
			0 -0.25rem 0 0 #5489c7 inset,
			0 0.0625rem 0 0 #5489c7 inset;
		color: #5489c7;
		transition: all 0.25s ease-in-out;
	}
	
	#sidebar #secondary_options .selectfield:hover .icon-ftz-radiobutton:before {
		color: #5489c7;
		transition: all 0.25s ease-in-out;
	}
	
	#sidebar #secondary_options .text {
		display: inline;
		position: absolute;
		top: 0;
		left: 3rem;
	}
	
	#sidebar #secondary_options .meta {
    display: inline;
    right: 1rem;
    position: absolute;
    top: 0;
    font-size: 0.75rem;
    color: #CCCCCC;
	}
	
	/* Infobox for tool tips */
	#sidebar #infobox {
		background-color: #5588c7;
		box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.25);
		position: absolute;
		bottom: 2rem;
		margin: -0.0625rem 0 0;
		overflow: visible;
		width: 20rem;
	}
	
	#sidebar #infobox > .wrapper {
		padding: 0.5rem;
	}
	
	#sidebar #infobox .wrapper #header {
		position: relative;
		border-bottom: 0.0625rem solid #fff;
		margin: 0 0 0.5rem;
		padding-bottom: 0.5rem; 
	} 
	
	#sidebar #infobox h3 {
		font-size: 0.875rem;
		line-height: 2rem;
		text-transform: none;
		margin-left: 2.5rem;
	}
	
	#sidebar #infobox p {
		font-size: 0.75rem;
	}
	
	#sidebar #infobox h3,
	#sidebar #infobox p,
	.icon-ftz-s {
		color: #fff;
	}
	
	#sidebar #infobox .icon-ftz-s {
		float: left;
	}
	
	/* Headings for Secondary Options */
	#sidebar #secondary_options .select-menu > h1,
	#sidebar #secondary_options .select-menu > h2,
	#sidebar #secondary_options .select-menu > h3,
	#sidebar #secondary_options .select-menu > h4 {
		color: #b3b3b3;
		font-weight: 300;
		line-height: 4rem;
		padding: 0 0.5rem;
		box-shadow: 0 -0.0625rem 0 0 #cccccc inset;
	}
	
	/* Rest of Styling to .sidr class */
	.sidr .sidr-inner {
		padding: 0 0 15px
	}
	
	.sidr.left {
		left: -260px;
		right: auto
	}

/* Output for Maps, Times Series and Cross Sections */
#output {
	height: 100%;
	width: 100%;
	float: left;
	position: relative;
  z-index: 0;
}

#output > .wrapper {
	width: 96%;
	min-height: 37rem;
	margin: 0 auto;
	padding: 2% 0;
	overflow: auto;
}

#output #output-image {
	width: 82%;
	padding: 0 0 0 6%;
	float: left;
}

#output #output-image img {
	width: 100%;
	box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.15);
}

/* Functions next to Output */
#output-functions {
	float: left;
	width: 6rem;
	box-shadow: 
		-0.25rem 0 0 0 rgb(255,255,255),
		0.0625rem 0 0.25rem 0 rgba(0,0,0,0.15);
}

#output-functions > .wrapper,
#output-functions > .wrapper .function {
	width: 100%;
}

#output-functions > .wrapper .function {
	background-color: #f2f2f2;
	box-shadow: 0 0.0625rem 0 0 #e6e6e6 inset;
	position: relative;
	height: 2.5rem;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
	color: #AAAAAA;
}

#output-functions > .wrapper .function:hover {
	color: #5489c7;
	background-color: rgb(255,255,255);
	transition: all 0.25s ease-in-out;
}

#output-functions > .wrapper .function:first-child {
	box-shadow: none;
}

#output-functions .icon-ftz-xs {
    float: left;
    margin: 0.5rem;
    overflow: visible;
    }

#output-functions > .wrapper .function .description {
	display: inline;
	font-weight: 300;
  font-size: 0.75rem;
  line-height: 2.5rem;
  transition: all 0.5s ease-in-out;
}

/* ---------------- */
/* Styles for Page */
/* ---------------- */

/* Main Article */
#main-article {
	background-color: #fff;
	box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.15);
}

#main-article > .wrapper {
	width: 90%;
	padding: 25.5% 5%;
}

/* Additional Information */
.institution-detail {
	background-color: #fff;
	box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.15);
	width: 45%;
	margin: 0 0 1rem 2.5%;
	float: left;
}

.institution-detail img{
	width: 100%;
}

.institution-detail p {
	font-size: 0.875rem;
}

.institution-detail a:after {
	content: ' »';
}

.institution-detail:last-child {
	margin-right: 2.5%;
}

.institution-detail > .wrapper {
	margin: 0.5rem;
}

.institution-detail > .wrapper > .wrapper {
	margin: 1rem 0.5rem 0;
}

.contact-detail {
	background-color: #fff;
	box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.15);
	width: 92.5%;
	margin: 0 2.5%;
	clear: both;
	overflow: hidden;
}

.contact-detail > .wrapper {
	margin: 0.5rem;
	overflow: hidden;
}

.contact-detail img{
	width: 100%;
	float: left;
}

.contact-detail ul li {
	font-size: 0.75rem;
	line-height: 125%;
	margin-bottom: 0.25rem;
}

.contact-detail ul li:nth-child(1) {
	font-weight: 600;
}

.contact-detail ul li:nth-child(6) {
	margin-top: 1rem;
}

.contact-detail ul li:last-child {
	margin-bottom: 0;
}

/* ---------------- */
/* Media Queries    */
/* ---------------- */
/* less than 870 Pixel */
@media only screen and (max-width: 870px) {
	/* Output */
	#output > .wrapper {
    padding: 2% 2%;
		}
		
	#output #output-image {
	    padding: 0 0 0 0;
	    width: 100%;
    }
	
	/* Functions next to Output */
	#output-functions {
			float: left;
			width: 100%;
			box-shadow: 0 0 0 0, 0 0 0 0;
			position: relative;	
			box-shadow: 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.15);
			margin-top: -1px;
		}
		
	#output-functions > .wrapper .function {
			float: left;
			position: relative;
			height: 100%;
			width: 25%;
			box-shadow: none;
			z-index: auto;
		}
		
		#output-functions > .wrapper .function > .wrapper {
			width: 100%;
			margin: 0 auto;
		}
		
	#output-functions .icon-ftz-xs {
    margin: 0.5rem 0.5rem 0.5rem 1.5rem;
		}
		
	#output-functions > .wrapper .function:first-child {
	    box-shadow: none;
		}
	
	#output-functions > .wrapper .function .icon {
	    color: #fff;
	    display: inline;
	    left: 16px;
	    position: absolute;
	    text-shadow: 0, 0;
	    top: 17px;
	    transition: all 0.5s ease-in-out 0s;
		}
	
	#output-functions > .wrapper .function .text {
    	display: none;
		}
		
		/* Footer */
		#FTZ_footer > .wrapper > #foot_navigation {
    	margin: 0 4%;
		}
		
		#FTZ_footer #foot_navigation ul li {
			margin: 1rem;
		}
		
		#foot_navigation {
			text-align: center;
		}	
		
	/* Settings for Page */
	.l-half {
    width: 96%;
    margin: 0 2%;
		}
	#main-article,
	.institution-detail {
			position: relative;
			clear: both;
			margin-bottom: 2rem;
	}
	
	#main-article > .wrapper {
		width: 90%;
		padding: 5%;
	}
	
	/* Additional Information */
	.institution-detail {
		width: 100%;
		margin: 0 0 2rem;
	}
	
	.contact-detail {
		width: 100%;
		margin: 0 0 2rem;
		clear: both;
	}
}