﻿/* General Layout */
html {text-align:center;width:100%;}
body {width:1000px;text-align:left;margin:auto;}

img {border:none;}
p, li, div 	{margin:0px;padding:0px;}

.columContainer {}
.left {float:left;}
.right {float:right;}
.clear {clear:both;}

/* Master Page Layout */
.cookie-placeholder {
    margin-bottom:15px;
}
.cookie-policy {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 10px;
    z-index: 999;
	background-color: #dadbe8;
}
    .cookie-policy a {
        color: #2185f2;
    }
    .cookie-policy p {
        line-height: 18px;
        }
    .cookie-policy .row {
        display: table;
        width:1024px;
        background-color: #dadbe8;
		margin:0 auto;
    }
.cookie-policy .cookie-left-content {
    display:table-cell;
    padding: 20px;
    vertical-align:middle;
}
    .cookie-policy .cookie-right-content {
        display: table-cell;
        vertical-align: middle;
    }
   
        .cookie-policy .btn-accept-cookie {
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    padding: 10px 25px;
    margin: 20px;
    text-decoration: none;
    background-color: #003f76;
}


    #siteHeader {height:100px;color:White;padding-top:15px;margin-left:10px;margin-right:10px;}
#siteHeaderRight {
    margin-left: 1em;
    text-align: left;
    background-color: transparent !important;
    color: #01184b;
}
#siteHeaderMessage {margin-top:1px;height:40px;background-color:#9597b9;text-align:center;line-height:40px;}

#accessibility {
    margin-top:58px;
    margin-right: 5px;
    font-size: 0.8em;
    color: #3e454c;
}
    #accessibility a {
        margin-left: 5px;
        cursor: pointer;
        color: #2185f2;
    }
        #accessibility a.hl {
            margin-left: 5px;
            border: solid 1px white;
            padding: 2px;
            color: #e77418;
        }
#accessTextSize { line-height:30px;}
#accessColour {clear:both; line-height:20px;}

.colourDefault {width:17px;height:17px;display:block;background-image:url(../images/colour_default.gif);background-repeat:no-repeat;}
.colour2 {width:17px;height:17px;display:block;background-image:url(../images/colour_blk_pnk.gif);background-repeat:no-repeat;}
.colour3 {width:17px;height:17px;display:block;background-image:url(../images/colour_blk_ylw.gif);background-repeat:no-repeat;}

#menu {clear:both;margin-top:5px;margin-left:10px;margin-right:10px; display:inline-block; width:100%; margin-bottom:15px;}
#menuLeft {width:19px;height:77px;float:left;background-image:url(../images/menu_left.gif);background-repeat:no-repeat;}
#menuMiddle {width:100%;height:77px;float:left; position:relative;padding-top:10px;
}
#menuRight {width:19px;height:77px;float:left;background-image:url(../images/menu_right.gif);background-repeat:no-repeat;}
#menuTop {height:38px;line-height:38px;}
    #menuTop > div {
        display: table;
        table-layout: fixed;
        width: 104%;
    }
    #menuTop > div > a {display:table-cell; display:-moz-grid; width:16.6%; text-align:center; padding-top:40px; position:relative; font-weight:bold; background-size: 100% 30px;}
    #menuTop > div > a:last-child:before {right: 20px;}   
    #menuTop > div > a:last-child:after {right:0;}
        
        
        #menuTop > div > a:before {
            content: "";
            display: block;
            height: 30px;
            top: 0;
            left: 10px;
            right: 12px;
            position: absolute;
        }
        #menuTop > div > a:after {
            content: "";
            display: block;
            height: 30px;
            width:20px;
            top: 0;
            right: -4px;
            position: absolute;
            z-index: 1;
        }
.item-red:before {
    /*background: #f74b5d;*/
}
.item-red {
    /*background: url("/images/red-l-bg.png") no-repeat 0 0;*/
    background: url("../images/Rtab.svg") no-repeat 0 0;
    z-index: 6;
}
    .item-red:after {
    /*background: url("/images/red-r-bg.png") no-repeat 0 0;*/
}
.item-blue:before {
    /*background: #409dc6;*/
}
.item-blue {
    /*background: url("/images/blue-l-bg.png") no-repeat 0 0;*/
    background: url("../images/Btab.svg") no-repeat 0 0;
    z-index: 5;
    right: 10px;
}
.item-blue:after {
    /*background: url("/images/blue-r-bg.png") no-repeat 0 0;*/
}

.item-purple:before {
    /*background: #616081;*/
}
.item-purple {
    /*background: url("/images/purple-l-bg.png") no-repeat 0 0;*/
    background: url("../images/Ptab.svg") no-repeat 0 0;
    z-index: 4;
    right: 20px;
}
.item-purple:after {
    /*background: url("/images/purple-r-bg.png") no-repeat 0 0;*/
}

