/* Web fonts */

/* Gentium Plus
   Copyright (c) 2003-2022 SIL International (http://www.sil.org/)
   SIL Open Font license v1.1
*/
@font-face {
    font-family: "Gentium Plus";
    src: url("./GentiumPlus-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Gentium Plus";
    src: url("./GentiumPlus-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: "Gentium Plus";
    src: url("./GentiumPlus-Bold.woff2";) format("woff2");
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: "Gentium Plus";
    src: url("./GentiumPlus-BoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
}


html { font-size: 100%; }

/* Marble surroundings */
body { /* background: url('../img/marb009.jpg'); */
    background-color: #fcfcfc; 
     }

#page { position: relative; 
	background-color: #fcfcfc;
	margin: 0 auto;
	overflow: hidden;
	padding-left: 5px;
	padding-right: 5px;
      }   

* { font-family: "Gentium Plus", Arial;
  }


/* MathJax containers: red border (for lineheight trouble diagnostics) */
/* mjx-container { border: 1px red solid; } */

#preamble { width: 100%;
	  }

#sitebanner { width: 100%;
	      font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */ 
	      padding: 5px;
	      padding-bottom: 0px;
	      margin: 0;
	      margin-top: 10px;
	      border: none;
	      position: relative;
	      min-height: 64px;
	    }


#sitebanner * { text-align: left; }

#topbar { width: 100%;
          display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  justify-content: space-between;
	}

#sitelogo { height: 38px; width: 64px;
	    background-image: url("../img/cm.png");
	    background-repeat: no-repeat;
	    background-size: 64px 38px;
	  }

#sitename { font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */
            font-size: 1.4rem;
	    font-variant: small-caps;
	    margin: 0;
	    padding: 0;
	    line-height: 1.4rem;
	    /* position: absolute;
	    margin-top: -10px;
	    left: 100px; */
	  }

#sitename small { font-size: 1rem;
		  font-variant: small-caps;
		  line-height: 1 rem;
		}
		  
#searchbox { /* position: absolute;
	     left: 300px;
	     width: 240px; 
	     top: 0px; */
	   }
#searchbox fieldset { border: none; padding-bottom 0px; }
legend { font-variant: small-caps; font-size: 0.9rem; }
.searchfield { height: 20px;
	       width: 200px;
	       font-size: 0.9rem;
	       position: relative;
	       border-radius: 5px;
	       top: -10px;
	       margin: 0;
	       padding: 0;
	     }
.searchbutton { width: 24px; margin-left: 5px; margin-bottom: 3px; }

#langmenu { width: auto;
	    text-align: left;
	    overflow: hidden;
	  }

/* ... A navbar with just links ... */

#navbar { 
          width: auto;
          text-align: right;
	  padding: 4px;
	  margin-top: 20px;
	  border-bottom: 1px solid black;
	  min-height: 20px;
}
#navbar * {
                    font-size:  1rem;
		    font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */
		    font-variant: small-caps;
}
#navbar .menu { display: block; max-width: auto; } /* max-width was 500px */
#navbar .menu div { display: none; }
#navbar .menu:first-child div {
    display: block;
    padding-right: 10px; padding-left: 10px;
    float: right;
}
#navbar .menu:first-child div:hover { text-shadow: 0px 0px 5px #00aaff; }
#navbar .menu:first-child div:hover * { text-decoration: none;}
#navbar .menu:first-child .sectiontab {
    text-shadow: 0px 0px 5px #00aaff; font-weight: bold;
    /* border-bottom: 2px solid blue; */
}
    

/* ... A tab-style navbar based on table cells ... */
/*
#navbar {
          width: 100%;
          text-align: center;
	  margin-top: 20px;
}

#navbar * { color: grey; }



#navbar .menu { display: table;
		width: 100%;
		margin-top: 5px;
		position: relative;
	      }
*/

  /* -- Navbar submenu as tab-style table row under menu (not nested) -- */

