authsystem.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 body {
   6   font-family: sans-serif;
   7 /*  margin: 0; */
   8   background-color: #FFFFEE;
   9   padding-top: 5em; /* leave space for total height of h1: 4+1(r)em */
  10 }
  11
  12 h1 {
  13   position: absolute;
  14   top: 0;
  15   left: 0;
  16   right: 0;
  17   margin: 0;
  18   padding: 10px 0 0 130px; /* IE8 and older do not support rem */
  19   padding: 1rem 0 0 130px;
  20   height: 60px; /* IE8 and older do not support rem */
  21   height: 4rem;
  22   min-height: calc(70px - 1rem);
  23   font-size: 2em;
  24   background-color: #003366;
  25   color: #FFFFEE;
  26   background-image: url("KaiRoLogo-100x62.png");
  27   background-repeat: no-repeat;
  28   background-position: 10px 50%;
  29   overflow: hidden;
  30 }
  31 @media screen and (max-width: 550px) {
  32   h1 {
  33     font-size: 1.5em;
  34   }
  35 }
  36 @media screen and (max-width: 375px) {
  37   h1 {
  38     font-size: 1.2em;
  39     padding-left: 120px;
  40   }
  41 }
  42 @media screen and (max-width: 325px) {
  43   h1 {
  44     padding-top: 0.5rem;
  45     height: 4.5rem;
  46     min-height: calc(70px - 0.5rem);
  47   }
  48 }
  49
  50 a:link { color: #669999; }
  51 a:visited { color: #003366; }
  52 a:hover, a:active { color: #88BBBB; }
  53
  54 ul.flat {
  55  list-style-type: none;
  56  margin: 0em;
  57  padding: 0px;
  58 }
  59 ul.flat li {
  60  margin: 0 0 0.2em 0;
  61  padding: 0px;
  62 }
  63 p.flat {
  64   border: 0px;
  65   margin: 0px;
  66   padding: 0px;
  67 }
  68 form.flat {
  69   border: 0px;
  70   margin: 0px;
  71   padding: 0px;
  72 }
  73
  74 table.border {
  75  border-spacing: 0px;
  76  border-collapse: collapse;
  77  empty-cells: show;
  78  border-left: 1px solid #336699;
  79  border-top: 1px solid #336699;
  80 }
  81 table.border th, table.border td {
  82  border-bottom: 1px solid #336699;
  83  border-right: 1px solid #336699;
  84 }
  85 table.border td {
  86  padding-left: 3px;
  87  padding-right: 3px;
  88 }
  89
  90 .loginheader {
  91   font-size: 1.2em;
  92   font-weight: bold;
  93   margin: 5px 10px 0; /* IE8 and older do not support rem */
  94   margin: 0.5rem 1rem 0;
  95 }
  96
  97 .loginlinks {
  98   margin: 5px 10px 0; /* IE8 and older do not support rem */
  99   margin: 0.5rem 1rem 0;
 100 }
 101
 102 .loginarea {
 103   margin: 5px 10px 0; /* IE8 and older do not support rem */
 104   margin: 0.5rem 1rem 0;
 105 }
 106
 107 .resetinfo,
 108 .verifyinfo,
 109 .newpwdinfo {
 110   margin: 5px 10px 0; /* IE8 and older do not support rem */
 111   margin: 0.5rem 1rem 0;
 112 }
 113
 114 .resetinfo.done,
 115 .verifyinfo.done {
 116   padding-left: 20px;
 117   background-image: url("check.png");
 118   background-repeat: no-repeat;
 119   background-position: 0 50%;
 120 }
 121
 122 .small {
 123   font-size: 0.75em;
 124 }
 125 .hidden {
 126   display: none;
 127 }
 128 .warn {
 129   color: red;
 130 }
 131 .donotshow {
 132   position: absolute;
 133   right: -1000px;
 134   opacity: 0;
 135 }
 136
 137 input,
 138 select {
 139   font-size: .9em;
 140 }
 141
 142 @media screen and (max-width: 375px) {
 143   /* On smaller devices, make the form elements into larger touch targets. */
 144   input,
 145   select {
 146     font-size: 1em;
 147     padding-top: 0.5em;
 148     padding-bottom: 0.5em;
 149   }
 150 }
 151
 152 input:invalid {
 153   box-shadow: 0 0 2px 1px red;
 154 }