/* ===================== Project : CBD - In The City Developer : Osky Interactive ===================== */ /* ===================== basic ===================== */ /* generic */ body{font:11px/18px Arial, Helvetica, sans-serif;background:#fff url(images/bg-body.jpg) repeat-x center top;text-align:center;color:#666666;margin:0;padding:0;} a:link, a:visited {color:#1fa3d4; text-decoration:none;} a:hover, a:active {color:#EC6900; text-decoration:none;} p {margin:0 0 10px 0;} h1, h2, h3, h4 {margin:0 0 10px 0;} img a {border:none;} sup {vertical-align:super;} /* container */ #container{width:999px;text-align:left;margin:0 auto;} /* ===================== header ===================== */ /* logo */ #header{padding:0; position:relative;} #header h1{margin:45px 0 17px 15px;padding:0; display:block; width:680px; height:98px;} #header h1 a {display:block; width:680px; height:98px; text-indent:-9999px; background:url(images/bg-logo.png) no-repeat;} /* top search box */ #topSearch {position:absolute; top:60px; right:15px;} #topSearch form input.txt {width:235px; height:22px; padding:5px 3px 1px 5px; background:url(images/bg-top_search.gif); border:none; color:#999999;} #topSearch img {position:absolute; top:2px; right:2px;} /* ===================== main content wrapper ===================== */ #mainContent{padding:20px 17px 0; background:url(images/bg-page.png) no-repeat top center;} #mainContentWrap {background:url(images/bg-content_wrapper.gif) no-repeat bottom center;} /* top menu */ #topMenu {width:961px; margin:0 auto;} #topMenu h2 {margin:0;} .topMenuItem {float:left; background:url(images/bg-top_menu.png) no-repeat; display:inline; margin:0 3px 0 0; position:relative; height:283px;} .topMenuItemLast {margin:0;} #topMenu #topMenuLife {background-position:0 0; width:478px;} #topMenu #topMenuLife h2 a {display:block; width: 478px; height:42px; text-indent:-9999px;} #topMenu #topMenuBusiness {background-position:-481px 0; width:238px;} #topMenu #topMenuBusiness h2 a {display:block; width: 238px; height:42px; text-indent:-9999px;} #topMenu #topMenuAbout {background-position:-722px 0; width:239px;} #topMenu #topMenuAbout h2 a {display:block; width: 239px; height:42px; text-indent:-9999px;} #topMenu .topMenuOverlay {position:absolute; top:42px; left:0; background:url(images/overlay-top_menu.png) no-repeat; overflow:hidden; height:10px;} #topMenu .topMenuOverlay p {padding:10px; font-weight:bold;} #topMenu .overlayImage {height:120px;z-index:10000;} /* current overlay use this class */ #topMenu #overlayItc {background-position:0 0; color:#fff; width:478px;} #topMenu #overlayBic {background-position:-478px 0; color:#000; width:238px;} #topMenu #overlayAcb {background-position:-716px 0; color:#000; width:239px;} /* ===================== content area ===================== */ #content {background:#fff url(images/bg-content.gif) top center no-repeat; margin:3px 2px 20px 2px; min-height:300px;height:auto!important;height:300px;} #content #recentNewsImage {margin-bottom:25px;} #content h2 {font-size:16px; color:#522100; font-family:Arial, Helvetica, sans-serif;} #content h3 {font-size:16px; color:#eb6900; font-family:Arial, Helvetica, sans-serif;} #content ul {} #content ul li {padding:5px 5px 5px 10px; background:url(images/list-content.gif) no-repeat 0 50%; border-top:1px solid #eae5e1;} #content ul li.last {border-bottom:1px solid #eae5e1;} /* content main */ #contentMain {float:left; width:447px; padding:15px;} #contentMain #contentMainLeft {float:left; width:210px;} #contentMain #contentMainLeft h3 {color:#eb6900;} #contentMain #contentMainRight {width:210px; margin:0 0 0 230px;} #contentMain #contentMainRight h3 {color:#eaa900;} .eventItem {margin:5px 0 10px 0;} .eventItem p {margin:0 0 3px 0;} .eventItem h4 {font-size:11px; color:#eaa900; font-weight:bold; margin:0; font-family:Arial, Helvetica, sans-serif;} .eventItem .eventItemDate {font-size:9px; color:#999999; text-transform:uppercase; margin:0; line-height:12px;} .eventItem .eventItemReadMore {font-size:9px; font-weight:bold;} .recentNewsItem {margin:5px 0 10px 0;} .recentNewsItem img {margin:5px 5px 5px 0; float:left;} .recentNewsItem p {margin:0 0 3px 0;} .recentNewsItem h4 {font-size:11px; color:#eb6900; font-weight:bold; margin:0; font-family:Arial, Helvetica, sans-serif;} .recentNewsItem .recentNewsItemDate {font-size:9px; color:#999999; text-transform:uppercase; margin:0; line-height:12px;} .recentNewsItem .recentNewsItemReadMore {font-size:9px; font-weight:bold;} .eventItem img, .recentNewsItem img {float:left; width:60px; height:60px; overflow:hidden; margin:4px 6px 0 0;} #sidebarFirst {width:208px; margin:0 0 0 480px; padding:15px;} #sidebarFirst h3 {font-size:13px; color:#eb6900; font-family:Arial, Helvetica, sans-serif;} #sidebarSecond {float:right; width:209px; margin:0; padding:15px;} #sidebarSecond h3 {font-size:13px; color:#eb6900; font-family:Arial, Helvetica, sans-serif;} /* ===================== content inside area ===================== */ #contentInside {background:#fff; margin:0 2px 20px 2px; min-height:300px;height:auto!important;height:300px;} #contentInside h2 {font-size:16px; color:#522100; font-family:Arial, Helvetica, sans-serif;} #contentInside h3 {font-size:16px; color:#eb6900; font-family:Arial, Helvetica, sans-serif;} #contentInside h4 {font-size:12px; color:#eb6900; font-family:Arial, Helvetica, sans-serif;} #contentInside ul {} #contentInside ul li {padding:5px 5px 5px 10px; background:url(images/list-content.gif) no-repeat 0 50%; border-top:1px solid #eae5e1;} #contentInside ul li.last {border-bottom:1px solid #eae5e1;} #contentInside #bannerImageInside {height:231px; background:url(images/default_banner.gif);} /* main navigation */ ul#mainNavigation {} ul#mainNavigation li {list-style:none; display:inline; float:left;} ul#mainNavigation li a span {display:none;} ul#mainNavigation li a {display:block; background:url(images/bg-main_navigation.gif) no-repeat; height:55px; width:480px;} ul#mainNavigation li#navLife a {background-position:0 0; width:480px;} ul#mainNavigation li#navLife a:hover,ul#mainNavigation li#navLife a#current {background-position:0 -55px; width:480px;} ul#mainNavigation li#navBusiness a {background-position:-480px 0; width:241px;} ul#mainNavigation li#navBusiness a:hover,ul#mainNavigation li#navBusiness a#current {background-position:-480px -55px; width:241px;} ul#mainNavigation li#navAbout a {background-position:-721px 0; width:240px;} ul#mainNavigation li#navAbout a:hover,ul#mainNavigation li#navAbout a#current {background-position:-721px -55px; width:240px;} /* sidebar for the inside page */ #contentInsideSidebar { width:213px; float:left; padding:10px 15px 15px 13px;} #contentInsideSidebarBackground { width:212px; float:left; padding:20px 15px 15px 13px; background:url(images/bg-content_inside.gif) top no-repeat;} #contentInsideContent { margin:0 0 0 241px;} #contentInsideContentWrap {background:url(images/bg-content_inside.gif) top no-repeat; margin-top:3px;} #contentInsideContentWrapWide {background:url(images/bg-content_inside_wide.gif) top no-repeat; margin-top:3px;} #contentInsideContentWrapWide .pageWide {width:704px!important; float:none; padding:20px 0 20px 15px;} #contentInsideMainContent {width:450px; float:left; padding:20px 15px;} #contentInsideMainContent h2 {font-size:18px; color:#eb6900; font-weight:bold;} #contentInsideMainContent h3 {font-size:16px; color:#eaa900; font-weight:bold;} #contentInsideMainContent ul {} #contentInsideMainContent ul li {padding:5px 5px 5px 10px;background:url(images/list-content.gif) no-repeat 0 12px; border-top:none; list-style:none;} #contentInsideMainContent ul li.last {border-bottom:none;} #contentInsideMainContent ol {margin:0 0 20px 20px;} #contentInsideMainContent ol li ul {margin:0 0 0 30px;} #contentInsideMainContent ol li {padding:5px 5px 5px 10px; list-style:decimal} #contentInsideMainContent ol li li {padding:5px 5px 5px 10px; list-style:disc; background:none;} #contentInsideMainContent .columnLeft {width:200px; float:left; padding:5px 5px 5px 0;} #contentInsideMainContent .columnLeft p, #contentInsideMainContent .columnRight p {margin:0;} #contentInsideMainContent .columnLeft h3, #contentInsideMainContent .columnRight h3 {margin-top:10px;} #contentInsideMainContent .columnRight {margin:0 0 0 220px; padding:5px 0 5px 5px; width:200px} #contentInsideSubContent {margin:0 0 0 483px; padding:20px 10px;} #contentInsideSubContent h3 {font-size:16px; color:#eaa900; font-weight:bold;} /* download */ .downloadItem {margin:5px 0 10px 0;} .downloadItem img {margin:5px 5px 5px 0; float:left;} .downloadItem p {margin:0 0 3px 0;} .downloadItem h4 {font-size:11px; color:#eb6900; font-weight:bold; margin:0; font-family:Arial, Helvetica, sans-serif;} .downloadItem .downloadItemLink {font-size:9px; font-weight:bold;} /* form style */ div.formBox {background:#f3f2f1; border:1px solid #dddddd; padding:10px; } div.formBox #formImage {margin:0 auto 10px 0; text-align:center;} div.formBox form {} div.formBox form label {float:left; width: 55px; clear:left} div.formBox form label.noFloat {width: 55px; clear:none; float:none; margin:0 0 0 15px;} div.formBox form input.inputTxt {background:#fff; border:1px solid #e0e0e0; width:360px; font:11px Arial, Helvetica, sans-serif; padding:2px;} div.formBox form textarea {background:#fff; border:1px solid #e0e0e0; width:360px; height:90px; font:11px Arial, Helvetica, sans-serif; padding:2px;} div.formBox form input.inputTxtNarrow {background:#fff; border:1px solid #e0e0e0; width:164px;} div.formBox form select {background:#fff; border:1px solid #e0e0e0; width:150px; font:11px Arial, Helvetica, sans-serif; padding:0 2px;} div.formBox form .button {margin-left:55px;} div.formBox2 {background:#f3f2f1; border:1px solid #dddddd; padding:10px; } div.formBox2 table tr td {vertical-align:top;} div.formBox2 #formImage {margin:0 auto 10px 0; text-align:center;} div.formBox2 form {} div.formBox2 form label {float:none; clear:left} div.formBox2 form label.noFloat {width: 55px; clear:none; float:none; margin:0 0 0 15px;} div.formBox2 form input.inputTxt {background:#fff; border:1px solid #e0e0e0; width:420px; font:11px Arial, Helvetica, sans-serif; padding:2px;} div.formBox2 form textarea {background:#fff; border:1px solid #e0e0e0; width:160x; height:90px; font:11px Arial, Helvetica, sans-serif; padding:2px;} div.formBox2 form input.inputTxtNarrow {background:#fff; border:1px solid #e0e0e0; width:124px;} div.formBox2 form select {background:#fff; border:1px solid #e0e0e0; width:150px; font:11px Arial, Helvetica, sans-serif; padding:0 2px;} div.formBox2 form .button {margin-left:55px;} div.formBoxContact form {} div.formBoxContact form label {float:left; width: 55px;} div.formBoxContact form label.noFloat {width: 55px; clear:none; float:none; margin:0 0 0 15px;} div.formBoxContact form input.inputTxt {background:#fff; border:1px solid #e0e0e0; width:360px; font:11px Arial, Helvetica, sans-serif; padding:2px;} div.formBoxContact form textarea {background:#fff; border:1px solid #e0e0e0; width:360px; height:90px; font:11px Arial, Helvetica, sans-serif; padding:2px;} div.formBoxContact form input.inputTxtNarrow {background:#fff; border:1px solid #e0e0e0; width:164px;} div.formBoxContact form select {background:#fff; border:1px solid #e0e0e0; width:150px; font:11px Arial, Helvetica, sans-serif; padding:0 2px;} div.formBoxContact form .button {margin-left:55px;} form {margin-bottom:25px;} /* sub navigation for the sidebar */ ul#subNav {margin:0 0 20px 0;} ul#subNav li {border-top:none;list-style:none; background:none; padding:5px 0; margin:0; border-top:1px solid #eae5e1;} ul#subNav li.first {border-top:none;} /* remove top border for first list item */ ul#subNav li a {font-weight:bold; font-size:13px;} ul#subNav li ul {margin:5px 0 0 0} ul#subNav li ul li {padding:5px 5px 5px 10px; background:url(images/list-content.gif) no-repeat 0 50%; border-top:1px solid #eae5e1;} ul#subNav li ul li a {font-weight:normal; font-size:12px; color:#1fa3d4;} ul#subNav li.current_page_item a{color:#EC6900;} ul#subNav li.current_page_item li a{color:#1fa3d4;} /* prevent child listing from using the above style */ /* interactive map */ #mapSidebar {margin-top:38px;} #map_canvas {width:688px; height:608px;} #contentInsideMap {background:#fff; margin:0 2px 20px 2px; min-height:300px;height:auto!important;height:300px;} #contentInsideMap h2 {font-size:16px; color:#522100; font-family:Arial, Helvetica, sans-serif;} #contentInsideMap h3 {font-size:16px; color:#eb6900; font-family:Arial, Helvetica, sans-serif;} #contentInsideMap h4 {font-size:12px; color:#eb6900; font-family:Arial, Helvetica, sans-serif; margin:0;} form#businessCat ul {margin-bottom:20px;} form#businessName .jqTransformSelectWrapper {z-index:9!important;} form#businessCat {margin-bottom:50px;} #businessDetail {margin-top:48px;} #searchMarker {width:380px; height:18px; padding:2px; font:11px Arial, Verdana, sans-serif; border:1px solid #EBEBEB; background:#fff;} #searchCategory {height:25px; padding:2px; font:11px Arial, Verdana, sans-serif; border:1px solid #EBEBEB; background:#fff;} #searchMarkerSubmit {vertical-align:middle;} #businessSelect, #businessNameSelect {width:186px;} .g_img1 {width:200px;height:200px; float:left; margin-right:10px;} .g_img2{width:216px;} /* news and events */ a.more-link {font-size:9px; font-weight:bold;} /* search */ .search form input.txt {width:390px; height:18px; padding:3px 3px 1px 5px; border:1px solid #ccc; color:#999999;} /* youtube video */ .youtubeThubms {margin:10px 10px 10px 0; overflow:hidden; float:left; width:270px;} .youtubeThubms a img {background-color:#FFFFFF;border:1px solid #A9A9A9;display:block; padding:3px; display:block; width:260px; height:192px;} #youTube {margin:20px 0 0 0;} /* ===================== footer ===================== */ #footer{background:url(images/bg-footer.gif) no-repeat top center;padding:0 10px; height:52px; margin:0; position:relative;} #footer ul#footerLinks {position:absolute; bottom:15px; left:40px;} #footer ul#footerLinks li {display:inline; float:left; padding:0 40px 0 0} #footer p#footerEnquiries{position:absolute; bottom:5px; right:40px;} /* ===================== other generic classes ===================== */ .clearLeft {clear:left;height:0;line-height:0;} .clearBoth {clear:both;height:0;line-height:0;} img.googleMap {text-align:center; margin:0 auto; border:1px solid #e9e3df; padding:6px;} .small {font-size:9px;} .floatLeft {float:left; margin:5px 10px 5px 0;} .floatRight {float:right; margin:5px 0 5px 10px;} p.more {font-size:9px; font-weight:bold;} img.alignleft {float:left; margin:5px 10px 5px 0;} img.alignright {float:right; margin:5px 0 5px 10px;} blockquote {padding:15px; font-style:italic;} .ngg-galleryoverview {clear:none!important;} .ngg-gallery-thumbnail {margin-right:1px!important;} /* ===================== colorbox ===================== */ /* 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; overflow:hidden;} #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;} /* 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:url(images/overlay.png) 0 0 repeat;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) -100px 0 no-repeat;} #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) -129px 0 no-repeat;} #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) -100px -29px no-repeat;} #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) -129px -29px no-repeat;} #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;} #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} /* The following fixes png-transparency for IE6. It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition Since this method does not support CSS background-positioning, it is incompatible with CSS sprites. Colorbox preloads navigation hover classes to account for this. !! Important Note: AlphaImageLoader src paths are relative to the HTML document, while regular CSS background images are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/wp-content/themes/cbd/css/images/ie/borderMiddleRight.png, sizingMethod='scale');}