/**
 * @description		media query styles for mobile version
 * @project			Frage trifft Antwort
 * @site			www.frage-trifft-antwort.de
*/


/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/*@media only screen    {*/
/*@media only print    {*/
@media only screen and (max-width:439px) {
	.listview img.playbutton {
		display:none;
	}
}

@media only screen and (max-width:599px),
only screen and (max-width:1023px) and (orientation:landscape) {
	/* Style adjustments for small viewports / small phones go here :: both portrait and landscape properties */

	#container {
		margin: 0 auto;
		white-space:normal;
		width: 100%;
	}

	#container > .inner {
		margin:0.5em;
	}

	/* header :: end */

	header {
		height:auto;
		font-size:1em;
	}

	header  .logo img {
		width: 100% !important;
	}
	header .logo {
		margin-bottom: 1em;
	}
	header  img {
		height: auto !important;
		max-width: 100% !important;
	}

	header .inner {
		padding: 0;
	}


	header .logo_box {
		margin: 0 3% 1em 3%;
		height: 8em;
		width:94%;
	}
	header .logo_box,
	header .controlbox {
		float:none;
		max-width: 100%;
		clear:both;
		position: relative;
	}

	header .controlbox {
		margin: 0 0 1.6em 0;
		height: 9em;
		width:100%;
	}

	header .controlbox .topline {
		height: 26%;
		z-index:20;
		position:relative;
		margin-bottom:0;
	}
	header .controlbox .topline ul li {
		background-position:right 7px;
	}

	header .controlbox .topline ul li.active,
	header .controlbox .topline ul li {
		height: 100%;
		width: 15%;
		margin-top:0;
	}

	header .controlbox .topline ul li {
		background-position:right top ;
	}

	header .controlbox .bottomline {
		height: 75%;
		margin-top:0;
		padding:  0;
		position:absolute;
		bottom:0;
		width:89%;
		z-index:10;
	}

	header .controlbox .nav_selection {
		margin: 1em 0 0.5em ;
	}

	header .controlbox .nav_selection ul li a:focus,
	header .controlbox .nav_selection ul li a:hover,
	header .controlbox .nav_selection ul li a:active {
		color: #fff;
	}

	header .controlbox .nav_selection ul li.title a:focus,
	header .controlbox .nav_selection ul li.title a:hover,
	header .controlbox .nav_selection ul li.title a:active {
		background: url('../../images/layout/controlbox/title_button.png') no-repeat center 0;
	}

	header .controlbox .rssbox {
		width: 10%;
		height: 71%;
		z-index: 10;
	}
	header .controlbox .rssbox .rss_button {
		right: 2px;
		bottom: 10px;
	}
	a#rssbutton,
	a#rssbutton:visited {
		width: 26px;
		height: 26px;
		background: transparent url('../../images/layout/controlbox/rss_buttons_small.png') no-repeat 0 0;
	}
	a#rssbutton:focus,
	a#rssbutton:hover,
	a#rssbutton:active {
		background-position: 0 -28px;
	}

	header .controlbox img {
		width:50% !important;
	}

	header .controlbox .nav_search {
		width:32%;
		max-width: 460px;
		margin-top: .3em;
	}

	header .controlbox ul {
		width:50%;
	}

	header div.kesearchbox	{
		height:100%;
		width:100%;
	}

	header #ke_search_sword {
		right: 2px;
		top: 0;
		width: 94%;
		height: 17px;
	}

	#kesearch_submit {
		top:5px;
	}

	/* header :: end */


	/* forms :: start */

	div.standardform textarea {
		width: 94%;
	}

	/* forms :: end */

	/* content  :: start */

	#main h1 {
		margin-left:0.6%;
	}

	.singleview {
		margin:1em 0 0 0;
	}
	.span-12 {
		width: 100%;
	}
	/* workaround for small displays - should be fixed in template soon */
	.results div.span-24{
		width: 90%;
	}

	.results div.video .video-single {
		min-height:200px;
	}

	.singleview span.heading {
		padding-bottom:0.5em;
		padding-right: 0.5em;
		min-width: available;
	}

	.singleview .related a, .singleview .video-download a {
		background-position: left -156px;
		padding: 0 0 0 40px;
		display:block;
		margin: 0 0 0.5em 0;
	}

	.singleview .related.videos a {
		background-position: left -156px;
	}
	.singleview .related.download a,
	.singleview .video-download a {
		background-position: left 2px;
	}
	.singleview .related.quiz a {
		background-position:100%  -125px;
	}
	.quizdetail button {
		max-width:40%;
	}
	.quizdetail .questionblock {
		/*		height:auto;
				max-height:auto !important;*/
	}
	hr.perforation {
		height: 0.5em;
		margin: 0 -1.3%;
		width: 102.6%;
	}

	.media-player  {
		height: 100%;
		width: 100% !important;
	}

	.col3_content_main {
		margin: 1.4%;
	}

	.singleview .video-description,
	.singleview .quiz-item,
	.singleview .video-item {
		margin: 0;
		background:none;
		padding-bottom: 0;
		min-height:120px;
	}
	/*  some workarounds:*/
	.singleview div.video-description br  {
		display:none;
	}

	.singleview .video-title-container {
		margin: 0 0 1.5em;
		padding: 0 0 0.5em;
	}
	/*socials :: start */
	.video-socialmedialinks {
		height: 4.0em;
		line-height: 28px;
	}
	.singleview .ratings > div,
	.singleview #socialshareprivacy{
		width: 70%;
		margin:0;
		padding: 0;
		float:none;
		clear:both;
	}
	div.tx-ratings-display {
		left:0em;
	}
	.social_share_privacy_area li.twitter {
		width: auto;
	}

	/*socials :: end */
	.listview ul.video.list div.image a {
		width: 90% !important;
		background: none;
		margin-right:4%;
	}

	.listview .videoitem .image a {
		line-height:normal;
		min-height: fit-content;
		width: 90% !important;
	}

	.listview.grid {
		margin:1.3em 0;
	}

	div.listview .subblock.last,
	div.singleview .subblock.last {
		background: none;
	}

	.listview.grid .gridbox {
		overflow:hidden;
		width:92%;
		padding:0 0 1.6em 0;
		margin:0 4% 1.3em 4% !important;
		background: none;
		background: url("../../images/layout/hruler.gif") repeat-x scroll 0 bottom transparent;
		height:auto;
	}

	.listview .gridbox > div {
		margin-left: 0 !important;
	}

	div.slidercontainer   {
		height:auto;
		height:fit-content;
		min-height:230px;
		max-height:255px;
		border:none;
		background:#EEE;
	}
	.slidercontainer .videocontainer,
	.slidercontainer .quizcontainer {
		background: url("../../images/layout/bg_slider.jpg") no-repeat right bottom transparent;
		width:100%;
		height:auto;
		position: absolute;
		top:0px;
		left:0px;
		max-height: 240px;
		max-height: 240px;
		margin:0;
	}
	.slidercontainer .quizcontainer {
		max-height: 76%;
	}
	.slidercontainer .quiz-item,
	.slidercontainer .video-item {
		background:transparent;
		border-left: 0;
		max-height:246px;
		width: 100%;
	}
	div.slidercontainer .videoplayer {
		height:auto;
		height:fit-content;
		min-height:170px;
		max-height:255px;
	}

	div.slidercontainer .videocontainer div.metadata .title {
		top: 0.4em;
	}

	div.tabswrapper {
		width:100%;
		height:24%;
		position: absolute;
		top: auto;
		bottom:0;
		left:0;
		vertical-align: bottom;
		background: #EEE;
		overflow: hidden;
		z-index:99;
	}

	div.tabswrapper h3 {
		display:none;
	}

	ul.vertical.slider {
		height:100%;
		width:auto;
		min-width:20em;
		overflow-x: hidden;
		overflow-y: auto;
		white-space: nowrap;
	}

	ul.vertical.slider li {
		display:inline-block;
		width:19%;
		min-width:2.5em;
		margin:0 1% 0 0;
		padding: 0;
		vertical-align: bottom;
		height:94%;
	}
	ul.vertical.slider li > div {
		margin:0 2% 0 0;
		padding:2% 4%;
		height:54px;
		line-height: 54px;
	}
	.slidercontainer ul.vertical.slider li > div > a {
		padding-right: 0;
		display:block;
		height:100%;
	}
	.slidercontainer ul.vertical.slider li > div > a:nth-child(2) {
		display:none;
	}
	.slidercontainer .video-item {
		height: 100%;
		max-height:100% !important;
		width: 100%;
		border:none;
		margin:0;
		position:absolute;
		bottom:0;
	}
	.slidercontainer .game-item,
	.slidercontainer .quiz-item {
		position:absolute;
		height: 100%;
		max-height:100% !important;
		width: 100%;
		margin-left: auto;
		overflow:hidden;
	}

	div.slidercontainer div.metadata div.description,
	div.slidercontainer div.metadata div.duration {
		display:none ;
	}

	#container .listbox img {
		max-width: 100% !important;
		height: auto;
	}

	.listview .listbox  {
		width: 100%;
		overflow:auto;
	}

	.listview .listbox .floatleft {
		width: 30%;
		margin-right:3%;
	}
	.listview .listbox .floatright {
		width: 65%;
	}
	.listview .listbox h2  {
		margin-top:-0.3em;
	}

	.listview ul.quiz.list div.image a {
		line-height: inherit;
		min-height: inherit;
		width:100%;
	}

	.azbrowser {
		overflow-wrap: hyphenate;
	}
	.azbrowser .letter, .azbrowser .azbrowser-letter {
		display:block;
		float:left;
		margin:0 0.3em 0.4em 0;
	}

	/* content :: end */

	/* search  :: start */

	#kesearch_videoquiz_filter {
		width: 100%;
		margin:0;
	}

	#kesearch_videoquiz_filter form {
		padding-bottom:0.5em;
	}

	#main div.filter_item {
		display:block;
		float: left;
		width:48%;
		min-width:10em;
		margin:0;
	}

	#main div.filter_item  {
		margin-bottom:0.8em;
	}

	#main div.filter_item label,
	#main div.filter_item input {
		display:inline-block;
		margin:0;
		vertical-align: middle;
	}
	#main div.filter_item label {
		margin-left:10%;
		max-width:65%;
		white-space: nowrap;
	}
	#main div.filter_item input {
		height: 1.4em;
		width: 1.2em;
		margin-left:2%;
	}

	.videos-extlist-item-text h3 {
		margin-bottom: 0.3em;
	}

	/* search :: end */

	/* footer :: start */

	footer .inner {
		width:100%;
	}

	footer .inner {
		height: 6em;
		padding:0 3%;
		width:94%;
	}

	footer .sociallinks,
	ul.footerMenu  {
		margin:0 auto 0 auto;
		padding: 0.6em 0;
		float:none;
		clear:both;
		text-align: center;
	}
	ul.footerMenu  {
	}

	ul.footerMenu  li {
		height:2.4em;
		line-height: 2.4em;
		float:none;
		display:inline-block;
	}
	footer .sociallinks  {
		width:100%;
	}

	.sociallinks .twitter, .sociallinks .youtube, .sociallinks .facebook {
		float: none;
		display:inline-block;
		margin:0 3%;
	}
	.sociallinks .facebook a {
		margin-left: 0;
	}

	ul.footerMenu li a, ul.footerMenu li span, ul.footerMenu li a:visited {
		font-size: 0.8em;
		margin:0 0.4em;
	}
	ul.footerMenu li.logo {
		max-width:8em;
		width:20%;
	}
	ul.footerMenu li.logo a {
		width:80%;
	}

	ul.footerMenu li.logo img {
		margin-top: -0.2em;
	}
	/* footer :: end */

	/** video single view :: start **/
	.touch .singleview .keywords span.heading {
		margin-right: 0.5em;
	}
	.singleview .related.quiz a,
	.singleview .related.game a {
		display: block;
		height: auto;
		min-height: 28px;
		line-height: 28px;
		background: transparent url('../../images/layout/quiz_icon.png') no-repeat left 0;
	}
	.singleview .tx-rating-display-wrap {
		position: static;
	}
	/** video single view :: end **/

}

