/* 
 Menu styles                                                                              
*/ 

/* CSS Version:  V2_2412011355

When the CSS is updated, change the color code for the StyleVersionMark style to the next acceptable color +
AND update the suffix on the version number of each page that uses the stylesheet to the indicator for the syle color code */

	.MenuStyleVersionMark {
		height: 8px;
  		width: 8px;
		background-color: Khaki;
		border-radius: 50%;
		display: inline-block;
		}


/* Allowable Style Version Color Codes
	see https://www.w3schools.com/cssref/css_colors.asp
	Sienna - S
	SteelBlue - B
	Khaki - Y
*/

	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #111111;
		color: #FFFFFF;
		height: 30px;
		font-size: 10pt;
		} 

	.menu {
      display: flex;
      flex-direction: row;
      list-style-type: none;
      line-height: 30px;
      margin: 0;
		/*Padding: 0; */
		padding-right: 15px;
		padding-left: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
      }

    .menuhref {
		position: relative;
		left: 0px;
      text-align: center;
		padding-right: 10px;
		padding-left: 10px;
      text-decoration: none;
		display: block;
      float: left;
 		border-left:#848484 2px solid;
    }


    a.menuhref:link, a.menuhref:visited {
      /*position: relative;
      left: 0px;*/
      background-color: #111111;
      color: #FFFFFF;
      /*text-align: center;
      text-decoration: none;
      display: inline-block;
      float: left;
      border-right:#848484 2px solid;*/
      }
    a.menuhref:hover {
      background-color: #D1D1D1;
      color: #222222;
      /*text-align: center;
      text-decoration: none;
      display: inline-block;
      position: relative;
      float: left;*/
      }
		
	.bodymenu {
      display: flex;
      flex-direction: row;
      list-style-type: none;
      /* line-height: 30px; */ 
      margin: 0;
		Padding: 0;
		/* border-left: red 1px solid; */
      }
	
	.bodymenuhref { 
		position: relative;
		left: 0px;
      /*text-align: center; */
		padding-right: 10px;
		padding-left: 10px;
      text-decoration: none;
		display: block;
		width: 210px;
      float: left;
 		border:#333333 5px solid; 
		}
    a.bodymenuhref:link, a.bodymenuhref:visited {
      background-color: transparent;
      color: #FFFFFF;
      }
    a.bodymenuhref:hover {
      background-color: #D1D1D1;
      color: #222222;
      }
	
 
    /* Apply this style to all children of .menu  */
    .menu > li {
      /*margin: 0 1rem;*/
      overflow: hidden;
      }
		
/*
Sub menu styles ------------------------------------------------------
*/

.topmenu:hover > ul 
	{
	display:block;
	position:absolute;
	margin-top:30px;
	list-style-type: none;
	}
	
.bodytopmenu:hover > ul 
	{
	display:block;
	position:absolute;
	margin-top:50px; /* distance of submenu below the top menu */
	list-style-type: none;
	}
	
/* Level 2 menus */
.sub_Menu 
	{
	display: none;
	}

.sub_Menu li 
	{
	background-color: #808080;
	line-height: 17px;
	border-bottom:#686868 1px solid;
	border-right:#686868 1px solid;
	border-left:#848484 2px solid; 
	width:120px;
	padding-top: 5px;
	padding-bottom:5px;
	}
.sub_Menu li a 
	{
	color: #000000;
	text-decoration:none;
	}
.sub_Menu li a:hover 
	{
	color: #8fea66;
	}

.bodysub_Menu 
	{
	display: none;
	}

.bodysub_Menu li 
	{
	background-color: #808080; 
	line-height: 20px;
	border-bottom:#404040 1px solid;
	border-right:#404040 1px solid;
	border-left:#848484 2px solid; 
	width: 175px;
	padding-top: 5px;
	padding-bottom:5px;
	}
.bodysub_Menu li a 
	{
	color: #003399;
	text-decoration: none;
	}
.bodysub_Menu li a:hover 
	{
	color: #8fea66;
	}


