/*
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
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;
	text-align:center;
}


/* schriften
-------------------------------------------------------------- */
@font-face {
    font-family: 'ca_bnd_webbold';
    src: url('bb-schriften/cabndwebbold-webfont.eot');
    src: url('bb-schriften/cabndwebbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/cabndwebbold-webfont.woff') format('woff'),
         url('bb-schriften/cabndwebbold-webfont.ttf') format('truetype'),
         url('bb-schriften/cabndwebbold-webfont.svg#ca_bnd_webbold') format('svg');
    font-weight: normal;
    font-style: normal;

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

}
@font-face {
    font-family: 'pt_serifbold';
    src: url('bb-schriften/pt_serif-web-bold-webfont.eot');
    src: url('bb-schriften/pt_serif-web-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/pt_serif-web-bold-webfont.woff2') format('woff2'),
         url('bb-schriften/pt_serif-web-bold-webfont.woff') format('woff'),
         url('bb-schriften/pt_serif-web-bold-webfont.ttf') format('truetype'),
         url('bb-schriften/pt_serif-web-bold-webfont.svg#pt_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

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

}


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

/* Breiten und Hoehen */


.konsole {/* links und rechts 20px rand */
	width:810px;
}
.kopf {
	width:100%;
}
.kopf .logo {
	width:770px;
	height:166px;
}
.hauptnav {
	width:770px;
}
.hauptnav ul {
	width:100%;
}
.bannerbild {
	width:770px;
	height:320px;
}
.site-content {
	width:540px;
}
.spalte-rechts {/*achtung mobil-vers: width=300px!*/
	margin-left:590px;
	width:200px;
}
.teaserrechts img {
	max-width:100%;
}



/* Rest */

.konsole {
	position:relative;
	top:20px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:100px;
	text-align:left;
}

.kopf {
	text-align:justify;
}
.kopf .logo {
	display:block;
	overflow:hidden;
	margin-left:20px;
	text-align:justify;
}
.kopf .logo img {
	margin-top:8px;
	max-width:100%;
	height:100%;
	height:auto;
}
.kopf .logo a {
	color:#000;
	text-decoration:none;
	border:0;
}
.kopf .logo a:hover {
	border:0;
}


.hauptnav {
	float:left;
	margin-left:20px;
	padding-top:14px;
}


.bannerbild {
	display:block;
	overflow:hidden;
	margin-left:20px;
}
.bannerbild img {
	max-width:100%;
	height:100%;
	height:auto;
}



.site-content {
	clear:left;
	float:left;
	margin-left:20px;
	padding-top:40px;
}
.spalte-rechts {
	padding-top:40px;
}
.fusszeile {
	clear:left;
	padding:20px;
	font:11px/14px verdana, sans-serif;
}




/* Textformate
-------------------------------------------------------------- */
body, td {
	font:16px/21px pt_serifregular, times, serif;
	color:#666;
}
h1 {
	font:28px/32px ca_bnd_webbold, helvetica, sans-serif;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:18px;
	text-transform:uppercase;
	color:#000;
}	
h2 {
	font:24px/28px ca_bnd_webbold, helvetica, sans-serif;
	font-weight:normal;
	margin-top:32px;
	margin-bottom:18px;
	text-transform:uppercase;
	color:#000;
}	
h3 {
	font:21px/24px ca_bnd_webbold, helvetica, sans-serif;
	font-weight:normal;
	margin-top:24px;
	margin-bottom:18px;
	color:#000;
}
h4 {
	font:16px/21px pt_serifbold, times, serif;
	font-weight:normal;
	margin-top:24px;
	margin-bottom:0px;
	color:#000;
}
.site-content p {
	margin-bottom:18px;
}
.guillemets {
	font-family:arial,sans-serif;
	font-weight:bold;
}


/* news */
.entry-summary {
	margin-bottom:21px;
	padding-bottom:24px;
	border-bottom:1px solid #000;
	clear:left;
}
.entry-summary p {
	margin-bottom:18px;
}
.entry-wrapper {/* wrapper um bild und text */
	min-height:130px;
	display:block;
}
.entry-header h1.entry-title {
	margin-bottom:0px;
}
.entry-header p.datum {
	font:14px/16px ca_bnd_webbold, helvetica, sans-serif;
	color:#000;
	margin-bottom:18px;
}






.site-content ul {
	margin-bottom:18px;
	margin-left:16px;
}
.site-content ul li {
	margin-bottom:9px;
}
.site-content ol {
	margin-bottom:18px;
	margin-left:36px;
}
.site-content .bildlegendemanuell {
	font-size:13px;
	line-height:14px;
	font-style:italic;
}
.site-content p.wp-caption-text {
	margin-top:12px;
	margin-bottom:0px;
	font-size:13px;
	line-height:14px;
	font-style:italic;
}

.site-content .zitat {
	font-style:italic;
	margin-left:36px;
}
.site-content .statement {
	font:28px/32px ca_bnd_webbold, helvetica, sans-serif;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:18px;
	text-transform:uppercase;
	color:#000;
}	

strong {
	font-family:pt_serifbold, times, serif;
	font-weight:normal;
}


/* Links
-------------------------------------------------------------- */
.site-content a, .spalte-rechts a, .entry-summary a {
	color:#666;
	text-decoration:none;
	border-bottom:1px dotted #000;
}
.site-content a:hover, .entry-summary a:hover {
	color:#000;
	border-bottom:1px solid #000;
}
.entry-header a {
	text-decoration:none;
	border:0;
}
.entry-header a:hover {
	border:0;
	color:#1c83a6;
}
.weiterlesenpfeil, .zurueckpfeil, .toplinkpfeil {
	font: 12px/15px travelconsregular, sans-serif;
	padding-right:4px;
	color:#1c83a6;
}
.backlink a {
	color:#666;
	text-decoration:none;
}
.bildlink, .bildlink:hover {
	border:0;
}	

.site-content h1 a, .site-content h1 a:hover {
	color:#000;
	text-decoration:none;
	border:0;
}

/* Bilder
-------------------------------------------------------------- */
.site-content img {
	margin:0px;
	padding:0px;
	vertical-align: bottom;
	max-width:100%;
	height:100%;
	height:auto;
}
.site-content img.alignleft, div.wp-caption.alignleft {
	max-width:250px;/*achtung: responsive = 300px*/
	margin-top:4px;
	margin-right:30px;
	margin-bottom:12px;
	float:left;
}
div.wp-caption.alignleft img {
	margin:0px;
}

div.wp-caption.alignnone {
	margin-bottom:18px;
	max-width:100%;
}


/* video */
iframe {
	width:540px;
	height:304px;
}


/* Teaser rechts
-------------------------------------------------------------- */
.teaserrechts {
	margin-top:6px;
	margin-bottom:40px;
	padding:0px;
	background:#eee;
}
.teaserrechts img {
	margin-bottom:0px;
	height:100%;
	height:auto;
	vertical-align:bottom;
}
.spalte-rechts h3 {
	font:16px/21px ca_bnd_webbold, helvetica, sans-serif;
	font-weight:normal;
		padding:4px 8px 4px 8px;
	margin:0px;
	color:#fff;
	background:#1c83a6;
}
.spalte-rechts p {
	font-size:14px;
	line-height:21px;
	padding:8px;
	margin:0px;
}
.spalte-rechts a {
	color:#666;
	text-decoration:none;
	border:0;
}
.spalte-rechts a:hover {
	text-decoration:none;
	border:0;
}

.spalte-rechts p a {
	border-bottom:1px dotted #000;
}
.spalte-rechts p a:hover {
	color:#000;
	border-bottom:1px solid #000;
}




/* nav
-------------------------------------------------------------- */

/* hauptnav */



.hauptnav {
  text-align: justify;
}
.hauptnav ul {
 }

.hauptnav * {
  display: inline;
}

.hauptnav li {
  display: inline-block;
  margin:0;
  padding:0;
}

.hauptnav span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

.hauptnav a {
	font:26px/28px ca_bnd_webbold, helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
}
.twittercontainer {
	padding-top:1px;
	height:25px;
	width:24px;
	width:60px;
}
.facebooklink {
	height:25px;
	width:24px;
	display:block;
	float:left;
	margin-right:12px;
	background:url(images/icon-facebook.png?ver=1.1);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:24px 50px;
	text-decoration:none;
}
.facebooklink:hover {
	background-position:0px -25px;
}
.twitterlink {
	height:25px;
	width:24px;
	display:block;
	float:left;
	background:url(images/icon-twitter.png?ver=1.1);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:24px 50px;
	text-decoration:none;
}
.twitterlink:hover {
	background-position:0px -25px;
}



/* subnav */
.hauptnav ul li ul a {
	font:24px/28px ca_bnd_webbold, helvetica, sans-serif;
	text-transform:none;
}
.hauptnav ul li ul {
	display:none;
	clear:left;
	float:left;
	position:absolute;
	top:210px;
	margin-left:-20px;
	min-width:200px;
	padding-top:10px;
	width:auto;
	background:url(images/subnavpfeil.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
}

.hauptnav ul li ul li {
	float:none;
	clear:left;
	display:block;
	padding:6px;
	padding-left:9px;
	padding-bottom:9px;
	background:#fff;
	border-bottom:1px solid #aaa;
	border-left:1px solid #aaa;
	border-right:1px solid #aaa;
}

.hauptnav ul li:hover ul {
	display:block;
}


/*farben haupt*/
.hauptnav .current_page_item a, .hauptnav .current_page_ancestor a, .hauptnav .current_page_parent a,
.mobilenav .current_page_item a, .mobilenav .current_page_ancestor a, .mobilenav .current_page_parent a {
	color:#1c83a6;
}
.hauptnav a:hover, .mobilenav a:hover {
	color:#1c83a6;
}

/*farben sub*/
.hauptnav .current_page_item ul li a, .hauptnav .current_page_ancestor ul li a, .hauptnav .current_page_parent ul li a, 
.mobilenav .current_page_item ul li a, .mobilenav .current_page_ancestor ul li a, .mobilenav .current_page_parent ul li a {
	color:#000;
}

.hauptnav ul li ul .current_page_item a, .hauptnav ul li ul .current_page_ancestor a, .hauptnav ul li ul .current_page_parent a,
.hauptnav ul li ul a:hover,
.mobilenav ul li ul .current_page_item a, .mobilenav ul li ul .current_page_ancestor a, .mobilenav ul li ul .current_page_parent a,
.mobilenav ul li ul a:hover {
	color:#1c83a6;
}





/* --------------------------------------------------------------
responsive
----------------------------------------------------------------- */


.mobilewrapper {
	padding-bottom:50px;
	display:none;
}
.mobilefacebookbutton {
	height:26px;
	width:26px;
	margin-left:0px;
	margin-top:0px;
	margin-right:20px;
	cursor:pointer;
	background-color:#fff;
	background-image:url(images/icon-facebook.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:26px auto;
	text-decoration:none;
	display:none;
	float:left;
}
.mobiletwitterbutton {
	height:26px;
	width:26px;
	margin-left:0px;
	margin-top:0px;
	margin-right:20px;
	cursor:pointer;
	background-color:#000;
	background-image:url(images/icon-twitter.png);
	background-repeat:no-repeat;
	background-position:1px 1px;
	background-size:24px 50px;
	text-decoration:none;
	display:none;
	float:left;
}
.mobilenavbutton {
	height:26px;
	width:26px;
	margin-left:0px;
	margin-top:0px;
	cursor:pointer;
	background-image:url(images/menuebutt.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:26px 26px;
	display:none;
	float:left;
}
.mobiletitel {
	font:24px/24px ca_bnd_webbold, helvetica, sans-serif;
	color:#000;
	text-transform:uppercase;
	cursor:pointer;
	display:none;
	margin-left:20px;
	padding-top:5px;
	float:right;
}
.mobilenav {
	position:absolute;
	left:0px;
	top:148px;
	z-index:202;
	display:none;
	padding:30px;
	/*background-image:url(images/alpha.png);*/
	background:#fff;
	-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .6);
	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .6);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.6);
}
.mobilenav ul {
	list-style:none;
	border-top:1px solid #bbb;
}
.mobilenav li {
	padding-top:4px;
	padding-bottom:4px;
	border-bottom:1px solid #bbb;
}
.mobilenav ul ul {
	margin-left:20px;
	margin-top:2px;
	padding-bottom:4px;
	border:0;
}
.mobilenav ul ul li {
	border:0;
	padding-bottom:0px;
}
.mobilenav a {
	font:24px/32px ca_bnd_webbold, helvetica, sans-serif;
	color:#000;
	text-decoration:none;
}
.mobilenav ul ul a {
	line-height:26px;
	text-transform:none;
}


/* geoeffnete mobile nav ausblenden*
----------------------------------------------------------------- */

@media only screen and (min-width: 611px) and (min-height: 401px) {
	.mobilewrapper, .mobilefacebookbutton, .mobiletwitterbutton, .mobilenavbutton, .mobiletitel, .mobilenav {
		height:0px;
		padding:0px;
		overflow:hidden;
		display:none;
	}
}


/* kleiner 1 (neu: standard)
----------------------------------------------------------------- */

@media only screen and (max-width: 1350px), screen and (max-height: 940px) {
	
}



/* kleiner 2
----------------------------------------------------------------- */

@media only screen and (max-width: 900px), screen and (max-height: 500px) {
	
	/* Breiten und Hoehen */

	.konsole {/* links und rechts 20px rand */
		width:600px;
		top:20px;
	}
	.kopf .logo {
		width:560px;
		height:118px;
	}
	.kopf .logo img {
		margin-top:0px;
	}
	.hauptnav {
		width:560px;
	}
	.hauptnav ul li ul {
		top:156px;
		min-width:160px;
	}
	.bannerbild {
		width:560px;
		height:232px;
	}
	.site-content {
		width:560px;
		float:none;
	}
	.spalte-rechts {
		clear:left;
		margin-left:0px;
		width:600px;
	}
	.teaserrechts {
		width:260px;
		height:220px;
		display:block;
		float:left;
		overflow:hidden;
		margin-left:20px;
		margin-right:20px;
	}
	
	/* video */
	iframe {
		width:560px;
		height:315px;
	}


	/* nav */
	
	.hauptnav a, .hauptnav ul li ul a {
		font-size:18px;
		line-height:24px;
	}
	.twittercontainer {
		padding-top:1px;
	}

	/* bilder */
	.site-content img.alignleft, div.wp-caption.alignleft {
		max-width:260px;
		margin-right:40px;
	}

}


/* kleiner 3 (mobile)
----------------------------------------------------------------- */

@media only screen and (max-width: 610px), screen and (max-height: 400px) {
	.mobilewrapper, .mobilefacebookbutton, .mobiletwitterbutton, .mobilenavbutton {
		display:block;
	}
	.mobiletitel {
		display:inline-block;
	}
	.hauptnav {
		display:none;
	}
	
	
	/* Breiten und Hoehen */

	.konsole {/* links und rechts kein rand */
		width:460px;
		top:10px;
	}
	.kopf .logo {
		width:460px;
		height:118px;
		margin-left:0px;
	}
	.bannerbild {
		width:460px;
		height:190px;
		margin-left:0px;
	}
	.site-content {
		width:460px;
		margin-left:0px;
		padding-top:20px;
		float:none;
	}
	.spalte-rechts {
		clear:left;
		margin-left:0px;
		width:460px;
		padding-top:20px;
	}
	.teaserrechts {
		width:220px;
		height:210px;
		display:block;
		float:left;
		overflow:hidden;
		margin-left:0px;
		margin-right:0px;
	}
	.teaserrechts:nth-of-type(2n+0) {
		margin-left:20px;
	}
	.mobilenav {
		width:400px;
	}
	.fusszeile {
		padding-left:0px;
	}
	
	/* video */
	iframe {
		width:460px;
		height:259px;
	}

	
	/* Textformate */
	
	body, td {
		font-size:15px;
		line-height:21px;
	}
	h1 {
		font-size:24px;
		line-height:28px;
		margin-bottom:14px;
	}	
	h2 {
		font-size:18px;
		line-height:21px;
		margin-bottom:14px;
		margin-top:28px;
	}	
	h3 {
		font-size:16px;
		line-height:19px;
		margin-bottom:14px;
	}	
	h4 {
		font-size:15px;
		line-height:21px;
		margin-bottom:14px;
	}	
	.site-content p {
		margin-bottom:14px;
	}
	.spalte-rechts p {
		padding-top:12px;
	}

	/* bilder */
	.site-content img.alignleft, div.wp-caption.alignleft {
		max-width:220px;
		margin-right:20px;
	}

}



/* kleiner 4 (mobile ende)
----------------------------------------------------------------- */

@media only screen and (max-width: 510px), screen and (max-height: 350px) {
	
	/* Breiten und Hoehen */

	.konsole {/* links und rechts kein rand */
		width:300px;
	}
	.kopf .logo {
		width:300px;
		height:82px;
	}
	.bannerbild {
		width:300px;
		height:123px;
	}
	.site-content {
		width:300px;
		margin-left:0px;
		padding-top:20px;
	}
	.spalte-rechts {
		width:300px;
		padding-top:10px;
	}
	.teaserrechts {
		width:300px;
		height:250px;
		overflow:hidden;
		margin-bottom:20px;
	}
	.teaserrechts:nth-of-type(2n+0) {
		margin-left:0px;
	}

	/* video */
	iframe {
		width:300px;
		height:169px;
	}


	.mobilenav {
		width:240px;
		top:118px;
	}
	.mobilewrapper {
		padding-bottom:45px;
	}
	.mobiletitel {
		font-size:18px;
		line-height:21px;
		padding-top:8px;
	}
	.mobilenav a {
		font-size:21px;
		line-height:28px;
	}
	.mobilenav ul ul a {
		line-height:21px;
	}



	/* Textformate */
	
	body, td {
		font-size:14px;
		line-height:21px;
	}
	.spalte-rechts p {
		font-size:15px;
		line-height:21px;
		padding-top:12px;
	}

	/* bilder */
	.site-content img.alignleft, div.wp-caption.alignleft {
		max-width:300px;
		height:100%;
		height:auto;
		margin-right:0px;
		float:none;
	}
	
}