* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  Notes
Class is a dot
id is #

*/
container  {
	// color: #4b5559;
	/*   Taken from mockyp styles -Murach
	    width: 800px;
	    margin: 0 auto;
	    padding: 1em;
	    background: white;
	    border: 2px solid navy;
	    */
}

td  {
	padding: 20px;
}

h2 {
	color: #6c6b6b;
}

h3 {
	color: #6c6b6b;
}

p {
	// color: #6c6b6b;    // interfered with footer text color
}

figcaption  {
	text-align: center;
}

.container {
  overflow: hidden;
  // background-color: #EAEDF0;
}


.topheader {
  height: 200px;
  overflow: hidden;
  // background-color: #d0d1e9;
}

.topheader  {
background-color: #818493;
  //  background-color: #d0d1e9;
}
.logo  {
	float: left;	
	//background-color: #d0d1e9;  // light grey with blue tinge.  Not enough contrast with white letters
	
	background-color: #818493;
	//  background-color: #B2D6FF;  
}

.topmenu  {
	float: right;	
	margin-top: 60px;
}




.page {
  width: 900px;
  margin: 0 auto;
  border: 1px solid red; 
}

.menu_old {
	
  height: 100px;
  background-color: #B2D6FF;    /* Medium blue */
}

.pagemain {
	
  height: 100px;
  float: left;
  background-color: #B2D6FF;    /* Medium blue */
}

.tagline  {
	float: left;
	valign: top;
	text-align: center;
	padding-left: 40px;
	padding-top: 50px;
	text-shadow:10px;
	font-style: italic;
	font-size: 28px;
}

.portrait  {
	float: right;
	padding: 20px;
}
.testimonials {
  height: 100px;
  float: right;
  background-color: #00dede;    /* Medium blue */
}



.testimonialtext {
  align-content: right;
  font-size: 18px;
  font-style: italic;
  color: #4b5559;    /* Medium blue */
}

.greyblank {
  width: 200px;                 /* Add this */
  height: 80px;
  float: left;  
  background-color: #F09A9D;    /* Red */
}

.header {
  width: 200px;                 /* Add this */
  height: 80px;
  float: right;  
  background-color: #F09A9D;    /* Red */
}

.menu {
  float: right;                  /* Add this */
  width: 650px;
  height: 100px;
   padding: 20px;
  background-color: #F5CF8E;
}

.content_oldNowCalledMenu {
  float: right;                  /* Add this */
  width: 650px;
  height: 500px;
   padding: 20px;
  background-color: #F5CF8E;
}

.article-image {
  float: left;
  width: 300px;
  height: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
}

p {
  margin-bottom: 20px;
}

.footer {
clear: both;      
  overflow: hidden;
  //background-color: #D6E9FE;     /* Light blue */
  // background-color: #2e8f72;     /* Light blue */
  background-color: #818493;  /*  same as menu  */
  color: white;
}

.footer-item {
  /*  float: left;    */
  width: 31%;
  margin: 20px 1.15%;
  height: 160px;
  color: white;
  //background-color: #B2D6FF;    /* Medium blue */
  

}

.avatar {
  float: left;
  width: 60px;
  height: 60px;
  margin: 25px;
  border-radius: 40px;
  background-color: #D6E9FE;
}

.username {
  margin-top: 30px;
}

.comment {
  margin: 10px;
  overflow: hidden;  /* This is important */
}

#topNav {
	text-align: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	list-style-type: none;
	
	padding-bottom: 2px;
	padding-top: 3px;
	background-color: #f2f4fc;
	/* font-size:8px;    */
}

#topNav li {
	font-size: 0.8em;
	display: inline-flex;
	margin-right: 30px;
	margin-left: 30px;
}

#topNav a:link {
	color: #FFFEFF;
	text-decoration: none;
}
#topNav a:visited {
	color: #B39FB2;
	text-decoration: none;
}
#topNav a:hover {
	color: #E4B7E2;
	text-decoration: none;
	font-size: 0.9em;
}
#topNav a:active {
	color: #504EBC;
	text-decoration: none;
	font-size: 1.0em;
	// display: inline;
	border: 2px solid #D2D9AA;
	/* background-color: #E5F3C5;    */
}


.pageheadline  {
	align-content: right;
	text-align: center;
	padding-top: 20px;
	
}

.notetoralph  {
	color:blue;
}

.tedcomment  {
	color:purple;
}

.question  {
	color:red;
}

/*
<p class='question'>Question xx:  </p> 
<p class='notetoralph'>Ralph issue</p>
<p class='tedcomment'> Ted question here</p>
      
      */





/* Color Codes     */

/*  Based on Medium blue rey  */


/* As hex codes */

.color-primary-0 { color: #666995 }	/* Main Primary color */
.color-primary-1 { color: #BEBFD2 }
.color-primary-2 { color: #8D8FB0 }
.color-primary-3 { color: #474B81 }
.color-primary-4 { color: #020202 }

/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=53v0u0k++dK+2oY+Yjq++6U++00 */

/* Feel free to copy&paste color codes to your application */


/* As hex codes */

.color-primary-0 { color: #002A46 }	/* Main Primary color */
.color-primary-1 { color: #004D7F }
.color-primary-2 { color: #003C63 }
.color-primary-3 { color: #001523 }
.color-primary-4 { color: #000000 }

.color-secondary-1-0 { color: #00044C }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #01078A }
.color-secondary-1-2 { color: #00056C }
.color-secondary-1-3 { color: #000226 }
.color-secondary-1-4 { color: #000000 }

.color-secondary-2-0 { color: #004C28 }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #008A48 }
.color-secondary-2-2 { color: #006C38 }
.color-secondary-2-3 { color: #002614 }
.color-secondary-2-4 { color: #000000 }