Omphaloskepsis/style.css

:root {
   --light: #FFFFF0;
   --dark: #020202;
}

html {
   font-size: 16px;
   color: black;
}
@media all and (max-width: 800px) {
	html {
	   font-size:14px;
	}
}
@media all and (max-width: 600px) {
	html {
		font-size:12px;
	}
}
@media all and (max-width: 400px) {
	html {
		font-size:10px;
	}
}

/** 1. Block Elements */

/* 1.1. Flexible Grid */

@supports not (display:grid) {
   * {
       box-sizing: border-box;
   }

   .row::after {
      content: "";
      clear: both;
      display: block;
   }

   [class*="col-"] {
      float: left;
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
      background-color: transparent;
   }

   @media only screen and (min-width: 768px) {
      .col-m-1 {width: 8.33%;}
      .col-m-2 {width: 16.66%;}
      .col-m-3 {width: 25%;}
      .col-m-4 {width: 33.33%;}
      .col-m-5 {width: 41.66%;}
      .col-m-6 {width: 50%;}
      .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
   }

   @media only screen and (min-width: 1024px) {
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
   }

   @media only screen and (min-width: 1444px) {
      .col-w-1 {width: 8.33%;}
      .col-w-2 {width: 16.66%;}
      .col-w-3 {width: 25%;}
      .col-w-4 {width: 33.33%;}
      .col-w-5 {width: 41.66%;}
      .col-w-6 {width: 50%;}
      .col-w-7 {width: 58.33%;}
      .col-w-8 {width: 66.66%;}
      .col-w-9 {width: 75%;}
      .col-w-10 {width: 83.33%;}
      .col-w-11 {width: 91.66%;}
      .col-w-12 {width: 100%;}
   }
}

