/* 02/03/2015 */
html
{
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    height: 100%;
}

/*body
{
    font-size: 100%; / Using 100% rather than using 16px (which is usual browser default) - amkes responsive fonts easier see http://alistapart.com/article/fluidgrids for more details  /
    font-family: Arial, sans-serif;
    line-height: 24px;
    line-height: 1.5em;
    color: #505a66;
    background: #f5f5f1;
    margin: 0;
    position: relative;
    height: 100%;
}*/

h1, h2, h3, h4, h5, h6
{
    color: #343c47; /* All the headings share the same color????? not sure that this is correct  */
}

h1
{
    font-family: "Optima W01" , "Neue Helvetica eText W01" , Arial, sans-serif;
}


h2
{
    font-size: 22px;
   // font-size: 1.375rem;
    margin: 0 0 24px 0;
    margin: 0 0 1.5rem 0;
    line-height: 24px;
    line-height: 1.5rem;
    color: #343c47;
}


h3
{
    font-size: 18px;
    //font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem;
    margin: 0 0 24px 0;
    margin: 0 0 1.5rem 0;
    color: #343c47;
}

h4, h5, h6
{
    font-size: 16px;
    font-size: 1rem; /* 16/16 = 1  */
    margin: 0;
    line-height: 24px;
    line-height: 1.5em;
}

p
{
    margin: 0 0 24px 0;
    margin: 0 0 1.5rem 0;
    line-height: 24px;
    line-height: 1.5rem;
    /*font-size: 20px!Important;*/
}


.largeText
{
    font-size: 20px;
    font-size: 1.25rem; /* 16/20 = 1.25  */
    line-height: 29px;
}

.smallText
{
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
}

.smallestText
{
    font-size: 13px;
    font-size: .8125rem; /* 13/16 = .8125; */
    line-height: 18px;
}

ul, ol
{
    margin-bottom: 12px;
    list-style-position: inside!important;
    padding-left: 0;
    margin-top: 0;
}

em
{
    font-style: italic;
}

abbr
{
    border-bottom: 1px dotted #c3c3c2;
    cursor: help; /* Not sure if this is needed or not */
}

strong
{
    font-weight: bold;
}

button
{
    cursor: pointer;
    font-family: arial, sans-serif;
}

input
{
    font-family: arial, sans-serif;
}

a
{
    color: #2b5d92;
    text-decoration: none;
    transition: all .25s linear 0s;
}

a:hover
{
    border-bottom: 1px dotted #376697;
}


hr
{
    border: 0;
    background-color: #d3d3d1;
    color: #d3d3d1;
    margin-top: 0;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}


/****************************************************/
/*          DEFAULT REUSABLE LAYOUT STYLES	        */
/****************************************************/

.outerWrapper
{
    margin: 0 auto;
    position: relative;
    min-height: 100%;
}

.innerPadded, .innerNoPadding
{
    max-width: 960px;
    max-width: 60rem;
    margin: 0 auto;
    position: relative;
    display: block;
    clear: both;
}

.innerPadded
{
    /* for divs containing elements we don't want to touch the sides of the screen in viewports of 960px or smaller */
    padding: 0 16px;
    padding: 0 1rem;
}


.floatLeft
{
    float: left;
}

.floatRight
{
    float: right;
}


/*.js .hide, .has-js .hide
{
    /* using both classes for now as don't have modernizr adding js class locally 
    display: none;
}*/

.show500
{
    position: absolute;
    visibility: hidden;
}

.show800
{
    position: absolute;
    visibility: hidden;
}


/*clearfix*/

.group:before, .group:after, .content:before, .content:after
{
    content: "";
    display: table;
}
.group:after, .content:after
{
    clear: both;
}
.group, .content
{
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* accessible text hiding for screen readers http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.element-invisible, .element-invisible-mob
{
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); /* this kind of fail in Webkit and Opera */
    height: 1px; /* since clip is not reliable we need that */
    width: 1px; /* since clip is not reliable we need that too */
    overflow: hidden; /* since clip is not reliable we also need that */
}





/******************  grid  ***************/

.row
{
    clear: both;
    width: 100%;
    float: left;
}

.rowExpand
{
    clear: both;
    width: auto;
    overflow: hidden;
    margin-left: -1em;
    margin-right: -1em;
    margin-top: -2em;
    border: none;
}

/*.row div:first-child, .row a:first-child, .row li:first-child, .row ul:first-child, .row ol:first-child, .rowExpand div:first-child, .rowExpand a:first-child, .rowExpand li:first-child, .rowExpand ul:first-child, .rowExpand ol:first-child*/
.psef .col3, .row div:first-child, .row a:first-child, .row li:first-child, .row ul:first-child, .row ol:first-child, .rowExpand div:first-child, .rowExpand a:first-child, .rowExpand li:first-child, .rowExpand ul:first-child, .rowExpand ol:first-child
{
    margin-left: 0;
}


/***************** end grid  **************/




/****************************************************/
/*              DEFAULT GLOBAL ELEMENTS	            */
/****************************************************/



/*******************  begin header   ****************/


.headerGlobal
{
    background: #25374b;
    color: #fff;
    position: static;
    padding: 0;
    overflow: hidden;
    z-index: 1;
    min-height: 80px; /* adding specific height stops the breadcrumb shifting about in desktop view */
}

.innerPadded.logo
{
    height: 0;
    z-index: 1;
    background: red;
}

.logo a
{
    display: block;
    width: 176px;
    width: 9.5rem;
    height: 58px;
    height: 3rem;
    background: transparent url('/images/refresh/rbkc_logo.png') 0 0 no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    top: 16px;
}

.logo a:hover
{
    border-bottom: none;
}

/* can't use the nowrap image replacement on these as overflow needs to be visible for active display element - have put text inside accessibly hidden span tags */
.openMenu, .openSearch
{
    display: inline-block;
    width: 42px;
    height: 42px;
    margin-top: 19px;
    margin-top: 1.2rem;
    margin-bottom: 19px;
    margin-bottom: 1.2rem;
    border: solid #4c5465 1px;
    cursor: pointer;
    padding-left: 3px;
    transition: all .1s linear 0s;
}

.openMenu
{
    float: left;
    background: url("/images/refresh/service_header_icon.png") no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    margin-left: 8px;
    margin-left: 0.5rem;
}

.openSearch
{
    float: right;
    background: url('/images/refresh/search_header_icon.png') 0 0 no-repeat;
    -webkit-background-size: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    margin-right: 8px;
    margin-right: 0.5rem;
}

.openSearch:hover, .openMenu:hover
{
    background-color: #182837;
}

.menu
{
    display: block;
    background-color: #182837;
    margin: 0 -16px;
    margin: 0 -1rem;
    clear: both;
}


.menu li
{
    list-style-type: none;
    padding: 10px;
    border-bottom: solid #3C4856 1px;
    color: #DEE2E5;
}

.menu a
{
    color: #DEE2E5;
    display: block;
    padding: 10px;
}

.menu a:hover
{
    color: #fff;
    background: #142230;
    border-bottom: 0;
}

.menu a:active, .menu .pseudoLink:active
{
    color: #fff;
    background: #1F303F;
    transition: none;
}


.menu li:last-child
{
    border-bottom: none;
}

.openSearch.active, .openMenu.active
{
    background-color: #182837;
}

/* .search.active:after , */
.openSearch:after, .openMenu:after
{
    content: "";
    display: block;
    position: relative;
    left: -18px;
    right: 0;
    top: 58px;
    height: 0;
    width: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 20px solid #182837;
    transition: all .15s linear 0s;
}

/* .search.active:after , */
.openSearch.active:after, .openMenu.active:after
{
    top: 37px;
}


/********************  end header   *****************/


.serviceMenu .innerPadded
{
    display: none;
    visibility: hidden;
}

/**********  begin expanded mobile search   *********/
/*.search
{
    background: #182837;
    padding: 2rem 1rem;
    margin: 0 -16px;
    margin: 0 -1rem;
    overflow: hidden;
    clear: both;
}*/
.search label
{
    display: none;
}
.search_full_text
{
    float: left;
    width: 100%;
    margin-right: -37px;
}
.search_full_text input
{
    background: #e6e7e9;
    padding: 4px 4px 4px 6px;
    color: #616263;
    height: 37px;
    height: 2.35rem;
    margin-right: 37px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    visibility: visible;
}
.search .submit
{
    background: #fff url('/images/refresh/search_submit_37px.png') no-repeat;
    height: 37px;
    float: left;
    width: 37px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    text-indent: 500%;
    white-space: nowrap;
    overflow: hidden;
}
.search .submit:hover
{
    background-position: center -37px;
    border: 0;
    cursor: pointer;
}
.search p
{
    margin: 0;
}
.search a
{
    display: none;
}
.search-expand
{
    background: #182837;
    padding: 2rem 1rem;
}
.search label
{
    display: none;
}

/**********  end expanded mobile search   *********/

/**********  begin state rules for header and search   *********/
/*.js .menu.hide, .js .search.hide
{
    display: block;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    -moz-transition: all linear .05s;
    -webkit-transition: all linear .05s;
    transition: all linear .05s;
}*/
/*.menu, .search
{
    max-height: 600px;
    -moz-transition: all linear .2s;
    -webkit-transition: all linear .2s;
    transition: all linear .2s;
}*/
/*.js .menu.hide *, .js .search.hide *
{
    opacity: 0;
    -moz-transition: all linear .05s;
    -webkit-transition: all linear .05s;
    transition: all linear .05s;
}*/
.menu *, .search *
{
    opacity: 1;
    -moz-transition: all linear .2s;
    -webkit-transition: all linear .2s;
    transition: all linear .2s;
}


/**********  begin background ribbon area   *********/

.breadcrumb
{
    color: #DEE2E5;
}

.breadcrumb ol
{
    padding: 3px 8px 3px 16px;
    padding: 0.2rem 0.5rem 0.15rem 1rem;
    background: #6083a8; /* This is a fall-back for old browsers  */
    background: rgba(96,131,168,.65);
    transition: all .25s linear 0s;
    margin-bottom: 0.3rem;
    float: left;
    margin-left: 0;
}

.breadcrumb li
{
    float: left;
    display: none;
    margin-right: 4px;
    margin-right: 0.3rem;
    font-size: 13px;
    font-size: .8125rem; /* 13/16 = .8125; */
    line-height: 18px;
    width: auto;
    list-style-position: outside;
}

.breadcrumb li a
{
    /* specificity needed to override main link style */
    padding: 0;
    background: none;
    display: inline;
    color: #DEE2E5;
}

.breadcrumb li strong
{
    font-weight: normal;
}

.breadcrumb a:hover
{
    color: #FFF;
    background: none;
    border-bottom: 1px dotted #FFFFFF;
    transition: none;
}

.breadcrumb li + li:before
{
    content: "/ " !important;
}

.breadcrumb li:first-child
{
    background: url('/images/refresh/bread-home.png') left center no-repeat;
    display: block;
    width: 10px;
    height: 16px;
    transition: none;
    box-sizing: border-box; /* just for IE */
}

.breadcrumb li:first-child + li
{
    display: block; /* only show home and root channel links in mobile */
}

.breadcrumb li:first-child a
{
    text-indent: 300%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 10px;
    height: 16px;
    transition: none;
    box-sizing: border-box; /* just for IE */
}

.backgroundRibbon
{
    background: #386390 url('/images/refresh/header-image3.jpg') center center no-repeat;
    background-size: cover;
}

.long
{
    font-size: 1.4rem; /* can add styles to long h1s */
}

/***********  end background ribbon area   **********/


.middle
{
    /* uncleared float defines height of the background ribbon */ /*float:left;*/
    width: 100%;
    background-color: #f5f5f1; /* in case the floats clear and ribbon dragged down (IE7) */
    padding-bottom: 142px;
}

.middle-inner
{
    /* added for stability to stop unfloated content being sucked into the header */
    overflow: hidden; /* clears floats */
    padding-top: 30px; /* do not change - fits the 12px baseline grid */
}


/***********  content area   **********/

ul + p, ul + div, ul + a, ul + h2, ul + h3, ul + h4, .docLink + p, .docLink + div, .docLink + a, .docLink + h2, .docLink + h3, .docLink + h4, br + p, br + div, br + a, br + h2, br + h3, br + h4
{
    clear: left; /* needed to stop display problems when PDF display script alters height of list item */
}


.displayQuery
{
    /* hiding things in mobile */
    position: absolute;
    visibility: hidden;
}

.content img
{
    max-width: 100% !important;
    height: auto !important;
}

/*  .content {
background: url('/images/refresh/12px_gridlines.png') 10px 19px ;

}  */

.content h1
{
    display: none;
}



.content h2
{
    padding-top: 12px;
}

.topic h2, .content h2:first-child
{
    padding-top: 0;
}

.content a
{
    //border-bottom: 1px dotted #376697;
}
.content a:hover
{
    border-bottom: none;
}

.content ul, .content ol
{
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}

.content ul
{
    margin-left: 24px;
    margin-left: 1.5rem;
}

.content ol
{
    margin-left: 24px;
    margin-left: 1.5rem;
    padding-left: 24px;
    padding-left: 1.5rem;
    list-style-position: outside;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content li
{
    margin-bottom: 0; /* do not change unless to 0px or 6px or 12px - fits the 12px baseline grid */
}

.content .rbkc-form ul > li
{
    background: none;
}
.content .rbkc-form  ul.val > li
{
    background: url('/images/refresh/bullet_blue.png') no-repeat;
    background-position: 2px 8px;
    background-position: 0.3rem 0.5rem;    
}
.content ul > li
{
    list-style-type: none;
    background: url('/images/refresh/bullet_blue.png') no-repeat;
    background-position: 2px 8px;
    background-position: 0.3rem 0.5rem;
    padding-left: 20px;
    padding-left: 1.3rem;
}

.content ol > li
{
    list-style-type: decimal; /* 	padding-left: 8px; 	padding-left: 0.5rem; */
}


.content li ul, .content li ol
{
    margin-top: 12px;
    margin-bottom: 12px;
}

.content ul li ul li
{
    background: url('/images/refresh/bullet_style.png') no-repeat;
    background-position: left 9px;
    background-position: left 0.55rem;
}

/* 
.content iframe,
.content object {
	width:100%; 
	height:80%; 
	position: absolute; 
	top:0; 
	left:0;

}

.respWrap {
	position: relative; 
	padding-bottom: 76%; 
	height: 0px; 
	overflow: hidden
}

.respWrapOuter {
	max-width: 480px;
	max-height: 270px;
	margin-bottom: 24px;
	margin-bottom: 2rem;
}
 */
/***********  end content area   **********/


/******************  begin footer   ******************/

.footerGlobal
{
    display: block;
    clear: both;
    background: #132940 url('/images/refresh/rbkc_footer_logo.png') no-repeat 50% 1.5rem;
    background-size: 65px;
    color: #637484;
    font-size: 13px;
    font-size: .8125rem; /* 13/16 = 0.8125; */
    padding-top: 6.5rem;
    padding-bottom: 1em;
    overflow: visible;
    position: absolute;
    width: 100%;
}

.footerGlobal p
{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    clear: both;
}

.footerGlobal span
{
    background-color: #2a3d54;
    padding: 5px 10px;
    color: white;
    display: inline-block;
}

.footerGlobal .address
{
    margin-bottom: 0.6rem;
}

.footerGlobal .contactphone
{
    margin-right: 0.5rem;
}

.footerGlobal a
{
    color: white;
}

.footerGlobal a:hover
{
    border-bottom: dotted white 1px;
}

.footerLinks
{
    list-style-type: none;
    width: 80%;
    margin: 2rem auto 1rem auto;
    overflow: hidden;
    padding-left: 0;
    background: transparent;
}

.footerLinks li
{
    float: left;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}


/*
I have commented out code for Clearleft's original footer list in mobile. We don't cuurently have an even number of items in menu so this doesn't work visually.

.footerLinks li {
	float:left;
	width:50%;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

 .footerLinks li:nth-child(odd) {  don't have an even number of items in menu so this doesnt work visually
	text-align:right;
	padding-right: 10px;
}

.footerLinks li:nth-child(even) {
	text-align:left;
	padding-left: 10px;
}
.footerLinks li::nth-child(odd),
.footerLinks li:first-child {
	text-align:right;
} */

.footerGlobal .socialMedia
{
    clear: both;
    float: left;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 10px;
    list-style-type: none;
}

.footerGlobal .socialMedia li
{
    display: inline-block;
}

.footerGlobal .socialMedia a
{
    display: inline-block;
    width: 48px;
    height: 46px;
    padding: 0;
    border: 0;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    background: url('/images/refresh/social-media-icons.png') no-repeat;
    transition: none;
}

.footerGlobal .socialMedia a:hover
{
    background-color: #6a7888;
    border-bottom: none;
}

.footerGlobal a.socialMedia-Facebook
{
    background-position: -57px 0;
}


.footerGlobal a.socialMedia-YouTube
{
    background-position: -114px 0;
}


.footerGlobal .socialMedia:before
{
    content: "";
    display: block;
    background: #637484;
    width: 130px;
    height: 1px;
    clear: none;
    margin: 5px auto 20px auto;
}


/*******************  end footer   *******************/



.betaBanner
{
    display: none;
}

/*******************************************************************************/
/*                    DEFAULT GLOBAL IN-PAGE ELEMENTS                          */
/*******************************************************************************/


/* begin link styles for all content area elements that don't have standard styling */


a[href$=".pdf"], a[href^="IDOC"], a[href*="idoc.ashx"], a[href$=".docx"], a[href$=".doc"], a.docLink-icon, .content a.docLink-icon:hover
{
    border-bottom: none;
}


a[href$=".pdf"]:hover, a[href^="IDOC"]:hover, a[href*="idoc.ashx"]:hover, a[href$=".docx"]:hover, a[href$=".doc"]:hover
{
    border-bottom: dotted 1px;
}

/* end link styles for all content area elements that aren't inline content (no border unless on hover) */



/*  begin blue header link with chevron common across templates */

/* .topic h2 a,
.sectionHolder h3  a,
.hubLevel2  a, */
.linkheader, h2 a, h3 a
{
    background: url('/images/refresh/rightdouble-chevron-8px.png') right 55% no-repeat;
    padding-right: 20px;
    padding-right: 1.3rem;
    border-bottom: none;
}

h2 a:hover, h3 a:hover, .linkheader:hover
{
    border-bottom: dotted 1px;
}

/*  end blue header link with chevron common across templates */

/* begin common elements - coloured background and text for labels etc */


.infoGrey
{
    background-color: #e3e3e0;
    color: #77818b;
}

.infoGreen
{
    background-color: #d8e6cf;
    color: #458429;
}

.infoYellow
{
    background-color: #F3E5AF;
    color: #8F5522;
}
.infoYellow h2, .infoYellow h3
{
    color: #8F5522;
}

.infoRed
{
    background-color: #F0D9DB;
    color: #B2334C;
}
.infoRed h2, .infoRed h3
{
    color: #B2334C;
}

.infoRed li, .infoGreen li, .infoGrey li, .infoYellow li
{
    background: none !important;
    list-style-type: disc !important;
}


/**************************   begin table styles  ******************************/

table.ImmTS_Default, table
{
    border-collapse: collapse;
    font-size: 14px;
    //font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    margin-bottom: 30px; /* do not change - fits the 12px baseline grid */
    width: 99%;
    background: none;
}


table.ImmTS_Default, table.ImmTS_Default th, table.ImmTS_Default td, th, td
{
    border: solid #D4D4D4 1px;
}

table.ImmTS_Default th, table.ImmTS_Default td, th, td
{
    border: solid #D4D4D4 1px;
    padding: 12px 13px 11px 12px; /* do not change - fits the 12px baseline grid */
    line-height: 24px;
}

table.ImmTS_Default th, th
{
    text-align: left;
    background: #fff;
}

table.ImmTS_Default td, td
{
    color: #5e6a77;
}

caption
{
    /* just copied these*/
    text-align: right;
    color: #036;
    font-style: italic;
    padding-right: 3px;
    padding-bottom: 5px;
}


/* preventing extra spaces in tables */
td p:last-child, td ul, td ol, td li:last-child, td a:last-child, td .docLink:last-child
{
    margin-bottom: 0 !important;
}

/* Simple scrolling table with dark styled webkit scrollbar for better visibility */


.simpleScroll
{
    overflow-x: auto;
}

.simpleScroll::-webkit-scrollbar
{
    /* width: 12px; */ /* for vertical scrollbars  http://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser*/ /* height: 12px; */ /* for horizontal scrollbars */
}

.simpleScroll::-webkit-scrollbar-track
{
    box-shadow: 0 0 2px rgba(0,0,0,0.15) inset;
    background: rgba(0, 0, 0, 0.1);
}

.simpleScroll::-webkit-scrollbar-thumb
{
    background: rgba(0, 0, 0, 0.5);
}

/*   table using jQuery  */

/*.scrollable.has-scroll p {

    visibility: hidden;

}*/
/*.scrollable.has-scroll
{
    position: relative;
    overflow: hidden; /* Clips the shadow created with the pseudo-element in the next rule. Not necessary for the actual scrolling. 
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}
.scrollable.has-scroll:after
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 50px;
    height: 100%;
    border-radius: 10px 0 0 10px / 50% 0 0 50%;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.25);
    content: '';
}
/* This is the element whose content will be scrolled if necessary 
.scrollable.has-scroll > div
{
    overflow-x: auto;
}

.scrollable.has-scroll table
{
    margin-bottom: 0;
}*/

/**************************   end table styles   ******************************/

/**************************   begin form styles   ******************************/

.form, /* going to go with this simple class when form styles are finalised */ .rbkc-form, #recordDetailsPage #accordion2
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #E6EAEB;
    padding: 32px 16px 0 16px;
    padding: 2rem 1rem 0 1rem;
    overflow: hidden;
    margin: 0 0 32px 0;
    margin: 0 0 2rem 0; /* 	max-width: 700px; */
}

.rbkc-form h2, .rbkc-form h3
{
    margin-right: auto;
    margin-left: auto;
    max-width: 450px;
}


.rbkc-form .formSection
{
    /* a header that divides sections on a complex form */
    width: 100%;
    max-width: 100%;
    text-align: center;
    border-bottom: solid #A2A4A5 1px;
    padding: 3px 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 48px;
    margin-top: 3rem;
    margin-bottom: 40px;
    margin-bottom: 2.5rem;
}

