/* 
    Created on : 24.03.2015, 14:15:19
    Author     : DFD
	Styles for : Countdown module
*/

.ult_countdown {
	.ult_countdown-section {
		.ult_countdown-amount {
			.dfd-font-styles(@widget-title-h1-font-style, @widget-title-h1-font-weight, @widget-title-h1-font-size, @widget-title-h1-font-family, inherit, @widget-title-h1-line-height, @widget-title-h1-text-transform, @widget-title-h1-letter-spacing, @widget-title-h1-word-spacing);
		}
		.ult_countdown-period {
			.subtitle();
			font-size: @subtitles-font-size !important;
		}
	}
}

.dfd-countdown {
	text-align: center;

	& > div {
		display: inline-block;
	}

	.number,
	.dot {
		.dfd-font-styles(@widget-title-h1-font-style, @widget-title-h1-font-weight, @widget-title-h1-font-size, @widget-title-h1-font-family, inherit, @widget-title-h1-line-height, @widget-title-h1-text-transform, @widget-title-h1-letter-spacing, @widget-title-h1-word-spacing);
		color: @widget-title-h1-color;
	}
	.number {
		line-height: 1.3;
	}
	.number-wrap {
		display: inline-block;
		text-align: center;
		padding: 5px 10px 10px 10px;
		margin: 0 25px;
		min-width: 118px;
		border-radius: 2px;
		position: relative;
		margin-bottom: 15px;
	}
	.dot {
		position: absolute;
		top: 0%;
		right: -51px;
		width: 50px;
		display: block;
		height: 83%;
		overflow:hidden;
		.table_vert_align_dot{
			width: 100%;
			height: 100%;
			border: none;
			text-align: center;
			margin: 0;
			background: transparent;
			.table_cell_align_dot{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				font-family: inherit;
				font-weight: inherit;
				padding: 0;
				position: relative;
				font-size: @widget-title-h1-font-size;
			}
		}
	}
	.period {
		display: block;
		border-top: 1px solid fade((@forth-site-dark-color), 10%);
		padding-top: 2px;
		font-family: @subtitles-font-family;
	}
	.number-wrap:last-of-type {
		.dot{
			display: none;
		}
	}
	.number-wrap.shadow {
		box-shadow: 0 6px 14px fade((@forth-site-dark-color), 10%), 0 10px 10px fade((@forth-site-dark-color), 10%);
	}
	&.disable-dividers {
		.number-wrap {
			margin: 0;
		}
	}
	&.layout-2,
	&.layout-3 {
		.number-wrap {
			border: 1px solid fade((@forth-site-dark-color), 10%);
		}
	}

	&.layout-3,
	&.layout-4 {
		.number-wrap {
			position: relative;
			padding-bottom: 13px;
			i,b	{
				position: absolute;
				content: "";
				display: block;
				border-bottom: 1px solid;
				border-color: inherit;
				border-radius: inherit;
				height: 100%;
				bottom: 1px;
				left: 0;
				right: 0;
			}
			b {
				bottom: 3px;
			}
		}
	}
	&.layout-4 {
		.period {
			border-top: 1px solid fade((@main-site-dark-color), 10%);
		}
		.number-wrap {
			color: @main-site-dark-color;
			background: @third-site-dark-color;
			border-color: fade((@main-site-dark-color), 15%);
		}
		.number {
			color: @main-site-dark-color;
		}
	}
}