html, body {  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}  
  
body {  
    display: flex;  
    flex-direction: column;  
    min-height: 100vh;  /* full viewport height */  
}

#MainAd {background-color:#fafafa;}

#SideBar{
	background-color:#1565C0;
	padding:20px;
	color:#fff;
	}


#TopAdBar {
	background-color: midnightblue;
	}
	
#TopAdBar a {color: white; font-size:1.2em; font-weight:600;}
#TopAdBar a:hover {color: #f5f5f5; text-decoration:none;}	
	

#BottomAdBar {
	background-color:#f5f5f5;
	}

#Footer {background-color:#1A237E;}

.btn {
	background-color: #FF6D00;
	border: solid 1px #EF6C00;
	color:#fff;
	text-shadow: 1px 1px #666666; 
	}
	
.btn:hover {
	background-color: #EF6C00;
	border: solid 2px #E65100;
	color:#fff;
	text-shadow: 1px 1px #444444; 
	}	
	
	
	
.ribbon {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,100% calc(100% - .25em),calc(100% - var(--r)) 50%,100% .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #FD6D00 padding-box; /* the color  */
  width: fit-content;
  text-shadow: 1px 1px #444444; 
}