/* SIDE template*/
/* Do not edit this, edit the CSS specific to your resource  */
html, body {
  margin: 0 0 -1px 0;
  padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  background-color: #000;
  background-image: url(../images/bg.jpg);
  background-repeat: repeat;
  background-position: center bottom 1px;
  background-attachment: fixed;
  overflow-y: auto;
  overflow-x: hidden; }

body::-webkit-scrollbar {
  background-color: #250709;
  border-left: 2px solid rgba(0, 0, 0, 0.3); }

body::-webkit-scrollbar-thumb {
  background-color: #FAFAF9;
  outline: 1px solid #fff;
  border-radius: 3px; }

body::-webkit-scrollbar-button {
  background-color: black;
  min-height: 45px; }

body {
  scrollbar-highlight-color: #7D7E94; }

.IntroLinkWrapper p {
  font-size: 95%;
  margin: .2vh 0 .2vh 0; }
  .IntroLinkWrapper p:last-of-type {
    margin-bottom: 2vh; }

#VideoScreen {
  display: none;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 1px);
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0; }

#VideoHeader {
  display: block;
  margin: 0 auto 0 auto;
  padding: 0;
  height: calc(10vh - 10px);
  width: 100%; }
  #VideoHeader h2 {
    text-align: center;
    padding: 0;
    margin: 1vh auto 0 auto;
    display: block;
    font-size: calc(2vh + 2vw - 10px);
    max-width: calc(100% - 16vh - 20px - 2vw);
    font-family: Kalam;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
  #VideoHeader img {
    display: block;
    height: calc(7vh - 10px);
    max-height: 70px;
    padding: 0;
    position: fixed;
    top: 1vw;
    right: 1vw;
    opacity: .8; }
    #VideoHeader img:hover {
      opacity: 1;
      cursor: pointer; }

.Transcript {
  text-align: left;
  background-color: #e6e6e6;
  border: 1px solid #d1d1d1;
  padding: 0 .5vw 0 .5vw;
  border-radius: .5vh;
  font-size: 80%; }
  .Transcript .TranscriptButton {
    display: block;
    width: 100%;
    text-align: center; }
  .Transcript p {
    border: none !important;
    display: none; }
    .Transcript p:first-of-type {
      margin-bottom: 0 !important; }
  .Transcript:hover {
    background-color: #fff;
    cursor: pointer; }

#VideoFooter {
  display: block;
  color: #fff; }
  #VideoFooter .Icon {
    margin: 2vh 0 0 2vw;
    display: inline-block; }
  #VideoFooter p {
    display: inline-block;
    padding: 40px 0 0 1vw; }
  #VideoFooter #Bandwidth {
    display: block;
    height: 80px;
    position: fixed;
    bottom: 0;
    right: 1vw; }
    #VideoFooter #Bandwidth p {
      padding: 0;
      margin: 0; }
    #VideoFooter #Bandwidth a {
      display: inline-block;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 10px 0 0 0;
      margin: 0 0 0 1vw;
      height: 70px;
      width: 60px;
      text-align: center;
      text-decoration: none;
      color: transparent;
      background-position: top 1vh center;
      background-repeat: no-repeat;
      opacity: 0.6; }
      #VideoFooter #Bandwidth a:hover {
        opacity: 1; }
      #VideoFooter #Bandwidth a:nth-of-type(1) {
        background-image: url(../images/low.svg); }
      #VideoFooter #Bandwidth a:nth-of-type(2) {
        background-image: url(../images/medium.svg); }
      #VideoFooter #Bandwidth a:nth-of-type(3) {
        background-image: url(../images/high.svg); }
    #VideoFooter #Bandwidth .BandActive {
      opacity: 1;
      background-color: black; }

#VideoHolder {
  display: block;
  margin: 0 auto 0 auto;
  vertical-align: middle;
  line-height: 80vh; }
  #VideoHolder video {
    margin: 0 auto 0 auto;
    display: block;
    height: calc(84vh - 90px);
    max-width: 90vw;
    max-height: calc((90vw / 16) * 9);
    border: 10px solid #000; }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@media screen and (max-width: 1000px) {
  body {
    font-size: 14px; } }

