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