/*** 
	www responsive template css
	
	w3.css extension
	for screens
	
	b-4-u
	Franz Fischer
	Alter Buehlweg 8
	88339 Bad Waldsee
	Germany
	
	info@b-4-u.de

	v1.7
***/

html, body, h1, h2, h3, h4, h5, h6{
	font-family: "Open Sans", sans-serif;
}

h5{
	float: left;
	background-color: rgba(0,0,0,0.5);
	color: white;
	padding: 0 2px 2px 2px;
	margin: 5px 5px 0 0;
	border-radius: 2px;
	height: 33px;
}

h6{
	float: left;
	background-color: #f44336;
	color: white;
	padding: 0 2px 2px 2px;
	margin: 5px 5px 0 0;
	border-radius: 2px;
	height: 185px;
}

body{
	font-size: 14px;
	background-image: url(./images/asphalt.jpg);
	background-color: #f1f1f1;
}

#pageContentContainer{
	background-color: transparent;
}

#pageContent{
}

#pageContent strong{
	font-size: 15px;
	font-variant: small-caps;
}

#pageContentText{
	width: 100%;
	margin-bottom: 10px;
	border-radius: 5px;
}

#pageContentText p a:link{
	color: #2196F3;
}

#pageContentText p a:hover{
	color: #f44336;
}

#pageContentText p a:active{
	color: #f44336;
}

#pageContentText p a:visited{
	color: #9c27b0;
}

.overlaySidebarMenu{
	cursor: pointer;
}

.banner-h2 span, .banner-h4 span, #banner h2 span, #banner h4 span{
	padding: 0 2px;
	background-color: rgba(33,150,243,0.5);
	text-shadow: 1px 1px 1px #000000;
	border-radius: 5px;
}

.cover-image{
	margin: 5px 0 0 0;
	width: 225px;
	-webkit-box-shadow: 1px 1px 1px 1px #fff; 
	box-shadow: 1px 1px 1px 1px #fff;
}

.page-iconbar{
	float: right;
}

.page-iconbar-btn-container{
	display: inline-block;"
}

.pageinfo{
	font-size: 10px;
	font-weight: bold;
	text-align: right;
	padding: 2px 0 5px 0;
	border-top: 1px solid #f1f1f1;
}

.navtop{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 500;
}

.font-arial{
	font-family: arial;
	font-size: 13px;
}

#intro-title{
	min-height: 550px;
}

#shops{
	min-height: 1200px;
}

#crossell{	
}

#content, #preview{
}

#intro-title ul{
	list-style: none;
	padding: 0px;
}

.preview-tile, .shop-tile, .cs-tile{
	display: inline-block;
	vertical-align: top;
	width: 30%;
	min-width: 280px;
	min-height: 150px;
	margin: 0 10px 15px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 85%;
	border: 1px solid #cfcfcf;
	border-radius: 3px;
}

.preview-img-bod, .shop-img-bod{
	background: url('./images/logo-bod.png') no-repeat center;
	background-size: auto 50px;	
}

.preview-img-amazon, .shop-img-amazon{
	background: url('./images/logo-amazon.png') no-repeat center;
	background-size: contain;
}

.preview-img-ebook{
	background: url('./images/cover.jpg') no-repeat center;
	background-size: auto 80%;
}

.shop-img-buecherde{
	background: url('./images/logo-buecherde.png') no-repeat center;
	background-size: auto 50px;
}

.shop-img-ebookde{
	background: url('./images/logo-ebookde.png') no-repeat center;
	background-size: auto 50px;
}

.shop-img-averdo{
	background: url('./images/logo-averdo.png') no-repeat center;
	background-size: auto 50px;
}

.shop-img-faltershopat{
	background: url('./images/logo-faltershopat.png') no-repeat center;
	background-size: auto 50px;
}

.shop-img-exlibris{
	background: url('./images/logo-exlibris.png') no-repeat center;
	background-size: auto 48px;
}

.shop-img-barnesandnoble{
	background: url('./images/logo-barnesandnoble.png') no-repeat center;
	background-size: auto 85px;	
}

.shop-img-betterworldbooks{
	background: url('./images/logo-betterworldbooks.png') no-repeat center;
	background-size: auto 48px;
}

.shop-img-abebookscom{
	background: url('./images/logo-abebookscom.png') no-repeat center;
	background-size: auto 56px;
}

