/***********************************************************

    THIS IS THE BASE STYLESHEET

    DO NOT EDIT THIS FILE UNLESS MODIFYING A .SCSS FILE AND USING CODEKIT

***********************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)                                              DO NOT EDIT THIS FILE
                                                                              DO NOT EDIT THIS FILE
                                                                              DO NOT EDIT THIS FILE
                                                                              DO NOT EDIT THIS FILE
                                                                              DO NOT EDIT THIS FILE
*/
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
  -webkit-overflow-scrolling: touch;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/***********************************************************

   ANY EXTRA RESETS SHOULD GO HERE - EDIT WITH CAUTION

***********************************************************/
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

strong > em, em > strong {
  font-weight: bold;
  font-style: italic;
}

a {
  color: #000;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/***********************************************************

    ALL REUSABLE MIXINS GO HERE

***********************************************************/
/***********************************************************

    SET ALL GLOBAL VALUES IN HERE THAT
    APPLY TO ALL TEMPLATES

***********************************************************/
/***********************************************************

    FLASHCARDS

***********************************************************/
/***********************************************************

    OPINIONS

***********************************************************/
/***********************************************************

    SET ALL GLOBAL VALUES IN HERE THAT
    APPLY TO ALL PAGE ELEMENTS

***********************************************************/
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?-j0985t");
  src: url("../fonts/icomoon/icomoon.eot?#iefix-j0985t") format("embedded-opentype"), url("../fonts/icomoon/icomoon.woff?-j0985t") format("woff"), url("../fonts/icomoon/icomoon.ttf?-j0985t") format("truetype"), url("../fonts/icomoon/icomoon.svg?-j0985t#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
div.topBanner, div.pageFooter {
  background: #ccc;
}
div.topBanner p.programmeTitle, div.pageFooter p.programmeTitle {
  font-size: 14px;
  padding: 6px 11px 0;
  margin: 0;
}
div.topBanner p.unitTitle, div.pageFooter p.unitTitle {
  font-size: 17px;
  padding: 0 11px 6px;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  width: auto;
}
div.topBanner div.gradientBottom, div.pageFooter div.gradientBottom {
  width: 100%;
  height: 4px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
div.topBanner div.copyright, div.pageFooter div.copyright {
  padding: 10px 13px;
  border: none;
}
div.topBanner div.copyright *, div.pageFooter div.copyright * {
  float: left;
  width: 50%;
  font-size: 0.8em;
}
div.topBanner div.copyright span, div.pageFooter div.copyright span {
  text-align: right;
}

div.pageFooter {
  padding-bottom: 20px;
  border-top: 1px solid #ddd;
}

div.titleMenuWrapper {
  padding: 0;
  background: #aaa;
}
div.titleMenuWrapper * {
  display: inline-block;
  float: left;
  height: 100%;
}
div.titleMenuWrapper em {
  float: none;
  padding: 0 8px 0 4px;
}
div.titleMenuWrapper span.pageTitle {
  font-size: 32px;
  line-height: 1.1em;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  padding: 24px 12px 26px;
  text-align: center;
}
div.titleMenuWrapper div.menu {
  padding: 0;
  width: 100%;
  background: #bbb;
  position: relative;
}
div.titleMenuWrapper div.menu button {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  background: none;
  border: none;
  float: left;
  height: 21px;
  margin: 4px 2px 4px 4px;
  padding: 2px;
  width: auto;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
div.titleMenuWrapper div.menu button span {
  color: #fff;
  float: left;
  font-size: 11px;
  text-align: left;
  margin-top: 3px;
  margin-left: 5px;
  margin-right: 8px;
  width: auto;
  line-height: 1em;
}
div.titleMenuWrapper div.menu button span:before {
  color: #fff;
  font-size: 13px;
  position: relative;
  top: -1px;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  float: left;
}
div.titleMenuWrapper div.menu button.print span:before {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e69b';
}
div.titleMenuWrapper div.menu button.print.active span:before {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e66c";
  content: "\e653";
  font-size: 13px;
  top: 0px;
}
div.titleMenuWrapper div.menu button.help span:before {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e6b8';
  top: 0px;
}
div.titleMenuWrapper div.menu button.print span:before {
  margin-left: 2px;
  margin-right: 0px;
}
div.titleMenuWrapper div.menu button.help span:before {
  margin-right: -1px;
}
div.titleMenuWrapper div.menu .accPrintTab {
  color: blue;
  display: none;
  float: right;
  font-size: 13px;
  color: #555;
  background: #fff;
  padding: 4px 7px;
  margin: 4px 0;
  border-radius: 3px;
  font-weight: bold;
  height: 21px;
}
div.titleMenuWrapper div.menu .accPrintTab.printThisPage {
  color: #fff;
  position: absolute;
  right: 206px;
  top: -1px;
  background: #272727;
  padding: 5px 9px;
  font-size: 13px;
  height: auto;
  /*font-weight: normal;*/
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15) ;
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15) ;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15) ;
  z-index: 50;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
div.titleMenuWrapper div.menu .accPrintTab.printThisPage:hover {
  background: #F26E2D;
}
div.titleMenuWrapper div.menu.sticky {
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15) ;
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15) ;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15) ;
  position: fixed;
  top: 0;
  left: 0;
  height: 30px;
  z-index: 1000;
  max-width: 800px;
}
div.titleMenuWrapper div.screenTime {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #FFFFFF;
  float: right;
  height: 21px;
  margin: 4px;
  padding: 0 4px;
}
div.titleMenuWrapper div.screenTime span.num {
  font-size: 16px;
  margin-top: 2px;
}
div.titleMenuWrapper div.screenTime span.num:before {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e613';
  color: #555;
  font-size: 15px;
  top: 1px;
  margin-right: 2px;
  position: relative;
  font-weight: bold;
}
div.titleMenuWrapper div.screenTime span.min {
  font-size: 12px;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 4px;
  font-weight: bold;
}

div.outcomes {
  border-bottom: 1px solid;
  padding: 18px 24px;
  text-align: center;
  width: 100%;
  background: #ddd;
}
div.outcomes p {
  width: 100%;
  font-size: 1.2em;
  margin: 0px;
}
div.outcomes ul {
  margin: 10px auto 0 auto;
  width: 75%;
  text-align: left;
}

div.outcomes.reduced {
  padding: 10px 0px;
  display: none;
}
div.outcomes.reduced p {
  font-size: 13px;
}

