/****************************************************************************
 * first, import our font from Google's fonts library                         *
 ******************************************************************************/

@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800");

/******************************************************************************
 * styles for standard HTML elements                                          *
 ******************************************************************************/

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.9em;
  color: #444444;
}

p,
pre,
blockquote,
table,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol {
  padding: 0;
  margin: 0 0 18px 0;
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  text-transform: capitalize;
}

h1 {
  font-size: 2.0em;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.6em;
}

h4 {
  font-size: 1.4em;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1.0em;
}

a,
a:visited {
  text-decoration: none;
  color: #00458c;
}

a:hover,
a:visited:hover {
  text-decoration: underline;
  color: #00458c;
}

h1 a,
h1 a:hover,
h1 a:visited,
h1 a:visited:hover {
  color: #333333;
}

img {
  padding: 0;
  margin: 0;
  border: none;
}

label {
  color: #333333;
  font-weight: 700;
  margin: 0 0 2px 0;
}

fieldset {
  border: 1px solid #aaaaaa;
  padding: 12px;
  margin: 0 0 14px 0;
}

legend {
  font-size: 1.1em;
  font-weight: 600;
  padding: 0 4px;
}

strong {
  font-weight: 700;
}

input[type="text"],
input[type="password"],
select,
textarea {
  font-family: "Open Sans", sans-serif;
  border: 1px solid #aaaaaa;
  margin: 2px 0;
  padding: 4px;
  background-color: #ffffff;
  color: #333333;
}

input[type="submit"] {
  border: 1px solid #aaaaaa;
  margin: 0 6px 0 0;
  padding: 4px 6px;
  background-color: #00458c;
  color: #ffffff;
  cursor: pointer;
}

table {
  width: 100%;
}

table thead,
table tbody,
table th,
table tr,
table td {
  border: none;
  padding: 0;
  margin: 0;
}

table tr:nth-child(even) {
  background-color: #f6f6f6;
}

table tr:nth-child(odd) {
  background-color: #f0f0f0;
}

table th,
table td {
  padding: 4px;
  vertical-align: top;
}

table th,
table th a,
table th a:visited,
table th a:hover,
table th a:visited:hover,
table thead td,
table thead td a,
table thead td a:visited,
table thead td a:hover,
table thead td a:visited:hover,
table tfoot td,
table tfoot td a,
table tfoot td a:visited,
table tfoot td a:hover,
table tfoot td a:visited:hover {
  background-color: #00458c;
  color: #ffffff;
  font-weight: 700;
}

table th img,
table thead td img,
table tfoot td img {
  margin: 0;
  padding: 2px;
}

form .field-multiple-table {
  margin: 0 0 10px 0;
}

form .field-multiple-table th.field-label {
  padding: 2px;
  margin: 0;
}

form .field-multiple-table th.field-label label {
  color: #ffffff;
  padding: 2px;
  margin: 0px;
}

/* we allow users to specify "table class=plain" to make table appear without formatting */

table.plain tr:nth-child(even),
#tinymce table.plain tr:nth-child(even) {
  background-color: transparent;
}

table.plain tr:nth-child(odd),
#tinymce table.plain tr:nth-child(odd) {
  background-color: transparent;
}

ul,
ol {
  margin: 0 0 18px 18px;
}

li {
  margin: 0 0 8px 0;
  padding: 0;
}

pre {
  padding: 8px;
  font-family: monospace;
  background: #eeeeee;
  border: 1px solid #aaaaaa;
}

code {
  padding: 2px;
  font-family: monospace;
  background: #eeeeee;
  border: 1px solid #aaaaaa;
}

blockquote {
  border-left: 2px solid #aaaaaa;
  padding: 15px;
  font-style: italic;
  background-color: #f6f6f6;
}

dt {
  font-weight: 700;
  margin: 0;
  padding: 0;
  margin: 0;
}

dd {
  margin: 0 0 10px 10px;
  padding: 0;
}

abbr {
  cursor: normal;
  border-bottom: 1px dotted #333333;
}

th abbr {
  border-bottom: 1px dotted #ffffff;
}

/******************************************************************************
 * some high-level drupal defaults                                            *
 ******************************************************************************/

div.region {
  margin: 0;
  padding: 0;
  border: none;
}

div.field {
  margin: 15px 0;
}

div.breadcrumb {
  font-weight: 500;
  text-transform: capitalize;
}

div.breadcrumb a {
  font-size: 0.9em;
}

div.ctools-button input[type="submit"],
ul.action-list input[type="submit"] {
  color: #00458c;
}

#views-preview-wrapper {
  max-width: 850px;
  overflow-x: scroll;
}

ul.tabs.secondary li {
  text-transform: capitalize;
}

div.dragdropfile-processed {
  position: relative;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}

div.dragdropfile-processed:before {
  padding: 10px;
  margin: 0;
  font-size: 1.0em;
  font-weight: 500;
  color: #aaaaaa;
  border: 1px solid #aaaaaa;
  background-color: #eeeeee;
  content: "Drag And Drop Files Here";
}

div.node-unpublished {
  background-color: #ffeeee;
  background-image: url("draft.png");
  background-repeat: repeat-y;
  background-position: center;
}

/******************************************************************************
 * the site wrapper is the outermost div for this theme                       *
 ******************************************************************************/

#site-wrapper {
  max-width: 1210px;
  margin: 10px auto;
  padding: 0 20px;
}

#site-wrapper.full-width {
  margin: 0;
  max-width: none;
}

/******************************************************************************
 * the header includes the logo, site name and site slogan                    *
 ******************************************************************************/

#header {
  display: -webkit-flex;
  display: flex;
  margin: 0 0 10px 0;
  padding: 0;
  align-items: center;
}

#header-logo {
  -webkit-flex-basis: 270px;
  flex-basis: 270px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin: 0 30px 0 0;
  padding: 0;
}

#header-logo a {
  display: block;
  margin: 20px;
  text-align: center;
}

#header-name-and-slogan {
  margin: 0;
  padding: 0;
  -webkit-flex-basis: 900px;
  flex-basis: 900px;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
}

#header-name {
  font-size: 2.4em;
  font-weight: 700;
  text-transform: capitalize;
  margin: 0;
  padding: 0;
}

#header-slogan {
  font-size: 1.4em;
  font-weight: 800;
  text-transform: uppercase;
  color: #f1b521;
  margin: 0;
  padding: 0;
}

/******************************************************************************
 * the middle wrapper includes the navigation and the page content            *
 ******************************************************************************/

#middle-wrapper {
  display: -webkit-flex;
  display: flex;
}

#navigation-button-wrapper {
  margin: 0;
  padding: 0;
  display: none;
}

#navigation-button {
  background: #00458c url("images/menu-bars-white.png") no-repeat center left 12px;
  font-size: 0.9em;
  font-weight: 500;
  padding: 12px;
  padding-left: 36px;
  color: #ffffff;
  cursor: pointer;
  margin: 0 0 10px 0;
}

