/*-----------------------------------------------------
Boutros AbiChedid - boutrosa@princeton.edu
START DATE: December 2013
PURPOSE: 	CSS Stylesheet for PNI Drupal Website.
			Responsive Web Design.
------------------------------------------------------*/
@media (min-width: 979px) and (max-width: 1200px) {
	
}

@media (min-width: 768px) and (max-width: 979px) { 

	/* Base */
	header div.social-icons {
		display: none;
	}

	header nav ul.nav-main {
		margin-right: -10px;
	}

	/* Thumb Info */
	a.thumb-info span.thumb-info-title {
		font-size: 13px;
	}

	a.thumb-info span.thumb-info-more {
		font-size: 11px;
	}	
}

@media (max-width: 1180px) { 

	div.home-concept div.project-image,
	div.home-concept div.process-image {
		margin-left: 0%; /* BAC. 10/15/14 -50% */
	}
	header nav ul.nav-top {
		left: 53%;
		position: absolute;
		font-size:0.95em;
	}
	header div.logo img {
		display: none;
	}
	
	/* BAC. 4/2/14. THIS IS BECOMING A STYLING NIGHTMARE, SINCE I HAVE TO DEAL with multiple devices and screen sizes. 
	Disable it 	FOR NOW. KEEP IT just in case I revert back in the future.
	NOW IT IS like horizontal masonary display instead of Perfectly aligned Tables. This is better for 3-column horizontal 
	display at small screens where vertical and hizontal scroll-bars appear. 
	Converted the Perfectly aligned Horizontal Display into Masonary Horizontal Display. This is much better for Responsive
	screens, multiple browsers, multiple devices, mimimizing voids (blank spaces), No maintenance nightmareby and also by 
	not showing the vertical (and sometimes the horizontal) scrollbars. Also at small screens (<767px) the Tables will 
	display one after the other in a one column. This is much cleaner alternative for styling.*/
	/*****
	BAC. Isotope Filtering. Faculty Directory Horizontal Display aligned.
	.isotope-item div.faculty-directory-horizontal {
		height: 555px; 
		overflow: auto;	
	}
	
	BAC. Isotope Filtering. Administartive Staff Directory and Researchers Directory - Horizontal Display aligned.
	.isotope-item div.admin-directory-horizontal {
	height: 355px; 
	overflow: auto;
    }
	.isotope-item div.team-horizontal {
	height: 425px; 
	overflow: auto;
    }
	*****/
	
	/* Image Caption for Faculty Carousel/Faculty research Summary Basic Page */
	div.faculty-carousel div.image-field-caption {
		height: 175px !important; /* BAC. To keep all elements aligned. */
  		overflow: hidden; /* BAC. i did it hidden so that the Horizontal scrollbar does not show. */
		font-size: 0.89em;
	}	
	
	/* Image Caption for Faculty Carousel at front page. */
	div.faculty-carousel div.flexslider div.image-field-caption {
		height: 170px !important; /* BAC. To keep all elements aligned at the Front Page */
  	overflow: hidden;
		font-size: 0.88em;
	}
	
	/*BAC. 4/2/14. This applies to the 3-column tables for the Admin Staff. */
	.isotope-item div.admin-directory-horizontal table.horizontal-3-columns {
	min-height: 365px; 
	}
	div.footer-copyright p {
		line-height: 1.2em;
	}
	
	/*BAC. 9/12/14. Navigation buttons for Faculty Carousel at front Page */
	div.faculty-carousel div.flexslider .flex-control-nav {
		bottom: 25px;
	}
	/* BAC. 9/12/14. Text under Navigation buttons for Faculty Carousel at front Page */
	p.faculty-slider-nav-buttons-text {
		margin-top:-73px; 
	}
}

