@charset "utf-8";
/* CSS Document */

/* The simple stuff, columns and rows */
*
{
	box-sizing:border-box; /* Makes the layout boxes behave properly by adding padding, border and margin into the model */
}

.wrapper /* I use this when I want a background colour behind a row, or set of rows. */
{
	width:100%;	
}

.quarter
{
	width:25%;
}

.three-quarter
{
	width:75%;
}

.one-third
{
	width:33%;
}

.two-third
{
	width:66%;
}

.half
{
	width:50%;
}

.full-width
{
	width:100%;
}

/* This is to keep the navigation from folding in on itself */

.nav-sticky .quarter 
{
	width:25%;
}

.nav-sticky .three-quarter
{
	width:75%;
}

.nav-rule .one-third
{
	width:33%;
}

/* A couple of height setters */

.mHeight-100px /* Used to ensure minimum heights are maintained for some boxes, purely ascetic, not for funtionaility */
{
	min-height:100px;	
}

.mHeight-200px
{
	min-height:200px;	
}

.mHeight-300px
{
	min-height:300px;	
}

.mHeight-400px
{
	min-height:400px;	
}

.mHeight-500px
{
	min-height:500px;	
}

/* Standard grid elements */

.grid-row /* We set up the row here with its own padding to ensure a bit of space with each row and clear at the end to ensure every row is clearly defined */
{
	margin:0 auto;
	padding:10px 0;
	max-width:1200px;
	clear:both;	
}

.grid-box /* Every defined block should be a grid-box, which keeps everything neat and tidy, although it does add a bit when lots of boxes are on screen */
{
	display:inline-block;
	padding-left:20px;
	padding-top:15px;
	vertical-align:top;
}

/* How we handle the more difficult things */

.facebook /* A dedicated bit of code to handle facebook when it is imported */
{
}

.news-post /* Dedicated layout for news post, likely to be ditched as it is just as practical using a normal grid-box */
{
}

.logo /* A special bit of layout that forces the logo out of alignment so it stands out against the background strip */
{
	margin-top:-50%;
}

.sticky .logo /* A special bit of layout that forces the logo back into alignment so it works inside the sticky nav */
{
	margin-top:-10px;
}

/* "Fear causes hesitation, and hesitation will cause your worst fears to come true." */


@media (min-width: 1600px) 
{
	
}

/* "All right," said Susan. "I'm not stupid. You're saying humans need... fantasies to make life bearable." */

@media (min-width: 1400px)
{
	.one-third
	{
	}
}

/* "I can tell you how to bottle fame, brew glory, and even put a stopper in death." */

@media (min-width: 900px) and (max-width: 1200px)
{
	.grid-row
	{
		margin-right:20px;
	}
	
}

/* "It is the distant future, the year 2000."  */

@media (min-width: 600px) and (max-width: 900px)
{
	.grid-row
	{
		margin-right:20px;
	}
	
	.quarter
	{
		width:50%;
	}
	
	.three-quarter
	{
		width:100%;
	}
	
	.one-third
	{
		width:50%;
	}
	
	.nav-rule .one-third
	{
		width:33%;
	}
	
	.stacking .one-third
	{
		width:100%;
	}
	
	.two-third
	{
		width:100%;
	}
	
	.half
	{
		width:50%;
	}
	
	.stacking .half
	{
		width:100%;
	}
	
	.full-width
	{
		width:100%;
	}
	
	.logo /* A special bit of layout that forces the logo out of alignment so it stands out against the background strip */
	{
		margin-top:-25%;
	}
	
	.mHeight-500px
	{
		min-height:250px;
	}
}

/* "This is Bowie back to Bowie I read you loud and clear, man."  */

@media (min-width:300px) and (max-width: 600px)
{
	.grid-row
	{
		margin-right:20px;
	}
	
	.quarter
	{
		width:50%;
	}
	
	.stacking .quarter
	{
		width:100%;
	}
	
	.three-quarter
	{
		width:100%;
	}
	
	.one-third
	{
		width:100%;
	}
	
	.two-third
	{
		width:100%;
	}
	
	.half
	{
		width:100%;
	}
	
	.stacking .half
	{
		width:100%;
	}
	
	.full-width
	{
		width:100%;
	}
	
	.logo /* A special bit of layout that forces the logo out of alignment so it stands out against the background strip */
	{
		margin-top:0;
	}
	
	.mHeight-500px
	{
		min-height:250px;
	}
}