body{

    background-color:#EAEAEA;
     /*background-image: linear-gradient( #FFFFFF, #90C7E3); /* see if you need to remove
    /* background-repeat: no-repeat; */
    color:#666666;
    font-family: Arial, Helvetica, sans-serif;

}

header{

       background-color: #002171;
       color:#FFFFFF;
       text-align: center;


       

 
}


header :link {
             color:#FFFFFF;
}

header :visited {
                color:#FFFFFF;

}

header :hover {
             color:#90C7E3;
}



nav{

    /*background-color:#FFFFFF;*/
    text-align: center;
    padding: 0em;
    font-size: 120%;
    font-weight: bold;

}

nav a {
      text-decoration: none;
}


nav a:link{
          color:#5C7FA3;}

nav a:visited{
          color:#344873;}

nav a:hover{
          color:#90C7E3;}


nav ul {



    list-style-type:none;

    margin:0;

    padding-left:0;

    font-size:1.2em;


}

nav li{

/* border-bottom: solid #000080 1px ;*/
border-bottom: none;
}

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




}

h2{

 color: #1976D2;
 text-shadow: 1px 1px 1px #CCCCCC;
 font-family: Georgia, Times New Roman, serif;
 padding-left: 20px;
 margin:0;
 padding-top:10px;
 padding-right:20px;
 padding-bottom:0px;
 padding-left:30px;
 display:block;
 background: #FFFFFF;
 overflow: auto; 

}

dl{

 padding-left: 20px;
 padding-top:10px;
 display:block;
}

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


}


dt{

    color: #002171;
}

.resort{

       color:#1976D2;
       font-weight: bold;
}

main ul{

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

footer{
       font-size:75%;
       font-style:italic;
       text-align:center;
       font-family: Georgia,
       serif, Times New Roman;
       padding:2em;
       /*margin-left: 190px;*/
       background-color: #FFFFFF;
}
#contact{
       font-size:90%;
    }

#wrapper{

 background-color: #90C7E3;
 background: linear-gradient( #FFFFFF, #90C7E3);
 }

 main{

 padding-top:1px;
 padding-right:20px;
 padding-bottom:20px;
 padding-left:30px;
 display:block;
 background: #FFFFFF;
 /*margin-left: 190px;*/
 overflow: auto;
}

#homehero{

 height:300px;
 background-image:url(coast2.jpg);
 background-repeat:no-repeat;
 background-size:100% 100%;
 /*margin-left: 190px;*/



}

#yurthero{

 height:300px;
 background-image:url(yurt.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%;
 /*margin-left: 190px;*/

 
}


* { box-sizing: border-box; }

#section {
       padding-right: 2em;
       padding-left: 2em;
       float:right;
       width:33%;
 
}




/* this one is for the Yurts page */

dl { 
 padding-top:0px;
 margin:0;
 padding-right:20px;
 padding-bottom:0px;
 padding-left:30px;
 display:block;
 background: #FFFFFF;
 /*margin-left: 190px;*/
 overflow: auto;

}

.container {  

    display: flex;  
    flex-wrap: nowrap;
    justify-content:space-between;


}

.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; }



/*COMMENT: This is for the Responsive Page.*/
@media (min-width: 600px) {
nav ul{
 
    display: flex;
     flex-wrap:nowrap;
     flex-direction: column;
     justify-content:space-around;
 /*display: flex;
 flex-direction: column;
 padding-top: 1em; */

 
}

nav {

 text-align: left;
 padding-left: 1em;

}

#wrapper {

 margin: auto;
 width: 80%;
 border: #000080;
 box-shadow: none;
 display: grid;
 grid-template-rows: auto;
 grid-template-columns: 1fr 1fr 1fr; }
}


@media (min-width: 1024px) {
 nav ul{
    
    
     flex-direction: column;
     padding-top: 1em; 
   


  }

 
  nav {
       display:block;
       text-align: left;
       padding-left: 1em;  
       float: left;
       width: 15%;

       height: 170vh;
       background-color: #90C7E3;
       background: linear-gradient( #FFFFFF, #90C7E3);
     
  }


  main{

    display:block;
    float:right;
    width:80%;

  }

  footer{
    display:block;
    float:right;
    width:85%;
  }

  #homehero {

    width:85%;
    float:right;
  }

  h2{

     display:block;
    float:right;
    width:85%;
  }

  #wrapper{

       margin: auto;
       width: 85%;
       border: #000080;
       box-shadow: none;



       display: grid;
                grid-template-rows: auto auto auto;
                grid-template-columns: 1fr 1fr 1fr ; }

 header{ grid-row: 1 / 3; grid-column: 1 / 2; }
          
 nav { grid-row: 1 / 2; grid-column: 2 / 5; }
 div { grid-row: 2 / 3; grid-column: 2 / 3; }
 main { grid-row: 2 / 3; grid-column: 3 / 4; }
 footer{ grid-row: 2 / 3; grid-column: 4 / 5; }

  }



table {
border-collapse: collapse;
width: 80%;
border: 2px solid #3399CC;
margin-left: 230px;



  
}

th, td {

 padding: 0.5em;
 border: 2px solid #3399CC ;



}

td{

text-align: center;
}
.center {

text-align: center;
padding: 10px;
}


.text{
text-align:left;
padding: 10px;
}

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