/* Executive Director, Inc. (EDI) Responsive Design v.1 (08/13) by Louis Nguyen */

/* Import stylesheets */
@import url('styles.css');
@import url('responsiveMenu.css');
@import url('jpanel.css') only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-width: 320px), only screen and (max-device-width: 320px), only screen and (max-width: 600px), only screen and (max-device-width: 600px), screen and (max-width: 768px);

body {
	margin: 0;
    padding: 0;
	font: normal 100% 'PT Sans Narrow', Arial, sans-serif;
	background: #D8DDE0 url('/images/template/bg-body2.jpg') left top fixed no-repeat;
		-moz-background-size: cover;
			background-size: cover;
			color: #000;
		}
		@media only all and (max-width: 1024px) and (max-height: 768px) { 
			body {	
				-moz-background-size: 1024px 768px;
				background-size: 1024px 768px;
			}
}

a {
	color: #4F81A2;
	text-decoration: underline;
}

a:visited {
	color: #4F81A2;
	text-decoration: underline;
}

a:hover {
	color: #0B59EF;
	text-decoration: none;
}

a:active {
	color: #4F81A2;
	text-decoration: underline;
}
/* === Jpanel === */
.jPanelMenu header.main {
        display: none;
    }
header.hd-main {
	display: table;
	width: 64em;
	margin: 0 auto; padding: 0;
}
header.main {
  display: none;
}
/* Important for background image to display because of jPanel layer */
div.jPanelMenu-panel {
    background: #D8DDE0 url('/images/template/bg-body2.jpg') left top fixed no-repeat;
	-moz-background-size: cover;
		background-size: cover;
		color: #000;
	}
	@media only all and (max-width: 1024px) and (max-height: 768px) { 
		body {	
			-moz-background-size: 1024px 768px;
			background-size: 1024px 768px;
		}
}
#grid {
	display: table;
	width: 64em;
	margin: 0 auto;
	background-color: #FFF;
	box-shadow: 0px -2px 5px #888888;
		-moz-box-shadow: 0px -2px 5px #888888;
		-webkit-box-shadow: 0px -2px 5px #888888;
	}
#util {
	display: table;
	width: 64em;
	margin: 50px auto 0 auto; padding: 0;
}

#utilLog {
	float: left;
	width: 30%;
 	margin: .625em 0 0 0;
	background-color: #FFF;
	border-top-left-radius: 8px;
		-moz-border-top-left-radius: 8px;
	    -webkit-border-top-left-radius: 8px;
	    -khtml-border-top-left-radius: 8px;
    border-top-right-radius: 8px;
	    -moz-border-top-left-radius: 8px;
	    -webkit-border-top-left-radius: 8px;
	    -khtml-border-top-left-radius: 8px;
	box-shadow: 0px 2px 5px #888888;
		-moz-box-shadow: 0px 2px 5px #888888;
		-webkit-box-shadow: 0px 2px 5px #888888;
}

#utilLog ul, #utilNav ul {
	list-style-type: none;
	margin: 0; padding: 0;
}

#utilLog li {
	display: block;
	float: left;
	padding: .3125em .9375em;
}

#utilLog li a {
  	color: #4F81A2;
	text-decoration: none;
}

#utilLog li a:hover {
  	color: #0e59f0;
	text-decoration: none;
}

#utilLog li > a:after {
 	content: " \00bb"; 
}

#utilNav {
  width: 70%;
	display: block;
	float: right;
  text-align: right;
}

#utilNavList {
	display: block;
	float: right;
	padding: .3125em .5em;
}

#utilNavList li {
	display: block;
	float: left;
	padding: .3125em .5em;
}

#utilNavList li a {
	color: #0D1B3E;
	text-decoration: none;
}

#utilNavList li a:hover {
	color: #4F81A2;
	text-decoration: #4F81A2;
}

#utilSocial {
	float: right;
}

#utilSocial img {
	border: 0;
}

#utilSocial > div {
	float: left;
	margin: 0 .1875em;
}

#head {
	width: 100%;
	margin: 0;
	display: table;
	background: #FFF url('/images/template/bg-header.jpg') no-repeat;
	position: relative;
	z-index: 1;
}

#head img {
	display: block;
	float: left;
	margin: 1.25em 0 .5em 1.875em;
	border: 0;
}

