/***************************************************************************************************
****************************************************************************************************

Project..... Vaughan Memorial Library website
Date........ Q2-2023
Developer... vincent.grovestine@acadiau.ca

****************************************************************************************************
***************************************************************************************************/



/*******************************************************************************
********************************************************************************
** CE_ACCORDION: Accordion container general styling
********************************************************************************
*******************************************************************************/

/*
details.ce_accordion {}
*/

.ce_accordion summary {
  color: var(--vml-color-accordion-summary-text);
  cursor: pointer;
}

.ce_accordion summary h3 {
  color: inherit;
  display: inline-block;
}

.ce_accordion summary:active,
.ce_accordion summary:hover {
  color: var(--vml-color-accordion-summary-active-text);
}



/*******************************************************************************
********************************************************************************
** CE_DOWNLOAD(S): Download link general styling
********************************************************************************
*******************************************************************************/

.ce_download,
.ce_downloads {
  margin-left: 0.625rem;
}

.ce_downloads ul {
  list-style-type: none;
  margin-left: 0;
}



/*******************************************************************************
********************************************************************************
** CE_FORM: Form general styling; table-less version
********************************************************************************
*******************************************************************************/

.ce_form p.error {
  color: var(--vml-color-form-error-text);
  font-size: 0.75em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.ce_form .widget.error {
  border-left: 0.3125em solid  var(--vml-color-form-error-border);
  padding: 0.3125em;
  background-color:  var(--vml-color-form-error-background);
}

.ce_form.tableless input,
.ce_form.tableless textarea,
.ce_form.tableless select,
.ce_form.tableless button {
  line-height: 1.375em;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
}

.ce_form.tableless .widget,
.ce_form.tableless .submit_container {
  margin: 0.625rem 0;
}

.ce_form.tableless fieldset legend {
  color: var(--vml-color-form-legend-text);
  font-weight: normal;
  font-size: 1.0625em;
  line-height: 1.2941em;
  border-bottom: 1px solid var(--vml-color-border);
  margin-bottom: 0.125em;
  padding-top: 0.375em;
  width: 100%;
  display: block;
}

.ce_form.tableless .widget fieldset legend {
  color: inherit;
  font-weight: inherit;
  font-size: 0.75em;
  line-height: 1.8333em;
  border-bottom: inherit;
  margin-bottom: inherit;
  padding-top: inherit;
  width: auto;
  display: block;
}

.ce_form.tableless label,
.ce_form.tableless .explanation {
  font-size: 0.75em;
  line-height: 1.8333em;
  display: block;
}

.ce_form.tableless .checkbox_container label {
  display: inline-block;
}

.ce_form.tableless .mandatory label,
.ce_form.tableless .mandatory fieldset legend {
  font-weight: bold;
}

.ce_form.tableless label span.mandatory,
.ce_form.tableless fieldset legend span.mandatory,
.ce_form.tableless .checkbox_container.mandatory label:after {
  color: var(--vml-color-form-mandatory-text);
  padding-left: 0.125em;
}

.ce_form.tableless .checkbox_container.mandatory label:after {
  content: "*";
}

.ce_form.tableless .checkbox_container.mandatory.stacked label:after {
  content: none;
}

.ce_form.tableless .widget-text input {
  width: 20em;
  max-width: 99%;
}

.ce_form.tableless .widget-text input.xshort {
  width: 8em;
}

.ce_form.tableless .widget-text input.short {
  width: 12em;
}

.ce_form.tableless .widget-text input.medium {
  width: initial;
}

.ce_form.tableless .widget-text input.long {
  width: 30em;
}

.ce_form.tableless .widget-text input.xlong {
  width: 42em;
}

.ce_form.tableless .widget-text input.fullwidth {
  box-sizing: border-box;
  width: 99%;
}

.ce_form.tableless .widget-textarea textarea {
  width: 30em;
  max-width: 99%;
  height: 6.875rem;
}

.ce_form.tableless .widget-textarea textarea.small {
  width: 20em;
  height: 3.4375rem;
}

.ce_form.tableless .widget-textarea textarea.medium {
  width: initial;
  height: initial;
}

.ce_form.tableless .widget-textarea textarea.large {
  width: 40em;
  height: 10.3125rem;
}

.ce_form.tableless .widget-textarea textarea.fullwidth {
  box-sizing: border-box;
  width: 99%;
}

.ce_form.tableless .widget-radio input {
  display: inline-block;
  width: auto;
}

.ce_form.tableless .widget-radio label,
.ce_form.tableless .widget-checkbox label {
  font-weight: normal;
  display: inline-block;
  width: auto;
  margin-right: 1em;
}

.ce_form.tableless .widget-radio .radio_container span,
.ce_form.tableless .widget-checkbox .checkbox_container span {
  white-space: nowrap;
}

.ce_form.tableless .widget-radio.stacked .radio_container > span,
.ce_form.tableless .widget-checkbox.stacked .checkbox_container > span {
    display: block;
  white-space: normal;
}

.ce_form form .widget.has_other {
  margin-bottom: 0 !important;
}
.ce_form form .widget.has_other + .widget {
  margin-top: 0 !important;
  padding-left: 1em;
}

.ce_form.tableless .widget-select select {
  padding-top: 0.1333em;
  padding-bottom: 0.1333em;

}

.ce_form.tableless .widget-captcha input {
  width: 2em;
  max-width: 99%;
  margin-right: 0.315em;
}

.ce_form.tableless .widget-captcha .captcha_text {
  font-size: 0.75em;
  line-height: 1.8333em;
}

.ce_form.tableless .widget-submit button {
  font-size: 0.75em;
  line-height: 1.8333em;
}

.ce_form.tableless .widget-explanation p,
.ce_form.tableless .widget-explanation ol,
.ce_form.tableless .widget-explanation ul {
  margin-top: 0.325em;
  margin-bottom: 0.325em;
}

.ce_form.tableless .flex_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.ce_form.tableless .flex_wrapper .widget {
  padding-right: 1.8333em;
}

.ce_form form.high_legibility {
  font-size: 1em;
}

.ce_form form.high_legibility .widget {
  margin: 1.325em 0;
}

.ce_form form.high_legibility .explanation p {
  margin: 1em 0;
}

.ce_form form.high_legibility label,
.ce_form form.high_legibility .widget fieldset legend,
.ce_form form.high_legibility .explanation,
.ce_form form.high_legibility .widget-submit button {
  font-size: 1em;
}

.ce_form form.high_legibility label,
.ce_form form.high_legibility .widget fieldset legend {
  font-weight: bold;
}



/*******************************************************************************
********************************************************************************
** CE_HEADLINE: First H2 in a section on the homepage
********************************************************************************
*******************************************************************************/

.home-1col h2.ce_headline.first {
  margin-top: 1em;
  border-bottom: 1px solid var(--vml-color-h2-ce_headline-first-border);
}



/*******************************************************************************
********************************************************************************
** CE_IMAGE: Image figures general styling
********************************************************************************
*******************************************************************************/

.ce_image {
  padding: 0.625rem 0;
}

.ce_image figure {
  font-size: 0.875em;
  text-align: center;
}

.ce_image figure figcaption strong.title,
.ce_image figure figcaption h3.title {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: inherit;
  color: inherit;
}

.ce_image figure figcaption span.caption {
  display: block;
}



/*******************************************************************************
********************************************************************************
** CE_SLIDERSTART: Content slider general styling
********************************************************************************
*******************************************************************************/

.ce_sliderStart .content-slider .slider-wrapper .ce_image img {
  width: 100%;
  height: auto;
}

.ce_sliderStart nav.slider-control a.slider-prev {
  display: none;
}

.ce_sliderStart nav.slider-control span.slider-menu b {
  color: var(--vml-color-slider-control-b-text);
  font-size: 2.25rem;
  padding: 0 0.375rem;
}

.ce_sliderStart nav.slider-control span.slider-menu b.active {
  color: var(--vml-color-slider-control-b-active-text);
}

.ce_sliderStart nav.slider-control a.slider-next {
  display: none;
}



/*******************************************************************************
********************************************************************************
** CE_TABLE: Table general styling
********************************************************************************
*******************************************************************************/

.ce_table table,
table.ce_table {
  font-size: 0.875em;
  border-collapse: collapse;
  width: auto;
}

.ce_table th {
  font-weigh: bold;
}

.ce_table thead th {
  background-color: var(--vml-color-table-thead-th-background);
  color: var(--vml-color-table-thead-th-text);
  vertical-align: bottom;
  padding: 0.375em 0.625em;
}

.ce_table thead th:first-child {
  border-radius: 0.25em 0 0 0.25em;
}

.ce_table thead th:last-child {
  border-radius: 0 0.25em 0.25em 0;
}

.ce_table tbody tr:hover {
  background-color: var(--vml-color-table-tbody-tr-hover-background);
}

.ce_table tbody th,
.ce_table tbody td {
  border-bottom: 1px solid var(--vml-color-border);
  padding: 0.375em 0.625em;
}



/*******************************************************************************
********************************************************************************
** CE_TABLE: Sortable table header
********************************************************************************
*******************************************************************************/

.ce_table .sortable thead th.header,
.ce_table .sortable thead th.header.headerSortUp,
.ce_table .sortable thead th.header.headerSortDown {
  background-image: none;
  cursor: pointer;
}

.ce_table .sortable thead th.header:before,
.ce_table .sortable thead th.header.headerSortUp:before,
.ce_table .sortable thead th.header.headerSortDown:before {
  font-family: "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  display: inline;
  margin-right: 0.125em;
}

.ce_table .sortable thead th.header:before {
  color: var(--vml-color-table-thead-th-sortable-text);
  content: "\f0dc\00a0";
}

.ce_table .sortable thead th.header.headerSortUp:before {
  color: var(--vml-color-table-thead-th-sorted-text);
  content: "\f0de\00a0";
}

.ce_table .sortable thead th.header.headerSortDown:before {
  color: var(--vml-color-table-thead-th-sorted-text);
  content: "\f0dd\00a0";
}



/*******************************************************************************
********************************************************************************
** CE_TABLE: Flexible styling for smaller screen widths
********************************************************************************
*******************************************************************************/

@media all and (max-width: 1080px) {

  .ce_table.flexible table,
  table.ce_table.flexible {
    font-size: 1em;
  }

  .ce_table.flexible thead {
    display: none !important;
  }

  .ce_table.flexible tbody {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 2em 1em;
  }

  .ce_table.flexible tbody tr {
    flex-basis: 15em;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .ce_table.flexible tbody tr:hover {
    background-color: transparent;
  }

  .ce_table.flexible tbody th,
  .ce_table.flexible tbody td {
    display: block;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
  }

  .ce_table.flexible tbody .col_0,
  .ce_table.flexible tbody .col_first {
    font-weight: bold;
    color: var(--vml-color-table-flexible-tbody-col_first-text);
  }

  .ce_table.flexible tbody .empty {
    display: none;
  }
}



/*******************************************************************************
********************************************************************************
** CE_TABLE: Plain styling
********************************************************************************
*******************************************************************************/

.ce_table.plain {
  font-size: 1em;
}

.ce_table.plain * {
  background-color: transparent !important;
  border: none;
}

.ce_table.plain tr th:first-child,
.ce_table.plain tr td:first-child {
  padding-left: 0;
}

.ce_table.plain tr th:last-child,
.ce_table.plain tr td:last-child {
  padding-right: 0;
}



/*******************************************************************************
********************************************************************************
** CE_TEXT: Image figures
********************************************************************************
*******************************************************************************/

.ce_text figure {
  margin: 0;
}

.ce_text figure.float_left {
  margin: 1.5em 1.5em 0.5em 0;
}

.ce_text figure.float_right {
  margin: 1.5em 0 0.5em 1.5em;
}

.ce_text figure figcaption {
  font-size: 0.75em;
}



/*******************************************************************************
********************************************************************************
** CE_TEXT: Librarian & Staff information
********************************************************************************
*******************************************************************************/

.staff-photo {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1em;
}

.staff-photo .image_container,
.staff_photo .text_container {
  float: none !important;
  margin: 0 !important;
}

.staff-photo .image_container {
  flex-basis: 12em;
  flex-grow: 0;
  flex-shrink: 0;
}

.staff-photo .text_container {
  flex-basis: 15em;
  flex-grow: 1;
  flex-shrink: 0;
}

.staff-photo figure img {
  border: 1px solid var(--vml-color-figure-img-border);
  padding: 2px;
  background-color: var(--vml-color-figure-img-background);
}



/*******************************************************************************
********************************************************************************
** CE_TEXT: Library hours (homepage)
********************************************************************************
*******************************************************************************/

#hours {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
}

#hours .ce_text {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30%;
  min-width: 20rem;
  padding: 0.5em 0;
  box-sizing: border-box;
}

