.livetext
{
	background: rgb(255, 255, 255, 10);
}


#frameMenuBar
{
	z-index: 5; /* bottom */

	width: 80px;
}


#stackedWidgetMain
{
	z-index: 0; /* bottom */

	position: absolute;
	left: 80px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}



#pageIntroduction
{
	background: rgb(44, 44, 44);/*overlay everything*/
	z-index: 10; /* top */
	
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}


#_PROBLEMEN_OP_MOBIEL_innerIntroduction
{
	min-width: 400px;
	max-width: 800px;
	margin: auto;
	padding: 0px 40px 0px 40px;
}
#innerIntroduction/*dit is al beter,maar dus helaas schermbreedte-vullend*/
{
	position: absolute;
	left: 0px;
	right: 20px;
	top: 0px;
	bottom: 0px;
}

#pageFullText, #_pageConfig,
.UseFullRect
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}


.Use50percentAtBottom
{
	position: absolute;
	_left: 0px;
	right: 0px;
	_width: 40%;
	_height: 40%;
	bottom: 0px;
}



#pageFullText
{
	background-color: black;/*because the player is black, avoid the spacing with 'under video-'subtitle colored grey */
}


.UseFullHeight
{
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.UseFullWidth
{
	position: absolute;
	left: 0px;
	right: 0px;
}


#labelFullText
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	white-space: pre-wrap;
	
	/* runtime properties */
	font-size: 36pt;
	color: yellow;
	
	background: black;
	_background: rgba(0, 255, 0, 0.1);
}

#frameAppearance
{
	z-index: 1;
	
	position: absolute;
	bottom: 120px;
	left: 0px;
	
	height: auto;
	resize: none; 
}

.menubar_button
{
	height: 80px;
	width: 80px;
}

.menubar_button:hover
{
	height: 80px;
	width: 80px;
}


.ttvlogo
{
	margin: 10;
}

#ws_state
{
	font-size: 14px;
	font-weight: bold;
	color: red;
}




.header_topleft
{
	top:0;
_top:20;
	left:0;
	height: auto;
	position:fixed;
	z-index:3;
	
_background-color: rgba(255,255,0,0.5);
}

.header_topright
{
	position: fixed;
	display: block;
	top:0;
	right:0;
	height: auto;

	z-index:3;
	
background-color: rgba(255,255,0,0.5);
}



.page, .popup
{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.popup
{
	z-index: 2;
}


/* transform werkt niet op mijn SmartTV*/
.__frameCenter50perc
{
	width: 50%;
	height: 50%;
	background-color: rgba(0,0,0,0.8);
	border-radius: 20px;
	padding: 50;
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);

}

.frameCenter50perc
{
	width: 50%;
	height: 50%;

	background-color: black;/*rgba(0,0,0,0.8);*/
	border: 2px solid grey;
	border-radius: 20px;
	padding: 50 30;
	
	margin: 70 auto;
}





#pageSelectChannel
{
	_background-color: rgba(0,0,0,0.5);
	display: show;	/* Initially shown, changed at runtime */
}

#pageLogin
{
	_background-color: rgba(255,0,0,0.5);
	display: none;	/* Initially hidden, changed at runtime */
}

#pageSignUp
{
	_background-color: rgba(255,255,0,0.5);
	display: none;	/* Initially hidden, changed at runtime */
}


#pageWatchTV
{
	display: none;	/* Initially hidden, changed at runtime */
}

#popupSelectLanguage
{
	display: none;	/* Initially hidden, changed at runtime */
}



