Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Columnal, almost but no cigar.

  • Loading branch information...
commit 41b6b723e0eccc0640e879cb5454e5ab6fb5700a 1 parent 4045b28
Leo Picado authored
126 .idea/workspace.xml
View
@@ -23,19 +23,10 @@
</component>
<component name="FileEditorManager">
<leaf>
- <file leaf-file-name="less.html" pinned="false" current="true" current-in-tab="true">
- <entry file="file://$PROJECT_DIR$/less.html">
+ <file leaf-file-name="columnal.html" pinned="false" current="true" current-in-tab="true">
+ <entry file="file://$PROJECT_DIR$/columnal.html">
<provider selected="true" editor-type-id="text-editor">
- <state line="19" column="33" selection-start="1135" selection-end="1135" vertical-scroll-proportion="-1.4213836">
- <folding />
- </state>
- </provider>
- </entry>
- </file>
- <file leaf-file-name="blueprint.html" pinned="false" current="false" current-in-tab="false">
- <entry file="file://$PROJECT_DIR$/blueprint.html">
- <provider selected="true" editor-type-id="text-editor">
- <state line="42" column="0" selection-start="2620" selection-end="2863" vertical-scroll-proportion="-12.034483">
+ <state line="12" column="67" selection-start="787" selection-end="787" vertical-scroll-proportion="0.40677965">
<folding />
</state>
</provider>
@@ -60,6 +51,7 @@
<option value="$PROJECT_DIR$/README.md" />
<option value="$PROJECT_DIR$/andytlr-cssgrid-3ddcd9f/css/1140.css" />
<option value="$PROJECT_DIR$/less.html" />
+ <option value="$PROJECT_DIR$/columnal.html" />
</list>
</option>
</component>
@@ -103,6 +95,60 @@
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
+ <PATH>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="grids" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="grids-comp" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="columnal-0.85" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ </PATH>
+ <PATH>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="grids" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="grids-comp" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="columnal-0.85" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="code" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ </PATH>
+ <PATH>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="grids" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="grids-comp" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="columnal-0.85" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="code" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ <PATH_ELEMENT>
+ <option name="myItemId" value="css" />
+ <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+ </PATH_ELEMENT>
+ </PATH>
</subPane>
</pane>
</panes>
@@ -177,7 +223,7 @@
</component>
<component name="ToolWindowManager">
<frame x="-8" y="10" width="1456" height="858" extended-state="6" />
- <editor active="false" />
+ <editor active="true" />
<layout>
<window_info id="Changes" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Phing Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
@@ -185,7 +231,7 @@
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.32907802" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="true" content_ui="tabs" />
<window_info id="Dependency Viewer" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
- <window_info id="Project" active="true" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.20674802" sideWeight="0.670922" order="0" side_tool="false" content_ui="tabs" />
+ <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.20674802" sideWeight="0.670922" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
@@ -241,21 +287,6 @@
<breakpoint-manager />
</component>
<component name="editorHistoryManager">
- <entry file="file://$PROJECT_DIR$/jonikorpi-Golden-Grid-System-e7c679c/GGS.html">
- <provider selected="true" editor-type-id="text-editor">
- <state line="46" column="19" selection-start="1357" selection-end="1357" vertical-scroll-proportion="-11.379311" />
- </provider>
- </entry>
- <entry file="file://$PROJECT_DIR$/jonikorpi-Golden-Grid-System-e7c679c/GGS.css">
- <provider selected="true" editor-type-id="text-editor">
- <state line="366" column="0" selection-start="6143" selection-end="6143" vertical-scroll-proportion="0.8206522" />
- </provider>
- </entry>
- <entry file="file://$PROJECT_DIR$/stackLayout.html">
- <provider selected="true" editor-type-id="text-editor">
- <state line="7" column="31" selection-start="463" selection-end="463" vertical-scroll-proportion="0.22190201" />
- </provider>
- </entry>
<entry file="file://$PROJECT_DIR$/yaml.html">
<provider selected="true" editor-type-id="text-editor">
<state line="19" column="7" selection-start="1212" selection-end="1212" vertical-scroll-proportion="0.6023055" />
@@ -303,13 +334,6 @@
</state>
</provider>
</entry>
- <entry file="file://$PROJECT_DIR$/960.html">
- <provider selected="true" editor-type-id="text-editor">
- <state line="8" column="11" selection-start="543" selection-end="543" vertical-scroll-proportion="-6.0689654">
- <folding />
- </state>
- </provider>
- </entry>
<entry file="file://$PROJECT_DIR$/jonikorpi-Less-Framework-d3d7877/README.markdown">
<provider selected="true" editor-type-id="text-editor">
<state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0">
@@ -340,7 +364,35 @@
</entry>
<entry file="file://$PROJECT_DIR$/less.html">
<provider selected="true" editor-type-id="text-editor">
- <state line="19" column="33" selection-start="1135" selection-end="1135" vertical-scroll-proportion="-1.4213836">
+ <state line="76" column="35" selection-start="4166" selection-end="4166" vertical-scroll-proportion="-57.655174">
+ <folding />
+ </state>
+ </provider>
+ </entry>
+ <entry file="file://$PROJECT_DIR$/960.html">
+ <provider selected="true" editor-type-id="text-editor">
+ <state line="8" column="11" selection-start="0" selection-end="3805" vertical-scroll-proportion="-0.7586207">
+ <folding />
+ </state>
+ </provider>
+ </entry>
+ <entry file="file://$PROJECT_DIR$/columnal-0.85/code/css/columnal.css">
+ <provider selected="true" editor-type-id="text-editor">
+ <state line="216" column="25" selection-start="6297" selection-end="6297" vertical-scroll-proportion="0.0">
+ <folding />
+ </state>
+ </provider>
+ </entry>
+ <entry file="file://$PROJECT_DIR$/columnal-0.85/code/css/build.css">
+ <provider selected="true" editor-type-id="text-editor">
+ <state line="10" column="26" selection-start="298" selection-end="298" vertical-scroll-proportion="-0.22406015">
+ <folding />
+ </state>
+ </provider>
+ </entry>
+ <entry file="file://$PROJECT_DIR$/columnal.html">
+ <provider selected="true" editor-type-id="text-editor">
+ <state line="12" column="67" selection-start="787" selection-end="787" vertical-scroll-proportion="0.40677965">
<folding />
</state>
</provider>
67 columnal-0.85/README.txt
View
@@ -0,0 +1,67 @@
+====================
+COLUMNAL GRID SYSTEM
+====================
+
+Columnal is a project created by Pulp+Pixels - www.pulpandpixels.com
+
+The Columnal CSS grid system is a "remix" of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. The CSS reset is the famous reset created by the CSS rockstar, Eric Meyer.
+
+Please visit columnal.com for more information on the grid system.
+
+===============================================
+
+The Columnal CSS includes necessary at the top of an html page should appear like the demo page, but similar to this:
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!-- The Columnal Grid (base, load first) -->
+ <link rel="stylesheet" href="css/columnal.css" type="text/css" media="screen" />
+
+<!-- Fixes for IE -->
+ <!--[if lt IE 9]>
+ <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
+ <![endif]-->
+
+ <!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 960px fixed width for IE6 and 7 -->
+ <!--[if lte IE 7]>
+ <link rel="stylesheet" href="css/fixed-984px-ie.css" type="text/css" media="screen" />
+ <![endif]-->
+
+<!-- Fixes for IE6, only needed if IE 6 will be supported - width must match 984px or 960px of css file used above -->
+<!-- Use .imagescale to fix IE6 issues with full-column width images (class must be added to any image wider than the column it is placed into) -->
+ <!--[if lte IE 6]>
+ <link rel="stylesheet" href="css/ie6-984px.css" type="text/css" media="screen" />
+ <![endif]-->
+ <!-- End fixes for IE -->
+
+<!-- Page building tools - Gray box colors and page debugging tools -->
+ <link rel="stylesheet" href="css/build.css" type="text/css" media="screen" />
+
+====================
+CSS FILES
+====================
+
+columnal.css
+ • HTML Reset (Eric Meyer HTML Reset)
+ • Type and image settings (Columnal comes with basic type presets, but custom type control is encouraged, another option is a CSS type framework such as Tripoli CSS from devkick
+ • Common base code for the CSS framework - this is where the columns are defined across browsers, and basic functions are added. Also includes Eric Meyer reset.
+ • Mobile stylesheet (moves the layout to a single column for mobile viewing)
+
+custom.css
+ • Place custom page layouts here - see notes in file
+
+build.css
+ • Page building tools - Gray box colors and page debugging tools
+
+====================
+CSS Files for Internet Explorer
+====================
+
+ie.css
+ CSS "fixes" for Internet Explorer (across versions), the fixed width for Internet Explorer 8 can be set at the bottom of this page, it is NOT SET by default. This means IE8 will follow the width of the browser down to a ridiculously thin dimension.
+
+fixed-984px-ie.css or fixed-960px-ie.css
+ CSS "fixes" for Internet Explorer 6 and 7. This sets the page width to a fixed width of either 984px or 960px, adding better support for the older browsers.
+
+ie6-984px.css or ie6-960px.css
+ CSS "fixes" unique to Internet Explorer 6. Fixes for IE6, only needed if IE 6 will be supported - use .imagescale to fix IE6 issues with full-column width images (class must be added to any image wider than the column it is placed into)
BIN  columnal-0.85/code/css/.DS_Store
View
Binary file not shown
42 columnal-0.85/code/css/build.css
View
@@ -0,0 +1,42 @@
+/*
+_______________________________
+BUILD.CSS - Tools for rapid prototyping and page debugging */
+
+.bg000 { background: #000; }
+.bg111 { background: #111; }
+.bg222 { background: #222; }
+.bg333 { background: #333; }
+.bg444 { background: #444; }
+.bg555 { background: #555; }
+.bg666 { background: #666; }
+.bg777 { background: #777; }
+.bg888 { background: #888; }
+.bg999 { background: #999; }
+.bgaaa { background: #aaa; }
+.bgbbb { background: #bbb; }
+.bgccc { background: #ccc; }
+.bgddd { background: #ddd; }
+.bgeee { background: #eee; }
+.bgfff { background: #fff; }
+
+
+/*
+_______________________________
+Columnal - debugging */
+
+.test .row {outline: 1px solid red !important;}
+
+.test .col_1, .test .col_2, .test .col_3, .test .col_4, .test .col_5, .test .col_6, .test .col_7, .test .col_8, .test .col_9, .test .ninecol,
+.test .col_10, .test .col_11, .test .col_12 {background-color: #FFEFF2; border-bottom: 1px solid red;}
+
+.test .col_2 .col_1,
+.test .col_3 .col_1, .test .col_3 .col_2,
+.test .col_4 .col_1, .test .col_4 .col_2, .test .col_4 .col_3,
+.test .col_5 .col_1, .test .col_5 .col_2, .test .col_5 .col_3, .test .col_5 .col_4,
+.test .col_6 .col_1, .test .col_6 .col_2, .test .col_6 .col_3, .test .col_6 .col_4, .test .col_6 .col_5,
+.test .col_7 .col_1, .test .col_7 .col_2, .test .col_7 .col_3, .test .col_7 .col_4, .test .col_7 .col_5, .test .col_7 .col_6,
+.test .col_8 .col_1, .test .col_8 .col_2, .test .col_8 .col_3, .test .col_8 .col_4, .test .col_8 .col_5, .test .col_8 .col_6, .test .col_8 .col_7,
+.test .col_9 .col_1, .test .col_9 .col_2, .test .col_9 .col_3, .test .col_9 .col_4, .test .col_9 .col_5, .test .col_9 .col_6, .test .col_9 .col_7, .test .col_9 .col_8,
+.test .col_10 .col_1, .test .col_10 .col_2, .test .col_10 .col_3, .test .col_10 .col_4, .test .col_10 .col_5, .test .col_10 .col_6, .test .col_10 .col_7, .test .col_10 .col_8, .test .col_10 .col_9,
+.test .col_11 .col_1, .test .col_11 .col_2, .test .col_11 .col_3, .test .col_11 .col_4, .test .col_11 .col_5, .test .col_11 .col_6, .test .col_11 .col_7, .test .col_11 .col_8, .test .col_11 .col_9, .test .col_11 .col_10,
+.test .col_12 .col_1, .test .col_12 .col_2, .test .col_12 .col_3, .test .col_12 .col_4, .test .col_12 .col_5, .test .col_12 .col_6, .test .col_12 .col_7, .test .col_12 .col_8, .test .col_12 .col_9, .test .col_12 .col_10, .test .col_12 .col_11 {background-color: #ffc0cb; border-bottom: 1px solid red;}
571 columnal-0.85/code/css/columnal.css
View
@@ -0,0 +1,571 @@
+/* HTML RESET
+///////////////////////////////////////////// */
+
+/*
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {display: block;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {border-collapse: collapse;border-spacing: 0;}
+
+/* END HTML RESET
+///////////////////////////////////////////// */
+
+
+
+
+
+
+
+
+
+
+/* TYPE PRESETS
+///////////////////////////////////////////// */
+/*
+_______________________________
+Columnal - TYPE (basic settings to make type look nice) */
+
+body {
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 100%;
+ color: #444;
+
+ line-height: 1.6em; /* from cssgrid.net */
+ -webkit-text-size-adjust: none; /* from cssgrid.net */ /* Stops the iPhone scalling type up - from cssgrid.net */
+ }
+
+/* h1, h2, h3, h4, h5, h6 { letter-spacing: 1px; } */
+
+h1, h2, h3, h4, h5, h6, p, dl, hr, ol, ul, pre, table, address, fieldset {margin-bottom: 1.6em;}
+
+/* Add back in basic text markup (after removal by reset) */
+strong { font-weight: bold; }
+em { font-style:italic; }
+pre { font-family: "Courier New", Courier, monospace; font-size: 13px; font-weight:bold; }
+
+/* text colors, add custom colors here to match your site */
+.teal { color: #155f62; }
+
+/* link colors */
+a { color: #058; text-decoration:none; }
+a:visited { color:#c14b0d; text-decoration:none; }
+a:hover { color:#eb6721; text-decoration:underline; }
+a:focus { outline:1px dotted #79160d; }
+
+/* .row hr, .row p, .row ul, .row ol, .row dl, .row pre, .row address, .row table, .row form {margin-bottom: 1.6em;} */
+
+dt { font-weight: bold; }
+p { font-size: 1em; }
+p + p, p + ul {margin-top: -.8em;}
+h1 { font-size: 2em; line-height:1.2em; font-weight:normal; margin:1em 0 .5em; }
+p + h1 { margin-top:.5em; }
+h2, h3, h4, h5, h6 { font-weight: bold; }
+ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0;} /* fix for weird Chrome collapse bug */
+h2 { font-size:1.7em; line-height:1.3em; margin:1.07em 0 .535em; }
+h3 { font-size:1.3em; margin:1.14em 0 .57em 0; }
+h4 { font-size:1.25em; margin:1em 0 .5em; }
+h5, h6 { font-size: 1em; margin:1em 0 .25em 0; }
+
+ol { margin-left: 0; padding-left: 20px; text-indent: 0; }
+ul {list-style:disc outside;}
+li { font-size: 15px; margin-bottom: 2px; margin-left: 20px; }
+blockquote { font-family: Georgia, "Times New Roman", Times, sans-serif; font-size:18px; line-height: 24px; font-style:italic; padding-left:35px; color: #999; margin: .5em 0 .5em 0; }
+
+input, textarea { font: .75em Arial, "Helvetica Neue", Helvetica, sans-serif; }
+
+hr { background:black; border:none; color:black; display:block; height:1px; margin-top: 20px; width:100%;}
+
+
+/*
+_______________________________
+Columnal - reverse type presets (for text on dark backgrounds) */
+.reverse h1, .reverse h2, .reverse h3, .reverse h4, .reverse h5, .reverse h6 {color: white;}
+.reverse p, .reverse ul {color: #aaa;}
+
+
+/*
+_______________________________
+IMAGE basics */
+img, object, embed {margin-bottom: 20px;}
+img {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ margin-bottom: 20px;
+}
+a img {display: block; /* Stops image links getting text link styles */}
+
+/* END TYPE PRESETS
+///////////////////////////////////////////// */
+
+
+
+
+
+
+
+
+
+
+
+
+/* COLUMNAL - CORE
+///////////////////////////////////////////// */
+
+/* Column code based on work from cssgrid.net:
+The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com */
+.container {padding-left: 20px; padding-right: 20px;}
+.row {clear: both; width: 100%; max-width: 1140px; margin: 0 auto; overflow: hidden;}
+
+.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 {float: left; margin-right: 3.8%; position: relative;}
+
+.col_1 {width: 4.85%;} /* ie - 4.7% */
+.col_2 {width: 13.5%;} /* ie - 13.2% */
+.col_3 {width: 22.15%;} /* ie - 22.05% */
+.col_4 {width: 30.8%;} /* ie - 30.6% */
+.col_5 {width: 39.45%;} /* ie - 39% */
+.col_6 {width: 48.1%;} /* ie - 48% */
+.col_7 {width: 56.75%;} /* ie - 56.75% */
+.col_8 {width: 65.4%;} /* ie - 61.6% */
+.col_9 {width: 74.05%;} /* ie - 74.05% */
+.col_10 {width: 82.7%;} /* ie - 82.7% */
+.col_11 {width: 91.35%;}/* ie - 91.35% */
+.col_12 {clear: both; width: 100%; float: left;}
+
+
+.last, .omega {margin-right: 0 !important;}
+img, object, embed {max-width: 100%;}
+
+
+/*
+_______________________________
+Columnal - sub-columns */
+
+.col_2 .col_1 {margin-right:28.62%; width:35.69%;}
+.col_2 .pre_1 {padding-left:35.69%;}
+.col_2 .suf_1 {padding-right:35.69%;}
+
+/* */
+
+.col_3 .col_2, .col_3 .col_1 {margin-right:17.45%;}
+.col_3 .col_1 {width:21.7%;}
+.col_3 .col_2 {width:60.86%;}
+
+.col_3 .pre_1 {padding-left:21.7%;}
+.col_3 .pre_2 {padding-left:60.86%;}
+
+.col_3 .suf_1 {padding-right:21.7%;}
+.col_3 .suf_2 {padding-right:60.86%;}
+
+/* */
+
+.col_4 .col_3, .col_4 .col_2, .col_4 .col_1 {margin-right:12.36%;}
+.col_4 .col_1 {width:15.73%;}
+.col_4 .col_2 {width:43.82%;}
+.col_4 .col_3 {width:71.91%;}
+
+.col_4 .pre_1 {padding-left:28.09%;}
+.col_4 .pre_2 {padding-left:56.18%;}
+.col_4 .pre_3 {padding-left:84.27%;}
+
+.col_4 .suf_1 {padding-right:28.09%;}
+.col_4 .suf_2 {padding-right:56.18%;}
+.col_4 .suf_3 {padding-right:84.27%;}
+
+/* */
+
+.col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1 {margin-right:9.7%;}
+.col_5 .col_1 {width:12.24%;}
+.col_5 .col_2 {width:34%;}
+.col_5 .col_3 {width:56.28%;}
+.col_5 .col_4 {width:78%;}
+
+.col_5 .pre_1 {padding-left:21.94%;}
+.col_5 .pre_2 {padding-left:43.7%;}
+.col_5 .pre_3 {padding-left:65.98%;}
+.col_5 .pre_4 {padding-left:87.7%;}
+
+.col_5 .suf_1 {padding-right:21.94%;}
+.col_5 .suf_2 {padding-right:43.7%;}
+.col_5 .suf_3 {padding-right:65.98%;}
+.col_5 .suf_4 {padding-right:87.7%;}
+
+/* */
+
+.col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1 {margin-right:7.77%}
+.col_6 .col_1 {width:10.19%;}
+.col_6 .col_2 {width: 28.13%;}
+.col_6 .col_3 {width: 46.11%;}
+.col_6 .col_4 {width: 64.1%;}
+.col_6 .col_5 {width: 82%;}
+
+.col_6 .pre_1 {padding-left:89.77%;}
+.col_6 .pre_2 {padding-left:71.87%;}
+.col_6 .pre_3 {padding-left:53.88%;}
+.col_6 .pre_4 {padding-left:35.9%;}
+.col_6 .pre_5 {padding-left:17.96%;}
+
+.col_6 .suf_1 {padding-right:89.77%;}
+.col_6 .suf_2 {padding-right:71.87%;}
+.col_6 .suf_3 {padding-right:53.88%;}
+.col_6 .suf_4 {padding-right:35.9%;}
+.col_6 .suf_5 {padding-right:17.96%;}
+
+/* */
+
+.col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1 {margin-right: 6.56%;}
+.col_7 .col_1 {width:8.66%;}
+.col_7 .col_2 {width:23.88%;}
+.col_7 .col_3 {width:39.11%;}
+.col_7 .col_4 {width:54.33%;}
+.col_7 .col_5 {width:69.56%;}
+.col_7 .col_6 {width:84.78%;}
+
+.col_7 .pre_1 {padding-left:15.22%;}
+.col_7 .pre_2 {padding-left:30.44%;}
+.col_7 .pre_3 {padding-left:45.67%;}
+.col_7 .pre_4 {padding-left:60.89%;}
+.col_7 .pre_5 {padding-left:76.12%;}
+.col_7 .pre_6 {padding-left:91.34%;}
+
+.col_7 .suf_1 {padding-right:15.22%;}
+.col_7 .suf_2 {padding-right:30.44%;}
+.col_7 .suf_3 {padding-right:45.67%;}
+.col_7 .suf_4 {padding-right:60.89%;}
+.col_7 .suf_5 {padding-right:76.12%;}
+.col_7 .suf_6 {padding-right:91.34%;}
+
+/* */
+
+.col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1 {margin-right:5.78%;}
+.col_8 .col_1 {width:7.44%;}
+.col_8 .col_2 {width:20.66%;}
+.col_8 .col_3 {width:33.89%;}
+.col_8 .col_4 {width:47.11%;}
+.col_8 .col_5 {width:60.33%;}
+.col_8 .col_6 {width:73.56%;}
+.col_8 .col_7 {width:86.78%;}
+
+.col_8 .pre_1 {padding-left:13.22%;}
+.col_8 .pre_2 {padding-left:26.44%;}
+.col_8 .pre_3 {padding-left:39.67%;}
+.col_8 .pre_4 {padding-left:52.89%;}
+.col_8 .pre_5 {padding-left:66.11%;}
+.col_8 .pre_6 {padding-left:79.34%;}
+.col_8 .pre_7 {padding-left:92.56%;}
+
+.col_8 .suf_1 {padding-right:13.22%;}
+.col_8 .suf_2 {padding-right:26.44%;}
+.col_8 .suf_3 {padding-right:39.67%;}
+.col_8 .suf_4 {padding-right:52.89%;}
+.col_8 .suf_5 {padding-right:66.11%;}
+.col_8 .suf_6 {padding-right:79.34%;}
+.col_8 .suf_7 {padding-right:92.56%;}
+
+/* */
+
+.col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8 {margin-right:5.1%;}
+.col_9 .col_1 {width:6.57%;}
+.col_9 .col_2 {width:18.25%;}
+.col_9 .col_3 {width:29.93%;}
+.col_9 .col_4 {width:41.61%;}
+.col_9 .col_5 {width:53.25%}
+.col_9 .col_6 {width:64.97%;}
+.col_9 .col_7 {width:76.65%;}
+.col_9 .col_8 {width:88.33%;}
+
+.col_9 .pre_1 {padding-left:11.67%;}
+.col_9 .pre_2 {padding-left:23.35%;}
+.col_9 .pre_3 {padding-left:35.03%;}
+.col_9 .pre_4 {padding-left:46.71%;}
+.col_9 .pre_5 {padding-left:58.35%}
+.col_9 .pre_6 {padding-left:70.07%;}
+.col_9 .pre_7 {padding-left:81.75%;}
+.col_9 .pre_8 {padding-left:93.43%;}
+
+.col_9 .suf_1 {padding-right:11.67%;}
+.col_9 .suf_2 {padding-right:23.35%;}
+.col_9 .suf_3 {padding-right:35.03%;}
+.col_9 .suf_4 {padding-right:46.71%;}
+.col_9 .suf_5 {padding-right:58.35%}
+.col_9 .suf_6 {padding-right:70.07%;}
+.col_9 .suf_7 {padding-right:81.75%;}
+.col_9 .suf_8 {padding-right:93.43%;}
+
+/* */
+
+.col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1 {margin-right:4.61%;}
+.col_10 .col_1 {width:5.85%;}
+.col_10 .col_2 {width:16.31%;}
+.col_10 .col_3 {width:26.77%;}
+.col_10 .col_4 {width:37.23%;}
+.col_10 .col_5 {width:47.69%;}
+.col_10 .col_6 {width:58.16%;}
+.col_10 .col_7 {width:68.62%;}
+.col_10 .col_8 {width:79.08%;}
+.col_10 .col_9 {width:89.54%;}
+
+.col_10 .pre_1 {padding-left:10.46%;}
+.col_10 .pre_2 {padding-left:20.92%;}
+.col_10 .pre_3 {padding-left:31.38%;}
+.col_10 .pre_4 {padding-left:41.84%;}
+.col_10 .pre_5 {padding-left:52.3%;}
+.col_10 .pre_6 {padding-left:62.77%;}
+.col_10 .pre_7 {padding-left:73.23%;}
+.col_10 .pre_8 {padding-left:83.69%;}
+.col_10 .pre_9 {padding-left:94.06%;}
+
+.col_10 .suf_1 {padding-right:10.46%;}
+.col_10 .suf_2 {padding-right:20.92%;}
+.col_10 .suf_3 {padding-right:31.38%;}
+.col_10 .suf_4 {padding-right:41.84%;}
+.col_10 .suf_5 {padding-right:52.3%;}
+.col_10 .suf_6 {padding-right:62.77%;}
+.col_10 .suf_7 {padding-right:73.23%;}
+.col_10 .suf_8 {padding-right:83.69%;}
+.col_10 .suf_9 {padding-right:94.06%;}
+
+/* */
+
+.col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1 {margin-right:4.14%;}
+.col_11 .col_1 {width:5.32%;}
+.col_11 .col_2 {width:14.79%;}
+.col_11 .col_3 {width:24.26%;}
+.col_11 .col_4 {width:33.73%;}
+.col_11 .col_5 {width:43.2%;}
+.col_11 .col_6 {width:52.66%;}
+.col_11 .col_7 {width:62.1%;}
+.col_11 .col_8 {width:71.6%;}
+.col_11 .col_9 {width:81.07%;}
+.col_11 .col_10 {width:90.54%;}
+
+.col_11 .pre_1 {padding-left:9.46%;}
+.col_11 .pre_2 {padding-left:18.93%;}
+.col_11 .pre_3 {padding-left:28.4%;}
+.col_11 .pre_4 {padding-left:37.87%;}
+.col_11 .pre_5 {padding-left:47.34%;}
+.col_11 .pre_6 {padding-left:56.8%;}
+.col_11 .pre_7 {padding-left:66.24%;}
+.col_11 .pre_8 {padding-left:75.74%;}
+.col_11 .pre_9 {padding-left:85.21%;}
+.col_11 .pre_10 {padding-left:94.68%;}
+
+.col_11 .suf_1 {padding-right:9.46%;}
+.col_11 .suf_2 {padding-right:18.93%;}
+.col_11 .suf_3 {padding-right:28.4%;}
+.col_11 .suf_4 {padding-right:37.87%;}
+.col_11 .suf_5 {padding-right:47.34%;}
+.col_11 .suf_6 {padding-right:56.8%;}
+.col_11 .suf_7 {padding-right:66.24%;}
+.col_11 .suf_8 {padding-right:75.74%;}
+.col_11 .suf_9 {padding-right:85.21%;}
+.col_11 .suf_10 {padding-right:94.68%;}
+
+/*
+_______________________________
+Columnal - prefix and suffix columns for horizontal spacing options */
+
+/* spacing for before column */
+.pre_1 {padding-left: 8.65%;} /* 4.85 + 3.8 */
+.pre_2 {padding-left: 17.3%;} /* 13.5 + 3.8 */
+.pre_3 {padding-left: 25.95%;} /* 22.15 + 3.8 */
+.pre_4 {padding-left: 34.6%;} /* 30.8 + 3.8 */
+.pre_5 {padding-left: 43.25%;} /* 39.45 + 3.8 */
+.pre_6 {padding-left: 51.9%;} /* 48.1 + 3.8 */
+.pre_7 {padding-left: 60.55%;} /* 56.75 + 3.8 */
+.pre_8 {padding-left: 69.2%;} /* 65.4 + 3.8 */
+.pre_9 {padding-left: 77.85%;} /* 74.05 + 3.8 */
+.pre_10 {padding-left: 86.5%;} /* 82.7 + 3.8 */
+.pre_11 {padding-left: 95.15%;} /* 91.35 + 3.8 */
+
+/* spacing for after column */
+.suf_1 {padding-right: 8.65%;}
+.suf_2 {padding-right: 17.3%;}
+.suf_3 {padding-right: 25.95%}
+.suf_4 {padding-right: 34.6%;}
+.suf_5 {padding-right: 43.25%;}
+.suf_6 {padding-right: 51.9%;}
+.suf_7 {padding-right: 60.55%;}
+.suf_8 {padding-right: 69.2%;}
+.suf_9 {padding-right: 77.85%;}
+.suf_10 {padding-right: 86.5%;}
+.suf_11 {padding-right: 95.15%;}
+
+/*
+_______________________________
+Columnal - vertical spacing options */
+
+.margin_top_5 {margin-top: 5px !important;}
+.margin_top_15 {margin-top: 15px !important;}
+.margin_top_25 {margin-top: 25px !important;}
+.margin_top_30 {margin-top: 30px !important;}
+.margin_top_35 {margin-top: 35px !important;}
+.margin_top_45 {margin-top: 45px !important;}
+.margin_top_60 {margin-top: 60px !important;}
+.margin_top_90 {margin-top: 90px !important;}
+.margin_top_120 {margin-top: 120px !important;}
+
+.margin_bottom_5 {margin-bottom: 5px !important;}
+.margin_bottom_15 {margin-bottom: 15px !important;}
+.margin_bottom_25 {margin-bottom: 25px !important;}
+.margin_bottom_30 {margin-bottom: 30px !important;}
+.margin_bottom_35 {margin-bottom: 35px !important;}
+.margin_bottom_45 {margin-bottom: 45px !important;}
+.margin_bottom_60 {margin-bottom: 60px !important;}
+.margin_bottom_90 {margin-bottom: 90px !important;}
+.margin_bottom_120 {margin-bottom: 120px !important;}
+
+.padding_top_15 {padding-top:15px !important;}
+.padding_top_30 {padding-top:30px !important;}
+.padding_top_45 {padding-top:45px !important;}
+.padding_top_60 {padding-top:60px !important;}
+.padding_top_90 {padding-top:90px !important;}
+.padding_top_120 {padding-top:120px !important;}
+.padding_top_130 {padding-top:130px !important;}
+
+.padding_bottom_15 {padding-bottom:15px !important;}
+.padding_bottom_30 {padding-bottom:30px !important;}
+.padding_bottom_45 {padding-bottom:45px !important;}
+.padding_bottom_60 {padding-bottom:60px !important;}
+.padding_bottom_90 {padding-bottom:90px !important;}
+.padding_bottom_120 {padding-bottom:120px !important;}
+.padding_bottom_130 {padding-bottom:130px !important;}
+
+
+
+/*
+_______________________________
+Columnal - extras */
+
+.clear, .clearboth {clear:both !important;}
+.clearleft {clear:left !important;}
+.clearright {clear:right !important;}
+
+.textcenter {text-align:center;}
+.textright {text-align:right;}
+.textleft {text-align:left;}
+
+/* this will insert a pseduo element clears floats for an element containing floated content */
+.selfclear:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
+
+.mobile-only {display: none;}
+
+/* END COLUMNAL - CORE CODE
+///////////////////////////////////////////// */
+
+
+
+
+
+
+
+
+
+
+
+
+/* COLUMNAL - MOBILE
+///////////////////////////////////////////// */
+
+@media handheld, only screen and (max-width: 767px) {
+ .row, .body, .container {
+ width: 100%;
+ margin-left:0;
+ margin-right:0;
+ padding-left:0;
+ padding-right:0;
+ }
+ /* kill prefixes and suffixes, otherwise 1-column version breaks */
+ .pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11 {padding-left: 0;}
+ .suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11 {padding-right: 0;}
+
+ /************************************************************************/
+
+ /* cssgrid.net - mobile presets */
+ .col_1, .col_2, .col_3, .col_4, .col_5, .col_6,
+ .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
+ clear: both;
+ float: none;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 20px;
+ padding-right: 20px;
+ width: auto;
+ width: -moz-available;
+ }
+
+
+ /* Columnal - sub columns */
+ .col_2 .col_1,
+ .col_3 .col_2, .col_3 .col_1,
+ .col_4 .col_3, .col_4 .col_2, .col_4 .col_1,
+ .col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1,
+ .col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1,
+ .col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1,
+ .col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1,
+ .col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8,
+ .col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1,
+ .col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1,
+ .col_12 .col_11, .col_12 .col_10, .col_12 .col_9, .col_12 .col_8, .col_12 .col_7, .col_12 .col_6, .col_12 .col_5, .col_12 .col_4, .col_12 .col_3, .col_12 .col_2, .col_12 .col_1 {
+ padding-left: 0;
+ padding-right: 0;
+ width: 100%;
+ }
+
+ /* .row {width: 100%;} */
+ /* Type presets */
+ .container h1 {margin:.5em 0 .5em;}
+ .container h2 {margin:.5em 0 .535em;}
+ .container h3 {margin:.5em 0 .57em;}
+ .container h4 {margin:.5em 0 .615em;}
+ .container h5 {margin:.5em 0 .67em;}
+ .container h6 {margin:.5em 0 .8em;}
+
+ /* .reverse {padding-top: 1em; margin-bottom: 1em;} */
+
+ /* Columnal content control - use on any elements to show/hide content on mobile */
+ .mobile-hide {display: none;}
+ .mobile-only {display: block;}
+
+ /*****************************************
+ CUSTOM ADDITIONS FOR MOBILE SITE LAYOUT
+ *****************************************/
+
+
+
+}
+/* END COLUMNAL - MOBILE
+///////////////////////////////////////////// */
38 columnal-0.85/code/css/custom.css
View
@@ -0,0 +1,38 @@
+/*
+_______________________________
+Desktop version layout - place your custom code here */
+
+body {
+
+}
+
+
+
+
+/*
+_______________________________
+Mobile version - preset code from cssgrid.net */
+
+@media handheld, only screen and (max-width: 767px) {
+
+ .examplecontainer {}
+
+ body {}
+
+}
+
+
+/*
+_______________________________
+Provide higher res assets for iPhone 4 - preset code from cssgrid.net */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+
+ /* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
+ .download {
+ background: url(../img/downarrow@2x.png) no-repeat;
+ background-size: 27px 28px;
+ }
+ */
+
+}
118 columnal-0.85/code/css/fixed-960px-ie.css
View
@@ -0,0 +1,118 @@
+/*
+_______________________________
+Columnal - Fixed pixel widths for Internet Explorer 6 and 7 = width 960px (content area is really 940px) total */
+
+.row {
+ margin-left: auto;
+ margin-right: auto;
+ width: 940px !important;
+ }
+
+.last, .omega {
+ margin-right: 0 !important;
+ padding-right: 0 !important;
+}
+
+.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 { display:inline; position: relative; }
+
+.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 { margin-right: 20px; }
+
+.col_1 { width: 60px; }
+.col_2 { width: 140px; }
+.col_3 { width: 220px; }
+.col_4 { width: 300px; }
+.col_5 { width: 380px; }
+.col_6 { width: 460px; }
+.col_7 { width: 540px; }
+.col_8 { width: 620px; }
+.col_9 { width: 700px; }
+.col_10 { width: 780px; }
+.col_11 { width: 860px; }
+.col_12 { clear: both; width: 940px; }
+
+
+/*
+_______________________________
+Columnal - addition */
+
+/* spacing for before column */
+.pre_1 { padding-left: 80px; }
+.pre_2 { padding-left: 160px; }
+.pre_3 { padding-left: 240px; }
+.pre_4 { padding-left: 320px; }
+.pre_5 { padding-left: 400px; }
+.pre_6 { padding-left: 480px; }
+.pre_7 { padding-left: 560px; }
+.pre_8 { padding-left: 640px; }
+.pre_9 { padding-left: 720px; }
+.pre_10 { padding-left: 800px; }
+.pre_11 { padding-left: 880px; }
+
+/* spacing for after column */
+.suf_1 { padding-right: 80px; }
+.suf_2 { padding-right: 160px; }
+.suf_3 { padding-right: 240px; }
+.suf_4 { padding-right: 320px; }
+.suf_5 { padding-right: 400px; }
+.suf_6 { padding-right: 480px; }
+.suf_7 { padding-right: 560px; }
+.suf_8 { padding-right: 640px; }
+.suf_9 { padding-right: 720px; }
+.suf_10 { padding-right: 800px; }
+.suf_11 { padding-right: 880px; }
+
+/*
+_______________________________
+Columnal - sub-columns */
+
+/* NOTE: This fixes IE 6 and 7 using the percentage spacing used in prior css files. This is mostly an issue with IE6. */
+
+.col_2 .col_1,
+.col_3 .col_2, .col_3 .col_1,
+.col_4 .col_3, .col_4 .col_2, .col_4 .col_1,
+.col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1,
+.col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1,
+.col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1,
+.col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1,
+.col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8,
+.col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1,
+.col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1 { margin-right: 20px; }
+
+.col_2 .col_1, .col_3 .col_1, .col_4 .col_1, .col_5 .col_1, .col_6 .col_1, .col_7 .col_1, .col_8 .col_1, .col_9 .col_1, .col_10 .col_1, .col_11 .col_1 { width: 60px; }
+.col_3 .col_2, .col_4 .col_2, .col_5 .col_2, .col_6 .col_2, .col_7 .col_2, .col_8 .col_2, .col_9 .col_2, .col_10 .col_2, .col_11 .col_2 { width: 140px; }
+.col_4 .col_3, .col_5 .col_3, .col_6 .col_3, .col_7 .col_3, .col_8 .col_3, .col_9 .col_3, .col_10 .col_3, .col_11 .col_3 { width: 220px; }
+.col_5 .col_4, .col_6 .col_4, .col_7 .col_4, .col_8 .col_4, .col_9 .col_4, .col_10 .col_4, .col_11 .col_4 { width: 300px; }
+.col_6 .col_5, .col_7 .col_5, .col_8 .col_5, .col_9 .col_5, .col_10 .col_5, .col_11 .col_5 { width: 380px; }
+.col_7 .col_6, .col_8 .col_6, .col_9 .col_6, .col_10 .col_6, .col_11 .col_6 { width: 460px; }
+.col_8 .col_7, .col_9 .col_7, .col_10 .col_7, .col_11 .col_7 { width: 540px; }
+.col_9 .col_8, .col_10 .col_8, .col_11 .col_8 { width: 620px; }
+.col_10 .col_9, .col_11 .col_9 { width: 700px; }
+.col_11 .col_10 { width: 780px; }
+
+.col_2 .pre_1, .col_3 .pre_1, .col_4 .pre_1, .col_5 .pre_1, .col_6 .pre_1, .col_7 .pre_1, .col_8 .pre_1, .col_9 .pre_1, .col_10 .pre_1, .col_11 .pre_1 { padding-left:80px; }
+.col_3 .pre_2, .col_4 .pre_2, .col_5 .pre_2, .col_6 .pre_2, .col_7 .pre_2, .col_8 .pre_2, .col_9 .pre_2, .col_10 .pre_2, .col_11 .pre_2 { padding-left: 160px; }
+.col_4 .pre_3, .col_5 .pre_3, .col_6 .pre_3, .col_7 .pre_3, .col_8 .pre_3, .col_9 .pre_3, .col_10 .pre_3, .col_11 .pre_3 { padding-left: 240px; }
+.col_5 .pre_4, .col_6 .pre_4, .col_7 .pre_4, .col_8 .pre_4, .col_9 .pre_4, .col_10 .pre_4, .col_11 .pre_4 { padding-left: 320px; }
+.col_6 .pre_5, .col_7 .pre_5, .col_8 .pre_5, .col_9 .pre_5, .col_10 .pre_5, .col_11 .pre_5 { padding-left: 400px; }
+.col_7 .pre_6, .col_8 .pre_6, .col_9 .pre_6, .col_10 .pre_6, .col_11 .pre_6 { padding-left: 480px; }
+.col_8 .pre_7, .col_9 .pre_7, .col_10 .pre_7, .col_11 .pre_7 { padding-left: 560px; }
+.col_9 .pre_8, .col_10 .pre_8, .col_11 .pre_8 { padding-left: 640px; }
+.col_10 .pre_9, .col_11 .pre_9 { padding-left: 720px; }
+.col_11 .pre_10 { padding-left: 800px; }
+
+.col_2 .suf_1, .col_3 .suf_1, .col_4 .suf_1, .col_5 .suf_1, .col_6 .suf_1, .col_7 .suf_1, .col_8 .suf_1, .col_9 .suf_1, .col_10 .suf_1, .col_11 .suf_1 { padding-right:84px; }
+.col_3 .suf_2, .col_4 .suf_2, .col_5 .suf_2, .col_6 .suf_2, .col_7 .suf_2, .col_8 .suf_2, .col_9 .suf_2, .col_10 .suf_2, .col_11 .suf_2 { padding-right: 160px; }
+.col_4 .suf_3, .col_5 .suf_3, .col_6 .suf_3, .col_7 .suf_3, .col_8 .suf_3, .col_9 .suf_3, .col_10 .suf_3, .col_11 .suf_3 { padding-right: 240px; }
+.col_5 .suf_4, .col_6 .suf_4, .col_7 .suf_4, .col_8 .suf_4, .col_9 .suf_4, .col_10 .suf_4, .col_11 .suf_4 { padding-right: 320px; }
+.col_6 .suf_5, .col_7 .suf_5, .col_8 .suf_5, .col_9 .suf_5, .col_10 .suf_5, .col_11 .suf_5 { padding-right: 400px; }
+.col_7 .suf_6, .col_8 .suf_6, .col_9 .suf_6, .col_10 .suf_6, .col_11 .suf_6 { padding-right: 480px; }
+.col_8 .suf_7, .col_9 .suf_7, .col_10 .suf_7, .col_11 .suf_7 { padding-right: 560px; }
+.col_9 .suf_8, .col_10 .suf_8, .col_11 .suf_8 { padding-right: 640px; }
+.col_10 .suf_9, .col_11 .suf_9 { padding-right: 720px; }
+.col_11 .suf_10 { padding-right: 800px; }
+
+/*
+--------------------------------------------------*/
+/* special debugging - fixes for debugging since outline is not supported in IE 6/7 */
+.container.test {background: #eee !important;}
+.container.test .row {background: white !important;}
118 columnal-0.85/code/css/fixed-984px-ie.css
View
@@ -0,0 +1,118 @@
+/*
+_______________________________
+Columnal - Fixed pixel widths for Internet Explorer 6 and 7 = width 948px total */
+
+.row {
+ margin-left: auto;
+ margin-right: auto;
+ width: 984px !important;
+ }
+
+.last, .omega {
+ margin-right: 0 !important;
+ padding-right: 0 !important;
+}
+
+.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 { display:inline; position: relative; }
+
+.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 { margin-right: 24px; }
+
+.col_1 { width: 60px; }
+.col_2 { width: 144px; }
+.col_3 { width: 228px; }
+.col_4 { width: 312px; }
+.col_5 { width: 396px; }
+.col_6 { width: 480px; }
+.col_7 { width: 564px; }
+.col_8 { width: 648px; }
+.col_9 { width: 732px; }
+.col_10 { width: 816px; }
+.col_11 { width: 900px; }
+.col_12 { clear: both; width: 984px; }
+
+
+/*
+_______________________________
+Columnal - addition */
+
+/* spacing for before column */
+.pre_1 { padding-left: 84px; }
+.pre_2 { padding-left: 168px; }
+.pre_3 { padding-left: 252px; }
+.pre_4 { padding-left: 336px; }
+.pre_5 { padding-left: 420px; }
+.pre_6 { padding-left: 504px; }
+.pre_7 { padding-left: 588px; }
+.pre_8 { padding-left: 672px; }
+.pre_9 { padding-left: 756px; }
+.pre_10 { padding-left: 840px; }
+.pre_11 { padding-left: 925px; }
+
+/* spacing for after column */
+.suf_1 { padding-right: 84px; }
+.suf_2 { padding-right: 168px; }
+.suf_3 { padding-right: 252px; }
+.suf_4 { padding-right: 336px; }
+.suf_5 { padding-right: 420px; }
+.suf_6 { padding-right: 504px; }
+.suf_7 { padding-right: 588px; }
+.suf_8 { padding-right: 672px; }
+.suf_9 { padding-right: 756px; }
+.suf_10 { padding-right: 840px; }
+.suf_11 { padding-right: 925px; }
+
+/*
+_______________________________
+Columnal - sub-columns */
+
+/* NOTE: This fixes IE 6 and 7 using the percentage spacing used in prior css files. This is mostly an issue with IE6. */
+
+.col_2 .col_1,
+.col_3 .col_2, .col_3 .col_1,
+.col_4 .col_3, .col_4 .col_2, .col_4 .col_1,
+.col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1,
+.col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1,
+.col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1,
+.col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1,
+.col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8,
+.col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1,
+.col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1 { margin-right: 24px; }
+
+.col_2 .col_1, .col_3 .col_1, .col_4 .col_1, .col_5 .col_1, .col_6 .col_1, .col_7 .col_1, .col_8 .col_1, .col_9 .col_1, .col_10 .col_1, .col_11 .col_1 { width: 60px; }
+.col_3 .col_2, .col_4 .col_2, .col_5 .col_2, .col_6 .col_2, .col_7 .col_2, .col_8 .col_2, .col_9 .col_2, .col_10 .col_2, .col_11 .col_2 { width: 144px; }
+.col_4 .col_3, .col_5 .col_3, .col_6 .col_3, .col_7 .col_3, .col_8 .col_3, .col_9 .col_3, .col_10 .col_3, .col_11 .col_3 { width: 228px; }
+.col_5 .col_4, .col_6 .col_4, .col_7 .col_4, .col_8 .col_4, .col_9 .col_4, .col_10 .col_4, .col_11 .col_4 { width: 312px; }
+.col_6 .col_5, .col_7 .col_5, .col_8 .col_5, .col_9 .col_5, .col_10 .col_5, .col_11 .col_5 { width: 396px; }
+.col_7 .col_6, .col_8 .col_6, .col_9 .col_6, .col_10 .col_6, .col_11 .col_6 { width: 480px; }
+.col_8 .col_7, .col_9 .col_7, .col_10 .col_7, .col_11 .col_7 { width: 564px; }
+.col_9 .col_8, .col_10 .col_8, .col_11 .col_8 { width: 648px; }
+.col_10 .col_9, .col_11 .col_9 { width: 732px; }
+.col_11 .col_10 { width: 816px; }
+
+.col_2 .pre_1, .col_3 .pre_1, .col_4 .pre_1, .col_5 .pre_1, .col_6 .pre_1, .col_7 .pre_1, .col_8 .pre_1, .col_9 .pre_1, .col_10 .pre_1, .col_11 .pre_1 { padding-left:84px; }
+.col_3 .pre_2, .col_4 .pre_2, .col_5 .pre_2, .col_6 .pre_2, .col_7 .pre_2, .col_8 .pre_2, .col_9 .pre_2, .col_10 .pre_2, .col_11 .pre_2 { padding-left: 168px; }
+.col_4 .pre_3, .col_5 .pre_3, .col_6 .pre_3, .col_7 .pre_3, .col_8 .pre_3, .col_9 .pre_3, .col_10 .pre_3, .col_11 .pre_3 { padding-left: 252px; }
+.col_5 .pre_4, .col_6 .pre_4, .col_7 .pre_4, .col_8 .pre_4, .col_9 .pre_4, .col_10 .pre_4, .col_11 .pre_4 { padding-left: 336px; }
+.col_6 .pre_5, .col_7 .pre_5, .col_8 .pre_5, .col_9 .pre_5, .col_10 .pre_5, .col_11 .pre_5 { padding-left: 420px; }
+.col_7 .pre_6, .col_8 .pre_6, .col_9 .pre_6, .col_10 .pre_6, .col_11 .pre_6 { padding-left: 504px; }
+.col_8 .pre_7, .col_9 .pre_7, .col_10 .pre_7, .col_11 .pre_7 { padding-left: 588px; }
+.col_9 .pre_8, .col_10 .pre_8, .col_11 .pre_8 { padding-left: 672px; }
+.col_10 .pre_9, .col_11 .pre_9 { padding-left: 756px; }
+.col_11 .pre_10 { padding-left: 840px; }
+
+.col_2 .suf_1, .col_3 .suf_1, .col_4 .suf_1, .col_5 .suf_1, .col_6 .suf_1, .col_7 .suf_1, .col_8 .suf_1, .col_9 .suf_1, .col_10 .suf_1, .col_11 .suf_1 { padding-right:84px; }
+.col_3 .suf_2, .col_4 .suf_2, .col_5 .suf_2, .col_6 .suf_2, .col_7 .suf_2, .col_8 .suf_2, .col_9 .suf_2, .col_10 .suf_2, .col_11 .suf_2 { padding-right: 168px; }
+.col_4 .suf_3, .col_5 .suf_3, .col_6 .suf_3, .col_7 .suf_3, .col_8 .suf_3, .col_9 .suf_3, .col_10 .suf_3, .col_11 .suf_3 { padding-right: 252px; }
+.col_5 .suf_4, .col_6 .suf_4, .col_7 .suf_4, .col_8 .suf_4, .col_9 .suf_4, .col_10 .suf_4, .col_11 .suf_4 { padding-right: 336px; }
+.col_6 .suf_5, .col_7 .suf_5, .col_8 .suf_5, .col_9 .suf_5, .col_10 .suf_5, .col_11 .suf_5 { padding-right: 420px; }
+.col_7 .suf_6, .col_8 .suf_6, .col_9 .suf_6, .col_10 .suf_6, .col_11 .suf_6 { padding-right: 504px; }
+.col_8 .suf_7, .col_9 .suf_7, .col_10 .suf_7, .col_11 .suf_7 { padding-right: 588px; }
+.col_9 .suf_8, .col_10 .suf_8, .col_11 .suf_8 { padding-right: 672px; }
+.col_10 .suf_9, .col_11 .suf_9 { padding-right: 756px; }
+.col_11 .suf_10 { padding-right: 840px; }
+
+/*
+--------------------------------------------------*/
+/* special debugging - fixes for debugging since outline is not supported in IE 6/7 */
+.container.test {background: #eee !important;}
+.container.test .row {background: white !important;}
62 columnal-0.85/code/css/ie.css
View
@@ -0,0 +1,62 @@
+/*
+_______________________________
+Columnal - General fixes for Internet Explorer */
+
+.col_1 {width: 4.855%;}
+.col_2 {width: 13.5%;}
+.col_3 {width: 22.15%;}
+.col_4 {width: 30.8%;}
+.col_5 {width: 39.405%;}
+.col_6 {width: 48.1%;}
+.col_7 {width: 56.75%;}
+.col_8 {width: 65.31%;}
+.col_9 {width: 74.05%;}
+.col_10 {width: 82.7%;}
+.col_11 {width: 91.35%;}
+
+
+/*
+_______________________________
+Columnal - sub-columns */
+
+.col_3 .col_2 {width:60.8%;}
+
+
+/*
+_______________________________
+Columnal - addition */
+
+/* spacing for before column */
+.pre_1 {padding-left: 8.5%;}
+.pre_2 {padding-left: 17%;}
+.pre_3 {padding-left: 25.85%;}
+.pre_4 {padding-left: 34.4%;}
+.pre_5 {padding-left: 42.8%;}
+.pre_6 {padding-left: 51.8%;}
+.pre_7 {padding-left: 60.55%;}
+.pre_8 {padding-left: 65.4%;}
+.pre_9 {padding-left: 77.85%;}
+.pre_10 {padding-left: 86.5%;}
+.pre_11 {padding-left: 95.15%;}
+
+/* spacing for after column */
+.suf_1 {padding-right: 8.5%;}
+.suf_2 {padding-right: 17%;}
+.suf_3 {padding-right: 25.85%;}
+.suf_4 {padding-right: 34.4%;}
+.suf_5 {padding-right: 42.8%;}
+.suf_6 {padding-right: 51.8%;}
+.suf_7 {padding-right: 60.55%;}
+.suf_8 {padding-right: 65.4%;}
+.suf_9 {padding-right: 77.85%;}
+.suf_10 {padding-right: 86.5%;}
+.suf_11 {padding-right: 95.15%;}
+
+/* Grid >> Push & Pull
+--------------------------------------------------*/
+.container.navhead .col_2,
+.container.navhead .col_2 a,
+.container.navhead .col_2 img {line-height: 1; margin: 0 !important; padding-top: 0 !important; }
+
+/* since min-width does not work on IE8, the width can be customized here to make it a fixed width (like Columnal 0.8+ now does for Internet Explorer 6 and 7), by default the width is set to 984px to match the wider option for Internet Explorer 6 and 7 */
+.row {width: 984px !important;}
14 columnal-0.85/code/css/ie6-960px.css
View
@@ -0,0 +1,14 @@
+/* tell IE 6 how to handle full-width images in a column */
+
+.col_1 img.fullwidth { width: 60px; }
+.col_2 img.fullwidth { width: 140px; }
+.col_3 img.fullwidth { width: 220px; }
+.col_4 img.fullwidth { width: 300px; }
+.col_5 img.fullwidth { width: 380px; }
+.col_6 img.fullwidth { width: 460px; }
+.col_7 img.fullwidth { width: 540px; }
+.col_8 img.fullwidth { width: 620px; }
+.col_9 img.fullwidth { width: 700px; }
+.col_10 img.fullwidth { width: 780px; }
+.col_11 img.fullwidth { width: 860px; }
+.col_12 img.fullwidth { width: 940px; }
14 columnal-0.85/code/css/ie6-984px.css
View
@@ -0,0 +1,14 @@
+/* tell IE 6 how to handle full-width images in a column */
+
+.col_1 img.fullwidth { width: 60px; }
+.col_2 img.fullwidth { width: 144px; }
+.col_3 img.fullwidth { width: 228px; }
+.col_4 img.fullwidth { width: 312px; }
+.col_5 img.fullwidth { width: 396px; }
+.col_6 img.fullwidth { width: 480px; }
+.col_7 img.fullwidth { width: 564px; }
+.col_8 img.fullwidth { width: 648px; }
+.col_9 img.fullwidth { width: 732px; }
+.col_10 img.fullwidth { width: 816px; }
+.col_11 img.fullwidth { width: 900px; }
+.col_12 img.fullwidth { width: 984px; }
4 columnal-0.85/code/css/smallerscreen.css
View
@@ -0,0 +1,4 @@
+body, .container {
+ font-size: 0.8em; /* Makes type a bit smaller at 1024 so layout doesn't look unbalanced */
+ line-height: 2.25em; /* As above */
+}
1,110 columnal-0.85/code/demo.html
View
@@ -0,0 +1,1110 @@
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
+
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
+ <meta charset="utf-8">
+
+ <title>Columnal Demo Page</title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- The Columnal Grid (1140px wide base, load first), Type and image presets, and mobile stylesheet -->
+ <link rel="stylesheet" href="css/columnal.css" type="text/css" media="screen" />
+
+<!-- Fixes for IE -->
+ <!--[if lt IE 9]>
+ <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
+ <![endif]-->
+
+<!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 960px fixed width for IE6 and 7 -->
+ <!--[if lte IE 7]>
+ <link rel="stylesheet" href="css/fixed-984px-ie.css" type="text/css" media="screen" />
+ <![endif]-->
+
+<!-- Fixes for IE6, only needed if IE 6 will be supported - width must match 984px or 960px of css file used above -->
+<!-- Use .imagescale to fix IE6 issues with full-column width images (class must be added to any image wider than the column it is placed into) -->
+ <!--[if lte IE 6]>
+ <link rel="stylesheet" href="css/ie6-984px.css" type="text/css" media="screen" />
+ <![endif]-->
+<!-- End fixes for IE -->
+
+<!-- Customizations here -->
+ <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen" />
+
+<!-- Page build tools - only needed while creating a site, remove when launching - Gray box colors and page debugging tools -->
+ <link rel="stylesheet" href="css/build.css" type="text/css" media="screen" />
+
+<style>
+<!--
+/* These are just styles for the demo, you do not need them for your project */
+body {padding-bottom: 40px;}
+.col_12.title {background-color: white !important; border-bottom: none;}
+-->
+</style>
+
+</head>
+<body>
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12">
+ <h1>Demo page for Columnal system (12-column grid)</h1>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<!-- -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
+ <div class="pre_1 col_1">pre_1</div>
+ <div class="pre_2 col_1">pre_2</div>
+ <div class="pre_3 col_1">pre_3</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
+ <div class="pre_4 col_1">pre_4</div>
+ <div class="pre_5 col_1">pre_5</div>
+ <div class="col_1 omega">&nbsp;</div>
+
+ </div>
+</div><!--class="container" -->
+
+<!-- -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>1-column</h4></div>
+ <div class="col_1 clearleft">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>2-column</h4></div>
+ <div class="col_2 clearleft">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>3-column</h4></div>
+ <div class="col_3 clearleft">&nbsp;</div>
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>4-column</h4></div>
+ <div class="col_4 clearleft">&nbsp;</div>
+ <div class="col_4">&nbsp;</div>
+ <div class="col_4 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>5-column + 2-column middle filler (to equal 12)</h4></div>
+ <div class="col_5 clearleft">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_5 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column</h4></div>
+ <div class="col_6 clearleft">&nbsp;</div>
+ <div class="col_6 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column + 5-column</h4></div>
+ <div class="col_7 clearleft">&nbsp;</div>
+ <div class="col_5 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column + 4-column</h4></div>
+ <div class="col_8 clearleft">&nbsp;</div>
+ <div class="col_4 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column + 3-column</h4></div>
+ <div class="col_9 clearleft">&nbsp;</div>
+ <div class="col_3 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>10-column + 2-column</h4></div>
+ <div class="col_10 clearleft">&nbsp;</div>
+ <div class="col_2 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>11-column + 1-column</h4></div>
+ <div class="col_11 clearleft">&nbsp;</div>
+ <div class="col_1 omega">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>12-column</h4></div>
+ <div class="col_12">&nbsp;</div>
+ </div>
+</div><!--class="container" -->
+
+
+
+<div class="container test spaceabove_1">
+ <div class="row">
+ <div class="col_12">
+ <h2>Sub columns (columns within columns), unique to Columnal</h2>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>2-column (1-column inside)</h4></div>
+ <div class="col_2">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_2">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_2">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_2">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_2">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_2 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>3-column (1-column inside)</h4></div>
+ <div class="col_3">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>3-column (2-column & 1-column inside)</h4></div>
+ <div class="col_3">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>4-column (1-column inside)</h4></div>
+ <div class="col_4">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_4">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>4-column (3-column & 1-column inside)</h4></div>
+ <div class="col_4">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_4">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>4-column (2-column & 2-column inside)</h4></div>
+ <div class="col_4">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_4">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>5-column (1-column inside) & 2-column @ end</h4></div>
+ <div class="col_5">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_5">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_2 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>5-column (2-column inside) & 2-column @ end</h4></div>
+ <div class="col_5">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_5">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_2 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>5-column (3-column inside) & 2-column @ end</h4></div>
+ <div class="col_5">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_5">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ <div class="col_2 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column (1-column inside)</h4></div>
+ <div class="col_6">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_6 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column (2-column inside)</h4></div>
+ <div class="col_6">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_6 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column (3-column inside)</h4></div>
+ <div class="col_6">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ <div class="col_6 last">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column (4-column inside)</h4></div>
+ <div class="col_6">
+ <div class="col_4">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_6 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_4 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column (5-column inside)</h4></div>
+ <div class="col_6">
+ <div class="col_5">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_6 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_5 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>6-column (5-column inside)</h4></div>
+ <div class="col_6">
+ <div class="col_5">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_6 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_5 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column (1-column inside) & 5-column @ end</h4></div>
+ <div class="col_7">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_5 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column (2-column inside) & 5-column @ end</h4></div>
+ <div class="col_7">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_5 last">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column (3-column inside) & 5-column @ end</h4></div>
+ <div class="col_7">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_5 last">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column (4-column inside) & 5-column @ end</h4></div>
+ <div class="col_7">
+ <div class="col_4">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ <div class="col_5 last">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column (5-column inside) & 5-column @ end</h4></div>
+ <div class="col_7">
+ <div class="col_5">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_5 last">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>7-column (6-column inside) & 5-column @ end</h4></div>
+ <div class="col_7">
+ <div class="col_6">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_5 last">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (1-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (2-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (3-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (4-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_4">&nbsp;</div>
+ <div class="col_4 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (5-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_5">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (6-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_6">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>8-column (7-column inside) & 4-column @ end</h4></div>
+ <div class="col_8">
+ <div class="col_7">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_4 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (1-column inside) & 3-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (2-column inside) & 3-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (3-column inside) & 3-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (4-column inside) & 3-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_4">&nbsp;</div>
+ <div class="col_4">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (5-column inside) & 3-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_5">&nbsp;</div>
+ <div class="col_4 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (6-column inside) & 3-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_6">&nbsp;</div>
+ <div class="col_3 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (7-column inside) & 2-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_7">&nbsp;</div>
+ <div class="col_2 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last">
+ <div class="col_2">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ </div>
+</div><!--class="container" -->
+
+<div class="container test">
+ <div class="row">
+ <div class="col_12 title"><h4>9-column (8-column inside) & 2-column @ end</h4></div>
+ <div class="col_9">
+ <div class="col_8">&nbsp;</div>
+ <div class="col_1 last">&nbsp;</div>
+ </div>
+ <div class="col_3 last"&g