/******************************************  
 CUSTOM STYLESHEET
*******************************************/

/*
* You can place your custom CSS statements in this file, after this message.
* Unlike styles.css, this file won't ever be overwritten during updates.
* 
* IMPORTANT: To speed up how long it takes to load a page, we use the Autoptimize plugin to put critical CSS "above the fold". If the code above the fold ever needs to be updated, follow these instructions: https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option. Note that there is some CSS in styles.css that supercedes what Autoptimize creates, and we don't want that. We have removed those styles from styles.css, but they may reappear when Erudito is next updated. If they reappear you'll know it because the nav background and links will turn bright red and the footer text will drop to 11px instead of the 12px we stated in custom.css.
*
* ALSO IMPORTANT: When making updates to custom.css, disable our content delivery network, which provides a robust cache of all our content as a way to protect against denial of service attacks: http://cmsw.mit.edu/wp/wp-admin/admin.php?page=w3tc_general; otherwise you won't see updates to CSS on the site. After making your CSS edits, you have several options to push updates to the live site. The easiest is to "invalidate" the CSS file in W3 Total Cache itself, on the CDN tab: http://cmsw.mit.edu/wp/wp-admin/admin.php?page=w3tc_cdn. At the top you'll see "Purge objects from the CDN using this tool"; the object is the relative URL to the versioned CSS file, such as wp/wp-content/themes/erudito/custom.css?x69835. (You can find the version by using "Inspect" in Chrome.) Option 2 does the same thing but is slower: invalidate custom.css in our content delivery network, https://console.aws.amazon.com/cloudfront/home?region=us-east-1#distribution-settings; you'd only need to do that if you need to use a wildcard to catch all files in a directory, which is rare. That looks like this wp/wp-content/themes/erudito/*. Be aware that Amazon's subsequent calls could slow the site down substantially. Option 3 is to wait 24 hours, when the CDN updates all files it IDs as having been edited. If you still don't see updates, be sure you've cleared your browser cache.
*/


/********************************************
******************TYPOGRAPHY*****************
********************************************/

			/******************* 
				 * Headings *
			*******************/


/* Improves the look of excerpts in the "Recent Posts" section of the front page */
.post-content h1 {
	font-size: 26px;
	line-height: 36px;
	padding-top: 12px;
}

.post-content h2 {
	font-size: 22px;
	line-height: 32px;
	padding-top: 12px;
}

.post-content h3 {
	font-size: 18px;
	line-height: 26px;
	padding-top: 12px;
}

.post-content h4 {
	font-size: 15px;
	line-height: 24px;
	padding-top: 12px;
}

.post-content h5 {
	font-size: 13px;
	line-height: 22px;
	padding-top: 12px;
}

h3#recent-posts-excerpt {
	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	color: rgb(153, 153, 153);
	}


			/******************* 
			    * Sections *
			*******************/	
#text-box {
	border: 1px solid #999;
	padding: 1.625em;
	background-color: #ddd;
}

#text-box h4 {
	font-style: italic;
}

#text-box p, #text-box ul, #text-box ol, #text-box li {
	color: #666 !important;
}

hr.section {
    margin: 2em auto;
    width: 33%;
}	


	
			/******************* 
			   * Paragraphs *
			*******************/	

.post-content a {
	font-weight: bold;
}

.single-post p.postmetadata {
	line-height: 1.5em;
	color: #333 !important;
}

p.postmetadata, p.page-meta {
	color: #333 !important;
}

p.postmetadata a {
	font-weight: bold;
}

.subscribe {
	font-size: 11px;
	margin-bottom: 2em;
}

.display-name {
	font-weight: bold;
	margin-bottom: 0;
}

span.drop-cap {
	float: left;
	font-size: 5em;
	margin: 5px 5px 5px 0;
	padding: 15px 0 0;
	color: #000;
}

#pullquote-left {
	line-height: 1.5em;
	font-size: 18px;
	font-style: italic;
	line-height: 1.5em;
	width: 38%;
	float: left;
	margin: 7px 24px 12px 0;
	padding: 14px 14px 14px 0;
	border-top: 1px solid rgb(153, 153, 153);
	border-bottom: 1px solid rgb(153, 153, 153);
}

#pullquote-right {
	line-height: 1.5em;
    font-size: 18px;
    font-style: italic;
    width: 38%;
    float: right;
    margin: 7px 0 12px 24px;
    padding: 14px 0 14px 14px;
    border-top: 1px solid rgb(153, 153, 153);
    border-bottom: 1px solid rgb(153, 153, 153);
}

.post-content .wp-caption-text {
	color: #666;
}

/* Hide the fact that list items in this menu are links */
ul#menu-application-checklist > li a {
	color: rgb(102,102,102);
}

