/*------------------------------------
		reset CSS
-----------------------------------------*/
html, body, div, span,object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em,img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/*-----------------------------------
			General
---------------------------------------*/
body{
	background-color: #b6eaff;
	background-image: url(../images/asset/body_bg.jpg);
	background-repeat: repeat-x;
	font-family: 'Comic Sans MS',Arial, sans-serif;
}

h1{
	font-size:1.5em;
	padding-top:1px;
	margin-bottom:24px;
}

h2{
	margin-bottom:2px;
}

h3{
	margin-bottom:5px;
	font-size:1.4em;
}

h6{
	font-size:1.4em;
	margin-top:46px;
	font-weight: normal;
	line-height:24px;
	
}
p{
	font-size:0.8em;
	font-weight: bold;
	word-spacing: -3px;
	line-height:24px;
}

li{
	font-size:0.8em;
	font-weight: bold;
	line-height:24px;
	word-spacing: -3px;
}
a{
	color:#2d9ed7;
	text-decoration:none;
}

a:hover{
	color:#2d9ed7;
	text-decoration:underline;
}

img.imgContent{
margin-bottom:3px;
} 

img.aboutImg{
	float:left;
	margin-top:10px;
	margin-right:7px;
}

.clr{
	clear:both;
}

/* --------------------------------------
		Menu
	-------------------------------------*/
div.menu a:hover{
	cursor:pointer; 
}

div.menu{
	position:absolute;
	top:280px;
	/*border: 1px solid blue;*/
	
}

div.homeButton{
	position:relative;	
	width:176px;
	height:90px;
	top:91px;
	left:20px;	
	overflow:hidden;
	
}

div.homeButton a:hover{
	position:relative;
	top:-90px;
}


div.whyButton{
	position:relative;	
	width:191px;
	height:99px;
	top:65px;
	left:13px;
	overflow:hidden;
	
}

div.whyButton a:hover{
	position:relative;
	top:-99px;
}

div.topButton{
	position:relative;	
	width:208px;
	height:90px;
	top:40px;
	overflow:hidden;

}

div.topButton a:hover{
	position:relative;
	top:-90px;
}

div.getButton{
	position:relative;
	width:193px;
	height:95px;
	top:33px;
	left:20px;
	overflow:hidden;
	
}

div.getButton a:hover{
	position:relative;
	top:-95px;
}

div.fundButton{
	position:relative;	
	width:202px;
	height:113px;
	overflow:hidden;
	
}

div.fundButton a:hover{
	position:relative;
	top:-113px;
}

/*-------------------------------------
			firstLayer
--------------------------------------*/
div.firstLayer{
	position:relative;
	width:1024px;
	height:768px;
	background-image: url(../images/asset/recykids_bg.jpg);
	background-repeat: repeat-x;
	margin:0 auto;
	z-index:1;
}
div.logo{
	position:relative;
	z-index:2;
	margin:0;
	padding:0;
	width:296px;
}

div.compSign{
	position:relative;
	width:283px;
	height:224px;
	overflow:hidden;
	top:-8px;
	z-index:2;
	
}

div.compSign a:hover{
	position:relative;
	top:-224px;
}

div#iceVan{
	position:absolute;
	top:290px;
	left:275px;
}

/*-------------------------------------
			secondLayer
--------------------------------------*/


div.secondLayer{
	position:absolute;
	width:1024px;
	height:768px;
	background-image: url("../images/asset/secondlayer.gif");
	background-position: bottom left;
	background-repeat: no-repeat;
	bottom:0;
}

/* --------------------------------------
            Loading
-------------------------------------*/
#loadingMainContent {
    z-index:20;
    position:absolute;
    top:350px;
    left:412px;
}

#loadingMessage{
	z-index:20;
    position:absolute;
    top:380px;
    left:417px;
}


#loadingMessage span#percentage{
	font-size:33px;
	color:#034694;
}

#maskLoading{
	position:relative;
	z-index:20;
	margin:-381px auto 0 auto;
	width:1024px;
	height:789px;
	background-color: #b6eaff;
	background-image: url(../images/asset/body_bg.jpg);
	background-repeat: repeat-x;
}

/* --------------------------------------
            Main content
	-------------------------------------*/
div#mainContent{
	position:absolute;
	width:820px;
	height:768px;	
	/*border:solid red 1px;*/
	right:0;
}

div.notePad{
	position:absolute;
	width:556px;
	height:762px;	
	background-image: url("../images/asset/notepad.png");
	background-position: top left;
	background-repeat: no-repeat;
	right:35px;
	top:10px;
	/*border:solid yellow 1px;*/
}

div.notePadContent{
	width:456px;
	height:615px;
	margin-top:48px;
	margin-left:45px;
}

