/* CSS Document */
@charset "utf-8";

/* Global stuff */

body {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 100%;
	voice-family:"\"}\"";
	voice-family:inherit;
	background-color: #FFFFFF;
	margin-left: 0;
}

a {
	font-style:normal;
	text-decoration:none;
}

p {
	text-align: left;
}

li {
	text-align: left;
}

h3 {
	font-size: 14pt;
}
.displayArea {
	float: left;
	position: absolute;
	width: 100%;
}

/* CSS for the top block */

.topBlock {
	position: relative;
	margin: 0 auto;
	width: 320px;
	height: 121px;
	background-color: #f0f0ec;
	z-index: 5;
	padding-top: 3rem;
}

.topBlock a {
	color: black;
}

.topBlockPreTitle ,
.topBlockTitle {
	margin: 0 auto;
	padding-left: 1rem;
	width: 100%;
	font-family: "Montserrat", Arial, sans-serif;
	font-size:20pt;
	font-weight:bold;
	color: #444;
}

.topBlockTitleSub1 {
	float:left;
	position: relative;
	width: 100%;
	font-family: "Montserrat", Arial, sans-serif;
	font-size:12pt;
	font-weight:bold;
	text-align: center;
	color: white;
}

.topBlockTitleSub2 {
	float:left;
	position: relative;
	width: 100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	text-align: center;
	color: white;
}

.topBlockTitleSub3 {
	float:left;
	position: relative;
	width: 600px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	text-align: left;
	color: black;
}

.topBlockTitleSub3 {
	font-size:9pt;
}
.topBlockALogo {
	position: relative;
	float: left;
	width : 250px;
	height: 65px;
	background-color: black;
	z-index: 1;
}

.topBlockULogo {
	float: right;
/*	position: relative;*/
	width : 60px;
	padding-right:1px;
	text-align: right;
	height: 65px;
	background-color: black;
	z-index: 1;
}

/* CSS for the top menu block */

.topBlockMenu {
/*	float: left;*/
/*	position: relative;*/
	width: 320px;
/*	height:27px;*/
	height:34px;
	margin: 0 auto;
	padding: 1px 0 1px 0;
	background-color: #353535;
	font-family:Arial, Helvetica, sans-serif;
	text-align: left;
	color: white;
}

.topBlockRTI {
	width: 100%;
/*	height:27px;*/
	margin: 0 auto;
/*	padding: 1px 0 0 0;*/
	color: white;
}

.topBlockRTI p {
	font-size: 14pt;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}

.topBlockMenuCell {
	float: left;
	position: relative;
	width: 50px;
	font-size:7pt;
}

.topBlockMenuCellLast {
	float: right;
	position: relative;
	width: 10%;
	font-size:7pt;
	text-align: right;
}

.topBlockMenuCell a {
	color: white;
}

.topBlockMenuCellLast a {
	color: white;
	padding-right:2px;
}

.topMenuSearchBox {
	float:right;
	width: 190px;
	text-align: left;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: #C6C6C6;
}

.topMenuSearchBox img {
	width: 25px;
	text-align: left;
}

.topMenuSearchBoxForm {
/*	background-color: yellow;*/
}

.topBlockMenuDrop {
	width: 130px;
/*	height: 30px;*/
/*	position: relative;*/
    float: left;
/*    display: inline-block;*/
	text-align: left;
	z-index: 20;
}

.topBlockMenuDropButton {
    background-color: #353535;
    display: inline-block;
    border: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
    cursor: pointer;
	z-index: 10;
	background-image: url('/images/menuIcon-50.png');
	width: 50px;
	height: 30px;
}

.topBlockMenuDropButton:hover {
    background-color: #000000;
}

.topBlockMenuDropButton img {
	height:28px;
}