div.iconWrapper {
  position: relative;
  margin: 10px;
  padding: 20px 20px 25px;
}
div.iconWrapper div.icon {
  margin: 0 auto;
  width: 180px;
  height: 50px;
}
div.iconWrapper div.icon * {
  float: left;
}
div.iconWrapper div.icon div.iconImage {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0 0 6px 6px #fff ;
  -moz-box-shadow: 0 0 6px 6px #fff ;
  -webkit-box-shadow: 0 0 6px 6px #fff ;
  height: 50px;
  width: 50px;
  border: 4px solid;
  position: relative;
  z-index: 21;
}
div.iconWrapper div.icon div.iconLabel {
  position: relative;
  margin-left: 10px;
  height: 100%;
}
div.iconWrapper div.icon div.iconLabel span {
  box-shadow: 0 0 18px 20px #fff ;
  -moz-box-shadow: 0 0 18px 20px #fff ;
  -webkit-box-shadow: 0 0 18px 20px #fff ;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  border-radius: 40px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  font-size: 15px;
  position: absolute;
  top: 50%;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  line-height: 1.2em;
  border: 0;
  padding: 8px 12px;
  width: 130px;
  background: #ccc;
}
div.iconWrapper div.icon:before {
  z-index: 22;
  border-color: transparent transparent transparent black;
}
div.iconWrapper div.icon.BL div.iconImage {
  background: url("../images/pageIcons/iconBL.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.COI div.iconImage {
  background: url("../images/pageIcons/iconCOI.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.COICP div.iconImage {
  background: url("../images/pageIcons/iconCOICP.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.COISP div.iconImage {
  background: url("../images/pageIcons/iconCOISP.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.COITP div.iconImage {
  background: url("../images/pageIcons/iconCOITP.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.CS div.iconImage {
  background: url("../images/pageIcons/iconCS.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.DT div.iconImage {
  background: url("../images/pageIcons/iconDT.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.INT div.iconImage {
  background: url("../images/pageIcons/iconINT.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.MEN div.iconImage {
  background: url("../images/pageIcons/iconMEN.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.PD div.iconImage {
  background: url("../images/pageIcons/iconPD.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.PM div.iconImage {
  background: url("../images/pageIcons/iconPM.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.PT div.iconImage {
  background: url("../images/pageIcons/iconPT.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.QY div.iconImage {
  background: url("../images/pageIcons/iconQY.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.TE div.iconImage {
  background: url("../images/pageIcons/iconTE.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.SU div.iconImage {
  background: url("../images/pageIcons/iconSU.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.IP div.iconImage {
  background: url("../images/pageIcons/iconIP.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.ST div.iconImage {
  background: url("../images/pageIcons/iconST.png") no-repeat;
  background-size: cover;
}
div.iconWrapper div.icon.PR div.iconImage {
  background: url("../images/pageIcons/iconPR.png") no-repeat;
  background-size: cover;
}

h1, h2, h3 {
  margin: 12px 0;
  width: 540px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.3em;
  width: auto;
  max-width: 540px;
}

h1 {
  font-size: 1.7em;
}

p + h1 {
  margin-top: 20px !important;
}

h2 {
  font-size: 1.3em;
  margin-bottom: 8px;
}

h3 {
  font-size: 1.3em;
}

ol {
  margin: 0 15px 10px 28px;
  text-align: left;
}

ol.brackets {
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
}
ol.brackets li:before {
  content: "(" counter(section,lower-alpha) ") ";
}
ol.brackets li {
  counter-increment: section;
}

ul ul li {
  list-style: circle;
}

sup {
  font-size: 80%;
  font-style: inherit;
  position: relative;
  top: -5px;
}

hr {
  max-width: 540px;
  margin: 20px 0;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  padding: 0;
}

.handwriting {
  font-family: 'Comic Sans MS', cursive, serif !important;
}
.handwriting p, .handwriting h1, .handwriting h2, .handwriting h3, .handwriting li {
  font-family: 'Comic Sans MS', cursive, serif !important;
}

p.display_text {
  color: #666;
  line-height: 1.5em;
  margin: 20px -16px 10px 16px;
}

.size16 {
  font-size: 16px;
}

.size20 {
  font-size: 20px;
}

.size26 {
  font-size: 26px;
}

div.block, div.instructional, div.accessible, div.feedback, div.paper, div.speech, div.glossaryDefinition, div.referenceDefinition {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid;
  margin: 20px 0;
  padding: 10px 10px 0 10px;
  width: 540px;
  position: relative;
  background: #fff;
}
div.block div.glossaryDefinition, div.block div.referenceDefinition, div.instructional div.glossaryDefinition, div.instructional div.referenceDefinition, div.accessible div.glossaryDefinition, div.accessible div.referenceDefinition, div.feedback div.glossaryDefinition, div.feedback div.referenceDefinition, div.paper div.glossaryDefinition, div.paper div.referenceDefinition, div.speech div.glossaryDefinition, div.speech div.referenceDefinition, div.glossaryDefinition div.glossaryDefinition, div.glossaryDefinition div.referenceDefinition, div.referenceDefinition div.glossaryDefinition, div.referenceDefinition div.referenceDefinition {
  width: auto;
}
div.block ul li, div.instructional ul li, div.accessible ul li, div.feedback ul li, div.paper ul li, div.speech ul li, div.glossaryDefinition ul li, div.referenceDefinition ul li {
  margin-bottom: 8px;
}
div.block p, div.instructional p, div.accessible p, div.feedback p, div.paper p, div.speech p, div.glossaryDefinition p, div.referenceDefinition p {
  width: 100%;
}
div.block h2, div.block h3, div.instructional h2, div.instructional h3, div.accessible h2, div.accessible h3, div.feedback h2, div.feedback h3, div.paper h2, div.paper h3, div.speech h2, div.speech h3, div.glossaryDefinition h2, div.glossaryDefinition h3, div.referenceDefinition h2, div.referenceDefinition h3 {
  margin-top: 0px;
  width: 100%;
}
div.block hr, div.instructional hr, div.accessible hr, div.feedback hr, div.paper hr, div.speech hr, div.glossaryDefinition hr, div.referenceDefinition hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1.3em 0;
  padding: 0;
}
div.block hr.accessibleScreenBreak, div.instructional hr.accessibleScreenBreak, div.accessible hr.accessibleScreenBreak, div.feedback hr.accessibleScreenBreak, div.paper hr.accessibleScreenBreak, div.speech hr.accessibleScreenBreak, div.glossaryDefinition hr.accessibleScreenBreak, div.referenceDefinition hr.accessibleScreenBreak {
  margin: 50px 0;
}

div.block div.speech {
  width: 100%;
}

div.instructional {
  padding: 10px 12px 2px;
  border: 0;
  background: #ddd;
}

div.instructional-remove:not(.instructional) {
  padding: 0 0 2px 5px;
  width: 540px;
}

div.accessible {
  display: none;
  text-align: left;
  padding: 18px;
}
div.accessible img {
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  position: relative;
  left: 50%;
}
div.accessible img + p {
  margin-top: 18px;
}
div.accessible table {
  margin: 30px 20px;
  width: 460px;
}
div.accessible h2 {
  width: 100%;
}
div.accessible div.paper {
  width: auto;
  margin: 0;
}
div.accessible div.block,
div.accessible div.accessible {
  width: auto;
}

div.accessible.visible {
  display: block;
  margin-top: 0;
}

button.viewTranscript {
  margin-bottom: 10px;
}

button.viewTranscript.hidden {
  display: none;
}

div.paper {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  margin: 16px 0px 40px 0;
  min-height: 30px;
  padding: 18px;
  border-color: #ccc;
  background: #fff;
}
div.paper h1, div.paper h2, div.paper h3 {
  padding: 18px 18px 0 18px;
  margin-bottom: -4px;
}
div.paper h2, div.paper h3 {
  font-weight: bold;
}
div.paper p {
  margin: 0px;
}
div.paper p:last-of-type {
  padding-bottom: 18px;
}
div.paper p, div.paper ul, div.paper ol, div.paper table {
  font-size: 15px;
  padding: 18px 18px 0 18px;
}
div.paper p.pageReference {
  font-size: 12px;
}
div.paper div.block {
  width: 100%;
  margin: 10px 0 0 0;
}
div.paper div.block p {
  padding: 0px;
  margin-bottom: 10px;
}
div.paper div.glossaryDefinition, div.paper div.referenceDefinition {
  width: auto;
}
div.paper div.glossaryDefinition h2, div.paper div.glossaryDefinition p, div.paper div.referenceDefinition h2, div.paper div.referenceDefinition p {
  padding: 0;
}
div.paper div.glossaryDefinition h2, div.paper div.referenceDefinition h2 {
  margin-top: 0;
  font-family: "UbuntuMedium", Tahoma, sans-serif;
  font-size: 1.1em;
  margin-bottom: 8px;
  font-weight: normal;
}
div.paper div.glossaryDefinition p, div.paper div.glossaryDefinition ul, div.paper div.glossaryDefinition ol, div.paper div.referenceDefinition p, div.paper div.referenceDefinition ul, div.paper div.referenceDefinition ol {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  margin: 0 0 10px 0px;
}
div.paper div.block.notepaper {
  box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.6) ;
  -moz-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.6) ;
  -webkit-box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, 0.6) ;
  border-radius: 0px 5px 500px 20px/0px 100px 30px 500px;
  -moz-border-radius: 0px 5px 500px 20px/0px 100px 30px 500px;
  -webkit-border-radius: 0px 5px 500px 20px/0px 100px 30px 500px;
}
div.paper div.block.notepaper p {
  font-size: 16px;
  margin: -3px 0 23px;
}
div.paper div.block.notepaper p:last-of-type {
  margin-bottom: 6px;
}

div.paper.wide {
  width: 752px;
}
div.paper.wide h1 {
  max-width: 100%;
}

div.paper:before, div.paper:after {
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

div.paper:before {
  box-shadow: 0px 0px 2px 0px #666 ;
  -moz-box-shadow: 0px 0px 2px 0px #666 ;
  -webkit-box-shadow: 0px 0px 2px 0px #666 ;
  transform: rotate(-0.5deg);
  -ms-transform: rotate(-0.5deg);
  -moz-transform: rotate(-0.5deg);
  -webkit-transform: rotate(-0.5deg);
  background: #fafafa;
  left: -7px;
  top: 14px;
}

div.paper:after {
  box-shadow: 0px 0px 2px 0px #666 ;
  -moz-box-shadow: 0px 0px 2px 0px #666 ;
  -webkit-box-shadow: 0px 0px 2px 0px #666 ;
  transform: rotate(-0.35deg);
  -ms-transform: rotate(-0.35deg);
  -moz-transform: rotate(-0.35deg);
  -webkit-transform: rotate(-0.35deg);
  background: #f6f6f6;
  right: -5px;
  top: 7px;
}

div.speech {
  border: 1px solid #aaa;
  position: relative;
  margin-bottom: 35px;
  background: #fff;
}
div.speech p {
  padding: 16px;
}
div.speech div.glossaryDefinition, div.speech div.referenceDefinition {
  width: auto;
}
div.speech div.glossaryDefinition h2, div.speech div.glossaryDefinition p, div.speech div.referenceDefinition h2, div.speech div.referenceDefinition p {
  padding: 0;
}
div.speech div.glossaryDefinition h2, div.speech div.referenceDefinition h2 {
  margin-top: 0;
  font-family: "UbuntuMedium", Tahoma, sans-serif;
  margin-bottom: 8px;
  font-weight: normal;
}
div.speech div.glossaryDefinition p, div.speech div.glossaryDefinition ul, div.speech div.glossaryDefinition ol, div.speech div.referenceDefinition p, div.speech div.referenceDefinition ul, div.speech div.referenceDefinition ol {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 10px 0px;
}

div.speech.tailtop {
  margin-top: 27px;
}

div.speech.tailtop:before,
div.speech.tailtop:after {
  transform: rotate(194deg);
  -ms-transform: rotate(194deg);
  -moz-transform: rotate(194deg);
  -webkit-transform: rotate(194deg);
  content: '';
  position: absolute;
  margin-left: 50%;
  top: 0%;
  margin-top: -27px;
  border-left: 0;
}

div.speech.tailtop:before {
  border-right: 22px solid transparent;
  border-top: 33px solid #aaa;
  left: 9px;
  z-index: -1;
  margin-top: -30px;
}

div.speech.tailtop:after {
  border-right: 20px solid transparent;
  border-top: 30px solid #FFF;
}

div.speech.tailbottom {
  margin-bottom: 46px;
}

div.speech.tailbottom:before,
div.speech.tailbottom:after {
  transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  content: '';
  position: absolute;
  margin-left: 50%;
  top: 100%;
  margin-top: -2px;
  border-left: 0;
}

div.speech.tailbottom:before {
  border-right: 22px solid transparent;
  border-top: 33px solid #aaa;
  left: 9px;
  z-index: -1;
}

div.speech.tailbottom:after {
  border-right: 20px solid transparent;
  border-top: 30px solid #FFF;
}

div.speech.tailleft {
  margin-left: 32px;
}

div.speech.tailleft:before,
div.speech.tailleft:after {
  transform: rotate(94deg);
  -ms-transform: rotate(94deg);
  -moz-transform: rotate(94deg);
  -webkit-transform: rotate(94deg);
  content: '';
  position: absolute;
  margin-left: 0%;
  top: 50%;
  margin-top: -2px;
  border-left: 0;
}

div.speech.tailleft:before {
  border-right: 22px solid transparent;
  border-top: 33px solid #aaa;
  left: -26px;
  z-index: -1;
  margin-top: -3px;
}

div.speech.tailleft:after {
  border-right: 20px solid transparent;
  border-top: 30px solid #FFF;
  left: -24px;
}

div.speech.tailright:before,
div.speech.tailright:after {
  transform: rotate(230deg);
  -ms-transform: rotate(230deg);
  -moz-transform: rotate(230deg);
  -webkit-transform: rotate(230deg);
  content: '';
  position: absolute;
  margin-left: 100%;
  transform: rotate(230deg);
  top: 50%;
  margin-top: -2px;
  border-left: 0;
}

div.speech.tailright:before {
  border-right: 22px solid transparent;
  border-top: 33px solid #aaa;
  left: -4px;
  z-index: -1;
  margin-top: -5px;
}

div.speech.tailright:after {
  border-right: 20px solid transparent;
  border-top: 30px solid #FFF;
  left: -5px;
}

div.feedbackWrapper {
  width: 540px;
  text-align: center;
  margin: 0 0 24px 0;
}
div.feedbackWrapper h1:first-of-type {
  margin-top: 0;
}
div.feedbackWrapper button {
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  padding: 9px 18px;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.023em;
  font-size: 14px;
  margin-top: 0px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
  background: #000;
}
div.feedbackWrapper button:disabled {
  opacity: 0.3;
  background: #bbb;
  color: #777;
  cursor: default;
  text-shadow: none;
}
div.feedbackWrapper button:first-letter {
  text-transform: uppercase;
}
div.feedbackWrapper div.feedback {
  box-shadow: 0 0 0 0 #000 ;
  -moz-box-shadow: 0 0 0 0 #000 ;
  -webkit-box-shadow: 0 0 0 0 #000 ;
  text-align: left;
  display: none;
  margin: 13px 0 0 0;
  width: 100%;
}
div.feedbackWrapper div.feedback:before, div.feedbackWrapper div.accessible:before {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-left: 1px solid;
  border-top: 1px solid;
  content: "";
  display: block;
  height: 12px;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 12px;
}
div.feedbackWrapper div.feedback:before {
  margin-top: -18px;
}
div.feedbackWrapper div.accessible:before {
  margin-top: -25px;
}

div.feedbackWrapper.wide {
  width: 752px;
}

table {
  margin: 30px 0;
  line-height: 1.3em;
  width: 540px;
}

table.wide {
  width: 100%;
}

span.accessibleSwap {
  margin: 0;
  padding: 0;
}
span.accessibleSwap img {
  margin: 12px 24px 22px;
}

/***********************************************************

    CUSTOM RADIO BUTTONS

***********************************************************/
div.activity {
  /*-----> this should only hide default radio buttons within activities, we need the defaults for course quizzes and polls*/
}
div.activity input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  width: 17px;
  height: 17px;
  background: #fff;
  border: 1px solid #999;
  cursor: pointer;
}
input[type="radio"] + label p {
  margin-left: 21px;
  width: auto;
}

input[type="radio"] + label:hover {
  box-shadow: 0 0 0 4px white inset;
  -moz-box-shadow: 0 0 0 4px white inset;
  -webkit-box-shadow: 0 0 0 4px white inset;
  background: #999;
  border: 1px solid #999;
}

input[type="radio"]:checked + label {
  box-shadow: 0 0 0 4px white inset;
  -moz-box-shadow: 0 0 0 4px white inset;
  -webkit-box-shadow: 0 0 0 4px white inset;
  background: #F68636;
  border: 1px solid #999;
}

input[type="radio"]:disabled + label {
  cursor: default;
}
input[type="radio"]:disabled + label p {
  color: #aaa;
}

input[type="radio"]:checked:disabled + label,
input[type="radio"]:checked:disabled + label:hover {
  background: #bbb;
}

input[type="radio"]:disabled + label:hover {
  background: #fff;
}

/***********************************************************

    CUSTOM CHECKBOXES

***********************************************************/
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
  position: relative;
  left: -9999px;
}

input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 6px;
  margin-left: 6px;
  cursor: pointer;
  color: #252C36;
}

/* checkbox aspect */
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #999 ;
  -moz-box-shadow: 0 0 0 1px #999 ;
  -webkit-box-shadow: 0 0 0 1px #999 ;
  content: '';
  position: absolute;
  left: -10px;
  top: 5px;
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
  background: #fff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

input[type="checkbox"]:checked + label:before {
  box-shadow: 0 0 0 1px #fff ;
  -moz-box-shadow: 0 0 0 1px #fff ;
  -webkit-box-shadow: 0 0 0 1px #fff ;
  background: #F68636;
  border-color: #F26E2D;
}

input[type="checkbox"]:not(:checked) + label:hover:before {
  background: #ccc !important;
  border: 6px solid #fff !important;
}

input[type="checkbox"]:checked + label:hover:before {
  background: #FF964A !important;
  border-color: #F26E2D !important;
}

/* checked mark aspect */
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e649';
  position: absolute;
  top: 0px;
  left: -15.5px;
  font-size: 11px;
  color: #fff;
  transition: all .2s;
}

/* checked mark aspect changes */
input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
}

input[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
}

/* disabled checkbox */
input[type="checkbox"]:disabled:not(:checked) + label:before,
input[type="checkbox"]:disabled:checked + label:before {
  box-shadow: 0 0 0 0 #000 ;
  -moz-box-shadow: 0 0 0 0 #000 ;
  -webkit-box-shadow: 0 0 0 0 #000 ;
  border-color: #bbb;
  background-color: #ddd;
}

input[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}

input[type="checkbox"]:disabled + label {
  color: #aaa;
}

/* accessibility */
input[type="checkbox"]:checked:focus + label:before {
  box-shadow: 0 0 0 2px #fff ;
  -moz-box-shadow: 0 0 0 2px #fff ;
  -webkit-box-shadow: 0 0 0 2px #fff ;
}

input[type="checkbox"]:not(:checked):focus + label:before {
  box-shadow: 0 0 0 1px #1273a4 ;
  -moz-box-shadow: 0 0 0 1px #1273a4 ;
  -webkit-box-shadow: 0 0 0 1px #1273a4 ;
}

/***********************************************************

    		STYLE CORRECTIONS FOR IMPACT QUIZZES

***********************************************************/
div.qz_container input[type="radio"], div.PDS_Poll .pds-box input[type="radio"] {
  margin: 3px 3px 5px 5px;
}
div.qz_container input[type="radio"] + label, div.PDS_Poll .pds-box input[type="radio"] + label {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
div.qz_container input[type="radio"]:checked + label, div.PDS_Poll .pds-box input[type="radio"]:checked + label {
  cursor: inherit;
}
div.qz_container input[type="checkbox"], div.PDS_Poll .pds-box input[type="checkbox"] {
  margin: 3px 3px 5px 5px;
}
div.qz_container input[type="checkbox"]:not(:checked),
div.qz_container input[type="checkbox"]:checked, div.PDS_Poll .pds-box input[type="checkbox"]:not(:checked),
div.PDS_Poll .pds-box input[type="checkbox"]:checked {
  position: inherit;
  left: 0;
}
div.qz_container input[type="checkbox"]:not(:checked) + label,
div.qz_container input[type="checkbox"]:checked + label, div.PDS_Poll .pds-box input[type="checkbox"]:not(:checked) + label,
div.PDS_Poll .pds-box input[type="checkbox"]:checked + label {
  position: inherit;
  padding: 0;
  margin: 0;
  cursor: inherit;
}
div.qz_container input[type="checkbox"]:not(:checked) + label:before,
div.qz_container input[type="checkbox"]:checked + label:before,
div.qz_container input[type="checkbox"]:not(:checked) + label:after,
div.qz_container input[type="checkbox"]:checked + label:after, div.PDS_Poll .pds-box input[type="checkbox"]:not(:checked) + label:before,
div.PDS_Poll .pds-box input[type="checkbox"]:checked + label:before,
div.PDS_Poll .pds-box input[type="checkbox"]:not(:checked) + label:after,
div.PDS_Poll .pds-box input[type="checkbox"]:checked + label:after {
  display: none;
}

.fb-tick, .fb-cross {
  width: 30px;
  height: 0;
  float: left;
}

.fb-tick + p, .fb-cross + p {
  margin-left: 17px;
  padding-right: 17px;
}

.fb-tick:after, .fb-cross:after {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  transform: scale(0.55);
  -ms-transform: scale(0.55);
  -moz-transform: scale(0.55);
  -webkit-transform: scale(0.55);
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: inline-block;
  top: -6px;
  left: -9px;
  color: #fff;
}

.fb-tick:after {
  height: 14px;
  width: 15px;
  padding: 6px;
  font-size: 14px;
  content: "\e649";
}

.fb-cross:after {
  height: 11px;
  width: 11px;
  padding: 8px;
  font-size: 11px;
  content: "\e648";
}

div.podWrapper > div {
  float: left;
}
div.podWrapper div.podWrapperContent div.instructional {
  margin-top: 0;
}
div.podWrapper div.podWrapperPods div.pod {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 2px 2px -1px #aaa ;
  -moz-box-shadow: 0 2px 2px -1px #aaa ;
  -webkit-box-shadow: 0 2px 2px -1px #aaa ;
  width: 190px;
  margin: 0 0 18px 21px;
  position: relative;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
div.podWrapper div.podWrapperPods div.pod div.block, div.podWrapper div.podWrapperPods div.pod div.instructional, div.podWrapper div.podWrapperPods div.pod div.accessible, div.podWrapper div.podWrapperPods div.pod div.feedback, div.podWrapper div.podWrapperPods div.pod div.paper, div.podWrapper div.podWrapperPods div.pod div.speech, div.podWrapper div.podWrapperPods div.pod div.glossaryDefinition, div.podWrapper div.podWrapperPods div.pod div.referenceDefinition {
  width: auto;
}
div.podWrapper div.podWrapperPods div.pod div.podTitle {
  width: 100%;
  margin: 0;
  padding: 7px 6px 0;
}
div.podWrapper div.podWrapperPods div.pod div.podTitle p {
  color: #fff;
  -webkit-font-smoothing: antialiased;
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 7px;
  font-size: 15px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
div.podWrapper div.podWrapperPods div.pod div.podTitle button {
  display: none;
  float: right;
}
div.podWrapper div.podWrapperPods div.pod p.dura {
  background: #ddd;
  padding: 5px 8px;
  width: 100%;
  margin-bottom: 0;
  font-size: 0.92em;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
div.podWrapper div.podWrapperPods div.pod span.podHide, div.podWrapper div.podWrapperPods div.pod div.iconWrapper {
  display: none;
}
div.podWrapper div.podWrapperPods div.pod div.podText {
  box-shadow: 0 0 0 0 #000 ;
  -moz-box-shadow: 0 0 0 0 #000 ;
  -webkit-box-shadow: 0 0 0 0 #000 ;
  margin: 0;
  overflow: hidden;
  font-size: 0.92em;
  padding: 8px 8px 0 8px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-top: 0;
  background: #fff;
}
div.podWrapper div.podWrapperPods div.pod div.podText div.iconWrapper {
  margin: 0 auto;
}
div.podWrapper div.podWrapperPods div.pod div.podText p, div.podWrapper div.podWrapperPods div.pod div.podText iframe.hosted_links {
  width: 100%;
}
div.podWrapper div.podWrapperPods div.pod div.podText iframe.hosted_links {
  min-height: 30px;
}
div.podWrapper div.podWrapperPods div.pod button.podButton {
  color: #fff;
  background: #fff;
  width: 100%;
  margin: 0 auto 10px auto;
  border: 1px solid #ccc;
  border-top: none;
  padding: 5px;
  position: relative;
  bottom: 5px;
  text-align: center;
}
div.podWrapper div.podWrapperPods div.pod button.podButton span {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  background: #000;
  display: inline-block;
  border: medium none;
  color: #FFFFFF;
  font-size: 12px;
  left: 50%;
  padding: 5px 11px;
  margin: 0 auto;
  margin-bottom: 5px;
}
div.podWrapper div.podWrapperPods div.pod.QT {
  height: auto;
  margin-bottom: 36px;
}
div.podWrapper div.podWrapperPods div.pod.nobutton {
  padding-bottom: 13px;
}
div.podWrapper div.podWrapperPods div.pod.downarrow:before {
  top: 100%;
  left: 92px;
  margin-left: -5px;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
div.podWrapper div.podWrapperPods div.pod:before {
  margin-left: -5px;
  top: 9px;
  left: -8px;
}
div.podWrapper div.podWrapperPods div.pod.open {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.55) ;
  -moz-box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.55) ;
  -webkit-box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.55) ;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
  margin: 0;
  left: 50%;
  position: fixed;
  top: 50%;
  z-index: 100;
  max-height: 395px;
  width: 400px;
  max-width: 400px;
  border: 0;
  overflow: hidden;
  transition: height 0.2s ease 0s;
  -ms-transition: height 0.2s ease 0s;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
div.podWrapper div.podWrapperPods div.pod.open div.podTitle {
  height: 33px;
}
div.podWrapper div.podWrapperPods div.pod.open div.podTitle p {
  width: 100%;
}
div.podWrapper div.podWrapperPods div.pod.open div.podTitle button {
  display: block;
  background: transparent;
  color: #FFFFFF;
  float: right;
  font-size: 22px;
  height: 34px;
  left: 6px;
  margin: 0;
  margin-top: -34px;
  padding: 0;
  position: relative;
  width: 34px;
  border-top-right-radius: 6px;
}
div.podWrapper div.podWrapperPods div.pod.open p.dura {
  padding: 6px 24px;
  border: 0;
  font-size: 1em;
}
div.podWrapper div.podWrapperPods div.pod.open span.podHide {
  display: inline;
}
div.podWrapper div.podWrapperPods div.pod.open div.iconWrapper {
  display: block;
}
div.podWrapper div.podWrapperPods div.pod.open div.podText {
  height: 100%;
  max-height: 300px;
  border: none;
  font-size: 1em;
  margin-bottom: 16px;
  padding: 20px 24px;
  overflow: auto;
  overflow-x: hidden;
}
div.podWrapper div.podWrapperPods div.pod.open div.podText div.feedbackWrapper, div.podWrapper div.podWrapperPods div.pod.open div.podText div.accessible {
  width: 100%;
  max-width: 540px;
  margin-right: 0;
}
div.podWrapper div.podWrapperPods div.pod.open div.podText div.accessible p:last-of-type {
  margin-bottom: 0;
}
div.podWrapper div.podWrapperPods div.pod.open div.podText div.mediaPlayer {
  width: 100%;
}
div.podWrapper div.podWrapperPods div.pod.open button.podButton {
  display: none;
}
div.podWrapper div.podWrapperPods div.pod.open:before {
  border-color: transparent;
}
div.podWrapper div.podWrapperPods div.pod.videopod.open {
  width: 590px;
  min-width: 590px;
  max-height: 592px;
}
div.podWrapper div.podWrapperPods div.pod.videopod.open div.podText {
  max-height: 513px;
}
@media only screen and (max-height: 700px) {
  div.podWrapper div.podWrapperPods div.pod.videopod.open {
    max-height: 460px;
  }
  div.podWrapper div.podWrapperPods div.pod.videopod.open div.podText {
    max-height: 420px;
  }
}
div.podWrapper div.podWrapperPods div.iconWrapper {
  width: 190px;
  margin-bottom: 20px;
  padding: 10px;
  z-index: 0;
}

div.podShadow {
  opacity: 0.75;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: #FFF;
}

div.pod {
  background-color: #000;
}

div.pod:before {
  border-color: transparent #000 transparent transparent;
}

div.pod.accessible {
  padding: 0 0 13px 0;
  font-size: 14px;
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin: 30px 0;
}
div.pod.accessible div.instructional {
  width: auto;
}
div.pod.accessible div.podTitle {
  width: 100%;
  margin: 0;
  padding: 10px 10px 0px;
}
div.pod.accessible div.podTitle p {
  color: #fff;
  -webkit-font-smoothing: antialiased;
  float: left;
  width: 100%;
  text-align: center;
  font-size: 17px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
div.pod.accessible div.podTitle button {
  display: none;
  float: right;
}
div.pod.accessible p.dura {
  font-size: 0.92em;
  padding: 10px;
  width: 100%;
  background: #ddd;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-bottom: 0;
}
div.pod.accessible div.podText {
  box-shadow: 0 0 0 0 #000 ;
  -moz-box-shadow: 0 0 0 0 #000 ;
  -webkit-box-shadow: 0 0 0 0 #000 ;
  background: #fff;
  margin: 0;
  overflow: hidden;
  font-size: 0.92em;
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-top: 0;
}
div.pod.accessible div.podText span.podHide {
  display: inline;
}
div.pod.accessible div.podText div.iconWrapper {
  display: block;
}
div.pod.accessible div.podText div.iconWrapper {
  margin: 0 auto;
}
div.pod.accessible div.podText div.feedbackWrapper, div.pod.accessible div.podText div.accessible {
  width: 100%;
  margin-bottom: 0;
}
div.pod.accessible div.podText p {
  width: 100%;
}
div.pod.accessible div.podText iframe.hosted_links {
  width: 100%;
}
div.pod.accessible button {
  display: none;
}

div.pod.QT.accessible img {
  left: 1%;
}

div.pod.QT.accessible:after {
  display: none;
}

/***********************************************************

    POLL STYLING GOES HERE
    - !important needed here as it overwrites the remote polldaddy stylesheet

***********************************************************/
.PDS_Poll {
  margin-top: -10px;
  margin-bottom: 5px;
}
.PDS_Poll input[type="radio"] {
  display: inline !important;
  cursor: pointer;
}
.PDS_Poll .pds-box {
  width: 540px !important;
}
.PDS_Poll .pds-answer {
  margin-top: 15px !important;
}
.PDS_Poll .pds-answer .pds-answer-group {
  padding: 8px 2px !important;
}
.PDS_Poll .pds-answer .pds-answer-group .pds-input-label {
  width: auto !important;
  float: none !important;
  text-indent: 0px !important;
  padding-left: 25px !important;
}
.PDS_Poll .pds-vote-button, .PDS_Poll .pds-vote-button-load {
  border: 0 !important;
  cursor: pointer;
  margin: 3px 0 0 3px !important;
}
.PDS_Poll .pds-links {
  margin: 23px 6px 6px 6px;
}
.PDS_Poll .pds-feedback-group {
  padding: 3px !important;
}
.PDS_Poll .pds-answer-feedback, .PDS_Poll .pds-answer-feedback-bar {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  height: 6px !important;
}
.PDS_Poll .pds-answer-feedback {
  margin: 0 0 5px 0 !important;
}
.PDS_Poll .pds-answer-feedback-bar {
  margin: -1px !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.PDS_Poll .pds-links-back, .PDS_Poll .pds-total-votes, .PDS_Poll .pds-view-results {
  float: right !important;
}
.PDS_Poll .pds-links-back {
  margin-top: 8px !important;
}
.PDS_Poll #pds-sharing {
  float: left;
  margin: -5px 0 0 3px !important;
}
.PDS_Poll .pds-total-votes {
  margin: 10px 9px 16px !important;
}

.pollFeedback .PDS_Poll {
  margin-right: -3px;
}

.pollFeedback {
  display: inline-block;
  vertical-align: top;
}

.pollFeedback .feedbackWrapper {
  width: 236px;
}

/***********************************************************

    QUIZ STYLING GOES HERE
    - !important needed here as it overwrites the remote polldaddy stylesheet

***********************************************************/
.quiz {
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  box-shadow: 0 0 0 0 #000 ;
  -moz-box-shadow: 0 0 0 0 #000 ;
  -webkit-box-shadow: 0 0 0 0 #000 ;
  font-family: "UbuntuRegular",Lucida Sans Unicode,Lucida Grande,sans-serif;
  background: linear-gradient(to bottom, #F68636 0%, #F26E2D 100%) repeat scroll 0 0 transparent;
  color: #FFFFFF;
  font-size: 14px;
  letter-spacing: 0.023em;
  margin-top: 10px;
  padding: 9px 18px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
  width: 150px;
  text-align: center;
  cursor: pointer;
  margin-left: 177px;
  margin-top: 22px;
}

.quiz:hover {
  background: linear-gradient(to bottom, #FF964A 0%, #FF7E3D 100%) repeat scroll 0 0 transparent;
}

.questionWrapper * {
  color: #252C36;
}

.questionWrapper {
  max-width: 540px;
}

.questionWrapper input[type="radio"] {
  display: block;
}

.questionWrapper .quizAns {
  max-width: 470px;
}

.questionWrapper span label {
  cursor: pointer;
  left: 28px;
  position: relative;
  top: -14px;
  line-height: 1.3em;
}

table.tableStandard {
  margin: 10px 0;
  width: 540px;
}
table.tableStandard td, table.tableStandard th {
  border: 1px solid;
  padding: 6px;
}

html.touch div.titleMenuWrapper div.menu button span {
  margin-top: 0;
}
html.touch div.contentWrapper {
  padding-left: 12px;
}
html.touch div.podWrapper div.podWrapperPods div.pod.open {
  -ms-transform: translate(-20%, -160%);
  -webkit-transform: translate(-20%, -160%);
  transform: translate(-20%, -160%);
  position: relative;
}
html.touch div.activity div.popupFeedback button {
  padding: 0;
}
html.touch div.activity.checklist div.items div.item button {
  padding: 0;
}
html.touch .activitySummaryBox {
  -ms-transform: translate(-50%, -120%);
  -webkit-transform: translate(-50%, -120%);
  transform: translate(-50%, -120%);
  position: relative;
}
html.touch .activitySummaryBox.help {
  position: absolute;
  top: 70px;
  left: 400px;
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

div.activity.actionMaze div.screen {
  padding: 0px;
}
div.activity.actionMaze div.screen div.item {
  margin-bottom: 10px;
  border: 1px solid;
  border-top: 0;
  background: #fff;
  padding: 24px;
}
div.activity.actionMaze div.screen div.item.fb-tick:after, div.activity.actionMaze div.screen div.item.fb-cross:after {
  height: 14px;
  width: 15px;
  content: "\e649";
}
div.activity.actionMaze div.screen div.item h2 {
  margin-top: 0;
}
div.activity.actionMaze div.screen div.item p:last-of-type {
  margin-bottom: 0;
}
div.activity.actionMaze div.screen div.item.goTo {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  text-align: center;
  cursor: pointer;
  margin: 10px;
  padding: 14px;
  background: #fff;
  border: 0;
}
div.activity.actionMaze div.screen div.item.start_scenario p:first-letter {
  text-transform: uppercase;
}
div.activity.actionMaze div.screen div.item.goTo:last-of-type {
  margin-bottom: 20px;
}
div.activity.actionMaze div.screen div.question {
  color: #fff;
  background: #222;
  padding: 5px;
  margin-bottom: 10px;
  padding: 10px;
}
div.activity.actionMaze div.screen div.question h2 {
  margin: 0;
  max-width: none;
  color: #fff;
}
div.activity.actionMaze div.screen.end {
  padding-bottom: 0;
}
div.activity.actionMaze div.screen.end > div.item {
  height: 100%;
}

/***********************************************************

    STRUCTURAL STYLES FOR ALL TEMPLATES (GLOBAL)

***********************************************************/
.activity {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 540px;
  overflow: hidden;
  margin: 0 0 20px 0;
  position: relative;
  background: #bbb;
}
.activity div.item {
  border-bottom: 0px solid;
  background: #fff;
  padding: 10px 10px 10px 10px;
}
.activity div.item p {
  width: 100%;
}
.activity div.item p:last-of-type {
  margin-bottom: 0;
}
.activity div.item.more {
  border: 1px solid;
  overflow: auto;
  overflow-x: hidden !important;
  min-height: 110px;
  max-height: 230px;
}
.activity div.item.question {
  border: 1px solid #ccc;
  border-top: 0;
}
.activity div.item.question div.block {
  width: 100%;
  margin-bottom: 0px;
}
.activity div.item.correct:after,
.activity div.item.incorrect:after {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.activity div.nav {
  height: 37px;
  width: 100%;
  padding: 5px;
  background: #999;
}
.activity div.nav button {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  height: 100%;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.023em;
  padding: 6px 9px 7px;
  margin: 0 3px;
  line-height: 1em;
  background: #333;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.activity div.nav button:first-letter {
  text-transform: uppercase;
}
.activity div.nav button:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
.activity div.nav button.back, .activity div.nav button.next, .activity div.nav button.summary, .activity div.nav button.check, .activity div.nav button.see {
  float: right;
}
.activity div.nav.collapsed {
  height: 1px;
  padding: 0;
}
.activity div.progressBar {
  width: 101%;
  line-height: 0;
  position: relative;
  border-top: 1px #fff solid;
  background: #eee;
}
.activity div.progressBar div.step {
  display: inline-block;
  height: 8px;
  border-right: 1px #fff solid;
}
.activity div.progressBar div.step:last-child {
  border: none;
}
.activity div.progressBar div.step.full {
  background: #aaa;
}
.activity div.screens {
  position: relative;
  left: 0px;
  white-space: nowrap;
}
.activity div.screens .screen {
  display: inline-block;
  white-space: normal;
  width: 100%;
  vertical-align: top;
  position: relative;
}
.activity div.moreWrapper {
  position: relative;
}
.activity div.moreWrapper button.viewMore, .activity div.moreWrapper button.checkAnswer {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: medium none;
  font-size: 13px;
  left: 50%;
  letter-spacing: 0.025em;
  padding: 7px 13px 9px;
  position: absolute;
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
  top: 50%;
  width: auto;
  z-index: 2;
  color: #fff;
}
.activity div.moreWrapper button.viewMore:first-letter, .activity div.moreWrapper button.checkAnswer:first-letter {
  text-transform: uppercase;
}
.activity div.moreWrapper button.viewMore:disabled, .activity div.moreWrapper button.checkAnswer:disabled {
  opacity: 0.3;
  background: #bbb;
  color: #777;
  cursor: default;
  text-shadow: none;
}
.activity button.viewMore, .activity button.checkAnswer {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: medium none;
  font-size: 13px;
  left: 50%;
  letter-spacing: 0.025em;
  padding: 7px 13px 9px;
  position: absolute;
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
  top: 50%;
  width: auto;
  z-index: 2;
  color: #fff;
}
.activity button.viewMore:first-letter {
  text-transform: uppercase;
}
.activity button.viewMore:disabled {
  opacity: 0.3;
  background: #bbb;
  color: #777;
  cursor: default;
  text-shadow: none;
}
.activity div.popupFeedback {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.55) ;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.55) ;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.55) ;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 450px;
  min-height: 40%;
  max-height: 80%;
  z-index: 3;
  text-align: center;
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #F2F2F2;
}
.activity div.popupFeedback > div {
  width: 100%;
  padding: 12px;
}
.activity div.popupFeedback p, .activity div.popupFeedback h3 {
  width: 100%;
  text-align: left;
}
.activity div.popupFeedback h3 {
  margin-top: 0;
  width: 90%;
}
.activity div.popupFeedback ol, .activity div.popupFeedback ul {
  text-align: left;
  right: 206px;
}
.activity div.popupFeedback button {
  -ms-transform: translate(-100%, 0%);
  -webkit-transform: translate(-100%, 0%);
  transform: translate(-100%, 0%);
  position: absolute;
  top: 0;
  left: 100%;
  width: 34px;
  height: 34px;
  border-top-right-radius: 1px;
  color: #fff;
  font-size: 22px;
  background: #aeb0b3;
}
.activity div.popupFeedback.visible {
  display: block;
}
.activity div.popupFeedbackShadow {
  opacity: 0.6;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.activity textarea {
  resize: none;
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #252C36;
}
.activity div.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
.activity div.loader .loaderBlur {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 96;
}
.activity div.loader button {
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.55) ;
  -moz-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.55) ;
  -webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.55) ;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 101;
  background: none;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.025em;
  padding: 9px 18px 11px;
  z-index: 97;
}
.activity div.loader button:first-letter {
  text-transform: uppercase;
}
.activity .hidden {
  opacity: 0;
}
.activity table {
  width: 100%;
  margin: 30px 0px;
}
.activity div.incorrectMarker {
  opacity: 0;
  transition: opacity 0.25s;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  width: 60px;
  height: 60px;
  cursor: default;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.activity div.incorrectMarker:after {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e648";
  position: relative;
  top: 18px;
  left: 18px;
  color: #fff;
  font-size: 25px;
}
.activity div.incorrectMarker.visible {
  opacity: 1;
}
.activity div.incorrectMarker.onTop {
  z-index: 100;
}
.activity div.mediaPlayer {
  width: auto;
  margin-bottom: 0;
}
.activity input[type="radio"] {
  display: none;
}

.activity.hidden {
  display: none;
}

.activity.wide {
  width: 752px;
}

/***********************************************************

    GENERIC SUMMARY POPUPS FOR ALL ACTIVITIES

***********************************************************/
.activitySummaryBox {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.55) ;
  -moz-box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.55) ;
  -webkit-box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.55) ;
  transition: height 0.2s, ease 0s;
  -webkit-transition: height 0.2s, ease 0s;
  -moz-transition: height 0.2s, ease 0s;
  -o-transition: height 0.2s, ease 0s;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
  left: 50%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  z-index: 100;
  max-height: none;
  width: 100%;
  max-width: 400px;
  border: 0;
  overflow: hidden;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}
.activitySummaryBox .summaryTitle {
  width: 100%;
  height: 33px;
  margin: 0;
  padding: 7px 6px 0;
  background: #000;
}
.activitySummaryBox .summaryTitle p {
  color: #fff;
  -webkit-font-smoothing: antialiased;
  float: left;
  max-width: 390px;
  width: 100%;
  text-align: center;
  margin-bottom: 7px;
  font-size: 15px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.activitySummaryBox .summaryTitle button {
  background: transparent;
  color: #FFFFFF;
  float: right;
  font-size: 22px;
  height: 34px;
  left: 6px;
  margin: 0;
  margin-top: -34px;
  padding: 0;
  position: relative;
  width: 34px;
  border-top-right-radius: 6px;
}
.activitySummaryBox .subTitle {
  height: 31px;
  width: 100%;
  background: #ccc;
}
.activitySummaryBox .subTitle button {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  float: left;
  height: 21px;
  margin: 5px 1px 0 7px;
  padding: 2px 8px;
  width: auto;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.activitySummaryBox .summaryContent {
  max-height: 300px;
  width: 100%;
  margin-bottom: 0;
  padding: 15px;
  overflow: auto;
  overflow-x: hidden;
}
.activitySummaryBox .summaryContent .bordered {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding: 14px;
  border: 1px solid #808285;
  margin-bottom: 8px;
}
.activitySummaryBox .summaryContent .bordered h2 {
  color: #252C36;
}
.activitySummaryBox .summaryContent .bordered *:last-child {
  margin-bottom: 0;
}
.activitySummaryBox .summaryContent .bordered.question {
  background: #252C36;
  border-color: #252C36;
  color: #fff;
}
.activitySummaryBox .summaryContent .bordered.question ul, .activitySummaryBox .summaryContent .bordered.question p {
  color: #fff;
}
.activitySummaryBox .summaryContent h3, .activitySummaryBox .summaryContent h2, .activitySummaryBox .summaryContent span.lowercase {
  margin-top: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
}
.activitySummaryBox .summaryContent h3.bordered, .activitySummaryBox .summaryContent h2.bordered {
  color: #fff;
  background: #252C36;
  border-color: #252C36;
}
.activitySummaryBox .summaryContent * {
  width: 100%;
}
.activitySummaryBox .summaryContent ul {
  width: 95%;
}
.activitySummaryBox .summaryContent ul li {
  width: 100%;
}
.activitySummaryBox .summaryContent iframe {
  height: 450px;
}
.activitySummaryBox .summaryContent span.lowercase {
  text-transform: lowercase;
}
.activitySummaryBox hr {
  margin: 1.3em 0;
}
.activitySummaryBox hr.whiteRule {
  border-color: #fff;
}
.activitySummaryBox .summaryContent.help {
  padding: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  max-height: 450px;
}

.activitySummaryBox.help {
  max-width: 600px;
}
.activitySummaryBox.help .summaryTitle p {
  max-width: none;
}

.activitySummaryShadow {
  opacity: 0.75;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: #fff;
}

div.activity.book {
  background: url(../images/woodbg.png);
}
div.activity.book #mybook {
  position: relative;
  margin: 10px;
  overflow: visible !important;
  z-index: 10;
}
div.activity.book #mybook .b-page {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
  padding: 0;
}
div.activity.book #mybook .b-wrap {
  top: 0;
  position: absolute;
}
div.activity.book #mybook .b-wrap-left, div.activity.book #mybook .b-wrap-right {
  background: #fff;
}
div.activity.book #mybook .b-wrap-left {
  box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.25) ;
  -moz-box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.25) ;
  -webkit-box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.25) ;
  box-shadow: inset -9px 0px 18px -7px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset -9px 0px 18px -7px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset -9px 0px 18px -7px rgba(0, 0, 0, 0.2);
}
div.activity.book #mybook .b-wrap-right {
  box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.15) ;
  -moz-box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.15) ;
  -webkit-box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.15) ;
}
div.activity.book #mybook .b-pN .b-wrap,
div.activity.book #mybook .b-p1 .b-wrap,
div.activity.book #mybook .b-p2 .b-wrap,
div.activity.book #mybook .b-p3 .b-wrap,
div.activity.book #mybook .b-p4 .b-wrap {
  left: 0;
}
div.activity.book #mybook .b-p0 .b-wrap {
  right: 0;
}
div.activity.book #mybook div.page {
  box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.5) ;
  -moz-box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.5) ;
  -webkit-box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.5) ;
  height: 100%;
}
div.activity.book #mybook div.page div.pageContent {
  width: 94%;
  height: 100%;
  margin: 0;
  padding: 16px;
}
div.activity.book #mybook div.page div.pageContent .reference {
  font-size: 9px;
}
div.activity.book #mybook div.page div.pageContent p {
  width: 100%;
}
div.activity.book #mybook div.page div.pageContent ol {
  margin: 0 -12px 10px 20px;
}
div.activity.book #mybook div.page div.pageContent ul {
  margin: 0 -10px 16px 16px;
}
div.activity.book #mybook div.page div.pageContent ul li {
  margin-bottom: 6px;
}
div.activity.book #mybook div.page div.pageContent h2, div.activity.book #mybook div.page div.pageContent h3 {
  margin-top: 0;
}
div.activity.book #mybook div.page div.pageContent h3 {
  margin-bottom: 5px;
}
div.activity.book #mybook div.page.cover {
  height: 100%;
}
div.activity.book .b-pN {
  z-index: 10;
}
div.activity.book .b-p0 {
  z-index: 30;
}
div.activity.book .b-p1 {
  z-index: 20;
}
div.activity.book .b-p2 {
  z-index: 20;
}
div.activity.book .b-p3 {
  z-index: 30;
}
div.activity.book .b-p4 {
  z-index: 10;
}

