/**
 * @description		style modifications and enhancements
 * @project			Frage trifft Antwort
 * @site			frage-trifft-antwort.de
*/

/**
 * Formatting basic layout elements
*/

/* generics :: start */

script {
	display:none;
}
.floatright {
    float: right;
}

.floatleft {
    float: left;
}

.subcol {
    width: auto;
}

input[type=text], input[type=password], input[type=url],
input[type=email], input.text, input.title, textarea {
    margin: 0.5em 0;
    border-style: solid;
    border-width: 1px;
    border-color: #BDBDBD #D7D7D7 #C7C7C7 #A6A6A6;
    box-shadow:inset 1px 1px 3px 0px #DEDEDE;
}
#col1 a, #col1 p {
    color:   #333;
}
#col1 p {
}

#col3.startpage h2 {
    color:#990F29;
}

hr.clear {
	border:none;
	height:0px;
	margin:0;
	visibility: hidden;
}

#zpx {
	width:0px;
	height:0px;
	visibility: hidden;
	/*	position: absolute;
		outline: 1px solid red;*/
}

/* generics :: end*/


/* single view :: start */
.singleview  {
	margin-bottom:3em;
}
.singleview  .titlewrapper {
	padding: 0 0 0.5em 0;
	margin: 0 2.0em 0 0.8em;
	background: url('../../images/layout/hruler.gif') repeat-x 0 bottom;
}

hr.perforation {
	background: url('../../images/layout/perforation.png') repeat-x 0 top;
	height:12px;
	width:104.4%;
	margin: 0 -2.2%;
}

/*some guest classes from ftaquiz:*/
div.listview .subblock,
div.singleview .subblock {
	padding: 0 0 1.55em 0;
	margin: 0 0 1.5em 0;
	background: url('../../images/layout/hruler.gif') repeat-x 0 bottom;
	clear:both;
	float:none;
}
div.listview .subblockbottom {
	clear:both;
	float:none;
	padding: 1.5em 0 0 0;
	margin: 1.5em 0 3.0em 0;
	background: url('../../images/layout/hruler.gif') repeat-x 0 top;
}

.singleview span.heading {
	font-weight: bold;
	min-width:25%;
	display:block;
	float: left;
}

.singleview .relatedfiles a,
.singleview .related a,
.singleview .video-download a {
	display:block;
	background: url(../../images/layout/download_icon.png) no-repeat scroll 0 0 transparent;
	min-height: 28px;
	line-height: 28px;
	padding: 0 0 0 40px;
	margin: 0.4em 0;
	clear: left;
}
.singleview .related.videos a,
.singleview .related.video a {
	background: url(../../images/layout/video_icon.png) no-repeat 0 0 transparent;
}
.singleview .related.game a,
.singleview .related.games a {
	background: url(../../images/layout/game_icon.png) no-repeat 0 0 transparent;
}
.singleview .video-download a {
	background-position:0 2px;
}
.singleview .related.quiz a {
	background: url(../../images/layout/quiz_icon.png) no-repeat 0 0 transparent;
}

.singleview #socialshareprivacy {
    float: left;
    margin: 0 0 0 2em;
    padding: 0;
    position: relative;
    min-width: 60%;
}

.singleview .video-item {
	width:100%;
	max-width: 434px;
/*	min-width: 220px;*/
	margin: 0;
	height:100%;
	max-height:246px;
/*	min-height:240px;*/
}
.results div.videoplayer {
	width: 50%;
}
.results div.video .video-single {
	width:100%;
	max-width: 434px;
	min-width: 220px;
	height:100%;
	min-height:240px;
}

.singleview div.image {
	margin-bottom: 1.5em;
}
.singleview.audio div.imagewrap {
	margin-bottom:0;
	position:relative;
}
.singleview.audio div.image {
	margin-bottom:0;
}
.singleview div.image a {
}

.singleview div.image img {
	width:100%;
	height:auto;
}
.singleview .text {
}
.singleview .text h3 {
}

/* single view :: end */

/* list view :: start */
.listview ul {
	padding: 0;
	margin-top:1.4em;
}

.listview h2 {
	cursor: pointer;
	display: inline-block;
	font-size: 1.4em;
	margin:0 0 0.5em 0;
}

.listview .listbox  {
	margin-top:0.8em;
}


.listbox.realm > h2,
.listbox.keyword > h2,
.listbox.age > h2 {
	padding: 0 0 0 30px;
	background: url("../../images/layout/openclose.png") 0 0 no-repeat ;
	line-height: 1.1em;
}

.listbox.realm.active > h2,
.listbox.keyword.active > h2,
.listbox.age.active > h2 {
	background-position: 0 -24px;
}

.listview  h3 {
	cursor: pointer;
	display: inline-block;
	font-size: 1.1em;
}

