@charset "utf-8";
/* CSS Document */

#designed-by { position: absolute; top: 10px; right: 0; }
#powered-by { display: none; }

#login { width: 200px; margin: 100px auto 0; }
#login label { display: block; }
#login .form-text { width: 100% }

#sitemap strong a { color: #333; }
#sitemap a { color: #666; }

#contact-form .form-text { width: 220px; }
#contact-form .label { width: 100px; display: inline-block; vertical-align: top; }
#contact-form .error { margin-left: 5px; }

#google-map { width: 350px; height: 300px; float: left; }

#news-list li { border-top: 1px dashed #ccc; padding: 7px 0; float: left; width: 100%; }
#news-list li:first-child { border: none; }
#news-list div { float: left; width: 150px; }
#news-list a { float: left }

#directors { float: left; width: 100%; height: 227px; margin-bottom: 12px; }
#directors .main-container { float: left; position: relative; background: #fff; z-index: 1; }
#directors .director { position: absolute; top: 0; left: 0; display: none; }
#directors .director:first-child { display: block; }
#directors blockquote { margin: 0; position: absolute; top: 65px; left: 25px; width: 250px; padding: 10px 0 0 27px; background: color: #666; }
#directors blockquote div { padding: 0 27px 8px 0; margin-bottom: 16px; }
  #directors .director.alt blockquote { left: 245px; }
#directors cite { font-style: normal; }
#directors .thumb { float: right; width: 50px; }
#directors .thumb li { margin-bottom: 9px; cursor: pointer; float: left; width: 50px; position: relative; }
#directors .thumb img { display: block; }
#directors .thumb .cover { background: #fff; opacity: 0.7; width: 50px; height: 50px; position: absolute; top: 0; left: 0; }
#directors .thumb .selected .cover { display: none; }

#milestones { background: url(images/bg-milestones.png) no-repeat left 70px; height: 200px; }
#milestones li { float: left; margin-top: 67px; position: relative; }
#milestones span { display: none; position: absolute; top: 65px; left: -50px; width: 200px; }
#milestones strong { display: block; font-size: 16px; font-weight: normal; padding: 19px 3px; background: url(images/bullet-3.png) no-repeat center top; cursor: pointer; }
#milestones .alt { margin-top: 22px; }
#milestones .alt span { top: 110px; }
#milestones .alt strong { background-position: center bottom; }
#milestones li.first span { left: -10px; }
#milestones li.last span { left: -100px; }
#milestones li.last.alt span { left: auto; right: -25px; }

#branch-map { height: 409px; background: url(images/map.jpg) no-repeat center top; margin-top: 24px; position: relative; }
#branch-map div { position: absolute; width: 10px; height: 10px; cursor: pointer; }
#branch-map div div { padding: 3px 6px; background: #eee; border-radius: 8px; width: auto; height: auto; left: -10px; top: -21px; font-weight: bold; display: none; }
#branch-map div:hover div { display: block; }

#branch-map .singapore { top: 290px; left: 300px; }
#branch-map .singapore div { width: 315px; top: -90px; }

#branch-map .malaysia { top: 250px; left: 270px; }
#branch-map .malaysia div { width: 235px; top: -40px; }

#branch-map .myanmar { top: 140px; left: 260px; }
#branch-map .myanmar div { width: 325px; }

#branch-map .india { top: 178px; left: 160px; }
#branch-map .india div { width: 295px; }

#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
#bg div { background-size: cover; width: 100%; height: 100%; }
#bg .bg-1 { background-image: url(images/bg-1.jpg); }
#bg img { position: absolute; top: 0; left: 0; display: block !important; }

#header { background: #00a751; box-shadow: 0 2px 4px rgba(0,0,0,0.8); position: relative; z-index: 5; }
#site-title { margin: 0; padding: 10px 0 0 10px; position: absolute; }
#site-title a { display: block; width: 123px; height: 44px; background: url(images/logo-hsl.png); text-indent: -1000em; }
#main-nav { float: right; margin-right: 130px; }
#main-nav li { float: left; position: relative; z-index: 1; }
#main-nav a { display: block; font-size: 11px; line-height: 70px; color: #fff; text-transform: uppercase; }
#main-nav a:hover { text-decoration: none; }
#main-nav .selected { background: #f68625; }
#main-nav .selected a:hover { color: #fff; }
#main-nav span { padding: 0 18px; border-left: 1px solid #66ca97; border-color: rgba(255,255,255,0.5); }
#main-nav li:first-child span { border: none; }
#main-nav ul { display: none; position: absolute; }
#main-nav ul li { float: none; width: 230px; }
#main-nav ul a { line-height: 32px; text-transform: none; border-top: 1px solid #fff; border-top-color: rgba(255,255,255,0.6); padding: 0 10px; }
#main-nav ul li:first-child a { border: none; }
#main-nav .projects li { width: 100px; }
#main-nav .media li { width: 120px; }
#main-nav .career li { width: 210px; }
#main-nav .company li { width: 180px; }

