/*

    padding: 25px 50px 75px 100px;
        top padding is 25px
        right padding is 50px
        bottom padding is 75px
        left padding is 100px

    padding top right bottom left
        
*/
* {
	font-family: Helvetica, sans-serif;
}

body {
    background: #ffffff;
    font-size: 100%;
    margin: 0em;
    padding: 0em;
		height: 100%;
}

h1 {
    font-size: 2.5em;
    line-height: 3.8em;
    /* font-family: Helvetica; */
    font-weight: 100;
    color: #E2DBDB;
    margin: 0em;
}

h2 {
    font-size: 1.5em;
    line-height: 1.8em;
    font-weight: bold;
    color: #2F2D2C;
    margin: 0em;
    padding: 0.2em;
    text-align: left;
}


h3 {
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: bold;
    color: #2F2D2C;
    margin: 0em;
    padding: 0.2em;
    text-align: left;
}

h1 b, h2 b, h3 b {
    font-weight: normal;
		color: #787878;
}

p {
    font-size: 1.25em;
    line-height: 1.8em;
    font-weight: 100;
    /* font-family: Helvetica; */
    color: #2F2D2C;
    margin: 0em;
    padding: 1.25em;
    text-align: justify;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
    /* fon-family: Helvetica; */
    font-weight: 100;
    color: #2F2D2C;
    padding: 0em;
    line-height: 1.25em;
    margin: 0.31em 0em 0.313em 0em;
}

option {
		direction: rtl;
}

div {
    /* fon-family: Helvetica; */
    font-weight: 100;
    color: #2F2D2C;
    padding: 0em;
    margin: 0.31em 0em 0.313em 0em;
}
b {
    font-weight: bold;
}
img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
img.cover {
    width: 270px;
    height: auto;
    max-width: 270px;
}

img.thumbs {
    width: 65px;
    height: auto;
    max-width: 65px;
}

img.m4f_logo {
    max-width:280px;
    height:auto;
}

/*
.svg-frame {
   width:280px;
	 height:104px;
   position: relative;
   overflow:hidden;
}
.svg-frame svg {
	position: absolute;
}
image { width:100%; height: auto; }
*/
a {
    text-decoration: none;
    outline: none;
		color: #2F2D2C;
}

/*header*/
#menubar {
    display: block;
    background: #ffffff;
}
#menubar img {
  max-width: 2em;
}
#menubar div { 
    display: block;
    padding: 0.9em;
    max-width: 100%;
}
/*
#menubar ul {
    display: block;
    width: 2em;
    padding: 0.9em;
}

#menubar ul li {
    display: inline;
}

#menubar ul li a.menubutton{
    display: none;
}
*/
#menubar  a.menubutton{
    display: none;
}

header {
	display:block;
  background:#ffffff;
	text-align:left;
}

header div.m4f_logo{
    display: block;
    width: 96%;
    max-width: 980px;
    text-align: left;
    margin-top: 30px;
    margin-left:auto;
    margin-right:auto;
}
/*Navigation*/

nav {
    display: block;
    height: 2.5em;
    background: #ffffff;
    width: 96%;
    max-width: 980px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

nav ul{
    display:block;
}

nav ul li{
    display: inline;
    margin:0em 0.118em 0em 0.118em;
}

nav ul li a{
    color: #787878;
    font-size:1.125em;
    line-height: 2.5em;
    padding: 0.563em 0.938em 0.375em 0.983em;
    transition: 0.2s;
    -webkit-transition: background 0.2s;
}

nav ul li a:hover{
    /*background: #DBD9D8;*/
    color: #2F2D2C;
    border-bottom: 0.188em solid #6cc9d7;
}

nav ul li a.active{
    border-bottom: 0.188em solid #6cc9d7;
    /* font-weight:bold; */
    color: #2F2D2C;
}

/*config area*/

#main{
    display:block;
    width:96%;
    max-width: 980px;
		/* min-height:500px; */
    padding: 0em;
    margin: 0em auto;
}

/* padding top right bottom left */

#main article {
    display: inline-block;
    background: #ffffff;
    vertical-align: top;
    margin: 0em 0em 200px 0em;
    padding: 0em;
    text-align: center;
}

#main  article.alben, article.allebilder {
    width: 100%;
}
#main article.home {
	width: 70%;
	margin-left: 15%;
	/* margin-right: 15%; */
	
	text-align: center;
}

#main article.bild , article.timeline {
    width: 70.3%;
}
#main article.timeline section{
    margin-bottom: 1.063em;
    border-bottom: 0.01em solid #AAAAAA;
		text-align: left;
		color: #787878;
    font-size:80%;
} 
#main article div.bildtitle {
	margin-top: 1.063em;
	font-style: italic;
}
#main article img{
    /* border-radius: 5px; */
		-webkit-box-shadow: 0px 2px 20px -1px #4C4948;
		-moz-box-shadow: 0px 2px 20px -1px #4C4948;
		box-shadow: 0px 2px 20px -1px #4C4948;
		
		/* -webkit-box-shadow: 2px 2px 10px 0px rgba(76,73,72,0.8); */
		/* -moz-box-shadow: 2px 2px 10px 0px rgba(76,73,72,0.8); */
		/* box-shadow: 2px 2px 10px 0px rgba(76,73,72,0.8); */
}

