/* Import "PT Sans Narrow" font from Google fonts */
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);

/* Menu box */

.sm-onestop {
  background:#dc1535; /* Old browsers */
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 1px 1px rgba(0,0,0,0.3);
}

.sm-onestop-vertical {
  -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.sm-onestop ul {
  border:1px solid #dc1535;
  padding:7px 0;
  background:#b0102a;
  -moz-border-radius:0 0 4px 4px;
  -webkit-border-radius:0 0 4px 4px;
  border-radius:0 0 4px 4px;
  -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
  box-shadow:0 5px 12px rgba(0,0,0,0.3);
}

/* for vertical main menu subs and 2+ level horizontal main menu subs round all corners */
.sm-onestop-vertical ul, .sm-onestop ul ul {
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}


/* Menu items */

.sm-onestop a {
  padding:13px 24px;
  color:#fff;
  font-size:18px;
  line-height:23px;
  font-family:"PT Sans Narrow","Arial Narrow",Arial,Helvetica,sans-serif;
  font-weight:bold;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
}

.sm-onestop a:hover, .sm-onestop a:focus, .sm-onestop a:active, .sm-onestop a.highlighted {
  background:#b0102a;
  color:#fff;
}

.sm-onestop-vertical a {
  padding:9px 40px 8px 23px;
  background:#fff; /* Old browsers */
}

.sm-onestop ul a {
  padding:9px 40px 8px 23px;
  background:transparent;
  color:#fff;
  font-size:16px;
  text-shadow:none;
}

.sm-onestop ul a:hover, .sm-onestop ul a:focus, .sm-onestop ul a:active, .sm-onestop ul a.highlighted {
  background:#dc1535; /* Old browsers */
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
}

/* current items - add the class manually to some item or check the "markCurrentItem" script option */
.sm-onestop a.current, .sm-onestop a.current:hover, .sm-onestop a.current:focus, .sm-onestop a.current:active,
.sm-onestop ul a.current, .sm-onestop ul a.current:hover, .sm-onestop ul a.current:focus, .sm-onestop ul a.current:active {
  background:#fff;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
}

/* round the left corners of the first item for horizontal main menu */
.sm-onestop > li:first-child > a {
  -moz-border-radius:8px 0 0 8px;
  -webkit-border-radius:8px 0 0 8px;
  border-radius:8px 0 0 8px;
}

/* round the corners of the first and last items for vertical main menu */
.sm-onestop-vertical > li:first-child > a {
  -moz-border-radius:8px 8px 0 0;
  -webkit-border-radius:8px 8px 0 0;
  border-radius:8px 8px 0 0;
}

.sm-onestop-vertical > li:last-child > a {
  -moz-border-radius:0 0 8px 8px;
  -webkit-border-radius:0 0 8px 8px;
  border-radius:0 0 8px 8px;
}

.sm-onestop a.has-submenu {
}

/* Sub menu indicators */

.sm-onestop a span.sub-arrow {
  position:absolute;
  bottom:2px;
  left:50%;
  margin-left:-5px;
  /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
  width:0;
  height:0;
  overflow:hidden;
  border-width:5px; /* tweak size of the arrow */
  border-style:solid dashed dashed dashed;
  border-color:#fff transparent transparent transparent;
}

.sm-onestop-vertical a span.sub-arrow, .sm-onestop ul a span.sub-arrow {
  bottom:auto;
  top:50%;
  margin-top:-5px;
  right:15px;
  left:auto;
  margin-left:0;
  border-style:dashed dashed dashed solid;
  border-color:transparent transparent transparent #fff;
}


/* Items separators */

.sm-onestop li {
  border-left: 1px solid #b0102a;
}

.sm-onestop li:first-child, .sm-onestop-vertical li, .sm-onestop ul li {
  border-left:0;
}


/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package */

.sm-onestop span.scroll-up, .sm-onestop span.scroll-down {
  position:absolute;
  display:none;
  visibility:hidden;
  overflow:hidden;
  background:#ffffff;
  height:20px;
  /* width and position will be automatically set by the script */
}

.sm-onestop span.scroll-up-arrow, .sm-onestop span.scroll-down-arrow {
  position:absolute;
  top:-2px;
  left:50%;
  margin-left:-8px;
  /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
  width:0;
  height:0;
  overflow:hidden;
  border-width:8px; /* tweak size of the arrow */
  border-style:dashed dashed solid dashed;
  border-color:transparent transparent #b0102a transparent;
}

.sm-onestop span.scroll-down-arrow {
  top:6px;
  border-style:solid dashed dashed dashed;
  border-color:#247eab transparent transparent transparent;
}