@media (max-width: 767px) { 

	/* Base */
	body.boxed {
		background: none !important;
	}
	body {
		font-size: 14px;
	}
	/* Headings */

	h1 {
		font-size: 2.6em;
		line-height: 39px;
	}
	h2 {
		font-size: 2.1em;
		line-height: 32px;
	}
	h3 {
		font-size: 1.6em;
		line-height: 30px;
	}
	h4 {
		font-size: 1.2em;
		line-height: 24px;
	}
	header,
	/*div.centers-intro,*/
	div.home-concept,
	section.highlight,
	section.featured,
	section.featured.footer,
	section.page-top,
	footer,
	div.footer-copyright,
	div.google-map,
	div.google-map-1 {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	} 
  	header div#name-and-slogan div{
		width: 100%;
	 	font-size: 1.5em;
 	}
  	header div.logo img {
		display: none;
	}
  	.region-header-top .search form {
	  	margin-top: 10px;
  	}
  	/*Overwrite the MD Slider CSS */
	.md-item-wrap { 
	  	margin-left: 0; /* -20px */
	  	margin-right: 0; /* -20px */
  	}
  	.recent-post {
	  margin-bottom: 50px;
  	}
	body.boxed div.body {
		border-bottom: 0;
		border-top: 0;
		box-shadow: none;
		width: auto;
		margin: -20px 0 0 0; /* BAC. this should be all 0 */
	}
	body.boxed header {
		padding: 0;
	}
	header div.search {
		display: block;
		float: none;
		position: absolute;
		right: 0;
		margin: 0;
	}
	/* BAC. Remove the Search Image, since it breaks in Firefox at <767px */
	#search-block-form .form-actions {
	  display: none;
	}
	/* BAC. Increase the text input size a bit */
	.form-item-search-block-form input[type="text"] {
		 width: 120px !important;
		 margin-right: 5px;
		 margin-top: 10px;
		 border-right-color: #f93 !important;
		 border-right-width: 2px;
	}
	header div.search input {
		width: 77% !important;
	}
	/* Mobile Navigation Menu */
	header nav { 
		width: 65%;
	}
	header nav select.selectnav {
		display: block;
		margin-top: 15px;
		width: 100%;
	}
	header nav ul.nav-main,
	header div.social-icons {
		display: none;
	}
	header nav ul.nav-top {
		left: 51%;
		margin-top: 10px;
		position: absolute;
		font-size:0.99em;
	}
	header nav ul.nav-top i {
		display:none; 
	}
	/*
	header div.logo {
		margin-right: 2%;
		margin-left: 5%;
		width: 100%;
	}
	*/
	header div.logo img {
		display:none;
	}
	/* BAC. This is Needed Only when I use the Logo without the Text */
	header h3.show-at-small-dims {
		display: inline !important;
		margin-left: 15px !important;
		margin-top: 10px;	
		padding-top: 10px;
	}
	header div#name-and-slogan div{
	 display: none;
  	}
	.mobile-menu {
	  display: block; 
	  width: 98.5%;
  	} 
	/* Hide at <767px, since for iPads/iPhones users swipe a finger to scroll */
	a.scroll-to-top {
		display: none;
	}
	.sort-destination,
	.isotope-item,
	.mobile-max-width {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 380px;
	}
	.mobile-max-width.small {
		max-width: 200px;
	}
	footer {
		font-size: 0.93em;
	}

	/* Flexslider */
	div.flexslider-center-mobile div.flex-viewport {
		margin-left: auto;
		margin-right: auto;
		max-width: 390px;
	}

	div.flexslider-center-mobile.flexslider-simple {
		margin-left: auto;
		margin-right: auto;
		max-width: 390px;
	}

	/* Custom Tables */
	div.custom-table {
		margin-left: 0px;
	}

	div.custom-table div.plan {
		margin-right: 0;
	}
	div.home-concept {
		background: none;
	}
	/*BAC. Remove the text under the 3 small center images so that they don't overlap */
	div.home-concept strong {
		display: none;
	}
	/*BAC. But keep the text for the Large PNI Image */
	div.home-concept strong.pni-visible {
		display: block;
	}
	div.home-concept span.shadow {
		display: none;
	}
	div.home-concept div.process-image,
	div.home-concept div.project-image {
		margin: 0 auto;
	}
	/* BAC. Center Block just under the MD Slider. NOT USED ANYMORE. But Keep.
	.centers-intro .row {
		font-size: 0.8em;
		font-stretch: extra-condensed;
	}
	.centers-intro a.btn {
		font-size: 0.85em;
		padding: 2px 5px;
	}*/
	
	/* Faculty Carousel - Flexslider - Front Page */
	div.faculty-carousel div.flexslider {
		margin-left: auto;
		margin-right: auto;
		max-width: 300px;
	}	
	
	div.faculty-carousel div.flexslider li{
		font-size: 1.0em;
		text-align:justify;
	}
	
	/*Faculty Carousel Page (faculty Reseach Summary Page) */
	div.faculty-carousel {
		margin-left: auto;
		margin-right: auto;	
		max-width: 250px !important; /* != 300px for a better image quality */
	}	
	
	div.faculty-carousel li{
		font-size: 1.2em;
	}
	
	/* Image Caption for Faculty Research Summary Basic Page */
	div.faculty-carousel div.image-field-caption {
	height: 110px !important; /* BAC. To keep all elements aligned. */
  overflow: hidden; /* BAC. I did it hidden so that the Horizontal scrollbar does not show. */
	}	
	
	/* Image Caption for Faculty Carousel at front page. */
	div.faculty-carousel div.flexslider div.image-field-caption {
		height: 120px !important; /* BAC. To keep all elements aligned at the Front Page */
  		overflow:hidden; /* BAC. I did it hidden so that the Horizontal scrollbar does not show. */
		font-size: 1.0em;
	}
		
	/* Recent News - Front page */
	div.recent-news .row div.flexslider article {
		padding-top: 12px;
		padding-bottom: 12px;

	}
	/* News|Events Archive side Menu. */
	#block-menu-block-5, #block-views-news-events-archive-block {
		display: none; /* remove side menu */
	}	
	/* Upcoming Events side Menu */
	#block-views-calendar-block-2 {
		display: none; /* remove Upcoming events */
	}
	.hide-below-767px {
		display:none !important;
	}
	.md-slide-wrap {
  		border-top: 0;
		border-bottom: 0;
	}
	
	/* BAC. 4/2/14. THIS IS BECOMING A STYLING NIGHTMARE, SINCE I HAVE TO DEAL with multiple devices and screen sizes. 
	Disable it 	FOR NOW. KEEP IT just in case I revert back in the future.
	NOW IT IS like horizontal masonary display instead of Perfectly aligned Tables. This is better for 3-column horizontal 
	display at small screens where  vertical and hizontal scroll-bars appear. 
	Converted the Perfectly aligned Horizontal Display into Masonary Horizontal Display. This is much better for Responsive
	screens, multiple browsers, multiple devices, mimimizing voids (blank spaces), No maintenance nightmareby and also by 
	not showing the vertical (and sometimes the horizontal) scrollbars. Also at small screens (<767px) the Tables will 
	display one after the other in a one column. This is much cleaner alternative for styling.*/
	/*****
	BAC. Isotope Filtering. Administartive Staff Directory and Reasearchers Directory - Horizontal Display aligned.
	.isotope-item div.admin-directory-horizontal {
		height: 345px; 
		overflow: auto;
    }
	.isotope-item div.team-horizontal {
		height: 385px; 
		overflow: auto;
    }
	BAC. Isotope Filtering. Faculty Directory Horizontal Display aligned.
	.isotope-item div.faculty-directory-horizontal {
		height: 540px; 
		overflow: auto;	
	}
	*****/
	
	/*BAC. 4/2/14. At <767px the tables are displayed one after one. Therefore there is No reason to have a larger min-height. 
	Minimize the void. That applies to both 2 and 3 column tables. */
	/* for Students */
	#block-views-students-horizontal-block .isotope-item div.team-horizontal {
		min-height: 200px; /* 410px */
	}
	/* for Researchers */
	#block-views-team-horizontal-block .isotope-item div.team-horizontal {
		min-height: 200px; /* 410px */
	}
	.isotope-item div.faculty-directory-horizontal {
	min-height: 300px; 
	}
	.isotope-item div.admin-directory-horizontal, .isotope-item div.admin-directory-horizontal table.horizontal-3-columns {
	min-height: 260px; 
	}
	
	/* BAC. A hack for IE, Firefox and Opera at <767px screen size. Chrome ans safari, don't mind the Hack. 
	Bootstrap takes over. Isotope Filtering at <767px. Administartive Staff Directory, Researchers Directory 
	and Faculty Directory - Horizontal Display aligned.*/
	.isotope-item div.admin-directory-horizontal table img,.isotope-item div.team-horizontal table img {
		width: 95%; /* Specifying the image width seems to solve the Problem. 100% is too much for the image size. */
		margin-left:-5px;
    }
	.isotope-item div.faculty-directory-horizontal table img {
		width: 95%; /* Specifying the image width seems to solve the Problem. 100% is too much for the image size. */
		margin-left:0px;
    }
	
	/* BAC. The 3 Centers Pages. Reduced the min-height restriction at <767px, since the Logo image is hidden */
	.centers {
	min-height: 50px;  
    }
	/* This is for the maintenance pages only. */
	header div.show-at-small-dims {
		display: inline !important;
		margin: 10px 0 10px 0 !important;
	}
	header div.show-at-small-dims h4 {
		padding-left: 20px !important;
	}
	/* This is for the maintenance pages only. */
	.hide-at-small-screens-1 {
		display: none;
	}
	/* For People Directory: All categories except Admins. */
	.directory-custom-margin{
		margin:0 0 20px 0; 
	}
	/* For Administrative Satff Directory.  */
	.admin-staff-custom-margin{
		margin:0 0 -10px 0; 
	}
	/* People Directory - ALL - Concise - Table Format  AND
	Faculty details - Quick Links Page */
	#block-system-main div.content div.table-bordered table.views-table tr td{
	padding: 4px 5px 4px 2px !important;
	font-size: 0.9em;
	}
	
	/* Hide the Centers Block under the MD slider */
	div#block-block-3 {
		display: none;
	}

	/* BAC. MD SLIDER Hack for <767PXpx. Keep image scale proportional. Resize it starting from the Max window.*/
	.md-mainimg img {
		height: 235px !important; 
		width:767px !important; 
	}
	a.thumb-info span.thumb-info-action-icon {
	font-size: 18px;
	height: 34px;
	line-height: 30px;
	position: absolute;
	right: -34px;
	text-align: center;
	top: -34px;
	width: 34px;
	}

	a.thumb-info span.thumb-info-action-icon i {
	font-size: 14px;
	left: 3px;
	position: relative;
	top: -4px;
	}
	/* This is the Individualized/Single team and faculty member page - vertical Display. In order to scale 
	the image down, it becomes too big > 600px in width at <767px screeen dimension. This also is for the 
	Faculty details pages.*/
	div.team-item, div.faculty-directory-item, div.faculty-wrap img {
	width: 60%;
	}	
	
	/* Hide the file icon image for the PDF - for the attached files at the end of the document. */
	span.file img{
		display:none !important;
	}	
	
	/* 7/17/14. BAC. Thumbnail Images at <767px. This is just for images on pages, 
	articles, faculty testimonials, related Faculty Block, and others BUT NOT for People Directory. 
	Proprietary Extensions:
	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions*/
	
	.thumbnail{
		border: 0 !important;
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
	}
	 .thumbnail span {
		text-align: right !important;
		float:right;
	}
	.thumbnail span.zoom {
		display: none;
	}
	/* Front Page - Faculty carousel. Force this Region to go after the Welcome Section */
	.region-top-right .block-block-51 {
		position: relative;
		z-index: 0;
	}
	/* Hide Slogan */
	#site-slogan {
		display: none !important;
	}
	/*BAC. 9/12/14. Navigation buttons for Faculty Carousel at front Page */
	div.faculty-carousel div.flexslider .flex-control-nav {
		bottom: 15px;
	}
	/* BAC. 9/12/14. Text under Navigation buttons for Faculty Carousel at front Page */
	p.faculty-slider-nav-buttons-text {
		margin-top:-60px; 
	}
	div.member-profile h2{
	margin-top: 10px; /* This is mainly for Responsive. */
  }
	/* BAC. 10/30/2014 . Faculty Directory Tabular Display. Let the text wrap. Remove the restrictions at Responsive,
	   otherwise horizonal bar will appear. Note. In all cases the Table still breaks responsiveness at <560px */
