/* ------ Basic form styles ------ */
select {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
}

fieldset {
    border: 1px solid #fff;
    background-color: #fff;
    width: auto;
    margin-bottom: 2em;
    position: relative;
    padding-top: 4em;
}

    fieldset p, div.terms p, div.privacy p {
        float: left;
        width: 100%;
        margin: 0.6em 0;
    }

.field-row {
    margin-bottom: 1em;
}

legend {
    color: #222222;
    font-family: 'Bitter', serif;
    font-weight: 400;
    margin: 0 0 0 -20px;
    z-index: 2000 !important;
    font-size: 1.3em;
    background-color: #333;
    color: #fff;
    position: absolute;
    top: 10px;
}

    legend + span {
        display: block;
        margin: 0.4em 0 0.7em;
    }

    legend > span {
        background-image: url("../Content/images/heading-flourish.png");
        background-position: left bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.65em;
    }

        legend > span > span {
            display: inline-block;
            padding: 4px 10px;
        }

input[type="text"], input[type="password"], select {
    border: 1px solid #ccc;
    padding: 5px 3px;
    float: left;
}

input[type="checkbox"] {
    margin: 0.3em 0.5em 0 0;
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
}

input[type="submit"], input#getAddress {
    border-width: 0;
    width: auto;
    padding: 0.4em 0.6em;
    float: right;
}

    input[type="submit"].singleColumnSubmit {
        margin-right: 12%;
    }

input#getAddress {
    background-color: #099;
    color: #fff;
    text-align: center;
    cursor: pointer;
    float: left;
    display: none;
}

select#AddressList {
    margin: 0.6em 0 0 35%;
    float: left;
}

input[type="submit"]:focus {
    background-color: #099;
}

input:focus, select:focus {
    background-color: #eee;
    outline: 2px solid #FCE45C;
}

label {
    display: block;
    float: left;
    width: 100%;
}

    label span {
        color: #666;
        font-size: 0.7em;
        display: inline;
    }

a.secondary {
    background-color: #666 !important;
}

/* ------ Custom form element styles ------ */
input#postcode {
    margin-bottom: 0.5em;
}

.custom-container {
    margin: 0 0 20px 0 !important;
    float: left;
    width: 100%;
}

    .custom-container input, .custom-container label {
        display: block;
        float: none;
        width: 75%;
    }

/* ------ Positioning and clearing ------ */
.left {
    float: left;
}

input.left {
    float: left;
}

a.left {
    float: left;
}

