* { margin: 0px; padding: 0px }

body { font-family: "Times New Roman", Georgia, Serif; font-size: 16pt; }
nav { font-family: Helvetica, Arial, Geneva, Swiss, SunSans-Regular; width: 95vw; min-width: 950px; height: 5vh; min-height: 40px; padding-top: 2vh; text-align: center; margin: auto; }
header  { font-family: Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-align: center;  }
section	{ position: absolute; width: 99vw; }
footer { position: absolute; top: 93vh; left: 5vw; width: 85vw; background-color: rgba(255,255,255,0.9); padding: 1vh 1vw; text-align: center; border-radius: 10px; }

body#members-login-page, body#registration-page, body#forgot-password-page, body#profile-page
	{ text-align: center; }
form#members-only, form#registration, form#forgot, form#profile 
	{ background-color: white; width: 400px; margin: 100px auto; padding: 10px 0; border-radius: 20px;}
form input { font-size: 90%; padding: 0 10px; }
form input[readonly] { border: 0; color: gray; }
form button { font-size: 90%; padding: 0 10px; }

h1 { font-size: 250%; padding-top: 25px; margin-bottom: 5px; }
h2 { font-size: 200%; font-style: italic; margin: 15px 0 5px 0; }
h3 { font-size: 150%; text-align: center; margin: 12px 0 2px 0; }
h4 { font-size: 100%; margin: 6px 0; }
p { font-size: 100%; margin: 12px 0; }
ul { margin-left: 4vw; }
a, a:link, a:visited, a:active { color: blue; text-decoration: none; }
a:hover { color: red; }

form { line-height: 150%; }
textarea { margin-left: 5vw; }
.error { color: red; font-weight: bold; }
.missing { background-color: yellow; }
.form-div { background-color: white; border-radius: 25px; width: 90vw; margin: 25px auto; padding: 25px; text-align: center; }

.red { color: red; }
.green { color: darkgreen; }
.centered { text-align: center; }
.indented { margin-left: 75px; }
.bold { font-weight: bold; }
.clearer { clear: both; }

.powder-bg { background-color: SkyBlue; }
.lemon-bg { background-color: LemonChiffon; }
.turquoise-bg { background-color: MediumSeaGreen; }
.coral-bg { background-color: Tan; }

nav ul { margin: 0; }
nav li { display: inline; height: 3vh; width: 4vw; font-size: 100%; font-weight: bold; color: white; background-color: black; margin: 1vw 0.5vw; padding: 2px 8px; border: 3px outset blue; border-radius: 4px; }
.current-page-button { color: black; background-color: white; }
.nav-button, .nav-button:link, .nav-button:visited, .nav-button:active { color: white; }
.nav-button:hover { color: red; }
nav li.red-bg { background-color: red; }
nav li.red-bg a:hover { color: black; }


.bio { width: 40%; text-align: center; margin: 25px auto; border: 2px solid red; padding: 5px;}

.header-quote { width: 50vw; margin: 12px auto; font-style: italic;  }
.file-type-icon { margin: 5px; vertical-align: middle; }
.links-div { background-color: white; border-radius: 25px; width: 700px; margin: 0 auto 25px auto; padding: 25px; }

.wide-div { background-color: white; border-radius: 25px; width: 75vw; margin: 25px auto; padding: 25px; text-align: center; }


#who-div { background-color: white; border-radius: 25px; width: 80vw; margin: 25px auto; padding: 50px; text-align: left; }
#who-div img { height: 32px; width: 36px; vertical-align: middle; margin-right: 10px;}

#outer-div { height: 100vh; background: #f0f8ff url("field-background-3.jpg") center/cover no-repeat fixed;}
#home-quote { position: absolute; top: 30vh; left: 35vw; width: 30vw; font-size: 110%; font-weight: bold; }

#friends > li { margin-bottom: 10px; }

#menu-icon { display: none; position: absolute; }

#logo { height: 10vh; width: auto; }

#U1 { position: absolute; top: 80vh; left: 45vw; height: 16vh; width: 8vw; }
#U2 { position: absolute; top: 35vh; left: 85vw; height: 10vh; width: 8vw; }
#U3 { position: absolute; top: 20vh; left: 35vw; height: 10vh; width: 8vw; }
#U4 { position: absolute; top: 35vh; left: 7vw; height: 10vh; width: 8vw; }

/*  Link's top = U's top + 1/2 U's height - 1/2 Link's height */
#Link1 { position: absolute; top: 85vh; left: 53vw; height: 6vh; width: 16vw; }
#Link2 { position: absolute; top: 37vh; left: 73vw; height: 6vh; width: 12vw; }
#Link3 { position: absolute; top: 22vh; left: 43vw; height: 6vh; width: 12vw; }
#Link4 { position: absolute; top: 37vh; left: 15vw; height: 6vh; width: 12vw; }