#hours .ce_text.first {
  flex-shrink: 0;
  min-width: 22rem;
}



/*******************************************************************************
********************************************************************************
** CE_TEXT: Quick Links (homepage boxes)
********************************************************************************
*******************************************************************************/

#quick-links {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.5rem 2.5rem;
  margin-top: 0.5em;
}

#quick-links .ce_text {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30%;
  min-width: 20rem;
  padding-left: 5.5em;
  box-sizing: border-box;

  background-size: 4em;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 1.5em;
}

#quick-links .ce_text h2 {
  margin-bottom: 0;
}

#quick-links .ce_text p {
  margin: 0.25em 0 0.75em 0;
}

#quick-links .ce_text span.separator {
  padding: 0 0.25em;
  color: var(--vml-color-quick_links-seperator-text);
}

#quick-links .ce_text.about_us {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-interface-user-human-interface-essential-600.PNG");
}

#quick-links .ce_text.archives_special_collections {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-interface-content-archive-interface-essential-600.PNG");
}

#quick-links .ce_text.digital_collections {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-interface-content-archive-folder-interface-essential-600.PNG");
}

#quick-links .ce_text.get_help {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-interface-help-question-message-interface-essential-600.PNG");
}

#quick-links .ce_text.research_resources {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-interface-content-book-2-interface-essential-600.PNG");
}

