﻿/* updated: 10-6-2010 Hong - YMCA CC Chinese version */

/* basics*/
body { margin: 0; padding: 0;}
.floatl {float:left;}
.floatr {float:right;}
.clearboth {clear:both;}
.transparent_class {
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	
}
form {margin:0;}
.greytxt {color:#848484; font-family: arial,helvetica; font-size:12px;line-height:16px; }
.midgreytxt {color:#6f6f6f; font-family: arial,helvetica; font-size:12px;line-height:16px; }
.darkgreytxt {color:#4d4d4d; font-family: arial,helvetica; font-size:12px;line-height:16px; }
.redtxt {color:#e46565; font-family: arial,helvetica; font-size:12px;line-height:16px; }
u {text-decoration: underline;}
.norepeatbg {background-repeat: no-repeat;}

/* containers */
#container {width: 940px;margin:auto;}
#contentbox {width: 940px;}
#searchbox {width: 265px; height: 52px; margin:23px 0px 0px 0px; border:0;}
#subbutton {width: 252px; height:22px; border:0; padding: 2px 0px 0px 0px;}
#flashbox {width: 633px; height:176px; border:0; z-index:10 ;}
#albumbutton {width: 307px;height: 191px; border: 0;}
#collegeybox {width: 307px;height: 140px; border: 0;}
#whatsnewbox {padding: 16px 0px 0px 16px;margin:0px 0px 0px 0px;}
#applybutton {width: 307px; height: 91px;margin:0px 0px 0px 0px;}
#tribox {padding: 0px 0px 0px 16px; margin:0px 0px 3px 0px; border: 0;}
#locationbar {font-family: arial,helvetica; font-size:12px; color:#747455; padding: 2px 0px 0px 20px;}
#footer {width:940px; height:32px; background: url("../images/border_003b.gif") 0 0 no-repeat;}
#top_wrapper {width:940px; height: 104px;}

/* searchbox */
#magnifyglass {margin:3px 0px 0px 8px; border: 0;}
.search_wrapper {margin: 1px 0px 0px 10px; width:124px; height:20px; border: 1px solid #d7d7d7;}
input.searchtextbox {font-family: arial,helvetica; font-size:12px; color:gray;
margin:0px 0px 0px 3px; width:94px; height:16px; border: 0;}

/* subbuttons */
#subbut_home {height:20px; background: url("../images/bullet_000.gif") 0 0 no-repeat;
padding:3px 0px 0px 22px; margin: 0px 0px 0px 12px; border:0;}
#subbut_sitemap {height:20px; background: url("../images/bullet_001.gif") 0 0 no-repeat;
padding:3px 0px 0px 22px; margin: 0px 0px 0px 12px; border:0;}
#subbut_contactus {height:20px; background: url("../images/bullet_002.gif") 0 0 no-repeat;
padding:3px 0px 0px 22px; margin: 0px 0px 0px 12px; border:0;}
#subbutton a {color:#6b7015; text-decoration:none; font-size:12px;}
#subbutton a:hover {color:#fc5724; text-decoration:underline; font-size:12px;}


/* details button */
a.details {
color: #262627; font-size: 11px; line-height:14px; font-family: arial, helvetica;
padding: 0px 0px 0px 18px;
text-decoration: none;
display: block;
width: 35px; height: 16px; border: 0;
background: url('../images/bullet_004.gif') 0px 2px no-repeat;
}
a.details:hover {color:#cc3333;
text-decoration: underline;
background: url('../images/bullet_004a.gif') 0px 2px no-repeat;
}

/* back button */
a.backbut {
color: #262627; font-size: 11px; line-height:14px; font-family: arial, helvetica;
padding: 0px 0px 0px 18px;
text-decoration: none;
display: block;
width: 35px; height: 16px; border: 0;
background: url('../images/bullet_004.gif') 0px 2px no-repeat;
}
a.backbut:hover {color:#cc3333;
text-decoration: underline;
background: url('../images/bullet_004a.gif') 0px 2px no-repeat;
}
.backbox {width:40px; float:right;}

/* collegeybox*/
.cytopic {width: 307px; height: 40px;}
.cytxt {width:180px; color:#797b6f; font-size:12px; margin: 8px 3px 0px 15px; border: 0;}
.cyphoto {width: 70px; height:68px ; margin: 8px 10px 0px 10px; border: 0;}
.cydetail {padding: 5px 15px 0px 0px;margin: 5px 0px 0px 0px;}

/* whatsnew */
.wn_table {margin:3px 0px 5px 10px;}
.wn_thumbnail {width: 88px; height: 60px; margin: 5px 0px 0px 0px; padding: 0px 8px 0px 0px;}
.wn_date {color:#92a62e; font-size: 12px; line-height:14px; font-family: arial, helvetica;}
a.wn_item {
color:#848484;  font-size: 12px; line-height:14px; font-family: arial, helvetica;
text-decoration: none;
}
a.wn_item:hover {
color:#ff5a5a;
text-decoration: underline;
}

/* tribox */
.tribox_01 {width: 308px; height: 105px;
background: url('../images/border_006a.gif') 0 0 no-repeat;
}
.tribox_02 {width: 308px; height: 105px;
background: url('../images/border_006a.gif') 0px -2px no-repeat;
}
.tribox_03 {width: 297px; height: 213px;
background: url('../images/border_006b.gif') 0 0 no-repeat;
}
.tridetail {border:0;}
.tritable {padding: 18px 0px 0px 20px;}
.tritable_02 {padding: 18px 0px 0px 10px;}
.tritable_03 {padding: 6px 0px 0px 10px;}
a.tri_item {
width:175px;
color:#848484;  font-size: 13px; line-height:14px; font-family: arial, helvetica;
text-decoration: underline;
font-weight:bold;
}
a.tri_item:hover {
color:#ff5a5a;
text-decoration: underline;
}

/* location bar */
#locationbar a {color:#747455 ;text-decoration:none;font-family: arial,helvetica; font-size:12px;}
#locationbar a:hover {color:#ff4184 ;text-decoration:underline; font-family: arial,helvetica; font-size:12px;}

/* footer */
.copyright_txt {color:#888888; font-size:11px; font-family: arial,helvetica; letter-spacing: 1px;
padding: 9px 25px 0px 0px;}
#subbut_privacy {height:20px; background: url("../images/bullet_003.gif") 0 0 no-repeat;
padding:3px 0px 0px 22px; margin: 6px 0px 0px 15px; border:0;}
#footer a {color:#6f6f6f; text-decoration:none; font-size:12px;}
#footer a:hover {color:#fc5724; text-decoration:underline; font-size:12px;}


/* sub layers */

#layer1
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #e7ff83;
width:150px;
/*height:185px; */
border: 1px solid #ffffff;
margin-left: 15px;
margin-top: -4px;

}

#layer2
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #fdf198;
width:150px;
/*height:90px; */
border: 1px solid #ffffff;
margin-left: 91px;
margin-top: -4px;

}

#layer3
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #ffd297;
width:150px;
/*height:70px; */
border: 1px solid #ffffff;
margin-left: 202px;
margin-top: -4px;

}

