.wrap {
  position: absolute;
  display: inline-block;
  top: 20px;
  right: 60px;
}

#update {
  padding: 5px;
  position: fixed;
  bottom: 3px;
  left: 120px;
}

#save {
  padding: 14px;
  background-color: inherit;
  border: none;
}

#save:hover {
  /* if cream: #e0ccaa */
  background-color: #bf6cdf;
  /* if cream: #0c0904 */
  color: #000;
  cursor: pointer;
  font-style: italic;
  text-decoration: underline;
}

#sticky1, #sticky2, #sticky3, #sticky4, #sticky5, #sticky6, #sticky7 {
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 80px;
}

#sticky1header, #sticky2header, #sticky3header, #sticky4header , #sticky5header, #sticky6header, #sticky7header {
  cursor: move;
  z-index: 2;
}

/* tape */
#tape1, #tape2, #tape3, #tape4, #tape5, #tape6, #tape7 {
  position: relative;
  background-image: url('/assets/sticky/tape.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
  margin: -15px;
  left: 80px;
  width: 124px;
  height: 36px;
}

#edit1, #edit2, #edit3, #edit4, #edit5, #edit6, #edit7 {
  position: relative;
  height: 200px;
  width: 250px;
  text-align: center;
  overflow: auto;
  z-index: 1;
  padding: 5px;
  padding-top: 20px;
  /* if cream: #d1ba92 */
  border:1px dotted #bf92d1;
}

@media (max-width: 767px) {
  #edit1, #edit2, #edit3, #edit4, #edit5, #edit6, #edit7 {
    height: 100px;
    width: 150px;
  }
  
  #tape1, #tape2, #tape3, #tape4, #tape5, #tape6, #tape7 {
    margin: -15px;
    left: 55px;
    width: 80px;
    height: 36px;
  }

  #sticky7 {
    top: 120px; left: 1%;
  }
  #sticky6 {
    top: 120px; left: 52%;
  }
  #sticky5 {
    top: 280px; left: 1%;
  }
  #sticky4 {
    top: 280px; left: 52%;
  }
  #sticky3 {
    top: 440px; left: 1%;
  }
  #sticky2 {
    top: 440px; left: 52%;
  }
  #sticky1 {
    top: 610px; left: 27%;
  }
  
  ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
}

#edit1 {
  background-image: url('/assets/sticky/1.png');
  color: #111;
}

#edit2 {
  background-image: url('/assets/sticky/2.png');
  color: #211e0b;
}

#edit3 {
  background-image: url('/assets/sticky/3.png');
  color: #14210b;
}

#edit4 {
  background-image: url('/assets/sticky/4.png');
  color: #21170b;
}

#edit5 { 
  background-image: url('/assets/sticky/5.png');
  color: #210b14;
}

#edit6 {
  background-image: url('/assets/sticky/6.png');
  color: #0b2120;
}

#edit7 {
  background-image: url('/assets/sticky/7.png');
  color: #1a0b20;
}

/* page base, taken from index */
body {
  background-image: url('/assets/sticky/StickyBG1.png');
}

a:link {
  color: #21190b;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #21190b;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #0c0904;
  background-color: transparent;
  text-decoration: underline;
  font-style: italic;
}

html {
  text-align: center;
  color: #21190b;
  font-family: verdana;
  font-size: 80%;
}

#copyright {
  font-family:verdana;
  font-size: 60%;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 5;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: #f5e5c9;
}
 
::-webkit-scrollbar-track {
  width: 0;  
  background: #f5e5c9;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #f5e5c9;
  border: 1px dashed #21190b;
}
::-webkit-scrollbar-thumb:hover {
  background: #e0ccaa;  
  border-radius: 8px;
}

/* Navigation */
ul {
  list-style-type: none;
  border: 1px dashed #736246;
  border-radius: 8px;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #f5e5c9;
  width: 95%;
}

li {
  align-content: center;
  display: inline-block;
  border-right: 1px dotted #736246;
}

li:first-child {
  border-left: 1px dotted #736246;
}

li:last-child {
  /* if cream: #736246 */
  border-left: 1px dotted #1a0b20;
  border-right: none;
  float:right;
}

li a, .dropbtn {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #e0ccaa;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f5e5c9;
  border-top: none;
  border-left: 1px solid #736246;
  border-right: 1px solid #736246;
  border-bottom: 1px solid #736246;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  
  min-width: 110px;
  z-index: 10;
}

.dropdown-content a {
  color: #21190b;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-top: 1px dotted #736246;
}

.dropdown-content a:hover {
  background-color: #e0ccaa;
  color: #0c0904;
  text-decoration: underline;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Drop button hover radius. Only applies to the last option so the bottom isn't going outside the border. */
.dbtnh {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}