/*
#navbar .menu div {
    padding-left: 1em;
    padding-right: 1em;
    color: grey;
    margin-bottom: 0;
    display: none; 
    border: none;
    border-bottom: 1px solid lightgrey;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
}

#navbar .menu a { display: inline; border: none; }

#navbar .menu .sectiontab { border: 1px solid lightgrey;
    border-bottom: none; background: #fdfdfd; } #navbar .menu
    .sectiontab a:before { content: none; } #navbar .menu .nulltab {
    border: none; border-bottom: 1px solid lightgrey; background:
    #fdfdfd; width: 50px; } 
*/

/* -- Main menu -- */
/*
#navbar .menu:first-child div { 
    background: black;
    border-radius: 0;
    display: table-cell;
    text-align: center;
    border:none;
}
#navbar .menu:first-child a { color: white; }
#navbar .menu:first-child .sectiontab {
    background: blue;
}

#navbar .menu:first-child .nulltab    {
    border: none;
}
*/


#content { 
    /* border-top: 1px solid black;
     */
}
#postamble { border-top: 1px solid black;
	     border-bottom: 1px solid black;
	     background:  #fafafa;
	     position: relative;
	     /* top: -75px;
	     border: 0;	
            */
	   }

#postamble div { background:  #fafafa;
		 margin-bottom: 5px;
		 padding: 10px;
	       }


/* .search { margin: 0; padding: 0; }
.search * { margin: 0; padding: 0; } */
/* .search input { width: 120px; border-radius: 5px; margin-bottom: 0;} */
/* .search button { padding: 0; } */

/* Garnishings on the top of certain pages. */
#sectionlogo.blog { background: radial-gradient(25% 45%,
					   rgba(0,0,255,200),
					   rgba(0,0,255,0)); }
#sectionlogo * { color: grey; border: none;
		 text-align: center;
		 font-size: 1rem;
		 font-variant: small-caps;
		 margin-top: 10px; margin-bottom: 10px;
	       }


.comments .outline-text-3 { background:#e6eeee;
			    padding: 5px 10px 5px 10px;
			    position: relative;
			    border-radius: 20px;
			  }
.comments .outline-text-3:before { content: "";
				   position: absolute;
				   top: -5px;
				   right: 25%;
				   border-width: 0 20px 10px;
				   border-style: solid;
				   border-color: #e6eeee transparent;
				   display: block;
				   width: 0;
				   transform: rotate(65deg);
				 }
.comment-meta { font-style: italic; }
#blogprevnext { width: 100%; }
#blogprevnext * { font-size: 1rem; }

.outline-2 { clear: both; }
/* --- Here endeth the new experimental header --- */

#content { max-width: 500px; text-align: left; }
#postamble p { max-width: 100%; }
#postamble .author, #postamble .date { }

img { max-width: 100%; }

li {max-width: 480px; /* font-size: 1rem; */ }
li li {max-width: 460px; /* font-size: 1rem; */ }


a { text-decoration: none; }

a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { text-align: left;
			 font-family: "Gentium Plus";
			 color: darkblue;
		       }

h4, h5, h6 { font-style: italic; }

h2, h3, h4, h5, h6 { padding-top: 0.4em; }


h2 {  /* border-bottom: 1px solid grey; */
      font-size: 1.2rem;
   }

h3 { font-size: 1rem; }

.headinglist * { border-bottom: none; }

h1 a, h2 a { text-decoration: none; color: inherit; }
h1 a:visited, h2 a:visited { text-decoration: none; color: auto; }

/* External links (h/t https://davidwalsh.name/external-links-css)
   Possibly safer ways: http://stackoverflow.com/questions/18168286/how-can-i-style-external-links-like-wikipedia
 */

a[href*="//"]:not([href*="christianmoe.com"]):after {
    content: url("./Icon_External_Link.png");
}

.title { text-align: left;
         font-size: 2rem;
         font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */
	 color: darkblue; 
         text-shadow: 0px 0px 5px #00aaff;
	 margin-top: 50px;
	 margin-bottom: 30px;
	 position: relative;
	 clear: both;
       }
.subtitle { 
    font-size: 1.4rem;
    font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */
    color: darkblue;
    text-shadow: 0px 0px 5px #00aaff;
}
.menu * { font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */}

#table-of-contents { width: auto;
		     margin: 10px;
		     padding: 5px;
		   }
#table-of-contents * { border-bottom: none;
		       font-size: 1rem;
		       line-height: 1rem;
		      }

