@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
@charset "utf-8";

body {
	background-color: #000;
	font-family: 'Open Sans', sans-serif;
	color: #333;
	position: relative;
	margin: 0;
}
a {
	text-decoration: none;
	color: #2770cd;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	color: #609;
}
h1 {
	font-size: 1.5rem;
}
h2 {
	font-size: 1.2em;
}
h2.small-bottom-margin {
	margin-bottom: 0.5rem;
}
h2.small-bottom-margin + p {
	margin-top: 0.5rem;
}
h3 {
	font-size: 1.2rem;
	margin-top: 10px;
	margin-bottom: 6px
}
h4 {
	font-size: 1em;
	margin-bottom: 0px;
}
h4 + p {
	margin-top: 2px;
}
h1.title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.3em;
	color: #000000;
	font-variant: normal;
}
img {
	border: 1px solid;
}
@media only screen and (max-width: 470px) {
    body {
		margin: 0px;
	}
}
sup {
	line-height: 0.7rem;
	margin-left: 2px;
}

/*--------------------------------------------------------------------------------------------------*/
/* CONTAINERS  -------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/

#containerR { /* for regular pages */
	max-width: 700px;
	margin: 0 auto;
}
#containerwithsidebarR { /* for regular pages with sidebar */
	max-width: 1200px;
	margin: 0 auto;
	background-color: #28391d;
	padding: 0;
	box-sizing: border-box;
}
#innercontainer {
	width: 100%;
	padding: 0 10px 10px;
	box-sizing: border-box;
}
@media only screen and (min-width: 740px) {
	#innercontainer {
		display: flex;
		align-items: flex-start;
		flex-direction: row-reverse;
	}
}
@media only screen and (max-width: 700px) {
	#innercontainer {
		padding-left: 0;
		padding-right: 0;
	}
}
#twosidebarsR { /* new frontpage */
	max-width: 64.4%;
	margin: 0 auto;
	background-color: #fff;
	padding: 1px 15px 2px;
	box-sizing: border-box;
    display: inline-block;
    border: 1px solid black;
    border-radius: 10px;
}
.containerfixedwidth1200 { /* for pages with tabular data */
	max-width: 1200px;
	margin: 0 auto;
	background-color: #28391d;
	padding: 0px;
	box-sizing: border-box;
}
.containerfixedwidth1200 #innercontainer { /* keep the sidebar at the bottom */
	display: block;
}
@media only screen and (min-width: 991px) and (max-width: 1100px) {
	#twosidebarsR {
		width: 60.5%;
	}
}
@media only screen and (max-width: 990px) {
    #twosidebarsR {
        max-width: 100%;
    }
}
.imagecaptionbox {
    width: 204px;
    border: 1px solid #333;
    padding: 5px 5px 0;
    background-color: white;
}
.imagecaptionbox p {
	margin-top: 0.3rem;
	margin-bottom: 0.5rem;
}
.two-wide-container-R {
	margin-bottom: 10px;
}
.two-wide-container-R img {
	max-width: 100%;
}

@media only screen and ( min-width: 600px ) {
	.two-wide-container-R {
		width: 49%;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
	}
	.first-container {
		padding-right: 5px;
	}
	.last-container {
		padding-left: 5px;
	}
}
/*--------------------------------------------------------------------------------------------------*/
/* RESPONSIVE IMAGE CONTAINERS  --------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.img800R {
	max-width: 800px;
    margin: 0 auto;
}
.img675R {
	max-width: 675px;
}
.img650leftR {
	float: left;
	max-width: 650px;
}
.img650centerR {
    margin: 0 auto;
	max-width: 650px;
}
.img625centreR {
	margin: 0 auto;
	max-width: 625px;	
}
.img600centerR {
	margin: 0 auto;
	max-width: 600px;
}
.img600leftR {
	float: left;
	max-width: 600px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.img550leftR {
	float: left;
	max-width: 550px;
	margin-right: 10px;
	margin-bottom: 5px;
}
.img550rightR {
	float: right;
	max-width: 550px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.img500leftR {
	float: left;
	max-width: 500px;
	margin-right: 10px;
	margin-bottom: 5px;
}
.img500rightR {
	float: right;
	max-width: 500px;
	margin-left: 10px;
	margin-bottom: 5px;
}

.img500centerR {
	margin: 0 auto;
	max-width: 500px;	
}
.img450leftR {
	float: left;
	max-width: 450px;
	margin-right: 10px;
	margin-bottom: 5px;
}
.img450rightR {
	float: right;
	max-width: 450px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.img400centreR {
	margin: 0 auto;
	max-width: 400px;	
}
.img400leftR {
	float: left;
	max-width: 400px;
	margin-right: 10px;
	margin-bottom: 5px;
}
.img400rightR {
	float: right;
	max-width: 400px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.img350rightR {
	float: right;
	max-width: 350px;
	margin-left: 10px;
	margin-bottom: 5px;
}
.img350leftR {
	float: left;
	max-width: 350px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
}
.img300leftR {
	float: left;
	max-width: 300px;
	margin-right: 10px;
	margin-bottom: 5px;
}
.img300rightR {
	float: right;
	max-width: 300px;
	margin-left: 10px;
	margin-bottom: 5px;
}
/*.imgR {
	width: 100%;
	height: auto;
}*/
.imgR {
	display: block;
	max-width: 100%;
	height: auto;
    margin: 0 auto;
}
.borderless {
	border: none;
}
.thumbwithcaption {
    width: 202px;
    border: 1px solid black;
    float: right;
    padding: 5px;
    margin-left: 5px;
}
@media only screen and (max-width: 960px) {
	.img550leftR {
		float: none;
		margin: 0 auto;
	}
	.img550rightR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 750px) {
	.img600leftR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 675px) {
	.img500leftR {
		float: none;
		margin: 0 auto;
	}
	.img500rightR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 625px) {
	.img450leftR, .img450rightR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 565px) {
	.img400leftR, .img400rightR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 510px) {
	.img350leftR, .img350rightR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 450px) {
	.img300leftR, .img300rightR {
		float: none;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 359px) {
	#innercontainer {
		padding: 0px;
	}
}


