/* css/ml-header.css
   Replace image/ba_ml.png banner with HTML/CSS title bar (528x21)

   For near pixel-level match:
   1) Convert MSGOTHIC.TTC -> WOFF2
   2) Place it at: fonts/MSGOTHIC.woff2 (relative to the HTML file)
*/

@font-face {
  font-family: "MSGothicWeb";
  src: url("../fonts/MSGOTHIC.woff2") format("woff2");
  font-display: swap;
}

.ml-header{
  width:628px;
  height:21px;
  overflow:hidden;
  position:relative;
  display:block;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 1px,
      rgba(110,160,210,0.15) 1px,
      rgba(110,160,210,0.15) 2px
    ),
    linear-gradient(
      to right,
      #ffffff 0%,
      #edf4ff 30%,
      #9fc3ea 65%,
      #2e76c3 100%
    );
}

.ml-header span{
  position:absolute;
  left:8px;
  top:2px;

  font-family: "MSGothicWeb", "MS Gothic", "MS UI Gothic", monospace;
  font-size:16px;
  font-weight:900;

  color:#5f94cd;
  letter-spacing:0.1px;
  white-space:nowrap;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

.ml-header2{
  width:478px;
  height:21px;
  overflow:hidden;
  position:relative;
  display:block;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 1px,
      rgba(110,160,210,0.15) 1px,
      rgba(110,160,210,0.15) 2px
    ),
    linear-gradient(
      to right,
      #ffffff 0%,
      #edf4ff 30%,
      #9fc3ea 65%,
      #2e76c3 100%
    );
}

.ml-header2 span{
  position:absolute;
  left:8px;
  top:2px;

  font-family: "MSGothicWeb", "MS Gothic", "MS UI Gothic", monospace;
  font-size:16px;
  font-weight:900;

  color:#5f94cd;
  letter-spacing:0.1px;
  white-space:nowrap;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}