/* generell für alle selectoren **********************************************/

div.PPSelectorContainer {
 float:left;
}

@media only screen and (max-width: 400px) {
  .PPSelectorContainer {
    width:100% !important;

  }
}

div.PPSelectorItem {
 cursor:pointer;
}
/* generell für alle selectoren **********************************************/


/* allgemeine helper****/

.margin1 {
 margin: 1mm; 
}

.margin2 {
 margin: 2mm; 
}

.margin3 {
 margin: 3mm; 
}

/************************/

div.PPSelectorContainer {
 float:left;
}

@media only screen and (max-width: 400px) {
  .PPSelectorContainer {
    width:100% !important;

  }
}

div.PPSelectorElement {
 display:inline-block;
 position:relative;
}

div.PPSelectorItem {
 cursor:pointer;
}

div.PPSelectorHead {
 display:none;
}

div.PPSelectorFoot {
 clear:both;
}

.PPSelectorImage {
 display:none; 
}
.PPSelectorText{
  display:none; 
}

.PPSelectorItem.multi .cb-container {
  display: inline-block;
  width: 20px; }

.PPSelectorItem .checkbox {
  display: none; }

.PPSelectorItem .checkbox-checked {
  display: none; }

.PPSelectorItem.multi.selected .checkbox-checked {
  display: inline; }

.PPSelectorItem.multi.unselected .checkbox {
  display: inline; }

div.productSelectorContainer input[type=number]{
  width: 50px;
  border: 1px solid grey;
    font-weight:bold;
}

div.itemQuantity {
  height: 50px;
  margin-top: 16px;
  padding-right: 5px;
  text-align: right;

}

div.itemQuantityLabel {
  margin:4px;
}

@media only screen and (max-width: 450px) {
  div.itemQuantity {
      margin: 10px 5px 5px 110px;
  }
  
  div.itemQuantityLabel {
     float:left;
  }
  .PPSelectorContainer {
    width:80%;
  }
  
}

@media only screen and (max-width: 400px) {
  div.itemQuantity {
    margin: 30px 5px 5px;

  }
}





div.PPSelectorHead {
 display:none;
}

div.PPSelectorFoot {
 clear:both;
}

.PPSelectorImage {
 display:none; 
}
.PPSelectorText{
  display:none; 
}

div.productSelectorContainer input[type=number]{
  width: 50px;
  border: 1px solid grey;
    font-weight:bold;
}

div.itemQuantity {
  height: 50px;
  margin-top: 16px;
  padding-right: 5px;
  text-align: right;

}

div.itemQuantityLabel {
  margin:4px;
}

@media only screen and (max-width: 450px) {
  div.itemQuantity {
      margin: 10px 5px 5px 110px;
  }
  
  div.itemQuantityLabel {
     float:left;
  }
  .PPSelectorContainer {
    width:80%;
  }
  
}

@media only screen and (max-width: 400px) {
  div.itemQuantity {
    margin: 30px 5px 5px;

  }
}




/* Tab Style ****************************************************************/

.flatTabContainer {
  margin: 10px 16px 0;
}

.flatTabContainer div.PPSelectorItem {
    background: none repeat scroll 0 0 #525252;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #dbdbd3;
    cursor: pointer;
    display: inline-block;
    height: 2em;
    line-height: 2em;
    text-align: center;
    transition: background 0.4s ease-in-out 0s, height 0.2s linear 0s;
    width: 50px;
    margin-right:2px;
}

.flatTabContainer div.PPSelectorItem:hover {
    background:#647777;
}

.flatTabContainer div.PPSelectorItem.selected {
  background-color: rgba(107, 165, 0, 1);
}
div.PPSelectorFoot.flatTabContainer {
    margin: 0% 16px 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 5px solid rgba(107, 165, 0, 1);
    border-top-right-radius: 3px;
  
}

