/*=====================================
---------- GLOBAL ELEMENTS ------------
=====================================*/

body {
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
}

h1 {
    font-family: myriad-pro-1,Arial,sans-serif;
    font-size: 2.55em;
    color: #007DB8;
    font-weight: bold;
    margin-bottom: 8px;
}

#header h1 {
    padding: 0;
    margin: 0;
    line-height: 1;
}

    #header h1 a {
        text-indent: -9999em;
        height: 44px;
        width: 139px;
        margin: 14px 0 17px 43px;
        float: left;
        background: transparent url(img/spriteNonRepeatable.png) scroll no-repeat -340px -237px;
    }

    .productHub h1 {
        padding-left: 10px;
        margin-bottom: 15px;
    }

h2 {
    font-family: myriad-pro-1,Arial,sans-serif;
    font-size: 2em;
    color: #1378B0;
    font-weight: bold;
}

    #products .categoryContents h2 {
        font-family: arial, helvetica, sans-serif;
        font-size: 1.8em;
        color: #007db9;
        border-bottom: 2px solid #ecf0f3;
        padding: 0 12px 15px 24px;
        margin: 0 0 15px;
        background: #fff url('img/spriteNonRepeatable.png') no-repeat scroll -1295px -1447px;
    }

    #products .otherProducts h2 {
        padding: 16px;
        margin-bottom: 13px;
        width: 688px;
        background: transparent url(img/spriteCorners.png) scroll no-repeat -244px 0;
    }

h3 {
    font-size: 1.8em;
    font-family: myriad-pro-1,Arial,sans-serif;
    color: #007DB8;
    line-height: 1;
    font-weight: bold;
}

    #relatedProducts h3,
    #popularProducts h3,
    #sideNote h3 {
        color: #004165;
        background: transparent url("img/spriteNonRepeatable.png") no-repeat scroll -1083px -1319px;
        line-height: 1;
        padding: 18px 16px 15px;
    }

h4 {
    font-family: myriad-pro-1,Arial,sans-serif;
    font-size: 1.7em;
    font-weight: bold;
    color: #333333;
    padding-bottom: 8px;
}

h5 {
    color: #333;
    font-size: 1.2em;
}

h6 {
    font-size: 1.1em;
    font-weight: bold;
    padding-bottom: 4px;
    clear: both;
}

p {
    margin-bottom: 8px;
    text-align: left;
}

small { font-size: 1.1em }

dd { font-size: 1.1em }

/*--- links ---*/
a,
a:link {
    text-decoration: underline;
    color: #004165;
}

    a:hover,
    h3 a:link:hover {
        text-decoration: none;
        color: #007dba;
    }

h3 a,
h3 a:link {
    text-decoration: none;
    color: #004165;
}

    h4 a,
    h3 a:link { text-decoration: none }


/*===============================
---------- STRUCTURE ------------
===============================*/

#wrapContent,
#wrapHeader,
#wrapFooter {
    width: 972px;
    margin: 0 auto;
}

#wrapHeader {
    margin-top: 8px;
    margin-bottom: 8px;
    background: transparent url('img/spriteNonRepeatable.png') scroll no-repeat -340px -58px;
}

#header {
    float: left;
    width: 100%;
    height: 75px;
    line-height: 150%;
}

#wrapContent {
    padding: 18px 0;
    clear: left;
}

#wrapNavGlobal {
    float: left;
    background: transparent url('img/spriteNonRepeatable.png') scroll no-repeat -341px 49px;
    width: 100%;
}

#sectionPrimary {
    float: left;
    width: 720px;
    margin-right: 9px;
}

#sectionSecondary {
    float: left;
    width: 243px;
}
    #sectionSecondary .sectionContent { margin-bottom: 12px }
    
/*===============================
------- COMMON ELEMENTS ---------
===============================*/

.actionBlock {
    display: block;
    float: left;
    width: 720px;
    margin-top: 16px;
}

.actionLeft { float: left }
.actionRight { float: right }

