@charset "utf-8";
/* CSS Document 20181116-1436*/

div {
    <!-- border-radius:5px; -->
    margin: 5px;
    padding:5px;
	<!-- box-shadow:3px 3px 10px #000000; --> 
	font-family: verdana;
}

body	{
    background-color:#FFFFFF;
	/*
	background-color:#EEEEEE;
	*/
  /*background: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);*/
	
}

td	{
	valign:top;			/*20181214-0924*/
	vertical-align:top;	/*20181214-0924*/
}


  .pageContent, .header,  .breadCrumbs,		.menu,	.mainContent, 	.floating-box, .mainContentSmall, .dictionary, 	.footer,  
  .pageContentI,.headerI, .breadCrumbsI,	.menuI,	.mainContentI,													.footerI  {
    margin: 5px;
    margin-top: 10px;
    margin-right:10px;
    padding: 5px;
    border: 1px solid #fffff;
  /*border: 1px solid #dddddd;	#dddddd=faint grey; 	#eeeeee=fainterGrey;	#ffffff=white	changedOn	20181201-1732*/
    background-color: #f9f9f9;
  /*box-shadow: 0px 0px 10px #000;		changedon	20181201-1559*/
  /*box-shadow: 0px 0px 10px #cccccc;	changedon	20181201-1324*/
  /*box-shadow: 5px 5px  5px #cccccc; 	changedon	20181121-1249*/
    border-radius: 5px;
}
  /*.pageContent,   .header,  .breadCrumbs, .menu,  .mainContent,   .floating-box,  .mainContentSmall,                  .footer  { */


  /*.pageContent,   .header,  .breadCrumbs, .menu,  .mainContent,   .floating-box,  .mainContentSmall, .dictionary,     .footer,   */
                    .header,  .breadCrumbs, .menu,  .mainContent,                   .mainContentSmall, .dictionary,     .footer     {
    border: 1px solid grey;                                  /*red*/  /*#dddddd*/
  /*border: 1px solid #dddddd;	changedon	20181201-1327*/  /*red*/  /*#dddddd*/
    background-color: #f9f9f9;    
    box-shadow: 0px 0px 10px #000;
  }



/*The "I" suffix in the classes below is for the "Index" page to make those classes transparent for the background IMAGE to show through on the "Index" page*/
.headerI, .breadCrumbsI, .mainContentI, .footerI{	opacity:0.1; /*	opacity:1.0; =totally opaque;  	opacity:0.1; =almost totally transparent;*/	}
.menuI											{	opacity:1.0; /*	opacity:1.0; =totally opaque;  	opacity:0.1; =almost totally transparent;*/	}

.pageContent {
    margin: auto;
    /*width: 60%;*/
    max-width: 1000px;
    background-color: #ffffff;    
}

.pageContentI	{
    border: 0px solid #dddddd; /*red*/  /*#dddddd*/
    margin: auto;
    /*width: 60%;*/
    max-width: 1000px;
  /*background: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);*/
}

.menu	{
	background-color: orange; 	/* #ff6600=reddish orange 20181121-1355*/
}

.center {
    margin: auto;
    max-width: 760px/*575px*/; /* <!-- anything less than 575px will make the header HTGFATS do a break /carriage return --> */
    margin: auto;
	background-color: #ffffff;
    border: 1px solid #cccccc; 	/* border: 1px solid #eeeeee; */
	padding: 10px;
	box-shadow: 1px 1px 40px #cccccc; /* box-shadow: 5px 5px 5px #cccccc; */
	border-radius:10px;
	font-family: verdana;
}

.header	{	 text-align: center;	padding-top: 1px; padding-bottom: 1px; }

#header1	{
	font-family: verdana;
	color: #000000;/*FFFFFF*/
	background-color:#FFFFFF;/*FF000000*/
	box-shadow: 0px 0px 0px #000000;/*3px 3px 10px #000000*/
	<!--width: 940px;/*960px; auto; none*/-->
	margin: auto;/*none*/

}

