/********** JONAS Font ************/
  

@font-face{ 
	font-family: 'jonas';
	src: url('jonas-regular_dt-webfont.eot'),
	 	 url('jonas-regular_dt-webFont.woff') format('woff'),
	     url('jonas-regular_dt-webfont.ttf') format('truetype'),
	     url('jonas-regular_dt-webfont.svg') format('svg');
}

@font-face{ 
	font-family: 'jonas_en';
	src: url('Jonas_en-Regular.eot'),
	 	 url('Jonas_en-Regular.woff') format('woff'),
	     url('Jonas_en-Regular.ttf') format('truetype'),
	     url('Jonas_en-Regular.svg') format('svg');
}

@font-face {
	font-family: 'NewsletterMedium';
	src: url('283D73_0_0.eot'),
 		 url('283D73_0_0.woff') format('woff'),
		 url('283D73_0_0.ttf') format('truetype'),
		 url('283D73_0_0.svg') format('svg');
}
 
  
@font-face {
	font-family: 'NewsletterLightItalic';
	src: url('283D73_1_0.eot'),
		 url('283D73_1_0.woff') format('woff'),
		 url('283D73_1_0.ttf') format('truetype'),
		 url('283D73_1_0.svg') format('svg');
}
 
  
@font-face {
	font-family: 'NewsletterLight';
	src: url('283D73_2_0.eot'),
		 url('283D73_2_0.woff') format('woff'),
		 url('283D73_2_0.ttf') format('truetype'),
		 url('283D73_2_0.svg') format('svg');
}

    
/********** Fonts **************/
.jonas30 { 
    font-family: "jonas";
    font-size: 30px;
    letter-spacing: 5px;
    font-variant: normal; 
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonas35 {
	font-size: 35px;
	font-family: "jonas";
	line-height: 1.5em;	
    font-variant: normal;
    font-variant-ligatures: contextual; 
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}


.jonas37 {
	font-size: 37px;
	font-family: "jonas";
	line-height: 1.5em;	
    font-variant: normal;
    font-variant-ligatures: contextual; 
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonas40 {
	font-size: 40px;
	font-family: "jonas";
	line-height: 1.5em;
	letter-spacing: 5px;
    font-variant: normal; 
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonas48 { 
	font-family: "jonas";
	font-size: 48px;
    font-variant: normal; 
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonas52 { 
	font-family: "jonas";
	font-size: 52px;
    font-variant: normal; 
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonas60 {
	font-family: "jonas";
	font-size: 60px;
	line-height: 2em;
    font-variant: normal; 
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonas72 {
	font-family: "jonas";
	font-size: 72px;
	line-height: 2.5em;
    font-variant: normal; 
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}
.jonash1 { 
	font-family: "jonas";
	font-size: 103px; 
	font-weight:normal; 
	line-height: 1.5em;	
    font-variant: normal;     
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.jonash2 {
	font-family: "jonas";
	letter-spacing: 15px;
	font-size: 64px;
	line-height: 1.5em;	
    font-variant: normal;     
    font-variant-ligatures: contextual;
    font-feature-settings: "kern"1, "liga"1, "calt"1;
    -webkit-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -moz-font-feature-settings: "kern"1, "liga"1, "calt"1;
    -ms-font-feature-settings: "kern"1, "liga"1, "calt"1;
}

.newsLetter20 {
	font-size: 20px; 
	line-height: 1.5em;
	font-family: "NewsLetterLight";
}

.newsLetter23 { 
	font-family: NewsLetterMedium;
	font-size: 23px;
	line-height: 1.5em;
}

		
.newsLetter25 {
	font-size: 25px; 
	line-height: 30px; 
	margin: 30px 0px;
	font-family: "NewsLetterLight";
}		

.newsLetter30 {
	font-size: 30px;
	font-family: "NewsLetterLight";		
	line-height: 1.5em;
}

.newsLetterh2 { 
	font-size: 35px;
	font-family: NewsLetterMedium; 
	font-weight: normal;	
	line-height: 3em;
}

.newsLetterh3 {
	font-family: "NewsLetterMedium";
	margin: 40px 0px;
	font-weight:normal;
}
	
.fontDownBlue { font-family: NewsLetterMedium; }

.pointer { cursor: pointer; text-decoration: underline; }

/********** Color **************/
.magenta {color: rgb(229,0,125); }
.white { color: rgb(255,255,255); }
.blue { color: rgb(34,47,121); }
.transparent { color: rgba(255,255,255,0); }

/********** Backgroundcolor **************/
.bluePaper {
	background-image: url("../images/heftblau.jpg");
	background-repeat: repeat;
	background-size: contain;
}

.yellowPaper {
	background-image: url("../images/heftgelb.jpg");
    background-repeat: repeat;
    background-size: contain;

}

.magentaBack {
	background: rgb(229,0,125);
}

/********** LINKS ************/
a { color: rgb(34,47,121); text-decoration: underline;}
a:hover { color: rgb(229,0,125); }
	
/********** General ************/

* {
    border: 0;
    padding: 0;
    margin: 0;
}

body { 
    font-family: 'NewsLetterLight';
    color: rgb(34,47,121);
}

.wrapper {
	margin: 0 auto;
}

.centered {
	width: 1300px;
	padding-bottom: 30px;	
	margin: 0 auto; 	
}

.centered2 {
	width: 1300px;
	padding-bottom: 30px;	
	margin: 0 auto; 	
}

.spacer { margin-left: 60px; }

.top { height: 30px; text-align:right; padding-top: 20px; }




/********** Header ************/

	.header { padding-top: 20px; border: rgba(255,255,255,0) 1px solid; }
	
	/*--- Language ---*/
	.langSelect { display:block; }
	
	#language { text-align: right; }
	
	#language a { 
		color: rgb(255,255,255); 
		text-decoration: none; 
		margin-left:20px;
		margin-right: 20px; 
	}
	
	/*--- Headline-Box ---*/
	.logo { 
		width: 550px;
		padding: 30px 30px 15px;
		text-align:center;
	}
	
	.innerBorder {
		border: solid 1px rgb(229,0,125);
		text-align:center;		
	}
	
	.innerBorder hr { 
		border-color: rgb(229, 0, 125);
		border-style: solid;
		border-width: 1px 0 0;
		width: 530px;
		margin-left: 9px;
	}

	.learning { padding-top: 10px; }
	
	/*--- Sticker ---*/
	.sticker {
	    background-image: url("../images/bubble.png");
	    background-repeat: no-repeat;
	    background-size: contain;
	    font-size: 38px;
	    height: 300px;
	    left: 800px;
	    margin-bottom: -352px;
	    padding-top: 52px;
	    position: relative;
	    text-align: center;
	    top: -354px;
	    transform: rotate(-10deg);
	    width: 300px;
	}
	
	/*--- Navi ---*/
	#burgerNavi { display: none; }
	.navi { padding: 26px 0 30px 0px;	}	
	.navi a { 
		color: rgb(255,255,255); 
		text-decoration: none; 
	}
	
	.navi a:hover { color: rgb(229,0,125);}
	
	/*--- Preface ---*/
	.preface { padding-bottom: 50px; }
	
/********** Content Script ************/

.scriptContent {
	width: auto;	
	padding-bottom: 50px;
}

.scriptBox { padding-top: 30px; }

.scriptArea {
	width: 1300px;
	height: 500px;
	background-image: url("../images/liniert.jpg");
	background-repeat: repeat;
	background-size: 1300px 810px;
	background-attachment: scroll;
	outline: none;
	resize: none;
	padding-left: 20px;
}

/********** Content Download ************/
.fontDown { background: rgb(255,255,255); }
	
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:25px;
    height:25px;
    margin:-8px 4px 0 0;
    vertical-align:middle;
    background: rgba(0, 0, 0, 0) url("../images/nutzung.png") no-repeat scroll -8px -3px / 175% auto;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:rgba(0, 0, 0, 0) url("../images/nutzung.png") no-repeat scroll -8px -102px / 175% auto;
}

#checkNutzung { text-decoration: underline; cursor: pointer; }
#checkNutzung:hover {color: rgb(229,0,125);}
#gelesen { display:none; color: red; }


#nutzungWrapper {
	display: none; 
	position: absolute; 
	background: rgba(0,0,0,0.3); 
	width: 100%; 
	height: 5198px; 
	z-index:70; 
	left: 0; 
	top: 0;
}

#nutzungsBedingung {
	display:none; 
	position: absolute; 
	z-index:99; 
	background: rgb(255,255,255); 
	top:1800px;	
	padding: 10px 15px 10px 30px; 
	line-height: 1.5em; 
	width: 1000px;
}

#nutzungsBedingung ol { margin-left: 33px; }

#nutzungsBedingung hr { 
	background-color: rgb(127, 127, 127);
    border: medium none;
    height: 0.07em;
    width: 100%; 
    margin: 10px 0;
}

#kreuz { text-align:right; font-size: 1.5em; margin-top: 10px; }
#kreuz span { cursor: pointer; }

/********** Beispiele ************/
.bspContent { width: 95%; padding-bottom: 50px; margin-top: 13px;}
.bspMain {
	border: solid rgb(229,0,125); 
	border-width: 1px 0px 0px 0px;
}

#examples {	border: solid rgb(229,0,125); 
	border-width: 1px 0px 0px 0px;}

#beispiele { 
	width: auto; 
	margin-left: 50px; 
}