@media only screen and (max-width: 600px)  {
 
  .flatTabContainer {
    margin: 0 16px 0;
  }
  div.flatTabContainer.PPSelectorHead  {
      margin: 10px 16px 0;
      display:block;
      cursor: pointer;
      background: none repeat scroll 0 0 #525252;
      color: #dbdbd3;
      height: 2em;
      line-height: 2em;
      transition: background 0.4s ease-in-out 0s, height 0.2s linear 0s;
      width: 160px;
      padding-left:5px;
      margin-right:2px;
      position:relative; 
  }

  div.flatTabContainer.PPSelectorHead:after  {
    position:absolute;
    right:0px;
    margin-right:4px;
    content: "\25BC";
  }
  .flatTabContainer {
    position:absolute; 
  }
  .flatTabContainer div.PPSelectorItem {
    border-radius: 0px;
      margin: 0;
      display:none;
      background: none repeat scroll 0 0 #525252;
      color: #dbdbd3;
      height: 2em;
      line-height: 2em;
      transition: background 0.4s ease-in-out 0s, height 0.2s linear 0s;
      width: 160px;
      padding-left:5px;
      margin-right:2px;
      position:relative; 
        z-index:10;

  }
  .flatTabContainer div.PPSelectorItem:hover {
      background:#647777;
  }

  .flatTabContainer.selectedHead div.PPSelectorItem {

    display:block;
    
  }  
  
  
}

@media only screen and (max-width: 400px) {
  
  
  .flatTabContainer {
  margin: 10px 16px 0;
  position:static;
}

.flatTabContainer div.PPSelectorItem {
    background: none repeat scroll 0 0 #525252;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #dbdbd3;
    cursor: pointer;
    display: inline-block;
    height: 2em;
    line-height: 2em;
    text-align: center;
    transition: background 0.4s ease-in-out 0s, height 0.2s linear 0s;
    width: 50px;
    margin-right:2px;
}

.flatTabContainer div.PPSelectorItem:hover {
    background:#647777;
}

.flatTabContainer div.PPSelectorItem.selected {
  background-color: rgba(107, 165, 0, 1);
}
div.PPSelectorFoot.flatTabContainer {
    margin: 0% 16px 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 5px solid rgba(107, 165, 0, 1);
    border-top-right-radius: 3px;
  
}
  
div.flatTabContainer.PPSelectorHead  {

 display:none;
}

  .flatTabContainer {
    margin: 0 !important;
    width:100%
  }
  
  .flatTabContainer div.PPSelectorItem {
     width:19%;
     
     
  }
  
  div.flatTabContainer.PPSelectorHead  {
    
    width: 100%;
  }
  
  .flatTabContainer.selectedHead div.PPSelectorItem {

    display:inline-block;
    
  }  
}

/* Dropdown Style *************************************************************/

/* flat */

.flatDropdownContainer {

}
div.flatDropdownContainer.PPSelectorHead  {

    display:block;
    cursor: pointer;
    background: none repeat scroll 0 0 #525252;
    color: #dbdbd3;
    height: 2em;
    line-height: 2em;
    transition: background 0.4s ease-in-out 0s, height 0.2s linear 0s;
    padding-left:5px;
    position:relative; 
}

div.flatDropdownContainer.PPSelectorHead span.title {
  
}

div.flatDropdownContainer.PPSelectorHead:after  {
  position:absolute;
  right:0px;
  margin-right:4px;
  content: "\25BC";
}
.flatDropdownContainer {
  position:absolute;
  height:0px;
}
.flatDropdownContainer div.PPSelectorItem {
    margin: 0;
    display:none;
    background: none repeat scroll 0 0 #777777;
    color: #ffffff;
    height: 2em;
    line-height: 2em;
    transition: background 0.2s ease-in-out 0s, height 0.2s linear 0s;
    padding-left:5px;

    position:relative; 
      z-index:100;

}
.flatDropdownContainer div.PPSelectorItem:hover {
    background:#647777;
}

.flatDropdownContainer.selectedHead div.PPSelectorItem {

  display:block;
  
}
@media only screen and (max-width: 600px) {
  
  .flatDropdownContainer div.PPSelectorItem {
     width: 160px;
     
     
  }
  
  div.flatDropdownContainer.PPSelectorHead  {
    
    width: 160px;
  }
}

@media only screen and (max-width: 400px) {
  
  .flatDropdownContainer {
    margin: 0 !important;
    width:100%
  }
  
  .flatDropdownContainer div.PPSelectorItem {
     width: 100%;
     
     
  }
  
  div.flatDropdownContainer.PPSelectorHead  {
    
    width: 100%;
  }
}

/* 3d */