div.activity.book.wide div.page.backcover {
  background: url(../images/activity_images/book_back_cover_wide.png);
}

div.activity.checklist.condensed div.items {
  padding: 3px 3px 0 3px;
}
div.activity.checklist.condensed div.items div.item {
  margin-bottom: 2px;
}
div.activity.checklist.condensed div.items div.item p {
  margin: 6px;
}
div.activity.checklist div.items {
  padding: 10px 10px 0 10px;
}
div.activity.checklist div.items div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin-bottom: 10px;
  transition: opacity 0.3s;
  padding: 0;
  border: none;
}
div.activity.checklist div.items div.item p {
  width: 100%;
  max-width: 500px;
  display: inline-block;
  margin: 10px;
}
div.activity.checklist div.items div.item div.buttons {
  float: right;
  padding: 5px;
}
div.activity.checklist div.items div.item div.buttons button {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #fff;
  width: 26px;
  height: 26px;
  font-size: 14px;
  border: 1px solid;
}
div.activity.checklist div.items div.item div.buttons button.icon-cross:before {
  content: "\e648";
  font-size: 12px;
  position: relative;
  top: -1px;
}
div.activity.checklist div.items div.item div.buttons button.icon-tick:before {
  content: "\e649";
  position: relative;
  left: -1px;
}
div.activity.checklist div.items div.item div.buttons button.selected {
  background: orange;
  transition: 0.5s;
}
div.activity.checklist div.items div.item div.buttons button.faded {
  opacity: 0.3;
}
div.activity.checklist div.items div.item div.itemFeedback {
  display: none;
  margin: 0;
  border-top: 1px dotted;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
div.activity.checklist div.items div.item div.itemFeedback p {
  width: 100%;
}
div.activity.checklist div.items div.item div.itemFeedback .fb-tick + p, div.activity.checklist div.items div.item div.itemFeedback .fb-cross + p {
  margin-left: 27px;
  padding-right: 27px;
}
div.activity.checklist div.items div.item div.itemFeedback .fb-tick:after, div.activity.checklist div.items div.item div.itemFeedback .fb-cross:after {
  left: 1px;
  top: 4px;
}
div.activity.checklist div.items div.item div.itemFeedback:before {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: #FFF;
  border-bottom: 1px solid;
  border-right: 1px solid;
  content: "";
  display: block;
  height: 12px;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
  position: absolute;
  width: 12px;
}
div.activity.checklist div.items div.item.short p {
  width: 80%;
}
div.activity.checklist div.items div.item.invisible {
  opacity: 0;
}

div.activity.checklist.wide div.items div.item p {
  max-width: 712px;
}

div.activity.checklist + .accessible div.fb-cross, div.activity.checklist + .accessible div.fb-tick {
  display: none;
}
div.activity.checklist + .accessible div.fb-cross + p, div.activity.checklist + .accessible div.fb-tick + p {
  margin-left: 0;
}

div.activity.checklistTabbing {
  overflow: hidden;
}
div.activity.checklistTabbing div.tabs div.tab {
  cursor: pointer;
}
div.activity.checklistTabbing div.tabs div.tab img {
  width: 100%;
  height: 200px;
  float: left;
}
div.activity.checklistTabbing div.tabs div.tab div.speechWrapper {
  opacity: 0;
}
div.activity.checklistTabbing div.tabs div.tab div.speechWrapper div.speechTail {
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 30px solid #FFFFFF;
  left: 14px;
  position: relative;
  top: -2px;
  transform: rotate(12deg);
}
div.activity.checklistTabbing div.tabs div.tab.active {
  background: #fff;
}
div.activity.checklistTabbing div.tabs div.tab.active .speechWrapper {
  opacity: 1;
}
div.activity.checklistTabbing div.tabs.heads .tab {
  float: left;
}
div.activity.checklistTabbing div.tabs.heads .tab.active {
  background: transparent;
}
div.activity.checklistTabbing div.tabs.heads .tab.active:after {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  box-shadow: 0 0 0 3px #fff inset;
  -moz-box-shadow: 0 0 0 3px #fff inset;
  -webkit-box-shadow: 0 0 0 3px #fff inset;
  content: "";
  display: block;
  height: 200px;
  position: relative;
  width: 100%;
  border: 0px solid rgba(255, 255, 255, 0);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.activity.checklistTabbing div.tabContent {
  background: #fff;
  float: left;
  overflow: auto;
  width: 100%;
  border: 1px solid #ccc;
  border-top: 0;
  padding: 22px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
div.activity.checklistTabbing div.tabContent.intro p {
  text-align: center;
  margin-top: 25%;
}
div.activity.checklistTabbing div.tabContent p, div.activity.checklistTabbing div.tabContent h2, div.activity.checklistTabbing div.tabContent h3, div.activity.checklistTabbing div.tabContent textarea {
  width: 100%;
}
div.activity.checklistTabbing div.tabContent h2, div.activity.checklistTabbing div.tabContent h3 {
  margin-top: 0;
}
div.activity.checklistTabbing div.tabContent ul li {
  margin-bottom: 8px;
}
div.activity.checklistTabbing div.tabContent textarea {
  height: 100px;
}
div.activity.checklistTabbing div.tabContent div.block {
  width: 100%;
  margin: 0 0 18px 0;
}
div.activity.checklistTabbing div.tabContent div.block:last-of-type {
  margin-bottom: 0;
}
div.activity.checklistTabbing .tabContent.bubble {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin-left: 12px;
  margin-top: 12px;
  margin-bottom: -8px;
  width: 516px;
  border: 0;
}

div.activity.checklistTabbing.left div.tabs div.tab, div.activity.checklistTabbing.top div.tabs div.tab {
  background: rgba(255, 255, 255, 0.5);
  padding: 12px;
  float: left;
}
div.activity.checklistTabbing.left div.tabs div.tab.active, div.activity.checklistTabbing.top div.tabs div.tab.active {
  background: #fff;
}

div.activity.checklistTabbing.left {
  border-top: 1px solid #bbb;
}
div.activity.checklistTabbing.left.widertabs div.tabContent {
  width: 55%;
}
div.activity.checklistTabbing.left.widertabs div.tabs {
  width: 45%;
}
div.activity.checklistTabbing.left div.tabs {
  float: left;
  width: 30%;
}
div.activity.checklistTabbing.left div.tabs div.tab {
  width: 100%;
  margin-bottom: 1px;
  margin-left: 1px;
  padding: 16px 12px;
}
div.activity.checklistTabbing.left div.tabs div.tab.active {
  background: #fff;
  position: relative;
  z-index: 5;
}
div.activity.checklistTabbing.left div.tabContent {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) ;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) ;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) ;
  width: 70%;
  float: right;
  border-left: 0;
  position: relative;
  z-index: 4;
}
div.activity.checklistTabbing.left div.progressBar, div.activity.checklistTabbing.left div.nav {
  position: relative;
  z-index: 6;
}
div.activity.checklistTabbing.left div.screen.fullwidth div.tabContent {
  width: 100% !important;
  border-left: 1px solid #ccc !important;
}

