body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align:center;
	font-size: 12px;
	color: #505050;
	font-family: Arial, Helvetica, sans-serif;
}

.body-bg {
	background:url(/images/theme-climatechange.jpg) no-repeat 0px 13px;
}

.theme-select {
	font-size: 11px;
}
.content1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #369e0c;
}
.txtfeild {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	height: 15px;
	width: 250px;
}

form{
	margin:0px;
	padding:0px;
}

#outer{
	text-align:center;
	background:url(/images/header-bg-bar.gif) repeat-x ;
}
#inner-head {
 background:url(/images/landing-header.gif) no-repeat; 
 
 height:142px;
 
}
#inner-width,#inner-body{
	text-align:left;
	width:950px;
	margin:auto;
	/* IE hack */
	*width:950px;
}
#inner-body{
	padding-top:20px;
}

#header{
	height:65px;
}
#hsbcTop{
	text-align:right;
	margin-top:15px;
}
#climate-logo {
	-position:relative; 
	-top:-10px;
}

#ecogalaTop {
	line-height:50px;
	position:relative;
	-position:static;
	top:-10px;
	vertical-align:baseline;
}
#navLanding {
	line-height:13px;
}
#welcomeMsg {
	float:right;
	padding-right:10px;
	text-align:right;
}
#welcomeMsg .content {
}
#footer {
	clear:both;
	font-size:90%;
	margin-top:18px;
}


/* body */
.clear{
	clear:both;
}
.floatRight{
	float:right;
}
.floatLeft{
	float:left;
}


/* swap img */
a img{
	border:none;
}
.swapImg .hoverImg { 
	display:none; 
} 

.swapImg:hover { 
	border:none;
} 
.swapImg:hover .origImg{
	display:none;
}
.swapImg:hover .hoverImg { 
	position:relative; 
	left:0px; 
	top:0px; 
	display:inline;
}

/* box */
/* set millions of background images */
.t {background: url(/images/panel/box-top.gif) 0 0px repeat-x; height:inherit;margin-bottom:5px;}
.l {background: url(/images/panel/box-sideleft.gif) 0 0 repeat-y; height:inherit;}
.r {background: url(/images/panel/box-sideright.gif) 100% 0 repeat-y; height:inherit;}
.b {background: url(/images/panel/box-bottom.gif) 0 100% repeat-x ; height:inherit;}
.bl {background: url(/images/panel/corner-bottomleft.gif) 0px 100% no-repeat ; height:inherit;}
.br {background: url(/images/panel/corner-bottomright.gif) 100% 100% no-repeat; height:inherit;}
.tr {background: url(/images/panel/corner-topright.gif) 100% 0px no-repeat; height:inherit;} 
.header{
	height:29px;
	
}

.content{
	height:inherit;
	line-height:16px;
	padding:5px 5px 10px 10px;
}
.style {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;
	font-style: normal;
	font-weight: 600;
	font-variant: normal;
	color: #6b6b6b;
}
.style2 {
	font-size: 12px;
	color: #404040;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
}
.style3 {
	font-size: 12px;
	color: #787878;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.title3 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #404040;
	font-weight: 400;
}

.title4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #404040;
	font-weight: 400;
}

.title5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: 3BB100;
	font-weight:bold
}

.style4 {

	font-size: 12px;
	color: #373737;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
}
.style5 {
	font-size: 11px;
	color: #999999;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.style6 {
	font-size: 11px;
	color: #FF9C00;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.style7 {

	font-size: 12px;
	color: #404040;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.style8 {

	font-size: 12px;
	color: #404040;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.style9 {

	font-size: 11px;
	color: #8FCB51;
	line-height:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.style10 {
	font-size: 8px;
}
.style11 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;
	font-style: normal;
	font-weight: 600;
	font-variant: normal;
	color: #6b6b6b;
}
.style12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;
	font-style: normal;
	font-weight: 600;
	font-variant: normal;
	color: #FFFFFF;
}
.style13 {
	font-size: 10px;
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:normal;
}
.style14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;
	font-style: normal;
	font-weight: 600;
	font-variant: normal;
	color: #000000;
}


.link {
	font-size: 12px;
	color: FF9C00;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	font-weight: normal;
}
.error {
	font-size: 12px;
	color: #FF0000;
	font-family: Arial, Helvetica, sans-serif;
}
.title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 23px;
	color: #e98f00;
	font-weight: 400;
	line-height: normal;
	font: helvetica;
}
.title2 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: 46BB00;
	font-weight: normal;
}
.title3 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #505050;
	font-weight: 400;
}

.title6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FF9C00;
	font-weight: normal;
	line-height: normal;
}




/* top menu */
#topMenu {
	height:20px;
	left:10px;
	padding-bottom:10px;
	position:relative;
	top:30px;
	z-index:200;
	-top:20px;
	-float:right;
}

#topMenu2 {
	height:20px;
	left:10px;
	padding-bottom:10px;
	position:relative;
	top:-10px;
	z-index:100;
	-top:-10px;
	-float:right;
}

