@charset "utf-8";
/* CSS Document */
  html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
	   
	  .Newslink {
		  font-size: 13px;
		  font-family: raleway, arial;
	  text-align: left;}
      /*font-weight: bold;
      
		  }*/
	  
    .navbar {
      z-index: 9999;
    }

    .BIGNAME {
      font-size: 40px;
      font-family: raleway, arial;
      font-weight: bold;
      
		color: white;
	text-shadow: 1px 1px 3px #000000;
		padding: 75px 25px 0 25px; /* top right bottom left */

    }

    .Water {
      background: rgba(255,255,255,0.2);
  border: 1px solid white;
  border-radius: 10px;
		max-width:380px;
      color: white;
      padding: 13px;
      font-size: 14px;
		line-height: 1.4;
	font-family: Geneva, Helvetica, Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", , sans-serif;
      flex: 1;
	position: relative;
		background: rgba(255,255,255,0.15);
  border: 1px solid white;
 min-height: 0;
  overflow: visible;
		font-weight: normal;

}
a:link,
  a:visited,
  a:active {
    color: #93d7f9;
  }
	  	  
	   a:hover {
      color: #3eb0dd;
    }

    
	  
	  .Banner {
  color: #FFFFFF;
		  background-color:black;
  padding: 20px;
  font-family:Verdana, raleway, arial;
		  font-size: 15px;
		  line-height: 1.2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*height: 100%;  Let it match the height of .Water */
  box-sizing: border-box;
		  text: inline;
}

    .TinyLinks {
      font-size: 8px;
      color: white;
		position: absolute;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
    }

    .main-content {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      margin-top: 90px;
      gap: 10px;
      padding-left: 80px;
      position: relative;
    }

    .SideSites {
      position: absolute;
      top: 35px;
      left: 15px;
      z-index: 1000;
    }

    .content-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    
.WaterBannerWrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 0;
  align-items: flex-start; /* ✅ Align both tops */
}
   .content-area {
  gap: 5px; /* instead of 20px */
}
	  
	  @media screen and (max-width: 768px) {
  .main-content {
    flex-direction: column;
    padding-left: 0;
  }

  .SideSites {
    position: static;
    margin-bottom: 10px;
  }
}
	   
@media screen and (max-width: 1070px) {
  .WaterBannerWrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  .Water {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    flex: none !important;
    box-sizing: border-box;
    margin-right: 40px !important;
    margin-bottom: 20px !important;
  }
  
  .Banner {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    flex: none !important;
    box-sizing: border-box;
    margin-right: 40px !important;
  }
  
  

@media screen and (max-width: 600px) {
  .Water,
  .Banner {
    width: 95% !important;
    margin-right: 5% !important;
    box-sizing: border-box;
	  top:10px;
  }
	.Water { font-size: 12px; } 
.Banner { font-size: 10px; }
	.BIGNAME {font-size: 30px;
	}
	 }

  
/* Ultra-small screens: ensure boxes fit at very narrow widths */
@media screen and (max-width: 360px) {
  .WaterBannerWrapper {
    padding: 0 5px !important;
    gap: 15px !important;
  }
  
 
  .Water { 
    width: 100% !important; 
    margin-right: 0 !important; 
    padding: 15px !important; 
    font-size: 12px !important;
  }
  
  .Banner { 
    width: 100% !important; 
    margin-right: 0 !important; 
    padding: 15px !important;
  }
  
	  
	  .WaterBannerWrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 5;
  align-items: flex-start; /* Ensures tops align */
}

.Water,
.Banner {
  margin: 0;              /* Remove default margins */
  padding: 20px;          /* Same padding so text lines up */
  box-sizing: border-box;
}
a:link,
  a:visited,
  a:active {
    color: #93d7f9;
  }
	  	  
	   a:hover {
      color: #3eb0dd;
    }
.TinyLinks {
      font-size: 8px;
      color: white;
		position: absolute;
      bottom: 20px;
      left: 20px;
      z-index: 1000;
    }

.Banner {
  color: #FFFFFF;
  background: rgba(255,255,255,0);
	/*border: 1px solid white;
  border-radius: 10px;*/
  color: white;
  font-family: Verdana, raleway, arial;
  font-size: 15px;
	line-height: 1.4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Start content at top */
  box-sizing: border-box;
  position: relative;
}
	
	 .page-header {
  margin-bottom: 20px; /* or more if needed */
}

.wrapper {
  margin-top: 0; /* remove previous negative offsets */
}