.span1 {
	display: inline-block;
	vertical-align: top;
	width: 45%;
	margin-left: 25px;
	height: 170px;
	text-align: center;
}

.span1 span {
	cursor: pointer;	
}

.span2 {text-align: center; }
.span3 {
	display: none;
	border: solid 1px rgb(229,0,125);
	background-image: url("../images/heftgelb.jpg");
	background-repeat: repeat;
	background-size: contain;	
	position: relative;
	z-index: 99;
	width: auto;
	min-width: 200px;
	left: -5%;
	height: 200px;
	font-size: 90px;
	text-align: left;
	padding-left: 10px;
}

.zeichnungen {	width: auto; }

.azWoerter { margin-top:-60px; }
.azWoerterTop { padding-top:50px;}

#reiter { 
	text-align:center; 
	padding-bottom: 0px; 
	padding-top: 30px; 
	padding-left: 0px;
	width: 1100px;
}

#reiterUl {
	overflow: hidden;
	width: 95%;
	padding: 0;
	list-style: none;
	margin-bottom:-13px;
}

#reiterUl li {
	float: left;
	margin: 0 auto;
}

#reiterUl div {
	position: relative;	
	background-image: url("../images/heftgelb.jpg");
	background-repeat: repeat;
	background-size: contain;
	padding: 4px 20px 4px;
	float: left;
	border-radius: 5px 0 0 0;
	border: solid 0px rgb(229,0,125);
	border-bottom-width: 0px;
	cursor: pointer;
}