ul#menu-science-writing-application-materials-needed > li a {
	color: rgb(102,102,102);
}

/* Make links stand out better when they're in the front page slideshow */
ul.slides a {
	font-weight: bold;
	color: white;
}

footer {
	color: #555 !important;
}

.footer-copyright {
	text-align: center;
	font-size: 1.1em;
}

/* Override can't-find statement that changed user table text to 16px */

.userlist td {
	font-size: 13px;
	line-height: 24px !important; /* Otherwise overwritten in /plugins/amr-users/css/amrusersfront.css */
}

.avatar img {
	margin-right: 25px;
}

#preferred-title {
	margin-top: 6px;
}

.post-content td {
	font-size: 13px;
}

table#usertable.widefat.userlist {
	font-size: 13px;
}

sup a {
	color: blue;
}


/*******************************************
*******************TABLES*******************
*******************************************/

.post-content table {
	margin-top: 2px;
}

.table-container {
    background-color: #f9f9f9;
    border: solid 1px #e9e9e9;
    width: 500px;
    padding: 10px 8px;
    text-align: left;
}

.post-content tr, th, td {
	padding-left: 1em;
	padding-right: 1em;
}

#column1 {
	float: left;
	width: 48%;
	padding-right: 10px;
}

#column2 {
 	float: left;
	width: 48%;
	padding-left: 10px;
}

.avatar img {
	border-radius: 50px; 
	-moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    filter: none;
}

/*******************************************
******************STRUCTURE*****************
*******************************************/

#logo img {
	margin-top: -15px;
	margin-bottom: 15px;
}

/* Important: This relates to an img placed in the header.php directly */
#logo-pattern {
	margin-bottom: -23px;
	width: 100%;
}

#logo-pattern img {
	width: 100%;
}

#mit-header-logo img {
	margin-top: 32px;
	float: right;
}

div.no-sidebar-but-not-full-width #content {
	margin-right: 0;
	width: 75%;
}


			/******************* 
				 * Top Menu *
			*******************/ 

/* Meet minimum color contrast requirements */
#top-menu a {
	color: #333;
}

/* Adjust as needed to align with the logo */
nav#top-menu {
}

/* Obliges the search box to show up on mobile devices. (Overriding line 1715 in styles.css) */
div.search-form {
	display: block;
}


			/******************* 
				 * Nav Menu *
			*******************/

/* Needed to widen the nav menu dropdowns to keep nav items on one line apiece */ 

nav#main-menu .dropdown ul {
	position: absolute;
	top: -999em;
	width: 200px; /* left offset of submenus need to match (see below) */
 	text-align: left;
	margin: 0;  
	padding: 10px 5px; 
	background: #272727; 
	text-transform: none; 
}

nav#main-menu ul.dropdown li li:hover ul,
nav#main-menu ul.dropdown li li.sfHover ul {
	left: 201px; /* match ul width */
	top: 0;
}

nav#main-menu ul.dropdown li li li:hover ul,
nav#main-menu ul.dropdown li li li.sfHover ul {
	left: 201px; /* match ul width */
	top: 0;
}

/* Changes color of border around main nav */
nav#main-menu {
	border-top: 1px solid rgb(0, 0, 0);
	
}

/* Set unique color for Capital Campaign menu item at right */
nav#main-menu li#menu-item-30603 {
	background-color: #8D1616;
}


			/******************* 
			 * Page Navigation *
			*******************/
			
.navigation a:hover {
	background-color: #000 !important;
	color: #fff !important;	
}

.navigation .current {
    background-color: #8D1616 !important;
    color: #fff !important;
} 

			/******************* 
				 * Sidebar *
			*******************/

aside div.widget {
	margin-bottom: 30px;
}

li.wcc-resources {
	line-height: 1.2em !important;
	margin-top: .5em;
}

li.wcc-contact {
	line-height: 1.2em !important;
	margin-top: .5em;
}

#execphp-28 img { /* Sets MIT campaign logo to proper size on larger mobile devices */
	max-width: 100%;
}


			/******************* 
				 * Footer *
			*******************/

footer div.column {
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    width: 211px !important;
}


/*******************************************
****************PAGE-SPECIFIC***************
*******************************************/

/*Research Group Page*/
#research-group {
	max-width: 44%;
	float: left;
	margin-right: 2em;
	margin-bottom: 1em;
	padding-top: 1em;
	border-top: 1px solid #ccc;

}

h1.research-group /* For when text instead of a logo is used for the name of the group */ {
	font-size: 1.8em;
}

/*People pages with bios */
.vcard > td /* Adds some space between bios */ {
	padding: 1em 1.625em 1em 0; border-bottom: 1px solid #EAE7DE;
	}
	
td.avatar.td.td2 > img {
	max-width: 150px;
}	


/* User list pages */

