January 20, 2022

/* — HEADER — */
.container-logo, .container-nav, .container-topnav {
padding: 0 !important;
}

/* — LOGO — */
.container-logo .theme-logo {
max-width: 280px !important;
padding-top: 0.25rem !important;
padding-bottom: 0 !important;
margin-top: 65px !important;
}

@media screen and (max-width: 63.9375em) {
.container-logo .theme-logo {
max-width: 200px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
top: 16px !important;
margin-top: 0 !important;
}
}

@media screen and (max-width: 39.9375em) {
.container-logo .theme-logo {
max-width: 175px !important;
padding-top: 0.125rem !important;
padding-bottom: 0 !important;
}
}

/* — POST NO DATE —- */
/*Remove Post Date from Event Pages – This is stop-gap measure until I create a new event post template */

.postid-2643 .story-date,
.postid-2540 .story-date,
.postid-2814 .story-date,
.postid-2850 .story-date,
.postid-2972 .story-date,
.postid-3082 .story-date,
.postid-3222 .story-date,
.postid-3240 .story-date,
.postid-3429 .story-date,
.postid-3489 .story-date,
.postid-3622 .story-date,
.postid-3557 .story-date,
.postid-3739 .story-date,
.postid-3754 .story-date,
.postid-3779 .story-date,
.postid-3795 .story-date,
.postid-3861 .story-date,
.postid-3876 .story-date,
.postid-3903 .story-date,
.postid-3949 .story-date,
.postid-4022 .story-date,
.postid-4071 .story-date,
.postid-4095 .story-date,
.postid-4112 .story-date,
.postid-4144 .story-date,
.postid-4166 .story-date,
.postid-4265 .story-date,
.postid-4768 .story-date,
.postid-4303 .story-date,
.postid-4842 .story-date,
.postid-4863 .story-date,
.postid-4743 .story-date,
.postid-4828 .story-date,
.postid-4918 .story-date{
display: none;
}

/* — NAVIGATION MENU — */
/* — Adding temp fix for nav overlapping logo — */

@media only screen and (min-width:64em) and (max-width: 85em) {
.container-nav li.nav-item {
margin-left: 2rem;
}
}

@media only screen and (min-width:64em) and (max-width: 85em) {
.container-nav #main-nav {
display: flex;
/*width: 68%;*/
}
}

/* — SITEWIDE STYLING — */

p {
margin: 0 0 1.2rem 0;
}

/* EVENT PAGE STYLING ———————————————————— */

.back-button a {
display: inline-block;
background-color: #bf5700;
color: white;
padding: 0.2rem 1rem;
margin-left: 0;
margin-right: 0;
text-align: center;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 0.8em;
transition-property: color, background-color;
transition-duration: 300ms;
transition-timing-function: ease-out;
&:hover {
color: white !important;
background-color: #007095;
text-decoration: none;
}
&::before {
position: relative;
content: “\f053”;
font-family: “Font Awesome 5 Pro”;
-webkit-font-smoothing: antialiased;
margin-right: 0.5rem;
}
}

.cpsh-current-seminar {
display: grid;
grid-template-columns: 25% 60% !important;
align-items: flex-start;
margin: 2em 0;
align-self: start;
padding: 0;

}

.cpsh-current-seminar div {
padding: 1rem 3%!important;
align-self: start !important;

}

.cpsh-current-seminar img {
width: 16rem;
height: 18rem;
max-width: 100%;
object-fit: cover;
}

.cpsh-current-seminar h5 {
margin-bottom: 0.3rem;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
}

.cpsh-current-seminar h2 {
font-size: 1.5em;
margin-bottom: 0.3rem;
}

.cpsh-current-seminar h4 {
margin: 0;
font-weight:normal;
font-size: 1em;
}

.cpsh-current-seminar h6::before {
content: “Seminar Series | “;
text-transform: uppercase;
}

.cpsh-current-seminar h6 {
font-size: 1em;
font-weight: bold;
}

.cpsh-current-seminar p {
margin-top: 1rem;
line-height: 1rem;
margin-bottom: 0;
font-size: 1em;
}

