@charset "UTF-8";
/* CSS Document */
/* Style designed by Shingo Yasui - 2009 */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0px;
padding: 0px;
border: 0px;
}

body {
font: 100.01% "Arial Black", Arial;
/*background: url(../images/Christmas-BG.jpg) no-repeat center top;*/
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
}

#wrapper {
background-color: none;
margin: 0px auto;
padding: 0px;
border: 0px;
width: 960px;
text-align: left;
}

.clear {
clear: both;
}

.bold {
font-weight: bold;
}

.italic {
font-style: italic;
}

.italic_bold {
font-weight: bold;
font-style: italic;
}

.underline {
text-decoration: underline;
}

/* Font colours */

.font_red {
color: #c00;
}

.font_pink {
color: #f06;
}

.font_green {
color: #099;
}

.font_orange {
color: #f90;
}

.font_turquiose {
color: #0cc;
}

font_blue {
color: #09f;
}

/* BCO title (top of a page) */

#BCO_title {
color: #555;
background: transparent; /* only when a background is used, otherwise hide this */
font-family: "Arial Black", Arial;
font-size: 180%;
font-style: normal;
font-weight: 900;	/* IE8 font problem with "Arial Black" - value needs to be 900 --> less than 900 shows up as Italic - Win XP SP3 */
letter-spacing: -2px;
height: 42px;
padding-top: 8px;
border-bottom: #ccc 1px solid;
-webkit-text-size-adjust: 110%; /* iPhone only code */
/*text-shadow:rgba(0,0,0,.3) 0 1px 0;*/
}

/* Header image */

#header_image_holder {
/*background-color: #fff;*/
height: 260px;
width: 960px;
}

#photo_container_1 {		/* This is for the home page */		/* Background images are placed in an editable area on a page */
height: 240px;													/* Need CSS for all pages if you want to use different photos */
width: 960px;
background: url(../images/banner01.jpg) no-repeat;
}

#photo_container_2 {		/* this is for musical director page */
height: 240px;													
width: 960px;
background: url(../images/banner02.jpg) no-repeat;
}

#image_holder_space {
height:180px;
background:none;
}

#image_mask_black {
height: 60px;
width: 960px;
background: rgba(0,0,0,.6);
}

/*\*/* #image_mask_black {background: url(../images/photo_mask_black.png) repeat-x;}

#page_name {
color: #fff;
font: 180% Arial;
font-style: normal;
font-weight: bolder;
padding-left: 10px;
padding-top: 15px;
text-shadow: #000 0px 1px 0px;
-webkit-text-size-adjust: 110%; /* iPhone only code */
}

.header_space {
height: 10px;
background: none;
}

/* Content area */

#content_holder {
background-color: #fff;
width: 960px;
min-height: 350px;
}

#content_holder_top_space {
height: 20px;
width: 960px;
}

#main_container {
/*min-height: 350px;*/
height: 100%;
width: 960px;
background: url(../images/virtical_border.png) repeat-y right;	/* right side border as an image */
}

#text_area {
min-height: 350px;
width: 750px;
float: right;
}

/* Middle content area */

#middle_col {
width: 474px;
min-height: 350px;
height: 100%;
float: left;
padding-right: 15px;
padding-left: 10px;
}

#middle_col h1 {
font: 130% Arial;
font-style: normal;
font-weight: bolder;
color: #c00;
letter-spacing: -1px;
margin-bottom: 20px;
-webkit-text-size-adjust: 105%; /* iPhone only code */
text-shadow:rgba(0,0,0,.2) 0 1px 0;
}

#middle_col h2 {
font: 100% Arial;
font-style: normal;
font-weight: bolder;
color: #c00;
letter-spacing: -1px;
margin-bottom: 20px;
-webkit-text-size-adjust: 105%; /* iPhone only code */
text-shadow:rgba(0,0,0,.2) 0 1px 0;
}