#tagline { border-top: 1px solid lightgrey;
	   margin: 30px 0 30px 0;
	   padding-top: 10px;
	 }
.tag, .tag * { font-size: 1rem;
     }
      
.tag a { 
	  margin-left: 5px;
	  }

.tag a:before { content: "#"; }


#taglookup { position: fixed;
	     height: 100%;
	     width: 360px;
	     top: 0px;
	     right: -360px;
	     padding: 10px;
	     background-color: #eeeeee;
	     border: 1px solid black;
	     box-shadow: 3px 3px 2px black;
	     animation: taglookupin 0.5s forwards;
	     animation-delay: 0s;
	     /* Make scrollable */
	     overflow: auto;
	     overflow-x: hidden;
	     overflow-y: auto;
	   }
@keyframes taglookupin {
    100% {  right: 0px;}
}

.sitemap a { text-decoration: none; }
.sitemap a::hover { text-decoration: underline; }
 
.handwritten p { font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */
		 font-size: 0.8rem;}

.org-src-container { background-color: black; width: 100%; }
.org-src-name { color: white;
		padding: 1px;
		margin-bottom: 0;
	      }
pre { font-family: monospace; font-size: 0.7rem; overflow: auto; }
pre * {font-family: monospace; font-size: 0.7rem; }
code { font-family: monospace; font-size: 0.7rem; }
pre, code, .src { background-color: #eeeeee; }

/* Borrowing this from the Org default CSS but without hovering and
without naming every possible language */
pre.src {
    position: relative;
    overflow: auto;
}
pre.src:before {
    /* display: none; */
    position: absolute;
    /* top: -8px; */
    right: 12px;
    padding: 3px;
    color: #555; 
    background-color: #f2f2f299;
  }
.src-elisp::before,
.src-emacs-lisp::before { content: "Elisp"; }

table * { font-size: 0.8rem; }
table.shaded tr:nth-child(even) { background-color: #e6eeee; }

.csl-entry { width: 90%; font-size: 0.9rem;
			   text-indent: -1.5em;
			   margin-left: 1.5em; }

.sidenote, .marginnote, #table-of-contents {
    /* line-height: 1.3; */
    font-size: small;
    max-width: 100%;
    color: #333333;
}
.marginnote a, #table-of-contents a {
    color: #333399;
}

figure { margin-left: auto; margin-right: auto; }

caption, caption * { margin-bottom: 0.3em; font-size: 0.8rem; }

.table-number  { font-weight: bold; font-variant: small-caps }
.figure-number { font-weight: bold; font-variant: small-caps }


/* Figure caption (in xhtml export) */
div.figure p + p { font-size: 0.8rem; }
/* Figure caption (html5) */
figcaption { font-size: 0.8rem; }

/* Figure in marginnote (xhtml) */
.marginnote .figure img { padding-left: auto;
			  padding-right: auto;
			  width: 90%;
			}

/* Figure in marginnote (html5) */
.marginnote figure img { padding-left: auto;
			  padding-right: auto;
			  width: 90%;
			}

.marginnote table * {font-size: 0.8rem; }

.marginnote ul, #table-of-contents ul { padding: 5px; }


blockquote, blockquote * { font-size: 0.9rem;
			   margin-right: 10px;
			 }

/* -- SPEECH BUBBLE -- */
/*    h/t: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 
      for teaching me the basics
*/

blockquote { width: 90%;
	     padding: 5px 10px 5px 10px;
	     margin-left: 10px;
	     background: #e6eeee;
	     position: relative;
	     border-radius: 20px;
	   }
blockquote:after { content: "";
                   position: absolute;
                   bottom: -15px;
		   left: 20px;
                   border-width: 15px 10px 0;
		   border-style: solid; 
		   border-color: #e6eeee transparent;
		   display: block;
		   width: 0;
		 }
blockquote + p { margin-left: 50px; font-size: 0.9rem; }
blockquote + p * { font-size: 1rem; }

.marginnote blockquote { font-size: 0.9rem; margin-left: 0px; }

.verse { margin-left: 1em; }

