/***************************************/  
*
{
   /*  box-sizing: border-box;   */
}
/******************************************/  
.body 
{
  /*  Puts the Page in the middle  */
 margin:0 auto;
 max-width: 980px;
 
 font-family: Arial, Helvetica, sans-serif; 
/* background-color: yellow; */
}
/******************************************/  
/* The grid container */
.grid-container
{
  display: grid; 
  grid-template-columns: 200px 580px 200px;
  grid-template-rows: 100px 100px 30px;   /* Row Size   auto; */
  grid-template-areas: 
    'header_L header_M header_R'   
    'content_Left content_Middle content_Right' 
    'footer_1 footer_2 footer_3';
  
  /* Draws black line around page */ 
  /* Page Size */
  min-width: 400px;
  max-width: 980px;   
  Height:800px;    
  /* border: 2px solid black; 111*/
  border-top: 2px solid black;  
  border-right: 2px solid black;  
  border-left: solid black;  
  border-bottom: solid black;  
  
 /*  background-color:rgba(0,255,0,.5);  */

}
/******************************************/ 
/* Style the header */
.header_L 
{
  grid-area: header_L;
   height:  100px;  /*  45px; */     
  
   /*  background-color:rgba(0,255,0,.5);  */
}
/* Style the header */
.header_M 
{
  grid-area: header_M;
  height:  100px;  /*  45px; */      
  
 /*  background-color:rgba(0,255,0,.5);  */
}
/* Style the header */
.header_R 
{
  grid-area: header_R;
 
   height:  100px;  /*  45px; */     
  
 /*  background-color:rgba(0,255,0,.5);  */ 
}
/******************************************/ 
/* Style the left column */
.content_Left 
{
  grid-area: content_Left;
 /*  background-color:rgba(255,0,0,.5);  */
}

/* Style the middle column */
.content_Middle 
{
  grid-area: content_Middle;
 /*  background-color:rgba(0,255,0,.5);   */ 
}

/* Style the right column */
.content_Right 
{
  grid-area: content_Right;
 /*  background-color:rgba(0,0,255,.5);    */
}

/* Style the footer */
.footer_1 
{
  grid-area: footer_1;
  padding: 10px;
  text-align: center;
}
.footer_2 
{
  grid-area: footer_2;
  padding: 10px;
  text-align: center;
}
.footer_3 
{
  grid-area: footer_3;
  padding: 10px;
  text-align: center;
}
/******************************************/ 
.CompanyLogo /* logos end up in diferent x positons */
{
  position: relative;          /* relative; absolute */
  top: 20px; 
  left: 0px;
  /**/
  width:  418px; /*  384px; */
  height: 66px;  /*  64px; */      
/*  margin-left: 0px;  */
/*  float: left;  set to left or it will not let Logo scroll from left to right*/
/*  clear: none;  specifies on which sides of an element floating elements are not allowed to float */      
/*  display: block;  */
 background-image: url("../images/MC3Automation.png");  
   transition: transform 3s;        
   /* Round the Edges of buttons*/
   padding: 4px ; 
   border-radius: 1rem;  
   border: 4px solid black;  
   /**/  
   z-index: 1;

/*  background-color:rgba(0,0,255,.5);  */
} 
/******************************************/
/**/
.Boddy_Left
{
  position: relative;  /* relative; */
  top: 0px; 
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  Height: 600px;  /* 800px Height - top 100px*/
  /**/
  /**/
/* background-color:rgba(255,0,0,.5);  */
/* background-color: #F8F8F8; */
}
/**/
/**/
.Boddy_Middle
{
  position: relative; 
  top:100px; 
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  Height: 600px; /* 800px Height - top 100px*/
  /**/
/* background-color:rgba(0,255,0,.5);    */
  }
.Boddy_Right
{
  position: relative; 
  top:0px; 
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
Height: 600px;   /* 800px Height - top 100px*/
/**/
/* Height: 700px;  */
  padding: 10px 0px 10px 10px;	    
/* background-color:rgba(0,0,255,.5);  */
}
/***************************************/
/*/
/***************************************/
.Boddy_MiddlePage_A
{
  
  position: relative; /* relative; absolute */
  top: 20px; 
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
  width: 520px; 
  Height:60px; /* 350px Height - top 100px*/  
   
/*  background-color:rgba(0,125,0,.5);  */
background-color:rgb(255,255,255);
  padding: 10px 10px 10px 10px;	               
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;              
  /**/  
  margin-left:  10px;  
/**/
/**/
   padding-bottom:20px; 
   margin:10px;
//   background: -moz-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
//   background: -webkit-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
//   background: -ms-linear-gradient(bottom, #DDDDDD, #F0F0F0 175px);
   border-radius: 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);    
  
  
  }
