/* Top Elements */
* { margin: 0; padding: 0;}

body, html {	
	color: #000;	
	margin: 0;	
	background: #252525 url(img/body-bg.jpg) repeat-x;
}



.mainwrapper {	
	width: 100%; max-width:1100px;
	margin: 0 auto 0 auto;
	text-align: left;
	background: #6c4020 url(img/main-bg.jpg);
	overflow:hidden;
}

.poskeeper {	
	width: 100%; max-width:1100px;
	position:relative;	
}

.clearer {height: 1px; clear:both; background-color: #000;}






.headerbox { 
	width: 100%; max-width:1100px;
	height: 240px;	
	color: #ddd;
	background: transparent url(img/header-bg.gif) repeat-x;
}

.header {    
	overflow:hidden; 
	height: 180px;
	width:58%;
	margin: 60px 0 0 10%;
	float:left;	
	padding: 0;
	display:inline;	
	font-family: 'Coda', arial, serif;	
	color:#2a1709;
	text-shadow: 0 0 2px #bb8f72, 1px 2px 2px #dfd0c6, -1px -2px 2px #000, -1px -2px 2px #000;
	filter:glow(color: #e1c7b7, strength: 2);
}
.header .sitetitle { font-size: 60px; line-height:50px; }
.header .subtitle { font-size: 30px; line-height:24px;}
.header .description { font-size: 28px; line-height:22px;}



#menubox{
	width:30%;	
	float:right;
	display:inline;
}


/* Main Column */
.contentbox, .contentboxwide { 
		 width:60%;
		 float:left;
		 margin: 0 0 0 8%;
		 background: transparent url(img/content-bg.png);
		 		  
}
.contentbox .inner {margin: 20px 1% ;}


.rightbox {
	width:30%;
	min-height: 100px;
	float:right;	
	margin: 0 0 0 0;	
}


/*menu */





#nav {height:240px; background: #eee url(img/m1bg.jpg);

}

#nav ul { /* all lists */
	float : left;
	padding: 0;
	margin: 0;
	height:240px;
	width : 100%;
	list-style: none;
}


#nav li { /* all list items */
	position : relative;		
	display:block; 		
	height:40px;
	width : 100%;
	float : left;
	
	font-family: 'Coda', arial, serif;
	font-size : 24px;
	line-height:16px;
	font-weight:bold;
		
}
	
/*Level 1 and more*/
#nav li a {	
	color : #fff;			
	display : block;	
	text-decoration : none;
	border : 0px solid black;
		
}

#nav li a span {display : block; padding: 12px 0 8px 30px;}
#nav li a:hover { color : #ffc924; }
#nav li a:hover ul li {z-index: 1000;}
#nav li a.menu-parent { color : #ffc924;}
#nav li a.menu-current { color : #ffc924;}

#nav ul li.ultop {display:none;}
#nav ul li.ulbot {display:none;}


#nav li ul { /* second-level lists */
	width: 250px; 
	height: auto;
	position : absolute;
	display: none;
	margin:-35px 0 0 -185px;
	background: none;	
	
	
}
#nav ul li ul li.ultop {display:block; height:30px;  background: transparent url(img/ballon1.gif) no-repeat;}
#nav ul li ul li.ulbot {display:block; height:30px; background: transparent url(img/ballon3.gif) no-repeat; margin-top:-2px}
	
#nav li ul li { /* second-level lists */
	width: 250px;
	height:auto; 
	z-index: 1000;		
	background: transparent url(img/ballon2.gif) repeat-y;
	font-size : 18px;
	line-height:16px;		
}

#nav li ul li a { /* second-level lists */
	width: 250px;
	height:auto;	
	background-image: none;
	
}
#nav li ul li a.menu-current {background-image: none;}


#nav li ul li a:hover {background: none; }
#nav li li a span {display : block; margin: 0 30px 0 0; padding: 4px 0 4px 12px;  line-height : 110%; font-weight : normal; border-bottom: 1px solid #999999 ;}
#nav li li a.menu-parent span { font-weight : bold;}
#nav li li a.menu-current span {  font-weight : bold;}


#nav li ul ul { /* third-and-above-level lists */
	display: none;
	margin:-35px 0 0 -210px;
}

	
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	display: none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
	display: block;
}





/* footer */
.footerbox {
	color: #ccc ! important;
	clear: both;	
	width: 100%;
	height:70px;
	text-align: center;
	background: #000 url(img/header-bg.jpg) repeat-x;
	clear:both;
}

.leftmarg {
	float:left;
	margin: -10px 0 0 -100px;
	width: 100px;
	height: 100px;
	
}

/*extras*/

.rightbox .inner {margin: 0 10px 0 0; color:#fff ! #fff;}
.rightbox .inner a { color: #fff ! important;	}
.rightbox .inner h1, .rightbox .inner h2 {color:#fff;}
.rightbox .inner h3, .rightbox .inner h4, .rightbox .inner p { margin: 0; padding: 5px; color:#fff; background: transparent url(img/right-bg.png) ;}


a.toggleMenu { position:absolute; right:10px; top:10px; width:16px; height:32px; background: url(img/menuswitch.png) no-repeat top right; display:none;  }


/* ======================================================================
Smaller Screens */

@media (max-width: 1024px) {
	a.toggleMenu {display:block; z-index:3500;}
	
	#menubox {position: fixed; right:0; z-index:3000; height:100%; width:200px; background-color: #333; overflow:auto; display:none;}
	#nav, #nav ul, #nav li {position: static; background-image: none ! important; height:auto ! important; width : 100%;}
	
	#nav li { font-size : 16px;}
	
		
	
	
	#nav li a span {padding: 20px 0 10px 5px; border-bottom: 1px solid #999999;}	
	#nav ul li.ultop {display:none;}
	#nav ul li.ulbot {display:none;}
	
	
	#nav li ul { /* second-level lists */		
		position : static;
		display: block;
		margin:0 0 0 0;
		background: inherit;	
		
		
	}
	#nav ul li ul li.ultop {display:none; }
	#nav ul li ul li.ulbot {display:none;}
		
	#nav li ul li { /* second-level lists */		
		font-size : inherit;
		line-height:inherit;		
	}
	
	#nav li ul, #nav li ul li, #nav li ul li a { width: 100%; }	
	#nav li ul, #nav li ul ul { display: block; margin:0 0 0 0; }	
	#nav li li a span {  margin: 0 0 0 0; padding: 10px 0 10px 12px; }
	
		
	#nav li:hover ul, #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		display: block;
	}
	
	

}


@media (max-width: 579px) {

	.contentbox, .contentboxwide, .rightbox { 
		 width:90%;
		 float:none;
		 margin: 20px 0 0 5%;
		 padding-top:5px;
	}
	.XXheader .sitetitle { font-size: 40px; line-height:40px; }
	.XXheader .subtitle { font-size: 20px; line-height:20px;}
	.XXheader .description { font-size: 14px; line-height:14px;}
	
	#nav li { 
		font-size : 16px;
	}

	.header { width:90%; height:120px;}

}