@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
	background:rgba(60,50,50,1);
	font-family: 'Open Sans', sans-serif;
}

#main, #bildnavi, #content, .bildWrapper {
	margin:auto;	
}

#bildnavi {
	margin-top: 5px;
	font-size:18px;		
}

#main {
	background:rgba(250,230,230,1);
	border-radius:5px; 
	margin-top: 15px;
	padding:15px 5px;
	box-shadow:10px 10px 5px #222222;
}

#content {
	background:rgba(20,10,10,1);
}

.buttonWrapper {
	display:table-cell;
	width:100px;
	height:60px;
	text-align:center;
	vertical-align:middle;
}
button {
	font-size:18px;
	width:100px;
	height:60px;
	padding:5px 0 0;
	border:none;
	border-radius:8px;
	background: #a59696;
	background: -moz-linear-gradient(top, #a59696 0%, #c3b4b4 100%);
	background: -webkit-linear-gradient(top, #a59696 0%,#c3b4b4 100%); 
	background: linear-gradient(to bottom, #a59696 0%,#c3b4b4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a59696', endColorstr='#c3b4b4',GradientType=0 ); 
	box-shadow:2px 2px 0 rgba(150,150,150,1);
}

	button:hover {
		background: #c3b4b4; 
		background: -moz-linear-gradient(top, #c3b4b4 0%, #d7c8c8 100%); 
		background: -webkit-linear-gradient(top, #c3b4b4 0%,#d7c8c8 100%); 
		background: linear-gradient(to bottom, #c3b4b4 0%,#d7c8c8 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3b4b4', endColorstr='#d7c8c8',GradientType=0 ); 	
	}

	button:active {
		background: #877878; 
		background: -moz-linear-gradient(top, #877878 0%, #a59696 100%); 
		background: -webkit-linear-gradient(top, #877878 0%,#a59696 100%); 
		background: linear-gradient(to bottom, #877878 0%,#a59696 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#877878', endColorstr='#a59696',GradientType=0 ); 
		box-shadow:1px 1px 4px rgba(10,10,10,0.6) inset;	
	}

#bildInfo {
	display:table-cell;
	height:60px;
	text-align:center;
	vertical-align:middle;	
}


@media all and (min-width: 800px), all and (min-height: 750px) {
	#main {
		width:620px;	
	}
	
	#content
	{
		width:600px;
		height:600px;
	}
	
	.hoch {
		width: 400px;
		height: 600px;	
	}
	
	.quer {
		width: 600px;
		height: 400px;	
	}
	
	div.quer {
		padding-top:100px;	
	}
	
	#bildnavi {
		width:600px;
		height:60px;
	}
	
	#bildInfo {
		width: 	440px;
	}
}

@media all and (max-width: 800px), all and (max-height: 800px) {
	#main {
		width:520px;	
	}
	
	#content
	{
		width:500px;
		height:500px;
	}

	.hoch {
		width: 333px;
		height: 500px;	
	}	
	
	.quer {
		width: 500px;
		height: 333px;	
	}
	
	div.quer {
		padding-top:82px;	
	}
	
	#bildnavi {
		width:500px;
		height:60px;
		font-size:16px;	
	}
	
	#button {
		font-size:16px;	
	}
	
	#bildInfo {
		width: 	340px;
	}
}

@media all and (max-width: 600px), all and (max-height: 650px) {
	#main {
		width:420px;	
	}
	
	#content
	{
		width:400px;
		height:400px;
	}
	
	.hoch {
		width: 267px;
		height: 400px;	
	}	
	
	.quer {
		width: 400px;
		height: 267px;	
	}
	
	div.quer {
		padding-top:65px;
	}
	
	#bildnavi {
		width:400px;
		height:60px;
		font-size:16px;
	}
	
	button {
		font-size:16px;	
	}
	
	#bildInfo {
		width: 	240px;
	}
}

@media all and (max-width: 450px), all and (max-height: 550px) {
	#main {
		width:320px;	
	}
	
	#content
	{
		width:300px;
		height:300px;
	}
	
	.hoch {
		width: 200px;
		height: 300px;	
	}	
	
	.quer {
		width: 300px;
		height: 200px;	
	}
	
	div.quer {
		padding-top:48px;
	}
	
	#bildnavi {
		width:300px;
		height:50px;	
		font-size:14px;	
	}	
	
	#btnZurueck, #btnVor, .buttonWrapper {
		width:80px;
		height:50px;
		font-size:14px;	
	}
	
	.pfeil{
		width:60px;
		height:40px;	
	}
	
	#bildInfo {
		width: 140px;
		height:50px;
	}
}

@media all and (max-width: 350px), all and (max-height: 400px) {
	#main {
		width:270px;	
	}
	
	#content
	{
		width:250px;
		height:250px;
	}
	
	.hoch {
		width: 167px;
		height: 250px;	
	}	
	
	.quer {
		width: 250px;
		height: 167px;	
	}
	
	div.quer {
		padding-top:48px;
	}
	
	#bildnavi {
		width:250px;
		height:40px;
		font-size:14px;		
	}
	
	#btnZurueck, #btnVor, .buttonWrapper {
		width:60px;
		height:40px;
		font-size:14px;		
	}
	
	button {
		padding:2px 0 0;
		box-shadow:1px 1px 0 rgba(150,150,150,1);	
	}
	
	.pfeil {
		width:50px;
		height:35px;	
	}
	
	#bildInfo {
		width: 130px;
		height:40px;
	}	
}