/* Body */
body {
	font-family: Lato;
	font-size: 1.4em;
	background: url(../images/header-alt.jpg) no-repeat;
}

/* Clearfix */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

.group:after {
	content: "";
	display: table;
	clear: both;
}

/* Layout: Grid */

@media (min-width: 30em) {
	#wrapper {
		max-width: 50em;
		margin: 0 auto;
	}
}

@media (min-width: 65em) {
	#wrapper-master {
		max-width: 90em;
		margin: 0 auto;
	}
	#wrapper-primary {
		width: 66%;
		float: left;
		border-right: 1px solid #efefef;
	}
	#wrapper-secondary {
		width: 33%;
		float: left;
	}
}

/* Layout: div */

/* Layout: header, section, article und nav */

header {
	padding: 2em 3em;
	margin: 0em;
	text-align: left;
}

footer {
	padding: 1em 3em;
}

section {
	margin: 3em;
}

article {
	margin: 3em;
}

nav#navigator {
	border-bottom: 1px solid #efefef;
}

/* Text: Überschriften und Absatz */

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

	ul.list-spectre h3 {
		font-size: 1.4em;
		padding: 0;
		margin: 0;
	}

	ul.list-spectre h4 {
		padding: 0.4em 0.2em 0em 0em;
		margin: 0;
	}

	ul.list-spectre p {
		padding: 0.3em 0.2em;
		margin: 0;
	}

	#wrapper-secondary ul.list-spectre h3 {
		padding: 0 0.5em;
		margin: 0.3em 0;
		font-size: 1em;
	}

	li {
		padding-bottom: 0.3em;
	}

p {
	font-size: 1em;
	line-height: 150%;
}

.aboutme p {
	width: 60%;
}

pre {
	padding: 2em;
}

/* Text: Hyperlinks */

a {
	color: #3C6F1F;
	text-decoration: none;
}

a:hover {
	color: darkred;
	-o-transition:     color .5s ease-out, background 1s ease-in;
	-ms-transition:    color .5s ease-out, background 1s ease-in;
	-moz-transition:   color .5s ease-out, background 1s ease-in;
	-webkit-transition:color .5s ease-out, background 1s ease-in;
	/* ...and now override with proper CSS property */
	transition:        color .5s ease-out, background 1s ease-in;
}

a.current {
	color: darkred;
}

