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


.menu-link { display: none;}
.menu { 
  float: left;
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}
.menu ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
}
.menu > li > ul.sub-menu {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f4f4f4;
	border: 1px solid #CCC;
}
.menu ul li { padding: 0px; }
.menu > ul > li { display: inline-block; }
.menu ul li a { display: block; text-decoration: none; color: #000; font-size: .9em; }
.menu ul li > a { height:58px; padding: 19px 12px; }
.menu ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 160px;
  background-color: #f4f4f4;
  border: 1px solid #CCC;
}
.menu ul li:hover > ul { display: block; }
.menu ul ul > li { position: relative; }
.menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #f4f4f4; }
.menu ul ul > li a:hover { background-color: #42BBA3; color: #fff; }
.menu ul ul ul { position: absolute; left: 100%; top:0; }

@media all and (max-width: 768px) {
  .example-header .container { width: 100%; }
  
  a.menu-link { display: block; color: #fff; background-color: #333; float: right; text-decoration: none; padding: 19px 10px;}
  .menu { clear: both; min-width: inherit; float: none; }
  .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
  .menu > li > ul.sub-menu { padding: 0px; border: none; }
  .menu.active, .menu > ul ul.active { max-height: 55em; }
  .menu ul { display: inline; }
  .menu > ul { border-top: 1px solid #808080; }
  .menu li, .menu > ul > li { display: block; }
  .menu li a { color: #000; display: block; padding: 0.8em; border-bottom: 1px solid #808080; position: relative; }
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul > li a { background-color: #e4e4e4; height:58px; padding: 19px 18px 19px 30px; }
  .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
}




body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	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;
}
.twoColFixRtHdr #container {
	width: 782px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #999999;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixRtHdr #header {
	background: #DDDDDD url(../images/structure/hm_banner.jpg) no-repeat left top;
	height: 236px;
	width: 782px;
} 

/* suppress display of Printout header (which is for printing only) */
#headerprint {display:none}

.twoColFixRtHdr #headerAlt {
	background: #DDDDDD 
}
.twoColFixRtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#topnav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #B6121B;
	letter-spacing: 0.12em;
	height: 26px;
	padding-left: 48px;
}
#heading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.75em;
	font-weight: 300;
	color: #FFFFFF;
	background-color: #999999;
	background-image: url(../images/structure/pg2_heading_bkgrnd.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	letter-spacing: 0.11em;
	padding-left: 58px;
	vertical-align: bottom;
	padding-top: 22px;
	float: left;
	width: 575px;
}
.twoColFixRtHdr #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 148px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #CCCCCC url(../images/structure/hm_whatsnew.jpg) no-repeat 0px top;
	height: auto;
}
#sidebarContent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	font-weight: normal;
	color: #000000;
	padding: 40px 10px 0px 18px;
	height:367px;
}
.subtitles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bolder;
	color: #000000;
}
.subtitles a:link {
	color: #000000;
	text-decoration:none;
}
.subtitles a:visited {
	color: #000001;
	text-decoration:none;
}
.subtitles a:hover {
	color: #CC0000;
	text-decoration:underline;
}
.subtitles a:active {
	color: #000002;
	text-decoration:none;
}
.twoColFixRtHdr #mainContentHome {
	margin: 0 0px;
	border-left-width: 250px;
	border-left-style: none;
	border-left-color: #FFFFFF;
	background-color: #999999;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 25px;
} 
.hm_column3 {
	margin: 12px 5px;
	float: left;
	width: 184px;
	background-color: #CCCCCC;
	height: 320px;
}
.hm_column1 {
	margin: 12px 5px;
	width: 184px;
	float: left;
	background-color: #CCCCCC;
	height: 320px;
}
.hm_column2 {
	margin: 12px 5px;
	width: 184px;
	float: left;
	background-color: #CCCCCC;
	height: 320px;
}
.heading3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bolder;
}
.homeConcert {
	margin-left: 10px;
	padding-top: 15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bolder;
}
.homeDate {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	padding-top: 5px;
	padding-left: 10px;
}
.homeSummary {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding-top: 8px;
	padding-left: 10px;
}
.homeLocation {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #000000;
	padding-top: 8px;
	padding-left: 10px;
}
.twoColFixRtHdr #footer {
	background:#999999 url(../images/structure/footer_right.gif) repeat-y right bottom;
	width: 850px;
	margin-left: 24px;
	margin-top: 0px;
} 
#footerRight {
	background-color: #CCCCCC;
	float: right;
	width: 148px;
}
.twoColFixRtHdr #footer p {
	margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	padding-bottom: 3px;
}
#footerHome {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .70em;
	font-weight: normal;
	color: #000000;
	background-color: #999999;
	padding: 3px;
	float: left;
	width: 727px;
	margin-left: 0px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
a:link {
	color: #000000;
	text-decoration: underline;
}
a:visited {
	color: #000000;
	text-decoration: underline;
}
a:hover {
	color: #B6121B;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
.footerbullet {	font-size: 15px;
	font-weight: bolder;
}