/* The original menu was from here: 
http://cssmenumaker.com/menu/css3-drop-down-menu
I have modified, played with, and commented the css 
*/

/*
  darkGrey = rgb(90, 90, 100);
  darkerGrey = rgb(30, 30, 40);
  grey = rgb(150, 150, 160);
  lightGrey = rgb(215, 215, 215);
  white = rgb(255, 255, 255);

  green = rgb(127, 159, 170);
  blue = rgb(190, 190, 220);
  darkBlue = rgb(30, 30, 60);
  red = rgb(193, 130, 141);
  pink = rgb(225, 204, 206);
*/

/* NOTE TO SELF (NTS): > means directly inside parent. */

/*general*/
#menu-bar,
#menu-bar ul,
#menu-bar li,
#menu-bar a {
  border: none;
  margin: 0;
  padding: 0;
  
}

/*line attributes */
#menu-bar ul li {
  float: left;
  position: relative;
  padding: 0;


}

/* link attributes (without hover)*/
#menu-bar ul li a {
  outline: none;
  display: block;
  padding: 1em 1.25em;
  text-align: center;
  text-decoration: none;
}

/*specifics */
#menu-bar {

  /*fix the menu bar to the top */
  transition: all .2s ease-in;
  display: block;
  position: fixed;
  top: 4em;
  left: 0;
  right: 0;
  
  background: rgb(61, 69, 82);

  z-index: 20;
}

/*the "Categories" */
#menu-bar > ul{
  margin: auto;
  height: auto;
  width: auto;
  /*padding: .25em .5em;*/
}

/*line */
#menu-bar > ul > li {
  display: inline-block;
  position: relative;
  /*height: 2.5em;  *//*set the height here! */
}

@media (min-width: 1330px) {
    /*line */
  #menu-bar > ul > li {
    max-width: 40em;
    margin: 0 auto;
  }
}

#menu-bar > ul > li > a{
  height: 100%;
  width: 100%;
}

/* link of the category (hover)*/
#menu-bar > ul > li:hover > a {
  z-index: 25; /*make the "Category" be on top */
  border-width: .5em;
   
}

/*when you hover on a category, show sub-category*/
#menu-bar ul li.has-sub:hover .sub-menu{
  display: block;
}

/*hover over an a or a li around a, change color*/
#menu-bar a:hover,
#menu-bar li.has-sub:hover > a {
color: rgb(61, 69, 82);
background: rgb(163, 204, 173);

}

/*sub-menu */
#menu-bar .sub-menu {
  height: 7em;
  bottom: -7em;
  width: 100%;
  display: none;
  position: absolute;
  z-index: 21;
  padding: 1em 1em 1.5em 1em;
  background: rgb(61, 69, 82);

}

#menu-bar .sub-menu.of-4{
  height: 10.8em;
  bottom: -10.8em;
  margin: 0;
  padding: 0;
}


#menu-bar .sub-menu li {
  display: block; /*NTS: not inline because vertical list */
  position: relative;
  margin: 0;
  margin-bottom: .5em;
  padding: 0;
  left: 0;
  right: 0;
}

#menu-bar .sub-menu li a {
  outline: none;
  display: block;
  height: 100%;
  text-decoration: none;
  padding: .4em .25em;
  margin: 0;
}
#menu-bar ul {
  width: 100%;
  margin: 0;

  margin-left: 0;
}
 #menu-bar > ul > li> a:after {
    width: 0; 
    height: 0; 
    content: "";
    position: absolute;
    top: 0;
    
    z-index: 23;

    border-top: 1.6em solid transparent;
    border-bottom: 1.6em solid transparent;
    border-left: 1.6em solid rgb(61, 69, 82);
	
	-webkit-transition: border-left-color 0.2s;
	transition: border-left-color 0.2s;
	
  }

  #menu-bar > ul > li:last-of-type > a:after {
  
	
  }

  #menu-bar > ul > li:hover > a:after {
  border-left-color: rgb(163, 204, 173);
  -webkit-transition: border-left-color 0.2s;
  transition: border-left-color 0.2s;

  }

#page-title{
  position: fixed;
  z-index: 10;
  top: 0;
  left:0;
  right:0;
  background-color: rgb(61, 69, 82);
  color: white;
  padding: 0.8em;
  margin: 0;
  font-size: 1.5em;
  text-align: center;
}

#page-title.green{
  color: rgb(163, 204, 173);
}

@media (min-width: 1330px) {
  #page-title{
    position: static;
    width: 100%;
    top: 0;
    padding: 4rem;
    padding-top: 6rem;
	  font-size: 3em;
    text-align: left;
  }

  #menu-bar{
    top: 0;
  }
}

/*if the page is not mobile version */
@media (min-width: 1330px) {
#menu-bar ul {
  width: 100%;

}
 #menu-bar > ul > li {
	background: rgb(163, 204, 173);
 }
  #menu-bar > ul > li> a:after {
    width: 0; 
    height: 0; 
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    z-index: 23;

    border-top: 1.6em solid transparent;
    border-bottom: 1.6em solid transparent;
    border-left: 1.6em solid rgb(61, 69, 82);
	
	-webkit-transition: border-left-color 0.2s;
	transition: border-left-color 0.2s;
  }

  #menu-bar > ul > li:last-of-type > a:after {
    display: none;
  }


  #menu-bar > ul > li:hover > a:after {
  
  border-left-color: rgb(163, 204, 173);
  -webkit-transition: border-left-color 0.2s;
  transition: border-left-color 0.2s;
  }
}

/* end of grid for menu */