body {
	/*
	background:#000 url("../images/wj-welcome-background.jpg") no-repeat top;
	*/
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Titillium Web', trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

.clear { clear: both;}

a.redlink {color: #c53239; font-weight: bold; text-decoration: none;}
a:visited.redlink {color: #c53239; font-weight: bold; text-decoration: none;}
a:hover.redlink {color: #000; font-weight: bold; text-decoration: none;}

a.bluelink {color: #342592; font-weight: bold; text-decoration: none;}
a:visited.bluelink {color: #342592; font-weight: bold; text-decoration: none;}
a:hover.bluelink {color: #000; font-weight: bold; text-decoration: none;}

h1.pagetitle {color: #4d6a78; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 28px;}
h1.lefttitle {color: #4d6a78; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 24px;}

@media screen and (min-width: 0px) and (max-width: 1200px) {

	.blackbar {width: 100%; background-color: #000; min-height: 45px; height: 45px;}
	.sectionpic {background: #fff url("images/sectionpic-1.jpg") no-repeat top; height: 230px; min-height: 230px;}

	@media screen and (min-width: 1024px) and (max-width: 1200px) {
	
		.menu-mobile {display: none;}
		
		.wrapper {width: 1024px; margin: 0px auto; position: relative; top: -275px;}
		.header {width: 100%; height: 140px; min-height: 140px;}
		.header-right {float: right;  margin: 0px;}
	
		.header-logo {float: left; width: 146px; margin: 0px 0px 0px 0px;}
		.header-nav {margin: 0px 0px 0px 170px;}
	
		.header-slogan {color: #999; padding: 10px 0px 0px 70px; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 18px; }
		
		.sitetitle {font-size: 34px; color: #000; margin: 30px 0px 0px 70px;}
		
		.headernav {color: #000; font-size: 13px; margin: 20px 0px 0px 0px;}
		.headernav a {color: #000; text-decoration: none; margin: 0px 5px 0px 0px;}
		.headernav a:visited {color: #000; text-decoration: none;}
		.headernav a:hover {color: #900; text-decoration: none;}
		
		.topnav {margin: 7px 0px 0px 0px;}
		
		.content-container {position: relative; top: 160px; width: 100%;}
	
		.content-right {float: right; width: 76%; margin: 0px; padding: 0px 20px 0px 0px;}
		.content-left {width: 24%; margin: 0px 0px 0px 0px; padding: 35px 0px 0px 20px; min-width: 280px;}
		.content {line-height: 28px;}
		
		.leftnav-mobile {display: none;}
		.leftnav {width: 160px;}
		.leftnav ul {list-style-type: none; margin: 0px; padding: 0px;}
		.leftnav ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold;}
		.leftnav ul li a {color: #c53239; text-decoration: none;}
		.leftnav ul li a:visited {color: #c53239; text-decoration: none;}
		.leftnav ul li a:hover {color: #342592; text-decoration: none;}
		
		.footer-wrapper {background-color: #000; width: 100%;}
		.footer-container {width:1024px; min-height: 250px; height: 250px; margin: 0px auto;}
		
		.footerlogo {float: right; margin: 0px 0px 0px 0px;}
		.copyright {color: #333; position: relative; top: -50px; font-size: 14px; margin-left: 20px;}
		.footernav {padding: 20px 0px 0px 20px;}
		.footernav a {margin-right: 10px;}
		.footerinfo {color: #999; font-size: 14px; margin: 20px 0px 50px 20px;}
		
	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		.topnav {display: none;}
		.social {display: none;}
		.rightnav {display: none;}
		
		.menu-mobile {position: absolute; margin: 103px 0px 0px 0px; z-index: 5000; top: 13px;}
		
		.headernav {color: #000; font-size: 13px; margin: 0px 0px 0px 0px; padding: 15px 30px 0px 0px; width: 80%;}
		
		.content-container {position: relative; top: 160px; width: 100%;}
		
		.sitetitle {font-size: 34px; color: #000; margin: 30px 0px 0px 70px;}
	
		.content-right {float: right; width: 100%; margin: 0px; padding: 0px 0px 0px 0px;}
		.content-left {display: none;}
		.content {line-height: 28px; width: 90%; margin-left: 30px;}
		
		h1.pagetitle {color: #4d6a78; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 28px; margin-left: 30px;}
		
		.leftnav {display: none;}
		.leftnav ul {list-style-type: none; margin: 0px; padding: 0px;}
		.leftnav ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold;}
		.leftnav ul li a {color: #c53239; text-decoration: none;}
		.leftnav ul li a:visited {color: #c53239; text-decoration: none;}
		.leftnav ul li a:hover {color: #342592; text-decoration: none;}
		
		.footer-wrapper {background-color: #000; width: 100%;}
		.footer-container {width: 100%; min-height: 250px; height: 250px; margin: 0px auto;}
	
		.footerlogo {float: right; margin: 0px 0px 0px 20px;}
		.copyright {color: #333; position: relative; top: -50px; margin-left: 20px; font-size: 14px;}
		.footernav {padding: 20px 0px 0px 20px;}
		.footernav a {margin-right: 10px;}
		.footerinfo {color: #999; font-size: 14px; margin: 20px 0px 50px 20px;}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
			
			.wrapper {width: 100%; margin: 0px auto; position: relative; top: -275px;}
			.header {width: 100%; height: 140px; min-height: 140px;}
			.header-right {float: right; width: 300px; margin: 0px;}
	
			.header-logo {float: left; width: 146px; margin: 0px 0px 0px 0px;}
			.header-nav {margin: 0px 0px 0px 170px;}
	
			.header-slogan {color: #999; padding: 10px 0px 0px 70px; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 18px; }
		
			.headernav {color: #000; font-size: 13px; margin: 20px 0px 0px 0px;}
			.headernav a {color: #000; text-decoration: none; margin: 0px 5px 0px 0px;}
			.headernav a:visited {color: #000; text-decoration: none;}
			.headernav a:hover {color: #900; text-decoration: none;}
			
			.leftnav {display: none;}
			.leftnav-mobile {width: 90%; margin-left: 30px;}
			.leftnav-mobile ul {list-style-type: none; margin: 0px; padding: 0px;}
			.leftnav-mobile ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold;}
			.leftnav-mobile ul li a {color: #c53239; text-decoration: none;}
			.leftnav-mobile ul li a:visited {color: #c53239; text-decoration: none;}
			.leftnav-mobile ul li a:hover {color: #342592; text-decoration: none;}
			
		}
		
		@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		
			.wrapper {width: 100%; margin: 0px auto; position: relative; top: -275px;}
			.header {width: 100%; height: 140px; min-height: 140px;}
			.header-right {float: right; width: 300px; margin: 0px;}
	
			.header-logo {float: left; width: 146px; margin: 0px 0px 0px 0px;}
			.header-nav {margin: 0px 0px 0px 170px;}
	
			.header-slogan {color: #999; padding: 10px 0px 0px 0px; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 18px; }
		
			.headernav {color: #000; font-size: 13px; margin: 20px 0px 0px 0px;}
			.headernav a {color: #000; text-decoration: none; margin: 0px 5px 0px 0px;}
			.headernav a:visited {color: #000; text-decoration: none;}
			.headernav a:hover {color: #900; text-decoration: none;}
			
			.leftnav {display: none;}
			.leftnav-mobile {width: 90%; margin-left: 30px;}
			.leftnav-mobile ul {list-style-type: none; margin: 0px; padding: 0px;}
			.leftnav-mobile ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold;}
			.leftnav-mobile ul li a {color: #c53239; text-decoration: none;}
			.leftnav-mobile ul li a:visited {color: #c53239; text-decoration: none;}
			.leftnav-mobile ul li a:hover {color: #342592; text-decoration: none;}
		
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		.topnav {display: none;}
		.social {display: none;}
		.rightnav {display: none;}
		
		.menu-mobile {position: absolute; margin: 103px 0px 0px 0px; z-index: 5000; top: 13px;}
		
		.headernav {color: #000; font-size: 13px; margin: 0px 0px 0px 0px; padding: 15px 30px 0px 0px; width: 80%;}
		
		.content-container {position: relative; top: 160px; width: 100%;}
	
		.content-right {float: right; width: 100%; margin: 0px; padding: 0px 0px 0px 0px;}
		.content-left {display: none;}
		.content {line-height: 28px; width: 90%; margin-left: 30px;}
		
		h1.pagetitle {color: #4d6a78; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 28px; margin-left: 30px;}
		
		.wrapper {width: 100%; margin: 0px auto; position: relative; top: -275px;}
		.header {width: 100%; height: 140px; min-height: 140px;}
		.header-right {float: right; width: 300px; margin: 0px;}

		.header-logo {float: left; width: 146px; margin: 0px 0px 0px 0px;}
		.header-nav {margin: 0px 0px 0px 170px;}

		.header-slogan {color: #999; padding: 10px 0px 0px 40px; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 14px; }
	
		.sitetitle {font-size: 28px; color: #000; margin: 40px 0px 0px 40px;}
	
		.headernav {color: #000; font-size: 13px; margin: 20px 0px 0px 0px;}
		.headernav a {color: #000; text-decoration: none; margin: 0px 5px 0px 0px;}
		.headernav a:visited {color: #000; text-decoration: none;}
		.headernav a:hover {color: #900; text-decoration: none;}
		
		.leftnav {display: none;}
		.leftnav-mobile {width: 90%; margin-left: 30px;}
		.leftnav-mobile ul {list-style-type: none; margin: 0px; padding: 0px;}
		.leftnav-mobile ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold;}
		.leftnav-mobile ul li a {color: #c53239; text-decoration: none;}
		.leftnav-mobile ul li a:visited {color: #c53239; text-decoration: none;}
		.leftnav-mobile ul li a:hover {color: #342592; text-decoration: none;}
		
		.footer-wrapper {background-color: #000; width: 100%;}
		.footer-container {width: 100%; min-height: 250px; height: 250px; margin: 0px auto;}
	
		.footerlogo {float: right; margin: 0px 0px 0px 20px;}
		.copyright {color: #333; position: relative; top: -100px; margin-left: 20px; font-size: 14px;}
		.footernav {padding: 0px 0px 0px 20px;}
		.footernav a {margin-right: 10px;}
		.footerinfo {color: #999; font-size: 14px; margin: 20px 0px 50px 20px;}
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		.topnav {display: none;}
		.social {display: none;}
		.rightnav {display: none;}
		
		.menu-mobile {position: absolute; margin: 103px 0px 0px 0px; z-index: 5000; top: 13px;}
		
		.headernav {display: none;}
		.header-slogan {display: none;}
		
		.content-container {position: relative; top: 160px; width: 100%;}
	
		.content-right {float: right; width: 100%; margin: 0px; padding: 0px 0px 0px 0px;}
		.content-left {display: none;}
		.content {line-height: 28px; width: 90%; margin-left: 30px;}
		
		.sitetitle {display: none; font-size: 24px; color: #000; padding: 50px 0px 0px 40px;}
		
		h1.pagetitle {color: #4d6a78; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 28px; margin-left: 30px;}
		
		.wrapper {width: 100%; margin: 0px auto; position: relative; top: -275px;}
		.header {width: 100%; height: 140px; min-height: 140px;}
		.header-right {float: right; width: 300px; margin: 0px;}

		.header-logo {float: left; width: 146px; margin: 0px 0px 0px 0px;}
		.header-nav {margin: 0px 0px 0px 170px;}

		.header-slogan {color: #999; padding: 10px 0px 0px 0px; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 14px; }
	
		.headernav {color: #000; font-size: 13px; margin: 20px 0px 0px 0px;}
		.headernav a {color: #000; text-decoration: none; margin: 0px 5px 0px 0px;}
		.headernav a:visited {color: #000; text-decoration: none;}
		.headernav a:hover {color: #900; text-decoration: none;}
		
		.leftnav {display: none;}
		.leftnav-mobile {width: 90%; margin-left: 30px;}
		.leftnav-mobile ul {list-style-type: none; margin: 0px; padding: 0px;}
		.leftnav-mobile ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold;}
		.leftnav-mobile ul li a {color: #c53239; text-decoration: none;}
		.leftnav-mobile ul li a:visited {color: #c53239; text-decoration: none;}
		.leftnav-mobile ul li a:hover {color: #342592; text-decoration: none;}
		
		.footer-wrapper {background-color: #000; width: 100%;}
		.footer-container {width: 100%; min-height: 250px; margin: 0px auto;}
	
		.footerlogo {display: none;}
		.copyright {color: #333; position: relative; top: -100px; margin-left: 20px; font-size: 14px;}
		.footernav {padding: 0px 0px 0px 20px;}
		.footernav a {margin-right: 10px;}
		.footerinfo {color: #999; font-size: 14px; margin: 20px 0px 50px 20px;}
		
	}
	
}

@media screen and (min-width: 1201px) {

	.menu-mobile {display: none;}

	.blackbar {width: 100%; background-color: #000; min-height: 45px; height: 45px;}
	.sectionpic {background: #fff url("images/sectionpic-1.jpg") no-repeat top; height: 230px; min-height: 230px;}
	
	.wrapper {width: 1200px; margin: 0px auto; position: relative; top: -275px;}
	.header {width: 100%; height: 140px; min-height: 140px;}
	.header-right {float: right;  margin: 0px;}
	
	.header-logo {float: left; width: 146px; margin: 0px 0px 0px 0px;}
	.header-nav {margin: 0px 0px 0px 170px;}
	
	.header-slogan {color: #999; padding: 10px 0px 0px 70px; font-family: 'ArcherPro Semibold', times new roman, times, serif; font-size: 18px; }
	.sitetitle {font-size: 34px; color: #000; margin: 30px 0px 0px 70px;}
	.headernav {color: #000; font-size: 13px; margin: 20px 0px 0px 0px;}
	.headernav a {color: #000; text-decoration: none; margin: 0px 5px 0px 0px;}
	.headernav a:visited {color: #000; text-decoration: none;}
	.headernav a:hover {color: #900; text-decoration: none;}
	
	.topnav {margin: 7px 0px 0px 0px;}
	
	.rightnav {width: 300px; min-height: 95px; height: 95px; background-image: url("images/header-rightnav-bg.png"); background-repeat: no-repeat;}
	
	.content-container {position: relative; top: 160px; width: 100%;}
	
	.content-right {float: right; width: 76%; margin: 0px; padding: 0px;}
	.content-left {width: 24%; margin: 0px 0px 0px 0px; padding: 35px 0px 0px 0px; min-width: 280px;}
	.content {line-height: 28px;}
	
	.leftnav-mobile {display: none;}
	.leftnav {width: 240px;}
	.leftnav ul {list-style-type: none; margin: 0px; padding: 0px;}
	.leftnav ul li {border-bottom: 2px dotted #999; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; font-weight: bold; font-size: 16px;}
	.leftnav ul li a {color: #c53239; text-decoration: none;}
	.leftnav ul li a:visited {color: #c53239; text-decoration: none;}
	.leftnav ul li a:hover {color: #342592; text-decoration: none;}
	
	.footer-wrapper {background-color: #000; width: 100%;}
	.footer-container {width:1200px; min-height: 250px; height: 250px; margin: 0px auto;}
	
	.footerlogo {float: right; margin: 0px 0px 0px 0px;}
	.copyright {color: #333; position: relative; top: -50px; font-size: 14px;}
	.footernav {padding: 20px 0px 0px 0px;}
	.footernav a {margin-right: 10px;}
	.footerinfo {color: #999; font-size: 14px; margin: 20px 0px 50px 0px;}

}