/* style adjustments for small viewports go here :: portrait mode */
@media only screen
and (min-width:321px)
and (max-width:599px)
and (orientation:portrait) {

	div.video-mobile-left, div.column {
		float: none;
	}

	.results div.videoplayer {
		width: 100%;
	}

	#container {
		max-width:600px;
		min-width:320px;
	}

	.listview .gridbox > div {
		width: 25em;
	}
	.results div.video .video-single {
		min-height:160px;
		min-width: 220px;
	}

	.results div.videoplayer {
		width: 90%;
		margin-bottom:0.5em;
	}
	.results div.video h4:before{
		content:"";
		display:table;
		clear:both;
	}

	.azbrowser {
	}

	header .logo_box,
	header .controlbox {
		max-width: 580px;
	}

	header .controlbox {
		/*for testing:*/
		/*outline: 1px solid red;*/
	}

	header .controlbox .rssbox .rss_button {
		right: 18%;
	}

	div.slidercontainer div.metadata .title {
		top: 0.2em;
		font-size: 1.1em;
	}
	div.slidercontainer div.metadata div.description,
	div.slidercontainer div.metadata div.duration {
		display:none !important;
	}

	div.singleview .ratings {
		min-height: 3.5em;
	}

	/*ratings :: start*/
	.singleview .ratings > div {

	}

}

