/* ----------------------------------------------------------------------------- * 
 *                      Atmosphäre: Farben und Schriften                         *
 *          Alle weiteren Styles stecken in der jeweiligen layout.css            *
 * ----------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------- * 
 * Verwendete Farben
 * Blue Colors:
 * #1A1F2B - dark blue
 * #30395C - middle dark blue
 * #4A6491 - middle blue
 * #85A5CC - middle light blue
 * #C2D2E5 - light blue
 * ----------------------------------------------------------------------------- */

html    {
    font-size: 100%;
}

body {
    background-color: fff;
    color: #1A1F2B; /* dark blue */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em; /* 16px */
    line-height: 1.5em; /* 24px */
}


ul, ol {
    padding: 0;
    margin: 0 0 0.625em 20px;
}

.page-wrapper {
	background-color: #e1ecf6;
	margin: 0;
}

header {
	/* [disabled]background-color:#d7e9f6; */
	color: #900;
	/* [disabled]box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5) inset; */
	padding: 10px 4px 4px 15px;
	margin: 10px 0px 0px 0px;
	background-image: url(../bg_pic/Maerchen_Top.gif);
	background-repeat: no-repeat;
	background-position: right 5px;
	height: 134px;
	line-height:1.2em;
	font-size:90%;
}

.main {
	color: #56201b;
	background-color:#d7e9f6;
	padding: 0px 0px 0px 0px;
	width: 95%;
	border-radius: 16px;
	margin: 20px 0 10px 20px;
}
.main dl dt{
	font-weight:bold;
	margin: 10px 0 15px 10px;
}
.main dl dd{
	font-weight:noprmal;
	margin: 0px 0 15px 10px;
}
.mainContent {
	color: #333;
	width: 100%;
	border-top: 1px solid transparent;
}

.panel_list {
	width:100%;
	height:100%;
	overflow:scroll;
	/* [disabled]background-color: #FFF1BF; */
	margin: 10px 0 10px 0;
}
 
.panel_element_left {
	align:left;
	float:left;
	width:95%;
	/* [disabled]background-color:#FFF1BF; */
	display: block;
	margin: 0px 5px;
	padding: 7px 3px 5px 30px;
	font-weight: bold;
	color: #b13230;
	font-size: 1.5em;
}
.panel_element_left img {
		max-width:100%;
	}
.panel_element_right {
	align:left;
	float:left;
	width:95%;
	/* [disabled]background-color:#FFF1BF; */
	display: block;
	margin: 0px 5px;
	padding: 7px 3px 5px 30px;
}
.panel_element_right a{
color:#3c3d3e;
text-decoration:none;
}
.panel_element_right dl{
	font-size:90%;
	margin:0;
	padding:0;	
}
.panel_element_right dt{
	font-weight:bold;
	margin:0;
	padding:0;	
}
.panel_element_right dd{
	margin:0;
	padding:0;	
}

.line{
	height:5px;
	border-bottom:solid 1px #b1cfe6;
	padding: 12px 0px;
}

aside {
    color: #1A1F2B;
   background-color:#d7e9f6;
	width: 100%;
    margin-left: 0;
	padding: 0.6em 20px;
}

footer {
	background-color:#d7e9f6;
	color: #666;
	text-align: left;
	padding: 6px 20px;
	margin-top:10px;
	font-size: 70%;
}

section {
	padding: 0 20px;
	color: #56201b;
}

.infos_left{
	font-size: 0.8em;
	display:none;
}

.infos_bottom{
	display:block;
	box-shadow: 0 0 20px rgba(112, 23, 124, 0.2) inset;
    color: #692f2f;
    font-family: "Trebuchet MS",Helvetica,Arial;
    font-size: 0.9em; 
	padding: 20px 5px 20px 20px;
}

/*  Events  */
	
	.content_wrap_sub_2_spalten_events {
	width:96%;
	padding:0px 0px 0px 0px;
	margin: 0px 0px 14px 0px;
	border:solid 1px #bcbcbe;
	border-radius: 4px;
	-moz-box-shadow: 1px 3px  4px #aeafb1;
	-webkit-box-shadow: 1px 3px  4px #aeafb1;
	/* [disabled]box-shadow:1px 3px  4px #aeafb1; */
	/* [disabled]height: 160px; */
	background-color: #fbf5e3;
}
.content_sub_left_2sp_events {
	float: left;
	width: 35%;
	padding: 0px 0px 15px 0px;
	margin: 0;
	font-size: 100%;
 }
 .content_sub_left_2sp_events img{
	 max-width:100%;
 }
