/*

Styled Form elements that can be used across the Platform
(first implemented on conversation page 01/2014)

A prefix of "ap" is added referring to "Advertiser Platform"
these styles are not intended for public pages "hl", keeping
Platform and Public pages separate.

BEM class names are used.
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

.block{}
.block__element{}
.block--modifier{}

Example markup for a block containing
2 inline form elements with labels, 1 left and right spaced input and label, plus a submit button
   <div class="panel form-panel group">
        <h3 class="panel__heading">Dates</h3>
        <div class="form-row">
            <div class="form-row--control form-row--control__inline">
                <label for="arrive">Arrive</label>
                <input id="arrive" type="text" />
            </div>

            <div class="form-row--control form-row--control__inline">
                <label for="depart">Depart</label>
                <input id="depart" type="text"  />
            </div>
        </div>

        <div class="form-row group">
            <div class="form-row--control">
                <div class="form-row__item-wrap--lft">
                    <label for="price7Nights">Rental cost for 7 nights</label>
                </div>
                <div class="form-row__item-wrap--rht">
                    <p>£ <input id="price7Nights" type="text" value="700.00" class="button-icon-space-right"></p>
                </div>
            </div>
        </div>
        <div class="form-row group">
            <div class="form-row--control">
                <button type="submit" class="ap-button ap-button--medium ap-button--positive">Send with quote</button>
            </div>
        </div>
    </div>
*/

fieldset {
    border:0;
}

textarea {
    font-family: Arial;
    line-height: 1.2em;
    padding:.25em;
    -webkit-ox-sizing: border-box;
    -moz-box-sizing  : border-box;
    box-sizing       : border-box;
    font-size:100%;
}
/* ==============================
   Form Panel, is a block container
   ============================== */
.form-panel .panel__col--lft {
    margin-right: 3%;
    width: 75%;
}

.form-panel .panel__col--rht {
    width:22%;
}

.form-panel  .panel__1column {
    width:auto;
}
/* ==============================
   Form Row
   ============================== */

.form-row,
.form-row--border-bott,
.form-row--border-top {
    margin:0 0 1.5em;
    font-size:14px;
    position:relative;
}

.form-row:last-of-type {
    margin-bottom:0;
}

.form-row--border-bott {
    border-bottom:1px solid #CCCCCC;
    margin-bottom:1.5em;
    padding-bottom:1em;
}

.form-row--border-top {
    border-top:1px solid #CCCCCC;
    margin-top:1em;
    padding-top:1.5em;
}

.form-row__title {
    font-size:114%;
    line-height: 1.2em;
    font-weight:bold;
}

.form-row__label {
    line-height:1.2em;
}

.form-row__label--top-margin {
    margin-top:1em;
}

.form-row__item-wrap {
    margin-bottom:1em;
}

.form-row__item-wrap--top-margin {
    margin-top:1em;
}

/* container for left element, usually a Label */
.form-row__item-wrap--lft {
    float:left;
    line-height:2em;
    min-width:11em;
}

/* container for right element, usually a form input */
.form-row__item-wrap--rht {
    float:right;
    line-height:2em;
    min-width:6em;
}

.form-row__item-wrap--rht * {
    font-size:18px;
    margin:0;
}

.form-row__item-wrap--rht select {
    font-size:100%;
}

.form-row__item-wrap--rht label {
    font-size:15px;
}

.form-row--control__inline {
    display:inline;
    margin-right:1em;
}

.form-row--control__inline--block {
    display:inline-block;
    vertical-align:top;
}

.form-row--control__inline--block label {
    display:block;
    margin-bottom:1em;
}

.form-row .icon {
    margin:0 0 0 0.5em;
}

.form-row .icon-expand {
    margin:0 0.5em;
}

.form-row .currency-symbol {
    margin-right:0.5em;
}

.panel.form-panel label,
.panel.form-panel input,
.panel.form-panel textarea {
    font-family: arial;
    font-size:16px;
    font-weight: normal;
}

/* 1 column panel */
.panel__1column .form-row__item-wrap--lft {
    min-width:12em;
}

.panel__1column .form-row__item-wrap--rht {
    float:left;
}


/* ==============================
   Text Input
   ============================== */
.form-panel input[type='password'],
.form-panel input[type='text'],
.form-panel input[type='tel'],
.form-panel input[type='number'] {
    border: 1px solid #959595;
    border-width:2px 1px 1px;
    border-radius: 0.25em;
    color:#333;
    font-size:18px;
    padding: 0.3em 0.25em;
    width: 5em;
    box-shadow:0 0 0 rgba(0,0,0,.5);
    -webkit-transition: box-shadow .5s;
    -moz-transition   : box-shadow .5s;
    transition        : box-shadow .5s;
}