.readMore {
    background: transparent url("img/spriteNonRepeatable.png") no-repeat scroll -1352px -582px;
    padding-left: 12px;
}
    #sectionPrimary .readMore { font-size: 1.1em }


/*================================
---------- NAVIGATION ------------
================================*/

/* --- SEARCH --- */
.search {
    float: right;
    margin: 15px 13px 0 0;
    height: 29px;
    width: 230px;
}
    .search input {
        border: none;
        float: left;
        margin-right: 0;
    }
        .search input.textField {
            color: #707070;
            font-size: 13px;
            margin-right: -4px;
            padding: 7px 12px;
            width: 178px;
            height: 17px;
            font-family: Verdana, Arial, Sans-Serif;
            line-height: 1.4 !important;
            background: transparent url(img/spriteNonRepeatable.png) scroll no-repeat -1012px -1285px;
        }

        .search input.btnGo {
            background: transparent url("img/spriteNonRepeatable.png") no-repeat scroll -1213px -1285px;
            width: 32px;
            height: 33px;
            cursor: pointer;
            text-indent: -9999em;
            overflow: hidden;
            line-height: 0;
            padding: 0;
        }
            .search input.btnGo:hover { background-position: -1245px -1284px }

/* --- FIND BRANCH/REGION LINKS --- */
#nav_top {
    float: right;
    clear: right;
    margin-right: 12px;
    position: relative;
    z-index: 6;
    margin-top: 5px;
}
    #nav_top li {
        float: left;
        padding-left: 12px;
        padding-right: 12px;
        line-height: 20px; /* PKS adjusting to match line height */
        position: relative;
        background: url('img/header-separator.gif') no-repeat left 5px;
    }
        #nav_top li a {
            display: block;
            color: #fff;
            font-size: 12px;
            text-decoration: none;
        }
        
        #nav_top li.lastitem { padding-right: 0 !important  }

        #nav_top li a:active,
        #nav_top li a:hover { text-decoration: underline }

        #nav_top li#item_country {
            /*Commented out background because this is being dealt with in the 'header-nav-footer.css*/
            /*background: url('img/sprites.gif') no-repeat -7px 3px;*/
            padding-left: 15px;
        }

            #nav_top li#item_country div.subNav {
                width: 237px;
                height: 233px;
                padding-right: 0 !important;
            }

            #nav_top li#item_country a:active,
            #nav_top li#item_country a:hover { background-color: #F1F0F0 }

            #nav_top li#item_country a.countrySpecial {
                margin-right: -10px;
                padding-right: 32px;
                padding-left: 5px;
                background: url('img/btn-select-country-arrow.gif') no-repeat right 3px;
            }
                #nav_top li#item_country a.countrySpecial:active,
                #nav_top li#item_country a.countrySpecial:hover     { background: url('img/btn-select-country-arrow.gif') no-repeat right -97px }

            #nav_top li#item_country .subNav {
                background: url('img/bg-nav-top-country.png') no-repeat 0 0;
                position: absolute;
                top: 21px;
                left: 0;
                z-index: 1;
            }

            #nav_top li#item_country .countrySelector {
                font-family: Verdana, Helvetica, sans-serif;
                font-size: 13px;
                line-height: 1.125em;
                margin-bottom: 1.125em;
                color: #004165;
                font-weight: bold;
                margin: 12px 0 12px 8px;
            }

            #nav_top li#item_country .scroll-pane {
                height: 180px;
                width: 231px;
                /*margin: 0;
                overflow: auto;*/
            }

#item_country ul li a {
    padding-left: 0;
    margin-left: 0;
}

#nav_top li#item_country li {
    border-top: 1px solid #DCDCDC;
    width: 198px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 10px !important;
    background-image: none;
}

    #nav_top li#item_country li.separator {
        padding-bottom: 4px;
        background: url('img/bg-select-country-separator.gif') repeat-x 0 bottom;
    }

    #nav_top li#item_country li a {
        text-indent: 0;
        color: #004165;
        font-size: 13px;
        margin-right: 0;
        line-height: 1.3em;
        padding: 6px 6px 7px 0 !important;
    }

        #nav_top li#item_country li a:focus,
        #nav_top li#item_country li a:active,
        #nav_top li#item_country li a:hover {
            color: #000;
            text-decoration: none;
        }