@supports(display: grid) {
   body, header, nav, main, article, section, aside, footer, div {
      display: grid;
   }
   
   div#wpadminbar, div#wpadminbar div, div.nav-links {
      display: block;
   }
   
   #site-wrapper {
      grid-gap: 10px;
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr 2.5%;
      justify-items: center;
      align-items: center;
      min-height: 100vh;
      grid-template-areas:
         "header"
         "page-container"
         "footer";
   }
   @media only screen and (min-width: 1024px) {
      #site-wrapper {
         grid-template-columns: 2.5% 1fr 2.5%;
         grid-template-rows: auto 1fr 2.5%;
         min-height: calc(100vh - 4em);
         grid-template-areas:
            "header header header"
            ". page-container ."
            "footer footer footer";
	border: 2px solid black;
	margin: 2em;
      }
   }

   #site-header {
      grid-area: header;
      grid-gap: 0px;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas:
         "header-nav";
   }
   
   #site-header > nav {
      grid-area: header-nav;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 0.4fr 0.5fr auto;
      grid-template-areas:
         "header-top header-top header-top"
         "header-middle header-middle header-middle"
         "header-bottom header-bottom header-bottom"
         "header-left header-centre header-right";
   }
   
   #site-header > nav > div {
      padding: 5px;
   }
   #site-header > nav > div:nth-child(1) {
      grid-area: header-top;
   }
   #site-header > nav > div:nth-child(2) {
      grid-area: header-middle;
   }
   #site-header > nav > div:nth-child(3) {
      grid-area: header-bottom;
   }
   #site-header > nav > div:nth-child(4) {
      grid-area: header-left;
   }
   #site-header > nav > div:nth-child(5) {
      grid-area: header-centre;
   }
   #site-header > nav > div:nth-child(6) {
      grid-area: header-right;
   }

   body > main {
      grid-area: page-container;
   }
   
   #centred-page {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      justify-items: center;
      align-items: center;
   }
   
   #list-page {
      grid-gap: 10px;
      grid-template-columns: 1fr;
      grid-template-rows: 150px auto 60px;
      justify-items: center;
      align-items: center;
      grid-template-areas:
         "list-page-header"
         "list-page-grid"
         "list-page-footer";
   }
   #list-page > header {
      grid-area: list-page-header;
      text-align: center;
   }
   
   #list-page > header .nav-links {
      margin-top: 5px;
   }
   
   #list-page > header h2 {
      margin-top: 12px;
   }
   
   #list-page > section#grid {
      grid-gap: 10px;
      grid-area: list-page-grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, 1fr);
      justify-items: stretch;
      align-items: stretch;
      grid-template-areas:
         "li1"
         "li2"
         "li3"
         "li4"
         "li5"
         "li6"
         "li7"
         "li8";
   }
   @media only screen and (min-width: 620px) {
      #list-page > section#grid {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(4, 1fr);
         grid-template-areas:
            "li1 li2"
            "li3 li4"
            "li5 li6"
            "li7 li8";
      }
   }
   @media only screen and (min-width: 1024px) {
      #list-page > section#grid {
         grid-gap: 6px 5px;
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(2, 1fr);
         grid-template-areas:
            "li1 li2 li3 li4"
            "li5 li6 li7 li8";
      }
   }
   
   article.tile {
      min-height: 180px;
      grid-template-columns: 5% auto 5%;
      grid-template-rows: 2.5% auto 2.5%;
      grid-template-areas:
         ".       .      ."
         ". tile-details ."
         ".       .      .";
   }
   #list-page > section#grid article.tile:nth-child(1) { grid-area: li1; } 
   #list-page > section#grid article.tile:nth-child(2) { grid-area: li2; } 
   #list-page > section#grid article.tile:nth-child(3) { grid-area: li3; } 
   #list-page > section#grid article.tile:nth-child(4) { grid-area: li4; } 
   #list-page > section#grid article.tile:nth-child(5) { grid-area: li5; } 
   #list-page > section#grid article.tile:nth-child(6) { grid-area: li6; } 
   #list-page > section#grid article.tile:nth-child(7) { grid-area: li7; } 
   #list-page > section#grid article.tile:nth-child(8) { grid-area: li8; } 
   
   article.tile > header {
      grid-area: tile-details;
      grid-template-columns: 5px auto 5px;
      grid-template-rows: auto auto;
      grid-template-areas:
         ".  tile-title ."
         ". tile-subtitle .";
   }
   article.tile > header > h1 {
      grid-area: tile-title;
      align-self: end;
   }
   article.tile > header > h2 {
      grid-area: tile-subtitle;
      align-self: start;
   }
   #list-page > footer {
      grid-area: list-page-footer;
   }
   
   #split-page,
   #split-page > #wrapper {
      width: 100vw;
   }
   @media only screen and (min-width: 1024px) {
      #split-page,
      #split-page > #wrapper {
         width: 100%;
      }
   }
   
   #split-page {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      justify-items: center;
      align-items: center;
      grid-template-areas:
         "post"
         "comments";
   }
   
   #split-page > #wrapper {
      grid-area: post;
      grid-template-columns: 1fr;
      grid-template-rows: 70vh auto;
      justify-items: center;
      align-items: center;
      grid-template-areas:
         "post-content-header"
         "post-content";
   }
   @media only screen and (min-width: 1024px) {
      #split-page > #wrapper {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 70vh auto auto;
         justify-items: center;
         align-items: center;
         grid-template-areas:
            "post-content-header post-content"
            "     post-meta      post-content"
            "        .           post-content";
      }
   }
   
   #split-page > #wrapper > header {
      grid-area: post-content-header;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 70vh;
      height: 100%;
      width: 100vw;
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: 1fr auto 1fr;
      grid-template-areas:
         ". . ."
          ". post-header-details ."
          ". . .";
   }
   @media only screen and (min-width: 1024px) {
      #split-page > #wrapper > header {
         grid-area: post-content-header;
         min-height: 180px;
         height: 100%;
         width: 100%;
         grid-template-columns: 15% 1fr 15%;
         grid-template-rows: 20% 1fr 20%;
         grid-template-areas:
            ".           .         ."
            ". post-header-details ."
            ".           .         .";
      }
   }
   
   #split-page > #wrapper > header > div {
      grid-area: post-header-details;
      grid-template-columns: 1fr;
      padding: 20px;
      grid-template-rows: 1fr auto auto 1fr;
      justify-items: center;
      align-items: center;
      grid-template-areas:
         "."
         "post-title"
         "post-subtitle"
         ".";
   }
   #split-page > #wrapper > header > div > h1 {
      grid-area: post-title;
   }
   #split-page > #wrapper > header > div > h2 {
      grid-area: post-subtitle;
   }
   #split-page > #wrapper > header > div > h3 {
      grid-area: post-date;
   }
   
   #split-page #post-meta {
      grid-area: post-meta;
      width: 100%;
      text-align: left;
   }
   
   #split-page #post-meta > h1 {
      border-bottom: 2px inset var(--dark);
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      line-height: 1.2em;
      text-align: left;
   }
   
   #split-page #post-meta h2 {
      margin-top: 0.5em;
      font-size: 1.4em;
      margin-bottom: 0.5em;
      line-height: 1.2em;
      text-align: left;
   }
   
   #split-page #post-meta > #post-contents > ol > li {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
   }
   
   
   #split-page #post-meta > #post-tags > a {
      margin-top: 0.2em;
      margin-left: 1em;
   }
   
   #split-page > #wrapper > .body {
      grid-area: post-content;
      display: block;
   }
   
   #split-page > #wrapper > #organisation-body {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
      grid-template-areas:
         "description"
         "timeline"
         "related"
         "posts"
         "websites"
         "programs"
         "writings"
         "videos"
         "others"
         "quals-and-awards";
   }
   
   #organisation-body > #description {
      grid-area: description;
   }
   #organisation-body > #timeline {
      grid-area: timeline;
   }
   #organisation-body > #related {
      grid-area: related;
   }
   #organisation-body > #quals-and-awards {
      grid-ares: quals-and-awards;
   }
   #organisation-body > #related,
   #organisation-body > #quals-and-awards {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      text-align: left;
      grid-template-areas:
         "left right";
   }
   #organisation-body > #related > #children {
      grid-area: left;
   }
   #organisation-body > #related > #parents {
      grid-area: right;
   }
   #organisation-body > #post {
      grid-area: posts;
   }
   #organisation-body > #website {
      grid-area: websites;
   }
   #organisation-body > #program {
      grid-area: programs;
   }
   #organisation-body > #writing {
      grid-area: writings;
   }
   #organisation-body > #video {
      grid-area: videos;
   }
   #organisation-body > #other {
      grid-area: others;
   }
   #organisation-body > #qualifcations {
      grid-area: left;
   }
   #organisation-body > #awards {
      grid-area: right;
   }
   #organisation-body > .org-items {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
         "title"
         "items";
   }
   #organisation-body > .org-items h2.subheading {
      grid-area: title;
   }
   #organisation-body > .org-items .index {
      grid-gap: 6px 5px;
      grid-area: items;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr;
      justify-items: stretch;
      align-items: stretch;
      grid-template-areas:
         "item1 item2 item3 item4";
   }
   #organisation-body > .org-items .index .item:nth-child(1) {
      grid-area: item1;
   }
   #organisation-body > .org-items .index .item:nth-child(2) {
      grid-area: item2;
   }
   #organisation-body > .org-items .index .item:nth-child(3) {
      grid-area: item3;
   }
   #organisation-body > .org-items .index .item:nth-child(4) {
      grid-area: item4;
   }

	 #organisation-body div.org_items {
			align-items: self;
	 }
   
   #split-page > #comments {
      grid-area: comments;
      width: 100%;
   }
   
   #split-page > #comments > .row {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
         "comment-entry"
         "comments";
   }
   @media only screen and (min-width: 1024px) {
      #split-page > #comments > .row {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         grid-template-areas:
            "comments comment-entry";
      }
   }
   
   #split-page > #comments #comments-list {
      grid-area: comments;
      justify-items: center;
      align-items: start;
   }
   
   #split-page > #comments #comments-reply {
      grid-area: comment-entry;
      justify-items: center;
      align-items: start;
      text-align: center;
   }
   
   .comment-body {
	  grid-template-columns: 15% 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
         "comment-meta comment-content"
         ". comment-content"
         ". comment-reply";
   }
   
   .comment-body .comment-meta {
	  grid-area: comment-meta;
      justify-items: center;
      align-items: start;
	  text-align: center;
     font-weight: bold;
   }
   
   .comment-body .comment-meta .comment-author img {
      display: none;
   }
   
   .comment-body .comment-content {
	  grid-area: comment-content;
      justify-items: left;
      align-items: start;
	  padding: 0 2em 0 2em;
   }
   
   .comment-body .comment-content p {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      font-size: 1em;
   }
   
   .comment-body .comment-content p:first-of-type {
      padding-top: 0em;
   }
   
   .comment-body .comment-content p:last-of-type {
      padding-bottom: 0em;
   }
   
   .comment-body .comment-content .comment-source {
      font-size: 0.75em;
      opacity: 0.75;
   }
   
   .comment-body .reply {
	  grid-area: comment-reply;
      justify-items: right;
      align-items: start;
	  text-align: right;
	  padding-left: 0.4em;
   }
   
   body > footer {
      grid-area: footer;
      margin-top: 1em;
      margin-bottom: 1em;
   }
}