.eventdatedl{
	margin:4px 0px 0px 0px;
	padding:0 0 5px 0;
}
.eventdatedt{
	width:121px;
	height:33px;
	font-weight:bold;
	font-size:120%;
	line-height:13px;
	color:#FFF;
	background:#fff url(../bg_pic/bg_events_datebox.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	margin:12px 4px 0px 5px;
	padding:4px 0px 0px 5px;
}
.eventdatedt_day{
	font-size:50%;	
	font-weight:normal;
	line-height:1.5em;
}
.eventdatedt_gruen{
	width:121px;
	height:28px;
	font-weight:bold;
	font-size:130%;
	color:#FFF;
	background:#fff url(../bg_pic/bg_events_datebox_gruen.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	margin:13px 4px 2px 5px;
	padding:4px 0px 0px 5px;
}
.eventdatedt_rueckblick{
	width:70%;
	font-weight:bold;
	font-size:130%;
	margin:0px 4px 0px 0px;
	padding:0px 0px 0px 5px;
	
}
.eventdatedd{
	width:121px;
	height:80px;
	margin:5px 4px 0px 5px;
	padding:0;
	
}
.eventdatedd_rueckblick{
	margin:2px 0px 0px 8px;
	padding:0;
}
 .content_sub_right_2sp_events {
	float: left;
	width: 55%;
	padding: 4px 0px 25px 20px;
	margin: 0;
}
.eventtextdl{
	margin:0;
	padding:0;
}
.eventtextdt{
	height:none;
	font-weight:bold;
	font-size:120%;
	line-height:1.1em;
	color:#b1311b;
	margin:0px 0px 0px 5px;
	padding:0px 0px 0px 0px;
}
.eventtextdt_search{
	height:40px;
	font-weight:bold;
	font-size:120%;
	color:#0a713a;
	background-color:#c5dbcf;
	margin:0px 0px 0px 5px;
	padding:0px 0px 0px 2px;
}
.eventtextdd{
	margin:25px 0px 0px 5px;
	padding:0;
	line-height:1.2em;
}
	
	
.clr{
	clear:both;	
}


/* ----------------------------------------------------------------------------- * 
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */

h1, h2, h3,h4  {
	font-family: 'Gentium Book Basic', serif; /* Google-Font Gentium Book wenn verfügbar, sonst Fallback */
	font-style: italic;
	font-weight: bold;
	line-height: 1.3em;
}

