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 #donate > form {
 227   text-align: center;
 228 }
 229
 230 .btn {
 231   padding: 16px;
 232   border: 1px solid #333;
 233   background: #333;
 234   color: #fff;
 235   text-transform: uppercase;
 236   letter-spacing: .09em;
 237   border-radius: 2px;
 238   font-weight: bold;
 239   font-size: 1.0rem;
 240 }
 241
 242 .btn:hover {
 243   background: yellow;
 244   color: #000;
 245   border: 1px solid #333;
 246 }
 247
 248 .btn:focus {
 249   background: yellow;
 250   color: #000;
 251   border: 1px solid #333;
 252 }
 253
 254 @-ms-viewport {
 255   width: device-width;
 256 }
 257
 258 @media only screen and (max-width: 768px) {
 259
 260   body {
 261     font-size: 1.2rem;
 262     margin: 0em;
 263   }
 264
 265   #main, #page {
 266     -webkit-flex-flow: column;
 267     flex-flow: column;
 268   }
 269
 270   #main > article, #main > leftmargin, #main > rightmargin {
 271     /* Return them to document order */
 272     -webkit-order: 0;
 273     order: 0;
 274   }
 275
 276   #main > article {
 277     padding 0.5em;
 278   }
 279
 280   #main > leftmargin, #main > rightmargin {
 281     /* Hide them */
 282     visibility: hidden;
 283     margin: 0;
 284     padding: 0;
 285     order: 3;
 286   }
 287
 288   #green {
 289     -webkit-flex-flow: column;
 290     flex-flow: column;
 291     padding-bottom: 1em;
 292     -webkit-order: 0;
 293     order: 0;
 294   }
 295
 296   #join, #donate {
 297     width: 100%;
 298     padding: 1em;
 299     border: 0px;
 300   }
 301
 302   #join {
 303     border-bottom: 1px solid #5EAC58;
 304   }
 305
 306   #donate {
 307     border-top: 1px solid #5EAC58;
 308   }
 309
 310   br {
 311     content: ' ';
 312   }
 313
 314   br:after {
 315     content: ' ';
 316   }
 317
 318   select, input[type='text'] {
 319     font-size: 1.0rem;
 320   }
 321
 322   header, footer {
 323     min-height: 50px;
 324   }
 325
 326   footer {
 327     position: sticky;
 328   }
 329
 330   .btn {
 331     display: inline-block;
 332     width: 100%;
 333     margin-top: 2em;
 334   }
 335 }