#navigation-wrapper {
  -webkit-flex-basis: 270px;
  flex-basis: 270px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin: 0 30px 0 0;
  padding: 0;
}

/******************************************************************************
 * the menu wrapper includes only the site's main menu                        *
 ******************************************************************************/

div.region-menu {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 0.9em;
  font-weight: 500;
}

div.region-menu h2 {
  display: none;
}

div.region-menu ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

div.region-menu ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

div.region-menu ul li a {
  display: block;
  background: #f2f0e4 url("images/menu-bars-blue.png") no-repeat center left 12px;
  padding: 12px;
  padding-left: 36px;
  border-bottom: 1px solid #ffffff;
  color: #333333;
  text-decoration: none;
  text-transform: capitalize;
}

div.region-menu ul li a:hover {
  color: #333333;
}

div.region-menu ul li a.active {
  background: #00458c url("images/menu-bars-white.png") no-repeat center left 12px;
  color: #ffffff;
}

div.region-menu ul li ul li a {
  background: #f2f0e4;
  padding-left: 36px;
}

div.region-menu ul li ul li.expanded a {
  background-color: #f9f8f3;
}

div.region-menu ul li ul li a.active {
  background: #00458c;
  color: #ffffff;
}

div.region-menu ul li ul li ul li a {
  padding-left: 56px;
}

div.region-menu ul li ul li ul li ul li a {
  padding-left: 76px;
}

div.region-menu ul li ul li ul li ul li ul li a {
  padding-left: 96px;
}

/******************************************************************************
 * the sidebars appear directly below the menu.  they are mostly the same,    *
 * except that the contents of the first sidebar is left-justified, and the   *
 * contents of the second one are centered.                                   *
 ******************************************************************************/

div.region-sidebar-first,
div.region-sidebar-second {
  margin: 10px 0;
  padding: 0;
}

#site-wrapper.full-width div.region-sidebar-first,
#site-wrapper.full-width div.region-sidebar-second {
  margin: 10px;
}

div.region-sidebar-first div.block,
div.region-sidebar-second div.block {
  margin: 0 0 24px 0;
  padding: 0;
}

div.region-sidebar-first div.block:last-child,
div.region-sidebar-second div.block:last-child {
  margin: 0;
}

div.region-sidebar-first h2,
div.region-sidebar-second h2 {
  margin: 0 0 4px 0;
  padding: 0;
  font-size: 1.4em;
  font-weight: 500;
  text-transform: capitalize;
}

div.region-sidebar-first ul,
div.region-sidebar-second ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

div.region-sidebar-first ul li,
div.region-sidebar-second ul li {
  margin: 0;
  padding: 0;
}

div.region-sidebar-first ul li a,
div.region-sidebar-second ul li a {
  margin: 0;
  padding: 0;
  text-transform: capitalize;
}

div.region-sidebar-first ul li ul li,
div.region-sidebar-second ul li ul li {
  margin: 0 0 0 16px;
}

div.region-sidebar-first p,
div.region-sidebar-second p {
  margin: 0 0 4px 0;
  padding: 0;
}

div.region-sidebar-second {
  text-align: center;
}

/******************************************************************************
 * the body wrapper contains the above-content, two-column, three-column,     *
 * content, below-content regions                                             *
 ******************************************************************************/

#body-wrapper {
  -webkit-flex-basis: 900px;
  flex-basis: 900px;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}

#site-wrapper.full-width #body-wrapper {
  -webkit-flex-basis: auto;
  flex-basis: auto;
  margin: 0 10px 0 0;
}

/******************************************************************************
 * the above-content and below-content regions appear above and below the     *
 * two-column, three-column and content regions, but are otherwise identical  *
 ******************************************************************************/

div.region-above-content,
div.region-below-content {
  margin: 0;
  padding: 0;
}

/******************************************************************************
 * the two-column and three-column regions are identical except for their     *
 * flex-basis                                                                 *
 ******************************************************************************/

div.region-two-column-stacked-left {
  width: 50%;
  float: left;
}

div.region-two-column-stacked-right {
  width: 50%;
  float: right;
}

@media all and (max-width: 599px) {
  div.region-two-column-stacked-left, div.region-two-column-stacked-right {
    width: 100%;
    float: none;
  }
}

div.region-three-column {
  clear: both;
}

div.region-two-column,
div.region-three-column {
  display: -webkit-flex;
  display: flex;
  padding: 0;
  margin: 0;
}

div.region-two-column div.block,
div.region-three-column div.block,
.region-two-column-stacked-left div.block,
.region-two-column-stacked-right div.block,
#block-views-soe-news-soe-news-block,
#block-views-soe-events-soe-events-block {
  margin: 10px;
  padding: 0;
  background-color: #f2f0e4;
}

div.region-two-column div.block,
#block-views-soe-news-soe-news-block,
#block-views-soe-events-soe-events-block {
  -webkit-flex-basis: 50%;
  flex-basis: 50%;
}

div.region-three-column div.block {
  -webkit-flex-basis: 33.33%;
  flex-basis: 33.33%;
}

div.region-two-column div.block div.block-title,
div.region-three-column div.block div.block-title,
.region-two-column-stacked-left div.block div.block-title,
.region-two-column-stacked-right div.block div.block-title,
#block-views-soe-news-soe-news-block div.block-title,
#block-views-soe-events-soe-events-block div.block-title {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
}

div.region-two-column div.block h2,
div.region-three-column div.block h2,
.region-two-column-stacked-left div.block h2,
.region-two-column-stacked-right div.block h2,
#block-views-soe-news-soe-news-block h2,
#block-views-soe-events-soe-events-block h2 {
  margin: 0;
  padding: 10px;
  color: #00458c;
  font-size: 1.6em;
  text-transform: uppercase;
  font-weight: 700;
}

div.region-two-column div.block div.block-border,
div.region-three-column div.block div.block-border,
.region-two-column-stacked-left div.block-border,
.region-two-column-stacked-right div.block-border,
#block-views-soe-news-soe-news-block div.block-border,
#block-views-soe-events-soe-events-block div.block-border {
  height: 3px;
  margin: 0;
  background-image: url("images/title-border.png");
  border-bottom: 2px solid #ffffff;
}

div.region-three-column div.block h2 {
  font-size: 1.4em;
}

div.region-two-column div.block h2 span.word-0,
div.region-three-column div.block h2 span.word-0,
.region-two-column-stacked-left div.block h2 span.word-0,
.region-two-column-stacked-right div.block h2 span.word-0,
#block-views-soe-news-soe-news-block h2 span.word-0,
#block-views-soe-events-soe-events-block h2 span.word-0 {
  color: #f1b521;
  font-weight: 800;
}

div.region-two-column div.block div.content,
div.region-three-column div.block div.content,
.region-two-column-stacked-left div.block div.content,
.region-two-column-stacked-right div.block div.content,
#block-views-soe-news-soe-news-block div.content,
#block-views-soe-events-soe-events-block div.content {
  padding: 10px;
  font-size: 1.0em;
}