@media screen and (max-width: 600px) {
  body {
    font-size: 12px; } }

div {
  padding: 0;
  margin: 0; }

h1, h2 {
  padding: 0;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

h1 {
  margin: 0 auto 0 auto;
  display: inline-block;
  font-family: Kalam; }

h2 {
  width: calc(90vw + 4vw);
  max-width: calc(900px + 4vw);
  margin: 2vh auto 0 auto; }

h3, .IntroLink {
  display: block;
  font-size: 130%;
  width: 90vw;
  max-width: 900px;
  padding: 1vh 3vw 1vh 1vw;
  margin: 2vh auto 0 auto;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.8);
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  background-image: url(../images/Right_Arrow.png);
  background-repeat: no-repeat;
  background-position: center right 2vw;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); }
  h3:hover, .IntroLink:hover {
    cursor: pointer;
    background-color: #999;
    background-image: url(../images/Down_Arrow.png) !important;
    background-color: rgba(255, 255, 255, 0.9); }

.IntroLink {
  border: 1px solid #777;
  border-radius: .5vw;
  width: calc(90vw - 4vw);
  max-width: calc(900px - 4vw);
  text-decoration: none;
  color: #fff;
  background-size: auto 90%; }
  .IntroLink:hover {
    color: #fff; }
  .IntroLink:nth-of-type(1) {
    background-image: url(../images/IND4TL001.png);
    background-color: #AC6100;
    text-shadow: -1px -1px 0 #AC6100, 1px -1px 0 #AC6100, -1px 1px 0 #AC6100, 1px 1px 0 #AC6100; }
    .IntroLink:nth-of-type(1):hover {
      background-image: url(../images/IND4TL001.png) !important; }
  .IntroLink:nth-of-type(2) {
    background-image: url(../images/IND4TL002.png);
    background-color: #408255;
    text-shadow: -1px -1px 0 #408255, 1px -1px 0 #408255, -1px 1px 0 #408255, 1px 1px 0 #408255; }
    .IntroLink:nth-of-type(2):hover {
      background-image: url(../images/IND4TL002.png) !important; }
  .IntroLink:nth-of-type(3) {
    background-image: url(../images/IND4TL003.png);
    background-color: #3E75C3;
    text-shadow: -1px -1px 0 #3E75C3, 1px -1px 0 #3E75C3, -1px 1px 0 #3E75C3, 1px 1px 0 #3E75C3; }
    .IntroLink:nth-of-type(3):hover {
      background-image: url(../images/IND4TL003.png) !important; }
  .IntroLink:hover {
    color: #000;
    background-color: #fff !important;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; }

h4 {
  margin: 0;
  padding: 0;
  font-size: 130%;
  color: #242E5B; }

Header, #Synopsis {
  margin: 0 auto 0 auto; }

Header {
  display: block;
  width: calc(90vw + 0vw);
  max-width: calc(900px + 0vw);
  padding: 0 2vw 0 2vw;
  background-color: rgba(255, 255, 255, 0.95);
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  overflow: visible; }
  Header h2 {
    margin: 0;
    padding: 0;
    font-family: Kalam; }

#wrapper {
  display: block;
  padding: 0 3vw 5vh 3vw;
  margin: 0 auto 0 auto;
  min-height: calc(100vh - 59px - .05vw - 6.5vh);
  background-color: rgba(255, 255, 255, 0.9);
  background-repeat: repeat;
  width: calc(92vw + 2vw);
  max-width: calc(1000px + 0vw);
  border-left: 2px solid #1C1306;
  border-right: 2px solid #1C1306; }

nav {
  display: block;
  width: 100%;
  margin: 0 0 .5vh 0;
  padding: 0; }
  nav a {
    display: inline-block;
    position: relative;
    width: calc((90vw / 4) - .5vw);
    max-width: calc((900px / 4) - .5vw);
    text-align: center;
    margin: 0 .25vw 1.2vh .25vw;
    padding: .7vh 0 .2vh 0;
    background-color: #202020;
    border-bottom-left-radius: .5vh;
    border-bottom-right-radius: .5vh;
    color: #fff;
    text-decoration: none; }
    nav a:nth-of-type(1) {
      background-color: #000; }
    nav a:nth-of-type(2) {
      background-color: #AC6100; }
    nav a:nth-of-type(3) {
      background-color: #408255; }
    nav a:nth-of-type(4) {
      background-color: #3E75C3; }
    nav a:hover {
      padding: .7vh 0 1.2vh 0;
      margin: 0 .25vw 0 .25vw; }
    nav a:nth-of-type(5) {
      margin: 0;
      border-bottom-right-radius: 0vh; }
      nav a:nth-of-type(5):hover {
        margin: 0;
        padding: .7vh 0 .2vh 0;
        background-color: #fff;
        color: #000000; }
  nav .active {
    padding: .7vh 0 1.2vh 0;
    margin: 0 .25vw 0 .25vw;
    cursor: default; }
  nav .Accessible {
    background-color: #B40000 !important;
    color: white !important;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    max-width: 100px; }

@media screen and (max-width: 1165px) {
  nav .Accessible {
    display: inline-block;
    position: relative;
    top: auto;
    right: auto;
    float: right;
    background-color: #fff;
    color: #000; } }

#Synopsis {
  width: calc(90vw + 2vw);
  max-width: calc(900px + 2vw);
  display: block;
  padding: 1vh 1vw 0 1vw;
  border: 1px solid #777;
  border-top: none;
  border-bottom-left-radius: .5vw;
  border-bottom-right-radius: .5vw;
  background-color: rgba(255, 255, 255, 0.95);
  background-position: bottom right;
  background-size: auto 10vh;
  background-repeat: no-repeat; }
  #Synopsis p {
    padding: .5vh 1vw .5vh 1vw; }
  #Synopsis img {
    display: block;
    margin: 0 auto 0 auto;
    width: 90vw;
    max-width: 650px; }

#ExpandHolder {
  margin: 0 auto 0 auto;
  width: calc(90vw + 2vw);
  max-width: calc(900px + 2vw);
  display: block;
  padding: .5vh 0 .5vh 0; }

#AllButton {
  display: block;
  float: right;
  border: 1px solid #777;
  border-radius: .5vw;
  padding: 1vh 2vw 1vh 2vw;
  margin: .5vh -1vw 0 0;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.6);
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
  #AllButton:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9); }

#PackageFocus {
  margin-top: calc(3.5vh + 16px); }

.closed {
  border: 1px solid #777;
  border-radius: .5vw; }

.open {
  border: 1px solid #777;
  border-radius: .5vw;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: white !important;
  background-image: url(../images/Down_Arrow.png) !important;
  box-shadow: 0px 0px 0px transparent; }
  .open:hover {
    background-image: url(../images/Up_Arrow.png) !important; }

.reveal {
  padding: 1vh 2vw 1vh 2vw;
  width: 90vw;
  max-width: 900px;
  display: flex;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 0 auto 2vh auto;
  border: 1px solid #777;
  border-radius: .5vw;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  line-height: 150%;
  vertical-align: top;
  flex-flow: row wrap; }
  .reveal li {
    line-height: 180%; }
  .reveal p {
    margin: 0;
    padding: .5vh 0 .5vh 0; }
    .reveal p.fullwidth {
      width: 100%; }

/*#Activities .reveal, #Assessments .reveal{

	p:first-of-type{

		width:100%;

		display: block;

		border-bottom: 1px solid #d1d1d1;

		margin-bottom:1vh;

	}

}*/
#Students, #Language, .LanguagesResources {
  width: 45vw;
  max-width: calc(450px - 0vw);
  display: inline-block;
  height: 100%;
  min-width: 300px; }

#Language {
  width: calc(43vw - 0px);
  max-width: calc(450px - 2vw - 2px);
  margin-left: 2vw; }

.Resources {
  width: 50vw;
  max-width: calc(500px - 0vw);
  display: inline-block;
  height: 100%;
  min-width: 300px; }

.LanguagesResources {
  width: calc(38vw - 0px);
  max-width: calc(400px - 2vw - 2px);
  margin-left: 2vw; }

.VidIcon {
  display: inline-block;
  border: 1px solid #000;
  border-radius: .2vw;
  height: 80px;
  width: 160px;
  background-size: cover;
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  margin: .2vw .5vw 1vw 0vw;
  text-align: center;
  padding: 10px 0 0 0; }
  .VidIcon img {
    margin: 10px auto 0 auto;
    height: 70px; }
  .VidIcon:hover::after {
    content: "Launch video";
    display: block;
    background-color: #F6F6F7;
    background-image: url(../images/Left_Arrow.png);
    background-position: left 3px center;
    background-repeat: no-repeat;
    color: #505050;
    font-size: 80%;
    position: relative;
    float: left;
    top: 10px;
    min-height: 24px;
    right: -152px;
    width: 230px;
    z-index: 99;
    border-style: solid;
    border-width: 1px;
    border-color: #DCDDE2 #D9DADF #9f9898 #505050;
    box-shadow: -4px 4px 3px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-left: 5px;
    font-weight: normal;
    text-shadow: 0px 0px 0 #505050, 0px 0px 0 #505050, 0px 0px 0 #505050, 0px 0px 0 #505050; }

@media screen and (max-width: 700px) {
  #Students, #Language, .Resources, .LanguagesResources {
    width: 86vw;
    max-width: none; } }

.Overview {
  display: inline-block;
  float: right;
  border-radius: .2vw;
  line-height: 1;
  margin: 0 0 .2vw 2vw;
  padding: 0;
  text-decoration: none;
  text-align: center;
  height: calc(80px + 0vw);
  width: calc(60px + 1vw);
  background-position: top center;
  background-size: 60px 80px !important;
  background-repeat: no-repeat;
  vertical-align: baseline; }
  .Overview::after {
    content: "";
    font-size: 1px;
    color: #rgba 0, 0, 0, 0; }

.OverviewContent {
  font-family: Kalam;
  position: relative;
  top: calc(82px + 0vw);
  font-size: 120%;
  width: 100%;
  color: #000;
  font-weight: bold;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: .2vw; }

.Icon {
  display: inline-block;
  border-radius: .3vw;
  margin: 0 1vw 0 0;
  padding: .2vw;
  text-decoration: none;
  text-align: center;
  height: 80px;
  width: 60px;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  filter: saturate(70%);
  filter: opacity(80%);
  background-position: bottom -1px left -1px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: transparent;
  user-select: none; }
  .Icon:hover {
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.8);
    filter: saturate(100%);
    filter: opacity(100%);
    z-index: 98;
    position: relative; }
    .Icon:hover::after {
      content: "";
      display: block;
      background-color: #F6F6F7;
      background-image: url(../images/Left_Arrow.png);
      background-position: left 3px center;
      background-repeat: no-repeat;
      color: #505050;
      font-size: 80%;
      position: relative;
      float: left;
      top: 10px;
      min-height: 24px;
      right: -52px;
      width: 230px;
      z-index: 99;
      border-style: solid;
      border-width: 1px;
      border-color: #DCDDE2 #D9DADF #9f9898 #505050;
      box-shadow: -4px 4px 3px rgba(0, 0, 0, 0.3);
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      padding-left: 5px; }

@media screen and (max-width: 600px) {
  .Overview {
    height: calc(60px + 0vw);
    width: calc(45px + 1vw);
    background-size: 45px 60px !important; }
  .OverviewContent {
    top: calc(62px + 0vw); } }

.PDF {
  background-image: url(../images/PDF.svg); }
  .PDF:hover::after {
    content: "Download Acrobat document"; }

.DOC {
  background-image: url(../images/DOC.svg); }
  .DOC:hover::after {
    content: "Download Word document"; }

.DOCX {
  background-image: url(../images/DOCX.svg); }
  .DOCX:hover::after {
    content: "Download Word document"; }

.PPSX {
  background-image: url(../images/PPSX.svg); }
  .PPSX:hover::after {
    content: "Download PowerPoint document"; }

.PPTX {
  background-image: url(../images/PPTX.svg); }
  .PPTX:hover::after {
    content: "Download PowerPoint document"; }

audio {
  margin: 0 0 -50px 0;
  padding: 0;
  position: relative;
  top: -50px !important;
  left: 80px !important;
  display: inline-block;
  height: 50px;
  max-width: calc(500px - 60px - 2vw); }

@media screen and (max-width: 1000px) {
  audio {
    max-width: calc(48vw - 60px - 2vw); } }

@media screen and (max-width: 780px) {
  audio {
    max-width: calc(80vw - 60px - 2vw); } }

.MP3 {
  background-image: url(../images/MP3.svg); }
  .MP3:hover::after {
    content: "Download .MP3 Audio file"; }

.MP4 {
  background-image: url(../images/MP4.svg); }
  .MP4:hover::after {
    padding: 5px 0 0 0;
    content: "Download .MP4 video file"; }

.DocTitle, .DocTitleLonger {
  font-family: Kalam;
  color: #202020;
  display: inline-block;
  font-size: 130%;
  font-weight: bold;
  max-width: calc(100% - 140px - 2vw); }

.DocTitleLonger {
  width: 100%;
  max-width: calc(100% - 80px - 2vw); }

.subText {
  display: block;
  font-size: 90%;
  margin: -2px 0 1vh 0;
  clear: both; }

.ResGroup {
  display: block;
  border-bottom: 1px solid #d1d1d1;
  padding: .5vw 0 .8vh 0;
  margin: 0 0 .5vh -.5vw; }

.note {
  display: block;
  padding: .5vh 1vw .5vh 1vw;
  width: calc(100% - 2vw);
  background-color: #6C6D6D;
  color: #fff; }

.DontPrint {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1px;
  color: rgba(255, 255, 255, 0); }

.BasicInstruction {
  display: block;
  width: 100%;
  clear: both;
  font-size: 80%;
  color: #707070;
  border-top: 1px solid #d1d1d1;
  padding-top: 1vh; }

#Resources {
  max-width: 400px; }

footer {
  margin: 0;
  padding: .5vh 1vw .2vh 1vw;
  background-color: #000;
  display: block;
  overflow: visible;
  min-height: calc(61px + .7vh); }

#Copyright {
  position: relative;
  font-size: 90%;
  display: block;
  float: right;
  color: #A9B0AA;
  padding: 0 0 0 0;
  text-align: right; }
  #Copyright a, #Copyright p {
    color: white;
    display: inline-block;
    padding: 0;
    margin: 0; }
  #Copyright img {
    height: 40px;
    margin: 0 0 0 2vw; }

#DoELogo {
  position: relative;
  display: block;
  float: left;
  color: #fff; }
  #DoELogo img {
    height: 60px; }

/*

@media screen and (max-width: 550px){

	

}*/
@media print {
  .Transcript {
    border: none; }
    .Transcript p {
      display: block;
      width: 100%; }
  .TranscriptButton {
    display: none !important; }
  #AllButton, nav, .BasicInstruction, .DontPrint {
    display: none; }
  #Students, #Language, .DocTitle, .DocTitleLonger, .subText, .ResGroup, .Resources, .LanguagesResources {
    display: inline-block !important;
    width: 100%;
    max-width: 100%; }
  .DocTitle, .DocTitleLonger {
    width: auto; }
  h3, .open, .closed, Header, #Synopsis {
    background-color: #fff;
    background-image: image(none);
    border: none;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0); }
  h3 {
    margin-left: 0; }
    h3::before {
      display: inline-block;
      height: 1px;
      width: 1px;
      margin: 0;
      padding: 0; }
  #Students, .reveal {
    display: block !important;
    border: none;
    page-break-after: always; }
  #Students:after, .reveal:after {
    font-size: 60%;
    display: block;
    text-align: center;
    content: "Copyright Department of Education WA 2017"; }
  .Icon, .VidIcon, audio, footer {
    display: none !important; }
  .note {
    color: #000;
    background-color: #fff; } }