@import url(//fonts.googleapis.com/css?family=Ubuntu:300,400,700,300italic,400italic,700italic);

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
	color: #5a5a5a;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	background-color: #e5e5e5;
	background-attachment: fixed;
	background-position: center center;
	padding: 100px 0 0 200px;
	color: #5a5a5a;
}

::selection {
	color: #fff;
	background-color: #ffa766;
}

::-moz-selection {
	color: #fff;
	background-color: #ffa766;
}

a img {
	border: 0;
}

input, textarea {
	border-radius: 5px;
}

.bold {
	font-weight: 700;
}

.light {
	font-weight: 300;
}

.italic {
	font-style: italic;
}

.hidden {
	display: none;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: block;
}

button:hover {
	cursor: pointer;
}

#sideBar {
	height: 100%;
	width: 200px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #5a5a5a;
	box-shadow: inset -50px 0 60px -30px #333;
	z-index: 5000;
}

#logoSmall {
	position: relative;
	top: 20px;
	left: 0;
	width: 210px;
	height: 60px;
	background-color: #00c5da;
	padding: 7.5px 10px;
	border-bottom: 5px solid #ff7800;
	z-index: 4;
}

#logoSmall img {
	width: 190px;
	height: 40px;
}

.wrapper {
	width: 100%;
	min-height: 500px;
	max-width: 1360px;
	padding: 20px;
}

.wrapper.maxWrap {
	max-width: none;
}

#topBar {
	width: 100%;
	max-width: 1560px;
	margin-bottom: 20px;
	background-color: #e5e5e5;
	padding: 20px 20px 0 220px;
	position: fixed;
	top: 0;
	left: 0 !important;
	height: auto;
	z-index: 4000;
}

.wrapper.maxWrap div#topBar {
	max-width: none;
}

#topBar div#topBarInner {
	background-color: #fff;
	border-radius: 5px;
	min-height: 80px;
	padding: 0 80px 0 80px;
	position: relative;
	box-shadow: 0px 15px 0px -10px #b2bac2;
}

#topBar div#topBarInner svg {
	height: 60px;
	width: auto;
	max-width: 60px;
	position: absolute;
	top: 10px;
	left: 10px;
}

#topBar div#topBarInner svg * {
	fill: #00c5da;
}

#topBar div#globalSpin {
	height: 80px;
	width: 80px;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -40px;
	background-color: none;
	box-shadow: none;
	padding: 0;
	border-radius: 5px;
}

#topBar h3 {
	font-size: 1.5em;
	height: 80px;
	line-height: 80px;
}

#topBar h3.userName {
	float: right;
}

#topBar h3.pageName {
	float: left;
}

#menuButtonBar {
	display: none;
}

#menuButtonBar img {
	float: right;
	height: 40px;
	width: auto;
}

#footer {
	text-align: center;
	clear: both;
}

#footer p {
	color: #b2bac2;
	font-size: 14px;
}

#footer a {
	color: #b2bac2;
}

.container {
	width: 100%;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 20px;
	padding: 20px;
	position: relative;
	box-shadow: 0px 15px 0px -10px #b2bac2;
}

.fullContainer {
	clear: both;
	margin: 0 auto 20px auto;
}

.centreContainer {
	width: 80%;
	min-height: 100px;
	margin: auto;
	margin-bottom: 20px;
	clear: both;
}

.maxContainer {
	width: 100%;
}

.centreHalfContainerLeft {
	width: 39%;
	float: left;
	margin-left: 10%;
	min-height: 200px;
	clear: left;
}

.centreHalfContainerRight {
	width: 39%;
	float: right;
	margin-right: 10%;
	min-height: 200px;
	clear: right;
}

.containerTab {
	margin: 0 auto;
	width: 70%;
	padding: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	background-color: #abdbe1;
	text-align: center;
	border-bottom: 2px solid #ff7800;
}

.container ol,
.container ul,
.container h3 {
	margin: 0 0 20px 0;
}

.container li {
	margin: 0 0 10px 0;
}

.container ol,
.container ul {
	padding: 0 0 0 40px;
}

.quizContainer {
	width: 100%;
	padding-bottom: 90px;
	padding-top: 62px;
	min-height: 400px;
	display: none;
}

.quizButton {
	width: 30%;
	position: absolute;
	bottom: 20px;
	font-size: 14px !important;
	padding: 10px !important;
}

.quizButton.next,
.quizButton.finish {
	right: 20px;
}

.quizButton.finish {
	background-color: #ff7800;
	color: white;
}

.quizAnswer {
	width: 100%;
	min-height: 50px;
	background-color: #abdbe1;
	margin-bottom: 5px;
	padding: 15px;
}

div.quizAnswer:last-of-type {
	margin-bottom: 20px;
}

.quizAnswer:hover {
	cursor: pointer;
	background-color: #7ed6e1;
}

.quizAnswer p {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	max-width: none !important;
}

.quizAnswer.selected {
	background-color: #ff7800;
}

.quizAnswer.selected p {
	color: #fff;
}

