/* 

ECPE Responsive CSS Stylesheet - Version 1.1.2.

Created 2012.11.21 by Max DeCurtins

======================
INSTRUCTIONS
======================

This file exists both on DEV/ and LIVE/ in the webbrochures/CSS/ folder; DEV environments will pull from the DEV/ and LIVE/ from the LIVE so we have some method by which to test.

There is no auto-publish mechanism, the file will need to be uploaded and downloaded, and copied manually from DEV to LIVE.

Changes to responsive design that need to take effect immediately should be entered into patch.css. When ready, migrate any responsive CSS out of patch and into this stylesheet. Please delete from patch any old content that has been migrated.

Indenting: Indent all rules that affect nested elements directly under the rule for the element under which it nests. Ex:

	#parentItem {
		
	}
	
		#parentItem .nestedChild {
			
		}
		
			#parentItem .nestedChild nestedElement {
				
			}
			
		#parentItem .anotherNestedChild {
			
		}

======================
CONTENTS						BREAKPOINT

1. Tablet (Portrait)			[max-width: 959px]
1a. Tablet - iPad (Portrait)	[max-width: 768px]
2. Mini-Tablet (Landscape)		[max-width: 640px]
3. Mobile (Landscape)			[max-width: 480px]
3a. Mobile-Wide (Portrait)		[max-width: 360px]
4. Mobile (Portrait)			[max-width: 320px]
5. Browser-specific hacks		N/A
======================

*/

/* N.B. 1008px is the native width of the site container, so all media queries will target progressively decreasing max-widths. */
/* Tablet (Landscape) is 1024px - the widest device width that is not a desktop monitor or a laptop screen. */
@media only screen and (max-width: 1160px) {
	.footer-logo-address {
		padding-left: 20px;
	}

}

/* ====== 1. TABLET (PORTRAIT) ====== */
/* Use tablet portrait format for everything between 768px and 959px */
@media only screen and (max-width: 959px) {
	
	/* === SPECIAL TWEAKS for < 959px === */
	body#PICTUREFLOW #main #breadcrumb {
		margin-bottom: 5px;
		margin-left: 20px;
		padding-left: 0;	
	}
	/* === END SPECIAL TWEAKS === */

	/* Global Navigation */
	#topNavigationHSPH {			/* Hide the main HSPH navigation. */
		display: none;	
	}
	
	nav#global #topNavigationECPE {
		display: block;	
	}

	nav#global ul.topNavigation li:first-child {
		padding-left: 0px;	
	}

	
		/* Brand */
		nav#sub-menu {					/* Hide the ECPE brand links. */
			display: none;	
		}
	
	/* Masthead */
	#masthead {
		margin: 0 auto;
		/* margin-top: 20px; */
		width: 100%;
		max-width: 100%;	
	}
	
		#masthead ul li {
			padding-left: 0px;
			width: 100% !important;
			max-width: 100%;	
		}
		
			#masthead ul li > div:first-child {
				padding-left: 20px;
				width: 315px;	
			}
		
		#masthead a.button {
			left: 239px;	
		}
		
		#masthead img {
			margin-right: 13px;	
		}
		
		#masthead nav.cycle {
			left: 20px;	
		}
	
	#main aside.interior {		/* Hide the left nav. */
		display: none;	
	}			
	
		/* Hide content buckets under left nav. Unnecessary when whole aside is hidden, but will need to be implemented when left nav is available. */
		#main aside.interior div.NavLeftContent {		
			display: none;	
		}
	
	/* Content */
	#content {
		margin: 0;
		padding-left: 20px;
		padding-right: 20px;
		width: auto;
		max-width: auto;	
	}
		
		#content aside {
			float: left;
			width: 25%;
			max-width: 25%;	
		}
		
			#content aside.content p {
				line-height: 18px;
			}
			
	#content p {
		font-size: 14px;
		line-height: 28px;	
	}		
	
	#content .ten.columns {			/* Content .ten.columns and content aside do not add up to 100% width to account for margins and padding. */
		width: 72%;
		max-width: 72%;	
	}
	
	/* Success Stories*/
	#content .success_stories_main {
		width: 100%;	
	}
		
	#successStoriesContainer li .headshot {
		width: 11%;
		max-width: 11%;	
	}
	
		#successStoriesContainer li .headshot a img {
			width: 80px;	
		}
		
	#content #pictureDiv .gray_boxSnippet {
		display: none;		
	}
	
	/* Request Information */
	#promotionsContent {
		width: 45%;
		max-width: 45%;
	}
	
	#promotions {
		padding-left: 20px;	
	}

		#promotions .promotions_content li {
			font-size: 14px;	
		}
	
		#promotions .promotions_content h2 {
			font-size: 18px;	
		}
	
	#information_request {
		margin-left: 330px;
	}	
	
	/* Upcoming Programs */
	#upcoming-programs {
		margin-bottom: 24px;	
	}
	
	#upcoming-programs .upcoming-programs {
		padding-left: 2.5%;
		width: 60%;
		max-width: 60%;	
	}
	
	/* Find ECPE Online */
	#ECPEOnline {
		width: 30%;
		max-width: 30%;	
	}
	
	/* Footer */




	
	/* Sitemap */
	#sitemap {
		padding-left: 20px;
		width: 100%;
		max-width: 100%;	
	}
	
		#sitemap #left_side {
			width: 30%;
			max-width: 30%;	
		}
		
		#sitemap #right_side {
			width: 60%;
			max-width: 60%;	
		}
			
			#sitemap #right_side .column_one,
			#sitemap #right_side .column_two {
				width: 50%;
				max-width: 50%;	
			}
}