.right {
    position: absolute;
    top: 0;
    right: 30px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

/* ------ Custom layout styles ------ */
.heading-holding-banner {
    background: url("../Content/images/forms/dot-grey-a5.png") repeat;
}

    .heading-holding-banner + div {
        margin-top: 1.5em;
    }

.width-one-quarter, .width-one-third, .width-half {
    width: 98%;
}

.box {
    background-color: #e2e2e2;
}

/* ------ Custom heading/text styles ------ */
.small {
    font-size: 0.9em;
}

h2 {
    margin-left: 0;
    color: #111 !important;
    font-size: 1.5em;
}

h3 {
    margin-left: 0;
    font-size: 1.2em;
}

h2 + p {
    margin-top: 0;
}


/* ------ Lists ------ */
form ul {
    padding-left: 1em;
}

    form ul li {
        margin-bottom: 0.5em;
    }

ul.checklist, ul.positive, ul.negative, ul.terms {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

ul.checklist {
    margin-bottom: 1em;
}

    ul.checklist li {
        float: left;
        display: block;
        width: 100%;
    }

        ul.checklist li label {
            width: 90%;
        }

ul.positive li, ul.negative li {
    padding: 0.1em 0 0.5em 2em;
    margin-bottom: 0.5em;
    border-bottom: 1px dotted #ccc;
}

ul.positive li {
    background: url("../images/forms/complete-step-indicator.png") no-repeat top left;
}

ul.negative li {
    background: url("../images/forms/incomplete-step-indicator.png") no-repeat top left;
}

/* ------ Progress indicator ------ */
ul.step-indicator {
    list-style-type: none;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    width: 100%;
}

    ul.step-indicator li {
        width: 18%;
        padding: 0.5% 1%;
        background: #fff url("../images/forms/inactive-step-indicator.png") no-repeat right center;
        display: block;
        float: left;
        font-size: 14px;
        border-right: 0;
    }

        ul.step-indicator li.last {
            background: #fff url("../images/forms/inactive-step-indicator-last.png") no-repeat right center;
            border-right: 0;
        }

        ul.step-indicator li.active {
            background: #405480 url("../images/forms/active-step-indicator.png") no-repeat right center;
            color: #fff;
        }

        ul.step-indicator li.active-last {
            background: #405480 url("../images/forms/active-step-indicator-last.png") no-repeat right center;
            color: #fff;
        }

            ul.step-indicator li.active span:first-child, ul.step-indicator li.active-last span:first-child {
                color: #fff;
            }

        ul.step-indicator li span:first-child {
            margin: 0 1em 0 30%;
            width: 20px;
            display: block;
            float: left;
            color: #111;
            text-align: left;
            background-color: none;
        }

        ul.step-indicator li span + span {
            display: none;
        }

        ul.step-indicator li.complete {
            background: #fff;
        }

            ul.step-indicator li.complete span:first-child {
                color: #999;
            }

/* ------ Global and inline error message ------ */
p.error {
    border: 1px solid #e48481;
    background-color: #fbecec;
    padding: 0.5em 0 0 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    p.error label, p.error select, p.error input {
        margin: 0 0 0.5em 0;
    }

    p.error input {
        width: 89%;
    }

    p.error label, p.error select {
        width: 94%;
    }

    p.error label {
        margin-left: 0.5em;
    }

    p.error select, p.error input {
        margin-left: 0.5em;
    }

    p.error span {
        font-size: 0.8em;
        color: #CB0D07;
        background: url("../images/forms/inline-error-icon.png") no-repeat left 6px;
        padding-left: 1.7em;
        margin: 0 0.5em;
        float: left;
    }

div.terms p.error label, div.terms p.error input {
    width: auto;
}

div.terms p.error input {
    margin: 0.3em 0.5em 0 0.5em;
}

div.privacy input[type='checkbox'] {
    margin-top: 0.15em;
}

div.validation-summary-valid {
    display: none;
}

.global-error {
    border: 2px solid #CB0D07;
    color: #CB0D07;
    padding: 0 1em;
    margin-bottom: 1em;
    background: #fdf2f2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .global-error.client {
        display: none;
    }

    .global-error p, .global-error span {
        font-family: 'Bitter', serif;
        font-size: 1.2em;
        color: #CB0D07;
    }

    .global-error span {
        line-height: 1.6em;
        margin-top: 0.5em;
        margin-bottom: 1em;
        display: block;
    }

    .global-error ul {
        padding: 0 1.5em 1.5em;
        margin: 0;
    }

.custom-container {
    margin: 0 0 20px 0 !important;
    float: left;
    width: 100%;
}

    .custom-container input, .custom-container label {
        display: block;
        float: none;
        width: 75%;
    }

.emphasisBlock {
    display: inline-block;
    background-color: #FCE45C;
    background-color: rgba(252,228,92,.75);
    padding: .5em;
    font-size: .85em;
    margin-bottom: 1em;
}

.no-bg-color {
    background-color: #fff;
    margin-top: 2em;
}

.grid-within-grid-two-item div {
    position: relative;
}

.toolTip {
    display: inline-block;
    background-color: #FCE45C;
    background-color: rgba(252,228,92,.75);
    padding: .5em;
    font-size: .85em;
    margin-bottom: 1em;
}

.updateSuccess label {
    width: 100%;
    background: #b4de93;
    padding: 0.5em;
}

#signOutWarning {
    padding: 1.5%;
    clear: both;
    margin-top: 2em;
}

/* video styles */
#videoSubmit {
    display: none;
}

#videoPlayer_display .jwpreview {
    background-color: #fff;
}

