html {
	background-color: #3D2C71;
}
body {
	margin:0;
	padding:0;	
	min-height: 100.1%;
	color:#e8d3df;
	margin: 0px auto;
	max-width: 900px;
}
/*----- boxes -------------------------*/
.clearer {clear:both;height:1px; width:100%;  }


.bodybox {
	width: auto;		
	margin: 0 auto;
	height: auto;
	text-align: left;

}
.header {height:30px; margin-top:60px; background: transparent url(img/header.png) no-repeat; background-size: 100% 100%, auto;}
.mobileheader {display:none;}

.maincontainer {min-height:300px;  background: transparent url(img/mainbg.png) repeat-y; background-size: 100% 100%, auto;}

#leftbox {float:left; width:19%; }
#leftbox .logobox {display:block; margin: 10px; text-align:right; text-decoration:none; }
.logobox span {display:block; margin: 0 0 20px 10px; font-size:1em; color:#fff; text-shadow: 0px 0px 4px #fff;}
#leftbox a.logobox img {max-width:100%; }

.contentbox {float:left; width:55.8%; }
.contentbox .inner { margin: 20px 0 0 4%;  }

.bodybox #contentwide {float:left; width:76%;}

#rightbox {float:right; margin: 20px 2% 0 0; width:23%; background: transparent url(img/right-bg.png) repeat-y;}
#rightbox .inner { margin: 0 5% 0 5%; background: transparent url(img/right-inner-bg.png) no-repeat; line-height: 120%; font-size: 0.9em; }

.footer {height:82px;  background-size: 100% 100%, auto;}
.footer .inner { margin: 12px 20px 0 21%;  font-size:0.9em; color:#e8d3df; }
.footer .inner a {text-decoration: none; color:#e8d3df ! important;}

.glimpsbox {height:180px; width:100%; background: transparent url(img/glimps.png) no-repeat right top;}


#nav {margin:30px 0 0 0; text-align:right; border-top:1px solid #C6D3E4;}

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

#nav a {
	display:block;	
	color: #fff;
	text-decoration: none;
	border-bottom:1px solid #380a2d;
	padding:2px 10px 2px; 0;
	margin:0 ;
	
	transition:0.5s all;

}

#nav li a {font-size:1.1em; padding:10px 10px 10px; 0;}
#nav li li a  {font-size:0.9em; padding:6px 10px 6px; 0;}
#nav li li li a  {font-size:0.8em; padding:3px 10px 3px; 0;}

#nav a.menu-current {color: #380a2c; text-shadow: none; background: transparent url(img/mbg.png) no-repeat;}
#nav a:hover {color: #380a2c; text-shadow: none; background-color:#d8b8d2;}

/*desktops show not ALL menu items. Remove this if you wand*/
#nav ul li ul {display:none;}
#nav ul li.menu-current ul {display:block;}
#nav ul li.menu-parent > ul {display:block;}
#nav ul li.menu-current ul ul {display:none;}



/* ======================================================================
Smaller Screens */
@media screen and (max-width: 768px) {
	html {background-color: #3D2C71;}
	
	.header {display:none;}
	.maincontainer {background-image: none; margin-top:30px;}
	
	a#navcloser {display:none; z-index:4000; position:absolute; top:0; XXleft: -500px; width: 100%; height: 100%; }
	#leftbox {z-index:6000; position:absolute; top:100px; left: -250px; width:180px; background: rgba(42,12,51,0.9); box-shadow: 11px 20px 34px 10px rgba(0,0,0,0.5); transition: 1s left;}
	#leftbox .logobox {display:none;}
	
	#leftbox #nav ul { display: block ! important;}
	#leftbox.visible {left: 0; transition: 1s left;} 	
	a#navcloser.visible {display:block;} 
	
	.contentbox {width:65%; }
	#rightbox {width:30%; }
	.bodybox #contentwide {width:90%; }
	
	.footer {height:82px; background-size: 100% 100%, auto;}
	
	.mobileheader {display:block; height:100px; margin: 0 4%;}
	#mobilemenu {float:right; width:60px; margin:  0;}
	.mobileheader a.logobox {display:block; margin: 10px 0 0 0; text-decoration:none; }
	.mobileheader span {display:block; margin: 0; font-size:1em; color:#fff; text-shadow: 0px 0px 4px #fff;}
	.mobileheader a.logobox img {max-width:60%; }
	
	
	
	.footer {height:auto; background: none; border-top: 0px solid #fff;}
	.footer .inner { margin: 10px 20px 30px 20px;  font-size:13px; color:#fff; text-align:center; }
	.footer .inner a {color:#fff ! important;}

}

@media screen and (max-width: 500px) {
	.contentbox, .bodybox #contentwide {float:none; width:97%; }	
	#rightbox {z-index:5000; position:absolute; top:100px; right: -180px; width:200px; margin:0;}
}