.cpsh-current-seminar p:last-child a {
display: inline-block !important;
background-color: #bf5700;
color: white;
padding: 0.5rem 1rem;
margin-left: 0;
margin-right: 0;
text-align: center;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 0.8em;
transition-property: color, background-color;
transition-duration: 300ms;
transition-timing-function: ease-out;
&:hover {
color: white !important;
background-color: #007095;
text-decoration: none;
}
}

@media screen and (min-width: 0px) and (max-width: 800px) {.cpsh-current-seminar {
display: block;
}}

@media screen and (min-width: 0px) and (max-width: 800px) {
.cpsh-current-seminar img {
display: block;
margin-left: 2rem;
margin-bottom: 0.5rem;
width: auto;
object-fit: cover;
aspect-ratio: 4/3;
}}

/* Spotlight Event */

.cpsh-event-spot {
display: grid;
grid-template-columns: 25% 60% !important;
align-items: flex-start;
margin: 2em 0;
align-self: start;
padding: 0;
background-color: #005f86;
color:#ffffff;

}

.cpsh-event-spot div {
padding: 1rem 3%!important;
align-self: start !important;
}

.cpsh-event-spot img {
width: 16rem;
height: 18rem;
max-width: 100%;
object-fit: cover;
}

.cpsh-event-spot a {
color:#ffffff;
text-decoration: underline;
}

.cpsh-event-spot h2 {
font-size: 1.5em;
color:#ffffff;
margin-bottom: 0.3rem;
}

.cpsh-event-spot h4 {
margin: 0.5rem 0 0.5rem 0;
color:#ffffff;
font-weight:normal;
font-size: 1em;
}

.cpsh-event-spot h5 {
margin-bottom: 0.3rem;
font-size: 1em;
}

.cpsh-event-spot h6::before {
content: “Special Event | “;
text-transform: uppercase;
}

.cpsh-event-spot h6 {
font-size: 1em;
font-weight: bold;
}

.cpsh-event-spot p {
margin-top: 1rem;
line-height: 1rem;
margin-bottom: 0;
font-size: 1em;
}

@media screen and (min-width: 0px) and (max-width: 800px) {.cpsh-event-spot {
display: block;
}}

@media screen and (min-width: 0px) and (max-width: 800px) {
.cpsh-event-spot img {
display: block;
margin-left: 2rem;
margin-bottom: 0.5rem;
width: auto;
object-fit: cover;
aspect-ratio: 4/3;
}}

/* CPSH BUTTON */

.cpsh-button {
display: inline-block;
background-color: #bf5700;
border: 2px solid #bf5700;
padding: 0.5rem 0.5rem;
margin: 2rem 0 0 0 !important;
text-align: center;
transition: .2s ease;
width: 20%;

}

.cpsh-button:hover {
background-color: #007095;
border: 2px solid #007095;
transition: .2s ease-in-out;
}

.cpsh-button a {
text-decoration: none !important;
color: #ffffff;
font-weight: 600;
transition: .2s ease;
/* this next five lines makes a 2em area around the text clickable. */
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}

.cpsh-button:hover a {
color: #ffffff;
transition: .2s ease;
}

@media screen and (min-width: 0px) and (max-width: 1200px) {
.cpsh-button {
width:10rem;
margin: 1rem 0 0 0 !important;
}
}

/* HOME PAGE STYLING FOR EVENTS ———————————————————— */
/*** Adapted from the events page styling ***/

.cpsh-home-seminar {
display: grid;
grid-template-columns: 25% 60% !important;
align-items: flex-start;
align-self: start;
margin-bottom: 2rem;
}

.cpsh-home-seminar img {
width: 8rem;
height: 8rem;
object-fit: cover;
}

.cpsh-home-seminar h5 {
margin-bottom: 0;
font-size: 0.9em;
font-weight: 600;
}

.cpsh-home-seminar h2 {
font-size: 1em;
font-weight: 600;
line-height: 1.4rem;
margin-bottom: 0.2rem;
color: #bf5700;
}

.cpsh-home-seminar h4 {
font-style: italic;
font-size: 0.9em;
font-weight: 400;
margin-bottom: 0;
margin-left: 0.3rem;
}

