/*
========================================
Table of Contents
========================================
::Assumed Markup
::Base Styles
::Global Width
::4 Columns
::6 Columns
::8 Columns
::9 Columns
::12 Columns
::Clearfix
========================================
::Assumed Markup
========================================
NOTES:
========================================
.page
Contains any overflow / offscreen elements
.container
Defines large 's
.container > .inner
Non-padded, centered fluid width block with clearfix
.content
A left floating element
.content > .inner
Padded block with clearfix
.content > .inner *:first-child
Removes the top margin on first element
========================================
::Base Styles
========================================
*/
.page {
position: relative;
overflow: hidden;
}
.container {
position: relative;
}
.container > .inner {
max-width: 1280px;
min-width: 240px;
margin: auto;
}
.content {
float:left;
}
.content > .inner {
/* padding: 0 10px; */
}
.padded {padding: 0 10px;} /* Bill's alternative to above */
.padded2 {padding: 0 15px;} /* even more padded */
/* .content > .inner *:first-child {
margin-top: 0;
} */
/*
========================================
::Global Width
========================================
*/
.size1of1 { width: 100%; }
/*
========================================
::4 Columns
========================================
*/
.size1of4 { width: 25%; }
.size2of4 { width: 50%; }
.size3of4 { width: 75%; }
.size4of4 { width: 100%; }
.shift1of4 { margin-left: 25%; }
.shift2of4 { margin-left: 50%; }
.shift3of4 { margin-left: 75%; }
.shift4of4 { margin-left: 100%; }
.hide6,
.hide9,
.hide12,
.hide16 {
display: block;
}
.hide4 {
display: none;
}
/*
========================================
::6 Columns
========================================
*/
@media screen and (min-width: 321px) and (max-width: 480px) {
.size1of6 { width: 16.66666%; }
.size2of6 { width: 33.33333%; }
.size3of6 { width: 50%; }
.size4of6 { width: 66.66666%; }
.size5of6 { width: 83.33333%; }
.size6of6 { width: 100%; }
.shift1of6 { margin-left: 16.66666%; }
.shift2of6 { margin-left: 33.33333%; }
.shift3of6 { margin-left: 50%; }
.shift4of6 { margin-left: 66.66666%; }
.shift5of6 { margin-left: 83.33333%; }
.shift6of6 { margin-left: 100%; }
.hide4,
.hide9,
.hide12,
.hide16 {
display: block;
}
.hide6 {
display: none;
}
}
/*
========================================
::8 Columns
::9 Columns
========================================
*/
@media screen and (min-width: 481px) and (max-width: 720px) {
/* ::8 Columns */
.size1of8 { width: 12.5%; }
.size2of8 { width: 25%; }
.size3of8 { width: 37.5%; }
.size4of8 { width: 50%; }
.size5of8 { width: 62.5%; }
.size6of8 { width: 75%; }
.size7of8 { width: 87.5%; }
.size8of8 { width: 100%; }
.shift1of8 { margin-left: 12.5%; }
.shift2of8 { margin-left: 25%; }
.shift3of8 { margin-left: 37.5%; }
.shift4of8 { margin-left: 50%; }
.shift5of8 { margin-left: 62.5%; }
.shift6of8 { margin-left: 75%; }
.shift7of8 { margin-left: 87.5%; }
.shift8of8 { margin-left: 100%; }
/* ::9 Columns */
.size1of9 { width: 11.1% }
.size2of9 { width: 22.2% }
.size3of9 { width: 33.3% }
.size4of9 { width: 44.4% }
.size5of9 { width: 55.5% }
.size6of9 { width: 66.6% }
.size7of9 { width: 77.7% }
.size8of9 { width: 88.8% }
.size9of9 { width: 100% }
.shift1of9 { margin-left: 11.1% }
.shift2of9 { margin-left: 22.2% }
.shift3of9 { margin-left: 33.3% }
.shift4of9 { margin-left: 44.4% }
.shift5of9 { margin-left: 55.5% }
.shift6of9 { margin-left: 66.6% }
.shift7of9 { margin-left: 77.7% }
.shift8of9 { margin-left: 88.8% }
.shift9of9 { margin-left: 100% }
.hide4,
.hide6,
.hide12,
.hide16 {
display: block;
}
.hide9 {
display: none;
}
}
/*
========================================
::12 Columns
========================================
*/
@media screen and (min-width: 721px) and (max-width: 960px) {
.size1of12 { width: 8.33333%; }
.size2of12 { width: 16.66666%; }
.size3of12 { width: 25%; }
.size4of12 { width: 33.33333%; }
.size5of12 { width: 41.66666%; }
.size6of12 { width: 50%; }
.size7of12 { width: 58.33333%; }
.size8of12 { width: 66.66666%; }
.size9of12 { width: 75%; }
.size10of12 { width: 83.33333%; }
.size11of12 { width: 91.66666%; }
.size12of12 { width: 100%; }
.shift1of12 { margin-left: 8.33333%; }
.shift2of12 { margin-left: 16.66666%; }
.shift3of12 { margin-left: 25%; }
.shift4of12 { margin-left: 33.33333%; }
.shift5of12 { margin-left: 41.66666%; }
.shift6of12 { margin-left: 50%; }
.shift7of12 { margin-left: 58.33333%; }
.shift8of12 { margin-left: 66.66666%; }
.shift9of12 { margin-left: 75%; }
.shift10of12 { margin-left: 83.33333%; }
.shift11of12 { margin-left: 91.66666%; }
.shift12of12 { margin-left: 100%; }
.hide4,
.hide6,
.hide9,
.hide16 {
display: block;
}
.hide12 {
display: none;
}
}
/*
========================================
::12 Columns
========================================
*/
@media screen and (min-width: 961px) {
.size1of16 { width: 6.25%; }
.size2of16 { width: 12.5%; }
.size3of16 { width: 18.75%; }
.size4of16 { width: 25%; }
.size5of16 { width: 31.25%; }
.size6of16 { width: 37.5%; }
.size7of16 { width: 43.75%; }
.size8of16 { width: 50%; }
.size9of16 { width: 56.25%; }
.size10of16 { width: 62.5%; }
.size11of16 { width: 68.75%; }
.size12of16 { width: 75%; }
.size13of16 { width: 81.25%; }
.size14of16 { width: 87.5%; }
.size15of16 { width: 93.75%; }
.size16of16 { width: 100%; }
.shift1of16 { margin-left: 6.25%; }
.shift2of16 { margin-left: 12.5%; }
.shift3of16 { margin-left: 18.75%; }
.shift4of16 { margin-left: 25%; }
.shift5of16 { margin-left: 31.25%; }
.shift6of16 { margin-left: 37.5%; }
.shift7of16 { margin-left: 43.75%; }
.shift8of16 { margin-left: 50%; }
.shift9of16 { margin-left: 56.25%; }
.shift10of16 { margin-left: 62.5%; }
.shift11of16 { margin-left: 68.75%; }
.shift12of16 { margin-left: 75%; }
.shift16of16 { margin-left: 100%; }
.hide4,
.hide6,
.hide9,
.hide12 {
display: block;
}
.hide16 {
display: none;
}
}
/*
========================================
::Clearfix
========================================
*/
.group,
.container > .inner,
.content > .inner {
*zoom: 1;
}
.group:before,
.group:after,
.container > .inner:before,
.container > .inner:after,
.content > .inner:before,
.content > .inner:after {
display: table;
content: " ";
}
.group:after,
.container > .inner:after,
.content > .inner:after {
clear: both;
}