.quizAnswer:first-of-type {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.quizAnswer:last-of-type {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.answers {
	margin: auto;
	width: 100%;
}

/*button.markQuestion {
	background-color: #abdbe1;
	padding: 10px;
	border-radius: 5px;
	border: 0;
	font-weight: 700;
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 30%;
	font-size: 14px !important;
}*/

/*button.markQuestion:hover {
	background-color: #00c5da;
	color: #fff;
	cursor: pointer;
}*/

h3.quizQuestion {
	padding-bottom: 20px;
}

ul.quizSortableList {
	list-style: none;
	padding: 0;
}

ul.quizSortableList li {
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	background-color: #abdbe1;
	background-image: url(../img/dragHandle.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	margin: 0;
	margin-bottom: 5px;
	font-weight: 700;
	padding-left: 50px;
}

ul.quizSortableList li:first-child {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

ul.quizSortableList li:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

ul.quizSortableList li:hover {
	cursor: pointer;
	background-color: #7ed6e1;
}

ul.quizSortableList li.ui-sortable-helper {
	box-shadow: 0 5px 20px #5a5a5a;
}

.answerButton {
	width: 100%;
	font-size: 1.4em;
	padding: 20px;
	background-color: #e5e5e5;
	border: 0;
}

.answerButton:not(.selected):hover {
	background-color: #abdbe1;
}

.false {
	border-top: 1px solid #fff;
}

.selected {
	background-color: #00c5da;
	color: #fff;
}

div.endQuizNav {
	width: 100%;
	height: 140px;
	max-width: 300px;
	margin: 50px auto;
}

button.endQuizNav {
	width: 50%;
	max-width: 140px;
	height: 140px;
	margin-right: 20px;
	border-radius: 80px;
	display: block;
	float: left;
	position: relative;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	overflow: visible;
}

button.endQuizNav:hover {
	background-color: #fff;
}

button.endQuizNav:hover span.nextLessonLabel {
	background-color: #abdbe1;
}

button.lessonsPageButton {
	background-image: url(../img/quizNavLesson.svg);
}

/*button.lessonsPageButton:hover {
	background-image: url(../img/quizNavLesson2.png);
}*/

button.nextLessonButton {
	background-image: url(../img/quizNavNext.svg);
}

/*button.nextLessonButton:hover {
	background-image: url(../img/quizNavNext2.png);
}*/

button.endQuizNav span.nextLessonLabel {
	display: block;
	position: absolute;
	top: 145px;
	left: 0;
	width: 140px;
	padding: 5px;
	border-radius: 5px;
	background-color: inherit;
	color: #abdbe1;
}

button.endQuizNav:hover span.nextLessonLabel {
	color: #fff;
}

button.endQuizNav.nextLessonButton {
	margin: 0;
}

a.endQuizNav {
	text-decoration: none;
}

#profilePicDisplay {
	width: 70px;
	height: 70px;
	border-radius: 35px;
	position: absolute;
	top: 5px;
	right: 5px;
}

#questionForm label {
	display: block;
	margin-bottom: 20px;
}

#questionForm textarea {
	height: 200px;
	width: 100%;
	max-width: 500px;
	padding: 20px;
	font-size: 16px;
	margin-bottom: 20px;
}

.containerTitle {
	background-color: #abdbe1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #fff;
	color: #5a5a5a;
	margin-bottom: 20px;
	font-size: 20px;
	line-height: 20px;
	white-space: nowrap;
	border-bottom: 2px solid #ff7800;
	z-index: 2;
}

.titleContainer {
	padding-top: 80px;
}

div.container.titleOnly {
	min-height: 62px;
	padding: 0;
}

div.container.titleOnly h2.containerTitle {
	margin-bottom: 0;
	border-radius: 5px;
}

div.profileEditButtons {
	position: absolute;
	height: 20px;
	top: 20px;
	right: 20px;
}

.profileEditButton {
	height: 20px;
	float: right;
	padding: 0 20px;
	border: 0;
	border-radius: 3px;
	background-color: #73c3cc;
	margin-left: 10px;
}

.profileEditButton:hover {
	background-color: #00c5da;
	color: white;
}

#profilePicPreview {
	width: 100%;
	max-width: 400px;
	max-height: 400px;
	height: auto;
	border-radius: 200px;
	display: block;
	margin: auto;
}

#profilePicUpload {
	display: none;
}

.container p {
	max-width: 800px;
	font-size: 20px;
	color: #5a5a5a;
	margin-bottom: 20px;
}

.container p:last-child {
	margin-bottom: 0;
}

.container div.demoImageWrap {
	height: 100%;
	width: 270px;
	text-align: center;
	overflow: hidden;
	position: absolute;
	padding: 62px 0 0 0;
	top: 0;
	left: 0;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	background-image: url(../img/demoImage.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 40px;
	z-index: 1;
}

.container img.demoImage {
	float: left;
	height: 100%;
	width: auto;
	position: relative;
	margin: auto;
	left: 50%;
	margin-left: -150px;

}

.container p.introText {
	padding: 0 0 0 270px;
	max-width: 100%;
}

#navigation {
	overflow: auto;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding-top: 100px;
}

#navList {
	list-style: none;
}

#navList a {
	display: block;
	width: 100%;
}

#navList li {
	display: block;
	height: 80px;
	width: 100%;
	font-weight: 700;
	font-size: 0.9em;
	color: #c7c7c7;
	padding: 0 10px 0 80px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	background-size: 60px 60px;
	position: relative;
}

#navList li span {
	height: 80px;
	display: table-cell;
	vertical-align: middle;
	color: #c7c7c7;
}

#navList li:hover {
	background-color: #00c5da;
	cursor: pointer;
}

#navList a {
	text-decoration: none;
}

#navList li:hover span {
	color: #fff;
}

li.nav svg {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 10px;
	left: 10px;
}

li.nav:hover * {
	fill: #ffffff !important;
}

#navList.su li {
   height: 60px;
   padding: 0 10px 0 60px;
   background-position: 5px 5px;
   background-size: 50px 50px;
   font-size: 1em;
}

#navList.su li span {
   height: 60px;
}

#navList.su li {
   height: 40px;
   padding: 0 10px 0 40px;
   background-position: 5px 5px;
   background-size: 30px 30px;
}

#navList.su li.nav svg {
   width: 30px;
   height: 30px;
   top: 5px;
   left: 5px;
}

#navList.su li span {
   height: 40px;
}

