@charset "utf-8";
/* 
-  CSS 1 was the original standard for cascading style sheets,
-   CSS 2.1 was the replacement standard  (bearing that designation as CSS 2 was never properly defined),
-    CSS 3 is an update of CSS 2.1 containing widely adopted features that are evolving as a proposed standard, 
-   be aware that individual proposed and more widely agreed features are sometimes described as CSS 4 to show they have been updated since CSS 2.1,
    they are available for web developers and for browser implementation, but might not yet be implemented by all modern browsers.
*/
/*----------------------------------------------------------------------------------------------------------*/
/* HIERACHIAL  These relate to standard HTML tags and at each level styles from higher levels are inherited */

aside	{
	float: right;
	clear: right;
	width: 45%;
 	border: 2px solid /* lime */ #00ff00;
	background-color: /* lemon chiffon */ #fffacd;
	vertical-align: top;
  	z-index: 25;
}
button	{
	border: 3px solid red;
	border-radius: 5px;
    	box-shadow: 10px 7px 2px 1px #ff6666,-4px -2px 1px 3px #ffff99 inset;
	text-decoration-line: underline;  /* before Firefox 36 - Jan 2015 - property name was text-decoration */
  	text-decoration-color: red; 
	/*  CLOCKWISE top, right, bottom and left */
	margin: 8px 7px 5px 5px;
	font-size: 125%;
}
button::-moz-focus-inner {
	border: 2px dotted aqua;
}
caption	{
	font-size: 5em;
	background-color: yellow;
}
details{
	border: 2px solid grey;
}
footer  {
	width: auto;
	font-size: 90%;
  	z-index: 25;
	float: right;
	display: block;
}
footer p 	{
	float: left;
	width: auto;
	/*  CLOCKWISE top, right, bottom and left */
	padding: 10px  0 10px 0;
	font-size: 80%;
}
/* Always define in this order:  link, visited,  focus, hover, active */
footer a:focus, footer p a:hover, footer a:active 	{text-decoration-line: overline underline;}

form{
	text-align: left;	
	background-color: /* lemon chiffon */  rgba(255,251,205,0.7);
	margin: 3em  0.2em 0.2em 0.5em;
	 /*  CLOCKWISE top, right, bottom and left padding */	
	border-width: 3px;
	border-radius: 8px; /* NOT IE8 and below */
	border-color: blue;
	border-style: solid;
	width: 100%;
}
h1{
	margin-bottom: 0.5em;
	left: 2.8em;
	font-size: 200%;
	font-weight: bold;
	font-family: Rockwell, "Times New Roman", Georgia, Serif;
	color: /* rebeccapurple */ #663399; /* CSS4 colour in memory of cancer victim */
	clear: both;
	display: block;
}
h2 {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	font-size: 150%;
	font-weight: bold;
	font-family: Rockwell, "Times New Roman", Georgia, Serif;
	 /* See colour properties in weather00.css or  weather01.css or  weather11.css or weather2.css */
	clear: both;
	display: block;
}
h3 {
	font-size: 125%;
	font-style: italic;
	font-family: Rockwell, "Times New Roman", Georgia, Serif;
}
img {
	margin-left: 5px; 
	margin-right: 5px; 
	vertical-align: middle;
}
/*  LVHA-order: :link — :visited — :hover — :active */
input{
	caret-color: red  /*colour of cursor indicating input position*/
}
input:optional{  /* no 'required' property */
	border: 2px dashed green;	
}
input:in-range{ /* 'min' and 'max' properties specified, input is between these */
	border: 2px solid green;
}
input:out-of-range{ /* 'min' and 'max' properties specified, input is not between these */
	background: red;
	border: 2px solid pink;
}
input:focus{ /* input box that is currently selected */
	font-size: 150%;
	background: #5ff;
	border: 3px dashed cyan;
}
input:invalid{ /* does not match specified pattern */
	border: 4px solid red;
}
input:placeholder-shown{ /* attributes that affect how a place-holder appears in an input box as distinct to actual input */
	border-color: blue;
	font-size: 100%;
	font-style: italic;
}
input:valid{  /* does match specified pattern */
	border: 2px dotted green;
}
/* - Not understood by Firefox
input:read-only{   ! input box that has 'read only' set or for some other reason cannot be edited - e.g. only one allowed input 
	background: grey;
	border: 2px solid cyan;
}
*/
label {
	text-align: right;
}
li {
	text-align: left;
	list-style-position: inside;
	margin-left: 1.5em; /* IE uses margin to control indent */
	padding-left: 1.5em; /* Modern browsers use padding to control indent, does not work well with list-style-position */
	margin-bottom: 0.5em; /* spacing between list items */
}
li ol {
	display: block;
	list-style-type: upper-roman;  /* replaces use of type attribute in 'ol' element, used for list within list*/
}
ol {
	display: block;
	list-style-type: decimal;
}
ol#roman {
	display: block;
	list-style-type: lower-roman;  /* replaces use of type attribute in 'ol' element, used for list within list*/
}
optgroup {
	font-size: 60%;
	font-style: italic;
	color: red; /* text colour for labels in options */
}
option {
	 color:blue;
	 background-color:yellow;
}
option:default, option:checked {
	color: black;
	 background-color:cyan;
}
summary{
	font-size: 125%;
	font-weight: bold;
	padding: .9em;
	width: 20%;
	letter-spacing: .1em;
	color: red;
	border: thick dashed red;
	border-radius: 10px;
}
table {
	width: auto; 
	max-width: 95%;
	margin: 3em  0.2em 0.2em 0.5em;
	 /*  CLOCKWISE top, right, bottom and left padding */
	padding-left: 0.2em; 
}
/*
.w3-table,.w3-table-all{
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
	display:table
}
.w3-table-all{
	border:1px solid #ccc
}
.w3-hoverable tbody tr:hover{
	background-color:#ccc
}
*/
td,th {
	font-family: "Times New Roman", Georgia, "Segoe Print", Serif;
	border-spacing: 2px;
	border-width: 2px  3px  3px 3px;
	empty-cells: hide;
}
th::first-letter{
	font-size: 150%;
	color: cyan;
	background-color: white;
}
table tr:nth-child(even) {
	background-color: #D9F0BB;
}
tr.horiz-line{
	border-bottom: 2px yellow dashed;
	
}
ul {
	list-style-type: disc;
	padding-left: 1.5em;
	line-height: 110%;
}
/*end HIERACHIAL*/