/*--------------------------------------------------------------------------------------------------*/
/* IMAGE PROTECTION  -------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.image-comment-box {
	text-align: center;
}
.image-wrapper {
	position: relative;
}
.image-wrapper img {
	max-width: 100%;
}

.image-top-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.image-middle-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.image-bottom-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.image-wrapper img {
	pointer-events: none;
}
.image-wrapper .image-comment-wrapper .img800R img {
	pointer-events: none;
}
.image-wrapper .img800R img {
	pointer-events: none;
}
#modimg {
	pointer-events: none;
}

/* The Modal (background) */
.image-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}

/* Modal Content */
.image-modal-content {
  padding: 20px;
  width: 100%;
}

/* The Close Button */
.image-modal-close {
  color: #aaa;
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 28px;
  font-weight: bold;
}

.image-modal-close:hover,
.image-modal-close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

#image-modal-box {
    text-align: center;
    position: relative;
}
.image-modal-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modal-image-bottom-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------------------------------------------------------*/
/* HEADERS -----------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/

#headerR {
	color: #FFFFFF;
}
#headerlogin {
    background-color: #555;
    display: inline-block;
    height: 30px;
    width: 100%;
    color: #eee;
    text-align: right;
    padding: 0 50px;
    box-sizing: border-box;
}
@media only screen and (max-width: 359px) {
	#headerR {
		height: 67px;
		padding: 5px 0px;
	}
}
@media only screen and (max-width: 700px) {
	#headerR {
		height: 95px;
	}
}

/*--------------------------------------------------------------------------------------------------*/
/* TOP NAV     -------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/

.navleft {
	float: left;
}
.navleft img {
	margin: 10px 0 0 8px;
}
.navright {
	float: right;
}
.navright ul {
    list-style-type: none;
	padding-left: 0px;
	padding-right: 10px;
    display: inline-block;
} 
.navright li {
	display: inline;
}
.navright a:hover {
	color: #FFF;
}

/* text below is to hide the menu button on bigger screens */
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-size: 1.4em;
	text-decoration: none;
	color: #fff;
	background: #666;
	text-align: center;
	padding-top: 8px;
	display: none;
	height: 30px;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
@media only screen and (max-width: 359px) {
	.navleft {
		float: none;
		margin-left: auto;
		margin-right: auto;
		width: 215px;
        display: inline-block;
	}
	.navright {
		float: none;
		clear: both;
	}
	.navright ul {
		margin: 0px;
		padding: 0px;
		position: static;
		display: none;
	}
	.navright li {
		font-size: 1.4em;
		display:inline-block;
		float: left;
		margin-right: 1px;
		margin-bottom: 1px;
		height: 30px;
	}
	.navright li a {
		display: block;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #fff;
		background: #888;
	}
	.navright li a:hover {  
    	background-color: #BBB;  
	}
	.navright ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display: block;
	}
}
@media only screen and (min-width: 360px) and (max-width: 700px) {
    .navleft {
		float: none;
		max-width: 215px;
        display: inline-block;
	}
	.navright {
		float: none;
		clear: both;
		text-align: center;
	}
	.navright ul {
		margin-top: 3px;
		padding-right: 0px;
	}
}
@media only screen and (max-width: 400px) {
	#menu {
		font-size: 0.9rem;
	}
}