@media screen and (max-width: 830px) {

	.footer-logo {
		display: inline-block;
	}

	.footer-nav {
		float: none;
		padding-left: 65px;
		margin-left: 0;
		margin-right: 0;
		display: block;
		margin-bottom: 7px;
		width: auto;
	}

	.footer-logo-address .vcard {
		display: inline-block;
	}
}


/* ===================== 1a. TABLET - iPAD (PORTRAIT) SPECIFIC TO 768px and below =========================== */
@media only screen and (max-width: 768px) {
	
	/* Global Navigation */
	nav#global {
		width: 100%;
		max-width: 100%;
	}

	#topNavigationECPE_RequestInfo {
		display: none;	
	}
	
		/* Brand */
		h6#logo {
			margin-left: 0;	
		}
	
			h6#logo a {
				background-position: 10% 50%;
				width: auto;	
			}
			
	/* Breadcrumb */
	#breadcrumb {
		margin-left: 20px;	
		margin-bottom: -10px;
		padding-left: 0;
	}	
	
	/* Main */
	#main > h1 {					/* Hide the "red dot" ECPE h1. */
		display: none;
	}
	
		/* Content */
		#content h2.red {
			font-size: 16px;
			font-weight: bold;	
		}
		
		#content .progFinderGraphic {	/* Hide the Program Finder graphic. */
			display: none;	
		}
		
			/* Finder */
			#finderDescription {
				margin-right: 30px;
				width: 40%;
				max-width: 40%;	
			}
				
				#finderDescription p {
					font-size: 13px;
					line-height: 20px;	
				}
			
			#ProgFind {
				margin-bottom: 20px;	
			}
					
		  .finder .finder_body tbody .program_hover {
			  display: none !important;	
		  }
			
	/* Program Pages */
	#content #pictureDiv #mobileNavigation {
		display: block;
		margin-top: 15px;
		margin-bottom: 15px;	
	}
	
		#mobileNavigation label {
			font-size: 14px;
			margin-right: 5px;	
		}
		
		#mobileNavigation select {
			font-size: 14px;	
		}		
		
	/* Registration */
	#need_help {
		margin-top: 20px;
		width: 20%;
		display: none;	
	}
	
		#need_help a,
		#need_help p {
			font-size: 11px;
			line-height: 20px;	
		}
	
	#content #registration_container {
		margin-left: 20px;	
	}
	
	#content #registration_container #need_help h4 {
		font-size: 12px;	
	}
	
	#registration {
		width: auto;
		max-width: 100%;	
	}
		
	/* Notifications */
	section#notifications {
		padding: 15px 0px;
		width: 100%;
		max-width: 100%;	
	}
	
		#notifications a.next,
		#notifications a.prev,
		.jcarousel-next, .jcarousel-prev {
			top: 40px;	
		}
		
		#notifications a.next,
		.jcarousel-next {
			right: 10px;	
		}
		
		#notifications a.prev,
		.jcarousel-prev {
			left: 10px;	
		}
		
		#notifications .container {
			width: 100%;
			max-width: 100%;	
		}
	
		#notifications img {
			width: 150px;
			max-width: 150px;
			height: auto;	
		}
		
		#notifications h3 {
			font-size: 11px;	
		}
		
		#notifications h4 {
			margin-top: 0;	
		}
		
		#notifications h4 a:link,
		#notifications h4 a:visited {
			font-size: 14px;
			margin-bottom: 0;
		}
		
		#notifications ul {
			margin-left: 37px !important;	
		}
		
		#notifications li div p {
			display: none;	
		}
		
		#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item {
			width: 350px !important;
		}
		
			#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item > div:last-child {
				width: 120px;	
			}
	
	/* Footer */






}























