@font-face {
			font-family: myOswald;
			src: url(OSWALD-LIGHT.TTF);
		}
		
		
		
		body{
			font-family: 'Open Sans', sans-serif;
			background-color: #84BECE;
			padding-top: 20px;
			background-image: url("background.png");
			background-attachment: fixed;
			background-size: 100%;
		}
		
		.horizontalrule hr{
			clear:both;
		}

		#calendar {
			max-width: 900px;
			margin: 0 auto;
		}
		
		h1{
			text-align: center;
		}
		
		h2{
			color: #84BECE;
			font-family: 'Open Sans', sans-serif;
			margin: auto;
			text-align: center;
		}
		
		h3{
			font-family: myOswald;
			font-size: 35px;
			color: #84BECE;
			text-transform: uppercase;
			font-weight: normal;
			text-align: center;
			
		}
		
		h4{
			margin: 0px;
			font-family: myOswald;
			font-size: 22px;
			color: #84BECE;
			font-weight: normal;
		}
		
		#main{
			position: relative;
			background-color: #F8FFF9;
			background-repeat: repeat-x;
			max-width: 960px;
			margin: auto;
			box-shadow: 0px 10px 25px #000000;
		}
		
		hr{
			height: 5px;
			background: #84BECE;
			font-size: 0;
			border: 0;
		}
		
		#title{
			display: none;
		}
		
		#logo{
			display: block;
		}
		
		#navlist{
			margin: 0 -40px;
			position: relative;
		}
		
		#navlist li{
			display: inline;
			float:left;
			list-style-type: none;
			
			background-color: #F8FFF9;
			overflow: hidden;
			width: 120px;
			box-sizing: border-box;
			border: 1px solid #84BECE;
		}
		
		#navlist li:first-child{
			border-left: none;
		}
		#navlist li:last-child{
			border-right: none;
		}
		
		#navlist a{
			display: block;
			color: black;
			text-align: center;
			padding: 14px 12px;
			text-decoration: none;
		}
		
		#navlist a:hover{
			animation-name: navListTransition;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
		}
		
		@keyframes navListTransition{
			from {background-color: #F8FFF9}
			to {background-color: #CACECA}
		}
		
		
		#titleboard{
			padding: 20px;
			float: left;
			clear: both;
		}
		#contactinformation{
			padding: 60px 10px;
			text-align: right;
		}
		#contactinformation::first-line{
			font-weight: bold;
		}
		
		.textbox{
			padding:0px 10px;
			width: 300px
		}
		.exploreText{
			float: left;
			width: 290px;
			text-align: center;
			margin-left: 10px;
		}
		
		#exploreImageTriplet{
			position: relative;
			display: inline;
			width: 600px; 
			height: 400px;
			float:right;
			vertical-align: text-top;
			margin-bottom: 20px;
			margin-right: 20px;
		}
		#triplet1{
			position: absolute;
			top: 0;
			left: 0;
			width: 336px;
			height: 216px;
		}
		#triplet2{
			position: absolute;
			top: 220px;
			left: 0;
			width: 336px;
			height: 180px;
		}
		#triplet3{
			position: absolute;
			top: 0;
			left: 340px;
			width: 260px;
			height: 400px;
		}
		
		
		.header{
			clear:both;
			padding:0px 10px;
		}
		
		#dateList td{
			padding-left: 50px;
			padding-right: 50px
		}
		
		#dateList a::before{
			content: "- ";
		}
		#dateList a{
			font-family: arial;
			font-style: default;
			text-decoration: none;
			color: #579aac;
			padding: 5px;
		}
		#dateList a:hover{
			background-color: #eee;
		}
		#dateSection p{text-align:center;)}	
		
		#calendarButton{
			font-family: "Arial";
			font-size: 1em;
			float: right;
			margin-right: 50px;
			background-color: white;
			padding: 5px;
			border: 1px solid #aaa;
			border-radius: 5px;
			width: 100px;
			min-height: 40px;
			background-image: linear-gradient(#fff, #ddd);
			margin-top: 20px;
			margin-bottom: 20px;
		}
		#calendarButton:hover{
			cursor: pointer;
			background-color: #eee;
		}
		#calendarButton:active{
			cursor: pointer;
			background-image: none;
			background-color: #ddd;
		}
		#calendarButton:focus{
			outline: 0;
		}
		
		#calendar {
			width: 70%;
			font-family: arial;
			letter-spacing: 0.05em;
		}
		#calendar h2{
			font-weight: bold;
		}
		
		
		#copyright{
			clear:both;
			padding: 10px;
			margin:auto;
		}
		
		#startexploring{
			padding-left:10px;
			margin: auto;
		}
		
		hr{
			clear:both;
		}