dl { width: 80%; margin-left: 2em; }
dt { font-style: italic; font-weight: bold; }
dl.compact dt { display: inline-block; margin-left: -2em;}
dl.compact dd { display: inline; margin-left: 0.5em; }
dl.compact dd:after { content: ''; display: block; }

.footpara { display: inline; }
.footnum:before { content: "["; }
.footnum:after  { content: "]"; }
.footref:before { content: "["; }
.footref:after  { content: "]"; }

.footdef { margin-bottom: 1em; }

.underline { text-decoration: underline; }

sup, sub {
    vertical-align: super;
    line-height: 0;
    position: relative;
    font-size: smaller;
}
sub { 
    vertical-align: sub; 
}

.timestamp { white-space: pre; } /* Don't break line */

a.lang.en:before { content: url("/img/en.png"); }
a.lang.nb:before { content: url("/img/nb.png"); }
a.lang.eo:before { content: url("/img/eo.png"); }
a.lang.sl:before { content: url("/img/sl.png"); }

div.edit {background: #e6f5ff;
	  margin: 10px; padding: 5px;
	  border-radius: 20px;
	 }
span.edit {background: #e6f5ff; }

.itemtitle { font-weight: bold; }
#postamble .itemtitle { font-weight: normal; }

#postamble * { font-size: 0.8rem;
	       line-height: 1.1;
	       text-align: right;  }
#postamble p { margin-top: 0.5rem; margin-bottom: 0;}
#postamble h2 { border: none;
		font-variant: small-caps;
		font-family: "Gentium Plus"; /* "ArchitectsDaughterRegular"; */
		width: 100%;
		border-bottom: 1px grey dashed;
	       margin-top: 0 }


/* -- Using direct links instead
#follow-mastodon:before { content: url("/img/mastodon-logo-purple.svg") " ";
			  width: 36px;}
#follow-rss:before { content: url("/img/rss.png") " "; }
*/
.follow  img { width: 18px; height: 19px; margin-left: 1em; vertical-align: baseline;}
.follow:after { content: ""; }
#follow-codeberg img { background-color: blue; }

div.highlight {
    border: 2px solid darkblue;
    padding: 5px;
    background-color: orange;
    box-shadow: 6px 6px 4px grey; }

.newthought { font-variant: small-caps; }

/* --- Desktop screens -- */

@media screen and (min-width: 1024px) {
    #page { 
	width: 1024px;
	position: relative;
	overflow: auto;
    }
    #sitebanner { 
	width: 800px; 
    }
    /* 
    #searchbox { position: absolute;
	     left: 400px;
	     width: 240px;
	     top: 0px;
	       } */
    #navbar { 
	padding-left: 300px; 
    }


    #sectionlogo img { 
	width: 60px;
	margin-left: 90px; 
    }
    
    #content { 
	width: 500px;
	margin-left: 0;
	padding-left: 5px;
	padding-right: 5px;
	display: block;
	float: left;
    }
    #postamble { 
	display: block;
	height: 100%;
	max-width: 180px;
	float: right;
	padding-right: 10px;
    }
    .outline-2 { 
	max-width: 500px; 
    }

    .sidenote, .marginnote, #sectionlogo, #table-of-contents, caption, div.figure p + p {
	position: absolute;
    	float: left;
    	width: 250px;
    	padding: 10px;
    	left: 520px;
    }

    div.marginnote, caption, div.figure p + p { 
	margin-top: -100px; 
    }

    /* Now we need to unset all this for captions in marginnotes */
    div.marginnote caption, div.marginnote div.figure p + p {
	position: unset;
	float: unset;
	width: unset;
	padding: unset;
	left: unset;
	margin-top: unset;
    }
    
    .full-width { 
	width: 790px;
	/* position: relative; */
	/* left: -285px; */
	
    }

    #bottomline { 
	width: 800px; 
    }

    /* Alternate arrangement:
       Main text in right column, marginnotes in the left */
    /*
    #content { margin-left: 290px; }
    .marginnote, #table-of-contents {
	float: right;
	left: 0;
    }
    .full-width { left: -285px; }
   */
    
}

/* --- Tablets down to 768 px --- */

