/* setting max page with centrally here only once for middle and banner */
div#middle, .bannerLarge, .bannerLarge img, .navi .naviLine{ 
  max-width: 1240px;
}

div#middle {
  margin: 145px auto 5px auto; /*15px auto; */ /* INDIVIDUAL pix margin top to accomodate to sticky navigation on top */
  min-height: 620px;
  /* text-align: left; */ /* Ende des IE hacks, sonst wird jeglicher Text zentriert */
}
div#left {
	clear: both;
	float: left;
	width: 200px;
	margin-right: 10px;
	/* margin-left: 5px; */
}
div#main {
  float: left;
  background-color: #ffffff;
  min-width: 600px;
  width: 75%; /* not 100% because of navigation left /*width: 800px; */
  min-height: 700px; /* so the footer is seen at the bottom */
  margin-left: 10px;
}
div#mainWide {
  float: left;
  background-color: #ffffff;
  min-width: 600px;
  width: 100%; /* not 100% because of navigation left /*width: 800px; */
  min-height: 700px; /* so the footer is seen at the bottom */
  /* margin-left: 10px; */
}
.mobileOnly{
  visibility: collapse;
  height: 0px;
  width: 0px;
}

/* mobile settings */
@media only screen and (max-width: 950px) {
	
	
	html,body{  /* needed to fix annoying whitespace to the right. */
		width: 100%;
		/* height: 100%; */
		margin: 0px;
		padding: 0px;
		overflow-x: hidden; 
	}
	div#middle, div#main , div#mainWide ,.navi .naviLine, div#left ,div.boxElement, .bannerLarge{ /* make every element blocky with 100% width */
		width: 100%;
		float: none;
		display: block;
		min-height: 0px;
		min-width: unset;
		margin: 0px;
		overflow-x: scroll; /* show scrollbar if necessary e.g.for tables */
	}	
	div#middle{
		margin-top:143px; /* INDIVIDUAL SETTING: accomodate for sticky navigation on top */
	}
	.flexContainerHorizontal, .flexContainerHorizontal .column, .dropdown, .bannerLarge h2.bannerText {
		border-bottom: 0px;
		display: block;
		padding: 0px;
		float: none;
		margin: 0px auto;
	}
	.bannerLarge .bannerText,.bannerLarge h3.bannerText{
		top: 20px; /* lowered for web23 */
		left: 20px;
		/* font-size: 18px; */ /* not for everyone, depends on banner text length */
	}
	.bannerLarge h3.bannerText{
		/* required for web23 with long text: */
		font-size: 18px;
		top: 30px; 
	}
	
	.mobileOnly{
		visibility: visible;
	}
	.mobileHidden , div.mobileHidden  {/* the last one for  higher priority */
		visibility: collapse;
		min-height: 0px;
		height: 0px;
		width: 0px;
	}
	.navi #logo a.clickableLogoPart{ /* on mobile make Logo central */
		display: block;
		margin: 10px auto; /* individual, depends on logo */
	}

	div#articlelistview div.largetiles{
		width: 92%; /* cuts up stuff to the right when 100% */
		margin: 3px 6px;
		min-width: 260px; /* necessary for mobile view for same sized tiles */
		min-height: 0px; /* deleting large value of desktop version */
		padding: 3px 6px;
	}
	
	/* since the tiles are now only verticular, dont need same heights for texts. */
	div#articlelistview div.largetiles div.text, div #articlelistview div.artCaption, div#articleDetailView div.boxContent, div#articleDetailView div.boxContent div.rightPart{
		height: auto;
		line-height: normal;
		width: auto;
		min-height: auto;
		float: none;
		min-width: auto;
		max-width: none;
	}
	div.boxContent{
		margin: 5px; /* default for boxContent pc is no margin left and right, which isnt great on mobile */
	}
	
	div#articlelistview div.largetiles div.imgcontainer, div#articlelistview div.largetiles div.imgcontainer img{
		visibility: collapse;
		width: 0px;
		height: 0px;
		line-height: normal;
	}
	
	div#articleDetailView div.boxContent div.rightPart h1{
		font-size: 19pt;
	}	
	
	div#articleDetailView div.boxContent div.rightPart{
		/*width: auto;
		min-width: auto;
		max-width: none;
		float: none; */ /* is above */
		margin: 0 5px;
	}	
	div#articlelistview div.largetiles input.cartAmount{
		width: 70px;
		height: 20px;
		margin: 5px 10px;
	}
	
	.navi .allowedContent .rightElement{ /* would be only cart and user icon */
		float: right;
		margin-right: 5px; 
		min-width: 150px;
	}
	.navi .allowedContent .rightSearchElement{
		min-width: 150px;
		float: left;
		margin: 0px 8px;
	}
	.navi .allowedContent .rightSearchElement input{
		min-width: 130px;
		/*width:80%; */
	}
	table.previewheader td{
		padding: 0 5px; /* less padding */
	}						
}