/* VIRGINIA CUSTOMISATION: Button color */
/* svg elements need "fill" instead of "color", annoyingly */
a svg, button svg
{
  fill: #56BAEC;  /* Bootstrap's "brand-primary" colour */
}

/* Re-style bootstrap's ".btn-light" button a little. Since bootstrap-4.0.0-beta button's borders and backgrounds are the same color, but in the case of .btn-light I think it needs a darker border or it nearly vanishes.
 *    Note that rgb(0,0,0,.15) (#d8d8d8) is the same color used for the border of a .form-control */
.btn-light
{
  border-color: #D8D8D8;
  color: #56BAEC;  /* Bootstrap's "brand-primary" colour */
}

/* VIRGINIA CUSTOMISATION: Main color */
.maincolor, .textcorrectblockcolor
{
  background-color: #56BAEC;  /* Bootstrap's "brand-primary" colour */
}

/* VIRGINIA CUSTOMISATION: Main color */
div#datebrowserrichardmonthlevelcalendarheader
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border: 1px solid #56BAEC;  /* Bootstrap's "brand-primary" colour */
  border-radius: 0.25rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  -webkit-box-align: center;
    -ms-flex-align: center;
      align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 0.75rem;
  padding-left: 0.5rem;
}

/* VIRGINIA CUSTOMISATION: Underline on hover */
a:hover
{
  text-decoration: underline;
}

/* VIRGINIA CUSTOMISATION: slightly smaller h1 on document display page and slightly less white space */
h1
{
  font-size: 20px;
  margin-top: 0px;
}

/* VIRGINIA CUSTOMISATION: Header background color */
header#header
{
  background-color: #333;
}

/* VIRGINIA CUSTOMISATION: Humburger button float right */
div#headertopcell
{
  float: right;
  padding-top: 10px;
}

/* VIRGINIA CUSTOMISATION: User links style */
div#userlinks
{
  text-align: right;
}
div#userlinks a
{
  color: #c5c5c5;
  text-decoration: none;
  transition: all 0.1s linear;
}
div#userlinks a:first-child
{
  margin-right: 0.5rem;
}
div#userlinks a:hover
{
  color: #fff;
}
div#userlinks a.active
{
  color: #fff;
  font-weight: bold;
}

/* VIRGINIA CUSTOMISATION: Library logo style */
div#liblogocell
{
  display: none;
  padding-top: 15px;
}

/* VIRGINIA CUSTOMISATION: Publisher image style */
div#publishercell
{ 
  display: none;
  padding-left: 15px;
}

/* VIRGINIA CUSTOMISATION: header bottom cell style */
div#headerbottomcell
{
  min-height: 56px;
  border-bottom: 0px;
}
div#headerbottomcell img
{
  width: 100%;
}

/* VIRGINIA CUSTOMISATION: Navbar style */
nav.navbar
{
  padding: 0;
  margin-top: 2px;
}