#reiterUl div:hover,
#reiterUl div:hover::after,
#reiterUl div:focus,
#reiterUl div:focus::after {
	background-image: url("../images/heftblau.jpg");
	background-repeat: repeat;
	background-size: contain;
	color: rgb(255,255,255);
}

#reiterUl div:focus {
	outline: 0;
}

#reiterUl div::after {
	content:'';
	position:absolute;
	z-index: 1;
	top: -1px;
	right: -13px;  
	height: 55px;
	bottom: 0;
	width: 1em;
	background-image: url("../images/heftgelb.jpg");
	background-repeat: repeat;
	background-size: contain;
	box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.4);
	transform: skew(10deg);
	border-radius: 0 5px 0 0;
	border-color: rgb(229,0,125);
	border-width: 0px;
	border-style: solid;  
}

#reiterUl .current div,
#reiterUl .current div::after {
	background-image: url("../images/heftblau.jpg");
	background-repeat: repeat;
	background-size: contain;
	color: rgb(255,255,255);
	z-index: 3;
}

/********** Footer ************/
.footer { 
	width: auto;
}

.footerContent { padding-top: 20px; height: auto; }

.footerContent a { color: rgb(255,255,255); }

.branding { 
	
	padding-top: 0px;
	padding-bottom: 10px;
	width: 100%;
	height: auto;
	text-align: center;
}



.bullet { 
	background: rgba(0, 0, 0, 0) url("../images/punkt.png") no-repeat scroll -4px 31px / 100% auto;
	width:  25px;
    height: 75px;
    display: inline-block;
}