/*--------------------------------------------------------------------------------------------------*/
/* SIDEBAR  ----------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.leftsidebarR {
	width: 25%;
	height: 100%;
	padding: 0 10px 0 0;
	float: left;
	font-weight: 300;
	color: #fff;
	box-sizing: border-box;letter-spacing: 0.3px;
}
@media only screen and (min-width: 740px) {
	.leftsidebarR {
		position: sticky;
		top: 0;
		float: unset;
	}
}
.leftsidebarR h2, .leftsidebarR h3 {
	color: white;
}
.leftsidebarR h2 {
	text-align: center;
	border-bottom: 1px solid white;
	padding-bottom: 7px;
	font-weight: 500;
}
.leftsidebarR h3 {
	font-weight: 500;
	margin-bottom: 0;
	margin-top: 1rem;
}
.leftsidebarR h3 ~ p {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
}
.leftsidebarR a, .front-right-sidebarR a, .front-left-sidebarR a, .docleftsidebarR a {
	color: #ebde74;
}
.leftsidebarR a:hover {
	text-decoration: underline;
}
.leftsidebarR a:visited, .docleftsidebarR a:visited {
	color: #fffacf;
}
.sidebar-menu {
	margin-top: 0.5rem;
}
.leftsidebarR .sidebar-menu a, .docleftsidebarR .sidebar-menu a {
	width: 100%;
	display: inline-block;
}
.leftsidebarR .sidebar-menu a:hover, .docleftsidebarR .sidebar-menu a:hover {
	text-decoration: none;
	background-color: rgba(255,255,255,0.2);
}
.front-left-sidebarR, .front-right-sidebarR {
	width: 17%;
	box-sizing: border-box;
	color: #fff;
    display: inline-block;
    font-size: 0.95rem;
    text-align: center;
}
.front-left-sidebarR {
    float: left;
    margin-right: 10px;
}
.front-left-sidebarR p, .front-right-sidebarR p {
	margin-top: 0;
	text-align: left;
}
.front_page_sidebar_image {
    max-width: 100%;
}
.front-right-sidebarR {
    float: right;
}
h2.titleside {
	font-size: 1.2em;
	text-align: center;
	font-weight: 500;
}
.sidedate {
	font-weight: bold;
	border-top: 1px solid #eef;
	border-bottom: 1px solid #eef; 
	padding: 2px 0;
	margin-bottom: 3px
}
.sidedate+p {
	margin-top: 3px;
}
.sidebarcredit {
	font-size: 0.8em;
}
@media only screen and (min-width: 991px) and (max-width: 1100px) {
	.front-left-sidebarR, .front-right-sidebarR {
		width: 19%;
	}
}
@media only screen and (min-width: 670px) and (max-width: 990px) {
    .front-left-sidebarR {
        float: none;
        clear: both;
        width: 48%;
        border-right: 1px solid white;
        margin-top: 5px;
        padding-right: 10px;
    }
    .front-right-sidebarR {
        float: none;
        width: 48%;
        margin-top: 5px;
        vertical-align: top;
    }
    .front_page_sidebar_image {
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
    }
}
@media only screen and (min-width: 450px) and (max-width: 669px) {
    .front-left-sidebarR {
        clear: both;
        width: 48%;
        margin-top: 5px;
        padding-right: 10px;
    }
    .front-right-sidebarR {
        width: 48%;
        margin-top: 5px;
        vertical-align: top;
    }
}
@media only screen and (max-width: 449px) {
    .front-left-sidebarR {
        clear: both;
        width: 100%;
        margin-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .front-right-sidebarR {
        clear: both;
        width: 100%;
        margin-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: top;
    }
    .front_page_sidebar_image {
        margin: 0 auto;
        display: block;
    }
}
@media only screen and (max-width: 739px) {
	.leftsidebarR {
		width: 100%;
		padding: 10px 10px 0px;;
		clear: both;
		float: none;
	}
	.leftsidebarR p:first-child {
		margin-top: 0px;
	}
	.titleside {
		margin-top: 0px;
	}
}
@media only screen and (min-width: 470px) and (max-width:739px) {
	.leftsidebarR {
   		column-count: 2;
     	column-gap: 20px;
     	column-rule: 1px outset #000;
		padding-bottom: 0px;
	}
}
.affix-top {
}
.affix {
	box-sizing: border-box;
    position: fixed;
	top: 0px;
}
.affix-bottom {
/*	position: relative; */
}
.current-page {
	width: 100%;
	display: inline-block;
	background-color: rgba(255,255,255,0.1);
	border-radius: 5px;
}
/*--------------------------------------------------------------------------------------------------*/
/* CONTENT  ----------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.content-container {
	background-color: #FFF;
	box-sizing: border-box;
	border-radius: 10px;
}
#contentR {
	max-width: 670px;
	background-color: #FFF;
	padding: 1px 15px 2px;
}
#contentR a:hover {
	text-decoration: underline;
}
#contentwithsidebarR {
	max-width: 75%;
	float: right;
	background-color: #FFF;
	padding: 1px 15px 2px;
	margin: 0;
	box-sizing: border-box;
	flex-grow: 2;
	border-radius: 8px;
}
#contentwithsidebarR p img {
	border-width: 1px;
	border-style: solid;
}
#content-1200w { /* pages with tabular data */
	max-width: 100%;
	padding: 1px 15px 2px;
	margin-bottom: 10px;
	display: inline-block;
}

#imagecontent {
    background-color: #FFF;
    width: 100%;
    padding: 10px 10px 1px 10px;
    box-sizing: border-box;
}
.imagedisplay {
    float: left;
    box-sizing: border-box;
    width: 45%;   
}
@media only screen and (min-width: 360px) and (max-width: 739px) {
	.content-container {
		background-color: #FFF;
		display: inline-block;
	}
}
@media only screen and (min-width: 360px) and (max-width: 739px) {
	#contentwithsidebarR {
		width: 100%;
		padding: 1px 10px 2px;
		margin: 0;
		max-width: unset;
	}
}
@media only screen and (max-width: 599px) {
    .imagedisplay {
        float: none;
        box-sizing: border-box;
        width: 100%;   
    }
}
@media only screen and (max-width: 359px) {
	#contentwithsidebarR {
		padding: 0px 10px;
		margin: 3px 0px 10px;
		max-width: 100%;
	}
    #imagecontent {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.half {
	width: 50%;
	box-sizing: border-box;
	float: left;
}

