﻿html
{
   height: 101%;
   background-color: #aaccff;   /* color 1 */
}

/* from index.css */
body 
{
   width: 900px;
   padding: 10px 10px 10px 10px;
   margin: 0 auto;

   font-family: arial, verdana, helvetica, sans-serif;
   color: #000000;
   font-size: 100%;
   font-size: 0.875em;
   
   background-color: #aaccff;   /* colour 1 */
}

div
{
   margin: 0;
   padding:0;
}

a 
{
   text-decoration: none;
   outline: none;
}

a img 
{
   border: none;
}

ul 
{
   list-style-type: none;
   margin:0;
   padding:0;
}   

li
{
   margin:0;
   padding:0;
}

h1
{
   margin: 0px 0px 0px 0px;
   padding: 0;

   font-family: Cambria, Georgia, "Times New Roman", Times, serif;
   font-size: 100%;
   font-size: 3em;
   font-weight: bold;
   text-align: center;
}

h2 
{
   margin: 3px 3px 3px 3px;

   font-family: Cambria, Georgia, "Times New Roman", Times, serif;
   font-size: 100%;
   font-size: 1.5em;
   font-weight: bold;
   text-align: center;
}

h3 
{
   margin: 8px 8px 4px 0px;

   font-family: Cambria, Georgia, "Times New Roman", Times, serif;
   font-size: 100%;
   font-size: 1.1em;
   font-weight: bold;
   text-align: left;
}

h4 
{
   margin: 8px 8px 4px 0px;

   font-family: Cambria, Georgia, "Times New Roman", Times, serif;
   font-size: 100%;
   font-size: 0.9em;
   font-weight: bold;
   text-align: left;
}

p
{
   margin:0;
   padding-bottom: 0.6em;
}

img
{
   border: none;
}

figure 
{
   display: block;
   margin-top: 0em;
   margin-bottom: 0em;
   margin-left: 1em;
   margin-right: 1em;
}

.video-body { width: 1330px; }

.closelines { padding-bottom: 0; }
.at-left { float: left; }
.at-right { float: right; }
.no-float { clear: both; }
.at-middle { vertical-align: middle; }

.button
{
  background-color: #2266dd;
  color: #ffffff;
  padding: 2px 10px 2px 10px;   
  border-radius: 5px;
  font-size: 100%;
}

.red-button
{
  background-color: #ff0000;
  color: #ffffff;
  padding: 2px 10px 2px 10px;   
/*  border-radius: 5px;  */
  font-size: 100%;
}

.box
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.lbox
{
	display: flex;
	align-items: center;
	justify-content: left;
}

.row  {	display: flex; }
.column { flex: 20%; }   /* For 5 columns */

.header
{
   text-align: center;
   background-color: #aaccff;   /* colour 1 */
   padding: 10px 10px 10px 10px;   
   border: none;
}

.text-header
{
	text-align: center;
	padding-bottom: 10px;
}

.panel-spacer50
{
   height: 50px;
}

.panel-spacer25
{
   height: 25px;
}

.panel
{
  background-color: #ffffff;

  padding: 1em 1.5em 1em 1.5em;
  border: none;
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  font-size: 100%;
  font-size: 1.2em;
}

.panel-left
{
  background-color: #ffffff;

  padding: 10px 10px 10px 10px;   
  border: none;
  width: 45%;
  float: left;
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  font-size: 100%;
  font-size: 1.2em;
}

.panel-right
{
  background-color: #ffffff;

  padding: 10px 10px 10px 10px;   
  border: none;
  width: 45%;
  float: right;
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  font-size: 100%;
  font-size: 1.2em;
}

.news-panel
{
  background-color: #ffffff;
  margin: 0.5em 0.5em 0.5em 0.5em;
  padding: 0.6em 0.6em 1em 0.6em;   
  border: none;
  flex: 0 0 45%;
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  font-size: 100%;
  font-size: 1.2em;
  position: relative; /* This allows items in this container to be positioned using the absolute attribute */
}

.indent1 { padding-left: 1em; }
.dedent1 { padding-right: 1em; }
.indent2 { padding-left: 2em; }
.dedent2 { padding-right: 2em; }
.indent3 { padding-left: 3em; }
.dedent3 { padding-right: 3em; }

.hang4 { text-indent: -4em; }
.lmargin5 { margin-left: 5em; }

.lefted  { text-align: left; }
.righted { text-align: right; }
.centered { text-align: center; }
.justified 
{ 
  text-align: justify;
  text-justify: inter-word;
}

.bolded { font-weight: bold; }
.underlined { text-decoration: underline; }
.italiced { font-style: italic; }
.right-to-left { direction: rtl; }

.red-text { color: red; }
.blue-text { color: blue; }
.green-text { color: green; }

.padright { padding-right: 1em; }
.padtop { padding-top: 0.4em; }
.padbottom { padding-bottom: 0.6em; }

.relative-div { position: relative; }

.thin-border { border: 1px solid black; }
	
.disc-bullet { list-style-type: disc; }   /* For the ul tag */

.datestamp
{
  /* position the date stamp near the bottom right corner of the container */
  /* The container must have the relative position attribute */

  position: absolute;
  bottom: 0;
  right: 0.6em;

  font-family: "Lucida Sans", "Trebuchet MS", "Liberation Sans", sans-serif;
  font-size: 100%;
  font-size: 0.8em;
}

/* Styles for the Timeline page  */

.cream { background-color: #fcfad7; }
.grey { background-color: #dddddd; }
      
.timeline-date 
{ 
  padding-left: 0.5em; 
  padding-right: 0.5em;
  padding-top: 0.4em;
  flex: 0 0 3.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
      
.timeline-text
{
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
    
.flex-panel 
{ 
  display: flex;
}
      
.flex-panel-wrap 
{ 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