/* style adjustments for small viewports go here :: landscape mode */
@media only screen
and (max-width:1023px)
and (orientation:landscape) {

	#container {
		max-width:1023px;
		min-width:320px;
	}
	.singleview .related a, .singleview .video-download a {
		background-position: left -156px;
		padding: 0 0.5em 0 40px;
		display:inline-block;
		margin:0;
	}
	.singleview .related span.heading {
		margin-bottom: 0;
		height: 28px;
		line-height: 28px;
	}

}

/* style adjustments for very small viewports go here (older phones) :: portrait mode */
@media only screen and (max-width:479px) {
	.results div.videoplayer {
		width: 100%;
	}
	.slidercontainer .quiz-item,
	.slidercontainer .game-item,
	.slidercontainer .video-item {
		border-left: 0;
	}
	ul.footerMenu li.logo a {
		width:60%;
	}
	ul.footerMenu li.logo {
		max-width:4em;
	}
	ul.footerMenu li a, ul.footerMenu li span, ul.footerMenu li a:visited {
		font-size: 0.7em;
		margin: 0 0.25em;
	}
	.social_share_privacy_area li.settings_info .settings_info_menu {
		max-width:7.5em;
	}
}

/* style adjustments for viewports 600px and over go here :: tablets - portrait AND landscape */
/*@media only screen {*/
@media only screen and (min-width:600px),
only screen and (min-width:1024px) and (orientation:landscape) {
	.col3_content_main {
		margin: 2.5% 0 2.5% 2.5%;
	}

	.listview.grid .gridbox {
		/*		overflow:hidden;*/
	}

	.listview .gridbox > div {
		/* position: relative; */
		/* width: 21em; */
		margin-left: 0 !important;
	}

	.listview.grid .gridbox  {
		margin-left: 1.5% !important;
	}

	.listview .gridbox.first_of_row {
		margin-left: 0 !important;
	}

	.listview .videoitem .image a {
		line-height: normal;
		/* width: 100% !important; */
		/* min-height: 100%; */
		height: auto;
	}

	.slidercontainer img,
	.videoitem img ,
	.footerMenu img,
	header img {
		height: auto !important;
		max-width: 100% !important;
	}

	.image img.screenshot,
	.videoitem img.screenshot,
	header .logo img {
		width: 100%;
	}

	header .logo_box,
	header .controlbox {
		position: relative;
	}

	header .controlbox {
		margin: 0 0 1.6em 0;
		height: 9em;
	}

	header .controlbox .topline {
		height: 26%;
		z-index:20;
		position:relative;
		margin-bottom:0;
		overflow-y: hidden;
	}

	header .controlbox .topline ul li.active,
	header .controlbox .topline ul li {
		height: 100%;
		width: 15%;
	}

	header .controlbox .bottomline {
		height: 75%;
		margin-top:0;
		padding:  0;
		position:absolute;
		bottom:0;
		width:91%;
		z-index:10;
	}

	header .controlbox .nav_selection {
		margin: 1em 0 0.5em ;
	}
	header .controlbox .nav_selection ul li a:focus,
	header .controlbox .nav_selection ul li a:hover,
	header .controlbox .nav_selection ul li a:active {
		color: #fff;
	}

	header .controlbox .rssbox {
		width: 8.2%;
		height: 71%;
		z-index: 10;
	}

	header .controlbox img {
		width:50% !important;
	}

	header .controlbox .nav_search {
		width:34%;
		max-width: 460px;
		margin-top: .4em;
	}

	header .controlbox ul {
		width:50%;
	}

	header div.kesearchbox	{
		height:100%;
		width: 100%;
	}

	#ke_search_sword {
		right: 0.25em;
		top: 0;
		width: 94%;
		height: 17px;
	}

	#kesearch_submit {
		top: 5px;
	}
}


