body {
/* border:1px solid red; */
width: 80%;
/*
height: 90%;
overflow-x: hidden;
*/
}

.container {
/* border:1px solid black; */
width: 95vw;
/* width: 70%; */
margin: 0 auto;	
height: auto;	
overflow: auto;    
white-space: nowrap;
}

.flex-container {
/* border: 2px solid green; */
display: flex;
/* display: inline-flex; */
/* width: 80%; */
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.flex-align-center {
justify-content: center; /* Centers horizontally (Main Axis) */
align-items: center;     /* Centers vertically (Cross Axis) */
}

.flex-ht {
height: auto;
/* height: 15vh; */
}

.flex-width-80 {
width: 80%;
}
.flex-width-70 {
width: 70%;
}
.flex-width-60 {
width: 60%;
}

.flex-row-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1px;
margin: 1px 0;
}

.flex-row-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1px;
place-content: center;
margin: 1px 0;
}

.flex-row-cell {
padding: 1px;
/* border: 2px solid yellow; */
}

.cell-align-left {
justify-content: center;
}

.cell-align-center {
justify-content: center;
}

/* Old: use <div id=<#value> */
#leftcontent {
	display: inline-block;
	float:left;
	width:15%;
	/*
	border-left:2px solid #000;	
	border-right:2px solid #000;
	*/
	margin-right:5px;
	padding-bottom:20px;
	white-space: nowrap;
	min-height: 100vh;
}

/* 
Main page: index.html
*/

a {
}

a.leftnav {
	/* font-family: 'Brush Script MT', cursive; */
	font-family: Verdana, sans-serif;
	color: #729B59;
	font-size: 1.5rem;
	line-height: 1.2;
	padding-bottom:2%;
	font-weight: bold;
	text-decoration:underline;
}

.homeNav-column1 {
/* border:1px solid black; */
float: left;
width: 12%;
margin: 1px;
}

.homeNav-column2 {
/* border:1px solid black; */
float: left;
width: 22%;
margin: 1px;
padding-top:1%;
}

.homeNav-column3 {
/* border:1px solid black; */
float: left;
width: 17%;
margin: 1px;
padding-top:1%;
}

.home2nd {
/* border:1px solid black; */
float: left;
width: 30%;
margin: 1px;
margin-left:12%;
}

.home3rd-column1 {
/* border:1px solid black; */
float: left;
width: 10%;
margin: 1px;
margin-left:10%;
}

.home3rd-column2 {
/* border:1px solid black; */
float: left;
width: 10%;
margin: 1px;
}

.home3rd-column3 {
/* border:1px solid black; */
float: left;
width: 15%;
margin: 1px;
}

.homeMid-column3 {
/* border:1px solid black; */
float: left;
width: 15%;
margin: 1px;
padding-left:1%;
}

.home3rd {
/* border:1px solid black; */
display: block;
margin-left: 25%;
width: 8%;
}

.home4th {
float:left;
margin-left:15%;
font-weight:bolder;
font-size:20px;
}

.nav-table {
	margin: 0 auto;
	width:100%;
	/* border:1px solid black; */
}
.nav-table td {	
	vertical-align: top;
	/* border:1px solid black; */
}

#homeImage {
	/* float:left; */
	/* width:20%;
	background:#fff;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	*/
	margin-left:10px;
	padding-top:25px;
}

p,h1,pre {
	margin:0px 30px 10px 60px;
	/* line-height: 2.6; */
}

span {
	/* margin:60px 0px 0px 0px; */
	/* line-height: 2.6; */
}

p.phrase1 {
	font-family: 'Verdana';
	color: #33691E;
	font-size: 16px;
}

p.menu1 {
	font-family: Tahoma, sans-serif;
	color: #164453;
	font-weight: bold;
	/* text-decoration: underline; */
}

p.serve_provide {
	font-family: Tahoma, sans-serif;
	font-size: 25px;
	font-weight: bold;
	color: #61B440;
	/* text-decoration: underline; */
}

span.motto {	
	padding-top:2%;
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #61B440;
	/* text-decoration: underline; */
}

p.motto {
	float:left;
	padding-top:2%;
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #61B440;
	/* text-decoration: underline; */
}

p.serve_list_p {
	font-family: Tahoma, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #D78434;
	/* text-decoration: underline; */
}

h1 {
	font-size:14px;
	padding-top:10px;
}

/*
img {
    pointer-events: none; 
}
img.noclick { 
	pointer-events: none; 
} 
*/

/* 
About Us page: about.html
*/

.about3rd-column1 {
float: left;
/* border:1px solid black; */
width: 40%;
margin: 1px;
margin-left:.5%;
}

