/*********
GLOBAL
*********/

/* Reset */

/* *,
*:before,
*:after {
  margin: 0;
  padding: 0;
}
*:focus {
  outline: none;
} */
html,
body {
  background: #3e4957;
  color: #fff;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /*font-size: 17px;
  font-weight: 300;*/
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
ul,
ol,
li {
  list-style: none;
}
a img {
  border: 0;
}
img,
iframe {
  display: block;
}

/* Columns */

.negMargins10 {
  margin: 0 -10px;
}
.negMargins20 {
  margin: 0 -20px;
}
.col {
  float: left;
}
.col.floatRight {
  float: right;
}
.col-1-12 {
  width: 8.333%;
}
.col-2-12 {
  width: 16.666%;
}
.col-3-12 {
  width: 25%;
}
.col-4-12 {
  width: 33.333%;
}
.col-5-12 {
  width: 41.666%;
}
.col-6-12 {
  width: 50%;
}
.col-7-12 {
  width: 58.333%;
}
.col-8-12 {
  width: 66.666%;
}
.col-9-12 {
  width: 75%;
}
.col-10-12 {
  width: 83.333%;
}
.col-11-12 {
  width: 91.666%;
}
.col20 {
  width: 20%;
}
.col80 {
  width: 80%;
}
.colBorder {
  position: relative;
}
.colBorder:before {
  border-left: 1px solid #fff;
  bottom: 0;
  content: '';
  left: 50%;
  position: absolute;
  top: 0;
}
.colBorderGrey:before {
  border-color: #3e4957;
}

/* Margins */

.autoMargin {
  margin-left: auto;
  margin-right: auto;
}
.lMargin10 {
  margin-left: 10px;
}
.rMargin10 {
  margin-right: 10px;
}
.tMargin10 {
  margin-top: 10px;
}
.bMargin10 {
  margin-bottom: 10px;
}
.lMargin15 {
  margin-left: 15px;
}
.rMargin15 {
  margin-right: 15px;
}
.tMargin15 {
  margin-top: 15px;
}
.bMargin15 {
  margin-bottom: 15px;
}
.lMargin20 {
  margin-left: 20px;
}
.rMargin20 {
  margin-right: 20px;
}
.tMargin20 {
  margin-top: 20px;
}
.bMargin20 {
  margin-bottom: 20px;
}
.lMargin30 {
  margin-left: 30px;
}
.rMargin30 {
  margin-right: 30px;
}
.tMargin30 {
  margin-top: 30px;
}
.bMargin30 {
  margin-bottom: 30px;
}
.lMargin40 {
  margin-left: 40px;
}
.rMargin40 {
  margin-right: 40px;
}
.tMargin40 {
  margin-top: 40px;
}
.bMargin40 {
  margin-bottom: 40px;
}
.bMargin60 {
  margin-bottom: 60px;
}

/* Padding */

.lPad10 {
  padding-left: 10px;
}
.rPad10 {
  padding-right: 10px;
}
.tPad10 {
  padding-top: 10px;
}
.bPad10 {
  padding-bottom: 10px;
}
.pad10 {
  padding: 10px;
}
.lPad15 {
  padding-left: 15px;
}
.rPad15 {
  padding-right: 15px;
}
.tPad15 {
  padding-top: 15px;
}
.bPad15 {
  padding-bottom: 15px;
}
.pad15 {
  padding: 15px;
}
.lPad20 {
  padding-left: 20px;
}
.rPad20 {
  padding-right: 20px;
}
.tPad20 {
  padding-top: 20px;
}
.bPad20 {
  padding-bottom: 20px;
}
.pad20 {
  padding: 20px;
}
.lPad30 {
  padding-left: 30px;
}
.rPad30 {
  padding-right: 30px;
}
.tPad30 {
  padding-top: 30px;
}
.bPad30 {
  padding-bottom: 30px;
}
.pad30 {
  padding: 30px;
}
.lPad40 {
  padding-left: 40px;
}
.rPad40 {
  padding-right: 40px;
}
.tPad40 {
  padding-top: 40px;
}
.bPad40 {
  padding-bottom: 40px;
}
.pad40 {
  padding: 40px;
}
.tPad60 {
  padding-top: 60px;
}
.bPad60 {
  padding-bottom: 60px;
}
.lPad80 {
  padding-left: 80px;
}

/* Colours */

.green {
  color: #8ad0c2;
}
.orange {
  color: #fbba90;
}
.greyDark {
  color: #3e4957;
}
.white {
  color: #fff;
}
.greenBG {
  background-color: #8ad0c2;
}
.whiteBG {
  background: #fff;
}
.greyBG {
  background-color: #55606f;
}
.greyDarkBG {
  background-color: #3e4957;
}
.white90BG {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2em;
}
h2.sectionTitle {
  font-size: 30px;
  font-weight: 700;
  padding: 0 0 0.6em;
}
h2.sectionTitle.bBorderGrey {
  border-bottom: 1px solid #3e4957;
  margin: 0 0 0.6em;
}
h3.boxTitle {
  border-radius: 8px;
  font-size: 24px;
  font-weight: 500;
}
p {
  line-height: 1.3em;
  padding: 0 0 1em;
}
.cmsContent h3 {
  font-size: 21px;
  font-weight: 700;
  padding: 0 0 0.6em;
}
.cmsContent ul {
  list-style: disc;
  padding: 0 0 1em 1.4em;
}
.cmsContent ul li {
  line-height: 1.3em;
  list-style: disc;
}
.cmsContent ol {
  list-style: decimal;
  padding: 0 0 1em 1.8em;
}
.cmsContent ol li {
  line-height: 1.3em;
  list-style: decimal;
}
.cmsContent .note {
  font-size: 14px;
}
.uppercase {
  text-transform: uppercase;
}
.rightText,
table.coastTable th.rightText {
  text-align: right;
}
.centreText,
table.coastTable th.centreText {
  text-align: center;
}
.largeText {
  font-size: 23px;
}
.smallText {
  font-size: 12px;
}
.coastTable .coastTable__date {
  white-space: nowrap;
}

/* Images/Iframes */

img.widthControl {
  height: auto;
  width: 100%;
}
.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-top: 1em;
  margin-bottom: 1em;
}
.videoWrapper.r16x9 {
  padding-bottom: 56.25%;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bgCover {
  overflow: hidden;
  position: relative;
}
.bgCover img.bgImage {
  left: 0;
  position: absolute;
  top: 0;
}

/* Forms */

.coastForm label {
  display: block;
  font-weight: 500;
  margin: 0 0 5px;
}
.coastForm table.addressTable label {
  line-height: 40px;
  margin: 0;
}
.coastForm label.checkbox {
  display: inline-block;
  line-height: 24px;
  margin: 0 10px 0 0;
}
.coastForm label.checkbox .systemIcon {
  margin-left: 5px;
}

/* input.text,
select,
textarea {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  padding: 7px;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
input.text,
textarea {
  -webkit-appearance: none;
}
input.text,
select {
  height: 40px;
}
textarea {
  height: 112px;
  resize: none;
}
label.error {
  left: -9999em;
  position: absolute;
  visibility: hidden;
} */

/* Tables */

table.coastTable,
table.addressTable {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 16px;
  width: 100%;
}
table.coastTable.small {
  font-size: 12px;
}
table.coastTable.small th {
  font-size: 14px;
}
table.coastTable th {
  font-size: 18px;
  text-align: left;
  white-space: nowrap;
}
table.coastTable th:last-child,
table.coastTable td:last-child {
  padding-right: 0;
}
table.coastTable th,
table.coastTable td {
  font-weight: 500;
  line-height: 24px;
  padding: 10px 10px 10px 0;
}

table.coastTable td {
  border-bottom: 1px solid #55606f;
}

table.coastTable th {
  border-bottom: 1px solid #fff;
}

table.coastTable td.innerTable {
  border-bottom: 0;
}
td.innerTable table.coastTable th,
td.innerTable table.coastTable td {
  border-bottom: 0;
}
.greyBG table.coastTable th,
.greyBG table.coastTable td {
  border-color: #3e4957;
}
table.addressTable td {
  border-bottom: 0;
  line-height: 40px;
  padding-bottom: 5px;
  padding-top: 0;
}
table.addressTable td.addressLabel {
  white-space: nowrap;
  width: 20%;
}
span.sortable {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
}
.tablesorter-headerAsc span.sortable:after,
.tablesorter-headerDesc span.sortable:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: '';
  display: block;
}
.tablesorter-headerAsc span.sortable:after {
  border-bottom: 6px solid #fff;
}
.tablesorter-headerDesc span.sortable:after {
  border-top: 6px solid #fff;
}