/*--------------------------------------------------------------------------------------------------*/
/* FOOTER  -----------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
#footerR {
	clear: both;
	height: 2rem;
	padding: 0 15px 5px;
	color: #ffffff;
}
#footerR a, #headerR a {
	color: #fffacf;
}
@media only screen and (max-width: 599px) {
	#footerR {
		height: 3.5rem;
	}
	#footerR div {
		float: none;
		width: 100%;
		text-align: center;
	}
}
/*--------------------------------------------------------------------------------------------------*/
/* MARGINS & INDENTS  ------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/

.indent2emR { text-indent: 2em; }
.indent3emR { text-indent: 3em; }
.indent4emR { text-indent: 4em; }
.indent5emR { text-indent: 5em; }
.indent6emR { text-indent: 6em; }
.indent7emR { text-indent: 7em; }
.indent8emR { text-indent: 8em; }

.minusindent1emR { text-indent: -1em; }
.minusindent2emR { text-indent: -2em; }
.minusindent3emR { text-indent: -3em; }
.minusindent4emR { text-indent: -4em; }

.margin2emR { margin-left: 2em; }
.margin3emR { margin-left: 3em; }
.margin4emR { margin-left: 4em; }
.margin5emR { margin-left: 5em; }
.margin6emR { margin-left: 6em; }
.margin7emR { margin-left: 7em; }
.margin8emR { margin-left: 8em; }

@media only screen and (min-width: 599px) {
	.collapsibleContainer2em {
		margin-left: 2em;
		margin-right: 2em;
	}
	.collapsibleContainer3em {
		margin-left: 3em;
		margin-right: 3em;
	}
}
@media only screen and (min-width: 450px) and (max-width:574px) {
    .margin6emR {
        margin-left: 4em;
    }
    .margin8emR {
        margin-left: 5em;
    }
}
@media only screen and (min-width: 360px) and (max-width:449px) {
	.indent2emR {
		text-indent: 2em;
	}
	.indent3emR {
		text-indent: 3em;
	}
	.indent4emR {
		text-indent: 3em;
	}
	.indent5emR {
		text-indent: 4em;
	}
	.indent6emR {
		text-indent: 5em;
	}
	.indent7emR {
		text-indent: 5em;
	}
	.indent8emR {
		text-indent: 5em;
	}
	.minusindent3emR {
	 	text-indent: -2em;	
     }
	.minusindent4emR {
		text-indent: -2em;	
	}
	
	.margin2emR {
		margin-left: 2em;
	}
	.margin3emR {
		margin-left: 2em;
	}
	.margin4emR {
		margin-left: 3em;
	}
	.margin5emR {
		margin-left: 4em;
	}
	.margin6emR {
		margin-left: 2em;
	}
	.margin7emR {
		margin-left: 5em;
	}
	.margin8emR {
		margin-left: 3em;
	}
}

@media only screen and (max-width:359px) {
	.indent2emR {
		text-indent: 2em;
	}
	.indent3emR {
		text-indent: 2em;
	}
	.indent4emR {
		text-indent: 3em;
	}
	.indent5emR {
		text-indent: 3em;
	}
	.indent6emR {
		text-indent: 3em;
	}
	.indent7emR {
		text-indent: 3em;
	}
	.indent8emR {
		text-indent: 4em;
	}
	.minusindent3emR {
		text-indent: -2em;	
	}
	.minusindent4emR {
		text-indent: -2em;	
	}
	
	.margin2emR {
		margin-left: 2em;
	}
	.margin3emR {
		margin-left: 2em;
	}
	.margin4emR {
		margin-left: 3em;
	}
	.margin5emR {
		margin-left: 3em;
	}
	.margin6emR {
		margin-left: 3em;
	}
	.margin7emR {
		margin-left: 3em;
	}
	.margin8emR {
		margin-left: 3em;
	}
}
/*--------------------------------------------------------------------------------------------------*/
/* TEXT --------------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.textcenter {
	text-align: center;
}
.textright {
	text-align: right;
}
.textcenterunderline {
	text-align: center;
	text-decoration: underline;
}
.centre {
	text-align: center;
}
.center {
	text-align: center;
}
.underline {
	text-decoration: underline;
}
.nobottommargin {
    margin-bottom: 0px;
}
.redtext {
	color: #FF0000;	
}
.black {
	color: #000000;
	font-weight: bold;
}
.green {
    color: green;   
}
.blacknobold {
	color: #000000;
}
.answertext { /* used in heater fault charts */
	color: red;
}
.greentext { /* used in heater fault charts */
	color: green;
}
.arrows {
    font-size: 1.3em;
}

