@charset "UTF-8";
/*
* Composite Vivet CSS file
*/
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext);
body {
-webkit-text-size-adjust: 100%;
}
a, a:focus, a:active, a:hover {
outline: 0;
text-decoration: none;
}
a:focus, a:active, input:focus, input:active, textarea:focus, textarea:active {
outline: none;
}
textarea {
resize: none;
}
table {
table-layout: fixed;
}
.slick-slide, .slick-dots li button {
outline: 0;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: none;
box-shadow: none;
}
.page-header {
margin: 0;
padding: 0;
border: 0;
}
.glyphicon-remove-circle.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.panel-group {
margin: 0;
}
/**
* Mixins
**/
/**
* Generate CSS transition with vendor prefixes
* todo: add -webkit prefix to -webkit-transform properties
**/
/**
* Generate border-radius with vendor prefixes
**/
/**
* Distribute all elements within a container
* Add this mixin to the container style
* Children will be inline-blocks
* Play around with the width of contained elements
* Add this to the container:
**/
/**
* Use CSS transform to alter position of elements
**/
/**
* Center elements vertically and/or horizontally. Parent should not have static positioning.
* V: vertical, H: horizontal, null: both
**/
/**
* Lets ![]()
tags emulate background-size:cover
* by forcing them to be at least as big as the container
* while letting them retain their aspect ratio
**/
/**
* Set a color for all the link states
* First variable: normal state
* Second variable: hover/active/focus state
* If second variable is not specified,
* the first color will be darkened 20%
**/
/**
* Responsive typography
* All fields are optional because they have a default value
* If you want a header type to stay the same size, set it to null, e.g. $h6: null
**/
/**
* Bootstrap overrides, browser fixes
**/
/*
* The following style rules are always used on ALL sites (e.g. grid system, header, footer, universal modifier classes, etc.)
* Use _elements.scss for stylesheets of widgets and elements that are not universal to every subpage
*/
/*
* Sprites
*/
.inline-flex {
display: -webkit-inline-flex;
display: inline-flex;
display: -ms-inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
html, body {
width: 100%;
overflow-x: hidden;
font-family: "Roboto Condensed", sans-serif;
color: #131516;
background-color: white;
}
body {
-webkit-font-smoothing: antialiased;
}
section.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
z-index: 12000;
}
section.loading img {
position: fixed;
margin-top: 150px;
}
.site-header {
position: relative;
width: 100%;
height: 65px;
background-color: #063365;
}
.site-header h1 {
color: white;
font-size: 22px;
line-height: 65px;
margin: 0 0 0 195px;
}
.site-header .logo {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 160px;
height: 65px;
background: #0c6be2 url(../img/logo_vivet_@2X.png?v2) center center no-repeat;
background-size: 160px 65px;
}
.site-header .icons {
position: absolute;
top: 0px;
right: 0px;
}
.site-header .icons a.icon {
position: relative;
}
.site-header .icons a.icon span.label {
top: 12px;
position: absolute;
right: 7px;
}
.site-header .beta {
color: white;
display: block;
position: absolute;
background-color: #063365;
top: 3px;
font-size: 9px;
left: 137px;
padding: 2px;
}
.videos-list {
padding-bottom: 30px;
}
.videos-list:nth-child(even) {
background-color: #f6f6f6;
}
.videos-list .clearfix.visible-sm {
margin-bottom: 30px;
}
input.form-control {
/* FF1+ */
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
/* Saf3-4, iOS 1+, Android 1.5+ */
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
/* Opera 10.5, IE9, Saf5, Chrome, FF4 */
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.help-text {
opacity: 0.5;
font-size: 12px;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
section.highlights article.video-box figure {
height: 220px;
}
section.highlights.trainings_visible article.video-box figure {
height: 195px;
}
.video-box.topic .toolbar.top > *, .video-box.topic .toolbar.bottom a, .video-box.topic .toolbar.bottom button {
background: #824ab7;
}
.video-box.topic .toolbar span.fa-star {
padding: 1px 5px;
}
.video-box.topic h5 {
color: #824ab7;
}
.video-box.course .toolbar.top > *, .video-box.course .toolbar.bottom a, .video-box.course .toolbar.bottom button {
background: #12956e;
}
.video-box.course .toolbar span.fa-star {
padding: 1px 5px;
}
.video-box.course h5 {
color: #12956e;
}
.video-box.video .toolbar.top > *, .video-box.video .toolbar.bottom a, .video-box.video .toolbar.bottom button {
background: #0c6be2;
}
.video-box.video .toolbar span.fa-star {
padding: 1px 5px;
}
.video-box.video h5 {
color: #0c6be2;
}
.video-box.training .toolbar.top > *, .video-box.training .toolbar.bottom a, .video-box.training .toolbar.bottom button {
background: #F17025;
}
.video-box.training .toolbar span.fa-star {
padding: 1px 5px;
}
.video-box.training h5 {
color: #F17025;
}
.video-box.message .toolbar.top > *, .video-box.message .toolbar.bottom a, .video-box.message .toolbar.bottom button {
background: #b6b601;
}
.video-box.message .toolbar span.fa-star {
padding: 1px 5px;
}
.video-box.message h5 {
color: #b6b601;
}
.video-box, .video-box figure {
position: relative;
}
.video-box figure {
height: 195px;
background: black;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.video-box figure div.clicker {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.video-box figure[data-vivet] {
cursor: pointer;
}
.video-box figure img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
cursor: pointer;
}
.video-box figure.color-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background: transparent;
transition: background 0.25s linear;
}
.video-box figure.color-overlay.topic:hover {
background: rgba(130, 74, 183, 0.4);
}
.video-box figure.color-overlay.course:hover {
background: rgba(18, 149, 110, 0.4);
}
.video-box figure.color-overlay.video:hover {
background: rgba(12, 107, 226, 0.4);
}
.video-box figure.color-overlay.training:hover {
background: rgba(241, 112, 37, 0.4);
}
.video-box figure.color-overlay.message:hover {
background: rgba(182, 182, 1, 0.4);
}
.video-box figure .label {
margin: 5px;
padding: 4px;
}
.video-box figure .toolbar {
position: absolute;
left: 0;
right: 0;
z-index: 3;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.video-box figure .toolbar.top > *, .video-box figure .toolbar.bottom a, .video-box figure .toolbar.bottom button {
display: block;
min-width: 25px;
margin: 0 1px 1px 0;
color: white;
text-align: center;
}
.video-box figure .toolbar.top {
top: 0;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.video-box figure .toolbar.top > * {
height: 25px;
line-height: 25px;
}
.video-box figure .toolbar.bottom {
bottom: 0;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.video-box figure .toolbar.bottom a.view {
height: 32px;
line-height: inherit;
font-size: 13px;
}
.video-box figure .toolbar.bottom ul.dropdown-menu a {
background: inherit;
text-align: inherit;
color: inherit;
}
.video-box figure .toolbar.bottom ul.dropdown-menu a:hover {
background: #f1f1f1;
}
.video-box figure .toolbar.bottom time {
height: 33px;
line-height: 33px;
margin-left: auto;
padding: 0 1em;
}
.video-box h2, .video-box h4, .video-box h5 {
margin: 0.5em 0;
padding: 0 10px;
font-weight: normal;
}
.video-box h2 {
height: 40px;
font-size: 18px;
overflow: hidden;
}
.video-box h4 {
font-size: 14px;
}
.video-box h5 {
font-size: 14px;
line-height: 18px;
}
.video-box .categories {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-box.workspace {
margin-bottom: 40px;
}
.video-box.workspace figure a, .video-box.workspace figure time {
position: static;
}
.video-box.workspace figure figcaption {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: space-between;
justify-content: space-between;
position: absolute;
z-index: 2;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
}
.video-box.workspace figure figcaption .buttons {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
main.content {
font-size: 18px;
/** Aspect ratio trick: http://www.mademyday.de/css-height-equals-width-with-pure-css.html **/
}
main.content a {
color: #824ab7;
}
main.content a.btn {
color: white;
}
main.content a.img:before {
content: "";
display: block;
padding-top: 56.25%;
}
main.content a.img {
position: relative;
overflow: hidden;
display: block !important;
float: left;
margin-right: 1%;
width: 49%;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
main.content a.img.small {
width: 19%;
}
main.content a.img img.img-thumbnail {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
main.content img {
max-width: 100%;
}
main.workspace ul.nav.nav-tabs.workspace-tabs {
display: none;
}
main.workspace .workspace-section.message {
margin-bottom: 0;
}
.workspace-messages div.message {
background-color: #eee;
padding: 10px;
margin: 15px;
border: 1px solid transparent;
}
.workspace-messages div.message .new-message {
color: #b6b601;
position: absolute;
top: 0;
right: 0;
}
.workspace-messages div.message .avatar {
border-radius: 20px;
width: 40px;
}
.workspace-messages div.message div.vertical-align {
margin-top: 20px;
}
.workspace-messages div.message:nth-child(odd) {
background-color: #f6f6f6;
}
.workspace-messages div.message.new, .workspace-messages div.message.highlighted {
border-color: #b6b601;
}
.workspace-messages div.message.new.highlighted, .workspace-messages div.message.highlighted.highlighted {
background-color: rgba(182, 182, 1, 0.4);
}
time {
display: inline-block;
color: white;
padding: 0.5em 1em;
font-size: 13px;
background-color: rgba(19, 21, 22, 0.4);
}
.cta {
position: relative;
display: table;
width: 100%;
height: 125px;
background-color: #0c6be2;
}
.cta p {
display: table-cell;
vertical-align: middle;
color: white;
font-size: 32px;
text-align: center;
}
.cta p button {
/* FF1+ */
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
/* Saf3-4, iOS 1+, Android 1.5+ */
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
/* Opera 10.5, IE9, Saf5, Chrome, FF4 */
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
padding: 0.5em 1.5em;
margin-left: 2em;
font-size: 20px;
border: 1px solid white;
color: white;
background-color: #0c6be2;
}
.cta p button:hover {
border: 1px solid #0c6be2;
color: #0c6be2;
background-color: white;
}
.cta.articles div.article {
border: 1px solid white;
padding: 0 18px 18px 18px;
margin-bottom: 35px;
}
.cta.articles h3 {
color: white;
}
.cta.articles a {
color: white;
font-size: 15px;
}
.popover {
min-width: 160px;
border-radius: 0;
}
.popover hr {
margin: 10px 0;
}
.popover a {
font-size: 16px;
color: #7e7e7e;
}
.popover a.selected {
font-weight: bold;
}
.popover a .fa {
margin-right: 5px;
font-size: 20px;
vertical-align: text-top;
}
.popover a .fa.topic {
color: #824ab7;
}
.popover a .fa.course {
color: #12956e;
}
.popover a .fa.video {
color: #0c6be2;
}
.popover a .fa.training {
color: #F17025;
}
.popover a .fa.message {
color: #b6b601;
}
.form-control-box {
border: 1px solid #999;
}
.form-control-box .form-control.result-filter {
height: 38px;
border: none;
font-size: 20px;
outline: 0;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.form-control-box .filter-by {
height: 38px;
border: 0;
width: 100%;
}
.form-control-box .dropdown-menu {
width: 100%;
}
.active-filters {
font-size: 18px;
margin: 20px 0;
padding-left: 20px;
background: url(../img/icons/icon_badge_@2X.png) left center no-repeat;
background-size: 10px 16px;
}
.badge__grey {
padding: 5px 7px;
margin-left: 0.5em;
font-size: 14px;
color: #333;
font-weight: normal;
background-color: #eee;
}
.badge__grey:after {
content: "x";
margin-left: 7px;
}
.badge__grey:hover {
color: #131516 !important;
}
.mobile-search {
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
position: absolute;
top: 0px;
bottom: 0px;
right: 176px;
width: 280px;
padding: 5px;
background-color: #012348;
}
.mobile-search.closed {
top: -200px;
bottom: 100px;
}
a, button, [onclick] {
cursor: pointer;
}
.pointer {
cursor: pointer;
}
a.btn {
border: 1px solid grey;
}
a, button {
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
text-decoration: none;
}
a:hover, button:hover {
color: #333;
}
a.view, button.view {
display: inline-block;
padding: 0.5em 1em;
font-size: 16px;
color: white;
}
a.view.topic, button.view.topic {
background-color: #824ab7;
}
a.view.topic:hover, button.view.topic:hover {
background-color: #9b6ec6;
}
a.view.course, button.view.course {
background-color: #12956e;
}
a.view.course:hover, button.view.course:hover {
background-color: #17c390;
}
a.view.video, button.view.video {
background-color: #0c6be2;
}
a.view.video:hover, button.view.video:hover {
background-color: #2d85f4;
}
a.view.training, button.view.training {
background-color: #F17025;
}
a.view.training:hover, button.view.training:hover {
background-color: #f48f55;
}
a.view.message, button.view.message {
background-color: #b6b601;
}
a.view.message:hover, button.view.message:hover {
background-color: #e9e901;
}
.section-title {
font-size: 34px;
margin: 0.5em;
text-align: center;
}
.section-subtitle {
font-size: 18px;
margin-bottom: 1em;
text-align: center;
margin-top: -1em;
}
/*
* Site footer
*/
.site-footer {
margin-top: 100px;
background: #063365;
}
.site-footer.main {
margin-top: 0;
}
.site-footer .container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
height: 100%;
}
.site-footer, .site-footer a {
color: white;
}
.site-footer a {
-moz-transition: text-shadow 0.25s linear;
/* FF4+ */
-o-transition: text-shadow 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: text-shadow 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: text-shadow 0.25s linear;
/* IE10? */
transition: text-shadow 0.25s linear;
}
.site-footer a:hover, .site-footer a:focus {
text-shadow: 0px 0px 10px white;
}
.site-footer .footer-brand {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
flex-grow: 1;
}
.site-footer .footer-brand img {
display: inline-block;
margin-right: 30px;
}
.site-footer .footer-nav {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
flex-grow: 2;
flex-wrap: wrap;
}
.site-footer .eu {
display: none;
}
/*
* Media queries
*/
@media (max-width: 1023px) {
.hero .eu {
display: none;
}
.site-footer .eu {
display: block;
padding-top: 20px;
float: left;
width: 100%;
}
.site-footer .eu p {
float: left;
color: white;
font-size: 9px;
padding: 10px;
}
.site-footer .eu img {
float: left;
}
}
@media (max-width: 767px) {
.site-header {
position: fixed;
height: 44px;
z-index: 100;
background-color: #0c6be2;
}
.site-header .logo {
width: 108.3076923077px;
height: 44px;
background-size: 108.3076923077px 44px;
}
.site-header h1 {
display: none;
}
.section-title {
margin: 1em;
}
.video-box {
width: 60%;
min-width: 280px;
margin: 0px auto 30px auto;
}
.video-box.featured {
width: 100%;
max-width: 750px;
min-width: 280px;
}
main.generic-page header.page-header {
margin-top: 44px;
}
main.video-profile, main.course-overview, main.topic-overview, main.training-overview {
margin-top: 44px;
}
main.video-profile .page-title, main.course-overview .page-title, main.topic-overview .page-title, main.training-overview .page-title {
font-size: 28px;
}
main.video-profile .page-title span[data-editor=text], main.course-overview .page-title span[data-editor=text], main.topic-overview .page-title span[data-editor=text], main.training-overview .page-title span[data-editor=text] {
display: block;
margin-bottom: 50px;
}
main.video-profile .page-title span.fa, main.course-overview .page-title span.fa, main.topic-overview .page-title span.fa, main.training-overview .page-title span.fa {
position: relative;
left: 0;
top: -15px;
float: left;
}
main.video-profile nav.course-toolbar.icons, main.course-overview nav.course-toolbar.icons, main.topic-overview nav.course-toolbar.icons, main.training-overview nav.course-toolbar.icons {
position: absolute;
top: -50px;
right: 0;
}
main.video-profile nav.course-toolbar.icons button, main.course-overview nav.course-toolbar.icons button, main.topic-overview nav.course-toolbar.icons button, main.training-overview nav.course-toolbar.icons button {
background: none;
}
main.video-profile button.admin-drop, main.course-overview button.admin-drop, main.topic-overview button.admin-drop, main.training-overview button.admin-drop {
position: absolute;
left: 5%;
width: 11%;
font-size: 0;
}
main.video-profile button.admin-drop span, main.course-overview button.admin-drop span, main.topic-overview button.admin-drop span, main.training-overview button.admin-drop span {
font-size: 10px;
}
main.video-profile div.course-enroll, main.video-profile div.topic-enroll, main.video-profile div.training-enroll, main.course-overview div.course-enroll, main.course-overview div.topic-enroll, main.course-overview div.training-enroll, main.topic-overview div.course-enroll, main.topic-overview div.topic-enroll, main.topic-overview div.training-enroll, main.training-overview div.course-enroll, main.training-overview div.topic-enroll, main.training-overview div.training-enroll {
position: relative;
left: 15%;
width: 85%;
}
main.video-profile .course-unit-list .course-unit .panel-title, main.course-overview .course-unit-list .course-unit .panel-title, main.topic-overview .course-unit-list .course-unit .panel-title, main.training-overview .course-unit-list .course-unit .panel-title {
font-size: 13px;
}
main.video-profile .course-unit-list .course-unit .panel-title:before, main.course-overview .course-unit-list .course-unit .panel-title:before, main.topic-overview .course-unit-list .course-unit .panel-title:before, main.training-overview .course-unit-list .course-unit .panel-title:before {
margin-right: 10px;
}
main.video-profile .course-unit-list .lesson .lesson-title, main.course-overview .course-unit-list .lesson .lesson-title, main.topic-overview .course-unit-list .lesson .lesson-title, main.training-overview .course-unit-list .lesson .lesson-title {
font-size: 13px;
}
main.video-profile .course-unit-list .lesson .lesson-title:before, main.course-overview .course-unit-list .lesson .lesson-title:before, main.topic-overview .course-unit-list .lesson .lesson-title:before, main.training-overview .course-unit-list .lesson .lesson-title:before {
background-size: 25px 50px;
margin-right: 10px;
width: 13px;
height: 16px;
}
main.video-profile div[data-block=sidebar], main.course-overview div[data-block=sidebar], main.topic-overview div[data-block=sidebar], main.training-overview div[data-block=sidebar] {
margin-top: 40px;
}
main.video-profile.course-overview .btn.course, main.course-overview.course-overview .btn.course, main.topic-overview.course-overview .btn.course, main.training-overview.course-overview .btn.course {
font-size: 13px;
}
main.workspace {
margin-top: 44px;
}
main.workspace ul.nav.nav-tabs.workspace-tabs {
display: block;
}
main.workspace section.workspace-section {
display: none;
}
main.workspace section.workspace-section.on {
display: block;
}
main.workspace section.workspace-section .workspace-header ul.tabs {
width: 85%;
padding: 5px 15px 0 0;
}
main.workspace section.workspace-section .workspace-header ul.tabs a {
font-size: 13px;
padding: 10px;
}
main.workspace section.workspace-section .course-enroll {
width: 15%;
border-bottom: 0;
}
main.workspace section.workspace-section .course-enroll button {
font-size: 0;
}
main.workspace section.workspace-section .course-enroll button img {
width: 17px;
}
main.workspace section.workspace-section div.first-visit.video article.video-box {
display: none;
}
main.workspace section.workspace-section div.first-visit.video div.intro-banner {
width: 100%;
}
main.workspace section.workspace-section div.first-visit.video div.intro-banner div.banner-buttons {
margin-left: 10px;
}
.search-section {
margin-top: 25px;
}
.site-footer {
height: auto;
padding: 20px 0;
}
.site-footer .container {
display: block;
}
.site-footer .footer-brand {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin-bottom: 30px;
}
.site-footer .footer-nav {
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
.site-footer .footer-nav a {
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
.hero h2 strong {
font-size: 20px !important;
}
div.icons {
z-index: 2;
background-color: #063365;
}
.mobile-search {
width: 100%;
left: 0;
z-index: 1;
}
.cta p {
font-size: 20px;
}
.cta p button {
font-size: 14px;
margin: 10px 0;
}
}
@media (max-width: 320px) {
.video-box {
width: 250px;
min-width: 250px;
}
}
.btn {
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
/* FF1+ */
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
/* Saf3-4, iOS 1+, Android 1.5+ */
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
/* Opera 10.5, IE9, Saf5, Chrome, FF4 */
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-size: 16px;
text-align: center;
}
.btn.topic {
background-color: #824ab7;
color: white;
}
.btn.topic:hover {
background-color: #9b6ec6;
}
.btn.topic.invert-white {
background-color: white;
color: #824ab7;
}
.btn.topic.invert-white:hover {
background-color: #824ab7;
border-color: white;
color: white;
}
.btn.topic.secondary {
background: transparent;
border-color: #824ab7;
color: #824ab7;
}
.btn.topic.secondary:hover {
background-color: #824ab7;
color: white;
}
.btn.topic.secondary.invert-white {
border-color: white;
color: white;
}
.btn.topic.secondary.invert-white:hover {
background: white;
color: #824ab7;
}
.btn.topic.secondary.bug-close {
margin-left: -10px;
margin-right: 0px;
}
.btn.course {
background-color: #12956e;
color: white;
}
.btn.course:hover {
background-color: #17c390;
}
.btn.course.invert-white {
background-color: white;
color: #12956e;
}
.btn.course.invert-white:hover {
background-color: #12956e;
border-color: white;
color: white;
}
.btn.course.secondary {
background: transparent;
border-color: #12956e;
color: #12956e;
}
.btn.course.secondary:hover {
background-color: #12956e;
color: white;
}
.btn.course.secondary.invert-white {
border-color: white;
color: white;
}
.btn.course.secondary.invert-white:hover {
background: white;
color: #12956e;
}
.btn.course.secondary.bug-close {
margin-left: -10px;
margin-right: 0px;
}
.btn.video {
background-color: #0c6be2;
color: white;
}
.btn.video:hover {
background-color: #2d85f4;
}
.btn.video.invert-white {
background-color: white;
color: #0c6be2;
}
.btn.video.invert-white:hover {
background-color: #0c6be2;
border-color: white;
color: white;
}
.btn.video.secondary {
background: transparent;
border-color: #0c6be2;
color: #0c6be2;
}
.btn.video.secondary:hover {
background-color: #0c6be2;
color: white;
}
.btn.video.secondary.invert-white {
border-color: white;
color: white;
}
.btn.video.secondary.invert-white:hover {
background: white;
color: #0c6be2;
}
.btn.video.secondary.bug-close {
margin-left: -10px;
margin-right: 0px;
}
.btn.training {
background-color: #F17025;
color: white;
}
.btn.training:hover {
background-color: #f48f55;
}
.btn.training.invert-white {
background-color: white;
color: #F17025;
}
.btn.training.invert-white:hover {
background-color: #F17025;
border-color: white;
color: white;
}
.btn.training.secondary {
background: transparent;
border-color: #F17025;
color: #F17025;
}
.btn.training.secondary:hover {
background-color: #F17025;
color: white;
}
.btn.training.secondary.invert-white {
border-color: white;
color: white;
}
.btn.training.secondary.invert-white:hover {
background: white;
color: #F17025;
}
.btn.training.secondary.bug-close {
margin-left: -10px;
margin-right: 0px;
}
.btn.message {
background-color: #b6b601;
color: white;
}
.btn.message:hover {
background-color: #e9e901;
}
.btn.message.invert-white {
background-color: white;
color: #b6b601;
}
.btn.message.invert-white:hover {
background-color: #b6b601;
border-color: white;
color: white;
}
.btn.message.secondary {
background: transparent;
border-color: #b6b601;
color: #b6b601;
}
.btn.message.secondary:hover {
background-color: #b6b601;
color: white;
}
.btn.message.secondary.invert-white {
border-color: white;
color: white;
}
.btn.message.secondary.invert-white:hover {
background: white;
color: #b6b601;
}
.btn.message.secondary.bug-close {
margin-left: -10px;
margin-right: 0px;
}
.btn.filter-btn {
width: 265px;
min-width: 265px;
height: 55px;
margin-left: 3px;
margin-right: 3px;
font-size: 20px;
color: #999;
}
.btn.filter-btn span {
-moz-transition: color 0.25s linear;
/* FF4+ */
-o-transition: color 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: color 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: color 0.25s linear;
/* IE10? */
transition: color 0.25s linear;
position: relative;
color: white;
}
.btn.filter-btn span:before {
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
content: "";
position: absolute;
left: -8px;
top: -6px;
display: none;
width: 36px;
height: 36px;
border: 1px solid #999;
}
.btn.filter-btn.small {
width: 164px;
height: 40px;
line-height: 40px;
padding: 0;
font-size: 16px;
}
.btn.filter-btn.selected span {
color: white;
padding-left: 40px;
background: url(../img/icons/icon_check-white_@2X.png) left center no-repeat;
background-size: 20px 15px;
}
.btn.filter-btn.selected span:before {
display: block;
border-color: white;
}
.btn.filter-btn.unselected.topic {
background-color: #eee;
}
.btn.filter-btn.unselected.topic:hover {
background-color: #9b6ec6;
}
.btn.filter-btn.unselected.topic:hover span {
color: white;
}
.btn.filter-btn.unselected.topic:hover span:before {
display: block;
border-color: white;
}
.btn.filter-btn.unselected.course {
background-color: #eee;
}
.btn.filter-btn.unselected.course:hover {
background-color: #17c390;
}
.btn.filter-btn.unselected.course:hover span {
color: white;
}
.btn.filter-btn.unselected.course:hover span:before {
display: block;
border-color: white;
}
.btn.filter-btn.unselected.video {
background-color: #eee;
}
.btn.filter-btn.unselected.video:hover {
background-color: #2d85f4;
}
.btn.filter-btn.unselected.video:hover span {
color: white;
}
.btn.filter-btn.unselected.video:hover span:before {
display: block;
border-color: white;
}
.btn.filter-btn.unselected.training {
background-color: #eee;
}
.btn.filter-btn.unselected.training:hover {
background-color: #f48f55;
}
.btn.filter-btn.unselected.training:hover span {
color: white;
}
.btn.filter-btn.unselected.training:hover span:before {
display: block;
border-color: white;
}
.btn.filter-btn.unselected.message {
background-color: #eee;
}
.btn.filter-btn.unselected.message:hover {
background-color: #e9e901;
}
.btn.filter-btn.unselected.message:hover span {
color: white;
}
.btn.filter-btn.unselected.message:hover span:before {
display: block;
border-color: white;
}
.btn.filter-btn.unselected span {
color: #999;
padding-left: 40px;
}
.btn.filter-btn.unselected span:before {
display: block;
border-color: #999;
}
.btn.grey, .btn.white {
width: 100%;
height: 40px;
padding: 0;
border: 1px solid;
font-size: 16px;
}
.btn.grey:hover, .btn.white:hover {
color: #131516;
}
.btn.grey {
border-color: #eee;
background-color: #eee;
}
.btn.grey:hover {
background-color: #cccccc;
}
.btn.white {
border-color: #131516;
background-color: white;
}
.btn.white:hover {
background-color: #f2f2f2;
}
.btn.white.white-lighten {
border-color: #999;
}
.btn.add span, .btn.added span {
display: inline-block;
padding-left: 25px;
background-position: left center;
background-repeat: no-repeat;
}
.btn.add span {
background-image: url(../img/icons/icon_plus-black_@2X.png);
background-size: 21px 21px;
}
.btn.added span {
background-image: url(../img/icons/icon_check_@2X.png);
background-size: 15px 12px;
}
.btn.download-btn {
height: 50px;
padding: 12px 50px 12px 50px;
background: #eee url(../img/icons/icon_download.png) 12px center no-repeat;
background-size: 16px 20px;
font-size: 18px;
}
.btn.load-btn {
display: inline-block;
width: auto;
padding: 0 30px;
}
.btn.add-btn {
height: 50px;
}
.btn.add-btn img {
margin-right: 15px;
vertical-align: middle;
}
.btn.show-all {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
background: none;
height: 45px;
border: 1px solid #eee;
font-size: 20px;
color: #7e7e7e;
transition: border-color 0.25s linear, color 0.25s linear;
}
.btn.show-all:hover, .btn.show-all:focus {
border-color: #333;
color: #333;
}
.btn.complete-lesson:before {
display: inline-block;
content: " ";
margin-right: 15px;
vertical-align: middle;
width: 16px;
height: 21px;
background: url("../img/icons/sprite_lesson.png?v2") no-repeat;
background-size: 33px 63px;
background-position: -17px -21px;
}
.btn.dropdown-toggle {
min-width: 30px !important;
}
/*
* Partial elements that may be used on any subpage, but they are not featured on ALL subpages
*/
/**
* Mixins
**/
/**
* Generate CSS transition with vendor prefixes
* todo: add -webkit prefix to -webkit-transform properties
**/
/**
* Generate border-radius with vendor prefixes
**/
/**
* Distribute all elements within a container
* Add this mixin to the container style
* Children will be inline-blocks
* Play around with the width of contained elements
* Add this to the container:
**/
/**
* Use CSS transform to alter position of elements
**/
/**
* Center elements vertically and/or horizontally. Parent should not have static positioning.
* V: vertical, H: horizontal, null: both
**/
/**
* Lets ![]()
tags emulate background-size:cover
* by forcing them to be at least as big as the container
* while letting them retain their aspect ratio
**/
/**
* Set a color for all the link states
* First variable: normal state
* Second variable: hover/active/focus state
* If second variable is not specified,
* the first color will be darkened 20%
**/
/**
* Responsive typography
* All fields are optional because they have a default value
* If you want a header type to stay the same size, set it to null, e.g. $h6: null
**/
/**
* Bootstrap overrides, browser fixes
**/
/* Custom Bootstrap tab locations */
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
}
/*
* Buttons
*/
.ofw-watchelement {
background-image: url(//vivet.education/system/img/assets/ajax-loader.gif);
display: block;
height: 11px;
background-repeat: no-repeat;
background-position: 50% 50%;
float: left;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
/*
* Icon buttons
*/
.icon {
display: block;
width: 65px;
height: 65px;
float: left;
background: #012348 url(../img/icons/sprite_headericons_@2X.png?v4) no-repeat;
border-style: solid;
border-color: #063365;
border-width: 0 0 0 1px;
background-size: 322px 30px;
}
.icon.search {
background-position: 20px center;
}
.icon.login {
background-position: -58px center;
}
.icon.language {
background-position: -134px center;
}
.icon.more {
background-position: -212px center;
}
.icon.mail {
background-position: -272px center;
}
.icon:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
.clearboth {
clear: both;
}
.note-icon:before {
display: block;
content: " ";
min-width: 25px;
min-height: 25px;
margin-right: 1px;
background: url(../img/icons/icon_note-white.png?v2) center center no-repeat;
background-size: 65%;
}
/**
* Registration
*/
input.has-error {
border: 1px solid #824ab7 !important;
}
/*
* Search
*/
.search-group {
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
position: relative;
width: 620px;
margin: 0 auto;
}
.search-group label {
-moz-transition: left 0.25s linear;
/* FF4+ */
-o-transition: left 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: left 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: left 0.25s linear;
/* IE10? */
transition: left 0.25s linear;
position: absolute;
top: 0px;
left: 0px;
height: 50px;
font-size: 20px;
line-height: 50px;
font-weight: normal;
}
.search-group input.form-control {
font-size: 20px;
height: 50px;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.search-group input.form-control.highlight {
background-color: #9ab7d6;
-webkit-transition: background-color 0ms linear;
-ms-transition: background-color 0ms linear;
transition: background-color 0ms linear;
}
.search-group .input-group-btn:last-child > .btn {
/* FF1+ */
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
/* Saf3-4, iOS 1+, Android 1.5+ */
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
/* Opera 10.5, IE9, Saf5, Chrome, FF4 */
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
height: 50px;
width: 65px;
font-size: 24px;
color: white;
background-color: #0c6be2;
border: #0c6be2;
margin-left: -1px;
}
.search-group .input-group-btn:last-child > .btn .glyphicon {
top: 5px;
}
.info-license {
max-width: 100px;
}
.search-section {
-moz-transition: all 0.25s linear;
/* FF4+ */
-o-transition: all 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: all 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: all 0.25s linear;
/* IE10? */
transition: all 0.25s linear;
position: relative;
padding: 40px 20px;
padding-bottom: 15px;
}
.search-section.closed {
padding-top: 0px;
padding-bottom: 0px;
}
.search-section.closed .eu {
display: none;
}
.search-section.closed form {
height: 0px;
}
.search-section.closed form .search-group {
top: -50px;
}
.search-section.hero {
height: 260px;
background: url(../img/bg_hero.jpg?v3) center center no-repeat;
background-size: cover;
position: relative;
}
.search-section.hero h2 {
display: block;
margin-top: 20px;
text-align: center;
font-size: 28px;
line-height: 1.25em;
color: #9ab7d6;
}
.search-section.hero h2 strong {
font-weight: normal;
font-size: 46px;
line-height: 1.25em;
color: white;
}
.search-section.hero .eu {
position: absolute;
bottom: 0;
right: 10px;
}
.search-section.hero .eu p {
float: left;
color: white;
font-size: 9px;
padding: 10px;
}
.search-section.hero .eu img {
float: right;
}
.search-section.searching {
background-color: #eee;
}
.search-section.searching h2 {
display: none;
}
.search-section.searching .search-group {
width: 100%;
}
.search-section.searching .search-group label {
left: -110px;
}
.search-section.searching .eu {
display: none;
}
.search-section h2 {
display: none;
}
.search-section form {
-moz-transition: height 0.25s linear;
/* FF4+ */
-o-transition: height 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: height 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: height 0.25s linear;
/* IE10? */
transition: height 0.25s linear;
position: relative;
height: 50px;
overflow: hidden;
}
.search-filters {
padding-top: 10px;
padding-right: 35px;
}
/*
* Subpage headers
*/
a.btn.pull-right {
margin-right: 5px;
}
.page-header {
margin: 10px 0 10px;
padding: 0 15px;
}
.page-header .btn {
height: 50px;
font-size: 16px;
}
.crumbs {
font-weight: bold;
text-transform: uppercase;
}
.crumbs.topic a, .crumbs.topic a:link {
color: #824ab7;
}
.crumbs.topic a:hover, .crumbs.topic a:active {
color: #9b6ec6;
}
.crumbs.course a, .crumbs.course a:link {
color: #12956e;
}
.crumbs.course a:hover, .crumbs.course a:active {
color: #17c390;
}
.crumbs.video a, .crumbs.video a:link {
color: #0c6be2;
}
.crumbs.video a:hover, .crumbs.video a:active {
color: #2d85f4;
}
.crumbs.training a, .crumbs.training a:link {
color: #F17025;
}
.crumbs.training a:hover, .crumbs.training a:active {
color: #f48f55;
}
.crumbs.message a, .crumbs.message a:link {
color: #b6b601;
}
.crumbs.message a:hover, .crumbs.message a:active {
color: #e9e901;
}
.page-title {
margin: 15px 0 15px;
font-size: 34px;
}
.page-title .fa {
font-size: 20px;
color: #0c6be2;
vertical-align: middle;
}
.page-subtitle {
margin: 0;
padding: 15.5px 20px;
background: #f6f6f6;
font-size: 18px;
color: #333;
}
.page-subtitle .edit-btn {
color: #808080;
}
.page-pic-and-description {
position: relative;
float: left;
margin-bottom: 10px;
width: 100%;
}
.page-pic-and-description a.fa {
position: absolute;
background: white;
padding: 5px;
left: 0;
}
.page-pic-and-description img.img-responsive {
float: left;
max-width: 20%;
display: inline-block;
}
.page-pic-and-description div {
display: inline-block;
width: 75%;
position: relative;
margin-left: 1%;
}
.page-pic-and-description div div {
width: 100%;
font-size: 18px;
}
.page-pic-and-description a.btn {
padding: 3px 10px;
font-size: 12px;
height: 24px;
margin-top: 10px;
}
/**
* Fix dropdown overflow
*/
.dropdown-menu li a {
overflow: hidden;
text-overflow: ellipsis;
}
/*
* Course admin notice
*/
.course-admin-notice, .topic-admin-notice, .training-admin-notice, .test-admin-notice {
margin-bottom: 10px;
margin-top: 10px;
padding: 10px 20px;
background: #0c6be2;
color: white;
}
.course-admin-notice.course, .topic-admin-notice.course, .training-admin-notice.course, .test-admin-notice.course {
background: #12956e;
}
.course-admin-notice.topic, .topic-admin-notice.topic, .training-admin-notice.topic, .test-admin-notice.topic {
background: #824ab7;
}
.course-admin-notice.training, .topic-admin-notice.training, .training-admin-notice.training, .test-admin-notice.training {
background: #F17025;
}
.course-admin-notice, .course-admin-notice .publish-btns, .topic-admin-notice, .topic-admin-notice .publish-btns, .training-admin-notice, .training-admin-notice .publish-btns, .test-admin-notice, .test-admin-notice .publish-btns {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.course-admin-notice h5, .topic-admin-notice h5, .training-admin-notice h5, .test-admin-notice h5 {
font-size: 20px;
font-weight: bold;
}
.course-admin-notice a, .topic-admin-notice a, .training-admin-notice a, .test-admin-notice a {
color: rgba(19, 21, 22, 0.4);
}
.course-admin-notice p, .topic-admin-notice p, .training-admin-notice p, .test-admin-notice p {
font-size: 18px;
}
.course-admin-notice .publish-btns .btn, .topic-admin-notice .publish-btns .btn, .training-admin-notice .publish-btns .btn, .test-admin-notice .publish-btns .btn {
margin: 20px;
}
.course-admin-notice .publish-btns .btn.dropdown-toggle, .topic-admin-notice .publish-btns .btn.dropdown-toggle, .training-admin-notice .publish-btns .btn.dropdown-toggle, .test-admin-notice .publish-btns .btn.dropdown-toggle {
margin-left: -21px !important;
margin-bottom: 0px;
}
.course-admin-notice .publish-btns ul.dropdown-menu, .topic-admin-notice .publish-btns ul.dropdown-menu, .training-admin-notice .publish-btns ul.dropdown-menu, .test-admin-notice .publish-btns ul.dropdown-menu {
margin-top: -20px;
}
.course-admin-notice.warning, .topic-admin-notice.warning, .training-admin-notice.warning, .test-admin-notice.warning {
background-color: #f0ad4e;
}
.course-admin-notice.footer-notice, .topic-admin-notice.footer-notice, .training-admin-notice.footer-notice, .test-admin-notice.footer-notice {
z-index: 10000;
position: fixed;
bottom: -30px;
width: 100%;
left: 0px;
-webkit-transition: bottom 1s;
transition: bottom 1s;
}
.course-admin-notice.footer-notice.off, .topic-admin-notice.footer-notice.off, .training-admin-notice.footer-notice.off, .test-admin-notice.footer-notice.off {
bottom: -300px;
-webkit-transition: bottom 1s;
transition: bottom 1s;
}
/*
* Course toolbar
*/
.course-toolbar .icon {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
background: none;
width: 50px;
height: 50px;
border-color: white;
background: #f6f6f6;
color: #7e7e7e;
}
.course-toolbar .icon.separated {
margin-left: 5px;
}
.course-toolbar .icon:first-child, .course-toolbar .icon.noborder {
border: 0;
}
.course-toolbar .icon .fa {
font-size: 24px;
}
/*
* Course unit list
*/
.course-unit-list .panel-heading a, .training-course-list .panel-heading a {
height: 80px;
padding: 0 20px;
}
.course-unit-list li.lesson, .training-course-list li.lesson {
padding-left: 20px;
}
.course-unit-list .course-unit, .course-unit-list .training-course, .training-course-list .course-unit, .training-course-list .training-course {
box-shadow: none;
}
.course-unit-list .course-unit .panel-heading, .course-unit-list .training-course .panel-heading, .training-course-list .course-unit .panel-heading, .training-course-list .training-course .panel-heading {
padding: 0;
background: #eee;
}
.course-unit-list .course-unit .panel-heading a, .course-unit-list .training-course .panel-heading a, .training-course-list .course-unit .panel-heading a, .training-course-list .training-course .panel-heading a {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.course-unit-list .course-unit .panel-title, .course-unit-list .training-course .panel-title, .training-course-list .course-unit .panel-title, .training-course-list .training-course .panel-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.course-unit-list .course-unit .panel-title:before, .course-unit-list .training-course .panel-title:before, .training-course-list .course-unit .panel-title:before, .training-course-list .training-course .panel-title:before {
display: inline-block;
width: 20px;
height: 23px;
content: " ";
margin-right: 30px;
background: url(../img/icons/sprite_unit.png) center top no-repeat;
background-size: 20px 47px;
vertical-align: middle;
}
.course-unit-list .course-unit .panel-body, .course-unit-list .training-course .panel-body, .training-course-list .course-unit .panel-body, .training-course-list .training-course .panel-body {
padding: 0;
}
.course-unit-list .course-unit.completed .panel-heading a:before, .course-unit-list .training-course.completed .panel-heading a:before, .training-course-list .course-unit.completed .panel-heading a:before, .training-course-list .training-course.completed .panel-heading a:before {
background-position: center bottom;
}
.course-unit-list.edit-mode .course-unit .panel-heading a, .course-unit-list.edit-mode .training-course .panel-heading a, .training-course-list.edit-mode .course-unit .panel-heading a, .training-course-list.edit-mode .training-course .panel-heading a {
cursor: auto;
}
.course-unit-list.edit-mode .course-unit.add-new .panel-title, .course-unit-list.edit-mode .training-course.add-new .panel-title, .training-course-list.edit-mode .course-unit.add-new .panel-title, .training-course-list.edit-mode .training-course.add-new .panel-title {
font-weight: bold;
color: #7e7e7e;
}
.course-unit-list.edit-mode .course-unit.add-new .panel-title:before, .course-unit-list.edit-mode .training-course.add-new .panel-title:before, .training-course-list.edit-mode .course-unit.add-new .panel-title:before, .training-course-list.edit-mode .training-course.add-new .panel-title:before {
background-image: url("../img/icons/icon_new-unit.png");
background-size: 20px 23px;
}
.course-unit-list.edit-mode .course-unit.add-new a, .course-unit-list.edit-mode .training-course.add-new a, .training-course-list.edit-mode .course-unit.add-new a, .training-course-list.edit-mode .training-course.add-new a {
cursor: pointer;
}
.course-unit-list.edit-mode .course-unit.add-new a:before, .course-unit-list.edit-mode .training-course.add-new a:before, .training-course-list.edit-mode .course-unit.add-new a:before, .training-course-list.edit-mode .training-course.add-new a:before {
display: block;
font-family: FontAwesome;
content: "";
margin-right: 18px;
font-size: 18px;
color: #7e7e7e;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading, .course-unit-list.edit-mode .training-course.movable .panel-heading, .training-course-list.edit-mode .course-unit.movable .panel-heading, .training-course-list.edit-mode .training-course.movable .panel-heading {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
padding-left: 20px;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading .handle, .course-unit-list.edit-mode .training-course.movable .panel-heading .handle, .training-course-list.edit-mode .course-unit.movable .panel-heading .handle, .training-course-list.edit-mode .training-course.movable .panel-heading .handle {
display: block;
content: " ";
width: 12px;
height: 28px;
background: url(../img/icons/icon_handle.png) center center no-repeat;
background-size: 12px 28px;
cursor: move;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading a, .course-unit-list.edit-mode .training-course.movable .panel-heading a, .training-course-list.edit-mode .course-unit.movable .panel-heading a, .training-course-list.edit-mode .training-course.movable .panel-heading a {
flex-grow: 1;
}
/*
* Unit lesson list
*/
.lesson-list {
margin: 0;
padding: 0;
list-style: none;
}
.lesson-list .lesson {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
height: 80px;
margin-bottom: 1px;
padding: 0 20px 0 62px;
background: #f6f6f6;
}
.lesson-list .lesson .lesson-title, .lesson-list .lesson .generic-title {
font-size: 18px;
color: #333;
}
.lesson-list .lesson .lesson-title .label, .lesson-list .lesson .generic-title .label {
font-size: 55%;
font-weight: 700;
line-height: 1.7;
}
.lesson-list .lesson div.label {
margin-left: auto;
}
.lesson-list .lesson .lesson-title:before {
display: inline-block;
width: 16px;
height: 20px;
content: " ";
margin-right: 25px;
background: url(../img/icons/sprite_lesson.png) left top no-repeat;
background-size: 33px 60px;
}
.lesson-list .lesson .lesson-title.test:before {
background: url(../img/icons/sprite_test.png) left top no-repeat;
background-size: 33px 60px;
}
.lesson-list .lesson .btn {
display: inline-block;
margin-left: auto;
}
.lesson-list .lesson.completed:before {
background-position: center bottom;
}
.lesson-list .lesson.completed .lesson-title {
color: #7e7e7e;
}
.edit-mode .lesson-list .lesson:before {
margin-right: 48px;
}
.edit-mode .lesson-list .lesson .lesson-title {
padding: 0 18px;
width: 70%;
}
.edit-mode .lesson-list .lesson.add-new {
padding-left: 20px;
}
.edit-mode .lesson-list .lesson.add-new:before {
display: block;
font-family: FontAwesome;
content: "";
font-size: 18px;
color: #7e7e7e;
}
.edit-mode .lesson-list .lesson.add-new a {
display: block;
}
.edit-mode .lesson-list .lesson.add-new .lesson-title {
color: #7e7e7e;
width: 100%;
}
.edit-mode .lesson-list .lesson.add-new .lesson-title:before {
background-image: url(../img/icons/icon_new-lesson.png);
background-size: 16px 20px;
}
.edit-mode .lesson-list .lesson.movable {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
padding-left: 20px;
}
.edit-mode .lesson-list .lesson.movable .handle {
display: block;
content: " ";
width: 12px;
height: 28px;
background: url(../img/icons/icon_handle-light.png?v2) center center no-repeat;
background-size: 12px 28px;
cursor: move;
}
.edit-mode .lesson-list .lesson.movable a {
flex-grow: 1;
}
/*
* Comment list + similar content + notes
*/
.comments .panel-heading, .similar-content .panel-heading, .notes .panel-heading {
padding: 0;
border-bottom: 1px solid #333;
}
.comments .panel-heading a, .similar-content .panel-heading a, .notes .panel-heading a {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
height: 60px;
padding-right: 15px;
}
.comments .panel-heading a:before, .similar-content .panel-heading a:before, .notes .panel-heading a:before {
display: block;
content: " ";
margin-right: 10px;
background: center center no-repeat;
background-size: contain;
}
.comments .panel-heading a[aria-expanded=true] .fa, .similar-content .panel-heading a[aria-expanded=true] .fa, .notes .panel-heading a[aria-expanded=true] .fa {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.comments .panel-heading a .fa, .similar-content .panel-heading a .fa, .notes .panel-heading a .fa {
margin-left: auto;
}
.comments .panel-heading .panel-title, .similar-content .panel-heading .panel-title, .notes .panel-heading .panel-title {
font-size: 20px;
font-weight: bold;
color: #333;
text-transform: uppercase;
}
.comments .comment-list, .similar-content .comment-list, .notes .comment-list {
box-shadow: none;
}
.comments .panel-collapse > *:first-child, .similar-content .panel-collapse > *:first-child, .notes .panel-collapse > *:first-child {
margin-top: 30px;
}
/*
* Comment list
*/
.comments .panel-heading a:before {
width: 20px;
height: 20px;
background-image: url(../img/icons/icon_comment.png?v2);
background-size: 20px 80px;
}
.course .comments .panel-heading a:before {
background-position: center 0px;
}
.topic .comments .panel-heading a:before {
background-position: center -20px;
}
.video .comments .panel-heading a:before {
background-position: center -40px;
}
.training .comments .panel-heading a:before {
background-position: center -60px;
}
/*
* Similar topics
*/
.similar-content .panel-heading a:before {
width: 16px;
height: 20px;
}
.similar-content .video-box {
margin-bottom: 40px;
}
.course .similar-content .panel-heading a:before {
width: 16px;
height: 20px;
background-image: url("../img/icons/icon_similar-course.png");
}
.topic .similar-content .panel-heading a:before {
width: 24px;
height: 24px;
background-image: url("../img/icons/icon_similar-topic.png");
}
.video .similar-content .panel-heading a:before {
width: 24px;
height: 24px;
background-image: url("../img/icons/icon_similar-video.png");
}
/*
* Notes
*/
.notes textarea {
display: block;
width: 100%;
height: 100px;
padding: 8px;
border: 0;
background: #f6f6f6;
font-size: 18px;
color: #7e7e7e;
}
.notes textarea + small {
margin-top: 10px;
font-size: 14px;
color: #333;
}
.notes .panel {
box-shadow: none;
}
.notes .panel-heading a:before {
width: 20px;
height: 22px;
background-image: url(../img/icons/icon_notes-video.png);
background-size: 20px 22px;
}
.notes.widget {
display: inline-block;
position: relative;
margin: 15px auto;
}
.notes.widget .widget-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
background: none;
position: relative;
width: 22px;
height: 24px;
cursor: pointer;
}
.notes.widget .widget-button img {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: auto;
-moz-transition: opacity 0.25s linear;
/* FF4+ */
-o-transition: opacity 0.25s linear;
/* Opera 10.5+ */
-webkit-transition: opacity 0.25s linear;
/* Saf3.2+, Chrome */
-ms-transition: opacity 0.25s linear;
/* IE10? */
transition: opacity 0.25s linear;
}
.notes.widget .widget-button img.act {
opacity: 0;
}
.notes.widget .widget-button:hover img.inact, .notes.widget .widget-button:focus img.inact, .notes.widget .widget-button.has-notes img.inact {
opacity: 0;
}
.notes.widget .widget-button:hover img.act, .notes.widget .widget-button:focus img.act, .notes.widget .widget-button.has-notes img.act {
opacity: 1;
}
.notes.widget .widget-popup {
position: absolute;
z-index: 2;
width: 300px;
padding: 10px;
background: #f6f6f6;
font-size: 16px;
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15);
}
.notes.widget .widget-popup:not(.show) {
display: none;
}
.notes.widget .widget-popup .header {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 10px;
}
.notes.widget .widget-popup .header .btn {
padding: 3px 12px;
}
.notes.widget .widget-popup textarea {
background: white;
font-size: 16px;
color: #333;
}
.notes.widget .widget-popup small {
color: #888;
}
.notes.widget .widget-popup.top-right {
top: 50%;
left: calc(100% + 30px);
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15);
}
.notes.widget .widget-popup.top-right:before {
display: inline-block;
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
top: 0;
left: -19px;
border-width: 0 19px 19px 0;
border-color: transparent #f6f6f6 transparent transparent;
}
.notes.widget .widget-popup.top-left {
top: 50%;
right: calc(100% + 30px);
box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.15);
}
.notes.widget .widget-popup.top-left:before {
display: inline-block;
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
top: 0;
right: -19px;
border-width: 19px 19px 0 0;
border-color: #f6f6f6 transparent transparent transparent;
}
.notes.widget .widget-popup.bottom-right {
bottom: 50%;
left: calc(100% + 30px);
box-shadow: 1px -1px 0 0 rgba(0, 0, 0, 0.15);
}
.notes.widget .widget-popup.bottom-right:before {
display: inline-block;
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
bottom: 0;
left: -19px;
border-width: 0 0 19px 19px;
border-color: transparent transparent #f6f6f6 transparent;
}
.notes.widget .widget-popup.bottom-left {
bottom: 50%;
right: calc(100% + 30px);
box-shadow: 0 0 rgba(0, 0, 0, 0.15);
}
.notes.widget .widget-popup.bottom-left:before {
display: inline-block;
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
bottom: 0;
right: -19px;
border-width: 19px 0 0 19px;
border-color: transparent transparent transparent #f6f6f6;
}
.notes.well {
margin: 18px auto;
padding: 12px;
border: 0;
border-radius: 0;
background: #f6f6f6;
font-size: 14px;
color: #888;
font-style: italic;
}
/**
* Test view
*/
.well.test-question {
font-size: 15px;
line-height: 30px;
}
.well.test-question h4 {
font-size: 22px;
}
.well.test-question label {
width: 90%;
font-weight: normal;
margin-left: 6px;
}
.well.test-question span.label {
float: right;
}
.well.test-question input[type=checkbox], .well.test-question input[type=radio] {
margin-top: 8px;
vertical-align: top;
}
/*
* Course info
*/
.course-info {
font-size: 18px;
}
.course-info > section {
margin-bottom: 14px;
border-top: 1px solid #eee;
word-wrap: break-word;
}
.course-info > section:first-child {
border-top: 0;
}
.course-info > section:first-child .info-title {
margin-top: 0;
}
.course-info > section.inline-title {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
padding-top: 20px;
}
.course-info > section.inline-title .info-title {
margin: 0 20px 0 0;
}
.course-info label {
font-weight: normal;
}
.course-info label > input[type=number] {
width: 50%;
}
.course-info .info-title {
margin-top: 10px;
color: #333;
text-transform: uppercase;
font-size: 20px;
}
.course-info .btn-sidebar {
height: 40px;
background: #eee;
}
.course-info .btn-sidebar:hover {
background: #e0e0e0;
}
.course-info .edit-btn, .course-info .remove-btn {
margin-left: auto;
}
.course-info .instructor {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
margin-bottom: 20px;
}
.course-info .instructor.open > .dropdown-menu {
right: 0;
top: auto;
margin-top: 35px;
}
div.avatar {
width: 40px;
height: 40px;
border-radius: 100%;
margin-right: 18px;
overflow: hidden;
}
div.avatar img {
width: 40px;
}
div.avatar img.landscape {
width: auto;
height: 40px;
}
/*
* Syllabus editor
*/
.syllabus-editor {
margin-left: auto;
}
.syllabus-editor.no-margin {
margin-left: 0;
}
.syllabus-editor button {
min-width: 40px;
height: 40px;
margin-left: 25px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
background: none;
font-size: 21px;
color: #808080;
text-align: center;
}
/*
* Info well
*/
.info.well {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 15px;
border-radius: 0;
font-size: 20px;
}
.info.well, .info.well .close-btn .fa {
color: white;
}
.info.well p {
margin: 0;
}
.info.well p.stars {
font-size: 15px;
}
.info.well p.stars .overall {
font-size: 20px;
}
.info.well .close-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
background: none;
font-size: 20px;
}
.topic .info.well {
background: #824ab7;
}
.course .info.well {
background: #12956e;
}
.video .info.well {
background: #0c6be2;
}
.training .info.well {
background: #F17025;
}
.message .info.well {
background: #b6b601;
}
/*
* Dropdown
*/
.dropdown ul {
width: 100%;
margin: 0;
border-radius: 0;
}
/*
* Embedded items
*/
.embed-responsive {
margin: 30px auto;
margin-bottom: 0px;
}
.content .embed-responsive:first-child {
margin-top: 0;
}
/*
* Topic content editor toolbar
*/
.content-editor .editor-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
background: none;
display: inline-block;
width: 38px;
height: 38px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
}
.content-editor .editor-btn.move {
cursor: move;
}
.content-editor .editor-btn.add {
background: url("../img/icons/icon_add.png") center center no-repeat;
background-size: 21px 21px;
}
.content-editor .editor-btn.edit {
background: url("../img/icons/icon_edit.png") center center no-repeat;
background-size: 18px 18px;
}
.content-editor .editor-btn.move {
background: url("../img/icons/icon_move.png") center center no-repeat;
background-size: 28px 18px;
}
.content-editor .editor-btn.copy {
background: url("../img/icons/icon_copy.png") center center no-repeat;
background-size: 18px 21px;
}
.content-editor .editor-btn.remove {
background: url("../img/icons/icon_remove.png") center center no-repeat;
background-size: 16px 22px;
}
/*
* Progress bar
*/
.progress-container {
font-size: 18px;
color: #333;
}
.progress-container .progress, .progress-container .progress-bar {
/* FF1+ */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
/* Saf3-4, iOS 1+, Android 1.5+ */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* Opera 10.5, IE9, Saf5, Chrome, FF4 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.progress-container .progress {
height: 10px;
margin-top: 5px;
background: #f6f6f6;
}
.progress-container.topic .progress-bar {
background: #824ab7;
}
.progress-container.course .progress-bar {
background: #12956e;
}
.progress-container.video .progress-bar {
background: #0c6be2;
}
.progress-container.training .progress-bar {
background: #F17025;
}
.progress-container.message .progress-bar {
background: #b6b601;
}
.progress-container .progress-bar[aria-valuenow="0"] {
width: 0%;
}
.progress-container .progress-bar[aria-valuenow="1"] {
width: 1%;
}
.progress-container .progress-bar[aria-valuenow="2"] {
width: 2%;
}
.progress-container .progress-bar[aria-valuenow="3"] {
width: 3%;
}
.progress-container .progress-bar[aria-valuenow="4"] {
width: 4%;
}
.progress-container .progress-bar[aria-valuenow="5"] {
width: 5%;
}
.progress-container .progress-bar[aria-valuenow="6"] {
width: 6%;
}
.progress-container .progress-bar[aria-valuenow="7"] {
width: 7%;
}
.progress-container .progress-bar[aria-valuenow="8"] {
width: 8%;
}
.progress-container .progress-bar[aria-valuenow="9"] {
width: 9%;
}
.progress-container .progress-bar[aria-valuenow="10"] {
width: 10%;
}
.progress-container .progress-bar[aria-valuenow="11"] {
width: 11%;
}
.progress-container .progress-bar[aria-valuenow="12"] {
width: 12%;
}
.progress-container .progress-bar[aria-valuenow="13"] {
width: 13%;
}
.progress-container .progress-bar[aria-valuenow="14"] {
width: 14%;
}
.progress-container .progress-bar[aria-valuenow="15"] {
width: 15%;
}
.progress-container .progress-bar[aria-valuenow="16"] {
width: 16%;
}
.progress-container .progress-bar[aria-valuenow="17"] {
width: 17%;
}
.progress-container .progress-bar[aria-valuenow="18"] {
width: 18%;
}
.progress-container .progress-bar[aria-valuenow="19"] {
width: 19%;
}
.progress-container .progress-bar[aria-valuenow="20"] {
width: 20%;
}
.progress-container .progress-bar[aria-valuenow="21"] {
width: 21%;
}
.progress-container .progress-bar[aria-valuenow="22"] {
width: 22%;
}
.progress-container .progress-bar[aria-valuenow="23"] {
width: 23%;
}
.progress-container .progress-bar[aria-valuenow="24"] {
width: 24%;
}
.progress-container .progress-bar[aria-valuenow="25"] {
width: 25%;
}
.progress-container .progress-bar[aria-valuenow="26"] {
width: 26%;
}
.progress-container .progress-bar[aria-valuenow="27"] {
width: 27%;
}
.progress-container .progress-bar[aria-valuenow="28"] {
width: 28%;
}
.progress-container .progress-bar[aria-valuenow="29"] {
width: 29%;
}
.progress-container .progress-bar[aria-valuenow="30"] {
width: 30%;
}
.progress-container .progress-bar[aria-valuenow="31"] {
width: 31%;
}
.progress-container .progress-bar[aria-valuenow="32"] {
width: 32%;
}
.progress-container .progress-bar[aria-valuenow="33"] {
width: 33%;
}
.progress-container .progress-bar[aria-valuenow="34"] {
width: 34%;
}
.progress-container .progress-bar[aria-valuenow="35"] {
width: 35%;
}
.progress-container .progress-bar[aria-valuenow="36"] {
width: 36%;
}
.progress-container .progress-bar[aria-valuenow="37"] {
width: 37%;
}
.progress-container .progress-bar[aria-valuenow="38"] {
width: 38%;
}
.progress-container .progress-bar[aria-valuenow="39"] {
width: 39%;
}
.progress-container .progress-bar[aria-valuenow="40"] {
width: 40%;
}
.progress-container .progress-bar[aria-valuenow="41"] {
width: 41%;
}
.progress-container .progress-bar[aria-valuenow="42"] {
width: 42%;
}
.progress-container .progress-bar[aria-valuenow="43"] {
width: 43%;
}
.progress-container .progress-bar[aria-valuenow="44"] {
width: 44%;
}
.progress-container .progress-bar[aria-valuenow="45"] {
width: 45%;
}
.progress-container .progress-bar[aria-valuenow="46"] {
width: 46%;
}
.progress-container .progress-bar[aria-valuenow="47"] {
width: 47%;
}
.progress-container .progress-bar[aria-valuenow="48"] {
width: 48%;
}
.progress-container .progress-bar[aria-valuenow="49"] {
width: 49%;
}
.progress-container .progress-bar[aria-valuenow="50"] {
width: 50%;
}
.progress-container .progress-bar[aria-valuenow="51"] {
width: 51%;
}
.progress-container .progress-bar[aria-valuenow="52"] {
width: 52%;
}
.progress-container .progress-bar[aria-valuenow="53"] {
width: 53%;
}
.progress-container .progress-bar[aria-valuenow="54"] {
width: 54%;
}
.progress-container .progress-bar[aria-valuenow="55"] {
width: 55%;
}
.progress-container .progress-bar[aria-valuenow="56"] {
width: 56%;
}
.progress-container .progress-bar[aria-valuenow="57"] {
width: 57%;
}
.progress-container .progress-bar[aria-valuenow="58"] {
width: 58%;
}
.progress-container .progress-bar[aria-valuenow="59"] {
width: 59%;
}
.progress-container .progress-bar[aria-valuenow="60"] {
width: 60%;
}
.progress-container .progress-bar[aria-valuenow="61"] {
width: 61%;
}
.progress-container .progress-bar[aria-valuenow="62"] {
width: 62%;
}
.progress-container .progress-bar[aria-valuenow="63"] {
width: 63%;
}
.progress-container .progress-bar[aria-valuenow="64"] {
width: 64%;
}
.progress-container .progress-bar[aria-valuenow="65"] {
width: 65%;
}
.progress-container .progress-bar[aria-valuenow="66"] {
width: 66%;
}
.progress-container .progress-bar[aria-valuenow="67"] {
width: 67%;
}
.progress-container .progress-bar[aria-valuenow="68"] {
width: 68%;
}
.progress-container .progress-bar[aria-valuenow="69"] {
width: 69%;
}
.progress-container .progress-bar[aria-valuenow="70"] {
width: 70%;
}
.progress-container .progress-bar[aria-valuenow="71"] {
width: 71%;
}
.progress-container .progress-bar[aria-valuenow="72"] {
width: 72%;
}
.progress-container .progress-bar[aria-valuenow="73"] {
width: 73%;
}
.progress-container .progress-bar[aria-valuenow="74"] {
width: 74%;
}
.progress-container .progress-bar[aria-valuenow="75"] {
width: 75%;
}
.progress-container .progress-bar[aria-valuenow="76"] {
width: 76%;
}
.progress-container .progress-bar[aria-valuenow="77"] {
width: 77%;
}
.progress-container .progress-bar[aria-valuenow="78"] {
width: 78%;
}
.progress-container .progress-bar[aria-valuenow="79"] {
width: 79%;
}
.progress-container .progress-bar[aria-valuenow="80"] {
width: 80%;
}
.progress-container .progress-bar[aria-valuenow="81"] {
width: 81%;
}
.progress-container .progress-bar[aria-valuenow="82"] {
width: 82%;
}
.progress-container .progress-bar[aria-valuenow="83"] {
width: 83%;
}
.progress-container .progress-bar[aria-valuenow="84"] {
width: 84%;
}
.progress-container .progress-bar[aria-valuenow="85"] {
width: 85%;
}
.progress-container .progress-bar[aria-valuenow="86"] {
width: 86%;
}
.progress-container .progress-bar[aria-valuenow="87"] {
width: 87%;
}
.progress-container .progress-bar[aria-valuenow="88"] {
width: 88%;
}
.progress-container .progress-bar[aria-valuenow="89"] {
width: 89%;
}
.progress-container .progress-bar[aria-valuenow="90"] {
width: 90%;
}
.progress-container .progress-bar[aria-valuenow="91"] {
width: 91%;
}
.progress-container .progress-bar[aria-valuenow="92"] {
width: 92%;
}
.progress-container .progress-bar[aria-valuenow="93"] {
width: 93%;
}
.progress-container .progress-bar[aria-valuenow="94"] {
width: 94%;
}
.progress-container .progress-bar[aria-valuenow="95"] {
width: 95%;
}
.progress-container .progress-bar[aria-valuenow="96"] {
width: 96%;
}
.progress-container .progress-bar[aria-valuenow="97"] {
width: 97%;
}
.progress-container .progress-bar[aria-valuenow="98"] {
width: 98%;
}
.progress-container .progress-bar[aria-valuenow="99"] {
width: 99%;
}
.progress-container .progress-bar[aria-valuenow="100"] {
width: 100%;
}
/*
* Sidebar unit list
*/
.sidebar-unit-list h5 {
font-size: 18px;
color: #333;
}
.sidebar-unit-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-unit-list li {
border-style: solid;
border-color: #eee;
border-width: 0 0 1px;
font-size: 14px;
color: #7e7e7e;
/** Current color **/
}
.sidebar-unit-list li:first-child {
border-top-width: 1px;
}
.sidebar-unit-list li, .sidebar-unit-list li a {
display: block;
}
.sidebar-unit-list li a {
position: relative;
padding: 12px 15px 12px 35px;
font-size: 16px;
}
.sidebar-unit-list li a:before {
display: block;
content: " ";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 21px;
background: url("../img/icons/sprite_lesson.png?v2") no-repeat;
background-size: 33px 63px;
background-position: 0 0;
}
.sidebar-unit-list li.test a:before {
width: 16px;
height: 21px;
background: url("../img/icons/sprite_test.png?v2") no-repeat;
background-size: 33px 63px;
background-position: 0 0;
}
.sidebar-unit-list li.completed a {
color: #7e7e7e;
}
.sidebar-unit-list li.completed a:before {
width: 16px;
height: 21px;
background: url("../img/icons/sprite_lesson.png?v2") no-repeat;
background-size: 33px 63px;
background-position: 0 -21px;
}
.sidebar-unit-list li.test.completed a:before {
width: 16px;
height: 21px;
background: url("../img/icons/sprite_test.png?v2") no-repeat;
background-size: 33px 63px;
background-position: 0 -21px;
}
.sidebar-unit-list li.current {
background-color: rgba(18, 149, 110, 0.6);
border-color: #12956e;
}
.sidebar-unit-list li.current a {
color: white;
}
.sidebar-unit-list li.current a:before {
left: 10px;
width: 16px;
height: 21px;
background: url("../img/icons/sprite_lesson.png?v2") no-repeat;
background-size: 33px 63px;
background-position: -17px -42px;
}
.sidebar-unit-list li.current.test a:before {
width: 16px;
height: 21px;
background: url("../img/icons/sprite_test.png?v2") no-repeat;
background-size: 33px 63px;
background-position: -17px -42px;
}
/*
* Workspace list section
*/
.workspace-section {
margin-bottom: 60px;
}
.workspace-section .workspace-header {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: flex-start;
justify-content: flex-start;
width: 100%;
margin-bottom: 30px;
}
.workspace-section .workspace-header .tabs, .workspace-section .workspace-header .course-enroll {
border-bottom: 1px solid #eee;
}
.workspace-section .workspace-header .tabs {
width: 75%;
list-style: none;
margin: 0;
padding: 0 15px 0 0;
}
.workspace-section .workspace-header .tabs li, .workspace-section .workspace-header .tabs a {
display: inline-block;
}
.workspace-section .workspace-header .tabs a {
padding: 18px 25px 25px;
border-bottom: 1px solid transparent;
font-size: 17px;
color: #7e7e7e;
text-transform: uppercase;
transform: translateY(1px);
transition: color 0.25s linear, border-color 0.25s linear;
}
.workspace-section .workspace-header .tabs.topic .active a {
border-color: #824ab7;
color: #824ab7;
}
.workspace-section .workspace-header .tabs.course .active a {
border-color: #12956e;
color: #12956e;
}
.workspace-section .workspace-header .tabs.video .active a {
border-color: #0c6be2;
color: #0c6be2;
}
.workspace-section .workspace-header .tabs.training .active a {
border-color: #F17025;
color: #F17025;
}
.workspace-section .workspace-header .tabs.message .active a {
border-color: #b6b601;
color: #b6b601;
}
.workspace-section .workspace-header .course-enroll {
width: 25%;
padding-left: 15px;
}
/*
* Workspace shortcut button
*/
.workspace-shortcut-wrap {
position: fixed;
right: 0;
bottom: 20px;
z-index: 10;
width: 50px;
}
.workspace-shortcut-wrap span.text {
display: none;
}
.workspace-shortcut-wrap:hover, .workspace-shortcut-wrap.active {
width: auto;
}
.workspace-shortcut-wrap:hover span.text, .workspace-shortcut-wrap.active span.text {
display: inline;
}
.workspace-shortcut-wrap:hover .workspace-shortcut, .workspace-shortcut-wrap.active .workspace-shortcut {
right: 0px;
transition: all 1s ease-in-out;
}
.workspace-shortcut-wrap .workspace-shortcut {
display: block;
padding: 15px;
background: #0c6be2;
color: white;
text-transform: uppercase;
cursor: pointer;
right: 50px;
transition: all 1s ease-in-out;
}
.workspace-shortcut-wrap .workspace-shortcut > * {
vertical-align: middle;
}
.workspace-shortcut-wrap i.fa {
margin-right: 25px;
font-size: 20px;
}
.workspace-shortcut-wrap.action1-shortcut {
bottom: 150px;
}
.workspace-shortcut-wrap.action1-shortcut .workspace-shortcut {
background: #12956e;
}
.workspace-shortcut-wrap.action2-shortcut {
bottom: 215px;
}
.workspace-shortcut-wrap.action2-shortcut .workspace-shortcut {
background: #12956e;
}
.workspace-shortcut-wrap.bug-shortcut {
bottom: 85px;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut {
background: #063365;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut .bug-form {
display: none;
flex-wrap: wrap;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut .bug-form textarea {
width: 100%;
height: 100px;
padding: 3px;
margin-top: 15px;
margin-bottom: 10px;
color: black;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut .bug-form button {
margin: 3px;
width: 50%;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut .bug-form button.bug-close {
width: 43px;
float: right;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut.on {
cursor: default;
transform: translateX(0);
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut.on h5 {
margin-right: 20px;
}
.workspace-shortcut-wrap.bug-shortcut .workspace-shortcut.on div.bug-form {
display: flex;
}
.workspace-shortcut-wrap .rect-icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 15px;
}
.workspace-shortcut-wrap .rect-icon .rect {
display: block;
width: 8px;
height: 8px;
border: 2px solid white;
}
.workspace-shortcut-wrap .rect-icon .rect:nth-of-type(1), .workspace-shortcut-wrap .rect-icon .rect:nth-of-type(2) {
margin-bottom: 4px;
}
.workspace-shortcut-wrap .rect-icon .rect:nth-of-type(odd) {
float: left;
}
.workspace-shortcut-wrap .rect-icon .rect:nth-of-type(even) {
float: right;
}
/*
* Context menu
*/
.context-dropdown {
display: inline-block;
position: relative;
}
.context-dropdown > a {
height: 100%;
line-height: 1;
font-weight: bold;
box-shadow: inset 1px 0 1px 0 rgba(0, 0, 0, 0.25);
}
.context-dropdown .dropdown-menu {
top: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
}
.context-dropdown .dropdown-menu:before {
display: block;
content: " ";
position: absolute;
top: -8px;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent white transparent;
transform: translateX(-50%);
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.context-dropdown .dropdown-menu > li > a {
margin: 0 15px;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.context-dropdown .dropdown-menu > li:last-child > a {
border: 0;
}
/*
* Workspace first visit banners
*/
.first-visit {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0 15px;
}
.first-visit .video-box {
width: 25%;
margin: 0 15px 0 0;
}
.first-visit .intro-banner {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 75%;
margin-left: 15px;
padding: 15px;
}
.first-visit .intro-banner .banner-txt {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
color: white;
}
.first-visit .intro-banner .banner-txt h3 {
margin-top: 0;
}
.first-visit .intro-banner .banner-txt p {
margin-bottom: 0;
}
.first-visit .intro-banner .banner-buttons {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
.first-visit .intro-banner .banner-buttons .btn {
margin-bottom: 15px;
}
.first-visit .intro-banner .banner-buttons .btn:last-child {
margin: 0;
}
.first-visit.topic .video-box {
background: #351e4a;
}
.first-visit.topic .intro-banner {
background: #824ab7 url(../img/bg_first-visit-banner.png) right bottom no-repeat;
}
.first-visit.course .video-box {
background: #0a513c;
}
.first-visit.course .intro-banner {
background: #12956e url(../img/bg_first-visit-banner.png) right bottom no-repeat;
}
.first-visit.video .video-box {
background: #042651;
}
.first-visit.video .intro-banner {
background: #0c6be2 url(../img/bg_first-visit-banner.png) right bottom no-repeat;
}
.first-visit.training .video-box {
background: #753008;
}
.first-visit.training .intro-banner {
background: #F17025 url(../img/bg_first-visit-banner.png) right bottom no-repeat;
}
.first-visit.message .video-box {
background: #1e1e00;
}
.first-visit.message .intro-banner {
background: #b6b601 url(../img/bg_first-visit-banner.png) right bottom no-repeat;
}
/****
/ Media queries
/****/
@media (max-width: 991px) {
.course-enroll {
text-align: right;
}
}
@media (max-width: 767px) {
.page-title {
text-align: center;
}
.icon {
width: 44px;
height: 44px;
background-size: 217.9692307692px 20.3076923077px;
}
.icon.search {
background-position: 13.5384615385px center;
}
.icon.login {
background-position: -39.2615384615px center;
}
.icon.language {
background-position: -90.7076923077px center;
}
.icon.more {
background-position: -143.5076923077px center;
}
.icon.mail {
background-position: -184.1230769231px center;
}
.info.well {
display: block;
}
.search-section button.btn.filter-btn {
width: 45%;
min-width: auto;
margin-left: 1%;
margin-right: 1%;
font-size: 13px;
}
.search-section.hero {
height: auto;
padding: 10px;
margin-top: 44px;
}
.search-section.hero h2 {
margin-top: 0px;
font-size: 13.5384615385px;
}
.search-section.hero h2 strong {
font-size: 31.1384615385px;
}
.search-section.hero .search-group {
width: 100%;
max-width: 520px;
}
.search-section.hero div.eu {
bottom: auto;
top: 5px;
}
.search-section.hero div.eu img {
width: 50px;
}
.search-section.hero div.eu p {
font-size: 8px;
}
.course-toolbar, .course-enroll, .topic-enroll, .training-enroll {
margin-bottom: 20px;
text-align: center;
}
.course-toolbar {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.course-admin-notice h5, .topic-admin-notice h5, .training-admin-notice h5, .test-admin-notice h5 {
font-size: 16px;
}
.course-admin-notice p, .topic-admin-notice p, .training-admin-notice p, .test-admin-notice p {
font-size: 12px;
}
.course-admin-notice button.btn, .topic-admin-notice button.btn, .training-admin-notice button.btn, .test-admin-notice button.btn {
font-size: 12px;
padding: 10px;
}
.course-admin-notice, .course-admin-notice .publish-btns, .topic-admin-notice, .topic-admin-notice .publish-btns, .training-admin-notice, .training-admin-notice .publish-btns, .test-admin-notice, .test-admin-notice .publish-btns {
display: block;
text-align: center;
}
.course-admin-notice .publish-btns .btn, .topic-admin-notice .publish-btns .btn, .training-admin-notice .publish-btns .btn, .test-admin-notice .publish-btns .btn {
margin: 10px auto;
}
.course-unit-list:not(.edit-mode) .lesson, .training-course-list:not(.edit-mode) .lesson {
display: block;
}
.course-unit-list .lesson, .training-course-list .lesson {
height: auto;
padding: 20px;
}
.course-unit-list .lesson .lesson-title, .course-unit-list .lesson .btn, .training-course-list .lesson .lesson-title, .training-course-list .lesson .btn {
display: block;
}
.course-unit-list .lesson .btn, .training-course-list .lesson .btn {
width: 100%;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading, .course-unit-list.edit-mode .training-course.movable .panel-heading, .training-course-list.edit-mode .course-unit.movable .panel-heading, .training-course-list.edit-mode .training-course.movable .panel-heading {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: space-between;
justify-content: space-between;
padding-top: 20px;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading div, .course-unit-list.edit-mode .training-course.movable .panel-heading div, .training-course-list.edit-mode .course-unit.movable .panel-heading div, .training-course-list.edit-mode .training-course.movable .panel-heading div {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
height: auto;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading .syllabus-editor, .course-unit-list.edit-mode .training-course.movable .panel-heading .syllabus-editor, .training-course-list.edit-mode .course-unit.movable .panel-heading .syllabus-editor, .training-course-list.edit-mode .training-course.movable .panel-heading .syllabus-editor {
margin-left: 0;
}
.course-unit-list.edit-mode .course-unit.movable .panel-heading .syllabus-editor button:first-child, .course-unit-list.edit-mode .training-course.movable .panel-heading .syllabus-editor button:first-child, .training-course-list.edit-mode .course-unit.movable .panel-heading .syllabus-editor button:first-child, .training-course-list.edit-mode .training-course.movable .panel-heading .syllabus-editor button:first-child {
margin-left: 45px;
}
.course-unit-list.edit-mode .lesson-list .lesson.movable, .training-course-list.edit-mode .lesson-list .lesson.movable {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
padding-top: 20px;
}
.course-unit-list.edit-mode .lesson-list .lesson.movable:before, .course-unit-list.edit-mode .lesson-list .lesson.movable h5, .course-unit-list.edit-mode .lesson-list .lesson.movable .syllabus-editor, .training-course-list.edit-mode .lesson-list .lesson.movable:before, .training-course-list.edit-mode .lesson-list .lesson.movable h5, .training-course-list.edit-mode .lesson-list .lesson.movable .syllabus-editor {
margin: 0;
}
.course-unit-list.edit-mode .lesson-list .lesson.movable h5, .training-course-list.edit-mode .lesson-list .lesson.movable h5 {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.course-unit-list.edit-mode .lesson-list .lesson.movable h5:before, .training-course-list.edit-mode .lesson-list .lesson.movable h5:before {
vertical-align: middle;
}
.course-unit-list.edit-mode .lesson-list .lesson.movable .syllabus-editor button:first-child, .training-course-list.edit-mode .lesson-list .lesson.movable .syllabus-editor button:first-child {
margin-left: 65px;
}
.course-unit-list.edit-mode .lesson-list .lesson.add-new:before, .training-course-list.edit-mode .lesson-list .lesson.add-new:before {
margin: 0;
}
}
@media (max-width: 480px) {
.info.well span {
display: block;
}
.workspace-shortcut-wrap {
width: 35px;
}
.workspace-shortcut-wrap .workspace-shortcut {
right: 35px;
padding: 10px;
}
.workspace-shortcut-wrap.bug-shortcut {
bottom: 70px;
}
.workspace-shortcut-wrap i.fa, .workspace-shortcut-wrap span {
font-size: 15px;
margin-right: 5px;
}
}
body.embed {
margin: 0;
padding: 0;
}
body.embed .embed-responsive {
margin: 0;
}
body.embed textarea {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}
/* Cookie Dialog */
#gdpr-cookie-message {
position: fixed;
left: 30px;
bottom: 30px;
max-width: 375px;
background-color: rgba(19, 21, 22, 0.8);
padding: 20px;
border-radius: 5px;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.25);
margin-right: 30px;
font-family: system-ui;
z-index: 10000;
}
#gdpr-cookie-message h4 {
color: white;
font-family: "Quicksand", sans-serif;
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
}
#gdpr-cookie-message h5 {
color: white;
font-family: "Quicksand", sans-serif;
font-size: 15px;
font-weight: 500;
margin-bottom: 10px;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
color: white;
font-size: 15px;
line-height: 1.5em;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
color: white;
font-size: 15px;
line-height: 1.5em;
}
#gdpr-cookie-message li {
width: 49%;
display: inline-block;
}
#gdpr-cookie-message a {
color: var(--red);
text-decoration: none;
font-size: 15px;
padding-bottom: 2px;
border-bottom: 1px dotted rgba(255, 255, 255, 0.75);
transition: all 0.3s ease-in;
}
#gdpr-cookie-message a:hover {
color: white;
border-bottom-color: var(--red);
transition: all 0.3s ease-in;
}
#gdpr-cookie-message button,
#gdpr-cookie-message button#ihavecookiesBtn {
border: none;
background: #0c6be2;
color: white;
font-family: "Quicksand", sans-serif;
font-size: 15px;
padding: 7px;
border-radius: 3px;
margin-left: 15px;
cursor: pointer;
transition: all 0.3s ease-in;
}
#gdpr-cookie-message button#gdpr-cookie-advanced {
background: #063365;
color: white;
}
#gdpr-cookie-message button:hover {
background: white;
color: #0c6be2;
transition: all 0.3s ease-in;
}
#gdpr-cookie-message button:disabled {
opacity: 0.3;
}
#gdpr-cookie-message button:disabled {
opacity: 0.3;
}
/*
* page.html
*/
.generic-page, .contentpage-widget-editor {
/*
* Header
*/
/*
* Content
*/
}
.generic-page .page-header, .contentpage-widget-editor .page-header {
margin: 0;
padding: 10px 0 25px;
background: #f1f1f1;
color: #333;
}
.generic-page .page-header h1, .contentpage-widget-editor .page-header h1 {
font-size: 34px;
}
.generic-page .page-header h2, .contentpage-widget-editor .page-header h2 {
font-size: 18px;
}
.generic-page .page-header h1 + h2, .contentpage-widget-editor .page-header h1 + h2 {
margin-top: 10px;
}
.generic-page figure.author, .contentpage-widget-editor figure.author {
text-align: center;
}
.generic-page figure.author div.avatar, .contentpage-widget-editor figure.author div.avatar {
width: 100px;
margin-left: 0;
text-align: center;
}
.generic-page figure.author figcaption, .contentpage-widget-editor figure.author figcaption {
font-size: 15px;
width: 100px;
text-align: center;
}
.generic-page .page-content, .generic-page .ofw-field-textarea, .contentpage-widget-editor .page-content, .contentpage-widget-editor .ofw-field-textarea {
padding: 60px 0 20px;
/** Aspect ratio trick: http://www.mademyday.de/css-height-equals-width-with-pure-css.html **/
}
.generic-page .page-content blockquote, .generic-page .ofw-field-textarea blockquote, .contentpage-widget-editor .page-content blockquote, .contentpage-widget-editor .ofw-field-textarea blockquote {
margin-top: 20px;
}
.generic-page .page-content h2, .generic-page .ofw-field-textarea h2, .contentpage-widget-editor .page-content h2, .contentpage-widget-editor .ofw-field-textarea h2 {
font-weight: 300;
font-size: 34px;
}
.generic-page .page-content h3, .generic-page .page-content h4, .generic-page .ofw-field-textarea h3, .generic-page .ofw-field-textarea h4, .contentpage-widget-editor .page-content h3, .contentpage-widget-editor .page-content h4, .contentpage-widget-editor .ofw-field-textarea h3, .contentpage-widget-editor .ofw-field-textarea h4 {
font-weight: 400;
font-size: 22px;
}
.generic-page .page-content p, .generic-page .ofw-field-textarea p, .contentpage-widget-editor .page-content p, .contentpage-widget-editor .ofw-field-textarea p {
margin-bottom: 12px;
}
.generic-page .page-content p, .generic-page .page-content li, .generic-page .ofw-field-textarea p, .generic-page .ofw-field-textarea li, .contentpage-widget-editor .page-content p, .contentpage-widget-editor .page-content li, .contentpage-widget-editor .ofw-field-textarea p, .contentpage-widget-editor .ofw-field-textarea li {
font-size: 18px;
line-height: 26px;
font-weight: 400;
}
.generic-page .page-content a.img:before, .generic-page .ofw-field-textarea a.img:before, .contentpage-widget-editor .page-content a.img:before, .contentpage-widget-editor .ofw-field-textarea a.img:before {
content: "";
display: block;
padding-top: 56.25%;
}
.generic-page .page-content a.img, .generic-page .ofw-field-textarea a.img, .contentpage-widget-editor .page-content a.img, .contentpage-widget-editor .ofw-field-textarea a.img {
position: relative;
overflow: hidden;
display: block !important;
margin-right: 1%;
width: 49%;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.generic-page .page-content a.img.small, .generic-page .ofw-field-textarea a.img.small, .contentpage-widget-editor .page-content a.img.small, .contentpage-widget-editor .ofw-field-textarea a.img.small {
width: 19%;
}
.generic-page .page-content a.img img.img-thumbnail, .generic-page .ofw-field-textarea a.img img.img-thumbnail, .contentpage-widget-editor .page-content a.img img.img-thumbnail, .contentpage-widget-editor .ofw-field-textarea a.img img.img-thumbnail {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/*
* Topic profile admin, lesson profile student
*/
.editable-content, .with-student-notes {
margin-bottom: 20px;
}
.editable-content .row:last-child, .with-student-notes .row:last-child {
margin-top: 0;
}
.editable-content .content-aside, .editable-content .content, .with-student-notes .content-aside, .with-student-notes .content {
padding: 0 15px;
}
.editable-content .content-aside .widget-videos span.help-block, .editable-content .content .widget-videos span.help-block, .with-student-notes .content-aside .widget-videos span.help-block, .with-student-notes .content .widget-videos span.help-block {
padding-top: 15px;
}
.editable-content .bottom-btns, .with-student-notes .bottom-btns {
margin-top: 30px;
}
.editable-content .bottom-btns .btn, .with-student-notes .bottom-btns .btn {
min-width: 260px;
height: 50px;
}
.editable-content .bottom-btns .btn .glyphicon, .with-student-notes .bottom-btns .btn .glyphicon {
margin-right: 5px;
}
.editable-content .bottom-btns .pull-right, .with-student-notes .bottom-btns .pull-right {
margin-left: 15px;
}
.editable-content .content-aside {
width: 22.2222222222%;
}
.editable-content .content-aside + .content {
width: 77.7777777778%;
}
.editable-content main.content {
background-color: #F9F9FA;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid gray;
border-radius: 5px;
}
.editable-content ul[data-radio=answerList] input[type=text] {
width: 90%;
}
.editable-content .row {
transition: box-shadow 0.3s linear, transform 0.25s linear, -webkit-transform 0.25s linear;
}
.editable-content .row:last-child {
box-shadow: none;
transform: none;
}
.editable-content .content-aside, .editable-content .content {
float: left;
}
.with-student-notes .content-aside {
position: relative;
width: 0;
padding: 0;
}
.with-student-notes .content-aside + .content {
width: 100%;
margin: 15px 0;
}
.with-student-notes .content-aside .notes.widget {
display: none;
}
.with-student-notes .row {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
@media (max-width: 991px) {
.editable-content .content-aside, .with-student-notes .content-aside {
float: none;
}
.editable-content .bottom-btns, .with-student-notes .bottom-btns {
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
.editable-content .bottom-btns .btn, .with-student-notes .bottom-btns .btn {
margin: 10px;
}
}
@media (max-width: 480px) {
.with-student-notes .content-aside {
width: 20px;
padding: 0;
}
.with-student-notes .content-aside .notes.widget {
left: 5px;
}
.with-student-notes .content-aside .notes.widget .widget-popup.top-right {
width: 200px;
}
.with-student-notes .content-aside + .content {
width: calc(100% - 20px);
}
}
/*# sourceMappingURL=style.css.map */