/*  These styles are the defaults for both the dwt templates and the editable content  */
:root {
    --background-white: #fff;
    --text-dark: #000;
    --accent-gray: #E8E0D8;
    --primary-blue: #214C7A;       /* rich, saturated blue for headings */
    --secondary-blue: #3B6BAE;     /* lighter, more readable blue for subheadings */
    --text-on-accent: #111;
    --accent-coral: #D84315;       /* bright coral */
    --secondary-coral: #B33A30;    /* brighter cranberry for better contrast */
}

ul { list-style-image: url('images/dltkbullet1.gif'); margin-top: 1.2em; padding-bottom: 1em; padding-left: 1.5em; margin-left: 0; box-sizing: border-box; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }

ul.materialsList li { padding-bottom:0.4em; }

ul ul { list-style-image: url('images/dltkbullet2.gif'); padding-left: 1.6em; max-width: 100%; }

ul ul ul { list-style-image: url('images/dltkbullet3.gif'); padding-left: 1.8em; max-width: 100%; }

li { list-style-position: outside; padding-bottom:3em; line-height: 2; }

/* Links */
a:link { color: var(--secondary-coral); }   /* cranberry for unvisited links */
a:active { color: var(--secondary-blue); }  /* muted blue for active */
a:visited { color: var(--primary-blue); }  /* darker blue for visited */
a:hover { color: var(--accent-coral); }    /* brighter coral on hover */

/* Body */
body { font-size: 1.2em; line-height: 2.2; background-color: var(--background-white); color: var(--text-dark); font-family: 'Roboto','Nunito','Segoe UI','Helvetica Neue',Arial,sans-serif; }

/* Headings */
h1 { font-size: 2em; line-height: 1.2; padding-top: 1em; padding-bottom: 1.5em; color: var(--primary-blue); font-family: 'Roboto Slab','Nunito','Segoe UI','Helvetica Neue',Arial,sans-serif; font-weight: normal; font-style: normal; }
h2 { font-size: 1.7em; line-height: 1.2; padding-top: 1em; padding-bottom: 1.5em; color: var(--accent-coral); font-weight: normal; font-style: normal; }
h3 { font-size: 1.4em; line-height: 1.3; color: var(--secondary-blue); font-weight: normal; font-style: normal; }
h4 { font-size: 1.2em; line-height: 1.3; color: var(--secondary-blue); font-weight: normal; font-style: normal; }
h5 { font-size: 1em; line-height: 1.3; color: var(--primary-blue); font-weight: normal; font-style: normal; }
h6 { font-size: 0.875em; line-height: 1.3; color: var(--primary-blue); font-weight: normal; font-style: normal; }

p { padding-bottom:1.25em; }

table        { line-height:110%; border:0; width:85%; margin: 0 auto }
td  	     { min-width:200px; padding:20px }

img { border: 0; max-width: 100%; height: auto; max-height: 100%; }

/*  These styles are for the dwt templates  */

div#container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 0.3em auto;
    box-sizing: border-box;
    gap: 1em; /* spacing between columns */
}

.leftSideBar {
    flex: 0 1 70px;  /* do not grow, can shrink */
    padding-right: 0.6em;
    background-color: var(--background-white);
    text-align: left;
    line-height: 1;
    box-sizing: border-box;
}

article#content, article#contentLarge {
    flex: 1 1 auto;   /* content grows to take up remaining space */
    padding: 0 2em;
    border-right: 0.2em solid var(--accent-gray);
    box-sizing: border-box;
    min-width: 250px;
}

.rightSideBar {
    flex: 0 1 100px;  /* fixed-ish, doesn’t grow */
    text-align: center;
    box-sizing: border-box;
}


#fullScreen{padding:0 3%;} 

#SidebarInsert{width:150px; margin:80px 5px; background-color:var(--background-white); border:0.06em solid var(--accent-gray); box-shadow:0 0.3em 0.5em rgba(0,0,0,0.15); border-radius:0.25em; box-sizing:border-box; text-align:center; font-size:16px; line-height:1.4;} 
#SidebarInsert img{width:100%; height:auto; display:block; margin:0 auto 10px; object-fit:contain;} 

