@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

@charcoal: #353d40;
@off-white: #f0f0ec;
@sky: #c8d7df;
@soft-green: #d1e9d1;
@light-gray: #292929;
@slate-blue: #6993a9;
@royal-blue: #1e77bd;

.v7
{
	.page-section
	{
		height: auto;

		h3
		{
			color: @charcoal;
			font-size: 36px;
			font-weight: bold;
			text-transform: uppercase;
			text-align: center;
			margin-bottom: 50px;
		}

		&.viz-of-the-day
		{
			padding-top: 70px;
			padding-bottom: 135px;

			a.img
			{
				display: inline-block;
				vertical-align: middle;
				margin-left: 15px;
				box-sizing: border-box;
				width: 440px;
				height: 271px;

				html[dir=rtl] &
				{
					margin-left: 0;
					margin-right: 15px;
				}

				div
				{
					width: 440px;
					height: 271px;
					box-sizing: border-box;
					border-top: 1px solid @sky;
					border-bottom: 1px solid @sky;
				}
			}

			.inline-block
			{
				display: inline-block;
				vertical-align: top;
				margin-top: -5px;
				width: 470px;
				box-sizing: border-box;
				padding-left: 30px;

				html[dir=rtl] &
				{
					padding-left: 0;
					padding-right: 30px;
				}

				a
				{
					display: block;
					color: @slate-blue;
					font-size: 24px;
					font-weight: bold;
					text-transform: uppercase;
					text-decoration: none;
					margin-bottom: 10px;
				}

				span
				{
					font-size: 14px;
					line-height: 20px;
					color: @light-gray;
				}
			}
		}
	}
}