/* ----------------------------------------------------------------------------
  Purpose:
    Global form styles for HomeDepot.com
    $Last Updated: 10-06-2012 - mxg $
/*  ----------------------------------------------------------------------------
  Table Of Contents
  1. Forms
    a. Overrides, Resets & Styles
    b. Error Controls
    c. Types
    d. Structure
    e. Help and Info Text
    f. Grid 12 Form
    g. Exceptions
    h. IE Hacks
    i. Tooltip
*/


/* 1. Forms
===============================================================*/

/*1a. Overrides, Resets & Styles
====================================*/
input, input[type=text] button, input[type=tel], select, textarea {
  font-family: Arial, Helvetica, sans-serif;
} 
button, input, input[type=text], input[type=tel], select, textarea {
  font-size: 100%;margin: 0;vertical-align: middle;
}
label, input, input[type=text], input[type=tel], button, select, textarea {
  font-size: 12px;font-weight: normal;
  line-height:14px;
} 
button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  border:none;
}

input,input[type=text], input[type=tel], textarea, select, textarea {
  font: normal 12px Arial, Helvetica, sans-serif;
} 
form {
  margin:0;
  padding:0;
}
input[type=password],input[type=text], input[type=tel],input[type=file], textarea, select, span.select {
  border: 1px solid #ccc;
  color: #777;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 4px 4px 4px 10px;
  width: 200px;
  vertical-align:middle;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
}
input[type=password],input[type=text], input[type=tel],input[type=file], textarea {
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1) inset;
}
input[type="checkbox"], input[type="radio"], input[type="image"] {
  width:auto;
  height:auto;
  cursor: pointer;
  border:none;
  box-shadow:none;
  outline:none;
}
.control-group input[type="checkbox"], .control-group input[type="radio"] {
  float:left;
  margin-left:-18px;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

textarea {
  height: auto;
}
select, input[type="file"] {
  height: 28px;line-height: 28px;
}
fieldset {
  margin:0;
  padding:0;
  display:block;
  border:none;
}
legend {
  padding:0;
  display:block;
  font-size:14px;
  line-height:18px;
  margin:0px 0px 10px 0px;
  width:100%;
  font-weight: bold;
  color:#777;
}
legend + .control-group {
  margin-top:15px;
}
label {
  font-size:12px;
  font-weight:bold;
  padding-top:5px;
  display:block;
  color:#777;
}

input[type="password"]:focus, input[type="text"]:focus, input[type="file"]:focus, textarea:focus, input.focus, textarea.focus {
  background-color:#E9F2F5;
  color:#000;
  outline:none;
}

/*Disabled States*/
select[disabled] {
  background-color:#FFF;
  color:#ccc;
  border:1px solid #ccc;
  cursor: not-allowed;
}
.control-group.required span.select.disabled, .control-group span.select.disabled {
  background-color:#FFF;
  color:#ccc;
  border:1px solid #ccc;
  cursor: not-allowed;
}
span.select.disabled .icon-carrot-orange-down {
  background-position: right 2029px;
}
input[disabled], textarea[disabled],input.disabled {
  color:#ccc;
  border:1px solid #ccc;
  background-color:#FFF;
  box-shadow:none;
  cursor: not-allowed;
}
input[readonly],select[readonly],textarea[readonly] {
  cursor: not-allowed;
}
label.control-label.disabled {
  color:#ccc;
}
.control-group span.select.disabled:hover {
  cursor: not-allowed;
}

/*Custom THD controls*/
label.checkbox, label.radio {
  width:216px;
}
label.checkbox:hover, label.radio:hover {
  cursor: pointer;
}
.checkbox-hidden, .controls input[type='checkbox'], .radio-hidden, .controls input[type='radio'] {
  margin-top: 5px;
}

.checkbox-custom, .radio-custom {
  background: url("../images/dwarves.png") repeat center center transparent;
  height:26px;
  width: 25px;
  padding-right:5px;
  cursor: pointer;
  display: inline-block;
  float: left;
  margin-right:5px;
}
.checkbox-custom {
  background-position: -34px 65px;
}
.checkbox-custom-active, .checkbox-custom-indeterminate.checkbox-custom-active {
  background-position: -2px 65px;
}
.checkbox-custom-disabled {
  background-position: -69px 65px;
  cursor: not-allowed;
}
.checkbox-custom-disabled-checked {
  background-position: -103px 65px;
  cursor: not-allowed;
}
.checkbox-custom-indeterminate {
  background-position: -134px 65px;
}

.radio-custom {
  background-position: -35px 29px;
}
.radio-custom-active {
  background-position: -3px 29px;
}
.radio-custom-disabled {
  background-position: -71px 28px;
  cursor: not-allowed;
}
.radio-custom-disabled-checked {
  background-position: -102px 28px;
  cursor: not-allowed;
}

.oneLine .checkbox-custom, .oneLine .radio-custom { 
  margin-top:-5px;
}

/*Interm checkbox styloes*/
ul.intm-checkboxes li {
  margin-left:0px
}
ul.intm-checkboxes li ul li {
  margin-left:15px
}
li.with-image label > .checkbox-custom {
  margin-top:-5px
}
li.with-image > label.control-label.checkbox {
  font-size:18px;
  margin-bottom:0px
}
li.with-image img.parent-image {
  float:left;
  clear: both
}
li.with-image.trans img.parent-image {
  opacity:0.5;
  filter: alpha(opacity=50);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
li.with-image ul {
  float:left;
  width:230px;
}
.controls.custom-control {
  margin:0px;
}
li.with-image input {
  position: absolute \9;
}

/*Custom Select box*/
select {
  width:216px;
}
span.select {
  background: #DDD;
  background: -moz-linear-gradient(top,#FFF 0%, #DDD 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#DDD));
  background: -webkit-linear-gradient(top,#FFF 0%,#DDD 100%);
  background: -o-linear-gradient(top,#FFF 0%,#DDD 100%);
  background: -ms-linear-gradient(top,#FFF 0%,#DDD 100%);
  background: linear-gradient(top,#FFF 0%,#DDD 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#DDD',GradientType=0 );
  position: absolute;
  width:180px;
  padding:4px 24px 4px 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
.control-group.required span.select.focus, 
span.select.focus {
  background:#DDD;
  color:#000;
  background-image: none\9;
  filter:none;
}
select.custom {
  position: relative;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: 5;
  background: #FFF;
}
span.select i.icon-carrot-orange-down {
  position: absolute;
  right:10px;
  top:0;
  background: url('../assets/img/halflings.png') 24px 1457px/27px 5000px;
  height: 20px;
  width: 20px;
}
select.disabled {opacity: 0.5;
  filter: alpha(opacity=60);
}
.control-group.required span.select, 
.control-group.required span.error {
  color:#777;
  font-weight:normal;
}


/*Custom On/Off Slider Control*/
.control-group.slider-group {
  position:relative;
  height:28px
}
.control-group .slider-control input[type="radio"].slider {
  margin-left:75px;
  position:absolute;
}
.controls.slider-control { 
  position: absolute;
  top: 0;
  left:0;
  z-index: 0;
  width: 55px;
  height: 21px;
  padding: 2px 5px 2px 5px;
  background-color: #f96302;
  color:#FFF;
  border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
  border:1px solid #848485
}
.controls.slider-control-off {
  background-color: #b7b9bc
}
.controls.slider-control-off label {
  color:#6b6b6b
}
/*.slider-control input:last-of-type:checked ~ span {
  left: 35px;
}*/
.slider-control span.slideUp {
  left: 35px;
}
.slider-control input:focus + label {
  outline: 1px dotted #FFF;
}
.slider-control .switch-button {
  -moz-transition: all 0.2s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  background: url('../images/button-sprite.png') repeat-x 298px -162px;
  background: -moz-linear-gradient(top,#FFF 0%, #DDD 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#DDD));
  background: -webkit-linear-gradient(top,#FFF 0%,#DDD 100%);
  background: -o-linear-gradient(top,#FFF 0%,#DDD 100%);
  background: -ms-linear-gradient(top,#FFF 0%,#DDD 100%);
  background: linear-gradient(top,#FFF 0%,#DDD 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#DDD',GradientType=0 );
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.45) inset;
  clear: both;
  height: 23px;
  position: absolute;
  top: 0;
  left:0;
  width: 28px;
  z-index: 10;
  border:1px solid #DDD;
  cursor: pointer;
}
.slider-control label {
  color: #FFF;
  float: left;
  margin: 0 5px 0 0;
  position: relative;
  text-align: center;
  width: 25px;
  z-index: 2;
  padding-top:4px;
}
.slider-control label:hover {
  cursor:pointer
}
.slider-control label+input+label {
  margin:0
}

/*1b. Required and Error controls*/
input.error[type="text"], 
input.error[type="tel"], 
input.error[type="password"], 
input.error[type="file"], 
textarea.error, 
span.select.error {
  border: 1px solid #ED1C24 !important;
  color:#ed1c24;
}
input[type=text].required, 
input[type=tel].required, 
textarea, 
select, 
textarea {
  font: normal 12px Arial, Helvetica, sans-serif;
}
.control-group.required span, 
.help-text.required span {
  color:#ed1c24;
  font-weight:bold;
}
ul.error-text, 
ul.server-error-text {
  margin:10px 0 15px;padding:0;color:#ed1c24;min-height:30px;
}
ul.error-text li strong {
  line-height:17px;
}
ul.error-text .btn-clear.btn-xlong {
  color:#ed1c24;
}
.row.top-row ul.error-text {
  margin:15px 0 0 0;
}
span.help-inline.error, 
.control-group.required span.help-inline.error,
p.help-inline.error {
  border:none !important;
  color:#ed1c24;
  font-weight:bold;
}
p.help-inline.error {
  margin:0;
}
p.help-inline.error i {
  margin-top:-2px;
  margin-left: -2px
}
span.error.select,
.control-group.required span.error.select {
  color:#ed1c24;
}

/*this ID is used when using front-end validation*/
ul.error-text#err {
  display: none;
}
ul.error-text#err .icon-error {
  margin-top:-4px;
}

/*Text to be used inbetween form control groups*/
.simple-control-text p {
  margin:0;
}
p.form-descriptive-text {
  width:550px;
  float:left;
}
.form-descriptive-text-right {
  width:135px;
  float:right;
}
.form-descriptive-text-right.long {
  width:150px;
}

/*Various control sizes. Default is 200px*/
.input-mini,input[type=text].input-mini, input[type=tel].input-mini, input[type=password].input-mini, input[type=file].input-mini {
  width:33px;
} 
.input-short,input[type=text].input-short, input[type=tel].input-short, input[type=password].input-short, input[type=file].input-short {
  width:100px;
} 
.input-med,input[type=text].input-med, input[type=tel].input-med,input[type=password].input-med,input[type=file].input-med {
  width:150px;
}
.input-reg,input[type=text].input-reg, input[type=tel].input-reg,input[type=password].input-reg,input[type=file].input-reg {
  width:200px;
} 
.input-xlong,input[type=text].input-xlong, input[type=tel].input-xlong,input[type=password].input-xlong,input[type=file].input-xlong {
  width:300px;
} 

.input-mini.select {
  width:17px;
}
.input-short.select {
  width:64px;
}
.input-med.select {
  width:114px;
}
.input-reg.select {
  width:164px;
}
.input-xlong.select {
  width:264px;
}

select.input-short {
  margin-right:13px;
}
select.input-short.last {
  margin-right:0px;
}

/*for a dummy span input poser*/
.control-group.required #nickname.input-reg {
  width:220px;
  display: inline-block;
  height:20px;
  float: left;
  color:#777;
  padding-top:5px;
}

/*1c. Form Types
===============================*/
form.form-horizontal {
  margin:0;
  padding:0;
  width:600px;
}
form.form-centered {
  margin:0 auto;
  width:530px;
}
form.form-grid-24-2col {
  margin:0;
  width:766px;
}
form.form-grid-24-2col.spad {
  width:737px;
  padding:15px;
}

/*1d. Form structure
===============================*/
.control-group {
  clear:both;
  margin-bottom:10px;
  height:auto;
}
.controls.btn-right button.btn, 
.controls.btn-right a.btn, 
.controls.btn-right input.btn {
  float: right
}

form.form-centered .controls.btn-right.reg {
  margin-right:193px;
}
form.form-centered .controls.btn-right.xlong {
  margin-right:93px;
}
form.form-centered .controls.btn-right.reg {
  margin-right:193px;
}
form.form-centered .controls.btn-right.med {
  margin-right:244px;
}

form.form-horizontal .controls.btn-right {
  margin-right:265px;
}
form.form-horizontal .controls.btn-right.xlong {
  margin-right:164px;
}
form.form-horizontal .controls.btn-right.reg {
  margin-right:265px;
}
form.form-horizontal .controls.btn-right.med {
  margin-right:314px;
}

.controls p {
  clear:both;
  margin-top: 10px
}

.control-group:before,
.control-group:after {
  content:"";
  display: table;
}
.control-label {
  float:left;
  width:110px;
  text-align:left;
  margin-right:10px;
}

label.control-label.control-label-long {
  width:130px;
}
label.control-label.checkbox {
  padding:0;
  height:28px;
  margin-bottom:10px;
  text-align: left;
}

.controls {
  margin-left:120px;
}
.controls.controls-right {
  text-align:right;
}
.controls.btn-controls {
  width:216px;
}
.controls.controls-long {
  margin-left:160px;
}
.btn-controls .btn {
  float:right;
}
.btn-controls .btn.btn-first {
  margin:0 0 0 10px;
}

/*Use this if there is no leading (to the left) label*/
.controls.radio-only,
.controls.checkbox-only {
  margin-left:24px;
}
.controls.radio-only label, 
.controls.checkbox-only label {
  font-weight:normal;
  width:574px;
  text-align:left;
}
.control-sub-label {
  margin:10px 0 0 20px;
}
.controls.checkbox-only .checkbox-custom, 
.controls.radio-only .radio-custom,
.controls.checkbox-only .checkbox-custom-active, 
.controls.radio-only .radio-custom-active {
  margin-left:-24px;
  margin-bottom:15px;
}
.controls.addrBook {
  margin-bottom:0px;
}

/*1e. Help and info text
========================================*/
.help-inline, 
#content p.help-inline {
  display:inline-block;
  vertical-align:middle;
  margin:0px 0px 0px 5px;
  font-size:11px;
  color:#000;
}
.help-inline a {
  cursor: pointer;
}
.help-inline a:hover {
  text-decoration:none;
}
.help-text {
  float:left;
  font-size:10px;
}
.help-text.required {
  font-size:12px;
  margin:0 0 5px 120px;
  font-weight: bold
}
.controls.controls-long .btn-first {
  margin-left:0px;
}

/*1f. Grid 6 Form (382px - 30px = 352px)
=========================================*/
form.form-grid-6,.grid_6 form {
  width:170px;
}
form.form-grid-6 .control-group,.grid_6 form .control-group {
  position: relative;
}
form.form-grid-6 .control-label,.grid_6 form .control-label {
  width:150px;
  float:none;
  text-align:left;
  margin:0;
  padding:0;
  color:#ccc;
  font-weight:lighter;
  position: absolute;
  top:7px;
  left:10px;
}
form.form-grid-6 .controls,.grid_6 form .controls {
  margin-left:0px;
}
form.form-grid-6 .controls input,.grid_6 form .controls input {
  width:150px !important;
}
form.form-grid-6 .controls span.select {
  width:130px !important;
}
form.form-grid-6 .help-text.required,.grid_6 form .help-text.required {
  font-size:10px;
  margin:0 0 0 100px;
}
form.form-grid-6 .control-label.checkbox,.grid_6 form .control-label.checkbox {
  width:auto;
  text-align:left;
}
form.form-grid-6 .controls .btn,.grid_6 form .controls .btn {
  width:165px;
  float: none;
  text-align:center;
}
form.form-grid-6 .btn-first, .grid_6 form .btn-first {
  margin-left:0px;
}
form.form-grid-6 .btn.btn-large-icon, .grid_6 form .btn.btn-large-icon {
  padding:8px 10px 4px}

/*1f. Grid 12 Form (382px - 30px = 352px)
=========================================*/
form.form-grid-12,.grid_12 form {
  width:352px;
}
form.form-grid-12 .control-label,.grid_12 form .control-label {
  width:90px;
  text-align:right;
  margin-right:10px;
}
form.form-grid-12 .control-label-long,.grid_12 form .control-label-long {
  width:150px;
}
form.form-grid-12 .controls,.grid_12 form .controls {
  margin-left:100px;
}
form.form-grid-12 .controls-long,.grid_12 form .controls-long {
  margin-left:160px;
}
form.form-grid-12 h3,.grid_12 form h3 {
  color:#000;
  font-size:14px;
  font-weight:bold;
  margin-top: 15px;
}
form.form-grid-12 h3 span,.grid_12 form h3 span {
  font-weight:normal;
}
form.form-grid-12 .help-text.required,.grid_12 form .help-text.required {
  font-size:10px;
  margin:0 0 5px 100px;
}
.control-label-long > .btn-first {
  margin-left:45px;
}
form.form-grid-12 .controls-long .btn-first,.grid_12 form .controls-long .btn-first {
  margin-right:10px;
  margin-left: -10px;
}
form.form-grid-12 .control-label.checkbox,.grid_12 form .control-label.checkbox {
  width:auto;
  text-align:left;
}
form.form-grid-12 .controls.controls-right,.grid_12 form .controls.controls-right {
  margin-left:140px;
}
form.form-grid-12 .btn-first,.grid_12 form .btn-first {
  margin-left:0px;
}


/*Form Grid 24 two column
===========================================*/
form.form-grid-24-2col .control-group {
  float:left;
  width:382px;
  display: block;
  clear: none;
}
form.form-grid-24-2col .control-group.colspan2 {
  width:766px;
}
form.form-grid-24-2col.spad .control-group {
  float:left;
  width:368px;
  display: block;
  height:30px;
  clear: none;
}


/*1g. Exceptions and Form overidess
================================================*/
#main-search input[type=text].search-block, .noShaddow {
  box-shadow:none;
}
#hd_plp select {
  overflow: auto;visibility: visible !important;
}
.sorting_Ns {
  font-size: 10px;margin-top: 6px;
}
input[type=text]#HeaderArea {
  background: none repeat scroll 0 0 transparent;
  border-bottom: 1px solid #999;
  color: #333;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  margin-left: -1px;
  margin-top: -2px;
  padding: 9px 0 13px 8px;
  text-decoration: none;
  width: 161px;
}


/*1h. IE Hacks of course...
===============================================================*/
.right-rail .spad {
  *padding-bottom:49px;
}
.right-rail .my-store-pod .spad {
  *padding-bottom:24px;
}
form.form-grid-12 .btn {
  *padding-left:0px;
  *padding-right:0px;
}
form.form-grid-12 .control-label.checkbox {
  width:250px\9;
}


/*i.  Tooltip
===============================================================*/
#tooltip {
  position: absolute;
  z-index:9999;
  color:#777;
  font-size:12px;
  width:215px;
  border:1px solid #DDD;
  padding:10px;
  border-radius:3px;
  background-color:#FFF;
  font-weight:normal;
  line-height:14px;
  margin-top:5px;
  margin-left:-5px\9;
  right:0px\9;
  outline:none;
}