body{
	background-color: #ffffff;
}
footer{
	 font-family: verdana, sans-serif;
	 font-size:10px; 
	 color: navy;
	 text-align: center;
	 width: 100%; 
	 margin-top:25px; 
}

#thePage{
	background-color: white;
	width: 95%;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 20px;
}
.link{ /* this one used for js links onClick*/
	font-style: italic;
	color: #0000ff;
	text-decoration: underline;
}
.link:hover{
	font-style: italic;
	color: #cf3b08;
	text-decoration: underline;
}

a.link{
	font-style: italic;
	color: #0000ff;
	text-decoration: underline;
}

a.link:visited{
	font-style: italic;
	color: #0000ff;
}
a.link:hover{
	font-style: italic;
	color: #cf3b08;
	text-decoration: underline;
}
a.boxLink{
	color: #ffffff;
	text-decoration: none;
}
a.boxLink:hover{
	color: #ffff00;
	text-decoration: underline;
}
.topMenu{ /* boxes for top menu */
	display: inline-block;
	padding: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #555555;
	border: 1px solid #cccccc;
	border-style: groove;
	border-radius: 2px;
}
.topMenu:hover{
	box-shadow: 1px 1px 3px #aaaaaa;
	border-color: #555555;
	background-color: #dddddd;
	color: #333333;	
}
a.headMenu{ /* text for top menu*/
	font-family: verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none;
}
 
  a.headMenu:hover{
	color: #333333;	
}
#teaser-menu{
	display: inline-block;
}

.teaser{
	font-family: verdana,sans-serif;
	font-variant:small-caps ;
	font-weight: bold;
	color: navy;
	padding-top: 30px;
	display: block;
}
#mastHead{
	text-align: justify;	
	padding: 15px;
	border-top: 3px solid navy;
	border-top-style: ridge;
	border-bottom: 1px solid navy;
	border-bottom-style: dashed;
}
.bottomLine{
	color: navy;
	background-color: #dddddd;
	font-family: verdana,sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-align: justify;	
	padding: 15px;
	border-top: dashed 2px #555555;
	/* border-top-style: ridge; */
	border-bottom: solid 3px #555555;
	border-bottom-style: groove;
}	

 .mainContainer{
/* 	margin-top: 50px;
	margin-bottom: 50px;
	padding: 20px; */
	text-align: left;
} 
.caption{
	margin-top: 10px;
	color: red;
	font-family: verdana,sans-serif;
	font-size: 10pt;
	font-style: italic;

}

.frontBox{
	min-width: 400px;
	max-width: 28%;
	overflow: auto;
	margin: 1%;
	display: inline-block;
	padding: 10px;
	vertical-align: top;
	text-align: left;
	background-color: #FFFFFF;
}

.frontBox2{
	overflow: auto;
	margin: 1%;
	display: inline-block;
	padding: 10px;
	vertical-align: top;
	text-align: left;
	background-color: #FFFFFF;
}
.frontBoxImg{
	 margin-top: 10px;
	 margin-bottom: 10px;
	 border: 1px solid navy;	
}

.boxTitle{
	font-weight: bold;
	color: #333333;
	padding: 5px;
	border-top: dashed 1px #555555;
}
.boxTitle:hover{
	text-decoration: underline; 
	font-weight: bold;
}

h1, .title{
	color: navy;
	font-family: verdana,sans-serif;
	font-size: 12pt;
	font-weight: bold; 

}

h2, .subtitle
{
	font-family: verdana,sans-serif;
	color: navy;
	font-size: 16pt;
	font-weight: bold;
	text-decoration: underline;
	font-variant: small-caps;
}

h5,.std1
{
	color: navy;
	font-family: verdana,sans-serif;
	font-size: 8pt;
	text-decoration: none;
	font-variant: normal;
	font-weight: normal;
}
h4,.std2
{
	color: #555555;
	font-family: verdana,sans-serif;
	font-size: 10pt;
	text-decoration: none;
	font-variant: normal;
	font-weight: normal;
}
h3,.std3
{
	color: navy;
	font-family: verdana,sans-serif;
	font-size: 12pt;
	text-decoration: none;
	font-variant: normal; 
	font-weight: normal;
}
.std2j
{
	color: navy;
	font-family: verdana,sans-serif;
	font-size: 10pt;
	text-decoration: none;
	font-variant: normal;
	font-weight: normal;
	text-align: justify;
}
.form{
border: 1px solid #555555;
font-family: verdana,sans-serif;
font-size: 10pt;
color: #000000;
background-color: #eeeeee;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#logo{
	min-width: 100px;
}
.illustration{
	padding-top: 30px;
	padding-left: 20px;
}
#ticket_splitter{ 
	display: inline-block;
	float: right; 
	border: 1px solid #000000; 
	background-color:#dddddd;
	text-align: center;
	margin-right: 150px;
}


