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

/*
* You can place your custom CSS statements in this file, after this message.
* It is better to write everything custom here
* because this file won't be replaced during updates.
* 
* Simply copy an existing style from style.css to this file, 
* and modify it to your liking.
*/


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


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

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

.single-post p.postmetadata {
	line-height: 1.5em;
}

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

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

#pullquote-left {
	font-size: 18px;
	font-style: italic;
	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 {
	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: #666;
}

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

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

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

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

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

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

sup a {
	color: blue;
}


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

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


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

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

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

/* Keeps events search bar above any dropdown nav that happens to overlap it */
#tribe-events-bar {
	z-index: 1;
}

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


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

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

.tribe-events-list-widget ol li {
	margin-bottom: 15px !important;
}

.tribe-events-list-widget .tribe-events-widget-link a {
	font-size: 12px;
}

#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: 217px;
}


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

.post-content #usertable a {
	font-weight: normal
}

#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***************
************************************/

/* Kept in print.css */

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


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

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

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


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