/**
    * @author         Marco Homburg
    * @package        ProcessWire
    * copyright       Marco Homburg
    *
    * Template CSS
    * Copyright  (C) 2014 Marco Homburg
    *
**/

/* -------------------------------------- General Design -------------------------------------- */ 

html {
	background:#fff;

}

body {
	//width:80%;
	max-width: 1024px;
	font-size:100%;
	//background:#EFEFEF;
	background: #fff;
	margin:0em auto;
	padding:0em;
	//border: 0.1em solid #404040;

	box-shadow:0px 0px 50px -5px #4c4948;

}

h1 {
	font-size:1.563em;
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#ff9000;
	margin:0em;
	padding:0.5em 1.25em 0.5em 1.25em;
	text-align:left;
	border-bottom: 0.1em solid #91B0FF;
}

h2 {
	font-size:1.563em;
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:0.5em 1.25em 0.5em 1.25em;
	text-align:left;
}

h3 {
	max-witdh: 90%;
	font-size:1.2em;
	line-height:0.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1em 1.25em 0.5em 1.25em;
	text-align:left;
}

p, label, td, table {
	line-height:1.25em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding: 0.5em 1.25em 0.5em 1.25em;
	text-align:justify;
}

table {
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-spacing: 0;
	margin: auto;
}

table td pre {
	max-width: 100%;
}

ul {
	margin:0px;
}

li {
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.25em;
	margin:0em;
	padding:0em;
	margin:0.313em 0em 0.313em 0em;
}

img {	
	max-width: 100%;
	//height:auto;
	//display:block;
	//margin-left: auto;
    	//margin-right: auto;
}

a {
	text-decoration: none;
	color:#ff9000;
}

blockquote {
	margin-left: 0;
	padding-left: 1.5em;
	padding-right: 2em; 
	border-left: 4px solid #ddd; 
	font-style: italic; 
	color: #777; 
}


.align_left {
	//Für images plaziert im Rich text editor im CMS
	float: left;
	margin: 0 1em 0.5em 0; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}

.align_right { 
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%; 
}

.align_center {
	display: block;
	margin: 1em auto; 
	position: relative;
	top: 0.5em;
}


/*--------------------------------------- blog list -----------------------------------*/
#news ul li {
	line-height:1em;
	margin:0em;
	padding: 0.25em 1.25em 0.25em 1.25em;
}

#news ul li h2 {
	font-size:1.3em;
	padding: 0em 0em 0em 1.25em;	
}

/* -------------------------------------- On Top Bar Slide Button -------------------------------------- */ 

#menubar {
	display:block;
	background:#fff;
} 
#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li a.menubutton {
	display:none;
}

/* -------------------------------------- Header in head inc-------------------------------------- */  

header {
	display:block;
	background:#91B0FF;
	text-align:center;

}

header img{
   	width:99.9999%;
	height:50%;
	max-width:100%;
}

/* ----------------------------------- Top Navigation in head inc-------------------------------- */ 
 
.topnav {
	border-top: 0.1em solid #fff;

	display:block;
	height:2.5em;
	background:#4493E9;
	text-align:center;

	box-shadow:-1px 5px 15px -5px #2F2C2C;

}

.topnav ul {
	display:block;
	padding: 0px;
}

.topnav li {
	display:inline;
	margin:0em 0.188em 0em 0.188em;
}

.topnav a {
	color:#fff;
	font-size: 1.125em;
	line-height:2.5em;
	padding:0.563em 0.938em 0.375em 0.983em;
	transition:background 0.2s;
	-webkit-transition:background 0.5s; 
}

.topnav a:hover {
	background:#91B0FF;
	border-bottom: 0.188em solid #fff;
}

.topnav li.current a {
	border-bottom: 0.188em solid #fff;
}

/*topnav ul li a.active {
	border-bottom: 0.188em solid #fff;
}*/

.topnav li.edit a {	/* edit button im Nav */
	background: none; 
}

/* ---------------------------------- Content Area und Sidebar ------------------------------------ */ 
 
#main {
	display:block;	
	width:96%;
	//max-width:1600px;
	margin:1.25em auto;
	padding:0em;
}


