/***************************************
* Fonts from files used in website. 
*/

@font-face 
	{
	font-family: "mainFont";
	src: local("Raleway-Regular.ttf"), url(../www_fonts/Raleway-Regular.ttf) format("truetype");
	}

/******************************************************************************
* Here are the top level styles that 
* cover everything we do.
*
*
*/


/*
Here using the universal selector * we define every html block as having this 
style by default, unless something else later in this file overrides it.
Defining a sort of base style means we know where we are and don't get lumbered
with the browser's default styles.    
*/

*
	{
	/*First I like to define the layout, how and where a block will be displayed.*/

	/*display: block; is usually used for container elements, like <div>, <section>, 
	and <ul>. Also text “blocks” like <p> and <h1>, <h2> etc. Block level elements 
	do not sit inline. By default (without setting a width) they take up as much 
	of the line as they can.*/
	display: block;

 /*Static position means that the block will appear after the last block in the flow of the document*/ 
	position: static;

	/*Second any width and height*/

	/*Third I like to define the framing stuff. The units em and px are explained below*/
	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).*/

	/*I just happen to like this order of doing things*/
	}

	/*The numbers in padding: or margin: go TOP RIGHT BOTTOM LEFT, four numbers.
	  If the TOP=BOTTOM and RIGHT=LEFT then you can put just two numbers.
	  If the TOP=BOTTOM=RIGHT=LEFT then you can put just one number.
	*/

	/*The possible units of measure are;
		px = pixels
		pt = points 1/72 of an inch
		em = relative to the font size so 2em means twice the font size
		there are others. See https://www.w3schools.com/cssref/css_units.asp
		for the full list
		if you are putting 0 you don't need to put a unit of measure.
	*/


/*The head and script blocks should not be desplayed*/ 
head, script {display: none;}


/* This defines the style for the "body" of the html which is the main container of what we see.*/
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, Verdana, Geneva;
	font-weight: normal;
	font-style: normal;
	text-decoration: normal;
	/*font-size:1em;*/
	letter-spacing: 0em;
	font-size:1em;
	line-height: 1.5em;
	}



@media (min-resolution: 1.5dppx)  /*When the resolution increases Samsung A12 my phone*/
	{

	body
		{
		font-size:2em;
		line-height: 1.5em;
		}

	}

@media (min-resolution: 2dppx)  /*When the resolution increases*/
	{

	body
		{
		font-size:2em;
		line-height: 1.5em;
		}

	}

@media (min-resolution: 3dppx)  /*When the resolution increases Samsung A52S Chiara*/
	{

	body
		{
		font-size:2em;
		line-height: 1.5em;
		}

	}

@media (min-resolution: 4dppx)  /*When the resolution increases*/
	{

	body
		{
	font-style: italic;
		font-size:2em;
		line-height: 1.5em;
		}

	}


/***************************************
* Below are all the 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;}




/***************************************
* 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;}




/***************************************
* 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);
	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);
	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);
	text-decoration: underline;
	}




/***************************************
* Below are all the list styles
*/


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

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

	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);*/
	}


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

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

	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;}




/***************************************
* Below are all the 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*/
	}






/******************************************************************************
* Footer and Header
*
*/


#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: 'mainFont', sans-serif;*/
	font-weight: normal;
	font-style: normal;
	font-size: calc(10px + 5vw); 
	font-stretch: 100%;
	letter-spacing: 0.3em;
	line-height: 1em;
	font-family:font-family:Verdana, Geneva, sans-serif;
	}




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




#PageBox 
	{
  display: flex; /*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: 2em 8em 2em 8em;
	}
/*
.item1 {
  background: #ce8888;
  flex-basis: 100px;
}

.item2 {
  background: #ce8888;
  flex-basis: 100px;
}
*/

.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*/
	}

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

#FooterBox ul {list-style-type: none;}
#FooterBox li {color: var(--main-foreground);background: var(--main-background);}

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




/********PathBox***********/

#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;}




/******************************************************************************
* Grids
*
*/




.LeftBox	{grid-area: left;}
.MainBox	{grid-area: main;}
.RightBox	{grid-area: right;}

.LeftBox, .MainBox, .RightBox 
	{ 
	padding: 0px 20px 0px 20px;
	margin: 40px 80px 40px 80px;
	color: var(--foreground-text);
	background: var(--background-text);
	}




.grid-container 
	{
  display: grid;
	/*grid-template-columns: 25% 25% 25% 25%;*/
  grid-template-areas:
		'panel1 panel2 panel3 panel4'
		'panel5 panel6 panel7 panel8';
  grid-gap: 50px;
  background-color: var(--background-grid-container);
	padding: 50px 95px;
	border: 0px; border-color:green;
	margin: 0px; 
	}
/*
.grid-container > div {
 background-color: rgba(255, 255, 255, 1);
  *text-align: left;*
}*/

.PanelBox1, .PanelBox2, .PanelBox3, .PanelBox4, .PanelBox5, .PanelBox6, .PanelBox7, .PanelBox8 
	{ 
	padding: 0px 20px 20px 20px;
	border:0px solid; border-color: green;
	margin: 0px;
	color: var(--foreground-text);
	background: var(--background-text);
	}

.PanelBox1 {grid-area: panel1;}
.PanelBox2 {grid-area: panel2;}
.PanelBox3 {grid-area: panel3;}
.PanelBox4 {grid-area: panel4;}
.PanelBox5 {grid-area: panel5;}
.PanelBox6 {grid-area: panel6;}
.PanelBox7 {grid-area: panel7;}
.PanelBox8 {grid-area: panel8;}




iframe 
	{
	padding: 0.8em;
	margin: 0.8em;
	height: 750px;
	width: 90%;
	background: black;
	}



@media all and (max-width: 990px) /*When the width is not over 990px*/
	{
	#PageBox {margin: 0.5em 4em 0.5em 4em;}
	#PathBox {margin: 0 4em 0 4em;}
	}