/* 1.2. Appearance */

@supports (color: var(--yin)) {
   body {
      color: var(--dark);
   }
   
   body,
   body > header {
      background-color: var(--light);
   }
   
   article.tile > header {
      background-color: var(--dark);
      opacity: 0.8;
   }
}

body:not(.page-template-centred-page) > main {
   margin-top: 3.8em;
}

body > header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   border-bottom: 2px solid var(--dark);
   z-index: 1;
}

body > header > h1 {
   padding: 20px 50%;
}

body > header > nav > a {
   padding: 20px 50%;
}

article.tile {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

article.tile > header {
   text-align: center;
}

article #details {
   width: 85%;
   margin: auto;
   display: block;
   background-color: #DDDDD0;
   border: 1px solid gray;
   padding-right: 1em;
   margin-bottom: 1.6em;
}

.sharedaddy, .jp-relatedposts {
   text-align: center;
}
.jp-relatedposts-items {
   display: block;
}

#split-page section div {
	margin: 0 1em;
}

#organisation-body {
	width: 100%;
}

/** 2.Inline Elements */

/* 1.1. Appearance */

body { 
   font-family: Palatino, serif; 
}

h1, h2, h3, h4, h5, h6, th {
   font-family: "Palatino Linotype", serif;
   margin: 0;
}

