.highlighted-courses, .find-courses { .courses { @include clearfix; padding: 40px 0px 15px; .university-column { width: flex-grid(4); margin-right: flex-gutter(); float: left; &:nth-child(3n+3) { margin-right: 0; } } .course { background: rgb(250,250,250); border: 1px solid rgb(180,180,180); @include border-radius(2px); @include box-sizing(border-box); @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9)); margin-bottom: 30px; position: relative; width: 100%; @include transition(all, 0.15s, linear); a:hover { text-decoration: none; } .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: -4px; @include transition(all, 0.15s, linear); p { color: rgb(255,255,255); font-style: italic; line-height: 1.2em; padding: 4px 12px 5px; } } .inner-wrapper { border: 1px solid rgba(255,255,255, 1); height: 100%; height: 200px; overflow: hidden; position: relative; } header.course-preview { left: 0px; position: absolute; top: 0px; width: 100%; z-index: 3; // > a { @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85))); @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2)); border-bottom: 1px solid rgba(150,150,150, 0.7); display: block; height: 50px; &:hover { @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8))); text-decoration: none; .info-link { color: $blue; opacity: 1; } h2 { color: $blue; } } hgroup { left: 0px; padding: 0px 10px; position: absolute; right: 60px; top: 0px; h2 { color: $base-font-color; display: table-cell; font-family: $sans-serif; font-size: 0.8em; font-weight: 700; height: 48px; letter-spacing: 0px; margin-bottom: 0px; padding-top: 0px; text-shadow: 0 1px rgba(255,255,255, 0.6); text-overflow: ellipsis; text-transform: none; vertical-align: middle; .course-number { font-weight: 700; text-transform: none; } } } .info-link { border-left: 1px solid rgba(150,150,150, 0.5); @include box-sizing(border-box); color: $base-font-color; display: inline-block; font: bold 1.6em/1.2em $sans-serif; height: 100%; opacity: 0.6; padding-top: 10px; position: absolute; right: 0px; text-align: center; text-shadow: 0 1px rgba(255,255,255, 0.6); top: 0px; width: 60px; vertical-align: middle; } } // } .info { background: rgb(255,255,255); height: 220px + 130px; left: 0px; position: absolute; top: 0px; @include transition(all, 0.15s, linear); width: 100%; overflow: hidden; .cover-image { height: 200px; overflow: hidden; width: 100%; img { display: block; min-height: 100%; width: 100%; } } .desc { @include box-sizing(border-box); height: 120px; overflow: hidden; padding: 10px 10px 12px 10px; position: relative; width: 100%; p { height: 100%; overflow: hidden; text-overflow: ellipsis; } } .bottom { @include box-sizing(border-box); padding: 0px 10px 10px 10px; width: 100%; .university { border-right: 1px solid rgb(200,200,200); color: $lighter-base-font-color; letter-spacing: 1px; margin-right: 10px; padding-right: 10px; &:hover { color: $blue; } } .start-date { color: $lighter-base-font-color; letter-spacing: 1px; } } } &:hover { background: rgb(245,245,245); border-color: rgb(170,170,170); @include box-shadow(0 1px 16px 0 rgba($blue, 0.4)); .info { top: -150px; } .meta-info { opacity: 0; } } } } .university-courses { .course { width: flex-grid(4); margin-right: flex-gutter(); float: left; &:nth-child(3n+3) { margin-right: 0; } } } }