/*shrink content to 620px but keep at least 10+10 pixel distance to the left and right border.
=> Screen must at least be 640px wide
hide wide menu and make everything responsive by using only percentage widths*/
@media (max-width: 920px)
{	
		
	body{	
		width:calc(100% - 20px);
		min-height: 500px;
		background-image: none;		
		margin: 0px 10px;
		min-width:20px;
		overflow-x: hidden;}
		
	header{
		width:620px;
		margin: 0 auto;}
	
	
	div#canvas{	
		margin:0 auto; 		
		box-shadow: none;
		width: 620px;}
		
	div#body {
		width: 100%;}
		
	h2, h3, h4, h5{
		width:80%;}
		
	h1 {
		font-size:24px; 
		margin-bottom:10px;}
	h2 {
		font-size:22px;}
	h3 {
		font-size:20px;}
	h4 {
		font-size:18px;}
	
	/*News*/
	iframe#news_iframe { 
		width: 90%; 
		margin: 0px 0px 0px 0px;}
	
	/*Start*/
	div#start_page{
		height:300px;}
	
	div#start_page div.frame{
		width:100%; 
		margin: 0px;
		padding-bottom:0px;}
	
	div#start_page div.next_incident{
		width:100%;}
	div#start_page div.next_incident div.thin_line {
		width:90%;}
	div#start_page div#news_feed{
		width:90%;} 
	div.news_list_entry div.right_column {
		width:70%;}
	div.news_list_entry div.right_column h2.headline {
		width:100%;}
	div.news_list_entry div.right_column div.location {
		width:90%;}
		
	div#intro{
		width:95%;
		font-size:16px; 
		margin:10px 0px 10px 0px; 
		line-height: 18px;}
	
	div#start_page div#quick_links{
		justify-content: space-between;  
		gap:0px } 
		
	img.max-wide{
		width:100%;}
	img.fitting-wide {
		width:90%;}
	img.half-wide {
		width:50%;}
	img.quarter-wide {
		width:20%; 
		min-width:130px;}

	iframe.max-wide{
		width:100%;}
	iframe.fitting-wide { 
		width:90%;}
		
	/*Header*/
	div#header {
		width:100%; 
		height: 170px;
		padding-top:80px;}
	
	div#banner{ 
		width: 620px;
		height:150px; 
		overflow:hidden; 
		background-color:#ffffff;
		margin: 0 auto;
	}
	
	div#banner div#bannerLoopBox{
		height: 150px; 
		margin-left:145px; 
		width:475px; 
	} 
	
	img#bannerLoop { 
		border-radius: 0px 15px 15px 0px;}		
	
	div#calligraphy{
		display:none;}
		
	div#signboard{
		border-radius: 15px 0px 0px 15px;
		width:145px; 
		height:150px; 
		background:#eaeaea;}

	div#signboard img#full_logo{ 
		display:block; 
		position: absolute; 
		width: 65px; 
		height:65px;
		margin:85px 0px 0px 49px;}
		
	div#signboard img#ar_logo{ 
		display:none; 
		margin:5px 0px 0px 55px; }
		
	div#signboard div.sign { 
		margin-top:10px; }
		
	div#signboard div.sign div:first-child  {
		font-size:18px;  
		line-height:20px; 
		margin-top:5px;}
	div#signboard div.sign div:nth-child(2) { 
		font-size:20px; 
		line-height:20px;
		margin-top:5px;}
	div#signboard div.sign div:nth-child(3) { 
		font-size:18px; 
		line-height:20px; 
		margin-top:5px; }
	div#signboard div.sign div:nth-child(4) { 
		display:none; 
		font-size:14px; 
		line-height:25px; 
		margin-top:5px; }
	
	
	div#content{
		width:100%; 
		min-height: 500px;
		float:none; 
		margin:0 auto;}
	
	
	div#content_main_column{
		width:100%; 
		float:none; 
		margin: 0 auto;}
	
	
	/*Footer*/
	div#footer{
		width: 620px; 
		margin: 0 auto;}	
	
	div#citation{ 
		display: none;
		width: 580px;
		max-width: 580px;
		border-radius: 8px; 
		margin-top: 5px;
		padding: 20px 20px 40px 20px;
		font-size:20px;}
	
	div#citation span.large{ 
		font-size:24px; 
		font-weight:bolder; 
	}
	div#citation span.author{ 
		float:right; 
		padding-left:20px; 
		font-size:16px;}
	
	div#footer div.legal_links { 
		text-align: center;
		background-color:#bd0000; 
		color:#ffffff;
		padding: 5px 0px;
		margin-top: 20px;
		border-radius: 8px;}
	
	div#footer div.legal_links a{ 		 
		color:#ffffff;}
	
	/*News*/
	div#old_events table{
		width:100%;}
	div#old_events table tr td:nth-of-type(1){
		width:53%;  
		word-break:break-word;}
	div#old_events table tr td:nth-of-type(2){
		width:15%;}
	div#old_events table tr td:nth-of-type(3){
		width:16%;}
	div#old_events table tr td:nth-of-type(4){
		width:16%;}
		
	div.rss_feed_text{
		display:none;}
	div#rss_feed{
		height:120px;}	
	
	div#start_page div.next_incident{ 
		margin-left:10px;}
	
	/*Gallery*/
	div.gallery_overview {
		width:100%;}
	div.gallery h2{ 
		width:95%;}
	
	div.clearer_two_column{ 
		width:0; 
		height:0; 
		clear:none; 
		display:none}
	div.clearer_one_column{ 
		width:0; 
		height:0; 
		clear:both; 
		display:block;}
	
	/*Design*/
	div#poem_left{
		display:none;}
	div#poem_right{
		display:none;}
	

}

/*shrink content further. Since the content is already shrinked to 620px, just use as much space as possible*/
@media (max-width: 640px)
{
	header{
		width:100%;}
		
	h1 {
		font-size:22px; 
		margin-bottom:10px; 
		line-height: 28px;}
	
	div#canvas {
		width: 100%;
	}
	
	div#header {
		width: 100%;
	}
	div#intro{
		font-size:14px; 
		margin:10px 0px 20px 0px; 
		line-height: 18px;}
	
	div#start_page div#quick_links div#quick_link_item{
		font-size:12px;}
	
	div#footer {
		width:100%;}
	div#citation{ 
		font-size:10px;
		width: calc(100% - 20px);
		max-width: 100%;
		padding:10px;
		margin:4px 0px;}
	div#citation span.large{  
		font-size:10px; 
		font-weight:bolder;}
	div#citation span.author{  
		font-size:10px;}
	
	div#banner{
		width: 100%;} 
		
	div#banner div#bannerLoopBox{
		width: calc(100% - 145px);} 	
		
	img#bannerLoop { 
		object-fit: cover;
		object-position: center;
		 }		
}