.listview  .gridbox span,
.listview  .gridbox strong,
.listview  .listbox strong,
.listview  .gridbox p,
.listview  .gridbox a,
.listview  .listbox span,
.listview  .listbox a,
.listview  .listbox p {
	font-size: 0.9em;
}

.listview ul.list li.keyword.inactive > ul,
.listview ul.list li.realm.inactive > ul,
.listview ul.list li.age.inactive > ul {
	display: none;
}

.listview ul.list li.keyword.active > ul,
.listview ul.list li.realm.active > ul {
	display: block;
	margin-top:0.4em;
}
.listview  div.image  a {
	position: relative;
	width:100%;
}
.listview  div.image .playbutton  {
	position: absolute;
	border:none;
	top: 50%;
	left: 50%;
	margin-left: -32px;
	margin-top: -32px;
}
.listview  div.image img  {
	position: relative;
}
.listview .gridbox  div.image .playbutton  {
	margin-left: -38px;
	margin-top: -38px;
}
.listview.search div.image .playbutton  {
	margin-left: -24px;
	margin-top: -24px;
}

.listview .videoitem .image a,
.listview ul.list div.image a {
	display: block;
	text-align: left;
	vertical-align: middle;
	text-decoration: none;
	color:#888;
	font-weight:bold;
}
.listview ul.quiz.list div.image a {
	width:200px;
	min-height:112px;
	line-height:112px;
}
.listview ul.video.list div.image a {
	width:142px;
	min-height:80px;
	line-height:80px;
}
.listview ul.video.list div.image a {
	width:142px;
	min-height:80px;
	line-height:80px;
}
.listview .videoitem .image a {
	/* width: 22.5em; */
	min-height:148px;
	line-height:148px;
}
.listview.grid .gridbox {
	width:32%;
	height:17.4em;
	margin-bottom: 1.3em;
}

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

.listview.grid .gridbox.first_of_row {
	margin-left: 0;
}
.listview.grid .gridbox h2 {
	margin-bottom: 0;
	width:90%;
}
.listview.grid .morelink  {
	float:right;
	color:#990F29;
	text-decoration: none;
	background: url("../../images/layout/arrow_next_active.png") no-repeat scroll 100% 0 transparent;
	line-height: 1.2em;
	font-size: 1.2em;
	height: 1.2em;
	padding: 0 30px 0 0 ;
	margin: 0 0 1.4em 0;
}

/* list view :: start */

/* grid add on */
#container {
	position:relative;
/*	width:auto;*/
	width: 1016px;
	height:auto;
	/*	min-height:600px;*/
	min-height:100%;
	margin: 0 auto;
	margin-bottom: 2.0em;
}
#container > .inner {
	position:relative;
	/* margin:0 1.1em */
}

header {
	position:relative;
	height: 10.5em;
	overflow: visible;
}

header .inner {
	height: auto;
	padding: 1.4em 1.2em 1em 1.2em;
}

header .logo_box {
	float: left;
	margin: 0 1% 0.8em 0;
	max-width: 40%;
	min-width:34%;
	overflow:visible;
}
header .logo {
	float: left;
	min-width:100%;
}
header .writing {
	float: left;
	font-family: Colaborate-Regular, sans-serif;
	font-size: 1.9em;
	font-weight: bold;
	color: #a30828;
	margin-top: 1.6em;
	margin-left: 0.3em;
}
header .logo img {
	max-width:100%;
	height:auto;
}

footer .logo img {
		max-width: none;
	}

#metamenu {
	float:right;
	width: 50%;
	height: 80px;
	outline:1px solid #999;
}

.inner  ul {
	display:block;
	list-style: none;
}

#main {
	margin:1.1em 0 0 0;
	height:auto;
	min-height:100%;
	position:relative;
	background: #fff url('../../images/layout/border_stripe.png') no-repeat left center;
}

div.col {
	/* general column properties: */
}

#col3 {
	color:#454d48;
	width:100%;
	height:auto;
	min-height:32em;
	background: #FFF;
	border-top: 1px solid #4c5952;
	border-bottom: 1px solid #4c5952;
	background: url('../../images/layout/border_stripe.png') no-repeat right center;
}

.col3_content_main {
	width: auto;
	margin:1.7em;
	height:auto;
}

footer {
	position:static !important; position:relative;
	width: 99%;
	height: auto;
	color:#FFF;
}
footer .inner {
	height: 6.0em;
	padding: 0 1.7em 0 1.5em;
	/* margin-left: -2px; */
	background: url('../../images/layout/footer_bg.png') repeat-x 0 0;
}
footer .footerMenu {
	float:left;
}
footer .sociallinks {
	float: right;
	margin-top: 1.7em;
	padding-left: 0;
}
footer .bottom {
	height: 10px;
	/* margin-left: -2px; */
	background: url('../../images/layout/footer_bottom_bg.png') no-repeat right 0;
}

footer a,
footer a:visited,
footer a:hover {
	color:#FFF
}

.main_content {
	padding:10px;
}

#nav_main {
    margin-top: -2px;
}

/* ### headlines ### */
h1,h2,h3,h4,h5,h6 {
	color:  #990F29;
}
h1a ,h2 a ,h3 a ,h4 a, h5 a, h6 a {
	color:  #990F29;
	text-decoration: none;
}
h1 {
	font-size: 1.8em;
	padding: 0;
	font-weight:normal;
	margin:6px 0;
	margin-top:0;
	margin-bottom:0.8em;
}
h2 {
	font-size: 1.3em;
	font-weight: normal;
	margin-top:0;
	margin-bottom:0.5em;
}
h3 {
	font-size: 1.2em;
	padding: 0 0 5px 0;
	font-weight: normal;
	margin-top:0;
	margin-bottom:0.3em;
}
h4 {
	font-size: 1.1em;
	padding: 0 0 5px 0;
	font-weight: normal;
	margin-top:0;
	margin-bottom:0.2em;
}
h1 a {
	font-size: 1em  !important;
}
h2 a {
	font-size: 1em  !important;
}
h3  a {
	font-size: 1em !important;
}
h4 a {
	font-size: 1em  !important;
	font-weight: normal;
}
h5 {
	margin-top:0;
}
h6 {
	display:inline;
}

.backlink  {
	padding:10px 0 10px 6px;
}

.sociallinks {
	/*    height:40px;*/
    padding-left:11px;
}


.sociallinks a {
	display:block;
	float:left;
	margin-left:1.4em;
}

a#rssbutton,
a#rssbutton:visited {
	overflow:hidden;
	display: block;
	width: 34px;
	height: 34px;
	text-indent:-9999px;
	background: transparent url('../../images/layout/controlbox/rss_buttons.png') no-repeat 0 0;
}
a#rssbutton:focus,
a#rssbutton:hover,
a#rssbutton:active {
	background-position: 0 -36px;
}

/* =============================================================================
   Typography
   ========================================================================== */

p {
	margin: 0 0 0.8em 0;
}


/* =============================================================================
   Tables
   ========================================================================== */

/* content table :: start */
table.contenttable  tr > td {
	padding-right:20px;
}
table.contenttable   {
	margin:12px 0;
}
table.contenttable  tbody  {
	padding-top:12px;
}
table.contenttable  tbody > tr  {
	padding-top:12px;
}

/* content table :: end */


/* =============================================================================
   Styling of layout specific elements
   ========================================================================== */

video {
	/* border-top: 1px solid #b4b8a9;
	border-right: 1px solid #b4b8a9;
	border-left: 0 solid #b4b8a9; */
}


/*sprites :: for containes and icons :: start */

span.twitter,
a.twitter,
span.facebook,
a.facebook,
span.youtube,
a.youtube {
	width: 28px;
	height: 28px;
}

span.twitter, span.facebook, span.youtube,
a.twitter, a.facebook, a.youtube {
	background-color: transparent;
	background-repeat: no-repeat;
	display: block;
}

/*sprites :: for containes and icons :: start */

.sociallinks a.twitter {
	width: 48px;
	height: 48px;
	background-position: 0 0;

}
.sociallinks a.facebook {
	display: block;
	width: 48px;
	height: 48px;
	background-position: -131px 0;
}
.sociallinks a.youtube {
	display: block;
	background-position: -65px 0;
	width: 48px;
	height: 48px;
}

.sociallinks .twitter,
.sociallinks .youtube,
.sociallinks .facebook {
	float: left;
}



div.resultbar {
	position:relative;
	width:84%;
	overflow:hidden;
	height: 2em;
	z-index:5;
	background-color:#e7193f;
	margin-bottom:2em;
	background-image:url(../../images/layout/sprite.png);
	background-position: 0 -52px;
}
/*div.resultbar .overlay {
	background-image:url(../../images/layout/sprite.png);
	background-position: 0 -68px;
	background-repeat: no-repeat;
	position:absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 50%;
	z-index:20;
}*/
div.resultbar .correct {
	background-image:url(../../images/layout/sprite.png);
	background-position: 0 -52px;
	background-color:#a6c316;
	position:absolute;
	left:0;
	height: 100%;
	z-index:10;
	border-right:0.1em solid #FFF;
}

/*sprites :: for containes and icons :: end */

/* mediaelement.js fallback styles :: start */
.mejs a.mejsFallback {
	display:none;
}
.nomejs .video-item video {
	display:none;
}
.nomejs a.mejsFallback {
	display:block;
}
.nomejs a.mejsFallback  {
	position: relative;
	margin:0;
	padding:0;
}
.nomejs a.mejsFallback .playbutton  {
	position: absolute;
	border:none;
	top: 50%;
	left: 50%;
	margin-left: -36px;
	margin-top: -36px;
}

/* mediaelement.js fallback styles :: end */
/*
Base colors:
headlines: #990F29
darkgrey Text: #454d48;
green background / controlbox: #ACBF4D
*/