.item-orange:before {
    /*background: #e77418;*/
}
.item-orange {
    /*background: url("/images/orange-l-bg.png") no-repeat 0 0;*/
    background: url("../images/Otab.svg") no-repeat 0 0;
    z-index: 3;
    right: 30px;
}
.item-orange:after {
    /*background: url("/images/orange-r-bg.png") no-repeat 0 0;*/
}

.item-yellow:before {
    /*background: #c1d13a;*/
}
.item-yellow {
    /*background: url("/images/yellow-l-bg.png") no-repeat 0 0;*/
    background: url("../images/Ltab.svg") no-repeat 0 0;
    z-index: 2;
    right: 40px;
}
.item-yellow:after {
    /*background: url("/images/yellow-r-bg.png") no-repeat 0 0;*/
}

.item-green:before {
    /*background: #48b296;*/
}
.item-green {
    /*background: url("/images/green-l-bg.png") no-repeat 0 0;*/
    background: url("../images/Gtab.svg") no-repeat 0 0;
    z-index: 1;
    right: 50px;
}
.item-green:after {
    /*background: url("/images/green-r-bg.png") no-repeat 0 0;*/
}

#menuTop img {
    margin-left: 5px;
    margin-right: 2px;
    width: 2px;
    height: 30px;
    vertical-align: middle;
}
#menuTop a { vertical-align:middle;}
#menuBottom {text-align:right;padding-top:0px;height:40px;line-height:39px;}
#searchBox {width:210px;height:30px;background-image:url(../images/search-bg.png);background-repeat:no-repeat;background-position:0 0;color:White;padding-right:10px;position:absolute;top:0;right:0;line-height:30px;}
    #searchBox input {
        height:14px;
        margin-left:10px;
        margin-top:5px;
        float:right;
    }
    #content {
        clear: both;
        padding-top: 15px;
    }
#contentLeft {width:775px;}
#contentRight {width:215px;padding-top:8px;padding-left:10px;}

#contentRight ul {list-style-type:none;padding:0px;margin:0px;}
#contentRight li {
	width:100%;
	height:auto;
	margin-bottom:7px;
	font-size: 13px;
	border:1px solid #eaeaea;
	border-left:5px solid #2085F2; 
	float:left;
	box-sizing:border-box;    
	transition: 0.3s;
	}
#contentRight li:hover {background-color:#2085F2;border:1px solid #2085F2;}
#contentRight li a {line-height:14px;font-size:14px;padding-left:15px;display:block;float:left;padding:20px 0px 20px 15px; width:100%;}
#contentRight li a:hover {text-decoration:none;color:#fff;}
#contentRight li a.cpcIcon {line-height:22px; padding-top:10px;background-position:117px 8px;}

#contentRight li:nth-child(1n){border-left:5px solid #f74b5d;}
#contentRight li:nth-child(1n):hover {background-color:#f74b5d;border:1px solid #f74b5d;}
#contentRight li:nth-child(2n){border-left:5px solid #409dc6;}
#contentRight li:nth-child(2n):hover {background-color:#409dc6;border:1px solid #409dc6;}
#contentRight li:nth-child(3n){border-left:5px solid #616081;}
#contentRight li:nth-child(3n):hover {background-color:#616081;border:1px solid #616081;}
#contentRight li:nth-child(4n){border-left:5px solid #e77418;}
#contentRight li:nth-child(4n):hover {background-color:#e77418;border:1px solid #e77418;}
#contentRight li:nth-child(5n){border-left:5px solid #c1d831;}
#contentRight li:nth-child(5n):hover {background-color:#c1d831;border:1px solid #c1d831;}
#contentRight li:nth-child(6n){border-left:5px solid #48b296;}
#contentRight li:nth-child(6n):hover {background-color:#48b296;border:1px solid #48b296;}

#pbContent {margin-top:10px; margin-left:10px;}
#pbContent2 {margin-top:10px; margin-left:10px; padding-left:20px; width:740px; height:685px; background-image:url(../images/contentBG1.gif); background-repeat:no-repeat;}

/* Page Width classes*/

#wfContent {margin-top:5px;margin-left:30px;width:940px;}
#wfContentWithMenu {margin-top:5px;margin-left:30px;width:740px;color:black;}
#wfHeader {margin-top:5px;margin-left:30px;width:940px;height:40px;background-color:#9597b9;text-align:center;line-height:40px;color:black;}
#wfFooter {margin-top:5px;margin-left:30px;width:940px;height:40px;background-color:#9597b9;text-align:center;line-height:40px;color:black;}

.DZLeftNarrow {width:210px;margin-right:15px;color:black;}
.DZRightWide {width:500px;margin-left:15px;color:black;}

.DZRightFull {width:700px;margin-left:15px;}

.DZHalfLeft {width:455px;margin-right: 15px}
.DZHalfRight {width:455px;margin-left: 15px}

