/*************************************************************************************************/ 
/* Overall style                                                                                 */
/*************************************************************************************************/ 

@viewport {
  zoom:                 1.0;
  width:                device-width;
} 

@-ms-viewport {
  zoom:                 1.0;
  width:                device-width;
} 

HTML {
  margin:               0px;
  padding:              0px;
  height:               100%;
  font-size:            62.5%;  /* Set to 62.5% so all REM measurements are based on 10px sizing */
  box-sizing:           border-box;
  /* Standard colour scheme: */
  --color-border:       #eceff4;
  --color-background:   #fefefe;
  --color-text-main:    #3B4252;
  --color-text-high:    #5e81ac;
  --color-smallprint:   #bfbfbf;
  --color-poster:       #BF616A;
  --color-conference:   #D08770;
  --color-journal:      #EBCB8B;
  --color-bookchapter:  #B48EAD;
  --color-thesis:       #A3BE8C;
  --color-techrep:      #8FBCBB;
  --color-intdraft:     #81A1C1;
  --color-rfc:          #5E81AC;
  --color-shadow:       #222222;
  --color-photos:       #77aabb;
}

@media (prefers-color-scheme: dark) {
  /* Dark colour scheme: */
  HTML {
    --color-border:     #2E3440;
    --color-background: #3B4252;
    --color-text-main:  #D8DEE9;
    --color-text-high:  #bfbfbf;
    --color-smallprint: #8c9796;
    --color-poster:     #BF616A;
    --color-conference: #D08770;
    --color-journal:    #EBCB8B;
    --color-bookchapter:#B48EAD;
    --color-thesis:     #A3BE8C;
    --color-techrep:    #8FBCBB;
    --color-intdraft:   #81A1C1;
    --color-rfc:        #5E81AC;
    --color-shadow:     #222222;
    --color-photos:     #77aabb;
  }
}


*, *:before, *:after {
  box-sizing:           inherit;
}

BODY {
  min-height:           100%;
  background-color:     var(--color-border);
  color:                var(--color-text-main);
  padding:              0;
  margin:               0;
  font-family:          Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight:          normal;
  font-size:            1.4rem;
  line-height:          2.0rem;
  text-align:           justify;
  hyphens:              none;   /* Use "auto" to enable; "none" to disable */
  -webkit-hyphens:      none;
  -moz-hyphens:         none;
  border:               1px solid var(--color-border);  /* To prevent margin collapse */
}

/*************************************************************************************************/ 
/* Standard page: Wrapper                                                                        */
/*************************************************************************************************/ 

DIV.wrapper {
  background-color:     var(--color-background);
  min-height:           100%;
  max-width:            80rem;
  padding:              0;
  border:               1px solid var(--color-background);  /* To prevent margin collapse */
  border-radius:        0.25rem;
  margin-left:          auto;
  margin-right:         auto;
  margin-top:           1rem;
  margin-bottom:        1rem;
}

/*************************************************************************************************/ 
/* Standard page: Header                                                                         */
/*************************************************************************************************/ 

HEADER {
  margin-left:          1rem;
  margin-right:         1rem;
  margin-top:           0rem;
  margin-bottom:        0rem;
  padding-top:          4rem;
  padding-bottom:       4rem;
}

HEADER IMG {
  width:                30rem;
  display:              inline-block;
  vertical-align:       middle;
}

HEADER H1 {
  margin-left:          0rem;
  margin-right:         0rem;
  margin-top:           0rem;
  margin-bottom:        0rem;
  padding-left:         1rem;
  padding-right:        0rem;
  padding-top:          0rem;
  padding-bottom:       0rem;
  font-size:            2.0rem;
  line-height:          2.5rem;
  font-weight:          normal;
  color:                var(--color-text-high);
  display:              inline-block;
}

HEADER A:link      {color: var(--color-text-high); text-decoration: none}
HEADER A:hover     {color: var(--color-text-high); text-decoration: none}
HEADER A:visited   {color: var(--color-text-high); text-decoration: none}

HEADER P.site {
  padding:	            0px;
  margin:               0px;
  color:                var(--color-text-high);
  font-size:            2.5rem;
  font-weight:          lighter;
  text-align:           left;
}