#layer4
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #ffc3eb;
width:150px;
/*height:70px; */
border: 1px solid #ffffff;
margin-left: 290px;
margin-top: -4px;
}

#layer5
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #b2eed8;
width:150px;
/*height:120px; */
border: 1px solid #ffffff;
margin-left: 363px;
margin-top: -4px;
}


#layer6
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #b2eed8;
width:150px;
/*height:90px; */
border: 1px solid #ffffff;
margin-left: 483px;
margin-top: -4px;
}

#layer7
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #c3f3d2;
width:150px;
/*height:160px; */
border: 1px solid #ffffff;
margin-left: 565px;
margin-top: -4px;
}

#layer8
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #f3bdec;
width: 200px;
/*height:140px; */
border: 1px solid #ffffff;
margin-left: 645px;
margin-top: -4px;
}

#layer9
{
position:absolute;
visibility: hidden;z-index : 1000;
font-size: 9pt;
background-color: #bfedfd;
width: 150px;
/*height:120px; */
border: 1px solid #ffffff;
margin-left: 720px;
margin-top: -4px;
}


.bbas
{
padding: 13px 0px 0px 15px;
margin: 0;
}

.bbas li
{
list-style-type: none;
padding: 0px 0px 0px 10px;
margin: 0px 0px 3px 0px;
display: block;
background: url("../images/bullet_arrow001.gif") 0 3px no-repeat;
border: 0;
}

#navlist a
{
color: #262627;
padding: 0px 0 0 5px;
text-decoration: none;
display: block;
width: 120px;
height: 20px;
border: 0;
font-family: arial, helvetica;
}

#navlist a:hover { color: #cc3333; text-decoration: underline;}

