html, body {

	margin:0;

	padding:0;	

	background: #49001a url(img/bodybg.jpg) no-repeat fixed;

	color:#e8d3df;

	min-height: 100.1%;	

}



	

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

.clearer {clear:both;height:1px; width:100%;  }





.bodybox {

	width:100%;	

	max-width:960px;	

	margin: 0 auto;

	text-align: left;



}

.header {height:30px; margin-top:70px; 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:center; 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: transparent url(img/footer.png) no-repeat; background-size: 100% 100%, auto;}

.footer .inner { margin: 0 20px 0 21%;  font-size:0.9em; color:#ab2e76; }

.footer .inner a {text-decoration: none; color:#6b284f ! 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 #380a2d;}



#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 ;

	text-shadow: 0px 0px 4px #fff;

	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, body {background: #330c22 url(img/bodybg-mobile.jpg) no-repeat fixed;}







	.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: transparent url(img/footer.png) no-repeat; 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: 2px solid #540a2a;}

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

}