@charset "utf-8";
/* CSS Document */
/*=====================*/
/*=== Reset Styles ====*/
/*=====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	/*padding:0;*/
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
*{ margin:0px; /*padding: 0px;*/ }

/*=====================*/
/*= Begin Site Styles =*/
/*=====================*/

:root {
  --primary-color: #b62025;
  --secondary-color: #f26522;
}

@font-face {
    font-family: 'Egyptian'; /*a name to be used later*/
    src: url('resources/EGYPTIAN.TTF'); /*URL to font*/
}

h1 {
	color:var(--primary-color);
	font-size:28px;
	font-weight:bold;
	padding-bottom: 5px;
	text-align:center;
}

h2 {
	color:var(--secondary-color);
	font-size:28px;
	font-weight:bold;
	padding-bottom: 5px;
	text-align:center;
}

h3 {
	color:var(--primary-color);
	font-size:20px;
	font-weight:bold;
	padding-bottom: 5px;
}

h4 {
	color:var(--secondary-color);
	font-size:20px;
	font-weight:bold;
	padding-bottom: 5px;
}

body {
	background-color: #433e3b; /* logo grey */
	font-family: Arial, Helvetica, sans-serif;
}

a:link, a:visited {
	color:#00F;
	text-decoration:underline;
}

p {
	margin-bottom: 10px;
}

#mainContainer {
	margin: 0 auto;
	width: 900px;
	height:auto;
	position: relative;
}

#mainHeader {
	width:900px;
	height: auto;
	margin: 20px 0;
	display: flex;
}

#mainHeader div {
	margin: auto 20px;
	text-align:center;
	width: 100%;
}

#mainHeader h2.big{
	font-size: 40px;
}

#mainHeader img.logo{
	width: 50;
	height: 50;
}	

.navbar { width: 100%; }

.navtable {
	width: 100%;
	height: 50px;
	background-color:#747474;
	border: 5px solid #fff; 
	border-style: solid none;
	font-size: 18px;
	font-weight:bold;
	color:#FFF;
	position:relative;
	margin-bottom: 10px;
	margin-top: 30px;
}

.navtable:after {
	content:'';
	position:absolute;
	z-index: -1;
	top: -15px;
	left: 0;
	right: 0;
	bottom: -15px;
	background: #8F8F8F;
	z-index: -1;
}

.navtable td {
	width: auto;
	padding: 0 15px;
	text-align:center;
	vertical-align: middle;
}

.navtable td a {
	color: #FFF;
	text-decoration: none;
}

.navtable td a:hover {
	color: #FFF;
	text-decoration:underline;
}

.footerbar { width: 100%; }

.footertable {
	width: 100%;
	height: 50px;
	background-color:#747474;
	border: 5px solid #fff; 
	border-style: solid none;
	font-size: 12px;
	color:#FFF;
	position:relative;
	margin-bottom: 25px;
	margin-top: 10px;
}

.footertable:after {
	content:'';
	position:absolute;
	z-index: -1;
	top: -15px;
	left: 0;
	right: 0;
	bottom: -15px;
	background: #8F8F8F;
	z-index: -1;
}

.footertable table { height: 100%; }

.footertable td {
	width: auto;
	text-align:center;
	vertical-align: middle;
}

#insideContainer {
	height: auto;
	width: 900px;
	background-color: #fff;
}

#insideContent {
	padding-top: 10px;
	margin: 0 10px;
	height: auto;
}

#fullPageContent_main {
	padding: 10px 0;
	margin: 0 10px;
	height: auto;
	width: 880px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.imgcaptioncontainer {
	position: relative; /* Essential for positioning the caption relative to this block */
	display: inline-block; /* Helps the container wrap tightly around the image */
}
			
img.floatright{
	padding-left: 10;
	float: right;
	display: inline-block;
}
img.floatleft{
	padding-right: 10;
	float: left;
	display: inline-block;
}
div.contentblock{
	display: inline-block;
	width: 100%;
}
.textleft{
	text-align: left;
}

/* --- Responsive Adjustments --- */
@media screen and (max-width: 900px) {
  #mainContainer,
  #insideContainer {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #insideContent,
  #fullPageContent_main {
    width: auto;
    margin: 0 15px;
    padding: 10px;
  }

  #mainHeader {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
  }

  #mainHeader div {
    margin: 10px 0;
    width: 90%;
  }

  .navtable,
  .footertable {
    font-size: 16px;
    height: auto;
  }

  .navtable td,
  .footertable td {
    display: block;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px solid #fff;
  }

  .navtable td:last-child,
  .footertable td:last-child {
    border-bottom: none;
  }

  h1, h2, h3, h4 {
    font-size: clamp(18px, 4vw, 28px);
  }

  body {
    font-size: 16px;
    line-height: 1.5;
  }
}