/* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure, 
   footer, header, hgroup, menu, nav, section {
    display: block;
  }

  blockquote, q {
    quotes: none;
  }
 
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
 
  table, th, td {
    border: 1px groove white;
  }

  th, td {
    padding: 10px;
  }
/*=========================================
    Main Styles
    =========================================*/
    body {
      background-image: url(../img/circuit-board.jpg);
      font-family: Arial;
      line-height: 1.5;
    }

/*  CompNext logo   */
    
    img.header{
      display:block;
      margin-left: auto;
      margin-right: auto;
      border-radius: 50px;
    }

/*  Spin Footer  */
    
    @keyframes spin-horizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
    }

    img.footer{
      display:block;
      position: fixed;
      right: 0;
      bottom: 0;
      -moz-animation: spin-horizontal 0.8s infinite linear;
      -o-animation: spin-horizontal 0.8s infinite linear;    
      -webkit-animation: spin-horizontal 0.8s infinite linear;
      animation: spin-horizontal 0.8s infinite linear;
      animation-iteration-count: 2;
      }

/*    Dialog box */
     .bluebox{
      display:block;
      border-style: groove;
      color: white;
      background-color: #095171;
      padding:15px;
      width:1000px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .contact{
      display:block;
      border-style: groove;
      color: white;
      background-color: #095171;
      width:400px;
      margin:auto;
      text-align-last:center;
      -moz-text-align-last:center;
      -webkit-text-align-last:center;
    }

    .contactform{
      display:block;
      color: white;
      background-color: #095171;
      width:300px;
      margin:auto;
      text-align-last:left;
      -moz-text-align-last:left;
      -webkit-text-align-last:left;
    }
    
    .container{
      margin: 0 auto 0 auto;
    }

    .copy{
      display:block;
      color: #095171;
      position: fixed;
      bottom: 0;
      margin-left: 0 auto; 
    }

/*  main menu style  */
    .main-menu ul{background-color: #095171;}
    .main-menu a{color:white; display:block; padding:5px; text-decoration:none;}
    .main-menu a:hover{background-color:#3B444B; text-decoration:none; color:white;}
    .main-menu > ul > li{display:table-cell; border-right:1px solid #d4d4d4; width:10%;}
    .main-menu > ul > li:last-child{border-right: none;}
    .main-menu > ul > li > a{text-align: center;}
    .sp-width{ width:40%!important;}
    .active-order{background-color: #D90700}
    .active-about {background-color: #4CAF50;}

/*  Order Form  */    
    .orderform{
      display:block;
      color: white;
      background-color: #095171;
      width: 800px;
      padding: 15px;
      margin:auto;
      text-align-last:left;
      -moz-text-align-last:left;
      -webkit-text-align-last:left;
    }
    
/*  Product Table  */
    .product{
      text-align-last:center;
      -moz-text-align-last:center;
      -webkit-text-align-last:center;
      margin-left: auto;
      margin-right: auto;
    }

/*  Form  */
 
input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #227A26;
}

input[type=reset] {
    background-color: #989898;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=reset]:hover {
    background-color: #3B444B;
    color: white;
}