/* © 2016 bytes & bones
All rights reserved*/

/* cforms-definitionen in style-form.css */

#menuebutton {
	display:none;
	width:28px;
	height:28px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:36px;
	clear:both;
	background:url(images/menuebutt.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	cursor:pointer;
}
#menuebutton:hover, #menuebutton:focus, #menuebutton:active {
	background-position:0px -40px;
}
.hauptnav-mobile {
	margin-top:0px;
	width:100%;
	text-align:center;
	display:none;
	overflow:hidden;
}

.hauptnav-mobile ul {
	width:100%;
	margin:0px;
	margin-top:20px;
	padding:0px;
	padding-top:14px;
	border-top: 1px solid #000;
	border-bottom: none;
}
.hauptnav-mobile li {
	display: block;
	float:none;
	margin:0;
	padding:0;
}
.hauptnav-mobile a {
	display: inline-block;
	padding:4px;
}



@media only screen and (min-width: 861px){
	.hauptnav {
		display:block;
	}
	.hauptnav-mobile, .hauptnav-mobile * {
		display:none;
		height:0px;
		margin:0px;
		padding:0px;
		border:0;
		overflow:hidden;
	}
}



/* /////////////////////////////////////////////// */
@media only screen and (max-width: 1100px) {


	.konsole {
		width:830px;
	}
	.kopf .werbung-banner {
		height:138px;
	}
	.kopf .werbung-banner a {
		height:102px;
	}
	.hauptnav a {
		font:17px/21px bitterregular, helvetica, sans-serif;
	}

	.site-content {
		width:540px;
		margin-right:40px;
	}
	.site-content img {
		max-width:540px;
		height:100%;
		height:auto;
	}
	.site-content .autorbild img {
		max-width:120px;
		height:100%;
		height:auto;
	}

	.site-content a.backtobloglink {
		width:100%;
	}

	.site-content table {
		width:100% !important;
	}
	.site-content table td, .site-content table tr {
		width:auto;
	}
	
	.spalte-rechts iframe {
		max-width:250px;
		width:250px;
		height:216px;
	}

	
	/* medienjobs */
	.medienjobs {
		width:100%;
		height: 1400px;/* 1 inserat = 55px + 300px beigemuese*/
	}

	.fusszeile .spalte-1, .fusszeile .spalte-2, .fusszeile .spalte-3 {
		width:250px;
	}
	.fusszeile .spalte-1, .fusszeile .spalte-2 {
		padding-right:20px;
		margin-right:19px;
	}

}


/* blog-preview, pagekids und kasten rechts werden bei 300 pix wieder normal */
@media only screen and (max-width: 1100px) and (min-width:591px) {

	.blog-preview-wrapper:nth-of-type(2n+0) {
		margin-left:40px;
	}
	.blog-preview-wrapper{
		width:250px;
		height:187px;
	}
	.blog-preview-wrapper img {
		width:250px;
		height:100%;
		height:auto;
	}

	.blog-preview-wrapper-text h2 {
		font:17px/22px bitterbold, helvetica, sans-serif;
		margin:0;
	}
	.blog-preview-wrapper-text p {
		font:15px/21px georgia, times, serif;
		margin:0;
	}



	.site-content .pagekid-wrapper {/*a*/
		width:250px;
	}
	.pagekid-wrapper.links {
		margin-right:40px;
	}



	.spalte-rechts {
		width:250px;
	}
	.spalte-rechts iframe {
		max-width:250px;
		width:250px;
		height:216px;
	}
	
	.suchfeld .suchfeldleer {
		width:204px;
	}

	/* migros */
	.kasten200x200 {
		padding:26px 25px 20px 25px;
	}

}



/* mobile
/////////////////////////////////////////////// */
@media only screen and (max-width: 860px) {


	.konsole {
		width:540px;
	}
	.kopf {
		border-bottom: 1px solid #000;
		padding-bottom:20px;
	}
	.kopf .werbung-banner {
		height:100px;
	}
	.kopf .werbung-banner .sponsorueberzeile {
		width:540px;
	}
	.kopf .werbung-banner a {
		width:540px;
		height:67px;
	}
	.kopf .werbung-banner img {
		width:540px;
		height:100%;
		height:auto;
	}
	.kopf .logo {
		top:25px;	
		width:270px;
	}
	.kopf .logo-byline {
		font-size:21px;
		line-height:28px;
	}




	#menuebutton {
		display:block;
	}
	.hauptnav {
		display:none;
	}


	.site-content {
		width:100%;
		margin-top:36px;
		margin-right:0px;
		float:none;
	}
	.site-content .autorbild img {
		max-width:120px;
		height:100%;
		height:auto;
	}
	.site-content .seitennavigation {
		margin-bottom:32px;
		height:30px;
		display:block;
		text-align:center;
	}




	.fusszeile {
		margin-top:0px;
	}
	.clearer {
		height:1px;
		overflow:hidden;
	}
	.fusszeile .spalte-1, .fusszeile .spalte-2, .fusszeile .spalte-3 {
		float:none;
		width:100%;
		margin:0;
		margin-top:24px;
		border:0;
		padding:0;
		padding-bottom:24px;
		text-align:center;
		min-height:1px;
		border-bottom:1px solid #000;
	}
	.fusszeile p.web20 {
		width:180px;
		padding-left:20px;
		margin-left:auto;	
		margin-right:auto;
		text-align:left;
	}
	
	
	
	#commentform input {
		width:536px;
	}
	#commentform textarea {
		width:530px;
	}

	#commentform #submit {
		font-size:16px;
		line-height:21px;
		padding:4px;
		width:250px;
	}

}


