html {
	/* Not sure if this is needed */
	-webkit-text-size-adjust: 100%;
}

html,  body,  div,  span,  object,  iframe, blockquote, pre, abbr,
address, cite, code, del, dfn, em, ins, kbd, q, samp, small, /* strong, */ sub, sup, var,
b, i, dl, dt, dd, fieldset, form, label, legend, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, 
section, summary, time, mark, audio, video, input, select, textarea {
	/* Copied from elsewhere - Check */
	margin:0;
	padding:0;
	border:0;
	font-size: 16px;
	/*font:inherit;*/
	vertical-align:baseline;
	/* Added by PB */
	font-family: Open Sans, Arial, helvetica, sans-serif;
	color: #000000; /* Might be risky - review */
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	/* Copied from elsewhere - Check */
	display:block
}

/*******************************************************************************************************************************************************/
/************** NOTES **********************************************************************************************************************************/
/*******************************************************************************************************************************************************/

/* Many styles are prefixed with span.website, this is done because some user controls */
/* are used in both the front and back end. The styles in these UCs are confirgured so that they are */
/* correct for the back end (which is reused by all sites). These styles are then added */
/* to the website stylesheet but prefixed with 'span.website'. This works because all UCs on the website */
/* are inserted into a span with the 'website' class AND the stylesheets load in the correct order. */

/*******************************************************************************************************************************************************/
/************** general styles *************************************************************************************************************************/
/*******************************************************************************************************************************************************/

.notBold {font-weight: normal;}
.noMargin {margin-bottom: 0px;}

