html { height:100%}
body { margin:0; background:url(../images/body-bg.jpg) repeat-x; font:12px Tahoma, Geneva, sans-serif}
img {border:0;}
#wrapper { margin:0 auto; width:985px; color:#333; position:relative; min-height:100%}
#logo { float:left; width:128px; height:69px; background:url(../images/logo.png) no-repeat}
#rgt-title { float:right; color:#fff; font-size:16px; font-weight:bold; line-height:60px}
#finish { color:#333; text-align:left; width:700px; line-height:20px}
#finish a { color:#333; text-decoration:none}
#finish a:hover { text-decoration:underline}
#main { position:relative; height:400px; width:100%}
body#main { height:100%; margin:0; padding:0; background:url(../images/body-bg1.jpg) repeat-x; font:12px Arial, Helvetica, sans-serif}
#intro1 { width:100%; height:353px; background:url(../images/intro-img-portal.jpg) no-repeat left center;}
#custom { width:100%; height:335px; background:url(../images/custom-img.png) no-repeat left center;}
#bio-info { width:100%; height:400px; background:url(../images/banner-custom.jpg) no-repeat left center;}
#frm-portal { float:right; padding-top:20px}
#frm-portal h3 { color:#fff}
#frm-portal ul { margin:0; padding:0; list-style:none;}
#frm-portal ul li { width:435px; height:30px}
#frm-portal ul li label { float:left; width:170px; line-height:23px; color:#fff}
#frm-portal ul li input { float:left; /*box-shadow:inset 0px 0px 5px #000*/ border:1px solid #999; background:#fff}
#frm-portal ul li input.btn-form { border:0; background:#fff; color:#333; padding:3px 5px; cursor:pointer; margin-right:5px}
.focused { background:#b5d1f1 !important; border:1px solid #ccc!important}
.company-input { width:250px}
.num-input { width:50px; text-align:right;}
#input-exp { width:430px; padding-top:15px}
#input-exp span { font-size:12px; color:#fff;}
#menu-tab { clear:both; height:33px; padding-top:15px}
#menu-tab ul { margin:0; padding:0; list-style:none}
#menu-tab ul li { float:left; padding:8px 20px; margin:0 10px 0 0; background:#ccc; color:#999; font:bold 13px Verdana, Geneva, sans-serif; cursor:pointer;
	-moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -khtml-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0; }
#menu-tab ul li.selected { background:#fff; color:#333}

#menu-tab1 { clear:both; height:33px; padding-top:15px}
#menu-tab1 ul { margin:0; padding:0; list-style:none}
#menu-tab1 ul li { float:left; padding:8px 20px; margin:0 10px 0 0; background:#ccc; color:#999; font:bold 13px Verdana, Geneva, sans-serif; cursor:pointer;
	-moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -khtml-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0; }
#menu-tab1 ul li.selected { background:#01669A; color:#fff}