/*kasten rechts wird bei 300 pix wieder normal */
@media only screen and (max-width: 860px) and (min-width: 591px) {

	.spalte-rechts {
		width:100%;
		float:none;
		clear:left;
		border-top:1px solid #000;
		padding-top:48px;
	}
	.spalte-rechts .kaesten .kastenrechts {
		float:left;
		width:250px;
	}
	.spalte-rechts .kaesten .kastenrechts:nth-of-type(2n+1) {
		clear:left;
	}
	.spalte-rechts .kaesten .kastenrechts:nth-of-type(2n+0) {
		margin-left:40px;
	}
	
	/* migros */
	.kasten200x200 {
		padding:26px 25px 20px 25px;
	}

}



/* mobile 320
/////////////////////////////////////////////// */
@media only screen and (max-width: 590px) {

	.konsole {
		width:300px;
	}
	.kopf {
		border-bottom: 1px solid #000;
		padding-bottom:20px;
	}
	.kopf .werbung-banner {
		height:65px;
	}
	.kopf .werbung-banner .sponsorueberzeile {
		margin-top:8px;	
		width:300px;
	}
	.kopf .werbung-banner a {
		width:300px;
		height:36px;
	}
	.kopf .werbung-banner img {
		width:300px;
		height:100%;
		height:auto;
	}
	.kopf .logo {
		top:15px;	
		width:180px;
	}
	.kopf .logo-byline {
		font-size:17px;
		line-height:24px;
	}
	#menuebutton {
		margin-top:26px;
	}

	.site-content img, .bloghauptbild {
		max-width:100% !important;
		height:100% !important;
		height:auto !important;
	}

	.blog-preview-wrapper:nth-of-type(2n+0) {
		margin-left:0px;
	}
	.pagekid-wrapper.links {
		margin-right:0px;
	}


	.site-content .seitennavigation a, .site-content .seitennavigation .platzhalter {
		margin-right:6px;
		margin-bottom:6px;
	}
	.site-content .seitennavigation a:nth-of-type(8n+0) {
		margin-right:0px;
	}
	
	
	
	.entry-summary.printausgaben .links {
		float:none;
		text-align:center;
	}
	.entry-summary.printausgaben .links img {
		width:150px !important;
		height:auto;
	}
	.entry-summary.printausgaben .rechts {
		margin-left:0px;
	}

	.entry-summary.printausgaben p {
		margin-bottom:0px;
		margin-top:18px;
	}	

	.spalte-rechts iframe {
		max-width:300px;
		width:300px;
		height:250px;
	}

	/* medienjobs */
	.medienjobs {
		height: 1400px;
	}


	/* Textformate
	-------------------------------------------------------------- */
	.site-content, td {
		font-size:16px;
		line-height:20px;
	}

	h1 {
		font-size:26px;
		line-height:29px;
		margin-bottom:18px;
	}	
	h2 {
		font-size:18px;
		line-height:21px;
	}	
	.site-content .pagekid-wrapper {/*a*/
		margin-bottom:18px;
	}
	.site-content .pagekid-wrapper h2 {
		padding-bottom:10px;
	}
	h3 {
		font-size:18px;
		line-height:21px;
	}	


	.zitat, .site-content .zitat, .zitatohne, .site-content .zitatohne {
		font-size:24px;
		line-height:28px;
	}


	.initiale {
		padding-top:0px;
		font-size:74px;
		line-height:60px;
	}

	.site-content table {
		width:100% !important;
	}

	.site-content td, .site-content table tr {
		clear:left;
		width:100% !important;
		height:auto !important;
		display:inline-block;
		float:none;
	}
	.site-content table td img {
		max-width:150px !important;
	}
	
	
	.autorbild {
		float:none;
		margin-bottom:20px;
		overflow:hidden;
	}
	.autorinfo p {
		font-size:14px;
		line-height:18px;
	}
	.autorinfo h3 {
		font-size:13px;
		line-height:18px;
	}

	.site-content a.backtobloglink {
		width:140px;
	}
	.site-content a.backtobloglink img {
		float:none;
		padding:0px;
	}
	.site-content a.backtobloglink h3 {
		padding-top:8px;
		margin-top:0px;
		margin-bottom:0px;
	}

	.spalte-rechts {
		border-top:1px solid #000;
		padding-top:48px;
	}
	.spalte-rechts .kaesten .kastenrechts.werbung.werbungsolo .werbung-rechts {
		margin-left:0px;		
	}	

	#commentform textarea {
		width:290px;
	}
	#commentform input {
		width:296px;
	}
	#commentform #submit {
		padding:4px;
		width:292px;
	}


	/* share-buttons */
	.site-content .sharebuttons {
		padding-bottom:28px;
	}
	.site-content .sharebuttons a {
		height:36px;
		width:36px;
	}
	.site-content .share-facebook, .site-content .share-twitter, .site-content .share-email {
		background-size:36px 36px;
		margin-right:20px;
	}

}