﻿/* DIV tags */
* {
	/* normalise (reset all version browser defaults) */
  	box-sizing: border-box;
	border: 0;
	font-size: 100%;
	font: inherit;
	margin: 0;
	overflow: auto; /*displays scrollbar on block elements */
	padding: 0;
	vertical-align: baseline;
	/* width: 100%; /* breaks menu into line wide items */
}
#masthead, #iMenu {
	overflow: hidden; /*hides scrollbar */
} 
#column_l1, #column_l2, #column_l3, #column_r1 {
	float: left;
	position: relative;
} 
#content {
	padding: 3px;
} 
#footer {
	clear: both; /* centres text */
	overflow: auto; /* allows multiple rows on smaller width screens */
	width: 100%; 
} 

/* For .row class alignment */
.row {
	width: 100%;
}
.row::after {
	content: "";
	clear: both;
	display: table;
}

/* for .col- column class */
[class*="col-"] {
	border-left: 1px solid #008; /* color to match menu border */
	float: left;
	padding: 3px;
	width: 100%;
}

@media only screen and (min-width: 500px) {
	.col-main {
	width: 50%; /* 2 columns */
	}
	.col-side {
	width: 50%; /* 2 columns */
	}
}

@media only screen and (min-width: 750px) {
	.col-main {
	width: 33%; /* 3 columns */
	}
	.col-side {
	width: 33%; /* 3 columns */
	}
}
@media only screen and (min-width: 1000px) {
	.col-main {
	width: 25%; /* 4 columns */
	}
	.col-side {
	width: 25%; /* 4 columns */
	}
}