#header2 {
    height: 250px;
    background-color: #FFFFFF;

}

.textGlowOrange {
    color: #ff6600;	/* ff6600=orange */
    text-shadow: 0px 0px 20px #ff6600; 
    font-family: arial, sans serif;
}

/* highlight; default color */
mark { 
 	background-color:#FF0; 
 
 }


/* highlight; specific color 01; for highliting items in file <includes-level2-list-a-to-z.php>; finicky*/
.ngs-hl-01 { 	
	background-color:#FC0; /* orange */  /* #FF3 */  /* #FF9=lightyellow */
  /*color:green; */

}


/* highlight; specific color 02; for checking variable gap (in iOS) in upper part of file file <includes-level2-list-a-to-z.php> above menu; finicky*/
.ngs-hl-02 { 	
    background-color:#FFF;
  /*background-color:#FFF;*/	/* #FFF=white*/ 	/* lightgreen */  	/* #FF9 = light yellow */
    color:#EEE;		/*	#DDD=lightGrey; changed on 20181205-1005*/
  /*color:#FFF;*/ 	/* 	#FFF=white*/ 	/* lightgreen */

}


<!-- .breadCrumbs	{	} -->

.menu	{	 margin-top: 1px; margin-bottom: 1px; padding-top: 1px; padding-bottom: 1px; }
<!-- .menu	{	} -->

<!-- sticky; does not scroll up; 20181114-0001; DNW; even if it did work, it would interfere with other features; like internal local links, which bring the works to the top of the page -->
/*
.sticky {
    <!--position: -webkit-sticky;-->
    position: sticky;
    top: 0px;
    background-color: yellow;
    <!--padding: 50px;-->
    <!--font-size: 20px;-->
}
*/


.mainContent 	{    background-color: #ffffff;    }

.floating-box {
    display: inline-block;
    width: 275px;
    height: 75px;
}

.mainContentSmall	{	
	/*width: 450;*//*20181112; line added*/
}

.footer {	}


#breadcrumbs {
	background-color: #FFFFFF;
	box-shadow: 10px 10px 20px #FFFFFF;
	margin-top:1px;
	margin-bottom:1px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-family: verdana;

}


breadcrumbs	{
	margin-top:1px;
	margin-bottom:1px;
	padding: 10px;
	padding-top:1px;
	padding-bottom: 1px;
	font-size:x-small;
	box-shadow: 10px 10px 20px #FFFFFF;
	background-color: #FFFFFF;
	
}

.dictionary	{
	font-family: monospace;
	font-size: 25px/*20px*/;
}



a:hover	{
	font-weight: normal;
	color: red;
	text-decoration:none;
	
}


/* START of Table related information */
/* 
.table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.td, .th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.tr:nth-child(even) {
    background-color: #dddddd;
}
*/
/* ENDxx of Table related information */


/* START of zui-table related information */
/* Thanks to, https://jsfiddle.net/zinoui/dB93J/ */
.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
	font-family: monospace;
	font-size: 25px;
	/*font: normal 13px Arial, sans-serif;*/
	width: auto; /* contracts the width of the table to occupy the MINimum possible width */
	/*width: 100%;  expands   the width of the table to occupy the MAXimum or entire width of the page or division*/
	
}
.zui-table thead th {
    background-color: #dddddd/*#DDEFEF*/; /* background color for table header row ONLY */
    border: solid 1px #DDEEEE;
    color: #000000/*#336B6B*/; /* font color for column headers ONLY */
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

.zui-table tbody tr:nth-child(even) {
    background-color: #eeeeee;
}
/* ENDxx of zui-table related information */



/*start of container1 -------------------------------------->>> */
#container1    {
	background-color:#FFFFFF;/*red=#FF0000; gray=#EEEEEE*/
	/*width:800px;*/
	margin: auto;
	margin-bottom:1px;
	padding-bottom:1px;
	border: thin black solid;/*none*/ 
	width: ;/*960px; none*/
    border-radius: 10px;
    box-shadow: 10px 10px 15px grey;
	

}
/* <<< end of container1 */