.cpsh-home-seminar h6 {
font-size: 0.9rem;
font-weight: 800;
}

.cpsh-home-seminar h6::before {
content: “CPSH Seminar Series | “;
text-transform: uppercase;
}

.cpsh-home-seminar p {
margin-top: 0.6rem;
line-height: 1rem;
margin-bottom: 0;
font-size: 0.9em;
}

.cpsh-home-seminar:last-child p a {
display: inline-block;
background-color: #bf5700;
color: white;
padding: 0.4rem 1rem;
margin-left: 0;
margin-right: 0;
text-align: center;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 0.8em;
transition-property: color, background-color;
transition-duration: 300ms;
transition-timing-function: ease-out;
&:hover {
color: white !important;
background-color: #007095;
text-decoration: none;
}
}

/*
.back-button a {
display: inline-block;
background-color: #bf5700;
color: white;
padding: 0.2rem 1rem;
margin-left: 0;
margin-right: 0;
text-align: center;
text-transform: uppercase;
font-weight: 600 !important;
font-size: 0.8em;
transition-property: color, background-color;
transition-duration: 300ms;
transition-timing-function: ease-out;
&:hover {
color: white !important;
background-color: #007095;
text-decoration: none;
}
&::before {
position: relative;
content: “\f053”;
font-family: “Font Awesome 5 Pro”;
-webkit-font-smoothing: antialiased;
margin-right: 0.5rem;
}
}
*/

@media screen and (min-width: 600px) and (max-width: 1000px) {
.cpsh-home-seminar {
display: grid !important;
grid-template-columns: auto auto !important;
align-items: flex-start;
align-self: start;
}}

@media screen and (min-width: 600px) and (max-width: 1000px) {
.cpsh-home-seminar h2{
font-size: 1em !important;
font-weight: 600 !important;
line-height: 1.4rem !important;
margin-bottom: 0.2rem !important;
}}

@media screen and (min-width: 0px) and (max-width: 600px) {.cpsh-home-seminar {
display: block !important;
}}

@media screen and (min-width: 0px) and (max-width: 600px) {.cpsh-home-seminar img {
display: block !important;
width: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
}}

@media screen and (min-width: 0px) and (max-width: 600px) {
.cpsh-home-seminar h2{
font-size: 1em !important;
font-weight: 600 !important;
line-height: 1.4rem !important;
margin-bottom: 0.2rem !important;
}}

/* Extra Styling for Short Talks */

.cpsh-home-short-talk .wp-block-media-text {
margin-top: 2rem;
}

.cpsh-home-short-talk h3 {
font-size: 1.5em;
font-weight: 800;
}

.cpsh-home-short-talk h6 {
font-size: 0.9rem;
font-weight: 800;
margin-bottom: 1.5rem;
}

/* Extra styling to spotlight special event */

.cpsh-home-spot {
border: 1px solid #005f86;
margin: -1rem -1rem 1rem -1rem;
padding:1rem;
}
.cpsh-home-spot h6::before {
content: “Special Event | “;
text-transform: uppercase;
}

/* Figure Caption Styling
———————————————————— */

.wp-caption .wp-caption-text {
font-size: 100%;
color: #000000;
text-align: left;
background-color: #ffffff;
padding-top: 8px;
margin: 10px;
font-weight: 700;
}

/*Reduce caption cont. The wp-caption markup may be deprecated. The following works with new WP blocks. Note, the second part here corrects formatting where the image has no alignment. */

.wp-block-image .aligncenter figcaption, .wp-block-image .alignleft figcaption, .wp-block-image .alignright figcaption, .wp-block-image.is-resized figcaption, .wp-block-embed figcaption {
/* display: table-caption;
caption-side: bottom; */
font-weight: 500;
font-size: 0.9em;
color: #666;
text-align: left;
}

.wp-block-image figcaption {
display: table-cell;
caption-side: bottom;
font-weight: 500;
font-size: 0.9em;
color: #666;
text-align: left;
}

/* Fix Embedded Videos
*/

