html, body {
 font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji";
 font-size: 13pt;
}
p { line-height: 21pt; }
#fixed_banner { position:fixed;top:0;left:0;right:0;background:#EEE;padding:18px 24px;z-index:10; }
#fixed_banner h1 { margin:0;padding:0; }


#site_menu {
  margin:0;
  padding:0;
}
#site_menu ul {
  padding-left:1em;
}
#site_menu li {
  list-style-type:none;
  
}
#site_menu li a { color:black;text-decoration:none;margin:0.4em 0;display:block;}
#site_menu li a:hover { color:#555;text-decoration:none; }

.dropcap {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  background: #303030;
  color: #FDF9F2;
  float: left;
  font-size: 6rem;
  line-height: 1;
  margin: 0.1em 0.1em 0.2em 0;
  padding: 0.1em;
}

.contextual-menu { padding:0;}
.contextual-menu li { list-style-type:none;font-size:0.9em; }
.contextual-menu li a { color:#666; }
.contextual-menu li.current a { font-weight:bold;color:black; }

ul, ol {
  line-height: 13pt;
}
ul ul {
  padding-left:1em;
}
ul li, ol li {
  padding:0.3em;
  line-height:13pt;
}



ul li a { color:black;font-weight:bold;}
ul li a:hover { color:#555;text-decoration:none; }


/************ page elements ************/

.callout {
  background: #EEE;
  padding: 2em;
  border-radius: 4px;
  box-shadow: 1px 1px 3px #CCC;
  font-size: 1.2em;
  color: #333;
  border-left: solid 5px #005;
}

.activity {
  background: #FFF;
  padding: 0em 20% 2em 7%;
  border-radius: 6px;
}
.activity img { max-width:100%; }

.tiles { 
  display: grid;
  grid-template-columns: auto auto auto;
}
.tile {
  border: solid 1px #EFEFEF;
  padding: 1em;
  margin:0.5em 0.5em 0.5em 0;
  text-decoration:none;
}
.tile:hover { box-shadow:0 0 5px grey; }


/*********** form elements ***********/

input[type='text'] {
  padding:0.8em;
  border:none;
  background:#EEE;
  border-radius:5px;
  width:60%;
}

.button {
  padding:0.75em;
  border:none;
  background:#999;
  color:white;
  border-radius:5px;
}
.button:hover {
  background:#EEE;
  color:black;
  cursor:pointer;
}

textarea {
  padding:0.8em;
  border:none;
  background:#EEE;
  border-radius:5px;
  width:80%;
  height:20em;
}
#editor {
  padding:0.8em;
  border:none;
  background:#EEE;
  border-radius:5px;
  width:100%;
  height:20em;
}

.type_list {
  display:flex;
  gape:1em;
}
.type_list li { width:200px;background:#EEE;padding:1em; list-style-type:none;margin:0.5em;}