/*------------------------------------*$VARIABLES
\*------------------------------------*/
/* reset */
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, font, 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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

:focus {
  outline: 0; }

ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

/* utils */
.left {
  float: left; }

.right {
  float: right; }

.clear {
  clear: both;
  visibility: hidden; }

/* global */
body {
  background: #2F3468;
  font-family: arial, helvetica, sans-serif;
  font-size: 14px;
  text-align: center;
  overflow-y: scroll; }

p, h1, h2, h3, table {
  margin-bottom: 1em; }

#tc4u {
  background: #f6f6f6; }

.container {
  width: 960px;
  margin: 0 auto;
  text-align: left; }

a {
  text-decoration: none;
  font-weight: bold;
  color: #2F3468; }

a:hover {
  text-decoration: underline; }

#head {
  line-height: 48px; }

#head .left {
  margin-bottom: 14px; }

#head .right {
  font-size: 11px; }

#header #logo span {
  font-weight: bold;
  color: #C21D25;
  text-shadow: 0 1px 0 #fff;
  position: relative;
  top: 2px; }

#header #logo img {
  float: left;
  margin-right: 10px;
  position: relative;
  top: 5px;
  height: 35px; }

#header #nav {
  clear: both;
  padding-left: 1px; }

#header #nav ul.left li {
  display: inline;
  float: left;
  line-height: 1; }

#header #nav ul.left li span a {
  padding: 8.75px 14px;
  font-size: 16px;
  font-weight: normal;
  color: #5A5A5A;
  background: #dedede;
  border-radius: 4px;
  margin-right: 12px;
  text-align: center; }

#header #nav ul.left li a,
#header #nav ul.left li span {
  display: block; }

#header #nav ul.left li span:hover {
  text-decoration: none; }

#header #nav ul.left li span:hover a {
  text-decoration: none;
  background: #CCCCCC; }

#header #nav ul.left li span.active,
#header #nav ul.left li span.active:hover {
  cursor: default; }

#header #nav ul.left li span.active a,
#header #nav ul.left li span.active:hover a {
  color: #FFF;
  text-decoration: none;
  background: #2F3468;
  position: relative; }

#header #nav ul.left li span.active a:before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #2F3468;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent; }

#header #nav #courses {
  width: 390px;
  white-space: nowrap; }

#header #nav #courses #current-course {
  background: transparent url(img/bg_dropdown_left.gif) no-repeat left top;
  height: 44px;
  text-shadow: #bbb 1px 1px 2px;
  cursor: default; }

#header #nav #courses #current-course .course-title {
  margin: 9px 0 0 10px; }

#header #nav #courses #current-course .line2 {
  margin: 2px 0 0 10px; }

#header #nav #courses #current-course .progress-bar {
  margin-top: 10px; }

#header #nav #courses #courses-menu {
  position: absolute;
  z-index: 1000;
  width: 344px;
  background: transparent url(img/bg_dropdown.png) no-repeat left bottom;
  padding: 0 1px 1px 1px;
  max-height: 500px;
  overflow-y: auto; }

#header #nav #courses #courses-menu ul li {
  border-top: 1px solid #999; }

#header #nav #courses #courses-menu ul li a {
  display: block;
  font-weight: normal;
  color: #333;
  padding: 10px; }

#header #nav #courses #courses-menu ul li a:hover,
#header #nav #courses #courses-menu ul li a.active {
  background: #cdcdcd url(img/bg_dropdown_h.gif) repeat-x left top;
  color: #2F3468;
  text-decoration: none;
  text-shadow: #bbb 1px 1px 1px; }

#courses span {
  display: block; }

#courses .course-title {
  font-size: 14px; }

#courses .line2 {
  margin-top: 2px;
  font-size: 12px;
  color: #666; }

#courses .progress-bar {
  background: #fff url(img/bg_progressbar_120.gif) repeat-x left 1px;
  width: 118px;
  border: 1px solid #ccc;
  padding: 1px;
  text-align: left;
  line-height: 23px; }

#courses .progress-bar .progress {
  background: transparent url(img/bg_progress.gif) repeat-x left top; }

#courses .progress-bar .progress-text {
  position: absolute;
  width: 120px;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
  text-align: center;
  font-size: 12px; }

#cur-course {
  float: left;
  width: 335px; }

#drop-btn {
  float: right;
  background: transparent url(img/bg_dropdown_btn.png) no-repeat left top;
  width: 45px;
  height: 44px; }

#drop-btn:hover {
  background-position: left -100px;
  cursor: pointer; }

.drop-active {
  background-position: right top !important; }

.drop-active:hover {
  background-position: right -100px !important; }

#header #nav #search {
  background: transparent url(img/bg_dropdown_left.gif) no-repeat left top;
  width: 221px;
  height: 44px; }

#header #nav #search input {
  float: left; }

#header #nav #search input#terms {
  background: transparent url(img/bg_search.gif) no-repeat left top;
  border: none;
  width: 165px;
  margin: 10px 0 0 11px;
  padding: 7px 0 7px 8px;
  font: normal 12px arial;
  color: #999; }

#header #nav #search input#terms:hover,
#header #nav #search input#terms:focus {
  color: #333; }

#header #nav #search input#submit {
  background: transparent url(img/bg_search_submit.gif) no-repeat left top;
  border: none;
  padding: 0;
  width: 27px;
  height: 27px;
  margin-top: 10px;
  cursor: pointer; }

#header #nav #search input#submit:hover,
#header #nav #search input#submit:focus,
#header #nav #search input#submit:active {
  background-position: left -100px; }

/**
CONTENT/CONTAINER/PAGE STYLES
These seem to define overall layout
@note: .page also has inline styles set (padding: 10px 20px)
*/
#content {
  padding: 20px 0; }

#content #tabrow {
  background: transparent url(img/bg_tabrow.gif) no-repeat left top;
  height: 42px; }

.no-main-nav {
  margin-top: 20px; }

.no-tabs {
  margin-top: -30px; }

#content #tabrow ul li {
  display: inline;
  float: left; }

#content #tabrow ul li span {
  display: block;
  background: transparent url(img/bg_tab.gif) no-repeat left 100px;
  padding-left: 10px; }

#content #tabrow ul li span a {
  display: block;
  background: transparent url(img/bg_tab.gif) no-repeat right 100px;
  padding-right: 10px;
  font-weight: normal;
  line-height: 32px;
  color: #000; }

#content #tabrow ul li span.active,
#content #tabrow ul li span.first-active {
  background-position: left top;
  text-decoration: none;
  cursor: default;
  text-shadow: #bbb 1px 1px 2px; }

#content #tabrow ul li span.active a,
#content #tabrow ul li span.first-active a {
  color: #2F3468;
  background-position: right top; }

#content #tabrow ul li span.first-active {
  padding-bottom: 10px; }

#content .page {
  position: relative;
  background: transparent url(img/bg_page.gif) repeat-y left top;
  padding: 0 10px 10px 10px; }

#content .page h2 {
  padding: 10px; }

.page .col-720 {
  width: 720px; }

.col-720 #videoPlayer {
  width: 720px;
  height: 405px;
  background-color: #000;
  background-image: url(img/ajax-loader.gif);
  background-position: 350px 180px;
  background-repeat: no-repeat; }

.col-720 #video-info {
  margin-top: 10px;
  line-height: 18px; }

.page .col-220 {
  width: 220px; }

.col-220 ul {
  height: 405px;
  overflow-y: scroll; }

