/*
	This is an ORB style navigation.

	* It starts off with all the links in the footer.
	* Without JS the menu buttons are just links to the footer
	* With JS, the links are moved into the navigation bar and the menu becomes a button.
*/
/* Navigation - structure */
#a11y-navigation {
	background:#00645d;
	color:#fff;
}

.an-branding-container {
	min-height:69px;
	padding-top:16px;
	box-sizing:border-box;
}

#a11y-navigation .an-brand {
	font-weight:700;
	font-size:1.2rem;
	width:50%;
	display:block;
	float:left;
}

.an-brand-inner {
	display:block;
}

@media (min-width: 750px) {
	#a11y-navigation .an-brand {
		font-size:35px;
		display:inline;
		width:auto;
	}
	
	.an-brand-inner {
		display:inline;
	}
}

.an-links-container {
	min-height:46px;
	border-top:1px solid #fff;
	padding:0;
	margin:0;
}

/* Navigation - Branding */
#a11y-navigation a {
	color:#fff;
	text-decoration:none;
	font-family:ReithSans,Helvetica,Arial,freesans,sans-serif;
}

#a11y-navigation .an-branding-container a:hover,#a11y-navigation .an-branding-container a:focus {
	opacity:.8;
	text-decoration:underline;
	outline:0;
}

/* Navigation - Menu Control */
.an-menu-control {
	font-size:1rem;
	display:inline-block;
	line-height:1.375rem;
	padding:12px;
	border:1px solid #fff;
	background:transparent;
	color:#fff;
	display:none;
	margin-top:-.4rem;
}

.an-menu-control:hover {
	opacity:.8;
}

.an-menu-control {
	float:right;
}

/* Navigation - list, bar context */
#a11y-navigation .an-item {
	display:inline-block;
	border-right:1px solid #fff;
}

#a11y-navigation .an-item:first-child {
	border-left:1px solid #fff;
}

#a11y-navigation .an-link {
	font-size:1rem;
	display:inline-block;
	line-height:1.375rem;
	padding:12px 12px 8px;
	border-bottom:4px solid transparent;
	margin:0;
	outline:0;
	font-weight:700;
}

#a11y-navigation .an-link:hover,#a11y-navigation .an-link:focus {
	border-bottom-color:#fff;
}

#a11y-navigation .an-item ul {
	display:none;
}

#a11y-navigation .a11y-nav-menu-list {
	list-style:none;
	padding:0;
	margin:0;
}

/* Navigation - Sub Bar Context */
.an-guides-nav {
	background:#404040;
	margin:0;
	border-top:1px solid #fff;
}

#a11y-navigation .an-guides-nav .an-item {
	border:none;
}

/* Navigation - list, footer / menu context */
#a11y-nav-list,#a11y-navigation-pop {
	-webkit-font-smoothing:antialiased;
	background:#121212;
	color:#fff;
	padding:2rem 0;
	display:block;
	clear:both;
}

#a11y-nav-list h3 {
	font-weight:100;
}

.a11y-nav-menu-list,.a11y-nav-men-listu-list ul {
	list-style:none;
	padding:0;
	font-size:1rem;
}

.a11y-nav-menu-list .an-link {
	display:block;
	color:#fff;
	text-decoration:none;
	padding-bottom:12px;
	border-bottom:1px solid #5a5a5a;
	margin-bottom:12px;
}

.a11y-nav-menu-list .an-link:hover,.a11y-nav-menu-list .an-link:focus {
	color:#fff;
	text-decoration:underline;
}

.a11y-nav-menu-list ul .an-link {
	padding-left:18px;
}

@media (max-width: 750px) {
	/* Reveal Menu, hide submenis */
	.an-menu-control {
		display:block;
	}
	
	.an-links-container {
		display:none;
	}
	
	.an-links-container a {
		width:30%;
	}
}

/* Sub navigation in the sidebar */
#a11y-subnav {
	display:block;
	margin:0;
	padding:0;
	list-style:none;
	list-style-position:inside;
}

.a11y-subnav-item {
	border:1px solid #CECECE;
	display:block;
	min-height:40px;
	padding:8px;
	box-sizing:border-box;
	margin:0;
	margin-top: -1px;

}

.a11y-subnav-group {
	padding:0;
}

.a11y-subnav-group .a11y-subnav-item {
	padding-left:20px;
}

#a11y-subnav a {
	color:#404040;
	text-decoration:none;
	outline:none;
}

#a11y-subnav a:hover,#a11y-subnav a:focus {
	color:#009;
	text-decoration:underline;
	outline:none;
}

.a11y-subnav-control:after { 
	content:" ";
	float: right;
	background: url('/accessibility/forproducts/assets/images/down.svg');
	display: block;
	height: 1rem;
	width: 1rem;
	background-size: contain;
	transform: rotate(0);
	transition: 0.2s ease;
}

.a11y-subnav-control[aria-expanded=true] {
	background: #EDEDED;
}

.a11y-subnav-control[aria-expanded=true]:after { 
	transform: rotate(180deg);
	
}

@media (prefers-reduced-motion) {
  .a11y-subnav-control {
    animation: none;
  }
}