@orange: #f58025;
@navy: #15145f;
@font: #333333;
@copyFont: #666;
@heading: #324775;
/*___________________________________________________________________________________________________ Chrome & Basics */

html, body { height: 100%; background-color: white; font-family: arial, verdana, sans-serif; color: @font }

.content-container {
    overflow: hidden;
}

#content .content-container {
    padding-top: 30px;
}

strong { font-weight: bold; }

a { color: @navy; font-weight: bold; outline:none;     display:inline-block; }
a:hover { text-decoration: underline; color: @orange; }

/* Button */

.button {
    display: block;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    overflow: hidden;
    a {
        display: block;
        color: white;
        text-decoration: none;
        text-align: center;
        span {
            display: block;
            padding-top: 7px;
            height: 39px;
        }
    }

}



/* bread crumbs */

#bread-crumbs {
    ul {
        margin-top: 1em; padding-bottom: 10px;
        li {
            display:block; list-style-type:none; font-size: 1.2em; line-height: 1.5em; text-align: left; float: left; color: @navy; font-weight: bold;
            a { display:block; outline:none; color: #7685c2; text-decoration: none; line-height: 150%; padding-right: 1px; margin-right: 5px; }
            a:hover { color: @orange; }
            a:after { content: "\00A0\00A0\00A0" url("/image/public/link-arrow.png") }
        }
    }
}

/* lists of links */

.copy ul.links {
    padding-left: 0;
}

ul.links li {
    display:block;
    padding-left: 0;
    list-style: none inside;
    font-size: 1.2em;
    text-align: left;
    line-height: 0.5em;
    a {
        font-weight: bold; line-height: 175%;
    }
}


ul.ticks {
    margin-left: 1em;
    li {
        list-style-image: url("/image/public/landing/orange-on-white-tick.gif");
        margin-left: 0.5em;
    }
}


a { color: @navy; }

ul.links li a,
a.link,
a.arrow {
    text-decoration: none;
}

.copy a:hover,
ul.links li a:hover,
a.link:hover,
a.arrow:hover
{ text-decoration: underline; color: @orange; }

ul.links li a:after,
a.arrow:after
{ content: "\00A0" url("/image/public/link-arrow.png"); }

/*______________________________________________________________________________________________________________ copy */

.column-1 .copy {
    padding-right: 2em;
}

