@charset "UTF-8";
/* CSS Document */
body {background-color:#ffd427; font-family: 'Exo', "Microsoft JhengHei", "apple LiGothic Medium", sans-serif}
.contentwrapper {width:100%; height:17330px; position: absolute;}

/*.parallax-layer{
	position: fixed;
	top:50%; margin-top:-93.5px; width:100%; height:187px; overflow:hidden;
	z-index: 2;
}*/
#ricebowl { left:50%; margin-left:-50.5px; top:500px;/* top:50%; margin-top:-93.5;*/ width:135px; height:187px; background: transparent url(../images/ricebowl-ani.png); position: absolute; overflow:hidden; z-index:2; }

#bottomTips { bottom:4em; position: fixed; width:100%; height: 3.5em; background-color:#000; background: rgba(0,0,0,0.6); z-index:1000;}
.textbox { color: #fff; text-align:center; width: 100%; height: 1.5em; z-index: 2; cursor: pointer; overflow: hidden; font-family: 'Exo', "Microsoft JhengHei", "apple LiGothic Medium", sans-serif; margin-top:1em; position:relative;}
.textbox a {color: #fff;  font-size:1em; line-height: 1em;}
.textbox div { position: absolute; left:50%; width: 600px; margin-left:-300px;}
#alert { opacity:0; z-index:-1; width:100%; height:100%; background-color: #F90; background: rgba(255,153,0,0.8); position: relative; margin-top:-2.5em;}

.textbox a:hover { color:#F60;}
.largeText { font-size: 1.4em; line-height:1.3em; font-weight:900;}

/*#more { position:absolute; width:180px; left:-90px; top:-90px; z-index:103;}
#more img { width:100%; height:100%;}*/
.more { font-size: 0.7em; font-weight:200; color:#FF9;}
#tips { position: fixed; bottom:107px; left:50%; margin-left:-230px; z-index:1000;}
#tips img { width:130px;}

.section {  z-index:10; border:dashed #000 thin; width:100%;}
.mask {  width:1498px; height:16000px; left:50%; top:0; margin-left:-749px; background: url(../images/yellow-mask.png) repeat-y;}

.mask {position: absolute;  z-index:10;}

#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9, #section10, #section11, #section12, #section13, #section14, #section15, #section16 { position:absolute; left:50%; margin-left:-749px; overflow:hidden; width:1498px; z-index:3;}

#section1 {height:1530px; top:876px;}
#section2 {height:590px; top:2406px;}
#section3 {height:1020px; top:2776px;}
#section4 {height:1050px; top:3666px;}
#section5 {height:709px; top:4710px;}
#section6 {height:990px; top:5419px;}
#section7 {height:680px; top:6329px;}
#section8 {height:912px; top:6939px;}
#section9 {height:912px; top:7851px;}
#section10 {height:1112px; top:8763px;}
#section11 {height:912px; top:9875px;}
#section12 {height:729px; top:10861px;}
#section13 {height:936px; top:11550px;}
#section14 {height:1346px; top:12486px;}
#section15 {height:1436px; top:13632px;}
#section16 {height:1064px; top:15005px;}
#section17 {height:1434px; top:15349px; position:absolute; left:50%; margin-left:-749px; overflow:hidden; width:1498px; z-index:12;}
#road, #indextop { position: absolute; left:50%; overflow:hidden;}

#intro { position: absolute; left:50%; margin-left:-437px; top:1020px; z-index:3; overflow:hidden; height:558px;}
h1 { color: rgba(255,213,39,0);}
intro p { color: rgba(255,213,39,0);}
#sign1999, #logo1999, #confetti1999-l, #confetti1999-r, #flag1999, #food1_1999, #food2_1999, #food3_1999, #food4_1999, #food5_1999, #bridge2007, #tran2007, #table2007, #pot2007, #food1_2007, #macauDoor, #mucauMoney, #macauFood1, #macauFood2, #macauFood3, #Card, #award2008, #table2008, #food1_2008, #confetti2008-l, #confetti2008-r, #eng2009, #iphone2009, #levelname2009, #level1_2009, #level2_2009, #level3_2009, #level4_2009, #level5_2009, #level6_2009, #travel2009, #food1_2009, #food2_2009, #food1_2011, #food2_2011, #food3_2011, #food4_2011, #table2011, #tableScreen, #shop1_2012, #shop2_2012, #shop3_2012, #loveCar1_2013, #loveCar2_2013, #loveCar3_2013, #lovetree1_2013, #lovetree2_2013, #lovetree3_2013, #lovetree4_2013, #lovetree5_2013, #lovetree6_2013, #food1_2013, #food2_2013, #food3_2013, #food4_2013, #pin2013, #stamp2013, #snap2014, #food2014, #balloon-front, #balloon-middle, #balloon-back { position: absolute; left:50%; overflow:hidden;}

#road { top:679px; margin-left:-748px; z-index: 1;}
#road img { width:1496px; heigth:auto;}
#indextop {top:0px; margin-left:-748px; z-index: 2;}

#sign1999 { top:796px; margin-left:-522px; z-index:3;}
#logo1999 { top:750px; margin-left:258px; z-index:3;}
#confetti1999-l { top:890px; margin-left:-141px; z-index:1;}
#confetti1999-r { top:890px; margin-left:15px; z-index:1;}
#flag1999 { top:940px; margin-left:-253px; z-index:3;}
#food1_1999 { top:1023px;  margin-left:-527px; z-index:3;}
#food2_1999 { top:1023px;  margin-left:-398px; z-index:3;}
#food3_1999 { top:1123px;  margin-left:-527px; z-index:3;}
#food4_1999 { top:1123px;  margin-left:-407px; z-index:3;}
#food5_1999 { top:1123px;  margin-left:302px; z-index:3;}

#bridge2007 { top:0px;  margin-left:-729px; z-index:3;}
#tran2007 {  top:73px;  margin-left:-1867px; z-index:3;}

#table2007 {  top:170px;  margin-left:-679px; z-index:3;}
#pot2007 {  top:0px;  margin-left:157px; z-index:3;}
#food1_2007 {  top:210px;  margin-left:-619px; z-index:3;}

#macauDoor {  top:0px;  margin-left:-269px; z-index:3;}
#mucauMoney {  top:420px;  margin-left:-635px; z-index:3;}
#macauFood1 {  top:855px;  margin-left:345px; z-index:3;}
#macauFood2 {  top:855px;  margin-left:452px; z-index:3;}
#macauFood3 {  top:855px;  margin-left:555px; z-index:3;}
#Card {  top:459px;  margin-left:345px; z-index:3;}

#award2008 { top:192px;  margin-left:242px; z-index:3; width:415px; height:483px; overflow:hidden;}
#awardsign {position:relative;}
#table2008 {  top:172px;  margin-left:-675px; z-index:3;}
#food1_2008 {  top:186px;  margin-left:-575px; z-index:3;}
#confetti2008-l {  top:206px;  margin-left:-210px; z-index:3;}
#confetti2008-r {  top:186px;  margin-left:106px; z-index:3;}

#eng2009 {  top:389px;  margin-left:334px; z-index:3;}

#iphone2009 {  top:0px;  margin-left:-911px; z-index:3;}
#appScreen {position:absolute; margin-top:90px; margin-left:480px; width:560px; height:317px; background: url(../images/app-bg.jpg) no-repeat; overflow:hidden;  z-index:4;}
#appFlower { position: absolute; left:50%; top:-300px; margin-left:-465px; z-index:2}
#appIcon { position: absolute; top:50%; left:50%; margin-top:-84px; margin-left:-84px; z-index:3}

#levelname2009 {  top:264px;  margin-left:349px; z-index:3;}
#level1_2009 {  top:589px;  margin-left:-299px; z-index:3;}
#level2_2009 {  top:588px;  margin-left:-405px; z-index:3;}
#level3_2009 {  top:586px;  margin-left:-513px; z-index:3;}
#level4_2009 {  top:689px;  margin-left:-524px; z-index:3;}
#level5_2009 {  top:694px;  margin-left:-408px; z-index:3;}
#level6_2009 {  top:698px;  margin-left:-298px; z-index:3;}

#travel2009 {  top:194px;  margin-left:756px; z-index:3;}

#food1_2009 {  top:378px;  margin-left:-513px; z-index:3;}
#food2_2009 {  top:323px;  margin-left:333px; z-index:3;}

#food1_2011 {  top:152px;  margin-left:-519px; z-index:3;}
#food2_2011 {  top:528px;  margin-left:-522px; z-index:3;}
#food3_2011 {  top:157px;  margin-left:385px; z-index:3;}
#food4_2011 {  top:515px;  margin-left:368px; z-index:3;}

#table2011 {  top:0px;  margin-left:-909px; z-index:3;}
#tableScreen {width:1498px; height: 530px; margin-left:-749px; z-index:3;}
#Screen { position:relative; top:210px; left:50%;  margin-left:-394px;}

#shop1_2012 {  top:25px;  margin-left:-750px; z-index:3;}
#shop2_2012 {  top:234px;  margin-left:-750px; z-index:3;}
#shop3_2012 {  top:449px;  margin-left:-750px; z-index:3;}

#loveCar1_2013 {  top:107px;  margin-left:-892px; z-index:3;}
#loveCar2_2013 {  top:461px;  margin-left:-892px; z-index:3;}
#loveCar3_2013 {  top:815px;  margin-left:-892px; z-index:3;}
#lovetree1_2013 {  top:751px;  margin-left:247px; z-index:3;}
#lovetree2_2013 {  top:751px;  margin-left:382px; z-index:3;}
#lovetree3_2013 {  top:751px;  margin-left:522px; z-index:3;}
#lovetree4_2013 {  top:910px;  margin-left:247px; z-index:3;}
#lovetree5_2013 {  top:910px;  margin-left:382px; z-index:3;}
#lovetree6_2013 {  top:910px;  margin-left:522px; z-index:3;}

#food1_2013 {  top:560px;  margin-left:-782px; z-index:3;}
#food2_2013 {  top:851px;  margin-left:-782px; z-index:3;}
#food3_2013 {  top:1110px;  margin-left:-622px; z-index:3;}
#food4_2013 {  top:1070px;  margin-left:-312px; z-index:3;}
#pin2013 { top:570px;  margin-left:-482px; z-index:3;}
#stamp2013 {  top:820px;  margin-left:152px; z-index:3;}

#snap2014 { top:220px; margin-left:-632px; z-index:3;}
#food2014 { top:0px; margin-left:272px; z-index:3;}

#balloon-front { top:0px; margin-left:-583px; z-index:3;}
#balloon-middle { top:0px; margin-left:-420px; z-index:2;}
#balloon-back { top:0px; margin-left:-448px; z-index:1;}
#cloudBG { top:15959px; background: url(../images/bg-clouds.png) repeat-x; width:100%; height:91px;}
#bkBG {  top:16050px; width:100%; height:1240px; background-color:#ee5d1d;}
.title1 { top:10em; font-size:2.5em; line-height: 2em; color:#ffd427; width:6em; height:2em; border:medium #ffd427 solid; left:50%; margin-left:-3em; }
.contentBox {font-family: 'Exo', "Microsoft JhengHei", "apple LiGothic Medium", sans-serif; top:22.5em; font-size:1.4em; line-height: 1.8em; color:#ffd427; width:600px; height:500px; left:50%; margin-left:-300px;}
#cloudBG, #bkBG, .title1, .contentBox { position:absolute; z-index:11;}


/* Desktops and laptops ----------- */
@media only screen and (orientation:landscape) and (max-width : 899px) {
/* Styles */
}

@media only screen and (max-width : 768px) {
	.mask { display: none;}
	#bottomTips {bottom:0;}
	#bkBG {height: 1280px;}
	#tips {bottom:46px;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
	/*#skrollr-body {margin-left: 350px;}*/
	.contentwrapper {width:768px;}
	#tips {bottom:46px;}
	#bottomTips {bottom:0;}
	/*#bkBG, #cloudBG {width:1498px; left:50%; margin-left:-748px;}*/
	/*#bkBG { font-size: 1.3em;}
	.contentBox { width:1000px; left:50%; margin-left:-500px;}*/
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
#skrollr-body {margin-left: 120px;}
}