/*
* i4 project "blumer"
* by ditoy e-dentity 2013
* mobile stylesheet
*/

@media all and (min-width: 2px) {

	/* ALLGEMEIN */
	#mobile_topbar {
		width: 100%;
		position: fixed;
		
		background-color: rgb(62,51,48);
		border-bottom: 6px solid rgba(0,0,0,0.3);
		top: 0;
		z-index: 100;
		
		display: none;
	}
	#mobile_topbar .left,
	#mobile_topbar .middle,
	#mobile_topbar .right {
		float: left;
		width: 30%;
	}
	#mobile_topbar .right {
		float: right;
	}
	#mobile_topbar .middle {
		text-align: center;
		width: 40%;
	}
	#mobile_topbar button {
		margin: 10px;
		float: left;
		
		text-indent: 45px;
		width: 40px;
		height: 30px;
		border:none;
		background:none;
		cursor: pointer;
		overflow: hidden;
		
	}
	#mobile_topbar button#button_menu {
		background-image: url(../image/rd-nav-icon.png);
		background-size: 24px;
		background-repeat: no-repeat;
		background-position:center center;
		
	}
	
	#mobile_topbar button#button_menu:active,
	#mobile_topbar button#button_menu.active {
		background-image: url(../image/rd-nav-icon.png);
	}
	#mobile_topbar .right button {
		float: right;
	}
	#mobile_topbar img {
		width: 180px;
		display: inline;
		margin-top: 6px;
	}

}

@media all and (max-width: 768px) {

	/* MOBIL: iPad portrait (768) und kleiner */
	
	body {
		background-size: cover;
		background-color: rgba(62,51,48,0.79);
	}
	body.handmade {
		background-color: #ccc;
	}
	
	.navigation a {
		font-size: 30px;
	}
	#logo {
		display: none;
	}
	#middle {
		padding-top: 60px;
	}
	
	#header {
		position: fixed;
		margin-top: -300px;
		border-width: 2px;
	}
	#mobile_topbar {
		display: block;
	}
	.panel-menu #header {
		margin-top: 50px;
	}
	.panel-menu #mobile_topbar {
		border-bottom: 2px rgba(0,0,0,0.4) black;
	}
	div#wrap {
		float: left;
		width: 100%;
	}
	
	#navigation {
		display: none;
	}
	
	.panel-menu #navigation {
		position: fixed;
		display: block;
		width: 100%;
		margin: 50px 0 0 0;
		background-color: rgb(62,51,48);
		z-index: 102;
	}
	.panel-menu .navigation_container a {
		font-size: 20px;
		padding: 6px;
	}
	.panel-menu .navigation_container li:first-child {
		border-top: 3px rgba(0,0,0,0.4) solid;
	}
	.panel-menu .navigation_container li {
		border-bottom: 1px rgba(255,255,255,0.5) solid;
	}
	.panel-menu .navigation_container li.nav_level3 a {
		margin-left: 40px;
	}
	.panel-menu #navigation_navigation_sub > ul {
		border-bottom: 2px rgba(0,0,0,0.4) solid;
	}
	.panel-menu #navigation_navigation_sub > ul > li:last-child {
		border-bottom: 1px rgba(255,255,255,0.2) solid;
	}

	body.handmade div#wrap {
		width: 100%;
	}
	div#content {
		position: relative;
		width: 100%;
		background-color: rgb(62,51,48);
		margin-top: 50px;
		padding-top: 7px;
	}
	div#wrap div#content.handmade {
		float: left;
		background: none;
	}
	div#content.handmade div.column {
		width: 98%;
	}
	div#content.handmade div#bueroloft.column > table {
		margin-top: 10px;
	}
/*	div#content .component_text div.text_standard,*/
	div#content .component_text div.text_standard p,
	div#content .component_link a {
		font-size: 20px;
		padding: 0 2% 0 2%;
	}
	div#content.handmade a {
		font-size: 14px;
	}
	div#content .component_text ul,
	div#content .component_text li {
		font-size: 18px;
		line-height: 135%;
		margin: 0 20px 0 20px;
	}
	div#content a {
		font-size: 20px;
	}
	div#content .component_text h1,
	div#content .component_group h1 {
		font-size: 22px;
		padding: 0 5% 0 2%;
	}
	div#content .component_text h1.xl_center {
		font-size: 28px;
	}

	div#bg_slideshow {
		width: 100%;
		height: 67%;
		float: left;
	}
	div#bg_slideshow .aggregator_item,
	div#bg_slideshow .component_slideshow,
	div#bg_slideshow .slideshow_run,
	div#bg_slideshow .slideshow_run > div {
		width: 100%;
		height: 100%;
		float: left;
	}
	.component_slideshow .slideshow_wrapper {
		float: left;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	div#bg_slideshow div.slideshow_run .img {
		float: left;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.aggregator_container_grid,
	.aggregator_container_vertical,
	.aggregator_container_vertical > .aggregator_item {
		height: 100%;
	}

}

@media all and (min-width: 769px) {

	/* DESKTOP: alles war breiter ist als iPad portrait (768) */

	div#navigation {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 75px;
		min-width: 100%;
		background-color: rgb(62,51,48);
		background-color: rgba(62,51,48,0.79);
		z-index: 80;
		font-family: 'Orbitron', sans-serif;
		font-weight: 400;
	/*	letter-spacing: 0.1em;*/
		text-transform: lowercase;
	}
	div#navigation ul.navigation_list {
		min-width: 900px;
		list-style:none;
		float:left;
		margin: 0;
		padding-top: 12px;
		padding-left: 60px;
		overflow: hidden;
	}
	div#navigation ul.navigation_list li {
		float: left;
		margin-right: 20px;
	}
	div#navigation ul.navigation_list li.nav_level3 a {
		font-size: 20px;
	}
	div#navigation ul.navigation_list li.nav_level2 a {
		font-size: 16px;
		font-weight: bold;
	}
	div#navigation ul.navigation_list li.active,
	div#navigation ul.navigation_list li.current {
		font-weight: bold;
	}
	div#navigation ul.navigation_list li.active a,
	div#navigation ul.navigation_list li.current > a {
		color: #fc0;
	}
	div#navigation_navigation_sub ul.navigation_list {
		position: absolute;
		top: 0;
	}
	div#navigation_navigation_main ul.navigation_list {
		position: absolute;
		bottom: 11px;
	}

	div#content {
		float:left;
		margin: 0;
		top: 105px;
		background-color: rgb(62,51,48);
		background-color: rgba(62,51,48,0.79);
		padding-top: 10px;
		padding-left: 10px;
		padding-right:10px;
		padding-bottom: 0;
		position: relative;
		z-index: 80;
	}

	div#bg_slideshow {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	div#bg_slideshow .aggregator_container,
	div#bg_slideshow .aggregator_item,
	div#bg_slideshow .component_slideshow,
	div#bg_slideshow .slideshow_run,
	div#bg_slideshow .slideshow_run > div {
		width: 100%;
		height: 100%;
	}
	.component_slideshow .slideshow_wrapper {
		padding: 0;
		height: 100%;
	}
	div#bg_slideshow div.slideshow_run .img {
		width: 100%;
		height: 100%;
		background-size: cover;
	}


	/** handmade */
	body.handmade {
		background-color: #ccc;
	}
	div#content.handmade {
		float: left;
		left: 0;
		background: none;
		color: black;
	}

}