body {
    margin:0;
    background: url(../images/webpage/top_bg.png) top left  repeat-x;
}

a:link, a:visited {
    text-decoration: none;
    color: #033;
}

a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}


.menu_font {
    font-size: 14pt;
    color: #000;
    font-weight: bold;
}
.copy_font {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    font-size: 90%;
    color: #FFFFFF;
    line-height: 90%;
}

.imp_li {
    list-style-image: url(../images/icons/icon_1.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #666666;
    text-decoration: none;
    line-height: 165%;
}
html,body {
    font-size:11pt;
    font-family:'cwTeXYen', Arial, Helvetica, sans-serif;
}
h3,h4,h5 {margin:5px 0;}
.content {max-width:886px;margin:auto;padding:0;}
.width-half {width:50%;}
.width-third {width:33%;}
.spaceline3 {height:1px;background-color:#ccc;border-top:solid 1px #f1f1f1;margin:5px 0;}
.search-block-width {padding:0.8em 28% 0.8em 5%;}   
#logo { background: url('../images/webpage/logo-hkaop-small.png') top left no-repeat; height:65px; margin-top:5px; }    
#menu-icon {display:none;}
#menu-mobile {display:none;}
.ease {
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;    

}
.page-intro {display: list-item; list-style-type: none; margin:15px; line-height:160%;}
.enquiry-table {margin:1em auto; width:71%;}
.enquiry-table .title {line-height:22px;color:#666;white-space:nowrap;padding-right:10px;font-size:90%;}
.enquiry-table .row-left { min-height:22px; width:17%; margin:3px 0; text-align: right; }
.enquiry-table .row-right {min-height:22px;width:82%; margin:3px 0;}
.enquiry-table .tips {box-shadow:2px 2px #ccc;color:#666;margin-top:-150px;margin-right:-120px;width:150px; float:right;}
.enquiry-table .sep-line {background: url('../images/icons/search_px.gif')left center repeat-x; height:10px;}

.member-title { background: url('../images/icons/search_tle_bg.gif') repeat-x; min-height: 39px;margin:0;    font-weight: bold;
    color: #ffffff;
}
.member-title-left { 
    padding-left:35px; 
    background:url(../images/icons/search_tle_spot.gif) 15px 13px no-repeat ;      
    line-height: 39px;
    font-size: 120%;
    float:left;
}
.member-title-right { 
    padding: 0 5px;
    line-height: 39px;
    font-size: 90%;
    float:right;
}
.list-category-block {width:80%;margin:1em auto;}
.list-title-block {margin:1em 2em;}

.category-block {margin-left:7%;}
.menulist {text-align: left; padding: 0; list-style: none;}
.menulist li {line-height: 18px; padding:2px; border-bottom: dotted 1px silver;min-height:40px; width: 245px;display:block;margin-right:5px;}
.menulist a {}
.menulist li:hover {background-color:#eee;}
.menulist li.hasChild {background:url(../images/icons/menuarrow1.gif) right center no-repeat;}
.menulist li.hasChild:hover {background:url(../images/icons/menuarrow2.gif) right center no-repeat #eee;}
.menulistBlk {overflow:visible;margin-left:150px;margin-top:0px;width:255px;display:none;position:absolute;padding-left:5px;border:solid 1px #ccc;}
/*profile*/
.profile-block-spot {background:url('../images/webpage/company_spot.gif') top center repeat-y;}
.category-bar {color:#ff9900;fone-size:100%;font-weight:bold;}

.fixDialogS {position:fixed;top:40%;left:40%;width:20%;height:20%;overflow:auto;z-index:9999;padding:10px;}
.fixDialog {position:fixed;top:25%;left:25%;width:50%;height:50%;overflow:auto;z-index:3999;}
.fixDialogbar {position:fixed; top:20%;left:25%;width:50%;height:5%;z-index:3999; text-align:center;}
.fixDialogL {position:fixed;top:15%;left:15%;width:70%;height:70%;overflow:auto;z-index:2999;}
.fixDialogLbar {position:fixed; top:10%;left:15%;width:70%;height:5%;z-index:2999; text-align:center;}
.fixDialogH {position:fixed;top:5%;left:2%;width:96%;height:95%;overflow:auto;z-index:1999;padding:0;}
.fixDialogHbar {position:fixed; top:0%;left:2%;width:96%;height:5%;z-index:1999; text-align:center;}
.fixDialogH input[type=text],.fixDialogH input[type=password],.fixDialogH textarea {width:90%;}
.fixDialogH textarea {height: 10em;}
.msgbox {background-color: #ffffaa; margin: -2px 0 0 17px; border:solid 1px gray; border-width: 0 1px 1px 0;font-size: 95%;line-height: 100%; text-align:left; padding:5px 5px 5px 10px;}
.editbox {margin:0; background-color: #ffffcc;display:none; border-width:1px 2px 2px 1px;border-color: gray;}
.floatDiv {float:left;overflow:visible;position:absolute;}

.importerBlk {padding:10px 2px;border:solid 1px #fff;border-bottom:dotted 1px #ccc;}
.importerBlk:hover {border:solid 1px #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.importerChildBlk {
    position:absolute;overflow:visible;padding:10px;width:300px;display:none;border:solid 1px #ccc; margin-left: 100px;
}
.faq-content {padding:1em 2em 1em 3em;}
.faq-content td {vertical-align: top; text-align: left;padding-right:3px;}

.searchtitle, .blocktitle { 
    padding:0px 0 1px 30px; background:url(../images/icons/search_bg.png) left top  ;      
    margin:0 30% 0 0;
    height: 32px;
    line-height: 32px;
    font-family: 'cwTeXYen', Arial,Georgia, "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    -moz-border-radius: 0 5px 5px 5px;
    -khtml-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;

}


@media only screen and (max-width:768px) {
    .content {max-width:100%;margin:auto;padding:0;}
    .width-half{width:100%;margin-bottom: 2px;}
    .search-block-width {padding:0.6em 1em;}   
    body {font-size: 14px;}
    
     
    .signbar {display:none;}   
    #menu-icon {display:none;}
    #menu-mobile {display:none;}
    #menu-full {overflow: auto;}
    .page-intro {padding:0;margin:0px;}
    .enquiry-table {width: 99%;}
    .enquiry-table .row-left { min-height: auto; width:100%; margin:3px 0; text-align: left; }
    .enquiry-table .row-right {min-height:auto;width:100%; margin:3px 0;}
    .enquiry-table .tips {box-shadow:2px 2px #ccc;color:#666;margin-top:0px;margin-right:0px;width:90%; float:none;}
    .enquiry-table .sep-line {background: none; height:0px;}
    .list-category-block {width:99%;}
    .list-title-block {margin:1em 5px;}
    .profile-block-spot {background:none;}
    .importerChildBlk { position:relative;overflow:visible; margin:0 auto; width:90%;}
    .importerChildBlk .subtitle {display:none;}
    .fixDialog {position:fixed;top:5%;left:0%;width:100%;height:95%;overflow:auto;z-index:3999;}
    .fixDialogbar {position:fixed; top:0%;left:0%;width:100%;height:5%;z-index:3999; text-align:center;}
    .width-third {width:80%;margin-bottom: 2px;}

}

@media only screen and (max-width:480px) {
    body {font-size: 16px;}
    #logo {
        background-image: url('../images/webpage/logo-hkaop-small2.png');
        background-position: left top;
        height:65px;
    }
    .searchtitle, .blocktitle {margin:0;}
    #menu-full {display:none;}    
    #menu-icon {display:block;}
    #menu-mobile {
        width:100%;
        display:block;
        overflow: hidden;
        position: fixed;
        
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        z-index:9999px; 
          
    }
    #menu-mobile.show {top: 0px;}
    #menu-mobile.hide {top:-480px; }
    #menu-mobile a {display:block; white-space:nowrap; line-height: 36px; text-align: left; padding-left: 10px; border-bottom: solid 1px #333;}
    #menu-mobile .wp-caption {z-index:9999px; background: url('../images/icons/search_bg.png'); margin:0; border-color:#333; border-width: 2px;}
    .member-title-right , .member-title-left {line-height: 30px;}
    .menulist li {line-height: 18px; padding:2px; border-bottom: dotted 1px silver;min-height:40px; width: 99%;display:block;margin-right:0px;}
    .menulistBlk {overflow:visible;margin-left:0px;margin-top:0px;width:95%;display:none;position:relative;padding-left:5px;border:solid 1px #ccc;}
    .category-bar .nowrap { white-space: normal;}
    .faq-content {padding:2px;}
    .width-third {width:100%;margin-bottom: 2px;}

} 

.menu_font {white-space: nowrap;}
.searchform {margin-bottom:1em;}
.searchform .q {border:solid 1px #999; border-right: 0; height:24px; width:100%;padding:0;}
.searchform .qbtn {height:26px;border:0;background-color:transparent;margin:0;padding:0;}
.searchform .l , .searchform .r {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.searchform .l {background:url(../images/webpage/search_bg.png) top left repeat-x;border:solid 1px #999;}
.searchform .r {background:url(../images/webpage/search_bg_right.jpg) top right no-repeat;}

.headline_blue { background:url(../images/icons/icon_h2_mid.gif) repeat-x; height:33px; font-size:100%; line-height:29px;}
.headline_blue .left { background:url(../images/icons/icon_h2_left.gif) top left no-repeat; padding:2px 10px; height:29px; color:#414141;}
.headline_blue .left a { color:#446DCC; text-decoration:underline; }
.headline_blue .left a:hover { color:#446DFF; text-decoration:none; }
.headline_blue .right { background: url(../images/icons/icon_h2_right.gif) top right no-repeat;padding:2px 10px; height:29px; color:#666666; font-weight:normal;}
.headline_blue .right a { text-decoration:underline; }
.headline_blue .right a:hover { color:#333333; text-decoration:none;}

.headline_grey { background:url(../images/icons/icon_h3_mid.gif) repeat-x; height:33px; font-size:100%; line-height:29px;}
.headline_grey .left { background:url(../images/icons/icon_h3_left.gif) top left no-repeat; padding:2px 10px; height:29px; color:#ffffff;margin-left:-3px;}
.headline_grey .left a { color:#446DCC; text-decoration:underline; }
.headline_grey .left a:hover { color:#446DFF; text-decoration:none; }
.headline_grey .right { background: url(../images/icons/icon_h3_right.gif) top right no-repeat;padding:2px 10px; height:29px; color:#ffffff; font-weight:normal;margin-right:-3px;}
.headline_grey .right a { text-decoration:underline; }
.headline_grey .right a:hover { text-decoration:none; background-color:#FFFFCC; }
.headline_fix {position:fixed;top:0;left:0;width:100%;}

.headline_normal {  height:33px; font-size:100%; line-height:29px;}
.headline_normal .left {  padding:2px 10px; height:29px; color:#446D8C;}
.headline_normal .right { padding:2px 10px; height:29px; color:#666666; font-weight:normal;}

.imgframe { background:#FFFFFF; margin:5px; padding:5px; border:solid 1px #D8D8D8;}
.imgframe a { border:solid 1px #ffffff; display:block;}
.imgframe a:hover { border:dashed 1px #00CCFF; display:block;}


.wp-caption, .round { 
    border-radius: 5px;  
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.wp-caption {  
    display:block;
    width:auto;
    border: 1px solid #A7ABB3;
    background-color: #f3f3f3;
    padding: 5px;
    margin: 0px;
}
.wp-caption img {margin: 0;padding: 0;border: 0 none;}

.dotted_t, .dotted_t td {border-top: dotted 1px #cccccc;}
.dotted_b, .dotted_b td {border-bottom: dotted 1px #cccccc;}


.border_b, .border_b td {border-bottom: solid 1px #cccccc;}
.border{border:solid 1px #999;}

.dash_b, .dash_b td {border-bottom: dashed 1px #cccccc;}


.rowpadding td {padding:2px 5px;}
.row td {border:solid 1px silver;padding:2px;}
.rowlink td {border:solid 1px silver;padding:2px;}
.rowlink:hover td{ color:#000000;cursor:default; border-color:#818181; border-width:1px 2px 2px 1px; padding:2px 1px 1px 2px;}
.headcol, .headcol td {color:#333333; background-color:#E1E2E3; padding:0 2px; border:solid 1px silver; font-weight: bold; vertical-align: middle;}
.strongrow td {font-weight: bold;}
.headcol, .headcol td {color:#333333; background-color:#E1E2E3; padding:0 2px; border:solid 1px silver; font-weight: bold; vertical-align: middle;}
.calhead td{padding: 1px; font-weight: bold; border: dotted 1px silver;}
.calrow td{padding: 1px; border: dotted 1px silver;}
.calrow td:hover {background-color:#FFFF66; cursor:pointer;}

.msgBoard {overflow:visible; position:fixed; top:0; left:0; display:none; z-index: 9; background-color:#ffffee; color:#666666;}


.page {text-align:right;}
.page a,.page button{border:solid 1px #ccc; background-color:#eee;padding:2px 4px;margin:1px; display:inline-block;}
.page strong {border:solid 1px #ccc; background-color:#fff;padding:2px 4px;margin-left:1px;color:#c00; display:inline-block;}
.page a:hover,.hoveryel:hover {background-color:#ffc;}
 


/* List Tab */
.tagbar2 { height:25px; margin:0px;padding:0; line-height:25px; vertical-align: middle; border-bottom: solid 1px #990000; list-style: none;}
.tagbar2 li { float:left; text-align:center;  height:25px; min-width:100px; background-color:white; border: solid 1px #990000; border-bottom:0; margin-left:0.5em; font-weight:bold;padding:0; }
.tagbar2 li strong {display:block; height:25px; font-size:90%; color:#CC0000; padding: 0 5px;}
.tagbar2 li strong:hover {text-decoration:underline;}
.tagbar2 li a { display:block; height:24px;background-color: #CC0000; border:0; border-bottom: solid 1px #990000; color: #FFFFFF; font-size:100%; padding: 0 5px;margin:0; min-width:100px;}
.tagbar2 li a:hover { background: none #FFCC33; text-decoration:none; color: #990000;}


.tagbar3 { height:30px; margin:0px; padding:0;line-height:30px; vertical-align: middle; list-style: none;}
.tagbar3 li { float:left; text-align:center;  height:30px; min-width:100px; background-color:white; border:solid 1px #A7ABB3; border-bottom:0; margin-left:0.5em; font-weight:bold;padding:0; }
.tagbar3 li strong {display:block; height:30px; font-size:110%; color:#CC0000; padding: 0 5px;}
.tagbar3 li strong:hover {text-decoration:underline;}
.tagbar3 li a { display:block; height:29px;background-color:#eeeeee; border:0; border-bottom: solid 1px #B7BBB3; color:#3366cc; font-size:100%; padding: 0 5px;margin:0; min-width:100px;}
.tagbar3 li a:hover { background: none #FFFFE1; text-decoration:none; color:#0000ff;}

.tagbar4 { height:22px; margin:0px;padding:0; line-height:22px; vertical-align: middle; list-style: none; }
.tagbar4 li { float:left; text-align:center;  height:22px; min-width:60px; background-color:white; border:solid 1px #A7ABB3; border-bottom:0; margin-right:2px;
-moz-border-radius: 3px 3px 0 0;
-khtml-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.tagbar4 li strong,.tagbar4 li a.active {display:block; height:22px;color:#333;background: none #fff; padding: 0 5px;  font-size:90%; font-weight: bold;
-moz-border-radius: 3px 3px 0 0;
-khtml-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.tagbar4 li a {  min-width:60px;display:block; height:21px;border:0px;background: none #ccc; border-bottom: solid 1px #ccc; color:#333; padding: 0 5px;  font-size:90%;
-moz-border-radius: 3px 3px 0 0;
-khtml-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.tagbar4 li a:hover { background: none #eee; text-decoration:none; font-weight: bold;}

.tagbar5 { height:22px; margin:0px;padding:0; line-height:22px; vertical-align: middle; list-style: none; }
.tagbar5 li { float:left; text-align:center;  height:22px;  background-color:white;overflow:visible;border:0;border-top:solid 1px #AAA;border-bottom:solid 1px #AAA; font-weight: 600;}
.tagbar5 li strong,.tagbar5 li a.active {display:block; height:22px;color:#000; padding: 0 15px; background: none #fff;font-size: 100%;}
.tagbar5 li a, .tagbar5 li span {  min-width:60px;display:block; height:21px;border:0px;background: none  #ccc; border-bottom: solid 1px #ccc; color:#555; padding: 0 10px;  font-size:90%;}
.tagbar5 li a:hover { text-decoration:none;}

.suggestlist {text-align: left;border:solid 1px gray;border-left-color: silver; border-top-color: silver;max-width: 40em;background-color:#ffffee;list-style: none;margin:0;padding:0;}
.suggestlist li {line-height: 130%; padding:2px; border-bottom: dotted 1px silver;cursor:pointer;}
.suggestlist li {}
.suggestlist li:hover {background-color:#ffffaa;}
.preferred_li { margin:0;padding:0; list-style: none;}
.preferred_li li { 
    font-size:120%; line-height:150%;float:left;text-align: left;
    padding:8px 12px; background:url(../images/icons/icon_3.gif)  left no-repeat ; 
    background-position:0px 14px; height:auto; 
    width:220px; font-weight:normal; color: #336600;
}
.preferred_li a:link {color: #336699; font-family: 'cwTeXYen',arial;}

.ul_dot { margin:5px;padding:0;list-style: none; }
.ul_dot li {background:url(../images/icons/member_icon.gif) left no-repeat; padding:5px 0 5px 20px;}

.Mask{ position:fixed; left:0; top:0; width:100%;height:100%;
    background-color:#666666;
    filter:alpha(opacity=65);
    -moz-opacity: 0.65;
    opacity: 0.65;
}

.smallmask{width:100%;height:100%;
    background-color:#666666;
    filter:alpha(opacity=40);
    -moz-opacity: 0.40;
    opacity: 0.40;
}  


.signbar {position: relative;overflow: visible;text-align: right;font-size: 110%;height:0;margin-right:5px;}
.spaceline {height:1em;}
.spaceline2 {height:1.5em; background:url(../images/icons/bg_line.gif) center left repeat-x;}

.promoteBlk, .promoteBlk .bg , .promoteBlk .r {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.promoteBlk {padding:2px; border:solid 1px #aaa;}
.promoteBlk .bg {background:url(../images/webpage/bg_promote.png) top left repeat-x; }
.promoteBlk .r {background:url(../images/webpage/bg_promote_right.png) bottom right no-repeat;padding:0 1.5em;}
.promoteBlk .capital {background-color:#666;font-weight:600;font-size:15pt;padding:0 4px;color:#fff;font-family: 'cwTeXYen', Arial;}
.promoteBlk .title { color:#383; font-size:14pt;font-weight:600;font-family: 'cwTeXYen', Arial;}

.menu_top .l , .menu_top .r {
-moz-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.menu_top .l {background:url(../images/webpage/top_menu_left.png) top left; }
.menu_top .r {background:url(../images/webpage/top_menu_right.png) top right repeat-y;}

.menu_bot .l , .menu_bot .r {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height:69px;    
}
.menu_bot .l {background:url(../images/webpage/menu_bot_left.png) top left;}
.menu_bot .r {background:url(../images/webpage/menu_bot_right.png) top right repeat-y;}


.menu_shadow {
-moz-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
height:18px;    
background:url(../images/webpage/bg_shadow.png) top left repeat-x;    
}




.x {color:#CC0000; font-size:165%; line-height:20px; padding:1px; font-weight:bold; margin:1px;}
.btn {border:0; cursor:pointer; padding: 0 19px;}
.btn_grn {
    background-color: #057d22;
    border-bottom: 3px solid #04500c;
    color: #fff;
}
.btn_grn:hover {background-color:#158d32; border-bottom:solid 3px #14601c;}
.btn_orng {
    color:#fff; background-color:#ff8a00; border-bottom:solid 3px #e67c00;
}
.btn_orng:hover {background-color:#ff9a00; border-bottom:solid 3px #e68c00;}
.btn_x {font-size: 165%; font-weight: 800; height:100%; display:block;}
.btn_search {
    background-color: #008a32;
    border-bottom: 3px solid #007029;
    padding: 10px 20px 7px;
    color: #fff;    
    font-size: 150%;
    font-weight: 600;
}
.btn_search:hover {
    background-color: #109a42;
    border-bottom: 3px solid #108039;

} 

.btn_gray {color:#fff; background-color:#333; border-bottom:solid 3px #666;}
.btn_gray:hover {background-color:#444; border-bottom:solid 3px #777;}

.cat_edit {background-image:url(../images/icons/photo_edit.gif);background-position: center center; background-repeat: no-repeat; height:100%; width:100%; margin:0;padding:0; }
.cat_edit:hover, .cat_create:hover{background-image:url(../images/icons/photo_edit2.gif);  color:white;
    background-color:#000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.50;
    opacity: 0.50;
}
.cat_create {background-image:url(../images/icons/photo_create.gif);background-position: center center; background-repeat: no-repeat; height:100%; width:100%; margin:0;padding:0; }
.nomargin {margin:0;}
.nowrap {white-space: nowrap;}