/* Browser compatibility : unless it's very sure that the content is NOT enough to arrive the 
   border of a container, always try to use margin instead of padding */

/* to force firefox phase padding same as IE though it's original way is w3c standard */
div{-moz-box-sizing:border-box; box-sizing:border-box; margin:0 0 0 0; padding:0 0 0 0}

body {
    text-align:center; /* replace center tag, for IE */
    margin: 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    font-family: Arial;
    font-size:12px;
    color:#404040;
    background-color:#FFFFFF;
    }
table {
    border-collapse:collapse; /* equal to cellspacing="0" */
    border-spacing:0px; /* IE7- border-collapse: collapse does not overrule cellspacing */
    text-align:left; /* override text-align:center from body*/
    vertical-align:top;
}
th,td { 
 padding:0px 0px 0px 0px; /* equal to cellpadding="0" */
 vertical-align:top;
}

.quoteText {color:#890101; font-size:14px; font-weight:bold; font-style:italic}

#topContainer {
    position:relative;
    text-align: left; 
    margin:0px auto 0px auto; /* replace center tag, for other browsers */
    width:800px;
    }
#bodyContainer {position:relative; float:left; margin-top:2px; width:668px}
#bodyContent {position:relative; width:560px; margin-left:55px; margin-top:30px; color:#404040; font-size:12px}