#navbar .nav-pills .nav-link
{
  color: #c5c5c5;
  text-decoration: none;
  transition: all 0.1s linear;
  padding-bottom: 3px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
#navbar .nav-pills .nav-link.active
{
  color: #fff;
  font-weight: bold;
}
#navbar .nav-pills .nav-link:hover
{
  color: #fff;
}

/* VIRGINIA CUSTOMISATION: Navbar bottom border style */
#navbar:after 
{
  content: "";
  display: block;
  height: 5px;
  background-image: url('../images/navbar_bg.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100%;
}

/* VIRGINIA CUSTOMISATION: Bread crumb style */
ol.breadcrumb
{
  border-bottom: 0px;
  -webkit-box-flex: 2;
  -ms-flex: 2 1 auto;
  flex: 2 1 auto;
}

/* VIRGINIA CUSTOMISATION: Bread crumb content style */
div#breadcrumbscontent
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* VIRGINIA CUSTOMISATION: Set social bookmarks height to prevent a short one before loading and showing buttons */
div#socialbookmarkscell
{
  background-color: #F7F7F9;
  padding-top: 4px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
div#socialbookmarks
{
  text-align: right;
  font-size: 0.5875rem;  /* Reduce jsSocials icon size */
  white-space: nowrap;
}
.jssocials-share
{
  margin: 0 .6em 0 0;
}
.jssocials-share-link
{
 padding: .3em .4em;
}

/* VIRGINIA CUSTOMISATION: Announcement on home page style */
div#announcement
{
  background-color: #F8F8F8;
  border: solid 2px #09C; 
  border-radius: 15px; 
  padding: 10px; 
  margin-bottom: 1.25rem;
  text-align: center;
}

/* VIRGINIA CUSTOMISATION: Hide sampler preload div */
div#samplerdisplaypreload 
{
  display: none;
}

/* VIRGINIA CUSTOMISATION: Advanced search style */
.advancedsearchwrapper
{
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

/* VIRGINIA CUSTOMISATION: Publication filter style */
#virginiapublicationfilterform
{
  background-color: #F7F7F9; 
  margin-bottom: 10px; 
  padding: 5px;
}

/* VIRGINIA CUSTOMISATION: Publication page attribution style */
.virginiapublicationpageattribution
{
  font-size: 90%;
  color: #606060;
  padding: 4px;
  margin: 4px;
  border: 1px solid #EEE;
  border-radius: 4px;
}

/* VIRGINIA CUSTOMISATION: Description CSS */
div.virginiadescription a
{
  font-style: italic;
}

/* VIRGINIA CUSTOMISATION: Publication browser page content CSS */
div#publicationbrowserpagecontent > h2 
{
  border-bottom: 0;
}

/* VIRGINIA CUSTOMISATION: Publication browser section dividers */
ul.publicationbrowserlist {
  border-top: 1px solid #ddd;
  margin-left: 25px;
  margin-top: -15px;
  padding-top: 10px;
}

/* VIRGINIA CUSTOMISATION: Custom styling for the horizontal vlist on the publication browser page */
div#publicationbrowserhlist
{
  border-bottom: none;
}

/* VIRGINIA CUSTOMISATION: Custom styling for the place header on the place browser page */
div.placebrowserplaceheader
{
  width: 100%;
  margin-top: 0.875rem;
}
div.placebrowserplaceheader > span
{
  color: #484848;
  font-size: 1.125rem;
}

/* VIRGINIA CUSTOMISATION: Document display header style */
div#documentdisplayheader
{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
div#documentdisplayheader h1
{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* VIRGINIA CUSTOMISATION: PDF download CSS */
button.g-recaptcha
{
  background-color: white;
  font-size: 0.8rem;
  margin-left: 10px;
  background-image: url(../../../../web/images/iconpdf.gif);
  background-position: center left;
  background-repeat: no-repeat;
  min-height: 18px;
  padding-left: 23px;
  white-space: nowrap;
  border: none;
  color: #09c;
  cursor: pointer;
  vertical-align: middle;
}
button.g-recaptcha:hover
{
  color: #bc0b36;
  text-decoration: underline;
}
div#panojscontextmenupopup button.g-recaptcha
{
  background-color: rgba(0, 0, 0, 0);
  background-position: center left;
  background-repeat: no-repeat;
  font-size: 1rem;
  color: #CAD0D3;
  display: inline-block;
  margin: 0 -6px 0 0;
  padding-right: 0px;
  min-height: 18px;
}
div#panojscontextmenupopup .hiddenwhensmall
{
  display: block !important;
}
div.grecaptcha-badge
{
  top: 70px !important;
  z-index: 1000; 
  display: none;
}

/* VIRGINIA CUSTOMISATION: Document page attribution CSS */
.virginiadocumentpageattribution
{
  font-size: 90%;
  color: #606060;
  margin-left: 0;
  margin-right: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* VIRGINIA CUSTOMISATION: Map style */
#holdingsmapwrapper > h2
{
  text-align: center;
  margin-bottom: 1rem;
}
#holdingsmap
{
  display:block; 
  width: 100%;
  border: 1px solid #CCC;
}

/* VIRGINIA CUSTOMISATION: Footer style */
footer#footer
{
  background-color: #333;
  color: #FFF;
}
footer#footer a
{
  color: #c5c5c5;
}
footer#footer a:hover
{
  color: #FFF;
  text-decoration: none;
}

/* VIRGINIA CUSTOMISATION: Style definitions on screen width over 400px */
@media (min-width: 401px)
{
  /* VIRGINIA CUSTOMISATION: Bread crumb content style */
  div#breadcrumbscontent
  {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

/* VIRGINIA CUSTOMISATION: Style definitions on screen width over 500px */
@media (min-width: 501px)
{
  /* VIRGINIA CUSTOMISATION: Publication page definitions style */
  .virginiapublicationpageattribution
  {
    margin: 4px 120px 4px 4px;
  }
}

/* VIRGINIA CUSTOMISATION: Style definitions on screen width over 700px */
@media (min-width: 701px)
{
  /* VIRGINIA CUSTOMISATION: header bottom cell style */
  div#headerbottomcell img
  {
    width: 550px;
  }

  /* VIRGINIA CUSTOMISATION: Document display header style */
  div#documentdisplayheader
  {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  /* VIRGINIA CUSTOMISATION: Document page attribution CSS */
  .virginiadocumentpageattribution
  {
    margin-left: 1rem;
    text-align: right;
  }
}

/* VIRGINIA CUSTOMISATION: Style definitions on screen width over 800px */
@media (min-width: 801px)
{
  /* VIRGINIA CUSTOMISATION: Widen middle column */
  div#homepagemiddlecolumn 
  {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    -webkit-flex: 2;
    flex: 2;
  }
}

/* VIRGINIA CUSTOMISATION: Style definitions on screen width over 850px */
@media (min-width: 951px)
{
  /* VIRGINIA CUSTOMISATION: Library logo style */
  div#liblogocell
  {
    display: block;
  }
}

/* VIRGINIA CUSTOMISATION: Style definitions on screen width over 1000px */
@media (min-width: 1150px)
{
  /* VIRGINIA CUSTOMISATION: Publisher image style */
  div#publishercell
  {
    display: block;
  }
 
}
@media (max-width: 1300px)
{
 #navbar .nav-pills .nav-link
  {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 750px)
{
  #navbar .nav-pills .nav-link
  {
    padding:0.5rem 0.5rem;
  }
}

/* VIRGINIA CUSTOMISATION: Statistics table style */
.statsdatacontainer
{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.statsdatacontainer h3
{
  text-align: center;
}
#publicationtextcorectstatlink
{
  margin-top: 0.5rem;
  text-align: center;
}

div#textcorrectstatscollection
{
  border-top: 1px solid #CCC;
  margin: 1.5rem 0rem;
  padding-top: 1.5rem;
}
div#textcorrectstatscollection h2 
{
  text-align: center;
  text-transform: uppercase;
}
.statsdata, .statsdata div 
{
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
.statsdata > div > div 
{
  border: 1px solid #CCC;
  padding: 0.2rem 0.75rem;
}
.statsdata .statsvalue
{
  text-align: right;
}

/* VIRGINIA CUSTOMISATION: Text correction recommandation link style */
div#homepagetextcorrectrecommend
{
  text-align: center;
}

/* VIRGINIA CUSTOMISATION: Text correct statistics style */
div#homepagetextcorrectstatistics
{
  padding: 0.5rem 0rem;
  padding-bottom: 2rem;
  text-align: center;
}

/* VIRGINIA CUSTOMISATION: Text corrector header style */
#homepagerightcolumn h3
{
  text-align: center;
}

div#textcorrectpagecolumn3
{
  /* Make the left column the second in order */
  ms-flex-order: 2;
  webkit-box-ordinal-group: 3;
  webkit-order: 2;
  order: 3;

  /* Give the left column some right margin and the right column some left margin */
  margin-right: 0.25rem;
}

div#textcorrectpagecontent
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
div#textcorrectpagecolumn3
{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          -webkit-flex: 1;
          flex: 1;
  -ms-flex-order: 1;
    -webkit-box-ordinal-group: 3;
          -webkit-order: 1;
          order: 3;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
div#textcorrectpagecolumn2
{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          -webkit-flex: 1;
          flex: 1.5;
  -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
          -webkit-order: 1;
          order: 2;
}
div#textcorrectpagecolumn1
{
  -webkit-box-flex: 1.5;
      -ms-flex: 1.5;
          -webkit-flex: 1.5;
          flex: 1.5;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  -ms-flex-order: 2;
    -webkit-box-ordinal-group: 3;
          -webkit-order: 2;
          order: 1;
}

div#textcorrectpagecontent h2
{
  font-size: 1.125rem;  /* Smaller than usual for h2 */
  text-align: center;
  text-transform: uppercase;
}
div#textcorrectionexpand h2
{
  margin-bottom: 0;
}

/* On screens less than 500px wide display the three columns on the home page as a single column */
@media (max-width: 500px)
{
  #headingTwo, #headingOne
  {
    padding: 0.5rem 0.25rem
  }


  #textcorrectshowmore, #textcorrectshowless, #textcorrecthelpshowmore, #textcorrecthelpshowless
  {
    width: 1rem;
    height: 1rem;
  }
  #textcorrectionexpand p, #textcorrectionexpand ul
  {
    font-size: 0.8rem;
  }
  div#textcorrectpagecolumn1 h2
  {
    font-size: 0.8rem;
  }
  div#textcorrectpagecontent
  {
    display: block;
  }
  div#textcorrectpagecolumn1,
  div#textcorrectpagecolumn2,
  div#textcorrectpagecolumn3
  {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
   /* margin-bottom: 0.5rem;*/
  }
  div#textcorrectpagecolumn1
  {
    order: 1;
  }
  div#textcorrectpagecolumn2
  {
    order: 2;
  }
  div#textcorrectpagecolumn3
  {
    order: 3;
  }
}
#textcorrectexpandbuttons
{
  color: #09c;
}
#textcorrectionexpand
{
    display: none;
}
@media (min-width: 901px)
{
  #textcorrectexpandbuttons
  {
    display: none;
  }
  div#textcorrectextracontent
  {
    display: block !important;
  }
}
@media (max-width: 900px)
{
  #headingTwo
  {
    border-bottom: none;
  }
  .card-header
  {
    border-radius: .25rem !important;
    cursor: pointer;
  }
  #textcorrectionexpand
  {
    display: block;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
  }
  #textcorrectfullpage
  {
    display: none;
  }
  #textcorrectshowmore
  {
    display:block;
  }
  div#textcorrectextracontent
  {
    display:none;
  }
  div#textcorrectpagecontent
  {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  div#textcorrectpagecolumn1
  {
    /* Make the "middle" column fill the full screen width */
    -ms-flex-preferred-size: 100%;
        -webkit-flex-basis: 100%;
            flex-basis: 100%;
    /* Remove left and right margin because it's now stacked vertically */
    margin-left: 0;
    margin-right: 0;
    /* Make the middle column the first in order */
    -ms-flex-order: 1;
      -webkit-box-ordinal-group: 2;
            -webkit-order: 1;
            order: 1;
    /* Add some bottom margin to the "middle" column, as it now has the "left" and "right" columns benether it */
    /*margin-bottom: 0.5rem;*/
  }

  div#textcorrectpagecolumn3
  {
    /* Make the left column the second in order */
    -ms-flex-order: 2;
      -webkit-box-ordinal-group: 3;
            -webkit-order: 2;
            order: 3;
    -ms-flex-preferred-size: 100%;
        -webkit-flex-basis: 100%;
            flex-basis: 100%;
    margin-right: 0;
    margin-left: 0;
    /* Give the left column some right margin and the right column some left margin */
  }

 div#textcorrectpagecolumn2
  {
    /* Make the left column the second in order */
    -ms-flex-order: 2;
      -webkit-box-ordinal-group: 3;
            -webkit-order: 2;
            order: 2;
 
    /* Give the left column some right margin and the right column some left margin */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .card-header
  {
    border-radius: .25rem !important;
    cursor: pointer;
  }
  #textcorrectionexpand
  {
    display: block;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
  }
  #textcorrectfullpage
  {
    display: none;
  }
  #textcorrectshowmore
  {
    display:block;
  }
  div#textcorrectextracontent
  {
    display:none;
  }
  div#textcorrectpagecontent
  {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  div#textcorrectpagecolumn1
  {
    /* Make the "middle" column fill the full screen width */
    -ms-flex-preferred-size: 100%;
        -webkit-flex-basis: 100%;
            flex-basis: 100%;
    /* Remove left and right margin because it's now stacked vertically */
    margin-left: 0;
    margin-right: 0;
    /* Make the middle column the first in order */
    -ms-flex-order: 1;
      -webkit-box-ordinal-group: 2;
            -webkit-order: 1;
            order: 1;
    /* Add some bottom margin to the "middle" column, as it now has the "left" and "right" columns benether it */
    /*margin-bottom: 0.5rem;*/
  }

  div#textcorrectpagecolumn3
  {
    /* Make the left column the second in order */
    -ms-flex-order: 2;
      -webkit-box-ordinal-group: 3;
            -webkit-order: 2;
            order: 3;
    -ms-flex-preferred-size: 100%;
        -webkit-flex-basis: 100%;
            flex-basis: 100%;
    margin-right: 0;
    margin-left: 0;
    /* Give the left column some right margin and the right column some left margin */
  }

 div#textcorrectpagecolumn2
  {
    /* Make the left column the second in order */
    -ms-flex-order: 2;
      -webkit-box-ordinal-group: 3;
            -webkit-order: 2;
            order: 2;
 
    /* Give the left column some right margin and the right column some left margin */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

}

#textcorrectpagecolumn3 #textcorrectstatspagecontent .completelycorrectstats
{
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: center;

}

#textcorrectpagecolumn3 #textcorrectstatspagecontent .userscoreboard
{
  margin: auto;

}
#textcorrectpagecolumn3 a
{
  display: none;
}
#textcorrectpagecolumn3 br
{
  display: none;
}
#textcorrectpagecolumn3 #textcorrectstatspagecontent h2
{
  margin-top: 40px;
}
.textcorrectpagepadding
{
  padding: 10px;
}
#homepagetextcorrectscoreboardjoin
{
  text-align: center;
  padding: 0.5rem 0;
}
.seemorestatslink
{
  padding: 0.5rem 0;
  text-align: center;
  margin: auto;
}

#textcorrectpagecolumn2 .textcorrectpagepadding
{
  padding-top: 0px;
}
#textcorrectpagecolumn2 #pagecontent
{
  padding-left: 0px;
  padding-right: 0px;
}
#textcorrectpagecolumn3 #pagecontent
{
  padding-left: 0px;
  padding-right: 0px;
}

div.completelycorrectstats > div > div
{
  margin: auto;
}
#textcorrectpagecolumn3 div.completelycorrectstatsentryvalue
{
  display: inline-block;
  padding-right: 0px;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

#textcorrectpagecolumn3 div.completelycorrectstatsentrytotal
{
  display: inline-block;
  padding-left: 0px;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

#textcorrectpagecolumn3 div.completelycorrectstatsentrylabel
{
  display: inherit;
  text-align: center;
  font-weight: bold;
  color: #606060;
}

#textcorrectpagecolumn3 div.completelycorrectstatsentrylabel::after
{
  content: ":";
}

#textcorrectpagecolumn3 div.completelycorrectstatsentrypercentage
{
  display: inherit;
  text-align:center;
}

#textcorrectpagecolumn3 div.divtable > div
{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1100px)
{

  #textcorrectpagecolumn2 ol.vlist li div.vlistentry
  {
    flex-direction: column;
  }

}