/* css for hierarchical brain website */

body {
    background-image: url("brain-cell.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top; /* puts image at top right */
    background-attachment: fixed;   /* no scroll */
    font-family: "Times New Roman", Times, serif;
}

/* Header - in a separate file that is included as an SSI - Server Side Include */

div.header {
    width: 100%;
    margin: none;
    padding: none;
}

/* Images in header */
div.hright {
    margin: none;
    border: none;
    float: right;
}

div.hleft {
    margin: none;
    border: none;
    float: left;
}

div.head_centre {
    border: none;
    border-style: none;
/* These next two lines force centering */
    width: 40%;
    margin: 0 auto;
}

h1.header1 {         /* This is just for the header line in the header div to satisfy search engines that want an h1 tag */
    text-align: center;
    font-size: 3.0em;
    font-weight: bold;
    color: red;
    margin-top: -0.1em;
    padding-top: none;
    margin-bottom: -0.5em;
    text-shadow: 2px -2px black;   /* Doesn't work on IE 9 - was -2px 2px but now is the same as page_subject */
}

p.header1, p.header2, p.header3 {
    text-align: center;
}


p.header1 {
    font-size: 3.0em;
    font-weight: bold;
    color: red;
    margin-top: -0.1em;
    padding-top: none;
    margin-bottom: -0.5em;
    text-shadow: 2px -2px black;   /* Doesn't work on IE 9 - was -2px 2px but now is the same as page_subject */
}

p.header2 {
    font-size: 1.7em;
    font-weight: bold;
    color: black;
    margin-bottom: -0.2em;
}

p.header3 {
    font-size: 1.0em;
    font-weight: normal;
    color: black;
}

/* Main body of pages */

div.body {
    clear: both;
    width: 100%;
    border: none;
}

p.page_subject {
    font-size: 2.2em;    /* was 1.8 */
    text-align: left;
    color: red;
    font-weight: bold;
    text-shadow: 2px -2px black;
}

p.summary_paragraph {
    font-size: 1.2em;
    text-align: left;
    color: black;
    font-weight: normal;
}

p.subheading { 
    font-size: 1.4em;
    text-align: left;
    color: red;
    font-weight: bold;
    text-shadow: 1.5px -1.5px black;
}

p.sub1heading {               /* Used only in Afferent processing examples and Synapse */
    font-size: 1.2em;
    text-align: left;
    color: red;
    font-weight: bold;
    text-shadow: 1.2px -1.2px black;
}

p.leader {
    font-size: 1.1em;
    text-align: left;
    color: black;
    font-weight: normal;
}

span.note {
    font-size: 0.7em;
    text-align: left;
    color: black;
    font-weight: normal;
    font-style: italic;
    text-shadow: none;
}

ul.level1 {
    font-size: 1.1em;
    list-style-position: outside;
    padding: 0px;
    margin-left: 40px;
x    list-style-image: url(bullet2.gif);              /* This property is inherited, so applies to lower level uls, unless specifically overridden with a :none */ 
    list-style-type: circle;
}

li.level1 {
    margin-bottom: 20px;
}

ul.level2 {
    font-size: 1.0em;
    list-style-position: outside;
    padding: 0px;
    margin-left: 40px;
x    list-style-image: url(bullet2Z.gif);
    list-style-type: square;
}

li.level2 {
    margin-bottom: 10px;
}

ul.level3 {
    font-size: 1.0em;
    list-style-type: disc;
    list-style-position: outside;
    padding: 0px;
    margin-left: 40px;
    list-style-image: none;
}

li.level3 {
    margin-bottom: 0px;
}

ul.level4 {
    font-size: 1.0em;
    list-style-type: circle;
    list-style-position: outside;
    padding: 0px;
    margin-left: 40px;
    list-style-image: none;
}

li.level4 {
    margin-bottom: 0px;
}

ol.level1 {
    font-size: 1.1em;
    list-style-position: outside;
    padding: 0px;
    margin-left: 40px;
}

ol.level2 {
    font-size: 1.0em;
    list-style-position: outside;
    padding: 0px;
    margin-left: 40px;
}

/* For index */
ul.index {
    font-size: 1.1em;
    list-style-position: outside;
    padding: 0px;
    margin-left: 20px;
    list-style-type: circle;
}

li.index {
    margin-bottom: 0px;
}



img {
  width: auto;
  max-width: 40%;  /* Forces images to occupy less than half the screen width - but this makes important diagrams very small on narrow width screens */ 
  height: auto;
}

/* Images in header */
img.hright, img.hleft {
    margin: 10px;
    padding: 5px;
}

img.hleft {
    float: left;
}

img.hright {
    float: right;
}

/* Images in page body */
img.iright, img.ileft, img.icentre {
    margin: 10px;
    padding: 5px;
    border: 2px solid #ccc;
    background: rgba(221, 238, 232, 0.5);  /* This allows the background to be opaque, but not the text */ 
}

img.ileft {
    clear: left;  /* Don't overlap with an image above */
    float: left;
}

img.iright {
    clear: right;  /* Don't overlap with an image above */
    float: right;
}

img.icentre {
    display: block;
    margin: auto;
}

/* tables - currently in memory, consciousness (may not last) and main summary pages */
div.categories {
    border: none;
    border-style: none;
    overflow-x:auto;   /* This makes the table have a left/right scroll if it won't fit on the screen */
}
div.categories::after {
    content: "Scroll if necessary to see right-hand side of table \2192";    /* Puts a right-arrow on the end */
    font-size: 0.9em;
    font-style: italic;
}
table.categories, tr.categories, th.categories, td.categories {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 4px;
    text-align: left;
    font-size: 1.0em;
    white-space: nowrap;       /* This stops the text in tables wrapping, so scroll bar is needed */
}
th.categories {             /* For header line */
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

/* tables for contents at top of pages */
div.contents {
    border: none;
    border-style: none;
/* These next two lines force centering */
    width: 90%;
    margin: 0 auto;
}
table.contents, tr.contents, th.contents, td.contents {
    border: 3px solid gray;
    border-collapse: collapse;
    padding: 10px;
    padding-left: 50px;      /* These two indent any second and subsequent lines */ 
    text-indent: -40px;
    text-align: left;
    font-size: 1.05em;
    color: red;          /* Text colour, but links are different - see "a." formatting at bottom */
}
th.contents {               /* For header line */
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    text-shadow: 1.2px -1.2px black;
}


/* Quote at top of home, introduction and mind-boggling brain pages */
table.quote, tr.quote, th.quote, td.quote {
    margin-left: auto;            /* These two center the table */
    margin-right: auto;
    border: 4px solid red;
    padding: 5px;
    text-align: center;
    xtext-align: justify;
    font-size: 1.2em;
    xfont-family: arial;
}
span.quote {
    font-style: italic;
}
span.quoteb {
    font-style: italic;
    font-weight: bold;
    font-size: 1.3em;
}


/* Horizontal rules */
hr {
    border: 0;
    border-bottom: 3px dashed red;
    background: #DDEEE8;

/*    height: 4px;
    color: red;
    background: red;
    color: #ed1d61;
    background: #ed1d61;
    font-size: 0;
    border: 0;
    width: 100%; */
}

/* Pop-up box for Wikipedia links in main text - this is adapted from https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 */
  a.wikipedia{            /* Some touch screens and IE 8 will not see these */
  position:relative;
  display:inline-block;
}

a.wikipedia::after {
    content: "Wikipedia link";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last number is the opacity of the box when displayed - 1 means opaque */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 100px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up or down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-50%) translateY(0%);    /* This moves the box left - was -80% originally, but one or two links had the box going off the left-hand margin */ 
}

a.wikipedia:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}