.faculty-directory-tabular-display tr th.views-field-field-phone {
	min-width:30px;
}
.faculty-directory-tabular-display th.views-field-field-name-second-format {
	min-width: 30px;
}
.faculty-directory-tabular-display th.views-field-field-office{
	min-width: 30px;
}
.faculty-directory-tabular-display th.views-field-field-repeat-faculty-directory-c {
	min-width: 30px;
}
.faculty-directory-tabular-display{
	font-size: 0.85em;
}

/* BAC. 11/03/14. Events Only Archive. Let the text wrap. Remove the restrictions at Responsive,
	   otherwise horizonal bar will appear. 
	   Note. The Table HERE does NOT break at responsive, since there are 4 columns.  */
		
.view-events-only-archive table.views-table th.views-field-field-event-date-time{
	min-width: 30px;
}
.view-events-only-archive table.views-table th.views-field-field-event-categoty{
	min-width: 30px;
}
.events-front-page li {
		list-style: none;
	}

}

@media (max-width: 580px) { 
	
	header nav ul.nav-top {
		left: 43%;
		position: absolute;
	}
}

@media (max-width: 480px) { 

	/* Base */
	body {
		font-size: 12px;
	}
	h2 {
		font-size: 1.9em;
		line-height: 29px;
	}
	header nav ul.nav-top {
		left: 30%;
		margin-top: 10px;
		position: absolute;
		font-size:0.99em;
	}
	header nav select.selectnav {
		margin-top: 15px;
	}
	/* Mobile Navigation Menu */
	header nav { 
		width: 75%;
	}
	header div.logo img {
		display: none;
		/*display:block;
		left:15%;
		margin-top:3%;
		position:absolute;*/
	}
	header div#name-and-slogan div{
	 display: none;
  	}
	footer {
		font-size: 0.83em;
	}

	/* Newws articles */
	article.post-large-image div.news-image,
	article.post-large-image div.post-date,
	article.post-large-image {
		margin-left: 0;
	}
	
	/* Page 404 */
	section.page-not-found {
		margin: 0;
	}
	section.page-not-found h2 {
		font-size: 100px;
		letter-spacing: 0;
		line-height: 100px;
	}

	/* Timeline */
	ul.timeline li div.thumb {
		display: none;
	}
	ul.timeline li div.featured-box {
		margin-left: 0;
	}
	
	/* BAC. Centers Block just under the MD Slider. NOT USED ANYMORE. BUT KEEP. 
	.centers-intro .row {
		font-size: 0.7em;
		font-stretch: extra-condensed;
	}
	.centers-intro a.btn {
		font-size: 0.85em;
		padding: 2px 5px;
	}
	*/
	
	.hide-at-small-screens {
		display: none;
	}
	
	/* BAC. 4/2/14. THIS IS BECOMING A STYLING NIGHTMARE, SINCE I HAVE TO DEAL with multiple devices and screen sizes. 
	Disable it 	FOR NOW. KEEP IT just in case I revert back in the future. 
	NOW IT IS like horizontal masonary display instead of Perfectly aligned Tables. This is better for 3-column horizontal 
	display at small screens where  vertical and hizontal scroll-bars appear. 
	Converted the Perfectly aligned Horizontal Display into Masonary Horizontal Display. This is much better for Responsive
	screens, multiple browsers, multiple devices, mimimizing voids (blank spaces), No maintenance nightmareby and also by 
	not showing the vertical (and sometimes the horizontal) scrollbars. Also at small screens (<767px) the Tables will 
	display one after the other in a one column. This is much cleaner alternative for styling.*/
	/*****
	BAC. Isotope Filtering. Administartive Staff Directory and Researchers Doirectory - Horizontal Display aligned.
	.isotope-item div.admin-directory-horizontal {
		height: 360px; 
		overflow: auto;
    }
	.isotope-item div.team-horizontal {
		height: 425px; 
		overflow: auto;
    }
	BAC. Isotope Filtering. Faculty Directory Horizontal Display aligned.
	.isotope-item div.faculty-directory-horizontal {
		height: 515px;
		overflow: auto;	
	}
	******/
	
	/* Events Calendar */
	div.date-heading h3 {
		float:left !important;
		margin-right: 10px;
	}
	
	/* People Directory - ALL - Concise - Table Format AND
     Faculty details - Quick Links Page
  */
	#block-system-main div.content div.table-bordered table.views-table tr td{
	padding: 5px 0 5px 2px !important;
	font-size: 0.88em;
	border-left: 0 !important;
	}
	#block-system-main div.content div.table-bordered table.views-table th {
	background-color: none;
	border-left: 0 !important;
}
	
	/* BAC. MD SLIDER Hack for <480px. Keep image scale proportional. Resize it starting from the Max window.*/
	.md-mainimg img {
		height: 147px !important; 
		width:480px !important; 
	}
	/* Image Caption for Faculty Carousel at front page. */
	div.faculty-carousel div.flexslider div.image-field-caption {
		height: 130px !important; /* BAC. To keep all elements aligned at the Front Page */
  	overflow:hidden;
		font-size: 1.08em;
	}
	/* This is the Individualized/Single team member page - vertical display. Bring the image size to its Natural state.
	This also is for the Faculty details pages. */
	div.team-item, div.faculty-directory-item, div.faculty-wrap img  {
	 width: 100%;
	}
	/* BAC. 4/9/2015. Filter By section Tabular Display */
	div.views-submit-button input#edit-submit-researchers-directory-tabular-display {
		padding: 2px 4px;
	}
	div.views-submit-button input#edit-submit-people-directory-all {
		padding: 2px 4px;
	}	
	div.views-reset-button input#edit-reset {
		padding: 2px 4px;
	}
	.tiny-smaller {
    font-size: 1.0em;
 }
}

@media (max-width: 380px) { 

	div.home-concept div.project-image {
		margin-left: -13%;
	}
	header h1.logo img {
		display:none;
	}
	header nav ul.nav-top {
		left: 17%;
		top:-5px !important;
	}
	.main h2 {
		margin-top:20px !important;
	}
	header h3.show-at-small-dims {
		display: inline !important;
		margin-left: 12px;
		margin-top: 5px;	
	}
	
	/* Buttons: People Directory - ALL - Concise - Table Format AND Faculty details - Quick Links Page
*/
	#edit-submit-people-directory-all, #edit-submit-faculty-details-quick-links{
		font-size: 0.96em !important;
		padding: 2px 4px;
	}
	#block-system-main div.content div.table-bordered #edit-reset{
		font-size: 0.96em !important;
		padding: 2px 4px;
	}
	/* BAC. 4/9/2015. Filter By section Tabular Display */
	div.views-submit-button input#edit-submit-researchers-directory-tabular-display {
		font-size: 0.96em;
	}
	/* Hide the MD slider at the front page. */
	.md-slide-wrap { 
	  	display: none;
  }	
	/* 1/28/15. BAC. Replace the MD Slider */
	.region-before-content {
		border-bottom: 4px solid #f93;
	}
}