/******************************************************************************
* Default styles
*/


@font-face /*Fonts from files provided by the website.*/
	{
	font-family: "headerFont";
	src: local("Raleway-Regular.ttf"), url(../www_fonts/Raleway-Regular.ttf) format("truetype");
	src: local("Quicksand-Regular.ttf"), url(fonts/Quicksand-Regular.ttf) format("truetype");
	}




*
	{
	/*display: block; These were removed as some elements shouldn't be block or static
	position: static;*/
	padding: 0;              /*Defines the space to be left before the border (it will be filled with background color).*/
	border: 0px solid green; /*Defines the border thickness style and color. Changing 0px to 2px let's you see where all the borders are*/
	border-radius: 0px;      /*Makes rounded corners if you want them*/
	margin: 0;               /*Defines the margin to be left outside the border (it is always transparent).*/
	}


span {display: inline;}

head, script {display: none;}


body
	{
	/*Fourth I like to define the color stuff*/
	color: var(--foreground-text);
	background: var(--background-text);

	/*Fifth I like to define the font stuff*/
	/*font-family: 'mainFont', sans-serif;*/
	/*font-family: "mainFont" , sans-serif;*/
	font-family: sans-serif;
	font-weight: normal;
	font-style: normal;
	text-decoration: normal;
	/*font-size: calc(10px + 0.5vw);*/
	font-size:1rem;
	letter-spacing: 0em;
	line-height: 1.8em;
	}







@media (min-resolution: 1.5dppx)  /*When the resolution increases Samsung A12 my phone*/
	{ body {font-size:3rem;}}

@media (min-resolution: 1.5dppx) and  (min-width: 1024px)  /*When the resolution increases Samsung A12 my phone*/
	{ body {font-size:2rem;}}

@media (min-resolution: 2dppx)  /*When the resolution increases*/
	{ body {font-size:2rem;} }

@media (min-resolution: 3dppx)  /*When the resolution increases Samsung A52S Chiara*/
	{ body {font-size:2rem;} }/*2*/

@media (min-resolution: 4dppx)  /*When the resolution increases*/
	{ body {font-size:1rem;} }/*1*/


@media 	(min-resolution: 0.9dppx) and  (max-width: 682px),
		(min-resolution: 1.4dppx) and  (max-width: 1024px),
		(min-resolution: 1.9dppx) and  (max-width: 1365px),
		(min-resolution: 2.9dppx) and  (max-width: 2048px),
		(min-resolution: 3.9dppx) and  (max-width: 2730px)
	{
	/* Things to think about adjusting
	font-size:16px;
	line-height: 1.5;
	padding:10px;
	border-width: 1px;
	background-image: url('icon.png');
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	svg { width: 100px; height: 100px; }
	text-shadow: 1px 1px 2px #000;
	*/

	.TextBoxhhhhh
		{
		margin: 2em;
		font-size:2em;
		}
	}







/**************************************
* Default: Inline text styles
*/


/*display: inline; puts the element in the flow of the document*/

i /*Generally used inside paragraphs, this defines anything between <i> and </i> as being in italic*/
	{display: inline; font-style: italic; color:inherit; background: inherit;}

b  /*Generally used inside paragraphs, this defines anything between <b> and </b> as being in bold*/
	{display: inline; font-weight: bold; color:inherit; background: inherit;}

u  /*Generally used inside paragraphs, this defines anything between <u> and </u> as being underlined*/
	{display: inline; text-decoration: underline; color:inherit; background: inherit;}


<add> {text-decoration: underline; color:green; background: inherit;}


<del> {text-decoration: underline; color:red; background: inherit;} /*use display: none;*/














obd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
obr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}

adjd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
adjr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}

vrbd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
vrbr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}

vrd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
vrr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
dtvd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
dtvr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}

itvd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
itvr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}

ftvd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
ftvr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}