#middle_col h3 {
font: 90% Arial;
font-style: normal;
font-weight: bolder;
color: #c00;
letter-spacing: -1px;
margin-bottom: 20px;
-webkit-text-size-adjust: 105%; /* iPhone only code */
text-shadow:rgba(0,0,0,.2) 0 1px 0;
}

#middle_col p {
font: 80% Arial;
color: #333;
line-height: 20px;
margin-bottom: 15px;
-webkit-text-size-adjust: 105%; /* iPhone only code */
}

#middle_col ul {
padding-left: 15px;
list-style: disc;
margin-bottom: 15px;
}

#middle_col ul li {
font: 80% Arial;
color: #333;
line-height: 18px;
-webkit-text-size-adjust: 105%; /* iPhone only code */
}

#middle_col a {
color: #333;
text-decoration: underline;
}

#middle_col a:link {
color: #333;
text-decoration: underline;
}

#middle_col a:hover {
color: #c00;
text-decoration: underline;
}

#middle_col img {
float: right;
margin-left: 10px;
margin-right: 10px;
}

.middle_para_space {
height: 15px;
}

/* Vacancy box */

#vacancy_box p {
font: 80% Arial;
color: #333;
}

#vacancy_box ul {
padding-left: 15px;
}

#vacancy_box ul li {
font: 80% Arial;
color: #333;
list-style: disc;
line-height: 20px;
}

/* Left side menu */

#side_menu {
width: 180px;
padding-left: 10px;
float: left;
}

.current_page {
color: #099;
}

.treeview ul { /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li { /*Style for LI elements in general (excludes an LI that contains sub lists)*/
color: #555;
font: 100% Arial;
font-style: normal;
font-weight: bolder;
list-style-type: none;
line-height: 25px;
letter-spacing: -1px;
border-top: #ccc 1px dashed;
cursor: default;
}

.treeview li a {
color: #555;
text-decoration: none;
}

.treeview li a:link {
color: #555;
text-decoration: none;
}

.treeview li a:hover, a:active {
color: #099;
text-decoration: none;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
/*cursor:  hand !important;*/
cursor: pointer !important;
}

.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

#side_menu ul#treemenu1 li ul li {
color: #555;
font: 100% Arial;
font-style: normal;
font-weight: bolder;
padding-left: 15px;
line-height: 25px;
letter-spacing: -1px;
border: none;
}

.treeview li img {		
float: right;
padding-right: 10px;
padding-top: 9px;
position: relative;
*margin-top: -16px; /* Hack for Windows IE - tested with IE8 */
}

.menu_space {
height: 25px;
border-top: #555 1px dashed;
}

/* Infomation box under side menu */

div#info_box {
width: 180px;
color: #555;
font: 70% Arial;
}

div#wrapper div#content_holder div#main_container div#side_menu div#info_box ul {		/* newsletter lists */
list-style: none;
}

div#wrapper div#content_holder div#main_container div#side_menu div#info_box ul li {
font-style: normal;
border: none;
line-height: 15px;
}

div#wrapper div#content_holder div#main_container div#side_menu div#info_box ul li a {		/* newsletter link */
font-family: Arial;
color: #555;
text-decoration: underline;
}

div#wrapper div#content_holder div#main_container div#side_menu div#info_box ul li a:link {
font-family: Arial;
color: #555;
text-decoration: underline;
}

div#wrapper div#content_holder div#main_container div#side_menu div#info_box div ul li a:hover {
font-family: Arial;
color: #099;
text-decoration: underline;
}

div#info_box div {
/*border-top: #ccc 1px dotted;*/		/* may not use this */
/*border-bottom: #ccc 1px dotted;*/		/* only when more than 2 titles exist */ /*not use this */
/*padding-top: 10px;*/
/*padding-bottom: 15px;*/
}

div#info_box p {
line-height: 15px;
}

div#info_box p a {		/* Info box text link */
color: #555;
text-decoration: underline;
}

