TimelineJS/source/less/VMM.Slider.less

/*	Slider
------------------------------------------------------------------------------------------- */

/* SLIDER CONTAINERS 
================================================== */
.vmm-slider {
	width:100%;
	height:100%;
	overflow:hidden;
	.slider-container-mask {
		text-align: center;
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		.slider-container {
			position: absolute;
			top: 0px;
			left: -2160px;
			width: 100%;
			height: 100%;
			text-align: center;
			display: block;
			
			.slider-item-container {
				//overflow:hidden;
				display:table-cell;
				vertical-align:middle;
			}

		}

	}
}

/* HOVER ELEMENTS
================================================== */
.vmm-notouch {
	.vmm-slider {
		.nav-previous:hover, .nav-next:hover {
			color: @color-dark-second;
			cursor: pointer;
		}
		.nav-previous:hover {
			.icon {
				margin-left: @base-space - 5;
			}
		}
		.nav-next:hover {
			.icon {
				margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5;
			}
		}
		.slider-item {
			.content {
				.content-container {
					.media {
						.media-container {
							.wikipedia {
								h4 a:hover {
									color: @color-theme;
									text-decoration: none;
								}
								
							}
						}
					}
					.created-at:hover {
						.opacity(100);
					}
					.googleplus {
						.googleplus-content {
							.googleplus-attachments {
								a:hover {
									text-decoration: none;
									h5 {
										text-decoration: underline;
									}
								}
							}
						}
					}
				}
			}
		}
		
	}
}
/* SLIDER ELEMENTS
================================================== */
.vmm-slider {
	img, embed, object, video, iframe {
		max-width: 100%;
	}
}

/* SLIDER NAV
================================================== */
.vmm-slider {
	//position: relative;
	
	.nav-previous, .nav-next {
		position:absolute;
		top: 0px;
		width: @feature-nav-width; 
		color: #DBDBDB;
		font-size:@base-font-small;
		.nav-container {
			height:100px;
			width:100px;
			position:absolute;
		}
		.icon {
			margin-top:@feature-nav-icon-wh/2;
			margin-bottom:@base-space;
		}
		.date, .title {
			line-height:14px;
			a {
				color: @color-nav-description;
			}
			small {
				display:none;
			}
		}
		.date {
			font-size: @base-font-small + 2;
			line-height: @base-font-small + 2;
			
			//font-size: @base-font;
			//line-height: @base-line;
			font-weight: bold;
			
			text-transform: uppercase;
			margin-bottom:5px;
		}
		.title {
			font-size: @base-font-small;
			line-height: @base-font-small + 2;
		}
	}
	
	.nav-previous {
		float: left;
		text-align:left;
		.icon {
			margin-left: @base-space;
			.icon-previous();
		}
		.date, .title {
			text-align:left;
			padding-left:@base-space;
		}
	}
	
	.nav-next {
		float: right;
		text-align:right;
		.icon {
			margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh;
			.icon-next()
		}
		.date, .title {
			text-align:right;
			padding-right:@base-space;
		}
	}
	
}