#quick-links .ce_text.services {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-travel-hotel-bell-maps-travel-600.PNG");
}

#quick-links .ce_text.using_the_library {
  background-image: url("/files/themes/vml2022_web/images/streamlinehq-interface-content-book-open-interface-essential-600.PNG");
}



/*******************************************************************************
********************************************************************************
** CE_TEXT: What's Happening? (homepage tweets)
********************************************************************************
*******************************************************************************/

#whats-happening {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  overflow: hidden;
}

#whats-happening .ce_text.tweet {
  flex-basis: 15rem;
  flex-grow: 1;
  flex-shrink: 1;
}

@media all and (max-width: 68.125rem) {
  #whats-happening .ce_text.tweet.more {
    display: none;
  }
}

@media all and (max-width: 55.75rem) {
  #whats-happening {
  	flex-wrap: wrap;
  }

  #whats-happening .ce_text.tweet.third {
    display: none;
  }
}

@media all and (max-width: 40rem) {
  #whats-happening .ce_text.tweet {
    flex-basis: 12rem;
  }
}

#whats-happening .ce_text.tweet .media {
  text-align: center;
}

#whats-happening .ce_text.tweet .media img {
  /*
  width: 100%;
  height: auto;
  */
  max-width: 100%;
  max-height: 15rem;
  width: auto;
  height: auto;
}

#whats-happening .ce_text.tweet .byline {
  font-size: 0.875em;
  text-align: center;
  font-style: italic;
  margin-bottom: 0;
}

#whats-happening .ce_text.tweet .byline .user {
  font-weight: bold;
  text-decoration-style: dotted;
}

#whats-happening .ce_text.tweet .byline .datetime {
  text-decoration-style: dotted;
}

#whats-happening .ce_text.tweet .reactions {
  font-size: 0.875em;
  text-align: center;
  color: var(--vml-color-tweet-reactions-text);
}

#whats-happening .ce_text.tweet .reaction {
  display: inline-block;
  margin: 0 0.5em;
}

#whats-happening .ce_text.tweet .reaction .fab,
#whats-happening .ce_text.tweet .reaction .far,
#whats-happening .ce_text.tweet .reaction .fas {
  width: 3ex;
  text-align: center;
}

#whats-happening .ce_text.tweet .reaction span.label {
  display: none;
}



/***************************************************************************************************
***************************************************************************************************/