/*************************************************************************************************
    CUSTOM GASKETS
*************************************************************************************************/

.gaskets-choice .left { margin-right: 15px; }
.gaskets-choice .left-buddy { float: left; }
.gaskets-choice .label { font-size: 10px; text-transform: uppercase; font-weight: bold; color: #000; text-align: center; line-height: 10px; }
.gaskets-choice #steps { clear: both; padding-top: 30px; position: relative; overflow: hidden; }
.gaskets-choice .steps { margin-top: 10px; position: relative; overflow: hidden; }
.gaskets-choice #steps .gaskets-title { background: #000; color: #fff; text-transform: uppercase; font-weight: bold; border: 1px solid #000; -moz-border-radius: 10px; border-radius: 10px; padding: 10px 20px; text-align: center; margin: 0 auto; position: absolute; top: 0; right: 80px; width: 550px;  }
.gaskets-choice .steps ul { margin-top : 20px; overflow: hidden; }
.gaskets-choice .steps ul li { float: left; }
.gaskets-choice .steps ul li ~ li { margin-left: 15px; }
.gaskets-choice .steps > div { float: left; background: #fff; padding: 17px 20px 14px; color: #ed1c24; text-transform: uppercase; font-weight: bold; border: 1px solid #000; -moz-border-radius: 20px; border-radius: 20px; margin-top: 18px; width: 680px;  }
.gaskets-choice .steps > span { margin-top: 30px; }
.gaskets-choice #step-2,
.gaskets-choice #step-3,
.gaskets-choice #step-5,
.gaskets-choice #step-6 { margin-top: 30px; }
.gaskets-choice .watermark { font-size: 10px; }
.scroll-to-bottom { display: none; }

/* step 1 */
.gaskets-choice #step-1 ul li a { display: block; background: url(../images/bg-gaskets-choice-box.jpg) no-repeat #76787A; border: 1px solid #000; width: 146px; height: 155px; text-align: center; font-size: 12px; color: #fff; font-weight: normal; position: relative; }
.gaskets-choice #step-1 ul li a:hover,
.gaskets-choice #step-1 ul li a.active { background-color: #ed1c24; }

/* step 2 */
.gaskets-choice #step-2 ul li { position: relative; }
.gaskets-choice #step-2 ul li:hover { cursor: pointer; }
.gaskets-choice #step-2 ul li a { display: block; background: url(../images/bg-gaskets-profile-choice-box.jpg) no-repeat #76787A; border: 1px solid #000; width: 146px; height: 146px; text-align: center; font-size: 12px; color: #fff; font-weight: normal; position: relative; }
.gaskets-choice #step-2 ul li a ~ a.popup-icon { display: block; width: 20px; height: 20px; background-image: url(../images/icon-info.png); background-color: transparent; position: absolute; top: 10px; right: 10px; border: 0;   }
.gaskets-choice #step-2 ul li a ~ a:hover { background-color: transparent; }
.gaskets-choice #step-2 ul li a:hover,
.gaskets-choice #step-2 ul li a.active { background-color: #ed1c24; }

/* step 3 */
.gaskets-choice #step-3 { position: relative; }
.gaskets-choice #step-3 ul { margin-top: 20px; overflow: hidden;}
.gaskets-choice #step-3 ul li { float: left; background-color: #f3f3f4; border: 1px solid #000; width: 205px; font-size: 10px; overflow: hidden; position: relative; margin-bottom: 20px; }
.gaskets-choice #step-3 ul li .item-top { width: 100%; text-align: center; background-color: #ffffff; padding:0; }
.gaskets-choice #step-3 ul li ~ li { margin-left: 15px; }
.gaskets-choice #step-3 ul li a { display: block; }
.gaskets-choice #step-3 ul li a:hover { background-color: #ed1c24; color: #fff;  }
.gaskets-choice #step-3 ul li a.active { background-color: #ed1c24; color: #fff;  }
.gaskets-choice #step-3 ul li a.active .item-details { color: #fff;  }
.gaskets-choice #step-3 ul li a.active .item-details span { color: #fff;  }
.gaskets-choice #step-3 ul div { text-align: left; padding-left:14px;text-transform:none; line-height: 14px; }
.gaskets-choice #step-3 ul li .watermark { position: absolute; color: #B1B3B5; top: 35%; text-align: center; width: 100%; }
.gaskets-choice #step-3 ul li .watermark.high { left: 26px; top: 15px; }
.gaskets-choice #step-3 ul li .watermark.low { left: 0px; top: 62px; }
.gaskets-choice #step-3 ul li .gaskets-choice-num { color: #231F20; }
.gaskets-choice #step-3 ul li .item-details { color: #76787A; border-top: 1px solid #000; }
.gaskets-choice #step-3 ul li .item-details span { color: #A7A9AB; }
.gaskets-choice #step-3 ul li:hover .item-details { color:#ffffff; }
.gaskets-choice #step-3 ul li:hover .item-details span { color: #ffffff; }
.gaskets-choice #step-3 .chosen-profile { float:left; border:1px solid #404040; background-color: #000000; -moz-border-radius:14px; border-radius:14px; width:271px; position: relative; display: none;  }
.gaskets-choice #step-3 .chosen-profile .title { font-size:14px; color:#FFFFFF; line-height:28px; width: 100%; text-align: center; margin: 0; }
.gaskets-choice #step-3 .chosen-txt { float: right; padding:20px 20px 0 0; width:324px; text-transform:none; font-weight:normal; color: #000000; }
.santoprene-desc { float: right; width: 300px; text-transform: none; padding-top: 16px; color: #000; margin-right: 30px; display: none; }
.santoprene-desc span { color: #1c75bc; }
.gaskets-choice #step-3 .price-per-foot { clear: both; padding-top: 20px; display: none;  }
.gaskets-choice #step-3 .price-per-foot .left { text-align: right; width: 90px;  }
.gaskets-choice #step-3 .price-per-foot input { border: 1px solid #000; -moz-border-radius: 5px; border-radius: 5px; height: 20px; width: 65px; padding: 2px 5px; }
.gaskets-choice #step-3 ul li .item-details span.santoprene-material { color: #1c75bc; }
.gaskets-choice #step-3 ul li:hover .item-details span.santoprene-material { color: yellow; }
.gaskets-choice #step-3 ul li .item-details span.reverse-mount { color: #ed1c24; }
.gaskets-choice #step-3 ul li:hover .item-details span.reverse-mount { color: yellow; }

/* step 4 */
.gaskets-choice #step-4 span + div { width: 35%; }
.gaskets-choice #step-4 .left { width: 90px; text-align: right;}
.gaskets-choice #step-4 .left-buddy { padding-top: 6px; }
.gaskets-choice #step-4 .required-icon { left: 272px; top: 46px;}

/* step 5 */
.gaskets-choice #step-5 > div { float: left; background: #fff url(../images/bg-step-3.png) no-repeat bottom right; padding: 12px 40px 84px 20px; color: #ed1c24; text-transform: uppercase; border: 1px solid #000; -moz-border-radius: 20px; border-radius: 20px; width: 676px; }
.gaskets-choice #step-5 #step-5-info { text-align: center; color: #27aae1; text-transform: none; padding-top: 25px; font-family: arial, helvetica, sans-serif; font-weight: normal; padding-bottom: 10px;  }
.gaskets-choice #step-5 #left { float: left; width: 100px; text-align: right; font-size: 14px; font-weight: bold; padding-top:2px; }
.gaskets-choice #step-5 #right { float: left; width: 140px; padding-left: 20px; }
.gaskets-choice #step-5 ul { /* margin-top: 34px;*/ }
.gaskets-choice #step-5 ul li { float: none; }
.gaskets-choice #step-5 ul li ~ li { margin-top: 15px; margin-left: 0;}
.gaskets-choice #step-5 .small { font-size: 8px; display: block; }
.gaskets-choice #step-5 select { width: 80px; cursor: pointer; }
.gaskets-choice #step-5 #left select { width: 80px; cursor: pointer; display: block; margin-left: 10px; }
.gaskets-choice #step-5 #left .customSelect { margin-left: 10px; }
.gaskets-choice #step-5 #right select { width: 80px; cursor: pointer; display: block; margin-left: 20px; }
.gaskets-choice #step-5 #right .customSelect { margin-left: 20px; }
.gaskets-choice #step-5 .required { font-weight: bold; margin-bottom: 20px;  }
.gaskets-choice #step-5 .total-material #left { line-height:32px; width: 140px; line-height: 19px; }
.gaskets-choice #step-5 #right input { border: 1px solid #000; -moz-border-radius: 5px; border-radius: 5px; height: 20px; width: 65px; padding: 2px 5px; margin-top: 10px; }
.gaskets-choice #step-5 #x-value-top { top: 99px; right: 124px; width: 100px; font-size: 16px; }
.gaskets-choice #step-5 #y-value-left  { top: 223px; right: 280px; width: 100px; text-align: right; font-size: 16px; }
.gaskets-choice #step-5 #x-value-plus { top: 115px; left: 177px; }
.gaskets-choice #step-5 #y-value-plus { top: 180px; left: 177px; }
.gaskets-choice #step-5 #required-1 { top: 115px; right: 416px; }
.gaskets-choice #step-5 #required-2 { top: 180px; right: 416px; }

/* step 6 */
.gaskets-choice #step-6 span + div { width: 84%;  }
.gaskets-choice #step-6 > span { margin-top: 20px; }
.gaskets-choice #step-6 > div { float: left; background-repeat: no-repeat; background-position: bottom right; background-color: #fff; color: #ed1c24; text-transform: uppercase; border: 1px solid #000; -moz-border-radius: 20px; border-radius: 20px; }
.gaskets-choice #step-6 #left { float: left; width: 120px; text-align: right; font-size: 14px; font-weight: bold; margin-top: 20px; }
.gaskets-choice #step-6 #right { float: left; width: 120px; padding-left: 20px; margin-top: 20px; }
.gaskets-choice #step-6 ul li ~ li { margin-top: 15px; }
.gaskets-choice #step-6 .small { font-size: 8px; display: block; }
.gaskets-choice #step-6 select { width: 80px; cursor: pointer; }
.gaskets-choice #step-6 #left select { width: 80px; cursor: pointer; display: block; margin-left: 10px; }
.gaskets-choice #step-6 #left .customSelect { margin-left: 10px; }
.gaskets-choice #step-6 #right select { width: 80px; cursor: pointer; display: block; margin-left: 20px; }
.gaskets-choice #step-6 #right .customSelect { margin-left: 20px; }
.gaskets-choice #step-6 #right label { line-height:32px; }
.gaskets-choice #three-sided { margin: 10px 0 0 30px; text-align: center; width: 330px; display: none; }
.gaskets-choice #three-sided span { font-size: 12px; }
.gaskets-choice #three-sided span span { font-style: italic;}
.gaskets-choice #step-6 #required-1 { top: 67px; left: 305px; }
.gaskets-choice #step-6 #required-2 { top: 128px; left: 305px;  }
.gaskets-choice #step-6 #required-3 { top: 186px; left: 305px;  }
.gaskets-choice #step-6 .step-6-2 { display: none; padding-top: 0; }
.gaskets-choice #step-6 .step-6-2-description { font-size: 10px; width: 400px; margin-top: 30px; clear: both; float: left; margin-left: 8px; color: #000; }


/* step 7 */
.gaskets-choice #step-7 span + div { width: 50%; }
.gaskets-choice #step-7 > span { }
.gaskets-choice #step-7 > div { float: left; position:relative; background: #fff; padding: 17px 20px 14px; color: #ed1c24; text-transform: uppercase; font-weight: bold; border: 1px solid #000; -moz-border-radius: 20px; border-radius: 20px; }
.gaskets-choice #step-7 #left { float: left; width: 120px; line-height: 23px; text-align: right; font-size: 14px; }
.gaskets-choice #step-7 #right { float: left; width: 120px; padding-left: 20px; }
.gaskets-choice #step-7 #right select { width: 80px; cursor: pointer; }
.gaskets-choice #step-7 #right input { border: 1px solid #000; -moz-border-radius: 5px; border-radius: 5px; height: 20px; width: 65px; padding: 2px 5px; }
.gaskets-choice #step-7 #left.adjust { line-height: 16px; }
.gaskets-choice #step-7 #required-1 { top: 23px; left: 265px; }

/* step 8 */
.gaskets-choice #step-8 > div { background: none; border: none; }
.gaskets-choice #step-8 input { background: url(../images/bg-submit-btn.jpg) repeat-x #bf151b; color: #fff; font-size: 14px; margin-left: 90px; text-transform: uppercase; padding: 4px 40px; border: 1px solid #000; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer; }

/* popups */
.popup-icon { display: inline-block; width: 20px; height: 20px; background-image: url(../images/icon-info.png); background-color: rgba(0, 0, 0, 0); border: 0;  }
.gaskets-choice .steps > div.popup { display: none; position: absolute; top: 0; left: 0; border-radius: 0; text-transform: none; color: #000; background: #fffde7; border-color: #ed1c24; font: 14px Arial, Helvetica, sans-serif; padding: 10px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); }
.gaskets-choice .steps > div.popup p { margin: 0px; }
.gaskets-choice .steps > div.popup p ~ p { margin-top: 6px; }
.gaskets-choice .steps > div.popup-santoprene { width: 200px; left: 370px; top: 45px; }
.gaskets-choice .steps > div.popup-santoprene span { color: #1c75bc; }
.gaskets-choice #step-5 > div.popup-od { width: 310px; height: 220px; left: 151px; top: 30px; background-image: none; display: none; position: absolute; border-radius: 0; text-transform: none; color: #000; background: #fffde7; border-color: #ed1c24; font: 14px Arial, Helvetica, sans-serif; padding: 10px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); }
.gaskets-choice #step-5 > div.popup-od img { width: 100%; }
.gaskets-choice .steps .popup-foam-fill { width: 200px; height: 64px; left: 391px; top: 10px; background-image: none; display: none; position: absolute; border-radius: 0; text-transform: none; color: #000; background: #fffde7; border-color: #ed1c24; font: 14px Arial, Helvetica, sans-serif; padding: 10px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); border: 1px solid #ed1c24; }
.pu-foam-fill { position: absolute; left: 347px; top: 63px; }