@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');
/* @import url('https://fonts.googleapis.con/css?family=ITC Zapf Dingbats:400'); */


/*      VARIABLES      */
:root {
	--cccgreen: #5D9632;
	--sepblue: #0C4BA0;
	--dciorange: #F4953C;
	--leftmargin: 54px;
	--trapwidth: 190px;
}

/*  	NORMALIZATION	TODO: put in separate file */
/* 		VALUES taken from bootstrap (mostly _reboot.scss) */
*, ::after, ::before {
    box-sizing: border-box;
}
a {
	color: #007bff;
    text-decoration: none;
    background-color: transparent;
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-bottom: .5rem;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}
img {
    vertical-align: middle;
    border-style: none;
}
/* 	END NORMALIZATION */

body {
 	background-color: white;
 	margin: 8px 0px;
 	font: 12pt Roboto, Avenir, Arial, sans-serif;
}
h1 {
	font: 1.75em Ubuntu Condensed, Avenir, Source Sans Pro, sans-serif;
	margin-top: 6px;
	margin-left: 78px;
}
h2 {
	font: 1.75em Ubuntu Condensed, Avenir, Source Sans Pro, sans-serif;
	margin-top: 0;
	margin-left: 78px;
}
h3 {
	font-size: 1.25em;
	margin-top: 0;
	margin-left: 78px;
}
.h-zero {
	font-size: 3.2em;
}
.subhead {
	font-size: 1.25em;
	font-weight: bolder;
}
.tws-box {
	margin-left: -35px;
	padding-bottom: 1em;
}
.tws-box img {
	border: 1px solid black;
	margin-right: 0.2em;
	margin-top: 20px;
}
ul {
	list-style-type: disc;
}
.questions {
	list-style: none;
}
/*  for sublists in Advance Preparation (see K.3) */
#sublist-a {
	list-style: lower-alpha;
	margin-left: 10px;
	padding-left: 10px;
}
#sublist-a li {
	margin-bottom: 0;
	padding-left: 10px;
}
#sublist-i {
	list-style: lower-roman;
	margin-left: 10px;
	padding-left: 10px;
}
#sublist-i li {
	margin-bottom: 0;
}
.overview, .flow, .seq-narr, .ddd-prog, .sciencetalks, .rubric, .sep-k2, .support-strategies, .credbgref, .assessment-system, .scaffolds-diff, .refs {
    margin-left: 20px;  /* 54px */
    max-width: 800px;
    width: 95%;
}
.seq-narr, .ddd-prog, .sciencetalks, .rubric, .sep-k2, .support-strategies, .assessment-system, .scaffolds-diff, .refs {
	margin-top: 1.25em;
}
.overview h1, .flow h1, .credits h1, .background h1, .references h1 {
	margin-left: 0px;
	color: #0C4BA0;
}
.refs h1 {
	margin: 0 0 0.5em 1.25em;
	color: #0C4BA0;
}
.seq-narr h1 {
	margin: -20px 0 0.5em 1.25em;
}
#performance-standards h1 {
	margin: 0 0 0.5em 1.25em;
}
.seq-narr h2, .sep-k2 h2, .sciencetalks h2 {
	color: #5D9632;
	margin: -25px 0 0.5em 2.25em;
}
.ddd-prog h1, .assessment-system h1, .scaffolds-diff h1 {
	margin: -20px 0 0.5em 1.25em;
}
.sciencetalks h1, .rubric h1, .sep-k2 h1, .support-strategies h1 {
	margin: -20px 0 0.5em 1.25em;
}
.credits, .background, .references {
	margin-left: 24px;
}
.credits h3, .credits p, .background p, .references p {
	margin-left: 0px;
}
.standards-table {
	border: none; 
	margin-left: 25px;
}
.standards-table th {
	width: 13%;
	vertical-align: top;
}
.standards-table td {
	padding-bottom: 10px;
}
#ovrvu-text {
	margin-top: -0.5em;
}
#conceptmap {
 	border: 3px solid black; /* #5D9632;  */
 	border-radius: 25px;
 	padding: 7px;
 	width: 101.2%;
 }	
 #conceptmap8 { /* Grade 8  */
 	overflow-x: scroll;
 	border: 1px solid black;
 	padding: 5px;
 }
 #conceptmap8 img {
 	height: 700px;
 }
