/*
 * The Chandra X-Ray Center (CXC) is operated for NASA:
 *   Smithsonian Astrophysical Observatory
 *   60 Garden Street
 *   Cambridge
 *   MA 02138
 *   USA
 * Email: cxcweb@head.cfa.harvard.edu
 *
 * Smithsonian Institution, Copyright 2023
 * All rights reserved. 
 */



/*
 * base on ciao.css #install h3 a rules ; should re-factor to support sharing
 * between form and a elements
 *
 * The look has moved to a more materials-like version (at least in terms
 * of drop shadows), but a lot of old styles are still left in for now.
 */

.bubblebutton {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 1.5em;
  /* want baseline numerals for the button */
  letter-spacing: 0.01em;
  text-align: center; 
  margin-bottom: 0.1em;
  margin-top: 0.1em; 
  cursor: pointer;
}


.bubblebutton a {
  background-color: #99CC66;
  color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  
  padding: 10px;
  text-decoration: none;
  text-align: center;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  
  /* currently not in #install: a shadow */
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
  
  /* to make sure the two use the same font, since forms can be
     set to a different font */
  font-family: Sans;

  margin-top: 0.5em;
  margin-bottom: 0.5em;
}


.bubblebutton a:hover{

  /* try to subtly darken the color to make it noticeable */
  color: rgba(0, 0, 0, 0.8);

  /* a more materials-like pressed "out" look */
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.75);
}


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


/* https://www.w3schools.com/css/css_tooltip.asp */
.tooltip {
  position: relative;
  display: inline-block;
  /* If you want dots under the hoverable text */
  padding-left: 0.25em; /* 5px; */

  /* border-left-style: dotted; */
  /* border-left-width: 1px; /\* 0.05em; *\/ */
  /* border-left-color: dimgrey; /\* grey45; *\/ */

  border-left-style: solid;
  border-image-source: linear-gradient(to bottom, #013300, #99CC66);
  border-image-slice: 1;
  border-image-width: 0.5;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  display: block;

  
  width: max-content;
  width: -moz-max-content;
  min-width: 32em;
  max-width: 72em;

  height: fit-content;
  height: -moz-fit-content;

  
  background-color: lightslategrey;
  opacity: 0.95;
  color: #fff;
  text-align: left;
  border-radius: 6px;

  padding-left: 0.4rem;
  padding-right: 1.2rem;
  padding-top: 1em;
  padding-bottom: 1em;
  
  font-size: 80%;

  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  top: -50%;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);


  transition-delay: 500ms;
}

/* /\* Add a triangular extension to the right side of the tooltip *\/ */
/**/
/* .tooltip .tooltiptext::after { */
/*   content: " "; */
/*   position: absolute; */
/*   top: 1.05em; /\* 50%; *\/ */
/*   left: 100%; /\* To the right of the tooltip *\/ */
/*   margin-top: -5px; */
/*   border-width: 0.5em 1.25em; */
/*   border-style: solid; */
/*   border-color: transparent transparent transparent lightslategrey; */
/* } */
/**/
/* .tooltip:hover + .tooltiptext{ */
/*    visibility: visible; */
/*    transition-property: visibility; */
/*    transition-delay: 50ms; */
/* } */


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  transition-delay: 350ms;
}


/****************************************************************/
/* 
   stylize the details element, and make it obvious its clickable by 
   changing the background color when the cursor hovers 

   https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/	
*/