.topBottomBorder{width:100%; line-height:2;} 
.upper-right300x600{float:right; margin:15px 0px 20px 20px; vertical-align:text-top;} 
div#homeButtonHide{float:left; text-align:left; width:220px; background-color:var(--background-white); overflow:hidden; display:inline; box-sizing:border-box;} 
div#homeText{float:left; padding:0.6em; width:100px; text-align:center; border:1px solid var(--primary-blue); display:none; box-sizing:border-box;} 
div.topButtons{float:left; width:100px; text-align:center; overflow:hidden; padding-top:1.5em; box-sizing:border-box;} 
div#socialMedia{float:right; width:275px; text-align:center; overflow:hidden; padding-top:0.9em; box-sizing:border-box;} 
div#adBanner{width:100%; text-align:center; min-height:90px; box-sizing:border-box;} 
div#searchBox{float:left; width:300px; box-sizing:border-box;} 
div#searchText{float:left; padding:0.6em; width:100px; text-align:center; border:1px solid var(--primary-blue); display:none; box-sizing:border-box;} 
nav.navigation{clear:both; background-color:var(--secondary-blue); padding:0; margin:auto; text-align:center; overflow:hidden; box-sizing:border-box;} 
div.adSmallScreen{background-color:var(--background-white); width:100%; text-align:center; display:none; box-sizing:border-box;}


/*  These styles are for the editable content  */

