/*================================================================== Desctop mit Breite über 1700 px =======*/
body {
	width:98%;
	height:80%;
}	
h1{
	margin:5px;
	font-size:24px;
	text-align:center;
	color:darkred;
	/*font-family:"Pacifico", Georgia, "Times New Roman", serif;*/
	font-family:"Times New Roman", serif;
	text-shadow:1px 1px 1px #000;
	padding-bottom:10px;
	line-height:40px;
}
h1 span{
	font-size:10px;
	display:block;
	letter-spacing:2px;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
	color:#00c6e3;
	line-height:14px;
	padding-top:10px;
	text-shadow:none;
	text-transform:uppercase;
}
figure {
	float:left;
	width:42%; 
	margin:2% 2%;
}
figcaption {
	 margin: 1% 1%;
	 font-size: 16px;
	 /*color:red;*/
}	
img {
	width:95%;
	cursor:pointer;
	border-style:none; 
}
#schirm {
	width:70%;
	float:left; 
	margin-top:0.5%; 
	margin-left:1%;
	background-color:#91887D;
	border:solid 2px darkred;
	min-height:400px; 
}	
.content {
	 width:70%;
	 float:left;
	 padding-left:0.5%;
	 padding-bottom:1%;
 }

.thema {
	width:98%;
	max-height:400px;
	background-color: transparent;
	color:darkred;
	overflow-y:auto; 
	float:left;
	margin-right:1%;
	margin-left:1%;
	margin-top:2%;
	border:solid 1px darkred;
}

.thema p {
	text-align:center;
	font:italic bold 18px Arial;	
}
a.rueck {
	 display:inline-block;
	 width:200px;
	 height:40px;
	 background-color:transparent;
	 border:solid 5px darkred;
	 border-radius:12px;
	 font:normal normal  16px Arial;
	 color:darkred;
	 cursor:pointer;
	 text-decoration:none;
	 text-align:center;
	 padding-top:15px;
}	

.linke_seite {
		float:left; 
		width:20%;
		max-height:850px;
		background-color:transparent;
		overflow:hidden;
}	

	
.rg-image-wrapper{
	position:relative;
	padding:20px 30px;
	background:transparent url(../php/images/black.png) repeat top left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	min-height:20px;
}
.rg-gallery {
	color:white;
	text-align:center;
	font-weight:bold;
}	
.rg-image{
	position:relative;
	text-align:center;
	line-height:0px;
}
.rg-image img{
	max-height:100%;
	max-width:100%;
}
.rg-image-nav a{
	position:absolute;
	top:0px;
	left:0px;
	background:#000 url(../php/images/nav.png) no-repeat -20% 50%;
	width:28px;
	height:100%;
	text-indent:-9000px;
	cursor:pointer;
	opacity:0.3;
	outline:none;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}
.rg-image-nav a.rg-image-nav-next{
	right:0px;
	left:auto;
	background-position:115% 50%;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
}
.rg-image-nav a:hover{
	opacity:0.8;
}
.rg-caption {
	text-align:center;
	margin-top:15px;
	position:relative;
}
.rg-caption p{
	font-size:11px;
	letter-spacing:2px;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
	line-height:16px;
	padding:0 15px;
	text-transform:uppercase;
}
.rg-view{
	height:30px;
}
.rg-view a{
	display:block;
	float:right;
	width:16px;
	height:16px;
	margin-right:3px;
	background:#464646 url(../php/images/views.png) no-repeat top left;
	border:3px solid #464646;
	opacity:0.8;
}
.rg-view a:hover{
	opacity:1.0;
}
.rg-view a.rg-view-full{
	background-position:0px 0px;
}
.rg-view a.rg-view-selected{
	background-color:#6f6f6f;
	border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
	background-position:0px -16px;
}
.rg-loading{
	width:46px;
	height:46px;
	position:absolute;
	top:50%;
	left:50%;
	background:#000 url(../php/images/ajax-loader.gif) no-repeat center center;
	margin:-23px 0px 0px -23px;
	z-index:100;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	opacity:0.7;
}
/*================================================================== Desctop, Laptop, Notebook mit Breite bis 1700 px =======*/
@media screen and (max-width: 1700px) {
	#schirm {
		width:80%;
	}
	.content {
		/*background-color:yellow;*/
		width:82%;
	}
	.linke_seite {
		width:15%;
	}
}
@media screen and (max-width: 1550px) {
	#schirm {
		width:74%;
	}
	.content {
		/*background-color:green;*/
		width:73%;
	}
	.linke_seite {
		width:20%;
	}
	.thema {
		height:350px;
	}	
}

/*================================================================== tablet, ipad quer (Landscape) =======*/
@media screen and (max-width: 1300px) {
	figcaption {
		margin: 1% 1%;
		font-size: 12px;
		/*color:red;*/
	}
	
	#schirm {
		width:72%;
	}
	.content {
		/*background-color:blue;*/
		width:70%;
		margin-left:2%;
	}
	.linke_seite {
		width:20%;
	}
}	
@media screen and (max-height: 780px) {
	.thema {
		height:310px;
	}
}
/*================================================================== tablet, ipad hoch (Porträt) =======*/
@media screen and (max-width: 1050px) {
	.thema {
		width:46%;
		height:600px;/*400px;*/
	}	
	#schirm {
		width:90%;
		margin-top:2%;
	}
	.content {
		/*background-color:yellow;*/
		width:90%;
		margin-top:2%;
	}
	.linke_seite {
		width:95%;
	}
}
/*================================================================== iphon quer (Lanscape) =======*/
@media screen and (max-width: 700px) {
	.linke_seite {
		width:20%;
	}
	.thema {
		width:95%;
		height:150px;
	}	
	figure {
		width:46%; 
		margin:1% 1%;
	
	}
	#schirm {
		width:75%;
		margin-top:1%;
		background-color:transparent /*red;*/
		min-height:280px;
	}
	.content {
		background-color:transparent;
		width:35%;
		margin-left:20%;
		margin-top:1%;
	}
}

@media screen and (max-width: 650px) {
	.thema {
		height:135px;
	}
	.content {
		width:25%;
	}
}	
@media screen and (max-width: 600px) {
	.linke_seite {
		width:30%;
	}
	#schirm {
		width:65%;
		margin-top:1%;
		background-color:transparent; /*green;*/
		min-height:250px;
	}
	.thema {
		height:120px;
	}
}	
/*================================================================== iphon hoch (Porträt) =======*/
@media screen and (max-width: 450px) {
	.thema {
		width:46%;
		height:140px;
	}
	.thema p {
		font:italic bold 14px Arial;	
	}
	figcaption {
		font-size:10px;
	}	
	#schirm {
		width:90%;
		margin-top:2%;
	}
	.content {
		background-color:yellow;
		width:90%;
		margin-left:1%;
		margin-top:2%;
	}
	.linke_seite {
		width:95%;
	}	
}
@media screen and (max-width: 365px) {
	.thema {
		height:120px;
	}	
	.content { 
		width:80;
	}	
}	
@media screen and (max-width: 325px) {
	.thema {
		height:100px;
	}
	.content { 
		width:60;
	}
}