.icon {
	float: left;
}
.stds-icon {
	float: left;
	margin-left: var(--leftmargin);
}
#header { 
	margin-left: 20px; /* var(--leftmargin); */ 
	margin-top: 25px;
}
#headerBox {
	height: 78px;
	margin-left: var(--leftmargin);
}
#headerBox2 {
	height: 138px;
	margin-left: var(--leftmargin);
}
#nav-bar {
	background-color: #5D9632;
	height: 1.5em;
	width: 812px;
	margin-left: var(--leftmargin);
	margin-bottom: 1em;
}
#nav-bar a {
	color: white;
}
#prev-lesson {
	margin-left: 10px;
}
#next-lesson {
	float: right;
	margin-right: 10px;
}
.tabcontent {
	display: none;
	margin-left: var(--leftmargin); /* 54px; */
	width: 790px;
}
.tabcontent h3 {
	font-weight: normal;
}
#overview {
/* 	margin-left: 54px; */
	margin-top: 15px;
/* 	width: 790px; */
}
#procedure {
	margin-top: 25px;
/* 	width: 790px; */
}
#tools {
	display: block;
/* 	width: 790px; */
}
#tools h3 {
	margin: 0 20px;
}
#tools table {
	border: none;
	width: 790px;
}
#tools tbody {
	vertical-align: top;
}
#toolbox {
	margin-top: 25px;
}
#toolbox h2 {
	color: #0C4BA0; /* blue */
	margin-left: 54px;
}
.text-comp h1 {
	color: #5D9632;
	margin-left: 0;
}
.overview-component {
    padding-bottom: .4em;
}
.text-comp {
	margin-left: 74px; 
}
.text-comp-para {
	margin-top: -12px;
	width: inherit;
}
#storylink {
	margin-top: 25px;
	width: inherit;
}
#storylink h1 {
	color: #0C4BA0;
}
.collapsible {  /* for Overview section on index.html (if necessary) */
/* 	max-height: 130px; */
	overflow: hidden;
}
#storytext {
	margin-left: 78px;
	padding-left: 4px;
	max-height: 150px;
	overflow: hidden;
}
#storytext-showall {
	margin-left: 78px;
	padding-left: 4px;
}
#more-story {
	color: blue;
	text-decoration: none;
	cursor: pointer;
    margin-left: 78px;
    padding-left: 4px;
}
#storytext h2 {
	margin-left: 0;
}
#tmp-arrow {
    margin-top: 42px;
    margin-left: 35px;
}
#tmp {
	display: none;
}
.seq-narr, .ddd-prog, .assessment-system, .scaffolds-diff {
	margin-top: 1em;
}
#seq-narr-hl {}
.lessons { margin-top: 0.75em; }
.lessons p { margin-top: 0; }
#lesson-hl {}
.lesson-link {
    float: right;
    margin: -37px 31px 0 0;
}
#more-tmp, #more-seqnarr, #more-less1, #more-less2, #more-less3, #more-less3a, #more-less4, #more-less5, #more-less6, #more-less7, #more-less8, #more-less9, #more-less10, #more-dddprog, #more-scitalks, #more-rubric, #more-sep-k2, #more-strategies, #more-assessment, #more-scaffolds {
	color: #0C4BA0;
	text-decoration: none;
	cursor: pointer;
    margin-left: 78px;
    padding-left: 4px;
}
#more-perf-stds, #more-ovrvu {
	color: #0C4BA0;
	text-decoration: none;
	cursor: pointer;
}
#more-credits {
	cursor: pointer;
}
#narrative, #lesson1, #lesson2, #lesson3, #lesson3a, #lesson4, #lesson5, #lesson6, #lesson7, #lesson8, #lesson9, #lesson10, #progressions, #scitalks, #sepk2-table-div, #strategies, #rubric-table-div, #credits, #perf-stds, #assessment, #scaffolds {
	display: none;
	margin-left: 37px;
}
#narrative h3, #progressions h3 {
	margin-left: 0;
}
.closed-tri-blue {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 26px solid #0C4BA0; /* blue */
	float: left;
}