.shop-img-googleplay{
	background: url('./images/logo-googleplay.png') no-repeat center;
	background-size: auto 50px;
}

.shop-img-kobo{
	background: url('./images/logo-kobo.png') no-repeat center;
	background-size: auto 50px;	
}

.shop-img-buchhausch{
	background: url('./images/logo-buchhausch.png') no-repeat center;
	background-size: auto 50px;	
}

.shop-img-fnac{
	background: url('./images/logo-fnac.png') no-repeat center;
	background-size: auto 50px;	
}

.cs-tile{
	height: 350px;
}

.cs-img-vh19{
	background: url('./images/cs-img-vh19.jpg') no-repeat center;
	background-size: auto 300px;	
}

.cs-img-svz1{
	background: url('./images/cs-img-svz1.jpg') no-repeat center;
	background-size: auto 300px;	
}

.cs-img-svz2{
	background: url('./images/cs-img-svz2.jpg') no-repeat center;
	background-size: auto 300px;	
}

.cs-img-bpl16{
	background: url('./images/cs-img-bpl16.jpg') no-repeat center;
	background-size: auto 300px;	
}

.img{
	width: 100%;
}


/*** SCREEN DEPENDING STYLES ***/
@media screen and (max-width:599px){
	.hide-x-small{
		display: none;
	}

	#intro-title h1{
		font-weight: bold;
		font-size: 140%;
	}

	#intro-title h2{
		font-weight: bold;
		font-size: 120%;
		margin-left: 5px;
		padding-left: 5px;
		border-left: 3px solid rgba(0,0,0,0.5);
	}

	#intro-title h3{
		font-size: 110%;
		font-weight: bold;
		margin: -5px 0 0 15px;
	}

	#intro-title h3 span{
		background-color: rgba(0,0,0,0.5);
		color: white;
		margin:  0 0 23px;
		padding: 0 2px 2px 2px;
		border-radius: 2px;
	}
}

@media screen and (min-width:600px){
	#intro-title h1{
		font-weight: bold;
		font-size: 300%;
	}

	#intro-title h2{
		font-weight: bold;
		font-size: 200%;
		padding-left: 25px;
	}

	#intro-title h3{
		font-size: 150%;
		font-weight: bold;
		margin: -15px 0 0 20px;
	}

	#intro-title h3 span{
		background-color: rgba(0,0,0,0.5);
		color: white;
		margin: 0 0 0 23px;
		padding: 0 5px 5px 5px;
		border-radius: 5px;
	}
}

@media screen and (max-width:992px){
	.w3-main{
		margin-left: 0;
		margin-right: 0;
	}

	header h1{
		font-size: 28px;
	}
}


@media screen and (min-width:1280px){
	.content-main{
		margin-top: 35px;
		width: 100%;
		display: inline-block;
		float: left;
	}
	
	#banner{
		height: 480px;
		background-image: url("images/empty_road.jpg");
		background-position: top-left; 
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	.banner-h2, #banner h2{
		padding: 10px 0 0 7px;
		line-height: 150%;
		font-weight: bold;
		font-size: 500%;
		color: #fff;
	}
	
	.banner-h2 span, #banner h2 span{
		padding: 3px;
		background-color: rgba(0,0,0,0.5);
	}	
}

@media screen and (max-width:1279px){
	.content-main{
		margin-top: 35px;
		width: 100%;
	}
	
	#banner{
		height: 480px;
		background-image: url("images/empty_road_x1279.jpg");
		background-position: top-left; 
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	.banner-h2, #banner h2{
		padding: 10px 0 0 7px;
		line-height: 150%;
		font-weight: bold;
		font-size: 500%;
		color: #fff;
	}
	
	.banner-h2 span, #banner h2 span{
		padding: 3px;
		background-color: rgba(0,0,0,0.5);
	}	
}

@media screen and (max-width:340px){
	#banner{
		height: 480px;
		background-image: url("images/empty_road_x320.jpg");
		background-position: top-left; 
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	
	h6{
		height: 400px;
	}

	.banner-h2, #banner h2{
		padding: 10px 0 0 7px;
		line-height: 150%;
		font-weight: bold;
		font-size: 300%;
		color: #fff;
	}
	
	.banner-h2 span, #banner h2 span{
		padding: 3px;
		background-color: rgba(0,0,0,0.5);
	}	
	
	.hide-xx-small{
		display: none;
	}	
}