@import "../pydatat-sphinx-theme.css";

a {
  color: #11557C;
  text-decoration: none;
}

a:hover {
  color:  #CA7900;
}

table.highlighttable {
  margin-left: 0.5em;
}

table.highlighttable td {
  padding: 0 0.5em 0 0.5em;
}

.simple li>p {
  margin: 0;
}

div.responsive_screenshots {
  /* Horizontally centered */
  display: block;
  margin: auto;

  /* Do not go beyond 1:1 scale (and ensure a 1x4 tight layout) */
  max-width: 640px;  /* at most 4 x 1:1 subfig width  */
  max-height: 120px; /* at most 1 x 1:1 subfig height */
}

/* To avoid subfigure parts outside of the responsive_screenshots  */
/* element (see <https://stackoverflow.com/q/2062258/>)            */
span.clear_screenshots { clear: left; display: block; }

div.responsive_subfig{
  float: left;
  width: 25%;  /* we want 4 subfigs in a row */

  /* Include content, padding and border in width. This should */
  /* avoid having to use tricks like "width: 24.9999%"         */
  box-sizing: border-box;
}

div.responsive_subfig img {
  /* Horizontally centered */
  display: block;
  margin: auto;

  /* Possible downscaling */
  max-width: 162px;  /* at most 1 x 1:1 subfig width  */
  max-height: 139px; /* at most 1 x 1:1 subfig height */

  width: 100%;
}

@media only screen and (max-width: 930px){
  /* The value of 1000px was handcrafted to provide a more or less */
  /* smooth transition between the 1x4 and the 2x2 layouts. It is  */
  /* NB: it is slightly below 1024px: so one should still have a   */
  /* row in a 1024x768 window                                      */

  div.responsive_screenshots {
      /* Do not go beyond 1:1 scale (and ensure a 2x2 tight layout) */
      max-width: 324px;  /* at most 2 x 1:1 subfig width  */
      max-height: 278px; /* at most 2 x 1:1 subfig height */
  }

  div.responsive_subfig {
      width: 50%;  /* we want 2 subfigs in a row */
  }
}

/* bullet boxes on main page */
div.bullet-box-container {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
}

div.bullet-box {
  flex-grow: 1;
  width: 28%;
  margin: 0.4em;
  padding: 0 1em;
  background: #eff9ff;
}

div.bullet-box p:first-of-type {
  font-size: 1.4em;
  text-align: center;
}

div.bullet-box ul {
  padding-left: 1.2em;
}

div.bullet-box li {
  padding-left: 0.3em;
  margin-bottom: 0.3em;
}

@media only screen and (max-width: 930px){
  div.bullet-box {
      flex: 0 0 90%;
  }
}

/* community items on main page */
div.box {
  display: flex;
  flex-flow: row wrap;
}

div.box-item {
  flex: 0 0 45%;
  padding: 4px;
  margin: 8px 12px;
}

div.box-item img {
  float: left;
  width: 30px;
  height: 30px;
  fill: #888;

}
div.box-item p {
  margin: 0 0 0 50px;
}

div.box-item ul {
  margin: 0 0 0 50px;
  padding-left: 20px;
}

hr.box-sep {
  margin: 1em 2em;
}

@media only screen and (max-width: 930px){
  div.box-item {
      flex: 0 0 90%;
  }
}


/* multi colunm TOC */
.contents ul {
  list-style-type: none;
  padding-left: 2em;
}

.contents > ul {
  padding-left: 0;
}

.multicol-toc > ul {
  column-width: 250px;
  column-gap: 60px;
  -webkit-column-width: 250px;
  -moz-column-width: 250px;
  column-rule: 1px solid #ccc;
}

.multicol-toc > li {
     /* break inside is not yet broadly supported, but we just try */
  break-inside: avoid-column;
  -moz-break-inside: avoid-column;
  -webkit-break-inside: avoid-column;
}

.contents > ul > li > a {
  font-size: 1.0em;
}


.mpl-button {
  background: #11557C;
  font-weight: normal;
  display: inline-block;
  padding: 0 1em;
  line-height: 2.8;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  z-index: 1;
  transition: background .25s ease;
}

.mpl-button:hover, .mpl-button:active, .mpl-button:focus {
  background: #003c63;
  outline-color: #003c63;
}


/* Hide red ¶ between the thumbnail and caption in gallery

Due the way that sphinx-gallery floats its captions the perma-link
does not float with it.
*/
.sphx-glr-thumbcontainer p.caption:hover > a.headerlink{
  visibility: hidden;

}

/* slightly reduce horizontal margin compared to gallery.css to
* get four columns of thumbnails in the pydata-sphinx-theme. */
.sphx-glr-thumbcontainer {
  margin: 5px 2px;
}

/* workaround: the default padding decenters the image inside the frame */
.sphx-glr-thumbcontainer .figure {
  padding: 0;
}

table.property-table th,
table.property-table td {
  padding: 4px 10px;
}

.sidebar-cheatsheets, .sidebar-donate {
  margin: 2.75rem 0;
}

.sidebar-donate .mpl-button {
  /* fix width to width of cheatsheet */
  width: 210px;
}

/* Two columns for install code blocks */
div.twocol {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  gap: 20px;
}

div.twocol > div {
  flex-grow: 1;
  padding: 0;
  margin: 0;
}
