@charset "UTF-8";
/* 
KP Synergies Bhd
Author: sean sean tan (seanx2@gmail.com)
*/

/*=== eric meyer's reset, i think =p (with some self modifications) ===*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
:focus { outline: 0; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: middle; }

/*=== fancy fonts ===*/
@font-face {    
    font-family: 'proxima-nova';
    src: url('../type/proximanova-regular.eot');
    src: url('../type/proximanova-regular.eot?#iefix') format('embedded-opentype'),
         url('../type/proximanova-regular.woff') format('woff'),
         url('../type/proximanova-regular.ttf') format('truetype'),
         url('../type/proximanova-regular.svg#proxima-nova') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {    
    font-family: 'proxima-nova';
    src: url('../type/proximanova-bold.eot');
    src: url('../type/proximanova-bold.eot?#iefix') format('embedded-opentype'),
         url('../type/proximanova-bold.woff') format('woff'),
         url('../type/proximanova-bold.ttf') format('truetype'),
         url('../type/proximanova-bold.svg#proxima-nova') format('svg');
    font-weight: bold;
    font-style: normal;
}

li.location,#bottom .partners{display:none!important;}
/*=== building blocks, stylistic funbags ===*/
body { background: #fff url(../images/content-bg.png) left top repeat; margin: 0 auto; font: normal 13px/1.5 "proxima-nova", arial, verdana, sans-serif; -webkit-font-smoothing: antialiased; color: #333; }
#top { background: url(../images/header-bg.png) left top repeat-x; width: 100%; }
#breadcrumb { width: 870px; margin: 0 auto; padding: 25px 0 15px; }
#wrapper { width: 871px; margin: 0 auto; border-top: 10px solid #dbdbda; background: #fff; padding: 40px 65px; }
  #home #wrapper { width: 951px; margin: 40px auto 0; padding: 20px 25px; }
  #wrapper.projects { width: 951px; padding: 20px 25px; position: relative; }
  #wrapper.project-categories { width: 921px; padding: 20px 40px; }
#bottom { width: 100%; background: url(../images/footer-tile.png) left top repeat-x; min-height: 200px; }

/*=== header (main) ===*/
header { height: 105px; width: 1001px; margin: 0 auto; position: relative; }
header h1 { width: 389px; height: 61px; position: absolute; top: 30px; left: 0; background: url(../images/KKIBS-Logo.png) left top no-repeat; }
header h1 a { display: block; width: 389px; height: 61px; text-indent: 100%; white-space: nowrap; overflow: hidden;  }

/*==== main navigation ===*/
header nav[role=navigation] { position: absolute; top: 47px; right: 0; border-top: 1px solid #ebeaea; width: 445px; }
header nav[role=navigation] ul { margin: -1px 0 0; }
header nav[role=navigation] li { display: inline-block; zoom: 1; margin: 0 -4px 0 0; padding: 0 25px; }
header nav[role=navigation] li a { display: block; color: #535353; text-transform: uppercase; font-weight: bold; font-size: 13px; line-height: 1; padding: 20px 0 0; }
header nav[role=navigation] li.current a { color: #3974b6; background: url(../images/current-bg.png) center top no-repeat; text-decoration: underline; }

/*==== aux navigation ===*/
header .aux { position: absolute; top: 15px; right: 25px; }
header .aux li { display: inline-block; zoom: 1; margin: 0 -4px 0 0; background: url(../images/pipe.png) right 5px no-repeat; padding: 0 13px 0 10px; }
header .aux li:last-child { background: none; }
header .aux a { color: #3672b8; display: block; font-size: 11px; padding: 0 0 0 20px; }
 header .aux li.location a { background: url(../images/icon-location.png) left top no-repeat; }
 header .aux li.contact-us a { background: url(../images/icon-contact.png) left 2px no-repeat; padding: 0 0 0 15px; }
 header .aux li.career a { background: url(../images/icon-career.png) left top no-repeat; }

.ie7 header .aux li { display: inline; margin: 0; }
.ie7 header .aux li.ie { background: none; }

/*=== banner area ===*/
#home #sliding-banners { background: url(../images/banner-bg.png) left top repeat-x; width: 100%; height: 257px; }
#home #sliding-banners .content { width: 1300px; margin: 0 auto; background: url(../images/banner.png) left top no-repeat; height: 250px; }

#about-us #sliding-banners { background: url(../images/header-about-us-bg.png) left top repeat-x; width: 100%; height: 215px; }
#about-us #sliding-banners .content { width: 1200px; margin: 0 auto; background: url(../images/header-about-us.png) left top no-repeat; height: 210px; }

#projects #sliding-banners { background: url(../images/header-projects-bg.png) left top repeat-x; width: 100%; height: 210px; }
#projects #sliding-banners .content { width: 1200px; margin: 0 auto; background: url(../images/header-projects.png) left top no-repeat; height: 210px; }

#clients #sliding-banners { background: url(../images/header-clients-bg.png) left top repeat-x; width: 100%; height: 215px; }
#clients #sliding-banners .content { width: 1200px; margin: 0 auto; background: url(../images/header-clients.png) left top no-repeat; height: 210px; }

#contact-us #sliding-banners { background: url(../images/header-contact-us-bg.png) left top repeat-x; width: 100%; height: 210px; }
#contact-us #sliding-banners .content { width: 1200px; margin: 0 auto; background: url(../images/header-contact-us.png) left top no-repeat; height: 210px; }

#location #sliding-banners { background: url(../images/header-location-bg.png) left top repeat-x; width: 100%; height: 210px; }
#location #sliding-banners .content { width: 1200px; margin: 0 auto; background: url(../images/header-location.png) left top no-repeat; height: 210px; }

#sliding-banners .content h1 { font-weight: bold; font-size: 32px; line-height: 1; color: #fcd60b; padding: 40px 0 15px 164px; text-shadow: 1px 1px 2px #222; filter: dropshadow(color=#222222, offx=1, offy=1); }
  #home #sliding-banners .content h1 { padding: 70px 0 3px 305px; text-transform: uppercase; }
#sliding-banners .content h1 span { color: #fff; }
  #home #sliding-banners .content h1 span { color: #002d74; }
#sliding-banners .content p { font: bold 15px/1.25 helvetica, arial, sans-serif; padding: 0 0 0 164px; width: 360px; }
  #home #sliding-banners .content p { padding: 0 0 0 305px; width: 265px; }
  #clients #sliding-banners .content p, #location #sliding-banners .content p, #projects #sliding-banners .content p { color: #fff; }
#sliding-banners .content p.learn-more { width: auto; padding: 0; margin: 30px 0 0; }
#sliding-banners .content p.learn-more a { display: block; font: bold 14px/1 "proxima-nova", arial, verdana, sans-serif; width: 118px; height: 32px; background: url(../images/blue-btn-160x49.png) left top no-repeat; padding: 17px 0 0 42px; color: #fffbd7; text-transform: uppercase; }

/*=== breadcrumbs ===*/
#breadcrumb li { display: inline-block; zoom: 1; margin: 0 -4px 0 0; background: url(../images/slant.png) right 1px no-repeat; font: bold 10px/1 helvetica, arial, sans-serif; padding: 0 8px 0 5px; }
#breadcrumb li:last-child { background: none; }
#breadcrumb li a { text-transform: uppercase; color: #3672b8; }
#breadcrumb li.current a { color: #002d74; text-decoration: underline; }

.ie7 #breadcrumbs li { display: inline; margin: 0; }

/*=== landing ===*/
#wrapper h1 { font-weight: bold; font-size: 20px; color: #3672b8; padding: 0 0 10px 38px; }
  .business-units h1 { background: url(../images/icon-business.png) left top no-repeat; }
  .videos h1 { background: url(../images/icon-video.png) left top no-repeat; }
  .documentations h1 { background: url(../images/icon-documentation.png) left top no-repeat; }

#wrapper .business-units { width: 305px; float: left; border-right: 1px solid #ebebeb; }
  .business-units ul { margin: 0 0 0 10px; width: 265px; }
  .business-units li { font: 14px/1 helvetica, arial, sans-serif; background: url(../images/icon-arrow-yellow.png) left 12px no-repeat; padding: 10px 0 10px 12px; border-bottom: 1px dashed #98b6da; }

#wrapper .videos, #wrapper .documentations { width: 620px; float: right; }
  .videos li { display: inline-block; zoom: 1; margin: 10px 11px 0 0; }

#wrapper .documentations { padding: 20px 0 0; }
  .documentations li { display: inline-block; zoom: 1; margin: 10px 36px 0 0; background: url(../images/icon-brochure.png) left top no-repeat; height: 48px; padding: 5px 0 0 55px; }
  .documentations li.profile { background: url(../images/icon-profile.png) left top no-repeat; }
  .documentations li a { color: #3672b8; font-weight: bold; font-size: 14px; background: url(../images/icon-arrow-blue.png) left 3px no-repeat; padding: 0 0 0 15px; }
  .documentations li span { display: block; padding: 0 0 0 15px; margin: -5px 0 0; }

#wrapper .awards { background: url(../images/awards-bg.png) left top repeat-x; border: 5px solid #98b6d9; margin: 30px 0 0; position: relative; min-height: 118px; }
#wrapper .awards h1 { font-size: 34px; padding: 35px 0 0 42px; }
  .awards ul { position: absolute; top: 10px; right: 22px; }
  .awards li { width: 240px; display: inline-block; zoom: 1; margin: 0 -4px 0 0; font-size: 16px; line-height: 1.15; padding: 0 0 0 70px; min-height: 100px; }
  .awards li span { width: 200px; padding: 30px 0 0; display: block; }
  .awards li.international-construction-award { background: url(../images/award-2005.png) left top no-repeat; width: 250px; padding: 0 0 0 60px; }
  .awards li.golden-five-award { background: url(../images/award-golden.png) left top no-repeat; }

.ie7 .videos li { display: inline; margin: 10px 15px 0 0; }
.ie7 .documentations li { display: inline; margin: 10px 40px 0 0; }
.ie7 .awards li { display: inline; margin: 0; }

/*=== about us ===*/
#about-us #wrapper p { font-size: 16px; padding: 0 0 25px; }
#about-us #wrapper section { border-top: 1px solid #d6e0eb; }
#about-us #wrapper h1 { color: #002d74; font-size: 22px; padding: 20px 0 15px; }
#about-us .the-list { background: #f1f2f5; padding: 0 25px; margin: 0 0 25px; }
#about-us .the-list li { width: 180px; height: 52px; float: left; border-bottom: 1px solid #d6e0eb; padding: 40px 30px 20px 62px; font: bold 13px/1 helvetica, arial, sans-serif; color: #3672b8; text-transform: uppercase; }
#about-us .the-list li span { display: block; text-transform: none; font-size: 11px; }
  .the-list li.ibs { background: url(../images/icon-ibs.png) left 30px no-repeat; }
  .the-list li.turnkey { background: url(../images/icon-turnkey.png) left 30px no-repeat; }
  #about-us .the-list li.prop-dev { background: url(../images/icon-property.png) left 30px no-repeat; padding: 48px 30px 12px 62px; }
  #about-us .the-list li.building { background: url(../images/icon-building-construction.png) left 30px no-repeat; padding: 48px 30px 12px 62px; }
  .the-list li.mech { background: url(../images/icon-mechanical.png) left 30px no-repeat; }
  .the-list li.power { background: url(../images/icon-power-plant.png) left 30px no-repeat; }
  .the-list li.telecomm { background: url(../images/icon-telecomm.png) left 30px no-repeat; }
  .the-list li.it { background: url(../images/icon-it.png) left 30px no-repeat; }
  #about-us .the-list li.plantations { background: url(../images/icon-plantation.png) left 30px no-repeat; padding: 48px 30px 12px 62px; }
  #about-us .the-list li.oil { background: url(../images/icon-oil.png) left 30px no-repeat; padding: 48px 30px 12px 62px; border-bottom: 0; }
  #about-us .the-list li.scrap { background: url(../images/icon-scrap-iron.png) left 30px no-repeat; padding: 48px 30px 12px 62px; border-bottom: 0; }
#about-us #wrapper .highlight { background: #f1f2f5; padding: 20px 25px; }
#about-us #wrapper .highlight p { padding: 10px 0; }

.accordion { padding: 25px 0 0; }
#about-us #wrapper .accordion section { margin: 0 0 10px; border-top: none; }
.accordion h2 { font-weight: bold; font-size: 16px; color: #002d74; background: url(../images/accordion-off.png) left top no-repeat; padding: 10px 0 7px 40px; border: 1px solid #c2c1c1; cursor: pointer; }
.accordion h2.on { font-weight: bold; font-size: 16px; color: #002d74; background: url(../images/accordion-on.png) left top no-repeat; }
.accordion .content { background: #f1f2f5; border-right: 1px solid #c2c1c1; border-bottom: 1px solid #c2c1c1; border-left: 1px solid #c2c1c1; padding: 25px; }
  .divider-left { width: 330px; float: left; border-right: 1px solid #fff; padding: 0 30px 0 0; }
  .divider-right { width: 370px; float: left; border-left: 1px solid #ced8e5; padding: 0 0 0 40px; }
.accordion .content h3 { font: bold 14px/1 helvetica, arial, sans-serif; color: #3672b8; padding: 10px 0 0; }
#about-us #wrapper .divider-right p { padding: 15px 0; font-size: 14px; }
.accordion .content ul { margin: 0 0 0 16px; padding: 15px 0; }
.accordion .content li { font-size: 14px; list-style-type: disc; margin: 0 0 5px; }

/*=== projects ===*/
#projects .categories { margin: 0 auto; }
.categories li { width: 230px; float: left; min-height: 275px; position: relative; }
.categories li:hover { background: #fbf5c9; }
.categories li a { display: block; padding: 110px 10px 10px; font-weight: bold; font-size: 18px; line-height: 1.15; color: #3672b8; }
.categories li a:hover { text-decoration: none; }
  .categories li.major-projects a { display: block; background: url(../images/major-projects.png) 10px 10px no-repeat; }
  .categories li.projects-kp a { display: block; background: url(../images/projects-kp.png) 10px 10px no-repeat; }
  .categories li.projects-business a { display: block; background: url(../images/project-business.png) 10px 10px no-repeat; }
  .categories li.projects-using a { display: block; background: url(../images/projects-undertaken.png) 10px 10px no-repeat; }
.categories p.description { border-top: 1px solid #d6e0eb; padding: 10px 0 0; margin: 0 10px; font: 14px/1.2 helvetica, arial, sans-serif; }
  .categories li:hover p.description { border-top: 1px solid #f8ec9a; }
.categories li p.view-list { visibility: hidden; position: absolute; bottom: 0; }
.categories li p.view-list a { display: block; background: url(../images/grey-btn-230x35.png) left top no-repeat; padding: 10px 0 0 40px; font-size: 14px; line-height: 1; color: #002d74; width: 190px; height: 25px; }
.categories li:hover p.view-list { visibility: visible; }

/*=== projects; headers ===*/
#projects #wrapper h1 { color: #002d74; font-size: 22px; line-height: 1; padding: 0 0 0 125px; margin: 0 5px; min-height: 60px; }
#projects #wrapper h1 span { display: block; font: 12px/1 helvetica, arial, sans-serif; border-top: 1px solid #dae3ef; padding: 7px 0 0; margin: 7px 0 0; color: #555; }
  #projects #wrapper .major-projects h1 { background: url(../images/projects-accomplished-small.png) left top no-repeat; }
  #projects #wrapper .kp-projects h1 { background: url(../images/kp-projects-small.png) left top no-repeat; }
  #projects #wrapper .mech-work h1 { background: url(../images/mech-work-small.png) left top no-repeat; }
  #projects #wrapper .projects-using h1 { background: url(../images/projects-undertaken-small.png) left top no-repeat; }

/*=== projects; pagination ===*/
.pagination { text-align: right; padding: 20px 5px 0; }
.pagination.top { position: absolute; top: 55px; right: 29px; padding: 0; }
.pagination li { display: inline-block; zoom: 1; margin: 0 -4px 0 0; padding: 0 7px 0 8px; border-right: 1px solid #dae3ef; line-height: 1; }
.pagination li:last-child { border-right: 0; }
.pagination a { color: #3672b8; font-weight: bold; }
.pagination li.current a { color: #555; }

.ie7 .pagination li { display: inline; margin: 0; }

/*=== projects; masonry ===*/
.masonry .box { width: 220px; float: left; padding: 20px 0 15px; border-bottom: 1px solid #dae3ef; margin: 0 8px; font-family: helvetica, arial, sans-serif; height: auto; }
.masonry li img { display: block; margin: 0 0 10px; }
.masonry li .type { font-size: 10px; line-height: 1; text-transform: uppercase; color: #3672b8; padding: 0 0 0 15px; }
  .masonry li .type.home { background: url(../images/icon-house.png) left top no-repeat; }
  .masonry li .type.factory { background: url(../images/icon-factory.png) left top no-repeat; }
.masonry li h2 { font-weight: bold; line-height: 1.25; color: #000; padding: 10px 0; }
.masonry li .location { font-size: 12px; }

/*=== projects; list view ===*/
.list-view { padding: 10px 30px; background: #f1f2f5; margin: 20px 5px 0; }
.list-view li { border-top: 1px solid #fff; border-bottom: 1px solid #ced8e5; padding: 20px 0; font-family: helvetica, arial, sans-serif; }
  .list-view li:first-child { border-top: 0; }
  .list-view li:last-child { border-bottom: 0; }
.list-view li .type { font-weight: bold; font-size: 14px; line-height: 1.2; color: #3672b8; padding: 0 0 0 18px; }
  .list-view li .type.home { background: url(../images/icon-house.png) left 2px no-repeat; }
  .list-view li .type.factory { background: url(../images/icon-factory.png) left 2px no-repeat; }
.list-view li .location { font-size: 11px; padding: 0 0 0 18px; }

/*=== clients ===*/
#clients #wrapper p { width: 870px; margin: 0 auto; }

/*=== contact us ===*/
#contact-us .thanks { display: none; min-height: 315px; }
#contact-us .col { width: 435px; float: left; padding: 25px 0 0; }
#contact-us legend, #contact-us .thanks { font-weight: bold; font-size: 18px; line-height: 1; color: #3672b8; }
#contact-us legend + p { font: 13px/1 helvetica, arial, sans-serif; padding: 3px 0 0; }
#contact-us .col div { height: 60px; }
#contact-us label { display: inline-block; zoom: 1; margin: 0 -4px 0 0; vertical-align: top; font: 13px/1 helvetica, arial, sans-serif; padding: 8px 0 0; width: 125px; }
  #contact-us .message label { padding: 0; }
#contact-us input[type=text], #contact-us textarea { border: 1px solid #98b6d9; border-radius: 5px; background: #fff; width: 270px; font-size: 13px; padding: 5px 2px; }
#contact-us textarea { height: 100px; }
#contact-us .error, #contact-us .star { color: #f00; }
#contact-us .error { display: none; margin: 2px 0 0 125px; font: bold 11px/1.5 helvetica, arial, sans-serif; }
#contact-us input[type=submit], #contact-us input[type=button] { background: url(../images/blue-btn-bg.png) left top repeat-x; width: 170px; height: 35px; overflow: visible; border: 0; color: #fffbd7; font-weight: bold; font-size: 14px; line-height: 1; text-align: center; margin: 30px auto; display: block; padding: 0 0 2px; }

  .ie7 #contact-us label { display: inline; margin: 0; }

/*=== location ===*/
#location #map { border: 5px solid #98b6d9; width: 545px; height: 350px; }
#location aside { width: 245px; padding: 0 0 0 35px; border-left: 1px solid #ececec; float: right; margin: -360px 0 0; }
#location aside img { display: block; border: 5px solid #98b6d9; }
#location .vcard { padding: 30px 0 0; font: 14px/1.45 helvetica, arial, sans-serif; }
#location .vcard .org { font-weight: bold; }
#location .vcard .adr { padding: 0 0 20px; }
#location .vcard a { color: #3672b8; text-decoration: underline; }

/*=== footer ===*/
#bottom footer { width: 1034px; margin: 0 auto; background: url(../images/footer-bg.png) left top no-repeat; min-height: 160px; }
#bottom footer > .clearfix { min-height: 163px; }
#bottom section { padding: 40px 0 0; }
  #bottom .about-us { float: left; width: 265px; margin: 0 75px 0 45px; }
  #bottom .partners { float: left; width: 640; }
#bottom h1 { font-weight: bold; font-size: 12px; text-transform: uppercase; color: #fff; }
#bottom p { font: 12px/1.25 helvetica, arial, sans-serif; color: #fff; }
#bottom p.copyright { font-size: 11px; color: #858585; padding: 0 0 0 5px; }
#bottom .partners p { margin: 0; }
#bottom .sitemap { float: right; width: 400px; margin: -17px 0 0 0; }
#bottom .sitemap li { display: inline; border-right: 1px solid #858585; padding: 0 8px 0 4px; }
#bottom .sitemap li:last-child { border-right: 0; }
#bottom .sitemap li a { font: 11px/1 helvetica, arial, sans-serif; color: #858585; }

/*=== clearfix ===*/
.clearfix:before, .clearfix:after {
  content: "\0020"; 
  display: block; 
  height: 0; 
  visibility: hidden; 
}

.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*=== mobile heavy lifting ===*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  #top, #bottom { width: 1300px; }
  #wrapper { margin: 0 149px; }
  #breadcrumb { margin: 0 200px; }
    #home #wrapper { margin: 40px 149px 0; }
  #bottom .sitemap li a, .accordion h2, #about-us .the-list li { -webkit-text-size-adjust: 100% }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  #top, #bottom { width: 1300px; }
  #wrapper { margin: 0 149px; }
  #breadcrumb { margin: 0 200px; }
    #home #wrapper { margin: 40px 149px 0; }
  #bottom .sitemap li a, .accordion h2, #about-us .the-list li { -webkit-text-size-adjust: 100% }
}