/* Listen */

	/* Breadcrumb Menü */
	ul.list-navigator {
	  padding: 1em 1em 1em 3em;
	  margin: 0;
	}
	ul.list-navigator li {
	  padding: 0.2em 0;
	  list-style-type: none;
	}
	ul.list-navigator li:after {
	    color: green;
	    content: '»';
	    padding: 0 0.5em;
	    font-weight: bold;
	}
	@media (min-width: 30em) {
		ul.list-navigator {
			padding: 1em 1em 1em 3em;
			margin: 0;
		}
		ul.list-navigator li {
			display: inline-block;
			padding-right: 0;
		}
		ul.list-navigator li:after {
			color: green;
			content: '»';
			padding: 0 0.5em;
			font-weight: bold;
		}
	}

	ul.list-navigator li:last-child:after {
		content: ' ';
	}
	ul.list-navigator li:first-child:after {
	  content: ' ';
	}

	/* Inhaltsverzeichnis, Spektrum */
	ul.list-spectre {
		padding: 0;
		list-style-type: none;
	}
	ul.list-spectre li {
		margin: 1em 1em 1em 0em;
		padding: 0em 0em 1em 5em;
		background-size: 4em;
		background-repeat: no-repeat;
		background-position: left top;
	}

	#wrapper-secondary ul.list-spectre {
		padding: 0;
		list-style-type: none;
	}
	#wrapper-secondary ul.list-spectre li {
		padding: 0em 1em 0 2em;
		margin: 0;
		background-size: 1.5em;
		background-repeat: no-repeat;
		background-position: left center;
	}
	@media (min-width: 30em) {
		ul.list-spectre-min {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			-ms-column-count: 2;
			-o-column-count: 2;
			column-count: 2;
			-webkit-column-gap:1em;
			-moz-column-gap:1em;
			-ms-column-gap:1em;
			-o-column-gap:1em;
			column-gap:1em;
			columns: 2;
		}
	}

	#wrapper-secondary ul.list-spectre {
		padding: 0;
		list-style-type: none;
	}
	#wrapper-secondary ul.list-spectre li {
		padding: 0.1em 1em 0.1em 2em;
		margin: 0;
		background-size: 1.5em;
		background-repeat: no-repeat;
		background-position: left center;
	}

	/* Inhaltsverzeichnis, Icons für Spektrum */
	.teaching {
		background-image: url('../images/teaching.png');
	}

	.leadership {
		background-image: url("../images/leadership.png");
	}

	.project_management {
		background-image: url("../images/project_management.png");
	}

	.presenting {
		background-image: url("../images/presenting.png");
	}

	.time_management {
		background-image: url("../images/time_management.png");
	}

	.writing {
		background-image: url("../images/writing.png");
	}

	.grant_writing {
		background-image: url("../images/grant_writing.png");
	}

	.biochemistry {
		background-image: url("../images/biochemistry.png");
	}

	.python_best_practices {
		background-image: url("../images/python_best_practices.png");
	}
	.python_basics {
		background-image: url("../images/python_basics.png");
	}
	.python_advanced {
		background-image: url("../images/python_advanced.png");
	}
	.biopython {
		background-image: url("../images/biopython.png");
	}
	.python {
		background-image: url("../images/python.png");
	}
	.softdev {
		background-image: url("../images/softdev.png");
	}

	.genart {
		background-image: url("../images/numpy.png");
	}
	.data_analysis {
		background-image: url("../images/bar.png");
	}
	.math {
		background-image: url("../images/data_analysis.png");
	}
	.machine_learning {
		background-image: url("../images/ml.png");
	}
	.agile {
		background-image: url("../images/agile.png");
	}

	.games {
		background-image: url("../images/pac.png");
	}

	.world {
		background-image: url("../images/other.png");
	}

	/* Inhaltsverzeichnis vom einem Bereich */
	ul.list-content {
		padding: 0em 0em 1em 0em;
		margin: 0em 0em 1em 0em;
		list-style-type: square;
		border-bottom: 1px solid #efefef;
	}

	ul.list-content li {
		padding: 0.4em 1em 0.4em 1.2em;
		margin: 0 0 0 1.0em;
		background-size: 1.5em;
		background-repeat: no-repeat;
		background-position: left center;
		font-size: 1.2em;
	}

	#wrapper-secondary ul.list-content {
		padding: 0;
		margin-left: -3em;
		list-style-type: none;
	}
	#wrapper-secondary ul.list-content li {
		padding: 0.4em 1em 0.4em 3em;
		margin: 0;
		font-size: 1em;
		background-size: 1.5em;
		background-repeat: no-repeat;
		background-position: left center;
		border-bottom: 1px solid #efefef;
	}

	/* Inhaltsverzeichnis "See More" */
	#wrapper-secondary ul.list-more {
		padding: 0;
		list-style-type: none;
	}
	#wrapper-secondary ul.list-more li {
		padding: 0.2em 1em 0.2em 0;
		margin: 0;
		background-size: 1.5em;
		background-repeat: no-repeat;
		background-position: left center;
	}
	#wrapper-secondary ul.list-more li i {
		margin: 0 1em 0 0;
	}

	/* Tags */
	ul.list-tags {
		text-align: left;
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	ul.list-tags li {
		margin: 0.2em 0.2em 0.2em 0;
		padding: 0.2em 0.5em;
		display: inline-block;
		background: rgb(240,240,240);
		-moz-border-radius:    0.3em;
		-webkit-border-radius: 0.3em;
		-khtml-border-radius:  0.3em;
		border-radius: 0.3em;
		font-size: 0.85em;
		font-weight: bold;
	}
	ul.list-tags li:hover {
		background-color: #E9CDCB;
		-o-transition:     color .5s ease-out, background 1s ease-in;
		-ms-transition:    color .5s ease-out, background 1s ease-in;
		-moz-transition:   color .5s ease-out, background 1s ease-in;
		-webkit-transition:color .5s ease-out, background 1s ease-in;
		/* ...and now override with proper CSS property */
		transition:         color .5s ease-out, background 1s ease-in;
	}

/* Medienobjekte */

img.media-object {
	max-width: 100%;
}

img.media-logo {
	max-height: 3em;
}

img.media-head {
	max-width: 8em;
	float: right;
}

@media (min-width: 30em) {
	img.media-logo {
		max-height: 4em;
	}
}

/* Tabelleneigenschaft */

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	padding: 0.4em;
	text-align: left;
	border: solid #ccc;
	border-width: 1px 0;
}

tr {
	padding: 1em;
}

th {
	border-top: none;
	background: #fff;
}

tbody tr:nth-child(even) {
	background: #f0f0f0;
}

/* Bonus */

	/* Feedbackblock */
	.paragraph-feedback {
	  padding: 3px 1em;
	  color: rgb(40,40,40);
	  border-width: 1px 0;
	  border-style: solid;
	  border-color: #ccc;
	}
	.paragraph-feedback p {
	  text-align: center;
	  font-style: italic;
	  color: gray;
	}
	.paragraph-feedback h2 {
	  text-align: center;
	  font-weight: bold;
	  font-style: italic;
	}

	/* Referenzblock */
	.paragraph-reference {
	  background-color: rgb(220,220,220);
	  -moz-border-radius: 0.5em;
	  -webkit-border-radius: 0.5em;
	  -khtml-border-radius: 0.5em;
	  border-radius: 0.5em;
	  padding: 3px 1em;
	  font-size: 0.8em;
	  color: rgb(40,40,40)
	}