/* //////////////////////////////////////////////// structure //////////////////////////////////////////////// */	


body {
	margin: 0 0;
	padding: 0 0;
	color: #336699;
	font-family: Arial;
	font-size: 13px;
	line-height: 17px;
	background: #fff url(/image/circles.gif) 0 0 no-repeat; 
	}
	
#top {
	margin: 0 0;
	padding: 0 0;
	width: 922px;
	}

#top:after, 
.funder:after,
.partner:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	}

#header {
	margin: 0 0;
	padding: 0 0;
	height: 158px;
	}

#nav {
	margin: 0 0;
	padding: 0 0;
	width: 198px;
	float: left;
	}

#content {
	margin: 0 0 0 24px;
	padding: 0 0;
	width: 700px;
	float: left;
	}

#mainpromo a {
	color: orange;
	}

#mainpromo {
	margin: 0 0 16px 0;
	padding: 36px 40px;
	height: 228px;/*  */
	color: white;
	background-color: #336699;
	}

#mainpromo:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	}
		
#footer {
	height: 100px;
	margin: 30px 0 0 0;
	padding: 10px 0 0 30px;
	color: #999;
	background: #fff url(/image/footer-bg.jpg) 0 0 repeat-x;
	}
	
	
div.embed {
	margin: 30px 20px;
	}
	


/* //////////////////////////////////////////////// header //////////////////////////////////////////////// */	

#header h1 {
	display: block;
	float: left;
	margin: 0 0;
	padding: 0 0;
	width: 312px;
	height: 158px;
	text-indent: -3000px;
	background: transparent url(../image/hklb.gif) 0 0 no-repeat;
	}

#header h1 a {
	display: block;
	float: left;
	margin: 0 0;
	padding: 0 0;
	width: 312px;
	height: 158px;
	text-indent: -3000px;
	background: transparent url(../image/hklb.gif) 0 0 no-repeat;
	}

#header p#statelink {
	margin: 0;
	padding: 24px 0 0 0;
	width: 230px;
	position: relative;
	left: 712px;
	}

#header p#statelink a {
	text-indent: -3000px;
	display: block;
	margin: 0;
	padding: 0 0;
	width: 230px;
	height: 39px;
	background: transparent url(/image/state-link.gif) 0 0 no-repeat;
	}

#header p#statelink a:hover {
	background: transparent url(/image/state-link.gif) 0 -39px no-repeat;
	}


/* //////////////////////////////////////////////// main nav //////////////////////////////////////////////// */	

ul#mainnav {
	width: 198px;	
	margin: 0;
	padding: 0;
	float: left;
	font-size: 12px;
	}
	
ul#mainnav li {
	list-style-type: none;
	margin: 0 0 7px 0;
	padding: 0 0;
	list-style-type: none;
	}

ul#mainnav a {
	color: orange;
	}

ul#mainnav li a.stz {
	text-indent: -3000px;
	display: block;
	margin: 0 0;
	padding: 0 0;
	width: 198px;
	height: 39px;
	}
	
ul#mainnav li#mn1 a.stz {
	background: transparent url(../image/nav.gif) 0 0 no-repeat;
	}

ul#mainnav li#mn1 a:hover.stz {
	background: transparent url(../image/nav.gif) 0 -350px no-repeat;
	}

ul#mainnav li#mn2 a.stz {
	background: transparent url(../image/nav.gif) 0 -46px no-repeat;
	}

ul#mainnav li#mn2 a:hover.stz {
	background: transparent url(../image/nav.gif) 0 -396px no-repeat;
	}

ul#mainnav li#mn2 {
	background: transparent url(../image/mn2.gif) 0 0 no-repeat;
	}

ul#mainnav li#mn3 a.stz {
	background: transparent url(../image/nav.gif) 0 -92px no-repeat;
	}

ul#mainnav li#mn3 a:hover.stz {
	background: transparent url(../image/nav.gif) 0 -442px no-repeat;
	}

ul#mainnav li#mn4 a.stz {
	background: transparent url(../image/nav.gif) 0 -138px no-repeat;
	}

ul#mainnav li#mn4 a:hover.stz {
	background: transparent url(../image/nav.gif) 0 -488px no-repeat;
	}

ul#mainnav li#mn4 {
	background: transparent url(../image/mn4.gif) 0 0 no-repeat;
	}

ul#mainnav li#mn5 a.stz {
	background: transparent url(../image/nav.gif) 0 -184px no-repeat;
	}

ul#mainnav li#mn5 a:hover.stz {
	background: transparent url(../image/nav.gif) 0 -534px no-repeat;
	}

ul#mainnav li ul#subabout, ul#mainnav li ul#subget {
	display: none;
	padding: 6px 0 18px 40px;
	line-height: 18px;
	}

ul#mainnav li ul#subabout li, ul#mainnav li ul#subget li {
	margin: 0;
	}


/* //////////////////////////////////////////////// trainings //////////////////////////////////////////////// */	

.trainingspage ul#mainnav li#mn1 a.stz {
	background: transparent url(../image/nav.gif) 0 -350px no-repeat;
	}