/* Links/Buttons/Icons */

a {
  color: #fff;
  text-decoration: none;
  .dark-link {
    color: #3e4957;
  }
}
a:hover,
a.active,
.greyDark a:hover {
  color: #8ad0c2;
}

a.active:hover {
  cursor: default;
}
.greyDark a {
  color: #3e4957;
}
.underlineLinks a {
  text-decoration: underline;
}
input.button,
button.button {
  border: none;
  cursor: pointer;
}
a.button,
input.button,
button.button {
  background: #55606f;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  height: 34px;
  line-height: 34px;
  text-align: center;
  width: 155px;
}
.button.big {
  border-radius: 8px;
  font-size: 18px;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  width: auto;
}
a.button.green,
button.button,
input.button.green,
a.button:hover {
  background: #8ad0c2;
  color: #3e4957;
}
a.button.green:hover,
input.button.green:hover,
button.button:hover,
.button.delete:hover {
  background: #fff;
}
a.button.disabled,
.button[disabled] {
  cursor: default;
  opacity: 0.3;
}
.button.delete {
  background: #f05632;
}
.button.delete:hover {
  color: #f05632;
}
.deleteIcon {
  background: #f05632;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  height: 24px;
  line-height: 24px;
  text-align: center;
  vertical-align: top;
  width: 24px;
}
.systemIcon {
  background: url(/images/system-icons.png) no-repeat;
  display: inline-block;
  height: 24px;
  text-indent: -9999em;
  vertical-align: top;
  width: 24px;
}
.alertIcon {
  background-position: 0 -24px;
}
.tickIcon {
  background-position: 0 -48px;
}
.editIcon {
  background-position: 0 -72px;
}
.checkboxIcon {
  background-position: 0 -96px;
}
.menuIcon {
  background-position: 0 -120px;
}