.col-220 ul li {
  margin-bottom: 10px; }

.col-220 ul li a {
  display: block;
  width: 194px;
  height: 107px;
  background: transparent url(img/bg_thumb.gif) no-repeat left top; }

.col-220 ul li a:hover {
  background-position: left -120px;
  text-decoration: none; }

.col-220 ul li a.active {
  background-position: left -240px; }

.col-220 ul li a span span {
  background: transparent url(img/pixel_dark.png) repeat left top;
  font: normal 10px arial;
  color: #fff;
  padding: 2px 4px;
  position: absolute !important; }

.col-220 ul li a span.thumb-img {
  display: block;
  height: 107px;
  /*background: transparent url(img/nothumb.gif) no-repeat 15px 5px;*/
  position: relative; }

.col-220 ul li a span.locked-bg {
  display: block;
  width: 194px;
  height: 107px;
  position: absolute;
  background: transparent url(img/bg_lock.png) no-repeat 14px 4px;
  top: -15px; }

.col-220 ul li a span.thumb-info {
  top: 5px;
  left: 20px; }

.col-220 ul li a span.thumb-time {
  top: 5px;
  right: 10px; }

.col-220 ul li a span.thumb-title {
  display: block;
  clear: both;
  right: 10px;
  bottom: 5px;
  left: 20px; }

#content .rounded {
  padding: 8px 10px 0 10px;
  font-size: 11px;
  line-height: 16px; }

#content .pagebottom {
  background: transparent url(img/bg_pagebottom.gif) no-repeat left top;
  height: 10px; }

#content #buttonbar {
  background: transparent url(img/bg_buttonbar.gif) no-repeat left bottom;
  line-height: 42px;
  padding: 0 2px;
  width: 100%;
  overflow: hidden; }

#content .buttonbarflat {
  background-position: -1000px bottom !important; }

#content #buttonbar ul li {
  display: inline;
  float: left;
  margin-left: 4px; }

#content #buttonbar ul li span {
  display: block;
  background: transparent url(img/bg_buttonbar_button.gif) no-repeat left top;
  padding-left: 10px; }

#content #buttonbar ul li span a {
  background: transparent url(img/bg_buttonbar_button.gif) no-repeat right top;
  display: block;
  padding-right: 10px;
  color: #666;
  text-decoration: none;
  font-weight: normal; }

#content #buttonbar ul li span:hover {
  background-position: left -100px; }

#content #buttonbar ul li span:hover a {
  background-position: right -100px; }

#content #buttonbar ul li span.active:hover, #content #buttonbar ul li span.active {
  background-position: left -200px;
  color: #2F3468;
  cursor: default;
  text-shadow: #bbb 1px 1px 2px; }

#content #buttonbar ul li span.active:hover a, #content #buttonbar ul li span.active a {
  background-position: right -200px; }

#footer {
  background: #2F3468 url(img/bg_footer.gif) repeat-x left top;
  color: #fff;
  padding: 20px 0;
  font-size: 11px;
  line-height: 16px; }

#footer a {
  color: #989BB7; }

#footer a:hover {
  color: #CCCDDB; }

#footer #col-courses {
  width: 230px; }

#footer #col-company {
  width: 130px; }

#footer .col {
  float: left;
  width: 180px; }

#footer .col h3 {
  margin-bottom: 4px; }

/* MESSAGES PAGE
	KEPT SEPERATE, STILL TO BE FORMATTED
	NOT YET TESTED IN IE
*/
ul#messages-inbox-list li {
  background: transparent url(img/bg_messages_inbox_item.gif) no-repeat left top; }

ul#messages-inbox-list li.Read a {
  font-weight: normal; }

ul#messages-inbox-list li.message-closed:hover {
  background-position: left -100px; }

ul#messages-inbox-list li:hover .right a {
  color: #444; }

ul#messages-inbox-list li.message-closed .exerpt {
  display: none; }

ul#messages-inbox-list li a.left {
  display: block;
  line-height: 45px;
  padding-left: 15px; }

ul#messages-inbox-list li div.right {
  text-align: left;
  padding-right: 15px;
  font-size: 11px;
  color: #999;
  line-height: 45px; }

ul#messages-inbox-list li div.right a {
  color: #999; }

ul#messages-inbox-list li.message-open {
  background-position: left -200px; }

ul#messages-inbox-list li.message-open .bg {
  background: transparent url(img/bg_messages_inbox_item.gif) no-repeat left bottom; }

ul#messages-inbox-list li .exerpt {
  padding: 0 15px 15px 15px;
  font-size: 12px;
  line-height: 16px; }

ul#messages-inbox-list li .exerpt span {
  font-style: italic;
  color: #999; }

/* table styles */
table.standard {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 10px 0; }

.standard tr {
  border: 1px solid #999; }

.standard tr:hover {
  background: #FFFCF2; }

.standard th {
  background: transparent url(img/bg_thead.gif) repeat-x left bottom;
  padding: 10px; }

.standard td {
  padding: 10px; }

.standard tr.altrow {
  background: #eee; }

.standard tr.altrow:hover {
  background: #EFECE2; }

table.light {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 10px 0; }

.light tr {
  border: 0px solid #999; }

.light th {
  background: transparent url(img/bg_thead.gif) repeat-x left bottom;
  padding: 6px; }

.light td {
  padding: 6px; }

/* uploader styles */
.upload_process_container {
  position: relative; }

#progress-processing {
  position: absolute;
  left: 120px;
  top: 45px; }

#processing {
  width: 220px;
  height: 27px;
  border: solid 1px #ccc;
  background-image: url(../content/img/processing-bar.gif);
  background-repeat: repeat-x; }

#processing span {
  margin: auto;
  font-weight: bold;
  padding: 10px 0 0 60px; }

#progress_bar {
  overflow: hidden;
  text-align: left;
  width: 220px;
  height: 27px;
  border: solid 1px #ccc; }

#progressBarFill {
  background-color: #ff0000;
  height: 27px; }

/* modal window */
#modal {
  background: transparent url(img/bg_modal_trans.png) repeat left top;
  position: fixed;
  z-index: 2000;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0; }

#modal #window {
  background: transparent url(img/bg_modal.png) no-repeat left bottom;
  width: 660px;
  padding: 0 10px 10px 10px;
  margin: 0 auto;
  text-align: left;
  position: relative; }

#modal #window #mediaTitle {
  line-height: 25px;
  padding: 0 5px 0 0;
  margin: 0 1px;
  font-size: 18px; }

#modal #window #modalIconsClose {
  background: transparent url(img/bg_close.png) no-repeat 0px top;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px 0 0 5px;
  cursor: pointer;
  position: absolute;
  right: -40px;
  top: -5px; }

/*#modal #window #modalIconsClose { background-position: -300px top; }
			#modal #window #modalIconsClose:hover { background-position: -300px -100px; }
			#modal #window #modalIconsClose:active { background-position: -300px -200px; }*/
#modal #window #modalContent {
  padding: 10px;
  position: relative; }

#modal #window #modalContent .videoPlayer {
  background-color: #000000;
  background-image: url("img/ajax-loader.gif");
  background-position: 310px 160px;
  background-repeat: no-repeat;
  height: 360px;
  width: 640px; }

/* video styles */
ul.videoList {
  overflow: hidden;
  width: 100%;
  margin-top: 10px; }

ul.videoList li {
  float: left;
  padding: 5px;
  background: url(img/bg_videothumb.gif) no-repeat left top !important;
  margin-right: 10px;
  cursor: pointer;
  position: relative; }

