.popupframe, .popupframe2 {
    left: 60%;
    width: 0;
    height: 0;
    padding: 30px;
    transform: translate(-50%, 0%);
    border: 2px solid rgba(0, 82, 136, 1);
    background-color: rgba(255, 255, 255, 6);
    color: rgba(0, 82, 136, 1);
    border-radius: 20px;
    z-index: 30;
    overflow: hidden;
    transition: .25s;
    visibility: hidden;
}

.popupframe {
	position: fixed;
	top: 250px;
}

.popupframe2 {
	position: absolute;
	bottom: 31vh;
}

.xbar1, .xbar2 {
    width: 35px;
    height: 5px;
    background-color: #005288;
    margin: 6px 0;
}
.xbar1 {
	-webkit-transform: rotate(-45deg) translate(-4px, 4px);
	transform: rotate(-45deg) translate(-4px, 4px);
}
.xbar2 {
	-webkit-transform: rotate(45deg) translate(-4px, -4px);
	transform: rotate(45deg) translate(-4px, -4px);
}

.puclose {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

.puclose:hover, .puclose:focus {
	background-color: rgba(0, 176, 255, .2);
}

.shortmenu {
	visibility: hidden;
}

.fullmenu {
	width: 100%;
	visibility: visible;
}

.headerbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 14vh;
}

.pagegraphicarea {
	position: absolute;
	top: 14vh;
	left: 0;
	width: 100%;
	height: 50vh;
	background-image: url("../images/Heroimage.png");
	background-size: cover;

}

.greetingarea {
	position: absolute;
	top: 64vh;
	left: 0;
	width: 100%;

}

.statsblock {
	position: absolute;
	top: 14vh;
	left: 0;
	width: 100%;
}

.greeting {
	margin: 0 auto;
	width: 80%;
	text-align: center;
	left: 50%;
}

.greeting h1 {
	margin-top: 40px;
	color: #BC333D;
}

.greeting h3 {
	width: 70%;
	margin: 0 auto;
	color: #0D588A;
	line-height: 32px;
}

.stdmenu {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	visibility: visible;
}

.newsarea {
	position: relative;
	width: 100%;
}

.logo1 {
	position: absolute;
	width: calc(9vh * 447 / 113);
	height: 9vh;
	bottom: 10%;
	left: 1%;
	background-image: url("../images/FedVTE logo.jpg");
	background-size: cover;
	z-index: 100;
}

.logo2 {
	position: absolute;
	width: 12vh;
	height: 12vh;
	bottom: 10%;
	right: 1%;
	transform: translate(0, 10%);
	background-image: url("../images/CISA Logo_sm.png");
	background-size: cover;
	z-index: 100;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.logo2 {
		background-image: url("../images/CISA Logo_sm.png");
		width: 12vh;
		height: 12vh;
	}
}

.logininfo {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	z-index: 200;
}

.logoutmessage p, p.logoutmessage {
	text-align: right;
	margin: 0 15px 0 15px;
	color: grey;
	padding-right: 20px;
	font-size: .9em;
}

.logoutmessage a {
	text-decoration: underline;
}

.menublock {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(90% - (12vh * 1565 / 676) - (9vh * 447 / 113));
	transform: translate(-50%, 0);
	height: 14vh;
	min-width: 600px;
	visibility: visible;
	z-index: 100;
}

.newsbox {
	position: relative;
	width: 45vw;
	height: 20vh;
	border-top: 8px solid rgba(86, 148, 65, 1);
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	box-shadow: 8px 8px 5px rgba(200, 200, 200, 1);
}

.dropbtn_container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: visible;
	z-index: 1000;
}

