@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Ubuntu:500,500italic,400,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
html, body, div, h1, h2, h3, h4, h5, p, ul, li, img, ol, ul {
	margin: 0;
	padding: 0;
}
html {
	font-size: 16px;
}
body {
	line-height: 1.2;
	text-align: left;
	font-family: 'Ubuntu', sans-serif;/*font-size: 16px;*/
	font-weight: 400;
	color: #333;
}
* {
	box-sizing: border-box;
}
h2 {
	font-size: 1.125rem;
	font-weight: 500;
	margin-bottom: .5rem;
}
h3 {
	font-size: 1rem;
    font-weight: 500;
	padding: .5em 0;
}
p, ul, ol {
	margin-bottom: .5rem;
}
a {
	text-decoration: none;
}
a:active, a:link, a:visited, a:focus {
	outline: 0;
}
.text-link {
	color: #333;
	font-weight: normal;
	text-decoration: underline;
}
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.font18{
	font-size: 1.125rem;
}
.font-bold {
	font-weight: 500;
}
.font-normal {
	font-weight: normal;
	font-style: normal
}
.font-italic {
	font-style: italic
}
.font-bold-italic {
	font-weight: 500;
	font-style: italic
}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.hidden {
	display: none;
}
.invisible {
	visibility: hidden
}
.display-flex{
	display:flex;
}
.v-center {
	display: inline-block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);	/*-ms-transform: translateY(-50%);	-webkit-transform: translateY(-50%);*/
}
.float-right{
	float: right;
	margin: 0 0 .5rem .5rem;
}
.float-left{
	float: left;
	margin: 0 .5rem .5rem 0;
}
.msg[data-type=err-msg] {
	color: #f00;
}
input[type=submit]:hover{
	cursor: pointer;
}
.caption{
	font-weight: 500;
}
.text-link:hover {
	cursor: pointer;
	color:#090;
}
.video {
    width: 18.75rem;
}
.video .video-wrapper{
	height: 169px; 
	width: 300px;
}
th {
	font-weight: 500;
}
.superscript,.subscript{
   vertical-align: baseline;
   position: relative;
   top:  -0.3em;
   font-size: 0.8em;
}
.subscript{
   top:  0.3em;
}
.border-bottom{
	border-bottom: 3px solid #666;
	margin-bottom: 1rem;
}
/* icon-svg */
.icon-svg{
	display:inline-block;
}
.icon-svg-stroke {
	fill: #FFFFFF;
}
.icon-svg-fill {
    fill: inherit;
}
.icon-svg use{
	fill: #676767;
}
.icon-svg.hover {
	cursor: pointer;
	border: 0;
	outline: none;
}
.icon-svg.icon-close.small svg{
	height: 20px;
	width: 20px;
}
.icon-svg.icon-expand svg, .icon-svg.icon-unexpand svg{
	height: 20px;
	width: 20px;
}
.icon-svg.icon_download_studentguide svg{
    height: 108px;
    width: 100px;
}
.icon-svg.icon_download_studentdigital svg{
    height: 108px;
    width: 100px;
}
.icon-svg.icon_download_enotebook svg{
    height: 47px;
    width: 210px; 
}
.icon-svg.icon_teacher_lessonnotes svg{
	width: 68px;
	height: 68px;
}
.icon-svg.icon_teacher_guidepreview svg{
	width: 77px;
	height: 66px;
}
.icon-svg.icon_teacher_enotebook svg{
	width: 118px;
	height: 22px;
}
/* accordion header */
.accordion-header {
	display: block;
	line-height: 1.9;/*1.8;*/
	color: #333;
	text-decoration: none;
	cursor: pointer;
	min-height: 0;
	position: relative;
	border-bottom: 1px solid #666;
}
.accordion-header:hover {
	cursor: pointer;
}
.accordion-header.click {
	color: #fff;
}
.accordion-header .icon-svg {
 	display: inline-block;
 	vertical-align: text-top;
 	margin: 0 5px 0 3px;
	line-height: 1;
}
.accordion-header .click-toggle.hidden {
	display: none;
}
.accordion-header .optional {
	color: #fff;
	display: inline-block;
	float: right;
	height: inherit;line-height: 1.9;
	padding-right: 5px;
}
.accordion-header span:nth-child(2) > span {
    margin-right: .5em;
}