.threedDropdownContainer {

}
div.threedDropdownContainer.PPSelectorHead {
    display: block;
    cursor: pointer;
    background-image: linear-gradient(to bottom,#fcfcfc,#ebebeb 50%,#dedede 50%,#d0d0d0 100%);
    color: #555;
    height: 1.8em;
    line-height: 1.8em;
    transition: background 0.4s ease-in-out 0s, height 0.2s linear 0s;
    padding-left: 5px;
    position: relative;
    border: 1px solid #707070;
    border-radius: 2px;
}

div.threedDropdownContainer.PPSelectorHead:hover {
  border: 1px solid #dddddd;
}


div.threedDropdownContainer.PPSelectorHead span.title {
  
}

div.threedDropdownContainer.PPSelectorHead:after  {
  position:absolute;
  right:0px;
  margin-right:4px;
  content: "\25BC";
}
.threedDropdownContainer {
  position:relative;
  height:0px;
}
.threedDropdownContainer div.PPSelectorItem {
    margin: 0;
    display:none;
    background: none repeat scroll 0 0 #777777e3;
    color: #ffffff;
    height: 1.8em;
    line-height: 1.8em;
    transition: background 0.2s ease-in-out 0s, height 0.2s linear 0s;
    padding-left:5px;

    position:relative; 
      z-index:100;

}
.threedDropdownContainer div.PPSelectorItem:hover {
    background:#999999;
}

.threedDropdownContainer.selectedHead div.PPSelectorItem {

  display:block;
  
}
@media only screen and (max-width: 600px) {
  
  .threedDropdownContainer div.PPSelectorItem {
     width: 160px;
     
     
  }
  
  div.threedDropdownContainer.PPSelectorHead  {
    
    width: 160px;
  }
  .threedDropdownContainer.fixed div.PPSelectorItem {
     width: unset;
     
     
  }
  
  div.threedDropdownContainer.PPSelectorHead.fixed  {
    
    width: unset;
  }
}

@media only screen and (max-width: 400px) {
  
  .threedDropdownContainer {
    margin: 0 !important;
    width:100%
  }
  
  .threedDropdownContainer div.PPSelectorItem {
     width: 100%;
     
     
  }
  
  div.threedDropdownContainer.PPSelectorHead  {
    
    width: 100%;
  }
}



/* Popup Style **********************************************************************/

div.popupContainer.PPSelectorHead  {
    margin: 10px 16px 0;
    display:block;
    cursor: pointer;
    position:relative;
}
div.popupContainer.PPSelectorHead:after  {
  content:"mehr";
  cursor:pointer;
  text-decoration:underline;
  color:#888;
  margin-left:8px;
}
.popupContainer {
  margin: 10px 16px 0;
}
 
.popupContainer div.PPSelectorItem {
   
  display: none;
  margin-right: 16px;
}

.popupContainer.selectedHead {

  background: #ffffff none repeat scroll 0 0;
    border: 1px solid #aaa;
    box-shadow: 3px 3px 3px #7c7c7c;
    display: block;
    height: 200px;
    margin-left: 4px;
    margin-top: -2.2em;
    position: absolute;
    width: 420px;
    z-index: 100;
    padding:8px;
}
.popupContainer.selectedHead div.PPSelectorItem {

  display:inherit;
  display:inline-block;
  width:80px;
  height:50px;
}

.popupContainer  .PPSelectorImage {
 display: inherit;
 width:80px;
 margin-bottom:0px; 
}
/* Radio Style **********************************************************************/

.flatRadioContainer {
  margin: 10px 16px 0;
}
 
.flatRadioContainer div.PPSelectorItem {
   
  display: inline-block;
  margin-right: 16px;
}

.flatRadioContainer div.PPSelectorItem:last-child {
 
  margin-right: 0px;
}

.flatRadioContainer div.PPSelectorItem:before {
  
    background-color: #aaa;
    border-radius: 0.25em;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
    color: #aaa;
    content: "•";
    display: inline-block;
    font-size: 30px;
    line-height: 0.5em;
    margin-right: 6px;
    text-align: center;
    vertical-align: middle;
    width: 0.5em;
    height: 0.5em;
 
}

.flatRadioContainer div.PPSelectorItem.selected:before {
   
    color: #f3f3f3;
}

/* Simple Button *********************************************************************/

div.threed, button.threed {
    display: inline-block;
    cursor: pointer;
    background-image: linear-gradient(to bottom,#fcfcfc,#ebebeb 50%,#dedede 50%,#d0d0d0 100%);
    color: #555;
    height: 1.8em;
    line-height: 1.8em;
    transition: background 0.2s ease-in-out 0s, height 0.2s linear 0s;
    padding: 0px 8px 0px 8px;
    border: 1px solid #707070;
    border-radius: 2px;
    margin:2px 1px;
}

div.threed:hover, button.threed:hover {
    border: 1px solid #dddddd;
}
div.threed:active, button.threed:active {
    background-image: linear-gradient(to bottom,#d0d0d0,#dedede 50%,#d0d0d0 100%);
    border: 1px solid #707070;
}