/*
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *calculus
 * Project Name: STANLEY - Free Bootstrap 3 Theme
 * Version: 1.0
 * URL: http://blacktie.co
 
 
 Release notes 7/13/23:
 changed background colors of checkpoint environment
 created solution environment
 changed checkpoint, example, and definition environments to have rounded corners
 made buttons prettier
 */

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

body {
  	background-color: #ffffff;
  	font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #000000;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #333;
    scroll-margin-top: 110px; /* adjusts view to account for top bar when using href to link */
}


h1 {
	font-size: 40px;
	margin-top: 30px;
	margin-bottom: 30px;
}

h2 {
	font-size:30px;
}

h3 {
	font-size: 25px;
}

h4 {
	font-size: 28px;
}



/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
    font-size: 20px;
}

.centered {
    text-align: center;
}

/* Links */
a {
    color: #0066CC;
	font-weight: 700;
    word-wrap: break-word;

    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
	text-decoration: underline;

}

a:hover,
a:focus {
    color: #CC0099;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #333;
    margin: 1em 1em;
    padding: 0;
}


.navbar {
	text-transform: uppercase;
	margin-bottom: 0px;
	text-align: center;
}

.navbar a{
	text-decoration: none;
}

.navbar-inverse {
	padding-bottom: 30px;
	padding-top: 30px;
}

.navbar-inverse {
	background-color: #1ABC9C;
	border-color: #1ABC9C;
}

.navbar-inverse .navbar-nav > li > a {
	color: #000000;
	text-decoration: none;
}

.navbar-inverse .navbar-nav > li > a:hover {
	color: white;
}

.navbar-brand {
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 2px;
}

.navbar-inverse .navbar-brand {
	color: #000000;
}

.navbar-inverse .navbar-toggle {
	border-color: transparent;
}

.progress-bar-theme {
  background-color: #1abc9c;
}


/* Helpers */

.mt {
	margin-top: 40px;
	margin-bottom: 40px;
}

.pt {
	padding-top: 50px;
	padding-bottom: 50px;
}


/* +++++ WRAP SECTIONS +++++ */

#ww {
	padding-top: 70px;
	padding-bottom: 70px;
	background-color: #f2f2f2;
}


#footer {
	background-color: #2f2f2f;
	padding-top: 50px;
	padding-bottom: 50px; 
	padding-left: 100px;
	padding-right: 50px;
}

#footer p {
	color: white;
}

#footer h5 {
	color: white;
	text-transform: uppercase;
	padding-bottom: 20px;
	font-size: 1em;
}

#footer a {
	color: #ADD6FF;
	text-decoration: underline;
}

#footer a:hover {
	color: #FFA3E8;
}


/* +++++ Color Wraps / Blog Page +++++ */

#grey {
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #f2f2f2;
}

#white {
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #ffffff;
}






/* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */
/* Effects also are controled by hover.zoom.js */
.zoom { 
    display:block; 
    position:relative; 
    overflow:hidden; 
    background:transparent url(../img/loader.gif) no-repeat center;
}


    .zoomOverlay {
        position:absolute;
        top:0; left:0;
        bottom:0; right:0;
        display:none;
        background-image:url(../img/zoom.png);
        background-repeat:no-repeat;
        background-position:center;
    }

.zoom2 {
	opacity: 1;
}

.zoom2:hover {
	opacity: 0.5;
}

/* glyphicon Configuration */

.glyphicon {
	font-size: 40px;
	color: #1abc9c;
}

/*========Sticky table of contents: COMMENT OUT TO MAKE NEW TOP NAV BAR ===========*/
/*main > nav {
	position:sticky;
	top: 2rem;
	align-self: start;
}*/


/* Keeping the following bit from the original nav bar for nice scrolling behavior */

html {
	scroll-behavior: smooth;
}

/* Sidebar Navigation */
/*.section-nav {
    margin: 2rem;
    padding-right: 10 px;
    padding-left: 10 px;
    border-right: 1px solid #efefef;
}*/

/*.section-nav a {
    text-decoration: none;
    display: block;
    padding: 1 rem 1 rem;
    color: #1abc9c;
    transition: all 50ms ease-in-out;*/ /* 💡 This small transition makes setting of the active state smooth */
/*}*/

/*.section-nav a:hover,
.section-nav a:focus {
    color: #666;
}*/

main {
    /*display: grid;                /* next 3 lines not needed since nav bar will be at the top */
    /*grid-template-columns: 15em 1fr;
    grid-gap: 1rem;*/
    max-width: 100em;
    width: 60%;
    margin: auto; /* changed from "1 auto" which doesn't work well in non-grid formats */

}

/*------------------------ new navbar stuff ----------------------------------*/

/* Style the navbar */
.navbar1 {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  top: 0;
  z-index:10; /*higher number to keep text from "ghosting" behind it*/
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  display: flex; 
  flex-wrap: wrap;
  /* align-items: center; */
}

/* Navbar links */
.navbar1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  /* text-align: center; */
  padding-top: 5px;
  padding-right: 20px;
  padding-bottom: 10px;
  text-decoration: none;
  font-size: .75em;
}

.navbar button {
    background-color:#fff
    color: #0a0a23;
    border:groove;
    border-radius:10px;
  }


.navbar1 a:hover {
	color: #1ABC9C;
}

/*------ adjusting the "jump to" locations to account for top navbar when using href ------*/

section {
	scroll-margin-top: 110px;
}


div {
	scroll-margin-top: 110px;
}