.tinyButton {
	height: 20px;
	float: right;
	padding: 0 20px;
	border: 0;
	border-radius: 3px;
	background-color: #73c3cc;
	margin-left: 10px;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -10px;
}

.tinyButton:hover {
	background-color: #00c5da;
	color: #fff;
}

.tinyButton:active {
	background-color: #008c9b;
	color: #fff;
}

.tinyButton.delete {
	background-color: #d66565;
	color: #fff;
}

.tinyButton.delete:hover {
	background-color: #bc3232;
}

.tinyButton.delete:active {
	background-color: #802222;
}

.actionButton {
	padding: 20px 30px;
	background-color: #abdbe1;
	border: 0;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 700;
	color: #5a5a5a;
}

.actionButton:hover {
	background-color: #00c5da;
	color: #fff;
}

.actionButton:active {
	background-color: #008c9b;
}

button#showMenuButton {
	height: 40px;
	border: 0;
	margin-right: 20px;
	display: inline;
	padding: 0 40px;
}

.lessonPreview {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
}

.lessonPreviewLine {
	height: 6px;
	width: 80%;
	background-color: #00c5da;
	position: absolute;
	margin: auto;
	top: 40px;
	left: 10%;
	margin-top: -3px;
	z-index: 0;
}

.lessonPreviewLine.available {
	background-color: #abdbe1;
}

.lessonPreviewLine.inprogress {
	background-color: #ff7800;
}

.lessonPreviewSixth {
	height: 100%;
	width: 16.66666666%;
	float: left;
	overflow: hidden;
	text-align: center;
	position: relative;
	z-index: 2;
}

.lessonPreviewSixth div.previewIcon {
	height: 80px;
	width: 80px;
	border-radius: 40px;
	border: 5px solid #00c5da;
	z-index: 2;
	background-color: #fff;
	margin: auto;
	background-size: 70px;
	background-position: center;
	background-size: contain;
	position: relative;
}

.lessonPreviewSixth div.previewIcon svg {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 5px;
	left: 5px;
}

.lessonPreviewSixth div.previewIcon.complete svg * {
	fill: #00c5da;
}

.lessonPreviewSixth div.previewIcon.inprogress svg * {
	fill: #ff7800;
}

.lessonPreviewSixth div.previewIcon.available svg * {
	fill: #abdbe1;
}

.lessonPreviewSixth:hover div.previewIcon svg * {
	fill: #ff7800;
}

/*

.lessonPreviewSixth div.lessonPreviewVideo {
	background-image: url(../img/lessonPreviewGoodPractice.png);
}

.lessonPreviewSixth div.lessonPreviewVideo {
	background-image: url(../img/lessonPreviewGoodPractice.png);
}

.lessonPreviewSixth div.lessonPreviewVideo.available {
	background-image: url(../img/lessonPreviewGoodPracticeLighter.png);
}

.lessonPreviewSixth:hover div.lessonPreviewVideo,
.lessonPreviewSixth div.lessonPreviewVideo.inprogress {
	background-image: url(../img/lessonPreviewGoodPracticeOrange.png);
}

.lessonPreviewSixth div.lessonPreviewReading {
	background-image: url(../img/lessonPreviewReading.png);
}

.lessonPreviewSixth div.lessonPreviewReading.available {
	background-image: url(../img/lessonPreviewReadingLighter.png);
}

.lessonPreviewSixth:hover div.lessonPreviewReading,
.lessonPreviewSixth div.lessonPreviewReading.inprogress {
	background-image: url(../img/lessonPreviewReadingOrange.png);
}

.lessonPreviewSixth div.lessonPreviewPresentation {
	background-image: url(../img/lessonPreviewPresentation.png);
}

.lessonPreviewSixth div.lessonPreviewPresentation.available {
	background-image: url(../img/lessonPreviewPresentationLighter.png);
}

.lessonPreviewSixth:hover div.lessonPreviewPresentation,
.lessonPreviewSixth div.lessonPreviewPresentation.inprogress {
	background-image: url(../img/lessonPreviewPresentationOrange.png);
}

.lessonPreviewSixth div.lessonPreviewGoodPractice {
	background-image: url(../img/lessonPreviewGoodPractice.png);
}

.lessonPreviewSixth div.lessonPreviewGoodPractice.available {
	background-image: url(../img/lessonPreviewGoodPracticeLighter.png);
}

.lessonPreviewSixth:hover div.lessonPreviewGoodPractice,
.lessonPreviewSixth div.lessonPreviewGoodPractice.inprogress {
	background-image: url(../img/lessonPreviewGoodPracticeOrange.png);
}

.lessonPreviewSixth div.lessonPreviewFurther {
	background-image: url(../img/lessonPreviewFurther.png);
}

.lessonPreviewSixth div.lessonPreviewFurther.available {
	background-image: url(../img/lessonPreviewFurtherLighter.png);
}

.lessonPreviewSixth:hover div.lessonPreviewFurther,
.lessonPreviewSixth div.lessonPreviewFurther.inprogress {
	background-image: url(../img/lessonPreviewFurtherOrange.png);
}

.lessonPreviewSixth div.lessonPreviewQuiz {
	background-image: url(../img/lessonPreviewQuiz.png);
}

.lessonPreviewSixth div.lessonPreviewQuiz.available {
	background-image: url(../img/lessonPreviewQuizLighter.png);
}

.lessonPreviewSixth:hover div.lessonPreviewQuiz,
.lessonPreviewSixth div.lessonPreviewQuiz.inprogress {
	background-image: url(../img/lessonPreviewQuizOrange.png);
}

*/

.lessonPreviewSixth div.available {
	border-color: #abdbe1;
}

.lessonPreviewSixth div.inprogress {
	border-color: #ff7800;
}