div.activity.checklistTabbing.top div.tabs {
  width: 100%;
}
div.activity.checklistTabbing.top div.tabs div.tab {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 12px -4px 0 12px;
}

div.checklistTabbing.wide .tabContent.bubble {
  width: 728px;
}
div.checklistTabbing.wide.condensed div.items {
  padding: 3px 3px 0 3px;
}
div.checklistTabbing.wide.condensed div.items div.item {
  margin-bottom: 2px;
}
div.checklistTabbing.wide.condensed div.items div.item p {
  margin: 6px;
}
div.checklistTabbing.wide div.buttons {
  float: right;
}
div.checklistTabbing.wide div.buttons button {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #fff;
  width: 26px;
  height: 26px;
  font-size: 14px;
  border: 1px solid;
}
div.checklistTabbing.wide div.buttons button.icon-cross:before {
  content: "\e648";
  font-size: 12px;
  position: relative;
  top: -1px;
}
div.checklistTabbing.wide div.buttons button.icon-tick:before {
  content: "\e649";
  position: relative;
  left: -1px;
}
div.checklistTabbing.wide div.buttons button.selected {
  background: orange;
  transition: 0.5s;
}
div.checklistTabbing.wide div.buttons button.faded {
  opacity: 0.3;
}
div.checklistTabbing.wide.wide div.items div.item p {
  max-width: 712px;
}
div.checklistTabbing.wide + .accessible div.fb-cross, div.checklistTabbing.wide + .accessible div.fb-tick {
  display: none;
}
div.checklistTabbing.wide + .accessible div.fb-cross + p, div.checklistTabbing.wide + .accessible div.fb-tick + p {
  margin-left: 0;
}
div.checklistTabbing.wide input[type="checkbox"]:not(:checked) + label:after, div.checklistTabbing.wide input[type="checkbox"]:checked + label:after,
div.checklistTabbing.wide input[type="checkbox"]:not(:checked) + label:before, div.checklistTabbing.wide input[type="checkbox"]:checked + label:before {
  margin-left: 20px;
}

div.activity.classification {
  padding-bottom: 5px;
}
div.activity.classification div.dragArea {
  padding: 12px;
}
div.activity.classification div.item {
  cursor: move;
}
div.activity.classification div.items {
  padding: 10px 10px 0 10px;
  position: relative;
  height: 45px;
  z-index: 10;
  width: 100%;
  margin-bottom: 10px;
}
div.activity.classification div.items div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
div.activity.classification div.items div.item p {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}
div.activity.classification div.items div.item.dragging {
  opacity: 0;
}
div.activity.classification .columnBodies, div.activity.classification .columnHeads {
  width: 100%;
  z-index: 1;
}
div.activity.classification div.columnHeads {
  margin-top: 4px;
}
div.activity.classification .columnHead, div.activity.classification .columnBody {
  float: left;
}
div.activity.classification .columnHead {
  padding: 12px 8px 4px;
  border: 1px solid;
  border-left: 0;
}
div.activity.classification .columnHead p {
  text-align: center;
  width: 100%;
}
div.activity.classification .columnHead:first-of-type {
  border-left: 1px solid;
}
div.activity.classification .columnBody {
  max-height: 380px;
  padding: 0 5px 5px 5px;
  border: 1px solid;
  border-left: none;
  border-top: none;
  overflow-x: hidden;
  overflow-y: auto;
}
div.activity.classification .columnBody div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  width: 100%;
  margin: 6px 0;
  padding: 10px;
  line-height: 1.3em;
  height: auto !important;
}
div.activity.classification .columnBody div.item.dragging {
  opacity: 0;
}
div.activity.classification .columnBody.borderLeft {
  border-left: 1px solid;
}
div.activity.classification .ui-draggable-dragging {
  box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  -moz-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  -webkit-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  width: 164px !important;
  height: auto !important;
  overflow: hidden;
}
div.activity.classification .ui-draggable-dragging p {
  text-align: left;
}
div.activity.classification .ui-draggable-handle:active {
  box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  -moz-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  -webkit-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
}

