/*General design settings  */

body      { background-color: #FFFFFF; color: #000000; font-family: Roboto, Arimo, Arial, sans-serif; font-size: large; font-weight: normal; line-height: 140%; }
h1  	    { font-size: xx-large; font-weight: normal; font-style: normal; font-family: "Arimo Regular", Arial, sans-serif; line-height: 120%; }
h2          { font-size: 22px; font-weight: normal; font-style: normal; color: #0066FF; line-height: 140% }
h3          { font-size: 20px; font-weight: normal; font-style: normal; color: #355697 }
h4          { font-size: medium; font-weight: normal; font-style: normal }
h5          { font-size: small; font-weight: normal; font-style: normal }
h6          { font-size: x-small; font-weight: normal; font-style: normal }
sup   { font-size:small }
table     { border:none; width:100%; margin:0; padding:0 }
td        {	padding: 3px; vertical-align: top }
td.header {
	padding: 3px;
	text-align: center;
	font-size: 20px;
    color: #0066FF;
	font-weight: normal;
	font-family: Roboto, Arimo, Arial, sans-serif;
	background-color: #f8fcfe;
}
a:link    { color: #355697; }
a:active  { color: #EA4335; }
a:visited { color: #0066FF; }
a:hover   { color: #4285F4; }
img { max-width: 100%; }
hr  { color:#EA4335; border-color:#EA4335; border-style: solid; }



/*  These styles are for the dwt templates  */

div#container { background-color: #FFFFFF; width:100%; margin: auto; padding:0; display: flex; justify-content: space-between;}
article#content { flex-grow: 5; background-color: #FFFFFF;  padding:0 1% 0 4%; vertical-align:top }
article#contentSm  { flex-grow: 5; background-color: #FFFFFF;  padding:0 4% 0 8%; vertical-align:top }
article#contentLarge { flex-grow: 5; background-color: #FFFFFF; }

.topBottomBorder { background-color: #f8fcfe; width:100%; line-height:110%; text-align:center }
div.rightSideBar{ flex-grow: 2; min-width: 350px; overflow:hidden; text-align:center; line-height:140%;background-color: #f8fcfe; }
div.adBanner    { background-color:#FFFFFF; width:100%; align:center; padding:10px; margin-bottom:10px }
div#searchBox   { float:left; height:40px; text-align:center; vertical-align:text-top; width:300px; padding:2px 0 2px 0 }
div#homeText    { float:left; padding:10px; width:300px; text-align:left; font-size: large; }
div.topButtons  { float:left; width:150px; text-align:center; overflow:hidden; padding-top:10px }
div#socialMedia { float:right; padding-right: 10px; padding-bottom:2px }
div#bottomnav { float:left; line-height: 160%; }
nav.navigation  { clear:both; padding:0; margin:auto; text-align: center; overflow:hidden; }
nav.smallScreen { float:left; padding:10px; width:100px; height:50px; text-align:left; border: 1.5px solid #FFFFFF; display:none; }
div.adSmallScreen { background-color:#FFFFFF; width:100%; text-align:center; display:none }

#rightSideBarLinks { font-size: large; font-weight:normal; line-height: 200%; text-align:center; }
p.rightSideBarLinks { font-size: large; font-weight:normal; line-height: 200%; text-align:center; }
hr.rightSideBarLine { margin: 5px 0px 5px 0px; clear: both; }

/*  These class definitions are for the body (content)  */

.ad-container {  display: flex; justify-content: center; }
.adsbygoogle {  width: 100%; }

h1.activities  { font-size:large; text-align:center }

header#mainHeader { margin-bottom: 2px }
h3#materials   { padding-top: 20px }
ul.materialsList  { padding-bottom:20px }
ul.materialsList li { padding-bottom:5px }

.pageTitleShrink { font-size: large; font-family: Roboto, Arimo, Arial, sans-serif}

.indexHighlight { clear:both; padding: 3px;
	text-align: center;
	font-size: 20px;
    color: #0066FF;
	font-weight: normal;
	font-family: Roboto, Arimo, Arial, sans-serif;
	background-color: #f8fcfe; }

.indexImage  { 	float:left; text-align:center; margin: 0 20px 0 20px; min-width:200px; 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:#F3F3F3; float:left; padding:1% }

.textXLarge { font-size: x-large; }
.textLarge { font-size: large; }
.textMedium { font-size: medium; }
.textSmall { font-size: small; }

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

.floatStop { clear:both; margin: 10px 0 10px 0; }
.floatRight { float: right; margin: 0 7px 20px 20px; vertical-align: text-top; }
.floatLeft { float: left; margin: 0 20px 5px 0; vertical-align: text-top; text-align:center; }

div.columnsTwo { float: left; padding: 10px; margin: 20px; width: 36%; border-radius: 8px; border: 1px solid gray; }

div.columnsTwoB {
	float: left;
	padding: 10px;
	margin: 20px;
	width: 36%;
	text-align: center;
	border-radius: 8px;
	border: 1px solid gray;
}
div.columnsTwoB img { margin-bottom: 10px; border-radius: 6px; border: 1px solid gray; }

div.columnsTwoNB {
	float: left;
	padding: 10px;
	margin: 20px;
	width: 36%;
	text-align: center;
	}
div.columnsTwoNB img { margin-bottom: 10px; border-radius: 6px; border: 1px solid gray; width: 100%; height:auto; }


div.columnsTwoNoBorder { float: left; padding: 2%; margin: 0 2% 1% 0; width: 43% }
div.columnsTwoRC {
	float: left;
	padding: 2%;
	margin: 0 2% 1% 0;
	width: 43%;
	border-radius: 8px;
	border: 1px solid gray;
}

div.columnsThree { float: left; text-align: center; padding: 15px; margin: 20px 10px 20px 10px; width: 26%; border-radius: 8px; border: 1px solid gray; }
div.columnsThree img {border-radius: 4px; border: 1px solid gray; }
div.columnsFour { float: left; text-align: center; padding: 5px; margin: 20px; width: 200px; min-height: 255px; font-size: medium; border-radius: 8px; border: 1px solid gray; line-height: 130% }
div.columnsFourNoBorder { float: left; text-align: center; padding: 5px; margin: 20px; width: 200px; min-height: 240px; }
div.columnsFourTall { float: left; text-align:center; padding: 5px; margin: 20px; width: 200px; min-height:280px; font-size: medium; border-radius: 8px; border: 1px solid gray; line-height: 130% }
div.columnsFourTall img { border-radius: 4px; border: 1px solid gray; }
div.columnsThreeNoBorder { float: left; text-align: center; padding: 0 2% 1% 2%; margin: 0 2% 20px 0; width: 26%; }
div.columnsThreeNoBorder img {width: 100%; height:auto; }
div.galleryPage {
	float: left;
	text-align: center;
	padding: 5px;
	margin: 20px;
	width: 200px;
	min-height: 255px;
	font-size: medium;
	border-radius: 8px;
	border: 1px solid gray;
	line-height: 130%
}
div.galleryPage a   {
	font-size: medium;
	border-radius: 8px;
}
div.galleryPage img { border-radius: 4px; border: 1px solid gray; }
div.topNav { padding: 15px 0 10px 0; margin: 0; font-family: Roboto, Arimo, Arial, "sans-serif"; font-size: medium; width: 100%; }

div.img-flex { float: left;
	padding: 10px;
	margin: 20px;
	width: 36%;
	text-align: center;
	border-radius: 8px;
	border: 1px solid gray; }
	div.img-flex img { margin-bottom: 10px; border-radius: 4px; border: 1px solid gray; width: 100%; height:auto; }


div.video-container {
position: relative;
padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */
/* padding-bottom: 62.5%; - 16:10 aspect ratio */
/* padding-bottom: 75%; - 4:3 aspect ratio */
padding-top: 30px;
height: 0;
overflow: hidden; 	
}

div.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;	
}

div.footerAd { width: 75%; margin-right: 350px; }
div.middleAd { width: 75%; }

div#grayLink  { text-align:center; margin:auto; width:85%; background-color:#f8fcfe; padding:5px; border-radius: 4px; line-height: 180%; font-size: 20px } 
div#whiteLink  { text-align:center; margin:auto; width:85%; background-color:#f8fcfe; padding:5px; border-radius: 4px; line-height: 180%; font-size: 20px }


/*  Prevents certain areas of the webpage from printing out  */

@media print {
	.no-print {display:none}
	div.topBottomBorder {display:none}
	footer.topBottomBorder {display:none}
	div.leftSideBar {display:none}
	div.rightSideBar {display:none}
	div.topNav {display:none}
	div.middleAd {display:none}
	.adsbygoogle { display:none !important;}
    .adsbygoogle-noablate { display:none !important;}
	nav.navigation {display:none}
	nav.smallScreen { display:none }
	article#content { padding: 0; width:98%; min-height:100px; }
	article#contentSm { padding: 0; width:98%; min-height:100px; }
	article#contentLarge { padding: 0; width:98%; min-height:100px }
	#amp_floatingAdDiv { display: none !important;}
	}

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

/* CSS for First-School Features Javascript implementation */
div#FeaturesInsert { width: 75%; margin: 0 auto 0 0; margin-right: 350px; font-size: 20px; line-height: 140%; text-align: left; }
div#featuresColA { text-align: center; min-height:225px; float: left; padding: 1%; margin: 0 1% 0 2%; width: 43%; }
div#featuresColA a:link { text-decoration: none; }
div#featuresColB { text-align: center; min-height:225px; float: right; padding: 1%; margin: 0 2% 0 1%; width: 43%; }
div#featuresColB a:link { text-decoration: none; }
img#featuresImgA { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.17); }
img#featuresImgB { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.17); }

@media only screen and (max-width: 1400px) {
	div.rightSideBar {display:none}	}

@media only screen and (max-width: 1000px) {
h1 { font-size: x-large;  }
.topBottomBorder { margin:0; padding:0 }
div#container    { margin:0; }
article#contentSm { padding:0; width:100%; }
article#contentLarge { padding:0; width:100%; }
article#content { padding:0; width:100%; }
div#searchBox   { width:250px }
.textLarge { font-size: large; }
div.topButtons	{ height:auto; padding:10px; width:100px }
.indentLarge   { margin-left: 5px }
.indentSmall   { margin-left: 2px }
nav.topNav { padding: 0; }
div.topButton { width: 120px; }
div.footerAd { width: 100%; margin-right: 0; }
div.middleAd { width: 100%; }
div#FeaturesInsert { width: 100%;  margin-right: 0; font-size: large; line-height: 140% }
	
}