#content-tab { padding:5px; border:1px solid #ccc}
#content { padding-bottom:30px;}
#lft-side { float:left; width:60%}
#rgt-side { float:left; width:40%}
#std-lft-side { float:left; width:60%}
#std-rgt-side { float:left; width:40%}
#pro-lft-side { float:left; width:60%}
#pro-rgt-side { float:left; width:40%}
#ent-lft-side { float:left; width:60%}
#ent-rgt-side { float:left; width:40%}
#std-pack, #pro-pack, #ent-pack { display:none;}
.head-text { font-weight:bold; font-size:16px; color:#069; padding:15px 5px}
.table-package { text-align:left; width:568px}
.table-package tr th { font-weight:bold; padding:0px 5px; font-size:13px}
.table-package tr th.feat { width:210px}
.table-package tr th.incl { width:60px}
.table-package tr th.n-incl { width:65px}
.table-package tr th.pric {}
.table-package tr th.info { width:50px}
.table-package tr td a { color:#333}
.table-package tr td { padding:0px 5px; line-height:28px}

.smoney {text-align: right;}

.action-block { float:right; margin-bottom:15px}
.action-block a { text-decoration:none}
.btn-custom { background:url(../images/btn-custom.png); width:156px; height:33px; display:block; float:left; cursor:pointer; border-right:1px solid #069; margin-right:10px}
.btn-checkout { background:url(../images/btn-checkout.png); width:121px; height:33px; display:block; float:left; cursor:pointer; border:0}
.btn-checkout:disabled { background:url(../images/btn-checkout-dis.png);}
.btn-prev { background:url(../images/btn-prev.png); width:211px; height:33px; display:block; float:right; cursor:pointer; margin-top:15px}
.info-block { background:#e6f3fc; border:1px solid #9cf; padding:10px; color:#666;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px; clear:both;min-width: 360px}
.info-block h3 { color:#69c; margin-top:0}
.info-block .table-detail { text-align:left;width: 100%}
.info-block .table-detail th { font-weight:bold; padding:2px 3px}
.info-block .table-detail td { padding:2px 3px}
.info-block .table-detail td.ttl-cost { font-weight:bold}

#custom-title { border-bottom:1px solid #069; height:65px; margin-bottom:5px}
#custom-title h1 { color:#069; float:left}

ul.frm-bill { margin:0; padding:0; list-style:none; margin-left:5px}
ul.frm-bill li { width:450px; height:30px}
ul.frm-bill li label { float:left; width:170px; line-height:23px;}
ul.frm-bill li > input { float:left; /*box-shadow:inset 0px 0px 5px #000*/ font: 14px arial;}
ul.frm-bill li textarea { font: 14px arial;}
ul.frm-bill li div#group-list { float:left; overflow-y:auto; overflow-x:hidden; height:300px; width:280px}
ul.frm-bill li div#group-list input { float:none; margin-bottom:3px}
ul.frm-bill li input.btn-form1 { border:0; background:#069; color:#fff; padding:5px 10px; font-size:13px; font-weight:bold; cursor:pointer; margin-right:5px}
#footer {height:30px; position:absolute; bottom:0; width:100%}

#wrap { margin:0; padding:0; background:#f7f7f7; position:relative; min-height:100%}
#gear-img { background:url(images/gear-img.jpg) no-repeat; width:380px; height:402px; position:absolute; right:50%; top:50%; margin-top:-232px}
#center-bar { background:#1a4c81; width:100%; height:240px; position:absolute; top:50%; margin-top:-120px}
#shadow-center-bar { position:absolute; top:50%; margin-top:120px}
#login-logo{ background:url(images/sf-logo.jpg) no-repeat; width:354px; height:188px; position:absolute; right:50%; margin-top:20px }
#login-block { width:400px; position:absolute; left:50%; margin-top:10px;}
#login-block h1 { color:#fff}
/*#copyright { color:#333; width:100%; text-align:center; position:absolute; top:50%; margin-top:180px; font-weight:bold}*/

#login-block label { float:left; width:150px; margin:5px 5px 5px 0; color:#fff}
#login-block input { float:left; width:200px; margin:5px}
#login-block > input#btn-login { border:0; background:#69c; color:#fff; margin-top:10px; padding:5px 8px; width:75px; cursor:pointer; font-weight:bold}
#login-block > input#btn-login:hover { background:#336699}
#login-block a { line-height:47px; padding-left:20px; color:#fff; text-decoration:none}
#login-block a:hover { text-decoration:underline}

#header { height:103px; position:relative;font:12px Arial, Helvetica, sans-serif;}
#logo { background:url(../images/dataon-logo.png) no-repeat; width:426px ; height:103px; float:left}
#personalize { float:right; margin-top:5px}
#personalize > div { float:left}
#personalize div#prs-detail { line-height:20px}
#home-icon {
    padding-right: 7px;
}
#home-icon a {
    background: url("../images/home-small-icon.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    color: #369;
    line-height: 24px;
    padding-left: 25px;
    text-decoration: none;
}
#set-dropdown { background:url(../images/set-dropdown.png) no-repeat; width:30px; height:20px; display:inline-block}
#tip {}
#tip a { text-decoration:none; color:#333; line-height:25px}
#tip a#infdoc { color:#3283ae; background:url(../images/inf-doc.png) no-repeat center left; padding-left:30px; display:block}
#personalize div#prs-detail a { text-decoration:none; color:#333}
#personalize div#prs-detail a:hover { text-decoration:underline}
#btn-freetrial { position:absolute; bottom:0; right:0; cursor:pointer; z-index:1}
#banner-box {
    bottom: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    z-index: 1;
}
#banner-box div {
    float: right;
    font-size: 15px;
    padding-top: 12px;
    text-align: right;
}
#banner-box span {
    font-size: 20px;
}
#searchbox { float:right; padding:6px 0}
#searchbox input { background:#fff url(../images/search-button.png) no-repeat right; padding:5px 15px; border:0; border-radius:15px; color:#999; width:180px; margin:0}
/*#nav { height:37px; clear:both; position:relative; z-index:5000}
#nav a { text-decoration:none; cursor:pointer}
#nav li#home-icon a { background:url(../images/home-icon.png) no-repeat center; height:25px; width:19px; display:block;}
#nav ul { list-style:none; margin:0; padding:0}
#nav > ul > li { }
#nav > ul > li > div { background:#fff url(../images/drop-bg.png) repeat-x bottom; padding:10px 15px; position:absolute; width:135px; border-radius:7px;font:12px Arial, Helvetica, sans-serif; 
box-shadow:0 0 2px #000; border:1px solid #ccc; margin-top:5px;  }
#nav > ul > li:first-child > div , #nav > ul > li > div.multi-dd { width:280px; font:12px Arial, Helvetica, sans-serif}
#nav > ul> li { float:left; padding:5px 25px 8px; position:relative }
#nav > ul> li > a { color:#fff; font-size:14px; line-height:25px}
#nav >ul>li >div { display:none;}
#nav >ul>li:hover >div { display:block}
#nav >ul>li>div>ul>li a { color:#333;}
#nav >ul>li>div>ul>li a:hover { text-decoration:underline}
#nav > ul > li > div > ul > li { padding:3px 0}
#nav > ul > li > div > div.ar-drop { display:block; background:url(../images/arrow-drop.png) no-repeat; width:18px; height:15px; position:absolute; top:-15px}
#nav > ul span { font-size:15px; font-weight:bold; color:#069; display:block}
#nav .col { float:left; margin-right:25px; margin-bottom:15px}
.col>ul>li { padding:3px 0}*/
#nav {
    clear: both;
    height: 37px;
    position: relative;
    z-index: 5000;
}
#nav a {
    cursor: pointer;
    text-decoration: none;
}
#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav > ul > li {
}
#nav > ul > li > div {
    background: url("../images/drop-bg.png") repeat-x scroll center bottom #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 0 2px #000;
    margin-top: 5px;
    padding: 10px 15px;
    position: absolute;
    width: 165px;
}
#nav > ul > li:first-child > div, #nav > ul > li > div.multi-dd {
    width: 910px;
}
#nav > ul > li {
    float: left;
    padding: 5px 25px 8px;
    position: relative;
}
#nav > ul > li > a {
    color: #fff;
    font-size: 14px;
    line-height: 25px;
}
#nav > ul > li > div {
    display: none;
}
#nav > ul > li:hover > div {
    display: block;
}
#nav li#home-icon a {
    background: url("../images/home-icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    display: block;
    height: 25px;
    width: 19px;
}
#nav > ul > li > div > ul > li a {
    color: #666;
}
#nav > ul > li > div > ul > li a:hover {
    color: #369;
    font-weight: bold;
}
#nav > ul > li > div > ul > li {
    padding: 3px 0;
}
#nav > ul > li > div > div.ar-drop {
    background: url("../images/arrow-drop.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 15px;
    position: absolute;
    top: -15px;
    width: 18px;
}
#nav > ul span {
    color: #069;
    display: block;
    font-size: 15px;
    font-weight: bold;
    padding-bottom: 5px;
}
#nav .col {
    float: left;
    margin-right: 15px;
}
div.multi-dd ul li div#function ul li {
    float: left;
}
.col > ul > li {
    margin-right: 10px;
    padding: 3px 0;
    width: 220px;
}
.col > ul > li > a {
    display: block;
    font-weight: bold;
}
.col > ul > li > ul > li > a {
    display: block;
    padding: 3px 0;
    width: 220px;
}
div.multi-dd div#function {
    width: 690px;
}
div.multi-dd div#need {
    width: 190px;
}
#nav-rgt-box {
    background: url("../images/nav-right-box.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #fff;
    float: right;
    height: 30px;
    line-height: 24px;
	font-size:17px;
    padding: 4px 18px 3px 20px;
    text-align: right;
    width: 145px;
}
#intro { height:400px}
#content { padding:10px}
#reg-step {}
#reg-step div{ float:left}
#reg-step .stp { background:#ccc; padding:15px; cursor:pointer }
#reg-step .stp:hover { background:#666; }
#reg-step .stp span { display:block; text-align:center; color:#069; font-size:20px}
#reg-step .stp:hover span { color:#fff}
#reg-step .stp font { font: 25px "Lucida Sans Unicode", "Lucida Grande", sans-serif}
#footer { height:80px; width:100%; background:#333 url(../images/footer-bg.jpg) repeat-x; position:relative;}
#footer div#foot-con { width:980px; margin:0 auto; padding:15px 0}
#foot-con ul div { font-size:14px; font-weight:bold; color:#fff; margin-bottom:15px}
#footer a { color:#fff; text-decoration:none} #footer a:hover { text-decoration:underline}
#footer ul { margin:0; padding:0; list-style:none}
#footer > div > ul > li { float:left; padding:0 30px}
#contact-office { float:right}
#contact-office span { font-weight:normal; font-size:12px; display:block; margin-bottom:15px}
#copyright { position:absolute; bottom:0; width:100%; height:22px; padding:6px 0;color:#fff; text-align:center; background:#333}