a:hover {
   opacity: 1;
}

ul {
   list-style: circle;
   color: var(--dark);
   padding-left: 1.8em;
}

ol {
   list-style: decimal;
   color: var(--dark);
   padding-left: 1.8em;
}

strong { font-weight: bold; }

sup, sub { 
   font-size:xx-small; 
   line-height: 1.2em; 
} 
sup { vertical-align:top; } 
sub { vertical-align:bottom; }

pre { 
   border: none !important; 
   border-left: 2px outset var(--dark) !important;
}

.latex {
   display: inline !important;
}

blockquote,
pre {
   padding-left: 1em;
   border-left: 2px outset var(--dark);
   display: inline-block;
   width: 85%;
}
pre {
   overflow: hidden;
}
@media only screen and (min-width: 1024px) {
   blockquote,
   pre {
      margin: 1em 2em 1em 2em;
   }
}
blockquote footer {
   text-align: right;
   margin-right: 10%;
   font-style: normal;
   display: block;
   float: right;
}
blockquote footer:before {
   content: '—';
}
q, blockquote {
   quotes: "‘" "’" "“" "”" ;
}
q.guillemets {
   quotes: "«" "»" "«" "»";
}
q:before, blockquote:not(.no-first-quote) p:first-of-type::before {
   content: open-quote;
}
q:after, blockquote:not(.no-last-quote) p:last-of-type::after {
   content: close-quote;
}

i, em {
   font-style: italic;
}

cite,
cite.book,
cite.film,
cite.tv-show,
cite.book,
cite.album, 
cite.report { 
   font-style: italic; 
}

