html, body {height:100%; }
body {
	margin:0;
	padding:0;	
	XXcolor:#777;	
	background: #bbb  url(img/mainbg-repeat2.jpg) fixed;	
}



/*----- boxes -------------------------*/

#picturebox {width:100%; max-width:1600px; height:100%;  position:fixed; }
#picturebox .inner {margin: 0 0 0 45%; width:55%; height:100%; box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.1);}
#picturebox .inner img {width:100%; }

.wrapper  { min-height:100%; width:100%; max-width:1600px; position:relative; top:0; left:0; z-index:500;}
#menubox, .contentbox, #rightbox, .rightborderbox  {min-height:100%; position:absolute; top:0;}

#menubox {left:0; width:12%; position:absolute;}

.contentbox {left:12%; width:40%;  background: #eee url(img/mainbg-repeat.jpg) ; border-right:2px solid #fff; border-left:1px solid #fff; box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.1);}
.topspacer {width:100%; padding-top: 15%;}
.contentbox .inner {padding: 0 3% 50px 3%; background: transparent	 url(img/glitzi.png) no-repeat right top; min-height:100px;}

#rightbox {display:none; left:51.8%; top:120px; width:15%; min-width:260px; background: transparent url(img/bg75.png) ; min-height:200px;  box-shadow: 5px 10px 10px 0px rgba(0, 0, 0, 0.4);}
#rightbox .inner {padding: 5px 3% 5px 6%; }
#rightboxopener {display:block; position:absolute; left:52%; top:120px; width:18px; height:100px; }
#rightboxopener img {width:100%;}


#footer { XXdisplay:none; height:0px; width:100%; max-width:1600px; position: fixed; left:0; bottom:0; }
#footer .inner {height:50px; float:right; width:48%; margin-top:-50px;  background: #eee url(img/mainbg-repeat.jpg) ; }
#footer .innerinner {padding: 5px 0 0 20px; }
#footermobile {display:none; border-top: 10px dotted #999; padding-top:20px;} 

.clearer {clear:both;width:100%; }


#header   { width: 90%; min-height: 100px; padding:10px 5% 40px 5%; text-align:right; }
#header a.logopic img  {max-width:100%;}
#header .infobox {}
#header .infobox h1, .header .infobox h1 a {font-size:1.2em; line-height:120%; font-weight:normal; margin:0; color:#777 ! important;}
#header .infobox h2 {font-size:1em; line-height:110%;font-weight:normal; margin:0; color:#777;}
#header .infobox h3 {font-size:0.95em; line-height:110%; font-weight:normal; margin:0; color:#777;}

#headermobile {display:none;}


#menu {	
	margin: 0 0px 0 0px;
	text-align:right;
	z-index: 1000;
}


#menu ul, #menu li {
	list-style-image: none;
	list-style-type: none;
	margin:0;
	padding:0;
}

#menu ul {padding-bottom:20px;}


#menu li a {
	display:block;	
	color: #444;
	text-decoration: none;
	margin: 0 0 0 0;
	padding:10px 10% 6px 5%;	
	text-shadow: 0px 4px 4px #aaa;
	font-size:16px; 
	line-height:110%;	
	border-top: 1px solid transparent; border-bottom: 1px solid #transparent;
}

#menu li li a  {font-size:14px;  padding:6px 10% 6px 5%;}
#menu li li li a  {font-size:12px;  padding:5px 15% 5px 5%;}
#menu li li li li a  {font-size:12px;  padding:5px 20% 5px 5%;}


#menu ul li a:hover, #menu ul li a.menu-parent, #menu a.menu-current {color: #fff ! important; text-shadow: 0px 2px 4px #000; background-color: #333; }
#menu a.menu-current {border-top: 1px solid #666; border-bottom: 1px solid #666;}
#menu ul li a.menu-parent { border-bottom: none ! important;}


#menu a.menu-current, #menu a.menu-parent, #menu ul li a.menu-expand {font-weight: bold; }

#menu ul li a.menu-expand { background-image: url(img/down.png)  no-repeat 10px center;}

#menu ul li.menu-expand ul {display:none;}
#menu ul li.menu-current ul, #menu ul li.menu-parent ul {display:block; height:auto}
#menu ul ul li.menu-expand ul {display:none;}
#menu ul ul li.menu-current ul, #menu ul ul li.menu-parent ul {display:block;}