/* "Please Select" title related */
#pmenu li.drop a div {
	margin-right:12px;
}

#pmenu li.drop {
	margin-right:10px;
	/*background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ccc;
	border-right-color: #888;
	border-bottom-color: #555;
	border-left-color: #bbb;*/
}
/* Make the Title bg colour persist */
#pmenu li:hover > a {
	/* Non-IE 6 */
	color:#000000; 
	/*background: #FFF;*/
}
* html #pmenu li a:hover {
	/* IE */
	position: relative;
	color: #000000; 
	/*background: #FFF;*/
}
#pmenu li a:active,
#pmenu li a:focus {
	/* ALL - Title background colour when selected by tabbing */
	color: #000000; 
	/*background: #FFF;**/
}

/* Outter ul, same as #fourthLevelMenu ul */
#pmenu,
#pmenu ul {
	padding: 3px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
	float: left;
}

/* Set up the link size, color and borders */
#pmenu a,
#pmenu a:visited {
	display: block;
	text-decoration: none;
	text-align: left;
	color: #000000;
	line-height: 20px;
	border: 0px; 
	/*background: #FFF;*/
	padding: 1px 0px 1px 3px;	 
	/* This width determinds width of the drop down box */
	/* change it in section specific css */
	/*width: 190px;*/
}

/* Set up the list items */
#pmenu li ul li a,
#pmenu li ul li a:visited {
width:120px;
	border-top-width: .5px;
	border-right-width: 1px;
	border-bottom-width: .5px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ccc;
	border-right-color: #888;
	border-bottom-color: #555;
	border-left-color: #bbb;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	background:#F7F7F7
}
#pmenu li ul li a.last,
#pmenu li ul li a.last:visited {
	border-top-width: .5px;
	border-right-width: 1px;
	border-bottom-width: .5px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ccc;
	border-right-color: #888;
	border-bottom-color: #555;
	border-left-color: #bbb;
}
#pmenu li ul li a:hover {
	background: #FF9C00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	/* color: #F00; List item mouse over colour, use theme specific colour */
}

/* Set up the list items */
#pmenu li {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: 828282;
}
#pmenu li:hover {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: 828282;
	font-weight: bold;
}
#pmenu li ul {
	display: none;
}

/* For Non-IE and IE7, show item list on hover */
#pmenu li:hover > ul {
	display: block; 
	position: absolute; 
	top: 22px; 
	left: -1px; 
}

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {
	visibility: hidden;
	display: block; 
	position: absolute;
	padding: 7px 30px 30px 30px;
}

* html #pmenu li ul.img-nav {
	visibility: hidden;
	display: block; 
	position: absolute;
	padding: 17px 30px 30px 30px;
}


/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
	visibility: visible;
	left: -31px;
	top: 14px;
}

/* get rid of the table */
#pmenu table {
	position: absolute;
	border-collapse: collapse;
	top: 0;
	left: 0;
	z-index: 100;
	font-size: 1em;
}

.firstNavSelected{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: FFB540;
	font-weight: bold;
}
#pmenu li ul li.secondNavSelected a, #pmenu li ul li.secondNavSelected a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background:#86CE00
}

/*
******************************************************************
******************************************************************
******************************************************************
******************************************************************
******************************************************************
*/

/* index */
#index-about-col{
	width:197px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:197px;
}
#index-about,#index-about .b,#index-about .l,#index-about .r,
#index-about .br,#index-about .bl{
	height:auto;
	*height:199px;
}
#index-why-protect{
	margin-top:10px;
	padding:0px;
	text-align:center;
}

#index-content{
	margin:0px 15px;
	width:472px;
	padding:0px;
	float:left;
}
#index-content h2{
	padding:0px;
	margin:0px;
	font-weight:normal;
	font-size:17px;
	*font-size:19px;
}

#index-login-col{
	width:205px;
	padding:0px;
	float:left;
}
#index-login,#index-login .b,#index-login .l,#index-login .r,
#index-login .br,#index-login .bl{
	height:auto;
	*height:180px;

}
#index-login .content{
	height:146px;
}

#index-activities{
	margin-top:10px;
}
#index-activities,#index-activities .b,#index-activities .l,#index-activities .r,
#index-activities .br,#index-activities .bl{
	height:auto;
	*height:180px;
}
#index-activities  .content{
}


/* main */
#main-about{
	width:235px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:227px;
}
#main-about-content  .content{
	height:206px;
}
#main-content{
	margin:0px 10px;
	width:700px;
	padding:0px;
	float:left;
}
#main-content h2{
	padding:0px;
	margin:0px;
	font-weight:normal;
	font-size:17px;
	*font-size:19px;
}
#main-content .main_pic{
	margin-top:5px;
	height:433px;
	background:#DAFEDF;
	width:100%;
}

#main-login{
	width:205px;
	padding:0px;
	float:left;
}

#main-join-activity .content{
	overflow:hidden;
}