#Link5 { position: absolute; top: 65vh; left: 74vw; height: 75px; width: 75px; }
#Link6 { position: absolute; top: 65vh; left: 82vw; height: 75px; width: 75px; }
#Link7 { position: absolute; top: 65vh; left: 90vw; height: 75px; width: 75px; }

#Link8 { position: absolute; top: 50vh; left: max(35vw, 50% - 150px); width: 40vw; max-width: 300px; }

#Link9 { position: absolute; top: 85vh; left: 5vw; height: 50px; width: 110px; }


table { border-collapse: collapse; margin: 20px auto; width: 80% }
table, th, td { border: 2px solid black; }
th, td { padding: 5px; }
td { text-align: left; font-size: 90%; }
table.members td:last-of-type { text-align: center; }
.past { display: none; }
.name-col { width: 35%; }
.one-button-col { width: 100px; min-width: 100px; }
.two-button-col { width: 155px; min-width: 155px; }


@media (orientation: portrait) {
	
	h1 { font-size: 175%; padding: auto 60px; }
	nav { display: none; }
	nav ul { position: fixed; left: 25vw; width: 50vw; outline: 1px solid black; background-color: white; z-index: 999; }
	nav li { float: left; height: 5vh; width: 45vw; font-size: 1.5em; }
	header { padding-top: 15px; }
	header p { width: 75vw; }
	form#members-only { width: 75vw; }
	.links-div, .wide-div, #who-div { width: 80vw; padding: 25px 0; }

	.indented { margin-left: 0; }

	#who-div { padding: 25px; }
	#home-quote { display: none; }
	#menu-icon { display: initial; top: 5vh; right: 10px; height: 40px; width: 40px; }
	
	#U1 { left: 40vw; height: 16vh; width: 14vw; }
	#U2 { left: 85vw; height: 10vh; width: 12vw; }
	#U3 { left: 30vw; height: 10vh; width: 12vw; }
	#U4 { left: 4vw; height: 10vh; width: 12vw; }

	#Link1 { left: 54vw; height: 6vh; width: 28vw; }
	#Link2 { left: 65vw; height: 6vh; width: 20vw; }
	#Link3 { left: 42vw; height: 6vh; width: 20vw; }
	#Link4 { left: 16vw; height: 6vh; width: 20vw; }

	#Link5 { top: 70vh; left: 35vw; height: 50px; width: 50px; }
	#Link6 { top: 70vh; left: 50vw; height: 50px; width: 50px; }
	#Link7 { top: 70vh; left: 65vw; height: 50px; width: 50px; }

	#Link8 { top: 46vh; }

	table.members { font-size: 4.5vw; }
	table.members tr:first-of-type { display: none; }
	table.members td { text-align: center; display: block; }
	th, td { border: 0; }
}



@media (max-device-width: 1024px) and (orientation: portrait) {
	
	body { font-size: 2.5vh; } 
	h1 { padding-top: 2vh; }
	#outer-div { font-size: 4vh; } 

	#menu-icon { display: initial; top: 2vh; height: 6vh; width: 6vh;}
	#Link5 { height: 8vh; width: 8vh; left: 20vw;}
	#Link6 { height: 8vh; width: 8vh; left: 40vw;}
	#Link7 { height: 8vh; width: 8vh; left: 60vw;}
	#Link8 { left: calc(50% - 340px); height: 388px; width: 680px; max-width: 680px; }
	#Link9 { height: 100px; width: 220px; }
	
}

@media (max-device-width: 1024px) and (orientation: landscape) {
	
	body { font-size: 4vh; } 
	h1 { padding-top: 4vh; }
	#outer-div { font-size: 6vh; } 

	#Link5 { height: 15vh; width: 15vh; }
	#Link6 { height: 15vh; width: 15vh; }
	#Link7 { height: 15vh; width: 15vh; }
	#Link8 { top: 40vh; }
	
}

@media (max-device-width: 1024px) {

	h1 { font-size: 1.5em; }
	h2 { font-size: 1.25em; }
	h3 { font-size: 1em; }
	h4 { font-size: 1em; }
	p { font-size: 1em; }
	th, td { font-size: 0.6em; }

	#home-quote { display: none; }

	#outer-div h1 { font-size: 1.25em; } 
	#outer-div h4 { font-size: 0.6em; } 

	.header-quote, form#members-only { width: 90vw; }
	
}