.accordion-content {
	display: none;
	border-bottom: 1px solid #333;
}
.accordion-content li{
	margin-bottom: 0.5em;
}
.accordion-content ul {
	list-style-type: disc;
	padding-left: 1em;
	margin-bottom: 0.5em;
}
.accordion-content ol {
	list-style-type: decimal;
	padding-left: 10px;
}
.accordion-content ul ul {
	list-style-type:circle;
	padding-left: 1em;
}
.accordion-content .act-column {
	float: left;
}
.accordion-content .act-column:nth-child(odd) {
	background-color: #eee;
}
.accordion-content .act-column:nth-child(even) {
	background-color: #e1e1e1;
}
.accordion-content .heading {
	background-color: #969695;
	color: #fff;
	text-align: center;
	padding: 2px 5px;
	position: relative;
}
.accordion-content .act-column.disabled .heading {
	color: #aaa;
}
accordion-content .heading + div {
	padding: 0 5px;
	position: relative;
}
.accordion-content .icon-wrapper {
	width: 100%;
}
.accordion-content .icon-wrapper p {
	text-align: center;
}
.accordion-content .svg-wrapper {
	height: 68px;
	margin: 0 auto;
	position: relative;
}
.accordion-content .lesson-plan .svg-wrapper {
	width: 68px;
}
.accordion-content .student-guide .svg-wrapper {
	width: 77px;
	top: 1px;
}
accordion-content .enotebook .svg-wrapper {
	top: 32px;
	width: 118px;
}
.accordion-content .supplements {
	background-color: #eee;
}
.accordion-content .supplements .heading + div {
    padding-bottom: 5px;
}
.accordion-content .supplements > div p:last-child {
	margin-bottom: 0;
}
/* intro to sbd */
.accordion.intro-to-sbd .accordion-header.click{
    background-color:#090;
}
.accordion.intro-to-sbd .icon-svg:hover use,
.accordion.intro-to-sbd .accordion-header:hover use,
.accordion.intro-to-sbd .accordion-header.click use{
    fill: #090;
}
/* Enought water fit for drinking */
.accordion.enough-water .accordion-header.click{
    background-color:#c00;
}
.accordion.enough-water .icon-svg:hover use,
.accordion.enough-water .accordion-header:hover use,
.accordion.enough-water .accordion-header.click use{
    fill: #c00;
}
/* Circle of life */
.accordion.circle-of-life .accordion-header.click{
    background-color:#9c0;
}
.accordion.circle-of-life .icon-svg:hover use,
.accordion.circle-of-life .accordion-header:hover use,
.accordion.circle-of-life .accordion-header.click use{
    fill: #9c0;
}
/* Science of toys */
.accordion.science-of-toys .accordion-header.click{
    background-color:#f90;
}
.accordion.science-of-toys .icon-svg:hover use,
.accordion.science-of-toys .accordion-header:hover use,
.accordion.science-of-toys .accordion-header.click use{
    fill: #f90;
}
/* Earth and space */
.accordion.earth-and-space .accordion-header.click{
    background-color:#3cf;
}
.accordion.earth-and-space .icon-svg:hover use,
.accordion.earth-and-space .accordion-header:hover use,
.accordion.earth-and-space .accordion-header.click use{
    fill: #3cf;
}
/* from little things */
.accordion.from-little-things .accordion-header.click {
    background-color:#0b0;
}
.accordion.from-little-things .icon-svg:hover use,
.accordion.from-little-things .accordion-header:hover use,
.accordion.from-little-things .accordion-header.click use{
    fill: #0b0;
}
/* energy */
.accordion.energy .accordion-header.click {
    background-color:#f60;
}
.accordion.energy .icon-svg:hover use,
.accordion.energy .accordion-header:hover use,
.accordion.energy .accordion-header.click use{
    fill: #f60;
}
/* rock paper scissors */
.accordion.rock-paper-scissors .accordion-header.click{
    background-color:#c39;
}
.accordion.rock-paper-scissors .icon-svg:hover use,
.accordion.rock-paper-scissors .accordion-header:hover use,
.accordion.rock-paper-scissors .accordion-header.click use{
    fill: #c39;
}
/* rock your world  */
.accordion.rock-your-world .accordion-header.click{
    background-color:#09f;
}
.accordion.rock-your-world .icon-svg:hover use,
.accordion.rock-your-world .accordion-header:hover use,
.accordion.rock-your-world .accordion-header.click use{
    fill: #09f;
}
/* ecosystems and change */
.accordion.ecosystems-and-change .accordion-header.click{
    background-color:#197119;
}
.accordion.ecosystems-and-change .icon-svg:hover use,
.accordion.ecosystems-and-change .accordion-header:hover use,
.accordion.ecosystems-and-change .accordion-header.click use{
    fill: #197119;
}
/* chemical reations */
.accordion.chemical-reactions .accordion-header.click{
    background-color:#906;
}
.accordion.chemical-reactions .icon-svg:hover use,
.accordion.chemical-reactions .accordion-header:hover use,
.accordion.chemical-reactions .accordion-header.click use{
    fill: #906;
}
/* light sound action */
.accordion.light-sound-action .accordion-header.click{
    background-color:#c30;
}
.accordion.light-sound-action .icon-svg:hover use,
.accordion.light-sound-action .accordion-header:hover use,
.accordion.light-sound-action .accordion-header.click use{
    fill: #c30;
}
/* big systems */
.accordion.big-systems .accordion-header.click{
    background-color:#06c;
}
.accordion.big-systems .icon-svg:hover use,
.accordion.big-systems .accordion-header:hover use,
.accordion.big-systems .accordion-header.click use{
    fill: #06c;
}
/* evolution and heredity */
.accordion.evolution-and-heredity .accordion-header.click{
    background-color:#104710;
}
.accordion.evolution-and-heredity .icon-svg:hover use,
.accordion.evolution-and-heredity .accordion-header:hover use,
.accordion.evolution-and-heredity .accordion-header.click use{
    fill: #104710;
}
/* chemical patterns */
.accordion.chemical-patterns .accordion-header.click{
    background-color:#606;
}
.accordion.chemical-patterns .icon-svg:hover use,
.accordion.chemical-patterns .accordion-header:hover use,
.accordion.chemical-patterns .accordion-header.click use{
    fill: #606;
}
/* motion and energy transfer */
.accordion.motion-and-energy-transfer .accordion-header.click{
    background-color:#900;
}
.accordion.motion-and-energy-transfer .icon-svg:hover use,
.accordion.motion-and-energy-transfer .accordion-header:hover use,
.accordion.motion-and-energy-transfer .accordion-header.click use{
    fill: #900;
}
/* science futures */
.accordion.science-futures .accordion-header.click{
    background-color:#039;
}
.accordion.science-futures .icon-svg:hover use,
.accordion.science-futures .accordion-header:hover use,
.accordion.science-futures .accordion-header.click use{
    fill: #039;
}
/* header */
header {
	height: 225px;
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
}
/* header header-fixed */
#header-fixed {
	background-color: #fff;
	height: 102px;
	position: fixed;
	width: inherit;
	z-index: 1000;
	border-bottom: 1px solid #666;
}
#header-fixed > div {

    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 1170px;
}
#header-banner {
	height: 125px;
	position: absolute;
	top: 100px;
	width: 100%;
	background: #333 url(../images/banners/banner.jpg) no-repeat center top;
}
#header-banner > div {
	height: inherit;
	margin: 0 auto;
	position: relative;
	width: 1170px;
}
#header-banner > div > div{
    display: inline-block;
    position: absolute;
    padding: .3rem .5rem;
    left: 0;
    bottom: 0;
}
#header-banner > div  > div > h2 {
    color: #fff;
	margin-bottom:0;
}
/* header logo */
#logoWrapper {
	float: left;
	position: relative;
	margin-top:8px;
}
header a.logo {
	background: url(../../images/logo.png) no-repeat;
	display: inline-block;
	height: 89px;
	width: 204px;
}
header a.logo span {
	display: none;
}
header a.help {
	bottom: 0;
	position: absolute;
	right: 0;
}
/* header menu */
header #menu {
	height: 37px;
	left: 210px;
	position: absolute;
	top: 78px;
}
header #menubar {
	height: 27px;
	position: relative;
	width: 100%;
}
header #menubar::after {
	content: '';
	display: block;
	clear: both;
}
/* header navigation */
header nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 9999;
}
header nav ul li {
	float: left;
	position: relative;
}
header nav ul li a {
	display: inline-block;
	color: #555;
	margin: 0 .4rem;
	padding: 2px .4rem;
	text-decoration: none;
	position: relative;
	background-color: #fff177;
	border-radius: .3rem .3rem 0 0;
	text-align: center;
	height: 23px;
}
header nav ul li a:hover {
	background-color: #ffcd44;
}
header nav ul li.click a {
	font-weight: bold;
	background-color: #ffcd44;
}
a.mobile-menu {
	background: url(/images/icon_menu.svg) no-repeat 0 0;
	display: none;
	height: 32px;
	left: 10px;
	position: absolute;
	width: 32px;
}
/* header arrow */
header nav ul li.click::after{
    background-color: none;
    border-top: 0.625rem solid #ffcd44;
    border-left: 0.625rem solid transparent;
    border-right: 0.625rem solid transparent;
    content: "";
    display: block;
    height: 0;
    margin: 0 auto;
    position: relative;
    width: 0;
}
/* header user type*/
header #userTypeWrapper {
	margin: 0 auto;
	position: relative;
	text-align: center;
	top: 130px;
	width: 800px;
}
header .user-type {
	background-color: #333;
    border: 2px solid #fff;
    color: #fff;
    float: left;
    font-size: 1.125rem;
    font-weight: 500;
    height: 50px;
    text-align: center;
    text-decoration: none;
    width: 300px;
}
header .user-type:hover {
	background-color:#090;
}
header .user-type[data-role=teacher] {
	margin-left: 200px;
}
header .user-type span {
	display: block;
}
/* intro-block */
#intro-block-content{
	background-color: #fff;
    margin: 0 auto;
    max-width: 1170px;
    padding: 2rem 0.5rem;
    position: relative;
	 font-size: 1.125rem;
}
#intro-block-content .block-left{
	 float:left; 
	 width: 68%;
}
#intro-block-content .block-right{
	 float:right; 
	 width: 300px;
}
/* intro-block-nav */
#intro-block-nav {
    background-color: #e1e1e1;
   /* margin-bottom: 1rem;*/
    padding-bottom: 1rem;
}
#intro-block-nav h2{
    color: #090;
    padding: 1rem 0;
    text-align: center;
}
.intro-block-nav {
    margin: 0 auto;
    width: 1024px;
}
.intro-block-nav > div {
    color: #333;
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0 0.9rem;
    text-align: center;
}
.intro-block-nav .caption {
    color: #333;
}
.intro-block-nav a {
    display: block;
}
.intro-block-nav a:hover .caption {
    color: #090; 
}
.intro-block-nav  .about-the-program{
    width: 170px;
	height: 206px;
}
.intro-block-nav  .curriculum-units{
    width: 185px;
	height: 176px;
}
.intro-block-nav  .teacher-materials{
    width: 175px;
	height: 166px;
}
.intro-block-nav  .news-and-events{
    width: 170px;
	height: 176px;
}
.intro-block-nav  .snapshot-examples{
    width: 180px;
	height: 161px;
}
.intro-block-nav > div.click::after {
    background-color: #e1e1e1;
    border-bottom: 1rem solid #fff;
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    content: "";
    display: block;
    height: 0;
    margin: 0 auto;
    position: relative;
    top: 2px;
    width: 0;
}
.intro-block-nav > div.click .caption {
    color: #090;
}
/* news and events */
article.news-and-events {
    border-top: 3px solid #666;
    padding-top: 1rem;
	padding-bottom: 1rem;
}
article.news-and-events h2{
	color: #090;
}
article.news-and-events .block-left{
	 float:left; 
	 width: 68%;
}
article.news-and-events .block-right{
	 float:right; 
	 width: 300px;
}	 
/* footer */
footer {
	background-color: #333;
	height: 60px;
	position: relative;
	/*margin: 2rem auto 0;*/
	margin: 0 auto;
}
footer > div{
	height: 60px;
	position: relative;
	margin: 0 auto 0;
    max-width: 1170px;
}
footer > div > a{
	background: url(../images/shinedome.png) no-repeat left center;
	height: 34px;
	position: relative;
	margin-top: 13px;
    width: 91px;
	display: inline-block;
}
footer .links {
	bottom: 10px;
    color: #fff;
    position: absolute;
    right: 10%;
}
footer .links a {
	color: #fff;
}
/* main */
.main {
	background-color: #fff;
    margin: 0 auto;
    max-width: 1170px;
    position: relative;
	padding: 1rem .5rem;
	/*min-height: 600px;*/
}
.main:before, .main:after {
	content: "";
	display: table;
}
.main:after {
	clear: both;
}
ul {
	padding-left: 15px;
}
/* main - overlay (homepage)*/
.overlay-cover {
	width: 100%;
	position: absolute;
	top: 225px;	
	background-color: #181818;
	opacity: 0.9;
	z-index: 10; 
}
.overlay-wrapper{
	position: absolute;
	top: 225px; 
	left: 0; 
	width: 100%
}
.overlay {
	background: white none repeat scroll 0 0;
    border-radius: 3px;
    margin: 2rem auto 0; 
    padding: 20px;
    position: relative;
    width: 510px;
    z-index: 100;
}
.overlay input[type=email], .overlay input[type=password] {
	width: 20rem;
}
/* loginForm (homepage)*/
#loginForm form {
	margin-bottom: 10px; 
}
#loginForm form th{
	width: 15%; 
}
#loginForm form td {
	width: 85%;
}
#loginForm [data-type=err-msg] {
    height: 3rem;
}
#loginForm [data-type=err-msg] a.text-link {
    color: #f00;
}
#loginForm .icon-svg.icon-close.small {
	position: absolute;
	right: 3px;
	top: 3px;
}
/* category (student/teacher curriculum unit pages)*/
.category > div {
	display: flex;
}
.category::after {
	display: block;
	content: '';
}
.category.general-hr {
	border-top: 3px solid #666;
	padding-top: 0.5em;
}
.category.yr-hrs > div > div:first-child {
	border-bottom: 3px solid #9c0;
	padding-top: 0.5em;
}
.category.yr-hrs > div > div:nth-child(2) {
	border-bottom: 3px solid #c00;
	padding-top: 0.5em;
}
.category.yr-hrs > div > div:nth-child(3) {
	border-bottom: 3px solid #f90;
	padding-top: 0.5em;
}
.category.yr-hrs > div > div:nth-child(4) {
	border-bottom: 3px solid #3cf;
	padding-top: 0.5em;
}
.category.yr-hrs span {
	text-align: center;
	display: block;
	padding-bottom: .5em;
	font-weight: 500;
}
.category.archive-hr {
	border-top: 3px solid #666;
	padding-top: 0.5em;
}
.category .thumbnail {
	display: inline-block;
    width: 23.5%;
    margin-bottom: 10px;
    margin-right: 2%;
    vertical-align: top;
}
.category .thumbnail:last-child {
    margin-right: 0;
}
/* thumbnails (student/teacher curriculum unit pages, pl portal page)*/
.thumbnail a {
	display: inline-block;
	height: auto;
	width: 100%;
	text-decoration: none;
}
.thumbnail .link {
	line-height: 0px;
}
.thumbnail .link img {
	width: 100%;
	height: auto;
}
.thumbnail .caption {
	color: #fff;
	margin: 0 auto;
	padding: .25rem .5rem;
	width: 100%;
	text-align: center;
}
/* pl (pl portal page)*/
.pl-block {
	margin-bottom: 20px;
}
.pl-block .pl-img {
	float: left;
	margin-right: 5px;
	width: 11%;
}
.pl-block .pl-img img {
	display: block;
	margin: 0 auto;
}
.pl-block .pl-link {
	/*display: table;*/
	float: left;
	height: 110px;
	width: 88%;
	position: relative;
}
.pl-block.implementing-sbd .pl-img {	 
	width: 26%;
}
.pl-block.implementing-sbd .pl-link {
	height: 300px;
	width: 73%;
}
.pl-block.implementing-sbd + .pl-block.implementing-sbd .pl-link {
	height: 210px;
}
.pl-block .middle {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.pl-block .cdrom-link {
	display: inline-block;
	vertical-align: top;
	width: 14%;
}
.pl-block .cdrom-desc {
	display: inline-block;
	width: 85%;
}
/* (student/teacher guide) */
header .unit-title {
	background-color: #333;
	bottom: 10px;
	color: #fff;
	left: 150px;
	padding: 5px 10px;
	position: absolute;
}
h2.unit-category{
	border-bottom: 4px solid #fff;
	padding-bottom: .5em;
}
.unit-nav {
	width: 24.8%;
	float: left;
	padding-right: 10px;
}
.unit-content  {
	width: 75%;
	float: left;
}
/* (teacher/index.php) */
.main[data-type=curriculum][data-role=teacher] .unit-nav .unit-resources{
	margin-top:.5em;
	border-bottom: 4px solid #fff;
}
/* accordion */
.main[data-type=curriculum][data-role=teacher] .unit-content h3 {
	border-bottom: 1px solid #666;
    margin-top: 8px;
}
.main[data-type=curriculum][data-role=teacher] #generalInfo .accordion-content {
	background-color: #eee;
	padding: 0 10px;
}
.main[data-type=curriculum][data-role=teacher]  #tgContent .accordion-content > div {
	display: flex; /* equal height of the children (.act-column will have the same height)*/
}
.main[data-type=curriculum][data-role=teacher] .accordion-content .act-column.lesson-type {
	width: 20%;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content .act-column.description {
	width: 32%;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content .act-column.lesson-plan {
	width: 16%;
	min-width: 120px;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content .act-column.student-guide {
	width: 16%;
	min-width: 120px;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content .act-column.enotebook {
	width: 16%;
	min-width: 120px;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content[data-type=has-supplements] .act-column.description + div {
	width: 48%;
	min-width: 360px;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content[data-type=has-supplements] .act-column.lesson-plan {
	width: 33%;
	min-width: 120px;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content[data-type=has-supplements] .act-column.student-guide {
	width: 34%;
	min-width: 120px;
}
.main[data-type=curriculum][data-role=teacher] .accordion-content[data-type=has-supplements] .act-column.enotebook {
	width: 33%;
	min-width: 120px;
}
/* (student/index.php) */
.main[data-type=curriculum][data-role=student] > p:first-child{
    padding-bottom: 0.5em;
}
.main[data-type=curriculum][data-role=student] .thumbnail  img {
	width: 100%;
	height: auto;
}
.main[data-type=curriculum][data-role=student] .icon-wrapper{
	display: inline-block;
	margin: 0 20px;
}
.main[data-type=curriculum][data-role=student] .icon-wrapper .caption{
	font-weight: 500;
}
.main[data-type=curriculum][data-role=student] .svg-wrapper a{
	margin:0 auto;
}
.main[data-type=curriculum][data-role=student] .icon-wrapper + .icon-wrapper {
    margin-top: 45px;
}

.main[data-type=curriculum][data-role=student] .unit-content > div:first-child{
    padding-bottom: 0.5em;
	float:left;
}

/* intro to sbd */
#header-banner[data-unit=intro-to-sbd] { 
	background: #1749bd url(/images/banners/intro-to-sbd.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=intro-to-sbd] a.text-link:hover{
	color: #090;
}
.main[data-type=curriculum][data-unit=intro-to-sbd] h2.unit-category,
.main[data-type=curriculum][data-unit=intro-to-sbd] .unit-nav .unit-resources{
	border-color: #090;
}
/* Enought water fit for drinking */
#header-banner[data-unit=enough-water] { 
	background: #49798b url(/images/banners/enough-water.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=enough-water] a.text-link:hover{
	color: #c00;
}
.main[data-type=curriculum][data-unit=enough-water] h2.unit-category,
.main[data-type=curriculum][data-unit=enough-water] .unit-nav .unit-resources{
	border-color: #c00;
}
/* Circle of life */
#header-banner[data-unit=circle-of-life] { 
	background: #6b4b25 url(/images/banners/circle-of-life.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=circle-of-life] a.text-link:hover{
	color: #9c0;
}
.main[data-type=curriculum][data-unit=circle-of-life] h2.unit-category,
.main[data-type=curriculum][data-unit=circle-of-life] .unit-nav .unit-resources{
	border-color: #9c0;
}
/* Science of toys */
#header-banner[data-unit=science-of-toys] { 
	background: #b8b8b8 url(/images/banners/science-of-toys.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=science-of-toys] a.text-link:hover{
	color: #f90;
}
.main[data-type=curriculum][data-unit=science-of-toys] h2.unit-category,
.main[data-type=curriculum][data-unit=science-of-toys] .unit-nav .unit-resources{
	border-color: #f90;
}
/* Earth and space */
#header-banner[data-unit=earth-and-space] { 
	background: #003 url(/images/banners/earth-and-space.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=earth-and-space] a.text-link:hover{
	color: #3cf;
}
.main[data-type=curriculum][data-unit=earth-and-space] h2.unit-category,
.main[data-type=curriculum][data-unit=earth-and-space] .unit-nav .unit-resources{
	border-color: #3cf;
}
/* from little things */
#header-banner[data-unit=from-little-things] { 
	background: #d9e7f9 url(/images/banners/from-little-things.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=from-little-things] a.text-link:hover{
	color: #0b0;
}
.main[data-type=curriculum][data-unit=from-little-things] h2.unit-category,
.main[data-type=curriculum][data-unit=from-little-things] .unit-nav .unit-resources{
	border-color: #0b0;
}
/* energy */
#header-banner[data-unit=energy] { 
	background: #000 url(/images/banners/energy.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=energy] a.text-link:hover{
	color: #f60;
}
.main[data-type=curriculum][data-unit=energy] h2.unit-category,
.main[data-type=curriculum][data-unit=energy] .unit-nav .unit-resources{
	border-color: #f60;
}
/* rock paper scissors */
#header-banner[data-unit=rock-paper-scissors] { 
	background: #f1dfd0 url(/images/banners/rock-paper-scissors.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=rock-paper-scissors] a.text-link:hover{
	color: #c39;
}
.main[data-type=curriculum][data-unit=rock-paper-scissors] h2.unit-category,
.main[data-type=curriculum][data-unit=rock-paper-scissors] .unit-nav .unit-resources{
	border-color: #c39;
}
/* rock your world  */
#header-banner[data-unit=rock-your-world] { 
	background: #2e3b38 url(/images/banners/rock-your-world.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=rock-your-world] a.text-link:hover{
	color: #09f;
}
.main[data-type=curriculum][data-unit=rock-your-world] h2.unit-category,
.main[data-type=curriculum][data-unit=rock-your-world] .unit-nav .unit-resources{
	border-color: #09f;
}
/* ecosystems and change */
#header-banner[data-unit=ecosystems-and-change] { 
	background: #9c3 url(/images/banners/ecosystems-and-change.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=ecosystems-and-change] a.text-link:hover{
	color: #197119;
}
.main[data-type=curriculum][data-unit=ecosystems-and-change] h2.unit-category,
.main[data-type=curriculum][data-unit=ecosystems-and-change] .unit-nav .unit-resources{
	border-color: #197119;
}
/* chemical reations  */
#header-banner[data-unit=chemical-reactions] { 
	background: #036 url(/images/banners/chemical-reactions.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=chemical-reactions] a.text-link:hover{
	color: #906;
}
.main[data-type=curriculum][data-unit=chemical-reactions] h2.unit-category,
.main[data-type=curriculum][data-unit=chemical-reactions] .unit-nav .unit-resources{
	border-color: #906;
}
/* light sound action */ 
#header-banner[data-unit=light-sound-action] { 
	background: #600 url(/images/banners/light-sound-action.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=light-sound-action] a.text-link:hover{
	color: #c30;
}
.main[data-type=curriculum][data-unit=light-sound-action] h2.unit-category,
.main[data-type=curriculum][data-unit=light-sound-action] .unit-nav .unit-resources{
	border-color: #c30;
}
/* big systems  */
#header-banner[data-unit=big-systems] { 
	background: #c63 url(/images/banners/big-systems.jpg) no-repeat center top  ;
}
.main[data-type=curriculum][data-unit=big-systems] a.text-link:hover{
	color: #06c;
}
.main[data-type=curriculum][data-unit=big-systems] h2.unit-category,
.main[data-type=curriculum][data-unit=big-systems] .unit-nav .unit-resources{
	border-color: #06c;
}
/* evolution and heredity  
#header-banner[data-unit=evolution-and-heredity] { 
	background: #000 url(/images/banners/evolution-and-heredity.jpg) no-repeat center top  ;
}*/
.main[data-type=curriculum][data-unit=evolution-and-heredity] a.text-link:hover{
	color: #104710;
}
.main[data-type=curriculum][data-unit=evolution-and-heredity] h2.unit-category,
.main[data-type=curriculum][data-unit=evolution-and-heredity] .unit-nav .unit-resources{
	border-color: #104710;
}
/* chemical patterns  
#header-banner[data-unit=chemical-patterns] { 
	background: #000 url(/images/banners/chemical-patterns.jpg) no-repeat center top  ;
}*/
.main[data-type=curriculum][data-unit=chemical-patterns] a.text-link:hover{
	color: #606;
}
.main[data-type=curriculum][data-unit=chemical-patterns] h2.unit-category,
.main[data-type=curriculum][data-unit=chemical-patterns] .unit-nav .unit-resources{
	border-color: #606;
}
/* motion and energy transfer  
#header-banner[data-unit=motion-and-energy-transfer] { 
	background: #000 url(/images/banners/motion-and-energy-transfer.jpg) no-repeat center top  ;
}*/
.main[data-type=curriculum][data-unit=motion-and-energy-transfer] a.text-link:hover{
	color: #900;
}
.main[data-type=curriculum][data-unit=motion-and-energy-transfer] h2.unit-category,
.main[data-type=curriculum][data-unit=motion-and-energy-transfer] .unit-nav .unit-resources{
	border-color: #900;
}
/* science futures  
#header-banner[data-unit=science-futures] { 
	background: #000 url(/images/banners/science-futures.jpg) no-repeat center top  ;
}*/
.main[data-type=curriculum][data-unit=science-futures] a.text-link:hover{
	color: #039;
}
.main[data-type=curriculum][data-unit=science-futures] h2.unit-category,
.main[data-type=curriculum][data-unit=science-futures] .unit-nav .unit-resources{
	border-color: #039;
}