#headUtil {
	display: block;
	float: right;
	font: normal 1em 'PT Sans Narrow', Arial, sans-serif;
}

#headUtil ul {
	margin: 1.25em 1.5625em 0 0; 
  padding: 0;
	list-style-type: none;
}

#headUtil li {margin: 0; padding: 0;}

#headUtil li a:after {
 	content: " \00bb"; 
}

#headUtil li a {
	color: #4F81A2;
	text-decoration: none;
}

#headUtil li a:hover {
	color: #0B59EF;
	text-decoration: none;
}

nav.nav {
  display: table;
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #D8DDE0;
	border-bottom: 1px solid #D8DDE0;
	/* background: #FFF url('/images/template/bg-nav.gif') repeat-x; */
  background: -webkit-linear-gradient(#FFF,#E0E4EA); /*Safari 5.1-6*/
  background: -o-linear-gradient(#FFF,#E0E4EA); /*Opera 11.1-12*/
  background: -moz-linear-gradient(#FFF,#E0E4EA); /*Fx 3.6-15*/
  background: linear-gradient(#FFF,#E0E4EA); /*Standard*/
}

#navWrap {
  float: left;
  margin: 0 auto;
  z-index: 99999;
}

#navWrap ul {
  list-style-type: none;
  margin: 0; 
}

#carouselWrap {
	width: 64em;
	margin: 0 auto;
}
#carouselWrap img {
	border: 0;
}
#carouselWrap2 {
	width: 345px;
	margin: 0 auto;
}
#owl-demo2 .owl-pagination {
	display: none;
}
#content {
	display: table;
	width: 100%;
	margin:  0 auto;
	background-color:#ECECEC;
}
#ltCol {
	float: left;
	width: 74.61%;
  	box-sizing: border-box;
	min-height: 1050px;
	padding: .3125em 1.25em 1.5em 1.25em;
	font: normal .9em/1.4em Arial, sans-serif;
  	background:#FFF;
  	border-right: 1px solid #CFCFCF;
}

/* #ltCol img {display: block; border: 0;} */

#breadcrumbs {
display: block;
margin: 1.25em 0 -.3125em 0;
color: #959595;
font: normal .9em 'PT Sans Narrow', Arial, sans-serif;
}

#breadcrumbs li a {
 color: #959595;
 text-decoration: none;
}

#breadcrumbs a:after {
 	content: "\00a0 \00bb ";
  margin: 0;
}

#rtCol {
  width: 25%;
  box-sizing: border-box;
}

#rtCol li a:before {
 	content: "\00bb \00a0";
  margin: 0;
}

#rtCol ul ul {
	list-style-type: none;
	margin: 0 0 0 .9375em;
	padding: 0;
	font: normal .9em 'PT Sans Narrow', Arial, sans-serif;
}

#rtCol li ul li {
	padding: .1875em 0;
}

#rtCol li ul li a:before {
	content: "";
	margin: 0;
}

#rtCol li ul li a {
	color: #555555;
	text-decoration: none;
}

#rtCol li ul li a:hover {
	color: #1D65EE;
	text-decoration: none;
}

#breadcrumbs li a:hover {
	color: #1D65EE;
	text-decoration: none;
}

#breadcrumbs a:active {
	color: #959595;
 text-decoration: none;
}

#row-1, #row-2 {
	width: 100%;
	display: table;
  	margin: 0 0 1.5em 0;
}

#row-3 {
	padding: 19px 15px 10px;
}
#row-4{
	padding: 0px 15px 10px;
}
#row-5 {
	padding: 0px 15px 0px;
}

#col-1, #col-2, #col-1a, #col-2a {
	display: block;
	width: 47.7%;
	float: left;
}

#col-1{
	margin: 0 .9375em 0 0;
}

#col-2{
	margin: 0 0 0 .9375em;
}
#col-1a {
  width: 50%;
  float: left;
  padding: 0 15px 0 0;
  box-sizing: border-box;
}
#col-2a {
  width: 50%;
  float: right;
  padding: 0 15px;
  box-sizing: border-box;
}
#rtCol {
	display: table;
	float: right;
	width: 25.39%; /* 260px */
}

