html 
{
    margin: 0;
    padding: 0;
}

@font-face{
    font-family:BritishRailLightNormal;
    src:url('britrln.ttf') format('truetype')
}

@font-face{
    font-family:BritishRailDarkNormal;
    src:url('britrdn.ttf') format('truetype')
}

/*animation

#cf {
  position:relative;
  height:369px;
  width:298px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
*/
/*
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
*/

 #cf4a {
      position: relative;
      /*height: 369px;*/
      /*width: 298px;*/
      width: 80%;
      margin: 0 auto;
    }
    
    #cf4a img {
      display:block; width:100%; height:auto;
      position: absolute;
      left: 0;
    }

#cf4a img {
    -webkit-animation-name: cf4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 8s;
    -moz-animation-name: cf4FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 8s;
    -o-animation-name: cf4FadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 8s;
    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 16s;
}

@keyframes cf4FadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a img:nth-of-type(1) {
  animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
  animation-delay: 8s;
}
#cf4a img:nth-of-type(3) {
  animation-delay: 4s;
}
#cf4a img:nth-of-type(4) {
  animation-delay: 0;
}

body 
{
    margin: 0;
    padding: 0;
    font-family: 'Century Gothic','Gill Sans';
    font-size: medium;
    color: White;
    background-color: #336699;
    text-align:center;
}

h1
{
     margin: 0;
    padding: 0;
   font-family: BritishRailLightNormal,'Gill Sans','Century Gothic';
    font-size:xx-large;
    color: black;
    background-color: white;
}

h2
{
     margin: 0;
    padding: 0;
   font-family: BritishRailLightNormal,'Gill Sans','Century Gothic';
    font-size: x-large;
    color: black;
    background-color: #336699;
}

h3
{
     margin: 0;
    padding: 0;
   font-family: BritishRailLightNormal,'Gill Sans','Century Gothic';
    font-size: large;
    color: black;
    background-color: #CCCCCC;
}


iframe 
{
    box-sizing:border-box;
}

#header-container
{
    height:5em;
    width:100%;
    margin: 0;
    padding: 0;
    border:0;
    /*position:fixed;*/
}


#sidebar-container
{
    top:0;
    left:0;
    border:0;
    float:left;
    height:30em;
    width:25%;
    /*position:fixed;*/
}

.main-container
{
float:right; 
width:75%;
font-weight:bold;
}

.inner {
    padding-left:25%;
    width: 50%;
    font-weight: bold;
}

.leftalign
{
    text-align:left;
}


.justify
{
    text-align:justify;
}

.main-container p
{
    color:black;
}


ul.sidebar {
    font-family:BritishRailLightNormal,'Century Gothic';
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #336699;
    height: 100%; /* Full height  */
    /*position: fixed;  Make it stick, even on scroll */
    overflow: auto;  Enable scrolling if the sidenav has too much content 
}

li
{
    margin: 0;
    border: 0;
    padding: 0;
    background-color: white;
    font-size:large;
    color:black;
    text-align: left;
}

a.SidebarLink:link, a.SidebarLink:visited
{
	color: black;
    text-decoration: none;
    font-family:BritishRailLightNormal,'Century Gothic'
}

a.SidebarLink:hover
{
	color: black;
    text-decoration: none;
    font-family:BritishRailDarkNormal,'Century Gothic'
}


:visited
{
	color: #CCCCCC;
}

:link
{
	color:Yellow;
}
    
div.MainHeading
{
    text-align: center; background-color: #CCCCCC;
}

p.LatestNews
{
    text-align: center;
    font-family: BritishRailLightNormal,'Century Gothic';
    font-size: x-large;
    background-color: #CCCCCC;
    color: Black
}



/*div.CentreMain
{
		width: 800px;
		margin: 0 auto;
		text-align:center;
}

div.CentreDoc
{
    float: left; 
    margin: 5px;
    width: 500px;
}

div.InnerNav
{
    background-color: White;
}


div.PageText
{
	float:left;
	width:90%;
	text-align:center;
}

div.JustifyPageText
{
	float:left;
	width:90%;
	text-align: justify;
}

table.TOPSTable
{
    width: 100%;
    text-align: left;
    background-color: #CCCCCC;
    color: Black;
    font-family: Courier, monospace;
    margin: 0;
    border: 0;
    padding: 5px;
    text-transform: uppercase;*/