/********/  
/********/ 
.Boddy_MiddlePage_B
{
  position: relative; 
  top: 75px; 
/*   left: -30px;  */ /* 170px;  */
  grid-area: content_Middle;
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
/*  width: 580px; */
/*  Height: 640px;  */ /* 350px Height - top 100px*/  
left: -130px;  /* 170px;  */   
width: 800px; 
Height: 400px; /* 350px Height - top 100px*/  
   
   
/*  background-color:rgba(0,125,0,.5);  */
  background-color:rgb(255,255,255);
  padding: 10px 10px 10px 10px;	               
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;              
  /**/  
  margin-left:  10px;  
/**/
/**/
   padding-bottom:20px; 
   margin:10px;
   border-radius: 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);  
 
}  
/***************************************/  
.Boddy_OfficeRight
{
  position: absolute; /* relative; absolute */  
  top:100px; 
  left: 800px;  
   width: 170px;    
  display: inline;  
  grid-area: content_Right;
  /* you need to sub 100 from 800 since we are starting at top: 100px */  
Height: 600px;   /* 800px Height - top 100px*/
/**/
/* Height: 700px;  */
  padding: 10px 0px 10px 10px;	    
/* background-color:rgba(0,0,255,.5);  */
}
/***************************************/  
#Header_001
{
  position:relative; /* relative;  */  
  top:  3px;
  left: 0px;   
}
/**/
#Header_002
{
  position:relative; /* relative;  */  
  top:  12px;
  left: 0px;   
}
/**/
/**/
/**/
/**/
/**/
/**/
#WallPaper_1
{
  background-image: url("../images/images_21.jpeg"); /* Pages/images.jpg */
  background-repeat: no-repeat;
  background-size: cover;  /*  980px 1350px; */
  /**/
 }	   


/**/
/**/
.Font_RightSideHeader  /* font Size biger */
{
  font-family: "Times New Roman", Times, serif;
  /**/
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  Height: 20px;  
  font-size: 24px;
}
.Font_RightSideBody  /* font Size biger */
{
  font-family: "Times New Roman", Times, serif;
  /**/
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  Height: 20px;  
  font-size: 20px;
}
/**/
.Font_Header  /* font Size biger */
{
  font-family: "Times New Roman", Times, serif;
  /**/
  /* font-weight: normal; */
  font-weight: bold;
  /* font-style: normal;*/
  font-style: italic;
  /* font-style: oblique; */
  Height: 24px;  
  font-size: 24px;
}
/**/
.Font_Boddy  /* font Size smaller */
{
 font-family: "Times New Roman", Times, serif;
 /**/
  /* font-weight: normal; */
  font-weight: bold;
 
 /* font-style: normal;*/
 font-style: italic;
 /* font-style: oblique; */
 Height: 18px;  
 font-size: 20px;
}
/**/
footer  
{
  position: relative;
  float: left;
  width: 100%;
  margin-left: 220px;
  
 /* text-align:center; */
  /**/
  font-style: italic;
  /* background-color: #cccccc;  */
}
.footer_B
{
  grid-area: footer_2;  /*  content_Left content_Middle content_Right  */
  position: relative; 
  top: 1050px;  
  /**/
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  /* font-style: normal;*/
  /* font-style: oblique; */  
  font-style: italic;
  font-size: 18px;  
  
 /* background-color:rgba(0,255,0,.5); */
}
/**/
/**/

/**/  
.Boddy_Left ul 
{
  list-style: none; /* NO bullets or numbers */
}
.Boddy_Left li a:link, .Boddy_Left li a:visited , .MyDownLoadPage 
{
  font-size: 14pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  display: block;
  /**/
  font-weight: bold;
  background-color: #FFFFFF; /* # FFFFFF 00BFFF blueish*/
  color: #000000; /* Text black */	
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;            
  /* padds the inside of the element */
  padding: 10px 0px 10px 10px;	               
  /**/  
  margin-top:   0px;
  margin-right: 20px;
  margin-bottom: 90px;
  margin-left: -20px;  
}
/**/
.Boddy_MiddlePage_A li a:link, .Boddy_MiddlePage_A li a:visited , .MyDownLoadPage 
{
  font-size: 14pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  display: block;
  /**/
  font-weight: bold;
  background-color: #FFFFFF; /* # FFFFFF 00BFFF blueish*/
  color: #000000; /* Text black */	
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;            
  /* padds the inside of the element */
  padding: 10px 0px 10px 10px;	               
  /**/  
  margin-top:   0px;
  margin-right: 20px;
  margin-bottom: 90px;
  margin-left: -20px;  
}
/**/

