/*

COLORS:

#F5CD9D = beige
#CC9D6A = dark beige
#2E2003 = dark brown (both for divs and text)
#990000 = dark red
#C7291B = medium red?
#F55236 = light coral red
#EDAF11 = gold
#83B2D6 = light blue

*/


* {
  box-sizing: border-box;
}

#maincontainer { /* this creates some space around all of the site's content */
  margin-left: 7%;
  margin-right: 7%;
  border: none;
}

html {
  margin: 0;
}

body {
  background-image: url("oceanbg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 120% 100%;
  margin: 0;
  padding: 0;
}




                    /* DIVS */


header {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
}

main, aside, article {
  box-shadow: 4px 0px 3px rgba(0, 0, 0, 0.7)
}

main, aside, article {
  background-image: url("parchment.jpg");
  background-size: 100%;
}

header, footer {
  background-image: url("leather.jpg");
  background-size: 30%;
  margin: 0;
}

main, aside, article {
  padding: 15px;
  margin: 0 5px 0 5px;
}

main, aside, article {
  border-left: 10px ridge #D9A60D;
  border-right: 10px ridge #D9A60D;
}

header {
  border-bottom: 10px ridge #EDAF11;
  margin: 0px;
  padding: 30px;
  border-top: 1px solid transparent; /* this is the only thing removing that weird 3px of top margin for some reason?? */
}


nav {
  margin: 10px;
}

nav a {
  width: 15%;
}

footer {
  border-top: 10px ridge #EDAF11;
  margin: 0;
  text-align: center;
  border-bottom: 1px solid transparent; /* see above */
}

    
div { /* default div is container div */
  border: none;
  margin: 0px;
  padding: 0px;
}

.navlink {
  border: 3px outset #EDAF11;
  background-color: #2E2003;
  padding: 5px;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.7)
}

.navlink p, .navlink a {
  text-decoration: none;
}

.navlink:hover {
color: #F55236;
box-shadow: -3px 0 10px #EDAF11, 0 3px 10px #EDAF11, 3px 0 10px #EDAF11, 0 -3px 10px #EDAF11;
}

.quicklink, .asidecontent {
  padding: 5px;
  border: 3px outset #EDAF11;
  line-height: 1;
  background-color: #F5CD9D;
  text-align:center;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

.quicklink:hover {
  box-shadow: -3px 0 10px #EDAF11, 0 3px 10px #EDAF11, 3px 0 10px #EDAF11, 0 -3px 10px #EDAF11;
}

/* WIKI DIVS */

div.infobox {
  border: 2px solid black;
  float: right;
  width: 30%;
  margin-left:15px;
  margin-top:20px;
}

#infoboxtitle { 
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 0.1px; /* needs to have padding in order to have bg color for some reason. maybe debug later?*/
  background: #CC9D6A;
  border-bottom: 1px solid black;
}

.infobox img {
  border: 0px solid black;
}

#infoboxtitle h1 {
  margin:15px;
}

.infobox td, .infobox th, .infobox table {
  border-collapse: collapse;
  padding: 5px;
  background: #F5CD9D;
}
.infobox th {
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: #CC9D6A;
}
.infobox td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid black;
  }

.infobox ul, .infobox li {
  line-height: 1.5;
  vertical-align: top;
}

.infobox p, .infobox ul, .infobox li, .infobox td, .infobbox a {
  font-size: 15px;
  font-family: Verdana, sans-serif;
}
  


ul ul {
  margin-left: 10px;
}

.gallery {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.galleryitem {
  margin: 50px;
  padding: 0;
  max-width: 20%;
}

.galleryitem p {
  font-size: 15px;
  line-height: 1;
  vertical-align: top;
  margin: 5px 0px 0px 0px;
}

.galleryitem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 2px solid #2E2003;
}

.galleryitem div {
  width: inherit;
}
  
    
    
                    /* INLINE ELEMENTS */


p, a, blockquote, h1, h2, h3, h4, h5, h6, ul, ol, li {
  font-family: Georgia;
  color: #2E2003;
}

p, a, blockquote, ul, ol, li {
  line-height: 1.5;
  font-size: 20px;
  }

footer p {
  color: #EDAF11
}

header a {
  text-decoration: none;
}

main a, aside a, article a {
  color: #990000;
  text-decoration: underline;
}

main a:visited, aside a:visited, article a:visited {
  color: #F55236;
}

main a:hover, aside a:hover, article a:hover {
  color: #EDAF11;
}

footer a {
  color:#EDAF11
}

footer a:hover {
  color:#F55236
}

.navlink p {
  color: #990000;
  font-weight: bold;
  text-shadow: -1px 0 #EDAF11, 0 1px #EDAF11, 1px 0 #EDAF11, 0 -1px #EDAF11, 2px 2px 2px #2E2003;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-size: 30px;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  margin: 15px 0;
  text-decoration: none;
}
  
      .infobox li {
  font-size: 17px;
  line-height: 1;
  list-style-position: outside;
}
.infobox ul {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

.smalllist {
  font-size: 15px;
  font-family: Verdana, sans-serif;
}

ul.smalllist > li {
  font-size: 15px;
  font-family: Verdana, sans-serif;
  display: list-item;
}

blockquote {
  font-style: italic;
  margin: 5px;
}
    .bigquote, .smallquote {
      padding: 15px;
      border: 1px solid black;
      line-height: 1;
      background-color: #F5CD9D;
    }
    .bigquote, .smallquote {
      width: 50%;
    }
    .bigquote blockquote {
    font-size: 22px;
    }
    .attribution {
    text-align: right;
    font-family: Verdana, sans-serif;
    }
    .bigquote .attribution {
    font-size: 18px;
    }
    .smallquote .attribution {
    font-size: 16px;
    }

p.bigtitle {
  font-size: 72px;
  font-weight: bold;
  font-variant: small-caps;
  line-height: 1;
  margin: 0 0 30px 0;
  text-align: center;
  color:#990000;
  text-shadow: -1px 0 #EDAF11, 0 1px #EDAF11, 1px 0 #EDAF11, 0 -1px #EDAF11, 4px 4px 3px rgba(0, 0, 0, 0.7);
  letter-spacing: 3px;
}
p.smalltitle {
 font-size: 40px; 
 font-weight: bold;
}
.smalltext {
  font-size: 15px;
  font-family: Verdana, sans-serif;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 25px;
}
h3 {
  font-size: 20px;
}
.wikiheading {
  line-height: 0;
}
hr {
  border: 1px solid #2E2003;
  margin: 5px 0px;
}
hr.thick {
  border: 2px solid #2E2003;
  border-radius: 2px;
  margin:5px 0;
}