/*Typeface info*/

  @font-face {
    font-family: Excelsior;
    src: url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd.eot'); /* IE9 Compat Modes */
    src: url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd.woff2') format('woff2'), /* Super Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

  @font-face {
    font-family: ExcelsiorBold;
    src: url('https://baldorastation.neociities.org/css/fonts/ExcelsiorLTStd-Bold.eot'); /* IE9 Compat Modes */
    src: url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('https://baldorastation.neoqcities.org/css/fonts/ExcelsiorLTStd-Bold.woff2') format('woff2'), /* Super Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Bold.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

  @font-face {
    font-family: ExcelsiorItalic;
    src: url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Italic.eot'); /* IE9 Compat Modes */
    src: url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/EtxcelsiorLTStd-Italic.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/ExcelsiorLTStd-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

  @font-face {
    font-family: HeiseiMincho;
    src: url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W5.eot'); /* IE9 Compat Modes */
    src: url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W5.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W5.woff2') format('woff2'), /* Super Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W5.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/EHeiseiMinStd-W5.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

  @font-face {
    font-family: HeiseiMinchoBold;
    src: url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W9.eot'); /* IE9 Compat Modes */
    src: url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W9.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W9.woff2') format('woff2'), /* Super Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W9.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://baldorastation.neocities.org/css/fonts/HeiseiMinStd-W9.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

  strong { 
    font-family: ExcelsiorBold;
    }
  
  em { 
    font-family: ExcelsiorItalic;
    }
  
  i { 
    font-family: ExcelsiorItalic;
    }
  
  /*Span classes for Japanese*/
  .jp {
    font-family: HeiseiMincho;
    }
  .jpbold {
    font-family: HeiseiMinchoBold;
    }
    
  /* Size of largest container or bigger */
  html {
    min-width: 1080px;
    max-width: 100%;
    }
    
  a {
    color: var(--darkchicory);
    }
  a:visited {
    color: var(--morningglory);
    }
  a:hover {
    color: white;
    background: var(--darkchicory);
    text-decoration: none;
    }
  a:active {
    color: white;
    background: var(--chicory);
    text-decoration: none;
    } 

/*Palette 
  Variable names must begin with two hypens (--) and are CASE SENSITIVE.*/
  :root {
  --turquoise: #208d99;  
  --darkturquoise: #28919d;
  --chicory: #5f6fbd;
  --darkchicory: #3346a1;  
  --lightchicory: #b5c1ff;
  --maroon: #9c003e;
  --garadon: #9c6290;
  --scorpion: #4b2332;
  --morningglory: #914982;
  --winestain: #331720;
  --stone: #414065;
  }

/*Cursor*/
  html, body {
    cursor: url("https://baldorastation.neocities.org/cursor.png"), default;
    }
  a {
    cursor: url(https://baldorastation.neocities.org/cursorlink.png), auto;
    }

  /* Make the following a container for ALL images.*/
  .middleimg {
    display: inline-block !important;       /* causes element width to shrink to fit content */
    align-items:center !important;
    justify-content:center !important;
    margin: 0 auto !important;
    text-align: center;
    max-width:694px;
    }
    
/*Body and Font Definitions*/
  body {
    background-color: var(--stone);
    background-image: url("/assets/stone.jpg");
    font-family: Excelsior;
    color: var(--winestain);
    min-width:1320px;
    overflow:auto;
    }

  h1 {
    color: var(--turquoise);
    font-weight: bold;
    font-size:2.02em;
    margin: 0 0 0 0;
    font-family: ExcelsiorBold;
    }
  
  h2 {
    color: var(--turquoise);
    font-weight: bold;
    font-size:1.35em;
    padding: 0 0 0 0;
    font-family: ExcelsiorBold;
    margin-bottom: 10px;
    }
    .subtitle {
      margin-left:12px;
      margin-top:1px;
      }

  .titlelink {
    color:var(--turquoise);
    text-decoration: none;
    }
    .titlelink:visited {
    color:var(--turquoise);
    }
    .titlelink:hover {
    color:var(--turquoise);
    text-decoration: underline;
    background: none;
    }


  hr {
    text-align:left;
    margin-left:12px;
    width:680px;
    }

    
  /*Written paragraphs in the primary and double columns.*/
  .middle > p {
    font-size: 1.1em;
    }
  .double > p {
    font-size: 1.1em;
    }
  .middle > ul {
    font-size: 1.1em;
    margin-top: -1em;
    }
  .middle > ol {
    font-size: 1.1em;
    margin-top: -1em;
    }
  .double > ul {
    font-size: 1.1em;
    margin-top: -1em;
    }
  
  /*Decreased vertical spacing between paragraphs.*/
  .decreased {
    margin-top: -0.5em;
    }
  
  .quote {
    font-style: italic;
    color: var(--scorpion);
    font-weight:600;
    }
  .quote2 {
    color: var(--maroon);
    font-weight:600;
    }
    
    
    
  /*Narrator shift*/
  .ansel {
    color: #9e4b37;
    }
    
  .bedi {
    color: #2f429c;
    }
    
  .flucia {
    color: #0072b4;
    }
    
  .iseul {
    color: #00949c;
    }

  .radi {
    color: #944d74;
    }
    
  .tolly {
    color: var(--maroon);
    }
    
  .yumeka {
    color: #700070;
    }
  
  /*For links under coloured narrators*/
  .woodlink {
    color: var(--scorpion);
    }
  .woodlink:visited {
    color: var(--garadon);
    }
  .woodlink:hover {
    color: white;
    background: var(--winestain);
    text-decoration: none;
    }*
  .woodlink:active {
    color: white;
    background: var(--scorpion);
    text-decoration: none;
    } 
    
    
    
  ul {
    padding-left:20px;
    margin-top:5px;
    font-size: 1.1em;
    }
  .bodylist {
    padding-left:30px;
    margin-top:0.5em;
    }
  .lispaced {
    margin-top:0.5em;
    }

  .timestamp {
    color: var(--garadon);
    font-family: ExcelsiorBold;
    font-size: 0.96em;
    }
  .purplelink {
    margin-left: 20px;
    padding-top: 3px;
    padding-left: 2px;
    padding-bottom: 2px;
    color: var(--garadon);
    text-decoration: none;
    font-size: 0.96em;
    font-family: ExcelsiorBold;
    }
  .purplelink:visited {
    color: var(--garadon);
    text-decoration: none;
    }
  .purplelink:hover {
    background: var(--garadon);
    color: white;
    }
  .purplelink:active {
    color: white;
    background: var(--turquoise);
    text-decoration: none;
    } 
    
  .tags {
    font-family: Excelsior;
    font-size: 0.91em;
    color: var(--chicory);
    }

/* Layout: Wrapper, Header, Row, Columns, Footer. */
#wrapper {
  margin-left:auto;
  margin-right:auto;
	max-width: 1320px;
	border-bottom:none;
	border-top:none;
  }
 
#header {
  align-content:center;
  font-size: 0;
  }
  
  .headerimage {
    z-index: 0;
    }
  .headerclick {
    z-index: 1;
    margin-left:337px;
    margin-top:145px;
    width:645px;
    height:267px;
    position: absolute;
    opacity: 0.5;
    color: red;
    }

/* The row <div>s encompass columns, like a table row. */
.row {
  border: 0;
  margin-left:250px;
  }
  
.primary {
  background: url("../assets/frameleft.png"), url("../assets/frameright.png"), url("../assets/paper.png");
  background-position: left top, right top, left top;
  background-repeat: repeat-y, repeat-y, repeat;
  max-width: 1301px;
  margin-left:9px;
  margin-top:-25px;
  min-height: 500px;
  }

/* Clear floats after the columns */
.row:after {
  content: "";
  display: grid;
  clear: both;
  }

/* Three unequal columns that float next to each other. */
.column {
  float: left;
  position:relative;
  }

.left {
  width: 204px;
  margin-left:43px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  
  }

.middle {
  width: 694px;
  margin-right:17px;
  color: var(--winestain);
  }

.underheader {
  margin-top: -60px;
  }

.right {
  width: 290px;
  margin-top:0;
  }
  
.double {
  width: 990px;
  color: var(--winestain);
  }
  
.flex {
  display: flex;
  flex-direction: row;
  align-content: space-around;
  width: inherit;
  flex-wrap: wrap;
  align-items: flex-start;
  }
  .flex > div {
  margin-right: 12px;
  margin-bottom: 7px;
  text-align: center;
  /* Remember to add the style="max-width" property to the individual divs.
  This will constrain the image caption to the size of the specific image.*/
  }
  .imgthumb {
  max-height: 270px;
  align-self: center;
  }
  
.flexsidebox {
  margin-left: 10px;
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: inherit;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
  }
  .flexsidebox > div {
  width: 80px;
  font-size: 1.1em;
  align-self: center;
  margin-bottom: 0px;
  text-align: left;
  }
  
.floatleft {
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
  max-width: 308px;
  text-align: center;
  }

.clearfix::after,
  section::after {
  content: '';
  display: block;
  clear: both;
  }


.sidebox {
  color: white;
  background-image: linear-gradient(-160deg, var(--lightchicory), var(--chicory), var(--darkchicory), var(--darkchicory), var(--chicory));
  border-radius: 15px;
  border: 4px solid var(--darkchicory);
  width: 246px;
  font-family: Excelsior;
  font-size: 1em;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
  padding-right:22px;
  }
  
.sideboxlong {
  color: white;
  background-image: linear-gradient(-160deg, var(--lightchicory), var(--chicory), var(--chicory), var(--darkchicory), var(--darkchicory), var(--darkchicory), var(--darkchicory), var(--chicory));
  border-radius: 15px;
  border: 4px solid var(--darkchicory);
  width: 246px;
  font-family: Excelsior;
  font-size: 1em;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
  padding-right:22px;
  }
  
  /*Style links within the sideboxes*/
  .sidelink {
    color: #c7e9ff;
    text-decoration: none;
    }
  .sidelink:visited {
    color: #e3bcdb;
    text-decoration: none;
    }
  .sidelink:hover {
    background-color:white;
    color: var(--darkchicory);
    text-decoration:none;
    }
  .sidelink:active {
    background-color: var(--morningglory);
    color: white;
    text-decoration:none;
    }

td {
  padding-right: 16px;
  padding-bottom: 3px;
  }

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.readmore {
  color: white;
  background-image: linear-gradient(to bottom left, var(--lightchicory), var(--chicory), var(--darkchicory), var(--lightchicory));
  border-radius: 15px;
  border: 4px solid var(--darkchicory);
  font-family: Excelsior;
  margin-top:12px;
  margin-bottom:26px;
  min-width:258px;
  max-width:300px;
  padding-top: 6px;
  padding-bottom:5px;
  text-align:center;
  font-size: 1.1em;
  display:block;
  }
  
  .readlink:link {
    text-decoration: none;
    color:white;
    }
  .readlink:visited {
    color:white;
    }
  .readlink:hover {
    text-decoration: underline;
    }
  
.postscript {
  color: white;
  background-image: linear-gradient(-160deg, var(--chicory), var(--chicory), var(--darkchicory), var(--darkchicory), var(--chicory));
  border-radius: 15px;
  border: 4px solid var(--darkchicory);
  max-width: 620px;
  font-family: Excelsior;
  font-size: 1.1em;
  padding:10px;
  margin-right:auto;
  margin-left:auto;
  }

#footer {
  color:white;
  }

.grid {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }