/*
Theme Name: bytes & bones
Theme URI: http://www.bytesbones.ch
Author: Klaus Affolter
Author URI: http://www.bytesbones.ch
Description: Wordpress-Theme von bytes & bones.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: none
Text Domain: bytes & bones
*/


/* Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

html {
	overflow:hidden;
	overflow-y:scroll;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
:focus {
	outline:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td {
	vertical-align: top;
}
sup {
	font-size:11px;
	vertical-align:top;
	padding-left:3px;
	padding-right:3px;
}
body {
	margin:0px;
	padding:0px;
	background:#fff;
}


/* regular */
@font-face {
    font-family: 'merriweatherregular';
    src: url('bb-schriften/merriweather-regular-webfont.eot');
    src: url('bb-schriften/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/merriweather-regular-webfont.woff2') format('woff2'),
         url('bb-schriften/merriweather-regular-webfont.woff') format('woff'),
         url('bb-schriften/merriweather-regular-webfont.ttf') format('truetype'),
         url('bb-schriften/merriweather-regular-webfont.svg#merriweatherregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* black */
@font-face {
    font-family: 'merriweatherblack';
    src: url('bb-schriften/merriweather-black-webfont.eot');
    src: url('bb-schriften/merriweather-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/merriweather-black-webfont.woff2') format('woff2'),
         url('bb-schriften/merriweather-black-webfont.woff') format('woff'),
         url('bb-schriften/merriweather-black-webfont.ttf') format('truetype'),
         url('bb-schriften/merriweather-black-webfont.svg#merriweatherheavy') format('svg');
    font-weight: normal;
    font-style: normal;

}

/**
 * @license
 * MyFonts Webfont Build ID 3119875, 2015-11-05T04:48:36-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: StandardCT-BoldCond by CastleType
 * URL: http://www.myfonts.com/fonts/castletype/standard/condensed-bold/
 * Copyright: Copyright (c) CastleType, 2005. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3119875
 * 
 * © 2015 MyFonts Inc
*/


@font-face {
	font-family: 'StandardCTBoldCond';
	src: url('bb-schriften/2F9B03_0_0.eot');
	src: url('bb-schriften/2F9B03_0_0.eot?#iefix') format('embedded-opentype'),
		 url('bb-schriften/2F9B03_0_0.woff2') format('woff2'),
		 url('bb-schriften/2F9B03_0_0.woff') format('woff'),
		 url('bb-schriften/2F9B03_0_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
  --hauptfarbe: #83e3b6;
}


/* Layout
-------------------------------------------------------------- */

.konsole {
	position:relative;
	top:0px;
	/*width:960px;*/
	width:1020px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:100px;
}
.kopf {
	height:310px;
	width:960px;
	display:block;
}
.kopf .logo {
	width:430px;
	height:230px;
	margin-left:280px;
	margin-top:40px;
	display:block;
	float:left;
}
.kopf .logo img {
	width:100%;
	height:100%;
	height:auto;
}

.accessibility-2 {/* mehr unten */
	float:left;
	margin-left:2px;
}
.topbuttons {
	width:100px;
	margin-top:237px;
	float:right;
}

.hauptnav {
	float:left;
	width:280px;
	margin-right:60px;
	border-top:1px solid #000;
}


.site-content {
	width:620px;
	float:left;
}
.fusszeile {
	clear:left;
	padding:0px;
	font:11px/14px verdana, sans-serif;
}


/* nav
-------------------------------------------------------------- */
.hauptnav ul li {
	list-style:none;
	border-bottom:1px solid #000;
	padding-bottom:0px;
}
.hauptnav ul li ul li {
	padding-left:20px;
	border-bottom:0;
	border-top:1px solid #000;
}
.hauptnav ul li ul {
	display:none;
}
.hauptnav .current_page_item ul, .hauptnav .current_page_ancestor ul, .hauptnav .current_page_parent ul {
	display:block;
}


.hauptnav a, .hauptnav-mobile a, a.accessibility {
	font:24px/33px StandardCTBoldCond, helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:0.05em;
}
.hauptnav ul li ul li a, .hauptnav-mobile ul li ul li a {
	text-transform:none;
}
/*farben s.u. bei sitemap*/




/* accessibility unsichtbar */
.accessibilityswitcher {
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	height:0px;
	display:block;
	overflow:hidden;
	z-index:1000;
}

/*sprachweiche & accessibility & facebook*/
	
.accessibilitybutton {
	text-decoration:none;
	width:38px;
	height:38px;
	display:block;
	background:url(images/barrierefrei.png?ver=1.2);
	background-repeat:no-repeat;
	background-size: 38px auto;
	background-position:0px -44px;
}
.accessibilitybutton:hover, .accessibilitybutton:focus, .accessibilitybutton:active {
	background-position:0px 0px;
}
.sprachweiche {
	font:26px/38px StandardCTBoldCond, helvetica, sans-serif;
	color:var(--hauptfarbe);
	float:left;
	padding-top:0px;
}
.sprachweiche a {
	color:#000;
	text-decoration:none;
}
.sprachweiche a:hover, .sprachweiche a:active, .sprachweiche a:focus {
	color:var(--hauptfarbe);
}
.sprachweiche .sprachlink {
	padding-right:18px;
}
.sprachweiche .sprachlink.passiv {
	color:#aaa;
}
	
/* web 2.0 */
.facebookbutton {
	text-decoration:none;
	width:38px;
	height:38px;
	display:block;
	overflow:hidden;
	float:right;
	background:url(images/facebookbutton.png);
	background-repeat:no-repeat;
	background-size: 38px auto;
	background-position:0px 0px;
}
.facebookbutton:hover, .facebookbutton:focus, .facebookbutton:active {
	background-position:0px -44px;
}

/* Textformate
-------------------------------------------------------------- */
body, td {
	font:18px/28px merriweatherregular, times, serif;
}
h1 {
	font:56px/56px StandardCTBoldCond, helvetica, sans-serif;
	font-weight:normal;
	margin-top:-7px;
	margin-bottom:24px;
	text-transform:uppercase;
}	
h2 {
	font:56px/56px StandardCTBoldCond, helvetica, sans-serif;
	font-weight:normal;
	border-top:1px solid #000;
	margin-top:42px;
	padding-top:36px;
	margin-bottom:24px;
	text-transform:uppercase;
}	
h3 {
	font:32px/34px StandardCTBoldCond, helvetica, sans-serif;
	font-weight:normal;
	letter-spacing:0.05em;
	margin-top:36px;
	margin-bottom:24px;
}	
h4 {
	font:32px/34px StandardCTBoldCond, helvetica, sans-serif;
	font-weight:normal;
	letter-spacing:0.05em;
	margin-top:36px;
	margin-bottom:2px;
}
h5, h6 {
	font:18px/28px merriweatherblack, times, serif;
	font-weight:normal;
	margin-top:36px;
	margin-bottom:0px;
}
.site-content p {
	margin-bottom:24px;
}
.site-content p.lead {
	font:24px/30px StandardCTBoldCond, helvetica, sans-serif;
	letter-spacing:0.05em;
	margin-top:-6px;
}
.site-content ul {
	margin-bottom:24px;
	margin-left:16px;
}
.site-content ol {
	margin-bottom:24px;
	margin-left:36px;
}
.site-content .zitat {
	font-style:italic;
	margin-left:36px;
}

strong {
	font-family:merriweatherblack, times, serif;
	font-weight:normal;
}
.grau {
	color:#888;
}

/* lr */
.ampersand {
	padding-left:2px;
	padding-right:2px;
}
h1 .ampersand {
	padding-left:4px;
	padding-right:4px;
}
h2 .ampersand {
	padding-left:4px;
	padding-right:4px;
}
h3 .ampersand {
	padding-left:2px;
	padding-right:2px;
}

/* Bilder
-------------------------------------------------------------- */
.site-content img {
	margin:0px;
	padding:0px;
	vertical-align: bottom;
	max-width:100%;
	height:100%;
	height:auto;
}
.site-content .vorschaubild {
	float:left;
	margin-right:20px;
	margin-bottom:12px;
	margin-top:5px;
}
.spalte-rechts img {
	margin:0px;
	padding:0px;
	margin-bottom:12px;
	vertical-align: bottom;
}

.sponsorenlogowrapper {
	padding-top:0px;
	padding-bottom:0px;
}
.sponsorenlogos {
	clear:left;
	padding-bottom:36px;
}
.sponsorenlogos h4 {
	font-size:18px;
	line-height:21px;
	margin-top:36px;
	margin-bottom:32px;
}
.sponsorenlogo-single {
	margin-bottom:42px;
	width:100%;
	float:none;
	clear:left;
	display:block;
}	
.site-content .sponsorenlogos .sponsorenlogo-single img {
	max-width:100%;
	max-height:80px;
}


/* Links
-------------------------------------------------------------- */
.site-content a {
	color:#000;
	text-decoration:none;
	border-bottom:1px dotted #000;
}
.site-content a:hover {
	border-bottom:1px solid #000;
}
.site-content .morelink, .site-content .downloadlink {
	border:0;
	color:#000;
	text-decoration:none;
	padding-left:26px;
	background:url(images/pfeil-r.png?ver=1.2);
	background-repeat:no-repeat;
	background-size:16px auto;
	background-position:2px 3px;
}

.site-content .backlink {
	clear:left;
	color:#000;
	text-decoration:none;
	border:0;
	padding-left:22px;
	background:url(images/pfeil-l.png?ver=1.2);
	background-repeat:no-repeat;
	background-size:16px auto;
	background-position:2px 3px;
}
.site-content .morelink:hover, .site-content .morelink:active, .site-content .morelink:focus,
.site-content .backlink:hover, .site-content .backlink:active, .site-content .backlink:focus {
	color:var(--hauptfarbe);
	border:0;
}
.site-content .sponsorenlogos a, .site-content .sponsorenlogos a:hover, .site-content .sponsorenlogos a:focus, .site-content .sponsorenlogos a:active {
	border:0;
}
.kopf .logo a, .kopf .logo a:hover, .kopf .logo a:focus, .kopf .logo a:active {
	border:0;
	text-decoration:none;
}




/*sitemap*/
.hauptnav-sitemap ul {
	margin-left:0px;
	margin-bottom:0px;
}

.hauptnav-sitemap ul li {
	list-style:none;
	border-bottom:1px solid #000;
	padding-top:10px;
	padding-bottom:10px;
}
.hauptnav-sitemap ul li ul li {
	padding-left:20px;
	border-bottom:0;
	padding-bottom:0px;
}
.site-content .hauptnav-sitemap a {
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:0.05em;
	border:0;
}
.hauptnav-sitemap ul li ul li a {
	text-transform:none;
}

/*farben, auch von nav*/

.hauptnav .current_page_item a, .hauptnav .current_page_ancestor a, .hauptnav .current_page_parent a, .hauptnav a:hover, .hauptnav a:focus, .hauptnav a:active,
.hauptnav-mobile .current_page_item a, .hauptnav-mobile .current_page_ancestor a, .hauptnav-mobile .current_page_parent a, .hauptnav-mobile a:hover, .hauptnav-mobile a:focus, .hauptnav-mobile a:active,
.hauptnav-sitemap .current_page_item a, .hauptnav-sitemap .current_page_ancestor a, .hauptnav-sitemap .current_page_parent a, .hauptnav-sitemap a:hover, .hauptnav-sitemap a:focus, .hauptnav-sitemap a:active {
	color:var(--hauptfarbe);
}
.hauptnav .current_page_item ul li a, .hauptnav .current_page_ancestor ul li a, .hauptnav .current_page_parent ul li a,
.hauptnav-mobile .current_page_item ul li a, .hauptnav-mobile .current_page_ancestor ul li a, .hauptnav-mobile .current_page_parent ul li a,
.hauptnav-sitemap .current_page_item ul li a, .hauptnav-sitemap .current_page_ancestor ul li a, .hauptnav-sitemap .current_page_parent ul li a {
	color:#000;
}
.hauptnav .current_page_item ul li a:hover, .hauptnav .current_page_ancestor ul li a:hover, .hauptnav .current_page_parent ul li a:hover, .hauptnav .current_page_parent ul li a:focus, .hauptnav .current_page_parent ul li a:active,
.hauptnav-mobile .current_page_item ul li a:hover, .hauptnav-mobile .current_page_ancestor ul li a:hover, .hauptnav-mobile .current_page_parent ul li a:hover, .hauptnav-mobile .current_page_parent ul li a:focus, .hauptnav-mobile .current_page_parent ul li a:active,
.hauptnav-sitemap .current_page_item ul li a:hover, .hauptnav-sitemap .current_page_ancestor ul li a:hover, .hauptnav-sitemap .current_page_parent ul li a:hover, .hauptnav-sitemap .current_page_parent ul li a:focus, .hauptnav-sitemap .current_page_parent ul li a:active {
	color:var(--hauptfarbe);
}
.hauptnav .current_page_item ul .current_page_item a, .hauptnav .current_page_ancestor ul .current_page_item a, .hauptnav .current_page_parent ul .current_page_item a,
.hauptnav-mobile .current_page_item ul .current_page_item a, .hauptnav-mobile .current_page_ancestor ul .current_page_item a, .hauptnav-mobile .current_page_parent ul .current_page_item a,
.hauptnav-sitemap .current_page_item ul .current_page_item a, .hauptnav-sitemap .current_page_ancestor ul .current_page_item a, .hauptnav-sitemap .current_page_parent ul .current_page_item a {
	color:var(--hauptfarbe);
}




/* Filmliste
-------------------------------------------------------------- */
.filmblock {
	margin-bottom:25px;
}
.site-content .filmblock h1 {
	margin-bottom:12px;
}
.site-content .filmblock h4 {
	margin-top:0px;
	margin-bottom:21px;
	line-height:32px;
}

.filmblock div:first-of-type {/* erster div filmvorschau*/
	border-top:1px solid #000;
}	
.filmblock div div:first-of-type {/* erster div filmbildwrapper*/
	border-top:0;
}	
.filmvorschau {/*uebrige*/
	border-top:0;
	border-bottom:1px solid #000;
	clear:left;
	display:inline-block;
	width:100%;
	padding:25px 0px 0px 0px;
}
.filmvorschau a, .filmvorschau a:hover, .filmvorschau a:focus, .filmvorschau a:active {
	border:0;
}

.filmvorschau .filmbildwrapper {
	width:280px;
	height:156px;
	display:block;
	overflow:hidden;
	float:left;
	margin-bottom:25px;
}
.filmvorschau .filmbildwrapper img {
	width:100%;
	height:100%;
	height:auto;
}
.filmvorschau .filmtextwrapper {
	margin-left:305px;
	margin-bottom:25px;
}
.filmvorschau h3 {
	font-size:31px;
	line-height:29px;
	border:0px;
	margin:0px;
	margin-bottom:5px;
	margin-top:-2px;
	text-transform:uppercase;
}
.filmvorschau h3 a:hover, .filmvorschau h3 a:focus, .filmvorschau h3 a:active {
	color:var(--hauptfarbe);
}
.filmvorschau p {
	margin:0px;
	line-height:26px;
}




/* personenliste
-------------------------------------------------------------- */
.person-eintrag {/* erster div*/
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	padding:25px 0px 25px 0px;
	clear:left;
	display:inline-block;
	width:100%;
	margin-bottom:25px;
}	
.person-eintrag div div:first-of-type {/* erster div personbildwrapper*/
	border-top:0;
}	
.person-eintrag   ~ .person-eintrag {/*uebrige*/
	border-top:0;
	border-bottom:1px solid #000;
	clear:left;
	display:inline-block;
	width:100%;
	padding:0px 0px 25px 0px;
	margin-bottom:25px;
}
.person-eintrag .person-bildwrapper {
	width:156px;
	height:156px;
	display:block;
	overflow:hidden;
	float:left;
}
.person-eintrag .person-textwrapper {
	margin-left:181px;
}
.person-eintrag h3 {
	font-size:31px;
	line-height:29px;
	border:0px;
	margin:0px;
	margin-bottom:5px;
	margin-top:-2px;
	text-transform:uppercase;
}
.person-eintrag p {
	margin:0px;
	line-height:26px;
}




/* sponsorentabelle
-------------------------------------------------------------- */
.sponsorentabelle td {
	vertical-align:middle;
	padding-bottom:40px;
}
.sponsorentabelle td.zellelinks {
	width:180px;
	padding-right:80px;
}	
.sponsorentabelle td.zellerechts {
	width:180px;
}
.sponsorentabelle td.zellelinks img, .sponsorentabelle td.zellerechts img {
	max-width:180px;
	height:100%;
	height:auto;
}
.sponsorentabelle a, .sponsorentabelle a:hover, .sponsorentabelle a:active, .sponsorentabelle a:focus {
	border:0;
}

/* Diaschau
-------------------------------------------------------------- */
.diaschaucontainer {
	display:block;
}
.bildcontainer {
	display:block;
	background:rgb(174, 174, 174);
}
.diaschaucontainer a, .diaschaucontainer a:hover, .diaschaucontainer a:focus, .diaschaucontainer a:active {
	border:0;
}
.legendecontainer {
	clear:left;
	display:block;
	width:100%;
	margin-top:6px;
	padding-bottom:64px;
}
.legendecontainer.leer {
	padding-bottom:42px;
}
.steuerung {
	float:left;
	margin-right:20px;
}
.site-content #blaetter-l, .site-content #blaetter-r {
	width:24px;
	height:24px;
	display:block;
	float:left;
	cursor:pointer;
	background:url(images/pfeile-rund.png);
	background-repeat:no-repeat;
	background-size:24px auto;
}
.site-content #blaetter-l {
	background-position:0px -83px;
}
.site-content #blaetter-l:hover {
	background-position:0px -56px;
}
.site-content #blaetter-r {
	background-position:0px -29px;
}
.site-content #blaetter-r:hover {
	background-position:0px -2px;
}

