* { box-sizing: border-box; }
body { margin: 0px; font-size: 12px; font-family: Arial; background: #FAFAFA; overflow-y: scroll; }
body.noscroll { overflow: hidden; padding-right: 17px; }

/* Document Header */
#pgHead { position: fixed; top: 0px; left: 0px; right: 0px; background: #333; box-shadow: 0px 1px 3px #666; z-index: 990; }
#pgHead .mobile { display: none; }
#pgHead div.content { margin: auto; width: 1000px; }
#pgHead div.content table { width: 100%; border-spacing: 0px; padding: 0px; margin: 0px; }
#pgHead div.content table td { }
#pgHead div.content img { height: 50px; vertical-align: middle; }
#pgHead div.content a.lbl { line-height: 16px; opacity: .5; filter: alpha(opacity=50); text-decoration: none; color: #FFF; cursor: default; }
#pgHead div.content a.lbl.name { font-weight: bold; }
#pgHead div.content a.lbl.edit { cursor: pointer; border: 1px solid #FFF; border-radius: 10px; padding: 1px 15px; margin-top: 2px; display: inline-block; }
#pgHead div.content a.lbl.edit:hover { opacity: .75; filter: alpha(opacity=75); text-decoration: none; background: #FFF; color: #666; }
#pgHead div.content a.lbl.edit:active { opacity: 1; filter: alpha(opacity=100); text-decoration: none; }
#pgHead div.content span.spaceline { color: #FFF; opacity: .5; filter: alpha(opacity=50); }
#pgHead div.content a.lbl.name.dark { color: #333; }
#pgHead div.content a.lbl.edit.dark { border: 1px solid #333; color: #333; }
#pgHead div.content a.lbl.edit.dark:hover { opacity: .75; filter: alpha(opacity=75); text-decoration: none; background: #888; color: #333; }
#pgHead div.content a.lbl.edit.dark:active { opacity: 1; filter: alpha(opacity=100); text-decoration: none; }
.mobile #pgHead div.content { display: none; }
.mobile #pgHead .mobile { display: block; position: fixed; height: 50px; left: 0px; right: 0px; box-shadow: 0px 0px 2px #333; font-size: 0px; }
.mobile #pgHead .mobile .men { position: absolute; top: 0px; left: 0px; display: inline-block; height: 50px; width: 50px; background-position: center center; background-size: 50%; background-repeat: no-repeat; }
.mobile #pgHead .mobile .tit { display: block; line-height: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 50px; padding-right: 20px; font-size: 18px; }
.mobile #pgHead .mobile .pts { position: absolute; right: 13px; top: 13px; display: inline-block; font-size: 10px; text-decoration: none; line-height: 24px; padding: 0px 10px; border-radius: 5px; font-weight: bold; }

/* Page Body */
#pgBody { margin: auto; margin-top: 60px; margin-bottom: 30px; width: 1000px; background: #FFF; box-shadow: 0px 1px 2px #AAA; }
#pgTable { width: 100%; min-height: 500px; border-spacing: 0px; border-collapse: separate; border: 1px solid #BBB; }
#pgCopyright { padding: 0px 10px; color: #888; font-size: 11px; background: #FAFAFA; }
#pgAbout { text-align: right; background: #FAFAFA; font-size: 10px; padding: 0px 10px; }
#pgAbout span { margin: 0px 5px; color: #666; }
#pgAbout a { color: #666; text-decoration: none; }
#pgAbout a:hover { text-decoration: underline; }
#pgContent { width: 798px; }
#pgCompany { background: #FAFAFA; border-top: 1px solid #BBB; padding: 0px; height: 0px; }
#pgCompany div.footwrap { border-bottom: 1px dotted #DDD; }

body.mobile { background: #DDD; }
.mobile #pgBody { margin-top: 50px; box-shadow: 0px 0px 0px #AAA; width: 100%; }
.mobile #pgContent { width: 100%; }
.mobile #pgTable { width: 100%; border: 0px solid #BBB; }
.mobile tr.footer { display: none; }

/* Left Bar */
#tdLeftbar span.line { display: block; width: 100%; border-bottom: 1px solid #BBB; margin-bottom: 10px; }
.mobile #tdLeftbar { display: none; }

/* Left Bar - Profile */
#pgProfile { display: block; padding: 10px; padding-bottom: 0px; }
#pgProfile div.pic { display: block; position: relative; padding: 10px; padding-bottom: 5px; }
#pgProfile div.pic img.pic { width: 100%; border: 1px solid #BBB; box-shadow: 0px 0px 2px #AAA; }
#pgProfile div.pic div.opt { bottom: -1px; cursor: pointer; position: absolute; width: 50px; height: 50px; opacity: 0.5; filter: alpha(opacity=50); }
#pgProfile div.pic div.opt span.img { left: 15px; bottom: 15px; height: 20px; width: 20px; display: block; position: absolute; z-index: 2; }
#pgProfile div.pic div.opt span.cir { border: 2px solid #FFF; box-shadow: 0px 0px 2px #AAA; height: 0px; width: 0px; margin-left: -0px; margin-top: -0px; position: absolute; left: 50%; top: 50%; z-index: 1; display: block; border-radius: 100%; background: #333333; }
#pgProfile div.pic div.opt.lft { left: 1px; }
#pgProfile div.pic div.opt.rgt { right: 1px; }
#pgProfile div.pic div.opt.lft span.img { background-position: center center; }
#pgProfile div.pic div.opt.rgt span.img { background-position: center center; }
#pgProfile div.det { padding: 0px 10px; padding-bottom: 5px; }
#pgProfile div.det span.nam { display: block; line-height: 20px; font-size: 14px; font-weight: bold; color: #333; width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#pgProfile div.det span.dep { display: block; line-height: 15px; font-size: 11px; padding-left: 5px; font-weight: bold; color: #666; width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#pgProfile div.det span.tit { display: block; line-height: 15px; font-size: 11px; padding-left: 5px; color: #888; width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Left Bar - Menu */
#pgLinks { padding: 0px 10px; padding-top: 5px; }
#pgLinks a.lnk { width: 179px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 22px; padding-left: 15px; text-decoration: none; color: #666; background-image: none; background-repeat: no-repeat; background-position: 0px 0px; }
#pgLinks a.lnk:hover { background-color: #EEE; color: #000; }
#pgLinks a.lnk.sel { background-color: #333; color: #FFF; font-weight: bold; }
#pgLinks a.lnk.par { font-weight: bold; }
#pgLinks a.lnk.par.open { background-position: 0px -22px; }
#pgLinks a.lnk.sub { padding-left: 25px; line-height: 20px; font-size: 11px; }
#pgLinks a.lnk.sub.sel { }
#pgLinks div.menu { display: none; }
#pgLinks div.menu.open { display: block; }

/* Left Bar - Points */
#pgPoints { padding: 0px 10px; padding-top: 7px; }
#pgPoints div.blkPoints { display: block; margin-bottom: 30px; text-align: center; }
#pgPoints div.blkPoints:last-of-type { margin-bottom: 0px; }
#pgPoints div.blkPoints span.tit { font-weight: bold; text-align: left; color: #333; display: block; font-size: 12px; margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 179px; }
#pgPoints div.blkPoints span.sub { font-weight: normal; text-align: left; color: #666; display: block; font-size: 11px; margin-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 179px; }
#pgPoints div.blkPoints div.sum { display: block; text-align: right; margin-top: 3px; padding: 0px 5px; }
#pgPoints div.blkPoints div.sum a { text-align: right; color: #888; display: block; font-size: 10px; text-decoration: none; }
#pgPoints div.blkPoints div.sum a:hover { text-decoration: underline; }
#pgPoints div.blkPoints div.sum a:active { color: #333; }
#pgPoints div.blkPoints a.lnk { display: inline-block; background: #333; text-align: center; text-decoration: none; width: 140px; height: 140px; border-radius: 100%; line-height: 140px; }
#pgPoints div.blkPoints a.lnk span.lbl { display: none; }
#pgPoints div.blkPoints a.lnk span.val { display: block; font-size: 24px; color: #FFF; }
#pgPoints div.blkPoints a.lnk span.hov { display: none; font-size: 18px; color: #FFF; line-height: 20px; padding-top: 50px; }
#pgPoints div.blkPoints a.lnk:hover { box-shadow: 0px 0px 5px #333; }
#pgPoints div.blkPoints a.lnk:hover span.lbl { display: none; }
#pgPoints div.blkPoints a.lnk:hover span.val { display: none; }
#pgPoints div.blkPoints a.lnk:hover span.hov { display: block; }
#pgPoints div.blkPoints a.lnk:active { background: #333; }

/* Left Bar - Quicklist */
#pgQuicklist { text-align: left; padding: 10px; padding-top: 15px; position: relative; font-size: 0px; }
#pgQuicklist span.tit { font-weight: bold; text-align: left; color: #888; display: block; font-size: 11px; margin-bottom: 4px; }
#pgQuicklist span.tip { display: none; position: absolute; background: #333; border: 1px solid #222; box-shadow: 0px 0px 2px #000; opacity: .9; filter: alpha(opacity=90); border-radius: 5px; color: #FFF; left: 10px; right: 10px; line-height: 25px; font-weight: normal; padding: 0px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
#pgQuicklist a.pic { padding: 3px; margin: 2px; background: #CCC; display: inline-block; }
#pgQuicklist a.pic:hover { background: #333; }
#pgQuicklist a.pic img { width: 49px; height: 49px; vertical-align: top; border: 1px solid #CCC; }

/* Header */
div.pageHeader { display: block; }
div.pageHeader.float { position: fixed; top: 0px; left: 0px; width: 798px; box-shadow: 0px 1px 2px #AAA; z-index: 999; }
div.pageHeader div.title { padding: 5px; background: #333; border-bottom: 2px solid #BBB; }
div.pageHeader div.title span.lbl { line-height: 30px; font-size: 18px; color: #FFF; vertical-align: top; padding-left: 5px; }
div.pageHeader div.tabstrip { padding: 0px 0px; background: #FAFAFA; border-bottom: 1px solid #BBB; font-size: 0px; }
div.pageHeader div.tabstrip a.tab { font-size: 12px; display: inline-block; text-decoration: none; color: #AAA; padding: 5px 10px; padding-top: 7px; border-bottom: 2px solid transparent; }
div.pageHeader div.tabstrip a.tab:hover { background: #EEE; border-bottom: 2px solid #DDD; }
div.pageHeader div.tabstrip a.tab.sel { background: #EEE; border-bottom: 2px solid #DDD; color: #888; font-weight: bold; }
div.pageHeader div.tabstrip a.tab.mm { padding-right: 22px; position: relative; }
div.pageHeader div.tabstrip a.tab.mm .mm { position: absolute; height: 22px; width: 15px; top: 4px; right: 3px; background-position: 0px -22px; opacity: 0.5; filter: alpha(opacity=50); }
div.pageHeader div.tabstrip a.tab .menu { cursor: default; position: absolute; left: -2px; top: 100%; background: #DDD; white-space: nowrap; z-index: 10000; padding-right: 2px; padding-bottom: 2px; box-shadow: 1px 2px 2px #888; }
div.pageHeader div.tabstrip a.tab .menu .col { vertical-align: top; display: inline-block; padding-left: 2px; }
div.pageHeader div.tabstrip a.tab .menu .col .head { min-width: 150px; vertical-align: top; display: block; width: 100%; background: #DDD; font-size: 11px; line-height: 22px; padding: 0px 10px; margin-top: 2px; font-weight: normal; color: #888; }
div.pageHeader div.tabstrip a.tab .menu .col .node { cursor: pointer; min-width: 150px; vertical-align: top; display: block; width: 100%; background: #EEE; font-size: 11px; line-height: 22px; padding: 0px 10px; margin-top: 2px; font-weight: normal; color: #333; }
div.pageHeader div.tabstrip a.tab .menu .col .node:hover { background-color: #FFFEC9; }
div.pageHeader div.tabstrip a.tab .menu .col .node:active { background-color: #FFF; }

div.pageHeader div.warning { background-color: #FFFEC9; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; min-height: 30px; background-position: 5px center; background-repeat: no-repeat; border-bottom: 1px solid #C4C42D; border-top: 1px solid #C4C42D; }
div.pageHeader div.warning p { display: block; line-height: 18px; padding: 0px; margin: 0px; font-size: 11px; color: #969426; font-weight: bold; }
div.pageHeader div.error { background-color: #EDCAD2; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; min-height: 30px; background-position: 5px center; background-repeat: no-repeat; border-bottom: 1px solid #A63238; border-top: 1px solid #A63238; }
div.pageHeader div.error p { display: block; line-height: 18px; padding: 0px; margin: 0px; font-size: 11px; color: #A63238; font-weight: bold; }
div.pageHeader div.data { background-color: #EEE; border-bottom: 1px solid #BBB; border-top: 1px solid #EEE; }
.mobile div.pageHeader { display: none; }

/* Rewards Header */
table.program_table { padding: 5px; width: 100%; table-layout: fixed; border-spacing: 0px; }
table.program_table td.awd { padding: 0px; vertical-align: top; }
table.program_table td.awd span.lbl { display: block; margin-top: 5px; font-size: 11px; color: #666; padding-right: 25px; }
table.program_table td.pts { padding: 0px; width: 150px; }
table.program_table td.crt { padding: 0px; width: 75px; padding-left: 5px; text-align: center; }
table.program_table td.crt a { text-decoration: none; }
table.program_table td.crt a div.cart { height: 55px; width: 55px; display: inline-block; font-size: 15px; color: #FFF; font-weight: bold; padding-top: 23px; line-height: 26px; padding-right: 1px; }
table.program_table td.crt a span.pts { margin-top: -5px; display: block; font-size: 10px; text-align: center; width: 100%; font-weight: bold; color: #666; text-decoration: none; }

table.program_table td.crt a:hover span.pts { text-decoration: underline; }
table.program_table td.crt a:active span.pts { color: #000; }
table.program_table td.crt a:hover div.cart { background-position: -55px 0px; }
table.program_table td.crt a:active div.cart { background-position: -110px 0px; }

/* DEV BLOCK */
div.dev { background: #FFF; box-shadow: 0px 0px 2px #AAA; border: 1px solid #FFF; text-align: left; font-size: 13px; padding: 20px; margin: 20px; }
div.dev a { color: blue; }
div.headdev { background: #EEE; text-align: left; font-size: 13px; padding: 10px; border-bottom: 1px solid #BBB; }
div.headdev a { color: blue; }

table.largerange { width: 100%; table-layout: fixed; border-spacing: 0px; }
table.largerange td.text { padding: 0px; }
table.largerange td.lbl { text-align: center; width: 40px; padding: 0px; font-size: 14px; font-weight: bold; color: #666; }

/* Tutorial */
div.tutorial { z-index: 100000000; }
div.tutorial span.sh_bg { z-index: 100000001; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #FFF; opacity: 0; filter: alpha(opacity=0); }
div.tutorial span.sh_top { z-index: 100000002; position: fixed; top: 0px; left: 0px; right: 0px; height: 100px; background: #000; opacity: 0; filter: alpha(opacity=0); }
div.tutorial span.sh_bot { z-index: 100000002; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 100px; background: #000; opacity: 0; filter: alpha(opacity=0); }
div.tutorial span.sh_lft { z-index: 100000002; position: fixed; top: 100px; bottom: 100px; left: 0px; width: 100px; background: #000; opacity: 0; filter: alpha(opacity=0); }
div.tutorial span.sh_rgt { z-index: 100000002; position: fixed; top: 100px; bottom: 100px; right: 0px; width: 100px; background: #000; opacity: 0; filter: alpha(opacity=0); }
div.tutorial div.tbox { z-index: 100000003; position: fixed; height: 0px; width: 0px; background: red; border-radius: 5px; padding: 10px; }
div.tutorial div.tbox div.wrp { display: none; }
div.tutorial div.tbox img.logo { width: 400px; height: 50px; }
div.tutorial div.tbox span.title { line-height: 30px; font-size: 18px; }
div.tutorial div.tbox span.desc { display: block; line-height: 16px; font-size: 14px; margin-top: 10px; }
div.tutorial div.tbox div.buts { margin-top: 20px; }
div.tutorial div.tbox div.buts a { margin-right: 10px; font-size: 12px; line-height: 30px; }
div.tutorial div.tbox div.buts.right { margin-top: 20px; text-align: right; }
div.tutorial div.tbox div.buts.right a { margin-left: 10px; margin-right: 0px; font-size: 12px; line-height: 30px; }
div.tutorial a.tbut { text-decoration: none; height: 30px; display: inline-block; padding: 0px 15px; line-height: 30px; border-radius: 2px; font-weight: bold; cursor: pointer; }
div.tutorial a.tlink { cursor: pointer; font-size: 11px; }
div.tutorial a.tlink:hover { text-decoration: underline; }
div.tutorial a.tlink:active { text-decoration: underline; }

.data_menu { width: 100%; table-layout: fixed; border-spacing: 0px; margin-top: -1px; }
.data_menu td.left { border-left: 1px solid #BBB; }
.data_menu td.node { padding: 0px; width: 100px; vertical-align: top; }
.data_menu td.node a { display: block; line-height: 34px; padding-left: 10px; padding-right: 10px; font-size: 0px; position: relative; text-decoration: none; color: #333; }
.data_menu td.node a:hover { background: #FFF; }
.data_menu td.node a:active { background: #DDD; }
.data_menu td.node.drop a { padding-right: 25px; }
.data_menu td.node.icon a { padding-left: 0px; }
.data_menu td.node.count a { padding-right: 40px; }
.data_menu td.node a .text { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-weight: bold; }
.data_menu td.node a .icon { background: red; height: 34px; width: 34px; display: inline-block; vertical-align: top; }
.data_menu td.node a .count { position: absolute; font-size: 10px; background: red; width: 24px; height: 24px; top: 5px; right: 5px; border-radius: 100%; line-height: 25px; text-align: center; color: #FFF; font-weight: bold; }
.data_menu td.node a .mm { position: absolute; background: red; }
.data_menu td.space { padding: 0px; width: auto; }

/* Tutorial New */
.tutorial_node { }
.tutorial_shield { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #000; opacity: 0.75; z-index: 1000000; }
.tutorial_box { position: fixed; top: 100px; left: 50%; bottom: 100px; width: 700px; margin-left: -350px; z-index: 1000001; box-shadow: 0px 0px 75px #000; background: #DDD; outline: 10px solid #FFF; }
.tutorial_box .head { position: relative; height: 40px; position: absolute; top: 0px; left: 0px; right: 0px; }
.tutorial_box .head .lbl { font-size: 18px; line-height: 40px; padding: 0px 10px; }
.tutorial_box .head .textbox { position: absolute; top: 10px; right: 40px; width: 200px; opacity: 0.5; }
.tutorial_box .head .textbox.focus { opacity: 1; }
.tutorial_box .head .close { position: absolute; top: 10px; right: 10px; height: 21px; width: 21px; background: #FFF; }
.tutorial_box .body { position: absolute; background: #DDD; top: 40px; bottom: 40px; left: 0px; right: 0px; overflow-y: auto; overflow-x: auto; border: 1px solid #BBB; border-top: 0px; padding: 10px; }
.tutorial_box .body .stack { line-height: 25px; padding: 0px 10px; font-size: 11px; font-weight: bold; margin-top: -5px; margin-left: -10px; }
.tutorial_box .body .tit { font-size: 22px; line-height: 24px; padding: 5px 0px; display: block; text-align: center; }
.tutorial_box .body .img { display: block; background: red; height: 300px; width: 100%; margin-bottom: 10px; }
.tutorial_box .body .lbl { font-size: 20px; line-height: 24px; padding: 5px 0px; }
.tutorial_box .body .cont { padding: 0px 5px; }
.tutorial_box .foot { text-align: right; position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 10px 0px; font-size: 0px; height: 40px; background: #FFF; }
.tutorial_box .foot .help { position: absolute; left: 5px; top: 10px; }
.tutorial_box .foot .help .lbl { font-size: 11px; font-weight: bold; }
.tutorial_box .foot .hide { opacity: 0; cursor: default }

/* Mobile */
.mobile #pgContent { display: block; }
.mobile_menu #pgProfile { padding: 0px; border-bottom: 1px solid #BBB; }
.mobile_menu #pgProfile div.pic img.pic { box-shadow: 0px 0px 0px; border: 0px; }
.mobile_menu #pgProfile div.opt { display: none; }
.mobile_menu #pgProfile div.det span.dep { padding-left: 0px; }
.mobile_menu #pgProfile div.det span.tit { padding-left: 0px; }
.mobile_menu #pgLinks { padding: 5px 0px; border-bottom: 1px solid #BBB; }
.mobile_menu #pgLinks a.lnk { line-height: 30px; width: 100%; padding-right: 10px; }
.mobile_menu #pgLinks a.lnk.par { background-position: 0px 4px; }
.mobile_menu #pgLinks a.lnk.nomobile { display:none; }
.mobile_menu #pgPoints div.blkPoints span.tit { width: 100%; text-align: center; }
.mobile_menu #pgPoints div.blkPoints span.sub { width: 100%; text-align: center; }
.mobile_menu #pgQuicklist { display: none; }

.mobile .table_layout td.laycell { display: block; }