/* Style The Dropdown Button */
.dropbtn {
	background-color: white;
	color: #0D588A;;
	padding: 1vw;
	font-size: 1.3em;
	border: none;
	cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 300px;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	font-size: 1em;
	line-height: calc(1em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content a:focus {
	background-color: #f1f1f1
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn, .dropdown:focus .dropbtn {
	background-color: rgba(200, 200, 200, 1);
}

.ndbtn {
	background-color: white;
	color: #0D588A;;
	padding: 1vw;
	font-size: 1.3em;
	border: none;
	cursor: pointer;
	visibility: visible;
}

@media only screen and (orientation: landscape) {
	body {
		font-family: 'Rubik', sans-serif;
		margin: 0;
		padding: 0;
		font-size: calc(5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
		line-height: calc(1.4em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
	}
}

@media only screen and (orientation: portrait) {
	.dropbtn {
		background-color: white;
		color: #0D588A;;
		padding: 16px;
		font-size: .9em;
		border: none;
		cursor: pointer;
	}

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 300px;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
		font-size: .7em;
		line-height: calc(.7em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}

	.logo1 {
		position: absolute;
		height: calc(30vw * 113 / 447);
		width: 30vw;
		top: 50%;
		left: 1%;
		transform: translate(0, -50%);
		background-image: url("../images/FedVTE logo.jpg");
		background-size: cover;
		z-index: 100;
	}

	.logo2 {
		position: absolute;
		height: calc(30vw * 676 / 1565);
		width: 30vw;
		bottom: 10%;
		right: 1%;
		transform: translate(0, 10%);
		background-image: url("../images/CISA_o.png");
		background-size: cover;
		z-index: 100;
	}

	.logininfo {
		position: absolute;
		top: 0;
		right: 0;
		text-align: right;
		z-index: 200;
	}

	.logoutmessage p {
		text-align: right;
		margin: 0 15px 0 15px;
		color: grey;
		padding-right: 20px;
		font-size: .9em;
	}

	.logoutmessage a {
		text-decoration: underline;
	}

	.menublock {
		position: absolute;
		top: 0;
		left: 50%;
		width: calc(90% - (12vh * 1565 / 676) - (9vh * 447 / 113));
		transform: translate(-50%, 0%);
		height: 14vh;
		min-width: 400px;
		visibility: visible;
		overflow: auto;
		z-index: 100;
	}

	.pagegraphicarea {
		position: absolute;
		top: 14vh;
		left: 0;
		width: 100%;
		height: 50vh;
		background-image: url("../images/Heroimage_.png");
		background-size: cover;
	}

	/* some list line-height as 1.4em in place of 1.2em */
	@media only screen and (-webkit-max-device-pixel-ratio: 2) {
		body {
			font-family: 'Rubik', sans-serif;
			margin: 0;
			padding: 0;
			font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
			line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
		}
	}

	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		body {
			font-family: 'Rubik', sans-serif;
			margin: 0;
			padding: 0;
			font-size: calc(13px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
			line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
		}

		.menublock {
			position: absolute;
			top: 0;
			left: 50%;
			width: calc(90% - (10vh * 1565 / 676) - (9vh * 447 / 113));
			transform: translate(-50%, 0);
			height: 14vh;
			min-width: 400px;
			visibility: visible;
			z-index: 100;
		}

		.fullmenu {
			visibility: hidden;
		}

		.shortmenu {
			visibility: visible;
		}

		.headerbar {
			height: 10vh;
		}

		.logo2 {
			position: absolute;
			height: calc(30vw * 676 / 1565);
			width: 30vw;
			bottom: 10%;
			right: 1%;
			transform: translate(0, 10%);
			background-image: url("../images/CISA_o.png");
			background-size: cover;
			z-index: 100;
		}

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.logo2 {
				background-image: url("../images/CISA.png");
			}
		}

		.pagegraphicarea {
			top: 10vh;
		}

		.greetingarea {
			position: absolute;
			top: 64vh;
			left: 0;
			width: 100%;
		}

		.stdmenu {
			visibility: hidden;
		}

		.dropbtn_container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			overflow: visible;
			z-index: 1000;
			visibility: visible;
		}

		/* Style The Dropdown Button */
		.dropbtn {
			background-color: white;
			color: #0D588A;
			padding: 16px;
			font-size: 1.5em;
			border: none;
			cursor: pointer;
			visibility: visible;
		}
	}
}

/* course menu buttons */
.action_begin, .action_start, .action_restart, .action_resume, .action_review, .action_getcert {
	font-size: 14px;
	color: white;
	border-radius: 6px;
	padding: 6px 13px;
}
.action_start, .action_begin, .action_review {
	background-color: #122c65;
	border-color: #122c65;
}
.action_resume, .action_restart {
	background-color: #b70f1c;
	border-color: #b70f1c;
}
.action_begin:hover, .action_start:hover, .action_resume:hover, .action_review:hover, .action_getcert:hover {
	cursor: pointer;
}
.action_begin:hover, .action_begin:focus {
	background-color: #527fe0;
	border-color: #527fe0;
}
.action_start:hover, .action_start:focus {
	background-color: #527fe0;
	border-color: #527fe0;
}
.action_review:hover, .action_review:focus {
	background-color: #527fe0;
	border-color: #527fe0;
}
.action_restart:hover, .action_restart:focus, .action_resume:hover, .action_resume:focus {
	background-color: #f35966;
	border-color: #f35966;
}

#courseList tr > td:nth-child(n+2) {
	text-align: center;
}

/* possibly disused */
.usajobsbox {
	position: relative;
	width: 100%;
	height: 35vh;
	border: 4px solid rgba(221, 9, 9, 1);
}

.newsbox {
	position: relative;
	width: 100%;
	height: 25vh;
	border-top: 8px solid rgba(86, 148, 65, 1);
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	box-shadow: 8px 8px 5px rgba(200, 200, 200, 1);
	transition: .25s;
}

.newsitemtext {
	position: absolute;
	top: 0;
	left: 50%;
	width: 90%;
	height: calc(100% - 50px - (1em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300))));
	min-height: calc(2 * (1em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300))));
	transform: translate(-50%, 0%);
	overflow: visible;
}