div.region-two-column div.block div.content ul,
div.region-three-column div.block div.content ul,
.region-two-column-stacked-left div.block div.content ul,
.region-two-column-stacked-right div.block div.content ul,
#block-views-soe-news-soe-news-block div.content ul,
#block-views-soe-events-soe-events-block div.content ul {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

div.region-two-column div.block div.content ul li,
div.region-three-column div.block div.content ul li,
.region-two-column-stacked-left div.block div.content ul li,
.region-two-column-stacked-right div.block div.content ul li,
#block-views-soe-news-soe-news-block div.content ul li,
#block-views-soe-events-soe-events-block div.content ul li {
  margin: 10px;
  padding: 0;
}

div.region-three-column div.block div.content ul li:before {
  content: "» ";
}

/******************************************************************************
 * the content_sidebar region                                                 *
 ******************************************************************************/

div.region-content-sidebar {
  float: right;
  clear: right;
  margin: 0;
  padding: 0;
  max-width: 250px;
}

div.region-content-sidebar div.block {
  margin: 0 0 20px 20px;
  padding: 10px;
  background-color: #f2f0e4;
  color: #444444;
  font-size: 0.9em;
}

div.region-content-sidebar div.block:last-child {
  margin: 0 0 0 20px;
}

div.region-content-sidebar div.block h2 {
  font-size: 1.3em;
  margin: 0 0 5px 0;
}

div.region-content-sidebar div.block div.content {
  max-height: 500px;
  overflow-y: auto;
}

div.region-content-sidebar div.block div.content p:last-child {
  margin: 0;
}

/******************************************************************************
 * the content region contains the main page content                          *
 ******************************************************************************/

/* drupal form items */

div.form-wrapper {
  margin: 0 0 20px 0;
}

/* drupal form fields descriptions */

div.region-content {
  margin: 10px 0;
}

div.region-content div.description {
  margin: 2px 0 0 0;
  font-size: 0.8em;
  color: #888888;
}

/* text-format fields */

div.text-format-wrapper {
  margin: 0 0 10px 0;
}

/* drupal local task tabs */

#content-tabs ul.tabs.primary {
  border-bottom: 1px solid #bbbbbb;
  border-collapse: collapse;
  height: auto;
  line-height: normal;
  list-style: none;
  margin: 10px 0;
  padding: 0 0 0 5px;
  white-space: nowrap;
}

#content-tabs ul.tabs.secondary {
  border: none;
  margin: 0 0 10px 0;
  white-space: nowrap;
}

#content-tabs ul.tabs li {
  margin: 0;
}

#content-tabs ul.tabs li a {
  color: #00458c;
}

#content-tabs ul.tabs.secondary li a.active {
  color: #00458c;
  border-bottom: 3px solid #888888;
}

/* drupal content links */

#content-links li {
  display: inline;
  padding: 0;
  margin: 0px 8px 0px 0px;
}

#content-links li a {
  border: 1px solid #aaaaaa;
  margin: 0 6px 0 0;
  padding: 4px 6px;
  background-color: #00458c;
  color: #ffffff;
  list-style: none;
  font-size: 0.8em;
  white-space: nowrap;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
}

/* drupal profile page pictures */

div.profile div.user-picture {
  margin: 0 0 20px 20px;
  padding: 0;
  background-color: #ffffff;
}

div.profile div.user-picture img {
  border: 1px solid #888888;
  margin: 0;
  padding: 10px;
}

/* image styles for content; the classes are defined in soe_core */

div.region-content .footer-text,
#tinymce .footer-text {
  font-size: 0.8em;
  font-weight: 400;
  color: #666666;
}

div.region-content h2.footer-text,
#tinymce h2.footer-text {
  font-size: 1.3em;
}

div.region-content hh3.footer-text,
#tinymce hh3.footer-text {
  font-size: 1.2em;
}

div.region-content h3.footer-text,
#tinymce h3.footer-text {
  font-size: 1.1em;
}

div.region-content h4.footer-text,
#tinymce h4.footer-text {
  font-size: 1.0em;
}

div.region-content h5.footer-text,
#tinymce h5.footer-text {
  font-size: 0.9em;
}

div.region-content h6.footer-text,
#tinymce h6.footer-text {
  font-size: 0.8em;
}

div.region-content img.plain,
#tinymce img.plain {
  border: none;
  padding: 0;
  margin: 0;
  background-color: inherit;
}

div.region-content div.field-name-body div.field-item img.left,
div.region-content div.field-name-body div.field-item div.soe-image-caption,
#tinymce img.left {
  float: left;
  clear: left;
  margin: 0 15px 15px 0;
  padding: 10px;
  border: 1px solid #888888;
  background: #ffffff;
}

div.region-content div.field-name-body div.field-item img.right,
div.region-content div.field-name-body div.field-item div.soe-image-caption.right,
#tinymce img.right {
  float: right;
  clear: right;
  margin: 0 0 15px 15px;
  padding: 10px;
  border: 1px solid #888888;
  background: #ffffff;
}

/* the preview for image fields should wrap the image in a light border */

div.region-content div.image-preview img {
  padding: 0;
  border: 1px solid #888888;
}

/* drupal's pagination widget */

div.region-content ul.pager {
  display: table;
  list-style-type: none;
  margin: 16px auto;
}

div.region-content ul.pager li {
  display: table-cell;
  margin: 2px 10px;
}

/* the drag handle in drupal's dragable tables */

div.region-content table td a.tabledrag-handle {
  margin: 0;
  padding: 2px;
}

/* lists embedded in tables */

div.region-content table ul {
  margin: 0;
}

/* justify paragraphs in node content */

div.region-content p,
#tinymce p {
  text-align: justify;
}

div.region-content div.content p:last-child {
  margin: 0;
}

/******************************************************************************
 * the footer region contains the copyright info and the footer block         *
 ******************************************************************************/

#footer-wrapper {
  margin: 0;
  padding: 0;
  background-color: #f2f0e4;
  clear: both;
}

#footer {
  max-width: 1170px;
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
  padding: 12px;
  align-items: center;
}

#footer-left {
  -webkit-flex-basis: 200px;
  flex-basis: 200px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#footer-left a {
  display: block;
  text-indent: -9999px;
  background: url("images/ucsc.png");
  width: 133px;
  height: 37px;
}

#footer-center {
  -webkit-flex-basis: 500px;
  flex-basis: 500px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#footer-center p {
  font-size: 0.8em;
  margin: 0 0 4px 0;
  padding: 0;
  color: #666666;
  text-align: left;
}

#footer-right {
  -webkit-flex-basis: 470px;
  flex-basis: 470px;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  text-align: right;
  font-size: 0.8em;
}

#footer-right p {
  text-align: right;
  padding: 0;
  margin: 0 0 2px 0;
}

/******************************************************************************
 * the autocomplete element appears when a Drupal autocomplete field is being *
 * used.                                                                      *
 ******************************************************************************/

#autocomplete {
  background-color: #ffffff;
}

