/*******************************************************************************
 * Body
 ******************************************************************************/
body { margin: 0; }

body #content { margin: 2em 4em; }




/*******************************************************************************
 * Header
 ******************************************************************************/
#header {
	position: relative;
	margin: 0; padding: 0;
}
#header #headertop {
	margin: 0; padding: 0;
	height: 80px;
	background: black url("/./public/tt_bg.png") 100% 0 no-repeat;
}
#header #headertop #headertitle {
	height: 80px;
}
/*
 * Header menu and submenu
 */
#menu,
.submenu {
	position: relative; clear: both;
}
#menu    ul,
.submenu ul {
	height: 25px;
	margin: 0 0 0 40px; padding: 0;
	list-style: none;
}
#menu    ul li,
.submenu ul li {
	float: left;
	padding-left: 3px; padding-right: 5px; white-space: nowrap;
	font: bold 9pt/25px "Arial", Sans-serif;
}
/*
 * Header menu
 */
#menu { background: #AAA9A9; }
#menu ul li a       { text-decoration: none; color: black; }
#menu ul li a:hover { color: white; }
#menu ul li#language,
#menu ul li#hkfywo,
#menu ul li#hkbda            { float: right; }
#menu ul li#language,
#menu ul li#language a,
#menu ul li#hkbda,
#menu ul li#hkbda a          { color: white; }
#menu ul li#language a:hover,
#menu ul li#hkbda    a:hover { color: black; }
#menu ul li#hkfywo {
	padding-left: 0; padding-right: 0;
	text-indent: 0; font-size: 1px;
	background: #85C226;
}
#menu ul li#hkfywo a,
#menu ul li#hkfywo a:hover {
	display: block;
	width: 95px; height: 25px;
	color: #85C226; background: #85C226 url("/./public/menu_festival_youth.png") 50% 50% no-repeat;
}
#menu ul li#hkbda {
	background: #abcdef;
}
/*
 * Header submenu
 */
