body {
    margin: 0px;
    padding: 0px;
    font-family: "Tahoma";
    font-size: 8pt;
    color: #666;
    text-align: center;
    background: url(graphics/bg.jpg) #262C6A no-repeat;
}

div, p, th, td, ul, ol, li, dd, dl, dt {
    font-family: "Tahoma";
    font-size: 8pt;
}

/* div { border: 1px red dashed; } */

form { margin: 0px; padding: 0px; }

input, select, option, textarea {
    font-family: "Tahoma";
    font-size: 8pt;
    color: #333;
    margin-right: 4px;
    padding-left: 2px;
    padding-right: 2px;
}

input, select { vertical-align: middle; }
ul, ol, li { margin: 0px; padding: 0px; text-align: left; margin: 0px 0px; }
ul li { list-style: disc outside; }
ol li { list-style: decimal outside; }
input.number, option.number { text-align: right; }

span.required { color: red; margin-left: 0px; margin-right: 4px; font-weight: bold; }

.hidden-textbox, .hidden-textbox-right {
    background: transparent;
    border: none;
    text-decoration: none;
    text-align: center;
}
.hidden-textbox-right { text-align: right; padding-right: 4px; }

center { padding: 0px; position: relative; }

a, a:link, a:active, a:visited, a:hover { text-decoration: none; color: #0000EE; }
a:hover { text-decoration: underline; }

img { border: 0px; }

td, th { padding: 0; }

.w214, .w640, .w854 { margin: 0; }
.w214 { width: 214px; }
.w640 { width: 640px; }
.w174 { width: 174px; }
.w680 { width: 680px; }
.w714 { width: 714px; }
.w764 { width: 764px; }
.w854 { width: 854px; }
.w900 { width: 900px; }
.w95p { width: 95%; }
.aleft { float: left; display: inline; text-align: left; }
.aright { float: right; display: inline; text-align: right; }

#edutravel { text-align: right; margin: 15px 0 10px; color: #EEE; }
#freedomdive { float: left; }
#contact { float: right; text-align: right; color: #161B67; }
#menu { width: 854px; }
#content { margin-top: 15px; position: relative; }
#copyright { text-align: center; margin: 10px 0 0; color: #EEE; font-size: 7pt; }
#partner { text-align: center; }
#partner img { margin: 0px 15px; z-index: 2; }
#partner div { height: 34px; float: left; }

.rframe { margin: 10px 0 0px; }
.rframe_top .left, .rframe_top .right, .rframe_bot .left, .rframe_bot .right, .rframe_mid .left, .rframe_mid .right { width: 23px; }
.w900 .rframe_top .mid, .w900 .rframe_bot .mid, .w900 .rframe_mid .mid { width: 854px; }
.w640 .rframe_top .mid, .w640 .rframe_bot .mid, .w640 .rframe_mid .mid { width: 594px; }
.rframe_top div, .rframe_bot div { height: 20px; float: left; }
.rframe_top .left { background: url(graphics/rframe_tl.png); }
.rframe_top .mid { background: url(graphics/rframe_tm.png); }
.rframe_top .right { background: url(graphics/rframe_tr.png); }
.rframe_mid .left { background: url(graphics/rframe_ml.png); }
.rframe_mid { float: left; }
.rframe_mid .mid { background: white; }
.rframe_mid .right { background: url(graphics/rframe_mr.png); }
.rframe_bot .left { background: url(graphics/rframe_bl.png); }
.rframe_bot .mid { background: url(graphics/rframe_bm.png); }
.rframe_bot .right { background: url(graphics/rframe_br.png); }

#lang { margin: 0px 0 0; float: right; display: inline; }
.link_lang { margin: 0px 5px; }

.title_bg { height: 22px; }

.mbox { padding: 0px; margin-bottom: 15px; }
.w214 .mbox .title_bg { width: 200px; }
.w174 .mbox .title_bg { width: 160px; }

.title_text { margin: 4px 0px; position: absolute; left: 12px; }
img.title_text { margin: 2px 0; }
.title { position: relative; padding: 0; color: white; font-weight: bold; }
.title_icon { position: relative; z-index: 10; }
.title .more { margin: 7px 0px; position: absolute; right: 10px; }

.cgray { background: #EDEFEC; }
.cwhite { background: white; }

.cbox { background: #EDEFEC; position: relative; padding: 10px 0 0 0; }
.cbox .box_content { margin: 0 20px 10px 20px; text-align: left; }
.rbox { width: 100%; padding: 0; margin: 0; }
.rbox .gray_bl { background: url(graphics/rbox-gray_bl.gif); width: 7px; height: 7px; float: left;}
.rbox .gray_br { background: url(graphics/rbox-gray_br.gif); width: 7px; height: 7px; float: right;}
.rbox .gray_tl { background: url(graphics/rbox-gray_tl.gif); width: 7px; height: 7px; float: left;}
.rbox .gray_tr { background: url(graphics/rbox-gray_tr.gif); width: 7px; height: 7px; float: right;}

.cbox ul li { list-style: url(graphics/arrow-blue.gif) outside; margin: 5px 0 5px 15px; }
.box_content ul li, .box_content ol li { margin: 5px 0 5px 15px; }
ul.arwgray li { list-style: url(graphics/arrow-gray.gif) outside; }
ul.arwblue li { list-style: url(graphics/arrow-blue.gif) outside; }
ul.arwred li { list-style: url(graphics/arrow-red.gif) outside; }
ul.arwgreen li { list-style: url(graphics/arrow-green.gif) outside; }
ul.arwyellow li { list-style: url(graphics/arrow-yellow.gif) outside; }
ul.arworange li { list-style: url(graphics/arrow-orange.gif) outside; }
ul.arwpurple li { list-style: url(graphics/arrow-purple.gif) outside; }

.cpane { position: relative; margin: 0px 0 0 30px; }
.cpane .box_content { margin: 0; text-align: left; }
.w640 .cpane .title_bg { width: 596px; }
.w680 .cpane .title_bg { width: 636px; }
.fcpane { position: relative; margin: 5px 0 0 0px; }
.w854 .fcpane .title_bg { width: 840px; }
.w764 .fcpane .title_bg { width: 750px; }
.w714 .fcpane .title_bg { width: 700px; }

/* index component */
#announcement { width: 98%; border: 0px dashed blue; text-align: center; }

.zone { position: relative; text-align: left; }
.zone div { float: left; display: inline; }
.zone .title { position: relative; top: 16px; color: white; font-weight: bold; }
.zone .title_text { left: 2px; }

#whatsnew .cbox { top: -10px; left: 3px; width: 607px; margin-left: 0px; }
#whatsnew .title_bg { width: 534px; }
#whatsnew .cbox .box_content { margin-left: 30px; }
#whatsnew .cbox ul li { list-style: url(graphics/icon-diving_flag.gif) outside; margin: 5px 20px; }

#trip #domestic, #trip #inter { width: 300px; float: left; display: inline; margin-right: 10px; }
#trip #domestic .title_bg { width: 210px; }
#trip #inter .title_bg { width: 185px; }
/* #trip #domestic .title, #trip #inter .title { width: 200px; } */

.trip_link, .trip_link_over { background: #EDEFEC; padding: 2px; margin: 5px 6px 5px 10px; border: 1px #DDD solid; text-align: center; min-width: 280px; font-weight: bold; }
/* bug of IE about differnt width modl of div. here solved by min-width + padding for firefox */
.trip_icon { width: 280px; height: 90px; }
.trip_link_over { cursor: pointer; }
#domestic .trip_link_over { background: #C8E46B; color: white; }
#inter .trip_link_over { background: #FFC063; color: white; }
.trip_name { float: left; margin: 2px 2px 0; }
.trip_brief { float: right; margin: 2px 2px 0; }

/* common component */
strong.red { color: red; }
.reward_title { color: #107FCE; font-weight: bold; font-size: 9pt; }
.reward_detail { text-align: right; }
.point_use { color: #66AA00; font-weight: bold; font-size: 10pt; }

.tn_menu { padding: 2px; border: 1px #DDD solid; } /* #C6E271 solid; } */

.menu_intro, .menu_table { margin-top: 5px; width: 95%; }

.menu_intro .menu_item { margin-bottom: 20px; width: 100%; }
.menu_item div { float: left; display: inline; margin: 0 5px; }
.menu_item .title { color: white; font-weight: bold; }
.menu_intro .title_bg { width: 434px; }
.menu_item .box_content { width: 420px; margin: 10px 18px; text-align: left; }

.menu_table .menu_item { margin: 10px 0; width: 100%; }
.menu_table .title { font-weight: bold; padding: 3px; text-align: right; width: 445px; }
.menu_table#domestic .title { color: #8DB816; background: #EFFACF; }
.menu_table#inter .title { color: #FA9A09; background: #FFEFD7; }
.menu_table .box_content { width: 450px; margin: 5px 5px; text-align: left; }
.menu_table .rbox { width: 595px; background: #C8E46B; margin: 0 4px; }

.zone#domestic .title_bg { width: 520px; }
.zone#inter .title_bg { width: 495px; }

.dotted_line { width: 100%; height: 5px; background: url(graphics/dot.gif); }

.menu_box { }

.menu_list { }

.voice_title { margin: 2ex; color: #0000EE; font-weight: bold; }

/* block content */
.block { float: left; display: inline; background: transparent; }
.block p, .block .hd1 { padding: 0 10px 0 20px; margin: 1em auto; }
.block .hd1 { color: #3A67A2; font-weight: bold; }
.block .hdc { color: #FC8A2C; font-weight: bold; margin-left: 1em; }
.block img { vertical-align: middle; }
.img_bd img { margin: 10px; padding: 4px; border: 1px #DDD solid; background: white; }
.img_icon img { margin: 0; padding: 0; border: none; }
.img_simple { text-align: center; }
.img_dashed { text-align: center; }
.img_dashed img { margin: 10px; padding: 0px; border: 1px #666 dashed; }
.img_nobd { text-align: center; }
.img_nobd img { margin: 10px 0; padding: 0; border: none; background: white; }
.p_simple { padding: 0; }
.p_indent { text-indent: 0; }
.p_indent p:first-letter { padding-left: 2em; }      /* fix IE bug of text-indent which right margin will be calculated as if it is over the margin, while it is not */
.list_simple p:first-letter { padding-left: 2em; }
.p_indent .hd1 { text-indent: 0; }
.p_indent .hdc { text-indent: 0; }
.list_simple { }
.list_simple ul { margin: auto 1em auto 3em; }
.list_simple ol { margin: auto 1em auto 3em; }
.list_simple li { margin: 1em auto; }
.hdc { margin-top: 2ex; }

.h_row { vertical-align: top; }
.t_hanging { text-indent: 0; }
.t_hanging { margin: 1em auto 1em 4em; }          /* put these classes in a div containing the table to fix IE bug that it will unable to calculate correct table width */
.h_wfull .t_hanging { margin: auto .1em; }
.t_hanging .h_key { font-weight: bold; }
.h_keyright .h_key { text-align: right; padding-right: 1em; }
.h_row ul li { margin: 0 0 0 15px; }
.t_table { margin: 1em auto 1em 4em; }

.h_simple { }
.h_simple td.h_row { padding: .1em 0; }
.h_multiline { }
.h_multiline td.h_row { padding: .3em 0; }
.h_simple p:first-letter { padding-left: 2em; }     /* split to fix IE bug that unstable apply this setting page-to-page */
.h_multiline p:first-letter { padding-left: 2em; }
.t_simple p:first-letter { padding-left: 2em; }

.h_schedule .h_key { text-align: right; padding-right: 2em; }
.h_schedule td.h_row { padding: .3em 2em .3em 0; }

.block.simple_form { margin: 1em 1em; }

.t_simple { }

table.t_ltblue { border-top: 2px solid #CCDDDD; background: white; }
table.t_ltblue th, table.t_ltblue td { font-size: 8pt; padding: 4px; border-bottom: 1px solid #CCDDDD; }
table.t_ltblue th { font-weight: bold; text-align: center; background: #E5F0F1; }
table.t_ltblue td.t-colhead { font-weight: bold; text-align: left; background: #E5F0F1; }
table.t_ltblue td.t-section { font-weight: bold; border-top: 1px solid #CCDDDD; padding-left: 10px; }

table.t_ltorange { border-top: 2px solid #FFE0AC; background: white; }
table.t_ltorange th, table.t_ltorange td { font-size: 8pt; padding: 4px; border-bottom: 1px solid #FFE0AC; }
table.t_ltorange th { font-weight: bold; text-align: center; background: #FFF4E0; }
table.t_ltorange td.t-colhead { font-weight: bold; text-align: left; background: #FFF4E0; }
table.t_ltorange td.t-section { font-weight: bold; border-top: 1px solid #FFE0AC; padding-left: 10px; }

table.t_ltgreen { border-top: 2px solid #BEEFA7; background: white; }
table.t_ltgreen th, table.t_ltgreen td { font-size: 8pt; padding: 4px; border-bottom: 1px solid #BEEFA7; }
table.t_ltgreen th { font-weight: bold; text-align: center; background: #E6F9DD; }
table.t_ltgreen td.t-colhead { font-weight: bold; text-align: left; background: #E6F9DD; }
table.t_ltgreen td.t-section { font-weight: bold; border-top: 1px solid #BEEFA7; padding-left: 10px; }

table.t_ltgray { border-top: 2px solid #CCC; background: white; }
table.t_ltgray th, table.t_ltgray td { font-size: 8pt; padding: 4px; border-bottom: 1px solid #CCC; }
table.t_ltgray th { font-weight: bold; text-align: center; background: #F4F4F4; }
table.t_ltgray td.t-colhead { font-weight: bold; text-align: left; background: #F4F4F4; }
table.t_ltgray td.t-section { font-weight: bold; border-top: 1px solid #CCC; padding-left: 10px; }

table.t_ltoros { border-top: 2px solid #F5D6BD; background: white; }
table.t_ltoros th, table.t_ltoros td { font-size: 8pt; padding: 4px; border-bottom: 1px solid #F5D6BD; }
table.t_ltoros th { font-weight: bold; text-align: center; background: #FBEDE1; }
table.t_ltoros td.t-colhead { font-weight: bold; text-align: left; background: #FBEDE1; }
table.t_ltoros td.t-section { font-weight: bold; border-top: 1px solid #F5D6BD; padding-left: 10px; }


/* Form Layout */
.link_icon { margin: auto 4px; }
.link_icon img { vertical-align: middle; border: none; }

table.result_table, table.form_table {
    width: 100%;
    padding: 0px;
}

.head_col, .head_col_small, .head_table, .head_row, .head_row_top {
    padding: 3px 5px;
    font: bold 8pt Tahoma;
}

.field_name { vertical-align: middle; margin: auto 5px; font: bold 8pt Tahoma; }
.result_table .field_name { vertical-align: baseline; }

.head_col_small {
    font-size: 7pt;
}

.data_right, .data_left, .data_center {
    padding: 3px 5px;
    font: normal 8pt Tahoma;
}
.data_choice { padding: 5px 5px 3px 0px; }
.input_remark { vertical-align: middle; }
.data_choice input { margin-top: 0px; margin-left: 10px; }
.data_choice img.icon_status { margin: -2px 2px 0; }
.separator_row {
    padding: 0px;
    height: 8px;
}
.separator_col { padding: 0px; }

.head_col, .head_col_small, .head_table, .data_center { text-align: center; }
.head_row, .head_row_top, .field_name, .data_right { text-align: right; }
.data_left, .section_table { text-align: left; }
.head_row_top, .field_name_top { vertical-align: top; padding-top: 4px; }
.result_table .head_row_top { padding-top: 3px; }

table.layout, table.layout .data_left, table.layout .data_right, table.layout .data_center { border: none 0px; padding: 0px; }

/* Form Color */

.head_col, .head_col_small, .head_table, .head_row, .head_row_top, .data_right, .data_left, .data_center, .separator_row, .separator_col {
    border: 1px solid #EDEFEC;
    background: transparent;
}

.head_col, .head_col_small, .head_table, .head_row, .head_row_top, .field_name { color: #666; }

.data_right, .data_left, .data_center { color: #666; }