/* ---------------------------------------------------------------------
Product Finder CSS

Description: Defines the view model of the Product Finder widget. However, many of the form control styles can be reused
outside of the widget.

Original Author: Matt Duffin
Target Browsers: IE8+, modern desktop browsers, Safari 6 for iOS
------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
 productFinder

 This is a container component for the Product Finder widget.
   - basic subcomponents define heading and body containers
   - parent extension (e.g. .productFinder_static) provide specific dimensions and background images
   - subcomponent extension for additional design options
------------------------------------------------------------------------ */
.productFinder {
     overflow: hidden;
     position: relative;
     padding: 20px;
     padding-right:10px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

.productFinder_static {
     width: 805px;
     height: 310px;
}

.productFinder_toys { background: url(../img/productFinder-bg_toys.jpg) left bottom no-repeat; }
.productFinder_tablet { background: url(../img/productFinder-bg_tablet.jpg) left bottom no-repeat; }
.productFinder_beauty { background: url(../img/productFinder-bg_beauty.jpg) left bottom no-repeat; }

.productFinder_small {
     width: 610px;
     height: 258px;
}   

.productFinder_medium {
     width: 630px;
     height: 400px;
}

.L1L2-template .productFinder_medium {
     margin-left: -20px;
}

.productFinder_medium.productFinder_toys { background: url(../img/productFinder-bg_toys_mini.jpg) 1px bottom no-repeat; }
.productFinder_medium.productFinder_tablet { background: url(../img/productFinder-bg_tablet_mini.jpg) 1px bottom no-repeat; }
.productFinder_medium.productFinder_beauty { background: url(../img/productFinder-bg_beauty_mini.jpg) 1px bottom no-repeat; }

.productFinder_dress { background: url(../img/productFinder-bg_dress.jpg) right top no-repeat; }
.productFinder_medium.productFinder_dress { background: url(../img/productFinder-bg_dress_mini.jpg) right top no-repeat; }

.productFinder-hd {
     font-size: 36px;
     font-weight: bold;
     margin-bottom: 24px;
}

.productFinder-bd > * {
     position: relative;  
     float: left;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

.productFinder-bd > * + * { padding-left: 40px; }

.productFinder_medium .productFinder-bd > * + * { padding-left: 25px; }

.productFinder-bd_divided > *:first-child {
     border-right: 1px solid #6e6e6e;
}
.productFinder-bd_divided > *:first-child:after {
     content: 'or';
     position: absolute;
     right: -8px;
     top: 67px;
     color: #545454;
     font-style: italic;
     font-size: 16px;
     background: #ffffff;
     height: 16px;
     line-height: 16px;
}

.productFinder-submit {
     position: absolute;
     right: 20px;
     bottom: 32px;
     text-align: right;
}

.productFinder_medium .productFinder-submit {
     right: 11px;
     bottom: 11px;
}

/* ---------------------------------------------------------------------
 formControl

 This is a container component for form elements. 
   - the heading (-hd) and body (-bd) have a horizontal layout
   - the pairing (-pair) subcomponent permits two select (drop down) elements to share a row
 ------------------------------------------------------------------------ */
.formControl + .formControl { margin-top: 13px; }

.productFinder_medium .formControl + .formControl { margin-top: 18px; }

.formControl-hd {
     float: left;
     line-height: 40px;
     font-weight: bold;
     font-size: 14px;
}

.productFinder_medium .formControl-hd {
     line-height: 25px;
}

.formControl-hd_stacked {
     float: none;
}

.formControls-pair > * {
     position: relative;
     float: left;
}

.formControls-pair > *:first-child:after {
     content: 'to';
     position: absolute;
     right: -24px;
     top: 33%;
     font-weight: bold;
}

.formControls-pair > * + * { margin-left: 35px; }

/* ---------------------------------------------------------------------
 radioBtn

 This component defines a horizontal set of styled radio buttons.
------------------------------------------------------------------------ */
.radioBtn { 
     position: relative;
     overflow: hidden;
     display: inline-block;
     border-radius: 4px;
}

.radioBtn li {
     float: left;
     width: 52px;
     height: 40px;
     overflow: hidden;
}

.ie8 .radioBtn li { width: 44px; }

.radioBtn input[type="radio"] {
     position: absolute;
     clip: rect(0 0 0 0);
}

.radioBtn label {
     position: relative;
     display: block;
     vertical-align: middle;
     text-align: center;
     z-index: 2;
     line-height: 38px;
     cursor: pointer;
     border-left: 1px solid #bfbfbf;
     border-top: 1px solid #bfbfbf;
     border-bottom: 1px solid #bfbfbf;
}

.radioBtn li:first-child label { border-radius: 4px 0 0 4px; }

.radiobtn-last label {
     border-right: 1px solid #bfbfbf;
     border-radius: 0 4px 4px 0;
}

.radioBtn label {
     font-size: 14px;
     background: #F2F2F2;
     background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0, #F2F2F2),
          color-stop(0.52, #E7E7E7)
     );
     background-image: -o-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: -moz-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: -webkit-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: -ms-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: linear-gradient(to bottom, #F2F2F2 0%, #E7E7E7 52%);
}

/*.radioBtn label:focus { outline: dashed #0069ff; }*/

.radioBtn .isChecked {
     color: #ffffff;
     background: #267397;
     background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0.07, #17465C),
          color-stop(0.52, #267397)
     );
     background-image: -o-linear-gradient(bottom, #17465C 7%, #267397 52%);
     background-image: -moz-linear-gradient(bottom, #17465C 7%, #267397 52%);
     background-image: -webkit-linear-gradient(bottom, #17465C 7%, #267397 52%);
     background-image: -ms-linear-gradient(bottom, #17465C 7%, #267397 52%);
     background-image: linear-gradient(to bottom, #17465C 7%, #267397 52%);
     border-color: transparent;
}

/*.radioBtn input[type="radio"] + label:after {
    content: '';
    position: absolute;
    left: 0;
}*/

/* ---------------------------------------------------------------------
 submit button

 Custom button for the form submission. Designed for use with an anchor element.
------------------------------------------------------------------------ */
.submitBtn {
     display: inline-block;
     cursor: pointer;
     height: 40px;
     line-height: 40px;
     padding: 0 20px;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     background: #267397;
     background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0, #267397),
          color-stop(1, #17465C)
     );
     background-image: -o-linear-gradient(bottom, #267397 0%, #17465C 100%);
     background-image: -moz-linear-gradient(bottom, #267397 0%, #17465C 100%);
     background-image: -webkit-linear-gradient(bottom, #267397 0%, #17465C 100%);
     background-image: -ms-linear-gradient(bottom, #267397 0%, #17465C 100%);
     background-image: linear-gradient(to bottom, #267397 0%, #17465C 100%);
     text-align: center;
     border-radius: 4px;
     border: 1px solid #bfbfbf;
}

.submitBtn:hover { text-decoration: none; }

.submitBtn-text {
     font-size: 16px;
     color: #ffffff;
     font-weight: bold;
}

.submitBtn_isDisabled {
     background: #F2F2F2;
     background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0, #F2F2F2),
          color-stop(0.52, #E7E7E7)
     );
     background-image: -o-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: -moz-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: -webkit-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: -ms-linear-gradient(bottom, #F2F2F2 0%, #E7E7E7 52%);
     background-image: linear-gradient(to bottom, #F2F2F2 0%, #E7E7E7 52%);
     cursor: default;
}

.submitBtn_isDisabled .submitBtn-text {
     color: #333333;
     opacity: 0.5;
}

.ie8 .submitBtn_isDisabled .submitBtn-text { color: #afafaf; }

/* ---------------------------------------------------------------------
 selectCustom

 This component creates a custom select element.
------------------------------------------------------------------------ */
.selectCustom {
     position: relative;
     padding: 0;
     margin: 0;
     overflow: hidden;
     border-radius: 4px;
     background-color: #ffffff;
     background: #f2f2f2;
     border:1px solid #ccc;
     background-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0, #f2f2f2),
          color-stop(0.52, #e7e7e7)
     );
     background-image: -o-linear-gradient(bottom, #f2f2f2 0%, #e7e7e7 52%);
     background-image: -moz-linear-gradient(bottom, #f2f2f2 0%, #e7e7e7 52%);
     background-image: -webkit-linear-gradient(bottom, #f2f2f2 0%, #e7e7e7 52%);
     background-image: -ms-linear-gradient(bottom, #f2f2f2 0%, #e7e7e7 52%);
     background-image: linear-gradient(to bottom, #f2f2f2 0%, #e7e7e7 52%);
}

/*.selectCustom_xl,
.ie8 .selectCustom_xl { width: 300px; }

.productFinder_medium .selectCustom_xl { width: 285px; }*/

.selectCustom select {
     padding: 9px 8px;
     width: 130%;
     font-size: 14px;
     border: 0;
     box-shadow: none;
     background-color: transparent;
     background-image: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.selectCustom:before {
     content: '';
     border-left: 1px solid #bfbfbf;
     position: absolute;
     z-index: 2;
     right: 33px;
     top: 2px;
     height: 35px;
     width: 1px;
}

.selectCustom:after {
     content: " ";
     top: 50%;
     left: 92%;
     border: solid transparent;
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: rgba(0, 0, 0, 0);
     border-top-color: #000000;
     border-width: 5px;
     margin-top: -2px;
     z-index: 2;
}

.selectCustom select:focus { outline: none; }

.ie8 .selectCustom.isFocused {
     outline: #000 solid 1px;
}
.selectCustom_pair,
.ie8 .selectCustom_pair { /* width: 110px; */ }
.selectCustom_pair:after  { left: 79%; }

.isFocused,
.submitBtn:focus { 
     -webkit-box-shadow: 0px 0px 1px 1px #000;
     box-shadow: 0px 0px 1px 1px #000;
     outline: 0;
}
.ie8 .isFocused { outline: solid 2px #cccccc; }

.ie9 .productFinder legend { margin-left: 0; }