* { box-sizing: border-box; }

header, nav, main, footer {display: block; }

/* CSS for main sections */

body { background-color: #3399cc; 
		background-image: linear-gradient(to bottom, #336699, #663399);
		color: #666666;
        font-family: Georgia, "Times New Roman", serif; 
	}
		   
header { background-color: #336699;
		color: #ff9933;
		font-family: Impact, fantasy;
		align: center;
	}

main	{ padding-left: 2em;
			padding-right: 2em;
			padding-top: 1px;
			padding-bottom: 1px;
			background-color: #ccccff;
			margin-left: 155px;
			display: block;
}

footer   { font-size: .7em;
		   font-style: italic; 
		   text-align: center;
			padding: 1em;
			margin-left: 155px;
			background-color: #ccccff;
			}

/* CSS for Headers */
h1 { background-color: #003333; 
		background-image: url(images/moon_reflect.jpg);
		background-position: right;
		background-repeat: no-repeat;
		padding: 2em;
		color: #ccffff; 
	    line-height: 50px;
	    font-family: "Comic Sans", "Times New Roman", serif;
		margin-bottom: 0;
	}

h2 { color: #996633; 
		font-family: Georgia, serif; 
	}
		   
h3 { color: #003333; 
		font-family: Georgia, serif;
		text-align: center;
		vertical-align: middle;
		padding-bottom: 10px;
	}

.divh3 { color: #003333; 
		background-color: #ccffff;
		font-family: Georgia, serif;
		text-align: center;
		vertical-align: middle;
		padding: 3px;
	}

h4 { color: #666666; 
		font-family: Georgia, serif; 
	}

/* button style */
.button {
  background-color: #003333;
  border: none;
  color: #ccffff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  font-family: Georgia, serif;
}
	
/* CSS for different lists */
dt	{ color: #000033;
		margin-left: 100px;
	}

dd	{ color: #000033;
		margin-left: 130px;
	}

ul { list-style-type: none; }

	
nav      { font-style: italic;
			float: left;
			width: 140px;
			padding-left: 3px;
			text-align: left;
		   }
		   
nav a { text-decoration: none; 
}

nav a:link { color: #ffffff; }
nav a:visited { color: #c2e0f0; }
nav a:hover { color: #cccccc; }

nav ul { list-style-type: none; 
			padding-left: 1em;
}

nav li { padding-bottom: 15px;
			text-align: left;
		   }

.pics { display: inline-block;
		width: 225px;
		padding-bottom: 10px;
		margin: 10px;
		background-color: #003333;
		color: #996633;
		text-align: center;
		font-style: italic;
		font-family: Georgia, serif;
	}

.showpic { display: inline-block;
		width: 480px;
		padding-bottom: 10px;
		margin: 10px;
		background-color: #003333;
		color: #996633;
		text-align: center;
		font-style: italic;
		font-family: Georgia, serif;
	}	   

table { margin: auto;
		border: none;
		width: auto;
		border-collapse: collapse;
		background-color: #ccccff;
}

.eventtable { margin: auto;
		border: 1px solid #003333;
		width: auto;
		border-collapse: collapse;
		background-color: #ccccff;
		cell-padding: 3px;
}

td, th { border: none;
			cell-padding: 5px;
			text-align: center;
}


.text { text-align: left; }

tr:nth-of-type(even) { background-color: #F5fafc; }

	   
#wrapper { width: 80%;
			background-color: #003333;
			min-width: 700px; 
			max-width: 1024px;
			box-shadow: 5px 5px 5px #1e1e1e;
			margin-left: auto;
			margin-right: auto; 
		}

.moon { color: #000033;
           font-size: 1.2em; }
			
.mobile { display: none; }

.desktop { display: inline; }

.leftfloat { float: left;
				margin: 1em;
			}
			
.clear { clear: both; }

form { background-color:#003333;
	   font-family: Georgia, serif;
       padding: 10px; 
	 }
	 
label { float: left; 
        clear: left;
	    text-align: right; 
	    padding-right: .5em;
		margin-top: 1em;
	}
	
input, textarea { margin-top: 1em; 
                  display: block; 
	} 

fieldset {
   padding: 1em;
   background: #003333;
   border: none;
   float: center;
   width: 30%;
   height: 100px;
  }	

p#cValue {
	float: left; 
	clear: left;
	text-align: left; 
	padding-right: .5em;
	margin-top: .5em;
	width: 6em;
	font-size: 1.2em;
	height: 1.5em;
	background: white;
	padding: 0.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
	
#mySubmit { margin-left: 10em; }


@media only screen and (max-width: 1024px) {
	body { background-image: none; }
	#wrapper { width: auto; 
				min-width: 0;
				margin: 0;
				box-shadow: none;
	}
	h1 { margin: 0; }
	nav { float: none;
			width: auto;
			padding-top: 1em;
			padding-bottom: 1.5em;
			padding-left: 1em;
			padding-right: 1em;
	}
	nav li { display: inline-block; 
			padding: 2px;
			}

	nav a { padding-left: 2em; 
		}
	
	main { padding: 1em;
			margin-left: 0;
			font-size: 90%
	}
	footer { margin: 0; }
}

@media only all and (max-width: 768px) {
	h1 { height: 100%;
			font-size: 1.5em;
			padding-left: 0.3em;
			margin: 0; 
		}
	nav { float: none;
			width: auto;
			padding: 0;
		}
	nav li { display: block;
			margin: 0;
			padding: 0;
			}
			
	nav a { display: block;
			padding: 0.2em;
			font-size: 1.1em;
			border-bottom: 1px;
			border-color: #330000;
		}
	nav ul { margin: 0;
			padding: 0; 
		}
	main { padding-top: 0.1em;
			padding-right: 0.6em;
			padding-bottom: 0.1em;
			padding-left: 0.4em;
			margin-left: 0;
			font-size: 90%
		}
	footer { margin: 0;
			padding: 0;
		}

	#mobile { display: inline; }

	#desktop { display: none; }
}