details {
  border-radius : 3px;
  cursor : pointer;
  display : inline-block;
  position : relative;
  transition : 0.15s background linear;
 
  /* add the gradient bar to mark expandable location */
  padding-left : 0.25em; 
  border-left-style : solid;
  border-image-source : linear-gradient(to bottom, #013300, #99CC66);
  border-image-slice : 1;
  border-image-width : 1.25;
}

details:hover, details:focus {
  background : #96A6B7;                  
  opacity : 1;
}


/* undo the default arrow expansion icon */
/* summary {...} */
details > summary {
  background-image: url("/ciao/imgs/info.png"), url("../imgs/info.png");
  background-color: transparent;
  background-position: 2.5px 4.5px;
  background-size: 25px;
  background-repeat: no-repeat;

  display: block;
  list-style: none;
  padding: 10px;
  padding-left: 33px;
}

/* remove triangle point for summary, marker=content for Firefox/IE and -webkit-details-marker=display for Safari/Opera */
details > summary::-webkit-details-marker {
  display: none;
}

details > summary::marker {
  content: "";
}

details > div {
  cursor: auto;
  background-color: hsl(0, 30%, 95%);

  opacity: 1;
  
  /* width: max-content; */
  /* width: -moz-max-content; */
  /* min-width: 32em; */
  /* max-width: 72em; */

  width: calc(100% - 10px);
  
  height: fit-content;
  height: -moz-fit-content;

  padding-left: 0.4rem;
  padding-right: 1.2rem;
  padding-top: 1em;
  padding-bottom: 1em;

  border-radius: 10px;
  top: 35px;
  left: 0;
  right: 0;
  border-bottom: 4.5px dotted #558000;
  border-left: 4.5px dotted #558000; 
  border-right: 4.5px dotted #558000;
  border-top: 4.5px dotted #558000;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);
}

/* add triangular pop-out corner */
details > div:before {
  content: " ";
  border-bottom: 12px solid hsl(0, 30%, 95%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  left: 10px;
  position: absolute;
  top: -10px;
  width: 0;
}
 

/* animate expansion */
details[open] div {
  animation: animateDown 0.5s linear forwards;

  /* padding-left: 0.4rem; */
  /* padding-right: 1.2rem; */
  /* padding-top: 1em; */
  /* padding-bottom: 1em; */

  left: 0;
  right: 0;
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}



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


/*
  CSS for scrollable table, fixed header
  https://stackoverflow.com/a/63412885
*/
.scrolltable table.ciaotable table { width: 100%; }
.scrolltable table.ciaotable, thead, tbody tr { display: table; width: 100%; table-layout: fixed; }
.scrolltable table.ciaotable tbody { display: block; overflow-y: auto;
                                     table-layout: fixed; 
		  		     max-height: fit-content;
		  		     height: -moz-max-content;
				     height: 15em;
  				   }
.scrolltable table.ciaotable, th { text-align:center; font-size:90%; }
.scrolltable table.ciaotable, td { text-align:left; font-size:80%; /*padding-inline:1em;*/ }



/****************************************************************/
/*
  CSS for stylized blockquotes
*/

blockquote{
  font-size: 1.15em;
  width: 60%;
  margin-left: 100px;
  margin-right: 50px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: Serif;
  font-style: italic;
  color: #0C3E50; /* #404040; */
  padding: 1.2em 35px 1.2em 35px;
  border-left: 8px solid; /* #99CC66 ; */
  
  border-image-source: linear-gradient(to top, #99CC66, #037D03);
  border-image-slice: 1;
  border-image-width: 0.5;
  
  line-height: 1.6;
  position: relative;
  background: #EDEDED;
}

blockquote::before{
  display: block;
  font-family: Serif;
  content: "\201C" ;
  color: #037D03;
  font-size: 4em;
  position: absolute ;
  margin-left: 5px;
  left: -0.5rem;
  top: -1rem;
}

blockquote::after{
  display: block;
  font-family: Serif;
  content: "\201D";
  color:#99CC66;
  font-size:4em;
  position: absolute;
  margin-right: 5px;
  right: -0.1rem;
  bottom: -2.75rem;
}



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

/* using column cards: https://www.w3schools.com/howto/howto_css_column_cards.asp */

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float two columns side by side */
.column {
  float: left;
  width: 50%; /* four columns: 25%, three columns: 33%  */
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}

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

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  text-align: left;
  background-color: #f1f1f1;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

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