@import url('simple.css');

@blue: #0d6cc9;
@yellow: #ffe202;
@gray: #9e9e9e;

@cgreen: #7EBF57;
@cblue: #509BBF;
@cred: #CC1202;

/*
	Naglowek
*/
header.body {
	margin-bottom: 10px;

	h1 {
		display: block;
		width: 430px;
		height: 165px;
		margin: 0;
		float: left;
		background: url('images/title.png') no-repeat left center;
		text-indent: -9999em;
	}

	.logo {
		display: block;
		width: 110px;
		padding: 15px;
		float: left;
		
		// img {
		// 	box-shadow: 0 0 130px 30px #000;
		// }
	}
	

	.search {
		display: block;
		width: 320px;
		height: 37px;
		margin-top: 60px;
		float: right;
		background: #000;
		background: rgba(0,0,0,0.5);
		color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 3px #000;
		font-size: .9em;

		input {
			background: none;
			border: none;
		}
		input[type='text'] {
			width: 245px;
			line-height: 17px;
			padding: 10px 0 10px 10px;
		}
		input[type='submit'] {
			text-align: center;
			line-height: 37px;
		}
	}

	nav.main {
		clear: both;
		background: #000;
		border-radius: 10px;
		box-shadow: 0 0 5px #000;
		position: relative;
		z-index: 10;

		a:not([href]) {
			cursor: default;
		}

		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			
			ul {
				display: none;
			}

			li.l0 {
				display: inline-block;
				padding: 10px 0;
				position: relative;

				>a {
					padding: 0 15px;
					color: #ccc;
					border-right: 1px solid #ccc;
					text-decoration: none;
				}
				
			}
			li.l0:last-of-type {
				a {
					border-right: 0;
				}
			}
			li.l0:hover {
				background: @blue;
				position: relative;
				z-index: 1;
				
				>a {
					color: #fff;
				}

				>ul {
					display: block;
					min-width: 100%;
					position: absolute;
					top: 100%;
					left: 0;
					background: #fff;
					font-size: .9em;

					>li {
						position: relative;

						a {
							display: block;
							padding: 5px 15px;
							color: #000;
							border-bottom: 1px solid #ccc;
							text-decoration: none;
							white-space: nowrap;
						}
					}

					>li:hover {
						>a {
							background: @yellow;
						}

						>ul {
							display: block;
							position: absolute;
							left: 100%;
							top: 0;
							background: #fff;
							border-left: 10px solid @yellow;

							li:hover {
								a {
									background: @yellow;
								}
							}
						}
					}
				}
			}
		}

		ul.l0:first-of-type {
			float: left;

			li.l0:first-of-type {
				border-radius: 10px 0 0 10px;
			}
		}

		ul.l0:last-of-type {
			float: right;

			li.l0:last-of-type {
				border-radius: 0 10px 10px 0;
			}
		}
	}
	nav.main:after {
		display: block;
		width: 1px;
		height: 1px;
		content: " ";
		clear: both;
	}


}


/*
	Animacja
*/
section.promoted {
	background: #000;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	overflow: hidden;

	.articles {
		width: 695px;
		height: 355px;
		float: left;
		overflow: hidden;
		position: relative;

		article {
			position: absolute;
			top: 0;
			left: 100%;
			height: 360px;
			width: 695px;
			z-index: 1;
			
			img {
				z-index:1;
				width: auto;
				height: 360px;
			}

			.data {
				width: 655px;
				height: 124px;
				margin-top: -144px;
				padding: 10px 20px;
				background: #000;
				background: rgba(0,0,0,0.8);
				color: @gray;
				position: relative;
				z-index: 2;

				h3 {
					margin: 0;
					color: @blue;
					font-weight: 400;
					font-size: .8em;
					text-transform: uppercase;
				}

				h1 {
					margin: 5px 0 15px 0;
					padding: 0;
					color: #fff;
					font-weight: 400;
					font-size: 1.4em;
					line-height: 1em;
				}

				.lead {
					height: 3.3em;
					font-size: .75em;
					line-height: 1.5em;
					overflow: hidden;
					
					p {
						margin: 0;
						padding: 0;
					}
				}

				a {
					padding: 5px 10px;
					margin-right: -10px;
					color: @yellow;
					font-size: .75em;
					text-decoration: none;
					float: right;
				}

				a:hover {
					background: @yellow;
					color: #000;
				}
			}
		}
		article.first {
			left: 0;
			* {
				left: 0;
			}
		}
		article.active {
			z-index: 2;
		}

		.animation_buttons {
			position: absolute;
			right: 0;
			bottom: 112px;
			z-index: 10;

			a {
				display: inline-block;
				width: 10px;
				height: 10px;
				margin-right: 5px;
				border-radius: 5px;
				background: #fff;
				font-size: .0001em;
				text-indent: -9999em;
				cursor: pointer;
			}
			a.active {
				background: @blue;
			}
		}
	}


	.photorelations {
		width: 285px;
		float: right;
	
		a {
			display: block;
			height: 46px;
			margin-bottom: 1px;
			background: #343434;
			text-decoration: none;
			overflow: hidden;
			
			strong {
				display: block;
				padding: 12px 10px;
				color: #fff;
				font-size: 1em;
				font-weight: 400;
				white-space: nowrap;
			}

			img {
				display: block;
			}
		}
		a:hover {
			background: @blue;
		}

		a.first {
			background: none;
			height: 216px;
		}
	}
}

