/**
 * @description		extension ftaquiz styles
 * @project			Frage trifft Antwort
 * @site			frage-trifft-antwort.de
*/

@media all
{
	/*  fta video slider :: start */
	div.slidercontainer {
		border:1px solid #777;
		padding:0.1em;
		height: 246px;
		width: 96.5%;
		overflow:hidden;
		position:relative;
	}

	div.slidercontainer .videoplayer {
		width:100%;
		position: absolute;
		left:0;
		top:0;
/*		line-height: 17.8em;*/
		height: 246px;
		margin:0;
	}

	div.slidercontainer div.metadata {
		width:98%;
		height:40%;
		position: absolute;
		left:0;
		bottom:0;
		background:transparent url(../../images/layout/grey_transparent.png);
		color:#FFF;
		vertical-align: bottom;
		padding-right:2%;
		overflow: hidden;
	}

	div.slidercontainer div.metadata .title {
		font-size:1.4em;
		position: relative;
		white-space: normal;
		line-height: 1.1;
	}
	div.slidercontainer div.metadata .title a {
		color:inherit;
		text-decoration: inherit;
	}
	div.slidercontainer .videocontainer div.metadata .title {
		left:0.4em;
		top:1.5em;
	}
	div.slidercontainer .quizcontainer div.metadata .title {
		left:0.4em;
		top:0.6em;
	}
	div.slidercontainer div.metadata .description,
	div.slidercontainer div.metadata .duration {
		position: relative;
		left:0.5em;
	}
	div.slidercontainer div.metadata .duration {
		font-size:0.9em;
		top:2.3em;
	}
	div.slidercontainer .quizcontainer div.metadata .description {
		display:none;
		top:1.6em;
		font-size:0.7em;
	}

	div.quizcontainer,
	div.videocontainer {
		background:transparent url(../../images/layout/bg_slider.jpg) right bottom no-repeat;
	}

	#featured .ui-tabs-panel {
		position:relative;
		overflow:hidden;
	}
	#featured .ui-tabs-hide{
		display:none;
	}

	div.tabswrapper {
		width:33%;
		height:100%;
		position: absolute;
		right:0;
		top:0;
		height: 248px;
		background:#FFF;
		margin:0;
		padding:0;
		overflow: hidden;
	}

	div.tabswrapper h3 {
		margin: .2em 0 0 0.6em;
	}

	div.tx-ftaslider-pi3 div.tabswrapper h3 {
/*		display:none;*/
	}

	ul.vertical.slider {
		position:static;
		margin:0;
		padding:0;
		/*overflow: -moz-scrollbars-vertical;*/
		overflow:auto;
		overflow-y:auto;
		overflow-x:hidden;
		height: 218px;
		-webkit-overflow-scrolling: touch;
/*		overflow:hidden;*/
	}

	ul.vertical.slider li {
		margin: 0.25em 0 0.35em 0;
		padding-left:9px;
	}

	ul.vertical.slider div.scroller {
		width:auto;
		position:relative;
		float:right;
	}

	ul.vertical.slider li.ui-state-active {
		background:transparent url(../../images/layout/selected.png) left top no-repeat;
	}
	ul.vertical.slider li.ui-state-active > div {
		color: #d9e1af;
		background: #d9e1af;
	}
	ul.vertical.slider a {
		color: #222;
		text-decoration: none;
		font-size: 0.7em;
		padding-right: 0em;
	}

	ul.vertical.slider li > div {
		text-decoration:none;
		padding:0.3em 0.3em 0.3em 0.3em;
		margin-right:  0.3em;
		vertical-align:bottom;
		overflow: hidden;
		white-space: nowrap;
	}
	ul.vertical.slider li > div a {
		display:inline-block;
		white-space:initial;
		/*height:100%;*/
		line-height:100%;
	}
	ul.vertical.slider  li > div a.image,
	ul.vertical.slider a.image {
		width:auto;
	}
	ul.vertical.slider a.title {
		margin-left:0.3em;
	}
	/*  fta video slider :: end */

	/* slider video :: start */

	.slidercontainer .media-controls-wrapper {
		border:0;
		background: transparent;
	}
	.slidercontainer .media-element-box {
		border:none !important;
		height:100%;
		overflow: hidden;
	}
	.slidercontainer .media-element-box img {
		height:auto;
		width:100%;
	}
	.slidercontainer .media-element-box object {
		height:auto;
		width:100%;
		margin-left:-2px;
	}
	.slidercontainer video {
/*		width: 440px;
		height: 246px;*/
	}
	.slidercontainer .media-player {
		width: 434px;
		height: 246px;
	}
	.slidercontainer .media-player img.screenshot {
/*		width: 434px;
		height: 246px;*/
	}
	.slidercontainer .quiz-item,
	.slidercontainer .game-item,
	.slidercontainer .video-item {
		position: relative;
		overflow: hidden;
		background:  #4a0003;
		margin:0 1.4em 0 10em;
	}
	.slidercontainer .quiz-item,
	.slidercontainer .game-item,
	.slidercontainer .video-item {
		width:100%;
		height: 100%;
		width: 434px;
		max-height: 246px;
		overflow: hidden;
		border-left: 9px solid #4a0003;
		margin:0 1.9em 0 9.5em;
	}
	/* slider video :: end */
	.slidercontainer .mejs-container {
		background: #4A0003;
	}
	.slidercontainer .mejs-controls {
		height:0px;
	}
	.slidercontainer .mejs-controls .mejs-time-rail {
		width: 290px;
	}
	.slidercontainer .mejs-controls .mejs-time-rail .mejs-time-total {
		width: 270px;
	}
	/*slider audio :: start*/
	.slidercontainer div.audio.background {
		position:relative;
		height:100%;
	}
	.slidercontainer div.audio.background img {
		position:absolute;
	}
	.slidercontainer div.audio.background .mejs-container {
		background:transparent;
		position:absolute;
		bottom:0px;
		height:100% !important;
	}
	/*slider audio :: end*/
}