src/cas/static/css/main.css

   1 * {
   2     box-sizing: border-box;
   3 }
   4
   5 .enclose {
   6     height: 450px;
   7     margin: 1em 0;
   8     background-size: auto 450px;
   9     display: flex;
  10     flex-direction: column;
  11 }
  12
  13 .enclosed {
  14     max-width: 300px;
  15     margin: auto;
  16 }
  17
  18 a {
  19     text-decoration: none;
  20 }
  21 a:hover {
  22     text-decoration: underline;
  23 }
  24
  25 .errorlist {
  26     color: red;
  27     margin: 0;
  28     padding: 0;
  29     list-style: none;
  30 }
  31
  32
  33 label, input, button, textarea {
  34     display: block;
  35     width: 100%;
  36 }
  37
  38 .enclosed input {
  39     font-size: 1.75em;
  40     margin-bottom: .4em;
  41     width: 100%;
  42 }
  43 .enclosed button {
  44     font-size: 1.75em;
  45     width: 100%;
  46     margin-bottom: 0;
  47 }
  48 .enclosed p {
  49     margin-bottom: 0;
  50 }
  51 h1 {
  52     font-size: 1.75em;
  53     margin: 0 0 16px;
  54 }
  55 html, body {
  56     margin: 0;
  57     padding: 0;
  58 }
  59 body {
  60     background-color: #F7F7F7;
  61     color: black;
  62     font-family: Lato;
  63 }
  64
  65 #header-wrap {
  66     background: #191919;
  67     color: #989898;
  68 }
  69 header {
  70     max-width: 600px;
  71     margin: auto;
  72     padding: 1em 0;
  73 }
  74 header img {
  75     margin: 0 20px;
  76     vertical-align: middle;
  77 }
  78 footer, #content_push {
  79     height: 10em;
  80 }
  81
  82 #content {
  83     max-width: 600px;
  84     margin: auto;
  85 }
  86
  87 #details {
  88     margin: 1em 0;
  89     padding: 0 2em;
  90 }
  91
  92 #details form table th {
  93         text-align: left;
  94 }
  95
  96 #details form {
  97         margin-bottom: 2em;
  98 }
  99
 100 #details #messages {
 101     background: white;
 102     box-shadow: 0 0 10px black;
 103     font-size: 1.75em;
 104     padding: 20px;
 105     margin-bottom: 20px;
 106 }
 107 #details #messages p {
 108     margin: 0;
 109     color: green;
 110 }
 111
 112 .menu {
 113     margin: 1em 0;
 114     text-align: center;
 115 }
 116 .menu .active {
 117     font-weight: bold;
 118     color: black;
 119 }
 120 @media screen and (min-width: 620px) {
 121     .menu {
 122         float: left;
 123         max-width: 20%;
 124     }
 125
 126     #details {
 127         float: right;
 128         width: 80%;
 129     }
 130 }
 131
 132 .menu img {
 133     box-shadow: 0 0 .2em black;
 134     margin-bottom: 1em;
 135 }
 136
 137 code.key {
 138     white-space: nowrap;
 139     width: 100%;
 140     overflow: hidden;
 141     text-overflow: ellipsis;
 142     display: block;
 143     color: #666;
 144 }
 145
 146
 147 .service-list {
 148     display: flex;
 149     gap: 10px;
 150     flex-wrap: wrap;
 151 }
 152 a.service {
 153     width: 130px;
 154     height: 80px;
 155     background: white;
 156     box-shadow:  3px 3px 5px #aaa;
 157     padding: 10px;
 158     position: relative;
 159     display: flex;
 160     color: black;
 161     align-items: center;
 162     justify-content: center;
 163 }
 164 a.service:hover {
 165     text-decoration: none;
 166     background: orange;
 167 }
 168 .service-icon {
 169     max-width: 100%;
 170     max-height: 100%;
 171 }