/* General styles to reset CSS before we begin. */

img, table, tr, td, div, a, form { border: 0; padding: 0; margin: 0; }
a { text-decoration: none; color: black; }


/* Body, main page container, and page (which splits into sidebar and content). */

body
   { font-family: 'Source Sans', helvetica, arial, sans-serif;
     margin: 0; background-color: white; }
#container { margin: auto; }
@media (min-width: 768px) { #container { width: 95%; } }
#page { display: flex; flex-direction: row; align-items: flex-start; margin: 0; }


/* Section banner (except section-specific colours). */

#colour-banner { display: none; }
#section-banner-mobile { display: block; margin-top: 10px; }
#section-banner-mobile img { display: block; width: 100%; height: auto; }
#section-banner-desktop { display: none; }

@media (min-width: 768px) {
   #colour-banner { display: block; height: 0.75vw; }
   #section-banner-desktop { display: block; }
   #section-banner-desktop img { display: block; width: 100%; height: auto; }
   #section-banner-mobile { display: none; }
}


/* Navigation breadcrumbs (except section-specific colours). */

#crumbs
   { font-family: 'Source Sans'; position: sticky; top: 5px;
     margin: 1em 5px 0 5px; padding: 8px; border: 5px solid white; border-radius: 10px;
     color: #606060; background-color: #f8f8f8; }
#crumbs .crumb { font-size: 120%; line-height: 120%; }
#crumbs .crumb a
   { color: #606060; background-color: transparent; font-weight: 300;
     padding: 0; border-radius: 0; }
#crumbs .crumb a:hover { color: #202020; border-bottom: 1px solid #202020; }
#crumbs .crumb-divider { padding: 0 7px; }

@media (min-width: 768px)
   { #crumbs { position: static; margin: 1em 0 0 0; padding: 0.5vw; border: 0; }
     #crumbs .crumb, #crumbs .crumb-divider { font-size: 1.5vw; }
     #crumbs .crumb-divider { padding: 0.6vw; } }


/* Sidebar. */

#sidebar { display: none; }
@media (min-width: 768px) {
   #sidebar { display: block; flex-basis: 28%; width: 100%; position: sticky; top: 15px;
              margin-bottom: 50px; margin-top: 15px; font-size: 1.3vw; }
   #sidebar .active { background-color: #eeeeee; }
}


/* Side-menu (except section-specific colours). */

.side-menu
   { font-family: 'Source Sans'; font-weight: 300; margin-bottom: 1em; position: sticky; }
.side-menu p.side-menu-header
   { font-weight: 500; margin: 0; padding: 5px; font-size: 120%; line-height: 120%; }
.side-submenu.expanded { background-color: #f0f0f0; border-top: 1px solid #c0c0c0; }
.side-submenu.expanded .side-submenu.expanded
   { background-color: #d8d8d8; border-top: 1px solid #a8a8a8; }
.side-menu a, .side-menu span
   { display: block; padding: 3px 5px; border-top: 1px solid #f0f0f0; }
.side-menu .side-submenu.expanded a, .side-menu .side-submenu.expanded span
   { border-top: 1px solid transparent; }

.side-menu a:hover { background-color: #f4f4f4; }
.side-menu .side-submenu.expanded a:hover { background-color: #e4e4e4; }
.side-menu .side-submenu.expanded .side-submenu.expanded a:hover { background-color: #cccccc; }

.side-menu a.bestmatch,
.side-menu .side-submenu.expanded a.bestmatch,
.side-menu .side-submenu.expanded .side-submenu.expanded a.bestmatch
   { background-color: grey; color: white; border-right: 5px solid black; }

.side-menu .side-submenu a.side-submenu-header { position: relative; padding-right: 25px; }
.side-menu .side-submenu a.side-submenu-header::after
   { content: "⟩";  position: absolute; top: 0; right: 10px; transform: rotate(90deg) scale(2.0, 1.0);
     font-size: 120%; font-weight: 400; color: #c0c0c0; }
.side-menu .side-submenu.expanded > a.side-submenu-header,
.side-menu .side-submenu.expanded > span.side-submenu-header { font-weight: 400; }
.side-menu .side-submenu.expanded > a.side-submenu-header::after
   { transform: rotate(-90deg) scale(2.0, 1.0); top: -1px; right: 12px;
     font-weight: 700; color: black; }


/* Content. */

#content { margin: 0 10px; }
@media (min-width: 768px)
   { #content { flex-basis: 72%; margin: 0 10% 0 30px; font-size: 1.3vw; } }


/* Headers. */

#content h1
   { font-size: 225%; font-weight: 800; color: #990000;
     margin-top: 0.75em; margin-bottom: 0.75em; line-height: 120%; }
#content h2
   { font-size: 200%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 120%; }
#content h3
   { font-size: 160%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 130%; }
#content h4
   { font-size: 130%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 130%; }

#content h3.subtitle
   { font-size: 140%; font-weight: 400; margin-top: 0; line-height: 120%;
     color: #505050; }

#content h1 a, #content h2 a, #content h3 a, #content h4 a
   { font-weight: 800; color: black; background-color: white; padding: 0; border-radius: 0; }
#content h1 a:hover, #content h2 a:hover, #content h3 a:hover, #content h4 a:hover
   { background-color: white; text-decoration-line: underline; text-decoration-thickness: 1px; }

/* The use of !important here is a hack, which might be reworked later, but I think
   we can get away with it. The point is that these styles, which are fine layout
   tweaks, should always have priority. */

#content h1.flat, #content h2.flat, #content h3.flat, #content h4.flat
   { margin-top: 0 !important; margin-bottom: 0 !important; }
#content h1.thin, #content h2.thin, #content h3.thin, #content h4.thin
   { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
#content h1.flattop, #content h2.flattop, #content h3.flattop, #content h4.flattop
   { margin-top: 0 !important; }
#content h1.thintop, #content h2.thintop, #content h3.thintop, #content h4.thintop
   { margin-top: 0.25em !important; }
#content h1.flatbase, #content h2.flatbase, #content h3.flatbase, #content h4.flatbase
   { margin-bottom: 0 !important; }
#content h1.thinbase, #content h2.thinbase, #content h3.thinbase, #content h4.thinbase
   { margin-bottom: 0.25em !important; }


/* Paragraphs, lists, hyperlinks (except section-specific colours). */

#content p, #content li, #content blockquote, #content dt
   { font-weight: 300; line-height: 155%; color: #333333; }
#content p, #content li { font-size: 120%; }
#content p.flat, #content li.flat { margin-top: 0 !important; margin-bottom: 0 !important; }
#content p.thin, #content li.thin { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
#content p.flattop, #content li.flattop { margin-top: 0 !important; }
#content p.thintop, #content li.thintop { margin-top: 0.25em !important; }
#content p.flatbase, #content li.flatbase { margin-bottom: 0 !important; }
#content p.thinbase, #content li.thinbase { margin-bottom: 0.25em !important; }
#content div.bigger p, #content div.bigger li
   { font-size: 130%; margin-top: 0.5em; margin-bottom: 0.5em; }

#content ul, #content ol { margin: 0 0 1em 0; }
#content li { margin-top: 0.5em; margin-bottom: 0.5em; }
#content li p, #content li li, #content li li li, #content blockquote { font-size: 100%; }
#content ul.compact li, #content ol.compact li { margin-top: 0.2em; margin-bottom: 0.2em; }
#content ul > li::marker { font-size: 150%; color: rgb(1, 1, 1, 0.1); }
#content ul ul li::marker { color: rgb(1, 1, 1, 0.3); }
#content ol ul li::marker { color: rgb(1, 1, 1, 0.7); }
#content ul.checkmarks { list-style-type: '\2713 '; }
#content ul.checkmarks li::marker { font-size: 120%; color: black; }

#content a
   { text-decoration: none; font-weight: 500; background-color: #eeeeee;
     padding: 0 4px; border-radius: 3px; }
#content a.underlined, #content a.underlined:hover
   { padding: 0; border: 0; margin: 0; border-radius: 0;
     color: black; background-color: transparent; }
#content a.underlined:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content a { word-wrap: break-word; }
#content a.formanchor { visibility: hidden; }
#content .pronouns
   { display: block; font-weight: 300; font-size: 60%; margin-top: -0.3em; }


/* Styles for APA/publication list. */

#content p.apa, #content p.hanging
   { padding-left: 0.25in; text-indent: -0.25in; }
@media (min-width: 768px)
   { #content p.apa, #content p.hanging
     { padding-left: 0.5in; text-indent: -0.5in; } }
#content div.abstract { padding: 0.5em 1em; background-color: #f0f0f0; }
#content div.abstract p { padding: 0.5em 0; margin: 0; }


/* Special styles for tables. */

#content .datatable
   { width: 100%; margin-bottom: 1em; text-align: center;
     border-collapse: collapse; border-spacing: 0;
     border-left: 1px solid #999999; border-top: 1px solid #999999; }
#content .datatable.left { text-align: left; }
@media (min-width: 768px) { #content .datatable { font-size: 100%; } }
#content .datatable td, #content .datatable th
   { font-size: 110%; line-height: 120%; padding: 5px;
     border-right: 1px solid #999999; border-bottom: 1px solid #999999; }
#content .datatable.big td, #content .datatable.big th { font-size: 120%; }
#content .datatable th { font-weight: 500; background-color: #eeeeee; vertical-align: bottom; }
#content .datatable td { font-weight: 300; vertical-align: top; }

#content .plaintable { font-size: 120%; }
#content .plaintable .right { text-align: right; }
#content .plaintable td { vertical-align: top; font-weight: 300; line-height: 150%; padding: 2px; }


/* Special-case styles attaching icons to file-types, etc. */

#content a[href $='.pdf'], .newstext a[href $='.pdf']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/pdf.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.doc'], #content a[href $='.docx'], #content a[href $='.dotx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/word.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.xls'], #content a[href $='.xlsx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/excel.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.ppt'], #content a[href $='.pptx'], #content a[href $='.potx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/powerpoint.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a.underlined[href $='.pdf'], #content a.underlined[href $='.doc'],
#content a.underlined[href $='.docx'], #content a.underlined[href $='.dotx'],
#content a.underlined[href $='.xls'], #content a.underlined[href $='.xlsx'],
#content a.underlined[href $='.ppt'], #content a.underlined[href $='.pptx'],
#content a.underlined[href $='.potx']
	{ padding-left: 30px; }

/*
#content a[href ^='mailto:']
{ padding-left: 28px; background-image: url(/assets/chan/icons/mail-black.png);
  background-position: center left 4px; background-size: 18px 18px; background-repeat: no-repeat; }

#content #social-media a[href ^='mailto:']
{ padding-left: 0; background-image: none; }
*/

#content span.map-pin
{ padding-left: 24px; background-image: url(/assets/chan/icons/map-pin-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }

#content span.phone
{ padding-left: 24px; background-image: url(/assets/chan/icons/phone-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }


/* Pagination styles. */

.paginationcontrols { font-size: 130%; }
.paginationcontrols a, .paginationcontrols strong { margin-left: 0.5em; }


/* Styles for blog/news posts. */

#content .blogpost { margin-top: 2em; margin-bottom: 1em; clear: right; }
#content .blogpost img { max-width: 100%; height: auto; }

#content .blogpost #social-media { margin: 1em 0 0 0; }
#content .blogpost #social-media a
   { background-color: white; padding: 0; margin: 0; }
#content .blogpost #social-media img
   { height: 30px; width: 30px; padding: 0; opacity: 0.25; filter: alpha(opacity=25); }
#content .blogpost #social-media img:hover
   { opacity: 1.0; filter: alpha(opacity=100); }
@media (min-width: 768px)
   { #content .blogpost #social-media img { width: 3.5%; height: auto; margin-right: 5px; } }


/* Styles for content images/photos. */

#content .contentimage { width: 100%; margin: 1.5em 0; }
#content .contentimage img { width: 100%; height: auto; display: block; }
#content .contentimage.shadow { box-shadow: 0 3px 6px #999999; }
#content img { max-width: 100%; height: auto; }  /* Just in case. */

#content .contentimage.centered { width: 75%; margin: 1.5em auto; }
#content .contentimage.centered60 { width: 60%; margin: 1.5em auto; }
#content .contentimage.centered50 { width: 50%; margin: 1.5em auto; }
#content .contentimage.centered.fullwidthmobile,
#content .contentimage.centered60.fullwidthmobile,
#content .contentimage.centered50.fullwidthmobile { width: 100%; }

#content .contentimage.floatright40 { float: right; width: 40%; margin: 0 0 10px 10px; }
#content .contentimage.floatright30 { float: right; width: 30%; margin: 0 0 10px 10px; }
#content .contentimage.floatright25 { float: right; width: 25%; margin: 0 0 10px 10px; }
#content .contentimage.floatleft40 { float: left; width: 40%; margin: 0 10px 10px 0; }
#content .contentimage.floatleft30 { float: left; width: 30%; margin: 0 10px 10px 0; }
#content .contentimage.floatleft25 { float: left; width: 25%; margin: 0 10px 10px 0; }

@media (min-width: 768px)
{ #content .contentimage.centered.fullwidthmobile { width: 75%; }
  #content .contentimage.centered60.fullwidthmobile { width: 60%; }
  #content .contentimage.centered50.fullwidthmobile { width: 50%; }

  #content .contentimage.floatright { float: right; width: 50%; margin: 0 0 20px 20px; }
  #content .contentimage.floatleft { float: left; width: 50%; margin: 0 20px 20px 0; }
  #content .contentimage.floatright40,
  #content .contentimage.floatright30,
  #content .contentimage.floatright25 { margin: 0 0 20px 20px; }
  #content .contentimage.floatleft40,
  #content .contentimage.floatleft30,
  #content .contentimage.floatleft25 { margin: 0 20px 20px 0; } }

#content .contentimage a
   { margin: 0; padding: 0; border: 0; color: white; background-color: white; }
#content .contentimage a img:hover { opacity: 0.75; filter: alpha(opacity=75); }

#content .contentimage p { margin: 0; }
#content .contentimage p.caption
   { padding: 0.5em; font-weight: 300; font-size: 110%;
     line-height: 150%; background-color: #f8f8f8; }
#content .contentimage p.caption.clear { background-color: inherit; }
#content .contentimage p.caption a
   { font-weight: 400; padding: 0; color: black; background-color: transparent; }
#content .contentimage p.caption a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content li .contentimage p.caption { font-size: 87%; }

#content .contentimage.righttext { text-align: right; }
#content .contentimage.centertext { text-align: center; }


/* Styles for generic form. */

.chanform input[type="text"], .chanform input[type="password"], .chanform textarea
   { font-family: 'Source Sans'; font-size: 100%; font-weight: 300;
     width: 95%; border: 1px solid #cccccc; padding: 3px; -webkit-appearance: none; }
.chanform input[type="radio"], .chanform input[type="checkbox"], .chanform input[type="submit"], .chanform input[type="reset"], .chanform input[type="button"], .chanform select
   { font-family: 'Source Sans'; font-size: 100%; font-weight: 300; }
.chanform input[type="radio"], .chanform input[type="checkbox"]
   {   /* Double-sized Checkboxes */
      -ms-transform: scale(1.4); /* IE */
      -moz-transform: scale(1.4); /* FF */
      -webkit-transform: scale(1.4); /* Safari and Chrome */
      -o-transform: scale(1.4); /* Opera */
      transform: scale(1.4); }
.chanform input[type="text"].additional { width: auto; }
.chanform input:focus, .chanform textarea:focus { background-color: #ffff99; }

.chanform > table, .chanform > div > table, .chanform > div > div > table
   { width: 100%; font-size: 120%; line-height: 125%; }
.chanform td { vertical-align: top; }
.chanform td.label
   { width: 35%; text-align: right; padding: 5px; }
#content .chanform td.label p
   { margin: 0; font-weight: 300; font-size: 90%; line-height: 120%; }
.chanform td.value
   { font-size: 90%; font-weight: 300; width: 65%; text-align: left; padding: 5px; }

.chanform #Your_URL { display: none; }
.chanform .shaded { background-color: #eeeeee; padding: 0.5em; }
.chanform .list-of-checkboxes { margin-left: 2em; }
.chanform .list-of-checkboxes p { margin: 0.25em 0; }
.chanform fieldset { border: 0; padding: 0; margin: 0; }


/* Styles for protected content login form. */

.loginform input[type="text"], .loginform input[type="password"], .loginform input[type="submit"]
   { font-family: 'Source Sans'; font-size: 140%; font-weight: 300; width: 95%;
     border: 1px solid #cccccc; padding: 3px; -webkit-appearance: none; }
.loginform input[type="text"], .loginform input[type="password"] { width: 60%; }
.loginform input[type="submit"] { width: auto; color: black; background-color: #f0f0f0; }
.loginform input[type="submit"]:hover { background-color: #e0e0e0; }


/* Some basic use of CSS flex to allow simple responsive rows/columns. */

#content div.flexbox
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; margin: 0; }
#content div.flexbox.fixed { flex-direction: row; }
#content div.flexbox.fixed.reverse { flex-direction: row-reverse; }
#content div.flexbox div { flex-basis: 48%; width: auto; }
@media (min-width: 768px)
   { #content div.flexbox { flex-direction: row; }
     #content div.flexbox.reverse { flex-direction: row-reverse; }
     #content div.flexbox.three div { flex-basis: 31%; }
     #content div.flexbox.four div { flex-basis: 24%; } }


/* Styles for video and other embed containers. */

video { width: 100%; height: auto; margin-bottom: 2em; }

.video-container
   { position: relative; padding-bottom: 56.25%; padding-top: 30px;
     height: 0; overflow: hidden; margin-bottom: 2em; clear: both; }
.video-container iframe, .video-container object, .video-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-container-portrait
   { display: block; text-align: center; }

.map-container
   { position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: hidden; }
.map-container iframe, .map-container object, .map-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Styles for standard section divider. */

#content .section-divider
   { text-align: center; margin-top: -25px; margin-bottom: -30px;
     font-size: 500%; line-height: 100%; color: rgba(0, 0, 0, 0.1); }


/* Styles for next links. */

#content .nextlinks { text-align: right; margin-top: 1.5em; }
#content .nextlinks p { margin: 0; padding: 0; }


/* Simple alert box. */

#content div.alertbox, #content p.alertbox
   { background-color: #f0f0f0; border-radius: 3px; }
#content div.alertbox { padding: 0.5em 1em; margin-bottom: 1em; }
#content div.alertbox.alignright { text-align: right; }
#content p.alertbox { padding: 1em; }
#content div.alertbox p, #content div.alertbox h3, #content div.alertbox h4
   { padding: 0.5em 0; margin: 0; }
#content div.alertbox a, #content p.alertbox a { background-color: #e0e0e0; }
#content div.alertbox a:hover, #content p.alertbox a:hover
   { background-color: #d8d8d8; }


/* Quotation box. */

#content div.quotation
   { position: relative; border: 0px solid #d0d0d0; border-radius: 40px;
     padding: 0.5em 3em; margin: 0 0 1em 0; background-color: rgba(0.97,0.97,0.97,0.03); }
#content div.quotation p, #content div.quotation h3, #content div.quotation h4
   { padding: 0.5em 0; margin: 0; font-size: 110%; color: rgba(1,1,1,0.6); }
#content div.quotation::before
   { content: "“";  position: absolute; top: -5px; left: 10px;
     font-size: 400%; font-weight: 700; color: rgba(0.95,0.95,0.95,0.1); }
#content div.quotation::after
   { content: "”";  position: absolute; bottom: -30px; right: 10px;
     font-size: 400%; font-weight: 700; color: rgba(0.95,0.95,0.95,0.1); }
@media (min-width: 768px)
   { #content div.quotation { padding: 0.5em 4.25em; }
     #content div.quotation::before { font-size: 500%; top: -5px; left: 10px; }
     #content div.quotation::after { font-size: 500%; bottom: -40px; right: 10px; } }


/* Drop-downs. */

#content a.dropdown, #content a.dropdownsub
   { display: block; padding: 0.5em 70px 0.5em 0.5em !important; position: relative;
     color: black; font-weight: 300; line-height: 125%; clear: right; }
#content a.dropdown::after, #content a.dropdownsub::after
   { content: "⟩"; position: absolute; top: 10px; right: 25px; transform: rotate(90deg) scale(2.0, 1.0);
     font-family: 'Source Sans'; font-size: 140%; font-weight: 400; color: #b0b0b0; }
#content a.dropdownsub::after
   { color: #909090; }
#content a.dropdown.dropped::after, #content a.dropdownsub.dropped::after
   { top: 10px; right: 25px; transform: rotate(-90deg) scale(2.0, 1.0); }
#content a.dropdown { background-color: #f0f0f0; }
#content a.dropdown:hover { background-color: #e0e0e0; }
#content a.dropdownsub { background-color: #d0d0d0; }
#content a.dropdownsub:hover { background-color: #c0c0c0; }
#content div.indent { margin-left: 2em; }

#content a.dropdown.big { padding: 0.5em; font-size: 125%; margin: 0 0 1em 0; }
#content a.dropdown.nocontrol { padding-right: 0.5em !important; }
#content a.dropdown.nocontrol::after { content: ""; }


/* Content tags. */

#content span.tag, #content a.tag
   { padding: 0 8px; color: #404040; border: 1px solid #cccccc; border-radius: 6px;
     margin-right: 5px; white-space: nowrap; font-size: 90%; }
#content a.tag { background-color: white; font-weight: 300; }
#content a.tag:hover, #content a.tag.selected
   { color: black; border-color: black; background-color: #f8f8f8; }


/* Tags for news items. */

#content span.news-tag, #content a.news-tag,
#content span.student-blog-tag, #content a.student-blog-tag
   { font-weight: 300; font-size: 90%; padding: 0 .4em; color: rgba(0,0,0,0.6);
     border: 1px solid #cccccc; border-radius: 6px; margin-right: 3px; white-space: nowrap; }

#content a.news-tag, #content a.student-blog-tag { background-color: white; }
#content a.news-tag:hover, #content a.news-tag.selected, #content span.news-tag.selected,
#content a.student-blog-tag:hover, #content a.student-blog-tag.selected, #content span.student-blog-tag.selected
   { color: rgba(0,0,0,1); border-color: black; background-color: #f8f8f8; }


/* Tags for student blog. */

/*
#content a.student-blog-tag, #content span.student-blog-tag
   { font-weight: 300; font-size: 90%; padding: 0 3px; border: 1px solid white;
     border-radius: 6px; margin-right: 3px; white-space: nowrap; color: white; opacity: 0.5; }
*/

/* #content a.student-blog-tag.all,
#content span.student-blog-tag.all
   { background-color: rgba(128,128,128); } /* Grey */
/* #content a.student-blog-tag.admissions,
#content span.student-blog-tag.admissions
   { background-color: rgba(212,48,154); } /* Purple */
/* #content a.student-blog-tag.beginnings-and-endings,
#content span.student-blog-tag.beginnings-and-endings
   { background-color: rgba(212,48,154); } /* Purple */
/* #content a.student-blog-tag.balance,
#content span.student-blog-tag.balance
   { background-color: rgba(66,85,27); } /* Dark green */
/* #content a.student-blog-tag.classes,
#content span.student-blog-tag.classes
   { background-color: rgba(203,42,29); } /* Red */
/* #content a.student-blog-tag.community,
#content span.student-blog-tag.community
   { background-color: rgba(102,21,15); } /* Dark red */
/* #content a.student-blog-tag.diversity,
#content span.student-blog-tag.diversity
   { background-color: rgba(203,112,41); } /* Orange */
/* #content a.student-blog-tag.externships,
#content span.student-blog-tag.externships
   { background-color: rgba(208,155,53); } /* Gold */
/* #content a.student-blog-tag.fieldwork,
#content span.student-blog-tag.fieldwork
   { background-color: rgba(153,153,0); } /* Dark yellow */
/* #content a.student-blog-tag.first-gen,
#content span.student-blog-tag.first-gen
   { background-color: rgba(27,61,99); } /* Dark blue */
/* #content a.student-blog-tag.getting-involved,
#content span.student-blog-tag.getting-involved
   { background-color: rgba(132,170,53); } /* Green */
/* #content a.student-blog-tag.housing-and-transportation,
#content span.student-blog-tag.housing-and-transportation
   { background-color: rgba(78,173,167); } /* Aqua */
/* #content a.student-blog-tag.international,
#content span.student-blog-tag.international
   { background-color: rgba(54,122,197); } /* Blue */
/* #content a.student-blog-tag.life-hacks,
#content span.student-blog-tag.life-hacks
   { background-color: rgba(74,28,195); } /* Purple */
/* #content a.student-blog-tag.living-in-la,
#content span.student-blog-tag.living-in-la
   { background-color: rgba(163,42,196); } /* Magenta */
/* #content a.student-blog-tag.videos,
#content span.student-blog-tag.videos
   { background-color: rgba(147,42,56); } /* Cardinal */
/* #content a.student-blog-tag.what-are-osot,
#content span.student-blog-tag.what-are-osot
   { background-color: rgba(205,133,63); } /* Light brown */

/* #content span.student-blog-tag.selected,
#content a.student-blog-tag:hover
   { opacity: 0.8; border: 1px solid black; } */


/* Related links. */

#content .relatedlinks
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; margin: 0.5em 0; }
#content .relatedlinks p { flex-basis: 100%; margin: 0; padding: 0; }
#content .relatedlinks p.half { flex-basis: 48%; }

#content .relatedlinks p>br { display: none; }
#content .relatedlinks a
   { display: block; margin: 4px 0; padding: 0.5em 40px 0.5em 0.5em !important; position: relative;
     color: rgba(1,1,1,0.7); font-weight: 300; line-height: 125%; border-radius: 12px; }
#content .relatedlinks a.forward { text-align: right; }
#content .relatedlinks a.back
   { padding: 0.5em 0.5em 0.5em 40px !important; position: relative; }
@media (min-width: 768px) { #content .relatedlinks a { padding: 0.5em 60px 0.5em 0.5em; }
                            #content .relatedlinks a.back { padding: 0.5em 0.5em 0.5em 60px; } }
#content .relatedlinks a::after
   { content: "⟩"; position: absolute; top: 9px; right: 15px;
     font-size: 120%; font-weight: 400; }
#content .relatedlinks a.back::after
   { content: "⟨"; left: 15px; }


/* Image blocks. Rows of image + title/text. */

#content .imageblocks
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; }
#content .imageblocks.center
   { align-items: center; }
#content .imageblocks.twofixed,
#content .imageblocks.threefixed,
#content .imageblocks.fourfixed
   { flex-direction: row; }
#content .imageblocks div
   { flex-basis: 48%; width: 100%; margin-bottom: 1.5em; }
#content .imageblocks.compact div { margin-bottom: 0.5em; }
#content .imageblocks.twofixed div { flex-basis: 48%; }
#content .imageblocks.threefixed div { flex-basis: 31%; }
#content .imageblocks.fourfixed div { flex-basis: 24%; }
#content .imageblocks img { width: 100%; height: auto; }
#content .imageblocks a
   { border: 0; padding: 0; margin: 0; color: white; background-color: white; }
#content .imageblocks a:hover { background-color: white; }
#content .imageblocks a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .imageblocks p
   { margin: 0.2em 0; text-align: left;
     font-size: 110%; line-height: 125%; color: #404040; }
#content .imageblocks p.imagetitle
   { margin: 0.25em 0; font-size: 130%; color: black; font-weight: 600; }
#content .imageblocks p a { color: black; }
#content .imageblocks p a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content .imageblocks p.imagetitle a { font-weight: 600; }

@media (min-width: 768px)
   { #content .imageblocks { flex-direction: row; }
     #content .imageblocks.three div { flex-basis: 31%; }
     #content .imageblocks.four div { flex-basis: 24%; } }


/* Image summary. Two-column: image + title and descriptive text. */

#content .imagesummary
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; margin-bottom: 1.5em; }
#content .imagesummary .image { flex-basis: 25%; }
#content .imagesummary .image p { margin: 0; }
#content .imagesummary .image img { width: 100%; }
#content .imagesummary .image a { display: block; margin: 0; padding: 0; background-color: white; }
#content .imagesummary .image a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .imagesummary.shadow img { box-shadow: 0 3px 6px #999999; }
#content .imagesummary .imageinfo { flex-basis: 70%; }
#content .imagesummary .imageinfo p
   { font-size: 110%; line-height: 150%; margin: 0.2em 0; color: #404040; }
#content .imagesummary .imageinfo p.imagetitle
   { font-size: 150%; font-weight: 400; line-height: 130%; margin: 0.1em 0 0.25em 0; }
#content .imagesummary .imageinfo p.imagetitle a
   { font-weight: 400; padding: 0; color: black; background-color: white; }
#content .imagesummary .imageinfo p.imagetitle a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }

@media (min-width: 768px)
   { #content .imagesummary .image { flex-basis: 28%; }
     #content .imagesummary .imageinfo { flex-basis: 68%; } }


/* Info-block. A very simple style, which collapses headers and paragraphs into a
   single block. Fine-tuning of layout might then be applied using the thin and flat
   CSS tweaks. */

#content .infoblock { margin-bottom: 2em; }
#content .infoblock h2, #content .infoblock h3, #content .infoblock h4, #content .infoblock p
   { margin: 0; }


/* Some useful global styles. */

.headergrey { color: #a0a0a0; }
.subheader { font-weight: 300; color: #606060; }
.uppercase { text-transform: uppercase; }
.cardinal { color: #990000; }
.center { text-align: center; }

/*
200: ExtraLight
300: Light
400: Regular
500: Medium
600: SemiBold
700: Bold
800: ExtraBold
900: Black
*/