body
{
	font-family:verdana, univers, arial, helvetica, sans-serif
}
#container
{
	margin: 0 auto;
	width: 100%;
	background: #fff;
}

#header
{
	background: #ccc;
	padding: 20px;
}

#header h1 { margin: 0; }

#headerleft
{
	float: left;
}

#headerright
{
	float: right;
}

/* navbar (CSS drop down menus) from 
 * https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp 
*/

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to navbar links on hover - was red, changed to #383*/
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #383;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* end of section from 
 * https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
*/

/* DAJ - if I have fontawesome hosted on the site, then to be able to use 
 * fas fa-cart-down from fontawesome.com without needing all their webfonts 
 * and all.css. 
 * I want to only use solid.min.css, but fa-caret-down is defined in all.css
 * However, if using their script kit this is not necessary.
*/
/*
.fa-caret-down:before {
  content: "\f0d7";
}
*/

/* Don't know where navigation came from */
#navigation
{
	float: left;
	width: 100%;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }
/* end of navigation section */


#content-container1
{
	float: left;
	width: 100%;
	/*background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0;*/
}

#content-container2
{
	float: left;
	width: 100%;
	/*background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0;*/
}

#section-navigation
{
	float: left;
	width: 16%;
	padding: 20px 0;
	margin: 0 2%;
	display: inline;
}

#section-navigation ul
{
	margin: 0;
	padding: 0;
}

#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

#content
{
	float: left;
	width: 56%;
	padding: 20px 0;
	margin: 0 0 0 2%;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 16%;
	padding: 20px 0;
	margin: 0 2% 0 0;
	display: inline;
}

#aside h3 { margin: 0; }

#footer
{
	clear: both;
	background: #ccc;
	/*text-align: right;*/
	padding: 20px;
	height: 1%;
}

.clear { clear: both; }

/* menus from http://www.seoconsultants.com/css/menus/tutorial/ */

#menu {
	width: 100%;
	background: #ccc;
	float: left;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 12em;
	float: left;
}

#menu a, #menu h2 {
	font: bold 11px/16px verdana, univers, helvetica, sans-serif;
	display: block;
	border-width: 1px;
	border-style: solid;
	/*border-color: #ccc #888 #555 #bbb; */
	border-color: #ccc #fff #fff #ccc;
	margin: 0;
	padding: 2px 3px;
}

#menu h2 {
	color: #fff;
	background: #ccc;
	/*text-transform: uppercase; */
}

#menu a {
	color: #000;
	/*background: #efefef; */
	background: #ccc;
	text-decoration: none;
}

#menu a:hover {
	color: #a00;
	background: #383;
}

#menu li {
	position: relative;
}

#menu ul ul {
	position: absolute;
	z-index: 500;
}

#menu ul ul ul {
	top: 0;
	left: 100%
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

.smalltext { font-size:xx-small; }
.floatright { text-align:right; }
.floatleft { text-align:left; float:left; }
img.noborder { border:0px solid #ccc; text-decoration:none; }