/* ====== 2. MINI-TABLETS (LANDSCAPE) ====== */
@media only screen and (max-width: 640px) {
	
	/* Global Navigation */
	nav#global ul.topNavigation li:first-child {
		padding-left: 10px;	
	}
	
	#topNavigationECPE_Custom {
		display: none;	
	}

	/* Main */
	
		/* Masthead */
		#masthead {
			display: none;	
		}
		
	/* Content */
	
		/* Finder */
		#finderDescription {
			margin-right: 20px;	
		}
		
		#ProgFind {
			width: 50%;
			max-width: 50%;
			padding: 20px 15px;	
		}
	
			#ProgFind label {
				font-size: 11px;
				width: 30%;
				max-width: 30%;	
			}
			
			#ProgFind select {
				width: 31%;
				max-width: 31%;	
			}
			
			#ProgFind select.full {
				width: 64%;
				max-width: 64%;	
			}
		
		.finder .finder_body tbody .date,
		.finder .finder_body tbody .title {
			font-size: 14px;	
			line-height: 18px;
		}	
	
	#content aside.content a:link,
	#content aside.content a:visited {
		font-size: 12px;
	}
		
	#content .gray_box {
		width: 60%;
		max-width: 60%;
	}
	
		#content .gray_box img {
			width:100%;
			max-width: 100%;
			height: auto;	
		}	
	
		/* Program Pages */
		#content #programTitle,
		#content #programLocation {
			font-size: 18px;	
		}
	
	.content .related_programs {
		margin-top: 150px; 	
	}
	
	#content .ten.columns {
		width: 67%;
		max-width: 67%;	
	}
	
	#content h1,
	#content h2,
	#content h3,
	#content h4,
	#content h5 {
		font-size: 14px;	
	}

	#content p,
	#content ul,
	#content ol {
		font-size: 11px;
		line-height: 20px;	
	}
	
	/* Success Stories */
	#successStoryPreambleDiv {
		font-size: 14px;	
	}
	
	.success_stories_main #successStoryListHeader {
		margin-top: 20px;	
	}
	
		#successStoryListHeader div h3 {
			font-size: 14px;	
		}
	
	#successStoriesContainer li .story {
		width: 50%;
		max-width: 50%;
	}
	
		#successStoriesContainer li .story h4 {
			font-size: 12px;	
		}
	
	#successStoriesContainer li div p {
		font-size: 12px;	
	}
	
	/* Notifications */
	
		#notifications a.next,
		#notifications a.prev,
		.jcarousel-next, .jcarousel-prev {
			top: 30px;	
		}
		
		#notifications a.next,
		.jcarousel-next {
			right: 10px;	
		}
		
		#notifications a.prev,
		.jcarousel-prev {
			left: 10px;	
		}

		#notifications img {
			width: 120px;
			max-width: 120px;
			height: auto;	
		}
		
		#notifications ul {
			margin-left: 37px !important;	
		}
		
		#notifications li div p {
			display: none;	
		}
		
		#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item {
			width: 300px !important;
		}
	
	/* Footer */





		
}


