/*
 * @copyright   © Copyright 2006-2010, epages GmbH, All Rights Reserved.
 *
 * @module      ep.base_uiInput
 *
 * @require     ep.
 *          .base
 *          .base_sprite
 *          .base_uiTooltip
 */

/* http://bit.ly/1MBlVp */
button::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* :ALL */
button,
input,
textarea,
select,
.ep-uiInput,
.InputField.SearchForm {
  position: relative;
  display: inline-block;
  outline: none !important;
  margin: 1px;
  padding: 1px;
  border: 1px solid #ccc;
  color: #000;
  background: #fff;
  resize: none;
}

button,
textarea,
select,
.ep-uiInput,
.InputField.SearchForm {
  vertical-align: middle;
}

/* :HIDE & :CHECKBOX & :RADIO & :FILE */
.ep-uiInput-hidden,
input[type="file"],
.ep-uiInput-file {
  position: relative;
  margin: 0 -14px 0 0;
  padding: 0;
  border: 0;
  width: 14px;
  height: 14px;
    filter: alpha(opacity=0);
  opacity: 0;
  vertical-align: middle;
}

/* :TEXT */
input[type="text"],
.ep-uiInput-text {
  overflow: hidden;
  padding: 3px;
  white-space: nowrap;
}

/* :TEXT:PLACEHOLDER */
.ep-uiInput-text.ep-uiInput-placeholder {
  color: #999;
}

/* :TEXTAREA */
textarea,
.ep-uiInput-textarea {

}

/* :BUTTON */
button,
.LoginButton,
.ep-uiInput-button {
  padding:1px 10px 2px;
  *padding-top:0;
  background: #e2e2e2 center repeat-x;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  *overflow:visible; /* IE7 form-element padding fix http://bit.ly/3Fo9g */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  border-radius: 3px;
}
button.ep-uiInput-button {
  *line-height:12px;
}
button,
.LoginButton,
button.ep-uiInput-button {}

button > *,
.ep-uiInput-button > * {
  vertical-align: middle;
}
/* :BUTTON-sprite */
button .ep-sprite-xs,
.ep-uiInput-button .ep-sprite-xs {
  margin: -3px 4px 0 -4px;
}
.ep-uiInput-buttonSpriteOnly {
  display:block;
}
.ep-uiInput-button .ep-sprite-xs.ep-uiInput-buttonSpriteOnly {
  margin-right: -4px;
}
button .ep-sprite-s,
.ep-uiInput-button .ep-sprite-s {
  margin: -2px 4px 0 -4px;
  *margin-top:0;
}
button .ep-sprite-s.ep-uiInput-buttonSpriteOnly,
.ep-uiInput-button .ep-sprite-s.ep-uiInput-buttonSpriteOnly {
  margin-right: -8px;
  min-width:12px;
}
.ep-uiSpinner-stepper.ep-uiInput-button  .ep-sprite-s {
  margin-top: -1px;
  margin-left:-8px;
}

/* BUTTON-SET */
.ep-uiInput-buttonSet .ep-uiInput-wrap {
  margin-left: 0;
}

.ep-uiInput-buttonSet .ep-uiInput-button  {
  margin-left: 0;
  margin-right: 0;
  border-right-width: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
  border-radius: 0;
}
.ep-uiInput-buttonSet .ep-uiInput-wrap:first-child .ep-uiInput-button {
  margin-left: 2px;
    -moz-border-radius-top-left: 3px;
    -moz-border-radius-bottom-left: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
  border-radius-top-left: 3px;
  border-radius-bottom-left: 3px;
}
.ep-uiInput-buttonSet .ep-uiInput-wrap:last-child .ep-uiInput-button {
  margin-right: 2px;
  border-right-width: 1px;
    -moz-border-radius-top-right: 3px;
    -moz-border-radius-bottom-right: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
  border-radius-top-right: 3px;
  border-radius-bottom-right: 3px;
}
.ep-uiInput-buttonSet .ep-uiInput-wrap:hover .ep-uiInput-button {
  border-right-width: 1px;
}
.ep-uiInput-buttonSet .ep-uiInput-wrap:hover + .ep-uiInput-wrap .ep-uiInput-button {
  border-left-width: 0;
}

/* :SELECT */
.ep-uiInput-select {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
  padding: 0;
}

.ep-uiInput-select[size] {
  height: auto;
}

/* :CHECKBOX */
input[type="checkbox"] + .ep-uiInput-custom,
.ep-uiInput-checkbox   + .ep-uiInput-custom {
  display: inline-block;
  margin: 1px;
  width: 8px;
  height: 8px;
  background:white url(../images/base_uiinput_check.png) no-repeat -17px -3px;
}

input[type="checkbox"]:checked + .ep-uiInput-custom,
.ep-uiInput-checkbox:checked   + .ep-uiInput-custom {
  background-position: -3px -3px;
}

/* :RADIO */
input[type="radio"] + .ep-uiInput-custom,
.ep-uiInput-radio   + .ep-uiInput-custom {
  margin: 0;
  padding:0 0 0 14px;
  height:14px;
  background:white url(../images/base_uiinput_check.png) no-repeat -112px -1px;
}
input[type="radio"]:checked + .ep-uiInput-custom,
.ep-uiInput-radio:checked   + .ep-uiInput-custom {
  background-position: -96px -1px;
}
html[class*=mozilla] .TranslationTable .ep-uiInput-radio {
  top:0px;
}

#StyleExportForm input[type="radio"] {
  margin: 1px;
  opacity:1;
}

/* :FILE */
input[type="file"] + .ep-uiInput-custom,
.ep-uiInput-file   + .ep-uiInput-custom  {
  cursor: pointer;
}
input[type="file"] + .ep-uiInput-custom .ep-uiInput-text,
.ep-uiInput-file   + .ep-uiInput-custom .ep-uiInput-text {
  width: 140px;
}

/* status:HOVER */
.InputField.SearchForm:hover,
input:hover, button:hover,
.ep-uiInput-button:hover,
input[type="checkbox"] + .ep-uiInput-custom:hover,
.ep-uiInput-checkbox   + .ep-uiInput-custom:hover,
input[type="file"] + .ep-uiInput-custom:hover *,
.ep-uiInput-file   + .ep-uiInput-custom:hover * {
  border-color:#666;
}
button:hover,
.ep-uiInput-button:hover,
input[type="file"] + .ep-uiInput-custom:hover .ep-uiInput-button,
.ep-uiInput-file   + .ep-uiInput-custom:hover .ep-uiInput-button {
  background-color:#CFCFCF;
}
.ep-uiInput-radio:hover {
  background-position: -176px -1px;
}
.ep-uiInput-radio.checked:hover {
  background-position: -96px -1px;
}

/* status:FOCUS status:ACTIVE */
input:focus,
textarea:focus,
select:focus,
button:focus,
input:focus + .ep-uiInput,
input:focus + .ep-uiInput-custom .ep-uiInput,
input:active,
textarea:active,
select:active,
button:active,
input:active + .ep-uiInput,
input:active + .ep-uiInput-custom .ep-uiInput {
  border-color: #394F27;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

input[type="radio"]:focus + .ep-uiInput-custom,
.ep-uiInput-radio:focus   + .ep-uiInput-custom {
  background-position: -192px -1px;
}
input[type="radio"]:focus:checked + .ep-uiInput-custom,
.ep-uiInput-radio:focus:checked   + .ep-uiInput-custom
.ep-uiInput-radio.focused.checked {
  background-position: -208px -1px;
}

/* status:DISABLED */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
input:disabled + .ep-uiInput,
input:disabled + .ep-uiInput-custom .ep-uiInput {
  background-color:#f9f9f9;
  border-color:#efefef;
  color:#666;
  cursor:default;
}
button:disabled,
.ep-uiInput-button:disabled,
input:disabled + .ep-uiInput-custom.ep-uiInput,
button:disabled:hover,
.ep-uiInput-button:disabled:hover,
input:disabled + .ep-uiInput-custom.ep-uiInput:hover  {
  border-color:#ccc;
  box-shadow:0 0;
}
input[type="checkbox"]:disabled:checked + .ep-uiInput-custom,
.ep-uiInput-checkbox:disabled:checked   + .ep-uiInput-custom {
  background-position: -35px -3px;
}
input[type="radio"]:disabled + .ep-uiInput-custom,
.ep-uiInput-radio:disabled   + .ep-uiInput-custom {
  background-position: -144px -1px;
}
input[type="radio"]:disabled:checked + .ep-uiInput-custom,
.ep-uiInput-radio:disabled:checked   + .ep-uiInput-custom {
  background-position: -128px -1px;
}



/* :RADIO */
input[type="radio"] + .ep-uiInput-custom,
.ep-uiInput-radio   + .ep-uiInput-custom {
  background-color: transparent !important;
}