1 files changed, 242 insertions, 0 deletions
diff --git a/HTML/Tests/Test3/pacific.css b/HTML/Tests/Test3/pacific.css
new file mode 100644
index 0000000..67fc6e5
--- /dev/null
+++ b/HTML/Tests/Test3/pacific.css
@@ -0,0 +1,242 @@
+* {
+    box-sizing: border-box; 
+}
+
+body {
+    background-color: #EAEAEA;
+    color:#555555;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+header {
+    background-color: #002171;
+    color: #FFFFFF;
+    letter-spacing: 0.25em;
+    text-align: center;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+header a {
+    text-decoration: none;
+}
+
+header a:link {
+    color: #FFFFFF
+}
+
+header a:visited {
+    color: #FFFFFF
+}
+
+header a:hover {
+    color:#90C7E3;
+}
+
+
+h1 {
+    text-align: center;
+    margin-top 0;
+    font-family: Georgia, 'Times New Roman', Times, serif
+}
+
+nav {
+    text-align: center;
+    font-weight: bold;
+    padding: 0;
+    font-size: 120%;
+}
+
+nav ul {
+    list-style-type: none;
+    margin 0;
+    padding-left: 0;
+    font-size 1.2em;
+}
+
+
+nav li {
+    border-bottom: 1px solid #002171;
+}
+
+nav a {
+    text-decoration: none;
+}
+
+nav a:link {
+    transition: 3s ease-out;
+    color:#5C7FA3;
+}
+
+nav a:visited {
+    color: #344873;
+}
+
+nav a:hover {
+    color: #A52A2A;
+}
+
+main {
+    background-color: #FFFFFF;
+    padding: 1px 20px 20px 30px;
+    display: block;
+    overflow: auto;
+}
+
+h2 {
+    color: #197602;
+    text-shadow: 1px 1px #CCCCCC;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+h3 {
+    color: #000033;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+main il {
+    list-style-image: url(marker.gif);
+}
+
+dt {
+color: #002171
+}
+
+footer {
+    background-color: #FFFFFF;
+    font-size: 75%;
+    font-style: italic;
+    text-align: center;
+    padding: 2em;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.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%;
+}
+
+#yurthero {
+    height: 300px;
+    background-image: url(yurt.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+  form { display: flex; 
+         flex-flow: column nowrap; }    
+  input, textarea { margin-bottom: .5em; }
+
+
+@media (min-width: 600px) {
+
+    form {
+        width: 60%;
+        display: grid;
+        grid-gap: 1em;
+        grid-column: 6em / 1fr;
+    }
+
+
+
+    input[type="submit"] {
+        grid-column: 2;
+        width: 9em;
+    }
+
+    nav ul {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-around;
+    }
+
+    nav li {
+        border-bottom: none;
+    }
+
+    section {
+        margin-left: 2em;
+        margin-right: 2em;
+        flex 1;
+    }
+
+    .flow {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+@media (min-width: 1024px) {
+    #wrapper {
+        margin: auto;
+        width: 80%;
+        border: 1px solid #002171;
+        box-shadow: 3px 3px 3px #002171;
+    }
+
+    nav {
+        text-align: left;
+        padding-left: 1em;
+    }
+
+    @supports (display: grid) {
+        nav ul {
+            flex-direction: column;
+            padding-top: 1em;
+        }
+        .hero {grid-area: hero;}
+        header {grid-area: header;}
+        nav {grid-area: nav;}
+        main {grid-area: main;}
+        footer {grid-area: footer;}
+        
+        #wrapper {
+            display: grid;
+            grid-template:
+            "header header"
+            "nav hero"
+            "nav main"
+            "nav footer"
+            / 180px 1fr;
+        }
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border: 2px solid #3399CC;
+}
+
+td,th {
+    padding: 0.5em;
+    border: 2px solid #3399CC;
+}
+
+td {
+    text-align: center;
+}
+
+.text {
+    text-align: left;
+}
+
+tr:nth-last-of-type(even) {
+    background-color: #F5FAFC;
+}
+
+video, embed { 
+    float: right; 
+    padding-left: 20px; 
+}