@media screen and (max-width: 550px) {

	.footer-nav {
		display: block;
		margin: 14px 20px;
		margin-bottom: 7px;	
		padding-left: 0;
	}

	.footer-menu-toggle {
		display: block;
	}

	#footer-main-menu div:last-child {
		display: none;
	}

	.footer-menu-toggle .dashicons-arrow-down, .footer-menu-toggle .dashicons-arrow-up {
		display: block !important;
	}

	#footer-main-menu ul li {
		display: block;
		width: auto;
	}

}


/* ====== 3. MOBILE (LANDSCAPE) ====== */
@media only screen and (max-width: 480px) {
	
	/* Special Conditions for < 480px */
	/****************************************/
	body#promotions-screen #content {
		margin-left: 0;						/* On Promotions pages ONLY, set the content area to have no margin. */
	}
	/****************************************/
	
	/* Global Navigation */
	#topNavigationECPE_Credit {
		display: none;	
	}

	#topNavigationECPE_Home span {
		display: none;	
	}
	
	/* Brand */
	h6#logo {
		margin-left: 0;	
	}
	
	/* Breadcrumb */
	#breadcrumb {
		font-size: 12px;
		margin-bottom: -10px;
	}
	
	/* Main */
	#main h4 {
		font-size: 14px;	
	}	
	
		/* Content */
		#content .ten.columns {
			width: 100%;
			max-width: 100%;	
		}
		
			#content aside {			/* Hide the right aside. */
				display: none;	
			}
	
		/* Content - Finder */
		#finderDescription {
			width: 100%;
			max-width: 100%;	
		}
		
		#ProgFind {
			width: 90%;
			max-width: 90%;
			margin-top: 10px;	
		}
		
			#ProgFind label {
				font-size: 14px;	
			}
		
		/* Content - Program Pages */
		#content #templatePictureBox {
			display: none;	
		}
		
		#content .program .title {
			font-size: 18px;	
			width: 100%;
			max-width: 100%;
		}
		
		#content #pictureDiv .program .partQuoteText {
			font-size: 12px;
			line-height: 20px;	
		}
		
		#content #pictureDiv .program blockquote {
			font-size: 12px;	
		}
		
			/* Program Page Faculty */
			#faculty-bio header {
				margin-bottom: 10px;	
			}
			
			.facultyTypeHeader {
				font-size: 16px;	
			}
			
			#faculty-bio .facultyContainer,
			#faculty-bio .facultyContainer .facultyDivision {
				font-size: 12px;
				line-height: 20px;	
			}
			
			#faculty-bio .facultyContainer .facultyName {
				font-size: 14px;	
			}
		
		/* Success Stories */
		#successStoryListHeader div h3 {
			font-size: 12px;	
		}
		
		#successStoryListHeader #successStoryTitleHeader {
				float: left;
				width: 66%;
				padding-left: 2%;	
			}
			
		#successStoryListHeader #successStoryProgramAttendedHeader {
			float: right;
			width: 32%;	
		}
		
		#successStoriesContainer li .story {
			width: 50%;
			max-width: 50%;
		}
		
			#successStoriesContainer li .story h4 {
				font-size: 11px;	
			}
		
		#successStoriesContainer li div p {
			font-size: 11px;	
		}
				
		#successStoriesViewMoreListings {
			margin-bottom: 5px;	
		}
		
		#successStoriesViewMoreListings,
		#successStoriesProgramCalendar {
			font-size: 11px;	
		}
		
		/* Information Request */
		#promotions {
			padding-left: 0;
			margin-left: -20px;
			margin-top: 20px;	
			width: 100%;
			max-width: 100%;
		}
	
			#promotions .promotions_content {
				margin-left: 0;
				margin-top: 840px;
				width: 100%;
				max-width: 100%;	
			}
			
			#promotions .promotions_content #LandCol1 {
				display: none;	
			}
	
		#information_request {
			margin-left: 0;
			margin-top: -820px;
			width: 100%;
			max-width: 100%;	
		}
	
			#information_request .form_input {		/* Hide all info request form elements. */
				display: none;	
			}
			
			#information_request .mobilePriority {			/* Only show the required form items. */
				display: block;	
			}
			
			#information_request .information_request_content input {
				width: 90%;
			}
			
			#information_request .information_request_content label {
				padding-left: 5px;
				width: auto;	
			}
			
			#information_request .information_request_content .please_select {
				padding-left: 0px;
			}
			
			#information_request .information_request_content ul {
				padding-left: 0px;	
			}	
	
	/* Registration */
	#content #registration_container {
		margin-left: 0;	
	}
	
	.regFormLineLeft, .regFormLineRight {
		margin: 0;
		width: 100%;
		max-width: 100%;
		float: left;	
	} 
			
	/* Notifications */
	section#notifications {
		margin-bottom: 15px;
		padding: 10px 0px;	
	}
	
		#notifications a img {				/* Hide images in the rolodex. */
			display: none;	
		}
		
		#notifications a.next,
		#notifications a.prev,
		.jcarousel-next, .jcarousel-prev {
			top: 25px;	
		}
		
		#notifications h3 {
			font-size: 12px;	
		}
		
		#notifications h4 {
			margin-top: 0;	
		}
		
		#notifications h4 a:link,
		#notifications h4 a:visited {
			font-size: 14px;
			margin-bottom: 0;
		}
				
		#notifications a.next,
		.jcarousel-next {
			right: 10px;	
		}
		
		#notifications a.prev,
		.jcarousel-prev {
			left: 10px;	
		}
	
		#notifications .jcarousel-clip-horizontal {
			padding-left: 0;	
		}
		
			#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item {
				width: 195px !important;
			}
			
			#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item > div:last-child {
				width: 195px;	
			}	
		
	/* Social Media */
	#ECPEOnline {
		float: right;
		margin-bottom: 10px;	
	}
	
	.container .social-media > h4 {
		display: none;		
	}
	
		.container .social-media a span {
			display: none;	
		}
		
		.container .social-media ul li {
			display: inline;	
		}
	
	.container .upcoming-programs {		/* Hide upcoming programs. */
		display: none;	
	}
	
	/* Footer */









}