/***********************************************************

    WIDE STYLES

***********************************************************/
div.activity.classification.wide div.items div.item {
  width: 86%;
  left: 50px;
}

div.activity.cloze.condensed div.item {
  padding: 15px;
  margin: 1px;
}
div.activity.cloze div.item {
  padding: 25px;
  margin: 10px;
}
div.activity.cloze div.item p {
  line-height: 1.5em;
}
div.activity.cloze div.item select {
  width: 80px;
  cursor: pointer;
  margin-bottom: -1px;
}
div.activity.cloze div.item span.correct {
  background: #179a33;
  color: #fff;
  padding: 2px 3px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
div.activity.cloze span.correct:after {
  color: #179a33;
  background: #fff;
  content: "\e649";
  font-size: 8px;
  margin: 2px -4px 2px 4px;
  padding: 6px 3px 6px 3px;
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none;
}
div.activity.cloze select:not(.incorrect) {
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  background: #fff;
}
div.activity.cloze .distractor {
  display: none;
}

div.activity.comic {
  overflow: hidden;
  height: 482px;
}
div.activity.comic div.nav {
  z-index: 2;
  position: relative;
}
div.activity.comic div.progressBar {
  position: absolute;
  z-index: 2;
  top: 473px;
}
div.activity.comic div.comicImage {
  display: inline-block;
  position: relative;
  transition: left 0.5s, top 0.5s;
  overflow: hidden;
  z-index: 0;
}

div.activity.dragDrop div.drags, div.activity.dragDrop div.drops, div.activity.dragDrop div.responses {
  float: left;
  display: inline-block;
}
div.activity.dragDrop div.drags, div.activity.dragDrop div.drops {
  width: 26%;
}
div.activity.dragDrop div.drags {
  padding: 8px;
  height: 100%;
}
div.activity.dragDrop div.drags div.dragHeading {
  height: 1px;
  width: 100%;
}
div.activity.dragDrop div.drops div.drag {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  width: 100%;
  height: 100%;
  padding-top: 34px;
}
div.activity.dragDrop div.responses {
  width: 48%;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #c27cca;
  overflow: hidden;
}
div.activity.dragDrop div.responses div.response {
  background: #fde8ff;
  border-bottom: 1px solid #c27cca;
  height: 55px;
}
div.activity.dragDrop div.responses div.response p {
  color: #111;
  padding: 10px;
  width: 100%;
}
div.activity.dragDrop div.responses div.response p.threelines {
  padding-top: 4px;
}
div.activity.dragDrop div.drops div.responseHeading, div.activity.dragDrop div.drops div.dropHeading, div.activity.dragDrop div.responses div.responseHeading, div.activity.dragDrop div.responses div.dropHeading {
  display: inline-block;
  height: 50px;
  padding: 5px;
  width: 100%;
}
div.activity.dragDrop div.drops div.responseHeading p, div.activity.dragDrop div.drops div.dropHeading p, div.activity.dragDrop div.responses div.responseHeading p, div.activity.dragDrop div.responses div.dropHeading p {
  width: 100%;
  text-align: center;
  padding: 10px 10px 0 10px;
  color: #fff;
}
div.activity.dragDrop div.drops div.dropHeading, div.activity.dragDrop div.responses div.dropHeading {
  border-right: 1px solid #c27cca;
}
div.activity.dragDrop div.drag {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #fff;
  cursor: move;
  margin-bottom: 8px;
  height: 40px;
  position: relative;
}
div.activity.dragDrop div.drag p {
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
  padding: 28px 8px;
  color: #252C36;
  width: 100%;
  text-align: center;
}
div.activity.dragDrop div.drag.correct, div.activity.dragDrop div.drag.incorrect {
  cursor: default;
}
div.activity.dragDrop div.drag.incorrect:after {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: #FF2D37;
  content: "\e648";
  display: block;
  left: 50%;
  margin-left: -10px;
  position: relative;
  top: 20px;
  width: 8px;
  color: #fff;
  padding: 6px;
  font-size: 8px;
}
div.activity.dragDrop div.drag.correct:after,
div.activity.dragDrop div.drag.incorrect:after {
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div.activity.dragDrop div.drag.correct:after {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: #29BB49;
  content: "\e649";
  display: block;
  left: 50%;
  margin-left: -10px;
  position: relative;
  top: 20px;
  width: 10px;
  color: #fff;
  padding: 5px;
  font-size: 10px;
}
div.activity.dragDrop div.drag.dragging {
  opacity: 0;
}
div.activity.dragDrop div.drop {
  height: 55px;
  background: none;
  border: 1px solid #c27cca;
  border-top: 0;
}
div.activity.dragDrop div.drop.dropHover {
  background: #F68636;
}
div.activity.dragDrop div.ui-draggable-dragging {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.25) ;
  -moz-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.25) ;
  -webkit-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.25) ;
  width: 180px !important;
  height: 40px !important;
}

div.activity.dragDrop + .accessible div.column {
  width: 50%;
  float: left;
}
div.activity.dragDrop + .accessible hr {
  clear: both;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  div.activity.flipper .screen .cardsRow .card {
    box-shadow: none;
  }
  div.activity.flipper .screen .cardsRow .card .face {
    height: 210px !important;
  }
}
div.activity.flipper {
  overflow: hidden;
  position: relative;
}
div.activity.flipper .screen {
  background: url(../images/woodbg.png) repeat;
  padding: 10px 0;
  position: relative;
}
div.activity.flipper .screen .card, div.activity.flipper .screen .point {
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}
div.activity.flipper .screen .front, div.activity.flipper .screen .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
div.activity.flipper .screen .front {
  transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  z-index: 2;
}
div.activity.flipper .screen .back {
  -webkit-transform: rotateY(180deg) translateZ(1px);
  -moz-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
}
div.activity.flipper .screen .point.flipped, div.activity.flipper .screen .card.flipped {
  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
div.activity.flipper .screen .point.flipped .front, div.activity.flipper .screen .point.flipped .back, div.activity.flipper .screen .card.flipped .front, div.activity.flipper .screen .card.flipped .back {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  -moz-backface-visibility: visible;
}
div.activity.flipper .screen .point.flipped .back, div.activity.flipper .screen .card.flipped .back {
  z-index: 3;
}
div.activity.flipper .screen .point.flipped .front, div.activity.flipper .screen .card.flipped .front {
  display: none;
}
div.activity.flipper .screen .cardsRow {
  text-align: center;
  -webkit-perspective: 1000;
  -ms-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
}
div.activity.flipper .screen .cardsRow .card {
  cursor: pointer;
  display: inline-block;
  margin: 5px;
  height: 202px;
  width: 158px;
}
div.activity.flipper .screen .cardsRow .card .face {
  display: table;
  height: 202px;
  width: 158px;
  padding: 10px;
  position: absolute;
  background: #fff;
}
div.activity.flipper .screen .cardsRow .card .face p {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  line-height: 1.2 !important;
}
div.activity.flipper .screen .cardsRow .card .face.back {
  background: #000;
}
div.activity.flipper .screen .cardsRow .card .face.back p, div.activity.flipper .screen .cardsRow .card .face.back ul, div.activity.flipper .screen .cardsRow .card .face.back ol {
  text-align: left;
  color: #fff;
  line-height: 1.2 !important;
}
div.activity.flipper .screen .point {
  z-index: 1;
  position: absolute;
}
div.activity.flipper .screen .point .front, div.activity.flipper .screen .point .back {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.55) ;
  -moz-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.55) ;
  -webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.55) ;
  position: absolute;
}
div.activity.flipper .screen .point .front {
  border-radius: 50% 50% 50% 0;
  -moz-border-radius: 50% 50% 50% 0;
  -webkit-border-radius: 50% 50% 50% 0;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%) rotate(-45deg);
  left: 50%;
  top: 50%;
  border: 2px solid #fff;
  z-index: 1;
}
div.activity.flipper .screen .point .flipvert {
  border-radius: 50% 0 50% 50%;
  -moz-border-radius: 50% 0 50% 50%;
  -webkit-border-radius: 50% 0 50% 50%;
}
div.activity.flipper .screen .point .circle {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
div.activity.flipper .screen .point .block {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  transform: rotate(0deg);
  width: auto;
  padding: 8px;
  height: auto;
}
div.activity.flipper .screen .point .mini {
  width: 20px;
  height: 20px;
}
div.activity.flipper .screen .point .back {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.6) ;
  -moz-box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.6) ;
  -webkit-box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.6) ;
  z-index: 10;
  max-height: 200px;
  overflow: auto;
  left: -100px;
  top: -90px;
  width: 200px;
}
div.activity.flipper .screen .point .back p, div.activity.flipper .screen .point .back h3 {
  width: 100%;
  padding: 10px;
  margin: 0;
}
div.activity.flipper .screen .point .back p {
  line-height: 1.2em;
}
div.activity.flipper .screen .point .back h3 {
  font-size: 15px;
  margin-bottom: -4px;
  padding-bottom: 0;
}
div.activity.flipper .screen .point .back ul {
  margin: 0px 15px 10px 26px;
}
div.activity.flipper .screen .point .moreShadow {
  box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.6) ;
  -moz-box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.6) ;
  -webkit-box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.6) ;
}
div.activity.flipper .screen .point .noShadow {
  box-shadow: 0 0 0 0 transparent ;
  -moz-box-shadow: 0 0 0 0 transparent ;
  -webkit-box-shadow: 0 0 0 0 transparent ;
}

