/* *********** The navigation.css covers the stying for all pages for the:
                Header Area title Wedding, 
                Navigation Menu,
                Page layout,
                the names Clare Rolston and David Kirk just below the header area 
                Footer 
                ******************************** */

/* ***********Layout of all pages *********** */

div#page {
  font-family: 'Neuton', serif;
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

header.headerarea {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 113px;
}

/* ***********Title Wedding *********** */
h1 {
  font: 300 80px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: royalblue;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
  margin-left:5px;
  margin-top: 22px;
} 

/* ***********Start of Navigation list styling*********** */

nav {position: absolute;
    top: 0px;
    right: 0px;
    padding: 62px 0 0 0;
    width: 99.6%;
    border-bottom: 2px solid grey;
    z-index: 1;
}

nav::after {content:" ";
    display: block;
    clear: both;}

nav ul {list-style: none;
    margin: 0;
    padding: 0px;
    float: right;
}

nav ul li:hover {background-color: #968391;
    color: white;
}

nav ul li:hover > ul {display: block;}

nav ul li a {display: inline-block;
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    width: 150px;
    position: relative;
}

nav ul li a:visited {color: purple;
    text-decoration: underline;}

nav ul li a:hover {background-color: #968391;}

nav ul ul {position: absolute; 
    top: 100%;
    background-color: #C8C9CC;
    display: none;}

nav ul ul li {position: relative;}

nav ul ul ul {left: 100%; top: 0px;}

/* Top Level */

nav > ul {padding-left: 200px;}

nav > ul > li {float: left;}

nav > ul > li > a {width: auto; 
    padding: 10px 20px 15px 20px;}

/* Creating the triangle POSITION for sub menus */
nav a[aria-haspopup="true"]::after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 16px;
    right: 15px;

    /* Creating the right triangle */
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #fff;
  }

/* Creating the top level menu triangles that point downwards - this OVER-RIDES the previous left facing */
nav > ul > li > a[aria-haspopup="true"]::after  {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    left: 20px;
    right: auto;
    bottom: 6px;
    top: auto;
  }

/* Creating names div and styling for David Kirk and Clare Rolston */

div.namesarea {position: absolute;
      min-height: 60px;
      height: auto;
      width: 800px;
      right: 7.7%;
      margin-top: 1.95%;
}

div.namesarea h3 {font: 300 50px/0.8 'Great Vibes', Helvetica, sans-serif;
  height: 200px;
  color: white;
  text-align: right;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
  }

/* ****** Footer area styling ****** */

footer {width: 100%;
  margin: 0 auto;
  background-color: #B5C4C1;
  padding: .22em 0 .22em 0px;
}

footer p {font-family: courier new;
  font-size: 0.9em;
  text-align: center;}


/* ***********Color of all links and interactivity on all Webpages*********** */
a:visited {color: #9400D3; font-weight: bold;}
a:hover {color: #00BFFF; font-weight: bold;}
a:active {color: pink;}


/* *********************** MEDIA QUERIES *************************** */

@media screen and (max-width: 1310px) { 

  header.headerarea {height: 146px;}  /* Increase header area size */

  nav {padding: 97px 0 0 0;}   /* Move nav menu below the wedding header */

  nav > ul {padding-left: 0px;}  /* Remove the padding indent */

}

@media screen and (max-width: 1040px) { 
  
  nav > ul > li > a {padding: 7px 10px 12px 10px;} /* Decrease nav anchor padding widths */

}

@media screen and (max-width: 860px) { 

    /* Header Area */
    h1 {font: 300 70px/0.8 'Great Vibes', Helvetica, sans-serif;
        padding: 3px;} /* Decrease wedding header size */

    header.headerarea {height: 105px;}  /* Increase header area size */


    /* Navigation - move to bottom of page above the footer */

    nav {position: static; /*This has moved this from the top to now its original location in the HTML code which is at the bottom of the page */
      width: auto;  /*By specifying auto this will automatically be the width of its parent */
      padding: 20px 15px;
      background-color: royalblue;}

    nav ul {float: none;}

    nav ul,
    nav ul ul,
    nav ul ul ul {display: block; 
      position: static;} /* Now all of our un-ordered lists will now take the full width of the screen and none of them will be absolute positioned.
       And the navigation element won't be able to extend down through all of the un-ordered lists. */

    nav > ul {padding: 0;}
    nav > ul > li {float: none; margin-top: 20px; }

    nav ul li:hover {background: none;} /* List items will not show a background colour when hover now */

    nav ul li a {
      display: block; /* This means the anchor link will be the full width of the browser and the entire element is clickable */
      width: auto;
      margin: 8px 10px;
      padding: 8px 15px;
      color: white;
      font-size: .8em;
      border: 1px solid rgba(255,255,255,.25);
      }

    nav ul li a:hover {background-color: rgba(19,52,237,.5);}

    nav ul li a:visited {color: white; 
       background-color: rgba(255,255,255,.5);} 

    nav ul ul {background: none;} /* This removes all previous background properties */

    nav ul ul li a {margin-left: 30px;} /* Indent the first level of sub menus */
    nav ul ul ul li a {margin-left: 60px;} /* Indent the second level of sub menus */
    
    nav a[aria-haspopup="true"]::after {display: none;} /* Remove the triangles indicating the sub menus */

}


@media screen and (max-width: 500px) {
    footer p {font-size: 0.7em;}
  }