@charset "utf-8";
/* CSS Document */
html, body {
	position:relative;
	height: 100%;
	margin:0;
	font-family:  "Arial Black", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	color: #000000;
	/* background-color: #FFFFFF;  */
        background-image: url(images/logo1.gif) ;
}
#mainContainer {
	position:absolute;
	box-sizing: border-box;
	top: 20px;
	bottom: 20px;
	left:20px;
	right: 20px;
	display: flex;
	flex-direction:column;
	align-items: stretch;
	border: 1px solid #000000;
}
#headerContainer
{
	flex: 0 0 30px;
	border: thin solid #000000;
	padding: 5px;
	/* background-color:#26907C; */
        text-align: center;
}
#middleContainer {
	position:relative;
	flex: 5 0 auto;
	display: flex;
	flex-direction:row;
	border: thin solid #000000;
	align-items: stretch;
}

#contentContainer {
	position:relative;
	flex: 5 1 auto;
	border: thin solid #000000;
	padding: 5px;
	overflow:auto;
}
#contentDiv
{
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	left:0;
	overflow: auto;
	padding: 2em;
	box-sizing:border-box;
        background: rgba(255,255,255, 0.7);
}
#footerContainer {
	flex: 0 0 15px;
	border: thin solid #000000;
	padding-left: 5px;
}
#footerContainer p {
    margin: 0;
}
/* menu styles */
#middleContainer[menuloc=top] {
    flex-direction: column;
}
#middleContainer[menuloc=left] {
    flex-direction: row;
}
#menuContainer {
	position:relative;
	flex: 0 0 5em;
	border: thin solid #000000;
	padding: 1em;
        z-index: 10;  /* make sure menus are on top */
}
.menuDiv {
    position: relative;
}
.menuItem {
    display: block;
    position: relative;
    cursor:pointer;
    font-weight: bold;
    white-space:nowrap;
    padding-left: 1em;
    padding-right: 1em;
    border: #000000 thin solid;
}
.menuItem > .menuDiv {
    display: none;
}

#middleContainer[menuloc=left] .menuDiv > .menuItem:hover .menuDiv {
    display: block;
}
.menuItem:hover {
    color: green;
    background-color: grey;
}
#middleContainer[menuloc=left] .menuDiv > .menuItem > .menuDiv {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: yellow;
    display: none;
}
#middleContainer[menuloc=top] #menuContainer {
    flex: 0 0 1em;
}
#middleContainer[menuloc=top] #menuContainer > .menuDiv > .menuItem {
    display: inline;
}

#middleContainer[menuloc=top] .menuDiv > .menuItem > .menuDiv {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: yellow;
    display: none;
}
#middleContainer[menuloc=top]  .menuDiv > .menuItem:hover .menuDiv {
    display: inline-block;
} 
.menuItem > .menuDiv:hover {
    display: block;
}

.calTitleDiv
{
	font-size:1.5em;
	font-weight:bold;
}
.calItemDiv
{
}
.calItemTitleDiv
{
	font-size:1.1em;
	font-weight:bold;
}
.calItemContentDiv
{
}

#mobileMenuDiv {
	display: none;
	position: absolute;
	z-index: 5;
	top: 10px;
}
#menuContactUsDiv
{
	display: none;
}

@media screen and (max-width: 400px), screen and (max-height: 450px) {
	#mainContainer {
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	#headerContainer {
		padding-left:2em;
	}
	#menuContainer {
		display: none;
		position: absolute;
		z-index: 5;
		background-color: #fff;
	}
	#footerContainer {
		display: none;
	}
	#mobileMenuDiv {
		display: block;
	}
	#headerContainer p
	{
		margin-top: 0px;
		padding-top: 0px;
	}
	#menuContactUsDiv
	{
		display: block;
	}

}