/* ************************
Colors:

NEW      ORIG
005483 = 004d40   dark blue / green
0090BE = 00897b   light blue / green
ff5722            ORANGE!
2e3b4d            dark grey
4c596b            light grey
#00C0EE;          My add: Light blue slate 
****************************** */

body {
   background-color: #2e3b4d; /* Dark Blue slate */ 
   color:  #00C0EE; /* Light blue slate */
   font: 1em/2em Arial, sans-serif;
   font-family: Sans-Serif;
   margin-top: 1em; /* DIFFERENT FROM MAIN.CSS */
  }


header {
  background-color: #000;
  width: 100%;
  height: 120px;
/* Experiment */
text-align:center;
/* end */
}

header img{
   padding:15px;
}

/* Experiment */
header div {
vertical-align: 15px;
line-height: 100px;       /* the same as your div height */
font-size:100px;
display: inline;
text-shadow: 2px 2px 2px #001;
}
/* end  - should look at http://www.inwebson.com/css3/css-tricks-for-headings-fonts-and-text-styling/ for effects */


article {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  }

@media (max-width: 900px) {
  body {
    margin-top:0px;
    }
  article {
    width: 98%;
    }
  /* experiment */
  header div {
    display: none;
    }
  /* end */
  }


@media (min-width: 1400px) {
  article {
    width: 1200px;
    margin-top: 100px;
    }
  }



h1 {
  font-size: 2em;
  font-weight: 400;
  margin: 1em 0 1em 0;
  text-align: center;
}

a {
  color: #ff5722;
  text-decoration: none;
}

table {
   border-spacing: 1em;
}

hr {
  border: 0;
  border-top: 2px dotted #ff5722; /* ORANGE! */
}

.breadcrumbs {
  float: right;
}

.rightfloatimage {
  float:right;
  padding: 0em 0em 1em 1em;
  font-style: italic;
  color: #ff5722; /* ORANGE! */
}

.rightfloatimage img {
width: 35vw;
 height: auto;
}

@media (max-width: 800px) {
    .rightfloatimage {
    padding: 0em 0em 0em 0em;
    float: none;
    }
    .rightfloatimage img{
    width: 90vw;
    }
  }