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

body{text-align: center;margin: 0px 0px 0px 0px;font-family: Univers, Helvetica, Arial, san-serif; 
font-size: 10pt; line-height: 16pt; background-color:#E1E1E1; -webkit-text-size-adjust: none;}
img{ border: 0; }

/* Links */
a, a:link, a:visited { text-decoration:none; color: #C4161C }
a:hover, a:active { color: #000000; }
a.black, a.black:link, a.black:visited { color: #000000; text-decoration:none; }
a.black:hover, a.black:active { color: #C4161C; }
a.underline { text-decoration:underline;} 

/* some general formatting */
.big{ font-size: 19pt; }
.medium { font-size: 12pt }
.small {font-size: 8pt}
.center {text-align:center}
.red {color: #C4161C }

p {margin-top: 0px; margin-bottom: 15px;}
p.list:first-line { font-weight: bold } 
p.tighten { line-height: 14pt; margin-bottom: 5px; position:relative; top: -6px; } 
.hidden { visibility:hidden; display:none; }

/* If the majority of the a tags in a div will be underlined, 
it might be easier to set the div to the class underline which will affect every a tag */
.underline a { text-decoration:underline } 
.underline a.noLine { text-decoration: none;} /* If you have a div with the class underline and want maybe a single a tag with no underline, give the a tag this class */

p.mono { font-family:"Courier New", Courier, monospace } /* This was used for the 'Ask Cheuk' page. Maybe useful */

/* Center gradient backgrounds */
div.backShort{background-image:url(../images/backShort.gif); background-repeat:repeat-x;}
div.backMedium{background-image:url(../images/backMedium.gif); background-repeat:repeat-x;}
div.backLong{background-image:url(../images/backLong.gif); background-repeat:repeat-x;}
div.backMile{ background-image:url(../images/backMile.gif); background-repeat:repeat-x;}


img.center {margin-left: auto; margin-right: auto; display:block}
img.rotate { display: none; }

ul.indent { margin-top: 2px }
ul.indent li {list-style: none;}

div#main{top: 0px;width: 906px;  position: relative;text-align: justify;padding: 36px 0px 10px 44px;margin: 0px auto 0px auto; background-color:#FFFFFF;}
/* The wholepage div is primarily for the php mailing list */
div#wholePage { width: 700px; padding-bottom: 350px }
div#wholePage h1 { font-size: 12pt; font-weight: normal; }
div#wholePage span { display: none }


/* Top navigation */ 
div#topNav{width: 872px;height: 122px;position:relative; left: 0px;top: 0px;margin: 0px 0px 0px 0px; z-index: 4}
div#navBar{position: relative;left: 129px;top: 44px;background-image:url(../images/top/navBar.gif);width: 606px;height: 80px;}
img#logo{position:absolute;left: 0px;top: 0px;}
img#enHeader{position:absolute;left: 129px;top: 0px;}
img#chHeader{position: absolute;left: 372px; top: 0px; }
div#address{position: absolute;left: 506px; top: 0px; background-image:url(../images/top/contactBack.gif); 
background-repeat:no-repeat; width: 367px; height: 38px; color: #000000; padding-top: 10px; text-align:center; font-size: 8.5pt}
img#getInvoled{position: absolute;left: 737px;top: 44px;}
a#getInvolvedUnderline{ position:absolute; top: 108px; left: 752px; width: 102px; height: 2px; border-top: 1px solid #000000; visibility: hidden; display:block;  }

/* Navigation Bar Images */
img.navigationLinks{ position: absolute;top: 49px; }

img#youthProgram { position: absolute; top: 36px; left: 0px; padding: 13px 10px 15px 10px; }
img#socialServices { position: absolute; top: 36px; left: 159px; padding: 13px 12px 15px 8px}
img#whatsNew{ position: absolute; top: 36px; left: 306px;  padding: 13px 11px 15px 11px}
img#aboutUs{ position: absolute;top: 36px;left: 422px; padding: 13px 14px 15px 9px }
img#alumni{ position: absolute;top: 36px;left: 520px; padding: 13px 18px 15px 11px}

/* Drop Down Menus */
div.dropDown {display: none; position: absolute;z-index: 5;top: 79px;}
div.dropDown img{position: relative; margin: 0 0 0 0; background: none;}

div.dropDown ul{background-color: #9f0c10;background-image: url(../images/top/gradient.gif);
padding: 5px 0px 0px 0px;margin: 0px 0px 0px 0px; position:relative; clear:right}

div.dropDown li{list-style-type:none;list-style-position:outside;padding: 0px 0px 0px 23px;margin: 5px 0 0px 0; height:16px}
div.dropDown li:hover{background-color: #a8dee8;}
div.dropDown li img{margin: 2px 0px 2px 0px;}

/*Specific drop downs */
div#youthDrop{left: 1px;width: 156px;}
div#youthDrop ul{width: 156px;}

div#socialDrop{left: 158px;width: 147px;}
div#socialDrop ul {width: 147px;}
div#socialDrop li {padding-left: 8px}

div#aboutUsDrop{left: 422px;width: 97px;}
div#aboutUsDrop li{padding-left: 10px; }
div#aboutUsDrop ul{width: 97px;}

div#socialDrop ul, #aboutUsDrop ul {padding-top: 10px;}


/* Mouseover Bottom Bars */
img.onBar{ position:absolute; bottom: 2px; display: none }
img#youthProgramBar{ left: 2px; }
img#socialServicesBar{ left:158px; }
img#whatsNewBar{ left: 306px; }
img#aboutUsBar{ left: 422px; }
img#alumniBar{ right: 3px; }


/* Middle Container */
div#midSection{width: 872px;position: relative;top: 25px;height: 338px;margin-bottom: 25px;}
div#footer{margin-top: 44px; padding-bottom: 35px; position: relative;width: 872px;text-align:center; font-size: 9pt;}
img.sideLink {margin-bottom: 10px;}
img.sideLink:hover { opacity:0.6; }

/* Email Form */
div#emailForm {height: 92px;width: 224px;background-image:url(../images/formBack.gif);background-repeat:no-repeat; padding: 10px 13px 13px 13px; position:relative; text-align:left}
div#emailForm img { margin-bottom: 5px; }
div#emailForm input { width: 95px; height: 16px; border: none; margin: 0px 0px 0px 0px; position: absolute; color: #999999; padding-left: 2px; padding-top: 2px; }
div#emailForm input#firstName { left: 13px; top: 26px;}
div#emailForm input#lastName { left: 115px; top: 26px;}
div#emailForm input#email { width: 157px; left: 13px; top: 52px; }
div#emailForm #submitButton { height: 19px; width: 33px; top: 52px; left: 179px; padding: 0px 0px 0px 0px; position: absolute;}

div#emailForm div#mailResponse { height: 92px;width: 0px;background-image:url(../images/formExtendBack.png);background-repeat:no-repeat; 
padding: 0px; position:absolute; top: 0px; left: 221px; text-align:center; z-index:3; display: none; overflow: hidden;}
div#emailForm div#mailResponse span { display: none }
div#emailForm div#mailResponse a { display: block;  color:#FFFFFF; text-decoration:none; font-size: 16px;line-height: 15px; position: absolute; top: 2px; right: 4px;}
div#emailForm div#mailResponse a:hover { color: #000000 }


img.redBar{ margin-bottom: 6px;}
img.smallRedBar {left: 2px; position:relative}
img.redBar.shorter { padding-left: 8px }

div.objectMargin { margin-top: 50px; }
div.video { text-align: center; margin-top: 10px; position:relative;width: 480px; height: 100px;}

div.video div { float:left;  }
div.video #emailForm { margin-right: 0px; position:absolute; top: 0px; left: 5px }

div#youTube {height: 92px;width: 224px;background-image:url(../images/formBack.gif);background-repeat:no-repeat; text-align:center;
position: absolute; top: 0px; right: 5px; padding-top: 10px}
div#youTube img { margin-bottom: 5px}
iframe {margin-top: 50px; margin-bottom: 50px}

/*Whats New data */
div#whatsNewData ul { margin: 0px; padding: 0px; top: 0px; left: 0px; }
div#whatsNewData ul li {width: 176px;background-image:url(../images/linkBack.gif);height: 53px;background-repeat:no-repeat;display:block;padding: 13px 0px 0px 18px;
margin: 0px 0px 0px 0px;font-family:Geneva, Arial, Helvetica, sans-serif;font-size: 8pt;color: #b2b4b6;line-height: 9pt; position:relative; text-align:left}

div#whatsNewData ul li.hover { background-image:url(/images/linkBack_over.gif); }
div#whatsNewData ul li.bottom { height: 51px;}

div#whatsNewData ul li a { color: #b2b4b6; }
div#whatsNewData ul li b {font-weight: bold;font-size: 10pt;line-height: 10pt;color: #000000;display:block; margin-bottom: 4px;}