/* accordion to Tabs Style
   See http://codepen.io/joshpalmeri/pen/KbnjC */

#tabbed-nav {
  margin: 24px auto;
  width: 100%;
  font-size: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
}

#tabbed-nav li {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  padding: 0;
  border: 1px solid #ddd;
}

#tabbed-nav li + li {
  border-top: 0 none;
}

#tabbed-nav li:last-child {
  border-bottom: 0 none;
}

#tabbed-nav li a {
  display: block;
  padding: 10px 20px 10px 28px;
  color: #777;
  text-decoration: none;
  position: relative;
}

#tabbed-nav li a:before {
  font-family: FontAwesome;
  content: "\f005";
  font-size: .5em;
  position: absolute;
  top: 11px;
  left: 14px;
}

#tabbed-nav li a:hover, #tabbed-nav li.selected a {
  color: #fff;
  background: #900;
}


@media only screen and (min-width: 560px) {
  #tabbed-nav {
    width: 95%;
  }
}

@media only screen and (min-width: 1022px) {
  #tabbed-nav {
    border-bottom: 1px solid #ccc;
    width: 100%;
    max-width: 1022px;
  }

  #tabbed-nav li {
    border: 0 none;
    display: inline-block;
    width: auto;
  }

  #tabbed-nav li + li {
    border-left: 1px solid #ccc;
  }

  #tabbed-nav:hover li + li {
    border-left: 1px solid #fff;
  }

  #tabbed-nav li.selected,
  #tabbed-nav li.selected + li {
    border-left: 1px solid #fff;
  }

  #tabbed-nav li a {
    display: block;
    padding: 10px 12px;
    color: #777;
    text-decoration: none;
    border-radius: 10px 10px 0 0;
    border: 1px solid #fff;
    border-bottom: 0 none;
    font-size: .9em;
  }

  #tabbed-nav li a:before {
    display: none;
  }

  #tabbed-nav li a:hover,
  #tabbed-nav li.selected a {
    color: #fff;
    background: #900;
    border: 1px solid #800;
    border-bottom: 0 none;
  }
}