.wp-block-embed.alignright {
float: right !important;
text-align: right;
margin: 0 0 1em 2em;
}

.wp-block-embed.alignleft {
float: left !important;
text-align: left;
margin: 0 0 1em 2em;}

/* Block Groups with Colored Backgrounds. This adds a little spacing around the group, and clears extra margins around the bottom —– */

.colored-group-box {
padding: 1.5rem;
margin: 1rem;
}

.colored-group-box p {
margin: 0;
padding-bottom: 1rem;
}

.colored-group-box ul {
margin-bottom: 0px;
}

.colored-group-box .wp-block-button a:hover{
color: #ffffff;
}

/* A custom style for making a 4:5 cutout of an image. For small screens the image switches to 1:1 square cutout. */

.people-4-5-tile img{
aspect-ratio: 4/5;
object-fit: cover;
}

@media screen and (min-width: 0) and (max-width: 641px) {
.people-4-5-tile img{
aspect-ratio: 1/1;
object-fit: cover;
}
}

/* Use with people-4-5-tile. Sets tile size to 30 percent. Changes responsively to inline centered image. */

.people-4-5-tile-30 {
max-width: 25%;
margin-bottom: 0;
}

@media screen and (min-width: 0) and (max-width: 641px) {
.people-4-5-tile-30 {
max-width: 100%;
display: flex;
justify-content: center;
}
}

/* —- Styling for External Opps page —- */

.external-opportunities-column h2 {
margin-bottom: 1em;
}

.external-opportunities-column p {
margin-bottom: 0.2em;
}

/* Styling for people page. This is now set to apply to that page only although most blocks are still marked with class people-column-block, now lost */

.page-id-25 .wp-block-column {
align-self: start;
}

.page-id-25 .wp-block-columns h2{
font-size: 1.625rem;
font-weight: bold;
margin-bottom: 0.3em;
}

.page-id-25 .wp-block-columns p{
margin-bottom: 0.5em;
}

.page-id-25 .wp-block-image img{
width: 10em;
aspect-ratio: 4/5;
object-fit: cover;
}

/* COPY FOR NEW VERSION PEOPLE PAGE */

.page-id-4143 .wp-block-media-text, .page-id-25 .wp-block-media-text {
display: grid;
grid-template-columns: 10em 70% !important;
align-items: flex-start;
margin: 3rem 0 4rem 0;
align-self: start;

}

.page-id-4143 .wp-block-media-text__content, .page-id-25 .wp-block-media-text__content {
padding: 0 2em;
}

.page-id-4143 .wp-block-media-text h2, .page-id-25 .wp-block-media-text h2{
font-size: 1.4rem !important;
font-weight: 700;
margin: 0;
line-height: 1.5 !important;
}

.page-id-4143 .wp-block-media-text p, .page-id-25 .wp-block-media-text p{
font-size: 1em !important;
margin-bottom: 0.2rem;
line-height: 1.5 !important;

}

.page-id-4143 .wp-block-media-text img, .page-id-4143 .wp-block-media-text img{
aspect-ratio: 4/5;
object-fit: cover;
}

@media screen and (min-width: 0) and (max-width: 641px) {.page-id-4143 .wp-block-media-text, .page-id-25 .wp-block-media-text {
display: inline;
}
}

@media screen and (min-width: 0) and (max-width: 641px) {.page-id-4143 .wp-block-media-text div, .page-id-25 .wp-block-media-text div {
padding-left: 1em;
margin-bottom: 2em!important;
}
}

@media screen and (min-width: 0) and (max-width: 641px) {.page-id-4143 .wp-block-media-text img, .page-id-25 .wp-block-media-text img{
width:15rem;
margin-left:1em;
margin-bottom: 0.5em;
}
}

@media screen and (min-width: 0) and (max-width: 641px) {.page-id-4143 .wp-block-media-text h2, .page-id-25 .wp-block-media-text h2 {
margin-bottom: 0!important;
}
}

/* Reduce width of main content for single posts */

.single-post #page-body {
max-width: 60rem;
}

/* Styling for three column pullquote grid */

.cpsh-pullquote-grid figure {
padding: 0.5rem;
}