table.tableGetInvolved{
	table-layout:fixed;
	font-size:0.8em;
	font-weight: bold;
	word-spacing: -3px;
	width:435px;
	margin-top:10px;
	background-image: url(../images/asset/tablebg.png);
	background-position: top left;
	background-repeat: repeat-y;
	padding:10px;
	text-align:center;
	
}

tbody tr { 
	width:405px;
	border-bottom: 1px solid #999;
}
td{
	padding-bottom:7px;
	border-bottom:dotted 1px #2d9ed7;
}

tbody td a { color:#363636;
 text-decoration:none;
}

tbody td a:hover { text-decoration:underline;
}
tbody th a { color:#363636;
 font-weight:normal;
 text-decoration:none;
}
tbody th a:hover { color:#363636;
}

tbody th, tbody td { 
}
tfoot td { background:#5C443A;
 color:#FFFFFF;
}
.odd { background:#fff;
}

a.pdfIcon{
	margin-right:20px;
}


p.aboutMarg1{
	margin-bottom:1px;
}

p.aboutMarg2{
	margin-bottom:3px;
}
/* --------------------------------------
               Footer
-------------------------------------*/
div.footer{
	position:relative;
	width:1024px;
	margin:0 auto;
	/*border: 1px solid #999;*/
	font-size:0.9em;
	font-weight:normal;	
}



div.footer ul{
	float:right;
	padding-right:40px;
}
div.footer li{
	display:inline;
	float:left;
	color:#000;
	padding-left:20px;
}

div.footer a{
	color:#000;
}

div.footer p{
	padding-left:40px;
}


/* -----------------------------
            Why Recycle
-------------------------------*/
div.cloudTipContainer{
	background-image: url(../images/asset/cloud.png);
	background-repeat:no-repeat;
	position:absolute;
	width:484px;
	height:350px;
	right:73px;
}

div.cloudTipContainer div.cloudContent{
	width:435px;
	height:224px;
	margin-top:65px;
	margin-left:25px;
}

div.cloudTipContainer div.cloudContent p{
line-height:18px;
}

img.tutorial{
margin-left:20px;
margin-top:10px;
}

img.cloudImg{
	float:left;
	margin-right:10px;
	width:auto;
	height:auto;
}

div#metals{
	position:absolute;	
	width:121px;
	height:99px;
	top:400px;
	left:107px;
	overflow:hidden;
}

div#metals a:hover{
	position:relative;
	top:-99px;
}

div#metals.active a{
	position:relative;
	top:-99px;
}

div#rubbish{
	position:absolute;	
	width:121px;
	height:119px;
	top:425px;
	left:210px;
	overflow:hidden;
}

div#rubbish a:hover{
	position:relative;
	top:-119px;
}

div#rubbish.active a{
	position:relative;
	top:-119px;
}


div#paper{
	position:absolute;	
	width:96px;
	height:67px;
	top:448px;
	left:385px;
	overflow:hidden;
}


div#paper a:hover{
	position:relative;
	top:-67px;
}

div#paper.active a{
	position:relative;
	top:-67px;
}

div#oil{
	position:absolute;	
	width:70px;
	height:117px;
	top:410px;
	left:720px;	
	overflow:hidden;
}

div#oil a:hover{
	position:relative;
	top:-117px;
}

div#oil.active a{
	position:relative;
	top:-117px;
}


div#inkjet{
	position:absolute;	
	width:146px;
	height:111px;
	top:486px;
	left:425px;	
	overflow:hidden;
}

div#inkjet a:hover{
	position:relative;
	top:-111px;
}

div#inkjet.active a{
	position:relative;
	top:-111px;
}

div#plastic{
	position:absolute;	
	width:163px;
	height:147px;
	bottom:120px;
	left:69px;
	overflow:hidden;
}

div#plastic a:hover{
	position:relative;
	top:-147px;
}

div#plastic.active a{
	position:relative;
	top:-147px;
}

div#electronic{
	position:absolute;	
	width:261px;
	height:123px;
	bottom:0;
	left:30px;
	overflow:hidden;
}

div#electronic a:hover{
	position:relative;
	top:-123px;
}

div#electronic.active a{
	position:relative;
	top:-123px;
}

div#phones{
	position:absolute;	
	width:171px;
	height:163px;
	bottom:0;
	left:550px;
	overflow:hidden;
}

div#phones a:hover{
	position:relative;
	top:-163px;
}

div#phones.active a{
	position:relative;
	top:-163px;
}



/* -----------------------------
           top Recycling
-------------------------------*/
div#parents{
	position:absolute;	
	width:134px;
	height:81px;
	top:409px;
	left:2px;
	overflow:hidden;
}

div#parents a:hover{
	position:relative;
	top:-84px;
}

div#parents.active a{
	position:relative;
	top:-84px;
}

div#posters{
	position:absolute;	
	width:110px;
	height:88px;
	top:410px;
	left:170px;
	overflow:hidden;
}

