/* Main container, media page break options, and button styling below are strongly influenced by 

* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getsk250eleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Set some colors */

:root {
    --bluegreen: hsl(192, 98%, 23%);
}

/********************
**** Using cd- prefixes to keep these CSS elements from overlapping with PreTeXt ****
*********************/

/**** Basic containers and media breaks at page level ****/

.cd-container {
    position: relative;
    width: 100%;
    max-width: 904px;  /* To match PreTeXt */
/*    margin: 20px auto 0px auto;
    padding: 0px 20px;  */

    margin: 0 auto 0 auto;
    padding: 0;
    
    box-sizing: border-box; }


/* 
@media (min-width: 300px) {
    .cd-container {
	width: 85%;
	padding: 0; 
    }
}


@media (min-width: 560px) {
    .cd-container {
	width: 80%;
    }
}

*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
    font-size: 62.5%; }
body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    /*    font-size: 10pt;  */    line-height: 1.6;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    /*  color: #222; */
}


/*   Mobile first ... (large screen modifications follow)
***  @media only screen and (max-width: 749px) ***
***  Small screen layouts ***
*/


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button,
button,
input[type="button"] {
    display: inline-block;
    height: 30px;
    padding: 0 10px;
    color: #222;
    font-family: inherit; /* Added from normalize.css */
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box; }




/*  Boxes 
__________________________________________________*/

.cd-logobox {
    color: #000;
    padding: 15px 0px 0px 0px;
    justify-self: stretch;
}

.cd-tightbox {
    color: #000;
    padding: 0px 0px 0px 0px;
    justify-self: start;
}


.cd-toc-navbox {
    color: #000;
    padding: 0px 0px 0px 0px;
}


.cd-centeredbox {
    color: #000;
    padding: 15px 0px 0px 0px;
    justify-items: center;
}

.cd-centeredbox-nopad {
    color: #000;
    padding: 0px 0px 0px 0px;
    justify-items: stretch;
}




/* Top of the wrapper for logo and title/author info 
_____________________________________________________*/

.cd-top-wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 50px 1fr;
    grid-template-areas:
	"cd-logobox cd-tightbox";
    border-top: 2px solid #ddd;
    border-bottom: 0px;
    border-right: 2px solid #ddd;
    border-left: 2px solid #ddd; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; 
    background-color: #fff; /* #fafafa;  */
    padding: 0px 20px 0px 20px;
    justify-self: center;   
}

/* Bottom of wrapper containing TOC and navigation buttons 
_____________________________________________________________*/

.cd-toc-wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
	"toc-dropdown page-navigation";  
    border-left: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    border-right: 2px solid #ddd; 
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;   
    background-color: #fff; /* #fafafa; */
    padding: 20px 0px 0px 0px;
/* new --- now content menu loses z-index */
//    position: sticky;
//    top: -20px;
//    z-index: 10;
//    overflow: auto;
}

.cd-toc-dropdown{
    grid-area: toc-dropdown;
    justify-self: start;}

.cd-page-navigation {
    grid-area: page-navigation;
    justify-self: end;}


/* Wrapper for main content 
______________________________*/

.cd-main-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #fff;
    padding: 20px 10px 0px 10px;
    padding: 20px auto 0px auto;
    justify-items: center;
    justify-self: center;
//    max-width: 600px;

}


/*  Modify pretext CSS for small screen */
@media screen and (max-width: 430px) {
  .main #content {
    /* Decrease the margins */
      //      margin: 30px 30px;
      margin: 0;
      max-width: 300px;
  }
}

.pretext-content .sagecell_evalButton {
    text-transform: none;
}

/*  End pretext modification */

/*  Summary link section 
________________________________*/



#cd-summary-links a {
    color: var(--bluegreen);
    background: #eee; /*hsl(192, 39%, 84%); */
    display: block;
    padding: .5em; /*padding: 0.5em 1em; */
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    margin: 5px 20px 0px 20px;
}


#cd-summary-links a:hover {
    color: #fff;
    background: var(--bluegreen);
}

#cd-summary-links ul,
#cd-summary-links ul li {
    display: grid;
    list-style-type: none; 
    min-width: 300px;
    padding-inline-start: 0px;
}

#cd-summary-links > ul {
    text-align: left;
}

/*  End summary link section */


/*  Footer layout 
__________________________*/


.cd-footer-wrapper {
    height: 50px;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 30px 1fr;
    grid-template-areas:
	"footer-pretext footer-return-to-top footer-mathjax";  
    border-radius: 5px; 
    padding: 20px 0px;
    margin: 0px auto 0px auto;
    min-width: 300px;
}

.cd-footer-pretext {
    grid-area: footer-pretext;
    justify-self: start;
}

