/*---------------------------------------------------------------------
 * facile-grid.css 
 *
 * Copyright 2023 John Gambini
 *
 *--------------------------------------------------------------------*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

.facile-grid {
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: 7.5% 7.5% 14% 42% 14% 7.5% 7.5%;
  grid-template-columns: 7.5% 7.5% 14% 42% 14% 7.5% 7.5%;
  -ms-grid-rows: 3.5rem 3.5rem 1fr 3.5rem;
  grid-template-rows: 3.5rem 3.5rem 1fr 3.5rem;
}

.sophist-grid {
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: 7.5% 7.5% 14% 42% 14% 7.5% 7.5%;
  grid-template-columns: 7.5% 7.5% 14% 42% 14% 7.5% 7.5%;
  -ms-grid-rows: 2rem 2rem 1fr 2rem;
  grid-template-rows: 2rem 2rem 1fr 2rem; }

@media (min-width: 768px) {
  .facile-grid {
    -ms-grid-columns: 7.5% 7.5% 7% 56% 7% 7.5% 7.5%;
    grid-template-columns: 7.5% 7.5% 7% 56% 7% 7.5% 7.5%; }

  .sophist-grid {
    -ms-grid-columns: 7.5% 7.5% 7% 56% 7% 7.5% 7.5%;
    grid-template-columns: 7.5% 7.5% 7% 56% 7% 7.5% 7.5%; } }
@media (min-width: 992px) {
  .facile-grid {
    -ms-grid-columns: 7.5% 7.5% 3% 60% 7% 7.5% 7.5%;
    grid-template-columns: 7.5% 7.5% 3% 60% 7% 7.5% 7.5%; }

  .sophist-grid {
    -ms-grid-columns: 7.5% 7.5% 3% 60% 7% 7.5% 7.5%;
    grid-template-columns: 7.5% 7.5% 3% 60% 7% 7.5% 7.5%; } }
/*-------------------------------------------------------------------------------
 * classes for grid placement 
 * Not everything is covered here. Just what we need.
 ------------------------------------------------------------------------------- */
/*-------------------------------------------------------------------------------
 * Top row
 --------------------------------------------------------------------------------*/