.trainingspage #mainpromo {
	background: #336699 url(/image/promo-trainings.gif) 0 0 no-repeat;
	}

.trainingspage #mainpromo #promotext {
	width: 220px;
	}

.description {
	background-color: #eee;
	padding: 18px;
	margin-bottom: 20px;
	}

.upcoming {
	margin: 18px 0 18px 0;
	padding: 18px;
	background-color: #fff;
}

.upcoming h4 {
	margin-top: 0;
}

.training h4 {
	margin-bottom: 0;
}

.training p {
	margin: 0;
}

h4.block {
	border-bottom: 2px solid #ddd;
	color: #888;
	display: block;
	font-size: 15px;
	margin: 0 0 14px;
	padding: 0 0 8px;
	}


/* //////////////////////////////////////////////// about //////////////////////////////////////////////// */	

.aboutpage ul#mainnav li#mn2 a.stz {
	background: transparent url(../image/nav.gif) 0 -396px no-repeat;
	}

.aboutpage ul#mainnav li ul#subabout {
	display: block;
	}
	
.who ul#subabout li#suba1 a, .trainers ul#subabout li#suba2 a, .partners_funders ul#subabout li#suba3 a {
	color: white;
	}

.who ul#subabout li#suba1 a:hover, .trainers ul#subabout li#suba2 a:hover, .partners_funders ul#subabout li#suba3 a:hover {
	text-decoration: none;
	}

.aboutpage #mainpromo #promotext {
	width: 330px;
	}

.aboutpage #mainpromo {
	height: 288px;/*  */
	background: #336699 url(/image/promo-about.gif) 0 0 no-repeat;
	}

.logo {
	float: left;
	display: block;
	margin: 3px 18px 18px 0;
	padding: 8px;
	border: 1px solid #ccc;
	}
	
#partners {
	margin-bottom: 18px;
	}


.trainer h3, .partner h3, .funder h3 {
	font-size: 15px;
	margin: 0;
	padding: 0;
	display: block;
	/* font-weight: normal; */
	color: #336699;
	background: transparent none;
	}
	
.trainer p, .partner p, .funder p {
	margin-top: 8px;
	}

	
/* //////////////////////////////////////////////// materials and resources //////////////////////////////////////////////// */	

.materialspage ul#mainnav li#mn3 a.stz {
	background: transparent url(../image/nav.gif) 0 -442px no-repeat;
	}

.materialspage #mainpromo {
	background: #336699 url(/image/promo-materials.gif) 0 0 no-repeat;
	}

.materialspage #mainpromo #promotext {
	width: 250px;
	}

.materialspage p {
	margin-top: 0;
	}

.materialspage h4 {
	margin-bottom: 0;
	}
	
/* //////////////////////////////////////////////// get involved //////////////////////////////////////////////// */	

/*
.getinvolvedpage ul#mainnav li ul#subget {
	display: block;
	}
*/

.getinvolvedpage ul#mainnav li#mn4 a.stz {
	background: transparent url(../image/nav.gif) 0 -488px no-repeat;
	}
	
.ways ul#subget li#subg1 a, .betrain ul#subget li#subg2 a, .befund ul#subget li#subg3 a {
	color: orange;
	}

.ways ul#subget li#subg1 a:hover, .betrain ul#subget li#subg2 a:hover, .befund ul#subget li#subg3 a:hover {
	text-decoration: none;
	}

.getinvolvedpage #mainpromo #promotext {
	width: 480px;
	margin: 0;
	padding: 0;
	}

.getinvolvedpage #mainpromo {
	height: 288px;/*  */
	background: #336699 url(/image/promo-getinvolved.gif) 0 0 no-repeat;
	}

.getinvolvedpage #mainpromo #promotext {
	width: 330px;
	}

#become_a_trainer {
	margin-bottom: 24px;
	}

	
/* //////////////////////////////////////////////// contact //////////////////////////////////////////////// */	

.contactpage ul#mainnav li#mn5 a.stz {
	background: transparent url(../image/nav.gif) 0 -534px no-repeat;
	}

.contactpage #mainpromo {
	background: #336699 url(/image/promo-contact.gif) 0 0 no-repeat;
	}
	
.contactpage #mainpromo.deux {
	background: #336699 url(/image/promo-contact2.gif) 0 0 no-repeat;
	}


.contactpage #mainpromo .contacttext {
	float: left;
	margin: 0;
	padding: 24px;
	width: 254px;
	background: #336699 url(/image/promo-blue.gif) 0 0 no-repeat;
	}

.contactpage #mainpromo .contacttext+.contacttext {
	float: right;
	background: #336699 url(/image/promo-blue.gif) -200px 0 no-repeat;
	}

#mainpromo .contacttext h3 {
	margin: 0;
	}

#mainpromo .contacttext h4 {
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: white;
	}

.contactpage #mainpromo #promotext h3 {
	margin: 0 0 8px 0;
	}

.contactpage #mainpromo #promotext p {
	margin-top: 0;
	}

.contactpage #mainpromo #promotext h4 {
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: white;
	}

/* //////////////////////////////////////////////// homepage //////////////////////////////////////////////// */	


