@import (less) 'common.css';
@import (less) 'variables.css';

/* Global */
* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	font-family: open-sans, arial;
	margin: 0;
	padding: 0;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: bebas-neue-bold;
}

a {
	color: @mainColor;
}

img {
	display: block;
}

a {
	color: #3f3f3f;
	text-decoration: none;
	//border-bottom: 1px dotted #3f3f3f;
			
	&:hover {
		color: lighten(@mainColor, 20%);
		//border-bottom: 1px dotted lighten(@mainColor, 20%);
	}
}

.value {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 6px 3px;
	color: white;
	font-weight: bold;
	font-family: bebas-neue, bebas-neue-bold;
	font-size: 18px;
	
	a {
		border-bottom: 0;
	}
	
	&:hover {
		text-decoration: underline;
	}
}

.value {
	&.winner {
		background: @winner;
	}
	&.loser {
		background: @loser;
	}
	&.draw {
		background: @draw;
	}
}

table.sort th {
	cursor: pointer;
	
	&.header {
		background: url('../../inc/img/icons/sortableTable/bg.gif') no-repeat center right;
	}
	&.headerSortUp {
		background: url('../../inc/img/icons/sortableTable/asc.gif') no-repeat center right;
	}
	&.headerSortDown {
		background: url('../../inc/img/icons/sortableTable/desc.gif') no-repeat center right;
	}
}

table {
	margin-bottom: 20px;
	border-collapse: collapse;
	
	caption {
		background: #545454;
		padding: 7px;
		color: white;
		font-weight: bold;
		border-radius: 3px 3px 0 0;
		font-family: bebas-neue, bebas-neue-bold, arial;
		font-size: 20px;
	}
	
	th {
		text-align: left;
	}
	
	td {
		padding: 3px 5px;
		vertical-align: top;
	}
}

table.table1, .table1 table {	
	th {
		background: @mainColor;
		text-align: left;
		padding: 10px;
		color: white;
		border: 1px solid @mainColor;
		font-weight: normal;
		font-size: 14px;
		font-weight: bold;
	}
	
	tr:hover {
		background: #f7f7f7;
	}
	
	td {
		padding: 10px;
		border: 1px solid grey;
		font-size: 14px;
		
		a {
			color: #3f3f3f;
			text-decoration: none;
			border-bottom: 1px dotted #3f3f3f;
			
			&:hover {
				color: lighten(@mainColor, 20%);
				border-bottom: 1px dotted lighten(@mainColor, 20%);
			}
		}
	}
	
	td a:hover h3 {
		text-decoration: underline;
	}
}

table.table2, .table2 table, .roster, .stats, #tabLiga, .tabLiga {
	margin-bottom: 20px;
	background: transparent;
	
	h4 {
		margin-bottom: 5px;
	}
	
	th {
		padding: 5px 10px 5px 10px;
		color: black;
		border-bottom: 2px solid @mainColor;
		font-weight: normal;
		font-size: 18px !important;
		font-weight: bold;
		text-align: left;
		font-family: bebas-neue-bold;
		letter-spacing: 1px;
	}
	
	th:nth-child(10) {
		text-align: center;
	}
	
	tr:hover td {
		background: #ededed;
	}
	
	tr.nastym {
		background: @mainColor;
		color: white;
		
		&:hover td {
			background: @mainColor;
		}
	}
	
	tr.highlight td {
		background: @sideColor2;
		color: black;
		border: 0;
		position: relative;
		border-bottom: 1px solid white;
	}
	
	td {
		padding: 5px 0 5px 10px;
		border-bottom: 1px solid lightgrey;
		font-size: 14px;
		
		a {
			color: #3f3f3f;
			text-decoration: none;
			border-bottom: 0px dotted #3f3f3f;
			
			&:hover {
				color: lighten(@mainColor, 20%);
				border-bottom: 0px dotted lighten(@mainColor, 20%);
			}
		}
		
		&.dt {
			text-align: center;
		}
	}
}

