/*  These styles are the defaults for both the dwt templates and the editable content  */

ul           {list-style-image: url('images/dltkbullet1.gif'); margin-top:20px; padding-bottom:15px }
ul.materialsList li { padding-bottom:5px }
ul ul        { list-style-image: url('images/dltkbullet2.gif'); margin-top:20px }
ul ul ul     { list-style-image: url('images/dltkbullet3.gif'); }
li			 { list-style-position: outside; padding-bottom:30px }
a:link       { color: #00897B; }
a:active     { color: #546E7A; }
a:visited    { color: #78909C; }
a:hover 	 { color: #FF7043; }
body         { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); font-size: 22px; line-height:200%; font-family: 'Roboto', 'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
h1           { color: #455A64; font-size: 36px; padding-top: 20px; padding-bottom: 30px; font-weight: normal; font-style: normal; font-family: 'Roboto Slab', 'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; line-height:120%; }
h2           { color: #D84315; font-size: 30px; font-weight: normal; font-style: normal; padding-top: 20px; padding-bottom: 30px;  }
h3           { color: #FF7043; font-size: 24px; font-weight: normal; font-style: normal }
h4           { color: #607D8B; font-size: 20px; font-weight: normal; font-style: normal }
h5           { color: #455A64; font-size: 16px; font-weight: normal; font-style: normal }
h6           { color: #455A64; font-size: 14px; font-weight: normal; font-style: normal }
p 			 { padding-bottom: 20px; }
table        { line-height:110%; border:0; width:85%; margin: 0 auto }
td  	     { min-width:200px; padding:20px }

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


/*  These styles are for the dwt templates  */

div#container { width:100%; margin:5px auto; display: flex; justify-content: space-between; align-items: flex-start; }
article#fullScreen { margin-left:5%; margin-right:5% }
article#content { padding:15px; flex-grow: 3; }
article#contentLarge {  padding:15px; flex-grow: 3; }

.topBottomBorder { width:100%; line-height:100%; }
.leftSideBar { flex-grow: 1; min-width:150px; overflow:hidden; text-align:left; margin:auto; line-height:100%; }
.rightSideBar { flex-grow: 1; min-width:325px; overflow:hidden; text-align:center; margin-left:15px; line-height:100%; }
.upper-right300x600 { float: right; margin: 15px 0px 20px 20px; vertical-align: text-top; }

div#homeButtonHide  { float:left; text-align:left; width:220px; background-color:white; overflow:hidden; display:inline }
div#homeText    { float:left; padding:10px; width:100px; text-align:center; border: 1px solid navy; display:none;  }
div.topButtons  { float:left; width:100px; text-align:center; overflow:hidden; padding-top:25px }
div#socialMedia { float:right; width:275px; text-align:center; overflow:hidden; padding-top:15px }
div#adBanner    { width:100%; text-align:center; min-height: 90px; }
div#searchBox    { float:left; width:300px;  }
div#searchText  { float:left; padding:10px; width:100px; text-align:center; border: 1px solid navy; display:none;  }
nav.navigation { clear:both; background-color: #DDDDFF; padding:0; margin:auto; text-align:center; overflow:hidden; }
div.adSmallScreen { background-color:#FFFFFF; width:100%; text-align:center; display:none }

/*  These styles are for the editable content  */

nav.topNav{ padding: 15px 0 15px 0; margin: 0px; margin-top:30px; font-size: medium; width: 100%; background-color: #f5f8fb; line-height:100%; line-height: 200%;}
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: medium; font-family: Helvetica, Arial, sans-serif}

.printVersionLink { background-color: #FFB74D; padding: 10px 15px; /* Add padding to the top, bottom, left, and right */
  text-decoration: none; /* Remove the underline from the link */
  color: #222; /* Set the text color */
  border-radius: 4px; /* Add rounded corners to the button */
  display: inline-block; /* Make the link an inline block element */ }

.indexHighlight { clear:both; background-color: #DDDDDD; font-weight: bold; font-size: medium; width:100% }

.indexImage  { 	float:left; text-align:center; margin: 0 20px 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#indexLeft { clear:both; width: 36%; margin:2%; float:left; background-color:white; padding:1% }
div#indexRight { width: 55%; background-color:ghostwhite; float:left; padding:1% }

.textLarge { font-size: 24px; }
.textMedium { font-size: 20px; }
.textSmall { font-size: 20px; }
.textStory { font-size:24px; line-height:160%; padding-bottom: 25px }

.indentLarge   { margin-left: 80px }
.indentSmall   { margin-left: 40px }

.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 navy }
div.columnsOneIndex { min-height:300px; float: left; padding: 2%; margin: 0 2% 1% 0; width: 92%; border: 2px solid #eff2f4; text-align: center }
	div.columnsOneIndex a {color: black;}
	div.columnsOneIndex img {width: auto;height:auto;max-height: 275px;
    /* Set the width and height to auto to maintain the aspect ratio */}
div.columnsTwo { float: left; padding: 2%; margin: 0 2% 1% 0; width: 43%; border: 1px solid gray; }
div.columnsTwoIndex { min-height:320px; float: left; padding: 2%; margin: 0 2% 1% 0; width: 43%; border: 2px solid #eff2f4; text-align: center; font-size: 22px }
	div.columnsTwoIndex a {color: black;}
	div.columnsTwoIndex img {width: auto;height:auto;max-height: 275px;
    /* Set the width and height to auto to maintain the aspect ratio */}
div.columnsThreeIndex { height:auto; float: left; padding: 2%; margin: 0 2% 1% 0; width: 26%; border: 1px solid navy; text-align: center; font-size: 22px; min-height:300px }
	div.columnsThreeIndex a {color: black;}
	div.columnsThreeIndex img {width: auto;height:auto;max-height: 275px;
    /* Set the width and height to auto to maintain the aspect ratio */}
div.columnsThree { float: left; padding: 15px; margin:0px; width: 28%; border: 1px solid gray; }
div.columnsFour { float: left; text-align:center; padding:1%; margin:2%; width: 25%; min-height:240px; border: 1px solid navy }
div.columnsFourTall { float: left; text-align:center; padding:4px; margin:6px; width: 190px; min-height:280px; font-size: medium; border: 1px solid navy }

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

.img-flexible { display: inline-block; width: 32%; margin: 50px 2% 100px; text-align: center; padding: 30px; font-size: 30px; line-height: 1.6; border: 1px solid navy; vertical-align: top; float: left; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, transform 0.3s ease; }
	.img-flexible:hover { box-shadow: 0 8px 16px 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 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, transform 0.3s ease; }
	.img-flexible img:hover { box-shadow: 0 8px 16px 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:black; 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:black} 
	div.blogMakeIt h3 {font-weight:bolder; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; color:black} 

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

/* Branding changes November 2020 */
nav#TopBorder { width:100%; line-height:100%; }
/*  Styles for new branding in January 2021  */
nav#DLTKtopborder { width:100%; line-height:100%; }
div#DLTKadBanner { width:100%; text-align:center; }
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:0px; text-align:left }
div#DLTKsitenavSocial { float:right; max-width:350px; text-align:right; overflow:hidden; padding-top:10px; }
div#TEACHsiteNav { width:100%; text-align:center; overflow:hidden; }
div.TEACHsiteNavlinks { float:left; width:14%; font-size:small; text-align:center; overflow:hidden; padding:10px 0 10px 0}
#rightSideBarLinks { font-size: medium; font-weight:normal; line-height: 200%; text-align:center; }
p.rightSideBarLinks { font-size: medium; font-weight:normal; line-height: 150%; text-align:center; }
hr.rightSideBarLine { margin: 5px 0px 5px 0px; clear: both; }
/* Special Style for Anime NAV banner */
div.animeNAVtitle {margin: 0px; width: 100%; text-align: center; padding: 5px; font-weight: bold;}
div.animeNAVbuttons {margin: 0px; height: 20px; width: 100%; text-align: center; padding: 5px;}
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 { width: 75%; margin: 0 auto 0 0; margin-right: 350px; font-size: 20px; line-height: 2; text-align: left; }
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;
}

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

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

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