/* Main */

#container {
  margin: auto;
  max-width: 1600px;
  min-width: 768px;
}
.wrapper,
.wrapperNarrow {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
.wrapper {
  max-width: 1030px;
}
.wrapperNarrow {
  max-width: 920px;
}
#main {
  padding-bottom: 80px;
}

/* Header */

header {
  font-size: 14px;
  height: 80px;
  position: relative;
  z-index: 20;
  /* margin-bottom: 7px; */
}
#logo {
  background: url(/images/logo.png) no-repeat;
  height: 50px;
  left: 15px;
  position: absolute;
  text-indent: -9999em;
  top: 15px;
  width: 141px;
}
#logo a {
  display: block;
  height: 100%;
  width: 100%;
}
#logoHome {
  left: 15px;
  position: absolute;
  text-indent: -9999em;
  top: 25px;
}
#logoHome a {
  background: url(/images/logo-home.png) no-repeat;
  display: block;
  height: 89px;
  width: 250px;
}
nav {
  font-size: 0;
  font-weight: 700;
  padding: 17px 0;
}
nav li {
  border-right: 1px solid #fff;
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}
nav li.submenu {
  position: relative;
}
nav li:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
nav li.active a,
nav li.active span,
nav li.submenu:hover span {
  color: #8ad0c2;
}
nav li:hover a,
nav li.submenu:hover span {
  color: hsl(167, 22%, 67%);
}