/* style adjustments for ipad version 1 and 2 go here
   resolution: 1024 x 768
*/
@media only screen and (device-width: 768px) {

	.image img.screenshot,
	.videoitem img.screenshot,
	header .logo img {
		width: auto;
	}

}

/* style adjustments for viewports 600px and over go here :: tablet portrait mode :: ipad 1 */
@media only screen and (min-width:600px) and (orientation:portrait) {
	/*@media only screen {*/

	#container {
		min-width: 600px;
		width: 760px;
	}

	.listview .gridbox > div {
		width: 15em;
	}
	.listview .gridbox img.playbutton {
		margin-top: -45px;
	}

	header .controlbox .rssbox .rss_button {
		right: 4px;
		bottom: 8px;
	}
	a#rssbutton,
	a#rssbutton:visited {
		width: 26px;
		height: 26px;
		background: transparent url('../../images/layout/controlbox/rss_buttons_small.png') no-repeat 0 0;
	}
	a#rssbutton:focus,
	a#rssbutton:hover,
	a#rssbutton:active {
		background-position: 0 -28px;
	}

	.touch .singleview .pagebrowser {
		margin-right: 1.6em;
	}

	/** video single view :: start **/
	.video-mobile-left {
		float: left;
		width: 44.5%;
		margin: 1.2em 0 0 0.8em;
	}
	.video-mobile-right {
		float: right;
		width: 50%;
		margin: 0;
	}
	.video-mobile-left-bottom {
		width: 44.5%;
		margin: 0 0 0 0.8em;
	}
	.touch .singleview .video-title-container {
		margin-right: 0;
	}
	.touch .singleview .keywords span.heading {
		margin-right: 0.5em;
	}
	.touch .singleview .video-description {
		/* background-image: none; */
	}
	.touch .singleview .video-socialmedialinks {
		background-image: none;
	}
	div.singleview #socialshareprivacy {
		margin-left: 1.0em;
	}
	div.singleview .social_share_privacy_area li.twitter {
		width: 4.5em;
	}
	/* video player & slider :: start */

	ul.vertical.slider {
		/*		overflow:hidden;*/
		overflow-x: visible;
		overflow-y: auto;
	}

	.slidercontainer .quiz-item,
	.slidercontainer .video-item {
		margin-left: auto;
    }
	.slidercontainer .game-item,
	.slidercontainer .quiz-item {
		max-width: 92% !important;
		margin-left: 2em;
		overflow:hidden;
	}
	.slidercontainer .game-item .metadata,
	.slidercontainer .quiz-item .metadata{
		width:101%;
		/*		margin:0;*/
	}
	div.slidercontainer .videocontainer div.metadata .title {
		font-size: 1.4em;
		line-height: 1.15;
	}
	/* video player & slider :: end */
	/** video single view :: end **/

	/* quiz single view :: start */
	.quiz-mobile-left {
		float: left;
		width: 44.5%;
		margin: 0.2em 0 0 0.5em;
	}
	.quiz-mobile-right {
		float: right;
		width: 50%;
		margin: 0;
	}
	.quiz-mobile-left-bottom {
		width: 44.5%;
		margin: 0 0 0 0.5em;
	}
	.tx-ftaquiz-pi1 div.singleview .socialmedialinks {
		background-image: none;
	}
	.ftaquiz .more .videoLink > div, .ftaquiz .more .videoLink > a {
		float: none;
	}
	/* quiz single view :: end */

}
/* end style adjustments for viewports 600px and over :: tablet portrait mode :: ipad 1 */

