/* ========================================================================== VARIABLES AND GENERAL STYLES Get the NHS Colours from: https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/ ========================================================================== */ /* :root { --nhsDarkBlue: #003087; --nhsBlue: #005EB8; --nhsBrightBlue: #0072CE; --nhsLightBlue: #41B6E6; --nhsLighterBlue: #14bef0; --nhsGreen: #009639; --nhsLightGreen: #78BE20; --nhsPink: #AE2573; --nhsDarkPink: #7C2855; --nhsRed: #DA291C; --nhsDarkRed: #8A1538; --nhsOrange: #ED8B00; --nhsYellow: #FAE100; --nhsWarmYellow: #FFB81C; --nhsDarkGrey: #425563; --nhsMidGrey: #768692; --nhsPaleGrey: #E8EDEE; --navTextTier1: #3b8bb3; var(--nhsDarkBlue) : #003087; var(--nhsBlue) : #005EB8; var(--nhsBrightBlue) : #0072CE; var(--nhsLightBlue) : #41B6E6; var(--nhsLighterBlue) : #14bef0; var(--nhsGreen) : #009639; var(--nhsLightGreen) : #78BE20; var(--nhsPink) : #AE2573; var(--nhsDarkPink) : #7C2855; var(--nhsRed) : #DA291C; var(--nhsDarkRed) : #8A1538; var(--nhsOrange) : #ED8B00; var(--nhsYellow) : #FAE100; var(--nhsWarmYellow) : #FFB81C; var(--nhsDarkGrey) : #425563; var(--nhsMidGrey) : #768692; var(--nhsPaleGrey) : #E8EDEE; var(--navTextTier1) : #3b8bb3 } /* VARIABLES - END */ /* ==================================================================================================================================================== COMPONENT & 3RD PARTY FRAMEWORK OVERRIDES ==================================================================================================================================================== */ /* ========================================================================== BOOTSTRAP ========================================================================== */ .btn, .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background: none !important; border: none !important; text-shadow: none !important; box-shadow: none !important; background-color: #14bef0 !important; color: #fff !important; font-weight: normal !important; } /* .page-header { border: none !important; margin-top: 0px; height: 150px; margin-bottom: 0px !important; background-repeat: no-repeat; position: relative; text-align: center; line-height: 150px; } */ ::-moz-selection { background-color:#14bef0 !important; color:#000 !important; } ::selection { background-color:#14bef0 !important; color:#000 !important; } /* ========================================================================== NONUMBER / REGULAR LABS ========================================================================== */ /* TABS */ .nn_tabs>ul.nav-tabs>li { } .nn_tabs>ul.nav-tabs>li>a { color: #7b7b7b !important; background-color:#fff; padding: 8px 20px; font-weight: 300; } .nn_tabs>ul.nav-tabs>li.active>a { color: #fff !important; background-color:#67b345; } .nn_tabs.outline_content>.tab-content { border: 1px solid #bdbdbd !important; } .nn_tabs>.nav>li>a:hover { background-color: #eee !Important; color: #67b345 !important; } /* MODALS */ #colorbox.popup-window { background-color: #fff; border: 4px solid #00a9cc; } .popup-window #cboxWrapper, #colorbox.popup-window, .popup-window #cboxLoadedContent, .popup-window #cboxContent { overflow: visible; } .popup-window #cboxTitle { background-color: #248ecb; color: #fff; } #cboxClose { background: none; width: 47px; height: 47px; top: -4px; right: 0px; opacity: 1; } #cboxClose:after { content: "\f00d"; font-family: FontAwesome; opacity: 1; font-size: 30px; color: #fff; line-height: 32px; } #cboxClose:hover { opacity: 1; } /* SLIDERS */ .nn_sliders-group.active>.accordion-heading>a.accordion-toggle { background-color: #005EB8 !important; color: #fff !important; text-decoration: none; } .accordion-inner.panel-body a { font-weight: normal; } /* ========================================================================== JSN UNIFORM ========================================================================== */ .jsn-master .jsn-bootstrap .jsn-form-content .control-group .control-label { font-weight: 300; color: #999; margin-bottom: 5px; display: block; font-size: 13px; } .jsn-master .jsn-bootstrap .jsn-form-content .control-group .controls input, .jsn-master .jsn-bootstrap .jsn-form-content .control-group .controls select, .jsn-master .jsn-bootstrap .jsn-form-content .control-group .controls textarea { color: #999; padding: 5px 8px; outline: none; border: 1px solid #999; border-radius: 4px; } .jsn-master .jsn-bootstrap .jsn-form-content .control-group.ui-state-highlight { background: none; border: none; } .jsn-master .jsn-bootstrap .jsn-form-content .control-group { padding: 4px; } .jsn-master { width: 40%; } .jsn-master .controls input, .jsn-master .controls .jsn-input-small-fluid, .jsn-master .controls .jsn-input-medium-fluid { width: 100% !important; padding: 0px 10px !important; height: 35px; line-height: 35px; -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } .jsn-master .controls textarea, .jsn-master .controls .jsn-input-xlarge-fluid { width: 100% !important; } .jsn-text-center { display: none; } /** Hide joomla Shine link at the bottom of joomla shine forms**/ /* Success message */ .jsn-master .jsn-bootstrap .alert { padding: 10px 20px !important; border: 2px solid #67b345 !important; padding: 10px; background-color: #eef9ea; border-radius: 5px; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); width: 100%; color: #67b345 !important; font-weight: 300; margin-bottom: 30px; line-height: 25px; } .jsn-master .jsn-bootstrap .alert p { font-size: 18px; margin: 0; } .success-uniform button.close { position: absolute; top: 1px; right: 2px; border: 2px solid #67b345; font-size: 120%; background-color: #67b345; height: 23px; width: 25px; color: #fff; opacity: 1; font-weight: 300; line-height: 5px; } .jsn-master .jsn-bootstrap .form-actions { margin: 0px 0; padding: 0px; } .jsn-master .jsn-bootstrap .form-actions .btn-toolbar { margin-top: 0px; margin-bottom: 0px; text-align: right; } .jsn-form-submit, .jsn-form-submit:hover { background-color: #14bef0 !important; font-size: 18px; padding: 10px 20px; border-radius: 0px; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); font-weight: 700; } .jsn-form-submit:hover { background-color: #6e6e6e !important; } /* ========================================================================== DOC MAN ========================================================================== */ /* Category Listing */ .koowa .docman_categories { margin-top: 50px; } .koowa .docman_category--style { padding: 0px; } .koowa .koowa_header { margin-bottom: 0px; } .koowa .docman_category--style a { padding: 10px 10px 10px; display: block; } /* Document Listing */ form.-koowa-grid { margin-top: 50px; } .documentDetailsWrapper { float: left; width: 50%; } .koowa .docman_document_details { border: none !important; } .koowa .docman_document { border-bottom: 1px solid #f2f2f2; border-bottom-color: rgba(0,0,0,0.05); } .btn.docman_download__button { display: inline-block !important; padding: 4px 12px !important; margin-bottom: 0 !important; font-size: 14px !important; line-height: 20px !important; color: #333 !important; text-align: center !important; text-shadow: 0 1px 1px rgba(255,255,255,0.75) !important; vertical-align: middle !important; cursor: pointer !important; background-color: #f5f5f5 !important; background-image: -moz-linear-gradient(top,#fff,#e6e6e6) !important; background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)) !important; background-image: -webkit-linear-gradient(top,#fff,#e6e6e6) !important; background-image: -o-linear-gradient(top,#fff,#e6e6e6) !important; background-image: linear-gradient(to bottom,#fff,#e6e6e6) !important; background-repeat: repeat-x !important; border: 1px solid #ccc !important; border-color: #e6e6e6 #e6e6e6 #bfbfbf !important; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25) !important; border-bottom-color: #b3b3b3 !important; border-radius: 4px !important; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0) !important; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !important; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05) !important; -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05) !important; } /* InPage article links */ a.doclink { color: #6E6E6E !important; margin-left: 30px; } a.doclink:hover { color: #67b345 !important; } a.doclink span.koowa_icon--pdf { display: inline-block; margin-right: 10px; width: 22px; height: 25px; } a.doclink span[class^="koowa_icon--"]:before { font-size: 24px; width: 100% !important; height: 100%; line-height: 22px; color: #67b345; } a.doclink span { font-size: 13px; } /* ========================================================================== JOOMLA CORE COMPONENT : COM_CONTACT ========================================================================== */ .contact-category { margin: 40px 20px; } .contact-category h3 { display: none; } .contact-category p:first-of-type { display: none; } .contact-category ul li { width: 48%; margin: 10px 1% 0px 1%; float: left; background-color: #f9f9f9; font-size: 90%; text-align: center; padding: 0px } ul.category li { width: 48% !important; } ul.category li .list-title { text-align: left; font-size: 120%; padding: 0px 10px 0px 10px; } ul.category li .list-title a { text-align: left; font-size: 130%; } dl { margin-bottom: 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .contact-fields.dl-horizontal dt, .contact-position.dl-horizontal dt { width: auto !important; line-height: 26px; } .contact-fields.dl-horizontal dd, .contact-position.dl-horizontal dd { margin-left: 10px !important; display: inline; line-height: 0px; } .contact-miscinfo { margin: 40px 0px 110px 0px; min-height: 250px; } .contactsBackButton .backbutton { position: relative; } .contact .thumbnail { padding: 0px; border-radius: 0px; margin: 0px 5px 10px 50px; } .contact .thumbnail img { width: 320px; } @media only screen and (min-width: 320px) and (max-width: 479px) { ul.category li .list-title { font-size: 110%; } .contact .thumbnail { margin: 5px; } } @media only screen and (min-width: 480px) and (max-width: 599px) { .contact .thumbnail { margin: 5px; } } /* ==================================================================================================================================================== COMPONENT OVERRIDES - END ==================================================================================================================================================== */ /* MODEL OF CARE (MOC) */ .mocSlidersMobile { display: none; } .nn_sliders-group.active>.accordion-heading>a.accordion-toggle { color: #fff !important; text-decoration: none; } .nn_sliders-group>.accordion-heading>a.accordion-toggle:hover { background-color: #1a306b !important; color: #fff !important; font-weight: 300 !important; text-decoration: none; } .mocSlidersMobile .accordion-body p, .mocSlidersMobile .accordion-body li { font-size: 16px !important; line-height: 22px; } .mocSlidersMobile .accordion-body li { margin-bottom: 5px; } /* MOC Values */ .nn_sliders-group.mocSliderValues .accordion-heading, .nn_sliders-group.mocSliderValues.active>.accordion-heading>a.accordion-toggle { background-color: #34923d !important; } .nn_sliders-group.mocSliderValues .accordion-heading a { color: #25602e; } /* MOC Enablers */ .nn_sliders-group.mocSliderEnablers .accordion-heading, .nn_sliders-group.mocSliderEnablers.active>.accordion-heading>a.accordion-toggle { background-color: #ed008c !important; } .nn_sliders-group.mocSliderEnablers .accordion-heading a { color: #6c003e; } /* MOC Services */ .nn_sliders-group.mocSliderServices .accordion-heading, .nn_sliders-group.mocSliderServices.active>.accordion-heading>a.accordion-toggle { background-color: #01aef0 !important; } .nn_sliders-group.mocSliderServices .accordion-heading a { color: #193e6e; } /* MOC AOC */ .nn_sliders-group.mocSliderAOC .accordion-heading, .nn_sliders-group.mocSliderAOC.active>.accordion-heading>a.accordion-toggle { background-color: #fef301 !important; } .nn_sliders-group.mocSliderAOC .accordion-heading a { color: #f68250; } /* MOC Misc */ .nn_sliders-group.mocSliderMisc .accordion-heading, .nn_sliders-group.mocSliderMisc.active>.accordion-heading>a.accordion-toggle { background-color: #ccc !important; } .nn_sliders-group.mocSliderMisc .accordion-heading a { color: #777; } /* Model of Care wheel */ #cyphpGraphicModel { width: 100%; height: 434px; margin: auto; position: relative; background-image: url(/images/page-images/model-of-care/modelOfCare_bg_butterfly.jpg); background-repeat: no-repeat; background-size:100%; overflow: hidden; } #cyphpGraphicModel.podActive { /* background-image: url(/images/page-images/model-of-care/modelOfCare_bg_o.jpg); */ background-image: url(/images/page-images/model-of-care/modelOfCare_bg_butterfly_o.jpg); } .wheelLeg { width: 95px; height: 195px; position: absolute; bottom: 50px; cursor: pointer; left: 0px; } .wheelLeg#pod10 { left: 104px; } .frameBar { width: 206px; height: 37px; position: absolute; bottom: 13px; left: 0px; cursor: pointer; } .pod { width: 70px; height: 60px; position: absolute; cursor: pointer; text-align: center; line-height: 1.1em; font-weight: 700; font-size: 11px; padding: 0px 5px; display: table; text-transform: uppercase; } .pod span { display: table-cell; vertical-align: middle; } .pod.active, .pod:hover { background-image: url(/images/page-images/model-of-care/pod_highlighted.png); background-size: 100%; background-repeat: no-repeat; color: #fff; } #pod1 { top: 229px; left: 277px; } #pod2 { top: 10px; left: 170px; } #pod3 { top: 54px; left: 223px; } #pod4 { top: 107px; left: 260px; } #pod5 { top: 164px; left: 274px; } #pod6 { top: 287px; left: 261px; } #pod7 { top: 342px; left: 227px; } #pod8 { top: 386px; left: 175px; } /* Pod text colour */ .podGT { color: #25602e; } .podPT { color: #6c003e; } .podBT { color: #193e6e; } .podYT { color: #f68250; } .podContentHeader { position: absolute; right: 20px; top: 25px; min-width: 55%; color: #24418f; font-weight: 700; font-size: 35px; display: none; } .podContent { position: absolute; right: 20px; top: 70px; width: 55%; height: 350px; display: none; background-color: #fff; background-color: rgba(255,255,255,0.95); padding: 10px 20px 10px 20px; overflow: hidden; overflow-y: auto; } .podContent p { font-size: 16px; line-height: 1.4em; margin-bottom: 0.8em; } .podContent h2 { font-size: 140%; font-weight: 700; margin: 26px -5px 6px 0px; } .podContent ul { margin-top: 16px; } .podContent li { font-size: 11pt; line-height: 1.4em; margin-bottom: 8px; } .podContentClose { position: absolute; top: 5px; right: 10px; cursor: pointer; width: 20px; text-align: center; } .startInfo .podContentClose { display: none; } .startInfo { display: block; top: 0; bottom: 0; margin: auto; height: 100px; line-height: 40px; font-size: 25px; text-align: center; width: 360px; right: 25%; overflow: visible; padding: 10px; text-transform: uppercase; font-weight: 700; color: #23408e; background: none; } /* http://thecodeplayer.com/walkthrough/css3-family-tree */ .orgChartWrapper { margin-bottom: 100px; overflow-x: auto; } .orgChartWrapper * {margin: 0; padding: 0;} ul.orgChart { width: 1200px; } .orgChartWrapper ul { padding-top: 20px; position: relative; } .orgChartWrapper li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; } /*We will use ::before and ::after to draw the connectors*/ .orgChartWrapper li::before, .orgChartWrapper li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .orgChartWrapper li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; } /*We need to remove left-right connectors from elements without any siblings*/ .orgChartWrapper li:only-child::after, .orgChartWrapper li:only-child::before { display: none; } /*Remove space from the top of single children*/ .orgChartWrapper li:only-child{ padding-top: 0; } /*Remove left connector from first child and right connector from last child*/ .orgChartWrapper li:first-child::before, .orgChartWrapper li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .orgChartWrapper li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; } .orgChartWrapper li:first-child::after{ border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .orgChartWrapper ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .orgChartWrapper li span { border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-size: 11px; display: inline-block; border-radius: 5px; max-width: 130px; line-height: 16px; font-size: 14px; } .orgChartWrapper ul ul ul li { clear: both; margin: auto; float: none; } .orgChartWrapper ul ul ul li:after, .orgChartWrapper ul ul ul li:before { border-top: 0px; } .orgChartWrapper ul ul ul li:first-child::after { border-radius: 0px; } .orgChartWrapper .adjunct::before { border-left: 1px dashed #ccc; } .adjunctInline { position: absolute; left: 18%; top: 40px; } .adjunctInline:after { content: ""; width: 26px; position: absolute; border-top: 1px dashed #ccc; top: 50%; } .adjunctInline span, .adjunct span { font-size: 12px !important; line-height: 13px !important; } .uk-slidenav-position { /* border: 1px solid #eee; border-top: 0px; margin-bottom: 70px; */ } .uk-overlay-panel { width: 70% !important; margin: auto !important; margin-top: 30px !important; text-align: center !important; } .uk-slideshow h3 { margin-top: 0px; background: #44a1df; background: rgba(68,161,223,0.8); padding: 20px 40px; font-size: 40px; display: inline-block; text-transform: uppercase; } .uk-slideshow .uk-margin { background: #44a1df; background: rgba(68,161,223,0.8); padding: 20px; width: 70%; margin: auto !important; } .uk-slideshow .uk-margin p { margin: 0px; margin-bottom: 20px; padding: 0px; } .uk-slideshow .uk-margin ul { display: inline-block; text-align: left; } .uk-slideshow .uk-margin ul li { margin-bottom: 0px; } .uk-slideshow a.uk-button { background: none !important; background-color: #44a1df !important; border: none !important; color: #fff !important; margin-top: 20px; } .uk-slidenav-position .uk-slidenav { display: block !important; background-color: #67b345; background-color: rgba(103, 179, 69, 0.59); } .uk-slidenav-position .uk-slidenav:before { color: #fff !important; } .uk-slidenav-position .uk-slidenav-next { right: 0px !important; } .uk-slidenav-position .uk-slidenav-previous { left: 0px !important; } .uk-overlay-bottom { padding-bottom: 0px !important; } .uk-overlay-bottom .uk-dotnav { margin-bottom: 0px !important; } .uk-dotnav>* { margin-bottom: 0px !important; background-color: #67b345 !important; background-color: rgba(103, 179, 69, 0.59) !important; padding: 0px 10px 0px 10px !important; line-height: 30px !important; height: 30px !important; } .uk-dotnav>*>* { width: 12px !important; height: 12px !important; margin-top: 9px !important; } .uk-dotnav>.uk-active>* { width: 16px !important; height: 16px !important; transform: scale(1) !important; -webkit-transform: scale(1) !important; margin-top: 7px !important; } .cyphpPurpleText { color: #7d51a1; } .cyphpPinkText { color: #e16eaa; } .cyphpYellowText { color: #fbeb06; } .cyphpBlueText { color: #17b5ea; } .cyphpRedText { color: #e12027; } .cyphpDarkblueText { color: #204d9b; } .cyphpGreenText { color: #67b345; } .cyphpPurpleBG { background-color: #7d51a1; } .cyphpPinkBG { background-color: #e16eaa; } .cyphpYellowBG { background-color: #fbeb06; } .cyphpBlueBG { background-color: #17b5ea; } .cyphpRedBG { background-color: #e12027; } .cyphpDarkblueBG { background-color: #204d9b; } .cyphpGreenBG { background-color: #67b345; } /* ========================================================================== BESPOKE FONTS ========================================================================== */ @font-face { font-family: 'abel'; src: url('/fonts/abel-reg/abel-regular-webfont.eot'); src: url('/fonts/abel-reg/abel-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/abel-reg/abel-regular-webfont.woff2') format('woff2'), url('/fonts/abel-reg/abel-regular-webfont.woff') format('woff'), url('/fonts/abel-reg/abel-regular-webfont.ttf') format('truetype'), url('/fonts/abel-reg/abel-regular-webfont.svg#abel') format('svg'); font-weight: normal; font-style: normal; } /*! HTML5 Boilerplate v5.2.0 | MIT License | http://h5bp.com/ */ /* Some styles taken from HTML 5 Boilerplate */ /* ========================================================================== Standard Styles ========================================================================== */ html, button, input, select, textarea { color: #222; } html { font-size: 1em; line-height: 1.4; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* These selection rule sets have to be separate */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* Remove the gap between images, videos, audio and canvas and the bottom of their containers */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* Remove default fieldset styles */ fieldset { border: 0; margin: 0; padding: 0; } /* Allow only vertical resizing of textareas */ textarea { resize: vertical; } /* The `Mirco Clearfix` */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only - Include this rule to trigger hasLayout and contain floats */ .clearfix { *zoom: 1; } /* our fallback incase the below gets used */ .clear { clear: both; border: none; float: none; } /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ========================================================================== Main Styles ========================================================================== */ body { min-width: 100px !important; font-size: 12pt; line-height: 1.7em !important; font-family: "abel", Arial, Helvetica, sans-serif; color: #6E6E6E; margin: 0; padding: 0; background-color: #fff; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { color: #14bef0; margin: 10px 0px; font-weight: normal; line-height: 1; text-rendering: optimizelegibility;margin-bottom: 30px; } h1 { font-size: 60px; margin-top: 40px; color: #005EB8; display: inline-block; } h2 { font-size: 200%; margin: 48px 0px 6px 0px; text-transform: uppercase; } h3 { font-size: 140%; margin-top: 0.5em; margin-bottom: 10px; color: #333; font-weight: 700; } h4 { font-size: 120%; margin-bottom: 10px; color: #666; font-weight: 700; } h5 { font-size: 100%; } h6 { font-size: 100%; } p { margin-bottom: 1em; font-size: 20px; } a img { border: none; } a, a:hover, a:visited { color: #14bef0; text-decoration:none; font-weight: bold; } a:hover { color: #14bef0; } li { font-size: 20px; margin-bottom: 15px; line-height: 24px; } /*** TABLE ITEMS ****/ table { width: 100%; margin: 20px 0px; border-collapse: collapse; } table, tr, tbody { border: none; border-color: #fff; } td { border: 1px solid #ccc; padding: 0.4em; } th { border: 1px solid #ccc; background-color: #ccc; padding: 0.6em; font-size: 120%; color: #666; } th a, th a:hover, th a:visited { color: #666; text-decoration: none; } th a:hover { text-decoration: underline; } .hidden{ opacity:0; } .visible{ opacity:1; } /***** Back Button *****/ .backbutton { /* margin-top: 0px; position: absolute; bottom: 20px; z-index: 1; */ } .backbutton a { background-color: #14bef0; background-color: rgba(23,180,233,0.8); width: 170px; color: #fff; text-decoration: none; padding: 0px 4px; text-align: center; display: block; font-size: 17px; text-transform: uppercase; height: 35px; line-height: 35px; } .backbutton a:hover { text-decoration: none; background-color: #67b345; } .backbutton a:before { content: "\f100"; font-family: FontAwesome; margin-right: 10px; font-size: 20px; font-weight: 300; } /********************************************************************************************************/ /* Some specific styles we have created - these should be available from the JCE class dropdown */ /********************************************************************************************************/ .pageImageRight { float: right; clear: both; margin-left: 40px; margin-bottom: 40px; width: 375px;margin-top: 7px; } .imageCaptionRight { clear: both; float: right; margin-top: -6px; width: 320px; text-align: center; font-style: italic; } .pageImageLeft { float: left; clear: both; margin-right: 40px; margin-bottom: 40px; width: 375px;margin-top: 7px; } .imageCaptionLeft { clear: both; float: left; margin-top: -6px; width: 320px; text-align: center; font-style: italic; } .noImageBorder { border: none; } .left { float: left; margin-left: 0; margin-right: 25px; margin-bottom: 25px; } .right { float: right; margin-right: 0; margin-left: 25px; margin-bottom: 25px; } .fullWidthModule .moduleContent { width: 1200px; margin: auto; position: relative; } .item-image { width: 400px; padding: 20px; } .pull-left.item-image img, .pull-right.item-image img { margin: 0px; border: 1px solid #ccc; } /********************************************************************************************************/ /* STRUCTURE / GRID Styles */ /********************************************************************************************************/ #banner .container-fluid, #moduleBeforeContent .container-fluid, #moduleAfterContent .container-fluid { padding-left: 0px; padding-right: 0px; } #moduleBeforeContent { -webkit-box-shadow: 0px 10px 22px -12px rgba(0,0,0,0.75); -moz-box-shadow: 0px 10px 22px -12px rgba(0,0,0,0.75); box-shadow: 0px 10px 22px -12px rgba(0,0,0,0.75); border-bottom: 8px solid #005eb8; position: relative; display: block; } #moduleBeforeContent::after { /* background-color: #eef7fb; */ content: ""; opacity: 0.07; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-repeat: no-repeat; background-position: 50% 55%; background-size: 100%; } #pageOverride-101 #moduleBeforeContent { background: url(/images/banners/home/modelOfCare_FadedBackground.png); background-color: #f5f5f5; border: none; background-repeat: no-repeat; background-position: 50% 55%; background-size: 2400px 585px; } #mainNavigation { background-color: #c2e9f7; clear: both; } #breadcrumbs { background-color: #f5f5f5; } #mainContent { padding-bottom: 80px; } #top-footer { background-color: #666; } #bottom-footer { background-color: #666; } /********************************************************************************************************/ /* Core Styles */ /********************************************************************************************************/ #header { padding: 0px; border-bottom: 1px solid #eee; background-color: #fcfcfc; } #header .logoCompany { max-width: 270px; margin: 0px 5px 0px 5px; } .headerContent { width: 1200px; margin: auto; position: relative; padding-top: 20px; } #header .moduleLeft { width: 150px; z-index: 100; position: relative; } #outerWrapper { overflow:hidden; position:relative; margin: auto; } .mainPageWrapper { background-color: #fff; padding: 0px; position: relative; } .mainContentWrapper { float: left; } .item-page { margin: auto; margin-bottom: 150px; } .item-page div[itemprop="articleBody"] { margin-top: 40px; } #pageOverride-101 .item-page div[itemprop="articleBody"] { margin-top: 0px; } .item-page.noPageHeader div[itemprop="articleBody"] { margin-top: 0px; } .w100 { width: 100%; float: none !important; } .w75 { width: 70%; padding: 0px; } .w50 { width: 45%; } .moduleRight { float: right; margin-right: 0; } .moduleLeft { float: left; margin-left: 0; } /* Breadcrumbs */ #breadcrumbsTop { padding: 5px 10px; color: #666; border-bottom: 1px solid #ccc; } .breadcrumbs { font-size: 90%; line-height: 39px; height: 35px; } .breadcrumbs a { font-size: 95%; font-weight: normal; color: #005EB8; } /* Authors */ div.plg_al_about { border: 1px solid #ccc; background-color: #f1f1f1; margin-bottom: 20px; padding-right: 20px; margin-top: 50px; } img.authorlist_thumb { width: 120px; margin-right: 20px !important; } .plg_al_about h4 { margin: 10px; font-weight: 700; } div.plg_al_desc p { font-size: 80%; } .article-info-term { display: none;}/* hides off written by */ dd.createdby { margin: 0; font-size: 90%; margin-top: -20px; font-weight: 700; } /* Standard form styles */ .generalForms { width: 60%; margin: auto; } .generalForms label { font-weight: 700; margin-top: 5px; } .generalForms input[type="text"], .generalForms input[type="password"], .generalForms select { width: 100%; height: 35px; line-height: 35px; padding: 0px 10px; } file.generalForms input[type="file"] { width: 100%; height: 35px; } .generalForms input[type="submit"], .generalForms .formSubmit { background: none; background-color: #F4A514; border: none; border: 1px solid #BD841A; padding: 5px 10px; border-radius: 5px; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); color: #fff; } .generalForms input[type="submit"]:hover, .generalForms .formSubmit:hover { background: none; background-color: #BD841A; } /***************************************************************************/ /* FOOTER */ /***************************************************************************/ #footer { padding-top: 20px; padding: 0px; width: 100%; clear: both; background-color: #000; margin-top: 100px; } .footerContent { width: 1150px; margin: auto; padding: 20px 0px; } .footerNav ul.menu > li { float: left; margin-right: 25px; min-width: 140px; } .footerNav ul.menu > li:last-of-type { margin-right: 0px; } .footerNav li { margin: 7px 0px 0px 0px; line-height: 20px; } .footerNav li img { display: none; } .footerNav a { color: #fff; font-weight: 300; font-size: 14px; } .footerNav li.deeper > a, .footerNav .topNav { font-weight: 700; font-size: 16px; border-bottom: 1px dashed; padding-bottom: 8px; margin-bottom: 15px; } .footerNav li.item-101 { display: none; } .footerNav a:hover { border-bottom: 1px solid #14bef0; } .footerNav .menu :hover > a { background: none !important; } .footerNav li.item-120, .footerNav li.item-119 { display: none; } /************* Usually pages like Sitemap or Ts and Cs can be found in here **************/ #extraFooterInfo { margin: auto; font-size: 80%; background-color: #000; padding: 40px 0px 20px 0px; } #extraFooterInfo ul { list-style: none; list-style-type: none; margin: 0px; padding: 0px; } #extraFooterInfo li { float: left; margin-left: 20px; } #extraFooterInfo li a { font-size: 90%; font-weight: normal; } .footerCopyright { text-align: center; clear: both; } .footerCopyright p { color: #fff; font-size: 13px; padding: 0px; margin: 0px; } .footerStrapline { float: right; } .footerStrapline p { font-size: 40px; margin: 0px; margin-top: -50px; } /***************************************************************************/ /* FOOTER - END */ /***************************************************************************/ /* ==================================================================================================================================================== PAGE - BESPOKE PAGE AMENDS IN HERE ==================================================================================================================================================== */ /* Home */ #pageOverride-101 .item-page { margin-bottom: 60px; } h2.straplineInlineHome { margin: 60px 0px 60px 0px; text-align: center; font-size: 300%; line-height: 1.2em; } .moduletable.homeOurPartners { background-color: #14bef0; border-top: 8px solid #005EB8; border-bottom: 8px solid #005EB8; padding: 50px 0px; } .moduletable.homeOurPartners h2 { text-align: center; font-size: 50px; color: #005EB8; } .partners .span4 { text-align: center; padding: 10px 20px; background-color: #fff; border-radius: 7px; height: 200px; margin-bottom: 20px; vertical-align: middle; border: 1px solid #ccc; } .partners .span4:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } .partners .span4 p { text-align: center; color: #fff; vertical-align: middle; display: inline-block; margin-bottom: 0; } .partners .span4 img { width: 100%; } .partnerEvelina img { width: 100%; max-width: 220px; } .partnerLambethClinical img { } .partnerLambeth img { width: 100%; max-width: 230px; } .partnerSouthwarkClinical img {} .partnerSouthwark img {} .partnerGuys img {} .partnerSLAM img {} .partnerKingsNHS img {} .partnerKings img { width: 100%; max-width: 180px; } /* PARTNERS PAGE */ #pageOverride-602 .partnerEvelina img { width: 100%; max-width: 190px; } #pageOverride-602 .partnerLambethClinical img { } #pageOverride-602 .partnerLambeth img { width: 100%; max-width: 190px; } #pageOverride-602 .partnerSouthwarkClinical img {} #pageOverride-602 .partnerSouthwark img {} #pageOverride-602 .partnerGuys img {} #pageOverride-602 .partnerSLAM img {} #pageOverride-602 .partnerKingsNHS img {} #pageOverride-602 .partnerKings img { width: 100%; max-width: 140px; } #teamDemoModule { background-color: #425563; padding: 60px 0px 60px 0px; /* border-top: 8px solid #14bef0; */ border-bottom: 8px solid #14bef0; padding: 50px 0px; } #teamDemoModule h2 { text-align: center; font-size: 50px; color: #fff; margin-bottom: 40px; } #teamDemoModule h3 { text-align: center; color: #fff; font-size: 110%; } #teamDemoModule p { text-align: center; color: #fff; font-size: 11pt; min-height: 50px; } #teamDemoModule .thumbnail { text-align: center; border: 0; box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; } #teamDemoModule .thumbnail img { width: 148px; height: 148px; border-radius: 50%; border: 1px solid #E8EDEE; } #teamDemoModule .thumbnail .btn { background-color: #E8EDEE !important; } /* Our Partners */ /* .item-page.ourPartners div[itemprop="articleBody"] p img { width: 200px; margin: 15px 35px 15px 0px; border: 1px solid #eee; border-radius: 5px; padding: 10px; } */ /* Contacts */ .item-page.contactUs .right h2 + p { display: none; } .item-page.contactUs h2 { background-color: #14bef0; color: #fff; padding: 10px; clear: both; } .item-page.contactUs .left { width: 45%; } .item-page.contactUs .right { width: 45%; } .item-page.contactUs .right .jsn-master { width: 100% !important; } /* Sitemap */ #xmap { margin-right: 40px; margin-left: 40px; min-height: 290px; } #xmap h1 { padding-top: 20px; } /* News */ .newsBackButton { } .newsBackButton p:empty { display: none; } .newsPage .pageImageRight img { border: 1px solid #ccc !important; } /***************************************************************************/ /* MODULE - Home - NewsFlash */ /***************************************************************************/ .moduletable.homeNews { background-color: #f0f3f0; padding: 60px 0px 60px 0px; } .moduletable.homeNews .container { text-align: center; } .moduletable.homeNews h2 { text-transform: uppercase; color: #3c7c4a; text-align: center; margin: 0 0 20px 0; font-size: 50px; } .moduletable.homeNews h3 { text-transform: uppercase; color: #ed2724; text-align: center; line-height: 1.2em; font-size: 1.4em; } .moduletable.homeNews .introImageWrapper { width: 33%; float: left; margin-right: 30px; border: 1px solid #ccc; } .moduletable.homeNews .newsItemWrapper h4 { text-align: left; } .moduletable.homeNews .newsItemWrapper p { text-align: left; } .moduletable.homeNews .readmore { background-color: #3c7c4a; } .moduletable.homeNews .readmore:hover { color: #fff; } .moduletable.homeNews .btn { background: none; background-color: #3c7c4a; color: #fff; margin: 50px 0px 0px 0px; } .moduletable.homeNews .newsItemWrapper { width: 46%; margin: 9px 2% 9px 2%; float: left; position: relative; background-color: #e5e5e5; padding: 19px 3% 19px 3%; border-radius: 5px; min-height: 270px; } .moduletable.homeNews .readmore { color: #fff !important; padding: 2px 9px; border-radius: 5px; text-transform: uppercase; font-size: 10pt; position: absolute; right: 20px; bottom: 20px; } /***************************************************************************/ /* MODULE - Search Results */ /***************************************************************************/ .finder.searchResults { width: 1200px; margin: auto; } .finder.searchResults #search-results { margin-top: 30px; margin-bottom: 100px; } #search-form { margin: auto; width: 40%; background-color: #eee; padding: 20px 10px; margin-top: 40px; } #search-form form { margin: 0px; } #search-form label { font-size: 18px; margin-right: 10px; float: left; margin-bottom: 0px; height: 28px; line-height: 28px; font-weight: 700; } #search-form input[type="text"] { height: 28px; border-radius: 8px 0px 0px 8px; width: 50%; float: left; } #search-form button.btn { border-radius: 0px 5px 5px 0px; background-color: #555 !important; float: left; } #search-form #search-query-explained { padding-bottom: 0px; } .finder.searchResults .list-striped li { margin-bottom: 0px; padding: 10px 12px; } .finder.searchResults .list-striped li h4 { font-size: 110%; margin-top: 0px; } .finder.searchResults p.searchResults { font-size: 16px; line-height: 22px; } .viewResultButton a, .viewResultButton a:hover, .viewResultButton a:visited { background-color: #14bef0; color: #fff; font-size: 16px; font-weight: 300; padding: 3px 10px; } /***************************************************************************/ /* MODULE - Search Box Top */ /***************************************************************************/ .moduletable.searchBoxTop { float: right; clear: both; z-index: 100; position: relative; } .searchBoxTop input.search-query { height: 28px; border-radius: 8px 0px 0px 8px; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); width: 130px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; transition: all .2s ease-out; } .searchBoxTop input.search-query:focus { width: 200px; } .searchBoxTop .btn { background-color: #999 !important; border-radius: 0px 5px 5px 0px; } .searchBoxTop .btn:hover { background-color: #555 !important; } /***************************************************************************/ /* MODULE - Strapline */ /***************************************************************************/ .moduletable.compStrapline { text-align: center; margin-top: 67px;} .moduletable.compStrapline p { font-size: 20px; color: #41B6E6; text-transform: uppercase; } /***************************************************************************/ /* MODULE - NHS Logo */ /***************************************************************************/ .moduletable.NHSlogo.span2 { margin-top: 50px; } /***************************************************************************/ /* MODULE - Newsletter Signup (Bottom Bar) */ /***************************************************************************/ .newsletterSignup.fullColour { background-color: #666; clear: both; } .newsletterSignup .moduleContent { background-color: #666; height: 150px; } .newsletterSignup h5 { float: left; height: 120px; font-size: 23px; text-align: right; text-transform: uppercase; color: #fff; width: 24%; padding-right: 25px; margin: 15px 0px; border-right: 2px solid #fff; padding-top: 40px; } .newsletterSignup .jsn-master { width: 72% !important; float: left; } .newsletterSignup .jsn-master .jsn-form-content { display: inline-block; width: 70%; } .newsletterSignup .jsn-master .control-group { float: left; width: 50% !important; padding: 0px 25px; border-right: 2px solid #fff !important; padding: 0px !important; height: 120px; margin: 15px 0px; position: relative; } .newsletterSignup .jsn-master label.control-label { display: none !important; } .newsletterSignup .jsn-master .jsn-row-container { margin-bottom: 0px !important; } .newsletterSignup .jsn-master .jsn-bootstrap .jsn-form-content .control-group .controls input { position: absolute; top: 0px; bottom: 0px; margin: auto; width: 90% !important; left: 0px; right: 0px; } .newsletterSignup .jsn-master .jsn-bootstrap .form-actions { float: right; height: 120px; line-height: 100px; width: 250px; margin: 15px 0 !important; padding: 10px !important; position: absolute; top: 0px; right: 0px; } .newsletterSignup .jsn-master .jsn-bootstrap .form-actions .btn { background-color: #14bef0 !important; background-color: #14bef0 !important; font-size: 32px; padding: 0px 20px !important; text-transform: uppercase; color: #fff; font-weight: 300; width: 100%; height: 65px; line-height: 65px; } /***************************************************************************/ /* MODULE - Section Nav module (Left Hand Side) */ /***************************************************************************/ .tier2SectionNav { margin-bottom: 65px; } .tier2SectionNav ul { margin: 0px; padding: 0px; list-style: none; list-style-type: none; margin-left: 5px; } .tier2SectionNav li { margin-bottom: 10px; padding: 5px 0px 5px 15px; margin-top: 10px; } .tier2SectionNav li a { display: block; color: #808285; text-decoration: none; font-size: 11pt; } .tier2SectionNav li a:hover { color: #e2057c; } /***************************************************************************/ /* MODULE - OOBA - Back to top */ /***************************************************************************/ .backTotop { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #fff !important; background-color: #129EC5; font-size: 30px; padding: 8px; display: none; opacity: 0.80; filter: alpha(opacity =80); border-radius: 5px 0px 0px 5px; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); } .backTotop:hover { opacity: 1; filter: alpha(opacity =100); background-color: #0A6782; } /***************************************************************************/ /* MODULE - socialIcons */ /***************************************************************************/ .socialIcons { margin-top: 0px; text-align: center; } .socialIcons a { text-align: center; margin-right: 15px; display: inline-block; color: #fff; } .socialIcons a:last-child { margin-right: 0px; } .socialIcons a .fa{ width: 40px; height: 40px; line-height: 42px; border-radius: 50%; /* behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); */ font-size: 18px; } .socialIcons .fa-rss { background: #f26522; } .socialIcons .fa-facebook { background: #3b5998; } .socialIcons .fa-google-plus { background: #dc4e41; } .socialIcons .fa-twitter{ background: #0084b4; } .socialIcons .fa-youtube-play { background: #cd201f; } /***************************************************************************/ /* MODULE - Emergancy Numbers */ /***************************************************************************/ .emergancyNumbers { margin-top: 40px; background-color: #f5f5f5; padding: 10px 20px 20px 20px; } .emergancyNumbers h4 { color: #005eb8; } .emergancyNumbers p { font-size: 11pt; line-height: 1.2em; } /********************************************************************************************************/ /* Off Canvas Navigation - Button and Navigation itself */ /********************************************************************************************************/ #offCanvasNavButtonWrapper { display: none; float:left; margin: 0px; cursor: pointer; text-align: center; font-size: 10pt; padding: 0px; position: absolute; top: 104px; border: 2px solid #fff; background-color: #67b345; text-transform: uppercase; } #offCanvasNavButton { width: auto; height: 35px; line-height: 35px; padding: 0px 8px 0px 8px; margin-left: 0px; color: #fff; width: 120px; font-size: 17px; z-index: 1; position: relative; } #offCanvasNavButtonWrapper img { background: none; border: none; } #offCanvasNavButtonWrapper.closeReposition { margin-left: -240px; background-color: #fff; border: 2px solid #67b345; width: 210px; top: 22px; } #offCanvasNavButtonWrapper.closeReposition #offCanvasNavButton { color: #67b345; width: 100%; } /****** The actual navigation when it is 'off canvas' ********/ .navigation.offCanvas { left: -240px; top: 70px; opacity: 1; width: 210px; background: none; } .navigation.offCanvas h3 { margin-bottom: 20px; color: #fff; padding-bottom: 0px; font-size:130%; } .navigation.offCanvas li { text-align: left; width: 100%; margin-left: 0px;} .navigation.offCanvas li.parent:after { content: none; } .navigation.offCanvas li.active.deeper:before, .navigation.offCanvas li.active.deeper:after, .navigation.offCanvas li.current:before, .navigation.offCanvas li.current:after, .navigation.offCanvas li:hover:before, .navigation.offCanvas li:hover:after { content: none; } .navigation.offCanvas li.parent { position: relative; } .navigation.offCanvas li .expandTier { position: absolute; top: 5px; right: 10px; display: block; padding: 0px 7px; height: 32px; line-height: 30px; color: #fff; cursor: pointer; border-radius: 5px; behavior: url(/templates/oobatemplate/js/css3Pie/PIE.htc); border: 2px solid #fff; background: #67b345 !important; } /* Tier 1 EXPAND icons */ .navigation.offCanvas li .expand-icon-closed:before { content: "\f078"; } .navigation.offCanvas li .open .expand-icon-open:before { content: "\f077"; } /* Tier 2 EXPAND icons */ .navigation.offCanvas li li .expand-icon-closed:before { content: "\f067"; } .navigation.offCanvas li li .open .expand-icon-open:before { content: "\f068"; } /* Tier 3 EXPAND icons */ .navigation.offCanvas li li li .expand-icon-closed:before { content: "\f078"; } .navigation.offCanvas li li li .open .expand-icon-open:before { content: "\f077"; } .navigation.offCanvas li a { font-weight: 300; margin-left:0px; margin-bottom: 0px; background: none; color: #666; border-bottom: 1px solid #eee; height: auto !important; padding: 10px; font-size: 100%; width: 100% !important; line-height: 14px; padding: 14px 10px !important; } .navigation.offCanvas ul ul li img { display: none; } .navigation.offCanvas li.active > a,.navigation.offCanvas .navigation li.current > a { margin-left: 0px; color: #fff !important; font-weight: 700; background-color: #67b345 !important; } .navigation.offCanvas li a:hover { color: #fff; margin-left: 0px; } .navigation.offCanvas li li { margin-left: 0px !important; background: none; } /***** Tier 2 - Needs to be visible as this navigation is mainly for MOBILES - :hover does not work! ********/ .navigation.offCanvas ul ul { position: relative; top:0px; border: none; max-height: 0em; opacity: 0; visibility: hidden; overflow: hidden; width: 100%; margin-left: 0px; min-height: 0px; padding: 0px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out; } .navigation.offCanvas ul ul a { background: none !important; border:none; font-size: 14px; border-bottom: 1px solid #ccc !important; color: #474747; line-height: 20px !important; padding: 10px 10px !important; } .navigation.offCanvas ul ul.show { max-height: 100em; opacity: 1; visibility: visible; margin-bottom: 20px; padding-top: 5px; background-color: #eee; border-top: 2px solid #2A95B9; } .navigation.offCanvas ul ul a:hover { background: none !important; background-color: #67b345 !important; font-size: 14px; } .navigation.offCanvas ul ul ul { display: block; left: 0px; } .navigation.offCanvas ul ul ul.show { background-color: #ccc; } .navigation.offCanvas ul ul ul a, .navigation.offCanvas ul ul ul li a { border-bottom: 1px solid #999 !important; color: #333 !important; font-size: 14px !important; margin: 0px !important; background: none !important; padding: 10px 10px !important; } .navigation.offCanvas ul ul ul ul.show { background-color: #fff; } .navigation.offCanvas ul ul ul ul a { border-bottom: 1px solid #ccc; } .navigation.offCanvas li:last-child ul { left:0px; } #outerWrapper.offCanvas { left:240px; overflow: visible; } /********************** END OF - Off Canvas Navigation - Button ******************/ /***************** Main Navigation ***********************/ .navigation ul li ul li:first-of-type a img { width: 200px !important; position: absolute; top: 0; left: -210px; } .navigation ul li ul li:first-of-type { border-left: none; } .navigation { position:relative; float: left; clear:both; width: 100%; margin: 0px; padding: 0px; font-weight: normal !important; font-style: normal !important; } .navigation ul { margin: 0em; padding: 0em; width: 100%; list-style-type: none; list-style-image: none; } .navigation li { font-size: 16px; float: left; position: relative; display: inline; text-align: center; list-style-type: none; list-style-image: none; margin: 0 10px 0px 0px; padding: 0; border-left: 0px; border-bottom: 0px; } .navigation li.lastWithT2 ul { right: 0px; } .navigation li.parent:after { content: "\f0d7"; color: #14bef0; font-size: 14px; font-family: FontAwesome; position: absolute; right: 0px; top: -1px;bottom: 0px; margin: auto; line-height: 14px; height: 15px; padding: 0px 3px 2px 3px; border: 1px solid #14bef0; display: block; border-radius: 3px; } .navigation li.item-832.parent:after { background-color: #23408e; border: 1px solid #23408e; color: #bfc8e0; } .navigation li.item-811.parent:after { background-color: #7C2855; border: 1px solid #7C2855; color: #eac7da; } .navigation li.item-657.parent:after { background-color: #009639; border: 1px solid #009639; color: #d6efdf; } .navigation li.parent.active:after { display : none; } .navigation li.parent:hover:after { display : none; } .navigation li .expandTier { display:none; } /* style the links for the top level */ .navigation a, .navigation a:visited { text-decoration: none; color: #3b8bb3; font-size: 11pt; display: block; font-weight: 300; padding: 0px 1.4em 0px 1.2em; height: 48px; line-height: 50px; -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; transition: all 0s ease-out; text-transform: uppercase; } /********************************************************************************************************/ /* 2ND LEVEL */ /********************************************************************************************************/ /* hide the sub levels and give them a positon absolute so that they take up no room */ .navigation ul ul { visibility: hidden; position: absolute; top: 48px; width: 320px; z-index: 6; text-align: left; margin: 0px; padding: 0px; font-size: 10px; border: 2px solid #ddd; background-color: #fff; border-top: none; border-left: 6px solid #14bef0; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out; } .navigation li:last-child ul {} .navigation ul ul li { margin: 0px; padding: 0px; border: 0px; } .navigation ul ul li.parent:after { content: "\f0da"; color: #14bef0; font-size: 20px; font-family: FontAwesome; position: absolute; right: 10px; top: 2px; bottom: 0px; margin: auto; line-height: 40px; width: 12px; height: 38px; border: none; } /* position the third level flyout menu for a left flyout */ .navigation ul ul.left { left:-77px; z-index: 10; } /* style the second level background a tags*/ .navigation ul ul a, .navigation ul ul a:hover, .navigation ul ul a:visited, .navigation ul ul a.drop, .navigation ul ul a.drop:visited, .navigation ul ul li.current a, .navigation ul ul li a { height: auto; color: #333; line-height: 28px; padding: 5px 10px 5px 10px; text-align: left; display: block; margin: 0px; z-index: 6; font-weight: normal !important; font-style: normal !important; font-size: 10pt; background-color: #fff !important; border: 0px; border-bottom: 1px dotted #ccc; width: 312px; } .navigation ul ul li:last-of-type a { border: none; } /********************************************************************************************************/ /* THIRD LEVEL */ /********************************************************************************************************/ .navigation ul ul ul { background-color: #c2e9f7; top: 0; left: 310px; padding: 0px; width: 100%; z-index: 10; border: none; } .navigation ul ul ul li { width: 100%; margin: 0px; } .navigation ul ul ul li:last-of-type a { border: none; } /* style the third level */ .navigation ul ul ul a, .navigation ul ul ul a:visited, .navigation ul ul ul a:hover { height: 35px; display: block; line-height: 35px; text-decoration: none; border-bottom: 1px solid #fff; color: #005EB8; text-align: left; z-index: 10; width: 100% !important; font-weight: normal !important; font-style: normal !important; float: none; background: none !important; padding: 0px 10px 0px 20px !important; margin: 0px; } /* style the top level hover */ /* .menu :hover > a :::: styles tier one when hovering tier 2 */ .navigation a:hover, .navigation li.current > a, .navigation li.active.deeper > a, .menu :hover > a { color: #fff; background: #14bef0 !important; text-decoration: none; } .navigation li.item-832 a:hover, .navigation li.item-832.current > a, .navigation li.item-832.active.deeper > a, .menu :hover > li.item-832 > a { background: #005EB8 !important; color: #fff; } /* SECTION COLOURING - Families */ .navigation li.item-811 a:hover, .navigation li.item-811.current > a, .navigation li.item-811.active.deeper > a, .menu :hover > li.item-811 > a { background: #7C2855 !important; color: #fff; } /* SECTION COLOURING - CYP Professionals */ .navigation li.item-657 a:hover, .navigation li.item-657.current > a, .navigation li.item-657.active.deeper > a, .menu :hover > li.item-657 > a { background: #009639 !important; color: #fff; } /* SECTION COLOURING - Research */ .navigation ul ul :hover > a { text-decoration: none; z-index: 6; } /* style the second level hover */ .navigation ul ul a:hover { text-decoration: none; color: #fff; background-color: #14bef0 !important; z-index: 6; background-image: none; } /* style the third level hover */ .navigation ul ul ul a:hover, .navigation ul ul ul li.active a { text-decoration: none; color: #fff; background-color: #005EB8 !important; background-image: none; margin: 0px; width: 100%; border-bottom: 1px solid #fff; height: 35px; display: block; line-height: 35px; } /* DON'T EDIT THESE ONES BELOW */ .navigation ul li:hover ul, .navigation ul a:hover ul { visibility:visible; } /* make the second level visible when hover on first level list OR link */ .navigation ul :hover ul ul { visibility:hidden; } /* keep the third level hidden when you hover on first level list OR link */ .navigation ul :hover ul :hover ul { visibility:visible; } /* make the third level visible when you hover over second level list OR link */ .navigationtable { position:absolute; top:0; left:0; } /* style the table so that it takes no part in the layout - required for IE to work */ /***************************************************************************/ /* End of navigation */ /***************************************************************************/ /* SECTION COLOURING - Families */ .navigation ul li.item-832 ul { border-left: 6px solid #005EB8; } .navigation ul li.item-832 ul a:hover { background-color: #d4e7f9 !important; color: #005eb8; } .navigation ul li.item-832 ul li.parent:after { color: #005EB8; } .navigation ul li.item-832 ul li.active > a { background-color: #d4e7f9 !important; color: #005eb8; } .navigation ul li.item-832 ul ul { background-color: #6b9bca; } .navigation ul li.item-832 ul ul a, .navigation ul .item-832 ul ul a:visited, .navigation ul .item-832 ul ul a:hover { color: #ffffff; } .navigation ul li.item-832 ul ul a:hover, .navigation ul .item-832 ul ul li.active a { background-color: #005EB8 !important; color: #fff; } /* SECTION COLOURING - CYP Professionals */ .navigation ul li.item-811 ul { border-left: 6px solid #7C2855; } .navigation ul li.item-811 ul a:hover { background-color: #f7ddea !important; color: #7c2855; } .navigation ul li.item-811 ul li.parent:after { color: #7C2855; } .navigation ul li.item-811 ul li.active > a { background-color: #f7ddea !important; color: #7c2855; } .navigation ul li.item-811 ul ul { background-color: #dea0c0; } .navigation ul li.item-811 ul ul a, .navigation ul li.item-811 ul ul a:visited, .navigation ul li.item-811 ul ul a:hover { color: #ffffff; } .navigation ul li.item-811 ul ul a:hover, .navigation ul li.item-811 ul ul li.active a { background-color: #7C2855 !important; color: #fff; } /* SECTION COLOURING - Research */ .navigation ul li.item-657 ul { border-left: 6px solid #009639; } .navigation ul li.item-657 ul a:hover { background-color: #daf5e4 !important; color: #009639; } .navigation ul li.item-657 ul li.parent:after { color: #009639; } .navigation ul li.item-657 ul li.active > a { background-color: #daf5e4 !important; color: #009639; } .navigation ul li.item-657 ul ul { background-color: #daf5e4; } .navigation ul li.item-657 ul ul a, .navigation ul li.item-657 ul ul a:visited, .navigation ul li.item-657 ul ul a:hover { color: #024019; } .navigation ul li.item-657 ul ul a:hover, .navigation ul li.item-657 ul ul li.active a { background-color: #009639 !important; color: #fff; } /***************************************************************************/ /************* "sectionNav - Generic " Navigation ****************/ /***************************************************************************/ .sectionNav { background-color: #E8EDEE; padding: 10px; margin-top: 110px; border-left: 8px solid #005EB8; } .sectionNav ul li { margin-bottom: 0; position: relative; border-bottom: 1px dotted #768692; } .sectionNav ul li a { color: #768692; text-transform: uppercase; line-height: 30px; padding: 10px; font-size: 18px; display: block; } .sectionNav ul li a:hover, .sectionNav ul li.active>a:hover { color: #fff; background-color: #14bef0; } .sectionNav ul li.current a { color: #000; } .sectionNav ul li.active>a { color: #005EB8; } .sectionNav ul li:first-of-type a { background-color: #005EB8; margin: -10px -10px 0px -10px; color: #fff; } .sectionNav ul li ul { margin: 0 0 0 10px; } .sectionNav ul li ul li { border: none; } .sectionNav ul li ul li a, .sectionNav ul li.active ul li a, .sectionNav ul li ul li:first-of-type a { font-size: 15px; color: #425563; text-transform: capitalize; padding: 0px 5px; margin: 0px; background: none; } .sectionNav ul li ul li a:hover { background-color: #425563 !important; color: #fff; } .sectionNav ul li ul li.active a { color: #41B6E6; } .sectionNav ul li ul li.active a:before { content: "\f0da"; color: #41B6E6; font-size: 20px; font-family: FontAwesome; position: absolute; left: -8px; top: 0px; } .sectionNav ul li ul li.active a:hover { color: #fff; } .sectionNav .menu :hover > a { color: #fff; background: #41B6E6 !important; } /* .menu :hover > a :::: styles tier one when hovering tier 2 */ /***************************************************************************/ /************* "sectionNav - Research" Navigation ****************/ /***************************************************************************/ .sectionNavResearch { background-color: #E8EDEE; padding: 10px; margin-top: 110px; border-left: 8px solid #009639; } .sectionNavResearch ul li { margin-bottom: 0; position: relative; border-bottom: 1px dotted #768692; } .sectionNavResearch ul li a { color: #768692; text-transform: uppercase; line-height: 30px; padding: 10px; font-size: 18px; display: block; } .sectionNavResearch ul li a:hover, .sectionNavResearch ul li.active>a:hover { color: #fff; background-color: #009639 !important; } .sectionNavResearch ul li.current a { color: #000; } .sectionNavResearch ul li.active>a { color: #009639; } .sectionNavResearch ul li:first-of-type a { background-color: #009639; margin: -10px -10px 0px -10px; color: #fff; } .sectionNavResearch ul li ul { margin: 0 0 0 10px; } .sectionNavResearch ul li ul li { border: none; } .sectionNavResearch ul li ul li a, .sectionNavResearch ul li.active ul li a, .sectionNavResearch ul li ul li:first-of-type a { font-size: 15px; color: #425563; text-transform: capitalize; padding: 0px 5px; margin: 0px; background: none; } .sectionNavResearch ul li ul li a:hover { background-color: #425563 !important; color: #fff; } .sectionNavResearch ul li ul li.active a { color: #78BE20; } .sectionNavResearch ul li ul li.active a:before { content: "\f0da"; color: #78BE20; font-size: 20px; font-family: FontAwesome; position: absolute; left: -8px; top: 0px; } .sectionNavResearch ul li ul li.active a:hover { color: #fff; } .sectionNavResearch .menu :hover > a { color: #fff; background: #009639 !important; } /* .menu :hover > a :::: styles tier one when hovering tier 2 */ /***************************************************************************/ /************* "sectionNav - Professionals" Navigation ****************/ /***************************************************************************/ .sectionNavProfessionals { background-color: #E8EDEE; padding: 10px; margin-top: 110px; border-left: 8px solid #7C2855; } .sectionNavProfessionals ul li { margin-bottom: 0; position: relative; border-bottom: 1px dotted #768692; } .sectionNavProfessionals ul li a { color: #768692; text-transform: uppercase; line-height: 30px; padding: 10px; font-size: 18px; display: block; } .sectionNavProfessionals ul li a:hover, .sectionNavProfessionals ul li.active>a:hover { color: #fff; background-color: #AE2573 !important; } .sectionNavProfessionals ul li.current a { color: #000; } .sectionNavProfessionals ul li.active>a { color: #7C2855; } .sectionNavProfessionals ul li:first-of-type a { background-color: #7C2855; margin: -10px -10px 0px -10px; color: #fff; } .sectionNavProfessionals ul li ul { margin: 0 0 0 10px; } .sectionNavProfessionals ul li ul li { border: none; } .sectionNavProfessionals ul li ul li a, .sectionNavProfessionals ul li.active ul li a, .sectionNavProfessionals ul li ul li:first-of-type a { font-size: 15px; color: #425563; text-transform: capitalize; padding: 0px 5px; margin: 0px; background: none; } .sectionNavProfessionals ul li ul li a:hover { background-color: #425563 !important; color: #fff; } .sectionNavProfessionals ul li ul li.active a { color: #AE2573; } .sectionNavProfessionals ul li ul li.active a:before { content: "\f0da"; color: #AE2573; font-size: 20px; font-family: FontAwesome; position: absolute; left: -8px; top: 0px; } .sectionNavProfessionals ul li ul li.active a:hover { color: #fff; } .sectionNavProfessionals .menu :hover > a { color: #fff; background: #AE2573 !important; } /* .menu :hover > a :::: styles tier one when hovering tier 2 */ /***************************************************************************/ /* End of "sectionNav Navigation" */ /***************************************************************************/ /* ========================================================================== IE8 SPECIFIC FIXES / OVERRIDES ========================================================================== */ .ie8 .mainPageWrapper{ width: 100% } .ie8 .headerContent, .ie8 .item-page, .ie8 .fullWidthModule .moduleContent, .ie8 .rainbowBlocks, .ie8 .finder.searchResults { width: 940px; margin: auto; } .ie8 .item-page { margin-bottom: 150px; } .ie8 .footerContent { width: 920px; } .ie8 .moduletable.compStrapline p { font-size: 24px; } /* NAV */ .ie8 .navigation a, .ie8 .navigation a:visited { font-size: 14px; padding: 0px 1.4em 0px 0.5em; } .ie8 .navigation li.parent:after { font-size: 14px; right: 2px; } .ie8 .navigation ul.nav > li:first-of-type img { width: 16px !important; } .ie8 .navigation ul.nav > li:first-of-type a { padding-right: 0.7em; padding-left: 0.7em; } .ie8 .navigation ul ul { padding: 20px 0px 20px 140px; width: 554px; } .ie8 .navigation ul ul a, .ie8 .navigation ul ul a:hover, .ie8 .navigation ul ul a:visited, .ie8 .navigation ul ul a.drop, .ie8 .navigation ul ul a.drop:visited, .ie8 .navigation ul ul li.current a, .ie8 .navigation ul ul li a { padding: 0px 10px 0px 10px; width: 150px; font-size: 90%; } .ie8 .navigation ul li ul li:first-of-type a img { width: 130px !important; left: -130px; } .ie8 .navigation ul ul ul { width: 100%; padding: 0px; } .ie8 .navigation ul ul ul a, .ie8 .navigation ul ul ul li a { width: 100%; } /* Page Images Right */ .ie8 .pageImageRight { width: 275px; } /* Footer */ .ie8 .footerNav ul.menu > li { min-height: 290px; } .ie8 .footerStrapline p { font-size: 35px; margin-right: 40px; } a.oobalink { color: #555; } /* PAGE - Home */ .ie8 .uk-overlay-panel { padding-top: 0px !important; } .ie8 .uk-slideshow h3 { padding: 15px 35px; font-size: 35px; } .ie8 .uk-slideshow .uk-margin { padding: 10px; } .ie8 .uk-slideshow .uk-margin p { font-size: 18px; line-height: 20px; } .ie8 .uk-slideshow .uk-margin ul { margin-top: -15px; } .ie8 .uk-slideshow .uk-margin ul li { font-size: 18px; } .ie8 .uk-slideshow a.uk-button { margin-top: 15px; } .ie8 .uk-touch .uk-slidenav-position .uk-hidden-touch { display: block !important; } .ie8 .tileNav h2 { font-size: 25pt; } .ie8 .tileNav p { font-size: 21px; line-height: 25px; } .ie8 #pageOverride-101 .sliderIE8 { margin-bottom: 40px; } .ie8 .tileNav .custom:after { background: none; background-image: url(/images/design-elements/ie8_blueOverlay.png); } .ie8 .tileNav:hover .custom:after { background: none; background-image: url(/images/design-elements/ie8_blueOverlayHover.png); } /* PAGE - Our Partners */ .ie8 .item-page.ourPartners div[itemprop="articleBody"] p img { margin: 15px 30px 15px 0px; } /* PAGE - News Listing */ .ie8 .backbutton a { width: 200px; padding-left: 15px; } .ie8 .allmode-item { width: 46% !important; margin-right: 74px !important; } .ie8 .allmode-item .allmode-title { width: 60% !important; } .ie8 .ooba-news .allmode-item .allmode-text { width: 60% !important; line-height: 20px !important; font-size: 16px !important; } .ie8 .allmode-item:nth-of-type(3n) { margin-right: 74px !important; } .ie8 .allmode-item:nth-of-type(2n) { margin-right: 0px !important; } .ie8 .ooba-news .allmode-readmore { left: 40% !important; } /* PAGE - Search Results */ .ie8 #search-form { width: 50%; } /* MOD - Newslettter Signup */ .ie8 .newsletterSignup h5 { font-size: 21px; } .ie8 .newsletterSignup .jsn-master .jsn-bootstrap .form-actions { width: 220px; } .ie8 .newsletterSignup .jsn-master .jsn-form-content { width: 65%; } /***************************************************************************/ /* MEDIA QUERIES */ /***************************************************************************/ @media only screen and (min-width: 120px) and (max-width: 767px) { .navigation { position: absolute; left: -1000px; opacity: 0; -webkit-transition: opacity 1s linear 0.2s; -moz-transition: opacity 1s linear 0.2s; transition: opacity 1s linear 0.2s; } #mainNavigation { position: absolute; left: 0; top: 0; } #offCanvasNavButtonWrapper { display:block !important; } } @media only screen and (min-width: 120px) and (max-width: 479px) { #mainContent { min-height: 270px; } #header .span3:first-of-type { text-align: center; } #header-top .span12 { min-height: 40px; } #header-top .moduletable.telephone a { margin: 9px; } #messageBar { height: auto; } #messageBar p { line-height: 1.8em; text-align: center; padding: 10px 40px; font-size: 12pt; } #messageBar a { position: relative; margin: 8px auto 20px auto; } .item-page { padding: 20px; position: inherit; } #productsServices .span4 { margin: 24px 4%; width: 92%;} #extraFooterInfo { background-image: none; height: auto; padding: 20px 20px; } #extraFooterInfo .span6 { text-align: center; } .introImageWrapper { float: none; width: 100%; } .newsItemWrapper p { line-height: 1.4em; } .readmore { position: relative; display: block; text-align: center; } .pull-left.item-image img { margin: 0px 0px 20px 0px; } .pull-right.item-image img { margin: 0px 0px 20px 0px; } } @media only screen and (min-width: 480px) and (max-width: 599px) { #header .span3:first-of-type { text-align: center; } #header-top .span12 { min-height: 40px; } #header-top .moduletable.telephone a { margin: 9px; } #messageBar { height: auto; } #messageBar p { line-height: 1.8em; text-align: center; padding: 10px 40px; font-size: 12pt; } #messageBar a { position: relative; margin: 8px auto 20px auto; } .item-page { padding: 20px; position: inherit; } #productsServices .span4 { margin: 24px 4%; width: 92%;} #extraFooterInfo { background-image: none; height: auto; padding: 20px 20px; } #extraFooterInfo .span6 { text-align: center; } .introImageWrapper { float: none; width: 100%; } .newsItemWrapper p { font-size: 8pt; line-height: 1.4em; } .readmore { position: relative; display: block; text-align: center; } } @media only screen and (min-width: 600px) and (max-width: 767px) { #header .span3:first-of-type { text-align: center; } #header-top .span12 { min-height: 40px; } #header-top .moduletable.telephone a { margin: 9px; } #messageBar { height: auto; } #messageBar p { line-height: 1.8em; text-align: center; padding: 10px 40px; font-size: 12pt; } #messageBar a { position: relative; margin: 8px auto 20px auto; } #productsServices .span4 { margin: 24px 10%; width: 80%;} #extraFooterInfo { background-image: none; height: auto; padding: 20px 20px; } #extraFooterInfo .span6 { text-align: center; } .introImageWrapper { float: none; width: 100%; } .newsItemWrapper p { line-height: 1.4em; } .readmore { position: relative; display: block; text-align: center; } .item-page { padding: 20px; position: inherit; } .item-image { width: 50%; padding: 20px; } .pull-left.item-image img { margin: 0px 20px 0px 0px; } .pull-right.item-image img { margin: 0px 0px 0px 20px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { #header .span3:first-of-type { text-align: center; } .logoCompany { max-width: 160px; } #header-top .span12 { min-height: 40px; } #header-top .moduletable.telephone a { margin: 9px; } #mainContent { min-height: 630px; } #messageBar { height: auto; } #messageBar p { line-height: 1.8em; text-align: center; padding: 10px 40px; font-size: 12pt; } #messageBar a { position: relative; margin: 8px auto 20px auto; } .navigation { margin: 11px 0px !important; } .navigation a, .navigation a:visited { font-size: 80%; padding: 0px 0.5em 0px 0.5em; } .newsItemWrapper p { font-size: 8pt; line-height: 1.4em; } .readmore { padding: 0px 5px; border-radius: 3px; font-size: 7pt; right: 0px; bottom: -4px; } .item-page { padding: 0px; position: inherit; } .item-image { width: 50%; padding: 20px; } .pull-left.item-image img { margin: 0px 20px 0px 0px; } .pull-right.item-image img { margin: 0px 0px 0px 20px; } .backbutton a { width: 90px; } } @media only screen and (min-width: 960px) and (max-width: 1030px) { #messageBar p { font-size: 10pt; } .item-page { padding: 0px; position: inherit; } .newsItemWrapper p { font-size: 10pt; line-height: 1.4em; } .readmore { padding: 0px 5px; border-radius: 3px; font-size: 8pt; right: 2px; sbottom: 2px; } /* .backbutton a { position: absolute; top: -18px; left: 15px; width: 50px; border: none; padding: 2px 3px 3px 3px; } */ }