/*--------------------------------------------------------------------------------------------------*/
/* WIDTH  ------------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w75 { width: 75px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w200 { width: 200px; }
.w300 { width: 300px; }
.w325 { width: 325px; }
.w350 { width: 350px; }
.w375 { width: 375px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }
.w670 { width: 670px; }
.w700 { width: 700px; }
.w750 { width: 750px; }
.w800 { width: 800px; }
.w850 { width: 850px; }
.mw210 { max-width: 210px; }

/*--------------------------------------------------------------------------------------------------*/
/* MISC  -------------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.noborder {
	border: none;
}
.noborderimagelink {
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	border-width: 0;
	border-style: none;
}
.floatleft {
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 0px;
}
.floatright {
	float: right;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 5px;
}
.floatcentre {
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	width: 200px;
}
#contentR p a:visited {
	color:#9900CC
}
#contentR p a:hover {
	text-decoration: underline;
}
.clear {
	clear: both;
}
.clearleft {
	clear: left;
}
.clearright {
	clear: right;
}
.twocolumn {
   	column-count: 2;
    column-gap: 20px;
	margin-top: 5px;
}
.twocolumn p {
	margin-top: 0px;
}
@media screen and (min-width: 600px) {
	.two-column-over-600w {
		columns: 2;
	}
}
.fakelink {
	color: #0099FF;
	cursor: pointer;
}
.fakelink:hover {
	text-decoration: underline;
}
.nostyle {
    list-style: none;
}
.closefit {
    margin-top: -12px;  
}
.gallerytitle {
    width: 100%;
    background-color: #DDD;
    border-top: 0.2px solid #999;
    border-bottom: 0.2px solid #999;
}
.gallerytitle h1 {
    margin: 5px 20px;
}
.gallerytitle h3 {
    margin-left: 10px;
}
.maintitle {
    font-size: 1.4em;
}
#testmenu {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 1.2em;
}
.docmix {
	font-family: Courier, "Courier New", monospace;
	letter-spacing: -0.05em;
	color: #000;
	padding-left: 24px;
}
.allocationsright {
    float: right;
    border-left: 1px solid black;
    padding-left: 10px;
    margin-left: 5px;
    background-color: #fff;
}
.redbackground {
    background-color: #fec;
}
.greenbackground {
    background-color: #71E37A;  
}
.max-100pc {
	max-width: 100%;
}
.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}

@keyframes ellipsis {
    to {
    width: 1.25em;    
    }
}

@-webkit-keyframes ellipsis {
    to {
    width: 1.25em;    
    }
}
.works-container {
	vertical-align: top;
	padding: 1%;
	box-sizing: border-box;
	text-align: center;
	clear: both;
}

.works-container img {
	max-width: 100%;
	height: auto;
	float: left;
	margin-right: 10px;
}

.works-container p {
	margin-top: .3rem;
	text-align: left;
	font-size: 0.975rem;
}

@media screen and (max-width: 330px) {
	.works-container a img {
		float: none;
	}
}

@media screen and (min-width: 450px) {
    .works-container {
        display: inline-block;
        width: 49.5%;
    }
    .works-container img {
        float: none;
        margin-right: 0;
    }
}
@media screen and (min-width: 620px) {
    .works-container {
        width: 32.8%;
    }
}
@media screen and (min-width: 1120px) {
    .works-container {
        width: 24.6%;
    }
}
.bg-er {
	background-color: #0506a5;
}
.bg-lmr {
	background-color: #a60003;
}
.bg-ner {
	background-color: #e98d00;
}
.bg-scr {
	background-color: #008fed;
}
.bg-sr {
	background-color: #0f881c;
}
.bg-wr {
	background-color: #693519;
}


/*--------------------------------------------------------------------------------------------------*/
/* ACCIDENT PAGES  ---------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.accidentheader {
	color: black;
	margin-bottom: 2px;	
	font-size: 1.05em;
}
.accidentdate {
	font-weight: bold;
}
.accidentimage {
	width:200px;
	float: right;
	margin-left: 0.8em;
}
.accidenttype {
	margin-top: 0px;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 0px;
}
.accidentsource {
	margin-top: 2px;
	font-size: 0.9em;
}
/*--------------------------------------------------------------------------------------------------*/
/* BOOK PAGES  -------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.book {
	border-bottom: 1px solid #666;
	clear: both;
}
.bookimage, .bookdetails, .bookdesc {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
.bookimage {
	width: 20%;	
}
.bookimage img {
	max-width: 100%;	
}
.bookdetails {
	width: 30%;
	padding: 5px;
}
.bookimage150 {
	max-width: 160px;
	float: left;
}
.booktitle {
	font-weight: bold;
	font-size: 1.3em;
}
.bookdetails p {
	margin-top: 0px;
}
.bookdesc {
	width: 50%;
}

.bookdesc p {
	margin-top: 7px;
}

/*--------------------------------------------------------------------------------------------------*/
/* TABLES  -----------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
table.alltop td {
    vertical-align: top;
}

th.left {
	text-align: left;	
}
tr.private {
    background-color: #fcc;   
}
td.centertop {
	text-align: center;
	vertical-align: top;
}
td.highlight {
    text-align: center;
    background-color: #FF9;
    min-width: 80px;
}
td.top {
	vertical-align: top;
}
td.middle {
	text-align: center;
}
td.centerunderlined {
	text-align: center;
	text-decoration: underline;
}
td.rightunderlined {
	text-align: right;
	text-decoration: underline;
}
td.bottom {
	vertical-align: bottom;
}
td.right {
	text-align: right;
}
td.indent {
	padding-left: 40px;
	text-indent: -40px;	
}
.paddingfour td {
	padding-left: 4px;
	padding-right: 4px;
}
.over {
	max-width: 100%;
	overflow: auto;
	margin-bottom: 10px;
}
.shallow {
	line-height: 3px;	
}
.shallow hr{
	margin: 1px;	
}
.shallowtop {
	line-height: 3px;	
}
.shallowtop hr{
	margin-top: 1px;	
}
.t100pc {
	width: 100%;
}
.t400 {
	width: 400px;
}
.t450 {
	width: 450px;
}
.t500 {
	width: 500px;
}
.t525 {
	width: 525px;
}
.t550 {
	width: 550px;
}
.t575 {
	width: 575px;
}
.t585 {
	width: 585px;
}
.t600 {
	width: 600px;
}
.t650 {
	width: 650px;
}
.t675 {
	width: 675px;
}
.t1100 {
	width: 1150px;	
}

.bordertable {
	border-collapse: collapse;
	margin-left: 1px;
}
.bordertable td {
	border: 1px black solid;
    padding: 1px 4px;
}
.bottomborder {
    border-bottom: 1px solid black;   
}
.leftheader th {
	text-align: left;
}
.allcellstop td {
	vertical-align: top;
}
.numbertable {
	margin-top: 6px;
}
.allocationtable, .numbertable {
    border-collapse: collapse;  
}
.numbertable th {
	text-align: left;
}
.allocationtable tr:hover, .numbertable tr:hover {
	background-color: #ededed;
}
.allocationtable td {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 4px;
    vertical-align: top;
}
.table-row-hover tr:hover {
	background-color: #ededed;
}
.cell-300 {
    max-width: 300px;   
}
.cell-280 {
    max-width: 280px;   
}
.allocation-bordertable {
	border-collapse: collapse;
	margin-left: 1px;
}
.allocation-bordertable td {
	border: 1px #ddd solid;
    padding: 1px 4px;
}
.allocation-bordertable tr:hover td {
	background-color: #f6f6f6;
}

td.border-right, .allocation-bordertable td.border-right {
	border-right: 1px solid black;
}

.region-text-add-padding {
	padding: 2px 6px;
}

td.vehicle {
    min-width: unset;
    text-align: center;
}
td.vehicle.er, 
td.allocation.er,
tr:hover td.vehicle.er, 
tr:hover td.allocation.er {
	background: #0506a5;
}
.background-er {
	background: #0506a5;
	color: white;
}
td.vehicle.lmr, 
td.allocation.lmr, 
tr:hover td.vehicle.lmr,
tr:hover td.allocation.lmr {
	background: #a60003;
}
.background-lmr {
	background: #a60003;
	color: white;
}
td.vehicle.ner, 
td.allocation.ner,
tr:hover td.vehicle.ner, 
tr:hover td.allocation.ner {
	background: #e98d00;
}
.background-ner {
	background: #e98d00;
	color: white;
}
td.vehicle.scr, 
td.allocation.scr,
tr:hover td.vehicle.scr, 
tr:hover td.allocation.scr {
	background: #008fed;
}
.background-scr {
	background: #008fed;
	color: white;
}
td.vehicle.wr, 
td.allocation.wr,
tr:hover td.vehicle.wr, 
tr:hover td.allocation.wr {
	background: #693519;
}
.background-wr {
	background: #693519;
	color: white;
}

td.allocation.er, 
td.allocation.lmr, 
td.allocation.scr, 
td.allocation.wr, 
td.vehicle.er a, 
td.vehicle.lmr a, 
td.vehicle.scr a, 
td.vehicle.wr a, 
td.vehicle.er a:hover,  
td.vehicle.lmr a:hover, 
td.vehicle.scr a:hover, 
td.vehicle.wr a:hover, 
#contentwithsidebarR td.vehicle.er a:visited, 
#contentwithsidebarR td.vehicle.scr a:visited, 
#contentwithsidebarR td.vehicle.lmr a:visited, 
#contentwithsidebarR td.vehicle.wr a:visited, 
tr:hover td.vehicle.lmr a, 
tr:hover td.allocation.lmr {
	color: white;
}
td.new, .allocation-bordertable tr:hover td.new, span.new {
    background-color: #AFA;
}
td.withdrawn, .allocation-bordertable tr:hover td.withdrawn {
    background-color: #F00;
    color: white;
    text-align: center;
}
.allocation-bordertable tr:hover td.withdrawn.vehicle, .allocation-bordertable tr:hover td.withdrawn.allocation {
    background-color: #f6f6f6;
    color: white;
}
td.vehicle.withdrawn, td.allocation.withdrawn {
	background: white;
}
td.vehicle.withdrawn a, td.allocation.withdrawn, .allocation-bordertable tr:hover td.withdrawn.allocation, #contentwithsidebarR td.vehicle.withdrawn a:visited {
	color: red;
}
.allocation-summary ul {
	margin-top: 6px;
	margin-bottom: 12px;
}
.allocation-summary li {
	margin-top: 4px;
	margin-bottom: 4px;
}
.departmental-vehicle {
	background-color: #FFD;
}
.parcel-vehicle {
	background-color: #DDF;
}
.stored {
	background-color: #FDD;
}
.colour-code {
	margin: 0;
	padding: 0 6px;
	display: none;
	color: black;
}

table.no-padding {
	border-collapse: collapse;
}
table.no-padding td {
	padding: 0 2px;
}

.scrapyard-table th, 
.scrapyard-table td {
	padding-right: 12px;
}

/*--------------------------------------------------------------------------------------------------*/
/* FORMS  ------------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.imageupload fieldset {
	background-color: #f1f1f1;
	border: none;
	border-radius: 2px;
	margin-bottom: 12px;
	overflow: hidden;
	padding: 0 0.625em;
}
.fields {
	background-color: #fff;
	margin: 0.75em;
	padding: 0.25em 0.75em;
}
.imageupload h2 {
	background-color: #dedede;
	border-bottom: 1px solid #d4d4d4;
	border-top: 1px solid #d4d4d4;
	border-radius: 5px;
	box-shadow: 3px 3px 3px #ccc;
	color: #fff;
	font-size: 1.1em;
	margin: 12px;
	padding: 0.3em 1em;
	text-shadow: #9FBEB9 1px 1px 1px;
	text-transform: uppercase;	
}
h2.hdr-date {
	background-color: #4494c9;
}
h2.hdr-id {
	background-color:#377d87;
}
.textinput40 {
	width: 40px;
}
.textinput50 {
	width: 50px;
}
.textinput75 {
	width: 75px;	
}
.textinput125 {
	width: 125px;	
}
.textinput175 {
	width: 175px;
}
.textinput250 {
	width: 250px;	
}
.textinput400 {
	width: 400px;	
}
.formrow label {
	display: inline-block;
	text-align: right;
	vertical-align: top;
}
.label70 {
	width: 70px;
}
.label100 {
	width: 100px;
}
.label150 {
	width: 150px;
}
#upload {
	width: 430px;
}
#imagebutton {
	width: 150px;
	margin-left: 150px;
}
.underlabel100 {
	margin-left: 105px;
}
#contactform {
    width: 100%;   
}
#contactform input[type=text] {
    width: 100%;   
}
#contactform input[type=email] {
    width: 100%;   
}
#contactform textarea {
    width: 100%;   
}
.displayinline {
    display: inline-block;   
}
.redbg {
    background-color: red;   
}
@media only screen and (max-width: 399px) {
    .fields {
        margin: 0;
    }
    .imageupload fieldset {
        margin: 0;
        padding: 0;
    }
}

input[type=checkbox].rememberme {
    display: inline-block;
}

/*--------------------------------------------------------------------------------------------------*/
/* MENU LOG IN  ------------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/

#user-menu {
    float: right;
    list-style: none;
    text-align: right;
    padding: 0 5px 0 0;
    position: relative;
}

#user-menu img {
    border: none;
}

#user-menu li {
    position: relative;
}

#user-hidden-menu {
   list-style: none;
   display: none;
   position: absolute;
   top: 5px;
   left: -65px;
   padding: 0;
   font-size: 14px;
}

#user-hidden-menu li{
   width: 70px;
   background-color: rgba(62,62,62,0.8);
   padding: 5px 10px 10px;;
}

#user-hidden-menu li a {
   color: #fff;
}

#user-hidden-menu li:hover {
   text-decoration: underline;
}

#black_overlay {
     width: 100%;
     background-color: #333;
     left: 0;
     opacity: 0.8;
     position: absolute;
     top: 0;
     visibility: hidden;
     z-index: 50;
}

#login-form  {
    width:320px;
    border:2px solid #a5a5a5;
    padding:10px 20px;
    background-color:#dfdfdf;
    border-radius:10px;
    display:none;
    text-align:center;
    z-index:999;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@media only screen and (max-width: 369px) {
    #login-form  {
        width:80%;
    }
}
#imageuploadarrow {
    position: relative;
    left: -5px;
    top: 2px;
}

@media only screen and (max-width: 500px) {
    #imageuploadarrow {
        display: none;
    }
}

#login-form input {
    width:92%;
    margin:10px 0;
    padding:5px;
    height:30px;
    box-shadow:4px 4px 8px 1px rgba(0,0,0,.5);
    border-radius:5px;
}

#login-form input[type=checkbox].rememberme {
    width: 20px;
    height: 20px;
}

#login-form input#menu-login-submit {
    width:98%;
    margin:10px auto;
    background-color:#999;
    border-radius:5px;
    color:#fff;
    height:46px;
    font-size:16px;
}

#login-form input:active, #login-form input:focus {
    border-color: rgba(3, 3, 3, .8);
}

#login-form input#menu-login-submit:hover, #log-in-form input#menu-login-submit:focus {
    background-color:#777;
}

.menu-login {
    cursor: pointer;
}

.close {
    float: right;
    position: absolute;
    right: -8px;
    top: -10px;
	cursor:pointer;
    border: 0;
}

.large-text-16 {
    font-size: 16px;
}

th:focus {
	outline: none;
}

/*--------------------------------------------------------------------------------------------------*/
/* DIAGRAM TABLE  ----------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/

.diagrams {
	width: 670px;
	border-collapse: collapse;
}
.diagrams th {
	text-align: left;
	color: black;
	padding: 5px 0 2px;
	border-bottom: 1px solid black;
}
.diagrams td {
	vertical-align: top;
}
.diagrams .days {
	width: 40px;
}
.diagrams .headcode {
	width: 35px;
}
.diagrams .service {
	width: 300px;
}
.diagrams .spacer {
	height: 10px;
}

/*--------------------------------------------------------------------------------------------------*/
/* Tabs  ----------------------------------------------------------------------------------*/ 
/*--------------------------------------------------------------------------------------------------*/
.fake-tab {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #f6f6f6;
    padding: 10px;
    border: 1px solid grey;
    min-height: 19px;
    position: relative;
    top: 1px;
}