cite.legislation,
cite.smallcite,
cite.article,
cite.episode,
cite.video,
cite.chapter,
cite.song,
cite.speech,
cite.presentation {
   font-style: normal;
}
cite.smallcite:before,
cite.article:before,
cite.episode:before,
cite.video:before,
cite.chapter:before,
cite.song:before,
cite.speech:before,
cite.presentation:before {
   content: '“'; 
}
cite.smallcite:after,
cite.article:after,
cite.episode:after,
cite.video:after,
cite.chapter:after,
cite.song:after,
cite.speech:after,
cite.presentation:after { 
   content: '”'; 
}

code, 
samp, 
var,
pre {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 0.8em;
}

pre .nocode {
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-size: 1em;
   padding: 1px 3px;
   border-radius: 6px;
   border: dashed 1px black;
}
code,
samp,
var {
    background-color: #d1d1d1;
    border-radius: 5px;
    padding: 2px 2px;
}

pre {
    max-width: 50vw;
    overflow: scroll;
}

h1 code, .post-title code, pre code,
h1 samp, .post-title samp, pre samp,
h1 var, .post-title var, pre var {
   background-color: transparent;
   padding: 0;
}

.heading code,
.subheading code {
    background-color: transparent;
}

pre.prettyprint ol {
    padding-left: 3.5em;
}

pre.prettyprint li {
    background: none !important;
}

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
samp {
    display: block;
    width: 80ch;
    margin: 1em 4em 1em 4em;
    border-left: 2px solid #ccc;
    color: #333;
}
kbd {
   padding: 0.1em 0.6em;
   border: 1px solid #ccc;
   font-size: 11px;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f7f7f7;
   color: #333; 
   box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px white inset;
   border-radius: 3px;
   display: inline-block;
   margin: 0 0.1em;
   text-shadow: 0 1px 0 white;
   line-height: 1.4;
   white-space: nowrap;
}

.pre-nominals,
.post-nominals {
   font-size: 0.6em;
   font-variant: small-caps;
}

.article__text--commentary {
   display: inline;
}

#toggleCommentary {
   text-decoration: underline;
}

#comments-list-title {

}

@supports (color: var(--light)) {
   h1, h2, h3, h4, h5, h6 {
      color: var(--dark);
   }
   
   a { color: var(--dark); }
   
   ul { color: var(--dark); }
   
   .nav-links>.page-numbers {
      background-color: var(--dark);
      color: var(--light);
   }
   .nav-links>.current {
      background-color: var(--light);
      color: var(--dark);
   }
   
   article.tile > header > h1,
   article.tile > header > h2 {
      color: var(--light);
   }
   
   main#split-page > #wrapper > header > div {
      background-color: var(--dark);
   }
   main#split-page > #wrapper > header > div > h1,
   main#split-page > #wrapper > header > div > h2,
   main#split-page > #wrapper > header > div > h3 {
      color: var(--light);
   }
}

h1 {
   font-size: 5em;
}

body > header h1 {
   font-size: 1.4em;
}
@media only screen and (min-width: 1024px) {
   body > header h1 {
      font-size: 2em;
   }
}

#split-page > #wrapper > header {
   text-align: center;
}
#split-page > #wrapper > header > div {
   opacity: 0.8;
}

#split-page > #wrapper > header > div > h1 {
   font-weight: bold;
   /*margin-top: 20%;*/
   font-size: 2.5em;
}
#split-page > #wrapper > header > div > h2 {
   margin-top: 10px;
   font-size: 1.6em;
}
#split-page > #wrapper > header > div > h3 {
   margin-top: 20%;
   font-size: 1em;
}
#split-page > #wrapper > footer > h1 {
   font-size: 2em;
}

@media only screen and (min-width: 1024px) {
   #split-page > #wrapper > header > div > h1 {
      font-size: 3.5em;
   }
   #split-page > #wrapper > header > div > h2 {
      font-size: 2.6em;
   }
}

#timeline h1.timeline-entry-title {
  font-size: 1.2em;
}

#comments-list-title, #comments-reply-title {
   font-size: 1.6em;
   margin-bottom: 0.5em;
}

.logged-in-as, .comment-form-comment, .form-submit {
   margin-bottom: 0.5em;
}

.comment-form-comment label {
	display: none;
}