#display-name {
	font-weight: bold;
	min-width: 100px;
	min-width: 150px;
}

#display-name-wide {
	display: inline;
	font-weight: bold;
}

table#usertable.widefat.userlist {
	border-style: none;
}

/* Contact page */

#cscf {
	width: 375px;
}

	
/***The Events Calendar***/
/*	All changes to The Events Calendar css should be made at /themes/erudito/tribe-events/tribe-events.css, because the plugin's default is to load its own CSS last, overriding anything in styles.css or custom.css
	For more info: http://tri.be/support/documentation/events-calendar-themers-guide/

Changes made include but not limited to:

1. Changes to footer navigation so that long event titles don't overlap
2. Re-positioning of images so that speakers' headshots overlap in an interesting way with the event context box. Can't guarantee this will work in all situations.
	
*/


/***********************************
****************PRINT***************
************************************/

@page {
	margin-top: 2cm;
	margin-bottom: 1.75cm;
}

@media screen {
	#footer-print {
		display: none;
		height:0;
	}
}
@media print {
	#logo img {
		width: 10cm;
	}

	#footer-print {
		position: fixed;
		bottom: 0;
		right: 0;
	}
}

@media print {
	/* Using CSS to display the original header and footer content in print is too difficult. These next statements hide them altogether. Instead, we've put HTML in header.php and footer.php. Not ideal, but... */
	
	/* HEADER AND FOOTER */
	
	footer {
		display: none;
	}
	
	/* TEXT */	

	h1.title {
		font-size: 36px;
		line-height: 40px;
	}

	.post-content h1 {
		font-size: 30px;
		line-height: 36px;
		padding-top: 12px;
	}
	
	.post-content h2 {
		font-size: 28px;
		line-height: 36px;
		padding-top: 12px;
	}
	
	.post-content h3 {
		font-size: 24px;
		line-height: 36px;
		padding-top: 12px;
	}
	
	.post-content h4 {
		font-size: 21px;
		line-height: 34px;
		padding-top: 12px;
	}
	
	.post-content h5 {
		font-size: 19px;
		line-height: 32px;
		padding-top: 12px;
	}
	
	.post-content p {
		font-size: 18px;
		line-height: 34px;
		text-align: justify;
	}
	
	li {
		font-size: 18px;
		line-height: 34px;
		text-align: justify;	
	}
	
	p.wp-caption-text {
		font-style: italic !important;
		font-size: 17px !important;
		line-height: 23px !important;
		padding-left: 10% !important;
		padding-right: 10% !important;			
	}
	
	h3#recent-posts-excerpt {
		font-size: 12px;
		font-weight: normal;
		line-height: 22px;
		color: rgb(153, 153, 153);
		}

	/* NAV */
	
	#main-menu, #top-menu {
		visibility: hidden;
		height: 0;
	}

	#featured-navigation, #rss-2 {
		display: none;
		height: 0;
	}

	/* POST */
	
	#main {
		margin: 0 1.75cm 0 1.75cm;
	}
	
	iframe.scribd_iframe_embed {
		display: none;
	}
	
	.post-thumb {
		float: left;
		margin: 0 15px 5px 0;
	}
	
	.post-actions {
		display: none; height: 0;
	}
	
	.post-content a {
		font-weight: 700; text-decoration: none;
	}
	
	.post-content a[href^=http]: after{content: " <" attr(href) "> "}
	
	$a: after>img,.post-content a[href^="#"]: after{content: ""}

	
	.post-content .aligncenter {
		display: block; margin-left: auto; margin-right: auto;
	}
	
	.post-content .alignright {
		margin: 0 0 5px 20px; display: inline;
	}
	
	.post-content .alignleft {
		margin: 0 20px 5px 0;display: inline;
	}
	
	h1: after{content: url();position: absolute;right: 0;top: 0}

	ul.posts-archive>li{list-style: none}

	
	.alignright {
		float: right;
	}
	
	.alignleft {
		float: left;
	}
	
	.post-content .wp-caption {
		background-color: #f9f9f9; border: 1px solid #e9e9e9; padding: 10px 8px; text-align: center;
	}
	
	.post-content .wp-caption img {
		background: 0 0; margin: 0 0 10px; border: 0; max-width: 100%; width: auto; height: auto;
	}
	
	#comments,#custommetawidget-3,#tags,.navigation,.share_btn,.tribe-event-tags,a.post-edit-link,span.more,ul.posts {
		height: 0; display: none;
	}
	
	.gallery-caption,.post-content .wp-caption-text {
		color: #A7A3A3; font-size: 11px; line-height: 1.4em; margin: 0; padding: 4px 0 0; text-align: center;
	}
	
	.post-content .wp-caption.aligncenter {
		margin: 0 auto 15px;
	}
	
	aside {
		display: none;
	}
	
	a.external_icon {
		padding: 0 !important;
	}
	
	sub, sup {
		vertical-align: baseline; position: relative; top: -.4em;
	}
	
	sub {
		top: .4em;
	}
	
	iframe {
		width: 100%;
	}	

	/* Sidebar */
	.column {
		height: 5px;
	}

	.featured-pages > .column {
	 	height: 15%;
	 }

	.featured-pages {
		float: left;
		margin-right: 15px;
	}

	/* Hide share buttons for print */
	.sharedaddy {
		display: none;
	}
	
	/* Hide contrast/text size toggle button */
	.a11y-responsive {
		display: none;
	}

}

