@import url("/styles/fonts/SourceSansPro/stylesheet.css");

@media all {
	
	body {
		font-family: 'SourceSansProRegular', Helvetica, Arial, sans-serif;
		font-size: 90.00%;
		line-height: 1.5em;
		color: #444;
		background: rgb(81,87,102);
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxNTc2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4OThlOTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background:	
		-moz-linear-gradient(top,  rgba(81,87,102,1) 0%, rgba(137,142,153,1) 100%);
		background: 
		-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,87,102,1)), color-stop(100%,rgba(137,142,153,1)));
		background:	
		-webkit-linear-gradient(top,  rgba(81,87,102,1) 0%,rgba(137,142,153,1) 100%);
		background:	
		-o-linear-gradient(top,  rgba(81,87,102,1) 0%,rgba(137,142,153,1) 100%);
		background:	
		-ms-linear-gradient(top,  rgba(81,87,102,1) 0%,rgba(137,142,153,1) 100%);
		background: linear-gradient(to bottom,  rgba(81,87,102,1) 0%,rgba(137,142,153,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515766', endColorstr='#898e99',GradientType=0 );
		background-repeat: repeat-x;
		background: #93a0aa;
	}
.navbar-default {
	position: fixed;
	top: 0;
	left:0;
	height: 40px;
	width: 100%;
	background: rgba(255,255,255,0.75);
	overflow: hidden;
	line-height: 40px;
	z-index: 1;
	text-align: center;
	font-size: 12px;
	-webkit-transition: height 0.2s;
	transition:  height 0.2s;
	box-shadow: rgba(0,0,0,0.5) 0px 2px 10px;
	}
.navbar-default.navbar-shrink{
	height: 0;
	-webkit-transition: height 0.2s;
    transition:  height 0.2s;
	}
.navbar-default .logo {height: 30px;margin: 5px;float: left;}
.navbar-default .center {margin: 0 0 0 -60px;color: #666;}
  .ym-grid {
    display: table;
    table-layout: fixed;
    width: 100%;
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .ym-gl {
    float: left;
    margin: 0;
  }

  .ym-gr {
    float: right;
    margin: 0 0 0 -5px;
  }

  .ym-g20 {
    width: 20%;
  }

  .ym-g40 {
    width: 40%;
  }

  .ym-g60 {
    width: 60%;
  }

  .ym-g80 {
    width: 80%;
  }

  .ym-g25 {
    width: 25%;
  }

  .ym-g33 {
    width: 33.333%;
  }

  .ym-g50 {
    width: 50%;
  }

  .ym-g66 {
    width: 66.666%;
  }

  .ym-g75 {
    width: 75%;
  }

  .ym-g38 {
    width: 38.2%;
  }

  .ym-g62 {
    width: 61.8%;
  }

  .ym-gbox {
    padding: 0 10px;
  }

  .ym-gbox-left {
    padding: 0 10px 0 0;
  }

  .ym-gbox-right {
    padding: 0 0 0 10px;
  }
	
	p {margin: 0 0 1.5em 0}
	h3, h4 {margin: 1em 0 0.5em 0}
	.small {font-size: 90%;}
	.zahl {background: #414477; color: #fff; padding: 12px; font-size: 200%; display: inline-block; margin: 5px 10px 0 0; float: left;}
	a {color: #444; text-decoration: none;}
	a.mark {text-decoration: underline}
	.header {
		margin: 30px auto;
		width: 100%;
		text-align: center;
	}
	.header #imprint {float: right; margin-top: -30px}
	.header #logo {height:80px;}
	.header #title h1 {
		background: #414477;
		color: #fff;
		display: inline-block; 
		padding: 5px 10px; 
		font-size: 16px;
		letter-spacing: 0.1em
		}
#nav{
	list-style: none;
	padding:  0;
	margin-left: -25px;
}

#nav li{
	margin: 0 0 30px 0;
	padding: 10px;
	background: rgba(255,255,255,0.7);
	width: 90%;
}

div.up {text-align: center; position: relative; bottom: -35px; width: 100%}
div.up * {height: 20px}

#inhalt{
	background: url(/images/cloud1/bg-1.jpg) 50% 0% no-repeat fixed;
}

#intro{
	background: url(/images/cloud1/bg-2.jpg) 50% 0 no-repeat fixed;
}

