` tag, depending on the engineering constraints.
The `class .c-form--leftborder-narrow` applies the border and padding while `class c-form--light-palette` applies the white backgrounds and borders.
```html_example
```
*/
.c-form--signup p {
color: #5f5f5e;
font-size: 0.9rem;
line-height: 1.2;
font-weight: 300;
}
[class*="--blue"] .c-form--signup p {
color: #fff;
}
.c-contact-form__dropzone {
border: 1px solid #e2e0db;
text-align: center;
padding: 15vh 5vw;
}
.c-contact-form__dropzone span {
display: block;
}
.c-contact-form__dropzone--smalltext {
font-size: 0.6666666667rem;
color: #5f5f5e;
}
.c-contact-form__dropzone--largetext {
color: #20201f;
font-size: 1rem;
font-weight: 600;
}
.c-contact-form__dropzone--largetext:hover {
cursor: pointer;
text-decoration: underline;
}
.user-pass-reset {
max-width: 675px;
}
/* ==========================================================================
Form
========================================================================== */
/*doc
---
title: Contact Form
name: contact-form
category: Components - Contact Form
---
These forms are ugly, and made by drupal. Extended existing BEM classes here. When adding new forms please check that classes carry over and extend as needed.
```html_example
```
*/
.contact-message-form form .form-type-textfield label,
.contact-message-form form .form-type-email label,
.contact-message-form form .form-type-textarea label,
.contact-message-form form .form-type-item label {
margin-bottom: 0.4444444444rem;
font-weight: 700;
}
/* ==========================================================================
Gateway
========================================================================== */
.c-hero {
background: no-repeat center center;
background-size: cover;
}
.c-hero--books {
background-image: url("../../img/hero-books.jpg");
color: #fff;
}
.c-hero--typewriter {
background-image: url("../../img/hero-typewriter.jpg");
color: #fff;
background-position: top center;
}
.c-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding-top: 2rem;
padding-bottom: 2rem;
}
@media screen and (min-width: 768px) {
.c-hero__content {
min-height: 10rem;
}
}
@media screen and (min-width: 1025px) {
.c-hero__content {
min-height: 18rem;
height: 53vh;
max-height: 414px;
padding-bottom: 3.25rem;
}
}
.c-hero__title {
color: #fff;
font-family: "Georgia", serif;
font-weight: 400;
margin-bottom: 0.25rem;
font-size: 1.6666666667rem;
}
@media screen and (min-width: 768px) {
.c-hero__title {
font-size: 2.6666666667rem;
}
}
.c-hero .c-btn, .c-hero .dz-remove, .c-hero .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-hero .button, .c-hero .c-featured-pane__btn a, .c-featured-pane__btn .c-hero a {
text-decoration: none;
margin-bottom: 0;
}
/* ==========================================================================
Icon
========================================================================== */
/*doc
---
title: Icons
name: icons
category: Components - Icons
---
Library of icons for use throughout the site. Some of the icons are related to other partials,
but these classes should always be used when possible.
*/
.c-icon,
.c-page-head__form input[type=submit] {
display: inline-block;
}
/*doc
---
title: Social icons
name: iconsa
category: Components - Icons
---
Icon | Class
----------------------------------|------------
|`c-icon--em`
|`c-icon--fb`
|`c-icon--fb--bw`
|`c-icon--tw`
|`c-icon--tw--bw`
*/
.c-icon--fb {
background-image: url(../sprites/sprite.png);
background-position: -180px -315px;
width: 35px;
height: 35px;
}
.c-icon--fb--bw {
background-image: url(../sprites/sprite.png);
background-position: -306px -243px;
width: 35px;
height: 35px;
}
.c-icon--tw {
background-image: url(../sprites/sprite.png);
background-position: -261px -243px;
width: 35px;
height: 35px;
}
.c-icon--ig--bw {
background-image: url(../sprites/sprite.png);
background-position: 0px -315px;
width: 35px;
height: 35px;
}
.c-icon--pr--bw {
background-image: url(../sprites/sprite.png);
background-position: -90px -315px;
width: 35px;
height: 35px;
}
.c-icon--in--bw {
background-image: url(../sprites/sprite.png);
background-position: -216px -243px;
width: 35px;
height: 35px;
}
.c-icon--tw--bw {
background-image: url(../sprites/sprite.png);
background-position: -135px -315px;
width: 35px;
height: 35px;
}
.c-icon--em {
background-image: url(../sprites/sprite.png);
background-position: -45px -315px;
width: 35px;
height: 35px;
}
/*doc
---
title: Misc icons
name: iconsd
category: Components - Icons
---
Icon | Class
------------------------------------------------------|------------
| `c-icon--bullet`
| `c-icon--bullet--active`
| `c-icon--right`
| `c-icon--right--hover`
| `c-icon--left`
| `c-icon--left--hover`
| `c-icon--right--white`
| `c-icon--right--white--hover`
| `c-icon--search`
*/
.c-icon--bullet--active {
background-image: url(../sprites/sprite.png);
background-position: -325px -315px;
width: 19px;
height: 19px;
}
.c-icon--right,
.c-slider--half .c-link::after,
.c-cta__signbtn::after,
.c-link--right::after {
background-image: url(../sprites/sprite.png);
background-position: -231px -138px;
width: 17px;
height: 17px;
}
.c-icon--right--hover,
.c-slider--half .c-link:hover::after,
.c-cta__signbtn:hover::after,
.c-link--right:hover::after {
background-image: url(../sprites/sprite.png);
background-position: -216px -288px;
width: 17px;
height: 17px;
}
.c-icon--left,
.c-sign-up__back::before,
.c-cta__backbtn::before,
.c-link--left::before {
background-image: url(../sprites/sprite.png);
background-position: -231px -138px;
width: 17px;
height: 17px;
transform: rotate(180deg);
}
.c-icon--left--hover,
.c-sign-up__back:hover::before,
.c-cta__backbtn:hover::before,
.c-link--left:hover::before {
background-image: url(../sprites/sprite.png);
background-position: -216px -288px;
width: 17px;
height: 17px;
transform: rotate(180deg);
}
.c-icon--right--white,
.c-slider .c-link::after,
.c-cta--blue .c-cta__signbtn::after,
.c-cta--purple .c-cta__signbtn::after,
.c-link--right--white::after {
background-image: url(../sprites/sprite.png);
background-position: -303px -216px;
width: 17px;
height: 17px;
}
.c-icon--right--white--hover,
.c-slider .c-link:hover::after,
.c-cta--blue .c-cta__signbtn:hover::after,
.c-cta--purple .c-cta__signbtn:hover::after,
.c-link--right--white:hover::after {
background-image: url(../sprites/sprite.png);
background-position: -330px -216px;
width: 17px;
height: 17px;
}
.c-icon--left--white,
.c-cta--blue .c-cta__backbtn::before,
.c-cta--purple .c-cta__backbtn::before,
.c-link--left--white::before {
background-image: url(../sprites/sprite.png);
background-position: -303px -216px;
width: 17px;
height: 17px;
transform: rotate(180deg);
}
.c-icon--left--white--hover,
.c-cta--blue .c-cta__backbtn:hover::before,
.c-cta--purple .c-cta__backbtn:hover::before,
.c-link--left--white:hover::before {
background-image: url(../sprites/sprite.png);
background-position: -330px -216px;
width: 17px;
height: 17px;
transform: rotate(180deg);
}
.c-icon--search,
.c-page-head__form input[type=submit] {
background-image: url(../sprites/sprite.png);
background-position: -231px -80px;
width: 20px;
height: 19px;
}
/*doc
---
title: Gateway icons
name: iconsc
category: Components - Icons
---
Icon | Class
--------------------------------------|------------
| `c-icon--teacher`
| `c-icon--book`
| `c-icon--scale`
*/
.c-icon--scale {
background-image: url(../sprites/sprite.png);
background-position: -144px -243px;
width: 62px;
height: 62px;
}
.c-icon--teacher {
background-image: url(../sprites/sprite.png);
background-position: 0px -243px;
width: 62px;
height: 62px;
}
.c-icon--book {
background-image: url(../sprites/sprite.png);
background-position: -72px -243px;
width: 62px;
height: 62px;
}
/*doc
---
title: File type icons
name: icons-file
category: Components - Icons
---
If more file types are needed, the icon set is stored as a sibling directory to the sprites in the /img folder.
The pngs will need to be resized to 30x30 however.
Icon | Class
--------------------------------------|------------
| `c-icon__file--csv`
| `c-icon__file--doc`
| `c-icon__file--docx`
| `c-icon__file--gif`
| `c-icon__file--jpg`
| `c-icon__file--jpeg`
| `c-icon__file--pdf`
| `c-icon__file--png`
| `c-icon__file--xls`
| `c-icon__file--xlsx`
| `c-icon__file--zip`
*/
.c-icon__file--csv {
background-image: url(../sprites/sprite.png);
background-position: 0px -360px;
width: 30px;
height: 30px;
}
.c-icon__file--doc,
.c-icon__file--docx {
background-image: url(../sprites/sprite.png);
background-position: -370px -303px;
width: 30px;
height: 30px;
}
.c-icon__file--gif {
background-image: url(../sprites/sprite.png);
background-position: -370px -183px;
width: 30px;
height: 30px;
}
.c-icon__file--jpg,
.c-icon__file--jpeg {
background-image: url(../sprites/sprite.png);
background-position: -370px -263px;
width: 30px;
height: 30px;
}
.c-icon__file--pdf {
background-image: url(../sprites/sprite.png);
background-position: -80px -360px;
width: 30px;
height: 30px;
}
.c-icon__file--png {
background-image: url(../sprites/sprite.png);
background-position: -40px -360px;
width: 30px;
height: 30px;
}
.c-icon__file--xls,
.c-icon__file--xlsx {
background-image: url(../sprites/sprite.png);
background-position: -120px -360px;
width: 30px;
height: 30px;
}
.c-icon__file--zip {
background-image: url(../sprites/sprite.png);
background-position: -370px -223px;
width: 30px;
height: 30px;
}
/* ==========================================================================
#Join component
========================================================================== */
/*doc
---
title: Join
name: join
category: Components - Join
---
Join block
```html_example
Free LWI Memebership
Feature Highlight Here
Feature Highlight Here
Feature Highlight Here
Feature Highlight Here
Join Now
```
*/
.c-join {
float: left;
width: 100%;
}
@media screen and (min-width: 1025px) {
.c-join {
width: 46%;
margin: 0 2%;
}
}
.c-join__title h2 {
background: #37698c;
padding: 1.9444444444rem 0;
text-align: center;
color: #fff;
margin: 0;
line-height: 1.2777777778rem;
font-weight: normal;
}
.c-join__title-active h2 {
background: #fff;
color: #37698c;
border: solid #8bb4d1;
border-width: 2px 2px 0;
}
.c-join__list {
text-align: center;
margin: 0;
border-width: 0 2px 10px;
border-color: #8bb4d1;
border-style: solid;
padding: 1.2222222222rem;
}
.c-join__list ul {
padding: 0;
}
.c-join__list li {
list-style-type: none;
margin: 0;
border-bottom: 1px solid #e9e7e3;
display: block;
padding: 0.5555555556rem 0;
font-size: 1rem;
color: #37698c;
}
.c-join__button,
#tbf-mailchimp-subscription-form-join-free #edit-submit {
max-width: 60%;
margin: 0;
width: 100%;
color: #37698c;
background: transparent;
}
.c-join__button .c-btn--trans--blue,
#tbf-mailchimp-subscription-form-join-free #edit-submit .c-btn--trans--blue {
transition: all 0.2s ease-in-out;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
}
.c-join__button .c-btn--trans--blue:hover,
#tbf-mailchimp-subscription-form-join-free #edit-submit .c-btn--trans--blue:hover {
background-color: rgba(13, 13, 13, 0);
}
.c-join__button .c-btn--trans--blue:link,
.c-join__button .c-btn--trans--blue:visited,
#tbf-mailchimp-subscription-form-join-free #edit-submit .c-btn--trans--blue:link,
#tbf-mailchimp-subscription-form-join-free #edit-submit .c-btn--trans--blue:visited {
color: #fff;
}
.c-join__button .c-btn--trans--blue:focus,
#tbf-mailchimp-subscription-form-join-free #edit-submit .c-btn--trans--blue:focus {
background-color: rgba(0, 0, 0, 0);
}
.c-join__button:link, .c-join__button:visited,
#tbf-mailchimp-subscription-form-join-free #edit-submit:link,
#tbf-mailchimp-subscription-form-join-free #edit-submit:visited {
color: #37698c;
}
.c-join__button:hover,
#tbf-mailchimp-subscription-form-join-free #edit-submit:hover {
color: #fff;
}
#tbf-mailchimp-subscription-form-join-free #edit-submit {
color: #fff;
}
#tbf-mailchimp-subscription-form-join-free input[type=text],
#tbf-mailchimp-subscription-form-join-free input[type=email] {
background: rgba(255, 255, 255, 0.9);
color: #37698c;
}
.c-back__button {
background-image: url(../sprites/sprite.png);
background-position: -243px -288px;
width: 17px;
height: 17px;
text-indent: -9999px;
position: absolute;
top: 0.8333333333rem;
right: 0.8333333333rem;
display: block;
}
.c-join__listing {
min-height: 18.3888888889rem;
}
.c-join__form,
.c-join__thank-you {
background: #37698c;
margin: -1.3333333333rem;
min-height: 20.9444444444rem;
padding: 1.2222222222rem;
position: relative;
}
.c-join__form input::-webkit-input-placeholder, .c-join__form input:-moz-placeholder, .c-join__form input::-moz-placeholder, .c-join__form input:-ms-input-placeholder,
.c-join__thank-you input::-webkit-input-placeholder,
.c-join__thank-you input:-moz-placeholder,
.c-join__thank-you input::-moz-placeholder,
.c-join__thank-you input:-ms-input-placeholder {
color: #37698c;
}
.c-join__form h2,
.c-join__thank-you h2 {
color: #fff;
font-weight: normal;
}
.c-join__form input[type=text],
.c-join__form input[type=email],
.c-join__thank-you input[type=text],
.c-join__thank-you input[type=email] {
background: rgba(255, 255, 255, 0.5);
color: #37698c;
}
.c-join__form .c-form__input--half--first,
.c-join__thank-you .c-form__input--half--first {
border-right: 1px solid #37698c;
}
/* below handled by c-back__button sass
.c-join__form .c-back_button {
position: absolute;
top: 13px;
right: 22px;
} */
.c-join__thank-you {
display: none;
text-align: center;
}
.c-join__thank-you h3 {
color: #fff;
font-weight: normal;
}
.c-join__thank-you p {
color: #fff;
max-width: 14.6666666667rem;
margin: 0 auto;
}
.c-join__thank-you .c-join__check {
background-image: url(../sprites/sprite.png);
background-position: -265px 0px;
width: 95px;
height: 95px;
display: block;
margin: 0 auto;
}
.c-join__left {
margin-bottom: 1.1111111111rem;
}
@media screen and (min-width: 1025px) {
.c-join__left {
margin-bottom: 0;
}
}
/* ==========================================================================
Loader used on dyanmic grid and other AJAX.
========================================================================== */
/*doc
---
title: Loader
name: Loader
category: Components - Loader
---
```html_example
```
This needs to leverage the existing html from the widgets module.
Ultimately, we should add BEM compliant classes such as below to the default module.
```html_example
```
*/
/* override defaults from grid.css */
.ajax-progress.ajax-progress-gridajax,
.c-loader__progress.c-loader__progress--gridajax {
text-align: center;
}
.ajax-progress-gridajax .gridajax,
.c-loader__animation {
width: 100%;
background: url("/themes/bricklett/img/loader.svg") no-repeat 50% 50%;
background-size: 90px 90px;
height: 100px;
}
.ajax-progress .message {
font-weight: bold;
color: #412e48;
padding: 1rem 0 0;
}
/* ==========================================================================
Links
========================================================================== */
/*doc
---
title: Links
name: linkscom
category: Components - Links
---
Special link styling that can include icons.
```html_example
Read more
Read more
Go Back
Go Back
```
*/
.c-slider--half .c-link, .c-cta__signbtn,
.c-link--right {
font-size: 0.9rem;
}
.c-slider--half .c-link::after, .c-cta__signbtn::after,
.c-link--right::after {
content: "";
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.c-slider--half .c-link:link, .c-cta__signbtn:link, .c-slider--half .c-link:visited, .c-cta__signbtn:visited,
.c-link--right:link,
.c-link--right:visited {
color: #20201f;
}
.c-slider .c-link, .c-cta--blue .c-cta__signbtn, .c-cta--purple .c-cta__signbtn,
.c-link--right--white {
font-size: 0.9rem;
}
.c-slider .c-link::after, .c-cta--blue .c-cta__signbtn::after, .c-cta--purple .c-cta__signbtn::after,
.c-link--right--white::after {
content: "";
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.c-slider .c-link:link, .c-cta--blue .c-cta__signbtn:link, .c-cta--purple .c-cta__signbtn:link, .c-slider .c-link:visited, .c-cta--blue .c-cta__signbtn:visited, .c-cta--purple .c-cta__signbtn:visited,
.c-link--right--white:link,
.c-link--right--white:visited {
color: #fff;
}
.c-cta__backbtn,
.c-link--left {
font-size: 0.9rem;
}
.c-cta__backbtn::before,
.c-link--left::before {
content: "";
display: inline-block;
position: relative;
top: 4px;
left: 0;
margin-right: 10px;
}
.c-cta__backbtn:link, .c-cta__backbtn:visited,
.c-link--left:link,
.c-link--left:visited {
color: #20201f;
}
.c-cta--blue .c-cta__backbtn, .c-cta--purple .c-cta__backbtn,
.c-link--left--white {
font-size: 0.9rem;
}
.c-cta--blue .c-cta__backbtn::before, .c-cta--purple .c-cta__backbtn::before,
.c-link--left--white::before {
content: "";
display: inline-block;
position: relative;
top: 4px;
left: 0;
margin-right: 10px;
}
.c-cta--blue .c-cta__backbtn:link, .c-cta--purple .c-cta__backbtn:link, .c-cta--blue .c-cta__backbtn:visited, .c-cta--purple .c-cta__backbtn:visited,
.c-link--left--white:link,
.c-link--left--white:visited {
color: #fff;
}
.c-link--alpha {
opacity: 0.7;
}
.c-link--small {
font-size: 0.8rem;
}
/* ==========================================================================
List
========================================================================== */
/* ==========================================================================
Logo component
========================================================================== */
/*doc
---
title: Logo
name: logo
category: Components - Logo
---
Contains all variations of client logos for a given project.
```html_example
```
*/
.c-logo--bw {
display: block;
}
.c-logo--default {
background: url("../../img/logo.png");
background-size: 80%;
height: 3.9444444444rem;
width: 14.2777777778rem;
background-position: top left;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.c-logo--default {
background-size: 63%;
}
}
.c-logo--bw {
background-image: url(../sprites/sprite.png);
background-position: 0px -80px;
width: 221px;
height: 76px;
}
/* ==========================================================================
Media widget
========================================================================== */
/* ==========================================================================
Default static grid text widget component
========================================================================== */
.c-media h4 {
margin: 1rem 0 0;
}
.c-media hr {
border-color: #412e48;
border-width: 0 0 2px;
}
.c-media__slide {
vertical-align: center;
height: 100%;
width: 100%;
}
.c-media--dark, .c-media--green {
background-color: #412e48;
}
.c-media--dark .c-media-widget__slide, .c-media--green .c-media-widget__slide {
background: rgba(0, 0, 0, 0.5);
}
.c-media__list h3,
.c-media__list h4 {
margin-bottom: 0;
}
.c-media__list ul {
list-style: none;
padding: 0;
}
.c-media__list li {
padding: 1rem 0.5rem;
border-bottom: 2px solid #5f5f5e;
}
.c-media__list li:first-child {
border-top: 2px solid #5f5f5e;
}
.c-media__list li p:last-of-type {
margin-bottom: 0;
}
.c-media--tan .c-media-widget__slide {
background-color: rgba(255, 255, 255, 0.25);
}
.c-media--tan li {
border-color: rgba(65, 46, 72, 0.5);
}
.c-media--tan li img {
border: 1px solid rgba(65, 46, 72, 0.25);
}
.c-media--tan li:first-child {
border-color: rgba(65, 46, 72, 0.5);
}
.c-media--tan .c-slider-nav {
background-color: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.c-media__default .c-slider-nav {
border: 1px solid rgba(255, 255, 255, 0.5);
}
.c-media-widget--dark .c-media-widget__wrap,
.c-media-widget--dark h2.c-media-widget__headline,
.c-media-widget--dark .c-media-widget__headline,
.c-media-widget--dark h2.c-media-widget__headline--form,
.c-media-widget--dark .c-media-widget__text,
.c-media-widget--dark .c-media-widget__text p,
.c-media-widget--dark .c-media-widget__author,
.c-media-widget--dark h4,
.c-media-widget--dark h5,
.c-media-widget--green .c-media-widget__wrap,
.c-media-widget--green h2.c-media-widget__headline,
.c-media-widget--green .c-media-widget__headline,
.c-media-widget--green h2.c-media-widget__headline--form,
.c-media-widget--green .c-media-widget__text,
.c-media-widget--green .c-media-widget__text p,
.c-media-widget--green .c-media-widget__author,
.c-media-widget--green h4,
.c-media-widget--green h5 {
color: #fff;
}
.c-media-widget--dark .c-slider-nav .slick-list,
.c-media-widget--green .c-slider-nav .slick-list {
background-color: transparent;
}
.c-slider-for {
max-width: 800px;
padding: 1rem 3rem;
margin: 0 auto;
}
.c-slider-nav {
background: #e2e0db;
padding: 3rem;
margin: 0 3rem;
max-width: 1000px;
}
@media screen and (min-width: 1025px) {
.c-slider-nav {
margin: 0 auto;
}
}
.c-slider-nav .slick-track {
margin: 0 auto;
}
.c-slider-nav .slick-list {
max-width: 1000px;
background: rgba(255, 255, 255, 0.5);
}
.c-slider-nav .slick-list img {
display: block;
margin: 0 auto;
}
.c-slider-nav .slick-list .slick-slide {
padding: 1rem;
outline: 3px rgba(0, 0, 0, 0) solid;
}
.c-slider-nav .slick-list .slick-slide:focus {
outline: 3px rgba(0, 0, 0, 0.25) solid;
}
.c-media__slider .slick-prev,
.c-media__slider .slick-next {
position: absolute;
top: 50%;
background-color: transparent;
border: 0;
text-indent: -9999px;
}
.c-media__slider .slick-prev:hover,
.c-media__slider .slick-next:hover {
opacity: 0.8;
cursor: pointer;
}
.c-media__slider .slick-prev:focus,
.c-media__slider .slick-next:focus {
box-shadow: none;
outline: 0;
}
.c-media__slider .slick-prev {
background-image: url(../sprites/sprite.png);
background-position: -370px -39px;
width: 25px;
height: 42px;
left: -35px;
}
.c-media__slider .slick-next {
background-image: url(../sprites/sprite.png);
background-position: -370px -91px;
width: 25px;
height: 42px;
right: -35px;
}
.c-media__slider .slick-arrow {
display: block !important;
}
.c-media__slider .slick-initialized .slick-slide {
display: block;
}
/* ==========================================================================
Member
========================================================================== */
/* ==========================================================================
Member nav
========================================================================== */
.c-member-nav {
padding: 0;
margin: 0;
list-style: none;
display: none;
position: relative;
float: right;
z-index: 12;
}
@media screen and (min-width: 1025px) {
.c-member-nav {
display: block;
}
}
.c-member-nav__item {
display: inline-block;
position: relative;
}
.c-member-nav__link {
transition: all 0.3s ease-in-out;
text-align: right;
line-height: 88px;
display: inline-block;
margin-left: 0.75rem;
}
.c-member-nav__link:link, .c-member-nav__link:visited {
color: #412e48;
font-size: 0.8888888889rem;
}
.c-member-nav .c-btn, .c-member-nav .dz-remove, .c-member-nav .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-member-nav .button, .c-member-nav .c-featured-pane__btn a, .c-featured-pane__btn .c-member-nav a {
line-height: 1;
}
.c-member-nav__heading {
margin-bottom: 0.5rem;
margin-top: 1rem;
font-weight: 400;
}
.c-member-nav__drop {
opacity: 0;
visibility: hidden;
}
@media screen and (max-width: 1024px) {
.c-member-nav__drop {
display: none;
}
}
@media screen and (min-width: 1025px) {
.c-member-nav__drop {
transition: all 0.25s ease-in-out;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
background: #fff;
border-bottom: 5px solid #bdbcbe;
min-width: 150px;
overflow: hidden;
padding: 3rem 1rem;
position: absolute;
top: 100%;
width: 100%;
left: 0;
z-index: 12;
}
}
.c-member-nav__drop.is-active {
display: block;
opacity: 1;
visibility: visible;
}
.is-faded.is-member .c-member-nav__link[data-div-name=c-member-nav__sign] {
transition: all 0.3s ease-in-out;
opacity: 0.2;
}
.is-faded.is-member .c-member-nav__link[data-div-name=c-member-nav__sign]::after {
display: none;
}
.is-faded.is-sign .c-member-nav__link[data-div-name=c-member-nav__member] {
transition: all 0.3s ease-in-out;
opacity: 0.2;
}
.is-faded.is-sign .c-member-nav__link[data-div-name=c-member-nav__member]::after {
display: none;
}
.is-member .c-member-nav__link::after,
.is-sign .c-member-nav__link::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 7px 10px;
border-color: transparent transparent #fff;
line-height: 0;
display: block;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
}
.c-member-nav__overlay {
position: fixed;
background: transparent;
opacity: 0.5;
width: 100%;
z-index: 11;
top: 0;
visibility: hidden;
height: 0;
}
.c-member-nav__overlay.is-active {
height: 100%;
visibility: visible;
}
.c-member-nav__section {
padding: 0.5rem default 0.5rem 2rem;
border-right: 1px solid #e2e0db;
}
.c-member-nav__section:last-child {
border-right: 0;
}
.c-member-nav__section p {
color: #5f5f5e;
margin-bottom: 0.5rem;
}
.user-logged-in .c-member-nav {
position: static;
z-index: 99;
}
.c-member-nav__name {
color: #412e48;
margin-left: 20px;
cursor: pointer;
position: static;
text-transform: capitalize;
}
.c-member-nav__name span {
line-height: 88px;
font-size: 0.88889rem;
position: relative;
z-index: 99;
}
.c-member-nav__name:hover span {
padding-bottom: 29px;
border-bottom: 5px solid #fff;
}
.c-member-nav__name:hover .c-drop-nav__wrap {
opacity: 1;
visibility: visible;
}
.c-member-nav__name:hover .c-drop-nav__section {
opacity: 1;
}
.c-member-nav__name .c-drop-nav__wrap {
width: 270px;
padding: 2rem 1rem 0;
z-index: 90;
right: 0;
position: absolute;
left: auto;
}
.c-member-nav__name h3 {
color: #20201f;
padding: 0 1rem;
}
.c-member-nav__name .c-drop-nav {
padding-top: 0;
}
/* ==========================================================================
Modal component
========================================================================== */
/* ==========================================================================
#Overlay
========================================================================== */
.c-overlay {
transform: translateX(-70%);
background: #000;
height: 100%;
opacity: 0;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
z-index: 9998;
}
.c-overlay.is-active {
-webkit-animation: fadeInOverlay 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0.2s;
animation: fadeInOverlay 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
visibility: visible;
}
@media screen and (min-width: 1025px) {
.c-overlay.is-active {
visibility: hidden;
}
}
/* ==========================================================================
#Footer component
========================================================================== */
.c-page-foot {
min-height: 2.7777777778rem;
width: 100%;
margin-bottom: 4rem;
margin-top: 4rem;
}
.c-page-foot__logo {
display: flex;
align-items: center;
justify-content: left;
border-right: 6px solid #e2e0db;
min-height: 270px;
}
.c-page-foot__copy {
color: #20201f;
font-size: 0.7777777778rem;
padding-left: 1.5rem;
}
.c-page-foot__social {
padding: 0;
margin: 0;
list-style: none;
padding-left: 2rem;
}
.c-page-foot__social li {
margin: 0.5rem 0;
font-size: 0.8888888889rem;
}
.c-page-foot__social span {
position: relative;
top: 10px;
margin-right: 0.35rem;
}
.c-page-foot__list {
padding: 0;
margin: 0;
list-style: none;
margin-bottom: 2rem;
margin-top: 3.3333333333rem;
padding-left: 1.5rem;
}
.c-page-foot__list-item {
margin-bottom: 0.5rem;
}
.c-page-foot__list-item a {
color: #20201f;
font-size: 0.7777777778rem;
}
.c-page-foot__list-item a:hover {
color: #412e48;
}
.c-page-foot__social-link:link,
.c-page-foot__social-link:visited {
color: #20201f;
}
.c-page-foot__social-link:hover span {
opacity: 0.7;
}
/* ==========================================================================
#Header component
========================================================================== */
/*doc
---
title: Page head
name: page-head
category: Components - Page Head
---
Inside the header component lives the `.c-logo` component as well as the `.c-primary-nav`.
```html_example
```
*/
.c-page-head {
background: #fff;
padding: 0;
width: 100%;
height: 92px;
}
@media screen and (max-width: 1024px) {
.c-page-head {
border-bottom: 4px solid #412e48;
}
}
@media screen and (max-width: 767px) {
.c-page-head {
height: 75px;
}
}
@media screen and (min-width: 1025px) {
.c-page-head .o-grid--wide {
border-bottom: 4px solid #412e48;
}
}
.c-page-head .c-logo--default {
transition: all 0.3s ease-in-out;
position: relative;
top: 0.5rem;
z-index: 11;
float: left;
}
.c-page-head__form {
transition: all 0.3s ease-in-out;
position: relative;
}
.c-page-head__form input[type=submit] {
content: "";
background-color: transparent;
border: 0;
text-indent: -9999px;
padding: 0;
}
.c-page-head__form input[type=submit]:hover {
cursor: pointer;
}
.c-page-head__form input[type=submit]:focus {
box-shadow: none;
outline: 0;
}
.c-page-head__form input[type=text] {
transition: all 0.25s ease-in-out;
background: rgba(0, 0, 0, 0.15);
border-radius: 20px;
width: 39px;
padding: 0 0.5rem;
border: 0;
color: #412e48;
margin-bottom: 0;
position: absolute;
right: -11px;
top: 0;
height: 30px;
visibility: hidden;
opacity: 0;
}
.c-page-head__form input[type=text]::-moz-placeholder {
color: #412e48;
}
.c-page-head__form input[type=text]:-ms-input-placeholder {
color: #412e48;
}
.c-page-head__form input[type=text]::placeholder {
color: #412e48;
}
.is-faded .c-page-head__form {
transition: all 0.3s ease-in-out;
opacity: 0.2;
}
.c-page-head__form.is-expanded input[type=text] {
visibility: visible;
opacity: 1;
width: 90px;
}
.is-faded .c-logo--default {
transition: all 0.3s ease-in-out;
opacity: 0.2;
}
/* ==========================================================================
Page Intro component
========================================================================== */
.c-page-intro__body {
font-family: "Georgia", serif;
font-size: 0.8888888889rem;
line-height: 1.75;
}
.c-page-intro__body p:first-child {
font-size: 1rem;
line-height: 2;
}
.c-page-intro--blue {
background: #37698c;
}
.c-page-intro--blue .c-page-intro__title,
.c-page-intro--blue .c-page-intro__stitle,
.c-page-intro--blue .c-page-intro__body {
color: #fff;
}
.c-page-intro--purple {
background: #634164;
}
.c-page-intro--purple .c-page-intro__title,
.c-page-intro--purple .c-page-intro__stitle,
.c-page-intro--purple .c-page-intro__body {
color: #fff;
}
/* ==========================================================================
Subnav in page intro
========================================================================== */
.c-subnav {
border: 1px solid #e2e0db;
display: block;
padding: 0;
}
@media screen and (min-width: 768px) {
.c-subnav {
width: 16.6666666667rem;
float: right;
margin: 0 0 2rem 4rem;
}
}
.c-subnav__item {
display: block;
border-top: 1px solid #e2e0db;
}
.c-subnav__item:first-child {
border-top: 0;
}
.c-subnav__item a {
transition: all 0.2s ease-in-out;
display: block;
font-size: 1.1111111111rem;
background: #fff;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}
.c-subnav__item a:link, .c-subnav__item a:visited {
color: #bdbcbe;
}
.c-subnav__item a:hover, .c-subnav__item a:active, .c-subnav__item a.is-active {
color: #20201f;
background: #e2e0db;
}
.c-subnav__item a.is-active::before {
content: "";
display: inline-block;
border: 5px solid transparent;
border-left-color: #20201f;
margin-right: 0.5rem;
}
/* ==========================================================================
Join block in page intro widget
========================================================================== */
.c-memb-call__cta {
margin-bottom: 1.3888888889rem;
display: block;
}
@media screen and (min-width: 768px) {
.c-memb-call__cta {
margin-bottom: 3.5555555556rem;
}
}
.c-memb-call__resources {
border: 1px solid #babab7;
border-radius: 0.2777777778rem;
padding: 1.0555555556rem;
}
@media screen and (min-width: 768px) {
.c-memb-call__resources {
margin-bottom: 7rem;
}
}
.c-memb-call__resources ul {
padding: 0;
margin: 0;
list-style: none;
}
.c-memb-call__resources li {
text-align: left;
border-bottom: 1px solid #d3d3d1;
padding-bottom: 10px;
padding-right: 28px;
}
.c-memb-call__resources li.filetype-pdf {
background: url("../../img/icon_pdf.png") right no-repeat;
}
.c-memb-call__resources li.filetype-ppt {
background: url("../../img/icon_ppt.png") right no-repeat;
}
.c-memb-call__resources li:last-child {
border-bottom: 0;
}
.c-memb-call__resources li a {
color: #6e6e6a;
}
.c-memb-call__resources h3 {
font-size: 1rem;
font-weight: normal;
margin: 0 0 1rem;
}
.c-memb-call {
text-align: center;
position: relative;
z-index: 9;
margin: 2rem 0;
border: solid #bdbcbe;
border-width: 1px 0;
padding: 2.2222222222rem 0;
}
@media screen and (min-width: 768px) {
.c-memb-call {
width: 16.6666666667rem;
float: right;
margin: 0 0 2rem 1rem;
padding: 0.5rem 0 0 3rem;
border: solid #bdbcbe;
border-width: 0 0 0 1px;
}
}
.c-memb-call__text {
display: block;
margin-bottom: 0.5rem;
font-size: 0.8888888889rem;
}
@media screen and (min-width: 768px) {
.c-memb-call__main {
width: calc(100% - 300px);
float: left;
margin: 0 -1rem 0 0;
padding: 0.5rem 3rem 0 0;
}
}
/* ==========================================================================
#Pager
========================================================================== */
/*doc
---
title: Pager
name: pager
category: Components - Pager
---
Default pager styling tailored to the output of a standard drupal pager.
```html_example
```
*/
.c-pager {
text-align: center;
margin-top: 2rem;
}
.c-pager__item {
display: inline;
margin: 0 0.25rem;
}
.c-pager__link {
color: #20201f;
display: inline-block;
font-size: 0.8888888889rem;
font-weight: 300;
padding: 0 0.25rem;
}
.c-pager__link:link, .c-pager__link:visited {
color: #20201f;
}
.c-pager .is-active .c-pager__link {
font-weight: 700;
border-bottom: 3px solid #20201f;
}
.t-bg-secondary .c-pager__link {
color: #fff;
}
.t-bg-secondary .c-pager__link:link, .t-bg-secondary .c-pager__link:visited {
color: #fff;
}
.t-bg-secondary .c-pager__link:hover {
color: #e2e0db;
}
.t-bg-secondary .is-active .c-pager__link {
border-bottom-color: #fff;
}
.ajax_results_pagination {
clear: both;
overflow: hidden;
}
/* ==========================================================================
People
========================================================================== */
.c-people {
margin: 2rem 0;
text-align: center;
}
@media screen and (min-width: 768px) {
.c-people {
text-align: left;
}
}
.c-people__image {
transition: all 0.25s ease-in-out;
display: inline-block;
border-radius: 50%;
border: 10px solid #e0ded8;
overflow: hidden;
}
.c-people__image:hover {
border-color: #d2cfc7;
}
.c-people__image img {
display: block;
}
.c-people__name {
font-size: 1rem;
font-weight: 400;
margin-bottom: 0;
}
.c-people__name a {
transition: all 0.25s ease-in-out;
color: #20201f;
}
.c-people__name a:hover {
color: #5f5f5e;
}
.c-people__title {
font-size: 0.7222222222rem;
}
.c-people__school {
font-size: 0.6666666667rem;
}
.c-people .link-item {
display: none;
}
.c-people__text {
font-family: "Georgia", serif;
line-height: 1.7;
}
@media screen and (min-width: 768px) {
.c-people__text {
padding-right: 3rem;
}
}
/* People list with description
========================================================================== */
.c-people--desc {
margin: 0.5rem 0;
}
.c-people__name--external a::after {
transition: all 0.25s ease-in-out;
content: "";
background-image: url("../../img/external.svg");
width: 17px;
height: 17px;
background-size: 17px 17px;
display: inline-block;
margin-left: 0.3888888889rem;
position: relative;
top: 3px;
}
.c-people__name--external a:hover::after {
opacity: 0.5;
}
/* People on featured mega menu
========================================================================== */
.c-people--list {
display: block;
padding: 0;
margin: 0;
}
.c-people--list li {
display: block;
margin-bottom: 0.75rem;
}
.c-people--list .c-people__name {
padding-top: 24px;
line-height: 0;
}
.c-people--list .c-people__image {
float: left;
margin-right: 0.75rem;
border: 5px rgba(0, 0, 0, 0) solid;
}
.c-people--list .c-people__title {
color: #5f5f5e;
line-height: 1;
margin-top: 0.5rem;
padding-left: 79px;
}
.c-people__title-comma {
margin-left: -3px;
}
/* ==========================================================================
Pill used on dyanmic grid upcoming and past results.
========================================================================== */
/*doc
---
title: Pill
name: pill
category: Components - Pill
---
```html_example
Default Pill
Active Pill
```
*/
.c-pill {
border-radius: 50px;
padding: 0.65rem 2rem;
min-width: 100px;
text-align: center;
display: inline-block;
}
.c-pill:hover {
cursor: pointer;
}
.c-pill input {
display: none;
}
.c-pill.is-active {
background: #412e48;
color: #fff;
}
.c-pill__wrapper {
float: right;
}
/* ==========================================================================
Pricing
========================================================================== */
/* ==========================================================================
#Primary nav component
========================================================================== */
/*doc
---
title: Primary Nav
name: primary-nav
category: Components - Primary Nav
---
```html_example
```
*/
.is-faded .region-primary-nav {
transition: all 0.3s ease-in-out;
opacity: 0.2;
}
.region-primary-nav {
transition: all 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* List class
========================================================================== */
.c-primary-nav {
padding: 0;
margin: 0;
list-style: none;
margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
.c-primary-nav {
transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
height: 100%;
right: -140%;
opacity: 0;
position: fixed;
top: 0;
visibility: hidden;
width: 70%;
}
}
@media screen and (min-width: 1025px) {
.c-primary-nav {
height: 88px;
padding: 0 0 0 280px;
}
}
@media screen and (min-width: 1100px) {
.c-primary-nav {
padding: 0 0 0 310px;
}
}
.c-primary-nav.is-active {
right: -70%;
opacity: 1;
height: 100%;
visibility: visible;
}
@media screen and (min-width: 1025px) {
.c-primary-nav .c-primary-nav__item {
display: none;
}
.c-primary-nav .c-primary-nav__item.has-dropdown,
.c-primary-nav__item:nth-child(5) {
display: inline-block;
}
}
/* List items class
========================================================================== */
.c-primary-nav__item {
margin: 0 0.5rem;
}
@media screen and (min-width: 1025px) {
.c-primary-nav__item {
display: inline-block;
margin: 0;
}
}
.c-primary-nav__item::after {
transition: all 0.25s ease-in-out;
content: "";
width: 100%;
position: relative;
background: #fff;
height: 5px;
top: 100%;
margin-top: -5px;
left: 0;
display: block;
opacity: 0;
}
@media screen and (min-width: 1025px) {
.c-primary-nav__item:hover::after {
opacity: 1;
}
}
.c-primary-nav__item.has-dropdown:hover .c-drop-nav__wrap {
opacity: 1;
visibility: visible;
}
.c-primary-nav__item.has-dropdown:hover .c-drop-nav__section {
transform: translateY(0);
opacity: 1;
}
.c-primary-nav__item .c-primary-nav__link {
color: #412e48;
font-size: 0.8888888889rem;
position: relative;
}
@media screen and (max-width: 1024px) {
.c-primary-nav__item .c-primary-nav__link {
color: #5f5f5e;
display: block;
border-bottom: 1px solid #e2e0db;
font-size: 1.2222222222rem;
padding: 0.25rem 0.75rem;
}
}
@media screen and (min-width: 1025px) {
.c-primary-nav__item .c-primary-nav__link {
line-height: 88px;
height: 88px;
display: block;
padding: 0 0.9rem;
}
}
.not_logged_in .c-primary-nav__item .c-primary-nav__link {
padding: 0 0.75rem;
}
/* Drop-down
========================================================================== */
@media screen and (max-width: 1024px) {
.c-drop-nav__wrap {
display: none;
}
}
@media screen and (min-width: 1025px) {
.c-drop-nav__wrap {
transition: all 0.25s ease-in-out;
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
background: #fff;
border-bottom: 5px solid #bdbcbe;
min-width: 150px;
overflow: hidden;
padding: 2rem 0.5rem;
position: absolute;
top: 100%;
width: 100%;
left: 0;
z-index: 10;
}
}
@media screen and (max-width: 1024px) {
.c-drop-nav__wrap.is-expanded {
display: block;
opacity: 1;
visibility: visible;
}
}
.c-drop-nav {
margin-bottom: 0;
padding: 0;
}
@media screen and (min-width: 1025px) {
.c-drop-nav {
padding: 1rem;
}
}
.c-drop-nav__section {
padding: 0.5rem 0.75rem;
}
@media screen and (max-width: 1024px) {
.c-drop-nav__section {
height: auto !important;
}
}
@media screen and (min-width: 1025px) {
.c-drop-nav__section {
padding: 0.5rem default 0.5rem 0;
transition: all 0.25s ease-in-out;
transform: translateY(-10px);
border-right: 1px solid #e2e0db;
opacity: 0;
}
}
.c-drop-nav__section:last-child {
border-right: 0;
}
.c-drop-nav__section h3 {
margin-bottom: 0.5rem;
}
.c-drop-nav__section p {
font-size: 0.8888888889rem;
}
.c-drop-nav__section .c-drop-nav__link {
/* this is the left column of the dropdown, we want these liks to be dark */
}
.c-drop-nav__section .c-drop-nav__link:hover {
text-decoration: underline;
}
.c-primary-nav__signin {
margin-bottom: 0;
color: #a9a394;
font-size: 0.7777777778rem;
text-align: right;
display: none;
}
@media screen and (min-width: 1025px) {
.c-primary-nav__signin {
display: block;
}
}
.user-logged-in .c-primary-nav__signin {
display: none;
}
.c-primary-nav__signin a:link,
.c-primary-nav__signin a:visited {
color: #a9a394;
font-weight: 700;
}
.c-primary-nav__signin a:hover {
color: #5f5f5e;
}
/* Mobile toggle link
========================================================================== */
.c-mobile-toggle {
display: block;
position: absolute;
top: 0;
right: 0;
height: 88px;
line-height: 88px;
}
@media screen and (min-width: 1025px) {
.c-mobile-toggle {
display: none;
}
}
.c-mobile-toggle:link, .c-mobile-toggle:visited {
color: #412e48;
}
@media screen and (min-width: 1025px) {
.c-primary-nav .c-primary-nav__item:nth-child(2) .c-drop-nav__wrap .c-drop-nav__item:first-child {
display: none;
}
.c-primary-nav .c-primary-nav__item:nth-child(3) .c-drop-nav__wrap .c-drop-nav__item:first-child {
display: none;
}
.c-primary-nav .c-primary-nav__item:nth-child(4) .c-drop-nav__section:first-child {
display: none;
}
.c-primary-nav .c-primary-nav__item:nth-child(4) .c-drop-nav__section:first-child h2 em {
display: none;
}
}
.c-resources--nav__link {
display: none;
}
.c-primary-nav .c-primary-nav__item:nth-child(4) .c-drop-nav__section:first-child h2 em {
display: none;
}
.c-primary-nav .c-primary-nav__item:nth-child(4) .c-drop-nav__section:first-child .c-resources--nav__link {
display: block;
color: #000;
}
.c-primary-nav .c-primary-nav__item:nth-child(4) .c-drop-nav__section:first-child .c-resources--nav__link:hover {
text-decoration: underline;
}
.c-primary-nav .c-primary-nav__item:nth-child(4) .c-drop-nav__section:first-child .c-resources--nav__title {
display: none;
}
/* ==========================================================================
Quote
========================================================================== */
.c-quote {
font-style: italic;
border-left: 0;
margin-bottom: 0;
/** Themes **/
/* &--blue {
background: #37698c;
color: rgba(palette(white), .7);
.o-grid {
&::before {
@include sprite($s-icon-quote-blue-small);
@include grid-media($medium) {
@include sprite($s-icon-quote-blue);
}
}
}
}*/
}
.c-quote .o-grid {
position: relative;
padding: 0.5rem 1rem 1rem 2.7777777778rem;
}
@media screen and (min-width: 768px) {
.c-quote .o-grid {
padding: 1rem 1rem 1rem 5.5555555556rem;
}
}
.c-quote .o-grid::before {
content: "";
display: block;
position: absolute;
top: 1.5rem;
left: 0;
}
@media screen and (min-width: 768px) {
.c-quote .o-grid::before {
top: 1rem;
}
}
.c-quote p {
font-size: 1.1666666667rem;
line-height: 2rem;
font-family: "Georgia", serif;
}
.c-quote__cite {
display: block;
text-align: right;
font-weight: 400;
}
.c-quote__title {
display: block;
text-align: right;
font-size: 0.8888888889rem;
}
.c-quote--white {
background: #fff;
color: rgba(95, 95, 94, 0.7);
}
.c-quote--white .o-grid::before {
background-image: url(../sprites/sprite.png);
background-position: -370px 0px;
width: 40px;
height: 29px;
}
@media screen and (min-width: 768px) {
.c-quote--white .o-grid::before {
background-image: url(../sprites/sprite.png);
background-position: 0px -166px;
width: 91px;
height: 67px;
}
}
.c-quote--gray {
background: #e9e5e6;
color: rgba(95, 95, 94, 0.8);
}
.c-quote--gray .o-grid::before {
background-image: url(../sprites/sprite.png);
background-position: -225px -315px;
width: 40px;
height: 29px;
}
@media screen and (min-width: 768px) {
.c-quote--gray .o-grid::before {
background-image: url(../sprites/sprite.png);
background-position: -101px -166px;
width: 91px;
height: 67px;
}
}
.c-quote--purple {
background: #634164;
color: rgba(255, 255, 255, 0.7);
}
.c-quote--purple .o-grid::before {
background-image: url(../sprites/sprite.png);
background-position: -275px -315px;
width: 40px;
height: 29px;
}
@media screen and (min-width: 768px) {
.c-quote--purple .o-grid::before {
background-image: url(../sprites/sprite.png);
background-position: -202px -166px;
width: 91px;
height: 67px;
}
}
/* ==========================================================================
Resources component
========================================================================== */
/*doc
---
title: Resources
name: resources
category: Components - Resources
---
```html_example
For PractitionersLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna magna, tempus quis tellus et, venenatis aliquet diam. Maecenas vestibulum elit ut laoreet elementum. Curabitur auctor, justo eget volutpat laoreet, elit felis lobortis eros, faucibus sodales leo lorem vitae lorem. Nunc semper mauris ac convallis interdum.
Featured Resource
Headline for an Event That Can Go One or Two Lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna magna, tempus quis tellus et, venenatis aliquet diam.
Read More
Teaching Bank
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna magna, tempus quis tellus et, venenatis aliquet diam.
You must be a Member to View these Resources
```
*/
.c-resources {
border: 1px solid #e2e0db;
padding: 1.3888888889rem 0 0;
margin-bottom: 3.3333333333rem;
overflow: hidden;
}
.c-resources__column {
width: 100%;
float: left;
margin-bottom: 1.3888888889rem;
padding: 1.5rem 1.6666666667rem;
min-height: 13.6111111111rem;
border: solid #d0cdc4;
border-width: 0 0 1px;
}
@media screen and (min-width: 1025px) {
.c-resources__column {
width: 33%;
border-width: 0 1px 0 0;
}
}
.c-resources__column:first-child {
font-family: "Georgia", serif;
}
.c-resources__column:nth-child(3) {
border: 0;
}
.c-resources__column ul {
margin: 0;
padding: 0;
}
.c-resources__column li {
list-style: none;
padding: 0;
margin: 0;
}
.c-resources__full-width {
background: #f6f6f4;
padding: 1.3888888889rem 2.2222222222rem;
width: 100%;
clear: both;
overflow: hidden;
}
.c-resources__featured h3 {
font-size: 0.8333333333rem;
margin: 0;
color: #9e9786;
font-weight: normal;
}
.c-resources__featured h2 {
font-size: 1.1111111111rem;
margin: 0.2777777778rem 0;
font-weight: normal;
line-height: 1.2222222222rem;
}
.c-resources__featured p {
font-size: 0.7222222222rem;
font-family: "Georgia", serif;
margin: 0;
}
.c-resources__featured-readmore {
margin-top: 1.1111111111rem;
display: block;
font-size: 0.8333333333rem;
}
.c-resources__featured-readmore::after {
background-image: url(../sprites/sprite.png);
background-position: -231px -138px;
width: 17px;
height: 17px;
display: inline-block;
vertical-align: middle;
margin-left: 0.4444444444rem;
content: "";
}
.c-resources__member-left {
float: left;
width: 100%;
}
@media screen and (min-width: 1025px) {
.c-resources__member-left {
width: 25%;
}
}
.c-resources__member-left h2 {
margin: 0;
font-size: 1.3888888889rem;
}
.c-resources__member-left p {
margin: 0;
font-family: "Georgia", serif;
font-size: 0.8333333333rem;
}
.c-resources__member-right {
float: right;
width: 100%;
text-align: center;
padding: 1.6666666667rem 0 0;
}
@media screen and (min-width: 1025px) {
.c-resources__member-right {
width: 75%;
}
}
.c-resources__member-right a {
margin: 0 0.5555555556rem;
color: #20201f;
}
.c-resources__member-right ul {
display: none;
}
.c-resources__title h2 {
font-size: 1.3333333333rem;
margin-top: -0.5555555556rem;
font-family: "nimbus-sans", sans-serif;
}
@media screen and (max-width: 1024px) {
.c-resources--nav .c-resources__title h2 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.c-resources--nav .c-resources__title h2::after {
clear: both;
content: "";
display: block;
}
}
.c-resources__title h2 em {
font-family: "Georgia", serif;
font-style: italic;
text-transform: lowercase;
font-weight: normal;
font-size: 1.1111111111rem;
}
@media screen and (max-width: 1024px) {
.c-resources--nav .c-resources__title h2 em {
font-size: 0.75rem;
}
}
.c-resources__title p {
font-size: 0.8333333333rem;
}
.c-resources--nav .c-resources--nav__row {
padding-top: 1.25rem;
}
.c-resources:first-child .c-resources__column {
width: 100%;
}
@media screen and (min-width: 1025px) {
.c-resources:first-child .c-resources__column {
width: 33%;
}
}
.user-logged-in .c-resources__member-right p {
display: none;
}
.user-logged-in .c-resources__member-right ul {
display: block;
float: left;
text-align: left;
list-style: none;
margin: 0;
padding-left: 16%;
}
.user-logged-in .c-resources__member-right ul a {
text-decoration: none;
}
/* ==========================================================================
#Resources add form component
========================================================================== */
/*doc
---
title: Resources Add Form
name: resources_add_form
category: Components - Resources Add Form
---
Resources Add Form for memeber role
```html_example
```
*/
.node-resources-form .form-type-managed-file,
.node-grading-rubris-form .form-type-managed-file,
.node-syllabus-bank-form .form-type-managed-file {
clear: both;
}
.node-resources-form .form-required::after,
.node-grading-rubris-form .form-required::after,
.node-syllabus-bank-form .form-required::after {
content: "*";
color: #d11149;
}
.node-resources-form .description,
.node-grading-rubris-form .description,
.node-syllabus-bank-form .description {
font-size: 0.6666666667rem;
margin-top: 0;
}
.node-resources-form .field--name-field-submission-deadline,
.node-grading-rubris-form .field--name-field-submission-deadline,
.node-syllabus-bank-form .field--name-field-submission-deadline {
max-width: 50%;
}
.node-resources-form .field--name-field-submission-deadline h4,
.node-grading-rubris-form .field--name-field-submission-deadline h4,
.node-syllabus-bank-form .field--name-field-submission-deadline h4 {
font-size: 1rem;
line-height: 1.5;
font-weight: 500;
margin: 0;
}
.node-resources-form .form-actions,
.node-grading-rubris-form .form-actions,
.node-syllabus-bank-form .form-actions {
text-align: center;
padding-top: 2rem;
}
@media screen and (min-width: 768px) {
.node-resources-form .field--name-field-contact-first-name,
.node-resources-form .field--name-field-contact-last-name,
.node-resources-form .field--name-title,
.node-resources-form .field--name-field-author,
.node-resources-form .field--widget-options-select,
.node-grading-rubris-form .field--name-field-contact-first-name,
.node-grading-rubris-form .field--name-field-contact-last-name,
.node-grading-rubris-form .field--name-title,
.node-grading-rubris-form .field--name-field-author,
.node-grading-rubris-form .field--widget-options-select,
.node-syllabus-bank-form .field--name-field-contact-first-name,
.node-syllabus-bank-form .field--name-field-contact-last-name,
.node-syllabus-bank-form .field--name-title,
.node-syllabus-bank-form .field--name-field-author,
.node-syllabus-bank-form .field--widget-options-select {
width: 50%;
float: left;
}
}
@media screen and (min-width: 768px) {
.node-resources-form .field--name-title,
.node-resources-form .field--name-field-contact-name,
.node-resources-form .field--name-title,
.node-resources-form .field--name-field-contact-email,
.node-resources-form .field--name-field-position-duration,
.node-resources-form .field--name-field-resource-,
.node-resources-form .field--name-field-source-of-law,
.node-grading-rubris-form .field--name-title,
.node-grading-rubris-form .field--name-field-contact-name,
.node-grading-rubris-form .field--name-title,
.node-grading-rubris-form .field--name-field-contact-email,
.node-grading-rubris-form .field--name-field-position-duration,
.node-grading-rubris-form .field--name-field-resource-,
.node-grading-rubris-form .field--name-field-source-of-law,
.node-syllabus-bank-form .field--name-title,
.node-syllabus-bank-form .field--name-field-contact-name,
.node-syllabus-bank-form .field--name-title,
.node-syllabus-bank-form .field--name-field-contact-email,
.node-syllabus-bank-form .field--name-field-position-duration,
.node-syllabus-bank-form .field--name-field-resource-,
.node-syllabus-bank-form .field--name-field-source-of-law {
padding-right: 1rem;
}
}
@media screen and (min-width: 768px) {
.node-resources-form .field--name-field-contact-last-name,
.node-resources-form .field--name-field-contact-title,
.node-resources-form .field--name-field-author,
.node-resources-form .field--name-field-category,
.node-resources-form .field--name-field-jurisdiction,
.node-grading-rubris-form .field--name-field-contact-last-name,
.node-grading-rubris-form .field--name-field-contact-title,
.node-grading-rubris-form .field--name-field-author,
.node-grading-rubris-form .field--name-field-category,
.node-grading-rubris-form .field--name-field-jurisdiction,
.node-syllabus-bank-form .field--name-field-contact-last-name,
.node-syllabus-bank-form .field--name-field-contact-title,
.node-syllabus-bank-form .field--name-field-author,
.node-syllabus-bank-form .field--name-field-category,
.node-syllabus-bank-form .field--name-field-jurisdiction {
padding-left: 1rem;
}
}
.node-resources-form .form-item-body-0-value > label span,
.node-resources-form .filter-wrapper,
.node-resources-form #edit-preview,
.node-grading-rubris-form .form-item-body-0-value > label span,
.node-grading-rubris-form .filter-wrapper,
.node-grading-rubris-form #edit-preview,
.node-syllabus-bank-form .form-item-body-0-value > label span,
.node-syllabus-bank-form .filter-wrapper,
.node-syllabus-bank-form #edit-preview {
display: none;
}
/* ==========================================================================
Search
========================================================================== */
/*doc
---
title: Search form
name: search-form
category: Components - search
---
In an ideal world it would look like this
```html_example
```
*/
.c-search-form {
display: flex;
align-items: center;
/*&__search {
}*/
}
.c-search-form label {
display: none;
}
.c-search-form__submit, .form-type-search + .form-actions > .form-submit,
.form-type-search + .form-submit {
margin: 0 0 0 1rem;
}
/*doc
---
title: Search form
name: search-form-Drupal
category: Components - search
---
What Drupal makes
```html_example
```
*/
.form-type-search .form-search {
/* @extend .c-search-form__search;*/
}
/*doc
---
title: Views Search form
name: search-form-Drupal-views
category: Components - search
---
What Drupal View makes
```html_example
```
*/
.c-search-results .view-filters .form--inline {
display: flex;
align-items: center;
}
.c-search-results .view-filters .form-item-search-api-fulltext label {
display: none;
}
.c-search-results .view-filters .form-actions > .form-submit,
.c-search-results .view-filters .form-submit {
margin: 0 0 0 1rem;
}
/* ==========================================================================
Search
========================================================================== */
/*doc
---
title: Search Results
name: search-results
category: Components - search results
---
In an ideal world it would look like this
```html_example
January 28, 2015
"International sanctions on Iran’s key energy and financial sectors harmed Iran’s economy and arguably contributed to Iran’s acceptance of restrictions
April 21, 2015
"International sanctions on Iran’s key energy and financial sectors harmed Iran’s economy and arguably contributed to Iran’s acceptance of restrictions
```
*/
@media screen and (max-width: 767px) {
.c-search-results__page .c-sidebar {
display: none;
}
}
.c-search-results__page .c-sidebar h2 {
border-bottom: 2px solid #412e48;
}
.c-search-results__page .c-sidebar ul {
list-style: none;
padding-left: 0;
}
@media screen and (min-width: 768px) {
.c-search-results__filters .form--inline {
display: flex;
}
}
.c-search-results__filters .form--inline .form-text {
background: #412e48;
border: 0;
padding-left: 1rem;
height: 2.2222222222rem;
font-size: 0.7777777778rem;
text-transform: uppercase;
font-weight: 700;
min-width: 50%;
width: 100%;
margin-right: 0;
}
.c-search-results__filters .form--inline .form-text::-webkit-input-placeholder, .c-search-results__filters .form--inline .form-text:-moz-placeholder, .c-search-results__filters .form--inline .form-text::-moz-placeholder, .c-search-results__filters .form--inline .form-text:-ms-input-placeholder {
color: #999;
}
@media screen and (min-width: 768px) {
.c-search-results__filters .form--inline .form-text {
margin-right: 1rem;
width: auto;
}
}
@media screen and (max-width: 767px) {
.c-search-results__filters .form--inline .form-actions {
text-align: center;
}
}
.c-search-results__results,
.c-search-results ul {
list-style: none;
padding-left: 0;
}
.c-search-results__result {
border-bottom: 1px solid #412e48;
padding: 2rem 0;
}
.c-search-results__result:first-of-type {
border-top: 1px solid #412e48;
margin: 2rem 0 0;
}
.c-search-results__result .c-job__description {
border: 0;
}
/* ==========================================================================
Sign up flow
========================================================================== */
.c-sign-up {
padding: 1rem 0;
}
.c-sign-up__item {
margin-bottom: 0;
}
.c-sign-up__title {
margin-bottom: 0;
}
.c-sign-up__label {
font-weight: 400;
line-height: 1.2;
margin-bottom: 0.5rem;
margin-top: 1rem;
}
.c-sign-up__lead {
font-size: 1.1111111111rem;
font-weight: 500;
margin-bottom: 0.35rem;
}
.c-sign-up__form p {
font-size: 0.9rem;
font-weight: 300;
line-height: 1.2;
}
.confirmation-icon {
background-image: url("../../img/check.svg");
height: 102px;
width: 102px;
display: block;
margin-bottom: 0.75rem;
margin-top: 1.5rem;
}
.c-sign-up__back {
font-size: 0.8rem;
}
.c-sign-up__back::before {
content: "";
display: inline-block;
position: relative;
top: 3px;
left: 0;
margin-right: 10px;
}
.c-sign-up__back::before {
opacity: 0.5;
}
.c-sign-up__back:link, .c-sign-up__back:visited {
color: #929291;
}
.c-sign-up__back:hover {
color: #797977;
}
/* ==========================================================================
Static Grid
========================================================================== */
/** Link **/
.c-sgrid-link__title {
margin-bottom: 2.75rem;
}
.c-sgrid-link__content {
margin-left: auto;
margin-right: auto;
max-width: 1050px;
padding: 0;
}
.c-sgrid-link__content::before, .c-sgrid-link__content::after {
content: " ";
display: table;
}
.c-sgrid-link__content::after {
clear: both;
}
.c-sgrid-link__item {
display: block;
margin-bottom: 1rem;
padding: 0 1rem;
}
@media screen and (min-width: 1025px) {
.c-sgrid-link__item {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
padding: 0;
gap: 1em 2.236em;
clear: left;
width: 100%;
padding: 0 4rem 1.1111111111rem;
}
.c-sgrid-link__item > li {
flex-basis: calc(16.6666666667% - 2.236em);
margin: 0;
}
}
.c-sgrid-link__link {
display: block;
border-top: 1px solid #5f5f5e;
font-size: 1.1666666667rem;
line-height: 1.1;
padding: 0.2777777778rem;
}
/* ==========================================================================
Share buttons
========================================================================== */
.c-share {
margin-bottom: 0.5rem;
}
.c-share a {
display: inline-block;
}
.c-sidebar-block {
margin-bottom: 2.25rem;
}
@media screen and (min-width: 1025px) {
.c-sidebar-block {
padding-left: 3rem;
}
}
.c-sidebar-block__title {
border-left: 5px solid #95ac57;
font-weight: 400;
font-size: 1.3333333333rem;
line-height: 30px;
padding: 0.25rem 0 0.25rem 13px;
margin-bottom: 1rem;
}
.c-sidebar-block__title i {
font-family: "Georgia", serif;
font-style: italic;
font-size: 1.4444444444rem;
line-height: 30px;
}
.c-sidebar-block--box ul {
display: block;
margin: 0;
padding: 0;
}
.c-sidebar-block--box ul:after {
display: table;
clear: both;
content: "";
}
.c-sidebar-block--box ul li {
margin: 0 5px 5px 0;
padding: 0;
display: block;
float: left;
white-space: nowrap;
}
.c-sidebar-block--box a {
font-size: 0.7777777778rem;
background: #ebebeb;
display: block;
padding: 0.125rem 0.5rem;
color: #20201f;
text-decoration: none;
opacity: 1;
}
.c-sidebar-block--box a:hover {
opacity: 0.7;
}
.c-sidebar-block--row ul {
display: block;
margin: 0;
padding: 0;
}
.c-sidebar-block--row ul li {
margin: 0 0 0.75rem;
padding: 0.75rem 0 0;
display: block;
border-top: 1px #d8d8d8 solid;
}
.c-sidebar-block--row ul li:first-child {
border-top: none;
}
.c-sidebar-block--row a {
text-decoration: none;
color: #20201f;
font-size: 0.8888888889rem;
}
.c-sidebar-block--row a:hover {
text-decoration: underline;
}
/* ==========================================================================
Slider
========================================================================== */
.c-slider {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row nowrap;
background-size: cover;
background-position: center;
min-height: 650px;
padding: 4rem 0;
}
.c-slider .o-grid {
align-self: flex-end;
}
.c-slider__content {
max-width: 100%;
}
@media screen and (min-width: 768px) {
.c-slider__content {
max-width: 100%;
}
}
@media screen and (min-width: 1025px) {
.c-slider__content {
max-width: 100%;
}
}
.c-slider__title {
color: #fff;
font-size: 2.5555555556rem;
line-height: 1.1;
margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
.c-slider__title {
font-size: 3.1111111111rem;
}
}
@media screen and (min-width: 1025px) {
.c-slider__title {
font-size: 3.6666666667rem;
}
}
.c-slider__text {
color: #fff;
font-size: 1.1666666667rem;
line-height: 1.2;
}
.c-slider__text p {
font-weight: 300;
}
.c-slider .c-btn, .c-slider .dz-remove, .c-slider .c-featured-pane__btn a, .c-featured-pane__btn .c-slider a, .c-slider .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-slider .button,
.c-slider .c-link {
text-align: center;
}
@media screen and (min-width: 768px) {
.c-slider .c-btn, .c-slider .dz-remove, .c-slider .c-featured-pane__btn a, .c-featured-pane__btn .c-slider a, .c-slider .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-slider .button,
.c-slider .c-link {
margin-right: 1rem;
text-align: left;
}
}
.c-slider--half {
background-size: cover;
background-position: center;
min-height: 600px;
position: relative;
padding: 4rem 0;
}
.c-slider--half::before {
content: "";
background: rgba(255, 255, 255, 0.5);
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
@media screen and (min-width: 768px) {
.c-slider--half::before {
background: rgba(255, 255, 255, 0.8);
width: 45%;
}
}
.c-slider--half .c-slider__title {
color: #20201f;
line-height: 0.9;
}
.c-slider--half .c-slider__content {
position: relative;
z-index: 5;
}
.c-slider--half .c-slider__text {
color: #20201f;
}
.c-slider--half .c-btn, .c-slider--half .dz-remove, .c-slider--half .c-featured-pane__btn a, .c-featured-pane__btn .c-slider--half a, .c-slider--half .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-slider--half .button {
border-color: #20201f;
}
.c-slider--half .c-btn, .c-slider--half .dz-remove, .c-slider--half .c-featured-pane__btn a, .c-featured-pane__btn .c-slider--half a, .c-slider--half .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-slider--half .button,
.c-slider--half .c-link {
text-align: center;
}
@media screen and (min-width: 768px) {
.c-slider--half .c-btn, .c-slider--half .dz-remove, .c-slider--half .c-featured-pane__btn a, .c-featured-pane__btn .c-slider--half a, .c-slider--half .c-search-results__filters .form--inline .form-actions .button, .c-search-results__filters .form--inline .form-actions .c-slider--half .button,
.c-slider--half .c-link {
margin-right: 1rem;
text-align: left;
}
}
/* ==========================================================================
Bullets
========================================================================== */
.slick-dots li button:hover, .slick-dots li button:focus, .slick-dots li button::before,
.slick-dots li.slick-active button:hover,
.slick-dots li.slick-active button:focus,
.slick-dots li.slick-active button::before {
background-color: transparent;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before, .slick-dots li button::before::before,
.slick-dots li.slick-active button:hover::before,
.slick-dots li.slick-active button:focus::before,
.slick-dots li.slick-active button::before::before {
background-color: transparent;
}
.c-slider__wrap--default .slick-dots button {
background-image: url("../../img/bullet--white.svg");
}
.c-slider__wrap--default .slick-active button {
background-image: url("../../img/bullet--white--active.svg");
}
.c-slider__wrap--half .slick-dots li button,
.c-featured-pane .slick-dots li button,
.is-half-slide .slick-dots li button {
background-image: url("../../img/bullet--gray.svg");
}
.c-slider__wrap--half .slick-dots .slick-active button,
.c-featured-pane .slick-dots .slick-active button,
.is-half-slide .slick-dots .slick-active button {
background-image: url("../../img/bullet--gray--active.svg");
}
.slick-arrow {
display: none !important;
}
.slick-dots {
margin-left: auto;
margin-right: auto;
max-width: 1050px;
padding: 0 1rem;
bottom: 2rem;
left: 0;
right: 0;
text-align: center;
}
.slick-dots::before, .slick-dots::after {
content: " ";
display: table;
}
.slick-dots::after {
clear: both;
}
@media screen and (min-width: 768px) {
.slick-dots {
bottom: 3rem;
text-align: left;
}
}
.slick-dots li button {
display: block;
width: 20px;
height: 20px;
background-size: 20px 20px;
}
.slick-dots li button::before {
display: none;
}
.slick-dotted.slick-slider {
margin-bottom: 0;
}
.slick-slider *:focus {
outline: none;
}
/* ==========================================================================
Sub nav
========================================================================== */
/* ==========================================================================
Table
========================================================================== */
/* ==========================================================================
#Teaser component
========================================================================== */
/*doc
---
title: Teaser
name: teaser
category: Components - Teaser
---
This is the teaser component which has multiple variations. Take a look at the `Teaser with image` section to see a full example.
```html_example
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
.c-teaser__source {
font-weight: 600;
color: #634164;
margin-bottom: 0;
}
.c-teaser__title {
color: #666;
font-size: 1.5rem;
margin-bottom: 0;
}
.c-teaser__link {
color: #412e48;
}
.c-teaser__content {
color: #666;
font-size: 1rem;
}
.c-teaser__byline {
color: #666;
}
/*doc
---
title: Teaser with image
name: teaser_with_image
category: Components - Teaser
---
```html_example
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
/*doc
---
title: Teaser in UI Row
name: teaser_ui_row
category: Components - Teaser
---
This is an example of how to use the teaser component with the `ui-row` object to get padding and a border.
```html_example
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
/*doc
---
title: Teaser with byline
name: teaser_with_byline
category: Components - Teaser
---
```html_example
Articles
By Chris Roane
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
/* ==========================================================================
Page Intro component
========================================================================== */
.c-text {
padding: 1rem 0;
}
.c-text__title {
font-size: 1.3333333333rem;
line-height: 1.25;
margin-bottom: 1.75rem;
font-family: "Georgia", serif;
font-weight: 400;
}
.c-text__body {
font-family: "Georgia", serif;
word-wrap: break-word;
}
.c-text a {
color: inherit;
}
.c-text a:visited {
opacity: 0.8;
}
.c-text__note {
font-size: 0.8888888889rem;
border-bottom: 2px solid #bdbcbe;
font-weight: 300;
color: #bdbcbe;
padding: 0 0 1rem;
margin-bottom: 1rem;
word-wrap: break-word;
}
@media screen and (min-width: 768px) {
.c-text__note {
border-bottom: 0;
padding-right: 1.9444444444rem;
border-right: 2px solid #bdbcbe;
}
}
.c-text__note *:last-child {
margin-bottom: 0;
}
.c-text--blue {
background: #37698c;
}
.c-text--blue .c-text__title,
.c-text--blue .c-text__body {
color: #fff;
}
.c-text--blue a {
color: inherit;
}
.c-text--blue a:visited {
opacity: 0.8;
}
.c-text--green {
background: #84915e;
}
.c-text--green .c-text__title,
.c-text--green .c-text__body {
color: #fff;
}
.c-text--green a {
color: inherit;
}
.c-text--green a:visited {
opacity: 0.8;
}
.c-text--purple {
background: #634164;
}
.c-text--purple .c-text__title,
.c-text--purple .c-text__body {
color: #fff;
}
.c-text--purple a {
color: inherit;
}
.c-text--purple a:visited {
opacity: 0.8;
}
/* ==========================================================================
Themes color
========================================================================== */
.c-themes--white {
background-color: #fff;
color: rgba(95, 95, 94, 0.7);
}
.c-themes--white h1,
.c-themes--white h2,
.c-themes--white h3,
.c-themes--white h4,
.c-themes--white h5,
.c-themes--white h6 {
color: #000;
}
.c-themes--white a {
transition: all 0.2s ease-in-out;
border-color: rgba(95, 95, 94, 0.3);
}
.c-themes--white a:link, .c-themes--white a:visited {
color: #000;
}
.c-themes--white a:hover, .c-themes--white a:active, .c-themes--white a.is-active {
color: #251a29;
}
.c-themes--blue {
background-color: #37698c;
color: #fff;
}
.c-themes--blue h1,
.c-themes--blue h2,
.c-themes--blue h3,
.c-themes--blue h4,
.c-themes--blue h5,
.c-themes--blue h6 {
color: #fff;
}
.c-themes--blue a {
transition: all 0.2s ease-in-out;
border-color: rgba(255, 255, 255, 0.1);
}
.c-themes--blue a:link, .c-themes--blue a:visited {
color: #fff;
}
.c-themes--blue a:hover, .c-themes--blue a:active, .c-themes--blue a.is-active {
color: #412e48;
}
.c-themes--gray {
background-color: #e2e0db;
color: rgba(95, 95, 94, 0.8);
}
.c-themes--gray h1,
.c-themes--gray h2,
.c-themes--gray h3,
.c-themes--gray h4,
.c-themes--gray h5,
.c-themes--gray h6 {
color: #5f5f5e;
}
.c-themes--gray a {
transition: all 0.2s ease-in-out;
border-color: rgba(95, 95, 94, 0.3);
}
.c-themes--gray a:link, .c-themes--gray a:visited {
color: #5f5f5e;
}
.c-themes--gray a:hover, .c-themes--gray a:active, .c-themes--gray a.is-active {
color: #412e48;
}
.c-themes--purple {
background-color: #634164;
color: #fff;
}
.c-themes--purple h1,
.c-themes--purple h2,
.c-themes--purple h3,
.c-themes--purple h4,
.c-themes--purple h5,
.c-themes--purple h6 {
color: #fff;
}
.c-themes--purple a {
transition: all 0.2s ease-in-out;
border-color: rgba(255, 255, 255, 0.1);
}
.c-themes--purple a:link, .c-themes--purple a:visited {
color: #fff;
}
.c-themes--purple a:hover, .c-themes--purple a:active, .c-themes--purple a.is-active {
color: #412e48;
}
/* ==========================================================================
#Job component
========================================================================== */
/*doc
---
title: Job
name: job
category: Components - Job
---
Join block
```html_example
Organization Name
Lorem ipsum dolor sit amet
Contact Name
Integer tristique auctor purus
```
*/
.c-job__position-title {
font-size: 1.6666666667rem;
margin-bottom: 0;
}
.c-job__organization {
font-size: 1.1111111111rem;
}
.c-job__item {
margin-bottom: 1.1111111111rem;
}
.c-job__label {
font-weight: 700;
display: inline;
}
.c-job__label-above {
font-weight: 700;
display: block;
}
.c-job__contact {
margin-top: 1.1111111111rem;
border-top: 1px solid;
padding-top: 1.1111111111rem;
}
.c-job__contact-title {
margin-bottom: 1.1111111111rem;
}
.c-job__description {
border: solid;
border-width: 0 0 1px;
margin: 0 0 1.1111111111rem;
}
.c-job__address {
margin-top: 1.1111111111rem;
}
.c-job__duration {
margin-bottom: 1.1111111111rem;
}
/* ==========================================================================
#Job add form component
========================================================================== */
/*doc
---
title: Job Add Form
name: job_add_form
category: Components - Job Add Form
---
Job Add Form
```html_example
```
*/
.node-jobs-form .form-required::after {
content: "*";
color: #d11149;
}
.node-jobs-form .description {
font-size: 0.6666666667rem;
margin-top: 0;
}
.node-jobs-form .field--name-field-submission-deadline {
max-width: 50%;
}
.node-jobs-form .field--name-field-submission-deadline h4 {
font-size: 1rem;
line-height: 1.5;
font-weight: 500;
margin: 0;
}
.node-jobs-form .form-actions {
text-align: center;
padding-top: 2rem;
}
@media screen and (min-width: 768px) {
.node-jobs-form .field--type-email,
.node-jobs-form .field--type-string,
.node-jobs-form .field--type-link,
.node-jobs-form .field--name-field-submission-deadline,
.node-jobs-form .field--widget-options-select {
width: 50%;
float: left;
}
}
@media screen and (min-width: 768px) {
.node-jobs-form .field--name-title,
.node-jobs-form .field--name-field-contact-name,
.node-jobs-form .field--name-field-contact-phone,
.node-jobs-form .field--name-field-contact-email,
.node-jobs-form .field--name-field-position-duration,
.node-jobs-form .field--name-field-students-per-semester {
padding-right: 1rem;
}
}
@media screen and (min-width: 768px) {
.node-jobs-form .field--name-field-organization-name,
.node-jobs-form .field--name-field-contact-title,
.node-jobs-form .field--name-field-contact-fax,
.node-jobs-form .field--name-field-website,
.node-jobs-form .field--name-field-salary,
.node-jobs-form .field--name-field-submission-deadline {
padding-left: 1rem;
}
}
.c-view-filters__search--wrap input.form-text, .c-view-filters__search--wrap, .c-view-filters .chosen-container-single .chosen-single, .c-view-filters select {
background: none;
border-radius: 0;
border: none;
border-bottom: 2px solid #bebcbb;
text-transform: uppercase;
box-shadow: none;
padding: 0.25rem 0 0.25rem 0.25rem;
margin: 0;
height: 28px;
width: 100%;
color: #20201f;
}
.c-view-filters__apply input.form-submit, .c-view-filters .chosen-container-single .chosen-single div b::after {
background: url("../../img/arrow-select.png") no-repeat center center;
width: 17px;
height: 17px;
border: none;
margin-top: -8px;
right: 2px;
}
.c-view-filters {
background: #e2e0db;
margin-bottom: 3.75rem;
}
.c-view-filters .form--inline {
min-height: 66px;
}
@media screen and (min-width: 768px) {
.c-view-filters .form--inline {
display: flex;
align-items: center;
}
}
.c-view-filters__label {
display: block;
white-space: nowrap;
margin-right: 0.5rem;
font-size: 0.8888888889rem;
padding-top: 5px;
}
.c-view-filters__label i {
font-family: "Georgia", serif;
}
.c-view-filters__fields {
margin: 0;
padding: 0;
display: flex;
flex: 0 1 100%;
}
.c-view-filters__fields li {
display: flex;
}
.c-view-filters__fields li:first-child {
flex: 0 1 60%;
padding-right: 1rem;
}
.c-view-filters__fields li:last-child {
flex: 0 1 40%;
}
.c-view-filters .form-item {
width: 100%;
}
.c-view-filters__filter {
width: 100%;
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.c-view-filters__filter {
display: flex;
align-items: center;
flex: 0 1 100%;
margin-right: 10%;
margin-bottom: 0;
}
}
.c-view-filters select {
background: url("../../img/arrow-select.png") no-repeat right center;
}
.c-view-filters .chosen-container-single.chosen-container {
margin-bottom: 0;
width: 100% !important;
}
.c-view-filters .chosen-container-single .chosen-single span {
font-size: 1rem;
font-weight: 700;
}
.c-view-filters__search {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.c-view-filters__search {
display: flex;
align-items: center;
flex: 0 1 45%;
margin-right: 1rem;
margin-bottom: 0;
}
}
.c-view-filters__search--wrap {
display: flex;
}
.c-view-filters__search--wrap input.form-text {
border: none;
padding: 0;
margin: 0;
height: 28px;
display: block;
padding-bottom: 4px;
}
.c-view-filters__apply input.form-submit {
display: block;
margin-top: 0;
overflow: hidden;
text-indent: -9999px;
transform: rotate(-90deg);
}
.c-view-filters__reset {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.c-view-filters__reset {
display: flex;
align-items: center;
margin-bottom: 0;
}
}
.c-view-filters__reset button {
margin: 0;
}
/* ==========================================================================
#Trumps
========================================================================== */
/* Visibility classes
========================================================================== */
/*doc
---
title: Visibility Classes
name: vis_class
category: Trumps - Visibility Classes
---
Classes you can use in the HTML to affect the visibility of an element.
Two vartions are available: `.t-show` and `.t-hide`.
Class | Description
----------------|---------------
`.t-hide`| Hides element
`.t-show`| Shows element
```html_example
[This element is visible!]
```
*/
.t-hide {
display: none !important;
}
@media screen and (max-width: 767px) {
.t-hide--small-only {
display: none !important;
}
}
@media screen and (max-width: 1024px) {
.t-hide--small-medium {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.t-hide--medium-large {
display: none !important;
}
}
.t-show {
display: block !important;
}
/* Float classes
========================================================================== */
/*doc
---
title: Float Classes
name: flo_class
category: Trumps - Float Classes
---
Classes you can use in the HTML to affect the visibility of an element. Use `.t-left` to float an element
to the left, and use `.t-right` to float to the right.
Class | Description
----------------|---------------
`.t-left`| Aligns element to the left
`.t-right`| Aligns element to the right
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
```
*/
.t-left {
float: left !important;
}
.t-right {
float: right !important;
}
/* Text align classes
========================================================================== */
/*doc
---
title: Text Align Classes
name: tex_class
category: Trumps - Text Align Classes
---
Classes you can use in the HTML to affect the visibility of an element. Use the following classes
to adjust text alignment:
Class | Description
----------------|---------------
`.t-text-left`| Aligns text to the left
`.t-text-center`| Aligns text to the center
`.t-text-right`| Aligns text to the right
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic corporis quidem omnis cumque praesentium, consequatur nostrum minus. Aliquid, delectus incidunt repudiandae eveniet cupiditate nobis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic corporis quidem omnis cumque praesentium, consequatur nostrum minus. Aliquid, delectus incidunt repudiandae eveniet cupiditate nobis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic corporis quidem omnis cumque praesentium, consequatur nostrum minus. Aliquid, delectus incidunt repudiandae eveniet cupiditate nobis!
```
*/
.t-text-left {
text-align: left !important;
}
.t-text-right {
text-align: right !important;
}
.t-text-center {
text-align: center !important;
}
/* Font family trumps
========================================================================== */
/*doc
---
title: Font family
name: name
category: Trumps - Font Family
---
```html_example
This is a heading which is normally serif.
This is a paragraph which is normally sans-serif.
```
*/
.t-sans {
font-family: "nimbus-sans", sans-serif;
}
.t-serif {
font-family: "Georgia", serif;
}
/* BG Colors
========================================================================== */
/*doc
---
title: Background colors
name: bg-colors
category: Trumps - Background colors
---
```html_example
Example
```
*/
.t-bg-white {
background-color: #fff;
}
.t-bg-orange {
background-color: #f29861;
}
.t-bg-calypso,
.t-bg-eggplant,
.t-bg-secondary {
background-color: #634164;
}
.t-bg-cucumber {
background-color: #95ac57;
}
.t-bg-voodoo,
.t-bg-primary {
background-color: #412e48;
}
.t-bg-silver {
background-color: #e2e0db;
}
.t-bg-cararra {
background-color: #f4f3f1;
}
.t-bg-storm-dust {
background-color: #5f5f5e;
}
.t-bg-mineshaft {
background-color: #20201f;
}
/* Margin trumps
========================================================================== */
/*doc
---
title: Margin
name: margin-classes
category: Trumps - Margin classes
---
```html_example
Margin base right
Margin small right
Margin base left
Margin small left
Margin base bottom
Margin small bottom
Margin base top
Margin small top
```
*/
.t-mbr {
margin-right: 1.5rem;
}
.t-msr {
margin-right: 0.75rem;
}
.t-mbl {
margin-left: 1.5rem;
}
.t-msl {
margin-left: 0.75rem;
}
.t-mbb {
margin-bottom: 1.5rem;
}
.t-msb {
margin-bottom: 0.75rem;
}
.t-mbt {
margin-top: 1.5rem;
}
.t-mst {
margin-top: 0.75rem;
}
.t-nom {
margin: 0;
}
/* Padding trumps
========================================================================== */
/*doc
---
title: Padding
name: padding-classes
category: Trumps - Padding classes
---
```html_example
Padding base right
Padding small right
Padding base left
Padding small left
```
*/
.t-pbr {
padding-right: 1.5rem;
}
.t-psr {
padding-right: 0.75rem;
}
.t-pbl {
padding-left: 1.5rem;
}
.t-psl {
padding-left: 0.75rem;
}
.t-nop {
padding: 0;
}
.t-nopb {
padding-bottom: 0;
}
.t-ftl {
align-self: flex-start;
margin-right: auto;
}
.t-ftr {
align-self: flex-start;
margin-left: auto;
}
.t-ftc {
align-self: baseline;
}
.t-fbr {
align-self: flex-end;
margin-left: auto;
}
.t-fbl {
align-self: flex-end;
margin-right: auto;
}
.t-fbc {
align-self: flex-end;
}
.t-frc {
align-self: center;
margin-left: auto;
}
.t-flc {
align-self: center;
margin-right: auto;
}
/*
This is needed to work with the wysiwyg
wont allow class attachments to links, so we need to wrap links in span to deactivate
purple color
*/
.t-link--dark a:link,
.t-link--dark a:visited {
color: #20201f !important;
}
/* flex trumps to override some height issues with sliders */
.t-flex {
display: flex;
}
.t-full-height {
height: 100%;
}
/* Override the under lining in a single link or in children of a wrapper */
/*doc
---
title: Links
name: link-trump
category: Trumps - Link Trumps
---
```html_example
No text decoration here
No text decoration here
```
*/
.t-no-line,
.t-no-line a {
text-decoration: none !important;
}
/* Style-guide trumps
========================================================================== */
.wf {
background: #ccc;
}
body .ckeditor-accordion-container > dl {
border-color: #412e48;
}
body .ckeditor-accordion-container > dl dt > a {
background-color: #412e48;
border-color: #412e48;
}
body .ckeditor-accordion-container > dl dt > a:hover {
background-color: #634164;
border-color: #634164;
}
body .ckeditor-accordion-container > dl dt.active > a {
background-color: #634164;
border-color: #634164;
}
body .ckeditor-accordion-container > dl dt.active > a:hover {
background-color: #412e48;
border-color: #412e48;
}
/* ==========================================================================
#States - Classes added with the .is- naming convention
========================================================================== */
.is-shifted {
transform: translateX(-70%);
}
@media screen and (min-width: 1025px) {
.is-shifted {
transform: translateX(0);
}
}
.is-toggle__target.is-collapsed {
display: none;
}
.is-toggle__target.is-expanded {
display: block;
}
/* dropzone styles */
.dz-drag-hover {
background-color: rgba(226, 224, 219, 0.25);
box-shadow: inset 0 0 5px 4px rgba(226, 224, 219, 0.75);
}
.dz-progress {
border-radius: 1rem;
width: 300px;
margin: 2rem auto;
background: #e0ebf9;
height: 0.4444444444rem;
}
.dz-progress .dz-upload {
background: #2f77d1;
display: block;
height: 0.4444444444rem;
border-radius: 1rem;
}
.dz-success-mark {
display: none;
margin: 2rem auto;
}
.dz-success-mark path {
fill: #0a8754;
}
.dz-error-mark {
display: none;
}
.dz-error-mark path {
fill: #d11149;
}
.dz-success .dz-progress {
display: none;
}
.dz-success .dz-success-mark {
display: block;
}
.dz-error .dz-error-mark {
display: block;
}
.cortana-content table {
width: auto;
}
.ajax-wrapper {
overflow: hidden;
}
