/**
 * Flow Grid
 * A multi-column grid class.
 *
 * EXAMPLE:
 *     <div class='flowgrid3'>
 *         <div class='row'>
 *             <div class='item first'>...</div>
 *             <div class='item'>...</div>
 *             <div class='item last'>...</div>
 *         </div>
 *         <div class='row'>
 *             <div class='item first'>...</div>
 *             <div class='item'>...</div>
 *             <div class='item last'>...</div>
 *         </div>
 *         ...
 *     </div>
 **/
.flowgrid2 { clear: both; }
.flowgrid2 div.flowrow { clear: both; position: relative; margin-bottom: 1em; padding-bottom: 0.5em; }
.flowgrid2 div.flowrow div.item { width: 50%; float: left; }
.flowgrid2 div.flowrow div.first { float: left; margin: 0; clear: left; }
.flowgrid2 div.flowrow div.last { float: right; clear: right; }
.flowgrid2 div.flowrow div.item p {padding-bottom: 1em; }

.flowgrid3 { clear: both; }
.flowgrid3 div.flowrow { clear: both; position: relative; margin-bottom: 1em; padding-bottom: 0.5em; }
.flowgrid3 div.flowrow div.item {float: left;width: 30%; }
.flowgrid3 div.flowrow div.first { margin: 0; margin-right: 5%; clear: left; }
.flowgrid3 div.flowrow div.last { float: right; clear: right; }
.flowgrid3 div.flowrow div.item p {padding-bottom: 1em; }


.flowgrid4 { clear: both; }
.flowgrid4 div.flowrow { clear: both; position: relative; margin-bottom: 1em; }
.flowgrid4 div.flowrow div.item {float: left; width: 23.5%; margin: 0; margin-right: 2%; }
.flowgrid4 div.flowrow div.first { clear: left; }
.flowgrid4 div.flowrow div.last { float: right; clear: right; margin: 0; }
.flowgrid4 div.flowrow div.item p {padding-bottom: 1em; }


/* Extra Flowgrid styling (not layout!) */
.flowgrid3 div .rounded { -moz-box-shadow: 0 0 4px #000; -webkit-box-shadow: 0 0 4px #000; box-shadow: 0 0 4px #000; }
.flowgrid4 div .rounded { -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000; box-shadow: 0 0 2px #000; }