Skip to content

E
edx-platform
Commit 5c6c3a34 by Galen Frechette Committed by Matthew Mongeau
Options

gets app completly uptodate with prototype

parent 9cc46adf
Showing with 4125 additions and 2989 deletions
lms/static/js/sticky_filter.js 0 → 100644
$(function() {
var offset = $('.filter nav').offset().top;
$(window).scroll(function() {
if (offset <= window.pageYOffset) {
return $('.filter nav').addClass('fixed-top');
}
else if (offset >= window.pageYOffset) {
return $('.filter nav').removeClass('fixed-top');
}
});
});
lms/static/js/sticky_footer.js 0 → 100644
$(function() {
var stickyFooter = function(){
var pageHeight = $('html').height();
var windowHeight = $(window).height();
var footerHeight = $('footer').outerHeight();
var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight;
if (windowHeight < totalHeight) {
return $('footer').removeClass('fixed-bottom');
} else {
return $('footer').addClass('fixed-bottom');
}
};
stickyFooter();
$(window).resize(function() {
console.log("resizing");
stickyFooter();
});
});
lms/static/sass/_base.scss
...@@ -17,8 +17,6 @@ $pink: rgb(182,37,104); ...@@ -17,8 +17,6 @@ $pink: rgb(182,37,104);
html, body { html, body {
background: rgb(255,255,255); background: rgb(255,255,255);
font-size: 75%; font-size: 75%;
min-height: 100%;
margin: 0px 0px -140px 0px;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
......
lms/static/sass/_base_extends.scss
...@@ -9,277 +9,3 @@ ...@@ -9,277 +9,3 @@
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
article.course {
background: rgb(240,240,240);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
font-size: 0em;
min-height: 100px;
margin-bottom: 20px;
padding: 10px;
@include transition(all, 0.15s, linear);
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade {
background: rgba(0,0,0, 0.3);
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%;
}
}
.info {
margin-left: 115px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
margin-right: 80px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.8rem/2.5rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
&:hover {
opacity: 0.9;
}
> * {
height: 18px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.end-date {
border-left: 1px solid rgb(200,200,200);
right: 0px;
padding-left: 15px;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px;
right: 140px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
}
}
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
cursor: pointer;
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
h2 {
//color: $blue;
//text-decoration: underline;
}
.meta {
opacity: 0.9;
}
}
}
lms/static/sass/_dashboard.scss
.dashboard { .dashboard {
@include clearfix; @include clearfix;
margin: 40px 10px; margin: 40px 10px;
}
.sidebar { .sidebar {
background: rgb(240,240,240); background: rgb(240,240,240);
float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(3); position: absolute;
width: 250px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
float: none; float: none;
margin: 0 0 30px 0; margin: 0 0 30px 0;
position: static;
width: flex-grid(12); width: flex-grid(12);
} }
...@@ -30,10 +30,10 @@ ...@@ -30,10 +30,10 @@
overflow: hidden; overflow: hidden;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
float: left;
margin: 0px; margin: 0px;
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(3); position: absolute;
width: 100px;
} }
img { img {
...@@ -45,8 +45,11 @@ ...@@ -45,8 +45,11 @@
.info { .info {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@include box-sizing(border-box);
float: left; float: left;
width: flex-grid(9); min-height: 100px;
padding-left: 110px;
width: 100%;
} }
h2 { h2 {
...@@ -102,19 +105,23 @@ ...@@ -102,19 +105,23 @@
} }
} }
} }
} }
.courses {
@include box-sizing(border-box);
margin: 0px;
padding-left: 270px;
.courses { @media screen and (max-width: 768px) {
float: left; padding: 0px;
width: flex-grid(9); }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
float: none; float: none;
width: flex-grid(12); width: flex-grid(12);
} }
nav.course-filters { nav.course-toggle {
background: rgb(230,230,230); background: rgb(230,230,230);
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
...@@ -156,4 +163,9 @@ ...@@ -156,4 +163,9 @@
} }
} }
} }
.course {
width: flex-grid(12);
}
}
} }
lms/static/sass/_find_courses.scss
.find-courses { .find-courses {
margin: 0 10px; header {
background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
width: 100%;
> header { .inner-wrapper {
margin-bottom: 30px;
.universities {
margin: 10px auto;
opacity: 0.7;
width: flex-grid(4);
img {
max-width: 100%;
}
span.divider {
@extend .faded-vertical-divider;
@include inline-block;
height: 120px; height: 120px;
vertical-align: middle; margin: 0 auto;
} max-width: 1200px;
} overflow: hidden;
padding: 40px 0px 30px;
position: relative;
width: flex-grid(12);
&:hover { &::before {
.university { @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
} bottom: -300px;
content: "";
display: block;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1;
} }
img {
display: block;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 2;
} }
h2.title { h1 {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2rem/1.8rem $serif; font: normal 1.2rem/1.8rem $serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 50px; position: relative;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
} z-index: 2;
.courses {
@include clearfix;
width: flex-grid(12);
.course {
@include box-sizing(border-box);
float: left;
width: flex-grid(6);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:nth-child(odd) {
margin-right: flex-gutter();
} }
} }
} }
......
lms/static/sass/_index.scss
.home { .home {
margin: 30px 10px 100px; margin: 50px 10px 100px;
> header { > header {
height: 430px; @include clearfix;
margin-bottom: 60px; min-height: 335px;
overflow: hidden; margin-bottom: 40px;
position: relative;
h1 {
@extend .animation-title-appear;
color: $lighter-base-font-color;
font: normal 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.orginizations {
@extend .animation-home-appear;
height: 200px;
margin: 0 auto;
position: relative; position: relative;
width: 680px; width: flex-grid(12);
> div {
@include inline-block;
vertical-align: middle;
}
.orginization {
position: absolute;
top: 20px;
width: 200px;
&.mit {
@extend .animation-mit-slide;
z-index: 3;
}
&.edx {
@extend .animation-edx-appear;
left: 240px;
z-index: 2;
}
&.harvard {
@extend .animation-harvard-slide;
z-index: 3;
}
img {
max-width: 100%;
}
}
.divider {
@extend .faded-vertical-divider;
position: absolute;
top: 0px;
z-index: 4;
&.left {
@extend .animation-divider-left-slide;
}
&.right {
@extend .animation-divider-right-slide;
}
}
}
.video-wrapper { .video-wrapper {
@extend .animation-video-appear; right: 0px;
height: 370px;
position: absolute; position: absolute;
width: 100%; top: 0px;
.video-player { .video-player {
background: rgb(45,45,45); background: rgb(45,45,45);
@include border-top-radius(4px); border: 1px solid rgb(0,0,0);
@include border-radius(4px);
height: 315px;
padding: 5px;
width: 560px;
&:hover {
@include box-shadow(0 0 12px 0 rgba(0,0,0, 0.3)); @include box-shadow(0 0 12px 0 rgba(0,0,0, 0.3));
height: 360px; }
margin: 0 auto;
padding: 10px 10px 0px 10px;
width: 640px;
.video-inner { .video-inner {
background: rgb(235,235,235); background: transparent;
height: 360px; height: 315px;
margin: 0 auto; margin: 0 auto;
width: 640px; width: 560px;
}
}
} }
.bottom-divider {
@extend .faded-hr-divider;
bottom: 0px;
position: absolute;
} }
} }
.welcome { .welcome {
border-right: 1px solid rgb(200,200,200); @include box-sizing(border-box);
float: left;
font-size: 0em; font-size: 0em;
margin-bottom: 80px; width: flex-grid(12);
padding-right: 600px;
padding-top: 20px;
h2 { h1 {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2rem/1.8rem $serif; font: normal 2.4rem/3rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative;
text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
.intro { .intro {
border-right: 1px solid rgb(200,200,200);
@include box-sizing(border-box); @include box-sizing(border-box);
@include inline-block; margin-bottom: 40px;
margin-right: flex-gutter(); width: flex-grid(12);
width: flex-grid(8);
vertical-align: middle;
padding-right: flex-gutter();
p { p {
color: $base-font-color; color: $base-font-color;
@include inline-block;
margin: 0px; margin: 0px;
text-align: center;
width: flex-grid(12); width: flex-grid(12);
vertical-align: top;
} }
} }
.signup-wrapper { .signup-wrapper {
@include box-sizing(border-box); @include box-sizing(border-box);
@include inline-block; margin: 0 auto;
padding-right: flex-gutter(); width: flex-grid(10);
width: flex-grid(4);
vertical-align: middle;
}
}
.university-partners { .sign-up {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0))); background: rgb(240,240,240);
margin-bottom: 60px; @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
padding-top: 5px; border: 1px solid rgb(220,220,220);
position: relative; @include border-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font-size: 0em;
padding: 12px;
@include transition(all, 0.15s, linear);
width: flex-grid(12); width: flex-grid(12);
&:before { &:hover {
@extend .faded-hr-divider; @include box-shadow(0 0 16px 0 rgba($blue, 0.35));
content: "";
display: block;
position: absolute;
top: 0px;
}
&:after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
} }
.partners { a {
font-size: 0em; @include button(shiny, $pink);
margin: 0 auto; @include box-sizing(border-box);
opacity: 0.7; @include border-radius(3px);
@include inline-block;
font: normal italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
width: flex-grid(6); width: flex-grid(6);
img { &:first-child {
margin-right: flex-gutter();
}
&.find-courses {
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block; @include inline-block;
font: normal italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
}
}
form {
input[type="text"],
input[type="email"],
input[type="password"] {
height: 45px;
margin-right: flex-gutter(); margin-right: flex-gutter();
max-width: flex-grid(4); width: flex-grid(3);
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
} }
} }
input[type="submit"] {
height: 45px;
width: flex-grid(3);
} }
} }
.highlighted-courses { h3 {
@include border-radius(4px); color: $base-font-color;
@include box-sizing(border-box); font: normal 1.6rem/2rem $sans-serif;
@include clearfix; text-align: center;
margin-bottom: 40px; }
width: flex-grid(12);
> article.course {
background: rgb(240,240,240);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
@include box-sizing(border-box);
float: left;
font-size: 0em;
min-height: 0px;
margin-bottom: 20px;
padding: 10px;
@include transition(all, 0.15s, linear);
width: flex-grid(6);
&:last-child {
margin-bottom: none;
} }
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
} }
&:nth-child(odd) {
margin-right: flex-gutter();
} }
> a {
@include clearfix;
display: block;
position: relative;
} }
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 50px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) { .university-partners {
display: none; @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0)));
} margin-bottom: 60px;
padding: 10px 0px;
position: relative;
width: flex-grid(12);
.shade { &:before {
background: rgba(0,0,0, 0.3); @extend .faded-hr-divider;
@include border-radius(4px);
bottom: 0px;
content: ""; content: "";
display: block; display: block;
left: 0px;
opacity: 0;
position: absolute; position: absolute;
top: 0px; top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
} }
.arrow { &:after {
border-top: 1px solid; @extend .faded-hr-divider;
border-left: 1px solid; bottom: 0px;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: ""; content: "";
display: block; display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute; position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
} }
img { .partners {
@include border-radius(4px); font-size: 0em;
display: block; margin: 0 auto;
min-height: 100%; width: 420px;
min-width: 100%;
width: 100%;
}
}
.info { a {
margin-left: 115px; @include inline-block;
margin-right: 40px;
opacity: 0.7;
@media only screen and (max-width: 320px) { &:last-child {
margin: 0px; margin-right: 0px;
} }
> hgroup { &:hover {
margin-right: 80px; opacity: 0.9;
@media only screen and (max-width: 320px) {
margin: 0px;
} }
h2 {
font: bold 1.8rem/2.5rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
} }
p { .name {
@include inline-block;
color: $base-font-color; color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif; font: 800 italic 2rem/2.2rem $sans-serif;
overflow: hidden; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis; vertical-align: middle;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
} }
&:hover { img {
background: rgb(245,245,245); @include inline-block;
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2)); max-width: 100px;
cursor: pointer; vertical-align: middle;
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
} }
} }
} }
.sign-up { .highlighted-courses {
background: rgb(240,240,240);
border: 1px solid rgb(220,220,220);
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 20px; @include clearfix;
margin-bottom: 40px;
width: flex-grid(12); width: flex-grid(12);
h3 { .course {
color: $base-font-color;
font: normal 1.6rem/2rem $sans-serif;
text-align: center;
}
&.top {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-sizing(border-box); @include box-sizing(border-box);
width: flex-grid(12); float: left;
width: flex-grid(6);
a { @media only screen and (max-width: 768px) {
@include button(shiny, $pink); float: none;
@include border-radius(3px); margin-right: 0px;
//@include box-sizing(border-box);
display: block;
font: normal italic 1.2rem/1.6rem $serif;
margin: 0 auto 0;
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
width: flex-grid(12); width: flex-grid(12);
} }
}
&.middle {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
margin-bottom: 60px;
padding: 15px 20px;
@include transition(all, 0.15s, linear);
&:hover {
@include box-shadow(0 0 16px 0 rgba($blue, 0.35));
}
form { &:nth-child(odd) {
input[type="submit"] { margin-right: flex-gutter();
}
} }
} }
} }
.more-info { .more-info {
margin-bottom: 60px; margin-bottom: 60px;
width: flex-grid(12); width: flex-grid(12);
...@@ -415,13 +234,25 @@ ...@@ -415,13 +234,25 @@
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif; font: normal 1.4rem/1.8rem $serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 30px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.news { .news {
font-size: 0em;
width: flex-grid(12);
> article {
background: rgb(240,240,240); background: rgb(240,240,240);
@include inline-block;
height: 300px; height: 300px;
margin-right: flex-gutter();
width: flex-grid(4);
&:last-child {
margin-right: 0px;
}
}
} }
} }
......
lms/static/sass/_shared_course_filter.scss 0 → 100644
.filter {
height: 60px;
nav {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4));
@include box-sizing(border-box);
border: 1px solid rgb(200,200,200);
border-top: none;
@include border-bottom-radius(4px);
@include clearfix;
height: 60px;
padding: 12px 10px;
position: relative;
z-index: 9;
&.fixed-top {
@include box-shadow(0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4));
max-width: 1200px;
position: fixed;
top: 0px;
width: flex-grid(12);
}
.dropdown {
float: left;
margin-right: 15px;
position: relative;
.filter-heading {
@include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%));
@include border-radius(4px);
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6));
border: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
cursor: pointer;
font: normal 1.2rem/1.8rem $sans-serif;
height: 36px;
padding: 6px;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
width: 150px;
z-index: 11;
}
ul {
background: rgb(255,255,255);
@include border-radius(0px 4px 4px 4px);
border: 1px solid rgb(200,200,200);
@include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2));
padding: 10px;
position: absolute;
visibility: hidden;
width: 200px;
z-index: 10;
li {
list-style: none;
a {
}
}
}
&:hover {
.filter-heading {
background: rgb(255,255,255);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
@include border-radius(4px 4px 0px 0px);
border-bottom: none;
@include box-shadow(0 2px 0 -1px rgb(255,255,255));
color: $base-font-color;
height: 40px;
}
ul {
visibility: visible;
}
}
}
form.search {
float: right;
input[type="text"] {
@include border-radius(3px 0px 0px 3px);
height: 36px;
width: 200px;
}
input[type="submit"] {
@include border-radius(0px 3px 3px 0px);
height: 36px;
}
}
}
}
lms/static/sass/_shared_footer.scss
footer { footer {
background: rgb(240,240,240); background: rgb(240,240,240);
height: 100px; padding: 20px 0px 0px;
padding: 20px 0px;
width: flex-grid(12); width: flex-grid(12);
&.fixed-bottom {
position: absolute;
bottom: 0px;
}
nav { nav {
@include clearfix; @include clearfix;
max-width: 1200px; max-width: 1200px;
...@@ -15,29 +19,71 @@ footer { ...@@ -15,29 +19,71 @@ footer {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 0px 15px 0px 0px; margin: 3px 15px 0px 0px;
} }
ol { ol {
float: right; float: left;
font-size: 0em; font-size: 0em;
margin-top: 3px; margin-top: 6px;
li { &.right {
border-right: 1px solid rgb(200,200,200); float: right;
@include inline-block;
list-style: none;
&:last-child { li:first-child {
border: none; border: none;
} }
}
&.social {
float: right;
margin: 0px 30px 0px 0px;
li {
border: none;
padding: 0px 5px;
a:hover {
opacity: 0.7;
}
}
}
li {
border-left: 1px solid rgb(200,200,200);
@include inline-block;
list-style: none;
padding: 0px 15px;
a:link, a:visited { a:link, a:visited {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif; font: normal 1.2rem/1.6rem $serif;
padding: 5px 15px; padding: 5px 0px;
}
}
} }
} }
.copyright {
background: rgb(230,230,230);
height: 50px;
margin-top: 80px;
width: 100%;
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin: 0 auto;
padding-top: 15px;
//text-align: center;
max-width: 1200px;
a {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin-left: 5px;
}
} }
} }
} }
lms/static/sass/_shared_forms.scss
...@@ -10,11 +10,10 @@ form { ...@@ -10,11 +10,10 @@ form {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box); @include box-sizing(border-box);
font: normal italic 1.2rem/1.6rem $serif; font: normal italic 1.2rem/1.6rem $serif;
height: 45px; height: 35px;
@include inline-block; @include inline-block;
margin-right: flex-gutter();
padding: 5px 12px; padding: 5px 12px;
width: flex-grid(3); vertical-align: top;
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
...@@ -31,9 +30,9 @@ form { ...@@ -31,9 +30,9 @@ form {
@include button(shiny, $pink); @include button(shiny, $pink);
@include border-radius(3px); @include border-radius(3px);
font: normal italic 1.2rem/1.6rem $serif; font: normal italic 1.2rem/1.6rem $serif;
height: 45px; height: 35px;
@include inline-block; @include inline-block;
text-transform: uppercase; text-transform: uppercase;
width: flex-grid(3); vertical-align: top;
} }
} }
lms/static/sass/_shared_header.scss
...@@ -4,7 +4,7 @@ header.app { ...@@ -4,7 +4,7 @@ header.app {
height: 55px; height: 55px;
width: 100%; width: 100%;
nav { .wrapper {
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
max-width: 1200px; max-width: 1200px;
...@@ -18,66 +18,126 @@ header.app { ...@@ -18,66 +18,126 @@ header.app {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 15px 15px 0px 0px; margin: 16px 30px 0px 0px;
position: relative;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: -15px;
top: -12px;
}
} }
h1 { a.discover-courses {
border-left: 1px solid rgb(200,200,200); @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
font: bold 1rem/1.2rem $sans-serif; border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
display: block;
float: left; float: left;
font: normal 1rem/1.2rem $sans-serif;
height: 15px; height: 15px;
margin-top: 10px; margin-top: 12px;
padding: 10px 18px; padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:hover {
} }
}
nav.guest {
float: right;
ol { ol {
float: left;
font-size: 0em; font-size: 0em;
&.user { li {
float: right; @include inline-block;
} margin-top: 12px;
padding: 0px 5px;
&.secondary { position: relative;
> li { vertical-align: bottom;
border: none;
&:last-child { &:last-child {
border-right: none; padding-right: 0px;
} }
a { a {
font: normal italic 1rem/1.2rem $serif; @include border-radius(3px);
border: 1px solid transparent;
color: $base-font-color;
display: block;
font: normal italic 1.2rem/1.2rem $serif;
height: 15px;
padding: 8px;
text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:hover {
background: rgb(220,220,220);
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border-color: rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
} }
} }
} }
}
}
nav.user {
float: right;
ol {
font-size: 0em;
> li { li {
border-left: 1px solid rgb(200,200,200); border-right: 1px solid rgb(200,200,200);
@include inline-block; @include inline-block;
margin-top: 10px; margin-top: 10px;
padding: 0px 8px; padding: 0px 5px;
position: relative; position: relative;
vertical-align: bottom; vertical-align: bottom;
&:last-child {
border-right: 1px solid rgb(200,200,200);
}
a { a {
@include border-radius(3px); @include border-radius(3px);
color: $lighter-base-font-color; color: $lighter-base-font-color;
display: block; display: block;
font: normal 1rem/1.2rem $sans-serif; font: normal italic 1.2rem/1.2rem $serif;
height: 15px; height: 15px;
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px rgba(255,255,255, 0.4);
&.user-dashboard { &:hover {
padding: 10px 10px 10px 40px; background: rgb(220,220,220);
color: $base-font-color;
}
&.active {
background: rgb(220,220,220);
color: $base-font-color;
}
&.options {
font: normal 1.2rem/1.2rem $sans-serif;
padding-right: 10px;
text-transform: none;
}
&.user-link {
font: normal 1.2rem/1.2rem $sans-serif;
padding: 10px 10px 10px 45px;
text-transform: none;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 0em; font-size: 0em;
...@@ -118,17 +178,6 @@ header.app { ...@@ -118,17 +178,6 @@ header.app {
} }
} }
} }
&:hover {
background: rgb(220,220,220);
color: $base-font-color;
}
&.active {
background: rgb(220,220,220);
color: $base-font-color;
}
} }
ol.user-options { ol.user-options {
...@@ -204,4 +253,5 @@ header.app { ...@@ -204,4 +253,5 @@ header.app {
} }
} }
} }
}
} }
lms/static/sass/_shared_list_of_courses.scss 0 → 100644
.courses {
@include box-sizing(border-box);
@include clearfix;
margin: 40px 0px;
padding: 0px 10px;
width: flex-grid(12);
.course {
background: rgb(240,240,240);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
@include box-sizing(border-box);
float: left;
font-size: 0em;
min-height: 100px;
margin-bottom: 25px;
padding: 10px;
width: flex-grid(6);
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:nth-child(odd) {
margin-right: flex-gutter();
}
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade {
background: rgba(0,0,0, 0.3);
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%;
}
}
.info {
margin-left: 115px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
margin-right: 80px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.8rem/2.5rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
&:hover {
opacity: 0.9;
}
> * {
height: 18px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.end-date {
border-left: 1px solid rgb(200,200,200);
right: 0px;
padding-left: 15px;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px;
right: 140px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
}
}
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
cursor: pointer;
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
h2 {
//color: $blue;
//text-decoration: underline;
}
.meta {
opacity: 0.9;
}
}
}
}
lms/static/sass/application.css
...@@ -307,9 +307,7 @@ td { ...@@ -307,9 +307,7 @@ td {
page-break-after: avoid; } } page-break-after: avoid; } }
html, body { html, body {
background: white; background: white;
font-size: 75%; font-size: 75%; }
min-height: 100%;
margin: 0px 0px -140px 0px; }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #3c3c3c; color: #3c3c3c;
...@@ -342,7 +340,7 @@ a:link, a:visited { ...@@ -342,7 +340,7 @@ a:link, a:visited {
.container:after { .container:after {
clear: both; } clear: both; }
.faded-hr-divider, .home > header .bottom-divider, .home .university-partners:before, .home .university-partners:after { .faded-hr-divider, .home .university-partners:before, .home .university-partners:after {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
...@@ -351,7 +349,7 @@ a:link, a:visited { ...@@ -351,7 +349,7 @@ a:link, a:visited {
height: 1px; height: 1px;
width: 100%; } width: 100%; }
.faded-vertical-divider, .home > header .orginizations .divider, .find-courses > header .universities span.divider { .faded-vertical-divider, header.app a.logo::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
...@@ -360,265 +358,7 @@ a:link, a:visited { ...@@ -360,265 +358,7 @@ a:link, a:visited {
height: 100%; height: 100%;
width: 1px; } width: 1px; }
article.course { .animation-title-appear {
background: #f0f0f0;
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 0em;
min-height: 100px;
margin-bottom: 20px;
padding: 10px;
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear; }
article.course:last-child {
margin-bottom: none; }
article.course > a {
zoom: 1;
display: block;
position: relative; }
article.course > a:before, article.course > a:after {
content: "";
display: table; }
article.course > a:after {
clear: both; }
article.course .cover {
background: #e1e1e1;
border: 1px solid #969696;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear;
width: 100px; }
@media only screen and (max-width: 320px) {
article.course .cover {
display: none; } }
article.course .cover .shade {
background: rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear;
right: 0px; }
article.course .cover .arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: white;
-webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear;
width: 55px; }
article.course .cover img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
width: 100%; }
article.course .info {
margin-left: 115px; }
@media only screen and (max-width: 320px) {
article.course .info {
margin: 0px; } }
article.course .info > hgroup {
margin-right: 80px; }
@media only screen and (max-width: 320px) {
article.course .info > hgroup {
margin: 0px; } }
article.course .info > hgroup h2 {
font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-transition: color, 0.15s, linear;
-moz-transition: color, 0.15s, linear;
-ms-transition: color, 0.15s, linear;
-o-transition: color, 0.15s, linear;
transition: color, 0.15s, linear;
text-overflow: ellipsis;
white-space: nowrap; }
article.course .info > hgroup p {
color: #3c3c3c;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis;
white-space: nowrap; }
article.course .info .edit, article.course .info .register {
border: 1px solid #dcdcdc;
background: #e6e6e6;
color: #a0a0a0;
display: block;
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear; }
@media only screen and (max-width: 320px) {
article.course .info .edit, article.course .info .register {
display: none; } }
article.course .info .edit:hover, article.course .info .register:hover {
background: white;
color: #1d9dd9; }
article.course .info .meta {
border-top: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
-webkit-transition: opacity, 0.15s, linear;
-moz-transition: opacity, 0.15s, linear;
-ms-transition: opacity, 0.15s, linear;
-o-transition: opacity, 0.15s, linear;
transition: opacity, 0.15s, linear;
width: 100%; }
article.course .info .meta:hover {
opacity: 0.9; }
article.course .info .meta > * {
height: 18px;
position: absolute;
top: 15px; }
article.course .info .meta p + p {
margin-top: 0px; }
article.course .info .meta .complete {
left: 0px; }
article.course .info .meta .complete p {
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; }
article.course .info .meta .complete p span {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
article.course .info .meta .dates p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-align: right; }
article.course .info .meta .dates p:first-child {
border-right: 1px solid #c8c8c8;
margin-right: 10px;
padding-right: 10px; }
article.course .info .meta .dates p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
article.course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
article.course .info .meta .end-date {
display: none; } }
article.course .info .meta .end-date p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; }
article.course .info .meta .end-date p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
article.course .info .meta .progress {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
left: 90px;
right: 140px; }
@media only screen and (max-width: 320px) {
article.course .info .meta .progress {
right: 0px; } }
article.course .info .meta .progress .meter {
background: #e6e6e6;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 2px; }
article.course .info .meta .progress .meter .meter-fill {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #d2d2d2;
height: 100%;
width: 60%; }
article.course:hover {
background: #f5f5f5;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
cursor: pointer; }
article.course:hover .edit {
background: #dcdcdc;
border-color: #bebebe; }
article.course:hover .cover {
opacity: 1; }
article.course:hover .cover .shade, article.course:hover .cover .arrow {
opacity: 1; }
article.course:hover .meta {
opacity: 0.9; }
.animation-title-appear, .home > header h1 {
-webkit-animation: title-appear 4.65s ease-out; -webkit-animation: title-appear 4.65s ease-out;
-moz-animation: title-appear 4.65s ease-out; -moz-animation: title-appear 4.65s ease-out;
animation: title-appear 4.65s ease-out; animation: title-appear 4.65s ease-out;
...@@ -728,7 +468,7 @@ article.course { ...@@ -728,7 +468,7 @@ article.course {
100% { 100% {
top: 0px; } } top: 0px; } }
.animation-home-appear, .home > header .orginizations { .animation-home-appear {
-webkit-animation: home-appear 4.25s ease-out; -webkit-animation: home-appear 4.25s ease-out;
-moz-animation: home-appear 4.25s ease-out; -moz-animation: home-appear 4.25s ease-out;
animation: home-appear 4.25s ease-out; animation: home-appear 4.25s ease-out;
...@@ -856,7 +596,7 @@ article.course { ...@@ -856,7 +596,7 @@ article.course {
-o-transform: scale(0.7); -o-transform: scale(0.7);
transform: scale(0.7); } } transform: scale(0.7); } }
.animation-edx-appear, .home > header .orginizations .orginization.edx { .animation-edx-appear {
-webkit-animation: edx-appear 1.25s ease-in; -webkit-animation: edx-appear 1.25s ease-in;
-moz-animation: edx-appear 1.25s ease-in; -moz-animation: edx-appear 1.25s ease-in;
animation: edx-appear 1.25s ease-in; animation: edx-appear 1.25s ease-in;
...@@ -888,7 +628,7 @@ article.course { ...@@ -888,7 +628,7 @@ article.course {
100% { 100% {
opacity: 1; } } opacity: 1; } }
.animation-mit-slide, .home > header .orginizations .orginization.mit { .animation-mit-slide {
-webkit-animation: mit-slide 1.15s ease-out; -webkit-animation: mit-slide 1.15s ease-out;
-moz-animation: mit-slide 1.15s ease-out; -moz-animation: mit-slide 1.15s ease-out;
animation: mit-slide 1.15s ease-out; animation: mit-slide 1.15s ease-out;
...@@ -920,7 +660,7 @@ article.course { ...@@ -920,7 +660,7 @@ article.course {
100% { 100% {
left: 0px; } } left: 0px; } }
.animation-harvard-slide, .home > header .orginizations .orginization.harvard { .animation-harvard-slide {
-webkit-animation: harvard-slide 1.15s ease-out; -webkit-animation: harvard-slide 1.15s ease-out;
-moz-animation: harvard-slide 1.15s ease-out; -moz-animation: harvard-slide 1.15s ease-out;
animation: harvard-slide 1.15s ease-out; animation: harvard-slide 1.15s ease-out;
...@@ -952,7 +692,7 @@ article.course { ...@@ -952,7 +692,7 @@ article.course {
100% { 100% {
right: 0px; } } right: 0px; } }
.animation-divider-left-slide, .home > header .orginizations .divider.left { .animation-divider-left-slide {
-webkit-animation: divider-left-slide 1.1s ease-out; -webkit-animation: divider-left-slide 1.1s ease-out;
-moz-animation: divider-left-slide 1.1s ease-out; -moz-animation: divider-left-slide 1.1s ease-out;
animation: divider-left-slide 1.1s ease-out; animation: divider-left-slide 1.1s ease-out;
...@@ -984,7 +724,7 @@ article.course { ...@@ -984,7 +724,7 @@ article.course {
100% { 100% {
left: 200px; } } left: 200px; } }
.animation-divider-right-slide, .home > header .orginizations .divider.right { .animation-divider-right-slide {
-webkit-animation: divider-right-slide 1.1s ease-out; -webkit-animation: divider-right-slide 1.1s ease-out;
-moz-animation: divider-right-slide 1.1s ease-out; -moz-animation: divider-right-slide 1.1s ease-out;
animation: divider-right-slide 1.1s ease-out; animation: divider-right-slide 1.1s ease-out;
...@@ -1016,7 +756,7 @@ article.course { ...@@ -1016,7 +756,7 @@ article.course {
100% { 100% {
left: 480px; } } left: 480px; } }
.animation-video-appear, .home > header .video-wrapper { .animation-video-appear {
-webkit-animation: video-appear 1.25s ease-out; -webkit-animation: video-appear 1.25s ease-out;
-moz-animation: video-appear 1.25s ease-out; -moz-animation: video-appear 1.25s ease-out;
animation: video-appear 1.25s ease-out; animation: video-appear 1.25s ease-out;
...@@ -1077,15 +817,14 @@ form { ...@@ -1077,15 +817,14 @@ form {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 45px; height: 35px;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-right: 2.513%;
padding: 5px 12px; padding: 5px 12px;
width: 23.116%; } vertical-align: top; }
form input[type="text"]:last-child, form input[type="text"]:last-child,
form input[type="email"]:last-child, form input[type="email"]:last-child,
form input[type="password"]:last-child { form input[type="password"]:last-child {
...@@ -1126,14 +865,14 @@ form { ...@@ -1126,14 +865,14 @@ form {
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 45px; height: 35px;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
text-transform: uppercase; text-transform: uppercase;
width: 23.116%; } vertical-align: top; }
form input[type="submit"]:hover:not(:disabled) { form input[type="submit"]:hover:not(:disabled) {
cursor: pointer; cursor: pointer;
background-color: #a91656; background-color: #a91656;
...@@ -1153,9 +892,11 @@ form { ...@@ -1153,9 +892,11 @@ form {
footer { footer {
background: #f0f0f0; background: #f0f0f0;
height: 100px; padding: 20px 0px 0px;
padding: 20px 0px;
width: 100%; } width: 100%; }
footer.fixed-bottom {
position: absolute;
bottom: 0px; }
footer nav { footer nav {
zoom: 1; zoom: 1;
max-width: 1200px; max-width: 1200px;
...@@ -1173,25 +914,52 @@ footer { ...@@ -1173,25 +914,52 @@ footer {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 0px 15px 0px 0px; } margin: 3px 15px 0px 0px; }
footer nav ol { footer nav ol {
float: right; float: left;
font-size: 0em; font-size: 0em;
margin-top: 3px; } margin-top: 6px; }
footer nav ol.right {
float: right; }
footer nav ol.right li:first-child {
border: none; }
footer nav ol.social {
float: right;
margin: 0px 30px 0px 0px; }
footer nav ol.social li {
border: none;
padding: 0px 5px; }
footer nav ol.social li a:hover {
opacity: 0.7; }
footer nav ol li { footer nav ol li {
border-right: 1px solid #c8c8c8; border-left: 1px solid #c8c8c8;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
list-style: none; } list-style: none;
footer nav ol li:last-child { padding: 0px 15px; }
border: none; }
footer nav ol li a:link, footer nav ol li a:visited { footer nav ol li a:link, footer nav ol li a:visited {
color: #a0a0a0; color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 5px 15px; } padding: 5px 0px; }
footer .copyright {
background: #e6e6e6;
height: 50px;
margin-top: 80px;
width: 100%; }
footer .copyright p {
color: #a0a0a0;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin: 0 auto;
padding-top: 15px;
max-width: 1200px; }
footer .copyright p a {
border-bottom: 1px solid #c8c8c8;
color: #a0a0a0;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 5px; }
header.app { header.app {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
...@@ -1202,7 +970,7 @@ header.app { ...@@ -1202,7 +970,7 @@ header.app {
background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6); background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6);
height: 55px; height: 55px;
width: 100%; } width: 100%; }
header.app nav { header.app .wrapper {
zoom: 1; zoom: 1;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -1211,10 +979,10 @@ header.app { ...@@ -1211,10 +979,10 @@ header.app {
margin: 0 auto; margin: 0 auto;
padding: 0px 10px; padding: 0px 10px;
width: 100%; } width: 100%; }
header.app nav:before, header.app nav:after { header.app .wrapper:before, header.app .wrapper:after {
content: ""; content: "";
display: table; } display: table; }
header.app nav:after { header.app .wrapper:after {
clear: both; } clear: both; }
header.app a.logo { header.app a.logo {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -1223,59 +991,126 @@ header.app { ...@@ -1223,59 +991,126 @@ header.app {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 15px 15px 0px 0px; } margin: 16px 30px 0px 0px;
header.app h1 { position: relative; }
border-left: 1px solid #c8c8c8; header.app a.logo::after {
font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; content: "";
float: left; display: block;
height: 15px; height: 50px;
margin-top: 10px; position: absolute;
padding: 10px 18px; } right: -15px;
header.app ol { top: -12px; }
float: left; header.app a.discover-courses {
font-size: 0em; } background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
header.app ol.user { background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
float: right; } background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
header.app ol.secondary > li { background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
border: none; } background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
header.app ol.secondary > li:last-child { border: 1px solid #c8c8c8;
border-right: none; } -webkit-border-radius: 3px;
header.app ol.secondary > li a { -moz-border-radius: 3px;
font: normal italic 1rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; border-radius: 3px;
text-transform: lowercase; } -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
header.app ol > li { -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
border-left: 1px solid #c8c8c8; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
color: #3c3c3c;
display: block;
float: left;
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
height: 15px;
margin-top: 12px;
padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
header.app nav.guest {
float: right; }
header.app nav.guest ol {
font-size: 0em; }
header.app nav.guest ol li {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-top: 12px;
padding: 0px 5px;
position: relative;
vertical-align: bottom; }
header.app nav.guest ol li:last-child {
padding-right: 0px; }
header.app nav.guest ol li a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
color: #3c3c3c;
display: block;
font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 15px;
padding: 8px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
header.app nav.guest ol li a:hover {
background: #dcdcdc;
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
border-color: #c8c8c8;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
color: #3c3c3c; }
header.app nav.user {
float: right; }
header.app nav.user ol {
font-size: 0em; }
header.app nav.user ol li {
border-right: 1px solid #c8c8c8;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-top: 10px; margin-top: 10px;
padding: 0px 8px; padding: 0px 5px;
position: relative; position: relative;
vertical-align: bottom; } vertical-align: bottom; }
header.app ol > li:last-child { header.app nav.user ol li a {
border-right: 1px solid #c8c8c8; }
header.app ol > li a {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
color: #a0a0a0; color: #a0a0a0;
display: block; display: block;
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 15px; height: 15px;
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: lowercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); } text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
header.app ol > li a.user-dashboard { header.app nav.user ol li a:hover {
padding: 10px 10px 10px 40px; } background: #dcdcdc;
color: #3c3c3c; }
header.app nav.user ol li a.active {
background: #dcdcdc;
color: #3c3c3c; }
header.app nav.user ol li a.options {
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
padding-right: 10px;
text-transform: none; }
header.app nav.user ol li a.user-link {
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 10px 10px 10px 45px;
text-transform: none; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
header.app ol > li a.user-dashboard { header.app nav.user ol li a.user-link {
font-size: 0em; font-size: 0em;
padding: 10px 0px; padding: 10px 0px;
width: 38px; } } width: 38px; } }
header.app ol > li a.user-dashboard .avatar { header.app nav.user ol li a.user-link .avatar {
background: #dcdcdc; background: #dcdcdc;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
...@@ -1295,7 +1130,7 @@ header.app { ...@@ -1295,7 +1130,7 @@ header.app {
position: absolute; position: absolute;
top: 5px; top: 5px;
width: 22px; } width: 22px; }
header.app ol > li a.user-dashboard .avatar::after { header.app nav.user ol li a.user-link .avatar::after {
background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
...@@ -1308,7 +1143,7 @@ header.app { ...@@ -1308,7 +1143,7 @@ header.app {
right: 0px; right: 0px;
top: 0px; top: 0px;
width: 100%; } width: 100%; }
header.app ol > li a.user-dashboard .avatar img { header.app nav.user ol li a.user-link .avatar img {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
...@@ -1316,13 +1151,7 @@ header.app { ...@@ -1316,13 +1151,7 @@ header.app {
min-height: 100%; min-height: 100%;
min-width: 100%; min-width: 100%;
height: 100%; } height: 100%; }
header.app ol > li a:hover { header.app nav.user ol li ol.user-options {
background: #dcdcdc;
color: #3c3c3c; }
header.app ol > li a.active {
background: #dcdcdc;
color: #3c3c3c; }
header.app ol > li ol.user-options {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
...@@ -1338,9 +1167,9 @@ header.app { ...@@ -1338,9 +1167,9 @@ header.app {
top: 50px; top: 50px;
width: 170px; width: 170px;
z-index: 3; } z-index: 3; }
header.app ol > li ol.user-options.expanded { header.app nav.user ol li ol.user-options.expanded {
display: block; } display: block; }
header.app ol > li ol.user-options::before { header.app nav.user ol li ol.user-options::before {
background: transparent; background: transparent;
border-top: 8px solid #dcdcdc; border-top: 8px solid #dcdcdc;
border-right: 8px solid #dcdcdc; border-right: 8px solid #dcdcdc;
...@@ -1361,7 +1190,7 @@ header.app { ...@@ -1361,7 +1190,7 @@ header.app {
right: 10px; right: 10px;
top: -7px; top: -7px;
width: 0px; } width: 0px; }
header.app ol > li ol.user-options li { header.app nav.user ol li ol.user-options li {
border-top: 1px solid #c8c8c8; border-top: 1px solid #c8c8c8;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
...@@ -1369,9 +1198,9 @@ header.app { ...@@ -1369,9 +1198,9 @@ header.app {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
width: 100%; } width: 100%; }
header.app ol > li ol.user-options li:first-child { header.app nav.user ol li ol.user-options li:first-child {
border: none; } border: none; }
header.app ol > li ol.user-options li a { header.app nav.user ol li ol.user-options li a {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
...@@ -1389,179 +1218,24 @@ header.app { ...@@ -1389,179 +1218,24 @@ header.app {
transition: padding, 0.1s, linear; transition: padding, 0.1s, linear;
white-space: nowrap; white-space: nowrap;
width: 100%; } width: 100%; }
header.app ol > li ol.user-options li a:hover { header.app nav.user ol li ol.user-options li a:hover {
background: white; background: white;
padding: 5px 8px; } padding: 5px 8px; }
.home { .courses {
margin: 30px 10px 100px; }
.home > header {
height: 430px;
margin-bottom: 60px;
overflow: hidden;
position: relative; }
.home > header h1 {
color: #a0a0a0;
font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
position: relative;
text-align: center;
text-transform: uppercase; }
.home > header .orginizations {
height: 200px;
margin: 0 auto;
position: relative;
width: 680px; }
.home > header .orginizations > div {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
vertical-align: middle; }
.home > header .orginizations .orginization {
position: absolute;
top: 20px;
width: 200px; }
.home > header .orginizations .orginization.mit {
z-index: 3; }
.home > header .orginizations .orginization.edx {
left: 240px;
z-index: 2; }
.home > header .orginizations .orginization.harvard {
z-index: 3; }
.home > header .orginizations .orginization img {
max-width: 100%; }
.home > header .orginizations .divider {
position: absolute;
top: 0px;
z-index: 4; }
.home > header .video-wrapper {
height: 370px;
position: absolute;
width: 100%; }
.home > header .video-wrapper .video-player {
background: #2d2d2d;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
height: 360px;
margin: 0 auto;
padding: 10px 10px 0px 10px;
width: 640px; }
.home > header .video-wrapper .video-player .video-inner {
background: #ebebeb;
height: 360px;
margin: 0 auto;
width: 640px; }
.home > header .bottom-divider {
bottom: 0px;
position: absolute; }
.home .welcome {
border-right: 1px solid #c8c8c8;
font-size: 0em;
margin-bottom: 80px; }
.home .welcome h2 {
color: #a0a0a0;
font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin-bottom: 20px;
text-transform: uppercase; }
.home .welcome .intro {
border-right: 1px solid #c8c8c8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 2.513%;
width: 65.829%;
vertical-align: middle;
padding-right: 2.513%; }
.home .welcome .intro p {
color: #3c3c3c;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 0px;
width: 100%;
vertical-align: top; }
.home .welcome .signup-wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
padding-right: 2.513%;
width: 31.658%;
vertical-align: middle; }
.home .university-partners {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
margin-bottom: 60px;
padding-top: 5px;
position: relative;
width: 100%; }
.home .university-partners:before {
content: "";
display: block;
position: absolute;
top: 0px; }
.home .university-partners:after {
bottom: 0px;
content: "";
display: block;
position: absolute; }
.home .university-partners .partners {
font-size: 0em;
margin: 0 auto;
opacity: 0.7;
width: 48.744%; }
.home .university-partners .partners img {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 2.513%;
max-width: 31.658%; }
.home .university-partners .partners img:last-child {
margin-right: 0px; }
.home .highlighted-courses {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
zoom: 1; zoom: 1;
margin-bottom: 40px; margin: 40px 0px;
padding: 0px 10px;
width: 100%; } width: 100%; }
.home .highlighted-courses:before, .home .highlighted-courses:after { .courses:before, .courses:after {
content: ""; content: "";
display: table; } display: table; }
.home .highlighted-courses:after { .courses:after {
clear: both; } clear: both; }
.home .highlighted-courses > article.course { .courses .course {
background: #f0f0f0; background: #f0f0f0;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
...@@ -1572,34 +1246,34 @@ header.app { ...@@ -1572,34 +1246,34 @@ header.app {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
font-size: 0em; font-size: 0em;
min-height: 0px; min-height: 100px;
margin-bottom: 20px; margin-bottom: 25px;
padding: 10px; padding: 10px;
width: 48.744%;
-webkit-transition: all, 0.15s, linear; -webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear; -moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear; -ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear; -o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear; transition: all, 0.15s, linear; }
width: 48.744%; }
.home .highlighted-courses > article.course:last-child {
margin-bottom: none; }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.home .highlighted-courses > article.course { .courses .course {
float: none; float: none;
margin-right: 0px; margin-right: 0px;
width: 100%; } } width: 100%; } }
.home .highlighted-courses > article.course:nth-child(odd) { .courses .course:nth-child(odd) {
margin-right: 2.513%; } margin-right: 2.513%; }
.home .highlighted-courses > article.course > a { .courses .course:last-child {
margin-bottom: none; }
.courses .course > a {
zoom: 1; zoom: 1;
display: block; display: block;
position: relative; } position: relative; }
.home .highlighted-courses > article.course > a:before, .home .highlighted-courses > article.course > a:after { .courses .course > a:before, .courses .course > a:after {
content: ""; content: "";
display: table; } display: table; }
.home .highlighted-courses > article.course > a:after { .courses .course > a:after {
clear: both; } clear: both; }
.home .highlighted-courses > article.course .cover { .courses .course .cover {
background: #e1e1e1; background: #e1e1e1;
border: 1px solid #969696; border: 1px solid #969696;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
...@@ -1609,7 +1283,7 @@ header.app { ...@@ -1609,7 +1283,7 @@ header.app {
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
float: left; float: left;
height: 50px; height: 100px;
margin: 0px; margin: 0px;
opacity: 0.8; opacity: 0.8;
overflow: hidden; overflow: hidden;
...@@ -1621,9 +1295,9 @@ header.app { ...@@ -1621,9 +1295,9 @@ header.app {
transition: all, 0.15s, linear; transition: all, 0.15s, linear;
width: 100px; } width: 100px; }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.home .highlighted-courses > article.course .cover { .courses .course .cover {
display: none; } } display: none; } }
.home .highlighted-courses > article.course .cover .shade { .courses .course .cover .shade {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
...@@ -1641,7 +1315,7 @@ header.app { ...@@ -1641,7 +1315,7 @@ header.app {
-o-transition: all, 0.15s, linear; -o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear; transition: all, 0.15s, linear;
right: 0px; } right: 0px; }
.home .highlighted-courses > article.course .cover .arrow { .courses .course .cover .arrow {
border-top: 1px solid; border-top: 1px solid;
border-left: 1px solid; border-left: 1px solid;
border-color: white; border-color: white;
...@@ -1666,7 +1340,7 @@ header.app { ...@@ -1666,7 +1340,7 @@ header.app {
-o-transition: all, 0.15s, linear; -o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear; transition: all, 0.15s, linear;
width: 55px; } width: 55px; }
.home .highlighted-courses > article.course .cover img { .courses .course .cover img {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
...@@ -1674,17 +1348,17 @@ header.app { ...@@ -1674,17 +1348,17 @@ header.app {
min-height: 100%; min-height: 100%;
min-width: 100%; min-width: 100%;
width: 100%; } width: 100%; }
.home .highlighted-courses > article.course .info { .courses .course .info {
margin-left: 115px; } margin-left: 115px; }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.home .highlighted-courses > article.course .info { .courses .course .info {
margin: 0px; } } margin: 0px; } }
.home .highlighted-courses > article.course .info > hgroup { .courses .course .info > hgroup {
margin-right: 80px; } margin-right: 80px; }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.home .highlighted-courses > article.course .info > hgroup { .courses .course .info > hgroup {
margin: 0px; } } margin: 0px; } }
.home .highlighted-courses > article.course .info > hgroup h2 { .courses .course .info > hgroup h2 {
font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif; font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 2px; margin-bottom: 2px;
overflow: hidden; overflow: hidden;
...@@ -1696,14 +1370,14 @@ header.app { ...@@ -1696,14 +1370,14 @@ header.app {
transition: color, 0.15s, linear; transition: color, 0.15s, linear;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
.home .highlighted-courses > article.course .info > hgroup p { .courses .course .info > hgroup p {
color: #3c3c3c; color: #3c3c3c;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
overflow: hidden; overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
.home .highlighted-courses > article.course .info .edit, .home .highlighted-courses > article.course .info .register { .courses .course .info .edit, .courses .course .info .register {
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
background: #e6e6e6; background: #e6e6e6;
color: #a0a0a0; color: #a0a0a0;
...@@ -1719,57 +1393,343 @@ header.app { ...@@ -1719,57 +1393,343 @@ header.app {
-o-transition: all, 0.15s, linear; -o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear; } transition: all, 0.15s, linear; }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.home .highlighted-courses > article.course .info .edit, .home .highlighted-courses > article.course .info .register { .courses .course .info .edit, .courses .course .info .register {
display: none; } } display: none; } }
.home .highlighted-courses > article.course .info .edit:hover, .home .highlighted-courses > article.course .info .register:hover { .courses .course .info .edit:hover, .courses .course .info .register:hover {
background: white; background: white;
color: #1d9dd9; } color: #1d9dd9; }
.home .highlighted-courses > article.course:hover { .courses .course .info .meta {
background: #f5f5f5; border-top: 1px solid #c8c8c8;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
cursor: pointer; } font-size: 1rem;
.home .highlighted-courses > article.course:hover .cover { height: 34px;
opacity: 1; } margin-top: 10px;
.home .highlighted-courses > article.course:hover .cover .shade, .home .highlighted-courses > article.course:hover .cover .arrow { opacity: 0.9;
opacity: 1; } position: relative;
.home .sign-up { -webkit-transition: opacity, 0.15s, linear;
background: #f0f0f0; -moz-transition: opacity, 0.15s, linear;
border: 1px solid #dcdcdc; -ms-transition: opacity, 0.15s, linear;
-webkit-border-radius: 4px; -o-transition: opacity, 0.15s, linear;
-moz-border-radius: 4px; transition: opacity, 0.15s, linear;
border-radius: 4px;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
width: 100%; } width: 100%; }
.home .sign-up h3 { .courses .course .info .meta:hover {
opacity: 0.9; }
.courses .course .info .meta > * {
height: 18px;
position: absolute;
top: 15px; }
.courses .course .info .meta p + p {
margin-top: 0px; }
.courses .course .info .meta .complete {
left: 0px; }
.courses .course .info .meta .complete p {
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; }
.courses .course .info .meta .complete p span {
color: #3c3c3c; color: #3c3c3c;
font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif; font-family: "Open Sans", Verdana, Geneva, sans-serif;
text-align: center; } margin-left: 3px; }
.home .sign-up.top { .courses .course .info .meta .dates p {
background-image: -webkit-linear-gradient(-90deg, #fafafa, #e6e6e6); color: #a0a0a0;
background-image: -moz-linear-gradient(-90deg, #fafafa, #e6e6e6); font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
background-image: -ms-linear-gradient(-90deg, #fafafa, #e6e6e6); display: inline-block;
background-image: -o-linear-gradient(-90deg, #fafafa, #e6e6e6); vertical-align: baseline;
background-image: linear-gradient(-90deg, #fafafa, #e6e6e6); zoom: 1;
-webkit-box-sizing: border-box; *display: inline;
-moz-box-sizing: border-box; *vertical-align: auto;
box-sizing: border-box; text-align: right; }
width: 100%; } .courses .course .info .meta .dates p:first-child {
.home .sign-up.top a { border-right: 1px solid #c8c8c8;
border: 1px solid #410017; margin-right: 10px;
border-bottom: 1px solid #380000; padding-right: 10px; }
-webkit-border-radius: 5px; .courses .course .info .meta .dates p time {
-moz-border-radius: 5px; color: #3c3c3c;
border-radius: 5px; font-family: "Open Sans", Verdana, Geneva, sans-serif;
-webkit-box-shadow: inset 0 1px 0 0 #db4274; margin-left: 3px; }
-moz-box-shadow: inset 0 1px 0 0 #db4274; .courses .course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
.courses .course .info .meta .end-date {
display: none; } }
.courses .course .info .meta .end-date p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; }
.courses .course .info .meta .end-date p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .course .info .meta .progress {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
left: 90px;
right: 140px; }
@media only screen and (max-width: 320px) {
.courses .course .info .meta .progress {
right: 0px; } }
.courses .course .info .meta .progress .meter {
background: #e6e6e6;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 2px; }
.courses .course .info .meta .progress .meter .meter-fill {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #d2d2d2;
height: 100%;
width: 60%; }
.courses .course:hover {
background: #f5f5f5;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
cursor: pointer; }
.courses .course:hover .edit {
background: #dcdcdc;
border-color: #bebebe; }
.courses .course:hover .cover {
opacity: 1; }
.courses .course:hover .cover .shade, .courses .course:hover .cover .arrow {
opacity: 1; }
.courses .course:hover .meta {
opacity: 0.9; }
.filter {
height: 60px; }
.filter nav {
background-image: -webkit-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -moz-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -ms-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -o-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: linear-gradient(-90deg, #fafafa, #e6e6e6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #c8c8c8;
border-top: none;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
zoom: 1;
height: 60px;
padding: 12px 10px;
position: relative;
z-index: 9; }
.filter nav:before, .filter nav:after {
content: "";
display: table; }
.filter nav:after {
clear: both; }
.filter nav.fixed-top {
-webkit-box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
max-width: 1200px;
position: fixed;
top: 0px;
width: 100%; }
.filter nav .dropdown {
float: left;
margin-right: 15px;
position: relative; }
.filter nav .dropdown .filter-heading {
background-image: -webkit-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
background-image: -moz-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
background-image: -ms-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
background-image: -o-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
background-image: linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
border: 1px solid #c8c8c8;
color: #a0a0a0;
cursor: pointer;
font: normal 1.2rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif;
height: 36px;
padding: 6px;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
width: 150px;
z-index: 11; }
.filter nav .dropdown ul {
background: white;
-webkit-border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
border-radius: 0px 4px 4px 4px;
border: 1px solid #c8c8c8;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
padding: 10px;
position: absolute;
visibility: hidden;
width: 200px;
z-index: 10; }
.filter nav .dropdown ul li {
list-style: none; }
.filter nav .dropdown:hover .filter-heading {
background: white;
background-image: -webkit-linear-gradient(-90deg, #fafafa, white);
background-image: -moz-linear-gradient(-90deg, #fafafa, white);
background-image: -ms-linear-gradient(-90deg, #fafafa, white);
background-image: -o-linear-gradient(-90deg, #fafafa, white);
background-image: linear-gradient(-90deg, #fafafa, white);
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
border-bottom: none;
-webkit-box-shadow: 0 2px 0 -1px white;
-moz-box-shadow: 0 2px 0 -1px white;
box-shadow: 0 2px 0 -1px white;
color: #3c3c3c;
height: 40px; }
.filter nav .dropdown:hover ul {
visibility: visible; }
.filter nav form.search {
float: right; }
.filter nav form.search input[type="text"] {
-webkit-border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
height: 36px;
width: 200px; }
.filter nav form.search input[type="submit"] {
-webkit-border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
height: 36px; }
.home {
margin: 50px 10px 100px; }
.home > header {
zoom: 1;
min-height: 335px;
margin-bottom: 40px;
position: relative;
width: 100%; }
.home > header:before, .home > header:after {
content: "";
display: table; }
.home > header:after {
clear: both; }
.home > header .video-wrapper {
right: 0px;
position: absolute;
top: 0px; }
.home > header .video-wrapper .video-player {
background: #2d2d2d;
border: 1px solid black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 315px;
padding: 5px;
width: 560px; }
.home > header .video-wrapper .video-player:hover {
-webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); }
.home > header .video-wrapper .video-player .video-inner {
background: transparent;
height: 315px;
margin: 0 auto;
width: 560px; }
.home > header .welcome {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
font-size: 0em;
width: 100%;
padding-right: 600px;
padding-top: 20px; }
.home > header .welcome h1 {
color: #a0a0a0;
font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
text-align: center;
text-transform: uppercase; }
.home > header .welcome .intro {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 40px;
width: 100%; }
.home > header .welcome .intro p {
color: #3c3c3c;
margin: 0px;
text-align: center;
width: 100%; }
.home > header .welcome .signup-wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
width: 82.915%; }
.home > header .welcome .signup-wrapper .sign-up {
background: #f0f0f0;
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 0em;
padding: 12px;
-webkit-transition: all, 0.15s, linear;
-moz-transition: all, 0.15s, linear;
-ms-transition: all, 0.15s, linear;
-o-transition: all, 0.15s, linear;
transition: all, 0.15s, linear;
width: 100%; }
.home > header .welcome .signup-wrapper .sign-up:hover {
-webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
-moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); }
.home > header .welcome .signup-wrapper .sign-up a {
border: 1px solid #410017;
border-bottom: 1px solid #380000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #db4274;
-moz-box-shadow: inset 0 1px 0 0 #db4274;
box-shadow: inset 0 1px 0 0 #db4274; box-shadow: inset 0 1px 0 0 #db4274;
color: white; color: white;
display: inline-block; display: inline-block;
...@@ -1786,17 +1746,23 @@ header.app { ...@@ -1786,17 +1746,23 @@ header.app {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #2a0000; text-shadow: 0 -1px 1px #2a0000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
display: block; display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0 auto 0;
padding: 15px 0px; padding: 15px 0px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
width: 100%; } width: 48.744%; }
.home .sign-up.top a:hover:not(:disabled) { .home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) {
cursor: pointer; cursor: pointer;
background-color: #a91656; background-color: #a91656;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029));
...@@ -1805,33 +1771,168 @@ header.app { ...@@ -1805,33 +1771,168 @@ header.app {
background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); } background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); }
.home .sign-up.top a:active:not(:disabled) { .home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; } box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; }
.home .sign-up.top a:disabled { .home > header .welcome .signup-wrapper .sign-up a:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; } cursor: not-allowed; }
.home .sign-up.middle { .home > header .welcome .signup-wrapper .sign-up a:first-child {
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); margin-right: 2.513%; }
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); .home > header .welcome .signup-wrapper .sign-up a.find-courses {
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); border: 1px solid #002e88;
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); border-bottom: 1px solid #001e5f;
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); -webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); -moz-border-radius: 5px;
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); border-radius: 5px;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 15px 0px; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:hover:not(:disabled) {
cursor: pointer;
background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:disabled {
opacity: 0.5;
cursor: not-allowed; }
.home > header .welcome .signup-wrapper .sign-up form input[type="text"],
.home > header .welcome .signup-wrapper .sign-up form input[type="email"],
.home > header .welcome .signup-wrapper .sign-up form input[type="password"] {
height: 45px;
margin-right: 2.513%;
width: 23.116%; }
.home > header .welcome .signup-wrapper .sign-up form input[type="text"]:last-child,
.home > header .welcome .signup-wrapper .sign-up form input[type="email"]:last-child,
.home > header .welcome .signup-wrapper .sign-up form input[type="password"]:last-child {
margin-right: 0px; }
.home > header .welcome .signup-wrapper .sign-up form input[type="submit"] {
height: 45px;
width: 23.116%; }
.home > header .welcome .signup-wrapper .sign-up h3 {
color: #3c3c3c;
font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center; }
.home .university-partners {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
margin-bottom: 60px; margin-bottom: 60px;
padding: 15px 20px; padding: 10px 0px;
-webkit-transition: all, 0.15s, linear; position: relative;
-moz-transition: all, 0.15s, linear; width: 100%; }
-ms-transition: all, 0.15s, linear; .home .university-partners:before {
-o-transition: all, 0.15s, linear; content: "";
transition: all, 0.15s, linear; } display: block;
.home .sign-up.middle:hover { position: absolute;
-webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); top: 0px; }
-moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); .home .university-partners:after {
box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); } bottom: 0px;
content: "";
display: block;
position: absolute; }
.home .university-partners .partners {
font-size: 0em;
margin: 0 auto;
width: 420px; }
.home .university-partners .partners a {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 40px;
opacity: 0.7; }
.home .university-partners .partners a:last-child {
margin-right: 0px; }
.home .university-partners .partners a:hover {
opacity: 0.9; }
.home .university-partners .partners .name {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
color: #3c3c3c;
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
vertical-align: middle; }
.home .university-partners .partners img {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
max-width: 100px;
vertical-align: middle; }
.home .highlighted-courses {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
margin-bottom: 40px;
width: 100%; }
.home .highlighted-courses:before, .home .highlighted-courses:after {
content: "";
display: table; }
.home .highlighted-courses:after {
clear: both; }
.home .highlighted-courses .course {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 48.744%; }
@media only screen and (max-width: 768px) {
.home .highlighted-courses .course {
float: none;
margin-right: 0px;
width: 100%; } }
.home .highlighted-courses .course:nth-child(odd) {
margin-right: 2.513%; }
.home .more-info { .home .more-info {
margin-bottom: 60px; margin-bottom: 60px;
width: 100%; } width: 100%; }
...@@ -1840,11 +1941,23 @@ header.app { ...@@ -1840,11 +1941,23 @@ header.app {
color: #a0a0a0; color: #a0a0a0;
font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 30px;
padding-bottom: 10px; } padding-bottom: 10px; }
.home .more-info .news { .home .more-info .news {
font-size: 0em;
width: 100%; }
.home .more-info .news > article {
background: #f0f0f0; background: #f0f0f0;
height: 300px; } display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 300px;
margin-right: 2.513%;
width: 31.658%; }
.home .more-info .news > article:last-child {
margin-right: 0px; }
.home .social-media { .home .social-media {
background: #f5f5f5; background: #f5f5f5;
border: 1px solid #dcdcdc; border: 1px solid #dcdcdc;
...@@ -1870,26 +1983,26 @@ header.app { ...@@ -1870,26 +1983,26 @@ header.app {
display: table; } display: table; }
.dashboard:after { .dashboard:after {
clear: both; } clear: both; }
.dashboard .sidebar {
.sidebar {
background: #f0f0f0; background: #f0f0f0;
float: left;
margin-right: 2.513%; margin-right: 2.513%;
width: 23.116%; } position: absolute;
width: 250px; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sidebar { .dashboard .sidebar {
float: none; float: none;
margin: 0 0 30px 0; margin: 0 0 30px 0;
position: static;
width: 100%; } } width: 100%; } }
.sidebar header.profile .user-info { .dashboard .sidebar header.profile .user-info {
zoom: 1; zoom: 1;
padding: 10px; } padding: 10px; }
.sidebar header.profile .user-info:before, .sidebar header.profile .user-info:after { .dashboard .sidebar header.profile .user-info:before, .dashboard .sidebar header.profile .user-info:after {
content: ""; content: "";
display: table; } display: table; }
.sidebar header.profile .user-info:after { .dashboard .sidebar header.profile .user-info:after {
clear: both; } clear: both; }
.sidebar header.profile .user-info .avatar { .dashboard .sidebar header.profile .user-info .avatar {
background: #dcdcdc; background: #dcdcdc;
border: 1px solid #b4b4b4; border: 1px solid #b4b4b4;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
...@@ -1902,22 +2015,27 @@ header.app { ...@@ -1902,22 +2015,27 @@ header.app {
max-width: 100%; max-width: 100%;
overflow: hidden; } overflow: hidden; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sidebar header.profile .user-info .avatar { .dashboard .sidebar header.profile .user-info .avatar {
float: left;
margin: 0px; margin: 0px;
margin-right: 2.513%; margin-right: 2.513%;
width: 23.116%; } } position: absolute;
.sidebar header.profile .user-info .avatar img { width: 100px; } }
.dashboard .sidebar header.profile .user-info .avatar img {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
max-width: 100%; } max-width: 100%; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info { .dashboard .sidebar header.profile .user-info .info {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left; float: left;
width: 74.372%; } } min-height: 100px;
.sidebar header.profile .user-info .info h2 { padding-left: 110px;
width: 100%; } }
.dashboard .sidebar header.profile .user-info .info h2 {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
...@@ -1930,56 +2048,61 @@ header.app { ...@@ -1930,56 +2048,61 @@ header.app {
text-wrap: nowrap; text-wrap: nowrap;
text-overflow: ellipsis; } text-overflow: ellipsis; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info h2 { .dashboard .sidebar header.profile .user-info .info h2 {
text-align: left; } } text-align: left; } }
.sidebar header.profile .user-info .info > ul { .dashboard .sidebar header.profile .user-info .info > ul {
zoom: 1; zoom: 1;
margin: 0px; margin: 0px;
padding: 0 0 10px 0; } padding: 0 0 10px 0; }
.sidebar header.profile .user-info .info > ul:before, .sidebar header.profile .user-info .info > ul:after { .dashboard .sidebar header.profile .user-info .info > ul:before, .dashboard .sidebar header.profile .user-info .info > ul:after {
content: ""; content: "";
display: table; } display: table; }
.sidebar header.profile .user-info .info > ul:after { .dashboard .sidebar header.profile .user-info .info > ul:after {
clear: both; } clear: both; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info > ul { .dashboard .sidebar header.profile .user-info .info > ul {
padding: 0px; } } padding: 0px; } }
.sidebar header.profile .user-info .info > ul li { .dashboard .sidebar header.profile .user-info .info > ul li {
list-style: none; list-style: none;
margin-bottom: 10px; } margin-bottom: 10px; }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info > ul li { .dashboard .sidebar header.profile .user-info .info > ul li {
float: left; float: left;
margin-right: 10px; } } margin-right: 10px; } }
.sidebar header.profile .user-info .info > ul li:last-child { .dashboard .sidebar header.profile .user-info .info > ul li:last-child {
margin-bottom: 0px; } margin-bottom: 0px; }
.sidebar header.profile .user-info .info > ul li h3 { .dashboard .sidebar header.profile .user-info .info > ul li h3 {
color: #a0a0a0; color: #a0a0a0;
font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.8); } text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
.sidebar header.profile .user-info .info > ul li h3 span { .dashboard .sidebar header.profile .user-info .info > ul li h3 span {
font-weight: normal; font-weight: normal;
text-transform: none; } text-transform: none; }
.dashboard .courses {
.courses { -webkit-box-sizing: border-box;
float: left; -moz-box-sizing: border-box;
width: 74.372%; } box-sizing: border-box;
margin: 0px;
padding-left: 270px; }
@media screen and (max-width: 768px) {
.dashboard .courses {
padding: 0px; } }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.courses { .dashboard .courses {
float: none; float: none;
width: 100%; } } width: 100%; } }
.courses nav.course-filters { .dashboard .courses nav.course-toggle {
background: #e6e6e6; background: #e6e6e6;
margin-bottom: 30px; margin-bottom: 30px;
position: relative; } position: relative; }
.courses nav.course-filters ol.filters { .dashboard .courses nav.course-toggle ol.filters {
zoom: 1; } zoom: 1; }
.courses nav.course-filters ol.filters:before, .courses nav.course-filters ol.filters:after { .dashboard .courses nav.course-toggle ol.filters:before, .dashboard .courses nav.course-toggle ol.filters:after {
content: ""; content: "";
display: table; } display: table; }
.courses nav.course-filters ol.filters:after { .dashboard .courses nav.course-toggle ol.filters:after {
clear: both; } clear: both; }
.courses nav.course-filters ol.filters li { .dashboard .courses nav.course-toggle ol.filters li {
border-right: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -1989,19 +2112,21 @@ header.app { ...@@ -1989,19 +2112,21 @@ header.app {
padding: 15px 10px; padding: 15px 10px;
width: 25%; width: 25%;
text-align: center; } text-align: center; }
.courses nav.course-filters ol.filters li:last-child { .dashboard .courses nav.course-toggle ol.filters li:last-child {
border: none; } border: none; }
.courses nav.course-filters ol.filters li:hover { .dashboard .courses nav.course-toggle ol.filters li:hover {
background: #dcdcdc; background: #dcdcdc;
cursor: pointer; } cursor: pointer; }
.courses nav.course-filters ol.filters li.selected { .dashboard .courses nav.course-toggle ol.filters li.selected {
background: #dcdcdc; } background: #dcdcdc; }
.courses nav.course-filters ol.filters li h2 { .dashboard .courses nav.course-toggle ol.filters li h2 {
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-transform: none; } text-transform: none; }
.courses nav.course-filters ol.filters li span.count { .dashboard .courses nav.course-toggle ol.filters li span.count {
margin: 5px 0 0 0; margin: 5px 0 0 0;
display: block; } display: block; }
.dashboard .courses .course {
width: 100%; }
nav.course-material { nav.course-material {
background: #d2d2d2; background: #d2d2d2;
...@@ -2076,52 +2201,49 @@ nav.course-material { ...@@ -2076,52 +2201,49 @@ nav.course-material {
background: #f0f0f0; background: #f0f0f0;
height: 600px; } height: 600px; }
.find-courses { .find-courses header {
margin: 0 10px; } background: #f0f0f0;
.find-courses > header { border-bottom: 1px solid #c8c8c8;
margin-bottom: 30px; } -webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
.find-courses > header .universities { -moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
margin: 10px auto; box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
opacity: 0.7; width: 100%; }
width: 31.658%; } .find-courses header .inner-wrapper {
.find-courses > header .universities img {
max-width: 100%; }
.find-courses > header .universities span.divider {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 120px; height: 120px;
vertical-align: middle; } margin: 0 auto;
.find-courses h2.title { max-width: 1200px;
overflow: hidden;
padding: 40px 0px 30px;
position: relative;
width: 100%; }
.find-courses header .inner-wrapper::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
bottom: -300px;
content: "";
display: block;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1; }
.find-courses header .inner-wrapper img {
display: block;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 2; }
.find-courses header .inner-wrapper h1 {
color: #a0a0a0; color: #a0a0a0;
font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 50px; position: relative;
text-transform: uppercase; text-transform: uppercase;
text-align: center; } text-align: center;
.find-courses .courses { z-index: 2; }
zoom: 1;
width: 100%; }
.find-courses .courses:before, .find-courses .courses:after {
content: "";
display: table; }
.find-courses .courses:after {
clear: both; }
.find-courses .courses .course {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 48.744%; }
@media only screen and (max-width: 768px) {
.find-courses .courses .course {
float: none;
margin-right: 0px;
width: 100%; } }
.find-courses .courses .course:nth-child(odd) {
margin-right: 2.513%; }
.grid-container { .grid-container {
display: none; } display: none; }
...@@ -2256,7 +2378,7 @@ nav.course-material { ...@@ -2256,7 +2378,7 @@ nav.course-material {
padding-bottom: 20px; padding-bottom: 20px;
position: relative; position: relative;
width: 31.658%; } width: 31.658%; }
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar .home > header .orginizations .divider, .home > header .orginizations .course-info .sidebar .divider, .course-info .sidebar .find-courses > header .universities span.divider, .find-courses > header .universities .course-info .sidebar span.divider { .course-info .sidebar .faded-vertical-divider, .course-info .sidebar header.app a.logo::after, header.app .course-info .sidebar a.logo::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
......
lms/static/sass/application.scss
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
@import 'shared_forms'; @import 'shared_forms';
@import 'shared_footer'; @import 'shared_footer';
@import 'shared_header'; @import 'shared_header';
@import 'shared_list_of_courses';
@import 'shared_course_filter';
// pages // pages
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier", "courseware/problems"; @import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier", "courseware/problems";
......
lms/static/sass/screen.css deleted 100644 → 0
/* HTML5 Boilerplate */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block; }
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1; }
audio:not([controls]) {
display: none; }
[hidden] {
display: none; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
html, button, input, select, textarea {
font-family: sans-serif;
color: #222; }
body {
margin: 0;
font-size: 1em;
line-height: 1.4; }
::-moz-selection {
background: #fe57a1;
color: #fff;
text-shadow: none; }
::selection {
background: #fe57a1;
color: #fff;
text-shadow: none; }
a {
color: #00e; }
a:visited {
color: #551a8b; }
a:hover {
color: #06e; }
a:focus {
outline: thin dotted; }
a:hover, a:active {
outline: 0; }
abbr[title] {
border-bottom: 1px dotted; }
b, strong {
font-weight: bold; }
blockquote {
margin: 1em 40px; }
dfn {
font-style: italic; }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
ins {
background: #ff9;
color: #000;
text-decoration: none; }
mark {
background: #ff0;
color: #000;
font-style: italic;
font-weight: bold; }
pre, code, kbd, samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
q {
quotes: none; }
q:before, q:after {
content: "";
content: none; }
small {
font-size: 85%; }
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
ul, ol {
margin: 1em 0;
padding: 0 0 0 40px; }
dd {
margin: 0 0 0 40px; }
nav ul, nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0; }
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle; }
svg:not(:root) {
overflow: hidden; }
figure {
margin: 0; }
form {
margin: 0; }
fieldset {
border: 0;
margin: 0;
padding: 0; }
label {
cursor: pointer; }
legend {
border: 0;
*margin-left: -7px;
padding: 0;
white-space: normal; }
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle; }
button, input {
line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
*overflow: visible; }
button[disabled], input[disabled] {
cursor: default; }
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
*width: 13px;
*height: 13px; }
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0; }
textarea {
overflow: auto;
vertical-align: top;
resize: vertical; }
input:invalid, textarea:invalid {
background-color: #f0dddd; }
table {
border-collapse: collapse;
border-spacing: 0; }
td {
vertical-align: top; }
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: black;
padding: 0.2em 0; }
.ir {
display: block;
border: 0;
text-indent: -999em;
overflow: hidden;
background-color: transparent;
background-repeat: no-repeat;
text-align: left;
direction: ltr;
*line-height: 0; }
.ir br {
display: none; }
.hidden {
display: none !important;
visibility: hidden; }
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
.invisible {
visibility: hidden; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both; }
.clearfix {
*zoom: 1; }
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important; }
a, a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: ""; }
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display: table-header-group; }
tr, img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
@page {
margin: 0.5cm; }
p, h2, h3 {
orphans: 3;
widows: 3; }
h2, h3 {
page-break-after: avoid; } }
h1, h2, h3, h4, h5, h6 {
color: #3c3c3c;
margin: 0px; }
p {
color: #a0a0a0;
margin: 0px; }
a:link, a:visited {
color: #1d9dd9;
text-decoration: none; }
a:link:hover, a:visited:hover {
color: #43b2e6; }
body {
background: white;
margin: 0px; }
.container {
zoom: 1;
margin: 0 auto;
max-width: 1200px;
width: 100%; }
.container:before, .container:after {
content: "";
display: table; }
.container:after {
clear: both; }
header.app {
border-bottom: 1px solid #c8c8c8;
background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
height: 55px;
width: 100%; }
header.app nav {
zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
padding: 0px 10px;
width: 100%; }
header.app nav:before, header.app nav:after {
content: "";
display: table; }
header.app nav:after {
clear: both; }
header.app a.logo {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
height: 100%;
margin: 15px 15px 0px 0px; }
header.app h1 {
border-left: 1px solid #c8c8c8;
font: bold 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
float: left;
height: 15px;
margin-top: 10px;
padding: 10px 18px; }
header.app ol {
float: left;
font-size: 0px; }
header.app ol.user {
float: right; }
header.app ol > li {
border-left: 1px solid #c8c8c8;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-top: 10px;
padding: 0px 8px;
position: relative;
vertical-align: bottom; }
header.app ol > li:last-child {
border-right: 1px solid #c8c8c8; }
header.app ol > li a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
color: #a0a0a0;
display: block;
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
height: 15px;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
header.app ol > li a.user-dashboard {
padding: 10px 10px 10px 40px; }
@media screen and (max-width: 768px) {
header.app ol > li a.user-dashboard {
font-size: 0px;
padding: 10px 0px;
width: 38px; } }
header.app ol > li a.user-dashboard .avatar {
background: #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid #b4b4b4;
-webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
height: 22px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
left: 15px;
overflow: hidden;
position: absolute;
top: 5px;
width: 22px; }
header.app ol > li a.user-dashboard .avatar::after {
background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
content: "";
display: block;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%; }
header.app ol > li a.user-dashboard .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
height: 100%; }
header.app ol > li a:hover {
background: #dcdcdc;
color: #3c3c3c; }
header.app ol > li a.active {
background: #dcdcdc;
color: #3c3c3c; }
header.app ol > li ol.user-options {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false);
box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false);
border: 1px solid #c8c8c8;
background: #dcdcdc;
display: none;
right: 4px;
padding: 5px 10px;
position: absolute;
top: 50px;
width: 170px;
z-index: 3; }
header.app ol > li ol.user-options.expanded {
display: block; }
header.app ol > li ol.user-options::before {
background: transparent;
border-top: 8px solid #dcdcdc;
border-right: 8px solid #dcdcdc;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
-webkit-box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false);
-moz-box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false);
box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false);
content: "";
display: block;
height: 0px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 10px;
top: -7px;
width: 0px; }
header.app ol > li ol.user-options li {
border-top: 1px solid #c8c8c8;
border-right: none;
border-bottom: none;
border-left: none;
margin: 0px;
padding: 0px;
width: 100%; }
header.app ol > li ol.user-options li:first-child {
border: none; }
header.app ol > li ol.user-options li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
font: normal 12px/16px "Open Sans", Verdana, Geneva, sans-serif;
height: auto;
margin: 5px 0px;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;
-webkit-transition-property: compact(padding, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(padding, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(padding, false, false, false, false, false, false, false, false);
-o-transition-property: compact(padding, false, false, false, false, false, false, false, false);
transition-property: compact(padding, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
white-space: nowrap;
width: 100%; }
header.app ol > li ol.user-options li a:hover {
background: white;
padding: 5px 8px; }
.faded-hr-divider {
background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
height: 1px;
width: 100%; }
.faded-vertical-divider, .find-courses > header .universities span.divider {
background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
height: 100%;
width: 1px; }
.animation-apear {
-webkit-animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false);
-moz-animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false);
animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false);
-webkit-animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false);
-moz-animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false);
animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false); }
@-webkit-keyframes apear {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes apear {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes apear {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.home {
margin-top: 30px; }
.home > header h1 {
font: bold 24px/26px "Open Sans", Verdana, Geneva, sans-serif;
text-align: center; }
.dashboard {
zoom: 1;
margin: 30px 10px; }
.dashboard:before, .dashboard:after {
content: "";
display: table; }
.dashboard:after {
clear: both; }
.sidebar {
background: #f0f0f0;
float: left;
margin-right: 2.513%;
width: 23.116%; }
@media screen and (max-width: 768px) {
.sidebar {
float: none;
margin: 0 0 30px 0;
width: 100%; } }
.sidebar header.profile .user-info {
zoom: 1;
padding: 10px; }
.sidebar header.profile .user-info:before, .sidebar header.profile .user-info:after {
content: "";
display: table; }
.sidebar header.profile .user-info:after {
clear: both; }
.sidebar header.profile .user-info .avatar {
background: #dcdcdc;
border: 1px solid #b4b4b4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 15px 0;
max-width: 100%;
overflow: hidden; }
@media screen and (max-width: 768px) {
.sidebar header.profile .user-info .avatar {
float: left;
margin: 0px;
margin-right: 2.513%;
width: 23.116%; } }
.sidebar header.profile .user-info .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
max-width: 100%; }
@media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info {
float: left;
width: 74.372%; } }
.sidebar header.profile .user-info .info h2 {
border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false);
box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false);
font: bold 18px/20px "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 15px;
overflow: hidden;
padding-bottom: 15px;
text-align: center;
text-wrap: nowrap;
text-overflow: ellipsis; }
@media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info h2 {
text-align: left; } }
.sidebar header.profile .user-info .info > ul {
zoom: 1;
margin: 0px;
padding: 0 0 10px 0; }
.sidebar header.profile .user-info .info > ul:before, .sidebar header.profile .user-info .info > ul:after {
content: "";
display: table; }
.sidebar header.profile .user-info .info > ul:after {
clear: both; }
@media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info > ul {
padding: 0px; } }
.sidebar header.profile .user-info .info > ul li {
list-style: none;
margin-bottom: 10px; }
@media screen and (max-width: 768px) {
.sidebar header.profile .user-info .info > ul li {
float: left;
margin-right: 10px; } }
.sidebar header.profile .user-info .info > ul li:last-child {
margin-bottom: 0px; }
.sidebar header.profile .user-info .info > ul li h3 {
color: #a0a0a0;
font: bold 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
.sidebar header.profile .user-info .info > ul li h3 span {
font-weight: normal;
text-transform: none; }
.courses {
float: left;
width: 74.372%; }
@media only screen and (max-width: 768px) {
.courses {
float: none;
width: 100%; } }
.courses nav.course-filters {
background: #e6e6e6;
margin-bottom: 30px;
position: relative; }
.courses nav.course-filters ol.filters {
zoom: 1; }
.courses nav.course-filters ol.filters:before, .courses nav.course-filters ol.filters:after {
content: "";
display: table; }
.courses nav.course-filters ol.filters:after {
clear: both; }
.courses nav.course-filters ol.filters li {
border-right: 1px solid #c8c8c8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
float: left;
padding: 15px 10px;
width: 25%;
text-align: center; }
.courses nav.course-filters ol.filters li:last-child {
border: none; }
.courses nav.course-filters ol.filters li:hover {
background: #dcdcdc;
cursor: pointer; }
.courses nav.course-filters ol.filters li.selected {
background: #dcdcdc; }
.courses nav.course-filters ol.filters li h2 {
font: normal 11px/13px "Open Sans", Verdana, Geneva, sans-serif;
text-transform: none; }
.courses nav.course-filters ol.filters li span.count {
margin: 5px 0 0 0;
display: block; }
.courses .course {
background: #f0f0f0;
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
font-size: 0px;
min-height: 100px;
margin-bottom: 20px;
padding: 10px;
-webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
-o-transition-property: compact(all, false, false, false, false, false, false, false, false);
transition-property: compact(all, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false); }
.courses .course:last-child {
margin-bottom: none; }
.courses .course > a {
zoom: 1;
display: block;
position: relative; }
.courses .course > a:before, .courses .course > a:after {
content: "";
display: table; }
.courses .course > a:after {
clear: both; }
.courses .course .cover {
background: #e1e1e1;
border: 1px solid #969696;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false);
box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false);
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
-webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
-o-transition-property: compact(all, false, false, false, false, false, false, false, false);
transition-property: compact(all, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
width: 100px; }
@media only screen and (max-width: 320px) {
.courses .course .cover {
display: none; } }
.courses .course .cover .shade {
background: rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
-webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
-o-transition-property: compact(all, false, false, false, false, false, false, false, false);
transition-property: compact(all, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
right: 0px; }
.courses .course .cover .arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: white;
-webkit-box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
-o-transition-property: compact(all, false, false, false, false, false, false, false, false);
transition-property: compact(all, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
width: 55px; }
.courses .course .cover img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
width: 100%; }
.courses .course .info {
margin-left: 115px; }
@media only screen and (max-width: 320px) {
.courses .course .info {
margin: 0px; } }
.courses .course .info > hgroup {
margin-right: 80px; }
@media only screen and (max-width: 320px) {
.courses .course .info > hgroup {
margin: 0px; } }
.courses .course .info > hgroup h2 {
font: bold 18px/24px "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 3px;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-transition-property: compact(color, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(color, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(color, false, false, false, false, false, false, false, false);
-o-transition-property: compact(color, false, false, false, false, false, false, false, false);
transition-property: compact(color, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
text-overflow: ellipsis;
white-space: nowrap; }
.courses .course .info > hgroup p {
color: #3c3c3c;
font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis;
white-space: nowrap; }
.courses .course .info .edit, .courses .course .info .register {
border: 1px solid #dcdcdc;
background: #e6e6e6;
color: #a0a0a0;
display: block;
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
-webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
-o-transition-property: compact(all, false, false, false, false, false, false, false, false);
transition-property: compact(all, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false); }
@media only screen and (max-width: 320px) {
.courses .course .info .edit, .courses .course .info .register {
display: none; } }
.courses .course .info .edit:hover, .courses .course .info .register:hover {
background: white;
color: #1d9dd9; }
.courses .course .info .meta {
border-top: 1px solid #c8c8c8;
-webkit-box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
font-size: 12px;
height: 34px;
margin-top: 15px;
opacity: 0.9;
position: relative;
-webkit-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-o-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
width: 100%; }
.courses .course .info .meta:hover {
opacity: 0.9; }
.courses .course .info .meta > * {
height: 18px;
position: absolute;
top: 15px; }
.courses .course .info .meta .complete {
left: 0px; }
.courses .course .info .meta .complete p {
font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif; }
.courses .course .info .meta .complete p span {
color: #3c3c3c;
font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .course .info .meta .dates p {
color: #a0a0a0;
font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-align: right; }
.courses .course .info .meta .dates p:first-child {
border-right: 1px solid #c8c8c8;
margin-right: 10px;
padding-right: 10px; }
.courses .course .info .meta .dates p time {
color: #3c3c3c;
font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
.courses .course .info .meta .end-date {
display: none; } }
.courses .course .info .meta .end-date p {
color: #a0a0a0;
font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; }
.courses .course .info .meta .end-date p time {
color: #3c3c3c;
font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .course .info .meta .progress {
-webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
left: 90px;
right: 140px; }
@media only screen and (max-width: 320px) {
.courses .course .info .meta .progress {
right: 0px; } }
.courses .course .info .meta .progress .meter {
background: #e6e6e6;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 2px; }
.courses .course .info .meta .progress .meter .meter-fill {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: #d2d2d2;
height: 100%;
width: 60%; }
.courses .course:hover {
background: #f5f5f5;
-webkit-box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false);
box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false);
cursor: pointer; }
.courses .course:hover .edit {
background: #dcdcdc;
border-color: #bebebe; }
.courses .course:hover .cover {
opacity: 1; }
.courses .course:hover h2 {
color: #1d9dd9; }
.courses .course:hover .meta {
opacity: 0.9; }
nav.course-material {
background: #d2d2d2;
zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false);
border-bottom: 1px solid #bebebe;
margin: 0px auto 0px;
padding: 0px;
width: 100%; }
nav.course-material:before, nav.course-material:after {
content: "";
display: table; }
nav.course-material:after {
clear: both; }
nav.course-material .inner-wrapper {
margin: 0 auto;
max-width: 1200px;
width: 100%; }
nav.course-material ol.course-tabs {
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-ms-border-top-left-radius: 4px;
-o-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
-ms-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
border-top-right-radius: 4px;
zoom: 1;
padding: 10px 0 0 0; }
nav.course-material ol.course-tabs:before, nav.course-material ol.course-tabs:after {
content: "";
display: table; }
nav.course-material ol.course-tabs:after {
clear: both; }
nav.course-material ol.course-tabs li {
float: left;
list-style: none; }
nav.course-material ol.course-tabs li a {
color: #a0a0a0;
display: block;
text-align: center;
padding: 5px 13px;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
nav.course-material ol.course-tabs li a:hover {
color: #3c3c3c; }
nav.course-material ol.course-tabs li a.active {
background: white;
border: 1px solid #c8c8c8;
border-bottom: 0px;
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-ms-border-top-left-radius: 4px;
-o-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
-ms-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false);
box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false);
color: #3c3c3c; }
.course-content {
margin-top: 30px; }
.course-content .courseware {
background: #f0f0f0;
height: 600px; }
.find-courses {
margin: 0 10px; }
.find-courses > header {
margin-bottom: 50px; }
.find-courses > header .universities {
zoom: 1;
font-size: 0px;
margin: 0 auto;
width: 48.744%; }
.find-courses > header .universities:before, .find-courses > header .universities:after {
content: "";
display: table; }
.find-courses > header .universities:after {
clear: both; }
.find-courses > header .universities .university {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
opacity: 0.7;
-webkit-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-moz-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-ms-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-o-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
transition-property: compact(opacity, false, false, false, false, false, false, false, false);
-webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
-webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
-webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
-o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
transition-delay: compact(0, false, false, false, false, false, false, false, false);
width: 48.744%;
vertical-align: middle; }
.find-courses > header .universities .university img {
max-width: 100%; }
.find-courses > header .universities .university.mit {
margin-right: 2.513%; }
.find-courses > header .universities span.divider {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 120px;
vertical-align: middle; }
.find-courses .courses {
zoom: 1;
width: 100%; }
.find-courses .courses:before, .find-courses .courses:after {
content: "";
display: table; }
.find-courses .courses:after {
clear: both; }
.find-courses .courses .course {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 48.744%; }
@media only screen and (max-width: 768px) {
.find-courses .courses .course {
float: none;
margin-right: 0px;
width: 100%; } }
.find-courses .courses .course:nth-child(odd) {
margin-right: 2.513%; }
.course-info .course-description, .course-info .who-should-take, .course-info .who-shouldnt-take, .course-info .syllubus, .course-info .faq {
display: none; }
.course-info section {
margin-top: 20px; }
.course-info h2 {
font-size: 2em; }
.course-info h3 {
font-size: 1.4em;
margin-bottom: 16px; }
.course-info p {
color: #666666; }
.course-info header {
background: #f0f0f0;
border: 1px solid #c8c8c8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false);
margin-top: 30px;
padding: 22px 194px 22px 22px;
position: relative; }
.course-info header > img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
float: right;
height: 150px;
position: absolute;
right: 20px;
top: 20px;
width: 150px; }
.course-info header h2 {
margin-bottom: 12px; }
.course-info header h2 .course-number {
color: #a0a0a0; }
.course-info header h3 {
margin-bottom: 22px; }
.course-info header .course-times {
margin-top: 22px; }
.course-info header .course-times .start-time, .course-info header .course-times .end-time, .course-info header .course-times .duration, .course-info header .course-times .separator {
color: #666666; }
.course-info header .course-times .duration {
padding-left: 1em; }
.course-info header .course-times .separator {
padding: 0 .5em; }
.course-info .sign-up {
margin: 2em 0;
text-align: center; }
.course-info .sign-up .button {
border: 1px solid #0d72a2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
color: white;
display: inline;
font-size: 11px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)));
background-image: -webkit-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: -moz-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: -ms-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: -o-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
padding: 6px 18px 7px;
text-shadow: 0 1px 0 #076794;
-webkit-background-clip: padding-box;
font-size: 1.4em; }
.course-info .sign-up .button:hover {
-webkit-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
cursor: pointer;
background-color: #1e8bbe;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)));
background-image: -webkit-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: -moz-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: -ms-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: -o-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); }
.course-info .sign-up .button:active {
border: 1px solid #0d72a2;
-webkit-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); }
.course-info .teacher-description {
background: #fafafa;
border: 1px solid #c8c8c8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
float: left;
margin: 0 25px 3em 0;
padding: 0 22px;
position: relative;
width: 65.829%; }
.course-info .teacher-description h3, .course-info .teacher-description p {
padding-left: 190px; }
.course-info .teacher-description .teacher-image {
margin: 0 16px 0 0;
max-width: 170px;
position: absolute;
text-align: center;
top: -20px; }
.course-info .teacher-description .teacher-image .teacher-name {
font-weight: bold;
color: #646464;
position: relative;
top: 12px; }
.course-info .teacher-description .teacher-image img {
border: 1px solid #666666;
-webkit-box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false);
box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false);
max-width: 100%; }
.course-info .expand-more {
border: 1px solid #0d72a2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
color: white;
display: inline;
font-size: 11px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)));
background-image: -webkit-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: -moz-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: -ms-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: -o-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
background-image: linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
padding: 6px 18px 7px;
text-shadow: 0 1px 0 #076794;
-webkit-background-clip: padding-box;
display: block;
float: left;
font-size: 1.4em;
margin: 0 auto;
text-align: center;
width: 23.116%; }
.course-info .expand-more:hover {
-webkit-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
cursor: pointer;
background-color: #1e8bbe;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)));
background-image: -webkit-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: -moz-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: -ms-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: -o-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
background-image: linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); }
.course-info .expand-more:active {
border: 1px solid #0d72a2;
-webkit-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
-moz-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); }
.course-info .course-description {
background: #fafafa;
border: 1px solid #c8c8c8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
padding: 22px; }
.course-info .syllubus ul {
list-style-type: none; }
.course-info .syllubus ul li {
padding: .2em 0; }
.course-info .faq ul li {
margin-bottom: 1em; }
lms/static/sass/screen.scss deleted 100644 → 0
@import 'bourbon/bourbon';
@import 'reset';
@import 'base';
@import 'base_extends';
@import 'base_animations';
@import 'shared_forms';
@import 'shared_footer';
@import 'shared_header';
@import 'index';
@import 'dashboard';
@import 'course';
@import 'find_courses';
@import 'course_info';
lms/templates/course.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
%for i in xrange(6):
<article class="course">
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
</div>
<section class="info">
<hgroup>
<h2>18th Century History</h2>
<p>Adam Smith, Harvard University</p>
</hgroup>
<div class="edit">Register</div>
<section class="meta">
<div class="dates">
<p>Starts: <time>6/10/12</time></p>
<p>Ends: <time>9/23/12</time></p>
</div>
</section>
</section>
</a>
</article>
%endfor
lms/templates/course_filter.html 0 → 100644
<section class="filter">
<nav>
<div class="dropdown university">
<div class="filter-heading">
All Universities
</div>
<ul>
<li>
<a href="#">Harvard</a>
</li>
<li>
<a href="#">MIT</a>
</li>
</ul>
</div>
<div class="dropdown subject">
<div class="filter-heading">
All Subjects
</div>
<ul>
<li>
<a href="#">Computer Science</a>
</li>
<li>
<a href="#">History</a>
</li>
</ul>
</div>
<div class="dropdown featured">
<div class="filter-heading">
Newest
</div>
<ul>
<li>
<a href="#">Top Rated</a>
</li>
<li>
<a href="#">Starting soonest</a>
</li>
</ul>
</div>
<form class="search">
<input type="text" placeholder="Search for courses">
<input type="submit">
</form>
</nav>
</section>
lms/templates/courses.html
...@@ -2,41 +2,18 @@ ...@@ -2,41 +2,18 @@
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<section class="container"> <section class="find-courses">
<section class="find-courses">
<header> <header>
<section class="universities"> <div class="inner-wrapper">
<img src="${static.url('images/schools.png')}" /> <img src="${static.url('images/edx_bw.png')}" />
</section> <h1>Explore courses from universities around the world.</h1>
</div>
<div class="faded-hr-divider"></div>
</header> </header>
<h2 class="title">Current Courses offered by <em>MIT</em> and <em>Harvard University</em></h2> <section class="container">
<%include file="course_filter.html" />
<section class="courses"> <section class="courses">
<article class="course"> <%include file="course.html" />
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
</div>
<section class="info">
<hgroup>
<h2>Circuits and Electronics</h2>
<p>Adam Smith, Harvard University</p>
</hgroup>
<div class="edit">Register</div>
<section class="meta">
<div class="dates">
<p>Starts: <time>6/10/12</time></p>
<p>Ends: <time>9/23/12</time></p>
</div>
</section>
</section>
</a>
</article>
</section> </section>
</section> </section>
</section> </section>
lms/templates/dashboard.html
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</section> </section>
<section class="courses"> <section class="courses">
<nav class="course-filters"> <nav class="course-toggle">
<ol class="filters"> <ol class="filters">
<li class="selected"> <li class="selected">
<h2>All <span class="count">3</span></h2> <h2>All <span class="count">3</span></h2>
......
lms/templates/footer.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
<footer>
<nav>
<a href="/" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<ol>
<li>
<a href="/courses">Find Courses</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contribute</a>
</li>
</ol>
<ol class="right">
<li>
<a href="/dashboard">My Dashboard</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="/index">Logout</a>
</li>
</ol>
<ol class="social">
<li>
<a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/facebook.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/twitter.png')}" /></a>
</li>
</ol>
</nav>
<section class="copyright">
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
</footer>
lms/templates/guest_navigation.html deleted 100644 → 0
<header class="app">
<nav>
<a href="/" class="logo">
<img src="/static/images/logo.png" />
</a>
<ol>
<li><a href="/courses">Courses</a></li>
<li><a href="#">How It Works</a></li>
</ol>
<ol class="user">
<li><a href="/dashboard">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ol>
<ol class="secondary">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">faq</a>
</li>
</ol>
</nav>
</header>
lms/templates/index.html
<%inherit file="main.html" /> <%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<section class="container"> <section class="container">
<section class="home"> <section class="home">
<header> <header>
<h1>The Future of Online Education</h1>
<div class="orginizations">
<div class="orginization mit"><img src="/static/images/mit.png" /></div>
<div class="divider left"></div>
<div class="orginization edx"><img src="/static/images/edx.png" /></div>
<div class="divider right"></div>
<div class="orginization harvard"><img src="/static/images/harvard.png" /></div>
</div>
<section class="video-wrapper"> <section class="video-wrapper">
<div class="video-player"> <div class="video-player">
<div class="video-inner"> <div class="video-inner">
<iframe width="640" height="360" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
</div> </div>
</div> </div>
</section> </section>
<div class="bottom-divider"></div>
</header>
<section class="welcome"> <section class="welcome">
<div class="intro"> <div class="intro">
<h2>"The single biggest change in education since the printing press."</h2> <h1>The Future of Online Education</h1>
<p> <p>
EdX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education for everyone. EdX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education.
</p> </p>
</div> </div>
<div class="signup-wrapper"> <div class="signup-wrapper">
<section class="sign-up top"> <section class="sign-up">
<a href="#">Sign Up Now</a> <a href="#" class="find-courses">Find Courses</a>
<a href="#" class="create-account">Sign Up</a>
</section> </section>
</div> </div>
</section> </section>
</header>
<section class="university-partners"> <section class="university-partners">
<section class="partners"> <section class="partners">
<img src="/static/images/mit_bw.png" /> <a href="/university_profile.html">
<img src="/static/images/edx_bw.png" /> <img src="${static.url('images/mit_bw.png')}" />
<img src="/static/images/harvard_bw.png" /> <div class="name">MITx</div>
</section>
</section>
<section class="highlighted-courses">
<article class="course">
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="/static/images/history.png" />
</div>
<section class="info">
<hgroup>
<h2>18th Century History</h2>
<p>Adam Smith, Harvard University</p>
</hgroup>
</section>
</a> </a>
</article> <a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
</a>
</section>
</section> </section>
<section class="sign-up middle"> <section class="courses">
<form> <%include file="course.html" />
<input type="text" placeholder="Full Name">
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<input type="submit" value="Sign Up">
</form>
</section> </section>
<section class="more-info"> <section class="more-info">
<h2>More Information & News</h2> <h2>edX News & Announcements</h2>
<section class="news"> <section class="news">
<article></article> <article></article>
<article></article> <article></article>
...@@ -79,8 +54,5 @@ ...@@ -79,8 +54,5 @@
</section> </section>
</section> </section>
<section class="social-media">
<h2>Social Media</h2>
</section>
</section> </section>
</section> </section>
lms/templates/main.html
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<head> <head>
<%block name="title"><title>MITx 6.002x</title></%block> <%block name="title"><title>MITx 6.002x</title></%block>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800italic,400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="${static.url('js/jquery.treeview.css')}" type="text/css" media="all" /> <link rel="stylesheet" href="${static.url('js/jquery.treeview.css')}" type="text/css" media="all" />
% if settings.MITX_FEATURES['USE_DJANGO_PIPELINE']: % if settings.MITX_FEATURES['USE_DJANGO_PIPELINE']:
...@@ -63,8 +64,11 @@ ...@@ -63,8 +64,11 @@
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
<%include file="footer.html" />
<%block name="js_extra"/> <%block name="js_extra"/>
<script src="${static.url('js/my_courses_dropdown.js')}"></script> <script src="${static.url('js/my_courses_dropdown.js')}"></script>
<script src="${static.url('js/sticky_footer.js')}"></script>
<script src="${static.url('js/sticky_filter.js')}"></script>
</body> </body>
</html> </html>
lms/templates/navigation.html
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<header class="app" aria-label="Global Navigation"> <header class="app" aria-label="Global Navigation">
<nav> <section class="wrapper">
<a href="${ MITX_ROOT_URL }" class="logo"> <a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" /> <img src="${static.url('images/logo.png')}" />
</a> </a>
<a href="/courses" class="discover-courses">Find Courses</a>
%if user.is_authenticated(): %if user.is_authenticated():
<h1>${ settings.COURSE_TITLE }</h1> <h1>${ settings.COURSE_TITLE }</h1>
<ol class="user"> <nav class="user">
<ol>
<li> <li>
<a href="/dashboard" class="user-dashboard"> <a href="/dashboard" class="user-link">
<span class="avatar"><img src="/static/images/profile.jpg" /></span> <span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
${ user.username } Neil deGrasse Tyson
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="options">&#9662</a> <a href="#" class="options">&#9662</a>
<ol class="user-options"> <ol class="user-options">
<li><a href="#">Account Settings</a></li> <li><a href="#">Help</a></li>
<li><a href="/logout">Log Out</a></li> <li><a href="/logout">Log Out</a></li>
</ol> </ol>
</li> </li>
</ol> </ol>
</nav>
%else: %else:
<nav class="guest">
<ol> <ol>
<li><a href="/courses">Courses</a></li>
<li><a href="#">How It Works</a></li>
</ol>
<ol class="user">
<li><a href="/dashboard">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ol>
<ol class="secondary">
<li> <li>
<a href="#">About</a> <a href="#">About</a>
</li> </li>
<li> <li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Jobs</a> <a href="#">Jobs</a>
</li> </li>
<li> <li>
<a href="#">faq</a> <a href="/dashboard">Log In</a>
</li>
<li>
<a href="#">Sign Up</a>
</li> </li>
</ol> </ol>
%endif
</nav> </nav>
%endif
</section>
</header> </header>
static/coffee/src/calculator.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Calculator = (function() {
function Calculator() {
$('.calc').click(this.toggle);
$('form#calculator').submit(this.calculate).submit(function(e) {
return e.preventDefault();
});
$('div.help-wrapper a').hover(this.helpToggle).click(function(e) {
return e.preventDefault();
});
}
Calculator.prototype.toggle = function() {
$('li.calc-main').toggleClass('open');
$('#calculator_wrapper #calculator_input').focus();
if ($('.calc.closed').length) {
$('.calc').attr('aria-label', 'Open Calculator');
} else {
$('.calc').attr('aria-label', 'Close Calculator');
}
return $('.calc').toggleClass('closed');
};
Calculator.prototype.helpToggle = function() {
return $('.help').toggleClass('shown');
};
Calculator.prototype.calculate = function() {
return $.getWithPrefix('/calculate', {
equation: $('#calculator_input').val()
}, function(data) {
return $('#calculator_output').val(data.result);
});
};
return Calculator;
})();
}).call(this);
static/coffee/src/courseware.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Courseware = (function() {
Courseware.prefix = '';
function Courseware() {
Courseware.prefix = $("meta[name='path_prefix']").attr('content');
new Navigation;
new Calculator;
new FeedbackForm;
Logger.bind();
this.bind();
this.render();
}
Courseware.start = function() {
return new Courseware;
};
Courseware.prototype.bind = function() {
return $('.course-content .sequence, .course-content .tab').bind('contentChanged', this.render);
};
Courseware.prototype.render = function() {
$('.course-content .video').each(function() {
var id;
id = $(this).attr('id').replace(/video_/, '');
return new Video(id, $(this).data('streams'));
});
$('.course-content .problems-wrapper').each(function() {
var id;
id = $(this).attr('id').replace(/problem_/, '');
return new Problem(id, $(this).data('url'));
});
return $('.course-content .histogram').each(function() {
var id;
id = $(this).attr('id').replace(/histogram_/, '');
return new Histogram(id, $(this).data('histogram'));
});
};
return Courseware;
})();
}).call(this);
static/coffee/src/feedback_form.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.FeedbackForm = (function() {
function FeedbackForm() {
$('#feedback_button').click(function() {
var data;
data = {
subject: $('#feedback_subject').val(),
message: $('#feedback_message').val(),
url: window.location.href
};
return $.postWithPrefix('/send_feedback', data, function() {
return $('#feedback_div').html('Feedback submitted. Thank you');
}, 'json');
});
}
return FeedbackForm;
})();
}).call(this);
static/coffee/src/histogram.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Histogram = (function() {
function Histogram(id, rawData) {
this.id = id;
this.rawData = rawData;
this.xTicks = [];
this.yTicks = [];
this.data = [];
this.calculate();
this.render();
}
Histogram.prototype.calculate = function() {
var count, log_count, score, _i, _len, _ref, _ref1, _results;
_ref = this.rawData;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
_ref1 = _ref[_i], score = _ref1[0], count = _ref1[1];
log_count = Math.log(count + 1);
this.data.push([score, log_count]);
this.xTicks.push([score, score.toString()]);
_results.push(this.yTicks.push([log_count, count.toString()]));
}
return _results;
};
Histogram.prototype.render = function() {
return $.plot($("#histogram_" + this.id), [
{
data: this.data,
bars: {
show: true,
align: 'center',
lineWidth: 0,
fill: 1.0
},
color: "#b72121"
}
], {
xaxis: {
min: -1,
max: Math.max.apply(Math, $.map(this.xTicks, function(data) {
return data[0] + 1;
})),
ticks: this.xTicks,
tickLength: 0
},
yaxis: {
min: 0.0,
max: Math.max.apply(Math, $.map(this.yTicks, function(data) {
return data[0] * 1.1;
})),
ticks: this.yTicks,
labelWidth: 50
}
});
};
return Histogram;
})();
}).call(this);
static/coffee/src/logger.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Logger = (function() {
function Logger() {}
Logger.log = function(event_type, data) {
return $.getWithPrefix('/event', {
event_type: event_type,
event: JSON.stringify(data),
page: window.location.href
});
};
Logger.bind = function() {
return window.onunload = function() {
return $.ajax({
url: "" + Courseware.prefix + "/event",
data: {
event_type: 'page_close',
event: '',
page: window.location.href
},
async: false
});
};
};
return Logger;
})();
this.log_event = Logger.log;
}).call(this);
static/coffee/src/main.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
jQuery.postWithPrefix = function(url, data, callback, type) {
return $.post("" + Courseware.prefix + url, data, callback, type);
};
jQuery.getWithPrefix = function(url, data, callback, type) {
return $.get("" + Courseware.prefix + url, data, callback, type);
};
$(function() {
$.ajaxSetup({
headers: {
'X-CSRFToken': $.cookie('csrftoken')
},
dataType: 'json'
});
window.onTouchBasedDevice = function() {
return navigator.userAgent.match(/iPhone|iPod|iPad/i);
};
$("a[rel*=leanModal]").leanModal();
$('#csrfmiddlewaretoken').attr('value', $.cookie('csrftoken'));
if ($('body').hasClass('courseware')) {
Courseware.start();
}
window.submit_circuit = function(circuit_id) {
$("input.schematic").each(function(index, element) {
return element.schematic.update_value();
});
schematic_value($("#schematic_" + circuit_id).attr("value"));
return $.postWithPrefix("/save_circuit/" + circuit_id, {
schematic: schematic_value
}, function(data) {
if (data.results === 'success') {
return alert('Saved');
}
});
};
return window.postJSON = function(url, data, callback) {
return $.postWithPrefix(url, data, callback);
};
});
}).call(this);
static/coffee/src/modules/problem.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Problem = (function() {
function Problem(id, url) {
this.id = id;
this.refreshAnswers = __bind(this.refreshAnswers, this);
this.save = __bind(this.save, this);
this.show = __bind(this.show, this);
this.reset = __bind(this.reset, this);
this.check = __bind(this.check, this);
this.bind = __bind(this.bind, this);
this.element = $("#problem_" + id);
this.content_url = "" + url + "problem_get?id=" + this.id;
this.render();
}
Problem.prototype.$ = function(selector) {
return $(selector, this.element);
};
Problem.prototype.bind = function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
window.update_schematics();
this.$('section.action input:button').click(this.refreshAnswers);
this.$('section.action input.check').click(this.check);
this.$('section.action input.reset').click(this.reset);
this.$('section.action input.show').click(this.show);
return this.$('section.action input.save').click(this.save);
};
Problem.prototype.render = function(content) {
if (content) {
this.element.html(content);
return this.bind();
} else {
return this.element.load(this.content_url, this.bind);
}
};
Problem.prototype.check = function() {
var _this = this;
Logger.log('problem_check', this.answers);
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_check", this.answers, function(response) {
switch (response.success) {
case 'incorrect':
case 'correct':
return _this.render(response.contents);
default:
return alert(response.success);
}
});
};
Problem.prototype.reset = function() {
var _this = this;
Logger.log('problem_reset', this.answers);
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_reset", {
id: this.id
}, function(content) {
return _this.render(content);
});
};
Problem.prototype.show = function() {
var _this = this;
if (!this.element.hasClass('showed')) {
Logger.log('problem_show', {
problem: this.id
});
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_show", function(response) {
$.each(response, function(key, value) {
var choice, _i, _len, _results;
if ($.isArray(value)) {
_results = [];
for (_i = 0, _len = value.length; _i < _len; _i++) {
choice = value[_i];
_results.push(_this.$("label[for='input_" + key + "_" + choice + "']").attr({
correct_answer: 'true'
}));
}
return _results;
} else {
return _this.$("#answer_" + key).text(value);
}
});
_this.$('.show').val('Hide Answer');
return _this.element.addClass('showed');
});
} else {
this.$('[id^=answer_]').text('');
this.$('[correct_answer]').attr({
correct_answer: null
});
this.element.removeClass('showed');
return this.$('.show').val('Show Answer');
}
};
Problem.prototype.save = function() {
var _this = this;
Logger.log('problem_save', this.answers);
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_save", this.answers, function(response) {
if (response.success) {
return alert('Saved');
}
});
};
Problem.prototype.refreshAnswers = function() {
this.$('input.schematic').each(function(index, element) {
return element.schematic.update_value();
});
this.$(".CodeMirror").each(function(index, element) {
if (element.CodeMirror.save) {
return element.CodeMirror.save();
}
});
return this.answers = this.$("[id^=input_" + this.id + "_]").serialize();
};
return Problem;
})();
}).call(this);
static/coffee/src/modules/sequence.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Sequence = (function() {
function Sequence(id, elements, tag, position) {
this.id = id;
this.elements = elements;
this.tag = tag;
this.previous = __bind(this.previous, this);
this.next = __bind(this.next, this);
this.goto = __bind(this.goto, this);
this.toggleArrows = __bind(this.toggleArrows, this);
this.element = $("#sequence_" + this.id);
this.buildNavigation();
this.bind();
this.render(position);
}
Sequence.prototype.$ = function(selector) {
return $(selector, this.element);
};
Sequence.prototype.bind = function() {
this.element.bind('contentChanged', this.toggleArrows);
return this.$('#sequence-list a').click(this.goto);
};
Sequence.prototype.buildNavigation = function() {
var _this = this;
return $.each(this.elements, function(index, item) {
var link, list_item, title;
link = $('<a>').attr({
"class": "seq_" + item.type + "_inactive",
'data-element': index + 1
});
title = $('<p>').html(item.title);
list_item = $('<li>').append(link.append(title));
return _this.$('#sequence-list').append(list_item);
});
};
Sequence.prototype.toggleArrows = function() {
this.$('.sequence-nav-buttons a').unbind('click');
if (this.position === 1) {
this.$('.sequence-nav-buttons .prev a').addClass('disabled');
} else {
this.$('.sequence-nav-buttons .prev a').removeClass('disabled').click(this.previous);
}
if (this.position === this.elements.length) {
return this.$('.sequence-nav-buttons .next a').addClass('disabled');
} else {
return this.$('.sequence-nav-buttons .next a').removeClass('disabled').click(this.next);
}
};
Sequence.prototype.render = function(new_position) {
if (this.position !== new_position) {
if (this.position !== void 0) {
this.mark_visited(this.position);
$.postWithPrefix("/modx/" + this.tag + "/" + this.id + "/goto_position", {
position: new_position
});
}
this.mark_active(new_position);
this.$('#seq_content').html(eval(this.elements[new_position - 1].content));
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
this.position = new_position;
return this.element.trigger('contentChanged');
}
};
Sequence.prototype.goto = function(event) {
var new_position;
event.preventDefault();
new_position = $(event.target).data('element');
Logger.log("seq_goto", {
old: this.position,
"new": new_position,
id: this.id
});
return this.render(new_position);
};
Sequence.prototype.next = function(event) {
var new_position;
event.preventDefault();
new_position = this.position + 1;
Logger.log("seq_next", {
old: this.position,
"new": new_position,
id: this.id
});
return this.render(new_position);
};
Sequence.prototype.previous = function(event) {
var new_position;
event.preventDefault();
new_position = this.position - 1;
Logger.log("seq_prev", {
old: this.position,
"new": new_position,
id: this.id
});
return this.render(new_position);
};
Sequence.prototype.link_for = function(position) {
return this.$("#sequence-list a[data-element=" + position + "]");
};
Sequence.prototype.mark_visited = function(position) {
return this.link_for(position).attr({
"class": "seq_" + this.elements[position - 1].type + "_visited"
});
};
Sequence.prototype.mark_active = function(position) {
return this.link_for(position).attr({
"class": "seq_" + this.elements[position - 1].type + "_active"
});
};
return Sequence;
})();
}).call(this);
static/coffee/src/modules/tab.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Tab = (function() {
function Tab(id, items) {
this.id = id;
this.items = items;
this.onShow = __bind(this.onShow, this);
this.element = $("#tab_" + id);
this.render();
}
Tab.prototype.$ = function(selector) {
return $(selector, this.element);
};
Tab.prototype.render = function() {
var _this = this;
$.each(this.items, function(index, item) {
var tab;
tab = $('<a>').attr({
href: "#" + (_this.tabId(index))
}).html(item.title);
_this.$('.navigation').append($('<li>').append(tab));
return _this.element.append($('<section>').attr({
id: _this.tabId(index)
}));
});
return this.element.tabs({
show: this.onShow
});
};
Tab.prototype.onShow = function(element, ui) {
this.$('section.ui-tabs-hide').html('');
this.$("#" + (this.tabId(ui.index))).html(eval(this.items[ui.index]['content']));
return this.element.trigger('contentChanged');
};
Tab.prototype.tabId = function(index) {
return "tab-" + this.id + "-" + index;
};
return Tab;
})();
}).call(this);
static/coffee/src/modules/video.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Video = (function() {
function Video(id, videos) {
var _this = this;
this.id = id;
window.player = null;
this.element = $("#video_" + this.id);
this.parseVideos(videos);
this.fetchMetadata();
this.parseSpeed();
$("#video_" + this.id).data('video', this);
if (YT.Player) {
this.embed();
} else {
window.onYouTubePlayerAPIReady = function() {
return $('.course-content .video').each(function() {
return $(this).data('video').embed();
});
};
}
}
Video.prototype.youtubeId = function(speed) {
return this.videos[speed || this.speed];
};
Video.prototype.parseVideos = function(videos) {
var _this = this;
this.videos = {};
return $.each(videos.split(/,/), function(index, video) {
var speed;
video = video.split(/:/);
speed = parseFloat(video[0]).toFixed(2).replace(/\.00$/, '.0');
return _this.videos[speed] = video[1];
});
};
Video.prototype.parseSpeed = function() {
this.setSpeed($.cookie('video_speed'));
return this.speeds = ($.map(this.videos, function(url, speed) {
return speed;
})).sort();
};
Video.prototype.setSpeed = function(newSpeed) {
if (this.videos[newSpeed] !== void 0) {
this.speed = newSpeed;
return $.cookie('video_speed', "" + newSpeed, {
expires: 3650,
path: '/'
});
} else {
return this.speed = '1.0';
}
};
Video.prototype.embed = function() {
return this.player = new VideoPlayer(this);
};
Video.prototype.fetchMetadata = function(url) {
var _this = this;
this.metadata = {};
return $.each(this.videos, function(speed, url) {
return $.get("http://gdata.youtube.com/feeds/api/videos/" + url + "?v=2&alt=jsonc", (function(data) {
return _this.metadata[data.data.id] = data.data;
}), 'jsonp');
});
};
Video.prototype.getDuration = function() {
return this.metadata[this.youtubeId()].duration;
};
return Video;
})();
}).call(this);
static/coffee/src/modules/video/video_caption.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoCaption = (function() {
function VideoCaption(player, youtubeId) {
this.player = player;
this.youtubeId = youtubeId;
this.toggle = __bind(this.toggle, this);
this.seekPlayer = __bind(this.seekPlayer, this);
this.onMouseLeave = __bind(this.onMouseLeave, this);
this.onMovement = __bind(this.onMovement, this);
this.onMouseEnter = __bind(this.onMouseEnter, this);
this.onWindowResize = __bind(this.onWindowResize, this);
this.onUpdatePlayTime = __bind(this.onUpdatePlayTime, this);
this.render();
this.bind();
}
VideoCaption.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoCaption.prototype.bind = function() {
$(window).bind('resize', this.onWindowResize);
$(this.player).bind('resize', this.onWindowResize);
$(this.player).bind('updatePlayTime', this.onUpdatePlayTime);
this.$('.hide-subtitles').click(this.toggle);
return this.$('.subtitles').mouseenter(this.onMouseEnter).mouseleave(this.onMouseLeave).mousemove(this.onMovement).bind('mousewheel', this.onMovement).bind('DOMMouseScroll', this.onMovement);
};
VideoCaption.prototype.captionURL = function() {
return "/static/subs/" + this.youtubeId + ".srt.sjson";
};
VideoCaption.prototype.render = function() {
this.$('.video-wrapper').after("<ol class=\"subtitles\"><li>Attempting to load captions...</li></ol>");
this.$('.video-controls .secondary-controls').append("<a href=\"#\" class=\"hide-subtitles\" title=\"Turn off captions\">Captions</a>");
this.$('.subtitles').css({
maxHeight: this.$('.video-wrapper').height() - 5
});
return this.fetchCaption();
};
VideoCaption.prototype.fetchCaption = function() {
var _this = this;
return $.getWithPrefix(this.captionURL(), function(captions) {
_this.captions = captions.text;
_this.start = captions.start;
return _this.renderCaption();
});
};
VideoCaption.prototype.renderCaption = function() {
var container,
_this = this;
container = $('<ol>');
$.each(this.captions, function(index, text) {
return container.append($('<li>').html(text).attr({
'data-index': index,
'data-start': _this.start[index]
}));
});
this.$('.subtitles').html(container.html());
this.$('.subtitles li[data-index]').click(this.seekPlayer);
return this.$('.subtitles').prepend($('<li class="spacing">').height(this.topSpacingHeight())).append($('<li class="spacing">').height(this.bottomSpacingHeight()));
};
VideoCaption.prototype.search = function(time) {
var index, max, min;
min = 0;
max = this.start.length - 1;
while (min < max) {
index = Math.ceil((max + min) / 2);
if (time < this.start[index]) {
max = index - 1;
}
if (time >= this.start[index]) {
min = index;
}
}
return min;
};
VideoCaption.prototype.onUpdatePlayTime = function(event, time) {
var newIndex;
time = Math.round(Time.convert(time, this.player.currentSpeed(), '1.0') * 1000 + 250);
newIndex = this.search(time);
if (newIndex !== void 0 && this.currentIndex !== newIndex) {
if (this.currentIndex) {
this.$(".subtitles li.current").removeClass('current');
}
this.$(".subtitles li[data-index='" + newIndex + "']").addClass('current');
this.currentIndex = newIndex;
return this.scrollCaption();
}
};
VideoCaption.prototype.onWindowResize = function() {
this.$('.subtitles').css({
maxHeight: this.captionHeight()
});
this.$('.subtitles .spacing:first').height(this.topSpacingHeight());
this.$('.subtitles .spacing:last').height(this.bottomSpacingHeight());
return this.scrollCaption();
};
VideoCaption.prototype.onMouseEnter = function() {
if (this.frozen) {
clearTimeout(this.frozen);
}
return this.frozen = setTimeout(this.onMouseLeave, 10000);
};
VideoCaption.prototype.onMovement = function() {
return this.onMouseEnter();
};
VideoCaption.prototype.onMouseLeave = function() {
if (this.frozen) {
clearTimeout(this.frozen);
}
this.frozen = null;
if (this.player.isPlaying()) {
return this.scrollCaption();
}
};
VideoCaption.prototype.scrollCaption = function() {
if (!this.frozen && this.$('.subtitles .current:first').length) {
return this.$('.subtitles').scrollTo(this.$('.subtitles .current:first'), {
offset: -this.calculateOffset(this.$('.subtitles .current:first'))
});
}
};
VideoCaption.prototype.seekPlayer = function(event) {
var time;
event.preventDefault();
time = Math.round(Time.convert($(event.target).data('start'), '1.0', this.player.currentSpeed()) / 1000);
return $(this.player).trigger('seek', time);
};
VideoCaption.prototype.calculateOffset = function(element) {
return this.captionHeight() / 2 - element.height() / 2;
};
VideoCaption.prototype.topSpacingHeight = function() {
return this.calculateOffset(this.$('.subtitles li:not(.spacing):first'));
};
VideoCaption.prototype.bottomSpacingHeight = function() {
return this.calculateOffset(this.$('.subtitles li:not(.spacing):last'));
};
VideoCaption.prototype.toggle = function(event) {
event.preventDefault();
if (this.player.element.hasClass('closed')) {
this.$('.hide-subtitles').attr('title', 'Turn off captions');
this.player.element.removeClass('closed');
return this.scrollCaption();
} else {
this.$('.hide-subtitles').attr('title', 'Turn on captions');
return this.player.element.addClass('closed');
}
};
VideoCaption.prototype.captionHeight = function() {
if (this.player.element.hasClass('fullscreen')) {
return $(window).height() - this.$('.video-controls').height();
} else {
return this.$('.video-wrapper').height();
}
};
return VideoCaption;
})();
}).call(this);
static/coffee/src/modules/video/video_control.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoControl = (function() {
function VideoControl(player) {
this.player = player;
this.togglePlayback = __bind(this.togglePlayback, this);
this.onPause = __bind(this.onPause, this);
this.onPlay = __bind(this.onPlay, this);
this.render();
this.bind();
}
VideoControl.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoControl.prototype.bind = function() {
$(this.player).bind('play', this.onPlay).bind('pause', this.onPause).bind('ended', this.onPause);
return this.$('.video_control').click(this.togglePlayback);
};
VideoControl.prototype.render = function() {
return this.$('.video-controls').append("<div class=\"slider\"></div>\n<div>\n <ul class=\"vcr\">\n <li><a class=\"video_control play\">Play</a></li>\n <li>\n <div class=\"vidtime\">0:00 / 0:00</div>\n </li>\n </ul>\n <div class=\"secondary-controls\">\n <a href=\"#\" class=\"add-fullscreen\" title=\"Fill browser\">Fill Browser</a>\n </div>\n</div>");
};
VideoControl.prototype.onPlay = function() {
return this.$('.video_control').removeClass('play').addClass('pause').html('Pause');
};
VideoControl.prototype.onPause = function() {
return this.$('.video_control').removeClass('pause').addClass('play').html('Play');
};
VideoControl.prototype.togglePlayback = function(event) {
event.preventDefault();
if (this.player.isPlaying()) {
return $(this.player).trigger('pause');
} else {
return $(this.player).trigger('play');
}
};
return VideoControl;
})();
}).call(this);
static/coffee/src/modules/video/video_player.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoPlayer = (function() {
function VideoPlayer(video) {
this.video = video;
this.toggleFullScreen = __bind(this.toggleFullScreen, this);
this.onUpdatePlayTime = __bind(this.onUpdatePlayTime, this);
this.update = __bind(this.update, this);
this.onSpeedChange = __bind(this.onSpeedChange, this);
this.onPause = __bind(this.onPause, this);
this.onPlay = __bind(this.onPlay, this);
this.onStateChange = __bind(this.onStateChange, this);
this.onReady = __bind(this.onReady, this);
this.bindExitFullScreen = __bind(this.bindExitFullScreen, this);
this.currentTime = 0;
this.element = $("#video_" + this.video.id);
this.render();
this.bind();
}
VideoPlayer.prototype.$ = function(selector) {
return $(selector, this.element);
};
VideoPlayer.prototype.bind = function() {
$(this).bind('seek', this.onSeek).bind('updatePlayTime', this.onUpdatePlayTime).bind('speedChange', this.onSpeedChange).bind('play', this.onPlay).bind('pause', this.onPause).bind('ended', this.onPause);
$(document).keyup(this.bindExitFullScreen);
this.$('.add-fullscreen').click(this.toggleFullScreen);
if (!onTouchBasedDevice()) {
return this.addToolTip();
}
};
VideoPlayer.prototype.bindExitFullScreen = function(event) {
if (this.element.hasClass('fullscreen') && event.keyCode === 27) {
return this.toggleFullScreen(event);
}
};
VideoPlayer.prototype.render = function() {
new VideoControl(this);
new VideoCaption(this, this.video.youtubeId('1.0'));
new VideoSpeedControl(this, this.video.speeds);
new VideoProgressSlider(this);
return this.player = new YT.Player(this.video.id, {
playerVars: {
controls: 0,
wmode: 'transparent',
rel: 0,
showinfo: 0,
enablejsapi: 1
},
videoId: this.video.youtubeId(),
events: {
onReady: this.onReady,
onStateChange: this.onStateChange
}
});
};
VideoPlayer.prototype.addToolTip = function() {
return this.$('.add-fullscreen, .hide-subtitles').qtip({
position: {
my: 'top right',
at: 'top center'
}
});
};
VideoPlayer.prototype.onReady = function() {
$(this).trigger('ready');
$(this).trigger('updatePlayTime', 0);
if (!onTouchBasedDevice()) {
return $('.course-content .video:first').data('video').player.play();
}
};
VideoPlayer.prototype.onStateChange = function(event) {
switch (event.data) {
case YT.PlayerState.PLAYING:
return $(this).trigger('play');
case YT.PlayerState.PAUSED:
return $(this).trigger('pause');
case YT.PlayerState.ENDED:
return $(this).trigger('ended');
}
};
VideoPlayer.prototype.onPlay = function() {
Logger.log('play_video', {
id: this.currentTime,
code: this.player.getVideoEmbedCode()
});
if (window.player && window.player !== this.player) {
window.player.pauseVideo();
}
window.player = this.player;
if (!this.player.interval) {
return this.player.interval = setInterval(this.update, 200);
}
};
VideoPlayer.prototype.onPause = function() {
Logger.log('pause_video', {
id: this.currentTime,
code: this.player.getVideoEmbedCode()
});
if (window.player === this.player) {
window.player = null;
}
clearInterval(this.player.interval);
return this.player.interval = null;
};
VideoPlayer.prototype.onSeek = function(event, time) {
this.player.seekTo(time, true);
if (this.isPlaying()) {
clearInterval(this.player.interval);
return this.player.interval = setInterval(this.update, 200);
} else {
this.currentTime = time;
return $(this).trigger('updatePlayTime', time);
}
};
VideoPlayer.prototype.onSpeedChange = function(event, newSpeed) {
this.currentTime = Time.convert(this.currentTime, parseFloat(this.currentSpeed()), newSpeed);
this.video.setSpeed(parseFloat(newSpeed).toFixed(2).replace(/\.00$/, '.0'));
if (this.isPlaying()) {
this.player.loadVideoById(this.video.youtubeId(), this.currentTime);
} else {
this.player.cueVideoById(this.video.youtubeId(), this.currentTime);
}
return $(this).trigger('updatePlayTime', this.currentTime);
};
VideoPlayer.prototype.update = function() {
if (this.currentTime = this.player.getCurrentTime()) {
return $(this).trigger('updatePlayTime', this.currentTime);
}
};
VideoPlayer.prototype.onUpdatePlayTime = function(event, time) {
var progress;
progress = Time.format(time) + ' / ' + Time.format(this.duration());
return this.$(".vidtime").html(progress);
};
VideoPlayer.prototype.toggleFullScreen = function(event) {
event.preventDefault();
if (this.element.hasClass('fullscreen')) {
this.$('.exit').remove();
this.$('.add-fullscreen').attr('title', 'Fill browser');
this.element.removeClass('fullscreen');
} else {
this.element.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen');
this.$('.add-fullscreen').attr('title', 'Exit fill browser');
this.$('.exit').click(this.toggleFullScreen);
}
return $(this).trigger('resize');
};
VideoPlayer.prototype.play = function() {
if (this.player.playVideo) {
return this.player.playVideo();
}
};
VideoPlayer.prototype.isPlaying = function() {
return this.player.getPlayerState() === YT.PlayerState.PLAYING;
};
VideoPlayer.prototype.pause = function() {
return this.player.pauseVideo();
};
VideoPlayer.prototype.duration = function() {
return this.video.getDuration();
};
VideoPlayer.prototype.currentSpeed = function() {
return this.video.speed;
};
return VideoPlayer;
})();
}).call(this);
static/coffee/src/modules/video/video_progress_slider.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoProgressSlider = (function() {
function VideoProgressSlider(player) {
this.player = player;
this.onStop = __bind(this.onStop, this);
this.onChange = __bind(this.onChange, this);
this.onSlide = __bind(this.onSlide, this);
this.onUpdatePlayTime = __bind(this.onUpdatePlayTime, this);
this.onReady = __bind(this.onReady, this);
this.buildSlider();
this.buildHandle();
$(this.player).bind('updatePlayTime', this.onUpdatePlayTime);
$(this.player).bind('ready', this.onReady);
}
VideoProgressSlider.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoProgressSlider.prototype.buildSlider = function() {
return this.slider = this.$('.slider').slider({
range: 'min',
change: this.onChange,
slide: this.onSlide,
stop: this.onStop
});
};
VideoProgressSlider.prototype.buildHandle = function() {
this.handle = this.$('.ui-slider-handle');
return this.handle.qtip({
content: "" + (Time.format(this.slider.slider('value'))),
position: {
my: 'bottom center',
at: 'top center',
container: this.handle
},
hide: {
delay: 700
},
style: {
classes: 'ui-tooltip-slider',
widget: true
}
});
};
VideoProgressSlider.prototype.onReady = function() {
return this.slider.slider('option', 'max', this.player.duration());
};
VideoProgressSlider.prototype.onUpdatePlayTime = function(event, currentTime) {
if (!this.frozen) {
this.slider.slider('option', 'max', this.player.duration());
return this.slider.slider('value', currentTime);
}
};
VideoProgressSlider.prototype.onSlide = function(event, ui) {
this.frozen = true;
this.updateTooltip(ui.value);
return $(this.player).trigger('seek', ui.value);
};
VideoProgressSlider.prototype.onChange = function(event, ui) {
return this.updateTooltip(ui.value);
};
VideoProgressSlider.prototype.onStop = function(event, ui) {
var _this = this;
this.frozen = true;
$(this.player).trigger('seek', ui.value);
return setTimeout((function() {
return _this.frozen = false;
}), 200);
};
VideoProgressSlider.prototype.updateTooltip = function(value) {
return this.handle.qtip('option', 'content.text', "" + (Time.format(value)));
};
return VideoProgressSlider;
})();
}).call(this);
static/coffee/src/modules/video/video_speed_control.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoSpeedControl = (function() {
function VideoSpeedControl(player, speeds) {
this.player = player;
this.speeds = speeds;
this.onSpeedChange = __bind(this.onSpeedChange, this);
this.changeVideoSpeed = __bind(this.changeVideoSpeed, this);
this.render();
this.bind();
}
VideoSpeedControl.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoSpeedControl.prototype.bind = function() {
$(this.player).bind('speedChange', this.onSpeedChange);
this.$('.video_speeds a').click(this.changeVideoSpeed);
if (onTouchBasedDevice()) {
return this.$('.speeds').click(function() {
return $(this).toggleClass('open');
});
} else {
this.$('.speeds').mouseenter(function() {
return $(this).addClass('open');
});
this.$('.speeds').mouseleave(function() {
return $(this).removeClass('open');
});
return this.$('.speeds').click(function(event) {
event.preventDefault();
return $(this).removeClass('open');
});
}
};
VideoSpeedControl.prototype.render = function() {
var _this = this;
this.$('.secondary-controls').prepend("<div class=\"speeds\">\n <a href=\"#\">\n <h3>Speed</h3>\n <p class=\"active\"></p>\n </a>\n <ol class=\"video_speeds\"></ol>\n</div>");
$.each(this.speeds, function(index, speed) {
var link;
link = $('<a>').attr({
href: "#"
}).html("" + speed + "x");
return _this.$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link));
});
return this.setSpeed(this.player.currentSpeed());
};
VideoSpeedControl.prototype.changeVideoSpeed = function(event) {
event.preventDefault();
if (!$(event.target).parent().hasClass('active')) {
return $(this.player).trigger('speedChange', $(event.target).parent().data('speed'));
}
};
VideoSpeedControl.prototype.onSpeedChange = function(event, speed) {
return this.setSpeed(parseFloat(speed).toFixed(2).replace(/\.00$/, '.0'));
};
VideoSpeedControl.prototype.setSpeed = function(speed) {
this.$('.video_speeds li').removeClass('active');
this.$(".video_speeds li[data-speed='" + speed + "']").addClass('active');
return this.$('.speeds p.active').html("" + speed + "x");
};
return VideoSpeedControl;
})();
}).call(this);
static/coffee/src/navigation.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Navigation = (function() {
function Navigation() {
var active;
if ($('#accordion').length) {
active = $('#accordion ul:has(li.active)').index('#accordion ul');
$('#accordion').bind('accordionchange', this.log).accordion({
active: active >= 0 ? active : 1,
header: 'h3',
autoHeight: false
});
$('#open_close_accordion a').click(this.toggle);
$('#accordion').show();
}
}
Navigation.prototype.log = function(event, ui) {
return log_event('accordion', {
newheader: ui.newHeader.text(),
oldheader: ui.oldHeader.text()
});
};
Navigation.prototype.toggle = function() {
return $('.course-wrapper').toggleClass('closed');
};
return Navigation;
})();
}).call(this);
static/coffee/src/time.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Time = (function() {
function Time() {}
Time.format = function(time) {
var hours, minutes, pad, seconds;
pad = function(number) {
if (number < 10) {
return "0" + number;
} else {
return number;
}
};
seconds = Math.floor(time);
minutes = Math.floor(seconds / 60);
hours = Math.floor(minutes / 60);
seconds = seconds % 60;
minutes = minutes % 60;
if (hours) {
return "" + hours + ":" + (pad(minutes)) + ":" + (pad(seconds % 60));
} else {
return "" + minutes + ":" + (pad(seconds % 60));
}
};
Time.convert = function(time, oldSpeed, newSpeed) {
return (time * oldSpeed / newSpeed).toFixed(3);
};
return Time;
})();
}).call(this);
static/sass/application.css 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
static/sass/marketing-ie.css 0 → 100755
body {
margin: 0;
padding: 0; }
.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
margin: 0;
overflow: hidden; }
div#enroll form {
display: none; }
static/sass/marketing.css 0 → 100755
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
body {
line-height: 1; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
nav ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none; }
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold; }
del {
text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0; }
input, select {
vertical-align: middle; }
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
@font-face {
font-family: 'Open Sans';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: 'Open Sans';
src: url("../fonts/OpenSans-Italic-webfont.eot");
src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg");
font-weight: 400;
font-style: italic; }
@font-face {
font-family: 'Open Sans';
src: url("../fonts/OpenSans-Bold-webfont.eot");
src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
font-weight: 700;
font-style: normal; }
@font-face {
font-family: 'Open Sans';
src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic") format("svg");
font-weight: 700;
font-style: italic; }
@font-face {
font-family: 'Open Sans';
src: url("../fonts/OpenSans-ExtraBold-webfont.eot");
src: url("../fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold") format("svg");
font-weight: 800;
font-style: normal; }
@font-face {
font-family: 'Open Sans';
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot");
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic") format("svg");
font-weight: 800;
font-style: italic; }
.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, footer, section.index-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
max-width: 1400px;
padding: 25.888px;
width: 100%; }
.subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
padding-left: 34.171%; }
@media screen and (max-width: 940px) {
.subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
padding-left: 0; } }
.subpage > div p, section.copyright > div p, section.tos > div p, section.privacy-policy > div p, section.honor-code > div p {
margin-bottom: 25.888px;
line-height: 25.888px; }
.subpage > div h1, section.copyright > div h1, section.tos > div h1, section.privacy-policy > div h1, section.honor-code > div h1 {
margin-bottom: 12.944px; }
.subpage > div h2, section.copyright > div h2, section.tos > div h2, section.privacy-policy > div h2, section.honor-code > div h2 {
font: 18px "Open Sans", Helvetica, Arial, sans-serif;
color: #000;
margin-bottom: 12.944px; }
.subpage > div ul, section.copyright > div ul, section.tos > div ul, section.privacy-policy > div ul, section.honor-code > div ul {
list-style: disc outside none; }
.subpage > div ul li, section.copyright > div ul li, section.tos > div ul li, section.privacy-policy > div ul li, section.honor-code > div ul li {
list-style: disc outside none;
line-height: 25.888px; }
.subpage > div dl, section.copyright > div dl, section.tos > div dl, section.privacy-policy > div dl, section.honor-code > div dl {
margin-bottom: 25.888px; }
.subpage > div dl dd, section.copyright > div dl dd, section.tos > div dl dd, section.privacy-policy > div dl dd, section.honor-code > div dl dd {
margin-bottom: 12.944px; }
.clearfix:after, .subpage:after, section.copyright:after, section.tos:after, section.privacy-policy:after, section.honor-code:after, header.announcement div section:after, footer:after, section.index-content:after, section.index-content section:after, section.index-content section.about section:after, div.leanModal_box#enroll ol:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.button, header.announcement div section.course section a, section.index-content section.course a, section.index-content section.staff a, section.index-content section.about-course section.cta a.enroll {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
background-color: #993333;
border: 1px solid #732626;
color: #fff;
margin: 25.888px 0 12.944px;
padding: 6.472px 12.944px;
text-decoration: none;
font-style: normal;
-webkit-box-shadow: inset 0 1px 0 #b83d3d;
-moz-box-shadow: inset 0 1px 0 #b83d3d;
box-shadow: inset 0 1px 0 #b83d3d;
-webkit-font-smoothing: antialiased; }
.button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
background-color: #732626;
border-color: #4d1919; }
.button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-style: italic; }
p.ie-warning {
display: block !important;
line-height: 1.3em;
background: yellow;
margin-bottom: 25.888px;
padding: 25.888px; }
body {
background-color: #fff;
color: #444;
font: 16px Georgia, serif; }
body :focus {
outline-color: #ccc; }
body h1 {
font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
body li {
margin-bottom: 25.888px; }
body em {
font-style: italic; }
body a {
color: #993333;
font-style: italic;
text-decoration: none; }
body a:hover, body a:focus {
color: #732626; }
body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
-webkit-box-shadow: 0 -1px 0 white;
-moz-box-shadow: 0 -1px 0 white;
box-shadow: 0 -1px 0 white;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, white));
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -ms-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(top, #eeeeee, white);
border: 1px solid #999;
font: 16px Georgia, serif;
padding: 4px;
width: 100%; }
body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
border-color: #993333; }
header.announcement {
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #333;
border-bottom: 1px solid #000;
color: #fff;
-webkit-font-smoothing: antialiased; }
header.announcement.home {
background: #e3e3e3 url("../images/marketing/shot-5-medium.jpg"); }
@media screen and (min-width: 1200px) {
header.announcement.home {
background: #e3e3e3 url("../images/marketing/shot-5-large.jpg"); } }
header.announcement.home div {
padding: 258.88px 25.888px 77.664px; }
@media screen and (max-width:780px) {
header.announcement.home div {
padding: 64.72px 25.888px 51.776px; } }
header.announcement.home div nav h1 {
margin-right: 0; }
header.announcement.home div nav a.login {
display: none; }
header.announcement.course {
background: #e3e3e3 url("../images/marketing/course-bg-small.jpg"); }
@media screen and (min-width: 1200px) {
header.announcement.course {
background: #e3e3e3 url("../images/marketing/course-bg-large.jpg"); } }
@media screen and (max-width: 1199px) and (min-width: 700px) {
header.announcement.course {
background: #e3e3e3 url("../images/marketing/course-bg-medium.jpg"); } }
header.announcement.course div {
padding: 103.552px 25.888px 51.776px; }
@media screen and (max-width:780px) {
header.announcement.course div {
padding: 64.72px 25.888px 51.776px; } }
header.announcement div {
position: relative; }
header.announcement div nav {
position: absolute;
top: 0;
right: 25.888px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
background: #333;
background: rgba(0, 0, 0, 0.7);
padding: 12.944px 25.888px; }
header.announcement div nav h1 {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 12.944px; }
header.announcement div nav h1 a {
font: italic 800 18px "Open Sans", Helvetica, Arial, sans-serif;
color: #fff;
text-decoration: none; }
header.announcement div nav h1 a:hover, header.announcement div nav h1 a:focus {
color: #999; }
header.announcement div nav a.login {
text-decoration: none;
color: #fff;
font-size: 12px;
font-style: normal;
font-family: "Open Sans", Helvetica, Arial, sans-serif; }
header.announcement div nav a.login:hover, header.announcement div nav a.login:focus {
color: #999; }
header.announcement div section {
background: #993333;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-left: 34.171%;
padding: 25.888px 38.832px; }
@media screen and (max-width: 780px) {
header.announcement div section {
margin-left: 0; } }
header.announcement div section h1 {
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
line-height: 1.2em;
margin: 0 25.888px 0 0; }
header.announcement div section h2 {
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
line-height: 1.2em; }
header.announcement div section.course section {
float: left;
margin-left: 0;
margin-right: 3.817%;
padding: 0;
width: 48.092%; }
@media screen and (max-width: 780px) {
header.announcement div section.course section {
float: none;
width: 100%;
margin-right: 0; } }
header.announcement div section.course section a {
background-color: #4d1919;
border-color: #260d0d;
-webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-moz-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
display: block;
padding: 12.944px 25.888px;
text-align: center; }
header.announcement div section.course section a:hover {
background-color: #732626;
border-color: #4d1919; }
header.announcement div section.course p {
width: 48.092%;
line-height: 25.888px;
float: left; }
@media screen and (max-width: 780px) {
header.announcement div section.course p {
float: none;
width: 100%; } }
footer {
padding-top: 0; }
footer div.footer-wrapper {
border-top: 1px solid #e5e5e5;
padding: 25.888px 0;
background: url("../images/marketing/mit-logo.png") right center no-repeat; }
@media screen and (max-width: 780px) {
footer div.footer-wrapper {
background-position: left bottom;
padding-bottom: 77.664px; } }
footer div.footer-wrapper a {
color: #888;
text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
color: #666; }
footer div.footer-wrapper p {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 25.888px; }
footer div.footer-wrapper ul {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
@media screen and (max-width: 780px) {
footer div.footer-wrapper ul {
margin-top: 25.888px; } }
footer div.footer-wrapper ul li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-bottom: 0; }
footer div.footer-wrapper ul li:after {
content: ' |';
display: inline;
color: #ccc; }
footer div.footer-wrapper ul li:last-child:after {
content: none; }
footer div.footer-wrapper ul.social {
float: right;
margin-right: 60px;
position: relative;
top: -5px; }
@media screen and (max-width: 780px) {
footer div.footer-wrapper ul.social {
float: none; } }
footer div.footer-wrapper ul.social li {
float: left;
margin-right: 12.944px; }
footer div.footer-wrapper ul.social li:after {
content: none;
display: none; }
footer div.footer-wrapper ul.social li a {
display: block;
height: 29px;
width: 28px;
text-indent: -9999px; }
footer div.footer-wrapper ul.social li a:hover {
opacity: .8; }
footer div.footer-wrapper ul.social li.twitter a {
background: url("../images/marketing/twitter.png") 0 0 no-repeat; }
footer div.footer-wrapper ul.social li.facebook a {
background: url("../images/marketing/facebook.png") 0 0 no-repeat; }
footer div.footer-wrapper ul.social li.linkedin a {
background: url("../images/marketing/linkedin.png") 0 0 no-repeat; }
section.index-content section {
float: left; }
@media screen and (max-width: 780px) {
section.index-content section {
float: none;
width: auto;
margin-right: 0; } }
section.index-content section h1 {
font-size: 800 24px "Open Sans";
margin-bottom: 25.888px; }
section.index-content section p {
line-height: 25.888px;
margin-bottom: 25.888px; }
section.index-content section ul {
margin: 0; }
section.index-content section.about {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #e5e5e5;
margin-right: 2.513%;
padding-right: 1.256%;
width: 65.829%; }
@media screen and (max-width: 780px) {
section.index-content section.about {
width: 100%;
border-right: 0;
margin-right: 0;
padding-right: 0; } }
section.index-content section.about section {
margin-bottom: 25.888px; }
section.index-content section.about section p {
width: 48.092%;
float: left; }
@media screen and (max-width: 780px) {
section.index-content section.about section p {
float: none;
width: auto; } }
section.index-content section.about section p:nth-child(odd) {
margin-right: 3.817%; }
@media screen and (max-width: 780px) {
section.index-content section.about section p:nth-child(odd) {
margin-right: 0; } }
section.index-content section.about section.intro section {
margin-bottom: 0; }
section.index-content section.about section.intro section.intro-text {
margin-right: 3.817%;
width: 48.092%; }
@media screen and (max-width: 780px) {
section.index-content section.about section.intro section.intro-text {
margin-right: 0;
width: auto; } }
section.index-content section.about section.intro section.intro-text p {
margin-right: 0;
width: auto;
float: none; }
section.index-content section.about section.intro section.intro-video {
width: 48.092%; }
@media screen and (max-width: 780px) {
section.index-content section.about section.intro section.intro-video {
width: auto; } }
section.index-content section.about section.intro section.intro-video a {
display: block;
width: 100%; }
section.index-content section.about section.intro section.intro-video a img {
width: 100%; }
section.index-content section.about section.intro section.intro-video a span {
display: none; }
section.index-content section.about section.features {
border-top: 1px solid #E5E5E5;
padding-top: 25.888px;
margin-bottom: 0; }
section.index-content section.about section.features h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #888;
margin-bottom: 25.888px;
font-weight: normal;
font-size: 14px; }
section.index-content section.about section.features h2 span {
text-transform: none; }
section.index-content section.about section.features p {
width: auto;
clear: both; }
section.index-content section.about section.features p strong {
font-family: "Open sans";
font-weight: 800; }
section.index-content section.about section.features p a {
color: #993333;
text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
color: #602020; }
section.index-content section.about section.features ul {
margin-bottom: 0; }
section.index-content section.about section.features ul li {
line-height: 25.888px;
width: 48.092%;
float: left;
margin-bottom: 12.944px; }
@media screen and (max-width: 780px) {
section.index-content section.about section.features ul li {
width: auto;
float: none; } }
section.index-content section.about section.features ul li:nth-child(odd) {
margin-right: 3.817%; }
@media screen and (max-width: 780px) {
section.index-content section.about section.features ul li:nth-child(odd) {
margin-right: 0; } }
section.index-content section.course, section.index-content section.staff {
width: 31.658%; }
@media screen and (max-width: 780px) {
section.index-content section.course, section.index-content section.staff {
width: auto; } }
section.index-content section.course h1, section.index-content section.staff h1 {
color: #888;
font: normal 16px Georgia, serif;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 25.888px;
text-transform: uppercase; }
section.index-content section.course h2, section.index-content section.staff h2 {
font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
section.index-content section.course h3, section.index-content section.staff h3 {
font: 400 18px "Open Sans", Helvetica, Arial, sans-serif; }
section.index-content section.course a span.arrow, section.index-content section.staff a span.arrow {
color: rgba(255, 255, 255, 0.6);
font-style: normal;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
padding-left: 10px; }
section.index-content section.course ul, section.index-content section.staff ul {
list-style: none; }
section.index-content section.course ul li img, section.index-content section.staff ul li img {
float: left;
margin-right: 12.944px; }
section.index-content section.course h2 {
padding-top: 129.44px;
background: url("../images/marketing/circuits-bg.jpg") 0 0 no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-ms-background-size: contain;
-o-background-size: contain;
background-size: contain; }
@media screen and (max-width: 998px) and (min-width: 781px) {
section.index-content section.course h2 {
background: url("../images/marketing/circuits-medium-bg.jpg") 0 0 no-repeat; } }
@media screen and (max-width: 780px) {
section.index-content section.course h2 {
padding-top: 129.44px;
background: url("../images/marketing/circuits-bg.jpg") 0 0 no-repeat; } }
@media screen and (min-width: 500px) and (max-width: 781px) {
section.index-content section.course h2 {
padding-top: 207.104px; } }
section.index-content section.course div.announcement p.announcement-button a {
margin-top: 0; }
section.index-content section.course div.announcement img {
max-width: 100%;
margin-bottom: 25.888px; }
section.index-content section.about-course {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #e5e5e5;
margin-right: 2.513%;
padding-right: 1.256%;
width: 65.829%; }
@media screen and (max-width: 780px) {
section.index-content section.about-course {
width: auto;
border-right: 0;
margin-right: 0;
padding-right: 0; } }
section.index-content section.about-course section {
width: 48.092%; }
@media screen and (max-width: 780px) {
section.index-content section.about-course section {
width: auto; } }
section.index-content section.about-course section.about-info {
margin-right: 3.817%; }
@media screen and (max-width: 780px) {
section.index-content section.about-course section.about-info {
margin-right: 0; } }
section.index-content section.about-course section.requirements {
clear: both;
width: 100%;
border-top: 1px solid #E5E5E5;
padding-top: 25.888px;
margin-bottom: 0; }
section.index-content section.about-course section.requirements p {
float: left;
width: 48.092%;
margin-right: 3.817%; }
@media screen and (max-width: 780px) {
section.index-content section.about-course section.requirements p {
margin-right: 0;
float: none;
width: auto; } }
section.index-content section.about-course section.requirements p:nth-child(odd) {
margin-right: 0; }
section.index-content section.about-course section.cta {
width: 100%;
text-align: center; }
section.index-content section.about-course section.cta a.enroll {
padding: 12.944px 51.776px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-align: center;
font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; }
section.index-content section.staff h1 {
margin-top: 25.888px; }
#lean_overlay {
background: #000;
display: none;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 100; }
div.leanModal_box {
background: #fff;
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 6px black;
-moz-box-shadow: 0 0 6px black;
box-shadow: 0 0 6px black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: none;
padding: 51.776px;
text-align: left; }
div.leanModal_box a.modal_close {
color: #aaa;
display: block;
font-style: normal;
height: 14px;
position: absolute;
right: 12px;
top: 12px;
width: 14px;
z-index: 2; }
div.leanModal_box a.modal_close:hover {
color: #993333;
text-decoration: none; }
div.leanModal_box h1 {
border-bottom: 1px solid #eee;
font-size: 24px;
margin-bottom: 25.888px;
margin-top: 0;
padding-bottom: 25.888px;
text-align: left; }
div.leanModal_box#enroll {
max-width: 600px; }
div.leanModal_box#enroll ol {
padding-top: 25.888px; }
div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
float: none;
width: auto; }
div.leanModal_box#enroll ol li div.tip {
display: none; }
div.leanModal_box#enroll ol li:hover div.tip {
background: #333;
color: #fff;
display: block;
font-size: 16px;
line-height: 25.888px;
margin: 0 0 0 -10px;
padding: 10px;
position: absolute;
-webkit-font-smoothing: antialiased;
width: 500px; }
div.leanModal_box form {
text-align: left; }
div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error {
background-color: #333333;
border: black;
color: #fff;
font-family: "Open sans";
font-weight: bold;
letter-spacing: 1px;
margin: -25.888px -25.888px 25.888px;
padding: 12.944px;
text-shadow: 0 1px 0 #1a1a1a;
-webkit-font-smoothing: antialiased; }
div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty {
padding: 0; }
div.leanModal_box form ol {
list-style: none;
margin-bottom: 25.888px; }
div.leanModal_box form ol li {
margin-bottom: 12.944px; }
div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
border-top: 1px solid #eee;
clear: both;
float: none;
padding-top: 25.888px;
width: auto; }
div.leanModal_box form ol li.honor-code {
float: none;
width: auto; }
div.leanModal_box form ol li label {
display: block;
font-weight: bold; }
div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%; }
div.leanModal_box form ol li input[type="checkbox"] {
margin-right: 10px; }
div.leanModal_box form ol li ul {
list-style: disc outside none;
margin: 12.944px 0 25.888px 25.888px; }
div.leanModal_box form ol li ul li {
color: #666;
float: none;
font-size: 14px;
list-style: disc outside none;
margin-bottom: 12.944px; }
div.leanModal_box form input[type="button"], div.leanModal_box form input[type="submit"] {
border: 1px solid #691b1b;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #bc5c5c;
-moz-box-shadow: inset 0 1px 0 0 #bc5c5c;
box-shadow: inset 0 1px 0 0 #bc5c5c;
color: white;
display: inline;
font-size: 11px;
font-weight: bold;
background-color: #993333;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #993333), color-stop(100%, #761e1e));
background-image: -webkit-linear-gradient(top, #993333, #761e1e);
background-image: -moz-linear-gradient(top, #993333, #761e1e);
background-image: -ms-linear-gradient(top, #993333, #761e1e);
background-image: -o-linear-gradient(top, #993333, #761e1e);
background-image: linear-gradient(top, #993333, #761e1e);
padding: 6px 18px 7px;
text-shadow: 0 1px 0 #5d1414;
-webkit-background-clip: padding-box;
font-size: 18px;
padding: 12.944px; }
div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
-webkit-box-shadow: inset 0 1px 0 0 #a44141;
-moz-box-shadow: inset 0 1px 0 0 #a44141;
box-shadow: inset 0 1px 0 0 #a44141;
cursor: pointer;
background-color: #823030;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #823030), color-stop(100%, #691c1c));
background-image: -webkit-linear-gradient(top, #823030, #691c1c);
background-image: -moz-linear-gradient(top, #823030, #691c1c);
background-image: -ms-linear-gradient(top, #823030, #691c1c);
background-image: -o-linear-gradient(top, #823030, #691c1c);
background-image: linear-gradient(top, #823030, #691c1c); }
div.leanModal_box form input[type="button"]:active, div.leanModal_box form input[type="submit"]:active {
border: 1px solid #691b1b;
-webkit-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee; }
div#login {
min-width: 400px; }
div#login header {
border-bottom: 1px solid #ddd;
margin-bottom: 25.888px;
padding-bottom: 25.888px; }
div#login header h1 {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 6.472px; }
div#login ol li {
float: none;
width: auto; }
div.lost-password {
margin-top: 25.888px;
text-align: left; }
div.lost-password a {
color: #999; }
div.lost-password a:hover {
color: #444; }
div#pwd_reset p {
margin-bottom: 25.888px; }
div#pwd_reset input[type="email"] {
margin-bottom: 25.888px; }
div#apply_name_change,
div#change_email,
div#unenroll,
div#deactivate-account {
max-width: 700px; }
div#apply_name_change ul,
div#change_email ul,
div#unenroll ul,
div#deactivate-account ul {
list-style: none; }
div#apply_name_change ul li,
div#change_email ul li,
div#unenroll ul li,
div#deactivate-account ul li {
margin-bottom: 12.944px; }
div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"],
div#change_email ul li textarea,
div#change_email ul li input[type="email"],
div#change_email ul li input[type="number"],
div#change_email ul li input[type="password"],
div#change_email ul li input[type="search"],
div#change_email ul li input[type="tel"],
div#change_email ul li input[type="text"],
div#change_email ul li input[type="url"],
div#change_email ul li input[type="color"],
div#change_email ul li input[type="date"],
div#change_email ul li input[type="datetime"],
div#change_email ul li input[type="datetime-local"],
div#change_email ul li input[type="month"],
div#change_email ul li input[type="time"],
div#change_email ul li input[type="week"],
div#unenroll ul li textarea,
div#unenroll ul li input[type="email"],
div#unenroll ul li input[type="number"],
div#unenroll ul li input[type="password"],
div#unenroll ul li input[type="search"],
div#unenroll ul li input[type="tel"],
div#unenroll ul li input[type="text"],
div#unenroll ul li input[type="url"],
div#unenroll ul li input[type="color"],
div#unenroll ul li input[type="date"],
div#unenroll ul li input[type="datetime"],
div#unenroll ul li input[type="datetime-local"],
div#unenroll ul li input[type="month"],
div#unenroll ul li input[type="time"],
div#unenroll ul li input[type="week"],
div#deactivate-account ul li textarea,
div#deactivate-account ul li input[type="email"],
div#deactivate-account ul li input[type="number"],
div#deactivate-account ul li input[type="password"],
div#deactivate-account ul li input[type="search"],
div#deactivate-account ul li input[type="tel"],
div#deactivate-account ul li input[type="text"],
div#deactivate-account ul li input[type="url"],
div#deactivate-account ul li input[type="color"],
div#deactivate-account ul li input[type="date"],
div#deactivate-account ul li input[type="datetime"],
div#deactivate-account ul li input[type="datetime-local"],
div#deactivate-account ul li input[type="month"],
div#deactivate-account ul li input[type="time"],
div#deactivate-account ul li input[type="week"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%; }
div#apply_name_change ul li textarea,
div#change_email ul li textarea,
div#unenroll ul li textarea,
div#deactivate-account ul li textarea {
height: 60px; }
div#apply_name_change ul li input[type="submit"],
div#change_email ul li input[type="submit"],
div#unenroll ul li input[type="submit"],
div#deactivate-account ul li input[type="submit"] {
white-space: normal; }
div#feedback_div form ol li {
float: none;
width: 100%; }
div#feedback_div form ol li textarea#feedback_message {
height: 100px; }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment