/*   ---- comment out -----  
   ---- comment out -----  */
   


html {  height: 100%;  margin: 0;  background-color:#000000; }
body{font-family:  Tahoma, Arial;}

/*  Need to fill the empty space around the paper size screen for better presentation */
main
{
margin: auto;  
padding:25px;
background-color: #e6e6e6;
max-width: 770px;  
}


p { padding-top: 5px; padding-right: 30px; padding-bottom: 5px; padding-left: 30px;}
.txtcenter{ padding-top:2.5px;	margin-top:0;	vertical-align: middle;	text-align: center;}
.form-001{background-color:#5a4526; border: 2px solid;  padding: 10px; margin:10px; font-family: Tahoma, Arial;}
.header {  left: 0; top: 0; width: 100%; background-color: #D3D3D3; text-align: center;}
.emptybox{width: 100%;  height: 40px;  border: 2px black solid;}

/* Grid
-------------------------------------- */
/* Define the default grid (it's all in one column) */
/* NO - Switch to two columns in wider viewports */

 /*  */
 @media (min-width: 29.375rem) 
{
	  .form 
	  {
				border: 5px solid;
				background-color:#FCF5E5;
				border-style: groove;
				padding: 10px;
				grid-column-width: 700px;
				grid-template-areas: 
				"label-name"
				"field-name"
				"label-email"
				"field-email"
				"label-msg"
				"field-msg"
				"button";
		  }
} 

	/* 
	The values below correspond to the values shown in grid-template-areas above, 
	placing the items on the grid accordingly. 
	Note that the grid-area value does NOT have to match the class name. 
	For example, 
	.field-message has field-msg as its grid-area. 
	*/

@media (min-width: 29.375rem) 
{
  .label-name {grid-area: label-name;}
  .label-email {grid-area: label-email;}
  .label-message {grid-area: label-msg;}
  .field-name {grid-area: field-name;}
  .field-email {grid-area: field-email;}
  .field-message {grid-area: field-msg;}
  .button {grid-area: button;}
}


/*   ---- comment out -----  
.form
 {
  border: 2px solid;
  border-color: grey;
  display: grid;
  grid-row-gap: 5px;
}

 @media (min-width: 29.375rem) 
{
	  .form 
	  {
			border: 2px solid;
			background-color:#FCF5E5;
			padding: 10px;
				grid-column-gap: 25px;
				grid-template-areas: 
				"label-name  label-email"
				"field-name  field-email"
				"label-msg   ."
				"field-msg   field-msg"
				"button      .";
		  }
} 


.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #D3D3D3;
  text-align: center;
}

   ---- comment out -----  */