@charset "utf-8";

/****************Master*********************/
*	{border:0; margin:0;}
body	{margin:0 auto; background-color:#FFF; position:relative; line-height:1;}
.fontsize-s	{font-size:100%;}
.fontsize-m	{font-size:115%;}
.fontsize-l	{font-size:125%;}


/****************Common class*********************/
h1,h2,h3,h4,h5.h6	{line-height:1;}
p	{margin:0 0 1em 0;}

a	{text-decoration:none;}
a:hover	{text-decoration:underline;}

.clear {clear:both;}
/* For modern browsers */
.clearfix:before, .clearfix:after {content:''; display:table;}
.clearfix:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {*zoom:1;}

.fullwidth	{width:950px; margin:0 auto; text-align:left; position:relative;}
.justify		{text-align:justify;}
.access 		{position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;}

.right	{float:right;}
.left	{float:left;}


/****************Wrap Layout*********************/
#header	{/*height:120px;*/}

#header .logos	{/*position:absolute; top:12px; left:0px;*/ background:url(../img/logos.png) no-repeat; width:400px; height:54px; margin-top:13px; margin-bottom:13px; float:left; position: relative;;}
#header .logos .logos-emsd	{display:block; position:absolute; width:120px; height:60px; top:0; left:0;}
#header .logos .logos-hkie	{display:block; position:absolute; width:160px; height:60px; top:0; left:135px;}
#header .logos .logos-safety	{display:block; position:absolute; width:40px; height:60px; top:0; left:310px;}

#header .topbar	{/*position:absolute; right:0; top:25px;*/ line-height:25px; font-size:70%; float:right; margin-top:25px;}
#header .topbar, #header .topbar a	{color:#808284;}
#header .topbar>*	{float:left; display:block;}
#header .topbar .spacer	{padding:0 7px;}
#header .topbar .changeLang, #header .topbar .fontsize, #header .topbar .home, #header .topbar .music	, #header .topbar .changeColor	
{background:url(../img/color-white/topbar-btns.png) no-repeat; width:25px; height:25px; margin-left:2px;}

#header .topbar .changeColor	{margin-left:0px;}
#header .topbar #to-color-white	{background-position:-175px 0;}
#header .topbar #to-color-yellow	{background-position:-200px 0;}
#header .topbar #to-color-orange	{background-position:-225px 0;}
#header .topbar #to-color-black	{background-position:-250px 0;}
#header .topbar #to-color-white:hover, #header .topbar #to-color-white.on	{background-position:-175px -25px;}
#header .topbar #to-color-yellow:hover, #header .topbar #to-color-yellow.on	{background-position:-200px -25px;}
#header .topbar #to-color-orange:hover, #header .topbar #to-color-orange.on	{background-position:-225px -25px;}
#header .topbar #to-color-black:hover, #header .topbar #to-color-black.on	{background-position:-250px -25px;}

#header .topbar #to-fontsize-s	{background-position:-100px 0;}
#header .topbar #to-fontsize-m	{background-position:-125px 0;}
#header .topbar #to-fontsize-l	{background-position:-150px 0;}
#header .topbar #to-fontsize-s:hover, #header .topbar #to-fontsize-s.on	{background-position:-100px -25px;}
#header .topbar #to-fontsize-m:hover, #header .topbar #to-fontsize-m.on	{background-position:-125px -25px;}
#header .topbar #to-fontsize-l:hover, #header .topbar #to-fontsize-l.on	{background-position:-150px -25px;}

#header .topbar .to-lang-tc	{background-position:-50px 0;}
#header .topbar .to-lang-tc:hover, #header .topbar .to-lang-tc.on	{background-position:-50px -25px;}
#header .topbar .to-lang-en	{background-position:-75px 0;}
#header .topbar .to-lang-en:hover, #header .topbar .to-lang-en.on	{background-position:-75px -25px;}

#header .topbar .home:hover	{background-position:0px -25px;}
#header .topbar .music	{background-position:-25px -25px;}
#header .topbar .music.off	{background-position:-25px 0px;}
#musicFrame	{width:1px; height:1; border:0; position:absolute; top:-1000px;}

#header #mainmenu	{z-index:100; width:100%; font-size:85%;}
#header #mainmenu>.line1	{/*height:22px;*/ line-height:22px; text-align:right;}
#header #mainmenu>.line1 a	{display:inline-block; padding:0 10px; margin-left:1px; border-top-left-radius:6px; border-top-right-radius:6px; text-decoration:none;}
#header #mainmenu>.line2	{ min-height:35px; line-height:35px; text-align:center;}
#header #mainmenu>.line2>*	{}
#header #mainmenu>.line2 .spacer {position:absolute;}
#header #mainmenu>.line2 a	{ display:inline-block; padding:0 10px;}
#header #mainmenu>.line2 .on {}

#topVisual	{height:280px; margin-bottom:20px; position:relative;}
#topVisual .bird	{position:absolute; width:100px; height:120px; left:840px; top:120px; }
#topVisual .superman	{position:absolute; width:300px; height:200px; left:-110px; top:30px;}


#footer		{font-size:75%; line-height:1.5; padding:10px 0; text-align:center; position:relative;}
#footer a	{display:inline-block; padding:0 5px;}
#footer .w3icon	{position:absolute; right:20px;}

#pageMain	{min-height:240px;}


/****************Main layout*********************/
#pageMain	{font-size:85%; line-height:1.35; background:url(../img/bg-bottom.png) no-repeat bottom center;}
#pageMain big, #pageMain .big	{font-size:120%;}
#pageMain .bigger	{font-size:140%;}
#pageMain small, #pageMain .small	{font-size:90%;}
.content	{/*width:480px; */padding-bottom:400px; padding-top:70px; padding-left:50px;}
.page-index .content	{padding-left:0;}
.content h1	{height:50px; line-height:50px; margin:0 0 35px 0; font-size:170%;}
.content h1>span	{display:inline-block; position:relative; min-width:550px;
	margin-left:-35px; padding-left:35px; background-position:left center; background-repeat:no-repeat;}
.content h1>span>.h1-character {position:absolute; top:-35px; margin-left:50px;}

.content h3	{font-size:1.3em; line-height:1.5; margin:20px 0 3px;}
.content .table td	{padding:5px 7px; /*vertical-align:top;*/ min-width:80px; }


/*.content .alt-table td	{padding:4px 7px; vertical-align:top; min-width:80px; }*/

/****************Page*********************/

.page-index #pageMain	{ background:url(../img/bg-bottom-index.png) no-repeat bottom center;}
.page-index .content	{width:620px;}
.index-box {padding:30px 100px 30px 30px; width:400px; border-radius:30px;}
.index-carnival-logo 	{position:absolute; right:0; top:100px; z-index:3;}

.page-online .btn1, .page-online .btn2	{display:inline-block; top:0;}

.page-other .main	{position:relative; height:350px;}
.page-other .main>a	{position:absolute; display:block; width:212px; height:62px; padding-top:150px; background-repeat:no-repeat; text-align:center;}
.page-other .main>a.b1	{left:0; top:0px; background-position:0 0;}
.page-other .main>a.b2	{left:280px; top:0px; background-position:0 -250px;}

.page-carnival .highlight {font-size:180%;}


/****************Unit*********************/
.h5	{height:5px;}
.h10 	{height:10px;}
.h20 	{height:20px;}
.h30 	{height:30px;}
.h40 	{height:40px;}
.h50 	{height:50px;}
.h60 	{height:60px;}
.h70 	{height:70px;}
.h80 	{height:80px;}
.h250 	{height:250px;}

.w100	{width:100px;}
.w150	{width:150px;}
.w200	{width:200px;}
.w250	{width:250px;}
.w300	{width:300px;}
.w350	{width:350px;}
.w400	{width:400px;}
.w450	{width:450px;}
.w500	{width:500px;}
.w550	{width:550px;}
.w600	{width:600px;}
.w650	{width:650px;}
.w700	{width:700px;}
.w750	{width:750px;}

.padding-top-5 {padding-top:5px;}
.padding-top-10 {padding-top:10px;}
.padding-top-15 {padding-top:15px;}
.padding-top-20 {padding-top:20px;}
.padding-top-25 {padding-top:25px;}
.padding-top-30 {padding-top:30px;}
.padding-top-35 {padding-top:35px;}

.padding-right-5 {padding-right:5px;}
.padding-right-10 {padding-right:10px;}
.padding-right-15 {padding-right:15px;}
.padding-right-20 {padding-right:20px;}
.padding-right-25 {padding-right:25px;}
.padding-right-30 {padding-right:30px;}
.padding-right-35 {padding-right:35px;}

.padding-left-5 {padding-left:5px;}
.padding-left-10 {padding-left:10px;}
.padding-left-15 {padding-left:15px;}
.padding-left-20 {padding-left:20px;}
.padding-left-25 {padding-left:25px;}
.padding-left-30 {padding-left:30px;}
.padding-left-35 {padding-left:35px;}


.padding-all-5 {padding:5px;}
.padding-all-10 {padding:10px;}
.padding-all-15 {padding:15px;}
.padding-all-20 {padding:20px;}



/****************Not in use


.page-talent .deco	{position:fixed; top:380px; left:50%; margin-left:40px;}
.page-talent .content .block	{display:inline-block; width:200px;}

.page-other .deco	{position:fixed; top:450px; left:50%; margin-left:70px;}

#pageMain .deco-bubbles	{position:absolute; bottom:10px; right:0;}

.page-carnival .deco	{position:absolute; bottom:70px; right:240px;}
.page-carnival .photo	{position:absolute; top:0px; right:50px;}

.page-qa .deco	{position:fixed; top:420px; left:50%; margin-left:70px;}

.page-support .deco	{position:fixed; bottom:85px; left:50%; margin-left:80px;}

.page-color .deco	{position:fixed; top:380px; left:50%; margin-left:40px;}

.page-news .deco	{position:absolute; bottom:110px; right:240px;}

.page-online .deco	{position:fixed; bottom:50px; left:50%; margin-left:80px;}
.page-online .deco2	{position:absolute; bottom:250px; right:150px;}
.page-online .btn1	{left:240px;;}
.page-online .btn2	{left:420px;;}

.page-poster .deco	{position:absolute; top:50px; right:20px;}
.page-poster .deco2	{position:absolute; bottom:100px; right:160px;}





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