nav li.submenu:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
nav li.submenu:hover:after,
nav li.submenu.active:after {
  border-top-color: #8ad0c2;
}
nav li.submenu span {
  cursor: default;
}
nav li.submenu ul {
  border-top: 5px solid #55606f;
  display: none;
  left: 0;
  position: absolute;
  text-align: left;
  top: 16px;
  width: 170px;
  z-index: 5;
}
nav li.submenu:hover ul {
  display: block;
}
nav li.submenu li {
  border-right: 0;
  display: block;
  line-height: 40px;
  margin: 0;
  padding: 0;
}
nav li.submenu li a {
  border-bottom: 1px solid #fff;
  color: #fff !important;
  display: block;
}
nav li.submenu li a:hover,
nav li.submenu li.active a {
  color: #8ad0c2 !important;
}
#headerRight {
  font-size: 0;
  line-height: 50px;
  position: absolute;
  right: 25px;
  top: 15px;
}
#headerRight.loggedIn {
  line-height: 25px;
}
#headerRight a,
#headerRight span {
  font-size: 14px;
}
#loggedInNote {
  display: block;
}
#headerRight a {
  font-weight: 700;
}
#headerRight .separator {
  padding: 0 10px;
}

/* Footer */

footer h4 {
  font-weight: 700;
  padding: 0 0 1em;
}
a.contactLink {
  display: inline-block;
  line-height: 24px;
  padding: 0 0 0 37px;
  position: relative;
}
a.contactLink span {
  background: #8ad0c2;
  border-radius: 50%;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  width: 24px;
}
a.contactLink span:before {
  background: url(/images/contact-icons.png) no-repeat;
  content: '';
  height: 14px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 14px;
}
a#emailLink span:before {
  background-position: 0 -14px;
}

/* Banner Content */

#bannerImage {
  height: 300px;
  overflow: hidden;
  position: relative;
}
#bannerImage img {
  left: 50%;
  margin-left: -800px;
  position: absolute;
  top: 0;
}
.overlayBox {
  border-radius: 8px;
}
.versionBox {
  float: right;
  white-space: nowrap;
}
.versionBox.homepageVersion {
  margin-top: -25px;
}
.versionBox p {
  line-height: 15px;
  padding: 0;
}

/* Accordions */

h3.accordionTitle {
  cursor: pointer;
  position: relative;
  padding-right: 64px;
}
h3.accordionTitle:after {
  border-bottom: 14px solid transparent;
  border-left: 14px solid #8ad0c2;
  border-top: 14px solid transparent;
  content: '';
  margin-top: -14px;
  position: absolute;
  right: 40px;
  top: 50%;
}
h3.accordionTitle.open:after {
  border-bottom: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #fbba90;
  margin-top: -7px;
  right: 33px;
}

/* Tabs */

.tabButtons {
  font-size: 0;
}
.tabButtons a {
  background: #55606f;
  color: #fff;
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  height: 100px;
  line-height: 1.2em;
  margin: 0 0.5%;
  padding: 20px;
  vertical-align: top;
  width: 32.333%;
}
.tabButtons a.active {
  background: #fff;
  color: #3e4957;
}

/* Misc. */

.bBorder {
  border-bottom: 1px solid #fff;
}
.hidden {
  display: none;
}
.onTop {
  position: relative;
  z-index: 5;
}
.vCentreParent:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.vCentre {
  display: inline-block;
  vertical-align: middle;
}
.clearFix:after {
  clear: both;
  content: '';
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
}

/*********
PAGES
*********/

/* Homepage */

#homeWelcomeText {
  float: right;
}

/* Login */

.registerTip {
  display: inline-block;
  line-height: 34px;
}

/* Learning */
#gadLogo {
  background: url(/images/logo-gad.png) no-repeat;
  /* height: 151px;
  width: 262px; */
  height: 121px;
  width: 100%;
  background-position: center;
}