.closed-tri2-blue {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid #0C4BA0; /* blue */
    float: left;
    margin-top: 4px;
}

.closed-tri-green {
	margin-left: 36px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid #5D9632; /* green */
	float: left;
}
.closed-tri2-green {
	margin-left: 5px;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 26px solid #5D9632; /* green */
	float: left;
	margin-right: 8px;
	margin-top: 7px;
}
.closed-tri-black {
/*     margin-left: 53px; */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid black;
    float: left;
    margin-top: 2px;
}
#credits-arrow {
	margin-left: 36px;
}
.closed-tri2-black {
    margin-left: -40px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid black;
    float: left;
    margin-top: 0;
}
#tools-arrow {
	margin-left: 20px;
	margin-top: 2px;
}
.open { transform: rotate(90deg); }

#ngss, #ccss, #cal-eld, #cal-epc, #engage, #engage1, #engage2, #explore, #explore1, #explore1a, #explore2, #explore3, #explore4, #explain, #explain1, #explain2, #explain2a, #explain2b, #explain3, #explain4, #elaborate, #evaluate, #extend, #references, #literacy, #accomm {
	display: none;
}
#more-ngss, #more-ccss, #more-cal-eld, #more-cal-epc {
	cursor: pointer;
}
#more-engage, #more-engage1, #more-engage2, #more-explore, #more-explore1, #more-explore1a, #more-explore2, #more-explore3, #more-explore4, #more-explain, #more-explain1, #more-explain2, #more-explain2a, #more-explain2b, #more-explain3, #more-explain4, #more-elaborate, #more-evaluate, #more-extend, #more-tools, #more-references, #more-literacy, #more-accomm {
	cursor: pointer;
}
/* 	COLLAPSIBLE DIVS FOR GRADE 8 */
#stage, #intro-art, #refine, #iddata, #gather, #context, #doc, #review, #elicit, #expert, #sampling, #makesense, #feedback, #logs, #graph, #fstory, #groups, #part2a, #part2b, #group, #check, #impact, #scenario, #verify, #global, #final-exp, #share, #lens, #think, #brainstorm, #target, #revise, #reason, #psa {
	display: none;
}
#more-stage, #more-intro-art, #more-refine, #more-iddata, #more-gather, #more-context, #more-doc, #more-review, #more-elicit, #more-expert, #more-sampling, #more-makesense, #more-feedback, #more-logs, #more-graph, #more-fstory, #more-groups, #more-part2a, #more-part2b, #more-group, #more-check, #more-impact, #more-scenario, #more-verify, #more-global, #more-final-exp, #more-share, #more-lens, #more-think, #more-brainstorm, #more-target, #more-revise, #reason, #more-psa {
	cursor: pointer;
}
#refs h1, #accommodations h1 {
	margin-left: 25px;
}
#references p {
	margin-left: 78px;
}
#accommodations p {
	margin-left: 28px;
}
#dl-this-lesson {
    height: 49px;
    position: absolute;
    left: 727px;
}
#dl-lesson1 {
    height: 49px;
    position: absolute;
    left: 735px;
}
.last-para {
	margin-bottom: 0;
}
/***********************/
/*    TABLE STYLES IN tables.css */
/***********************/
.time, .materials, .adv-prep {
/* 	margin-left: 54px; */
	margin-top: 25px;
	width: inherit;
}
.time h1, .materials h1, .adv-prep h1, #procedure h1 {
	color: #0C4BA0;
}

#basketballs {
	text-align: center;
}
#basketballs img {
	margin-top: 0;
	width: 60%;
}

.str-out {   /* strikeout */
	text-decoration: line-through;
}

