body {
	background: #faeed8;
}

.jp-top {
	background-color: #ffe2ba !important;
	border-color: #f78714 !important;  
}

#hr-line {
	position: absolute;
	top: 82px;
	width: 150%;
	color: #f78714;
	background-color: #f78714;
	height: 5px;
	margin: 0;
	margin-left: -50px;
	padding: 0;
	z-index: 1000;
	border: 0;
}

@media (min-width: 1025px) {
	.jp-wrapper {
		background: #faeed8;
		background-image:url("../images/top_back_fortcanning.jpg");
		background-repeat: repeat-x;
		background-position: center top;
	}
}

.jp-mainmenu {
	background: #faeed8;
}

.jp-mainmenu li a {
	color: #b1907b;
}

.jp-mainmenu li ul ul {
	background: #f74c0a;
}

.jp-mainmenu ul ul li:hover, .jp-mainmenu ul ul li.active {
	background-color: #ffa62b !important;
}

@media (min-width: 1025px) {
	.jp-mainmenu {
		border-color: #f78714 !important;    
	}
}

@media (max-width: 1026px) {
	.jp-mainmenu {
		border-color: #f78714 !important;    
	}
	
	#hr-line {
		display: none;
	}
}


.moduletable h3 { /*left menu title*/
	background: #f74c0a;
}

.moduletable ul.menu li a {
	color: #596400;
}

.moduletable ul.menu li a:hover, .moduletable ul.menu li.active, .moduletable ul.menu li a.active, .moduletable ul.menu li.active a, .moduletable ul.menu li a:focus {
	color: #f74c0a;
	background: #ffe2ba;
}

.blog-featured h2 { /*article title*/
	background: #f74c0a;
}

.blog-featured h2 a {
  color: #ffffff !important;
  text-decoration: none;
}

.jp-user-outer {
	background: #ffe2ba;
}

.footer, .footer a {
	color: #6f7009;
}

/**** Mobile Menus ****/

@media screen and (max-width: 800px){

	#siteNav {width: 13%}
	div.logo {width: 15%}
  	#sideTopNav {width: 11%;}
	div.logo-title {width: 70%;}
	div.logo-title h1 {font-size: 24px;}
	div.logo-title h1 a {letter-spacing: 2px; color: #616a2e;}
	.hamburger-menu,.hamburger-menu:after, .hamburger-menu:before {background-color: #616a2e;}
	.x-close:after {color: #616a2e;}
}

@media screen and (max-width: 600px){

	/*div.logo {padding-top: 5px !important;}*/
}

@media screen and (max-width: 480px){

	div.logo {padding-top: 0 !important;}
	div.logo-title h1 {font-size: 18px;}
	div.logo img.logo-img {width: 35px; !important}
	
}

@media screen and (max-width: 380px){

	div.logo-title h1 {font-size: 16px;}
	div.logo img.logo-img {margin-left: 5px !important;}
	
}