div#info_box p a:link {
color: #555;
text-decoration: underline;
}

div#info_box p a:hover {
color: #099;
text-decoration: underline;
}

.info_title {
color: #099;
font: 120% Arial;
font-weight: bold;
}

.info_box_space {				/* only when more than 2 titles exist */
height: 10px;
border-bottom: #ccc 1px dotted;
margin-bottom: 10px;
}

/* Right side content */

#right_col {
min-height: 350px;
width: 230px;
float: right;
padding-left: 10px;
padding-right: 10px;
}

#upcoming {
width:230px;
}

#upcoming_title {
color: #f06;
font: 90% Arial;
font-style: normal;
font-weight: bolder;
padding-top: 0px;
padding-bottom: 20px;
-webkit-text-size-adjust: 120%; /* iPhone only code */
}

div#upcoming_details_box div p, div#upcoming_details_box p { /* concert title, view more bco title text */
font: 75% Arial;
color: #333;
line-height: 20px;
}

div#upcoming > div p.upcoming_details_text { /* concert time date venue */
font-size: 71%;
font-weight: normal;
}

#upcoming_details_box p a { 
color: #333;
font-size: 100%;
font-weight: normal;
text-decoration: underline;
}

#upcoming_details_box p a:link {
color: #333;
font-weight: normal;
text-decoration: underline;
}

#upcoming_details_box p a:hover {
color: #f06;
font-weight: normal;
text-decoration: underline;
}

#upcoming_details_box div {
padding-bottom: 10px;
border-bottom: #ccc 1px dotted;
}

/*#upcoming_details_box div p{
color: #555;
font: 75% Arial;
line-height: 15px;
}*/

div#upcoming_details_box div.upcoming_details_space {
border: none;
}

div#upcoming_details_box div.upcoming_details_space2 {
border-bottom: #ccc 1px dotted;
}

/* Important notice */

#important_notice_holder {
width: 230px;
}

#important_notice_title {
color: #f06;
font: 90% Arial;
font-weight: bold;
padding-top: 25px;
padding-bottom: 20px;
-webkit-text-size-adjust: 110%; /* iPhone only code */
}

#important_notice_details div {
padding-bottom: 10px;
/*border-bottom: #ccc 1px dotted;*/			/* use this only when more than 2 important notices are exist */
}

#important_notice_details div p {
color: #555;
font: 70% Arial;
line-height: 15px;
}

#important_notice_details div img {
padding-right: 10px;
padding-bottom: 5px;
float: left;
}

/* News notice, only for special occassions */

#news_holder {
width: 230px;
}

.news_title {
color: #f06;
font: 90% Arial;
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
-webkit-text-size-adjust: 110%; /* iPhone only code */
}

div.news_details {
padding-bottom: 15px;
border-bottom: #ccc 1px dotted;			/* use this only when more than 2 important notices are exist */
}

.news_details p {
color: #555;
font: 70% Arial;
line-height: 15px;
}

.news_details div.news_para {
height: 10px;
margin: 0px;
padding: 0px;
border: none;
}

.news_details p a { 
color: #333;
font-size: 100%;
font-weight: normal;
text-decoration: underline;
}

.news_details p a:link {
color: #333;
font-weight: normal;
text-decoration: underline;
}

.news_details p a:hover {
color: #f06;
font-weight: normal;
text-decoration: underline;
}


/*Footer area */

#footer_holder {
background-color: #fff;
width: 960px;
height: 201px;
}

#footer_top_space {
height: 20px;
width: 960px;
border-bottom: #ccc 1px solid;
}

#footer_bottom_space {
height: 20px;
width: 960px;
}

#footer_content {
color: #999;
height: 161px;
width: 960px;
}

#footer_content a {		/* Footer links */
color: #999;
font-family: Arial;
font-style: normal;
text-decoration: none;
}

#footer_content a:link {		/* Footer links */
color: #999;
font-family: Arial;
font-style: normal;
text-decoration: none;
}