/****************************
*******RESPONSIVE VIDEO******
****************************/

/* Video must be between <div class="video-container">...</div> */

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


/****************************
************MOBILE***********
****************************/

.post-content .wp-caption {
	max-width: 100%;
}

/* Properly size and place logo and pattern for mobile when held vertically, and hide top-menu as well */
@media only screen and (max-width: 390px) {
	#logo-pattern img { 
		margin-bottom: -15px;
	}
	
	#logo {
		margin-bottom: 0;
		float: left;
		width: 63%;
	}
	
	#logo img {
		width: 100%;
	}
	
	#top-menu ul {
		display: none;
	}
	
	#mit-header-logo img {
		margin-top: 0px;
	}
	
	img.size-large {
		max-width: 100% !important;
		height: initial !important;
	}
	
}

@media only screen and (min-width: 391px) and (max-width: 900px) {
	#logo-pattern img { 
		margin-bottom: -15px;
	}
	
	#logo {
		width: 100%;
		margin-bottom: -5px;
	}
	
	#logo img {
		width: 63%;
		display: block;
		margin: 0 auto 15px;
	}
	
	#top-menu {
		width: 100%;
	}
	
	#mit-header-logo img {
		margin-top: 0px;
	}	
	
	img.size-large {
		max-width: 100% !important;
		height: initial !important;
	}
}

/***********************************
********MAILCHIMP EMBED FORM********
************************************/

/* Almost all the Mailchimp CSS is linked in <head> in header.php, with some inline on http://cmsw.mit.edu/events-and-news-by-email */

#mc-embedded-subscribe-form {
	padding: 0;
	width: 450px;
}

/*******************************************
*************JETPACK RELATED POSTS**********
*******************************************/

/* Rounds the corners on related post images and mimics the fade of the 3 featured items on the front page */

.jp-relatedposts-post-img {
	border-radius: 10px;
}

.jp-relatedposts-post {
	filter: alpha(opacity=100) !important;
	-moz-opacity: 1 !important;
	opacity: 1 !important;
}

.jp-relatedposts-post img:hover {
	zoom: 1 !important;
	filter: alpha(opacity=60) !important;
	opacity: 0.6 !important;
	-webkit-transition-duration: 0.3s !important;
	-moz-transition-duration: 0.3s !important;
	transition-duration: 0.3s !important;
}

.jp-relatedposts-post-title a {
	font-weight: bold !important;
}


/***********************************
************MISCELLANEOUS***********
************************************/

/* Using a slightly lighter version of the background on the front page slideshow */
#featured-posts div.post-body {
	background: transparent url(images/back-postmeta-lighter.png) repeat top left;
}

/* Changes color of search box background */
div.search-form {
    background-color: rgb(0, 0, 0);
}    

/* Hides search submission button */    
#searchsubmittop {
	visibility: hidden;
}

/* Sets warning notification color for Form Maker failed submissions */
.fm-form-message error {
	color: red;
}

/* Hides external link icon if External Links plugin is active*/
.wp-biographia-link-icon.external.external_icon {
	background: none !important;
	padding-right: 0 !important;
}

/* Rounded corners, sometimes a large number so that the image is a circle, for example on http://cmsw.mit.edu/profile/andrew-whitacre/ */
.wp-biographia-pic {
	background: none;
	border: none;
}

.wp-biographia-pic img {
	border-radius: 250px; 
}

.post-thumb img {
	border-radius: 10px; 
}

.cover img {
	border-radius: 10px;
}

.tribe-events-event-image img {
	border-radius: 10px;
}

/* But don't have rounded corners on the front page big featured images */
.flexslider .slides img {
	border-radius: 0px;
}


/* Disqus's default width stretches across all available space. This sets how wide it can be. */
#disqus_thread {
	max-width: 52em;
}

/*Line 881 in styles.css: commented out "height:auto;" under the .post-content img.alignnone declaration b/c it started mis-placing WP-Biographia images*/

/* Generic clear statement */

.clear {
	clear: both;
}

/* The mob hit. Makes problems disappear. */
span.hide {
	display: none;
}