1body {
  2  background: #FFFFFF;
  3}
  4
  5img.map {
  6  border: 1px solid #E0E0E0;
  7}
  8
  9div.box {
 10  padding-bottom: 14px;
 11}
 12
 13div.set {
 14  min-height: 256px;
 15}
 16
 17div.set:empty {
 18  background: #F5F5F5;
 19}
 20
 21div.set:empty:before {
 22  text-align: center;
 23  width: 100%;
 24  display: block;
 25  padding-top: 120px;
 26  vertical-align: middle;
 27  content: 'Click GENERATE to create maps.';
 28}
 29
 30div.set .spinner {
 31  margin-left: 50%;
 32  padding-top: 100px;
 33}
 34
 35.run {
 36  float: right;
 37}
 38
 39.hidden {
 40  display: none;
 41}
 42
 43
 44/*
 45* Skeleton V2.0.4
 46* Copyright 2014, Dave Gamache
 47* www.getskeleton.com
 48* Free to use under the MIT license.
 49* http://www.opensource.org/licenses/mit-license.php
 50* 12/29/2014
 51*/
 52
 53
 54/* Table of contents
 55––––––––––––––––––––––––––––––––––––––––––––––––––
 56- Grid
 57- Base Styles
 58- Typography
 59- Links
 60- Buttons
 61- Forms
 62- Lists
 63- Code
 64- Tables
 65- Spacing
 66- Utilities
 67- Clearing
 68- Media Queries
 69*/
 70
 71
 72/* Grid
 73–––––––––––––––––––––––––––––––––––––––––––––––––– */
 74
 75.container {
 76  position: relative;
 77  width: 100%;
 78  max-width: 960px;
 79  margin: 0 auto;
 80  padding: 0 20px;
 81  box-sizing: border-box;
 82}
 83
 84.column,
 85.columns {
 86  width: 100%;
 87  float: left;
 88  box-sizing: border-box;
 89}
 90
 91
 92/* For devices larger than 400px */
 93
 94@media (min-width: 400px) {
 95  .container {
 96    width: 85%;
 97    padding: 0;
 98  }
 99}