/*start of container2 -------------------------------------->>> */
#container2    {
    background-color:#FFFFFF;
	/*
	background-color:#EEEEEE;
	*/
	width:960px;/*1000px*/
	margin: auto;
	margin-top:1px;
	padding-top:1px;
	box-shadow:0px 0px 0px #FFFFFF;

}

span-01	{
	color:blue;
	font-weight: bold;
	
}


span-02	{
	color:red;
	font-weight: bold;
	
}

#content1{
	background-color: #FFFFFF;
	padding: 10px;
}


#content1-left	{
	width:auto;
	float: left;
	box-shadow: 0px 0px 0px #000000;/*3px 3px 10px #000000*/
	
}


#content1-right	{
	width: 600px;
	float: left;
	box-shadow: 0px 0px 0px #000000;/*3px 3px 10px #000000*/
	
}


.left   {
    width: auto;
    float: left;
    background-color: #FFFFFF;
    box-shadow:0px 0px 0px #FFFFFF;
}

.left1   {
    width: 75px;
    float: left;
    background-color: #FFFFFF;/*#EEEEEE*/
	/*
	border-radius:1px;
    border-right:1px solid black;
	*/
    box-shadow:5px 5px 10px #000000;
}



.left2   {

    width: 75px;
    float: left;/*right*/
    margin-left:10px;
	background-color: #EEEEEE;
    /*
	border-radius:1px;
    border-right:1px solid black;
	*/
    box-shadow:5px 5px 10px #000000;
}

.right   {
    /*width: 500px;*/
	width:auto;
    float: right;
    background-color: #FFFFFF;
    box-shadow:0px 0px 0px #FFFFFF;
}

.right1   {
    width: 650px;
    float: left;
    background-color: #FFFFFF;

}

.right2   {
    width: 75px;
    float: right;
    background-color: #EEEEEE;

}

#footer {
    height: ;/*70px*/
    background-color: #EEEEEE;
    clear: both;
	box-shadow:5px 5px 10px #000000;

}

#company	{
	float: left;

}

#phone-fax	{
	float:right;

}

/*START of navigation menu*//*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
nav	{
	font-family: verdana;	
}

nav ul ul {
	display: none;
	box-shadow: 10px 10px 20px #030000;/*creates a box shadow around the first level drop down*/
}

	nav ul li:hover > ul {
		display: block;
	}
	
/*properties of the main menu bar*/
nav ul {
	background: #efefef; /**/
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 	/*creates a box shadow around */
	padding: 0 20px;
	border-radius: 10px;/*10px*/  
	list-style: none;
	position: relative;
	display: inline-table;
	box-shadow: 3px 3px 10px #030000; /*expt on 20181121-1340 */	/*creates a box shadow around the menu button*/
	
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
	
nav ul li {
	float: left;/*left*/
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; 
		padding: 10px 10px;/*25px 40px*//*creates padding around the items in the main menu*/
		color: #757575; 
		text-decoration: none;
	}
	
nav ul ul {
	background: #5f6975; 
	border-radius: 0px; 
	padding: 0;
	position: absolute; 
	top: 100%;
}

	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 5px 20px;/*15px 40px*/
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}
			
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}
/*END of navigation menu*//*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

<!--START of classes for Expand/Collapse <<< <<< <<< <<< <<< <<< <<< <<< <<< -->
<!--ENDxx of classes for Expand/Collapse <<< <<< <<< <<< <<< <<< <<< <<< <<< -->


<!--START of classes for images <<< <<< <<< <<< <<< <<< <<< <<< <<< -->
<!--https://www.w3schools.com/howto/howto_css_image_responsive.asp-->
<!--https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_responsive-->
.responsive {
  width: 100%;
  height: auto; 
  border-radius: 5px;
}
<!--ENDxx of classes for images <<< <<< <<< <<< <<< <<< <<< <<< <<< -->