HEADER P.site A:link      {color: var(--color-text-high); text-decoration: none}
HEADER P.site A:hover     {color: var(--color-text-high); text-decoration: none}
HEADER P.site A:visited   {color: var(--color-text-high); text-decoration: none}


/*************************************************************************************************/ 
/* Standard page: Menu                                                                           */
/*************************************************************************************************/ 

@media only screen and (min-width: 481px) { /* Normal layout */
  NAV {
    width:              12rem;
    float:              left;
    margin:             0 1rem;
    padding:            0;
    border-right:       thin solid var(--color-border);
  }

  NAV UL {
    color:              var(--color-text-high);
    font-size:          1.2rem;
    text-align:         center;
    margin:             0rem;
    padding:            0rem;
  }

  NAV LI {
    display:            block;
    margin:             0rem;
    padding:            0rem;
  }
}

@media only screen and (max-width: 480px) { /* Mobile layout */
  NAV {
    float:              none;
    margin:             0;
    padding:            0;
  }

  NAV UL {
    color:              var(--color-text-high);
    text-align:         left;
    font-size:          1.0rem;
    margin-left:        1.0rem;
    margin-right:       1.0rem;
    margin-top:         0.0rem;
    margin-bottom:      2.0rem;
    padding-left:       0.0rem;
    padding-right:      0.0rem;
    padding-top:        0.2rem;
    padding-bottom:     0.2rem;
    border-top:         1px solid var(--color-border);
    border-bottom:      1px solid var(--color-border);
  }

  NAV LI {
    display:            inline;
    margin-left:        0.0rem;
    margin-right:       0.5rem;
    margin-top:         0.0rem;
    margin-bottom:      0.0rem;
    padding-left:       0.0rem;
    padding-right:      0.0rem;
    padding-top:        0.0rem;
    padding-bottom:     0.0rem;
  }
}

NAV A:link      {color: var(--color-text-high); text-decoration: none}
NAV A:hover     {color: var(--color-text-high); text-decoration: none}
NAV A:visited   {color: var(--color-text-high); text-decoration: none}

/*************************************************************************************************/ 
/* Standard page: Main                                                                           */
/*************************************************************************************************/ 

@media only screen and (min-width: 481px) { /* Normal layout */
  MAIN {
    min-width:          33rem;
    margin-left:        12rem;
    margin-right:       3rem;
    margin-top:         0;
    margin-bottom:      0;
    padding:            0;
  }
}

@media only screen and (max-width: 480px) { /* Mobile layout */
  MAIN {
    margin-left:        1rem;
    margin-right:       2rem;
    margin-top:         0;
    margin-bottom:      0;
    padding:            0;
  }
}

MAIN P {
  padding-left:         0rem;
  padding-right:        0rem;
  padding-top:          0rem;
  padding-bottom:       1rem;
  margin:               0rem;
}

MAIN A:link      {color: var(--color-text-high); text-decoration: none}
MAIN A:hover     {color: var(--color-text-high); text-decoration: underline}
MAIN A:visited   {color: var(--color-text-high); text-decoration: none}

MAIN UL {
  padding-left:         2rem;
  margin-top:           0rem;
  padding-top:          0rem;
}


MAIN H1 {
  text-align:           left;
  hyphens:              none;   /* Use "auto" to enable; "none" to disable */
  -webkit-hyphens:      none;
  -moz-hyphens:         none;
  margin-left:          0;
  margin-right:         0;
  margin-top:           0;
  margin-bottom:        2.2rem;
  line-height:          2.8rem;
  font-size:            2.2rem;
  font-weight:          normal;
  color:                var(--color-text-main);
}

MAIN H2 {
  text-align:           left;
  hyphens:              none;   /* Use "auto" to enable; "none" to disable */
  -webkit-hyphens:      none;
  -moz-hyphens:         none;
  margin-left:          0;
  margin-right:         0;
  margin-top:           0; /* Assume first header on page is <h2>, so want flush top */
  margin-bottom:        2.0rem;
  line-height:          2.6rem;
  font-size:            2.0rem;
  font-weight:          normal;
  color:                var(--color-text-main);
}