.lessonPreviewSixth:last-child {
	border: 0;
}

span.dragMe {
	z-index: 50;
	display: inline-block;
	background-color: #abdbe1;
	border-radius: 5px;
	padding: 0 20px;
	margin-bottom: 4px;
	font-size: 20px;
	line-height: 30px;
	height: 30px;
}

span.dragMe:hover {
	background-color: #7ed6e1;
	cursor: pointer;
}

.wordContainer {
	margin-bottom: 20px;
	min-height: 36px;
}

p.fillTheGaps {
	font-size: 34px !important;
	line-height: 48px;
	max-width: none;
}

span.gap {
	display: inline-block;
	min-width: 150px;
	border-bottom: 2px solid #ff7800;
	text-align: center;
	height: 30px;
}

.gapHover {
	background-color: #ff7800;
}

.leftSide,
.rightSide {
	width: 46%;
	float: left;
}

.rightSide {
	float: right;
}

.leftItem,
.rightItem {
	min-height: 70px;
	text-align: center;
	padding: 20px;
	width: 100%;
	background-color: #abdbe1;
	border-radius: 5px;
	margin: 0 auto 5px auto;
	display: table;
	z-index: 1;
}

.leftItem:hover,
.rightItem:hover {
	background-color: #73d6e1;
	cursor: pointer;
}

.leftItem p,
.rightItem p {
	display: table-cell;
	vertical-align: middle;
}

.ui-draggable-dragging {
	z-index: 8000;
	opacity: 0.7;
}

.itemHover {
	background-color: #ff7800;
}

.joined div.leftItem, .joined div.rightItem {
	float: left;
	z-index: 1;
}

.joined div.rightItem {
	float: right;
}

.joinedContainer {
	position: relative;
}

.joinedContainer button {
	height: 30px;
	width: 30px;
	position: absolute;
	top: 50%;
	margin-top: -18px;
	left: 50%;
	margin-left: -15px;
	background: #e3e3e3;
	border: 0;
	border-radius: 15px;
	color: #5a5a5a;
	font-size: 0.7em;
	z-index: 8001;
}

.joinedContainer div.leftItem {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 50%;
}

.joinedContainer div.rightItem {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 2px solid #fff;
	width: 50%;
}

.joinedContainer button:hover {
	cursor: pointer;
	background-color: #5a5a5a;
	color: #fff;
}

.joinedContainer button:active {
	background-color: #5a5a5a;
	color: #e3e3e3;
}

#spinner {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	margin-top: -100px;
	left: 50%;
	margin-left: -100px;
}

div.quizContainer.results h2.resultsTitle {
	margin-bottom: 20px;
}

div.quizContainer.results h2.resultsTitle,
div.quizContainer.results p.results,
div.quizContainer.results p.postResultsAdvice {
	text-align: center;
	max-width: none;
}

div.quizContainer.results h2.resultsTitle.resultsSuccess,
div.quizContainer.results h2.resultsTitle.resultsSuccess span {
	color: #00c5da;
}

div.quizContainer.results h2.resultsTitle.resultsTryAgain,
div.quizContainer.results h2.resultsTitle.resultsTryAgain span {
	color: #ff7800;
}

div.segmentLabel {
	margin: 5px auto 0 auto;
	background-color: #00c5da;
	border-radius: 5px;
	width: 95%;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	display: table;
}

