@charset "utf-8";

@font-face {
	font-family: 'BerlinSansFB';
	src: url('fonts/BerlinSansFB-DemiBold.ttf') format('truetype'),
		 url('fonts/BerlinSansFB-DemiBold.woff') format('woff');
	}
@font-face {	
	font-family: 'FranklinGothic';
	src: url('fonts/FranklinGothic-MediumCondensed.ttf') format('truetype'),
		 url('fonts/FranklinGothic-MediumCondensed.woff') format('woff');
	}
@font-face {	
	font-family: 'TimesNewNelson';
	src: url('fonts/TimesNewNelson-Regular.ttf') format('truetype'),
		 url('fonts/TimesNewNelson-Regular.woff') format('woff');
	}
@font-face {	
	font-family: 'Dosis';
	src: url('fonts/Dosis-Regular.ttf') format('truetype'),
		 url('fonts/Dosis-Regular.woff') format('woff');
	}
@font-face {	
	font-family: 'Eurostile';
	src: url('fonts/Eurostile-Condensed-Regular.ttf') format('truetype'),
		 url('fonts/Eurostile-Condensed-Regular.woff') format('woff');
	}


body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	/*background: #222222;*/
	
	/* Fallback background colour, used before images load or if they are unavailable */
	background: #39567c;

	/* IMPORTANT:
	   Map.jpg is no longer applied to the body.
	   The HTML now uses a dedicated fixed #mapBackground layer instead,
	   so JavaScript can move that layer at a slower scroll speed. */

	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColFixCtr #container {
	width: 830px; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	/*-moz-box-align: top;*/
	border-top: 0;
	border-top-width: 0px;
	border-width: 0px;
	/*vertical-align: top;*/
	letter-spacing: 0px;
	word-spacing: 0px;
	line-height: 0px;
	background-image: url('images/PageBackgroundPainted_v05.png');
	background-repeat: repeat-y;
	/*background-color: #3b3b3b;*/
	z-index: 0;
	
}
.oneColFixCtr #mainContentWide {
	top: 0px;
	/*vertical-align: top;*/
	background-position: top;
	padding: 0px;
	margin: 0px;
	margin-top: 0px;
	border-top-width: 0px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	left: 0px;
	right: 0px;
	bottom: 0px;
	clip: rect(0px,0px,0px,0px);
	z-index: 0;
}


img {
	border: none;
	z-index: 2;
	position: relative; /* This is important as it changes the Z-index order down if it's not specified */
} 


.contentCentered {
	width: 650px; /* the auto margins (in conjunction with a width) center the page */
	position: relative;
	display: flex; /* Needed to center all content within this DIV */
	justify-content: center;  /* Needed to center all content within this DIV */
	border: 0px solid #000000;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	/*-moz-box-align: top;*/
	border-top: 0;
	border-top-width: 0px;
	border-width: 0px;
	z-index: 2;
}



.contentNarrow {
	width: 650px; /* the auto margins (in conjunction with a width) center the page */
	position: relative;
	border: 0px solid #000000;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	/*-moz-box-align: top;*/
	border-top: 0;
	border-top-width: 0px;
	border-width: 0px;
	z-index: 2;
}

.contentOversized {
	width: 950px; /* the auto margins (in conjunction with a width) center the page */
	position: relative;
	left: -60px; 
	border: 0px solid #000000;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	padding-top: 10px;
	/*-moz-box-align: top;*/
	border-top: 0;
	border-top-width: 0px;
	border-width: 0px;
	z-index: 3;
}


.menuTop {
	width: 1463px; /* the auto margins (in conjunction with a width) center the page */
	position: relative;
	left: -318px;
	border: 0px solid #000000;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	padding-top: 0px;
	/*-moz-box-align: top;*/
	border-top: 0;
	border-top-width: 0px;
	border-width: 0px;
	z-index: 2;
}


.switchConsole {
	width: 1070px; /* the auto margins (in conjunction with a width) center the page */
	position: relative;
	z-index: 3;
	left: -120px;
	border: 0px solid #000000;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
	padding: 0px;
	padding-top: 10px;
	/*-moz-box-align: top;*/
	border-top: 0;
	border-top-width: 0px;
	border-width: 0px;
	
}


.switchVideo {
	position:absolute;
	z-index: 4;
	top: 61px;
	left: 209px;
}

/*This is for text-links!*/
a:hover {color: #F67060;}
a { color: #4f7aa1; text-decoration: none;}


h1 {
	font-family: 'Dosis', Arial Narrow;
	font: "Trebuchet MS", Arial Narrow, "sans-serif"; /*fallback*/
	font-weight: normal;
	font-size: 28px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	line-height: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	/*background-color: #3b3b3b;*/
	color: #508DD0;
	position: absolute; /* This is important as it changes the Z-index order down if it's not specified */
	z-index: 20;
}

h2 {
	font-family: 'Dosis', Arial Narrow;
	font: "Trebuchet MS", Arial Narrow, "sans-serif"; /*fallback*/
	font-weight: normal;
	font-size: 48px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	line-height: 0px;
	padding-top: 50px;
	padding-bottom: 35px;
	/*background-color: #3b3b3b;*/
	color: #ffffff;
	position: relative; /* This is important as it changes the Z-index order down if it's not specified */
	z-index: 2;
}

h3 {
	font-family: 'Dosis', Arial Narrow;
	font: "Trebuchet MS", Arial Narrow, "sans-serif"; /*fallback*/
	font-weight: normal;
	font-size: 28px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	line-height: 0px;
	padding-top: 50px;
	padding-bottom: 35px;
	/*background-color: #3b3b3b;*/
	color: #ffffff;
	position: relative; /* This is important as it changes the Z-index order down if it's not specified */
	z-index: 2;
}

p {
	font-family: 'Eurostile', Arial Narrow;
	font: "Trebuchet MS", Arial Narrow, "sans-serif"; /*fallback*/
	font-size: 18px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	line-height: 24px;
	letter-spacing: 0.5px;
	/*background-color: #3b3b3b;*/
	color: #dddddd;
	position: relative; /* This is important as it changes the Z-index order down if it's not specified */
	z-index: 2;
}

#slideshow {
  margin: 0px auto;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  position: relative;
	/*left - shifts the slideshow 60px to the left*/
  left: -60px;
  width: 950px;
  height: 520px;
  padding-top: 90px;
  z-index: 2;
}

#slideshow > div {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 0px;
  bottom: 0px;
  padding-top: 50px;
  z-index: 2; 
}

figure {
    margin: 0;
	position: relative;
	z-index: 4;
	
	left: 0px;
	top: 0px;
}


/* The following styles are for the "read more..." expanding text buttons */

#ElaborateParagraph_01 {
      display: none; /* Initially hide the paragraph */
    }
#ElaborateParagraph_02 {
      display: none; /* Initially hide the paragraph */
    }

    .expand-button {
      background-color: #8d4c4b; /* Green */
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      border-radius: 5px; /* Rounded corners */
      font-size: 16px;
    }

 .expand-button:hover {
      background-color: #bf6250; /* Darker green on hover */
    }

/* The previous styles are for the "read more..." expanding text buttons */