/* CSS Document */

/* Reset */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,   
li, dl, dt, dd, form, a, fieldset, input, th, td { margin: 0; padding: 0; border: 0; outline: none; }
html { height: 100%; }
body { height: 100%; color: #000; }
ul, ol { list-style: none; }  
a {color: #49adfb; text-decoration: none;}
a:hover {text-decoration: underline;}

/* Main Body Structure */
body {background: #111E2F url(../media/images/bg_hdr.png) repeat-x top center; color: #fdfdfd; font-family: Arial, sans-serif; font-size:12px;}
body#error {background: #ddd4b2;}
#stick {min-height: 100%; margin:0; padding:0; background: url(../media/images/bg_site.jpg) no-repeat center 75px;}
* html #stick {height: 100%;}
#wrap-hdr {margin-bottom: 10px;}
#home #wrap-content, #portfolio #wrap-content {background: none; padding: 0 0 0 0;}
#wrap-content {position: relative; padding: 0 0 25px 0; /*background: url(../media/images/bg_content.png) repeat-x bottom center;*/}
#content {}
#home #wrap-ftr {background: #000 url(../media/images/bg_ftr.png) repeat-x top center; height:530px; clear: both; position: relative; padding: 10px 0 0;}
#wrap-ftr {background: #000 url(../media/images/bg_ftr.png) repeat-x bottom center; border-top: 1px solid #262726; height:310px; clear: both; position: relative; padding: 30px 0 0;}

body#error div {text-align: center; padding: 50px 0 0;}

h1 { font-size: 30px; font-weight: bold; margin: 0 0 0.5em 0; }
h2 { font-size: 16px; font-weight: normal; margin: 0 0 5px 0; color: #fff;}
h3 { font-size: 16px; font-weight: bold; margin: 0 0 0.5em 0; }

/* Navigation */
#nav-main {text-align: right; padding: 24px 0 30px 0; margin; 0 0 30px 0;}
#nav-main li {font-weight: bold; font-size: 17px; display: inline; margin-left: 25px;}
#nav-main li a, #nav-main li a:visited {color: #cecece; text-decoration: none;}
#nav-main li a:hover {color: #fff;}
#nav-main li a.active {color: #fff; text-decoration: underline;}

#nav-breadcrumbs {float: left; font-size: 10px; text-transform: uppercase; padding: 8px 0 0;}
#nav-breadcrumbs li {display: inline; color: #fff;}
#nav-breadcrumbs li a {display: block; float: left; color: #fff; padding-right: 10px; margin-right: 10px; border-right: 1px solid #fff;}

#nav-mints { width: 100%; overflow: hidden; padding: 7px 0; margin-bottom: 40px;}
#nav-mints li {display: inline; text-align: center;}
#nav-mints li a img {margin-bottom: 10px;}
#nav-mints li a {text-transform: uppercase; color: #fff; float: left; display: block; margin-right: 17px; text-align: center;}
#nav-mints li.last a {margin-right: 0;}
#nav-mints li a:hover {text-decoration: none;}

#nav-bar {width: 100%; overflow: hidden; background: url(../media/images/bg_tab.png) repeat-x top center;}
#nav-bar li {display: block; float: left; background: url(../media/images/bg_tab_bdr.png) no-repeat right top; padding: 0 1px 7px 0; position: relative;}
#nav-bar li a {float: left; display: block; color: #373737; font-size: 11px; padding: 9px 24px 10px 24px; border: 1px solid #c2c1c1; background: url(../media/images/bg_tab_off.png) repeat-x center center; font-weight: bold;}
#nav-bar li a:hover {text-decoration: none; color: #000;}
#nav-bar li.active a {color: #fff; background: url(../media/images/bg_tab_on.png) repeat-x center center; border: 1px solid #272727;}
#nav-bar li.active a:hover {text-decoration: none; color: #fff;}
#nav-bar li.active span {display: block; width: 14px; height: 7px; position: absolute; bottom: 0; left: 50%; margin-left: -7px; background: url(../media/images/tab_active.png) no-repeat top center;}

/* Header */
#header {position: relative; background: url(../media/images/divider.png) no-repeat bottom center;}
#logo {float: left; padding: 30px 0 17px 0;}
#hdr-contact {float: right; width: 320px; text-align: right; font-size: 12px; color: #c5c5c5; padding: 30px 0; line-height: 1.5em;}

/* Content */
#content p { margin: 0 0 1em 0; line-height: 1.5em; }
.panel {padding: 0; width: 940px; overflow: hidden; margin-left: -40px; position: relative;}
.divider {background: url(../media/images/divider.png) no-repeat bottom center;}
.panel.divider {background: url(../media/images/divider.png) no-repeat 40px bottom;}
.panel.lower {padding-bottom: 24px;}
.box {background: url(../media/images/bg_page.png) repeat-y center center; padding: 0 25px;}
.box-hdr {background: url(../media/images/bg_page_top.png) no-repeat top center; height: 20px;}
.box-ftr {background: url(../media/images/bg_page_btm.png) no-repeat bottom center; height: 20px;}

.slider-container {height: 300px; background: url(../media/images/bg_slider.jpg) no-repeat center right; padding: 9px 0 10px 47px; width: 892px; margin-bottom: 10px;}
.slider, #slider1, #slider2 {float: left; position: relative; height: 300px; width: 580px;}
.slider li {height: 300px; width: 580px; background: #000;}
.slider-container span#prevBtn, .slider-container span#prevBtn2, .slider-container span#nextBtn, .slider-container span#nextBtn2 {position: absolute; display: block; width: 38px; height: 66px; top: 130px;}
.slider-container span#prevBtn , .slider-container span#prevBtn2{left: 8px;}
.slider-container span#nextBtn, .slider-container span#nextBtn2 {right: 274px;}
.slider-intro {float: left; width: 235px; font-size: 12px; color: #fff; padding: 15px 0 0 45px;}
#content .slider-intro p {margin-bottom: 15px;}
.slider-intro h3 {font-size: 24px; font-weight: bold; color: #fff; margin: 0 0 20px 0;}
#slider2 ul img {border: 1px solid #fff;}
.slider-bdr {display: block; height: 298px; width: 578px; border: 1px solid #ccc; position: absolute; bottom: 0; right: 0; z-index:30000;}

.text {font-family: Times New Roman,times-roman,georgia,serif; font-size: 20px;}
.text h3 {font-size: 24px; font-weight: normal;}
.btm-divider {background: url(../media/images/bg_divider.png) repeat-x bottom center;}

#client-list {width: 100%; overflow: hidden;  border-top: 1px solid #181712;  border-left: 1px solid #181712;}
#client-list li {float: left; width: 196px; height: 170px; padding-top: 26px; background: url(../media/images/bg_portfolio.png) repeat-x center center; border-right: 1px solid #181712; border-bottom: 1px solid #181712; text-align: center;}
#client-list li.no-pad {padding-top: 0;}

.portfolio {float: left; width: 440px; margin: 0 10px 10px 0;}
.portfolio.right { margin-right: 0;}
.portfolio a {display: block; height: 127px; background: #333 url(../media/images/bg_box.png) no-repeat 127px top; border: 10px solid #333; color: #999; padding-right: 15px; line-height: 1.5em;}
.portfolio a:hover {text-decoration: none; color: #fff; border: 10px solid #000;}
.portfolio img {float: left; margin-right: 15px;/* padding-right: 9px; background: url(../media/images/bg_grad.png) repeat-y top right;*/}
.portfolio h3 {font-size: 16px; text-transform: uppercase; padding: 19px 0 5px 0; border-bottom: 1px solid #333; margin: 0 0 10px 142px;}

.tabs-content {display: none;}

.service {float: left; width: 150px; height: 235px; background: url(../media/images/bg_services.png) no-repeat center center; text-align: center; padding: 10px 15px; margin-right: 20px;}
.service.last {margin-right: 0px;}
.service h4 {font-size: 18px; font-weight: normal; color: #fff; padding: 0 0 9px 0; margin-bottom: 10px; background: url(../media/images/bg_divider.png) repeat-x bottom center;}
.service ul li {text-align: left; background: url(../media/images/icons/icon_bullet.png) no-repeat left center; padding: 1px 0 2px 25px; font-size: 11px; color: #fff;}

#list-services {width: 150px; height: 468px; background: url(../media/images/bg_list_services.png) no-repeat left top; float: left; padding: 5px 15px 0 15px;}
#list-services li {text-align: center; background: url(../media/images/bg_divider.png) repeat-x left bottom; height: 111px; line-height: 1em; padding: 5px 0 0;}
#list-services li.last, .service-detail.last {background: none;}
#list-services li h4 {font-size: 18px; font-weight: normal;}
.service-detail {float: right; width: 555px; background: url(../media/images/bg_divider.png) repeat-x left bottom; height: 107px; padding: 10px 25px 0 10px;}
.service-detail.first {height: 109px;}

#rate-table {border: 1px solid #d2d1d1; position: relative;}
#icon-hkd, #icon-usd, #icon-eur {position: absolute; top: -23px;}
#icon-hkd {right: 19px;}
#icon-usd {right: 159px;}
#icon-eur {right: 89px;}
#rate-table h3 {position: absolute; top: -55px; right: 0;}
#rate-table table {background: #d1d1d1; font-size: 12px; border-left: 1px solid #2d2d2d;}
#rate-table table tr th {background: #fefefe url(../media/images/bg_th.png) repeat-x bottom center; font-size: 11px; color: #454444; border-top: 1px solid #2d2d2d; border-bottom: 1px solid #2d2d2d; padding: 5px 10px; font-weight: normal;}
#rate-table table tr td {color: #000; border-right: 1px solid #2d2d2d; border-bottom: 1px solid #2d2d2d; padding: 5px 10px;}
#rate-table table tr td img {margin: 0 12px -2px 0;}
#rate-table table tr.odd td {background: #bfbfbf;}
#rate-table table tr.odd td.highlight {background: #dddddd;}
#rate-table table tr td.highlight {background: #e6e6e6;}

.form-container {float: left; width: 440px; padding: 25px 0 0;}
.address {width: 248px; height: 386px; background: #fefefe url(../media/images/bg_address.png) no-repeat top center; text-align: center; padding: 85px 20px 0 20px; float: right; line-height: 1.5em;}
.form-container form div {width: 100%; overflow: hidden; margin-bottom: 10px;}
.form-container form div label {float: left; width: 185px; margin-right: 10px; font-size: 12px;}
.form-container input.input-text, .form-container .input-select, .form-container input.input-textarea {border: 1px solid #848484; background: #fff url(../media/images/input-bg.png) no-repeat top left; padding: 4px; width: 222px; font-size: 14px;}
.form-container form div span.error {display: block; margin-left: 195px; color: #D05888; padding-top: 5px; font-style: italic; font-weight: bold; font-size: 13px;}
.form-container form div.buttons {padding-left: 195px;}
#btn-submit, #btn-reset {cursor: pointer;}

#gallery {width: 100%; overflow: hidden;}
#gallery li {display: inline;}
#gallery li a {float: left; display: block; width: 180px; height: 200px; text-align: center; padding: 0; margin: 0 22px 20px 0; text-align: center; color: #fff;}
#gallery li a img {margin-bottom: 5px;}
#gallery li a:hover {text-decoration: none;}
#gallery li.last a {margin-right: 0px;}

.tabs-content {height: 615px;}

/* Articles */
.entry {padding: 0 30px 20px 30px;}
.entry-header {width: 500px; float: right; margin-bottom: 15px;}
.entry-header h2 {font-size: 48px; font-weight: bold; margin: 0 0 10px 0; font-family: "Myriad Pro",Helvetica,Arial,sans-serif; color: #fff; line-height: 1.0em; letter-spacing: -1px;}
.entry p {clear: both; font-size:13px;}
.entry p.btm-divider {padding-bottom: 25px;}
.entry .category {font-family: "Lucida Grande",Helvetica,Arial,sans-serif; font-size: 12px; margin-bottom: 10px;}
.entry .author {color: #fff; font-family: "Lucida Grande",Helvetica,Arial,sans-serif; font-size: 12px; border-bottom: 1px solid #DCDCDC; padding-bottom: 15px; margin-bottom: 10px;}
.entry .img-left {float: left; margin: 0 0 15px 0;}
.entry .img-left.pad-top {padding-top: 15px;}
.entry .tags {padding-left: 20px; background: url(../media/images/icons/tags.gif) no-repeat left center; font-family: "Lucida Grande",Helvetica,Arial,sans-serif; font-size: 12px;}
.entry .tags li {display: inline;}
.entry ul, .entry ul li {list-style: disc;}
.entry ul {margin-bottom: 1em;}
.entry ul li {margin-left: 15px;}
.entry ul.tags {list-style: none; margin-bottom: 0;}
.entry ul.tags li {margin-left: 0;}

/* Footer */
#footer {position: relative;}
#copyright {font-size: 12px; text-align: center; color: #7d7c7c; clear: both; padding-top: 25px;}
#logo-ftr {margin-bottom: 10px;}
.onethird {color: #fff; width: 260px; padding: 0 20px;}
.onethird h3 {color: #ec5e90; font-weight: bold; font-size: 14px; margin: 0 0 5px 0;}
.onethird p {margin: 0 0 1em 0; line-height: 1.5em;}
.onethird p.grey.bold {font-size: 14px;}

/* Common Classes */
.wrap {width: 900px; margin: 0 auto;}
.clear {clear: both;}
.pad { padding: 30px; }
.float-left {float: left;}
.float-right {float: right;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.large {font-size: 16px;}
address {line-height: 1.5em; margin: 0 0 10px 0; }
.img-border {border: 1px solid #CCC; padding: 5px; background: #FFF; margin: 0 20px 20px 0;}
.margin-bottom {margin-bottom: 10px;}

/* Text Styles */
.note { font-size: 12px; }
.italic { font-style: italic }
.underline { text-decoration: underline; }
.bold { font-weight: bold; }
.grey {color: #bfbebe;}
.light-grey {color: #ccc;}
.white {color: #fff;}

.message, .success, .warning, .error-msg, .validation { border: 1px solid; margin: 10px 0px; padding:10px 10px 10px 36px; background-repeat: no-repeat; background-position: 10px 19px; line-height: 1.5em; }
.message { color: #00529B; background-color: #BDE5F8; background-image: url('../media/images/layout/information.png'); }
.success { color: #4F8A10; background-color: #DFF2BF; background-image:url('../media/images/layout/accept.png'); }
.warning { color: #9F6000; background-color: #FEEFB3; background-image: url('../media/images/layout/error.png'); }
.error-msg { color: #D8000C; background-color: #FFBABA; background-image: url('../media/images/layout/exclamation.png'); }

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#000;}

#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxLoadedContent{background:#000; padding:5px;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}