#autocomplete ul {
  margin: 4px;
  padding: 0;
}

#autocomplete ul li {
  margin: 0;
  padding: 4px;
  font-size: 1.0em;
  line-height: 1.0em;
}

/******************************************************************************
 * formatting for the TinyMCE editor                                          *
 ******************************************************************************/

#tinymce {
  padding: 10px;
  font-size: 1.0em;
}

/******************************************************************************
 * formatting for the soe_news "news" page                                    *
 ******************************************************************************/

div.region-content div.view-soe-news ul {
  list-style-type: none;
}

div.region-content div.view-soe-news ul li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

div.region-content div.view-soe-news ul li {
  padding: 10px;
  margin: 0;
}

div.region-content div.view-soe-news ul li:nth-child(odd) {
  background-color: #f8f8f8;
}

div.region-content div.view-soe-news ul li:nth-child(even) {
  background-color: #f0f0f0;
}

div.region-content div.view-soe-news ul li h3 {
  font-size: 1.0em;
  margin: 0;
  padding: 0;
}

div.region-content div.view-soe-news ul li img {
  border: 1px solid #888888;
  padding: 6px;
  margin: 0 0 15px 15px;
  background-color: #ffffff;
  float: right;
  clear: right;
}

div.region-content div.view-soe-news ul li div.views-field-soe-event-speaker-name {
  font-weight: 700;
}

div.region-content div.view-soe-news ul li div.views-field-soe-event-start-time {
  color: #444444;
  font-style: italic;
}

div.region-content div.view-soe-news ul li div.views-field-body {
  margin: 0 0 15px 0;
}

/******************************************************************************
 * formatting for the soe_news block                                          *
 ******************************************************************************/

div.view-display-id-soe_news_block ul {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

div.view-display-id-soe_news_block ul li {
  margin: 10px;
  padding: 0;
}

div.view-display-id-soe_news_block ul li.views-row {
  clear: both;
}

div.view-display-id-soe_news_block ul li.views-row div.views-field-soe-news-image {
  float: left;
  clear: left;
  color: #ffffff;
  font-size: 1.4em;
  font-weight: 700;
  width: 100px;
  height: 100px;
  margin: 0px 20px 20px 0px;
  overflow: hidden;
  border: 1px solid #888888;
}

div.view-display-id-soe_news_block ul li.views-row div.views-field-title {
  text-transform: capitalize;
}

div.view-display-id-soe_news_block ul li.views-row div.views-field-title h3 {
  font-weight: 500;
  font-size: 1.0em;
  margin: 0;
  padding: 0;
}

div.view-display-id-soe_news_block div.view-footer {
  text-align: right;
  font-size: 0.9em;
  clear: both;
}

/******************************************************************************
 * formatting for the soe_news nodes                                          *
 ******************************************************************************/

div.node-soe-news-article div.field:after {
 clear: left;
}

/******************************************************************************
 * formatting for the soe_events "events" and "archive" pages                 *
 ******************************************************************************/

div.region-content div.view-soe-events div.item-list ul {
  list-style-type: none;
}

div.region-content div.view-soe-events div.item-list ul li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

div.region-content div.view-soe-events div.item-list ul li {
  padding: 10px;
  margin: 0;
}

div.region-content div.view-soe-events div.item-list ul li:nth-child(odd) {
  background-color: #f8f8f8;
}

div.region-content div.view-soe-events div.item-list ul li:nth-child(even) {
  background-color: #f0f0f0;
}

div.region-content div.view-soe-events div.item-list ul li h3 {
  font-size: 1.0em;
  margin: 0;
  padding: 0;
}

div.region-content div.view-soe-events div.item-list ul li img {
  border: 1px solid #888888;
  padding: 6px;
  margin: 0 0 10px 10px;
  background-color: #ffffff;
  float: right;
  clear: right;
}

div.region-content div.view-soe-events div.item-list ul li div.views-field-soe-event-speaker-name {
  font-weight: 700;
}

div.region-content div.view-soe-events div.item-list ul li div.views-field-soe-event-start-time {
  color: #444444;
  font-style: italic;
}

div.region-content div.view-soe-events div.item-list ul li div.views-field-body {
  margin: 0 0 10px 0;
}

/******************************************************************************
 * formatting for the soe_events node pages                                   *
 ******************************************************************************/

div.node-soe-events-event nav.soe-events-event-navigation ul {
  list-style-type: none;
  display: table;
  width: 100%;
}

div.node-soe-events-event nav.soe-events-event-navigation ul li {
  display: table-cell;
  width: 50%;
  padding: 8px;
}

div.node-soe-events-event nav.soe-events-event-navigation ul li.previous {
  text-align: left;
}

div.node-soe-events-event nav.soe-events-event-navigation ul li.next {
  text-align: right;
}

div.node-soe-events-event div.field:after {
  clear: left;
}

div.node-soe-events-event div.field-name-soe-news-image img {
  border: 1px solid #888888;
  padding: 10px;
  margin: 0 0 10px 10px;
  background-color: #ffffff;
  float: right;
  clear: right;
}

@media all and (max-width: 599px) {
  div.node-soe-events-event div.field-name-soe-news-image {
    text-align: center;
  }

  div.node-soe-events-event div.field-name-soe-news-image img {
    border: 1px solid #888888;
    padding: 10px;
    margin: 0 10px 0 0;
    background-color: #ffffff;
    float: none;
    clear: all;
    text-align: center;
  }
}

/******************************************************************************
 * formatting for the soe_events block                                        *
 ******************************************************************************/

div.view-display-id-soe_events_block li.views-row {
  clear: both;
}

div.view-display-id-soe_events_block li.views-row div.views-field-soe-event-start-time,
.event-date {
  float: left;
  clear: left;
  background-color: #f1b521;
  color: #ffffff;
  font-size: 1.4em;
  line-height: 90px;
  font-weight: 700;
  width: 90px;
  height: 90px;
  text-transform: uppercase;
  text-align: center;
  margin: 0px 20px 20px 0px;
  overflow: hidden;
}

.event-date {
  width: 100px;
	height: 100px;
}

div.view-display-id-soe_events_block li.views-row div.views-field-title {
  text-transform: capitalize;
}

div.view-display-id-soe_events_block li.views-row div.views-field-title h3 {
  font-weight: 500;
  font-size: 1.0em;
  margin: 0;
  padding: 0;
}

div.view-display-id-soe_events_block div.view-footer {
  text-align: right;
  font-size: 0.9em;
  clear: both;
}

/******************************************************************************
 * formatting for the soe_tr module                                           *
 ******************************************************************************/

div.region-content ul.soe-tr-navigation {
  list-style-type: none;
  display: table;
  width: 100%;
}

div.region-content ul.soe-tr-navigation li {
  display: table-cell;
  width: 50%;
  padding: 8px;
}

div.region-content ul.soe-tr-navigation li.previous {
  text-align: left;
}

div.region-content ul.soe-tr-navigation li.next {
  text-align: right;
}

/******************************************************************************
 * formatting for the soe_people module                                       *
 ******************************************************************************/

#soe-people-directory-letters {
  list-style-type: none;
  margin: 20px 0;
  text-align: center;
}