.materials h4, .materials p {
	margin-left: 78px;
}
.time p, .materials ul, .materials p, .adv-prep ol, .adv-prep p {
	margin-left: 78px;
}
.materials ul ul {
	margin-left: 0;
}
.question-prompt {
    font-style: italic;
    margin-top: .75em;
}
.proc-hdr {
	margin-top: 0;
	margin-left: 20px;
}
#procedure h2 {
	font-weight: bolder;
	margin-left: 0;
	margin-top: 1.2em;
	margin-bottom: .1em;
}
#procedure h3 {
	margin-bottom: .1em;
	margin-left: 25px;
}
.procedure-steps {
	margin-left: 35px;
	padding-inline-start: 15px;
	line-height: 1.5em;
}
.procedure-steps8 {
	margin-left: 45px;
	padding-inline-start: 15px;
	line-height: 1.5em;
}
.procedure-steps li, .adv-prep li, .procedure-steps8 li {
	margin-bottom: 1em;
}
/* 
#explore1a-steps {
	margin-left: 35px;
	padding-inline-start: 15px;
	line-height: 1.5em;
	list-style: none;
	counter-reset: elementcounter;
	padding-left: 40px;
	grid-gap: 1rem;
}
#explore1a-steps li::before {
	content: counter(elementcounter) "a. ";
	counter-increment: elementcounter;
}
#explore1a-steps li {
	margin-bottom: 1em;
}
 */
.objective {
	font-style: italic;
	font-size: 1.25em;
}
.teacher-note, .teacher-note2 {
	margin-left: 8px;
	border: 5px solid #5D9632;
	border-right: transparent;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	margin-bottom: 1em;
    margin-right: -20px;
}
.teacher-note2 {
	margin-left: 60px;
}
.teacher-note h2, .teacher-note2 h2  {
	margin-left: 0 !important;
	margin-top: 0 !important;
	padding: 12px;
	font-weight: bolder;
	font-size: 1.25em;
	color: #939597;
	letter-spacing: 4px;
}
.teacher-note-txt {
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0 0 12px 12px;
}
.teacher-note h4 {
	margin-left: 12px;
}
.link-dl-tool {
	text-decoration: underline;
	padding: 0; /* 25px 0 25px 0; */
	vertical-align: top;
}
.icon-dl-tool {
	/* width: 130px; */
	border: 1px solid black;
}
/* 
#icon-dl-tool1 {
	float: right;
	margin-top: -115px;
	width: 130px;
}
#icon-dl-tool2 {
	float: right;
	width: 130px;
	margin-top: -115px;
}
 */
/* to add border around download icon, change these values:
	.tab -- margin-top 
	.tab -- height
	#tabbar-ext -- height
	.trap -- border-bottom
	.trap.active -- border-bottom

	IN ADDITION, add padding to .tab #XXX-icon to keep it centered vertically
	ALSO, change JS at bottom of each lesson's page to appropriately place the DL-icon in the toolbar
*/
.tab { 
	overflow: hidden;
	border: none; /* 1px solid #0C4BA0; */  /* blue */
	/* background-color: #0C4BA0; */  /* blue */
    margin-left: var(--leftmargin);
    margin-top: -55px;
    width: 810px;
    height: 55px;
}
#tabbar-ext {
    /* overflow: hidden; */
    /* background-color: #0C4BA0; */
    margin-left: var(--leftmargin);
    /* margin-top: -49px; */
    width: 810px;
    height: 0;
    border-bottom: 55px solid #0c4ba0;
    border-right: 22px solid transparent;
}
.tablinks { }
.tab a {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	font: 18px "Roboto", Quicksand, sans-serif;	
	color: white !important;
	padding-top: 2px;
}
.tab a:hover {
/* 	background-color: #9d9dd6; */
	color: #edece4;
}
/*  .tab button.active {
	background-color: #9bcd66;   /* lighter green *\
} */
.trap {
	border-bottom: 55px solid #0C4BA0;
	border-right: 25px solid transparent;
	height: 0;
	width: var(--trapwidth); /* 150px; */
	display: inline-block;
}
.trap #overview-icon {
	padding-left: 5px;
	padding-top: 2px;
}
.trap #procedure-icon {
	padding-top: 4px;
}
.trap #toolbox-icon {
	padding-top: 3px;
}
.trap.active {
	border-bottom: 55px solid #9bcd66;   /* lighter green */
}
.pdf-dl img { 
	border: 1px solid black; 
	margin-bottom: 15px;
}
#all {
	position: absolute;
    margin-top: -115px;
    left: 646px;
}
#intro {
/* 	position: absolute; */
	float: right;
	left: 685px;
	padding: 0 10px;
}
#lesson-downloads {
	margin-left: 36px;
}
#lesson-downloads a { 
	border-right: 40px solid transparent; 
}
#lesson-downloads8 {  /* Grade 8  */
	margin-left: 36px;
}
#lesson-downloads8 a { /* Grade 8  */
	border-right: 20px solid transparent; 
}
#lesson-one, #lesson-two, #lesson-three {
	float: right;
	position: relative;
	margin-top: -100px;
}

