/* 
   Swatches Styles
*/



.swatch { 
    margin:1em 0; 
  }
  /* Label */
  .swatch .header {
    margin: 0.5em 0;
  }
  /* Hide radio buttons.*/
  .swatch input { 
    display:none;
  }
  .swatch label {
    /* Rounded corners */
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    /* To give width and height */
    float:left;
    /* Color swatches contain no text so they need to have a width. */
    min-width:35px; 
    height:35px;
    /* No extra spacing between them */
    margin:0;
    /* The border when the button is not selected */
    border:#ebebeb 1px solid;
    /* Background color */
    background-color:#ebebeb;
    /* Styling text */
    font-size:13px;
    text-align:center;
    line-height:35px;
    white-space:nowrap;
    text-transform:uppercase;
  }
  .swatch-element label { padding:0 10px; }
  .color.swatch-element label { padding:0; }
  /* Styling selected swatch */
  /* Slightly raised */
  .swatch input:checked + label {
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
    box-shadow:0px 1px 2px rgba(0,0,0,0.8);
    border-color:transparent;
  } 
  .swatch .swatch-element {
    float:left;
    -webkit-transform:translateZ(0); /* webkit flicker fix */
    -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
    /* Spacing between buttons */
    margin:0px 10px 10px 0;
    /* To position the sold out graphic and tooltip */
    position:relative;
  }
  /* Image with the cross in it */
  .crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
  .swatch .swatch-element .crossed-out { display:none; }
  .swatch .swatch-element.soldout .crossed-out { display:block; }
  .swatch .swatch-element.soldout label {
    filter: alpha(opacity=60); /* internet explorer */
    -khtml-opacity: 0.6;      /* khtml, old safari */
    -moz-opacity: 0.6;       /* mozilla, netscape */
    opacity: 0.6;           /* fx, safari, opera */
  }
  /* Tooltips */
  .swatch .tooltip {
    text-align:center;
    background:#000;
    color:#fff;
    border: 1px solid #000;
    bottom:100%;
    padding: 5px 10px;
    border-radius: 3px;
    display:block;
    position:absolute;
    /* width:50px; */
    left:-8px;
    margin-bottom:8px;
    /* Make it invisible by default */
    filter:alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity:0;
    visibility:hidden;
    /* Animations */
    -webkit-transform: translateY(10px);
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
         -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    z-index: 10000;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box;
  }
  .swatch .tooltip:before {
    bottom:-10px;
    content:" ";
    display:block;
    height:20px;
    left:0;
    position:absolute;
    width:100%;
  }
  /* CSS triangle */
  .swatch .tooltip:after {
    border-left:solid transparent 10px;
    border-right:solid transparent 10px;
    border-top:solid #000 10px;
    bottom:-5px;
    content:" ";
    height:0;
    left:50%;
    margin-left:-13px;
    position:absolute;
    width:0;
  }
  
  .swatch .swatch-element:hover .tooltip {
    filter:alpha(opacity=100);
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    visibility:visible;
    -webkit-transform:translateY(0px);
       -moz-transform:translateY(0px);
        -ms-transform:translateY(0px);
         -o-transform:translateY(0px);
            transform:translateY(0px);
  }
  .swatch.error {
    background-color:#E8D2D2!important;
    color:#333!important;
    padding:1em;
    border-radius:5px;
  }
  .swatch.error p {
    margin:0.7em 0;
  }
  .swatch.error p:first-child {
    margin-top:0;
  }
  .swatch.error p:last-child {
    margin-bottom:0;
  }
  .swatch.error code {
    font-family:monospace;
  }