* {
	/* this menu called by FlowSimulations.com  */
	margin: 0px;	 /* margin  outside of border-box  */
	padding: 0px;	 /* padding inside of border-box   */
	outline: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	/* border-box includes content, padding & border = border-box   */
	box-sizing: border-box;
}

/*  body css is called in home-pg_my-style.css, dont need here  */

div.wrapper {
	/* margin: top right bottom left  */
  margin: 100px auto auto -4px;
  width: 300px;
  float: left;
}

nav.vertical {
  display: flex;
  flex-direction:column;
  box-shadow: 0 0 18px rgba(0,0,0,.78);
	border-radius: 14px; /* not working here  */
	overflow: hidden; /* hidden */
  text-align: center;
	margin-right: 8px;
}

  nav.vertical > ul {
	list-style-type: none;  /*  i.e. no underline   */
	margin: 0;  /* outside of border-box  */
	padding: 0;   /* inside of border-box  */
	}

    nav.vertical > ul > li {
      display: block;
    }

      nav.vertical > ul > li > a {
	   /*  most critical css, background not hovered or clicked   */
		 /*  webkit features seem not to be working, is webkit loaded ???  */
        background-color: rgb(157, 34, 60);
        background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image:    -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image:      -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
			/* below is the normal backgd used for Chrome  */
        background-image:         linear-gradient(220deg, rgb(85, 149, 212), rgb(3, 4, 70));
        /* background-image:         linear-gradient(215deg, rgb(004, 51, 98), rgb(157, 34, 60)); */
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
        color: rgb(255,255,255);
        display: block;
        font-size: .80rem;
        font-weight: 500;
        height: 50px;
        letter-spacing: .5rem;
        line-height: 44px;
        text-shadow: 0 1px 1px rgba(0,0,0,.1);
        text-transform: uppercase;
        transition: all .35s ease;
        text-decoration: none;
      }

        nav.vertical > ul > li > a:hover {
		/*  css for hover effect   */
         background-color: rgb(114, 51, 98);
         background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image:    -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image:      -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
		 		/* below is the hover backgd used for Chrome  */
         background-image:         linear-gradient(150deg, rgb(104, 51, 98), rgb(184, 51, 98));
         cursor: pointer;
        }

          nav.vertical > ul > li > div {
            background-color: rgb(255,255,255);
          }

          nav.vertical > ul > li > div > ul {
            list-style-type: none;
          }

            nav.vertical > ul > li > div > ul > li > a {
             background-color: rgb(255,255,255);
             border-bottom: 1px solid rgba(0,0,0,.05);
             color: #333331;  /* dk grey  */
             display: block;
             font-size: 1.1rem;
             padding: 10px 0;
             text-decoration: none;
             transition: all 0.35s linear;
            }

              nav.vertical > ul > li > div > ul > li:hover > a {
                background-color: #1599c4;    /* link box bar color was Lightblue #ADD8E6 */
                color: rgb(255,255,255);      /* white text   */
                padding: 10px 0 10px 50px;
              }

/* don't ask me why but this necess for sidenav not to be full width  */
							.sidenav {
							    width: 230px;
							    padding-top: 40px;
									padding-left: 8px;
							}


/*////////////////////////////////////
*    Hamburger
////////////////////////////////////*/
#menuToggle
{
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle .line
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #cdcdcd;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}


/*////////////////////////////////////
*    Mobile Nav
////////////////////////////////////*/

/* At 750px, change to "mobile view" */
@media all and (max-width: 750px) {

	/* Hide sidebar out of view to the left */
	div.sidenav {
		position: absolute;
		top: 10px;
		left: -250px;
		transition: all .3s;
	}

	/* Add class "reveal" to move into view */
	div.sidenav.reveal {
		left: 0;
	}

	/* Reveal sidebar toggling Button */
	#menuToggle {
		display: block;
	}

	/* Add space at the top of the page for the button */
	body {
		padding-top: 50px;
	}

	#menuToggle .line
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;

	  background: black;
	  border-radius: 3px;
	}
}