MAIN H3 {
  text-align:           left;
  hyphens:              none;   /* Use "auto" to enable; "none" to disable */
  -webkit-hyphens:      none;
  -moz-hyphens:         none;
  margin-left:          0;
  margin-right:         0;
  margin-top:           1.7rem;
  margin-bottom:        1.7rem;
  line-height:          2.3rem;
  font-size:            1.7rem;
  font-weight:          normal;
  color:                var(--color-text-main);
}

MAIN H4 {
  text-align:           left;
  hyphens:              none;   /* Use "auto" to enable; "none" to disable */
  -webkit-hyphens:      none;
  -moz-hyphens:         none;
  margin-left:          0;
  margin-right:         0;
  margin-top:           1.5rem;
  margin-bottom:        1.5rem;
  font-size:            1.5rem;
  font-weight:          normal;
  color:                var(--color-text-main);
}
 
MAIN HR {
  color:                var(--color-border);
  margin-top:           2rem;
  margin-bottom:        2rem;
  background-color:     var(--color-background);
  width:                80%;
  height:               1px;
  border:               none;
}

MAIN IMG {
  max-width:            100%;
  margin:               0;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
}

MAIN IMG.block-shadow {
  max-width:            100%;
  margin-left:          2rem;
  margin-right:         2rem;
  margin-top:           1rem;
  margin-bottom:        1rem;
  padding:              0;
  border:               0;
  box-shadow:           3px 3px 8px var(--color-shadow);
  border-radius:        0.25rem;
}

MAIN IMG.inline-100 { /* In-line image, full width */
  vertical-align:       middle;
  margin-top:           1rem;
  margin-bottom:        1rem;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
  box-shadow:           3px 3px 8px var(--color-shadow);
  width:                80%;
  margin-left:          10%;
  margin-right:         10%;
}

MAIN IMG.inline-50 { /* In-line image, one-third page width on standard, full width on mobile */
  vertical-align:       middle;
  margin-top:           1rem;
  margin-bottom:        1rem;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
  box-shadow:           3px 3px 8px var(--color-shadow);
}

@media only screen and (min-width: 481px) { /* Normal layout */
  MAIN IMG.inline-50 {
    width:                45%;
    margin-left:          2%;
    margin-right:         2%;
  }
}

@media only screen and (max-width: 480px) { /* Mobile layout */
  MAIN IMG.inline-50 {
    width:                80%;
    margin-left:          10%;
    margin-right:         10%;
  }
}

MAIN IMG.inline-33 { /* In-line image, one-third page width on standard, full width on mobile */
  vertical-align:       middle;
  margin-top:           1rem;
  margin-bottom:        1rem;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
  box-shadow:           3px 3px 8px var(--color-shadow);
}

@media only screen and (min-width: 481px) { /* Normal layout */
  MAIN IMG.inline-33 {
    width:                30%;
    margin-left:          1.0%;
    margin-right:         1.0%;
  }
}

@media only screen and (max-width: 480px) { /* Mobile layout */
  MAIN IMG.inline-33 {
    width:                80%;
    margin-left:          10%;
    margin-right:         10%;
  }
}

MAIN img.thumb-33 { /* Right-align image, one-third page width */
  vertical-align:       middle;
  margin-top:           0rem;
  margin-bottom:        1rem;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
  box-shadow:           3px 3px 8px var(--color-shadow);
  float:                right;
  width:                30%;
  margin-left:          calc(1.0% +  3px);
  margin-right:         calc(1.0% + 17px);
}


MAIN IMG.right-33 { /* Right-align image, one-third page width on standard, full width on mobile */
  vertical-align:       middle;
  margin-top:           0rem;
  margin-bottom:        1rem;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
  box-shadow:           3px 3px 8px var(--color-shadow);
}

@media only screen and (min-width: 481px) { /* Normal layout */
  MAIN IMG.right-33 {
    float:                right;
    width:                30%;
    margin-left:          calc(1.0% +  3px);
    margin-right:         calc(1.0% + 17px);
  }
}