/*===========================
---------- FORMS ------------
===========================*/

/* UNIVERSAL FORM FIELDS */
fieldset {
    padding: 0 20px 20px;
    line-height: 1.6;
    margin-top: 20px;
}

    fieldset fieldset { padding: 0 }

legend {
    font-size: 1.8em;
    color: #007DB8;
    padding-bottom: 12px;
    font-weight: normal;
}

select { padding: 0 }

label {
    display: block;
    margin-bottom: 4px;
    color: #000;
    font-weight: bold;
    font-size: 1.1em;
}

.row {
    float: left;
    clear: both;
    width: 680px;
    padding: 8px 0;
    position: relative;
}

.column {
    float: left;
    margin-right: 12px;
    display: inline;
    max-width: 328px;
}

/*==================================
---------- MAIN CONTENT ------------
==================================*/

/* --- Popular Products--- */
#popularProducts {
    background: url("img/spriteCorners.png") no-repeat scroll 0 bottom transparent;
    font-size: 1.1em;
    padding-bottom: 5px;
}

    #popularProducts h4 {
        font-size: 1.3em;
        padding-bottom: 0;
    }

        #popularProducts h4 a {
            padding-left: 28px;
            display: block;
            padding-bottom: 8px;
        }
            #popularProducts h4 a:visited { text-decoration: underline }
            #popularProducts h4 a:hover { text-decoration: none; }

#popularProductsInner {
    background: url("img/spriteCorners.png") repeat-y scroll -1686px 0 transparent;
    float: left;
    padding: 0 0 12px;
    width: 243px;
}

#popularProducts .item {
    margin: 0 1px;
    padding: 16px 14px;
    border-top: 1px solid #C5D2D7;
    float: left;
    width: 213px;
    text-align: center;
}

/* --- ICONS --- */

.icon {
    background: transparent url(img/spriteIcons.png) scroll no-repeat;
    text-align: left;
}
    .business       { background-position: 0 -248px }
    .car            { background-position: 0 -499px }
    .card           { background-position: 0 -619px }
    .careers        { background-position: 0 -744px }
    .cart           { background-position: 0 -869px }
    .cog            { background-position: 0 -1117px }
    .coins          { background-position: 0 -1241px }
    .globe          { background-position: 0 -1980px }
    .handshake      { background-position: 0 -2103px }
    .home           { background-position: 0 -2227px }
    .linechart      { background-position: 0 -2476px }
    .loan           { background-position: 0 -2599px }
    .locker         { background-position: 0 -2847px }
    .maintenance    { background-position: 0 -3095px }
    .news           { background-position: 0 -3218px }
    .online         { background-position: 0 -3342px }
    .publication    { background-position: 0 -4189px }
    .tractor        { background-position: 0 -4559px }
    .transfer       { background-position: 0 -4684px }
    .umbrella       { background-position: 0 -4809px }


/*-------- PRODUCT HUB PAGE ----------*/

/* Structure of top section */
#wrapCategoryLayout {
    padding-top: 6px;
    width: 718px;
    background: #ECF0F3 url('img/spriteCorners.png') no-repeat scroll -2001px top;
    float: left;
}

#categoryLayout {
    padding-bottom: 6px;
    background: #ECF0F3 url('img/spriteCorners.png') no-repeat scroll -2001px bottom;
    float: left;
}

#categoryLayoutInner {
    padding: 4px 11px;
    width: 696px;
    float: left;
}

    #categoryLayoutInner div { float: left }

/* Panel insides */
.clickableCategory {
    float: left;
    margin-left: 8px;
    width: 142px;
    padding: 12px 13px;
    color: #004065;
    background: transparent url('img/spriteNonRepeatable.png') no-repeat scroll;
}
    .clickableCategory:hover { cursor: pointer }

.largePanel,
.largePanelSelected { height: 200px }
    .largePanel { background-position: 0 -1490px }
    .largePanelSelected { background-position: -180px -1490px }

