/* Some useful global styles. */

span.cardinal { color: #990000; }
span.headergrey { color: #a0a0a0; }
span.uppercase { text-transform: uppercase; }

.subheader { font-weight: 300; color: #606060; }
.chanform fieldset { border: 0; padding: 0; margin: 0; }

#content a.underlined, #content a.underlined:hover
   { padding: 0; border: 0; margin: 0; border-radius: 0;
     color: black; background-color: white; }
#content a.underlined:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }

#content div.bigger p { font-size: 130%; margin-top: 0.5em; margin-bottom: 0.5em; }


input:focus, textarea:focus { background-color: #ffff99; }
.center { text-align: center; }
#content li { margin-top: 0.5em; margin-bottom: 0.5em; }
#content ul.compact li, #content ol.compact li { margin-top: 0.2em; margin-bottom: 0.2em; }
#content ul, #content ol { margin: 0 0 1em 0; }
#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; }

a { word-wrap: break-word; }
#content a.formanchor { visibility: hidden; }


/* 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.underlined[href $='.pdf'] { padding-left: 30px; }

#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; }


/* Blog-specific styles. */

#content .blogpost { margin-top: 2em; margin-bottom: 3em; }
#content .blogtitle { font-size: 160%; font-weight: bold; color: black; margin-top: 0; margin-bottom: 0; }
#content .blogsubtitle { font-size: 110%; font-weight: bold; color: #666666;
                         margin-top: 0.25em; margin-bottom: 0; }
#content .blogdate { font-size: 110%; font-weight: bold; color: #666666;
                     margin-top: 0.25em; margin-bottom: 0; }


/* 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; }


/* 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; }
.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; }


/* Side-menu (everything except the styles to colour the current links, because those are section-specific). */

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

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

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

#sidebar .side-menu .side-submenu a.side-submenu-header { position: relative; padding-right: 25px; }
#sidebar .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; }
#sidebar .side-menu .side-submenu.expanded > a.side-submenu-header,
#sidebar .side-menu .side-submenu.expanded > span.side-submenu-header { font-weight: 400; }
#sidebar .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; }


/* Navigation breadcrumbs. */

#crumbs { font-family: 'Source Sans'; color: #606060; background-color: #f8f8f8; 
          margin: 1em 10px; padding: 8px; border: 5px solid white; border-radius: 10px;
          position: sticky; top: 5px; }
#crumbs .crumb { font-size: 120%; line-height: 120%; }
@media (min-width: 768px) { #crumbs { position: static; margin: 1em 0; border: 0; }
                            #crumbs .crumb { font-size: 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; }


/* 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; } }


/* Internal resources menu bar. */

#internal { font-family: 'Source Sans'; font-weight: 300; width: 100%; background-color: #3c3c3c;
            font-size: 100%; padding: 0.25em 0; line-height: 150%; text-align: left; }
#internal a { color: #c0c0c0; margin-left: 1em; }
#internal a:hover { color: white; }

@media (min-width: 768px) { #internal a { margin-left: 2em; } }


/* 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 2px; 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 3px; 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: 800; line-height: 140%; margin: 0.1em 0 0.25em 0; }
#content .imagesummary .imageinfo p.imagetitle a
   { font-weight: 800; 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; }