div#posters a:hover{
	position:relative;
	top:-90px;
}

div#posters.active a{
	position:relative;
	top:-90px;
}

div#clubs{
	position:absolute;	
	width:114px;
	height:81px;
	top:417px;
	right:323px;
	overflow:hidden;
}

div#clubs a:hover{
	position:relative;
	top:-81px;
}

div#clubs.active a{
	position:relative;
	top:-81px;
}

div#school{
	position:absolute;	
	width:174px;
	height:113px;
	top:358px;
	right:60px;
	overflow:hidden;
}

div#school a:hover{
	position:relative;
	top:-113px;
}

div#school.active a{
	position:relative;
	top:-113px;
}

div#ideas{
	position:absolute;	
	width:105px;
	height:107px;
	top:438px;
	right:0;
	overflow:hidden;
}

div#ideas a:hover{
	position:relative;
	top:-107px;
}

div#ideas.active a{
	position:relative;
	top:-107px;
}

div#parentsWork{
	position:absolute;	
	width:153px;
	height:81px;
	top:525px;
	left:114px;
	overflow:hidden;
}

div#parentsWork a:hover{
	position:relative;
	top:-81px;
}

div#parentsWork.active a{
	position:relative;
	top:-81px;
}

div#letter{
	position:absolute;	
	width:174px;
	height:118px;
	top:514px;
	right:279px;
	overflow:hidden;
}

div#letter a:hover{
	position:relative;
	top:-118px;
}

div#letter.active a{
	position:relative;
	top:-118px;
}

div#coloring{
	position:absolute;	
	width:170px;
	height:150px;
	top:618px;
	left:8px;
	overflow:hidden;
}

div#coloring a:hover{
	position:relative;
	top:-150px;
}

div#coloring.active a{
	position:relative;
	top:-150px;
}

div#printer{
	position:absolute;	
	width:238px;
	height:128px;
	top:640px;
	left:230px;
	overflow:hidden;
}

div#printer a:hover{
	position:relative;
	top:-128px;
}

div#printer.active a{
	position:relative;
	top:-128px;
}
div#askaround{
	position:absolute;	
	width:175px;
	height:200px;
	top:568px;
	right:0px;
	overflow:hidden;
}

div#askaround a:hover{
	position:relative;
	top:-200px;
}

div#askaround.active a{
	position:relative;
	top:-200px;
}
/* --------------------------------------
                Tips
-------------------------------------*/
/* Hide the content of all the tips */

.tipContent {
    display : none;
    
}

/* --------------------------------------
	Fundometer
-------------------------------------*/
div.fundometerContainer{
  margin-top:19px;
}

div.fundometerContainer #txtSchool{
    width:280px;
	font-size:13px;
}

div.topCollector{
	position:absolute;
	top:340px;
	left:220px;
}

div.topCollector h3{
	margin-bottom:5px;
	margin-right:20px;
}

div.topCollector ol{
	margin-left:43px;
}

#loadingFundo{
    position:absolute;
    display:none;
}

div.fundometer {
	position:relative;
	width:161px;
	height: 385px;
	margin-top:26px;
	background-image: url(../images/asset/fund_bg.png);
	float:left;
	
}

div.fundometer img {
	position:absolute;
	z-index:2;
	
}

div.fundometer div.value {
	position:absolute;
	bottom:0;
	margin-left:auto;
	margin-right:auto;
	left:7px;
	right:0;
	bottom:126px;
	background-image: url(../images/asset/fund_pat.png);
	background-repeat:repeat-y;
	width:65px;
	max-height:243px;
	
}

div.fundometer div.objective {
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	background-image: url(../images/asset/fund_targ.png);
	background-repeat:no-repeat;
	width: 100px;
	height: 8px;
	
	z-index:1;
}
div.targetValue{
	position:relative;
	left:40px;
	margin-top:20px;
	
	
}

div.targetValue span{
	position:relative;
	bottom:10px;
	
}

div.raisedValue{
	position:relative;
	left:40px;
	bottom:15px;
}

div.raisedValue span{
	position:relative;
	bottom:2px;	
}


/* -----------------------------
            Quiz
--------------------------------*/
div#quizIntro img.halfords{
	float:left;
	margin-bottom:20px;
}

div#quizIntro img.bike{
	float:right;
}

div.startQuizz{
	position:absolute;
	height:215px;
	bottom:100px;
	overflow:hidden;
}

div.startQuizz a:hover{
	position:relative;
	top:-215px;
}

p.quizPara{
	margin-top:11px;
}
/* Feedback answer quiz */
div#feedback div {
    display:none;
}

span.error{
   color:red;
   font-weight:normal;
   word-spacing: normal;
   display:none;
   font-size:11px;
}

/* Succes submission form participant */
div.feedbackFormCompetition {
    margin-top:13px;
}

