@charset "ISO-8859-1";

/* body ***************************/
body {
	background-image: url('BackgroundImage.JPG');
	background-attachment: fixed;
	font-family: verdana, arial, helvetica, sans-serif;
	}

.fragment {
	background-image: none;
	font-family: verdana, arial, helvetica, sans-serif;
	}
	
	/* Responsive layout - when the screen is more than 1600px wide, limit width of content */
	@media screen and (min-width: 1600px) {
		body {
	background-image: url('BackgroundImage.JPG');
	background-attachment: fixed;
	font-family: verdana, arial, helvetica, sans-serif;
	max-width: 1600px;
	}
}

/* Headings ***********************/
h1 {
	font-size: 2em;
	text-align: left;
	}

h2 {
	font-size: 1.5em;
	text-align: left;
	padding-bottom: 0.5em;
	}

h3 {
	font-size: 1em;
	text-align: left;
	padding-bottom: 0.5em;
	}

h4 {
	font-size: 1em;
	text-align: left;
	}

/* fonts ************************/
.impressum {
	text-align: left;
	font-size: 0.8em;
	}

.navInline {
	text-align: left;
	font-size: 0.8em;
	}
	
.smallText {
	text-align: left;
	font-size: 0.8em;
	}

a {
	text-decoration: none
	}
	
	/* stories ********************/
	.titleStory {
		text-align: left;
		font-size: 1em;
		font-weight:  bold;
		}

	.author {
		text-align: left;
		font-size: 0.9em;
		}

	.descStory {
		text-align: left;
		font-size: 1em;
		}

	.pubStory {
		text-align: left;
		font-size: 0.9em;
		}	

	.downloadStory {
		text-align: left;
		font-size: 1em;
		}
		
	/* instructions *************/
	.step {
		}
		
	.result {
		}

/* Grid ************************/
.oneColumn {
	float: left;
	width: 100%;
	}
	
.leftColumn {
	float: left;
	width: 75%;
	}
	
.rightColumn {
	float: right;
	width: 25%;
	}
	
.tileLeft {
	float: left;
	width: 50%
	}
	
.tileRight {
	float: right;
	width: 50%
	}
		
	/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 800px) {
	  .leftColumn, .rightColumn {
	    	width: 100%;
	    	padding: 0;
	  		}
	  
	  .tileLeft, .tileRight {
			float: none;	  		
	  		width: 100%;
	  		} 
  	}
  			
/*Cards ************************/
.card {
	background-color: rgba(256,256,256,0.8);
	padding: 20px;
	margin-top: 20px;
	}

.cardLeft {
	background-color: rgba(256,256,256,0.8);
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	}
	
.cardRight {
	background-color: rgba(256,256,256,0.8);
	padding: 20px;
	margin-top: 20px;
	margin-left: 10px;
	}
		
	/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 800px) {
		.cardLeft {
			background-color: rgba(256,256,256,0.8);
			padding: 20px;
			margin-top: 20px;
			margin-right: 0px;
			}

		.cardRight {
			background-color: rgba(256,256,256,0.8);
			padding: 20px;
			margin-top: 20px;
			margin-left: 0px;
			}
	}

/*Images *************************/

.icon {
	padding-top: 0px;	
	padding-right: 00px;
	height: 1em;
	}
	
.coverStory {
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	}
	
.gallery {
	padding: 10px;	
	width: 30%;
	max-width: 150px;
	height: auto;
	vertical-align: middle;
	}
	
.imagerightwide {
	float: right;	
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;	
	width: 30%;
	max-width: 300px;
	height: auto;
}	

.imageleftwide {
	float: left;	
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;	
	width: 30%;
	max-width: 300px;
	height: auto;
}	

.imagerightnarrow {
	float: right;	
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;	
	width: 20%;
	max-width: max-content;
	height: auto;
}	

.imageleftnarrow {
	float: left;	
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;	
	width: 20%;
	max-width: max-content;
	height: auto;
}	

	/* Responsive layout - when the screen is less than 1100px wide, make the two columns stack on top of each other instead of next to each other*/
	@media screen and (max-width: 1100px) {
		
		.gallery {
			padding: 10px;	
			width: 42%;
			max-width: 150px;
			height: auto;
		}  	
	}

	/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 800px) {
			
		.gallery {
			width: 100%;
			max-width: 150px;
			height: auto;
			}	
			
		.imagerightwide {
			width: 100%;
			max-width: max-content;
			height: auto;
			}	

		.imageleftwide {
			width: 100%;
			max-width: max-content;
			height: auto;
			}	

		.imagerightnarrow {
			width: 100%;
			max-width: max-content;
			height: auto;
			}	
			
		.imageleftnarrow {
			width: 100%;
			max-width: max-content;
			height: auto;
			}	

	}
				
/* Display or hide */

	/* Responsive layout - when the screen is more than 800px wide */
	#smallScreen {
		display: none;
		}
		
	/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 800px) {
		#smallScreen {
			display: inline;
			}
		}