html, body {height:100%; }
body {
	margin:0;
	padding:0;	
	color:#fff;	
	background: #222;	
}



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

#picturebox {width:100%; max-width:1600px; height:100%;  position:fixed; }
#picturebox .inner {margin: 0 0 0 55%; width:45%; height:100%;}
#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:15%; background: #222;}

.contentbox {left:15%; width:40%; background: #333 url(img/glitzi.png) no-repeat right top; box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.6);}
.topspacer {width:100%; padding-top: 15%;}
.contentbox .inner {padding: 0 3% 50px 3%;}

#rightbox {display:none; left:54.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:54%; top:120px; width:28px; height:100px; }
#rightboxopener img {width:100%;}


#footer {height:1px; width:100%; max-width:1600px; position: fixed; left:0; bottom:0; }
#footer .inner {height:50px; float:right; width:45%; margin-top:-50px;  background: #111; }
#footer .innerinner {padding: 5px 0 0 10px; }
#footermobile {display:none; border-top: 10px dotted #222; padding-top:20px;} 

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


#header   { width: 90%; min-height: 160px; 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:#fff ! important;}
#header .infobox h2 {font-size:1em; line-height:110%;font-weight:normal; margin:0; color:#fff;}
#header .infobox h3 {font-size:0.95em; line-height:110%; font-weight:normal; margin:0; color:#fff;}

#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: #ddd;
	text-decoration: none;
	margin: 0 0 0 0;
	padding:10px 5% 6px 5%;	
	text-shadow: 0px 0px 4px #000;
	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; text-shadow: 0px 0px 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;}
#menu ul li.isopened>ul {display:block ! important}

#menu ul li a.isopened {color:#feffd3;}
#menu ul li a.isopened::before {  content: "\00BB ";
}


.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;}


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

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


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

	#menubox {display:none; width:200px; top:50px; z-index:5500;  box-shadow: 0px -2px 30px 13px rgba(0, 0, 0, 0.61);}
	
	.contentbox {left:3%; width:52%; }
	.topspacer {padding-top: 15%; height:40px;}
	
	#XXmenu ul li.menu-expand ul, #XXmenu 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;}
	
	#headermobile {display:block;  position:absolute; left:3%; top:0; width:52%; padding-top:10px; background:transparent url(img/header.jpg) no-repeat center right; }
	#headermobile a.logopic img  {max-width:30%; 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:#fff ! important;}
	#headermobile .infobox h2 {font-size:1em; line-height:110%;font-weight:normal; margin:0; color:#fff;}
	#headermobile .infobox h3 {font-size:0.95em; line-height:110%; font-weight:normal; margin:0; color:#fff;}

}

@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;}	
	.topspacer {padding-top: 10px; height:auto;}
	
	
	#headermobile {left:0; top:0; width:100%; }
	#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:120px; width:60px; }
	#menuswitch {display:none;} 
	
	
	#footer {display:none;} 
	#footermobile {display:block;} 
	
	
}

@media screen and (max-width: 620px) {
	.contentbox {top:420px;}
	.contentbox .inner {padding: 0 5% 50px 5%;}
	#rightboxopener, #rightbox {top:420px;}	
}

@media screen and (max-width: 420px) {
	.contentbox {top:320px;}
	#rightboxopener, #rightbox {top:320px;}	
}