//
// This is a simple CSS for a very fluid layout. One could say it is SUPER fluid.
// functions taken from susy.
//
// HTML
//
//  .top
//    .column_countainer
//      .column_content
//  .middle
//    .column_container
//      .column_content
//  .bottom
//    .column_container
//      .column_content
//

//
// DEFAULTS
//

$total-columns: $gridColumns !default;
$side-columns: 2 !default;

$column-width: $gridColumnWidth !default;
$gutter-width: $gridGutterWidth !default;

//
// FUNCTIONS
//

//
// Returns the width of the specified number of columns
// $columns => The number of columns to get width for.
//
@function columns-width($columns : $total-columns) {
  @return ($columns * $column-width) + (ceil($columns - 1) * $gutter-width);
}

//
// Returns the full width of all columns
//
@function full-width() {
  @return columns-width();
}

//
// Return the percentage width of a single gutter in a given column context.
// $context => The grid context in columns, if nested.
//
@function gutter($context : $total-columns) {
  @return percentage($gutter-width / columns-width($context));
}

//
// Return the percentage width of multiple 'columns' in a given 'context'.
// $columns => The number of columns to get relative width for.
// $context => The grid context in columns, if nested.
//
@function columns($columns, $context : $total-columns) {
  @return percentage(columns-width($columns) / columns-width($context));
}

//
// CSS
//

.column_container {
  *zoom: 1;
  margin-left: auto;
  margin-right: auto;
  width: full-width();
  max-width: 100%;
}

.column_content {
  padding-left: gutter();
  padding-right: gutter();
}

.middle .column_container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.middle .column_content {
  padding-top: gutter();
  padding-bottom: gutter();
}

.main_column.with_side_column {
  width: columns($total-columns - $side-columns);
  margin-left: gutter();
  float: left;
  // without left float, we would use this:
  // margin-left: columns($side-columns) + gutter();
  // but that creates problems if we have floated columns inside this main column
}

//.article.full {
//  margin-left: 0;
//  width: columns;
//}

.side_column {
  display: inline;
  float: left;
  width: columns($side-columns);
}