.mainBlue {color: #004f92} /* From guidelines docs */
.midBlue {color: #3372a8} /* From guidelines docs */
.lightMidBlue {color: #7990bc} /* From guidelines docs */

.lightBlue {color: #dbdcfa} /* From old website */
.yellow {color: #fee46d} /* From guidelines docs */
.lightGrey {color: #e0e0e0} /* From guidelines docs */
.veryLightGrey {color: #eaeaea} /* From guidelines docs */
.darkerGrey {color: #bbbbbb} /* From guidelines docs */

.textGrey {color: #323232}

.warning, span.website .cmsred {color: red;} /* Need to add CMS red for modals when in website mode */

ul.noBullet {list-style-type: none;}
ul.noBullet li {margin-left: -2em;}

span.loginMessage {}

img.resizeToFullWidth {width: 100%}

span.website p.cmsh2 {color: #004f92; font-weight: bold; margin-top: 0px; margin-bottom: 10px; line-height: 110%;}

#twitter-widget-0, #twttr-sandbox-0, span.website {
    width:500px;
}

a.redButton {background-color: red; color:#ffffff}

a.redButton:link, p.linkButton a.redButton:visited {color:#ffffff; text-decoration: none;}
a.redButton:active, p.linkButton a.redButton:hover {color:#ffffff; text-decoration: none; background-color: #e40404;}

.updateProgressBackground { /* Fails if there are relative DIVs with z-index below where this is inserted */
    background-color: red;
    filter: alpha(opacity=0);
    opacity: 0.0;
}

/*******************************************************************************************************************************************************/
/************** ADDITIONAL STYLES **********************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.movie-embed-container {
	position: relative;
	padding-bottom: 70%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

div.movie-embed-container iframe,
div.movie-embed-container object,
div.movie-embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.movie-embed-container-bottom {
	height: 0px;
	padding-bottom: 13px;
}

span.plain a:link, span.extralinks a:link {color:#323232; text-decoration: none;}
span.plain a:visited, span.extralinks a:visited {color:#323232; text-decoration: none;}
span.plain a:active, span.extralinks a:active {color:#323232; text-decoration: underline;} 
span.plain a:hover, span.extralinks a:hover {color:#323232; text-decoration: underline;}

span.extralinks {display: none;}

h1.mainHeading {
	font-weight: 600;
}

div.mainHeadingRule {
	background-color: #cccbcb;
	height: 2px;
	margin-bottom: 13px;
}

div.secondaryHeading {
	border-bottom: 1px solid #999999;
	margin-bottom: 13px;

}

div.secondaryHeading h1 {
	color: #323232;
	margin-bottom: 4px;
}

/*******************************************************************************************************************************************************/
/************** MAIN LAYOUT DIV STYLES *****************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.outerContaner {
	width: 100%;
	min-width:320px;
}

div.container,
div.container-secondary,
div.container-header,
div.container-main-nav,
div.container-mobile-nav,
div.container-footer,
div.container-grey,
div.container-LargeCarousel,
div.container-SmallCarousel,
div.container-SmallBanner,
div.container-quicklinks, div.container-quicklinks-content-page {
	width: 100%;
	clear: both;
}

div.container {
	padding-top: 35px;
	background: url(../images/spacers_etc/gradient.gif) repeat-x left top;
}

div.container-secondary {padding-top: 15px;}

div.container-main-nav {
	background-color: #cccccc;
	background: -webkit-linear-gradient(#eaeaea, #cccccc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#eaeaea, #cccccc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#eaeaea, #cccccc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#eaeaea, #cccccc); /* Standard syntax (must be last) */
}

div.container-footer {
	background-color: #cccccc;
	background: -webkit-linear-gradient(#ffffff, #cccccc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffffff, #cccccc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffffff, #cccccc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffffff, #cccccc); /* Standard syntax (must be last) */
}

div.container-mobile-nav {display: none;}

div.container-quicklinks, div.container-quicklinks-content-page {
	background-color: #cccccc;
	background: -webkit-linear-gradient(#cccccc, #eaeaea); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#cccccc, #eaeaea); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#cccccc, #eaeaea); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#cccccc, #eaeaea); /* Standard syntax (must be last) */
    border-top: 1px solid #ffffff;
}

div.container-footer {padding: 20px 0px 7px 0px;}

div.container-grey {background-color: #cccccc;}

div.container-LargeCarousel {background-color: #bbbbbb;}

div.container-SmallCarousel {
	background-color: #bbbbbb;
	display: none;
}

div.container-SmallBanner {
	background-color: #bbbbbb;
	display: none;
}

div.container-SmallBannerAlwaysOn { /* Hidden on phones */
	background-color: #bbbbbb;
	display: block;
}

div.containerInside {
	width: 1000px; /* For ie8 - reset in media stuff below */
	max-width: 1000px;
	margin-left: auto; 		/*** USED TO CENTRE CONTENT ***/
	margin-right: auto; 	/*** USED TO CENTRE CONTENT ***/
	clear: both;
}

div.containerInsideTwo {
	padding: 0px 30px 0px 30px; /* Included here for ie8, also declared in media stuff below */
}

div.containerInsideContent {
	position: relative;		/* Needed so that content / links go above image gallery  */
	width: 100%;
	max-width: 940px;
	/* overflow: hidden; */	/* Removing this fixes new text editor bug with any list with type of decimal, */
							/* all other list types (e.g. square) are fine. If list of type decimal in main */
							/* or secondary content then navigation on left 'usually' fails when logged */
							/* into the CMS in IE11 - all other browsers are fine. */
	clear: both;
}

div.container-footer div.containerInside div.containerInsideTwo div.containerInsideContent {overflow: hidden; /* Ensures bg shows through */}

div.footer {
	padding: 15px 0px 50px 0px;
	text-align: center;
}

/*******************************************************************************************************************************************************/
/************** HEADER STYLES **************************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.header-top {
	text-align: right;
	min-height: 10px;
}

div.header-top-button-menu, div.header-top-button-login {
	float: right;
	display: inline;
	font-weight: bold;
	margin-left: 15px;
}

div.header-top-button-menu {display: none;} /* Included here for ie8, also declared in media stuff below */

div.header-top-button-menu a, div.header-top-button-login a {
    display: inline-block;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px; 
	background-color: #004f92;
    padding: 0px 15px 0px 15px;
    height: 28px;
}

div.header-top-button-menu a:link, div.header-top-button-login a:link {color:#fee46d; text-decoration: none;}
div.header-top-button-menu a:visited, div.header-top-button-login a:visited {color:#fee46d; text-decoration: none;}
div.header-top-button-menu a:active, div.header-top-button-login a:active {color:#ffffff; text-decoration: none;} 
div.header-top-button-menu a:hover, div.header-top-button-login a:hover {color:#ffffff; text-decoration: none;}

div.header-top-text {
	float: right;
}

div.header-main {
	clear: both;
}

div.header-main-left {
	float: left;
	padding-top: 0px;
	padding-bottom: 15px;
}

div.header-main-right {
	float: right;
	padding-top: 25px;
}

/*******************************************************************************************************************************************************/
/************** COLUMN STYLES **************************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.twoColumnContent, div.twoColumnContent-footer, div.fourColumnContent, div.fourColumnContent-footer,
div.threeColumnContentNav, div.threeColumnContentMain, div.threeColumnContentRight {
	float: left;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

div.threeColumnContent, div.threeColumnContent-footer, div.fourColumnContent, div.fourColumnContent-footer,
div.threeColumnContentNav, div.threeColumnContentMain, div.threeColumnContentRight {
	margin-bottom: 5px;
}

div.twoColumnContent, div.twoColumnContent-footer {width: 49%;}
div.fourColumnContent, div.fourColumnContent-footer {width: 48%;}
div.threeColumnContentNav {width: 24%;}
div.threeColumnContentMain {width: 48%;}
div.threeColumnContentRight {width: 24%;}

 div.fourColumnContent-footer {
	border-top: 1px solid #999999;
	padding-top: 15px;
}

div.twoColumnContentSpacer, div.threeColumnContentSpacer, div.fourColumnContentSpacer, 
div.threeColumnContentSpacer-Left, div.threeColumnContentSpacer-Right {
	float: left;
	padding: 0px;
	margin: 0px;
}

div.twoColumnContentSpacer {width: 2%;}
div.threeColumnContentSpacer, div.threeColumnContentSpacer-Left, div.threeColumnContentSpacer-Right {width: 2%;}
div.fourColumnContentSpacer {width: 4%;}

/*******************************************************************************************************************************************************/
/************** MAIN NAVIGATION STYLES *****************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.mainNavigation {
	text-align: center;
	color: #323232;
	font-weight: bold;
	line-height: 110%;
	padding: 10px 0px 10px 0px;
}

span.header-navigation-pipe {color: #ffffff;}

.sectionactive a:link {COLOR: #004f92; text-decoration: none}
.sectionactive a:visited {COLOR: #004f92; text-decoration: none}
.sectionactive a:active {COLOR: #004f92; text-decoration: none}
.sectionactive a:hover {COLOR: #004f92; text-decoration: none}

.sectionNOTactive a:link {color:#323232; text-decoration: none;}
.sectionNOTactive a:visited {color:#323232; text-decoration: none;}
.sectionNOTactive a:active {color:#004f92; text-decoration: none;} 
.sectionNOTactive a:hover {color:#004f92; text-decoration: none;}

/*******************************************************************************************************************************************************/
/************** Panel / mobile navigation headings *****************************************************************************************************/
/*******************************************************************************************************************************************************/

div.panelCellFloatingOn,
div.panelCellFloatingOff {
	margin: 0px;
	padding: 4px 0px 4px 10px;
	width: 100%;	
	border-bottom: 4px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
	
    -webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  }

/* http://stackoverflow.com/questions/1844207/how-to-make-a-div-to-wrap-two-float-divs-inside */
div.panelCellFloatingOn,
div.panelCellFloatingOff {
	float: left;
	clear: both;
}

div.panelCellFloatingOn {background-color: #004f92;}
div.panelCellFloatingOff {background-color: #3372a8;}

div.panelSubNavigation {
	width: 100%;
	padding: 4px 0px 10px 0px;
	margin: 0px;
	clear: both;
}

ul.subNavigation {
	padding: 0px 10px 0px 10px;
	margin-bottom: 0px;
}

ul.subNavigationL3 {
	padding: 0px 10px 0px 0px;
	margin-bottom: 0px;
}

li.subNavigationoff a:link, li.subNavigationL3off a:link {color: #000000; text-decoration: underline}
li.subNavigationoff a:visited, li.subNavigationL3off a:visited {color: #000000; text-decoration: underline}
li.subNavigationoff a:active, li.subNavigationL3off a:active {color: #000000; text-decoration: none}
li.subNavigationoff a:hover, li.subNavigationL3off a:hover {color: #000000; text-decoration: none}

li.subNavigationL3on a:link {color: #004f92; text-decoration: underline}
li.subNavigationL3on a:visited {color: #004f92; text-decoration: underline}
li.subNavigationL3on a:active {color: #004f92; text-decoration: none}
li.subNavigationL3on a:hover {color: #004f92; text-decoration: none}

div.panelCellLeft {
	float: left;
	/* padding: 4px 0px 4px 0px; */
	width: 85%;
}

div.panelCellRight {
	float: right;
	width: 15%;
	text-align: right;
}

div.panelCellLeft p.panel,
div.panelCellLeft p.panelPageActive {
	margin: 0px;
	font-weight: bold;
}

p.panel a:link {color: #ffffff; text-decoration: none}
p.panel a:visited {color: #ffffff; text-decoration: none}
p.panel a:active {color: #ffffff; text-decoration: underline}
p.panel a:hover {color: #ffffff; text-decoration: underline}

p.panelPageActive a:link {color: #ffffff; text-decoration: none}
p.panelPageActive a:visited {color: #ffffff; text-decoration: none}
p.panelPageActive a:active {color: #ffffff; text-decoration: underline}
p.panelPageActive a:hover {color: #ffffff; text-decoration: underline}

/*******************************************************************************************************************************************************/
/************** Image gallery / carousel ***************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.carousel {
	position: relative;
}

div.carouselImage {
	position: relative;
	top: 0px;
	left: 0px;
	text-align: right;
	width: 100%;
	z-index: 1;
}

div.carouselOverlay {
	position: relative;
	top: -300px;
	left: 600px; /* 940 - 40px (right border) - 300 (size) */
	z-index: 2;
	height: 300px;
	background-color: #333333;
	opacity: 0.75;
	filter: alpha(opacity=75); /* For IE8 and earlier */
	overflow: hidden;
	width: 300px; /* Added to not cover movie */
}

div.carouselOverlayLink {
	position: absolute;
	top: -50px;
	left: 0px;
	z-index: 3;
	padding: 0px 10px 0px 10px;
	line-height: 50px;
	height: 50px;
	font-size: 20px;
	font-weight: bold;
	overflow: hidden;
}

div.carouselOverlayLink a:link {color: #ffffff; text-decoration: none}
div.carouselOverlayLink a:visited {color: #ffffff; text-decoration: none}
div.carouselOverlayLink a:active {color: #ffffff; text-decoration: underline}
div.carouselOverlayLink a:hover {color: #ffffff; text-decoration: underline}

div.carouselContent {
	position: relative;
	top: -600px;
	left: 600px;
	z-index: 3;
	width: 50%; /* Added to not cover movie */
}

div.carouselText {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	padding: 20px 0px 20px 20px;
	height: 245px;
	width: 290px;
	overflow: hidden;
}

div.carouselTextHeading {
	font-size: 30px;
	line-height: 100%;
	font-weight: 600;
	margin-bottom: 10px;
	color: #ffffff;
}

div.carouselTextBody {
	font-size: 17px;
	font-weight: normal;
	color: #ffffff;
}

div.carouselButtonContainer {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	padding: 0px 0px 0px 20px;
	height: 35px;
	width: 290px;
	overflow: hidden;
	clear: both;
}

div.carouselButton {
	float: left;
	padding: 0px 15px 0px 15px;
	line-height: 33px;
	height: 35px;
	background: #004f92;
	font-size: 18px;
	font-weight: bold;
}

div.carouselButton a:link {color: #fee46d; text-decoration: none}
div.carouselButton a:visited {color: #fee46d; text-decoration: none}
div.carouselButton a:active {color: #fee46d; text-decoration: underline}
div.carouselButton a:hover {color: #fee46d; text-decoration: underline}

/*******************************************************************************************************************************************************/
/************** Main quicklinks buttons ****************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.headerQuickLinks {
	font-weight: bold;
	clear: both;
}

ul.headerQuickLinks {
	list-style-type: none;
	margin: 0px auto;
	padding:0;
	width: 100%;
}

li.quickLink, p.panel, p.panelPageActive {
    display: inline;
    text-align: center;
    font-size: 18px;
	font-weight: bold;
}

li.quickLink a {
    display: inline-block; *zoom: 1; *display: inline; /* IE7 */
	margin: 0px;
	padding: 4px 10px 4px 10px;
	width: 25%;	
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    
    -webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

/* li.quickLink a {background-color: #cccccc;} */

li.quickLink a:link {color:#004f92; text-decoration: none;}
li.quickLink a:visited {color:#004f92; text-decoration: none;}
li.quickLink a:active {color:#fee46d; text-decoration: none; background-color: #004f92;} 
li.quickLink a:hover {color:#fee46d; text-decoration: none; background-color: #004f92;}

/*******************************************************************************************************************************************************/
/************** LEFT navigation LEVEL TWO **************************************************************************************************************/
/*******************************************************************************************************************************************************/

/**************/
/* Note that these styles are also used for QuickLinks and news on homepage */
/**************/

div.leftNavigationContainer {
	width: 100%;
	margin-bottom: 13px;
	padding: 0px;
	border-top: 1px solid #aaaaaa;
}

div.leftNavigationContainerCell {
	width: 100%;
	padding: 4px 0px 5px 0px;
	margin: 0px;
	border-bottom: 1px solid #aaaaaa;
}

ul.subnavigationONWithL3, ul.subnavigationONNoL3,
ul.subnavigationOFFWithL3, ul.subnavigationOFFNoL3 {
   margin-left: 1.4em;
   margin-right: 10px;
   margin-bottom: 0px;
   margin-top: 0px;
   font-weight: bold;
}

ul.subnavigationONWithL3 {list-style-image: url(../images/spacers_etc/level2_bullet_ON.gif);}
ul.subnavigationOFFWithL3 {list-style-image: url(../images/spacers_etc/level2_bullet_OFF.gif);}
ul.subnavigationONNoL3, ul.subnavigationOFFNoL3 {list-style-image: url(../images/spacers_etc/level2_bullet_LINE.gif);}

ul.subnavigationONWithL3 a:link, ul.subnavigationONNoL3 a:link {COLOR: #004f92; text-decoration: none}
ul.subnavigationONWithL3 a:visited, ul.subnavigationONNoL3 a:visited {COLOR: #004f92; text-decoration: none}
ul.subnavigationONWithL3 a:active, ul.subnavigationONNoL3 a:active {COLOR: #004f92; text-decoration: underline}
ul.subnavigationONWithL3 a:hover, ul.subnavigationONNoL3 a:hover {COLOR: #004f92; text-decoration: underline}

ul.subnavigationOFFWithL3 a:link, ul.subnavigationOFFNoL3 a:link {COLOR: #323232; text-decoration: none}
ul.subnavigationOFFWithL3 a:visited, ul.subnavigationOFFNoL3 a:visited {COLOR: #323232; text-decoration: none}
ul.subnavigationOFFWithL3 a:active, ul.subnavigationOFFNoL3 a:active {COLOR: #323232; text-decoration: underline}
ul.subnavigationOFFWithL3 a:hover, ul.subnavigationOFFNoL3 a:hover {COLOR: #323232; text-decoration: underline}

/*******************************************************************************************************************************************************/
/************** LEFT navigation LEVEL THREE ************************************************************************************************************/
/*******************************************************************************************************************************************************/

ul.L3navigation {
   margin-top: 3px;
   margin-left: 2.9em;
   margin-right: 10px;
   margin-bottom: 0px;
   color: #323232;
   list-style-type: square;
}

/* Colour in colour stylesheets */
li.L3navigationON a:link {COLOR: #004f92; text-decoration: none}
li.L3navigationON a:visited {COLOR: #004f92; text-decoration: none}
li.L3navigationON a:active {COLOR: #004f92; text-decoration: underline}
li.L3navigationON a:hover {COLOR: #004f92; text-decoration: underline}

li.L3navigationOFF a:link {COLOR: #323232; text-decoration: none}
li.L3navigationOFF a:visited {COLOR: #323232; text-decoration: none}
li.L3navigationOFF a:active {COLOR: #323232; text-decoration: underline}
li.L3navigationOFF a:hover {COLOR: #323232; text-decoration: underline}

/*******************************************************************************************************************************************************/
/************** cookie policy style ********************************************************************************************************************/
/*******************************************************************************************************************************************************/

#CookiePolicy {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	padding: 0px 10px 0px 10px;
	color:#444444;
	background-color:#ffffff;
	padding:7px 5px 7px 5px;
	border-top:1px solid #444444;
	border-bottom:1px solid #444444;
	margin:0;
	position:fixed;
	z-index:999999999;
	bottom:0;
	left:0;
	width:100%;
}

p.CookiePolicy {
	color:#323232;
	font-size: 16px;
	margin-left: auto; 		/*** USED TO CENTRE CONTENT ***/
	margin-right: auto; 	/*** USED TO CENTRE CONTENT ***/
	text-align: center;
	max-width: 940px;
}

span.CookiePolicy  {
	padding: 0px;
	background-color: #ffffff;
	font-weight: bold;
}

span.CookiePolicy a {
	padding: 1px 6px 1px 6px;
	background-color: #004f92;
}

span.CookiePolicy a:link, span.CookiePolicy a:visited {color: #ffffff; text-decoration: none}
span.CookiePolicy a:active, span.CookiePolicy a:hover {
	color: #ffffff;
	text-decoration: underline;
	background-color: #3372a8;
}

/*******************************************************************************************************************************************************/
/*********** TOOLTIPS **********************************************************************************************************************************/
/*******************************************************************************************************************************************************/

.tooltip_link {
    cursor: pointer;
    text-decoration: underline;
}

div.tooltipBody, div.tooltipBody_NoWidth {
    border: #7f7f7f 1px solid;
    background-color: #e3e3e3;
    padding: 10px;
    color: #000000;
} 

div.tooltipBody {width: 240px;}

/*******************************************************************************************************************************************************/
/*********** PAGING ************************************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.pagerContainer {
	margin-bottom: 13px;
	border-bottom: 1px solid #636467;
	width: 100%;
}

div.pagerLinks {
	border-left: 1px solid #636467;
	border-top: 1px solid #636467;
	border-right: 1px solid #636467;
	margin-left: 10px;
	margin-right: 10px;
	padding: 3px 10px 3px 10px;
}

/*******************************************************************************************************************************************************/
/************** Screen specific stuff *****************************************************************************************************************/
/*******************************************************************************************************************************************************/

/* Biggest size */
@media only screen and (min-width: 1020px)
{	
	/* Reset from value above which is required for ie8 */
	div.containerInside {width: 100%;}

	/* Also declared above for ie8 */
	div.containerInsideTwo {padding: 0px 30px 0px 30px;}
	div.header-top-button-menu {display:none;}
}

/* Anything less than 1019px (Medium size) */
@media only screen and (max-width: 1019px) 
{
	div.containerInside {width: 100%; max-width: 960px} /* 940px plus 10px border search side */
	div.containerInsideTwo {padding: 0px 10px 0px 10px;} /* Gives a bit of a border */
			
	div.container-LargeCarousel {display: none; z-index: -1;}
	div.container-SmallCarousel {
		display: block; /* Block used to ensure background colour shows */
	}
	
	div.carouselOverlay {top: -260px; height: 260px; width: 250px; left: 408px; /* 688 - 30px (right border) - 250px (size) */}
	div.carouselContent {top: -520px; height: 260px; left: 408px;}
	
	div.carouselText {
		padding: 15px 0px 15px 15px;
		height: 215px;
		width: 220px;
	}
	
	div.carouselTextHeading {font-size: 28px;}
	div.carouselTextBody {font-size: 16px;}
	
	div.carouselButtonContainer {
		padding: 0px 0px 0px 15px;
		height: 30px;
		width: 200px;
	}
	
	div.carouselButton {
		line-height: 28px;
		height: 30px;
		font-size: 16px;
	}
	
	h1, h1 p {font-size: 22px;}
	
	div.twoColumnContentSpacer {display:none;}
	
	div.twoColumnContent, div.twoColumnContent-footer {
		width: 100%;
		padding-top: 15px;
	}
	
	div.twoColumnContent-footer {border-top: 1px solid #999999;}
	
	div.fourColumnContent-footer {
		text-align: center;
		border-top: 0px;
		padding-top: 0px;
	}
	
	/* Button text a bit smaller to fit*/
	li.quickLink, p.panel, p.panelPageActive {font-size: 16px;}
}

/* Anything less than 767px (Small size) */
@media only screen and (max-width: 767px)
{
	div.container-SmallCarousel {display: none; z-index: -1;}
	div.container-SmallBanner {
		display: block; /* Block used to ensure background colour shows */
	}

	div.carouselOverlay {
		position: absolute;
		top: -50px;
		height: 50px;
		left: 0px;
		width: 100%;
	}
	
	h1, h1 p {font-size: 20px;}
	h2, h2 p, p.cmsh2, p.larger {font-size: 18px;}

	div.threeColumnContentSpacer {display:none;}
	
	div.threeColumnContentSpacer-Left {width: 4%;}
	div.threeColumnContentSpacer-Right {display: none;}
	div.threeColumnContentNav {width: 31%;}
	div.threeColumnContentMain, div.threeColumnContentRight {width: 65%;}
	div.threeColumnContentRight {float: right;}

	div.header-main-right {display: none;}
	span.extralinks {display: inline;}
	
	span.header-navigation-pipe {display: none;}
	
	/* quick links as two rows*/
	li.quickLink a {
		width: 50%;
	    border-bottom: 1px solid #adbfda;
	}
}

/* Smaller than iPhone 5s width */
@media only screen and (max-width: 567px)
{	
	div.header-top-button-menu {display: inline;}
	div.header-main-left {padding-top: 10px;}
	div.container-mobile-nav {display: block; margin-bottom: 10px;}
	div.container-main-nav {display: none;}
	div.container-quicklinks-content-page {display: none;}

	div.carouselOverlay {
		top: -40px;
		height: 40px;
	}
	
	div.carouselOverlayLink {
		top: -40px;
		line-height: 40px;
		height: 40px;
		font-size: 18px;
	}
	
	div.threeColumnContentSpacer-Left {display: none;}
	div.threeColumnContentNav {display: none;}
	div.threeColumnContentMain, div.threeColumnContentRight {width: 100%;}
	
	span.loginMessage {display: none;}
}

/* Anything less than 399px (Tiny size) */
@media only screen and (max-width: 399px)
{	
	div.container-SmallBannerAlwaysOn {display: none;}

	div.carouselOverlay {
		top: -35px;
		height: 35px;
	}
	
	div.carouselOverlayLink {
		top: -35px;
		line-height: 35px;
		height: 35px;
		font-size: 16px;
	}

	div.fourColumnContentSpacer {display: none;}
	div.fourColumnContent, div.fourColumnContent-footer {width: 100%;}
}

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

form {margin-bottom: 0px;} /* NEEDED AS PAGE HAS A FORM TAG AROUND IT */

p.formspacing, p.cmsPara,
ul.formspacing {
	margin-bottom: 8px;
	clear: both;
}

p.formspacingLarge {
	margin-bottom:30px;
	clear: both;
}

input.fullWidth, textarea.fullWidth, select.fullWidth,
input.halfWidth, textarea.halfWidth, select.halfWidth,
span.website input.cmsrightcolumnwidthform, span.website select.cmsrightcolumnwidthform,
span.website input.cmsrightcolumnwidthformStandardButton, span.website select.cmsrightcolumnwidthformStandardButton,
input.button, input.buttonRed, span.website input.cmsinputbuttonmain,
input.buttonSecondary,
input.fieldSearch,
/* Needed for member address */
span.website input.cmshalfwidthforminbox,
span.website textarea.cmshalfwidthforminbox,
span.website select.cmshalfwidthforminbox {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	padding: 3px 6px 3px 6px;
	margin: 0px;
	background: #ffffff; 
	color: #323232;
	border:1px solid #323232;
	font-size: 14px;
}

input.fullWidth, input.fieldSearch {
	height: 28px;
}

input.fullWidth:focus, textarea.fullWidth:focus, select.fullWidth:focus {
	background: #f1f1f1;
}

input.fieldSearch {
	width: 200px;
	height: 28px;
}

div.buttonSearch {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	border:1px solid #323232;
	float: left;
	background-color: #004f92; 
	width: 30px;
	padding: 4px 6px 4px 6px;
	margin: 0px;
	height: 28px;
}

input.fullWidth, textarea.fullWidth, select.fullWidth,
span.website input.cmsrightcolumnwidthform, span.website select.cmsrightcolumnwidthform,
span.website input.cmshalfwidthforminbox, span.website textarea.cmshalfwidthforminbox, span.website select.cmshalfwidthforminbox {width: 100%}

input.halfWidth, textarea.halfWidth, select.halfWidth, 
span.website input.cmsrightcolumnwidthformStandardButton, span.website select.cmsrightcolumnwidthformStandardButton {width: 50%}

input.button, input.buttonRed, span.website input.cmsinputbuttonmain { /* Overrides stuff above */
	background: #004f92;
	color: #ffffff;
	font-weight: bold;
}

input.buttonRed {background: red;}

input.button:focus, input.buttonRed:focus, span.website input.cmsinputbuttonmain:focus {
	background: #f1f1f1;
	color: #323232;
}

input.buttonSecondary:focus {
	background: #f1f1f1;
}

span.gifButtonAlign, span.website .gifButtonAlign { /* used to correctly align gif buttons used next to form fields */
	vertical-align: -3px;
}

span.noborder input {
	border: 0px;
	background-color:Transparent;
	margin-right: 6px;
	margin-left: 10px 
}