body{
	background-color:#EAEAEA;
	color:#666666;
	font-family:Arial, "Helvetica", sans-serif;
	
	
}
*{
	box-sizing:border-box;
}

header{
	background:#002171;
	color:#FFFFFF;
	text-align:center;
	
	
}
header a:link {color: #FFFFFF;}
header a:visited {color: #FFFFFF;}
header a:hover {color:#90C7E3;}
a{
	text-decoration:none;
		
}
main{
	background-color:#FFFFFF;
	
	padding-top:1px;
	padding-right:20px;
	padding-bottom:20px;
	padding-left:30px;
	display:block;
	overflow:auto;
}

img{
	width:100%;
	
}
p{
	
	width:100%;
}
nav{
	font-weight:bold;
	padding:0;
	font-size:120%;
	text-align:center;

	
}
nav a:link { color:#5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover { color: #A52A2A; }
nav ul{
	list-style-type:none;
	margin:0;
	padding-left:0;
	font-size:1.2em;
	
}
nav li{
	border-bottom: 1px solid #00008B;
}
:link{
	color:#5C7FA3;
}
:visited{
	color:#344873;
}
:hover{
	color:#A52A2A;
}
nav a{
	text-transform: none;
	transition: color 3s ease-out;
}
h1 {
	padding-bottom: 0.5em;
	padding-top:0.5em;
	background:#002171;
    color:#FFFFFF;
    margin-bottom: 0;
    letter-spacing: 0.25em;
    font-family: Georgia, "Times New Roman", serif font; 
    margin-top: 0px ;
}

h2{
	color:#3399CC;
	font-family:Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #CCCCCC;
}
h3{
	font-family:Georgia, "Times New Roman", serif;
	color: #000033;
}
main ul{
	list-style-image:
	url("images/marker.gif");
}
footer{
	background-color:#FFFFFF;

	font-size:75%;
	font-style:italic;
	text-align:center;
	font-family: Georgia, "Times New Roman", serif;
	padding:2em;
}
dt{
	color:#000033;
}
.resort{
	font-weight:bold;
	color:#5C7FA3;
}
#content{
	font-size:90%;
}
#wrapper{
	
	background-color:#90C7E3;
	background-image: linear-gradient(#FFFFFF,#90C7E3);
	
}
#homehero {height:300px;background-image: url(images/coast2.jpg); background-size: 100% 100% ; background-repeat: no-repeat;  }
#yurthero {height:300px;background-image: url(images/yurt.jpg); background-size: 100% 100% ; background-repeat: no-repeat;  }
#trailhero {height:300px; background-image: url(images/trail.jpg); background-size: 100% 100% ; background-repeat: no-repeat; }

@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{
		flex-direction:column;
		padding-top:1em;
			}
	nav{
		text-align:left;
		padding-left:1em;
	}
	#wrapper{
		margin: auto;
		width: 80%;
		border-style:solid #00008B;
		box-shadow:#00008B;
		display :grid;
		grid-template-rows: auto;
		grid-template-columns: 180px auto;
	}
	header{ grid-row: 1 / 2; grid-column:1 / 3;}
	nav{ grid-row: 2 / 5; grid-column: 1 / 2;}
	div{ grid-row: 2 / 3; grid-column: 2 / 3;}
	main{grid-row: 3 / 4; grid-column:2 / 3;}
	footer{grid-row: 4 / 5; grid-column:2 / 3;}


}
table{
border-collapse: collapse;
}
td{
	padding: 0.5em;
	border: 2px solid #3399CC;
	text-align: center;
}
th{
	padding: 0.5em;
	border: 2px solid #3399CC;
}
.text{
	text-align: left;	
}
:nth-of-type{
	background-color: #F5FAFC;
}
form { display: flex; 
         flex-flow: column nowrap; }    
  input, textarea { margin-bottom: .5em; }
  form {
    display: block;
    margin-top: 0em;
}
label {
    float: left;
    display: block;
    text-align: left;
    width: 120px;
    padding-right: 10px;
}
input {
    display: block;
    margin-bottom: 20px;
}
#mySubmit{
	width:9em;
	grid-column:2;
}
video, embed { float: right; padding-left: 20px; }