div.activity.labelledText {
  background: #DFDCDC;
  border: 1px solid #B7B3B7;
  border-top: 21px solid #C4C2C2;
  box-shadow: 0px 30px 4px -30px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0px 30px 4px -30px rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 0px 30px 4px -30px rgba(0, 0, 0, 0.2) inset;
  overflow: visible;
}
div.activity.labelledText .nav {
  position: relative;
  z-index: 100;
}
div.activity.labelledText div.screens {
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  -o-transition: top 0.5s;
  top: 0px;
  padding: 0 12px;
}
div.activity.labelledText div.screens div.screen {
  display: block;
}
div.activity.labelledText div.screens div.screen div.item {
  width: 517px;
  height: 100%;
  padding: 25px 20px 26px;
  box-shadow: 0px 12px 0px 0px white, 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 12px 0px 0px white, 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 12px 0px 0px white, 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid #B7B3B7;
  top: 1px;
  position: relative;
}
div.activity.labelledText div.screens div.screen div.item h2 {
  margin-top: 0;
  margin-bottom: 5px;
}
div.activity.labelledText div.screens div.screen div.item h2 span {
  font-size: 17px;
  padding-bottom: 4px;
}
div.activity.labelledText div.screens div.screen div.item h1, div.activity.labelledText div.screens div.screen div.item h2, div.activity.labelledText div.screens div.screen div.item h3 {
  color: #1c1c1c;
}
div.activity.labelledText div.screens div.screen div.item h1 {
  text-decoration: underline;
}
div.activity.labelledText div.screens div.screen div.item p, div.activity.labelledText div.screens div.screen div.item ul li, div.activity.labelledText div.screens div.screen div.item ol li {
  line-height: 1.5em;
}
div.activity.labelledText div.screens div.screen div.item span {
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  cursor: pointer;
  background: #C0D0E0;
  padding: 2px 4px;
  line-height: 1.5em;
  display: inline;
  margin: 1px -1px;
  color: #000;
  font-size: 13px;
}
div.activity.labelledText div.screens div.screen div.item span h1, div.activity.labelledText div.screens div.screen div.item span h2, div.activity.labelledText div.screens div.screen div.item span h3 {
  display: inline-block;
  position: relative;
  top: 3px;
}
div.activity.labelledText div.screens div.screen div.item span h2, div.activity.labelledText div.screens div.screen div.item span h3 {
  top: 2px;
}
div.activity.labelledText div.screens div.screen div.item span.empty {
  display: inline-block;
  border-radius: 50% 50% 50% 0;
  -moz-border-radius: 50% 50% 50% 0;
  -webkit-border-radius: 50% 50% 50% 0;
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
  position: relative;
  margin-top: -1px;
  top: -2px;
}
div.activity.labelledText div.screens div.screen div.item.more {
  display: none;
  margin: 0;
}
div.activity.labelledText div.screens div.screen div.item.more.shown {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.6) ;
  -moz-box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.6) ;
  -webkit-box-shadow: 0px 0px 9px -4px rgba(0, 0, 0, 0.6) ;
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: block;
  padding: 14px;
  max-height: none;
  min-height: 0;
  height: auto !important;
  width: 194px;
  margin-left: 6px;
  float: right;
  top: 50%;
  right: 0;
  position: absolute;
  overflow: visible !important;
}
div.activity.labelledText div.screens div.screen div.item.more.shown h2, div.activity.labelledText div.screens div.screen div.item.more.shown h3 {
  margin: 0 0 6px;
}
div.activity.labelledText div.screens div.screen div.item.more.shown p:last-of-type {
  margin: 0;
}
div.activity.labelledText div.screens div.screen div.item.more.shown:before {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background: #F6F4F1;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  content: "";
  display: block;
  height: 10px;
  left: 0;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
  position: absolute;
  width: 10px;
}
div.activity.labelledText div.screens div.screen div.item.more.invisible {
  opacity: 0;
}
div.activity.labelledText div.screens div.screen:first-of-type {
  margin-top: 12px;
}
div.activity.labelledText div.shadow {
  box-shadow: 0px 36px 20px -30px rgba(255, 255, 255, 0.4) inset;
  -moz-box-shadow: 0px 36px 20px -30px rgba(255, 255, 255, 0.4) inset;
  -webkit-box-shadow: 0px 36px 20px -30px rgba(255, 255, 255, 0.4) inset;
  display: block;
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  height: 20px;
  width: 100%;
  z-index: 1;
  border-bottom: 1px solid #B7B3B7;
  background: none;
  border-top-left-radius: 4px;
  -moz-border-top-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-top-right-radius: 4px;
  -webkit-border-top-right-radius: 4px;
}
div.activity.labelledText div.shadow:after,
div.activity.labelledText div.shadow:before {
  display: block;
  color: #515252;
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
div.activity.labelledText div.shadow:before {
  content: '\e6e0';
  float: left;
  position: relative;
  left: 6px;
  top: 3px;
  font-size: 13px;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
div.activity.labelledText div.shadow:after {
  content: '\e648';
  float: right;
  position: relative;
  right: 6px;
  top: 6px;
  font-size: 7px;
}

div.activity.labelledText:before {
  display: block;
  color: #515252;
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  content: '\e60b  Document';
  float: left;
  position: relative;
  left: 50%;
  top: -17px;
  font-size: 11px;
  font-weight: bold;
  margin-left: -36px;
}

div.activity.labelledText.scrolling {
  overflow: hidden;
  border-top: 0;
}

div.activity.ladder div.steps {
  float: left;
  z-index: 80;
  border-top: 1px solid;
  width: 40%;
}
div.activity.ladder div.steps div.step {
  opacity: 1;
  height: 70px;
  background: #999;
}
div.activity.ladder div.steps div.step .label, div.activity.ladder div.steps div.step .number {
  float: left;
  height: 100%;
  display: table;
}
div.activity.ladder div.steps div.step .label p, div.activity.ladder div.steps div.step .number p {
  display: table-cell;
  vertical-align: middle;
}
div.activity.ladder div.steps div.step .label {
  background: #999;
  padding-left: 12px;
  border: 1px solid;
  border-right: 0;
  border-top: 0;
  width: 70%;
}
div.activity.ladder div.steps div.step .label p {
  padding-right: 12px;
}
div.activity.ladder div.steps div.step .number {
  box-shadow: -10px 0px 5px -9px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: -10px 0px 5px -9px rgba(0, 0, 0, 0.15) inset;
  -webkit-box-shadow: -10px 0px 5px -9px rgba(0, 0, 0, 0.15) inset;
  border-left: 6px solid;
  border-right: 0;
  width: 30%;
  border-bottom: 5px solid;
}
div.activity.ladder div.steps div.step .number p {
  text-align: center;
  font-size: 50px;
}
div.activity.ladder div.steps .step.available {
  opacity: 1;
  box-shadow: 0 0 0 0 #000 ;
  -moz-box-shadow: 0 0 0 0 #000 ;
  -webkit-box-shadow: 0 0 0 0 #000 ;
  cursor: pointer;
  border: 0;
  background: #bbb;
}
div.activity.ladder div.steps .step.available div.label {
  background: #bbb;
}
div.activity.ladder div.steps .step.selected div.label {
  background: #fff;
}
div.activity.ladder div.steps .step.selected div.number {
  background: #fff;
}
div.activity.ladder .ladderFeedbackWrapper {
  float: right;
  position: relative;
  height: 100%;
  width: 60%;
}
div.activity.ladder .ladderFeedbackWrapper .ladderFeedback {
  background: white;
  padding: 12px;
  overflow: auto;
  position: absolute;
  top: 0px;
  width: 101%;
  border: 1px solid;
  border-left: 0;
  height: 100%;
  box-shadow: -3px 0px 0px 0px #ccc inset;
  -moz-box-shadow: -3px 0px 0px 0px #ccc inset;
  -webkit-box-shadow: -3px 0px 0px 0px #ccc inset;
}
div.activity.ladder .ladderFeedbackWrapper .ladderFeedback p {
  padding: 8px;
  width: 100%;
}
div.activity.ladder .ladderFeedbackWrapper .ladderFeedback ul {
  width: auto;
}
div.activity.ladder .ladderFeedbackWrapper .ladderFeedback.visible {
  left: 0px;
}
div.activity.ladder .ladderFeedbackWrapper .ladderFeedback.hidden {
  left: 800px;
}

div.activity.ladder.wide .ladderFeedbackWrapper .ladderFeedback {
  box-shadow: -5px 0px 0px 0px #ccc inset;
  -moz-box-shadow: -5px 0px 0px 0px #ccc inset;
  -webkit-box-shadow: -5px 0px 0px 0px #ccc inset;
}

div.activity.matching.condensed div.column div.item {
  margin: 5px;
  padding: 5px;
}
div.activity.matching.condensed div.pair div.item {
  margin: 0;
  padding: 5px 16px;
}
div.activity.matching div.column {
  width: 50%;
  float: left;
  padding: 0;
  vertical-align: middle;
}
div.activity.matching div.column div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  cursor: pointer;
  margin: 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}
div.activity.matching div.column div.item p {
  width: 100%;
  margin: 0;
}
div.activity.matching div.column:nth-child(odd) {
  background: rgba(255, 255, 255, 0.25);
}
div.activity.matching div.pair {
  position: relative;
}
div.activity.matching div.pair div.item {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  margin: 0;
  pointer-events: none;
  cursor: default;
  height: 100%;
  padding: 10px 20px;
}
div.activity.matching div.pair:before {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  font-family: 'icomoon', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e649";
  display: block;
  color: #fff;
  left: 50%;
  top: 50%;
  margin-left: -13px;
  position: absolute;
  width: 15px;
  z-index: 20;
  font-size: 14px;
  padding: 6px;
  height: 14px;
  margin-bottom: -20px;
}

div.activity.matching + .accessible div.column {
  width: 50%;
  float: left;
}
div.activity.matching + .accessible hr {
  clear: both;
}

div.activity.mcq div.score {
  border-radius: 18px;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  -ms-transform: translate(50%, 0%);
  -webkit-transform: translate(50%, 0%);
  transform: translate(50%, 0%);
  letter-spacing: 0.023em;
  background: none;
  color: #fff;
  position: absolute;
  z-index: 100;
  top: 5px;
  right: 50%;
  font-size: 18px;
  padding: 4px;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
div.activity.mcq div.score span.you {
  position: relative;
  left: 3px;
}
div.activity.mcq div.score span.tot {
  position: relative;
  left: -3px;
}
div.activity.mcq div.screen div.item.question p {
  width: 100%;
  margin-bottom: 0px;
}
div.activity.mcq div.screen div.item.question audio {
  margin: 10px 0;
}
div.activity.mcq div.screen div.answers {
  margin: 0 0 10px 0;
}
div.activity.mcq div.screen div.answers div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  cursor: pointer;
  margin: 10px;
}
div.activity.mcq div.screen div.answers div.item p {
  margin-bottom: 0px;
  width: 100%;
}
div.activity.mcq div.screen div.answers div.item.selected {
  background: #EEFFF7;
}
div.activity.mcq div.screen div.answers div.item.disabled {
  cursor: default;
  pointer-events: none;
}
div.activity.mcq div.screen div.item.more {
  overflow: auto;
  height: 100px;
}

div.activity.mcq + .accessible ol {
  list-style-type: none;
  margin-left: 0px;
}

.radioMcq .screens .answers {
  border: 1px solid #ccc;
  border-top: 0;
  border-bottom: 0;
}
.radioMcq .screens .answers .item {
  float: left;
  width: 25%;
  min-height: 58px;
  text-align: center;
  padding: 20px 30px 20px 0px;
}
.radioMcq .screens .answers .item input[type="radio"] + label {
  width: 20px;
  height: 20px;
}
.radioMcq .screens .answers .item input[type="radio"] + label p {
  text-align: left;
  width: 70px !important;
  margin-left: 25px;
  margin-top: 1px;
}
.radioMcq .moreWrapper {
  min-height: 70px;
}
.radioMcq .moreWrapper .feedback {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  display: none;
  margin: 0;
}

.activity.mediaPlayer {
  background: transparent;
  overflow: visible;
}
.activity.mediaPlayer iframe {
  width: 100%;
  height: 303.75px;
}
.activity.mediaPlayer audio {
  width: 100%;
}
.activity.mediaPlayer div.tracklist {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  overflow: auto;
  max-height: 420px;
  border: 1px solid #222;
  margin-top: 7px;
}
.activity.mediaPlayer div.tracklist div.item {
  cursor: pointer;
  padding: 10px 5px;
  border-bottom: 1px solid #222;
  background: #424242;
  padding: 0;
}
.activity.mediaPlayer div.tracklist div.item p {
  color: #fff;
}
.activity.mediaPlayer div.tracklist div.item img {
  float: left;
  width: 80px;
}
.activity.mediaPlayer div.tracklist div.item div.videoTitle {
  float: left;
  padding: 8px;
  width: 430px;
}
.activity.mediaPlayer div.tracklist div.item div.videoTitle p {
  width: 100%;
}
.activity.mediaPlayer div.tracklist div.item:last-of-type {
  border-bottom: 0;
}
.activity.mediaPlayer div.tracklist div.item:hover {
  background: #5b5b5b;
}
.activity.mediaPlayer div.tracklist div.item.selected {
  background: #BDF5FF;
}
.activity.mediaPlayer div.tracklist div.item.selected p {
  color: #252C36;
}
.activity.mediaPlayer div.tracklist.no-thumbnails img {
  display: none;
}
.activity.mediaPlayer div.tracklist.video {
  margin-top: 8px;
  max-height: 150px;
}
.activity.mediaPlayer div.tracklist:before {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  content: "";
  display: block;
  height: 12px;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 12px;
  top: 33px;
  background: #222;
  z-index: -1;
}
.activity.mediaPlayer div.tracklist.video:before {
  top: 307px;
}
.activity.mediaPlayer button {
  background: none;
  width: 100px;
  height: 100px;
}
.activity.mediaPlayer button.playing {
  background: url("../images/equalizer.gif");
}

div.pod.videopod.open div.podText div.activity.mediaPlayer div.tracklist div.item div.videoTitle {
  width: 412px;
}

.activity.mediaPlayer.mini {
  width: 28px;
}
.activity.mediaPlayer.mini button {
  background: url("../images/listen.png") no-repeat;
  width: 16px;
  height: 13px;
  display: inline;
  padding: 0;
  position: relative;
  top: 1px;
}
.activity.mediaPlayer.mini button:hover {
  background: url("../images/listen_hover.png") no-repeat;
}
.activity.mediaPlayer.mini button.playing {
  background: url("../images/listen_playing.gif") no-repeat;
}

div.activity.painting div.categories {
  text-align: center;
  background: url(../images/woodbg.png) repeat;
}
div.activity.painting div.categories div.item {
  box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -moz-box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -webkit-box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  height: 60px;
  margin: 25px 18px 54px;
  width: 60px;
  cursor: pointer;
  transition: 0.1s;
}
div.activity.painting div.categories div.item p {
  box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -moz-box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -webkit-box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  background: #FFF;
  font-size: 11px;
  margin-left: -16px;
  margin-top: 56px;
  padding: 3px;
  width: 68px;
  pointer-events: none;
  line-height: 1em;
}
div.activity.painting div.categories div.item:after {
  box-shadow: 6px 49px 10px 0 rgba(0, 0, 0, 0.07) ;
  -moz-box-shadow: 6px 49px 10px 0 rgba(0, 0, 0, 0.07) ;
  -webkit-box-shadow: 6px 49px 10px 0 rgba(0, 0, 0, 0.07) ;
  border-radius: 33px;
  -moz-border-radius: 33px;
  -webkit-border-radius: 33px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: none;
  content: "";
  display: block;
  height: 33px;
  margin-left: 33px;
  margin-top: -125px;
  position: absolute;
  width: 28px;
}
div.activity.painting div.categories div.item.selected {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  border-color: #fff;
  cursor: default;
}
div.activity.painting div.item.question {
  margin: 0;
  text-align: center;
  width: 100%;
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
div.activity.painting div.items {
  padding: 12px 20px;
  text-align: center;
}
div.activity.painting .selectable {
  cursor: pointer;
}
div.activity.painting div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  display: inline-block;
  margin: 6px;
  border: 0;
}
div.activity.painting div.item p {
  width: auto;
  margin: 0;
  line-height: 1.5em;
}
div.activity.painting div.item p span.selectable {
  border: 1px solid #aaa;
  padding: 1px 3px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
div.activity.painting div.item p span.selected {
  border-color: #fff;
}

div.activity.paragraphSequencing {
  padding-bottom: 5px;
}
div.activity.paragraphSequencing div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin: 10px;
  cursor: move;
  position: relative;
}
div.activity.paragraphSequencing div.item p {
  margin: 0;
  width: 95%;
}
div.activity.paragraphSequencing div.item.fixed {
  cursor: text;
  background: #f2f2f2;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
}
div.activity.paragraphSequencing div.item.more p {
  width: 100%;
}
div.activity.paragraphSequencing div.item.incorrect:after, div.activity.paragraphSequencing div.item.correct:after {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-transform: translate(0, 50%);
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
  left: 100%;
  display: block;
  margin-left: -33px;
  color: #fff;
  position: absolute;
  bottom: 50%;
}
div.activity.paragraphSequencing div.item.incorrect:after {
  content: "\e648";
  height: 11px;
  width: 11px;
  font-size: 11px;
  padding: 8px;
}
div.activity.paragraphSequencing div.item.correct:after {
  content: "\e649";
  height: 14px;
  width: 15px;
  font-size: 14px;
  padding: 6px;
}
div.activity.paragraphSequencing div.item.ui-sortable-handle.ui-sortable-helper {
  box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.3) ;
  -moz-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.3) ;
  -webkit-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.3) ;
}
div.activity.paragraphSequencing div.item.question {
  cursor: default;
}

div.activity.pcnt {
  position: relative;
}
div.activity.pcnt .screens.no-animation {
  transition: 0s;
  -webkit-transition: 0s;
}
div.activity.pcnt .screen .item h2, div.activity.pcnt .screen .item h3 {
  margin-top: 0;
}
div.activity.pcnt .screen .item.intro {
  padding: 22px;
  border: 1px solid #ccc;
  border-top: 0;
}
div.activity.pcnt .screen .item.question .block {
  padding: 10px;
  margin-bottom: 6px;
  background: #fff;
}
div.activity.pcnt .screen .item.question audio {
  margin: 10px 0;
}
div.activity.pcnt .screen .item.question .mediaPlayer {
  margin-bottom: 0;
  text-align: center;
}
div.activity.pcnt .screen .item.question p:last-of-type {
  margin-bottom: 0;
}
div.activity.pcnt .screen .item.input {
  border: 1px solid;
  border-bottom: 0;
  border-top: 0;
}
div.activity.pcnt .screen .item.input textarea {
  width: 100%;
  border: none;
  resize: none;
  padding: 5px;
  height: 100px;
  font-size: 1em;
  line-height: 1.3em;
}
div.activity.pcnt .screen .item.input p {
  padding: 22px 22px 12px;
}
div.activity.pcnt .screen .item.question + .item.input {
  padding: 5px;
}
div.activity.pcnt .screen .item.input.bottomBorder {
  border-bottom: 1px solid #ccc;
}
div.activity.pcnt .screen .item.more {
  min-height: 100px;
}

div.activity.pyramid {
  text-align: center;
  position: relative;
  padding: 30px;
}
div.activity.pyramid div.step {
  z-index: 1;
  position: relative;
  height: 0;
  border-bottom: solid;
  border-left: solid transparent;
  border-right: solid transparent;
  cursor: pointer;
}
div.activity.pyramid div.step span {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -moz-box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -webkit-box-shadow: 0 1px 3px -1px rgba(20, 15, 10, 0.6) ;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  position: absolute;
  background: #fff;
  padding: 5px;
}
div.activity.pyramid div.step.step1 span {
  -ms-transform: translate(-50%, 20%);
  -webkit-transform: translate(-50%, 20%);
  transform: translate(-50%, 20%);
}
div.activity.pyramid div.step.step1:after {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: white;
  content: "";
  display: block;
  height: 40px;
  left: -175px;
  position: absolute;
  top: 12px;
  width: 40px;
  z-index: 0;
  cursor: default;
  pointer-events: none;
}

div.activity.pyramid:before {
  background: rgba(0, 0, 0, 0.25);
  content: "";
  display: block;
  height: 240px;
  left: 132px;
  position: absolute;
  top: 270px;
  transform: rotate(-30deg) skew(30deg);
  -ms-transform: rotate(-30deg) skew(30deg);
  -moz-transform: rotate(-30deg) skew(30deg);
  -webkit-transform: rotate(-30deg) skew(30deg);
  width: 276px;
  z-index: 0;
}

div.activity.pyramid:after {
  background: rgba(255, 255, 255, 0.35);
  content: "";
  display: block;
  height: 580px;
  left: 0;
  position: absolute;
  top: 232px;
  width: 100%;
  z-index: 0;
}

div.activity.pyramid.upsideDown div.step {
  -ms-transform: translate(-50%) rotate(180deg);
  -webkit-transform: translate(-50%) rotate(180deg);
  transform: translate(-50%) rotate(180deg);
}
div.activity.pyramid.upsideDown div.step span {
  -ms-transform: translate(-50%, -50%) rotate(180deg);
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
  transform: translate(-50%, -50%) rotate(180deg);
}
div.activity.pyramid.upsideDown div.step.step1 span {
  -ms-transform: translate(-50%, -20%) rotate(180deg);
  -webkit-transform: translate(-50%, -20%) rotate(180deg);
  transform: translate(-50%, -20%) rotate(180deg);
}

div.activity.pyramid.upsideDown:before,
div.activity.pyramid.upsideDown:after,
div.activity.pyramid.upsideDown div.step.step1:after {
  display: none;
}

div.activity.reflection div.screen {
  padding: 10px;
}
div.activity.reflection div.screen div.item {
  margin: 15px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
div.activity.reflection div.screen div.item p {
  width: 100%;
}
div.activity.reflection div.screen div.item textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid #bbb;
}
div.activity.reflection div.screen div.tabs {
  padding: 0 11px;
}
div.activity.reflection div.screen div.tabs div.tab {
  float: left;
  background: rgba(255, 255, 255, 0.5);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  cursor: pointer;
  height: auto;
  margin: -15px 4px 15px;
  padding: 18px 28px;
}
div.activity.reflection div.screen div.tabs div.tab:first-letter {
  text-transform: capitalize;
}
div.activity.reflection div.screen div.tabs div.tab.right {
  float: right;
}
div.activity.reflection div.screen div.tabs div.tab.active {
  background: #fff;
}

div.activity.reflection + .accessible .inline {
  display: inline;
  margin-bottom: 10px;
}