.copy {
    color: @copyFont;
    font-size: 1.2em;

    h1 {
        color: @heading;
        font-size: 2em;
        font-weight: bold;
        line-height: 140%;
        margin-bottom: 0.5em;
    }

    h2 {
        color: @heading;
        font-size: 1.8em;
        line-height: 140%;
        margin-bottom: 0.5em;
    }

    h3 {
        color: @heading;
        font-size: 1.4em;
        line-height: 140%;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    p, dd {
        line-height: 150%;
        margin-bottom: .9em;
    }

    p.sub-note {
        color: #bbb;
        font-size: .9em;
    }

    li {
        color: #666;
        line-height: 150%;
        margin-bottom: .2em;
    }

    ul { margin-bottom: 2em; }

    p.introductory {
        color: black;
        font-size: 1.2em;
        line-height: 150%;
        margin-bottom: 1.4em;
    }

    ul.introductory {
        font-size: 1.1em;
    }

    .directory {
        dt {
            color: @orange;
            font-size: 1.5em;
            line-height: 140%;
            margin-bottom: 0.5em;
            float: none;

            a { color: @orange; }
        }

        dd { margin-left: 1em; }
    }

    dt {
        float: left;
        line-height: inherit;
        margin-bottom: 0.25em;
    }
    dd {
        font-weight: bold;
        line-height: inherit;
        margin-bottom: 0.25em;
    }

    ul.links li,
    ul.links {
        font-size: inherit;
    }

    ul {
        list-style: disc outside;
        padding-left: 1.5em;
    }

    ol {
        list-style: decimal outside;
        padding-left: 1.5em;
    }

    strong {
        color: black;
        font-weight: bold;

        strong{
            color: @orange;
        }
    }

    em {
        text-decoration: underline;
    }

    em.caution {
        text-decoration: none;
        color: red;
    }


}

/*___________________________________________________________________________________________________ accordion */

.accordion h3 {
    margin-bottom: 0;
}

.accordion h3.ui-state-active a {
    color: @heading !important;
}

/*___________________________________________________________________________________________________ button */


a.button  {
    padding: 0;
    margin: 0;
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: white;
    cursor: pointer;
    height: 47px;
    background: url("/image/public/buttons/copy-button-back.gif") right 0 no-repeat;
}

a.button:hover {
    color: #161360;
    text-decoration: none;
    background: url("/image/public/buttons/copy-button-back.gif") right -47px no-repeat;
}

a.button span {
    display: block;
    padding: 10px 50px 10px 30px;
    height: 27px;
    background: url("/image/public/buttons/copy-button-front.gif") left 0 no-repeat;
}

a.button:hover span {
    background: url("/image/public/buttons/copy-button-front.gif") left -47px no-repeat;
}

a.button.disabled{
    color: #161360;
    text-decoration: none;
    background: url("/image/public/buttons/copy-button-back.gif") right -47px no-repeat;
}
a.button.disabled span{
    background: url("/image/public/buttons/copy-button-front.gif") left -47px no-repeat;
}

/*___________________________________________________________________________________________________ small */


a.button.small  {
    height: 27px;
    display: inline-block;
    background: url("/image/public/buttons/button-back-small.gif") right 0 no-repeat;
}

a.button.small:hover {
    background: url("/image/public/buttons/button-back-small.gif") right -27px no-repeat;
}

a.button.small span {
    font-size: 0.8em;
    text-align: center;
    padding: 5px 50px 0 20px;
    background: url("/image/public/buttons/button-front-small.gif") left 0 no-repeat;
}

a.button.small:hover span {
    background: url("/image/public/buttons/button-front-small.gif") left -27px no-repeat;
}

/*___________________________________________________________________________________________________ small - no arrow */

a.button.small.no-arrow span {
    padding: 5px 30px;
}

a.button.small.no-arrow {
    background-image: url("/image/public/buttons/button-back-small-no-arrow.gif");
}

a.button.small.no-arrow:hover {
    background-image: url("/image/public/buttons/button-back-small-no-arrow.gif");
}

/*___________________________________________________________________________________________________ small - bad-news */

.bad-news a.button.small span,
.bad-news a.button.small:hover span {
    background-image: url("/image/public/buttons/button-bad-news-small-front.gif");
}


.bad-news a.button.small,
.bad-news a.button.small:hover {
    background-image: url("/image/public/buttons/button-bad-news-small-back.gif");
}

/*___________________________________________________________________________________________________ contact */

.contact {
    font-size: 1.2em;
    margin-bottom: 1.5em;
    .name {
        font-size: 1.2em;
        color: black;
        font-weight: bold;
    }
    .position {
        font-size: 1.2em;
        font-style: italic;
        margin-bottom: 0.5em;
    }
    .address {
        margin-bottom: 0.5em;
    }
    dt,
    dd {
        line-height: inherit;
        font-size: inherit;
        color: inherit;
        padding: 0; margin: 0;
    }
    dt {
        float: left;
        width: 5em;
    }
    dd { color: black; }
}




/*___________________________________________________________________________________________________ navigation-bar */

.navigation-bar { background-color: #0b1c5c; color: #b2bade;
    ul{ position:relative; margin: 0; overflow: hidden;
        li { display:block; float:left; list-style-type:none; font-size: 1.25em; text-align: center;
            a { display:block; outline:none; color: #b2bade; text-decoration: none; font-weight: bold; }
            a:hover { color: #f5f5f5; }
        }
        li.current a { color: white; }
    }
}


/*********************************************************************************************************************** header */

/*_____________________________________________________________________________________________________________ logo */


#title .logo {      width: 324px; height: 63px; display: block; float: left; background: url("/image/public/motorweb-logo.gif") left  15px no-repeat; text-indent: -9000px; }
#header-nav .logo { width: 324px; height: 37px; display: block; float: left; background: url("/image/public/motorweb-logo.gif") left -48px no-repeat; text-indent: -9000px; }


/*_____________________________________________________________________________________________________________ title */


#title { background-color: white; color: @heading; }

#title h1 { font-size: 24px; margin-left: 0; padding-top: 27px; padding-bottom: 0; float: left;  }
#title h1 span { font-size: 17px; position: relative; top: -2px; padding-left: 0.5em; }
#title h1 span span{ font-size: 18px; position: relative; top: 2px; padding: 0; }
#title h2 { font-size: 16px; margin-left: 20px; padding-top: 34px; padding-bottom: 0; float: left; }

#title #skip-nav-link { display: block; width: 0; height: 0; overflow: hidden; }

#title #owEightHundred {
    margin-top: 3px;
    float: right;
    text-align: right;
    width: 150px;
    margin-left:50px;
    background: url("/image/public/landing/chat.gif") left 4px no-repeat;
}

#title #owEightHundred p {
    display: block;
    text-decoration: none;
    color: @heading;
    /*font-weight:bold;*/
    font-size: 2em;
}

/*___________________________________________________________________________________________ Motor industry site tab */

#title #motor-industry-site-tab-place-holder,
#title #motor-industry-site-wrapper {
    float: right;
    width: 230px;
    font-size: 12px;
    font-weight: normal;
    background-color: @orange;
}