/*** option 1 ***/
@media screen and (min-width: 1200px) {

	#header{
		padding: 10px;
	}
	#navbar{
		display: block;
		margin-top: 10px;
	}
	#navicon{
		display: none;
	}
	
	#teaser{
		font-size: 20px;
		display: block;

	}
	#teaser2{
		display: none;
	}
	#logo{
		width:400px;
		float: left;
		margin-right: 50px;
		display: inline-block;
	}
	
	#thePage{
		width: 100%;
		padding-bottom: 30px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.frontBox{
		max-width: 28%;
		text-align: left;
		padding-left: 0px;
		padding-right: 5px;
	}
	.frontBox2{
		max-width: 65%;
		text-align: left;
		padding: 0px;

	}
	.teaser{
		height: 155px;
	}
	.sized{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.mastHead{
		margin-left: auto;
		margin-right: auto;		
		font-size: 10pt;
	}
	h1{
		font-size: 14pt;
	}
	.std2{
		font-size: 10pt;
	}	
	.std2j{
		font-size: 10pt;
	}
	.subtitle{
		font-size: 14pt;
	}
	h2{
		font-size: 14pt;
	}

/*** option 2 ***/
/*** Full-sized layout ***/
@media screen and (max-width: 1199px) and (min-width: 746px) {
 	#header{
		padding: 10px;
	}
 	#navbar{
		display: none;
	}
	#navicon{
		display: block;
		float: right;
		vertical-align: top;
	}
	#teaser{
		font-size: 20px;
		display: block;

	}
	#teaser2{
		display: none;
	}
	#logo{
		float: left;
		margin-right: 50px;
		display: inline-block;
	}
	#thePage{
		width: 100%;
		padding-bottom: 30px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.teaser{
		height: 100px;		
		margin-left: 50px;
	}
	.frontBox{
		max-width: 40%;
		text-align: left;
		padding-left: 0px;
	}
	.frontBox2{
		max-width: 48%;
		text-align: left;
		padding: 0px;
	}
	.sized{
		width: 90%;
		margin-left: auto;
		margin-right: auto;		
	}
	.mastHead{
		margin-left: auto;
		margin-right: auto;		
		font-size: 18pt;
	}
	h1{
		font-size: 32pt;
	}
	.std2{
		font-size: 14pt;
	}
	.std2j{
		font-size: 14pt;
	}
	.bottomLine{
		font-size: 16pt;
	}
	.subtitle{
		font-size: 18pt;
	}
	h2{
		font-size: 18pt;
	}
	.form{
		font-size: 14pt;
	}
	#ticket_splitter{ 
		margin-right: 0px;
	}


/*** option 3 ***/
/*** Small-sized layout (mobile - portrait)***/
@media screen and (max-width: 745px) /*and (min-width: 600px)*/ {
  
	#navbar{
		display: none;
	}
	#navicon{
		display: block;
		float: right;
	}
	#teaser{
		display: none;
	}
	#teaser2{
		font-size:12px;
		display: block;
	}
	#logo{
		max-width:50%;
		display: inline-block;
	}
	#thePage{
		width: 100%;
	}
	#illustration{
		display: none;
	}
	.frontBox{
		max-width: 90%;
		min-width: 250px;
	}
	.frontBox2{
		max-width: 90%;
		min-width: 250px;
	}
	.teaser{
		height: 10px;
	}
	.sized{
		text-align: center;	
	}
	.mastHead{
		width: 90%;
		font-size: 30pt;
	}
	.std2{
		font-size: 16pt;
	}
	.std2j{
		font-size: 16pt;
		text-align: left;
	}
	.bottomLine{
		font-size: 16pt;
	}
	.subtitle{
		font-size: 24pt;
	}
	h2{
		font-size: 24pt;
	}
	.form{
		font-size: 16pt;
	}
	#ticket_splitter{ 
		margin-right: 0px;
	}
}