#nummerdisplay {
	font:18px/18px StandardCTBoldCond, helvetica, sans-serif;
	float:left;
	text-align:center;
	width:60px;
	padding-left:4px;
	padding-right:4px;	
	padding-top:3px;	
	color: rgb(174, 174, 174);	
}
.bildlegende {
	float:left;
	margin-top:4px;
	font-style:italic;
	font-size:13px;
	line-height:16px;
}


/* video inkl. responsive
------------------------------------------------------------ */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	/*padding-top: 30px; weglassen? */
	height: 0;
	overflow: hidden;
	margin-bottom:24px;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* fusszeile
-------------------------------------------------------------- */
.topscroll {
	width:46px;
	height:46px;
	display:block;
	margin-left:340px;
	background:url(images/toplink.png);
	background-repeat:no-repeat;
	background-position:0px -50px;
	cursor:pointer;
}
.topscroll:hover, .topscroll:focus {
	background-position:0px 0px;
}
.topscroll.unsichtbar {
	display:none;
}


/* accessibility div.
-------------------------------------------------------------- */
.unsichtbar {
	display:none;
}


/* Beigemuese
-------------------------------------------------------------- */
.impressumtxt {
	position:fixed;
	right:15px;
	bottom:25px;
	height:80px;
	width:15px;
	display:block;
	z-index:22;
}
.impressumtxt a {
	height:80px;
	width:15px;
	background-image:url(images/bb-impressum.png);
	background-repeat:no-repeat;
	background-size:30px 80px;
	background-position:0px 0px;
	display:block;
	text-decoration:none;
}
.impressumtxt a:hover {
	background-position:-20px 0px;
}
.wartung {
	font-size:11px;
	line-height:14px;
	margin-bottom:8px;
	color:#d00;	
}