#main article ul{
    display:block;
		text-align: center;
}

#main article ul li{
    display: inline-block;
    padding:0em 0.6em 0em 0.6em;
}

#main article ul li td.imgtitle{
	color: #2F2D2C;
	padding:0.2em 0em 1.3em 0em;
	font-style: italic;
	text-align: center;
}

#main article ul li td.albumtitel{
	color: #2F2D2C;
	padding:0.2em 0em 1.3em 0.7em;
	font-weight: bold;
	text-align: left;
}

#main article ul li a{
    transition: 0.2s;
    -webkit-transition: background 0.2s;
}

#main article ul li a img{
    margin:0em 0.4em 0.3em 0.4em;
}

#main article ul li a:hover{
    border-bottom: 0.188em solid #6cc9d7;
}

#main article div.lstpages a{
		margin-left: 0.3em;
		margin-right: 0.3em;
    color: #787878;
    font-size:1.125em;
    line-height: 2.5em;
    padding: 0.563em 0.638em 0.375em 0.683em;
    transition: 0.2s;
    -webkit-transition: background 0.2s;
}

#main article div.lstpages a:hover { 
    color: #2F2D2C;
    border-bottom: 0.188em solid #6cc9d7;
}

#main article div.lstpages a.active {
    border-bottom: 0.188em solid #6cc9d7;
    color: #2F2D2C;
}

#main article div.lstpages a.anfangende:hover { 
    color: #2F2D2C;
    border-bottom: 0;
}

#main article div.lstpages a.anfangende {
    border-bottom: 0;
}

#main article section.vorzurueck {
		margin-bottom: 0.263em;
		margin-left:1.263em;
		margin-right:1.263em;
		color:#4C4948;
}

#main article section.vorzurueck a{
    font-size: 0.8em;
		color:  #4C4948;
		font-weight: bold;
}

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

#main aside section{
    margin-bottom: 1.063em;
    border-bottom: 0.188em solid #6cc9d7;
}


/* #main aside section.vorzurueck{ */
	
/* } */

/* padding top right bottom left */
#main article h2{
    padding: 1em 1.8em 1em 1.8em;
}

#main aside section ul{
	/* display: block; */
    padding:0em 1.0em 1.0em 1.0em;
}
#main aside section li{
	display: inline;
    /* padding:0em 1.875em 1.25em 2.5em; */
}

#main aside section ul.eigenschaften li{
    display: block;
    /* padding:0em 0.6em 0em 0.6em; */
}

/* #main aside section div{ */
    /* padding:0em 1.8em 1em 1.5em; */
/* } */

/*Footer*/

footer{
    display:block;
    background: #2F2C2C;
    text-align: center;
		position: fixed; 
		left: 0px;		
		bottom: 0px; 
		width: 100%;
		z-index:5;
}

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

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

footer ul li a{
    color: #E2DBDB;
}

img.allinkl {
    width:470px;
    height:auto;
}

/*Mobile Style*/

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

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

    #main aside, #main article.bild,#main article.home, #main article.timeline  {
        width: 100%;
        display: block;
        margin: 0.625em 0em 0.625em 0em;
    }
		#main aside {
			margin-top: 3em;
			padding-top: 1.063em;
			border-top: 0.188em solid #6cc9d7;
		}

		section#main  {
				margin-bottom: 50px;
		}
}

@media screen and (min-width: 500px) {
    nav.nav{
        display:block !important;
        text-align: left;
    }
}

@media screen and (max-width: 500px) {
    body{
        font-size: 86%;
    }
    /* #menubar ul li a.menubutton{
        display: block;
    }*/
    #menubar div a.menubutton{
        display: block;
        /* text-align: right; */
				/* margin-right:10px; */
				margin-left:90%;
    }
		
		#main article ul li{
			display: inline-block;
			padding:0em 0em 0em 0em;
		}
		#main article ul li a img{
			margin:0em 0em 0.3em 0em;
		}
		section#main  {
				margin-bottom: 50px;
		}

    
    nav{
        display: none;
        height: auto;
    }
    nav ul li{
        display: block;
        margin: 0.3em 0em 0.3em 0em;
    }
}



/* #js-viewport-breitenanzeiger */
   /* { */
    /* position: fixed; */
    /* top: 120px; */
    /* right: 20px; */
    /* z-index: 10000; */
    /* background: rgba(230,72,0,0.80); */
    /* border: 1px solid rgba(128,42,0,90); */
    /* box-shadow: 0px 0px 20px rgba(0,0,0,0.10); */
    /* padding: 10px; */
    /* font-size: 11px; */
    /* font-weight: bold; */
    /* color: rgba(255,255,255,1); */
    /* font-family: Arial, Verdana, sans-serif; */
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.50); */
    /* text-transform: uppercase; */
   /* } */