h1  {
	font-size: 2.8em;
	line-height: 1.3em;
	margin: 0 5px 0 0px;
	color: #C86320;
	text-align: left;
	text-shadow: 2px 2px 4px #707071;
	filter: dropshadow(color=#707071, offx= 2, offy=2);
}

h2  {
	font-size: 1.625em; /* 26px */
	line-height: 1.5em;
	color: #4A6491; 
	margin: 0.6em 5px;
}

h3  {
	color: #b64f0a;
	font-size: 1.6em; /* 22px */
	font-weight: normal;
}

h4  {
	font-size: 2.4em; /* 26px */
	line-height: 1.3em;
	color: #b83030;
	margin: 0 0 30px 0;
	/* [disabled]border: solid 1px #333; */
}
h5  {
	font-size: 1.2em; /* 26px */
	line-height: 1.3em;
	color: #4A6491;
	margin: 0 0 30px 0;
	/* [disabled]border: solid 1px #333; */
}

p.teaserheadline {
	margin: 0.8em 0px 0.8em 20px;
	font-size:1.6em; /* 22px */
	;
	font-weight:bold;
	color: #b64f0a;
	font-family: 'Gentium Book Basic', serif;
	font-style: italic;
   }
	
p.teasertext    {
	color: #56201b; 
	font-family: "Trebuchet MS",Helvetica,Arial;
	font-size: 1.1em; /* 19px */
	line-height: 1.368em; /* 26px */
	margin: 0.8em 20px;
}

a:link, a:visited {
    color: #005580;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    color: #005580;
    text-decoration: underline;
}

.highlight{
	color: #C86320;
}

/* ----------------------------------------------------------------------------- * 
 *                                    Navigation                                 *
 * ----------------------------------------------------------------------------- */

nav {
	box-shadow: 0 0 20px rgba(112, 23, 124, 0.2) inset;
	color: #efefef;
	font-family: "Trebuchet MS",Helvetica,Arial;
	font-size: 1.25em; /* 20px */
	background-color:#cde7f8;
	margin: 0 0 20px 0;
	border-radius: 16px;
}
nav ul {
    margin: 0;
}
nav ul li {
	list-style: none;
	border-bottom:solid 1px #8295c5;
}

nav a {
    color: #4075bd; /* middle dark blue */
	text-decoration:none;
}

nav a.formal {
	background-image: url(../bg_pic/leer.gif);
    font-size:0.8em;
}

nav a:hover {
    background-color: #d0e2f0; /* light blue */
	color: #3354a9;
	text-decoration:none;
}

nav a.active {
	font-weight:bold;
	color:#202F6C;
}


nav ul > li { /*  > ist der child selector  */
	margin-left: 0;
	border-bottom: solid 1px #8295c5;
}

nav ul > li > a, nav ul > li > strong {
    padding: 0.6em 20px;
    display: block;
}


*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}