nav.topNav{padding:15px 0;margin:30px 0 0;font-size:medium;width:100%;background-color:var(--accent-gray);line-height:200%}
	.topNav a{text-decoration:none;color:var(--secondary-coral);margin-right:2rem;display:inline-block;line-height:1.5;padding:.4em .8em;border-radius:.6em;transition:color .25s ease,background-color .25s ease,transform .25s ease,box-shadow .25s ease}
	.topNav a:last-child{margin-right:0}
	.topNav a:hover{background-color:var(--secondary-coral);color:#fff;box-shadow:0 4px 8px rgba(0,0,0,.2);transform:scale(1.3);z-index:10;position:relative}

nav.leftNav{float:left; width:10%; overflow:hidden; font-size:medium; text-align:left; margin-right:20px; line-height:120%; padding:20px 20px 20px 0; min-height:1500px; background-image:url(/images/fade-grey.jpg);} 
header#mainHeader{margin-bottom:10px;} 
#author{font-size:medium; font-style:italic;} 
h3#materials{padding-top:20px;} 
.pageTitleShrink{font-size:0.5em; font-family:'Roboto Slab','Nunito','Segoe UI','Helvetica Neue',Arial,sans-serif; line-height:1.2;} 
a.printVersionLink {
    background-color: var(--secondary-coral);
    color: var(--text-on-accent); /* dark text on cranberry */
    padding: 0.75em 1em;
    text-decoration: none;
    border-radius: 0.3em;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    position: relative;
    z-index: 10;
}

a.printVersionLink:hover {
    background-color: var(--accent-coral);
    color: var(--text-on-accent); 
}

.printVersionLink:hover {
    background-color: var(--accent-coral); /* brighter coral on hover */
    color: var(--background-white); /* keeps text visible */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* subtle lift effect */
}

.indexHighlight{clear:both; background-color:var(--accent-gray); font-weight:bold; font-size:medium; width:100%;} 
.indexImage{float:left; text-align:center; margin:0 20px; min-width:250px; max-width:300px; min-height:100px; vertical-align:middle;} 
.indexText{float:left; margin:0; min-width:150px; max-width:550px; min-height:100px; vertical-align:middle;} 
div#indexContainer{display:flex; justify-content:space-between; width:100%; padding-top:1em; box-sizing:border-box;} 
div#indexLeft{flex:0 0 49%; background-color:var(--background-white); padding:1em; border:0.06em solid var(--accent-gray); box-shadow:0 0 0.3em rgba(0,0,0,0.05); border-radius:0.25em; box-sizing:border-box; line-height:1.5;} 
#indexLeft h3{margin-top:0.9em; margin-bottom:0.4em; font-size:1.1em; line-height:1.5;} 
div#indexRight{flex:0 0 49%; background-color:#f5f5f5; padding:1em; box-sizing:border-box; line-height:1.6; border:none; box-shadow:none; border-radius:0;}

.textLarge{font-size:1.2em; line-height:1.3;} 
.textMedium{font-size:0.9em; line-height:1.3;} 
.textSmall{font-size:0.8em; line-height:1.3;} 
.textStory{font-size:1.2em; line-height:1.6; padding-bottom:1.25em;} 
.indentLarge{margin-left:4em;} 
.indentSmall{margin-left:2em;} 
.floatStop{clear:both;} 
.floatRight{float:right; margin:0 0 20px 20px; vertical-align:text-top;} 
.floatLeft{float:left; margin:0 20px 20px 0; vertical-align:middle;} 

div.columnsOne{padding:4px; margin:6px; width:75%; border:1px solid var(--primary-blue);} 
div.columnsOneIndex,div.columnsTwoIndex,div.columnsThreeIndex{text-align:center; float:left; padding:2%; margin:0 2% 1% 0; width:auto;} 
div.columnsOneIndex{min-height:300px; width:92%; border:2px solid var(--accent-gray);} 
div.columnsTwo{float:left; padding:2%; margin:0 2% 1% 0; width:43%; border:1px solid var(--accent-gray);} 
div.columnsTwoIndex{min-height:320px; width:43%; border:2px solid var(--accent-gray); font-size:22px;} 
div.columnsThree{float:left; padding:15px; margin:0; width:28%; border:1px solid var(--accent-gray);} 
div.columnsThreeIndex{height:auto; width:26%; border:1px solid var(--primary-blue); font-size:22px; min-height:300px; border-radius:10px; background-color:var(--background-white); transition:box-shadow 0.3s ease, transform 0.3s ease;} 
div.columnsOneIndex a,div.columnsTwoIndex a,div.columnsThreeIndex a{color:var(--text-dark);} 
div.columnsOneIndex img,div.columnsTwoIndex img,div.columnsThreeIndex img{width:auto; height:auto; max-height:275px;} 
div.columnsThreeIndex img:hover{box-shadow:0 8px 16px rgba(0,0,0,0.2); transform:scale(1.03);} 
div.columnsFour,div.columnsFourTall{float:left; text-align:center; border:1px solid var(--primary-blue);} 
div.columnsFour{padding:1%; margin:2%; width:25%; min-height:240px;} 
div.columnsFourTall{padding:4px; margin:6px; width:190px; min-height:280px; font-size:medium;} 

div.columnsTwoNoBorder,div.columnsThreeNoBorder,div.columnsFourNoBorder,div.columnsFiveNoBorder{float:left; padding:5px; margin:0;} 
div.columnsTwoNoBorder{text-align:left; width:45%;} 
div.columnsThreeNoBorder{text-align:center; width:32%;} 
div.columnsFourNoBorder{text-align:center; padding:5px 3px; width:24%;} 
div.columnsFiveNoBorder{text-align:center; padding:5px 3px; width:19%;}

.img-flexible { 
  float:left; 
  width:48%; /* roughly half of container */
  margin:1%; /* small gap between boxes */
  padding:1em; 
  box-sizing:border-box; /* ensures padding doesn’t increase width */
  text-align:center; 
  font-size:1.2em; 
  line-height:2.2; 
  border:0.06em solid navy; 
  border-radius:0.625em; 
  box-shadow:0 0.2em 0.4em rgba(0,0,0,0.1); 
  transition:box-shadow 0.3s ease, transform 0.3s ease; 
  background-color:white; 
  vertical-align:top;
}


.img-flexible h3{font-size:1.2em;} 
.img-flexible p{font-size:0.8em; text-align:left;} 
.img-flexible:hover{box-shadow:0 0.4em 0.8em rgba(0,0,0,0.2); transform:scale(1.03);} 
.img-flexible img{max-width:100%; max-height:75vh; width:auto; height:auto; margin:0 auto 1.25em; border-radius:0.625em; box-shadow:0 0.2em 0.4em rgba(0,0,0,0.1); transition:box-shadow 0.3s ease, transform 0.3s ease;} 
.img-flexible img:hover{box-shadow:0 0.4em 0.8em rgba(0,0,0,0.2); transform:scale(1.03);} 
.img-flexible *{display:block; width:100%; text-align:center;} 

div.blogMakeIt{border-top-style:double; border-bottom-style:double; border-color:var(--text-dark); margin-left:5%; margin-right:5%; background:lemonchiffon;} 
div.blogMakeIt h2{font-weight:bolder; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; color:var(--text-dark);} 
div.blogMakeIt h3{font-weight:bolder; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; color:var(--text-dark);} 

div.blogPicCaption{float:center; text-align:center; padding:0px; margin:0px;} 
div.blogPicCaption p{text-align:center; color:var(--primary-blue); font-size:medium; padding:0px; margin:0px; font-style:italic;}

/* Branding changes November 2020 */
nav#TopBorder,nav#DLTKtopborder{width:100%; line-height:100%;} 
div#DLTKadBanner,div#TEACHsiteNav,div.animeNAVbuttons{width:100%; text-align:center; overflow:hidden;} 
div#DLTKbranding{width:65%; margin:auto; margin-left:12%; padding-top:20px; text-align:left;} 
div#DLTKsitenav{width:100%; text-align:center; clear:both; padding:0; margin:0; overflow:hidden;} 
div.DLTKsitenavButtons{float:left; width:125px; text-align:center; overflow:hidden; padding-top:20px; font-family:Helvetica, Arial, sans-serif; font-size:large;} 
div#DLTKsitenavSearch{float:left; width:300px; padding-top:0; text-align:left;} 
div#DLTKsitenavSocial{float:right; max-width:350px; text-align:right; overflow:hidden; padding-top:10px;} 
div.TEACHsiteNavlinks{float:left; width:14%; font-size:small; text-align:center; overflow:hidden; padding:10px 0;} 
#rightSideBarLinks,p.rightSideBarLinks{font-size:medium; font-weight:normal; text-align:center;} 
#rightSideBarLinks{line-height:200%;} 
p.rightSideBarLinks{line-height:150%;} 
hr.rightSideBarLine{margin:5px 0; clear:both;} 
div.animeNAVtitle{margin:0; width:100%; text-align:center; padding:5px; font-weight:bold; color:var(--text-dark);} 
div.animeNAVlinktext{float:left; width:99%; height:100px; text-align:center; overflow:hidden; font-size:medium;}

/* CSS for StickyAds Javascript implementation */
#stickyHeader, #stickyFooter{} 
#stickyContainer, #stickyMover{margin-top:0; margin-bottom:0;} 
.stickyAdDiv{margin-top:10px;} 

/* CSS for Features Javascript implementation */ 
div#FeaturesInsert{background-color:var(--accent-gray); margin:50px;  padding:50px; font-size:20px; line-height:2} 
div#featuresColA{min-height:225px; float:left; padding:1%; margin:3%; width:40%; border:1px solid gray;} 
div#featuresColB{min-height:225px; float:right; padding:1%; margin:3%; width:40%; border:1px solid gray;} 
img#featuresImgA{float:left; margin:0 20px 20px 0; vertical-align:middle;} 
img#featuresImgB{float:right; margin:0 0 20px 20px; vertical-align:middle;} 
img.fillSpace{align:center; max-width:100%; height:auto;} 

/* FlexImage container */ 
.flexImage{width:100%; min-height:300px; display:flex; justify-content:center; align-items:center; overflow:hidden; padding:10px;} 

/* Image inside FlexImage container */ 
.flexImage img{max-width:100%; height:auto; object-fit:contain;} 

.author-info{width:90%; font-size:0.8rem; font-weight:bold; color:var(--text-dark); background-color:var(--accent-gray); border:none; padding:10px 12px; border-radius:8px; display:inline-block; box-shadow:none; line-height:1.4; margin-top:-70px; margin-bottom:50px;}


/* =====================================================
   Flexible Image Box Layouts (2025 update)
   ===================================================== */

/* Flex containers */
.img-FlexBox2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4%; /* slightly larger gap */
}