/* table in portal pages*/
table.portal-table{ 
	border-collapse: 	collapse;
	width:100%;
	margin-bottom:.5rem;
}
table.portal-table tr:not(:last-child){ 
	border-bottom: 	1px solid #333;
}
table.portal-table td { 
	border:  none;
	padding: 		3px;
	vertical-align:text-top;
}
table.portal-table td:nth-child(even){
	background-color: #e1e1e1;
}
table.portal-table td:nth-child(odd) {
	background-color: #eee;
}
/* .accordion-group in portal page 'curriculum units' */
.accordion-group {
    padding-bottom: 100px;
}
.accordion-group .category > div.slide, 
.accordion-group .category > div.slide >*{
	display: none;
}
.accordion-group .category > div.slide >*.show{
	background-color: #eee;
    border-style: solid;
    border-width: 2px;
    display: block;
    padding: 0.5rem;
}
.accordion-group .thumbnail.click {
    margin-bottom: 0;
}
.accordion-group .thumbnail:hover{
	cursor: pointer;
}
/* video wrapper*/ 
.video-wrapper[data-type=fg-video] video {	
	background-color: #fff !important; 
	border:0 none !important;
}
.video-wrapper[data-type~=fg-video] .mejs-mediaelement {
    background-color: #fff !important;
}
.video-wrapper[data-type~=fg-video] + .desc {
    background-color: #333;
    color: #fff;
	height:2rem;
	width:100%;
	position:relative;
}
.video-wrapper[data-type~=fg-video]  .mejs-container {
	height:100% !important;
	width:100% !important;
}
.video-wrapper[data-type~=fg-video] + .desc p{
    position: absolute;
	top: 50%;
	left:5%;
	transform:translateY(-50%);
}
.mejs-overlay-button {
    background:  url(/curriculum/student/common/images/icon-playvideo.svg) no-repeat !important;
    height: 60px !important;
    margin: -30px 0 0 -30px !important;
    width: 60px !important;
}
.mejs-overlay:hover .mejs-overlay-button {
	background: url(../images/icons/icon-playvideo.svg) !important;
}
.video .desc {
    background-color: #333;
    color: #fff;
    font-family: "Ubuntu Condensed",sans-serif;
    padding: 0 0.625rem 0.3125rem;
}
/* category (student/teacher curriculum unit pages)*/
.category.pl .thumbnail {
	display: inline-block;
    margin-bottom: 3rem;
    margin-right: 9%;
    vertical-align: top;
    width: 18.2%;
	position: relative;
}
.category.pl .thumbnail:last-of-type {
    background-color: transparent !important;
}
.category.pl .thumbnail:last-of-type a {
   background-color: #666;
   position: absolute;
   bottom:0;
}
 