div.activity.reflectionMod div.screen {
  padding: 10px;
}
div.activity.reflectionMod div.screen div.item.reflectionItem {
  margin: 15px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
div.activity.reflectionMod div.screen div.item.reflectionItem p {
  width: 100%;
}
div.activity.reflectionMod div.screen div.item.reflectionItem textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid #bbb;
}
div.activity.reflectionMod div.screen div.tabs {
  padding: 0 11px;
}
div.activity.reflectionMod div.screen div.tabs div.tab {
  float: left;
  background: rgba(255, 255, 255, 0.5);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  cursor: pointer;
  height: auto;
  margin: -15px 4px 15px;
  padding: 18px 28px;
}
div.activity.reflectionMod div.screen div.tabs div.tab:first-letter {
  text-transform: capitalize;
}
div.activity.reflectionMod div.screen div.tabs div.tab.right {
  float: right;
}
div.activity.reflectionMod div.screen div.tabs div.tab.active {
  background: #fff;
}

div.activity.reflection + .accessible .inline {
  display: inline;
  margin-bottom: 10px;
}

div.activity.relatedConcepts {
  position: relative;
}
div.activity.relatedConcepts div.concepts {
  margin: 30px 30px;
  width: 480px;
  height: 480px;
}
div.activity.relatedConcepts div.concepts div.concept {
  border-radius: 75px;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  width: 150px;
  height: 150px;
  float: left;
  display: table;
  margin: 5px;
  cursor: pointer;
  padding: 10px 30px;
  z-index: 1;
  transition: 0.25s;
}
div.activity.relatedConcepts div.concepts div.concept p {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
div.activity.relatedConcepts div.concepts div.concept.central {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  padding: 0;
  z-index: 3;
}
div.activity.relatedConcepts div.concepts div.concept.central p {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background: #fff;
  font-size: 14px;
  z-index: 2;
  position: relative;
  font-weight: bold;
  padding: 6px;
}
div.activity.relatedConcepts div.concepts div.concept.central:before,
div.activity.relatedConcepts div.concepts div.concept.central:after {
  background: inherit;
  content: "";
  display: block;
  height: 161px;
  left: -18px;
  position: absolute;
  top: -4px;
  width: 188px;
  z-index: 1;
}
div.activity.relatedConcepts div.concepts div.concept.central:before {
  transform: rotate(-30deg) skew(30deg);
  -ms-transform: rotate(-30deg) skew(30deg);
  -moz-transform: rotate(-30deg) skew(30deg);
  -webkit-transform: rotate(-30deg) skew(30deg);
}
div.activity.relatedConcepts div.concepts div.concept.central:after {
  transform: rotate(-120deg) skew(30deg);
  -ms-transform: rotate(-120deg) skew(30deg);
  -moz-transform: rotate(-120deg) skew(30deg);
  -webkit-transform: rotate(-120deg) skew(30deg);
}
div.activity.relatedConcepts div.concepts div.concept.inactive {
  opacity: 0;
  cursor: default;
}
div.activity.relatedConcepts div.concepts div.concept.central.inactive {
  opacity: 1;
  background: #aaa;
  cursor: default;
  pointer-events: none;
}

div.activity.seesaw {
  padding-bottom: 5px;
}
div.activity.seesaw.condensed div.scales {
  margin-top: 0;
  margin-bottom: -11px;
}
div.activity.seesaw.condensed div.items {
  padding: 5px 5px 0 5px;
}
div.activity.seesaw.condensed div.items div.item {
  margin: 5px 0 5px;
  padding: 5px;
}
div.activity.seesaw div.nav {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
div.activity.seesaw div.scales {
  background: url(../images/seesawbg.png) no-repeat;
  margin-top: 15px;
}
div.activity.seesaw div.scales div.drop {
  width: 50%;
  float: left;
  height: 200px;
  transition: opacity 0.5s;
  padding: 12px;
  position: relative;
}
div.activity.seesaw div.scales div.drop div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100px;
}
div.activity.seesaw div.scales div.drop div.item p {
  width: 100%;
  margin: 0;
}
div.activity.seesaw div.scales div.drop.left div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin-bottom: 70px;
  width: 230px;
  height: auto;
  max-height: 200px;
}
div.activity.seesaw div.scales div.drop.fadedOut {
  opacity: 0;
  transition: opacity 0.2s ease 0s;
}
div.activity.seesaw div.scales div.drop.right {
  display: none;
  vertical-align: bottom;
}
div.activity.seesaw div.scales div.drop.right div.item {
  margin-left: 15px;
  margin-bottom: 30px;
  width: 230px;
  height: auto;
  max-height: 150px;
}
div.activity.seesaw div.scales div.drop.right.visible {
  display: inline-block;
}
div.activity.seesaw div.scales div.drop.ui-draggable {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  width: 230px;
  height: auto;
  max-height: 150px;
}
div.activity.seesaw div.scales div.drop.ui-droppable.dropHover {
  background: none;
}
div.activity.seesaw div.scales div.drop.ui-droppable.dropHover:before {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: rgba(246, 134, 54, 0.75);
  content: "";
  display: block;
  height: 160px;
  position: absolute;
  width: 160px;
  top: 12px;
  left: 53px;
  z-index: 0;
}
div.activity.seesaw div.scales div.drop.ui-droppable.dropHover:after {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: transparent;
  content: "+";
  font-size: 36px;
  color: #fff;
  padding: 70px;
  display: block;
  height: 160px;
  position: absolute;
  width: 160px;
  top: 5px;
  left: 53px;
  z-index: 0;
}
div.activity.seesaw div.items {
  padding: 10px 10px 0 10px;
}
div.activity.seesaw div.items div.item {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  cursor: move;
  margin: 5px 0 10px;
}
div.activity.seesaw div.items div.item p {
  width: 100%;
  margin: 0;
}
div.activity.seesaw div.items div.item.dragging {
  opacity: 0;
}
div.activity.seesaw div.items div.item.dropped {
  height: 30px;
}
div.activity.seesaw div.incorrectMarker {
  top: 145px;
  left: 133px;
  width: 26px;
  height: 26px;
}
div.activity.seesaw div.incorrectMarker:after {
  top: 6px;
  left: 8px;
  color: #fff;
  font-size: 10px;
}
div.activity.seesaw div.itemSummary {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: auto;
  height: 100%;
}
div.activity.seesaw div.itemSummary div.row {
  width: 100%;
  padding: 10px;
}
div.activity.seesaw div.itemSummary div.row div.item {
  width: 50%;
  display: inline-block;
  float: left;
  margin-bottom: -20px;
  border: 1px solid #888;
  border-bottom: 0;
  padding: 8px;
}
div.activity.seesaw div.itemSummary div.row div.item p {
  margin: 0;
}
div.activity.seesaw div.itemSummary div.row div.item:nth-child(odd) {
  border-right: 0;
}
div.activity.seesaw div.itemSummary div.row div.item:nth-child(even) {
  border-left: 1px dotted #888;
}
div.activity.seesaw div.itemSummary div.row:first-of-type div.item:nth-child(odd) {
  border-top-left-radius: 4px;
}
div.activity.seesaw div.itemSummary div.row:first-of-type div.item:nth-child(even) {
  border-top-right-radius: 4px;
}
div.activity.seesaw div.itemSummary div.row:last-of-type div.item:nth-child(odd) {
  border-bottom-left-radius: 4px;
  border-bottom: 1px solid #888;
}
div.activity.seesaw div.itemSummary div.row:last-of-type div.item:nth-child(even) {
  border-bottom-right-radius: 4px;
  border-bottom: 1px solid #888;
  margin-bottom: 6px;
}
div.activity.seesaw div.itemSummary div.row:nth-child(odd) div.item {
  background: #e8eff6;
}
div.activity.seesaw .ui-draggable-dragging {
  box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  -moz-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  -webkit-box-shadow: -1px 2px 6px 2px rgba(0, 0, 0, 0.4) ;
  width: 230px;
}
div.activity.seesaw .ui-draggable-dragging.ui-draggable-handle {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
div.activity.seesaw .ui-draggable-dragging.ui-draggable-handle p {
  max-width: 220px;
}

div.activity.slider {
  /*hide the outline behind the border*/
}
div.activity.slider div.labelWrapper {
  padding: 17px 39px 0px 39px;
}
div.activity.slider div.labelWrapper div.label {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 8px 5px;
  border: 1px solid #ccc;
  margin-left: -5px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  position: relative;
  background: #fff;
}
div.activity.slider div.labelWrapper div.label p {
  width: 100%;
  height: 100%;
  margin: 0;
}
div.activity.slider div.labelWrapper div.label:first-child {
  margin-left: 2px;
}
div.activity.slider div.labelWrapper div.label:after {
  -ms-transform: translate(-10px, 0%);
  -webkit-transform: translate(-10px, 0%);
  transform: translate(-10px, 0%);
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #FFFFFF;
  margin-top: -2px;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
}
div.activity.slider div.labelWrapper:after {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background: #fff;
  content: "";
  display: block;
  height: 44px;
  margin-bottom: -39px;
  margin-left: -29px;
  position: relative;
  top: 16px;
  width: 520px;
}
div.activity.slider input[type=range] {
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid #EEFFF7;
  width: 100%;
  padding: 20px 0;
  margin: 20px 0;
  background: #fff;
}
div.activity.slider input[type=range]::-webkit-slider-runnable-track, div.activity.slider input[type=range]::-moz-range-track {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  width: 300px;
  height: 5px;
  background: #fff;
  border: none;
}
div.activity.slider input[type=range]::-webkit-slider-thumb, div.activity.slider input[type=range]::-moz-range-thumb {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: none;
  height: 16px;
  width: 16px;
}
div.activity.slider input[type=range]:focus {
  outline: none;
}
div.activity.slider input[type=range]:focus::-webkit-slider-runnable-track, div.activity.slider input[type=range]:focus::-moz-range-track {
  background: #fff;
}
div.activity.slider input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}
div.activity.slider div.sliderFeedback {
  width: 100%;
  display: none;
  padding: 12px;
  margin-top: 10px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  background: #F2F2F2;
  border: 1px solid #ccc;
  overflow: auto;
}
div.activity.slider div.sliderFeedback p, div.activity.slider div.sliderFeedback h3 {
  width: 100%;
}
div.activity.slider div.sliderFeedback h3 {
  margin-top: 0px;
  font-size: 15px;
  margin-bottom: 5px;
}
div.activity.slider div.sliderFeedback.visible {
  display: block;
}

div.activity.slider.wide div.labelWrapper:after {
  width: 732px;
}

/***********************************************************

    RANGLE SLIDER CSS (POLYFILL FOR IE8+)

***********************************************************/
.rangeslider,
.rangeslider__fill {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) "inset" ;
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) "inset" ;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) "inset" ;
  background: #e6e6e6;
  display: block;
  height: 20px;
  margin: 28px 30px 36px 30px;
}

.rangeslider {
  box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  -moz-box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  position: relative;
  background: #fcfcfc;
  border: 1px solid #dbdbdb;
  border-bottom: 1px solid #cdcdcd;
  height: 10px;
}

.rangeslider--disabled {
  opacity: 0.4;
}

.rangeslider__fill {
  box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  -moz-box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  background: #6CF;
  position: absolute;
  top: 0;
  display: none;
  border-top: 1px solid #42bfff;
  border-bottom: 1px solid #41b6f3;
  margin-top: -1px;
  height: 10px;
  margin-left: 0px;
}

.rangeslider__handle {
  box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.3) ;
  -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.3) ;
  -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.3) ;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -10px;
  background: #6CF;
  transform: rotate(135deg);
  height: 23px;
  width: 23px;
  top: -8px;
  border: 5px solid #fff;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  box-shadow: 0 0 8px 0 rgba(255, 0, 255, 0.9) ;
  -moz-box-shadow: 0 0 8px 0 rgba(255, 0, 255, 0.9) ;
  -webkit-box-shadow: 0 0 8px 0 rgba(255, 0, 255, 0.9) ;
}

div.activity.slider.fill .rangeslider__fill {
  display: block;
}

div.activity.slider.pointed div.rangeslider__handle {
  border-radius: 50% 50% 50% 0;
  -moz-border-radius: 50% 50% 50% 0;
  -webkit-border-radius: 50% 50% 50% 0;
}

div.activity.slidersWithSummary div.screen {
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-top: 0;
}
div.activity.slidersWithSummary div.screen p {
  width: 100%;
}
div.activity.slidersWithSummary div.screen h2 {
  margin-top: 0;
}
div.activity.slidersWithSummary div.screen h2.value {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: #2fa7e5;
  width: 40px;
  height: 40px;
  padding: 3px;
  color: #fff;
  font-size: 27px;
  left: 433px;
  top: 79px;
  position: relative;
  text-align: center;
}
div.activity.slidersWithSummary div.screen h2.selection {
  margin: 0px 0px 15px;
  left: 409px;
  top: -82px;
  width: 86px;
  position: relative;
  text-align: center;
  font-size: 13px;
  line-height: 1.1em;
  color: #666;
}
div.activity.slidersWithSummary div.screen div.axis {
  width: 540px;
  text-align: center;
  margin: -20px;
}
div.activity.slidersWithSummary div.screen div.axis h2 {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  margin: 0 3px;
  background: #c27cca;
  width: 30px;
  height: 30px;
  padding: 4px;
  color: #fff;
  position: relative;
  top: -20px;
  left: -50px;
}
div.activity.slidersWithSummary div.screen div.axis h2:after {
  content: '';
  display: block;
  height: 8px;
  width: 0;
  border-left: 2px solid #bbb;
  margin: -40px 10px;
}
div.activity.slidersWithSummary div.screen div.instructional {
  width: 100%;
  margin: 20px 0 -20px;
}
div.activity.slidersWithSummary div.screen input[type=range] {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -webkit-appearance: none;
  margin: 10px 0;
  background: none;
  /*#fff;*/
  height: 45px;
  width: 80%;
  padding: 0px 6px 57px 7px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
div.activity.slidersWithSummary div.screen input[type=range]:focus {
  outline: none;
}
div.activity.slidersWithSummary div.screen input[type=range]::-ms-thumb {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-radius: 50% 0 50% 50%;
  -moz-border-radius: 50% 0 50% 50%;
  -webkit-border-radius: 50% 0 50% 50%;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  background: #2fa7e5;
  height: 23px;
  width: 23px;
  top: -8px;
  border: 5px solid #fff;
  cursor: pointer;
}
div.activity.slidersWithSummary div.screen input[type=range]::-moz-range-thumb {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-radius: 50% 0 50% 50%;
  -moz-border-radius: 50% 0 50% 50%;
  -webkit-border-radius: 50% 0 50% 50%;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  background: #2fa7e5;
  height: 14px;
  width: 14px;
  top: -8px;
  border: 5px solid #fff;
  cursor: pointer;
}
div.activity.slidersWithSummary div.screen input[type=range]::-webkit-slider-thumb {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-radius: 50% 0 50% 50%;
  -moz-border-radius: 50% 0 50% 50%;
  -webkit-border-radius: 50% 0 50% 50%;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45) ;
  background: #2fa7e5;
  height: 23px;
  width: 23px;
  top: -8px;
  border: 5px solid #fff;
  cursor: pointer;
  margin-top: -12px;
  -webkit-appearance: none;
}
div.activity.slidersWithSummary div.screen input[type=range]::-webkit-slider-runnable-track,
div.activity.slidersWithSummary div.screen input[type=range]::-moz-range-track,
div.activity.slidersWithSummary div.screen input[type=range]::-ms-track {
  box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  -moz-box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(187, 187, 187, 0.65) inset;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  width: 100%;
  border: 1px solid #bbb;
  height: 2px;
}
div.activity.slidersWithSummary div.screen input[type=range]::-ms-track {
  cursor: pointer;
  background: transparent;
  /* Hides the slider so custom styles can be added */
  color: transparent;
}
div.activity.slidersWithSummary div.screen input[type=range]::-moz-range-track {
  height: 0px;
}
div.activity.slidersWithSummary div.screen div.scoresTable {
  margin: 20px 0;
}
div.activity.slidersWithSummary div.screen div.scoresTable div.row {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  height: 46px;
  padding: 15px 6px 15px 11px;
}
div.activity.slidersWithSummary div.screen div.scoresTable div.row span.score {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  font-size: 1.3em;
  width: 30px;
  height: 30px;
  padding: 6px;
  color: #fff;
  text-align: center;
  margin: -7px 0px 0px 0px;
  float: left;
  display: inline-block;
}
div.activity.slidersWithSummary div.screen div.scoresTable div.row p {
  width: 93%;
  display: inline-block;
  float: left;
}

