src/cas/static/css/main.css

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