﻿/* 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_l4, #column_l5, #column_l6, #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%;
}

.fourquarters {
	width: 100%; /* 4/4 columns */
}
.threequarters {
	width: 75%; /* 3/4 columns */
}
.twoquarters {
	width: 50%; /* 2/4 columns */
}
.onequarters {
	width: 25%; /* 1/4 columns */
}


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

@media only screen and (min-width: 750px) { /*phone landscape */
	.col-main {
	width: 33%; /* 3 columns */
	}
	.col-wide-halfs {
		width: 80%;
	}
	.col-side {
	width: 20%; /* 5 columns */
	}
}
@media only screen and (min-width: 1000px) { /*ipad pro*/
	.col-main {
	width: 25%; /* 4 columns */
	}
	.col-wide-halfs {
		width: 75%;
	}
	.col-side {
	width: 25%; /* 4 columns */
	}
}
@media only screen and (min-width: 1250px) { /*widescreen laptop*/
	.col-main {
	width: 20%; /* 5 columns */
	}
	.col-wide-halfs {
		width: 40%;
	}
	.col-side {
	width: 20%; /* 5 columns */
	}
}
@media only screen and (min-width: 1500px) { /*widescreen monitor*/
	.col-main {
	width: 17%; /* 6 columns */
	}
	.col-wide-halfs {
		width: 42.5%;
	}
	.col-side {
	width: 15%; /* 6 columns */
	}
}

.col-wide {
	width: 50%; 
}
/*.col-wide-halfs {
	width: 42.5%;
}*/
.col-wide-thirds {
	width: 30%;
}

.col-hide {
	display: none;
}
