/************************************************** Sceens up to 1200px width. Used area of 888px. ********************/
@media screen and (max-width: 1200px) {


  #frameset {
	  width: 888px; 
  }


  #content {
	  width: 728px; 
  }


  #headerbackground {
	  width: 728px; 
  }


  #centerheaderwrapper {
	  margin: 31px 0px 0px 0px; 
  }


  #menubar {
	  width: 188px; 
  }


  .menubox {
	  width: 188px; 
  }


  .bmenu li a {
	  min-width: 120px; 
  }


  #pagecontent {
	  width: 654px; /* ? Was 688 */
    font-size:14px;
  }


  #footer {
	  width: 728px; 
	  font-size: 14px;
	  line-height: 28px;
  }
  #footer a:link {
	  font-size: 14px;
  }
  #footer a:visited {
	  font-size: 14px;
  }
  #footer a:hover {
	  font-size: 14px;
  }


	#adbannermobile {
		display: block;
	}

	
	#adbanner {
		width: 100%;
    display: none;
	}


  #adsingleskyscraper {
    left: 1200px; /* Safari bug fallback */
    left: calc((100% - 888px)/2 + 728px); /*fixed*/
	  margin-left: 0px; 
  }


  #indexletter { 
    font-size:16px;
  }
}


/************************************************** Sceens up to 920px width. Used area of 814px. ********************/
@media screen and (max-width: 920px) {


	html body {
		background: #ffffff;
	}


	#frameset {
		width: 814px;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	
	#content {
		width: 654px; 
	}


	#headerbackground {
		width: 654px;
	}

	
	#headertext {
		display: none;
	}

	
	#headertextmobile {
		display: inline;
	}

  
  #bikezmenu {  /* ************************** Responsive main menu *** */
	  padding: 0; 
    height: 100%;
  }


	#menubar {
		display: none;
	}


	.bmenu ul {     /* Make dropdown links appear inline */
		position: static;
		display: none;
	}

	
	.bmenu li {  /* Optional vertical spacing */
		margin-bottom: 0px;
	}

	
	.bmenu ul li, li a { /* Make all menu links full width */
		width: 100%;
	}

	
	.show-menu {  /* Display 'show menu' link */
		display:block;
	}


  .headertable {
	  margin-top:0px;
	  margin-bottom:16px;
  }

	
	#pagecontent {
    width: 654px;
	  padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    border-top: 0px;
	}


	#footer {
		width: 654px;
	}


  .msglist li {
    margin: 16px 0;
  }
	
}


/************************************************** Sceens up to 920px width. Used area of 654px. No skyscraper. ********************/
@media screen and (max-width : 888px){


  #frameset {
	  width: 654px; 
  }


  #adskyscraper {
	  display: none; 
  }
}


/************************************************** Sceens up to 676px width. Used area of 556px + 20px scrollbar = 576px. ****************/
@media screen and (max-width: 676px) {

	
  #frameset {
	  width: 556px; 
    margin-top: 0px;
  }


	#content {
		width: 556px; 
	}

	
	#headerbackground { 
		width: 556px;
    margin-top: -20px; /* Remove backgound picture top */
	}

	
	#headertext {
		display: none;
	}

	
	#headertextmobile {
    position: relative;
    width: 120px;
    height: 20px;
    margin-top:10px;
	  border: 0;
    padding: 0;
    text-align: center;
    line-height: 12px;
   	font-size: 8px;
	}


	#menubar {
		display: none;
	}


  .headertable {
	  margin-top:0px;
	  margin-bottom:16px;
  }

	
	#pagecontent {
    width: 556px;
	}

	
	#footer {
		width: 556px;
    font-size: 11px;
	}
  #footer a:link {
	  font-size: 11px;
  }
  #footer a:visited {
	  font-size: 11px;
  }
  #footer a:hover {
	  font-size: 11px;
  }


  #indexletter { 
    font-size:14px;
  }


  .ingress-left-box {
    width: 250px;
    font-size: 14px;
  }
}


/************************************************** Sceens up to 576px width. Used area of 556px + 20px scroll bar = 576 px ********************/
@media screen and (max-width : 576px){

  #frameset {
	  margin-right: 0;
	  margin-left: 0;
  }

  .ingress-container { /* Ingress text to the left and ad to the right for large screens */
    grid-template-columns: 1fr; 
    gap: 0px;
    height: 100%;
    padding-bottom:20px;
  }
  .ingress-left-box {
    height: auto;
    width: 100%;
  }
  .ingress-right-box {
    display:none;
  }


  /* For future exensions - no narrow sidebars available */

}