/* SLIDE CONTENT
================================================== */
.vmm-slider {
	.slider-item {
		position:absolute;
		width:700px;
		height:100%;
		padding:0px;
		margin:0px;
		//overflow: hidden;
		display:table;
		//overflow-x:hidden;
		overflow-y:auto;
		
		.content {
			display:table-cell;
			vertical-align:middle;
			
			/* All Slides
			================================================== */
			.pad-top {
				.text {
					.container {
						padding-top: @base-space;
					}
				}
			}
			.pad-right {
				.text {
					.container {
						padding-right: @base-space;
					}
				}
			}
			.pad-left {
				.text {
					.container {
						padding-left: @base-space*2;
					}
				}
				.media.text-media {
					.media-wrapper {
						.media-container {
							border: none;
							background-color: @white;
						}
					}
				}
				
			}
			.content-container {
				display:table;
				vertical-align:middle;
				.text {
					width:40%;
					max-width:50%;
					min-width:120px;
					display:table-cell;
					vertical-align:middle;
					.container {
						display:table-cell;
						vertical-align:middle;
						text-align:left;
						p {
							-webkit-hyphens:auto;
							   -moz-hyphens:auto;
							    -ms-hyphens:auto;
							        hyphens:auto;
							word-wrap:break-word;
						}
						h2.date {
							font-size: @base-font;
							line-height: @base-font;
							//margin-bottom: @base-space/2;
							//color:@color-feature-date;
							font-weight: normal;
						}
						
						.slide-tag {
							font-size: @base-font-small;
							font-weight: bold;
							color: @color-base;
							background-color: lighten(@color-feature-date, 20%);
							-webkit-border-radius: 3px;
							   -moz-border-radius: 3px;
							        border-radius: 3px;
							vertical-align: baseline;
							white-space: nowrap;
							//text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
							line-height: @base-font-small;
							padding: 1px 3px 1px;
							margin-left:@base-space/2;
							margin-bottom: @base-space/2;
						}
					}
				}
				.media {
					width:100%;
					min-width:50%;
					float: left;
					.media-wrapper {
						display:inline-block;
						margin-left: auto;
						margin-right: auto;
						.media-container {
							display:inline-block;
							line-height:0px;
							padding:0px;
							max-height:100%;
							//overflow:hidden;
							
							/* MEDIA SHADOWS AND BORDERS
							================================================== */
							.media-frame, .media-image img {
								border: 1px solid;
								border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line;
								background-color: @color-background;
							}
							.media-frame iframe {
								background-color: @color-background;
							}
							.soundcloud {
								border: 0;
							}
							.media-image {
								display: inline-block;
							}
							
							.media-shadow {
								position: relative;
								z-index: 1;
								background:@color-background;
								
							}
							.media-shadow:before, .media-shadow:after {
								z-index: -1;
								position: absolute;
								content: "";
								bottom: 15px;
								left: 10px;
								width: 50%;
								top: 80%;
								max-width:300px;
								background: @color-dark-fourth;
								-webkit-box-shadow: 0 15px 10px @color-dark-fourth;
								   -moz-box-shadow: 0 15px 10px @color-dark-fourth;
								        box-shadow: 0 15px 10px @color-dark-fourth;
								-webkit-transform: rotate(-2deg);
								   -moz-transform: rotate(-2deg);
								     -o-transform: rotate(-2deg);
								    -ms-transform: rotate(-2deg);
								        transform: rotate(-2deg);
							}
							.media-shadow::after {
								-webkit-transform: rotate(2deg);
								   -moz-transform: rotate(2deg);
								     -o-transform: rotate(2deg);
								    -ms-transform: rotate(2deg);
								        transform: rotate(2deg);
								right: 10px;
								left: auto;
							}
							.plain-text {
								display:table;
								.container {
									display:table-cell;
									vertical-align:middle;
									font-size: @base-font;
									line-height:@base-line;
									color: @color-feature-description;
									p {
										margin-bottom:@base-line;
									}
								}
							}
							.wikipedia {
								font-size: @base-font;
								line-height: @base-line;
								text-align:left;
								margin-left: auto;
								margin-right: auto;
								margin-bottom:@base-space;
								clear:both;
								.wiki-source {
									margin-bottom:@base-space;
									font-size: 13px;
									line-height: 19px;
									font-style: italic;
								}
								h4 {
									border-bottom: 1px solid @color-line;
									margin-bottom:5px;
								}
								h4 a {
									color: @color-feature-title;
								}
								
								p {
									font-size: 13px;
									line-height: 19px;
								}
							}
							.map {
								line-height: normal;
								z-index:200;
								text-align:left;
								background-color:@white;
								
								img {
									max-height:none !important;
									max-width:none !important;
									border:0;
									-webkit-box-shadow: none;
									   -moz-box-shadow: none;
									        box-shadow: none;
									
								}
								.google-map {
									height:100%;
									width:100%;
								}
								.map-attribution {
									position: absolute;
									z-index: 201;
									//right: 0px;
									bottom: 0px;
									width:100%;
									overflow:hidden;

									.attribution-text {
										height: 19px;
										overflow:hidden;
										-webkit-user-select: none;
										line-height: 19px;
										margin-right: 60px;
										padding-left: 65px;
										font-family: Arial, sans-serif;
										font-size: 10px;
										//font-weight: bold;
										color: #444;
										white-space: nowrap;
										color:@color-base;
										text-shadow:1px 1px 1px @color-dark-second;
										//direction: ltr;
										text-align: center;
										a {
											color:@color-base !important;
											
										}

									}
									}
								}
							}
							.credit {
								color: @color-credit;
								text-align: right;
								display: block;
								margin: 0 auto;
								margin-top:6px;
								.text-font(@base-font-small - 1);
								//max-height:16px;
								//overflow:auto;
							}
							.caption {
								text-align:left;
								margin-top:@base-font-small - 1;
								color: @color-caption;
								.text-font(@base-font-small);
								text-rendering: optimizeLegibility;
								word-wrap: break-word;
								//max-height:45px;
								//overflow-x:hidden;
								//overflow-y:auto;
							}
						}
					}
				}
				.media.text-media {
					.media-wrapper {
						.media-container {
							border: none;
							background-color: @white;
						}
					}
				}
				.created-at {
					width:24px;
					height:24px;
					overflow:hidden;
					margin-left:@base-space/2;
					margin-top:2px;
					display:inline-block;
					float:right;
					.opacity(25);
				}
				.storify {
					.created-at {
						.icon-storify();
					}
				}
				.twitter {
					.created-at {
						.icon-twitter();
					}
				}
				.googleplus {
					.googleplus-content {
						font-size: 13px;
						line-height: 19px;
						
						margin-bottom: 6px;
						padding-top: 10px;
						background-color:@white;
						color: @color-feature-description;
						p {
							font-size: 13px;
							line-height: 19px;
						}
						.googleplus-title {
							font-size: @base-font-large;
							line-height: @base-line-large;
							margin-bottom: 6px;
							padding-top: 10px;
							background-color:@white;
							color:@color-feature-title;
						}
						.googleplus-annotation {
							font-size: @base-font;
							line-height: @base-line;
							color: @color-feature-title;
							border-bottom: 1px solid @color-dark-fifth;
							padding-bottom: @base-space/2;
							margin-bottom: @base-space/2;
						}
						.googleplus-attachments {
							border-top: 1px solid @color-dark-fifth;
							padding-top: @base-space;
							margin-top: @base-space;
							border-bottom: 1px solid @color-dark-fifth;
							padding-bottom: @base-space;
							margin-bottom: @base-space;
							.clearfix();
							h5 {
								margin-bottom:5px;
							}
							div {
								width: 50%;
								padding-left: @base-space;
								display:inline-block;
							}

							p {
								.text-font(@base-font-small);
								margin-bottom: 5px;
								//float:left;
							}
							img {
								float:left;
								display: block;
								bottom: 0;
								left: 0;
								margin: auto;
								position: relative;
								right: 0;
								top: 0;
								width: 40%;
								//display:inline-block;
							}
							
						}
					}
					.proflinkPrefix {
						color:@color-theme;
					}
					.created-at {
						.icon-googleplus();
					}
				}
				
				.twitter, .plain-text-quote, .storify, .googleplus {
					text-align:left;
					margin-left: auto;
					margin-right: auto;
					margin-bottom:@base-space;
					clear:both;
					blockquote {
						//font-size: @base-font;
						//line-height: @base-line;
						color:@color-feature-description;
						p {
							font-size: @base-font-large;
							line-height: @base-line-large;
							margin-bottom: 6px;
							padding-top: 10px;
							background-color:@white;
							color:@color-feature-title;
						}
						.quote-mark {
							color:@color-dark-third;
						}
					}
				}
				
				
			}
			
			
			/* Text and Media Slides
			================================================== */
			
			.content-container.layout-text-media {
				.text-media {
					border-top: 1px solid @color-dark-fifth;
					padding-top:@base-space;
					padding-right:0;
				}
				
			}
			.content-container.layout-text-media.pad-left {
				.text-media {
					padding-right:@base-space;
					padding-top:0;
					border-right: 1px solid @color-dark-fifth;
					border-top: 0px solid @color-dark-fifth;
				}
			}
			
			/* Text Only Slides
			================================================== */
			.content-container.layout-text {
				width:100%;
				.text {
					width:100%;
					max-width:100%;
					.container {
						display:block;
						vertical-align:middle;
						text-align:left;
						padding:0px;
						width: 90%;
						text-align:left;
						margin-left: auto;
						margin-right: auto;
					}
				}
			}

			/* Media Only Slides
			================================================== */
			.content-container.layout-media {
				width:100%;
				.text {
					width:100%;
					height:100%;
					max-width:100%;
					display:block;
					text-align:center;
					.container {
						display:block;
						text-align:center;
						width:100%;
						margin-left: none;
						margin-right: none;
					}
				}
				.media {
					width:100%;
					min-width:50%;
					float: none;
					.media-wrapper {
						//display:block;
						.media-container {
							margin-left: auto;
							margin-right: auto;
							//overflow: hidden;
							line-height:0px;
							padding:0px;
							
						}
						
					}
				}
				.twitter, .wikipedia, .googleplus {
					max-width:70%;
				}
				
			}
		}
	}
}