/***********************************
  Forms
***********************************/

input, select {
    border-width: 0px;
    outline: none;
    outline-width: none;
}

/***********************************
  Text Boxes
***********************************/

.textBoxWrap {
    background: url(../images/form/textBox.png) no-repeat top left;
    display: inline-block;
    margin: 1px 10px 0 0;
    height: 21px;
}

.textBoxWrap input {
    background: url(../images/form/textBox.png) no-repeat top right;
    position: relative;
    left: 10px;
    padding: 0 10px 0 0;
    height: 21px;
    color: #fff;
}

.textBoxWrap:hover {
    background-position: left -21px;
}

.textBoxWrap:hover input {
    background-position: right -21px;
}

.textBoxWrap.focus {
    background-position: left -42px;
}

.textBoxWrap.focus input {
    background-position: right -42px;
}

.textBoxWrap.disable {
    background-position: left -63px;
}

.textBoxWrap.disable input {
    background-position: right -63px;
    color: #A0A2A1;
}

/***********************************
  Drop Downs
***********************************/

.selectBoxWrap {
    display: inline-block;
    margin: 1px 15px 0 5px;
    vertical-align: middle;
}

.selectBox.disable > span {
    opacity: 0.5;
}

.selectBoxWrap a, .selectBoxWrap a:hover {
    text-decoration: none;
    cursor: auto;
    outline: none;
}

.selectBoxWrap span {
    background: url(../images/form/select.png) no-repeat top right;
    height: 18px;
    display: block;
    padding-top: 3px;
}

.selectBoxWrap:hover span {
    background-position: right -21px;
    cursor: default;
}

.selectBoxWrap:hover .selectBox.disable span {
    background-position: right 0px;
}


.selectBoxWrap:hover span span {
    background-position: left -21px;
}

.selectBoxWrap:hover .selectBox.disable span span {
    background-position: left 0px;
}

.selectBoxWrap select {
    display: none;
    position: relative;
}

.selectBoxWrap span span {
    background: url(../images/form/select.png) no-repeat top left;
    display: inline-block;
    width: 5px;
    height: 21px;
    position: relative;
    left: -5px;
    vertical-align: top;
    margin: 0px;
    padding-top: 0px;
    top: -3px;
}

.selectBoxWrap span.disable span, .selectBoxWrap span:hover.disable span {
    background-position: left -63;
}

.selectBoxWrap span.disable, .selectBoxWrap span:hover.disable {
    background-position: right -63;
    color: #A0A2A1;
}

.selectBoxWrap.open span {
    background-position: right -42px;
}

.selectBoxWrap.open span span {
    background-position: left -42px;
}

.selectBoxWrap.openUP span span {
    background-position: left -84px;
}

.selectBoxWrap.openUP span {
    background-position: right -84px;
}

.selectBoxDropper {
    position: absolute;
    overflow: visible;
    z-index: 100000;
}

.selectBoxDropper .hidden {
    visibility: hidden;
}

.selectBoxDropper span.ddPopup {
    position: relative;
    height: auto;
    z-index: 500;
    display: block;
    padding: 0px;
    left: -5px;
}

.selectBoxDropper div.outer {
    background: url(../images/form/selectDrop.png) repeat-y top left;
}

.selectBoxDropper div.inner {
    margin-left: 1px;
    background: url(../images/form/selectDrop.png) repeat-y top right;
}

.selectBoxDropper span.ddPopup div.scroll-pane {
    overflow: auto;
}

.selectBoxDropper .ddPopup ul {
    margin: 0px;
    padding: 0 0 6px 0;
    list-style: none;
}

.selectBoxDropper .ddPopup ul li a {
    padding: 2px 0 2px 5px;
    display: block;
    height: 16px;
}

.selectBoxDropper .ddPopup ul li.optionHover a, .selectBoxDropper .ddPopup ul li.optionHover a:hover, .selectBoxDropper .ddPopup ul li a:hover {
    cursor: pointer;
    background: #61737D;
    text-decoration: none;
}

.selectBoxDropper span.ddPopupLower, .selectBoxDropper span.ddPopupUpper {
    height: 5px;
    display: block;
    position: relative;
    top: 0px;
    left: 5px;
}

.selectBoxDropper span.ddPopupLower {
    background: url(../images/form/selectBase.png) no-repeat top right;
}

.selectBoxDropper span.ddPopupUpper {
    background: url(../images/form/selectTop.png) no-repeat top right;
}

.selectBoxDropper span span.ddPopupLower, .selectBoxDropper span span.ddPopupUpper {
    background-position: top right;
}

