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


.button {
  display: inline-block;
 color: grey; font-size: 12px; padding: 5px 15px;
  margin-bottom: 10px;
  background-color: #000080;
  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: #0074cc;
}

.button.is-checked,

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


.button:active {
  color: white;
  background-color: #59F;
  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: 90px;
  margin: 2px;
  padding: 5px;
  border-radius: 5px 5px 5px 5px; background: #888;
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}


.element-item .name {
  position: relative;

  top: 0px;
  text-transform: none;
  font-family:Verdana; font-size: 14px; color:#000; text-align:center; font-weight: bold
}



.element-item .symbol {
  position: absolute; align: center; top: 60px; font-family:Verdana; font-size: 12px; color:#000; text-align:center; font-weight: normal}



.element-item.dinner  { background: #F20; background: hsl(  60, 100%, 90%); }

.element-item.soul    { background: #F80; background: hsl(  160, 100%, 90%); }

.element-item.party   { background: #FF0; background: hsl(  0, 100%, 90%); }



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


.button {
  border-color: #222;
}


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


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


.ui-group__title {
  display: inline-block;
  vertical-align: top;
   color: #ffffff; font-size: 1.2rem;
  line-height: 40px;
  margin: 0 10px 0 0;
  font-weight: bold;
}


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