.Boddy_Left li a:hover, .Boddy_Left li a:active 
{
  font-size: 14pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  display: block;
  /**/ 
  background-color: #FFFFFF; /* # FFFFFF 00BFFF blueish*/
  color: #0000ff; /* Text blue */	
  /* Round the Edges of buttons*/
  border-radius: 1rem;  
  border: 4px solid black;            
  /* padds the inside of the element */
  padding: 10px 0px 10px 10px;	               
  /**/  
  margin-top:   0px;
  margin-right: 20px;
  margin-bottom: 90px;
  margin-left: -20px;  
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/
#fieldset_A001  /* Office Users */
{
  position:absolute; /*relative absolute*/
  float: left;  
  top: 230px;
  left: -105px;
  width: 720px;
  Height: 190px;    
  /*color: #ff0000;*/
  z-index: 1;
}
/**/
/**/
#fieldset_B001  /* Employees */
{
  position:absolute; /*relative absolute*/
  float: left;  
  top: 300px;
  left: 30px;
  width: 720px;
  Height: 190px;    
  /*color: #ff0000;*/
   z-index: 1;
}
/**/
/**/
#fieldset_C001  /* Employees */
{
  position:absolute; /*relative absolute*/
  float: left;  
  top: 520px;
  left: 530px;
  width: 720px;
  Height: 190px;    
  /*color: #ff0000;*/
   z-index: 1;
}
/**/
#fieldset_D001  /* Employees */
{
  position:absolute; /*relative absolute*/
  float: left;  
  top: 740px;
  left: 30px;
  width: 720px;
  Height: 190px;    
  /*color: #ff0000;*/
   z-index: 1;
}
/**/
/**/
/**/
/**/
/**/
.legend_001  /* Employees Label*/
{
  position:relative;
  float: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 24px;
  text-align: center;
}
/**/
/**/
/**/
.Label_A000   /*ADD */
{
  position:absolute; /* relative;  */  
  top: 5px;
  left: 0px; 
  float: left;  
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 24px;  
  font-size: 24px;
  color:red;
 }
/**/
/**/ 
/**/
/**/
.Label_A001   /*ADD */
{
  position:absolute; /* relative;  */  
  top: 35px;
  left: 0px; 
  float: left;  
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;
 }
.Label_A001:hover 
{
   cursor: pointer;
}
 /**/
 /**/
.Label_A002  /* List*/
{
  position:absolute; /* relative;  */  
  top: 65px;  /* 140px */
  left: 0px; 
  float: left; 
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_A002:hover 
{
   cursor: pointer;
}
/**/
/**/
.Label_A003  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  95px;
  left: 0px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_A003:hover 
{
   cursor: pointer;
}
/**/
/**/
.Label_A004  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  125px;
  left: 0px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_A004:hover 
{
   cursor: pointer;
}
/**/
.Label_A005  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  155px;
  left: 0px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_A005:hover 
{
   cursor: pointer;
}
/**/
/**/
/**/
/*  Col Label_B001 to 4*/
/**/
.Label_B000  
{
  position:absolute; /* relative;  */  
  top: 5px;
  left: 180px;
  float: left;  
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 24px;  
  font-size: 24px;
  color:red;
 }
.Label_B001  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  35px;
  left: 180px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_B001:hover 
{
   cursor: pointer;
}
/**/
.Label_B002  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  65px;
  left: 180px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_B002:hover 
{
   cursor: pointer;
}
/**/
.Label_B003  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  95px;
  left: 180px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_B003:hover 
{
   cursor: pointer;
}
/**/
.Label_B004  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  125px;
  left: 180px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_B004:hover 
{
   cursor: pointer;
}
/**/
.Label_B005  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  155px;
  left: 180px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_B005:hover 
{
   cursor: pointer;
}
/**/
/* Col Label_C001 to 4*/
/**/
.Label_C000   /*ADD */
{
  position:absolute; /* relative;  */  
  top: 5px;
  left: 361px;
  float: left;  
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 24px;  
  font-size: 24px;
  color:red;
 }
/**/ 
 .Label_C001  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  35px;
  left: 361px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_C001:hover 
{
   cursor: pointer;
}
/**/
.Label_C002  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  65px;
  left: 361px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_C002:hover 
{
   cursor: pointer;
}
/**/
.Label_C003  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  95px;
  left: 361px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_C003:hover 
{
   cursor: pointer;
}
/**/
.Label_C004  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  125px;
  left: 361px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_C004:hover 
{
   cursor: pointer;
}
/**/
/**/
.Label_C005  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  155px;
  left: 361px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_C005:hover 
{
   cursor: pointer;
}
/**/
/**/
.Label_D000   /*ADD */
{
  position:absolute; /* relative;  */  
  top: 5px;
  left: 541px;
  float: left;  
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 24px;  
  font-size: 24px;
  color:red;
 }
/**/ 
 .Label_D001  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  35px;
  left: 541px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_D001:hover 
{
   cursor: pointer;
}
/**/
.Label_D002  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  65px;
  left: 541px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_D002:hover 
{
   cursor: pointer;
}
/**/
.Label_D003  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  95px;
  left: 541px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_D003:hover 
{
   cursor: pointer;
}
/**/
.Label_D004  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  125px;
  left: 541px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_D004:hover 
{
   cursor: pointer;
}
/**/
/**/
.Label_D005  /**/
{
 position:absolute; /*relative absolute*/
  float: left;  
  top:  155px;
  left: 541px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  Height: 18px;  
  font-size: 18px;
  color: blue;  
}
.Label_D005:hover 
{
   cursor: pointer;
}
/**/












