1<!doctype html>
2<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
3<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
4<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
5<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
6<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
7<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
8<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
9<head>
10  <meta charset="utf-8">
11
12  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
13       More info: h5bp.com/b/378 -->
14  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
15
16  <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
17  <meta name="description" content="" />
18  <meta name="keywords" content="" />
19  <meta name="author" content="humans.txt">
20
21  <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
22
23  <!-- Facebook Metadata /-->
24  <meta property="fb:page_id" content="" />
25  <meta property="og:image" content="" />
26  <meta property="og:description" content=""/>
27  <meta property="og:title" content=""/>
28
29  <!-- Google+ Metadata /-->
30  <meta itemprop="name" content="">
31  <meta itemprop="description" content="">
32  <meta itemprop="image" content="">
33
34  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
35
36  <!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
37       However, there is a blank style.css in the css directory should you prefer -->
38  <link rel="stylesheet" href="css/gumby.css">
39  <!-- <link rel="stylesheet" href="css/style.css"> -->
40
41  <script src="js/libs/modernizr-2.6.2.min.js"></script>
42</head>
43
44<style>
45  html, body {
46    background: #fefefe;
47  }
48
49  .column, .columns, .tiles > li {
50    background: #ddd;
51        border: 1px solid #d0d0d0;
52    -webkit-transition-duration: .3s;
53    -moz-transition-duration: .3s;
54    -o-transition-duration: .3s;
55    -ms-transition-duration: .3s;
56    transition-duration: .3s;
57  }
58
59  .column:hover, .columns:hover {
60    background: #efefef;
61    cursor: pointer;
62    -webkit-transition-duration: .3s;
63    -moz-transition-duration: .3s;
64    -o-transition-duration: .3s;
65    -ms-transition-duration: .3s;
66    transition-duration: .3s;
67  }
68
69  .row {
70    margin-bottom: 25px;
71    text-align: center;
72  }
73
74  h1, h2 {
75    font: bold italic 220px georgia, times new roman, serif;
76    color: #555;
77    letter-spacing: -.09em;
78    -webkit-transition-duration: 1s;
79  }
80
81  h2  {
82    font-size: 21px;
83    font-weight: normal;
84    line-height: 1.6;
85  }
86
87  p {
88    font-size: 16px;
89    line-height: 60px;
90    margin-bottom: 0;
91    color: #555;
92
93    -webkit-transition-duration: .2s;
94    -moz-transition-duration: .2s;
95    -o-transition-duration: .2s;
96    -ms-transition-duration: .2s;
97    transition-duration: .2s;
98  }
99
100  .column:hover p, .columns:hover p {
101    font-size: 25px;
102    font-weight: bold;
103
104    -webkit-transition-duration: .2s;
105    -moz-transition-duration: .2s;
106    -o-transition-duration: .2s;
107    -ms-transition-duration: .2s;
108    transition-duration: .2s;
109  }
110
111  .head, .head:hover {
112    box-shadow: none;
113    margin-top: 30px;
114  }
115
116  .head span {
117    font-weight: bold;
118    color: #353535;
119  }
120
121  .head span span {
122    font-size: 32px;
123    font-weight: bold !important;
124  }
125
126  a {
127    color: #d04526;
128  }
129
130  a:hover {
131    text-decoration:underline;
132  }
133
134  .special, .special:hover {
135    background: transparent;
136        border: none;
137  }
138
139  .special:hover p {
140    color: #ffe400;
141  }
142
143  @media only screen and (max-width: 767px) {
144
145    h1 {
146      font: bold italic 100px georgia, times new roman, serif;
147      -webkit-transition-duration: .5s;
148    }
149
150  }
151
152
153</style>
154
155<body>
156
157  <div class="row">
158    <div class="twelve columns special head">
159      <h1>Gumby</h1>
160      <h2>A <span>responsive <span>960</span> grid</span>
161      from <a href="#">Digital Surgeons</a></h2>
162    </div>
163  </div>
164
165  <div class="row">
166    <div class="twelve columns">
167      <p>940px</p>
168    </div>
169  </div>
170
171  <div class="row">
172    <div class="one columns">
173      <p>60px</p>
174    </div>
175    <div class="eleven columns">
176      <p>860px</p>
177    </div>
178  </div>
179
180  <div class="row">
181    <div class="one columns">
182      <p>60px</p>
183    </div>
184    <div class="one columns">
185      <p>60px</p>
186    </div>
187    <div class="one columns">
188      <p>60px</p>
189    </div>
190    <div class="one columns">
191      <p>60px</p>
192    </div>
193    <div class="one columns">
194      <p>60px</p>
195    </div>
196    <div class="one columns">
197      <p>60px</p>
198    </div>
199    <div class="one columns">
200      <p>60px</p>
201    </div>
202    <div class="one columns">
203      <p>60px</p>
204    </div>
205    <div class="one columns">
206      <p>60px</p>
207    </div>
208    <div class="one columns">
209      <p>60px</p>
210    </div>
211    <div class="one columns">
212      <p>60px</p>
213    </div>
214    <div class="one columns">
215      <p>60px</p>
216    </div>
217  </div>
218
219  <div class="row">
220    <div class="two columns">
221      <p>140px</p>
222    </div>
223    <div class="ten columns">
224      <p>780px</p>
225    </div>
226  </div>
227
228  <div class="row">
229    <div class="two columns">
230      <p>140px</p>
231    </div>
232    <div class="two columns">
233      <p>140px</p>
234    </div>
235    <div class="two columns">
236      <p>140px</p>
237    </div>
238    <div class="two columns">
239      <p>140px</p>
240    </div>
241    <div class="two columns">
242      <p>140px</p>
243    </div>
244    <div class="two columns">
245      <p>140px</p>
246    </div>
247  </div>
248
249  <div class="row">
250    <div class="three columns">
251      <p>220px</p>
252    </div>
253    <div class="nine columns">
254      <p>700px</p>
255    </div>
256  </div>
257
258  <div class="row">
259    <div class="three columns">
260      <p>220px</p>
261    </div>
262    <div class="three columns">
263      <p>220px</p>
264    </div>
265    <div class="three columns">
266      <p>220px</p>
267    </div>
268    <div class="three columns">
269      <p>220px</p>
270    </div>
271  </div>
272
273  <div class="row">
274    <div class="four columns">
275      <p>300px</p>
276    </div>
277    <div class="eight columns">
278      <p>620px</p>
279    </div>
280  </div>
281
282  <div class="row">
283    <div class="four columns">
284      <p>300px</p>
285    </div>
286    <div class="four columns">
287      <p>300px</p>
288    </div>
289    <div class="four columns">
290      <p>300px</p>
291    </div>
292  </div>
293
294  <div class="row">
295    <div class="five columns">
296      <p>380px</p>
297    </div>
298    <div class="seven columns">
299      <p>540px</p>
300    </div>
301  </div>
302
303  <div class="row">
304    <div class="six columns">
305      <p>460px</p>
306    </div>
307    <div class="six columns">
308      <p>460px</p>
309    </div>
310  </div>
311
312  <!-- Offset Tests -->
313  <div class="row">
314    <div class="twelve columns special">
315      <p>Columns pushed right by 'x'</p>
316    </div>
317  </div>
318  <div class="row">
319    <div class="eleven columns push_one">
320      <p>11 Columns Push 1</p>
321    </div>
322  </div>
323  <div class="row">
324    <div class="one columns">
325      <p>60px</p>
326    </div>
327    <div class="ten columns push_one">
328      <p>10 Columns Push 1</p>
329    </div>
330  </div>
331  <div class="row">
332    <div class="ten columns push_two">
333      <p>10 Columns Push 2</p>
334    </div>
335  </div>
336  <div class="row">
337    <div class="one columns">
338      <p>60px</p>
339    </div>
340    <div class="nine columns push_two">
341      <p>9 Columns Push 2</p>
342    </div>
343  </div>
344  <div class="row">
345    <div class="nine columns push_three">
346      <p>9 Columns Push 3</p>
347    </div>
348  </div>
349  <div class="row">
350    <div class="one columns">
351      <p>60px</p>
352    </div>
353    <div class="eight columns push_three">
354      <p>8 Columns Push 3</p>
355    </div>
356  </div>
357  <div class="row">
358    <div class="eight columns push_four">
359      <p>8 Columns Push 4</p>
360    </div>
361  </div>
362  <div class="row">
363    <div class="one columns">
364      <p>60px</p>
365    </div>
366    <div class="seven columns push_four">
367      <p>7 Columns Push 4</p>
368    </div>
369  </div>
370  <div class="row">
371    <div class="seven columns push_five">
372      <p>7 Columns Push 5</p>
373    </div>
374  </div>
375  <div class="row">
376    <div class="one columns">
377      <p>60px</p>
378    </div>
379    <div class="six columns push_five">
380      <p>6 Columns Push 5</p>
381    </div>
382  </div>
383  <div class="row">
384    <div class="six columns push_six">
385      <p>6 Columns Push 6</p>
386    </div>
387  </div>
388  <div class="row">
389    <div class="one columns">
390      <p>60px</p>
391    </div>
392    <div class="five columns push_six">
393      <p>5 Columns Push 6</p>
394    </div>
395  </div>
396  <div class="row">
397    <div class="five columns push_seven">
398      <p>5 Columns Push 7</p>
399    </div>
400  </div>
401  <div class="row">
402    <div class="one columns">
403      <p>60px</p>
404    </div>
405    <div class="four columns push_seven">
406      <p>4 Columns Push 7</p>
407    </div>
408  </div>
409
410  <div class="row">
411    <div class="four columns push_eight">
412      <p>4 Columns Push 8</p>
413    </div>
414  </div>
415  <div class="row">
416    <div class="one columns">
417      <p>60px</p>
418    </div>
419    <div class="three columns push_eight">
420      <p>3 Col Push 8</p>
421    </div>
422  </div>
423
424  <div class="row">
425    <div class="three columns push_nine">
426      <p>3 Col Push 9</p>
427    </div>
428  </div>
429  <div class="row">
430    <div class="one columns">
431      <p>60px</p>
432    </div>
433    <div class="two columns push_nine">
434      <p>2 - Push 9</p>
435    </div>
436  </div>
437
438
439  <div class="row">
440    <div class="two columns push_ten">
441      <p>2 - Push 10</p>
442    </div>
443  </div>
444  <div class="row">
445    <div class="one columns">
446      <p>60px</p>
447    </div>
448    <div class="one columns push_ten">
449      <p>60px</p>
450    </div>
451  </div>
452
453
454  <div class="row">
455    <div class="one columns push_eleven">
456      <p>60px</p>
457    </div>
458  </div>
459
460  <!-- Offset Tests -->
461  <div class="row">
462    <div class="twelve columns special">
463      <p>Columns pushed and pulled by 'x'</p>
464    </div>
465  </div>
466  <div class="row">
467    <div class="one column push_eleven">
468      <p>1</p>
469    </div>
470    <div class="eleven columns pull_one">
471      <p>11 Columns Pull 1</p>
472    </div>
473  </div>
474  <div class="row">
475    <div class="two columns push_ten">
476      <p>2 Columns</p>
477    </div>
478    <div class="ten columns pull_two">
479      <p>10 Columns Pull 2</p>
480    </div>
481  </div>
482  <div class="row">
483    <div class="three columns push_nine">
484      <p>3 Columns Push 9</p>
485    </div>
486    <div class="nine columns pull_three">
487      <p>9 Columns Pull 3</p>
488    </div>
489  </div>
490  <div class="row">
491    <div class="four columns push_eight">
492      <p>4 Columns Push 8</p>
493    </div>
494    <div class="eight columns pull_four">
495      <p>8 Columns Pull 4</p>
496    </div>
497  </div>
498  <div class="row">
499    <div class="five columns push_seven">
500      <p>5 Columns Push 7</p>
501    </div>
502    <div class="seven columns pull_five">
503      <p>7 Columns Pull 5</p>
504    </div>
505  </div>
506  <div class="row">
507    <div class="six columns push_six">
508      <p>6 Columns Push 6</p>
509    </div>
510    <div class="six columns pull_six">
511      <p>6 Columns Pull 6</p>
512    </div>
513  </div>
514
515
516  <!-- Centering tests -->
517  <div class="row">
518    <div class="twelve columns special">
519      <p>Centered Columns</p>
520    </div>
521  </div>
522
523  <div class="row">
524    <div class="eleven columns centered">
525      <p>11 Columns</p>
526    </div>
527  </div>
528
529  <div class="row">
530    <div class="ten columns centered">
531      <p>10 Columns</p>
532    </div>
533  </div>
534
535  <div class="row">
536    <div class="nine columns centered">
537      <p>9 Columns</p>
538    </div>
539  </div>
540
541  <div class="row">
542    <div class="eight columns centered">
543      <p>8 Columns</p>
544    </div>
545  </div>
546
547  <div class="row">
548    <div class="seven columns centered">
549      <p>7 Columns</p>
550    </div>
551  </div>
552
553  <div class="row">
554    <div class="six columns centered">
555      <p>6 Columns</p>
556    </div>
557  </div>
558
559  <div class="row">
560    <div class="five columns centered">
561      <p>5 Columns</p>
562    </div>
563  </div>
564
565  <div class="row">
566    <div class="four columns centered">
567      <p>4 Columns</p>
568    </div>
569  </div>
570
571  <div class="row">
572    <div class="three columns centered">
573      <p>3 Columns</p>
574    </div>
575  </div>
576
577  <div class="row">
578    <div class="two columns centered">
579      <p>2 Columns</p>
580    </div>
581  </div>
582
583  <div class="row">
584    <div class="one columns centered">
585      <p>1 Col</p>
586    </div>
587  </div>
588
589  <!-- Sixteen Column Grid -->
590  <section class="sixteen colgrid">
591
592    <div class="row">
593      <div class="sixteen columns special">
594        <p>Responsive 16 Column Grid</p>
595      </div>
596    </div>
597
598    <div class="row">
599      <div class="sixteen columns">
600        <p>940px</p>
601      </div>
602    </div>
603
604    <div class="row">
605      <div class="one columns">
606        <p>40</p>
607      </div>
608      <div class="fifteen columns">
609        <p>880px</p>
610      </div>
611    </div>
612
613    <div class="row">
614      <div class="one columns">
615        <p>40</p>
616      </div>
617      <div class="one columns">
618        <p>40</p>
619      </div>
620      <div class="one columns">
621        <p>40</p>
622      </div>
623      <div class="one columns">
624        <p>40</p>
625      </div>
626      <div class="one columns">
627        <p>40</p>
628      </div>
629      <div class="one columns">
630        <p>40</p>
631      </div>
632      <div class="one columns">
633        <p>40</p>
634      </div>
635      <div class="one columns">
636        <p>40</p>
637      </div>
638      <div class="one columns">
639        <p>40</p>
640      </div>
641      <div class="one columns">
642        <p>40</p>
643      </div>
644      <div class="one columns">
645        <p>40</p>
646      </div>
647      <div class="one columns">
648        <p>40</p>
649      </div>
650      <div class="one columns">
651        <p>40</p>
652      </div>
653      <div class="one columns">
654        <p>40</p>
655      </div>
656      <div class="one columns">
657        <p>40</p>
658      </div>
659      <div class="one columns">
660        <p>40</p>
661      </div>
662    </div>
663
664    <div class="row">
665      <div class="two columns">
666        <p>100px</p>
667      </div>
668      <div class="fourteen columns">
669        <p>820px</p>
670      </div>
671    </div>
672
673    <div class="row">
674      <div class="two columns">
675        <p>100px</p>
676      </div>
677      <div class="two columns">
678        <p>100px</p>
679      </div>
680      <div class="two columns">
681        <p>100px</p>
682      </div>
683      <div class="two columns">
684        <p>100px</p>
685      </div>
686      <div class="two columns">
687        <p>100px</p>
688      </div>
689      <div class="two columns">
690        <p>100px</p>
691      </div>
692      <div class="two columns">
693        <p>100px</p>
694      </div>
695      <div class="two columns">
696        <p>100px</p>
697      </div>
698    </div>
699
700    <div class="row">
701      <div class="three columns">
702        <p>160px</p>
703      </div>
704      <div class="thirteen columns">
705        <p>760px</p>
706      </div>
707    </div>
708
709    <div class="row">
710      <div class="three columns">
711        <p>160px</p>
712      </div>
713      <div class="three columns">
714        <p>160px</p>
715      </div>
716      <div class="four columns">
717        <p>220px</p>
718      </div>
719      <div class="three columns">
720        <p>160px</p>
721      </div>
722      <div class="three columns">
723        <p>160px</p>
724      </div>
725    </div>
726
727    <div class="row">
728      <div class="four columns">
729        <p>220px</p>
730      </div>
731      <div class="twelve columns">
732        <p>700px</p>
733      </div>
734    </div>
735
736    <div class="row">
737      <div class="four columns">
738        <p>220px</p>
739      </div>
740      <div class="four columns">
741        <p>220px</p>
742      </div>
743      <div class="four columns">
744        <p>220px</p>
745      </div>
746      <div class="four columns">
747        <p>220px</p>
748      </div>
749    </div>
750
751    <div class="row">
752      <div class="five columns">
753        <p>280px</p>
754      </div>
755      <div class="eleven columns">
756        <p>640px</p>
757      </div>
758    </div>
759
760    <div class="row">
761      <div class="five columns">
762        <p>280px</p>
763      </div>
764      <div class="six columns">
765        <p>340px</p>
766      </div>
767      <div class="five columns">
768        <p>280px</p>
769      </div>
770    </div>
771
772    <div class="row">
773      <div class="six columns">
774        <p>340px</p>
775      </div>
776      <div class="ten columns">
777        <p>580px</p>
778      </div>
779    </div>
780
781    <div class="row">
782      <div class="six columns">
783        <p>340px</p>
784      </div>
785      <div class="four columns">
786        <p>220px</p>
787      </div>
788      <div class="six columns">
789        <p>340px</p>
790      </div>
791    </div>
792
793    <div class="row">
794      <div class="seven columns">
795        <p>400px</p>
796      </div>
797      <div class="nine columns">
798        <p>520px</p>
799      </div>
800    </div>
801
802    <div class="row">
803      <div class="seven columns">
804        <p>400px</p>
805      </div>
806      <div class="two columns">
807        <p>100px</p>
808      </div>
809      <div class="seven columns">
810        <p>400px</p>
811      </div>
812    </div>
813
814    <div class="row">
815      <div class="eight columns">
816        <p>460px</p>
817      </div>
818      <div class="eight columns">
819        <p>460px</p>
820      </div>
821    </div>
822
823    <!-- Offset Tests -->
824    <div class="row">
825      <div class="sixteen columns special">
826        <p>Columns pushed right by 'x'</p>
827      </div>
828    </div>
829    <div class="row">
830        <div class="fifteen columns push_one">
831            <p>15 Columns Push 1</p>
832        </div>
833    </div>
834    <div class="row">
835        <div class="one columns">
836            <p>40px</p>
837        </div>
838        <div class="fourteen columns push_one">
839            <p>14 Columns Push 1</p>
840        </div>
841    </div>
842    <div class="row">
843        <div class="fourteen columns push_two">
844            <p>14 Columns Push 2</p>
845        </div>
846    </div>
847    <div class="row">
848        <div class="one columns">
849            <p>40px</p>
850        </div>
851        <div class="thirteen columns push_two">
852            <p>13 Columns Push 2</p>
853        </div>
854    </div>
855    <div class="row">
856        <div class="thirteen columns push_three">
857            <p>13 Columns Push 3</p>
858        </div>
859    </div>
860    <div class="row">
861        <div class="one columns">
862            <p>40px</p>
863        </div>
864        <div class="twelve columns push_three">
865            <p>12 Columns Push 3</p>
866        </div>
867    </div>
868    <div class="row">
869        <div class="twelve columns push_four">
870            <p>12 Columns Push 4</p>
871        </div>
872    </div>
873    <div class="row">
874        <div class="one columns">
875            <p>40px</p>
876        </div>
877        <div class="eleven columns push_four">
878            <p>11 Columns Push 4</p>
879        </div>
880    </div>
881    <div class="row">
882        <div class="eleven columns push_five">
883            <p>11 Columns Push 5</p>
884        </div>
885    </div>
886    <div class="row">
887      <div class="one columns">
888        <p>40px</p>
889      </div>
890      <div class="ten columns push_five">
891        <p>10 Columns Push 5</p>
892      </div>
893    </div>
894    <div class="row">
895      <div class="ten columns push_six">
896        <p>10 Columns Push 6</p>
897      </div>
898    </div>
899    <div class="row">
900      <div class="one columns">
901        <p>40px</p>
902      </div>
903      <div class="nine columns push_six">
904        <p>9 Columns Push 6</p>
905      </div>
906    </div>
907    <div class="row">
908      <div class="nine columns push_seven">
909        <p>9 Columns Push 7</p>
910      </div>
911    </div>
912    <div class="row">
913      <div class="one columns">
914        <p>40px</p>
915      </div>
916      <div class="eight columns push_seven">
917        <p>8 Columns Push 7</p>
918      </div>
919    </div>
920    <div class="row">
921      <div class="eight columns push_eight">
922        <p>8 Columns Push 8</p>
923      </div>
924    </div>
925    <div class="row">
926      <div class="one columns">
927        <p>40px</p>
928      </div>
929      <div class="seven columns push_eight">
930        <p>7 Columns Push 8</p>
931      </div>
932    </div>
933    <div class="row">
934      <div class="seven columns push_nine">
935        <p>7 Columns Push 9</p>
936      </div>
937    </div>
938    <div class="row">
939      <div class="one columns">
940        <p>40px</p>
941      </div>
942      <div class="six columns push_nine">
943        <p>6 Columns Push 9</p>
944      </div>
945    </div>
946    <div class="row">
947      <div class="six columns push_ten">
948        <p>6 Columns Push 10</p>
949      </div>
950    </div>
951    <div class="row">
952      <div class="one columns">
953        <p>40px</p>
954      </div>
955      <div class="five columns push_ten">
956        <p>5 Columns Push 10</p>
957      </div>
958    </div>
959    <div class="row">
960      <div class="five columns push_eleven">
961        <p>5 Columns Push 11</p>
962      </div>
963    </div>
964    <div class="row">
965      <div class="one columns">
966        <p>40px</p>
967      </div>
968      <div class="four columns push_eleven">
969        <p>4 Columns Push 11</p>
970      </div>
971    </div>
972
973    <div class="row">
974      <div class="four columns push_twelve">
975        <p>4 Columns Push 12</p>
976      </div>
977    </div>
978    <div class="row">
979      <div class="one columns">
980        <p>40px</p>
981      </div>
982      <div class="three columns push_twelve">
983        <p>3 Col Push 12</p>
984      </div>
985    </div>
986
987    <div class="row">
988      <div class="three columns push_thirteen">
989        <p>3 Col Push 13</p>
990      </div>
991    </div>
992    <div class="row">
993      <div class="one columns">
994        <p>40px</p>
995      </div>
996      <div class="two columns push_thirteen">
997        <p>2 - Push 13</p>
998      </div>
999    </div>
1000    <div class="row">
1001      <div class="two columns push_fourteen">
1002        <p>2 - Push 14</p>
1003      </div>
1004    </div>
1005    <div class="row">
1006      <div class="one columns">
1007        <p>40px</p>
1008      </div>
1009      <div class="one columns push_fourteen">
1010        <p>40px</p>
1011      </div>
1012    </div>
1013    <div class="row">
1014      <div class="one columns push_fifteen">
1015        <p>40px</p>
1016      </div>
1017    </div>
1018
1019    <!-- Offset Tests -->
1020    <div class="row">
1021      <div class="sixteen columns special">
1022        <p>Columns pushed and pulled by 'x'</p>
1023      </div>
1024    </div>
1025    <div class="row">
1026      <div class="one column push_fifteen">
1027        <p>1</p>
1028      </div>
1029      <div class="fifteen columns pull_one">
1030        <p>15 Columns Pull 1</p>
1031      </div>
1032    </div>
1033    <div class="row">
1034      <div class="two columns push_fourteen">
1035        <p>2 Col</p>
1036      </div>
1037      <div class="fourteen columns pull_two">
1038        <p>14 Columns Pull 2</p>
1039      </div>
1040    </div>
1041    <div class="row">
1042      <div class="three columns push_thirteen">
1043        <p>3 Col Push 13</p>
1044      </div>
1045      <div class="thirteen columns pull_three">
1046        <p>13 Columns Pull 3</p>
1047      </div>
1048    </div>
1049    <div class="row">
1050      <div class="four columns push_twelve">
1051        <p>4 Columns Push 12</p>
1052      </div>
1053      <div class="twelve columns pull_four">
1054        <p>12 Columns Pull 4</p>
1055      </div>
1056    </div>
1057    <div class="row">
1058      <div class="five columns push_eleven">
1059        <p>5 Columns Push 11</p>
1060      </div>
1061      <div class="eleven columns pull_five">
1062        <p>11 Columns Pull 5</p>
1063      </div>
1064    </div>
1065    <div class="row">
1066      <div class="six columns push_ten">
1067        <p>6 Columns Push 10</p>
1068      </div>
1069      <div class="ten columns pull_six">
1070        <p>10 Columns Pull 6</p>
1071      </div>
1072    </div>
1073    <div class="row">
1074      <div class="seven columns push_nine">
1075        <p>7 Columns Push 9</p>
1076      </div>
1077      <div class="nine columns pull_seven">
1078        <p>9 Columns Pull 7</p>
1079      </div>
1080    </div>
1081    <div class="row">
1082      <div class="eight columns push_eight">
1083        <p>8 Columns Push 8</p>
1084      </div>
1085      <div class="eight columns pull_eight">
1086        <p>8 Columns Pull 8</p>
1087      </div>
1088    </div>
1089
1090    <!-- Centering tests -->
1091    <div class="row">
1092      <div class="sixteen columns special">
1093        <p>Centered Columns</p>
1094      </div>
1095    </div>
1096
1097    <div class="row">
1098      <div class="fifteen columns centered">
1099        <p>15 Columns</p>
1100      </div>
1101    </div>
1102
1103    <div class="row">
1104      <div class="fourteen columns centered">
1105        <p>14 Columns</p>
1106      </div>
1107    </div>
1108
1109    <div class="row">
1110      <div class="thirteen columns centered">
1111        <p>13 Columns</p>
1112      </div>
1113    </div>
1114
1115    <div class="row">
1116      <div class="twelve columns centered">
1117        <p>12 Columns</p>
1118      </div>
1119    </div>
1120
1121    <div class="row">
1122      <div class="eleven columns centered">
1123        <p>11 Columns</p>
1124      </div>
1125    </div>
1126
1127    <div class="row">
1128      <div class="ten columns centered">
1129        <p>10 Columns</p>
1130      </div>
1131    </div>
1132
1133    <div class="row">
1134      <div class="nine columns centered">
1135        <p>9 Columns</p>
1136      </div>
1137    </div>
1138
1139    <div class="row">
1140      <div class="eight columns centered">
1141        <p>8 Columns</p>
1142      </div>
1143    </div>
1144
1145    <div class="row">
1146      <div class="seven columns centered">
1147        <p>7 Columns</p>
1148      </div>
1149    </div>
1150
1151    <div class="row">
1152      <div class="six columns centered">
1153        <p>6 Columns</p>
1154      </div>
1155    </div>
1156
1157    <div class="row">
1158      <div class="five columns centered">
1159        <p>5 Columns</p>
1160      </div>
1161    </div>
1162
1163    <div class="row">
1164      <div class="four columns centered">
1165        <p>4 Columns</p>
1166      </div>
1167    </div>
1168
1169    <div class="row">
1170      <div class="three columns centered">
1171        <p>3 Columns</p>
1172      </div>
1173    </div>
1174
1175    <div class="row">
1176      <div class="two columns centered">
1177        <p>2 Columns</p>
1178      </div>
1179    </div>
1180
1181    <div class="row">
1182      <div class="one columns centered">
1183        <p>1 Col</p>
1184      </div>
1185    </div>
1186
1187  </section>
1188
1189
1190  <!-- Grab Google CDN's jQuery, fall back to local if offline -->
1191  <!-- 2.0 for modern browsers, 1.10 for .oldie -->
1192  <script>
1193  var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
1194  if(!oldieCheck) {
1195    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
1196  } else {
1197    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
1198  }
1199  </script>
1200  <script>
1201  if(!window.jQuery) {
1202    if(!oldieCheck) {
1203      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
1204    } else {
1205      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
1206    }
1207  }
1208  </script>
1209
1210  <!--
1211  Include gumby.js followed by UI modules followed by gumby.init.js
1212  Or concatenate and minify into a single file -->
1213  <script gumby-touch="js/libs" src="js/libs/gumby.js"></script>
1214  <script src="js/libs/ui/gumby.retina.js"></script>
1215  <script src="js/libs/ui/gumby.fixed.js"></script>
1216  <script src="js/libs/ui/gumby.skiplink.js"></script>
1217  <script src="js/libs/ui/gumby.toggleswitch.js"></script>
1218  <script src="js/libs/ui/gumby.checkbox.js"></script>
1219  <script src="js/libs/ui/gumby.radiobtn.js"></script>
1220  <script src="js/libs/ui/gumby.tabs.js"></script>
1221  <script src="js/libs/ui/gumby.navbar.js"></script>
1222  <script src="js/libs/ui/jquery.validation.js"></script>
1223  <script src="js/libs/gumby.init.js"></script>
1224
1225  <!--
1226  Google's recommended deferred loading of JS
1227  gumby.min.js contains gumby.js, all UI modules and gumby.init.js
1228  <script type="text/javascript">
1229  function downloadJSAtOnload() {
1230  var element = document.createElement("script");
1231  element.src = "js/libs/gumby.min.js";
1232  document.body.appendChild(element);
1233  }
1234  if (window.addEventListener)
1235  window.addEventListener("load", downloadJSAtOnload, false);
1236  else if (window.attachEvent)
1237  window.attachEvent("onload", downloadJSAtOnload);
1238  else window.onload = downloadJSAtOnload;
1239  </script> -->
1240
1241  <script src="js/plugins.js"></script>
1242  <script src="js/main.js"></script>
1243
1244  <!-- Change UA-XXXXX-X to be your site's ID -->
1245  <!--<script>
1246  window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
1247  Modernizr.load({
1248    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
1249  });
1250  </script>-->
1251
1252  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
1253     chromium.org/developers/how-tos/chrome-frame-getting-started -->
1254  <!--[if lt IE 7 ]>
1255  <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
1256  <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
1257  <![endif]-->
1258
1259  </body>
1260</html>
1261