p.segmentLabel {
	font-size: 12px !important;
	color: white;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

p.segmentLabel.available {
	color: #5a5a5a;
}

div.segmentLabel.available {
	background-color: #abdbe1;
}

div.segmentLabel.inprogress {
	background-color: #ff7800;
}

.lessonPreviewSixth:hover {
	cursor: pointer;
}

.lessonPreviewSixth:hover div.previewIcon {
	border-color: #ff7800;
}

.lessonPreviewSixth:hover div.segmentLabel {
	background-color: #ff7800;
}

.lessonPreviewSixth:hover p.segmentLabel {
	color: #fff;
}

.lessonPreviewSixth:active div.previewIcon {
	border-color: #c95f00;
}

.lessonPreviewSixth:active div.segmentLabel {
	background-color: #c95f00;
}

.lessonPreviewSixth:active div.previewIcon svg * {
	fill: #c95f00;
}

@keyframes progressMove {
	from {
		background-position: 0px;
	}
	to {
		background-position: 30px;
	}
}
@-webkit-keyframes progressMove {
	from {
		background-position: 0px;
	}
	to {
		background-position: 30px;
	}
}
@keyframes progressLoad {
	from { width: 0%; }
	to { width: 100%; }
}

@-webkit-keyframes progressLoad {
	from { width: 0%; }
	to { width: 100%; }
}

.progressOuter {
	width: 100%;
	height: 50px;
	background-color: #5a5a5a;
	box-shadow: inset 0 8px 8px -8px #000;
	border-radius: 25px;
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
}

.progress {
	height: 100%;
	width: 0%;
}

.progressInner {
	height: 100%;
	width: 100%;
	box-shadow: 0 0 8px #000;
	background-color: #00c5da;
	background-image: url('../img/progressBarBGLight.png');
	animation: progressMove 1.5s linear infinite, progressLoad 1s ease 1;
	-webkit-animation: progressMove 1.5s linear infinite, progressLoad 1s ease 1;
}

p.progressNumber {
	text-align: center;
	width: 100%;
	height: 100%;
	line-height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	font-size: 24px;
	color: #fff;
	max-width: none;
	margin: 0;
	text-shadow: 0 0 6px #5a5a5a;
}

p.progressMessage {
	max-width: none;
	width: 100%;
	text-align: center;
}

img.lessonStatusImage {
	width: 50px;
	height: 50px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}

p.lessonStatus {
	font-weight: 700;
	position: absolute;
	height: 50px;
	line-height: 50px;
	bottom: 10px;
	right: 70px;
	margin-bottom: 0;
}

p.lessonStatus.available {
	color: #abdbe1;
}

p.lessonStatus.inprogress {
	color: #ff7800;
}

p.lessonStatus.complete {
	color: #00c5da;
}

.lessonWrap {
	padding-right: 270px;
	position: relative;

}

.lessonNav {
	width: 250px;
	position: absolute;
	top: 0;
	right: 0;
}

.lessonNav p {
	line-height: 20px;
	min-height: 90px;
}

button.lessonNavButton {
	width: 50%;
	height: 60px;
	border: 0;
	font-size: 0.9em;
	float: left;
	padding: 0;
	font-weight: 300;
}

button.lessonNavButton.next {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 1px solid #fff;
}

button.lessonNavButton.prev {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

button.lessonNavButton.prev[disabled],
button.lessonNavButton.next[disabled],
button.actionButton[disabled] {
	background-color: lightgrey;
}

button.lessonNavButton.prev[disabled]:hover,
button.lessonNavButton.next[disabled]:hover,
button.actionButton[disabled]:hover {
	color: #5a5a5a;
	cursor: auto;
}

.subscript {
	font-size: 0.7em;
	line-height: inherit;
	font-weight: 300;
}

.videoWrap,
.downloadWrap {
	border: 10px solid #abdbe1;
	border-radius: 5px;
	max-width: 1280px;
	width: 100%;
	margin-bottom: 20px;
}

.videoWrap.tutorialVideoWrap {
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.videoQualityControls {
	width: 100%;
	height: auto;
	position: relative;
	top: -20px;
	background-color: #abdbe1;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 0 10px 10px 10px;
}

.videoQualityControls button.videoQuality {
	padding: 5px;
	width: 55px;
	margin-left: 2px;
	background-color: #abdbe1;
	border-radius: 0;
	border: 2px #979797 solid;
	color: #979797;
	border-radius: 5px;
	font-weight: 700;
	font-size: 14px;
}

.videoQualityControls button.videoQuality.selected {
	border-color: #ff7800;
	color: #ff7800;
}

.videoQualityControls button.videoQuality:hover {
	border-color: #ff7800;
	color: #ff7800;
}

div.videoSources {
	display: none;
}

.downloadWrap svg * {
	fill: #00c5da;
}

video {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.youtubeWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.youtubeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.downloadWrap {
	max-width: 150px;
   max-height: 150px;
	height: auto;
	float: left;
	margin-right: 20px;
}

.downloadWrap img {
	width: 100%;
	height: auto;
	display: block;
}

.downloadWrap a,
.downloadWrap a svg {
   width: 100%;
   max-height: 130px;
}

.downloadItem:last-of-type .downloadWrap {
	margin-bottom: 0;
}
div.downloadItem {
	margin-bottom: 20px;
}

div.downloadItem:last-child {
	margin-bottom: 0;
}

div.downloadItem p,
div.downloadItem ul,
div.downloadItem ol {
	margin-left: 170px;
}

a.lessonLink {
	word-wrap: break-word;
}

.nextQuestion {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

/*form#changePassword label,
form#changePassword input {
	width: 100%;
	max-width: 500px;
	margin: auto;
}*/

form#changePassword label {
	display: block;
	margin-bottom: 5px;
}

form#changePassword input {
	display: block;
	margin-bottom: 20px;
	height: 40px;
	width: 100%;
	max-width: 500px;
	font-size: 22px;
	text-align: center;
	color: #5a5a5a;
	border: 1px solid #5a5a5a;
	border-radius: 5px;
}

/*button.changePasswordButton {
	margin: auto;
	display: block;
}*/

p.passwordWarning,
p.passwordSuccess {
	width: 80%;
	color: #ff7800;
	padding: 20px;
	border: 2px solid #ff7800;
	max-width: 100%;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	background-color: #ffefe0;
	margin: 0 auto 20px auto;
}

p.passwordSuccess {
	color: #00c5da;
	background-color: #dcf2f5;
	border-color: #00c5da;
}

img.supportImage {
	display: block;
	/*border: 1px solid #5a5a5a;*/
	border-radius: 5px;
}

img.supportImage.centre {
	max-width: 80%;
	height: auto;
	margin: 0 auto 20px auto;
}

img.supportImage.portrait {
	height: auto;
	width: auto;
	float: left;
	margin: 0 20px 20px 0;
}

img.supportImage.standard {
	height: auto;
	width: auto;
	max-width: 100%;
	margin: 0 20px 20px 0;
}

h3.supportTitle {
	border-bottom: 2px solid #ff7800;
	padding: 10px;
	background-color: #abdbe1;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

div.adminList {
	margin-bottom: 20px;
}

div.profileDetailsDisplay p,
div.myOrg p,
div.regionList p,
div.workplaceList p,
div.adminList p {
	font-size: 15px;
	background-color: #ddfbff;
	padding: 5px;
	margin: 0;
	position: relative;
	width: 100%;
	max-width: auto;
}

div#profileDetailsDisplay p,
div.myOrg p,
div.regionList p,
div.workplaceList p {
	max-width: 100%;
}

div.profileDetailsDisplay p:nth-child(odd),
div.myOrg p:nth-child(odd),
div.regionList p:nth-child(odd),
div.workplaceList p:nth-child(odd),
div.adminList p:nth-child(odd) {
	background-color: #c2eef4;
}

div.profileDetailsDisplay p:first-of-type,
div.myOrg p:first-of-type,
div.regionList p:first-of-type,
div.workplaceList p:first-of-type,
div.adminList p:first-of-type {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

div.profileDetailsDisplay p:last-of-type,
div.myOrg p:last-of-type,
div.regionList p:last-of-type,
div.workplaceList p:last-of-type,
div.adminList p:last-of-type {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

button.deleteWorkplace,
button.deleteRegion,
button.deleteAdmin,
button.resendEmail {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 25px;
	background-color: inherit;
	border: 0;
	border-left: 2px solid #fff;
	background-image: url(../img/trashTinyGrey.png);
	background-size: 13px 20px;
	background-repeat: no-repeat;
	background-position: center;
}

button.resendEmail {
	right: 25px;
	background-image: url(../img/resendEmail.png);
}

div.regionList p:first-of-type button,
div.workplaceList p:first-of-type button,
div.adminList p:first-of-type button:not(.resendEmail) {
	border-top-right-radius: 5px;
}

div.regionList p:last-of-type button,
div.workplaceList p:last-of-type button,
div.adminList p:last-of-type button:not(.resendEmail) {
	border-bottom-right-radius: 5px;
}

button.deleteWorkplace:hover,
button.deleteRegion:hover,
button.deleteAdmin:hover,
button.resendEmail:hover {
	cursor: pointer;
	background-color: #ff7800;
	background-image: url(../img/trashTinyWhite.png);
}

button.resendEmail:hover {
	background-image: url(../img/resendEmailWhite.png);
}

button.deleteWorkplace:active,
button.deleteRegion:active,
button.deleteAdmin:active,
button.resendEmail:active {
	background-color: #c95f00;
}

button.deleteWorkplace span,
button.deleteRegion span,
button.deleteAdmin span,
button.resendEmail span {
	display: none;
}

div.regionAdd,
div.workplaceAdd {
	margin-top: 20px;
}

div.profileDetailsDisplay p span,
div.myOrg p span {
	display: inline-block;
	min-width: 210px;
	text-align: left;
}

div.addLearner label,
div.addAdmin label,
div.regionAdd label,
div.workplaceAdd label,
div.purchaseLicences label {
	display: block;
	height: 14px;
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 10px;
}

div.addLearner input,
div.addAdmin input,
div.regionAdd input,
div.workplaceAdd input,
div.purchaseLicences input {
	display: block;
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #5a5a5a;
	font-size: 14px;
	border-radius: 5px;
}

div.addLearner select,
div.purchaseLicences select,
div.workplaceAdd select {
	display: block;
	width: 100%;
	height: 30px;
	border: 1px solid #5a5a5a;
	margin-bottom: 20px;
}

div.purchaseLicences p {
	font-size: 15px;
}

p.orderSubmitMessage {
	display: none;
	font-weight: 700;
}

div.transaction {
	margin-bottom: 5px;
	background-color: #c2eef4;
}

div.transaction:nth-child(even) {
	background-color: #ddfbff;
}

div.transaction:first-of-type {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

div.transaction:last-of-type {
	margin-bottom: 0;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

div.transaction p {
	font-size: 14px;
	margin-bottom: 0;
}

div.transaction:hover {
	background-color: #00c5da;
}

div.transaction:hover p {
	color: #fff;
}

div.transactInfo {
	width: 16.666666666666666%;
	padding: 5px;
	display: inline-block;
	border-right: 5px solid #fff;
}

div.transactInfo:last-child {
	border: 0;
}

div.pending {
	margin-bottom: 20px;
}

div.pendingOrder,
div.completedOrder {
	border: 2px solid #abdbe1;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 35px 5px 5px;
	position: relative;
}

div.pendingOrder:hover,
div.completedOrder:hover {
	border-color: #ff7800;
}

div.pendingOrder:last-child,
div.completedOrder:last-child {
	margin-bottom: 0;
}

div.pendingOrder h3,
div.completedOrder h3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #abdbe1;
	border-bottom: 2px solid #ff7800;
	border-top-right-radius: 2px;
	border-top-left-radius: 2px;
	padding: 5px 10px;
	font-size: 0.9em;
}

div.pendingOrder p,
div.completedOrder p {
	margin-bottom: 3px;
	width: 100%;
	/*float: left;*/
	font-size: 0.7em;
}

button.generateInvoice,
button.paymentReceived {
	display: block;
	float: left;
	clear: both;
}

button.paymentReceived {
	float: right;
	/*clear: right;*/
}

p.addLearnerMessage,
p.addAdminMessage {
	display: none;
	font-weight: 700;
	font-size: 14px;
}

form#certificateDownloadForm input[type=checkbox]{
	margin: 10px 10px 10px 0;
	float: left;
}

form#certificateDownloadForm label {
	margin-bottom: 20px;
	display: block;
}

a.certificateLink {
	text-decoration: none;
}

form#certificateDownloadForm button.downloadCertificate {
	margin-bottom: 10px;
	width: 100%;
	max-width: 255px;
}

h3.otherDownloads {
	border-bottom: 2px solid #ff7800;
	margin-top: 20px;
	margin-bottom: 20px;
}

p.otherDownloads {
	font-size: 16px;
}

p.otherDownloads:last-of-type {
	margin-bottom: 0;
}

div.IE8Blocker {
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000000;
	text-align: center;
	padding: 20px 10%;
}

div.IE8Blocker p {
	font-size: 20px;
	margin-bottom: 20px;
	line-height: 30px;
}

div.browsers {
	width: 100%;
	margin: 40px 0;
}

div.IE8Blocker div.browsers a img.browserImage {
	width: 14%;
	margin: 20px 1.33333333%;
	display: inline;
	height: auto;
	float: left;
	border: 0;
}

div.IE8Blocker div.browsers a {
	border: 0;
}

div.lessonOverviewWrap {
   margin-bottom: 20px;
   border: 2px solid #abdbe1;
   padding: 60px 20px 20px 20px;
   position: relative;
   border-radius: 5px;
}

div.lessonOverviewWrap h3:first-child {
   position: absolute;
   top: 0;
   left: 0;
   font-size: 20px;
   line-height: 20px;
   padding: 10px 20px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   background-color: #abdbe1;
   border-bottom: 2px solid #ff7800;
   width: 100%;
}

p.standardsMap {
   font-size: 15px;
}

p.standardsMap a {
   color: #00c5da;
}

div.segmentOverviewDescription {
   font-size: 12px;
}

div.segmentOverviewDescription h3:first-child {
   font-size: 13px;
   position: relative;
   background-color: transparent;
   border: 0;
   width: auto;
   margin: initial;
}

div.segmentOverviewWrap {
   display: none;
   margin-top: 20px;
}

div.segmentOverview {
   padding: 10px;
   border-radius: 5px;
   background-color: #abdbe1;
   margin-bottom: 5px;
}

div.segmentOverview:last-child {
   margin-bottom: 0;
}

img.segmentPreviewVideo {
   width: 350px;
   height: auto;
   /*border: 1px solid #5a5a5a;*/
   border-radius: 5px;
   margin: 10px 0 20px 0;
   box-shadow: 0px 15px 0px -10px #b2bac2;
}

p.videoPreviewLabel {
   font-size: 13px;
   margin: 20px 0 0 0;
}

div.mediaItem {
   padding: 20px 0 0 0;
}

div.mediaItem p {
   font-size: 13px;
}

div.mediaIcon {
   background-color: white;
   width: 80px;
   height: 80px;
   border: 5px solid #00c5da;
   border-radius: 5px;
   margin: 0 10px 10px 0;
   float: left;
}

div.container.whatNext p {
   font-size: 15px
}

div.container.whatNext p:last-of-type {
   margin-bottom: 0;
}

p.quizQualification {
	font-size: 0.9em;
}

div.learnerProgressTable {
	width: 100%;
	float: right;
}

div.lessonRow {
	width: 100%;
	height: 30px;
	border-bottom: 2px solid #fff;
}

div.cell {
	width: 13%;
	height: inherit;
	background-color: #abdbe1;
	float: left;
	padding: 0 5px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

div.cell.segmentComplete {
	background-color: #ff7800;
}

div.cell:last-child {
	border-right: 0;
}

div.cell p {
	font-size: 11px;
	color: #5a5a5a !important;
	height: 30px;
	line-height: 30px;
	font-weight: 100;
}

div.cell.segmentComplete p {
	color: #fff !important;
}

div.cell.lessonTitle {
	width: 9%;
}

div.cell.lessonTitle p {
	font-weight: 700;
}

div.titleCell p {
	font-weight: 700;
}

div.cell.titleCell:first-child {
	border-top-left-radius: 5px;
}

div.cell.titleCell:last-child {
	border-top-right-radius: 5px;
}

div.lessonRow:last-child div.lessonTitle {
	border-bottom-left-radius: 5px;
}

div.lessonRow:last-child div.cell:last-child {
	border-bottom-right-radius: 5px;
}

@media screen and (max-width: 1123px) {
	.lessonPreviewSixth div.previewIcon {
		height: 60px;
		width: 60px;
		background-size: 50px;
		background-position: center;
		background-size: contain;
	}
	.lessonPreviewSixth div.previewIcon svg {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 5px;
		left: 5px;
	}
	.lessonPreviewLine {
		top: 30px;
	}
	.centreContainer {
		width: 90%;
	}
	.centreHalfContainerLeft {
		width: 44%;
		margin-left: 5%;
	}
	.centreHalfContainerRight {
		width: 44%;
		margin-right: 5%;
	}
	p.passwordWarning,
	p.passwordSuccess {
		width: 90%;
	}
	.containerTab {
		width: 80%;
	}
}

@media screen and (max-width: 1023px) {
	.halfContainer {
		width: 100%;
		margin: 0;
		margin-bottom: 20px;
	}
	.centreContainer {
		width: 100%;
	}
	.centreHalfContainerLeft {
		width: 49%;
		margin-left: 0%;
	}
	.centreHalfContainerRight {
		width: 49%;
		margin-right: 0%;
	}
	p.passwordWarning,
	p.passwordSuccess {
		width: 100%;
	}
	#navList li {
		height: 60px;
		padding: 0 10px 0 60px;
		background-position: 5px 5px;
		background-size: 50px 50px;
		font-size: 1em;
	}
	#navList li span {
		height: 60px;
	}
	.container p {
		font-size: 18px;
	}
	.lessonPreviewSixth div.previewIcon {
		border-width: 4px;
		background-size: 52px;
		background-position: center;
		background-size: contain;
	}
	.lessonPreviewLine {
		height: 4px;
		margin-top: -2px;
	}
	.lessonWrap {
		padding-right: 0;
	}
	.lessonNav {
		width: 100%;
		position: relative;
		top: 0;
		right: auto;
		left: 0;
	}
	.lessonNav p {
		font-size: 1.3em !important;
		min-height: 0;
	}
	#navList li {
		height: 40px;
		padding: 0 10px 0 40px;
		background-position: 5px 5px;
		background-size: 30px 30px;
	}
	li.nav svg {
		width: 30px;
		height: 30px;
		top: 5px;
		left: 5px;
	}
	#navList li span {
		height: 40px;
	}
	.containerTab {
		width: 90%;
	}
	#topBar h3 {
		font-size: 16px;
	}
}

