/* layout is based on 4 column (200px ea.) with 32px gutters.
width: 900px = (200x4 + 32x3) + 4px for cushion.
CSS LAYOUT
"content-wrapper" selector is first used as a container to center the content
"c" standing for container is declared in the selector table below. These containers are used
for layout of multiple configurations.
E.g creating a 2 column layout where the sidebar nav is located on the left would use
the selectors "c1" and "c8". Notice below how "c8" consumes 3 columns to make 1.
Code:
c0*****************************************
c1******** c2******** c3******** c4********
c5******************* c6*******************
c1******** c7******************* c4********
c1******** c8******************************
c9****************************** c4********
c10*********** c11*********** c12**********
c10*********** c13*************************
c14************************** c12**********
Module selectors need to be nested in each container before content can be added.
E.g. Selector "c1" needs a module selector "c1-mod" nested inside to accomodate for gutter padding
and for isolation in benefit for the ".callout" selector [highlighting content].
Code: