﻿/* TV */

.ShkabajTV {
	position: relative;

	margin-left: auto;
    margin-right: 130px;
	width: 980px;
}

/* TV video player block */

.ShkabajTV .TVPlayerBlock {
	position: relative;

	height: 410px;
}

.ShkabajTV .TVPlayerBlock .PlayerArea {
	position: absolute;
	top: 0;
	left: 0;

	width: 650px;
	height: 366px;
}

.ShkabajTV .TVPlayerBlock .PlayerArea iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.ShkabajTV .TVPlayerBlock .Sharing {
	position: absolute;
	bottom: 2px;
	left: 8px;

	width: 350px;
	height: 24px;
}

.ShkabajTV .TVPlayerBlock .Sharing .SocialArea {
	display: inline-block;

	position: relative;

	vertical-align: top;
}

.ShkabajTV .TVPlayerBlock .Sharing .SocialArea + .SocialArea {
	margin-left: 14px;
}

.ShkabajTV .TVPlayerBlock .Sharing .SocialArea.TwitterArea {
	top: 2px;
}

.ShkabajTV .TVPlayerBlock .TopRight {
	position: absolute;
	top: 0;
	right: 0;
}

.ShkabajTV .TVPlayerBlock .BottomRight {
	position: absolute;
	top: 275px;
	right: 0;

	width: 300px;

	text-align: center;
}

/* TV channels (grouping) */

.ShkabajTV .TVChannels {
	margin-top: 40px;
}

.ShkabajTV .TVChannels .TVChannelBlock {
	position: relative;

	font-size: 0;
	line-height: 0;
}

.ShkabajTV .TVChannels .TVChannelBlock.Block01 {
}

.ShkabajTV .TVChannels .AdBlock.Block02 {
	text-align: center;
}

/* a way of targeting the ads that will be generated;
   used for the purpose of giving a vertical margin only if an ad loads */
.ShkabajTV .TVChannels .AdBlock.Block02 > script + div,
.ShkabajTV .TVChannels .AdBlock.Block02 > script + iframe {
	margin-bottom: 32px;
}

.ShkabajTV .TVChannels .TVChannelBlock.Block03 {
}

/* TV channel */

.ShkabajTV .TVChannels .TVChannel {
	display: inline-block;

	position: relative;

	background: white;
}

.ShkabajTV .TVChannels .TVChannel.template {
	display: none;
}

.ShkabajTV .TVChannels .TVChannelBlock .TVChannel {
	 box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.15);
}

.ShkabajTV .TVChannels .TVChannel .ChannelImage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	cursor: pointer;
	overflow: hidden;
}

.ShkabajTV .TVChannels .TVChannel .ChannelImage img {
	width: 100%;
	height: 100%;
}

.ShkabajTV .TVChannels .TVChannel .ChannelInfo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.ShkabajTV .TVChannels .TVChannel .ChannelInfo .Name {
	font-weight: bold;
	color: black;
}

.ShkabajTV .TVChannels .TVChannel .ChannelInfo .Location {
	color: #444444;
}

.ShkabajTV .TVChannels .TVChannel .ChannelInfo .URI {
}

.ShkabajTV .TVChannels .TVChannel .ChannelInfo .URI a {
	color: inherit;
	text-decoration: none;
}

.ShkabajTV .TVChannels .TVChannel .ChannelInfo .URI a:hover {
	color: #36B3D1;
}

.ShkabajTV .TVChannels .TVChannel.playing {
	box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.ShkabajTV .TVChannels .TVChannel.playing .ChannelInfo {
background: #D9E6FD;
}

.ShkabajTV .TVChannels .TVChannel.playing .ChannelInfo .Name {
color: #000055;
}

/* TV channels, 4 columns of channels */

.ShkabajTV .TVChannels.channelCols-4 .TVChannel {
	width: 220px;
	height: 250px;
}

.ShkabajTV .TVChannels.channelCols-4 .TVChannelBlock .TVChannel {
	margin-left: 32px;
	margin-bottom: 28px;
}

.ShkabajTV .TVChannels.channelCols-4 .TVChannelBlock .TVChannel:nth-child(4n+1) {
	margin-left: 0;
}

.ShkabajTV .TVChannels.channelCols-4 .TVChannel .ChannelImage {
	height: 156px;
}

.ShkabajTV .TVChannels.channelCols-4 .TVChannel .ChannelInfo {
	top: 156px;

	padding: 6px 8px 0 8px;

	font-size: 16px;
	line-height: 1.6;
}

/* TV channels, 5 columns of channels */

.ShkabajTV .TVChannels.channelCols-5 .TVChannel {
	width: 180px;
	height: 204px;
}

.ShkabajTV .TVChannels.channelCols-5 .TVChannelBlock .TVChannel {
	margin-left: 20px;
	margin-bottom: 24px;
}

.ShkabajTV .TVChannels.channelCols-5 .TVChannelBlock .TVChannel:nth-child(5n+1) {
	margin-left: 0;
}

.ShkabajTV .TVChannels.channelCols-5 .TVChannel .ChannelImage {
	height: 128px;
}

.ShkabajTV .TVChannels.channelCols-5 .TVChannel .ChannelInfo {
	top: 128px;

	padding: 5px 8px 0 8px;

	font-size: 15px;
	line-height: 1.4;
}

