@import url(default.css);
@import url(form_ctrl.css?lang=zh-hk);

/* Common */
body {
	font-family:'lucida grande',helvetica,arial,sans-serif;
	font-size: 14px;
}

p:first-letter {
	margin-left: 2em;
}

div.message {
	background: url(/img/warning.png) no-repeat left top;
}

.ok {
	background-repeat: no-repeat;
	background-image: url(/img/ok.png);	width: 32px;
	height: 32px;
}

.failed {
	background-repeat: no-repeat;
	background-image: url(/img/failed.png);	width: 32px;
	height: 32px;
}

a.go {
	display: block;
	background: url(/img/link_go.png) no-repeat left center;
	padding-left: 16px;
}

a.file {
	background: url(/img/file_link.png) no-repeat center top;
	padding-top: 80px;
}

img.sortDir {
	margin-left: 5px;
	vertical-align: middle;
}

#error_page_not_found {
	background-repeat: no-repeat;
	background-image: url(/img/page_not_found.png);	width: 122px;
	height: 111px;
}

#error_access_denied {
	background-repeat: no-repeat;
	background-image: url(/img/access_denied.png);	width: 122px;
	height: 111px;
}

/* Layout */
#container {
	width: 100%;
	border-collapse: collapse;
}

#header{
	background: url(/img/bg_header.png); ?> repeat-x;
	font-family: Helvetica, Arial, sans-serif;
}
#headerWrapper {
	background: url(/img/header.png) no-repeat;
	width: 884px;
	height: 155px;
	margin: 0px auto;
	position: relative;
}

#content{
	clear: both;
	background: #595959;
}
#contentWrapper {
	width: 790px;
	margin: 0px auto;
	padding: 10px 0px;
	position: relative;
}
#content a {
	color: #FFDC50;
}

#footer {
	clear: both;
	background: url(/img/bg_footer.png) repeat-x;
}

#footerWrapper {
	background: url(/img/footer.png) no-repeat;
	width: 884px;
	height: 105px;
	margin: 0px auto;
	position: relative;
}

/* Header */
#debugMsg {
	position: absolute;
	left: 305px;
	top: 21px;
	color: Cyan;
	font-size: 12px;
	white-space: nowrap;
}

a#logo {
	display: block;
	width: 230px;
	height: 70px;
	position: absolute;
	left: 45px;
	top: 21px;
}

#flagList {
	position: absolute;
	right: 46px;
	top: 21px;
}

#flagList a {
	display: block;
	float: left;
	margin-left: 15px;
	padding-left: 35px;
	line-height: 19px;
	background-repeat: no-repeat;
}

#loginMsg {
	position: absolute;
	right: 476px;
	top: 66px;
}

#loginBox {
	position: absolute;
	left: 410px;
	top: 58px;
	width: 437px;
	height: 39px;
	background-repeat: no-repeat;
	background-image: url(/img/usr_login.png);}

#usrLogin {
	position: absolute;
	left: 410px;
	top: 58px;
}

input#usrEmail, #usrEmailTip {
	position: absolute;
	left: 50px;
	top: 10px;
	width: 132px;
	height: 17px;
}

input#usrPsw, #usrPswTip {
	position: absolute;
	left: 244px;
	top: 10px;
	width: 132px;
	height: 17px;
}

#usrEmailTip, #usrPswTip {
	font-size: 12px;
	line-height: 17px;
	color: #AAA;
	cursor: text;
}

#usrEnter {
	position: absolute;
	left: 390px;
	top: 4px;
	width: 38px;
	height: 25px;
}

#loginLoading {
	background-repeat: no-repeat;
	background-image: url(/img/login_loading.png);	width: 312px;
	height: 25px;
	padding: 15px 21px;
	font-size: 13px;
	color: #4D4D4D;
	white-space: nowrap;
	position: absolute;
	left: 512px;
	top: 50px;
}
#loginLoading img {
	vertical-align: middle;
}

#usrPanel, #adminPanel {
	position: absolute;
	right: 45px;
	top: 50px;
	font-size: 12px;
}

#welcomeMsg {
		width: 220px;
		text-align: right;
	padding-right: 4px;
}