#soe-people-directory-letters li {
  display: inline-block;
  color: #888888;
  margin: 0;
}

#soe-people-directory-letters li a {
  margin: 10px 5px;
  font-weight: bold;
  color: #00458c;
}

#soe-people-directory-list {
  list-style-type: none;
}

#soe-people-directory-list li {
  margin: 0;
  padding: 10px;
}

#soe-people-directory-list > li:nth-child(odd) {
  background-color: #f8f8f8;
}

#soe-people-directory-list > li:nth-child(even) {
  background-color: #f0f0f0;
}

#soe-people-directory-list li.soe-people-directory-list-letter {
  background-color: transparent;
}

#soe-people-directory-list li h2 {
  text-align: center;
  margin: 0;
  padding: 0;
}

#soe-people-directory-list li h3 {
  padding: 0;
  margin: 0;
}

#soe-people-directory-list li img {
  float: right;
  clear: right;
  border: 1px solid #888888;
  background-color: #ffffff;
  width: 125px;
  height: 150px;
  padding: 6px;
  margin: 0 0 20px 20px;
}

#soe-people-directory-list li ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: none;
}

#soe-people-directory-list li ul li {
  background-color: transparent;
  margin: 5px 0px;
  padding: 0;
}

#soe-people-directory-list li br.clear {
  clear: both;
}

img.soe-people-profile-photo {
  float: right;
  clear: right;
  border: 1px solid #888888;
  padding: 10px;
  margin: 10px;
}

/******************************************************************************
 * formatting for the Google CSE block                                        *
 ******************************************************************************/

div.block-soe-google-cse {
  text-align: center;
}

div.block-soe-google-cse input {
  width: 150px;
  padding: 2px 4px;
  margin: 0;
}

div.block-soe-google-cse input[type="submit"] {
  width: auto;
  padding: 4px 8px;
}

/******************************************************************************
 * formatting for the maintenance mode page                                   *
 ******************************************************************************/

body.maintenance-page #page {
  max-width: 1170px;
  margin: 20px auto;
  padding: 0;
}

body.maintenance-page #logo-title {
  display: flex;
}

body.maintenance-page #logo-title > a {
  -webkit-flex-basis: 270px;
  flex-basis: 270px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
}

body.maintenance-page #name-and-slogan {
  -webkit-flex-basis: 900px;
  flex-basis: 900px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
}

body.maintenance-page #site-name {
  font-size: 2.4em;
  font-weight: 700;
  text-transform: capitalize;
  margin: 0;
  padding: 0;
}

body.maintenance-page #site-name a {
  color: #00458c;
}

body.maintenance-page #site-slogan {
  font-size: 1.4em;
  font-weight: 800;
  text-transform: uppercase;
  color: #f1b521;
  margin: 0;
  padding: 0;
}

body.maintenance-page #footer {
  display: none;
}

/******************************************************************************
 * handles code formatting in the new TinyMCE "code" plug-in                  *
 ******************************************************************************/

div.region-content pre code {
  border: none;
}

/******************************************************************************
 * handles code formatting in the new TinyMCE "table of contents" plug-in     *
 ******************************************************************************/

div.mce-toc {
  padding: 1em;
  margin: 0 0 1em 0;
  background-color: #f5f2f0;
  border: 0.1em solid #aaaaaa;
}

div.mce-toc h2 {
  margin: 0.2em;
  padding: 0;
  font-size: 1.2em;
  font-weight: 400;
}

div.mce-toc ul {
  margin: 0.2em;
  padding: 0 0 0 2.0em;
}

div.mce-toc ul li {
  margin: 0;
  padding: 0 0 0 0.2em;
}

/******************************************************************************
 * handles formatting of "image" fields                                       *
 ******************************************************************************/

div.region-content div.node div.field-name-field-image {
  float: right;
  clear: right;
}

div.region-content div.node div.field-name-field-image img {
  padding: 8px;
  margin: 0 0 15px 15px;
  border: 1px solid #888888;
}

div.region-content div.node div.field-name-field-image div.soe-image-caption img {
  border: none;
  padding: 0;
  margin: 0;
}

/******************************************************************************
 * handles formatting of "photo_gallery" nodes                                *
 ******************************************************************************/

div.region-content div.node-photo-gallery div.field-name-field-image {
  float: none;
  clear: none;
}

div.region-content div.node-photo-gallery div.field div.field-item {
  padding: 0;
  margin: 0;
  display: inline-block;
}

/******************************************************************************
 * handles formatting of "galleryformatter" galleries                         *
 ******************************************************************************/

div.region-content div.node div.field div.field-item div.galleryformatter img {
  padding: 0;
  margin: 0;
  border: none;
}

/******************************************************************************
 * centers the "flippy" next/previous pager                                   *
 ******************************************************************************/

ul.flippy {
  text-align: center;
}

/******************************************************************************
 * when the user resizes the browser to less than 1000px, we hide the         *
 * navigation area and show the navigation button to save screen space.       *
 ******************************************************************************/

@media all and (max-width: 999px) {
  #header-logo {
    flex-basis: 182px;
  }

  #header-name {
    font-size: 1.8em;
  }

  #header-slogan {
    font-size: 1.6em;
  }

  #middle-wrapper {
    display: block;
  }

  #navigation-button-wrapper {
    display: block;
  }

  #navigation-wrapper {
    display: none;
    margin: 0;
  }

  div.region-menu {
    margin: 0;
  }

  #body-wrapper {
    margin: 10px;
  }
}

/******************************************************************************
 * when the user resizes the browser to less than 900px, we stack the header, *
 * content columns and footer vertically.                                     *
 ******************************************************************************/

@media all and (max-width: 899px) {
  div.region-two-column,
  div.region-three-column {
    display: block;
  }

  #footer {
    display: block;
  }

  #footer-left a {
    display: block;
    margin: 10px auto;
  }

  #footer-center {
    margin: 10px;
  }

  #footer-right {
    margin: 10px auto;
    text-align: center;
  }

  #footer-right p {
    text-align: center;
  }
}

/******************************************************************************
 * when the user resizes the browser to less than 700px, we stack images      *
 * above the content rather than right-aligning it                            *
 ******************************************************************************/

@media all and (max-width: 699px) {
  #header {
    align-items: flex-start;
  }

  #header-logo {
    flex-basis: 70px;
    margin: 10px 0;
    padding: 0;
  }

  #header-logo a {
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    width: 70px;
    height: 70px;
    background: url("logo-small.png");
  }

  #header-name-and-slogan {
    flex-basis: content;
    margin: 10px;
  }

  #header-name {
    font-size: 1.6em;
  }

  #header-slogan {
    font-size: 1.4em;
  }

  div.region-content div.node div.field-name-field-image div.field-item {
    text-align: center;
  }

  div.region-content div.node div.field-name-field-image div.field-item img {
    float: none;
    clear: none;
    text-align: center;
  }

  img.soe-people-profile-photo {
    display: table;
    margin: 10px auto;
    float: none;
    clear: none;
  }
}