/* top row, full width */
.R1R2C1C8 {
  grid-row: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

/* top row: fourth thru seventh columns
 * For page with sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens
 */
.R1R2C4C8 {
  grid-row: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

/* top row: first thru fifth columns
 * For page with addbar on right no sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens.
 */
.R1R2C1C6 {
  grid-row: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

/* top row: fourth and fifth columns
 * For page with sidebar on left and addbar on right.
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for large screens
 */
.R1R2C4C6 {
  grid-row: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

@media (min-width: 576px) {
  /* sidebar shows on screens larger than this */
  .R1R2C4C8 {
    grid-column: 4/8;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    }

  /* only sidebar shows on screens larger than this */
  .R1R2C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    }
}

@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R1R2C1C6 {
    grid-column: 1/6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
   }

  /* both sidebar and addbar show on screens larger than this */
  .R1R2C4C6 {
    grid-column: 4/6;
    -ms-grid-column: 4;
    -ms-grid-column-span: 2;
    }
}

/*------------------------------------------------------------------------------
 * second row
 -------------------------------------------------------------------------------*/
/* second row, full width */
.R2R3C1C8 {
  grid-row: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

/* second row: fourth thru seventh columns
 * For page with sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens
 */
.R2R3C4C8 {
  grid-row: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

/* second row: first thru fifth columns
 * For page with addbar on right no sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens.
 */
.R2R3C1C6 {
  grid-row: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

/* second row: fourth and fifth columns
 * For page with sidebar on left and addbar on right.
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for large screens
 */
.R2R3C4C6 {
  grid-row: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

@media (min-width: 576px) {
  /* sidebar shows on screens larger than this */
  .R2R3C4C8 {
    grid-column: 4/8;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    }

  /* only sidebar shows on screens larger than this */
  .R2R3C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    }
}

@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R2R3C1C6 {
    grid-column: 1/6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    }

  /* both sidebar and addbar show on screens larger than this */
  .R2R3C4C6 {
    grid-column: 4/6;
    -ms-grid-column: 4;
    -ms-grid-column-span: 2;
    }
}

/*--------------------------------------------------------------------------------------
 * second and third rows
 * for content area 
 ---------------------------------------------------------------------------------------*/
/* second and third row, full width */
.R2R4C1C8 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

.R2R4C1C2 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}

.R2R4C1C3 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

/* second and third row, first four columns */
/* full width at smallest screen width when there is no sidebar */
.R2R4C1C5 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

/* second and third row: fourth thru seventh columns
 * For page with sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens
 */
.R2R4C4C8 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

/* second and third row: first thru fifth columns
 * For page with addbar on right no sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens.
 */
.R2R4C1C6 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

/* second and third row: fourth and fifth columns
 * For page with sidebar on left and addbar on right.
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for large screens
 */
.R2R4C4C6 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

@media (min-width: 576px) {
  /* sidebar shows on screens larger than this */
  .R2R4C1C5 {
    grid-row: 2/4;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-column: 1/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    }

  /* sidebar shows on screens larger than this */
  .R2R4C4C8 {
    grid-column: 4/8;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    }

  /* only sidebar shows on screens larger than this */
  .R2R4C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    }
}

@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R2R4C1C6 {
    grid-column: 1/6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    }

  /* both sidebar and addbar show on screens larger than this */
  .R2R4C4C6 {
    grid-column: 4/6;
    -ms-grid-column: 4;
    -ms-grid-column-span: 2;
    }
}

/*--------------------------------------------------------------------------------------
 * not quite full height
 * for content area 
 ---------------------------------------------------------------------------------------*/
/* full height, full width */
.R1R4C1C8 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

.R1R4C2C8 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 2/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 6;
}

/* full height: fourth thru seventh columns
 * For page with sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens
 */
.R1R4C4C8 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

.R1R4C3C8 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 3/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5; }

/* full height: first thru fifth columns
 * For page with addbar on right no sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens.
 */
.R1R4C1C5 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

.R1R4C1C6 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

/* full height: fourth and fifth columns
 * For page with sidebar on left and addbar on right.
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for large screens
 */
.R1R4C4C6 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

@media (min-width: 576px) {
  .R1R4C1C5 {
    grid-column: 1/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4; }

  /* sidebar shows on screens larger than this */
  .R1R4C4C8 {
    grid-column: 4/8;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4; }

  /* only sidebar shows on screens larger than this */
  .R1R4C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4; }

  /* only sidebar shows on screens larger than this */
  .R1R4C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    }
}

@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R1R4C1C6 {
    grid-column: 1/6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    }

  /* both sidebar and addbar show on screens larger than this */
  .R1R4C4C6 {
    grid-column: 4/6;
    -ms-grid-column: 4;
    -ms-grid-column-span: 2;
    }
}

/*------------------------------------------------------------------------------------------
 * First, second, and third columns
 * For left sidebar.
 -------------------------------------------------------------------------------------------*/
/* full height */
.R1R4C1C4 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3; }

/* second and third rows */
.R2R4C1C4 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3; }
  
/* full height */
.R1R4C1C4sldr {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 1/5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4; }
  
/* second and third rows */
.R2R4C1C4sldr {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1/5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4; }

/*------------------------------------------------------------------------------------------
 * sixth and seventh columns
 * For right addbar.
 -------------------------------------------------------------------------------------------*/
/* full height */
.R1R4C6C8 {
  grid-row: 1/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-column: 6/8;
  -ms-grid-column: 6;
  -ms-grid-column-span: 2; }

/* second and third rows */
.R2R4C5C8 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 5/8;
  -ms-grid-column: 5;
  -ms-grid-column-span: 3; }

.R2R4C6C8 {
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 6/8;
  -ms-grid-column: 6;
  -ms-grid-column-span: 2; }

