.tabbed{
  float : left;
  width : 100%;
}

.tabbed > input{
  display : none;
}

.tabbed > section > h1{
  float       : left;
  box-sizing  : border-box;
  margin      : 0; 
  padding     : 0.5em 0.5em 0;
  padding-left: 2px;
  padding-right: 2px;
      
  overflow    : hidden;
  font-size   : 20px;
  font-weight : normal;
}

.tabbed > input:first-child + section > h1{
  padding-left : 10px;
}

.tabbed > section > h1 > label{
  display                 : block;
  padding                 : 1.25em 0.4em;
  border                  : 1px solid #585858;
  border-bottom           : none;
  border-top-left-radius  : 4px;
  border-top-right-radius : 4px;
box-shadow: 

	0 2px 6px 18px rgba(0,0,0,0.5);

  background              : #242424;
  cursor                  : pointer;
     -moz-user-select     : none;
      -ms-user-select     : none;
  -webkit-user-select     : none;
    box-shadow: 0 0 0 1px  #1a1a1c, 0 0 0 1px  #1a1a1c inset;
    border: 1px solid #3d3d3d;
    //padding: 3px;
}

.tabbed > section > div{
  position      : relative;
  z-index       : 2;
  float         : right;
  box-sizing    : border-box;
  width         : 100%;
  margin        : 78 0 0 -100%;
  padding       : 0.5em 0.75em;
  border        : 1px solid #585858;
  border-radius : 4px;
  box-shadow    : 0 0 0.5em rgba(0,0,0,0.0625);
  background    : #242424;
   box-shadow: 0 0 0 1px  #1a1a1c, 0 0 0 1px  #1a1a1c inset;
    border: 1px solid #3d3d3d;
}

.tabbed > input:checked + section > h1{
  position : relative;
  z-index  : 3;
}

.tabbed > input:not(:checked) + section > div{
  display : none;
}