/* 
 General timeline styles 
 
 Id = $Id: timeline.css 5519 2018-03-09 17:49:22Z sschatz $
 URL = $URL: https://dev-wbm-svn.dev.uspto.gov/repos/live/static_content/trunk/10millionpatents/timeline.css $
 
*/

.intro-video {
	width: 90%;
	max-width: 700px;
	margin: 10px auto 20px auto;
}

.intro-video iframe {
	border-top: 2px solid #ffe5c4;
	border-bottom: 2px solid #ffe5c4;
}

.event-listing {
	background: url(images/thin-timeline-bg.png) repeat-y left 15px top;
	margin: 0 auto;
	padding-bottom: 60px;
}

.event-node, 
.event-animation-switch,
.event-node.major .event-date, 
.event-node.major .event-desc, 
.intro-video, 
.event-node.design-example .event-date, 
.event-node.design-example .event-desc, 
.event-node.design-example .event-image-space, 
.event-node.design-example .event-image-zoom, 
.event-node.patent-example .event-date, 
.event-node.patent-example .event-image-space  {
	position: relative;
}

.event-node {
	padding-left: 30px;
	margin-top: 100px;
	margin-bottom: 0px;
	display: inline-block;
	width: 100%;
}

.event-node:after {
  content: "";
  display: block;
  clear: both;
}

.top, .bottom, .marker, .event-node.major:before, .event-node.design-example .event-image-space:before {
	position: absolute;
}

.marker {
	background: url(images/P10M-TL_Marker.png) left top no-repeat;
	/*height: 100%;*/
	height: 24px;
	width: 25px;
	z-index: 1;
}

.event-node.standard {
	background: url(images/P10M-TL_Marker.png) left 4px top 20px no-repeat;
}

.event-desc, .event-image-zoom  {
	padding: 5px 15px 0 0;
}

.event-desc, .event-image-zoom  {
	font-size: 13px;
}

.event-node.design-example .marker {
	margin-left: -26px;
	/*margin-top: -106px;*/
	margin-top: 62px;
	z-index: 3;
}

.event-node.design-example .event-date {
	font-size: 70px;
	z-index: 2;
}

.event-node.design-example .event-image-space {
	margin-top: -25px;
	margin-left: -15px;
	border-top: 1px solid;
    border-bottom: 1px solid;
    padding-left: 15px;
    padding-right: 0;
    margin-right: 10px;
	z-index: 1;
}

.event-node.design-example .event-image-space:before {
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, #5e0000, transparent);
	opacity: 0.3;
	height: 30px;
	z-index: 3;
}

.event-node.design-example .event-image-space img {
	width: 100%;
}

.event-node.design-example .event-image-space .zoom {
	width: 30px;
	height: 30px;
	position: absolute;
	/*right: 80px;
	bottom: 40px;*/
	right: 40px;
	bottom: 15px;
	z-index: 2;
}

.event-node.design-example .event-image-space .zoom .icon-badge {
	display: inline-block; 
	padding: 3px; 
	margin: 4px; 
	background-color: #eee; 
	width: 30px; 
	height: 30px; 
	text-align: center; 
	border-radius: 50%;
}

.event-node.design-example .event-desc {
	font-weight: 600;
}

.event-node.design-example .event-image-zoom {
	/*font-size: 13px;*/
}

.event-date {
	font-family: Cambria, Georgia, serif;
	font-size: 40px;
}

@supports (font-variant-numeric: oldstyle-nums) {
  .event-date {
      font-feature-settings: onum;
      font-variant-numeric: oldstyle-nums;
  }
}

.event-node.patent-example .marker {
	left: 4px;
	top: 236px;
}

.event-node.patent-example .event-date {
	/*font-size: 60px;*/
	padding-top: 20px;
	font-size: 35px;
	margin-left: -8px;
	z-index: 2;
}

.event-node.patent-example .event-image-space {
	width: 293px;
	height: 231px;
	margin-top: -52px;
	/*margin-left: 45px;*/
	margin-left: -5px;
}

.event-node.patent-example .event-image-space img {
	width: 100%;
}

.event-node.patent-example .event-desc {
	text-align: left;
	padding: 10px;
	max-width: 375px;
}

.event-node.patent-example .event-desc .invention-name {
	display: block;
	font-weight: 600;
	font-size: 15px;
	padding-bottom: 10px;
}

