@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
.sm-blue {
  background:TransParent; /* This affects the main menu bar and the first dropdown. Does NOT affect second subdropdown */
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 23px;
  text-decoration: none;
  padding-top:3px;
  padding-bottom:0px;
  color:#fefefe; 
  border-radius: 1px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
  padding-top: 1px ; /* affects main menu buttons, on above, below and to left. Something else is putting space on right of word. Also turns hamburger dropdown background transparent? */
  padding-right: 10px ;  /* reminder: "px" must NOT have space between it and value */
  padding-bottom: 5px; 
  padding-left: 10px ;
  /* make room for the toggle button (sub indicator) */
/*  padding-right: 10px;   /* originally 58  */ /*setting to 10 makes button words too close together */
/* background: #3092c0; */
/*  background: #996666; */ 
/*  FF1122  background of menu buttons when hamburger appears. does not affect wide main menu, which are still bluegray */
/*  background-image: linear-gradient(to bottom, #991133, 991133); */
/* background: transparent; */ /* IS ALREADY TRANSPARENT IF NO BACKGROUND SPECIFIED. */
/*  background: white;  */ /* yes! this is the hamburger dropdown. BUT BUMMER -- this also is color of main menu.  */
  /* ORIGINAL WAS COLOR:#cccccc or color: #fff; */
  background:transparent;  /*  IMPORTANT NOTE:  */
                      /*  THIS BACKGROUND IS MAIN MENU AND FIRST LEVEL HAMBURGER DROPDOWN. */
					  /*  DOES NOT AFFECT LATER DROPDOWNS. DOES NOT AFFECT MAIN MENU DROPDOWNS.*/
					  /*  WHEN MAIN MENU IS NOT TRANSPARENT, IT HAS ROUND CORNERS /*
					  /* SUGGESTION: TRY THIS: MAKE THIS 000066, THEN ASSIGN TRANSPARENCY TO MAIN MENU ID VALUES. */
  /* color: #336699 ; */
   color: #010101;   /* was 336699 ... Former note: this is the hamburger dropdown stack, first level only  */)
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 23px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.sm-blue a.current {
  background-color: #00ff00; /* 006802   effect unseen*/
/*  background-image: linear-gradient(to bottom, #991133, #991134);
*/  
   color: pink;   /* #999900  WHY?  ... old note: No, it's not color of text on desktop dropdown. Should not be white if background is white. Does not affect hamburger stack. */
}
.sm-blue a.disabled {
  color: #a1d1e8;  /* a1d1e8 */  /* checkthis fix ??? */
}
.sm-blue a .sub-arrow {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 200px;   /* was auto */
  right: 54px;    /* was 4px  */
  width: 100px;   /* was 34px */
  height: 34px;
  overflow: hidden;
  font: bold 16px/34px monospace !important;
  text-align: center;
  text-shadow: none;
  /* background: white; */ /* NO! this is only behind the more/hide strings
/*  background: rgba(0, 0, 0, 0.1);
*/  border-radius: 4px;
}
.sm-blue a .sub-arrow::before {
  content: 'MORE';
  margin-right:50px;  /* margin and padding were fifty, but on hamburger expansion, it put the longer content too far to right, making it invisible */
                      /* but increasing margin doesn't help.  Decrease?  For now, I just omitted the ellipsis */
  color: #3366cc;
  padding-right:50px;
  /*text-align:left; */
/*  position:absolute;left:100px;
   */
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 13px;  }

  .sm-blue a.highlighted .sub-arrow::before {   /* this inherits font and size from "more" values */
  content: 'HIDE';
  margin-right:50px;
  color: cc66cc;
  letter-spacing: 1px;   /* not necessary, but distinguishes the word a bit vs. "more" */
}
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
  border-radius: 1 1 0 0;
}
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
  border-radius: 0 0 1 1;
}
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
  border-radius: 0;
}
.sm-blue ul {
  /* Narrow window "MORE" dropdown colors: 
  Background works, color does not */
  background: transparent;
  color: black !important ; 
}
.sm-blue ul ul {
  background: rgba(102, 102, 102, 0.1);
}
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
/*  background: transparent; */  /* see below in this set */
/*  background: pink; */ /* background of second and third level hamburger menu only */
  background:#000066;  /* ditto  originally 000066 */
/*  color: #2b82ac; */
  color:#fefefe !important;     /* color of stacked dropdown text on submenus only should be white, assuming blue background */
  font-size: 16px;
  text-shadow: none;
  border-left: 8px solid transparent;
  /* border-top: 3px solid green ; */ /*  NO!  This puts a border inside the white separator. It is not the separator. */
  /* border-bottom: 3px solid red ; */ /*  NO!  This puts a border inside the white separator. It is not the separator. */
  margin-top: -1px ;  /* gets rid of white lines between submenu items  */ 
  }