/*  ID Styles associated with a single specific block, unique to the page, precedence in-between CLASSES and HIERARCHIAL   */
#container {
	/*This is the area below the heading for the observations or summary;*/
	position: absolute;
	left: 0;
	width: 99%;	
	border-left: medium solid black;
	border-right: medium solid black;
	margin: 3em  0.2em 0.2em 0.5em;
	 /*  CLOCKWISE top, right, bottom and left padding */
	margin-right: auto;
	text-align: left;
	 /* See other properties in weather00.css or weather01.css or weather11.css or weather2.css */
}
#container > p, #container q, #container h2, #container h3 {
	display: block;
	clear: both;
}
#container:after, #content:after, #thermometer:after, #pressure:after	 {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#container a:active  {
	font-weight: bold;
	background-color: transparent;
	background-image: url(../../images/menu_arrow.gif);
	background-position: bottom center;
	background-repeat: no-repeat;
}
#container a:hover,  #container a:focus {
	background-color: blue;
	background-image: url(../../images/menu_arrow.gif);
	background-position: bottom center;
	background-repeat: no-repeat;
	text-decoration-line: underline overline;   /* before Firefox 36 - Jan 2015 - property name was text-decoration */
	 /* See other properties in weather0.css or  weather1.css or weather2.css */
}
#content {
	/* Used for positioning the main part of most pages */
	width: 80%;
	float: left;
	border-left: thick solid green;
	border-right: thick solid green;
	 /* See other properties in weather11.css  */
}
/* end ID */


/* CLASSES  These are local modifiers that take precedence over preset and inherited styles */

/* Text colouring classes */
.black		{color: black}
.blue		{color: blue}
.cyan		{color: cyan}
.gray, .grey 	{color: grey}
.green		{color: /* special green */ #339900}
.navy		{color: navy}
.red		{color: red}
.sienna		{color: sienna}
.yellow    	{color: yellow}
.turquoise 	{color: turquoise}
.pink		{color: /* pink */ #f3f}
.purple 	{color: /* rebeccapurple */ #663399; /* CSS4 colour in memory of cancer victim */}

.b_LH	 {
	text-align: center;	
	background-color: /* lemon chiffon */ #fffacd;
	border-radius: 15px;
}
.b_MID {
	text-align: center;	
	background-color: /* light-grey */ #ccc;
	border-radius: 15px;
}
.b_RH {
	text-align: center;	
	background-color: /* light lilac */ #fee5ee;
	border-radius: 15px;
}
.b_CYAN {	
	text-align: center;	
	background-color: cyan;
	border-radius: 15px;
	color: black;
}
.cday {
	text-align: left;
	color: yellow;
	background-color: grey;
}
.datahead {
        background-color: #3173B1;
        font-weight: bold;
        text-align: center;
}
.enlarged	{
	font-weight: bold;
	text-align: center;
	font-size: 175%;
}
.float_left	{
	display: inline;
	clear: right;
	margin: 0 auto;
	float: left;
}
.float_middle	{
	display: inline;
	clear: right;
	margin: 0 auto;
	width: 32%;
}
.float_right	{
	display: inline;
	float: right;
}
.half {
	width: 38%;
}
.highlight_row tbody tr:hover{
	background-color:#acf;
}
/*
.highlight_row tbody tr:hover th::first-letter{
	font-size: 150%;
	color: cyan;
	background-color: white;
}
*/
.horiz_line	{
	border-bottom: 2px dashed black;
}
.large	{
	font-weight: bold;
	text-align: center;
	font-size: 130%;
}
.fitted  {
	width: 20%;	
	padding-left: 2em;
	padding-right: 1em;
}
.reduced {
	font-size: 75%;
}
.responsive{
	overflow-x:auto
}
.third {
	width: 32%;
	float: left;
}
.quarter {
	width: 22%;
	float: left;
}

.scrollBox {
		border:2px solid blue;
		width:90%;
		height: 400px;
		overflow-y: scroll;
}
.titre	 {
	background-color:  #E0FFFF;
	border: medium dashed green;
	clear: left;
	padding-left: 1em;
	padding-right: 1em;
	color: black;
	text-align: center;
}
.w_frame {
	width: 98%;
	float: left;
	clear: both;
	display: block;
	margin-top: 1px;
	margin-left: 1em;
	padding: 1em;
	border: thick dashed green;
}
.wide { 
	clear: left;
	width: 90%;
}
/* end CLASSES */