#campsLogo {
  background: url(/images/logo-camps.png) no-repeat;
  height: 77px;
  width: 267px;
}
#ocsLogo {
  background: url(/images/logo-ocs.png) no-repeat;
  height: 77px;
  width: 241px;
}
.videoWrapper.border {
  border-top: 1px solid #3e4957;
}
h3.videoTitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  min-height: 62px;
  padding: 10px 0 0;
}
.videoTitleWrapper {
  font-size: 14px;
  min-height: 62px;
  padding: 10px 0 0;
}
.videoTitleWrapper h3.videoTitle {
  min-height: 0;
  padding-top: 0;
}
.videoTitleWrapper p {
  padding: 0;
}
.grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.grid-center {
  margin: auto;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.grid-between {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.grid-end {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.grid-cell {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.video-title-wrapper {
  font-size: 14px;
  min-height: 62px;
  padding: 10px 0 0;
}
.video-title-wrapper .video-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  padding: 0;
}
.audio-play {
  line-height: 30px;
  margin-left: 1em;
}
.audio-play > div {
  display: inline-block;
}

/*********
RETINA
*********/

@media (min-resolution: 144dpi),
  (-webkit-min-device-pixel-ratio: 1.5),
  (min--moz-device-pixel-ratio: 1.5),
  (-o-min-device-pixel-ratio: 1.5/1),
  (min-device-pixel-ratio: 1.5),
  (min-resolution: 1.5dppx) {
  #logo {
    background-image: url(/images/logo-x2.png);
    background-size: contain;
  }
  #logoHome a {
    background-image: url(/images/logo-home-x2.png);
    background-size: contain;
  }
  .systemIcon {
    background-image: url(/images/system-icons-x2.png);
    background-size: 24px auto;
  }
  a.contactLink span:before {
    background-image: url(/images/contact-icons-x2.png);
    background-size: 14px auto;
  }
  #campsLogo {
    background: url(/images/logo-camps-x2.png);
    background-size: 267px auto;
  }
  #ocsLogo {
    background-image: url(/images/logo-ocs-x2.png);
    background-size: 241px auto;
  }
}
.learning-audio {
  width: 250px;
}

/*********
RESPONSIVENESS
*********/

@media screen and (max-width: 999px) {
  nav.centreText {
    padding: 0 15px 0 0;
    text-align: right;
  }
  #headerRight {
    font-size: 0;
    line-height: 25px;
    position: absolute;
    right: 15px;
    top: 40px;
  }
  #loggedInNote,
  #headerRight .separator.mobile {
    display: inline;
  }
}
.downloadWrapper {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 24px;
}
.downloadBox {
  background: #fff;
  padding: 10px 10px 6px;
  position: absolute;
  right: -15px;
  text-align: left;
  top: 36px;
  white-space: nowrap;
  z-index: 5;
}
.downloadBox:before {
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: '';
  position: absolute;
  right: 17px;
  top: -10px;
}
.downloadBox a.systemIcon {
  color: #3e4957;
  display: block;
  line-height: 24px;
  margin: 0 0 4px;
  padding: 0 0 0 34px;
  text-indent: 0;
  width: auto;
}
.version-upload {
  position: relative;
  padding: 0 1em 1em;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 1em;
}
.version-upload .dd-allowed {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 14px;
  font-style: italic;
  color: #ccc;
}
.version-upload h3 {
  padding: 0;
}
.version-upload button + button {
  margin-left: 10px;
}
.version-upload .drop-zone {
  max-width: 10em;
  border: 2px dashed #bbb;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  font: 20pt bold 'Vollkorn';
  color: #bbb;
}
.version-upload ul {
  margin: 1em 0;
  padding: 0 0 0 40px;
}
input[type='file'] {
  display: none;
}
.version-upload .button.primary {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #60b044;
  background-image: -webkit-linear-gradient(#8add6d, #60b044);
  background-image: linear-gradient(#8add6d, #60b044);
  background-repeat: repeat-x;
  border-color: #5ca941;
}
.version-upload .button.cancel {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f0ad4e;
  background-image: -webkit-linear-gradient(#f0ad4e, #eb9316);
  background-image: linear-gradient(#f0ad4e, #eb9316);
  background-repeat: repeat-x;
  border-color: #e38d13;
}
.version-upload .button:hover,
.version-upload .button:active {
  text-decoration: none;
  /*background-color: #ddd;
        background-image: -webkit-linear-gradient(#eee, #ddd);
        background-image: linear-gradient(#eee, #ddd);*/
}

.sessions-dataformat {
  margin-top: -40px;
  margin-bottom: 1em;
}