﻿/** Navigations */

@media (min-width: 768px) {
	.menu-1 {
			line-height: 0;
			text-align: center;
			display: block;
		}
		
		ul#navmenu-1 {
			display: flex;
    		/*justify-content: space-between;*/
			width:100%;
		}
				
		.menu-2, .menu-3, .menu-4 {
			line-height: 0;
			text-align: center;
			display: inline-table;
		}
		
		/* nav cssmenu-3 */
		nav#cssmenu-3 {
			margin-top: 1px;
			margin: 0 auto;
    		text-align: center;
    		/*width: 100%;	*/	
    	}
		
		
		.sm-clean2 a, .sm-clean2 a:hover, .sm-clean2 a:focus, .sm-clean2 a:active, .sm-clean2 a.highlighted {
			padding: 12px 12px;
		}
		
		.sm-clean2 ul a, .sm-clean2 ul a:hover, .sm-clean2 ul a:focus, .sm-clean2 ul a:active, .sm-clean2 ul a.highlighted {
			padding: 12px 12px;
		}
				
		/* Override sm-blue */
		.sm-blue {
  		-webkit-border-radius: 5px;
  		-moz-border-radius: 5px;
  		-ms-border-radius: 5px;
  		-o-border-radius: 5px;
  		/* border-radius: 5px; */
	}	

		.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
			padding:3px 20px;
		}
			

	/* Override sm-clean */
	.sm-clean {
 		background: #eeeeee;
  		-webkit-border-radius: 5px;
  		-moz-border-radius: 5px;
  		-ms-border-radius: 5px;
  		-o-border-radius: 5px;
  		/* border-radius: 5px; */
  		padding:0px;
	}		


	/* Override theme sm-clean-2 for menu-2*/
	
	#navmenu-2 li.menuTab {
	
		padding: 10px 10px !important;
		/* margin-right:10px;  	changed dynamically in cssmenu.js DoStyleMenu2ElementWidth () */
		/*width:31%;  			changed dynamically in cssmenu.js DoStyleMenu2ElementWidth () */
	}
		
	#navmenu-2.menu-2.sm.sm-clean2 {
 		background: none;
 		padding:0px;
 		width:100%;
	}
	
	.menu-2 ul {
		z-index: 1;
	}
	
	.sm-clean2 a span.sub-arrow {
	display:none !important;
	}
		
	.sm-clean li.quickLinkButtonContentType, .sm-clean li.quickLinkButtonContent {
		list-style: none;
		list-style-type:none;
		list-style-image: none;
		list-style-position: outside;
		overflow:hidden
	}
	
	nav.menu-2 {
		width:80%;
		margin: 0 auto;
	}
	
	ul.menu-2 {
		width:100%;
	}
	
	/* Override theme sm-neutral for menu-4*/
	.sm-neutral {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		padding:0px;
	}	

	.sm-neutral li a.selected {
		background: #161616;
	}
	
	 /* fix li width */
	.sm-neutral ul li {
		width:100%;
	}

	nav.menu-4 {
		width: 100%;
	}
	
	nav#cssmenu-4 ul.subPageMenuWrapper.mobile-visible {
		display:none !important;
	}
	
	.sm-neutral a:hover {
		color:#000000;
	}
	
	/* Hide arrow has-submenu sub-arrow*/
	nav#cssmenu-4 li a.has-submenu .sub-arrow{
		display:none !important;
	}
	
		
	/* Fix selected articles 3 articles in a row */
	.selectedActivity, .newsRollupArticle {
    	margin: 0px 15px 0px 15px;
	}
	
	.subPageMenuItem {
		width:auto;
	}
	
	.calendarReadMore {
		width:auto;
	}
	
	
	/* hide the button in desktop view */
	  .main-menu-btn, .main-menu-btn-1 {
	    position: absolute;
	    top: -99999px;
	  }
	  /* always show the menu in desktop view */
	  #main-menu-state:not(:checked) ~ #cssmenu-3 {
	    display: block;
	  }
	  
	  #main-menu-state-4:not(:checked) ~ #cssmenu-4 {
	    display: block;
	  }
	  
	   #main-menu-state-2:not(:checked) ~ #cssmenu-2 {
	    display: block;
	  }



	/* Initially Hide menuPaneWrapper */
	#menuPanesWrapper {
		display:none;
	}
	

}