#main-nav-hover { box-shadow: 3px 3px 2px rgba(0,0,0,0.5); }

#log-in { position: absolute; top: 5px; right: -2px; color: #66ca97; font-size: 11px; }
#log-in ul { height: 20px; }
#log-in a { color: #fff; display: block; margin: 0 0 5px 10px; }
#log-in a:hover { color: #ffcb9e; }
#log-in input { color: #999; font: 11px/14px Arial, Helvetica, sans-serif; border: none; border-radius: 5px; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2); width: 100px; padding: 2px 5px; }

#side-bar { float: left; width: 300px; background: #e8e8e8; padding: 5px 10px; margin: 20px 0 0 20px; }
#sub-nav > li { margin: 20px 0; padding-left: 25px; }
#sub-nav .first-level { display: block; padding-left: 25px; margin-left: -25px; background: url(images/bullet-2b.png) no-repeat left top; color: #999; font-weight: bold; font-size: 13px; line-height: 19px; }
#sub-nav .first-level:hover { text-decoration: none; color: #333; background-image: url(images/bullet-2c.png); }
#sub-nav .selected .first-level { color: #00af2f; background-image: url(images/bullet-2.png) }
#sub-nav a.second-level { color: #666; text-decoration: none; }
#sub-nav a.second-level:hover { color: #000; }
#sub-nav ul.second-level { padding: 0; margin: 0; }
#sub-nav ul.second-level > li { margin: 8px 0; }
#sub-nav ul.second-level ul { margin: 0; padding: 0 0 0 12px; }
#sub-nav li li a { color: #666; }
#sub-nav li li a:hover { color: #000; text-decoration: none; }

#outer-container { min-height: 100%; height: auto !important; position: relative; background: url(images/bg-white.gif) repeat-y center top; z-index: 2; }
#container { padding-bottom: 70px; }
#content { float: right; width: 600px; margin: 20px 20px 0 0; }

#home-info-block { background: #fff; background: rgba(255,255,255,0.85); margin: 80px -100% 0 620px; padding: 2px 0 5px 0; }
#home-info-block > div { float: left; }
#home-info-block .text-block { width: 150px; padding: 10px 15px 0 20px; }
#home-info-block .text-block a { color: #00A751; font-weight: bold; }
#home-info-block .text-block p { margin: 0; }
#home-info-block .text-block div { display: none; }
#home-info-block .text-block div:first-child { display: block; }
#home-info-block h4 { margin: 0 0 24px; font: 18px/20px Arial, Helvetica, sans-serif; color: #666; padding-left: 40px; background: no-repeat left center; }
#home-info-block .marine-civil-enginering h4, h1.marine-civil-engineering { background-image: url(images/icon-marine-civil-engineering.png); }
#home-info-block .plant-civil-engineering h4, h1.plant-civil-engineering { background-image: url(images/icon-plant-civil-engineering.png); }
#home-info-block .ground-engineering h4, h1.ground-engineering { background-image: url(images/icon-ground-engineering.png); }
#home-info-block .image-block { width: 200px; }
#home-info-block .image-block .block { width: 85px; float: left; margin: 3px 3px 0 0; position: relative; cursor: pointer; }
#home-info-block .image-block .block div { background: #00af3f; background: rgba(0, 175, 63, 0.85); position: absolute; top: 0; left: 0; width: 85px; height: 85px; font-weight: bold; color: #fff; display: none; }
#home-info-block .image-block .block:first-child div { display: block; }
#home-info-block .image-block .block a { display: block; margin-top: 30px; padding-left: 7px; text-decoration: none; color: #fff; }

#footer { background: #595f62; border-top: 8px solid #f68625; color: #fff; box-shadow: 0 -2px 4px rgba(0,0,0,0.8); position: absolute; left: 0; bottom: 0; width: 100%; z-index: 5; }
#foot-nav { position: absolute; top: 10px; left: 440px; }
#foot-nav a { text-transform: uppercase; }
#foot-facebook { position: absolute; top: 6px; right: 130px; }

#home-news-block { position: absolute; bottom: 0; left: 440px; color: #fff; width: 560px; }
#home-news-block .block { background: #595f62; width: 180px; position: absolute; bottom: 0; }
#home-news-block .news { left: 0; }
#home-news-block .projects { left: 190px; }
#home-news-block .job { right: 0;}
#home-news-block h4 { background: url(images/bullet-1.png) no-repeat 10px center; margin: 0; padding-left: 38px; line-height: 33px; font-weight: normal; }
#home-news-block a { color: #ccc; display: block; }
#home-news-block a:hover { color: #fff; text-decoration: none; }

#project-showcase { height: 225px; }
#project-showcase .main-pic { float: left; width: 432px; position: relative; z-index: 1; }
#project-showcase .main-pic img { position: absolute; top: 0; left: 0; }
#project-showcase .aside { float: right; width: 164px; height: 225px; background: #cbf0de; position: relative; }
#project-showcase .thumb { padding: 1px 0 0 1px;  }
#project-showcase .thumb img { float: left; margin: 3px; border: 1px solid #8cce93; cursor: pointer; }
#project-showcase .info { width: 156px; position: absolute; left: 4px; bottom: 4px; font-size: 10px; line-height: 11px; }
#project-showcase .info p { margin: 3px 0 0; }