.banner {
	display: none;
	box-sizing: border-box;
	padding: 30px;
	margin-bottom: 20px;
	background: @yellow;
	font-size: .7em;
	text-align: center;
}
.body.banner {
	margin-top: 30px;
}


/*
	Tresci
*/
section.page.body {
	margin-top: 30px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background: -moz-linear-gradient(top, #ececec 0%, #ffffff 25%, #ffffff 25%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(25%,#ffffff), color-stop(25%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ececec 0%,#ffffff 25%,#ffffff 25%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ececec 0%,#ffffff 25%,#ffffff 25%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ececec 0%,#ffffff 25%,#ffffff 25%); /* IE10+ */
	background: linear-gradient(to bottom, #ececec 0%,#ffffff 25%,#ffffff 25%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	display: table;

	.page_content {
		display: table-cell;
		width: 650px;
		padding: 20px;

		.articles {
			header h1 {
				margin: 0 0 10px 0;
				padding: 10px 0 20px 0;
				color: #686868;
				border-bottom: 1px solid #9e9e9e;
				font-size: .8em;
				font-weight: 400;
				text-transform: uppercase;
			}

			article {
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid @gray;
				overflow: hidden;

				.mini {
					float: left;
					margin-right: 20px;
				}

				h3 {
					margin: 0;
					color: #555454;
					font-size: .75em;
					font-weight: 400;
					text-transform: uppercase;
				}

				h1 {
					margin: 10px 0;
					color: @blue;
					font-size: 1.2em;
					font-weight: 400;
				}

				.lead {
					width: 325px;
					float: left;
					font-size: .8em;
				}

				.comments,
				.more {
					padding: 4px 10px;
					background: @blue;
					color: #fff;
					border-radius: 3px;
					text-decoration: none;
				}

				.more:hover {
					background: @yellow;
					color: #000;
				}

				.comments {
					cursor: default;

				}
			}

			.pagination {
				text-align: center;

				a {
					display: inline-block;
					width: 2em;
					color: @gray;
					line-height: 2em;
					font-size: .8em;
					text-align: center;
					text-decoration: none;
				}
				a:hover {
					box-shadow: 0 0 4px @gray;
				}
				a.active {
					background: @yellow;
					color: #000;
				}
			}
		}
		.articles.search_results {
			article {
				.lead {
					width: 100%;

					.more {
						float: right;
					}
				}
			}
		}

		article.single {
			font-size: .8em;
			
			header {
				border-bottom: 1px solid #ddd;
				margin-bottom: 20px;

				h3 {
					margin: 0;
					color: #555454;
					font-weight: 400;
					font-size: 1em;
					text-transform: uppercase;
				}

				h1 {
					margin: 0 0 10px 0;
					color: @blue;
					font-size: 1.6em;
					font-weight: 700;
				}
			}
			
			.content {
				h1 {
					font-size: 1.6em;
					color: @blue;
				}
				h2 {
					font-size: 1.4em;
					color: @blue;
				}
				h3 {
					font-size: 1.2em;
					color: @blue;
				}
			}

			.photogallery {
				clear: both;
				padding-top: 20px;
				overflow: hidden;

				a {
					display:block;
					width: 145px;
					height: 130px;
					padding: 2px;
					margin: 5px;
					float: left;
					border: 1px solid @gray;

					img {
						display: block;
						width: 100%;
						height: auto;
					}
				}
				a:hover {
					box-shadow: 0 0 10px @gray;
				}
			}
		}

		.score_table {
			width: 100%;
			tr {
				border-bottom: 1px solid #ddd;

				td {
					padding: 4px 0;
					text-align: center;

					img {
						vertical-align: middle;
					}
				}
				td:nth-of-type(3) {
					text-align: left;
				}
				td:nth-of-type(6),
				td:nth-of-type(7),
				td:nth-of-type(8) {
					width: 20px;
				}
			}
			tr:nth-of-type(2n) {
				background: #fdfdfd;
			}
		}
	}

	.meetings {
		h3 {
			margin: 20px 0 10px 0;
			padding-bottom: 10px;
			border-bottom: 1px solid #ddd;
			font-weight: 400;
			font-size: 1em;
			text-align: center;
			text-transform: uppercase;
		}
		
		ul{
			margin: 0;
			padding: 0;
			list-style-type: none;

			li {
				padding: 4px 0;

				.date {
					margin-right: 10px;
					color: @blue;
				}
				
				a {
					float: right;
					color: @blue;
					text-decoration: none;
				}
			}
		}
		
	}

	.meeting {
		table {
			width: 100%;

			td {
				width: 50%;
				text-align: center;
				vertical-align: top;
			}

			h2 {
				text-align: left;
			}

			.score td {
				font-size: 4em;
				font-weight: bold;
			}

			ol {
				text-align: left;
				margin: 0 5px;
				padding: 0;

				li {
					padding-bottom: 5px;
					margin-bottom: 5px;
					line-height: 16px;
					border-bottom: 1px solid #ddd;
					list-style-position: inside;
				}
				
				span {
					background: url('images/meetings_icons.png') no-repeat 0 0;
					padding: 0 5px 0 20px;
					float: right;
				}
				span.card.z {
					background-position: 0 -20px;
				}
				span.card.c {
					background-position: 0 -41px;
				}
			}
		}
	}

	.partners {
		h1 {
			margin: 0 0 10px 0;
			padding: 10px 0 20px 0;
			color: #686868;
			border-bottom: 1px solid #9e9e9e;
			font-size: .8em;
			font-weight: 400;
			text-transform: uppercase;
		}
		a {
			text-decoration: none;
		}
		img {
			margin-right: 20px;
		}
	}

	aside.right {
		display: table-cell;
		width: 245px;
		padding: 20px;
		background: #ececec;
		border-radius: 0 10px 10px 0;

		.box {
			border-bottom: 1px solid #9e9e9e;
			margin-bottom: 20px;

			h2 {
				margin: 0 0 10px 0;
				padding: 10px 0 20px 0;
				color: #686868;
				border-bottom: 1px solid #9e9e9e;
				font-size: .8em;
				font-weight: 400;
				text-transform: uppercase;
			}
		}

		.game {
			table {
				width: 100%;
				margin-bottom: 20px;

				td {
					width: 50%;
					text-align: center;
					cursor: default;
				}

				.logo {
					height: 105px;
					vertical-align: middle;
				}

				.name {
					font-size: .8em;
					font-weight: 600;
					color: #000;
				}

				.score {
					font-size: 4em;
					font-weight: 600;
				}

				.desc td {
					padding-top: 20px;
					color: #686868;
					font-size: .75em;
					text-align: left;
				}

				.buttons {
					a {
						display: block;
						width: 95%;
						padding: 4px 0;
						background: #9e9e9e;
						color: #fff;
						border-radius: 5px;
						font-size: .8em;
						text-align: center;
						text-decoration: none;
					}
				}
			}
		}

		.table {
			table {
				width: 100%;
				margin-bottom: 10px;

				th {
					color: @blue;
					font-size: .7em;
					text-align: left;
				}

				td {
					font-size: .8em;
					line-height: 1.6em;
					text-align: left;
					cursor: default;
				}

				.lp {
					width: 24px;
				}

				.short {
					width: 40px;
					font-weight: 600;
					text-align: center;
				}

				tbody tr:hover {
					background: #fff;
				}
			}
		}
	}
}



.communicates {
	width: 980px;
	margin: 20px auto;
	background: #fff;
	border-radius: 10px;

	p {
		margin: 0;
		padding: 20px;
		border-radius: 10px;
		color: #fff;
	}

	.e {
		background: @cred;
	}
	.s {
		background: @cgreen;
	}
	.i {
		background: @cblue;
	}
}




aside.partners {
	margin-top: 30px;
	width: 960px;
	padding: 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;

	h2 {
		margin: 0 0 15px 0;
		padding: 0 0 15px 0;
		font-size: 1em;
		font-weight: 400;
		border-bottom: 1px solid @gray;
	}
	a {
		display: inline-block;
		text-decoration: none;
		vertical-align: middle;
	}
	img {
		margin-right: 15px;
		margin-bottom: 10px;
		vertical-align: middle;
	}
}


/*
	Stopka
*/
footer.page {
	margin-top: 30px;
	padding: 30px 0;
	background: #000;
	font-size: .8em;
	color: #ccc;
	overflow: hidden;
	
	.box {
		float: left;

		h2 {
			margin: 0 0 30px 0;
			color: @yellow;
			font-size: 1.2em;
			font-weight: 300;
			text-transform: uppercase;
		}
	}

	nav.footer {
		width: 385px;
		margin-right: 10px;

		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;

			a {
				color: #fff;
				text-decoration: none;
			}
			a:hover {
				color: @yellow;
			}
		}
	}

	form.newsletter {
		width: 250px;
		margin-right: 10px;

		input {
			padding: 8px 10px;
			background: #1a1a1a;
			border: 1px solid #595959;
		}

		input[type='email'] {
			width: 228px;
		}

		input[type='submit'] {
			background: #2e2e2e;
			float: right;
		}
		input[type='submit']:hover {
			background: #595959;
		}
		.com.e {
			color: red;
		}
		.com.i {
			color: blue;
		}
		.com.s {
			color: green;
		}
	}

	address.box {
		widt: 265px;
		margin-right: 10px;
		float: right;

		font-style: normal;
	}
}

aside.social {
	position: fixed;
	left: 0;
	top: 50%;
	margin-top: -64px;
	z-index: 10;
	width: 32px;
	background: #fff;

	a {
		display: block;
		width: 32px;
		height: 32px;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

.inactive {
	display: none !important;
	opacity:0.4;
	filter:alpha(opacity=40);
}