#navlist a.long
{
color: #262627;
padding: 0px 0 0 5px;
text-decoration: none;
display: block;
width: 160px;
height: 20px;
border: 0;
font-family: arial, helvetica;
}

#navlist a.long:hover { color: #cc3333; text-decoration: underline;}


/* ---  contactus page  --- */
.tbmargin {margin: 0px 0px 10px 0px;}
#tbcontent {
width: 850px;
/*height:300px; */
padding: 10px 20px 10px 50px; border: 0;
color:#8f9090; font-family: arial,helvetica; font-size:12px; line-height:17px;
background: url('../images/blur_logo.gif') bottom right no-repeat;
}
#tbcontent02 {
width: 850px;
padding: 10px 20px 10px 50px; border: 0;
color:#8f9090; font-family: arial,helvetica; font-size:12px; line-height:17px;
}

#tbcontent03 {
width: 895px;
padding: 0px 10px 10px 15px; border: 0;
color:#8f9090; font-family: arial,helvetica; font-size:12px; line-height:17px;
background: url('../images/blur_logo.gif') bottom right no-repeat;
}


.tbtopic {
height:20px; margin: 0px 0px 5px -25px;
padding: 2px 0px 0px 25px;
color: #308b88;  font-family: arial,helvetica; font-size:13px; font-weight: bold;
background: url('../images/bullet_006.gif') 0 0 no-repeat;
}
.tbtopic02 {
height:20px; margin: 0px 0px 5px -25px;
padding: 2px 0px 0px 25px;
color: #685468;  font-family: arial,helvetica; font-size:13px; font-weight: bold;
text-decoration: underline;
}
#gmap {margin: 7px 0px 10px 0px;}
small {font-family: arial,helvetica; font-size:12px;}
a.tblink {font-family: arial,helvetica; font-size:12px; color:#8f9090;
text-decoration: none;
}
a.tblink:hover {text-decoration: underline;color:#ff5a5a; }


/* ---  sitemap page  --- */
.smblock {margin: 0px 20px 10px 0px;
width:250px;
border: 0;
}
.smblock ul
{
	padding-left:19px;
}

a.sm {
text-decoration: none;
display: block;
width: 100px;
height:20px;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 25px;
color: #308b88;  font-family: arial,helvetica; font-size:13px; font-weight: bold;
background: url('../images/bullet_005.gif') 0 0 no-repeat;
}
a.sm:hover {color:#ff5a5a ; text-decoration: underline;}

.smlist {border: 0;margin: 0px 0px 0px 5px;}
.smlist ol {border: 0;}
.smlist li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001.gif') 0 4px no-repeat;
}

.smlist li ul
{
  padding-left:0px;
}

#smlistlink a 
{
	color: #8f9090;  
	font-family: arial,helvetica; 
	font-size:12px;
text-decoration: none;
}
#smlistlink a:hover {color:#ff5a5a; text-decoration: underline;}

.smlist02 {border: 0;margin: 5px 0px 0px 5px;}
.smlist02 ol {border: 0;}
.smlist02 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list002.gif') 0 3px no-repeat;
}

.smlist03 {border: 0;margin: 5px 0px 0px 5px;}
.smlist03 ul {border: 0;}
.smlist03 li 
{
	margin: 0px 0px 8px 0px; 
	padding:0px 0px 0px 17px; 
	border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list003.gif') 0 3px no-repeat;
}


/* ---  privacy page  --- */


/* ---  search page  --- */
#searchresult ol {margin:0; padding:0;}
#searchresult li{margin: 2px 0px 10px 0px;}

/* --- about us --- */
.aboutuslist {border: 0;margin: 5px 0px 0px 5px;}
.aboutuslist ul {border: 0;}
.aboutuslist li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 0px; border: 0;
}
.aboutuslist .smlist03a {border: 0;margin: 5px 0px 0px 5px;}
.aboutuslist .smlist03a ul {border: 0;}
.aboutuslist .smlist03a li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list003.gif') 0 3px no-repeat;
}

