@charset "utf-8";
<!--

/* === general ===  */
body { height: 100%; position:relative; margin: 0; padding: 0; line-height:14px; letter-spacing:1px; font-size:14px; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%; background:#3E455E; color:#564949; background:#8BB6CD; background:#333;
}

div, a, ul, li, input, fieldset { 
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
} /* with 100% width border will not go outside the box  */

ul, ol, dl { margin:0; padding:0; list-style:none;
}
    
h1,  h2, h3, h4, h5, h6 { margin:10px 0; padding:5px 0 5px 5px; font-size:22px; line-height:28px; font-weight:normal; font-style:italic; clear:both; text-align:center; text-shadow:0px 1px 0px #000; font-family:Georgia, "Times New Roman", Times, serif;
}
h4, h5, h6 { font-size:18px;
}

div { margin:0; padding:0;
}

p { margin:0; padding:5px; 
}

a, a:visited, a:active, a:focus { border:none; min-width:30px; margin:0; padding:0; display:block; font-weight:normal; color:#CFF; text-decoration: none; cursor: pointer; color:#00068C;
}
a:hover { min-width:30px; margin:0; padding:0; font-weight:normal; color:#0F0; border:none; color:#006FFA;
}

img, a img, a:hover img { float:left; border:none; margin:0; padding:0;
}
   

.bannerDark { display:block; min-height:80px; padding:10px; margin-bottom:20PX; background-color:#09F; background-color:#F3494C; border:2px groove #FFF; border-radius:10px/10px; color:#FFF;
}
.floatL { float:left;
}
.floatR { float:right;
}
.noDisplay { display: none;
}
.min100 { min-width:100px; 
} 
.min200 { min-width:200px; 
}
.width200 { width:200px; 
} 
.width100Per { width:100%; 
} 
.flexHight { position:relative; display:flex; flex-direction:column; width:100%; height:100%;
}


/* === On hover dropdown ===  */
.validInfo { position:relative;
}
.validInfo-content { display:none; width:100%; min-width:200px; padding:2%; position:absolute; bottom:80px; right:0; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.8); color:#F00; background:#FFF; border-radius:10px; line-height:12px;
}
.validInfo:hover .validInfo-content { display:block;
}


/* === table Form ===  */
table { margin:0 auto; padding:0;
}
fieldset { margin:auto; padding:5px; border:groove 1px #09F; 
}
th, td { min-width:50px; min-height:40px; vertical-align:middle;
}
select, input, label { min-height:40px; line-height:40px; vertical-align: middle; display:block; border-radius:5px; font-size:12px;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; letter-spacing:1px;
}
select { -webkit-appearance:menulist-button; min-width:60px;
}
input[type="text"], input[type="password"] { width:100%; min-height:40px;
}
input[type="radio"] { height:25px; min-width:25px; display:block; vertical-align: middle; margin:2px auto; cursor:pointer; 
}
label { cursor:pointer;
}
textarea { margin:0 auto; padding:5px;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}


/* === Calendar buttons ===  */
input[type="submit"] { min-width:120px; min-height:30px; margin:5px; padding:5px; font-size:12px; cursor:pointer; background-color:#505669; border:1px outset #FFF; border-radius: 10px/20px; color:#FFF; text-align:center; box-shadow:0px 2px 2px 0px rgba(0,0,0,0.4); outline:none;
}
input[type="submit"]:hover { background-color:#4F6FD2;
}

input[type="submit"].disabled_button { background-color:#E2E7E7; border:1px #CCC solid; color:#F00; cursor:none;
}
input[type="submit"].button_del { margin:0 10px; background:#ABD7FE; min-width:100px; padding:5px; color:#F00; border:2px outset #F00; border-radius: 10px/20px; text-align:center;
}
a.link_as_button { -webkit-appearance: button; -moz-appearance:button; appearance: button; background:#09F; color:#FFF; border:2px outset #FFF; padding:8px; border-radius: 10px/20px; 
}
input[type="submit"].button_as_link { color:#06F; font-family:Georgia, "Times New Roman", Times, serif; height:100%; min-width:50px; line-height:30px; margin:0; padding:0; border:0; border-radius:0; background:none; text-align:left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    -webkit-appearance:none; /* Safari and Chrome */
    -moz-appearance:none; /* Firefox */
    -ms-appearance:none; /* IE 9 */
    -o-appearance:none; /* Opera */
    appearance:none; /* W3C */
}
input[type="submit"].button_cancel { margin:0 10px; padding:0 5px; color:#F00; border:1px outset #F00; border-radius: 10px/20px; text-align:center;
}



