/*some singleton classes */
.left   { text-align:left }
.right  { text-align:right}
.centralise { margin-left:auto; margin-right:auto;}
.top    { vertical-align: top }
.middle { vertical-align: middle }
.bottom { vertical-align: bottom }

html, body { height:100%; }

body {
  margin    : 0; 
  padding   : 0; 
  background-color:white;
  color     : black;
  font-family: Arial,Verdana,Helvetica,sans-serif; 
  }

li   {list-style-type : disc; margin-top:0}
ul   { margin-top:0}
h1 {margin : 0}
h2 {margin : 0}
h3 {margin : 0}
form {margin : 0}

/* css3 logo animation */
@keyframes animateLogo
{
  from { color : #000099; 
         text-shadow: 0px 0px 1px;}
  to   { color : #0000ff; 
         text-shadow: 5px 5px 3px green;}
}
@-webkit-keyframes animateLogo
{
  from { color : #000099; 
         text-shadow: 0px 0px 1px;}
  to   { color : #0000ff; 
         text-shadow: 5px 5px 3px green;}
}

/* header, footer, left margin */

#headerTopLine {
    padding   : 12px; 
    text-align: center;
    background-color:#000066; 
  }

#headerLogo {
    animation : animateLogo 2s ease-in-out infinite alternate;          /* IE9 FF and opera */
    -webkit-animation : animateLogo 2s ease-in-out infinite alternate;  /* chrome and safari */
    max-width : 20ex; 
    width     : 20ex; 
    border    : 2px solid dark-blue; 
    margin    : 0 auto;
    padding   : 12px; 
    text-align: center; 
    font-size : 20px; 
    font-style: italic;
    color     : #000099; 
    background-color:#ccffff; 
    white-space  : nowrap; 
    border-radius: 4px; 
  }

#headerLine2 {
    height    : 15px; 
    background-color:#ccffff;
  }

#headerLine3 {
    height    : 15px; 
    background-color:#00dd99;
  }

#footerLine1 {
    clear     : both; 
    height    : 15px; 
    background-color:#000066;
  }

#footerLine2 {
    height    : 15px; 
    font-size : 50%; 
    text-align: center;
    color     : #990000; 
    background-color:#ccffff; 
    line-height: 15px;   /* center vertically */
  }

#footerLine3 {
    height    :15px; 
    background-color:#000066;
  }

/* left hand menu margin */

#container {
    display   : table;
  }

#leftMargin {
    display   : table-cell; 
    width     : 15ex; 
    background-color:#ccffff; 
    text-align: left; 
    padding   : 2em 1em 4em 2em;
    white-space:nowrap; 
  }

/* home page - main content area */
 
#contentArea {
  display   : table-cell; 
  width     : 100%;
  text-align: center; 
  padding   : 12px; 
  background-color:#ffffff; 
  color     : black;
  }

#descripBox {
  margin    : 2em auto; 
  border    : 2px solid lightgray; 
  padding   : 12px;
  }

#companyPara {
  margin    : 10em 0 2em 0; 
  font-size : x-small;
  }

/* contact us page */

#contactPostPara {
    margin:2em 0 0 6ex; 
    text-align:left;
  }

#contactPostTable {
    margin    : 0 auto;
  }

#contactPostTable td,
#contactMessageTable td {
    padding   : 5px;
    xxvertical-align: top;
    white-space: nowrap;
  }

#xcontactPostTable td {
    xvertical-align: middle;
  }

#contactMessagePara {
    margin    : 2em 0 0 6ex; 
    text-align: left;
  }

#contactMessageTable {
    width     : 85%;
    margin    : 0 auto 2em auto; 
    background-color:#ffffff; 
    colour    : black;
  }



/* menu links */
a.menu { font-style: normal; font-weight: 700; text-decoration: none}
a.menu:link, a.menu:visited {color: #660000; }
a.menu:hover   {color: #007d00; text-decoration: underline}
a.menu:active  {color: #007d00; }

a.menu_ps { font-style: normal; font-weight: 700; text-decoration: none}
a.menu_ps:link    {color: #000000; }
a.menu_ps:visited {color: #333333; }
a.menu_ps:hover   {color: #999999; text-decoration: underline}
a.menu_ps:active  {color: #000000; }