* { box-sizing: border-box; }
header, nav, main, footer { display: block; }
body { background-color: #3399CC;
      color: #666666;
	  font-family: Verdana, Arial, sans-serif;
    background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC);
}
header { background-color: #000033;
       color: #FFFFFF;
	   font-family: Georgia, "Times New Roman", serif;
}
h1 { line-height: 200%; 
    background-image: url(sunset.jpg);
    background-repeat: no-repeat;
    background-position: right;
    padding-left: 2em;
    height: 72px;
    }
h2 { color: #3399CC;
    font-family: Georgia, "Times New Roman", serif; }
h3 { color: #000033; }
nav { font-weight: bold; 
    padding: 0;
    float: left;
    width: 160px;
 }
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: 1; }
main { padding: 1px 0 0 1px;
      margin-left: 170px;
	  background-color: #FEF6C2;
	  display: block;
}
dt { font-weight: bold;
     font-size: 1.1em;
	 color: #000033;
     font-family: Georgia, "Times New Roman", serif;	 
}
.resort { color: #000033;
          font-size: 1.2em; }
footer { background-color: #FFFFFF;
    margin-left: 170px;
    font-size: .70em;
       font-style: italic;
    padding: 1em;
}		
#wrapper { width: 80%;
           margin-right: auto;
           margin-left: auto;
           background-color: #000033;
           min-width: 700px;
           max-width: 1024px;
           box-shadow: 3px 3px 3px #666666;
}
#homehero { height: 300px;
           background-image: url(coast.jpg);
        background-size: 100% 100%;
           background-repeat: no-repeat;
        margin-left: 170px; }
#yurthero { height: 300px;
        background-image: url(yurt.jpg);
         background-size: 100% 100%;
         background-repeat: no-repeat;
         margin-left: 170px; }
#trailhero { height: 300px;
            background-image: url(trail.jpg);
            background-size: 100% 100%;
           background-repeat: no-repeat;
           margin-left: 170px; }
#mobile { display: none; }
#desktop { display: inline; }
@media only screen and (max-width: 1024px) {
body { margin: 0;
	       background-image: none; }
#wrapper { width: auto;
	           min-width: 0;
	           margin: 0;
		   padding: 0;
		   box-shadow: none; }
h1 { margin: 0; }
nav { float: none;
	      width: auto;
	      padding-top: 0.01em;
	      padding-bottom: 0.01em;
              padding-left: 1em;
              padding-right: 1em; }
nav li { display: inline-block; }
nav a { padding-right: 2em; 
	  }
#homehero, #yurthero, #trailhero { padding-left: 0; }
main { padding: 1em; margin-left: 0; font-size: 90%; }
	}
@media only screen and (max-width: 768px) {
h1 { font-size: 1.5em;
	     height: 100%;
	     padding-left: 0.3em; }
nav { padding: 0; }
nav a { display: block; 
	      padding: 0.2em;
              font-size: 1.1em;
	      border-bottom: 1px solid #330000; }
nav ul { margin: 0;
                 padding: 0; }
nav li { display: block; 
                 margin: 0;
                 padding: 0; }
main { padding-top: 0.1em;
               padding-right: 0.6em;
               padding-bottom: 0.1em;
               padding-left: 0.4em; }
#homehero, #yurthero, #trailhero { display: none;
        }
footer { padding: 0; }
#mobile { display: inline; }
#desktop { display: none; }
}