.category.pl .thumbnail:nth-child(4n) {
    margin-right: 0;
}
 .category.pl .thumbnail:last-child {
    margin-right: 0;
	vertical-align: bottom;
}
/* video-gallery  in portal page 'Snapshot examples' */
.video-gallery {
	position: relative;
	height: 370px;
	margin-top:2rem;
}
/* video gallery - videos */
.video-gallery .videos  {
	height: 370px;
    position: relative;
    width: 52%;
	float:left;
}
.video-gallery .videos/*:root*/ .mejs-poster img {
    display: block;
}
.video-gallery .videos> .video{	
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility:hidden;
	background-color: #333;
}
.video-gallery .videos > .video.current{
	visibility:visible;
}
.video-gallery .videos > .video > .video-wrapper{	
	height: 91.3%;
    width: 100%;
}
.video-gallery .videos .desc{
	height: 36px;
    padding-bottom: 0;
    position: relative;
}
/* video gallery - img-holder */
.video-gallery .img-holder {
	 height:100%;
	 float:left;
	 width:22%;
} 
.video-gallery .img-holder[data-type=left] {
	 margin-left: 1%;
	 margin-right: 1%;
} 
.video-gallery .img-holder[data-type=right] {
	 margin-left: 1%;
	 margin-right: 1%;
}
.video-gallery .img-holder > img {
    height: auto;
    width: 78.6%;
}
.video-gallery .img-holder > img:hover {
	cursor:pointer;
}
.video-gallery .img-holder > .icon-svg {
    height: 9.5%;
    width: 17.7%;
}
.video-gallery .img-holder   use:hover, .video-gallery .img-holder .icon-svg.hover use {
    fill:#090;
	cursor:pointer;
}
.video-gallery .img-holder .icon-svg.icon-arrow-next {
	display: inline-block;
    float: right;
    margin-left: 1%;
}
.video-gallery .img-holder .icon-svg svg {
    height: 100%;
    width: 100%;
}
.video-gallery .img-holder .icon-svg.icon-arrow-back {
	display: inline-block;
    float: left;
    margin-right: 1%;
}
/* porta page - professional learning */
#portal13 h2+p{
	border-bottom: 3px solid #666;
	padding-bottom: 3px;
}
#portal13 .category.pl{
	border-top: 3px solid #666;
	padding-top: 1rem;
}
/* acknowledgements */
#acknowledgements .multimedia{
	word-wrap:break-word;
}
#acknowledgements .multimedia span{
	font-weight: 500;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
	display: none;
}
.mejs-container .mejs-controls {
    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.65)) !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)) !important;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
	background: hsla(0,0%,100%,.3) !important;
}
@media screen and (max-width: 1050px) {
	body, #header-fixed {
		width: 1024px;
	}
  
  	/* video-gallery  */
	.video-gallery {
		position: relative;
		height: 370px;
		margin-top:2rem;
	}
	/* video gallery - videos */
	.video-gallery .videos  {
		height: 370px;
		position: relative;
		width: 52%;
		float:left;
	}
	.video-gallery .videos/*:root*/ .mejs-poster img {
		display: block;
	}
	.video-gallery .videos> .video{	
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		visibility:hidden;
		background-color: #333;
		/*z-index:-1;*/
	}
	.video-gallery .videos > .video.current{
		visibility:visible;
	}
	.video-gallery .videos > .video > .video-wrapper{	
		height: 91.3%;
		width: 100%;
	}
	.video-gallery .videos .desc{
		height: 36px;
		padding-bottom: 0;
		position: relative;
	}
	/* video gallery - img-holder */
	.video-gallery .img-holder {
		 height:100%;
		 float:left;
		 width:22%;
	} 
	.video-gallery .img-holder[data-type=left] {
		 margin-left: 1%;
		 margin-right: 1%;
	} 
	.video-gallery .img-holder[data-type=right] {
		 margin-left: 1%;
		 margin-right: 1%;
	}
	.video-gallery .img-holder > img {
		height: auto;
		width: 78.6%;
	}
	.video-gallery .img-holder > a {
		height: 9.5%;
		width: 17.7%;
	} 
	.video-gallery .img-holder .icon-svg:hover use {
		fill:#090;
	}
	.video-gallery .img-holder .icon-svg.icon-arrow-next {
		display: inline-block;
		float: right;
		margin-left: 1%;
	}
	.video-gallery .img-holder .icon-svg svg {
		height: 100%;
		width: 100%;
	}
	.video-gallery .img-holder .icon-svg.icon-arrow-back {
		display: inline-block;
		float: left;
		margin-right: 1%;
	}
	.pl-block.implementing-sbd .pl-img {
    	width: 30%;
	}
	.pl-block.implementing-sbd .pl-link {
		width: 69%;
	}
}


      
.main[data-type=teacher-guide-temp] .unit-content > div:first-child{/* temp will be removed after all units are revised */
	float:left;
}



.category.teacher-info .thumbnail .caption{	
	color: #333;	
	text-align:left;
}