.selectBoxDropper span span.ddPopupLower span, .selectBoxDropper span span.ddPopupUpper span {
    height: 5px;
    display: block;
    position: relative;
    top: 0px;
    left: -5px;
}

.selectBoxDropper span span.ddPopupLower span {
    background: url(../images/form/selectBase.png) no-repeat top left;
}

.selectBoxDropper span span.ddPopupUpper span {
    background: url(../images/form/selectTop.png) no-repeat top left;
}

/***********************************
  Checks and Radios
***********************************/

.radioWrap, .checkBoxWrap {
    margin-right: 4px;
    cursor: auto;
    text-decoration: none;
}

.radioWrap {
    top: 2px;
}

.radioWrap input, .checkBoxWrap input {
    display: none;
}

.checkBoxWrap span {
    background: url(../images/form/check.png) no-repeat 0 0;
    width: 13px;
    height: 13px;
    display: inline-block;
}


.checkBoxWrap span:hover, .checkBoxWrap span.hover {
    background-position: 0 -13px;
}

.checkBoxWrap span:hover.down, .checkBoxWrap span.down {
    background-position: 0 -26px;
}

.checkBoxWrap span.selected {
    background-position: 0 -39px;
}

.checkBoxWrap span:hover.selected, .checkBoxWrap span.hover.selected {
    background-position: 0 -91px;
}

.checkBoxWrap span.disable {
    background-position: 0 -65px;
}

.checkBoxWrap span.disable.selected {
    background-position: 0 -52px;
}

.radioWrap span {
    background: url(../images/form/radio.png) no-repeat 0 0;
    width: 16px;
    height: 15px;
    display: inline-block;
}

.radioWrap span:hover, .radioWrap span.hover {
    background-position: 0 -15px;
}

.radioWrap span.down {
    background-position: 0 -30px;
}

.radioWrap span.selected, .radioWrap span.hover.selected {
    background-position: 0 -45px;
}

.radioWrap span.selected:hover {
    background-position: 0 -90px;
}

.radioWrap span.disable {
    background-position: 0 -60px;
}

.radioWrap span.selected.disable {
    background-position: 0 -75px;
}

ul.selector .radioWrap, ul.selector .checkBoxWrap {
    float: left;
    width: 20px;
    margin-top: 4px;
}

/***********************************
  File input
***********************************/

.fileInputWrap {
    position: relative;
    display: inline-block;
    width: 250px;
}

.fileInputWrap div.outer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 250px;
}

.fileInputWrap div.inner {
    background: url(../images/form/textBox.png) no-repeat top left;
    display: inline-block;
    margin: 0 10px 0 0;
}

.fileInputWrap input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    -moz-opacity: 0;
    filter: alpha(opacity:0);
    opacity: 0;
    color: #fff;
}

.fileInputWrap div input {
    background: url(../images/form/textBox.png) no-repeat top right;
    position: relative;
    left: 10px;
    width: 125px;
    padding: 0 10px 0 0;
    height: 21px;
    -moz-opacity: 1;
    filter: alpha(opacity:100);
    opacity: 1;
    display: inline-block;
}

.fileInputWrap a {
    margin-left: 10px;
}

/***********************************
 Buttons
***********************************/

button {
    background: none;
    cursor: pointer;
    height: 21px;
    background-repeat: no-repeat;
    background-position: top right;
    font-weight: bold;
    padding: 3px 10px 0 0;
    display: inline-block;
    font-size: 10pt;
    border: 0px;
    vertical-align: top;
    margin: 1px 10px 0 0;
    overflow: visible;
}

button::-moz-focus-inner {
    border: none;
}

button span {
    display: inline-block;
    position: relative;
    left: -5px;
    top: -3px;
    height: 21px;
    width: 10px;
    background-position: top left;
    vertical-align: top;
}

button:hover {
    background-position: bottom right;
}

button:hover span {
    background-position: bottom left;
}

button.two, button.two span {
    background-image: url(../images/buttons/blue.png);
    color: #000;
}

button.one, button.one span {
    background-image: url(../images/buttons/yellow.png);
    color: #000;
}

button.activate, button.activate span {
    background-image: url(../images/buttons/activate.png);
    color: #FFF;
}

button.deactivate, button.deactivate span {
    background-image: url(../images/buttons/deactivate.png);
    color: #FFF;
}

button:disabled, button.one:disabled, button.two:disabled, button:disabled span {
    background-image: url(../images/buttons/deactivate.png);
    color: #FFF;
}

button img {
    vertical-align: top;
    margin: 0 2px 0 0;
}

/***********************************
  Layout
***********************************/

div.buttonBlock {
    text-align: right;
}

div.buttonBlockLeft {
    float: left;
}