/* ======= 3a. MOBILE-WIDE (PORTRAIT) ====== */
@media only screen and (max-width: 360px) {
	
	/* Global Navigation */
	
	/* Brand */
	h6#logo a {
		background: url(/web/20160308185057im_/https://ecpe.sph.harvard.edu/images/layout/bg/logo-HSPH-small.png) no-repeat scroll 10% 50% transparent;
		width: 100%;
		max-width: 100%;	
	}
	
	/* Content */
	
		/* Finder */
		#content.program_finder_container {
			padding: 0;	
		}
		
		#finderSearch {
			margin: 20px 20px;
		}
		
		#finderDescription {
			margin: 0;
		}
		
		#finderDescription p {
			display: none;	
		}
		
		#ProgFind {
			padding: 20px 10px;
			margin-top: 0;
			width: auto;
			max-width: auto;
		}
		
			#ProgFind label {
				font-size: 11px;	
			}

		.finder .finder_body tbody .date,
		.finder .finder_body tbody .title {
			font-size: 11px;	
			line-height: 18px;
		}
		
		.finder .finder_body tbody .date {
			width: 30%;
			max-width: 30%;	
		}

	/* Notifications (Rolodex) */
	#notifications .jcarousel-clip-horizontal {
		padding-left: 20px;	
	}
	
	#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item {
		width: 290px !important;
	}
	
	#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item > div:last-child {
		width: 290px;	
	}
		
	/* Upcoming Programs */
	#upcoming-programs {
		margin-bottom: 0;
		padding-left: 0;
		width: 100%;
		max-width: 100%;
	}
	
		#upcoming-programs #ECPEOnline {
			width: inherit;
			max-width: inherit;	
		}
	
		#ECPEOnline ul#ECPEOnlineItems {
			float: right;
			margin-bottom: 20px;	
			margin-right: 15px;
		}
		
	/* Footer */







}

