/*Include iModules Specific Coding*/
/* Vendor Dependencies */
/* Authored Dependencies */
/* layout */
/* Main-Sidebar Ratio */
/* colors */
/*header*/
/* it was: $color1: #d3d8d4; */
/*red line, separator*/
/*blue link text */
/*lighter link text for dark bg */
/*if ie8, combine teen-up and adult breakpoints */
/* html5 and reset */
/* ==========================================================================
HTML5 display definitions css normalize
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1; }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
/*
audio:not([controls]) {
display: none;
height: 0;
}
*/
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
/*
[hidden] {
display: none;
}
*/
/* End of HTML5 Definitions */
/* ==========================================================================
Base - CSS Normalize
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif; }
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0; }
/*End of Base*/
/* ensure proper clears when floats are used*/
.header-main:after,
ul.nav:after {
content: "";
display: table;
clear: both; }
/*screen*/
@media only screen and (min-width: 901px) {
/*.mainnav ul.extra ul:after, not used */
.mainnav:after {
content: "";
display: table;
clear: both; } }
/* page structure and parts */
/* General Layout */
body {
padding: 0;
min-width: 310px;
background: #ccc; }
/*drupal uses #page for .wrapper*/
.wrapper {
margin: auto;
max-width: 2227px;
/*any bigger and the footer image gets away from the sidebar*/
background: white;
/*screen*/ }
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.wrapper {
border: thin solid #333; } }
/*senior layout*/
.content {
/*screen*/ }
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.content {
margin-right: 320px;
/*make space for sidebar if change this change layout-read #content as well*/ } }
/*screen*/
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.header-main .donate-wrapper, .header .mainnav ul.extra {
right: 5%;
z-index: 11;
float: none;
display: block;
position: fixed !important; } }
/*screen*/
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.header-main .donate-wrapper {
margin-right: 20px;
/*center on header extra icons */ } }
/*drupal uses #content for .content*/
.content {
margin-top: 0.9rem;
/*if change this, change .full img in images.scss*/
margin-left: 0.9rem;
/*if change this, change .full img in images.scss*/
/*on larger screen, additional margin */
/*tablet and up*/
/*screen*/
/*add right margin to full width image, .content adds a left margin*/
/*col- adds the right margin, so set image margin to 0*/ }
@media only screen and (min-width: 749px) {
.content {
margin-top: 1.8rem;
/*should be >= to margin-left*/
margin-left: 1.8rem;
/*if change this, change .full img in images.scss*/ } }
@media only screen and (min-width: 901px) {
.content {
margin-top: 1.8rem;
/*should be >= to margin-left*/
margin-left: 1.8rem;
/*if change this, change .full img in images.scss*/ } }
.content img, .content figure.small-left,
.content p, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content li, .content iframe {
padding-right: 0.9rem;
/*if change this, change .content in general-layout.scss*/
/*on larger screen, additional margin */
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.content img, .content figure.small-left,
.content p, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content li, .content iframe {
padding-right: 1.8rem;
/*if change this, change .content in general-layout.scss*/ } }
@media only screen and (min-width: 901px) {
.content img, .content figure.small-left,
.content p, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content li, .content iframe {
padding-right: 1.8rem;
/*if change this, change .content in general-layout.scss*/ } }
.content .col-article img, .content .col-article p, .content .col-article h1, .content .col-article h2, .content .col-article h3, .content .col-article h4, .content .col-article h5, .content .col-article h6, .content .col-article ol, .content .col-article li, .content .col-article iframe, .content .col-section img, .content .col-section p, .content .col-section h1, .content .col-section h2, .content .col-section h3, .content .col-section h4, .content .col-section h5, .content .col-section h6, .content .col-section ol, .content .col-section li, .content .col-section iframe, .content .priority3 img, .content .priority3 p, .content .priority3 h1, .content .priority3 h2, .content .priority3 h3, .content .priority3 h4, .content .priority3 h5, .content .priority3 h6, .content .priority3 ol, .content .priority3 li, .content .priority3 iframe, .content .single img, .content .single p, .content .single h1, .content .single h2, .content .single h3, .content .single h4, .content .single h5, .content .single h6, .content .single ol, .content .single li, .content .single iframe {
padding-right: 0; }
.content .single {
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
.content .single {
padding-right: 0.9rem; } }
.read .maincontent img, .read .maincontent p, .read .maincontent h1, .read .maincontent h2, .read .maincontent h3, .read .maincontent h4, .read .maincontent h5, .read .maincontent h6, .read .maincontent ol, .read .maincontent li, .read .maincontent iframe, .read .maincontent figcaption,
.bleed .maincontent img,
.bleed .maincontent p,
.bleed .maincontent h1,
.bleed .maincontent h2,
.bleed .maincontent h3,
.bleed .maincontent h4,
.bleed .maincontent h5,
.bleed .maincontent h6,
.bleed .maincontent ol,
.bleed .maincontent li,
.bleed .maincontent iframe,
.bleed .maincontent figcaption {
padding-right: 0; }
.read,
.layout-full-read #content,
.layout-read #content,
.bleed .content {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read,
.layout-full-read #content,
.layout-read #content,
.bleed .content {
margin-left: 0;
margin-right: 0;
/*screen*/
/*for article with sidebar, add a gutter*/ } }
@media only screen and (min-width: 749px) and (min-width: 1730px) and (min-height: 900px) {
.read,
.layout-full-read #content,
.layout-read #content,
.bleed .content {
margin-right: 320px;
/*if change this change #main as well*/ } }
@media only screen and (min-width: 749px) {
.read .priority1and2, .read .field-name-body,
.layout-full-read #content .priority1and2,
.layout-full-read #content .field-name-body,
.layout-read #content .priority1and2,
.layout-read #content .field-name-body,
.bleed .content .priority1and2,
.bleed .content .field-name-body {
padding-right: 1.8rem; } }
.read,
.layout-full-read #content,
.layout-read #content,
.bleed {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read,
.layout-full-read #content,
.layout-read #content,
.bleed {
/*turn off gutter if no sidebar*/ }
.read .layout-full,
.layout-full-read #content .layout-full,
.layout-read #content .layout-full,
.bleed .layout-full {
/*if no sidebar, set margins on semantic level becuase images are full screen*/ }
.read .layout-full .priority1and2,
.layout-full-read #content .layout-full .priority1and2,
.layout-read #content .layout-full .priority1and2,
.bleed .layout-full .priority1and2 {
padding-right: 0; }
.read .layout-full .maincontent h2, .read .layout-full .maincontent h3, .read .layout-full .maincontent h4, .read .layout-full .maincontent h5, .read .layout-full .maincontent h6, .read .layout-full .maincontent p, .read .layout-full .maincontent ul, .read .layout-full .maincontent ol, .read .layout-full .maincontent .center-content,
.layout-full-read #content .layout-full .maincontent h2,
.layout-full-read #content .layout-full .maincontent h3,
.layout-full-read #content .layout-full .maincontent h4,
.layout-full-read #content .layout-full .maincontent h5,
.layout-full-read #content .layout-full .maincontent h6,
.layout-full-read #content .layout-full .maincontent p,
.layout-full-read #content .layout-full .maincontent ul,
.layout-full-read #content .layout-full .maincontent ol,
.layout-full-read #content .layout-full .maincontent .center-content,
.layout-read #content .layout-full .maincontent h2,
.layout-read #content .layout-full .maincontent h3,
.layout-read #content .layout-full .maincontent h4,
.layout-read #content .layout-full .maincontent h5,
.layout-read #content .layout-full .maincontent h6,
.layout-read #content .layout-full .maincontent p,
.layout-read #content .layout-full .maincontent ul,
.layout-read #content .layout-full .maincontent ol,
.layout-read #content .layout-full .maincontent .center-content,
.bleed .layout-full .maincontent h2,
.bleed .layout-full .maincontent h3,
.bleed .layout-full .maincontent h4,
.bleed .layout-full .maincontent h5,
.bleed .layout-full .maincontent h6,
.bleed .layout-full .maincontent p,
.bleed .layout-full .maincontent ul,
.bleed .layout-full .maincontent ol,
.bleed .layout-full .maincontent .center-content {
margin-left: 34%;
margin-right: 1.8rem;
/*prevent margin on nested lists*/ }
.read .layout-full .maincontent h2 ul, .read .layout-full .maincontent h2 ol, .read .layout-full .maincontent h3 ul, .read .layout-full .maincontent h3 ol, .read .layout-full .maincontent h4 ul, .read .layout-full .maincontent h4 ol, .read .layout-full .maincontent h5 ul, .read .layout-full .maincontent h5 ol, .read .layout-full .maincontent h6 ul, .read .layout-full .maincontent h6 ol, .read .layout-full .maincontent p ul, .read .layout-full .maincontent p ol, .read .layout-full .maincontent ul ul, .read .layout-full .maincontent ul ol, .read .layout-full .maincontent ol ul, .read .layout-full .maincontent ol ol, .read .layout-full .maincontent .center-content ul, .read .layout-full .maincontent .center-content ol,
.layout-full-read #content .layout-full .maincontent h2 ul,
.layout-full-read #content .layout-full .maincontent h2 ol,
.layout-full-read #content .layout-full .maincontent h3 ul,
.layout-full-read #content .layout-full .maincontent h3 ol,
.layout-full-read #content .layout-full .maincontent h4 ul,
.layout-full-read #content .layout-full .maincontent h4 ol,
.layout-full-read #content .layout-full .maincontent h5 ul,
.layout-full-read #content .layout-full .maincontent h5 ol,
.layout-full-read #content .layout-full .maincontent h6 ul,
.layout-full-read #content .layout-full .maincontent h6 ol,
.layout-full-read #content .layout-full .maincontent p ul,
.layout-full-read #content .layout-full .maincontent p ol,
.layout-full-read #content .layout-full .maincontent ul ul,
.layout-full-read #content .layout-full .maincontent ul ol,
.layout-full-read #content .layout-full .maincontent ol ul,
.layout-full-read #content .layout-full .maincontent ol ol,
.layout-full-read #content .layout-full .maincontent .center-content ul,
.layout-full-read #content .layout-full .maincontent .center-content ol,
.layout-read #content .layout-full .maincontent h2 ul,
.layout-read #content .layout-full .maincontent h2 ol,
.layout-read #content .layout-full .maincontent h3 ul,
.layout-read #content .layout-full .maincontent h3 ol,
.layout-read #content .layout-full .maincontent h4 ul,
.layout-read #content .layout-full .maincontent h4 ol,
.layout-read #content .layout-full .maincontent h5 ul,
.layout-read #content .layout-full .maincontent h5 ol,
.layout-read #content .layout-full .maincontent h6 ul,
.layout-read #content .layout-full .maincontent h6 ol,
.layout-read #content .layout-full .maincontent p ul,
.layout-read #content .layout-full .maincontent p ol,
.layout-read #content .layout-full .maincontent ul ul,
.layout-read #content .layout-full .maincontent ul ol,
.layout-read #content .layout-full .maincontent ol ul,
.layout-read #content .layout-full .maincontent ol ol,
.layout-read #content .layout-full .maincontent .center-content ul,
.layout-read #content .layout-full .maincontent .center-content ol,
.bleed .layout-full .maincontent h2 ul,
.bleed .layout-full .maincontent h2 ol,
.bleed .layout-full .maincontent h3 ul,
.bleed .layout-full .maincontent h3 ol,
.bleed .layout-full .maincontent h4 ul,
.bleed .layout-full .maincontent h4 ol,
.bleed .layout-full .maincontent h5 ul,
.bleed .layout-full .maincontent h5 ol,
.bleed .layout-full .maincontent h6 ul,
.bleed .layout-full .maincontent h6 ol,
.bleed .layout-full .maincontent p ul,
.bleed .layout-full .maincontent p ol,
.bleed .layout-full .maincontent ul ul,
.bleed .layout-full .maincontent ul ol,
.bleed .layout-full .maincontent ol ul,
.bleed .layout-full .maincontent ol ol,
.bleed .layout-full .maincontent .center-content ul,
.bleed .layout-full .maincontent .center-content ol {
margin-left: 0.9em; } }
.read .maincontent .grid-wrap,
.layout-full-read #content .maincontent .grid-wrap,
.layout-read #content .maincontent .grid-wrap,
.bleed .maincontent .grid-wrap {
/* Smartphones, except large phone landscape ----------- */
/*tablet and up*/ }
@media only screen and (max-width: 748px) {
.read .maincontent .grid-wrap,
.layout-full-read #content .maincontent .grid-wrap,
.layout-read #content .maincontent .grid-wrap,
.bleed .maincontent .grid-wrap {
margin-left: 0.9em;
/*2nd column has a margin, so make it symmetrical with that*/ } }
@media only screen and (min-width: 749px) {
.read .maincontent .grid-wrap,
.layout-full-read #content .maincontent .grid-wrap,
.layout-read #content .maincontent .grid-wrap,
.bleed .maincontent .grid-wrap {
margin-left: 1.8rem;
/*add margin for grid on bleed page*/ }
.read .maincontent .grid-wrap h2, .read .maincontent .grid-wrap h3, .read .maincontent .grid-wrap h4, .read .maincontent .grid-wrap h5, .read .maincontent .grid-wrap h6, .read .maincontent .grid-wrap p, .read .maincontent .grid-wrap ul, .read .maincontent .grid-wrap ol, .read .maincontent .grid-wrap .center-content,
.layout-full-read #content .maincontent .grid-wrap h2,
.layout-full-read #content .maincontent .grid-wrap h3,
.layout-full-read #content .maincontent .grid-wrap h4,
.layout-full-read #content .maincontent .grid-wrap h5,
.layout-full-read #content .maincontent .grid-wrap h6,
.layout-full-read #content .maincontent .grid-wrap p,
.layout-full-read #content .maincontent .grid-wrap ul,
.layout-full-read #content .maincontent .grid-wrap ol,
.layout-full-read #content .maincontent .grid-wrap .center-content,
.layout-read #content .maincontent .grid-wrap h2,
.layout-read #content .maincontent .grid-wrap h3,
.layout-read #content .maincontent .grid-wrap h4,
.layout-read #content .maincontent .grid-wrap h5,
.layout-read #content .maincontent .grid-wrap h6,
.layout-read #content .maincontent .grid-wrap p,
.layout-read #content .maincontent .grid-wrap ul,
.layout-read #content .maincontent .grid-wrap ol,
.layout-read #content .maincontent .grid-wrap .center-content,
.bleed .maincontent .grid-wrap h2,
.bleed .maincontent .grid-wrap h3,
.bleed .maincontent .grid-wrap h4,
.bleed .maincontent .grid-wrap h5,
.bleed .maincontent .grid-wrap h6,
.bleed .maincontent .grid-wrap p,
.bleed .maincontent .grid-wrap ul,
.bleed .maincontent .grid-wrap ol,
.bleed .maincontent .grid-wrap .center-content {
margin-left: 0;
margin-right: 0; } }
/*sitemap comp is for giving channel, .sitemap-simple is alumni, and .block-menu is drupal*/
[class*='col-'],
.read .maincontent,
.bleed .maincontent,
.sitemap-comp ul li, .sitemap-simple ul li, .block-menu ul li,
.grid-separator {
float: left;
padding-right: 0.9rem;
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
[class*='col-'],
.read .maincontent,
.bleed .maincontent,
.sitemap-comp ul li, .sitemap-simple ul li, .block-menu ul li,
.grid-separator {
padding-right: 1.8rem;
/*should equal .content margin-left, check alumni homepage*/ } }
@media only screen and (min-width: 901px) {
[class*='col-'],
.read .maincontent,
.bleed .maincontent,
.sitemap-comp ul li, .sitemap-simple ul li, .block-menu ul li,
.grid-separator {
padding-right: 1.8rem; } }
/* Smartphones, except large phone landscape ----------- */
@media only screen and (max-width: 748px) {
article {
padding-right: 0;
margin-right: 0.9rem; } }
/*prevent the events list on the homepage from being offcentered on baby view*/
/* Smartphones, except large phone landscape ----------- */
@media only screen and (max-width: 748px) {
.priority3 article {
margin-right: 0; } }
/*rewrite above rule for asides*/
.read .priority1and2 .maincontent aside h2, .read .priority1and2 .maincontent aside h3, .read .priority1and2 .maincontent aside h4, .read .priority1and2 .maincontent aside h5, .read .priority1and2 .maincontent aside h6, .read .priority1and2 .maincontent aside p, .read .priority1and2 .maincontent aside ul, .read .priority1and2 .maincontent aside ol, .read .priority1and2 .maincontent aside .center-content, .read .priority1and2 .maincontent .aside h2, .read .priority1and2 .maincontent .aside h3, .read .priority1and2 .maincontent .aside h4, .read .priority1and2 .maincontent .aside h5, .read .priority1and2 .maincontent .aside h6, .read .priority1and2 .maincontent .aside p, .read .priority1and2 .maincontent .aside ul, .read .priority1and2 .maincontent .aside ol, .read .priority1and2 .maincontent .aside .center-content,
.bleed .priority1and2 .maincontent aside h2,
.bleed .priority1and2 .maincontent aside h3,
.bleed .priority1and2 .maincontent aside h4,
.bleed .priority1and2 .maincontent aside h5,
.bleed .priority1and2 .maincontent aside h6,
.bleed .priority1and2 .maincontent aside p,
.bleed .priority1and2 .maincontent aside ul,
.bleed .priority1and2 .maincontent aside ol,
.bleed .priority1and2 .maincontent aside .center-content,
.bleed .priority1and2 .maincontent .aside h2,
.bleed .priority1and2 .maincontent .aside h3,
.bleed .priority1and2 .maincontent .aside h4,
.bleed .priority1and2 .maincontent .aside h5,
.bleed .priority1and2 .maincontent .aside h6,
.bleed .priority1and2 .maincontent .aside p,
.bleed .priority1and2 .maincontent .aside ul,
.bleed .priority1and2 .maincontent .aside ol,
.bleed .priority1and2 .maincontent .aside .center-content,
.layout-read .field-name-body aside h2,
.layout-read .field-name-body aside h3,
.layout-read .field-name-body aside h4,
.layout-read .field-name-body aside h5,
.layout-read .field-name-body aside h6,
.layout-read .field-name-body aside p,
.layout-read .field-name-body aside ul,
.layout-read .field-name-body aside ol,
.layout-read .field-name-body aside .center-content,
.layout-read .field-name-body .aside h2,
.layout-read .field-name-body .aside h3,
.layout-read .field-name-body .aside h4,
.layout-read .field-name-body .aside h5,
.layout-read .field-name-body .aside h6,
.layout-read .field-name-body .aside p,
.layout-read .field-name-body .aside ul,
.layout-read .field-name-body .aside ol,
.layout-read .field-name-body .aside .center-content {
margin-left: 0;
margin-right: 0; }
.read .priority1and2 .maincontent aside h2, .read .priority1and2 .maincontent aside h3, .read .priority1and2 .maincontent aside h4, .read .priority1and2 .maincontent aside h5, .read .priority1and2 .maincontent aside h6, .read .priority1and2 .maincontent aside p, .read .priority1and2 .maincontent .aside h2, .read .priority1and2 .maincontent .aside h3, .read .priority1and2 .maincontent .aside h4, .read .priority1and2 .maincontent .aside h5, .read .priority1and2 .maincontent .aside h6, .read .priority1and2 .maincontent .aside p,
.bleed .priority1and2 .maincontent aside h2,
.bleed .priority1and2 .maincontent aside h3,
.bleed .priority1and2 .maincontent aside h4,
.bleed .priority1and2 .maincontent aside h5,
.bleed .priority1and2 .maincontent aside h6,
.bleed .priority1and2 .maincontent aside p,
.bleed .priority1and2 .maincontent .aside h2,
.bleed .priority1and2 .maincontent .aside h3,
.bleed .priority1and2 .maincontent .aside h4,
.bleed .priority1and2 .maincontent .aside h5,
.bleed .priority1and2 .maincontent .aside h6,
.bleed .priority1and2 .maincontent .aside p,
.layout-read .field-name-body aside h2,
.layout-read .field-name-body aside h3,
.layout-read .field-name-body aside h4,
.layout-read .field-name-body aside h5,
.layout-read .field-name-body aside h6,
.layout-read .field-name-body aside p,
.layout-read .field-name-body .aside h2,
.layout-read .field-name-body .aside h3,
.layout-read .field-name-body .aside h4,
.layout-read .field-name-body .aside h5,
.layout-read .field-name-body .aside h6,
.layout-read .field-name-body .aside p {
padding: 0; }
/*
.gridpad {
@include breakpoint(teen-up) {
margin-left: 0;
margin-right: 0;
}
}
*/
/*if change this, change aside */
/*in drupal .field-name-body is the body, #block-views-subpage-menu-block is the gridlink*/
.maincontent, .field-name-body, #block-views-subpage-menu-block, .page__title {
/*on tablets and up, the aside moves to the sidebar*/
width: 100%;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.maincontent, .field-name-body, #block-views-subpage-menu-block, .page__title {
float: left;
/*display:inline; turning this off, becuase it interferes with the top-margin*/
width: 72%; } }
/*fix error in drupal layout-read where margins get applied multiple times*/
/*tablet and up*/
@media only screen and (min-width: 749px) {
.layout-read .maincontent, .layout-full-read .field-name-body {
float: none; } }
.layout-full .maincontent, .layout-full .field-name-body, .layout-full #block-views-subpage-menu-block, .layout-full-read .maincontent, .layout-full-read .field-name-body, .layout-full-read #block-views-subpage-menu-block {
width: 100%; }
/*this messes up the margin on boxes-noside tablet
.layout-full {
.maincontent, .field-name-body, #block-views-subpage-menu-block{
@include breakpoint (teen-all) {
padding-right: $margin4 - $margin5;
}
}
}
*/
.center-content, .center-content-no-margin {
text-align: center; }
/*no longer used
.gridguide {
margin-left: 0;
margin-right: 0;
}
*/
/*provide padding for iframe on layoutfull in iModules and static*/
.layout-full .maincontent .full-section {
padding-right: 0.9em; }
.bleed .maincontent .full-section, .bleed .maincontent .col-article, .read .maincontent .full-section, .read .maincontent .col-article {
padding-right: 0; }
/* Grid */
* {
box-sizing: border-box; }
/*col-section is for block grids
sitemap-comp is the giving menu
block-menu is the giving menu in drupal*/
.col-section, .sitemap-comp ul li, .block-menu ul li {
/* Smartphones, except large phone landscape ----------- */
/* large phone (landscape) ----------- */
/*tablet-vertical*/
/*tablet-horizontal*/
/*screen*/ }
@media only screen and (max-width: 748px) {
.col-section, .sitemap-comp ul li, .block-menu ul li {
width: 50%;
/*if you change this, must change .col-section:nth-of-type */ } }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
.col-section, .sitemap-comp ul li, .block-menu ul li {
width: 33.33%;
/*if you change this, must change .col-section:nth-of-type */ } }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.col-section, .sitemap-comp ul li, .block-menu ul li {
width: 50%;
/*if you change this, must change .col-section:nth-of-type */ } }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: landscape) {
.col-section, .sitemap-comp ul li, .block-menu ul li {
width: 33.33%;
/*if you change this, must change .col-section:nth-of-type */ } }
@media only screen and (min-width: 901px) {
.col-section, .sitemap-comp ul li, .block-menu ul li {
width: 33.33%;
/*if you change this, must change .col-section:nth-of-type */ } }
.layout-full .col-section, .ExtraColumn .col-section, .layout-full-read .col-section {
/*no sidebar so:
blocks are three across on tablet
blocks are four across on tablet as well as desktop
*/
/*tablet-vertical*/
/*tablet-horizontal*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.layout-full .col-section, .ExtraColumn .col-section, .layout-full-read .col-section {
width: 33.33%;
/*if you change this, must change .col-section:nth-of-type */ } }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: landscape) {
.layout-full .col-section, .ExtraColumn .col-section, .layout-full-read .col-section {
width: 25%;
/*if you change this, must change .col-section:nth-of-type */ } }
@media only screen and (min-width: 901px) {
.layout-full .col-section, .ExtraColumn .col-section, .layout-full-read .col-section {
width: 25%;
/*if you change this, must change .col-section:nth-of-type */ } }
/*designed for grids of 4 elements, either 2 or 4 columns, no 3 columns.*/
.column2-4 .col-section, .column1-3 .col-section {
/* large phone (landscape) ----------- */
/*tablet and up*/ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
.column2-4 .col-section, .column1-3 .col-section {
width: 50%; } }
@media only screen and (min-width: 749px) {
.column2-4 .col-section, .column1-3 .col-section {
width: 25%;
/*if you change this, must change .col-section:nth-of-type */ } }
/*synchronize margins*/
.column1-3 {
/*tablet-all*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.column1-3 {
padding-right: -0.45rem; } }
/*designed for grids 2 elements*/
.column2 {
max-width: 1300px; }
.column2 .col-section {
width: 50%;
/*if you change this, must change .col-section:nth-of-type */ }
/*designed for grids of 3 elements, either 1 or 3 columns, no 2 columns.*/
.column1-3 .col-section {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.column1-3 .col-section {
width: 33.3%;
/*if you change this, must change .col-section:nth-of-type */ } }
.column1-3 .col-section:nth-of-type(3) {
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
.column1-3 .col-section:nth-of-type(3) {
width: 100%;
/*if you change this, must change .col-section:nth-of-type */ } }
/*.col-sections have various heights and this set of rules ensure that the tops of second rows line up */
/*col-sections are two across*/
/* Smartphones, except large phone landscape ----------- */
@media only screen and (max-width: 748px) {
.col-section:nth-of-type(2n + 1),
.sitemap-comp ul li:nth-of-type(2n + 1),
.is-expanded:nth-child(3) {
clear: left; }
.column1-3 .col-section:nth-of-type(4n + 1) {
clear: none; } }
/*tablet-vertical*/
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.col-section:nth-of-type(2n + 1) {
clear: left; }
.layout-full .col-section:nth-of-type(2n + 1), .ExtraColumn .col-section:nth-of-type(2n + 1), .layout-full-read .col-section:nth-of-type(2n + 1), .column2-4 .col-section:nth-of-type(2n + 1), .column1-3 .col-section:nth-of-type(2n + 1) {
clear: none;
/*reverse above */ }
.layout-full .col-section:nth-of-type(3n + 1), .ExtraColumn .col-section:nth-of-type(3n + 1), .layout-full-read .col-section:nth-of-type(3n + 1), .column2-4 .col-section:nth-of-type(3n + 1), .column1-3 .col-section:nth-of-type(3n + 1) {
clear: left; }
.column2-4 .col-section:nth-of-type(3n + 1), .column2 .col-section:nth-of-type(3n + 1) {
clear: none; }
.column2-4 .col-section:nth-of-type(4n + 1), .column2 .col-section:nth-of-type(4n + 1) {
clear: left; } }
/*col-sections are three across*/
/* large phone (landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
/*clear baby grid*/
.col-section:nth-of-type(2n + 1) {
clear: none; }
.col-section:nth-of-type(3n + 1) {
clear: left; }
.column2-4 .col-section:nth-of-type(3n + 1), .column2 .col-section:nth-of-type(3n + 1) {
clear: none;
/*reverse above */ } }
.column2 .col-section:nth-of-type(2n + 1) {
clear: left;
/*reverse above */ }
/*tablet-horizontal*/
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: landscape) {
.col-section:nth-of-type(3n + 1) {
clear: left; }
.layout-full .col-section:nth-of-type(3n + 1), .ExtraColumn .col-section:nth-of-type(3n + 1), .layout-full-read .col-section:nth-of-type(3n + 1), .column2-4 .col-section:nth-of-type(3n + 1), .column2 .col-section:nth-of-type(3n + 1) {
clear: none;
/*reverse above */ }
.layout-full .col-section:nth-of-type(4n + 1), .ExtraColumn .col-section:nth-of-type(4n + 1), .layout-full-read .col-section:nth-of-type(4n + 1), .column2-4 .col-section:nth-of-type(4n + 1), .column2 .col-section:nth-of-type(4n + 1) {
clear: left; }
.layout-full .column1-3 .col-section:nth-of-type(3n + 1), .ExtraColumn .column1-3 .col-section:nth-of-type(3n + 1), .layout-full-read .column1-3 .col-section:nth-of-type(3n + 1), .column2-4 .column1-3 .col-section:nth-of-type(3n + 1), .column2 .column1-3 .col-section:nth-of-type(3n + 1) {
clear: left; }
.layout-full .column1-3 .col-section:nth-of-type(4n + 1), .ExtraColumn .column1-3 .col-section:nth-of-type(4n + 1), .layout-full-read .column1-3 .col-section:nth-of-type(4n + 1), .column2-4 .column1-3 .col-section:nth-of-type(4n + 1), .column2 .column1-3 .col-section:nth-of-type(4n + 1) {
clear: none; } }
/*screen*/
@media only screen and (min-width: 901px) {
.col-section:nth-of-type(3n + 1) {
clear: left; }
.layout-full .col-section:nth-of-type(3n + 1), .ExtraColumn .col-section:nth-of-type(3n + 1), .layout-full-read .col-section:nth-of-type(3n + 1), .column2-4 .col-section:nth-of-type(3n + 1), .column2 .col-section:nth-of-type(3n + 1) {
clear: none;
/*reverse above */ }
.layout-full .col-section:nth-of-type(4n + 1), .ExtraColumn .col-section:nth-of-type(4n + 1), .layout-full-read .col-section:nth-of-type(4n + 1), .column2-4 .col-section:nth-of-type(4n + 1), .column2 .col-section:nth-of-type(4n + 1) {
clear: left; }
.layout-full .column1-3 .col-section:nth-of-type(3n + 1), .ExtraColumn .column1-3 .col-section:nth-of-type(3n + 1), .layout-full-read .column1-3 .col-section:nth-of-type(3n + 1), .column2-4 .column1-3 .col-section:nth-of-type(3n + 1), .column2 .column1-3 .col-section:nth-of-type(3n + 1) {
clear: left; }
.layout-full .column1-3 .col-section:nth-of-type(4n + 1), .ExtraColumn .column1-3 .col-section:nth-of-type(4n + 1), .layout-full-read .column1-3 .col-section:nth-of-type(4n + 1), .column2-4 .column1-3 .col-section:nth-of-type(4n + 1), .column2 .column1-3 .col-section:nth-of-type(4n + 1) {
clear: none; } }
.sitemap ul li, .block-menu ul li {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.sitemap ul li, .block-menu ul li {
width: 25%; } }
.read .col-article, .layout-full-read article,
.bleed .maincontent {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .col-article, .layout-full-read article,
.bleed .maincontent {
margin: 0;
padding: 0; } }
/* not using
.col-2-3 {
width: 66.66%;
display: block;
}
.col-1-3 {
width: 33.33%;
display: block;
}
.col-1-2 {
width: 50%;
}
.col-3-4 {
width: 75%;
}
.col-5-8 {
width: 62.5%;
}
.col-2-8 {
width: 25%;}
.col-1-8 {
width: 12.5%;
}
.module {
min-width: 25px;
min-height: 25px;
}
*/
section {
margin-bottom: 0.9rem;
/*tablet-vertical*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
section {
margin-bottom: 1.35rem; } }
@media only screen and (min-width: 901px) {
section {
margin-bottom: 0.9rem; } }
/*
.grid-wrap .col-section {
margin-bottom: $margin2;
}
*/
/* used to set up a grid that has a blue block in the middle that pops from the rest. requested by ellen, but decided to not use
.subgrid {
h3 {font-size: .8em;}
font-size: .9em;
}
section.breakout {
padding-top: $margin2;
background: $color4;
@include breakpoint (baby) {
background: none;
}
}
*/
.grid-wrap h2, .grid-wrap p {
color: black;
/*links in grid are black*/ }
.grid-wrap .col-section p {
padding-left: .4em;
padding-right: .4em; }
.gridtext .col-section p {
padding-left: 0;
padding-right: 0; }
.grid-separator {
width: 100%;
clear: left;
margin-bottom: 1.8em;
/*screen*/ }
@media only screen and (min-width: 901px) {
.grid-separator {
margin-top: 0.9em; } }
.header-main {
width: 100%;
padding: 0.9rem 0 0.45rem 0.9rem;
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.header-main {
padding-top: 0.9rem;
padding-bottom: 0.9rem; } }
@media only screen and (min-width: 901px) {
.header-main {
padding-bottom: 0;
padding-right: 0.9rem;
padding-top: .5rem; } }
.header-main .donate-wrapper {
float: right; }
.header-item {
float: left;
padding-right: 0.9rem;
/*display: inline-block;*/
/*tablet-vertical*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.header-item {
padding-right: 0.9rem; } }
@media only screen and (min-width: 901px) {
.header-item {
padding-right: 0; } }
/*added .header to front end because drupal assigns .title to main h1, not title of channel*/
.header .title {
padding-top: 0;
margin-top: 0; }
/* Header */
.header, .header-wrapper {
background: #333;
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.header, .header-wrapper {
padding: 0 0.9rem; } }
@media only screen and (min-width: 901px) {
.header, .header-wrapper {
padding: 0.9rem; } }
/* not used anymore
.col-bannerfill {
display: none;
@include breakpoint(adult) {
display: inline;
color: darken($color1, 15);
font-size: 2em;
margin-left: $margin2/2;
margin-top: .4em;
}
}
*/
.menu-open {
position: relative;
padding-left: 1.25em; }
/*menu hamburger*/
.menu-open:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 0.19em;
border-top: 0.5em double #FFF;
border-bottom: 0.167em solid #FFF;
font-size: 1.5em; }
/*
.menu-open:hover:before {
background: $color4;
box-shadow:
0 0.5em 0 0 $color4,
0 1em 0 0 $color4;
}
*/
/* End of Header */
/*Asides blocks of non primary content can be floated, dropped to the bottom, or display as a sidebar */
/*if change this, change general-layout */
aside, #block-views-aside-block, div.aside {
overflow: hidden;
padding-right: .9em;
/* large phone (landscape) ----------- */
/*on tablet and up, aside floats right*/
/*tablet and up*/ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
aside, #block-views-aside-block, div.aside {
float: none; } }
@media only screen and (min-width: 749px) {
aside, #block-views-aside-block, div.aside {
float: right;
width: 28%;
margin-bottom: 0.9rem;
padding-right: 1.8rem;
/*make sure aside lines up with alumni homepage banner and other full width elemnents*/ }
aside p, #block-views-aside-block p, div.aside p {
margin-top: 0; } }
/*aside is at bottom, not sidebar*/
.layout-full #block-views-aside-block, .layout-full aside.priority3, .layout-full-read #block-views-aside-block, .layout-full-read aside.priority3 {
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.layout-full #block-views-aside-block, .layout-full aside.priority3, .layout-full-read #block-views-aside-block, .layout-full-read aside.priority3 {
width: auto;
float: none;
clear: both;
display: block; } }
@media only screen and (min-width: 901px) {
.layout-full #block-views-aside-block, .layout-full aside.priority3, .layout-full-read #block-views-aside-block, .layout-full-read aside.priority3 {
padding-right: 1.8rem; } }
/*no padding on priority1and2 aside if not read*/
.layout-full .priority1and2 aside, .layout-full .priority1and2 div.aside, .layout-sidebar .priority1and2 aside, .layout-sidebar .priority1and2 div.aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.layout-full .priority1and2 aside, .layout-full .priority1and2 div.aside, .layout-sidebar .priority1and2 aside, .layout-sidebar .priority1and2 div.aside {
padding-right: 0; } }
.read .priority1and2 aside,
.bleed .priority1and2 aside,
.layout-full-read .field-name-body aside,
.layout-read .field-name-body aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .priority1and2 aside,
.bleed .priority1and2 aside,
.layout-full-read .field-name-body aside,
.layout-read .field-name-body aside {
margin-bottom: 0.9rem;
padding-top: 0.9rem;
padding-left: 1.8rem; } }
.priority3, #block-views-aside-block {
/* Smartphones, except large phone landscape ----------- */
/*set image to width of priority3*/ }
@media only screen and (max-width: 748px) {
.priority3, #block-views-aside-block {
clear: left; } }
.priority3 img, #block-views-aside-block img {
width: 100%; }
.layout-full .priority3,
.layout-full-read #block-views-aside-block,
.layout-full #block-views-aside-block
{
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.layout-full .priority3,
.layout-full-read #block-views-aside-block,
.layout-full #block-views-aside-block
{
margin-top: 0.9rem; } }
/*aside inside main content block needs that special formatting on phones to differentiate*/
/* Smartphones, except large phone landscape ----------- */
@media only screen and (max-width: 748px) {
.aside-callout {
background: #ccc;
margin-left: -0.9rem;
/*move box to left of screen*/
padding: 0.9rem;
/*pad text to line up with other text*/
margin-bottom: 0.9rem;
/*add space beneath gray box*/
width: 110%;
/*extend box to right edge, magic number tested on iphone 5s and Samsung Galaxy*/ } }
.mainnav, footer {
/*menu is set up as a ul, but renders as inline*/
/*this is for a secondary menu, renders as a list of icons with labels
both mainnav and footer*/ }
.mainnav ul, footer ul {
list-style-type: none;
padding-left: 0; }
.mainnav ul.extra, footer ul.extra {
width: 100%;
padding: 0 0.9rem;
/*on desktop, a string of small icons on right*/
/*screen*/
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav ul.extra, footer ul.extra {
float: right;
width: auto;
/*display: inline;*/
padding: .8em 0 0;
vertical-align: top; }
.mainnav ul.extra .mobileonly, footer ul.extra .mobileonly {
display: none; } }
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.mainnav ul.extra, footer ul.extra {
padding: 0 0.9rem;
/*line up under give now button*/ } }
.mainnav ul.extra li, footer ul.extra li {
text-align: center;
width: 25%;
float: left;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav ul.extra li, footer ul.extra li {
padding-left: .9em;
width: auto;
/*display: inline;*/
float: left; }
.mainnav ul.extra li img, footer ul.extra li img {
display: block; } }
.mainnav ul.log, footer ul.log {
padding: 0;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav ul.log, footer ul.log {
padding: .8em 0 0; } }
.mainnav ul.log li, footer ul.log li {
width: 20%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav ul.log li, footer ul.log li {
width: auto; } }
.mainnav {
width: 100%;
/* is this the right choice? */
height: 100%;
position: fixed;
overflow: auto;
/*showing up in android menu, when it is not needed*/
display: block;
top: 0;
left: 0;
background: #333;
color: #fff;
padding: 3%;
text-transform: uppercase;
box-shadow: inset 0 0 1em .2em #222;
/*menu tranform breaks Chrome Fixed Positioning (used in Senior), so only use when neccessary*/
/* Smartphones, except large phone landscape ----------- */
/*tablet-all*/
/*screen*/
z-index: 10;
/*extra menu, just the header*/ }
@media only screen and (max-width: 748px) {
.mainnav {
transform: translate(-105%); } }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.mainnav {
transform: translate(-105%); } }
@media only screen and (min-width: 901px) {
.mainnav {
position: relative;
overflow: visible;
padding: 0 1rem;
box-shadow: none;
font-size: .9em;
margin-bottom: 0; } }
.mainnav .menu-close {
font-size: .8em;
padding-top: 5px;
padding-bottom: 5px;
min-width: 25px;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .menu-close {
display: none; } }
.mainnav .menu-close:hover, .mainnav .menu-close:active {
cursor: pointer; }
.mainnav ul.nav {
margin-top: 1em;
border-bottom: solid thin #ec2027;
/* red line divider */
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav ul.nav {
border: none;
/*display: inline-block;*/
float: left;
width: auto;
margin-top: .5rem; } }
.mainnav ul.nav li {
display: block;
text-align: center;
width: 50%;
/*if you change this, must change .col-section:nth-of-type in grid.scss*/
float: left;
padding: 0.9em 0 1.8em;
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.mainnav ul.nav li {
margin-bottom: 2em; } }
@media only screen and (min-width: 901px) {
.mainnav ul.nav li {
display: inline;
border: none;
padding: 0;
padding-right: 0.9rem;
width: auto; } }
.mainnav ul.extra {
margin-top: 1.8rem;
font-size: .7em;
/*symmetrical space above and below red line */
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.mainnav ul.extra {
padding-top: 2em; } }
@media only screen and (min-width: 901px) {
.mainnav ul.extra {
margin-top: .7em;
padding-top: 0; } }
footer ul.extra {
text-transform: uppercase;
font-size: .7em;
margin-top: 1.8rem;
/*screen*/ }
@media only screen and (min-width: 901px) {
footer ul.extra {
display: none; } }
/*use is-expanded for drupal sitemap*/
.menu-icon, .is-expanded:nth-child(1) .menu__link, .is-expanded:nth-child(2) .menu__link, .is-expanded:nth-child(3) .menu__link, .is-expanded:nth-child(4) .menu__link {
background-repeat: no-repeat; }
.mainnav .menu-icon, footer ul.extra .menu-icon {
/*on fly out menu, image is large, top, center*/
background-size: auto 3em;
background-position: center top;
padding-top: 3.2em;
background-repeat: no-repeat;
/*on desktop, menu icons are small and left*/
/*screen*/
/*hack for lack of background elements in ie8*/ }
@media only screen and (min-width: 901px) {
.mainnav .menu-icon, footer ul.extra .menu-icon {
padding-top: 3px;
background-size: auto 14.5px;
background-position: left center;
padding-left: 1em; } }
.sitemap-comp .menu-icon, .is-expanded .menu__link {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.sitemap-comp .menu-icon, .is-expanded .menu__link {
padding-top: 0;
background-size: auto 14.5px;
background-position: left center;
padding-left: 1em;
background-repeat: no-repeat; } }
/*icons on footer .extra are top centered */
footer ul.extra .menu-icon {
/*screen*/ }
@media only screen and (min-width: 901px) {
footer ul.extra .menu-icon {
background-position: top center;
padding: 1.6em 0 0 0; } }
ul.extra .menu-icon {
/*screen*/ }
@media only screen and (min-width: 901px) {
ul.extra .menu-icon {
padding: 0 0 .4em 2.2em; } }
/*individual icon images*/
/*ie8: channel wide*/
/*ie8 alumni*/
/*giving:
large icons on mainnav mobile and tablet
small icons on desktop
tablet sitemap, small icons
*/
.mainnav, ul.extra {
/*set image background for all icons*/ }
.mainnav .icon-impact, .mainnav .icon-impact:hover, .mainnav .icon-ways, .mainnav .icon-ways:hover, .mainnav .icon-supporters, .mainnav .icon-supporters:hover, .mainnav .icon-news, .mainnav .icon-news:hover, .mainnav .icon-profile, .mainnav .icon-profile:hover, .mainnav .icon-search, .mainnav .icon-search:hover, .mainnav .icon-contact, .mainnav .icon-contact:hover, .mainnav .icon-logout, .mainnav .icon-logout:hover, .mainnav .icon-give, .mainnav .icon-give:hover, ul.extra .icon-impact, ul.extra .icon-impact:hover, ul.extra .icon-ways, ul.extra .icon-ways:hover, ul.extra .icon-supporters, ul.extra .icon-supporters:hover, ul.extra .icon-news, ul.extra .icon-news:hover, ul.extra .icon-profile, ul.extra .icon-profile:hover, ul.extra .icon-search, ul.extra .icon-search:hover, ul.extra .icon-contact, ul.extra .icon-contact:hover, ul.extra .icon-logout, ul.extra .icon-logout:hover, ul.extra .icon-give, ul.extra .icon-give:hover {
background-image: url("../img/menu-icon/givingtablet-sc1d7db3c43.png");
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-impact, .mainnav .icon-impact:hover, .mainnav .icon-ways, .mainnav .icon-ways:hover, .mainnav .icon-supporters, .mainnav .icon-supporters:hover, .mainnav .icon-news, .mainnav .icon-news:hover, .mainnav .icon-profile, .mainnav .icon-profile:hover, .mainnav .icon-search, .mainnav .icon-search:hover, .mainnav .icon-contact, .mainnav .icon-contact:hover, .mainnav .icon-logout, .mainnav .icon-logout:hover, .mainnav .icon-give, .mainnav .icon-give:hover, ul.extra .icon-impact, ul.extra .icon-impact:hover, ul.extra .icon-ways, ul.extra .icon-ways:hover, ul.extra .icon-supporters, ul.extra .icon-supporters:hover, ul.extra .icon-news, ul.extra .icon-news:hover, ul.extra .icon-profile, ul.extra .icon-profile:hover, ul.extra .icon-search, ul.extra .icon-search:hover, ul.extra .icon-contact, ul.extra .icon-contact:hover, ul.extra .icon-logout, ul.extra .icon-logout:hover, ul.extra .icon-give, ul.extra .icon-give:hover {
background: url("../img/menu-icon/giving16-s7f2632750d.png") no-repeat; } }
.sitemap-comp {
/*reset image background for all icons*/ }
.sitemap-comp .icon-impact, .sitemap-comp .icon-impact:hover, .sitemap-comp .icon-ways, .sitemap-comp .icon-ways:hover, .sitemap-comp .icon-supporters, .sitemap-comp .icon-supporters:hover, .sitemap-comp .icon-news, .sitemap-comp .icon-news:hover, .sitemap-comp .icon-profile, .sitemap-comp .icon-profile:hover, .sitemap-comp .icon-search, .sitemap-comp .icon-search:hover, .sitemap-comp .icon-contact, .sitemap-comp .icon-contact:hover, .sitemap-comp .icon-logout, .sitemap-comp .icon-logout:hover, .sitemap-comp .icon-give, .sitemap-comp .icon-give:hover {
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-impact, .sitemap-comp .icon-impact:hover, .sitemap-comp .icon-ways, .sitemap-comp .icon-ways:hover, .sitemap-comp .icon-supporters, .sitemap-comp .icon-supporters:hover, .sitemap-comp .icon-news, .sitemap-comp .icon-news:hover, .sitemap-comp .icon-profile, .sitemap-comp .icon-profile:hover, .sitemap-comp .icon-search, .sitemap-comp .icon-search:hover, .sitemap-comp .icon-contact, .sitemap-comp .icon-contact:hover, .sitemap-comp .icon-logout, .sitemap-comp .icon-logout:hover, .sitemap-comp .icon-give, .sitemap-comp .icon-give:hover {
background-image: url("../img/menu-icon/givingtablet-sc1d7db3c43.png"); } }
@media only screen and (min-width: 901px) {
.sitemap-comp .icon-impact, .sitemap-comp .icon-impact:hover, .sitemap-comp .icon-ways, .sitemap-comp .icon-ways:hover, .sitemap-comp .icon-supporters, .sitemap-comp .icon-supporters:hover, .sitemap-comp .icon-news, .sitemap-comp .icon-news:hover, .sitemap-comp .icon-profile, .sitemap-comp .icon-profile:hover, .sitemap-comp .icon-search, .sitemap-comp .icon-search:hover, .sitemap-comp .icon-contact, .sitemap-comp .icon-contact:hover, .sitemap-comp .icon-logout, .sitemap-comp .icon-logout:hover, .sitemap-comp .icon-give, .sitemap-comp .icon-give:hover {
background: url("../img/menu-icon/giving16-s7f2632750d.png") no-repeat; } }
.mainnav, .sitemap-comp, ul.extra, #block-system-main-menu {
/*set individual icons
for phone and tablet: large and centered
for desktop: small and to the left*/ }
.mainnav .icon-impact, .sitemap-comp .icon-impact, ul.extra .icon-impact, #block-system-main-menu .icon-impact {
background-size: 3.2em auto;
background-position: center 8.4%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-impact, .sitemap-comp .icon-impact, ul.extra .icon-impact, #block-system-main-menu .icon-impact {
background-position: 0 -397px;
background-size: auto; } }
.mainnav .icon-impact:hover, .sitemap-comp .icon-impact:hover, ul.extra .icon-impact:hover, #block-system-main-menu .icon-impact:hover {
background-position: center 0;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-impact:hover, .sitemap-comp .icon-impact:hover, ul.extra .icon-impact:hover, #block-system-main-menu .icon-impact:hover {
/*chrome resizes 1px different */
background-position: 0 -117px; } }
.mainnav .icon-ways, .sitemap-comp .icon-ways, ul.extra .icon-ways, #block-system-main-menu .icon-ways {
background-position: center 83.0%;
background-size: 2.5em auto;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-ways, .sitemap-comp .icon-ways, ul.extra .icon-ways, #block-system-main-menu .icon-ways {
background-position: 0 -354px;
background-size: auto; } }
.mainnav .icon-ways:hover, .sitemap-comp .icon-ways:hover, ul.extra .icon-ways:hover, #block-system-main-menu .icon-ways:hover {
background-position: center 60%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-ways:hover, .sitemap-comp .icon-ways:hover, ul.extra .icon-ways:hover, #block-system-main-menu .icon-ways:hover {
background-position: 0 -312.5px; } }
.mainnav .icon-supporters, .sitemap-comp .icon-supporters, ul.extra .icon-supporters, #block-system-main-menu .icon-supporters {
background-position: center 43.5%;
background-size: 5.5em auto;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-supporters, .sitemap-comp .icon-supporters, ul.extra .icon-supporters, #block-system-main-menu .icon-supporters {
background-position: 0 -159px;
background-size: auto; } }
.mainnav .icon-supporters:hover, .sitemap-comp .icon-supporters:hover, ul.extra .icon-supporters:hover, #block-system-main-menu .icon-supporters:hover {
background-position: center 28.89%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-supporters:hover, .sitemap-comp .icon-supporters:hover, ul.extra .icon-supporters:hover, #block-system-main-menu .icon-supporters:hover {
background-position: 0 -138px; } }
.mainnav .icon-news, .sitemap-comp .icon-news, ul.extra .icon-news, #block-system-main-menu .icon-news {
background-position: center 24.5%;
background-size: 3em auto;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-news, .sitemap-comp .icon-news, ul.extra .icon-news, #block-system-main-menu .icon-news {
background-position: 0 -418px;
background-size: auto; } }
.mainnav .icon-news:hover, .sitemap-comp .icon-news:hover, ul.extra .icon-news:hover, #block-system-main-menu .icon-news:hover {
background-position: center 16.36%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-news:hover, .sitemap-comp .icon-news:hover, ul.extra .icon-news:hover, #block-system-main-menu .icon-news:hover {
background-position: 0 -96px; } }
.mainnav .icon-contact, .sitemap-comp .icon-contact, ul.extra .icon-contact, #block-system-main-menu .icon-contact {
background-size: 4.5em auto;
background-position: center 51.5%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-contact, .sitemap-comp .icon-contact, ul.extra .icon-contact, #block-system-main-menu .icon-contact {
background-position: 0 -335px;
background-size: auto; } }
.mainnav .icon-contact:hover, .sitemap-comp .icon-contact:hover, ul.extra .icon-contact:hover, #block-system-main-menu .icon-contact:hover {
background-position: center 40.0%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-contact:hover, .sitemap-comp .icon-contact:hover, ul.extra .icon-contact:hover, #block-system-main-menu .icon-contact:hover {
background-position: 0 -293px; } }
.mainnav .icon-search, .sitemap-comp .icon-search, ul.extra .icon-search, #block-system-main-menu .icon-search {
background-size: 3.2em auto;
background-position: center 47.4%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-search, .sitemap-comp .icon-search, ul.extra .icon-search, #block-system-main-menu .icon-search {
background-position: 0 -440px;
padding-left: 1.8em;
background-size: auto; } }
.mainnav .icon-search:hover, .sitemap-comp .icon-search:hover, ul.extra .icon-search:hover, #block-system-main-menu .icon-search:hover {
background-position: center 32.41%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-search:hover, .sitemap-comp .icon-search:hover, ul.extra .icon-search:hover, #block-system-main-menu .icon-search:hover {
background-position: 0 -251px; } }
.mainnav .icon-profile, .sitemap-comp .icon-profile, ul.extra .icon-profile, #block-system-main-menu .icon-profile {
background-size: 5.0em auto;
background-position: center 97.2%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-profile, .sitemap-comp .icon-profile, ul.extra .icon-profile, #block-system-main-menu .icon-profile {
background-position: 0 -378px;
padding-left: 2.5em;
background-size: auto; } }
.mainnav .icon-profile:hover, .sitemap-comp .icon-profile:hover, ul.extra .icon-profile:hover, #block-system-main-menu .icon-profile:hover {
background-position: center 67.35%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-profile:hover, .sitemap-comp .icon-profile:hover, ul.extra .icon-profile:hover, #block-system-main-menu .icon-profile:hover {
background-position: 0 -273px; } }
.mainnav .icon-logout, .sitemap-comp .icon-logout, ul.extra .icon-logout, #block-system-main-menu .icon-logout {
background-size: 5.0em auto;
background-position: center 70.6%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-logout, .sitemap-comp .icon-logout, ul.extra .icon-logout, #block-system-main-menu .icon-logout {
background-position: 0 -69.9px;
padding-left: 2.8em;
background-size: 4.5em auto; } }
@media only screen and (min-width: 901px) and (-webkit-min-device-pixel-ratio: 0) {
.mainnav .icon-logout, .sitemap-comp .icon-logout, ul.extra .icon-logout, #block-system-main-menu .icon-logout {
background-position: 0 -71.0px; } }
.mainnav .icon-logout:hover, .sitemap-comp .icon-logout:hover, ul.extra .icon-logout:hover, #block-system-main-menu .icon-logout:hover {
background-position: center 36.5%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-logout:hover, .sitemap-comp .icon-logout:hover, ul.extra .icon-logout:hover, #block-system-main-menu .icon-logout:hover {
background-position: 0 -51.5px;
background-size: 4.5em auto; } }
.mainnav .icon-give, .sitemap-comp .icon-give, ul.extra .icon-give, #block-system-main-menu .icon-give {
background-size: 4.5em auto;
background-position: center 89.9%; }
.mainnav .icon-give:hover, .sitemap-comp .icon-give:hover, ul.extra .icon-give:hover, #block-system-main-menu .icon-give:hover {
background-position: center 74.15%; }
/*correct for chrome, which renders 1 pixel off*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.sitemap-comp .icon-impact {
background-position: 0 -398px; }
.sitemap-comp .icon-impact:hover {
background-position: 0 -118px; }
.sitemap-comp .icon-ways {
background-position: 0 -355px; }
.sitemap-comp .icon-ways:hover {
background-position: 0 -313.5px; }
.sitemap-comp .icon-supporters {
background-position: 0 -160px; }
.sitemap-comp .icon-supporters:hover {
background-position: 0 -139px; }
.sitemap-comp .icon-news {
background-position: 0 -419px; }
.sitemap-comp .icon-news:hover {
background-position: 0 -97px; } }
/*set padding in mainnav*/
.mainnav .icon-impact {
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-impact {
padding-left: 18px; } }
.mainnav .icon-ways {
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-ways {
padding-left: 16px; } }
.mainnav .icon-supporters {
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-supporters {
padding-left: 30px; } }
.mainnav .icon-news {
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav .icon-news {
padding-left: 18px; } }
.sitemap-comp {
/*screen*/ }
@media only screen and (min-width: 901px) {
.sitemap-comp .icon-impact {
padding-left: 18px; }
.sitemap-comp .icon-supporters {
padding-left: 30px; } }
.sitemap-comp .icon-impact, .is-expanded:nth-child(1) .menu__link {
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-impact, .is-expanded:nth-child(1) .menu__link {
background-size: .93em auto;
background-position: 0 8.1%; } }
@media only screen and (min-width: 901px) {
.sitemap-comp .icon-impact, .is-expanded:nth-child(1) .menu__link {
padding-top: 1px; } }
.sitemap-comp .icon-impact:hover, .is-expanded:nth-child(1) .menu__link:hover {
/*tablet-all*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-impact:hover, .is-expanded:nth-child(1) .menu__link:hover {
background-position: 0 -.35%; } }
.sitemap-comp .icon-ways, .is-expanded:nth-child(2) .menu__link {
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-ways, .is-expanded:nth-child(2) .menu__link {
background-size: .93em auto;
background-position: 0 82.4%;
padding-left: 15px; } }
@media only screen and (min-width: 901px) {
.sitemap-comp .icon-ways, .is-expanded:nth-child(2) .menu__link {
padding-top: 1px; } }
.sitemap-comp .icon-ways:hover, .is-expanded:nth-child(2) .menu__link:hover {
/*tablet-all*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-ways:hover, .is-expanded:nth-child(2) .menu__link:hover {
background-position: 0 59.8%; } }
.sitemap-comp .icon-supporters, .is-expanded:nth-child(3) .menu__link {
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-supporters, .is-expanded:nth-child(3) .menu__link {
background-size: 1.7em auto;
background-position: 0 43.45%;
padding-left: 28px; } }
@media only screen and (min-width: 901px) {
.sitemap-comp .icon-supporters, .is-expanded:nth-child(3) .menu__link {
padding-left: 30px;
padding-top: 1px; } }
.sitemap-comp .icon-supporters:hover, .is-expanded:nth-child(3) .menu__link:hover {
/*tablet-all*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-supporters:hover, .is-expanded:nth-child(3) .menu__link:hover {
background-position: 0 28.8%; } }
.sitemap-comp .icon-news, .is-expanded:nth-child(4) .menu__link {
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-news, .is-expanded:nth-child(4) .menu__link {
background-size: .9em auto;
background-position: 0 24.44%; } }
@media only screen and (min-width: 901px) {
.sitemap-comp .icon-news, .is-expanded:nth-child(4) .menu__link {
padding-left: 18px;
padding-top: 1px; } }
.sitemap-comp .icon-news:hover, .is-expanded:nth-child(4) .menu__link:hover {
/*tablet-all*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.sitemap-comp .icon-news:hover, .is-expanded:nth-child(4) .menu__link:hover {
background-position: 0 16.3%; } }
footer ul.extra .menu-icon {
background-size: 5em auto; }
footer ul.extra .icon-contact {
background-position: center 51.6%; }
footer ul.extra .icon-contact:hover {
background-position: center 40.15%; }
footer ul.extra .icon-search {
background-size: 3.3em auto;
background-position: center 47.5%; }
footer ul.extra .icon-search:hover {
background-position: center 32.44%; }
footer ul.extra .icon-profile {
background-position: center 97.2%; }
footer ul.extra .icon-profile:hover {
background-position: center 67.35%; }
footer ul.extra .icon-logout {
background-position: center 70.6%; }
footer ul.extra .icon-logout:hover {
background-position: center 36.5%; }
footer ul.extra .icon-give {
background-size: 4.5em auto;
background-position: center 89.8%; }
footer ul.extra .icon-give:hover {
background-position: center 74%; }
/*turn off background images in drupal*/
.toggle-menu-icon:hover {
cursor: pointer; }
/* Smartphones, except large phone landscape ----------- */
@media only screen and (max-width: 748px) {
/*javascript fires new class, which moves menu */
body.menu-on .mainnav {
transform: translate(0%); } }
/*tablet-all*/
@media only screen and (min-width: 749px) and (max-width: 900px) {
/*javascript fires new class, which moves menu */
body.menu-on .mainnav {
transform: translate(0%); } }
footer {
text-align: center;
clear: both;
background: #333;
color: white;
padding: 0 0 3em;
/*screen*/
/*screen, this is the point when the super side bar hits max width*/ }
@media only screen and (min-width: 1730px) and (min-height: 900px) {
footer {
max-width: 85%;
/*make space for sitemap sidebar*/ } }
@media only screen and (min-width: 1917px) and (min-height: 900px) {
footer {
max-width: 100%;
/*fill in space created by max-width on sitemap sidebar*/ } }
.col-bottomlink {
width: 25%; }
.smallprint {
clear: both;
margin: 0.9rem;
font-size: .7em; }
/*responsive images for full width graphics*/
/* -------------
1. wrappers
----------------*/
.footer-image .footer-image-wrapper,
.footer-logo .footer-logo-wrapper,
.responsive-background .alumni-branded-banner-wrapper,
.responsive-background .giving-branded-banner-wrapper {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent; }
/* -------------
1-. wrappers: footer image
----------------*/
/*aerial image of campus, full width*/
.footer-image .footer-image-wrapper {
background: white;
/*set background to white so image bleeds into background*/
background-size: 100%;
background-position: 50% -8%;
background-repeat: no-repeat; }
.footer-image .footer-image-wrapper {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.footer-image .footer-image-wrapper {
background-image: url("../img/footersprite-s30645a0337.png"); } }
/* -------------
1-. wrappers: Alumni Banner
----------------*/
.responsive-background {
width: 100%;
margin-top: 0.9rem;
margin-bottom: 0.9rem;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.responsive-background {
margin-bottom: 1.8rem;
margin-top: 0; } }
/*alumni homepage, responsive banner. changes based on campaign*/
.responsive-background .alumni-branded-banner-wrapper,
.responsive-background .giving-branded-banner-wrapper {
background-size: 100%;
background-position: 50% 50%;
/*center image in case the wrong aspect ratio*/
background-repeat: no-repeat; }
/* -------------
1-. wrappers: footer logo
----------------*/
/*rensselaer logo*/
.footer-logo {
max-width: 500px;
/*full width on small devices, then hold at 500px*/
margin: 0 auto;
/*center image*/
padding: 0.9rem 1.8rem;
/*screen*/ }
@media only screen and (min-width: 901px) {
.footer-logo {
margin-top: 1.8em; } }
.footer-logo .footer-logo-wrapper {
background-size: 100%;
background-position: 50% 100%;
background-repeat: no-repeat;
background-image: url("../img/seal-text-white.png");
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.footer-logo .footer-logo-wrapper {
background-size: 190%;
/*blow up image to fill space*/
background-image: url("../img/footersprite-s30645a0337.png");
/*use sprite*/ } }
/* -------------
1. inner
----------------*/
.footer-image-inner, .footer-logo-inner, .alumni-branded-banner-inner, .giving-branded-banner-inner {
display: block;
height: 0; }
/* -------------
1-. inner: footer image
----------------*/
.footer-image-inner {
padding-top: 22%;
/* height/width of image */ }
/* Smartphones, except large phone landscape ----------- */
@media only screen and (max-width: 748px) {
/*on small screen, do not download sprite or aerial image*/
.footer-image, .footer-image .footer-image-wrapper, .footer-image-inner {
display: none; }
.footer-image .footer-image-wrapper {
background-image: none; } }
/* -------------
1-. inner: alumni banner
----------------*/
/* -------------
1-. inner: giving banner
----------------*/
/* -------------
1-. inner: footer logo
----------------*/
.footer-logo-inner {
padding-top: 27%;
/* height/width of image */
/*tablet-all*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.footer-logo-inner {
padding-top: 26%;
/* height/width of image */ } }
@media only screen and (min-width: 901px) {
.footer-logo-inner {
padding-top: 20%;
/* height/width of image */ } }
/*hero graphic in drupal*/
/*navigation at footer of page*/
/*also see:
grid.scss for some of the float rules
nav.scss for icon rule */
/*.block-menu is sitemap in drupal*/
.sitemap, .block-menu {
text-align: left;
padding: 0 0.9rem;
/*screen*/ }
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.sitemap, .block-menu {
position: fixed;
min-width: 240px;
height: 100%;
width: 288px;
/*magic number based on longest menu item*/
right: 0;
top: 0;
padding-top: 96px;
/*magic number based on height of ul extra block*/
background: #333;
padding-left: 1.8rem;
z-index: 1; } }
.sitemap li, .block-menu li {
text-transform: uppercase; }
.sitemap li ul, .block-menu li ul {
margin: .7em 0 0;
/*for touch device, add a space between main link and sublinks*/
/*screen*/ }
@media only screen and (min-width: 901px) {
.sitemap li ul, .block-menu li ul {
margin: 0; } }
.sitemap li ul li, .block-menu li ul li {
font-size: .8em;
text-transform: none;
margin-bottom: 0;
padding-bottom: .7em;
width: 100%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.sitemap li ul li, .block-menu li ul li {
padding: .1em 0; } }
.sitemap-comp li, .block-menu li {
margin-bottom: 1.8rem; }
.sitemap-comp ul li, .block-menu ul li {
/*screen*/ }
@media only screen and (min-width: 1730px) and (min-height: 900px) {
.sitemap-comp ul li, .block-menu ul li {
width: 100%; } }
/*some additional rules are in the _nav.scss that define how the grid is arranged */
/*event details for alumni single event pages*/
/* styles */
/*restrict image size, but breaks ie8*/
img {
max-width: 100%; }
.col-section img, article img, footer img {
width: 100%; }
.col-article img,
.bleed .maincontent img,
.layout-full-read article img, .layout-read article img {
/* large phone (landscape) ----------- */ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
.col-article img,
.bleed .maincontent img,
.layout-full-read article img, .layout-read article img {
max-height: 150px;
width: auto !important; } }
/*fullimg figure and images*/
.fullimg img,
img.fullimg,
.field-name-field-media .field-name-field-image img,
.media-fullimg {
width: 100%;
/*full screen*/
height: auto;
/*max-width and slide left for images on read adult */
/*screen*/ }
@media only screen and (min-width: 901px) {
.fullimg img,
img.fullimg,
.field-name-field-media .field-name-field-image img,
.media-fullimg {
float: left;
margin-right: 1.8em;
/*set gutter*/
margin-bottom: 0.9em; } }
/*screen*/
@media only screen and (min-width: 901px) {
.fullimg,
.media-fullimg,
.field-name-field-media .field-name-field-image {
max-width: 30em;
/* or else too big on big screens: text wraps */ }
.read .withsidebar .fullimg,
.read .withsidebar .media-fullimg,
.read .withsidebar .field-name-field-media .field-name-field-image,
.layout-read .fullimg,
.layout-read .media-fullimg,
.layout-read .field-name-field-media .field-name-field-image,
.bleed .layout-sidebar .fullimg,
.bleed .layout-sidebar .media-fullimg,
.bleed .layout-sidebar .field-name-field-media .field-name-field-image {
max-width: 750px;
/* or else too big on big screens: full image based on pixel recommendation */ } }
/*screen*/
@media only screen and (min-width: 901px) {
.layout-full figure.imgright {
float: right;
padding-left: 1.8rem; }
.layout-full .imgright img, .layout-full img.imgright, .layout-full .file-imgright {
max-width: 750px;
/* or else too big on big screens: full image based on pixel recommendation */
padding-left: 0;
margin-left: 0; }
/*on large screen right image goes right*/
.read .layout-full figure.imgright,
.bleed .layout-full figure.imgright,
.layout-full-read figure.imgright {
float: none; }
.read .layout-full .imgright img, .read .layout-full img.imgright, .read .layout-full .file-imgright,
.bleed .layout-full .imgright img,
.bleed .layout-full img.imgright,
.bleed .layout-full .file-imgright,
.layout-full-read .imgright img,
.layout-full-read img.imgright,
.layout-full-read .file-imgright {
margin-left: .1%;
/*without this image disappears, not sure why*/
padding-left: 32%;
/*align right*/
max-width: 100%; }
/*if article sidebar, stay full*/
.read .withsidebar .imgright img, .read .withsidebar img.imgright, .read .withsidebar .file-imgright,
.layout-read .imgright img,
.layout-read img.imgright,
.layout-read .file-imgright,
.bleed .layout-sidebar .imgright img,
.bleed .layout-sidebar img.imgright,
.bleed .layout-sidebar .file-imgright {
padding-left: 0;
margin-left: 0;
max-width: 750px;
/* or else too big on big screens: full image based on pixel recommendation */ } }
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/*no underline*/
a {
text-decoration: none; }
/*standard link color*/
a:link, a:visited {
color: #003399;
/*border-bottom: white;*/
border-width: 0 0 1px 0;
/*border-style: none none dotted none;*/ }
a:hover {
border-bottom: #003399;
border-width: 0 0 1px 0;
border-style: none none dotted none; }
a.button {
border-style: none; }
/*hide phone link on desktop */
a.phone:link, a.phone:visited, a.phone:hover {
/*screen*/ }
@media only screen and (min-width: 901px) {
a.phone:link, a.phone:visited, a.phone:hover {
color: black;
border-style: none; } }
/*hidden white links*/
/*block-menu is sitemap in drupal*/
.sitemap a:link, .sitemap a:visited, .sitemap a:active, .extra a:link, .extra a:visited, .extra a:active, .header a:link, .header a:visited, .header a:active, .social a:link, .social a:visited, .social a:active, .block-menu a:link, .block-menu a:visited, .block-menu a:active {
color: white;
border-style: none; }
.sitemap a:hover, .extra a:hover, .header a:hover, .social a:hover, .block-menu a:hover {
color: #b3ccff;
text-shadow: none; }
/*hidden black links*/
h1 a:link, h1 a:visited, h1 a:active, h2 a:link, h2 a:visited, h2 a:active, h3 a:link, h3 a:visited, h3 a:active, h4 a:link, h4 a:visited, h4 a:active, h5 a:link, h5 a:visited, h5 a:active, h6 a:link, h6 a:visited, h6 a:active {
color: black; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
border-color: black;
border-style: none none dotted none; }
/*unhide header links*/
.details h1 a:link, .details h1 a:visited, .details h1 a:active, h2 a:link, h2 a:visited, h2 a:active, h3 a:link, h3 a:visited, h3 a:active, h4 a:link, h4 a:visited, h4 a:active, h5 a:link, h5 a:visited, h5 a:active, h6 a:link, h6 a:visited, h6 a:active {
color: #003399; }
.details h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
border-color: #003399; }
/*Rensselaer is gray on phone */
.header .title {
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
.header .title a:link, .header .title a:visited, .header .title a:active, .header .title .part1 {
color: #CCC; }
.header .title a:hover {
color: #b3ccff; }
.header .title .part2:hover {
color: #b3ccff;
text-shadow: none; } }
.header .title:hover .part1, .header .title:hover .part2 {
color: #b3ccff; }
/*no hover affect, w/out this there will be a flash of color*/
nav a:hover, .social a:hover, .footer-logo a:hover {
border-style: none; }
.mainnav a:link, .mainnav a:visited, .mainnav a:active, .sitemap a:link, .sitemap a:visited, .sitemap a:active, .extra a:link, .extra a:visited, .extra a:active, .block-menu a:link, .block-menu a:visited, .block-menu a:active {
width: 100%;
display: block;
/*screen*/ }
@media only screen and (min-width: 901px) {
.mainnav a:link, .mainnav a:visited, .mainnav a:active, .sitemap a:link, .sitemap a:visited, .sitemap a:active, .extra a:link, .extra a:visited, .extra a:active, .block-menu a:link, .block-menu a:visited, .block-menu a:active {
display: inline; } }
/*for grid, we want the whole box to be a link, the image and text*/
.gridlink:link, .gridlink:visited {
/*these two rules ensure that the link wraps the image and text when there is a background*/
height: 100%;
display: block;
background: white;
/*prevents a jiggle when mousing over*/
border: dotted thin transparent;
padding-bottom: 0.45rem; }
.gridlink:link img, .gridlink:visited img {
opacity: 1; }
/*breakout section has bluebackground, set link color to none
section.breakout {
.gridlink:link, .gridlink:visited {
background: none;
color: black;
text-align: center;
margin-top: $margin4;
}
}
*/
.gridlink:hover, .gridlink:active {
background: #b3ccff;
border: dotted thin #003399;
color: #333; }
.gridlink:hover img, .gridlink:active img {
opacity: 0.6;
/*webkit jiggles the image without this rule*/
-webkit-backface-visibility: hidden; }
.gridlink:hover h2, .gridlink:active h2 {
color: #333; }
/*breakout section has bluebackground and no images, set link underline and no border
section.breakout {
.gridlink:hover, .gridlink:visited {
text-decoration: underline;
border: dotted thin transparent;
}
}
*/
/*footer links are on gray and need a lighter blue*/
footer {
/*hide phone link on desktop */ }
footer a:link, footer a:visited, footer a:active {
color: #b3ccff;
border-style: none; }
footer a:hover {
border-bottom: #b3ccff;
border-width: 0 0 1px 0;
border-style: none none dotted none; }
footer a.phone:link, footer a.phone:visited, footer a.phone:hover {
/*screen*/ }
@media only screen and (min-width: 901px) {
footer a.phone:link, footer a.phone:visited, footer a.phone:hover {
color: white;
border-style: none; } }
/*use this class to space out links for touch*/
.space-link {
line-height: 2em;
/*screen*/ }
@media only screen and (min-width: 901px) {
.space-link {
line-height: normal; } }
.menu-button-wrapper {
min-width: 40px;
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.menu-button-wrapper {
margin-top: .5em; } }
@media only screen and (min-width: 901px) {
.menu-button-wrapper {
display: none; } }
.toggle-menu-icon {
width: 100%; }
.donate-wrapper {
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.donate-wrapper {
font-size: 1.1em;
margin-top: .2em; } }
@media only screen and (min-width: 901px) {
.donate-wrapper {
margin-top: .65em; } }
.donate-button {
font-size: .6em;
text-align: center;
height: 100%;
padding: .6em;
/*screen*/ }
@media only screen and (min-width: 901px) {
.donate-button {
padding: .4em .6em .3em;
font-size: .7em; } }
.action, .donate-button, .button, a.button, input[type="submit"], input[type="button"], input.search_button {
border-radius: 1em;
text-shadow: 0 -1px 0 transparent, 0 1px 0 rgba(255, 255, 255, 0);
text-transform: uppercase; }
.donate-button {
background-color: #de2831;
background-image: -webkit-linear-gradient(top, #d91f28 0%, #de2831 29%, #94151b 100%);
background-image: linear-gradient(to bottom,#d91f28 0%, #de2831 29%, #94151b 100%);
border: 1px solid #d91f28;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), inset -14px -12px 4px rgba(247, 54, 64, 0); }
.action, .button, a.button, input[type="submit"], input.search_button {
background-color: #003399;
background-image: -webkit-linear-gradient(top, #b3ccff 0%, #b3ccff 5%, #003399 100%);
background-image: linear-gradient(to bottom,#b3ccff 0%, #b3ccff 5%, #003399 100%); }
.button-red-gray {
background-color: #de2831;
background-image: -webkit-linear-gradient(top, #d91f28 0%, #de2831 29%, #94151b 100%);
background-image: linear-gradient(to bottom,#d91f28 0%, #de2831 29%, #94151b 100%);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), inset -14px -12px 4px rgba(247, 54, 64, 0); }
.header .donate-button:hover {
background-color: #b3ccff;
background-image: -webkit-linear-gradient(#b3ccff 0%, #b3ccff 100%);
background-image: linear-gradient(#b3ccff 0%, #b3ccff 100%);
color: #333; }
.action-wrapper {
text-align: center; }
.action, .button, a.button, input[type="submit"], input[type="button"], input.search_button {
font-size: .8em;
margin-bottom: 0.9rem;
display: inline-block; }
.action:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, input.search_button:hover {
background-color: #de2831;
background-image: -webkit-linear-gradient(top, #d91f28 0%, #de2831 29%, #94151b 100%);
background-image: linear-gradient(to bottom,#d91f28 0%, #de2831 29%, #94151b 100%);
border: none;
/*prevent pixel shift on mouseover*/ }
.button-red-gray:hover {
background-color: #ccc;
background-image: -webkit-linear-gradient(top, #ccc 0%, #ccc 29%, #999 100%);
background-image: linear-gradient(to bottom,#ccc 0%, #ccc 29%, #999 100%); }
a.action:link, a.action:visited, .button, a.button, input[type="submit"], input.search_button {
color: white;
text-align: center;
padding: .7em; }
a.button-red-gray:hover {
color: black; }
/* Typography */
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
body {
color: black;
font-family: "franklin-gothic-urw", verdana, sans-serif;
font-size: 16px; }
h1, h2, h3, h4, h5, h6, .tagline, .field-name-field-subtitle {
font-family: "franklin-gothic-urw-cond", "franklin-gothic-urw", verdana, sans-serif;
font-weight: 700; }
h1, h2, .header .title {
text-transform: uppercase;
margin-top: 0;
text-align: center;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
h1, h2, .header .title {
text-align: left; } }
h1 {
font-size: 1.9em;
line-height: 1em;
margin: 0;
/* large phone (landscape) ----------- */
/*tablet and up*/ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
h1 {
font-size: 1.5em; } }
@media only screen and (min-width: 749px) {
h1 {
font-size: 1.9em; } }
.read h1,
.bleed h1,
.layout-full-read h1,
.layout-read h1 {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read h1,
.bleed h1,
.layout-full-read h1,
.layout-read h1 {
font-size: 3em;
text-align: left;
margin-left: 1.8rem;
margin-right: 1.8rem; } }
/*on event page, float h1 on left side*/
.single h1 {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.single h1 {
margin-bottom: 1em;
max-width: 72%;
float: left; } }
h2 {
font-size: 1.6em;
margin-bottom: .2em; }
.grid-wrap h2, #block-views-subpage-menu-block h2,
.read h2,
.bleed .content h2,
.layout-full-read h2,
.layout-read h2 {
font-size: 1.2em; }
article h2 {
color: black;
text-align: left;
margin-top: 0.9rem; }
.grid-wrap h2 {
word-wrap: break-word;
/*prevent long words from breaking layout*/ }
.read,
.bleed .content,
.layout-full-read article,
.layout-read article {
/*to be used when h2 is preceded by a relevant image*/ }
.read h2, .read h3, .read h4, .read h5, .read h6,
.bleed .content h2,
.bleed .content h3,
.bleed .content h4,
.bleed .content h5,
.bleed .content h6,
.layout-full-read article h2,
.layout-full-read article h3,
.layout-full-read article h4,
.layout-full-read article h5,
.layout-full-read article h6,
.layout-read article h2,
.layout-read article h3,
.layout-read article h4,
.layout-read article h5,
.layout-read article h6 {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read h2, .read h3, .read h4, .read h5, .read h6,
.bleed .content h2,
.bleed .content h3,
.bleed .content h4,
.bleed .content h5,
.bleed .content h6,
.layout-full-read article h2,
.layout-full-read article h3,
.layout-full-read article h4,
.layout-full-read article h5,
.layout-full-read article h6,
.layout-read article h2,
.layout-read article h3,
.layout-read article h4,
.layout-read article h5,
.layout-read article h6 {
margin-left: 1.8rem;
color: #4d4d4d;
text-transform: none;
margin-top: 2.7rem; } }
.read .maincontent .grid-wrap h2,
.bleed .content .maincontent .grid-wrap h2,
.layout-full-read article .maincontent .grid-wrap h2,
.layout-read article .maincontent .grid-wrap h2 {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .maincontent .grid-wrap h2,
.bleed .content .maincontent .grid-wrap h2,
.layout-full-read article .maincontent .grid-wrap h2,
.layout-read article .maincontent .grid-wrap h2 {
margin-top: 0;
margin-left: 0;
margin-right: 0;
color: black; } }
.read h2.squeeze,
.bleed .content h2.squeeze,
.layout-full-read article h2.squeeze,
.layout-read article h2.squeeze {
margin-top: 0; }
.read aside h2, .read aside h3, .read aside h4, .read aside h5, .read aside h6, .read .aside h2, .read .aside h3, .read .aside h4, .read .aside h5, .read .aside h6,
.bleed .content aside h2,
.bleed .content aside h3,
.bleed .content aside h4,
.bleed .content aside h5,
.bleed .content aside h6,
.bleed .content .aside h2,
.bleed .content .aside h3,
.bleed .content .aside h4,
.bleed .content .aside h5,
.bleed .content .aside h6,
.layout-full-read article aside h2,
.layout-full-read article aside h3,
.layout-full-read article aside h4,
.layout-full-read article aside h5,
.layout-full-read article aside h6,
.layout-full-read article .aside h2,
.layout-full-read article .aside h3,
.layout-full-read article .aside h4,
.layout-full-read article .aside h5,
.layout-full-read article .aside h6,
.layout-read article aside h2,
.layout-read article aside h3,
.layout-read article aside h4,
.layout-read article aside h5,
.layout-read article aside h6,
.layout-read article .aside h2,
.layout-read article .aside h3,
.layout-read article .aside h4,
.layout-read article .aside h5,
.layout-read article .aside h6 {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read aside h2, .read aside h3, .read aside h4, .read aside h5, .read aside h6, .read .aside h2, .read .aside h3, .read .aside h4, .read .aside h5, .read .aside h6,
.bleed .content aside h2,
.bleed .content aside h3,
.bleed .content aside h4,
.bleed .content aside h5,
.bleed .content aside h6,
.bleed .content .aside h2,
.bleed .content .aside h3,
.bleed .content .aside h4,
.bleed .content .aside h5,
.bleed .content .aside h6,
.layout-full-read article aside h2,
.layout-full-read article aside h3,
.layout-full-read article aside h4,
.layout-full-read article aside h5,
.layout-full-read article aside h6,
.layout-full-read article .aside h2,
.layout-full-read article .aside h3,
.layout-full-read article .aside h4,
.layout-full-read article .aside h5,
.layout-full-read article .aside h6,
.layout-read article aside h2,
.layout-read article aside h3,
.layout-read article aside h4,
.layout-read article aside h5,
.layout-read article aside h6,
.layout-read article .aside h2,
.layout-read article .aside h3,
.layout-read article .aside h4,
.layout-read article .aside h5,
.layout-read article .aside h6 {
margin-left: 0;
color: black;
text-transform: uppercase;
margin-top: 0; } }
section h2,
.pageheader h2 {
text-align: center;
margin: 0 0 0.9rem; }
.pageheader h2, .bleed .pageheader h2 {
font-size: 1.1em;
color: #4d4d4d;
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.pageheader h2, .bleed .pageheader h2 {
text-align: left;
font-size: 1.2em;
margin-bottom: 0;
text-transform: uppercase;
margin-left: 0; } }
@media only screen and (min-width: 901px) {
.pageheader h2, .bleed .pageheader h2 {
margin-bottom: 0.9rem; } }
.read .maincontent .pageheader h2,
.bleed .priority1and2 .pageheader h2,
.layout-full-read .field-name-field-subtitle,
.layout-read .field-name-field-subtitle {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .maincontent .pageheader h2,
.bleed .priority1and2 .pageheader h2,
.layout-full-read .field-name-field-subtitle,
.layout-read .field-name-field-subtitle {
padding: 0 1.8rem;
width: 100%;
margin-left: 0;
margin-top: 0; } }
.read .maincontent .pageheader h2,
.bleed .maincontent .pageheader h2 {
/*screen*/ }
@media only screen and (min-width: 901px) {
.read .maincontent .pageheader h2,
.bleed .maincontent .pageheader h2 {
margin-bottom: 1.8rem; } }
/*do i need this? */
.gridtext h2 {
text-align: left;
line-height: 1em; }
section h2 {
margin-bottom: 0; }
h3 {
font-size: 1.17em;
margin: 0 0 .3em;
text-transform: uppercase; }
.donate h3 {
margin-top: .7em; }
h4 {
font-size: 1em;
margin: 1.33em 0; }
h5 {
font-size: 0.83em;
margin: 1.67em 0; }
h6 {
font-size: 0.67em;
margin: 2.33em 0; }
p,
pre {
margin: 0 0 .8em;
line-height: 1.3em;
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
p,
pre {
word-wrap: break-word; } }
p, .content ul, .content ol {
font-weight: 300;
max-width: 33em;
font-size: 1.1em;
line-height: 1.4;
/*@include breakpoint(big-baby-sleep) {
font-size: .7em;
}*/
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
p, .content ul, .content ol {
font-size: .9em;
/*lowered by .1 for paragraph on intro to grid*/
line-height: 1.3em; } }
.grid-wrap p {
font-size: .9em;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.grid-wrap p {
font-size: .8em; } }
.grid-wrap p {
text-align: center; }
.gridtext p {
text-align: left; }
/*used on alumni-classes to reduce white space between intro paragraph and boxes*/
p.squeeze {
margin-bottom: 0; }
.read .priority1and2 p, .read .priority1and2 li,
.bleed .priority1and2 p,
.bleed .priority1and2 li {
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.read .priority1and2 p, .read .priority1and2 li,
.bleed .priority1and2 p,
.bleed .priority1and2 li {
font-size: 1.1em; } }
@media only screen and (min-width: 901px) {
.read .priority1and2 p, .read .priority1and2 li,
.bleed .priority1and2 p,
.bleed .priority1and2 li {
font-size: .88em; } }
.read .priority1and2 .aside li, .read .priority1and2 aside li,
.bleed .priority1and2 .aside li,
.bleed .priority1and2 aside li {
font-size: 1em; }
.read .priority1and2 p,
.bleed .priority1and2 p {
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.read .priority1and2 p,
.bleed .priority1and2 p {
margin-left: 1.8rem; } }
@media only screen and (min-width: 901px) {
.read .priority1and2 p,
.bleed .priority1and2 p {
font-size: .88em; } }
.read .priority1and2 aside p,
.bleed .priority1and2 aside p {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .priority1and2 aside p,
.bleed .priority1and2 aside p {
margin-left: 0; } }
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong, .run-in {
font-weight: 500; }
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
box-sizing: content-box;
height: 0; }
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none; }
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
font-size: .8em;
font-weight: 500;
/*text-align: justify;*/
/* large phone (landscape) ----------- */ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
font-size: .5em; } }
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
clear: left;
font-weight: normal;
text-align: left; } }
/*add right margin/gutter on figcaption fullimg and imgright with sidebar*/
.fullimg figcaption,
.fullimg .field-name-field-caption,
.fullimg .field-name-field-image-caption,
.media-fullimg figcaption,
.media-fullimg .field-name-field-caption,
.media-fullimg .field-name-field-image-caption,
.field-name-field-media figcaption,
.field-name-field-media .field-name-field-caption,
.field-name-field-media .field-name-field-image-caption,
.imgright figcaption,
.imgright .field-name-field-caption,
.imgright .field-name-field-image-caption,
.media-imgright figcaption,
.media-imgright .field-name-field-caption,
.media-imgright .field-name-field-image-caption {
margin-right: 0.9rem;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.fullimg figcaption,
.fullimg .field-name-field-caption,
.fullimg .field-name-field-image-caption,
.media-fullimg figcaption,
.media-fullimg .field-name-field-caption,
.media-fullimg .field-name-field-image-caption,
.field-name-field-media figcaption,
.field-name-field-media .field-name-field-caption,
.field-name-field-media .field-name-field-image-caption,
.imgright figcaption,
.imgright .field-name-field-caption,
.imgright .field-name-field-image-caption,
.media-imgright figcaption,
.media-imgright .field-name-field-caption,
.media-imgright .field-name-field-image-caption {
margin-right: 1.8rem;
/*if change this, change .content in general-layout.scss*/ } }
/*no margin on read/bleed image captions*/
.read .fullimg figcaption,
.read .fullimg .field-name-field-caption,
.read .fullimg .field-name-field-image-caption,
.read .media-fullimg figcaption,
.read .media-fullimg .field-name-field-caption,
.read .media-fullimg .field-name-field-image-caption,
.read .field-name-field-media figcaption,
.read .field-name-field-media .field-name-field-caption,
.read .field-name-field-media .field-name-field-image-caption,
.read .imgright figcaption,
.read .imgright .field-name-field-caption,
.read .imgright .field-name-field-image-caption,
.read .media-imgright figcaption,
.read .media-imgright .field-name-field-caption,
.read .media-imgright .field-name-field-image-caption,
.bleed .fullimg figcaption,
.bleed .fullimg .field-name-field-caption,
.bleed .fullimg .field-name-field-image-caption,
.bleed .media-fullimg figcaption,
.bleed .media-fullimg .field-name-field-caption,
.bleed .media-fullimg .field-name-field-image-caption,
.bleed .field-name-field-media figcaption,
.bleed .field-name-field-media .field-name-field-caption,
.bleed .field-name-field-media .field-name-field-image-caption,
.bleed .imgright figcaption,
.bleed .imgright .field-name-field-caption,
.bleed .imgright .field-name-field-image-caption,
.bleed .media-imgright figcaption,
.bleed .media-imgright .field-name-field-caption,
.bleed .media-imgright .field-name-field-image-caption {
margin-right: 0; }
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
/*screen*/ }
@media only screen and (min-width: 901px) {
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
max-width: 37em;
/*captions shouldn't be wider than picture*/ } }
/*no left page margin, so add margin to the caption*/
/*tablet and up*/
@media only screen and (min-width: 749px) {
/*read layouts*/
.read figcaption,
.read .field-name-field-caption,
.read .field-name-field-image-caption,
.bleed .content figcaption,
.bleed .content .field-name-field-caption,
.bleed .content .field-name-field-image-caption,
.layout-full-read figcaption,
.layout-full-read .field-name-field-caption,
.layout-full-read .field-name-field-image-caption, .layout-read figcaption,
.layout-read .field-name-field-caption,
.layout-read .field-name-field-image-caption {
margin-left: 1.8rem; }
/* read full layouts*/
.read .layout-full figcaption,
.read .layout-full .field-name-field-caption,
.read .layout-full .field-name-field-image-caption,
.layout-full-read figcaption,
.layout-full-read .field-name-field-caption,
.layout-full-read .field-name-field-image-caption,
.bleed .layout-full figcaption,
.bleed .layout-full .field-name-field-caption,
.bleed .layout-full .field-name-field-image-caption {
width: 28%;
/*restrict caption to negative space sidebar*/
/*display: inline;*/
float: left; } }
/*turn off for .full, gutters are set elsewhere*/
/* .layout-full, forces lead image figcaption off page */
.withsidebar .fullimg figcaption,
.withsidebar .fullimg .field-name-field-caption,
.withsidebar .fullimg .field-name-field-image-caption,
.withsidebar .imgright figcaption,
.withsidebar .imgright .field-name-field-caption,
.withsidebar .imgright .field-name-field-image-caption,
.bleed .layout-sidebar .fullimg figcaption,
.bleed .layout-sidebar .fullimg .field-name-field-caption,
.bleed .layout-sidebar .fullimg .field-name-field-image-caption,
.bleed .layout-sidebar .imgright figcaption,
.bleed .layout-sidebar .imgright .field-name-field-caption,
.bleed .layout-sidebar .imgright .field-name-field-image-caption {
margin-right: 0; }
.read .aside figcaption,
.read .aside .field-name-field-caption,
.read .aside .field-name-field-image-caption,
.read .media-aside figcaption,
.read .media-aside .field-name-field-caption,
.read .media-aside .field-name-field-image-caption,
.bleed .content .aside figcaption,
.bleed .content .aside .field-name-field-caption,
.bleed .content .aside .field-name-field-image-caption,
.bleed .content .media-aside figcaption,
.bleed .content .media-aside .field-name-field-caption,
.bleed .content .media-aside .field-name-field-image-caption,
.layout-full-read .aside figcaption,
.layout-full-read .aside .field-name-field-caption,
.layout-full-read .aside .field-name-field-image-caption,
.layout-full-read .media-aside figcaption,
.layout-full-read .media-aside .field-name-field-caption,
.layout-full-read .media-aside .field-name-field-image-caption, .layout-read .aside figcaption,
.layout-read .aside .field-name-field-caption,
.layout-read .aside .field-name-field-image-caption,
.layout-read .media-aside figcaption,
.layout-read .media-aside .field-name-field-caption,
.layout-read .media-aside .field-name-field-image-caption {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .aside figcaption,
.read .aside .field-name-field-caption,
.read .aside .field-name-field-image-caption,
.read .media-aside figcaption,
.read .media-aside .field-name-field-caption,
.read .media-aside .field-name-field-image-caption,
.bleed .content .aside figcaption,
.bleed .content .aside .field-name-field-caption,
.bleed .content .aside .field-name-field-image-caption,
.bleed .content .media-aside figcaption,
.bleed .content .media-aside .field-name-field-caption,
.bleed .content .media-aside .field-name-field-image-caption,
.layout-full-read .aside figcaption,
.layout-full-read .aside .field-name-field-caption,
.layout-full-read .aside .field-name-field-image-caption,
.layout-full-read .media-aside figcaption,
.layout-full-read .media-aside .field-name-field-caption,
.layout-full-read .media-aside .field-name-field-image-caption, .layout-read .aside figcaption,
.layout-read .aside .field-name-field-caption,
.layout-read .aside .field-name-field-image-caption,
.layout-read .media-aside figcaption,
.layout-read .media-aside .field-name-field-caption,
.layout-read .media-aside .field-name-field-image-caption {
margin-left: 0; } }
/*figcaption should align with figure image*/
figure.aside figcaption {
padding-right: 0.9rem;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
figure.aside figcaption {
padding-right: 1.8rem;
/*if change this, change .content in general-layout.scss*/ } }
.symmetry figcaption,
.symmetry .field-name-field-caption,
.symmetry .field-name-field-image-caption,
.media-symmetry figcaption,
.media-symmetry .field-name-field-caption,
.media-symmetry .field-name-field-image-caption {
width: auto;
margin-left: 0;
margin-right: 0; }
/* this was breaking the figcaption in drupal
.aside figcaption {
@include breakpoint(teen-up) {
margin-left: 0;
}
}
*/
aside, #block-views-aside-block, .aside {
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
aside, #block-views-aside-block, .aside {
font-size: .8em; }
aside p, #block-views-aside-block p, .aside p {
text-align: left; } }
@media only screen and (min-width: 901px) {
aside p, #block-views-aside-block p, .aside p {
font-size: .9em; } }
/*on full layout, aside priority3 is regular size*/
.layout-full aside.priority3,
.layout-full #block-views-aside-block, .layout-full-read aside.priority3,
.layout-full-read #block-views-aside-block {
font-size: 1em; }
.header .title {
font-size: 1em;
font-weight: 500;
line-height: .5em;
margin: 0;
text-align: left;
text-transform: none;
/*@include flex-grow(1); */
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
.header .title {
color: #FFF;
font-size: 2.2em;
font-weight: 700;
text-transform: uppercase; } }
@media only screen and (min-width: 901px) {
.header .title {
font-size: 2.8em; } }
.header .title .part2 {
color: #FFF;
display: block;
font-size: 1.6em;
font-weight: 700;
text-transform: uppercase;
line-height: 1.1em;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.header .title .part2 {
display: inline;
margin-left: .2em;
font-size: 1em;
line-height: 1em; } }
.tagline {
/* Smartphones, except large phone landscape ----------- */
/*tagline is small and gray*/
color: #CCC;
font-weight: 500;
font-size: .6em;
text-transform: none; }
@media only screen and (max-width: 748px) {
.tagline {
display: none; } }
/*.summary {
font-style:italic;
font-weight: bold;
font-size: .9em}*/
.content {
/*tablet-vertical*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.content {
font-size: 1.2em; } }
@media only screen and (min-width: 901px) {
.content {
font-size: 1.3em; } }
/*p.quote {
display: none;
}*/
blockquote {
line-height: 1.2em;
font-weight: 500;
margin-bottom: 0;
/* large phone (landscape) ----------- */ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
blockquote {
margin-left: 20%;
font-size: .7em; } }
blockquote:before {
content: '\201C';
font-size: 2.75em;
text-indent: -.5em;
margin-top: .1em;
opacity: .3;
float: left; }
cite {
display: block;
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 700;
font-style: normal;
font-size: .7em;
font-family: "franklin-gothic-urw-cond", "franklin-gothic-urw", verdana, sans-serif;
margin: 0.4rem 2.2rem 1.8rem 4em;
text-indent: -.8em;
/*make space for hyphen */
/* large phone (landscape) ----------- */
/*tablet and up*/ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
cite {
margin-left: 20%;
font-size: .5em; } }
@media only screen and (min-width: 749px) {
cite {
float: none;
clear: left;
padding-left: 1.5em; } }
cite:before {
content: "\2014";
opacity: .3; }
.read blockquote,
.bleed .content blockquote,
.layout-full-read blockquote, .layout-read blockquote, .layout-full blockquote {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read blockquote,
.bleed .content blockquote,
.layout-full-read blockquote, .layout-read blockquote, .layout-full blockquote {
float: left;
clear: right;
/*display: inline-block;*/
width: 60%;
margin-right: 40%;
padding-left: 0.9em;
font-size: 1.2em;
color: #4d4d4d; } }
.read .withsidebar cite, .read .withsidebar blockquote,
.bleed .layout-sidebar cite,
.bleed .layout-sidebar blockquote,
.layout-read cite,
.layout-read blockquote {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .withsidebar cite, .read .withsidebar blockquote,
.bleed .layout-sidebar cite,
.bleed .layout-sidebar blockquote,
.layout-read cite,
.layout-read blockquote {
float: none;
width: 100%;
max-width: 80%;
padding: 0 3.6rem;
display: block; } }
.read .withsidebar blockquote,
.bleed .layout-sidebar blockquote,
.layout-read blockquote {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .withsidebar blockquote,
.bleed .layout-sidebar blockquote,
.layout-read blockquote {
margin: 1.8rem auto 0.9rem; } }
.read .withsidebar cite,
.bleed .layout-sidebar cite,
.layout-read cite {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .withsidebar cite,
.bleed .layout-sidebar cite,
.layout-read cite {
margin: 0 auto 1.8rem; } }
aside, .views-field-field-aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
aside cite, aside blockquote, .views-field-field-aside cite, .views-field-field-aside blockquote {
margin-left: 15%;
margin-right: 10%; }
aside cite, .views-field-field-aside cite {
padding-left: .7em;
line-height: 1.3em;
margin-top: .2em;
margin-bottom: 1.4em; } }
/*quote in sidebar*/
read .withsidebar,
.bleed .layout-sidebar,
.layout-read {
/*tablet-vertical*/
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
read .withsidebar blockquote, read .withsidebar cite,
.bleed .layout-sidebar blockquote,
.bleed .layout-sidebar cite,
.layout-read blockquote,
.layout-read cite {
margin-left: 13%; } }
@media only screen and (min-width: 749px) {
read .withsidebar blockquote, read .withsidebar cite,
.bleed .layout-sidebar blockquote,
.bleed .layout-sidebar cite,
.layout-read blockquote,
.layout-read cite {
max-width: 85%;
padding: 0; }
read .withsidebar blockquote,
.bleed .layout-sidebar blockquote,
.layout-read blockquote {
padding: 0; } }
@media only screen and (min-width: 901px) {
read .withsidebar article blockquote,
.bleed .layout-sidebar article blockquote,
.layout-read article blockquote {
max-width: 20em; }
read .withsidebar blockquote,
.bleed .layout-sidebar blockquote,
.layout-read blockquote {
padding: 0;
margin-left: 10%; } }
/*layout full read; aside quote, priority2 goes left reduced padding*/
.read .layout-full article .aside blockquote,
.read .layout-full .priority1and2 .aside blockquote,
.bleed .layout-full article .aside blockquote,
.bleed .layout-full .priority1and2 .aside blockquote,
.layout-full-read article .aside blockquote,
.layout-full-read .priority1and2 .aside blockquote {
/*tablet-all*/
/*tablet and up*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.read .layout-full article .aside blockquote,
.read .layout-full .priority1and2 .aside blockquote,
.bleed .layout-full article .aside blockquote,
.bleed .layout-full .priority1and2 .aside blockquote,
.layout-full-read article .aside blockquote,
.layout-full-read .priority1and2 .aside blockquote {
font-size: 1em; } }
@media only screen and (min-width: 749px) {
.read .layout-full article .aside blockquote,
.read .layout-full .priority1and2 .aside blockquote,
.bleed .layout-full article .aside blockquote,
.bleed .layout-full .priority1and2 .aside blockquote,
.layout-full-read article .aside blockquote,
.layout-full-read .priority1and2 .aside blockquote {
width: 100%;
margin-right: 0;
padding-right: 0.9em;
padding-left: 0; } }
.read .layout-full article .aside cite,
.read .layout-full .priority1and2 .aside cite,
.bleed .layout-full article .aside cite,
.bleed .layout-full .priority1and2 .aside cite,
.layout-full-read article .aside cite,
.layout-full-read .priority1and2 .aside cite {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .layout-full article .aside cite,
.read .layout-full .priority1and2 .aside cite,
.bleed .layout-full article .aside cite,
.bleed .layout-full .priority1and2 .aside cite,
.layout-full-read article .aside cite,
.layout-full-read .priority1and2 .aside cite {
padding-left: 0;
margin-right: 0;
padding-top: .9em; } }
/*on layout-full blockquote*/
.layout-full aside.priority3,
.layout-full .views-field-field-aside, .layout-full-read aside.priority3,
.layout-full-read .views-field-field-aside {
/*tablet and up*/ }
.layout-full aside.priority3 blockquote p,
.layout-full .views-field-field-aside blockquote p, .layout-full-read aside.priority3 blockquote p,
.layout-full-read .views-field-field-aside blockquote p {
max-width: 29em;
/*fit width to paragraph width, blockquote has larger font-size, so the width needs to be smaller*/ }
@media only screen and (min-width: 749px) {
.layout-full aside.priority3 blockquote,
.layout-full .views-field-field-aside blockquote, .layout-full-read aside.priority3 blockquote,
.layout-full-read .views-field-field-aside blockquote {
margin-left: 1%;
/*align left*/ }
.layout-full aside.priority3 blockquote p,
.layout-full .views-field-field-aside blockquote p, .layout-full-read aside.priority3 blockquote p,
.layout-full-read .views-field-field-aside blockquote p {
max-width: 25em; }
.layout-full aside.priority3 cite,
.layout-full .views-field-field-aside cite, .layout-full-read aside.priority3 cite,
.layout-full-read .views-field-field-aside cite {
margin-left: 6%;
/*align cite to beginning of quote*/ } }
/* End of Typography */
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0; }
dd {
margin: 0 0 0 40px; }
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px; }
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none; }
.content {
/*reduce top-margin and font size on nested lists*/ }
.content ul, .content ol {
padding-left: 1.8em;
padding-right: 1.8em;
max-width: 36em;
font-weight: 300;
/*text-align: justify;*/
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.content ul, .content ol {
padding-left: 1.8rem;
padding-right: 1.8rem; } }
.content ul li, .content ol li {
margin-bottom: .3em; }
.content ul ul, .content ol ol {
margin-top: 0.45em;
font-size: .8em; }
.read .priority1and2,
.bleed .priority1and2,
.layout-full-read .field-name-body,
.layout-read .field-name-body {
/*set lists on article with sidebar to the same as p*/ }
.read .priority1and2 ul, .read .priority1and2 ol,
.bleed .priority1and2 ul,
.bleed .priority1and2 ol,
.layout-full-read .field-name-body ul,
.layout-full-read .field-name-body ol,
.layout-read .field-name-body ul,
.layout-read .field-name-body ol {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .priority1and2 ul, .read .priority1and2 ol,
.bleed .priority1and2 ul,
.bleed .priority1and2 ol,
.layout-full-read .field-name-body ul,
.layout-full-read .field-name-body ol,
.layout-read .field-name-body ul,
.layout-read .field-name-body ol {
margin-left: 1.8rem; } }
.read .priority1and2 aside ul li, .read .priority1and2 aside ol li,
.bleed .priority1and2 aside ul li,
.bleed .priority1and2 aside ol li,
.layout-full-read .field-name-body aside ul li,
.layout-full-read .field-name-body aside ol li,
.layout-read .field-name-body aside ul li,
.layout-read .field-name-body aside ol li {
margin: 0; }
/*remove padding around lists inside a maincontent aside*/
/*tablet and up*/
@media only screen and (min-width: 749px) {
.priority1and2 aside li, .priority1and2 .aside li, article aside li, article .aside li {
padding-right: 0; }
.read .priority1and2 aside ul, .read .priority1and2 aside ol, .read .priority1and2 .aside ul, .read .priority1and2 .aside ol,
.bleed .priority1and2 aside ul,
.bleed .priority1and2 aside ol,
.bleed .priority1and2 .aside ul,
.bleed .priority1and2 .aside ol {
padding-right: 0; } }
/*optimize spacing for many lists in a row. Used on News page of Intranet. http://alumni.rpi.edu/s/1225/2col.aspx?sid=1225&gid=1&pgid=436 */
.content .tightlist p {
margin-bottom: .4em;
/*reduce space below paragraph so that list is closer*/ }
.content .tightlist ul {
margin-top: 0em;
/*reduce space above list so that header is closer*/
margin-bottom: 1.5em;
/*increase space below to distuingish from the header of the next list*/
font-size: .8em;
/*reduce font-size so that it is smaller than paragraph header*/ }
.social {
color: white;
width: 100%;
max-width: 150px;
z-index: 2;
position: fixed;
/*position at bottom right of page */
bottom: 0;
right: 0;
/* large phone (landscape) ----------- */
/*clearflix could combine
ul:after {
display: table;
content: "";
}*/
/*this graphic has a white background */ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
.social {
display: none; } }
.social ul {
list-style-type: none;
/*could probably combine with menu rule */
width: 100%;
margin: 0;
padding: 0;
text-align: center;
clear: left; }
.social li {
display: inline;
width: 50%; }
.social a {
color: white;
cursor: pointer; }
.social .addthis_counter a {
color: black; }
/*override add this styles*/
.addthis_counter {
margin-top: .9em !important;
float: none !important; }
.follow, .share {
text-align: right;
font-size: .8em;
background-color: #333;
padding-top: 0.9em;
transform: translateY(100%);
/*transform does not work in ie8*/
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
.follow, .share {
display: none; } }
.follow li, .share li {
/*icons form two rows*/
float: left;
/*magic number to center icons*/ }
.follow li a, .share li a {
margin: 0.9em 22%; }
/* not using this anymore
close text gets spacing
.social-close {
padding: $margin;
display: inline-block;
}
*/
.socialnav {
z-index: 4; }
.socialnav a {
padding: 0.9em;
width: 50%;
display: inline-block;
float: left;
font-size: .7em;
/*facebook blue*/
background: rgba(59, 89, 152, 0.93);
/*need padding for sprites*/
padding-top: 3em; }
.socialnav a:hover {
background: #333; }
/*use sprite instead of single html image*/
.share-open-text, .follow-open-text {
background-image: url("../img/menu-icon/givingtablet-sc1d7db3c43.png");
background-size: 2.9em auto;
padding-top: 3em;
background-repeat: no-repeat;
/*screen*/ }
@media only screen and (min-width: 901px) {
.share-open-text, .follow-open-text {
background-image: url("../img/menu-icon/giving16-s7f2632750d.png"); } }
.share-open-text {
background-position: center 94%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.share-open-text {
background-position: 6px 46.5%; } }
.follow-open-text {
background-position: center 101.42%;
/*screen*/ }
@media only screen and (min-width: 901px) {
.follow-open-text {
background-position: center -4.4%; } }
@media only screen and (min-width: 901px) and (-webkit-min-device-pixel-ratio: 0) {
.follow-open-text {
background-position: center -4.7%; } }
/*this selector is fired with javascript*/
body.follow-on {
/*When activated and on hover, change text after social media icon*/
/*when one is activated, blur the non activated icon*/
/*when one is activated and non activated is hovered: unblur the non activated icon*/ }
body.follow-on .follow-toggle {
background-color: #333; }
body.follow-on .follow-toggle a {
background: #333; }
body.follow-on .follow {
opacity: 1;
z-index: 3;
padding-bottom: 55px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
body.follow-on .follow {
display: block; } }
body.follow-on .follow-toggle:hover .follow-open-text:after {
content: "Close X"; }
body.follow-on .share-toggle .socialicon {
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */ }
body.follow-on .share-toggle:hover .socialicon {
opacity: 1;
filter: alpha(opacity=100);
/* For IE8 and earlier */ }
/*set text after social media icon*/
.share-open-text:after {
content: "Share"; }
.follow-open-text:after {
content: "Follow"; }
body.share-on {
/*When activated and on hover, change text after social media icon*/
/*when one is activated, blur the non activated icon*/
/*when one is activated and non activated is hovered: unblur the non activated icon*/ }
body.share-on .share-toggle {
background-color: #333; }
body.share-on .share-toggle a {
background: #333; }
body.share-on .share {
opacity: 1;
padding-bottom: 55px;
transform: translateY(0%);
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
body.share-on .share {
display: block; } }
body.share-on .share-toggle:hover .share-open-text:after {
content: "Close X"; }
body.share-on .follow-toggle .socialicon {
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */ }
body.share-on .follow-toggle:hover .socialicon {
opacity: 1;
filter: alpha(opacity=100);
/* For IE8 and earlier */ }
/*css turned on by javascript*/
body.social-off .social {
/*with transitions it fades out. In case they have a keyboard attached, it still looks nice*/
opacity: 0;
/*don't want it to interfere with keyboard or fields*/
display: none;
/*still works with large screens, which presumably don't have on screen keyboards*/
/*screen*/ }
@media only screen and (min-width: 901px) {
body.social-off .social {
opacity: 1;
display: block; } }
/* ==========================================================================
Embedded content CSS Normalize
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */ }
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/*responsive youtube embed*/
.video-container {
position: relative;
padding-bottom: 56.3%;
/*16:9*/
height: 0; }
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.iframe-portal {
-webkit-overflow-scrolling: touch;
/*iframes should scroll*/
overflow-y: scroll;
/*iframes should scroll, but causes two scroll bars in ie10*/
/*screen*/ } }
@media only screen and (-webkit-min-device-pixel-ratio: 0) and (min-width: 901px) {
.iframe-portal {
overflow: hidden;
/*two scroll bars in chrome for windows, so hide on larger screens*/ } }
.media-wrapper {
border: 1px #ccc solid;
padding: 0.3em; }
/*minimal border on iframe*/
#content .iframe-portal iframe, .content .iframe-portal iframe {
padding-right: 0;
width: 100%;
border: none; }
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure, div.media {
margin: 0 0 0.9rem;
/* large phone (landscape) ----------- */ }
@media only screen and (min-width: 320px) and (max-width: 748px) and (orientation: landscape) {
figure, div.media {
margin: 0 auto 0.9rem;
text-align: center; } }
figure.fullimg,
.media-fullimg {
clear: left; }
.read figure, .read div.media,
.bleed .priority1and2 figure,
.bleed .priority1and2 div.media,
.layout-full-read figure,
.layout-full-read div.media, .layout-read figure, .layout-read div.media {
/*tablet-vertical*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.read figure, .read div.media,
.bleed .priority1and2 figure,
.bleed .priority1and2 div.media,
.layout-full-read figure,
.layout-full-read div.media, .layout-read figure, .layout-read div.media {
/*margin-bottom: 0; too tight*/ } }
/*add bar before caption on .read-full */
.read .layout-full .fullimg figcaption:before,
.read .layout-full .imgright figcaption:before,
.read .layout-full .field-name-field-caption:before,
.read .layout-full .media-fullimg .field-name-field-image-caption:before,
.read .layout-full .media-imgright .field-name-field-image-caption:before,
.layout-full-read .fullimg figcaption:before,
.layout-full-read .imgright figcaption:before,
.layout-full-read .field-name-field-caption:before,
.layout-full-read .media-fullimg .field-name-field-image-caption:before,
.layout-full-read .media-imgright .field-name-field-image-caption:before,
.bleed .layout-full .fullimg figcaption:before,
.bleed .layout-full .imgright figcaption:before,
.bleed .layout-full .field-name-field-caption:before,
.bleed .layout-full .media-fullimg .field-name-field-image-caption:before,
.bleed .layout-full .media-imgright .field-name-field-image-caption:before {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .layout-full .fullimg figcaption:before,
.read .layout-full .imgright figcaption:before,
.read .layout-full .field-name-field-caption:before,
.read .layout-full .media-fullimg .field-name-field-image-caption:before,
.read .layout-full .media-imgright .field-name-field-image-caption:before,
.layout-full-read .fullimg figcaption:before,
.layout-full-read .imgright figcaption:before,
.layout-full-read .field-name-field-caption:before,
.layout-full-read .media-fullimg .field-name-field-image-caption:before,
.layout-full-read .media-imgright .field-name-field-image-caption:before,
.bleed .layout-full .fullimg figcaption:before,
.bleed .layout-full .imgright figcaption:before,
.bleed .layout-full .field-name-field-caption:before,
.bleed .layout-full .media-fullimg .field-name-field-image-caption:before,
.bleed .layout-full .media-imgright .field-name-field-image-caption:before {
content: '';
border-bottom: 0.4em solid #003399;
margin-top: 1.8rem;
margin-bottom: 0.9rem;
width: 60%;
display: block; } }
aside, .aside,
.media-aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
aside, .aside,
.media-aside {
width: 28%;
margin-top: 0.9rem;
margin-bottom: 0.45rem; } }
/*space between image and main body on read with sidebar */
.read .priority1and2 .aside, .read .priority1and2 aside,
.read .priority1and2 .media-aside,
.bleed .priority1and2 .aside,
.bleed .priority1and2 aside,
.bleed .priority1and2 .media-aside,
.layout-sidebar .priority1and2 .aside,
.layout-sidebar .priority1and2 aside,
.layout-sidebar .priority1and2 .media-aside,
.layout-read .aside,
.layout-read aside,
.layout-read .media-aside,
div.sidebar .priority1and2 .maincontent .aside,
div.sidebar .priority1and2 .maincontent aside,
div.sidebar .priority1and2 .maincontent .media-aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .priority1and2 .aside, .read .priority1and2 aside,
.read .priority1and2 .media-aside,
.bleed .priority1and2 .aside,
.bleed .priority1and2 aside,
.bleed .priority1and2 .media-aside,
.layout-sidebar .priority1and2 .aside,
.layout-sidebar .priority1and2 aside,
.layout-sidebar .priority1and2 .media-aside,
.layout-read .aside,
.layout-read aside,
.layout-read .media-aside,
div.sidebar .priority1and2 .maincontent .aside,
div.sidebar .priority1and2 .maincontent aside,
div.sidebar .priority1and2 .maincontent .media-aside {
float: right;
clear: right;
padding-left: 1.8rem; }
.read .priority1and2 .aside figcaption:before, .read .priority1and2 aside figcaption:before,
.read .priority1and2 .media-aside figcaption:before,
.bleed .priority1and2 .aside figcaption:before,
.bleed .priority1and2 aside figcaption:before,
.bleed .priority1and2 .media-aside figcaption:before,
.layout-sidebar .priority1and2 .aside figcaption:before,
.layout-sidebar .priority1and2 aside figcaption:before,
.layout-sidebar .priority1and2 .media-aside figcaption:before,
.layout-read .aside figcaption:before,
.layout-read aside figcaption:before,
.layout-read .media-aside figcaption:before,
div.sidebar .priority1and2 .maincontent .aside figcaption:before,
div.sidebar .priority1and2 .maincontent aside figcaption:before,
div.sidebar .priority1and2 .maincontent .media-aside figcaption:before {
display: none; }
.read .priority1and2 .aside figcaption, .read .priority1and2 aside figcaption,
.read .priority1and2 .media-aside figcaption,
.bleed .priority1and2 .aside figcaption,
.bleed .priority1and2 aside figcaption,
.bleed .priority1and2 .media-aside figcaption,
.layout-sidebar .priority1and2 .aside figcaption,
.layout-sidebar .priority1and2 aside figcaption,
.layout-sidebar .priority1and2 .media-aside figcaption,
.layout-read .aside figcaption,
.layout-read aside figcaption,
.layout-read .media-aside figcaption,
div.sidebar .priority1and2 .maincontent .aside figcaption,
div.sidebar .priority1and2 .maincontent aside figcaption,
div.sidebar .priority1and2 .maincontent .media-aside figcaption {
width: 100%; } }
/*full article, set aside to left*/
.layout-full aside, .layout-full .aside,
.layout-full .media-aside,
.read .layout-full aside,
.read .layout-full .aside,
.read .layout-full .media-aside,
.bleed .layout-full aside,
.bleed .layout-full .aside,
.bleed .layout-full .media-aside,
.layout-full-read aside,
.layout-full-read .aside,
.layout-full-read .media-aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.layout-full aside, .layout-full .aside,
.layout-full .media-aside,
.read .layout-full aside,
.read .layout-full .aside,
.read .layout-full .media-aside,
.bleed .layout-full aside,
.bleed .layout-full .aside,
.bleed .layout-full .media-aside,
.layout-full-read aside,
.layout-full-read .aside,
.layout-full-read .media-aside {
float: left;
clear: left; } }
.layout-full aside figcaption, .layout-full .aside figcaption,
.layout-full .media-aside figcaption,
.read .layout-full aside figcaption,
.read .layout-full .aside figcaption,
.read .layout-full .media-aside figcaption,
.bleed .layout-full aside figcaption,
.bleed .layout-full .aside figcaption,
.bleed .layout-full .media-aside figcaption,
.layout-full-read aside figcaption,
.layout-full-read .aside figcaption,
.layout-full-read .media-aside figcaption {
width: 100%; }
/*margin-left for asides*/
/*read full article, add margin to aside*/
.read .layout-full .aside, .read .layout-full aside,
.bleed .layout-full .aside,
.bleed .layout-full aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .layout-full .aside, .read .layout-full aside,
.bleed .layout-full .aside,
.bleed .layout-full aside {
margin-left: 1.8rem; } }
/*correct above rule so that aside within priority1and2 is flush left*/
.layout-full .priority1and2 aside, .layout-full .priority1and2 .aside, .layout-full .field-name-body aside, .layout-full .field-name-body .aside, .layout-full-read aside, .layout-full-read .aside, .layout-read aside, .layout-read .aside {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.layout-full .priority1and2 aside, .layout-full .priority1and2 .aside, .layout-full .field-name-body aside, .layout-full .field-name-body .aside, .layout-full-read aside, .layout-full-read .aside, .layout-read aside, .layout-read .aside {
margin-left: 0; } }
.read .left,
.bleed .content .left,
.layout-full-read .left, .layout-read .left {
/*tablet-vertical*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.read .left,
.bleed .content .left,
.layout-full-read .left, .layout-read .left {
width: 72%;
float: left;
clear: left;
margin: 0 0 0.45rem;
padding-right: 0.9rem; } }
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
/*screen*/ }
@media only screen and (min-width: 901px) {
figcaption,
.field-name-field-caption,
.field-name-field-image-caption {
margin-bottom: 1.8rem; } }
/*add bar before caption on .read */
.withsidebar .fullimg figcaption:before,
.withsidebar .fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.bleed .layout-sidebar .fullimg figcaption:before,
.bleed .layout-sidebar .fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .fullimg figcaption:before,
.layout-read .fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .media-fullimg figcaption:before,
.layout-read .media-fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.field-name-field-media figcaption:before,
.field-name-field-media .field-name-field-caption:before
.field-name-field-image-caption,
.withsidebar .imgright figcaption:before,
.withsidebar .imgright .field-name-field-caption:before
.field-name-field-image-caption,
.bleed .layout-sidebar .imgright figcaption:before,
.bleed .layout-sidebar .imgright .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .imgright figcaption:before,
.layout-read .imgright .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .media-imgright figcaption:before,
.layout-read .media-imgright .field-name-field-caption:before
.field-name-field-image-caption {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.withsidebar .fullimg figcaption:before,
.withsidebar .fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.bleed .layout-sidebar .fullimg figcaption:before,
.bleed .layout-sidebar .fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .fullimg figcaption:before,
.layout-read .fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .media-fullimg figcaption:before,
.layout-read .media-fullimg .field-name-field-caption:before
.field-name-field-image-caption,
.field-name-field-media figcaption:before,
.field-name-field-media .field-name-field-caption:before
.field-name-field-image-caption,
.withsidebar .imgright figcaption:before,
.withsidebar .imgright .field-name-field-caption:before
.field-name-field-image-caption,
.bleed .layout-sidebar .imgright figcaption:before,
.bleed .layout-sidebar .imgright .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .imgright figcaption:before,
.layout-read .imgright .field-name-field-caption:before
.field-name-field-image-caption,
.layout-read .media-imgright figcaption:before,
.layout-read .media-imgright .field-name-field-caption:before
.field-name-field-image-caption {
margin-top: 1.35rem; } }
/*space between figcaption and mainbody on article with sidebar */
.read .withsidebar figcaption, .read .withsidebar .field-name-field-image-caption,
.bleed .layout-sidebar figcaption,
.bleed .layout-sidebar .field-name-field-image-caption,
.layout-read figcaption,
.layout-read .field-name-field-image-caption {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .withsidebar figcaption, .read .withsidebar .field-name-field-image-caption,
.bleed .layout-sidebar figcaption,
.bleed .layout-sidebar .field-name-field-image-caption,
.layout-read figcaption,
.layout-read .field-name-field-image-caption {
margin-left: 1.8rem;
margin-bottom: 0.9rem;
float: right; } }
.read .withsidebar .fullimg, .read .withsidebar .imgright, .read .withsidebar .media-imgright,
.bleed .layout-sidebar .fullimg,
.bleed .layout-sidebar .imgright,
.bleed .layout-sidebar .media-imgright,
.layout-read .fullimg,
.layout-read .imgright,
.layout-read .media-imgright {
font-size: .9em; }
.read .withsidebar .fullimg figcaption, .read .withsidebar .fullimg .field-name-field-image-caption, .read .withsidebar .imgright figcaption, .read .withsidebar .imgright .field-name-field-image-caption, .read .withsidebar .media-imgright figcaption, .read .withsidebar .media-imgright .field-name-field-image-caption,
.bleed .layout-sidebar .fullimg figcaption,
.bleed .layout-sidebar .fullimg .field-name-field-image-caption,
.bleed .layout-sidebar .imgright figcaption,
.bleed .layout-sidebar .imgright .field-name-field-image-caption,
.bleed .layout-sidebar .media-imgright figcaption,
.bleed .layout-sidebar .media-imgright .field-name-field-image-caption,
.layout-read .fullimg figcaption,
.layout-read .fullimg .field-name-field-image-caption,
.layout-read .imgright figcaption,
.layout-read .imgright .field-name-field-image-caption,
.layout-read .media-imgright figcaption,
.layout-read .media-imgright .field-name-field-image-caption {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .withsidebar .fullimg figcaption, .read .withsidebar .fullimg .field-name-field-image-caption, .read .withsidebar .imgright figcaption, .read .withsidebar .imgright .field-name-field-image-caption, .read .withsidebar .media-imgright figcaption, .read .withsidebar .media-imgright .field-name-field-image-caption,
.bleed .layout-sidebar .fullimg figcaption,
.bleed .layout-sidebar .fullimg .field-name-field-image-caption,
.bleed .layout-sidebar .imgright figcaption,
.bleed .layout-sidebar .imgright .field-name-field-image-caption,
.bleed .layout-sidebar .media-imgright figcaption,
.bleed .layout-sidebar .media-imgright .field-name-field-image-caption,
.layout-read .fullimg figcaption,
.layout-read .fullimg .field-name-field-image-caption,
.layout-read .imgright figcaption,
.layout-read .imgright .field-name-field-image-caption,
.layout-read .media-imgright figcaption,
.layout-read .media-imgright .field-name-field-image-caption {
margin-left: 0;
padding-left: 1.8rem;
/*set to align with asides*/
float: none; } }
.read .layout-full .imgright figcaption,
.read .layout-full .imgright .field-name-field-image-caption,
.read .layout-full .media-imgright figcaption,
.read .layout-full .media-imgright .field-name-field-image-caption,
.bleed .layout-full .imgright figcaption,
.bleed .layout-full .imgright .field-name-field-image-caption,
.bleed .layout-full .media-imgright figcaption,
.bleed .layout-full .media-imgright .field-name-field-image-caption,
.layout-full-read .imgright figcaption,
.layout-full-read .imgright .field-name-field-image-caption,
.layout-full-read .media-imgright figcaption,
.layout-full-read .media-imgright .field-name-field-image-caption {
/*screen*/ }
@media only screen and (min-width: 901px) {
.read .layout-full .imgright figcaption,
.read .layout-full .imgright .field-name-field-image-caption,
.read .layout-full .media-imgright figcaption,
.read .layout-full .media-imgright .field-name-field-image-caption,
.bleed .layout-full .imgright figcaption,
.bleed .layout-full .imgright .field-name-field-image-caption,
.bleed .layout-full .media-imgright figcaption,
.bleed .layout-full .media-imgright .field-name-field-image-caption,
.layout-full-read .imgright figcaption,
.layout-full-read .imgright .field-name-field-image-caption,
.layout-full-read .media-imgright figcaption,
.layout-full-read .media-imgright .field-name-field-image-caption {
transform: translateY(-100%); } }
figure.symmetry,
.media-symmetry,
img.symmetry {
/*tablet and up*/
/*screen*/ }
@media only screen and (min-width: 749px) {
figure.symmetry,
.media-symmetry,
img.symmetry {
font-size: 1em;
margin-bottom: 0.9rem; } }
@media only screen and (min-width: 901px) {
figure.symmetry,
.media-symmetry,
img.symmetry {
font-size: .9em;
max-width: 40em; } }
.read figure.symmetry,
.read .media-symmetry,
.read img.symmetry,
.bleed figure.symmetry,
.bleed .media-symmetry,
.bleed img.symmetry,
.layout-read figure.symmetry,
.layout-read .media-symmetry,
.layout-read img.symmetry,
.layout-full-read figure.symmetry,
.layout-full-read .media-symmetry,
.layout-full-read img.symmetry {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read figure.symmetry,
.read .media-symmetry,
.read img.symmetry,
.bleed figure.symmetry,
.bleed .media-symmetry,
.bleed img.symmetry,
.layout-read figure.symmetry,
.layout-read .media-symmetry,
.layout-read img.symmetry,
.layout-full-read figure.symmetry,
.layout-full-read .media-symmetry,
.layout-full-read img.symmetry {
margin-left: 1.8rem;
/*this corresponds to typgoraphy-p: read p margins
*/ } }
.withsidebar img.symmetry,
.withsidebar .file-symmetry,
.bleed .layout-sidebar img.symmetry,
.bleed .layout-sidebar .file-symmetry,
.layout-read img.symmetry,
.layout-read .file-symmetry {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.withsidebar img.symmetry,
.withsidebar .file-symmetry,
.bleed .layout-sidebar img.symmetry,
.bleed .layout-sidebar .file-symmetry,
.layout-read img.symmetry,
.layout-read .file-symmetry {
padding-right: 1.8rem; } }
figure.symmetry,
.media-symmetry,
img.symmetry {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
figure.symmetry,
.media-symmetry,
img.symmetry {
margin-right: 1.8rem;
clear: both; } }
.layout-full-read figure.symmetry,
.layout-full-read .media-symmetry,
.layout-full-read img.symmetry {
clear: none; }
/*margin for layout-read on priority1and2 level*/
.layout-read figure.symmetry,
.layout-read .media-symmetry,
.layout-read img.symmetry {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.layout-read figure.symmetry,
.layout-read .media-symmetry,
.layout-read img.symmetry {
margin-right: 0; } }
.read .layout-full figure.symmetry,
.read .layout-full .media-symmetry,
.read .layout-full img.symmetry,
.bleed .layout-full figure.symmetry,
.bleed .layout-full .media-symmetry,
.bleed .layout-full img.symmetry,
.layout-full-read figure.symmetry,
.layout-full-read .media-symmetry,
.layout-full-read img.symmetry {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.read .layout-full figure.symmetry,
.read .layout-full .media-symmetry,
.read .layout-full img.symmetry,
.bleed .layout-full figure.symmetry,
.bleed .layout-full .media-symmetry,
.bleed .layout-full img.symmetry,
.layout-full-read figure.symmetry,
.layout-full-read .media-symmetry,
.layout-full-read img.symmetry {
margin-left: 34%; } }
.read .symmetry figcaption, .read .symmetry .field-name-field-image-caption, .read .media-symmetry figcaption, .read .media-symmetry .field-name-field-image-caption,
.bleed .content .symmetry figcaption,
.bleed .content .symmetry .field-name-field-image-caption,
.bleed .content .media-symmetry figcaption,
.bleed .content .media-symmetry .field-name-field-image-caption,
.layout-full-read .symmetry figcaption,
.layout-full-read .symmetry .field-name-field-image-caption,
.layout-full-read .media-symmetry figcaption,
.layout-full-read .media-symmetry .field-name-field-image-caption,
.layout-read .symmetry figcaption,
.layout-read .symmetry .field-name-field-image-caption,
.layout-read .media-symmetry figcaption,
.layout-read .media-symmetry .field-name-field-image-caption {
margin-left: 0;
float: none; }
/*figure floats in paragraph block, see giving form*/
figure.small, figure.small-left,
.media-small_left_image, img.small-right, .media-small_right_image img {
margin-bottom: 0px; }
figure.small else, figure.small-left else,
.media-small_left_image else, img.small-right else, .media-small_right_image img else {
width: 40%;
max-width: 265px; }
figure.small-left,
.media-small_left_image {
float: left;
clear: left;
/*image padding set in general layout*/ }
figure.small-left img,
.media-small_left_image img {
padding-right: 0; }
/*for drupal replace with media-small_left_image*/
img.small-right, .media-small_right_image img {
float: right;
clear: right;
padding-left: 0.9em;
padding-right: 0; }
/*prevent image from enlarging, drupal wraps image in a larger containter*/
img.small-right {
width: auto; }
.fixed-img, .priority3 .fixed-img, .media-fixed_image img {
width: auto; }
/*tablet and up*/
@media only screen and (min-width: 749px) {
.read .layout-full .maincontent figure.small-left,
.layout-full-read #content .layout-full .maincontent figure.small-left,
.layout-read #content .layout-full .maincontent figure.small-left,
.bleed .layout-full .maincontent figure.small-left {
margin-left: 34%; } }
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: none;
margin: 0;
padding: 0;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
fieldset {
border: 1px solid #ccc;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border-radius: 3px; } }
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
padding: 0 0 0.45em;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
legend {
border: 0;
/* 1 */
padding: 0 0.45em 0.45em;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */
font-size: .8em; } }
/*
1. Correct font size not being inherited in all browsers.
2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
and Chrome.
3. Improve appearance and consistency in all browsers.
*/
label, .checkbox-header, .radio-header {
font-size: .7em; }
label {
cursor: pointer;
line-height: 1em;
padding-left: 2px;
color: #666;
display: block; }
/*in iModules giving form, the label comes before the checkbox. Move label to the right of checkbox*/
.imod-checkbox .imod_fieldLabel {
position: absolute;
left: 1em; }
/*no bold on checkbox label*/
.imod-checkbox .imod_fieldLabel span {
font-weight: 300; }
/*breadcrumbs should not float*/
div[id$="_pnlBreadcrumbs"] {
clear: left; }
button,
input,
select,
textarea {
font-size: .8em;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */
display: block;
margin-bottom: 0.9em;
width: 90%;
max-width: 30em;
background: #f9f9f9;
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.2);
padding: 5px;
border: #999 2px solid;
border-radius: 3px;
margin-top: 3px; }
/*-------buttons and submits -------- */
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
input.search_button {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */
margin-top: 0.9em;
display: block;
width: auto;
/*max-width: auto;*/ }
input[type="submit"], input[type="reset"],
input.search_button {
border: 0; }
input[type="submit"]:hover, input[type="reset"]:hover,
input[type="submit"]:hover,
input.search_button:hover {
border: 0; }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
/*------- input types -------- */
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */
display: inline;
margin-right: 5px;
width: auto;
margin-bottom: 1.35em; }
.imod_formWrapper input[type="radio"] {
margin-bottom: 0.45em; }
input[type="radio"]:hover, input[type="radio"]:hover + label, input[type="checkbox"]:hover {
cursor: pointer; }
input[type="radio"]:checked, input[type="radio"]:checked + label {
border-bottom: 1px solid black; }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
/* -webkit-box-sizing: content-box; 2
box-sizing: content-box;*/ }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"] {
width: auto; }
/*------- select and text area -------- */
select {
margin-top: 0.3em;
font-size: .7em; }
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
textarea:focus, input:focus {
border: black 2px solid;
background: #b3ccff; }
/*hover only on adult, otherwise you get false positives between hover and focus*/
/*screen*/
@media only screen and (min-width: 901px) {
textarea:hover, input:hover, select:hover {
border: black 2px solid; } }
/*group fields and labels based on a container */
/*checkboxes that are grouped together*/
.checkbox-header {
/*input goes inside the label*/
margin-bottom: 0.9em; }
.checkbox-header label {
/*counteracts font-size set above*/
font-size: 1em;
display: block;
vertical-align: bottom; }
.checkbox-header input[type="checkbox"] {
margin-bottom: 0.225em;
margin-top: 0.45em;
margin-right: 0; }
/*that long string is for iModules giving form*/
.radio-group label, #rg_gfid_2096_tblOuter_ctl00_ctl00_ctl00_ctl00_ctl00_tblGrouping_2097_ctl00_tr_23370_ctl00_ctl00_ctl00_fc_23370_rblAdvancedDesignations label {
display: inline;
padding-right: 0.45em; }
.input-group input[type="button"],
.input-group input[type="reset"],
.input-group input[type="submit"] {
display: inline;
padding-right: 0.45em; }
/*rules designed for the iModules giving form */
/* breadcrumbs */
/* controls the block of breadcrumbs*/
.formbreadcrumbs {
margin-bottom: 0.9rem; }
/*individual items*/
.idbmsBreadcrumb, .idbmsBreadcrumbActive {
padding: .2em;
margin: 0;
border: #666 thin solid;
padding: .7em;
font-size: .6em; }
/*different color for general and active*/
.idbmsBreadcrumb {
background: #999;
color: black; }
.idbmsBreadcrumbActive {
background: #003399;
color: white; }
/*add space beneath the breadcrumbs*/
#rg_gfid_2096_pnlBreadcrumbs {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
#rg_gfid_2096_pnlBreadcrumbs {
margin-bottom: .9em; } }
/*reduce the label size and color*/
.imod_fieldWrapper .imod_fieldLabel,
#ContentMiddle .idbmsCampaignDesignationHeader, #ContentMiddle .idbmsCampaignPaymentOptionsHeader {
font-size: .9em;
color: #666;
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.imod_fieldWrapper .imod_fieldLabel,
#ContentMiddle .idbmsCampaignDesignationHeader, #ContentMiddle .idbmsCampaignPaymentOptionsHeader {
font-size: .8em; } }
/*add a margin underneath radio buttons on giving form*/
#rg_gfid_2096_tblOuter_ctl00_ctl00_ctl00_ctl00_ctl00_tblGrouping_2097_ctl00_tr_23370_ctl00_ctl00_ctl00_fc_23370_rblAdvancedDesignations {
margin-bottom: .5em;
padding-top: 0;
/*added after the iteration #1*/ }
/*tab in the "if you selected other" */
#rg_gfid_2096_tblOuter_ctl00_ctl00_ctl00_ctl00_ctl00_tblGrouping_2097_ctl00_tr_27319 {
margin-left: 1.5em; }
/*make designation choices black to contrast with label color*/
label, .checkbox-header, .radio-header {
color: black; }
/*reduce space between other designations and designation*/
#rg_gfid_2096_tblOuter_ctl00_ctl00_ctl00_ctl00_ctl00_tblGrouping_2097_ctl00_tr_23370_ctl00_ctl00_ctl00_fc_23370_rblAdvancedDesignations {
padding-top: 0; }
/*reduce events header font-size, should be a step bigger than label*/
.EventsHeader {
/*tablet and up*/ }
@media only screen and (min-width: 749px) {
.EventsHeader {
font-size: .8em; } }
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/* Misc Style */
/* Red Line */
.header {
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #ec2027; }
.pageheader {
margin-bottom: .2em;
/*tablet-vertical*/
/*screen*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) and (orientation: portrait) {
.pageheader {
margin-bottom: .6em; } }
@media only screen and (min-width: 901px) {
.pageheader {
margin-bottom: .6em; } }
.read .pageheader,
.bleed .pageheader {
/*tablet-all*/ }
@media only screen and (min-width: 749px) and (max-width: 900px) {
.read .pageheader,
.bleed .pageheader {
margin-bottom: 2.25rem; } }
footer {
border-style: none;
/* Smartphones, except large phone landscape ----------- */ }
@media only screen and (max-width: 748px) {
footer {
border-top-style: solid;
border-top-width: thin;
border-top-color: #ec2027; } }
.button {
text-align: center;
text-transform: uppercase; }
.red {
border: 1px solid #ec2027; }
*:hover, *:focus, .menu-on nav, .social, .gridlink {
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out, text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; }
/*screen*/
@media only screen and (min-width: 901px) {
nav {
transition: none;
/*this prevents a flash of nav transition in IE*/ } }
@media print {
.mainnav, .menu-button-wrapper, .donate-button, .social, .footerbanner, ul.extra, .sitemap, .footerlogo-wrapper {
display: none; }
.header .title, .header .title .part2 {
font-size: 10px;
text-transform: uppercase;
display: inline;
color: black;
font-weight: normal; }
.header .title a:link, .header .title a:visited, .header .title .part2 a:link, .header .title .part2 a:visited {
color: black; }
.header .title .part2 {
margin-left: 2px; }
.content a:link:after, .content a:visited:after {
content: " (" attr(href) ") ";
font-size: 80%; }
.content a[href^="/"]:after {
content: " (http://rpi.edu/giving" attr(href) ") "; }
.priority3, #block-views-aside-block {
clear: both; } }
!
