/*
 * Navigataur: A pure CSS responsive navigation menu
 * Author: Mike King (@micjamking)
 */

/*
 	Notes:
 
 	- Media queries should be edited in both style sections if you require 
	  a different breakpoint for your navigation.
	  
	- Toggle class & menu anchor tags in list items have box-sizing: border-box 
	  style property to allow padding inside the container without conflicting with layout.	

*/




#abt-main-menu { float:right; margin:18px 0 0 0; position:relative;}
	#abt-main-menu li { float:left; }
		#abt-main-menu li a,
		#abt-main-menu li a:visited { display:block; background:none; text-transform:uppercase; color:#B3B3B3; font-weight:700; font-size:1.1em; padding:15px; -webkit-transition: color 0.15s ease-out, background 0.15s ease-out; -moz-transition: color 0.15s ease-out, background 0.15s ease-out; -o-transition: color 0.15s ease-out, background 0.15s ease-out; transition: color 0.15s ease-out, background 0.15s ease-out; }
		#abt-main-menu li a:hover,
		#abt-main-menu li a:active { background:url(../image/pawprint.gif) center center no-repeat; color:#999999; }
				
		#abt-main-menu li ul { position:absolute; margin:0; z-index:10; max-height:0px; overflow:hidden; -webkit-transition: max-height 0.5s ease-out; -moz-transition: max-height 0.5s ease-out; -o-transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out; -webkit-box-shadow: 0px 15px 15px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 15px 15px 0px rgba(50, 50, 50, 0.5); -o-box-shadow: 0px 15px 15px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 15px 15px 0px rgba(50, 50, 50, 0.5); }
			#abt-main-menu li ul li { float:none;}
				#abt-main-menu li ul li a,
				#abt-main-menu li ul li a:visited { background-image:none; background:#ffffff; padding:10px 15px;}
				#abt-main-menu li ul li a:hover,
				#abt-main-menu li ul li a:active {}

	#abt-main-menu li:hover > ul { max-height:999px; }
	#abt-main-menu li:hover a,
	#abt-main-menu li:hover a:visited { background:url(../image/pawprint.gif) no-repeat center center; color:#999999; }
		#abt-main-menu li:hover ul a,
		#abt-main-menu li:hover ul a:visited { background:none #ffffff; color:#B3B3B3; }
		#abt-main-menu li:hover ul li a:hover,
		#abt-main-menu li:hover ul li a:active { background:#E6E6E6; background-image:none; color:#999999; }



#toggle, .toggle { display: none; }

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 768px) {
	
	.toggle { z-index:2; display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
		.toggle:after { content: attr(data-open); display: block; margin: 0; position:fixed; top:10px; right:10px; padding: 10px 20px; background: #30c5cc; -webkit-border-radius: 2px; border-radius: 2px; text-align: center; color: #FFFFFF; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
			.toggle:hover:after{ background: #6ed6db; }
	#toggle:checked + nav .toggle:after { content: attr(data-close); }
	
	
#abt-main-menu { float:none; margin:0; display:none; opacity:0; margin-bottom:20px; }
	#abt-main-menu li { float:none; text-align:center; border-bottom:1px solid #30c5cc; }
		#abt-main-menu li a,
		#abt-main-menu li a:visited { padding:10px; }
		#abt-main-menu li a:hover,
		#abt-main-menu li a:active {  }
				
		#abt-main-menu li ul { position:relative; box-shadow:none; }
			#abt-main-menu li ul li { border-bottom-color: #c7ebec; }
			#abt-main-menu li ul li:last-child { border-bottom:none; }
				#abt-main-menu li ul li a,
				#abt-main-menu li ul li a:visited { padding:5px; font-size:.9em; }
				#abt-main-menu li ul li a:hover,
				#abt-main-menu li ul li a:active {}

	#abt-main-menu li:hover > ul { }
	#abt-main-menu li:hover a,
	#abt-main-menu li:hover a:visited { }
		#abt-main-menu li:hover ul a,
		#abt-main-menu li:hover ul a:visited { }
		#abt-main-menu li:hover ul li a:hover,
		#abt-main-menu li:hover ul li a:active { }	
	
	#toggle:checked + nav #abt-main-menu { display: block; opacity: 1; }

}