.img-FlexBox3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4%;
}

/* Cards for 2-per-row and 3-per-row */
.img-FlexBox2 .img-FlexBoxCard {
  flex: 0 0 calc(50% - 2%);
}

.img-FlexBox3 .img-FlexBoxCard {
  flex: 0 0 calc(33.333% - 2.67%);
}

/* Card content wrapper for consistent layout */
.img-FlexBoxCard {
  box-sizing: border-box;
  background-color: var(--background-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  padding: 2% 4%;
  margin-bottom: 3%;
  border: 1px solid var(--primary-blue);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  line-height: 1.6;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  min-height: 400px; /* ensures all cards have roughly the same height */
}

.img-FlexBoxCard img {width:auto; height:auto; max-width:100%; max-height:250px; object-fit:contain; margin-bottom:50px; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,0.1); transition:box-shadow 0.3s ease, transform 0.3s ease; display:block; margin-left:auto; margin-right:auto;}

.img-FlexBoxCard:hover img {
  transform: scale(1.1); /* 10% bigger */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* optional: stronger shadow on image too */
}

.img-FlexBoxCard:hover {
  transform: translateY(-5px); /* lift the card */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* stronger shadow */
}

/* Headings */
.img-FlexBoxCard h3 {
  font-size: 1.4rem;
  margin: 10px 0 10px 0;
  font-weight: 500; 
}