/* ---  facilities  --- */
.rentbox {width: 740px; background-color:#f4f4ef;
padding: 20px 20px 20px 20px; border: 0;
}
.renttable  { border-collapse: collapse;}
.renttable td { border: 1px solid #b5d3cf;}
.subdes {text-align: left; width: 120px; margin: 5px 0px 0px 0px;}

/* --- apply --- */
.downloadbox {width:240px; background-color: #f4f4ef; margin: 0px 0px 20px 0px;}
.downloadbox_inner {background-color: #f4f4ef;
width:240px; padding: 5px 0px 10px 0px;
border: 0;
}
.downloadlist {border: 0; margin: 0px 0px 0px; padding: 8px 0px 0px 20px;}
.downloadlist li {margin: 0px 0px 0px 0px; padding:2px 0px 0px 20px; border: 0;
list-style-type: none;
display: block;
background: url('../images/pdf_icon.gif') 0 0 no-repeat;
height:26px;
}

/* --- admin --- */
.blulink {color:#687ad5 ; text-decoration: none;
font-family: arial,helvetica; font-size:12px;
}
.blulink:hover {color:#ff5a5a ; text-decoration: underline;
}

/* --- photo gallery --- */
.photoframe {width: 164px; height: 124px;
margin: 2px 0px 0px 0px;
border: 1px solid #d1d1d1;
background-color: #ffffff;}
.thumbnail {margin: 2px 2px 2px 2px;}

/* --- news page --- */
.newstopic {text-decoration: underline; font-size: 15px; color:#818181; font-family: arial,helvetica;
font-weight:bold;
margin: 20px 0px 0px 0px;}
.newstopic02 {text-decoration: underline; font-size: 15px; color:#818181; font-family: arial,helvetica;
font-weight:bold;
margin: 5px 0px 0px 0px;}

/* --- programme --- */
.pblock {margin: 0px 20px 10px 0px;
width:150px;
border: 0;
}
a.plistlink {
text-decoration: none;
display: block;
margin: 0px 0px 5px 0px;
padding: 2px 0px 0px 0px;
color: #737373;  font-family: arial,helvetica; font-size:13px; font-weight: bold;
}
a.plistlink:hover {color:#ff5a5a ; text-decoration: underline;}


.plist {border: 0;margin: 10px 0px 0px 0px; padding:0;}
.plist ul {border: 0;}
.plist li {
 width: 142px; 
 margin: 0px 0px 0px 2px;
 padding:0px 0px 0px 22px; 
 border: 0;
 list-style-type: none;
 display: block;
 background: url('../images/border_009b.gif') 0 0 no-repeat;
}



.plist02 {border: 0; margin: 1px 0px 3px 5px; padding:0;}
.plist02 ul {border: 0;}
.plist02 li {
width: 80px; 
margin: 0px 0px 0px 0px; padding: 3px 0px 0px 16px;
border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_007.gif') 2px 5px no-repeat;
}

.plist03 {border: 0; margin: 1px 0px 3px 3px; padding:0;}
.plist03 ul {border: 0;}
.plist03 li {
width: 150px;height: auto;
margin: 0px 0px 0px 0px; padding: 3px 0px 0px 16px;
border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_007a.gif') 2px 5px no-repeat;
}

.prog {
text-decoration: underline;
display: block;
width: 450px;
height:20px;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 25px;
color: #626e83;  font-family: arial,helvetica; font-size:13px; font-weight: bold;
background: url('../images/bullet_005.gif') 0 0 no-repeat;
}

.proglist {border: 0;margin: 0px 0px 0px 5px;}
.proglist ul {border: 0;}
.proglist li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001.gif') 0 4px no-repeat;
}

.proglist02 {border: 0;margin: 0px 0px 0px 5px;}
.proglist02 ul {border: 0;}
.proglist02 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001a.gif') 0 4px no-repeat;
}

.proglist03 {border: 0;margin: 0px 0px 0px 5px;}
.proglist03 ul {border: 0;}
.proglist03 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001b.gif') 0 4px no-repeat;
}

.proglist04 {border: 0;margin: 0px 0px 0px 5px;}
.proglist04 ul {border: 0;}
.proglist04 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001c.gif') 0 4px no-repeat;
}

.proglist05 {border: 0;margin: 0px 0px 0px 5px;}
.proglist05 ul {border: 0;}
.proglist05 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001d.gif') 0 4px no-repeat;
}

.proglist06 {border: 0;margin: 0px 0px 0px 5px;}
.proglist06 ul {border: 0;}
.proglist06 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001e.gif') 0 4px no-repeat;
}

.proglist07 {border: 0;margin: 0px 0px 0px 5px;}
.proglist07 ul {border: 0;}
.proglist07 li {margin: 0px 0px 8px 0px; padding:0px 0px 0px 17px; border: 0;
list-style-type: none;
display: block;
background: url('../images/bullet_list001f.gif') 0 4px no-repeat;
}

.quali {margin:0px 0px 0px 20px; padding: 0;}