#title #motor-industry-site-tab {
    color: @heading;
    font-size: 1.2em;
    padding: 7px 10px 0 10px;
    text-align: center;
    background: url('/image/public/motor-industry-site-tab.gif') top;
}

#title #motor-industry-site-tab a {
    font-weight: normal;
    display: inline;
    text-decoration: none;
}

#title #motor-industry-site-tab a:hover {
    text-decoration: underline;
    color: inherit;
}

#title #motor-industry-site-tab a::after {
    content: "\00A0" url("/image/public/form-blue-link-arrow.gif");
}

#title #motor-industry-site-tab #industry-icon {
    float: right;
}

#title #motor-industry-site-dropdown {
    position:absolute;
    width: 230px;
    z-index:100;
}

#title #motor-industry-site-wrapper .dropdown-content {
    color: @heading;
    background-color: #FCDB95;
    border: @heading solid 1px;
    border-top-width: 1px;
    padding-top: 10px;
}

#title #motor-industry-site-wrapper .dropdown-content p {
    padding: 0 12px 10px 12px;
}

#title #motor-industry-site-wrapper .dropdown-content li {
    padding-left: 22px;
    padding-bottom: 10px;
}

#title #motor-industry-site-wrapper .dropdown-content .phone-number {
    font-size: 200%;
    text-align: center;
}

#title #motor-industry-site-wrapper .tab-footer {
    height: 7px;
    background: url('/image/public/motor-industry-site-tab.gif') bottom;
}

#title #motor-industry-site-wrapper .dropdown-header {
    height: 7px;
    background: @orange url('/image/public/motor-industry-site-tab.gif') top;
}

#title #motor-industry-site-tab-place-holder {
    background: none;
}

/*____________________________________________________________________________________________________ navigation-bar */


#header-nav.navigation-bar { background: url("/image/public/header-nav-backgroud.gif") left top repeat-x; border-bottom: 1px solid #7d89be; }
#header-nav.navigation-bar ul{ height:38px; margin: 0 0 0 324px; width: 600px }
#header-nav.navigation-bar ul li.first { border-left: 1px solid #151548; }
#header-nav.navigation-bar ul li.last { border-right: 1px solid #3e4f8f; }
#header-nav.navigation-bar ul li a { height:27px; padding: 11px 0.7em 0 0.7em; border-left: 1px solid #3e4f8f; border-right: 1px solid #151548; }
#header-nav.navigation-bar ul li a:hover { background: url("/image/public/header-nav-rollover.gif") left top repeat-x; }