.cd-footer-return-to-top {
    grid-area: footer-return-to-top;
    margin: 10px 0;
    justify-self: center;
    align-self: end;
}
.cd-footer-mathjax {
    grid-area: footer-mathjax;
    justify-self: end;
}



/* --------------------------------------------------------
 * Menu toggle and submenus.
 * ----------------------------------------------------- */

/* https://codepen.io/shshaw/details/gsFch */
/* CSS Drop-Down Menu Transitions */



#cd-toc-nav a {
    color: var(--bluegreen);
    background: #fafafa;
    display: block;
    padding: .25em .5em .25em .5em;
    text-decoration: none;
    font-weight: 600;
    margin: 0px;
    border-bottom: 1px solid var(--bluegreen);
}


/*
#cd-toc-nav a.shadebackground {
    background: #ddd;
}
*/

#cd-toc-nav a:hover {
    color: #fff;
    background: var(--bluegreen);
}


#cd-toc-nav ul,
#cd-toc-nav ul li {
    list-style-type: none; 
    margin: 0px;
    width: 255px;  /* This one is key to making items menu uniform width */
    padding-inline-start: 0px;
}
#cd-toc-nav > ul {
    text-align: left;
}

/*#cd-toc-nav ul li.shadebackground {
    background: #bbb;
    font-weight: 700;
    text-transform:uppercase;
}    
*/   

#cd-toc-nav ul li a {
    display: grid;
    width: 240px;
    grid-gap: 3px;
    grid-template-columns: 1fr 10fr;
    grid-template-areas:
        "toc-codenumber toc-content";
}

#cd-toc-nav ul li a.shadebackground {
    background: #ddd; /*hsl(192, 39%, 84%);  */
    font-weight: 700;
    text-transform:uppercase;
}

.cd-toc-codenumber {
    grid-area: toc-codenumber;
}
.cd-toc-content {
    grid-area: toc-content;

}



.cd-sub-menu-parent {
    position: relative;
}

.cd-sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-2em);
    z-index: -1;
}



.cd-sub-menu-parent:focus .cd-sub-menu,
.cd-sub-menu-parent:focus-within .cd-sub-menu,
.cd-sub-menu-parent:hover .cd-sub-menu {
    border: 2px solid  var(--bluegreen);
    border-radius:5px;
    visibility: visible;
    /* shows sub-menu */
    opacity: 1;
    z-index: 401; /* z-index: 1; need to beat the sagecells */
    transform: translateY(0%);
    /*    transform: translateX(-55px); for centered menu */

    transition-delay: 0s, 0s, 0s;
 }




/* .cd-page-navigation .small-screen{display: block;}
.cd-page-navigation .large-screen{display: none;} */
.cd-small-screen{display: block;}
.cd-large-screen{display: none;}

/*  End of small screeen layout 
_________________________________________________ */




/* 
* Changes grid layout for larger screens  
____________________________________________*/


@media only screen and (min-width: 750px) {

    /* .cd-page-navigation .small-screen{display: none;}
.cd-page-navigation .large-screen{display: block;} */

    .cd-small-screen{display: none;}
    .cd-large-screen{display: block;}
    
    
    .cd-toc-wrapper{
	grid-template-columns: 300px 1fr;
	grid-template-areas:
	    "toc-dropdown page-navigation";
    }
    
    .cd-toc-dropdown{
	justify-self: start;}
    
    .cd-page-navigation {
	justify-self: end;}

    .cd-footer-wrapper{
	width:590px;
    }


    .cd-main-wrapper {
	/*	border: 2px solid #f00; */
    }
    
    .cd-sub-menu-parent:focus .cd-sub-menu,
    .cd-sub-menu-parent:focus-within .cd-sub-menu,
    .cd-sub-menu-parent:hover .cd-sub-menu {
 /*I	transform: translateX(-2px);  */
    }

    #cd-summary-links a {
	margin: 5px 0px 5px 0px;
    }
    
    #cd-summary-links ul li {
	width: 500px;  
    }

    

    /* Buttons for navigation and TOC*/

    /* Larger buttons for large screens */    
    .button,
    button,
    input[type="button"] {
	display: inline-block;
	height: 32px;
	padding: 0px 25px; /*seems ineffective */
	color: #555;
	font-family: inherit; /* Added from normalize.css */
	text-align: center;
	font-size: .8em; /*11px; */
	font-weight: 600;
	line-height: 32px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box; }



    .cd-toc-navbutton {
	background-color: #eee; 
	color: black; 
	border: 1px solid var(--bluegreen);
	padding:  0px 24px 0px 24px;
    }

    .cd-toc-navbutton:hover {
	background-color: #fafafa;
	color: black;
    }

    /* End of Button */



}
/* End of large screen modification */






/* Generic Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}