#main article {
	//box-shadow:5px 5px 15px -5px #2F2C2C;
	

	display:inline-block; 
	width:65.3%; 
	background:#fff;
	vertical-align: top;
	margin:0em;
	padding:0em;
}

#main article img {
	box-shadow:0px 0px 30px -5px #4c4948;
	border-radius: 5%;
}


#main article ul {
	padding: 0.5em 1.875em 0.5em 2.5em;
}
/* -------------------------------------- Sidebar -------------------------------------- */  

#main aside {
	display:inline-block;
	width:30.6%;
	margin-left:3%; 
	padding:0em;
	vertical-align:top;
}

#main aside h2 {
	border-bottom: 0.1em solid #91B0FF;
	color:#4493E9;
}

#main aside section {	
	//box-shadow:5px 5px 15px -5px #2F2C2C;
	

	margin-bottom:1.563em;
	background:#fff;
}

#main aside section ul {
	padding:0.5em 1.875em 0.5em 2.5em;
	list-style: square;
}

#main aside section ul li ul {
	padding:0em 0.5em 0em 0.8em;
}


/* -------------------------------------- Subnav -------------------------------------- */  
	
.nav li  {
	list-style: square;
}

.nav a {  
    color: #ACACAC;
    display: block;
    padding: 2px 1px 1px 1px;	
}

.nav a:hover {
    color: #ff9000;
    text-decoration: none;
}	

.nav a.on {
	background: #efefef;
	color: #ff9000;
}
.nav {	
	padding-left: 0;
	list-style: none;

	font-family:Helvetica;
	color:#2F2D2C;
	text-align:left;
	padding:1.25em;
}

#news ul  li  {
	list-style: none;
	background: #efefef;
}

/* -------------------------------------- Footer -------------------------------------- */  
footer {
	display:block;
	background:#4493E9;
	text-align:center;
}

footer ul {
	display:block;
	max-width:980px;
	text-align:left;
	margin:0px auto;
}

footer ul li {
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#fff;
	padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
	color:#fff;
}

/* ---------------------------------------- Formular ---------------------------------------- */

.formular {
	width: 45%;
	margin: 0;
	display: block;
    margin-left: auto;
    margin-right: auto
}

.formular #form-submit {
	padding: 1.25em 0em 0em 0em;
	display: block;
    margin-left: auto;
    margin-right: auto
}

.formular input {
	padding: 0.5em;
	width: 90%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.formular #submit {
	box-shadow: 0px 0px 6px #ff9000;
	-webkit-box-shadow: 0px 0px 6px #ff9000;
	border: 1px solid #ff9000;
	border-radius: 10px;
}

.formular label em{
	padding: 0em 0em 0em 1.25em;
    color: #060;
    display: block;
    font-size: 85%;
    font-style: normal;
    text-transform: uppercase;
}

.formular #field1, #field2, #field3, #field4, #field5 {
	width: 100%;
}

.formular textarea {
	padding: 0.5em;
    width: 90%;
	display: block;
    margin-left: auto;
    margin-right: auto
}

/* -------------------------------------- Mobile Style -------------------------------------- */

@media screen and (max-width:1000px) {
	.formular {
		width: 88%;
		padding: 0em 1.25em 0em 0em;
	}
	body {
       
		width: 100%;
   	}
}

@media screen and (max-width:800px) {
    body {
        font-size:90%;	
    }
}

@media screen and (max-width:600px) {
    #main aside, #main article {
        width:100%;
        display:block;
        margin:0.625em 0em 0.625em 0em;
    }


@media screen and (min-width:550px) {
    nav.topnav {
        display:block !important;
    }   
}

@media screen and (max-width:550px) {
    body {
        font-size:86%;
    }
    #menubar ul li a.menubutton {
        display:block;
    }   
    .topnav {
        display:none;
        height:auto;
    }
    .topnav ul li {
        display:block;
        margin:0.3em 0em 0.3em 0em;
    }
	.align_left, .align_right, .align_center {
		display: block;
		float: none; 
		margin: 1em auto;
		max-width: 100%; 
	}
}