@import "variables.less";
@import "mixins.less";
@import "base.less";
// Header

body {
    #ou-org {
        width: 100%;
    }

    #ou-head #ou-header,
    #ou-site-body,
    #ou-site-header {
        max-width: 1180px;
        margin: 0 auto;
    }
}

#ou-site-body {
    margin-top: 25px;
}

@import "logos.less";

#ou-head {
    background: #24285c;

    #ou-header {
        max-width: 1148px;
        position: relative;
        padding: 0 15px 20px;

        ul {
            margin: 0;
            padding: 0;
        }

        a {
            &.ou-skip {
                position: absolute;
                top: 15px;
                left: 15px;
                display: block;
                width: 1px;
                height: 1px;
                overflow: hidden;
                text-indent: -5000em;

                &:focus, &:active {
                    width: auto;
                    height: auto;
                    display: inline-block;
                    text-indent: 0;
                    z-index: 1;
                    padding: 10px 12px;
                    margin: 0;
                    text-decoration: none;
                    font-weight: normal;
                    background: #FDF289 0% 0% no-repeat padding-box;
                    border: 2px solid #000000;
                    border-radius: 2px;
                    opacity: 1;
                    text-align: left;
                    font: normal normal normal 14px/21px Arial;
                    letter-spacing: 0px;
                    color: #000000;
                    outline: 0;
                    //font-size: .875em;
                }
            }

            .skip-icon {
                width: 14px;
                height: 14px;
                overflow: hidden;
                display: inline-block;
                vertical-align: middle;
                margin: -3px 2px 0 -2px;

                img {
                    position: relative;
                    top: -193px;
                    left: -178px;
                    width: 258px;
                }
            }
        }

        .int-icon, [class*=" int-icon-"], [class*=ui-icon-], [class^=int-icon-] {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;


        }

        .int-icon-arrow-circle-down:before {
            content: "\f0ab";
            padding-right: 10px;
            width:16px;
            height:16px;
            display:block;

        }

        img {
            max-width: none;
            margin: 0;
        }
        // Responsive view hidden in desktop
        .ou-identity p.ou-identity-name,
        .ou-mobile-menu-toggle {
            display: none;
            visibility: hidden;
        }

        #ou-header-nav {
            margin: 10px 0 0 180px;
            padding: 0;
            //font-size: 0.875rem;
            text-align: right;
        }

        #ou-service-links {
            width: auto;
            top: 10px;

            ul {
                margin-left: .5em;
                margin-bottom: 8px;
                display: inline-block;

                li {
                    text-align: right;
                    padding: 0 0 0 1px;
                    margin-bottom: 10px;
                    vertical-align: inherit;
                    display: inline-block;
                    zoom: 1;

                    a {
                        text-decoration: none;
                        color: #FFFFFF;
                        display: inline-block;
                        padding: 0 5px;
                        font-weight: normal;

                        &:hover {
                            text-decoration: underline;
                        }

                        &:focus-visible {
                            //outline-style: solid;
                            border-radius: 2px;
                            outline: 2px solid #FDF289;
                        }
                    }

                    &.ou-header-remove {
                        display: none;
                    }

                    span {
                        &:before, &:after {
                            content: "\0020";
                            height: 0;
                            overflow: hidden;
                        }

                        &:after {
                            clear: both;
                        }
                    }
                }
            }

            #ou-identity {
                width: auto;
                margin: 0;
                color: #FFFFFF;
                margin-left: .5em;
                display: inline-block;

                p {
                    text-align: right;
                    padding: 0;
                    margin: 0 0 10px;
                    vertical-align: inherit;
                    display: inline-block;
                    zoom: 1;

                    &.ou-identity-name {
                        font-size: 1.35714em;
                        line-height: normal;
                    }
                }

                p#ou-identity-id {
                    margin-left: .1em;
                    padding: 0;
                    font-size: .95em;
                    font-family: @base-font-family;
                    line-height: normal;
                    text-transform: uppercase;
                }
            }

            .ou-search {
                .ou-search();
            }

            span {
                color: #FFFFFF;
            }
        }

        .ou-hide {
            .hide();
        }
    }
}

@import "globalnav.less";


@media only screen and (max-width: 1180px), screen and (max-device-width: 1180px) {
    #ou-head #ou-header,
    #ou-site-body, // To be removed and added to OUICE
    #ou-site-header // To be removed and added to OUICE
    {
        max-width: none;
    }
}