.comment-form-comment textarea,
.form-submit input#submit {
	border: 2px solid black;
	background-color: #fffff0;
}

.form-submit input#submit {
	padding: 0.6em 1em;
	cursor: pointer;
	box-shadow: 3px 3px black;
}

.form-submit input#submit:hover {
	box-shadow: none;
	margin-left: 3px;
}

.akismet_comment_form_privacy_notice {
	font-size: 0.6em;
}
   
.comment-list {
	margin: auto;
	list-style: none;
}

.comment .children {
   list-style: none;
}

.comment .children .comment .comment-body {
   border-left: 2px solid black;
   padding-left: 1em;
}

.comment-body {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding-top: 1em;
}

.comment-body:first-of-type {
   border-top: 0px;
}

.comment-body:last-of-type {
   border-bottom: 0px;
}

.comment-body .comment-meta img {
	border-radius: 50%;
	width: 100%;
	height: auto;
}

.comment-body .comment-meta .says {
	display: none;
}

.comment-body .comment-meta .comment-metadata > a {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	font-size: 0.6em;
}

.comment-body .comment-meta .comment-metadata .edit-link {
	font-size: 0.8em;
	margin-top: 0.4em;
}
.comment-body .comment-meta .comment-metadata .edit-link::before {
	content: '( ';
}
.comment-body .comment-meta .comment-metadata .edit-link::after {
	content: ' )';
}

main#split-page > #wrapper > .body {
   text-align: left;
   padding: 0 2em 2em 2em;
}
main#split-page > #wrapper > .body blockquote:first-of-type:not(.no-first-blockquote) {
   font-size: 1.2em;
   text-align: center;
   margin: 0;
   border-left: 0;
   padding-left: 0;
   width: 100%;
   padding-top: 1em;
   padding-bottom: 1.2em;
   border-top: 2px outset var(--dark);
   border-bottom: 2px inset var(--dark);
}
main#split-page > #wrapper > .body p,
main#split-page > #wrapper > .body ul li,
main#split-page > #wrapper > .body ol li {
   font-size: 1em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.3em;
}
main#split-page > #wrapper > .body h2.subheading {
   font-size: 1.6em;
   border-bottom: 2px inset var(--dark);
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.2em;
   text-align: center;
}
main#split-page > #wrapper > .body h3.subsubheading {
   font-size: 1em;
   border-bottom: 1px dashed var(--dark);
   margin-top: 1em;
   margin-bottom: 1em;
   padding-bottom: 0.5em;
   line-height: 1em;
   text-align: left;
   font-weight: bold;
}
main#split-page > #wrapper > #organisation-body h2.subheading a {
   font-size: 0.5em;
}

article.tile > header > h1 {
   font-size: 1.4em;
}
article.tile > header > h2 {
   font-size: 0.8em;
}

a[href*="//"]:not([href*="bengoldsworthy.net"]):after {
  content: url('https://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png');
  margin: 0 0 0 4px;
  filter: invert(0%) sepia(0%) saturate(15%) hue-rotate(246deg) brightness(104%) contrast(98%);
}

a[href*="//"].item:not([href*="bengoldsworthy.net"]):after {
	position: relative;
	top: -1em;
	float: right;
}

a[href="#"],
a[href=""] {
  color: red;
}


a {
   opacity: 0.8;
   text-decoration: underline !important;
}
.footnote_plugin_index a {
   text-decoration: none !important;
}
a:hover, a:focus {
   opacity: 1;
   text-decoration: none;
}

.nav-links>.next,
.nav-links>.prev {
   display: none;
}
.nav-links>.page-numbers {
   text-align: center;
   border-radius: 0.8em;
   width: 1.6em;
   display: inline-block;
   line-height: 1.6em;
   text-decoration: none;
   font-weight: normal;
   margin-left: 0.5em;
   margin-right: 0.5em;
}

/* TEMP */


#experience-wrapper {
   grid-area: page-container;
   width: 100%;
}

.entry-content.tile#settings {
	width: 70%; 
	margin: auto; 
	margin-top: 1em; 
	border: 2px dashed #020202; 
	padding: 1em; 
	border-radius: 25px;
	margin-bottom: 1em;
}