/*********************************************************************************************************************** landing Page */

/*___________________________________________________________________________________________________ testimonial */

.testimonial {
    margin-bottom: 1em;
}

.testimonial blockquote {
    color: @copyFont;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.5em;
    margin-bottom: .5em;
    margin-left: 4em;
}

.testimonial blockquote.vendor {
    color: black;
    margin-left: 2em;
    padding-left: 1em;
    font-style: normal;
    border-left: 1px solid #aaa;
}

.testimonial cite {
    display: block;
    color: black;
    /*font-weight: bold;*/
    text-align: right;
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 0.5em;
    margin-left: 4em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #eeeeee;
}

.testimonial .star-rating {
    float: left;
    margin-right: 1em;
}

/*___________________________________________________________________________________________________ feefo */

#fee-fo {
    display: block;
    width: 194px;
    height: 44px;
    border: 2px solid gray;
    background: none;
}

#badge-fee-fo-link,
#fee-fo {
    margin-right: 2em;
    margin-top: 3em;
}

#fee-fo-link {
    background: none;
}


/*___________________________________________________________________________________________________ column positions */

#side-car-buyers-checklist {
    margin-top: 2em;
}


/*********************************************************************************************************************** Footer */

/*___________________________________________________________________________________________________ column positions */

/* 953 total width */

.footer-column-1 {
    width: 533px;
    /*background-color: red;*/
}

.footer-column-2 {
    float: right;
    width: 80px;
    padding: 0 0px 0 26px;
    /*background-color: green;*/
}

.footer-column-3 {
    float: right;
    width: 205px !important;
    padding: 0 28px 0 26px;
    /*background-color: blue;*/
}


/*___________________________________________________________________________________________________ Search stripe */

#search {
    background-color: #b5a782;
}

#search p,
#search label {
    margin-top: 10px;
    display: inline;
    float: left;
}

#search p,
#search label,
#search ul#social li a {
    color: white;
    font-size: 1.1em;
    font-weight: bold;
}


/* Social Networks */

/*#social-stripe a { display:block; outline:none; }*/
#search ul#social{ float: left; margin: 0 0 0 14em; overflow: hidden }
#search ul#social li { display:block; height: 18px; margin: 10px 0 0 0; float: left; }
#search ul#social li a { display:block; outline:none; height: 18px; }


/* Search form */

#search-form-place-holder {
    float: right;
    height: 35px;
}

#search-form {
    float: right;
}

#search label {
    margin-left: 0;
    margin-right: 5px;
}

#search-text {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid #9a8e70;
    color: #aaaaaa;
}

#submit-search {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 2em;
    margin-top: 10px;
}

/*______________________________________________________________________________________________________ Communication*/

#footer-content {
    padding-top: 20px;
    background-color: #ebd5a6;
}

#footer-content ul.links li a,
#footer-content a.link { display:inline-block; padding-right: 15px; background: url("/image/public/link-arrow.png") right 50% no-repeat; }

#footer-content a.link:hover { color: @orange; }


#footer-content h3{
    padding-top: 24px;
    padding-bottom: 15px;
    color: @heading;
    font-size: 1.2em;
    font-weight: bold;
}

/* Blog post */

#footer-content .blog-post blockquote {
    font-size: 1.2em;
    font-weight: bold;
}

#footer-content .blog-post cite {
    display: block;
    color: @copyFont;
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 1.3em;
}

#footer-content .blog-post p {
    color: #333333;
    font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: 1.3em;
}

/* Partners */

#footer-content #partners {
    overflow: hidden;
}

#footer-content #partners a {
    font-size: 1px;
    text-decoration: none;
    outline: none;
}

#footer-content #partners img {
    display: none;
}

#footer-content #partners li {
    float: left;
    height: 40px;
}