#main-quiz,#main-quiz .b,#main-quiz .l,#main-quiz .r,
#main-quiz .br,#main-quiz .bl{
	height:auto;
	*height:150px;
}

#main-join-activity,#main-join-activity .b,#main-join-activity .l,#main-join-activity .r,
#main-join-activity .br,#main-join-activity .bl{
	height:auto;
	-height:206px;
}

#main-mission {
margin-top:10px;
}

#main-account {
margin-bottom:10px

}

#main-news,#main-news .b,#main-news .l,#main-news .r,
#main-news .br,#main-news .bl{
	height:auto;
	*height:366px;
}
#main-news{
	background:#FFFFFF;
}
#main-glossary,#main-glossary .b,#main-glossary .l,#main-glossary .r,
#main-glossary .br,#main-glossary .bl{
	height:auto;
	-height:216px;
}
#main-glossary {
margin-top:10px;
}

#main-declare-msg {
position:relative;
top:180px;
left:40px;
color:#FF0000;
font-weight:bold;
font-size:12px;
visibility:hidden;
}

#main-declare-btn {
position:relative;
top:360px;
left:12px;
}


/* register */
#register-info-col{
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#register-info,#register-info .b,#register-info .l,#register-info .r,
#register-info .br,#register-info .bl{
	height:auto;
	*height:180px;
}
#register-info .content{
}
#register-content-col{
	width:620px;
	padding:0px 20px 20px 20px;
	float:left;
}


/* enquiry */
#enquiry-info-col{
	width:198px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:198px;
}
#enquiry-info,#enquiry-info .b,#enquiry-info .l,#enquiry-info .r,
#enquiry-info .br,#enquiry-info .bl{
	height:auto;
	*height:180px;
}
#enquiry-info .content{
}
#enquiry-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}

/* member */
#member-profile-info-col{
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#member-profile-info,#member-profile-info .b,#member-profile-info .l,#member-profile-info .r,
#member-profile-info .br,#member-profile-info .bl{
	height:auto;
	*height:240px;
}
#member-profile-info {
margin-bottom:6px;
}
#member-profile-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}
#submit-bill-info,#submit-bill-info .b,#submit-bill-info .l,#submit-bill-info .r,
#submit-bill-info .br,#submit-bill-info .bl{
	height:auto;
	*height:240px;
}

/* story */
#story-info-col {
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#story-info,#story-info .b,#story-info .l,#story-info .r,
#story-info .br,#story-info .bl{
	height:auto;
	*height:240px;
}
#story-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}

/* sharing */
#columnist-info-col {
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#columnist-info,#columnist-info .b,#columnist-info .l,#columnist-info .r,
#columnist-info .br,#columnist-info .bl{
	height:auto;
	*height:240px;
}
#columnist-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}

/* mission */
#mission-info-col {
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#mission-info,#mission-info .b,#mission-info .l,#mission-info .r,
#mission-info .br,#mission-info .bl{
	height:auto;
	*height:240px;
}
#mission-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}

/* book review */
#book-info-col {
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#book-info,#book-info .b,#book-info .l,#book-info .r,
#book-info .br,#book-info .bl{
	height:auto;
	*height:240px;
}
#book-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}

/* glossary */
#glossary-info-col {
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#glossary-info,#glossary-info .b,#glossary-info .l,#glossary-info .r,
#glossary-info .br,#glossary-info .bl{
	height:auto;
	*height:240px;
}
#glossary-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}


/* event */
#event-info-col{
	width:230px;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px;
}
#event-info,#event-info .b,#event-info .l,#event-info .r,
#event-info .br,#event-info .bl{
	height:auto;
	*height:240px;
}
#event-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}


/* ranking */
#ranking-info-col {
	width:230px !important;
	padding:0px;
	float:left;
	/* IE hack */
	*width:230px !important;
}
#ranking-info,#ranking-info .b,#ranking-info .l,#ranking-info .r,
#ranking-info .br,#ranking-info .bl{
	height:auto;
	*height:240px;
}
#ranking-content-col {
float:left;
padding:0px 20px 20px 20px;
width:620px;
}

.ranking-content-selected {
color:#FF0000;
}




/* quiz */

#quiz-archive{
	
	padding-bottom: 32767px;
	margin-bottom: -32767px; 
	width:300px;
	float:left;
}
#quiz-question{
	padding-bottom: 32767px;
	margin-bottom: -32767px; 
	float:right;
	width:500px;
	background:#aef;
}


#index-about .header{
	height:81px;
}
a {}
a:link { color: #045504; text-decoration: underline;  }
a:visited { color: #045504; text-decoration:underline; }
a:hover, a:visited:hover { color: #457E02;text-decoration:none;  }


.tablelink a {}
.tablelink a:link { color: #21291D; text-decoration: underline; }
.tablelink a:visited { color: #21291D; text-decoration:underline; }
.tablelink a:hover, a:visited:hover { color: #21291D;text-decoration:none;  }