/* Main menu */
.main-menu-btn {
  position: relative;
  display: inline-block;
  width: 0px; /*28px; */
  height: 0px; /*28px;*/
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-left:5px;
}
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox offscreen (so it stays visible to screen readers) */
#main-menu-state {
  position: absolute;
  top: -99999px;
}
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #cssmenu-3 {
  display: none;
}
#main-menu-state:checked ~ #cssmenu-3 {
  display: block;
}


/* Main menu menu-1 */
.main-menu-btn-1 {
  position: relative;
  display: inline-block;
  width: auto; /*28px; */
  height: 0px; /*28px;*/
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-left:5px;
  font-weight:bold;
	font-size:13pt;
	
}
/* hamburger icon */
.main-menu-btn-icon-1, .main-menu-btn-icon-1:before, .main-menu-btn-icon-1:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon-1:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon-1:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */
#main-menu-state-1:checked ~ .main-menu-btn-1 .main-menu-btn-icon-1 {
  height: 0;
  background: transparent;
}
#main-menu-state-1:checked ~ .main-menu-btn-1 .main-menu-btn-icon-1:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state-1:checked ~ .main-menu-btn-1 .main-menu-btn-icon-1:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox offscreen (so it stays visible to screen readers) */
#main-menu-state-1 {
  position: absolute;
  top: -99999px;
}
/* hide the menu in mobile view */
#main-menu-state-1:not(:checked) ~ #cssmenu-1 {
  display: none;
}
#main-menu-state-1:checked ~ #cssmenu-1 {
  display: block;
}



/** Main menu menu-4 */
.main-menu-btn-4 {
  position: relative;
  display: inline-block;
  width: 0px; /*28px; */
   height: 0px; /* 28px; */
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-left:5px;
}
/* hamburger icon */
.main-menu-btn-icon-4, .main-menu-btn-icon-clone-4, .main-menu-btn-icon-4:before, .main-menu-btn-icon-4:after, .main-menu-btn-icon-clone-4:before, .main-menu-btn-icon-clone-4:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.main-menu-btn-icon-4:before, .main-menu-btn-icon-clone-4:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon-4:after, .main-menu-btn-icon-clone-4:after {
  content: '';
  top: 7px;
  left: 0;
}

/* x icon */
#main-menu-state-4:checked ~ .main-menu-btn-4 .main-menu-btn-icon-4 {
  height: 0;
  background: transparent;
}

#main-menu-state-4:checked ~ .main-menu-btn-4 .main-menu-btn-icon-4:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#main-menu-state-4:checked ~ .main-menu-btn-icon-clone-4:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#main-menu-state-4:checked ~ .main-menu-btn-4 .main-menu-btn-icon-4:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#main-menu-state-4:checked ~ .main-menu-btn-icon-clone-4:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* hide menu state checkbox offscreen (so it stays visible to screen readers) */
#main-menu-state-4 {
  position: absolute;
  top: -99999px;
}
/* hide the menu in mobile view */
#main-menu-state-4:not(:checked) ~ #cssmenu-4 {
  display: none;
}
#main-menu-state-4:checked ~ #cssmenu4 {
  display: block;
}


/** Main menu menu-2 */
.main-menu-btn-2 {
  position: relative;
  display: inline-block;
  width: auto; /* 28px; */
  height: 0px; /* 28px; */
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-left:5px;
}
/* hamburger icon */
.main-menu-btn-icon-2, .main-menu-btn-icon-2:before, .main-menu-btn-icon-2:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon-2:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon-2:after {
  content: '';
  top: 7px;
  left: 0;
}