div.activity.slidersWithSummary + .accessible h2.selection, div.activity.slidersWithSummary + .accessible div.instructional {
  display: none;
}

div.activity.spiderChart div.spiderScrollArea {
  width: 752px;
  height: 500px;
  overflow: hidden;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow {
  width: 1500px;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderCentre {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: #222;
  /* <--- Use this grey for base (template)... */
  color: #000;
  position: absolute;
  z-index: 10;
  top: 0px;
  width: 175px;
  font-size: 16px;
  cursor: pointer;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderCentre > div {
  width: 100%;
  height: 100%;
  display: table;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderCentre > div > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  line-height: 1.3em;
  font-size: 15px;
  padding: 18px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  cursor: default;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper {
  width: 1300px;
  position: relative;
  left: 100px;
  top: 50px;
  font-size: 1.2em;
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 1em;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRight, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeft, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRightSub, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeftSub {
  float: left;
  position: relative;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeft, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRight {
  position: relative;
  width: 17%;
  z-index: 5;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeft div.branchGroup, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRight div.branchGroup {
  position: relative;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeft div.mainBranch, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRight div.mainBranch {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #444;
  /* <--- Use this grey for base (template)... */
  color: #fff;
  padding: 12px;
  text-align: center;
  line-height: 1.3em;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  margin: 28px 20px;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRightSub, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeftSub {
  width: 33%;
  padding-left: 30px;
  padding-right: 30px;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRightSub div.subBranch, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeftSub div.subBranch {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #252C36;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRightSub div.subBranch div, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeftSub div.subBranch div {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-bottom-right-radius: 5px;
  position: relative;
  background-color: #fff;
  margin: 6px;
  border: 0;
  padding: 8px;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderLeftSub div.subBranch {
  margin-top: 40px;
  left: -180px !important;
  margin-left: 90px;
}
div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper div.spiderRightSub div.subBranch {
  margin-top: 35px;
  top: 115px;
  left: 180px !important;
  margin-right: 90px;
}

div.activity.splashscreen {
  margin-bottom: 0;
  padding: 10px;
}
div.activity.splashscreen div.navigation {
  width: 100%;
  z-index: 2;
  position: relative;
}
div.activity.splashscreen div.navigation div.nav_item {
  margin: 0 1px 0 0;
  display: inline-block;
  float: left;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  text-align: center;
  cursor: pointer;
  width: 175px;
  height: 45px;
  padding: 15px;
}
div.activity.splashscreen div.navigation div.nav_item span {
  width: 100%;
}
div.activity.splashscreen div.navigation div.nav_item.selected,
div.activity.splashscreen div.navigation div.nav_item.selected:hover {
  text-shadow: none;
}
div.activity.splashscreen div.navigation div.nav_item:first-of-type {
  border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -khtml-border-top-left-radius: 5px;
}
div.activity.splashscreen div.navigation div.nav_item:last-of-type {
  margin-right: 0;
  border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -khtml-border-top-right-radius: 5px;
  width: 204px;
}
div.activity.splashscreen div.content {
  box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2) ;
  -webkit-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2) ;
  border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -khtml-border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -khtml-border-bottom-right-radius: 5px;
  position: relative;
  width: 100%;
  background: #fff;
  height: 346px;
  padding: 40px 30px;
  overflow: hidden;
}
div.activity.splashscreen div.content div.authorNav {
  position: absolute;
  z-index: 10;
  left: 11px;
  top: 236px;
}
div.activity.splashscreen div.content div.authorNav button {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  padding: 0;
  background: #ddd;
  border: 0;
  margin: 4px;
  top: 0;
  left: 29px;
}
div.activity.splashscreen div.content div.authorNav button.nxt span {
  margin-left: 3px;
}
div.activity.splashscreen div.content div.authorNav button.bck span {
  margin-right: 3px;
}
div.activity.splashscreen div.content div.authorNav button:disabled,
div.activity.splashscreen div.content div.authorNav button:disabled:hover {
  opacity: 0.3;
}
div.activity.splashscreen div.content div.authorNav button:disabled {
  cursor: default;
  pointer-events: none;
}
div.activity.splashscreen div.content div.authorNav button:disabled:hover {
  background: #ddd;
  border: 0;
  color: #666;
}
div.activity.splashscreen div.content ul {
  float: left;
  margin: 18px 0;
}
div.activity.splashscreen div.content ul li {
  margin-bottom: 10px;
  padding-right: 12px;
  margin-left: 20px;
}
div.activity.splashscreen div.content ul ul {
  margin: 8px 38px;
  float: right;
}
div.activity.splashscreen div.content div.screens {
  width: 100%;
  overflow: visible;
}
div.activity.splashscreen div.content div.screens div.screen {
  width: 100%;
  padding: 26px 0px 0px 26px;
}
div.activity.splashscreen div.content div.screens div.screen div.photonav {
  float: left;
  margin: 20px 30px 0 8px;
}
div.activity.splashscreen div.content div.screens div.screen div.photonav img {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
div.activity.splashscreen div.content div.screens div.screen div.photonav p {
  margin-top: 10px;
  width: 100%;
}
div.activity.splashscreen div.content div.screens div.screen div.bio {
  float: left;
}
div.activity.splashscreen div.content div.screens div.screen div.bio h1 {
  margin-top: 0;
  margin-bottom: 5px;
  padding: 20px 20px 0px;
}
div.activity.splashscreen div.content div.screens div.screen div.bio div.biotext {
  overflow-y: auto;
  width: 556px;
  height: 266px;
  padding: 10px 50px 0px 20px;
}
div.activity.splashscreen div.content div.screens div.screen div.bio div.biotext p {
  width: 100%;
}
div.activity.splashscreen div.content#content0 {
  text-align: left;
  padding: 92px 40px 100px 178px;
}
div.activity.splashscreen div.content#content0 span {
  display: block;
  font-size: 32px;
  letter-spacing: -1px;
  background: none;
  padding: 6px;
}
div.activity.splashscreen div.content#content0 span.subhead {
  font-size: 25px;
}
div.activity.splashscreen div.content#content0 a.website_link {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  position: absolute;
  right: 25px;
  color: #fff;
  font-size: 12px;
  bottom: 31px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
div.activity.splashscreen div.content#content0 a.website_link:hover {
  text-decoration: underline;
}
div.activity.splashscreen div.content#content1 {
  padding: 0;
}
div.activity.splashscreen div.content#content2 {
  padding: 40px 30px;
}
div.activity.splashscreen div.content#content4 ul {
  width: 50%;
  margin-top: 20px;
}

div.activity.tabbing {
  overflow: hidden;
}
div.activity.tabbing div.tabs div.tab {
  cursor: pointer;
}
div.activity.tabbing div.tabs div.tab img {
  width: 100%;
  height: 200px;
  float: left;
}
div.activity.tabbing div.tabs div.tab div.speechWrapper {
  opacity: 0;
}
div.activity.tabbing div.tabs div.tab div.speechWrapper div.speechTail {
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 30px solid #FFFFFF;
  left: 14px;
  position: relative;
  top: -2px;
  transform: rotate(12deg);
}
div.activity.tabbing div.tabs div.tab.active {
  background: #fff;
}
div.activity.tabbing div.tabs div.tab.active .speechWrapper {
  opacity: 1;
}
div.activity.tabbing div.tabs.heads .tab {
  float: left;
}
div.activity.tabbing div.tabs.heads .tab.active {
  background: transparent;
}
div.activity.tabbing div.tabs.heads .tab.active:after {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  box-shadow: 0 0 0 3px #fff inset;
  -moz-box-shadow: 0 0 0 3px #fff inset;
  -webkit-box-shadow: 0 0 0 3px #fff inset;
  content: "";
  display: block;
  height: 200px;
  position: relative;
  width: 100%;
  border: 0px solid rgba(255, 255, 255, 0);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.activity.tabbing div.tabContent {
  background: #fff;
  float: left;
  overflow: auto;
  width: 100%;
  border: 1px solid #ccc;
  border-top: 0;
  padding: 22px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
div.activity.tabbing div.tabContent p, div.activity.tabbing div.tabContent h2, div.activity.tabbing div.tabContent h3, div.activity.tabbing div.tabContent textarea {
  width: 100%;
  max-width: none;
}
div.activity.tabbing div.tabContent h2, div.activity.tabbing div.tabContent h3 {
  margin-top: 0;
}
div.activity.tabbing div.tabContent ul {
  width: auto;
}
div.activity.tabbing div.tabContent ul li {
  margin-bottom: 8px;
}
div.activity.tabbing div.tabContent textarea {
  height: 100px;
}
div.activity.tabbing div.tabContent div.block {
  width: 100%;
  margin: 0 0 18px 0;
}
div.activity.tabbing div.tabContent div.block:last-of-type {
  margin-bottom: 0;
}
div.activity.tabbing .tabContent.bubble {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin-left: 12px;
  margin-top: 12px;
  margin-bottom: -8px;
  width: 516px;
  border: 0;
}

div.activity.tabbing.left div.tabs div.tab, div.activity.tabbing.top div.tabs div.tab {
  background: rgba(255, 255, 255, 0.5);
  padding: 12px;
  float: left;
}
div.activity.tabbing.left div.tabs div.tab.active, div.activity.tabbing.top div.tabs div.tab.active {
  background: #fff;
}

div.activity.tabbing.left {
  border-top: 1px solid;
}
div.activity.tabbing.left.widertabs div.tabContent {
  width: 55%;
}
div.activity.tabbing.left.widertabs div.tabs {
  width: 45%;
}
div.activity.tabbing.left div.tabs {
  float: left;
  width: 30%;
}
div.activity.tabbing.left div.tabs div.tab {
  width: 100%;
  margin-bottom: 1px;
  margin-left: 1px;
  padding: 16px 12px;
}
div.activity.tabbing.left div.tabs div.tab.active {
  background: #fff;
  position: relative;
  z-index: 5;
}
div.activity.tabbing.left div.tabContent {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) ;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) ;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) ;
  width: 70%;
  float: right;
  border-left: 0;
  position: relative;
  z-index: 4;
}
div.activity.tabbing.left div.progressBar, div.activity.tabbing.left div.nav {
  position: relative;
  z-index: 6;
}
div.activity.tabbing.left div.screen.fullwidth div.tabContent {
  width: 100% !important;
  border-left: 1px solid #ccc !important;
}

div.activity.tabbing.top div.tabs {
  width: 100%;
}
div.activity.tabbing.top div.tabs div.tab {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 12px -4px 0 12px;
}

div.tabbing.wide .tabContent.bubble {
  width: 728px;
}

.calculator input {
  width: 50px;
  border: none;
}

.classificationFeedback .feedbackWrapper {
  min-height: 70px;
  position: relative;
}
.classificationFeedback .feedbackWrapper .hidden {
  display: none;
}
.classificationFeedback .items.disabled {
  opacity: .1;
  pointer-events: none;
  cursor: default;
}

.accordion {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.accordion .accordion_in {
  position: relative;
  z-index: 10;
  margin-top: -1px;
  overflow: hidden;
}

.accordion .accordion_in .acc_head {
  position: relative;
  padding: 10px;
  font-size: 14px;
  display: block;
  cursor: pointer;
}

.accordion .accordion_in .acc_head .acc_icon_expand {
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -9px;
  background: url(../images/plusminus.png) center 0;
}

.accordion .accordion_in.acc_active > .acc_head .acc_icon_expand {
  background: url(../images/plusminus.png) center -18px;
}

.accordion .accordion_in .acc_content {
  padding: 3px 10px;
}

.accordion.acc_with_icon .accordion_in .acc_head,
.accordion.acc_with_icon .accordion_in .acc_content {
  padding-left: 40px;
}

/***********************************************************

    GLOBAL BASE STYLES

***********************************************************/
body {
  background: #d8d8d8;
  color: #252C36;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  width: 100%;
  max-width: 800px;
}

button {
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  border: none;
  margin: 0;
}

ul, ol {
  line-height: 1.3em;
  margin: 0 15px 10px 15px;
}
ul li, ol li {
  margin-bottom: 2px;
}
ul ul.subBullets, ol ul.subBullets {
  margin: 10px 25px;
}

ol {
  margin: 0 15px 10px 22px;
  list-style-type: decimal;
}

ul {
  list-style: disc;
}

p {
  line-height: 1.3em;
  margin: 0 0 10px 0px;
  width: 540px;
}

/***********************************************************

    MAIN BODY WRAPPER AND CONTENT WRAPPER

***********************************************************/
div.bodyWrapper {
  padding: 0;
  background: #222222;
}

div.contentWrapper, div.podWrapperContent {
  position: relative;
}
div.contentWrapper > p, div.podWrapperContent > p {
  padding-left: 5px;
}
div.contentWrapper > h1, div.contentWrapper > h2, div.contentWrapper > h3, div.podWrapperContent > h1, div.podWrapperContent > h2, div.podWrapperContent > h3 {
  padding-left: 5px;
  margin-top: 20px;
}
div.contentWrapper > img, div.podWrapperContent > img {
  margin-bottom: 20px;
  max-width: 540px;
}

div.podWrapperContent div.block {
  margin-top: 0px;
}

div.podWrapperPods div.iconWrapper {
  position: relative;
  margin: -10px 0 16px 10px;
}

div.contentWrapper {
  padding: 24px;
  border-left: 1px solid #ddd;
}
div.contentWrapper > h1 {
  margin-top: 0;
}

/***********************************************************

    OTHER PAGE CONTENT STYLES

***********************************************************/
p.pageReference {
  font-size: 0.85em;
  text-align: right;
}

span.glossaryLink, span.referenceLink {
  cursor: pointer;
  padding: 1px 3px;
}

.centerText {
  text-align: center;
}

.halfWidth {
  width: 50%;
}

/***********************************************************

   CLEAR FIX

***********************************************************/
.clearfix, div.topBanner div.copyright:after, div.pageFooter div.copyright:after, div.titleMenuWrapper:after, div.iconWrapper div.icon:after, div.podWrapper div.podWrapperPods div.pod div.podTitle:after, div.podWrapper:after, div.pod.accessible div.podTitle:after, div.activity.actionMaze div.screen div.item:after, div.activity.classification .columnBodies:after, div.activity.dragDrop + .accessible div.column:after, div.activity.matching div.pair:after, div.activity.matching + .accessible div.column:after, .activity.mediaPlayer div.tracklist div.item:after, div.activity.reflection div.screen div.tabs:after, div.activity.reflectionMod div.screen div.tabs:after, div.activity.seesaw div.scales:after, div.activity.seesaw div.itemSummary div.row:after, div.activity.spiderChart div.spiderScrollArea div.spiderWindow div.spiderWrapper:after, div.activity.splashscreen div.navigation:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
}

/***********************************************************

   ALERTS

***********************************************************/
.alert {
  background: #f00;
  color: #fff !important;
  font-weight: bold;
}

.alert-us {
  background: #f00;
  border: 2px solid #ff0;
  color: #fff;
  font-weight: bold;
}

h1.alert {
  font-size: 72px;
}

.amberalert {
  color: orange;
}

.greenalert {
  color: green;
}

/***********************************************************

    IMPORT ADDITIONAL STYLESHEETS ON TOP OF THIS ONE

***********************************************************/
/***********************************************************

    THIS BLOCK OF CSS POSITIONS THE PRINT/HELP BUTTON
    TEXT VERTICALLY. ONCE FIXED, PLACE IN BASE.SCSS

***********************************************************/
/***********************************************************

    THIS BLOCK OF CSS GENERATES AN ARROW BESIDE THE POD
    OR ICON WHICH POINTS TO THE RELEVANT CORE CONTENT 
    SECTION

***********************************************************/
div.podWrapper div.podWrapperContent div.icon:before {
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  top: 33px;
  left: 47px;
}
div.podWrapper div.podWrapperPods div.iconWrapper {
  position: relative;
  margin: 10px 10px 10px 2px;
}
div.podWrapper div.podWrapperPods div.pod:before, div.podWrapper div.podWrapperPods div.icon:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px;
  top: 27px;
  left: 57px;
}
div.podWrapper div.podWrapperPods div.pod:before {
  top: 9px;
  left: -8px;
  margin-left: -5px;
}

/*# sourceMappingURL=base.css.map */