/* Desktop -------------------------------------------------------------*/

.main						{ width: 960px; margin: 20px auto 10px auto; padding: 0; border:1px solid #fff; border-radius: 5px; -moz-box-shadow: 0px 0px 5px #888; -webkit-box-shadow: 0px 0px 5px #888; box-shadow: 0px 0px 5px #888;}
.content-left				{ width:720px; float:left; margin:20px; }
.content-left-layer			{ background-image:url('img/logo_transparent.png'); background-repeat:no-repeat; background-position:top center; min-height:580px; text-align: justify;}
.navigation					{ width:180px; float:right; text-align:center; background-color: transparent; }
.footer						{ width: 960px; margin: auto; text-align: right; }

.mobile						{ display: none; }


/* Navi -------------------------------------------------------------*/

nav {
    font-family: Arial, sans-serif;
    font-size:15px;
    font-weight: bold;
	color:#f2f2f2;
	text-align: center;
}

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

nav ul li {
    list-style: none;
}

nav ul li a.navi {
    text-decoration: none;
    display: block;
    color:#fff;
    padding-top:12px;
    padding-bottom:12px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}

nav ul li:hover > a {
    color: #000;
    background-color:transparent;
}

nav ul li a.current {	
    text-decoration: none;
    display: block;
    color:#000;
    padding-top:12px;
    padding-bottom:12px;
	background-color:transparent;
}	



/* Tablet (Portrait)  -------------------------------------------------------*/

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

.main						{ width:748px; margin: 5px auto 5px auto; padding: 0; border:1px solid #fff; border-radius: 5px; -moz-box-shadow: 0px 0px 5px #888; -webkit-box-shadow: 0px 0px 5px #888; box-shadow: 0px 0px 5px #888;}
.content-left				{ width:540px; float:left; margin:10px; }
.content-left-layer			{ width:540px; margin:auto; background-image:url('img/logo_transparent.png'); background-repeat:no-repeat; background-position:top center; background-size: contain; min-height:580px; text-align: justify;}
.navigation					{ width:180px; float:right; text-align:center; background-color: transparent; }
.footer						{ width:748px; margin: auto; text-align: right; }

}

/*  Smartphone (Portrait)  ---------------------------------------------------*/

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

.main						{ width: 100%; }
.content-left				{ width:95%; margin:10px; }
.content-left-layer			{ width:100%; margin:auto; background-image:url('img/logo_transparent.png'); background-repeat:no-repeat; background-position:top center; background-size: contain; min-height:580px; text-align: justify;}
.navigation  				{ width:100%; text-align:center; }
.footer						{ width: 100%; margin: auto; text-align: right; }

.mobile 					{ display:inline; }
.cd 						{ padding-top: 30px; }
.brad-top-left5				{ border-radius: 0px; }
.brad-top-right5			{ border-radius: 0px; }

ul li.mylist				{ margin-left: -15px; }

.nachricht					{ width: 300px; }


#contains_images			{ max-width: 766px; }

nav {
		position: relative;
		margin-bottom: 30px;
		border-bottom:0px none;	
		background: #fff;	
	}

	nav ul {
		width:100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #fff;
		background-image: url(img/icon-menu.png), url(img/icon-menu-r.png);
		background-position: 10px 10px, right 10px;
		background-repeat: no-repeat;
		border-top: 2px solid #2a6599;
		border-bottom: 2px solid #2a6599;
	}
	
	nav li {

		display: none;
		margin: 0;
	}
	nav .cur {

		display: block; 
		border-bottom: 1px solid #fff;
	}
	nav a {
		border:0px none;
		display: block;
		color: #fff;
		padding-left: 35px;
		text-align: left;
	}

	nav a:hover {
	color: #000;
	background:#fff;
	}

	nav .current a {
		background: none;
		color: #fff;
	}
	nav .current a:hover {
	  color: #fff;
	  background: none;
	}

	/* on nav hover */
	nav ul:hover {
		background-image: none;
	}
	nav ul:hover li {
		display: block;
		margin: 0px;
	}

	nav ul li a.navi {
    padding-top:5px;
    padding-bottom:5px;

	}
}

/* Smartphone (Landscape)  ----------------------------------------------------*/

 @media only screen and (min-width: 480px) and (max-width: 767px) {

.main						{ width: 100%; }
.content-left				{ width:95%; margin:10px; }
.content-left-layer			{ width:100%; margin:auto; background-image:url('img/logo_transparent.png'); background-repeat:no-repeat; background-position:top center; background-size: contain; min-height:580px; text-align: justify;}
.navigation  				{ width:100%; text-align:center; }
.footer						{ width: 100%; margin: auto; text-align: right; } 	

	nav {
		position: relative;		
		border-bottom:0px none;
		background: #fff;
	}	

	nav ul {
		width:100%;
		position: absolute;
		top: 0;
		left: 0;	
	}

	nav ul li {
		width:100%;
		top: 0;
		left: 0;
	}

}