.topBlockMenuDropContent {
    display: none;
	float: left;
    position: absolute;
	width: 140px;
    background-color: #f9f9f9;
	font-size: 12px;
	text-align: left;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
/*    min-width: 160px;
/*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
	z-index:20;
}

.topBlockMenuDropContent a {
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: block;
}

.topBlockMenuDropContent a:hover {
	background-color: #353535;
	color: #fff;
}

.topBlockMenuDrop:hover .topBlockMenuDropContent {
    display: block;
}

.topBlockMenuDrop:hover .topBlockMenuDropButton {
    background-color: #353535;
}

/* CSS for the breadcrumbs block */

.mainBlock {
/*	position: relative;*/
	width: 320px;
	margin: 0 auto;
	padding: 0 0 1px 0;
/*	background-color: pink;*/
	text-align: center;
}

.breadCrumbBlock {
	float: left;
	position: relative;
	width: 100%;
	height: 30px;
	font-size: 9pt;
	color: white;
}

.breadCrumbBlockPath {
	float: left;
	width: 75%;
	font-size: 9pt;
	text-align: left;
	color: white;
}

.breadCrumbBlockIcons {
	float: left;
	width: 25%;
	text-align: right;
}

.breadCrumbBlockIcons img {
	width: 25px;
}

/* CSS for the main block */

.mainBlockDisplayWhite {
	display: inline-block;
	width: 100%;
	font-size: 1rem;
/*	height: 400px;*/
	margin: auto;
	padding: 0 0 0 0;
	text-align: center;
	background-color: #FFFFFF;
	border-radius: 10px;
}

.mainBlockDisplayWhite h1 {
	font-size: 14pt;
	text-align: left;
}

.mainBlockDisplayWhite h4 {
	font-size: 12pt;
	text-align: left;
}

.mainBlockDisplayBlack {
	display: inline-block;
	width: 96%;
/*	height: 400px;*/
	margin: auto;
	padding: 2%;
	text-align: center;
	background-color: #000000;
	border-radius: 10px;
}

.mainBlockDisplayBlack h1 {
	font-size: 14pt;
	text-align: left;
}

.mainBlockLeftWhite {
	float: left;
	width: 96%;
	padding: 2%;
	background-color: #FFFFFF;
	border-radius: 10px;
}

.mainBlockRightWhite {
	float: right;
	width: 96%;
	padding: 2%;
	background-color: #FFFFFF;
	border-radius: 10px;
}

.mainBlockLeftBlack {
	float: left;
	width: 96%;
	background-color: #000000;
	border-radius: 10px;
}

.mainBlockRightBlack {
	float: right;
	width: 96%;
	background-color: #000000;
	border-radius: 10px;
}

.mainBlockCentreWhite {
	float: left;
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 10px;
}

.mainBlockCentreBlack {
	float: left;
	width: 100%;
	background-color: #000000;
	border-radius: 10px;
}

.mainBlockImage {
	width: 90%;
}

.epitable {
	width: 100%;
}

/* CSS for Search Section */

.searchBlocks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em;
}

.searchBlock {
	position: relative;
	display: flex;
	gap: .5em;
	width: 300px;
/*	height: 400px;*/
	margin: 2px 0 0 0;
	padding: .25em;
	text-align: center;
	background-color: #DFDFDF;
	border-radius: 10px;
	font-size: .875em;
}

.searchBlock a {
	font-style: italic;
}

.searchBlockDisplayImage {
	width: 50%;
	height: 150px;
	text-align: left;
	padding: 2px 2px 2px 4px;
}

.searchBlockDisplayImage img {
	margin: auto;
}

.searchBlockDisplayRight {
	display: flex;
	flex-direction: column;
	gap: .5em;
}

.searchBlockDisplayText {
	text-align: left;
	font-size: 1em;
	padding: 0 0 0 5px;
}

.searchBlockDisplayText span {
	font-size: .825em;
}

.searchBlockDisplayLinks {
	font-size: .925em;
	text-align: left;
	font-style: italic;
	padding: 0 0 0 15px;
}

.searchBlockDisplayLinks a {
	font-style: italic;
}

.xmlBlock {
	position: relative;
	display: inline-block;
	width: 98%;
/*	height: 400px;*/
	margin: 1% 0 0 0;
	padding: 1% 0 0 0;
	text-align: center;
/*	background-color: #DFDFDF;*/
	border-radius: 10px;
	font-size: 10px;
}


.xmlBlockDisplayImage {
	float: right;
	width: 99%;
	margin: auto;
	font-size: 8pt;
	font-style: italic;
/*	padding: 2px 4px 0 0;*/
}

.xmlBlockDisplayImage img {
	width: auto;
	height: auto;
	max-width: 280px;
	max-height: 280px;
	margin: auto;
}

.xmlBlockDisplayImage p {
	text-align: center;
	font-size: 8pt;
	font-style: italic;
}

/* CSS for the bottom block */

.xmlBlockDisplayTitle {
	float: left;
	width: 99%;
	margin: auto;
	font-size: 9pt;
}

.xmlBlockDisplayTitle h4 {
	font-size: 10pt;
}

.xmlBlockDisplayText {
	float: left;
	width: 99%;
	margin: auto;
}

.xmlBlockDisplayText {
	font-size: 9pt;
}

.xmlBlockDisplayImageRest {
	position:relative;
	float: right;
	width: 99%;
	margin: auto;
	font-size: 8pt;
}