.homepage #mainpromo {
	background: #336699 url(/image/feature-image.gif) 0 0 no-repeat;
	}

.homepage #mainpromo #promotext {
	margin: 0 0;
	padding: 0 0 0 410px;
	}

.homepage #mainpromo #promotext p {
	margin: 20px 0 22px 0;
	}

.homepage #mainpromo #promotext a {
	text-indent: -3000px;
	display: block;
	margin: 0 0;
	padding: 0 0;
	width: 250px;
	height: 39px;
	background: orange url(/image/read-more.gif) 0 0 no-repeat;
	}

#news {
	font-size: 12px;
	float: left;
	margin: 0 0;
	padding: 0 0;
	width: 476px;
	}

#news h3 {
	margin: 0 0;
	padding: 0 0;
	display: block;
	width: 476px;
	height: 39px;
	color: white;
	text-indent: -3000px;
	background: #336699 url(/image/title-news.gif) 0 0 no-repeat;
	}


#news h4 {
	font-size: 14px;
}

#upcoming {
	font-size: 12px;
	float: left;
	margin: 0 0 0 24px;
	padding: 0 0;
	width: 200px;
	}

#upcoming h3 {
	margin: 0 0;
	padding: 0 0;
	display: block;
	width: 200px;
	height: 39px;
	color: white;
	text-indent: -3000px;
	background: #336699 url(/image/title-upcoming.gif) 0 0 no-repeat;
	}
	
	
/* //////////////////////////////////////////////// index nav //////////////////////////////////////////////// */	

.splashpage h1 {
	display: block;
	margin: 0 0;
	padding: 0 0;
	width: 600px;
	height: 111px;
	text-indent: -3000px;
	background: transparent url(/image/hklb-splash.gif) center 0 no-repeat;
	}

.splashpage {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	background: #e1e7ee none;
	}

#splash {
	width: 600px;	
	margin: 50px auto;
	padding: 34px 50px 50px 50px;
	color: black;
	background-color: white;
	}

.splashpage p {
	margin: 30px 0;
	}

ul#splashnav {
	width: 600px;	
	margin: 0;
	padding: 0;
	}
	
ul#splashnav li {
	list-style-type: none;
	margin: 4px 0 0 0;
	padding: 0 0;
	list-style-type: none;
	}

ul#splashnav li a {
	text-indent: -3000px;
	display: block;
	margin: 0 0;
	padding: 0 0;
	width: 600px;
	height: 90px;
	background-color: orange;
	}

ul#splashnav li a:hover {
	background-color: #336699;
	}

ul#splashnav li#sm1 a {
	background: orange url(/image/splash-buttons.gif) 0 0 repeat-x;
	}

ul#splashnav li#sm1 a:hover {
	background: orange url(/image/splash-buttons.gif) -600px 0 repeat-x;
	}

ul#splashnav li#sm2 a {
	background: orange url(/image/splash-buttons.gif) 0 -90px repeat-x;
	}

ul#splashnav li#sm2 a:hover {
	background: orange url(/image/splash-buttons.gif) -600px -90px repeat-x;
	}

ul#splashnav li#sm3 a {
	background: orange url(/image/splash-buttons.gif) 0 -180px repeat-x;
	}

ul#splashnav li#sm3 a:hover {
	background: orange url(/image/splash-buttons.gif) -600px -180px repeat-x;
	}


/* //////////////////////////////////////////////// text //////////////////////////////////////////////// */	
	
h1, h2, h3, h4 {
	color: #336699;
	margin-top: 18px;
	margin-bottom: 18px;
}

h2 {
	font-size: 19px;
	margin-top: 0;
	line-height: 24px;
}

h3 {
	font-size: 15px;
	margin: 0;
	padding: 11px 14px;
	display: block;
	/* font-weight: normal; */
	color: white;
	background: #336699 url(/image/blue.gif) 0 0 no-repeat;
}

p {
	margin-top: 18px;
	margin-bottom: 18px;
}

a, a:active {
	color: #F78A00;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

hr {
	margin: 18px 0 18px 0;
	padding: 0 0;
	height: 2px;
	background-color: #dedede;
	color: #dedede;
	border: none;
}

ul {
	padding: 0 0 0 15px;
	}

ul li {
	margin: 0 0 6px 0;
	}

ol {
	padding: 0 0 0 20px;
	}
	
ol li {
	margin: 0 0 6px 0;
	}

ol li ul li {
	margin: 0;
	}

h2.block {
	margin: 0;
	padding: 20px 20px;
	display: block;
	/* font-weight: normal; */
	color: white;
	background: #336699 url(/image/blue.gif) 0 0 no-repeat;
}

#mainpromo h2, #mainpromo h3 {
	color: white;
	padding: 0;
	background: transparent none 0 0 no-repeat;
	}
	
#mainpromo a.block {
	margin: 0;
	padding: 8px 11px;
	display: block;
	/* font-weight: normal; */
	color: white;
	background: orange url(/image/orange.gif) 0 0 no-repeat;
}

#mainpromo a.block+a.block {
	margin-top: 5px;
}

a.block:hover {
	text-decoration: underline;
	}