* {
    box-sizing: border-box;
}


[class*="col-"] {
    float: left;
	padding:0 2px;
}


 /* For mobile phones: */
#navigation ul li, [class*="col-"] {
    width: 100%;
	margin:0.2em auto;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1,#navigation ul li {width: 33.33%;}
    .col-m-2 {width: 66.66%;}
    .col-m-3 {width: 100%;}
    .col-m-4 {width: 50%;}
.sidecaption img {margin:0 0 2em 0;}

}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1,#navigation ul li {width: 33.33%;}
    .col-2 {width: 66.66%;}
    .col-3 {width: 100%;}
    .col-4 {width: 50%;}
	.col-25 {width: 25%;}
	.col-48 {width:48%;}
}

img {
    	max-width: 100%;
    	height: auto;
	box-sizing: content-box;
}


/* end of the responsive stuff */



body { 
	font-family: "Arial Black", Gadget, sans-serif;
	text-align: center; 
     	padding-top: 0;
	padding-bottom: 25px;
	margin: 0;
	background-color:#0a0d06;padding:0.2% 2% 3% 2%;background-image: url(Hibiscus20.jpg);background-repeat:no-repeat;background-size:100%;
} 

/* set the basic page links formatting */
a:link {
	text-decoration: underline;
	font-weight: bold;
	color:#fff;
}

a:visited {
	text-decoration: underline;
	font-weight: bold;
	color:#fff;
}

a:hover {
	text-decoration: none;
	font-weight: bold;
	color:#000; background-color:#ccc;
}

a:active {
	text-decoration: underline;
	font-weight: bold;
}

a:focus {color:white;	background-color:black;}

acronym, abbr {
	cursor: help;
     border-bottom: dotted 1px;
}

/* set the page main area */
#container,#cont1 { 
	margin: 0 auto 5% auto; 
	max-width: 750px; 
	text-align: left; 
	padding: 0;
	line-height: 145%;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	box-sizing: border-box;
	background: rgba(36, 50, 22, 0.3); 
	color:#fff;
}

#navcontainer ul {
	list-style-type: none;
	font-weight: bold;
	font-size: 110%;
	text-align: center;
	margin: 6px auto 0 auto;
	padding: 0 2px 10px 2px;
}

#navcontainer ul li {
	display: inline-block;
	padding: 7px 9px;
	margin: 0.2em 0;
	border:0px solid #fff;}

#navcontainer ul li a {
	padding: 0px 5px;
	margin: 0px -5px;
	text-decoration: none;
	white-space: nowrap;
}

#navcontainer ul li a:hover {
	padding: 0px 5px;
	margin: 0px -5px;
background-color:#ccc;}

#navcontainer ul li a.current {
	padding: 0px 5px;
	margin: 0px -5px;
	background-color:#666;}

#navcontainer ul li a:focus {color:white;	background-color:black;}




hr {color:#ccc; background-color:#ccc;height: 2px;border: none;margin: 0.8em auto;width:60%;}

sup {
	font-size: 60%;
}

h1, h2, h3, h4 {text-align:center;}

h1 {font-size:200%; font-weight: bold;line-height:120%;}
h2 {font-size:160%;font-weight: bold;}
h3 {font-size:120%; font-weight: bold;margin-bottom:0;}
h4 {font-size:110%; font-weight: normal;}
h5 {font-size:105%; font-weight: bold; margin:1.5em 2em 0 2em;}
h6 {font-size:105%; font-weight: bold; margin-bottom:0;}


img {border:0px solid #ffffff;}

q {quotes: "\201C" "\201D" "\2018" "\2019";}

p {text-indent:0;margin:1em 2em;}

.c {text-align: center;}

.gap {padding:3em;}
.smgap {padding:1em;}

.central {max-width:400px; margin:0 auto;}

#copy {
	text-align: center;
	font-size: 75%;
	padding: 30px 5px 0 5px;
}


#copy:after  {
	content:"\00A9  All Content Copyright Roger Allen 2017-2023";		/* NEW */
}

#top {
	width: 0.5em;
	height: 0.6em;
	text-align:center;
	line-height:90%;   	
	position: fixed;
    	bottom: 0;
    	right: 1%;
	font-size:300%;
	padding:0;
}

#top a:link, #top a:visited, #top a:hover, #top a:focus {
	text-decoration:none;
	color:#fff;
	font-weight:bold;
background-color:transparent;
}