.sm-blue ul a.current {
/*  background: #006892;
*/  background-image: linear-gradient(to bottom, #991133, #991134);
  background: transparent; /* was #0000fd */
  color: #99999c;  /* 99999c fff effect unseen*/
}
.sm-blue ul a.disabled {
  color: #b3b3b3;
}
.sm-blue ul ul a,
.sm-blue ul ul a:hover,
.sm-blue ul ul a:focus,
.sm-blue ul ul a:active {
  border-left: 16px solid transparent;
}
.sm-blue ul ul ul a,
.sm-blue ul ul ul a:hover,
.sm-blue ul ul ul a:focus,
.sm-blue ul ul ul a:active {
  border-left: 24px solid transparent;
}
.sm-blue ul ul ul ul a,
.sm-blue ul ul ul ul a:hover,
.sm-blue ul ul ul ul a:focus,
.sm-blue ul ul ul ul a:active {
  border-left: 32px solid transparent;
}
.sm-blue ul ul ul ul ul a,
.sm-blue ul ul ul ul ul a:hover,
.sm-blue ul ul ul ul ul a:focus,
.sm-blue ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}
.sm-blue ul li {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sm-blue ul li:first-child {
  border-top: 0;
}

/* @media (min-width: 768px) { */
@media (min-width: 672px) {
  /* Switch to desktop layout
  -----------------------------------------------
     These transform the menu tree from
     collapsible to desktop (navbar + dropdowns)
  -----------------------------------------------*/
  /* start... (it's not recommended editing these rules) */
  .sm-blue ul {
    position: absolute;
    width: 12em;
  }

  .sm-blue li {
    float: left;
  }

  .sm-blue.sm-rtl li {
/*   float: right;
*/	float: left;   /* effect not observed checkthis */
  }

  .sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li {
    float: none;
  }

  .sm-blue a {
    white-space: nowrap;
  }

  .sm-blue ul a, .sm-blue.sm-vertical a {
    white-space: normal;
  }

  .sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a {
    white-space: nowrap;
  }

  /* ...end */
  .sm-blue {
/*    background: #FFFF01;  /*  3092C0  */  /*THIS IS BKGD OF UNUSED ARA ON FIRST MENU. MAKE THIS TRANSPARENT, OR DON'T SPEC BKGD. */
*/
/*    background-image: linear-gradient(to bottom, #991133, 991132);  
*/    border-radius: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
/*    padding: 13px 24px;
    background: #3092c0;
    background-image: linear-gradient(to bottom, #991133, 991132);
*/ /*   color: #EEFFFF;   /* /* fff */ /*  THIS IS THE COLOR OF MAIN MENU BUTTON FONTS !! */
    color:#ddddff;  /* was 336699   */
  }
  .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
/*    background: #2b82ac;
   background-image: linear-gradient(to bottom, #2d89b4, #297ca3);
*/
 }

.sm-blue a:hover {      /* TESTING.  this affects only the main menu.  Turns aqua on hover. Keep this. */
   color:#3399cc;
}

 .sm-blue a.current {
/*   background: #006892;  /* BUTTON COLOR ON HOVER. iF NO BKGD OR IMG SPEC'D, BECOMES TRANSPARENT; reminder, have it change color. Also check radius if used */
    background-image: linear-gradient(to bottom, #991133, #991134);
*/    color: #00ff00;   /* fff  effect unseen*/
  }
  .sm-blue a.disabled {
    background: #3092c0;
    background-image: linear-gradient(to bottom, #991133, 991132);
    color: brown;   /*  #a1d1e8;  */   /*  EFFECT UNSEEN */ 
  }

  .sm-blue a .sub-arrow {      /* apparently this creates the arrow from a cropped border, not using an arrow character content */
                              /* Q: How to put this to the right of the menu item, rather than below it??? check fixthis */
    top: 2px;  /* 22px originally auto This moves main menu caret up and down, does NOT affect dropdown arrows, which stay ok!*/
	margin-top: 5px;  /* originally 0 */
    bottom: 2px;
    left: 90%; /* was 50% */
    margin-left: -5px;
	right: auto;
    width: 0;
    height: 0;
    xbackground-image:url(./images/arrv_white_2.gif);
	border-width: 5px;
    xborder-style: solid dashed dashed dashed;
    border-color: #000065 transparent transparent transparent;  /* was ald1e8 */
    background: transparent;   /* this is the down-caret carrot below menu items that have dropdowns */
    xbackground-size: 50% ;
	border-radius: 0;
    visibility:visible;    /* but this also hides this in hamburger dropdowns */
	}




.sm-blue a .sub-arrow {
	display:block;
	/* background-image:url(./images/arrv_white_2.gif); */
	background-position:right center;
	background-repeat: no-repeat;
	padding-right:8px;
}
.xsm-blue a .sub-arrow  li:hover>a>span{
/*	background-image:url(./images/arrv_white_2.gif); */
}











  .sm-blue a .sub-arrow::before {
    display: none;
  }
  .sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
    border-radius: 8px 0 0 8px;
  }
  .sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a {
    border-radius: 0 8px 8px 0 !important;
  }
  .sm-blue > li {
    border-left: 0px solid #2b82ac;
  }
  .sm-blue > li:first-child {
    border-left: 0;
  }
  .sm-blue ul {
    border: 1px solid #a8a8a8;
    padding: 7px 0;
    background: #000066;   /* was fff.  This is the background on hover, first level dropdown */   
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  }
  .sm-blue ul ul {
    border-radius: 4px !important;
    background: #000066;   /* was fff */
  }
  .sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
    border: 0 !important;
    padding: 2px 23px;   /* padding was 4 23 .... 2px matches sticky padding */
    background:#000066; /* background of dropdown menu and submenu; was transparent */
    color: #fefefe;   /* color of dropdown menu and submenu texts was 3b82ac  */
    border-radius: 0 !important;
  	font-family:"PT Sans Narrow","Arial Narrow",Arial,Helvetica,sans-serif;
	font-size: 13pt ; /* not sure */
	/* font-weight:bold; */
 
 }
  .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
/*    background: #3092c0;
    background-image: linear-gradient(to bottom, #991133, 991132);
*/    background: transparent;   /* should be transparent. This is BG of menu item when hovered.*/ 
 
    color: #00ffff;  /* fff,   or blue on white */   /* THIS IS THE FONT COLOR OF HOVERED MAIN MENU ITEM IN DROPDOWN.  MEMO: Also make this happen in hamburger.*/
  }
  .sm-blue ul a.current {
/*    background: #006892;
    background-image: linear-gradient(to bottom, #991133, #991134);
*/
   background: transparent;  /* test was orange */
     color: #000066;    /*  Was color blue on white. changed to aqua on dark blue to match stickymenu. */)
  }
  .sm-blue ul a.disabled {
    background: #000068;   /* was fff */
    color: #b3b3b3;
  }
  .sm-blue ul a .sub-arrow {
    top: 50%;
    margin-top: -5px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    right: 10px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #a1d1e8;
  }
  .sm-blue ul li {
    border: 0;
  }
  .sm-blue .scroll-up,
  .sm-blue .scroll-down {
    position: absolute;
    display: none;
    visibility: hidden;
    overflow: hidden;
    background: pink;
    height: 20px;
  }
  .sm-blue .scroll-up-arrow,
  .sm-blue .scroll-down-arrow {
    position: absolute;
    top: -2px;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 8px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #2b82ac transparent;
  }
  .sm-blue .scroll-down-arrow {
    top: 6px;
    border-style: solid dashed dashed dashed;
    border-color: #2b82ac transparent transparent transparent;
  }
  .sm-blue.sm-rtl.sm-vertical a .sub-arrow {
    right: auto;
    left: 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #a1d1e8 transparent transparent;
  }
  .sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a {
    border-radius: 0 8px 8px 0;
  }
  .sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a {
    border-radius: 8px 0 0 8px !important;
  }
  .sm-blue.sm-rtl > li:first-child {
    border-left: 1px solid #2b82ac;
  }
  .sm-blue.sm-rtl > li:last-child {
    border-left: 0;
  }
  .sm-blue.sm-rtl ul a .sub-arrow {
    right: auto;
    left: 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #a1d1e8 transparent transparent;
  }
  .sm-blue.sm-vertical {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  .sm-blue.sm-vertical a {
    padding: 9px 23px;
  }
  .sm-blue.sm-vertical a .sub-arrow {
    top: 50%;
    margin-top: -5px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    right: 10px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent #a1d1e8;
  }
  .sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a {
    border-radius: 8px 8px 0 0;
  }
  .sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a {
    border-radius: 0 0 8px 8px !important;
  }
  .sm-blue.sm-vertical > li {
    border-left: 0 !important;
  }
  .sm-blue.sm-vertical ul {
    border-radius: 4px !important;
  }
  .sm-blue.sm-vertical ul a {
    padding: 9px 23px;
  }
}

/*# sourceMappingURL=sm-blue.css.map */