/* ------------------------------------------------------------------------------------------------------------------------------- BPF GLOBAL STYLES Made by JA - 16/02/2017 Use ### or TODO to find in progress areas Dependencies: - Foundation 6.3 - JQuery 3.1.1 - Font Awesome 4.7 - BxSlider v4.1.2 Contents: 1. BPF SPECIFIC STYLES ------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------- 1. BPF SPECIFIC STYLES ------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------- Page Content Styles ----------------------------------------- */ html,p{ font-size: 14px;} h4{ line-height: 2;} .right{ float: right;} br, .clear { clear: both; } a:hover { color: #5ec6f1 ; } button, .button { /*background-color: #EAE3D3; border: 1px solid #cdbd97; color: #5D5D5D;*/ color: #ccc; border: 0; border-radius: 3px; background: linear-gradient(#5ec6f1 0%,#144773 100%); background: #5ec6f1; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#5ec6f1, #144773); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#5ec6f1, #144773); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#5ec6f1, #144773); /* For Firefox 3.6 to 15 */ background: linear-gradient(#5ec6f1, #144773); /* Standard syntax */ } .postfix.button { padding: 0; background-color: #EAE3D3; /*border: 1px solid #cdbd97;*/ border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0; height: 2.4375rem; width: 100%; } /*button:hover, button:focus, .button:hover, .button:focus { background-color: #cdbd97; border: 1px solid #cdbd97; }*/ /*button:hover, button:focus, .button:hover, .button:focus { border: 1px solid #cdbd97; }*/ button.disabled, button[disabled], .button.disabled, .button[disabled] { background: #eae3d3; border: 1px solid #cdbd97; color: #333; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { background: #eae3d3; border: 1px solid #cdbd97; color: #333; } .button:hover { text-decoration: none; } #main-content button, #main-content .button { line-height: 16px; font-size: 12px; padding: 6px 10px; vertical-align: top; } #main-heading .publishdate { display: none; } .mandatory { color: #c60f13; } .boxLeft { float: left; width: 48%; } .boxRight { float: right; width: 48%; } .nav-left { float: left; } .nav-right { float: right; } /* Reduce z-index so dropdowns appear over banner arrows */ #top-banner .bx-wrapper .bx-controls-direction a { z-index: 0; } #top-banner .bx-wrapper .bx-viewport { box-shadow: none;z-index: 0;left: 0;} #top-banner .bx-wrapper .bx-viewport { border: none; } #top-banner { margin-bottom: 1em;} #main-content #Bookmarks, #main-content .page-related { display: none; } #company-logo { text-align: center; } #company-logo img { max-height: 62px; } #page-content { padding: 4.5em 0 1em 0; } #home-page #page-content { padding: 43px 0; } #page-content #main-heading h1 { margin: 0 0 5px 0;line-height: 1.5;} #page-content ul, #page-content ol { margin-left: 15px; } #main-content { font-size: 14px; color: #5D5D5D; line-height: 1.5em; padding-bottom: 15px; } #main-content p ul { margin-left: 15px; } #main-content p ol { margin-left: 20px; } #main-content .content-image img{ margin-bottom: 15px; } #home-page #main-content { min-height: 0; } #home-page .content-feed { margin-bottom: 0; } #home-page .content-feed-left .content-feed-heading { display: none; } /*---------------------------------------------- GDPR Related panels ----------------------------------------------*/ .scroll { max-height: 12em; overflow: auto; padding: 1em; border: 1px solid #ccc; } /* ----------------------------------------- User ----------------------------------------- */ #user { text-align: center; margin: 10px 0 5px 0; padding: 0 5px; } #user ul { margin: 0; padding: 0; display: inline-block; float: none; } /* ----------------------------------------- Header ----------------------------------------- */ #social-media ul { margin: 0; display: inline-block; } #social-media ul li:first-child { margin-left: 0; } #social-media a { font-size: 16px; } #website-search form { margin: 0; } #website-search input, #website-search button { margin: 0; height: 28px; } #website-search button { line-height: 26px; } #website-search input[type="text"] { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #login-button { margin: 7px 0 0 0; line-height: 19px; } /* ----------------------------------------- Footer ----------------------------------------- */ #footer{ margin-top: 1em;} #footer .divide { border-top: 1px solid #ccc; margin: 0 10px 20px 10px; } #contact-address, #contact-us { float: left; line-height: 20px; margin-bottom: 20px; } #contact-address { margin-right: 9%; width: 40%; } #contact-us { width: 50%; } /*#image-carousel { text-align: center; }*/ #image-carousel .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } #image-carousel ul { margin: 0; padding: 0; display: inline-block;list-style: outside none;} #image-carousel li { margin: 0 0 15px 0; width: 50%;float: left;} #image-carousel li:first-child { margin-left: 0; } #image-carousel li a { height: 60px; display: block; } #image-carousel .training { width: 145px; /* background-image: url('/Resource/Template/bpf/wide/img/polymer-courses-h40.png');*/ background-repeat: no-repeat; padding-right:10px; } #image-carousel .plastbook { width: 100px; /* background-image: url('/Resource/Template/bpf/wide/img/bpf-energy-logo-100.png');*/ background-repeat: no-repeat; padding-right:10px; } #image-carousel .plastipedia { width: 100px; padding-right:10px; /* background-image: url('/Resource/Template/bpf/wide/img/plastipedia2.jpg');*/ } #image-carousel .industry { width: 145px; padding-right:15px; /* background-image: url('/Resource/Template/bpf/wide/img/industry.jpg');*/ } #image-carousel .shop { width: 150px; padding-right:10px; /* background-image: url('/Resource/Template/bpf/wide/img/Find-a-Plastic-Supplier-150.png');*/ background-repeat: no-repeat; } /*#image-carousel a:hover { background-position: 0 -60px; }*/ #image-carousel a:hover{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);} #footer #footer-lower { line-height: 16px; padding: 15px 0 10px 0; } #footer #copyright, #footer #address { font-size: 11px; text-align: center; } #footer abbr { font-size: 100%; } #footer-menu ul { margin: 0; list-style: none; text-align: center; line-height: 10px; margin-top: 5px; } #footer-menu ul li { margin-left: 15px; padding: 5px 0; } #footer-menu ul li:first-child { margin-left: 0; } #powered-by { text-align: center; margin-bottom: 20px; } #powered-by img { margin-right: 5px; } #powered-by a { font-size: 10px; } /* ----------------------------------------- Search Boxes ----------------------------------------- */ /*#search-boxes { margin: 15px 0; }*/ #search-boxes h5 { font-size: 16px; border-bottom: 2px solid #f69321; margin-bottom: 20px; } #search-boxes form, #search-boxes input { margin: 0; } #search-boxes input { height: 2.3125em; } #search-boxes .postfix { height: 2.3125em; font-size: 14px; line-height: 0; } #search-boxes button { margin: 0; } #search-boxes .panel { margin: 15px 0 10px; border: none; background-color: #FFF; padding: 0; } #search-boxes .panel:first-child { margin-top: 0; } #search-boxes form { font-size: 14px; } .newsletter-subscribe { margin: 15px 0; } .newsletter-subscribe p { margin: 10px 0; } #right h4::after, #share .content-share-title::after, .content-category-title::after, #right .content-feed-heading::after, #left .join-now h4::after{ content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; /* Ruby - Orange gradient */ background: #e50046; /* Old browsers */ background: -moz-linear-gradient(left, #e50046 0%,#f2920c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #e50046 0%,#f2920c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e50046 0%,#f2920c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #right h4, #share .content-share-title, .content-category-title, #right .content-feed-heading, #left .join-now h4 { position: relative; font-size: 20px; padding-bottom: 5px; display: block; color: #144773; margin-bottom: 0.5em; } .join-now a:hover { text-decoration: none;color: #1468a0; } .join-now a i { float: right; } .join-now i { margin-top: 10px; } #right > div { margin-bottom: 3em; } /* ----------------------------------------- Search Panels ----------------------------------------- */ #search-panels a:hover { text-decoration: none; } #search-panels a:hover h5 { color: #f69321; } /* ----------------------------------------- Video Panels for PolymerZone ----------------------------------------- */ #videos-grid{ list-style: outside none; } #videos-grid li { width: 50%; padding: 0 0.8rem; display: block; float: left; list-style: none; } #videos-grid .panel { background-color: #f2f2f2; border-color: #d8d8d8; } #videos-grid li:nth-of-type(n) { clear: none; } #videos-grid li:nth-of-type(2n+1) { clear: both; } /* ----------------------------------------- Banners ----------------------------------------- */ /* Just display the first banner if js is disabled */ .no-js #home-page .top-banner > .banners > div { display: none; } .no-js #home-page .top-banner > .banners > div:first-child { display: block; } #home-page .slideshow-wrapper { height: 252px; } #home-page .orbit-container { margin-bottom: 15px; } /* Fixes arrow borders in Firefox */ .orbit-container .orbit-prev > span, .orbit-container .orbit-next > span { border-style: solid; } .orbit-container .orbit-timer.paused > span { border-style: solid; } .orbit-container .orbit-slides-container img { border-radius: 3px; } #BannerTop, #BannerBottom, #BannerLeft { text-align: center; } #BannerTop .theme-default{margin-bottom: 1.5em;} #left-banner img { margin-bottom: 1em; } #BannerLeft img, #BannerRight img { margin: 1em 0; border-radius: 3px; } /* ----------------------------------------- Search Boxes ----------------------------------------- */ .websitesearch-list [class*='search-item'] { margin-bottom: 2em; } .websitesearch-list [class*='search-synopsis'] { display: block; } span.left { width: 100%; display: block; } .websitesearch-list [class*='synopsis'] { display: block; margin-left: 1.5em; } .websitesearch-list [class*='publish-on'], .websitesearch-list [class*='modified-on'] { font-size: 11px; display: block; margin-left: 2em; } /* ----------------------------------------- Content Feed ----------------------------------------- */ .content-feed { margin-bottom: 10px; /*border-bottom: 1px solid #ccc;*/ } .content-feed .content-feed-heading { font-size: 18px; border-bottom: 2px solid #144773; } /*.content-feed .content-feeds { padding: 5px 0; }*/ .content-feed ul:first-child { border-top: none; padding-top: 0; } #page-content .content-feed ul { list-style: none; padding-top: 5px; margin-bottom: 5px; margin-left: 0; } #main-content #content-feed-main .content-feeds ul { width: 18%; display: inline-block; margin-right: 2%; vertical-align: top; } #main-content #content-feed-main .content-feeds ul .content-feed-title { height: 65px; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; } #content-feed-main .content-feeds ul > a { display: block; min-height: 85px; } /* -------------------------------------------------------------------------- Redesigned news boxes on home page -------------------------------------------------------------------------- */ #home-page #page-content .content-feed-left .content-feeds > ul { min-height: 6em; } #home-page #page-content .content-feeds > ul { padding-bottom: 1em; border-bottom: 1px solid #ccc; } #home-page #page-content .content-feeds > ul:last-of-type { border-bottom: none; } #home-page #page-content .content-feed-left .content-feed-thumb { float: left; height: auto; margin-right: 1em; width: 100px; min-height: 3.5em; } #home-page .content-feeds > a { text-align: right; display: block; } #home-page #content-right{ margin-top: 2em; } #home-page #page-content .content-feed-left .content-feeds > ul:first-of-type img { float: none; width: 100%; height:auto; margin-bottom: 0.5em; -webkit-box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); -moz-box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); } #home-page #page-content .content-feed-left .content-feeds > ul:first-of-type .content-feed-title{ font-size: 2em; } #home-page #page-content .right-content{ margin-top:1.5em; padding-top:1.5em; border-top: 1px solid #ccc } #home-page #page-content .right-content img{ -webkit-box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); -moz-box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); } #home-page #page-content .right-content h5{margin-bottom: 1.5em;} /* -------------------------------------------------------------------------- Home page button images -------------------------------------------------------------------------- */ .home-buttons img { width: 100%; margin-top: 4em; } .home-buttons a > img { -webkit-filter: grayscale(0) ; filter: grayscale(0); } .home-buttons a:hover > img { -webkit-filter: grayscale(100%) ; filter: grayscale(100%); transition: filter 600ms ease-out; } #large-search { margin-top: 4em; } #large-search input, #large-search button { line-height: 50px; font-size: 36px; height: 100%; padding: .5rem; } #large-search button{ padding: .55rem 0;} .content-category-item { margin-bottom: 10px; } .content-category-title span {color: #80CC28; } .content-category-item-image { float: left; margin-right: 10px; } .content-category-item-image img { max-width: 25px; } .content-category-item-title h3 { font-weight: normal; font-size: 16px;} /* ----------------------------------------- Products ----------------------------------------- */ #products h4 { font-size: 18px; border-bottom: 2px solid #144773; padding-bottom: 5px; margin-bottom: 10px; } #products .product-list-item-image { margin-bottom: 10px; text-align: center; } #products .product-list-item-content { line-height: 1.5; } #products .product-list-item-content .product-list-item-title { font-weight: bold; font-size: 14px; margin-bottom: 5px; } #products .product-list-item-member-price { margin-bottom: 5px; font-weight: bold; } #products .product-list-add-to-basket a { border-radius: 3px; padding-left: 1em; padding-right: 1em; padding-bottom: 0.5625em; padding-top: 0.625em; font-size: 12px; cursor: pointer; display: inline-block; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; transition: background-color 300ms ease-out 0s; background-color: #00529B; border-color: #003768; border-style: solid; border-width: 1px; color: #FFF; font-family: inherit; font-weight: bold; line-height: 1; margin: 0 0 1.25em; position: relative; text-align: center; text-decoration: none; } /* ----------------------------------------- Sitemap ----------------------------------------- */ #ctl00_cphMainContent_tvContent table { margin: 5px 0; } #ctl00_cphMainContent_tvContent table td { padding: 0 5px; white-space: normal !important; } /* ----------------------------------------- Modal Progress Bar ----------------------------------------- */ .modalBackground { background-color: Gray; filter: alpha(opacity=70); opacity: 0.70; } .updateProgressBox { border: 1px solid #144773; background-color:#FFFFFF; position:absolute; width:350px; height:100px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .updateProgressBox-message { margin-top: 13px; text-align: center; } /* ----------------------------------------- Message Box ----------------------------------------- */ .messageBox_Information, .messageBox_Warning, .messageBox_Failed, .messageBox_Help { clear:both; color:#5D5D5D; margin: 10px 0; padding: 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; } .messageBox_Information > .messageBox_Information, .messageBox_Warning > .messageBox_Warning, .messageBox_Failed > .messageBox_Failed, .messageBox_Help > .messageBox_Help { border: none; padding: 0; } .messageBox_Information, .messageBox_Warning, .messageBox_Failed {clear:both; color:#5D5D5D; margin-bottom:10px; padding:5px;} .messageBox_Information {background-color: #c8e9f1;} .messageBox_Warning { background-color: #f9de8b; } .messageBox_Failed { background-color: #e99974; } .messageBox_Help { background-color: #FFEACF; } .messageBox_Information img, .messageBox_Warning img, .messageBox_Failed img, .messageBox_Help img { float: left; margin: 0; padding: 0; } .messageBox_Information h3, .messageBox_Warning h3, .messageBox_Failed h3, .messageBox_Help h3 { margin: 0; padding: 0; } .messageBox_Information p, .messageBox_Warning p, .messageBox_Failed p, .messageBox_Help p { margin: 0; padding: 0; } .messageBox_Information ul, .messageBox_Warning ul, .messageBox_Failed ul, .messageBox_Help ul { list-style-position: outside; list-style-type: disc; padding-left: 40px; } .messageBox_Information li, .messageBox_Warning li, .messageBox_Failed li, .messageBox_Help li { line-height: 1.5em; } .messageBox_Text { margin-left:50px!important; padding:2px 3px 4px 1px; } .messageBox_Text h3 { color: #5D5D5D; } /* ----------------------------------------- Forms ----------------------------------------- */ table { margin-bottom: 10px; border: none; width: auto; } table.Result { width: 100%; } table th { text-align: left; } table tr, table tr:nth-of-type(2n) { background: transparent; } table tr td { padding: 0.5625em 0.625em; } .PageTop, .PageBottom { margin: 10px 0; width: 100%; border: none;font-size: 12px;} .PageTop td, .PageBottom td { padding: 2px; } .PageTop td.left, .PageBottom td.left { float: left; text-align: left; } .PageTop td.center, .PageBottom td.center { text-align: center; } .PageTop td.right, .PageBottom td.right { float: right; text-align: right; } /* ----------------------------------------- Fields ----------------------------------------- */ .field { display: inline-block; margin: 3px 0; } contenttemplate .field { display: block; } .field .label, .fieldLarge .label, .field label, .fieldLarge label { padding: 0 10px 2px 0; width: 135px; background-color: transparent; color: #333; text-align: left; font-size: 1rem; display: inline-block; white-space: normal; font-weight: normal; float: left; margin: 8px 0 0 0; } .field input[type="text"], .fieldLarge input[type="text"], .field input[type="password"], .fieldLarge input[type="password"], .field input.text, .fieldLarge input.text, .field input.title, .fieldLarge input.title, .field input[type="file"], .fieldLarge input[type="file"] { width: 288px; font-size: 1rem; margin: 0; padding: 0 6px; display: inline-block; } .fieldLarge textarea { width: 288px; height: 80px; } .field select { width: 288px; padding: 5px 1.5rem 5px 5px; display: inline-block; border: 1px solid #ccc; margin: 0; color: rgba(0, 0, 0, 0.75); height: 30px; } .field .radioButton { display: inline-block; margin: 0; width: auto; padding-bottom: 10px; background: none; border: none; margin-top: 6px; } .field .radioButton tbody tr { float: left; } .field .radioButton input[type="radio"] { padding: 0; margin-top: 0; display: inline-block; float: left; margin-right: 5px; } .field .radioButton td { padding: 0; display: inline-block; } .field .radioButton label { width: auto; margin: 0 10px 0 0; float: left; } .field .radioButton tbody tr { float: left; } .field .radioButton input[type="radio"] { padding: 0; margin-top: 0; float: left; margin-right: 5px; } .field .radioButton td { padding: 0; display: inline-block; } .field .radioButton label { width: auto; margin: 0 10px 0 0; float: left; } .website-form-textbox-full-width-label .field .label { width: 62%; margin-bottom: 10px; } .website-form-check-box-single table { width: 100%; } .website-form-check-box-single table tbody tr td { padding: 0; } .website-form-check-box-single input[type="checkbox"] { float: left; text-align: left; margin-right: 10px; padding-top: 2px; } .website-form-check-box-single label { float: left; margin: 0; vertical-align: top; text-align: left; width: 95%; } .fieldLarge .label{ width:100%; display: block; } /* ----------------------------------------- Tables ----------------------------------------- */ table tbody tr:nth-child(2n) { background-color: transparent; } table.coloured-table tbody tr:nth-child(2n) { background-color: #f1f1f1; } /* ----------------------------------------- Field Read Only ----------------------------------------- */ .fieldReadOnly { display: block; float: left; margin: 0; overflow: visible; padding: 3px; width: 100%; } .fieldReadOnly .label { background-color: transparent; color: #5D5D5D; width: 135px; text-align: left; font-size: 12px; white-space: normal; display: inline-block; padding: 0; font-weight: normal; vertical-align: top; } .fieldReadOnly .text { width: 165px; white-space: normal; display: inline-block; } .custom-field-checkbox .checkBoxList { width: auto; } .custom-field-checkbox .checkBoxList td { padding: 5px; } .custom-field-checkbox .checkBoxList label { float: none; margin: 0; padding: 0; vertical-align: top; } .custom-field-checkbox .checkBoxList input[type="checkbox"] { margin: 0 5px 0 0; padding: 0; } .custom-field-textboxwithinternationalcallingcodeprefix prefix { display: block; float: left; margin-right: 5px; margin-top: 2px; width: auto !important; } .custom-field-textboxwithinternationalcallingcodeprefix input { width:253px !important; } .listboxwithprefix prefix { clear:left; display:block; } /* ----------------------------------------- User Registration ----------------------------------------- */ .wizard-user-registration table tbody tr td { padding: 2px; } .wizard-user-registration .wizardTitle { font-weight: bold; font-size: 15px; } .wizard-user-registration .stepCurrent { background-color: #00529B; color: #FFF; } .wizard-user-registration .stepCompleted { background-color: #ccc; } .wizard-user-registration .stepNotCompleted { background-color: #eee; color: #000; } .wizard-user-registration .stepBreak { background-color: #FFF; width: 10px; } .stepNotCompleted, .stepCompleted, .stepCurrent, .stepBreak { width: 25px; height: 25px; padding: 3px 0; font-size: 12px; text-align: center; border-radius: 2px; } .stepNotCompleted a:hover, .stepCompleted a:hover, .stepCurrent a:hover, .stepBreak a:hover { text-decoration: none; color: #F69321; } .wizard-user-registration .left, .wizard-user-registration .right { display: block; margin-bottom: 10px; } .wizard-user-registration .left { text-align: left; } .wizard-user-registration .right { text-align: right; } /* ----------------------------------------- reCAPTCHA ----------------------------------------- */ #recaptcha_widget_div, #recaptcha_table { width: auto !important; } #recaptcha_table #recaptcha_response_field { margin-bottom: 0 !important; } #recaptcha_widget_div #recaptcha_image { height: auto !important; width: auto !important; } #recaptcha_table .recaptcha_image_cell { width: auto !important; } #recaptcha_widget_div #recaptcha_response_field { width: 100% !important; } #recaptcha_logo, #recaptcha_tagline { display: none; } /* ----------------------------------------- Related Pages ----------------------------------------- */ .page-related .page-related-title { font-weight: bold; display: block; margin-bottom: 5px; } .page-related .page-related-item { margin-bottom: 5px; } .page-related-item .page-related-item-synopsis { display: block; color: #333; margin-left: 20px; } /* ----------------------------------------- Related Articles ----------------------------------------- */ .article-related { margin-top: 10px; } .article-related .article-related-title { color: #00529b; font-size: 16px; font-weight: bold; margin-bottom: 5px; display: block; } .article-related span { display: block; } .article-related .article-related-item-title { display: inline-block; } .article-related .article-related-item { margin-bottom: 10px; } /* ----------------------------------------- Related Category ----------------------------------------- */ .category-related .category-related-title { color: #00529b; font-size: 16px; font-weight: bold; margin-bottom: 5px; display: block; } .category-related .category-related-item-synopsis { display: block; } /* ----------------------------------------- Related Media Items ----------------------------------------- */ .media-related .media-related-title { color: #00529b; font-size: 16px; font-weight: bold; margin-bottom: 5px; display: block; } .media-related .media-related-item { display: block; margin-bottom: 5px; } /* ----------------------------------------- Directory Listing ----------------------------------------- */ .directory-alphabet ul { text-align: center; } .directory-alphabet ul li { display: inline-block; padding-right: 10px; } .directory-list .directory-search-item { border-top: 1px solid #ccc; padding: 10px 0 5px 0; margin-bottom: 5px; display: block; line-height: 1.6; } .directory-list .directory-search-item ul { margin-bottom: 0; } .directory-list .directory-search-item br { display: none; } .directory-list .directory-search-item:first-child { border-top: none; } .directory-list .directory-search-item-distance { width: 95%; display: inline-block; } .directory-list .directory-search-item-title { display:inline-block; font-size:17px; line-height:1; margin:2px 0 5px; width: 48%; } .directory-list .directory-search-item-address { display: block; } .directory-list .bpf-member { display: inline-block; width: 48%; vertical-align: top; } .directory-list .directory-search-item-title .title { display: inline-block; width: 50%; } .directory-search-item-description { display: block; font-style: italic; color: #00529b; width: 75%; } .directory-list .directory-search-item-telephone, .directory-list .directory-search-item-fax { display: block; } .directory-list .directory-search-item-contact { font-size:0; padding-top:5px } .directory-list .directory-search-item-contact-left, .directory-list .directory-search-item-contact-right { width: 50%; display: inline-block; font-size: 12px; vertical-align: top; } .directory-category-breadcrumb .directory-category-breadcrumb-spacer { padding: 0 5px; } /* ----------------------------------------- Directory Detail ----------------------------------------- */ .directory-detail-contact-us-form { margin-top: 15px; } .directory-detail .directory-detail-website-profile { display: block; margin-top: 10px; } .directory-detail .directory-detail-address { display: block; margin-bottom: 10px; } .directory-detail-telephone, .directory-detail-fax, .directory-detail-email, .directory-search-item-website, .directory-detail-bpf-member { display: block; line-height: 1.6; } #GoogleMap { width: 100% !important; margin-top: 20px; border: 1px solid #ccc; border-radius: 3px; } #GoogleMap img { max-width: inherit; } #directory-detail-right span { display: block; font-size: 12px; line-height: 1.5em; } #directory-detail-right img { margin-bottom: 10px; } /* ----------------------------------------- Directory Groups ----------------------------------------- */ .group-directories { margin: 10px 0; } .group-directories .group-directories-title { font-weight: bold; display: block; font-size: 17px; border-bottom: 2px solid #144773; color: #144773; margin: 0 0 10px 0; padding: 5px 0; } .group-directories .group-directory { font-size: 12px; line-height: 18px; margin: 5px 0; padding: 10px 0; line-height: 14px; } #main-content .group-directory { width: 25%; display: inline-block; margin-bottom: 15px; vertical-align: top; padding: 0 15px 0 0; } .groups-search-button { margin: 3px 0; } .field.distance { display: block; } /* ----------------------------------------- Directory Categories ----------------------------------------- */ .directory-categories { margin: 10px 0; } .directory-categories .directory-categories-title { font-weight: bold; font-size: 17px; border-bottom: 2px solid #144773; color: #144773; margin: 0 0 10px 0; padding: 5px 0; } .directory-categories .directory-categories-link { width: 50%; display: inline-block; font-size: 14px; padding: 5px 0; vertical-align: top; } .directory-category ul { list-style: none; } /* ----------------------------------------- Categories Search ----------------------------------------- */ .category-search ul { list-style: none; } .category-search .directory-category ul li span { padding: 0 3px; } .category-related{ display: none;} /* ----------------------------------------- Directory Groups ----------------------------------------- */ .directory-groups .directory-groups-title { font-size: 17px; border-bottom: 2px solid #144773; color: #144773; margin: 0 0 10px 0; padding: 5px 0; display: block; } .directory-groups .directory-group-link { font-size: 14px; margin-bottom: 10px; } /* ----------------------------------------- Directory Detail (Right) ----------------------------------------- */ #directory-detail h3 { border-bottom: 2px solid #144773; } .directory-detail-logo { margin-bottom: 10px; } .directory-detail-website-profile, .directory-profile-right { line-height: 1.6; } .directory-detail-address { margin-bottom: 10px; display: block; } .directory-detail-telephone, .directory-detail-fax, .directory-detail-email, .directory-search-item-website, .directory-detail-bpf-member { display: block; line-height: 1.6; word-wrap: break-word;} #directory-social-media { margin: 10px 0; } #directory-social-media a { margin-right: 3px; } #GoogleMap iframe { width: 100%; } .directory-profile-right { margin-top: 20px; } #googlemap { width: 200px !important; height: 250px !important; border: 1px solid #ccc; display: block; } #GoogleMap, .googleMap { border: 1px solid #ccc; } #googlemap img, #GoogleMap img { max-width: none !important; } /* ----------------------------------------- Content Share ----------------------------------------- */ #share a { display: inline-block; margin: 0 0.7em; color: #fff; } #share a:hover { text-decoration: none; } #share a i { padding: 0.5em; font-size: 2em; min-width: 58px; text-align: center; transition: background-color 0.5s ease-out, color 0.2s ease-in; } #share a i:hover{background-color: #fff;} #share .icon-twitter:hover {color: #1da1f2;} #share .icon-linkedin:hover {color: #0077b5;} #share .icon-facebook:hover {color: #3B5998;} #share .icon-twitter { background-color: #1da1f2; border: 1px solid #1da1f2; } #share .icon-linkedin { background-color: #0077b5; border: 1px solid #0077b5; } #share .icon-facebook { background-color: #3B5998; border: 1px solid #3B5998; } /* ----------------------------------------- Event Booking Single/Multiple ----------------------------------------- */ #event-booking-single tr.odd, #event-booking-single tr.even, #event-booking-multiple tr.odd, #event-booking-multiple tr.even { background-color: transparent; } #event-booking-single table.charge-list, #event-booking-multiple table.charge-list, #event-booking-single table.booking-attendees, #event-booking-multiple table.booking-attendees { border: 1px solid #ccc; border-collapse: collapse; } #event-booking-single table.charge-list th, #event-booking-single table.booking-attendees th, #event-booking-multiple table.charge-list th { border-bottom: 1px solid #ccc; background-color: #e1e1e1; } #event-booking-multiple table.booking-attendees th { border-bottom: 1px solid #ccc; background-color: #e1e1e1; } #event-booking-single table.charge-list tbody tr td, #event-booking-multiple table.charge-list tbody tr td { border-top: 1px solid #ccc; line-height: 1.5em; } #event-booking-single table.booking-attendees tbody tr td, #event-booking-multiple table.booking-attendees tbody tr td { border: none; border-bottom: 1px solid #ccc; line-height: 1.5em; } #event-booking-single .charge-list .total, #event-booking-multiple .charge-list .total, #event-booking-single .charge-list .vat, #event-booking-multiple .charge-list .vat, #event-booking-single .charge-list .vat-percent, #event-booking-multiple .charge-list .vat-percent, #event-booking-single .charge-list .net, #event-booking-multiple .charge-list .net { text-align: right; } /* ----------------------------------------- Event Prices Table ----------------------------------------- */ #event-prices-table table.Result { border: 1px solid #ddd; width: 100%; } #event-prices-table table.Result th.title { width: 50%; } #event-prices-table table.Result th.price { width: 25%; } #event-prices-table table.Result th.action { width: 25%; } #event-prices-table table.Result td { vertical-align: middle; padding: 3px; } #event-prices-table table.Result td.action { text-align: right; } #event-prices-table table.Result td.action .field, #event-session-prices-table table.Result td.action .field { width: auto; margin: 0 10px 0 0; float: none; } #event-prices-table table.Result select, #event-session-prices-table table.Result select { margin: 0 auto; } #event-prices-table table.Result input[type="submit"], #event-session-prices-table table.Result input[type="submit"] { float: right; margin-top: 4px; font-size: 9px; } .charge-list, .booking-attendees { border: none; } /* ----------------------------------------- Content Search ----------------------------------------- */ .category-search-list-article [class$="-search-item"] , .category-search-list-page [class$="-search-item"] , #content-search-list [class$="-search-item"] { padding: 1em 0; border-bottom: 1px solid #cccccc; } .category-search-list-article [class$="-search-item"]:last-of-type , .category-search-list-page [class$="-search-item"]:last-of-type , #content-search-list [class$="-search-item"]:last-of-type { border-bottom: 0; } #content-search-list .article-search-item-title, #content-search-list .article-website-search-publish-on { display: block; } #content-list-search input[type="submit"].content-list-search { float: right; margin-top: 4px; margin-right: 2px; } .category-search-list-article .article-search-item-title, .category-search-list-page .page-search-item-title, #content-search-list .article-search-item-title { font-size: 1.5em; line-height: 1.5em; } .category-search-list-article .article-website-search-synopsis, .category-search-list-page .page-website-search-synopsis{ display: block; } #content-search-list .article-website-search-synopsis{} #content-search-list .article-website-search-publish-on, .content-feed-left .content-feed .content-feed-date { font-size: 0.9em; color: #959595; margin-bottom: 5px; } #content-search-list .article-website-search-thumbnail { display: inline-block; width: 27%; vertical-align: top; } #content-search-list .article-website-search-thumbnail img { padding: 0.5em 1em 0.5em 0; } #content-search-list .article-search-item-content { display: inline-block; max-width: 72%; } #content-search-list img[src=""] { display: none; } /* Forum List ****************************************/ .forum-search-button { float: right; margin: 0; } .forum-list .forum-item { margin-bottom: 15px; } .forum-item-title img { display: none; } /* Forum Threads ****************************************/ .forum-threads-thread { border: 1px solid #144773; border-radius: 3px; margin-bottom: 15px; background-color: #ddd; padding-bottom: 5px; } .forum-threads-thread-even .forum-threads-thread-title, .forum-threads-thread-odd .forum-threads-thread-title { /*border: 1px solid #5793CA;*/ border-bottom: 2px solid #f69321; background-color: #144773; padding: 5px 10px; } .forum-threads-thread .forum-threads-thread-title a { color: #FFF; } .forum-threads-thread .forum-threads-thread-title a:hover { text-decoration: underline; color: #f69321; } .forum-threads-thread-even .forum-threads-thread-title img, .forum-threads-thread-odd .forum-threads-thread-title img { display: none; } .forum-threads-thread-message { padding: 10px; margin-bottom: 5px; border-bottom: 1px solid #5793CA; background-color: #FFF; } .forum-threads-thread-postedon, .forum-threads-thread-lastpost, .forum-threads-thread-actions { padding: 0 10px; margin: 0; } .forum-threads-thread-lastpost, .forum-threads-thread-postedon { float: left; width: 100%; } .forum-threads-thread-actions { display: inline; width: 300px; } .forum-threads-thread-actions .forum-threads-seperator { color: #888; } .page-content .forum-threads .publishdate { display: inline; } /* Forum Thread ****************************************/ .forum-thread-add-content { margin-bottom: 10px; } .forum-thread-add-content p { margin-bottom: 0; } .forum-breadcrumb { margin-bottom: 10px; } .forum-actions { color: #A1A1A1; margin-bottom: 10px; } .forum-thread-content { margin-top: 10px; margin-bottom: 10px; } .forum-thread-content p { margin-top: 10px; padding: 0 10px; } /*.forum-thread-content .forum-thread-title { background-color: #5793CA; color: #FFF; padding: 3px 10px; margin-bottom: 10px; font-size: 18px; }*/ .forum-thread-content .forum-thread-message, .forum-thread-content .forum-thread-image { padding: 0 0 10px 0; } .forum-thread-content .forum-thread-image img { border: 1px solid #ccc; } .forum-thread-content .forum-actions-bottom { padding: 5px 0; text-align: right; } .forum-actions-bottom .created-by { display: inline-block; float: left; width: 250px; text-align: left; } .forum-actions-bottom .created-by-name { color: #144773; display: inline-block } /* Add Forum Thread ****************************************/ .forum-thread-form .field label { width: 100px; } .forum-thread-form .fieldLarge label { width: 103px; } .forum-thread-form .field input[type="text"], .forum-thread-form .fieldLarge textarea { width: 530px; } /* Forum Thread Post ****************************************/ .forum-thread-post { background-color: #ddd; border: 1px solid #144773; border-radius: 3px; margin-bottom: 20px; padding-bottom: 5px; } .forum-thread-post-top { padding: 5px 10px; border-bottom: 2px solid #f69321; background-color: #144773; color: #FFF; } .forum-thread-post-top .post-by { float: left; } .forum-thread-post-top .post-on { float: right; } .forum-thread-post-bottom .moderated-by { float: left; padding-left: 10px; } .forum-thread-post .forum-thread-post-message { border-bottom: 1px solid #5793CA; background-color: #FFF; padding: 10px; margin-bottom: 5px; } .forum-thread-post-postedon, .forum-thread-post-actions { float: left; width: 658; padding: 0 0 0 10px; } .forum-thread-post-actions { float: right; padding-right: 10px; } /* Add Forum Thread Post ****************************************/ .forum-thread-post-threadmessage, .forum-thread-post-replyto, .forum-thread-post-form .forum-thread-post-content { padding: 5px; border: 1px solid #ccc; background-color: #eee; margin-bottom: 10px; } /* Join BPF Industry Directory ****************************************/ #join-bpf-industry-directory .category-tree-view table { margin: 0; } #join-bpf-industry-directory .category-tree-view table td { padding: 0; } #join-bpf-industry-directory .category-tree-view table td:first-child { vertical-align: top; } #join-bpf-industry-directory .category-tree-view input[type="checkbox"] { margin: 4px 5px; } @media only screen and (min-width: 420px) { #image-carousel li { width: 33%; margin: 0 0 15px 0; } #footer-menu li { display: inline-block; } } @media only screen and (min-width: 480px) { .directory-postcode-search-form .field.distance .label { width: 135px; } } @media only screen and (min-width: 560px) { #image-carousel li { width: auto; margin: 0 0 15px 15px; } } /* Medium Grid */ @media only screen and (min-width: 640px) { #website-search { margin-top: 10px; } #company-logo { text-align: left; margin-bottom: 0; } #container {background-color: #FFF;} } @media only screen and (min-width: 940px) { /* Fixes directory profile Google map delaying column ordering */ /*#center { float: none; width: 490px; display: inline-block; }*/ #right { vertical-align: top; } #user { text-align: right; margin: 7px 0 0 0; } #user ul { display: block; float: right; } #header { border-top-left-radius: 10px; border-top-right-radius: 10px; } #company-logo img { max-height: 50px; max-width: none; } #contact-address, #contact-us { width: auto; margin-bottom: 0; } #footer #copyright, #footer #address { text-align: left; } #footer-menu ul { text-align: left; float: right; margin-top: 0; } #main-content { min-height: 350px; } .content-feed { margin-bottom: 10px; border-bottom: none; } #content-feed-main { padding: 0 10px; } #recaptcha_widget_div { width: 440px; } #recaptcha_logo, #recaptcha_tagline { display: block; } /* Content Table ****************************************/ .content-page-table table { margin: 10px 0; width: 100% !important; display: block; } .content-page-table td { font-size: 9px; } .content-page-table td { word-break: normal; } /* You Tube Container ****************************************/ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} } /* Chrome image fix ****************************************/ @media screen { table img {max-width: none;} } /* ----------------------------------------- Events List ----------------------------------------- */ #event-list .event-search-item-month { font-size: 24px; border-bottom: 1px solid #ccc; display: block; padding: 5px 0; line-height: 1; color: #5D5D5D; margin-top: 0.5em; } #event-list-by-type .event-search-item, #event-list .event-search-item { padding: 0 0 10px 0; margin: 0.5em 0; line-height: 1.2; font-size: 14px; } #event-list .event-search-item-date-label, #event-list .event-search-item-title-label, #event-list .event-search-item-event-title-label, #event-list .event-detail-item-type-label, #event-list .event-detail-item-categories-label { display: inline-block; width: 30%; font-weight: bold; } #event-list-by-type .event-search-item-title-label, #event-list-by-type .event-search-item-event-title-label, #event-list-by-type .event-detail-item-type-label, #event-list-by-type .event-detail-item-categories-label { display: inline-block; width: 30%; } #event-list .event-search-item-date, #event-list .event-search-item-venue-title, #event-list .event-search-item-type, #event-list .event-search-item-categories { display: inline-block; width: 65%; } #event-list .event-search-item-title, #event-list-by-type .event-search-item-title { width: 100%; font-size: 1.5em; } #event-list .event-search-item-date-label, #event-list .event-search-item-date, #event-list .event-search-item-synopsis, #event-list .event-search-item-title, #event-list .event-detail-item-categories-label, #event-list .event-search-item-categories { padding: 0.5rem 0; } h2.content-category-title, .content-category-item-title h3{font-size: 20px; display:none;} #event-list-by-type .event-search-item-date { display: inline-block;} #event-list-by-type .event-search-item-synopsis {margin-bottom: 5px;} #event-list-by-type .event-search-item { border-bottom: 1px solid #d5d5d5;} #event-list-by-type .event-search-item:last-of-type { border-bottom: none;} #event-list-by-type .event-search-item-date-label{ display: none;} #event-list .event-search-thumbnail { display: inline-block; width: 27%; vertical-align: top; margin: 0.75em; } #event-list .event-search-item-content{ display: inline-block; max-width: 72%; } /* ----------------------------------------- Events List search fields ----------------------------------------- */ #event-list-search-fields, #event-list-search { display: inline-block; margin: 0 0 0.5em 0.5em; } #event-list-search input.button { vertical-align: middle; margin-bottom: 6px; } /* ------------------------------------------------------------------------------------------------------------------------------- OLD MENU.CSS ------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------- Header Menu ----------------------------------------- */ #top-menu .has-dropdown .dropdown-left, #top-menu .has-dropdown .dropdown-right { display: none; } #top-menu.top-bar .title-area, #top-menu.top-bar.expanded .title-area, #top-menu .top-bar-section ul { background-color: transparent;margin: 0;} #top-menu .top-bar-section ul li { display: inline-block; } #top-menu.top-bar.expanded .title-area { background-color: #F69321; } .top-bar .name h1 a:hover { text-decoration: none; } #top-menu.top-bar.expanded .toggle-topbar a:hover span { box-shadow: none; } .top-bar .toggle-topbar a:hover { text-decoration: none; } .top-bar .toggle-topbar.menu-icon:hover span:after { box-shadow: 0 0 0 1px #f69321, 0 7px 0 1px #f69321, 0 14px 0 1px #f69321 } .top-bar.expanded .toggle-topbar.menu-icon:hover span:after { box-shadow: 0 0 0 1px #fff, 0 7px 0 1px #fff, 0 14px 0 1px #fff } .top-bar .toggle-topbar.menu-icon:hover a { color: #F69321; } .top-bar.expanded .menu-icon:hover .top-bar .toggle-topbar a:hover { color: #F69321; } .top-bar.expanded .toggle-topbar a { color: #FFF; } .top-bar.expanded .toggle-topbar a:hover span { box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF; } .top-bar.expanded .toggle-topbar a:hover { color: #FFF; } .top-bar.expanded .top-bar-section ul li > a { background-color: #144773; } .top-bar-section ul li > a { color: #F4EFE7;} .top-bar-section ul li:hover > a { color: #F4EFE7; } .top-bar.expanded .top-bar-section ul li a:hover { background-color: #003768; text-decoration: none; } #top-menu { -webkit-box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); -moz-box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); box-shadow: 0px 4px 8px 0px rgba(170,167,161,0.8); } #top-menu { height: auto; margin-bottom: 0; background: linear-gradient(to right, #5ec6f1 0%,#144773 100%); /*###*/ /*background: #144773;*/ position: absolute; width: 100%; z-index: 1; } @media screen and (min-width: 40rem) { .title-area { display: none; } #top-menu .top-bar-section > div > ul, #top-menu .top-bar-section ul.header_menu { width: 100%; display: inline-block; list-style: outside none; margin: 0; position:relative; } #top-menu .top-bar-section ul > li { line-height: 30px; } #top-menu li.divider { display: none; visibility: hidden; } #top-menu li:hover > a, #top-menu .active > a { background-color: #F4EFE7; color: #144773; border-bottom: 1px solid #ccc; border-top-left-radius: 3px; border-top-right-radius: 3px; } #top-menu li.active a:first-child:after { border-top-color: #144773; } #top-menu .active > a { border-bottom: 1px solid transparent; } #top-menu li:first-child > a { border-top-left-radius: 0; } #top-menu li:last-child > a { border-top-right-radius: 0; } #top-menu li > a { line-height: 30px; } #top-menu ul li ul li > a{ padding: 0;} #top-menu li > a:hover { text-decoration: none; } /* TODO */ /*#top-menu .active > a { background-color: #F69321; color: #144773; }*/ #top-menu .has-dropdown { position: static; } #top-menu .has-dropdown a:first-child:after { display: inline-block; margin: 0 0 -3px 10px; position: static; border-style: solid; } #top-menu .has-dropdown:hover a:first-child:after { border-top-color: #144773; } #top-menu .has-dropdown:last-child:hover { border-right: #144773; background-color: #F4EFE7; } #top-menu .has-dropdown .top-bar-dropdown { position: relative; } #top-menu .has-dropdown .dropdown { visibility: hidden; display: none; } #top-menu .has-dropdown .dropdown-left { position: absolute; left: -1px; width: 1002px; margin: 0 auto; z-index: 10000; top: 31px; } #top-menu .has-dropdown .dropdown-right { position: absolute; width: 1002px; left: -1px; margin: 0 auto; z-index: 100; top: 31px; } #top-menu .has-dropdown .dropdown-left a:hover, #top-menu .has-dropdown .dropdown-right a:hover { text-decoration: underline; } #top-menu .has-dropdown .dropdown-container { background-color: #F4EFE7; border: 1px solid #ccc; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-top: 2px; padding: 15px 0; float: left; width: 100%; } .no-js #top-menu .has-dropdown:hover .dropdown-left, .no-js #top-menu .has-dropdown:hover .dropdown-right, .lt-ie9 #top-menu .has-dropdown:hover .dropdown-left, .lt-ie9 #top-menu .has-dropdown:hover .dropdown-right { display: block; } #top-menu .has-dropdown li a { background-color: #F4EFE7; width: auto; display: block; } #top-menu .has-dropdown .dropdown-container li, #top-menu .has-dropdown .dropdown-container li a { line-height: 24px; color: #000; border-bottom: none; } #top-menu .has-dropdown .dropdown-container li a:hover { background-color: transparent; color: #F69321; } #top-menu .has-dropdown .dropdown-container li:hover { background-color: transparent; color: #FFF; } #top-menu .has-dropdown .dropdown-container li a:hover { color: #F69321; } #top-menu .has-dropdown .dropdown-container .dropdown-header { color: #FFF; margin: 0 15px 10px 15px; border-bottom: 1px dashed #ccc; display: none; /* TODO: Remove */ } #top-menu .has-dropdown .container-left { float: left; } #top-menu .has-dropdown .container-left li { margin: 0; /*min-width: 235px;*/ width: 250px; padding-bottom: 10px; } #top-menu .has-dropdown .container-right { width: 30%; float: right; } #top-menu .has-dropdown .container-right li { width: 100%; margin: 0; } #top-menu .has-dropdown .container-right img { padding-right: 10px; } #top-menu .has-dropdown .container-full-width { width: 100%; } #top-menu .has-dropdown .container-left li { background: none; } } @media screen and (min-width: 64rem) { #top-menu li > a { line-height: 30px; /*padding: 0.86em 1.4em;*/ padding: 0.86em 1.7em; } } @media screen and (max-width: 64rem) { .top-bar-section > div ul > li > a { padding: 0.86em 0.8em; } } @media screen and (max-width: 55rem) { .top-bar-section > div ul > li > a { padding: 0.86em 0.4em; } } @media screen and (max-width: 52rem) { .top-bar-section > div ul > li > a { padding: 0.86em 0.25em; } } /* ----------------------------------------- Sticky Top Menu / side menu ----------------------------------------- */ @media screen and (min-width: 40rem) { #top-menu.fixed { position: fixed; top: 0; left: 0; width: 100%; } } #right.fixed { position: fixed; top: 5em; } #right.bottom { position: absolute; bottom: 0px; } /* ----------------------------------------- Main Menu ----------------------------------------- */ /* TODO: Remove */ #main-menu .menu-iamge, #sub-main-menu .menu-iamge { margin-bottom: 15px; text-align: center; } #main-menu .menu-iamge img, #sub-main-menu .menu-iamge img { max-height: 100px; padding: 0 5px; } #main-menu .menu-image, #sub-main-menu .menu-image { margin-bottom: 15px; text-align: center; } #main-menu .menu-image img, #sub-main-menu .menu-image img { max-height: 100px; padding: 0 5px; } #main-menu ul, #main-menu ul li ul, #sub-main-menu ul, #sub-main-menu ul li ul { list-style: none; margin: 0; padding: 0; border-radius: 0; } #main-menu ul li ul{ -webkit-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,0.25); -moz-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,0.25); box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,0.25); } #main-menu ul li ul, #sub-main-menu ul li ul { border: none; } #main-menu ul, #sub-main-menu ul { margin: 10px 0; border-radius: 3px; border: 2px solid #cccccc; } #main-menu ul li, #sub-main-menu ul li { margin: 0; background-color: transparent; padding: 0; } #main-menu ul li:first-child, #main-menu ul li:first-child:hover, #main-menu ul li ul li:first-child, #main-menu ul li ul li:first-child:hover, #sub-main-menu ul li:first-child, #sub-main-menu ul li:first-child:hover, #sub-main-menu ul li ul li:first-child, #sub-main-menu ul li ul li:first-child:hover { border-top: none; } /*#main-menu ul li.menu-list-item-parent { background-color: #F4EFE7; background-image: url('../img/caret-down-2.gif'); background-repeat: no-repeat; background-position: 97% 12px; } /*#main-menu ul li.menu-list-item-parent:hover { background-image: url('../img/caret-down-2.gif'); }*/ #main-menu ul li.menu-list-item-parent-selected, #sub-main-menu ul li.menu-list-item-parent-selected { background-image: url('../img/caret-down-2.gif'); background-repeat: no-repeat; background-position: 97% 12px; } #main-menu ul > li:hover > a, #sub-main-menu ul > li:hover > a { color: #144773; } #main-menu ul li a, #sub-main-menu ul li a { color: #144773; line-height: 22px; padding: 8px 15px; display: block; white-space: normal; } #main-menu ul li.menu-list-item-parent-selected, #sub-main-menu ul li.menu-list-item-parent-selected { background-color: #144773; } /*#main-menu ul li.menu-list-item-parent { background-color: #144773; }*/ /*#main-menu ul li a.menu-link-item-parent-selected, #main-menu ul li a.menu-link-item-parent-anchor { color: #FFF; font-weight: bold; }*/ /*#main-menu ul li ul.menu-list-item-parent-selected-children { display: block; }*/ #main-menu .dropdown, #sub-main-menu .dropdown { display: none; } #main-menu .dropdown li, #sub-main-menu .dropdown li { background-color: #E1E1E1; } #main-menu .menu-list-item-parent-selected .dropdown, #sub-main-menu .menu-list-item-parent-selected .dropdown { display: block; } #main-menu ul li.menu-list-item-parent-selected a.menu-link-item-parent-selected, #sub-main-menu ul li.menu-list-item-parent-selected a.menu-link-item-parent-selected { color: #666; } #main-menu ul li ul li a, #sub-main-menu ul li ul li a { margin: 0 0 0 25px; padding-right: 5px; } #main-menu ul li ul li:hover a, #sub-main-menu ul li ul li:hover a { color: #144773; } /*#main-menu .menu-list-item-parent:hover ul.menu-list-item-parent-selected-children { display: block; } #main-menu .has-dropdown:hover .dropdown { display: block; }*/ #main-menu .menu-caption { display: none; } .menu-caption { margin-bottom: 10px; padding: 5px 0; font-size: 18px; color: #144773; border-bottom: 2px solid #144773; font-weight: bold; } @media screen and (min-width: 58.75em) { #main-menu ul, #sub-main-menu ul { margin-top: 0; } #main-menu ul li.menu-list-item-parent, #main-menu ul li.menu-list-item-parent-selected, #sub-main-menu ul li.menu-list-item-parent, #main-menu ul li.menu-list-item-parent-selected { background-position: 95% 12px; } } /* ------------------------------------------------------------------------------------------------------------------------------- PLASTIPEDIA STYLES ------------------------------------------------------------------------------------------------------------------------------- */ ul#plastipedia-grid { margin-top: 10px; margin-bottom: 10px; margin-left: -10px; } #plastipedia-grid > li { padding: 5px 10px; } #plastipedia-grid .panel { font-size: 12px; border-radius: 3px; /*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);*/ margin: 0; background-color: #FFF; padding: 0 20px; border: 1px solid #FFF; } #plastipedia-grid li a:hover { text-decoration: none; } #plastipedia-grid .panel:hover { border: 1px solid #e1e1e1; background-color: #F9F9F9; } #plastipedia-grid .panel:hover h5 { } #plastipedia-grid .panel p { font-size: 11px; min-height: 75px; } #plastipedia-grid .panel img { border-radius: 3px; margin-bottom: 5px; } #plastipedia-grid .panel h5 { border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 10px 10px 5px 0; margin-top: 0; font-size: 16px; color: #00529B; border-bottom: 2px solid #F69321; } #plastipedia-grid .panel h5:hover { color: #F69321; } #plastipedia-grid .panel p { padding: 0; } #plastipedia-grid .plastipedia { text-align: center; } #plastipedia-grid .plastipedia h5, #plastipedia-grid .plastipedia p { text-align: left; min-height: 33px; } /* ------------------------------------------------------------------------------------------------------------------------------- PLASTICS AND PACKAGING STYLES ------------------------------------------------------------------------------------------------------------------------------- */ /* Style Colours: #DBEFF6 - Light blue #1d1a31 - Dark gunmetal, black substitute */ h2{color:#F79321;} h3{color:#50A6C8;} h4{color:#545454;} /*h2{color:#F79321; font-size:24px;} h3{color:#50A6C8; font-size:16px;} h4{color:#545454; font-size:16px;}*/ body[id^="ppg"], html { background-color: #fff; } body[id^="ppg"] #page-content a { color: #50A6C8; } body[id^="ppg"] #page-content a:hover { text-decoration: none; color: #436d7e; } body[id^="ppg"] p{ color: #838382; } body[id^="ppg"] #hard-head { box-shadow: none; margin-top: 0; } body[id^="ppg"] #container{ box-shadow: none; min-width: 0; width: 100% } body[id^="ppg"] #header { background-color: #fff; } body[id^="ppg"] .top-bar-section {border-top: 0;} body[id^="ppg"] #Header_DropDownMenu, body[id^="ppg"] #top-menu{ border-top: 0; background-color: #DBEFF6; } body[id^="ppg"] #top-menu.top-bar .title-area { background-color: #DBEFF6; } body[id^="ppg"] #top-menu.top-bar.expanded .title-area { background-color: #436d7e; } body[id^="ppg"] #header #company-logo img { min-width: 0; } body[id^="ppg"] #top-menu .top-bar-section li > a { background-color: #DBEFF6 ; border-bottom: #DBEFF6 ; color: #70B6D2; } body[id^="ppg"] #top-menu li > a:hover { color: #436d7e; } body[id^="ppg"] .top-bar .toggle-topbar.menu-icon:hover span::after { box-shadow: 0 0 0 1px #436d7e, 0 7px 0 1px #436d7e, 0 14px 0 1px #436d7e; } body[id^="ppg"] #top-menu .top-bar-section ul.header_menu { background-color: #DBEFF6; display: block; margin-left: auto; margin-right: auto; } body[id^="ppg"] #Header_DropDownMenu { background-color: #DBEFF6; } body[id^="ppg"] #top-menu .top-bar-section ul li { float: none; display: inline-block; } /*body[id^="ppg"] #top-menu .has-dropdown > ul { position: relative !important; display: none; } body[id^="ppg"] #top-menu .has-dropdown:hover > ul { display: block; }*/ body[id^="ppg"] #top-menu .top-bar-section ul li ul.dropdown li > a { color: #fff; } body[id^="ppg"] #page-content #main-heading h1 { border-bottom: 0; color: #70B6D2; } #ppg-home #main-heading h1 { padding-top: 10px; } body[id^="ppg"] #main-content { min-height: 0; width:100% } #page-content ul[class*="block-grid"] { margin-left: 0; } body[id^="ppg"] #content-centre h3, body[id^="ppg"] .content-block h3 { text-align: center; background-color: #DBEFF6; color: #50A6C8; margin-top: 0; padding-top: 0.2em; } body[id^="ppg"] #content-buttons h3 { background-color: #DBEFF6; padding: 0.3em 2em; } #ppg-home h4 { font-size: 1.7rem; font-weight: normal; } /*body[id^="ppg"] #top-menu li.menu-icon a:hover, body[id^="ppg"] #top-menu li.menu-icon a:hover span::after{ color: #fff; }*/ body[id^="ppg"] #main-content ul { list-style: square; } body[id^="ppg"] #main-content .content-feeds ul{ list-style: outside none;} body[id^="ppg"] #main-content ul ul li:before { color: orange; } .content-feed .content-feed-heading{ font-size: 24px;border-bottom: none;} #content-feed-right .content-feeds .content-feed-synopsis { font-size: 12px; color: #555; } #content-feed-right .content-feeds .content-feed-title { font-size: 16px; } /* ----------------------------------------- Media Queries -Responsive ----------------------------------------- */ /*Foundation large + screen breakpoint, large only*/ /*@media screen and (min-width: 64em) { body[id^="ppg"] #top-menu ul li ul.dropdown li:hover > a { color: rgb(241,131,9) } body[id^="ppg"] #top-menu .top-bar-section ul li.back { display: none; } body[id^="ppg"] .top-bar-section li.has-dropdown:hover > ul.dropdown { min-width: 0; width: 400px; left: 0; } body[id^="ppg"] #top-menu .top-bar-section ul li { position: relative; } body[id^="ppg"] #page-content #main-heading h1 { font-size: 50px; } body[id^="ppg"] #top-menu .top-bar-section li > a { padding: 0 16px !important ; font-size: 1.4em; border-bottom: none; } }*/ /*Foundation medium - large screen breakpoint, medium down*/ @media screen and (max-width: 64em) { body[id^="ppg"] #top-menu li.toggle-topbar a { color: #436d7e; } #ppg-home #main-heading h1 { padding-top: 0; } .top-bar-section li.back { display: inline-block; } body[id^="ppg"] #page-content #main-heading h1 { font-size: 36px; padding-top: 55px; } } /*Menu toggle icon appears*/ @media screen and (max-width: 767px) { body[id^="ppg"] #top-menu .top-bar-section ul.dropdown { background-color: #DBEFF6; } .top-bar-section .dropdown li.back h5 a { color: #70B6D2; } body[id^="ppg"] .top-bar-section .dropdown li.back:hover h5 a { color: #436d7e; background-color: transparent; } .top-bar-section .dropdown li.parent-link { font-size: 1rem; } } /*Foundation - small up */ @media screen and (min-width: 40em) { /*Fix the medium screen mobile menu*/ .name { font-size: 1.5rem;} #Header_DropDownMenu { display: inline-block; } /*#Header_DropDownMenu.menu-for-small { display: none; }*/ } /*Foundation small - medium screen breakpoint, small only*/ @media screen and (max-width: 40em) { body[id^="ppg"] #page-content #main-heading h1 { padding-top: 0; } } /* ------------------------------------------------------------------------------------------------------------------------------- POLYMER ZONE STYLES ------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------- Global styles ----------------------------------------- */ div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td, input, .button{ font-family: 'Open Sans', Helvetica, Arial, sans-serif; } h6,h5,h4,h3,h2,h1 { font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #144773; } #page-content #main-content h1 { font-size: 3em; margin-bottom: 0.5em; } h2 { font-size: 2em; } a { color: #144773; transition: color 0.5s ease-out; } .fa{ font-family: FontAwesome;} .inline-list { display: inline-block; margin-left: 0; list-style: outside none; } .inline-list li { display: inline; } #container #header { border-radius: 0;padding: 1em 0;} /* ----------------------------------------- Colouring the header/menu area ----------------------------------------- */ #polymerZoneContent #header, #polymerzone-resources #header, #polymerzone-home-page #header,#polymerzone-wide #header {background-color: #fff} #top-menu .dropdown-container li a{ background-color: transparent; border: none; } #top-menu .top-bar-section li:hover > a { border-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; } #top-menu .dropdown-container li a:hover{ text-decoration: none; } #polymerZoneContent #main-content h1{ color: #666;border-bottom: 2px dotted #ccc;} /* ----------------------------------------- Resizing ----------------------------------------- */ #polymerZoneContent #main-content, #polymerzone-home-page #main-content { min-height: 0; } #polymerzone-home-page #main-content{ padding: 2em;} #polymerzone-home-page #page-content{ padding-bottom: 2em;} #container{ box-shadow: none; min-width: 0; width: 100% } /* -------------------------------------------------------------------------- Main Menu for use with "Vertical Drop Down" menu style -------------------------------------------------------------------------- */ #top-menu {border-top: none;} @media only screen and (min-width: 40rem) { #top-menu .dropdown { clip: auto; z-index: 1; } #top-menu .top-bar-section .has-dropdown .dropdown li { background-color: transparent; vertical-align: top; padding: 0.3em 1em; display: block; /*Removed from full width menu width: 25%; padding: 1em;*/ } #top-menu .top-bar-section .has-dropdown .dropdown li a { background-color: transparent; /*color: #00529B;*/ border: none; } #top-menu .has-dropdown:hover > ul { visibility: visible; display: block; background-color: #5ec6f1; position: absolute; top: 2.65em; margin:0; -webkit-box-shadow: 0px 6px 8px 0px rgba(170,167,161,0.8); -moz-box-shadow: 0px 6px 8px 0px rgba(170,167,161,0.8); box-shadow: 0px 6px 8px 0px rgba(170,167,161,0.8); /*Removed from full width menu*/ /*left: 0; width:100%;*/ } /* Makes everything nicer on full width menus ### #top-menu .has-dropdown:hover:last-of-type > ul { right: 0; }*/ #top-menu .top-bar-section .has-dropdown .dropdown li.js { display: none;} } /* ----------------------------------------- Colouring the 3 home page boxes ----------------------------------------- */ #polymerzone-home-page #content-left, #polymerzone-home-page #content-centre, #polymerzone-home-page #content-right { padding: 1em; min-height: 460px; color: #fff; margin-bottom: 1.5em; } #polymerzone-home-page h4 { text-align: center; color: #fff; margin-bottom: 1.5rem; } #polymerzone-home-page .top-content h3{ color: #5D5D5D;text-align: center;font-size: 2rem;} #polymerzone-home-page .top-content h4{ color: #5D5D5D;text-align: left;} #polymerzone-home-page #content-left{background-color: #1BA5DE} #polymerzone-home-page #content-centre {background-color: #F6A145} #polymerzone-home-page #content-right {background-color: #7EB848 } .button-capsule { text-align: center; background-color: transparent; border: 2px solid #fff; color: #fff; border-radius: 100px; font-size: 1.2em; padding: 0.2em 2em; } .button-capsule:hover { background-color: #ccc; cursor: pointer; text-decoration: none; } /* -------------------------------------------------------- Colouring the left hand main menu area -------------------------------------------------------- */ #main-menu #Main_DropDownMenu .main_menu { border: 2px solid #cccccc; } #main-menu #Main_DropDownMenu ul li { background-color: transparent; border-top: none; } #main-menu ul li a { color: #5D5D5D; } #main-menu #Main_DropDownMenu ul li:hover > a{color: #666; text-decoration: none;} #polymerZoneContent #main-menu .menu-image { margin: 1em 0; } #main-menu ul li a.menu-link-item-parent-selected { background-color: #ccc; } .menu-list-item-parent-selected-children { background-color: #eee; } /* -------------------------------------------------------- Article template specific -------------------------------------------------------- */ #Article-template #page-content .contents > .row{max-width: 62em;margin-left: 0;} #Article-template .content-share-title {display: none;} #Article-template #share a {margin:0 0.7em 0 0;} #Article-template #share { margin-bottom: 2em;} #Article-template #share a i { padding: 3px; font-size: 1.5em; min-width: 100px; } div.article-date {margin-bottom: 1em; color: #144773; } /* -------------------------------------------------------- Content template specific for use with the left hand content area -------------------------------------------------------- */ .bordered { border: 2px solid #CCC; border-radius: 3px; padding: 10px; margin: 1em 0; } .lesson {border-bottom: 2px solid #CCC;} .lesson h3 {font-size: 1.6rem; } .lesson:last-of-type{ border-bottom: none;} /* -------------------------------------------------------- Hard coded header area -------------------------------------------------------- */ #hard-head { background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); border-bottom: 1px solid #b7b7b7; min-height: 3.75em; padding-top: 4px; } #hard-head a:hover { text-decoration: none; } #hard-head img {max-height: 2.5em;margin: 0.26em 1em;} #hard-head .logo{ border-right: 1px solid #b7b7b7;} #hard-head #search {margin: 0.5em 0;} #hardheadmenu{ padding-left: 0; padding-right: 0; margin: 0.7em 0; } #hard-head ul { list-style: none; list-style-type: none; margin: auto 0; display: inline-flex; float: right; } #hard-head ul li { display: inline; /*font-weight:bold*/ } #hard-head ul li a { padding: 0.8em 3em ; font-family: 'Open Sans'; } @media only screen and (max-width: 75em) { #hard-head ul li a { padding: 1.3em 3em; } } #hard-head ul li:last-child { border-right: none; } #hard-head .icon #toggle{ visibility: hidden; display: none; padding: 0; border: none; } #hard-head .icon ul.flat {visibility: visible;height: inherit;} #hard-head .icon {border: none;padding: 0;} /*Clearfix needed to make it full width*/ #hard-head::after { content:""; display:block; clear:both; } #LoginUser { margin: 0.7em auto; text-align: center; } #LoginUser a { color: #e50046; } #register-heading { margin-top: 1em; } /* -------------------------------------------------------- Mobile Hard coded header area settings -------------------------------------------------------- */ @media only screen and (max-width: 64em) { #hard-head ul li ul li a {border: none;padding: 0;} #hard-head .icon .expanded > li{ min-width: 20%;} #hard-head ul li .expanded{ position: absolute; left: -3%; top: 3.8em; width: 103%; border-top: 1px solid #b7b7b7; } #hard-head ul li ul li { visibility: hidden; position: relative; min-width: 33%; z-index: 1; border: none; } #hard-head .icon #toggle{ visibility: visible; display: inline; padding: 1.3em 1.4em 1.4em; } #hard-head .icon .flat{ height: inherit;} #hard-head .icon .expanded >li { visibility: visible; display: inline-block; padding: 1em; text-align: center; } #hard-head .icon .expanded > li{ min-width: 32%;} #toggle .expanded li a{ padding: 0;} #hard-head .icon .flat >li {visibility:hidden;display: none;} #hardheadmenu{ padding-left: 0;padding-right: 0;} #hard-head ul { float: none; text-align: center; display: block; } } @media only screen and (min-width: 100px) { #hard-head ul {height: inherit;} } @media only screen and (max-width: 620px) { #hard-head ul li .expanded { left: 0%; width: 100%; } } /* -------------------------------------------- Search box -------------------------------------------- */ #search input[type="text"], .newsletter-subscribe input[type="text"]{ margin: 0; padding: 0 1em; } .newsletter-subscribe input[type="text"] { height: 2.4375rem; } #search-button { height: 2rem; margin: 0; line-height: 1.833rem; font-size: 1em; width: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; background-color: #fff; border: 1px solid #cacaca; border-left: 0; padding-right: 5px; background: transparent; } #search-button:hover { background-color: #fff; border: 1px solid #cacaca; border-left: 0; color: #000000; } #search input { box-shadow: none; border-right: 0; border-top-left-radius: 12px; border-bottom-left-radius: 12px; height: 2rem; } #search input:focus { border-color: #cacaca; } /* -------------------------------------------- User controlled Header menu -------------------------------------------- */ /*#header #company-logo img { min-width: 290px; max-height: 53px; }*/ .social-media-icons{ margin-top: 17px;} .social-media-icons img{ float: right; height: 20px; padding-right: 1em; } /* -------------------------------------------- Resources Template specific -------------------------------------------- */ #page-content #resources-grid{ margin-left: 0; margin-right: 0;} #resources-grid div { padding: 1em 1.5em;} #resources-grid > div { min-height: 13em; } #resources-grid > div:hover { -webkit-box-shadow: inset 0px 0px 20px 0px rgba(204,204,204,1); -moz-box-shadow: inset 0px 0px 20px 0px rgba(204,204,204,1); box-shadow: inset 0px 0px 20px 0px rgba(204,204,204,1); } #resources-grid a{color: #5D5D5D} #resources-grid a:hover{text-decoration: none;} #polymerzone-resources #main-content{ min-height: 0;} #polymerzone-resources #main-content h2 { margin-bottom: 0; } #resources-grid .resource-head-row img { display: inline; } #resources-grid .resource-head-row h5 { display: inline; margin-left: 0.5em; } #resources-grid div:nth-child(1) .resource-head-row h5{ border-bottom: 3px #F6A145 solid; } #resources-grid div:nth-child(2) .resource-head-row h5{ border-bottom: 3px #1BA5DE solid; } #resources-grid div:nth-child(3) .resource-head-row h5{ border-bottom: 3px #7EB848 solid; } #resources-grid div:nth-child(4) .resource-head-row h5{ border-bottom: 3px #E9DA1C solid; } #resources-grid div:nth-child(5) .resource-head-row h5{ border-bottom: 3px #E74C3C solid; } #resources-grid div:nth-child(6) .resource-head-row h5{ border-bottom: 3px #9B59B6 solid; } #resources-grid div:nth-child(7) .resource-head-row h5{ border-bottom: 3px #E74C3C solid; } #resources-grid div:nth-child(8) .resource-head-row h5{ border-bottom: 3px #7EB848 solid; } #resources-grid div:nth-child(9) .resource-head-row h5{ border-bottom: 3px #1BA5DE solid; } #resources-grid p, #resources-grid .resource-head-row { padding: 0.5em; } @media only screen and (max-width: 500px) { #resources-grid div { padding: 1em 0.3em;} } /* -------------------------------------------- Redesigned Template specific -------------------------------------------- */ #redesigned-home-page .top-bar-section li > a { background-color: #144773; border-bottom: 1px solid #dddddd; } body[id^="polymerzone"] #top-menu{ border-top: 2px solid orange;} body[id^="polymerzone"] #top-menu, body[id^="polymerzone"] #top-menu .title-area {background: #59A4D5; } body[id^="ppg"] #top-menu, [id^="ppg"] #top-menu .title-area {background: #DBEFF6; } body[id^="ppg"] #top-menu .top-bar-section li > a { background-color: #DBEFF6; color: #70B6D2; } #redesigned-home-page #top-menu {background-color: #144773;} /*#redesigned-home-page #page-content{ margin-top: 2em;}*/ #redesigned-home-page #top-menu .top-bar-section > div > ul {border-bottom: none;} /* -------------------------------------------- Redesigned Dashboard specific -------------------------------------------- */ #dashboard #top-menu h5 { color: #fff; text-align: center; margin: .5rem 0; line-height: 1rem; } #dashboard .field { display: block; } #dashboard .field label { float: none; } #dashboard .field input { display: inline-block; } /* ----------------------------------------- Footer Area ----------------------------------------- */ #contact-address {margin-right: 7%; width:100%} #contact-us{ width: 100%;} #contact-us img { padding-right: 0.7em; height:18px} #contact-us ul { list-style: outside none;margin: 0;} #contact-us ul li { display: block;} #contact-us ul li ul li {display: inline;} #footer .trimmed{ padding-right: 0.1em;} /* -------------------------------------------- Directory Home Page -------------------------------------------- */ .bpf-groups.panel, .panel { border-radius: 3px; background-color: #FFF; font-size: 14px; padding: 10px; border: 1px solid #144773; margin-bottom: 1.66667rem; } #page-content .panel ul { list-style: none; margin-left: 0; } .panel li { padding: 0.5em 0; } .panel .field select { width: 100%; height: 2.4375rem; } .panel .field { margin-top: 0; } /* -------------------------------------------- BPF Energy Template specific -------------------------------------------- */ #energy-wide #header {background-color: #fff;} #energy-wide #top-menu, #energy-wide #top-menu .title-area {background: #9ec24d; } #energy-wide #top-menu li:hover > a{ color: #1d1d1d;} #energy-wide .top-bar .toggle-topbar.menu-icon:hover a{ color: #000;} #energy-wide .expanded .toggle-topbar.menu-icon:hover a { color: #fff;} #energy-wide #top-menu.top-bar.expanded .title-area { background-color: #000;color: #fff;} #energy-wide #top-menu li > a{ border-bottom: none;} #energy-wide .top-bar .toggle-topbar.menu-icon:hover span::after{box-shadow:0 0 0 1px #000,0 7px 0 1px #000,0 14px 0 1px #000} #energy-wide .expanded .toggle-topbar.menu-icon:hover span::after{box-shadow:0 0 0 1px #fff,0 7px 0 1px #fff,0 14px 0 1px #fff} #energy-wide #top-menu li a{font-weight:400} #energy-wide #top-menu .top-bar-section li > a{ border-bottom: 1px solid #9ec24d; background-color: transparent; } #energy-wide #top-menu .top-bar-section ul li ul li a[class^="menu-link-item"]{ background-color: transparent; border-bottom: none; color:#555; } #energy-wide #top-menu { border-top: 2px solid #1d1d1d; } #content-left.bordered {padding:1em;margin-bottom:1.5em;} /* -------------------------------------------------------- Utility- Back to top - Thanks to CodyHouse -------------------------------------------------------- */ .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); overflow: hidden; color: #fff; text-indent: 0.15em; font-size: 1.75em; border-radius: 10px; white-space: nowrap; background: #144773; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } /*Microsite colours*/ #energy-wide .cd-top {background: #9ec24d;} body[id^="polymerzone"] .cd-top {background: #59A4D5;} body[id^="ppg"] .cd-top {background: #DBEFF6;} .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } .no-touch .cd-top:hover { opacity: 1; } .cd-top:hover { color: #5ec6f1 ; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; text-indent: 0.18em; font-size: 2.5em; } } /* -------------------------------------------------------- Recycling page - buttons -------------------------------------------------------- */ .image-block { /*margin: 2em 1em;*/ padding-bottom: 0.25em; margin-bottom: 2em; -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); transition: 0.5s background-color ease; } .image-block a{ color: #fff; text-align: center; } .image-block:hover .image-block-img{ filter: contrast(80%); transition: 0.5s filter ease; } .image-block-img { filter: contrast(100%); display: block; margin-left: auto; margin-right: auto; } .image-block-heading{ color: #fff; text-align: center; margin: 0.5em; } .pathway-item-blue{ background-color: #144773; } .pathway-item-blue:hover{ background-color: #106385; } @media (max-width: 64em){ .image-block-heading{ border: none; margin: 0.5em 1em; } } @media (max-width: 40em){ .image-block-heading{ border: none; margin: 0.5em 3em; } .img-holder img{ max-width: 110px; } } .img-holder{ padding: 65px 15px 10px 0; text-align: center; } /* -------------------------------------------------------- Utility- Accordion -------------------------------------------------------- */ .js #main-content .expand-heading { margin: 15px 0 0 0; border: 1px solid #dbdbdb; border-radius: 5px; padding: 8px 10px; } .js #main-content .expand-heading.clicked { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } .js #main-content .expand-heading:hover { cursor: pointer; } .js #main-content .expand-heading:hover, .js .expand-heading.clicked { background-color: #f5f5f5; } .js #main-content .expand-heading:after { content: "+"; float: right; } .js #main-content .expand-heading.clicked:after { content: "-"; } .js #main-content .expand { display: none; border: 1px solid #dbdbdb; border-top: none; border-radius: 5px; padding: 0 10px 8px; } /* -------------------------------------------------------- Utility- Large Buttons -------------------------------------------------------- */ .large-button { border-radius: 20px; color: #ccc; background-color: #144773; font-size: 20px; padding: 0.5em; text-align: center; } /* -------------------------------------------------------- Small screen Mobile Hard coded header area settings -------------------------------------------------------- */ @media only screen and (max-width: 560px) { #hard-head .icon #toggle, #hard-head ul li a { padding: 1.4em 0.3em; } #hard-head img {margin: 0.5em 0 0;} #header #company-logo{ padding-left: 0.625em;padding-right: 0;} #header #company-logo img {min-width: 0;} #contact-address {width: 100%} #search-div { padding-left: 0.3em; padding-right: 0.3em; } .social-media-icons{ margin-top: 10px;} .social-media-icons img { padding-right:0.5em} #footer div {padding-left: 0.3em;padding-right: 0.3em;} } @media only screen and (max-width: 940px) { #energy-wide #top-menu .top-bar-section ul li ul li a[class^="menu-link-item"] { color: #ffffff; background-color: #9ec24d; } #energy-wide #top-menu .top-bar-section ul li, #energy-wide .top-bar.expanded .top-bar-section ul li a:hover { background-color: #9ec24d; } #energy-wide #top-menu{ border-top: 2px solid #000;} #energy-wide #Header_DropDownMenu{ border-top: none;} } /* Animated bar ----------------------------------------- */ .title-area { display: none; margin-top: 1em; } #bars { display: inline-block; cursor: pointer; padding: 0 1em; float: right; } .name { display: inline-block; margin-top: 4px; color: #fff; } .title-area #bars div { width: 35px; height: 5px; background-color: #fff;/*#144773;*/ margin: 6px 0; transition: 0.4s; } /* Rotate first bar */ .change .bar-1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } /* Fade out the second bar */ .change .bar-2 { opacity: 0; } /* Rotate last bar */ .change .bar-3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } /*------------------------------------------------ Media Queries for responsive design ------------------------------------------------*/ /*Foundation large + screen breakpoint, large only*/ @media screen and (min-width: 40em) { .top-bar-section > div > ul li a i, .top-bar-section > div > ul li.js:first-of-type { display: none; } } /*Foundation medium - large screen breakpoint, medium only*/ @media screen and (max-width: 40em) { #home-page #page-content { padding: 54px 0; } #top-menu{ background-color: #144773;} .name img{ height: 39px; width: auto; } body[id^=ppg] .name{ color: #144773; } body[id^=ppg] #bars div { background-color: #144773; } .title-area {display: block;} .top-bar-section { display: none; } .top-bar-section.visible { display: block; padding-top: 0.5em;} .top-bar-section > div > ul li ul { display: none;} .top-bar-section > div > ul.visible { display: block;} .top-bar-section > div > ul li:hover > ul {display: none;} .top-bar-section > div > ul li { width: 100%; display: block; float: none; } .top-bar-section > div > ul { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); transition: transform 0.3s ease-in-out; } .top-bar-section > div > ul li.clicked > ul { display: block; position: absolute; left: 103%; width: 100%; top: 0; height: auto; clip: auto; overflow: visible; } .top-bar-section > div > ul.left { position: relative; width: 100%; -moz-transform: translateX(-103%); -ms-transform: translateX(-103%); -webkit-transform: translateX(-103%); transform: translateX(-103%); } .top-bar-section > div > ul li a { display: block; width: 100%; padding: 0.4em 0.5em 0.4em 0; } .top-bar-section > ul li a { display: block; width: 100%; padding: 0.4em 0.5em 0.4em 0; } .top-bar-section > div > ul li a i { float: right; } .top-bar-section > ul li a i { float: right; } ul.nav-bar{display:none;} /*Make sure title doesnt fill screen*/ #page-content #main-content h1 { font-size: 2em; } p.flyout-child-caption{display:none;} /*a.flyout-child-link img{display:none;}*/ } /*Foundation small - medium screen breakpoint, small only*/ @media screen and (max-width: 40em) { } /*Extra small only*/ @media screen and (max-width: 25em) { h1.name { font-size: 1rem; margin-top: 9px; } #Article-template #share a i { min-width: 80px; } } /* ------------------------------------------------------------------------------------------------------------------------------- VinylPlus STYLES ------------------------------------------------------------------------------------------------------------------------------- */ .Calibri-Italic { font-family: Calibri-Italic; font-weight: normal; font-style: normal; } .Calibri-BoldItalic { font-family: Calibri-BoldItalic; font-weight: normal; font-style: normal; } .Calibri-Bold { font-family: Calibri-Bold; font-weight: normal; font-style: normal; } .Calibri { font-family: Calibri; font-weight: normal; font-style: normal; } #vinyl article p, #vinyl article a, #vinyl article li, #vinyl article div { font-family: Calibri, 'Open Sans', sans-serif; font-size: 18px; } #vinyl h5 {color: #d46543; font-size: 2rem; font-family: Calibri, 'Open Sans', sans-serif; font-weight: 700; } #vinyl #page-content #main-content h1 { color: #0069af; font-family: Calibri, 'Open Sans', sans-serif; font-weight: 700; } #vinyl hr {border-bottom: 1px solid #d46543; } #vinyl .navigation p{ background: #1a9fe0; color: #fff; border-radius: 0; font-size: 18px; border-left: 10px solid #8dc641; padding: 10px 4px; margin: 10px; letter-spacing: 1px; } #vinyl .navigation a{color: #fff; font-size: 18px; font-family: Calibri, 'Open Sans', sans-serif; text-transform: uppercase; } #vinyl table tbody td { padding: 0; } #vinyl .joinus p{background: #faee38; border-radius: 0; font-size:1.3em; padding: 10px 4px; margin: 2px; width: 150px; } #vinyl .applynow p{ background: #91c740; border-radius: 0; font-size:1.3em; padding: 5px 2px; margin: 2px; width: 150px; } #vinyl .joinus a, #vinyl .applynow a{ color: #fff; padding-left: 10px; } /* ------------------------------------------------------------------------------------------------------------------------------- MEMBER RESOURCES MENU ------------------------------------------------------------------------------------------------------------------------------- */ .nav-bar { background-color: #00529B; color: #f3f1dc; } /*.header-nav #bars div { width: 35px; height: 5px; background-color: #fff; /*#144773;*/ margin: 6px 0; transition: 0.4s; } /* Rotate first bar */ .change .bar-1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } /* Fade out the second bar */ .change .bar-2 { opacity: 0; } /* Rotate last bar */ .change .bar-3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }*/ .header-nav { padding: 0 !important; /* Over-riding the padding of the framework .row class */ font-size: 16px; font-size: 1.143em; } .header-nav ul { list-style: none; margin: 0; padding: 0; position: relative; /*For old versions of IE that don't support flex */ display: inline-block; display: inline-flex; width: 100%; } .header-nav li { float: left; } .header-nav li:hover { background: #5ec6f1; } /*li.has-flyout > a { line-height: 44px; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; }*/ .header-nav a { display: block; padding: 0 1.4em; color: #fff; } .nav-toggle { display: none; } /* Mega Menu CSS doctored from IAMA templates */ @media screen and (max-width: 768px) { .caption { visibility: hidden; position: absolute; } } .full-width-flyout { display: none; background: #5ec6f1; } .nav-bar li:hover .full-width-flyout { display: block; } /*.full-width-flyout-child { padding: 12px 0; }*/ .full-width-flyout-child .flyout-child-link:hover { color: #00529B; } .flyout-child-caption { margin: 0 24px; color: #B4C9E6; font-size: 13px; } @media screen and (min-width:900px) { .header-nav a { line-height: 44px; } } @media screen and (min-width: 40em) { nav .nav-bar li { position: static !important; } .full-width-flyout { position: absolute; right: 0; left: 0; top: 3em; margin: 0 auto; width: 100%; z-index: 100; padding: 15px; } .flyout, .nav-bar li ul { padding: 15px; } .full-width-flyout-child { float: left; /*width: 33%;*/ border: none; /*padding: 15px 10px;*/ } /*.full-width-flyout-child:nth-child(3n+1) { clear: left; } .full-width-flyout-child:nth-child(n+4) { border-top: 1px solid #B4C9E6; }*/ .flyout li a:hover { background-color: #757678; } .full-width-flyout .flyout-child-link { border: none; line-height: 30px; display: block; float: left; /*width: 100%;*/ /*padding: 0 0 5px;*/ } /*.flyout li a, .nav-bar li .full-width-flyout .full-width-flyout-child a.flyout-child-link { box-shadow: none; font-size: 19px; }*/ .flyout li a, .flyout-child-link { color: #FFF; } .flyout-child-caption { margin: 0; display:none; } } @media screen and (min-width: 1250px) { #Header_DropDownMenu.menu-for-small { display: none; } } @media screen and (max-width: 1250px) { ul.nav-bar { display: none; } } .nav-bar{display: inline-block;} a.flyout-child-link img:hover { -webkit-filter: brightness(70%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .flyout.full-width-flyout-links { margin-left:auto; margin-right:auto; /*width:70%;*/ } .full-width-flyout-child img{max-width:230px;} @media only screen and (max-width: 996px) { .full-width-flyout-child img { max-width: 180px; } } .nav-bar .has-flyout a.flyout-toggle {padding:0.86em 0.8em;} @media screen and (max-width: 40rem) { .nav-bar .has-flyout a.flyout-toggle { padding: 0.86em 0.25em; } } /*SLIDER*/ /* Slider */ .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slider { background-color: #fff; } /* ------------------------------------------------------------------------------------------------------------------------------- Plastic Helps template ------------------------------------------------------------------------------------------------------------------------------- */ div.plastic-helps { background-image: url(/Resource/Template/BPF/Wide/img/UN-Sustainable-Development-Goals.png); background-size: cover; margin-bottom:20px; } article.plastic-helps p, article.plastic-helps li { font-size: 16px; text-align:justify;} #plasticbuttons img{ width:180px; margin:20px; } .button-row-1, .button-row-2 { margin: 20px; } /*@media only screen and (min-width: 1250px) { #plasticbuttons .button-row-2 { margin-left: 30px; margin-right: 20px; } }*/ #plasticbuttons .grid-item { text-align: center; } #plasticbuttons .individual img { width: 350px; margin: 20px; } @media only screen and (max-width: 500px) { #plasticbuttons .individual img { max-width:100%; margin: 0; } #plasticbuttons img { margin: 0px; margin-top: 10px; margin-bottom: 10px; } } #small-button-row img{ width:99px; } #small-button-row { margin-bottom: 40px; text-align:center; } /* Accordion ----------------------------------------- */ .expand-heading { margin: 15px 0 0 0; border: 1px solid #dbdbdb; border-radius: 5px; padding: 8px 10px; } .expand-heading.clicked { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } .expand-heading:hover { cursor: pointer; } .expand-heading:hover, .expand-heading.clicked { background-color: #f5f5f5; } .expand-heading:after { content: "+"; float: right; } .expand-heading.clicked:after { content: "-"; } .expand { display: none; border: 1px solid #dbdbdb; border-top: none; border-radius: 5px; padding: 0 10px 8px; } /* Directory edits ----------------------------------------- */ div.directory-field-options, div.directory-alphabet {text-align: center;} div.directory-field-options input#ctl00_cphMainContent_lstShowMembersOnly_0, div.directory-field-options input#ctl00_cphMainContent_lstShowMembersOnly_1, div.directory-alphabet input#ctl00_cphMainContent_lstShowMembersOnly_0, div.directory-alphabet input#ctl00_cphMainContent_lstShowMembersOnly_1 {margin-top: 5px; } div.directory-list div.directory-search-item img {padding-right:10px; padding-bottom: 5px;} div.directory-list div.directory-search-item div.directory-social-media {padding-top: 5px;} #subscribe-checkbox label {display:inline; font-size: 14px;}