.fake-tab-wrapper {
	border-bottom: 1px solid #666666;
}

.fake-tab.date-tab {
	position: relative;
	top: 2px;
}
/*********
image upload / edit
*********/
#loadmebox {
	position: fixed;
	top: 5px;
	right: 5px;
	background-color: white;
	padding: 10px;
	border: 1px solid black;
	border-radius: 5px;
}
#loadmebox p {
	margin-top: 0;
}

#closeloadbox {
	float: right;
	font-size: 1.5em;
	margin-bottom: 0;
	cursor: pointer;
}
#closeloadbox:hover {
	color: red;
}

#change-the-image .change-button, .fake-button {
	background-color: #ddd;
	padding: 4px 8px;
	display: inline-block;
	color: black;
	border-radius: 4px;
	border: 1px solid #aaa;
	margin-top: 5px;
	margin-bottom: 0;
}
#change-the-image .change-button:hover, .fake-button:hover {
	background-color: #eee;
	border-color: black;
	cursor: pointer;
}

/*********
external links
*********/
.external-link:after {
	display: inline-block;
	content: ' ';
	background-image: url(/images/external_link.svg);
	width: 0.8rem;
	height: 0.8rem;
	margin-left: 2px;
	position: relative;
	top: -2px;
}
.leftsidebarR .external-link:after {
	background-image: url(/images/sidebar_external_link.svg);
}