@media screen and (max-width: 768px) {
	body {
		padding: 0;
	}
	#topBar {
		position: relative;
		top: 0;
		left: 0 !important;
		padding: 0;
		height: auto;
	}
	.centreContainer {
		width: 100%;
	}
	.centreHalfContainerLeft {
		width: 100%;
		margin-left: 0%;
		float: none;
	}
	.centreHalfContainerRight {
		width: 100%;
		margin-right: 0%;
		float: none;
	}

	.containerTitle {
		font-size: 12px;
		line-height: 12px;
		padding: 12px 20px;
	}
	
	.titleContainer {
		padding-top: 62px;
	}
	div.container.titleOnly {
		min-height: 44px;
		padding: 0;
	}
	#logoSmall {
		width: 200px;
	}
	#logoSmall img {
		width: 180px;
		height: 38px;
	}
	body,
	#topBar,
	#sideBar {
		transition: left 0.3s linear;
		-webkit-transition: left 0.3s linear;
	}
	#topBar {
		left: 0px;
	}
	#menuButtonBar {
		display: block;
	}
	body {
		position: relative;
		left: 0px;
	}
	#sideBar {
		left: -200px;
		overflow: auto;
	}
	#sideBar.show {
		left: 0px !important;
	}
	#topBar.show {
		left: 0px !important;
	}
	.container p {
		font-size: 18px;
	}
	.containerTab h4 {
		font-size: 14px;
	}
	.quizContainer {
		padding-top: 40px;
	}
	.container div.demoImageWrap {
		width: 100%;
		height: 300px;
		border-bottom-left-radius: 0;
		border-top-right-radius: 5px;
		background-position: center center;
	}
	.container p.introText {
		padding: 0 0 0 0;
	}
	.container p.introText:first-of-type {
		padding: 250px 0 0 0;
	}
	form#certificateDownloadForm button.downloadCertificate {
		max-width: none;
	}
}