.form-panel input[type='password']:focus,
.form-panel input[type='text']:focus,
.form-panel input[type='tel']:focus,
.form-panel input[type='number']:focus {
    box-shadow:0 0 4px rgba(0,0,0,.4);
}

.form-panel input.narrow[type='password'],
.form-panel input.narrow[type='text'],
.form-panel input.narrow[type='tel'],
.form-panel input.narrow[type='number'] {
    width:2.5em;
    text-align:center;
}

.form-panel input.wide[type='password'],
.form-panel input.wide[type='text'],
.form-panel input.wide[type='tel'],
.form-panel input.wide[type='number'] {
    width:10em;
}

.form-panel input.wider[type='password'],
.form-panel input.wider[type='text'],
.form-panel input.wider[type='tel'],
.form-panel input.wider[type='number'] {
    width:22em;
}

.form-row__item-wrap--rht input[type='password'],
.form-row__item-wrap--rht input[type='text'],
.form-row__item-wrap--rht input[type='tel'],
.form-row__item-wrap--rht input[type='number'] {
    text-align: right;
}

.right-align-fields .form-row__item-wrap--rht input[type='password'],
.right-align-fields .form-row__item-wrap--rht input[type='text'],
.right-align-fields .form-row__item-wrap--rht input[type='tel'],
.right-align-fields .form-row__item-wrap--rht input[type='number'] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    text-align: left;
}

.form-row input[disabled='disabled'],
.form-row button[disabled='disabled'],
.form-row select:disabled
{
    background: #eee;
}


/* with a datepicker icon */
.form-panel input.datepicker {
    background:url('/content/assets/hl-loggedinpages/images/ui/availability/calendar.gif') 95% 50% no-repeat #ffffff;
    padding-right: 24px;
    width: 5.5em;
}

.form-panel input.datepicker[disabled] {
    background-image: none;
    border-color: #FFFFFF;
}

/* ==============================
   Select Combo Box
   ============================== */
.ap-select {
    background: #f5f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e8e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e8e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e8e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e8e7e7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e8e7e7 100%); /* W3C */    border: 1px solid #BABABA;
    border-radius: 0.2em;
    color:#333;
    font-size: 14px;
    font-family: arial;
    height:35px;
    padding: 0.55em .5em;
}


/* ==============================
   Action Buttons
   e.g.  <button class="ap-button ap-button--large ap-button--positive">Send with quote</button>
   ============================== */
.ap-button {
    background: #f5f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff  0%, #e5e4e4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff ), color-stop(100%,#e5e4e4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff  0%,#e5e4e4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff  0%,#e5e4e4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff  0%,#e5e4e4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff  0%,#e5e4e4 100%); /* W3C */
    box-shadow:none;
    border-radius:4px;
    border:1px solid #ccc;
    color:#333333;
    cursor:pointer;
    font-weight:normal;
    padding:5px 20px;
    font-size:14px;
    font-family: arial;
    outline:none;
    min-width:250px;

    /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
}

.ap-button:hover {
    text-shadow:none;
}
.ap-button--small {
    font-size:14px;
}

.ap-button--small.ap-button--positive,
.ap-button--small.ap-button--negative {
    padding: 6px 21px;
}

.ap-button--medium {
    padding: 8px 10px;
    font-size:18px;
    min-height: 39px;
}

.ap-button--medium.ap-button--positive,
.ap-button--medium.ap-button--negative {
    padding: 9px 11px;
}

.ap-button--large {
    padding: 14px 20px;
    font-size: 22px;
    min-height: 56px;
}

.ap-button--large.ap-button--positive,
.ap-button--large.ap-button--negative {
    padding: 15px 21px;
}

/* Green */
.ap-button--positive {
    background:none;
    background-color:#69BE28;
    border-width: 0;
    color:#fff;
}

.ap-button--positive.disabled {
    pointer-events: none;
    background-color:lightgray;
    color:darkgray;
}


/* Red */
.ap-button--negative {
    background:none;
    background-color:red;
    border-width: 0;
    color:#fff;
}

/* ==============================
   Button Group
   ============================== */
.button-icon-space-right {
    margin-right:2.5em;
}

/* ajax spinner added after so need less margin */
.busySpinner.button-icon-space-right {
    margin-right:1.6em;
}

.button-group * {
    box-shadow:none;
    float:left;
}

.button-group label {
    margin-right:1em;
}

.button-group input {
    width:3em;
}

.button-group__item {
    background: #f5f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e8e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e8e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e8e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e8e7e7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e8e7e7 100%); /* W3C */
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
    border: 1px solid #959595;
    cursor:pointer;
    display: inline-block;
    height: 1.95em;
    font-size:120%;
    padding: 0;
    width: 2.5em;
}
.button-group__item--lft {
    border-radius:0.25em 0 0 0.25em;
    border-right:0;
    margin-left:.5em;
}