/*
----------------------------------------------------------------------
*/
     
    /*Container for hamburger menu button  */
    .menu-button-container {
      display: none;
      height: 100%;
      width: 30px;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      }

    /*don't display the menu-toggle checkbox  */
    #menu-toggle {
      display: none;
      }

    /*  Creating the hamburger menu button if an icon is not present
        in the menu-button-container (creates 3 stacked horizontal lines)*/
    .menu-button,
    .menu-button::before,
    .menu-button::after {
      display: block;
      background-color: #FFFFFF;
      position: absolute;
      height: 4px;
      width: 32px;
      border-radius: 3px;
      }

    .menu-button::before {
      content: '';
      margin-top: -8px;
      }

    .menu-button::after {
      content: '';
      margin-top: 8px;
      }

    /*  Adding Functionality to   
        move the top and bottom bars or lines of the icon 
    	  to the position of the middle line and 
        hide the middle line, then create a cross
    */
    #menu-toggle:checked + .menu-button-container .menu-button::before {
      margin-top: 0px;
      transform: rotate(45deg);
      }

    #menu-toggle:checked + .menu-button-container .menu-button {
      background: rgba(255, 255, 255, 0);
      }

    #menu-toggle:checked + .menu-button-container .menu-button::after {
      margin-top: 0px;
      /*  transforms the hamburger icon into a cross  */
      transform: rotate(-45deg);
      }

 
 
 /* Make the navbar responsive by CSS Media Queries */
    @media (max-width: 700px) {
      .menu-button-container {
      display: flex;
      }
		
		.menu {
			position: absolute;
			top: 0;
			/* Top margin must be adjusted to ensure hamburger menu can be closed */
			margin-top: 200px;
			/*margin-left: 35%;
			left: 0;*/
			flex-direction: column;
			/* width: 170px; */
			width: 150px;
			justify-content: center;
			align-items: center;
			}
			
		.bodymenu {
			/* position: absolute; */
			top: 0;
			flex-direction: column;
			justify-content: center;
			align-items: left; 
			font-size: 10pt;
			}
			
		.bodymenuhref { 
			width: 110px;
			}
			
		#menu-toggle ~ .menu li {
			height: 0;
			margin: 0;
			padding: 0;
			border: 0;
			}

		#menu-toggle:checked ~ .menu li {
			/*lines separating menu "Li" in hamburger pull-down menu */
			border-top: .2px solid #111111;
			border-right: 2px solid #111111;
			border-left: 2px solid #111111;
			box-shadow: 5px 5px 2px black;
			height: 2.25em;
			padding-left: 0.75em;  
			padding-bottom: 0.3em;
			padding-top: 0.15em;
			}

      #menu-toggle:checked ~ .menu li:last-child {
			border-bottom: 2px solid #111111;
			/*box-shadow: 5px 5px 2px #111111;*/
			}

		.menu > li {
			display: flex;
			justify-content: center;
			margin: 0;
			padding: 0;
			width: 100%;
			/*background for hamburger pull-down menu (surrounds link blocks)*/
			background-color: #333333;
			}

		.menuhref {
			/*position: relative;
			left: 0px;*/
      	text-align: left;
			padding-right: 0px;
			padding-left: 0px;
			width: 100%;
      	/*text-decoration: none;
      	display: inline-block;
      	float: left;*/
      	border-left:none;
	 	}
			
      a.menuhref:link, a.menuhref:visited {
			border-right: none;
			background-color: #333333;
		}

		a.menuhref:hover {
      	background-color: #D1D1D1;
      	color: #222222;
      }

	/* submenus */

		.topmenu:hover > ul {
			display:block;
			position:absolute;
			margin-top: 10px;
			/* Left indent should be approx 35px less than the 
	   		width of .menu in this query  - this prevents high 
				level menu items from obscuring lower level items */
			/* left:135px; */
			left:115px;
		}

		.bodytopmenu:hover > ul {
			display:block;
			position:absolute;
			margin-top: 10px;
			/* Left indent should be set to move submenus to right of menu*/
			left:110px;
		}
		.bodysub_Menu li 
			{
			line-height: 17px;
			width: 150px;
			}


/* end submenus */	

/*  Dropdown menu styles for Mountain Conditions 

table.Linkbar, .Linkbar td {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	vertical-align: middle;
	Margin-left: 0px;
} 
		
.dropbtn {
	background-color: #222222;
	color: #4284FF;
	padding: 12px;
	font-size: 12pt;
	border-style: none;
	min-width: 200px;
}

.dropdown {
	position: relative;
	left: 0px;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	font-size: 12pt;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	background-color: lightgrey;
	min-width: 200px;
	z-index: 1;
}

.dropdown-content a {
	color: #4284FF;
	font-size: 12pt;
	padding: 5px 12px;
	text-decoration: none;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	Border-color: darkgrey;
	display: block;
}

.dropdown-content a:hover {color: #FDBA12; background-color: grey;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #646464;}

/*  End dropdown menu styles for Mountain Conditions */

 }