@media screen and (max-width: 760px) {
	#topBar.show {
		left: 0 !important;
	}
	.lessonPreviewSixth div.previewIcon {
		border-width: 3px;
		background-size: 54px;
		background-position: center;
		background-size: contain;
	}
	.lessonPreviewSixth div.previewIcon svg {
		width: 45px;
		height: 45px;
		top: 4px;
		left: 4px;
	}
	.lessonPreviewLine {
		height: 3px;
		margin-top: -1px;
	}
	img.lessonStatusImage {
		width: 30px;
		height: 30px;
	}
	p.lessonStatus {
		height: 30px;
		line-height: 30px;
		right: 50px;
	}
	div.pendingOrder h3,
	div.completedOrder h3 {
		font-size: 0.6em;
	}

}

@media screen and (max-width: 540px) {
	#topBar div#topBarInner {
		padding: 20px;
	}
	#topBar div#topBarInner svg {
		display: none;
	}
	#topBar h3.pageName,
	#topBar h3.userName {
		display: block;
		float: none;
		height: auto;
		line-height: 20px;
		line-height: auto;
		text-align: left;
	}
	button#showMenuButton {
		margin: 0;
	}
	.container p {
		font-size: 16px;
	}
	.lessonPreviewSixth div.previewIcon {
		width: 40px;
		height: 40px;
		border-width: 2px;
		background-size: 36px;
		background-position: center;
		background-size: contain;
	}
	.lessonPreviewSixth div.previewIcon svg {
		width: 30px;
		height: 30px;
		top: 3px;
		left: 3px;
	}
	.lessonPreviewLine {
		height: 2px;
		margin-top: -1px;
		top: 20px;
	}
	div.segmentLabel {
		margin: 2px auto 0 auto;
		width: 90%;
	}
	p.segmentLabel {
		font-size: 7px !important;
	}
	.downloadWrap {
		width: 100%;
		max-width: 250px;
		float: none;
	}
	div.downloadItem ul,
	div.downloadItem ol {
		margin-left: 0px;
	}
	div.downloadItem p {
		padding-bottom: 20px;
		border-bottom: 2px solid #abdbe1;
		margin-bottom: 20px !important;
		margin-left: 0px;
	}
	.downloadItem:last-of-type .downloadWrap {
		margin-bottom: 20px;
	}
	.downloadItem:last-child p {
		margin-bottom: 0px ;
	}
	.progressOuter {
		height: 30px;
	}
	p.progressNumber {
		line-height: 30px;
	}
	span.dragMe {
		font-size: 14px;
	}
	p.fillTheGaps {
		font-size: 26px !important;
		line-height: 32px !important;
	}
	span.gap {
		height: 28px;
	}
	.container div.demoImageWrap {
		height: 280px;
	}
	.container p.introText:first-of-type {
		padding: 230px 0 0 0;
	}
	div.pendingOrder h3,
	div.completedOrder h3 {
		font-size: 0.8em;
	}
}

@media screen and (max-width: 320px) {
	.containerTitle {
		font-size: 11px;
		line-height: 10px;
		padding: 10px;
	}
	div.container.titleOnly {
		min-height: 31px;
		padding: 0;
	}
	.container img.demoImage {
		float: none;
		display: block;
		width: 100%;
		height: auto;
	}
	button#showMenuButton.actionButton {
		padding: 0 15px;
	}
	.lessonPreviewSixth div.previewIcon {
		width: 30px;
		height: 30px;
		border-width: 2px;
		background-size: 26px;
		background-position: center;
		background-size: cover;
	}
	.lessonPreviewLine {
		height: 2px;
		margin-top: -1px;
		top: 15px;
	}
	div.segmentLabel {
		display: none;
	}
	.profileEditButton {
		position: absolute;
		top: 5px;
		right: 5px;
	}
	button.launchLesson {
		font-size: 11px;
		padding: 10px 15px;
	}
	p.lessonStatus {
		font-size: 12px;
	}
	.containerTab h4 {
		font-size: 11px;
	}
	#topBar h3 {
		height: auto;
	}
	.lessonTitle h3 {
		font-size: 14px;
	}
	.container div.demoImageWrap {
		background-position: center 30px;
	}
}