/*********
type pages
*********/
.type-page h1~hr {
	margin-bottom: 0;
}
.type-page h2 {
    background-color: #f3f3f3;
    padding: 10px 2px;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}
.type-page hr+h2 {
	margin-top: 0;
	border-top: unset;
	margin-bottom: 0.2rem;
}
.type-page h3 {
    border-bottom: 1px #ccc solid;
    padding: 9px 0 7px;
    margin-top: 0;
}

.jump-to-box {
	border: 1px solid #aaa;
	padding: 0.5rem 2rem;
}
.jump-to-box p {
	margin-bottom: 0;
}
.jump-to-box ul {
	margin-top: 6px;
	padding-left: 18px;
}

/*********
Builders
*********/
.builders h2 {
	font-size: 0.95rem;
	font-weight: normal;
	border-bottom: 1px #ccc solid;
}
.builders ul {
	margin-top: 6px;
}

/*********
References
*********/
#reference-list li:target {
	background-color: #fffacf;
}

/*********
back to top arrow
*********/
#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    transform: rotate(270deg);
    position: fixed;
    bottom: 80px;
    right: 15px;
    background-color: rgba(65, 110, 25, 0.5);
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    border-radius: 4px;
}
#back2Top:hover {
    background-color: rgba(65, 110, 25, 1);
    color: rgba(255, 255, 255, 1);
}