#p_langlist { position:relative; z-index:5010; display:}
#p_langlist > div { float:left; padding:3px 0; margin:0 5px}
.mod-selectbox { background:#fff url(../images/arrow-down.png) no-repeat right;padding:3px 25px 5px 10px!important ;box-shadow:inset 0 0 2px #000; position:relative}
.mod-selectbox:hover {box-shadow:inset 0 0 3px #39c}
.mod-selectbox div { background:#fff;position:absolute; top:23px; right:0; box-shadow:0px 0px 3px #000; display:none }
.mod-selectbox div span { display:block; padding:2px 0; cursor:pointer}
.mod-selectbox:hover div#flag-dd { display:block}

.country-flag {}
.country-flag span.flag-int { background:url(../images/flag-int.gif) no-repeat left; display:block; padding-left:25px}
.country-flag span.flag-id { background:url(../images/flag-id.gif) no-repeat left; display:block; padding-left:25px}
.country-flag span.flag-my { background:url(../images/flag-my.gif) no-repeat left; display:block; padding-left:25px}
.country-flag span.flag-en { background:url(../images/flag-uk.gif) no-repeat left; display:block; padding-left:25px}
.country-flag span.flag-th { background:url(../images/flag-th.gif) no-repeat left; display:block; padding-left:25px}
.country-flag span.flag-vn { background:url(../images/flag-vn.gif) no-repeat left; display:block; padding-left:25px}
.country-flag span.flag-ph { background:url(../images/flag-ph.gif) no-repeat left; display:block; padding-left:25px}
.country-flag div span { width:150px}

#login { position:relative; z-index:6000; cursor:pointer; line-height:20px}
/*#login:hover #shortcut-block { display:block}*/
#shortcut-block {background: none repeat scroll 0 0 transparent; display: none; position: absolute; right: -5px; top: 30px; width: 310px; z-index: -1;}
#hd-sc{background:#fff; box-shadow: 1px -1px 1px #666; height: 30px; position: absolute; right: 0; top: -30px; width: 125px; border-left:1px solid #ccc}
#bd-sc{background: none repeat scroll 0 0 #FFFFFF; box-shadow: 0 0 3px #000000; clear: both; width: 310px; padding-top:20px;height:115px;}

#bd-sc label { float:left; display:block; width:100px; margin:5px 10px}
#bd-sc input { float:left; display:block; width:155px; margin:5px 10px}
#bd-sc input#btn-login { background:#069; border:0; padding:5px 10px; color:#fff; width:50px}
#bd-sc > a { line-height:35px; text-decoration:none; color:#069}
#bd-sc > a:hover { text-decoration:underline}
#shortcut-block #regis { background:#CCC; clear:both; text-align:center; padding:10px}
#shortcut-block #regis a { color:#333; text-decoration:none}

#main-menu { float:left; width: 225px; margin-right:10px}
#main-menu h1 { color:#069}
#main-menu h3 { color:#069; margin-bottom:2px}
#main-menu ul { margin:0; padding:0; list-style:none}
#main-menu ul li { padding:5px; font:12px Arial, Helvetica, sans-serif}
#main-menu ul li:hover, #main-menu ul li.selected { background:#ccc}
#main-menu ul li a { text-decoration:none; color:#333}

#main-con { width:725px; float:left }
#main-con h1 { color:#069}
#main-con h4, #main-con h3 { color:#069; margin-bottom:5px}

.bt { cursor:pointer; float:right; font-size:11xpx; background:url(../images/bt.png) no-repeat;}
#main-con ol li a{ color:#000}
.bt a { width:12px; height:12px; text-decoration:none; display:block}


.con-side { float:left; width:355px; margin-right:5px}
.photo-block { background:#f3f3f3; margin-bottom:5px; padding:10px 0}
.photo-block img { float:left; margin-right:10px; margin-left:10px; width:75px; height:97px}
.photo-block .info-rgt { width:260px; float:left; margin-top:25px}
.photo-block .nm-prs { color:#006699; font-size:16px; font-weight:bold; display:block; }
.photo-block .pst-prs { color:#006699; font-size:14px; display:block; font-weight:bold}
.photo-block .desc-prs { display:block; clear:both; padding-top:10px; display:none}

.looktip {
    cursor: pointer;
    background-color: #F7F7F7;
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 3px #000000;
    float: right;
    left: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 69px;
    width: 100px;
    z-index: 305;
}

#forget-block { width:300px; margin:0 auto; background:#01669a; padding:10px; box-shadow:0 0 3px #333; font:12px Arial, Helvetica, sans-serif}
h2 { color:#000}
#frmForgot {}
#frmForgot label { width:250px; display:block; padding:8px 0; color:#fff}
#frmForgot input { width:300px; padding:5px 0} 

#closebtn {display:block; background:url(../images/close-popup-btn.png) no-repeat; width:22px; height:22px; float:right; cursor:pointer}
#closebtn:hover {background:url(../images/close-popup-btn-hover.png) no-repeat}

.cust-pkg td { /*background:#DDD*/}
.cust-pkg-head td { padding: 0px !important}
.cust-pkg-head td div {background:#DDD; border-radius: 5px 5px 0 0;padding:0px 10px; float:right; margin-top:5px; font-size:11px; line-height:24px}
.cust-pkg-head td div input { width: 40px; text-align: right; height: 12px;}
.cust-pkg-head td div a { background-image: url("../images/info.png");background-position: center center;background-repeat: no-repeat;display: block;float: right;height: 16px;margin: 0 5px;padding-top: 9px;width: 16px;}
.inv-info-btn { background-image: url("../images/info.png");background-position: center center;background-repeat: no-repeat;display: block;float: right;height: 16px;margin: 0 5px;padding-top: 9px;width: 16px;}
/*
.packageE td { background:#DDD}
.packageheaderE td { padding: 0px !important}
.packageheaderE td div {background:#DDD; border-radius: 5px 5px 0 0;padding:0px 10px; float:right; margin-top:3px; font-size:11px; line-height:24px}
.packageheaderE td div input { width: 40px; text-align: right; height: 12px;}
.packageR td { background:#DDD}
.packageheaderR td { padding: 0px !important}
.packageheaderR td div {background:#DDD; border-radius: 5px 5px 0 0;padding:0px 10px; float:right; margin-top:3px; font-size:11px; line-height:24px}
.packageheaderR td div input { width: 40px; text-align: right; height: 12px;}
*/