html,

* { box-sizing: border-box; }

body {
	background-color:#EAEAEA;
	color:#666666;
	font-family: Arial, Helvetica, sans-serif;
}

header {
	background-color:#002171;
	color:#FFFFFF;
	text-align: center;
}

header a:link {
	text-decoration: none;
	color: #FFFFFF;
}

header a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

header a:hover {
	text-decoration: none;
	color: #90C7E3;
}

nav {
	background-color:#FFFFFF;
	font-weight: bold;
	padding: 0;
	font-size: 120%;
	text-align: center;
}

nav a {
	text-decoration: none;
}

nav li {
	border-bottom: 1px solid darkblue;
}

nav ul {
	list-style-type: none;
	margin: 0;	
	padding-left: 0;
	font-size: 1.2em;
}

nav a:link { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover { color: #A52A2A; }

h1 {
	margin-bottom: 0;
	font-family: Georgia, 'Times New Roman', serif;
	margin-top: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	letter-spacing: 0.25em;
}

h2 {
	color:#1976D2;
	font-family: Georgia, 'Times New Roman', serif;
	text-shadow: 1px 1px #cccccc;
}

h3 {
	font-family: Georgia, 'Times New Roman', serif;
	color:#000033;
}

dt {
	color:#002171;
	
}

main ul {
	list-style-image: url(marker.gif);
}


footer {
	font-size: 75%;
	font-style: italic;
	text-align: center;
	font-family: Georgia, 'Times New Roman', serif;
	padding: 2em;
	background-color: #FFFFFF;
}

main {
	padding-top: 1px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
	display: block;
	background-color: #FFFFFF;
	overflow: auto;
}

.resort {
	color:#1976D2;
	font-weight: bold;
}

#contact {
	font-size: 90%;
}

#homehero {
	height: 300px;
	background-image: url(coast2.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#trailhero {
	height: 300px;
	background-image: url(trail.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#wrapper {
	background-color: #90C7E3;
	border-color: #333333;
	background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
	overflow:hidden;
}

#yurthero {
	height: 300px;
	background-image: url(yurt.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
}

#special {
	background-color: #FFFFFF;
}

table {
	border: 2px solid #3399CC;
	border-collapse: collapse;
}

th td {
	border: 1px solid #3399CC;
	padding: 0.5em;
}

th {
	border: 1px solid #3399CC;
	padding: 0.5em;
}

td {
	margin: auto;
	border: 1px solid #3399CC;
	padding: 0.5em;
}

.text {
	text-align: left;
}

table:nth-of-type(odd) {
	background-color: #F5FAFC;
}

@media (min-width: 600px) {
	
	nav ul {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}		
	
	nav li {
		border-bottom: none;
	}
	
	section {
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.content main { display: grid;
                  grid-template-rows: auto;
                  grid-template-columns: 1fr 1fr 1fr; }
	h2         { grid-row: 1 / 2; grid-column: 1 / 5; }
	section    { grid-row: 2 / 3; grid-column: auto; }
	#special   { grid-row: auto; grid-column: 1 / 5; }
	footer     { grid-row: auto; grid-column: 1 / 5; }	
	
}



@media (min-width: 1024px) {
	
	nav ul {
		display: flex;
		flex-direction: column;
		padding-top: 1em;
	}
	
	nav {
		text-align: left;
		padding-left: 1em;
		background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
	}
	
	#wrapper {
		margin: auto;
		width: 80%;
		border: 1px 1px #000033;
		box-shadow: 3px 3px #333333;
		display: grid;
		grid-template-rows: auto;
        grid-template-columns: 180px auto;
		background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
	}
	
	header    { grid-row: 1 / 2; grid-column: 1 / 3; }
	nav       { grid-row: 2 / 6; grid-column: 1 / 2; }
	div       { grid-row: 2 / 3; grid-column: 2 / 3; }
	main	  { grid-row: 3 / 4; grid-column: 2 / 3; }
	#special  { grid-row: 4 / 5; grid-column: 1 / 4; }
	footer    { grid-row: 5 / 6; grid-column: 2 / 3; }	
	
}