#organisations-grid {
   border-spacing: 1em;
   margin-bottom: 1em;
   border-radius: 10px;
}

#organisations-grid th {
   font-weight: bold;
   text-align: left;
   padding: 1em;
   font-size: 1.4em;
}

#organisations-grid tr:first-of-type {
   background-color: #808080;
   color: #FFFFF0;
   z-index: 1;
   position: sticky;
   vertical-align: middle;
   top: 99px;
   max-height: 1.8em;
}
#organisations-grid tr:nth-child(even) {
   background-color: #DDDDD0;
}
   
.organisation td {
   padding: 1em;
   vertical-align: middle;
}

.organisation a {
   display: block;
}

.organisation-logo {
   width: 160px;
}

.organisation-logo img {
   height: 60px;
   width: auto;
   max-width: 150px;
   display: block;
   object-fit: contain;
   margin: auto
}

.organisation-children {
   width: 5%
}

.organisation-items:not(.organisation-children) .organisation-item {
   width: 10%;
   float: left;
}

.organisation-items .organisation-item {
   text-align: center;
}

.organisation-items .organisation-item span {
   margin: auto;
}

.organisation-items .organisation-item.none {
   opacity: 0.4;
}

.company-info-container {
	background-color: #ffffff;
	max-width: 60px;
	overflow: hidden;
	border-bottom: 1px solid #000000;
}

.company-info-container.left {
	border-radius: 0px 0px 15px 0px;
	float: left;
	border-right: 1px solid #000000;
}

.company-info-container.right {
	border-radius: 0px 0px 0px 15px;
	float: right;
	border-left: 1px solid #000000;
}

#timeline {
   display: block;
   margin: auto;
   min-height: 95px;
   max-width: 950%;
}

.loading {
   margin: auto;
   display: block;
   margin-top: 84px;
   height: auto;
}

#companies-grid-small {
   height: 0;
}

#companies-grid:hover li:hover,
#companies-grid-small:hover li:hover {
   opacity: 1;
}

#companies-grid li,
#companies-grid-small li {
   display: block;
   float: left;
   width: 18%;
   height: 10vh;
   overflow: hidden;
   background-color: #ffffff;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   background-origin: content-box;
   background-clip:content-box;
   padding: 7.5px;
}

#companies-grid li {
   min-height: 25vh;
}

#companies-grid-small li {
   min-height: 140px;
}

.company-name {
   font-size: 1.5em;
   margin-top: 25%;
}

.company-info-container.right .company-info {
	padding-left: 4px;
	font-size: 1em;
	line-height: 1.3em;
	color: #000000;
	opacity: 0.8;
	padding: 2px;
	width: auto;
}

.children {
   background-size: cover;
}


.taxonomy-background {
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 10vh 20vw;
}

#split-page > #wrapper > .body {
  grid-area: post-content;
  display: block;
  align-self: start;
}

#split-page > #wrapper > .body > figure {
    max-width: none !important;
    width: 100% !important;
    text-align: center;
}

#split-page > #wrapper > .body > figure > figcaption {
    font-size: 0.8em;
    font-style: italic;
}

#split-page > #wrapper > .body img,
#split-page > #wrapper > .body > figure img {
    max-height: 40vh;
    width: auto;
    max-width: 100%;
}

#split-page > #wrapper > .body img {
    margin: auto;
    display: block;
}

.latex {
   vertical-align: middle;
}

span.nobr {
white-space: nowrap;
}

.footnote_tooltip {
	z-index: 1;
}

.footnote-reference-container {
	border-collapse: separate;
	border-spacing: 0 10px;
}

table:not(.footnote-reference-container) th {
   font-weight: bold;
}

table:not(.footnote-reference-container) th,
table:not(.footnote-reference-container) td {
   border: 1px solid var(--dark);
   padding: 0.5em 1em;
   text-align: left;
}

details {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  margin-bottom: 0.5em;
}

details[open] {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
details p:first-child {
  padding-top: 1em;
}

details p {
	line-height: 1em;
}

summary {
	font-size: 1.1em;
	font-weight: bold;
}