#usrWelcome {
	margin-right: 5px;
}

.usrBtnLeft, .usrBtnMid, .usrBtnRight {
	padding-top: 3px;
	padding-bottom: 3px;
}

.usrBtnLeft {
	background: url(/img/usr_panel.png) left top;
	padding-left: 10px;
}

.usrBtnMid {
	background: url(/img/usr_panel.png) center top;
}

.usrBtnRight {
	background: url(/img/usr_panel.png) right top;
	padding-right: 10px;
}

#navBar {
	position: absolute;
	left: 45px;
	top: 106px;
}

#navBar .sep {
	border-left: 1px solid #A00000;
	border-right: 1px solid #fff;
	height: 17px;
	float: left;
	margin-top: 10px;
}

#navBar a {
	display: block;
	float: left;
	width: 130.16px;
	height: 25px;
	margin-top: 6px;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	line-height: 25px;
	font-size: 18px;
	letter-spacing: 1px;
}

a#nav_design {
	background-image: url(/img/zh-hk/nav_design.png);
}
a#nav_design:hover {
	background-image: url(/img/zh-hk/nav_design_hl.png);
}

a#nav_intro {
	background-image: url(/img/zh-hk/nav_intro.png);
}
a#nav_intro:hover {
	background-image: url(/img/zh-hk/nav_intro_hl.png);
}

a#nav_history {
	background-image: url(/img/zh-hk/nav_history.png);
}
a#nav_history:hover {
	background-image: url(/img/zh-hk/nav_history_hl.png);
}

a#nav_contact {
	background-image: url(/img/zh-hk/nav_contact.png);
}
a#nav_contact:hover {
	background-image: url(/img/zh-hk/nav_contact_hl.png);
}

a#nav_order {
	background-image: url(/img/zh-hk/nav_order.png);
}
a#nav_order:hover {
	background-image: url(/img/zh-hk/nav_order_hl.png);
}

a#nav_jobs {
	background-image: url(/img/zh-hk/nav_jobs.png);
}
a#nav_jobs:hover {
	background-image: url(/img/zh-hk/nav_jobs_hl.png);
}

#navPointer {
	margin-top: 37px;
	width: 16px;
	height: 15px;
	background-repeat: no-repeat;
	background-image: url(/img/nav_pointer.png);}

/* Footer */
#txt_tels, #txt_email {
	top: 17px;
	color: #333333;
	font-size: 12px;
	line-height: 25px;
}

#txt_email {
	font-family: Tahoma, sans-serif;
}

#txt_tels {
	position: absolute;
	left: 76px;
	height: 25px;
	overflow: hidden;
}

#arrowUp, #arrowDown {
	position: absolute;
	margin: 2px;
	width: 11px;
	height: 6px;
	left: 252px;
	background-repeat: no-repeat;
	cursor: pointer;
}
#arrowUp {
	top: 19px;
	background-image: url(/img/arrow_up_na.png);}
#arrowDown {
	top: 29px;
	background-image: url(/img/arrow_down.png);}

#txt_email {
	position: absolute;
	left: 320px;
}

/* smenu: Secondary Menu */
table#smenuList {
	width: 352px;
	border-collapse: collapse;
	position: absolute;
	left: 482px;
	top: 9px;
	}

table#smenuList td {
	padding: 0px;
}

#smenu_hardware {
	background-image: url(/img/footer_hardware.png);;
}

#smenu_album {
	background-image: url(/img/footer_album.png);;
}

#smenu_study {
	background-image: url(/img/footer_study.png);;
}

#smenu_faq {
	background-image: url(/img/footer_faq.png);;
}

table#smenuList a.icon {
	float: left;
	display: block;
	width: 43px;
	height: 45px;
	background-repeat: no-repeat;
	cursor: pointer;
}

table#smenuList a.label {
	float: left;
	display: block;
	line-height: 42px;
		letter-spacing: 3px;
	}

#footMark {
	position: absolute;
	left: 0px;
	top: 65px;
	width: 100%;
	text-align: center;
	color: #D9D9D9;
	font-size: 13px;
}

#footMark img {
	vertical-align: text-top;
}