html {height:100%;}
body {
	margin: 0; padding: 0; 
	background-color:#ddd;
	height:100%;
	background: #82a2d6; /* url(images/bodybg.jpg)  no-repeat fixed left top;*/
	-o-background-size: 100% auto, auto;
	-moz-background-size: 100% auto, auto;
	-webkit-background-size: 100% auto, auto;
	background-size: 100% auto, auto;
}

.container {
	max-width: 900px;
    width: 90%;
	min-height:90%;    
    margin: 0 auto;
	background:transparent url(images/bg30.png);
}

.header { width: 100%; background:transparent url(images/header.jpg) no-repeat right top;}
.header .logo img {max-width:100%; float:left;}

.mainbox {margin: 20px 2% 20px 10%; background-color:#0ff;}

.contentbox {width: 68%; float:left; background:transparent url(images/bg50.png);}
.contentbox .inner {margin:0 5px 0 10px;}
.rightbox {width: 30%; float:right; }
.rightbox .inner {margin:0 5px 0 5px;}

#contentwide {width: 98%; }

.footer {
    width: 90%;	
    max-width: 900px;
	height:40px;
    margin: -40px auto 0 auto;
	position:relative;
}

.footer .footerpic {width:100%; height:100%;}

.footer .inner { position:absolute; top:10px; left: 0; width:100%; font-size:0.8em; text-align:center; line-height:110%; }
.footer .inner span { font-size:0.7em; }



.clearer {height:60px; clear:both;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ */
/* http://tessathornton.com/ */

.toggleMenu {
    display:  none;
    background: #4c7fb8;   
    color: #fff;
	width:100%;
}
.toggleMenu span {display:block; padding: 10px 15px; font-weight: bold;}

.nav {
	list-style: none;
     background:#1c497c;
	 margin: 0; padding: 0;	
}

.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 14em;
	margin: 0; padding: 0;
	background-color:#1c497c;
	
	 
}
.nav a {
    padding: 8px 12px;
    color:#fff;
	text-decoration: none;
	
}

.nav a.menu-current, .nav a.menu-parent {  background: #a2bbd7;  color: #000; }

.nav li {
    position: relative;
	margin: 0; padding: 0;
	border-right: 1px solid #fff;
}
.nav li li {border-right: none;z-index:2000;}

.nav > li {
    float: left;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
	padding-right: 20px;	
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
	display: none;
	background: #fff;
	z-index:1000;
}
.nav > li.hover > ul {
    left: 0;  display: block; background: #fff;
}
.nav li li.hover ul {
    left: 100%;
	display: block;
    top: 0;
	background: #fff;
}
.nav li a:hover {  background: #666;}
.nav li li a {
    display: block;
    background: #4c7fb8;
    position: relative;
    z-index:1000;
    border-top: 1px solid #1c497c;
}
.nav li li li a {
    background:#1c497c;
    z-index:200;
    border-top: 1px solid #fff;
}

@media screen and (max-width: 768px) {
	/*body { background-image: url(images/bodybgmobile.jpg); }*/
	body { background-color: #82a2d6; }
	
    .active {
        display: block;
    }
    .nav > li {
        float: none;
		border-right: none; 
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: right 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
       position: static;
    }
	
	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	
	.mainbox {margin: 20px 0 20px 0;}
	.contentbox {width: 100%;}
	.rightbox {display:none;}
	
	.showonmobiles {display:block ! important;}

}