/* Optional: push paragraph to bottom if present */
.img-FlexBoxCard p {
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
  color: #333;
  text-align: left;
  margin-top: auto;
}


/* =====================================================
   Flexible Image Box Layouts (2025 update) END
   ===================================================== */

/*  These styles prevent the navigation and advertising from printing  */


@media print {
	.no-print, div#adBanner, div#advertisingBox, div#socialMedia, div#searchBox, div.topButtons, div#searchText, div#homeText, div#homeButtonHide, #amp_floatingAdDiv, nav.topNav, nav.leftNav, .topBottomBorder, .leftSideBar, .rightSideBar, nav.navigation {display:none !important;}
	body { background-color: var(--background-white); font-size:14px; }
	article#content { width:100%; }
	.textStory { font-size:16px; line-height:1.6; }
}

@media only screen and (max-width:1400px){
	.leftSideBar{display:none}
}
	
@media only screen and (max-width:900px){
	div#FeaturesInsert{width:100%;margin-right:0;box-sizing:border-box;}
	.leftSideBar,.rightSideBar,nav.leftNav{display:none;}
	.indentLarge{margin-left:5px;}
	.indentSmall{margin-left:2px;}
	.indexImage{clear:both;min-height:10px;width:95%;text-align:left;max-width:100%;height:auto;}
	.indexText{clear:both;min-height:10px;width:95%;}
	nav.topNav{font-size:1.2em;line-height:3.2;}
	div#indexLeft,div#indexRight{width:95%;box-sizing:border-box;}
	div#indexRight{background-color:#f5f5f5;}
	div.topButton{width:120px;}
	.img-FlexBox2 .img-FlexBoxCard,.img-FlexBox3 .img-FlexBoxCard{flex:0 0 100%;}
	div.columnsTwoNoBorder,.columnsThreeNoBorder,.columnsFourNoBorder,.columnsFiveNoBorder,
	div#PRTsitenavSocial,div#DLTKsitenavSocial,
	div.columnsOne,.columnsOneIndex,.columnsTwoIndex,.columnsThreeIndex,
	div.columnsTwo,.columnsThree,.columnsFour,.columnsFourTall{width:95%;min-height:0;box-sizing:border-box;}
	.img-flexible{width:90%;min-height:0;max-width:100%;height:auto;box-sizing:border-box;}
	.img-flexible h3{font-size:20px;}
	div#container,article#content,article#contentLarge{margin:0;padding:0;width:95%;min-width:250px;box-sizing:border-box;}
	div.topButtons{border:1px solid var(--primary-blue);height:auto;padding:10px;width:75px;}
	div#socialMedia,div#searchBox,div#homeButtonHide{display:none;}
	div#searchText,div#homeText,div.adSmallScreen{display:inline;}
}