/* Codebuttons */
div.codebutton, span.codebutton{
  float:left; text-align:left;
  margin:.4em .4em .4em 0;
}
div.codebutton{display: block; clear: both;}
.codebutton p{margin:0 .4rem}
.codebutton img{width:60px; height:60px; margin:2px 6px 2px 0; float:left; border:1px solid #ebebeb}
.codebutton a, div.codebutton label{font-weight:bold; display: block;}
.codebutton input[type="checkbox"]{width:14px; height:14px; margin:0 .4rem 0 0;}


/* Button Groups*/
div.buttongroup h4 label {display:inline-block;margin-left:1em; font-weight:normal}
div.buttongroup:not(.kasten){clear:both; background:#ebebeb; padding: .5rem 1rem; margin-bottom: .3rem}
div.buttongroup details{margin:0; }
div.buttongroup span.preview {display: block}
div.buttongroup span.preview img {
  width: 4.5rem; height: 3.5rem; max-height: 3.5rem;
  border: 1px solid silver;
  margin: .5rem .5rem .5rem 0;
}
div.buttongroup:not(.kasten):after{content: ''; display: table;clear:both;}

div.buttongroup summary{color: #003464; font-weight: var(--nb-font-weight-bold); list-style-type: '';}
div.buttongroup summary:before{
  font: normal 20px/20px 'Elusive';
  content: '\f125';
  color: var(--nb-gray-color);
  float: right;
  position: relative;
  top: .4rem;
  right: -1rem;
  height: 6rem;
  width: 2.5rem;
}
div.buttongroup details[open] > summary{list-style-type: '';}
div.buttongroup details[open] > summary:before{content: '\f128'; height: 16rem;}

div.buttongroup details[open] span.preview{display:none}
div.buttongroup > label{font-weight:bold; display:block; clear:both;}

/* Codebuttons als Kästen*/
div.buttongroup .codebutton {
  background: white;
  border: 1px solid silver;
  display: inline;
  float: left;
  margin: .5rem 1.5rem .5rem 0;
  width: 11rem;
  min-height: 14rem;
  padding: 0;
  text-align: left;
  clear: none;
}
div.buttongroup .codebutton.codebutton-title{min-height: 184px;}


div.buttongroup.kasten .codebutton {margin-bottom: 1.5em}

div.buttongroup .codebutton img {
    width: 10.9rem; height: 8.3rem; max-width: 10.9rem;
    margin: 0 0 .4rem;
    float: none;
    display:block;
    border: 1px solid #ebebeb;
    border-width: 0 0 1px 0;
}