/*@include span( <width> [<wide / wider>] of <layout> [<last>] );

<width> refers to the number of columns the element going to take up.
[<wide / wider>]is a optional argument lets you expand the width of the column to include 1 or 2 more gutters respectively
of is a keyword to let Susy know that the layout is coming up.
<layout> is the context of the container, along with other optionals that define the layout. (Context refers to the number of columns the parent container is made up of).
[<last>] is an optional argument that tells Susy that this element is supposed to be the last item in the row.

*/
/*
// 12-column grid
$grid: 12;

// 12-column grid with 1/3 gutter ratio
$grid: 12 1/3;

// 12-column grid with 60px columns and 10px gutters
$grid: 12 (60px 10px);

// asymmetrical grid with .25 gutter ratio
$grid: (1 2 3 2 1) .25;
*/
/*
// All the keywords in Susy:

$global-keywords: (
  container            : auto,
  math                 : static fluid,
  output               : isolate float,
  container-position   : left center right,
  flow                 : ltr rtl,
  gutter-position      : before after split inside inside-static,
  debug: (
    image              : show hide show-columns show-baseline,
    output             : background overlay,
  ),
);

$local-keywords: (
  box-sizing           : border-box content-box,
  edge                 : first alpha last omega,
  spread               : narrow wide wider,
  gutter-override      : no-gutters no-gutter,
  clear                : break nobreak,
  role                 : nest,
);
*/
/*
// grid: (columns: 4, gutters: 1/4, column-width: 4em);
// keywords: (math: fluid, gutter-position: inside-static, flow: rtl);
$small: 4 (4em 1em) fluid inside-static rtl;


// Pattern:
$span: $span at $location of $layout;

// span: 3;
// location: 4;
// layout: (columns: 12, gutters: .25, math: fluid)
$span: 3 at 4 of 12 .25 fluid;

// Only $span is required in most cases
$span: 30%;


*/
.main {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }
  .main:after {
    content: " ";
    display: block;
    clear: both; }

.content {
  width: 83.05085%;
  float: left;
  margin-right: 1.69492%; }

.sidebar {
  width: 32.20339%;
  float: right;
  margin-right: 0; }