/*********
operations
*********/
.operations-page .works-container h4 {
	margin-top: 0;
}

.line-map {
	padding-left: 10px;
	margin-bottom: 16px;
}
.line-map div {
	border-left: 3px red solid;
	padding-left: 5px;
	height:  24px;
}
.line-map .station {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: red;
	display: inline-block;
	position: relative;
	left: -11px;
}
.line-map div.first-station {
	height: 16px;
}
.first-station .station, .first-station .station-name {
	position: relative;
	top: -8px;
}
.line-map div.last-station {
	height: 15px;
}
#morebutton {
	padding: 6px 20px;
	font-size: 1.2rem;
	text-transform: uppercase;
}




#profileformations {
	max-height: 500px;
	overflow-y: scroll;
}



.image-copyright {
	font-size: 0.9rem;
	text-align: center;
}

.citation-columns {
	font-size: 0.8rem;
	padding-left: 1.5rem;
}
@media screen and ( min-width: 500px ) {
	.citation-columns {
		column-count: 2;
		column-gap: 2rem;
	}
}










.flex-container {
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	flex-wrap: wrap;
}
.flex-container div img {
	max-width: 100%;
}

@media screen and ( min-width: 500px ) {
	.flex-container.flex-2 div {
		width: calc( 50% - 10px );
	}
}