/* NAVIGATION */

#nav {
	position: relative;
}

#nav > a {
		display: none;
		}

#top-nav {
	font-family: "BEBAS", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	list-style: none;
	width: 100%;
	float: left;
	margin-top:101px;
	/*padding:1px 0;*/
}

#top-nav li {
	/*background-color: #ffffff;*/
	/*display:block;*/
	padding:0;
	float:left;
	position:relative;
	width:20%;
	height:100%
}

#top-nav li a:link, #top-nav li a:visited {
	padding:4px 0;
	display:block;
	font-size: 15px;
	text-align:center;
	text-decoration:none;
	color:#262223;
	height:2.7em; /*36px*/
	}
	
#top-nav li:hover a, #top-nav li a:hover, #top-nav li a:active {
	background: url('../support/graphics/notch.png') no-repeat center bottom;
	text-decoration:underline;
	color:#A31F34; /*maroon*/
	/*border-bottom:6px solid #262223;*/
}

.notch {
	
}	

/*this is the dropdown menu*/
#top-nav li ul.top-nav-dropdown { /*this is the container*/ 
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#000000;
	position:relative; 
	top:-2px; /*this positions the block vertically. A 0em puts the child list directly on top the parent list if it is position absolute, position relative, puts it directly under*/
	/*left:-1px; this positions the block horizontally*/
	border-top:none;
}

#top-nav li:hover ul.top-nav-dropdown { /*this displays the dropdown on hover*/ 
	display:block;	
}

#top-nav li ul.top-nav-dropdown li {
	width:100%;
	clear:left;
}

#top-nav li ul.top-nav-dropdown li a:link, #top-nav li ul.top-nav-dropdown li a:visited {
	clear:left;
	background:#262223;
	color:#DBDBDB;
	text-decoration:none;
	padding:4px 0;
	border:none;
	border-bottom:1px solid #424242;
	position:relative;
	height:100%;
	z-index:1000;
}

#top-nav li ul.top-nav-dropdown li:hover a, #top-nav li ul.top-nav-dropdown li a:active, #top-nav li ul.top-nav-dropdown li a:hover {
	clear:left;
	background:#A31F34;
	color:#ffffff;
	padding:4px 0;
	border:none;
	border-bottom:1px solid #424242;
	position:relative;
	z-index:1000;

}

#top-nav .active-page {
	background: url('../support/graphics/notch-red.png') no-repeat center bottom;
	}

#top-nav .active-page .active {
	color:#A31F34; /*maroon*/
	}



/* ===================================================================== */
/* ! Layout for mobile version   */
/* ===================================================================== */


@media only screen and (min-width: 768px) and (max-width: 1024px) {	
	
	/* MAIN CONTENT----------------------------------------*/			
		
	/*ul.block-nav-container li a:link, ul.block-nav-container li a:visited {
		font-size: 93%;
		}
		
	ul.block-nav-container li a, ul.block-nav-container li a:hover, ul.block-nav-container li a:active {
		font-size: 93%;		
		}*/	
	
}


@media only screen and (max-width: 767px) /*  40em 640px */ {
		html {
			font-size: 75%; /* 12 */
			}
			
		.header {
			position: relative;
			height: 100%;
			}

		.header .logo {
			 margin-top: 3.33em; /*40px*/
			}

		/*this creates a transparent box over the background image in the logo div*/
		#box-link { 
				position: absolute; 
				top: 8px; 
				width: 185px; 
				height: 87.75px;
				background-color: transparent; 
				}
				
		/* NAVIGATION */

		#nav {
			position: relative; /*testing*/
			top: auto;
			left: auto;
			}		
		
		#nav > a {
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #A31F34;
					position: relative;
					}
					
		#nav > a:before,
		#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}			
							
		nav > a:link,  
		nav > a:visited {
			padding:4px 0;
			border-bottom:1px solid #424242;
			color: #DBDBDB;
			font-size: small;
			height:100%;
			text-decoration:none;
			text-transform:uppercase;	
		}
	
		/* show/hide menu */			
		#nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type {
			display: block; /*testing*/
			}		
								
		/* first level */
		#nav > #top-nav {
			margin-top:0;
			/*display:none;*/
			background-color: #262223;
			/*height: auto; 
			display: none;
			position: absolute;
			left: 0;
			right: 0;*/	
			}
			
		#nav:target > #top-nav {
			display: block;
			}	
		
		#nav > #top-nav > li {
			padding:0;
			float:none;
			height:100%;
			width:100%;
			}
						
		#top-nav li a:link, #top-nav li a:visited {
			padding:4px 0;
			border-bottom:1px solid #424242;
			color: #DBDBDB;
			display:block;
			font-size: small;
			height:100%
			}
			
		#top-nav li:hover a, #top-nav li a:hover, #top-nav li a:active {
			text-decoration:underline;
			color:#A31F34;
			border-bottom:6px solid #262223;
			}
		
		/* second level --this is the dropdown menu*/
		#top-nav li ul {
			position: static; /*testing*/	
		}
		
		
		#top-nav li ul.top-nav-dropdown { /*this is the container*/ 
			margin:0;
			padding:1px 1px 0;
			list-style:none;
			/*display:none;*/
			background:#000000;
			position:relative; 
			top:0em; /*this positions the block vertically. A 0em puts the child list directly on top the parent list if it is position absolute,position relative, puts it directly under*/
			/*left:-1px; this positions the block horizontally*/
			border-top:none; 
			}/*testing*/
		
		#top-nav li:hover ul.top-nav-dropdown { /*this displays the dropdown on hover*/ 
			display:block;	
			} 
		
		#top-nav li ul.top-nav-dropdown li {
			width:100%;
			clear:left;
			}
		
		#top-nav li ul.top-nav-dropdown li a:link, #top-nav li ul.top-nav-dropdown li a:visited {
			clear:left;
			background:#262223;
			color:#DBDBDB;
			text-decoration:none;
			padding:4px 0;
			border:none;
			border-bottom:1px solid #424242;
			position:relative;
			height:100%;
			z-index:1000;
			} 
		
		#top-nav li ul.top-nav-dropdown li:hover a, #top-nav li ul.top-nav-dropdown li a:active, #top-nav li ul.top-nav-dropdown li a:hover {
			clear:left;
			background:#A31F34;
			color:#ffffff;
			padding:4px 0;
			border:none;
			border-bottom:1px solid #424242;
			position:relative;
			z-index:1000;
			}
		
}