/* References */
sup.reference {
    font-size: 0.8em;  /* Was 0.7, but the numbers then disappeared... */
    line-height: 0;   /* To avoid wider line-spacing */
}

a.reference {               /* This is so that commas between two references are not italic */
    font-style: italic;
    text-decoration: none;     /* Don't underline superscript reference numbers */ 
}

a.reference:hover {   /*  highlight the number when hovered over */
    background-color: yellow;
}

/* Reference section at bottom of page */
p.reference_header {
    font-size: 1.5em;
    text-align: left;
    color: black;
    font-weight: bold;
}
span.reference_info {
    font-size: 0.65em;
    font-style: italic;
    font-weight: normal;
}

ol.reference {
    font-size: 1.1em;
	    list-style-position: outside;
    background: rgba(221, 238, 232, 0.7);  /* This allows the background to be opaque, but not the text */ 
    padding: 5px;
    margin-left: 70px;
    margin-right: 50px;
    margin-bottom: 800px;    /* Included to enable clicks on reference links to go straight to link at top of page */
}

ol.reference::after {
    font-style: italic;
    font-family: arial;
    font-size: 0.8em;
    content: "The following space intentionally left blank...";          /* Blank lines are so that a reference appears at the top of the page */
}

li.reference {
    margin-bottom: 30px;
}

span.reference_note {
    Xfont-family: arial;
    color: rgba(50, 50, 50, 0.9);
}