#rtCol a {
	font: normal 1em 'PT Sans Narrow', Arial, sans-serif;
	color: #002D62;
	text-decoration: underline;
}

#rtCol a:hover {
	color: #5081A2;
	text-decoration: none;
}

#rtCol ul {
list-style-type: none;
margin: 5px 10px; padding: .625em .3125em;
}

#rtCol li {
	padding: .1875em 0;
}

#rtCol li a:before {
 	content: "\00bb \00a0";
  margin: 0;
}

#rtCol li a {
	color: #1D65EE;
	text-decoration: none;
}

#rtCol li a:hover {
	color: #909090;
	text-decoration: none;
}

#rtCol img {
	border: 0;
}

#cse-search-box2 {
	margin: 10px auto 20px auto;
}

footer {
	width: 100%;
	text-align: center;
	padding: .3125em 0;
	background-color: #8A8A8A;
	color: #FFF;
}

footer a {
	color: #FFF;
	text-decoration: underline;
}

footer a:hover {
 	color: #C5EBF6;
}

footer a:visited, footer a:active {
	color: #C5EBF6;
	text-decoration: underline;
}

.honcode {
  display: table;
  margin: 0 auto;
}
.hn-1 {
  float: left;
  padding: 0 15px;
}
.hn-2 {
  float: right;
  text-align: left;
  padding: 20px;
  vertical-align: middle;
}

div.imageMap img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: 100%;
    }

/* Back to Top */
.back-to-top {position: fixed; bottom: 7.2em; right: 70px; text-decoration: none; color: #000; background-color: #072D5E; font-size: 12px; display: none; border-radius: 5px; padding: 5px;
	opacity: 0.5;           /* fx, safari, opera */
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */}
	
/* LANDSCAPE FOR TABLETS, NETBOOKS AND LAPTOPS */
@media only screen and (min-width: 1024px), (min-device-width: 1024px) {

  .jPanelMenu header.main {
        display: none;
    }

}

/* Paula's tweaks  */
@media screen and (max-width: 1030px) and (min-width: 769px) {
	.jPanelMenu header.main {
        display: none;
    }
	header.hd-main {
		width: 100%;
	}

	#util {
		width: 100%;
	}

	#grid {
		width: 100%; 
		display: block;
	}

	#ltCol {
		width: 75%;
	}

	#rtCol {
		width: 25%;
	}
	
	#sec-image img {
		width: 100%;
		max-width: 260px;
	}
	
	#col-1, #col-2, #col-1a, #col-2a {
		width: 47%;
	}

	#col-1 img, #col-2 img, #col-1a img, #col-2a img {
		width: 100%; 
		max-width: 341px;
	}

	#row-3 img {
		width: 100%; 
		max-width: 230px;
	}
	
	#row-3 img.iconImage { 
		width: 25px;
		height: 25px; 
	}
}


@media screen and (max-width: 1030px) {
.jPanelMenu header.main {
        display: none;
    }
	#carouselWrap {
		width: 100%;
		max-width: 1024px;
	}

	#owl-demo .item img {
    	display: block;
    	width: 100%;
    	height: auto;
	}
}