/******************************************************************************
 * Additional styling needed for paragraphs                                   *
 ******************************************************************************/

/* Reduce size of editor for long text. */
.field-type-paragraphs .filter-wrapper,
.field-type-paragraphs .mce-statusbar {
  display: none;
}

.field-type-paragraphs .sticky-header {
  z-index: 2;
}

.field-type-paragraphs .sticky-header label {
  color: white;
}

/* All paragraphs styling. */
.entity-paragraphs-item {
  clear: both;
}

div.entity-paragraphs-item p {
  text-align: left;
}

.entity-paragraphs-item:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.field-name-field-page-paragraphs > .field-items > .field-item {
  margin-bottom: 15px;
}

/* Remove styling from other images. */
div.region-content div.node div.entity-paragraphs-item div.field-name-field-soe-image img {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 100%;
  width: 100%!important;
  height: auto!important;
}

/* Remove float right from main styling. */
div.region-content div.node div.paragraphs-items div.field-name-field-soe-image {
  float: none;
}

/* Left Image Paragraph only. */
div.region-content div.node div.paragraphs-item-left-image-paragraph div.field-name-field-soe-image {
  width: 47.5%;
  float: left;
  margin-right: 5%;

}

div.region-content div.node div.paragraphs-item-left-image-paragraph div.field-type-text-long {
  width: 47.5%;
  float: left;
}