@media (min-width: 576px) {
  /* sidebar shows on screens larger than this */
  .R1R4C1C4 {
    display: block; }

  .R1R4C1C4sldr {
    display: block;
    grid-column: 1/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; }

  .R2R4C1C4sldr {
    display: block;
    grid-column: 1/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; }

  .R2R4C1C4 {
    display: block;
    grid-column: 1/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; } }
    
@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R1R4C6C8 {
    display: block; }

  .R2R4C6C8 {
    display: block;
    }
}


/*--------------------------------------------------------------------------------------
 * full height
 * for content area 
 ---------------------------------------------------------------------------------------*/
/* full height, full width */
.R1R5C1C8 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}

.R1R5C2C8 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 2/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 6;
}

/* full height: fourth thru seventh columns
 * For page with sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens
 */
.R1R5C4C8 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

.R1R5C3C8 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 3/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5; }

/* full height: first thru fifth columns
 * For page with addbar on right no sidebar on left. 
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for larger screens.
 */
.R1R5C1C5 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

.R1R5C1C6 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

/* full height: fourth and fifth columns
 * For page with sidebar on left and addbar on right.
 * On small screens sidebars disappear so this is set to full
 * width for small screens. Media flags will change it for large screens
 */
.R1R5C4C6 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/8;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7; }

@media (min-width: 576px) {
  .R1R5C1C5 {
    grid-column: 1/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4; }

  /* sidebar shows on screens larger than this */
  .R1R5C4C8 {
    grid-column: 4/8;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4; }

  /* only sidebar shows on screens larger than this */
  .R1R5C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4; }

  /* only sidebar shows on screens larger than this */
  .R1R5C4C6 {
    grid-column: 4/8;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    }
}

@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R1R5C1C6 {
    grid-column: 1/6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    }

  /* both sidebar and addbar show on screens larger than this */
  .R1R5C4C6 {
    grid-column: 4/6;
    -ms-grid-column: 4;
    -ms-grid-column-span: 2;
    }
}

/*------------------------------------------------------------------------------------------
 * First, second, and third columns
 * For left sidebar.
 -------------------------------------------------------------------------------------------*/
/* full height */
.R1R5C1C4 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3; }

/* second and third rows */
.R2R5C1C4 {
  grid-row: 2/5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-column: 1/4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3; }
  
/* full height */
.R1R5C1C4sldr {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 1/5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4; }
  
/* second and third rows */
.R2R4C1C4sldr {
  grid-row: 2/5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-column: 1/5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4; }

/*------------------------------------------------------------------------------------------
 * sixth and seventh columns
 * For right addbar.
 -------------------------------------------------------------------------------------------*/
/* full height */
.R1R5C6C8 {
  grid-row: 1/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-column: 6/8;
  -ms-grid-column: 6;
  -ms-grid-column-span: 2; }

/* second and third rows */
.R2R5C5C8 {
  grid-row: 2/5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-column: 5/8;
  -ms-grid-column: 5;
  -ms-grid-column-span: 3; }

.R2R5C6C8 {
  grid-row: 2/5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-column: 6/8;
  -ms-grid-column: 6;
  -ms-grid-column-span: 2; }

@media (min-width: 576px) {
  /* sidebar shows on screens larger than this */
  .R1R5C1C4 {
    display: block; }

  .R1R5C1C4sldr {
    display: block;
    grid-column: 1/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; }

  .R2R5C1C4sldr {
    display: block;
    grid-column: 1/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; }

  .R2R5C1C4 {
    display: block;
    grid-column: 1/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; } }
    
@media (min-width: 992px) {
  /* addbar shows on screens larger than this */
  .R1R5C6C8 {
    display: block; }

  .R2R5C6C8 {
    display: block;
    }
}

/*-----------------------------------------------------------------------------------------------
 * additional css for page components
 -----------------------------------------------------------------------------------------------*/
/* when the page component is not used in the page, use this */
.noDisplay {
  display: none; }