div.feedbackFormCompetition p{
    display:none;
    font-size:13px;
    margin-top:20px;
}

div.feedbackFormCompetition p.valid{
    color:green;
}

div.feedbackFormCompetition p.invalid{
    color:red;
}

ul#answers{
	list-style-type:upper-latin;
	margin-left:100px;
	margin-top:52px;
	
	
}
ul#answers li.answerStyle{
	font-size:1.1em;
	font-weight:normal;
	line-height:20px;
}


div.goodAnswer{
	color:green;
}

div.goodAnswer p.message{
	color:green;
	font-size:1.6em;
	margin-top:44px;
	margin-bottom:4px;
	text-decoration:underline;
}

div.wrongAnswer{
	color:red;
}

p.message{
	margin-top:49px;
	font-size:1.1em;
	font-weight:normal;
}

p.explanation{
	font-size:1.0em;
	font-weight:normal;
	word-spacing: normal;
}

div.nextBtn{
	position:absolute;
	right:80px;
	height:150px;
	overflow:hidden;
}

div.nextBtn a:hover{
	position:relative;
	top:-150px;
}


div.congratForm{
	width:440px;
	height:440px;
	margin-top:78px;
	background-image: url(../images/asset/form_bg.jpg);
	background-repeat:no-repeat;
}

div.congratForm img{
	margin-bottom:10px;
	margin-left:40px;
}

div.formParticipant{
	margin-left:85px;
	font-size:1.1em;
}
div.formParticipant div.fullInitialsContainer{
	margin-top:22px;
}

div.formParticipant fieldset{
	margin-top:22px;
}

div.formParticipant div.chooseSchoolContainer{
	margin-top:24px;
}

div.formParticipant #loadingSchool{
	position:absolute;
	margin-left:2px;
	display:none;
}

div.formParticipant div.congartClass{
	margin-top:23px;
}

div.congartRadio{
	margin-left:100px;
}


.txtSchoolQuiz{
        width:350px;
}

/* Auto complete list */
ul.auto-complete-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 100;
	max-height: 250px;
	overflow: auto;
}

ul.auto-complete-list li {
	list-style-type: none;
	margin: 0;
	padding: 2px;
	background-color: white;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid black;
	cursor: pointer;
        font-size:0.8em;
        font-weight:normal;
        word-spacing:0px;
}

ul.auto-complete-list li.auto-complete-list-rollover {
	background-color: #c5c5c5;
}

ul.auto-complete-list .auto-complete-striped {
	background-color: #D7EEF9;
}

input[type="button"]#btnEnter{
	margin-top:10px;
}

/* -----------------------------
            Contact Us
--------------------------------*/
div.phoneNumber{
	width:400px;
	margin-top:26px;
}

div.phoneNumber img{
	float:left;
}

div.email{
	width:400px;
	margin-top:22px;
}
div.email img{	
	float:left;
}

div.address{
	margin-top:26px;
}
address{
	background-image: url(../images/asset/envelope_bg.png);
	background-repeat:no-repeat;
	width:364px;
	height:211px;
	margin-top:10px;
	padding:30px;
}

/* --------------------------------------
         Recommend recycling form
-----------------------------------------*/
form#recommendForm span.error{
   color:red;
   font-weight:normal;
   word-spacing: normal;
   display:none;

}
form#recommendForm li{
	list-style-type: none;
}

form#recommendForm span.label{
	display:block;
	width:150px;
	font-size:0.8em;
	padding-top:3px;
	float:left;
}

li.message{
	margin-top:13px;
}

form#recommendForm li.test{
	list-style-type: none;
	height:60px;
}

form#recommendForm li.emailSender{
	margin-top:13px;
}

form#recommendForm li.emailSchool{
	margin-top:13px;
}

span.clr{
	display:block;
}

form#recommendForm input[type=text]{
	padding:3px;
	border: 2px solid #f57900;
	background:transparent;
	background-image: url(../images/asset/input_bg.png);
	background-repeat: repeat-x;
}

.Submitbtn{
	margin-top:10px;
	margin-left:25px;
	margin-right:10px;
	
}

.Submitbtn:hover{
	background-image: url(../images/asset/submit_hover.png);
}

form#recommendForm textarea{
	border: 2px solid #f57900;
	padding:3px;
	background:transparent;
	background-image: url(../images/asset/input_bg.png);
	background-repeat: repeat;
}


input[type=text]{
	padding:3px;
	border: 2px solid #f57900;
	background:transparent;
	background-image: url(../images/asset/input_bg.png);
	background-repeat: repeat-x;
	font-size: 12px;
}

form#recommendForm li.buttons span{
    display:none;
}

form#recommendForm li.buttons span.feedbackEmailRecommendSuccess{
    color:green;
}

form#recommendForm li.buttons span.feedbackEmailRecommendFailed{
    color:red;
}