/* colors:
		#E3D8E3; booksite pale purple
		#D9F0FD; scrim's pale blue
		#c0d6f9; light blue 
		*/

.sm-simple li{
  border: 1px solid #AAAAAA; /* XXX menu outside border */
  font:bold 15px Trebuchet MS; /* XXX menu font */
  background: #c0d6f9; /* XXX mobile background color */
  -webkit-box-shadow:  0px 20px 25px 0px rgb(191,127,170);
  -moz-box-shadow:  0px 20px 25px 0px rgb(191,127,170);
  box-shadow: 0px 20px 25px 0px rgb(191,127,170); /* XXX lower main shadow */
	/* WAS: 0px 20px 25px -10px (191,127,170),
		inset 0px 0px 20px -10px rgba(191,127,170,.9); */
	/* TRIED:
0px 20px 25px 0px *** is better now
0px 20px 25px -10px
191,127,170
194,78,194 - a bit too dark
179,104,179
	*/
}
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
  padding: 8px; /* XXX mobile menu padding */
  /* make room for the toggle button (sub indicator) */
  padding-right: 18px; /* XXX WAS 58px; */
  color: black; /* XXX mobile text color */
  text-decoration: none;
	/* WAS font-size:20px;
	   WAS padding: 13px 20px;
	   WAS line-height: 17px;
       WAS font:bold 16px Trebuchet MS; /* menu font [submenu at FFF]
	   WAS font-family: "Lucida Sans Unicode", "Lucida Sans" etc ;
	   WAS font-weight: normal;
	   WAS font-size: 20px;
	*/
}
#mobile-menu {
  float: left; /* XXX float so page subtitle positions next to menu MFS */
  width: 33%;
  min-width: 120px; /* Box adjusts a little based on subtitle length */
  max-width: 150px;
}

#mobile-menu a { /* XXX mobile menu font MFS */
  font-size:20px;
}
#mobile-menu li { /* XXX mobile menu MFS */
  margin-left: 10px;
}
#mobile-menu li li { /* XXX mobile menu MFS */
  margin-left: 10px; /* submenu offset */
}
#desktop-menu {
  float: left;  /* Etai said this might be necessary, along with mobile-menu left float */
}
.sm-simple a.current {
  background: #555555; /* XXX no effect */
  color: white; /* XXX no effect */
}
.sm-simple a.disabled {
  color: #cccccc; /* XXX no effect */
}
.sm-simple a span.sub-arrow {  /* XXX mobile + sign and box characteristics */
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: auto;
  right: 4px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  font: bold 14px/34px monospace !important; /* XXX mobile + sign */
  text-align: center;
  text-shadow: none;
  background: rgba(0, 0, 0, 0.10); /* XXX mobile + sign background color */
}
.sm-simple a.highlighted span.sub-arrow:before {
  display: block;
  content: '-'; /* XXX mobile + sign turns to hyphen */
}
.sm-simple li {
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* XXX padding on mobile menu */
}
.sm-simple > li:first-child {
  border-top: 0;
}
.sm-simple ul {
  background: rgba(179, 179, 179, 0.1);  /* XXX: mobile menu background color *//* interacts how with other color setting? */
}
.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
  border-left: 8px solid transparent; /* XXX left border mobile submenu */
  /* WAS: font-size: 20px; /* submenu font size FFF; now set generally */
}
.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
  border-left: 16px solid transparent; /* XXX sub-sub: not relevant */
}
.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
  border-left: 24px solid transparent; /* XXX sub-sub-sub - not relevant */
}
.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
  border-left: 32px solid transparent; /* XXX sub-sub-sub-sub - not relevant */
}
.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
  border-left: 40px solid transparent; /* XXX sub-sub-sub-sub.... */
}