.xmlBlockDisplayImageRestImage {
	position: relative;
	float: left;
	width: 100%;
	height: 320px;
	margin: auto;
}

.xmlBlockDisplayImageRest img {
	width: auto;
	height: auto;
	max-width: 230px;
	max-height: 230px;
	margin: auto;
}

.xmlBlockDisplayImageRest p {
	text-align: center;
	font-size: 9pt;
	font-style: italic;
}

.features {
/*	position: relative;*/
/*	float: left;*/
	width: 320px;
	margin: auto;
	text-align: center;
}

.featureBlock {
	position: relative;
	display: inline-block;
	width: 300px;
	height: 200px;
/*	height: 400px;*/
	margin: 2px 0 0 0;
	padding: 2px 0 0 0;
	text-align: center;
	background-color: #DFDFDF;
	border-radius: 10px;
	font-size: 12px;
}

.featureBlockFeature {
	position: relative;
	display: inline-block;
	width: 300px;
	height: 200px;
/*	height: 400px;*/
	margin: 2px 0 0 0;
	padding: 2px 0 0 0;
	text-align: center;
	font-size: 12px;
}

.featureTitle {
	float: left;
	width: 300px;
	height: 40px;
	text-align: center;
/*	vertical-align: middle;*/
	margin-right: 3px;
	font-size: 11pt;
}

.featureImage {
	float: left;
	width: 300px;
	height: 150px;
	padding-right: 5px;
	margin-bottom: 2px;
	overflow: hidden;
	text-align: center;
	font-size: 9pt;
}

.featureImage img {
	width:95%;
}

.featureText {
	float: left;
	width: 320px;
	text-align: left;
	margin-right: 3px;
	font-size: 10pt;
}

.featureTextImage {
	float: left;
	width: 320px;
	padding-right: 5px;
	margin-bottom: 2px;
	text-align: left;
	font-size: 9pt;
}

.featureImageFeature {
	float: left;
	width: 300px;
	height: 300px;
	padding-right: 5px;
	margin-bottom: 2px;
	overflow: hidden;
	text-align: center;
	font-size: 9pt;
}

.featureImageFeature img {
	width:95%;
}