h1.services { padding-left: 38px; line-height: 35px; background-position: left center; background-repeat: no-repeat; }

.showcase { height: 432px; }
.showcase .main-pic { float: left; width: 432px; position: relative; z-index: 1; }
.showcase .main-pic img { position: absolute; top: 0; left: 0; }
.showcase .aside { float: right; width: 164px; height: 412px; background: #cbf0de; position: relative; }
.showcase .thumb { padding: 1px 0 0 1px;  }
.showcase .thumb img { float: left; margin: 3px; border: 1px solid #8cce93; cursor: pointer; }
.showcase .info-2 { font-size: 10px; line-height: 12px; clear: both; padding: 4px 0 0 4px; }

.personnel-meta { width: 149px; height: 139px; float: left; position: relative; }
.personnel-block { width: 298px; }

.image-frame { padding: 2px; border: 1px solid #666; box-shadow: 1px 1px 3px #666; }
.separator-short { width: 50%; margin: 24px auto; border: none; background: #999; height: 1px; clear: both; }
.banner { border-bottom: 7px solid #595959; }
.page-title { color: #00AF2F; margin: 24px 0; font-size: 20px; line-height: 20px; font-weight: normal; }
.central-column { width: 990px; margin: 0 auto; position: relative; }
.text-small, #directors cite { font-size: 11px; }
.text-extra-small, .personnel-meta { font-size: 10px; }
.text-white, .personnel-meta { color: #fff; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-vtop { vertical-align: top; }
.line-height-small, #directors cite { line-height: 14px; }
.line-height-extra-small, .personnel-meta { line-height: 12px; }
.hidden-content { display: none; }
.nav-list { margin: 0; padding: 0; list-style: none; }
.nav-list li { float: left; }
.nav-list li:first-child a { border: none; }
.nav-list a { color: #fff; padding: 0 10px; border-left: 1px solid #999; border-color: rgba(255,255,255,0.5); }
.nav-list a:hover { color: #e98300; text-decoration: none; }
.click-for-more { cursor: pointer; }
.click-for-more + .more { display: none; }
.click-for-more .plus { color: #666; font-weight: normal; font-size: 12px; }
.clickable, .personnel-block { cursor: pointer; }

.list-1, #sub-nav, #main-nav ul { margin: 0; padding: 0; list-style: none; }
.list-2 > li { margin: 10px 0; }
.list-3 > li { margin: 10px 0; }


.dlist-1 {}

.green, #branch-map, #milestones .selected strong { color: #00AF2F; }
.orange, #sub-nav a.second-level.selected { color: #F68625; }
.light-orange, #main-nav a:hover, .personnel-block:hover div { color: #FFCB9E; }
.red, .error { color: #f00; }

.bg-green { background-color: #00AF2F; }
.bg-orange { background-color: #F68625; }
.bg-gray-1 { background-color: #868686; }

.half-left { float: left; width: 48%; }
.half-right { float: right; width: 48%; }

.top-left { position: absolute; top: 5px; left: 5px; }
.bottom-right { position: absolute; bottom: 5px; right: 5px; }

.margin-0 { margin-top: 0; margin-bottom: 0; }
.margin-top-0 { margin-top: 0; }
.margin-top-6 { margin-top: 6px; }
.margin-top-40 { margin-top: 40px; }
.margin-bottom, #breadcrumb, #login label { margin-bottom: 12px; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-4 { margin-bottom: 4px; }
.margin-bottom, #google-map { margin-bottom: 12px; }
.margin-right, #google-map { margin-right: 12px; }
.margin-horizontal { margin-left: 12px; margin-right: 12px; }
.padding { padding-top: 12px; padding-bottom: 12px; }
.padding-bottom { padding-bottom: 12px; }
.padding-horizontal { padding-left: 12px; padding-right: 12px; }

.float-left { float: left; }
.float-right { float: right; }

.clear-both { clear: both; }

.clear-fix:after, dl:after, #container:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .clear-fix { display: block; }
* html .clear-fix, *+html .clear-fix, * html dl, *+html dl, * html #container, *+html #container { height: 1%; } 

html { height: 100%; }
body { height: 100%;  margin: 0; background: #111b1b; font: 12px/16px Arial, Helvetica, sans-serif; color: #333; }
a { text-decoration: none; color: #e98300; }
a:hover { text-decoration: underline; }
p { margin: 12px 0; }
address { font-style: normal; }
dt { float: left; }
dd { margin-left: 250px; }
img { border: none; }
  img.left { float: left; margin-right: 20px; margin-bottom: 20px; }
h3 { font-size: 14px; color: #00af2f; }
h4 { font-size: 12px; }