@media only screen and (min-width: 46.875em) {
	
	
    
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
    }
	
	header {
		padding: 24px 4px 4px 45px;
		font-size:100%;
	}
	
    .main {
	/* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
		background-image: url(../bg_pic/Hintergrund_Kacheln.jpg);
		background-repeat: repeat;
		box-shadow: 5px 5px 5px 0px #b5c1ca;
		-moz-box-shadow: 5px 5px 5px 0px #b5c1ca;
		-webkit-box-shadow: 5px 5px 5px 0px #b5c1ca;
    }

    .mainContent {
	width: 100%;
	float: left;
	padding: 0 20px;
	border-top: none;	
    }
	.panel_element_left {
	align:left;
	float:left;
	width:39%;
	/* [disabled]background-color:#FFF1BF; */
	display: block;
	margin: 0px 5px;
	padding: 7px 3px 5px 30px;
	}
	.panel_element_left img {
		max-width:100%;
	}
	.panel_element_right {
	align:left;
	float:left;
	width:50%;
	/* [disabled]background-color:#FFF1BF; */
	display: block;
	margin: 0px 5px;
	padding: 7px 3px 5px 30px;
	}
    aside {
        width: 30%;
        margin-left: 70%;
        /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
        margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
    }
	
	.infos_left{
		display:none;
	}
	
	.infos_bottom{
		display:block;
		box-shadow: 0 0 20px rgba(112, 23, 124, 0.2) inset;
		color: #692f2f;
		font-family: "Trebuchet MS",Helvetica,Arial;
		font-size: 0.9em; 	
		padding: 20px 5px 20px 20px;
	}



    section {
	padding: 0;
	/* [disabled]background-color: #edf4f9; */
    }
	
	
	/* Events */
	.content_sub_left_2sp_events {
		width: 25%;
	 }
	 .content_sub_right_2sp_events {
		width: 65%;
	 }

    /* ----------------------------------------------------------------------------- *
     *                             Textauszeichnungen                                *
     * ----------------------------------------------------------------------------- */
    h2 {
	font-size: 1.9em; /* 35px */
	line-height: 1.2em;
	margin: 0.3em 0 0;
	/* [disabled]background-color: #edf4f9; */
    }

   p.teaserheadline {
	margin: 0;
    }
   
    p.teasertext {
	margin: 0.8em 0;
	/* [disabled]background-color: #edf4f9; */
    }
	
	

    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
	/* clearing für die floatenden LIs */
        overflow: hidden;
	font-size: 1.2em; /* 18px */
	background-image: url(../bg_pic/Hintergrund_Kacheln.jpg);
	background-repeat: repeat;
	/* [disabled]background-color:#c2e4fb; */
	box-shadow: 5px 5px 5px 0px #b5c1ca;
	-moz-box-shadow: 5px 5px 5px 0px #b5c1ca;
	-webkit-box-shadow: 5px 5px 5px 0px #b5c1ca;
    }

    nav ul {
        margin: 0 20px;
    }

    nav ul li {
	float: left;
	border: none;
	width: auto;
	border-bottom:solid 1px #c9e0f2;
    }

    nav ul > li > a {
        padding: 0.7em 10px 0.7em 50px;
        display: inline-block;
    }
	
	nav a {
		background-image: url(../bg_pic/Maerchenstern_nav.png);
		background-repeat:no-repeat;
		background-position: left center;	
	}
	nav a:hover {
		background-image: url(../bg_pic/Maerchenstern_nav.png);
		background-repeat:no-repeat;
		background-position: left center;
	}
	
	.eventtextdt{
		height:30px;	
	}
}
/* ----------------------------------------------------------------------------- *
 *                          Styles für  Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {
	
	/* Infoblock wird links neben dem Inhalt angeordnet */
	.infos_left{
	display:block;
	width: 94%;
	box-shadow: none;
	padding: 50px 5px 10px 10px;
	color:#74250a;
	font-size: 0.8em;
	}
	
	.infos_bottom{
		display:none;
	}
	
    /* Navigation wird links neben dem Inhalt angeordnet */
    nav {
	width: 15em;
	float: left;
	box-shadow: none;
	background-image: url(../bg_pic/logo.png);
	background-repeat: no-repeat;
	background-position: 20px 25px;
	padding: 220px 5px 10px 10px;
	/* [disabled]background-color:#d7e9f6; */
	margin:20px 0 0 10px;
	box-shadow: 5px 5px 5px 0px #b5c1ca;
	-moz-box-shadow: 5px 5px 5px 0px #b5c1ca;
	-webkit-box-shadow: 5px 5px 5px 0px #b5c1ca;
    }

    nav ul {
        margin: 1.6em 0 0;
    }

    nav ul > li {
	width: 100%;
	float: none;
	border-bottom:solid 1px #c9e0f2;
    }
	
	nav a {
		background-image: url(../bg_pic/Maerchenstern_nav.png);
		background-repeat:no-repeat;
		background-position: left center;	
	}
	nav a:hover {
	background-image: url(../bg_pic/Maerchenstern_nav.png);
	background-repeat:no-repeat;
	background-position: left center;
	}
	
    nav ul > li > a {
        padding: 0.8em 25px 0.8em 50px;
        display: block;
    }

    /* .main macht Platz für .nav */
    .main {
	width: 65%;
	float: left;
	background-color:#FFF1BF;
	box-shadow: 5px 5px 5px 0px #b5c1ca;
	-moz-box-shadow: 5px 5px 5px 0px #b5c1ca;
	-webkit-box-shadow: 5px 5px 5px 0px #b5c1ca;
    }

	
	/* Events */
	.content_sub_left_2sp_events {
		width: 25%;
	 }
	 
	 .content_sub_right_2sp_events {
		width: 65%;
	 }
	
	

    /* Größenanpassungen */
    .mainContent {
	/* [disabled]background-color:rgba(254,254,254,0.9); */
	width: 100%;
	padding: 1em 20px 10px 20px;
	margin: 30px 10px 50px 20px;
	min-height: 900px;
    }
	
	.panel_element_left {
	align:left;
	float:left;
	width:40%;
	/* [disabled]background-color:#FFF1BF; */
	display: block;
	margin: 0px 5px;
	padding: 7px 3px 5px 10px;
	}
	.panel_element_left img {
		max-width:100%;
	}
	.panel_element_right {
	align:left;
	float:left;
	width:50%;
	/* [disabled]background-color:#FFF1BF; */
	display: block;
	margin: 0px 5px;
	padding: 7px 3px 5px 20px;
	}

    aside {
        width: 35%;
        margin-left: 65%;
    }

    footer {
        clear: both;
    }
	h1  {
	font-size: 4em;
	}
	
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
    .page-wrapper {
	margin: 0 auto;
	max-width: 78em;
    }
}