@charset "utf-8";
/* 
=======================================
	A Dash Of Style By 
	Evolve Concepts Ltd. Hong Kong
	www.evolve.hk - info@evolve.hk
=======================================

Orange	ff7d00
Yellow	ffff00
Purple	e80ceb
Red		ff0000
Blue	0088ff
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1; color: #000; background: #FFF}
ol, ul {list-style: none}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal}
blockquote:before, blockquote:after, 
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

/* ============== General
*/
body {position:relative; background:#FFF url(../media/bg_main.gif) 0 175px repeat-x; font:0.8em verdana; color:#666; height:100%}

h1,h2,h3,h4,h5,h6 {font-weight:bold; color:#000}
h1	{font-size: 2.0em}
h2	{font-size: 1.2em}
h3	{font-size: 1.2em}					
h4	{font-size: 1.1em}
h5	{font-size: 1.0em}
h6	{font-size: 0.8em}

p  {margin-bottom:15px}
strong  {font-weight:bold}
img	{border:0}
hr 	{background:url(../media/bar_hor01.gif) no-repeat; height:1px; border:0px}

a:link, a:visited {color:#666; text-decoration:underline}
a:hover, a:active {color:#000; background:#3a3a3a; text-decoration:none}

ul {margin:0 0 0 25px}
ol {margin:0 0 0 30px}

#hr-bar {position:absolute; top:533px; background:url(../media/bar_hor01.gif) no-repeat; width:960px; margin:0; padding:0}


/* ============== Basics 
*/
#wrapper {position:relative; width:960px; margin:0 auto; padding:0}

#header  {position:relative; width:960px; height:165px; margin:0 auto}

h1#logo {position:absolute; top:30px; width:960px; z-index:1000}
	h1#logo strong {display:block; text-indent:-3000px}
	h1#logo label  {position:absolute; display:block; top:30px; right:0px}
	h1#logo {font-size:1.30em;}
	h1#logo a:link, h1#logo a:visited {color:#000; text-decoration:none}
	h1#logo a:hover, h1#logo a:active {color:#000; background:none; text-decoration:none}

/* ============== Menu-top
*/
#menu-top {position:relative; float:right; width:700px; margin:5px 0 0 0; padding:0 110px 0 0 ; font:.8em verdana; z-index:1000; }
	#menu-top ul {float:right}
	#menu-top li {float:left; background:url(../media/ico_bullet02.png) right no-repeat; padding:8px 8px}
	#menu-top li img {position:absolute; top:0}
	.menu-top-indent a {margin:0 0 0 25px}
	
	#box_search {position:absolute; top:-3px; right:0; width:101px; height:34px; background:url(../media/bg_searchbox.png) no-repeat; }
		#box_search input {position:absolute; top:10px; left:10px; width:65px; border:0px; background:none; font:1em verdana}
		#box_search #submit_search {display:block; background:url(../media/bg_searchico.png) right no-repeat; position:absolute; top:14px; left:78px; width:12px; height:10px; cursor:pointer; text-indent:-3000px; line-height:0px;}


	#menu-top a:link, #menu-top a:visited {color:#666; text-decoration:none; padding:5px}
	#menu-top a:hover, #menu-top a:active {color:#FFF;  text-decoration:none}
	
/* ============== Layout menu 
*/
#wrap-mainmenu {position:absolute; top:123px; left:0; width:100%; background:url(../media/bg_mainmenu.png) right repeat-x; height:57px; z-index:	10000}


#mainmenu {width:960px; padding:5px 0; height:37px; margin:0 auto}
	#mainmenu li {display:inline;}
	
	.sf-menu, .sf-menu * {margin:0; padding:0; list-style:none;}
	.sf-menu {line-height:1.0;}
	.sf-menu ul {position:absolute; top:-999em; width:16.2em;}
		.sf-menu ul li {width:100%; border-bottom:1px solid #FFF; padding:0}
		.sf-menu li:hover {visibility:inherit;}
		.sf-menu li {float:left; position:relative; padding:0}
		.sf-menu a {display:block; position:relative;}

	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {left:0; top:3em; z-index:99999}

	ul.sf-menu li:hover li ul,
	ul.sf-menu li.sfHover li ul {top:-999em}

	ul.sf-menu li li:hover ul,
	ul.sf-menu li li.sfHover ul {left:16.2em;top:0;}

	ul.sf-menu li li:hover li ul,
	ul.sf-menu li li.sfHover li ul {top:-999em;}

	ul.sf-menu li li li:hover ul,
	ul.sf-menu li li li.sfHover ul {left:16.2em; top:0;}

	
	/* demo */
	.sf-menu {}

	.sf-menu li a {padding:13px 20px;  text-decoration:none; color:#000;}
	.sf-menu li a a { color:#FFF}
	.sf-menu li li a {padding:.75em 1em; text-decoration:none;}
	.sf-menu a, .sf-menu a:link, .sf-menu a:visited  {color:#000}
	.sf-menu li {background:none;}
	.sf-menu li li {background: #66cc00}
	.sf-menu li li li {background: #e80ceb}

	.sf-menu li:hover, .sf-menu li.sfHover,
	.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:#0088ff; outline:0;  /* border-bottom:7px solid #FF7D00 */}

	
	.sf-menu .active {color:#FFF!important; background:#0088ff }
	
	#mainmenu img {vertical-align:middle; padding:0 6px 0 0}



		
/* ============== Layout containers

#banner {height:370px; overflow:hidden}*/
#banner,
#banner-sub {background:none; width:960px; margin:0 auto}
	#banner a:link, #banner a:visited,
	#banner-sub a:link, #banner-sub a:visited {color:#666; text-decoration:none; }
	#banner a:hover, #banner a:active,
	#banner-sub a:hover, #banner-sub a:active {color:#666; background:none; text-decoration:none}
	
	#wrap-banner {height:370px; overflow:hidden}
	#wrap-banner,
	#wrap-banner-sub {position:relative}
	#wrap-banner-sub {height:160px; overflow:hidden}

	#slider-bar {position:absolute; top:344px; left:0; width:960px; margin:0 auto; padding:0 0 0 25px; z-index:1000}
	#slide_nav{float:left; }
	#slider-control {float:left}

	#banner-desc  {position:absolute; top:50px; width:280px; height:280px; z-index:1000; text-indent:-3000px}
	#banner-desc-sub {position:absolute; top:10px; left:300px; width:280px; height:160px; z-index:1000; text-indent:-3000px}
	
	#banner img {width: 960px; height: 360px}
	#banner-sub img {width: 960px; height: 160px}

	#slide_nav li:hover, 
	#pause_button {cursor: pointer; z-index: 5000;}

	#slide_nav li, 
	#pause_button {background-repeat: no-repeat; overflow: hidden; top: 0px;}

	ul#slide_nav li {background:url(../media/bullet_slider_off.png) no-repeat; display: block; float: left; height: 28px; list-style: none; margin:0; padding: 0 20px 0 0; width: 10px;}
	ul#slide_nav li:hover {}
	ul#slide_nav li#button_selected {background-image: url(../media/bullet_slider_on.png);}
	ul#slide_nav li#button_selected:hover {}


/* pause button */
	#slide_control {position:absolute; top:2px; left:0px; text-indent:-3000px}
	.pause_button {background-image: url(../media/slider_pause.png); height: 29px; left: 419px; width: 24px;}
/*	.pause_button:hover {background-image: url(../media/slider_pause_hover.png);} */
	.paused_button {background-image: url(../media/slider_play.png); height: 29px; left: 419px; width: 24px;}
/*	.paused_button:hover {background-image: url(../media/slider_play_hover.png);} */
	

#wrap-feed {background:none}
	#wrap-news {float:left; width:300px; margin:0 20px 0 0}
	#wrap-news h3 {position:relative; background: url(../media/img_newsevents.jpg) no-repeat; height:83px; padding:10px 0 0 130px; font:26px verdana; color:#ff7d00}
	
	#wrap-news ul {margin:0; padding:0}
		#wrap-news li {display:block; border-bottom:1px solid #ededed;  width:300px; cursor:pointer}
		#wrap-news li:hover,
		#wrap-news li a:hover {/*background:#ff7d01;*/ color:#000}
		#wrap-news li label {display:inline-block; width:55px; vertical-align:top}
		#wrap-news li span {display:inline-block; width:235px}
		#wrap-news a:link, #wrap-news a:visited {display:block; color:#000; text-decoration:none; padding:5px 0}
		#wrap-news a:hover, #wrap-news a:active {/*background:none;*/ text-decoration:none}

	#wrap-events {float:left; width:320px; background:#bbb}
	#wrap-youtube {position:relative; float:left; width:623px; height:337px; margin:20px 0 0 0; background:url(../media/bg_kelytube.png) no-repeat}
	#KELYTube {position:absolute; top:75px; left:95px}

#wrap-button {background:green}
	#wrap-help {float:left; width:320px;  text-align:left}
	#wrap-volunteer {float:left; width:320px; text-align:center}
	#wrap-donation {float:left; width:320px; text-align:right}
	.wrap-btn {cursor:pointer}

	#wrap-help h4, #wrap-help p,
	#wrap-volunteer h4, #wrap-volunteer p,
	#wrap-donation h4, #wrap-donation p {position:absolute; top:0; left:-3000px}
	
.viewall {float:right; margin:10px 0 0 0; padding:5px 40px 7px 0!important; background: url(../media/ico_arrow01.png) no-repeat right!important}
		a.viewall:link, a.viewall:visited {color:#ff7d00!important; text-decoration:underline!important;}
		a.viewall:hover, a.viewall:active {color:red; background: url(../media/ico_arrow01.png) no-repeat right!important; text-decoration:none!important}
		
.viewkelytube {position:absolute; top:25px; left:110px; display:block; width:420px; height:50px; text-indent:-30000px}
.viewkelytube:hover {background:none}

#quotes-portal {float:right; text-align:right}
	#quotes-portal h3 { font-style:italic; line-height:30px}
	
#quotes-sub {float:left; text-align:justify; width:305px}
	#quotes-sub h3 {float:right; font-style:italic; line-height:30px}
	.viewallquotes {background: url(../media/ico_arrow02.png) no-repeat right; padding:0 40px 0 0}
	a.viewallquotes:link, a.viewallquotes:visited {color:#ff7d00!important; text-decoration:underline!important;}
	a.viewallquotes:hover, a.viewallquotes:active {color:red; background: url(../media/ico_arrow02.png) no-repeat right!important; text-decoration:none!important}

	
/* ============== Layout standard subpage
*/
#wrap-content {margin:0}
	#wrap-content-left {float:left; width:320px; margin:0}
		#wrap-content-left #wrap-news {margin:20px 0 20px 8px}
		#wrap-content-left #quotes-portal {width:300px; margin:20px 8px}
		
		#content-left {}
		
	#wrap-content-right {background:url(../media/blockright_top.png) no-repeat; float:left; width:640px; padding:25px 0 0 0 }
		#content-right {background:url(../media/blockright_mid.png) repeat-y;}
		#content-right-bottom {background:url(../media/blockright_bottom.png) no-repeat; width:640px; height:39px}

/* ============== Layout standard subpage - content left - submenu
*/	
#submenu {background:url(../media/blockleft_top.png) no-repeat; margin:0; padding:24px 0 0 0}
	#submenu ul {background:url(../media/blockleft_mid.png) repeat-y; margin:0; padding:28px 12px 25px 7px}
	#submenu li {border-top:1px solid #ededed; padding:0px}
	#submenu-bottom {background:url(../media/blockleft_bottom.png) no-repeat; width:315px; height:57px}
	
		#submenu li a:link, #submenu li a:visited {background:url(../media/ico_arrow04.png) no-repeat 15px 7px ; display:block; color:#000; text-decoration:none; padding:5px 0 5px 45px}
		#submenu li a:hover, #submenu li a:active {background:#fff000 url(../media/ico_arrow04_active.png) no-repeat 15px 7px; text-decoration:none; color:#000}
	
	#submenu li.active a {background:#fff000 url(../media/ico_arrow04_active.png) no-repeat 15px 7px; color:#000}
/*	============== Layout standard subpage - content left - submenu level 2
*/
	#submenu ul ul {background:none; margin:0; padding:0 }
		#submenu li li a:link, #submenu li li a:visited {background:url(../media/ico_arrow04-2.png) no-repeat 45px 7px ; display:block; color:#000; text-decoration:none; padding:5px 0 5px 75px}
		#submenu li li a:hover, #submenu li li a:active {background:#fff000 url(../media/ico_arrow04-2_active.png) no-repeat 45px 7px; text-decoration:none; color:#000}

	#submenu li li.active a {background:#fff000 url(../media/ico_arrow04-2_active.png) no-repeat 45px 7px; color:#000}
/* ============== Layout standard subpage - content left - submenu level 3
*/
	#submenu ul ul ul {background:none; margin:0; padding:0 }
		#submenu li li li a:link, #submenu li li li a:visited {background:url(../media/ico_arrow04-2.png) no-repeat 75px 7px ; display:block; color:#000; text-decoration:none; padding:5px 0 5px 105px}
		#submenu li li li a:hover, #submenu li li li a:active {background:#fff000 url(../media/ico_arrow04-2_active.png) no-repeat 75px 7px; text-decoration:none; color:#000}

	#submenu li li li.active a {background:#fff000 url(../media/ico_arrow04-2_active.png) no-repeat 75px 7px; color:#000}
			
/* ============== Layout standard subpage - content right
*/
#breadcrumb {width:605px; border-bottom:1px solid #ededed; margin:0 0 0 20px; padding:0 0 5px 0; font:.8em verdana; color:#999}
	#breadcrumb ul {float:left; width:430px; margin:0; padding:5px 0 0 0}
	#breadcrumb li {display:inline}
		#breadcrumb a:link, #breadcrumb a:visited {color:#999; text-decoration:none; padding:1px}
		#breadcrumb a:hover, #breadcrumb a:active {text-decoration:underline; background:none; color:#999}

	#printpage {background:url(../media/ico_print.png) no-repeat right center; float:left; width:75px; text-align:right; margin:0 15px 0 0; padding:5px 20px 0 0}
	
	.addthis_toolbox {float:left; width:60px; line-height:20px}

#maincontent {width:600px; padding:0 20px 10px 20px; text-align:justify; line-height:20px}

	#maincontent h1, #maincontent h2, #maincontent h3,
	#maincontent h4, #maincontent h5, #maincontent h6 {padding:10px 0 5px 0; color:#ff7d00}
	
	#maincontent ul {margin:0 0 15px 34px}
		#maincontent ul li {padding:0 0 0px 0; list-style-type:disc}

	#maincontent ol {margin:0 0 15px 48px}
		#maincontent ol li {padding:0 0 0px 0; list-style-type:decimal-leading-zero}

/* ============== Layout wrap-footer
*/
#wrap-footer {background:url(../media/bg_footer.gif) repeat-x; height:80px; font:1em verdana; width:100%; padding:15px 0  0 0; margin:10px auto; }
	
	#wrap-footer a:link, #wrap-footer a:visited {color:#000; text-decoration:none; padding:5px}
	#wrap-footer a:hover, #wrap-footer a:active {color:#FFF; text-decoration:none} 
	
	#element, #element2 {background-color:#000}
	#footer-top {width:960px; margin:0 auto; font:.8em verdana}
	#footer-menu {position:relative; float:left; width:830px; margin:0}
	#footer-menu li {display:inline; background:url(../media/ico_bullet01.png) right no-repeat; padding:8px 10px}
		#footer-menu .last {background:none}
		
	#topofpage {position:relative; float:left; width:90px; text-align:right}
	#topofpage img {position:absolute; top:-12px;}
	
	#footer-bottom {width:960px; margin:50px auto 0 auto; font:.8em verdana   }
	#footer-left {float:left; width:480px;}

	#footer-right  {float:left; width:475px; text-align:right}


/* ============== Font sizer 
*/
#footer-menu li.textsize {padding:0 50px 0 0; color:#000}
#fontsizer {font-size:0; position:absolute; top:-3px}
.fsizer a {padding:0; display:block; float:left; width:15px; margin-right:5px; text-align:center; border:1px dotted #000; color:#000; text-decoration:none; cursor:pointer; letter-spacing:0; line-height:100%}
.fsizer a:hover {text-decoration:none; background:#000; color:#FFF;}

	.fsizer a#fs_sml {font-size:9px; height:13px; padding-top:3px;}
	.fsizer a#fs_med {font-size:13px; height:17px; padding-top:3px;}
	.fsizer a#fs_lrg {font-size:16px; height:16px; padding-top:0px;}

.fsizer a.fsactive {background:#000!important; color:#FFF; cursor:default} 

/* ============== BGpos 
*/
#menu-top a {background:url(../media/bgpos_02.gif) repeat 0 0;}
#footer-menu a, #topofpage a {background:url(../media/bgpos_03.gif) repeat 0 0;}
#maincontent a, #maincontent-wide a, #wrap-news a {background:url(../media/bgpos_04.gif) repeat 0 0;}

/* ============== Misc
*/
.clear:after {content:"."; display:block; height:0px; clear:both; line-height: 0; visibility:hidden}
.clear  { display:inline-block }
/* Hides from IE-mac \*/
* html .clear {height:1%}
.clearfix  {display:block}
/* End hide from IE-mac */


/* ============== Contact + Google Maps 
*/
#contact-form {position:relative; margin:0 auto; text-align:left}
	#contact-form  #formradio label {display:block; width:170px; margin:0; cursor:pointer}
	#contact-form label {display:inline-block; width:180px; margin:5px 0; vertical-align:top}

	#contact-form .text {font:1em verdana; padding:2px 5px; width:310px;margin:5px 0;}
	#contact-form textarea {font:1em verdana; padding:5px; width:340px; height:100px; }

	#contact-form #btn-submitform { /*float:right; background:url(../media/btn_submitform.gif) no-repeat; border:0px;*/ width:143px; height:36px; margin:10px 0 10px 180px; cursor:pointer; border:2px dotted #000; background:#ff7d00}
	#contact-form #btn-submitform:hover {/*background:url(../media/btn_submitform_active.gif) no-repeat;*/ border:2px dotted #ff7d00; background:#FFF; }
/*	#contact-form  .required {display:inline-block; padding:30px 0 0 0} */
	#contact-form .errors {color:#FF0000}

#map_canvas {height:400px}

/* ============== Forms one-off
*/
#one-off-donation-form {position:relative; margin:0 auto; text-align:left}
	#one-off-donation-form  #formradio label {display:inline-block; width:80px; margin:0; cursor:pointer}
	#one-off-donation-form label {display:inline-block; width:180px; margin:5px 0; vertical-align:top}

	#one-off-donation-form .text {font:1em verdana; padding:2px 5px; width:210px;margin:5px 0;}
	#one-off-donation-form .text2 {font:1em verdana; padding:2px 5px; width:90px;margin:5px 0;}
	#one-off-donation-form textarea {font:1em verdana; padding:5px; width:340px; height:100px; }

	#one-off-donation-form #btn-submitform { /*float:right; background:url(../media/btn_submitform.gif) no-repeat; border:0px;*/ width:143px; height:36px; margin:10px 0 10px 0px; cursor:pointer; border:2px dotted #000; background:#ff7d00}
	#one-off-donation-form #btn-submitform:hover {/*background:url(../media/btn_submitform_active.gif) no-repeat;*/ border:2px dotted #ff7d00; background:#FFF; }
/*	#one-off-donation-form  .required {display:inline-block; padding:30px 0 0 0} */


/* Monthly donation form 
*/
	#btn-submitform2 { /*float:right; background:url(../media/btn_submitform.gif) no-repeat; border:0px;*/ width:143px; height:36px; margin:10px 0 10px 0px; cursor:pointer; border:2px dotted #000; background:#ff7d00}
	#btn-submitform2:hover {/*background:url(../media/btn_submitform_active.gif) no-repeat;*/ border:2px dotted #ff7d00; background:#FFF; }



/* ============== Newsletter form 
*/


#mc_embed_signup label {display:inline-block; width:180px; margin:5px 0; vertical-align:top}
	#mc_embed_signup #mc-embedded-subscribe { width:143px; height:36px; margin:10px 0 10px 180px; cursor:pointer; border:2px dotted #000; background:#ff7d00}
	#mc_embed_signup #mc-embedded-subscribe:hover {border:2px dotted #ff7d00; background:#FFF; }

	#mc_embed_signup .required {font:1em verdana; padding:2px 5px; width:310px;margin:5px 0;}
	#mc_embed_signup textarea {font:1em verdana; padding:5px; width:340px; height:100px; }

	#mc_embed_signup .mce_inline_error {color:#FF0000; margin:0!important; padding:0!important}
	

	#mce-success-response {display:block; margin:20px 0; padding:20px; width:560px; background:#ffff00; color:#000000; font-weight:bold}


/* ============== Layout standard subpage - wide
*/	
	

#wrap-content-wide {background:url(../media/blockwide_top.png) no-repeat; float:left; width:960px; padding:25px 0 0 0 }
#maincontent-wide {}
	#content-wide {background:url(../media/blockwide_mid.png) repeat-y}
#content-wide-bottom {background:#FFF url(../media/blockwide_bottom.png) no-repeat; width:960px; height:39px}


#content-wide #breadcrumb {width:905px; border-bottom:1px solid #ededed; margin:0 0 0 20px; padding:0 0 0px 0; font:.8em verdana; color:#999}
	#content-wide #breadcrumb ul {float:left; width:730px; margin:0; padding:5px 0 0 0}
	#content-wide #breadcrumb li {display:inline}
		#content-wide #breadcrumb a:link, #content-wide #breadcrumb a:visited {color:#999; text-decoration:none; padding:1px}
		#content-wide #breadcrumb a:hover, #content-wide #breadcrumb a:active {text-decoration:underline; background:none; color:#999}

	#content-wide #printpage {background:url(../media/ico_print.png) no-repeat right center; float:left; width:75px; text-align:right; margin:0 15px 0 0; padding:5px 20px 0 0}
	
	#content-wide .addthis_toolbox {float:left; width:60px; line-height:20px}

#content-wide #maincontent-wide {width:900px; padding:0 20px 10px 20px; text-align:justify; line-height:20px}

	#content-wide #maincontent-wide h1, #content-wide #maincontent-wide h2, #content-wide #maincontent-wide h3,
	#content-wide #maincontent-wide h4, #content-wide #maincontent-wide h5, #content-wide #maincontent-wide h6 {padding:10px 0 5px 0; color:#ff7d00}

/* ============== Layout standard subpage - Drug Rate map
*/	

#map_drugrate_box {position:relative; width:900px; height:600px}
#map_drugrate_statsbox {position:absolute; top:20px; left:0; width:290px; background:#FFF; border:2px solid #ff7d00; font:.9em verdana;  z-index:1000}
#map_drugrate {position:absolute; top:0; right:0; z-index:10; color:#FFF;}


#map_drugrate_statsbox thead td {vertical-align:top; font-weight:bold; border-bottom:1px solid #ff7d00; padding:5px }

.table_col0 {width:25px; text-align:left; padding:0 0 0 5px}
.table_col1 {width:135px; border-right:1px solid #ff7d00}
.table_col2 {width:60px; text-align:right; border-right:1px solid #ff7d00; padding:0 5px}
.table_col3 {width:40px; text-align:right; padding:0 5px}

.table_col5 {font:.8em verdana; padding:10px 5px}

#tooltip {position: absolute; color:#FFF!important; border: 1px solid #FFF; background:#ff7d00; padding: 15px; opacity: 0.9; z-index: 3000;}