Skip to content

E
edx-platform
Commit 4d7cef8d by Galen Frechette
Options

redesigns course item on home page and find courses page, refactors its… 

redesigns course item on home page and find courses page, refactors its implimentation and makes vrious other design improvements
parent 27e6c215
Showing with 2006 additions and 1084 deletions
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png

21.9 KB | W: | H:

lms/static/images/harvard_bw.png

21.7 KB | W: | H:

lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png

1.89 KB | W: | H:

lms/static/images/mit_bw.png

1.81 KB | W: | H:

lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/sass/_base.scss
......@@ -21,8 +21,9 @@ html, body {
h1, h2, h3, h4, h5, h6 {
color: $base-font-color;
font: normal 1.6rem/2rem $serif;
font: normal 1.4rem/2rem $serif;
margin: 0px;
-webkit-font-smoothing: antialiased;
}
p {
......@@ -39,9 +40,10 @@ a:link, a:visited {
color: $blue;
font: normal 1rem/1.8rem $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: lighten($blue, 10%);
color: $base-font-color;
}
}
......
lms/static/sass/_base_extends.scss
......@@ -6,6 +6,14 @@
width: 100%;
}
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
......
lms/static/sass/_dashboard.scss
......@@ -107,7 +107,7 @@
}
}
.courses {
.my-courses {
@include box-sizing(border-box);
margin: 0px;
padding-left: 270px;
......@@ -164,8 +164,287 @@
}
}
.course {
.my-course {
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
@include border-radius(3px);
@include box-sizing(border-box);
float: left;
font-size: 0em;
margin-right: flex-gutter();
min-height: 120px;
margin-bottom: 25px;
overflow: hidden;
position: relative;
width: flex-grid(12);
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
padding: 10px;
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 {
left: 130px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
width: 100%;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.2rem/1.6rem $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));
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
.meta {
opacity: 0.9;
}
}
}
}
}
lms/static/sass/_find_courses.scss
.find-courses {
header {
header.search-intro {
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));
......
lms/static/sass/_index.scss
......@@ -9,7 +9,7 @@
width: flex-grid(12);
.video-wrapper {
left: 0px;
right: 0px;
position: absolute;
top: 0px;
......@@ -36,15 +36,15 @@
.welcome {
@include box-sizing(border-box);
float: right;
float: left;
font-size: 0em;
width: flex-grid(12);
padding-left: 600px;
padding-right: 600px;
padding-top: 20px;
h1 {
color: $lighter-base-font-color;
font: normal 2.4rem/3rem $sans-serif;
font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
......@@ -99,35 +99,85 @@
}
}
.university-partners {
background: rgb(245,245,245);
//@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)));
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
margin-bottom: 60px;
@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
rgba(245,245,245, 1) 50%,
rgba(245,245,245, 0) 100%));
border-top: 1px solid rgb(210,210,210);
border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 0px;
overflow: hidden;
padding: 10px 0px;
position: relative;
width: flex-grid(12);
&::before {
@extend .faded-hr-divider-medium;
content: "";
display: block;
}
&::after {
@extend .faded-hr-divider-medium;
content: "";
display: block;
}
.partners {
font-size: 0em;
margin: 0 auto;
width: 420px;
padding: 15px 0px;
text-align: center;
a {
li.partner {
@include inline-block;
margin-right: 40px;
opacity: 0.7;
margin-right: 20px;
padding-right: 20px;
position: relative;
vertical-align: middle;
&::before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 100px;
right: 0px;
position: absolute;
top: 0px;
width: 1px;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 100px;
right: 1px;
position: absolute;
top: 0px;
width: 1px;
}
&.mit {
padding: 0 35px 0 20px;
}
&:last-child {
margin-right: 0px;
padding-right: 0px;
&::before {
display: none;
}
&:hover {
opacity: 0.9;
&::after {
display: none;
}
}
}
a {
opacity: 0.7;
@include transition(all, 0.25s, ease-in-out);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
......@@ -137,71 +187,93 @@
left: 50%;
margin-left: -100px;
margin-top: -100px;
opacity: 0;
width: 200px;
position: absolute;
@include transition(all, 0.25s, ease-in-out);
top: 50%;
z-index: 1;
}
}
}
.name {
@include inline-block;
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
left: 0px;
position: absolute;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
position: relative;
z-index: 2;
bottom: -60px;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
width: 100%;
z-index: 2;
}
img {
@include inline-block;
max-width: 100px;
vertical-align: middle;
max-width: 140px;
position: relative;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
z-index: 2;
}
&:hover {
opacity: 0.9;
&::before {
opacity: 1;
}
.name {
bottom: 30px;
}
img {
top: -120px;
}
}
}
}
}
.highlighted-courses {
@include border-radius(4px);
border-bottom: 1px solid rgb(210,210,210);
@include box-sizing(border-box);
@include clearfix;
margin-bottom: 40px;
margin-bottom: 60px;
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);
> h2 {
background: rgb(245,245,245);
border: 1px solid rgb(220,220,220);
border-top: none;
@include border-bottom-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
color: $lighter-base-font-color;
letter-spacing: 1px;
padding: 15px 10px;
text-align: center;
text-transform: uppercase;
}
&:nth-child(odd) {
margin-right: flex-gutter();
}
.courses {
background: rgb(245,245,245);
@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%,
rgba(255,255,255, 0.5) 20%,
rgba(255,255,255, 0) 50%,
rgba(255,255,255, 0.5) 80%,
rgba(255,255,255, 1) 100%));
}
}
.more-info {
margin-bottom: 60px;
width: flex-grid(12);
h2 {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif;
letter-spacing: 1px;
margin-bottom: 30px;
padding-bottom: 10px;
margin-bottom: 20px;
}
.news {
......@@ -211,9 +283,9 @@
> article {
background: rgb(240,240,240);
@include inline-block;
height: 300px;
height: 150px;
margin-right: flex-gutter();
width: flex-grid(4);
width: flex-grid(3);
&:last-child {
margin-right: 0px;
......
lms/static/sass/_shared_footer.scss
footer {
background: rgb(240,240,240);
padding: 20px 0px 0px;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 40px;
width: flex-grid(12);
&.fixed-bottom {
position: absolute;
bottom: 0px;
max-width: 100%;
position: absolute;
}
nav {
border-top: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
@include clearfix;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
padding: 20px 10px 0;
width: flex-grid(12);
.copyright {
float: left;
padding-top: 2px;
a.logo {
@include box-sizing(border-box);
display: block;
@include inline-block;
float: left;
height: 100%;
margin: 3px 15px 0px 0px;
}
ol {
float: left;
font-size: 0em;
margin-top: 6px;
&.social {
float: right;
li {
border: none;
padding: 0px 5px;
margin-right: 14px;
margin-top: 1px;
padding-right: 15px;
position: relative;
vertical-align: middle;
a:hover {
opacity: 0.7;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -2px;
width: 1px;
}
img {
position: relative;
z-index: 2;
}
}
li {
border-left: 1px solid rgb(200,200,200);
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
@include inline-block;
list-style: none;
padding: 0px 15px;
margin: 0 auto;
padding-top: 4px;
text-align: center;
vertical-align: middle;
a:link, a:visited {
a {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
padding: 5px 0px;
}
margin-left: 5px;
text-decoration: underline;
}
}
}
.copyright {
height: 50px;
margin-top: 80px;
width: 100%;
ol {
float: right;
font-size: 0em;
hr {
@extend .faded-hr-divider-light;
border: none;
margin: 0px;
li {
//border-right: 1px solid rgb(200,200,200);
@include inline-block;
list-style: none;
padding: 0px 15px;
position: relative;
z-index: 2;
vertical-align: middle;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -1px;
}
top: -5px;
width: 1px;
}
p {
a:link, a:visited {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin: 0 auto;
padding-top: 15px;
text-align: center;
max-width: 1200px;
font: normal 1.2rem/1.6rem $serif;
padding: 6px 0px;
}
&.social {
border: none;
margin: 0 0 0 5px;
padding: 0;
&::after {
display: none;
}
a {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin-left: 5px;
padding: 0 0 0 10px;
@include transition(all, 0.1s, linear);
&:hover {
opacity: 0.7;
}
}
}
}
}
}
......
lms/static/sass/_shared_list_of_courses.scss
.courses {
@include box-sizing(border-box);
.highlighted-courses, .find-courses {
.courses {
@include clearfix;
margin: 40px 0px;
padding: 0px 10px;
width: flex-grid(12);
padding: 40px 15px 15px;
.course {
background: rgb(240,240,240);
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
float: left;
font-size: 0em;
min-height: 100px;
margin-right: flex-gutter();
margin-bottom: 25px;
padding: 10px;
width: flex-grid(6);
width: flex-grid(4);
@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;
&:nth-child(3n+3) {
margin-right: 0;
}
> 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;
.inner-wrapper {
border: 1px solid rgba(255,255,255, 1);
height: 100%;
height: 180px;
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;
header.course-preview {
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;
}
z-index: 3;
> hgroup {
margin-right: 80px;
> a {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75)));
//@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.6), rgba(0,0,0, 0.8)));
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
border-bottom: 1px solid rgba(150,150,150, 0.7);
display: block;
height: 50px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
hgroup {
left: 0px;
padding: 5px 10px;
position: absolute;
right: 60px;
top: 0px;
h2 {
font: bold 1.8rem/2.5rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
font: bold 1.2rem/1.6rem $sans-serif;
padding-top: 10px;
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;
display: none;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -130,163 +69,101 @@
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
.info-link {
border-left: 1px solid rgba(150,150,150, 0.5);
@include box-sizing(border-box);
color: $base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
font: bold 2rem/2.2rem $sans-serif;
height: 100%;
opacity: 0.6;
padding-top: 10px;
position: absolute;
right: 0px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
width: 60px;
}
&:hover {
background: rgb(255,255,255);
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
h2, p, .info-link {
color: $blue;
opacity: 1;
}
}
.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 {
.info {
height: 180px + 130px;
left: 0px;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
width: 100%;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.meta-info {
background: rgba(0,0,0, 0.6);
bottom: 130px;
border-top: 1px solid rgba(0,0,0, 0.5);
@include clearfix;
position: absolute;
@include transition(all, 0.15s, linear);
width: 100%;
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
color: rgb(255,255,255);
font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 10px;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
&.university {
float: left;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
&.dates {
float: right;
margin-top: 0px;
}
}
}
.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;
.cover-image {
height: 180px;
overflow: hidden;
width: 100%;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
img {
display: block;
min-width: 100%;
}
}
.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);
.desc {
background: rgb(255,255,255);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
height: 130px;
overflow: hidden;
padding: 10px;
width: 100%;
.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);
}
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
.cover {
opacity: 1;
.info {
top: -130px;
.shade, .arrow {
opacity: 1;
.meta-info {
opacity: 0;
}
}
h2 {
//color: $blue;
//text-decoration: underline;
}
.meta {
opacity: 0.9;
}
}
}
......
lms/static/sass/application.css
......@@ -311,8 +311,9 @@ html, body {
h1, h2, h3, h4, h5, h6 {
color: #3c3c3c;
font: normal 1.6rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0px; }
font: normal 1.4rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0px;
-webkit-font-smoothing: antialiased; }
p {
color: #3c3c3c;
......@@ -325,9 +326,29 @@ p + p {
a:link, a:visited {
color: #1d9dd9;
font: normal 1rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif;
text-decoration: none; }
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.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
a:link:hover, a:visited:hover {
color: #43b2e6; }
color: #3c3c3c; }
.container {
zoom: 1;
......@@ -340,7 +361,7 @@ a:link, a:visited {
.container:after {
clear: both; }
.faded-hr-divider, .horizontal-divider, footer .copyright hr::after, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after {
.faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
......@@ -349,7 +370,16 @@ a:link, a:visited {
height: 1px;
width: 100%; }
.faded-hr-divider-light, .horizontal-divider::after, footer .copyright hr, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr {
.faded-hr-divider-medium, .home .university-partners::before, .home .university-partners::after {
background-image: -webkit-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: -moz-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: -ms-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: -o-linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
background-image: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 50%, rgba(240, 240, 240, 0));
height: 1px;
width: 100%; }
.faded-hr-divider-light, .horizontal-divider::after, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
......@@ -358,7 +388,7 @@ a:link, a:visited {
height: 1px;
width: 100%; }
.faded-vertical-divider, .vertical-divider, header.app .divider {
.faded-vertical-divider, .vertical-divider, header.app .divider, footer nav .copyright a.logo::after, footer nav ol li::after, .home .university-partners .partners li.partner::before {
background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
......@@ -367,7 +397,7 @@ a:link, a:visited {
height: 100%;
width: 1px; }
.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after {
.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after, .home .university-partners .partners li.partner::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
......@@ -848,6 +878,8 @@ form {
border: 1px solid #d2d2d2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
......@@ -857,6 +889,8 @@ form {
box-sizing: border-box;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 35px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -881,12 +915,14 @@ form {
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-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;
display: inline;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
......@@ -896,15 +932,19 @@ form {
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;
padding: 7px 20px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 35px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -912,7 +952,7 @@ form {
*vertical-align: auto;
text-transform: uppercase;
vertical-align: top; }
form input[type="submit"]:hover:not(:disabled) {
form input[type="submit"]:hover {
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));
......@@ -921,94 +961,143 @@ form {
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%); }
form input[type="submit"]:active:not(:disabled) {
form input[type="submit"]:active {
-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; }
form input[type="submit"]:disabled {
opacity: 0.5;
cursor: not-allowed; }
footer {
background: #f0f0f0;
padding: 20px 0px 0px;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 40px;
width: 100%; }
footer.fixed-bottom {
position: absolute;
bottom: 0px; }
bottom: 0px;
max-width: 100%;
position: absolute; }
footer nav {
border-top: 1px solid #c8c8c8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
padding: 20px 10px 0;
width: 100%; }
footer nav:before, footer nav:after {
content: "";
display: table; }
footer nav:after {
clear: both; }
footer nav a.logo {
footer nav .copyright {
float: left;
padding-top: 2px; }
footer nav .copyright a.logo {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
float: left;
height: 100%;
margin: 3px 15px 0px 0px; }
margin-right: 14px;
margin-top: 1px;
padding-right: 15px;
position: relative;
vertical-align: middle; }
footer nav .copyright a.logo::after {
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -2px;
width: 1px; }
footer nav .copyright a.logo img {
position: relative;
z-index: 2; }
footer nav .copyright p {
color: #a0a0a0;
font: normal 1.2rem/1.6rem 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;
margin: 0 auto;
padding-top: 4px;
text-align: center;
vertical-align: middle; }
footer nav .copyright p a {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-left: 5px;
text-decoration: underline; }
footer nav ol {
float: left;
font-size: 0em;
margin-top: 6px; }
footer nav ol.social {
float: right; }
footer nav ol.social li {
border: none;
padding: 0px 5px; }
footer nav ol.social li a:hover {
opacity: 0.7; }
float: right;
font-size: 0em; }
footer nav 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;
list-style: none;
padding: 0px 15px; }
footer nav ol li a:link, footer nav ol li a:visited {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 5px 0px; }
footer .copyright {
height: 50px;
margin-top: 80px;
width: 100%; }
footer .copyright hr {
border: none;
margin: 0px;
padding: 0px 15px;
position: relative;
z-index: 2; }
footer .copyright hr::after {
bottom: 0px;
vertical-align: middle; }
footer nav ol li::after {
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -1px; }
footer .copyright p {
color: #a0a0a0;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin: 0 auto;
padding-top: 15px;
text-align: center;
max-width: 1200px; }
footer .copyright p a {
border-bottom: 1px solid #c8c8c8;
top: -5px;
width: 1px; }
footer nav ol li a:link, footer nav ol li a:visited {
color: #a0a0a0;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 5px; }
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 6px 0px; }
footer nav ol li.social {
border: none;
margin: 0 0 0 5px;
padding: 0; }
footer nav ol li.social::after {
display: none; }
footer nav ol li.social a {
padding: 0 0 0 10px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
footer nav ol li.social a:hover {
opacity: 0.7; }
header.app {
border-bottom: 1px solid #c8c8c8;
......@@ -1046,6 +1135,8 @@ header.app {
position: relative;
z-index: 2; }
header.app .divider {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -1063,6 +1154,8 @@ header.app {
header.app nav ol {
font-size: 0em; }
header.app nav ol li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -1074,6 +1167,8 @@ header.app {
header.app nav ol li.secondary a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
-webkit-box-sizing: border-box;
......@@ -1083,6 +1178,8 @@ header.app {
display: block;
font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 30px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -1104,6 +1201,8 @@ header.app {
border: 1px solid transparent;
-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;
......@@ -1112,6 +1211,8 @@ header.app {
display: block;
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
height: 38px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -1148,12 +1249,16 @@ header.app {
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: 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);
height: 22px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -1180,6 +1285,8 @@ header.app {
header.app nav.user a.user-link .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%;
......@@ -1188,6 +1295,8 @@ header.app {
header.app nav.user 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: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
......@@ -1253,11 +1362,26 @@ header.app {
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
-webkit-transition: padding, 0.1s, linear;
-moz-transition: padding, 0.1s, linear;
-ms-transition: padding, 0.1s, linear;
-o-transition: padding, 0.1s, linear;
transition: padding, 0.1s, linear;
-webkit-transition-property: padding;
-moz-transition-property: padding;
-ms-transition-property: padding;
-o-transition-property: padding;
transition-property: padding;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
white-space: nowrap;
width: 100%; }
header.app nav.user ol.user-options li > a:hover {
......@@ -1274,312 +1398,247 @@ header.app {
padding-left: 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
.courses {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.highlighted-courses .courses, .find-courses .courses {
zoom: 1;
margin: 40px 0px;
padding: 0px 10px;
width: 100%; }
.courses:before, .courses:after {
padding: 40px 15px 15px; }
.highlighted-courses .courses:before, .highlighted-courses .courses:after, .find-courses .courses:before, .find-courses .courses:after {
content: "";
display: table; }
.courses:after {
.highlighted-courses .courses:after, .find-courses .courses:after {
clear: both; }
.courses .course {
background: #f0f0f0;
.highlighted-courses .courses .course, .find-courses .courses .course {
background: #fafafa;
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
float: left;
font-size: 0em;
min-height: 100px;
margin-right: 2.513%;
margin-bottom: 25px;
padding: 10px;
width: 48.744%;
-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: 768px) {
.courses .course {
float: none;
margin-right: 0px;
width: 100%; } }
.courses .course:nth-child(odd) {
margin-right: 2.513%; }
.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;
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;
width: 31.658%;
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
.highlighted-courses .courses .course:nth-child(3n+3), .find-courses .courses .course:nth-child(3n+3) {
margin-right: 0; }
.highlighted-courses .courses .course .inner-wrapper, .find-courses .courses .course .inner-wrapper {
border: 1px solid white;
height: 100%;
height: 180px;
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) {
.courses .course .cover {
display: none; } }
.courses .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;
position: relative; }
.highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview {
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; }
.courses .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: "";
width: 100%;
z-index: 3; }
.highlighted-courses .courses .course header.course-preview > a, .find-courses .courses .course header.course-preview > a {
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
-webkit-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(150, 150, 150, 0.7);
display: block;
height: 55px;
left: 40px;
opacity: 0;
height: 50px; }
.highlighted-courses .courses .course header.course-preview > a hgroup, .find-courses .courses .course header.course-preview > a hgroup {
left: 0px;
padding: 5px 10px;
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; }
.courses .course .cover img {
-webkit-border-radius: 4px;
-moz-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 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 2px;
overflow: hidden;
right: 60px;
top: 0px; }
.highlighted-courses .courses .course header.course-preview > a hgroup h2, .find-courses .courses .course header.course-preview > a hgroup h2 {
font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
padding-top: 10px;
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; }
.courses .course .info > hgroup p {
.highlighted-courses .courses .course header.course-preview > a hgroup p, .find-courses .courses .course header.course-preview > a hgroup p {
color: #3c3c3c;
display: none;
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; }
.courses .course .info .edit, .courses .course .info .register {
border: 1px solid #dcdcdc;
background: #e6e6e6;
color: #a0a0a0;
.highlighted-courses .courses .course header.course-preview > a .info-link, .find-courses .courses .course header.course-preview > a .info-link {
border-left: 1px solid rgba(150, 150, 150, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #3c3c3c;
display: block;
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
padding: 6px 10px;
font: bold 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
height: 100%;
opacity: 0.6;
padding-top: 10px;
position: absolute;
right: 0px;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
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) {
.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: 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: 60px; }
.highlighted-courses .courses .course header.course-preview > a:hover, .find-courses .courses .course header.course-preview > a:hover {
background-image: -webkit-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
background-image: -moz-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
background-image: -ms-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
background-image: -o-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8));
background-image: linear-gradient(-90deg, white, rgba(255, 255, 255, 0.8)); }
.highlighted-courses .courses .course header.course-preview > a:hover h2, .highlighted-courses .courses .course header.course-preview > a:hover p, .highlighted-courses .courses .course header.course-preview > a:hover .info-link, .find-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover p, .find-courses .courses .course header.course-preview > a:hover .info-link {
color: #1d9dd9;
opacity: 1; }
.highlighted-courses .courses .course .info, .find-courses .courses .course .info {
height: 310px;
left: 0px;
position: absolute;
top: 0px;
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.courses .course .info .meta:hover {
opacity: 0.9; }
.courses .course .info .meta > * {
height: 18px;
.highlighted-courses .courses .course .info .meta-info, .find-courses .courses .course .info .meta-info {
background: rgba(0, 0, 0, 0.6);
bottom: 130px;
border-top: 1px solid rgba(0, 0, 0, 0.5);
zoom: 1;
position: absolute;
top: 15px; }
.courses .course .info .meta p + p {
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.highlighted-courses .courses .course .info .meta-info:before, .highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:before, .find-courses .courses .course .info .meta-info:after {
content: "";
display: table; }
.highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:after {
clear: both; }
.highlighted-courses .courses .course .info .meta-info p, .find-courses .courses .course .info .meta-info p {
color: white;
font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 5px 10px; }
.highlighted-courses .courses .course .info .meta-info p.university, .find-courses .courses .course .info .meta-info p.university {
float: left; }
.highlighted-courses .courses .course .info .meta-info p.dates, .find-courses .courses .course .info .meta-info p.dates {
float: right;
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;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.courses .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; }
.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-family: "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 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;
.highlighted-courses .courses .course .info .cover-image, .find-courses .courses .course .info .cover-image {
height: 180px;
overflow: hidden;
width: 100%; }
.highlighted-courses .courses .course .info .cover-image img, .find-courses .courses .course .info .cover-image img {
display: block;
min-width: 100%; }
.highlighted-courses .courses .course .info .desc, .find-courses .courses .course .info .desc {
background: white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 130px;
overflow: hidden;
padding: 10px;
width: 100%; }
.highlighted-courses .courses .course:hover, .find-courses .courses .course:hover {
background: #f5f5f5;
border-color: #bebebe;
-webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
-moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); }
.highlighted-courses .courses .course:hover .info, .find-courses .courses .course:hover .info {
top: -130px; }
.highlighted-courses .courses .course:hover .info .meta-info, .find-courses .courses .course:hover .info .meta-info {
opacity: 0; }
.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;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
zoom: 1;
height: 60px;
padding: 12px 10px;
......@@ -1610,6 +1669,8 @@ header.app {
background-image: linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%);
-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;
......@@ -1632,6 +1693,8 @@ header.app {
background: white;
-webkit-border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-ms-border-radius: 0px 4px 4px 4px;
-o-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);
......@@ -1653,6 +1716,8 @@ header.app {
background-image: linear-gradient(-90deg, #fafafa, white);
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
-ms-border-radius: 4px 4px 0px 0px;
-o-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
border-bottom: none;
-webkit-box-shadow: 0 2px 0 -1px white;
......@@ -1667,12 +1732,16 @@ header.app {
.filter nav form.search input[type="text"] {
-webkit-border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-ms-border-radius: 3px 0px 0px 3px;
-o-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;
-ms-border-radius: 0px 3px 3px 0px;
-o-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
height: 36px; }
......@@ -1698,6 +1767,8 @@ header.app {
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
......@@ -1717,6 +1788,8 @@ header.app {
background: #f0f0f0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
......@@ -1791,6 +1864,8 @@ header.app {
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-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
......@@ -1863,8 +1938,12 @@ header.app {
.modal .inner-wrapper .close-modal {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......@@ -1880,11 +1959,26 @@ header.app {
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
-webkit-transition: all, 0.15s, ease-out;
-moz-transition: all, 0.15s, ease-out;
-ms-transition: all, 0.15s, ease-out;
-o-transition: all, 0.15s, ease-out;
transition: all, 0.15s, ease-out; }
-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; }
.modal .inner-wrapper .close-modal:hover p {
color: #3c3c3c; }
......@@ -1902,7 +1996,7 @@ header.app {
.home > header:after {
clear: both; }
.home > header .video-wrapper {
left: 0px;
right: 0px;
position: absolute;
top: 0px; }
.home > header .video-wrapper .video-player {
......@@ -1910,6 +2004,8 @@ header.app {
border: 1px solid black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
height: 315px;
padding: 5px;
......@@ -1927,14 +2023,14 @@ header.app {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: right;
float: left;
font-size: 0em;
width: 100%;
padding-left: 600px;
padding-right: 600px;
padding-top: 20px; }
.home > header .welcome h1 {
color: #a0a0a0;
font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
font: 300 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
......@@ -1964,6 +2060,8 @@ header.app {
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-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);
......@@ -1973,11 +2071,26 @@ header.app {
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;
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.home > header .welcome .signup-wrapper .sign-up:hover {
-webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
......@@ -1988,12 +2101,14 @@ header.app {
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-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;
display: inline;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
......@@ -2003,7 +2118,7 @@ header.app {
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;
padding: 7px 20px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
......@@ -2012,7 +2127,11 @@ header.app {
box-sizing: border-box;
-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;
......@@ -2023,7 +2142,7 @@ header.app {
text-transform: uppercase;
text-align: center;
width: 100%; }
.home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) {
.home > header .welcome .signup-wrapper .sign-up a:hover {
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));
......@@ -2032,42 +2151,93 @@ header.app {
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:active:not(:disabled) {
.home > header .welcome .signup-wrapper .sign-up a:active {
-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:disabled {
opacity: 0.5;
cursor: not-allowed; }
.home .university-partners {
background: #f5f5f5;
border: 1px solid #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: 60px;
background-image: -webkit-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: -moz-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: -ms-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: -o-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
margin-bottom: 0px;
overflow: hidden;
padding: 10px 0px;
position: relative;
width: 100%; }
.home .university-partners::before {
content: "";
display: block; }
.home .university-partners::after {
content: "";
display: block; }
.home .university-partners .partners {
font-size: 0em;
margin: 0 auto;
width: 420px; }
.home .university-partners .partners a {
padding: 15px 0px;
text-align: center; }
.home .university-partners .partners li.partner {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 40px;
margin-right: 20px;
padding-right: 20px;
position: relative;
vertical-align: middle; }
.home .university-partners .partners li.partner::before {
content: "";
display: block;
height: 100px;
right: 0px;
position: absolute;
top: 0px;
width: 1px; }
.home .university-partners .partners li.partner::after {
content: "";
display: block;
height: 100px;
right: 1px;
position: absolute;
top: 0px;
width: 1px; }
.home .university-partners .partners li.partner.mit {
padding: 0 35px 0 20px; }
.home .university-partners .partners li.partner:last-child {
margin-right: 0px;
padding-right: 0px; }
.home .university-partners .partners li.partner:last-child::before {
display: none; }
.home .university-partners .partners li.partner:last-child::after {
display: none; }
.home .university-partners .partners a {
opacity: 0.7;
position: relative; }
.home .university-partners .partners a:last-child {
margin-right: 0px; }
.home .university-partners .partners a:hover {
opacity: 0.9; }
.home .university-partners .partners a:hover::before {
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
.home .university-partners .partners a::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%);
......@@ -2079,84 +2249,156 @@ header.app {
left: 50%;
margin-left: -100px;
margin-top: -100px;
opacity: 0;
width: 200px;
position: absolute;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
top: 50%;
z-index: 1; }
.home .university-partners .partners .name {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
.home .university-partners .partners a .name {
color: #3c3c3c;
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
left: 0px;
position: absolute;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
position: relative;
z-index: 2;
vertical-align: middle; }
.home .university-partners .partners img {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
max-width: 100px;
bottom: -60px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
vertical-align: middle;
width: 100%;
z-index: 2; }
.home .university-partners .partners a img {
max-width: 140px;
position: relative;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
vertical-align: middle;
z-index: 2; }
.home .university-partners .partners a:hover {
opacity: 0.9; }
.home .university-partners .partners a:hover::before {
opacity: 1; }
.home .university-partners .partners a:hover .name {
bottom: 30px; }
.home .university-partners .partners a:hover img {
top: -120px; }
.home .highlighted-courses {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-bottom: 1px solid #d2d2d2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
margin-bottom: 40px;
margin-bottom: 60px;
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 .highlighted-courses > h2 {
background: #f5f5f5;
border: 1px solid #dcdcdc;
border-top: none;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-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);
color: #a0a0a0;
letter-spacing: 1px;
padding: 15px 10px;
text-align: center;
text-transform: uppercase; }
.home .highlighted-courses .courses {
background: #f5f5f5;
background-image: -webkit-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -moz-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -ms-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -o-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); }
.home .more-info {
margin-bottom: 60px;
width: 100%; }
.home .more-info h2 {
border-bottom: 1px solid #c8c8c8;
color: #a0a0a0;
font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin-bottom: 30px;
padding-bottom: 10px; }
margin-bottom: 20px; }
.home .more-info .news {
font-size: 0em;
width: 100%; }
.home .more-info .news > article {
background: #f0f0f0;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 300px;
height: 150px;
margin-right: 2.513%;
width: 31.658%; }
width: 23.116%; }
.home .more-info .news > article:last-child {
margin-right: 0px; }
.home .social-media {
......@@ -2164,6 +2406,8 @@ header.app {
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
......@@ -2208,6 +2452,8 @@ header.app {
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;
......@@ -2224,6 +2470,8 @@ header.app {
.dashboard .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%; }
......@@ -2279,31 +2527,31 @@ header.app {
.dashboard .sidebar header.profile .user-info .info > ul li h3 span {
font-weight: normal;
text-transform: none; }
.dashboard .courses {
.dashboard .my-courses {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px;
padding-left: 270px; }
@media screen and (max-width: 768px) {
.dashboard .courses {
.dashboard .my-courses {
padding: 0px; } }
@media only screen and (max-width: 768px) {
.dashboard .courses {
.dashboard .my-courses {
float: none;
width: 100%; } }
.dashboard .courses nav.course-toggle {
.dashboard .my-courses nav.course-toggle {
background: #e6e6e6;
margin-bottom: 30px;
position: relative; }
.dashboard .courses nav.course-toggle ol.filters {
.dashboard .my-courses nav.course-toggle ol.filters {
zoom: 1; }
.dashboard .courses nav.course-toggle ol.filters:before, .dashboard .courses nav.course-toggle ol.filters:after {
.dashboard .my-courses nav.course-toggle ol.filters:before, .dashboard .my-courses nav.course-toggle ol.filters:after {
content: "";
display: table; }
.dashboard .courses nav.course-toggle ol.filters:after {
.dashboard .my-courses nav.course-toggle ol.filters:after {
clear: both; }
.dashboard .courses nav.course-toggle ol.filters li {
.dashboard .my-courses nav.course-toggle ol.filters li {
border-right: 1px solid #c8c8c8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -2313,21 +2561,411 @@ header.app {
padding: 15px 10px;
width: 25%;
text-align: center; }
.dashboard .courses nav.course-toggle ol.filters li:last-child {
.dashboard .my-courses nav.course-toggle ol.filters li:last-child {
border: none; }
.dashboard .courses nav.course-toggle ol.filters li:hover {
.dashboard .my-courses nav.course-toggle ol.filters li:hover {
background: #dcdcdc;
cursor: pointer; }
.dashboard .courses nav.course-toggle ol.filters li.selected {
.dashboard .my-courses nav.course-toggle ol.filters li.selected {
background: #dcdcdc; }
.dashboard .courses nav.course-toggle ol.filters li h2 {
.dashboard .my-courses nav.course-toggle ol.filters li h2 {
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-transform: none; }
.dashboard .courses nav.course-toggle ol.filters li span.count {
.dashboard .my-courses nav.course-toggle ol.filters li span.count {
margin: 5px 0 0 0;
display: block; }
.dashboard .courses .course {
.dashboard .my-courses .my-course {
background: #fafafa;
border: 1px solid #dcdcdc;
-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;
float: left;
font-size: 0em;
margin-right: 2.513%;
min-height: 120px;
margin-bottom: 25px;
overflow: hidden;
position: relative;
width: 100%;
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
@media only screen and (max-width: 768px) {
.dashboard .my-courses .my-course {
float: none;
margin-right: 0px;
width: 100%; } }
.dashboard .my-courses .my-course:last-child {
margin-bottom: none; }
.dashboard .my-courses .my-course > a {
zoom: 1;
display: block;
padding: 10px;
position: relative; }
.dashboard .my-courses .my-course > a:before, .dashboard .my-courses .my-course > a:after {
content: "";
display: table; }
.dashboard .my-courses .my-course > a:after {
clear: both; }
.dashboard .my-courses .my-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: 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-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .cover {
display: none; } }
.dashboard .my-courses .my-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: 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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
right: 0px; }
.dashboard .my-courses .my-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-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 55px; }
.dashboard .my-courses .my-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%; }
.dashboard .my-courses .my-course .info {
left: 130px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup {
width: 100%; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info > hgroup {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup h2 {
font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
-o-transition-property: color;
transition-property: color;
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.dashboard .my-courses .my-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; }
.dashboard .my-courses .my-course .info .edit, .dashboard .my-courses .my-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: 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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .edit, .dashboard .my-courses .my-course .info .register {
display: none; } }
.dashboard .my-courses .my-course .info .edit:hover, .dashboard .my-courses .my-course .info .register:hover {
background: white;
color: #1d9dd9; }
.dashboard .my-courses .my-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-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-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: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.dashboard .my-courses .my-course .info .meta:hover {
opacity: 0.9; }
.dashboard .my-courses .my-course .info .meta > * {
height: 18px;
position: absolute;
top: 15px; }
.dashboard .my-courses .my-course .info .meta p + p {
margin-top: 0px; }
.dashboard .my-courses .my-course .info .meta .complete {
left: 0px; }
.dashboard .my-courses .my-course .info .meta .complete p {
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; }
.dashboard .my-courses .my-course .info .meta .complete p span {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .dates p {
color: #a0a0a0;
font: normal 1rem/1.6rem 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; }
.dashboard .my-courses .my-course .info .meta .dates p:first-child {
border-right: 1px solid #c8c8c8;
margin-right: 10px;
padding-right: 10px; }
.dashboard .my-courses .my-course .info .meta .dates p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .meta .end-date {
display: none; } }
.dashboard .my-courses .my-course .info .meta .end-date p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; }
.dashboard .my-courses .my-course .info .meta .end-date p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-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) {
.dashboard .my-courses .my-course .info .meta .progress {
right: 0px; } }
.dashboard .my-courses .my-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; }
.dashboard .my-courses .my-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%; }
.dashboard .my-courses .my-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); }
.dashboard .my-courses .my-course:hover .edit {
background: #dcdcdc;
border-color: #bebebe; }
.dashboard .my-courses .my-course:hover .cover {
opacity: 1; }
.dashboard .my-courses .my-course:hover .cover .shade, .dashboard .my-courses .my-course:hover .cover .arrow {
opacity: 1; }
.dashboard .my-courses .my-course:hover .meta {
opacity: 0.9; }
nav.course-material {
background: #d2d2d2;
......@@ -2352,13 +2990,17 @@ nav.course-material {
max-width: 1200px;
width: 100%; }
nav.course-material ol.course-tabs {
-moz-border-radius-topleft: 4px;
-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;
-moz-border-radius-topright: 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; }
......@@ -2383,13 +3025,17 @@ nav.course-material {
background: white;
border: 1px solid #c8c8c8;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
-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;
-moz-border-radius-topright: 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: 0 2px 0 0 white;
-moz-box-shadow: 0 2px 0 0 white;
......@@ -2402,14 +3048,14 @@ nav.course-material {
background: #f0f0f0;
height: 600px; }
.find-courses header {
.find-courses header.search-intro {
background: #f0f0f0;
border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
width: 100%; }
.find-courses header .inner-wrapper {
.find-courses header.search-intro .inner-wrapper {
height: 120px;
margin: 0 auto;
max-width: 1200px;
......@@ -2417,7 +3063,7 @@ nav.course-material {
padding: 40px 0px 30px;
position: relative;
width: 100%; }
.find-courses header .inner-wrapper::before {
.find-courses header.search-intro .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%);
......@@ -2431,13 +3077,13 @@ nav.course-material {
position: absolute;
width: 100%;
z-index: 1; }
.find-courses header .inner-wrapper img {
.find-courses header.search-intro .inner-wrapper img {
display: block;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 2; }
.find-courses header .inner-wrapper h1 {
.find-courses header.search-intro .inner-wrapper h1 {
color: #a0a0a0;
font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 1px;
......@@ -2484,6 +3130,8 @@ nav.course-material {
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: inset 0 0 1px 1px white;
-moz-box-shadow: inset 0 0 1px 1px white;
......@@ -2511,12 +3159,14 @@ nav.course-material {
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: inset 0 1px 0 0 #61b8e1;
-moz-box-shadow: inset 0 1px 0 0 #61b8e1;
box-shadow: inset 0 1px 0 0 #61b8e1;
color: white;
display: inline-block;
display: inline;
font-size: 11px;
font-weight: bold;
background-color: #1d9dd9;
......@@ -2526,20 +3176,23 @@ nav.course-material {
background-image: -ms-linear-gradient(top, #1d9dd9, #0e7cb0);
background-image: -o-linear-gradient(top, #1d9dd9, #0e7cb0);
background-image: linear-gradient(top, #1d9dd9, #0e7cb0);
padding: 7px 18px;
text-decoration: none;
padding: 6px 18px 7px;
text-shadow: 0 1px 0 #076794;
-webkit-background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-ms-border-bottom-left-radius: 0px;
-o-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-ms-border-top-left-radius: 0px;
-o-border-top-left-radius: 0px;
border-top-left-radius: 0px;
display: block;
font-size: 1.6em;
......@@ -2551,7 +3204,7 @@ nav.course-material {
bottom: -1px;
text-align: center;
vertical-align: middle; }
.course-info header .button:hover:not(:disabled) {
.course-info header .button:hover {
-webkit-box-shadow: inset 0 1px 0 0 #35a6db;
-moz-box-shadow: inset 0 1px 0 0 #35a6db;
box-shadow: inset 0 1px 0 0 #35a6db;
......@@ -2563,14 +3216,11 @@ nav.course-material {
background-image: -ms-linear-gradient(top, #1e8bbe, #0e72a1);
background-image: -o-linear-gradient(top, #1e8bbe, #0e72a1);
background-image: linear-gradient(top, #1e8bbe, #0e72a1); }
.course-info header .button:active:not(:disabled) {
.course-info header .button:active {
border: 1px solid #0d72a2;
-webkit-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee; }
.course-info header .button:disabled {
opacity: 0.5;
cursor: not-allowed; }
.course-info .sidebar {
background: white;
float: right;
......@@ -2579,7 +3229,7 @@ nav.course-material {
padding-bottom: 20px;
position: relative;
width: 31.658%; }
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider {
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider, .course-info .sidebar footer nav .copyright a.logo::after, footer nav .copyright .course-info .sidebar a.logo::after, .course-info .sidebar footer nav ol li::after, footer nav ol .course-info .sidebar li::after, .course-info .sidebar .home .university-partners .partners li.partner::before, .home .university-partners .partners .course-info .sidebar li.partner::before {
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: -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));
......@@ -2615,6 +3265,8 @@ nav.course-material {
border: 10px solid #6a6a6a;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
display: block;
margin: 0 auto 20px; }
......@@ -2632,6 +3284,8 @@ nav.course-material {
background: #F0F0F0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
color: #7A7A7A;
font-size: .8em;
......@@ -2656,6 +3310,8 @@ nav.course-material {
background: #eee;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
display: inline-block;
color: #444;
......
lms/static/sass/bourbon/_bourbon.scss
......@@ -7,7 +7,6 @@
@import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade";
@import "functions/transition-property-name";
// CSS3 Mixins
@import "css3/animation";
......@@ -22,7 +21,6 @@
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/prefixer";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
......@@ -31,9 +29,7 @@
// Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
@import "addons/font-face";
@import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/timing-functions";
lms/static/sass/bourbon/addons/_button.scss
......@@ -34,11 +34,6 @@
@include pill($base-color);
}
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
......@@ -67,16 +62,15 @@
@include border-radius (3px);
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline-block;
display: inline;
font-size: 11px;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: 7px 18px;
text-decoration: none;
padding: 6px 18px 7px;
text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box;
&:hover:not(:disabled) {
&:hover {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
......@@ -92,7 +86,7 @@
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
&:active:not(:disabled) {
&:active {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
......@@ -139,16 +133,16 @@
@include border-radius(5px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline-block;
display: inline;
font-size: 14px;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: 8px 20px;
padding: 7px 20px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
&:hover:not(:disabled) {
&:hover {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
......@@ -168,7 +162,7 @@
$fourth-stop-hover 100%);
}
&:active:not(:disabled) {
&:active {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true {
......@@ -210,18 +204,17 @@
@include border-radius(16px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
color: $color;
display: inline-block;
display: inline;
font-size: 11px;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: 5px 16px;
padding: 3px 16px 5px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box;
&:hover:not(:disabled) {
&:hover {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
......@@ -249,7 +242,7 @@
-webkit-background-clip: padding-box;
}
&:active:not(:disabled) {
&:active {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
......@@ -271,3 +264,4 @@
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
lms/static/sass/bourbon/addons/_font-face.scss deleted 100644 → 0
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
\ No newline at end of file
lms/static/sass/bourbon/addons/_hide-text.scss deleted 100644 → 0
@mixin hide-text {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
// A CSS image replacement method that does not require the use of text-indent.
//
// Examples
//
// .ir {
// @include hide-text;
// }
lms/static/sass/bourbon/addons/_position.scss
......@@ -12,31 +12,19 @@
position: $position;
@if $top == auto {
top: $top;
}
@else if not(unitless($top)) {
@if not(unitless($top)) {
top: $top;
}
@if $right == auto {
right: $right;
}
@else if not(unitless($right)) {
@if not(unitless($right)) {
right: $right;
}
@if $bottom == auto {
bottom: $bottom;
}
@else if not(unitless($bottom)) {
@if not(unitless($bottom)) {
bottom: $bottom;
}
@if $left == auto {
left: $left;
}
@else if not(unitless($left)) {
@if not(unitless($left)) {
left: $left;
}
}
lms/static/sass/bourbon/css3/_animation.scss
......@@ -11,7 +11,9 @@
$full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
@include prefixer(animation, $full);
-webkit-animation: $full;
-moz-animation: $full;
animation: $full;
}
// Individual Animation Properties
......@@ -24,7 +26,9 @@
$full: compact($name-1, $name-2, $name-3, $name-4,
$name-5, $name-6, $name-7, $name-8, $name-9);
@include prefixer(animation-name, $full);
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
}
......@@ -37,7 +41,9 @@
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
@include prefixer(animation-duration, $full);
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
}
......@@ -51,7 +57,9 @@
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
@include prefixer(animation-timing-function, $full);
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
}
......@@ -65,7 +73,9 @@
$full: compact($value-1, $value-2, $value-3, $value-4,
$value-5, $value-6, $value-7, $value-8, $value-9);
@include prefixer(animation-iteration-count, $full);
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
}
......@@ -79,7 +89,9 @@
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
@include prefixer(animation-direction, $full);
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
}
......@@ -93,7 +105,9 @@
$full: compact($state-1, $state-2, $state-3, $state-4,
$state-5, $state-6, $state-7, $state-8, $state-9);
@include prefixer(animation-play-state, $full);
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
}
......@@ -106,7 +120,9 @@
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
@include prefixer(animation-delay, $full);
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
}
......@@ -121,5 +137,35 @@
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
@include prefixer(animation-fill-mode, $full);
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
}
// Deprecated
@mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name);
$length-of-time: length($time);
$length-of-motion: length($motion);
@if $length-of-name > 1 {
@include animation-name(zip($name));
} @else {
@include animation-name( $name);
}
@if $length-of-time > 1 {
@include animation-duration(zip($time));
} @else {
@include animation-duration( $time);
}
@if $length-of-motion > 1 {
@include animation-timing-function(zip($motion));
} @else {
@include animation-timing-function( $motion);
}
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
}
lms/static/sass/bourbon/css3/_appearance.scss
@mixin appearance ($value) {
@include prefixer(appearance, $value, webkit, moz, ms, o);
-webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
}
lms/static/sass/bourbon/css3/_background-size.scss
......@@ -7,5 +7,9 @@
$full: compact($length-1, $length-2, $length-3, $length-4,
$length-5, $length-6, $length-7, $length-8, $length-9);
@include prefixer(background-size, $full, webkit, moz, ms, o);
-webkit-background-size: $full;
-moz-background-size: $full;
-ms-background-size: $full;
-o-background-size: $full;
background-size: $full;
}
lms/static/sass/bourbon/css3/_border-radius.scss
@mixin border-radius ($radii) {
@include prefixer(border-radius, $radii);
-webkit-border-radius: $radii;
-moz-border-radius: $radii;
-ms-border-radius: $radii;
-o-border-radius: $radii;
border-radius: $radii;
}
@mixin border-top-left-radius($radii) {
-webkit-border-top-left-radius: $radii;
-moz-border-top-left-radius: $radii;
-moz-border-radius-topleft: $radii;
@include prefixer(border-top-left-radius, $radii);
-ms-border-top-left-radius: $radii;
-o-border-top-left-radius: $radii;
border-top-left-radius: $radii;
}
@mixin border-top-right-radius($radii) {
-webkit-border-top-right-radius: $radii;
-moz-border-top-right-radius: $radii;
-moz-border-radius-topright: $radii;
@include prefixer(border-top-right-radius, $radii);
-ms-border-top-right-radius: $radii;
-o-border-top-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-left-radius($radii) {
-webkit-border-bottom-left-radius: $radii;
-moz-border-bottom-left-radius: $radii;
-moz-border-radius-bottomleft: $radii;
@include prefixer(border-bottom-left-radius, $radii);
-ms-border-bottom-left-radius: $radii;
-o-border-bottom-left-radius: $radii;
border-bottom-left-radius: $radii;
}
@mixin border-bottom-right-radius($radii) {
@include prefixer(border-bottom-right-radius, $radii);
-webkit-border-bottom-right-radius: $radii;
-moz-border-bottom-right-radius: $radii;
-moz-border-radius-bottomright: $radii;
-ms-border-bottom-right-radius: $radii;
-o-border-bottom-right-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-top-radius($radii) {
......
lms/static/sass/bourbon/css3/_box-shadow.scss
......@@ -8,5 +8,7 @@
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
@include prefixer(box-shadow, $full);
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
box-shadow: $full;
}
lms/static/sass/bourbon/css3/_box-sizing.scss
@mixin box-sizing ($box) {
// content-box | border-box | inherit
@include prefixer(box-sizing, $box);
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
}
lms/static/sass/bourbon/css3/_columns.scss
@mixin columns($arg: auto) {
// <column-count> || <column-width>
@include prefixer(columns, $arg);
-webkit-columns: $arg;
-moz-columns: $arg;
columns: $arg;
}
@mixin column-count($int: auto) {
// auto || integer
@include prefixer(column-count, $int);
-webkit-column-count: $int;
-moz-column-count: $int;
column-count: $int;
}
@mixin column-gap($length: normal) {
// normal || length
@include prefixer(column-gap, $length);
-webkit-column-gap: $length;
-moz-column-gap: $length;
column-gap: $length;
}
@mixin column-fill($arg: auto) {
// auto || length
@include prefixer(columns-fill, $arg);
-webkit-columns-fill: $arg;
-moz-columns-fill: $arg;
columns-fill: $arg;
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg);
-webkit-column-rule: $arg;
-moz-column-rule: $arg;
column-rule: $arg;
}
@mixin column-rule-color($color) {
@include prefixer(column-rule-color, $color);
-webkit-column-rule-color: $color;
-moz-column-rule-color: $color;
column-rule-color: $color;
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style);
-webkit-column-rule-style: $style;
-moz-column-rule-style: $style;
column-rule-style: $style;
}
@mixin column-rule-width ($width: none) {
@include prefixer(column-rule-width, $width);
-webkit-column-rule-width: $width;
-moz-column-rule-width: $width;
column-rule-width: $width;
}
@mixin column-span($arg: none) {
// none || all
@include prefixer(column-span, $arg);
-webkit-column-span: $arg;
-moz-column-span: $arg;
column-span: $arg;
}
@mixin column-width($length: auto) {
// auto || length
@include prefixer(column-width, $length);
-webkit-column-width: $length;
-moz-column-width: $length;
column-width: $length;
}
lms/static/sass/bourbon/css3/_flex-box.scss
......@@ -16,37 +16,52 @@
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
@include prefixer(box-orient, $orient);
-webkit-box-orient: $orient;
-moz-box-orient: $orient;
box-orient: $orient;
}
@mixin box-pack($pack: start) {
// start|end|center|justify
@include prefixer(box-pack, $pack);
-webkit-box-pack: $pack;
-moz-box-pack: $pack;
box-pack: $pack;
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
@include prefixer(box-align, $align);
-webkit-box-align: $align;
-moz-box-align: $align;
box-align: $align;
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
@include prefixer(box-direction, $direction);
-webkit-box-direction: $direction;
-moz-box-direction: $direction;
box-direction: $direction;
}
@mixin box-lines($lines: single) {
// single|multiple
@include prefixer(box-lines, $lines);
-webkit-box-lines: $lines;
-moz-box-lines: $lines;
box-lines: $lines;
}
@mixin box-ordinal-group($int: 1) {
@include prefixer(box-ordinal-group, $int);
@mixin box-ordinal-group($integer: 1) {
-webkit-box-ordinal-group: $integer;
-moz-box-ordinal-group: $integer;
box-ordinal-group: $integer;
}
@mixin box-flex($value: 0.0) {
@include prefixer(box-flex, $value);
-webkit-box-flex: $value;
-moz-box-flex: $value;
box-flex: $value;
}
@mixin box-flex-group($int: 1) {
@include prefixer(box-flex-group, $int);
@mixin box-flex-group($integer: 1) {
-webkit-box-flex-group: $integer;
-moz-box-flex-group: $integer;
box-flex-group: $integer;
}
lms/static/sass/bourbon/css3/_inline-block.scss
// Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......
lms/static/sass/bourbon/css3/_linear-gradient.scss
......@@ -3,8 +3,6 @@
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$deprecated-pos1: left top,
$deprecated-pos2: left bottom,
$fallback: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
......@@ -27,7 +25,7 @@
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full);
background-image: -ms-linear-gradient($pos, $full);
......
lms/static/sass/bourbon/css3/_prefixer.scss deleted 100644 → 0
@mixin prefixer ($property, $value,
$webkit: true,
$moz: true,
$ms: false,
$o: false,
$spec: true) {
@if $webkit { -webkit-#{$property}: $value; }
@if $moz { -moz-#{$property}: $value; }
@if $ms { -ms-#{$property}: $value; }
@if $o { -o-#{$property}: $value; }
@if $spec { #{$property}: $value; }
}
lms/static/sass/bourbon/css3/_radial-gradient.scss
// Requires Sass 3.1+
@mixin radial-gradient($G1, $G2,
@mixin radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$pos: 50% 50%,
$shape-size: ellipse cover,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 460,
$fallback: false) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
background-image: -moz-radial-gradient($pos, $shape-size, $full);
background-image: -ms-radial-gradient($pos, $shape-size, $full);
......
lms/static/sass/bourbon/css3/_transform.scss
@mixin transform($property: none) {
// none | <transform-function>
@include prefixer(transform, $property, webkit, moz, ms, o);
-webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit, moz, ms, o);
-webkit-transform-origin: $axes;
-moz-transform-origin: $axes;
-ms-transform-origin: $axes;
-o-transform-origin: $axes;
transform-origin: $axes;
}
lms/static/sass/bourbon/css3/_transition.scss
......@@ -3,18 +3,38 @@
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
@mixin transition ($prop-1: all 0.15s ease-out 0,
$prop-2: false, $prop-3: false,
$prop-4: false, $prop-5: false,
$prop-6: false, $prop-7: false,
$prop-8: false, $prop-9: false)
{
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
@include prefixer(transition, $full, webkit, moz, ms, o);
}
// Detect # of args passed into each variable
$length-of-property: length($property);
$length-of-duration: length($duration);
$length-of-timing-function: length($timing-function);
$length-of-delay: length($delay);
@if $length-of-property > 1 {
@include transition-property(zip($property)); }
@else {
@include transition-property( $property);
}
@if $length-of-duration > 1 {
@include transition-duration(zip($duration)); }
@else {
@include transition-duration( $duration);
}
@if $length-of-timing-function > 1 {
@include transition-timing-function(zip($timing-function)); }
@else {
@include transition-timing-function( $timing-function);
}
@if $length-of-delay > 1 {
@include transition-delay(zip($delay)); }
@else {
@include transition-delay( $delay);
}
}
@mixin transition-property ($prop-1: all,
......@@ -26,11 +46,11 @@
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
-webkit-transition-property: transition-property-names($full, 'webkit');
-moz-transition-property: transition-property-names($full, 'moz');
-ms-transition-property: transition-property-names($full, 'ms');
-o-transition-property: transition-property-names($full, 'o');
transition-property: transition-property-names($full, false);
-webkit-transition-property: $full;
-moz-transition-property: $full;
-ms-transition-property: $full;
-o-transition-property: $full;
transition-property: $full;
}
@mixin transition-duration ($time-1: 0,
......@@ -42,7 +62,11 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
@include prefixer(transition-duration, $full, webkit, moz, ms, o);
-webkit-transition-duration: $full;
-moz-transition-duration: $full;
-ms-transition-duration: $full;
-o-transition-duration: $full;
transition-duration: $full;
}
@mixin transition-timing-function ($motion-1: ease,
......@@ -55,7 +79,11 @@
$motion-6, $motion-7, $motion-8, $motion-9);
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
-webkit-transition-timing-function: $full;
-moz-transition-timing-function: $full;
-ms-transition-timing-function: $full;
-o-transition-timing-function: $full;
transition-timing-function: $full;
}
@mixin transition-delay ($time-1: 0,
......@@ -67,6 +95,10 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
@include prefixer(transition-transition-delay, $full, webkit, moz, ms, o);
-webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
-o-transition-delay: $full;
transition-delay: $full;
}
lms/static/sass/bourbon/css3/_user-select.scss
@mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit, moz, ms);
-webkit-user-select: $arg;
-moz-user-select: $arg;
-ms-user-select: $arg;
user-select: $arg;
}
lms/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
// Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************//
@function deprecated-webkit-gradient($type,
$deprecated-pos1, $deprecated-pos2,
$full,
$deprecated-radius1: false, $deprecated-radius2: false) {
@function deprecated-webkit-gradient($type, $full) {
$gradient-list: ();
$gradient: false;
$full-length: length($full);
......@@ -17,28 +14,23 @@
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma);
}
@else {
@if $i == $full-length {
$percentage: 100%;
}
@else {
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
}
$color-stop: color-stop(unquote($percentage), $gradient);
$gradient-list: join($gradient-list, $color-stop, comma);
}
}
@if $type == radial {
$gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
$gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
}
@else if $type == linear {
$gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
$gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
}
@return $gradient;
}
lms/static/sass/bourbon/functions/_radial-gradient.scss
// This function is required and used by the background-image mixin.
@function radial-gradient($G1, $G2,
@function radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$pos: 50% 50%,
$shape-size: ellipse cover,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 50,
$fallback: false) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
$G9: false, $G10: false) {
$type: radial;
$gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
......@@ -60,3 +12,4 @@
@return $type-gradient;
}
lms/static/sass/bourbon/functions/_transition-property-name.scss deleted 100644 → 0
// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
\ No newline at end of file
lms/static/sass/bourbon/lib/bourbon.rb
require "bourbon/generator"
module Bourbon
if defined?(Rails) && defined?(Rails::Engine)
if defined?(Rails)
class Engine < ::Rails::Engine
require 'bourbon/engine'
end
......
lms/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
......@@ -4,9 +4,8 @@ module Bourbon::SassExtensions::Functions::Compact
def compact(*args)
sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List)
list = args.first
args = list.value
sep = list.separator
args = args.first.value
sep = args.first.separator
end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end
......
lms/templates/course.html
......@@ -2,27 +2,55 @@
%for course in courses:
<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">
<div class="inner-wrapper">
<header class="course-preview">
<a href="#">
<hgroup>
<h2>${course.title}</h2>
<p>${",".join(course.instructors)} &mdash; ${course.institution}</p>
<p>${course.id}</p>
<p>${course.institution}</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 href="" class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">HarvardX</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/history.png')}">
</div>
<div class="desc">
<p>An advanced intorduction to analog circuits.</p>
</div>
</section>
</section>
</a>
<p><a href="courses/${course.id}/info">Hackish temp link to courseware</a></p>
</div>
</article>
%endfor
<!--
-<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>${course.title}</h2>
- <p>${",".join(course.instructors)} &mdash; ${course.institution}</p>
- <p>${course.id}</p>
- <p><a href="courses/${course.id}/info">courseware</a></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>
-->
lms/templates/courses.html
......@@ -3,7 +3,7 @@
<%namespace name='static' file='static_content.html'/>
<section class="find-courses">
<header>
<header class="search-intro">
<div class="inner-wrapper">
<img src="${static.url('images/edx_bw.png')}" />
<h1>Explore courses from universities around the world.</h1>
......
lms/templates/dashboard.html
......@@ -31,7 +31,7 @@
</header>
</section>
<section class="courses">
<section class="my-courses">
<nav class="course-toggle">
<ol class="filters">
<li class="selected">
......@@ -49,7 +49,7 @@
</ol>
</nav>
<article class="course">
<article class="my-course">
<a href="/info">
<div class="cover">
<div class="shade"></div>
......@@ -79,7 +79,7 @@
</a>
</article>
<article class="course">
<article class="my-course">
<a href="/info">
<div class="cover">
<div class="shade"></div>
......@@ -109,7 +109,7 @@
</a>
</article>
<article class="course">
<article class="my-course">
<a href="/info">
<div class="cover">
<div class="shade"></div>
......
lms/templates/footer.html
......@@ -2,9 +2,12 @@
<footer>
<nav>
<a href="/" class="logo">
<section class="copyright">
<a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
<ol>
<li>
<a href="/courses">Find Courses</a>
......@@ -18,22 +21,11 @@
<li>
<a href="#">Jobs</a>
</li>
</ol>
<ol class="social">
<li>
<li class="social">
<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">
<hr>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
</footer>
lms/templates/index.html
......@@ -28,21 +28,34 @@
</header>
<section class="university-partners">
<section class="partners">
<ol class="partners">
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley_bw.png')}" />
<div class="name">BerkeleyX</div>
</a>
</li>
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/mit_bw.png')}" />
<div class="name">MITx</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
</a>
</section>
</li>
</ol>
</section>
<section class="highlighted-courses">
<h2>Explore courses from edX universities</h2>
<section class="courses">
<%include file="course.html" />
</section>
</section>
<section class="more-info">
<h2>edX News & Announcements</h2>
......@@ -50,6 +63,7 @@
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</section>
</section>
......
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