/* PORTRAITS FOR TABLETS, NETBOOKS AND LAPTOPS */
@media screen and (max-width: 768px) {

  /* jPanel */
    .jPanelMenu header.main {display: block; 
         background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }

    header.mainHead {display: none;}
    /* .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #0D1C41;} */
    .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #E0E4EA;}

    #mobileSecTitle {display: block; width: 100%; text-align: center; margin: 0; padding: .625em 0; color: #FFF; font: normal 1em Arial, sans-serif;
           background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    #jpanelNav-hd-logo img{padding: 8px;}

    /* Template */
    header.hd-main {display: none;}
    #util {display: none;}
	#grid {width: 100%; display: block;}
  
	#row-1, #row-2 {width: 100%; display: table;}

	#col-1, #col-1a {display: block; width: 48%; float: left; margin: 10px 0;}
	#col-2, #col-2a {display: block; width: 48%; float: right; margin: 10px 0;}

	#col-1 img, #col-2 img, col-1a img, #col-2a img {display: block; width: 100%;}
	#col-1 ul, #col-2 ul, col-1a ul, #col-2a ul {margin: 10px 0 0 15px;}
	#ltCol {width: 100%; float: none;}
	#rtCol {display: none;}
	
	div.imageMap img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: 100%;
    }
	
	
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {

  /* jPanel */
    .jPanelMenu header.main {display: block; 
         background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    /* .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #0D1C41;} */
    .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #E0E4EA;}

    #mobileSecTitle {display: block; width: 100%; text-align: center; margin: 0; padding: .625em 0; color: #FFF; font: normal 1em Arial, sans-serif;
          background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    #jpanelNav-hd-logo img{padding: 8px;}

    /* Template */
    header.hd-main {display: none;}
    #util {display: none;}
	#grid {width: 100%; display: block;}
  
	#row-1, #row-2 {width: 100%; display: table;}

	#col-1, #col-1a {display: block; width: 48%; float: left; margin: 10px 0;}
	#col-2, #col-2a {display: block; width: 48%; float: right; margin: 10px 0;}
	
	#col-1a, #col-2a {padding: 0;}

	#col-1 img, #col-2 img, #col-1a img, #col-2a img {display: block; width: 100%;}
	#col-1 ul, #col-2 ul, #col-1a ul, #col-2a ul{margin: 10px 0 0 15px;}
	#ltCol {width: 100%; float: none;}
	#rtCol {display: none;}
	
	div.imageMap img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: 100%;
    }
	
	#carouselWrap {
	display: none;
	}

	#owl-demo .item img {
   	display: none;
	}
}

/* MOBILE LANDSCAPE */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

  /* jPanel */
    .jPanelMenu header.main {display: block; 
        background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    header.mainHead {display: none;}
    /* .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #0D1C41;} */
    .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #E0E4EA;}

    #mobileSecTitle {display: block; width: 100%; text-align: center; margin: 0; padding: .625em 0; color: #FFF; font: normal 1em Arial, sans-serif;
           background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    #jpanelNav-hd-logo img{padding: 8px;}

    /* Template */
    header.hd-main {display: none;}
    #util {display: none;}
	#grid {width: 100%; display: block;}
  
	#row-1, #row-2 {width: 100%; display: block;}

	#col-1, #col-2, #col-1a, #col-2a {display: block; width: 100%; float: none; margin: 20px 0;}
	#col-1 ul, #col-2 ul, #col-1a ul, #col-2a ul {margin: 10px 0 0 15px;}
	#col-1 img, #col-2 img, #col-1a img, #col-2a img {display: block; width: 100%;}
	#ltCol {width: 100%; float: none;}
	#rtCol {display: none;}
	
	div.imageMap img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: 100%;
    }
	.honcode {
	  text-align: center;
	}
	.hn-1 {
	float: none;
	text-align: center;
	}
	.hn-2 {
	float: none;
	text-align: center;
	}

	
}

/* MOBILE PORTRAIT*/
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {

  /* jPanel */
    .jPanelMenu header.main {display: block; 
         background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    header.mainHead {display: none;}

    /* .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #0D1C41;} */
    .jpanelNav, .jpanelNav {display: none; z-index:-99999;background: #E0E4EA;}

    #mobileSecTitle {display: block; width: 100%; text-align: center; margin: 0; padding: .625em 0; color: #FFF; font: normal 1em Arial, sans-serif;
          background: -webkit-linear-gradient(#8B9ABB, #0D1C41); /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(#8B9ABB, #0D1C41); /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(#8B9ABB, #0D1C41); /* For Firefox 3.6 to 15 */
          background: linear-gradient(#8B9ABB, #0D1C41); /* Standard syntax */
    }
    
    #jpanelNav-hd-logo img{padding: 8px;}

    /* Template */
    header.hd-main {display: none;}
	#util {display: none;}
	#grid {width: 100%; display: block;}
  
	#row-1, #row-2 {width: 100%; display: block;}

	#col-1, #col-2, #col-1a, #col-2a {display: block; width: 100%; float: none; margin: 20px 0;}
	#col-1 ul, #col-2 ul, #col-1a ul, #col-2a ul {margin: 10px 0 0 15px;}
	#col-1 img, #col-2 img, #col-1a img, #col-2a img {display: block; width: 100%;}
	#ltCol {width: 100%; float: none;}
	#rtCol {display: none;}
	
	div.imageMap img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: 100%;
    }
}