#article-1 {
	background: url(/images/cloud1/bg-3.jpg) 0% 0 no-repeat fixed;
}

#article-2 {
	background: url(/images/cloud1/bg-4.jpg) 20% 0 no-repeat fixed;
}
#article-3 {
	background: url(/images/cloud1/bg-5.jpg) 50% 0% no-repeat fixed;
}
#article-4 {
	background: url(/images/cloud1/bg-6.jpg) 50% 0 no-repeat fixed;
}
#article-5 {
	background: url(/images/cloud1/bg-7.jpg) 50% 0 no-repeat fixed;
}
#article-6 {
	background: url(/images/cloud1/bg-8.jpg) 50% 0 no-repeat fixed;
}
#article-7 {
	background: url(/images/cloud1/bg-9.jpg) 50% 0 no-repeat fixed;
}
#article-8 {
	background: url(/images/cloud1/bg-10.jpg) 50% 0 no-repeat fixed;
}


section.article {
	margin: 20px;
	position: relative;
	padding: 40px 0;
	max-width: 1100px;
	margin: 40px auto;
}
.story{
	min-width: 600px;
	margin: 0 auto;
	overflow: auto;
	width: 80%;
	padding: 25px;
	background: rgba(255,255,255,0.85);
	overflow: hidden;
}
#inhalt .story{
	min-width: 600px;
	margin: 0 auto;
	width: 80%;
	padding: 25px;
	height: 80%;
	background: rgba(255,255,255,0.6);
}
.aufmacher {letter-spacing: 0.05em; font-size: 110%; line-height: 1.8em;}
.text {
	margin-bottom: 1.5em;
	column-count: 2;
	column-gap: 40px;
	-webkit-column-count: 2;
	-webkit-column-gap: 40px;
	-moz-column-count: 2;
	-moz-column-gap: 40px;
	-ms-column-count: 2;
	-ms-column-gap: 40px;
	}


ul {margin: 0 0 10px 0; padding: 0;}
ul li { margin-left: 1.2em}
div.info {background: rgba(0,0,0,0.4); color: #fff; padding: 10px 20px;margin: 20px 0;}
div.portrait {font-size: 10pt; margin-top: 20px;overflow: hidden;}
div.portrait img.foto {float: left; margin: 2px 20px 20px 0}
}

@media screen and (max-width:768px) {

  .ym-gbox {
    padding: 0;
  }
  .ym-gl,.ym-gr {
    float: none;
    margin: 0;
    width: 100%;
  }
	
p, .text {margin: 0 0 0.5em 0}
.header #imprint {
    position: absolute;
    right: 20px;
    margin-top: -10px
}
#nav {
    margin-left: 0px;
}
section.article {
	margin: 0px;
	position: relative;
	padding: 10px;
}
.story{
	min-width: auto;
	margin: 20px auto;
	overflow: auto;
	width: 80%;
	padding: 5% 20px;
	background: rgba(255,255,255,0.8);
}
#inhalt .story{
	min-width:auto;
	margin: 20px auto;
	width: 80%;
	height: 80%;
	padding: 5% 20px;
	background: rgba(255,255,255,0.5)
}
#inhalt .story ul {margin-left: -20px}
#inhalt .story ul li {margin-left: 0px}
.text {
	column-count: 1;
	column-gap: 0px;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	-ms-column-count: 1;
	}

}

@media print {
#nav li{margin: 0 0 15px 0;}
#imprint, .up {display: none;}
section.article {padding: 0; margin: 0;}
.story {padding-top: 20px;}
h2 {page-break-before: always;}
}