@charset "UTF-8";

/* ------------- PLEASE NOTE: There are also float classes in responsive.css: class="left" (float left) or class="right" (float right) --------------- */

/* ------------- Classes for Links, Facts, Games, Teachers and Resources Pages ----------------------------------------------------------------------- */

.links, .facts, .games, .teachers, .resource {clear: both; float: left; width: 100%; margin-bottom: 1.000em; padding-bottom: 1.000em;  border-bottom: 0.250em solid #0053ac;}
.links:last-child, .facts:last-child, .games:last-child, .teachers:last-child, .resource:last-child {border-bottom: 0; margin-bottom: 0;}
.links img, .games img {max-width: 47%; height: auto;}
.links figure {clear: both; max-width: 75%; margin-bottom: 0.750em;}
.links figure img {max-width: 100%; height: auto;}
.facts figure, .teachers figure, .resource figure {margin-bottom: 0.750em;}
.links figcaption, .facts figcaption, .teachers figcaption, .resource figcaption {font-size: 0.800em; margin-top: 0.500em; text-align: center;}
a.tip {position: relative;} /* Classes for Glossary Tooltip on Facts Pages */
a.tip span {display: none;}
a.tip:hover span {display: block; position: absolute; left: 0; top: 1.250em; width: 25em; padding: 0.750em; background: #fff799; color: #000; border: 1px solid #999; font-size: 0.688em; z-index: 2;}
.resource .byline, .resource .details {font-size: 0.875em;}
.resource .details {font-weight: bold;}
.L {clear: left;} /* Can be used to align left an image inside figure element -- used on Links pg with callout box */
.C {margin: 0.750em auto;} /* Centers img or figure element -- usually below text */
.threeforths {width: 75%; height: auto;} /* Width is 75% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.half {width: 50%; height: auto;} /* Width is 50% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.forty {width: 45%; height: auto;} /* Width is 45% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.third {width: 30%; height: auto;} /* Width is 30% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.qtr {width: 25%; height: auto;} /* Width is 25% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.eighth {width: 15%; height: auto;} /* Width is 15% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.sixteenth {width: 10%; height: auto;} /* Width is 10% of the content box -- figure element with no class is 100% (primarily used on Facts and Resources pgs where global img width is not set) */
.marR1 {margin-right: 1.000em;} /* Facts pg -- used on figure elements when they appear in a block of text */
.marL1 {margin-left: 1.000em;} /* Facts pg -- used on figure elements when they appear in a block of text */
.marR2 {margin-right: 2.000em;} /* Facts pg -- used on figure elements when they appear in a block of text */
.marL2 {margin-left: 2.000em;} /* Facts pg -- used on figure elements when they appear in a block of text */
.marT1 {margin-top: 1.000em;} /* Because the width of text boxes are responsive, use only positive values for top and right margins --Facts pg -- used on figure elements when they appear in a block of text */
.marT2 {margin-top: 2.000em;}/* Facts pg -- used on figure elements when they appear in a block of text */
.marT3 {margin-top: 3.000em;}/* Facts pg -- used on figure elements when they appear in a block of text */
.marT4 {margin-top: 4.000em;}/* Facts pg -- used on figure elements when they appear in a block of text */
.marB1 {margin-bottom: 1.000em;}/* Facts pg -- used on figure elements when they appear in a block of text */
.marB2 {margin-bottom: 2.000em;}/* Facts pg -- used on figure elements when they appear in a block of text */
p { line-height: 1.5 }
.subscript {position: relative; top: 0.3em; font-size: 0.8em;}

/* Classes for IMAGES and FIGURE elements on Links, Facts, Games and Teachers Pages to Overlap */
.links .overlapT1, .facts .overlapT1, .games .overlapT1, .teachers .overlapT1, .resource .overlapT1 {margin-top: -1.000em;}
.links .overlapT2, .facts .overlapT2, .games .overlapT2, .teachers .overlapT2, .resource .overlapT2 {margin-top: -2.000em;}
.links .overlapT6, .facts .overlapT6, .games .overlapT6, .teachers .overlapT6, .resource .overlapT6 {margin-top: -6.000em;}
.links .overlapR1, .facts .overlapR1, .games .overlapR1, .teachers .overlapR1, .resource .overlapR1 {margin-right: -1.000em;}
.links .overlapR2, .facts .overlapR2, .games .overlapR2, .teachers .overlapR2, .resource .overlapR2 {margin-right: -2.000em;}
.links .overlapB1, .facts .overlapB1, .games .overlapB1, .teachers .overlapB1, .resource .overlapB1 {margin-bottom: -1.000em;}
.links .overlapB2, .facts .overlapB2, .games .overlapB2, .teachers .overlapB2, .resource .overlapB2 {margin-bottom: -2.000em;}
.links .overlapL1, .facts .overlapL1, .games .overlapL1, .teachers .overlapL1, .resource .overlapL1 {margin-left: -1.000em;}
.links .overlapL2, .facts .overlapL2, .games .overlapL2, .teachers .overlapL2, .resource .overlapL2 {margin-left: -2.000em;}

/* Classes for Text Boxes on Links and Games Page */
.callout {padding: 1.500em; width: 40%; height: auto; border-radius: 1.500em;}
.callout-full {padding: 1.500em; height: auto; border-radius: 1.500em;}
.yellow {background: #fff799;}
.pink {background: #f9b8d4;}
.blue {background: #a6daef;}
.purple {background: #bd9ede;}
.orange {background: #fdc689;}
.green {background: #d0e9aa;}
.marT1 {margin-top: 1.000em;} /* Because the width of text boxes are responsive, use only positive values for top and right margins */
.marT2 {margin-top: 2.000em;}
.marB1 {margin-bottom: 1.000em;}
.marB2 {margin-bottom: 2.000em;}

.standardsHdr {color: #fff; background: #945ebd; margin: 0.500em 0 1.000em 0; padding: 0.125em 0.125em 0.125em 1.500em; border-radius: 0.875em;}
.standards {clear: both; padding: 1.000em; margin-bottom: 1.000em; background: #fff; border: 1px solid #999; border-radius: 1.500em;}
.lesson {background: #d0e9aa; padding: 1.000em;}
.lesson h3 {color: #0053ac;}

/* ------------- Classes for Glossary Page ----------------------------------------------------------------------------------------------------------- */

.glossaryLetter {color: #fff; background: #945ebd; margin: 0; padding: 0.125em 0.125em 0.125em 1.500em; border-radius: 0.875em;}
.glossary {margin-bottom: 0.750em;}
.glossary dt {font-size: 1.000em; margin: 0.500em 0 0 0; padding: 0;}
.glossary dd {font-size: 0.875em; border-bottom: #ccc solid 0.125em; font-style: normal; padding: 0 0 0.500em 1.000em; margin: 0;}
.glossary dd:last-child {border-bottom: 0;}

/* ------------- Classes for Top10Qs and Archive Pages ----------------------------------------------------------------------------------------------- */

.stquestions span {margin-right: 0.250em; font-size: 2.000em; padding: 0 0.125em; background: #e0271e; color: #fff; border-left: 2px solid #9d0902; border-bottom: 2px solid #9d0902; border-radius: 0.250em;}
.stquestions {padding: 0 0.500em 0.500em 1.000em; color: #0053ac; font-family: CenturyGothicStd-Bold; font-weight: bold; font-style: normal; line-height: 160%; background: #ffc74c; border-radius: 1em;}
.stanswers {padding: 0 0.500em 0.500em 1.000em;}
.archive {margin-bottom: 1.000em; border-radius: 1.000em; overflow: hidden;}
.archive li {padding: 0.500em 0.500em 0.500em 1.000em;}
.archive li:nth-child(odd) {background: #e3d1f1;}
.archive li:nth-child(even) {background: #f8ecf3;}
.archive span {margin-left: 1.000em;}

/* ------------- MEDIA QUERIES ----------------------------------------------------------------------------------------------------------------------- */

/* Mobile Phones Portrait 319px */
@media only screen and (max-width: 20em) {
	.callout, .callout-full {padding: 5%;}
}
/* Mobile/iPhones+ 319px/480px */
@media only screen and (max-width: 30.000em) {
	.callout, .callout-full {font-size: 0.750em;}
	.callout {width: 35%;}
	.links img, .games img {max-width: 57%; height: auto;}
	.links .L {clear: left; max-width: 50%; height: auto;}
	a.tip:hover span {padding: 0.500em;}
	.archive span {display: block; margin-left: 0; margin-top: 0.500em;}
}
/* Phones and Tablets -- up to 767px */
@media only screen and (max-width: 47.938em) {
	.fgCreditsBox {margin-bottom: 0.750em;}
}
/* Tablets+ */
@media only screen and (min-width: 30.063em) {
	.links .L {clear: left; max-width: 44%; height: auto;}
	.links img, .games img {max-width: 46%; height: auto;}
}
/* Tablets -- 540px/599px */
@media only screen and (max-width: 37.438em) {
	a.tip:hover span {width: 6.750em;}
}
/* Breakpoint for Desktop+ */
@media only screen and (min-width: 57.500em) {
	.callout {width: 45%;}
	.links img, .games img {max-width: 49%; height: auto;}
	.links .L {clear: left; max-width: 45%; height: auto;}
}