/* header with navigation bar */
#headerTitlebar {position:relative; height:48px; width:800px}
#headerNavbar {position:relative; margin-top:2px; width:800px; height:22px}
#headerCollage {position:relative; float:left; margin-top:2px; margin-left:2px; width:658px; height:104px}
#headerCategoryTitleBox {position:relative; float:left; margin-top:2px; width:130px; height:104px; background-color:#365F68}
.headerNavBarTitle, .headerNavBarTitle a, headerNavBarTitle a:hover{height:16px; text-align:center; text-decoration:none; font-size:13px; font-weight:bold; color:#365F68}
.headerNavBarTitle a:hover {color:#000000}
.headerNavBarSpace, .headerNavBarTag, .headerNavBarActiveAboutUs, .headerNavBarActiveServices, .headerNavBarActiveProductSearch, .headerNavBarActiveEnquiries {
    position:relative;
    float:left;
    height:100%;
    width:130px;
    margin-left:2px;
    border-width:0px;
    border-top-width:5px;
    border-bottom-width:1px;
    border-style:solid;
    border-color:#365F68;
    background-color:#FFFFFF;
    }
.headerNavBarActiveAboutUs {border-top-color:#9C3942; background-color:#E7E7E7}
.headerNavBarActiveServices {border-top-color:#E7E700; background-color:#E7E7E7}
.headerNavBarActiveProductSearch {border-top-color:#6BCE4A; background-color:#E7E7E7}
.headerNavBarActiveEnquiries {border-top-color:#FFB542; background-color:#E7E7E7}

/* navigetion column */
#navColumnTableContainer {position:relative; margin-left:6px; margin-top:20px}
#navColumnLine {position:relative; margin-top:37px}
.navColumn {position:relative; background-color:#C6CDCE; border-right-width:2px; border-right-style:solid; border-right-color:#365F68}
/* background-color value is for firefox */
.navColumnHR {border-width:0px; height:3px; width:130px; color:#FFFFFF; background-color:#FFFFFF}
.subAboutUs {font-size:11px}
.subAboutUs a {text-decoration: none; color:#365F68; width:120px}
.subAboutUs a:hover {color: #EE5400}
.subAboutUs td {width:120px; color:#EE5400}
.subAboutUsItems {}

/* used by the front page */
#profileContainer {
    position:relative;
    margin:30px 0px 0px 55px;
    width:560px;
    border-width:1px;
    border-style:solid;
    border-color:#365F68;
    background-color:#F6F6F6;
    z-index:3;
    }
#profileTitle {
    position:relative;
    background-image:url(profileBoxTitle.jpg); 
    width:100%;
    height:33px;
    padding: 7px 0px 0px 10px;
    color:#28464A;
    font-size:16px;
    font-weight:bold;
    z-index:3
    }
#profileBody {position:relative; margin:5px 15px 5px 15px; color:#666666; font-size:11px; z-index:3}
#profileFoot {position:relative; height:24px; width:100%; background-image:url(profileBoxFoot.jpg); z-index:3}
#globeBackGround {position:absolute; left:0px; top:110px; height:322px; width:128px; background-image:url(globeBG.jpg); z-index:1}
#columnDivider {position:relative; margin-left:55px; border-width:0px; width:560px; z-index:2}

.frontLinkProduct {text-decoration: none; size:10px; color:#010283}
.frontLinkProduct:hover {text-decoration:underline;}
.frontLinkEnq {text-decoration: none; size:10px; color:#878787}
.frontLinkEnq:hover {text-decoration:underline;}

/* front page : 2 columns with different width. use percentage */
.frontPointContainer {position:relative; margin-top:40px; padding:0px 15px 0px 15px; width:100%; z-index:3}
.frontPointTitle {font-size:12px; font-weight:bold; z-index:3}
.frontPointLine {position:absolute; left:15px; top:10px; width:106%; z-index:3}
.frontPointHR {border-width:0px; height:1px; width:100%}
.frontPointBody {position:relative; margin-top:5px; font-size:12px; z-index:3}

#headingText {position:relative; margin-left:10px; margin-top:15px; height:20px}
/* the min height of the div for a HR is 32 + HR's total height */
#headingLine {position:relative; height:35px}
.headingText {color:#365F68; font-size:16px; font-weight:bold}
/* background-color value is for firefox */
.headingHR {border-width:0px; height:3px; width:400px; color:#C6CDCE; background-color:#C6CDCE}

/* general style for point with title and its explaination texts */
.pointContainer {position:relative; margin:40px 0px 0px 15px; width:520px; z-index:3}
.pointTitle {font-size:12px; font-weight:bold; color:#365F68; z-index:3}
.pointLine {position:absolute; left:0px; top:10px; z-index:3}
/* background-color value is for firefox */
.pointHR {border-width:0px; height:1px; width:530px; color:#7DB4BB; background-color:#7DB4BB}
.pointBody {margin-top:15px; font-size:12px; z-index:3}

/* product page */
#browseTag, #searchTag {
    position:relative;
    height:27px;
    width:140px;
    padding-top:5px;
    background-color:#365F68;
    text-align:center;
    }
#browseCon {position:relative; width:560px; border-width:1px; border-style:solid; border-color:#365F68; padding:15px 10px 0px 10px}
#browseConText {margin-bottom:5px; width:100%}
#searchCon {position:relative; width:560px; border-width:1px; border-style:solid; border-color:#365F68}
#searchConText {margin-bottom:5px}
#orSeparator {position:relative; width:30px; height:26px; margin:20px 0px 20px 265px}
.sectionTag {font-weight:bold; font-size:16px; color:#FFFFFF}

.browseLink {font-size:12px}
.browseLink a {font-size:12px; text-decoration: none; color:#7DB4BB}
.browseLink a:hover {color: #EE5400; text-decoration: underline}
.browseLink td {vertical-align:middle; color:#EE5400}

/* category list */
.groupProduct th {font-size:16px}

/* price list */
#priceListNotes {position:relative; margin-left:15px; margin-top:30px; color:red; font-size:10px}

/* product list */
#resultTitle {position:relative; margin-top:40px; margin-bottom:5px; height:auto; width:260px; font-weight:bold; font-size:14px; color:#365F68;}
#resultCon {position:relative; margin-top:15px; margin-left:4px; width:560px; height:auto}
#resultLowerNavContainer {position:relative; margin-top:10px; margin-left:0px; width:560px; height:auto}
.searchResult {font-size:12px}
.searchResultHD {font-weight:bold; color:#FFFFFF; align:center; background-color:#365F68}
.searchResultCELL {background-color:#F8C092}
.productDisclaimer {font-size:12px; text-decoration:italic}

/* enruiry page */
#enquiryFormTitle {position:relative; margin:30px 0px 15px 0px; font-weight:bold; font-size:14px; z-index:3}
#enquiryCon {position:relative; margin-left:3px; margin-top:0px; width:560px; height:125px; border-width:0px; border-top-width:2px; border-top-style:solid; border-top-color:#C6CDCE; border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#C6CDCE; padding:15px 0px 0px 10px}
#contactTitle {position:relative; margin:30px 0px 25px 0px; font-weight:bold; font-size:14px; z-index:3}
.enquiriesTable {font-size:12px}
.contactUs {font-size:12px}
.contactBold {font-weight:bold}

#footerSpace {position:relative; height:60px; width:132px}
#footerBar {position:relative; width:800px; text-align:center; font-size:11px; border-width:1px; border-style:solid; border-color:#365F68; border-bottom-width:5px}