ul.videoList li:hover {
  background-position: left -100px !important; }

ul.videoList li span {
  width: 20px;
  height: 20px;
  display: block;
  background: url(img/cross.png) no-repeat left top !important;
  position: absolute;
  top: 10px;
  left: 105px; }

i.courseTypeIcon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: transparent url(img/sprite_courseTypeIcons.png) no-repeat left top;
  margin: 0 0 -2px 2px; }

i.courseTypeIconStandard {
  background-position: left top; }

i.courseTypeIconFasttrack {
  background-position: left -20px; }

i.courseTypeIconFreetrial {
  background-position: left -40px; }

/*------------------------------------*$APRIL 2015 - INDEPENDENT COURSES
\*------------------------------------*/
/**
Added by Gavin Platt in April 2015 whilst
adding independent courses, including some
changes to existing tutored courses app

Contents:

1. Base/generic/helper
2. Layout
3. Objects/modules
*/
/*------------------------------------*$VARIABLES
\*------------------------------------*/
/*------------------------------------*$BASE
\*------------------------------------*/
/*
TYPE
\*------------------------------------*/
/**
Standard text
This woudl usually be default style, but don't want to risk clashing with styles
 set in earlier CSS. So just @extend this when needed/
*/
.std-text {
  color: #5A5A5A;
  font-size: 14px;
  line-height: 1.6; }

.sml-text, .support-widget {
  color: #706F6F;
  font-size: 12px;
  line-height: 1.75; }

.lede,
.lead {
  font-size: 18px;
  line-height: 1.6; }

/**
Headings
1.  Override padding set at line 247
*/
.alpha {
  padding: 0 !important;
  /* [1] */
  margin-bottom: 14px;
  color: #3E3E3E;
  text-align: left;
  font-size: 20px;
  font-weight: bold; }

.beta {
  padding: 0 !important;
  /* [1] */
  margin-bottom: 14px;
  color: #3E3E3E;
  text-align: left;
  font-size: 16px;
  font-weight: bold; }

.gamma {
  padding: 0 !important;
  /* [1] */
  margin-bottom: 14px;
  color: #3E3E3E;
  text-align: left;
  font-size: 16px;
  font-weight: normal; }

/**
Super size headings
*/
.kilo {
  padding: 0 !important;
  /* [1] */
  margin-bottom: 14px;
  color: #3E3E3E;
  font-size: 32px;
  font-weight: bold; }

.mega {
  padding: 0 !important;
  /* [1] */
  margin-bottom: 14px;
  color: #3E3E3E;
  font-size: 48px;
  font-weight: bold; }

/**
Links
*/
.plain-link, .lesson-card, .plain-link:link, .lesson-card:link, .plain-link:visited, .lesson-card:visited, .plain-link:hover, .lesson-card:hover, .plain-link:active, .lesson-card:active {
  text-decoration: none;
  font-weight: inherit;
  color: inherit; }

/*------------------------------------*$HELPERS
\*------------------------------------*/
/*
CLEARFIX
\*------------------------------------*/
/**
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
* and over in your markup.
*/
.cf:after, .island:after,
.islet:after, .breadcrumb-nav:after, .support-widget:after, .lesson-details:after, .enrol-cta:after, .lesson-footer:after, .quiz__answers--images:after, .quiz__progress:after, .assistant__title:after, .lesson-card:after {
  content: "";
  display: table;
  clear: both; }

/*------------------------------------*$LAYOUT - ROOMY
\*------------------------------------*/
/**
Adding .l-roomy to <html> or <body> will create a layout where the left main
content area is wider (712px), and the right sidebar narrower (248px)
@todo: posisbly make this unviersal, so no need to use .l-rooy as hook

1.  Reposition pageDiver - see also summer2011.scss line 1
2.  672px = 712px - (2*20px) horizontal padding set inline in HTML, and line
 		204 in this file
3.  208px = 248px - (2*20px) horizontal padding
*/
.l-roomy .pageDivider {
  left: 712px;
  /* [1] */ }

.l-roomy .page .page__left {
  float: left;
  width: 672px;
  /* [2] */ }

.l-roomy .page .page__right {
  float: right;
  width: 208px;
  /* [3] */ }

/**
Adding .l-onecol <html> or <body> will create a layout where there is no right
sidebar with no dotted divider

@note: .pageDivider, .page > .right and .page > .left should be left out of
markup if possible. Butthe style sbelow have been included in case this isn't
possible

1. Hide .pageDiver (@note: leave this out of markup if possible)
2. Hide .right (@note: leave this out of markup if possible)
3. Make .left full width
*/
.l-onecol .pageDivider {
  display: none;
  /* [1] */ }

.l-onecol .page .page__right {
  float: right;
  display: none;
  /* [2] */ }

.l-onecol .page .page__left {
  float: left;
  width: 100%;
  /* [3] */ }

.l-onecol #content .page {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 42px;
  padding-right: 42px; }

/**
Add .page-narrow to .page will cause the main left side of the page to be
narrower, with a wider right sidebar
E.g. on Home screen when logged in as Tutor
*/
.page.page--narrow .pageDivider {
  left: 568px; }

.page.page--narrow .page .page__left {
  float: left;
  width: 542px; }

.page.page--narrow .page .page__right {
  float: right;
  width: 358px; }

/*------------------------------------*$LAYOUT - SMALL
\*------------------------------------*/
/**
1.  Remove background image used in normal container for border radius
*/
.container--small {
  width: 380px;
  margin-top: 28px;
  padding: 0 14px;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  background: #FFF; }
  .container--small #tabrow,
  .container--small .pagebottom {
    display: none; }
  .container--small .page {
    background-image: none !important;
    /* [1] */ }

/*------------------------------------*$GRIDS
\*------------------------------------*/
/**
 * Fluid and nestable grid system, e.g.:
 *
   <div class="grid">

       <div class="grid__item  one-third">
           <p>One third grid</p>
       </div><!--

    --><div class="grid__item  two-thirds">
           <p>Two thirds grid</p>
       </div><!--

    --><div class="grid__item  one-half">
           <p>One half grid</p>
       </div><!--

    --><div class="grid__item  one-quarter">
           <p>One quarter grid</p>
       </div><!--

    --><div class="grid__item  one-quarter">
           <p>One quarter grid</p>
       </div>

   </div>
 *
 * Demo: jsfiddle.net/inuitcss/CLYUC
 *
 */
/**
 * Grid wrapper
 */
.grid {
  margin-left: -14px;
  list-style: none;
  margin-bottom: 0; }

.grid--roomy {
  margin-left: -35px; }
  .grid--roomy .grid__item {
    padding-left: 35px; }

/**
     * Very infrequently occuring grid wrappers as children of grid wrappers.
     */
.grid > .grid {
  margin-left: 0; }

/**
     * Grid
     */
.grid__item {
  display: inline-block;
  width: 100%;
  padding-left: 14px;
  vertical-align: top;
  box-sizing: border-box; }

/*------------------------------------*$WIDTHS
\*------------------------------------*/
/**
 * Sizes in human readable format. These are used in conjunction with other
 * objects and abstractions found in inuit.css, most commonly the grid system
 * and faux flexbox.
 *
 */
/**
* Whole
*/
.one-whole {
  width: 100%; }

/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%; }

/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
  width: 33.333%; }

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666%; }

/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
  width: 25%; }

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%; }