.mediumPanel,
.mediumPanelSelected {
    height: 84px;
    margin-top: 8px;
}
    .mediumPanel { background-position: -360px -1490px}
    .mediumPanelSelected { background-position: -360px -1606px }

.smallPanel,
.smallPanelSelected {
    height: 26px;
    margin-top: 8px;
}
    .smallPanel { background-position: -540px -1490px; }
    .smallPanelSelected { background-position: -540px -1550px; }

.description {
    float: left;
    margin-top: 12px;
}

.categoryName {
    display: block;
    font-size: 1.34em;
    font-weight: bold;
    padding: 3px 0 7px 27px;
    line-height: 1.2;
    font-family: arial, helvetica, sans-serif;
}

.categoryDetails {
    display: block;
    font-size: 1.1em;
    line-height: 1.1;
}

/* Layout of panels */
#categoryLayoutInner a {
    color: #004065;
    text-decoration: none;
}

#categoryLayoutInner .clickableCategory.first {
    margin-left: 0;
    clear: left;
}

#categoryLayoutInner .clickableCategory.top { margin-top: 0 }

#categoryLayout .wrapTitle {
    padding-top: 0;
    line-height: 1.1;
}

/* Products in category - bottom panel*/
#wrapCategoryProducts {
    width: 718px;
    float: left;
}

.categoryContents {
    float: left;
    margin-top: 12px;
    padding: 12px 0;
    width: 100%;
}

#products .categoryContents h3 a {
    display: block;
    padding: 3px 0 5px 28px;
    font-weight: normal;
    font-size: 0.95em;
}

.categoryContents .column {
    width: 215px;
    float: left;
    padding: 0 12px;
    margin: 0;
}

.categoryContents p {
    font-size: 1.1em;
    line-height: 1.4;
}

.categoryContents .readMore {
    margin-top: 5px;
    background: transparent url(img/spriteNonRepeatable.png) scroll no-repeat -1352px -583px;
    padding-left: 16px;
    padding-left: 9px;
}

.categoryContents .categoryRow {
    width: 100%;
    margin-bottom: 30px;
    float: left;
    clear: both;
    padding: 8px 0;
}

/* Other products */
.categoryContents .otherProducts { float: left }
    .categoryContents .otherProducts .column {
        margin: 0 12px 0 0;
        padding: 0;
        width: 230px;
    }
        .categoryContents .otherProducts .column.last { margin-right: 0; }      
               
#products .categoryContents .otherProducts .column h3 { margin-top: 10px }

.categoryContents .otherProducts .column img {
    width: 230px;
    height: 130px;
}

.categoryContents .otherProducts .column .columnInner { padding: 0 8px }

/*============================
---------- FOOTER ------------
============================*/

#wrapFooter { margin: 0 auto 24px }

#footer {
    font-size: 1.1em;
    color: #666;
    padding: 16px 0 1px 0;
    border-top: 1px solid #e4e4e4;
    position: relative;
    clear: left;
    overflow: hidden;
}
    #footer a { text-decoration: none; }
        #footer a:hover { text-decoration: underline; }

    #footer .copyright {
        clear: left;
        margin-bottom: 0;
        margin-top: 10px;
        float: left;
        padding-left: 4px; /* fix for some accessibility styles */
    }

    #footer .logo {
        text-indent: -9999em;
        width: 170px;
        height: 26px;
        background: transparent url("img/spriteNonRepeatable.png") no-repeat scroll -1px -1189px;
        bottom: 0;
        right: 0;
        float: right;
        position: relative;
    }
    #footerLnks .nzxlogo {
        margin-top:15px
    }    
    #footerLnks .nzxlogo a {
        width: 150px;
        height: 26px;
        background: url("img/nzxfirm.png");
        display:block
    }
#navFooter {
    float: left;
    width: 100%;
}

    #navFooter li {
        float: left;
        margin-right: 14px;
        padding-right: 14px;
        border-right: 1px solid #BCBFC2;
        line-height: 1.2;
    }
        #navFooter li.last { border-right: 0 }