/* === message general ===  */
.message, .warning, .errors { width:90%; margin:1% auto; padding:1%; border:2px groove #09F; text-align:center; clear:both; max-height:120px; overflow:auto; color:#207E00; background:#FFF;
}
.warning, .errors, .warning_info { color:#F00;
}
.errors li, .clear_both .errors li { padding:0; max-height:24px; clear:both; color:#F00; line-height: 16px;
}
.error_field { border:1px solid #F00;
}



/* === General multiColmsBox ===  */
.multiColmsBox { float:none; clear: both;
}
ul.multiColms { width:100%; display:table; table-layout: fixed; margin:0 auto; clear: both; float:none; padding:1%;
} 
li.tableCell { text-align:center; display:table-cell; vertical-align:top; clear:both;
}
span.cellTd { max-width:800px; height:100%; min-height:250px; margin:1% auto; padding:5px; display:block;
    border:2px outset #FFF; border-radius:10px/10px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.8);
    text-align: left; background-color:#CEFAFF; 
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    
    background-color:#D2D2D2;
}
.multiColms img { width:100%; height:auto; float:none; 
}  
.multiColms p, .multiColms li { line-height:30px; color:#630; color:#262628; color:#564949; margin: 10px 0;
}


.container { background:#85BAD3; width:96%; max-width:1400px; margin:0 auto;
     background-color:#7C7C7C; 
}


/* === headerPub ===  */
.header { height:122px; position:relative; background:url(../Pic/Designamic-top-border-15X2-cm.jpg) no-repeat #333 bottom; background-position:left bottom; 
    background-size:auto 120px; border-bottom:4px groove #3E455E; 
    background-color:#333; margin:0 auto;
}

.header img { margin-top: 10px;
} 

.header-ref { height:120px; background:url(../Pic/global_border15X2.jpg) no-repeat #333 bottom; background-position:top; 
    background-size:800px 120px; position:relative; border-bottom:4px groove #3E455E; 
    background-color:#333; margin:0 auto;
}

.header ul { width:460px; position:absolute; top:88px; right:0; list-style:none; z-index:100; float:right;
}
.header-ref ul { width:420px; position:absolute; top:88px; right:0; left:0; bottom:0; margin:0 auto; list-style:none; z-index:100;
}
.header ul li { float:left; border-right:2px groove #CCC; line-height:26px;
}
.header a, .header a:visited  .header a:active, .header a:focus { min-width:100px; padding:2px 5px; display:block; vertical-align:middle; text-align:center; text-decoration:none; font-weight:normal; font-size:14px; color:#FFF; text-shadow:0px 1px 0px #000; border-radius:0;
}
.header a:hover { color:#063600; text-shadow:0px 1px 0px #FFF; background:#BBAFA8; border: none;
}
#home { border-left:2px groove #CCC;
}

/* === mainContent ===  */
.mainContent { width:100%; height:100%; border:0; 
    background:#333; background:#3E455E; background:#369; background:#8BB6CD; background-color:#7C7C7C; 
}

/* === content ===  */
.content { padding:10px 0; text-align:left; float:none; clear:both; background-color:#669;
} /* === End content ===  */


/* === Contact us ===  */
.enquiry_overlay { width:100%; min-height:100vh; position:absolute; top:0; left:0; background:rgba(0, 0, 0, 0.7); transition:opacity 50ms; visibility:visible; opacity:1; color:#000; z-index:1000; padding:2%;
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.popup { max-width:600px; min-height:400px; position:relative; margin:auto; padding:1%; background:#3E455E; border:2px outset #FFF; border-radius:10px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.8);
    
    margin-top:20px;
    margin-bottom:20px;
    background-color:#CEFAFF;
    background-color:#D2D2D2;
    
}
a.closeBtn, a:visited.closeBtn, a:active.closeBtn, a:focus.closeBtn { clear: both; float:right; width:45px; height:45px; margin:0; padding:0; line-height:45px; text-align:center; font-size:45px; font-weight:bold; text-decoration: none; color: #000; display:block; background:#F00; border-radius: 10px; border:1px groove #666; margin-bottom:10px;
}
a:hover.closeBtn { color: #BE5D5F;
}

.enquiry_form table, .enquiry_form textarea { width:100%;
}
.enquiry_form td { height:50px;
}



/* === Multi ===  */
.twoColTable { max-width:800px; margin:1% auto; border-radius:10px; margin-top:20px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.8); border:1px outset #FFF; background:#3E455E;
}
.twoColTable table, .twoColTable fieldset, .twoColTable textarea { width:98%;
}
.twoColTable li { width:50%; height:60px; margin-bottom:20px; border-bottom:2px groove #3F3F3F; float:left;
}
.twoColTable td { height:60px; 
}
.twoColTable select, .twoColTable input[type="text"] { width:100%;
}
li.current_view { border:none; color:#D2F9DA; border-radius:10px;    
}
 input[type="text"].width200 { width:25%; 
}


