/**
 * @file
 * Core styles for Sooper Easy grid system.
 * Author: Jurriaan Roelofs
 * Licensed under GPL and MIT
 *
 */


/**
 * The mast is the main container for your layout, feel free to float it left
 * or right if you don't like it centered (Default).
 */
.mast {
  width:100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * This class can be used to create full-width footers by putting a full-width
 * element as a direct child of the body element (not inside a .mast)
 */

.fullwidth {
  width:100%;
  float:left;
  clear:both;
  text-align:center;
}

/**
 * Grid styles
 */

.grid-100
,.grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
,.grid-2-3
,.grid-1-2
,.grid-1-3
,.grid-1-4
,.grid-1-5
,.grid-1-6
,.grid-1-7
,.grid-1-8
,.grid-phi
,.grid-phi2 /* This means phi^2 (phi squared) */
,.grid-phi3 {
  float:left;
  position:relative;
  word-wrap:break-word; /* This will only break words if they are so big they otherwise go off the grid */
  display:inline;
}

.clear-both {
  clear:both;
}
.clear-left {
  clear:left;
}
.clear-right {
  clear:right;
}
.clear-none {
  clear:right;
}

.clear {
  clear:both;
  display:block;
  visibility:hidden;
  height:0;
  width:0;
}

.region:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


/**
 * Default Gutter (horizontal + vertical)
 * you can modify this without breaking anything!
 *
 * If you dont like the 1:1 ratio of vertical:horizontal spacing
 * you can fill in margin:20px 10px for a double vertical gutter
 * or even margin: 32px 20px for golden ratio
 */

.grid-inner {
  margin:5px;
}


/**
 * Grid Widths
 */

.grid-100 {width:100%;}
.grid-3-4 {width:75%;}
.grid-2-3 {width:66.65%;}
.grid-1-2 {width:50%;}
.grid-1-3 {width:33.32%;}
.grid-1-4 {width:25%;}
.grid-1-5 {width:20%;}
.grid-1-6 {width:16.65%;}
.grid-1-8 {width:12.5%;}
.grid-phi {width:61.8%;}
.grid-phi2 {width:38.2%;}
.grid-phi3 {width:23.6%;}
.grid-auto {width:auto;}


/**
 * Prefill Styles
 */

.grid-prefill-3-4 {padding-left:75%;}
.grid-prefill-2-3 {padding-left:66.65%;}
.grid-prefill-1-2 {padding-left:50%;}
.grid-prefill-1-3 {padding-left:33.32%;}
.grid-prefill-1-4 {padding-left:25%;}
.grid-prefill-1-5 {padding-left:20%;}
.grid-prefill-1-6 {padding-left:16.65%;}
.grid-prefill-1-8 {padding-left:12.5%;}
.grid-prefill-phi {padding-left:61.8%;}
.grid-prefill-phi2 {padding-left:38.2%;}
.grid-prefill-phi3 {padding-left:23.6%;}


/**
 * Postfill Styles
 */

.grid-postfill-3-4 {padding-right:75%;}
.grid-postfill-2-3 {padding-right:66.65%;}
.grid-postfill-1-2 {padding-right:50%;}
.grid-postfill-1-3 {padding-right:33.32%;}
.grid-postfill-1-4 {padding-right:25%;}
.grid-postfill-1-5 {padding-right:20%;}
.grid-postfill-1-6 {padding-right:16.65%;}
.grid-postfill-1-8 {padding-right:12.5%;}
.grid-postfill-phi {padding-right:61.8%;}
.grid-postfill-phi2 {padding-right:38.2%;}
.grid-postfill-phi3 {padding-right:23.6%;}

/**
 * IE7 & IE6 fill for full-width regions:
 * We create an invisible buffer space to prevent layout collapse
 * Without this rounding errors may cause floats to drop down a row
 *
 * @todo abstract this so that it doesn't target only these regions
 */

.region-preblocks,
.region-postblocks,
.region-header,
.region-subheader
.region-content,
.region-content-top,
.region-content-bottom,
.region-featured,
.region-footer,
.region-footer-extra {
  *width:100%;
  *margin-right:-10px!important;
  *padding-right:10px!important;*/
}

/**
 * IE6 fill:
 * Make sure wide elements don't cause structural collapse
 * This is needed because IE6 treats width as min-width
 */

* html .region {
  overflow:hidden;
  overflow-y:visible;
}