div.buttonBlockRight {
    float: right;
    text-align: right;
}

div.siteDrop {
    width: auto;
}

.siteDrop label {
    width: auto;
    min-width: 20%;
    display: inline-block;
    margin-right: 5px;
    height: 21px;
    line-height: 21px;
}

.siteDrop select {
    width: 285px;
}

.field, .multiFieldLine, .optionField {
    margin: 0 0 6px 0;
}

.field label, .multiFieldLine label {
    width: auto;
    min-width: 20%;
    display: inline-block;
    margin-right: 5px;
    height: 21px;
    line-height: 21px;
}

.multiFieldLine .input, .multiFieldLine .label {
    display: inline;
}

.twoColumn .field, .twoColumn .multiFieldLine {
    width: 49%;
    display: inline-block;
}

.fourColumn .field, .fourColumn .multiFieldLine {
    width: 24.5%;
    display: inline-block;
}

.optionField .optionBlock {
    float: right;
}

div.field.fullWidth, div.optionField {
    width: 99%;
}

div.field.absoluteFullWidth {
    width: 100%;
}

.fullWidth.multiFieldLine label {
    min-width: 10%;
}

div.field.fullWidth.indent, div.field.absoluteFullWidth.indent {
    margin-left: 5%;
}

div.field.fullWidth.inline, div.field.absoluteFullWidth.inline {
    display: inline;
}

span.inlineflex {
    display: inline-flex;
}

input.marginleft {
    margin-left: 10px;
}

div.field.fullWidth .label, div.field.absoluteFullWidth .label {
    width: 150px;
    display: inline-block;
}

.field.fullWidth label {
    width: auto;
    min-width: 10%;
    display: inline-block;
}

.horizontalStack {
    display: inline-block;
    width: auto;
}

input.colourPicker {
    width: 1.2em;
}

input.ERROR {

    background-repeat: no-repeat;
    background-position: top right;
    padding: 0 20px 0 -20px;
}

.editableInline {
    cursor: pointer;
    display: block;
}

.keyIndex {
    display: inline-block;
    background: url(../images/general/keyIndex.png) no-repeat;
    font-weight: bold;
    padding: 2px 0 0 0;
    color: #25292C;
    height: 20px;
    width: 25px;
    text-align: center;
    margin: 0 4px 0 2px;
}

div.field.autoWidth {
    width: auto;
}

.menuOption {
    height: 25px;
    vertical-align: top;
}

.menuOption .horizontalStack {
    vertical-align: top;
}

.fieldBlock {
    display: inline-block;
    vertical-align: top;
}

.formPush .fullWidth.multiFieldLine label, .formPush .field.fullWidth label {
    width: 150px;
    display: inline-block;
}

.parent {
    margin-bottom: 0;
}


.fieldSpace {
    padding: 2px 0 2px 0;
}

/***********************************
  Feeedback
***********************************/

.inlineFeedbackWrap {
    height: 40px;
    width: auto;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.inlineFeedback {
    position: absolute;
    font-size: 8pt;
    display: block;
    padding: 2px 0 2px 20px;
    top: 20px;
    width: 150px;
}

.multiFieldLine .input, .multiFieldLine .label {
    display: inline;
}

.multiFieldLine .label {
}

.inlineFeedback.ERROR {
    background: url(../images/icons/error_small.png) no-repeat;
    position: relative;
    top: 0px;
}

.inlineFeedbackWrap.stnd {
    height: 10px;
}

.inlineFeedbackWrap.stnd .inlineFeedback {
    padding: 0 0 0 25px;
    position: static;
}

.inlineHelp {
    position: absolute;
    padding: 10px;
    width: 195px;
}

.inlineHelp .upper {
    background: url(../images/general/hoverToolTipHaloUpper.png) no-repeat;
    display: block;
    height: 6px;
}

.inlineHelp .mid {
    background: url(../images/general/hoverToolTipHaloMid.png) no-repeat center;
    display: block;
    height: auto;
    padding: 0 5px 0 30px;
}

.inlineHelp .lower {
    background: url(../images/general/hoverToolTipHaloLower.png) no-repeat;
    display: block;
    height: 6px;
}

.inlineHelp.block {
    z-index: 100;
}

.inlineHelp.block .mid {
    background-image: url(../images/general/hoverBlockToolTipHaloMid.png);
}

.ui-inline-4 {
    float: left;
    width: 25%;
}

.ui-inline-3 {
    float: left;
    width: 33%;
}

.ui-inline-6 {
    float: left;
    width: 66%;
}

.ui-inline-half {
    float: left;
    width: 50%;
    text-align: center;
}