#footer_content a:hover {		/* Footer links */
color: #066;
font-family: Arial;
font-style: normal;
text-decoration: none;
}

#footer_left_holder {
height: 161px;
width: 700px;
float: left;
}

#footer_left_holder img {
padding: 0px;
margin: 0px;
border: none;
}

#footer_right_holder {
height: 161px;
width: 250px;
float: right;
font: 70% Arial;
font-style: normal;
color: #999;
border-left: #ccc 1px solid;		/* this has to be CSS border */
}

#footer_right_holder div {
padding-top: 10px;
padding-left: 10px;
text-align: right;
}

#footer_right_holder div p {
padding-right: 10px;

}

#footer_right_holder img {
padding: 0px;
margin: 0px;
border: none;
margin-top: -10px;
}

#footer_title_col1 {
color: #888;
font-weight: bold;
height: 25px;
width: 209px;
}

#footer_title_col2 {
color: #888;
font-weight: bold;
height: 25px;
width: 215px;
}

#footer_title_col3 {
color: #888;
font-weight: bold;
height: 25px;
width: 235px;
}

#footer_text_area_holder {
color: #999;
font: 70% Arial;
height: 161px;
width: 700px;
}

#footer_text_col1 {
height: 161px;
width: 209px;
padding-left: 10px;
float: left;
border-right: #ccc 1px solid;
}

#footer_text_col1 ul {
list-style: none;
}

#footer_text_col1 ul li {
line-height: 15px;
}

#footer_text_right_col {
height: 100%;
width: 480px;
float: right;
}

#footer_text_col2 {
height: 161px;
width: 215px;
padding-left: 10px;
float: left;
}

#footer_text_col2 ul {
list-style: none;
}

#footer_text_col2 ul li {
line-height: 15px;
}

#footer_text_col2 ul li ul {
line-height: 15px;
margin-left: 10px;
}

#footer_text_col3 {
height: 161px;
width: 235px;
position: relative;
margin-left: 225px;
padding-left: 10px;
background: url(../images/virtical_border.png) repeat-y left;
}

#footer_text_col3 ul {
list-style: none;
}

#footer_text_col3 ul li {
line-height: 15px;
}

#footer_text_col3 ul li ul {
line-height: 15px;
margin-top: -14px;
margin-left: 110px;
}

#sitemap1 {
width: 50%;
float: left;
}

#sitemap2 {
width: 48%;
float: right;
}

#page_space {
width:960px;
height:10px;
}

#sponsor_copyright {
color: #777;
font-family: Arial;
font-size: 60%;
font-style:italic;
font-weight:normal;
border: 1px #999 dotted;
padding: 5px;
line-height: 15px;
}

.event {
padding:5px 10px;
}

/* Social networking links */
#snsBox {
background-color: #eee;
font-size: 10px;
line-height: 250%;
margin-bottom: 3em;
padding: 1px 1em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
	
dl#snsLinks {margin: 3px 0 1em;}

dl#snsLinks dt {
color: #555;
font-size: 10px;
font-weight: bold;
margin-bottom: 3px;
text-transform: uppercase;
}

dl#snsLinks dd {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color: #ccc;
margin-bottom: 5px;
margin-left: 0px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

dl#snsLinks dd a {
color: #888;
display: block;
text-indent: 30px;
text-decoration: none;
}

dl#snsLinks dd a:hover {color: #555;}

dl#snsLinks dd a.iconFacebook {background: url('../images/f_logo_small.png') 6px 5px no-repeat;}

/* link effects */

a {
-o-transition-duration: .3s;
-o-transition-property: color, background-color;
-webkit-transition-duration: .3s;
-webkit-transition-property: color, background;
}

div#snsBox dl#snsLinks dd {
-o-transition:-o-transform .3s linear;
-webkit-transition:-webkit-transform .3s linear;
}

div#snsBox dl#snsLinks dd:hover {
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}