@media screen and (max-width: 1023px) {
    #page { width: 100%;
	    min-width: 768px;
	    position: relative;
	    overflow: auto; }
    #sitebanner { width: 768px; }
    #sectionlogo img { width: 60px;
		       margin-left: 90px;
		     }
    /* #navbar { padding-left: 300px; } */
    #content { width: 480px;
	       margin-left: 0;
	     }
    #postamble { overflow: auto; }
    #postamble * { text-align: left; }
    #postamble div { float: left; width: 30%; }
    .sidenote, .marginnote, #sectionlogo, #table-of-contents {
	float: left;
    	width: 200px;
    	padding: 5px;
    	position: absolute;
    	left: 490px;
    }
    .marginnote { margin-top: -100px; }
    .full-width { width: 768px;
		 position: relative;
		 left: 0;
		}
}

/* --- Screens up to 768 px and below --- */

@media screen and (max-width: 768px) {
    #page { width: 100%; /* 500px; */
	    min-width: 500px;
	    position: relative;
	    overflow: auto;}
    #sitebanner { width: 95%; /* 490px; */
		}
    #sitelogo { display: none; }
    /* #searchbox { position: absolute;
	     left: 350px;
	     width: 180px;
	     top: 0px;
	       }
    */
    .searchfield { width: 30% /* 150px; */
		 }
    /* #langmenu { top: 30px; } */
    /* #navbar { padding-left: 50px; } */
    /* 
      #navbar th * { 
	padding-left: 0.5em;
	padding-right: 0.5em;
    } */
    #content { width: 95%; /* 490px; */
	       max-width: 480px;
	       padding-left: 5px;
	       padding-right: 5px;
	       border-top: none;
	     }
    #postamble { width: 95%; /* 500px; */
	       }
    #postamble div { float: left;
		     width: 40% /* 200px; */
		     margin-right: 20px;}
    .full-width { width: 100%; /* 500px; */
		  position: relative;
		  left: 0px;
	       }
    .sidenote, .marginnote, #sectionlogo, #table-of-contents {
	float: left;
    	width: 200px;
    	padding: 10px;
    	position: absolute;
    	left: 520px; 
    }
    
}
@media screen and (max-width: 700px) {
    #page { width: 100%; /* 500px; */
	    min-width: 500px;
	    position: relative;
	    overflow: auto;}
    #sitebanner { width: 95%; /* 490px; */
		  max-width: 500px;
		}
    #sitelogo { display: none; }
    /* #searchbox { position: absolute;
	     left: 350px;
	     width: 180px;
	     top: 0px;
	       }
    */
    .searchfield { width: 30% /* 150px; */
		 }
    /* #langmenu { top: 30px; } */
    /* #navbar { padding-left: 50px; } */
    /* 
      #navbar th * { 
	padding-left: 0.5em;
	padding-right: 0.5em;
    } */
    #content { width: 95%; /* 490px; */
	       padding-left: 5px;
	       padding-right: 5px;
	       border-top: none;
	     }
    #postamble { width: 95%;
		 max-width: 500px;/* 500px; */
	       }
    #postamble div { float: left;
		     width: 40% /* 200px; */
		     margin-right: 20px;}
    .full-width { width: 100%; /* 500px; */
		  position: relative;
		  left: 0px;
	       }
    .sidenote, .marginnote {
	position: static;
	margin-top: 0px;
	width: 40%; /* 200px; */
	/* padding: 10px;
	margin-right: 10px;
	border-right: 1px solid grey;
	background: #fafafe;
	float: right; */
	padding: 10px; padding-right: 0; 
	margin: 10px; margin-right: 0;
	/* border-left: 1px solid grey; */
	float: right;
	/*
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
       */
    }

    #sectionlogo {
	position: static;
	left: 0;
	width: 500px;
	padding: 5px;
	margin-top: 20px;
	margin-bottom: 20px;
    }
    #sectionlogo * {
		 font-size: 0.8rem;
		 margin-top: 5px; margin-bottom: 5px;
    }
    #sectionlogo img { width: 75px;
		       margin-left: 210px;}
    #table-of-contents {
	position: static;
	float: none;
    }
    
@media print {
    #sitebanner { width: 100%; }
    #content { width: 100%;
	     }
    .sidenote, .marginnote, #table-of-contents {
	position: static;
	float: right;
	width: 40%;
	border: 1px solid grey;

    }
}