/* Some useful global styles. */

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

input:focus, textarea:focus { background-color: #ffff99; }
.center { text-align: center; }
#content li { margin-top: 0.5em; margin-bottom: 0.5em; }
#content ul, #content ol { margin: 0; }

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


/* Special styles for tables. */

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

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


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

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

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

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

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

#content a[href ^='mailto:']
{ padding-left: 23px; background-image: url(/assets/chan/icons/mail.png); background-position: center left;
                      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.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.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 img { max-width: 100%; height: auto; display: block; }

#content .contentimage.fullwidth { width: 100%; margin: 1.5em 0; }
#content .contentimage.fullwidth img, #content img.fullwidth { width: 100%; height: auto; }

#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.centered img { width: 100%; }

#content .contentimage.floatright, #content .contentimage.floatleft { width: 100%; margin: 1.5em 0; }
#content .contentimage.floatright40 { float: right; margin: 0 6px 10px 10px; width: 40%; }
#content .contentimage.floatright30 { float: right; margin: 0 6px 10px 10px; width: 30%; }
#content .contentimage.floatright25 { float: right; margin: 0 6px 10px 10px; width: 25%; }
#content .contentimage.floatleft40 { float: left; margin: 0 10px 10px 6px; width: 40%; }
#content .contentimage.floatleft30 { float: left; margin: 0 10px 10px 6px; width: 30%; }
#content .contentimage.floatleft25 { float: left; margin: 0 10px 10px 6px; width: 25%; }

@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; margin: 0 6px 20px 20px; width: 50%; }
  #content .contentimage.floatleft { float: left; margin: 0 20px 20px 6px; width: 50%; }
  #content .contentimage.floatright40, #content .contentimage.floatright30, #content .contentimage.floatright25 { margin: 0 6px 20px 20px; }
  #content .contentimage.floatleft40, #content .contentimage.floatleft30, #content .contentimage.floatleft25 { margin: 0 20px 20px 6px; } }

#content .contentimage.shadow img { box-shadow: 0 3px 6px #999999; -webkit-box-shadow: 0 3px 6px #999999; -moz-box-shadow: 0 3px 6px #999999; }
#content img.shadow { box-shadow: 0 3px 6px #999999; -webkit-box-shadow: 0 3px 6px #999999; -moz-box-shadow: 0 3px 6px #999999; }

#content .contentimage a { border: 0; padding: 0; margin: 0; color: white; background-color: white; }
#content .contentimage a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .contentimage p { margin: 0; padding: 0; border: 0; }
#content .contentimage p.caption { padding: 0.5em; font-weight: 200; font-size: 110%; line-height: 120%; background-color: #f8f8f8; }
#content .contentimage.righttext { text-align: right; }
#content .contentimage.centertext { text-align: center; }
#content .contentimage p.caption a { color: black; background-color: #eeeeee; }
#content li .contentimage p.caption { font-size: 87%; }


/* 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 div { flex-basis: 48%; }
#content div.flexbox.three div { flex-basis: 31%; }
@media (min-width: 768px) { #content div.flexbox { flex-direction: row; } }


/* Styles for Flickr galleries. */

#content .flickrsetlist { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
#content .flickrsetlist .flickrsetsummary { flex-basis: 48%; text-align: left; vertical-align: top; padding-bottom: 1em; }
#content .flickrsetlist a { color: white; background-color: white; padding: 0; border: 0; margin: 0; }
#content .flickrsetlist img { width: 100%; }
#content .flickrsetlist img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .flickrsetlist .flickrsettitle { font-size: 100%; font-weight: 800; color: black; margin: 0.2em 0 0.2em 0; line-height: 110%; }
#content .flickrsetlist .flickrsetinfo { font-size: 90%; font-weight: 200; color: #666666; margin: 0; line-height: 110%; }
@media (min-width: 768px) { #content .flickrsetlist .flickrsetsummary { padding-bottom: 2em; }
                            #content .flickrsetlist .flickrsettitle { font-size: 120%; }
                            #content .flickrsetlist .flickrsetinfo { font-size: 100%; } }

#content .flickrset { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
#content .flickrset a { flex-basis: 33%; color: white; background-color: white; padding: 0; border: 0; margin: 0; }
#content .flickrset img { width: 100%; }
#content .flickrset img:hover { opacity: 0.75; filter: alpha(opacity=75); }
@media (min-width: 768px) { #content .flickrset a { flex-basis: 24.5%; } }


/* Styles for YouTube, Google Maps and other embed containers. */

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

.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%; }

.youtube { overflow: auto; margin-bottom: 3em; font-size: 80%; }
.youtubevideo { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 1em; }
.youtubevideo iframe, .youtube-video object, .youtube-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#content .youtube h3, #content .youtube h4 { margin: 0 0 0.25em 0; }
#content .youtube p { margin: 0 0 0.5em 0; }
#content .youtube p.youtubedetails { font-weight: 700; margin-bottom: 0.25em; }
@media (min-width: 768px) { .youtube { font-size: 90%; }
                            .youtube .youtubevideo { padding: 0; height: auto; width: 30%; float: left; margin: 0; }
                            .youtube.floatright .youtubevideo { float: right; padding: 0 0 1em 1em; }
                            .youtube .youtubevideo iframe, .youtube-video object, .youtube-video embed { position: static; width: 100%; height: 125px; padding: 0; }
                            #content .youtube h3, #content .youtube h4, #content .youtube p { margin-left: 33%; }
                            #content .youtube.floatright h3, #content .youtube.floatright h4, #content .youtube.floatright p { margin-left: 0; } }


/* 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: National; font-weight: 200; margin-bottom: 1em; }
#sidebar .side-menu p.side-menu-header { font-weight: 500; margin: 0; padding: 5px; font-size: 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: 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: 2px; right: 10px; transform: rotate(90deg);
                                                                 font-size: 140%; font-weight: 200; }
#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); top: 1px; right: 12px; font-weight: 900; }


/* Navigation breadcrumbs. */

#crumbs { font-family: National; color: #a0a0a0; background-color: #f8f8f8; 
          margin: 1em 10px; padding: 8px; border-radius: 10px; }
#crumbs .crumb { font-size: 120%; line-height: 120%; }
@media (min-width: 768px) { #crumbs { margin: 1em 0; }
                            #crumbs .crumb { font-size: 120%; } }
#crumbs .crumb a { color: #a0a0a0; background-color: transparent; font-weight: 200; padding: 0; border-radius: 0; }
#crumbs .crumb a:hover { color: #606060; border-bottom: 1px solid #606060; }
#crumbs .crumb-divider { padding: 0 6px; }


/* Simple alert box. */

#content div.alertbox, #content p.alertbox { background-color: #f0f0f0; }
#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; }


/* Internal resources menu bar. */

#internal { font-family: National; font-weight: 200; width: 100%; color: #b2b2b2; background-color: #3c3c3c;
            font-size: 100%; padding: 0.2em 0 0.2em 0; line-height: 150%; text-align: left; }
#internal a { color: #b2b2b2; 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 50px 0.5em 0.5em; position: relative;
     color: black; font-weight: 200; line-height: 125%; clear: right; }
#content a.dropdown::after, #content a.dropdownsub::after
   { content: ">"; position: absolute; top: 10px; right: 15px; transform: rotate(90deg); 
     font-family: National; font-size: 200%; font-weight: 500; }
#content a.dropdown.dropped::after, #content a.dropdownsub.dropped::after
   { top: 10px; right: 20px; transform: rotate(-90deg); }
#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 tags. */

#content span.tag, a.tag { padding: 2px; border: 1px solid #cccccc; border-radius: 6px; margin-right: 5px; white-space: nowrap; }
#content a.tag { color: black; background-color: white; font-weight: 200; }
#content a.tag:hover { border-color: black; background-color: #f8f8f8; }

#content a.tag.admissions, #content a.tag.classes, #content a.tag.diversity, #content a.tag.externships,
#content a.tag.fieldwork, #content a.tag.getting-involved, #content a.tag.housing-and-transportation,
#content a.tag.international, #content a.tag.life-hacks, #content a.tag.living-in-la, #content a.tag.videos,
#content a.tag.what-are-osot { color: white; border: 0px solid #808080; }

#content a.tag.admissions { background-color: rgba(212,48,154,0.6); } /* Purple */
#content a.tag.classes { background-color: rgba(203,42,29,0.6); } /* Red */
#content a.tag.diversity { background-color: rgba(203,112,41,0.6); } /* Orange */
#content a.tag.externships { background-color: rgba(208,155,53,0.6); } /* Gold */
#content a.tag.fieldwork { background-color: rgba(153,153,0,0.6); } /* Dark yellow */
#content a.tag.getting-involved { background-color: rgba(132,170,53,0.6); } /* Green */
#content a.tag.housing-and-transportation { background-color: rgba(78,173,167,0.6); } /* Aqua */
#content a.tag.international { background-color: rgba(54,122,197,0.6); } /* Blue */
#content a.tag.life-hacks { background-color: rgba(74,28,195,0.6); } /* Purple */
#content a.tag.living-in-la { background-color: rgba(163,42,196,0.6); } /* Magenta */
#content a.tag.videos { background-color: rgba(147,42,56,0.6); } /* Cardinal */
#content a.tag.what-are-osot { background-color: rgba(205,133,63,0.6); } /* Light brown */

#content a.tag.admissions:hover, #content a.tag.classes:hover, #content a.tag.diversity:hover, #content a.tag.externships:hover,
#content a.tag.fieldwork:hover, #content a.tag.getting-involved:hover, #content a.tag.housing-and-transportation:hover,
#content a.tag.international:hover, #content a.tag.life-hacks:hover, #content a.tag.living-in-la:hover, #content a.tag.videos:hover,
#content a.tag.what-are-osot:hover { border: 0px; }

#content a.tag.admissions:hover { background-color: rgba(212,48,154,1.0); } /* Purple */
#content a.tag.classes:hover { background-color: rgba(203,42,29,1.0); } /* Red */
#content a.tag.diversity:hover { background-color: rgba(203,112,41,1.0); } /* Orange */
#content a.tag.externships:hover { background-color: rgba(208,155,53,1.0); } /* Gold */
#content a.tag.fieldwork:hover { background-color: rgba(153,153,0,1.0); } /* Dark yellow */
#content a.tag.getting-involved:hover { background-color: rgba(132,170,53,1.0); } /* Green */
#content a.tag.housing-and-transportation:hover { background-color: rgba(78,173,167,1.0); } /* Aqua */
#content a.tag.international:hover { background-color: rgba(54,122,197,1.0); } /* Blue */
#content a.tag.life-hacks:hover { background-color: rgba(74,28,195,1.0); } /* Purple */
#content a.tag.living-in-la:hover { background-color: rgba(163,42,196,1.0); } /* Magenta */
#content a.tag.videos:hover { background-color: rgba(147,42,56,1.0); } /* Cardinal */
#content a.tag.what-are-osot:hover { background-color: rgba(205,133,63,1.0); } /* Light brown */