@media only screen and (max-width: 767px), screen and (max-device-width: 767px) {
    body {
        #ou-head #ou-header:not(.ie8),
        &.scotland #ou-head #ou-header:not(.ie8),
        &.wales #ou-head #ou-header:not(.ie8) {
            a[class*="ou-logo"] {
                position: absolute;
                /*width: 26px;
                height: 29px;*/
                margin: 7px 9px;
                overflow: hidden;
                background: none;
                height: 29px;
                width: auto;

                img {
                    visibility: visible;
                    position: relative;
                    width: 10px;
                    zoom: 2.2;
                    /*top: -145px;
                    left: -207px;*/
                    /*&:hover {
                        top: -177px;
                    }*/
                }
                /*&:active, &:focus {
                    outline-color: @white;
                }*/
            }

            .ou-mobile-menu-toggle-div:not(.ie8) {
                position: relative;
                height: 44px;
                float: right;
            }

            a.ou-mobile-menu-toggle:not(.ie8) {
                margin: 0;
                position: relative;
                float: right;
                display: inline-block;
                padding: 0;
                left: -8px;
                top: 4px;
                //width: 44px;
                height: 44px;
                color: @white;
                overflow: hidden;
                visibility: visible;
                margin-top: 11px;
                margin-right: 4px;
                height: 12px;
                width: 16px;

                &:focus-visible {
                    outline: 2px solid #FDF289;
                    border-radius: 2px;
                }

                img {
                    position: relative;
                    width: 12px;
                    zoom: 2;
                    top: -3px;
                    right: 2px;
                    /*top: -237px;
                    left: 0;
                    width: 258px;*/
                    /*&:hover {
                        left: -44px;
                    }*/
                }

                &.ou-toggle img {
                    //-ms-transform: rotate(180deg); /* IE 9 */
                    transform: rotate(180deg);
                    /*&:hover {
                        left: -132px;
                    }*/
                }
                /*&:active, &:focus {
                    outline-color: @white;
                }*/
            }
        }
    }
    h1 {
        margin: 0 0 5px 0;
    }
    #ou-head #ou-header:not(.ie8) {
        //background-color: @blueLighter1;
        padding: 0;
        display: table;
        width: 100%;
        height: 44px;

        .ou-identity {
            position: relative;
            left: 42px;
            color: @white;
            top: 11px;
            max-width: 123px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;

            p.ou-identity-name {
                margin: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                display: block;
                visibility: visible;
            }
        }

        #ou-header-nav {
            visibility: hidden;
            background-color: @white;
            opacity: 0;
            max-height: 0;
            .transitionAll();
            overflow: hidden;
            margin: 0;
            width: 100%;
            font-size: 15px;
            display: none;

            &.ou-toggle {
                visibility: visible;
                opacity: 1;
                max-height: 600px;
                display: block;

                #ou-service-links {
                    li, a {
                        visibility: visible;
                    }
                }
            }

            #ou-service-links {
                ul li {
                    visibility: hidden;

                    a {
                        visibility: hidden;
                        float: left;
                        font: normal normal normal 14px/20px Arial;
                        opacity: 1;

                        &:focus-visible {
                            border-radius: 2px;
                            background: #FDF289;
                            outline: #000 solid 2px;
                            padding: 2px;
                        }
                    }

                    &.ou-search {
                        display: inline-table;
                    }

                    &.ou-header-remove {
                        display: none;
                    }
                }

                #ou-identity {
                    display: none;
                    visibility: hidden;
                }

                a {
                    &:extend(#ou-head #ou-header #ou-header-nav #ou-service-links li);
                    text-decoration: none;
                    color: @text-color;
                    display: block;
                    padding: 2px 0;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        #ou-service-links, .ou-ia-nav {
            width: 100%;
            float: left;

            ul {
                float: left;
                margin: 8px 0 0 0;
                text-align: left;

                li {
                    white-space: normal;
                    text-align: left;
                    vertical-align: auto;
                    display: block;
                }
            }
        }

        #ou-service-links {
            margin: 8px 0 0 0;
            width: 100%;

            ul {
                .boxSizing();
                margin: 0;
                padding: 0 20px;
                width: 100%;

                li {
                    margin: 0;
                    float: left;
                    width: 50%;
                    padding-bottom: 2px;

                    a, a[class*=".ou-ia"] {
                        text-decoration: none;
                        color: @text-color;
                        display: block;
                        padding: 4px 0;

                        &:hover {
                            text-decoration: underline;
                        }
                    }

                    span {
                        display: none;
                    }

                    &.ou-search {
                        margin-top: 6px;
                        margin-left: 0;
                        margin-bottom: 7px;
                        width: 100%;

                        .ou-button-container {
                            border: 1px solid #24285c;
                            width: 42px;

                            &:focus-within {
                                border: 2px solid #24285c;
                                outline-style: auto;
                            }
                        }

                        button {
                            right: 12px;
                            top: 8px;
                        }
                    }

                    input[type="search"] {
                        width: 100%;
                        border: 1px solid #24285C;
                        margin-left: 0px;
                        border-radius: inherit;
                        height: 37px;
                        //margin: 0;
                        //padding: 6px 15px 6px 5px;
                        &:focus-visible {
                            border: 2px solid #24285C;
                            outline: 0;
                        }
                    }
                }
            }
        }

        .ou-ia-nav {
            margin-top: 0;

            ul {
                width: 100%;

                li {
                    top: 0;
                    display: block;

                    &.call {
                        a {
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }

                    a {
                        text-decoration: none;
                        color: @black;
                        display: block;
                        padding: 8px 20px;
                        border-top: 1px solid @white;
                        background-color: @blueLighter7;
                        .borderRadiusNone();

                        &:hover {
                            background-color: @blueLighter1;
                            color: @white;
                            text-decoration: underline;
                        }

                        &:focus-visible {
                            background-color: #FDF289;
                            outline: 2px solid #24285C;
                        }

                        &.ou-button {
                            background-color: @blueLighter1;
                            color: @white;
                            margin: 0 0;
                        }
                    }
                }
            }
        }
    }
    //OUICE (should this be removed and added to OUICE?)
    #ou-site-body {
        margin-top: 1em;
    }
}

@media (max-width: 767px) {
    #ou-head #ou-header #ou-header-nav:not(.ie8) {
        margin-left: 0;
    }
}
