diff --git a/lms/static/sass/_base_extends.scss b/lms/static/sass/_base_extends.scss
index 193f649d42..6049170ea3 100644
--- a/lms/static/sass/_base_extends.scss
+++ b/lms/static/sass/_base_extends.scss
@@ -1,11 +1,57 @@
.faded-hr-divider {
- @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.8) 15%, rgb(200,200,200) 50%, rgba(200,200,200, 0.8) 85%, rgba(255,255,255, 0)));
+ @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+ rgba(200,200,200, 1) 50%,
+ rgba(200,200,200, 0)));
+ height: 1px;
+ width: 100%;
+}
+
+.faded-hr-divider-light {
+ @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+ rgba(255,255,255, 0.8) 50%,
+ rgba(255,255,255, 0)));
height: 1px;
width: 100%;
}
.faded-vertical-divider {
- @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 25%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 75%, rgba(255,255,255, 0)));
+ @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
+ rgba(200,200,200, 1) 50%,
+ rgba(200,200,200, 0)));
height: 100%;
width: 1px;
}
+
+.faded-vertical-divider-light {
+ @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
+ rgba(255,255,255, 0.6) 50%,
+ rgba(255,255,255, 0)));
+ height: 100%;
+ width: 1px;
+}
+
+.vertical-divider {
+ @extend .faded-vertical-divider;
+ position: relative;
+
+ &::after {
+ @extend .faded-vertical-divider-light;
+ content: "";
+ display: block;
+ position: absolute;
+ left: 1px;
+ }
+}
+
+.horizontal-divider {
+ @extend .faded-hr-divider;
+ position: relative;
+
+ &::after {
+ @extend .faded-hr-divider-light;
+ content: "";
+ display: block;
+ position: absolute;
+ top: 1px;
+ }
+}
diff --git a/lms/static/sass/_base_mixins.scss b/lms/static/sass/_base_mixins.scss
index 7fd69b62be..4060d17e12 100644
--- a/lms/static/sass/_base_mixins.scss
+++ b/lms/static/sass/_base_mixins.scss
@@ -5,5 +5,5 @@
min-height: $height;
min-width: $width;
position: fixed;
- top: 35%;
+ top: 45%;
}
diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss
index 9c480a3a1f..3429ec80fc 100644
--- a/lms/static/sass/_index.scss
+++ b/lms/static/sass/_index.scss
@@ -87,7 +87,7 @@
}
a {
- @include button(shiny, $pink);
+ @include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block;
@@ -95,20 +95,7 @@
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;
- }
+ width: flex-grid(12);
}
form {
diff --git a/lms/static/sass/_shared_header.scss b/lms/static/sass/_shared_header.scss
index 879f734993..35a7881c37 100644
--- a/lms/static/sass/_shared_header.scss
+++ b/lms/static/sass/_shared_header.scss
@@ -18,75 +18,87 @@ header.app {
display: block;
float: left;
height: 100%;
- margin: 16px 30px 0px 0px;
- position: relative;
-
- &::after {
- @extend .faded-vertical-divider;
- content: "";
- display: block;
- height: 50px;
- position: absolute;
- right: -15px;
- top: -12px;
- }
+ margin: 16px 15px 0px 0px;
}
- 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 {
- }
+ .divider {
+ @extend .vertical-divider;
+ @include inline-block;
+ height: 40px;
+ vertical-align: middle;
}
- nav.guest {
- float: right;
+
+ nav {
+ height: 40px;
+ margin-top: 8px;
+
+ &.find-courses {
+ float: left;
+ }
+
+ &.guest {
+ float: right;
+ }
ol {
font-size: 0em;
li {
@include inline-block;
- margin-top: 12px;
- padding: 0px 5px;
- position: relative;
- vertical-align: bottom;
+ vertical-align: top;
+ }
- &:last-child {
- padding-right: 0px;
- }
+ li.secondary {
+ margin: 0px 15px;
a {
@include border-radius(3px);
border: 1px solid transparent;
- color: $base-font-color;
+ @include box-sizing(border-box);
+ color: $lighter-base-font-color;
display: block;
- font: normal italic 1.2rem/1.2rem $serif;
- height: 15px;
- padding: 8px;
+ font: normal italic 1.2rem/1.4rem $serif;
+ height: 30px;
+ @include inline-block;
+ margin: 5px 15px 5px 0px;
+ padding: 7px 2px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
+ vertical-align: middle;
+
+ &:last-child {
+ margin-right: 0px;
+ }
+
+ &:hover {
+ color: $base-font-color;
+ }
+ }
+ }
+
+ li.primary {
+ a {
+ border: 1px solid transparent;
+ @include border-radius(3px);
+ @include box-sizing(border-box);
+ color: $base-font-color;
+ display: block;
+ font: normal 1.2rem/1.4rem $sans-serif;
+ height: 30px;
+ @include inline-block;
+ margin: 5px;
+ padding: 6px 8px;
+ text-decoration: none;
+ text-transform: uppercase;
+ text-shadow: 0 1px rgba(255,255,255, 0.6);
+ vertical-align: middle;
&: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;
}
}
}
diff --git a/lms/static/sass/_shared_login_modal.scss b/lms/static/sass/_shared_login_modal.scss
index b2dbb3994e..968edae0d4 100644
--- a/lms/static/sass/_shared_login_modal.scss
+++ b/lms/static/sass/_shared_login_modal.scss
@@ -1,5 +1,5 @@
.modal-wrapper {
- @include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7)));
+ @include background-image(radial-gradient(50% 45%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
bottom: 0;
content: "";
display: none;
@@ -16,48 +16,58 @@
.login-modal {
background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
- @include border-radius(4px);
- @include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5));
+ @include border-radius(0px);
+ @include box-shadow(0 15px 70px 5px rgba(0,0,0, 0.5));
color: #fff;
- padding: 10px;
- width: grid-width(7);
- @include vertically-and-horizontally-centered(400px, grid-width(7));
+ padding: 8px;
+ width: grid-width(6);
+ @include vertically-and-horizontally-centered(410px, grid-width(6));
z-index: 10;
.inner-wrapper {
- @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
- @include border-radius(4px);
+ background: rgb(240,240,240);
+ @include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
- height: 380px;
+ height: 410px;
overflow: hidden;
- padding: 30px;
position: relative;
- &::before {
- @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
- content: "";
- display: block;
- height: 400px;
- left: 0px;
- margin: 0 auto;
- position: absolute;
- bottom: -140px;
- width: 100%;
- }
-
header {
margin-bottom: 30px;
- padding-top: 5px;
+ overflow: hidden;
+ padding: 28px 20px 0px;
position: relative;
z-index: 2;
- &::after {
- @extend .faded-hr-divider;
- bottom: 0px;
+ &::before {
+ @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
+ height: 400px;
+ left: 0px;
+ margin: 0 auto;
position: absolute;
+ top: -140px;
+ width: 100%;
+ z-index: 1;
+ }
+
+ hr {
+ @extend .faded-hr-divider-light;
+ border: none;
+ margin: 0px;
+ position: relative;
+ z-index: 2;
+
+ &::after {
+ @extend .faded-hr-divider;
+ bottom: 0px;
+ content: "";
+ display: block;
+ position: absolute;
+ top: -1px;
+ }
}
h3 {
@@ -68,12 +78,15 @@
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase;
vertical-align: middle;
+ position: relative;
+ z-index: 2;
}
}
form {
- @include clearfix;
+ margin-bottom: 12px;
+ padding: 0px 20px;
position: relative;
z-index: 2;
@@ -81,37 +94,30 @@
display: none;
}
- label.remember-me {
- background: rgb(230,230,230);
- border: 1px solid rgb(200,200,200);
- @include border-radius(3px);
- @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
- display: block;
- margin-bottom: 60px;
- padding: 8px 10px;
- position: relative;
-
- &::before {
- @extend .faded-hr-divider;
- bottom: -30px;
- content: "";
- display: block;
- position: absolute;
- }
- }
-
input[type="checkbox"] {
margin-right: 5px;
}
input[type="email"],
input[type="password"] {
+ background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
+ label.remember-me {
+ background: rgb(230,230,230);
+ border: 1px solid rgb(200,200,200);
+ @include border-radius(3px);
+ @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+ display: block;
+ margin-bottom: 38px;
+ padding: 8px 10px;
+ position: relative;
+ }
+
input[type="submit"] {
display: block;
height: 45px;
@@ -121,9 +127,8 @@
}
.login-extra {
- padding: 15px 0px;
position: relative;
-
+ z-index: 2;
p {
color: $lighter-base-font-color;
@@ -134,6 +139,10 @@
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-decoration: underline;
+
+ &:hover {
+ color: $base-font-color;
+ }
}
span + a {
@@ -143,17 +152,14 @@
}
.close-modal {
- //background: rgb(240,240,240);
- //border: 1px solid rgba(180,180,180, 0.7);
@include border-radius(2px);
- //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1));
cursor: pointer;
@include inline-block;
- padding: 5px 10px;
+ padding: 10px;
position: absolute;
- right: 5px;
- top: 5px;
- @include transition(all, 0.15s, ease-out);
+ right: 2px;
+ top: 0px;
+ z-index: 3;
.inner {
p {
@@ -166,9 +172,6 @@
}
&:hover {
- //background: rgb(235,235,235);
- //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125));
-
p {
color: $base-font-color;
}
diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css
index 0c86acd807..8ad5d8f412 100755
--- a/lms/static/sass/application.css
+++ b/lms/static/sass/application.css
@@ -340,24 +340,58 @@ a:link, a:visited {
.container:after {
clear: both; }
-.faded-hr-divider, .modal-wrapper .login-modal .inner-wrapper header::after, .modal-wrapper .login-modal .inner-wrapper form label.remember-me::before, .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));
- background-image: -o-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: 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));
+.faded-hr-divider, .horizontal-divider, .modal-wrapper .login-modal .inner-wrapper header hr::after, .home .university-partners:before, .home .university-partners:after {
+ background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
height: 1px;
width: 100%; }
-.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));
- background-image: -o-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: 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));
+.faded-hr-divider-light, .horizontal-divider::after, .modal-wrapper .login-modal .inner-wrapper header hr {
+ background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+ background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+ background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+ background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+ background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+ height: 1px;
+ width: 100%; }
+
+.faded-vertical-divider, .vertical-divider, header.app .divider {
+ background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: -o-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+ background-image: linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
height: 100%;
width: 1px; }
+.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after {
+ background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+ background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+ background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+ background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+ height: 100%;
+ width: 1px; }
+
+.vertical-divider, header.app .divider {
+ position: relative; }
+ .vertical-divider::after, header.app .divider::after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 1px; }
+
+.horizontal-divider {
+ position: relative; }
+ .horizontal-divider::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 1px; }
+
.animation-title-appear {
-webkit-animation: title-appear 4.65s ease-out;
-moz-animation: title-appear 4.65s ease-out;
@@ -996,79 +1030,93 @@ header.app {
display: block;
float: left;
height: 100%;
- 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: 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 {
+ margin: 16px 15px 0px 0px; }
+ header.app .divider {
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+ height: 40px;
+ vertical-align: middle; }
+ header.app nav {
+ height: 40px;
+ margin-top: 8px; }
+ header.app nav.find-courses {
+ float: left; }
+ header.app nav.guest, header.app nav.user {
+ float: right; }
+ header.app nav ol {
font-size: 0em; }
- header.app nav.guest ol li {
+ header.app nav 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 {
+ vertical-align: top; }
+ header.app nav ol li.secondary {
+ margin: 0px 15px; }
+ header.app nav ol li.secondary a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
- color: #3c3c3c;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ color: #a0a0a0;
display: block;
- font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
- height: 15px;
- padding: 8px;
+ font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
+ height: 30px;
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+ margin: 5px 15px 5px 0px;
+ padding: 7px 2px;
text-decoration: none;
text-transform: lowercase;
- text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
- header.app nav.guest ol li a:hover {
- background: #dcdcdc;
- background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
- background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
- background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
- background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
- background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
- border-color: #c8c8c8;
- -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
- -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
- box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ vertical-align: middle; }
+ header.app nav ol li.secondary a:last-child {
+ margin-right: 0px; }
+ header.app nav ol li.secondary a:hover {
color: #3c3c3c; }
+ header.app nav ol li.primary a {
+ border: 1px solid transparent;
+ -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;
+ color: #3c3c3c;
+ display: block;
+ font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
+ height: 30px;
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+ margin: 5px;
+ padding: 6px 8px;
+ text-decoration: none;
+ text-transform: uppercase;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ vertical-align: middle; }
+ header.app nav ol li.primary a:hover {
+ 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); }
header.app nav.user {
float: right; }
header.app nav.user ol {
@@ -1630,11 +1678,11 @@ header.app {
height: 36px; }
.modal-wrapper {
- background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
- background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
- background-image: -ms-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
- background-image: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
- background-image: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
+ background-image: -webkit-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+ background-image: -moz-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+ background-image: -ms-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+ background-image: -o-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+ background-image: radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
bottom: 0;
content: "";
display: none;
@@ -1648,64 +1696,67 @@ header.app {
.modal-wrapper .login-modal {
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
- box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+ -webkit-box-shadow: 0 15px 70px 5px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 15px 70px 5px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 15px 70px 5px rgba(0, 0, 0, 0.5);
color: #fff;
- padding: 10px;
- width: 570px;
+ padding: 8px;
+ width: 485px;
left: 50%;
- margin-left: -285px;
- margin-top: -200px;
- min-height: 400px;
- min-width: 570px;
+ margin-left: -242.5px;
+ margin-top: -205px;
+ min-height: 410px;
+ min-width: 485px;
position: fixed;
- top: 35%;
+ top: 45%;
z-index: 10; }
.modal-wrapper .login-modal .inner-wrapper {
- background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
- background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
- background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
- background-image: -o-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
- background-image: linear-gradient(-90deg, #f5f5f5, #e1e1e1);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ background: #f0f0f0;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
- height: 380px;
+ height: 410px;
overflow: hidden;
- padding: 30px;
position: relative; }
- .modal-wrapper .login-modal .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%);
- content: "";
- display: block;
- height: 400px;
- left: 0px;
- margin: 0 auto;
- position: absolute;
- bottom: -140px;
- width: 100%; }
.modal-wrapper .login-modal .inner-wrapper header {
margin-bottom: 30px;
- padding-top: 5px;
+ overflow: hidden;
+ padding: 28px 20px 0px;
position: relative;
z-index: 2; }
- .modal-wrapper .login-modal .inner-wrapper header::after {
- bottom: 0px;
+ .modal-wrapper .login-modal .inner-wrapper header::before {
+ background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+ background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+ background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+ background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+ background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
content: "";
display: block;
- position: absolute; }
+ height: 400px;
+ left: 0px;
+ margin: 0 auto;
+ position: absolute;
+ top: -140px;
+ width: 100%;
+ z-index: 1; }
+ .modal-wrapper .login-modal .inner-wrapper header hr {
+ border: none;
+ margin: 0px;
+ position: relative;
+ z-index: 2; }
+ .modal-wrapper .login-modal .inner-wrapper header hr::after {
+ bottom: 0px;
+ content: "";
+ display: block;
+ position: absolute;
+ top: -1px; }
.modal-wrapper .login-modal .inner-wrapper header h3 {
color: #a0a0a0;
font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
@@ -1713,18 +1764,25 @@ header.app {
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
text-transform: uppercase;
- vertical-align: middle; }
+ vertical-align: middle;
+ position: relative;
+ z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper form {
- zoom: 1;
+ margin-bottom: 12px;
+ padding: 0px 20px;
position: relative;
z-index: 2; }
- .modal-wrapper .login-modal .inner-wrapper form:before, .modal-wrapper .login-modal .inner-wrapper form:after {
- content: "";
- display: table; }
- .modal-wrapper .login-modal .inner-wrapper form:after {
- clear: both; }
.modal-wrapper .login-modal .inner-wrapper form label {
display: none; }
+ .modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] {
+ margin-right: 5px; }
+ .modal-wrapper .login-modal .inner-wrapper form input[type="email"],
+ .modal-wrapper .login-modal .inner-wrapper form input[type="password"] {
+ background: white;
+ display: block;
+ height: 45px;
+ margin-bottom: 20px;
+ width: 100%; }
.modal-wrapper .login-modal .inner-wrapper form label.remember-me {
background: #e6e6e6;
border: 1px solid #c8c8c8;
@@ -1735,30 +1793,17 @@ header.app {
-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);
display: block;
- margin-bottom: 60px;
+ margin-bottom: 38px;
padding: 8px 10px;
position: relative; }
- .modal-wrapper .login-modal .inner-wrapper form label.remember-me::before {
- bottom: -30px;
- content: "";
- display: block;
- position: absolute; }
- .modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] {
- margin-right: 5px; }
- .modal-wrapper .login-modal .inner-wrapper form input[type="email"],
- .modal-wrapper .login-modal .inner-wrapper form input[type="password"] {
- display: block;
- height: 45px;
- margin-bottom: 20px;
- width: 100%; }
.modal-wrapper .login-modal .inner-wrapper form input[type="submit"] {
display: block;
height: 45px;
margin: 0 auto;
width: 70%; }
.modal-wrapper .login-modal .inner-wrapper .login-extra {
- padding: 15px 0px;
- position: relative; }
+ position: relative;
+ z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
@@ -1767,6 +1812,8 @@ header.app {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-decoration: underline; }
+ .modal-wrapper .login-modal .inner-wrapper .login-extra p a:hover {
+ color: #3c3c3c; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p span + a {
margin-left: 15px; }
.modal-wrapper .login-modal .inner-wrapper .close-modal {
@@ -1779,15 +1826,11 @@ header.app {
zoom: 1;
*display: inline;
*vertical-align: auto;
- padding: 5px 10px;
+ padding: 10px;
position: absolute;
- right: 5px;
- top: 5px;
- -webkit-transition: all, 0.15s, ease-out;
- -moz-transition: all, 0.15s, ease-out;
- -ms-transition: all, 0.15s, ease-out;
- -o-transition: all, 0.15s, ease-out;
- transition: all, 0.15s, ease-out; }
+ right: 2px;
+ top: 0px;
+ z-index: 3; }
.modal-wrapper .login-modal .inner-wrapper .close-modal .inner p {
color: #a0a0a0;
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
@@ -1900,29 +1943,29 @@ header.app {
-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;
+ 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 #db4274;
- -moz-box-shadow: inset 0 1px 0 0 #db4274;
- box-shadow: inset 0 1px 0 0 #db4274;
+ -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: #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%);
+ 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 #2a0000;
+ text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -1938,78 +1981,23 @@ header.app {
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
- width: 48.744%; }
+ width: 100%; }
.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%); }
+ 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: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; }
+ -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+ -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+ box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a:disabled {
opacity: 0.5;
cursor: not-allowed; }
- .home > 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"] {
@@ -2555,7 +2543,7 @@ nav.course-material {
padding-bottom: 20px;
position: relative;
width: 31.658%; }
- .course-info .sidebar .faded-vertical-divider, .course-info .sidebar header.app a.logo::after, header.app .course-info .sidebar a.logo::after {
+ .course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider {
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/templates/about.html b/lms/templates/about.html
new file mode 100644
index 0000000000..498f2da40c
--- /dev/null
+++ b/lms/templates/about.html
@@ -0,0 +1,3 @@
+<%inherit file="main.html" />
+
+About Us
diff --git a/lms/templates/index.html b/lms/templates/index.html
index 07967c8668..5bc997891b 100644
--- a/lms/templates/index.html
+++ b/lms/templates/index.html
@@ -22,7 +22,6 @@
diff --git a/lms/templates/jobs.html b/lms/templates/jobs.html
new file mode 100644
index 0000000000..c60ae34484
--- /dev/null
+++ b/lms/templates/jobs.html
@@ -0,0 +1,3 @@
+<%inherit file="main.html" />
+
+Jobs
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index aafc3c1df4..87f8f0704e 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -5,6 +5,7 @@