/* Information -------------------------------------

Version: 0.1

Include on: Herman Miller Product Configurator (HTML Version)

Contains:
    =Containers & Modules
    =Buttons
    =Headers
    =Bullet List
    =3-Column Layout
    =Left Column : Hero Images & Text
    =Zoom
    =Middle Column : Product Options
    =Expandable Content (aka Show/Hide)
    =Tooltip
----------------------------------------------------*/

.productConfigurator {
    margin: 0 auto;
    width: 960px;
}

.productConfigurator .container {
    width: inherit;
}

/* =Containers & Modules
----------------------------------------------------*/

.productConfigurator .container .inner {
    display: inline-block;
}

/* ----- Module Structure and Curves ----- */
.mod {
    border: 1px solid #e5e5e5;
    border-width: 0 1px;
    position: relative;
    z-index: 10;
}
.mod .curve {
    background: url("/content/dam/hmicom-application/product-configurator/images/curves.png") 0 0 no-repeat;
    height: 7px;
    left: 0;
    margin-left: -1px;
    text-indent: -999.9em;
    z-index: 15;
}
.mod .btm { margin-top: -7px; }
.mod .top { margin-bottom: -7px; }


/* ----- Module : Width 173 ----- */
.w173 { width: 171px; }
.w173 .curve { background-position: 0 0; width: 173px; }
.w173 .btm { background-position: 0 -7px; }

/* ----- Module : Width 335 ----- */
.w335 { width: 333px; z-index: unset; }
.w335 .curve { background-position: -173px 0; width: 335px; }
.w335 .btm { background-position: -173px -7px; }


/* =Buttons
----------------------------------------------------*/
/* ----- Toggle Button ----- */
.toggle a.btn {
    background: url("/content/dam/hmicom-application/product-configurator/images/toggle.png") 0 0 no-repeat;
    color: #666;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    height: 21px;
    margin-top: 2px;
    margin-left: 0;
    text-align: center;
    text-decoration: none;
    width: 111px;
}
.toggle a.btn:hover { color: #f30; }
.toggle a.selected, .toggle a.selected:hover { color: #414141; cursor: default; }
.toggle a.first { background-position: 0 0; width: 56px; }
.toggle a.first.selected { background-position: 0 -21px; }
.toggle a.second {  background-position: -56px 0; width: 57px; }
.toggle a.second.selected { background-position: -56px -21px; }

/* ----- Download PDF Summary Button ----- */
a.btnPDFSummary {
    background: url("/content/dam/hmicom-application/product-configurator/images/btnDownloadPDFSummary.png") 0 0 no-repeat;
    display: block;
    height: 22px;
    margin: 12px 0 12px 7px;
    text-indent: -999.9em;
    width: 158px;
}
a.btnPDFSummary:hover {
    background-position: 0 -22px;
}


/* =Headers
----------------------------------------------------*/
/* ----- h1, h2 ----- */

.productConfiguratorHeader {
  height: 50px;
  padding-top: 20px;
}

.productConfiguratorHeader h1 {
  font-size: 22px;
  letter-spacing: normal;
  line-height: 1;
  margin-bottom: 0;
}

.productConfiguratorHeader h2 {
  font-size: 16px;
  letter-spacing: normal;
  line-height: 1;
  margin-bottom: 0;
}

.productConfigurator h1 + h2 {
  padding-top: 12px;
}

/* ----- h5 ----- */
.infoOptions h5 {
    color: #7f7f7f;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 12px 20px 10px 15px;
    margin-bottom:0px;
}
.summary h5 {
    color: #7f7f7f;
    font-size: 12px;
    line-height: 1;
    padding: 12px 20px 10px 15px;
    margin-bottom:0px;
}

/* ----- h6 ----- */
.product h6 {
    border-top: 1px solid #e5e5e5;
    color: #7f7f7f;
    font-size: 12px;
    margin: 0;
    padding: 14px 15px;
    width: auto;
}
h6.summaryHeader {
    border-top: 1px solid #e5e5e5;
    color: #7f7f7f;
    font-size: 12px;
    margin-bottom: 0;
    padding: 15px 15px 0;
}
h6.priceHeader {
    border-top: 0;
    margin-bottom: 0;
    padding: 8px 15px 15px;
}
.summaryHeader h6 {
    border-top:0;
    color: #7f7f7f;
    font-size: 12px;
    margin: 0;
    padding: 14px 15px;
    width: auto;
}
.infoOptions h6 {
    border: 0;
    border-top: 1px solid #e5e5e5;
    color: #414141;
    font-size: 11px;
    margin-bottom: 15px;
    padding-bottom: 0;
}

.infoOptions h6.first {
    border-top: 0;
    color: #7f7f7f;
    font-size: 12px;
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.extend h6 {
    margin-top: 8px;
}
.extend h6:first-child {
    line-height: 1;
    margin-top: 0;
}
.summary h6 {
    color: #7f7f7f;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
}

/* =Bullet List
----------------------------------------------------*/
ul.bullet {
    margin: 0;
    padding: 15px 20px;
}
ul.bullet li {
    color: #7f7f7f;
}
.bullet li {
    background: url("/content/dam/hmicom-application/product-configurator/images/bullet.png") 0 6px no-repeat;
    color: #7f7f7f;
    font-size: 11px;
    line-height: 1.4em;
    list-style-type: none;
    padding-bottom: 5px;
    padding-left: 10px;
}


/* =3-Column Layout
----------------------------------------------------*/
/* Default Column Set Up */
.colL, .colM, .colR {
    float: left;
    margin-top: 20px;
}
.colL {
    position: relative;
    z-index: 39;
}
.colL,
.colL .slideIt {
    text-align: center;
    width: 390px;
}
.colM {
    width: 335px;
}
.colR {
    margin-left: 20px;
    width: 173px;
}

/* Text */
.colL p {
    color: #7f7f7f;
    font-size: 10px;
    padding-bottom: 13px;
}

.slideIt,
.slideIt2 {
  will-change: position, top, bottom;
}

.slideIt.colFixed,
.slideIt2.colFixed {
  position:fixed;
  top: 97px;
  bottom: auto;
}

.slideIt.colTop,
.slideIt2.colTop {
  position:absolute;
  top:auto;
  bottom: auto;
}

.slideIt.colBottom,
.slideIt2.colBottom {
  position:absolute;
  top: auto;
  bottom: 10px;
}


/* =Left Column : Hero Images & Text
----------------------------------------------------*/
.hero {
    height: 390px;
}
.hero a {
    display: none;
}
.hero a.selected {
    display: block;
}
.hero a:hover {
    text-decoration: none;
}

/* Toggle Button */
.toggle {
    display: flex;
    justify-content: center;
    margin: 5px 0 6px 0;
}
.toggle a {
    display: inline-block;
}


/* =Zoom
----------------------------------------------------------------------------------------------------*/
.cloud-zoom-lens {
    background-color: #fff;
    border: 1px solid #f30;
    cursor: crosshair;
    margin: -1px; /* Set this to minus the border thickness. */
}

.cloud-zoom-big {
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

.cloud-zoom-loading {
    background: #222;
    border:1px solid #000;
    color: #fff;
    padding: 3px;
}

/* =Middle Column : Product Options
----------------------------------------------------*/
.infoOptions {
    font-size: 11px;
}

/* Text */
.infoOptions .desc {
    color: #7f7f7f;
    font-weight: normal;
    padding: 0 0 0 12px;
}

/* Lists */
.infoOptions ul {
    clear: both;
    display: inline-block;
    list-style: none;
    margin-left: 18px;
    padding: 0 0 10px;
}

.infoOptions li {
    float: left;
    padding: 0 6px 6px 0;
    position: relative;
}

.infoOptions li img {
    border: 1px solid #fff;
    padding: 1px;
    z-index: 210;
}

.infoOptions .addBg {
    background: url("/content/dam/hmicom-application/product-configurator/images/sizeGradient.png") 50% 50% no-repeat;
    border: 1px solid #fff;
    color: #414141;
    display: block;
    font-weight: bold;
    line-height: 19px;
    padding: 1px;
    text-align: center;
    width: 28px;
}

.infoOptions .addBg { text-decoration: none; }
.infoOptions .addBg span { display: none; }
.infoOptions a.selected img,
.infoOptions a.selected.addBg {
    border: 1px solid #f00;
}

.infoOptions a.selected .tooltip img {
    border-color: #fff;
}
ul.productThumbs {
    padding-bottom: 0;
    padding-top: 11px;
}

ul.productThumbs li {
    padding: 0 11px 10px 0;
}

/* Form Elements */
.infoOptions fieldset {
    border: none; /* Bootstrap Override */
    display: inline-block;
    margin: 0 18px;
    padding: 0 25px 10px 0px;
    position: relative;
    width: 281px;
}

.infoOptions input,
.infoOptions label,
.infoOptions fieldset a {
    float: left;
}

.infoOptions input {
    margin: 0 10px 0 0;
    height: 13px;
    width: 13px;
}

.infoOptions input::before,
.infoOptions input[type=radio]::before,
.infoOptions input[type=radio]:checked:before {
    display: none;  /* Bootstrap Override */
}

.infoOptions input::after,
.infoOptions input[type=radio]::after,
.infoOptions input[type=radio]:checked:after {
    display: none;  /* Bootstrap Override */
}

.infoOptions input.on { background-position: 0 -13px; }
.infoOptions label {
    font-weight: bold;
    line-height: 1.4em;
    padding-right: 5px;
    width: 245px;
}

.infoOptions label span {
    font-weight: normal;
    padding-left: 5px;
}

.border {
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
}


/* =Expandable Content (aka Show/Hide)
----------------------------------------------------------------------------------------------------*/
.extend {
    font-size: 11px;
    position: relative;
}

.extend p {
    line-height: 1.4em;
    padding-bottom: 10px;
}

.showHide {
    display: none;
    padding-bottom: 6px;
}

.extend a.expand {
    background: url("/content/dam/hmicom-application/product-configurator/images/grayUpDown.png") 0 4px no-repeat;
    display: inline-block;
    margin-bottom: 15px;
    margin-left: 18px;
    padding-left: 13px;
    text-decoration: none;
}

.extend a.expand:hover {
    text-decoration: underline;
}

.extend a.up {
    background-position: 0 -16px;
}

/* =Tooltip
----------------------------------------------------------------------------------------------------*/
a.tip {
    display: block;
    position: relative;
}

a.tip:hover {
    text-decoration: none;
}

.tip:hover .tooltip {
    visibility: visible;
}

a.qMark {
    background: url("/content/dam/hmicom-application/product-configurator/images/qMark.png") 0 0 no-repeat;
    display: block;
    height: 22px;
    position: absolute;
    right: 0;
    top: -1px;
    width: 22px;
}

a.tip .tooltip img {
    border-color: #fff;
    margin-bottom: -7px;
}

.tooltip {
    background: url("/content/dam/hmicom-application/product-configurator/images/tooltip.png") 0 -10px no-repeat;
    bottom: 45px;
    display: block;
    left: -86px;
    padding: 12px 10px 0 10px;
    position: absolute;
    text-align: center;
    width: 184px;
    visibility: hidden;
    z-index: 60;
}

.qMark .tooltip {
    bottom: 32px;
}

.tooltip span {
    color: #414141;
    display: block;
    padding-bottom: 12px;
    text-align: left;
}

.tooltip .btmPoint {
    background: url("/content/dam/hmicom-application/product-configurator/images/tooltip.png") 0 0 no-repeat;
    bottom: -10px;
    height: 10px;
    left: -10px;
    padding-bottom: 0;
    position: relative;
    width: 204px;
}

/* ----- Adjustment for Wide Tip ----- */
.tooltip.w269 {
    background-position: -204px -30px;
    left: -124px;
    width: 249px;
}

a.tip .tooltip.w269 img {
    margin-bottom: 5px;
}

.tooltip.w269 span {
    line-height: 1.4em;
    padding: 0 5px 0 5px;
}

.tooltip.w269 .btmPoint {
    background-position: -204px 0;
    padding: 0;
    width: 269px;
}

/* ----- Adjustment for Wide Tip ----- */
.tooltip.w429 img {
    padding-bottom: 10px;
}

/* --- SECTION ADDED FOR NEW SHOW MORE OPTION BUTTON STYLE --- */
a#flexible {
    background: url("/content/dam/hmicom-application/product-configurator/images/flexible.png") 0 0 no-repeat !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-block !important;
    height: 28px;
    line-height: normal;
    margin: -6px 0 6px 15px;
    padding-left: 0;
    text-decoration: none;
    text-indent: 0;
    width: auto;
}

a#flexible .text {
    background: url("/content/dam/hmicom-application/product-configurator/images/flexible.png") 100% 0 no-repeat;
    color: #fff;
    display: inline-block;
    font: 10px arial,helvetica,sans-serif;
    height: 21px;
    margin-left: 12px;
    padding: 7px 12px 0 0;
    width: auto;
}

/* WebKit Only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    a#flexible .text {
        height: 20px;
        padding-top: 8px;
    }
}

a#flexible:hover { background-position: 0 -28px !important; }
a#flexible:hover .text { background-position: 100% -28px !important; }
a#flexible .arrow {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #fff;
    display: inline-block;
    height: 0;
    margin: 0 -7px 0 12px;
    position: relative;
    top: -2px;
    width: 0;
}

a#flexible.up .arrow {
    border-bottom: 3px solid #fff;
    border-top: 0;
}

#formOptions .showHide, .icon.showHide {
    background: none;
    padding-left: 0;
}

.toggle a.btn {
    margin-left: 0;
}

.summary .price {
    color: #414141;
    font-size: 20px;
    margin: 0;
    font-weight: bold;
    font-weight: 700;
    display: block;
    padding: 18px 15px 0;
}