.button-group__item--rht {
    border-radius:0 0.25em 0.25em 0;
}

.button-group__item.selected {
    background: #f5f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(100%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 100%); /* W3C */
    color:#fff;
}



/* ==============================
   Textarea
   ============================== */
.form-panel textarea {
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
    border:1px solid  #CCCCCC;
    border-radius: 0.5em;
    border-top-width: 2px;
    font-family: arial;
    margin: 0 0 1em;
    padding: 0.5em;
    width: 100%;
}



/* ==============================
   Errors
   ============================== */
#errorWrapper {
    margin-bottom:1em;
}

.panel.panel--errors,
.panel--errors {
    background-color: #FEF7F7;
    border-color: #DF3034;
    border-style: dotted;
}

.error,
.panel--errors a,
.panel--errors__list,
.form-panel .error-msg {
    color:#DF3034;
}

.panel--errors a {
    text-decoration: underline;
}

label.error span {
    display:none;
}

span.error-msg {
    display:none;
}

label.error span.error-msg {
    display:inline-block;
}

.panel--errors a:hover {
    color:#3399FF;
}

.panel--errors__list {
    list-style-type: decimal;
    margin: 0.75em 0 0.5em 1.5em;
}

.form-panel input[type="password"].error,
.form-panel input[type="email"].error,
.form-panel input[type="text"].error,
.form-panel input[type="number"].error,
.form-panel input[type="tel"].error,
.conversation-form.error textarea {
    border-color: #DF3034;
    box-shadow: 0 0 5px #DF3034;
}

.conversation-form.error span {
    color:#333;
}


/* ==============================
   Responsive
   ============================== */

/* Smart phone */
@media screen and (min-width :320px) and (max-width :767px) {

}

/* Ipad upright */
@media screen and (min-width :768px) and (max-width :1023px) {

}

/* Smart phone and tablet vertical */
@media screen  and (max-width :767px) {

    .form-panel .panel--col {
        float: none;
        width:auto;
    }

    /* stack form fields */
    .form-row__item-wrap--lft,
    .form-row__item-wrap--rht {
        float:none;
    }
    .form-panel input.wider[type="text"] {
        width: 100%;
    }
    .form-panel .panel__col--lft {
        width: auto;
    }

    .form-row--control__inline {
        display: block;
        margin-bottom: 1em;
        margin-right: 1em;
    }
    .form-row--control__inline label {
        display: inline-block;
        min-width:6em;
        margin-bottom: .5em;
    }
    .ap-select {
        width:100%;
        margin:.5em 0;
    }
}

/* Ipad landscape */
@media screen and (min-width :768px) and (max-width :1024px) {

}

/* Desktop */
@media screen and (min-width :1025px) {

}

/* ==============================
   Button Group
   ============================== */
.button-icon-space-right {
    margin-right:2.5em;
}

.button-group * {
    box-shadow:none;
    float:left;
}

.button-group label {
    margin-right:1em;
}

.button-group input {
    width:3em;
}

.button-group__item {
    background-color: #fff;
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
    border: 1px solid #959595;
    cursor:pointer;
    display: inline-block;
    height: 1.95em;
    font-size:120%;
    padding: 0;
    width: 2.5em;
}
.button-group__item--lft {
    border-radius:0.25em 0 0 0.25em;
    border-right:0;
    margin-left:.5em;
}

.button-group__item--rht {
    border-radius:0 0.25em 0.25em 0;
}

.button-group__item.selected {
    background-color: #ccc;
}



/* ==============================
   Textarea
   ============================== */
.form-panel textarea {
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
    border:1px solid  #CCCCCC;
    border-radius: 0.5em;
    border-top-width: 2px;
    font-family: arial;
    margin: 0 0 1em;
    padding: 0.5em;
    width: 100%;
}


/* ==============================
   Responsive
   ============================== */

/* Smart phone */
@media screen and (min-width :320px) and (max-width :767px) {
    .form-panel .panel--col {
        float: none;
        width:auto;
    }
}

/* Ipad upright */
@media screen and (min-width :768px) and (max-width :1000px) {

}

/* Smart phone and tablet */
@media screen and (min-width :320px) and (max-width :767px) {

    /* stack form fields */
    .form-row__item-wrap--lft,
    .form-row__item-wrap--rht {
        float:none;
    }
    .form-panel input.wider[type="text"],
    .form-panel input.wider[type="password"] {
        width: 100%;
    }
    .form-panel .panel__col--lft {
        width: auto;
    }

    .form-row--control__inline {
        display: block;
        margin-bottom: 1em;
        margin-right: 1em;
    }
    .form-row--control__inline label {
        display: inline-block;
        min-width:6em;
    }

}

/* Ipad landscape */
@media screen and (min-width :768px) and (max-width :1024px) {

}

/* Desktop */
@media screen and (min-width :1025px) {

}