Skip to content

Instantly share code, notes, and snippets.

@charlietriplett

charlietriplett/SassMeister-input-HTML.html

Last active January 2, 2016 11:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save charlietriplett/8300690 to your computer and use it in GitHub Desktop.
Save charlietriplett/8300690 to your computer and use it in GitHub Desktop.
Download ZIP
The Grid.
Raw
SassMeister-input-HTML.html
<div class="container">
<div class="span3">
one
</div>
<div class="span3">
one
</div>
<div class="span3">
one
</div>
<div class="span3">
one
</div>
<div class="span8">
8 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car.
<div class="span2 pad alpha">
2 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter.
</div>
<div class="span6 pad omega">
6 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car.
</div>
</div>
<div class="span4 pad">
4 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car.
</div>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$cols: 12;
$gutter: 2%;
$padding: 4%;
$one_col: (100% - ($gutter * ($cols - 1)) - $gutter) / $cols;
$one_padded_col: ((100% - ($gutter * ($cols - 1)) - ($padding * ($cols - 1))) / $cols);
@mixin cols($num) {
width: ($one_col * $num) + ($gutter * ($num - 1));
}
@mixin padded_cols($num) {
width: ($one_col * $num) + ($gutter * ($num - 1)) - $padding ;
padding-left: $padding / 2;
padding-right: $padding / 2;
}
@mixin left_offset_cols($num) {
padding-left: ($padding / 2) + ($one_col * $num) + ($gutter * ($num - 1));
}
@mixin right_offset_cols($num) {
padding-right: ($padding / 2) + ($one_col * $num) + ($gutter * ($num - 1));
}
@mixin sub_cols($num_child, $num_parent) {
$parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));
$child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));
margin-right: ($gutter / $parent_size) * 100% - ($gutter/2);
width: ($child_size / $parent_size) * 100% ;
}
@mixin padded_sub_cols($num_child, $num_parent) {
$parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));
$child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));
padding-left: (100% / $parent_size) * ($padding / 2);
padding-right: (100% / $parent_size) * ($padding / 2);
margin-right: ($gutter / $parent_size) * 100% - ($gutter/2);
width: ($child_size / $parent_size) * 100% - ((100% / $parent_size) * $padding);
}
/* @group grid */
.container {
#{enumerate('.span', 1, $cols, '')} {
float: left;
margin-left: $gutter/2;
margin-right: $gutter/2;
}
@for $i from 1 through $cols {
.span#{$i}.pad {
@include padded_cols($i);
}
}
@for $i from 1 through $cols {
.span#{$i} {
@include cols($i);
}
.span#{$i} {
@for $j from 1 through ($i - 1) {
.span#{$j} {
@include sub_cols($j, $i);
@for $k from 1 through ($j - 1) {
.span#{$k} {
@include sub_cols($k, $j);
}
}
}
}
}
.span#{$i} {
@for $j from 1 through ($i - 1) {
.span#{$j}.pad {
@include padded_sub_cols($j, $i);
}
}
}
}
}
@for $i from 1 through $cols {
.left-offset#{$i} {
@include left_offset_cols($i);
}
}
@for $i from 1 through $cols {
.right-offset#{$i} {
@include right_offset_cols($i);
}
}
@media only screen and (max-width: 720px) {
.container {
#{enumerate('.span', 1, $cols, '')} {
float: left;
margin-left: 4%;
margin-right: 4%;
width: 92%;
}
}
%nested-styles {
float: left;
margin-left: 0%;
margin-right: 0%;
width: 100%;
}
.container {
@for $i from 1 through $cols {
.span#{$i} {
@for $i from 1 through ($i - 1) {
.span#{$i} {
@extend %nested-styles;
}
}
}
}
}
.container {
#{enumerate('.pad.span', 1, $cols, '')} {
float: left;
margin-left: 4%;
margin-right: 4%;
padding-left: 2%;
padding-right: 2%;
width: 88%!important;
}
}
%padded-styles {
float: left;
padding-left: 4%;
padding-right: 4%;
margin-left: 0%;
margin-right: 0%;
width: 92%!important;
}
.container {
@for $i from 1 through $cols {
.span#{$i} {
@for $i from 1 through ($i - 1) {
.span#{$i}.pad {
@extend %padded-styles;
}
}
}
}
}
}
.alpha {
margin-left: 0 !important;
}
.omega {
margin-right: 0 !important;
}
.container {
margin: 0 auto;
max-width: 1120px;
}
.one-third {
width: 30% !important;
margin-right: 4% !important;
}
.two-thirds {
width: 66% !important;
}
/* @end */
Raw
SassMeister-output.css
/* @group grid */
.container .span1, .container .span2, .container .span3, .container .span4, .container .span5, .container .span6, .container .span7, .container .span8, .container .span9, .container .span10, .container .span11, .container .span12 { float: left; margin-left: 1%; margin-right: 1%; }
.container .span1.pad { width: 2.33333%; padding-left: 2%; padding-right: 2%; }
.container .span2.pad { width: 10.66667%; padding-left: 2%; padding-right: 2%; }
.container .span3.pad { width: 19%; padding-left: 2%; padding-right: 2%; }
.container .span4.pad { width: 27.33333%; padding-left: 2%; padding-right: 2%; }
.container .span5.pad { width: 35.66667%; padding-left: 2%; padding-right: 2%; }
.container .span6.pad { width: 44%; padding-left: 2%; padding-right: 2%; }
.container .span7.pad { width: 52.33333%; padding-left: 2%; padding-right: 2%; }
.container .span8.pad { width: 60.66667%; padding-left: 2%; padding-right: 2%; }
.container .span9.pad { width: 69%; padding-left: 2%; padding-right: 2%; }
.container .span10.pad { width: 77.33333%; padding-left: 2%; padding-right: 2%; }
.container .span11.pad { width: 85.66667%; padding-left: 2%; padding-right: 2%; }
.container .span12.pad { width: 94%; padding-left: 2%; padding-right: 2%; }
.container .span1 { width: 6.33333%; }
.container .span2 { width: 14.66667%; }
.container .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span2 .span1.pad { padding-left: 13.63636%; padding-right: 13.63636%; margin-right: 12.63636%; width: 15.90909%; }
.container .span3 { width: 23%; }
.container .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span3 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span3 .span1.pad { padding-left: 8.69565%; padding-right: 8.69565%; margin-right: 7.69565%; width: 10.14493%; }
.container .span3 .span2.pad { padding-left: 8.69565%; padding-right: 8.69565%; margin-right: 7.69565%; width: 46.37681%; }
.container .span4 { width: 31.33333%; }
.container .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span4 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span4 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span4 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span4 .span1.pad { padding-left: 6.38298%; padding-right: 6.38298%; margin-right: 5.38298%; width: 7.44681%; }
.container .span4 .span2.pad { padding-left: 6.38298%; padding-right: 6.38298%; margin-right: 5.38298%; width: 34.04255%; }
.container .span4 .span3.pad { padding-left: 6.38298%; padding-right: 6.38298%; margin-right: 5.38298%; width: 60.6383%; }
.container .span5 { width: 39.66667%; }
.container .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span5 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span5 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span5 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span5 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span5 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span5 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span5 .span1.pad { padding-left: 5.04202%; padding-right: 5.04202%; margin-right: 4.04202%; width: 5.88235%; }
.container .span5 .span2.pad { padding-left: 5.04202%; padding-right: 5.04202%; margin-right: 4.04202%; width: 26.89076%; }
.container .span5 .span3.pad { padding-left: 5.04202%; padding-right: 5.04202%; margin-right: 4.04202%; width: 47.89916%; }
.container .span5 .span4.pad { padding-left: 5.04202%; padding-right: 5.04202%; margin-right: 4.04202%; width: 68.90756%; }
.container .span6 { width: 48%; }
.container .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span6 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span6 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span6 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span6 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span6 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span6 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span6 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span6 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span6 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span6 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span6 .span1.pad { padding-left: 4.16667%; padding-right: 4.16667%; margin-right: 3.16667%; width: 4.86111%; }
.container .span6 .span2.pad { padding-left: 4.16667%; padding-right: 4.16667%; margin-right: 3.16667%; width: 22.22222%; }
.container .span6 .span3.pad { padding-left: 4.16667%; padding-right: 4.16667%; margin-right: 3.16667%; width: 39.58333%; }
.container .span6 .span4.pad { padding-left: 4.16667%; padding-right: 4.16667%; margin-right: 3.16667%; width: 56.94444%; }
.container .span6 .span5.pad { padding-left: 4.16667%; padding-right: 4.16667%; margin-right: 3.16667%; width: 74.30556%; }
.container .span7 { width: 56.33333%; }
.container .span7 .span1 { margin-right: 2.5503%; width: 11.2426%; }
.container .span7 .span2 { margin-right: 2.5503%; width: 26.0355%; }
.container .span7 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span7 .span3 { margin-right: 2.5503%; width: 40.8284%; }
.container .span7 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span7 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span7 .span4 { margin-right: 2.5503%; width: 55.6213%; }
.container .span7 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span7 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span7 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span7 .span5 { margin-right: 2.5503%; width: 70.4142%; }
.container .span7 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span7 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span7 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span7 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span7 .span6 { margin-right: 2.5503%; width: 85.2071%; }
.container .span7 .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span7 .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span7 .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span7 .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span7 .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span7 .span1.pad { padding-left: 3.5503%; padding-right: 3.5503%; margin-right: 2.5503%; width: 4.14201%; }
.container .span7 .span2.pad { padding-left: 3.5503%; padding-right: 3.5503%; margin-right: 2.5503%; width: 18.93491%; }
.container .span7 .span3.pad { padding-left: 3.5503%; padding-right: 3.5503%; margin-right: 2.5503%; width: 33.72781%; }
.container .span7 .span4.pad { padding-left: 3.5503%; padding-right: 3.5503%; margin-right: 2.5503%; width: 48.52071%; }
.container .span7 .span5.pad { padding-left: 3.5503%; padding-right: 3.5503%; margin-right: 2.5503%; width: 63.31361%; }
.container .span7 .span6.pad { padding-left: 3.5503%; padding-right: 3.5503%; margin-right: 2.5503%; width: 78.10651%; }
.container .span8 { width: 64.66667%; }
.container .span8 .span1 { margin-right: 2.09278%; width: 9.79381%; }
.container .span8 .span2 { margin-right: 2.09278%; width: 22.68041%; }
.container .span8 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span8 .span3 { margin-right: 2.09278%; width: 35.56701%; }
.container .span8 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span8 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span8 .span4 { margin-right: 2.09278%; width: 48.45361%; }
.container .span8 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span8 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span8 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span8 .span5 { margin-right: 2.09278%; width: 61.34021%; }
.container .span8 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span8 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span8 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span8 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span8 .span6 { margin-right: 2.09278%; width: 74.2268%; }
.container .span8 .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span8 .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span8 .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span8 .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span8 .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span8 .span7 { margin-right: 2.09278%; width: 87.1134%; }
.container .span8 .span7 .span1 { margin-right: 2.5503%; width: 11.2426%; }
.container .span8 .span7 .span2 { margin-right: 2.5503%; width: 26.0355%; }
.container .span8 .span7 .span3 { margin-right: 2.5503%; width: 40.8284%; }
.container .span8 .span7 .span4 { margin-right: 2.5503%; width: 55.6213%; }
.container .span8 .span7 .span5 { margin-right: 2.5503%; width: 70.4142%; }
.container .span8 .span7 .span6 { margin-right: 2.5503%; width: 85.2071%; }
.container .span8 .span1.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 3.60825%; }
.container .span8 .span2.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 16.49485%; }
.container .span8 .span3.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 29.38144%; }
.container .span8 .span4.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 42.26804%; }
.container .span8 .span5.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 55.15464%; }
.container .span8 .span6.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 68.04124%; }
.container .span8 .span7.pad { padding-left: 3.09278%; padding-right: 3.09278%; margin-right: 2.09278%; width: 80.92784%; }
.container .span9 { width: 73%; }
.container .span9 .span1 { margin-right: 1.73973%; width: 8.6758%; }
.container .span9 .span2 { margin-right: 1.73973%; width: 20.09132%; }
.container .span9 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span9 .span3 { margin-right: 1.73973%; width: 31.50685%; }
.container .span9 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span9 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span9 .span4 { margin-right: 1.73973%; width: 42.92237%; }
.container .span9 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span9 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span9 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span9 .span5 { margin-right: 1.73973%; width: 54.3379%; }
.container .span9 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span9 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span9 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span9 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span9 .span6 { margin-right: 1.73973%; width: 65.75342%; }
.container .span9 .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span9 .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span9 .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span9 .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span9 .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span9 .span7 { margin-right: 1.73973%; width: 77.16895%; }
.container .span9 .span7 .span1 { margin-right: 2.5503%; width: 11.2426%; }
.container .span9 .span7 .span2 { margin-right: 2.5503%; width: 26.0355%; }
.container .span9 .span7 .span3 { margin-right: 2.5503%; width: 40.8284%; }
.container .span9 .span7 .span4 { margin-right: 2.5503%; width: 55.6213%; }
.container .span9 .span7 .span5 { margin-right: 2.5503%; width: 70.4142%; }
.container .span9 .span7 .span6 { margin-right: 2.5503%; width: 85.2071%; }
.container .span9 .span8 { margin-right: 1.73973%; width: 88.58447%; }
.container .span9 .span8 .span1 { margin-right: 2.09278%; width: 9.79381%; }
.container .span9 .span8 .span2 { margin-right: 2.09278%; width: 22.68041%; }
.container .span9 .span8 .span3 { margin-right: 2.09278%; width: 35.56701%; }
.container .span9 .span8 .span4 { margin-right: 2.09278%; width: 48.45361%; }
.container .span9 .span8 .span5 { margin-right: 2.09278%; width: 61.34021%; }
.container .span9 .span8 .span6 { margin-right: 2.09278%; width: 74.2268%; }
.container .span9 .span8 .span7 { margin-right: 2.09278%; width: 87.1134%; }
.container .span9 .span1.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 3.19635%; }
.container .span9 .span2.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 14.61187%; }
.container .span9 .span3.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 26.0274%; }
.container .span9 .span4.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 37.44292%; }
.container .span9 .span5.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 48.85845%; }
.container .span9 .span6.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 60.27397%; }
.container .span9 .span7.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 71.6895%; }
.container .span9 .span8.pad { padding-left: 2.73973%; padding-right: 2.73973%; margin-right: 1.73973%; width: 83.10502%; }
.container .span10 { width: 81.33333%; }
.container .span10 .span1 { margin-right: 1.45902%; width: 7.78689%; }
.container .span10 .span2 { margin-right: 1.45902%; width: 18.03279%; }
.container .span10 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span10 .span3 { margin-right: 1.45902%; width: 28.27869%; }
.container .span10 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span10 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span10 .span4 { margin-right: 1.45902%; width: 38.52459%; }
.container .span10 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span10 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span10 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span10 .span5 { margin-right: 1.45902%; width: 48.77049%; }
.container .span10 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span10 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span10 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span10 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span10 .span6 { margin-right: 1.45902%; width: 59.01639%; }
.container .span10 .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span10 .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span10 .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span10 .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span10 .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span10 .span7 { margin-right: 1.45902%; width: 69.2623%; }
.container .span10 .span7 .span1 { margin-right: 2.5503%; width: 11.2426%; }
.container .span10 .span7 .span2 { margin-right: 2.5503%; width: 26.0355%; }
.container .span10 .span7 .span3 { margin-right: 2.5503%; width: 40.8284%; }
.container .span10 .span7 .span4 { margin-right: 2.5503%; width: 55.6213%; }
.container .span10 .span7 .span5 { margin-right: 2.5503%; width: 70.4142%; }
.container .span10 .span7 .span6 { margin-right: 2.5503%; width: 85.2071%; }
.container .span10 .span8 { margin-right: 1.45902%; width: 79.5082%; }
.container .span10 .span8 .span1 { margin-right: 2.09278%; width: 9.79381%; }
.container .span10 .span8 .span2 { margin-right: 2.09278%; width: 22.68041%; }
.container .span10 .span8 .span3 { margin-right: 2.09278%; width: 35.56701%; }
.container .span10 .span8 .span4 { margin-right: 2.09278%; width: 48.45361%; }
.container .span10 .span8 .span5 { margin-right: 2.09278%; width: 61.34021%; }
.container .span10 .span8 .span6 { margin-right: 2.09278%; width: 74.2268%; }
.container .span10 .span8 .span7 { margin-right: 2.09278%; width: 87.1134%; }
.container .span10 .span9 { margin-right: 1.45902%; width: 89.7541%; }
.container .span10 .span9 .span1 { margin-right: 1.73973%; width: 8.6758%; }
.container .span10 .span9 .span2 { margin-right: 1.73973%; width: 20.09132%; }
.container .span10 .span9 .span3 { margin-right: 1.73973%; width: 31.50685%; }
.container .span10 .span9 .span4 { margin-right: 1.73973%; width: 42.92237%; }
.container .span10 .span9 .span5 { margin-right: 1.73973%; width: 54.3379%; }
.container .span10 .span9 .span6 { margin-right: 1.73973%; width: 65.75342%; }
.container .span10 .span9 .span7 { margin-right: 1.73973%; width: 77.16895%; }
.container .span10 .span9 .span8 { margin-right: 1.73973%; width: 88.58447%; }
.container .span10 .span1.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 2.86885%; }
.container .span10 .span2.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 13.11475%; }
.container .span10 .span3.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 23.36066%; }
.container .span10 .span4.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 33.60656%; }
.container .span10 .span5.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 43.85246%; }
.container .span10 .span6.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 54.09836%; }
.container .span10 .span7.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 64.34426%; }
.container .span10 .span8.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 74.59016%; }
.container .span10 .span9.pad { padding-left: 2.45902%; padding-right: 2.45902%; margin-right: 1.45902%; width: 84.83607%; }
.container .span11 { width: 89.66667%; }
.container .span11 .span1 { margin-right: 1.23048%; width: 7.0632%; }
.container .span11 .span2 { margin-right: 1.23048%; width: 16.35688%; }
.container .span11 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span11 .span3 { margin-right: 1.23048%; width: 25.65056%; }
.container .span11 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span11 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span11 .span4 { margin-right: 1.23048%; width: 34.94424%; }
.container .span11 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span11 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span11 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span11 .span5 { margin-right: 1.23048%; width: 44.23792%; }
.container .span11 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span11 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span11 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span11 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span11 .span6 { margin-right: 1.23048%; width: 53.5316%; }
.container .span11 .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span11 .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span11 .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span11 .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span11 .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span11 .span7 { margin-right: 1.23048%; width: 62.82528%; }
.container .span11 .span7 .span1 { margin-right: 2.5503%; width: 11.2426%; }
.container .span11 .span7 .span2 { margin-right: 2.5503%; width: 26.0355%; }
.container .span11 .span7 .span3 { margin-right: 2.5503%; width: 40.8284%; }
.container .span11 .span7 .span4 { margin-right: 2.5503%; width: 55.6213%; }
.container .span11 .span7 .span5 { margin-right: 2.5503%; width: 70.4142%; }
.container .span11 .span7 .span6 { margin-right: 2.5503%; width: 85.2071%; }
.container .span11 .span8 { margin-right: 1.23048%; width: 72.11896%; }
.container .span11 .span8 .span1 { margin-right: 2.09278%; width: 9.79381%; }
.container .span11 .span8 .span2 { margin-right: 2.09278%; width: 22.68041%; }
.container .span11 .span8 .span3 { margin-right: 2.09278%; width: 35.56701%; }
.container .span11 .span8 .span4 { margin-right: 2.09278%; width: 48.45361%; }
.container .span11 .span8 .span5 { margin-right: 2.09278%; width: 61.34021%; }
.container .span11 .span8 .span6 { margin-right: 2.09278%; width: 74.2268%; }
.container .span11 .span8 .span7 { margin-right: 2.09278%; width: 87.1134%; }
.container .span11 .span9 { margin-right: 1.23048%; width: 81.41264%; }
.container .span11 .span9 .span1 { margin-right: 1.73973%; width: 8.6758%; }
.container .span11 .span9 .span2 { margin-right: 1.73973%; width: 20.09132%; }
.container .span11 .span9 .span3 { margin-right: 1.73973%; width: 31.50685%; }
.container .span11 .span9 .span4 { margin-right: 1.73973%; width: 42.92237%; }
.container .span11 .span9 .span5 { margin-right: 1.73973%; width: 54.3379%; }
.container .span11 .span9 .span6 { margin-right: 1.73973%; width: 65.75342%; }
.container .span11 .span9 .span7 { margin-right: 1.73973%; width: 77.16895%; }
.container .span11 .span9 .span8 { margin-right: 1.73973%; width: 88.58447%; }
.container .span11 .span10 { margin-right: 1.23048%; width: 90.70632%; }
.container .span11 .span10 .span1 { margin-right: 1.45902%; width: 7.78689%; }
.container .span11 .span10 .span2 { margin-right: 1.45902%; width: 18.03279%; }
.container .span11 .span10 .span3 { margin-right: 1.45902%; width: 28.27869%; }
.container .span11 .span10 .span4 { margin-right: 1.45902%; width: 38.52459%; }
.container .span11 .span10 .span5 { margin-right: 1.45902%; width: 48.77049%; }
.container .span11 .span10 .span6 { margin-right: 1.45902%; width: 59.01639%; }
.container .span11 .span10 .span7 { margin-right: 1.45902%; width: 69.2623%; }
.container .span11 .span10 .span8 { margin-right: 1.45902%; width: 79.5082%; }
.container .span11 .span10 .span9 { margin-right: 1.45902%; width: 89.7541%; }
.container .span11 .span1.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 2.60223%; }
.container .span11 .span2.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 11.89591%; }
.container .span11 .span3.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 21.18959%; }
.container .span11 .span4.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 30.48327%; }
.container .span11 .span5.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 39.77695%; }
.container .span11 .span6.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 49.07063%; }
.container .span11 .span7.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 58.36431%; }
.container .span11 .span8.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 67.65799%; }
.container .span11 .span9.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 76.95167%; }
.container .span11 .span10.pad { padding-left: 2.23048%; padding-right: 2.23048%; margin-right: 1.23048%; width: 86.24535%; }
.container .span12 { width: 98%; }
.container .span12 .span1 { margin-right: 1.04082%; width: 6.46259%; }
.container .span12 .span2 { margin-right: 1.04082%; width: 14.96599%; }
.container .span12 .span2 .span1 { margin-right: 12.63636%; width: 43.18182%; }
.container .span12 .span3 { margin-right: 1.04082%; width: 23.46939%; }
.container .span12 .span3 .span1 { margin-right: 7.69565%; width: 27.53623%; }
.container .span12 .span3 .span2 { margin-right: 7.69565%; width: 63.76812%; }
.container .span12 .span4 { margin-right: 1.04082%; width: 31.97279%; }
.container .span12 .span4 .span1 { margin-right: 5.38298%; width: 20.21277%; }
.container .span12 .span4 .span2 { margin-right: 5.38298%; width: 46.80851%; }
.container .span12 .span4 .span3 { margin-right: 5.38298%; width: 73.40426%; }
.container .span12 .span5 { margin-right: 1.04082%; width: 40.47619%; }
.container .span12 .span5 .span1 { margin-right: 4.04202%; width: 15.96639%; }
.container .span12 .span5 .span2 { margin-right: 4.04202%; width: 36.97479%; }
.container .span12 .span5 .span3 { margin-right: 4.04202%; width: 57.98319%; }
.container .span12 .span5 .span4 { margin-right: 4.04202%; width: 78.9916%; }
.container .span12 .span6 { margin-right: 1.04082%; width: 48.97959%; }
.container .span12 .span6 .span1 { margin-right: 3.16667%; width: 13.19444%; }
.container .span12 .span6 .span2 { margin-right: 3.16667%; width: 30.55556%; }
.container .span12 .span6 .span3 { margin-right: 3.16667%; width: 47.91667%; }
.container .span12 .span6 .span4 { margin-right: 3.16667%; width: 65.27778%; }
.container .span12 .span6 .span5 { margin-right: 3.16667%; width: 82.63889%; }
.container .span12 .span7 { margin-right: 1.04082%; width: 57.48299%; }
.container .span12 .span7 .span1 { margin-right: 2.5503%; width: 11.2426%; }
.container .span12 .span7 .span2 { margin-right: 2.5503%; width: 26.0355%; }
.container .span12 .span7 .span3 { margin-right: 2.5503%; width: 40.8284%; }
.container .span12 .span7 .span4 { margin-right: 2.5503%; width: 55.6213%; }
.container .span12 .span7 .span5 { margin-right: 2.5503%; width: 70.4142%; }
.container .span12 .span7 .span6 { margin-right: 2.5503%; width: 85.2071%; }
.container .span12 .span8 { margin-right: 1.04082%; width: 65.98639%; }
.container .span12 .span8 .span1 { margin-right: 2.09278%; width: 9.79381%; }
.container .span12 .span8 .span2 { margin-right: 2.09278%; width: 22.68041%; }
.container .span12 .span8 .span3 { margin-right: 2.09278%; width: 35.56701%; }
.container .span12 .span8 .span4 { margin-right: 2.09278%; width: 48.45361%; }
.container .span12 .span8 .span5 { margin-right: 2.09278%; width: 61.34021%; }
.container .span12 .span8 .span6 { margin-right: 2.09278%; width: 74.2268%; }
.container .span12 .span8 .span7 { margin-right: 2.09278%; width: 87.1134%; }
.container .span12 .span9 { margin-right: 1.04082%; width: 74.4898%; }
.container .span12 .span9 .span1 { margin-right: 1.73973%; width: 8.6758%; }
.container .span12 .span9 .span2 { margin-right: 1.73973%; width: 20.09132%; }
.container .span12 .span9 .span3 { margin-right: 1.73973%; width: 31.50685%; }
.container .span12 .span9 .span4 { margin-right: 1.73973%; width: 42.92237%; }
.container .span12 .span9 .span5 { margin-right: 1.73973%; width: 54.3379%; }
.container .span12 .span9 .span6 { margin-right: 1.73973%; width: 65.75342%; }
.container .span12 .span9 .span7 { margin-right: 1.73973%; width: 77.16895%; }
.container .span12 .span9 .span8 { margin-right: 1.73973%; width: 88.58447%; }
.container .span12 .span10 { margin-right: 1.04082%; width: 82.9932%; }
.container .span12 .span10 .span1 { margin-right: 1.45902%; width: 7.78689%; }
.container .span12 .span10 .span2 { margin-right: 1.45902%; width: 18.03279%; }
.container .span12 .span10 .span3 { margin-right: 1.45902%; width: 28.27869%; }
.container .span12 .span10 .span4 { margin-right: 1.45902%; width: 38.52459%; }
.container .span12 .span10 .span5 { margin-right: 1.45902%; width: 48.77049%; }
.container .span12 .span10 .span6 { margin-right: 1.45902%; width: 59.01639%; }
.container .span12 .span10 .span7 { margin-right: 1.45902%; width: 69.2623%; }
.container .span12 .span10 .span8 { margin-right: 1.45902%; width: 79.5082%; }
.container .span12 .span10 .span9 { margin-right: 1.45902%; width: 89.7541%; }
.container .span12 .span11 { margin-right: 1.04082%; width: 91.4966%; }
.container .span12 .span11 .span1 { margin-right: 1.23048%; width: 7.0632%; }
.container .span12 .span11 .span2 { margin-right: 1.23048%; width: 16.35688%; }
.container .span12 .span11 .span3 { margin-right: 1.23048%; width: 25.65056%; }
.container .span12 .span11 .span4 { margin-right: 1.23048%; width: 34.94424%; }
.container .span12 .span11 .span5 { margin-right: 1.23048%; width: 44.23792%; }
.container .span12 .span11 .span6 { margin-right: 1.23048%; width: 53.5316%; }
.container .span12 .span11 .span7 { margin-right: 1.23048%; width: 62.82528%; }
.container .span12 .span11 .span8 { margin-right: 1.23048%; width: 72.11896%; }
.container .span12 .span11 .span9 { margin-right: 1.23048%; width: 81.41264%; }
.container .span12 .span11 .span10 { margin-right: 1.23048%; width: 90.70632%; }
.container .span12 .span1.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 2.38095%; }
.container .span12 .span2.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 10.88435%; }
.container .span12 .span3.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 19.38776%; }
.container .span12 .span4.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 27.89116%; }
.container .span12 .span5.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 36.39456%; }
.container .span12 .span6.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 44.89796%; }
.container .span12 .span7.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 53.40136%; }
.container .span12 .span8.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 61.90476%; }
.container .span12 .span9.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 70.40816%; }
.container .span12 .span10.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 78.91156%; }
.container .span12 .span11.pad { padding-left: 2.04082%; padding-right: 2.04082%; margin-right: 1.04082%; width: 87.41497%; }
.left-offset1 { padding-left: 8.33333%; }
.left-offset2 { padding-left: 16.66667%; }
.left-offset3 { padding-left: 25%; }
.left-offset4 { padding-left: 33.33333%; }
.left-offset5 { padding-left: 41.66667%; }
.left-offset6 { padding-left: 50%; }
.left-offset7 { padding-left: 58.33333%; }
.left-offset8 { padding-left: 66.66667%; }
.left-offset9 { padding-left: 75%; }
.left-offset10 { padding-left: 83.33333%; }
.left-offset11 { padding-left: 91.66667%; }
.left-offset12 { padding-left: 100%; }
.right-offset1 { padding-right: 8.33333%; }
.right-offset2 { padding-right: 16.66667%; }
.right-offset3 { padding-right: 25%; }
.right-offset4 { padding-right: 33.33333%; }
.right-offset5 { padding-right: 41.66667%; }
.right-offset6 { padding-right: 50%; }
.right-offset7 { padding-right: 58.33333%; }
.right-offset8 { padding-right: 66.66667%; }
.right-offset9 { padding-right: 75%; }
.right-offset10 { padding-right: 83.33333%; }
.right-offset11 { padding-right: 91.66667%; }
.right-offset12 { padding-right: 100%; }
@media only screen and (max-width: 720px) { .container .span1, .container .span2, .container .span3, .container .span4, .container .span5, .container .span6, .container .span7, .container .span8, .container .span9, .container .span10, .container .span11, .container .span12 { float: left; margin-left: 4%; margin-right: 4%; width: 92%; }
.container .span2 .span1, .container .span3 .span1, .container .span3 .span2, .container .span4 .span1, .container .span4 .span2, .container .span4 .span3, .container .span5 .span1, .container .span5 .span2, .container .span5 .span3, .container .span5 .span4, .container .span6 .span1, .container .span6 .span2, .container .span6 .span3, .container .span6 .span4, .container .span6 .span5, .container .span7 .span1, .container .span7 .span2, .container .span7 .span3, .container .span7 .span4, .container .span7 .span5, .container .span7 .span6, .container .span8 .span1, .container .span8 .span2, .container .span8 .span3, .container .span8 .span4, .container .span8 .span5, .container .span8 .span6, .container .span8 .span7, .container .span9 .span1, .container .span9 .span2, .container .span9 .span3, .container .span9 .span4, .container .span9 .span5, .container .span9 .span6, .container .span9 .span7, .container .span9 .span8, .container .span10 .span1, .container .span10 .span2, .container .span10 .span3, .container .span10 .span4, .container .span10 .span5, .container .span10 .span6, .container .span10 .span7, .container .span10 .span8, .container .span10 .span9, .container .span11 .span1, .container .span11 .span2, .container .span11 .span3, .container .span11 .span4, .container .span11 .span5, .container .span11 .span6, .container .span11 .span7, .container .span11 .span8, .container .span11 .span9, .container .span11 .span10, .container .span12 .span1, .container .span12 .span2, .container .span12 .span3, .container .span12 .span4, .container .span12 .span5, .container .span12 .span6, .container .span12 .span7, .container .span12 .span8, .container .span12 .span9, .container .span12 .span10, .container .span12 .span11 { float: left; margin-left: 0%; margin-right: 0%; width: 100%; }
.container .pad.span1, .container .pad.span2, .container .pad.span3, .container .pad.span4, .container .pad.span5, .container .pad.span6, .container .pad.span7, .container .pad.span8, .container .pad.span9, .container .pad.span10, .container .pad.span11, .container .pad.span12 { float: left; margin-left: 4%; margin-right: 4%; padding-left: 2%; padding-right: 2%; width: 88% !important; }
.container .span2 .span1.pad, .container .span3 .span1.pad, .container .span3 .span2.pad, .container .span4 .span1.pad, .container .span4 .span2.pad, .container .span4 .span3.pad, .container .span5 .span1.pad, .container .span5 .span2.pad, .container .span5 .span3.pad, .container .span5 .span4.pad, .container .span6 .span1.pad, .container .span6 .span2.pad, .container .span6 .span3.pad, .container .span6 .span4.pad, .container .span6 .span5.pad, .container .span7 .span1.pad, .container .span7 .span2.pad, .container .span7 .span3.pad, .container .span7 .span4.pad, .container .span7 .span5.pad, .container .span7 .span6.pad, .container .span8 .span1.pad, .container .span8 .span2.pad, .container .span8 .span3.pad, .container .span8 .span4.pad, .container .span8 .span5.pad, .container .span8 .span6.pad, .container .span8 .span7.pad, .container .span9 .span1.pad, .container .span9 .span2.pad, .container .span9 .span3.pad, .container .span9 .span4.pad, .container .span9 .span5.pad, .container .span9 .span6.pad, .container .span9 .span7.pad, .container .span9 .span8.pad, .container .span10 .span1.pad, .container .span10 .span2.pad, .container .span10 .span3.pad, .container .span10 .span4.pad, .container .span10 .span5.pad, .container .span10 .span6.pad, .container .span10 .span7.pad, .container .span10 .span8.pad, .container .span10 .span9.pad, .container .span11 .span1.pad, .container .span11 .span2.pad, .container .span11 .span3.pad, .container .span11 .span4.pad, .container .span11 .span5.pad, .container .span11 .span6.pad, .container .span11 .span7.pad, .container .span11 .span8.pad, .container .span11 .span9.pad, .container .span11 .span10.pad, .container .span12 .span1.pad, .container .span12 .span2.pad, .container .span12 .span3.pad, .container .span12 .span4.pad, .container .span12 .span5.pad, .container .span12 .span6.pad, .container .span12 .span7.pad, .container .span12 .span8.pad, .container .span12 .span9.pad, .container .span12 .span10.pad, .container .span12 .span11.pad { float: left; padding-left: 4%; padding-right: 4%; margin-left: 0%; margin-right: 0%; width: 92% !important; } }
.alpha { margin-left: 0 !important; }
.omega { margin-right: 0 !important; }
.container { margin: 0 auto; max-width: 1120px; }
.one-third { width: 30% !important; margin-right: 4% !important; }
.two-thirds { width: 66% !important; }
/* @end */
Raw
SassMeister-rendered.html
<div class="container">
<div class="span3">
one
</div>
<div class="span3">
one
</div>
<div class="span3">
one
</div>
<div class="span3">
one
</div>
<div class="span8">
8 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car.
<div class="span2 pad alpha">
2 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter.
</div>
<div class="span6 pad omega">
6 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car.
</div>
</div>
<div class="span4 pad">
4 I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! We don't have a brig. Why, those are the Grunka-Lunkas! They work here in the Slurm factory. OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I'm Santa Claus! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car.
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment