*{ box-sizing: border-box; }
/* Remember: rfb value of
-black is 0, 0, 0 (no colour)
-white is 255,255,255 (all colours)*/
.row::after {
    content: "";
    clear: both;
    display: table;
}

html, body {
  height: 100%;
}

html {
    font-family: "Cagliostro", sans-serif;
}

.header {
    color: #000000;
    padding: 5px;
}

.content {
  position:absolute;
  }

.booktitle {
  font-style: italic;
}

h1 {
  color: #000000;
  font-family: 'Cagliostro', sans-serif;
  font-size: 25px;
  text-shadow: 1px 1px 2px #ffffff;
}
div.header h1 {
  color: #000000;
  font-family: 'Cagliostro', sans-serif;
  font-size: 25px;
  text-shadow: 1px 1px 2px #ffffff;
  margin-bottom: 1px;

}
h2 {
  color: rgba(0,0,0,1);
  font-family: 'Cagliostro', sans-serif;
  font-size: 15px;
}

h2.header {
    color: rgba(255,255,255,1);
    text-shadow: 3px 3px 7px rgba(10,10,45,1);
    padding: 0px;
    margin-top: 1px;
}

h3
{
color: rgba(0,0,0,1);
font-family: 'Cagliostro', sans-serif;
}

h4
{
color: #000000;
font-family: 'Cagliostro', sans-serif;
}

img {
    width:100%;
}

img.header {
 position:relative;
 float:right;
 height:70px;
 width:auto;
}

p {
margin-left: 3px;
font-family: 'Cagliostro', sans-serif;
color: #000000;
font-size: 16px;
}

p.header
{
font-family: 'Cagliostro', sans-serif;
color: #000000;
}

li
{
font-family: 'Cagliostro', sans-serif;
}

div.backgroundimageindex
  {
  background-image: url("../images/dropsupwords.jpg");
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left top;
  background-size: cover;
  }

div.backgroundimage
  {
  background-image: url("../images/dropsupwordspale.jpg");
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left top;
  background-size: cover;
  }

div.smicons img
  {
  height: 18px;
  width: auto;
  }

a:link {color: rgba(0, 0, 0, 1); text-decoration: underline;}
a:visited {color: rgba(0, 0, 0, 1); text-decoration: underline;}
a:hover {color: rgba(0, 0, 0, 1); text-decoration: underline; font-size: 101%;}
a:active {color: rgba(0, 0, 0, 1); font-weight: bold; text-decoration: none;}


/* dropdown menu for small screen */
/* class dropdown is the parent of both the menu button and the items in the menu */
.dropdown {
    position: relative;
    display: block;
}
/*class dropbtn is the "menu" button */
.dropbtn {
    background-color: rgba(158, 163, 158, 1);
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    display: block;
}
/*class .menu-content is the list of menu items; default is not displayed */
.menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 99px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu-content a {
    color: black;
    padding: 4px 4px;
    margin-bottom: 9px;
    text-decoration: none;
    font-size: 12px;
}

.menu-content a:hover {background-color: rgba(160, 160, 158, 1); margin-bottom: 2px;}
/*
.dropdown:hover .menu-content {
    display: block;
}*/

.dropdown:hover .dropbtn {
    background-color: rgba(160,160,158,1);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display: block;}

/* interior page bookmarks */
a.button1 {text-decoration: none;}

.button1 {
  font-family: 'Cagliostro', sans-serif;
  border-style: solid rgba(0,0,0,0.19);
  border-radius: 4px;
  margin: 3px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2), 0 2px 9px 0 rgba(0,0,0,0.19);
  padding: 4px;
  display: inline-block;
}
a.button1:visited {background-color: rgba(210, 210, 210, 1);}
a.button1:hover {
  background-color: rgba(220, 220, 220, 1);
  box-shadow: 2px rgba(120, 120, 120, 1);
  transform: translateY(2px);
}
a.button1:active {
  background-color: rgba(190, 220, 220, 1);
  font-weight: normal;
  box-shadow: 3px rgba(120, 120, 120, 1);
  transform: translateY(2px);
}