/**
* Fifths
*/
.one-fifth, .two-tenths {
  width: 20%; }

.two-fifths, .four-tenths {
  width: 40%; }

.three-fifths, .six-tenths {
  width: 60%; }

.four-fifths, .eight-tenths {
  width: 80%; }

/**
* Sixths
*/
.one-sixth, .two-twelfths {
  width: 16.666%; }

.five-sixths, .ten-twelfths {
  width: 83.333%; }

/**
* Eighths
*/
.one-eighth {
  width: 12.5%; }

.three-eighths {
  width: 37.5%; }

.five-eighths {
  width: 62.5%; }

.seven-eighths {
  width: 87.5%; }

/**
* Tenths
*/
.one-tenth {
  width: 10%; }

.three-tenths {
  width: 30%; }

.seven-tenths {
  width: 70%; }

.nine-tenths {
  width: 90%; }

/**
* Twelfths
*/
.one-twelfth {
  width: 8.333%; }

.five-twelfths {
  width: 41.666%; }

.seven-twelfths {
  width: 58.333%; }

.eleven-twelfths {
  width: 91.666%; }

/*------------------------------------*$ISLANDS/SECTIONS
\*------------------------------------*/
/**
.island creates a boxed off area of padded content with a background to make it
stand out
from other content
*/
.island,
.islet {
  display: block;
  border-radius: 6px;
  background: #F0F0F0; }

.island {
  padding: 14px; }

.island > :last-child,
.islet > :last-child {
  margin-bottom: 0; }

/**
Just like `.island`, only smaller.
*/
.islet {
  padding: 7px; }

/**
Same, but shrinkwrap to content
*/
.island--inline,
.islet--inline {
  display: inline-block; }

/**
Make a section stand out, with a background, bottom baorder and top highlight
*/
.standout-section {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #E6E7EB;
  background: #f5f6f9;
  z-index: 1;
  /* Create 1px white highlight */ }
  .standout-section:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    height: 1px;
    left: 0;
    right: 0;
    z-index: 2;
    background: #fff; }

/*------------------------------------*$RULES
\*------------------------------------*/
/**
Make <hr> pretty
*/
/* hr */
.rule {
  color: #F7F7F7;
  border: none;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  margin-bottom: 12px; }

/*------------------------------------*$BUTTONS
\*------------------------------------*/
/**
There are existing button styles. This will need loading state. See especially
 /summer2011.scss line 1036
These styles have to override earlier .btn styles, so use horrible ID selector
to increase specificity
*/
/**
A flat button, without shadow/gradient
Default, neutral colour is $brand1 - see alternatives below
*/
.btn {
  display: inline-block; }

/**
Add class .is-processing to add a spinner
*/
.btn.is-processing:after {
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
  cursor: default;
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-left: .4em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  content: '\e830'; }

#content .btn--flat,
.assistant .btn--flat {
  background-image: none;
  padding: 10.5px 21px;
  background-color: #2F3468;
  box-shadow: none;
  border-radius: 6px;
  font-size: 18px;
  text-shadow: none;
  color: #fff;
  font-weight: normal;
  border: 0; }
  #content .btn--flat:hover,
  .assistant .btn--flat:hover {
    text-decoration: none;
    background-color: #272b56; }
  #content .btn--flat:active,
  .assistant .btn--flat:active {
    position: relative;
    top: 1px; }
  #content .btn--flat:disabled, #content .btn--flat.is-disabled,
  .assistant .btn--flat:disabled,
  .assistant .btn--flat.is-disabled {
    background-color: #ccc; }
    #content .btn--flat:disabled:hover, #content .btn--flat.is-disabled:hover,
    .assistant .btn--flat:disabled:hover,
    .assistant .btn--flat.is-disabled:hover {
      background-color: #ccc;
      cursor: not-allowed; }
    #content .btn--flat:disabled:active, #content .btn--flat.is-disabled:active,
    .assistant .btn--flat:disabled:active,
    .assistant .btn--flat.is-disabled:active {
      top: 0; }

/**
Different colours
*/
#content .btn--positive,
.assistant .btn--positive {
  background-color: #79C84B; }
  #content .btn--positive:hover,
  .assistant .btn--positive:hover {
    background-color: #6bbf3a; }

/**
Different sizes
*/
#content .btn--sml,
.assistant .btn--sml {
  padding-left: 7px;
  padding-right: 7px;
  font-size: 14px; }

#content .btn--big,
.assistant .btn--big {
  padding-left: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-right: 14px;
  font-size: 18px; }

/**
.btn--push creates a big button with drop shadow which no one will be able to
resist pushing. By default these are green, for 'go'
*/
#content .btn--push {
  background-image: none;
  padding: 10.5px 21px;
  background-color: #79C84B;
  box-shadow: 0px 3px 0 0px #4a8528;
  border-radius: 6px;
  font-size: 18px;
  text-shadow: none;
  color: #fff;
  font-weight: normal;
  border: 0; }
  #content .btn--push:hover {
    text-decoration: none;
    background-color: #6bbf3a; }
  #content .btn--push:active {
    position: relative;
    top: 3px;
    box-shadow: none; }
  #content .btn--push:disabled, #content .btn--push.is-disabled {
    background-color: #ccc;
    box-shadow: 0px 3px 0 0px #aaa;
    cursor: not-allowed; }
    #content .btn--push:disabled:active, #content .btn--push.is-disabled:active {
      position: relative;
      top: 0;
      box-shadow: 0px 3px 0 0px #aaa; }

/*------------------------------------*$ICONS
\*------------------------------------*/
/**
See fontello.css for all styles and available icons
Icon markup is <i class="icon-ICONNAME"></i>, optionally prepended by classes
below
*/
/* A big, brand-coooured icon */
.icon--decorative {
  display: block;
  font-size: 40px;
  margin-bottom: -14px;
  color: #4D5B8F; }

.icon--decorative--big {
  font-size: 90px;
  color: #2F3468; }

/* Specific icon tweaks for ocnsistent sizing */
.icon-users:before {
  font-size: 0.9em; }

.icon--big {
  font-size: 1.5em; }

/*------------------------------------*$LISTS
\*------------------------------------*/
/* ul */
.arrow-list {
  list-style: none;
  margin-left: 0;
  padding-left: 1.4em; }
  .arrow-list > li {
    text-indent: -1.4em;
    margin-bottom: 0.5em; }
  .arrow-list > li:before {
    content: "\e80f";
    float: left;
    font-family: "fontello";
    color: #4D5B8F;
    width: 1.4em; }

/*------------------------------------*$IMAGE STYLES
\*------------------------------------*/
/* Wrap text around image */
img.wrap {
  float: left;
  margin-right: 14px;
  margin-bottom: 7px; }

/**
Avatars
Small round iamges for users
*/
/* img */
.avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 32px; }

.avatar--big {
  width: 72px;
  height: 72px;
  border-radius: 72px; }

/*------------------------------------*$BASIC TOOLTIP
\*------------------------------------*/
/**
A simple, minimal tooltip to show extra information on hover
There were other tooltips in use on the old dashboard sidebar when hovering over
*/
.basic-tooltip {
  position: absolute;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  background: #fff;
  padding: 14px;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
  color: #5A5A5A;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  /* default positioning: anchored to top right of parent */
  right: 0;
  bottom: 100%;
  margin-bottom: 18px;
  /* different widths */
  width: 200px; }

/* Add carat arrow to bottom right */
.basic-tooltip:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: #fff;
  border-width: 8px;
  margin-bottom: -8px;
  /* default positioning: anchored to top right of parent */
  right: 10px; }

/*------------------------------------*$STATUS FLAG
\*------------------------------------*/
/**
Small grey pill to show status of something. Usually includes icon. E.g. booking
status, waiting for tutor status
*/
.status-flag, .booking-status {
  text-transform: uppercase;
  font-size: 10px;
  background: #F2F3F7;
  padding: 3px 5px;
  border-radius: 20px;
  white-space: nowrap;
  color: #DB7C0E; }

.status-flag i, .booking-status i {
  margin-left: 0;
  margin-right: 2px;
  font-size: 12px; }

/*------------------------------------*$QUICKSTART
\*------------------------------------*/
/**
Displays message at top of dashboard with button for student to continue from
where they last were
*/
.quickstart h2.beta span {
  display: block;
  float: left;
  width: 65%;
  line-height: 1.5; }

.quickstart .btn {
  display: block;
  float: right;
  line-height: 1.25; }

/*------------------------------------*$REVIEWS
\*------------------------------------*/
/**
Each review is a <blockquote> within a container with class .reviews
*/
.reviews {
  width: 60%;
  margin-left: auto;
  margin-right: auto; }
  .reviews blockquote {
    color: #5A5A5A;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 28px; }
    .reviews blockquote:before {
      content: '\e809';
      font-family: fontello;
      display: block;
      margin-bottom: 0.3em;
      color: #4D5B8F; }
    .reviews blockquote p {
      margin-bottom: 7px; }
      .reviews blockquote p:before {
        content: '\201C'; }
      .reviews blockquote p:after {
        content: '\201D'; }
    .reviews blockquote .source {
      font-size: 0.9em;
      font-weight: bold; }
      .reviews blockquote .source:before {
        content: '\2014 \00a0'; }
      .reviews blockquote .source:after {
        content: none; }

/*------------------------------------*$BREADCRUMD NAV
\*------------------------------------*/
/**
* Simple breadcrumb styling to apply to (ordered) lists. E.g.
*
 <ol class="breadcrumb-nav">
     <li><a href=#>Home</a></li>
     <li><a href=#>About</a></li>
     <li><a href=#>The Board</a></li>
     <li class=current><a href=#>Directors</a></li>
 </ol>
*
* Demo: jsfiddle.net/inuitcss/rkAY9
*
*/
.breadcrumb-nav {
  list-style: none;
  margin-left: 0;
  margin-top: 14px;
  margin-bottom: 7px;
  color: #999999;
  font-size: 0.9em;
  background: none; }
  .breadcrumb-nav > li,
  .breadcrumb-nav > li > a {
    display: inline-block;
    *display: inline;
    zoom: 1; }

.breadcrumb-nav > li + li:before {
  content: "\003E" "\00A0"; }

/*------------------------------------*$SCREEN TITLE & CTA BUTTON
\*------------------------------------*/
/**
Main title to show users' location in app, immediately below
Breadcrumb Nav. Whens tudent is within a course, this shows
the title of the active lesson

/* h1 */
.screen-title {
  float: left;
  margin-bottom: 14px;
  font-size: 1.8em;
  line-height: 1;
  text-align: left;
  color: #000; }

/**
A big, centred screen title for special screens - e.g. login
*/
.screen-title--big {
  font-size: 26px;
  padding: 28px 0 0 0;
  margin-bottom: 0;
  color: #2F3468;
  font-weight: 100;
  cursor: default;
  text-align: center; }

#container {
  margin-top: 21px; }

/**
When a user isn't enrolled on a course, a CTA button shuodl always display in
the top right. It can be disabled (.is-disabled) if user cant sign up due to
being enrolled on another paid course
*/
.screen-title {
  float: left; }

.screen-title + .btn {
  float: right;
  margin-top: -14px; }

/*------------------------------------*$SUPPORT WIDGET
\*------------------------------------*/
/**
Support footer at bottom of each screen
//@todo: Add icons - image or font?
*/
.support-widget {
  width: 960px;
  margin: 84px auto 56px auto;
  text-align: left; }
  .support-widget img {
    display: block;
    float: left;
    width: 54px;
    height: 54px;
    margin-right: 28px;
    border-radius: 54px; }
  .support-widget p {
    color: #5A5A5A;
    float: left;
    width: 210px;
    margin-right: 28px; }
  .support-widget ul {
    float: left;
    display: block;
    width: 400px; }
    .support-widget ul > li {
      display: block;
      width: 180px;
      float: left;
      color: #2F3468;
      font-weight: bold; }
      .support-widget ul > li > a.go:after {
        content: "\00A0" "\2192"; }

/*------------------------------------*$COURSE OUTLINE SIDEBAR
\*------------------------------------*/
/**
Course outline inb right sidebar. A course can consist of 1 or more modules
*/
/* ol */
.course-outline {
  width: 195px;
  padding: 0 7px;
  font-size: 13px;
  line-height: 19px;
  font-weight: bold;
  text-transform: uppercase; }
  .course-outline a:hover {
    text-decoration: none;
    color: #4D5B8F; }

.course-outline__module {
  padding-bottom: 7px;
  padding-top: 14px;
  border-bottom: 1px solid #e6e5e5; }
  .course-outline__module.is-expanded ol {
    height: auto; }
  .course-outline__module.is-collapsed ol {
    height: 0;
    overflow: hidden; }
  .course-outline__module.is-expanded strong,
  .course-outline__module.is-collapsed strong {
    display: block;
    cursor: pointer; }
    .course-outline__module.is-expanded strong::after,
    .course-outline__module.is-collapsed strong::after {
      content: '\f106';
      position: relative;
      top: 0.1em;
      margin-left: 0.01em;
      font-size: 1.2em;
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      width: 1.3em;
      margin-right: 0;
      text-align: center;
      /* opacity: .8; */
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em; }
  .course-outline__module.is-collapsed strong::after {
    content: '\f107'; }

.course-outline__module ol {
  line-height: 22px;
  margin-top: 12px; }

.course-outline__module li {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 28px; }

.course-outline__module i {
  margin-left: -28px; }

.course-outline__module .booking-status i {
  margin-left: 0; }

.course-outline__module ol,
.course-outline__module ol a {
  text-transform: none;
  font-weight: normal; }

/**
When whole module is locked, grey everything out and show locked icon
*/
.course-outline__module.is-locked,
.course-outline__module.is-locked ol,
.course-outline__module.is-locked ol a {
  color: #9A9A9A; }

.course-outline__module.is-locked a:hover {
  text-decoration: none; }

/**
When a class is locked grey it out
*/
.course-outline .is-locked {
  color: #9A9A9A; }

/**
Replace icon with green tick when class completed
1.  When a class is completed replace the icon with a tick, unless it is being
		hovered (in which case the original icon in the HTML will be shown)
2.  Make it green
*/
.course-outline .is-done:not(:hover) > a i:before {
  content: '\e800';
  /* [1] */ }

.course-outline .is-done > a i {
  color: #79C84B !important;
  /* [2] */ }

/**
Highlight the current class being taken
*/
.course-outline .is-current,
.course-outline .is-current a {
  color: #4D5B8F;
  font-weight: bold; }

/**
Class icons
*/
.course-outline__module ol > li > i,
.course-outline__module ol > li > a > i {
  margin-right: 0.3em;
  font-size: 16px; }

/**
Tutorial booking statuses
Extends Stuats Flag
*/
.booking-status.is-pending {
  color: #DB7C0E; }

.booking-status.is-booked {
  color: #79C84B; }

.booking-status.is-soon {
  color: #CF3534; }

/*------------------------------------*$LESSON CONTENT
\*------------------------------------*/
/**
Main content: usually video or embedded documents
Quiz styles are more unique, found below.
*/
/* @todo: corrent classnames. First fix typo, then change to more general
.lesson-content */
.video-placeholder,
.video-palceholder,
.session-content {
  margin-bottom: 28px; }

/*------------------------------------*$LESSON DETAILS
\*------------------------------------*/
/**
Two columns of info beneath lesson video/documents, with an overview paragrph
 and bulleted list of aims
*/
.lesson-details {
  margin-bottom: 28px;
  text-align: left; }
  .lesson-details p {
    color: #5A5A5A;
    font-size: 14px;
    line-height: 1.6; }
  .lesson-details ul {
    color: #5A5A5A;
    font-size: 14px;
    line-height: 1.6; }

/*------------------------------------*$LESSON ENROL CTA
\*------------------------------------*/
/**
A big button which is sectioned off to draw attention. If user can't enrol on
this course, then also display an explanatory paragraph.
*/
.enrol-cta {
  margin-bottom: 28px;
  padding: 28px 56px;
  position: relative;
  border-top: 1px solid #DEDEDE;
  background: #F2F3F7;
  z-index: 1;
  text-align: center;
  /* Create 1px white highlight */ }
  .enrol-cta > p {
    text-align: center; }
  .enrol-cta:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    height: 1px;
    left: 0;
    right: 0;
    z-index: 2;
    background: #fff; }
  .enrol-cta .btn + .small {
    width: 90%;
    margin-top: 14px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    color: #706F6F;
    line-height: 1.3; }

/*------------------------------------*$LESSON FOOTER
\*------------------------------------*/
/**
Highlited content at bottom of lesson, containing info about tuor and other
students

1.  Override 20px horizontal padding on parent to bring bacground flush to edges
2.  Reintroduce horizontal padding, add vertical padding
*/
.lesson-footer {
  margin-left: -19px;
  /* [1] */
  margin-right: -20px;
  /* [1] */
  margin-bottom: 28px;
  padding: 28px 20px;
  /* [2] */
  position: relative;
  border-top: 1px solid #DEDEDE;
  background: #F2F3F7;
  z-index: 1;
  /* Create 1px white highlight */ }
  .lesson-footer:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    height: 1px;
    left: 0;
    right: 0;
    z-index: 2;
    background: #fff; }
  .lesson-footer .left {
    margin-right: 28px; }
    .lesson-footer .left img {
      display: block;
      float: left;
      width: 54px;
      height: 54px;
      margin-right: 14px;
      border-radius: 54px; }
    .lesson-footer .left p {
      color: #706F6F;
      font-size: 0.9em;
      line-height: 1.5; }

/*------------------------------------*$QUIZ
\*------------------------------------*/
.quiz__question {
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
  color: #3E3E3E; }

.quiz__answers {
  padding-top: 28px;
  padding-bottom: 14px;
  position: relative;
  border-top: 1px solid #CCCCCC;
  background: #F2F3F7;
  z-index: 1;
  /* Create 1px white highlight */ }
  .quiz__answers:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    height: 1px;
    left: 0;
    right: 0;
    z-index: 2;
    background: #fff; }
  .quiz__answers li {
    position: relative;
    /* [2] */
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    background: #FFF;
    font-size: 16px;
    color: #3E3E3E;
    cursor: pointer;
    counter-increment: step-counter;
    /* [1] */ }
    .quiz__answers li:before {
      content: counter(step-counter, upper-alpha);
      margin-right: 1.8em;
      font-weight: bold; }
    .quiz__answers li:after {
      content: "";
      display: block;
      width: 1px;
      height: 100%;
      background: #CCCCCC;
      position: absolute;
      left: 2.4em;
      top: 0;
      right: 0; }
    .quiz__answers li.selected:after {
      background: #2F3468; }
    .quiz__answers li.selected, .quiz__answers li.selected:hover {
      border: 1px solid #2F3468;
      box-shadow: 0px 0px 0px 1px #2F3468; }
    .quiz__answers li:hover {
      border: 1px solid #b7bbdf;
      box-shadow: 0px 0px 2px 0px #2F3468; }

/**
When using images for answers, add class .quiz__answers--images;
<div class="quiz__answers quiz__answers--images full-bleed">
*/
.quiz__answers--images {
  padding-bottom: 0; }
  .quiz__answers--images li {
    display: block;
    float: left;
    width: 40%;
    height: 230px;
    margin-right: 35px;
    margin-bottom: 35px; }
    .quiz__answers--images li:before {
      display: block;
      position: absolute;
      left: 50%;
      width: 20px;
      height: 20px;
      margin-left: -10px; }
    .quiz__answers--images li:after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #CCCCCC;
      position: absolute;
      left: 0;
      top: 42px;
      right: 0; }
    .quiz__answers--images li img,
    .quiz__answers--images li video {
      display: block;
      margin-top: 46px;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
      max-height: 180px; }

.quiz__footer {
  padding-top: 28px;
  padding-bottom: 35px;
  margin-bottom: 28px;
  border-top: 1px solid #CCCCCC;
  background: #E6E7EB; }

/**
Progress Tracker
*/
.quiz__progress {
  margin-bottom: 14px; }
  .quiz__progress > span {
    display: block;
    float: left;
    width: 15%;
    margin-top: 2px;
    font-size: 0.9em;
    color: #706F6F; }

.quiz__progress-bar {
  float: right;
  width: 85%;
  z-index: 1;
  height: 12px;
  position: relative; }
  .quiz__progress-bar:before {
    z-index: 2;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    background: #CCCCCC; }
  .quiz__progress-bar ol {
    display: table;
    width: 100%; }
  .quiz__progress-bar li {
    position: relative;
    display: table-cell; }
    .quiz__progress-bar li:before {
      z-index: 4;
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 1px;
      left: 50%;
      margin-left: -6px;
      background: #fff;
      border-radius: 12px;
      border: 2px solid #CCCCCC;
      box-sizing: border-box; }
    .quiz__progress-bar li.step--done:before {
      background: #CCCCCC;
      /* Old browsers */
      /* FF3.6+ */
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #CCCCCC), color-stop(50%, #CCCCCC), color-stop(60%, #ffffff), color-stop(100%, #ffffff));
      /* Chrome,Safari4+ */
      background: -webkit-radial-gradient(center, ellipse cover, #CCCCCC 0%, #CCCCCC 50%, #ffffff 60%, #ffffff 100%);
      /* Chrome10+,Safari5.1+ */
      /* Opera 12+ */
      /* IE10+ */
      background: -webkit-radial-gradient(center ellipse, #CCCCCC 0%, #CCCCCC 50%, #ffffff 60%, #ffffff 100%);
      background: radial-gradient(ellipse at center, #CCCCCC 0%, #CCCCCC 50%, #ffffff 60%, #ffffff 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$grey', endColorstr='#ffffff',GradientType=1 );
      /* IE6-9 fallback on horizontal gradient */ }
    .quiz__progress-bar li.step--current:before {
      border-color: #7178bf; }
    .quiz__progress-bar li:first-child:after {
      z-index: 3;
      content: "";
      display: block;
      width: 50%;
      height: 12px;
      position: absolute;
      top: 0;
      left: 0;
      background: #fff; }
    .quiz__progress-bar li:last-child:after {
      z-index: 3;
      content: "";
      display: block;
      width: 50%;
      height: 12px;
      position: absolute;
      top: 0;
      right: 0;
      background: #fff; }
  .quiz__progress-bar li.step--done {
    color: #706F6F; }
  .quiz__progress-bar li.step--active {
    font-weight: bold; }

/**
Informations creens at start/end of screen
e.g. Introduction, pass, fail
*/
.quiz__info {
  color: #5A5A5A;
  font-size: 14px;
  line-height: 1.6;
  text-align: center; }
  .quiz__info h2 {
    padding: 0; }
  .quiz__info p {
    padding-left: 49px;
    padding-right: 49px; }

/**
Quiz details
A list quiz meta details shown on the start screen
*/
/* ul */
.quiz__details {
  color: #5A5A5A;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 42px;
  margin-bottom: 42px; }
  .quiz__details li {
    display: inline-block;
    border: 2px solid #CCCCCC;
    border-radius: 4px;
    padding: 8px;
    color: #706F6F; }
  .quiz__details li + li {
    margin-left: 4px; }

/**
Quiz detailed results screen
*/
.quiz-detailed-results .quiz__answers {
  position: relative;
  margin-bottom: 56px;
  border-bottom: 1px solid #CCCCCC;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.2); }

/**
Mark answeres correct/incorrect

1.  Remove all hover interaction styles set previously
2.  Fade out all unselected
3.  Position correct/incorrect icon
*/
.quiz-detailed-results {
  /* Adjustments for image answers */ }
  .quiz-detailed-results .quiz__answers li {
    position: relative;
    cursor: default;
    /* [1] */
    color: #9A9A9A;
    /* [2] */
    /* Highlight selected */
    /* Highlight selected option correct */
    /* Highlight selected option incorrect */
    /* Highlight unselected correct option */ }
    .quiz-detailed-results .quiz__answers li:hover {
      border: 1px solid #CCCCCC;
      /* [1] */
      box-shadow: none;
      /* [1] */ }
    .quiz-detailed-results .quiz__answers li.selected {
      color: #3E3E3E; }
    .quiz-detailed-results .quiz__answers li.selected--correct, .quiz-detailed-results .quiz__answers li.selected--correct:hover {
      border-color: #79C84B;
      box-shadow: 0px 0px 0px 1px #79C84B; }
      .quiz-detailed-results .quiz__answers li.selected--correct:after, .quiz-detailed-results .quiz__answers li.selected--correct:hover:after {
        background: #79C84B; }
      .quiz-detailed-results .quiz__answers li.selected--correct i, .quiz-detailed-results .quiz__answers li.selected--correct:hover i {
        color: #79C84B; }
    .quiz-detailed-results .quiz__answers li.selected--incorrect, .quiz-detailed-results .quiz__answers li.selected--incorrect:hover {
      border-color: red;
      box-shadow: 0px 0px 0px 1px red; }
      .quiz-detailed-results .quiz__answers li.selected--incorrect:after, .quiz-detailed-results .quiz__answers li.selected--incorrect:hover:after {
        background: red; }
      .quiz-detailed-results .quiz__answers li.selected--incorrect i, .quiz-detailed-results .quiz__answers li.selected--incorrect:hover i {
        color: red; }
    .quiz-detailed-results .quiz__answers li.correct {
      border-color: #96d472;
      box-shadow: 0px 0px 0px 1px #96d472; }
      .quiz-detailed-results .quiz__answers li.correct:after {
        background: #96d472; }
  .quiz-detailed-results .quiz__answers li i {
    float: right;
    /* [3] */ }
  .quiz-detailed-results .quiz__answers--images li > i {
    position: absolute;
    left: 14px;
    top: 14px; }

/*------------------------------------*$ASSISTANT
\*------------------------------------*/
/**
In-context help/assistant sidebar and alert
*/
/**
ASSISTANT TOGGLE ICON
*/
.assistant__icon {
  display: block;
  position: fixed;
  right: 24px;
  bottom: -2px;
  width: 42px;
  height: 42px;
  background: #2F3468;
  border: 1px solid #000;
  z-index: 1000;
  border-radius: 4px 4px 0 0; }
  .assistant__icon .basic-tooltip {
    width: 120px; }
  .assistant__icon:hover {
    padding-bottom: 2px; }
    .assistant__icon:hover .basic-tooltip {
      margin-bottom: 16px; }
  .assistant__icon:after {
    /* icon styles as per fontello.css */
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    content: '\e81f';
    color: #fff;
    font-size: 22px;
    font-weight: normal !important;
    /* positioning */
    position: absolute;
    left: 10px;
    top: 8px;
    text-decoration: none !important; }

/**
ASSISTANT SIDEBAR
*/
.assistant {
  display: none;
  position: fixed;
  overflow: scroll;
  right: 0;
  top: 0;
  bottom: 0;
  width: 290px;
  z-index: 90000;
  background: #FFF;
  border-left: 1px solid #CCCCCC;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
  text-align: left;
  background: #f1f2f4; }

.assistant.is-open {
  display: block; }

.assistant__title {
  font-size: 18px;
  font-weight: bold;
  padding: 21px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #fff;
  background: #2F3468;
  color: #fff; }

.assistant__actions {
  text-align: right;
  float: right;
  display: block; }
  .assistant__actions a {
    color: #fff; }

.assistant__body {
  padding: 14px;
  font-size: 0.93em;
  line-height: 1.33; }

.assistant__item {
  position: relative;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  background: #fff;
  padding: 7px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); }

/* Add carat arrow to bottom right */
.assistant__item:after {
  left: 10px;
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: #fff;
  border-width: 8px;
  margin-bottom: -8px; }

.assistant__item + img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #CCCCCC;
  margin-top: 14px;
  margin-bottom: 7px; }

.assistant p {
  margin-bottom: 14px; }

.assistant form {
  margin-top: 28px;
  color: #706F6F;
  line-height: 1.75;
  font-size: 0.9em; }
  .assistant form label {
    font-weight: normal; }

/*------------------------------------*$LESSON CARDS
\*------------------------------------*/
/**
A 'card' preview of a lesson, which links to more information about that lesson
Currentlyu found on Dashboard screen
*/
.lesson-card {
  display: block;
  position: relative;
  height: 230px;
  padding: 14px;
  margin-bottom: 42px;
  background: #fff;
  border: 2px solid #E6E7EB;
  border-radius: 6px; }
  .lesson-card:hover {
    border: 2px solid #b7bbdf; }
    .lesson-card:hover .btn--positive {
      background: #6bbf3a !important; }
  .lesson-card h3 {
    font-size: 18px;
    line-height: 1.2; }
  .lesson-card.lesson-card--with-status h3 {
    margin-top: 24.5px; }
  .lesson-card p {
    font-size: 13px;
    line-height: 1.3; }
  .lesson-card i {
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased; }
  .lesson-card .btn {
    display: block;
    position: absolute;
    bottom: 14px;
    left: 14px;
    margin-left: auto;
    margin-right: auto;
    /**
		Default .btn shifts down 1px on click, using position: relative; top: 1px
		As this button is absolutely positioned, we need to override this
		*/ }
    .lesson-card .btn:active {
      position: absolute !important;
      top: auto !important;
      bottom: 13px !important; }

.lesson-card--sml {
  height: 160px; }

.lesson-card__status {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  padding: 7px 17px;
  color: #fff;
  font-weight: normal;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  /* Different colours depending on status */ }
  .is-complete .lesson-card__status {
    background: #79C84B; }
  .is-partial .lesson-card__status {
    background: #2F3468; }

.lesson-card__meta {
  display: inline-block;
  font-size: 12px;
  background: #F0F0F0;
  padding: 7px 14px;
  border-radius: 1000px;
  margin-bottom: 14px; }
  .lesson-card__meta + .lesson-card__meta {
    margin-left: 7px; }
  .lesson-card__meta i {
    position: relative;
    top: -1px; }

.lesson-card.is-locked {
  background: none;
  color: #9A9A9A;
  box-shadow: none;
  cursor: not-allowed; }
  .lesson-card.is-locked h3 {
    color: #9A9A9A; }
  .lesson-card.is-locked .lesson-card__status {
    color: #9A9A9A;
    background: none;
    margin-top: 4px; }
    .lesson-card.is-locked .lesson-card__status i {
      position: relative;
      top: -2px; }

/*------------------------------------*$LOGIN SCREEN
\*------------------------------------*/
/*------------------------------------*$MODAL OVERLAY
\*------------------------------------*/
/**
Used to block content. If user clicks a lesosn which is locked (due to previous
uncompleted sessions, or having not purchased the full course) then the modal
displays. Can optionally include a call to action footer

Class .modal already used elsehwere. This modal is smaller, so using .modal-sml
*/
/* Create positioning context */
.page {
  position: relative; }

/**
1.  Account for padding on parents
2.  Width of right column - we only want to cover left
*/
.modal-sml-overlay {
  position: absolute;
  top: 9px;
  /* [1] */
  bottom: -10px;
  /* [1] */
  left: 0;
  right: 248px;
  /* [2] */
  margin-top: -20px;
  /* [1] */
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  border-radius: 6px 0 0 6px; }

.modal-sml {
  position: absolute;
  left: 134px;
  top: 100px;
  width: 400px;
  height: auto;
  z-index: 1001;
  background: #FFF;
  border-radius: 6px;
  box-shadow: 1px 4px 3px 0px rgba(0, 0, 0, 0.5);
  color: #5A5A5A;
  text-align: center; }
  .modal-sml .icon--big {
    display: block;
    margin-bottom: 14px;
    margin-top: -7px; }

.modal-sml__body {
  padding: 40px 25px; }
  .modal-sml__body p {
    line-height: 1.3; }

.modal-sml__heading {
  margin-bottom: 14px;
  font-size: 1.8em;
  line-height: 1;
  color: #3E3E3E; }

/**
Optionally include a footer with call to action button
*/
.modal-sml__footer {
  margin-top: -14px;
  padding-top: 17.5px;
  padding-bottom: 21px;
  position: relative;
  border-top: 1px solid #CCCCCC;
  background: #F2F3F7;
  z-index: 1;
  border-radius: 0 0 6px 6px;
  /* Create 1px white highlight */ }
  .modal-sml__footer a.btn {
    min-width: 200px; }
  .modal-sml__footer:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    height: 1px;
    left: 0;
    right: 0;
    z-index: 2;
    background: #fff; }

/*------------------------------------*$HELPERS
\*------------------------------------*/
/**
.full-bleed makes an item stretch to edges of container

1.  Override 20px horizontal padding on parent to bring bacground flush to edges
2.  Reintroduce horizontal padding, add vertical padding
*/
.full-bleed {
  margin-left: -19px;
  /* [1] */
  margin-right: -19px;
  /* [1] */
  padding-left: 20px;
  /* [2] */
  padding-right: 20px;
  /* [2] */ }

.l-roomy.l-onecol .full-bleed {
  margin-left: -41px;
  margin-right: -41px;
  padding-left: 42px;
  padding-right: 42px; }

/**
Small text
*/
.small {
  font-size: 0.9em; }

a.small {
  font-weight: normal; }

/**
Add a rightwards arrow to signifiy next step/process
*/
a.go:after {
  content: "\00A0" "\2192"; }

.text--center {
  text-align: center; }

/**
 * Add/remove margins
 */
.push {
  margin: 14px !important; }

.push--top {
  margin-top: 14px !important; }

.push--right {
  margin-right: 14px !important; }

.push--bottom {
  margin-bottom: 14px !important; }

.push--left {
  margin-left: 14px !important; }

.push--ends {
  margin-top: 14px !important;
  margin-bottom: 14px !important; }

.push--sides {
  margin-right: 14px !important;
  margin-left: 14px !important; }

.push-half {
  margin: 7px !important; }

.push-half--top {
  margin-top: 7px !important; }

.push-half--right {
  margin-right: 7px !important; }

.push-half--bottom {
  margin-bottom: 7px !important; }

.push-half--left {
  margin-left: 7px !important; }

.push-half--ends {
  margin-top: 7px !important;
  margin-bottom: 7px !important; }

.push-half--sides {
  margin-right: 7px !important;
  margin-left: 7px !important; }

.push-dbl {
  margin: 28px !important; }

.push-dbl--top {
  margin-top: 28px !important; }

.push-dbl--right {
  margin-right: 28px !important; }

.push-dbl--bottom {
  margin-bottom: 28px !important; }

.push-dbl--left {
  margin-left: 28px !important; }

.push-dbl--ends {
  margin-top: 28px !important;
  margin-bottom: 28px !important; }

.push-dbl--sides {
  margin-right: 28px !important;
  margin-left: 28px !important; }

.flush {
  margin: 0 !important; }

.flush--top {
  margin-top: 0 !important; }

.flush--right {
  margin-right: 0 !important; }

.flush--bottom {
  margin-bottom: 0 !important; }

.flush--left {
  margin-left: 0 !important; }

.flush--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.flush--sides {
  margin-right: 0 !important;
  margin-left: 0 !important; }

.pull--top {
  margin-top: -14px !important; }

.pull-dbl--top {
  margin-top: -28px !important; }

/**
 * Add/remove paddings
 */
.soft {
  padding: 14px !important; }

.soft--top {
  padding-top: 14px !important; }

.soft--right {
  padding-right: 14px !important; }

.soft--bottom {
  padding-bottom: 14px !important; }

.soft--left {
  padding-left: 14px !important; }

.soft--ends {
  padding-top: 14px !important;
  padding-bottom: 14px !important; }

.soft--sides {
  padding-right: 14px !important;
  padding-left: 14px !important; }

.soft-half {
  padding: 7px !important; }

.soft-half--top {
  padding-top: 7px !important; }

.soft-half--right {
  padding-right: 7px !important; }

.soft-half--bottom {
  padding-bottom: 7px !important; }

.soft-half--left {
  padding-left: 7px !important; }

.soft-half--ends {
  padding-top: 7px !important;
  padding-bottom: 7px !important; }

.soft-half--sides {
  padding-right: 7px !important;
  padding-left: 7px !important; }

.hard {
  padding: 0 !important; }

.hard--top {
  padding-top: 0 !important; }

.hard--right {
  padding-right: 0 !important; }

.hard--bottom {
  padding-bottom: 0 !important; }

.hard--left {
  padding-left: 0 !important; }

.hard--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.hard--sides {
  padding-right: 0 !important;
  padding-left: 0 !important; }

/**
Extra large bottom margin to distinguish sections
*/
.landmark {
  margin-bottom: 56px; }