#footer-content #partners li#vtnz {
    /*margin-top: 20px;*/
}

#footer-content #vtnz a {
    padding: 13px 30px;
    background: url("/image/public/logos/vtnz-active.gif") left 0 no-repeat;
}

#footer-content #vtnz a:hover {
    background: url("/image/public/logos/vtnz-active.gif") left -28px no-repeat;
}


#footer-content #mta {
    margin-left: 22px;
    margin-right: 22px;
}

#footer-content #mta a {
    padding: 17px 18px 16px 18px;
    background: url("/image/public/logos/mta-active.gif") left 0 no-repeat;
}

#footer-content #mta a:hover {
    background: url("/image/public/logos/mta-active.gif") left -35px no-repeat;
}

#footer-content #aa a {
    padding: 17px 18px;
    background: url("/image/public/logos/aa-active.gif") left 0 no-repeat;
}

#footer-content #aa a:hover {
    background: url("/image/public/logos/aa-active.gif") left -36px no-repeat;
}



#footer-content #partners li#trademe {
    margin-top: 15px;
}

#footer-content #trademe a {
    width: 148px;
    padding: 16px 90px;
    background: url("/image/public/logos/trademe-active.gif") left 0 no-repeat;
}


#footer-content #trademe a:hover {
    background: url("/image/public/logos/trademe-active.gif") left -35px no-repeat;
}

#footer-content li#nzta  {
    width: 180px;
    padding:  20px 0;

}
#footer-content #nzta a {
    width: 148px;
    padding: 20px 95px 19px 95px;
    background: url("/image/public/logos/nzta_active.gif") left 0 no-repeat;
}

#footer-content #nzta a:hover {
    background: url("/image/public/logos/nzta_active.gif") left -39px no-repeat;
}



/*___________________________________________________________________________________________________ WOF and Rego reminder */


.column-2 a.link.wof-and-rego-reminder-link {
    font-size: 1.2em;
    background: url("/image/public/landing/wof.gif") left 50% no-repeat;
    padding: 30px 0 30px 90px;
    margin-top: 20px;
    margin-left: 10px;
}

/*___________________________________________________________________________________________________ Car buyers checklist */

ul#car-buyers-checklist {
    list-style: outside;
    padding-left: 2em;
}

ul#car-buyers-checklist li{
    list-style-image: url("/image/public/landing/orange-on-white-tick.gif");
    margin-bottom: 0.5em;
}

ul#car-buyers-checklist li a{
    display: inline; 
}

/*___________________________________________________________________________________________________ navigation-bar */

#footer-nav.navigation-bar { background: url("/image/public/footer-nav-background.gif") left top repeat-x; border-bottom: 1px solid #7d89be; }
#footer-nav.navigation-bar ul{ height:46px; float: right; }
#footer-nav.navigation-bar ul li { font-size: 1.2em }
#footer-nav.navigation-bar ul li a { height:30px; padding: 16px 1em 0 0.5em; }

/*_____________________________________________________________________________________________ Footer Get Vir Button */

#footer-nav.navigation-bar #nav-get-vir {
    margin-top: 4px;
    float: left;
    width: 150px;
    height: 37px;
    background: url("/image/public/buttons/footer-nav-button-back.gif") right top no-repeat;
}

#footer-nav.navigation-bar #nav-get-vir:hover {
    background: url("/image/public/buttons/footer-nav-button-back.gif") right -38px no-repeat;
}

#footer-nav.navigation-bar #nav-get-vir a {
    display: block;
    color: white;
    
    text-align:  center;
    text-indent: -0.5em;
    font-size: 1.5em;
    padding: 10px;
    text-decoration: none;
    background: url("/image/public/buttons/footer-nav-button-front.gif") left top no-repeat;
}

#footer-nav.navigation-bar #nav-get-vir a:hover {
    color: #161360;
    background: url("/image/public/buttons/footer-nav-button-front.gif") left -38px no-repeat;
}