/* Styling for popup box in Grade 1, Lesson 1 */

.popup {
	display: none;
	position: fixed; /* maybe not? */
	z-index: 1;
	left: 60px;
	top: 0;
	width: 375px;
	height: auto;
	overflow: auto;
}
.popup-content {
	background-color: #d9eccb; 
	margin: 25% auto;
	padding: 5px;
	border: 1px solid black;
	width: auto;
}
.popup-content h2 {
	margin-left: 10px;
}
.popup-content p {
	margin-left: 25px;
}
#scaffolds {
	
}
#scaff-link {
	color: #007bff;
	cursor: pointer;
}
.arrow-list { /* list styles for Grade 8 */
	list-style: none;
}
.arrow-list li {
	position: relative;
}
.arrow-list li:before {
	content: '';
	position: absolute;
	border-right: 3px solid #F4953C; /* orange */
	border-bottom: 3px solid #F4953C; /* orange */
	width: 10px;
	height: 10px;
	top: 0.8em; /* calc(50% - 4px); */
	left: -20px;
	transform: translateY(-50%) rotate(-45deg);
}
.square-list, .square-list3 {
	list-style: none;
}
.square-list li:before {
	content: '';
	position: absolute;
	border: 2px solid black;
	transform: none;
	width: 10px;
	height: 10px;
	margin-top: -0.4em; 
}
.square-list2 {
	list-style: none;
	margin-left: 3em;
}
.square-list2 li:before {
	content: '';
	position: absolute;
	border: 2px solid black;
	transform: none;
	width: 10px;
	height: 10px;
	margin-top: 0.5em; 
	margin-left: -20px;
}
.square-list3 li {
	margin-bottom: 0;
}
.square-list3 li:before {
	content: '';
	position: absolute;
	border: 2px solid black;
	transform: none;
	width: 10px;
	height: 10px;
	margin-top: 0.5em; 
	margin-left: -20px;
}
.script {
	margin-left: 75px;
}
.script p {
	margin-bottom: 0;
}
.role {
	font-weight: bold;
/* 	margin-left: 35px; */
}
.lines {
	display: inline-block;
    margin-left: 70px;
    margin-top: -1.5em;
    vertical-align: top;
}
.close {
	color: darkgray;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
/* 
<div id="scaffolds" class="popup">
	<div class="popup-content">
	<span class="close">&times;</span>
 */

.spacer {
	height: 2em;
}
#footer {
	font-size: 10pt;
	line-height: 1.5em;
	padding-top: 9px;
	margin-left: var(--leftmargin); 
}


/*   SLICK STYLES */
.slick-list { padding-bottom: 15px; }
.slider-pic {
/* 	margin-left: 54px; */
	/* box-shadow: 8px 8px 15px #999; */
}
#photo-slider {
	margin-left: var(--leftmargin);
	width: 800px;
}
.dl-icon-cell {
	text-align: center;
	padding-bottom: 1.5em;
}
.dl-icon-cell a {
	color: black;
}
figure {
	float: right;
	text-align: center;
	margin-top: 0;
}
figure img {
	border: 1px solid black;
}
/* figure */ img:nth-child(n+2) {
	margin-top: 20px;
}
figcaption {
	font-size: 9pt;
	line-height: 14pt;
}
figcaption2 {
	font-size: 1.2em;
}
figcaption3 {
	font-size: 1em;
}
/*  END OF SLICK STYLES */


/* NGSS 3-D learning:
	SEP (Science and Engineering Practices) (Navy)
	DCI (Disciplinary Core Ideas) (Orange)
	CCC (Cross-cutting Concepts) (Green)
*/
.sep {
	color: #0C4BA0; /* blue */
}
.dci {
	color: #F4953C;  /* orange */
}
.ccc {
	color: #5D9632;  /* green */
}
.clarify {
	color: #c41f2f; 
}