.bottomBlock {
	float: left;
	position: relative;
	width: 320px;
	margin: 0 auto;
	padding: 1px 0 1px 0;
	background-color: #F4F8B1;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}

.bottomBlockMenu {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #000000;
	text-align: center;
}

.bottomBlockMenuCellTop {
/*	float: left:*/
	position: relative;
	width: 100%;
	background-color: black;
	color: white;
	padding: 5px 0 5px 0;
}

.bottomBlockMenuCell {
	float: left;
	position: relative;
	width: 33%;
	font-size:11pt;
}

.bottomBlockMenuCellText {
	width: 100%;
	font-size:8pt;
}

.bottomBlockMenuCellImg {
	width: 100%;
	height: 60px;
	text-align: center;
}

.bottomBlockMenuCellImg img {
	width: 60px;
}

/* CSS for the page footer block */

.footer {
	width: 320px;
	margin: 0 auto;
	padding: 0 0 0 0;
	background-color:#ffffff;
	border-radius: 10px;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 1rem;
	font-style: italic;
	text-align: center;
}

.footerMenu {
	width: 100%;
}

.footerMenu p {
	text-align: center;
}

.blockLinks {
	width: 100%;
	margin: 0 auto;
/*	padding: 2% auto;*/
	font-size: 12pt;
	text-align: center;
}

.blockLinks h4 {
	padding: 0;
}
.blockLinksResource {
/*	position: relative; */
	float:left;
	width: 150px;
	height: 60px;
/*	margin: 0 auto;
/*	padding: 0 5px 0 5px;
/*	border: 0 5px 0 5px;*/
	border-width:2px;
	color: #ffffff;
	font-weight:bold;
	vertical-align: baseline;
	text-align: center;
	white-space: normal;
	font-size:14px;
	background-image:url(../images/ResourceBackground.jpg);
}

.blockLinksResource p {
	text-align: center;
	font-kerning: none;
}

.blockLinksResource a {
	text-align: center;
	vertical-align: baseline;
	font-kerning: none;
	color: #ffffff;
}

.searchFieldName {
	position: relative;
	float: left;
	width: 40%;
	text-align: right;
}

.searchFieldData {
	position: relative;
	float: left;
	width:60%;
	text-align: left;
}

.searchFieldButton {
	float: left;
	width: 95%;
	height: 50px;
	margin: 0 auto;
}
/* Now the tweaks to respond to different device screen sizes */

/*@media screen and (min-width: 360px) {

body {
	font-size:8pt;
}

.topBlock {
	width: 360px;
}

.topMenuTitle {
	width: 360px;
}

.topBlockMenu {
	width: 360px;
}

.mainBlock {
	width: 360px;
}

.mainBlockText {
	width: 360px;
}

.bottomBlock {
	width: 360px;
}

.footer {
	width: 360px;
}

}*/

@media screen and (min-width: 480px) {

	body {
		font-size:9pt;
	}

	.topBlock {
		width: 480px;
	}

	.topBlockTitle {
		font-size:22pt;
	}

	.topBlockMenu {
		width: 480px;
	}

	.topBlockRTI {
		width: 480px;
	}

	.mainBlock {
		width: 480px;
	}

	.mainBlockText {
		width: 480px;
	}

	.mainBlockLeftWhite {
		float: left;
		width: 40%;
		padding: 2%;
		background-color: #FFFFFF;
		border-radius: 10px;
	}

	.mainBlockRightWhite {
		float: right;
		width: 50%;
		padding: 2%;
		background-color: #FFFFFF;
		border-radius: 10px;
	}

	.mainBlockLeftBlack {
		float: left;
		width: 40%;
		background-color: #000000;
		border-radius: 10px;
	}

	.mainBlockRightBlack {
		float: right;
		width: 50%;
		background-color: #000000;
		border-radius: 10px;
	}

	.xmlBlock {
		width: 480px;
	}

	.xmlBlockDisplayImage {
		width: 50%;
	}

	.xmlBlockDisplayImage img {
		max-width: 220px;
		max-height: 220px;
	}

	.xmlBlockDisplayTitle {
		width: 50%;
	}

	.xmlBlockDisplayImageRestImage {
		width: 50%;
	}

	.bottomBlock {
		width: 480px;
	}

	.footer {
		width: 480px;
	}

}

@media screen and (min-width: 640px) {

	body {
		font-size:10pt;
	}

	.topBlock {
		width: 640px;
	}

	.topBlockTitle {
		font-size:25pt;
	}

	.topBlockMenu {
		width: 640px;
		font-size:11pt;
	}

	.topBlockRTI {
		width: 640px;
		font-size:11pt;
	}

	.topBlockMenuDropContent {
		font-size: 13px;
	}

	.mainBlock {
		width: 640px;
	}

	.mainBlockText {
		width: 640px;
	}

	.xmlBlock {
		width: 640px;
	}

	.xmlBlockDisplayImageRestImage {
		width: 50%;
	}

	.xmlBlockDisplayImage {
		width: 50%;
	}

	.xmlBlockDisplayImage img {
		max-width: 280px;
		max-height: 280px;
	}

	.xmlBlockDisplayTitle {
		width: 50%;
	}

	.bottomBlock {
		width: 640px;
	}

	.footer {
		width: 640px;
	}
}

@media screen and (min-width: 800px) {

	body {
		font-size:11pt;
	}

	.topBlock {
		width: 800px;
	}

	.topBlockTitle {
		float:left;
	}

	.topBlockMenu {
		width: 800px;
	}

	.topBlockRTI {
		width: 800px;
	}

	.topBlockMenuDropContent {
		font-size: 14px;
	}

	.mainBlock {
		width: 800px;
	}

	.mainBlockText {
		width: 800px;
	}

	.features {
		width: 800px;
	}

	.xmlBlock {
		width: 800px;
	}

	.xmlBlockDisplayImage {
		width: 40%;
	}
	.xmlBlockDisplayTitle {
		width: 60%;
	}

	.xmlBlockDisplayImageRestImage {
		width: 33%;
	}

	.bottomBlock {
		width: 800px;
	}

	.footer {
		width: 800px;
	}

}

@media screen and (min-width: 960px) {

	.topBlock {
		width: 960px;
	}

	.topBlockTitle {
		float:left;
	}

	.topBlockMenu {
		width: 960px;
	}

	.topBlockRTI {
		width: 960px;
	}

	.mainBlock {
		width: 960px;
	}

	.features {
		width: 960px;
	}

	.featureBlockFeature {
		width: 900px;
	}

	.featureText {
		width: 90%;
	}

	.mainBlockText {
		width: 960px;
	}

	.xmlBlock {
		width: 960px;
	}

	.xmlBlockDisplayImage {
		width: 33%;
	}

	.xmlBlockDisplayTitle {
		width: 66%;
	}

	.xmlBlockDisplayImageRestImage {
		width: 25%;
	}

	.bottomBlock {
		width: 960px;
	}

	.footer {
		width: 960px;
	}

}