/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.next, a.nextPage 
{
	display:block;
	width:32px;
	height:36px;
	background:url(../images/arrow/left_meo.png) no-repeat;
	float:left;
	margin:90px 10px 0px 10px;
	cursor:pointer;
	font-size:1px;
}

/* prev, prevPage buttons */
a.prev, a.prevPage
{
	display:block;
	width:32px;
	height:36px;
	background: transparent url(/Content/images/arrow/setas.png) no-repeat -20px -50px; 
	float:left;
	margin:100px 0 0  10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.prevPage:hover
{
	background-position:-100px -50px;		
}

a.next:hover, a.nextPage:hover {
	background-position:-130px -50px;
}

/* next button uses another background image */
a.next, a.nextPage {
	background: transparent url(/Content/images/arrow/setas.png) no-repeat -50px -50px; 
	clear:right;	
	margin: 100px 0 0 0;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* prev, next, prevPage and nextPage buttons */
a.next-tv, a.nextPage-tv 
{
	display:block;
	width:32px;
	height:34px;
	background: transparent url(/Content/images/arrow/setas.png) no-repeat -50px -50px; 
	clear:right;	
	float:left;
	margin:25px 10px 0px 10px;
	cursor:pointer;
	font-size:1px;
}

/* prev, next, prevPage and nextPage buttons */
a.prev-tv, a.prevPage-tv 
{
	display:block;
	width:32px;
	height:34px;
	background: transparent url(/Content/images/arrow/setas.png) no-repeat -15px -50px; 
	float:left;
	margin:25px 10px 0px 10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.next-tv:hover, a.nextPage-tv:hover {
	background-position:-130px -50px;		
}

a.prev-tv:hover, a.prevPage-tv:hover {
	background-position:-95px -50px;		
}


/* prev, next, prevPage and nextPage buttons para Home Destaques*/
a.prev2, a.next2, a.prevPage2, a.nextPage2{
	display:block;
	width:16px;
	height:16px;
	background:url(../images/arrow/left_meo_small.png) no-repeat;
	float:left;
	margin:50px 10px 0px 10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev2:hover, a.next2:hover, a.prevPage2:hover, a.nextPage2:hover {
	background-position:0px -16px;		
}

/* next button uses another background image */
a.next2, a.nextPage2 {
	background-image:url(../images/arrow/right_meo_small.png);
	clear:right;	
}


/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left:45%;
	width:200px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:4px;
	background:url(../images/arrow/navigator3.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
}

/* position and dimensions of the navigator */
div.navi-tv {
	margin-left:45%;
	width:100px;
	height:20px;
}


/* items inside navigator */
div.navi-tv a {
	width:8px;
	height:8px;
	float:left;
	margin:2px;
	background:url(../images/arrow/navigator3.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi-tv a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi-tv a.active {
	background-position:0 -16px;     
} 



/* position and dimensions of the navigator */
div.navi2 {
	margin-left:130px;
	width:100px;
	height:14px;
}

/* items inside navigator */
div.navi2 a {
	width:8px;
	height:8px;
	float:left;
	margin:2px;
	background:url(../images/arrow/navigator3.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi2 a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi2 a.active {
	background-position:0 -16px;     
} 


/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 798px;	
	height:255px;
	/* custom decorations */
	background-color:none;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:5px;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	position:relative;
	/* custom decoration */
	/*text-align:center;*/
	line-height: 20px;
	width:155px;
	padding:2px 3px;
	color: #000000;
	border:1px #fff;
	/*background-color: #ddd;*/
	margin:0px;
}

/* active item */
div.scrollable div.items div.active {
	background-color:transparent;
}


/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable-destaques {
	float:left;
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 528px;	
	height:205px;	
	/* custom decorations */
	background-color:transparent;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable-destaques div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:5px;
}

/* single scrollable item */
div.scrollable-destaques div.items div {
	float:left;
	
	/* custom decoration */
	/*text-align:center;*/
	line-height: 20px;
	width:130px;
	padding:2px;
	color: #000000;
	border:1px #fff;
	/*background-color: #ddd;*/
	margin: 0px;
	
}

/* active item */
div.scrollable-destaques div.items div.active {
	background-color: transparent;
}

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable-canaistv {
	float:left;
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 220px;	
	height:75px;	
	/* custom decorations */
	padding:0px 0px 0px 0px;
	margin:0 auto;
	display:inline-block;
	background-color:transparent;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable-canaistv div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:0px;
}

/* single scrollable item */
div.scrollable-canaistv div.items div {
	float:left;
	
	/* custom decoration */
	/*text-align:center;*/
	line-height: 20px;
	width:60px;
	padding:4px;
	font-size:30px;
	color: #000000;
	border:1px #fff;
	/*background-color: #ddd;*/
	margin: 0px 5px 5px 2px;
	
}

/* active item */
div.scrollable-canaistv div.items div.active {
	background-color: #005884;
}


/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable-dest-home {
	float:left;
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 200px;	
	height:150px;	
	/* custom decorations */
	padding:0px;
	margin:0 auto;
	display:inline-block;
	background-color: #transparent;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable-dest-home div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:0px;
}

/* single scrollable item */
div.scrollable-dest-home div.items div {
	float:left;
	
	/* custom decoration */
	/*text-align:center;*/
	line-height: 20px;
	width:190px;
	padding-left:0px;
	padding-right:10px;
	color: #000000;
	border:1px #fff;
	/*background-color: #ddd;*/
	margin: 0px 0px 0px 0px;
	
}

/* active item */
div.scrollable-dest-home div.items div.active {
	background-color: #transparent;
}


/* TimeShiftPlayer page */

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.timeshift-scrollable-canaistv {
	float:left;
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 886px;	
	height:55px;	
	/* custom decorations */
	padding:0px 0px 0px 0px;
	margin:0 auto;
	display:inline-block;
	background-color:transparent;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.timeshift-scrollable-canaistv div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	height:50px;
	/* decoration */
	margin-left:0px;
}

/* single scrollable item */
div.timeshift-scrollable-canaistv div.items div {
	float:left;
	height:50px;
	line-height: 20px;
	width:280px;
	padding:4px;
	font-size:30px;
	color: #000000;
	border:1px #fff;
	margin: 0px 5px 5px 2px;
    cursor: pointer;
}

/* active item */
div.timeshift-scrollable-canaistv div.items div.active {
	height:50px;
}

.timeshift-center-nav-elements {
    margin-top: 8px !important;
}

.timeshift-player-item-title {
    font-size: 12px;
    position: absolute;
    top: 12px;
    left: 20px;
}

.timeshift-player-item-title-one {
    font-size: 15px;
    font-weight: bold;
    top: 12px;
    color: #31859C;
}

.timeshift-player-item-container {
    height: 50px;
    width: 280px;
    background:#f0f0f0;
    position: relative;
}

.timeshift-player-item-container-one {
    height: 30px !important;
    width: 200px !important;
    cursor: pointer;
    margin-left: 350px!important;
    text-align:center;
}

.timeshift-player-item-container.active, .timeshift-player-item-container.active:hover {
    background:#0099ab;
}

.timeshift-player-item-container:hover {
    background:#dadada;
}

.timeshift-player-item-container span {
    color:#7a7a7d;
}

.timeshift-player-item-container.active span {
    color: #fff;
}