.button-group {
  /* Required in order to display the drop-down list below the button. */
  position: relative;
}

#distributionWizard .button-group a.dropdown-toggle > span, 
#contentcontainer .button-group a.dropdown-toggle > span {
  /* Draw the down arrow/triangle using the border. */
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
  display: inline-block;
  vertical-align: middle;
}

#distributionWizard .button-group a.dropdown-toggle.secondary > span,
#contentcontainer .button-group a.dropdown-toggle.secondary > span {
  border-top: 4px solid #4d5860;
}

.button-group > a.dropdown-toggle {
  /* Left border shadow to separate the toggle from the button. */
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.125) inset;
  margin-left: -1px;
  padding-left: 6px;
  padding-right: 6px;
}

/* Overwrite the left border radius. */
.buttonwrapper > a.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Overwrite the right border radius. */
.button-group > input.button,
.buttonwrapper.button-group > button,
.buttonwrapper.button-group > a:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  /* Overwrite the padding because we fix the button padding issue in Firefox. */
  padding-left: 6px;
  padding-right: 6px;
}

/* Firefox button padding fix. This is required in order for the button to have the same height as the drop-down toggle in Firefox. */
.button-group button::-moz-focus-inner,
.button-group input::-moz-focus-inner {
  border: 0 none !important;
  padding: 0 !important;
}

.button-group > .dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  /* Same border radius as the button. */
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  /* Hidden by default. */
  display: none;
  float: none;
  left: 0;
  margin: 2px 0 0;
  min-width: 160px;
  padding: 5px 0;
  position: absolute;
  top: auto;
  z-index: 200;
}

.button-group.align-right > .dropdown-menu {
  left: auto;
  right: 0;
}

.button-group > .dropdown-menu:target,
.button-group > .dropdown-menu.open {
  display: block;
}

/* Overwrite the button styles inside the drop-down list. */
.button-group > .dropdown-menu > input.button,
.button-group > .dropdown-menu > button,
.button-group > .dropdown-menu > a {
  background-color: transparent;
  background-image: none;
  border: 0 none transparent;
  border-radius: 0;
  box-shadow: none;
  color: #222222;
  display: block;
  padding: 3px 6px;
  text-align: left;
  text-shadow: none;
}

/* Force 100% width on the buttons. The anchors behave nicely. */
.button-group > .dropdown-menu > input.button,
.button-group > .dropdown-menu > button {
  min-width: 100%;
}

.button-group > .dropdown-menu > input.button:hover,
.button-group > .dropdown-menu > button:hover,
.button-group > .dropdown-menu > a:hover,
.button-group > .dropdown-menu > input.button:focus,
.button-group > .dropdown-menu > button:focus,
.button-group > .dropdown-menu > a:focus {
  background-color: #eeeeee;
  box-shadow: none;
}