html{
	height:100%;
}
body{
	display:grid;
	position:absolute;
	grid-template-areas:
		"header header header"
		"main main main"
		"footer footer footer"
		;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:auto 1fr auto;
	width:100%;
	margin:0;
	top:0;
	bottom:0;
	min-height:100vh;
}
h1{
	font-size:1.2em;
	font-style:bold;
}
h2{
	font-size:1.0em;
	font-style:bold;
}
header{
	grid-area:header;
}
footer{
	display:inline;
	position:relative;
	font-size:10px;
	grid-area:footer;
	border-top-style:double;
	border-color:#72c2d5;
	border-top-width:thick;
}
nav{
	grid-area:nav;
	z-index:2000;
}
main{
	position:relative;
	grid-area:main;
}

h1#intro{
	position:relative;
	margin-top:2px;
	top:0;
	bottom:0;
}
h2#pagetitle{
	position:relative;
	margin-top:2px;
	left:10px;
}
a#login-button{
	position:absolute;
	top:5px;
	right:5px;
}
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers,  */ 
}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ 
}

@media (orientation: portrait){
	header{
		display:grid;
		position:relative;
		grid-template-areas:
			"me title garden"
			"nav nav nav"
			;
		grid-template-columns:50pt 10fr 50pt;
		grid-template-rows:50pt auto;
		width:100%;
	}
	#me{
		grid-area:me;
	}

	#garden{
		grid-area:garden;
	}
	#title{
		grid-area:title;
		display:block;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}
	#titleimg{
		position:absolute;
		height:100%;
		width:100%;
		object-fit:cover;
	}
	div.headerpic{
		display:flex;
		position:relative;
		border:red 1px;
		height:100%;
	}
	img.headerpic{
		position:relative;
		object-fit:contain;
		width:100%;
		height:100%;
	}

}

@media (orientation: landscape){
	header{
		display:grid;
		position:relative;
		grid-template-areas:
			"me title garden"
			"nav nav nav"
			;
		grid-template-columns:50pt auto 50pt;
		grid-template-rows:50pt auto;
		width:100%;
	}
	#me{
		grid-area:me;
	}
	#garden{
		grid-area:garden;
	}
	#title{
		grid-area:title;
		display:block;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}
	#titleimg{
		position:absolute;
		height:100%;
		width:100%;
		object-fit:cover;
	}

	div.headerpic{
		display:flex;
		position:relative;
		border:red 1px;
		height:100%;
	}
	img.headerpic{
		position:relative;
		object-fit:contain;
		width:100%;
		height:100%;
	}


}

/* Clearfix for the menu */
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}


.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
	position:relative;
}
.article{
	font-family:times;
	font-size:1em;
}
.labledcheckbox{
	position:relative;
	display:flex;
}
.labledcheckbox label{
	position:relative;
	height:10px;
	margin-top:3px;
	margin-bottom:3px;
	border:1px;
}
#mastadon{
	position:absolute;
	bottom:5px;
	right:5px;
}