.closeswitch {display:block; float:right; padding:0px; text-align:right;}
#menubox .closeswitch {float:none; padding:4px; text-align:right;}
#menuswitch, #menuswitchsmall, #menubox .closeswitch {display:none;}
#menuswitch img, #menuswitchsmall img , #menubox .closeswitch img {max-width:100%;}

a.editlink{width:16px; height:16px; float:right; background: transparent url(img/edit.gif) no-repeat; text-decoration:none;}


/*Extras */
.optikerblock img {width:30%; float:right;}






/* Prevent from hiding meneu */
@media screen and (min-width: 1300px) {
	#menubox {display:block ! important; }
}

/* Smaller Screens */
@media screen and (max-width: 1300px) {
	#XXpicturebox .inner {padding-top: 80px; }
}


/* Smaller Screens */
@media screen and (max-width: 1100px) {
	body { background-image: url(img/bglightmini.png)  no-repeat;}

	#menubox {display:none; background: #ccc;  width:200px; top:50px; z-index:5500;  box-shadow: 0px -2px 30px 13px rgba(0, 0, 0, 0.2);}
	
	.contentbox {left:3%; width:52%; }
	.topspacer {padding-top: 15%; height:40px;}
	
	#menu ul li.menu-expand ul, #menu ul ul li.menu-expand ul {display:block;}
	#menu ul li ul {height:auto;}
	
	#menu a { overflow:hidden; padding-right:5px;}
	#menu li a {font-size:14px; padding:10px 10px 10px 0;}
	#menu li li a {font-size:13px; padding:9px 15px 9px 0;}
	#menu li li li a {font-size:12px; padding:8px 20px 8px 0;}
	
	
	.showonmobiles {display:block ! important;}
	#menuswitch {display:block; position:absolute; left:-5px; top:120px; width:32px;}
	#menuswitch img {width:100%;}
	#menubox .closeswitch {display:block; }
	
	#header {display:none;}
	#footer .inner {width:46%;}
	#rightbox {left:54%;}
	
	#headermobile {display:block;  position:absolute; left:3%; top:0; width:52%; padding:8px 3px 8px 0; background:transparent url(img/header.jpg) no-repeat center right; }
	#headermobile a.logopic img  {max-width:40%; float:left; margin: 0 5% 6px 2%;}
	#headermobile .infobox {width:60%;  float:left; }
	#headermobile .infobox h1, .header .infobox h1 a {font-size:1.2em; line-height:120%; font-weight:normal; margin:0; color:#222 ! important;}
	#headermobile .infobox h2 {font-size:1em; line-height:110%;font-weight:normal; margin:0; }
	#headermobile .infobox h3 {font-size:0.95em; line-height:110%; font-weight:normal; margin:0; }

}

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

	#picturebox { position:fixed; left:0; top:0;  }
	#picturebox .inner {margin: 0 0 0 0; width:100%; height:100%; padding-top: 0;}
	
	.contentbox {left:0; top:600px; width:100%; min-height:400px; font-size:14px; border-right:none; border-left:none;}	
	.topspacer {padding-top: 10px; height:auto;}
	
	
	#headermobile {left:0; top:0; width:100%; padding-right:0;}
	#headermobile .infobox h3  {display:none;} 
	
	#rightboxopener {display:block; position:absolute; left: auto; right:0; top:620px;  height:100px;}
	#rightbox {width:40%; min-width:auto; left: auto; right:0; top:570px; z-index:5000;}
	#rightbox .inner {padding: 5px 10px 5px 5px; }
	
	
	
	#menuswitchsmall {display:block; position:absolute; left:0; top:150px; width:30px; opacity:0.6}
	#menuswitch {display:none;} 
	
	
	#footer {display:none;} 
	#footermobile {display:block;} 
	
	
}

@media screen and (max-width: 620px) {
	.contentbox {top:420px;}
	.contentbox .inner {padding: 0 3% 50px 3%;}
	#rightboxopener, #rightbox {top:440px;}
	
	#kinderbrillen_karte {margin-left:-3%; width:106%; overflow:hidden;}
	.kinderbrillen_karte_innen {margin-left: -120px;}
		
}

@media screen and (max-width: 420px) {
	.contentbox {top:320px;}
	#rightboxopener, #rightbox {top:340px;}
	
	#kinderbrillen_karte {margin-left:-3%; width:106%; overflow:hidden;}
	.kinderbrillen_karte_innen {margin-left: -170px;}	
}