@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:60px;}
#header .logos .logos-emsd	{display:block; position:absolute; width:90px; height:60px; top:0; left:0;}
#header .logos .logos-hkie	{display:block; position:absolute; width:130px; height:60px; top:0; left:105px;}
#header .logos .logos-safety	{display:block; position:absolute; width:110px; height:60px; top:0; left:260px;}

#header .topbar	{position:absolute; right:0; top:25px; line-height:25px; font-size:70%;}
#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; position:absolute; top:67px; width:100%; font-size:82%;}
#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	{ height:30px; line-height:30px; text-align:center;}
#header #mainmenu>.line2 a	{display:inline-block; padding:0 5px;}

#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:83%; line-height:1.35; background:url(../img/bg-bottom.png) no-repeat bottom center;}
#pageMain big	{font-size:110%;}
#pageMain small	{font-size:90%;}
.content	{width:480px; padding-bottom:220px;}
.content h1	{height:35px; line-height:35px; margin:0 0 15px 0; }
.content h1>span	{display:inline-block; padding:0 30px 0 0;}
.content h3	{font-size:1.3em; line-height:1.5; margin:20px 0 3px;}
.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;}

#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-talent .deco	{position:fixed; top:380px; left:50%; margin-left:40px;}
.page-talent .content .block	{display:inline-block; width:200px;}

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

.page-other .deco	{position:fixed; top:450px; left:50%; margin-left:70px;}
.page-other .main	{width:456px; height:375px; position:relative;}
.page-other .main>a	{position:absolute; display:block;}
.page-other .main>a.b1	{width:130px; height:150px; left:0; top:75px;}
.page-other .main>a.b2	{width:170px; height:207px; left:170px; top:0px;}
.page-other .main>a.b3	{width:130px; height:150px; left:122px; top:225px;}
.page-other .main>a.b4	{width:135px; height:160px; left:320px; top:157px;}

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