/* button
------------------------- */


.button {
  display: inline-block;
 color: #ffd700; font-size: 12px; padding: 5px 15px; font-weight: bold;
  margin-bottom: 10px;
  background-color: #666666;
  background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.1) );
  border: 1px solid #CCC;
  border-radius: 5px;
  cursor: pointer;
}


.button:hover {
  background-color: #333333;
}

.button.is-checked,

.button.is-selected {
  background-color: #99999F;
  color: white;
}


.button:active {
  color: white;
  background-color: #888;
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}



/* hide radio inputs */

.button input[type="radio"] { display: none; }



/* ---- button-group ---- */


.button-group:after {
  content: '';
  display: block;
  clear: both;
}


.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: -1px;
}


.button-group .button:first-child { border-radius: 5px 0 0 5px; }

.button-group .button:last-child { border-radius: 0 5px 5px 0; }




/* element-item
------------------------- Breite der einzelnen Kasterl */


.element-item {
  position: relative;
  float: left;
  width: 123px;
  height: 80px;
  margin: 2px;
  padding: 5px;
  border-color: #ffffff;
  border-radius: 5px 5px 5px 5px; background: #888;
  color: #ffd700;
}

.element-item > * {
  margin: 0;
  padding: 0;
    border-color: #ffffff;

}


.element-item .name {
  position: relative;

  top: 0px;
  text-transform: none;
  font-family:Verdana; font-size: 14px; color:#ffd700; text-align:center; font-weight: bold; line-height: 110%;
}



.element-item .symbol {
  position: absolute; top: 56px; font-family:Verdana; font-size: 12px; color:#FFF; text-align:center; line-height: 110%; font-weight: bold}



.element-item.SMOOTH  { background: #111111; }
.element-item.Jazz    { background: #181818;  }
.element-item.Groove  { background: #222222; }
.element-item.Beat  { background: #282828; }
.element-item.DANCE   { background: #333333;  }
.element-item.House   { background: #383838; }
.element-item.DeepHouse   { background: #444444;  }
.element-item.XMAS   { background: #484848;  }



/* button overwrites
------------------------- */


.button {
  border-color: #222;
}


/* ui-group------------------------- */


.ui-group {
  display: inline-block;
}


.ui-group__title {
  display: inline-block;
  vertical-align: top;
   color: #ffd700; font-size: 18px;
  line-height: 120%;
  margin: 5px 2px 0 0;
  font-weight: bold;
}


.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}