.submenu { display: none; visibility: hidden; } /* hide all sub-menu by default */
.submenu { background: #959693 url("/./public/submenu_bg.gif") repeat-y; }
.submenu ul li a       { text-decoration: none; color: black; }
.submenu ul li a:hover { color: red; }


/* menu bar end */




/*******************************************************************************
 * Footer
 ******************************************************************************/
div#footer
{
	clear: both;
	margin: 2em 4em 0 4em;
	width: 100%;
	font: normal 8pt "Arial", Sans-serif;
	background: url("/./public/footer_bg.gif") repeat-x;
}
/* Quoted from CSS: "The child selectors are a hack to hide these ruls from WinIE6, which gets confused by 'fixed'" */
body>div#footer { position: fixed; left: 0; bottom: 0; }




/*******************************************************************************
 * Message
 ******************************************************************************/
div.message_bg
{
	position: absolute; z-index: 9;
	left: 0px; top: 0px;
	width: 100%; height: 100%;
	background-color: white;
	opacity:.50; /* filter: alpha(opacity=50); -moz-opacity: 0.5; */
}
div.message_dialog
{
	position: absolute; z-index: 10;
	left: 100px; top: 50px;
	width: 480px; height: 360px;
	background-color: white;
	border: solid 3px black;
}
div.message_dialog h1
{
	color: #D82020;
	font: bold 20pt/25px Sans-serif;
}
div.message_dialog a       { text-decoration: underline; color: #D82020; }
div.message_dialog a:hover { color: #1080D0; }
div.message_dialog div.message_body
{
	padding: 1em;
}
div.message_dialog div.message_top
{
	margin: 0; padding: 0;
	height: 80px;
	background: black url("/./public/tt_bg.png") 200px 0 no-repeat;
}
div.message_dialog div.message_top div.message_title
{
	height: 80px;
	background: url("/./public/tt_festival_winds.png") 40px 50% no-repeat;
}






/*******************************************************************************
 * Content
 ******************************************************************************/
acronym, abbr          {font-weight:bolder;}
.preview               {background-color: #FFFF80;}




body div#content,
body div#content table td
{
	margin-bottom: 100px; /* give enough room for footer */
	font: normal 9pt "Arial", Sans-serif;
}
body div#content h1,
body div#content h1 a,
body div#content h4
{
	color: #D82020;
}
body div#content h1 a:hover
{
	text-decoration: none;
}
body div#content h4
{
	margin: 0;
}
/* Popup message */
body#popup-message,
body#popup-message div#content { margin:0; }
/* Event groups and items */
body div#content .eventgroup              { border-top: 1px solid #C0C0C0; } /* Invisible block for group of event(s) */
body div#content .eventgroup h2           { float: left; clear: both; margin-top: 0; } /* Title or year index of an event (group) */
body div#content .eventgroup .eventitem,
body div#content .eventgroup ul           { padding-left: 6em; } /* event indent */
body div#content .eventgroup ul           { list-style: none; } /* list style */
body div#content .eventgroup ul.events li { margin-bottom: 1em; } /* list spacing for individual events */
/* Others */
body div#content hr { clear: both; }
/* Performance event items */
#events-performances .item img.poster     { float: left; width: 200px; margin-bottom: 4em; margin-right: 4em; }
#events-performances .item div.poster     { float: left;               margin-bottom: 4em; margin-right: 4em; }
#events-performances .item div.poster img { width: 200px; }
#events-performances .item                { clear: left; }
#events-performances .item h4,
#events-performances .item h5             { margin: 0; }
#events-performances .item a              { text-decoration: none; color: black; }
#events-performances .item p a            { text-decoration: underline; }
#events-performances .item a:hover        { text-decoration: underline; color: #D82020; }
/* Performance event items (re-newing) */
.performance-item h4,
.performance-item h5                { margin: 0; }
.performance-item a                 { text-decoration: none; color: black; }
.performance-item p a               { text-decoration: underline; }
.performance-item a:hover           { text-decoration: underline; color: #D82020; }
table.performance-item              { border: 0; margin: 0; }
table.performance-item tr td        { padding-left: 2em; vertical-align: top; }
table.performance-item tr td.poster { padding-left: 0; width: 1px; }



/*******************************************************************************
 * Event item layout (News, Events) (2011-5-17)
 *
 * Event structure
 *
 * <div class="eventsgroup">
 *   <div class="event">
 *     <h2></h2>
 *     <div class="image">
 *       <img/>
 *     </div>
 *     <div class="details">
 *       <div class="info">
 *         <h4></h4>
 *         <h5></h5>
 *         <p></p>
 *       </div>
 *       <div class="postdate">
 *       </div>
 *     </div>
 *   </div>
 * </div>
 ******************************************************************************/

div.eventsgroup
{
	clear: both;
	border-top: 1px solid #C0C0C0;
}
div.eventsgroup div.event
{
	margin: 0 0 0 5em;
	padding: 0;
}
div.event
{
	clear: left;
	padding-top: 2em;
}
div.event div.image, div.event div.details
{
	float: left; margin: 1em; padding: 0;
}

div.event h2, div.event h4, div.event h5, div.event p
{
	margin: 0;
}

div.event img.poster
{
	width: 200px;
}

div.event div.info p
{
	margin-top: 1em; margin-bottom: 1em;
}
div.event div.info
{
	margin: 1em; padding: 0;
}

div.event div.postdate
{
	display: none;
}

div.event a, div.event a:visited
{
	text-decoration: none; color: #D82020;
}
div.event p a
{
	text-decoration: underline;
}
div.event a:hover
{
	text-decoration: underline; color: #D82020;
}

div.event [lang]
{
	display: none;
}
[lang=en] div.event [lang=en]
{
	display: block;
}
[lang=zh] div.event [lang=zh]
{
	display: block;
}





/*******************************************************************************
 * Member List Structure
 ******************************************************************************/

#namelist #woodwind,
#namelist #lowerwoodwind,
#namelist #brass,
#namelist #percussion
{
	float: left;
	width: 168px;
}
div#namelist #listfooter
{
	clear: both;
}
div#woodwind div,
div#lowerwoodwind div,
div#brass div,
div#percussion div
{
	margin-bottom: 1em;
}
div#namelist ul
{
	list-style: none;
	margin: 0; padding: 0;
}
div#namelist li em {} /* Section Leader */



/*******************************************************************************
 * Notice
 ******************************************************************************/

div#content div#notice
{
	position: absolute;
	left: 3em; right: 3em;
	z-index: 7;
	padding: 2em;
	border: solid 1px black;
	/* FIXME failed IE6 compatibility
	background-color: #ffffe0;
	background-color: rgba(255, 255, 224, 0.9);
	 */
	background: url("/./public/rgba_ffffe0e6.png");
}
div#content div#notice h1
{
	font: bold 14pt "Arial", Sans-serif;
	text-align: center;
}
div#content div#notice p
{
	font: normal 12pt "Arial", Sans-serif;
}
div#content div#notice p a
{
	font: bold 12pt "Arial", Sans-serif;
	text-decoration: underline;
}
div#content div#notice p a:hover
{
	font: bold 12pt "Arial", Sans-serif;
	color: #D82020;
	text-decoration: underline;
}
div#content div#notice p.center
{
	text-align: center;
}
div#content div#notice p.controlbox
{
	text-align: right;
}










/*******************************************************************************
 * Front page
 ******************************************************************************/

.frontpage #content { text-align: center; margin: 10em; }

.frontpage #content .container { margin: 2em; line-height: 2; }

.frontpage #content #logo { border: 0; }

.frontpage #content h1 { font-size: 14pt; }


/*******************************************************************************
 * About Us
 ******************************************************************************/

/* About Us Header */
.about #header #menu #about a { color: #D82020; }
.about #header #headertop #headertitle { background: url("/./public/tt_festival_winds.png") 40px 50% no-repeat; }
#about-orchestra #header .submenu #orchestra a,
#about-director  #header .submenu #director a,
#about-conductor  #header .submenu #conductor a,
#about-artist  #header .submenu #artist a,
#about-members   #header .submenu #members a { color: #1080D0; }
.about #header #submenu-about { display: block; visibility: visible; }

/* About Us */
div#content div.image-left              { float: left; padding: 2em; }
div#content div.image-left a            { color: black; text-decoration: none; }
div#content div.image-left a:hover      { color: red; }
div#content div.image-left img          { border: 0; margin: 0; }
div#content div.image-left b.caption    { font: smaller Sans-serif; }
.about div#content a img        { border: 0; margin: 0; }

/* About Us - The Orchestra */
#about-orchestra div#content
{
	margin-left: 0; padding-left: 22em;
	background: url("/./public/bg_orchestra.png") 0 0 no-repeat;
}
#about-orchestra div#content div.photoblock img.photo
{
	width: 100%;
}

/* About Us - Music Director */
#about-director div#content         { margin-left: 0; padding-left: 264px; }
#about-director div#content .photo  { position: absolute; left: 4em; width: 200px; }
/* About Us - Resident Conductor */
#about-conductor div#content        { margin-left: 0; padding-left: 364px; }
#about-conductor div#content .photo { position: absolute; left: 4em; width: 300px; }
/* About Us - Artist Associate */
#about-artist div#content           { margin-left: 0; padding-left: 264px; }
#about-artist div#content .photo    { position: absolute; left: 4em; width: 200px; }
/* About Us - Members */



/*******************************************************************************
 * News
 ******************************************************************************/
/* News Header */
.news #header #menu #news a { color: #D82020; }
.news #header #headertop #headertitle { background: url("/./public/tt_festival_news.png") 40px 50% no-repeat; }
.news #content dl dt { font-weight: bold; }
.news #content dl dt.highlight { color: #D82020; }
.news #content p.postdate { clear: both; }

div.event div.postdate
{
	display: block;
}


/*******************************************************************************
 * Events
 ******************************************************************************/
/* Events Header */
.events #header #menu #events a { color: #D82020; }
.events #header #headertop #headertitle { background: url("/./public/tt_festival_events.png") 40px 50% no-repeat; }
.events #header #submenu-events { display: block; visibility: visible; }
#events-big          #header .submenu #bigevents    a,
#events-performances-index #header .submenu #performances a,
#events-performances #header .submenu #performances a,
#events-concerttour  #header .submenu #concerttour  a,
#events-others       #header .submenu #others       a { color: #1080D0; }
/* Events Content */
.events div#content h2 a        { text-decoration: none; color: black; }
.events div#content h2 a:hover,
.events div#content h2 a:active { text-decoration: none; color: #D82020; }
.events div#content .photo      { float: left; margin: 0 2em 2em 0; }
/* Events - Big Events */
#events-big div#content { background: url("/./public/bg_events.png") 100% 0 no-repeat; }
/* Events - Performances */
#events-performances-index div#content
{
	height: 380px;
	margin-left: 0; padding-left: 11em;
	background: url("/./public/bg_performances.png") 0 0 no-repeat;
}
#events-performances .item img.poster { float: left; width: 200px; margin-bottom: 4em; margin-right: 4em; }
#events-performances .item div.poster { float: left;               margin-bottom: 4em; margin-right: 4em; }
#events-performances .item div.poster img { width: 200px; }
#events-performances .item { clear: left; }
#events-performances .item h4,
#events-performances .item h5 { margin: 0; }
#events-performances .item a { text-decoration: none; color: black; }
#events-performances .item p a { text-decoration: underline; }
#events-performances .item a:hover { text-decoration: underline; color: #D82020; }
#events-performances #header #submenu-performances { display: block; visibility: visible; }
#events-performances-gala     #header #submenu-performances #title-gala a,
#events-performances-pop      #header #submenu-performances #title-pop a,
#events-performances-bandfair #header #submenu-performances #title-bandfair a,
#events-performances-local    #header #submenu-performances #title-local a { color: #D82020; }
/* Events - Concert Tour */
#events-concerttour .eventgroup img.logo { float: right; } /* Logo of an event */
#events-concerttour .eventgroup li h5 { display: inline; }
/* Events - Other Activities */
#events-others #content ul { list-style: none; margin-left: 6em; padding-left: 0; }




/*******************************************************************************
 * Repertoire
 ******************************************************************************/
/* Repertoire Header */
.repertoire #header #menu #repertoire a { color: #D82020; }
.repertoire #header #headertop #headertitle { background: url("/./public/tt_festival_music.png") 40px 50% no-repeat; }
.repertoire div#content
{
	margin-left: 0; padding-left: 22em;
	background: url("/./public/bg_repertoire.png") 0 0 no-repeat;
}
.repertoire div#content li strong { } /* name of a piece */
.repertoire div#content li em { } /* composer/arranger of a piece */




/*******************************************************************************
 * Contact Us
 ******************************************************************************/
/* Contact Us Header */
.contact #header #menu #contact a { color: #D82020; }
.contact #header #headertop #headertitle { background: url("/./public/tt_festival_contact.png") 40px 50% no-repeat; }
.contact div#content
{
	margin-left: 0; padding-left: 22em;
	background: url("/./public/bg_contact.png") 0 0 no-repeat;
}
.contact div#content ul#exco { list-style: none; margin-left: 0; }



/*******************************************************************************
 * Join Us
 ******************************************************************************/
/* Join Us Header */
.joinus #header #menu #join a { color: #D82020; }
.joinus #header #headertop #headertitle { background: url("/./public/tt_join_festival.png") 40px 50% no-repeat; }
.joinus div#content
{
	height: 380px;
	margin-left: 0; padding-left: 22em;
	background: url("/./public/bg_joinus.png") 0 0 no-repeat;
}



/*******************************************************************************
 * Members' Corner
 ******************************************************************************/
/* Members' Corner Header */
.members #header #menu #member a { color: #D82020; }
.members #header #headertop #headertitle { background: url("/./public/tt_members_corner.png") 40px 50% no-repeat; }
.members #header #submenu-members { display: block; visibility: visible; }
#members-notice   #header .submenu #notice   a,
#members-schedule #header .submenu #schedule a,
#members-handbook #header .submenu #handbook a { color: #1080D0; }
/* Members' Corner Content */
.members #content h1.content_title { display: none; } /* hide h1, show img only */
.members #content img.content_title
{
	margin-bottom: 1em;
}
.members #content div.expired,
.members #content div.expired em,
.members #content div.expired a { color:#C0C0C0; }
/* Members' Corner - Practice Schedule */
#members-schedule #content pre { float: left; margin-right: 2em; font-size: medium; line-height: 14pt; } /* calendar */
#members-schedule #content pre strong { color: #D82020; } /* calendar: month */
#members-schedule #content pre b { background-color: #50c0f0; } /* highlight practice date */
#members-schedule #content pre u { background-color: #D82020; font-weight: bold; } /* highlight performance */
#members-schedule #content pre i { color: #D82020; } /* highlight public holiday */
/* Members' Corner - Notice */
#members-notice div#content
{
	margin-left: 4em; padding-left: 22em;
	background: url("/./fb/fb_notice_logo.png") 0 0 no-repeat;
}
.members #content em { color: #D82020; }
/* Members' Corner - Handbook */
#members-handbook #content OL { counter-reset: item; }
#members-handbook #content LI { display: block; }
#members-handbook #content LI:before { content: counter(item) "."; counter-increment: item; }


















/*******************************************************************************
 * Festival Youth
 ******************************************************************************/
/* Festival Youth Header */
.hkfywo #header #headertop { background: #85C226 url("/./public/tt_festival_youth_bg.png") 0 50% no-repeat; }
.hkfywo #header #menu { background: #85C226; }
.hkfywo #header #menu #hkfywo a,
.hkfywo #header #menu #hkfywo a:hover {
	color: #D82020; background: #D82020 url("/./public/menu_festival_winds.png") 50% 50% no-repeat;
}
.hkfywo #header #headertop #headertitle { background: url("/./public/tt_festival_youth_about.png") 40px 50% no-repeat; }
.hkfywo .submenu { background: #85C226 url("/./public/submenu_bg_hkfywo.gif") repeat-y; }
/* Festival Youth Content */
body.hkfywo div#content h1,
body.hkfywo div#content h1 a,
body.hkfywo div#content h4
{
	color: #85C226;
}
/* Festival Youth Background */
body.hkfywo { background: white url("/./public/bg_youth.png") 0% 100% no-repeat }
/*******************************************************************************
 * Festival Youth About Us
 ******************************************************************************/
#hkfywo-orchestra #header #menu #about a, /* highlight About Us on menu */
#hkfywo-background #header #menu #about a,
#hkfywo-conductor #header #menu #about a,
#hkfywo-course #header #menu #about a,
#hkfywo-members #header #menu #about a
{ color: white; }
#hkfywo-orchestra #header #submenu-hkfywo-about, /* shows About Us sub-menu */
#hkfywo-background #header #submenu-hkfywo-about,
#hkfywo-conductor #header #submenu-hkfywo-about,
#hkfywo-course #header #submenu-hkfywo-about,
#hkfywo-members #header #submenu-hkfywo-about
{ display: block; visibility: visible; }
#hkfywo-orchestra  #header .submenu #yborchestra a,
#hkfywo-background #header .submenu #ybbackground a,
#hkfywo-conductor  #header .submenu #ybconductor a,
#hkfywo-course     #header .submenu #ybcourse a,
#hkfywo-members    #header .submenu #ybmembers a { color: #1080D0; }
/* Festival Youth About Us Members Background */
#hkfywo-members { background: white url("/./public/bg_youth_members.png") 100% 100% no-repeat }
/* Festival Youth About Us Members photo */
#hkfywo-members #namelist #members-image { float:right; }
/*******************************************************************************
 * Festival Youth Contact Us
 ******************************************************************************/
#hkfywo-contact #header #menu #contact a { color: white; }
#hkfywo-contact #header #headertop #headertitle { background: url("/./public/tt_festival_youth_contact.png") 40px 50% no-repeat; }
#hkfywo-contact div#content ul#exco { list-style: none; margin-left: 0; }
#hkfywo-contact div#content .correspondence { margin-left: 50%; }

/*******************************************************************************
 * Festival Youth News
 ******************************************************************************/
/* News Header */
#hkfywo-news #header #menu #news a { color: white; }
#hkfywo-news #header #headertop #headertitle { background: url("/./public/tt_festival_youth_news.png") 40px 50% no-repeat; }
#hkfywo-news #content p.postdate { clear: both; }

/*******************************************************************************
 * Festival Youth Events
 ******************************************************************************/
#hkfywo-events #header #menu #events a { color: white; } /* menu highlight */
#hkfywo-events #header #headertop #headertitle { background: url("/./public/tt_festival_youth_events.png") 40px 50% no-repeat; }
#hkfywo-events .eventgroup,
#hkfywo-events .eventitem { clear: both; }
#hkfywo-events .eventgroup img.picture,
#hkfywo-events .eventgroup img.poster { float: left; margin: 0 1em 1em 0; } /* Logo of an event */

#hkfywo-events div.event a,
#hkfywo-events div.event a:hover,
#hkfywo-events div.event a:visited { color: #1080D0; }


/*******************************************************************************
 * Festival Youth Repertoire
 ******************************************************************************/
#hkfywo-repertoire #header #menu #repertoire a { color: white; }
#hkfywo-repertoire #header #headertop #headertitle { background: url("/./public/tt_festival_youth_music.png") 40px 50% no-repeat; }



/*******************************************************************************
 * Festival Youth Join Us
 ******************************************************************************/
#hkfywo-joinus #header #headertop #headertitle { background: url("/./public/tt_festival_youth_join.png") 40px 50% no-repeat; }
#hkfywo-joinus #header #menu #join a { color: white; }



/*******************************************************************************
 * Festival Youth Members' Corner
 ******************************************************************************/
#hkfywo-schedule #header #headertop #headertitle,
#hkfywo-handbook #header #headertop #headertitle { background: url("/./public/tt_festival_youth_members_playground.png") 40px 50% no-repeat; }
#hkfywo-schedule #header #menu #member a,
#hkfywo-handbook #header #menu #member a { color: white; } /* menu highlight */
/* Festival Youth Members' Corner */
#hkfywo-schedule #header #submenu-hkfywo-members,
#hkfywo-handbook #header #submenu-hkfywo-members
{ display: block; visibility: visible; }
#hkfywo-schedule #header .submenu #ybschedule a,
#hkfywo-handbook #header .submenu #ybhandbook a { color: #1080D0; } /* submenu highlight */
/* Festival Youth Members' Corner - Practice Schedule */
#hkfywo-schedule #content pre { float: left; margin-right: 2em; font-size: medium; line-height: 14pt; } /* calendar */
#hkfywo-schedule #content pre strong { color: #D82020; } /* calendar: month */
#hkfywo-schedule #content pre b { background-color: #50c0f0; } /* highlight practice date */
#hkfywo-schedule #content pre i { color: #D82020; } /* highlight public holiday */
/* Festival Youth Members' Corner - Handbook */



/*******************************************************************************
 * End
 ******************************************************************************/