Skip to content

Instantly share code, notes, and snippets.

@ianrose

ianrose/SassMeister-input-HTML.html

Created June 13, 2014 19:45
Show Gist options
  • Save ianrose/2bfe627e00c54fb2b4ea to your computer and use it in GitHub Desktop.
Save ianrose/2bfe627e00c54fb2b4ea to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class='grid_panel-ad'>
<div class='container'>
grid_panel-ad
<div class='row'>
<div class='col-md-7'>
<div class='content'>Top Story</div>
</div>
<div class='col-md-4'>
<div class='content'>Headlines</div>
</div>
<div class='col-md-4 col-sans-gutters'>
<div class='ad'><img src="http://placehold.it/300x250"></div>
</div>
</div>
</div>
</div>
<div class="grid_panel">
<div class='container'>
grid_panel
<div class='row'>
<div class='col-md-6'>
<div class='content'>Top Story</div>
</div>
<div class='col-md-3'>
<div class='content'>Headlines</div>
</div>
<div class='col-md-3'>
<div class='content'>Headlines</div>
</div>
</div>
</div>
<div class='grid_panel'>
<div class='container'>
grid_panel
<div class='row'>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
</div>
<div class='row'>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
</div>
<div class='row'>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='content'>col-md-4</div>
</div>
<div class='col-md-4'>
<div class='content'>col-md-4</div>
</div>
<div class='col-md-4'>
<div class='content'>col-md-4</div>
</div>
</div>
<div class='row'>
<div class='col-md-5'>
<div class='content'>col-md-5</div>
</div>
<div class='col-md-5 col-md-offset-2'>
<div class='content'>col-md-offset-5</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='content'>col-md-6</div>
</div>
<div class='col-md-6'>
<div class='content'>col-md-6</div>
</div>
</div>
<div class='row'>
<div class='col-md-7'>
<div class='content'>col-md-7</div>
</div>
<div class='col-md-5'>
<div class='content'>col-md-5</div>
</div>
</div>
<div class='row'>
<div class='col-md-8 col-md-offset-2'>
<div class='content'>col-md-8 col-md-offset-2</div>
</div>
</div>
<div class='row'>
<div class='col-md-9'>
<div class='content'>col-md-9</div>
</div>
</div>
<div class='row'>
<div class='col-md-10'>
<div class='content'>col-md-10</div>
</div>
</div>
<div class='row'>
<div class='col-md-11'>
<div class='content'>col-md-11</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<div class='content'>col-md-12</div>
</div>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v0.8.6)
// ----
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
@mixin grid-system(
$screen-xs-min: 480px,
$screen-sm-min: 768px,
$screen-md-min: 992px,
$screen-lg-min: 1200px,
$screen-xs-max: ($screen-sm-min -1),
$screen-sm-max: ($screen-md-min - 1),
$screen-md-max: ($screen-lg-min - 1),
$grid-columns: 12,
$grid-gutter-width: 30px,
$grid-float-breakpoint: 768px,
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1),
$container-sm-width: 720px,
$container-md-width: 940px,
$container-lg-width: 1200px
) {
// Grid system
//
$container-sm: (($container-sm-width + $grid-gutter-width));
$container-md: (($container-md-width + $grid-gutter-width));
$container-lg: (($container-lg-width + $grid-gutter-width));
// Generate semantic grid columns with these mixins.
// Centered container element
@mixin container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
@include clearfix();
}
// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@include clearfix();
}
// Generate the extra small columns
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
position: relative;
float: left;
width: percentage(($columns / $grid-columns));
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-push($columns) {
left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-pull($columns) {
right: percentage(($columns / $grid-columns));
}
// Generate the small columns
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-sm-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column-offset($columns) {
@media (min-width: $screen-sm-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column-push($columns) {
@media (min-width: $screen-sm-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-sm-column-pull($columns) {
@media (min-width: $screen-sm-min) {
right: percentage(($columns / $grid-columns));
}
}
// Generate the medium columns
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-md-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column-offset($columns) {
@media (min-width: $screen-md-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column-push($columns) {
@media (min-width: $screen-md-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-md-column-pull($columns) {
@media (min-width: $screen-md-min) {
right: percentage(($columns / $grid-columns));
}
}
// Generate the large columns
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-lg-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column-offset($columns) {
@media (min-width: $screen-lg-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column-push($columns) {
@media (min-width: $screen-lg-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-lg-column-pull($columns) {
@media (min-width: $screen-lg-min) {
right: percentage(($columns / $grid-columns));
}
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns() {
$list: '';
$i: 1;
$list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class) {
$list: '';
$i: 1;
$list: ".col-#{$class}-#{$i}";
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-#{$class}-#{$i}";
}
#{$list} {
float: left;
}
}
@mixin calc-grid-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index} {
width: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index} {
left: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index == 0) {
.col-#{$class}-push-0 {
left: auto;
}
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index} {
right: percentage(($index / $grid-columns));
}
}
@if ($type == pull) and ($index == 0) {
.col-#{$class}-pull-0 {
right: auto;
}
}
@if ($type == offset) {
.col-#{$class}-offset-#{$index} {
margin-left: percentage(($index / $grid-columns));
}
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
@for $i from 0 through $columns {
@include calc-grid-column($i, $class, $type);
}
}
// Create grid for specific class
@mixin make-grid($class) {
@include float-grid-columns($class);
@include loop-grid-columns($grid-columns, $class, width);
@include loop-grid-columns($grid-columns, $class, pull);
@include loop-grid-columns($grid-columns, $class, push);
@include loop-grid-columns($grid-columns, $class, offset);
}
.container {
@include container-fixed();
@media (min-width: $screen-sm-min) {
width: $container-sm;
}
@media (min-width: $screen-md-min) {
width: $container-md;
}
@media (min-width: $screen-lg-min) {
width: $container-lg;
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
@include container-fixed();
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
@include make-row();
}
// Columns
//
// Common styles for small and large grid columns
@include make-grid-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
@include make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}
.col-sans-gutters{
padding-left: 0;
padding-right: 0;
}
}
$front-gutter-width: 16px;
.grid_panel {
@include grid-system(
$grid-columns: 12,
$grid-gutter-width: $front-gutter-width,
$container-lg-width: 1200px
);
}
.grid_panel-ad {
@include grid-system(
$grid-columns: 15,
$grid-gutter-width: $front-gutter-width,
$container-lg-width: 1200px
);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.container {
background-color: green;
}
.content {
color: blue;
background-color: salmon;
height: 250px;
margin-bottom: 16px;
}
.ad {
text-align: center;
}
Raw
SassMeister-output.css
.grid_panel .container {
margin-right: auto;
margin-left: auto;
padding-left: 8px;
padding-right: 8px; }
.grid_panel .container:before, .grid_panel .container:after {
content: " ";
display: table; }
.grid_panel .container:after {
clear: both; }
@media (min-width: 768px) {
.grid_panel .container {
width: 736px; } }
@media (min-width: 992px) {
.grid_panel .container {
width: 956px; } }
@media (min-width: 1200px) {
.grid_panel .container {
width: 1216px; } }
.grid_panel .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 8px;
padding-right: 8px; }
.grid_panel .container-fluid:before, .grid_panel .container-fluid:after {
content: " ";
display: table; }
.grid_panel .container-fluid:after {
clear: both; }
.grid_panel .row {
margin-left: -8px;
margin-right: -8px; }
.grid_panel .row:before, .grid_panel .row:after {
content: " ";
display: table; }
.grid_panel .row:after {
clear: both; }
.grid_panel .col-xs-1, .grid_panel .col-sm-1, .grid_panel .col-md-1, .grid_panel .col-lg-1, .grid_panel .col-xs-2, .grid_panel .col-sm-2, .grid_panel .col-md-2, .grid_panel .col-lg-2, .grid_panel .col-xs-3, .grid_panel .col-sm-3, .grid_panel .col-md-3, .grid_panel .col-lg-3, .grid_panel .col-xs-4, .grid_panel .col-sm-4, .grid_panel .col-md-4, .grid_panel .col-lg-4, .grid_panel .col-xs-5, .grid_panel .col-sm-5, .grid_panel .col-md-5, .grid_panel .col-lg-5, .grid_panel .col-xs-6, .grid_panel .col-sm-6, .grid_panel .col-md-6, .grid_panel .col-lg-6, .grid_panel .col-xs-7, .grid_panel .col-sm-7, .grid_panel .col-md-7, .grid_panel .col-lg-7, .grid_panel .col-xs-8, .grid_panel .col-sm-8, .grid_panel .col-md-8, .grid_panel .col-lg-8, .grid_panel .col-xs-9, .grid_panel .col-sm-9, .grid_panel .col-md-9, .grid_panel .col-lg-9, .grid_panel .col-xs-10, .grid_panel .col-sm-10, .grid_panel .col-md-10, .grid_panel .col-lg-10, .grid_panel .col-xs-11, .grid_panel .col-sm-11, .grid_panel .col-md-11, .grid_panel .col-lg-11, .grid_panel .col-xs-12, .grid_panel .col-sm-12, .grid_panel .col-md-12, .grid_panel .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px; }
.grid_panel .col-xs-1, .grid_panel .col-xs-2, .grid_panel .col-xs-3, .grid_panel .col-xs-4, .grid_panel .col-xs-5, .grid_panel .col-xs-6, .grid_panel .col-xs-7, .grid_panel .col-xs-8, .grid_panel .col-xs-9, .grid_panel .col-xs-10, .grid_panel .col-xs-11, .grid_panel .col-xs-12 {
float: left; }
.grid_panel .col-xs-1 {
width: 8.33333%; }
.grid_panel .col-xs-2 {
width: 16.66667%; }
.grid_panel .col-xs-3 {
width: 25%; }
.grid_panel .col-xs-4 {
width: 33.33333%; }
.grid_panel .col-xs-5 {
width: 41.66667%; }
.grid_panel .col-xs-6 {
width: 50%; }
.grid_panel .col-xs-7 {
width: 58.33333%; }
.grid_panel .col-xs-8 {
width: 66.66667%; }
.grid_panel .col-xs-9 {
width: 75%; }
.grid_panel .col-xs-10 {
width: 83.33333%; }
.grid_panel .col-xs-11 {
width: 91.66667%; }
.grid_panel .col-xs-12 {
width: 100%; }
.grid_panel .col-xs-pull-0 {
right: auto; }
.grid_panel .col-xs-pull-1 {
right: 8.33333%; }
.grid_panel .col-xs-pull-2 {
right: 16.66667%; }
.grid_panel .col-xs-pull-3 {
right: 25%; }
.grid_panel .col-xs-pull-4 {
right: 33.33333%; }
.grid_panel .col-xs-pull-5 {
right: 41.66667%; }
.grid_panel .col-xs-pull-6 {
right: 50%; }
.grid_panel .col-xs-pull-7 {
right: 58.33333%; }
.grid_panel .col-xs-pull-8 {
right: 66.66667%; }
.grid_panel .col-xs-pull-9 {
right: 75%; }
.grid_panel .col-xs-pull-10 {
right: 83.33333%; }
.grid_panel .col-xs-pull-11 {
right: 91.66667%; }
.grid_panel .col-xs-pull-12 {
right: 100%; }
.grid_panel .col-xs-push-0 {
left: auto; }
.grid_panel .col-xs-push-1 {
left: 8.33333%; }
.grid_panel .col-xs-push-2 {
left: 16.66667%; }
.grid_panel .col-xs-push-3 {
left: 25%; }
.grid_panel .col-xs-push-4 {
left: 33.33333%; }
.grid_panel .col-xs-push-5 {
left: 41.66667%; }
.grid_panel .col-xs-push-6 {
left: 50%; }
.grid_panel .col-xs-push-7 {
left: 58.33333%; }
.grid_panel .col-xs-push-8 {
left: 66.66667%; }
.grid_panel .col-xs-push-9 {
left: 75%; }
.grid_panel .col-xs-push-10 {
left: 83.33333%; }
.grid_panel .col-xs-push-11 {
left: 91.66667%; }
.grid_panel .col-xs-push-12 {
left: 100%; }
.grid_panel .col-xs-offset-0 {
margin-left: 0%; }
.grid_panel .col-xs-offset-1 {
margin-left: 8.33333%; }
.grid_panel .col-xs-offset-2 {
margin-left: 16.66667%; }
.grid_panel .col-xs-offset-3 {
margin-left: 25%; }
.grid_panel .col-xs-offset-4 {
margin-left: 33.33333%; }
.grid_panel .col-xs-offset-5 {
margin-left: 41.66667%; }
.grid_panel .col-xs-offset-6 {
margin-left: 50%; }
.grid_panel .col-xs-offset-7 {
margin-left: 58.33333%; }
.grid_panel .col-xs-offset-8 {
margin-left: 66.66667%; }
.grid_panel .col-xs-offset-9 {
margin-left: 75%; }
.grid_panel .col-xs-offset-10 {
margin-left: 83.33333%; }
.grid_panel .col-xs-offset-11 {
margin-left: 91.66667%; }
.grid_panel .col-xs-offset-12 {
margin-left: 100%; }
@media (min-width: 768px) {
.grid_panel .col-sm-1, .grid_panel .col-sm-2, .grid_panel .col-sm-3, .grid_panel .col-sm-4, .grid_panel .col-sm-5, .grid_panel .col-sm-6, .grid_panel .col-sm-7, .grid_panel .col-sm-8, .grid_panel .col-sm-9, .grid_panel .col-sm-10, .grid_panel .col-sm-11, .grid_panel .col-sm-12 {
float: left; }
.grid_panel .col-sm-1 {
width: 8.33333%; }
.grid_panel .col-sm-2 {
width: 16.66667%; }
.grid_panel .col-sm-3 {
width: 25%; }
.grid_panel .col-sm-4 {
width: 33.33333%; }
.grid_panel .col-sm-5 {
width: 41.66667%; }
.grid_panel .col-sm-6 {
width: 50%; }
.grid_panel .col-sm-7 {
width: 58.33333%; }
.grid_panel .col-sm-8 {
width: 66.66667%; }
.grid_panel .col-sm-9 {
width: 75%; }
.grid_panel .col-sm-10 {
width: 83.33333%; }
.grid_panel .col-sm-11 {
width: 91.66667%; }
.grid_panel .col-sm-12 {
width: 100%; }
.grid_panel .col-sm-pull-0 {
right: auto; }
.grid_panel .col-sm-pull-1 {
right: 8.33333%; }
.grid_panel .col-sm-pull-2 {
right: 16.66667%; }
.grid_panel .col-sm-pull-3 {
right: 25%; }
.grid_panel .col-sm-pull-4 {
right: 33.33333%; }
.grid_panel .col-sm-pull-5 {
right: 41.66667%; }
.grid_panel .col-sm-pull-6 {
right: 50%; }
.grid_panel .col-sm-pull-7 {
right: 58.33333%; }
.grid_panel .col-sm-pull-8 {
right: 66.66667%; }
.grid_panel .col-sm-pull-9 {
right: 75%; }
.grid_panel .col-sm-pull-10 {
right: 83.33333%; }
.grid_panel .col-sm-pull-11 {
right: 91.66667%; }
.grid_panel .col-sm-pull-12 {
right: 100%; }
.grid_panel .col-sm-push-0 {
left: auto; }
.grid_panel .col-sm-push-1 {
left: 8.33333%; }
.grid_panel .col-sm-push-2 {
left: 16.66667%; }
.grid_panel .col-sm-push-3 {
left: 25%; }
.grid_panel .col-sm-push-4 {
left: 33.33333%; }
.grid_panel .col-sm-push-5 {
left: 41.66667%; }
.grid_panel .col-sm-push-6 {
left: 50%; }
.grid_panel .col-sm-push-7 {
left: 58.33333%; }
.grid_panel .col-sm-push-8 {
left: 66.66667%; }
.grid_panel .col-sm-push-9 {
left: 75%; }
.grid_panel .col-sm-push-10 {
left: 83.33333%; }
.grid_panel .col-sm-push-11 {
left: 91.66667%; }
.grid_panel .col-sm-push-12 {
left: 100%; }
.grid_panel .col-sm-offset-0 {
margin-left: 0%; }
.grid_panel .col-sm-offset-1 {
margin-left: 8.33333%; }
.grid_panel .col-sm-offset-2 {
margin-left: 16.66667%; }
.grid_panel .col-sm-offset-3 {
margin-left: 25%; }
.grid_panel .col-sm-offset-4 {
margin-left: 33.33333%; }
.grid_panel .col-sm-offset-5 {
margin-left: 41.66667%; }
.grid_panel .col-sm-offset-6 {
margin-left: 50%; }
.grid_panel .col-sm-offset-7 {
margin-left: 58.33333%; }
.grid_panel .col-sm-offset-8 {
margin-left: 66.66667%; }
.grid_panel .col-sm-offset-9 {
margin-left: 75%; }
.grid_panel .col-sm-offset-10 {
margin-left: 83.33333%; }
.grid_panel .col-sm-offset-11 {
margin-left: 91.66667%; }
.grid_panel .col-sm-offset-12 {
margin-left: 100%; } }
@media (min-width: 992px) {
.grid_panel .col-md-1, .grid_panel .col-md-2, .grid_panel .col-md-3, .grid_panel .col-md-4, .grid_panel .col-md-5, .grid_panel .col-md-6, .grid_panel .col-md-7, .grid_panel .col-md-8, .grid_panel .col-md-9, .grid_panel .col-md-10, .grid_panel .col-md-11, .grid_panel .col-md-12 {
float: left; }
.grid_panel .col-md-1 {
width: 8.33333%; }
.grid_panel .col-md-2 {
width: 16.66667%; }
.grid_panel .col-md-3 {
width: 25%; }
.grid_panel .col-md-4 {
width: 33.33333%; }
.grid_panel .col-md-5 {
width: 41.66667%; }
.grid_panel .col-md-6 {
width: 50%; }
.grid_panel .col-md-7 {
width: 58.33333%; }
.grid_panel .col-md-8 {
width: 66.66667%; }
.grid_panel .col-md-9 {
width: 75%; }
.grid_panel .col-md-10 {
width: 83.33333%; }
.grid_panel .col-md-11 {
width: 91.66667%; }
.grid_panel .col-md-12 {
width: 100%; }
.grid_panel .col-md-pull-0 {
right: auto; }
.grid_panel .col-md-pull-1 {
right: 8.33333%; }
.grid_panel .col-md-pull-2 {
right: 16.66667%; }
.grid_panel .col-md-pull-3 {
right: 25%; }
.grid_panel .col-md-pull-4 {
right: 33.33333%; }
.grid_panel .col-md-pull-5 {
right: 41.66667%; }
.grid_panel .col-md-pull-6 {
right: 50%; }
.grid_panel .col-md-pull-7 {
right: 58.33333%; }
.grid_panel .col-md-pull-8 {
right: 66.66667%; }
.grid_panel .col-md-pull-9 {
right: 75%; }
.grid_panel .col-md-pull-10 {
right: 83.33333%; }
.grid_panel .col-md-pull-11 {
right: 91.66667%; }
.grid_panel .col-md-pull-12 {
right: 100%; }
.grid_panel .col-md-push-0 {
left: auto; }
.grid_panel .col-md-push-1 {
left: 8.33333%; }
.grid_panel .col-md-push-2 {
left: 16.66667%; }
.grid_panel .col-md-push-3 {
left: 25%; }
.grid_panel .col-md-push-4 {
left: 33.33333%; }
.grid_panel .col-md-push-5 {
left: 41.66667%; }
.grid_panel .col-md-push-6 {
left: 50%; }
.grid_panel .col-md-push-7 {
left: 58.33333%; }
.grid_panel .col-md-push-8 {
left: 66.66667%; }
.grid_panel .col-md-push-9 {
left: 75%; }
.grid_panel .col-md-push-10 {
left: 83.33333%; }
.grid_panel .col-md-push-11 {
left: 91.66667%; }
.grid_panel .col-md-push-12 {
left: 100%; }
.grid_panel .col-md-offset-0 {
margin-left: 0%; }
.grid_panel .col-md-offset-1 {
margin-left: 8.33333%; }
.grid_panel .col-md-offset-2 {
margin-left: 16.66667%; }
.grid_panel .col-md-offset-3 {
margin-left: 25%; }
.grid_panel .col-md-offset-4 {
margin-left: 33.33333%; }
.grid_panel .col-md-offset-5 {
margin-left: 41.66667%; }
.grid_panel .col-md-offset-6 {
margin-left: 50%; }
.grid_panel .col-md-offset-7 {
margin-left: 58.33333%; }
.grid_panel .col-md-offset-8 {
margin-left: 66.66667%; }
.grid_panel .col-md-offset-9 {
margin-left: 75%; }
.grid_panel .col-md-offset-10 {
margin-left: 83.33333%; }
.grid_panel .col-md-offset-11 {
margin-left: 91.66667%; }
.grid_panel .col-md-offset-12 {
margin-left: 100%; } }
@media (min-width: 1200px) {
.grid_panel .col-lg-1, .grid_panel .col-lg-2, .grid_panel .col-lg-3, .grid_panel .col-lg-4, .grid_panel .col-lg-5, .grid_panel .col-lg-6, .grid_panel .col-lg-7, .grid_panel .col-lg-8, .grid_panel .col-lg-9, .grid_panel .col-lg-10, .grid_panel .col-lg-11, .grid_panel .col-lg-12 {
float: left; }
.grid_panel .col-lg-1 {
width: 8.33333%; }
.grid_panel .col-lg-2 {
width: 16.66667%; }
.grid_panel .col-lg-3 {
width: 25%; }
.grid_panel .col-lg-4 {
width: 33.33333%; }
.grid_panel .col-lg-5 {
width: 41.66667%; }
.grid_panel .col-lg-6 {
width: 50%; }
.grid_panel .col-lg-7 {
width: 58.33333%; }
.grid_panel .col-lg-8 {
width: 66.66667%; }
.grid_panel .col-lg-9 {
width: 75%; }
.grid_panel .col-lg-10 {
width: 83.33333%; }
.grid_panel .col-lg-11 {
width: 91.66667%; }
.grid_panel .col-lg-12 {
width: 100%; }
.grid_panel .col-lg-pull-0 {
right: auto; }
.grid_panel .col-lg-pull-1 {
right: 8.33333%; }
.grid_panel .col-lg-pull-2 {
right: 16.66667%; }
.grid_panel .col-lg-pull-3 {
right: 25%; }
.grid_panel .col-lg-pull-4 {
right: 33.33333%; }
.grid_panel .col-lg-pull-5 {
right: 41.66667%; }
.grid_panel .col-lg-pull-6 {
right: 50%; }
.grid_panel .col-lg-pull-7 {
right: 58.33333%; }
.grid_panel .col-lg-pull-8 {
right: 66.66667%; }
.grid_panel .col-lg-pull-9 {
right: 75%; }
.grid_panel .col-lg-pull-10 {
right: 83.33333%; }
.grid_panel .col-lg-pull-11 {
right: 91.66667%; }
.grid_panel .col-lg-pull-12 {
right: 100%; }
.grid_panel .col-lg-push-0 {
left: auto; }
.grid_panel .col-lg-push-1 {
left: 8.33333%; }
.grid_panel .col-lg-push-2 {
left: 16.66667%; }
.grid_panel .col-lg-push-3 {
left: 25%; }
.grid_panel .col-lg-push-4 {
left: 33.33333%; }
.grid_panel .col-lg-push-5 {
left: 41.66667%; }
.grid_panel .col-lg-push-6 {
left: 50%; }
.grid_panel .col-lg-push-7 {
left: 58.33333%; }
.grid_panel .col-lg-push-8 {
left: 66.66667%; }
.grid_panel .col-lg-push-9 {
left: 75%; }
.grid_panel .col-lg-push-10 {
left: 83.33333%; }
.grid_panel .col-lg-push-11 {
left: 91.66667%; }
.grid_panel .col-lg-push-12 {
left: 100%; }
.grid_panel .col-lg-offset-0 {
margin-left: 0%; }
.grid_panel .col-lg-offset-1 {
margin-left: 8.33333%; }
.grid_panel .col-lg-offset-2 {
margin-left: 16.66667%; }
.grid_panel .col-lg-offset-3 {
margin-left: 25%; }
.grid_panel .col-lg-offset-4 {
margin-left: 33.33333%; }
.grid_panel .col-lg-offset-5 {
margin-left: 41.66667%; }
.grid_panel .col-lg-offset-6 {
margin-left: 50%; }
.grid_panel .col-lg-offset-7 {
margin-left: 58.33333%; }
.grid_panel .col-lg-offset-8 {
margin-left: 66.66667%; }
.grid_panel .col-lg-offset-9 {
margin-left: 75%; }
.grid_panel .col-lg-offset-10 {
margin-left: 83.33333%; }
.grid_panel .col-lg-offset-11 {
margin-left: 91.66667%; }
.grid_panel .col-lg-offset-12 {
margin-left: 100%; } }
.grid_panel .col-sans-gutters {
padding-left: 0;
padding-right: 0; }
.grid_panel-ad .container {
margin-right: auto;
margin-left: auto;
padding-left: 8px;
padding-right: 8px; }
.grid_panel-ad .container:before, .grid_panel-ad .container:after {
content: " ";
display: table; }
.grid_panel-ad .container:after {
clear: both; }
@media (min-width: 768px) {
.grid_panel-ad .container {
width: 736px; } }
@media (min-width: 992px) {
.grid_panel-ad .container {
width: 956px; } }
@media (min-width: 1200px) {
.grid_panel-ad .container {
width: 1216px; } }
.grid_panel-ad .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 8px;
padding-right: 8px; }
.grid_panel-ad .container-fluid:before, .grid_panel-ad .container-fluid:after {
content: " ";
display: table; }
.grid_panel-ad .container-fluid:after {
clear: both; }
.grid_panel-ad .row {
margin-left: -8px;
margin-right: -8px; }
.grid_panel-ad .row:before, .grid_panel-ad .row:after {
content: " ";
display: table; }
.grid_panel-ad .row:after {
clear: both; }
.grid_panel-ad .col-xs-1, .grid_panel-ad .col-sm-1, .grid_panel-ad .col-md-1, .grid_panel-ad .col-lg-1, .grid_panel-ad .col-xs-2, .grid_panel-ad .col-sm-2, .grid_panel-ad .col-md-2, .grid_panel-ad .col-lg-2, .grid_panel-ad .col-xs-3, .grid_panel-ad .col-sm-3, .grid_panel-ad .col-md-3, .grid_panel-ad .col-lg-3, .grid_panel-ad .col-xs-4, .grid_panel-ad .col-sm-4, .grid_panel-ad .col-md-4, .grid_panel-ad .col-lg-4, .grid_panel-ad .col-xs-5, .grid_panel-ad .col-sm-5, .grid_panel-ad .col-md-5, .grid_panel-ad .col-lg-5, .grid_panel-ad .col-xs-6, .grid_panel-ad .col-sm-6, .grid_panel-ad .col-md-6, .grid_panel-ad .col-lg-6, .grid_panel-ad .col-xs-7, .grid_panel-ad .col-sm-7, .grid_panel-ad .col-md-7, .grid_panel-ad .col-lg-7, .grid_panel-ad .col-xs-8, .grid_panel-ad .col-sm-8, .grid_panel-ad .col-md-8, .grid_panel-ad .col-lg-8, .grid_panel-ad .col-xs-9, .grid_panel-ad .col-sm-9, .grid_panel-ad .col-md-9, .grid_panel-ad .col-lg-9, .grid_panel-ad .col-xs-10, .grid_panel-ad .col-sm-10, .grid_panel-ad .col-md-10, .grid_panel-ad .col-lg-10, .grid_panel-ad .col-xs-11, .grid_panel-ad .col-sm-11, .grid_panel-ad .col-md-11, .grid_panel-ad .col-lg-11, .grid_panel-ad .col-xs-12, .grid_panel-ad .col-sm-12, .grid_panel-ad .col-md-12, .grid_panel-ad .col-lg-12, .grid_panel-ad .col-xs-13, .grid_panel-ad .col-sm-13, .grid_panel-ad .col-md-13, .grid_panel-ad .col-lg-13, .grid_panel-ad .col-xs-14, .grid_panel-ad .col-sm-14, .grid_panel-ad .col-md-14, .grid_panel-ad .col-lg-14, .grid_panel-ad .col-xs-15, .grid_panel-ad .col-sm-15, .grid_panel-ad .col-md-15, .grid_panel-ad .col-lg-15 {
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px; }
.grid_panel-ad .col-xs-1, .grid_panel-ad .col-xs-2, .grid_panel-ad .col-xs-3, .grid_panel-ad .col-xs-4, .grid_panel-ad .col-xs-5, .grid_panel-ad .col-xs-6, .grid_panel-ad .col-xs-7, .grid_panel-ad .col-xs-8, .grid_panel-ad .col-xs-9, .grid_panel-ad .col-xs-10, .grid_panel-ad .col-xs-11, .grid_panel-ad .col-xs-12, .grid_panel-ad .col-xs-13, .grid_panel-ad .col-xs-14, .grid_panel-ad .col-xs-15 {
float: left; }
.grid_panel-ad .col-xs-1 {
width: 6.66667%; }
.grid_panel-ad .col-xs-2 {
width: 13.33333%; }
.grid_panel-ad .col-xs-3 {
width: 20%; }
.grid_panel-ad .col-xs-4 {
width: 26.66667%; }
.grid_panel-ad .col-xs-5 {
width: 33.33333%; }
.grid_panel-ad .col-xs-6 {
width: 40%; }
.grid_panel-ad .col-xs-7 {
width: 46.66667%; }
.grid_panel-ad .col-xs-8 {
width: 53.33333%; }
.grid_panel-ad .col-xs-9 {
width: 60%; }
.grid_panel-ad .col-xs-10 {
width: 66.66667%; }
.grid_panel-ad .col-xs-11 {
width: 73.33333%; }
.grid_panel-ad .col-xs-12 {
width: 80%; }
.grid_panel-ad .col-xs-13 {
width: 86.66667%; }
.grid_panel-ad .col-xs-14 {
width: 93.33333%; }
.grid_panel-ad .col-xs-15 {
width: 100%; }
.grid_panel-ad .col-xs-pull-0 {
right: auto; }
.grid_panel-ad .col-xs-pull-1 {
right: 6.66667%; }
.grid_panel-ad .col-xs-pull-2 {
right: 13.33333%; }
.grid_panel-ad .col-xs-pull-3 {
right: 20%; }
.grid_panel-ad .col-xs-pull-4 {
right: 26.66667%; }
.grid_panel-ad .col-xs-pull-5 {
right: 33.33333%; }
.grid_panel-ad .col-xs-pull-6 {
right: 40%; }
.grid_panel-ad .col-xs-pull-7 {
right: 46.66667%; }
.grid_panel-ad .col-xs-pull-8 {
right: 53.33333%; }
.grid_panel-ad .col-xs-pull-9 {
right: 60%; }
.grid_panel-ad .col-xs-pull-10 {
right: 66.66667%; }
.grid_panel-ad .col-xs-pull-11 {
right: 73.33333%; }
.grid_panel-ad .col-xs-pull-12 {
right: 80%; }
.grid_panel-ad .col-xs-pull-13 {
right: 86.66667%; }
.grid_panel-ad .col-xs-pull-14 {
right: 93.33333%; }
.grid_panel-ad .col-xs-pull-15 {
right: 100%; }
.grid_panel-ad .col-xs-push-0 {
left: auto; }
.grid_panel-ad .col-xs-push-1 {
left: 6.66667%; }
.grid_panel-ad .col-xs-push-2 {
left: 13.33333%; }
.grid_panel-ad .col-xs-push-3 {
left: 20%; }
.grid_panel-ad .col-xs-push-4 {
left: 26.66667%; }
.grid_panel-ad .col-xs-push-5 {
left: 33.33333%; }
.grid_panel-ad .col-xs-push-6 {
left: 40%; }
.grid_panel-ad .col-xs-push-7 {
left: 46.66667%; }
.grid_panel-ad .col-xs-push-8 {
left: 53.33333%; }
.grid_panel-ad .col-xs-push-9 {
left: 60%; }
.grid_panel-ad .col-xs-push-10 {
left: 66.66667%; }
.grid_panel-ad .col-xs-push-11 {
left: 73.33333%; }
.grid_panel-ad .col-xs-push-12 {
left: 80%; }
.grid_panel-ad .col-xs-push-13 {
left: 86.66667%; }
.grid_panel-ad .col-xs-push-14 {
left: 93.33333%; }
.grid_panel-ad .col-xs-push-15 {
left: 100%; }
.grid_panel-ad .col-xs-offset-0 {
margin-left: 0%; }
.grid_panel-ad .col-xs-offset-1 {
margin-left: 6.66667%; }
.grid_panel-ad .col-xs-offset-2 {
margin-left: 13.33333%; }
.grid_panel-ad .col-xs-offset-3 {
margin-left: 20%; }
.grid_panel-ad .col-xs-offset-4 {
margin-left: 26.66667%; }
.grid_panel-ad .col-xs-offset-5 {
margin-left: 33.33333%; }
.grid_panel-ad .col-xs-offset-6 {
margin-left: 40%; }
.grid_panel-ad .col-xs-offset-7 {
margin-left: 46.66667%; }
.grid_panel-ad .col-xs-offset-8 {
margin-left: 53.33333%; }
.grid_panel-ad .col-xs-offset-9 {
margin-left: 60%; }
.grid_panel-ad .col-xs-offset-10 {
margin-left: 66.66667%; }
.grid_panel-ad .col-xs-offset-11 {
margin-left: 73.33333%; }
.grid_panel-ad .col-xs-offset-12 {
margin-left: 80%; }
.grid_panel-ad .col-xs-offset-13 {
margin-left: 86.66667%; }
.grid_panel-ad .col-xs-offset-14 {
margin-left: 93.33333%; }
.grid_panel-ad .col-xs-offset-15 {
margin-left: 100%; }
@media (min-width: 768px) {
.grid_panel-ad .col-sm-1, .grid_panel-ad .col-sm-2, .grid_panel-ad .col-sm-3, .grid_panel-ad .col-sm-4, .grid_panel-ad .col-sm-5, .grid_panel-ad .col-sm-6, .grid_panel-ad .col-sm-7, .grid_panel-ad .col-sm-8, .grid_panel-ad .col-sm-9, .grid_panel-ad .col-sm-10, .grid_panel-ad .col-sm-11, .grid_panel-ad .col-sm-12, .grid_panel-ad .col-sm-13, .grid_panel-ad .col-sm-14, .grid_panel-ad .col-sm-15 {
float: left; }
.grid_panel-ad .col-sm-1 {
width: 6.66667%; }
.grid_panel-ad .col-sm-2 {
width: 13.33333%; }
.grid_panel-ad .col-sm-3 {
width: 20%; }
.grid_panel-ad .col-sm-4 {
width: 26.66667%; }
.grid_panel-ad .col-sm-5 {
width: 33.33333%; }
.grid_panel-ad .col-sm-6 {
width: 40%; }
.grid_panel-ad .col-sm-7 {
width: 46.66667%; }
.grid_panel-ad .col-sm-8 {
width: 53.33333%; }
.grid_panel-ad .col-sm-9 {
width: 60%; }
.grid_panel-ad .col-sm-10 {
width: 66.66667%; }
.grid_panel-ad .col-sm-11 {
width: 73.33333%; }
.grid_panel-ad .col-sm-12 {
width: 80%; }
.grid_panel-ad .col-sm-13 {
width: 86.66667%; }
.grid_panel-ad .col-sm-14 {
width: 93.33333%; }
.grid_panel-ad .col-sm-15 {
width: 100%; }
.grid_panel-ad .col-sm-pull-0 {
right: auto; }
.grid_panel-ad .col-sm-pull-1 {
right: 6.66667%; }
.grid_panel-ad .col-sm-pull-2 {
right: 13.33333%; }
.grid_panel-ad .col-sm-pull-3 {
right: 20%; }
.grid_panel-ad .col-sm-pull-4 {
right: 26.66667%; }
.grid_panel-ad .col-sm-pull-5 {
right: 33.33333%; }
.grid_panel-ad .col-sm-pull-6 {
right: 40%; }
.grid_panel-ad .col-sm-pull-7 {
right: 46.66667%; }
.grid_panel-ad .col-sm-pull-8 {
right: 53.33333%; }
.grid_panel-ad .col-sm-pull-9 {
right: 60%; }
.grid_panel-ad .col-sm-pull-10 {
right: 66.66667%; }
.grid_panel-ad .col-sm-pull-11 {
right: 73.33333%; }
.grid_panel-ad .col-sm-pull-12 {
right: 80%; }
.grid_panel-ad .col-sm-pull-13 {
right: 86.66667%; }
.grid_panel-ad .col-sm-pull-14 {
right: 93.33333%; }
.grid_panel-ad .col-sm-pull-15 {
right: 100%; }
.grid_panel-ad .col-sm-push-0 {
left: auto; }
.grid_panel-ad .col-sm-push-1 {
left: 6.66667%; }
.grid_panel-ad .col-sm-push-2 {
left: 13.33333%; }
.grid_panel-ad .col-sm-push-3 {
left: 20%; }
.grid_panel-ad .col-sm-push-4 {
left: 26.66667%; }
.grid_panel-ad .col-sm-push-5 {
left: 33.33333%; }
.grid_panel-ad .col-sm-push-6 {
left: 40%; }
.grid_panel-ad .col-sm-push-7 {
left: 46.66667%; }
.grid_panel-ad .col-sm-push-8 {
left: 53.33333%; }
.grid_panel-ad .col-sm-push-9 {
left: 60%; }
.grid_panel-ad .col-sm-push-10 {
left: 66.66667%; }
.grid_panel-ad .col-sm-push-11 {
left: 73.33333%; }
.grid_panel-ad .col-sm-push-12 {
left: 80%; }
.grid_panel-ad .col-sm-push-13 {
left: 86.66667%; }
.grid_panel-ad .col-sm-push-14 {
left: 93.33333%; }
.grid_panel-ad .col-sm-push-15 {
left: 100%; }
.grid_panel-ad .col-sm-offset-0 {
margin-left: 0%; }
.grid_panel-ad .col-sm-offset-1 {
margin-left: 6.66667%; }
.grid_panel-ad .col-sm-offset-2 {
margin-left: 13.33333%; }
.grid_panel-ad .col-sm-offset-3 {
margin-left: 20%; }
.grid_panel-ad .col-sm-offset-4 {
margin-left: 26.66667%; }
.grid_panel-ad .col-sm-offset-5 {
margin-left: 33.33333%; }
.grid_panel-ad .col-sm-offset-6 {
margin-left: 40%; }
.grid_panel-ad .col-sm-offset-7 {
margin-left: 46.66667%; }
.grid_panel-ad .col-sm-offset-8 {
margin-left: 53.33333%; }
.grid_panel-ad .col-sm-offset-9 {
margin-left: 60%; }
.grid_panel-ad .col-sm-offset-10 {
margin-left: 66.66667%; }
.grid_panel-ad .col-sm-offset-11 {
margin-left: 73.33333%; }
.grid_panel-ad .col-sm-offset-12 {
margin-left: 80%; }
.grid_panel-ad .col-sm-offset-13 {
margin-left: 86.66667%; }
.grid_panel-ad .col-sm-offset-14 {
margin-left: 93.33333%; }
.grid_panel-ad .col-sm-offset-15 {
margin-left: 100%; } }
@media (min-width: 992px) {
.grid_panel-ad .col-md-1, .grid_panel-ad .col-md-2, .grid_panel-ad .col-md-3, .grid_panel-ad .col-md-4, .grid_panel-ad .col-md-5, .grid_panel-ad .col-md-6, .grid_panel-ad .col-md-7, .grid_panel-ad .col-md-8, .grid_panel-ad .col-md-9, .grid_panel-ad .col-md-10, .grid_panel-ad .col-md-11, .grid_panel-ad .col-md-12, .grid_panel-ad .col-md-13, .grid_panel-ad .col-md-14, .grid_panel-ad .col-md-15 {
float: left; }
.grid_panel-ad .col-md-1 {
width: 6.66667%; }
.grid_panel-ad .col-md-2 {
width: 13.33333%; }
.grid_panel-ad .col-md-3 {
width: 20%; }
.grid_panel-ad .col-md-4 {
width: 26.66667%; }
.grid_panel-ad .col-md-5 {
width: 33.33333%; }
.grid_panel-ad .col-md-6 {
width: 40%; }
.grid_panel-ad .col-md-7 {
width: 46.66667%; }
.grid_panel-ad .col-md-8 {
width: 53.33333%; }
.grid_panel-ad .col-md-9 {
width: 60%; }
.grid_panel-ad .col-md-10 {
width: 66.66667%; }
.grid_panel-ad .col-md-11 {
width: 73.33333%; }
.grid_panel-ad .col-md-12 {
width: 80%; }
.grid_panel-ad .col-md-13 {
width: 86.66667%; }
.grid_panel-ad .col-md-14 {
width: 93.33333%; }
.grid_panel-ad .col-md-15 {
width: 100%; }
.grid_panel-ad .col-md-pull-0 {
right: auto; }
.grid_panel-ad .col-md-pull-1 {
right: 6.66667%; }
.grid_panel-ad .col-md-pull-2 {
right: 13.33333%; }
.grid_panel-ad .col-md-pull-3 {
right: 20%; }
.grid_panel-ad .col-md-pull-4 {
right: 26.66667%; }
.grid_panel-ad .col-md-pull-5 {
right: 33.33333%; }
.grid_panel-ad .col-md-pull-6 {
right: 40%; }
.grid_panel-ad .col-md-pull-7 {
right: 46.66667%; }
.grid_panel-ad .col-md-pull-8 {
right: 53.33333%; }
.grid_panel-ad .col-md-pull-9 {
right: 60%; }
.grid_panel-ad .col-md-pull-10 {
right: 66.66667%; }
.grid_panel-ad .col-md-pull-11 {
right: 73.33333%; }
.grid_panel-ad .col-md-pull-12 {
right: 80%; }
.grid_panel-ad .col-md-pull-13 {
right: 86.66667%; }
.grid_panel-ad .col-md-pull-14 {
right: 93.33333%; }
.grid_panel-ad .col-md-pull-15 {
right: 100%; }
.grid_panel-ad .col-md-push-0 {
left: auto; }
.grid_panel-ad .col-md-push-1 {
left: 6.66667%; }
.grid_panel-ad .col-md-push-2 {
left: 13.33333%; }
.grid_panel-ad .col-md-push-3 {
left: 20%; }
.grid_panel-ad .col-md-push-4 {
left: 26.66667%; }
.grid_panel-ad .col-md-push-5 {
left: 33.33333%; }
.grid_panel-ad .col-md-push-6 {
left: 40%; }
.grid_panel-ad .col-md-push-7 {
left: 46.66667%; }
.grid_panel-ad .col-md-push-8 {
left: 53.33333%; }
.grid_panel-ad .col-md-push-9 {
left: 60%; }
.grid_panel-ad .col-md-push-10 {
left: 66.66667%; }
.grid_panel-ad .col-md-push-11 {
left: 73.33333%; }
.grid_panel-ad .col-md-push-12 {
left: 80%; }
.grid_panel-ad .col-md-push-13 {
left: 86.66667%; }
.grid_panel-ad .col-md-push-14 {
left: 93.33333%; }
.grid_panel-ad .col-md-push-15 {
left: 100%; }
.grid_panel-ad .col-md-offset-0 {
margin-left: 0%; }
.grid_panel-ad .col-md-offset-1 {
margin-left: 6.66667%; }
.grid_panel-ad .col-md-offset-2 {
margin-left: 13.33333%; }
.grid_panel-ad .col-md-offset-3 {
margin-left: 20%; }
.grid_panel-ad .col-md-offset-4 {
margin-left: 26.66667%; }
.grid_panel-ad .col-md-offset-5 {
margin-left: 33.33333%; }
.grid_panel-ad .col-md-offset-6 {
margin-left: 40%; }
.grid_panel-ad .col-md-offset-7 {
margin-left: 46.66667%; }
.grid_panel-ad .col-md-offset-8 {
margin-left: 53.33333%; }
.grid_panel-ad .col-md-offset-9 {
margin-left: 60%; }
.grid_panel-ad .col-md-offset-10 {
margin-left: 66.66667%; }
.grid_panel-ad .col-md-offset-11 {
margin-left: 73.33333%; }
.grid_panel-ad .col-md-offset-12 {
margin-left: 80%; }
.grid_panel-ad .col-md-offset-13 {
margin-left: 86.66667%; }
.grid_panel-ad .col-md-offset-14 {
margin-left: 93.33333%; }
.grid_panel-ad .col-md-offset-15 {
margin-left: 100%; } }
@media (min-width: 1200px) {
.grid_panel-ad .col-lg-1, .grid_panel-ad .col-lg-2, .grid_panel-ad .col-lg-3, .grid_panel-ad .col-lg-4, .grid_panel-ad .col-lg-5, .grid_panel-ad .col-lg-6, .grid_panel-ad .col-lg-7, .grid_panel-ad .col-lg-8, .grid_panel-ad .col-lg-9, .grid_panel-ad .col-lg-10, .grid_panel-ad .col-lg-11, .grid_panel-ad .col-lg-12, .grid_panel-ad .col-lg-13, .grid_panel-ad .col-lg-14, .grid_panel-ad .col-lg-15 {
float: left; }
.grid_panel-ad .col-lg-1 {
width: 6.66667%; }
.grid_panel-ad .col-lg-2 {
width: 13.33333%; }
.grid_panel-ad .col-lg-3 {
width: 20%; }
.grid_panel-ad .col-lg-4 {
width: 26.66667%; }
.grid_panel-ad .col-lg-5 {
width: 33.33333%; }
.grid_panel-ad .col-lg-6 {
width: 40%; }
.grid_panel-ad .col-lg-7 {
width: 46.66667%; }
.grid_panel-ad .col-lg-8 {
width: 53.33333%; }
.grid_panel-ad .col-lg-9 {
width: 60%; }
.grid_panel-ad .col-lg-10 {
width: 66.66667%; }
.grid_panel-ad .col-lg-11 {
width: 73.33333%; }
.grid_panel-ad .col-lg-12 {
width: 80%; }
.grid_panel-ad .col-lg-13 {
width: 86.66667%; }
.grid_panel-ad .col-lg-14 {
width: 93.33333%; }
.grid_panel-ad .col-lg-15 {
width: 100%; }
.grid_panel-ad .col-lg-pull-0 {
right: auto; }
.grid_panel-ad .col-lg-pull-1 {
right: 6.66667%; }
.grid_panel-ad .col-lg-pull-2 {
right: 13.33333%; }
.grid_panel-ad .col-lg-pull-3 {
right: 20%; }
.grid_panel-ad .col-lg-pull-4 {
right: 26.66667%; }
.grid_panel-ad .col-lg-pull-5 {
right: 33.33333%; }
.grid_panel-ad .col-lg-pull-6 {
right: 40%; }
.grid_panel-ad .col-lg-pull-7 {
right: 46.66667%; }
.grid_panel-ad .col-lg-pull-8 {
right: 53.33333%; }
.grid_panel-ad .col-lg-pull-9 {
right: 60%; }
.grid_panel-ad .col-lg-pull-10 {
right: 66.66667%; }
.grid_panel-ad .col-lg-pull-11 {
right: 73.33333%; }
.grid_panel-ad .col-lg-pull-12 {
right: 80%; }
.grid_panel-ad .col-lg-pull-13 {
right: 86.66667%; }
.grid_panel-ad .col-lg-pull-14 {
right: 93.33333%; }
.grid_panel-ad .col-lg-pull-15 {
right: 100%; }
.grid_panel-ad .col-lg-push-0 {
left: auto; }
.grid_panel-ad .col-lg-push-1 {
left: 6.66667%; }
.grid_panel-ad .col-lg-push-2 {
left: 13.33333%; }
.grid_panel-ad .col-lg-push-3 {
left: 20%; }
.grid_panel-ad .col-lg-push-4 {
left: 26.66667%; }
.grid_panel-ad .col-lg-push-5 {
left: 33.33333%; }
.grid_panel-ad .col-lg-push-6 {
left: 40%; }
.grid_panel-ad .col-lg-push-7 {
left: 46.66667%; }
.grid_panel-ad .col-lg-push-8 {
left: 53.33333%; }
.grid_panel-ad .col-lg-push-9 {
left: 60%; }
.grid_panel-ad .col-lg-push-10 {
left: 66.66667%; }
.grid_panel-ad .col-lg-push-11 {
left: 73.33333%; }
.grid_panel-ad .col-lg-push-12 {
left: 80%; }
.grid_panel-ad .col-lg-push-13 {
left: 86.66667%; }
.grid_panel-ad .col-lg-push-14 {
left: 93.33333%; }
.grid_panel-ad .col-lg-push-15 {
left: 100%; }
.grid_panel-ad .col-lg-offset-0 {
margin-left: 0%; }
.grid_panel-ad .col-lg-offset-1 {
margin-left: 6.66667%; }
.grid_panel-ad .col-lg-offset-2 {
margin-left: 13.33333%; }
.grid_panel-ad .col-lg-offset-3 {
margin-left: 20%; }
.grid_panel-ad .col-lg-offset-4 {
margin-left: 26.66667%; }
.grid_panel-ad .col-lg-offset-5 {
margin-left: 33.33333%; }
.grid_panel-ad .col-lg-offset-6 {
margin-left: 40%; }
.grid_panel-ad .col-lg-offset-7 {
margin-left: 46.66667%; }
.grid_panel-ad .col-lg-offset-8 {
margin-left: 53.33333%; }
.grid_panel-ad .col-lg-offset-9 {
margin-left: 60%; }
.grid_panel-ad .col-lg-offset-10 {
margin-left: 66.66667%; }
.grid_panel-ad .col-lg-offset-11 {
margin-left: 73.33333%; }
.grid_panel-ad .col-lg-offset-12 {
margin-left: 80%; }
.grid_panel-ad .col-lg-offset-13 {
margin-left: 86.66667%; }
.grid_panel-ad .col-lg-offset-14 {
margin-left: 93.33333%; }
.grid_panel-ad .col-lg-offset-15 {
margin-left: 100%; } }
.grid_panel-ad .col-sans-gutters {
padding-left: 0;
padding-right: 0; }
*, *:before, *:after {
box-sizing: border-box; }
.container {
background-color: green; }
.content {
color: blue;
background-color: salmon;
height: 250px;
margin-bottom: 16px; }
.ad {
text-align: center; }
Raw
SassMeister-rendered.html
<div class='grid_panel-ad'>
<div class='container'>
grid_panel-ad
<div class='row'>
<div class='col-md-7'>
<div class='content'>Top Story</div>
</div>
<div class='col-md-4'>
<div class='content'>Headlines</div>
</div>
<div class='col-md-4 col-sans-gutters'>
<div class='ad'><img src="http://placehold.it/300x250"></div>
</div>
</div>
</div>
</div>
<div class="grid_panel">
<div class='container'>
grid_panel
<div class='row'>
<div class='col-md-6'>
<div class='content'>Top Story</div>
</div>
<div class='col-md-3'>
<div class='content'>Headlines</div>
</div>
<div class='col-md-3'>
<div class='content'>Headlines</div>
</div>
</div>
</div>
<div class='grid_panel'>
<div class='container'>
grid_panel
<div class='row'>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
<div class='col-md-1'>
<div class='content'>col-md-1</div>
</div>
</div>
<div class='row'>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
<div class='col-md-2'>
<div class='content'>col-md-2</div>
</div>
</div>
<div class='row'>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
<div class='col-md-3'>
<div class='content'>col-md-3</div>
</div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='content'>col-md-4</div>
</div>
<div class='col-md-4'>
<div class='content'>col-md-4</div>
</div>
<div class='col-md-4'>
<div class='content'>col-md-4</div>
</div>
</div>
<div class='row'>
<div class='col-md-5'>
<div class='content'>col-md-5</div>
</div>
<div class='col-md-5 col-md-offset-2'>
<div class='content'>col-md-offset-5</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='content'>col-md-6</div>
</div>
<div class='col-md-6'>
<div class='content'>col-md-6</div>
</div>
</div>
<div class='row'>
<div class='col-md-7'>
<div class='content'>col-md-7</div>
</div>
<div class='col-md-5'>
<div class='content'>col-md-5</div>
</div>
</div>
<div class='row'>
<div class='col-md-8 col-md-offset-2'>
<div class='content'>col-md-8 col-md-offset-2</div>
</div>
</div>
<div class='row'>
<div class='col-md-9'>
<div class='content'>col-md-9</div>
</div>
</div>
<div class='row'>
<div class='col-md-10'>
<div class='content'>col-md-10</div>
</div>
</div>
<div class='row'>
<div class='col-md-11'>
<div class='content'>col-md-11</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<div class='content'>col-md-12</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment