/* ----------------------------
layout
---------------------------- */

/* row */
.row
{
	clear: both;
	overflow: hidden;
}

/* row-colors */
.row--white { background: #fff; }
.row--blue { background: #82b4c8; }
.row--translucent-blue 
 /* Translucent medium blue background colour!    */ { 
	background-color: rgba(0, 102, 255, 0.7); 
}
.row--solid-blue 
 { background-color: #00f; }
.row--pale-orange { background: #f6e3d3; }
.row--grey { background: #e1ebef; }
.row--light-grey { background: #f8f8f8; }
.row--dark-grey
{
	color: #fff;
	background: #282e37;
}

/* row-padding */
.row--padding-medium
{ padding-top: 0; padding-bottom: 2.19em;
	/* 35px/16px */
}

.row--padding-wide
{ padding-top: 2.19em; padding-bottom: 2.19em;/* 35px/16px */
}

/* containers */
.container-narrow,
.container-medium,
.container-wide
{
	margin: 0 auto;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.container-narrow { max-width: 34em; }
.container-medium { max-width: 52em; }
.container-wide { max-width: 58em; }

/* columns */
.col-narrow,
.col-narrow--right { margin-bottom: 1.5em; }

/* ----------------------------
wide
---------------------------- */

@media (min-width: 38em)
{
	.row--padding-medium
	{ padding-top: 2em; 
	padding-bottom: 2em;	/* 70px/18px */
	}
	
	.row--padding-wide
	{ padding-top: 0.5em; padding-bottom: 0.5em;
		/* 100px/18px */
	}
	
	.container-narrow,
	.container-medium,
	.container-wide
	{ padding-right: 2em; padding-left: 2em; }
	.col-narrow,
	.col-medium,
	.col-wide 
	  { float: left; }
	 .col-narrowS, .col-mediumS, .col-wideS 
	 /* Added clear left so OK with clear right cols  */ { float: left; clear: left; }
	.col-narrow--right, 
	.col-medium--right, 
	.col-wide--right  /* Me - medium */ { float: right; clear: right; }
	
	.col-wide, .col-wide--right, .col-wideS { width: 61%; }
	.col-medium, .col-medium--right, .col-mediumS     { width: 48%; margin-right: 0.5em; margin-bottom: 0.75em; margin-left: 0.5em; }
	.col-narrow, .col-narrow--right, .col-narrowS
	{ width: 30%; margin-bottom: 0; margin-left: 11px; }
}

@media print
{
	.col-medium, .col-medium--right, .col-mediumS { width: 45%; }
}