100
101
102/* For devices larger than 550px */
103
104@media (min-width: 550px) {
105  .container {
106    width: 80%;
107  }
108  .column,
109  .columns {
110    margin-left: 4%;
111  }
112  .column:first-child,
113  .columns:first-child {
114    margin-left: 0;
115  }
116  .one.column,
117  .one.columns {
118    width: 4.66666666667%;
119  }
120  .two.columns {
121    width: 13.3333333333%;
122  }
123  .three.columns {
124    width: 22%;
125  }
126  .four.columns {
127    width: 30.6666666667%;
128  }
129  .five.columns {
130    width: 39.3333333333%;
131  }
132  .six.columns {
133    width: 48%;
134  }
135  .seven.columns {
136    width: 56.6666666667%;
137  }
138  .eight.columns {
139    width: 65.3333333333%;
140  }
141  .nine.columns {
142    width: 74.0%;
143  }
144  .ten.columns {
145    width: 82.6666666667%;
146  }
147  .eleven.columns {
148    width: 91.3333333333%;
149  }
150  .twelve.columns {
151    width: 100%;
152    margin-left: 0;
153  }
154  .one-third.column {
155    width: 30.6666666667%;
156  }
157  .two-thirds.column {
158    width: 65.3333333333%;
159  }
160  .one-half.column {
161    width: 48%;
162  }
163  /* Offsets */
164  .offset-by-one.column,
165  .offset-by-one.columns {
166    margin-left: 8.66666666667%;
167  }
168  .offset-by-two.column,
169  .offset-by-two.columns {
170    margin-left: 17.3333333333%;
171  }
172  .offset-by-three.column,
173  .offset-by-three.columns {
174    margin-left: 26%;
175  }
176  .offset-by-four.column,
177  .offset-by-four.columns {
178    margin-left: 34.6666666667%;
179  }
180  .offset-by-five.column,
181  .offset-by-five.columns {
182    margin-left: 43.3333333333%;
183  }
184  .offset-by-six.column,
185  .offset-by-six.columns {
186    margin-left: 52%;
187  }
188  .offset-by-seven.column,
189  .offset-by-seven.columns {
190    margin-left: 60.6666666667%;
191  }
192  .offset-by-eight.column,
193  .offset-by-eight.columns {
194    margin-left: 69.3333333333%;
195  }
196  .offset-by-nine.column,
197  .offset-by-nine.columns {
198    margin-left: 78.0%;
199  }
200  .offset-by-ten.column,
201  .offset-by-ten.columns {
202    margin-left: 86.6666666667%;
203  }
204  .offset-by-eleven.column,
205  .offset-by-eleven.columns {
206    margin-left: 95.3333333333%;
207  }
208  .offset-by-one-third.column,
209  .offset-by-one-third.columns {
210    margin-left: 34.6666666667%;
211  }
212  .offset-by-two-thirds.column,
213  .offset-by-two-thirds.columns {
214    margin-left: 69.3333333333%;
215  }
216  .offset-by-one-half.column,
217  .offset-by-one-half.columns {
218    margin-left: 52%;
219  }
220}
221
222
223/* Base Styles
224–––––––––––––––––––––––––––––––––––––––––––––––––– */
225
226
227/* NOTE
228html is set to 62.5% so that all the REM measurements throughout Skeleton
229are based on 10px sizing. So basically 1.5rem = 15px :) */
230
231html {
232  font-size: 62.5%;
233}
234
235body {
236  font-size: 1.5em;
237  /* currently ems cause chrome bug misinterpreting rems on body element */
238  line-height: 1.6;
239  font-weight: 400;
240  font-family: Georgia, Times, serif;
241  color: #222;
242}
243
244
245/* Typography
246–––––––––––––––––––––––––––––––––––––––––––––––––– */
247
248h1,
249h2,
250h3,
251h4,
252h5,
253h6 {
254  margin-top: 0;
255  margin-bottom: 2rem;
256  font-weight: 300;
257}
258
259h1 {
260  font-size: 4.0rem;
261  line-height: 1.2;
262  letter-spacing: -.1rem;
263}
264
265h2 {
266  font-size: 3.6rem;
267  line-height: 1.25;
268  letter-spacing: -.1rem;
269}
270
271h3 {
272  font-size: 3.0rem;
273  line-height: 1.3;
274  letter-spacing: -.1rem;
275}
276
277h4 {
278  font-size: 2.4rem;
279  line-height: 1.35;
280  letter-spacing: -.08rem;
281}
282
283h5 {
284  font-size: 1.8rem;
285  line-height: 1.5;
286  letter-spacing: -.05rem;
287}
288
289h6 {
290  font-size: 1.5rem;
291  line-height: 1.6;
292  letter-spacing: 0;
293}
294
295
296/* Larger than phablet */
297
298@media (min-width: 550px) {
299  h1 {
300    font-size: 5.0rem;
301  }
302  h2 {
303    font-size: 4.2rem;
304  }
305  h3 {
306    font-size: 3.6rem;
307  }
308  h4 {
309    font-size: 3.0rem;
310  }
311  h5 {
312    font-size: 2.4rem;
313  }
314  h6 {
315    font-size: 1.5rem;
316  }
317}
318
319p {
320  margin-top: 0;
321}
322
323
324/* Links
325–––––––––––––––––––––––––––––––––––––––––––––––––– */
326
327a {
328  color: #1EAEDB;
329}
330
331a:hover {
332  color: #0FA0CE;
333}
334
335
336/* Buttons
337–––––––––––––––––––––––––––––––––––––––––––––––––– */
338
339.button,
340button,
341input[type="submit"],
342input[type="reset"],
343input[type="button"] {
344  display: inline-block;
345  height: 38px;
346  padding: 0 30px;
347  color: #555;
348  text-align: center;
349  font-size: 11px;
350  font-weight: 600;
351  line-height: 38px;
352  letter-spacing: .1rem;
353  text-transform: uppercase;
354  text-decoration: none;
355  white-space: nowrap;
356  background-color: transparent;
357  border-radius: 4px;
358  border: 1px solid #bbb;
359  cursor: pointer;
360  box-sizing: border-box;
361}
362
363.button:hover,
364button:hover,
365input[type="submit"]:hover,
366input[type="reset"]:hover,
367input[type="button"]:hover,
368.button:focus,
369button:focus,
370input[type="submit"]:focus,
371input[type="reset"]:focus,
372input[type="button"]:focus {
373  color: #333;
374  border-color: #888;
375  outline: 0;
376}
377
378.button.button-primary,
379button.button-primary,
380input[type="submit"].button-primary,
381input[type="reset"].button-primary,
382input[type="button"].button-primary {
383  color: #FFF;
384  background-color: #2196F3;
385  border-color: #2196F3;
386}
387
388.button.button-primary:hover,
389button.button-primary:hover,
390input[type="submit"].button-primary:hover,
391input[type="reset"].button-primary:hover,
392input[type="button"].button-primary:hover,
393.button.button-primary:focus,
394button.button-primary:focus,
395input[type="submit"].button-primary:focus,
396input[type="reset"].button-primary:focus,
397input[type="button"].button-primary:focus {
398  color: #FFF;
399  background-color: #1E88E5;
400  border-color: #1E88E5;
401}
402
403
404/* Forms
405–––––––––––––––––––––––––––––––––––––––––––––––––– */
406
407input[type="email"],
408input[type="number"],
409input[type="search"],
410input[type="text"],
411input[type="tel"],
412input[type="url"],
413input[type="password"],
414textarea,
415select {
416  height: 38px;
417  padding: 6px 10px;
418  /* The 6px vertically centers text on FF, ignored by Webkit */
419  background-color: #fff;
420  border: 1px solid #D1D1D1;
421  border-radius: 4px;
422  box-shadow: none;
423  box-sizing: border-box;
424}
425
426
427/* Removes awkward default styles on some inputs for iOS */
428
429input[type="email"],
430input[type="number"],
431input[type="search"],
432input[type="text"],
433input[type="tel"],
434input[type="url"],
435input[type="password"],
436textarea {
437  -webkit-appearance: none;
438  -moz-appearance: none;
439  appearance: none;
440}
441
442textarea {
443  min-height: 65px;
444  padding-top: 6px;
445  padding-bottom: 6px;
446}
447
448input[type="email"]:focus,
449input[type="number"]:focus,
450input[type="search"]:focus,
451input[type="text"]:focus,
452input[type="tel"]:focus,
453input[type="url"]:focus,
454input[type="password"]:focus,
455textarea:focus,
456select:focus {
457  border: 1px solid #33C3F0;
458  outline: 0;
459}
460
461label,
462legend {
463  display: block;
464  margin-bottom: .5rem;
465  font-weight: 600;
466}
467
468fieldset {
469  padding: 0;
470  border-width: 0;
471}
472
473input[type="checkbox"],
474input[type="radio"] {
475  display: inline;
476}
477
478label > .label-body {
479  display: inline-block;
480  margin-left: .5rem;
481  font-weight: normal;
482}
483
484
485/* Lists
486–––––––––––––––––––––––––––––––––––––––––––––––––– */
487
488ul {
489  list-style: circle inside;
490}
491
492ol {
493  list-style: decimal inside;
494}
495
496ol,
497ul {
498  padding-left: 0;
499  margin-top: 0;
500}
501
502ul ul,
503ul ol,
504ol ol,
505ol ul {
506  margin: 1.5rem 0 1.5rem 3rem;
507  font-size: 90%;
508}
509
510li {
511  margin-bottom: 1rem;
512}
513
514
515/* Code
516–––––––––––––––––––––––––––––––––––––––––––––––––– */
517
518code {
519  padding: .2rem .5rem;
520  margin: 0 .2rem;
521  font-size: 90%;
522  white-space: nowrap;
523  background: #F1F1F1;
524  border: 1px solid #E1E1E1;
525  border-radius: 4px;
526}
527
528pre > code {
529  display: block;
530  padding: 1rem 1.5rem;
531  white-space: pre;
532}
533
534
535/* Tables
536–––––––––––––––––––––––––––––––––––––––––––––––––– */
537
538th,
539td {
540  padding: 12px 15px;
541  text-align: left;
542  border-bottom: 1px solid #E1E1E1;
543}
544
545th:first-child,
546td:first-child {
547  padding-left: 0;
548}
549
550th:last-child,
551td:last-child {
552  padding-right: 0;
553}
554
555
556/* Spacing
557–––––––––––––––––––––––––––––––––––––––––––––––––– */
558
559button,
560.button {
561  margin-bottom: 1rem;
562}
563
564input,
565textarea,
566select,
567fieldset {
568  margin-bottom: 1.5rem;
569}
570
571pre,
572blockquote,
573dl,
574figure,
575table,
576p,
577ul,
578ol,
579form {
580  margin-bottom: 2.5rem;
581}
582
583
584/* Utilities
585–––––––––––––––––––––––––––––––––––––––––––––––––– */
586
587.u-full-width {
588  width: 100%;
589  box-sizing: border-box;
590}
591
592.u-max-full-width {
593  max-width: 100%;
594  box-sizing: border-box;
595}
596
597.u-pull-right {
598  float: right;
599}
600
601.u-pull-left {
602  float: left;
603}
604
605
606/* Misc
607–––––––––––––––––––––––––––––––––––––––––––––––––– */
608
609hr {
610  margin-top: 3rem;
611  margin-bottom: 3.5rem;
612  border-width: 0;
613  border-top: 1px solid #E1E1E1;
614}
615
616
617/* Clearing
618–––––––––––––––––––––––––––––––––––––––––––––––––– */
619
620
621/* Self Clearing Goodness */
622
623.container:after,
624.row:after,
625.u-cf {
626  content: "";
627  display: table;
628  clear: both;
629}
630
631
632/* Media Queries
633–––––––––––––––––––––––––––––––––––––––––––––––––– */
634
635
636/*
637Note: The best way to structure the use of media queries is to create the queries
638near the relevant code. For example, if you wanted to change the styles for buttons
639on small devices, paste the mobile query code up in the buttons section and style it
640there.
641*/
642
643
644/* Larger than mobile */
645
646@media (min-width: 400px) {}
647
648
649/* Larger than phablet (also point when grid becomes active) */
650
651@media (min-width: 550px) {}
652
653
654/* Larger than tablet */
655
656@media (min-width: 750px) {}
657
658
659/* Larger than desktop */
660
661@media (min-width: 1000px) {}
662
663
664/* Larger than Desktop HD */
665
666@media (min-width: 1200px) {}