/* Create environment for licensing when license differs for different sections on page. */
.openstax {
	position: sticky;
	width: 80%;
	right: 10%;
	top: 0;
	background: white;
	border-width: 1px;
	border-style: solid;
	padding: 1em;
	font-size: 0.8em;
}



/*===========Create classes and counters for examples, checks, and definitions+===========*/

.examplebox{
  background-color: #DCDCDC;
  border-radius: 10px;
  padding: 10px ;

}

.exnum {
	font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #333;
    scroll-margin-top: 110px; /* adjusts view to account for top bar when using href to link */
	font-size: 30px;

}

.checknum {
	font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #333;
    scroll-margin-top: 110px; /* adjusts view to account for top bar when using href to link */
	font-size: 30px;
}

.checkbox{
  background-color: #e5fbf7;
  border-width:2px; 
  border-style:solid;
  border-radius: 10px;
  padding: 10px ;

}


.defbox{
  border-radius: 10px;
  padding: 10px ;
  border-color: #FBCEB1;
  border-width:6px;
  border-style: solid;
  font-color: #2E2E2E;
}

.importantbox{	/*Added 8/8/23 for super important notes*/
  background-color: #ffc2c2;
  border-radius: 10px;
  padding: 10px ;
}

.attribution {
	border-width:1px; 
	border-style:solid; 
	padding: 1em; 
	font-size:0.8em;
}

/* Counter for examples and checkpoints*/
body {
  counter-reset: ex ch;                       /* Set a counter named 'ex' and a counter named 'ch', and its initial value is 0. */
}

/* h2::before {
  counter-increment: ex;                   /* Increment the value of section counter by 1 */
  /* content: "Example " counter(ex)": ";    /* Display the word 'Example', the value of  */
                                                   /* ex counter, and a colon before the content */
                                                   /* of each h2 */ 
/* } */ 

.exnum::before {
  counter-increment: ex;                   /* Increment the value of section counter by 1 */
  content: "Example " counter(ex)": ";    /* Display the word 'Example', the value of 
                                                   ex counter, and a colon before the content
                                                   of each example header */
}

.checknum::before {
	  counter-increment: ch;                   /* Increment the value of checkpoint counter by 1 */
  content: "Checkpoint " counter(ch)": ";    /* Display the word 'Checkpoint', the value of 
                                                   ch counter, and a colon before the content
                                                   of each checkpoint header */
}


h4::before {
  counter-increment: ch;                   /* Increment the value of checkpoint counter by 1 */
  content: "Checkpoint " counter(ch)": ";    /* Display the word 'Checkpoint', the value of 
                                                   ch counter, and a colon before the content
                                                   of each h3 */
}


/*==========Make borders for tables============*/
table, th, td {
  border: 1px solid black;
  padding: 15px;
  text-align: center;
}

/*+========put gap in table==========*/
.gap {
    border: none;
    width: 30px; /* adjust the gap width here */
  }

/*=====more space in lists and bigger fonts======*/
ol 
{
line-height:200%;
    font-size: 20px;

}


ul 
{
line-height:200%;
    font-size: 20x;

}

/*============Change button appearance===========*/
button {
    top:50%;
    background-color:#fff
    color: #0a0a23;
    border:groove;
    border-radius:10px;
  }
  
/* ============Create a solutions class============= */
.solution {
	display:none;
	background-color: #FAFAFA;
	border-width:1px 1px 1px 7px; 
	border-style:solid; 
	border-radius: 10px;
	padding: 1em; 
	border-color: #CCC #CCC #CCC #1abc9c;
}

.solutionreveal {
	background-color: #f0f0f0;
	border-width:1px 1px 1px 7px; 
	border-style:solid; 
	border-radius: 10px;
	padding: 1em; 
	border-color: #CCC #CCC #CCC #1abc9c;
}

/*==============Create horizontal scroll bars for equations =============*/
mjx-container {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
}

/* ============Create a proofs class============= */
.proof {
	background-color: #f0f0f0;
	border-width:1px 1px 1px 7px; 
	border-style:solid; 
	border-radius: 10px;
	padding: 1em; 
	border-color: #CCC #CCC #CCC #FBCEB1;
}

/* ==========Make image scaling behave better from large to small displays */

/* img {
	width: 40%;
	height: auto;
} */

@media (max-width: 800px) {
	img {
		width: 80%; // Override width on smaller screens
	}
}

@media (max-width: 800px) {
	main {
		width: 95%; // Override main width on smaller screens
	}
}

img.custom-size {
	width:100px;
}

/* Skip to main content link for accessibility */
.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

/*---- trying to setup a search bar ----------*/
    #searchBar {
      display: none;
      margin-top: 10px;
    }

    #searchBar.show {
      display: flex;
      position: right;
      width: 100%;
    }





.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.navbar-nav > li {
  float: none;
}

.gcse-search {
  width: 100% !important;
  min-width: 200px; /* You can increase this */
}

.break {
  flex-basis: 100%;
  height: 0;
}

/*=============for revealing columns of tables===================*/
    #agraph + label {
      margin-right: 1em;
    }

    .agraph{
      visibility: hidden;
    }

    #bgraph + label {
      margin-right: 1em;
    }

    .bgraph{
      visibility: hidden;
    }

    #cgraph + label {
      margin-right: 1em;
    }

    .cgraph{
      visibility: hidden;
    }

    #dgraph + label {
      margin-right: 1em;
    }

    .dgraph{
      visibility: hidden;
    }

    #fullgraph + label {
      margin-right: 1em;
    }

    .fullgraph{
      visibility: hidden;
    }