TimelineJS/source/less/VMM.Slider.less

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

/* SLIDER CONTAINERS 
================================================== */
.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;

			background-color: @white;
			
			.slider-item-container {
				//overflow:hidden;
				display:table-cell;
				vertical-align:middle;
			}

		}

	}
}

/* SLIDER ELEMENTS
================================================== */
.slider {
	img, embed, object, video, iframe {
		max-width: 100%;
	}
}

/* SLIDER NAV
================================================== */
.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;
			position:absolute;
		}
		.icon {
			margin-top:@feature-nav-icon-wh/2;
			margin-bottom:@base-space;
		}
		.date {
			font-size: @base-font;
			font-weight: bold;
			line-height: @base-line;
			
			text-transform: uppercase;
			margin-bottom:5px;
		}
		.date, .title {
			line-height:14px;
			//width: @feature-nav-width; 
			-webkit-hyphens:auto;
			   -moz-hyphens:auto;
			    -ms-hyphens:auto;
			        hyphens:auto;
			word-wrap:break-word;
			
			a {
				color: @color-nav-description;
			}
			small {
				display:none;
			}
			
		}
	}
	
	.nav-previous:hover, .nav-next:hover {
		color: @color-dark-second;
		cursor: pointer;
	}
	.nav-previous {
		float: left;
		text-align:left;
		.icon {
			margin-left: @base-space;
			.icon-previous();
		}
		.date, .title {
			text-align:left;
			padding-left:@base-space;
		}
	}
	.nav-previous:hover {
		.icon {
			margin-left: @base-space - 5;
		}
	}
	
	.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;
		}
	}
	.nav-next:hover {
		.icon {
			margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5;
		}
	}
	
	
}


/* SLIDE CONTENT
================================================== */
.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;
							
						}
					}
				}
				.media {
					width:100%;
					min-width:50%;
					float: left;
					.media-wrapper {
						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-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;
							}
							
							
							span.messege {
								display:block;
								vertical-align:middle;
								margin-left:auto;
								margin-right:auto;
								text-align:center;
								background:@color-background;
								//margin-top: 50%;
								font-size: 28px;
								font-weight: bold;
								text-transform: uppercase;
							}
							.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;
									}
								}
							}
							.twitter {
								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: 28px;
										line-height: 36px;
										margin-bottom: 6px;
										padding-top: 10px;
										background-color:@white;
										color:@color-feature-title;
										//margin-left:10px;
									}
									.quote-mark {
										color:@color-dark-third;
									}
								}
								.created-at {
									.icon-twitter();
									width:24px;
									height:24px;
									overflow:hidden;
									margin-left:@base-space;
									display:inline-block;
									float:right;
									.opacity(25);
								}
								.created-at:hover {
									.opacity(100);
								}
								.vcard {
									float:right;
									margin-bottom:@base-space;
									//position: relative;
									a {
										color: @color-dark-second;
									}
									a:hover {
										text-decoration: none;
										.fn {
											text-decoration: underline;
										}
									}
									.fn, .nickname {
				
										padding-left: 42px;
									}
									.fn {
										display:block;
										//display:inline;
										font-weight: bold;

									}
									.nickname {
										margin-top:3px;
										display:block;
										color: @color-dark-third;
									}
			
									.avatar {
										float:left;
										//position: absolute;
										display: block;
										width: 32px;
										height: 32px;
										img {
											//border: 0px solid #999;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;
											border-radius: 5px;
										}
									}
								}
							}
							.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;
								}
								h4 a:hover {
									color: @color-theme;
									text-decoration: none;
								}
								
								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;
								//max-height:45px;
								//overflow-x:hidden;
								//overflow-y:auto;
							}
						}
					}
				}
				.media.text-media {
					.media-wrapper {
						.media-container {
							border: none;
							background-color: @white;
						}
					}
				}
			}
			
			
			/* 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 {
					max-width:70%;
				}
			}
		}
	}
}