wmca.css

   1 * {
   2   box-sizing: border-box;
   3 }
   4
   5 body {
   6   background-color: #F3F3F3;
   7   margin: 1em;
   8   font-family: sans-serif;
   9   font-size: 1.4rem;
  10   color: #000;
  11 }
  12
  13 a {
  14   text-decoration: none;
  15   padding-bottom: 0px;
  16   border-bottom: 1px solid blue;
  17 }
  18
  19 img.logo {
  20   display: flex;
  21   float: left;
  22   max-width: 25%;
  23   height: auto;
  24 }
  25
  26 .langlink {
  27   /*display: flex;
  28   justify-content: flex-start;*/
  29   float: right;
  30 }
  31
  32 .title {
  33   text-align: center;
  34   padding-top: 75px;
  35 }
  36
  37 h1 {
  38   font-weight: bold;
  39   text-align: center;
  40 }
  41
  42 h2 {
  43   font-weight: bold;
  44   font-size: 1.6em;
  45 }
  46
  47 h3 {
  48   font-weight: bold;
  49   font-size: 1.4em;
  50 }
  51
  52 p {
  53   margin: 0 0 1em 0;
  54 }
  55
  56 #main {
  57   margin: 0;
  58   padding: 0;
  59   display: -webkit-flex;
  60   display: flex;
  61   -webkit-flex-flow: row;
  62   flex-flow: row;
  63 }
  64
  65 #main > article,
  66 #main > leftmargin,
  67 #main > rightmargin {
  68   background: #F3F3F3;
  69   margin: 4px;
  70   padding: 0em 1.0rem;
  71   }
  72
  73 #main > article {
  74   -webkit-flex: 4 1 0;
  75   flex: 4 1 0;
  76   -webkit-order: 2;
  77   order: 2;
  78 }
  79
  80 #green {
  81   display: -webkit-flex;
  82   display: flex;
  83   -webkit-flex-direction: row;
  84   flex-direction: row;
  85   padding-bottom: 1em;
  86 }
  87
  88 #join {
  89   border: 1px solid #5EAC58;
  90   background-color: #CCE7CD;
  91   padding: 1em;
  92   width: 60%;
  93 }
  94
  95 #donate {
  96   border: 1px solid #5EAC58;
  97   background-color: #CCE7CD;
  98   padding: 1em;
  99   width: 40%;
 100 }
 101
 102 #join > h2, #donate > h2 {
 103   text-align: center;
 104 }
 105
 106 #main > leftmargin {
 107   -webkit-order: 1;
 108   order: 1;
 109 }
 110
 111 #main > rightmargin {
 112   -webkit-order: 3;
 113   order: 3;
 114 }
 115
 116 header {
 117   display: block;
 118   padding: 1.0em;
 119 }
 120
 121 footer {
 122   display: block;
 123   min-height: 80px;
 124   background: #DDD;
 125   font-size: 75%;
 126   font-style: italic;
 127   padding: 0.5em;
 128 }
 129
 130 .flex-outer {
 131   list-style-type: none;
 132   padding: 0;
 133   margin: 0 auto;
 134 }
 135
 136 .flex-outer li {
 137   display: flex;
 138   flex-wrap: wrap;
 139   align-items: center;
 140 }
 141
 142 .flex-outer li:not(:last-child) {
 143   margin-bottom: 10px;
 144 }
 145
 146 .flex-outer li label {
 147   padding: 8px;
 148 }
 149
 150 .flex-outer li p {
 151   /*padding: 8px;*/
 152   align-items: center;
 153 }
 154
 155 .flex-outer > li > label,
 156 .flex-outer li p {
 157   flex: 1 0 120px;
 158   max-width: 220px;
 159   padding: 8px;
 160 }
 161
 162 .flex-outer > li > label + * {
 163   flex: 1 0 220px;
 164 }
 165
 166 .flex-outer li input:not([type='radio']) {
 167   padding: 15px;
 168 }
 169
 170 .flex-inner {
 171   display: flex;
 172   flex-wrap: wrap;
 173   justify-content: space-between;
 174   flex-direction: column;
 175   list-style-type: none;
 176   padding: 0;
 177 }
 178
 179 span.break:before {
 180   content: "\A";
 181   white-space: pre;
 182 }
 183
 184 select {
 185   display: inline-block;
 186   width: 100%;
 187   padding: 10px 15px;
 188   font-size: 1.4rem;
 189   border: 0;
 190   border-radius: 0;
 191 }
 192
 193 .radio-item {
 194   display: flex;
 195   align-items: baseline;
 196   justify-content: space-between;
 197   padding-bottom: 0.5em;
 198 }
 199
 200 input[type="radio"] {
 201   align-self: center;
 202 }
 203
 204 input[type='text'] {
 205   display: inline-block;
 206   width: 100%;
 207   font-size: 1.4rem;
 208 }
 209
 210 #donate > form {
 211   text-align: center;
 212 }
 213
 214 .btn-item {
 215   display: flex;
 216   padding-top: 1.5rem;
 217   justify-content: center;
 218 }
 219
 220 .btn {
 221   padding: 1.0rem;
 222   border: 1px solid #333;
 223   background: #333;
 224   color: #fff;
 225   text-transform: uppercase;
 226   letter-spacing: .09em;
 227   border-radius: 2px;
 228   font-weight: bold;
 229   font-size: 1.6em;
 230 }
 231
 232 .btn:hover {
 233   background: gold;
 234   color: #000;
 235   border: 1px solid #333;
 236 }
 237
 238 .btn:focus {
 239   background: gold;
 240   color: #000;
 241   border: 1px solid #333;
 242 }
 243
 244 @-ms-viewport {
 245   width: device-width;
 246 }
 247
 248 @media only screen and (max-width: 768px) {
 249
 250   body {
 251     font-size: 1.2rem;
 252     margin: 0em;
 253   }
 254
 255   #main, #page {
 256     -webkit-flex-flow: column;
 257     flex-flow: column;
 258   }
 259
 260   #main > article, #main > leftmargin, #main > rightmargin {
 261     /* Return them to document order */
 262     -webkit-order: 0;
 263     order: 0;
 264   }
 265
 266   #main > article {
 267     /*padding 0.5em;*/
 268   }
 269
 270   #main > leftmargin, #main > rightmargin {
 271     /* Hide them */
 272     visibility: hidden;
 273     margin: 0;
 274     padding: 0;
 275     order: 3;
 276   }
 277
 278   #green {
 279     -webkit-flex-flow: column;
 280     flex-flow: column;
 281     padding-bottom: 1em;
 282     -webkit-order: 0;
 283     order: 0;
 284   }
 285
 286   #join, #donate {
 287     width: 100%;
 288     padding: 1em;
 289     border: 0px;
 290   }
 291
 292   #join {
 293     border-bottom: 1px solid #5EAC58;
 294   }
 295
 296   #donate {
 297     border-top: 1px solid #5EAC58;
 298   }
 299
 300   br {
 301     content: ' ';
 302   }
 303
 304   br:after {
 305     content: ' ';
 306   }
 307
 308   select, input[type='text'] {
 309     font-size: 1.0rem;
 310   }
 311
 312   header, footer {
 313     min-height: 50px;
 314   }
 315
 316   footer {
 317     margin-top: 0.25em;
 318     position: sticky;
 319   }
 320
 321   .btn {
 322     display: inline-block;
 323     width: 100%;
 324     margin-top: 2em;
 325   }
 326 }