diff --git a/lms/static/images/facebook.png b/lms/static/images/facebook.png new file mode 100644 index 0000000000..f024b7c8ae Binary files /dev/null and b/lms/static/images/facebook.png differ diff --git a/lms/static/images/linkedin.png b/lms/static/images/linkedin.png new file mode 100644 index 0000000000..34261b05e5 Binary files /dev/null and b/lms/static/images/linkedin.png differ diff --git a/lms/static/images/logo_harvard_v5.png b/lms/static/images/logo_harvard_v5.png new file mode 100644 index 0000000000..aa1f8604cb Binary files /dev/null and b/lms/static/images/logo_harvard_v5.png differ diff --git a/lms/static/images/twitter.png b/lms/static/images/twitter.png new file mode 100644 index 0000000000..3d1856f834 Binary files /dev/null and b/lms/static/images/twitter.png differ diff --git a/lms/static/js/sticky_filter.js b/lms/static/js/sticky_filter.js new file mode 100644 index 0000000000..742d147782 --- /dev/null +++ b/lms/static/js/sticky_filter.js @@ -0,0 +1,12 @@ +$(function() { + var offset = $('.filter nav').offset().top; + + $(window).scroll(function() { + if (offset <= window.pageYOffset) { + return $('.filter nav').addClass('fixed-top'); + } + else if (offset >= window.pageYOffset) { + return $('.filter nav').removeClass('fixed-top'); + } + }); +}); diff --git a/lms/static/js/sticky_footer.js b/lms/static/js/sticky_footer.js new file mode 100644 index 0000000000..5f1e5a5458 --- /dev/null +++ b/lms/static/js/sticky_footer.js @@ -0,0 +1,23 @@ +$(function() { + var stickyFooter = function(){ + var pageHeight = $('html').height(); + var windowHeight = $(window).height(); + var footerHeight = $('footer').outerHeight(); + + var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight; + + + if (windowHeight < totalHeight) { + return $('footer').removeClass('fixed-bottom'); + } else { + return $('footer').addClass('fixed-bottom'); + } + }; + + stickyFooter(); + + $(window).resize(function() { + console.log("resizing"); + stickyFooter(); + }); +}); diff --git a/lms/static/sass/_base.scss b/lms/static/sass/_base.scss index 6370b74b43..f05086ddb7 100644 --- a/lms/static/sass/_base.scss +++ b/lms/static/sass/_base.scss @@ -17,8 +17,6 @@ $pink: rgb(182,37,104); html, body { background: rgb(255,255,255); font-size: 75%; - min-height: 100%; - margin: 0px 0px -140px 0px; } h1, h2, h3, h4, h5, h6 { diff --git a/lms/static/sass/_base_extends.scss b/lms/static/sass/_base_extends.scss index e4cc561cec..193f649d42 100644 --- a/lms/static/sass/_base_extends.scss +++ b/lms/static/sass/_base_extends.scss @@ -9,277 +9,3 @@ height: 100%; width: 1px; } - -article.course { - background: rgb(240,240,240); - border: 1px solid rgb(220,220,220); - @include border-radius(4px); - font-size: 0em; - min-height: 100px; - margin-bottom: 20px; - padding: 10px; - @include transition(all, 0.15s, linear); - - &:last-child { - margin-bottom: none; - } - - > a { - @include clearfix; - display: block; - position: relative; - } - - .cover { - background: rgb(225,225,225); - border: 1px solid rgb(150,150,150); - @include border-radius(4px); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - float: left; - height: 100px; - margin: 0px; - opacity: 0.8; - overflow: hidden; - position: relative; - @include transition(all, 0.15s, linear); - width: 100px; - - @media only screen and (max-width: 320px) { - display: none; - } - - .shade { - background: rgba(0,0,0, 0.3); - @include border-radius(4px); - bottom: 0px; - content: ""; - display: block; - left: 0px; - opacity: 0; - position: absolute; - top: 0px; - @include transition(all, 0.15s, linear); - right: 0px; - } - - .arrow { - border-top: 1px solid; - border-left: 1px solid; - border-color: rgb(255,255,255); - @include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6)); - content: ""; - display: block; - height: 55px; - left: 40px; - opacity: 0; - position: absolute; - top: 23px; - @include transform(rotate(-45deg)); - @include transition(all, 0.15s, linear); - width: 55px; - } - - img { - @include border-radius(4px); - display: block; - min-height: 100%; - min-width: 100%; - width: 100%; - } - } - - .info { - margin-left: 115px; - - @media only screen and (max-width: 320px) { - margin: 0px; - } - - > hgroup { - margin-right: 80px; - - @media only screen and (max-width: 320px) { - margin: 0px; - } - - h2 { - font: bold 1.8rem/2.5rem $sans-serif; - margin-bottom: 2px; - overflow: hidden; - text-shadow: 0 1px rgba(255,255,255, 0.6); - @include transition(color, 0.15s, linear); - text-overflow: ellipsis; - white-space: nowrap; - } - - p { - color: $base-font-color; - font: normal 1rem/1.6rem $sans-serif; - overflow: hidden; - text-shadow: 0 1px rgba(255,255,255, 0.6); - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .edit, .register { - border: 1px solid rgb(220,220,220); - background: rgb(230,230,230); - color: $lighter-base-font-color; - display: block; - font: normal 12px/14px $sans-serif; - padding: 6px 10px; - position: absolute; - right: 0px; - top: 0px; - @include transition(all, 0.15s, linear); - - @media only screen and (max-width: 320px) { - display: none; - } - - &:hover { - background: rgb(255,255,255); - color: $blue; - } - } - - .meta { - border-top: 1px solid rgb(200,200,200); - @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6)); - font-size: 1rem; - height: 34px; - margin-top: 10px; - opacity: 0.9; - position: relative; - @include transition(opacity, 0.15s, linear); - width: 100%; - - &:hover { - opacity: 0.9; - } - - > * { - height: 18px; - position: absolute; - top: 15px; - } - - p + p { - margin-top: 0px; - } - - .complete { - left: 0px; - - p { - font: normal 1rem/1.6rem $serif; - - span { - color: $base-font-color; - font-family: $sans-serif; - margin-left: 3px; - } - } - } - - .dates { - p { - color: $lighter-base-font-color; - font: normal 1rem/1.6rem $serif; - @include inline-block; - text-align: right; - - &:first-child { - border-right: 1px solid rgb(200,200,200); - margin-right: 10px; - padding-right: 10px; - } - - time { - color: $base-font-color; - font-family: $sans-serif; - margin-left: 3px; - } - } - } - - .end-date { - border-left: 1px solid rgb(200,200,200); - right: 0px; - padding-left: 15px; - - @media only screen and (max-width: 320px) { - display: none; - } - - p { - color: $lighter-base-font-color; - font: normal 1rem/1.6rem $serif; - text-align: right; - - time { - color: $base-font-color; - font-family: $sans-serif; - margin-left: 3px; - } - } - } - - .progress { - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - left: 90px; - right: 140px; - - @media only screen and (max-width: 320px) { - right: 0px; - } - - .meter { - background: rgb(230,230,230); - border: 1px solid rgb(200,200,200); - @include border-radius(3px); - @include box-sizing(border-box); - height: 100%; - padding: 2px; - - .meter-fill { - @include border-radius(3px); - background: rgb(210,210,210); - height: 100%; - width: 60%; - } - } - } - } - } - - &:hover { - background: rgb(245,245,245); - @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2)); - cursor: pointer; - - .edit { - background: rgb(220,220,220); - border-color: rgb(190,190,190); - } - - .cover { - opacity: 1; - - .shade, .arrow { - opacity: 1; - } - } - - h2 { - //color: $blue; - //text-decoration: underline; - } - - .meta { - opacity: 0.9; - } - } -} - diff --git a/lms/static/sass/_dashboard.scss b/lms/static/sass/_dashboard.scss index bf4b584215..3f818a203e 100644 --- a/lms/static/sass/_dashboard.scss +++ b/lms/static/sass/_dashboard.scss @@ -1,100 +1,104 @@ .dashboard { @include clearfix; margin: 40px 10px; -} -.sidebar { - background: rgb(240,240,240); - float: left; - margin-right: flex-gutter(); - width: flex-grid(3); + .sidebar { + background: rgb(240,240,240); + margin-right: flex-gutter(); + position: absolute; + width: 250px; - @media screen and (max-width: 768px) { - float: none; - margin: 0 0 30px 0; - width: flex-grid(12); - } + @media screen and (max-width: 768px) { + float: none; + margin: 0 0 30px 0; + position: static; + width: flex-grid(12); + } - header.profile { - .user-info { - @include clearfix; - padding: 10px; + header.profile { + .user-info { + @include clearfix; + padding: 10px; - .avatar { - background: rgb(220,220,220); - border: 1px solid rgb(180,180,180); - @include border-radius(4px); - @include box-sizing(border-box); - margin: 0 0 15px 0; - max-width: 100%; - overflow: hidden; - - @media screen and (max-width: 768px) { - float: left; - margin: 0px; - margin-right: flex-gutter(); - width: flex-grid(3); - } - - img { + .avatar { + background: rgb(220,220,220); + border: 1px solid rgb(180,180,180); @include border-radius(4px); - display: block; + @include box-sizing(border-box); + margin: 0 0 15px 0; max-width: 100%; - } - } - - .info { - @media screen and (max-width: 768px) { - float: left; - width: flex-grid(9); - } - - h2 { - border-bottom: 1px solid rgb(200,200,200); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4)); - font: bold 1.2rem/1.4rem $sans-serif; - margin-bottom: 15px; overflow: hidden; - padding-bottom: 15px; - text-align: center; - text-wrap: nowrap; - text-overflow: ellipsis; @media screen and (max-width: 768px) { - text-align: left; + margin: 0px; + margin-right: flex-gutter(); + position: absolute; + width: 100px; + } + + img { + @include border-radius(4px); + display: block; + max-width: 100%; } } - > ul { - @include clearfix; - margin: 0px; - padding: 0 0 10px 0; - + .info { @media screen and (max-width: 768px) { - padding: 0px; + @include box-sizing(border-box); + float: left; + min-height: 100px; + padding-left: 110px; + width: 100%; } - li { - list-style: none; - margin-bottom: 10px; + h2 { + border-bottom: 1px solid rgb(200,200,200); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4)); + font: bold 1.2rem/1.4rem $sans-serif; + margin-bottom: 15px; + overflow: hidden; + padding-bottom: 15px; + text-align: center; + text-wrap: nowrap; + text-overflow: ellipsis; @media screen and (max-width: 768px) { - float: left; - margin-right: 10px; + text-align: left; + } + } + + > ul { + @include clearfix; + margin: 0px; + padding: 0 0 10px 0; + + @media screen and (max-width: 768px) { + padding: 0px; } - &:last-child { - margin-bottom: 0px; - } + li { + list-style: none; + margin-bottom: 10px; - h3 { - color: $lighter-base-font-color; - font: bold 1rem/1.2rem $sans-serif; - text-shadow: 0 1px rgba(255,255,255, 0.8); + @media screen and (max-width: 768px) { + float: left; + margin-right: 10px; + } - span { - font-weight: normal; - text-transform: none; + &:last-child { + margin-bottom: 0px; + } + + h3 { + color: $lighter-base-font-color; + font: bold 1rem/1.2rem $sans-serif; + text-shadow: 0 1px rgba(255,255,255, 0.8); + + span { + font-weight: normal; + text-transform: none; + } } } } @@ -102,58 +106,66 @@ } } } -} + .courses { + @include box-sizing(border-box); + margin: 0px; + padding-left: 270px; -.courses { - float: left; - width: flex-grid(9); + @media screen and (max-width: 768px) { + padding: 0px; + } - @media only screen and (max-width: 768px) { - float: none; - width: flex-grid(12); - } + @media only screen and (max-width: 768px) { + float: none; + width: flex-grid(12); + } - nav.course-filters { - background: rgb(230,230,230); - margin-bottom: 30px; - position: relative; + nav.course-toggle { + background: rgb(230,230,230); + margin-bottom: 30px; + position: relative; - ol.filters { - @include clearfix; + ol.filters { + @include clearfix; - li { - border-right: 1px solid rgb(200,200,200); - @include box-sizing(border-box); - list-style: none; - float: left; - padding: 15px 10px; - width: 25%; - text-align: center; + li { + border-right: 1px solid rgb(200,200,200); + @include box-sizing(border-box); + list-style: none; + float: left; + padding: 15px 10px; + width: 25%; + text-align: center; - &:last-child { - border: none; - } + &:last-child { + border: none; + } - &:hover { - background: rgb(220,220,220); - cursor: pointer; - } + &:hover { + background: rgb(220,220,220); + cursor: pointer; + } - &.selected { - background: rgb(220,220,220); - } + &.selected { + background: rgb(220,220,220); + } - h2 { - font: normal 1rem/1.2rem $sans-serif; - text-transform: none; - } + h2 { + font: normal 1rem/1.2rem $sans-serif; + text-transform: none; + } - span.count { - margin: 5px 0 0 0; - display: block; + span.count { + margin: 5px 0 0 0; + display: block; + } } } } + + .course { + width: flex-grid(12); + } } } diff --git a/lms/static/sass/_find_courses.scss b/lms/static/sass/_find_courses.scss index 4b52b12dec..9d766228ec 100644 --- a/lms/static/sass/_find_courses.scss +++ b/lms/static/sass/_find_courses.scss @@ -1,58 +1,47 @@ .find-courses { - margin: 0 10px; + header { + background: rgb(240,240,240); + border-bottom: 1px solid rgb(200,200,200); + @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); + width: 100%; - > header { - margin-bottom: 30px; + .inner-wrapper { + height: 120px; + margin: 0 auto; + max-width: 1200px; + overflow: hidden; + padding: 40px 0px 30px; + position: relative; + width: flex-grid(12); - .universities { - margin: 10px auto; - opacity: 0.7; - width: flex-grid(4); + &::before { + @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); + bottom: -300px; + content: ""; + display: block; + height: 600px; + margin: 0 auto; + position: absolute; + width: 100%; + z-index: 1; + } img { - max-width: 100%; + display: block; + margin: 0 auto; + position: relative; + width: 100px; + z-index: 2; } - span.divider { - @extend .faded-vertical-divider; - @include inline-block; - height: 120px; - vertical-align: middle; - } - } - - &:hover { - .university { - } - } - } - - h2.title { - color: $lighter-base-font-color; - font: normal 1.2rem/1.8rem $serif; - letter-spacing: 1px; - margin-bottom: 50px; - text-transform: uppercase; - text-align: center; - } - - .courses { - @include clearfix; - width: flex-grid(12); - - .course { - @include box-sizing(border-box); - float: left; - width: flex-grid(6); - - @media only screen and (max-width: 768px) { - float: none; - margin-right: 0px; - width: flex-grid(12); - } - - &:nth-child(odd) { - margin-right: flex-gutter(); + h1 { + color: $lighter-base-font-color; + font: normal 1.2rem/1.8rem $serif; + letter-spacing: 1px; + position: relative; + text-transform: uppercase; + text-align: center; + z-index: 2; } } } diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss index 8179f7f6f3..9c480a3a1f 100644 --- a/lms/static/sass/_index.scss +++ b/lms/static/sass/_index.scss @@ -1,151 +1,150 @@ .home { - margin: 30px 10px 100px; + margin: 50px 10px 100px; > header { - height: 430px; - margin-bottom: 60px; - overflow: hidden; + @include clearfix; + min-height: 335px; + margin-bottom: 40px; position: relative; - - h1 { - @extend .animation-title-appear; - color: $lighter-base-font-color; - font: normal 2.4rem/3rem $sans-serif; - letter-spacing: 1px; - position: relative; - text-align: center; - text-transform: uppercase; - } - - .orginizations { - @extend .animation-home-appear; - height: 200px; - margin: 0 auto; - position: relative; - width: 680px; - - > div { - @include inline-block; - vertical-align: middle; - } - - .orginization { - position: absolute; - top: 20px; - width: 200px; - - &.mit { - @extend .animation-mit-slide; - z-index: 3; - } - - &.edx { - @extend .animation-edx-appear; - left: 240px; - z-index: 2; - } - - &.harvard { - @extend .animation-harvard-slide; - z-index: 3; - } - - img { - max-width: 100%; - } - } - - .divider { - @extend .faded-vertical-divider; - position: absolute; - top: 0px; - z-index: 4; - - &.left { - @extend .animation-divider-left-slide; - } - - &.right { - @extend .animation-divider-right-slide; - } - } - } + width: flex-grid(12); .video-wrapper { - @extend .animation-video-appear; - height: 370px; + right: 0px; position: absolute; - width: 100%; + top: 0px; .video-player { background: rgb(45,45,45); - @include border-top-radius(4px); - @include box-shadow(0 0 12px 0 rgba(0,0,0, 0.3)); - height: 360px; - margin: 0 auto; - padding: 10px 10px 0px 10px; - width: 640px; + border: 1px solid rgb(0,0,0); + @include border-radius(4px); + height: 315px; + padding: 5px; + width: 560px; + + &:hover { + @include box-shadow(0 0 12px 0 rgba(0,0,0, 0.3)); + } .video-inner { - background: rgb(235,235,235); - height: 360px; + background: transparent; + height: 315px; margin: 0 auto; - width: 640px; + width: 560px; } } } - .bottom-divider { - @extend .faded-hr-divider; - bottom: 0px; - position: absolute; - } - } - - .welcome { - border-right: 1px solid rgb(200,200,200); - font-size: 0em; - margin-bottom: 80px; - - h2 { - color: $lighter-base-font-color; - font: normal 1.2rem/1.8rem $serif; - letter-spacing: 1px; - margin-bottom: 20px; - text-transform: uppercase; - } - - .intro { - border-right: 1px solid rgb(200,200,200); + .welcome { @include box-sizing(border-box); - @include inline-block; - margin-right: flex-gutter(); - width: flex-grid(8); - vertical-align: middle; - padding-right: flex-gutter(); + float: left; + font-size: 0em; + width: flex-grid(12); + padding-right: 600px; + padding-top: 20px; - p { - color: $base-font-color; - @include inline-block; - margin: 0px; + h1 { + color: $lighter-base-font-color; + font: normal 2.4rem/3rem $sans-serif; + letter-spacing: 1px; + margin-bottom: 20px; + position: relative; + text-align: center; + text-transform: uppercase; + } + + .intro { + @include box-sizing(border-box); + margin-bottom: 40px; width: flex-grid(12); - vertical-align: top; + + p { + color: $base-font-color; + margin: 0px; + text-align: center; + width: flex-grid(12); + } + } + + .signup-wrapper { + @include box-sizing(border-box); + margin: 0 auto; + width: flex-grid(10); + + .sign-up { + background: rgb(240,240,240); + @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); + border: 1px solid rgb(220,220,220); + @include border-radius(4px); + @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); + @include box-sizing(border-box); + font-size: 0em; + padding: 12px; + @include transition(all, 0.15s, linear); + width: flex-grid(12); + + &:hover { + @include box-shadow(0 0 16px 0 rgba($blue, 0.35)); + } + + a { + @include button(shiny, $pink); + @include box-sizing(border-box); + @include border-radius(3px); + @include inline-block; + font: normal italic 1.2rem/1.6rem $serif; + padding: 15px 0px; + text-transform: uppercase; + text-align: center; + width: flex-grid(6); + + &:first-child { + margin-right: flex-gutter(); + } + + &.find-courses { + @include button(shiny, $blue); + @include box-sizing(border-box); + @include border-radius(3px); + @include inline-block; + font: normal italic 1.2rem/1.6rem $serif; + padding: 15px 0px; + } + } + + form { + input[type="text"], + input[type="email"], + input[type="password"] { + height: 45px; + margin-right: flex-gutter(); + width: flex-grid(3); + + &:last-child { + margin-right: 0px; + } + } + + input[type="submit"] { + height: 45px; + width: flex-grid(3); + } + } + + h3 { + color: $base-font-color; + font: normal 1.6rem/2rem $sans-serif; + text-align: center; + } + } } } - - .signup-wrapper { - @include box-sizing(border-box); - @include inline-block; - padding-right: flex-gutter(); - width: flex-grid(4); - vertical-align: middle; - } } + .university-partners { @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0))); margin-bottom: 60px; - padding-top: 5px; + padding: 10px 0px; position: relative; width: flex-grid(12); @@ -168,17 +167,35 @@ .partners { font-size: 0em; margin: 0 auto; - opacity: 0.7; - width: flex-grid(6); + width: 420px; - img { + a { @include inline-block; - margin-right: flex-gutter(); - max-width: flex-grid(4); + margin-right: 40px; + opacity: 0.7; &:last-child { margin-right: 0px; } + + &:hover { + opacity: 0.9; + } + } + + .name { + @include inline-block; + color: $base-font-color; + font: 800 italic 2rem/2.2rem $sans-serif; + text-align: center; + text-shadow: 0 1px rgba(255,255,255, 0.6); + vertical-align: middle; + } + + img { + @include inline-block; + max-width: 100px; + vertical-align: middle; } } } @@ -190,23 +207,11 @@ margin-bottom: 40px; width: flex-grid(12); - > article.course { - background: rgb(240,240,240); - border: 1px solid rgb(220,220,220); - @include border-radius(4px); + .course { @include box-sizing(border-box); float: left; - font-size: 0em; - min-height: 0px; - margin-bottom: 20px; - padding: 10px; - @include transition(all, 0.15s, linear); width: flex-grid(6); - &:last-child { - margin-bottom: none; - } - @media only screen and (max-width: 768px) { float: none; margin-right: 0px; @@ -216,195 +221,9 @@ &:nth-child(odd) { margin-right: flex-gutter(); } - - > a { - @include clearfix; - display: block; - position: relative; - } - - .cover { - background: rgb(225,225,225); - border: 1px solid rgb(150,150,150); - @include border-radius(4px); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - float: left; - height: 50px; - margin: 0px; - opacity: 0.8; - overflow: hidden; - position: relative; - @include transition(all, 0.15s, linear); - width: 100px; - - @media only screen and (max-width: 320px) { - display: none; - } - - .shade { - background: rgba(0,0,0, 0.3); - @include border-radius(4px); - bottom: 0px; - content: ""; - display: block; - left: 0px; - opacity: 0; - position: absolute; - top: 0px; - @include transition(all, 0.15s, linear); - right: 0px; - } - - .arrow { - border-top: 1px solid; - border-left: 1px solid; - border-color: rgb(255,255,255); - @include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6)); - content: ""; - display: block; - height: 55px; - left: 40px; - opacity: 0; - position: absolute; - top: 23px; - @include transform(rotate(-45deg)); - @include transition(all, 0.15s, linear); - width: 55px; - } - - img { - @include border-radius(4px); - display: block; - min-height: 100%; - min-width: 100%; - width: 100%; - } - } - - .info { - margin-left: 115px; - - @media only screen and (max-width: 320px) { - margin: 0px; - } - - > hgroup { - margin-right: 80px; - - @media only screen and (max-width: 320px) { - margin: 0px; - } - - h2 { - font: bold 1.8rem/2.5rem $sans-serif; - margin-bottom: 2px; - overflow: hidden; - text-shadow: 0 1px rgba(255,255,255, 0.6); - @include transition(color, 0.15s, linear); - text-overflow: ellipsis; - white-space: nowrap; - } - - p { - color: $base-font-color; - font: normal 1rem/1.6rem $sans-serif; - overflow: hidden; - text-shadow: 0 1px rgba(255,255,255, 0.6); - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .edit, .register { - border: 1px solid rgb(220,220,220); - background: rgb(230,230,230); - color: $lighter-base-font-color; - display: block; - font: normal 12px/14px $sans-serif; - padding: 6px 10px; - position: absolute; - right: 0px; - top: 0px; - @include transition(all, 0.15s, linear); - - @media only screen and (max-width: 320px) { - display: none; - } - - &:hover { - background: rgb(255,255,255); - color: $blue; - } - } - } - - &:hover { - background: rgb(245,245,245); - @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2)); - cursor: pointer; - - .cover { - opacity: 1; - - .shade, .arrow { - opacity: 1; - } - } - } } } - .sign-up { - background: rgb(240,240,240); - border: 1px solid rgb(220,220,220); - @include border-radius(4px); - @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); - @include box-sizing(border-box); - padding: 20px; - width: flex-grid(12); - - h3 { - color: $base-font-color; - font: normal 1.6rem/2rem $sans-serif; - text-align: center; - } - - &.top { - @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); - @include box-sizing(border-box); - width: flex-grid(12); - - a { - @include button(shiny, $pink); - @include border-radius(3px); - //@include box-sizing(border-box); - display: block; - font: normal italic 1.2rem/1.6rem $serif; - margin: 0 auto 0; - padding: 15px 0px; - text-transform: uppercase; - text-align: center; - width: flex-grid(12); - } - } - - &.middle { - @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); - @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); - margin-bottom: 60px; - padding: 15px 20px; - @include transition(all, 0.15s, linear); - - &:hover { - @include box-shadow(0 0 16px 0 rgba($blue, 0.35)); - } - - form { - input[type="submit"] { - } - } - } - } .more-info { margin-bottom: 60px; @@ -415,13 +234,25 @@ color: $lighter-base-font-color; font: normal 1.4rem/1.8rem $serif; letter-spacing: 1px; - margin-bottom: 20px; + margin-bottom: 30px; padding-bottom: 10px; } .news { - background: rgb(240,240,240); - height: 300px; + font-size: 0em; + width: flex-grid(12); + + > article { + background: rgb(240,240,240); + @include inline-block; + height: 300px; + margin-right: flex-gutter(); + width: flex-grid(4); + + &:last-child { + margin-right: 0px; + } + } } } diff --git a/lms/static/sass/_shared_course_filter.scss b/lms/static/sass/_shared_course_filter.scss new file mode 100644 index 0000000000..dca1ec542d --- /dev/null +++ b/lms/static/sass/_shared_course_filter.scss @@ -0,0 +1,99 @@ +.filter { + height: 60px; + + nav { + @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); + @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4)); + @include box-sizing(border-box); + border: 1px solid rgb(200,200,200); + border-top: none; + @include border-bottom-radius(4px); + @include clearfix; + height: 60px; + padding: 12px 10px; + position: relative; + z-index: 9; + + &.fixed-top { + @include box-shadow(0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4)); + max-width: 1200px; + position: fixed; + top: 0px; + width: flex-grid(12); + } + + .dropdown { + float: left; + margin-right: 15px; + position: relative; + + .filter-heading { + @include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%)); + @include border-radius(4px); + @include box-sizing(border-box); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6)); + border: 1px solid rgb(200,200,200); + color: $lighter-base-font-color; + cursor: pointer; + font: normal 1.2rem/1.8rem $sans-serif; + height: 36px; + padding: 6px; + position: relative; + text-align: center; + text-shadow: 0 1px rgba(255,255,255, 0.8); + width: 150px; + z-index: 11; + } + + ul { + background: rgb(255,255,255); + @include border-radius(0px 4px 4px 4px); + border: 1px solid rgb(200,200,200); + @include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2)); + padding: 10px; + position: absolute; + visibility: hidden; + width: 200px; + z-index: 10; + + li { + list-style: none; + + a { + } + } + } + + &:hover { + .filter-heading { + background: rgb(255,255,255); + @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255))); + @include border-radius(4px 4px 0px 0px); + border-bottom: none; + @include box-shadow(0 2px 0 -1px rgb(255,255,255)); + color: $base-font-color; + height: 40px; + } + + ul { + visibility: visible; + } + } + } + + form.search { + float: right; + + input[type="text"] { + @include border-radius(3px 0px 0px 3px); + height: 36px; + width: 200px; + } + + input[type="submit"] { + @include border-radius(0px 3px 3px 0px); + height: 36px; + } + } + } +} diff --git a/lms/static/sass/_shared_footer.scss b/lms/static/sass/_shared_footer.scss index e49610281a..81cc64ecf3 100644 --- a/lms/static/sass/_shared_footer.scss +++ b/lms/static/sass/_shared_footer.scss @@ -1,9 +1,13 @@ footer { background: rgb(240,240,240); - height: 100px; - padding: 20px 0px; + padding: 20px 0px 0px; width: flex-grid(12); + &.fixed-bottom { + position: absolute; + bottom: 0px; + } + nav { @include clearfix; max-width: 1200px; @@ -15,29 +19,71 @@ footer { display: block; float: left; height: 100%; - margin: 0px 15px 0px 0px; + margin: 3px 15px 0px 0px; } ol { - float: right; + float: left; font-size: 0em; - margin-top: 3px; + margin-top: 6px; - li { - border-right: 1px solid rgb(200,200,200); - @include inline-block; - list-style: none; + &.right { + float: right; - &:last-child { + li:first-child { border: none; } + } + + &.social { + float: right; + margin: 0px 30px 0px 0px; + + li { + border: none; + padding: 0px 5px; + + a:hover { + opacity: 0.7; + } + } + } + + li { + border-left: 1px solid rgb(200,200,200); + @include inline-block; + list-style: none; + padding: 0px 15px; a:link, a:visited { color: $lighter-base-font-color; - font: normal 1rem/1.6rem $serif; - padding: 5px 15px; + font: normal 1.2rem/1.6rem $serif; + padding: 5px 0px; } } } } + + .copyright { + background: rgb(230,230,230); + height: 50px; + margin-top: 80px; + width: 100%; + + p { + color: $lighter-base-font-color; + font: normal 1rem/1.6rem $sans-serif; + margin: 0 auto; + padding-top: 15px; + //text-align: center; + max-width: 1200px; + + a { + border-bottom: 1px solid rgb(200,200,200); + color: $lighter-base-font-color; + font: normal 1rem/1.6rem $sans-serif; + margin-left: 5px; + } + } + } } diff --git a/lms/static/sass/_shared_forms.scss b/lms/static/sass/_shared_forms.scss index 94cec398de..42af7ceb98 100644 --- a/lms/static/sass/_shared_forms.scss +++ b/lms/static/sass/_shared_forms.scss @@ -10,11 +10,10 @@ form { @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1)); @include box-sizing(border-box); font: normal italic 1.2rem/1.6rem $serif; - height: 45px; + height: 35px; @include inline-block; - margin-right: flex-gutter(); padding: 5px 12px; - width: flex-grid(3); + vertical-align: top; &:last-child { margin-right: 0px; @@ -31,9 +30,9 @@ form { @include button(shiny, $pink); @include border-radius(3px); font: normal italic 1.2rem/1.6rem $serif; - height: 45px; + height: 35px; @include inline-block; text-transform: uppercase; - width: flex-grid(3); + vertical-align: top; } } diff --git a/lms/static/sass/_shared_header.scss b/lms/static/sass/_shared_header.scss index 3aa741c14c..879f734993 100644 --- a/lms/static/sass/_shared_header.scss +++ b/lms/static/sass/_shared_header.scss @@ -4,7 +4,7 @@ header.app { height: 55px; width: 100%; - nav { + .wrapper { @include clearfix; @include box-sizing(border-box); max-width: 1200px; @@ -18,186 +18,236 @@ header.app { display: block; float: left; height: 100%; - margin: 15px 15px 0px 0px; - } + margin: 16px 30px 0px 0px; + position: relative; - h1 { - border-left: 1px solid rgb(200,200,200); - font: bold 1rem/1.2rem $sans-serif; - float: left; - height: 15px; - margin-top: 10px; - padding: 10px 18px; - } - - ol { - float: left; - font-size: 0em; - - &.user { - float: right; + &::after { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 50px; + position: absolute; + right: -15px; + top: -12px; } + } - &.secondary { - > li { - border: none; + a.discover-courses { + @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); + border: 1px solid rgb(200,200,200); + @include border-radius(3px); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + color: $base-font-color; + display: block; + float: left; + font: normal 1rem/1.2rem $sans-serif; + height: 15px; + margin-top: 12px; + padding: 8px 10px; + text-decoration: none; + text-transform: uppercase; + text-shadow: 0 1px rgba(255,255,255, 0.6); + + &:hover { + } + } + + nav.guest { + float: right; + + ol { + font-size: 0em; + + li { + @include inline-block; + margin-top: 12px; + padding: 0px 5px; + position: relative; + vertical-align: bottom; &:last-child { - border-right: none; + padding-right: 0px; } a { - font: normal italic 1rem/1.2rem $serif; + @include border-radius(3px); + border: 1px solid transparent; + color: $base-font-color; + display: block; + font: normal italic 1.2rem/1.2rem $serif; + height: 15px; + padding: 8px; + text-decoration: none; text-transform: lowercase; + text-shadow: 0 1px rgba(255,255,255, 0.6); + + &:hover { + background: rgb(220,220,220); + @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); + border-color: rgb(200,200,200); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + color: $base-font-color; + } } } } + } - > li { - border-left: 1px solid rgb(200,200,200); - @include inline-block; - margin-top: 10px; - padding: 0px 8px; - position: relative; - vertical-align: bottom; + nav.user { + float: right; - &:last-child { + ol { + font-size: 0em; + + li { border-right: 1px solid rgb(200,200,200); - } + @include inline-block; + margin-top: 10px; + padding: 0px 5px; + position: relative; + vertical-align: bottom; - a { - @include border-radius(3px); - color: $lighter-base-font-color; - display: block; - font: normal 1rem/1.2rem $sans-serif; - height: 15px; - padding: 10px; - text-decoration: none; - text-transform: uppercase; - text-shadow: 0 1px rgba(255,255,255, 0.4); + a { + @include border-radius(3px); + color: $lighter-base-font-color; + display: block; + font: normal italic 1.2rem/1.2rem $serif; + height: 15px; + padding: 10px; + text-decoration: none; + text-transform: lowercase; + text-shadow: 0 1px rgba(255,255,255, 0.4); - &.user-dashboard { - padding: 10px 10px 10px 40px; - - @media screen and (max-width: 768px) { - font-size: 0em; - padding: 10px 0px; - width: 38px; - } - - .avatar { + &:hover { background: rgb(220,220,220); - @include border-radius(3px); - border: 1px solid rgb(180,180,180); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - height: 22px; - @include inline-block; - left: 15px; - overflow: hidden; - position: absolute; - top: 5px; - width: 22px; + color: $base-font-color; + } - &::after { - @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%)); - content: ""; - display: block; - height: 100%; + &.active { + background: rgb(220,220,220); + color: $base-font-color; + } + + &.options { + font: normal 1.2rem/1.2rem $sans-serif; + padding-right: 10px; + text-transform: none; + } + + &.user-link { + font: normal 1.2rem/1.2rem $sans-serif; + padding: 10px 10px 10px 45px; + text-transform: none; + + @media screen and (max-width: 768px) { + font-size: 0em; + padding: 10px 0px; + width: 38px; + } + + .avatar { + background: rgb(220,220,220); + @include border-radius(3px); + border: 1px solid rgb(180,180,180); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + height: 22px; + @include inline-block; + left: 15px; + overflow: hidden; position: absolute; - right: 0px; - top: 0px; - width: 100%; - } + top: 5px; + width: 22px; - img { - @include border-radius(4px); - display: block; - min-height: 100%; - min-width: 100%; - height: 100%; + &::after { + @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%)); + content: ""; + display: block; + height: 100%; + position: absolute; + right: 0px; + top: 0px; + width: 100%; + } + + img { + @include border-radius(4px); + display: block; + min-height: 100%; + min-width: 100%; + height: 100%; + } } } } - - &:hover { + ol.user-options { + @include border-radius(4px); + @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); + border: 1px solid rgb(200,200,200); background: rgb(220,220,220); - color: $base-font-color; - } - - &.active { - background: rgb(220,220,220); - color: $base-font-color; - } - } - - ol.user-options { - @include border-radius(4px); - @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); - border: 1px solid rgb(200,200,200); - background: rgb(220,220,220); - display: none; - right: 4px; - padding: 5px 10px; - position: absolute; - top: 50px; - width: 170px; - z-index: 3; - - &.expanded { - display: block; - } - - &::before { - background: transparent; - border: { - top: 8px solid rgb(220,220,220); - right: 8px solid rgb(220,220,220); - bottom: 8px solid transparent; - left: 8px solid transparent; - } - @include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200)); - content: ""; - display: block; - height: 0px; + display: none; + right: 4px; + padding: 5px 10px; position: absolute; - @include transform(rotate(-45deg)); - right: 10px; - top: -7px; - width: 0px; - } + top: 50px; + width: 170px; + z-index: 3; - li { - border: { - top: 1px solid rgb(200,200,200); - right: none; - bottom: none; - left: none; - } - margin: 0px; - padding: 0px; - width: 100%; - - &:first-child { - border: none; - } - - a { - @include box-sizing(border-box); + &.expanded { display: block; - font: normal 1rem/1.2rem $sans-serif; - height: auto; - margin: 5px 0px; - overflow: hidden; - padding: 5px; - text-overflow: ellipsis; - @include transition(padding, 0.1s, linear); - white-space: nowrap; + } + + &::before { + background: transparent; + border: { + top: 8px solid rgb(220,220,220); + right: 8px solid rgb(220,220,220); + bottom: 8px solid transparent; + left: 8px solid transparent; + } + @include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200)); + content: ""; + display: block; + height: 0px; + position: absolute; + @include transform(rotate(-45deg)); + right: 10px; + top: -7px; + width: 0px; + } + + li { + border: { + top: 1px solid rgb(200,200,200); + right: none; + bottom: none; + left: none; + } + margin: 0px; + padding: 0px; width: 100%; - &:hover { - background: rgb(255,255,255); - padding: 5px 8px; + &:first-child { + border: none; + } + + a { + @include box-sizing(border-box); + display: block; + font: normal 1rem/1.2rem $sans-serif; + height: auto; + margin: 5px 0px; + overflow: hidden; + padding: 5px; + text-overflow: ellipsis; + @include transition(padding, 0.1s, linear); + white-space: nowrap; + width: 100%; + + &:hover { + background: rgb(255,255,255); + padding: 5px 8px; + } } } } diff --git a/lms/static/sass/_shared_list_of_courses.scss b/lms/static/sass/_shared_list_of_courses.scss new file mode 100644 index 0000000000..5e630828cc --- /dev/null +++ b/lms/static/sass/_shared_list_of_courses.scss @@ -0,0 +1,293 @@ +.courses { + @include box-sizing(border-box); + @include clearfix; + margin: 40px 0px; + padding: 0px 10px; + width: flex-grid(12); + + .course { + background: rgb(240,240,240); + border: 1px solid rgb(220,220,220); + @include border-radius(4px); + @include box-sizing(border-box); + float: left; + font-size: 0em; + min-height: 100px; + margin-bottom: 25px; + padding: 10px; + width: flex-grid(6); + @include transition(all, 0.15s, linear); + + @media only screen and (max-width: 768px) { + float: none; + margin-right: 0px; + width: flex-grid(12); + } + + &:nth-child(odd) { + margin-right: flex-gutter(); + } + + &:last-child { + margin-bottom: none; + } + + > a { + @include clearfix; + display: block; + position: relative; + } + + .cover { + background: rgb(225,225,225); + border: 1px solid rgb(150,150,150); + @include border-radius(4px); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + float: left; + height: 100px; + margin: 0px; + opacity: 0.8; + overflow: hidden; + position: relative; + @include transition(all, 0.15s, linear); + width: 100px; + + @media only screen and (max-width: 320px) { + display: none; + } + + .shade { + background: rgba(0,0,0, 0.3); + @include border-radius(4px); + bottom: 0px; + content: ""; + display: block; + left: 0px; + opacity: 0; + position: absolute; + top: 0px; + @include transition(all, 0.15s, linear); + right: 0px; + } + + .arrow { + border-top: 1px solid; + border-left: 1px solid; + border-color: rgb(255,255,255); + @include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6)); + content: ""; + display: block; + height: 55px; + left: 40px; + opacity: 0; + position: absolute; + top: 23px; + @include transform(rotate(-45deg)); + @include transition(all, 0.15s, linear); + width: 55px; + } + + img { + @include border-radius(4px); + display: block; + min-height: 100%; + min-width: 100%; + width: 100%; + } + } + + .info { + margin-left: 115px; + + @media only screen and (max-width: 320px) { + margin: 0px; + } + + > hgroup { + margin-right: 80px; + + @media only screen and (max-width: 320px) { + margin: 0px; + } + + h2 { + font: bold 1.8rem/2.5rem $sans-serif; + margin-bottom: 2px; + overflow: hidden; + text-shadow: 0 1px rgba(255,255,255, 0.6); + @include transition(color, 0.15s, linear); + text-overflow: ellipsis; + white-space: nowrap; + } + + p { + color: $base-font-color; + font: normal 1rem/1.6rem $sans-serif; + overflow: hidden; + text-shadow: 0 1px rgba(255,255,255, 0.6); + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .edit, .register { + border: 1px solid rgb(220,220,220); + background: rgb(230,230,230); + color: $lighter-base-font-color; + display: block; + font: normal 12px/14px $sans-serif; + padding: 6px 10px; + position: absolute; + right: 0px; + top: 0px; + @include transition(all, 0.15s, linear); + + @media only screen and (max-width: 320px) { + display: none; + } + + &:hover { + background: rgb(255,255,255); + color: $blue; + } + } + + .meta { + border-top: 1px solid rgb(200,200,200); + @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6)); + font-size: 1rem; + height: 34px; + margin-top: 10px; + opacity: 0.9; + position: relative; + @include transition(opacity, 0.15s, linear); + width: 100%; + + &:hover { + opacity: 0.9; + } + + > * { + height: 18px; + position: absolute; + top: 15px; + } + + p + p { + margin-top: 0px; + } + + .complete { + left: 0px; + + p { + font: normal 1rem/1.6rem $serif; + + span { + color: $base-font-color; + font-family: $sans-serif; + margin-left: 3px; + } + } + } + + .dates { + p { + color: $lighter-base-font-color; + font: normal 1rem/1.6rem $serif; + @include inline-block; + text-align: right; + + &:first-child { + border-right: 1px solid rgb(200,200,200); + margin-right: 10px; + padding-right: 10px; + } + + time { + color: $base-font-color; + font-family: $sans-serif; + margin-left: 3px; + } + } + } + + .end-date { + border-left: 1px solid rgb(200,200,200); + right: 0px; + padding-left: 15px; + + @media only screen and (max-width: 320px) { + display: none; + } + + p { + color: $lighter-base-font-color; + font: normal 1rem/1.6rem $serif; + text-align: right; + + time { + color: $base-font-color; + font-family: $sans-serif; + margin-left: 3px; + } + } + } + + .progress { + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + left: 90px; + right: 140px; + + @media only screen and (max-width: 320px) { + right: 0px; + } + + .meter { + background: rgb(230,230,230); + border: 1px solid rgb(200,200,200); + @include border-radius(3px); + @include box-sizing(border-box); + height: 100%; + padding: 2px; + + .meter-fill { + @include border-radius(3px); + background: rgb(210,210,210); + height: 100%; + width: 60%; + } + } + } + } + } + + &:hover { + background: rgb(245,245,245); + @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2)); + cursor: pointer; + + .edit { + background: rgb(220,220,220); + border-color: rgb(190,190,190); + } + + .cover { + opacity: 1; + + .shade, .arrow { + opacity: 1; + } + } + + h2 { + //color: $blue; + //text-decoration: underline; + } + + .meta { + opacity: 0.9; + } + } + } +} diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css index eb9f8b5301..f045dcb3cf 100755 --- a/lms/static/sass/application.css +++ b/lms/static/sass/application.css @@ -307,9 +307,7 @@ td { page-break-after: avoid; } } html, body { background: white; - font-size: 75%; - min-height: 100%; - margin: 0px 0px -140px 0px; } + font-size: 75%; } h1, h2, h3, h4, h5, h6 { color: #3c3c3c; @@ -342,7 +340,7 @@ a:link, a:visited { .container:after { clear: both; } -.faded-hr-divider, .home > header .bottom-divider, .home .university-partners:before, .home .university-partners:after { +.faded-hr-divider, .home .university-partners:before, .home .university-partners:after { background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0)); @@ -351,7 +349,7 @@ a:link, a:visited { height: 1px; width: 100%; } -.faded-vertical-divider, .home > header .orginizations .divider, .find-courses > header .universities span.divider { +.faded-vertical-divider, header.app a.logo::after { background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0)); @@ -360,265 +358,7 @@ a:link, a:visited { height: 100%; width: 1px; } -article.course { - background: #f0f0f0; - border: 1px solid #dcdcdc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - font-size: 0em; - min-height: 100px; - margin-bottom: 20px; - padding: 10px; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; } - article.course:last-child { - margin-bottom: none; } - article.course > a { - zoom: 1; - display: block; - position: relative; } - article.course > a:before, article.course > a:after { - content: ""; - display: table; } - article.course > a:after { - clear: both; } - article.course .cover { - background: #e1e1e1; - border: 1px solid #969696; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - float: left; - height: 100px; - margin: 0px; - opacity: 0.8; - overflow: hidden; - position: relative; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; - width: 100px; } - @media only screen and (max-width: 320px) { - article.course .cover { - display: none; } } - article.course .cover .shade { - background: rgba(0, 0, 0, 0.3); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - bottom: 0px; - content: ""; - display: block; - left: 0px; - opacity: 0; - position: absolute; - top: 0px; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; - right: 0px; } - article.course .cover .arrow { - border-top: 1px solid; - border-left: 1px solid; - border-color: white; - -webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); - content: ""; - display: block; - height: 55px; - left: 40px; - opacity: 0; - position: absolute; - top: 23px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; - width: 55px; } - article.course .cover img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - width: 100%; } - article.course .info { - margin-left: 115px; } - @media only screen and (max-width: 320px) { - article.course .info { - margin: 0px; } } - article.course .info > hgroup { - margin-right: 80px; } - @media only screen and (max-width: 320px) { - article.course .info > hgroup { - margin: 0px; } } - article.course .info > hgroup h2 { - font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif; - margin-bottom: 2px; - overflow: hidden; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); - -webkit-transition: color, 0.15s, linear; - -moz-transition: color, 0.15s, linear; - -ms-transition: color, 0.15s, linear; - -o-transition: color, 0.15s, linear; - transition: color, 0.15s, linear; - text-overflow: ellipsis; - white-space: nowrap; } - article.course .info > hgroup p { - color: #3c3c3c; - font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; - overflow: hidden; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); - text-overflow: ellipsis; - white-space: nowrap; } - article.course .info .edit, article.course .info .register { - border: 1px solid #dcdcdc; - background: #e6e6e6; - color: #a0a0a0; - display: block; - font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; - padding: 6px 10px; - position: absolute; - right: 0px; - top: 0px; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; } - @media only screen and (max-width: 320px) { - article.course .info .edit, article.course .info .register { - display: none; } } - article.course .info .edit:hover, article.course .info .register:hover { - background: white; - color: #1d9dd9; } - article.course .info .meta { - border-top: 1px solid #c8c8c8; - -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); - font-size: 1rem; - height: 34px; - margin-top: 10px; - opacity: 0.9; - position: relative; - -webkit-transition: opacity, 0.15s, linear; - -moz-transition: opacity, 0.15s, linear; - -ms-transition: opacity, 0.15s, linear; - -o-transition: opacity, 0.15s, linear; - transition: opacity, 0.15s, linear; - width: 100%; } - article.course .info .meta:hover { - opacity: 0.9; } - article.course .info .meta > * { - height: 18px; - position: absolute; - top: 15px; } - article.course .info .meta p + p { - margin-top: 0px; } - article.course .info .meta .complete { - left: 0px; } - article.course .info .meta .complete p { - font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; } - article.course .info .meta .complete p span { - color: #3c3c3c; - font-family: "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 3px; } - article.course .info .meta .dates p { - color: #a0a0a0; - font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - text-align: right; } - article.course .info .meta .dates p:first-child { - border-right: 1px solid #c8c8c8; - margin-right: 10px; - padding-right: 10px; } - article.course .info .meta .dates p time { - color: #3c3c3c; - font-family: "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 3px; } - article.course .info .meta .end-date { - border-left: 1px solid #c8c8c8; - right: 0px; - padding-left: 15px; } - @media only screen and (max-width: 320px) { - article.course .info .meta .end-date { - display: none; } } - article.course .info .meta .end-date p { - color: #a0a0a0; - font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - text-align: right; } - article.course .info .meta .end-date p time { - color: #3c3c3c; - font-family: "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 3px; } - article.course .info .meta .progress { - -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - left: 90px; - right: 140px; } - @media only screen and (max-width: 320px) { - article.course .info .meta .progress { - right: 0px; } } - article.course .info .meta .progress .meter { - background: #e6e6e6; - border: 1px solid #c8c8c8; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - height: 100%; - padding: 2px; } - article.course .info .meta .progress .meter .meter-fill { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - background: #d2d2d2; - height: 100%; - width: 60%; } - article.course:hover { - background: #f5f5f5; - -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - cursor: pointer; } - article.course:hover .edit { - background: #dcdcdc; - border-color: #bebebe; } - article.course:hover .cover { - opacity: 1; } - article.course:hover .cover .shade, article.course:hover .cover .arrow { - opacity: 1; } - article.course:hover .meta { - opacity: 0.9; } - -.animation-title-appear, .home > header h1 { +.animation-title-appear { -webkit-animation: title-appear 4.65s ease-out; -moz-animation: title-appear 4.65s ease-out; animation: title-appear 4.65s ease-out; @@ -728,7 +468,7 @@ article.course { 100% { top: 0px; } } -.animation-home-appear, .home > header .orginizations { +.animation-home-appear { -webkit-animation: home-appear 4.25s ease-out; -moz-animation: home-appear 4.25s ease-out; animation: home-appear 4.25s ease-out; @@ -856,7 +596,7 @@ article.course { -o-transform: scale(0.7); transform: scale(0.7); } } -.animation-edx-appear, .home > header .orginizations .orginization.edx { +.animation-edx-appear { -webkit-animation: edx-appear 1.25s ease-in; -moz-animation: edx-appear 1.25s ease-in; animation: edx-appear 1.25s ease-in; @@ -888,7 +628,7 @@ article.course { 100% { opacity: 1; } } -.animation-mit-slide, .home > header .orginizations .orginization.mit { +.animation-mit-slide { -webkit-animation: mit-slide 1.15s ease-out; -moz-animation: mit-slide 1.15s ease-out; animation: mit-slide 1.15s ease-out; @@ -920,7 +660,7 @@ article.course { 100% { left: 0px; } } -.animation-harvard-slide, .home > header .orginizations .orginization.harvard { +.animation-harvard-slide { -webkit-animation: harvard-slide 1.15s ease-out; -moz-animation: harvard-slide 1.15s ease-out; animation: harvard-slide 1.15s ease-out; @@ -952,7 +692,7 @@ article.course { 100% { right: 0px; } } -.animation-divider-left-slide, .home > header .orginizations .divider.left { +.animation-divider-left-slide { -webkit-animation: divider-left-slide 1.1s ease-out; -moz-animation: divider-left-slide 1.1s ease-out; animation: divider-left-slide 1.1s ease-out; @@ -984,7 +724,7 @@ article.course { 100% { left: 200px; } } -.animation-divider-right-slide, .home > header .orginizations .divider.right { +.animation-divider-right-slide { -webkit-animation: divider-right-slide 1.1s ease-out; -moz-animation: divider-right-slide 1.1s ease-out; animation: divider-right-slide 1.1s ease-out; @@ -1016,7 +756,7 @@ article.course { 100% { left: 480px; } } -.animation-video-appear, .home > header .video-wrapper { +.animation-video-appear { -webkit-animation: video-appear 1.25s ease-out; -moz-animation: video-appear 1.25s ease-out; animation: video-appear 1.25s ease-out; @@ -1077,15 +817,14 @@ form { -moz-box-sizing: border-box; box-sizing: border-box; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - height: 45px; + height: 35px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; - margin-right: 2.513%; padding: 5px 12px; - width: 23.116%; } + vertical-align: top; } form input[type="text"]:last-child, form input[type="email"]:last-child, form input[type="password"]:last-child { @@ -1126,14 +865,14 @@ form { -moz-border-radius: 3px; border-radius: 3px; font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - height: 45px; + height: 35px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; text-transform: uppercase; - width: 23.116%; } + vertical-align: top; } form input[type="submit"]:hover:not(:disabled) { cursor: pointer; background-color: #a91656; @@ -1153,9 +892,11 @@ form { footer { background: #f0f0f0; - height: 100px; - padding: 20px 0px; + padding: 20px 0px 0px; width: 100%; } + footer.fixed-bottom { + position: absolute; + bottom: 0px; } footer nav { zoom: 1; max-width: 1200px; @@ -1173,25 +914,52 @@ footer { display: block; float: left; height: 100%; - margin: 0px 15px 0px 0px; } + margin: 3px 15px 0px 0px; } footer nav ol { - float: right; + float: left; font-size: 0em; - margin-top: 3px; } + margin-top: 6px; } + footer nav ol.right { + float: right; } + footer nav ol.right li:first-child { + border: none; } + footer nav ol.social { + float: right; + margin: 0px 30px 0px 0px; } + footer nav ol.social li { + border: none; + padding: 0px 5px; } + footer nav ol.social li a:hover { + opacity: 0.7; } footer nav ol li { - border-right: 1px solid #c8c8c8; + border-left: 1px solid #c8c8c8; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; - list-style: none; } - footer nav ol li:last-child { - border: none; } + list-style: none; + padding: 0px 15px; } footer nav ol li a:link, footer nav ol li a:visited { color: #a0a0a0; - font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - padding: 5px 15px; } + font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + padding: 5px 0px; } + footer .copyright { + background: #e6e6e6; + height: 50px; + margin-top: 80px; + width: 100%; } + footer .copyright p { + color: #a0a0a0; + font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + margin: 0 auto; + padding-top: 15px; + max-width: 1200px; } + footer .copyright p a { + border-bottom: 1px solid #c8c8c8; + color: #a0a0a0; + font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + margin-left: 5px; } header.app { border-bottom: 1px solid #c8c8c8; @@ -1202,7 +970,7 @@ header.app { background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6); height: 55px; width: 100%; } - header.app nav { + header.app .wrapper { zoom: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -1211,10 +979,10 @@ header.app { margin: 0 auto; padding: 0px 10px; width: 100%; } - header.app nav:before, header.app nav:after { + header.app .wrapper:before, header.app .wrapper:after { content: ""; display: table; } - header.app nav:after { + header.app .wrapper:after { clear: both; } header.app a.logo { -webkit-box-sizing: border-box; @@ -1223,294 +991,865 @@ header.app { display: block; float: left; height: 100%; - margin: 15px 15px 0px 0px; } - header.app h1 { - border-left: 1px solid #c8c8c8; - font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; + margin: 16px 30px 0px 0px; + position: relative; } + header.app a.logo::after { + content: ""; + display: block; + height: 50px; + position: absolute; + right: -15px; + top: -12px; } + header.app a.discover-courses { + background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + border: 1px solid #c8c8c8; + -webkit-border-radius: 3px; + -moz-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); + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); + color: #3c3c3c; + display: block; float: left; + font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; height: 15px; - margin-top: 10px; - padding: 10px 18px; } - header.app ol { - float: left; - font-size: 0em; } - header.app ol.user { - float: right; } - header.app ol.secondary > li { - border: none; } - header.app ol.secondary > li:last-child { - border-right: none; } - header.app ol.secondary > li a { - font: normal italic 1rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; - text-transform: lowercase; } - header.app ol > li { - border-left: 1px solid #c8c8c8; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin-top: 10px; - padding: 0px 8px; - position: relative; - vertical-align: bottom; } - header.app ol > li:last-child { - border-right: 1px solid #c8c8c8; } - header.app ol > li a { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - color: #a0a0a0; - display: block; - font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; - height: 15px; - padding: 10px; - text-decoration: none; - text-transform: uppercase; - text-shadow: 0 1px rgba(255, 255, 255, 0.4); } - header.app ol > li a.user-dashboard { - padding: 10px 10px 10px 40px; } - @media screen and (max-width: 768px) { - header.app ol > li a.user-dashboard { - font-size: 0em; - padding: 10px 0px; - width: 38px; } } - header.app ol > li a.user-dashboard .avatar { + margin-top: 12px; + padding: 8px 10px; + text-decoration: none; + text-transform: uppercase; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + header.app nav.guest { + float: right; } + header.app nav.guest ol { + font-size: 0em; } + header.app nav.guest ol li { + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-top: 12px; + padding: 0px 5px; + position: relative; + vertical-align: bottom; } + header.app nav.guest ol li:last-child { + padding-right: 0px; } + header.app nav.guest ol li a { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border: 1px solid transparent; + color: #3c3c3c; + display: block; + font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; + height: 15px; + padding: 8px; + text-decoration: none; + text-transform: lowercase; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + header.app nav.guest ol li a:hover { background: #dcdcdc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - border: 1px solid #b4b4b4; + background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + border-color: #c8c8c8; -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - height: 22px; + color: #3c3c3c; } + header.app nav.user { + float: right; } + header.app nav.user ol { + font-size: 0em; } + header.app nav.user ol li { + border-right: 1px solid #c8c8c8; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-top: 10px; + padding: 0px 5px; + position: relative; + vertical-align: bottom; } + header.app nav.user ol li a { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + color: #a0a0a0; + display: block; + font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; + height: 15px; + padding: 10px; + text-decoration: none; + text-transform: lowercase; + text-shadow: 0 1px rgba(255, 255, 255, 0.4); } + header.app nav.user ol li a:hover { + background: #dcdcdc; + color: #3c3c3c; } + header.app nav.user ol li a.active { + background: #dcdcdc; + color: #3c3c3c; } + header.app nav.user ol li a.options { + font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; + padding-right: 10px; + text-transform: none; } + header.app nav.user ol li a.user-link { + font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; + padding: 10px 10px 10px 45px; + text-transform: none; } + @media screen and (max-width: 768px) { + header.app nav.user ol li a.user-link { + font-size: 0em; + padding: 10px 0px; + width: 38px; } } + header.app nav.user ol li a.user-link .avatar { + background: #dcdcdc; + -webkit-border-radius: 3px; + -moz-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: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + left: 15px; + overflow: hidden; + position: absolute; + top: 5px; + width: 22px; } + header.app nav.user ol li a.user-link .avatar::after { + background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); + background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); + background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); + background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); + background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); + content: ""; + display: block; + height: 100%; + position: absolute; + right: 0px; + top: 0px; + width: 100%; } + header.app nav.user ol li a.user-link .avatar img { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + display: block; + min-height: 100%; + min-width: 100%; + height: 100%; } + header.app nav.user ol li ol.user-options { + -webkit-border-radius: 4px; + -moz-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); + box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); + border: 1px solid #c8c8c8; + background: #dcdcdc; + display: none; + right: 4px; + padding: 5px 10px; + position: absolute; + top: 50px; + width: 170px; + z-index: 3; } + header.app nav.user ol li ol.user-options.expanded { + display: block; } + header.app nav.user ol li ol.user-options::before { + background: transparent; + border-top: 8px solid #dcdcdc; + border-right: 8px solid #dcdcdc; + border-bottom: 8px solid transparent; + border-left: 8px solid transparent; + -webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8; + -moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8; + box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8; + content: ""; + display: block; + height: 0px; + position: absolute; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + right: 10px; + top: -7px; + width: 0px; } + header.app nav.user ol li ol.user-options li { + border-top: 1px solid #c8c8c8; + border-right: none; + border-bottom: none; + border-left: none; + margin: 0px; + padding: 0px; + width: 100%; } + header.app nav.user ol li ol.user-options li:first-child { + border: none; } + header.app nav.user ol li ol.user-options li a { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block; + font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; + height: auto; + margin: 5px 0px; + overflow: hidden; + padding: 5px; + text-overflow: ellipsis; + -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; + white-space: nowrap; + width: 100%; } + header.app nav.user ol li ol.user-options li a:hover { + background: white; + padding: 5px 8px; } + +.courses { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + zoom: 1; + margin: 40px 0px; + padding: 0px 10px; + width: 100%; } + .courses:before, .courses:after { + content: ""; + display: table; } + .courses:after { + clear: both; } + .courses .course { + background: #f0f0f0; + border: 1px solid #dcdcdc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + font-size: 0em; + min-height: 100px; + 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; + 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; + 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: ""; + display: block; + height: 55px; + left: 40px; + opacity: 0; + position: absolute; + top: 23px; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-transition: all, 0.15s, linear; + -moz-transition: all, 0.15s, linear; + -ms-transition: all, 0.15s, linear; + -o-transition: all, 0.15s, linear; + transition: all, 0.15s, linear; + width: 55px; } + .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; + 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 { + 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; } + .courses .course .info .edit, .courses .course .info .register { + border: 1px solid #dcdcdc; + background: #e6e6e6; + color: #a0a0a0; + display: block; + font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; + padding: 6px 10px; + position: absolute; + right: 0px; + top: 0px; + -webkit-transition: 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: 100%; } + .courses .course .info .meta:hover { + opacity: 0.9; } + .courses .course .info .meta > * { + height: 18px; + position: absolute; + top: 15px; } + .courses .course .info .meta p + p { + margin-top: 0px; } + .courses .course .info .meta .complete { + left: 0px; } + .courses .course .info .meta .complete p { + font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; } + .courses .course .info .meta .complete p span { + color: #3c3c3c; + 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; + zoom: 1; + height: 60px; + padding: 12px 10px; + position: relative; + z-index: 9; } + .filter nav:before, .filter nav:after { + content: ""; + display: table; } + .filter nav:after { + clear: both; } + .filter nav.fixed-top { + -webkit-box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4); + -moz-box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4); + box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4); + max-width: 1200px; + position: fixed; + top: 0px; + width: 100%; } + .filter nav .dropdown { + float: left; + margin-right: 15px; + position: relative; } + .filter nav .dropdown .filter-heading { + background-image: -webkit-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%); + background-image: -moz-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%); + background-image: -ms-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%); + background-image: -o-linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%); + background-image: linear-gradient(-90deg, #fafafa 0%, #f5f5f5 50%, #ebebeb 50%, #e6e6e6 100%); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6); + -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6); + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6); + border: 1px solid #c8c8c8; + color: #a0a0a0; + cursor: pointer; + font: normal 1.2rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif; + height: 36px; + padding: 6px; + position: relative; + text-align: center; + text-shadow: 0 1px rgba(255, 255, 255, 0.8); + width: 150px; + z-index: 11; } + .filter nav .dropdown ul { + background: white; + -webkit-border-radius: 0px 4px 4px 4px; + -moz-border-radius: 0px 4px 4px 4px; + border-radius: 0px 4px 4px 4px; + border: 1px solid #c8c8c8; + -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2); + padding: 10px; + position: absolute; + visibility: hidden; + width: 200px; + z-index: 10; } + .filter nav .dropdown ul li { + list-style: none; } + .filter nav .dropdown:hover .filter-heading { + background: white; + background-image: -webkit-linear-gradient(-90deg, #fafafa, white); + background-image: -moz-linear-gradient(-90deg, #fafafa, white); + background-image: -ms-linear-gradient(-90deg, #fafafa, white); + background-image: -o-linear-gradient(-90deg, #fafafa, white); + background-image: linear-gradient(-90deg, #fafafa, white); + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; + border-bottom: none; + -webkit-box-shadow: 0 2px 0 -1px white; + -moz-box-shadow: 0 2px 0 -1px white; + box-shadow: 0 2px 0 -1px white; + color: #3c3c3c; + height: 40px; } + .filter nav .dropdown:hover ul { + visibility: visible; } + .filter nav form.search { + float: right; } + .filter nav form.search input[type="text"] { + -webkit-border-radius: 3px 0px 0px 3px; + -moz-border-radius: 3px 0px 0px 3px; + border-radius: 3px 0px 0px 3px; + height: 36px; + width: 200px; } + .filter nav form.search input[type="submit"] { + -webkit-border-radius: 0px 3px 3px 0px; + -moz-border-radius: 0px 3px 3px 0px; + border-radius: 0px 3px 3px 0px; + height: 36px; } + +.home { + margin: 50px 10px 100px; } + .home > header { + zoom: 1; + min-height: 335px; + margin-bottom: 40px; + position: relative; + width: 100%; } + .home > header:before, .home > header:after { + content: ""; + display: table; } + .home > header:after { + clear: both; } + .home > header .video-wrapper { + right: 0px; + position: absolute; + top: 0px; } + .home > header .video-wrapper .video-player { + background: #2d2d2d; + border: 1px solid black; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + height: 315px; + padding: 5px; + width: 560px; } + .home > header .video-wrapper .video-player:hover { + -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); } + .home > header .video-wrapper .video-player .video-inner { + background: transparent; + height: 315px; + margin: 0 auto; + width: 560px; } + .home > header .welcome { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + font-size: 0em; + width: 100%; + padding-right: 600px; + padding-top: 20px; } + .home > header .welcome h1 { + color: #a0a0a0; + font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif; + letter-spacing: 1px; + margin-bottom: 20px; + position: relative; + text-align: center; + text-transform: uppercase; } + .home > header .welcome .intro { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-bottom: 40px; + width: 100%; } + .home > header .welcome .intro p { + color: #3c3c3c; + margin: 0px; + text-align: center; + width: 100%; } + .home > header .welcome .signup-wrapper { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0 auto; + width: 82.915%; } + .home > header .welcome .signup-wrapper .sign-up { + background: #f0f0f0; + background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + border: 1px solid #dcdcdc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0em; + padding: 12px; + -webkit-transition: all, 0.15s, linear; + -moz-transition: all, 0.15s, linear; + -ms-transition: all, 0.15s, linear; + -o-transition: all, 0.15s, linear; + transition: all, 0.15s, linear; + width: 100%; } + .home > header .welcome .signup-wrapper .sign-up:hover { + -webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); + -moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); + box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); } + .home > header .welcome .signup-wrapper .sign-up a { + border: 1px solid #410017; + border-bottom: 1px solid #380000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 0 0 #db4274; + -moz-box-shadow: inset 0 1px 0 0 #db4274; + box-shadow: inset 0 1px 0 0 #db4274; + color: white; + display: inline-block; + font-size: 14px; + font-weight: bold; + background-color: #b62568; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a)); + background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); + background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); + background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); + background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); + background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); + padding: 8px 20px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px #2a0000; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; - left: 15px; - overflow: hidden; - position: absolute; - top: 5px; - width: 22px; } - header.app ol > li a.user-dashboard .avatar::after { - background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); - content: ""; - display: block; - height: 100%; - position: absolute; - right: 0px; - top: 0px; - width: 100%; } - header.app ol > li a.user-dashboard .avatar img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - height: 100%; } - header.app ol > li a:hover { - background: #dcdcdc; - color: #3c3c3c; } - header.app ol > li a.active { - background: #dcdcdc; - color: #3c3c3c; } - header.app ol > li ol.user-options { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - 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); - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - border: 1px solid #c8c8c8; - background: #dcdcdc; - display: none; - right: 4px; - padding: 5px 10px; - position: absolute; - top: 50px; - width: 170px; - z-index: 3; } - header.app ol > li ol.user-options.expanded { - display: block; } - header.app ol > li ol.user-options::before { - background: transparent; - border-top: 8px solid #dcdcdc; - border-right: 8px solid #dcdcdc; - border-bottom: 8px solid transparent; - border-left: 8px solid transparent; - -webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8; - -moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8; - box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8; - content: ""; - display: block; - height: 0px; - position: absolute; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - right: 10px; - top: -7px; - width: 0px; } - header.app ol > li ol.user-options li { - border-top: 1px solid #c8c8c8; - border-right: none; - border-bottom: none; - border-left: none; - margin: 0px; - padding: 0px; - width: 100%; } - header.app ol > li ol.user-options li:first-child { - border: none; } - header.app ol > li ol.user-options li a { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; - height: auto; - margin: 5px 0px; - overflow: hidden; - padding: 5px; - text-overflow: ellipsis; - -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; - white-space: nowrap; - width: 100%; } - header.app ol > li ol.user-options li a:hover { - background: white; - padding: 5px 8px; } - -.home { - margin: 30px 10px 100px; } - .home > header { - height: 430px; - margin-bottom: 60px; - overflow: hidden; - position: relative; } - .home > header h1 { - color: #a0a0a0; - font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif; - letter-spacing: 1px; - position: relative; - text-align: center; - text-transform: uppercase; } - .home > header .orginizations { - height: 200px; - margin: 0 auto; - position: relative; - width: 680px; } - .home > header .orginizations > div { - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - vertical-align: middle; } - .home > header .orginizations .orginization { - position: absolute; - top: 20px; - width: 200px; } - .home > header .orginizations .orginization.mit { - z-index: 3; } - .home > header .orginizations .orginization.edx { - left: 240px; - z-index: 2; } - .home > header .orginizations .orginization.harvard { - z-index: 3; } - .home > header .orginizations .orginization img { - max-width: 100%; } - .home > header .orginizations .divider { - position: absolute; - top: 0px; - z-index: 4; } - .home > header .video-wrapper { - height: 370px; - position: absolute; - width: 100%; } - .home > header .video-wrapper .video-player { - background: #2d2d2d; - -moz-border-radius-topleft: 4px; - -webkit-border-top-left-radius: 4px; - -moz-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topright: 4px; - -webkit-border-top-right-radius: 4px; - -moz-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3); - height: 360px; - margin: 0 auto; - padding: 10px 10px 0px 10px; - width: 640px; } - .home > header .video-wrapper .video-player .video-inner { - background: #ebebeb; - height: 360px; - margin: 0 auto; - width: 640px; } - .home > header .bottom-divider { - bottom: 0px; - position: absolute; } - .home .welcome { - border-right: 1px solid #c8c8c8; - font-size: 0em; - margin-bottom: 80px; } - .home .welcome h2 { - color: #a0a0a0; - font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; - letter-spacing: 1px; - margin-bottom: 20px; - text-transform: uppercase; } - .home .welcome .intro { - border-right: 1px solid #c8c8c8; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin-right: 2.513%; - width: 65.829%; - vertical-align: middle; - padding-right: 2.513%; } - .home .welcome .intro p { - color: #3c3c3c; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin: 0px; - width: 100%; - vertical-align: top; } - .home .welcome .signup-wrapper { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - padding-right: 2.513%; - width: 31.658%; - vertical-align: middle; } + font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + padding: 15px 0px; + text-transform: uppercase; + text-align: center; + width: 48.744%; } + .home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) { + cursor: pointer; + background-color: #a91656; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029)); + background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); + background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); + background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); + background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); + background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); } + .home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) { + -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; + -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; + box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; } + .home > header .welcome .signup-wrapper .sign-up a:disabled { + opacity: 0.5; + cursor: not-allowed; } + .home > header .welcome .signup-wrapper .sign-up a:first-child { + margin-right: 2.513%; } + .home > header .welcome .signup-wrapper .sign-up a.find-courses { + border: 1px solid #002e88; + border-bottom: 1px solid #001e5f; + -webkit-border-radius: 5px; + -moz-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; + font-size: 14px; + font-weight: bold; + background-color: #1d9dd9; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab)); + background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + padding: 8px 20px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px #001067; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + padding: 15px 0px; } + .home > header .welcome .signup-wrapper .sign-up a.find-courses:hover:not(:disabled) { + cursor: pointer; + background-color: #108ec7; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a)); + background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } + .home > header .welcome .signup-wrapper .sign-up a.find-courses:active:not(:disabled) { + -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; + -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; + box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } + .home > header .welcome .signup-wrapper .sign-up a.find-courses:disabled { + opacity: 0.5; + cursor: not-allowed; } + .home > header .welcome .signup-wrapper .sign-up form input[type="text"], + .home > header .welcome .signup-wrapper .sign-up form input[type="email"], + .home > header .welcome .signup-wrapper .sign-up form input[type="password"] { + height: 45px; + margin-right: 2.513%; + width: 23.116%; } + .home > header .welcome .signup-wrapper .sign-up form input[type="text"]:last-child, + .home > header .welcome .signup-wrapper .sign-up form input[type="email"]:last-child, + .home > header .welcome .signup-wrapper .sign-up form input[type="password"]:last-child { + margin-right: 0px; } + .home > header .welcome .signup-wrapper .sign-up form input[type="submit"] { + height: 45px; + width: 23.116%; } + .home > header .welcome .signup-wrapper .sign-up h3 { + color: #3c3c3c; + font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif; + text-align: center; } .home .university-partners { background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); @@ -1518,7 +1857,7 @@ header.app { background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); margin-bottom: 60px; - padding-top: 5px; + padding: 10px 0px; position: relative; width: 100%; } .home .university-partners:before { @@ -1534,18 +1873,38 @@ header.app { .home .university-partners .partners { font-size: 0em; margin: 0 auto; - opacity: 0.7; - width: 48.744%; } + width: 420px; } + .home .university-partners .partners a { + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-right: 40px; + opacity: 0.7; } + .home .university-partners .partners a:last-child { + margin-right: 0px; } + .home .university-partners .partners a:hover { + opacity: 0.9; } + .home .university-partners .partners .name { + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + color: #3c3c3c; + font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif; + text-align: center; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); + vertical-align: middle; } .home .university-partners .partners img { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; - margin-right: 2.513%; - max-width: 31.658%; } - .home .university-partners .partners img:last-child { - margin-right: 0px; } + max-width: 100px; + vertical-align: middle; } .home .highlighted-courses { -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -1561,277 +1920,19 @@ header.app { display: table; } .home .highlighted-courses:after { clear: both; } - .home .highlighted-courses > article.course { - background: #f0f0f0; - border: 1px solid #dcdcdc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + .home .highlighted-courses .course { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; - font-size: 0em; - min-height: 0px; - margin-bottom: 20px; - padding: 10px; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; width: 48.744%; } - .home .highlighted-courses > article.course:last-child { - margin-bottom: none; } @media only screen and (max-width: 768px) { - .home .highlighted-courses > article.course { + .home .highlighted-courses .course { float: none; margin-right: 0px; width: 100%; } } - .home .highlighted-courses > article.course:nth-child(odd) { + .home .highlighted-courses .course:nth-child(odd) { margin-right: 2.513%; } - .home .highlighted-courses > article.course > a { - zoom: 1; - display: block; - position: relative; } - .home .highlighted-courses > article.course > a:before, .home .highlighted-courses > article.course > a:after { - content: ""; - display: table; } - .home .highlighted-courses > article.course > a:after { - clear: both; } - .home .highlighted-courses > article.course .cover { - background: #e1e1e1; - border: 1px solid #969696; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - float: left; - height: 50px; - margin: 0px; - opacity: 0.8; - overflow: hidden; - position: relative; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; - width: 100px; } - @media only screen and (max-width: 320px) { - .home .highlighted-courses > article.course .cover { - display: none; } } - .home .highlighted-courses > article.course .cover .shade { - background: rgba(0, 0, 0, 0.3); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - bottom: 0px; - content: ""; - display: block; - left: 0px; - opacity: 0; - position: absolute; - top: 0px; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; - right: 0px; } - .home .highlighted-courses > article.course .cover .arrow { - border-top: 1px solid; - border-left: 1px solid; - border-color: white; - -webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); - content: ""; - display: block; - height: 55px; - left: 40px; - opacity: 0; - position: absolute; - top: 23px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; - width: 55px; } - .home .highlighted-courses > article.course .cover img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - width: 100%; } - .home .highlighted-courses > article.course .info { - margin-left: 115px; } - @media only screen and (max-width: 320px) { - .home .highlighted-courses > article.course .info { - margin: 0px; } } - .home .highlighted-courses > article.course .info > hgroup { - margin-right: 80px; } - @media only screen and (max-width: 320px) { - .home .highlighted-courses > article.course .info > hgroup { - margin: 0px; } } - .home .highlighted-courses > article.course .info > hgroup h2 { - font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif; - margin-bottom: 2px; - overflow: hidden; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); - -webkit-transition: color, 0.15s, linear; - -moz-transition: color, 0.15s, linear; - -ms-transition: color, 0.15s, linear; - -o-transition: color, 0.15s, linear; - transition: color, 0.15s, linear; - text-overflow: ellipsis; - white-space: nowrap; } - .home .highlighted-courses > article.course .info > hgroup p { - color: #3c3c3c; - font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; - overflow: hidden; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); - text-overflow: ellipsis; - white-space: nowrap; } - .home .highlighted-courses > article.course .info .edit, .home .highlighted-courses > article.course .info .register { - border: 1px solid #dcdcdc; - background: #e6e6e6; - color: #a0a0a0; - display: block; - font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; - padding: 6px 10px; - position: absolute; - right: 0px; - top: 0px; - -webkit-transition: all, 0.15s, linear; - -moz-transition: all, 0.15s, linear; - -ms-transition: all, 0.15s, linear; - -o-transition: all, 0.15s, linear; - transition: all, 0.15s, linear; } - @media only screen and (max-width: 320px) { - .home .highlighted-courses > article.course .info .edit, .home .highlighted-courses > article.course .info .register { - display: none; } } - .home .highlighted-courses > article.course .info .edit:hover, .home .highlighted-courses > article.course .info .register:hover { - background: white; - color: #1d9dd9; } - .home .highlighted-courses > article.course:hover { - background: #f5f5f5; - -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); - cursor: pointer; } - .home .highlighted-courses > article.course:hover .cover { - opacity: 1; } - .home .highlighted-courses > article.course:hover .cover .shade, .home .highlighted-courses > article.course:hover .cover .arrow { - opacity: 1; } - .home .sign-up { - background: #f0f0f0; - border: 1px solid #dcdcdc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 20px; - width: 100%; } - .home .sign-up h3 { - color: #3c3c3c; - font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif; - text-align: center; } - .home .sign-up.top { - 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-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; } - .home .sign-up.top a { - border: 1px solid #410017; - border-bottom: 1px solid #380000; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: inset 0 1px 0 0 #db4274; - -moz-box-shadow: inset 0 1px 0 0 #db4274; - box-shadow: inset 0 1px 0 0 #db4274; - color: white; - display: inline-block; - font-size: 14px; - font-weight: bold; - background-color: #b62568; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a)); - background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); - background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); - background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); - background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); - background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%); - padding: 8px 20px; - text-align: center; - text-decoration: none; - text-shadow: 0 -1px 1px #2a0000; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - display: block; - font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - margin: 0 auto 0; - padding: 15px 0px; - text-transform: uppercase; - text-align: center; - width: 100%; } - .home .sign-up.top a:hover:not(:disabled) { - cursor: pointer; - background-color: #a91656; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029)); - background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); - background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); - background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); - background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); - background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); } - .home .sign-up.top a:active:not(:disabled) { - -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; - -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; - box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; } - .home .sign-up.top a:disabled { - opacity: 0.5; - cursor: not-allowed; } - .home .sign-up.middle { - background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); - background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); - background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); - background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); - background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); - -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); - margin-bottom: 60px; - padding: 15px 20px; - -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; } - .home .sign-up.middle:hover { - -webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); - -moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); - box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); } .home .more-info { margin-bottom: 60px; width: 100%; } @@ -1840,11 +1941,23 @@ header.app { color: #a0a0a0; font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; letter-spacing: 1px; - margin-bottom: 20px; + margin-bottom: 30px; padding-bottom: 10px; } .home .more-info .news { - background: #f0f0f0; - height: 300px; } + font-size: 0em; + width: 100%; } + .home .more-info .news > article { + background: #f0f0f0; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + height: 300px; + margin-right: 2.513%; + width: 31.658%; } + .home .more-info .news > article:last-child { + margin-right: 0px; } .home .social-media { background: #f5f5f5; border: 1px solid #dcdcdc; @@ -1870,138 +1983,150 @@ header.app { display: table; } .dashboard:after { clear: both; } - -.sidebar { - background: #f0f0f0; - float: left; - margin-right: 2.513%; - width: 23.116%; } - @media screen and (max-width: 768px) { - .sidebar { - float: none; - margin: 0 0 30px 0; - width: 100%; } } - .sidebar header.profile .user-info { - zoom: 1; - padding: 10px; } - .sidebar header.profile .user-info:before, .sidebar header.profile .user-info:after { - content: ""; - display: table; } - .sidebar header.profile .user-info:after { - clear: both; } - .sidebar header.profile .user-info .avatar { - background: #dcdcdc; - border: 1px solid #b4b4b4; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0 0 15px 0; - max-width: 100%; - overflow: hidden; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .avatar { - float: left; - margin: 0px; - margin-right: 2.513%; - width: 23.116%; } } - .sidebar header.profile .user-info .avatar img { + .dashboard .sidebar { + background: #f0f0f0; + margin-right: 2.513%; + position: absolute; + width: 250px; } + @media screen and (max-width: 768px) { + .dashboard .sidebar { + float: none; + margin: 0 0 30px 0; + position: static; + width: 100%; } } + .dashboard .sidebar header.profile .user-info { + zoom: 1; + padding: 10px; } + .dashboard .sidebar header.profile .user-info:before, .dashboard .sidebar header.profile .user-info:after { + content: ""; + display: table; } + .dashboard .sidebar header.profile .user-info:after { + clear: both; } + .dashboard .sidebar header.profile .user-info .avatar { + background: #dcdcdc; + border: 1px solid #b4b4b4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - display: block; - max-width: 100%; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info { - float: left; - width: 74.372%; } } - .sidebar header.profile .user-info .info h2 { - border-bottom: 1px solid #c8c8c8; - -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); - -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); - box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); - font: bold 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; - margin-bottom: 15px; - overflow: hidden; - padding-bottom: 15px; - text-align: center; - text-wrap: nowrap; - text-overflow: ellipsis; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info h2 { - text-align: left; } } - .sidebar header.profile .user-info .info > ul { - zoom: 1; - margin: 0px; - padding: 0 0 10px 0; } - .sidebar header.profile .user-info .info > ul:before, .sidebar header.profile .user-info .info > ul:after { - content: ""; - display: table; } - .sidebar header.profile .user-info .info > ul:after { - clear: both; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info > ul { - padding: 0px; } } - .sidebar header.profile .user-info .info > ul li { - list-style: none; - margin-bottom: 10px; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info > ul li { - float: left; - margin-right: 10px; } } - .sidebar header.profile .user-info .info > ul li:last-child { - margin-bottom: 0px; } - .sidebar header.profile .user-info .info > ul li h3 { - color: #a0a0a0; - font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; - text-shadow: 0 1px rgba(255, 255, 255, 0.8); } - .sidebar header.profile .user-info .info > ul li h3 span { - font-weight: normal; - text-transform: none; } - -.courses { - float: left; - width: 74.372%; } - @media only screen and (max-width: 768px) { - .courses { - float: none; - width: 100%; } } - .courses nav.course-filters { - background: #e6e6e6; - margin-bottom: 30px; - position: relative; } - .courses nav.course-filters ol.filters { - zoom: 1; } - .courses nav.course-filters ol.filters:before, .courses nav.course-filters ol.filters:after { - content: ""; - display: table; } - .courses nav.course-filters ol.filters:after { - clear: both; } - .courses nav.course-filters ol.filters li { - border-right: 1px solid #c8c8c8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - list-style: none; - float: left; - padding: 15px 10px; - width: 25%; - text-align: center; } - .courses nav.course-filters ol.filters li:last-child { - border: none; } - .courses nav.course-filters ol.filters li:hover { - background: #dcdcdc; - cursor: pointer; } - .courses nav.course-filters ol.filters li.selected { - background: #dcdcdc; } - .courses nav.course-filters ol.filters li h2 { - font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; - text-transform: none; } - .courses nav.course-filters ol.filters li span.count { - margin: 5px 0 0 0; - display: block; } + margin: 0 0 15px 0; + max-width: 100%; + overflow: hidden; } + @media screen and (max-width: 768px) { + .dashboard .sidebar header.profile .user-info .avatar { + margin: 0px; + margin-right: 2.513%; + position: absolute; + width: 100px; } } + .dashboard .sidebar header.profile .user-info .avatar img { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + display: block; + max-width: 100%; } + @media screen and (max-width: 768px) { + .dashboard .sidebar header.profile .user-info .info { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + min-height: 100px; + padding-left: 110px; + width: 100%; } } + .dashboard .sidebar header.profile .user-info .info h2 { + border-bottom: 1px solid #c8c8c8; + -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); + -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4); + font: bold 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; + margin-bottom: 15px; + overflow: hidden; + padding-bottom: 15px; + text-align: center; + text-wrap: nowrap; + text-overflow: ellipsis; } + @media screen and (max-width: 768px) { + .dashboard .sidebar header.profile .user-info .info h2 { + text-align: left; } } + .dashboard .sidebar header.profile .user-info .info > ul { + zoom: 1; + margin: 0px; + padding: 0 0 10px 0; } + .dashboard .sidebar header.profile .user-info .info > ul:before, .dashboard .sidebar header.profile .user-info .info > ul:after { + content: ""; + display: table; } + .dashboard .sidebar header.profile .user-info .info > ul:after { + clear: both; } + @media screen and (max-width: 768px) { + .dashboard .sidebar header.profile .user-info .info > ul { + padding: 0px; } } + .dashboard .sidebar header.profile .user-info .info > ul li { + list-style: none; + margin-bottom: 10px; } + @media screen and (max-width: 768px) { + .dashboard .sidebar header.profile .user-info .info > ul li { + float: left; + margin-right: 10px; } } + .dashboard .sidebar header.profile .user-info .info > ul li:last-child { + margin-bottom: 0px; } + .dashboard .sidebar header.profile .user-info .info > ul li h3 { + color: #a0a0a0; + font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; + text-shadow: 0 1px rgba(255, 255, 255, 0.8); } + .dashboard .sidebar header.profile .user-info .info > ul li h3 span { + font-weight: normal; + text-transform: none; } + .dashboard .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 { + padding: 0px; } } + @media only screen and (max-width: 768px) { + .dashboard .courses { + float: none; + width: 100%; } } + .dashboard .courses nav.course-toggle { + background: #e6e6e6; + margin-bottom: 30px; + position: relative; } + .dashboard .courses nav.course-toggle ol.filters { + zoom: 1; } + .dashboard .courses nav.course-toggle ol.filters:before, .dashboard .courses nav.course-toggle ol.filters:after { + content: ""; + display: table; } + .dashboard .courses nav.course-toggle ol.filters:after { + clear: both; } + .dashboard .courses nav.course-toggle ol.filters li { + border-right: 1px solid #c8c8c8; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + list-style: none; + float: left; + padding: 15px 10px; + width: 25%; + text-align: center; } + .dashboard .courses nav.course-toggle ol.filters li:last-child { + border: none; } + .dashboard .courses nav.course-toggle ol.filters li:hover { + background: #dcdcdc; + cursor: pointer; } + .dashboard .courses nav.course-toggle ol.filters li.selected { + background: #dcdcdc; } + .dashboard .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 { + margin: 5px 0 0 0; + display: block; } + .dashboard .courses .course { + width: 100%; } nav.course-material { background: #d2d2d2; @@ -2076,52 +2201,49 @@ nav.course-material { background: #f0f0f0; height: 600px; } -.find-courses { - margin: 0 10px; } - .find-courses > header { - margin-bottom: 30px; } - .find-courses > header .universities { - margin: 10px auto; - opacity: 0.7; - width: 31.658%; } - .find-courses > header .universities img { - max-width: 100%; } - .find-courses > header .universities span.divider { - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - height: 120px; - vertical-align: middle; } - .find-courses h2.title { - color: #a0a0a0; - font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; - letter-spacing: 1px; - margin-bottom: 50px; - text-transform: uppercase; - text-align: center; } - .find-courses .courses { - zoom: 1; +.find-courses header { + 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 { + height: 120px; + margin: 0 auto; + max-width: 1200px; + overflow: hidden; + padding: 40px 0px 30px; + position: relative; width: 100%; } - .find-courses .courses:before, .find-courses .courses:after { + .find-courses header .inner-wrapper::before { + background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); + background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); + background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); + background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%); + bottom: -300px; content: ""; - display: table; } - .find-courses .courses:after { - clear: both; } - .find-courses .courses .course { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - float: left; - width: 48.744%; } - @media only screen and (max-width: 768px) { - .find-courses .courses .course { - float: none; - margin-right: 0px; - width: 100%; } } - .find-courses .courses .course:nth-child(odd) { - margin-right: 2.513%; } + display: block; + height: 600px; + margin: 0 auto; + position: absolute; + width: 100%; + z-index: 1; } + .find-courses header .inner-wrapper img { + display: block; + margin: 0 auto; + position: relative; + width: 100px; + z-index: 2; } + .find-courses header .inner-wrapper h1 { + color: #a0a0a0; + font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif; + letter-spacing: 1px; + position: relative; + text-transform: uppercase; + text-align: center; + z-index: 2; } .grid-container { display: none; } @@ -2256,7 +2378,7 @@ nav.course-material { padding-bottom: 20px; position: relative; width: 31.658%; } - .course-info .sidebar .faded-vertical-divider, .course-info .sidebar .home > header .orginizations .divider, .home > header .orginizations .course-info .sidebar .divider, .course-info .sidebar .find-courses > header .universities span.divider, .find-courses > header .universities .course-info .sidebar span.divider { + .course-info .sidebar .faded-vertical-divider, .course-info .sidebar header.app a.logo::after, header.app .course-info .sidebar a.logo::after { background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0)); background-image: -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)); diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss index 34d2efd634..28bb5bda83 100644 --- a/lms/static/sass/application.scss +++ b/lms/static/sass/application.scss @@ -7,6 +7,8 @@ @import 'shared_forms'; @import 'shared_footer'; @import 'shared_header'; +@import 'shared_list_of_courses'; +@import 'shared_course_filter'; @import 'index'; @import 'dashboard'; diff --git a/lms/static/sass/screen.css b/lms/static/sass/screen.css deleted file mode 100644 index 21860cb69b..0000000000 --- a/lms/static/sass/screen.css +++ /dev/null @@ -1,1480 +0,0 @@ -/* HTML5 Boilerplate */ -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { - display: block; } - -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; } - -audio:not([controls]) { - display: none; } - -[hidden] { - display: none; } - -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } - -html, button, input, select, textarea { - font-family: sans-serif; - color: #222; } - -body { - margin: 0; - font-size: 1em; - line-height: 1.4; } - -::-moz-selection { - background: #fe57a1; - color: #fff; - text-shadow: none; } - -::selection { - background: #fe57a1; - color: #fff; - text-shadow: none; } - -a { - color: #00e; } - -a:visited { - color: #551a8b; } - -a:hover { - color: #06e; } - -a:focus { - outline: thin dotted; } - -a:hover, a:active { - outline: 0; } - -abbr[title] { - border-bottom: 1px dotted; } - -b, strong { - font-weight: bold; } - -blockquote { - margin: 1em 40px; } - -dfn { - font-style: italic; } - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; } - -ins { - background: #ff9; - color: #000; - text-decoration: none; } - -mark { - background: #ff0; - color: #000; - font-style: italic; - font-weight: bold; } - -pre, code, kbd, samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; } - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; } - -q { - quotes: none; } - -q:before, q:after { - content: ""; - content: none; } - -small { - font-size: 85%; } - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -ul, ol { - margin: 1em 0; - padding: 0 0 0 40px; } - -dd { - margin: 0 0 0 40px; } - -nav ul, nav ol { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; } - -img { - border: 0; - -ms-interpolation-mode: bicubic; - vertical-align: middle; } - -svg:not(:root) { - overflow: hidden; } - -figure { - margin: 0; } - -form { - margin: 0; } - -fieldset { - border: 0; - margin: 0; - padding: 0; } - -label { - cursor: pointer; } - -legend { - border: 0; - *margin-left: -7px; - padding: 0; - white-space: normal; } - -button, input, select, textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; } - -button, input { - line-height: normal; } - -button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; - *overflow: visible; } - -button[disabled], input[disabled] { - cursor: default; } - -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; - *width: 13px; - *height: 13px; } - -input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; } - -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; } - -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; } - -textarea { - overflow: auto; - vertical-align: top; - resize: vertical; } - -input:invalid, textarea:invalid { - background-color: #f0dddd; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -td { - vertical-align: top; } - -.chromeframe { - margin: 0.2em 0; - background: #ccc; - color: black; - padding: 0.2em 0; } - -.ir { - display: block; - border: 0; - text-indent: -999em; - overflow: hidden; - background-color: transparent; - background-repeat: no-repeat; - text-align: left; - direction: ltr; - *line-height: 0; } - -.ir br { - display: none; } - -.hidden { - display: none !important; - visibility: hidden; } - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; } - -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; } - -.invisible { - visibility: hidden; } - -.clearfix:before, .clearfix:after { - content: ""; - display: table; } - -.clearfix:after { - clear: both; } - -.clearfix { - *zoom: 1; } - -@media print { - * { - background: transparent !important; - color: black !important; - box-shadow: none !important; - text-shadow: none !important; - filter: none !important; - -ms-filter: none !important; } - - a, a:visited { - text-decoration: underline; } - - a[href]:after { - content: " (" attr(href) ")"; } - - abbr[title]:after { - content: " (" attr(title) ")"; } - - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { - content: ""; } - - pre, blockquote { - border: 1px solid #999; - page-break-inside: avoid; } - - thead { - display: table-header-group; } - - tr, img { - page-break-inside: avoid; } - - img { - max-width: 100% !important; } - - @page { - margin: 0.5cm; } - - p, h2, h3 { - orphans: 3; - widows: 3; } - - h2, h3 { - page-break-after: avoid; } } -h1, h2, h3, h4, h5, h6 { - color: #3c3c3c; - margin: 0px; } - -p { - color: #a0a0a0; - margin: 0px; } - -a:link, a:visited { - color: #1d9dd9; - text-decoration: none; } - a:link:hover, a:visited:hover { - color: #43b2e6; } - -body { - background: white; - margin: 0px; } - -.container { - zoom: 1; - margin: 0 auto; - max-width: 1200px; - width: 100%; } - .container:before, .container:after { - content: ""; - display: table; } - .container:after { - clear: both; } - -header.app { - border-bottom: 1px solid #c8c8c8; - background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - height: 55px; - width: 100%; } - header.app nav { - zoom: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - max-width: 1200px; - margin: 0 auto; - padding: 0px 10px; - width: 100%; } - header.app nav:before, header.app nav:after { - content: ""; - display: table; } - header.app nav:after { - clear: both; } - header.app a.logo { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - float: left; - height: 100%; - margin: 15px 15px 0px 0px; } - header.app h1 { - border-left: 1px solid #c8c8c8; - font: bold 12px/14px "Open Sans", Verdana, Geneva, sans-serif; - float: left; - height: 15px; - margin-top: 10px; - padding: 10px 18px; } - header.app ol { - float: left; - font-size: 0px; } - header.app ol.user { - float: right; } - header.app ol > li { - border-left: 1px solid #c8c8c8; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin-top: 10px; - padding: 0px 8px; - position: relative; - vertical-align: bottom; } - header.app ol > li:last-child { - border-right: 1px solid #c8c8c8; } - header.app ol > li a { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - color: #a0a0a0; - display: block; - font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; - height: 15px; - padding: 10px; - text-decoration: none; - text-transform: uppercase; - text-shadow: 0 1px rgba(255, 255, 255, 0.4); } - header.app ol > li a.user-dashboard { - padding: 10px 10px 10px 40px; } - @media screen and (max-width: 768px) { - header.app ol > li a.user-dashboard { - font-size: 0px; - padding: 10px 0px; - width: 38px; } } - header.app ol > li a.user-dashboard .avatar { - background: #dcdcdc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - border: 1px solid #b4b4b4; - -webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - height: 22px; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - left: 15px; - overflow: hidden; - position: absolute; - top: 5px; - width: 22px; } - header.app ol > li a.user-dashboard .avatar::after { - background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false); - content: ""; - display: block; - height: 100%; - position: absolute; - right: 0px; - top: 0px; - width: 100%; } - header.app ol > li a.user-dashboard .avatar img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - height: 100%; } - header.app ol > li a:hover { - background: #dcdcdc; - color: #3c3c3c; } - header.app ol > li a.active { - background: #dcdcdc; - color: #3c3c3c; } - header.app ol > li ol.user-options { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false); - box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false); - border: 1px solid #c8c8c8; - background: #dcdcdc; - display: none; - right: 4px; - padding: 5px 10px; - position: absolute; - top: 50px; - width: 170px; - z-index: 3; } - header.app ol > li ol.user-options.expanded { - display: block; } - header.app ol > li ol.user-options::before { - background: transparent; - border-top: 8px solid #dcdcdc; - border-right: 8px solid #dcdcdc; - border-bottom: 8px solid transparent; - border-left: 8px solid transparent; - -webkit-box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false); - -moz-box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false); - box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false); - content: ""; - display: block; - height: 0px; - position: absolute; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - right: 10px; - top: -7px; - width: 0px; } - header.app ol > li ol.user-options li { - border-top: 1px solid #c8c8c8; - border-right: none; - border-bottom: none; - border-left: none; - margin: 0px; - padding: 0px; - width: 100%; } - header.app ol > li ol.user-options li:first-child { - border: none; } - header.app ol > li ol.user-options li a { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - font: normal 12px/16px "Open Sans", Verdana, Geneva, sans-serif; - height: auto; - margin: 5px 0px; - overflow: hidden; - padding: 5px; - text-overflow: ellipsis; - -webkit-transition-property: compact(padding, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(padding, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(padding, false, false, false, false, false, false, false, false); - -o-transition-property: compact(padding, false, false, false, false, false, false, false, false); - transition-property: compact(padding, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.1s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - white-space: nowrap; - width: 100%; } - header.app ol > li ol.user-options li a:hover { - background: white; - padding: 5px 8px; } - -.faded-hr-divider { - background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - height: 1px; - width: 100%; } - -.faded-vertical-divider, .find-courses > header .universities span.divider { - background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false); - height: 100%; - width: 1px; } - -.animation-apear { - -webkit-animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false); - -moz-animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false); - animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false); - -webkit-animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false); - -moz-animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false); - animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false); } - -@-webkit-keyframes apear { - 0% { - opacity: 0; } - - 100% { - opacity: 1; } } - -@-moz-keyframes apear { - 0% { - opacity: 0; } - - 100% { - opacity: 1; } } - -@keyframes apear { - 0% { - opacity: 0; } - - 100% { - opacity: 1; } } - -.home { - margin-top: 30px; } - .home > header h1 { - font: bold 24px/26px "Open Sans", Verdana, Geneva, sans-serif; - text-align: center; } - -.dashboard { - zoom: 1; - margin: 30px 10px; } - .dashboard:before, .dashboard:after { - content: ""; - display: table; } - .dashboard:after { - clear: both; } - -.sidebar { - background: #f0f0f0; - float: left; - margin-right: 2.513%; - width: 23.116%; } - @media screen and (max-width: 768px) { - .sidebar { - float: none; - margin: 0 0 30px 0; - width: 100%; } } - .sidebar header.profile .user-info { - zoom: 1; - padding: 10px; } - .sidebar header.profile .user-info:before, .sidebar header.profile .user-info:after { - content: ""; - display: table; } - .sidebar header.profile .user-info:after { - clear: both; } - .sidebar header.profile .user-info .avatar { - background: #dcdcdc; - border: 1px solid #b4b4b4; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0 0 15px 0; - max-width: 100%; - overflow: hidden; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .avatar { - float: left; - margin: 0px; - margin-right: 2.513%; - width: 23.116%; } } - .sidebar header.profile .user-info .avatar img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - display: block; - max-width: 100%; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info { - float: left; - width: 74.372%; } } - .sidebar header.profile .user-info .info h2 { - border-bottom: 1px solid #c8c8c8; - -webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false); - box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false); - font: bold 18px/20px "Open Sans", Verdana, Geneva, sans-serif; - margin-bottom: 15px; - overflow: hidden; - padding-bottom: 15px; - text-align: center; - text-wrap: nowrap; - text-overflow: ellipsis; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info h2 { - text-align: left; } } - .sidebar header.profile .user-info .info > ul { - zoom: 1; - margin: 0px; - padding: 0 0 10px 0; } - .sidebar header.profile .user-info .info > ul:before, .sidebar header.profile .user-info .info > ul:after { - content: ""; - display: table; } - .sidebar header.profile .user-info .info > ul:after { - clear: both; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info > ul { - padding: 0px; } } - .sidebar header.profile .user-info .info > ul li { - list-style: none; - margin-bottom: 10px; } - @media screen and (max-width: 768px) { - .sidebar header.profile .user-info .info > ul li { - float: left; - margin-right: 10px; } } - .sidebar header.profile .user-info .info > ul li:last-child { - margin-bottom: 0px; } - .sidebar header.profile .user-info .info > ul li h3 { - color: #a0a0a0; - font: bold 12px/14px "Open Sans", Verdana, Geneva, sans-serif; - text-shadow: 0 1px rgba(255, 255, 255, 0.8); } - .sidebar header.profile .user-info .info > ul li h3 span { - font-weight: normal; - text-transform: none; } - -.courses { - float: left; - width: 74.372%; } - @media only screen and (max-width: 768px) { - .courses { - float: none; - width: 100%; } } - .courses nav.course-filters { - background: #e6e6e6; - margin-bottom: 30px; - position: relative; } - .courses nav.course-filters ol.filters { - zoom: 1; } - .courses nav.course-filters ol.filters:before, .courses nav.course-filters ol.filters:after { - content: ""; - display: table; } - .courses nav.course-filters ol.filters:after { - clear: both; } - .courses nav.course-filters ol.filters li { - border-right: 1px solid #c8c8c8; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - list-style: none; - float: left; - padding: 15px 10px; - width: 25%; - text-align: center; } - .courses nav.course-filters ol.filters li:last-child { - border: none; } - .courses nav.course-filters ol.filters li:hover { - background: #dcdcdc; - cursor: pointer; } - .courses nav.course-filters ol.filters li.selected { - background: #dcdcdc; } - .courses nav.course-filters ol.filters li h2 { - font: normal 11px/13px "Open Sans", Verdana, Geneva, sans-serif; - text-transform: none; } - .courses nav.course-filters ol.filters li span.count { - margin: 5px 0 0 0; - display: block; } - .courses .course { - background: #f0f0f0; - border: 1px solid #dcdcdc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - font-size: 0px; - min-height: 100px; - margin-bottom: 20px; - padding: 10px; - -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(all, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(all, false, false, false, false, false, false, false, false); - -o-transition-property: compact(all, false, false, false, false, false, false, false, false); - transition-property: compact(all, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); } - .courses .course:last-child { - margin-bottom: none; } - .courses .course > a { - zoom: 1; - display: block; - position: relative; } - .courses .course > a:before, .courses .course > a:after { - content: ""; - display: table; } - .courses .course > a:after { - clear: both; } - .courses .course .cover { - background: #e1e1e1; - border: 1px solid #969696; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false); - box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false); - float: left; - height: 100px; - margin: 0px; - opacity: 0.8; - overflow: hidden; - position: relative; - -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(all, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(all, false, false, false, false, false, false, false, false); - -o-transition-property: compact(all, false, false, false, false, false, false, false, false); - transition-property: compact(all, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - width: 100px; } - @media only screen and (max-width: 320px) { - .courses .course .cover { - display: none; } } - .courses .course .cover .shade { - background: rgba(0, 0, 0, 0.3); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - bottom: 0px; - content: ""; - display: block; - left: 0px; - opacity: 0; - position: absolute; - top: 0px; - -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(all, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(all, false, false, false, false, false, false, false, false); - -o-transition-property: compact(all, false, false, false, false, false, false, false, false); - transition-property: compact(all, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - right: 0px; } - .courses .course .cover .arrow { - border-top: 1px solid; - border-left: 1px solid; - border-color: white; - -webkit-box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - content: ""; - display: block; - height: 55px; - left: 40px; - opacity: 0; - position: absolute; - top: 23px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(all, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(all, false, false, false, false, false, false, false, false); - -o-transition-property: compact(all, false, false, false, false, false, false, false, false); - transition-property: compact(all, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - width: 55px; } - .courses .course .cover img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - width: 100%; } - .courses .course .info { - margin-left: 115px; } - @media only screen and (max-width: 320px) { - .courses .course .info { - margin: 0px; } } - .courses .course .info > hgroup { - margin-right: 80px; } - @media only screen and (max-width: 320px) { - .courses .course .info > hgroup { - margin: 0px; } } - .courses .course .info > hgroup h2 { - font: bold 18px/24px "Open Sans", Verdana, Geneva, sans-serif; - margin-bottom: 3px; - overflow: hidden; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); - -webkit-transition-property: compact(color, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(color, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(color, false, false, false, false, false, false, false, false); - -o-transition-property: compact(color, false, false, false, false, false, false, false, false); - transition-property: compact(color, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - text-overflow: ellipsis; - white-space: nowrap; } - .courses .course .info > hgroup p { - color: #3c3c3c; - font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif; - overflow: hidden; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); - text-overflow: ellipsis; - white-space: nowrap; } - .courses .course .info .edit, .courses .course .info .register { - border: 1px solid #dcdcdc; - background: #e6e6e6; - color: #a0a0a0; - display: block; - font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; - padding: 6px 10px; - position: absolute; - right: 0px; - top: 0px; - -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(all, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(all, false, false, false, false, false, false, false, false); - -o-transition-property: compact(all, false, false, false, false, false, false, false, false); - transition-property: compact(all, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); } - @media only screen and (max-width: 320px) { - .courses .course .info .edit, .courses .course .info .register { - display: none; } } - .courses .course .info .edit:hover, .courses .course .info .register:hover { - background: white; - color: #1d9dd9; } - .courses .course .info .meta { - border-top: 1px solid #c8c8c8; - -webkit-box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - font-size: 12px; - height: 34px; - margin-top: 15px; - opacity: 0.9; - position: relative; - -webkit-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -o-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - width: 100%; } - .courses .course .info .meta:hover { - opacity: 0.9; } - .courses .course .info .meta > * { - height: 18px; - position: absolute; - top: 15px; } - .courses .course .info .meta .complete { - left: 0px; } - .courses .course .info .meta .complete p { - font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif; } - .courses .course .info .meta .complete p span { - color: #3c3c3c; - font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 3px; } - .courses .course .info .meta .dates p { - color: #a0a0a0; - font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - text-align: right; } - .courses .course .info .meta .dates p:first-child { - border-right: 1px solid #c8c8c8; - margin-right: 10px; - padding-right: 10px; } - .courses .course .info .meta .dates p time { - color: #3c3c3c; - font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 3px; } - .courses .course .info .meta .end-date { - border-left: 1px solid #c8c8c8; - right: 0px; - padding-left: 15px; } - @media only screen and (max-width: 320px) { - .courses .course .info .meta .end-date { - display: none; } } - .courses .course .info .meta .end-date p { - color: #a0a0a0; - font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif; - text-align: right; } - .courses .course .info .meta .end-date p time { - color: #3c3c3c; - font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 3px; } - .courses .course .info .meta .progress { - -webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false); - left: 90px; - right: 140px; } - @media only screen and (max-width: 320px) { - .courses .course .info .meta .progress { - right: 0px; } } - .courses .course .info .meta .progress .meter { - background: #e6e6e6; - border: 1px solid #c8c8c8; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - height: 100%; - padding: 2px; } - .courses .course .info .meta .progress .meter .meter-fill { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - background: #d2d2d2; - height: 100%; - width: 60%; } - .courses .course:hover { - background: #f5f5f5; - -webkit-box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false); - box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false); - cursor: pointer; } - .courses .course:hover .edit { - background: #dcdcdc; - border-color: #bebebe; } - .courses .course:hover .cover { - opacity: 1; } - .courses .course:hover h2 { - color: #1d9dd9; } - .courses .course:hover .meta { - opacity: 0.9; } - -nav.course-material { - background: #d2d2d2; - zoom: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false); - border-bottom: 1px solid #bebebe; - margin: 0px auto 0px; - padding: 0px; - width: 100%; } - nav.course-material:before, nav.course-material:after { - content: ""; - display: table; } - nav.course-material:after { - clear: both; } - nav.course-material .inner-wrapper { - margin: 0 auto; - max-width: 1200px; - width: 100%; } - nav.course-material ol.course-tabs { - -webkit-border-top-left-radius: 4px; - -moz-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - -ms-border-top-left-radius: 4px; - -o-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; - -moz-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - -ms-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; - border-top-right-radius: 4px; - zoom: 1; - padding: 10px 0 0 0; } - nav.course-material ol.course-tabs:before, nav.course-material ol.course-tabs:after { - content: ""; - display: table; } - nav.course-material ol.course-tabs:after { - clear: both; } - nav.course-material ol.course-tabs li { - float: left; - list-style: none; } - nav.course-material ol.course-tabs li a { - color: #a0a0a0; - display: block; - text-align: center; - padding: 5px 13px; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.4); } - nav.course-material ol.course-tabs li a:hover { - color: #3c3c3c; } - nav.course-material ol.course-tabs li a.active { - background: white; - border: 1px solid #c8c8c8; - border-bottom: 0px; - -webkit-border-top-left-radius: 4px; - -moz-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - -ms-border-top-left-radius: 4px; - -o-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; - -moz-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - -ms-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -webkit-box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false); - box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false); - color: #3c3c3c; } - -.course-content { - margin-top: 30px; } - .course-content .courseware { - background: #f0f0f0; - height: 600px; } - -.find-courses { - margin: 0 10px; } - .find-courses > header { - margin-bottom: 50px; } - .find-courses > header .universities { - zoom: 1; - font-size: 0px; - margin: 0 auto; - width: 48.744%; } - .find-courses > header .universities:before, .find-courses > header .universities:after { - content: ""; - display: table; } - .find-courses > header .universities:after { - clear: both; } - .find-courses > header .universities .university { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - opacity: 0.7; - -webkit-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -moz-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -ms-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -o-transition-property: compact(opacity, false, false, false, false, false, false, false, false); - transition-property: compact(opacity, false, false, false, false, false, false, false, false); - -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - transition-duration: compact(0.15s, false, false, false, false, false, false, false, false); - -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - transition-timing-function: compact(linear, false, false, false, false, false, false, false, false); - -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false); - -o-transition-delay: compact(0, false, false, false, false, false, false, false, false); - transition-delay: compact(0, false, false, false, false, false, false, false, false); - width: 48.744%; - vertical-align: middle; } - .find-courses > header .universities .university img { - max-width: 100%; } - .find-courses > header .universities .university.mit { - margin-right: 2.513%; } - .find-courses > header .universities span.divider { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - height: 120px; - vertical-align: middle; } - .find-courses .courses { - zoom: 1; - width: 100%; } - .find-courses .courses:before, .find-courses .courses:after { - content: ""; - display: table; } - .find-courses .courses:after { - clear: both; } - .find-courses .courses .course { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - float: left; - width: 48.744%; } - @media only screen and (max-width: 768px) { - .find-courses .courses .course { - float: none; - margin-right: 0px; - width: 100%; } } - .find-courses .courses .course:nth-child(odd) { - margin-right: 2.513%; } - -.course-info .course-description, .course-info .who-should-take, .course-info .who-shouldnt-take, .course-info .syllubus, .course-info .faq { - display: none; } -.course-info section { - margin-top: 20px; } -.course-info h2 { - font-size: 2em; } -.course-info h3 { - font-size: 1.4em; - margin-bottom: 16px; } -.course-info p { - color: #666666; } -.course-info header { - background: #f0f0f0; - border: 1px solid #c8c8c8; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false); - margin-top: 30px; - padding: 22px 194px 22px 22px; - position: relative; } - .course-info header > img { - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - -ms-border-radius: 10px; - -o-border-radius: 10px; - border-radius: 10px; - float: right; - height: 150px; - position: absolute; - right: 20px; - top: 20px; - width: 150px; } - .course-info header h2 { - margin-bottom: 12px; } - .course-info header h2 .course-number { - color: #a0a0a0; } - .course-info header h3 { - margin-bottom: 22px; } - .course-info header .course-times { - margin-top: 22px; } - .course-info header .course-times .start-time, .course-info header .course-times .end-time, .course-info header .course-times .duration, .course-info header .course-times .separator { - color: #666666; } - .course-info header .course-times .duration { - padding-left: 1em; } - .course-info header .course-times .separator { - padding: 0 .5em; } -.course-info .sign-up { - margin: 2em 0; - text-align: center; } - .course-info .sign-up .button { - border: 1px solid #0d72a2; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false); - color: white; - display: inline; - font-size: 11px; - font-weight: bold; - background-color: #1d9dd9; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false))); - background-image: -webkit-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: -moz-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: -ms-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: -o-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - padding: 6px 18px 7px; - text-shadow: 0 1px 0 #076794; - -webkit-background-clip: padding-box; - font-size: 1.4em; } - .course-info .sign-up .button:hover { - -webkit-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false); - cursor: pointer; - background-color: #1e8bbe; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false))); - background-image: -webkit-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: -moz-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: -ms-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: -o-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); } - .course-info .sign-up .button:active { - border: 1px solid #0d72a2; - -webkit-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); - box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); } -.course-info .teacher-description { - background: #fafafa; - border: 1px solid #c8c8c8; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - float: left; - margin: 0 25px 3em 0; - padding: 0 22px; - position: relative; - width: 65.829%; } - .course-info .teacher-description h3, .course-info .teacher-description p { - padding-left: 190px; } - .course-info .teacher-description .teacher-image { - margin: 0 16px 0 0; - max-width: 170px; - position: absolute; - text-align: center; - top: -20px; } - .course-info .teacher-description .teacher-image .teacher-name { - font-weight: bold; - color: #646464; - position: relative; - top: 12px; } - .course-info .teacher-description .teacher-image img { - border: 1px solid #666666; - -webkit-box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false); - box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false); - max-width: 100%; } -.course-info .expand-more { - border: 1px solid #0d72a2; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false); - color: white; - display: inline; - font-size: 11px; - font-weight: bold; - background-color: #1d9dd9; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false))); - background-image: -webkit-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: -moz-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: -ms-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: -o-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - background-image: linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)); - padding: 6px 18px 7px; - text-shadow: 0 1px 0 #076794; - -webkit-background-clip: padding-box; - display: block; - float: left; - font-size: 1.4em; - margin: 0 auto; - text-align: center; - width: 23.116%; } - .course-info .expand-more:hover { - -webkit-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false); - box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false); - cursor: pointer; - background-color: #1e8bbe; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false))); - background-image: -webkit-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: -moz-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: -ms-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: -o-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); - background-image: linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); } - .course-info .expand-more:active { - border: 1px solid #0d72a2; - -webkit-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); - -moz-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); - box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); } -.course-info .course-description { - background: #fafafa; - border: 1px solid #c8c8c8; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - padding: 22px; } -.course-info .syllubus ul { - list-style-type: none; } - .course-info .syllubus ul li { - padding: .2em 0; } -.course-info .faq ul li { - margin-bottom: 1em; } diff --git a/lms/static/sass/screen.scss b/lms/static/sass/screen.scss deleted file mode 100644 index 34d2efd634..0000000000 --- a/lms/static/sass/screen.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import 'bourbon/bourbon'; -@import 'reset'; -@import 'base'; -@import 'base_extends'; -@import 'base_animations'; - -@import 'shared_forms'; -@import 'shared_footer'; -@import 'shared_header'; - -@import 'index'; -@import 'dashboard'; -@import 'course'; -@import 'find_courses'; -@import 'course_info'; diff --git a/lms/templates/course.html b/lms/templates/course.html new file mode 100644 index 0000000000..0b27e191ea --- /dev/null +++ b/lms/templates/course.html @@ -0,0 +1,26 @@ +<%namespace name='static' file='static_content.html'/> + +%for i in xrange(6): +
+ +
+
+
+ +
+
+
+

18th Century History

+

Adam Smith, Harvard University

+
+
Register
+
+
+

Starts:

+

Ends:

+
+
+
+
+
+%endfor diff --git a/lms/templates/course_filter.html b/lms/templates/course_filter.html new file mode 100644 index 0000000000..9e7c0a16f4 --- /dev/null +++ b/lms/templates/course_filter.html @@ -0,0 +1,50 @@ +
+ +
diff --git a/lms/templates/courses.html b/lms/templates/courses.html index da294e8efc..5d381b74e3 100644 --- a/lms/templates/courses.html +++ b/lms/templates/courses.html @@ -1,43 +1,19 @@ <%inherit file="main.html" /> -<%include file="guest_navigation.html" args="active_page='info'" /> <%namespace name='static' file='static_content.html'/> -
-
-
-
- -
- -
-
- -

Current Courses offered by MIT and Harvard University

+
+
+
+ +

Explore courses from universities around the world.

+
+
+
+ <%include file="course_filter.html" />
- + <%include file="course.html" />
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 91244e30c4..6d6a84c424 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -32,7 +32,7 @@
-