/* Theme Name: Facade Management Australia Description: A responsive 1280 theme created for FacadeManagementAustralia.com.au Version: 1.0 Author: Swish Design Author URI: http://www.swishdesign.com.au/ Theme Creator: Lester Tarranza Theme Creator URI: http://www.lestertarranza.com */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ /*@charset "UTF-8";*/ body { background: #fff; line-height: 20px; color: #4f5858; } a { color: #f38b05; font-weight: bold; } .container { width: 960px; } #header { background-color: #fff; border-bottom: 2px #464646 solid; } #logo { margin-top: 20px; margin-bottom: 9px; } #logo img { margin-bottom: 0; } #contact-details { margin-top: 43px; } #contact-details .phone { text-align: right; } #contact-details .phone span a { padding-left: 19px; background: transparent url(images/icons/header-phone.png) left center no-repeat; font: 700 16px/25px "Istok Web", sans-serif; color: #535050; } #contact-details .email { text-align: right; } #contact-details .email span a { padding-left: 32px; background: transparent url(images/icons/header-email.png) left center no-repeat; font: 400 16px/25px "Istok Web", sans-serif; color: #535050; } #nav { float: right; margin-top: 33px; } #nav ul, #nav li { list-style: none; margin: 0; } #nav ul.dropdown a { outline: 0; } #nav ul.dropdown li { display: block; float: left; margin-right: 2px; } #nav ul.dropdown li.last { margin-right: 0; } #nav ul.dropdown a { display: block; margin: 0; padding: 0 28px 0; font: 400 16px/54px 'Roboto Condensed', sans-serif; color: #fff; background: #555555; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } #nav ul.dropdown a:hover, a:hover, #nav ul.dropdown a:active, #nav ul.dropdown a:focus { text-decoration: none; } #nav > ul.dropdown > li > a:hover, #nav > ul.dropdown > li:hover, #nav > ul.dropdown > .current_page_item > a, #nav > ul.dropdown > .current-menu-ancestor > a { background: #0067a9 url(images/layout/header/nav-active-bg.png) repeat-x top; color: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; text-decoration: none; } #nav > ul.dropdown > li:hover > a, #nav > ul.dropdown > li:hover > a:focus { color: #fff; } /* Dropdown Level */ #nav ul.dropdown ul { border: none; } #nav ul.dropdown ul li { width: 100%; margin: 0; padding: 0; text-align: left; } #nav ul.dropdown ul li a { background: #0066a7; color: #fff; min-width: 170px; font: 16px/40px 'Roboto Condensed', sans-serif; padding: 0 13px; border-radius: 0 !important; border-top: 1px #015f9b solid; } #nav ul.dropdown ul li.first a { } #nav ul.dropdown ul li a:hover { background: #004e7c url(images/layout/header/submenu-active-arrow.png) no-repeat right center; text-decoration: none; color: #fff; border-bottom: 1px #027ac7 solid; line-height: 39px; } #nav ul.dropdown ul li.current_page_item a { background: #004e7c url(images/layout/header/submenu-active-arrow.png) no-repeat right center; } #nav ul.dropdown ul li.last a { } #nav ul.dropdown ul ul { top: -1px; left: 100%; } #content { padding-bottom: 45px; } #maincontent { min-height: 300px; } #maincontent h1 { font: bold 24px/24px "Lato", sans-serif; color: #004e7c; border-bottom: 2px #cbcbcb solid; padding-bottom: 6px; margin-top: 0; margin-bottom: 14px; text-transform: uppercase; } #maincontent h2 { font: bold 20px/20px "Lato", sans-serif; color: #004e7c; margin-top: 0; text-transform: uppercase; } #maincontent h3 { font: bold 18px/18px "Lato", sans-serif; color: #004e7c; margin-top: 0; text-transform: uppercase; } #maincontent h4 { font: bold 15px/15px "Lato", sans-serif; color: #4f5858; margin-top: 0; } #maincontent p { font: 13px/18px "Istok Web", sans-serif; color: #4f5858; margin-bottom: 20px; } #maincontent ul { margin-left: 0; padding-left: 0; list-style: none inside none; color: #004e7c; } #maincontent ul ul { padding-left: 20px; } #maincontent ul li { font: 13px/24px "Istok Web", sans-serif; color: #4f5858; } #maincontent ul li:before { content: "• "; color: #004e7c; font: 20px/24px Arial, sans-serif; vertical-align: middle; } #maincontent img.alignleft { float: left; margin-right: 29px; margin-bottom: 9px; -webkit-box-shadow: 0px 0px 0px 3px rgba(201,201,201,1); -moz-box-shadow: 0px 0px 0px 3px rgba(201,201,201,1); box-shadow: 0px 0px 0px 3px rgba(201,201,201,1); } #maincontent img.alignright { float: right; margin-left: 29px; margin-bottom: 9px; } #maincontent blockquote { clear: both; padding: 15px 0 0; } #maincontent blockquote p { color: #f99700; font-style: italic; margin-bottom: 0; } /* Breadcrumbs */ #breadcrumbs { margin-top: 16px; margin-bottom: 12px; font: 11px/18px "Istok Web", sans-serif; color: #999999; } #breadcrumbs .current, #breadcrumbs .breadcrumb_last { font: 11px/18px "Istok Web", sans-serif; color: #999999; text-decoration: none; } #breadcrumbs a { font: 11px/18px "Istok Web", sans-serif; color: #f99700; } /* Forms */ .form-horizontal { margin-top: 0; padding-left: 20px; border-left: 1px #ccc dotted; } .form-horizontal label { width: 100px; float: left; font: bold 13px/27px Arial, sans-serif; color: #454545; } .form-horizontal .colon { width: 33px; float: left; font-weight: bold; line-height: 27px; } .form-horizontal input.wpcf7-form-control, .form-horizontal textarea { width: 325px; float: left; padding: 4px 12px; } .form-horizontal input.btn.btn-primary { background: #004775; border: 0; text-transform: uppercase; width: auto; outline: 0; float: right; } .form-horizontal input.btn.btn-primary:hover, .form-horizontal input.btn.btn-primary:focus { background: #004775; } .form-horizontal textarea { resize: none; } .form-control { border-color: #004775; height: 27px; } .form-control:focus { border-color: #004775; } .form-horizontal span.wpcf7-not-valid-tip { float: right; } #sidebar { margin-top: 9px; } #sidebar .widget { margin-bottom: 10px; } #sidebar .widget .widgettitle { background: #303e48; padding: 8px 20px; margin: 0; font: 700 16px/24px 'Roboto Condensed', sans-serif; color: #fff; text-transform: uppercase; } #membership-signup { background: #f38b05 url(images/layout/bg/sidebar/membership-signup.jpg) no-repeat; min-height: 81px; } #membership-signup .title-nobg { font: 700 22px/24px 'Roboto Condensed', sans-serif; text-transform: uppercase; padding: 16px 90px 0 21px; color: #fff; } #membership-signup .title-nobg a, #membership-signup .title-nobg a:hover { color: #fff; text-decoration: none; } #sidebar-subscribe { background: #303e48 url(images/layout/bg/sidebar/subscribe.jpg) no-repeat; min-height: 111px; } #sidebar-subscribe .widget-content { padding: 20px 20px 0; } #sidebar-subscribe .title-nobg { font: 700 16px/14px 'Roboto Condensed', sans-serif; color: #fff; text-transform: uppercase; margin-bottom: 20px; } #sidebar-subscribe .form-group { position: relative; } #sidebar-subscribe .form-group input[type="text"] { border-color: #00a5c1; height: 29px; width: 181px; border-radius: 0; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; float: left; } #sidebar-subscribe .form-group input[type="submit"] { background: #00a5c1; border-radius: 0; border: 0; text-transform: uppercase; color: #fff; width: 98px; height: 29px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; float: left; } #sidebar .widget_latest_news { } #sidebar .widget_latest_news .widget-content { padding: 12px 20px 15px; background: #f5f5f5; } #sidebar .widget_latest_news .entry { margin-bottom: 15px; } #sidebar .widget_latest_news .entry h4, #sidebar .widget_latest_news .entry h4 a, #sidebar .widget_latest_news .entry h4 a:hover { font: bold 13px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #00a5c1; text-decoration: none; margin: 0; } #sidebar .widget_latest_news .entry p { font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #454545; margin-bottom: 0; } #sidebar .widget_latest_news .entry p .read-more, #sidebar .widget_latest_news .entry p .read-more a { font-size: 12px; font-style: italic; color: #f38b05; text-decoration: none; } #footer { background: #004775; padding-top: 14px; padding-bottom: 18px; font: 11px "Istok Web", sans-serif; color: #eef7ff; } #footer a { font: 11px "Istok Web", sans-serif; color: #eef7ff; text-decoration: none; outline: 0; } /* #Page Styles ================================================== */ /* Home */ .rslides_container { position: relative; background: #f1f1f1 url(images/layout/slider/loading.gif) no-repeat center center; } #slideshow { margin: 0 auto; padding: 0; min-width: 960px; visibility: hidden; } #slideshow, #slideshow li { list-style: none; } #slideshow li { margin: 0; } #slideshow li .caption { position: absolute; right: 50%; margin-right: -480px; top: 184px; width: 476px; background: transparent url(images/layout/slider/slide-caption-bg.png) repeat; } #slideshow li .caption-wrap { padding: 22px 30px 30px 20px; } #slideshow li .title { color: #f99600; font: 700 42px/42px 'Roboto Condensed', sans-serif; text-transform: uppercase; text-align: right; letter-spacing: 0.5px; margin-bottom: 20px; } #slideshow li .tagline { font: 18px/24px "Istok Web", sans-serif; color: #fff; text-align: right; margin-bottom: 24px; } #slideshow li .learn-more { float: right; border: 1px #fff solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font: 14px/18px "Open Sans", sans-serif; color: #fff; padding: 10px 32px; text-transform: uppercase; } #slideshow img { display: block; width: 100%; height: auto; } .rslides_tabs { text-align: center; margin: 0; padding: 0; line-height: 0; position: absolute; bottom: 16px; z-index: 999; width: 100% } .rslides_tabs li { display: inline; float: none; margin-right: 5px; } .rslides_tabs li a { background: transparent; border-radius: 15px; display: inline-block; height: 11px; overflow: hidden; text-indent: -9999px; width: 11px; border: 1px #fff solid; outline: 0; } .rslides_tabs li.rslides_here a { background: #fff; border-radius: 15px; display: inline-block; height: 11px; overflow: hidden; text-indent: -9999px; width: 11px; border: 1px #fff solid; } #middle-content { background: #ebf7fb; } #home-content { padding-bottom: 40px; } #home-content .heading { font: bold 23px/45px "Lato", sans-serif; color: #004e7c; text-align: center; text-transform: uppercase; margin-top: 26px; } #home-content p { color: #4f5858; font: 13px/18px "Istok Web", sans-serif; text-align: center; margin: 0; } #home-our-projects { margin-top: 31px; margin-bottom: 60px; } #home-our-projects .title { font: 24px/45px "Lato", sans-serif; color: #004e7c; text-transform: uppercase; margin-top: 0; } /* Our Projects Slider */ #home-slider-container { } #home-slider-container ul { margin: 0; padding: 0; } #slider-left { float: left; } #home-slider-container .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0 auto; } #home-slider-container .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } #home-slider-container .rslides li:first-child { position: relative; display: block; float: left; } #home-slider-container .rslides img { display: block; height: auto; min-height: 260px; float: left; width: 100%; border: 0; } #slider-right { float: left; margin-left: 20px; } .our_projects_thumbs_tabs { list-style: none inside none; } .our_projects_thumbs_tabs li { display: block; margin-bottom: 10px; } .our_projects_thumbs_tabs li.last { margin-bottom: 0; } .our_projects_thumbs_tabs a { outline: 0; display: block; display: block; } .our_projects_thumbs_tabs .our_projects_thumbs_here a { -webkit-box-shadow: 0px 0px 0px 2px rgba(249,150,0,1); -moz-box-shadow: 0px 0px 0px 2px rgba(249,150,0,1); box-shadow: 0px 0px 0px 2px rgba(249,150,0,1); } .our_projects_thumbs_tabs .our_projects_thumbs_here a img { opacity: 0.5; } .our_projects_thumbs_tabs img { display: block; width: 130px; height: 80px; } #project-details { float: right; width: 301px; } #project-details .title { font: bold 18px/18px "Istok Web", sans-serif; color: #4f5858; text-transform: none; border-bottom: 2px #d6d6da solid; padding-bottom: 8px; margin-bottom: 16px; } #project-details p { font: 13px/18px "Istok Web", sans-serif; color: #4f5858; } #project-details .view-all { float: left; border: 1px #f99700 solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font: 12px/18px "Open Sans", sans-serif; color: #f99700; padding: 5px 15px; text-transform: uppercase; margin-top: 15px; } /* Inner Pages */ #inner-slideshow { margin: 0 auto; padding: 0; min-width: 960px; visibility: hidden; } #inner-slideshow, #inner-slideshow li { list-style: none; } #inner-slideshow li { margin: 0; } #inner-slideshow img { display: block; width: 100%; height: auto; } /* Projects Page */ #project-container { } #project-links { float: left; width: 250px; margin-top: 21px; } #project-container .block{ background: #545454; color: #fff; } #project-container .block input[type='radio']:checked ~ .info{ height: auto; background: #545454; } #project-container .block input[type='radio']:checked ~ label { background: #545454 url(images/layout/buttons/project-label-selected.png) no-repeat right center; } #project-container input[type='radio']{ display: none; } #project-container label{ width: 250px; padding-left: 18px; cursor: pointer; margin: 0; border-bottom: 1px #fff solid; background: #545454 url(images/layout/buttons/projects-label.png) no-repeat right center; } #project-container span{ font: 13px/40px "Lato", sans-serif; } #project-container .info{ background: #fff; color: #222; width: 100%; height: 0; display: block; overflow: hidden; box-sizing: border-box; transition: .1s linear; } #project-container ul.tabs{ margin: 0px; float: left; width: 250px; background: #545454; } #project-container ul.tabs li:before, #project-container .tab-content li:before { content: ""; } #project-container ul.tabs li{ background: none; color: #fff; display: block; padding:8px 10px 8px 38px; cursor: pointer; border-bottom: 1px #fff solid; font: 13px/13px "Lato", sans-serif; } #project-container ul.tabs li.current{ background: #004e7c url(images/layout/buttons/projects-arrow.png) no-repeat right center; color: #fff; } #project-container .tab-content{ display: none; background: transparent; padding: 0; } #project-container .tab-content.current{ display: inherit; } #project-details-container { float: right; width: 680px; } #project-details-container #breadcrumbs { margin-bottom: 6px; } #project-details-container #breadcrumbs span { line-height: 18px; } #project-details-container .title { border-bottom: 2px #cbcbcb solid; font: bold 24px/37px "Lato", sans-serif; color: #004e7c; text-transform: uppercase; margin-bottom: 19px; } #project-details-container .project_slides_container { } #project-details-container .project_slides_container .pgwSlideshow, #project-details-container .project_slides_container .pgwSlideshow .ps-list { background: transparent; } #project-details-container .project_slides_container .pgwSlideshow .ps-current { margin-bottom: 10px; min-height: 300px !important; } #project-details-container .project_slides_container .pgwSlideshow .ps-list { border-top: 0; box-shadow: none; } #project-details-container .project_slides_container .ps-prevIcon, #project-details-container .project_slides_container .ps-nextIcon { background: none; } #project-details-container .project_slides_container .pgwSlideshow .ps-list .ps-prev:hover, #project-details-container .project_slides_container .pgwSlideshow .ps-list .ps-next:hover { background-color: #f99600; } #project-details-container .project_slides_container .pgwSlideshow .ps-list .ps-prev { background: #2d2d2d url(images/layout/buttons/nav-prev.png) no-repeat center; border-style: none; border-radius: 0; top: 0; bottom: 0; padding: 0 15px; display: block !important; } #project-details-container .project_slides_container .pgwSlideshow .ps-prevIcon { border-style: none; border-width: 0; opacity: 1 !important; } #project-details-container .project_slides_container .pgwSlideshow .ps-list .ps-next { background: #2d2d2d url(images/layout/buttons/nav-next.png) no-repeat center; border-style: none; border-radius: 0; top: 0; bottom: 0; padding: 0 15px; display: block !important; } #project-details-container .project_slides_container .pgwSlideshow .ps-nextIcon { border-style: none; border-width: 0; opacity: 1 !important; } #project-details-container .project_slides_container .pgwSlideshow .ps-list li img { width: 112px; height: 80px; margin: 0; border: 0; } #project-details-container .project_slides_container .pgwSlideshow .ps-list li .ps-item { margin: 2px 5px; opacity: 1; } #project-details-container .project_slides_container .pgwSlideshow .ps-list li .ps-item.ps-selected { border: 0; opacity: 0.6;-webkit-box-shadow: 0px 0px 0px 2px rgba(249,150,0,1); -moz-box-shadow: 0px 0px 0px 2px rgba(249,150,0,1); box-shadow: 0px 0px 0px 2px rgba(249,150,0,1); display: block; } #project-details-container .project_slides_container .pgwSlideshow .ps-list li .ps-item.ps-selected img { } #project-details-container .project_slides { margin: 0 35px !important; } #project-details-container .project-details-table { margin-top: 30px; margin-bottom: 30px; font-family: "Istok Web", sans-serif; font-size: 13px; } #project-details-container .project-details-table .table-striped > tbody > tr:nth-child(2n+1) { background: #fff; } #project-details-container .project-details-table .table-striped > tbody > tr:nth-child(2n+2) { background: #f0f0f0; } #project-details-container .project-details-table .table-bordered > thead > tr > th, #project-details-container .project-details-table .table-bordered > tbody > tr > th, #project-details-container .project-details-table .table-bordered > tfoot > tr > th, #project-details-container .project-details-table .table-bordered > thead > tr > td, #project-details-container .project-details-table .table-bordered > tbody > tr > td, #project-details-container .project-details-table .table-bordered > tfoot > tr > td { border: 1px #e5e5e5 solid; } #project-details-container .project-details-table .table-bordered > tbody > tr > th { color: #004e7c; font-weight: bold; text-transform: uppercase; min-width: 150px; padding-left: 15px; } /* Thank You page */ #thankyou { background: #ffffff; padding: 20px; text-align: center; } #thankyou h1 { font: 20px Arial; } .close { display: block; margin: 10px auto; width: 118px; height: 32px; border: 0; background: url(images/layout/buttons/close.png) no-repeat 0 0; text-indent: -9999px; } .project-gallery a { position: relative; display: inline-block; margin-bottom: 12px; margin-right: 10px; } .project-gallery a:nth-child(3n) { margin-right: 0; } .project-gallery a:before { content: ""; } .project-gallery a:hover:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(25,70,114,0.5); } .project-gallery a:after { content: ""; } .project-gallery a:hover:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/facademanagementaustralia/images/icons/plus-hover.png); background-repeat: no-repeat; background-position: center; } #fancybox-content { border-width: 0 !important; width: 100% !important; height: auto !important; } #fancybox-right span { background: none; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #b0b0b1; left: auto; right: -45px; } #fancybox-left span { background: none; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #b0b0b1; right: auto; left: -45px; } #fancybox-wrap #fancybox-left:hover span { right: auto; left: -45px; border-right: 15px solid #ffffff; } #fancybox-wrap #fancybox-right:hover span { left: auto; right: -45px; border-left: 15px solid #ffffff; } #fancybox-wrap #fancybox-right span:hover { border-left: 15px solid #ffffff; } #fancybox-wrap #fancybox-left span:hover { border-right: 15px solid #ffffff; } #fancybox-wrap { max-width: 950px; margin-left: auto; margin-right: auto; left: 0 !important; right: 0; } #fancybox-wrap #fancybox-close { background-color: #fff; width: 26px; height: 26px; background-image: url(/wp-content/themes/facademanagementaustralia/images/icons/close-btn.png); background-repeat: no-repeat; background-position: center; border-radius: 100%; } #fancybox-overlay { background-color: rgb(85, 85, 85) !important; opacity: 0.9 !important; } #home-slider-container .rslides li a { position: relative; display: block; } #home-slider-container .rslides li a:before { content: ""; } #home-slider-container .rslides li a:hover:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(25,70,114,0.5); } #home-slider-container .rslides li a:after { content: ""; } #home-slider-container .rslides li a:hover:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/facademanagementaustralia/images/icons/plus-hover.png); background-repeat: no-repeat; background-position: center; } #home-slider-container .rslides li a img { float: none; } #fancybox-wrap #fancybox-outer { background-color: transparent; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } @media (max-width: 1045px) { #fancybox-right span, #fancybox-wrap #fancybox-right:hover span { right: 10px; } #fancybox-left span, #fancybox-wrap #fancybox-left:hover span { left: 10px; } } /* #Media Queries ================================================== */ @media only screen and (min-width: 1440px) and (max-width: 1520px) { #slideshow li .caption { top: 30%; } } @media only screen and (min-width: 1280px) and (max-width: 1439px) { #slideshow li .caption { top: 30%; } } @media only screen and (min-width: 1120px) and (max-width: 1279px) { #slideshow li .caption { top: 15%; } } @media only screen and (min-width: 960px) and (max-width: 1120px) { #slideshow li .caption { top: 15%; } } @media only screen and (max-width: 960px) { #slideshow li .caption { top: 14%; } }