

.container1{ /* LHD container */

  float:left;
  background: #ffffff !important;
  height:100%;
  width:46%;
  padding-left: 5%;
}
.styled-select select {
   background: yellow !important;
   padding: 5px;
   font-size: 14px;
   line-height: 1;
   border: 20px;
   border-radius: 10px;
   height: 24px;
   margin:bottom 20px;
    margin:top 20px;
   }





.container3{ /* Lfull container */
  position:absolute;
  top:230px;
  float:left;
  background:#ffffff;
  height:100%;
  width:90%;
}
.container4{ /* Lfull container */
  position:absolute;
  top:100px;
  float:left;
  background:#ffffff;
  height:100%;
  width:90%;
}
.container2{ /* RHD container */
  float:right;
padding-right: 5%;
  background:#ffffff;
  height:100%;
  width:46%;
}
 .box1 chart8
  {
    width:20%;
      background:#00000f;
  }
   .box1 chart9
  {
    width:100%;
      background:#00000f;
  }
.box_scan{ /*  box 1 LHS box for barcode scan */
  width:100%;
}
.box_scan input
{
      font-family: Tahoma;
      font-size: 16px;   
      padding-top: 2%;
      padding-bottom: 2%;
       padding-left: 12%;
      width:auto;
}
.box1{ /*  box 1 LHS box */
  float:left;
  background:#c0c0c0c;
  width:100%;
}
.css_corner_start {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 150px;
    height: 40px;
    background-color: #31AF48;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 14px;
    text-align: center;  
   
}
.css_corner_stop {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 150px;
    height: 40px;
    background-color: #EF3B1A;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 14px;
    text-align: center;  
   
}
.css_corner {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 150px;
    height: 40px;
    background-color: #3498DB;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 14px;
    text-align: center;  
   
}
.box1_top_r{
  background:#ffffff;
  float:right;
}
.css_corner_mc {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 150px;
    height: 100px;
    background-color: #D68910;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 14px;
    text-align: center;  
   
}
.box1_top_mc{
  padding-top: 2%;
  background:#ffffff;
  float:right;
 position:center;
}
.box1_top_mc submit {
  padding-top: 2%;
  position:center;
  background:#ffffff;
  float:left;
}
.box1_top_l{
  background:#ffffff;
  position:left;
}
.box2{  /* box 2 RHS box */
  float:right;
  background:#99c;
  width:100%;
}
.box2_scan{  /* box 2 RHS box */
  float:right;
  background:#FAFAE1;
  width:100%;
}
.box1 select
{
   width: 100%;
   font-family: Tahoma;
  font-size: 26px;
  color: #b6b9bf;
}
.box1 input
{
   width: 100%;
   font-family: Tahoma;
  font-size: 12px;
  color: ##0002FF;
  background:#FFF100;
}
.box1 a
{
 font-family: Tahoma;
  font-size: 16px;
  color: #b6b9bf;

}
  .box1 table 
  {
    background:#ffffff;
   table-layout:fixed;
   width: 100%;
   font-family: Tahoma;
  font-size: 16px;
  color: #000000;
 text-align:center; 
    vertical-align:middle;
  }
   .box2 table 
  {
    background:#466bb0;
   table-layout:fixed;
   width: 100%;
   font-family: Tahoma;
  font-size: 16px;
  color: #ffffff;
 text-align:center; 
    vertical-align:middle;
  }




  .box2 chart6
  {
    width:60%;
  }
    .box2 chart3
  {
    width:60%;
  }
  .box_btn {
          /* Round 1 */
          border:1px solid #666;
          cursor:pointer;
          display:block;
          margin:10px auto 0;
          padding:5px;
          text-align:center;
          text-decoration:none;
          width:140px;
          /* Round 2 */
          -moz-border-radius:15px;
          -webkit-border-radius:15px;
          background:#20c167;
          background-image:-moz-linear-gradient(top, #20c167, #157f44);
          background-image:-o-linear-gradient(top, #20c167, #157f44);
          background-image:-webkit-gradient(linear, center top, center bottom,
               from(#20c167), to(#157f44));
          background-image:linear-gradient(top, #20c167, #157f44);
          border-radius:15px;
          color:#000000;
          font-size:.75em;
          font-weight:bold;
          text-shadow:-1px -1px 0 #444;
     }
.h_clearspace1 {
clear:both;
padding-top: 1px;
padding-bottom: 1px;
float:bottom;
width:auto;
background:red;
}
.h_clearspace2 {
clear:both;
padding-top: 22px;
padding-bottom: 22px;
float:bottom;
width:auto;
background:#ffffff;
}
.h_clearspace3 {
clear:both;
padding-top: 22px;
padding-bottom: 22px;
float:bottom;
width:auto;
background:#ffffff;
}
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}

/************************ OEE Display Formats. ********************************************
/* Header For Oee Display */

.oee_header p{ 
  text-align: center;
  background:#ffffff;
  height:2%;
  width:100%;
}

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px 0px 0px 0px;
  margin: 0px;
}
.section table{
   table-layout:fixed;
   width: 100%;
   font-family: Tahoma;
  font-size: 16px;
  color: #0002FF;
 text-align:center; 
    vertical-align:middle;
  }
  .section th {
    background-color: #ffffFF;
}
 .section td.c0 {
    background-color: red;
    color: white;
}
.section td.c1 {
    background-color: orange;
    color: white;
}
.section td.c2 {
    background-color: yellow;
    color: black;
}
.section td.c3 {
    background-color: green;
    color: white;
}
.section td.c4 {
    background-color: white;
    color: white;
}

.section td.c5 {
    background-color: #B8B8B8 ;
    color: black;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF SIX  */
.span_6_of_6 {
  width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
      color: #0002FF;
}
.span_2_of_6.td {
    width: 32.26%;
      background-color: #ddffFF;
}

.span_1_of_6 {
    width: 15.33%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .col {  margin: 1% 0 1% 0%; }
  .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}

.flash {
    width: 100px;
    height: 100px;
    background-color: red;
    
    animation-name: example;
    animation-duration: 2s;
 animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: white;}
}