ptd {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
ptr {font-weight: bold;color:red;text-transform: capitalize;font-size:200%}
























def {font-weight: bold;font-style: capitalize;}

red {font-weight: bold;color:red;} /*This is used for emphasis and thinks you must pay attention to*/
fld {color:magenta;} /*The name of a field that may be editable by you*/
mnu {color:#f0f;} /*A menu name or menu choice*/
key {color:#808;} /*A key on the keyboard or/and special character*/

noun {color:#840;font-style: italic;} /*A reference to that important noun*/
adject {color:#048;font-style: italic;} /*A reference to that important adjective*/
verb {color:#804;font-style: italic;} /*A reference to that important verb*/


pagevar {color:#f00;font-style: italic;} /*A reference to that important variable*/
depvar {color:#00f;font-style: italic;} /*A reference to a dependent task variable*/
indvar {color:#080;font-style: italic;} /*A reference to an independent task variable*/
mixvar {color:#08f;font-style: italic;} /*A reference to a flexible task variable*/


scarea {color:#88e;font-style: italic;} /*A reference to a part of the Time CHART page*/

ida {color:#00f;font-style: italic;} /*An important idea*/














/**************************************
* Default: HTML link styles
*/


/*These are the basic link style*/
a
	{
	display: inline; /*This block type will be wrapped as part of the line (of text and stuff) they appear in.*/
	color: var(--foreground-text-link);
	background: none;
	text-decoration: none;
	}


/*Once a page has been visited the basic link style will be overlaid with this style*/
a:visited
	{
	color: var(--foreground-text-link-visited);
	background: none;
	text-decoration: underline;
	}


/*When the mouse hovers over a link the basic link style will be overlaid with this style*/
a:hover
	{
	color: var(--foreground-text-link-hover);
	background: none;
	text-decoration: underline;
	}



/**************************************
* Default: Tool-Tip styles
*/

.tooltip
	{
	position: relative;
	cursor: pointer;
 	display: inline;/*inline-block;  Needed so it can contain absolutely-positioned children */
/*z-index: 0;/ *color: #3498db;*/
	}

.tooltip .tooltiptext
	{
display: block;
	overflow: hidden;
 	/*overflow-x: hidden;*/
   position: absolute;
	left:-10000px; /*Anything smaler and it jumps in from the left on phones*/
	visibility: hidden;
	width:0px;
	color: var(--main-foreground);
	background: #444444;
	text-align: left;
	padding: 14px 18px;
	border-radius: 12px;

    z-index: 999;      /* stack on top */
	opacity: 0;
	/*transition: opacity 0.3s;*/
	
	/*font-size: 1.2em;*/
	height: 10px; /*Trick to fix unneeded space appearing below footer due to big tooltips. See below*/
	line-height: 1.4;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	}

.tooltip:focus .tooltiptext,
.tooltip:active .tooltiptext,
.tooltip:hover .tooltiptext
	{
	/*overflow-x: hidden;*/
	position: absolute;
	width: var(--tooltip-width);
    transform: translate(var(--tooltip-shiftx),var(--tooltip-shifty));
   	/*transform: translateX(var(--tooltip-shiftx));*/
	visibility: visible;
	overflow: hidden;
	opacity: 1;
	z-index: 999; /* Ensures it sits on top */
	transition: opacity 1s;
	/*font-size:0.8em;
	font-style: normal;*/
      /* Use a custom property for flipping */
	height: auto;  /*Trick to fix unneeded space appearing below footer due to big tooltips. See above*/
	}


brh {
display: block;
margin-top: 0.5em;
 }




/**************************************
* Default: Heading styles
*/


/*h1, h2, h3, h4, h5, h6, .heading{font-family:Georgia, "Times New Roman", Times, serif;font-weight:200; color: var(--main-background);}*/
h1, h2, h3, h4, h5, h6 {font-weight: bold; color: var(--foreground-text-heading);line-height:normal; font-weight:normal;}
h1 {margin:1em 0 0.5em 0; font-size:2em;text-transform: uppercase;letter-spacing: 0.1em;}
h2 {margin:1em 0 0.5em 0; font-size:1.8em;letter-spacing: 0.1em;}
h3 {margin:1em 0 0.5em 0; font-size:1.6em;}
h4 {margin:1em 0 0.5em 0; font-size:1.4em;}
h5 {margin:1em 0 0.5em 0; font-size:1.2em;}
h6 {margin:0 0 12px 0; font-size:1em;}


/*The style for paragraphs <p>blah blah blah</p> in the html file*/
p {margin: 0.5em 0 0.5em 0;background: none;}
p.clear {clear: both;}

.clear-both {
 clear: both;
  }

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

iframe
	{
	margin: 0em 4em 0em 4em;background: none;
	height: calc(60vw - 2em);
	width: calc(100% - 8em);
	background: black;
	}


/***************************************
* Default: List styles
*/


/*The style for unordered lists*/
ul
	{
	margin: 0.5em 0 0.5em 4em;

	color: var(--foreground-text);
	background: none;

	letter-spacing: 0.1em;
	line-height: 1.5em;

	/*A selection of bullets are possible*/
	list-style-type: disc;
	/*list-style-type: circle;*/
	/*list-style-type: square;*/
	/*list-style-image: url(image.png);*/
	}

ul.left li { margin-left:1em; }
ul.right li { margin-left:calc(50% + 5em); }


/*The style for ordered lists*/
ol
	{
	margin: 0.5em 0 0.5em 4em;

	color: var(--foreground-text);
	background: none;

	letter-spacing: 0.1em;
	line-height: 1.5em;

	/*A selection of number/letter styles are possible*/
	/*list-style-type: upper-alpha;*/
	/*list-style-type: lower-alpha;*/
	/*list-style-type: upper-roman;*/
	/*list-style-type: lower-roman;*/
	list-style-type: arabic-numbers;
	}


/*The element generates a block box for the content and a separate list-item inline box.TODO*/
li {display: list-item;background: none;}




/***************************************
* Default: Image styles
*/
/*
img
{
	padding: 0em ;
	border: 4px solid black;
	margin: 0;
}
*/

div.thebanner
{
	width: 100%;
	overflow: clip;
}



img.thebanner  /*This defines the image style for images of class="thebanner"*/
	{
	display: block; /*ensures it is displayed without white-space between it and the next thing*/
	position: relative; /*This element’s position remains relative to the flow of the document*/
	padding: 0em ;
	border: 0px solid black;
	margin: 0;
	/*border-bottom: 4em solid var(--main-background); */      /*Defines the border bottom only*/
	left: calc( 50% - 1440px);
	}

p img /*This defines the image style for images <img  > that are contained inside paragraphs <p> </p>*/
	{
	float: left;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px solid black;       /*Defines the border*/
	margin: 1em 1.5em 0.5em 0;     /*Defines the space to be left before the edge*/
	width: 200px;                  /*The image will be scaled to a width of 200px*/
	}




/* Bottom left text NEW
.bottom-left {position: absolute;bottom: 8px;left: 16px;}


* Bottom right text NEW*
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
*/





/******************************************************************************
* Boxes: Header, Page (Path, LeftMenu and Text) and Footer
*
* The Page Box sits between the Header and Footer Box
* The Text Box sits inside the Page Box and can be adjusted
* so the PageBox can contain;
     1) a Path Box if required
*    2) a Left Menu Box if required
*
*/


#HeaderBox
	{
	padding: 1.2em 1.2em 1.5em 1.4em;  /*Defines the space to be left around the text, before the border*/

	color: var(--main-foreground);
	background: var(--main-background);
	/*Below is used in place of a background color and forms the HeaderBox banner image*/
	background-image: url("images/banner2.jpg");
	background-repeat:no-repeat; background-position: center;
	background-size: cover;

	font-family: 'headerFont', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: calc(10px + 5vw);
	font-stretch: 100%;
	letter-spacing: 0.3em;
	line-height: 1.7em;
	text-shadow: .05em .05em .05em #000;
	}


#HeaderBox a
	{
	color: var(--main-foreground);
	background: transparent;
	font-stretch: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	font-family:inherit;
	text-decoration: none;
	}






#HeaderBox
	{
	font-weight: normal;
	font-style: normal;
	}







@media all and (max-width: 1536px) /*When the width is over 1536px*/
	{
	/*Narrow padding so as to better use the smaller space*/
	#HeaderBox {padding: 0.9em 0.9em 0.9em 1.4em;}
	}


#PageBox
	{
	display: block; /*A flex container expands items to fill available free space or shrinks them to prevent line overflow.*/
  	position: relative; /*Essential line for z-index to work!!*/
	z-index: 970; /*Determines what is on top of what*/
	margin: 0em;
	}



#PathBox
	{
	margin: 0 8em 0 8em; padding: 2em 0 1em 0;
	z-index: 970; /*Determines what is on top of what*/
	border-bottom:1px solid;
	border-bottom-color: var(--foreground-text);
	border-bottom-color: #ccc;   /*LOOK*/
	text-align:right;
	color: var(--foreground-text);
	background: var(--background-text);
	}
#PathBox ul{margin:0; padding:0; list-style:none;}
#PathBox li{display:inline-block;}
#PathBox li a{display:block; position:relative; margin:0 0 0 0.5em; padding:0; font-size:0.8em;color: var(--foreground-text);}
#PathBox li a::after{top:3px; right:0; content:" \00bb ";}
#PathBox li:last-child a{margin:0; padding:0;}
#PathBox li:last-child a::after{display:none;}




/*The LeftMenu Box appears when the leftmenu.css is included
it MUST be after this css file*/




.TextBox
	{
	position: relative; /*Essential line for z-index to work!!*/
	margin: 0em 0em 0em 0em;
	color: var(--foreground-text);
	background: var(--background-text);
	width: auto;
	z-index: 970; /*Determines what is on top of what*/
	}


#FooterBox
	{
	position: relative; /*Essential line for z-index to work!!*/
	padding: 50px;
	margin: 0px;
	color: var(--main-foreground);
	background: var(--main-background);
	z-index: 990; /*Determines what is on top of what*/
width:calc(100%-8em);
	}

#FooterBox h2 { margin:0; }




#FooterBox p {color: var(--main-foreground);background: var(--main-background);padding 0;}

#FooterBox ul {list-style-type: none;padding: 0;margin: 1em 0 2em 0;}
#FooterBox li {color: #444;background: var(--main-background);margin 0;padding: 0;}







#FooterBox img
	{
	display: inline;
	margin: 5px 10px -5px 5px;
	color: var(--main-foreground);
	background: var(--main-background);
	}

#FooterBox
	{
	position: relative; /*Essential line for z-index to work!!*/
	padding: 6em;
	margin: 0px;
	color: var(--main-foreground);
	background: var(--main-background);
	z-index: 400; /*Determines what is on top of what*/
	}

#FooterBox div {display: inline-block; vertical-align:top; width: 18em;background: var(--main-background);}

#FooterBox h2 {padding: 0;margin: 0;}

#FooterBox li {color: var(--main-foreground);background: var(--main-background);padding 0;}


@media 	(min-resolution: 0.9dppx) and  (max-width: 682px),
		(min-resolution: 1.4dppx) and  (max-width: 1024px),
		(min-resolution: 1.9dppx) and  (max-width: 1365px),
		(min-resolution: 2.9dppx) and  (max-width: 2048px),
		(min-resolution: 3.9dppx) and  (max-width: 2730px)
	{
	#FooterBox {padding: 2em;}
	#FooterBox ul {list-style-type: none;padding: 0;margin: 1em 0 1em 0;width:calc(100% - 2em);}
	#FooterBox li {color: #fff;background: var(--main-background);margin 0;padding: 0;width:calc(100% - 2em);}
	#FooterBox h2 {margin: 0 0 0 0; }
	}






/*
  table
	{
    margin: 3em 6em 3em 6em;
    background: white;
    border: 6px solid #666;
	}
*/
  table
	{
    border-collapse: collapse;
    width: calc(100% - 12em);
    margin: 3em 6em 3em 6em;
    background: white;
    border: 6px solid #666;
	}

  th, td
	{
    border: 1px solid #666;
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    text-align: left;
    font-@media 	(max-resolution: 1dppx) and  (max-width: 512px),
			(max-resolution: 1.5dppx) and  (max-width: 1024px),
			(max-resolution: 2dppx) and  (max-width: 1024px),
			(max-resolution: 3dppx) and  (max-width: 1536px),
			(max-resolution: 4dppx) and  (max-width: 2048px)
size: 0.95rem;
	}

  th
	{
    background-color: #004080;
    color: white;
	}

  tr
	{
    background: var(--main-background);
color: var(--main-foreground)
  	}
/*
  tr:nth-child(even)
	{
    background-color: var(--main-background);
  	}

  tr:hover
	{
    background-color: #dce8ff;
	}
*/
tr.top {border-top: 6px solid #666;}

  .check { color: green; font-weight: bold; }
  .warn { color: #b26900; font-weight: bold; }
  .cross { color: red; font-weight: bold; }