/* ====== 4. MOBILE (PORTRAIT) ====== */
@media only screen and (max-width: 320px) {
	
	/* Global Navigation */
	nav#global a:link,
	nav#global a:visited {
		font-size: 16px;	
	}
	
	nav#global ul.topNavigation li:first-child {
		padding-left: 10px;	
	}
	
	/* Breadcrumb */
	#breadcrumb {
		display: none;	
	}
	
	/* Content */
	
		/* Finder */
		#ProgFind {
			width: auto;
			max-width: inherit;	
		}
	
		/* Program Pages */
		#content #programTitle,
		#content #programLocation {
			font-size: 16px;	
		}
	
		#agendaDisplay .main {
			font-size: 11px;	
		}
	
	/* Registration */

	
	#contactInputContainer #CPREFIX,
	#billingInputContainer #BPREFIX {
		width: 40px;	
	}
	
	#contactInputContainer #CFNAME,
	#billingInputContainer #BFNAME {
		width: 65px;	
	}
	
	#contactInputContainer #CMNAME,
	#billingInputContainer #BMNAME {
		width: 20px;
	}
	
	#contactInputContainer #CLNAME,
	#billingInputContainer #BLNAME {
		width: 65px;	
	}
	
	#registration .contact_info .half input {
		width: 115px;
		margin-bottom: 6px;
	}
	
	#registration .contact_info .half select {
		width: 115px;
		margin-bottom: 6px;
	}
	
	#registration #COMMENTS {
		width: 90%;
		max-width: 90%;	
	}
		
	/* Success Stories */
	.success_stories_main > a:first-child {			/* Hide success story submission on phones. */
		display: none;	
	}
	
	#successStoryPreambleDiv {
		font-size: 12px;
		line-height: 20px;
	}
	
	#successStoryListingTable thead td {
		font-size: 11px;
		line-height: 20px;	
	}
	
	#successStoryListingTable tbody tr .story p {
		display: none;	
	}
	
	/* Notifications (Rolodex) */
	section#notifications {
		margin-bottom: 15px;
		padding: 10px 0px;	
	}
		
		#notifications a.prev,
		.jcarousel-prev {
			left: 10px;	
		}
		
		#notifications a.next,
		.jcarousel-next {
			right: 10px;	
		}
		
		#notifications .jcarousel-clip-horizontal {
			padding-left: 10px;	
		}
	
		#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item {
			width: 250px !important;
		}
		
		#notifications .container .jcarousel-container .jcarousel-clip ul.jcarousel-list li.jcarousel-item > div:last-child {
			width: 230px;	
		}	
		
	/* Footer */




		
}

/* ====== BROWSER-SPECIFIC HACKS (ALL resolutions) ====== */

/* IE-specific hacks [begin] */
.lt-ie9 nav#global #topNavigationECPE {
	display: none;	
}

	/* IE7-specific [begin] */
	.lt-ie8 nav#global #topNavigationHSPH li {
		float: left;	
	}
	
	.lt-ie8 #promotions {
		margin-left: -200px;	
	}
	
	/* Main Pages */
	.lt-ie8 #content .program #programTitle {
		width: 380px;
	}
	
	/* Register Button on Program Pages - fixes whitespace */
	.lt-ie8 #content .program #registerButton {
		clear: none;
	}
	/* IE7-specific [end] */

/* IE-specific hacks [end] */
/*
     FILE ARCHIVED ON 18:50:57 Mar 08, 2016 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 09:10:39 Feb 15, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.555
  exclusion.robots: 0.048
  exclusion.robots.policy: 0.038
  esindex: 0.009
  cdx.remote: 46.41
  LoadShardBlock: 146.63 (3)
  PetaboxLoader3.datanode: 141.471 (4)
  PetaboxLoader3.resolve: 97.779 (2)
  load_resource: 131.303
*/