/* transform werkt niet op mijn SmartTV*/
.__frameCenter60perc
{
	width: 60%;
	height: 75%;
	background-color: rgba(0,0,0,0.8);
	border-radius: 20px;
	padding: 50;
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
/* Daarom maar zo*/
/* http://jsfiddle.net/Tareqdhk/DAFEC/ */
.frameCenter60perc
{
	width: 50%;
	height: 65%;				/* 65% hoogte, maar de listbox loopt over :-/ */

_height: GEENHOOGTEOPGEVEN;				/* The content will decide the height */
_min-height:65%;/* probleem is dat de ie bij minder inhoud weer te laag is. */



	background-color: black;/*rgba(0,0,0,0.8);*/
	border-radius: 20px;
	padding: 50 30;
	
	margin: 50 auto;
}



/* this is the div that covers the scrollbar */
.frameScrollArea
{
    width: 100%;
	height: 100%;				/* listbox loopt over als in frameCenter60perc te weinig ruimte over is */
_height: 65%;				/* this height actually tell the height of our parent frameCenter60perc */
    overflow: hidden;
}

/* this is the div that scrolls */
.frameScrollAreaContent
{
	height: 100%;
    width: 100%;
    overflow: auto;			/* met scrollbar, dus scrollwheel werkt, maar frameCenter loopt over */
    padding-right: 20px;	/* Hide scrollbar */
    padding-left: 10px;		/* Center (compensate for padding-right) */
}




.tvstation_item
{
	margin: 20 auto;
	width: 80%;
	padding: 6;
	height: 60;
	
    border: 1px solid grey;
    border-radius: 10px;
}

.tvstation_item:hover
{
	background-color:rgba(0,255,0,0.3);
}

.tvstation_item.selected
{
	/* Thick orange border */
    border: 3px solid orange;
    
	/* Compensate for thick border */
	padding: 4;
	height: 61;
	
	/* Zoom effect*/
	width: 83%;
}


.imgscale_70h
{
    height: auto; 
    width: auto; 
    max-height: 60px;/*scale down, with aspect ratio due to auto*/
    max-width: 150px; 
    
    /* Adding this also will scale up!! BUT WITHOUT aspect ratio in case max-width is reached */
    /* Scaling up is needed for RTL7 */
    height: 60px;
}


.imgvcenter_70h
{
    display: table-cell;
    vertical-align: middle;
	height: 60; 
    width: auto;
}

.vcenter_70h
{
	height: 60px;
	display: table-cell;
	vertical-align: middle;
}


.alignleft
{
	float:left;
}

.alignright
{
	float:right;
}


.language_item
{
	margin: 10 auto;
	width: 80%;
	padding: 6;
	height: 40;
	
    _border: 1px solid grey;
    _border-radius: 10px;
}



/* http://jsfiddle.net/ks2jH/1/ */
.aspectwrapper {
	display: inline-block; /* shrink to fit */
	_width: 300px; /* whatever width you like */
	position: relative; /* so .aspectwrappercontent can use position: absolute */
}
.aspectwrapper::after {
	padding-top: 100%; /* percentage of containing block _width_ */
	display: block;
	content: '';
}
.aspectwrappercontent {
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
	_outline: thin dashed green; /* just so you can see the box */
	overflow: hidden;
}




#_pageContentWatchTV
{
	margin: 30px;
	background-color: red;
}

/* this wrapper hides the scrollbar of the iframe */
.pageContentWatchTV
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}




#frameTV,
#frameTV2,
#frameTV3
{
	_display:block;/*disabled to show 2 iframes side-by-side*/
	margin: 0 auto 0 auto;
	_z-index: 1;
/*set at runtime to show 2 iframes side-by-side width:40%;*/
}

#frameSubtitleAbsoluteFloating
{
	position: fixed;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	_z-index: 2;
	resize: none; 
pointer-events: none;
}



#frameSubtitle
{
	padding: 10px 0px;
	position: relative;
	display: block;
/*background-color:rgba(255,0,0,0.5);*/

	/*margin: 0 auto;*/
	margin: 0 auto 0 80px;/* move beside frameMenuBar */
	_z-index: 3;	
	height: auto;
	
	
	/* runtime properties */
	background-color: rgba(0,0,0,0.5);
}


.labelSubtitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	white-space: pre-wrap;
	overflow: hidden;
	padding: 0 80px;

	/* runtime properties */
	_text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	color: yellow;
	font-size: 45px;
	height: 100;
}



#PlayerSignMe,
#PlayerAudioSource,
#PlayerSignColleague
{
/*werkt niet! deze wint altijd van class ... */
	_border: 4px solid transparent;
}

#PlayerSignMe,
#PlayerSignColleague
{
	position: absolute;
	left: 0px;
}

#PlayerAudioSource
{
	position: absolute;
	right: 0px;
}


.selected
{
	border: 4px solid yellow;
}

.notselected
{
	border: 4px solid transparent;
}