/* style adjustments for tablet viewports 1024px and over go here :: tablet landscape mode :: ipad 1 */
@media only screen and (min-width:1024px) and (orientation:landscape) {
	/*@media only screen and (min-width:1024px) {*/
	body {
		/* background: orange; */
	}

	#container {
		width: 1016px;
	}

	#main {
		width: 99%;
	}

	header .controlbox .rssbox .rss_button {
		bottom: 8px;
	}

	/** video single view :: start **/
	.video-mobile-left {
		float: left;
		width: 44.5%;
		margin: 1.2em 0 0 0.8em;
	}
	.video-mobile-right {
		float: right;
		width: 50%;
		margin: 0;
	}
	.video-mobile-left-bottom {
		width: 44.5%;
		margin: 0 0 0 0.8em;
	}
	.touch .singleview .video-title-container {
		margin-right: 0;
	}
	.touch .singleview .video-description {
		/* background-image: none; */
	}
	.touch .singleview div.singleview .video-socialmedialinks {
		background-image: none;
	}

	.touch .singleview .media-player {
		width: 432px;
		height: 303px;
	}

	/* quiz single view :: start */
	.quiz-mobile-left {
		float: left;
		width: 44.5%;
		margin: 0.2em 0 0 0.5em;
	}
	.quiz-mobile-right {
		float: right;
		width: 50%;
		margin: 0;
	}
	.quiz-mobile-left-bottom {
		width: 44.5%;
		margin: 0 0 0 0.5em;
	}
	.tx-ftaquiz-pi1 div.singleview .socialmedialinks {
		background-image: none;
	}
	/* quiz single view :: end */

}
/* end style adjustments for tablet viewports 1024px and over :: tablet landscape mode :: ipad 1 :: end */