﻿.row
{
	position: relative;        	
	display: block;
	float: none;
	clear: both;
	width: 100%;
	zoom: 1;
}

.row:before, .row:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}

.row:after {
    clear: both;
}

.row div[class*='column-']
{
	position: relative;
	float: left;
	clear: right;
	display: inline-block;
	margin-right: -100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;            
	padding: 0.5em 0.5em 0.5em 0.5em;
}

.row div[class*='column-']:first-child
{
	margin-left: 0;
}

.row div[class*='column-']:last-child
{
	margin-right: 0;
}
	
.span-0 { width: 0%; }
.span-10 { width: 10%; }
.span-15 { width: 15%; }
.span-20 { width: 20%; }
.span-25 { width: 25%; }
.span-30 { width: 30%; }
.span-35 { width: 35%; }
.span-40 { width: 40%; }
.span-47 { width: 47%; }
.span-45 { width: 45%; }
.span-50 { width: 50%; }
.span-55 { width: 55%; }
.span-53 { width: 53%; }
.span-60 { width: 60%; }
.span-65 { width: 65%; }
.span-70 { width: 70%; }
.span-75 { width: 75%; }
.span-80 { width: 80%; }
.span-90 { width: 90%; }
.span-100 { width: 100%; }

.column-0 { margin-left: 0%; }
.column-10 { margin-left: 10%; }
.column-15 { margin-left: 15%; }
.column-20 { margin-left: 20%; }
.column-25 { margin-left: 25%; }
.column-30 { margin-left: 30%; }
.column-35 { margin-left: 35%; }
.column-40 { margin-left: 40%; }
.column-47 { margin-left: 47%; }
.column-45 { margin-left: 45%; }
.column-50 { margin-left: 50%; }
.column-55 { margin-left: 55%; }
.column-53 { margin-left: 53%; }
.column-60 { margin-left: 60%; }
.column-65 { margin-left: 65%; }
.column-70 { margin-left: 70%; }
.column-75 { margin-left: 75%; }
.column-80 { margin-left: 80%; }
.column-90 { margin-left: 90%; }
.column-100 { margin-left: 100%; }

.row.sub-header > div[class*='column-']
{
    background-color: #003246;
    color: #c5e7f5;
    text-align: left;
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
}

.row div[class*='column-'].border 
{
	border: 1px solid #003246;
}

@media only screen and (max-width: 600px)
{
	.row div[class*='column-']
	{
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}