/* settings for Mobile is linear layout, positioned as per html */
body, header, section, aside, article ,footer, nav{
	border: 1pt solid black;
	margin-bottom: 5px;
}

body{
	width: 90%px;
	padding: 5px;
	margin: auto;
}

/* Colour just needed for this demo */
header{background-color: red;}
nav{background-color: orange;}
section{background-color: yellow;}
aside{background-color: green;}
article.rightcol{background-color: blue;}
article.leftcol{background-color: indigo;}
footer{background-color: violet;}

/* Style for larger screens */
@media all and (min-width : 700px) {

body{width: 960px;}

header{height: 50px;}

/* nav to float left of subsequent containers (sections)*/
#mainnav{
	height: 200px;
	width: 150px;
	float: left; 
	margin: 5px 5px 5px 0;
}

/* this section will be to the right of nav, so just need to 
   adjust the margin and float it to the left of the subsequent containers. */
section{
	height: 415px;
	width: 515px;
	margin: 5px 0 10px 0;
	float: left;
}

/* this is for the aside-right and the article-right which will be to the right of section, so just need to 
   adjust the margin. Float left or right will work here. Float right chosen
   to ensure it is on the right edge of the body. */
.rightcol{
	height: 200px;
	width: 280px;
	margin-top: 5px;
	float: right;
}

/* This article would be positioned to the left of the above two containers. 
   Absolute positioning means it is positioned relative to the nearest positioned parent ... 
   there aren't an so it uses the document body, in this case it would be positioned where the
   nav container is as it i the first container that has been floated (positioned), so just need to adjust the top margin to bring it below the nav container. */
article.leftcol{
	height: 200px;
	width: 150px;
	position: absolute;
	margin-top: 215px;
}
footer{
	height: 20px;
	width: 100%;
	clear: both;
}
}