span.reference_quote {
    font-style: italic;
}

a.back {    /* don't underline link from references back to text */
    text-decoration: none;
}

a.back:hover {   /* to highlight the up-arrow when hovered over */
  background-color: yellow;
}

p.footer {             /* Could be less space between lines */
    font-size: 1.0em;
    font-weight: normal;
    font-style: italic;
    color: black;
}

p.footer_links {
    font-size: 1.3em;
    text-align: left;
    color: red;
    font-style: italic;
    font-weight: bold;
}


/* For links */

/* unvisited link */
a:link {
    color: black;
}

/* visited link */
a:visited {
    color: purple;
}

/* mouse over link */
a:hover {
    color: blue;
}

/* selected link */
a:active {
    color: red;
}

/* Reference links that could have different behaviours */
a.reference_link {
}
a.reference_doi {
}
a.reference_download {
}
a.reference_cached {    /* not used */
}
a.reference_GoogleScholar {
}

/* Links in superscripted reference numbers - could have different colours here, or pop-ups */
a.reference {
}

/* External links in main text (not Wikipedia) - this is adapted from https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 - so that a box appears when you hover over the link */
a.external{
  position:relative;
  display:inline-block;
}
a.external::after {
    content: "External link";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-80%) translateY(0%);    /* This moves the box left */ 
}
a.external:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}

/* reference_download links - this is adapted from https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 - so that a box appears when you hover over the link */
a.reference_download {
  position:relative;
  display:inline-block;
}
a.reference_download::after {
    content: "Link to download pdf of paper (if it fails, try GoogleScholar)";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 180px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-80%) translateY(0%);    /* This moves the box left */ 
}
a.reference_download:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}

/* reference_GoogleScholar links - this is adapted from https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 - so that a box appears when you hover over the link */
a.reference_GoogleScholar {
  position:relative;
  display:inline-block;
}
a.reference_GoogleScholar::after {
    content: "List of versions of this paper in Google Scholar to find pdf link";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 200px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-80%) translateY(0%);    /* This moves the box left */ 
}
a.reference_GoogleScholar:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}

/* reference_link links - this is adapted from https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346 - so that a box appears when you hover over the link */
a.reference_link {
  position:relative;
  display:inline-block;
}
a.reference_link::after {
    content: "Link to paper at publisher";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 160px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-80%) translateY(0%);    /* This moves the box left */ 
}
a.reference_link:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}

/* So that a floating box appears when you hover over the doi references */
a.reference_doi{
  position:relative;
  display:inline-block;
}
a.reference_doi::after {
/* A <a href link in the content box doesn't create a clickable link - see test area code */
    content: "Digital Object Identifier (ISO unique locator)";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 150px;         /* So that text fits on one line */
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-70%) translateY(0%);    /* This moves the box left */ 
}
a.reference_doi:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}

/* So that a floating box appears when you hover over a book reference */
a.reference_book{
  position:relative;
  display:inline-block;
}
a.reference_book::after {
    content: "Book external link";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 110px;         /* So that text fits on one line */
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-70%) translateY(0%);    /* This moves the box left */ 
}
a.reference_book:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}

/* So that a floating box appears when you hover over a book Wikipedia reference */
a.wikipedia_book{
  position:relative;
  display:inline-block;
}
a.wikipedia_book::after {
    content: "Book Wikipedia link";    /* This is the text in the box */
    text-align: center;
    position: absolute;
    left:50%;                    /* This is the distance left of the link that the box is displayed */
    background: rgba(0,0,0,0.6);   /* The last "1" is the opacity of the box when displayed - it could be 0.7 */
    color: white;             /* The colour of the text - white in a black box */
    padding:4px 2px;
    font-size: 14px;          /* Font size of text in box */
    min-width: 120px;         /* So that text fits on one line */
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;       /* Box set to be invisible until hovered over */
    top:80%;         /* This seems to position the box up/down */
    margin-top:4px;  /* This is the distance below the link that the box is displayed */
    transform: translateX(-70%) translateY(0%);    /* This moves the box left */ 
}
a.wikipedia_book:hover::after {
   opacity:1;       /* This makes the box visible when hovering over the link */
}


/* Text at very bottom that says when page was last modified (i.e. loaded onto web server) using SSI include */
p.page_modified {
    font-size: 0.8em;
    text-align: left;
    color: black;
    font-style: italic;
}

span.highlight {  /* used to highlight subjects at starts of paragraphs */
    font-weight: bold;
}

span.emphasis {  /* used to highlight words in a paragraph */
    font-style: italic;
}