*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (min-width: 320px) {
	body {
		max-width: 520px;
	}

	.container {
		max-width: 520px;
  	}
}

html {
	width: 100%;
	height: 100%;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	width: 100%;
	border:2px solid blue; 
	margin: auto;
	padding: 5px
}
  
header {
	border:1px solid #B0B0B0;
	background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), url("../img/header.jpg");
	background-size: 100% 100%;
}

header > h1 {
	margin: 0 0;
}
  
nav {
	border:1px solid #B0B0B0; 
	padding: 10px;
}
  
main {
	min-height: 450px;
	border:1px solid #B0B0B0; 
	padding: 10px;
}
  
footer {
	border:1px solid #B0B0B0; 
	padding: 10px;
	line-height: 160%;
}

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

/* classes */

/* id */
/* id comments */

#warnings {
	text-align: center;
	background-color: red;
}

#messages {
	text-align: center;
	background-color: cyan;
}

.center { text-align: center; }

.main_sub { margin-left: 50px; }
.main_sub ol li { padding: 3px; }

/* style for cookie_notify.html */
	#cookie_notify {
		display: flex; 
		height: 200px; 
		justify-content: center;
		align-items: center;
		background-color: red;
	}

.warnings { text-align: center; background-color: red; }
.messages { text-align: center; background-color: cyan; }

.org_flex { width: 100%; display: flex; align-items: center; }
.org_flex span:nth-child(1) { width: 40%; padding: 5px 5px; text-align: right; }
.org_flex span:nth-child(2) { width: 60%; padding: 5px 5px; text-align: left; }

.login_flex { width: 100%; display: flex; align-items: center; }
.login_flex span:nth-child(1) { width: 40%; padding: 5px 5px; text-align: right; }
.login_flex span:nth-child(2) { width: 60%; padding: 5px 5px; text-align: left; }

.log_table { width: 90%; margin-left: auto; margin-right: auto; border-collapse: collapse; }
.log_table tr th,td { border: 1px solid #dddddd; padding: 4px; }
.log_row { text-align: center; }
.log_row_fail { background-color: red; }
.log_row_temppass { background-color: yellow; }

.myaccount_flex { width: 100%; display: flex; align-items: center; }
.myaccount_flex span:nth-child(1) { width: 40%; padding: 5px 5px; text-align: right; }
.myaccount_flex span:nth-child(2) { width: 60%; padding: 5px 5px; text-align: left; }

.search { text-align: center; background-color: yellow; padding: 10px; }
.search span { }

.userlist_table { width: 100%; border-collapse: collapse; }
.userlist_table tr th { border: 1px solid #dddddd; padding: 4px; background-color: lightgray; }
.userlist_table tr td { border: 1px solid #dddddd; padding: 4px; }
.userlist_table tr:nth-child(odd) { background-color: lightgray; }
.userlist_table tr td:nth-child(1) { width: 10%; text-align: center; }
.userlist_table tr td:nth-child(2) { width: 30%; text-align: left; }
.userlist_table tr td:nth-child(3) { width: 40%; text-align: left; }
.userlist_table tr td:nth-child(4) { width: 10%; text-align: left; }
.userlist_table tr td:nth-child(5) { width: 10%; text-align: left; }

.userlist_flex { width: 100%; display: flex; align-items: center; }
.userlist_flex span:nth-child(1) { width: 40%; padding: 3px 5px; text-align: right; }
.userlist_flex span:nth-child(2) { width: 60%; padding: 3px 5px; text-align: left; }

.user_edit_list { display: none; }
.new_user div:nth-child(1) { border: 1px solid black; background-color: yellow; }
.new_user div:nth-child(1) p:nth-child(1) { margin-left: 20px; }
.edit_user div:nth-child(1) { border: 1px solid black; background-color: yellow; }
.edit_user div:nth-child(1) p:nth-child(1) { margin-left: 20px; }

#logout_msg { margin-top:150px; margin-bottom:150px; text-align: center; }