.event-node.patent-example .event-desc .invention-details {
	display: block;
	font-size: 14px;
}

.cboxTitleTimeline {
	text-align: left;
	padding: 5px 12px;
}

.event-listing-header, .event-listing-footer {
	/*background: url(images/P10M-Mobile_BottomScrol.png) no-repeat center top;
	background-size: contain;*/
	height: 83px;
	margin-left: 3px;
}

/* iPhone 6 */
@media (min-width: 375px) {
	.event-node.patent-example .marker {
		top: 264px;
	}

	.event-node.patent-example .event-image-space {
		width: 331px;
		height: 260px;
	}
}

@media (min-width: 400px) {
	.event-node.patent-example .marker {
		top: 303px;
	}

	.event-node.patent-example .event-image-space {
		width: 380px;
		height: 299px;
	}
}

@media only screen and (orientation: landscape) {
	.title-node h2 {
		margin-top: 200px;
	}
	.title-node p {
		padding-top: 100px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
	.intro-video {
		margin-bottom: 50px;
	}
	
	.title-node {
		max-width: 700px;
		margin: 0 auto;
		padding-top: 25px;
		background: url(images/P10M-PatentScript.png) top left no-repeat;
		border: none;
	}
	
	.title-node .title-heading {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
	
	.title-node h2 {
		margin-left: 480px;
		margin-top: 0;
		font-size: 40px;
		text-align: left;
	}

	.title-node p {
		padding: 10px 20px 10px 0;
		margin-top: 30px;
		background: none;
	}
	
	.event-listing {
		background: url(images/thin-timeline-bg.png) repeat-y center top;
		padding-top: 40px;
	}
	
	.event-listing-header, .event-listing-footer {
		background: url(images/P10M-TL_TopScroll.png) no-repeat center top;
		height: 83px;
		margin-left: 3px;
	}
	
	.event-listing-footer {
		margin-top: 60px;
		-moz-transform: scaleY(-1);
		-o-transform: scaleY(-1);
		-webkit-transform: scaleY(-1);
		transform: scaleY(-1);
		filter: FlipV;
		-ms-filter: "FlipV";
	}
	
	.marker {
		background: url(images/P10M-TL_Marker.png) left top 237px no-repeat;
		height: 100%;
		width: 25px;
		z-index: 1;
	}
	
	.event-node {
		width: 700px;
		margin: 150px auto 0 auto;
		padding: 0;
		display: block;
	}
	
	.event-node.back-to-top {
		text-align: center;
		margin-top: 50px;
	}
	
	.event-desc, .event-image-zoom  {
		font-size: 15px;
	}
	
	/* Standard events */
	
	.event-node.standard {
		display: flex;
		height: auto;
		background-position: center center;
		flex-direction: row;
		align-items: center;
	}
	
	.event-node.standard.right {
		flex-direction: row-reverse;
	}

	.event-node.standard .event-date, .event-node.standard .event-desc {
		display: inline-block;
		vertical-align: middle;
		width: 450px;
	}

	.event-node.standard .event-date, .event-node.standard.right .event-desc {
		padding-right: 40px;
		padding-left: 50px;
		text-align: right;
	}

	.event-node.standard .event-desc, .event-node.standard.right .event-date {
		padding-right: 50px;
		padding-left: 40px;
		text-align: left;
	}
	
	/* Design Examples */
	
	.event-node.design-example {
		width: 500px;
		min-height: 450px;
		text-align: center;
	}
	
	.event-node.design-example .marker {
		display: none;
	}
	
	.event-node.design-example .event-date, .event-node.design-example .event-desc {
		width: 48%;
		display: inline-block;
		vertical-align: middle;
	}

	.event-node.design-example .event-date {
		font-size: 80px;
		/*text-align: right;*/
		padding-right: 10px;
		width: 100%;
		margin-left: -180px;
	}

	.event-node.design-example .event-desc {
		text-align: center;
		font-size: 18px;
		line-height: 25px;
		padding-left: 20px;
		padding-top: 8px;
		background: url(images/click-bg.png) repeat-y center top;
		z-index: 0;
	}

	.event-node.design-example .event-image-space {
		margin-top: -26px;
		width: 100%;
		/*margin-bottom: 1px;*/
		margin-bottom: -34px;
		border: 0px;
		max-width: 434px;
		left: 32px;
		z-index: 1;
	}
	
	.event-node.design-example .event-image-space:before {
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom, #5e0000, transparent);
		opacity: 0.3;
		height: 30px;
		z-index: 3;
	}
	
	.event-node.design-example .event-image-space:before {
		max-width: 434px;
	}
	
	.event-node.design-example .event-image-space a, .event-node.design-example .event-image-space .top, .event-node.design-example .event-image-space .bottom, .event-node.design-example .event-image-space .zoom {
		position: relative;
		display: inline-block;
	}
	
	.event-node.design-example .event-image-space a {
		margin-top: -78px;
		z-index: 2;
	}

	.event-node.design-example .event-image-space .top {
		background: url(images/P10M-Design-TopBorder.png) no-repeat top left;
		height: 73px;
		width: 506px;
		top: -28px;
		/*left: 50%;
		margin-left: -290px;*/
		margin-left: -72px;
		z-index: 1;
	}

	.event-node.design-example .event-image-space .bottom {
		background: url(images/P10M-Design-BottomBorder.png) no-repeat bottom right;
		height: 76px;
		width: 508px;
		margin-top: -46px;
		/*bottom: -30px;
		left: 50%;
		margin-left: -217px;*/
		z-index: 1;
	}
	
	.event-node.design-example .event-image-space img {
		/*width: 90%;*/
	}
	
	.event-node.design-example .event-image-space .zoom {
		width: 30px;
		height: 30px;
		position: absolute;
		/*right: 80px;
		bottom: 40px;*/
		right: 70px;
		bottom: 75px;
		z-index: 2;
	}

	.event-node.design-example .event-image-zoom  {
		width: 100%;
		padding: 12px;
		border-bottom: 2px solid #ffe5c4;
		background: url(images/click-bg.png) repeat-y center top;
		max-width: 434px;
		display: inline-block;
	}

	.event-node.design-example .event-image-zoom a {
		color: #ffe5c4;
	}
	
	/* Patent Examples */
	
	.event-node.patent-example {
		text-align: center;
		margin-top: 150px;
		width: 400px;
	}

	.event-node.patent-example .marker {
		background-position: left center;
		height: 24px;
		left: 50%;
		margin-left: -12px;
		top: 32px;
		/*top: -2px;*/
	}

	.event-node.patent-example .event-date {
		font-size: 60px;
		margin-left: -230px;
		padding-top: 0;
	}
	
	.event-node.patent-example .event-image-space {
		height: 347px; /*365px*/
		width: 400px;
		background: url(images/click-bg.png) repeat-y left 198px top;
		margin-top: -42px;
		margin-left: 0;
	}
	
	.event-node.patent-example .event-desc {
		padding: 10px 10px 18px 10px;
		max-width: 400px;
		border-bottom: 2px solid #ffe5c4;
		/*margin-top: -9px;*/
		background: url(images/click-bg.png) repeat-y center top;
		text-align: center;
	}

	.event-node.patent-example .event-desc, .event-node.patent-example .event-image-space img {
		position: relative;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
	.intro-video .top {
		height: 78px;
		width: 804px;
		position: absolute;
		top: -27px;
		left: -105px;
		background: url(images/P10M-Video-TopBorder.png) top left no-repeat;
	}
	
	.intro-video iframe {
		border-top: none;
	}
	
	.title-node {
		max-width: 900px;
		padding-top: 20px;
	}
	
	.title-node h2 {
		margin-left: 465px;
	}

	.title-node p {
		margin-left: 465px;
		margin-top: 0;
	}
	
	.event-node {
		width: 950px;
	}
	
	.event-node.standard .event-date, .event-node.standard .event-desc {
		width: 475px;
	}
	
}

/* Patent images */
.patent-image {
	height: 100%;
	width: 100%;
}


.thornton {
	background: url(images/timeline/patents/mobile/1802-Thornton.png) no-repeat center;
	background-size: contain;
}

.ruggles {
	background: url(images/timeline/patents/mobile/1836_Ruggles.png) no-repeat center;
	background-size: contain;
}

.lincoln {
	background: url(images/timeline/patents/mobile/1849_Lincoln.png) no-repeat center;
	background-size: contain;
}

.barton {
	background: url(images/timeline/patents/mobile/1855-Barton.png) no-repeat center;
	background-size: contain;
}

.whitman {
	background: url(images/timeline/patents/mobile/1863-Whitman.png) no-repeat center;
	background-size: contain;
}

.greenwood {
	background: url(images/timeline/patents/mobile/1877_earmuffs.png) no-repeat center;
	background-size: contain;
}

.second-fire {
	background: url(images/timeline/patents/mobile/1877-SecondFire.png) no-repeat center;
	background-size: contain;
}

.liberty {
	background: url(images/timeline/patents/mobile/1879_Statue.png) no-repeat center;
	background-size: contain;
}

.wheeler {
	background: url(images/timeline/patents/mobile/1891_toiletroll.png) no-repeat center;
	background-size: contain;
}

.samuelson {
	background: url(images/timeline/patents/mobile/1915_coke.png) no-repeat center;
	background-size: contain;
}

.burbank {
	background: url(images/timeline/patents/mobile/1932_Burbank.png) no-repeat center;
	background-size: contain;
}

.rohwedder {
	background: url(images/timeline/patents/mobile/1932-sliced.png) no-repeat center;
	background-size: contain;
}

.disney {
	background: url(images/timeline/patents/mobile/1940-Disney.png) no-repeat center;
	background-size: contain;
}

.lamarr {
	background: url(images/timeline/patents/mobile/1942-Lamarr.png) no-repeat center;
	background-size: contain;
}

.zamboni {
	background: url(images/timeline/patents/mobile/1953_Zamboni.png) no-repeat center;
	background-size: contain;
}

.alderson {
	background: url(images/timeline/patents/mobile/1961_Crashtest.png) no-repeat center;
	background-size: contain;
}

.englebart {
	background: url(images/timeline/patents/mobile/1970_mouse.png) no-repeat center;
	background-size: contain;
}

.bowerman {
	background: url(images/timeline/patents/mobile/1972_Nike.png) no-repeat center;
	background-size: contain;
}

.coin {
	background: url(images/timeline/patents/mobile/1975_USPTO.png) no-repeat center;
	background-size: contain;
}

.bra {
	background: url(images/timeline/patents/mobile/1978_Bra.png) no-repeat center;
	background-size: contain;
}

.ipod {
	background: url(images/timeline/patents/mobile/2007_ipod.png) no-repeat center;
	background-size: contain;
}


@media (min-width: 768px) {

	.thornton {
		background: url(images/timeline/patents/1802-Thornton.png) no-repeat center;
	}

	.ruggles {
		background: url(images/timeline/patents/1836_Ruggles.png) no-repeat center;
	}

	.lincoln {
		background: url(images/timeline/patents/1849_Lincoln.png) no-repeat center;
	}

	.barton {
		background: url(images/timeline/patents/1855-Barton.png) no-repeat center;
	}

	.whitman {
		background: url(images/timeline/patents/1863-Whitman.png) no-repeat center;
	}

	.greenwood {
		background: url(images/timeline/patents/1877_earmuffs.png) no-repeat center;
	}

	.second-fire {
		background: url(images/timeline/patents/1877-SecondFire.png) no-repeat center;
	}

	.liberty {
		background: url(images/timeline/patents/1879_Statue.png) no-repeat center;
	}

	.wheeler {
		background: url(images/timeline/patents/1891_toiletroll.png) no-repeat center;
	}

	.samuelson {
		background: url(images/timeline/patents/1915_coke.png) no-repeat center;
	}
	
	.burbank {
		background: url(images/timeline/patents/1932-Burbank.png) no-repeat center;
	}

	.rohwedder {
		background: url(images/timeline/patents/1932-sliced.png) no-repeat center;
	}

	.disney {
		background: url(images/timeline/patents/1940-Disney.png) no-repeat center;
	}

	.lamarr {
		background: url(images/timeline/patents/1942-Lamarr.png) no-repeat center;
	}

	.zamboni {
		background: url(images/timeline/patents/1953_Zamboni.png) no-repeat center;
	}

	.alderson {
		background: url(images/timeline/patents/1961_Crashtest.png) no-repeat center;
	}

	.englebart {
		background: url(images/timeline/patents/1970_mouse.png) no-repeat center;
	}

	.bowerman {
		background: url(images/timeline/patents/1972_Nike.png) no-repeat center;
	}

	.coin {
		background: url(images/timeline/patents/1975_USPTO.png) no-repeat center;
	}

	.bra {
		background: url(images/timeline/patents/1978_Bra.png) no-repeat center;
	}

	.ipod {
		background: url(images/timeline/patents/2007_ipod.png) no-repeat center;
	}
	
}