@media screen and (max-width: 1000px) {
  div.region-content div.node div.paragraphs-item-left-image-paragraph div.field-name-field-soe-image
  {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

@media screen and (max-width: 1000px) {
  div.region-content div.node div.paragraphs-item-left-image-paragraph div.field-type-text-long
  {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

/* Right Image Paragraph only. */
div.region-content div.node div.paragraphs-item-right-image-paragraph div.field-name-field-soe-image {
  width: 47.5%;
  float: right;
}

div.region-content div.node div.paragraphs-item-right-image-paragraph div.field-type-text-long {
  width: 47.5%;
  float: left;
  margin-right: 5%;
}


@media screen and (max-width: 1000px) {
  div.region-content div.node div.paragraphs-item-right-image-paragraph div.field-name-field-soe-image
  {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

@media screen and (max-width: 1000px) {
  div.region-content div.node div.paragraphs-item-right-image-paragraph div.field-type-text-long
  {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

/* 2 column and 3 column flex */
.paragraphs-item-3-column-paragraph .paragraphs-items,
.paragraphs-item-2-column-paragraph .paragraphs-items {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* 2 Column */
.paragraphs-item-2-column-paragraph .paragraphs-items > .entity {
  flex-basis: 49%;
  margin-right: 2%;
}

.paragraphs-item-2-column-paragraph .paragraphs-items > .entity:nth-child(even){
  margin-right: 0;
}

@media screen and (max-width: 1000px) {
  .paragraphs-item-2-column-paragraph .paragraphs-items > .entity {
    flex-basis: 100%;
    margin-right: 0;
  }
}

/* 3 Column */
.paragraphs-item-3-column-paragraph  .paragraphs-items > .entity {
  flex-basis: 32%;
  margin-right: 2%;
}

@media screen and (max-width: 1000px) {
  .paragraphs-item-3-column-paragraph  .paragraphs-items > .entity {
    flex-basis: 100%;
    margin-right: 0;
  }
}

.paragraphs-item-3-column-paragraph  .paragraphs-items > .entity:nth-child(3n+3) {
  margin-right: 0;
}

/* Add a border to make paragraphs more clear */
form .field-multiple-table {
  border: 1px solid #aaa;
}

/******************************************************************************
 * Block Teasers for Paragraphs                                               *
 ******************************************************************************/
/* Styles for all Block Teasers */
.paragraphs-item-block-teaser-paragraph .field-name-field-soe-title {
  margin-top: 0;
  font-size: 1.6em;
  padding-bottom: 3px;
  display: block;
  position: relative;
  font-weight: 300;
}

.paragraphs-item-block-teaser-paragraph {
  margin: 20px 0 0 0;
}

.paragraphs-item-block-teaser-paragraph div.field.field-name-field-soe-link a:after {
  content: " \203A\203A";
}

.paragraphs-item-block-teaser-paragraph div.field.field-name-field-soe-image img {
  vertical-align: top;
}

.paragraphs-item-block-teaser-paragraph div.field.field-name-field-soe-image {
  margin: 0;
}

.field-name-field-soe-text + .field-name-field-soe-link {
  padding-top: 0!important;
}

.field-name-field-soe-show-link {
  display: none;
}

.page-node-edit .field-name-field-soe-show-link {
  display: block;
}

/* Plain Block Teasers */
.block-teaser--plain > .content > .field {
  margin-bottom: 0;
}

.block-teaser--plain {

}

/* Classic Yellow Blue Block Teasers */
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow {
  background: #f2f0e4;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow .field-name-field-soe-title {
  color: #00458c;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0;
  border-bottom: 15px solid #fff;
  background: #fff;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow .content {
  margin-bottom: 15px;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow .field-name-field-soe-title:after {
  display: block;
  width: 50%;
  position: absolute;
  bottom: 0;
  height: 3px;
  margin: 0;
  z-index: 2;
  content: "";
  background: #00458c;
  right: 0;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow .field-name-field-soe-title:before {
  display: block;
  width: 50%;
  position: absolute;
  bottom: 0;
  height: 3px;
  margin: 0;
  z-index: 2;
  content: "";
  background: #f1b521;
  left: 0;
}

.yellow--text {
  color: #f1b521;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow .field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-yellow .field-name-field-soe-link {
  background: #f2f0e4;
  margin: 0;
  padding: 20px;
}

/* Styles for Grey Border Block  */
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border {
  background: #f2f0e4;
  padding: 0 0 20px 0;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-title {
  margin: 0;
  padding: 20px;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-link {
  margin: 0 20px;
  padding: 20px;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-link {
  background: #fff;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-text +
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-link {
  padding-top: 0;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--grey-border div.field.field-name-field-soe-image {
  width: calc (100% - 40px);
  margin: 0 20px;
}

/* Styles for Blue and Yellow Block */

.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block {
  background: #f2f0e4;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block {
  background: #00458c;
  color: #fff;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block a,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block a:hover,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block a:focus,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block a:visited {
  color: white;
  font-weight: 600;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block a,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block a:hover,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block a:focus,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block a:visited {
  color: #000;
  font-weight: 600;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block {
  background: #f1b521;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block {
  font-weight: 300;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block .content,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block .content,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block .content {
  display: flex;
  flex-wrap: wrap;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-image,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-image,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-image {
  order: 1;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block .content > a,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block .content > a,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block .content > a {
  order: 2;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-text {
  order: 3;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-link,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-link,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-link {
  order: 4;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block .content > .field,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block .content > .field,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block .content > .field {
  flex-basis: 100%;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-link,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-link,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-text,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-link {
  padding: 0 20px;
}

.paragraphs-item-block-teaser-paragraph.block-teaser--blue-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--grey-block div.field.field-name-field-soe-title,
.paragraphs-item-block-teaser-paragraph.block-teaser--yellow-block div.field.field-name-field-soe-title {
  padding-top: 20px;
}

/* Connect on Home Page */
.connect-title {
  padding: 1.5%;
  letter-spacing: 1px;
  font-size: 1.2em;
  color: #444;
  margin-top: 20px;
}

a.connect-section {
  width: 30%;
  color: #fff;
  padding: 12px 1.5%;
  display: block;
  background: #2671bd;
  float: left;
  margin-bottom: 30px;
  cursor: pointer;
}

a.connect-section:hover {
  background: #aaa;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.connect-section:nth-child(2) {
  background: #00458c;
}

.connect-section:last-child {
  padding: 12px 2.5% 12px 1.5%;
  background: #10375f;
  margin-right: -1px;
}

#block-block-29 {
  margin-right: -1px;
}

div.soe-slideshow {
  border: none!important;
}

div.region-content div.view-soe-events div.item-list ul li .addtoany img {
  border: 1px solid transparent;
  background: transparent;
  margin: 10px auto;
  padding: 0;
}

.addtoany {
    float: right;
    margin: 0 0 10px;
    clear: right;
}

.addtoany img {
  padding: 0;
  margin: 10px auto;
}

.addtoany_list > a {
  padding: 5px 0;
}

/* Fix Content when there is a sidebar */

.region-content-sidebar + .region-content {
  margin-right: 250px;
}

.region-content-sidebar #block-views-soe-news-soe-news-block .views-field-title,
.region-content-sidebar #block-views-soe-news-soe-events-block .views-field-title {
  display: block;
  clear: both;
}

div.region-content-sidebar div.block#block-views-soe-news-soe-news-block div.content {
  overflow: visible;
  max-height: none;
}

/* Add some classes to make columns */

#tinymce .soe-column-container,
.soe-column-container {
  display: flex;
  flex-wrap: wrap;
}

#tinymce .soe-column-container img,
.soe-column-container img {
    max-width: 100%!important;
    height: auto!important;
}

#tinymce .soe-4-col,
.soe-4-col {
  flex-basis: 23.5%;
  margin-right:2%;
  margin-bottom: 20px;  
}

@media screen and (max-width: 1000px) {
  .soe-4-col {    
    flex-basis: 100%;
    margin-right: 0;
  }
}

#tinymce .soe-4-col:nth-child(4n+4),
.soe-4-col:nth-child(4n+4) {
  margin-right: 0;
}

#tinymce .soe-5-col,
.soe-5-col {
  flex-basis: 18.4%;
  margin-right:2%;
  margin-bottom: 20px;
}

@media screen and (max-width: 1000px) {
  .soe-5-col {
    flex-basis: 100%;
    margin-right: 0;
  }
}

#tinymce .soe-5-col:nth-child(5n+5),
.soe-5-col:nth-child(5n+5) {
  margin-right: 0;
}

/******************************************************************************
 * Special Research Areas Section                                             *
 ******************************************************************************/

@media all and (max-width: 999px) {
  .ra-wrapper {
    word-break: break-word;
  }
}

.ra-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.ra-title, .ra-col {
  flex-basis: 20%;
  padding: 2.35%;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  background: #0c5eb1;
}

.ra-title {
  color: #fff;
  text-shadow: 0 0 2px var(--color-primary),0 0 5px var(--color-primary),0 0 4px var(--color-dark-gray);
  font-size: 110%;
}

.ra-blank.ra-title {
  background: none;
}

.ra-row > div:last-child {
  border-right: none;
}

.ra-checked {
  position: relative;
  background: #00458c;
}

.ra-checked:after {
  position: absolute;
  top: 30%;
  bottom: 0;
  left: 0;
  right: 0;
  content: "\2713"; /* use the hex value here... */
  font-size: 200%;
  color: #FFF;
  text-align: center;
}

/* Humans of BSOE */

.node-type-humans-of-bsoe h1 {
  font-size: 2.0em;
  background: #f2f0e4;
  padding: 1em 2% 0 2%;
  margin-bottom: 0;
}


.node-humans-of-bsoe > .content {
   background: #f2f0e4;
   padding: 2%;
}

.node-humans-of-bsoe > .content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.node-type-humans-of-bsoe .region-content {
  margin-top: 0;
}

div.region-content div.node.node-humans-of-bsoe div.field-name-field-image,
div.node-humans-of-bsoe div.field-name-field-humans-department,
div.node-humans-of-bsoe div.field-name-field-humans-degree-program,
div.node-humans-of-bsoe div.field-name-field-humans-place-of-birth,
div.node-humans-of-bsoe div.field-name-field-humans-under-institution,
div.node-humans-of-bsoe div.field-name-field-humans-grad-institution {
  width: 50%;
  float: left;
}

div.node-humans-of-bsoe div.field.field-name-body {
  width: 40%;
  float: right;
  background: #fff;
  margin: 0;
  padding: 4%;
}

@media all and (max-width: 999px) {
  div.node-humans-of-bsoe div.field.field-name-body,
  div.node-humans-of-bsoe div.field-name-field-humans-department,
  div.region-content div.node.node-humans-of-bsoe div.field-name-field-image {
    width: 100%;
    float: none;
    padding: 0;
    margin: 0;
  }
}

div.node-humans-of-bsoe div.field-name-field-humans-department,
div.node-humans-of-bsoe div.field-name-field-humans-degree-program,
div.node-humans-of-bsoe div.field-name-field-humans-place-of-birth,
div.node-humans-of-bsoe div.field-name-field-humans-under-institution,
div.node-humans-of-bsoe div.field-name-field-humans-grad-institution {
  padding: 0;
  margin: 0 0 5px;
}

div.node-humans-of-bsoe div.field.field-name-field-image {
  padding: 0;
  margin: 0;
}

div.region-content div.node-humans-of-bsoe div.field-name-field-image div.field-item {
  text-align: left!important;
}


div.region-content div.node.node-humans-of-bsoe div.field-name-field-image img {
  border: none;
  max-width: 100%;
  height: auto;
  padding: 0;
}

#views-live-preview div.views-row + div.views-row {
  margin-top: 1em;
}

.view-id-humans_of_the_bsoe > .view-content {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #f2f0e4;
  padding: 2% 2% 0 2%;
}

@media all and (max-width: 999px) {
  .node-humans-of-bsoe > .content,
  .node-type-humans-of-bsoe h1,
  .view-id-humans_of_the_bsoe > .view-content {
    background: #fff;
    padding: 0;
  }
}

.soe-card {
  background: #fff;
  width: 32%;
  display: block;
  flex-basis: 32%;
  margin-right: 2%;
  margin-top: 0;
  margin-bottom: 2%;
  text-align: left;
}

div.region-content .soe-card p {
  text-align: left;
}

@media all and (max-width: 999px) {
  .soe-card {
    width: 100%;
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 6%;
  }
}

.soe-card:nth-child(3n+3) {
  margin-right: 0;
}

.soe-card img {
  max-width: 100%;
  height: auto!important;
}

.soe-card .views-field-title,
.soe-card .views-field-field-humans-department,
.soe-card .views-field-body {
  padding: 0 1em;
}

.soe-card .views-field-body {
  margin-bottom: 1em;
}

.soe-card .views-field-title {
  padding-top: 1em;
  font-size: 110%;
  font-weight: 700;
}

/* Buttons */

button,
.button {
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #00458c;
  border: none;
  line-height: 1;
  vertical-align: middle;
  padding: 1em 1.5em;
  cursor: pointer;
  display: inline-block;
  transition:.5s background-color, .5s color, .2s margin;
  margin: 0 10px 10px 0;
}

a.button, .button a, button a, a.button:hover, .button a:hover, button a:hover {
  color: #fff;
}

.button-small {
  font-size: 90%;
  padding: .5em 1em;
}

.button-big {
  font-size: 120%;
  padding: 1.5em 2em;
}

.button-block {
  width: 100% !important;
  display: block;
}

button:hover,
.button:hover {
  color: white;
  text-decoration: none;
  margin-top: -2px;
  margin-bottom: 12px;
}

button:disabled,
button.disabled,
.button.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.button-success, .button-green { background-color: #008c3e; }
.button-info, .button-light-blue { background-color: #1370d0; }
.button-warning, .button-orange { background-color: #d06213; }
.button-danger, .button-red { background-color: #ff0000; }
.button-inverse, .button-black { background-color: #333; }
.button-yellow { background-color: #f1b422 }

.button-link {
  background-color: transparent;
  color: white;
  text-decoration: none;
  box-shadow: none;
}

.button-full-width {
  width: 94%;
  padding-right: 3%;
  padding-left: 3%;
  margin-right: 0;
  margin-left: 0;
}

.button-link:hover:not(:disabled) {
  background-color: transparent;
  color: white;
  text-decoration: none;
  box-shadow: none;
}

.page-node-3899 div.field.field-name-soe-event-start-time, .page-node-3899 div.field.field-name-soe-event-organizer {
  margin: 0;
}

div#block-soe-video-blocks-1 {
    background: #00458c;
    padding: 0 0 10px 0;
    display: block;
    color: white;
}

.block-soe-video-blocks .block-title, .block-soe-video-blocks .content {
    padding: 10px;
}

div.block-soe-video-blocks div.content p.soe-video-blocks-title {
    bottom: 10px;
    left: 16px;
    max-width: calc(100% - 40px);
    width: calc(100% - 40px);
    left: 15px;
}

div.block-soe-video-blocks div.content p.soe-video-blocks-video {
    border: none!important;
}

div.block-soe-video-blocks div.content p.soe-video-blocks-video img {
    width: calc(100% - 20px);
    padding: 0 10px;
}

div.block-soe-video-blocks div.content p.soe-video-blocks-title {
  left: 15px!important;
  bottom: 5px!important;
}

div.block-soe-video-blocks div.content p.soe-video-blocks-button {
    margin: -54px 0 0 -36px!important;
    opacity: 0.7!important;;
}

div.block-soe-google-cse input[type="submit"] {
    width: auto;
    padding: 10px 18px;
    font-size: 100%;
    border: none;
}

div.block-soe-google-cse input {
    width: 165px;
    padding: 10px 6px;
    margin: 0;
}

div#block-soe-google-cse-soe-google-cse {
    margin-top: 30px;
}

.view-second-harvest td {
    padding: 5px 40px 5px 5px;
}

/* Home Page Videos */

.node-video .submitted {
    display: none;
}

.view-id-videos .views-field-field-image {
    float: left;
    clear: left;
    color: #ffffff;
    font-size: 1.4em;
    font-weight: 700;
    width: 100px;
    height: 100px;
    margin: 0px 20px 20px 0px;
    overflow: hidden;
}

.views-field-body .field-content {
  overflow: hidden;
}

.view-id-videos .views-field-title {
  text-transform: capitalize;
}

.view-id-videos .views-row {
  clear: both;
  margin: 10px;
}

div.view-id-videos div.view-footer {
    text-align: right;
    font-size: 0.9em;
    clear: both;
}

div#block-views-videos-block {
    background: white;
}

#block-views-videos-block .content {
  padding-left: 0;
}

#block-views-videos-block .block-border {
  margin-right: 20px;
}

#block-views-videos-block .views-row, #block-views-videos-block .view-footer {
  margin-left: 0;
}

div.view-display-id-soe_news_block ul li.views-row div.views-field-soe-news-image {
  border: none;
  background: url(https://www.soe.ucsc.edu/sites/default/files/baskin-icon-news.png) center center no-repeat;
  background-size: 100px 100px;
}

div.view-display-id-soe_events_block li.views-row div.views-field-soe-event-start-time {
  width: 100px;
  height: 100px;
}

/* Department News */
.department-news__image:after,
.department-news__image:before,
.department-news__body:after,
.department-news__body:before,
.department-news__row:after,
.department-news__row:before {
  content: "";
  display: table;
  clear: both
}

.department-news__row {
  padding-top: 16px;
  border-top: 1px solid lightgray;
}

.department-news__image img {
  width: 100%;
  height: auto;
  border: 1px solid lightgray;
  margin-top: 16px;
}

.view .department-news__image img {
  width: auto;
}

.department-news__image img:first-of-type {
  margin-top: 0;
}

.department-news__image,
.department-news__body {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.department-news__image {
  padding-right: 16px;
  padding-bottom: 16px;
}

.view .department-news__image {
  width: 120px;
}

.view .department-news__body {
  width: calc(100% - 120px)!important;
  margin-bottom: 2em;
}

@media (min-width:601px) {
  .department-news__image {
    width: 33.33333%
  }
  .department-news__body {
    width: 66.66666%
  }
  .view .department-news__image {
    width: 120px;
  }
  .view .department-news__body {
    width: calc(100% - 120px)!important;
    margin-bottom: 2em;
  }
}

@media (min-width:993px) {
  .department-news__image {
    width: 24.99999%
  }
  .department-news__body {
    width: 74.99999%
  }
  .view .department-news__image {
    width: 120px;
  }
  .view .department-news__body {
    width: calc(100% - 120px)!important;
    margin-bottom: 2em;
  }
}

div#block-views-news-by-department-block {
  margin-top: 2em;
}

@media (min-width:0) {
  #block-views-news-by-department-block .department-news__image {
    width: 120px!important;
  }
  #block-views-news-by-department-block .department-news__body {
    width: calc(100% - 120px)!important;
    margin-bottom: 2em;
  }
}

#block-views-news-by-department-block .department-news__image img {
  width: auto;
}