/* 
    Assignment Name: Pacific Trails Resort
        Task 2: Configure the CSS
    File Name: pacific.css
    Date: 11/5/18 
    Programmer: Mary Grace A. Gusso */

*{ box-sizing: border-box; }

header, nav, main, footer { display: block; }

body    { background-color: #3399CC;
          background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC);
          color: #666666;
          font-family: Verdana, Arial, sans-serif; }

header  { background-color: #000033;
          color: #FFFFFF;
          font-family: Georgia, sans-serif; }

main    { padding: 0 2em;
          display: block; 
          background-color: #FFFFFF; 
          margin-left: 170px;
          padding: 1px 0;}

h1      { line-height: 200%; 
          background-image: url(sunset.jpg);
          background-position: right;
          background-repeat: no-repeat;
          padding-left: 2em;
          height: 72px; 
          margin-bottom: 0;}

nav     { float: left;
          width: 160px;
          padding: 0;
          font-weight: bold; }

nav ul  { list-style-type: none;
          padding-left: 1em; }

nav a   { text-decoration: none; }

nav a:link { color: #FFFFFF; }
nav a:visited { color: #C2E0F0; }
nav a:hover { color: #CCCCCC; }

h2      { color: #3399CC;
          font-family: Georgia, serif; }

dt      { color: #000033;
          font-weight: bold; }

h3      { color: #000033; }

.resort { color: #000033;
          font-size: 1.2em; }

footer  { padding: 1em;
          margin-left: 170px;
          font-size: .07em;
          font-style: italic;
          text-align: center; 
          background-color: #FFFFFF;}

#wrapper { min-width: 700px;
           max-width: 1024px;
           box-shadow: 5px 5px 5px #828282;
           margin-left: auto;
           margin-right: auto; 
           background-color: #000033;}

#homehero { height: 300px;
            margin-left: 170px;
            background-image: url(../coast.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;}

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

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