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;
			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;
		.content {
			display:table-cell;
			vertical-align:middle;			
			/* All Slides
			================================================== */
			.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;
						padding-right: @base-space;
					}
				}
				.media {
					width:100%;
					min-width:50%;
					float: left;
					.media-wrapper {
						margin-left: auto;
						margin-right: auto;
						.media-container {
							display:inline-block;
							overflow: hidden;
							line-height:0px;
							padding:0px;
							//max-height:400px;
							span.messege {
								display:block;
								vertical-align:middle;
								margin-left:auto;
								margin-right:auto;
								text-align:center;
								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;
								}
								h4 {
									border-bottom: 1px solid @color-line;
									margin-bottom:5px;
									font-style: italic;
								}
								p {
									font-size: 13px;
									line-height: 19px;
								}
							}
							img, iframe {
								border: 1px solid @color-line;
								//max-height:350px;
							}
							.map {
								line-height: normal;
								border: 1px solid @color-line;
								z-index:200;
								text-align:left;
								background-color:@white;
								img {
									max-height:none !important;
									max-width:none !important;
								}
								.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;
								font-size: 10px;
								line-height: 10px;
								display: block;
								margin: 0 auto;
								margin-top:4px;
							}
							.caption {
								text-align:left;
								margin-top:10px;
								color: @color-caption;
								font-size: 11px;
								line-height: 14px;
							}
						}
					}
				}
				.media.text-media {
					.media-wrapper {
						.media-container {
							border: none;
							background-color: @white;
						}
					}
				}
			}
			
			/* 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%;
				}
			}
		}
	}
}