@charset "utf-8";

/* CSS Document */

a:link, a:visited

		{
		text-decoration: none;
		color: #000080;
		font-family: "times new roman";
		font-size: 18px;
		text-align: center;
		}

a.x:hover

		{
		text-decoration: none;
		font-family: "times new roman";
		font-size: 18px;
		color: red;
		background-color: #ddd;
		text-align: center;
		}

h1.heading 

		{
		font-family: Times New Roman, Times, serif;
	   	font-size: large;
		text-decoration: none;
		color: #000080;
		text-align: center;
		}		

p.weathercharts-org

		{
		font-family: "courier new";
		font-size: 24px;
		color: #000;
		text-decoration: none;
		text-align: center;
		}

p.weathercharts-org-1

		{
		font-family: "courier new";
		font-size: 24px;
		font-weight: bold;
		color: #000;
		text-decoration: none;
		text-align: center;
		}		

p.weathercharts-org-2

		{
		font-family: "times new roman";
		font-size: 20px;
		color: red;
		text-decoration: none;
		text-align: center;
		}

img.black-weathercharts-org {
  border: 1px solid #000;
  display: block;
  margin: 0 auto;
}

table.weathercharts-org

		{
		margin-left: auto;
		margin-right: auto;
		width: 85%;
		background: #edffff;
		border-collapse: collapse; 
		border-width: 1px;
		border-color: #227;
		border-style: solid;
		}

table td

		{
		border: 1px solid black;
 		}

table.weathercharts-org-two

		{
		margin-left: auto;
		margin-right: auto;
		width: 75%;
		background: #edffff;
		border-collapse: collapse;
		border: 3px solid #202070;
		padding-left: 5em;
		border-width: 1px;
		}

tr.weathercharts-org

		{
		height: 30px;
		}  

td.weathercharts-org  

		{
		border-width: 1px;
		border-style: solid;
		border-color: blue;
		text-align: center;
		}

body

		{
		background-color: #ffffe0;
		text-align: center;
		}

.style1

		{
		font-family: "Times New Roman", Times, serif;
		font-size: xx-small;
		color: black;
		}

.style3

		{
		font-family: "Times New Roman", Times, serif;
		font-size: large;
		color: #000080;
		}

.font_size

		{
		font-size: 18px;
		}

.weathercharts-org tr td div

		{
		font-size: 24px;
		}

.centre

		{
		text-align: center;
		}

.alert

		{
		font-size: 18px;
		}

body,td,th

		{
		font-family: "Times New Roman", Times, serif; font-size: 14px; color: #c00;
		}

.textsize

		{
		font-size: 18px;
		color: #006;
		}

.text_color_dark_blue

		{
		color: #006;
		}

	div.border_1 {
  border: 2px solid #ff8e80;
  width: 75%;
  margin: 0 auto;
  background-color: #ffd;
  border-radius: 10px;
}

a
		{
		text-decoration: none;
		font-size: 24px;
		color: #020; 
		}

body

		{
		background-color: #ffe;
		font-size: 18px;
		color: #eae;
		}

p.round {
  border: 2px solid #f98;
  padding: 10px;
  width: 57%;
  margin: 0 auto;
  text-align: center;
  background-color: #ffd;
  color: #036;
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
}

/* Target the images inside your p.round paragraph */
p.round a img {
    transition: transform 0.3s ease;
    display: inline-block; /* Ensures the transform property applies correctly to inline images */
}

/* Scale up the image when its parent link is hovered */
p.round a:hover img {
    transform: scale(1.15); /* Zooms the icon to 115% */
}

p.round_two {
  border: 2px solid #ff8e80;
  padding: 10px;
  width: 75%;
  margin: 0 auto;
  text-align: center;
  background-color: #ffd;
  color: #036;
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
}

p.round_ukmet {
    border: 2px solid #ff8e80;
    padding: 10px;
    width: 60%;
    border-radius: 10px;
    margin: 0 auto;
    text-align: center;
    background-color: #ffd;
    color: #036;
    font-family: "Courier New", monospace;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}

img.round_border {
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #00f;
    background-color: #ffd;
    display: block;
    margin: 0 auto;
}

.center_boxes_vt {
    display: flex;
    flex-wrap: wrap;
    /*gap: 10px; */
}

.box_vt {
    width: 9%;
    padding: 5px;
    text-align: center;
    background: #edffff;
    border: 1px solid #227;
    border-radius: 5px;
}

div.center_boxes_2, div.center_boxes_vt

		{
		width: 90%;	
		margin-left: auto;
		/*margin-right: auto;*/

		}

hr.new {
    height: 2px;
	width: 95%;
	margin: auto;
    color: #d0d0d0;
    background-color: #d0d0d0;
    border: none;
	   }


/* --- Single Chart Viewer & Zero-Jumping Layout Controls --- */

#chart-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Hide all chart slides by default */
.chart-slide {
  display: none;
}

/* Default state: Show T+0 chart on initial page load when no #hash is present */
#t0 {
  display: block;
}

/* When ANY chart slide ID is targeted in the URL, hide T+0 (unless T+0 itself is targeted) */
#chart-stage:has(.chart-slide:target) #t0 {
  display: none;
}

/* Show whichever slide matches the current anchor target */
.chart-slide:target {
  display: block !important;
}