/* x icon */
#main-menu-state-2:checked ~ .main-menu-btn-2 .main-menu-btn-icon-2 {
  height: 0;
  background: transparent;
}
#main-menu-state-2:checked ~ .main-menu-btn-2 .main-menu-btn-icon-2:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state-2:checked ~ .main-menu-btn-2 .main-menu-btn-icon-2:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox offscreen (so it stays visible to screen readers) */
#main-menu-state-2 {
  position: absolute;
  top: -99999px;
}
/* hide the menu in mobile view */
#main-menu-state-2:not(:checked) ~ #cssmenu-2 {
  display: none;
}
#main-menu-state-2:checked ~ #cssmenu-2 {
  display: block;
}

/** Subsite Hamburger Menu from http://callmenick.com/_development/css-hamburger-menu-icons/ */
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 14px;
  left: 2px;
  right: 2px;
  height: 4px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -10px;
}

.c-hamburger span::after {
  bottom: -10px;
}

#subsiteMenuContainer{
		width:10% !important;
	  	max-height: 34px;
	  	height:34px;
	  	 display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
          content: "";

	}

#subsiteMenuContainer {
		/*background-color: #28aadc;*/
		background-color: transparent;
	}
	
	#subsiteMenuContainer span {
		-webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;	
	}
	
	#subsiteMenuContainer span::before,
#subsiteMenuContainer span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

#subsiteMenuContainer span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

#subsiteMenuContainer span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
#subsiteMenuContainer.is-active {
  background-color: transparent; /*#166888;*/
}

#subsiteMenuContainer.is-active span {
  background: none;
}

#subsiteMenuContainer.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

#subsiteMenuContainer.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#subsiteMenuContainer.is-active span::before,
#subsiteMenuContainer.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}


/* Hamburger menu black */
/* Hamburger black base */

.c-hamburger-black {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

.c-hamburger-black:focus {
  outline: none;
}

.c-hamburger-black span {
  display: block;
  position: absolute;
  top: 14px;
  left: 2px;
  right: 2px;
  height: 4px;
  background: black;
}

.c-hamburger-black span::before,
.c-hamburger-black span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000000;
  content: "";
}

.c-hamburger-black span::before {
  top: -10px;
}

.c-hamburger-black span::after {
  bottom: -10px;
}


.c-hamburger--htx{
		width:10%;
	  	max-height: 34px;
	  	height:34px;
	  	 display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
          content: "";

	}

.c-hamburger--htx {
		/*background-color: #28aadc;*/
		background-color: transparent;
	}
	
	.c-hamburger--htx span {
		-webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;	
	}
	
	.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: transparent; /*#166888;*/
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}




@media screen and (max-width: 768px) {

	.main-menu-btn, .main-menu-btn-1, .main-menu-btn-2, .main-menu-btn-4 {
	 	height: 28px !important;
	 	clear:both;
	}
	
	/* Override sm-neutral menu-4*/
	nav.menu-4 {
		width: 100%;
	}
	
	.pageMenu {
		width: 100%;
	}
			
	tr.calendarTableHeadRow th:last-child, .calendarTableImageCell {
		width:15px;
	}
	
	.calendarTableHeadRow th, .calendarTableRow td {
		padding: 4px;
	}
	
	.calendarTableImageCell > img {
		width:14px;
	}

	/* Fix selected articles 3 articles in a row */
	.selectedActivity{
    	margin: 0px 10px 0px 10px; /*0px 10px 0px 10px;*/
	}

	
}

.njff-menuPanesWrapper {
	position: absolute;
    top: 60px;
    width: 100%;
}

.njff-layoutLogo {
	max-width: 100%;
    left: 0;
    position: absolute;
   /* top: 15px;
    padding-left: 25px;*/
}

.njff-layoutTopBar {
	height:100px;
	margin-bottom:50px;
}

.njff-layoutTopMenu {
	width:70%;
}