@media only screen and (max-width: 480px) { /* Mobile layout */
  MAIN IMG.right-33 {
    width:                80%;
    margin-left:          10%;
    margin-right:         10%;
  }
}


MAIN IMG.float-right-no-shadow {
  float:                right;
  margin-left:          2rem;
  margin-right:         0rem;
  margin-top:           0rem;
  margin-bottom:        1rem;
  border-radius:        0.25rem;
}

MAIN IMG.float-right {
  float:                right;
  margin-left:          2rem;
  margin-right:         0rem;
  margin-top:           0rem;
  margin-bottom:        1rem;
  box-shadow:           3px 3px 8px var(--color-shadow);
  border-radius:        0.25rem;
}

MAIN IMG.photo {
  margin:               0;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
}

MAIN IMG.presentationThumb {
  box-shadow:           3px 3px 8px var(--color-shadow);
  margin:               0;
  padding:              0;
  border:               0;
  border-radius:        0.25rem;
}

MAIN IMG.orcidLogo {
  vertical-align:       middle;
}

MAIN SPAN.orcidText {
  font-size:            0.9rem;
  vertical-align:       middle;
}

MAIN UL.id-list {
  padding-left:         0rem;
}

MAIN LI.id-list {
  display:              block;
}

MAIN LI.id-list LI {
  list-style-type:      disc;
}

MAIN UL.diff {
  background-color:     var(--color-background);
}

MAIN LI.diff {
  display:              block;
  background-color:     var(--color-background);
  padding-left:         0rem;
  padding-right:        3rem;
  padding-top:          0rem;
  padding-bottom:       0rem;
  margin-left:          0rem;
  margin-right:         0rem;
  margin-top:           0rem;
  margin-bottom:        0.8rem;
  text-align:           left;
  font-size:            0.8rem;
  line-height:          1.2rem;
  border-top:           none;
}

MAIN UL.changes {
  background-color:     var(--color-background);
}

MAIN LI.changes {
  display:              block;
  padding-left:         0rem;
  padding-right:        3rem;
  padding-top:          0.5rem;
  padding-bottom:       0.5rem;
  margin:               0rem;
}

MAIN TABLE {
  padding-bottom:       1rem;
}

MAIN TD {
  vertical-align:       top;
  padding-left:         0rem;
  padding-right:        1rem;
  padding-top:          0rem;
  padding-bottom:       0rem;
}

MAIN PRE {
  font-family:          "Courier New", Courier, monospace;
  font-size:            1rem;
}

MAIN PRE.ascii-art {
  font-family:          "Courier New", Courier, monospace;
  font-size:            1rem;
  line-height:          1rem;
}




/*
 * This is used in both main and footer
 */

P.smallprint {
  text-align:           left;
  color:                var(--color-smallprint);
  font-size:            0.8rem;
  line-height:          1.0rem;
}

P.smallprint A:link      {color: var(--color-smallprint); text-decoration: none}
P.smallprint A:hover     {color: var(--color-smallprint); text-decoration: none}
P.smallprint A:visited   {color: var(--color-smallprint); text-decoration: none}

/*************************************************************************************************/ 
/* Standard page: Footer                                                                         */
/*************************************************************************************************/ 

FOOTER {
  bottom:               0;
  clear:                both;
  margin:               0rem;
  padding-left:         0.0rem;
  padding-right:        0.0rem;
  padding-top:          2.0rem;
  padding-bottom:       2.0rem;
}

@media only screen and (min-width: 481px) { /* Normal layout */
  FOOTER {
    margin-left:        12rem;
    margin-right:       3rem;
    min-width:          33rem;
    max-width:          60rem;
  }
}

@media only screen and (max-width: 480px) { /* Mobile layout */
  FOOTER {
    margin-left:        1rem;
    margin-right:       1rem;
    min-width:          auto;
    max-width:          auto;
  }
}

FOOTER P.copyright {
  border-top:           1px solid var(--color-border);
  padding-top:          1.0rem;
  text-align:           left;
  color:                var(--color-smallprint);
  font-size:            1.0rem;
  line-height:          1.0rem;
}

/*************************************************************************************************/ 
/* vim: set ts=2 sw=2 tw=0 et ai: */