#videoPlayer, #videoPlayer video {
    height: 180px !important;
}

    #videoPlayer video {
        background-color: #fff;
    }

#videoPlayer, video {
    background-color: #fff !important;
}

    #videoPlayer, #videoPlayer video {
        height: 180px !important;
    }

        #videoPlayer embed, #videoPlayer {
            overflow: hidden;
        }


#videoPlayer {
    text-align: center;
}

    #videoPlayer video {
        margin: 0 auto;
    }

@media only screen and (min-width: 768px) {
    label {
        width: 35%;
        margin-right: 1.4%;
    }

        label span {
            display: block;
            margin-bottom: 0;
            line-height: 0.7em;
        }

        label.checkInputLabel {
            width: 84%;
        }

    input[type="checkbox"] + label {
        padding-top: 0;
    }

    select, p.error select {
        width: 51.52%;
    }

    input, p.error input {
        width: 50%;
    }

        input#postcode {
            margin-bottom: 0;
        }

    .custom-container input, .custom-container label {
        width: 50%;
    }

    .width-one-quarter, p.error .width-one-quarter {
        width: 24%;
        margin-right: 1%;
    }

    .width-one-third, p.error .width-one-third {
        width: 33%;
    }

    .width-half, p.error .width-half {
        width: 50%;
    }

    ul.step-indicator li.complete {
        background: #fff url("../images/forms/complete-step-indicator.png") no-repeat 98% center;
        color: #999;
        border-right: 1px solid #ccc;
        width: 17.8%;
    }

    .global-error p, .global-error span {
        background: url("../images/forms/global-error-icon.png") no-repeat left top;
        padding-left: 2.2em;
    }

    p.error input, p.error select {
        margin-left: 0;
    }

    p.error span {
        margin-left: 36%;
    }

    p.error label {
        width: 33.3%;
    }

    #videoPlayer, #videoPlayer video {
        height: 500px !important;
    }
}

@media only screen and (min-width: 1024px) {
    ul.step-indicator li.active span:first-child {
        color: #405480;
        background-color: #fff;
    }

    ul.step-indicator li.active-last span:first-child {
        color: #405480;
    }

    ul.step-indicator li span:first-child {
        text-align: center;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color: #e5e5e5;
    }

    ul.step-indicator li span + span {
        display: inline;
    }

    ul.step-indicator li span:first-child {
        margin-left: 0;
    }

    #videoPlayer, #videoPlayer video {
        height: 500px !important;
    }

    input.previous {
        max-width: 118px;
    }
}

@media only screen and (max-width: 768px) {
    input {
        width: 100%;
    }
}

a.inline-links {
    float: right;
    margin: 10px 0 10px 0;
}

a.inline-links {
    text-decoration: none;
    color: #fff;
    background: #383838;
    padding: 0.4em;
    display: inline-block;
}

    a.inline-links:hover {
        text-decoration: underline;
    }

.discoverySecondaryCallToActionLink {
    background: #efefef;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 5px 15px;
    margin-right: 10px;
    letter-spacing: 1px;
    border: 0;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
    transition-property: background-color;
    transition-duration: 0.5s;
}


li.containsLink {
    float: left;
    list-style-image: url("../Content/images/list-link-bullet.png");
    margin: 0 30px 10px 0;
    padding: 0 0 0 0;
    width: 42%;
}

textarea#ReasonForLeaving {
    width: 99%;
    margin-bottom: 1em;
}

::-webkit-input-placeholder {
    color: #222;
}

::-webkit-input-placeholder:focus {
    color: #000;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #222;
}

:-moz-placeholder:focus {
    color: #000;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #222;
}

::-moz-placeholder:focus {
    color: #000;
}

:-ms-input-placeholder {
    color: #222;
}

:-ms-input-placeholder:focus {
    color: #000;
}

input.sign-in-input {
    width: 100%;
    max-width: 400px;
    float: none;
}