﻿/*  MAIN.CSS  */
/* markcollins55.com */

header, section, footer, aside, nav, article, figure, figcaption  {
	display: block;
	}

body {
	font-family: "Calibri Light";
	font-family: "Arial Narrow", Arial, sans-serif;
/*	width: 85%; */
	margin: 0 auto;
	background-color:#BEE0EB;
	}
	
header {
	height: 170px;
	}

nav {
	clear: both;
	height: 55px;
	background-color: #F9F9F9;
	}
	
/*	Cater for narrow screens on smartphones etc  */
	
/* large screen size */
@media screen and (min-width:1024px) {
	
	body {
		width: 85%;
	}
	
	aside {
/*		width: 30%;	 */
		float: right;
		text-align: left;
		border: 1px solid #555555;
		padding: 5px 5px 20px 5px;
		margin-top: 20px;
		background-color: rgb(240,240,240);
		position: fixed;
		top: 200px;  
		left: 75%; 
		}
		
	div.subjects {
		width: 67%;		
		float: left;
		margin: 0 auto;
		}
	
	div.no_aside {
		width: 100%;
		float: left;
		marin: 0 auto;
	}
	
	}	

/* Small screen size, ie iPhone 6 */
@media screen and (max-width:1024px) {
	
	body {
		width: 95%;
	}
	
	aside {
		width: 30%;
		float: center;  
		text-align: left;
		border: 1px solid #555555;
		padding: 5px 5px 20px 5px;
		margin-top: 20px;
		background-color: rgb(240,240,240);
		}
		
	div.subjects {
		width: 100%;
		margin: 0 auto;
		}
	}	

article {
	clear: both;
	overflow: auto;
	width: 60%;
	border: 1px solid #555555;
	margin-top: 20px;
	background-color: rgb(240,240,240); 
/*	padding: 10px; */
	}
	
footer {
	clear: both;
	height: 30px;
	font-size: 80%;
	padding: 7px 0px 0px 20px;
	background-color: #BEE0EB;
	}

.wrapper {
	width: 650px;
	margin: 20px auto 20px auto;
	}	

/*  Text properties  */

p.index	{
	width: 600px;
	background-color:lightcyan;
	border: 2px solid #0f0f0f;
	padding: 20px;
	margin: 10px auto 10px auto;	
	font-size: 150%;
	text-align: center;
	}
	
p	{
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	}
	
p.centre {
	text-align: center;
	}
	
h1	{
	font-family: "Calibri Light";
	text-align: center;
	font-size: 48px;
	color: #0000000;	
	padding-left: 10px;
	padding-top: 40px;
	width: 90%;	
	margin: 0 auto;
	}

h2	{
	font-family: "Calibri Light";
	color: #00000;
	font-size: 36px;
	padding-left: 10px;
	width: 90%;
	}
	
h3	{
	font-family: "Calibri Light";
	color: #000000;
	font-size: 24px;
	padding-left: 10px;	
	width: 90%;
	}
	
h3	{
	font-family: "Calibri Light";
	color: #000000;
	font-size: 16px;
	padding-left: 10px;	
	width: 90%;
	}
		
ol	{
	list-style-type: decimal;
	}		
	
ul.menu	{
	padding: 15px;
	margin: 0px auto 0px auto;
/*	border-top: 2px solid #000;
	border-bottom:   1px solid #000; */
	text-align: center;
	margin-top: 20px;	
	list-style-type: none; 
	}

li	{
/*	display: block;  */
	margin: 0px 23px;
	}	
	
li.menu	{
	margin: 0px 23px;
/*	list-style-type: none;  */
	display: inline;
	}	
	
li.aside	{
	margin: 0px 23px;
/*	list-style-type: none;  */
	display: block;
	}	

/* Image Positions */

img.align-center {
	display: block;
	margin: 0px auto;
	}
	
figcaption {
	text-align: center;
	font-size: 200%;
	}

