From 1be9196d3c9276d9490b4a11dbcfd226576a89d5 Mon Sep 17 00:00:00 2001 From: Galen Frechette Date: Fri, 6 Jul 2012 18:28:34 -0400 Subject: [PATCH] wip header, wip header refactoring, improves course object visual design, improves footer --- lms/static/images/logo.png | Bin 2805 -> 4139 bytes lms/static/images/logo_bw.png | Bin 0 -> 2470 bytes lms/static/js/my_courses_dropdown.js | 10 +- lms/static/sass/_about.scss | 4 +- lms/static/sass/_base.scss | 5 + lms/static/sass/_find_courses.scss | 6 +- lms/static/sass/_index.scss | 33 +- lms/static/sass/_shared_footer.scss | 35 +- lms/static/sass/_shared_header.scss | 192 ++--- lms/static/sass/_shared_list_of_courses.scss | 111 +-- lms/static/sass/application.css | 763 ++++++++++--------- lms/templates/course.html | 182 ++++- lms/templates/footer.html | 6 +- lms/templates/index.html | 73 +- lms/templates/jobs.html | 8 +- lms/templates/navigation.html | 89 +-- 16 files changed, 907 insertions(+), 610 deletions(-) create mode 100644 lms/static/images/logo_bw.png diff --git a/lms/static/images/logo.png b/lms/static/images/logo.png index b5b510224a9b75f1d1d425f826505f7c20a07248..b9e4199c85e2761be36e8e21ad3290497ccdafb3 100644 GIT binary patch delta 3461 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 RL4V&Z5Zutzpc3X7{(l5mwc`K) delta 2117 zcmZ|Rc|6mP1IO{%5F3$uD96(9b&a`3(_|y}O^Bl8KE6yjwvVec$(iNMnY*l9UF4>a zV~&!m<;-#)eHDJ+KYrgo`~UfP{r7%6-qn)3f~mq#VGec>2$XwL$nUun5-f?=FwjQf z@ai~KEgTAkN9n7ns^YZ`3~=gN1e_L5HNy)m{vXo#BPs=}$o;>h_9rAQ84_xJ!xM8o zBN)v8UlRQ%ouLBJ2aNT1sUXmao0kl5wznti9bl$54kFklETqgI2AQB= zuUmB>s{8Bdm#$e$0OJEA5oE;YM$g8C7&O$6tKr(ZWb zDi0fC*N0_4^CTq1b)7g#@7wupBGhj5qiTYa)XVGJFp=9oHa?C_Mn}}kIi0lAvq4BG z3gj6PT;c)WA7Yzf`Oq;T=s?0bq+O<7P)|X{I+`9aR4q8wK3b6wMZfQN^gGo~Zo?=B zwUx@$2#fR^Ih|f0tZRNBxL!0ZP+grppHqd}x@ew2xysmWnVcV@0om=}?sCj=c zt)*=^!id*tTi>d$cHf}IwhwANYm(5l9r-jl?kTi%HYwlpxY#^jIvdO^vQ`ODimnrL zD6^B1c=mu|S?ueoCu&^cj8f=sA=a!wZa2$Ac$|`B)S-oPk4EzPe{g#*7qgKAj zn`M`|k}ujE1jbJA!N25LK<1!}i5xDhim3SLi@KZ=TMOzF4%0nn*2O=R=yT{t$gM3i zO$#k1K2JKmlTr(y@30UIEtlu8pr{J#7{L5FSpkBTHU9Qd!UJ;w@<`mi(k_sP*23j9 zoD(nGIGbc@$SW3?(-$c7!otOA>&n1b@yT+Sw|sy!$()MrsnDbmO44>CnyWM%-dOo9 zX#w#ru($5XnqlGe)yeZ>Ys82L(vAS=27Rj5L2YU#k9;!&G4@8EWGwUPr>JWmU>bC7 zH79$w(s%Z0{1J?C;maZ$eHChvQuWEkoyg|$n=zAv5x7=Y?6rC|Y;xzldgXYV`Vfv) zqp`8^NrAR=KuCRk=S~(o6;<)MVx~b8`CjAL@7vq*mguSz^#b*lE2Hzi9Uh3SxsGYr z+s441*K0z;gLMWS5USY=$cC8#peE&Ea-sL1@+#nbEbxq;$W=q$xHm9;^pAF28;yI> z*6JwzWz=WJgW1zME%il3D6F3VhpLI|(QN0cy3Bb1g_sz8e+)PD`Fvz6)iui`TyFB#L|zgccM+jg(==$b;m8kXLaq--9q%z} z#n#ujZ13GUV4J74{Q8ibR*V2=l>Q!V+xqN+BKuN-$)T3AI4`fC)o7Zr|AfUtMIBT3 zyZm2lv@togA+ezWa(I=}bV5 z4w>Uw$7QqBgnCJxQ=ao~VkQ=vnbRuwzq-+absU}LfTZWJ>;*sUCRjT#1VHdr)WbW{ zlzh>Gyl|2G?|+I&S!EcXqJ2GYuNdOwp{JI}%#F7$M(;DPw6Gg}I7h*b}I{TH)vv^#tFWC;~(|GjesA90$Ep(Xq z)}DVIShS+p60&5;c>~^$e^EQoH#()f01ON9jLOi+swP=eC;uq{n<6F5#G(R%0`}vZ z>X;k4L5v=Hfw+GwBv)4+E<}3Ex#GcJnsHt&@`A*$pZ(F+^7yxa<5o#sg*TAKGl z;g#C93q3i(lrBXVuoA1XnDr%rZf7~2T4A5c)JHX^4&3a=t=5(Ew`)NVQ1?4N)w>>* T49$P<0_YOn+~Ar1)!6?5KlI%m diff --git a/lms/static/images/logo_bw.png b/lms/static/images/logo_bw.png new file mode 100644 index 0000000000000000000000000000000000000000..6ce9c460dbcde76e8ecec26f12816ff2669e2205 GIT binary patch literal 2470 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 W=l8yKMM<`6FDDNdA40WLc-o(b5E+61 literal 0 HcmV?d00001 diff --git a/lms/static/js/my_courses_dropdown.js b/lms/static/js/my_courses_dropdown.js index 9c65631174..afd0f21686 100644 --- a/lms/static/js/my_courses_dropdown.js +++ b/lms/static/js/my_courses_dropdown.js @@ -1,9 +1,9 @@ $(document).ready(function () { - $('a.options').toggle(function() { - $('ol.user-options').addClass("expanded"); - $('a.options').addClass("active"); + $('a.dropdown').toggle(function() { + $('ul.dropdown-menu').addClass("expanded"); + $('a.dropdown').addClass("active"); }, function() { - $('ol.user-options').removeClass("expanded"); - $('a.options').removeClass("active"); + $('ul.dropdown-menu').removeClass("expanded"); + $('a.dropdown').removeClass("active"); }); }); diff --git a/lms/static/sass/_about.scss b/lms/static/sass/_about.scss index 56cec0aa13..668b05c863 100644 --- a/lms/static/sass/_about.scss +++ b/lms/static/sass/_about.scss @@ -87,7 +87,7 @@ } .faq { - //display: none; + display: none; @include clearfix; nav.categories { @@ -99,6 +99,7 @@ width: flex-grid(3); a { + color: $lighter-base-font-color; display: block; letter-spacing: 1px; margin-right: -20px; @@ -107,6 +108,7 @@ text-transform: uppercase; &:hover { + color: $blue; background: rgb(245,245,245); } } diff --git a/lms/static/sass/_base.scss b/lms/static/sass/_base.scss index 3d1145f57f..d0ef3dd742 100644 --- a/lms/static/sass/_base.scss +++ b/lms/static/sass/_base.scss @@ -77,6 +77,11 @@ a:link, a:visited { } } +.content-wrapper { + margin: 0 auto 0; + width: flex-grid(12); +} + .container { @include clearfix; margin: 0 auto 0; diff --git a/lms/static/sass/_find_courses.scss b/lms/static/sass/_find_courses.scss index 4a6968bbcf..f5428ae690 100644 --- a/lms/static/sass/_find_courses.scss +++ b/lms/static/sass/_find_courses.scss @@ -1,8 +1,12 @@ .find-courses { + .container { + margin-bottom: 60px; + } + header.search-intro { background: rgb(240,240,240); border-bottom: 1px solid rgb(200,200,200); - @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); + @include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1)); width: 100%; .inner-wrapper { diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss index 48cddf1bd7..aa92657087 100644 --- a/lms/static/sass/_index.scss +++ b/lms/static/sass/_index.scss @@ -1,13 +1,21 @@ .home { - margin: 50px 10px 100px; + margin: 0px 0px 100px; > header { + background: rgb(250,250,250); + border-bottom: 1px solid rgb(200,200,200); + @include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1)); @include clearfix; min-height: 335px; - margin-bottom: 40px; - position: relative; + padding: 60px 0px 50px; width: flex-grid(12); + .inner-wrapper { + max-width: 1200px; + margin: 0 auto; + position: relative; + } + .video-wrapper { right: 0px; position: absolute; @@ -98,7 +106,6 @@ @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%, rgba(245,245,245, 1) 50%, rgba(245,245,245, 0) 100%)); - border-top: 1px solid rgb(210,210,210); border-bottom: 1px solid rgb(210,210,210); margin-bottom: 0px; overflow: hidden; @@ -234,25 +241,23 @@ width: flex-grid(12); > h2 { - background: rgb(245,245,245); - border: 1px solid rgb(220,220,220); + @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)); + border: 1px solid rgb(210,210,210); border-top: none; @include border-bottom-radius(4px); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); color: $lighter-base-font-color; letter-spacing: 1px; + margin-bottom: 0px; padding: 15px 10px; text-align: center; text-transform: uppercase; - } + text-shadow: 0 1px rgba(255,255,255, 0.6); - .courses { - //background: rgb(245,245,245); - //@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%, - //rgba(255,255,255, 0.5) 20%, - //rgba(255,255,255, 0) 50%, - //rgba(255,255,255, 0.5) 80%, - //rgba(255,255,255, 1) 100%)); + .lowercase { + text-transform: none; + } } } diff --git a/lms/static/sass/_shared_footer.scss b/lms/static/sass/_shared_footer.scss index 955a37b46e..148afedef7 100644 --- a/lms/static/sass/_shared_footer.scss +++ b/lms/static/sass/_shared_footer.scss @@ -1,5 +1,7 @@ footer { - max-width: 1200px; + background: rgb(250,250,250); + border-top: 1px solid rgb(200,200,200); + @include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1)); margin: 0 auto; padding: 0 0 40px; width: flex-grid(12); @@ -11,7 +13,6 @@ footer { } nav { - border-top: 1px solid rgb(200,200,200); @include box-sizing(border-box); @include clearfix; max-width: 1200px; @@ -24,16 +25,23 @@ footer { padding-top: 2px; a.logo { - @include box-sizing(border-box); + @include background-image(url('/static/images/logo.png')); + background-position: 0 -24px; + background-repeat: no-repeat; @include inline-block; float: left; - height: 100%; - margin-right: 14px; - margin-top: 1px; + height: 23px; + margin-right: 15px; + margin-top: 2px; padding-right: 15px; position: relative; + width: 47px; vertical-align: middle; + &:hover { + background-position: 0 0; + } + &::after { @extend .faded-vertical-divider; content: ""; @@ -44,16 +52,11 @@ footer { top: -2px; width: 1px; } - - img { - position: relative; - z-index: 2; - } } p { color: $lighter-base-font-color; - font: normal 1.2rem/1.6rem $serif; + font: italic 1.2rem/1.6rem $serif; @include inline-block; margin: 0 auto; padding-top: 4px; @@ -62,9 +65,9 @@ footer { a { color: $lighter-base-font-color; - font: normal 1.2rem/1.6rem $serif; + font: italic 1.2rem/1.6rem $serif; margin-left: 5px; - text-decoration: underline; + //text-decoration: underline; } } } @@ -74,7 +77,6 @@ footer { font-size: 0em; li { - //border-right: 1px solid rgb(200,200,200); @include inline-block; list-style: none; padding: 0px 15px; @@ -94,7 +96,8 @@ footer { a:link, a:visited { color: $lighter-base-font-color; - font: normal 1.2rem/1.6rem $serif; + font: 300 1.2rem/1.6rem $sans-serif; + letter-spacing: 1px; padding: 6px 0px; } diff --git a/lms/static/sass/_shared_header.scss b/lms/static/sass/_shared_header.scss index 2060ef3266..52c6c3d48e 100644 --- a/lms/static/sass/_shared_header.scss +++ b/lms/static/sass/_shared_header.scss @@ -1,44 +1,62 @@ -header.app { +header.global { + background: rgb(255,255,255); border-bottom: 1px solid rgb(200,200,200); - @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230))); - height: 55px; + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + //@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(245,245,245, 1))); + height: 75px; + position: relative; width: 100%; + z-index: 10; - .wrapper { + nav { @include clearfix; @include box-sizing(border-box); - max-width: 1200px; + height: 40px; margin: 0 auto; - padding: 0px 10px; + max-width: 1200px; + padding-top: 20px; width: flex-grid(12); } - a.logo { - @include box-sizing(border-box); - display: block; + h1.logo { float: left; - height: 100%; - margin: 16px 15px 0px 0px; + margin: 7px 15px 0px 0px; + padding-right: 20px; position: relative; - img { - position: relative; - z-index: 2; + &::before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 45px; + position: absolute; + right: 1px; + top: -12px; + width: 1px; + } + + &::after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 36px; + position: absolute; + right: 0px; + top: 0px; + width: 1px; + } + + a { + @include background-image(url('/static/images/logo.png')); + background-position: 0 0; + background-repeat: no-repeat; + display: block; + height: 23px; + width: 47px; } } - .divider { - @extend .vertical-divider; - @include inline-block; - height: 40px; - vertical-align: middle; - } - - - nav { - height: 40px; - margin-top: 8px; - + ol { &.find-courses { float: left; } @@ -47,67 +65,70 @@ header.app { float: right; } - ol { - font-size: 0em; + > li { + @include inline-block; + margin-right: 20px; + position: relative; + vertical-align: middle; - li { - @include inline-block; - vertical-align: top; + &:last-child { + margin-right: 0px; } - li.secondary { - margin: 0px 15px; + a { + letter-spacing: 1px; + vertical-align: middle; + } + } - a { - @include border-radius(3px); - border: 1px solid transparent; - @include box-sizing(border-box); - color: $lighter-base-font-color; - display: block; - font: 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; + li.secondary { + > a { + color: $lighter-base-font-color; + color: $blue; + display: block; + //font: italic 1.2rem/1.4rem $serif; + font: normal 1.2rem/1.4rem $sans-serif; + @include inline-block; + margin: 0px 20px 0px 0px; + text-decoration: none; + //text-transform: lowercase; + text-transform: uppercase; + text-shadow: 0 1px rgba(255,255,255, 0.6); - &:last-child { - margin-right: 0px; - } + &:last-child { + margin-right: 0px; + } - &:hover { - color: $base-font-color; - } + &:hover { + color: $base-font-color; } } + } - li.primary { - position: relative; + li.primary { + > a { + @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 transparent; + border-color: rgb(200,200,200); + @include border-radius(3px); + @include box-sizing(border-box); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + color: $base-font-color; + display: inline-block; + font: normal 1.2rem/1.4rem $sans-serif; + @include inline-block; + margin: 1px 5px; + padding: 8px 12px; + text-decoration: none; + text-transform: uppercase; + text-shadow: 0 1px rgba(255,255,255, 0.6); + vertical-align: middle; - 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: 38px; - @include inline-block; - margin: 1px 5px; - padding: 10px 8px; - text-decoration: none; - text-transform: uppercase; - text-shadow: 0 1px rgba(255,255,255, 0.6); - vertical-align: middle; + &:last-child { + margin-right: 0px; + } - &:hover, &.active { - @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)); - } + &:hover, &.active { } } } @@ -116,7 +137,7 @@ header.app { float: right; a.user-link { - padding: 9px 8px 11px 40px; + padding: 8px 12px 8px 40px; position: relative; text-transform: none; @@ -129,15 +150,15 @@ header.app { .avatar { background: rgb(220,220,220); @include border-radius(3px); - border: 1px solid rgb(180,180,180); + border: 1px solid rgb(80,80,80); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - height: 22px; + height: 21px; @include inline-block; - left: 8px; + left: 6px; overflow: hidden; position: absolute; - top: 6px; - width: 22px; + top: 5px; + width: 21px; &::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%)); @@ -160,17 +181,17 @@ header.app { } } - ol.user-options { + ul.dropdown-menu { @include border-radius(4px); @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); border: 1px solid rgb(0,0,0); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, rgba(0,0,0, 0.7) 100%)); display: none; - right: 0px; padding: 5px 10px; position: absolute; - top: 52px; + right: 4px; + top: 50px; width: 150px; z-index: 3; @@ -209,6 +230,7 @@ header.app { > a { @include box-sizing(border-box); + @include border-radius(3px); color: rgba(255,255,255, 0.9); display: block; font: italic 1.2rem/1.4rem $serif; diff --git a/lms/static/sass/_shared_list_of_courses.scss b/lms/static/sass/_shared_list_of_courses.scss index 2b84cfb355..7f76731dba 100644 --- a/lms/static/sass/_shared_list_of_courses.scss +++ b/lms/static/sass/_shared_list_of_courses.scss @@ -21,26 +21,27 @@ margin-right: 0; } - //.meta-info { - //background: rgba(0,0,0, 0.6); - //bottom: 8px; - //border: 1px solid rgba(0,0,0, 0.5); - //@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15)); - //@include clearfix; - //left: -4px; - //position: absolute; - //@include transition(all, 0.15s, linear); + .meta-info { + background: rgba(0,0,0, 0.6); + bottom: 6px; + border: 1px solid rgba(0,0,0, 0.5); + @include border-right-radius(2px); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15)); + @include clearfix; + position: absolute; + right: -3px; + @include transition(all, 0.15s, linear); - //p { - //color: rgb(255,255,255); - //font: 300 1.2rem/1.4rem $sans-serif; - //padding: 5px 12px; + p { + color: rgb(255,255,255); + font: 300 1.2rem/1.4rem $sans-serif; + padding: 5px 12px; - //&.university { - //float: left; - //} - //} - //} + &.university { + float: left; + } + } + } .inner-wrapper { border: 1px solid rgba(255,255,255, 1); @@ -114,6 +115,7 @@ } .info { + background: rgb(255,255,255); height: 180px + 130px; left: 0px; position: absolute; @@ -121,31 +123,6 @@ @include transition(all, 0.15s, linear); width: 100%; - .meta-info { - background: rgba(0,0,0, 0.6); - bottom: 130px; - border-top: 1px solid rgba(0,0,0, 0.5); - @include clearfix; - position: absolute; - @include transition(all, 0.15s, linear); - width: 100%; - - p { - color: rgb(255,255,255); - font: 300 1.2rem/1.4rem $sans-serif; - padding: 5px 10px; - - &.university { - float: left; - } - - &.dates { - float: right; - margin-top: 0px; - } - } - } - .cover-image { height: 180px; overflow: hidden; @@ -159,13 +136,49 @@ } .desc { - background: rgb(255,255,255); @include box-sizing(border-box); - height: 130px; + height: 100px; overflow: hidden; - padding: 10px; + padding: 10px 10px 15px 10px; + position: relative; width: 100%; + p { + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .bottom { + @include box-sizing(border-box); + @include clearfix; + padding: 6px 10px; + width: 100%; + + > p, a { + color: $lighter-base-font-color; + font: 300 1.2rem/1.4rem $sans-serif; + letter-spacing: 1px; + padding: 0; + + &.university { + border-right: 1px solid $lighter-base-font-color; + display: block; + float: left; + margin-right: 10px; + padding-right: 10px; + + &:hover { + color: $blue; + } + } + + &.dates { + float: left; + margin-top: 0px; + } + } } } @@ -176,10 +189,10 @@ .info { top: -130px; + } - .meta-info { - opacity: 0; - } + .meta-info { + opacity: 0; } } } diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css index 8e7465fcee..7e7bfc3450 100755 --- a/lms/static/sass/application.css +++ b/lms/static/sass/application.css @@ -393,6 +393,10 @@ a:link, a:visited { a:link:hover, a:visited:hover { color: #3c3c3c; } +.content-wrapper { + margin: 0 auto 0; + width: 100%; } + .container { zoom: 1; margin: 0 auto 0; @@ -431,7 +435,7 @@ a:link, a:visited { height: 1px; width: 100%; } -.faded-vertical-divider, .vertical-divider, header.app .divider, footer nav .copyright a.logo::after, footer nav ol li::after, .home .university-partners .partners li.partner::before { +.faded-vertical-divider, .vertical-divider, footer nav .copyright a.logo::after, footer nav ol li::after, header.global h1.logo::before, .home .university-partners .partners li.partner::before { background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); @@ -440,7 +444,7 @@ a:link, a:visited { height: 100%; width: 1px; } -.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after, .home .university-partners .partners li.partner::after { +.faded-vertical-divider-light, .vertical-divider::after, header.global h1.logo::after, .home .university-partners .partners li.partner::after { background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); @@ -449,9 +453,9 @@ a:link, a:visited { height: 100%; width: 1px; } -.vertical-divider, header.app .divider { +.vertical-divider { position: relative; } - .vertical-divider::after, header.app .divider::after { + .vertical-divider::after { content: ""; display: block; position: absolute; @@ -1326,7 +1330,11 @@ form { box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } footer { - max-width: 1200px; + background: #fafafa; + border-top: 1px solid #c8c8c8; + -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1); margin: 0 auto; padding: 0 0 40px; width: 100%; } @@ -1335,7 +1343,6 @@ footer { max-width: 100%; position: absolute; } footer nav { - border-top: 1px solid #c8c8c8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1353,9 +1360,13 @@ footer { float: left; padding-top: 2px; } footer nav .copyright a.logo { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-position: 0 -24px; + background-repeat: no-repeat; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -1364,12 +1375,15 @@ footer { *display: inline; *vertical-align: auto; float: left; - height: 100%; - margin-right: 14px; - margin-top: 1px; + height: 23px; + margin-right: 15px; + margin-top: 2px; padding-right: 15px; position: relative; + width: 47px; vertical-align: middle; } + footer nav .copyright a.logo:hover { + background-position: 0 0; } footer nav .copyright a.logo::after { content: ""; display: block; @@ -1378,12 +1392,9 @@ footer { position: absolute; top: -2px; width: 1px; } - footer nav .copyright a.logo img { - position: relative; - z-index: 2; } footer nav .copyright p { color: #a0a0a0; - font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -1397,9 +1408,8 @@ footer { vertical-align: middle; } footer nav .copyright p a { color: #a0a0a0; - font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - margin-left: 5px; - text-decoration: underline; } + font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + margin-left: 5px; } footer nav ol { float: right; font-size: 0em; } @@ -1425,7 +1435,8 @@ footer { width: 1px; } footer nav ol li a:link, footer nav ol li a:visited { color: #a0a0a0; - font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + letter-spacing: 1px; padding: 6px 0px; } footer nav ol li.social { border: none; @@ -1458,42 +1469,68 @@ footer { footer nav ol li.social a:hover { opacity: 0.7; } -header.app { +header.global { + background: white; border-bottom: 1px solid #c8c8c8; - background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e6e6e6); - background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e6e6e6); - background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e6e6e6); - background-image: -o-linear-gradient(-90deg, #f5f5f5, #e6e6e6); - background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6); - height: 55px; - width: 100%; } - header.app .wrapper { + -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); + height: 75px; + position: relative; + width: 100%; + z-index: 10; } + header.global nav { zoom: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - max-width: 1200px; + height: 40px; margin: 0 auto; - padding: 0px 10px; + max-width: 1200px; + padding-top: 20px; width: 100%; } - header.app .wrapper:before, header.app .wrapper:after { + header.global nav:before, header.global nav:after { content: ""; display: table; } - header.app .wrapper:after { + header.global nav:after { clear: both; } - header.app a.logo { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; + header.global h1.logo { float: left; - height: 100%; - margin: 16px 15px 0px 0px; + margin: 7px 15px 0px 0px; + padding-right: 20px; position: relative; } - header.app a.logo img { - position: relative; - z-index: 2; } - header.app .divider { + header.global h1.logo::before { + content: ""; + display: block; + height: 45px; + position: absolute; + right: 1px; + top: -12px; + width: 1px; } + header.global h1.logo::after { + content: ""; + display: block; + height: 36px; + position: absolute; + right: 0px; + top: 0px; + width: 1px; } + header.global h1.logo a { + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-image: url("/static/images/logo.png"); + background-position: 0 0; + background-repeat: no-repeat; + display: block; + height: 23px; + width: 47px; } + header.global ol.find-courses { + float: left; } + header.global ol.guest { + float: right; } + header.global ol > li { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -1501,18 +1538,94 @@ header.app { zoom: 1; *display: inline; *vertical-align: auto; - height: 40px; + margin-right: 20px; + position: relative; vertical-align: middle; } - header.app nav { - height: 40px; - margin-top: 8px; } - header.app nav.find-courses { - float: left; } - header.app nav.guest { - float: right; } - header.app nav ol { - font-size: 0em; } - header.app nav ol li { + header.global ol > li:last-child { + margin-right: 0px; } + header.global ol > li a { + letter-spacing: 1px; + vertical-align: middle; } + header.global ol li.secondary > a { + color: #a0a0a0; + color: #1d9dd9; + display: block; + font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin: 0px 20px 0px 0px; + text-decoration: none; + text-transform: uppercase; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + header.global ol li.secondary > a:last-child { + margin-right: 0px; } + header.global ol li.secondary > a:hover { + color: #3c3c3c; } + header.global ol li.primary > a { + 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 transparent; + border-color: #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; + -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: inline-block; + font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin: 1px 5px; + padding: 8px 12px; + text-decoration: none; + text-transform: uppercase; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); + vertical-align: middle; } + header.global ol li.primary > a:last-child { + margin-right: 0px; } + header.global ol.user { + float: right; } + header.global ol.user a.user-link { + padding: 8px 12px 8px 40px; + position: relative; + text-transform: none; } + @media screen and (max-width: 768px) { + header.global ol.user a.user-link { + font-size: 0em; + padding: 10px 0px; + width: 38px; } } + header.global ol.user a.user-link .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 #505050; + -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: 21px; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -1520,242 +1633,144 @@ header.app { zoom: 1; *display: inline; *vertical-align: auto; - 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; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - border: 1px solid transparent; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #a0a0a0; - display: block; - font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif; - height: 30px; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *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); - 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 { - position: relative; } - header.app nav ol li.primary a { - border: 1px solid transparent; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #3c3c3c; - display: block; - font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; - height: 38px; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin: 1px 5px; - padding: 10px 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, header.app nav ol li.primary a.active, header.app nav.sequence-nav ol li.primary a.seq_video_active, header.app nav.sequence-nav ol li.primary a.seq_other_active, header.app nav.sequence-nav ol li.primary a.seq_vertical_active, header.app nav.sequence-nav ol li.primary a.seq_problem_active { - 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 a.user-link { - padding: 9px 8px 11px 40px; - position: relative; - text-transform: none; } - @media screen and (max-width: 768px) { - header.app nav.user a.user-link { - font-size: 0em; - padding: 10px 0px; - width: 38px; } } - header.app nav.user a.user-link .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: 0 1px 0 0 rgba(255, 255, 255, 0.6); - -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); - height: 22px; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - left: 8px; - overflow: hidden; - position: absolute; - top: 6px; - width: 22px; } - header.app nav.user 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 a.user-link .avatar img { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - display: block; - min-height: 100%; - min-width: 100%; - height: 100%; } - header.app nav.user ol.user-options { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); - border: 1px solid black; - background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); - display: none; - right: 0px; - padding: 5px 10px; + left: 6px; + overflow: hidden; position: absolute; - top: 52px; - width: 150px; - z-index: 3; } - header.app nav.user ol.user-options.expanded { - display: block; } - header.app nav.user ol.user-options::before { - background: transparent; - border-top: 6px solid black; - border-right: 6px solid black; - border-bottom: 6px solid transparent; - border-left: 6px solid transparent; - -webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; - -moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; - box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; + top: 5px; + width: 21px; } + header.global ol.user 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: 0px; + height: 100%; position: absolute; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - right: 12px; - top: -6px; - width: 0px; } - header.app nav.user ol.user-options li { + right: 0px; + top: 0px; + width: 100%; } + header.global ol.user a.user-link .avatar img { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; display: block; - border-top: 1px solid rgba(0, 0, 0, 0.4); - -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); - -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); - box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } - header.app nav.user ol.user-options li:first-child { - border: none; + min-height: 100%; + min-width: 100%; + height: 100%; } + header.global ol.user ul.dropdown-menu { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); + border: 1px solid black; + background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); + background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); + background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); + background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); + background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); + display: none; + padding: 5px 10px; + position: absolute; + right: 4px; + top: 50px; + width: 150px; + z-index: 3; } + header.global ol.user ul.dropdown-menu.expanded { + display: block; } + header.global ol.user ul.dropdown-menu::before { + background: transparent; + border-top: 6px solid black; + border-right: 6px solid black; + border-bottom: 6px solid transparent; + border-left: 6px solid transparent; + -webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; + -moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; + box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; + 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: 12px; + top: -6px; + width: 0px; } + header.global ol.user ul.dropdown-menu li { + display: block; + border-top: 1px solid rgba(0, 0, 0, 0.4); + -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); + -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } + header.global ol.user ul.dropdown-menu li:first-child { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } + header.global ol.user ul.dropdown-menu li > a { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + color: rgba(255, 255, 255, 0.9); + display: block; + font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif; + height: auto; + margin: 5px 0px; + overflow: hidden; + padding: 3px 5px 4px; + text-shadow: none; + text-overflow: ellipsis; + text-transform: none; + -webkit-transition-property: padding; + -moz-transition-property: padding; + -ms-transition-property: padding; + -o-transition-property: padding; + transition-property: padding; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + -ms-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + white-space: nowrap; + width: 100%; } + header.global ol.user ul.dropdown-menu li > a:hover { + background: #1d9dd9; + background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); + background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); + background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); + background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); + background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); + border-color: black; -webkit-box-shadow: none; -moz-box-shadow: none; - box-shadow: none; } - header.app nav.user ol.user-options li > a { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: rgba(255, 255, 255, 0.9); - display: block; - font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif; - height: auto; - margin: 5px 0px; - overflow: hidden; - padding: 3px 5px 4px; - text-shadow: none; - text-overflow: ellipsis; - text-transform: none; - -webkit-transition-property: padding; - -moz-transition-property: padding; - -ms-transition-property: padding; - -o-transition-property: padding; - transition-property: padding; - -webkit-transition-duration: 0.1s; - -moz-transition-duration: 0.1s; - -ms-transition-duration: 0.1s; - -o-transition-duration: 0.1s; - transition-duration: 0.1s; - -webkit-transition-timing-function: linear; - -moz-transition-timing-function: linear; - -ms-transition-timing-function: linear; - -o-transition-timing-function: linear; - transition-timing-function: linear; - -webkit-transition-delay: 0; - -moz-transition-delay: 0; - -ms-transition-delay: 0; - -o-transition-delay: 0; - transition-delay: 0; - white-space: nowrap; - width: 100%; } - header.app nav.user ol.user-options li > a:hover { - background: #1d9dd9; - background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); - border-color: black; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - padding-left: 8px; - text-shadow: 0 -1px rgba(0, 0, 0, 0.2); } + box-shadow: none; + padding-left: 8px; + text-shadow: 0 -1px rgba(0, 0, 0, 0.2); } .highlighted-courses .courses, .find-courses .courses { zoom: 1; @@ -1807,6 +1822,59 @@ header.app { transition-delay: 0; } .highlighted-courses .courses .course:nth-child(3n+3), .find-courses .courses .course:nth-child(3n+3) { margin-right: 0; } + .highlighted-courses .courses .course .meta-info, .find-courses .courses .course .meta-info { + background: rgba(0, 0, 0, 0.6); + bottom: 6px; + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-top-right-radius: 2px; + -moz-border-top-right-radius: 2px; + -moz-border-radius-topright: 2px; + -ms-border-top-right-radius: 2px; + -o-border-top-right-radius: 2px; + border-top-right-radius: 2px; + -webkit-border-bottom-right-radius: 2px; + -moz-border-bottom-right-radius: 2px; + -moz-border-radius-bottomright: 2px; + -ms-border-bottom-right-radius: 2px; + -o-border-bottom-right-radius: 2px; + border-bottom-right-radius: 2px; + -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15); + zoom: 1; + position: absolute; + right: -3px; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; } + .highlighted-courses .courses .course .meta-info:before, .highlighted-courses .courses .course .meta-info:after, .find-courses .courses .course .meta-info:before, .find-courses .courses .course .meta-info:after { + content: ""; + display: table; } + .highlighted-courses .courses .course .meta-info:after, .find-courses .courses .course .meta-info:after { + clear: both; } + .highlighted-courses .courses .course .meta-info p, .find-courses .courses .course .meta-info p { + color: white; + font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; + padding: 5px 12px; } + .highlighted-courses .courses .course .meta-info p.university, .find-courses .courses .course .meta-info p.university { + float: left; } .highlighted-courses .courses .course .inner-wrapper, .find-courses .courses .course .inner-wrapper { border: 1px solid white; height: 100%; @@ -1873,6 +1941,7 @@ header.app { .highlighted-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover h2 { text-decoration: underline; } .highlighted-courses .courses .course .info, .find-courses .courses .course .info { + background: white; height: 310px; left: 0px; position: absolute; @@ -1898,47 +1967,6 @@ header.app { -o-transition-delay: 0; transition-delay: 0; width: 100%; } - .highlighted-courses .courses .course .info .meta-info, .find-courses .courses .course .info .meta-info { - background: rgba(0, 0, 0, 0.6); - bottom: 130px; - border-top: 1px solid rgba(0, 0, 0, 0.5); - zoom: 1; - position: absolute; - -webkit-transition-property: all; - -moz-transition-property: all; - -ms-transition-property: all; - -o-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.15s; - -moz-transition-duration: 0.15s; - -ms-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; - -webkit-transition-timing-function: linear; - -moz-transition-timing-function: linear; - -ms-transition-timing-function: linear; - -o-transition-timing-function: linear; - transition-timing-function: linear; - -webkit-transition-delay: 0; - -moz-transition-delay: 0; - -ms-transition-delay: 0; - -o-transition-delay: 0; - transition-delay: 0; - width: 100%; } - .highlighted-courses .courses .course .info .meta-info:before, .highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:before, .find-courses .courses .course .info .meta-info:after { - content: ""; - display: table; } - .highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:after { - clear: both; } - .highlighted-courses .courses .course .info .meta-info p, .find-courses .courses .course .info .meta-info p { - color: white; - font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; - padding: 5px 10px; } - .highlighted-courses .courses .course .info .meta-info p.university, .find-courses .courses .course .info .meta-info p.university { - float: left; } - .highlighted-courses .courses .course .info .meta-info p.dates, .find-courses .courses .course .info .meta-info p.dates { - float: right; - margin-top: 0px; } .highlighted-courses .courses .course .info .cover-image, .find-courses .courses .course .info .cover-image { height: 180px; overflow: hidden; @@ -1948,14 +1976,46 @@ header.app { min-height: 100%; width: 100%; } .highlighted-courses .courses .course .info .desc, .find-courses .courses .course .info .desc { - background: white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - height: 130px; + height: 100px; overflow: hidden; - padding: 10px; + padding: 10px 10px 15px 10px; + position: relative; width: 100%; } + .highlighted-courses .courses .course .info .desc p, .find-courses .courses .course .info .desc p { + height: 100%; + overflow: hidden; + text-overflow: ellipsis; } + .highlighted-courses .courses .course .info .bottom, .find-courses .courses .course .info .bottom { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + zoom: 1; + padding: 6px 10px; + width: 100%; } + .highlighted-courses .courses .course .info .bottom:before, .highlighted-courses .courses .course .info .bottom:after, .find-courses .courses .course .info .bottom:before, .find-courses .courses .course .info .bottom:after { + content: ""; + display: table; } + .highlighted-courses .courses .course .info .bottom:after, .find-courses .courses .course .info .bottom:after { + clear: both; } + .highlighted-courses .courses .course .info .bottom > p, .highlighted-courses .courses .course .info .bottom a, .find-courses .courses .course .info .bottom > p, .find-courses .courses .course .info .bottom a { + color: #a0a0a0; + font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif; + letter-spacing: 1px; + padding: 0; } + .highlighted-courses .courses .course .info .bottom > p.university, .highlighted-courses .courses .course .info .bottom a.university, .find-courses .courses .course .info .bottom > p.university, .find-courses .courses .course .info .bottom a.university { + border-right: 1px solid #a0a0a0; + display: block; + float: left; + margin-right: 10px; + padding-right: 10px; } + .highlighted-courses .courses .course .info .bottom > p.university:hover, .highlighted-courses .courses .course .info .bottom a.university:hover, .find-courses .courses .course .info .bottom > p.university:hover, .find-courses .courses .course .info .bottom a.university:hover { + color: #1d9dd9; } + .highlighted-courses .courses .course .info .bottom > p.dates, .highlighted-courses .courses .course .info .bottom a.dates, .find-courses .courses .course .info .bottom > p.dates, .find-courses .courses .course .info .bottom a.dates { + float: left; + margin-top: 0px; } .highlighted-courses .courses .course:hover, .find-courses .courses .course:hover { background: #f5f5f5; border-color: #aaaaaa; @@ -1964,8 +2024,8 @@ header.app { box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.4); } .highlighted-courses .courses .course:hover .info, .find-courses .courses .course:hover .info { top: -130px; } - .highlighted-courses .courses .course:hover .info .meta-info, .find-courses .courses .course:hover .info .meta-info { - opacity: 0; } + .highlighted-courses .courses .course:hover .meta-info, .find-courses .courses .course:hover .meta-info { + opacity: 0; } .filter { height: 60px; } @@ -2361,18 +2421,26 @@ header.app { color: #3c3c3c; } .home { - margin: 50px 10px 100px; } + margin: 0px 0px 100px; } .home > header { + background: #fafafa; + 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); zoom: 1; min-height: 335px; - margin-bottom: 40px; - position: relative; + padding: 60px 0px 50px; width: 100%; } .home > header:before, .home > header:after { content: ""; display: table; } .home > header:after { clear: both; } + .home > header .inner-wrapper { + max-width: 1200px; + margin: 0 auto; + position: relative; } .home > header .video-wrapper { right: 0px; position: absolute; @@ -2534,7 +2602,6 @@ header.app { background-image: -ms-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%); background-image: -o-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%); background-image: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%); - border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; margin-bottom: 0px; overflow: hidden; @@ -2732,8 +2799,15 @@ header.app { margin-bottom: 60px; width: 100%; } .home .highlighted-courses > h2 { - background: #f5f5f5; - border: 1px solid #dcdcdc; + 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); + border: 1px solid #d2d2d2; border-top: none; -webkit-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px; @@ -2752,9 +2826,13 @@ header.app { box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); color: #a0a0a0; letter-spacing: 1px; + margin-bottom: 0px; padding: 15px 10px; text-align: center; - text-transform: uppercase; } + text-transform: uppercase; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + .home .highlighted-courses > h2 .lowercase { + text-transform: none; } .home .more-info { margin-bottom: 60px; width: 100%; } @@ -3441,12 +3519,14 @@ nav.course-material { background: #f0f0f0; height: 600px; } +.find-courses .container { + margin-bottom: 60px; } .find-courses header.search-intro { background: #f0f0f0; border-bottom: 1px solid #c8c8c8; - -webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); + -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.search-intro .inner-wrapper { height: 120px; @@ -4092,6 +4172,7 @@ nav.course-material { .about .vision .message:last-child { margin-bottom: 0px; } .about .faq { + display: none; zoom: 1; } .about .faq:before, .about .faq:after { content: ""; @@ -4108,6 +4189,7 @@ nav.course-material { padding-right: 20px; width: 23.482%; } .about .faq nav.categories a { + color: #a0a0a0; display: block; letter-spacing: 1px; margin-right: -20px; @@ -4115,6 +4197,7 @@ nav.course-material { text-align: right; text-transform: uppercase; } .about .faq nav.categories a:hover { + color: #1d9dd9; background: #f5f5f5; } .about .faq .responses { float: left; diff --git a/lms/templates/course.html b/lms/templates/course.html index a9abfca010..b6ad751e4e 100644 --- a/lms/templates/course.html +++ b/lms/templates/course.html @@ -14,16 +14,188 @@
-
-

${course.get_about_section('university')}

-

7/23/12 → 12/15/12

-
-

An advanced introduction to analog circuits.

+

${course.get_about_section('university')} An advanced introduction to analog circuits. An advanced introduction to analog circuits.

+
+
+ ${course.institution} +

7/23/12

+
+

${course.institution}

+
+ +%endfor + + + + + + + + + + + + diff --git a/lms/templates/footer.html b/lms/templates/footer.html index 45ae0d199a..3f5f5ce664 100644 --- a/lms/templates/footer.html +++ b/lms/templates/footer.html @@ -4,10 +4,8 @@