.container {  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.7fr;
  grid-template-rows: 0.1fr 0.4fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: stretch;
  justify-items: stretch;
  grid-template-areas:
    ". header ."
    ". body ."
    ". footer .";
  background-image: url("back.gif");

}

.simplecontainer {  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.7fr;
  grid-template-rows: 0.1fr 2fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: stretch;
  justify-items: stretch;
  grid-template-areas:
    ". header ."
    ". body ."
    ". footer .";
  background-image: url("back.gif");

}

.longcontainer {  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.7fr;
  grid-template-rows: 0.1fr 3.8fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: stretch;
  justify-items: stretch;
  grid-template-areas:
    ". header ."
    ". body ."
    ". footer .";
  background-image: url("back.gif");

}

.lemmatacontainer {  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.7fr;
  grid-template-rows: 0.1fr 3.8fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: stretch;
  justify-items: stretch;
  grid-template-areas:
    ". header ."
    ". body ."
    ". footer .";
  background-image: url("back.gif");

}

.header {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "title"
    "menu";
  grid-area: header;
  text-align: center;
  background-color:#a33e1f;
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
  color: white;
}

.title { grid-area: title; 
  vertical-align: middle;
}

.menu{
	float:left;
	width:100%;
}

.search:hover {
        background-color: darkred;
        transition: 0.0s;
}

.about { grid-area: about; 
  font-size: 1.3em;
}

.about:hover {
        background-color: darkred;
        transition: 0.0s;
}

li.editions { grid-area: editions; 
  font-size: 1.3em;
}

.editions:hover {
        background-color: darkred;
        transition: 0.0s;
}


.body {  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  grid-template-rows: 0.3fr 0.8fr 0.7fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "text image"
    "text img_desc"
    "text projects";
  grid-area: body;
  background-color:white;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.body a:link{
    color:#a33e1f;
}
.body a:visited{
    color:#b5644b;
}

.simplebody {  display: grid;
  grid-template-columns: 1.4fr;
  grid-template-rows: 0fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "text"
    "quote"
    "highlight";
  grid-area: body;
  background-color:white;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.quote{
padding-left: 40px;
}

.highlight{
 color:#a33e1f;
}

.simplebody a:link{
    color:#a33e1f;
}
.simplebody a:visited{
    color:#b5644b;
}

.lemmatabody {  

  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: 0.3fr 0.8fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "lemmatatitle lemmatatitle"
    "lemmataletter lemmatacard";
  grid-area: body;
  background-color:white;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;

}
.image { grid-area: image; 
  background-color:white;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

.img_desc { grid-area: img_desc; 
  text-align: center;
  font-size: 0.8em;
}

.projects { grid-area: projects; 
  text-align: center;
  font-size: 0.9em;
}


.text { grid-area: text; 
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.footer {  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-rows: 0fr 1fr 0fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "copyright licence"
    "wlu_logo acknowledgement"
    "sshrc_img cms_logo";
  grid-area: footer;
  text-align: center;
  font-size: 0.9em;
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  background-color:#a33e1f;
  color: white;
}

.footer a:link{
    color:#FFFFFF;
}

.copyright { grid-area: copyright; }

.sshrc_img { grid-area: cms_logo; 
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.wlu_logo { grid-area: wlu_logo; 
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 31px;
}

.acknowledgement { grid-area: acknowledgement; 
  padding-top: 0px;
  padding-right: 121px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.cms_logo { grid-area: sshrc_img; 
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

_____________


li {
  cursor: pointer;
}

li.home { grid-area: home; 
  font-size: 1.3em;
}

li.home:hover {
        background-color: darkred;
        transition: 0.0s;
}


li.browse { grid-area: browse; 
  font-size: 1.3em;
}

li.browse:hover {
        background-color: darkred;
        transition: 0.0s;
}

li.search { grid-area: search; 
  font-size: 1.3em;
}


a {
  text-decoration: none;
}

ul {
  background-color:#a33e1f;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background-color:#a33e1f;
  display: block;
  float: left;
  padding-top: 25px;
  padding-right: 0px;
  padding-bottom: 25px;
  padding-left: 0px;
  position: relative;
  text-decoration: none;
  transition-duration: 0s;
}
  
li a {
  color: white;
}

li:focus-within a {
  outline: none;
}

ul li ul {
  background-color:#a33e1f;
  visibility: hidden;
  opacity: 0;
  min-width: 1rem;
  position: absolute;
  transition: all 0.0s ease;
  margin-top: 1.6rem;
  left: 0;
  display: none;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

#menu ul li  {
  position: relative;
}


#items {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#items li {
    display: table-cell;
	width: 20%;
}

_____________


.button {
  background-color: #a33e1f; 
  border: none;
  color: white!important;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width:100%;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}

.smallbutton {
  background-color: #a33e1f; 
  border: none;
  color: white!important;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width:50%;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
  margin-left: 25%;

}

.wrappedimage {  
float: right;   
margin: 0px 10px 0px 10px;   
}  

.tab { 
  margin-left: 40px; 
  font-size: 0.9em;
}



--------------------

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 0.3fr 1.4fr;
  grid-column: 2;
}

.lemmatacard {
  grid-column-start: 2;
  grid-column-end: 3;
  padding-right:200px;
}

.lemmatacard h2 {

  padding: 10px;
  margin: 0;
}

.lemmatacard p {
  padding: 10px;
  margin: 0;
}

.lemmataletter {
  padding-left: 20px;
  text-align: center;
  font-size: 1.7em;
  grid-column-start: 1;
  grid-column-end: 2;
}

.lemmataletter h2 {
  padding: 10px;
  margin: 0;
}

.lemmataletter p {
  padding: 10px;
  margin: 0;
}

.lemmataletter stretch {
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: center;
}

p.letters {
  font-weight: bold;
  font-size: 1.5em;
}
.lemmatatitle{
  padding: 10px;
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 1.7em;
  text-align: center;
}