.cpsh-pullquote-grid div{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.cpsh-pullquote-grid p {
font-size: 1em;
text-align: left;
}

/* Styling for News archive page */

.wp-block-latest-posts {
max-width: 85%;
}

.wp-block-latest-posts img {
width: 14rem;
height: 10rem;
object-fit: cover;
float: left;
margin: 0 2rem 1.5rem 0;
}

/* Styling for Home page latest posts list */

.home .wp-block-latest-posts {
margin-left: 0 !important;
line-height: 1.4rem;
}

.home .wp-block-latest-posts a, time {
font-weight: 600;
}

.home .wp-block-latest-posts__post-excerpt {
margin: 0.4em 0 1em;
font-size: 0.9em;

}

/* Styling for colored group box. */
/*align-items: flex-start;
margin: 1.3em 0;
align-self: start;
padding: 1.5rem;
margin: 1rem;*/

.colored-media-box {
display: grid;
grid-template-columns: 1fr 3fr;
background: #EBE8E2;
padding: 1.5em;
}

/**** CUSTOM KILL BOTTOM MARGIN OR PADDING ****/

.no-bottom {
margin-bottom: 0;
padding-bottom: 0;
}

/* And another for grouped paragraph blocks, with a little space at the end */

.no-bottom-p p {
margin-bottom: 0;
padding-bottom: 0;
}

.no-bottom-p {
margin-bottom: 1rem;
}

/*** STYLING FOR EMBEDDED VIDEOS ***/

.cpsh-embed-right {
width: 50%;
float: right;
margin: 0.5em 0 0.5em 1em;
}

@media screen and (min-width: 0) and (max-width: 641px) {
.cpsh-embed-right {
width: 100%;}
}

.cpsh-embed-right figcaption {
font-weight: 500;
font-size: 0.9em;
color: #666;
text-align: left;
}

/*** STYLING FOR TABLE ON COURSES PAGE ***/

.courses-table td{
vertical-align:top;
}

/**** GRID-STYLE BUTTONS ****/

/* — It’s a four column grid with button-like styling. Collapses — */

.cpsh-buttons-grid div {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 0.9rem;
margin: 1.5rem 0 2rem;
}

@media screen and (min-width: 586px) and (max-width: 1160px) {
.cpsh-buttons-grid div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 1rem;
}
}

@media screen and (max-width: 585px) {
.cpsh-buttons-grid div {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
}
}

.cpsh-buttons-grid p {
display: inline-block;
background-color: white;
border: 2px solid #bf5500;
padding: 0.5rem 1rem;
margin-left: 0;
margin-right: 0;
margin-bottom: 1rem;
transition: .2s ease;
}

.cpsh-buttons-grid p:hover {
background-color: #bf5500;
transition: .3s ease-in-out;
}

.cpsh-buttons-grid a {
color: #bf5500;
font-weight: bold;
font-size: 0.9rem;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 1px;
vertical-align: top;
transition: .2s ease;
/* this next five lines makes a 2em area around the text clickable. */
display: inline-block;
position: relative;
z-index: 1;
padding: 2em;
margin: -2em;
}

.cpsh-buttons-grid p:hover a {
color: white;
transition: .3s ease;
}

.cpsh-table-pale td:first-child {
width: 20%;
font-weight: bold;
}

.cpsh-table-pale tr:nth-child(even) {
background-color: #F5F8FA;
}

/*** STYLING FOR MEDIA AND TEXT BLOCK ***/

.cpsh-media-text {
display: grid !important;
grid-template-columns: 30% 60% !important;
align-items: flex-start;
margin-bottom: 2rem;
}

.cpsh-media-text .wp-block-media-text__media {
align-self: start;
margin-top: 1rem;
}

.cpsh-media-text img {
width: 15rem;
height: 17rem;
max-width: 100%;
object-fit: cover;
}

.cpsh-media-text p {
font-size: 1em;
line-height: 1.8em;
}

.cpsh-media-text h2 {
color: #bf5700;
font-size: 1.6em;
margin-bottom: 0.2rem;
}

/*** END MEDIA AND TEXT BLOCK ***/