#tabLiga, .table_hokej_mala {
	a {
		border: 0;
	}
}


/* Fonts */
@font-face {
    font-family: bebas-neue;
    src: url('../fonts/bebas-neue-regular/bebasneueregular-webfont.eot');
    src: url('../fonts/bebas-neue-regular/bebasneueregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-neue-regular/bebasneueregular-webfont.woff2') format('woff2'),
         url('../fonts/bebas-neue-regular/bebasneueregular-webfont.woff') format('woff'),
         url('../fonts/bebas-neue-regular/bebasneueregular-webfont.ttf') format('truetype'),
         url('../fonts/bebas-neue-regular/bebasneueregular-webfont.svg#bebas_neue_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: bebas-neue-bold;
    src: url('../fonts/bebas-neue-bold/bebasneuebold-webfont.eot');
    src: url('../fonts/bebas-neue-bold/bebasneuebold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-neue-bold/bebasneuebold-webfont.woff2') format('woff2'),
         url('../fonts/bebas-neue-bold/bebasneuebold-webfont.woff') format('woff'),
         url('../fonts/bebas-neue-bold/bebasneuebold-webfont.ttf') format('truetype'),
         url('../fonts/bebas-neue-bold/bebasneuebold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: open-sans;
    src: url('../fonts/open-sans/opensans-webfont.eot');
    src: url('../fonts/open-sans/opensans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans/opensans-webfont.woff2') format('woff2'),
         url('../fonts/open-sans/opensans-webfont.woff') format('woff'),
         url('../fonts/open-sans/opensans-webfont.ttf') format('truetype'),
         url('../fonts/open-sans/opensans-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.fullWidth {
	width: 100%;
}

button {
	border: 2px solid @mainColor;
	font: 20px bebas-neue-bold;
	color: @mainColor;
	text-decoration: none;
	display: inline-block;
	transition: 1s all;
	background: transparent;
	margin: 0 auto;
	
	padding: 5px 10px;
	display: inline-block;
	color: @mainColor;
	text-decoration: none;
	border: 2px solid @mainColor;
	cursor: pointer;
	
	&:hover {
		transition: 1s all;
		background: @mainColor;
		color: white;
	}
}

input[type=text] {
	font-family: bebas-neue;
	font-size: 18px;
	color: black;
	border: 1px solid #c8c8c8;
}

/* Page styles */
header {
	float: left;
	width: 100%;
	position: relative;
	z-index: 9;
	
	.top-pane {
		padding: 10px 0;
		background: @mainColor;
		min-height: 40px;
		color: white;
		font: 16px bebas-neue;
		letter-spacing: .08em;
		
		.content {
			margin: 0 auto;
			
			a {
				background: url('../img/icons/arrow.png') no-repeat left center;
				padding-left: 25px;
				color: white;
				text-decoration: none;
				border: 0;
				
				&:hover {
					text-decoration: underline;
				}
			}
			
			.left {
				float: left;
				
				a {
					padding-right: 20px;
				}
			}
			
			.right {
				float: right;
				
				a {
					padding-left: 20px;
				}
			}
		}
	}
	
	nav {
		background: white;
		
		.content {
			position: relative;
			margin: 0 auto;
			width: 100%;
			min-height: 90px;
			background: white;
			
			a {
				border: 0;
			}

			.search-button {
				position: absolute;
				width: 30px;
				top: 50%;
				margin-top: -15px;
				cursor: pointer;
			}
			
			.search {
				position: absolute;
				background: #2d2d2d;
				padding: 10px 20px;
				z-index: 999;
				top: 10px;
				color: #e5e5e5;
				display: none;
				z-index: 99999999999999999999;
				
				.inner {
					form {
						input[type=text] {
							position: relative;
							float: left;
							background: transparent;
							outline: 0;
							border: 0;
							height: 50px;
							margin: 0;
							padding: 10px 0;
							font-family: bebas-neue-bold;
							font-size: 25px;
							color: #e5e5e5;
						}
						
						input[type=submit] {
							background: url('../img/icons/search-black.png') no-repeat right;
							position: relative;
							float: left;
							height: 40px;
							padding: 0;
							padding-left: 10px;
							top: 5px;
							position: relative;
							vertical-align: center;
							cursor: pointer;
							border: 0;
						}
					}
				
					&:before {
						content: '';
						position: absolute;
						top: 25px;
						width: 0; 
						height: 0; 
						border-top: 10px solid rgba(0,0,0,0);
						border-bottom: 10px solid rgba(0,0,0,0);
						border-left: 10px solid #2d2d2d;
					}
				}
			}
			
			.menu-button {
				position: absolute;
				right: 0;
				width: 30px;
				top: 50%;
				margin-top: -15px;
				margin-right: 20px;
				cursor: pointer;
			}
			
			>ul.menu {
				margin: 30px 0;
				padding: 0 10px;
				position: absolute;
				top: 0;
				font: 22px/30px bebas-neue-bold;
				letter-spacing: .06em;
				
				&:first-child {
					right: calc(~'50% + 80px');
					
					li:hover ul {	
						left: 10px;
						li {
							float: left;
							padding-right: 25px;
						}
					}
				}
				
				&:last-child {
					left: calc(~'50% + 80px');
					
					li:hover ul {
						right: 10px;
						li {
							float: right;
							padding-left: 25px;
						}
					}
				}
				
				>li {
					float: left;
					list-style-type: none;
					cursor: pointer;
					position: relative;
					padding: 0 10px;
					color: @mainColor;
					
					a {
						color: @mainColor;
						text-decoration: none;
					}
					
					&:hover {
						span:after {
							content: '';
							position: absolute;
							bottom: -30px;
							width: 0;
							height: 0;
							margin-left: -9px;
							left: 50%;
							border-style: solid;
							border-width: 0 9px 9px 9px;
							border-color: transparent transparent #ffd618 transparent;
						}
						
						a {
							border-bottom: 2px solid #ffd618;
						}
						
						ul {
							display: block;
							position: absolute;
							overflow: visible;
							z-index: 9;
							padding: 20px 0;
							top: 60px;
							width: 2000px;
							margin: 0;
							background: red;

							
							&:before {
								position: absolute;
								left: -9999px;
								width: 99999px;
								top: -30px;
								bottom: 0;
								content: '\00a0';
								z-index: -1;						
							}
							
							&:after {
								position: absolute;
								left: -9999px;
								width: 99999px;
								top: 0;
								bottom: 0;
								content: '\00a0';
								z-index: -1;
								background: #ffd618;
							}
							
							li {
								margin: 0;
								padding: 0;
								font-size: 18px;
								list-style-type: none;
								
								a {
									color: black;
									text-decoration: none;
									
									&:hover {
										text-decoration: underline;
									}
								}
							}
						}
					}
					
					ul {
						display: none;
					}
				}
			}
			
			.logo {
				position: absolute;
				top: -20px;
				width: 130px;
				height: 130px;
				left: 50%;
				margin-left: -65px;
				background: white;
				border-radius: 50%;
				box-shadow: 0 1px 1px #a8a8a8;
				padding: 5px;
				z-index: 99;
				
				svg {
					width: 120px;
					height: 120px;
				}
				
				img {
					margin: 0 auto;
					position: absolute;
					top: 5px;
					width: 120px;
					height: 120px;
					
				}
			}
		}
	}
}

main {
	width: 100%;
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
	float: none;
	z-index: 1;

	> .content {
		margin: 0 auto;
		max-width: 1280px;
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		position: relative;
		
		.otherArticles {
			float: left;
			position: relative;
			width: 100%;
			
			.article {
				float: left;
				width: 100%/3;
				position: relative;
				margin-bottom: 15px;
				height: 250px;
				
				p {
					float: left;
					display: none;
					background: rgba(0,0,0,.8);
					color: white;
					margin: 0;
					padding: 10px 15px;
					font-size: 15px;
					letter-spacing: .04em;
				}
				
				&:hover {
					cursor: pointer;
					a, h4 {
						text-decoration: underline !important;
					}
					p {
						display: none;
					}
				}
				
				.image-overlay {
					position: absolute;
					bottom: 20px;
					margin: 0 auto;
					width: 80%;
					left: 10%;
					
					.date {
						margin: 0 auto;
						color: white;
						text-align: center;
						float: left;
						width: 100%;

						span {
							display: inline-block;
							background: black;
							font: 14px bebas-neue;
							padding: 5px 10px;
							letter-spacing: .09em;
						}
					}
					
					.title {
						background: fade(@mainColor, 85%);
						padding: 10px;
						float: left;
						width: 100%;
						
						h4 {
							color: white;
							text-align: center;
							font-family: bebas-neue-bold;
							letter-spacing: .04em;
							margin: 0 0 -2px 0;
							padding: 0;
						}
					}
				}
			}
		}
		
		.banners {
			float: left;
			width: 100%;
			max-width: 1280px;
			background: url('../img/backgrounds/home-page-banners.png');
			
			.banner {
				float: left;
				text-align: center;
				padding: 30px;
				
				
				&:hover {
					h4 {
						text-decoration: underline;
					}
				}
				
				h5 {
					color: #ffd618;
					font-size: 22px;
					padding: 0;
					margin: 0;
					margin-bottom: 15px;
				}
				
				h4 {
					color: white;
					font-size: 45px;
					padding: 0;
					margin: 0px;
				}
			}
			
			.partners {
				width: 100%;
				float: left;
				position: relative;
				background: white;
				
				.row {
					position: relative;
					float: left;
					width: 100%;
					text-align: center;
					display: -webkit-box;
					display: -moz-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-flex-flow: row wrap;
					justify-content: space-around;
					transition: 1s opacity;

					
					.partner {
						padding: 20px;
						border-bottom: 1px solid #dcdcdc;
						flex: auto;
						
													&.hidden {
								display: none;
							}
						

						
						img {
							width: 180px;
							margin: 0 auto;
							display: block;
							
							&.hidden {
								display: none;
							}
						}
					}
					
					&:first-child {
						.partner {
							img {
								width: 240px;
							}
						}
					}
				}
			}
		}
		
		.left-area {
			float: left;
			background: white;
			position: relative;
			
			article {
				margin: 0;
				
				.photos {
					margin-bottom: 10px;
					
					button {
						margin-top: 10px;
					}
					
					table {
						border: 0;
						margin: 0;
						margin-bottom: 0px;
						padding: 0;
						width: 100%;
					
						tr {
							margin: 0;
						}
					
						td {
							border: 0;
							padding: 1px;
						
							img {
								padding: 0;
								width: 100%;
								background: black;
								display: block;
								opacity: .85;
								transition: .3s opacity;
								
								&:hover {
									opacity: 1;
									transition: .3s opacity;
								}
							}
						}
					}
				
					.photoThumb {
						width: 100px;
						max-height: 180px;
						overflow: hidden;
					}
				}
				
				h1, h2, h3, h4, h5, h6 {
					color: @mainColor;
				}
				
				> .header {
					float: left;
					width: 100%;
					position: relative;
					
					> img {
						width: 100%;
					}
					
					.image-overlay();
				}
				
				&.standings {
					font-size: 20px;
					
					p b {
						display: none;
					}
					
					fieldset {
						border: 0px dotted grey;
						border-radius: 5px;
						padding: 0 !important;
						margin-left: 0 px !important;
						width: auto !important;
						font-family: bebas-neue-bold;
						font-size: 18px !important;
						
						a {
							text-decoration: none;
							border-bottom: 1px dotted @mainColor;
							color: black;
							
							&:hover {
								color: @mainColor;
							}
						}
						
						b, strong {
							float: left;
							width: 70px;
							font-size: 18px;
						}
						
						line-height: 35px;
						
						p {
							margin: 0;
						}
					}
					
					table {
						th {
							a {
								color: @mainColor;
							}
						}
						
						tr td {
							height: 35px;
							font-size: 15px !important;
						}
					}
					
					a.True {
						font-weight: bold;
						background: @mainColor;
						font-size: 18px;
						padding: 5px;
						border-radius: 5px;
						color: white;
						border: 0 !important;
						
						&:hover {
							color: white;
						}
					}
					
					div, p {
						font-size: 15px;
						margin-bottom: 10px;
					}
				}
				
				.content {
					float: left;
					width: 100%;
					
					h1, h2, h3, h4, h5, h6 {
						float: left;
						width: 100%;
						margin: 0;
						padding: 10px 0;
					}
					
					&.search iframe {
						border: 0;
						width: 100%;
						height: 900px;
					}
					
					.article-info {
						border-bottom: 1px solid #dcdcdc;
						padding: 0px 0 10px 0;
						margin-bottom: 20px;
						width: 100%;
						float: left;
						position: relative;
						overflow: hidden;
					}
					
					p.perex {
						font-weight: bold;
					}
					
					.gameStats {
						border: 1px solid #dcdcdc;
						width: 100%;
						
						.content {
							padding: 20px;
						}
					}
					
					&.partners {
						img {
							padding: 20px;
						}
					}
					
					p {
						width: 100%;
						line-height: 1.6em;
					}
					
					section {
						width: 100%;
						padding: 10px 0;
					}
					
					.fb-comments {
						width: 100%;
					}
				}
				
				&.player {
					img {
						display: block;
						max-width: 100%;
						margin: 0 auto;
					}
					ul.bio {
						width: 100%;
						display: block;
						padding: 0;
						margin: 0;
						
						li {
							margin: 0;
							float: left;
							display: block;
							list-style-type: none;
							box-sizing: border-box;
							width: 25%;
							padding: 20px;
							font-size: 20px;
							text-align: center;
							background: @mainColor;
							color: white;
							
							&:before {
								display: none;
							}
							
							.bio-header {
								font-weight: bold;
							}
							
							.bio-value {
								font-size: 15px;
								padding: 10px 0 0 0;
							}
						}
					}
					
					ul.tabs {
						width: 100%;
						display: block;
						padding: 0;
						float: left;
						margin-top: 20px;
						
						a.selected {
							li {
								background: @mainColor;
							}
						}
						
						li {
							margin: 0;
							float: left;
							display: block;
							list-style-type: none;
							box-sizing: border-box;
							width: 25%;
							padding: 20px;
							font-size: 20px;
							text-align: center;
							background: #3438a5;
							font-family: bebas-neue-bold, bebas-neue;
							color: white;
							
							&:hover {
								background: @mainColor;
							}
							
							&:before {
								display: none;
							}
												
							a {
								color: white;
								&:hover {
									color: black;
								}
							}
						}
					}
				
				.photogallery {
					padding-bottom: 10px;
					
					form {
						position: relative;
						float: left;
						width: 100%;
						margin-bottom: 20px;
					}
					
					select {
						margin-bottom: 5px;
						padding: 3px 7px;
						box-sizing: border-box;
					}
					
					input {
						margin-bottom: 5px;
						padding: 3px 10px;
						box-sizing: border-box;
					}
					
					button {
						margin-top: 5px;
					}
					
					label {
						float: left;
						width: 100px;
						margin-bottom: 5px;
						line-height: 26px;
					}
					
					table {
						border: 0;
						margin: 0;
						margin-bottom: 10px;
						margin-top: 20px;
						width: 100%;
					
						tr {
							margin: 0;
						}
					
						td {
							border: 0;
							padding: 1px;
						
							img {
								padding: 0;
								width: 100%;
								background: black; 
								display: block;
								opacity: .85;
								transition: .3s opacity;
								
								&:hover {
									opacity: 1;
									transition: .3s opacity;
								}
							}
						}
					}
				
					.photoThumb {
						width: 100%;
						max-height: 180px;
						overflow: hidden;
					}
				}
					
					ul.otherPlayers {
						width: 100%;
						display: block;
						position: relative;
						padding: 0;
						float: left;
						margin: 0;
						margin-bottom: 20px;
						
						li {
							margin: 0;
							float: left;
							display: block;
							list-style-type: none;
							box-sizing: border-box;
							width: 24%;
							margin: 0.5%;
							padding: 20px 20px 20px 0;
							font-size: 20px;
							font-weight: bold;
							text-align: right;
							background: #3438a5;
							color: white;
							transition: 5s background;
							
							&:before {
								display: none;
							}
							
							&:hover {
								background: @mainColor;
								transition: 0.2s background;
							}
							
							.post {
								font-size: 14px;
								font-weight: normal;
							}
							
							a {
								color: white;
								&:hover {
									color: black;
								}
							}
						}
					}
				}
				
				.articleList {
					position: relative;
					margin-bottom: 50px;
					
					.checkBoxes {
						position: absolute;
						right: 10px;
						top: 32px;
						text-align: right;
						min-width: 300px;
					}
						
					.article {
						border-bottom: 1px solid #dde2ed;
						float: left;
						overflow: visible;
						padding-bottom: 15px;
						margin-bottom: 15px;
						margin-top: 15px;
						width: 100%;
						
						h2 {
							font-size: 34px;
						}
						
						.image {
							float: left;
							width: 30%;
							height: 123px;
							overflow: hidden;
							padding-right: 20px;
							
							img {
								width: 100%;
								max-width: none;
							}
						}
						
						.details {
							float: left;
							width: 70%;
							
							a {
								text-decoration: none;
							}
							
							h2 {
								margin-bottom: 0;
								font-family: bebas-neue-bold, bebas-neue;
								font-size: 40px;
							}	
							
							a h2 {
								margin-top: 0px;
								color: @mainColor;
								transition: 0.3s all;
								
								&:hover {
									text-decoration: underline;
									transition: 0.3s all;
								}
							}
							
							p {
								margin: 0;
							}
							
							.author {
								.articleInfo;
							}
						}
					}
				}
			}
		}
		
		.sidebar {
			background: #eeeeee;
			border-left: 1px solid #dcdcdc;
			
			section {
				padding: 30px;
				overflow: auto;
				border-bottom: 1px solid #dcdcdc;
				
				.box-header();
				.standings-table();
				
				ul  {
					width: 100%;
					float: left;
					position: relative;
					list-style-type: none;
					padding: 0;
					margin: 0;
					
					li {
						border-bottom: 1px solid #dcdcdc;
						padding: 10px 0;
						
						&.selected a {
							color: lighten(#2E3192, 5%);
						}
						
						a {
							text-decoration: none;
							color: #3f3f3f;
							font-size: 25px;
							font-family: bebas-neue-bold;
							border: 0;
							
							&:hover {
								color: lighten(#2E3192, 5%);
							}
						}
					}
				}
			}
		}
	}
}

footer {
	background: @mainColor;
	float: left;
	width: 100%;
	text-align: center;
	font-family: bebas-neue;
	font-size: 18px;
	
	.content {
		margin: 0 auto;
		color: white;
		
		.menu {
			background: white;
			color: @mainColor;
			padding: 40px 0;
			position: relative;
			
			.content {
				margin: 0 auto;
				position: relative;
				
				span {
					color: @mainColor;
					font: 22px bebas-neue-bold;
					padding: 10px;
					
					a {
						text-decoration: none;
						border: 0;
						color: @mainColor;
						
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		
		.middle-part {
			font-family: open-sans;
			display: table;
			border-collapse: collapse;
			margin: 0 auto;
			
			.box {
				display: table-cell;
				width: 100%/3;
				padding: 50px 0;
				font-size: 14px;
				line-height: 27px;
			}
		}
		
		.bottom-part {
			padding: 20px 0;
			border-top: 1px solid #54458c;
		}
	}
}

@import (less) 'index.css';
@import (less) 'responsive.css';