.about3rd-column2 {
float: left;
/* border:1px solid black; */
width: 15%;
margin: 1px;
margin-left:.55%;
}

.about3rd {
float:left;
/* border:1px solid black; */
margin: .5%;
padding: 2px 2px;
text-align: center;
width: 70%;
}

.about_childLeft {
display: inline-block;
/* border:1px solid black; */  
vertical-align: middle;
width: 55%;
}
.about_childRight {
display: inline-block;
/* border:1px solid black; */  
vertical-align: middle;
width: 150px;
}

#about_desc {
/* border:1px solid black; */	
white-space:normal;	
float:center;
width:85%;
margin-left:2%;
margin-top:1%;
font-family: Tahoma, sans-serif;
font-size: 15px;	
}

ul.error_li {
	font-family: Tahoma, sans-serif;
	font-size: 15px;    
	/* 
	list-style-type: circle;
	*/
}

.div-error-span > span > li {
    border: 1px solid red;
}

.about-bottom {
/* border: 1px solid red; */
display: flex;
justify-content: center; /* Centers horizontally (Main Axis) */
align-items: center;     /* Centers vertically (Cross Axis) */
height: 20vh;
}

/* 
Services page: services.html
*/

.serve_2rd {
display: inline-block;
/* border:1px solid black; */
text-align: center;
margin-left: 10%;
width: 40%;
}

.serve_3rd {
/* border:1px solid black; */
display: inline-block;
margin-left: 5%;
text-align: center;
width: 30%;
}

.serve_5th {
/* border:1px solid black; */
display: inline-block;
margin-left: 13%;
width: 40%;
margin-bottom: 1%;
}

.serve_parent {
float:left;
/* border:1px solid black; */
margin: 1px;
padding: 1px 1px;
text-align: left;
width: 30%;
}

.serve_child {
display: inline-block;
/* border:1px solid black; */
vertical-align: top;
text-align: left;
margin-left: .1%;
margin-right: 1%;
}
ul.serve_li {
	font-family: Tahoma, sans-serif;
	font-size: 15px;	
	/* 
	list-style-type: circle;
	*/
}

/* 
Contact: contact.html & contact.aspx 
*/

/* style for form fields */
span input[type="text"] { 
    border: 2px solid blue; 
}

span textarea { 
    border: 2px solid blue; 
}

p span input[type="submit"] { 
    border: 2px solid blue; 
}


.cvPageValidator {
/* .cvPageValidator > li { */
	border: 1px solid red;
}

/* 
contact.aspx - cvPageValidator
<span id="cvPageValidator"> then <ul>
*/

.contact_3rd {
/* border:1px solid black; */
display: inline-block;
margin-left: 10%;
width: 45%;
margin-bottom: 1%;
padding-left: 1%;
font-weight:bolder;
font-size:20px;"
}

#txtBody {
    resize: none;
}

span#cvPageValidator ul {
	display: inline-block;
	color: red;
  	border: 1px solid red;
  	width: 30%;
  	margin-left: 20%;
  	padding-top: 5px;
  	padding-bottom: 5px;
  	font-family: Tahoma, sans-serif;
	font-size: 15px;
}

#feedBack {
	display: inline-block;
	color: green;
  	border: 1px solid green;
  	width: 50%;
  	margin-left: 20%;
  	padding:5px 5px 5px 5px;  	
  	font-family: Tahoma, sans-serif;
	font-size: 15px;
}

span.feedback {	
	color: green;
	border: 1px solid green;
	width: 50%;
	margin-left: 20%;
	padding:5px 5px 5px 5px;  	
	font-family: Tahoma, sans-serif;
	font-size: 15px;
}


#submitError {
    display: inline-block;
	color: red;
  	border: 1px solid red;
  	width: 300px;
  	margin-left: 250px;
  	padding:5px 5px 5px 5px;
  	font-family: Tahoma, sans-serif;
	font-size: 15px;
}

/* parent element has class="xyz" then <a> then <span>
.xyz-a-span > a > span {
    add styling: here;
}
 */

/*
https://stackoverflow.com/questions/20224268/vertically-align-link-next-to-image-with-css
see: Mohsen Safari
*/
#specialA img {
	margin-left: 25px;
	width:30px;
    height:30px;
    vertical-align: middle;
}

#specialA a {	    
    vertical-align: middle;
    text-decoration:none;
}

#specialB img {
	margin-left: 260px;
	width:30px;
    height:30px;
    vertical-align: middle;
}

#specialB a {	    
    vertical-align: middle;
    text-decoration:none;
}