/* each label and input pair are wrapped in a p tag */
.rbkc-form p, .rbkc-form ul, .rbkc-form ol, .form-item, /* generic container - should use this in future? */ .form-item, #recordDetailsPage #accordion2 p
{
    width: 100%;
    max-width: 450px;
    font-size: 14px;
    //font-size: .875rem;
    line-height: 24px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.form-item *:last-child
{
    margin-bottom: 0;
}

#recordDetailsPage #accordion2 p
{
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.rbkc-form label
{
    font-size: 14px;
    //font-size: .875rem;
    line-height: 24px;
    //float: left;
    clear: left;
}

.rbkc-form input, .rbkc-form textarea, .rbkc-form select, #recordDetailsPage #accordion2 input, #recordDetailsPage #accordion2 textarea
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.rbkc-form input[type=text], .rbkc-form input[type=email], .rbkc-form input[type=tel], .rbkc-form input[type=url], .rbkc-form input[type=password], .rbkc-form input[type=date], .rbkc-form input[type=time], .rbkc-form input[type=number], .rbkc-form textarea/*, #recordDetailsPage #accordion2 input*/
{
    width: 100%;
    float: left;
    clear: left;
    height: 32px;
    //height: 2rem;
    border: solid #CFD0CB 1px;
    padding: 0 8px;
    padding: 0 0.5rem;
    margin-bottom: 0;
}

#recordDetailsPage #accordion2 textarea
{
    width: 100%;
    float: left;
    clear: left;
    border: solid #CFD0CB 1px;
    padding: 0 8px;
    padding: 0 0.5rem;
    margin-bottom: 0;
}

.rbkc-form select
{
    width: 100%;
    float: left;
    clear: left;
    border: solid #CFD0CB 1px;
    padding: 5px 8px;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0;
}

.rbkc-form option
{
    margin: 0 8px;
    margin: 0 0.5rem;
}

.rbkc-form input[type=range]
{
    width: 100%;
    float: left;
    clear: left;
    height: 32px;
    height: 2rem;
    padding: 0 8px;
    padding: 0 0.5rem;
    margin-bottom: 0;
}

.rbkc-form textarea
{
    height: auto;
    padding: 8px;
    padding: 0.5rem;
}

.rbkc-form input[type=radio], .rbkc-form input[type=checkbox]
{
    /* 	float:left; 	clear:left; */
    display: inline;
    margin: 10px 10px 0 0;
    margin-top: 10px;
    margin-right: 10px;
}

/* styling a label for a checkbox/radio button. Appears to the right of the input */
.rbkc-form input[type=radio] + label, .rbkc-form input[type=checkbox] + label
{
    /* 	float:left; 	clear:none; */
    float: none;
    display: inline;
    margin-top: 5px;
}

/* put this around lists of radio buttons or check boxes.  Makes sure the elements clear the preceding text */
span.check-radio
{
    display: block;
}


/* focus styles - adding border and removing outline */
.rbkc-form input[type=number]:focus, .rbkc-form input:focus, .rbkc-form textarea:focus, .rbkc-form select:focus
{
    border: solid #9A9A9A 1px;
    outline: none;
}


/* styling inline inputs (such as number field within a sentence - do we need these styles?? */
.rbkc-form label input[type=number]
{
    float: none;
    clear: none;
    width: auto;
    height: 32px;
    height: 2rem;
    border: solid #CFD0CB 1px;
    margin: 0 8px;
    margin: 0 0.5rem;
}


/* submit button. Styles nicked from contactUs in global css - too much repetition? */
.rbkc-form input[type=submit], .rbkc-form input[type=reset], #recordDetailsPage #accordion2 input[type=submit]
{
    display: block;
    background-color: #4699be;
    background-image: url('/images/refresh/contact-chevron.png');
    border: 0;
    background-repeat: no-repeat;
    background-position: 95% center;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    padding: 10px 35px 10px 13px;
    margin-bottom: 32px;
    margin-bottom: 2em;
    color: #FFF;
    font-size: 13px;
    //font-size: .8125rem;
    line-height: 18px;
    font-weight: 700;
    float: left;
    clear: left;
    width: 100%;
    max-width: 400px;
    margin-top: 16px;
    margin-top: 1rem;
}

#recordDetailsPage #accordion2 input[type=submit]
{
    width: 200px;
    height: 50px !important;
}

input[type=submit], input[type=reset]
{
    cursor: pointer;
}


input[type="submit"], input[type="reset"]
{
    width: auto; /*min-width: 150px;*/
    margin-right: 32px;
    margin-right: 2rem;
    float: left;
    clear: none;
}

/* submit button on hover */
.rbkc-form input[type=submit]:hover, .rbkc-form input[type=reset]:hover, #recordDetailsPage #accordion2 input[type=submit]:hover
{
    border-bottom: none;
    background-color: #377A95;
}

/* the yellow help tips that appear directly after form fields and the red validation notification for the top of the form.
Colours are applied using existing generic styles */
.rbkc-form .infoYellow, .rbkc-form .infoRed
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    font-size: .875rem;
    line-height: 24px;
    width: 100%;
    max-width: 450px;
    padding: 5px 12px;
}


.rbkc-form .infoYellow
{
    padding: 12px 24px;
}

/* added server-side so assuming it's not wrapped in a p tag */
.rbkc-form .infoRed
{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    padding: 6px;
}

/* but just in case... */

.rbkc-form p .infoRed
{
    margin-bottom: 0;
}

/* styling an input targeted for validation.  Have assumed a class on the input */
.rbkc-form input.val, .rbkc-form textarea.val, .rbkc-form select.val
{
    border: solid #b2334c 1px;
}

.rbkc-form .infoRed ul
{
    text-align: left;
}



.rbkc-form .val, .rbkc-form span.val, .rbkc-form span.required, *[id*="RequiredFieldValidator"] /* styling a validation message directly after an input / a required asterisk */
{
    display: inline;
    float: left;
    clear: left;
    margin: 0 5px 0 0;
    color: #B2334C !important;
    font-weight: 700;
}

/* extra styles for yellow bordered notice message boxes in forms */

.rbkc-form div.noticeMessageBox
{
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
}

.rbkc-form div.noticeMessageBox p, .rbkc-form div.noticeMessageBox h2, .rbkc-form div.noticeMessageBox h3
{
    max-width: 100%;
    margin-left: 0;
}

.rbkc-form div.noticeMessageBox ul
{
    margin: 0;
    width: auto;
    padding-left: 14px;
}

.rbkc-form div.noticeMessageBox li
{
    list-style-position: outside;
}

/* sometimes containers holding only a label with an inline form element might look a little crowded by elements below and above.
Can add extra margin by applying this class.  Could apply automatically using jQuery if we wanted. */
.rbkc-form .extraPadding
{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#showcomments
{
    float: right;
    margin-top: -32px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    font-weight: bold;
    font-size: 14px;
    font-size: 0.875rem;
    padding-right: 13px;
}

.multiple select
{
    /* for date select boxes (only ?) */
    width: auto;
}

.multiple .field-label, .multiple label, .multiple .multitext
{
    overflow: hidden;
    float: left;
}

.multiple .multitext
{
    display: block;
    width: 100%;
    clear: both;
}


.rbkc-form span[class*="helptip02"]
{
    clear: left;
    color: #b2334c;
    display: inline;
    float: left;
    margin: 0 5px 0 0;
    font-weight: 700;
}

ul.form-selectlist > li
{
    background: none;
    padding: 0;
}

.form-selectlist td
{
    padding: 0 !important;
    border: 0 !important;
}


/**************************   end form styles   ******************************/

/************************** begin tabbed menu *********************************/

.rbkc-form ul.tabMenu, ul.tabMenu
{
    list-style-type: none;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    margin-left: 0;
    margin-bottom: 0;
    position: relative;
    bottom: -2px;
    overflow: hidden;
    max-width: 100%;
}


.content ul.tabMenu li
{
    float: left;
    background: none;
    padding: 0;
}

ul.tabMenu a
{
    display: block;
    padding: 12px 19px;
    padding: 0.8rem 1.2rem;
    background: #E9EAE5;
    border-left: solid #D4D4D4 1px;
    border-bottom: solid #D4D4D4 1px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    z-index: 1;
    color: #5E6A77;
}

ul.tabMenu a:hover
{
    background: #D4D4D4;
    border-bottom: solid #D4D4D4 1px;
}

.content ul.tabMenu li.active a
{
    background: #F5F5F1;
    border-left: solid #D4D4D4 1px;
    border-top: solid #D4D4D4 1px;
    border-bottom: solid #F5F5F1 1px;
    color: #3E3F41;
}


.content ul.tabMenu li:first-child a
{
    -webkit-border-radius: 3px 0 0 0;
    -moz-border-radius: 3px 0 0 0;
    border-radius: 3px 0 0 0;
}


.content ul.tabMenu li:last-child a
{
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0;
}


.tabMenu-underneath
{
    border: solid #D4D4D4 1px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}


/************************** end tabbed menu *********************************/

/************************ begin generic search page styles *****************************/

.searchBack
{
    background: url('/images/refresh/leftdouble-chevron-8px.png') left center no-repeat;
    padding-left: 12px;
    padding-left: 0.75rem;
}


/******************************************************************************************/

/**************************  begin search results with links   ******************************/


.linkResults, ..plainResults
{
    border: solid #DDD 1px;
    font-size: 13px;
    font-size: .8125rem; /* 13/16 = .8125; */
    line-height: 18px;
    position: relative;
    margin-bottom: 48px;
    margin-bottom: 3rem;
}

.ul.linkResults-list, .ul.plainResults-list
{
    margin: 0;
}

ul.linkResults-list li
{
    background: #fff!important;
    border-bottom: solid #DDD 1px;
    margin: 0;
    padding: 0;
}

.linkResults-list a
{
    display: block;
    color: #5E6A77;
    padding: 16px 24px;
    padding: 1.5rem 1.2rem;
    overflow: hidden;
    transition: none;
    border-bottom: none;
}

ul.plainResults-list li
{
    background: #fff!important;
    border-bottom: solid #DDD 1px;
    margin: 0;
    padding: 0;
    display: block!important;
    color: #5E6A77;
    padding: 16px 24px;
    padding: 1.5rem 1.2rem;
    overflow: hidden!important;
    transition: none;
}

.linkResults a:hover, .linkResults a:active
{
    background-color: #E6EAEB;
    border-bottom: none;
}

.linkResults a:hover .linkResults-name span, .linkResults a:active .linkResults-name span
{
    border-bottom: 2px dotted #aecae7;
}

.content .linkResults p
{
    letter-spacing: normal;
}

.linkResults-header, .plainResults-header
{
    border-bottom: solid #DDD 1px;
    padding: 8px 19px;
    padding: 0.5rem 1.2rem;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    color: #000;
    margin: 0;
}

.linkResults-ref
{
    float: left;
    margin-right: 16px;
    margin-right: 1rem;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

.linkResults-date
{
    float: left;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

 .linkResults-name, .plainResults-name
{
    font-size: 20px;
    //font-size: 1.25rem; /* 16/20 = 1.25  */
    line-height: 29px;
    color: #2B5D92;
    float: left!important;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    clear: left!important;
}

.linkResults-detail, .plainResults-detail
{
    color: #3d434d;
    font-size: 20px!important11:40 14/01/2020;
    float: left!important;
    clear: left!important;
}


.linkResults .infoYellow, .linkResults .infoGreen, .linkResults .infoRed, .linkResults .infoGrey
{
    display: inline-block;
    padding: 2px 8px;
    font-size: .8125rem;
    font-weight: 700;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    margin-top: -4px;
    margin-right: 16px;
    margin-right: 1rem;
    float: left;
}


.linkResults.pagNumber, .plainResults.pagNumber
{
    background: none;
    border: none;
    font-size: 1rem;
    margin: 0;
}

/**************************   end search result   ******************************/

.contactTeam, .genericContact a
{
    display: block;
    background-color: #4699be;
    background-image: url('/images/refresh/contact-chevron.png');
    background-repeat: no-repeat;
    background-position: 95% center;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    padding: 9px 35px 10px 13px;
    margin-bottom: 32px;
    margin-bottom: 2em;
    color: #FFF;
    font-size: 13px;
    font-size: .8125rem; /* 13/16 = .8125; */
    line-height: 18px;
    font-weight: 700;
    -webkit-text-stroke-width: 0;
}

.contactTeam:hover, .genericContact a:hover
{
    border-bottom: none;
    background-color: #377A95;
}

/* accordion styles */

.accordion
{
    margin-top: 16px;
    margin-top: 1rem;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    padding-left: 23px;
    cursor: pointer;
    background-image: url('/images/refresh/accordion_open_icon.png');
    background-repeat: no-repeat;
    background-position: left 5px; /*background-position: left 0.35rem;  IE not picking up fallback */
    //font-weight: 700;
}

.accordion:hover
{
    color: #84909e;
}

.accordion.close
{
    background-image: url('/images/refresh/accordion_close_icon.png');
    display: visible;
}


.has-js .accordion + ul, /* initially hides content.  Can't have a specific class as accordion element classes are added automatically for editors using  */ .has-js .accordion + div, .js .accordion + ul, .js .accordion + div
{
    position: absolute;
    visibility: hidden;
}


ul.accordionContents.show, div.accordionContents.show
{
    position: static;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.4s linear;
}

.accordionContents
{
    opacity: 0;
    padding: 0;
}

.accordionContents li
{
    clear: left;
}

div.accordionContents + p, div.accordionContents + div, div.accordionContents + ul, div.accordionContents + ol, div.accordionContents + a, div.accordionContents + h2, div.accordionContents + h3, div.accordionContents + h4
{
    clear: left;
}


/* PDF styles */


a[href$=".pdf"], a[href^="IDOC"], a[href*="idoc.ashx"], a[href$=".docx"], a[href$=".doc"]
{
    font-weight: bold;
    font-size: 16px;
    //font-size: 1rem;
    line-height: 25px;
}

td a[href$=".pdf"], td a[href^="IDOC"], td a[href*="idoc.ashx"], td a[href$=".docx"], td a[href$=".doc"]
{
    font-weight: 400;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    border-bottom: dotted 1px;
}

td a[href$=".pdf"]:hover, td a[href^="IDOC"]:hover, td a[href*="idoc.ashx"]:hover, td a[href$=".docx"]:hover, td a[href$=".doc"]:hover
{
    border-bottom: none;
}

/* PDF classes to be added by jQuery */

.docLink, ul li.docLink, ol li.docLink
{
    background: none;
    padding-left: 0;
    display: block;
    font-weight: bold;
    font-size: 13px; /* font size for meta data */
    font-size: .8125rem; /* 13/16 = .8125; */
    line-height: 18px;
    clear: left;
    font-weight: normal;
    font-style: normal;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    list-style-type: none;
}


.docLink + p
{
    clear: left;
}

.docLink + ul li, .docLink + ol li
{
    /* for when there are document links and plain text mixed up in a list */
    clear: left;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

.docLink-icon
{
    width: 50px;
    height: 50px;
    background: url("/images/refresh/doc-icon.png") no-repeat; /* IE fallback */ /*background: none, url("//images/refresh/doc-icon.svg") no-repeat;   SVGs not being loaded on dev, why??*/ /* apparently this doesn't display anything in android, need to check */
    color: #2B5D92; /* Global style? Should these styles be applied to a type of header?   Also appears on service hub page */
    font-weight: 700;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    display: block;
    float: left;
}


td .docLink
{
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
}

td ul li.docLink
{
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    margin-bottom: 5px;
    background: url('/images/refresh/bullet_blue.png') no-repeat;
    background-position: left 9px;
    background-position: left 0.55rem;
    padding-left: 20px;
    padding-left: 1.3rem;
    margin-bottom: 5px;
}

td .docLink-icon
{
    display: none;
}

.docLink-icon:hover
{
    border-bottom: none;
    opacity: 0.6;
}

.accordionContents p:last-child, .accordionContents li:last-child, .accordionContents li:last-child .docLink-icon, .accordionContents p:last-child .docLink-icon
{
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}

h2 + .docLink, h3 + .docLink
{
    margin-top: 1.2rem;
}


/* begin pagination */

.pagNumber, .pagName
{
    background-color: #FFF;
    color: #2B5D92;
    border: solid #6ED5C9 1px;
    overflow: hidden; /* 	margin-top: 32px; 	margin-top: 2rem; */
    margin-bottom: 32px;
    margin-bottom: 2rem;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.pagNumber
{
    padding: 15px 5px;
    text-align: center;
}

.pagNumber-numbers
{
    height: 0;
    width: 100%;
    //position: absolute;
    position: relative;
    left: 0;
}

.pagNumber-numbers ul
{
    display: inline;
    width: 170px;
    list-style-type: none;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* remove .content and see */
.pagNumber-numbers ul li
{
    display: inline-block;
    padding-left: 0;
    background: none;
}

.pagNumber a:link, .pagName a:link
{
    border-bottom: 0;
}

.pagNumber a:link:hover {
    background-color: #e6eaeb;
    border-bottom: none;
}

.pagNumber-numbers a:link
{
    padding: 2px 5px;
    display: inline-block;
    min-width: 16px;
    font-weight: 700;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}
.pagNumber a:link:hover
{
    background-color: #e6eaeb;
    border-bottom: none;
}

.pagNumber-activePage
{
    background-color: #6ED5C9;
    color: #FFF;
}

a.pagNumber-activePage:hover
{
    background-color: #6ED5C9;
}

.pagNumber-previousPage
{
    /* can be used with text or without */
    display: block;
    float: left;
    background: url("/images/refresh/leftdouble-chevron-8px.png") no-repeat;
    background-position: left 0.6em;
    padding-left: 1rem;
    padding-right: 0.5rem;
    height: 26px;
    border-left: solid transparent 5px;
}

.pagNumber-nextPage
{
    /* can be used with text or without */
    display: block;
    float: right;
    clear: none;
    background: url("/images/refresh/rightdouble-chevron-8px.png") no-repeat;
    background-position: right 0.6em;
    padding-right: 1rem;
    padding-left: 0.5rem;
    height: 26px;
    border-right: solid transparent 5px;
}

.pagName
{
    padding: 0;
}

.pagName-previousName a
{
    background: url("/images/refresh/leftdouble-chevron-5px.png") no-repeat;
    background-position: left;
    padding-left: 12px;
}

.pagName-nextName a
{
    background: url("/images/refresh/rightdouble-chevron-5px.png") no-repeat;
    background-position: right;
    padding-right: 12px;
}

.pagName-previousName
{
    width: 100%;
    border-bottom: solid #D3D3D1 1px;
    padding: 17px 16px;
    padding: 1.1rem 1rem;
    text-align: left;
}

.pagName-nextName
{
    float: left;
    clear: left;
    padding: 17px 16px;
    padding: 1.1rem 1rem;
    text-align: left;
}

.firstpage .pagName-previousName
{
    display: none;
}

.firstpage .pagName-nextName
{
    float: right;
    width: auto;
}

.lastpage .pagName-nextName
{
    display: none;
}

.lastpage .pagName-previousName
{
    float: left;
    width: auto;
}

/* end pagination */

.imageHolder
{
    margin-bottom: 24px;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box; /* Opera/IE 8+ */
    float: left; /* This can probably be removed later??? */
    clear: left; /* This can probably be removed later??? */
}

.imageHolder img
{
    width: 66%;
    height: auto;
}

.imageHolder figcaption
{
    /* This will need a fix for IE7 Selectivizr maybe???  */
    background: #fff;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    width: 34%;
    padding: 5px;
}

/*******************************************************************************/
/*       				 DEFAULT PAGE-SPECIFIC ELEMENTS                        */
/*******************************************************************************/

/*  begin related menu for answer and guide page */

.related
{
    border: solid #D3D3D1 1px;
    font-size: 14px;
    font-size: .875rem;
    line-height: 24px;
    line-height: 1.5rem;
    margin: 5px 0 24px 0; /* do not change - fits the 12px baseline grid */
    overflow: hidden;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

.related-more p, .related-elsewhere p
{
    margin: 6px 0 5px 0; /* do not change - fits the 12px baseline grid */
    padding: 0 10px;
}

.related-more ul, .related-elsewhere ul
{
    margin: 0;
    padding: 11px 10px 0 10px; /* do not change - fits the 12px baseline grid */
}

.related-more ul li, .related-elsewhere ul li
{
    background: url('/images/refresh/list-chevron.png') 0 0.5em no-repeat;
    color: #2B5D92;
    font-weight: normal;
    list-style-type: none;
    margin-bottom: 6px;
    padding-left: 15px;
}

.related-more a, .related-elsewhere a
{
    border-bottom: 0;
    font-weight: normal;
}

.related-more a:hover, .related-elsewhere a:hover
{
    border-bottom: 1px dotted #376697;
}

.related-header
{
    color: #000;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    padding: 7px 10px 0 10px;
}

.related-more, .related-elsewhere
{
    float: none;
    padding-bottom: 6px; /* do not change - fits the 12px baseline grid */
    width: 100%;
}

.related-more
{
    border-bottom: solid #D3D3D1 1px;
}

/*  end related menu for answer page */


/* begin govmetric for content pages */

.webmetric
{
    border: solid #D3D3D1 1px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    text-align: center;
    padding: 10px 20px 5px 20px;
    margin-top: 29px; /* do not change - fits the 12px baseline grid */
    margin-bottom: 32px;
    margin-bottom: 2rem;
}

.webmetric p
{
    display: block;
    color: #000; /* thinking that all text on the off-white background should be black, otherwise not enough contrast */
    vertical-align: 0.65em;
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
}

.webmetric-smileys
{
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.gm_sidebar
{
    line-height: initial;
    width: 90px;
    height: 90px;
}
.gm_sidebar img
{
    display: block;
    width: 100%;
    height: auto;
}

a.good
{
    display: inline-block;
    background: url('/images/refresh/small-greenface.gif') no-repeat;
    width: 28px;
    height: 28px;
}
a.average
{
    display: inline-block;
    background: url('/images/refresh/small-orangeface.gif') no-repeat;
    width: 28px;
    height: 28px;
}
a.poor
{
    display: inline-block;
    background: url('/images/refresh/small-redface.gif') no-repeat;
    width: 28px;
    height: 28px;
}

.webmetric a:hover
{
    border-bottom: none;
}

.webmetric:active, .webmetric:focus
{
    /* Global style? */
    outline: none;
    -moz-outline-style: none;
}


/* end govmetric for content pages */

.floatleft
{
    float: left;
}
.floatright
{
    float: right;
}
.group:before, .group:after
{
    content: "";
    display: table;
}
.group:after
{
    clear: both;
}
.group
{
    zoom: 1;
}

.content .toc
{
    color: #2B5D92;
    margin-bottom: 36px;
    margin-bottom: 2.25rem;
    padding-bottom: 12px;
}
.content .toc__header
{
    font-size: 16px;
    color: #000;
    border-bottom: 1px solid #6ed5c9;
    font-weight: normal;
    padding: 7px 10px;
    margin-bottom: 12px;
}
.content .toc li:not(.active) a:hover
{
    background: #F5F5F5;
}
.content .toc a:hover
{
    border-bottom: none;
}
.content .toc .active, .content .toc .active a
{
    color: #a2a29d;
}
.content .toc__numlist
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px 0 10px;
    list-style-position: outside;
    width: 100%;
}
.content .toc__numlist li
{
    list-style-type: decimal;
    list-style-position: inside;
}
.content .toc__numlist a, .content .toc__numlist span
{
    display: inline-block;
    transition: none;
    padding: 5px 15px 5px 5px;
}

.content .toc
{
    padding: 0;
}
.content .toc__header
{
    margin: 0;
}
.content .toc__numlist
{
    width: 50%;
    padding: 15px 10px 10px 10px;
    clear: none;
}
.content .toc__numlist li
{
    margin-bottom: 10px;
}
.content .toc__numlist a, .toc__numlist span
{
    display: inline;
    padding: 0;
    margin: 0;
}
.content .toc__numlist li:not(.active) a:hover
{
    background: none;
    border-bottom: dotted 1px;
}

.contrast
{
    background-color: #FFFFFF;
    border: 1px solid #6ed5c9;
}

.group:before, .group:after
{
    content: "";
    display: table;
}
.group:after
{
    clear: both;
}
.group
{
    zoom: 1;
}

/* contents box for Guide page */

.contentsGuide
{
    /* font size should be bigger than this but .largeText looks too big */
    background-color: #FFF;
    color: #2B5D92;
    border: solid #6ED5C9 1px;
    margin-bottom: 32px;
    margin-bottom: 2rem;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.contentsGuide-listLeft, .contentsGuide-listRight
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    list-style-position: outside;
}

ol.contentsGuide-listLeft
{
    padding: 15px 10px 0 10px;
    width: auto;
    margin-left: 0;
    margin-bottom: 0;
}

ol.contentsGuide-listRight
{
    padding: 0 10px 10px 10px;
    float: left;
    width: auto;
    margin-left: 0;
    margin-bottom: 0;
}

.contentsGuide li
{
    margin-bottom: 10px;
    background: none;
}

.contentsGuide p
{
    margin: 0;
    padding: 5px 10px;
    color: #000;
    border-bottom: solid #6ED5C9 1px;
}

.contentsGuide-active
{
    color: #a2a29d;
}

.blueBorderTop
{
    /* This is for the topic & landing pages page */
    border-top: solid 1px #b0e5e7;
    padding-top: 1rem;
}

.blueBorderTop h2
{
    /* for sub service hub page- need margin for mobile view */
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}

.subHubHead
{
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}

.viewAll, .viewAllChildren
{
    /* for topic page? */
    cursor: pointer;
}

p.expanded
{
    position: absolute;
    left: 0;
    bottom: 1em;
    margin-bottom: 0;
}

.pb2
{
    padding-bottom: 2em;
}


/* Publications specific code START */

.internalTOC
{
    border: solid 1px #91e0e5;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    font-size: .875rem;
    margin-bottom: 32px;
    margin-bottom: 2rem;
    padding-bottom: 16px;
    padding-bottom: 1rem;
}

.js .internalTOC ul
{
    display: none;
}

.internalTOC h2
{
    /* the heading - "contents" */
    padding: 7px 15px;
    border-bottom: solid 1px #91e0e5;
    color: #000000;
    font-weight: normal;
    font-size: 16px;
    font-size: 1rem; /* 16/16 = 1  */
    margin: 0 0 0 0;
    line-height: 24px;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

.internalTOC ul
{
    margin: 0;
    background: #fff;
}

.internalTOC ul li
{
    list-style-type: none;
    background: none;
    margin-bottom: 0;
    padding-left: 0;
}

.internalTOC ul li:last-child
{
    border-bottom: none;
}

.internalTOC ul li ul li
{
    background: none;
}

.internalTOC li.active span
{
    padding: 5px 15px;
    display: block;
}

.internalTOC a
{
    display: block;
    font-size: 14px;
    font-size: .875rem;
    transition: none;
    padding: 5px 15px;
}

.internalTOC a:hover
{
    background: #F5F5F5;
    border-bottom: none;
}

.pubParent.internalTOC li:first-child
{
    position: relative;
    z-index: 1;
}

.pubParent.internalTOC li:first-child a
{
    color: #5E6A77;
    position: relative;
    z-index: 100;
}

.pubParent.internalTOC li:first-child a:hover
{
    background: none #FFF;
    cursor: default;
}

ul.show
{
    margin: 0 !important;
}

li.displayNone a, li.displayNone h2, li.displayNone .title
{
    display: none;
}

li.displayNone
{
    border: 0;
    padding: 0;
    margin: 0;
}

li.displayNone li.showthis a
{
    display: block;
}

.lt-ie9 .internalTOC ul li
{
    padding: 10px;
}

/* Publications specific code END */


/* Service Hub page elements */

ul.hubLevel1
{
    padding: 0; /* reset style */
    margin-bottom: 48px;
    margin-bottom: 3rem;
}

ul.hubLevel1 li, ul.hubLevel2 li, ul.hubFeatured li
{
    /* reset styles for layout list items */
    background-image: none;
    padding-left: 0;
    margin-bottom: 0;
}

.hubLevel1 a
{
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-bottom: solid #dddddd 1px;
    color: #295b94;
    display: block;
    padding: 1em 1em 1em 4.1rem;
    background-color: #FFFFFF; /*  The columns are set to have no background colours somewhere in the main stylesheet and this is overriding other styles */
    background-image: url('/images/refresh/hub1_icon.png') !important;
    background-repeat: no-repeat;
    background-position: 1rem 50%;
    transition: none;
    vertical-align: middle;
}

.hubLevel1 span
{
    display: inline-block;
    vertical-align: middle !important;
}

.hubLevel1 li:first-child a
{
    padding-top: 24px;
    padding-top: 1.5rem;
    background-position: 1rem 60%;
}

.hubLevel1 li:last-child a
{
    padding-bottom: 2rem;
    padding-bottom: 32px;
    background-position: 1rem 35%;
    border-bottom: solid #58d2c4 1px;
}

.hubLevel1 a:hover
{
    background-color: #f4fcfb;
    border-bottom: solid #58d2c4 1px;
}

.hubLevel1, .hubLevel2
{
    list-style-type: none;
}

ul.hubLevel2
{
    padding: 0; /* reset style */
    margin-left: 0; /* reset style */
    margin-bottom: 0;
}

ul.hubLevel2 li
{
    clear: right;
}

.hubLevel2 h2
{
    margin-top: 0;
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
}

ul.hubLevel3
{
    border: solid #CCCCCC 1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 21px;
    padding: 1.3rem;
    margin-top: 16px;
    margin-top: 1rem;
    margin-bottom: 32px;
    margin-bottom: 2rem;
}

.content ul.hubLevel3.col6
{
    margin-left: 0;
}

ul.hubLevel3 li
{
    list-style-type: none;
    background: url('/images/refresh/list-chevron.png') no-repeat;
    background-position: 0 0.5em;
    padding-left: 16px;
    padding-left: 1rem;
    margin-bottom: 13px;
    margin-bottom: 0.8rem;
}

.hubLevel3 ul li:last-child
{
    margin-bottom: 0;
}

ul.hubFeatured
{
    margin-top: 16px;
    margin-top: 1rem;
}

ul.hubFeatured li
{
    list-style-type: none;
    border: solid #CCCCCC 1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
    margin-bottom: 2rem;
}

.hubFeatured-text
{
    margin: 20px 20px 20px 0; /* used margin instead of padding as there was a strange bug in chrome where the border on the link didn't appear on hover - SP */
    margin: 0.8rem 1.3rem 0 0;
}

.hubFeatured img
{
    visibility: visible;
    position: static;
    float: left;
    margin-right: 20px;
    margin-right: 1.3rem;
}

/* end Service Hub page elements */

/* begin service A-Z page elements */


.rowExpand ul.serviceList
{
    margin-bottom: 0;
}

ul.serviceList li
{
    list-style-type: none;
    list-style-position: outside;
    background: none;
    padding-left: 0;
    margin-bottom: 0;
}

.serviceList a
{
    padding: 0.7rem 1rem;
    display: block;
    border-bottom: solid #DDD 1px;
    transition: none;
}

.serviceList a:hover, .serviceList a:active
{
    background: #fff;
}

/* end service A-Z page elements */

/* begin Topic page elements (simple list page) */

.topic
{
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 8px;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

.topic h2, .sectionHolder h3
{
    margin-bottom: 4px;
    margin-bottom: 0.25rem;
    font-size: 20px;
    font-size: 18px; /* not usual size for h2s, but makes it consistent with landing page */
    font-size: 1.125rem;
    line-height: 1.5em;
    display: inline-block;
}
.topic h2
{
    display: block; /* Fix for https://www.rbkc.gov.uk/planningandbuildingcontrol/planningpolicy/consultation/basements.aspx  - the h2 looked wrong when there was no content immediately after each h2 - overrides the display: inline-block declaration 3 lines above; */
}

/* major_pub.css */

/* Javascript disabled START */
.no-js .section ul
{
    display: block;
}

/* Javascript disabled END */


.pdf_download
{
    background: rgba(36,55,75,.5);
    margin-bottom: 0;
    border-top: solid 5px green;
}
.nav_toc
{
    background-color: #ffffff;
    margin-top: -2em;
    border: solid 2px #91e0e5;
    border-top: none;
    overflow: auto;
    margin-bottom: 1rem; /* arbituary figure need to check it is correct  */
}
.major_pubs_nav_control
{
    width: 75%; /* An arbituary width in the absense of any wireframes or other guidance... */
    margin: 1em auto;
    background: #f5f5f2 url(/images/refresh/down_arrw.png) no-repeat 85% 50%;
    text-align: center;
    cursor: pointer;
    padding: .5em;
    color: #2b5d92;
    font-weight: bold;
    border-radius: 3px;
}
.closeMenu
{
    background: #f5f5f2 url(/images/refresh/up_arrw.png) no-repeat 85% 50%;
}
.prev-next
{
    display: none;
}
.mega-toc-content
{
    /*display:none;*/
}
.left-toc, .mega-toc-content
{
    /*width:90%;*/ /* arbituary figure need to check it is correct  */
    margin: 0 auto 1em auto;
    background: #fff;
    border: solid 1px #91e0e5;
    border-radius: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: .5rem; /* arbituary figure need to check it is correct  */
}
.mega-toc-content
{
    border-left: none;
    border-right: none;
}
.left-toc h4
{
    border-bottom: 1px #91e0e5 solid;
    margin-left: -.5rem;
    margin-right: -.5rem;
    padding-left: .5rem;
}
.mega-toc-content ul
{
    list-style-type: none;
}
.mega-toc-content ul li:first-child
{
    border: solid 1px #d3d3d1;
    border-radius: 3px; /*padding:.5rem;*/
}
.mega-toc-content ul ul li
{
    padding-left: .5rem;
}
.mega-toc-content ul ul li:first-child
{
    border: none; /*padding: 0;*/
}
.mega-toc-content ul ol li
{
    padding: .5rem .5rem .5rem 0;
}
.mega-toc-content ul ol
{
    list-style-type: decimal;
}



.mega-toc-content ul ol
{
}
.left-toc ol
{
    list-style-type: decimal;
    margin-top: .5rem;
    font-size: 14px;
    font-size: .875rem;
    margin-bottom: 12px;
    margin-bottom: .75rem;
}
.left-toc li.active, .left-toc li.active a
{
    color: #d3d3d1;
}
/* 	ul.section {
	display:block!important;
	} */
.section .title
{
    display: block;
    margin-bottom: 0;
    padding: .5rem;
    cursor: pointer;
}
.section li ul
{
    display: none;
}
ul.section li span
{
    display: none;
}
/* 	div[class^="col"] img {
	width:100%;
	height:auto;
	}*/
ul.section
{
    display: none;
}


/*******************************************************************************/
/*        DEFAULT EDITABLE ELEMENTS (INCLUDE IN DROP-DOWN)     */
/*******************************************************************************/


/* warning messages */

.warningRed
{
    padding: 10px 15px;
    margin: 0 0 24px 0;
    font-size: 14px;
    //font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    color: #B2334C;
    padding-left: 55px;
    background: #F0D9DB url("/images/refresh/warningRed.png") 15px center no-repeat;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.warningYellow
{
    padding: 10px 15px;
    margin: 0 0 24px 0;
    font-size: 14px;
    //font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    color: #8F5522;
    padding-left: 55px;
    background: #F3E5AF url("/images/refresh/warningYellow.png") 15px center no-repeat;
}

.alertIcon-yellow
{
    background: url("/images/refresh/warningYellow.png") no-repeat;
    background: none, url("/images/refresh/warningYellow.svg") no-repeat; /* apparently this doesn't display anything in android, need to check */
}

.alertIcon-red
{
    background: url("/images/refresh/warningRed.png") no-repeat;
    background: none, url("/images/refresh/warningRed.svg") no-repeat; /* apparently this doesn't display anything in android, need to check */
}



/* notice messages */

.noticeMessage
{
    /* this class included in local css */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: solid #FBAC32 1px;
    padding: 16px 16px 16px 0; /* 16px top padding */
    background-color: #FFF;
    margin-bottom: 1.5rem;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    display: table;
}


.noticeMessage:before
{
    content: "";
    width: 6px;
    margin-right: 16px;
    background: #FBAC32 6px;
    margin: 0 0;
    display: table-cell;
    border-right: solid #FFF 16px;
}


.noticeMessage p:last-child
{
    margin-bottom: 0;
}

.lt-ie8 .noticeMessage
{
    width: 583px;
    padding-left: 16px;
}


/* notice messages for manual styling (can contain markup)*/


.noticeMessageBox
{
    border: solid #FBAC32 1px;
    padding: 16px 0 0 0; /* 16px top padding */
    background: #fff;
    margin-top: 48px;
    margin-top: 3rem;
    margin-bottom: 48px;
    margin-bottom: 3rem;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
}


.noticeMessageBox-inner
{
    border-left: solid #FBAC32 6px;
    padding: 0 20px 0 14px; /* 20px left and right padding on content (left padding is 14px due to 6px border)  */
}

.noticeMessageBox-inner p:last-of-type, .noticeMessageBox-inner li:last-of-type
{
    /*creates uniform whitespace at bottom of box to match top padding (in supporting browsers) */
    margin-bottom: 16px;
}


/* policy information - primary class is in local refresh CSS */

.policyInfo
{
    /* included in local css */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: solid #7F8EC7 1px;
    padding: 0 20px 16px 20px; /* 20px left and right padding on content */
    background-color: #FFF;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    display: table;
}

.policyInfo:before
{
    content: "";
    background: #7F8EC7;
    margin: 0;
    display: table-cell;
    height: 6px;
    width: 100%;
    float: left;
    border-bottom: solid #FFF 14px;
}


.lt-ie8 .policyInfo
{
    padding-top: 16px;
    width: 581px;
}

/************** images with captions *****************/

.imageWrap
{
    background: #fff;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    font-size: 13px;
}

.imageWrap img
{
    width: 100%;
    height: auto;
    position: static;
    visibility: visible;
    margin: 0;
}

.imageWrap em
{
    display: inline-block;
    font-size: 13px;
    line-height: 1.3rem;
    padding: 16px 24px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-style: normal;
}


/************** end images with captions *****************/

/******************************************************************************************************************************************************************/
/*                                                                     BEGIN MEDIA QUERIES	                                                                      */
/******************************************************************************************************************************************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx)
{

    /* serve up higher res header image in mobile for retina displays */

    .backgroundRibbon
    {
        background: #386390 url('/images/refresh/header-image3-ret.jpg') center center no-repeat;
        background-size: cover;
    }

}
/* end media query */



@media only screen and (min-width: 320px)
{
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */


    /* .headerGlobal .search_full {
    	 display:none;
     } */


}
/* end media query */


@media only screen and (min-width: 400px)
{

    .imageWrap
    {
        margin-left: 0;
        margin-right: 0;
    }

}
/* end media query*/


@media only screen and (min-width: 450px)
{

    .imageWrap
    {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 0;
    }

    .imageWrap img
    {
        width: 70%;
    }

    .imageWrap em
    {
        width: 30%;
    }

}
/* end media query */

@media only screen and (min-width: 480px) and (orientation: landscape)
{


    .major_pubs_nav_control
    {
        width: 50%; /* An arbituary width in the absense of any wireframes or other guidance... */
    }

}
/* end media query */


@media only screen and (min-width: 480px)
{
    /* smartphones, Android phones, landscape iPhone */

    .backgroundRibbon
    {
        background: #386390 url('/images/refresh/header-image2.jpg') no-repeat center center;
        background-size: cover;
    }

    .webmetric p
    {
        display: inline;
        margin-right: 16px;
        margin-right: 1rem;
    }

}
/* end media query */



@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 480px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 480px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 480px), only screen and ( min-resolution: 192dpi) and (min-width: 480px), only screen and ( min-resolution: 2dppx) and (min-width: 480px)
{

    /* Retina header image #2 */

    .backgroundRibbon
    {
        background: #386390 url('/images/refresh/header-image2-ret.jpg') no-repeat center center;
        background-size: cover;
    }


}
/* end media query */


@media screen and (min-width: 500px)
{
    /* tweak point for logo and related content*/

    .show500
    {
        position: static;
        visibility: visible;
    }

    /* giving submit buttons auto width in wider views */
    .rbkc-form input[type=submit], .rbkc-form input[type=reset]
    {
        width: auto;
        min-width: 150px;
        margin-right: 32px;
        margin-right: 2rem;
        float: left;
        clear: none;
    }

    .rbkc-form .advanced
    {
        position: relative;
        top: 24px;
    }

    .related-more, .related-elsewhere
    {
        border-bottom: none;
        float: left; /* floating elements allows single menu to slide to left in tablet view */
        width: 50%;
    }

    .related-more
    {
        border-bottom: none;
    }

    .long
    {
        font-size: 1.7rem;
    }

}
/* end media query */


@media screen and (min-width: 600px)
{


    .breadcrumb li
    {
        display: inline-block;
    }

    .backgroundRibbon
    {
        background: #386390 url('/images/refresh/header-image1.jpg') no-repeat center center;
        background-size: cover;
    }

    .linkResults-date
    {
        float: right;
    }

    .pagName-previousName, .pagName-nextName
    {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 50%;
        margin: 0;
    }
    .pagName-previousName
    {
        float: left;
        border-bottom: none;
    }
    .pagName-nextName
    {
        float: right;
        clear: none;
        text-align: right;
    }
    .imageWrap img
    {
        width: 60%;
    }
    .imageWrap em
    {
        width: 40%;
    }

    .gm_sidebar
    {
        width: 120px;
        height: 120px;
    }


}
/* end media query */


@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 600px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 600px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 600px), only screen and ( min-resolution: 192dpi) and (min-width: 600px), only screen and ( min-resolution: 2dppx) and (min-width: 600px)
{

    /* Retina header image #3 */

    .backgroundRibbon
    {
        background: #386390 url('/images/refresh/header-image1-ret.jpg') no-repeat center center;
        background-size: cover;
    }


}
/* end media query */


@media only screen and (min-width: 700px)
{
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

    body
    {
        margin: 0;
        padding: 0;
    }

    .element-invisible-mob
    {
        position: static !important;
        clip: 0;
        height: auto;
        width: auto;
    }

    .element-invisible-desk
    {
        position: absolute !important;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px); /* this kind of fail in Webkit and Opera */
        height: 1px; /* since clip is not reliable we need that */
        width: 1px; /* since clip is not reliable we need that too */
        overflow: hidden; /* since clip is not reliable we also need that */
    }

    .hide700
    {
        position: absolute;
        visibility: hidden;
    }

    /****************************************************/
    /*              DESKTOP LAYOUT STYLES	            */
    /****************************************************/




    /*****************  grid in desktop   **************/

    .col2
    {
        margin-left: 6.25%;
        width: 11.458%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col4
    {
        margin-left: 6.25%;
        width: 29.167%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col5
    {
        margin-left: 6.25%;
        width: 38.021%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col6
    {
        margin-left: 6.25%;
        width: 46.875%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col7
    {
        margin-left: 6.25%;
        width: 55.729%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col8
    {
        margin-left: 6.25%;
        width: 64.583%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col9
    {
        margin-left: 6.25%;
        width: 73.438%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col10
    {
        margin-left: 6.25%;
        width: 82.292%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col12
    {
        margin-left: 0;
        width: 100%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    .rowExpand
    {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }


    /************** begin deviations from standard grid behaviour   **************/

    .col-right
    {
        float: right;
    }
    .col-hasmargin
    {
        margin-left: 6.25% !important;
    }
    .col-nomargin
    {
        margin-left: 0 !important;
    }


    /************** end deviations from standard grid behaviour   **************/

    /**************  end grid in desktop   **************/




    /****************************************************/
    /*              700px GLOBAL ELEMENTS	            */
    /****************************************************/


    /* switching to inline-block at this point to make way for search box on the right */
    .openSearch
    {
        display: none;
        visibility: hidden;
        background: url('/images/refresh/bread-home.png'); /* trick to stop mobile image loading in desktop (background: none does not work) */
    }
    /*.search
    {
        width: 215px;
        background: none;
        padding: 0;
        position: absolute;
        right: 32px;
        top: 1.52rem;
    }*/
    .search_full_text
    {
        margin: 0;
        width: auto;
    }
    .search_full_text input
    {
        /* can't add class and don't want to use the ID on this as seems to vary on pages.  Will override these styles with class for submit input */
        margin: 0;
        height: 31px;
        width: 185px;
        padding: 5px 4px 4px 6px;
    }
    .search .submit
    {
        width: 30px;
        height: 31px;
        padding: 0;
        right: 0;
        background: #fff url('/images/refresh/search_submit_30px.png') no-repeat;
        position: absolute;
        margin: 0;
        right: 16px;
    }
    .search .submit:hover
    {
        background-position: center -31px;
    }
    .search form
    {
        height: 30px;
    }
    .search label
    {
        display: none;
    }
    /*.js .search.hide, .js .search.hide *
    {
        opacity: 1;
        max-height: 600px;
        transition: none;
    }*/


    .breadcrumb
    {
        width: auto;
    }
    .breadcrumb a
    {
        color: #fff;
    }
    .breadcrumb
    {
        font-size: 1rem;
    }

    .content img, .displayQuery
    {
        /* show images */
        position: static;
        visibility: visible;
    }


    /*******************************************************************************/
    /*                    700px GLOBAL IN-PAGE ELEMENTS                          */
    /*******************************************************************************/


    .related-more, .related-elsewhere
    {
        float: none;
        width: auto;
    }

    .related-more
    {
        border-bottom: solid #D3D3D1 1px;
    }


    ol.contentsGuide-listLeft, ol.contentsGuide-listRight
    {
        width: 50%;
        padding: 15px 10px 10px 10px;
    }


    .contentsGuide-listLeft
    {
        float: left;
    }

    .contentsGuide-listRight
    {
        float: right;
        clear: none;
    }



    .pagName-previousName, .pagName-nextName
    {
        width: auto;
        margin: 0;
    }


    .pagName-previousName
    {
        float: none;
        border-bottom: solid #D3D3D1 1px;
    }

    .pagName-nextName
    {
        float: none;
        clear: none;
        text-align: left;
    }


    /* Publications specific START */


    .internalTOC
    {
        padding-bottom: 0;
    }


    .internalTOC h2
    {
        /* the heading - "contents" */
        margin: 0;
    }

    .internalTOC a
    {
        padding: 10px 15px;
    }


    .internalTOC li
    {
        border-bottom: solid 1px #dddddd;
        padding: 0;
    }


    /* styles for when js is turned off - shows too many items but tolerable*/

    .no-js .internalTOC li a
    {
        display: none;
    }

    .no-js .internalTOC .show li a
    {
        display: block;
    }


    /* hiding borders on nested stuff */
    li.displayNone, li.displayNone .show li
    {
        border: 0;
    }

    /* adding them back for showing stuff */
    .internalTOC li.showthis, .internalTOC .displayNone li.showthis
    {
        border-bottom: solid 1px #dddddd;
    }

    .internalTOC .displayNone li.showthis:last-child
    {
        border-bottom: 0;
    }

    /* removing again for active list item */
    .internalTOC ul li.active, .internalTOC .showthis ul li.active
    {
        background: transparent url(/images/refresh/contents_UR_here.png) no-repeat 100% 50%;
        padding: 0 11px 0 0; /* SP */
        width: 100%;
        border-bottom: 0 !important;
    }

    .internalTOC li.active span
    {
        padding: 10px 15px;
        border-bottom: solid 1px #dddddd;
    }

    .pubParent.internalTOC li:first-child a
    {
        border-bottom: solid #DDD 1px;
    }

    .pubParent.internalTOC li:first-child
    {
        background: transparent url(/images/refresh/contents_UR_here.png) no-repeat 100% 50%;
        padding: 0 11px 0 0; /* SP */
        width: 100%;
        border-bottom: none;
    }


    /* Publications specific end */


    .hubLevel1 a
    {
        border: solid #58d2c4 1px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        min-height: 80px;
        padding: 1em 4em 1em 1em;
        background-position: 92% 50%;
        transition: none;
        width: 100%;
        moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .hubLevel1 li:first-child a
    {
        border: solid #58d2c4 1px;
        padding: 1em 4em 1em 1em;
        background-position: 92% 50%;
    }

    .hubLevel1 li:last-child a
    {
        border: solid #58d2c4 1px;
        padding: 1em 4em 1em 1em;
        background-position: 92% 50%;
    }

    .flexbox .hubLevel1, .flexbox .hubLevel1 li
    {
        display: flex;
        align-items: stretch;
    }

    .flexbox .hubLevel1 a
    {
        display: flex;
        align-items: center;
    }


    .hubLevel2
    {
        margin-bottom: 1rem;
    }


    /* begin service A-Z page elements */


    .services
    {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }


    .rowExpand ul.serviceList
    {
        margin-left: 0;
    }

    ul.serviceList li
    {
        list-style-type: none;
        list-style-position: outside;
        margin-bottom: 1rem;
    }

    .services a
    {
        padding: 0.5rem 0 0 0.5rem;
    }



    /* end service A-Z page elements */



    .imageWrap img
    {
        /* col8 container assumed as default (is content area on answer page, guide page) */
        width: 70%;
    }

    .imageWrap em
    {
        width: 30%;
    }

    .col9 .imageWrap img
    {
        width: 60%;
    }

    .col9 .imageWrap em
    {
        width: 40%;
    }



}
/* end media query 700px*/



@media only screen and (min-width: 800px)
{




    /* tablet, landscape iPad, lo-res laptops ands desktops */

    /*.search
    {
        position: static;
        display: inline-block;
        float: right;
        background: none;
        padding: 0;
        margin: 1.52rem 0 1.52rem 0;
        clear: none;
    }*/

    /**********  begin service menu   *********/


    .serviceMenu
    {
        background: #182837;
        font-size: 14px;
        font-size: .875rem; /* 14/16 = .875; */
        line-height: 24px;
        overflow: hidden;
        max-height: 500px;
        -moz-transition: all linear .2s;
        -webkit-transition: all linear .2s;
        transition: all linear .2s;
    }

    .serviceMenu .innerPadded
    {
        display: block;
        visibility: visible;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .serviceMenu ul
    {
        float: left;
        width: 33.333333%;
        margin-bottom: 2rem;
        list-style-type: none;
    }
    .serviceMenu a
    {
        color: #DEE2E5;
    }
    .serviceMenu a:hover
    {
        color: #fff;
        border-bottom: dotted #fff 1px;
    }
    .serviceMenu-close
    {
        height: 1px;
        clear: both;
        background: #415367;
        text-align: center;
    }
    .serviceMenu-close p
    {
        display: inline-block;
        padding-left: 16px;
        padding-right: 16px;
        background: #182837;
        height: 16px;
        visibility: visible;
        -webkit-transition: all linear 0.5s;
        -moz-transition: all linear 0.5s;
        transition: all linear 0.5s;
    }

    .serviceMenu-close button
    {
        padding: 2px 35px 2px 13px;
        background: #499190 url('/images/refresh/close-window-chevron.png') 90% center no-repeat;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: relative;
        bottom: 14px;
        cursor: pointer;
        color: #DEE2E5;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-size: .875rem; /* 14/16 = .875; */
        line-height: 24px;
        -moz-transition: all .25s linear 0s;
        -webkit-transition: all .25s linear 0s;
        transition: all .25s linear 0s;
    }

    /* removes extra padding on button in Firefox */
    .serviceMenu-close button ::-moz-focus-inner
    {
        padding: 0;
        border: 0;
    }

    .serviceMenu-close button:hover
    {
        background: #5faead url('/images/refresh/close-window-chevron.png') 90% center no-repeat;
        border: none;
        font-family: inherit;
        color: #fff;
    }
    .js .serviceMenu.hide
    {
        display: block;
        max-height: 0px;
    }


    /**********  end service menu   *********/

    /* 	.breadcrumb ol {
    	padding:3px  8px 3px 16px;
    	padding:0.25rem 0.5rem 0.15rem 1rem;
    	} */

    /* major pubs */
    .left-toc
    {
        float: left;
        width: 20.3125%;
        margin-left: 0;
    }
    ul.section
    {
        margin-left: 6.25%;
        width: 29.167%;
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    ul.section li span
    {
        color: #5e6a77;
        font-size: .9375rem;
        display: block;
        font-weight: bold;
    }
    ul.section li:first-child
    {
        border: none;
    }
    ul.section ul
    {
        display: block;
        list-style-type: none;
        padding-top: 16px;
        padding-top: 1rem;
    }
    ul.section ul li:first-child
    {
        /*padding-left:0;*/
    }
    .mega-toc-content
    {
        border: none;
    }
    .showyourself
    {
        display: block !important;
    }
    .title
    {
        color: #2b5d92;
        font-size: 1.125rem;
        border-bottom: solid 2px #91e0e5;
    }
    .mega-toc .prev-next
    {
        display: block;
        list-style-type: none;
    }
    .prev-next li:first-child
    {
        float: left;
        margin-top: -3em;
        margin-left: 1rem;
    }
    .prev-next li:last-child
    {
        float: right;
        margin-top: -3em;
        margin-right: .5em;
    }
    .nav_toc
    {
        border-left: none;
        border-right: none;
    }


    .hide800
    {
        position: absolute;
        visibility: hidden;
    }

    .show800
    {
        position: static;
        visibility: visible;
    }


    .openMenu
    {
        display: none;
        background: url('/images/refresh/bread-home.png'); /* trick to stop mobile image loading in desktop (background: none does not work) */
    }

    /* menu needs to be in padded container in desktop */
    .headerGlobal .innerNoPadding
    {
        padding: 0 16px;
    }

    .js .menu.hide, .js .menu.hide *
    {
        opacity: 1;
        max-height: 600px;
        transition: none;
    }
    .menu
    {
        background: none;
        margin-left: 0;
        margin-top: 11px;
        margin-top: 1.7rem;
        height: 0;
        position: relative;
        left: -0.5rem;
        float: left;
        clear: none;
    }
    .menu li
    {
        display: block;
        float: left;
        padding: 0 8px;
        padding: 0 0.5rem;
        border-bottom: 0;
        font-size: 0.875rem;
    }
    .menu a
    {
        display: inline-block; /* for some reason Chrome didn't seem to be applying border on hover consistently when displayed inline */
        border-bottom: 0;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-size: .875rem; /* 14/16 = .875; */
        line-height: 24px;
    }
    .menu a:hover
    {
        border-bottom: 1px dotted #fff;
        transition: none;
        background: none;
    }

    .menu .openServiceMenu
    {
        height: 28px;
        width: auto;
        padding: 0;
    }
    .menu .openServiceMenu button
    {
        display: inline-block;
        margin: -1px 0 0 0;
        padding: 1px 25px 3px 8px;
        background: transparent url('/images/refresh/service-menu-chevron.png') 90% 10px no-repeat;
        border: 0px;
        cursor: pointer;
        color: #DEE2E5;
        font-family: inherit;
        font-size: 14px;
        font-size: .875rem; /* 14/16 = .875; */
        line-height: 24px;
        transition: background .1s linear 0s;
    }
    /* removes extra padding on button in Firefox */
    .menu .openServiceMenu button::-moz-focus-inner
    {
        padding: 0;
        border: 0;
    }


    .menu-link-services:hover
    {
        background: none;
    }

    .openServiceMenu button:hover
    {
        color: #fff;
    }

    .openServiceMenu button:active
    {
        -webkit-appearance: none;
        outline: none;
    }

    .openServiceMenu button:hover, .openServiceMenu.active button
    {
        background-color: #182837;
        overflow: visible;
    }


    .openServiceMenu.active button:focus
    {
        outline: 1px solid #182837;
        -webkit-appearance: none;
    }

    .openServiceMenu.active:hover .pseudoLink, .openServiceMenu.active:active .pseudoLink
    {
        border-bottom: none;
    }

    .openServiceMenu:after
    {
        /* 	background: transparent url('/images/refresh/headerActive.png') 16px 14px no-repeat; */
        content: "";
        display: block;
        position: relative;
        left: 3px;
        right: 0;
        margin-top: 25px;
        height: 0;
        width: 0;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        border-bottom: 20px solid #182837;
        transition: all .15s linear 0s;
    }


    .openServiceMenu.active:after
    {
        margin-top: 14px;
    }


    .imageWrap img
    {
        width: 60%;
    }

    .imageWrap em
    {
        width: 40%;
    }

    .col9 .imageWrap img
    {
        width: 56.5%;
    }

    .col9 .imageWrap em
    {
        width: 43.5%;
    }

    .long
    {
        font-size: 2rem;
    }

    .gm_sidebar
    {
        width: 146px;
        height: 147px;
    }




}
/* end media query */

@media only screen and (min-width: 900px)
{

    .col4-900
    {
        margin-left: 6.25%;
        width: 29.167%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    .col8-900
    {
        margin-left: 6.25%;
        width: 64.583%; /*background:transparent -  was fighting with other styles */
        float: left;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .col-right-900
    {
        float: right;
    }
    .col-hasmargin-900
    {
        margin-left: 6.25% !important;
    }
    .col-nomargin-900
    {
        margin-left: 0 !important;
    }

}
/* end media query */

@media only screen and (min-width: 960px)
{

    main h1.long
    {
        font-size: 2rem;
        padding: 2rem 0;
    }

    .footerGlobal
    {
        width: 100%;
        margin: 0 auto;
        padding: 1em 0;
        background: #132940 none;
        position: absolute;
        bottom: 0;
        height: 116px;
    }

    .footerGlobal .innerPadded
    {
        background: /*#132940*/ #132940 url('/images/refresh/rbkc_footer_logo.png') 1rem 1.6rem no-repeat;
        background-size: 65px;
        padding: 1.5rem 1rem; /* 	height:6.125rem;	 why need a height? */
    }

    .footerGlobal p
    {
        text-align: left;
        margin-left: 80px;
        line-height: 1.2rem;
    }

    .footerGlobal .address
    {
        margin-bottom: 0;
    }

    .footerGlobal .socialMedia
    {
        width: 20rem;
        position: absolute;
        right: 0.8rem;
        top: 3.2rem;
        text-align: right;
    }

    .footerGlobal .socialMedia a
    {
        padding: 0;
        text-align: center;
        margin: 0 0 0 10px;
        display: inline-block;
    }

    .footerGlobal p span
    {
        background-color: transparent;
        padding-left: 0;
    }

    .footerGlobal .socialMedia:before
    {
        content: "";
        display: none;
    }

    .footerLinks
    {
        list-style-type: none;
        width: 80%;
        margin: /*1em auto auto 1em;*/ auto;
        overflow: auto;
        padding-left: 0;
        position: absolute;
        top: 1.45rem;
        right: 0;
        background: transparent;
        margin: 0 1rem 0 0;
        width: auto;
    }

    .footerLinks li
    {
        text-align: center;
        width: auto;
        margin-right: 0;
    }

    .footerLinks li:nth-child(odd), .footerLinks li:nth-child(even)
    {
        text-align: left;
        padding-right: 0;
        padding-left: 17px;
    }

    .gm_sidebar_cnr.special
    {
        position: absolute !important;
        bottom: 140px !important;
    }


    .services
    {
        padding-top: 4rem;
        padding-bottom: 5rem;
    }



    .rowExpand ul.serviceList
    {
        margin-left: 20%;
    }

    .serviceBorder
    {
        border-left: solid #DDD 1px;
        border-right: solid #DDD 1px;
    }

    .serviceList a
    {
        padding: 0;
        display: inline;
        border-bottom: none;
    }

    .serviceList a:hover
    {
        border-bottom: 1px dotted #376697;
        background: none;
    }

}
/* end media query */


@media only screen and (min-width: 1025px)
{
    /* big landscape tablets, laptops, and desktops */


    .pagName-previousName, .pagName-nextName
    {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 50%;
        margin: 0;
    }


    .pagName-previousName
    {
        float: left;
        border-bottom: none;
    }

    .pagName-nextName
    {
        float: right;
        clear: none;
        text-align: right;
    }

    .long
    {
        font-size: 2.3rem;
    }




}
/* end media query */


@media only screen and (min-width: 1300px)
{
    .gm_sidebar_cnr.special
    {
        position: fixed !important;
        bottom: 0 !important;
    }
}


@media only screen and (min-width: 1600px)
{

    .backgroundRibbon
    {
        background: #386390 url('/images/refresh/header-image.jpg') no-repeat center center;
        background-size: 100%;
    }


}
/* end media query */




/************/
/* IE fixes */
/************/


.lt-ie9 .gm_sidebar
{
    width: 146px;
    height: 147px;
}

.lt-ie9 .outerWrapper
{
    margin: 0 auto;
    max-width: 1400px;
    min-width: 980px;
}

.lt-ie9 .outerWrapper.hp
{
    max-width: 100%;
}

.lt-ie9 .innerPadded, .lt-ie9 .innerNoPadding
{
    width: 960px;
}

.lt-ie9 .logo a
{
    width: 176px;
    height: 58px;
    background-image: url('/images/refresh/rbkc_logo_ie8.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    top: 15px;
}

.lt-ie9 .backgroundRibbon
{
    background: #386390 url('/images/refresh/headerIE_image.png') no-repeat scroll top center;
}


.lt-ie9 .hide800
{
    position: absolute;
    visibility: hidden;
}

.lt-ie9 .show800
{
    position: static;
    visibility: visible;
}


.lt-ie9 .openMenu
{
    display: none;
}

.lt-ie9 .headerGlobal, .lt-ie9 .headerGlobal .innerPadded
{
    height: 78px;
}
.lt-ie9 .innerPadded.logo
{
    height: 0;
    width: 200px;
    position: absolute;
    left: 390px;
}


.lt-ie9 .menu.hide
{
    display: inline-block;
    visibility: visible;
}


.lt-ie9 .menu
{
    background: none;
    margin-top: 25px;
    height: 0;
    position: relative;
    margin-left: -8px;
    margin-bottom: 0;
    clear: none;
}


.lt-ie9 .menu li
{
    display: block;
    float: left;
    padding: 0 8px;
    border-bottom: 0;
}

.lt-ie9 .menu a
{
    display: inline;
    border-bottom: 0;
    margin: 0;
    padding: 3px 0 3px 0;
    font-size: 14px;
    line-height: 24px;
}


.lt-ie9 .menu a:hover
{
    border-bottom: 1px dotted #fff;
    transition: none;
    background: none;
}



.lt-ie9 .menu .openServiceMenu
{
    height: 28px;
    width: auto;
    padding: 0;
}

.lt-ie9 .menu .openServiceMenu button
{
    display: inline-block;
    margin: -1px 0 0 0;
    padding: 1px 25px 3px 8px;
    background: transparent url('/images/refresh/service-menu-chevron.png') 90% 10px no-repeat;
    border: 0px;
    cursor: pointer;
    color: #DEE2E5;
    font-family: inherit;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
}



.lt-ie9 .menu-link-services:hover
{
    background: none;
}

.lt-ie9 .openServiceMenu button:hover
{
    color: #fff;
}

.lt-ie9 .openServiceMenu button:active
{
    -webkit-appearance: none;
    outline: none;
}

.lt-ie9 .openServiceMenu button:hover, .lt-ie9 .openServiceMenu.active button
{
    background-color: #182837;
    overflow: visible;
}


.lt-ie9 .openServiceMenu.active button:focus
{
    outline: 1px solid #182837;
    -webkit-appearance: none;
}

.lt-ie9 .openServiceMenu.active:hover .pseudoLink, .lt-ie9 .openServiceMenu.active:active .pseudoLink
{
    border-bottom: none;
}

.lt-ie9 .openServiceMenu.active:after
{
    content: "";
    display: block;
    background: transparent url('/images/refresh/headerActive.png') 16px 15px no-repeat;
    margin-top: 0;
    height: 45px;
    width: 55px;
}


.lt-ie9 .openSearch
{
    display: none;
    visibility: hidden;
}


.lt-ie9 .search.hide
{
    display: inline-block;
    visibility: visible;
    max-height: 30px;
}

.lt-ie9 .search
{
    display: inline-block !important;
    float: right;
    width: 215px !important;
    background: none;
    padding: 0;
    margin: -6px 0 0 0;
    clear: none;
}


.lt-ie9 .search_full_text
{
    margin: 0;
    width: auto;
}

.lt-ie9 .search_full_text input
{
    /* can't add class and don't want to use the ID on this as seems to vary on pages.  Will override these styles with class for submit input */
    margin: 0;
    height: 31px;
    width: 185px;
    padding: 8px 4px 0 6px;
    display: block !important;
}

.lt-ie9 .search .submit
{
    width: 30px;
    height: 31px;
    padding: 0;
    right: 0;
    background: #fff url('/images/refresh/search_full_30px.png') no-repeat !important;
    position: static;
    float: right;
    margin: 0;
    left: 0;
    display: block !important;
}


.lt-ie9 .search .submit:hover
{
    background: #fff url('/images/refresh/search_full_hover_30px.png') no-repeat !important;
}


.lt-ie9 .search form
{
    height: 30px;
}


.lt-ie9 .search label
{
    display: none; /*need to check if this is 100% accessible */
}



.lt-ie9 li.breadcrumb-home a
{
    background: url('/images/refresh/bread-home.png') center 3px no-repeat;
}





.lt-ie9 main h1
{
    font-size: 49px; /* need to add this too as I changed the font size for mobile */
    padding-top: 11px;
    padding-bottom: 19px;
}


.lt-ie9 .col2
{
    margin-left: 6.25%;
    width: 11.458%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col3
{
    margin-left: 6.25%;
    width: /*20.417%; 20.314%*/ 20.3125%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col4
{
    margin-left: 6.25%;
    width: 29.167%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col5
{
    margin-left: 6.25%;
    width: 38.021%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col6
{
    margin-left: 6.25%;
    width: 46.875%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col7
{
    margin-left: 6.25%;
    width: 55.729%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col8
{
    margin-left: 6.25%;
    width: 64.583%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col9
{
    margin-left: 6.25%;
    width: 73.438%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col10
{
    margin-left: 6.25%;
    width: 82.292%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col12
{
    margin-left: 0;
    width: 100%; /*background:transparent; is overriding other styles*/
    float: left;
    position: relative;
}

.lt-ie9 .col4-900
{
    margin-left: 6.25%;
    width: 29.167%; /*background:transparent -  was fighting with other styles */
    float: left;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.lt-ie9 .col8-900
{
    margin-left: 6.25%;
    width: 64.583%; /*background:transparent -  was fighting with other styles */
    float: left;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.lt-ie9 .col-right-900
{
    float: right;
}
.lt-ie9 .col-hasmargin-900
{
    margin-left: 6.25% !important;
}
.lt-ie9 .col-nomargin-900
{
    margin-left: 0 !important;
}


.lt-ie9 .noticeMessage
{
    margin-bottom: 1.5em;
}

.lt-ie9 .contentsGuide-listLeft, .lt-ie9 .contentsGuide-listRight
{
    width: 50%;
    padding: 15px 10px 10px 10px;
}

.lt-ie9 .contentsGuide-listLeft
{
    float: left;
}

.lt-ie9 .contentsGuide-listRight
{
    float: right;
    clear: none;
}

.lt-ie9 .pagName
{
    padding: 15px 10px;
}


.lt-ie9 .pagName-previousName
{
    float: left;
    width: auto;
    border-bottom: none;
    padding: 0;
}

.lt-ie9 .pagName-nextName
{
    float: right;
    clear: none;
    padding: 0;
}

.lt-ie9 .footerGlobal
{
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
    background: #132940 none;
    line-height: 16px;
}

.lt-ie9 .footerGlobal p
{
    line-height: 16px;
}

.lt-ie9 .footerGlobal .innerPadded
{
    background: #132940 url('/images/refresh/rbkc_footer_logo_ie.png') 16px 20px no-repeat;
    height: 95px;
    padding-top: 14px;
    padding-bottom: 0;
}




.lt-ie9 .footerGlobal p
{
    text-align: left;
    margin-left: 80px;
}

.lt-ie9 .address
{
    margin-top: 12px;
}


.lt-ie9 .footerGlobal .socialMedia
{
    width: 175px;
    position: absolute;
    right: 13px;
    top: 51px;
    text-align: right;
    padding: 0;
}

.lt-ie9 .footerGlobal .socialMedia li
{
    float: left;
}

.lt-ie9 .footerGlobal .socialMedia a
{
    padding: 0;
    text-align: center;
    margin: 0 0 0 10px;
    display: block;
    float: left;
}

.lt-ie9 .footerGlobal .socialMedia:before
{
    content: "";
    display: none;
}



.lt-ie9 .footerGlobal p span
{
    background-color: transparent;
    padding-left: 0;
}

.lt-ie9 .footerLinks
{
    list-style-type: none;
    width: 80%;
    margin: /*1em auto auto 1em;*/ auto;
    padding-left: 0;
    position: absolute;
    top: 23px;
    right: 0;
    background: transparent;
    margin: 0 1rem 0 0;
    width: auto;
    overflow: hidden;
}

.lt-ie9 .footerLinks li
{
    text-align: center;
    width: auto;
    margin-right: 0;
    padding-left: 17px;
    float: left;
}

.lt-ie9 .webmetric p
{
    display: inline;
    margin-right: 16px;
    margin-right: 1rem;
}



.lt-ie9 ul.rowExpand
{
    margin-top: 0;
    margin-left: 0px;
    margin-right: 0;
    width: 960px;
    padding: 0;
}


.lt-ie9 .hubLevel1 a
{
    border: solid #58d2c4 1px;
    min-height: 48px;
    padding: 1em 4em 1em 1em;
    background-position: 92% 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.lt-ie9 .hubLevel1 li:first-child a
{
    border: solid #58d2c4 1px;
    padding: 1em 4em 1em 1em;
    background-position: 92% 50%;
}

.lt-ie9 .hubLevel1 li:last-child a
{
    border: solid #58d2c4 1px;
    padding: 1em 4em 1em 1em;
    background-position: 92% 50%;
}

.lt-ie9 .hubLevel2
{
    margin-bottom: 16px;
}




.lt-ie9 .hubLevel3
{
    width: 406px;
}

.lt-ie9 ul.hubFeatured
{
    width: 406px;
    margin-left: 60px;
}



.lt-ie9 .internalTOC
{
    padding-bottom: 0;
}


.lt-ie9 .internalTOC h2
{
    /* the heading - "contents" */
    margin: 0;
}

.lt-ie9 .internalTOC a
{
    padding: 10px 15px;
}


.lt-ie9 .internalTOC ul li
{
    border-bottom: solid 1px #dddddd;
    padding: 0;
}

.lt-ie9 .internalTOC li.active
{
    background: transparent url(/images/refresh/contents_UR_here.png) no-repeat 100% 50%;
    padding: 0 11px 0 0; /* SP */
    width: 100%;
    border-bottom: 0;
}


.lt-ie9 .internalTOC li.active span
{
    padding: 10px 15px;
    border-bottom: solid 1px #dddddd;
}




/**********  begin service menu   *********/

.lt-ie9 .serviceMenu
{
    background: #182837;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
}

.lt-ie9 .serviceMenu .innerPadded
{
    display: block;
    visibility: visible;
    padding-top: 32px;
    padding-bottom: 32px;
}


.lt-ie9 .serviceMenu ul
{
    float: left;
    width: 33.33333%;
    margin-bottom: 32px;
    list-style-type: none;
    margin-left: 0;
}


.lt-ie9 .serviceMenu a
{
    color: #DEE2E5;
}

.lt-ie9 .serviceMenu a:hover
{
    color: #fff;
    border-bottom: dotted #fff 1px;
}


.lt-ie9 .serviceMenu a:focus
{
    outline: none;
}


.lt-ie9 .serviceMenu-close
{
    height: 0px;
    clear: both;
    text-align: center;
    border-top: solid #415367 1px;
}


.lt-ie9 .serviceMenu-close p
{
    display: inline-block;
    padding-left: 16px;
    padding-right: 16px;
    background: #182837;
    height: 16px;
}

.lt-ie9 .serviceMenu-close button
{
    padding: 3px 35px 3px 13px;
    background: #499190 url('/images/refresh/close-window-chevron.png') 90% center no-repeat;
    position: relative;
    bottom: 17px;
    cursor: pointer;
    color: #DEE2E5;
    font-family: inherit;
    font-size: 14px;
    font-size: .875rem; /* 14/16 = .875; */
    line-height: 24px;
    width: 142px;
    border-left: solid #182837 8px !important;
    border-right: solid #182837 8px !important;
    border-top: none;
    border-bottom: none;
}



.lt-ie9 .serviceMenu-close button:hover
{
    background: #5faead url('/images/refresh/close-window-chevron.png') 90% center no-repeat;
    border: none;
    font-family: inherit;
    color: #fff;
}


/**********  end service menu   *********/

.lt-ie9 .imageWrap img
{
    width: 60%;
}

.lt-ie9 .imageWrap em
{
    width: 40%;
}



/****************************************/
/*              IE 7 styles             */
/****************************************/


.lt-ie8 .content
{
    /* for some reason all the floats are clearing in IE7 and the background image is getting pulled down behind all the content in the middle of the page. Suspect a HasLayout problem but can't solve it */
    max-width: 1400px;
}

.lt-ie8 .serviceMenu
{
    height: 245px;
}

.lt-ie8 .serviceMenu ul
{
    float: left;
    width: 340px;
    margin-left: -16px;
}

.lt-ie8 .search
{
    margin-top: 0;
}

/* for some reason this needs to be floated in ie7 otherwise button pops out of container. Breaks IE8 if applied there */
.lt-ie8 .search_full_text input
{
    float: left;
    height: 23px;
    width: 175px;
}

.lt-ie8 .search .submit
{
    text-indent: -9000px;
    text-transform: capitalize;
}

.lt-ie8 .openServiceMenu button, .lt-ie8 .openServiceMenu button:hover
{
    padding: 1px 25px 3px 4px !important;
    width: 90px !important;
    background-position: 68px 12px !important;
}

.lt-ie8 .serviceMenu
{
    padding-bottom: 30px;
}

.lt-ie8 .contentsGuide-listLeft, .lt-ie8 .contentsGuide-listRight
{
    width: 289px;
}

.lt-ie8 .breadcrumb ol
{
    padding-left: 8px;
    height: 20px;
}
.lt-ie8 .breadcrumb li
{
    margin-right: 16px;
    display: block;
}

.lt-ie8 .breadcrumb li a
{
    display: block;
}

.lt-ie8 .hubLevel2
{
    width: 960px;
    margin-left: 0;
}

.lt-ie8 #margin0-ie7
{
    margin-left: 0;
}

.lt-ie8 .hubFeatured-text
{
    margin-bottom: 0;
}

.has-js .lt-ie8 .accordion + ul, .has-js .lt-ie8 .accordion + div
{
    position: static;
    visibility: visible;
}

.lt-ie8 .address
{
    margin-top: 25px;
}


@media print
{
    /* Print styles here SEE http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/  */
    body
    {
        color: #000;
        background: #fff;
        width: 100%;
        margin: 0;
        padding: 0;
    }
 @
    page
    {
        margin: 1cm;
    }
    thead th, thead td, tbody th, tbody td
    {
        display: table-cell;
        vertical-align: top;
    }
    .betaBanner, .headerGlobal, .menu ul, .serviceMenu-mobile .innerNoPadding, .search_full, .search, .contactTeam, .webmetric, .socialMedia, .related, .serviceMenu, .left-toc, .nav_toc, .pagName, .footer-contents ul
    {
        display: none;
    }
    .content
    {
        position: relative;
    }
    .footerGlobal
    {
        display: block;
        position: fixed;
        bottom: 0px;
        width: 100%;
        font-size: 12px;
        padding: 0;
        margin: 0;
        line-height: 18px;
    }

    .footer-contents
    {
        padding: 0;
        margin: 0;
    }
    .footer-contents p
    {
        margin: 0 auto;
        padding: 0;
        width: 80%;
        line-height: 18px;
    }
    .innerNoPadding h1
    {
        font-size: 1.5rem;
    }
    main .innerNoPadding h1:before
    {
        content: "The Royal Borough of Kensington and Chelsea:\a "; /* Use of the \a adds a line break after the generated content  */
        font-size: 1.5rem;
        white-space: pre;
    }

    a:after
    {
        content: " (" attr(href) ")\a ";
        font-weight: normal;
        text-decoration: none;
        white-space: pre;
    }
    a.docLink-icon:after, .breadcrumb a:after, .footer-contents a:after
    {
        content: none;
    }
    h2, h3
    {
        page-break-after: avoid;
    }
    .topic h2, .topic h3
    {
        page-break-before: avoid;
    }
    .docLink-icon
    {
        display: none;
    }
    .docLink a
    {
        margin: 0;
        padding-left: 0;
    }
    td:empty, th:empty
    {
        display: none;
    }
    .accordionContents, .js .accordion + ul
    {
        opacity: 1;
        position: relative;
        visibility: visible;
    }
    span.contactphone + span
    {
        /* Hides the email address in the footer which is not a generic email address */
        display: none;
    }
    .contentsGuide a:after
    {
        content: "\a (" attr(href) ") ";
        font-size: .8em;
        white-space: pre;
    }
    .contentsGuide
    {
        border: none;
    }
    .contentsGuide ol
    {
        padding: 0;
    }
    a[title^="Bookmark"]
    {
        display: none;
    }
    .hubLevel1 li a
    {
        display: block;
        float: none;
    }
    hubLevel1 li
    {
        display: block;
        float: none;
        padding: 0;
    }
    .hubFeatured li
    {
        border: none;
    }
    .hubFeatured li img
    {
        display: none;
    }
    #webchatplanning
    {
        display: none;
    }
    .topic
    {
        padding-top: 0;
    }
    .topic h2 a:after
    {
        content: "\a (" attr(href) ") ";
    }
    .warningRed, .noticeMessage, .policyInfo
    {
        text-decoration: underline;
        font-weight: bold;
    }
    .warningRed:before
    {
        content: url(/images/refresh/warningRed.png);
    }
    a[href$=".jpg"]:after
    {
        display: none; /* See https://www.rbkc.gov.uk/planningandbuildingcontrol/planningapplications/guidanceandadvice/howtheprocessworks.aspx - hiding links to images    */
    }
    .noticeMessage, .noticeMessage:before, .policyInfo, .policyInfo:before
    {
        border: none !important;
    }
    #frmPropertySearch table a:after, #frmPropertySearch .pagNumber a:after, #casefiledocs a:after
    {
        content: " ";
    }
    .r-tabs-panel
    {
        display: block;
    }

    #frmPropertySearch table a:after, #frmPropertySearch .pagNumber a:after, #casefiledocs a:after, #frmPropertySearch .tabMenu a:after, #recordDetailsPage a:after, td[class*="tablecell"] a:after
    {
        content: "";
    }
    #frmPropertySearch #simpleSearch, #frmPropertySearch .clearer, #frmPropertySearch .pagNumber, #recordDetailsPage #userCommentForm, #frmPropertySearch table tfoot, #frmPropertySearch .r-tabs-state-default, .pagination
    {
        display: none;
    }

    #frmPropertySearch thead
    {
        display: table-header-group;
    }
    #frmPropertySearch th a
    {
        color: #000000;
        border-bottom: none;
    }



}

.notice-message::before
{
    content: "";
    width: 6px;
    margin-right: 16px;
    background: #FBAC32 6px;
    margin: 0 0;
    display: table-cell;
    border-right: solid #FFF 16px;
}

.notice-message
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: solid #FBAC32 1px;
    padding: 16px 16px 16px 0;
    background-color: #FFF;
    margin-bottom: 1.5rem;
    font-size: 14px;
    //font-size: .875rem;
    line-height: 24px;
    display: table;
}

.warning-red
{
    color: #B2334C;
    background: #F0D9DB url(/sites/all/themes/rbkc/images/refresh/warningRed.png) 15px center no-repeat;
}

.warning-yellow
{
    color: #8F5522;
    background: #F3E5AF url(/sites/all/themes/rbkc/images/refresh/warningYellow.png) 15px center no-repeat;
}

.warning-red, .warning-yellow
{
    padding: 10px 15px 10px 55px;
    margin: 0 0 24px 0;
    font-size: 14px;
    //font-size: .875rem;
    line-height: 24px;
}

.form_accordion
{
    position: relative;
}
.form_item
{
    display: block;
    overflow: hidden;
    clear: both;
    margin-bottom: 24px;
}

.form_accordion_hook::before
{
    content: '';
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    left: -6px;
    background: url("/resources/developers/css/images/chevron-right.svg") left center no-repeat;
    background-size: 25px;
}

.js .form_accordion_content.hide
{
    display: block;
    max-height: 0px;
    transition: all linear .2s;
    overflow: hidden;
}

.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}

.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}

.r-tabs .r-tabs-panel {
    padding: 15px;
    display: none;
}

.r-tabs .r-tabs-accordion-title {
    display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }

    .r-tabs .r-tabs-accordion-title {
        display: block;
    }
}