/* HEADER */
header[class~=template] {
	width: 100%;
	height: 75px;
	background-color: white;
}
header[class~=template] img {
	height: 75px;
	border: none;
}
header[class~=template] .imgRight {
	display: none;
	float: right;
}

/* FOOTER */
footer {
	width: 100%;
	background-color: #16385d;
	color: white;
	text-align: center;
	line-height: 32px;
    font-size: x-small !important;
    font-family: Verdana,Arial, "Times New Roman";
}
footer a {
	color: white;
}

@media(min-width: 800px) {
	/* HEADER */
	body {
		margin-top: 100px;
		height: calc(100% - 100px);
	}
	header[class~=template] {
		position: fixed;
		top: 0;
		left: 0;
	}
	header[class~=helpBreadCrumbs] {
		top: 75px;
	}
	header[class~=template] .imgRight {
		display: block;
	}

	/* FOOTER */
	footer {
		position: fixed;
		height: 32px;
		bottom: 0;
		left: 0;
		overflow: hidden;
	}
	nav, section {
		margin-bottom: 32px;
		/* necessary to show the footer correctly */
	}
    section {
        min-height: calc(100% - 32px);
    }
}