@media (min-width: 768px) {
  /* Switch to desktop layout
  -----------------------------------------------
     Transform mobile menu from collapsible to desktop (navbar+dropdowns)
  -----------------------------------------------*/
  /* start... (it's not recommended editing these rules) */
  .sm-simple ul {
    position: absolute;
  }
  .sm-simple li {
    float: left;
  }
  .sm-simple.sm-rtl li {
    float: right;
  }
  .sm-simple ul li, .sm-simple.sm-rtl ul li, .sm-simple.sm-vertical li {
    float: none;
  }
  .sm-simple a {
    white-space: nowrap;
  }
  .sm-simple ul a, .sm-simple.sm-vertical a {
    white-space: normal;
  }
  .sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
    white-space: nowrap;
  }
  /* ...end */

  .sm-simple li{
    background: #c0d6f9; /* XXX menu background color */
  }
  .sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
  padding: 5px 15px; /* XXX main menu padding */
  color: black; /* XXX menu text color */
  font-size: 18px;
  /* WAS: padding: 11px 20px; */
  }
  .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
  background: blue; /* XXX hover color */
  color: white; /* XXX hover text color */
  }
  .sm-simple a.current {
  background: #555555; /* XXX no effect */
  color: white; /* XXX no effect */
  }
  .sm-simple a.disabled { /* XXX no effect */
  background: white;
  color: #cccccc;
  }
  .sm-simple a.has-submenu { /* XXX padding main menu */
  padding-right: 10px;
  padding-left: 10px;
  }
  .sm-simple a span.sub-arrow { /* XXX + sign main menu */
  height: 0px; /* XXX Get rid of + sign for main menu */
		/* WAS: top:50%; margin-top:-8px; right:20px; width:8px; height:16px;
		font:14px monospace !important; background:transparent; */
  }
  .sm-simple a.highlighted span.sub-arrow:before {
  display: none;
  }
  .sm-simple > li {
  border-top: 0;
  border: 1px solid #AAAAAA; /* XXX menu border */
		/* WAS: border-left: 1px solid #eeeeee; */
  }
  .sm-simple > li:first-child {
  border-left: 0; /* XXX no effect */
  }
  .sm-simple ul {
  border: 1px solid #bbbbbb; /* XXX submenu full outside border */
  background: #E3D8E3; /* XXX submenu background color */
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); /* XXX submenu shadow */
		/* WAS: 0 1 1 0  rgba(0,0,0,0.2); */
  }
  .sm-simple ul a {
  border: 0 !important; /* XXX no effect */
  }
  .sm-simple ul a.has-submenu {
  padding-right: 20px; /* XXX no effect */
  }
  .sm-simple ul a span.sub-arrow {
  right: auto;
  margin-left: -12px; /* XXX no effect */
  }
  .sm-simple ul > li {
  border-left: 0;
  border-top: 2px solid #bbbbbb; /* XXX submenu top border */
  }
  /*.sm-simple ul > li:first-child {
  border-top: 0; /* XXX no effect
  }*/
  .sm-simple span.scroll-up,
  .sm-simple span.scroll-down { /* XXX no effect */
  position: absolute;
  display: none;
  visibility: hidden;
  overflow: hidden;
  background: white;
  height: 20px;
  }
  .sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow { /* XXX no effect */
  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 #555555 transparent;
  }
  .sm-simple span.scroll-down-arrow {
  top: 6px;
  border-style: solid dashed dashed dashed;
  border-color: #555555 transparent transparent transparent;
  }
  .sm-simple.sm-rtl a.has-submenu { /* XXX no effect */
  padding-right: 20px;
  padding-left: 32px;
  }
  .sm-simple.sm-rtl a span.sub-arrow { /* XXX no effect */
  right: auto;
  left: 20px;
  }
  .sm-simple.sm-rtl.sm-vertical a.has-submenu { /* XXX no effect */
  padding: 11px 20px;
  }
  .sm-simple.sm-rtl.sm-vertical a span.sub-arrow {
  right: 20px;
  margin-right: -12px;
  }
  .sm-simple.sm-rtl > li:first-child { /* XXX no effect */
  border-left: 1px solid #eeeeee;
  }
  .sm-simple.sm-rtl > li:last-child {
  border-left: 0;
  }
  .sm-simple.sm-rtl ul a.has-submenu {
  padding: 11px 20px;
  }
  .sm-simple.sm-rtl ul a span.sub-arrow {
  right: 20px;
  margin-right: -12px;
  }
  .sm-simple.sm-vertical a span.sub-arrow {
  right: auto;
  margin-left: -12px;
  }
  .sm-simple.sm-vertical li {
  border-left: 0;
  border-top: 1px solid #eeeeee;
  }
  .sm-simple.sm-vertical > li:first-child {
  border-top: 0;
  }
}