#footer {clear:both; display:inline-block;width:100%; margin-top:25px;background-color:#e0e0e0;padding:15px;box-sizing: border-box;}
    #footer .npcc-logo {
        margin-left: 15px;
		width:170px;
        min-height: 116px;
		height:100%;
        position: relative;
        top: 12px;
    }
#headerLogo {margin-left:7px; margin-top:7px; margin-bottom:7px; width:230px; min-height: 90px; height: 100%;}

.hide {
    display: none !important;
}

/* Specific Page Layout */
#homeTop {margin-top:0px;}
#homeTopLeft {margin-left:10px;}
#homeTopLeftPanel {
    margin-top: 8px;
    width: 750px;
    height: 371px;
    background: #3e454c;
    position: relative;
}
    #homeTopLeftPanel:before {
        content: "";
        width: 20px;
        height: 100%;
        top: 0;
        left: -20px;
        bottom: 0;
        position: absolute;
       
    }
    #homeTopLeftPanel:after {
        content: "";
        width: 20px;
        height: 100%;
        top: 0;
        right: -20px;
        bottom: 0;
        position: absolute;
        
    }

    /*slider style*/
    #homeTopLeftPanel {
        overflow:hidden;
    }
        #homeTopLeftPanel img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height:100%;
        }
        
        #homeTopLeftPanel p + h1 {
            position: absolute;
            bottom: 0;
            left: 0;
            top:auto !important;
            z-index: 1;
            right: 0;
            padding: 10px;
            font-size:18px;
            margin-bottom: 0 !important;
            background-color: rgba(64, 157, 198,.8);
        }
        #homeTopLeftPanel a h1 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            right: 0;
            margin: 0;
            padding: 10px;
            font-size: 24px;
            background-color: rgba(64, 157, 198,.8);
        }
        /*end slider style*/
        #homeTopLeftPanel a {
        text-decoration: none;
    }
#homeTopLeft {/*width:745px;*/}
#homeTopLeftPanel a {text-decoration:none;}
#homeTopLeftPanel h1 {margin-top:10px;margin-bottom:5px;}
#homeTopLeftPanel img {margin-bottom:5px;}
#Banner1div {display:none;}
#Banner2div {display:none;}
#Banner3div {display:none;}
#Banner4div {display:none;}
#Banner5div {display:none;}

#homeTopRight {width:205px;padding-right:20px;}
#homeTopRightPanel {margin-top:17px;width:175px;height:356px;padding:6px 15px 0px 15px;background-image:url(../images/home_top_right.gif);background-repeat:no-repeat;}

#homeBottom {clear:both;margin-left:10px;width:100%;height:320px;margin-top:20px;float:left;}
#homeBottom h2{margin-top:0px;padding-top:0px;}
#homeBottom a {color:#333;text-decoration:none;}
#homeBottom a:hover { }

#homeBottomPanel1 {padding-top:20px;width:221px; border: 1px solid #eaeaea;margin-right:10px; padding-left:20px;padding-bottom:20px;}
#homeBottomPanel1 img {margin-top:10px;margin-bottom:20px;height:150px;}
#homeBottomPanel2 {padding-left:20px;padding-top:20px;width:221px;border: 1px solid #eaeaea;margin-right:10px;padding-bottom:20px;}
#homeBottomPanel2 img {margin-top:10px;margin-bottom:20px;height:150px;}
#homeBottomPanel3 {padding-left:20px;padding-top:20px;width:221px;border: 1px solid #eaeaea;padding-bottom:20px;}
#homeBottomPanel3 img {margin-top:10px;margin-bottom:20px;height:150px;}

#homeBottomPanel1 p {padding-right: 15px;}
#homeBottomPanel2 p {padding-right: 15px;}
#homeBottomPanel3 p {padding-right: 15px;}

#newsSummary {margin-top:10px; margin-left:10px;}
#newsSummary h2 { margin-top:0px;}
#newsSummary hr { clear:both; height:5px; background:#dadbe8;}
.newsItem {clear:both; margin-top:20px;}
.newsSummaryImage {float:left; width:200px;}
.newsSummaryItem {float:left; width:60%;}
.newsSummaryDate {float:left;}

#qmMenu {list-style-type:none;padding:0px;margin:0px;}
#qmMenu li {width:147px;height:37px; margin-bottom:8px; padding:10px 20px 10px 10px; background-image:url(../images/qm_menu_button.gif);background-repeat:no-repeat; }
#qmMenu li:hover {}
#qmMenu li a {color:#020d4d;}
#qmMenu li a:hover {}

a.bg1 {width:176px; height:57px; display:block; line-height:57px; background-image:url(../images/anchorbg1.gif);background-repeat:no-repeat; color:#020d4d;}



/* Position adjust to horizontally centre the text for the about us menu for single line items */
a.lh17 {line-height:17px;}
a.lh35 {line-height:35px;}
