/* 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;
 }


 .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;
	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;
}

.mainContentWrapper .middle-inner {
    padding-bottom: 160px;
}


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

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

 .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

 {
	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;
 }

 main h1 {
	font-size:28.8px;/* Fall back for IE 7 */
	font-size:1.8rem; /* 60/16 For more capable browsers */
	font-weight: 300;
	line-height:60px;
	margin: 0; 
	color:#fff;
	text-align:center;
	border-bottom: 5px solid #f4d033;
	padding: 9px 16px;
	padding: 0.6rem 1rem;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	line-height: 1.5em;
	transition:all .25s linear 0s;
}

.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) */
}

.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 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 {
    clear: both;
    background: #132940 url('../images/refresh/rbkc_footer_logo.png') no-repeat 50% 1.5rem;
    -moz-background-size: 65px;
    -o-background-size: 65px;
    -webkit-background-size: 65px;
    background-size: 65px;
    color: #637484;
    font-size: 13px;
    font-size: .8125rem; /* 13/16 = 0.8125; */
    padding-top: 6.5rem;
    padding-bottom: 1em;
    overflow: visible;
    height: auto;
}

.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: 100%;
	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 {
    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;
}


/* 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%;
}


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;
}

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


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;
}


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   ******************************/


.content .linkResults,
.content .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: none;
	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: none;
	border-bottom: solid #DDD 1px;
	margin: 0;
	padding: 0;
	display:block;
	color: #5E6A77;
	padding: 16px 24px;
	padding: 1.5rem 1.2rem;
	overflow:hidden;
	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;
	margin-bottom: 16px;
	margin-bottom: 1rem;
	clear:left;
}

.linkResults-detail,
.plainResults-detail {
	 color:#3d434d;
	 float:left;
	 clear:left;
}


.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;
	left: 0;
}

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

.pagNumber-numbers ul li {
	display:inline-block;
	padding-left: 0;
	background: none;

}

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

.pagNumber-numbers a{
	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: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 */

/* 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 http://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) {


main h1 {
	font-size: 2rem;
} 
 
.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;
}

main h1	{
	font-size:40px;
	font-size:2.5rem;
	font-weight: 300;
	padding:0.7rem 1rem 1.2rem 1rem;
}

.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;
}

.button:first-of-type + input
{
    margin-left: 20px;
}

.mainContentWrapper .button
{
    width: auto;
}

/****************************************************/
/*              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;
 }

.col3 {
	 margin-left: 6.25%;
	 width: /*20.417%; 20.314%*/ 20.3125%;
	/*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;

}

div[class^="col"] {
	min-height: 1px;
}



/************** 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:static;
	float:right;
	margin: 0;
	left: 0;
}
.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;	
}

.footerGlobal {
    position: absolute;
    width: 100%;
    height: 140px;
}


}/* 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	{
	font-size:49.6px;
	font-size:3.1rem;
}

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

.footerGlobal {
    bottom: 0;
}

.footerGlobal {
	padding:1em 0;
}

.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 http://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;
	}



}