/* === footer ===  */
.footer { border-top:5px groove #3E455E; padding:20px 0; clear:both; font-size:12; line-height:16px; color:#FFF; background:#4B4949; background:#333;
}
.footer ul { margin:0 auto; max-width:800px; display:table;
}
.footer li { display:table-cell; width:auto; text-align:center;
}
.footer a, .footer a:visited, .footer a:active, .footer a:focus { margin:0 10px; display:block; vertical-align:middle; font-size:12px; color:#CFF; 
}
.footer a:hover { color:#0F0;
}
.footer p { text-align:center; clear:both; margin:10px; padding:10px 5px 0 5px; font-size:12px; 
}


/* === Slider ===  */
#slideshow { margin:0 auto; padding:0; overflow:hidden; position:relative; border-bottom:2px #CCC groove; z-index:900; clear:both;
}
#slideshow img { width:100%; height:auto; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto;
}
#alt-caption { padding:5px; font-family:sans-serif; font-weight:normal; line-height:16px; font-size:24px; 
}
.sliderBtn { clear:both;
}
.sliderBtn ul { margin:2px auto; max-width:308px; text-align:center; min-height:40px; margin-top:10px;
}
.sliderBtn ul a, .sliderBtn ul a:visited  { padding:1px; width:71px; line-height:25px; font-size:18px; border:2px #CCC groove; float:left; text-decoration:none; color:#FFF; text-shadow:1px 1px 1px #000; display:block; vertical-align:middle; border-radius:5px;
}
.sliderBtn ul a:hover, sliderBtn ul a:active, .sliderBtn ul a:focus { color:#3F0; text-shadow:1px 1px 2px #FFF; padding:0; margin:1px; background:#6A9BB5}
.scroll{
}
#pager { max-height:700px; width:95%; margin:auto; clear:both; overflow:auto; border:2px #CCC groove; background:#6A9BB5; border-radius:10px; margin-bottom:10px; 
    background:#D2D2D2
}
#pager a, #pager a:visited, #pager a:active, #pager a:focus, #pager a:hover { margin:0; padding:0;
}
#pager a img { width:22%; height:auto; margin:1%; padding:0; cursor:pointer; opacity:1; float:left; border-radius:10px;
    border:2px outset #FFF; border-radius:10px/10px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.8);
}
#pager img:hover { opacity:.6; 
}




@media screen and (max-width:1200px) {
    .header ul { position:absolute; top:88px; right:0; left:0; bottom:0; margin:0 auto; list-style:none; z-index:100;
    }
    span.cellTd { min-height:300px;
    }
}

@media screen and (max-width:900px) {
    span.cellTd { min-height:360px;
    }
}

@media screen and (max-width:700px) {
    li.tableCell { display:block;
    }
    span.cellTd { min-height:100%;
    }
}

@media screen and (max-height: 600px) {
    #pager { max-height:500px;
    }
    
}

@media screen and (min-width: 0px) and (max-width: 570px) {    
    #pager { max-height:250px;
    }
    #pager a img { width:29%;
    }
    
}

@media screen and (min-width: 0px) and (max-width: 460px) {
    .header { height:116px; background:none; background:#333; 
    }
    .header a, .header a:visited, .header a:active, .header a:focus, .header a:hover { width:48%; margin:1%; padding:0; background:#756962; border:none; border-bottom:2px solid #CCC; border-radius: 20px/50px; text-shadow:1px 1px 1px #000; color:#FFF; float:left;
    }
    
    .header ul { width:100%; height: auto; position:static; margin:0;
    }
    .header ul li, #home { line-height:43px; padding:0; float:none; border-right:0; border-left:0; 
    }
    .header img { display: none;
    } 
    
}

-->