/*________________________________________________________________________________________________________ Info boxes */

.info-box {
    font-size:15px;
    padding: 1em;
    margin-bottom:1em;
    border: 1px solid black;
    background: inherit;
}

.info-box.errorMessage {
    background: inherit;
    border: 2px solid red;
    color: inherit;
}


.info-box.errorMessage  h1 {
    color: red;
}

.info-box.warningMessage {
    background: inherit;
    border: 2px solid #FFC967;
    color: inherit;
}

.info-box.warningMessage  h1 {
    color:black;
    padding-left: 30px;
    padding-top: 0.2em;
    padding-bottom:0.2em;
    background: no-repeat url("/image/icon/warning.png") 2px center;
}
.info-box.warningMessage p {
    padding: 0px 5px;
    color:black;
}

.info-box.warningMessage h1~p {
    padding-left: 40px;
    color: @copyFont;
}

.info-box.successMessage {
    background: inherit;
    border: 2px solid green;
    color: inherit;
}

.info-box.successMessage  h1 {
    color: green;
}

a.needs-to-be-handled,
.needs-to-be-handled {
    color: red;
    font-weight: bold;
}

/*________________________________________________________________________________________________________ Info boxes */

.accordion {
    padding-bottom: 2em;
}

.accordion dt.title {
    float: none;
    color: @heading;
    font-size: 1.5em;
    line-height: 140%;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2em;
    /* when reinstated */

    /*cursor: pointer;*/
    /*border-bottom: 1px solid #f7f7f7;*/
    /*padding-right: 2em;*/
    /*background: url("/image/public/accordion-arrow-down.gif") right 50% no-repeat;*/
}

/*
.accordion dt.title:hover
.accordion dt.title.selected,
 {
    color: @orange;
    border-bottom: 1px solid #eee;
}
*/

.accordion dt.title.selected {
    background: none;
    /*background: url("/image/public/accordion-arrow-up.gif") right 50% no-repeat;*/
}

.copy .accordion dd.section {
    padding: 0 0 1.5em 2em;
    font-weight: normal;
    border-bottom: 1px solid #f7f7f7;
}

.copy .accordion dd.section .introductory {
    font-weight: bold;
    margin: 1em 0 0.5em;
}

#details-different{
    display: block;
    font-size: 50%;
    padding-bottom: 0.5em;
}

.social {
    padding: 0;
    margin: 0;
}




.stripe.good-news,
.stripe.bad-news {
    margin-top: 2em;
    font-size: 1.2em;

}

.stripe.bad-news {
    background-color: #FFB0B0;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    color: @navy;

}

.stripe.good-news {
    background-color: #99ff99;
    border-top: 1px solid green;
    border-bottom: 1px solid green;
    color: @navy;

}

.stripe.good-news h2,
.stripe.bad-news h2 {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 140%;
    margin: 0.5em 0 0.25em 0;
}

.stripe.good-news p,
.stripe.bad-news p {
    font-size: 1em;
    line-height: 110%;
    margin-bottom: 0.5em;
}

.stripe.bad-news strong {
    /*color: red;*/
}

.stripe.good-news ul,
.stripe.bad-news ul {
    padding-bottom: 1.5em;
}

.stripe.bad-news ul a:hover {
    color: red;
}

.stripe.good-news ul a:hover {
    color: green;
}

.stripe.good-news a.arrow:hover
{ color: green; }

.stripe.bad-news a.arrow:hover
{ color: red; }

.fancybox-title { text-align: left; }
.fancybox-title b { display: block; margin-right: 80px; }
.fancybox-title span { float: right; }
#fancybox-outer {
    border: 1px solid @copyFont;
}


    /* notices */

.notice h1{
    font-weight: bold;
    font-size: 1.3em;
}

.notice{
    padding: 1em;
    font-size: 1.3em;
}

.notice.disabled h1{
    color: red;
}

.notice.disabled {
    background-color: #FFB0B0;
    border: 2px solid #ff8480;
}