@charset "UTF-8";

/*!
 * Styl pro zobrazení na obrazovce
 * @author Ing. Radek Liška, ing.radek.liska@gmail.com
 * © 2014 Všechna práva vyhrazena
 */

//**************************************************
// Import závislých souborů
//**************************************************/

@import "variables.less";
@import "mixins.less";

/***************************************************
 * Dokument
 ***************************************************/

@page-width-px: 1920px;
@page-height-px: 1080px;

html {
	position: relative;
	min-width: 320px;
	max-width: @page-width-px;
	min-height: @page-height-px;
	font-size: @size-px;
	background: @color-white;
	.user-select(none);
}

body {
	overflow: hidden;
	margin: 0;
}

/***************************************************
 * Stránka
 ***************************************************/

.page {
	display: table;
	position: relative;
	width: 100%;
	height: @page-height-px;
}

.page-section {
	display: table-row;
}

.page-section-head {

	.page-wrap {
		padding: (@margin-px / 2) 0;
		vertical-align: top;
	}

}

.page-section-content {
	background: @color-gray-F8;

	.page-wrap {
		height: 100%;
	}

}

.page-section-foot {
	background: @color-gray-F0;

	.page-wrap {
		padding: (@margin-px / 4) 0;
	}

}

.page-wrap {
	display: table-cell;
	height: 1%;
	vertical-align: middle;
}

.page-columnlist {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.page-columnitem {
	display: table-cell;
	vertical-align: middle;
}

/***************************************************
 * Nadpis v hlavičce
 ***************************************************/

.logo {
	position: relative;
	margin: 0 60px;

	p {
		margin-top: 0;
	}

}

/***************************************************
 * Kalendář v hlavičce
 ***************************************************/

.calendar {
	position: relative;
	font-weight: @weight-light;;

	p {
		margin-top: 0;
	}

}

.calendar-list {
	display: table;
	margin: 0 0 0 auto;
	table-layout: fixed;
}

.calendar-item {
	display: table-cell;
	padding: 0 60px;
	border-left: 1px solid @color-blue;
	vertical-align: middle;

	&:first-child {
		padding-left: 0;
		border-left: 0;
	}

}

.calendar-value {}

.calendar-value-date {
	font-size: @size-large-60;
}

.calendar-value-time {
	font-size: @size-large-84;

	&:before {
		.x-display-image;
		content: " ";
		width: 120px;
		height: 120px;
		margin-right: 30px;
		background: url(../img/calendar/time.png) no-repeat;
	}

}

/***************************************************
 * Katalog v obsahu
 ***************************************************/

.catalog {
	position: relative;

	ul {
		margin: 0 30px;
		font-size: 0;
		text-align: center;
		list-style: none;
	}

	li {
		display: inline-block;
		width: 33.3333%;
		min-width: 240px + 60px * 2;
		min-height: 1px;
		padding: 0 30px;
		font-size: @size-px;
		vertical-align: top;
	}

}

.catalog-button {
	display: table;
	position: relative;
	width: 100%;
	height: 240px;
	border-collapse: separate;
	table-layout: fixed;
	.transform(translateZ(0));

	a {
		.x-size-large-60;
		display: table-cell;
		padding: (168px + @margin-px * 3 / 2) 0 (@margin-px / 2);
		border: 1px solid @color-yellow-dark;
		.border-radius(@margin-px / 4);
		background: @color-yellow-light;
		.background-gradient-y(fadeout(@color-yellow-light, 100%), @color-yellow);
		color: @color-blue;
		font-weight: @weight-bold;
		text-decoration: none;
		text-transform: uppercase;
		vertical-align: middle;
		.transition(background-color @speed-normal);

		&:before {
			display: block;
			content: " ";
			position: absolute;
			top: @margin-px;
			left: 50%;
			width: 240px;
			height: 168px;
			margin-left: (240px / (-2));
			background: no-repeat;
		}

		&.tap {
			background-color: @color-yellow-dark;
			color: @color-blue;
		}

	}

}

.catalog-button-active {
	.animation(catalog-button (@speed-normal * 3));
}

.catalog-button-3d a:before {background-image: url(../img/catalog/3d.png);}
.catalog-button-tv a:before {background-image: url(../img/catalog/tv.png);}
.catalog-button-video a:before {background-image: url(../img/catalog/video.png);}

/***************************************************
 * Autor v patičce
 ***************************************************/

.author {
	position: relative;
	margin: 0 60px;
	text-align: right;

	p {
		margin-top: 0;
	}

}

/***************************************************
 * Nadpisy
 ***************************************************/

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: @margin-px;
}

/***************************************************
 * Textové bloky
 ***************************************************/

center,
p,
pre {
	margin-top: @margin-px;
}

blockquote {
	margin: @margin-px 60px 0;
}

/***************************************************
 * Seznamy
 ***************************************************/

dl,
menu,
ol,
ul {
	margin-top: @margin-px;
}

dd,
ul,
ol {
	margin-left: 60px;
}

/***************************************************
 * Tabulky
 ***************************************************/

table {
	margin-top: @margin-px;
}

td,
th {
	padding: (@margin-px / 2) (60px / 2);
}

/***************************************************
 * Oddělovače
 ***************************************************/

hr {
	margin-top: @margin-px;
}

//**************************************************
// Import závislých souborů
//**************************************************/

@import "screen-keyframes.less";