/* CSS to use on Barnard.edu Res Life webpages */

/* ------------ Dorm Page Gallery */

		#lightgallery a { display: inline !important; margin: 5px !important; padding: 0 !important; lineheight: 1 !important; }
		#lightgallery a img { width: 150px !important; display: inline !important; padding: 0 !important; margin: 0 !important; }

		.VR div { display: inline-block; margin: 5px; width: 48%; height: 240px;}
		.VR iframe { width: 100%; height: 100%;  }

		@media only screen and (max-width: 600px) {
				#lightgallery a img { width: 80px !important; display: inline !important; padding: 0 !important; margin: 0 !important; }
				/* .VR { padding: 56.25% 0 0 0; position: relative; } */
				.VR div { padding: 56.25% 0 0 0; position: relative; display: block !important; width: auto; height: auto; }
				.VR iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 5px; }
		}


/* ------------  Shade & Hide news listing image & category on front page -- override BARNARD.EDU css */

.c--news-card .f--super-title { display: none; } 
.c--news-card .f--image { display: none; }  

/* .field__item
.paragraph--type--news-listing */

.f--landing-page-component-list > div.field__item:last-of-type { background: #F0EBE0; padding: 0; margin-top: 0px; margin-bottom: 0px; }


/* ------------  Turn "3 Across" links into buttons -- override BARNARD.EDU css 

<section class="cc--component-container cc--three-across-featured" aria-label="Three Across Featured"  >
  <div class="c--component c--three-across-featured">
        <div class="news-wrapper">
      <div class="news-listing">
<article
   class="cc--component-container cc--news-card"
     aria-label="New Students"  >
  <div class="c--component c--news-card">
    <div class="text-container">
<div class="f--field f--cta-title">


<div class="field__item">
<div class="layout-type-featured_card paragraph paragraph--type--news-listing paragraph--view-mode--default">
<div class="field field--name-field-news-content field--type-viewsreference field--label-hidden field__item">
<div class="views-element-container"><div class="js-view-dom-id-8c16e5add622dedb02f8952f9ad718f9d5413c649e2c34389de132a9f294efe6">
 <div class="listing-content-grid">
<div class="listing-content-grid">
<article class="cc--component-container cc--news-card article landscape" aria-label="Health &amp; Safety Inspections for Spring 2023 (Feb 20 - Mar 3)">
<div role="article" about="/reslife/news/2023-Spring-Health-and-Safety-Inspections" typeof="schema:Article" class="c--component c--news-card">
   <div class="text-container">
<div property="schema:name" class="f--field f--cta-title">

*/

	.c--three-across-featured .f--cta-title H3 A {
			color: white !important;
			background: #002f63;
			border-radius: 5px;
			padding: 10px;
			display: block; 
			width: 95% !important; 
			text-decoration: none !important;
	}

	.c--three-across-featured .f--cta-title H3 A:hover {
			background: #336296;
	}


/* ------------ override formatting for tables */
	THEAD TH, THEAD TD, TH {
			background: #eeeeee !important;
			vertical-align: bottom !important;
	}

	TD, TH {
			padding: 10px 25px 10px 10px !important; 
			vertical-align: top !important;
	}

	.c--body-wysiwyg TD { font-size: 17.5px !important; } 
	.c--body-wysiwyg TD A { font-size: 17.5px !important; }


/* ------------ get rid of space at top of page for content -- override BARNARD.EDU css */

		.f--component-list:first-child .field__item:first-child .cc--body-wysiwyg:first-child
		{
			margin-top: 0 !IMPORTANT; padding-top: 0 !important; 
		}
		
		.cc--body-wysiwyg
		{
			margin-bottom: 0 !IMPORTANT;
		}

/* ------------ reduce space after Headers -- override BARNARD.EDU css */

		H3 { margin: 10px 0 15px 0 !important; }
		H4 { margin: 0 0 15px 0 !important; }
		H5 { margin: 0 0 15px 0 !important; }
		
		.XXXcc--body-wysiwyg H2:first-child { margin-top: 0px; padding-top: 0px; }
		.XXXcc--body-wysiwyg H3:first-child { margin-top: 0px; padding-top: 0px; }

/* ------------ 2nd level of list items -- override BARNARD.EDU css */

		LI LI
		{
			margin-top: 1.25rem !IMPORTANT;
		}

/* ------------ text size inside Barnard CSS accordians -- override BARNARD.EDU css */

		.accordion-item, .accordion-item p { font-size: 14pt !important; }
		//.accordions li, .cc--accordions .c--accordions .accordion .accordion-panel { font-size: 12pt !important; }
		.accordions li, .accordion-panel { font-size: 14pt !important; }


/* ------------ reduce top/bottom margins for sections -- override BARNARD.EDU css */

.cc--full-screen-intro-text .text-container { padding-top: 36px !important; padding-bottom: 36px !important; }
.cc--three-across-featured { padding-top: 36px !important; padding-bottom: 36px !important; }


/* ------------ Tables or lists inside accordians -- override BARNARD.EDU css */

		.accordion-item TD, .accordion-item TH {
				padding: 10px 12px 10px 12px !important;
				font-size: 14pt !important; 
		}
		.accordion-item LI LI { margin-top: 5px !important; }


/* ------------ reset bullets for List items -- override BARNARD.EDU css */

		.c--body-wysiwyg UL, .c--body-wysiwyg UL LI {
								list-style-position: outside !important;
								list-style-type: disc !important;
		}

		.c--body-wysiwyg UL LI::before {
								content: "" !important; 
		}


/* ------------ lists inside tables -- override BARNARD.EDU css */

		TABLE UL, TABLE UL LI {
								font-size: 12px !important; 
								line-height: 12px !important;
								list-style-position: outside !important;
								list-style-type: disc !important;
								margin-bottom: 5px !important; 
								margin-top: 5px !important;
								margin-left: 10px !important;
		}

		TABLE UL LI::before {
								content: "" !important; 
								font-size: 12pt !important;
								line-height: 12pt !important;
								left: -20px !important; 
		}


/* ------------ ADDITIONAL ELEMENTS FROM MATT */

		.callout 
		{	
			float: right; width: 300px; max-width: 25%; padding: 0; margin: 0 0 10px 10px; 
		}
		.greybox 
		{	
			background: #eee; border-radius: 5px;
		}


/* https://lonewolfonline.net/css-message-notification-bars/ */

		.info
		{
			border-radius: 5px;
			background-color: #f0f7fb;
			background-image: url(//matthewkingston.com/barnard/info_blue.png);
			background-position: 20px 20px;
			background-repeat: no-repeat;
			border: solid 1px #3498db;
			overflow: hidden;
			padding: 20px 20px 20px 60px;
		}
		
		.alert, .warning
		{
			border-radius: 5px;
			background-color: #FEEFB3;
			background-image: url(//matthewkingston.com/barnard/alert_orange.png);
			background-position: 20px 20px;
			background-repeat: no-repeat;
			border: solid 1px orange;
			overflow: hidden;
			padding: 20px 20px 20px 60px;
		}

/* ------------ Responsive Table for individual Res Hall pages */

		@media screen and (max-width: 640px)
		{
				.flex-table { min-width: 100px !important; width: 90% !important; }
				.flex-table thead, .flex-table tbody, .flex-table th, .flex-table td, .flex-table tr 
				{ 
					display: block;
				}
				.flex-table tr:nth-child(even) {background: #eee !important}
		}


/* ------------ show as two columns if wide enough */

		@media screen and (min-width: 480px)
		{
				.twocolumns { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
		}


/* ------------ Auto-links in headers */

.anchorHeader { cursor: pointer; } 

.anchorHeader .anchorLink {
    display: inline-block !important; 
    padding-left: .25rem !important;
    text-decoration: none !important;
    opacity: 0 !important;
    transition: opacity ease-in-out .25s !important;
}

.anchorHeader .anchorLink:hover {
    opacity: 1 !important;
}

.anchorHeader:hover .anchorLink { 
    opacity: .5 !important;
} 



/*
	///////////////////////////////////////////////
	Custom Toggle Blocks, use with ToggleBlock jquery include 

*/

html { scroll-behavior: smooth; scroll-padding-top: 20px; }

.BlockTitle, .BlockTitle H2, .BlockTitle H3, .BlockTitle H4, .BlockTitle H5, .BlockTitle H6  {
	background: #eee; padding: 10px 10px 10px 50px !important; paddding-top: 10px !important; 
	margin: 10px 0 0 0 !important; border-radius: 5px; position: relative;
	font-family: 'Apercu Regular', sans-serif !important; 
	border: 1px #ccc solid !important;
	font-size: 16pt !important; 
	font-weight: normal !important; }
.BlockTitle:hover { background: #bbd; cursor: pointer; } 
.BlockTitle STRONG, .BlockTitle B { font-family: 'Apercu Regular', sans-serif !important; }

.BlockTitle:after  {
  content:"+";   /* ⌵ ⌵ Δ ▟∨︿☰⪡ ➤⪡ △▼ △*/ 
  position:absolute; 
	left: 15px; top: 0; bottom: 0; height: 24px;
  font-size: 24pt !important; 
	transition:all .5s; transform:rotate(0deg); 
}

.BlockTitle.open { background: #002f63; color: white !important; border-radius: 5px 5px 0 0; border: 1px #002f63 solid !important;} 
.BlockTitle.open:after{ content:"-"; transform:rotate(0deg); } /* translateY(-10px) translateX(10px); */

.BlockContent { 
	display: none; border: 1px #ccc solid; border-radius: 0 0 5px 5px; 
	padding: 20px 20px 10px 20px; margin: 0;
	font-size: 14pt !important;
	line-height: 110% !important; 
}
.BlockContent P, .BlockContent LI, .BlockContent UL, .BlockContent U { 
	font-size: 14pt !important; margin: 0 0 18px 0 !important; line-height: 110% !important; 
}
.BlockContent A, .BlockContent TD, .BlockContent TD A {
	font-size: 14pt !important; line-height: 110% !important; 
} 
.BlockContent TABLE, .BlockContent TR { 
	margin-top: 0px !important; padding-top: 0px !important;
}

.BlockPermalink { text-align: right; font-size: smaller; padding: 0; margin: 0; }
.BlockPermalink A { font-style: italic; line-height: 110% !important; }