/*********************************************************************/ /***** BEGIN DESIGN TOOLS THEME IMPORT & CUSTOMIZATION **************/ /*********************************************************************/ /* This file contains variations of the Bootstrap 4.0.0-beta code released under the following license */ /* .kl_wrapper was added to prevent interference with core Canvas styles */ /*The MIT License (MIT)*/ /*Copyright (c) 2011-2017 Twitter, Inc.*/ /*Copyright (c) 2011-2017 The Bootstrap Authors*/ /*Permission is hereby granted, free of charge, to any person obtaining a copy*/ /*of this software and associated documentation files (the "Software"), to deal*/ /*in the Software without restriction, including without limitation the rights*/ /*to use, copy, modify, merge, publish, distribute, sublicense, and/or sell*/ /*copies of the Software, and to permit persons to whom the Software is*/ /*furnished to do so, subject to the following conditions:*/ /*The above copyright notice and this permission notice shall be included in*/ /*all copies or substantial portions of the Software.*/ /*THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR*/ /*IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,*/ /*FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE*/ /*AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER*/ /*LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,*/ /*OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN*/ /*THE SOFTWARE.*/ /* Import statements need to be at the top of your CSS file */ @import url(https://files.ciditools.com/fontawesome-5.13.0/css/all.min.css); @import url(https://fonts.googleapis.com/css?family=PT+Sans); @import url(https://fonts.googleapis.com/css?family=Satisfy); :root { /*--blue: #007bff;*/ /*--indigo: #6610f2;*/ /*--purple: #6f42c1;*/ /*--pink: #e83e8c;*/ --red: #dc3545; /*--orange: #fd7e14;*/ --yellow: #ffc107; --green: #28a745; /*--teal: #20c997;*/ --cyan: #17a2b8; --white: #ffffff; /*--gray: #6c757d;*/ --gray-dark: #343a40; --primary-alert-link: #002752; --primary-text: #004085; --primary-hover-dark: #0054ad; --primary-border: #0062cc; --primary: #006fe6; --primary-hover-light: #9fcdff; --primary-bg-light: #b8daff; --primary-bg-lighter: #cce5ff; --primary-contrast: #ffffff; --secondary-alert-link: #202326; --secondary-text: #383d41; --secondary-border: #545b62; --secondary-hover-dark: #5a6268; --secondary: #6f767e; --secondary-hover-light: #c8cbcf; --secondary-bg-light: #d6d8db; --secondary-bg-lighter: #e2e3e5; --secondary-contrast: #ffffff; --info-alert-link: #062c33; --info-text: #0c5460; --info-border: #117a8b; --info-hover-dark: #138496; --info: #54bbcb; --info-hover-light: #abdde5; --info-bg-light: #bee5eb; --info-bg-lighter: #d1ecf1; --info-contrast: #000000; --dark-alert-link: #040505; --dark-text: #1b1e21; --dark-border: #23272b; --dark-hover-dark: #32383e; --dark: #343a40; --dark-hover-light: #b9bbbe; --dark-bg-light: #c6c8ca; --dark-bg-lighter: #d6d8d9; --dark-contrast: #ffffff; --mid-alert-link: #040505; --mid-text: #2D3B45; --mid-border: #C7CDD1; --mid-border-dark: #999999; --mid-hover-dark: #666666; --mid: #f5f5f5; --mid-hover-light: #e8e8e8; --mid-bg-light: #f5f5f5; --mid-bg-lighter: #f5f5f5; --mid-contrast: #000000; --light-alert-link: #686868; --light-hover-text: #686868; --light-text: #727272; --light-border: #d3d9df; --light-hover-light: #e2e6ea; --light-bg-light: #e9ecef; --light: #f8f9fa; --light-bg-lighter: #fdfdfe; --light-contrast: #000000; --success-alert-link: #0b2e13; --success-text: #155724; --success-border: #1e7e34; --success-hover-dark: #1a7830; --success: #1c8536; --success-hover-light: #b1dfbb; --success-bg-light: #c3e6cb; --success-bg-lighter: #d4edda; --success-contrast: #FFFFFF; --danger-alert-link: #491217; --danger-text: #721c24; --danger-border: #bd2130; --danger-hover-dark: #c82333; --danger: #d50510; --danger-hover-light: #f1b0b7; --danger-bg-light: #f5c6cb; --danger-bg-lighter: #f8d7da; --danger-contrast: #FFFFFF; --warning-alert-link: #533f03; --warning-text: #856404; --warning-border: #c69500; --warning-hover-dark: #e0a800; --warning: #ffc107; --warning-hover-light: #ffe8a1; --warning-bg-light: #ffeeba; --warning-bg-lighter: #fff3cd; --warning-contrast: #533f03; --bs-focus: #80bdff; --bs-light-blue: #b3d7ff; --bs-gray-border: #ced4da; --bs-gray-border: #dee2e6; --bs-popover-light-gray: #f7f7f7; --bs-link-hover: #0056b3; --bs-mark: #fcf8e3; --bs-blockquote-border: #adb5bd; --bs-text: #212529; --bs-gray-text-dark: #495057; --bs-input-valid:#34ce57; --bs-input-valid-light:#71dd8a; --bs-input-invalid:#e4606d; --bs-input-invalid-light:#efa2a9; --bs-ui-light-gray: #e9ecef; --bs-disabled-gray: #6f767e; --bs-gray-text: #6f767e; --bs-light-gray-border: #dee2e6; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Bootstrap Bootstrap Badges */ .kl_wrapper .bs-badge {display: inline-block; padding: .25em .4em; font-size: 80%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; text-shadow: none; font-style: normal; } .kl_wrapper .bs-text {padding: 2px 4px; font-style: normal; } .kl_wrapper a.bs-badge:hover {text-decoration: none; } .kl_wrapper .bs-text-primary, .kl_wrapper .bs-badge-primary {color: #fff; background-color: #006fe6; } .kl_wrapper .bs-text-secondary, .kl_wrapper .bs-badge-secondary {color: #fff; background-color: #6f767e; } .kl_wrapper .bs-text-success, .kl_wrapper .bs-badge-success {color: #fff; background-color: #1c8536; } .kl_wrapper .bs-text-danger, .kl_wrapper .bs-badge-danger {color: #fff; background-color: #d50510; } .kl_wrapper .bs-text-warning, .kl_wrapper .bs-badge-warning {color: #111; background-color: #ffc107; } .kl_wrapper a.bs-badge-warning:hover {color: #000; } .kl_wrapper .bs-text-info, .kl_wrapper .bs-badge-info {color: #000; background-color: #54bbcb; } .kl_wrapper .bs-text-light, .kl_wrapper .bs-badge-light {color: #111; background-color: #f8f9fa; } .kl_wrapper .bs-text-dark, .kl_wrapper .bs-badge-dark {color: #fff; background-color: #343a40; } /* Bootstrap Pill Badge */ .kl_wrapper .bs-badge-pill {padding-right: .6em; padding-left: .6em; border-radius: 10rem; } /* Bootstrap Alerts */ .kl_wrapper .bs-alert {padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; overflow: hidden; } .kl_wrapper .bs-alert-primary {color: #004085; background-color: #cce5ff; border-color: #b8daff; } .kl_wrapper .bs-alert-secondary {color: #464a4e; background-color: #e7e8ea; border-color: #dddfe2; } .kl_wrapper .bs-alert-success {color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .kl_wrapper .bs-alert-danger {color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .kl_wrapper .bs-alert-warning {color: #856404; background-color: #fff3cd; border-color: #ffeeba; } .kl_wrapper .bs-alert-info {color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .kl_wrapper .bs-alert-light {color: #757576; background-color: #fefefe; border-color: #fdfdfe; } .kl_wrapper .bs-alert-dark {color: #1b1e21; background-color: #d6d8d9; border-color: #c6c8ca; } .kl_wrapper .bs-breadcrumb {padding: .75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: #e9ecef; border-radius: .25rem; } .kl_wrapper .bs-breadcrumb-item {float: left; } .kl_wrapper .bs-breadcrumb-item+.breadcrumb-item::before {display: inline-block; padding-right: .5rem; padding-left: .5rem; color: #6f767e; content: "/"; } .kl_wrapper .bs-breadcrumb-item.active {color: #6f767e; } .kl_wrapper .bs-btn {display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; border: 1px solid transparent; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; border-radius: .25rem; transition: all .15s ease-in-out; } .user_content div.kl_wrapper a.bs-btn {text-decoration: none !important; } .kl_wrapper .bs-btn-primary {color: #fff; background-color: #006fe6; border-color: #006fe6; } .kl_wrapper .bs-btn-primary.active, .kl_wrapper .bs-btn-primary:focus, .kl_wrapper .bs-btn-primary:hover {color: #fff; background-color: #0054ad; border-color: #0062cc; } .kl_wrapper .bs-btn-secondary {color: #fff; background-color: #6f767e; border-color: #6f767e; } .kl_wrapper .bs-btn-secondary.active, .kl_wrapper .bs-btn-secondary:focus, .kl_wrapper .bs-btn-secondary:hover {color: #fff; background-color: #52575d; border-color: #6c757d; } .kl_wrapper .bs-btn-success {color: #fff; background-color: #1c8536; border-color: #1c8536; } .kl_wrapper .bs-btn-success.active, .kl_wrapper .bs-btn-success:focus, .kl_wrapper .bs-btn-success:hover {color: #fff; background-color: #19692b; border-color: #1e7e34; } .kl_wrapper .bs-btn-danger {color: #fff; background-color: #d50510; border-color: #d50510; } .kl_wrapper .bs-btn-danger.active, .kl_wrapper .bs-btn-danger:focus, .kl_wrapper .bs-btn-danger:hover {color: #fff; background-color: #c82333; border-color: #bd2130; } .kl_wrapper .bs-btn-warning {color: #111; background-color: #ffc107; border-color: #ffc107; } .kl_wrapper .bs-btn-warning.active, .kl_wrapper .bs-btn-warning:focus, .kl_wrapper .bs-btn-warning:hover {color: #111; background-color: #e0a800; border-color: #d39e00; } .kl_wrapper .bs-btn-info {color: #000; background-color: #54bbcb; border-color: #54bbcb; } .kl_wrapper .bs-btn-info.active, .kl_wrapper .bs-btn-info:focus, .kl_wrapper .bs-btn-info:hover {color: #fff; background-color: #138496; border-color: #117a8b; } .kl_wrapper .bs-btn-light {color: #111; background-color: #f8f9fa; border-color: #f8f9fa; } .kl_wrapper .bs-btn-light.active, .kl_wrapper .bs-btn-light:focus, .kl_wrapper .bs-btn-light:hover {color: #111; background-color: #e2e6ea; border-color: #dae0e5; } .kl_wrapper .bs-btn-mid {background: #f5f5f5; color: #2D3B45; border-color: #C7CDD1; } .kl_wrapper .bs-btn-mid.active, .kl_wrapper .bs-btn-mid:focus, .kl_wrapper .bs-btn-mid:hover {background: #e8e8e8; color: #2D3B45; } .kl_wrapper .bs-btn-dark {color: #fff; background-color: #343a40; border-color: #343a40; } .kl_wrapper .bs-btn-dark.active, .kl_wrapper .bs-btn-dark:focus, .kl_wrapper .bs-btn-dark:hover {color: #fff; background-color: #6c7075; border-color: #1d2124; } .kl_wrapper .bs-btn-link, .kl_wrapper .bs-btn-link:active, .kl_wrapper .bs-btn-link:focus {border-color: transparent; box-shadow: none; background: transparent; } #kl_wrapper_3.kl_wrapper a.bs-btn-link:focus, #kl_wrapper_3.kl_wrapper a.bs-btn-link:hover, .kl_wrapper a.bs-btn-link:focus, .kl_wrapper a.bs-btn-link:hover {text-decoration: underline !important; background-color: transparent; } /* Bootstrap Outline Buttons */ .kl_wrapper .bs-btn-outline-primary {color: #006fe6; background-color: #fff; background-image: none; border-color: #006fe6; } .kl_wrapper .bs-btn-outline-primary.active, .kl_wrapper .bs-btn-outline-primary:focus, .kl_wrapper .bs-btn-outline-primary:hover {color: #fff; background-color: #006fe6; background-image: none; border-color: #006fe6; } .kl_wrapper .bs-btn-outline-secondary {color: #6f767e; background-color: #fff; background-image: none; border-color: #6f767e; } .kl_wrapper .bs-btn-outline-secondary.active, .kl_wrapper .bs-btn-outline-secondary:focus, .kl_wrapper .bs-btn-outline-secondary:hover {color: #fff; background-color: #6f767e; background-image: none; border-color: #6f767e; } .kl_wrapper .bs-btn-outline-success {color: #1c8536; background-color: #fff; background-image: none; border-color: #1c8536; } .kl_wrapper .bs-btn-outline-success.active, .kl_wrapper .bs-btn-outline-success:focus, .kl_wrapper .bs-btn-outline-success:hover {color: #fff; background-color: #1c8536; background-image: none; border-color: #1c8536; } .kl_wrapper .bs-btn-outline-danger {color: #d50510; background-color: #fff; background-image: none; border-color: #d50510; } .kl_wrapper .bs-btn-outline-danger.active, .kl_wrapper .bs-btn-outline-danger:focus, .kl_wrapper .bs-btn-outline-danger:hover {color: #fff; background-color: #d50510; background-image: none; border-color: #d50510; } .kl_wrapper .bs-btn-outline-warning {color: #9f6d00; background-color: #fff; background-image: none; border-color: #9f6d00; } .kl_wrapper .bs-btn-outline-warning.active, .kl_wrapper .bs-btn-outline-warning:focus, .kl_wrapper .bs-btn-outline-warning:hover {color: #000; background-color: #ffc107; background-image: none; border-color: #ffc107; } .kl_wrapper .bs-btn-outline-info {color: #3c808b; background-color: #fff; background-image: none; border-color: #3c808b; } .kl_wrapper .bs-btn-outline-info.active, .kl_wrapper .bs-btn-outline-info:focus, .kl_wrapper .bs-btn-outline-info:hover {color: #000; background-color: #54bbcb; background-image: none; border-color: #54bbcb; } .kl_wrapper .bs-btn-outline-light {color: #727272; background-color: #fff; background-image: none; border-color: #f8f9fa; } .kl_wrapper .bs-btn-outline-light.active, .kl_wrapper .bs-btn-outline-light:focus, .kl_wrapper .bs-btn-outline-light:hover {color: #111; background-color: #e2e6ea; background-image: none; border-color: #dae0e5; } .kl_wrapper .bs-btn-outline-mid {color: #666666; background-color: #fff; background-image: none; border-color: #999999; } .kl_wrapper .bs-btn-outline-mid.active, .kl_wrapper .bs-btn-outline-mid:focus, .kl_wrapper .bs-btn-outline-mid:hover {color: #fff; background-color: #666666; background-image: none; border-color: #999999; } .kl_wrapper .bs-btn-outline-dark {color: #343a40; background-color: #fff; background-image: none; border-color: #343a40; } .kl_wrapper .bs-btn-outline-dark.active, .kl_wrapper .bs-btn-outline-dark:focus, .kl_wrapper .bs-btn-outline-dark:hover {color: #fff; background-color: #343a40; background-image: none; border-color: #343a40; } /* Bootstrap Button Disabled states */ .bs-btn.disabled, .bs-btn:disabled {opacity: .65; } .bs-btn-primary.disabled, .bs-btn-primary:disabled {background-color: #007bff; border-color: #007bff; } .bs-btn-secondary.disabled, .bs-btn-secondary:disabled {background-color: #868e96; border-color: #868e96; } .bs-btn-success.disabled, .bs-btn-success:disabled {background-color: #28a745; border-color: #28a745; } .bs-btn-danger.disabled, .bs-btn-danger:disabled {background-color: #dc3545; border-color: #dc3545; } .bs-btn-warning.disabled, .bs-btn-warning:disabled {background-color: #ffc107; border-color: #ffc107; } .bs-btn-info.disabled, .bs-btn-info:disabled {background-color: #17a2b8; border-color: #17a2b8; } .bs-btn-light.disabled, .bs-btn-light:disabled {background-color: #f8f9fa; border-color: #f8f9fa; } .bs-btn-dark.disabled, .bs-btn-dark:disabled {background-color: #343a40; border-color: #343a40; } .bs-btn-outline-primary.disabled, .bs-btn-outline-primary:disabled {color: #007bff; background-color: transparent; } .bs-btn-outline-secondary.disabled, .bs-btn-outline-secondary:disabled {color: #868e96; background-color: transparent; } .bs-btn-outline-success.disabled, .bs-btn-outline-success:disabled {color: #28a745; background-color: transparent; } .bs-btn-outline-danger.disabled, .bs-btn-outline-danger:disabled {color: #dc3545; background-color: transparent; } .bs-btn-outline-warning.disabled, .bs-btn-outline-warning:disabled {color: #ffc107; background-color: transparent; } .bs-btn-outline-info.disabled, .bs-btn-outline-info:disabled {color: #17a2b8; background-color: transparent; } .bs-btn-outline-light.disabled, .bs-btn-outline-light:disabled {color: #f8f9fa; background-color: transparent; } .bs-btn-outline-dark.disabled, .bs-btn-outline-dark:disabled {color: #343a40; background-color: transparent; } /* Bootstrap Button Sizes */ .kl_wrapper .bs-btn-group-lg>.bs-btn, .kl_wrapper .bs-btn-lg {padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; } .kl_wrapper .bs-btn-group-sm>.bs-btn, .kl_wrapper .bs-btn-sm {padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; } .kl_wrapper .bs-btn-group-xs>.bs-btn, .kl_wrapper .bs-btn-xs {padding: .20rem .4rem; font-size: .775rem; line-height: 1.25; border-radius: .1rem; } .kl_wrapper .bs-btn-block {display: block; width: 100%; } /* Bootstrap Button Groups */ .kl_wrapper .bs-btn-group, .kl_wrapper .bs-btn-group-vertical {position: relative; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } .kl_wrapper .bs-btn-group>.bs-btn:first-child:not(:last-child):not(.dropdown-toggle) {border-top-right-radius: 0; border-bottom-right-radius: 0; } .kl_wrapper .bs-btn-group>.bs-btn:first-child {margin-left: 0; } .kl_wrapper .bs-btn-group-vertical {display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: center; justify-content: center; } .kl_wrapper .bs-btn-group-vertical>.bs-btn, .kl_wrapper .bs-btn-group>.bs-btn {position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; margin-bottom: 0; } .kl_wrapper .bs-btn-group>.bs-btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {border-radius: 0; } .kl_wrapper .bs-btn-group-vertical>.bs-btn:first-child:not(:last-child) {border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .kl_wrapper .bs-btn-group-vertical .bs-btn, .kl_wrapper .bs-btn-group-vertical .bs-btn-group {width: 100%; } .kl_wrapper .bs-btn-group-vertical>.bs-btn, .kl_wrapper .bs-btn-group>.bs-btn {position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; margin-bottom: 0; } .kl_wrapper .bs-btn-group a.bs-btn+.bs-btn, .kl_wrapper .bs-btn-group a.bs-btn+.bs-btn-group, .kl_wrapper .bs-btn-group .bs-btn-group+a.bs-btn, .kl_wrapper .bs-btn-group .bs-btn-group+.bs-btn-group, .kl_wrapper .bs-btn-group-vertical a.bs-btn+a.bs-btn, .kl_wrapper .bs-btn-group-vertical a.bs-btn+.bs-btn-group, .kl_wrapper .bs-btn-group-vertical .bs-btn-group+a.bs-btn, .kl_wrapper .bs-btn-group-vertical .bs-btn-group+.bs-btn-group {margin-left: -2px; } /* Bootstrap Callouts */ .kl_wrapper .bs-callout {padding: 10px; margin: 15px 0; border: 1px solid #eee; border-left-width: 5px; border-radius: 3px; text-align: left; background-color: #fff; overflow: hidden; } .kl_wrapper .bs-callout h3, .kl_wrapper .bs-callout h4, .kl_wrapper .bs-callout h5, .kl_wrapper .bs-callout h6, #kl_wrapper_3.kl_wrapper .bs-callout h3, #kl_wrapper_3.kl_wrapper .bs-callout h4, #kl_wrapper_3.kl_wrapper .bs-callout h5, #kl_wrapper_3.kl_wrapper .bs-callout h6 {margin-top: 0; } .kl_wrapper .bs-callout-primary {border-left-color: #006fe6; } .kl_wrapper .bs-callout-primary h3, .kl_wrapper .bs-callout-primary h4, .kl_wrapper .bs-callout-primary h5, .kl_wrapper .bs-callout-primary h6, #kl_wrapper_3.kl_wrapper .bs-callout-primary h3, #kl_wrapper_3.kl_wrapper .bs-callout-primary h4, #kl_wrapper_3.kl_wrapper .bs-callout-primary h5, #kl_wrapper_3.kl_wrapper .bs-callout-primary h6 {color: #006fe6; } .kl_wrapper .bs-callout-secondary {border-left-color: #6f767e; } .kl_wrapper .bs-callout-secondary h3, .kl_wrapper .bs-callout-secondary h4, .kl_wrapper .bs-callout-secondary h5, .kl_wrapper .bs-callout-secondary h6, #kl_wrapper_3.kl_wrapper .bs-callout-secondary h3, #kl_wrapper_3.kl_wrapper .bs-callout-secondary h4, #kl_wrapper_3.kl_wrapper .bs-callout-secondary h5, #kl_wrapper_3.kl_wrapper .bs-callout-secondary h6 {color: #6f767e; } .kl_wrapper .bs-callout-success {border-left-color: #1c8536; } .kl_wrapper .bs-callout-success h3, .kl_wrapper .bs-callout-success h4, .kl_wrapper .bs-callout-success h5, .kl_wrapper .bs-callout-success h6, #kl_wrapper_3.kl_wrapper .bs-callout-success h3, #kl_wrapper_3.kl_wrapper .bs-callout-success h4, #kl_wrapper_3.kl_wrapper .bs-callout-success h5, #kl_wrapper_3.kl_wrapper .bs-callout-success h6 {color: #1c8536; } .kl_wrapper .bs-callout-danger {border-left-color: #d50510; } .kl_wrapper .bs-callout-danger h3, .kl_wrapper .bs-callout-danger h4, .kl_wrapper .bs-callout-danger h5, .kl_wrapper .bs-callout-danger h6, #kl_wrapper_3.kl_wrapper .bs-callout-danger h3, #kl_wrapper_3.kl_wrapper .bs-callout-danger h4, #kl_wrapper_3.kl_wrapper .bs-callout-danger h5, #kl_wrapper_3.kl_wrapper .bs-callout-danger h6 {color: #d50510; } .kl_wrapper .bs-callout-warning {border-left-color: #B25819; } .kl_wrapper .bs-callout-warning h3, .kl_wrapper .bs-callout-warning h4, .kl_wrapper .bs-callout-warning h5, .kl_wrapper .bs-callout-warning h6, #kl_wrapper_3.kl_wrapper .bs-callout-warning h3, #kl_wrapper_3.kl_wrapper .bs-callout-warning h4, #kl_wrapper_3.kl_wrapper .bs-callout-warning h5, #kl_wrapper_3.kl_wrapper .bs-callout-warning h6 {color: #B25819; } .kl_wrapper .bs-callout-info {border-left-color: #54bbcb; } .kl_wrapper .bs-callout-info h3, .kl_wrapper .bs-callout-info h4, .kl_wrapper .bs-callout-info h5, .kl_wrapper .bs-callout-info h6, #kl_wrapper_3.kl_wrapper .bs-callout-info h3, #kl_wrapper_3.kl_wrapper .bs-callout-info h4, #kl_wrapper_3.kl_wrapper .bs-callout-info h5, #kl_wrapper_3.kl_wrapper .bs-callout-info h6 {color: #3c808b; } .kl_wrapper .bs-callout-light {border-left-color: #cccccc; } .kl_wrapper .bs-callout-light h3, .kl_wrapper .bs-callout-light h4, .kl_wrapper .bs-callout-light h5, .kl_wrapper .bs-callout-light h6, #kl_wrapper_3.kl_wrapper .bs-callout-light h3, #kl_wrapper_3.kl_wrapper .bs-callout-light h4, #kl_wrapper_3.kl_wrapper .bs-callout-light h5, #kl_wrapper_3.kl_wrapper .bs-callout-light h6 {color: #696969; } .kl_wrapper .bs-callout-dark {border-left-color: #343a40; } .kl_wrapper .bs-callout-dark h3, .kl_wrapper .bs-callout-dark h4, .kl_wrapper .bs-callout-dark h5, .kl_wrapper .bs-callout-dark h6, #kl_wrapper_3.kl_wrapper .bs-callout-dark h3, #kl_wrapper_3.kl_wrapper .bs-callout-dark h4, #kl_wrapper_3.kl_wrapper .bs-callout-dark h5, #kl_wrapper_3.kl_wrapper .bs-callout-dark h6 {color: #343a40; } /* Bootstrap Background Colors */ .kl_wrapper .bs-bg-primary {color: #fff; background-color: #006fe6 !important; } .kl_wrapper .bs-bg-secondary {color: #fff; background-color: #6f767e !important; } .kl_wrapper .bs-bg-success {color: #fff; background-color: #1c8536 !important; } .kl_wrapper .bs-bg-danger {color: #fff; background-color: #d50510 !important; } .kl_wrapper .bs-bg-warning {color: #111; background-color: #ffc107 !important; } .kl_wrapper .bs-bg-info {color: #000; background-color: #54bbcb !important; } .kl_wrapper .bs-bg-light {color: #111; background-color: #f8f9fa !important; } .kl_wrapper .bs-bg-dark {color: #fff; background-color: #343a40 !important; } /* Columns */ @-ms-viewport {width: device-width; } .kl_wrapper .bs-container {width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; width: 100%; } .kl_wrapper .bs-row {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .kl_wrapper .bs-no-gutters {margin-right: 0; margin-left: 0; } .kl_wrapper .bs-no-gutters > .bs-col, .kl_wrapper .bs-no-gutters > [class*="bs-col-"] {padding-right: 0; padding-left: 0; } .kl_wrapper .bs-col-1, .kl_wrapper .bs-col-2, .kl_wrapper .bs-col-3, .kl_wrapper .bs-col-4, .kl_wrapper .bs-col-5, .kl_wrapper .bs-col-6, .kl_wrapper .bs-col-7, .kl_wrapper .bs-col-8, .kl_wrapper .bs-col-9, .kl_wrapper .bs-col-10, .kl_wrapper .bs-col-11, .kl_wrapper .bs-col-12, .kl_wrapper .bs-col, .kl_wrapper .bs-col-auto, .kl_wrapper .bs-col-sm-1, .kl_wrapper .bs-col-sm-2, .kl_wrapper .bs-col-sm-3, .kl_wrapper .bs-col-sm-4, .kl_wrapper .bs-col-sm-5, .kl_wrapper .bs-col-sm-6, .kl_wrapper .bs-col-sm-7, .kl_wrapper .bs-col-sm-8, .kl_wrapper .bs-col-sm-9, .kl_wrapper .bs-col-sm-10, .kl_wrapper .bs-col-sm-11, .kl_wrapper .bs-col-sm-12, .kl_wrapper .bs-col-sm, .kl_wrapper .bs-col-sm-auto, .kl_wrapper .bs-col-md-1, .kl_wrapper .bs-col-md-2, .kl_wrapper .bs-col-md-3, .kl_wrapper .bs-col-md-4, .kl_wrapper .bs-col-md-5, .kl_wrapper .bs-col-md-6, .kl_wrapper .bs-col-md-7, .kl_wrapper .bs-col-md-8, .kl_wrapper .bs-col-md-9, .kl_wrapper .bs-col-md-10, .kl_wrapper .bs-col-md-11, .kl_wrapper .bs-col-md-12, .kl_wrapper .bs-col-md, .kl_wrapper .bs-col-md-auto, .kl_wrapper .bs-col-lg-1, .kl_wrapper .bs-col-lg-2, .kl_wrapper .bs-col-lg-3, .kl_wrapper .bs-col-lg-4, .kl_wrapper .bs-col-lg-5, .kl_wrapper .bs-col-lg-6, .kl_wrapper .bs-col-lg-7, .kl_wrapper .bs-col-lg-8, .kl_wrapper .bs-col-lg-9, .kl_wrapper .bs-col-lg-10, .kl_wrapper .bs-col-lg-11, .kl_wrapper .bs-col-lg-12, .kl_wrapper .bs-col-lg, .kl_wrapper .bs-col-lg-auto, .kl_wrapper .bs-col-xl-1, .kl_wrapper .bs-col-xl-2, .kl_wrapper .bs-col-xl-3, .kl_wrapper .bs-col-xl-4, .kl_wrapper .bs-col-xl-5, .kl_wrapper .bs-col-xl-6, .kl_wrapper .bs-col-xl-7, .kl_wrapper .bs-col-xl-8, .kl_wrapper .bs-col-xl-9, .kl_wrapper .bs-col-xl-10, .kl_wrapper .bs-col-xl-11, .kl_wrapper .bs-col-xl-12, .kl_wrapper .bs-col-xl, .kl_wrapper .bs-col-xl-auto {position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } .kl_wrapper .bs-col {-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .kl_wrapper .bs-col-auto {-ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .kl_wrapper .bs-col-1 {-ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .kl_wrapper .bs-col-2 {-ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .kl_wrapper .bs-col-3 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .kl_wrapper .bs-col-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .kl_wrapper .bs-col-5 {-ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .kl_wrapper .bs-col-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .kl_wrapper .bs-col-7 {-ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .kl_wrapper .bs-col-8 {-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .kl_wrapper .bs-col-9 {-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .kl_wrapper .bs-col-10 {-ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .kl_wrapper .bs-col-11 {-ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .kl_wrapper .bs-col-12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .kl_wrapper .bs-order-1 {-ms-flex-order: 1; order: 1; } .kl_wrapper .bs-order-2 {-ms-flex-order: 2; order: 2; } .kl_wrapper .bs-order-3 {-ms-flex-order: 3; order: 3; } .kl_wrapper .bs-order-4 {-ms-flex-order: 4; order: 4; } .kl_wrapper .bs-order-5 {-ms-flex-order: 5; order: 5; } .kl_wrapper .bs-order-6 {-ms-flex-order: 6; order: 6; } .kl_wrapper .bs-order-7 {-ms-flex-order: 7; order: 7; } .kl_wrapper .bs-order-8 {-ms-flex-order: 8; order: 8; } .kl_wrapper .bs-order-9 {-ms-flex-order: 9; order: 9; } .kl_wrapper .bs-order-10 {-ms-flex-order: 10; order: 10; } .kl_wrapper .bs-order-11 {-ms-flex-order: 11; order: 11; } .kl_wrapper .bs-order-12 {-ms-flex-order: 12; order: 12; } @media (min-width: 840px) { body.course-menu-expanded .kl_wrapper .bs-col-sm {-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-auto {-ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } body.course-menu-expanded .kl_wrapper .bs-col-sm-1 {-ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-2 {-ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-3 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-5 {-ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-7 {-ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-8 {-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-9 {-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-10 {-ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-11 {-ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-sm-12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } body.course-menu-expanded .kl_wrapper .bs-order-sm-1 {-ms-flex-order: 1; order: 1; } body.course-menu-expanded .kl_wrapper .bs-order-sm-2 {-ms-flex-order: 2; order: 2; } body.course-menu-expanded .kl_wrapper .bs-order-sm-3 {-ms-flex-order: 3; order: 3; } body.course-menu-expanded .kl_wrapper .bs-order-sm-4 {-ms-flex-order: 4; order: 4; } body.course-menu-expanded .kl_wrapper .bs-order-sm-5 {-ms-flex-order: 5; order: 5; } body.course-menu-expanded .kl_wrapper .bs-order-sm-6 {-ms-flex-order: 6; order: 6; } body.course-menu-expanded .kl_wrapper .bs-order-sm-7 {-ms-flex-order: 7; order: 7; } body.course-menu-expanded .kl_wrapper .bs-order-sm-8 {-ms-flex-order: 8; order: 8; } body.course-menu-expanded .kl_wrapper .bs-order-sm-9 {-ms-flex-order: 9; order: 9; } body.course-menu-expanded .kl_wrapper .bs-order-sm-10 {-ms-flex-order: 10; order: 10; } body.course-menu-expanded .kl_wrapper .bs-order-sm-11 {-ms-flex-order: 11; order: 11; } body.course-menu-expanded .kl_wrapper .bs-order-sm-12 {-ms-flex-order: 12; order: 12; } } @media (min-width: 1100px) { body.course-menu-expanded .kl_wrapper .bs-col-md {-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } body.course-menu-expanded .kl_wrapper .bs-col-md-auto {-ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } body.course-menu-expanded .kl_wrapper .bs-col-md-1 {-ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-md-2 {-ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-md-3 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } body.course-menu-expanded .kl_wrapper .bs-col-md-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-md-5 {-ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-md-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } body.course-menu-expanded .kl_wrapper .bs-col-md-7 {-ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-md-8 {-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-md-9 {-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } body.course-menu-expanded .kl_wrapper .bs-col-md-10 {-ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } body.course-menu-expanded .kl_wrapper .bs-col-md-11 {-ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } body.course-menu-expanded .kl_wrapper .bs-col-md-12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } body.course-menu-expanded .kl_wrapper .bs-order-md-1 {-ms-flex-order: 1; order: 1; } body.course-menu-expanded .kl_wrapper .bs-order-md-2 {-ms-flex-order: 2; order: 2; } body.course-menu-expanded .kl_wrapper .bs-order-md-3 {-ms-flex-order: 3; order: 3; } body.course-menu-expanded .kl_wrapper .bs-order-md-4 {-ms-flex-order: 4; order: 4; } body.course-menu-expanded .kl_wrapper .bs-order-md-5 {-ms-flex-order: 5; order: 5; } body.course-menu-expanded .kl_wrapper .bs-order-md-6 {-ms-flex-order: 6; order: 6; } body.course-menu-expanded .kl_wrapper .bs-order-md-7 {-ms-flex-order: 7; order: 7; } body.course-menu-expanded .kl_wrapper .bs-order-md-8 {-ms-flex-order: 8; order: 8; } body.course-menu-expanded .kl_wrapper .bs-order-md-9 {-ms-flex-order: 9; order: 9; } body.course-menu-expanded .kl_wrapper .bs-order-md-10 {-ms-flex-order: 10; order: 10; } body.course-menu-expanded .kl_wrapper .bs-order-md-11 {-ms-flex-order: 11; order: 11; } body.course-menu-expanded .kl_wrapper .bs-order-md-12 {-ms-flex-order: 12; order: 12; } } @media (min-width:992px) and (max-width:1200px) { body.with-left-side:not(.course-menu-expanded).with-right-side .kl_wrapper [class*="bs-col-md"]{ width: 100%; display: block; flex-basis: unset; max-width: 100%; } } @media (min-width:1140px) and (max-width:1380px) { body.with-right-side.course-menu-expanded .kl_wrapper [class*="bs-col-md"]{ width: 100%; display: block; flex-basis: unset; max-width: 100%; } } .kl_wrapper .bs-flex-row {-ms-flex-direction: row !important; flex-direction: row !important; } .kl_wrapper .bs-flex-column {-ms-flex-direction: column !important; flex-direction: column !important; } .kl_wrapper .bs-flex-row-reverse {-ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .kl_wrapper .bs-flex-column-reverse {-ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .kl_wrapper .bs-flex-wrap {-ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .kl_wrapper .bs-flex-nowrap {-ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .kl_wrapper .bs-flex-wrap-reverse {-ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .kl_wrapper .bs-justify-content-start {-ms-flex-pack: start !important; justify-content: flex-start !important; } .kl_wrapper .bs-justify-content-end {-ms-flex-pack: end !important; justify-content: flex-end !important; } .kl_wrapper .bs-justify-content-center {-ms-flex-pack: center !important; justify-content: center !important; } .kl_wrapper .bs-justify-content-between {-ms-flex-pack: justify !important; justify-content: space-between !important; } .kl_wrapper .bs-justify-content-around {-ms-flex-pack: distribute !important; justify-content: space-around !important; } .kl_wrapper .bs-align-items-start {-ms-flex-align: start !important; align-items: flex-start !important; } .kl_wrapper .bs-align-items-end {-ms-flex-align: end !important; align-items: flex-end !important; } .kl_wrapper .bs-align-items-center {-ms-flex-align: center !important; align-items: center !important; } .kl_wrapper .bs-align-items-baseline {-ms-flex-align: baseline !important; align-items: baseline !important; } .kl_wrapper .bs-align-items-stretch {-ms-flex-align: stretch !important; align-items: stretch !important; } .kl_wrapper .bs-align-content-start {-ms-flex-line-pack: start !important; align-content: flex-start !important; } .kl_wrapper .bs-align-content-end {-ms-flex-line-pack: end !important; align-content: flex-end !important; } .kl_wrapper .bs-align-content-center {-ms-flex-line-pack: center !important; align-content: center !important; } .kl_wrapper .bs-align-content-between {-ms-flex-line-pack: justify !important; align-content: space-between !important; } .kl_wrapper .bs-align-content-around {-ms-flex-line-pack: distribute !important; align-content: space-around !important; } .kl_wrapper .bs-align-content-stretch {-ms-flex-line-pack: stretch !important; align-content: stretch !important; } .kl_wrapper .bs-align-self-auto {-ms-flex-item-align: auto !important; align-self: auto !important; } .kl_wrapper .bs-align-self-start {-ms-flex-item-align: start !important; align-self: flex-start !important; } .kl_wrapper .bs-align-self-end {-ms-flex-item-align: end !important; align-self: flex-end !important; } .kl_wrapper .bs-align-self-center {-ms-flex-item-align: center !important; align-self: center !important; } .kl_wrapper .bs-align-self-baseline {-ms-flex-item-align: baseline !important; align-self: baseline !important; } .kl_wrapper .bs-align-self-stretch {-ms-flex-item-align: stretch !important; align-self: stretch !important; } @media (min-width: 576px) { .kl_wrapper .bs-flex-sm-row {-ms-flex-direction: row !important; flex-direction: row !important; } .kl_wrapper .bs-flex-sm-column {-ms-flex-direction: column !important; flex-direction: column !important; } .kl_wrapper .bs-flex-sm-row-reverse {-ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .kl_wrapper .bs-flex-sm-column-reverse {-ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .kl_wrapper .bs-flex-sm-wrap {-ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .kl_wrapper .bs-flex-sm-nowrap {-ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .kl_wrapper .bs-flex-sm-wrap-reverse {-ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .kl_wrapper .bs-justify-content-sm-start {-ms-flex-pack: start !important; justify-content: flex-start !important; } .kl_wrapper .bs-justify-content-sm-end {-ms-flex-pack: end !important; justify-content: flex-end !important; } .kl_wrapper .bs-justify-content-sm-center {-ms-flex-pack: center !important; justify-content: center !important; } .kl_wrapper .bs-justify-content-sm-between {-ms-flex-pack: justify !important; justify-content: space-between !important; } .kl_wrapper .bs-justify-content-sm-around {-ms-flex-pack: distribute !important; justify-content: space-around !important; } .kl_wrapper .bs-align-items-sm-start {-ms-flex-align: start !important; align-items: flex-start !important; } .kl_wrapper .bs-align-items-sm-end {-ms-flex-align: end !important; align-items: flex-end !important; } .kl_wrapper .bs-align-items-sm-center {-ms-flex-align: center !important; align-items: center !important; } .kl_wrapper .bs-align-items-sm-baseline {-ms-flex-align: baseline !important; align-items: baseline !important; } .kl_wrapper .bs-align-items-sm-stretch {-ms-flex-align: stretch !important; align-items: stretch !important; } .kl_wrapper .bs-align-content-sm-start {-ms-flex-line-pack: start !important; align-content: flex-start !important; } .kl_wrapper .bs-align-content-sm-end {-ms-flex-line-pack: end !important; align-content: flex-end !important; } .kl_wrapper .bs-align-content-sm-center {-ms-flex-line-pack: center !important; align-content: center !important; } .kl_wrapper .bs-align-content-sm-between {-ms-flex-line-pack: justify !important; align-content: space-between !important; } .kl_wrapper .bs-align-content-sm-around {-ms-flex-line-pack: distribute !important; align-content: space-around !important; } .kl_wrapper .bs-align-content-sm-stretch {-ms-flex-line-pack: stretch !important; align-content: stretch !important; } .kl_wrapper .bs-align-self-sm-auto {-ms-flex-item-align: auto !important; align-self: auto !important; } .kl_wrapper .bs-align-self-sm-start {-ms-flex-item-align: start !important; align-self: flex-start !important; } .kl_wrapper .bs-align-self-sm-end {-ms-flex-item-align: end !important; align-self: flex-end !important; } .kl_wrapper .bs-align-self-sm-center {-ms-flex-item-align: center !important; align-self: center !important; } .kl_wrapper .bs-align-self-sm-baseline {-ms-flex-item-align: baseline !important; align-self: baseline !important; } .kl_wrapper .bs-align-self-sm-stretch {-ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 768px) { .kl_wrapper .bs-flex-md-row {-ms-flex-direction: row !important; flex-direction: row !important; } .kl_wrapper .bs-flex-md-column {-ms-flex-direction: column !important; flex-direction: column !important; } .kl_wrapper .bs-flex-md-row-reverse {-ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .kl_wrapper .bs-flex-md-column-reverse {-ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .kl_wrapper .bs-flex-md-wrap {-ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .kl_wrapper .bs-flex-md-nowrap {-ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .kl_wrapper .bs-flex-md-wrap-reverse {-ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .kl_wrapper .bs-justify-content-md-start {-ms-flex-pack: start !important; justify-content: flex-start !important; } .kl_wrapper .bs-justify-content-md-end {-ms-flex-pack: end !important; justify-content: flex-end !important; } .kl_wrapper .bs-justify-content-md-center {-ms-flex-pack: center !important; justify-content: center !important; } .kl_wrapper .bs-justify-content-md-between {-ms-flex-pack: justify !important; justify-content: space-between !important; } .kl_wrapper .bs-justify-content-md-around {-ms-flex-pack: distribute !important; justify-content: space-around !important; } .kl_wrapper .bs-align-items-md-start {-ms-flex-align: start !important; align-items: flex-start !important; } .kl_wrapper .bs-align-items-md-end {-ms-flex-align: end !important; align-items: flex-end !important; } .kl_wrapper .bs-align-items-md-center {-ms-flex-align: center !important; align-items: center !important; } .kl_wrapper .bs-align-items-md-baseline {-ms-flex-align: baseline !important; align-items: baseline !important; } .kl_wrapper .bs-align-items-md-stretch {-ms-flex-align: stretch !important; align-items: stretch !important; } .kl_wrapper .bs-align-content-md-start {-ms-flex-line-pack: start !important; align-content: flex-start !important; } .kl_wrapper .bs-align-content-md-end {-ms-flex-line-pack: end !important; align-content: flex-end !important; } .kl_wrapper .bs-align-content-md-center {-ms-flex-line-pack: center !important; align-content: center !important; } .kl_wrapper .bs-align-content-md-between {-ms-flex-line-pack: justify !important; align-content: space-between !important; } .kl_wrapper .bs-align-content-md-around {-ms-flex-line-pack: distribute !important; align-content: space-around !important; } .kl_wrapper .bs-align-content-md-stretch {-ms-flex-line-pack: stretch !important; align-content: stretch !important; } .kl_wrapper .bs-align-self-md-auto {-ms-flex-item-align: auto !important; align-self: auto !important; } .kl_wrapper .bs-align-self-md-start {-ms-flex-item-align: start !important; align-self: flex-start !important; } .kl_wrapper .bs-align-self-md-end {-ms-flex-item-align: end !important; align-self: flex-end !important; } .kl_wrapper .bs-align-self-md-center {-ms-flex-item-align: center !important; align-self: center !important; } .kl_wrapper .bs-align-self-md-baseline {-ms-flex-item-align: baseline !important; align-self: baseline !important; } .kl_wrapper .bs-align-self-md-stretch {-ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 992px) { .kl_wrapper .bs-flex-lg-row {-ms-flex-direction: row !important; flex-direction: row !important; } .kl_wrapper .bs-flex-lg-column {-ms-flex-direction: column !important; flex-direction: column !important; } .kl_wrapper .bs-flex-lg-row-reverse {-ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .kl_wrapper .bs-flex-lg-column-reverse {-ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .kl_wrapper .bs-flex-lg-wrap {-ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .kl_wrapper .bs-flex-lg-nowrap {-ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .kl_wrapper .bs-flex-lg-wrap-reverse {-ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .kl_wrapper .bs-justify-content-lg-start {-ms-flex-pack: start !important; justify-content: flex-start !important; } .kl_wrapper .bs-justify-content-lg-end {-ms-flex-pack: end !important; justify-content: flex-end !important; } .kl_wrapper .bs-justify-content-lg-center {-ms-flex-pack: center !important; justify-content: center !important; } .kl_wrapper .bs-justify-content-lg-between {-ms-flex-pack: justify !important; justify-content: space-between !important; } .kl_wrapper .bs-justify-content-lg-around {-ms-flex-pack: distribute !important; justify-content: space-around !important; } .kl_wrapper .bs-align-items-lg-start {-ms-flex-align: start !important; align-items: flex-start !important; } .kl_wrapper .bs-align-items-lg-end {-ms-flex-align: end !important; align-items: flex-end !important; } .kl_wrapper .bs-align-items-lg-center {-ms-flex-align: center !important; align-items: center !important; } .kl_wrapper .bs-align-items-lg-baseline {-ms-flex-align: baseline !important; align-items: baseline !important; } .kl_wrapper .bs-align-items-lg-stretch {-ms-flex-align: stretch !important; align-items: stretch !important; } .kl_wrapper .bs-align-content-lg-start {-ms-flex-line-pack: start !important; align-content: flex-start !important; } .kl_wrapper .bs-align-content-lg-end {-ms-flex-line-pack: end !important; align-content: flex-end !important; } .kl_wrapper .bs-align-content-lg-center {-ms-flex-line-pack: center !important; align-content: center !important; } .kl_wrapper .bs-align-content-lg-between {-ms-flex-line-pack: justify !important; align-content: space-between !important; } .kl_wrapper .bs-align-content-lg-around {-ms-flex-line-pack: distribute !important; align-content: space-around !important; } .kl_wrapper .bs-align-content-lg-stretch {-ms-flex-line-pack: stretch !important; align-content: stretch !important; } .kl_wrapper .bs-align-self-lg-auto {-ms-flex-item-align: auto !important; align-self: auto !important; } .kl_wrapper .bs-align-self-lg-start {-ms-flex-item-align: start !important; align-self: flex-start !important; } .kl_wrapper .bs-align-self-lg-end {-ms-flex-item-align: end !important; align-self: flex-end !important; } .kl_wrapper .bs-align-self-lg-center {-ms-flex-item-align: center !important; align-self: center !important; } .kl_wrapper .bs-align-self-lg-baseline {-ms-flex-item-align: baseline !important; align-self: baseline !important; } .kl_wrapper .bs-align-self-lg-stretch {-ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1200px) { .kl_wrapper .bs-flex-xl-row {-ms-flex-direction: row !important; flex-direction: row !important; } .kl_wrapper .bs-flex-xl-column {-ms-flex-direction: column !important; flex-direction: column !important; } .kl_wrapper .bs-flex-xl-row-reverse {-ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .kl_wrapper .bs-flex-xl-column-reverse {-ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .kl_wrapper .bs-flex-xl-wrap {-ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .kl_wrapper .bs-flex-xl-nowrap {-ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .kl_wrapper .bs-flex-xl-wrap-reverse {-ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .kl_wrapper .bs-justify-content-xl-start {-ms-flex-pack: start !important; justify-content: flex-start !important; } .kl_wrapper .bs-justify-content-xl-end {-ms-flex-pack: end !important; justify-content: flex-end !important; } .kl_wrapper .bs-justify-content-xl-center {-ms-flex-pack: center !important; justify-content: center !important; } .kl_wrapper .bs-justify-content-xl-between {-ms-flex-pack: justify !important; justify-content: space-between !important; } .kl_wrapper .bs-justify-content-xl-around {-ms-flex-pack: distribute !important; justify-content: space-around !important; } .kl_wrapper .bs-align-items-xl-start {-ms-flex-align: start !important; align-items: flex-start !important; } .kl_wrapper .bs-align-items-xl-end {-ms-flex-align: end !important; align-items: flex-end !important; } .kl_wrapper .bs-align-items-xl-center {-ms-flex-align: center !important; align-items: center !important; } .kl_wrapper .bs-align-items-xl-baseline {-ms-flex-align: baseline !important; align-items: baseline !important; } .kl_wrapper .bs-align-items-xl-stretch {-ms-flex-align: stretch !important; align-items: stretch !important; } .kl_wrapper .bs-align-content-xl-start {-ms-flex-line-pack: start !important; align-content: flex-start !important; } .kl_wrapper .bs-align-content-xl-end {-ms-flex-line-pack: end !important; align-content: flex-end !important; } .kl_wrapper .bs-align-content-xl-center {-ms-flex-line-pack: center !important; align-content: center !important; } .kl_wrapper .bs-align-content-xl-between {-ms-flex-line-pack: justify !important; align-content: space-between !important; } .kl_wrapper .bs-align-content-xl-around {-ms-flex-line-pack: distribute !important; align-content: space-around !important; } .kl_wrapper .bs-align-content-xl-stretch {-ms-flex-line-pack: stretch !important; align-content: stretch !important; } .kl_wrapper .bs-align-self-xl-auto {-ms-flex-item-align: auto !important; align-self: auto !important; } .kl_wrapper .bs-align-self-xl-start {-ms-flex-item-align: start !important; align-self: flex-start !important; } .kl_wrapper .bs-align-self-xl-end {-ms-flex-item-align: end !important; align-self: flex-end !important; } .kl_wrapper .bs-align-self-xl-center {-ms-flex-item-align: center !important; align-self: center !important; } .kl_wrapper .bs-align-self-xl-baseline {-ms-flex-item-align: baseline !important; align-self: baseline !important; } .kl_wrapper .bs-align-self-xl-stretch {-ms-flex-item-align: stretch !important; align-self: stretch !important; } } .bs-pagination {display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem; flex-wrap: wrap;} .bs-page-link {position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; background-color: var(--primary-contrast); border: 1px solid var(--bs-light-gray-border); } .bs-page-link:hover {z-index: 2; color: var(--bs-link-hover); text-decoration: none; background-color: var(--bs-ui-light-gray); border-color: var(--bs-light-gray-border); } .bs-page-link:focus {z-index: 2; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .bs-page-link:not(:disabled):not(.bs-disabled) {cursor: pointer; } .bs-page-item:first-child .bs-page-link {margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .bs-page-item:last-child .bs-page-link {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .bs-page-item.bs-active .bs-page-link {z-index: 1; color: var(--primary-contrast); background-color: var(--primary); } .bs-page-item.bs-disabled .bs-page-link {color: var(--bs-disabled-gray); cursor: auto; background-color: var(--secondary-contrast); border-color: var(--bs-light-gray-border); } .bs-pagination-lg .bs-page-link {padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; } .bs-pagination-lg .bs-page-item:first-child .bs-page-link {border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .bs-pagination-lg .bs-page-item:last-child .bs-page-link {border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .bs-pagination-sm .bs-page-link {padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; } .bs-pagination-sm .bs-page-item:first-child .bs-page-link {border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } .bs-pagination-sm .bs-page-item:last-child .bs-page-link {border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } .bs-pagination a.bs-page-link { text-decoration: none !important; } .bs-justify-content-center {-ms-flex-pack: center !important; justify-content: center !important; } /* Backgrounds */ .bs-bg-primary {background-color: var(--primary) !important; } a.bs-bg-primary:hover, a.bs-bg-primary:focus, button.bs-bg-primary:hover, button.bs-bg-primary:focus {background-color: var(--primary-border) !important; } .bs-bg-secondary {background-color: var(--secondary) !important; } a.bs-bg-secondary:hover, a.bs-bg-secondary:focus, button.bs-bg-secondary:hover, button.bs-bg-secondary:focus {background-color: var(--secondary-border) !important; } .bs-bg-success {background-color: var(--success) !important; } a.bs-bg-success:hover, a.bs-bg-success:focus, button.bs-bg-success:hover, button.bs-bg-success:focus {background-color: var(--success-border) !important; color: white !important;} .bs-bg-info {background-color: var(--info) !important; } .bs-table-dark .bs-bg-info {background-color: var(--info-border) !important; } a.bs-bg-info:hover, a.bs-bg-info:focus, button.bs-bg-info:hover, button.bs-bg-info:focus {background-color: #117a8b !important; } .bs-bg-warning {background-color: var(--warning) !important; } .bs-table-dark .bs-bg-warning {background-color: var(--warning-text) !important; } a.bs-bg-warning:hover, a.bs-bg-warning:focus, button.bs-bg-warning:hover, button.bs-bg-warning:focus {background-color: var(--warning-border) !important; } .bs-bg-danger {background-color: var(--danger) !important; } a.bs-bg-danger:hover, a.bs-bg-danger:focus, button.bs-bg-danger:hover, button.bs-bg-danger:focus {background-color: var(--danger-border) !important; } .bs-bg-light {background-color: var(--light) !important; } a.bs-bg-light:hover, a.bs-bg-light:focus, button.bs-bg-light:hover, button.bs-bg-light:focus {background-color: var(--light-hover-light) !important; } .bs-bg-mid {background-color: var(--mid) !important; } a.bs-bg-mid:hover, a.bs-bg-mid:focus, button.bs-bg-mid:hover, button.bs-bg-mid:focus {background-color: var(--mid-hover-dark) !important; } .bs-bg-dark {background-color: var(--dark) !important; } a.bs-bg-dark:hover, a.bs-bg-dark:focus, button.bs-bg-dark:hover, button.bs-bg-dark:focus {background-color: var(--dark-hover-dark) !important; } .bs-bg-white {background-color: #ffffff !important; } .bs-bg-transparent {background-color: transparent !important; } .bs-list-group {display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; margin-left: 0;} .bs-list-group-item-action {width: 100%; color: var(--bs-gray-text-dark); text-align: inherit; } .bs-list-group-item-action:hover, .bs-list-group-item-action:focus {color: var(--bs-gray-text-dark); text-decoration: none; background-color: var(--light); } .bs-list-group-item-action:active {color: var(--bs-text); background-color: var(--bs-ui-light-gray); } .bs-list-group-item {position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.125); } .bs-list-group-item:first-child {border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .bs-list-group-item:last-child {margin-bottom: 0; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .bs-list-group-item:hover, .bs-list-group-item:focus {z-index: 1; text-decoration: none; } .bs-list-group-item.bs-disabled, .bs-list-group-item:disabled {color: var(--bs-disabled-gray); background-color: var(--secondary-contrast); } .bs-list-group-item.bs-active {z-index: 2; color: var(--primary-contrast); background-color: var(--primary); border-color: var(--primary); } .bs-list-group-flush .bs-list-group-item {border-right: 0; border-left: 0; border-radius: 0; } .bs-list-group-flush:first-child .bs-list-group-item:first-child {border-top: 0; } .bs-list-group-flush:last-child .bs-list-group-item:last-child {border-bottom: 0; } .bs-list-group-item-primary {color: var(--primary-text); background-color: var(--primary-bg-light); } .bs-list-group-item-primary.bs-list-group-item-action:hover, .bs-list-group-item-primary.bs-list-group-item-action:focus {color: var(--primary-text); background-color: var(--primary-hover-light); } .bs-list-group-item-primary.bs-list-group-item-action.bs-active {color: var(--primary-contrast); background-color: var(--primary-text); border-color: var(--primary-text); } .bs-list-group-item-secondary {color: var(--secondary-text); background-color: var(--secondary-bg-light); } .bs-list-group-item-secondary.bs-list-group-item-action:hover, .bs-list-group-item-secondary.bs-list-group-item-action:focus {color: var(--secondary-text); background-color: var(--secondary-hover-light); } .bs-list-group-item-secondary.bs-list-group-item-action.bs-active {color:var(--secondary-contrast); background-color: var(--secondary-text); border-color: var(--secondary-text); } .bs-list-group-item-success {color: var(--success-text); background-color: var(--success-bg-light); } .bs-list-group-item-success.bs-list-group-item-action:hover, .bs-list-group-item-success.bs-list-group-item-action:focus {color: var(--success-text); background-color: var(--success-hover-light); } .bs-list-group-item-success.bs-list-group-item-action.bs-active {color: #ffffff; background-color: var(--success-text); border-color: var(--success-text); } .bs-list-group-item-info {color: var(--info-text); background-color: var(--info-bg-light); } .bs-list-group-item-info.bs-list-group-item-action:hover, .bs-list-group-item-info.bs-list-group-item-action:focus {color: var(--info-text); background-color: var(--info-hover-light); } .bs-list-group-item-info.bs-list-group-item-action.bs-active {color: #ffffff; background-color: var(--info-text); border-color: var(--info-text); } .bs-list-group-item-warning {color: var(--warning-text); background-color: var(--warning-bg-light); } .bs-list-group-item-warning.bs-list-group-item-action:hover, .bs-list-group-item-warning.bs-list-group-item-action:focus {color: var(--warning-text); background-color: var(--warning-hover-light); } .bs-list-group-item-warning.bs-list-group-item-action.bs-active {color: #ffffff; background-color: var(--warning-text); border-color: var(--warning-text); } .bs-list-group-item-danger {color: var(--danger-text); background-color: var(--danger-bg-light); } .bs-list-group-item-danger.bs-list-group-item-action:hover, .bs-list-group-item-danger.bs-list-group-item-action:focus {color: var(--danger-text); background-color: var(--danger-hover-light); } .bs-list-group-item-danger.bs-list-group-item-action.bs-active {color: #ffffff; background-color: var(--danger-text); border-color: var(--danger-text); } .bs-list-group-item-light {color: var(--light-text); background-color: var(--light-bg-lighter); } .bs-list-group-item-light.bs-list-group-item-action:hover, .bs-list-group-item-light.bs-list-group-item-action:focus {color: var(--light-text); background-color: var(--light-bg-light); } .bs-list-group-item-light.bs-list-group-item-action.bs-active {color: #ffffff; background-color: var(--light-text); border-color: var(--light-text); } .bs-list-group-item-mid {color: var(--mid-text); background-color: var(--mid-bg-light); } .bs-list-group-item-mid.bs-list-group-item-action:hover, .bs-list-group-item-mid.bs-list-group-item-action:focus {color: var(--mid-text); background-color: var(--mid-hover-light); } .bs-list-group-item-mid.bs-list-group-item-action.bs-active {color: var(--mid-contrast); background-color: var(--mid-text); border-color: var(--mid-text); } .bs-list-group-item-dark {color: var(--dark-text); background-color: var(--dark-bg-light); } .bs-list-group-item-dark.bs-list-group-item-action:hover, .bs-list-group-item-dark.bs-list-group-item-action:focus {color: var(--dark-text); background-color: var(--dark-hover-light); } .bs-list-group-item-dark.bs-list-group-item-action.bs-active {color: var(--dark-contrast); background-color: var(--dark-text); border-color: var(--dark-text); } /**********************************************************************/ /************** KENNETHWARE GENERAL STYLES **************/ /**********************************************************************/ /* Max width for Content */ #kl_wrapper_3, #kl_wrapper, .kl_wrapper, .kl_wrapper_parent {max-width: 1100px;} .kl_wrapper ol { margin-left: 0; padding-left: 40px; } .kl_wrapper ol.unstyled { margin-left:0; padding-left:0; } .kl_app_only { display: none; } /* Canvas Tables */ #kl_wrapper_3 #kl_banner_image img {width: 100%;} #kl_wrapper_3 * { box-sizing: border-box; } #kl_wrapper_3 .mejs-controls * { box-sizing: content-box; } /* btn-group (adapted from Bootstrap) */ #kl_accents_wrapper .btn-group { position: relative; display: inline-block; *display: inline; *margin-left: .3em; font-size: 0; white-space: nowrap; vertical-align: middle; *zoom: 1; margin: 0 2px 0 0; } #kl_accents_wrapper .btn-group:first-child { *margin-left: 0; } #kl_accents_wrapper .btn-toolbar { margin-top: 10px; margin-bottom: 10px; font-size: 0; } #kl_accents_wrapper .btn-toolbar > .Button + .Button, #kl_accents_wrapper .btn-toolbar > .btn-group + .Button, #kl_accents_wrapper .btn-toolbar > .Button + .btn-group { margin-left: 5px; } #kl_accents_wrapper .btn-group > .Button { position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #kl_accents_wrapper .btn-group > .Button + .Button { margin-left: -1px; } #kl_accents_wrapper .btn-group > .Button, #kl_accents_wrapper .btn-group > .dropdown-menu, #kl_accents_wrapper .btn-group > .popover { font-size: 14px; } #kl_accents_wrapper .btn-group > .Button--mini { font-size: 10.5px; } #kl_accents_wrapper .btn-group > .Button--small { font-size: 11.9px; } #kl_accents_wrapper .btn-group > .Button--large { font-size: 17.5px; } #kl_accents_wrapper .btn-group > .Button:first-child { margin-left: 0; } #kl_accents_wrapper .btn-group > .Button:hover, #kl_accents_wrapper .btn-group > .Button:focus, #kl_accents_wrapper .btn-group > .Button:active, #kl_accents_wrapper .btn-group > .Button.active { z-index: 2; } /* Canvas Button Color Changes */ .kl_wrapper .Button--danger { background: #cc0000; } .kl_wrapper .Button--success { background: #007e12; } .kl_wrapper .Button--warning { background: #cf4500; } .kl_wrapper .alert { color: #bd4004; } .kl_wrapper .alert.alert-error { color: #d70610; } .kl_wrapper .alert.alert-success { color: #007c11; } .kl_wrapper .alert.alert-info { color: #0072b4; } /* Remove Underline from Canvas Buttons */ .user_content a.Button { text-decoration: none; } /* Image Borders */ img.kl_image_round, .kl_image_round { border-radius: 50%;} img.kl_image_round_white_border, .kl_image_round_white_border { border-radius: 500px; border: 1px solid #ccc; padding: 5px; background: #fff;box-sizing: border-box;} img.kl_image_white_border, .kl_image_white_border { border: 1px solid #ccc; padding: 5px; background: #fff; box-sizing: border-box;} img.kl_image_rounded_grey, .kl_image_rounded_grey {border-radius: 5px; padding: 5px; background: #ccc;box-sizing: border-box;} img.kl_polaroid, .kl_polaroid {padding: 10px; background: #fff; -webkit-box-shadow: 3px 3px 9px #777; -moz-box-shadow: 3px 3px 9px #777; box-shadow: 3px 3px 9px #777; box-sizing: border-box;} img.kl_rounded_5, .kl_rounded_5 { border-radius: 5px;} img.kl_rounded_10, .kl_rounded_10 { border-radius: 10px;} img.kl_rounded_20, .kl_rounded_20 { border-radius: 20px;} /* Border Radius */ .kl_border_radius_round { border-radius: 50% !important; } .kl_border_radius_5 { border-radius: 5px !important;} .kl_border_radius_10 { border-radius: 10px !important;} .kl_border_radius_20 { border-radius: 20px !important;} .kl_border_radius_50 { border-radius: 50px !important;} /* Box Shadow */ .kl_shadow_b1, .kl_shadow_1 {box-shadow: 0 1px 3px grey;} .kl_shadow_b2, .kl_shadow_2 {box-shadow: 0 3px 5px grey;} .kl_shadow_b3, .kl_shadow_3 {box-shadow: 0 5px 10px grey;} .kl_shadow_b4 {box-shadow: 0 5px 5px -5px grey;} .kl_shadow_b5, .kl_shadow_6 {box-shadow: 0 8px 8px -5px grey;} .kl_shadow_b6, .kl_shadow_6 {box-shadow: 0 10px 10px -5px grey;} .kl_shadow_r1 {box-shadow: 2px 2px 5px grey;} .kl_shadow_r2, .kl_shadow_5 {box-shadow: 3px 3px 9px grey;} .kl_shadow_r3, .kl_shadow_4 {box-shadow: 5px 5px 10px grey;} /* Border Widths */ .kl_solid_border {border: 1px solid #ccc;} /* Border Radius */ /* Image/iframe Alignment */ .kl_box_align_left, .kl_iframe_align_left, img.kl_image_align_left, .kl_image_align_left {float: left; margin: 0 15px 15px 0; box-sizing: border-box;} .kl_box_align_center, .kl_iframe_align_center, img.kl_image_align_center, .kl_image_align_center {display:block; float: none; margin: 15px auto; clear: both;box-sizing: border-box;} .kl_iframe_wrapper.kl_iframe_align_center { text-align: center; } .kl_box_align_right, .kl_iframe_align_right, img.kl_image_align_right, .kl_image_align_right { float: right; margin: 0 0 15px 15px; box-sizing: border-box;} div.kl_polaroid.kl_image_align_right {margin-right: 10px;box-sizing: border-box;} div.kl_polaroid.kl_image_align_left {margin-left: 5px;box-sizing: border-box;} .klminiCheckbox .ic-Super-toggle__switch::after { background-size: 14px; } /* Div with Image and Captions */ .kl_image_round img, .kl_image_white_border img, .kl_image_rounded_grey img, .kl_polaroid img, .kl_rounded_5 img, .kl_rounded_10 img, .kl_image_caption_overlap img, .kl_rounded_20 img { width: 100%; margin: auto; } /* Image Captions */ .kl_image_round p, .kl_image_round figcaption, .kl_image_white_border p, .kl_image_white_border figcaption, .kl_image_rounded_grey p, .kl_image_rounded_grey figcaption, .kl_polaroid p, .kl_polaroid figcaption, .kl_rounded_5 p, .kl_rounded_5 figcaption, .kl_rounded_10 p, .kl_rounded_10 figcaption, .kl_image_caption_overlap p, .kl_image_caption_overlap figcaption, .kl_rounded_20 p { display: block; text-align: center; margin: 0; padding: 5px; } /* Overlap */ .kl_image_caption_overlap { position: relative; } .kl_image_caption_overlap p, .kl_image_caption_overlap figcaption { position: absolute; bottom: 0; left: 0; right: 0; font-weight: 400; } .kl_image_caption_dark { border: 1px solid #656565; } .kl_image_caption_dark p, .kl_image_caption_dark figcaption { background: rgba(0, 0, 0, 0.7); color: #fff; } .kl_image_caption_light { border: 1px solid #b3b3b3; } .kl_image_caption_light p, .kl_image_caption_light figcaption { background: rgba(255, 255, 255, 0.8); } /* Linked Image Hover Opacity */ .kl_image_hover_opacity_wrapper a { display: block; position: relative; } .kl_image_hover_opacity_wrapper span { position: absolute; bottom: -20px; left: 0; z-index: 1; display: block; width: 100%; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } .kl_image_hover_opacity_wrapper figure { padding-bottom: 20px; margin: 10px 5px; } .kl_image_hover_opacity_wrapper figure img { opacity: 1; width: 100%; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; background: #fff; } .kl_image_hover_opacity_wrapper a:focus img, .kl_image_hover_opacity_wrapper a:hover img { opacity: .5; z-index: 10; } .kl_image_hover_opacity_wrapper a:focus span, .kl_image_hover_opacity_wrapper a:hover span { bottom: -25px; opacity: 1; background: rgba(255, 255, 255, 0.72); } /* Typography */ .kl_wrapper *.lead, #kl_wrapper_3 *.lead {font-size: 21px; font-weight: 200; line-height: 30px; } .kl_wrapper .uppercase, #kl_wrapper_3 .uppercase {text-transform: uppercase;} .kl_wrapper .lowercase, #kl_wrapper_3 .lowercase {text-transform: lowercase;} .kl_wrapper .defaultText, #kl_wrapper_3 .defaultText {text-transform: none;} .kl_wrapper .capitalize, #kl_wrapper_3 .capitalize {text-transform: capitalize;} /* Canvas Header Customization Block */ .user-content #kl_canvas_header { display:none; } /* Visually indicate visited links with a checkmark */ #kl_wrapper_3 a.kl_indicate_visited { border-left: 18px solid orange !important; padding-left: 5px; } #kl_wrapper_3 a.kl_indicate_visited:visited { border-color: green !important; } /* User Details */ #kl_wrapper_3 .kl_user_details {overflow: hidden; } #kl_wrapper_3 .kl_user_details > ul {margin-top: 30px; display: inline-block; } #kl_wrapper_3 .kl_user_details img {margin-right: 20px; } /* Make sure blocks hold all their content */ #kl_wrapper_3 > div { overflow: hidden;} #kl_wrapper_3 .ic-Table, #kl_wrapper_3 .table {background: #fff; max-width: 99%; width: 99%;} #kl_wrapper_3 #kl_modal {overflow: hidden;} .kl_wrapper .kl_popover_content, .kl_wrapper .kl_modal_content { overflow: hidden; position: relative; width: 640px; max-width: 100% !important; } #kl_wrapper a.kl_tooltip_trigger, #kl_wrapper a.kl_popover_trigger, a.kl_tooltip_trigger, a.kl_popover_trigger { color: #000; text-decoration: none; } a.kl_tooltip_trigger, a.kl_popover_trigger, .kl_tooltip_trigger, .kl_popover_trigger { border: 1px dashed; padding: 1px 3px; border-radius: 3px; background: none; color: inherit; font-size: inherit; font-weight: inherit; vertical-align: baseline; text-decoration: none; } a.kl_tooltip_trigger:hover, a.kl_popover_trigger:hover { color: #000; text-decoration: none; } /* NAVIGATION BASICS */ #kl_wrapper_3 #kl_navigation a[class*=icon-]:before, #kl_wrapper_3 #kl_navigation a[class^=icon-]:before, #kl_wrapper_3 #kl_navigation a[class*=fa-]:before, #kl_wrapper_3 #kl_navigation a[class^=fa-]:before {width: 30px; display:inline-block;} #kl_wrapper_3 #kl_navigation a[class*=fa-]:before, #kl_wrapper_3 #kl_navigation a[class^=fa-]:before {padding-right: 5px; } #kl_wrapper_3 #kl_navigation li {position: relative;} #kl_wrapper_3 #kl_navigation > ul.font-icons a[class*=icon-]:before, #kl_wrapper_3 #kl_navigation > ul.font-icons a[class^=icon-]:before, #kl_wrapper_3 #kl_navigation > ul.font-icons a[class*=fa-]:before, #kl_wrapper_3 #kl_navigation > ul.font-icons a[class^=fa-]:before {margin-right: 15px; } /* Hide Ally code if in navigation block */ #kl_navigation a.ally-accessibility-score-indicator, #kl_navigation .ally-enhancement { display: none !important; } /* Canvas file download link */ #kl_wrapper_3 #kl_navigation a.file_download_btn { display: inline !important; padding: 5px !important; border: none !important; position: absolute; top: 5px; right: 5px; } #kl_wrapper_3 #kl_navigation a.file_download_btn:hover, #kl_wrapper_3 #kl_navigation a.file_download_btn:focus { background: #fff !important; } /* Modules Grid */ #kl_wrapper_3 #kl_modules {margin: 20px 0 10px 0; padding: 12px 0; overflow: hidden; text-align: left; border-top: 2px solid #565656; border-bottom: 1px solid #b6babf; } #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) {column-count:2; -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul:not(.kl_large_link_grid) {column-count:1; -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules.kl_modules_columns_3 > ul:not(.kl_large_link_grid) {column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules.kl_modules_columns_4 > ul:not(.kl_large_link_grid) {column-count:4; -moz-column-count:4; /* Firefox */ -webkit-column-count:4; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li {list-style-type: none; line-height: 1.3em; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li, #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li a:not(.bs-btn), #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li a:not(.bs-btn):visited, #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li a:not(.bs-btn):active {color: #565656;} #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li a:not(.bs-btn):hover, #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li a:not(.bs-btn):focus { color: #000;} #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) .kl_current a {font-weight: bold; } #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) .kl_current:not(.ui-tabs-active) i {color: #008a14;} #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li i[class*=icon-]:before, #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li i[class^=icon-]:before {position: inherit;} #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li i, #kl_wrapper_3 #kl_modules > ul:not(.kl_large_link_grid) li i[class^=icon-]:before {display: inline-block; width: 25px; text-align: center;} #kl_wrapper_3 #kl_modules .module-item-title.ellipsis {position: initial;} .kl_module_timeframe, .kl_modules_active_start, .kl_modules_active_stop { display:none;} /* Module Details */ .kl_module_details .ig-header .ig-header-title {-webkit-flex: 1 1 auto; flex: 1 1 auto; } .kl_module_details .context_module_item .completion_requirement {font-size: 1em; margin-top: 0; } .kl_module_details .ig-list li {margin: 0; } .kl_module_details .ig-list .ig-row {padding: 6px; padding-right: 10px;} .kl_module_details .kl_name_updated:after {content: ', '; } .kl_module_details .kl_name_updated:last-of-type:after {display: none; } /* Tabbed Modules */ .kl_tab_locked i.iconStatus, .kl_tab_completed i.iconStatus {position: absolute; right: 7px; font-size: 20px; opacity: 0.3; top: 11px;} #kl_wrapper_3 #kl_modules .ui-tabs-panel { background: #F8F8F8; border-width: 1px 1px 1px 1px;} #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul, #kl_wrapper_3 .kl_module_content > ul {column-count:1 !important; -moz-column-count:1 !important; /* Firefox */ -webkit-column-count:1 !important; /* Safari and Chrome */ display: table; width: 98%; border-collapse: collapse; margin: 0 1%; } #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav {margin: 0; text-align: center;} #kl_wrapper_3 #kl_modules.kl_modules_tabbed .context_module { margin-bottom: 0; border:none; margin-top: 0;} #kl_wrapper_3 #kl_modules.kl_modules_tabbed .context_module h3 { border:none !important; padding:0 !important; margin: 0 !important; overflow: hidden !important;} #kl_wrapper_3 #kl_modules.kl_modules_tabbed .ui-widget-content { border: 1px solid #ccc;} #kl_wrapper_3 #kl_modules .ui-tabs-panel {background: #fff; border: none; margin: 0; padding:0;} /* Tabbed Modules Pill Nav */ #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li {list-style-type: none; font-size: 14px; min-height: 20px; border-radius: 5px; border: none; background: #f2f3f4; margin: 0 2px; float:none; display: inline-block; text-align: left;} #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li a {border: 1px solid #ccc; border-radius: 5px;} #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li a:hover, #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li a:focus {background: #fff; color: #000; } #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav.white li.ui-tabs-active a {color: #fff;} #kl_wrapper_3 #kl_modules .ui-tabs-active {background: #0F2439; border-radius: 5px;} #kl_wrapper_3 #kl_modules > ul li.ui-tabs-active a { color: #fff; text-shadow: none;} #kl_wrapper_3 #kl_modules .ui-widget-header .ui-state-active, #kl_wrapper_3 #kl_modules .ui-state-active {text-shadow: none; } #kl_wrapper_3 #kl_modules .ui-state-default, #kl_wrapper_3 #kl_modules .ui-widget-header .ui-state-default {background-image: none;} #kl_wrapper_3 #kl_modules .ui-widget-header {border-bottom: none;} /* One Column on smaller screens */ @media screen and (max-width: 1168px) { #kl_wrapper_3 #kl_modules.kl_modules_columns_3 > ul:not(.kl_large_link_grid) {column-count:2; -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules.kl_modules_columns_4 > ul:not(.kl_large_link_grid) {column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } } @media screen and (max-width: 800px) { #kl_wrapper_3 #kl_modules > ul {column-count:1; -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules.kl_modules_columns_3 > ul:not(.kl_large_link_grid) {column-count:1; -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ } #kl_wrapper_3 #kl_modules.kl_modules_columns_4 > ul:not(.kl_large_link_grid) {column-count:1; -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ } } /* Current Module Details */ #kl_wrapper_3 #kl_modules .kl_module_current { border: solid 1px #aaa; padding: 10px; background: #dbdbdb; position: relative;margin-top: 15px;} /* Quick Check Styling */ #kl_wrapper_3 .kl_quick_check { overflow: hidden; margin: 10px 0; padding: 20px; border: 1px solid #aaaaaa;} #kl_wrapper_3 .kl_quick_check .kl_quick_check_correct, #kl_wrapper_3 .kl_quick_check .kl_quick_check_incorrect, #kl_wrapper_3 .kl_quick_check .kl_quick_check_response, #kl_wrapper_3 .kl_quick_check_correct_answer .kl_quick_check_response { background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; padding: 0; display: block; } #kl_wrapper_3 .kl_quick_check_correct_answer .kl_quick_check_response:before { content: 'Correct Answer'; background: #468847;color: white; position: absolute; top: 0; left: 0; padding: 0 10px; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_response { position: relative; border: 2px solid #f2f2f2; margin: 0 0 10px 20px; padding: 10px 10px 10px 50px;} #kl_wrapper_3 .kl_quick_check_correct_answer .kl_quick_check_response { border: 2px solid #468847 !important; padding-top: 20px;} #kl_wrapper_3 .kl_quick_check p { font-size: 1.1em; } #kl_wrapper_3 .kl_quick_check label {cursor: pointer; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_response .kl_quick_check_answer_type {position: absolute; left: 0; top: 0; bottom: 0; padding: 15px 10px; color: #fff; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_response.kl_quick_check_correct .kl_quick_check_answer_type {background-color: #468847; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_response.kl_quick_check_incorrect .kl_quick_check_answer_type {background-color: #b94a48; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_incorrect { border: 2px solid #b94a48; color: #b94a48; } #kl_wrapper_3 .kl_quick_check .next { width: 250px; float: right; margin-top: 15px; } #kl_wrapper_3 .kl_quick_check .next .ellipsis { white-space: inherit; } #kl_wrapper_3 .kl_quick_check #kl_quick_check_answers { list-style: none; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_answers { margin-top: 10px; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_answer_wrapper { clear: both; position: relative;} #kl_wrapper_3 .kl_quick_check .kl_quick_check_answer_wrapper label { display: block; } #kl_wrapper_3 .kl_quick_check .kl_quick_check_field { margin: 3px 10px 30px 0; float: left; } #kl_wrapper_3 .kl_quick_check_mark_correct { margin-left: 5px; color: #000; } #kl_wrapper_3 .kl_quick_check_mark_correct i, #kl_wrapper_3 .kl_tab_mark_current i, #kl_wrapper_3 .kl_acc_mark_current i { color: #B3B6B8; } #kl_wrapper_3 .kl_quick_check_mark_correct.kl_quick_check_correct i, #kl_wrapper_3 .kl_quick_check_mark_correct.kl_quick_check_correct:hover i, #kl_wrapper_3 .kl_quick_check_mark_correct.kl_quick_check_correct:focus i, #kl_wrapper_3 .kl_tab_mark_current.kl_current_tab i, #kl_wrapper_3 .kl_tab_mark_current.kl_current_tab:hover i, #kl_wrapper_3 .kl_tab_mark_current.kl_current_tab:focus i, #kl_wrapper_3 .kl_acc_mark_current.kl_current_acc i, #kl_wrapper_3 .kl_acc_mark_current.kl_current_acc:hover i, #kl_wrapper_3 .kl_acc_mark_current.kl_current_acc:focus i { color: #00BD03; text-shadow: 1px 2px 1px #000000; } div.kl_next_hidden {color: #B9080A; font-weight: bold; } /* User Details */ #kl_wrapper_3 .kl_user_detail { margin: 0;} #kl_wrapper_3 .kl_user_details p:first-of-type { font-weight: bold;} /* Misc */ #kl_wrapper_3 {position: relative;} /* allow positioning of sub elements */ #kl_wrapper_3 .kl_image_full_width {width: 100%; height: auto; } .show-revisions {z-index: 1000;} /* Fix content showing over revisions panel */ /* Code Highlighting */ pre.kl_code_highlight { background: #fff; border-width: 2px; } /**************************************************/ /***** HTML Snippets ************************/ /**************************************************/ .kl_message_block, #kl_wrapper_3 > div .kl_message_block {border: 2px solid; margin: 20px auto; background: #fff; padding: 10px; overflow: hidden;} .kl_message_block p:not(.kl_message_heading), #kl_wrapper_3 > div .kl_message_block p:not(.kl_message_heading) {margin: 10px; } .kl_message_block .kl_message_heading a, #kl_wrapper_3 > div .kl_message_block .kl_message_heading a {color: #fff;} .kl_message_block.kl_message_block_info, #kl_wrapper_3 > div .kl_message_block.kl_message_block_info {border-color: #3778b3; } .kl_message_block.kl_message_block_warning, #kl_wrapper_3 > div .kl_message_block.kl_message_block_warning {border-color: #b45f06; } .kl_message_block.kl_message_block_success, #kl_wrapper_3 > div .kl_message_block.kl_message_block_success {border-color: #008513; } .kl_message_block.kl_message_block_tip, #kl_wrapper_3 > div .kl_message_block.kl_message_block_tip {border-color: #1e5799; } .kl_message_block.kl_message_block_danger, #kl_wrapper_3 > div .kl_message_block.kl_message_block_danger {border-color: #990000; } .kl_message_block .kl_message_heading, #kl_wrapper_3 > div .kl_message_block .kl_message_heading {padding: 5px; color: #fff; background-color: #5f5f5f; text-align: center; margin: -12px -10px 10px -10px;} .kl_message_heading, #kl_wrapper_3 > div .kl_message_heading, #kl_wrapper_3 > div h3.kl_message_heading, #kl_wrapper_3 > div h4.kl_message_heading, #kl_wrapper_3 > div h5.kl_message_heading, #kl_wrapper_3 > div h6.kl_message_heading {padding: 5px; color: #fff; background-color: #5f5f5f; text-align: center;} .kl_message_heading.kl_message_heading_tip, #kl_wrapper_3 > div .kl_message_heading.kl_message_heading_tip, #kl_wrapper_3 > div h3.kl_message_heading.kl_message_heading_tip, #kl_wrapper_3 > div h4.kl_message_heading.kl_message_heading_tip, #kl_wrapper_3 > div h5.kl_message_heading.kl_message_heading_tip, #kl_wrapper_3 > div h6.kl_message_heading.kl_message_heading_tip {background: #1e5799; border-radius: 0; display:block; border-width: 0;} .kl_message_heading.kl_message_heading_info, #kl_wrapper_3 > div .kl_message_heading.kl_message_heading_info, #kl_wrapper_3 > div h3.kl_message_heading.kl_message_heading_info, #kl_wrapper_3 > div h4.kl_message_heading.kl_message_heading_info, #kl_wrapper_3 > div h5.kl_message_heading.kl_message_heading_info, #kl_wrapper_3 > div h6.kl_message_heading.kl_message_heading_info {background: #3778b3; border-radius: 0; display:block; border-width: 0;} .kl_message_heading.kl_message_heading_warning, #kl_wrapper_3 > div .kl_message_heading.kl_message_heading_warning, #kl_wrapper_3 > div h3.kl_message_heading.kl_message_heading_warning, #kl_wrapper_3 > div h4.kl_message_heading.kl_message_heading_warning, #kl_wrapper_3 > div h5.kl_message_heading.kl_message_heading_warning, #kl_wrapper_3 > div h6.kl_message_heading.kl_message_heading_warning {background: #b45f06; border-radius: 0; display:block; border-width: 0;} .kl_message_heading.kl_message_heading_success, #kl_wrapper_3 > div .kl_message_heading.kl_message_heading_success, #kl_wrapper_3 > div h3.kl_message_heading.kl_message_heading_success, #kl_wrapper_3 > div h4.kl_message_heading.kl_message_heading_success, #kl_wrapper_3 > div h5.kl_message_heading.kl_message_heading_success, #kl_wrapper_3 > div h6.kl_message_heading.kl_message_heading_success {background: #008513; border-radius: 0; display:block; border-width: 0;} .kl_message_heading.kl_message_heading_danger, #kl_wrapper_3 > div .kl_message_heading.kl_message_heading_danger, #kl_wrapper_3 > div h3.kl_message_heading.kl_message_heading_danger, #kl_wrapper_3 > div h4.kl_message_heading.kl_message_heading_danger, #kl_wrapper_3 > div h5.kl_message_heading.kl_message_heading_danger, #kl_wrapper_3 > div h6.kl_message_heading.kl_message_heading_danger {background: #990000; border-radius: 0; display:block; border-width: 0;} /* Alerts/Emphasis */ .kl_block_alert_buttons .alert, #kl_wrapper_3:not(.kl_wrapper) .alert {padding: 12px 36px 12px 12px; background-color: #FBEDE7; border-radius: 6px; color: #bd4004; } .kl_block_alert_buttons .alert-success, #kl_wrapper_3:not(.kl_wrapper) .alert-success {background-color: #E8F6E9; color: #007c11; } #kl_wrapper_3:not(.kl_wrapper) .alert-danger, #kl_wrapper_3:not(.kl_wrapper) .alert-error, .kl_block_alert_buttons .alert-danger, .kl_block_alert_buttons .alert-error {background-color: #FCE8E7; color: #d70610; } .kl_block_alert_buttons .alert-info, #kl_wrapper_3:not(.kl_wrapper) .alert-info {background-color: #E5F2F8; color: #0072b4; } /* Inline Emphasis */ #kl_wrapper_3 .muted, .kl_wrapper .muted {color: #6c8a9f; } #kl_wrapper_3 .bold, .kl_wrapper .bold {font-weight: bold; } #kl_wrapper .muted, .kl_wrapper .muted {color: #6c8a9f; } #kl_wrapper_3 .text-warning, .kl_wrapper .text-warning {color: #cd4d0f; } #kl_wrapper_3 .text-error, .kl_wrapper .text-error {color: #d70610; } #kl_wrapper_3 .text-info, .kl_wrapper .text-info {color: #2f76bf; } #kl_wrapper_3 .text-success, .kl_wrapper .text-success {color: #008513; } .kl_wrapper .kl_highlight_yellow, #kl_wrapper_3 .kl_highlight_yellow {background: yellow; font-style: normal; padding: 2px; color: #000;} .kl_wrapper .kl_highlight_orange, #kl_wrapper_3 .kl_highlight_orange {background: #ffbc42; font-style: normal; padding: 2px; color: #000;} .kl_wrapper .kl_highlight_red, #kl_wrapper_3 .kl_highlight_red {background: #ffacac; font-style: normal; padding: 2px; color: #000;} .kl_wrapper .kl_highlight_blue, #kl_wrapper_3 .kl_highlight_blue {background: #abe9ff; font-style: normal; padding: 2px; color: #000;} .kl_wrapper .kl_highlight_green, #kl_wrapper_3 .kl_highlight_green {background: #92e370; font-style: normal; padding: 2px; color: #000;} /* Basic Nav List */ .kl_wrapper ul.kl_basic_navlist, .kl_wrapper ol.kl_basic_navlist {list-style-type: none; margin: 0; overflow: hidden; padding: 0; } .kl_wrapper ul.kl_basic_navlist li, .kl_wrapper ol.kl_basic_navlist li {float: left; } .kl_wrapper ul.kl_basic_navlist li:after, .kl_wrapper ol.kl_basic_navlist li:after {content: "|"; } .kl_wrapper ul.kl_basic_navlist li:last-child:after, .kl_wrapper ol.kl_basic_navlist li:last-child:after {content: ""; } .kl_wrapper ul.kl_basic_navlist li a, .kl_wrapper ol.kl_basic_navlist li a {padding: 10px; display: inline-block; } .kl_wrapper ul.kl_basic_navlist li.kl_current { padding: 10px; font-weight: bold; } .kl_wrapper ul.kl_basic_navlist li.kl_current:after { margin-left: 10px; } .kl_wrapper ul.kl_basic_navlist li a:focus, .kl_wrapper ul.kl_basic_navlist li a:hover, .kl_wrapper ol.kl_basic_navlist li a:focus, .kl_wrapper ol.kl_basic_navlist li a:hover {text-decoration: none !important; } /* Table Foot Row */ .kl_wrapper .table tfoot, .kl_wrapper .ic-Table tfoot { border-top: 2px solid #c7cdd1; } /**************************************************/ /***** ICON Menu ************************/ /**************************************************/ /* Adapted from http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ */ /*.kl_icon_nav {text-align:center; }*/ #kl_wrapper_3 .kl_icon_nav a {text-decoration: none; font-weight: 400;} ul.kl_icon_nav {max-width: 1240px; margin: 0; padding: 0; list-style: none; font-size: 1.5em; font-weight: 300; } .kl_icon_nav li {margin-bottom: 0.25em; max-height: 200px; vertical-align: top; } .kl_icon_nav li span {display: block; } .kl_icon_nav li a {display: block; color: #fff; color: rgba(249, 249, 249, .9); text-decoration: none; transition: color .5s, background .5s, height .5s; } .kl_icon_nav li a i {display: inline-block; width: 2.5em; margin: 0 0.75em; height: 2.5em; line-height: 2.3em; text-align: center; padding: 0; border: 0.2em solid transparent; border-radius: 50%; background: rgba(255,255,255,0.1); transition: border .5s; box-shadow: 0 0 0 0.8em transparent; background: rgba(255,255,255,0.1); transform: translate3d(0, 0, 0); transition: box-shadow .6s ease-in-out; } /* Remove the blue Webkit background when element is tapped */ .kl_icon_nav a, .kl_icon_nav button {-webkit-tap-highlight-color: rgba(0,0,0,0); } /* Hover effect for the whole navigation to make the hovered item stand out */ .no-touch ul.kl_icon_nav:hover a, .no-touch ul.kl_icon_nav:focus a {color: #fff; color: rgba(249, 249, 249, .5); } .no-touch ul.kl_icon_nav:hover a:hover, .no-touch ul.kl_icon_nav:focus a:focus {color: #fff; color: rgba(249, 249, 249, 0.99); } /* Set Background colors */ .kl_icon_nav li:nth-child(6n+1) {background: #bc5b03; } .kl_icon_nav li:nth-child(6n+2) {background: #a36713; } .kl_icon_nav li:nth-child(6n+3) {background: #1d7ca0; } .kl_icon_nav li:nth-child(6n+4) {background: #166ba2; } .kl_icon_nav li:nth-child(6n+5) {background: #1b3647; } .kl_icon_nav li:nth-child(6n+6) {background: #152836; } @media (min-width: 1100px) { /* Transforms the list into a horizontal navigation */ .kl_icon_nav li {display: inline-block; width: calc(33.3% - 5px); text-align: center; transition: border .5s; margin:0 0 5px; padding: 0.5em;} .kl_icon_nav li a {display: block; width: auto; } /* Animating the height of the element*/ .kl_icon_nav li a {height: 8em; } /* Positioning the icons and preparing for the animation*/ .kl_icon_nav li a i {display: block; margin: 20px auto; position: relative; margin: 0 auto 0.5em; line-height: 1.5em; padding: 0.4em; border-radius: 50%; box-shadow: 0 0 0 0.8em transparent; background: rgba(255,255,255,0.1); transform: translate3d(0, 0, 0); transition: box-shadow .8s ease-in-out;} .kl_icon_nav li a i:before {font-size: 30px; vertical-align: initial; } /* Animate the box-shadow to create the effect */ .no-touch .kl_icon_nav a:hover i, .no-touch .kl_icon_nav a:active i, .no-touch .kl_icon_nav a:focus i {box-shadow: 0 0 0px 0px rgba(255,255,255,0.2); transition: box-shadow .7s ease-in-out; } ul.kl_icon_nav {text-align: center;} } @media (min-width: 1250px) { .kl_icon_nav li {width: calc(16.6% - 5px);} } @media (min-width: 1200px) and (max-width: 1390px) { /* Size and font adjustments to make it fit better */ /*.kl_icon_nav ul {font-size: 1.2em; }*/ } /* CSS for a 2x3 columns version */ @media (min-width: 920px) and (max-width: 1099px) { /* Creating the 2 column layout using floating elements once again */ .kl_icon_nav {display: flex; flex-wrap: wrap; } .kl_icon_nav li {width: calc(50% - 3px); text-align: left; margin-bottom: 6px; } .kl_icon_nav li:nth-child(odd) {margin-right: 6px; } /* Adding some padding to make the elements look nicer*/ .kl_icon_nav li a {padding: 0.5em; padding-left: 3.5em;} /* Displaying the icons on the left, and the text on the right side using inline-block */ .kl_icon_nav li a i {margin: 0 0.2em 0 -3em; } /* Animate the box-shadow to create the effect */ .no-touch .kl_icon_nav li a:hover i, .no-touch .kl_icon_nav li a:active i, .no-touch .kl_icon_nav li a:focus i {box-shadow: 0 0 0px 0px rgba(255,255,255,0.2); transition: box-shadow .4s ease-in-out; } } /* Smallest screen, one column with icon to the left */ @media screen and (max-width: 920px) { /* Adapting the layout of the menu for smaller screens: icon on the left and text on the right */ .kl_icon_nav li {margin: 0; margin-bottom: 2px;} .kl_icon_nav li a {padding: 5px; text-align: left; } /* make the nav bigger on touch screens */ .touch .kl_icon_nav li a {padding: 0.8em; } .kl_icon_nav li a i {width: 2em; height: 2em; line-height: 1.6em; margin: 0 0.5em; } .kl_icon_nav li a i:before {font-size: 1em; } } /**********************************************************************/ /************** COLUMNS **************/ /**********************************************************************/ /* Columns */ .kl_flex_column {position: relative;} /* Menu Collapsed */ @media screen and (min-width: 870px) { body:not(.course-menu-expanded):not(.with-right-side) .kl_flex_columns_wrapper{display: flex; flex-direction: row; justify-content: space-between; } body:not(.course-menu-expanded):not(.with-right-side) .kl_flex_column {flex-grow: 1; flex-basis: 50%; margin-right: 20px; } body:not(.course-menu-expanded):not(.with-right-side) .kl_flex_column:last-child {margin-right: 0; } } /* Menu Opened */ @media screen and (min-width: 1050px) { body.course-menu-expanded:not(.with-right-side) .kl_flex_columns_wrapper{display: flex; flex-direction: row; justify-content: space-between; } body.course-menu-expanded:not(.with-right-side) .kl_flex_column {flex-grow: 1; flex-basis: 50%; margin-right: 20px; } body.course-menu-expanded:not(.with-right-side) .kl_flex_column:last-child {margin-right: 0; } } /* Front Page */ /* Menu Collapsed */ @media screen and (min-width: 860px) and (max-width: 991px) { body.with-right-side:not(.course-menu-expanded) .kl_flex_columns_wrapper{display: flex; flex-direction: row; justify-content: space-between; } body.with-right-side:not(.course-menu-expanded) .kl_flex_column {flex-grow: 1; flex-basis: 50%; margin-right: 20px; } body.with-right-side:not(.course-menu-expanded) .kl_flex_column:last-child {margin-right: 0; } } @media screen and (min-width: 1145px) { body.with-right-side:not(.course-menu-expanded) .kl_flex_columns_wrapper{display: flex; flex-direction: row; justify-content: space-between; } body.with-right-side:not(.course-menu-expanded) .kl_flex_column {flex-grow: 1; flex-basis: 50%; margin-right: 20px; } body.with-right-side:not(.course-menu-expanded) .kl_flex_column:last-child {margin-right: 0; } } /* Menu Opened */ @media screen and (min-width: 1035px) and (max-width: 1139px) { body.with-right-side.course-menu-expanded .kl_flex_columns_wrapper{display: flex; flex-direction: row; justify-content: space-between; } body.with-right-side.course-menu-expanded .kl_flex_column {flex-grow: 1; flex-basis: 50%; margin-right: 20px; } body.with-right-side.course-menu-expanded .kl_flex_column:last-child {margin-right: 0; } } @media screen and (min-width: 1340px) { body.with-right-side.course-menu-expanded .kl_flex_columns_wrapper{display: flex; flex-direction: row; justify-content: space-between; } body.with-right-side.course-menu-expanded .kl_flex_column {flex-grow: 1; flex-basis: 50%; margin-right: 20px; } body.with-right-side.course-menu-expanded .kl_flex_column:last-child {margin-right: 0; } } /**********************************************************************/ /************** BEGIN KENNETHWARE THEMES **************/ /**********************************************************************/ /*********************************************************************/ /***** APPLE THEME **********************************************/ #kl_wrapper_3.kl_apple.kl_show_title #kl_banner {position:relative; margin: 5px 0; } #kl_wrapper_3.kl_apple p {margin: 5px 0; font-size: 16px; } #kl_wrapper_3.kl_apple > div {margin: 30px 0; overflow-x: auto; } #kl_wrapper_3.kl_apple > div > i:before {font-size: 25px; line-height: 40px; } #kl_wrapper_3.kl_apple > div > i {background-color: #4E6173; border-radius: 5px; color: #fff; display: block; float: left; font-size: 25px; height: 40px; line-height: 36px; margin: 0 10px 10px 0; text-align: center; width: 40px; } #kl_wrapper_3.kl_apple h3:not(.ui-state-default) i:before {font-size: 20px; line-height: 36px; } #kl_wrapper_3.kl_apple h3:not(.ui-state-default) i {float: left; margin: 0 5px 0 0; width: 30px; font-size: 25px; color: #fff; line-height: 36px; } #kl_wrapper_3.kl_apple #kl_banner {position:relative; margin: 5px 0; } #kl_wrapper_3.kl_apple #kl_banner h2 {line-height: 35px; border-radius: 5px; background: #0F2439; color: #fff; padding: 5px 10px 5px 2px; margin: 0 0 5px; } #kl_wrapper_3.kl_apple #kl_banner #kl_banner_left{float: left; height: 35px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-image: url(https://designtools.ciditools.com/css/images/white_apple.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 51px; text-align: center;} #kl_wrapper_3.kl_apple #kl_banner #kl_banner_left .kl_mod_text {display: none; } #kl_wrapper_3.kl_apple #kl_banner #kl_banner_left .kl_mod_num {display: block; height: 24px; color: #0F2439; font-size: 16px; font-weight: bold; padding: 8px 12px; width: 50px; text-align: center; position: relative; line-height: 20px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } #kl_wrapper_3.kl_apple #kl_banner #kl_banner_right {padding: 0px 10px; border-top-right-radius: 5px; } #kl_wrapper_3.kl_apple #kl_banner .kl_subtitle {font-size: 20px; text-align: center; color: #575757; border: 1px solid #575757; padding: 10px; border-radius: 5px; background-color: #f2f2f2; margin: 5px 0; } #kl_wrapper_3.kl_apple #kl_banner #kl_description {border: #0F2439 1px solid; padding: 10px; border-radius: 5px; font-size: 16px; } #kl_wrapper_3.kl_apple #kl_banner_image {margin: 5px 0; } #kl_wrapper_3.kl_apple #kl_banner_image img {border-radius: 5px; } #kl_wrapper_3.kl_apple h3:not(.ui-state-default) {margin: 0 0 20px; border: 1px solid #BDBDBD; padding: 0 10px; border-radius: 5px; background: #4E6173; color: #fff; line-height: 36px; } #kl_wrapper_3.kl_apple h4:not(.ui-state-default), #kl_wrapper_3.kl_apple h5 {border: 1px solid #4E6173; border-radius: 5px; padding: 0 10px; clear:both;} #kl_wrapper_3.kl_apple #kl_navigation {width: 100%; margin: 5px 0; } #kl_wrapper_3.kl_apple #kl_navigation > ul {display: table; table-layout: fixed; width: 100%; background-color: #0F2439; color: #fff; overflow: hidden; margin: 5px 0; border-radius: 5px; padding: 0; } #kl_wrapper_3.kl_apple #kl_navigation li {display: table-cell; font-weight: normal; list-style-type: none; padding: 12px 10px 12px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #kl_wrapper_3.kl_apple #kl_navigation > ul li:first-of-type {padding-left: 20px; } #kl_wrapper_3.kl_apple #kl_navigation li i {margin-right: 10px; } #kl_wrapper_3.kl_apple #kl_navigation li a, #kl_wrapper_3.kl_apple #kl_navigation li a:hover, #kl_wrapper_3.kl_apple #kl_navigation li a:focus, #kl_wrapper_3.kl_apple #kl_navigation li a:visited {color: #fff; } #kl_wrapper_3.kl_apple #kl_modules {border: 1px solid #575757; border-radius: 5px; margin: 5px 0; } #kl_wrapper_3.kl_apple #kl_modules div.kl_module_content h3 {margin: 0 1% 10px; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_apple #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_apple #kl_navigation li {border-radius: 5px; display: inline-block; width: 44%; float: left; } } @media screen and (min-width: 850px) { body.course-menu-expanded #kl_wrapper_3.kl_apple #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body.course-menu-expanded #kl_wrapper_3.kl_apple #kl_navigation li {padding: 12px 22px 12px 10px; border-radius: 5px; display: inline-block; width: 44%; float: left; } } @media screen and (min-width: 900px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_apple #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_apple #kl_navigation li {display: table-cell; padding: 12px 22px 12px 10px; width: 44%; float: none; } } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_apple #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_apple #kl_navigation li {display: table-cell; padding: 12px 22px 12px 10px; width: 44%; float: none; } } /*********************************************************************/ /***** BASIC BAR THEME *****************************************/ #kl_wrapper_3.kl_basic_bar #kl_banner {position:relative; margin: 0 0 10px; } #kl_wrapper_3.kl_basic_bar #kl_banner h2 {line-height: 35px; border-radius: 5px; background: #8F0222; color: #fff; padding: 5px 10px 5px 2px; margin: 0; } #kl_wrapper_3.kl_basic_bar #kl_banner #kl_banner_left{height: 40px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding-left: 5px; } #kl_wrapper_3.kl_basic_bar #kl_banner #kl_banner_left{padding-left: 5px; } #kl_wrapper_3.kl_basic_bar #kl_banner .kl_subtitle {font-size: 20px; text-align: center; color: #8F0222; border: 1px solid #8F0222; padding: 10px; border-radius: 5px; background-color: #fff; margin: 5px 0; } #kl_wrapper_3.kl_basic_bar #kl_banner #kl_description {font-size: 16px; border: 1px solid #000; padding: 10px; background-color: #fff; margin: 10px 0; border-left: none; border-right: none; } #kl_wrapper_3.kl_basic_bar h3:not(.ui-state-default) {text-transform: uppercase; border-bottom: 1px solid #C7C7C7; margin: 15px 0; } #kl_wrapper_3.kl_basic_bar h3:not(.ui-state-default) i {margin-right: 10px; } #kl_wrapper_3.kl_basic_bar > div > i {float:left; margin-right: 10px; font-size: 20px; } #kl_wrapper_3.kl_basic_bar > div > i[class*=icon-]:before, #kl_wrapper_3.kl_basic_bar > div > i[class^=icon-]:before {font-size: 20px; } #kl_wrapper_3.kl_basic_bar > div {overflow-x: hidden; } #kl_wrapper_3.kl_basic_bar #kl_navigation li i {margin-right: 10px; } #kl_wrapper_3.kl_basic_bar #kl_navigation {margin: 5px 0; } #kl_wrapper_3.kl_basic_bar #kl_navigation > ul {overflow: hidden; margin: 5px 0; border-radius: 5px; width: 100%; padding: 0; } #kl_wrapper_3.kl_basic_bar #kl_navigation li {font-size: 1.2em; font-weight: normal; list-style-type: none; padding: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_bar #kl_navigation > ul {padding-bottom:0px; display: inline; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_bar #kl_navigation li {display: inline-block; width: 44%; float: left; } } @media screen and (min-width: 850px) { body.course-menu-expanded #kl_wrapper_3.kl_basic_bar #kl_navigation > ul {padding-bottom:0px; display: inline; } body.course-menu-expanded #kl_wrapper_3.kl_basic_bar #kl_navigation li {padding: 12px 22px 12px 10px; display: inline-block; width: 44%; float: left; } } @media screen and (min-width: 900px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_bar #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_bar #kl_navigation li {display: table-cell; font-size: 1.2em; padding: 12px 22px 12px 10px; width: 100%; float:none; } } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_basic_bar #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_basic_bar #kl_navigation li {display: table-cell; font-size: 1.2em; padding: 12px 22px 12px 10px; width: 100%; float:none; } } /*********************************************************************/ /***** BASIC COLOR BANNER NAV THEME ****************************/ #kl_wrapper_3.kl_basic_color.kl_show_title #kl_banner, #kl_wrapper_3.kl_basic_color_panel_nav.kl_show_title #kl_banner {margin-top: 22px; } #kl_wrapper_3.kl_basic_color #kl_banner, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner {background-color: #0F2439; color: #FFF; font-family: "PT Sans"; position: relative; } #wiki_page_show #kl_wrapper_3.kl_basic_color #kl_banner, #wiki_page_show #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner {margin: 0 0 3px; } #kl_wrapper_3.kl_basic_color #kl_banner h2, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner h2 {line-height: 26px; font-size: 26px; margin: 0; display: table; } #kl_wrapper_3.kl_basic_color #kl_banner h2 small, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner h2 small {line-height: 29px; margin-left: 5px; } #kl_wrapper_3.kl_basic_color #kl_banner #kl_banner_left, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_banner_left {display: table-cell; border-right: 3px solid #fff; font-size: 1.2em; padding: 10px; } #kl_wrapper_3.kl_basic_color #kl_banner #kl_banner_left .kl_mod_text, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_banner_left .kl_mod_text, #kl_wrapper_3.kl_basic_color #kl_banner #kl_banner_left .kl_mod_num, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_banner_left .kl_mod_num {width: 100%; padding: 2px 0 1px; display: block; font-size: 24px; line-height: 26px; text-align: center; } #kl_wrapper_3.kl_basic_color #kl_banner #kl_banner_right, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_banner_right {display: table-cell; padding: 10px; line-height: 26px; letter-spacing: 0.3px; font-size: 25px; overflow: hidden; text-overflow: ellipsis; } #kl_wrapper_3.kl_basic_color #kl_banner .kl_subtitle, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner .kl_subtitle {font-size: 20px; display: block; line-height: 25px; background-color: #fff; color: #0F2439; padding: 5px 20px; margin: 0; border: 2px solid #0F2439; border-top: none; } #kl_wrapper_3.kl_basic_color #kl_banner #kl_description, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_description {font-size: 16px; display: block; border-top: 3px solid #fff; padding: 10px 20px; } #kl_wrapper_3.kl_basic_color #kl_banner_image, #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner_image {margin: 3px 0; } #kl_wrapper_3.kl_basic_color > div, #kl_wrapper_3.kl_basic_color_panel_nav > div {overflow: hidden; margin-top: 10px; } #kl_wrapper_3.kl_basic_color > div > i, #kl_wrapper_3.kl_basic_color_panel_nav > div > i {float: left; margin: 0 10px 10px 0; } #kl_wrapper_3.kl_basic_color h3:not(.ui-state-default), #kl_wrapper_3.kl_basic_color_panel_nav h3:not(.ui-state-default) {margin: 5px 0; } #kl_wrapper_3.kl_basic_color h3:not(.ui-state-default) i, #kl_wrapper_3.kl_basic_color_panel_nav h3:not(.ui-state-default) i {margin-right: 10px; } /* BASIC COLOR NAVIGAION */ #kl_wrapper_3.kl_basic_color #kl_navigation {width: 100%; margin: 0;} #kl_wrapper_3.kl_basic_color #kl_navigation > ul {width: 100%; overflow: hidden; margin: 0; padding: 0;} #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {font-weight: normal; list-style-type: none; background-color: #0F2439; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%;} #kl_wrapper_3.kl_basic_color #kl_navigation > ul li i {margin-right: 10px;} #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a {display: block; padding: 5px 22px 5px 10px; border-bottom: 3px solid #fff;} #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a, #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a:focus, #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a:visited {color: #fff; display: block;} #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:last-child {background-image: none;} /* Canvas file download link */ #kl_wrapper_3.kl_basic_color #kl_navigation a.file_download_btn { top: -5px; right: 5px; } #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation a.file_download_btn { top: 5px; left: -5px; width: 25px; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul {display: inline; border: none; padding-bottom: 0px; overflow: hidden;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {display: block; padding: 0; border: none; width: 50%; float: left; background-image: url(https://designtools.ciditools.com/css/images/divider.png); background-repeat: no-repeat; background-position: 100% top;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:nth-child(even) {background-image: none;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a {padding: 3px 10px;} } @media screen and (min-width: 850px) { body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul {border: none; padding-bottom: 0px; overflow: hidden; display: inline-block; float: left;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {background-image: none; display: block; padding: 0; border: none; width: 50%; float: left; display: inline-block; float: left;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {background-image: url(https://designtools.ciditools.com/css/images/divider.png); background-repeat: no-repeat; background-position: 100% top;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:nth-child(even) {background-image: none;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:last-child {background-image: none;} body #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a {border-left:none;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a {padding: 3px 10px;} } @media screen and (min-width: 980px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul {border: none; padding-bottom: 0px; overflow: hidden; float: none;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {display: block; padding: 0; border: none; width: 25%;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:nth-child(even), body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {background-image: url(https://designtools.ciditools.com/css/images/divider.png); background-repeat: no-repeat; background-position: 100% top;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:last-child, body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:last-child {background-image: none;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li a {padding: 3px 10px; border-left: none;} } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul {display: table; table-layout: fixed;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:nth-child(even) {background-image: url(https://designtools.ciditools.com/css/images/divider.png); background-repeat: no-repeat; background-position: 100% top;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {background-image: url(https://designtools.ciditools.com/css/images/divider.png); background-repeat: no-repeat; background-position: 100% top;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li:last-child {background-image: none;} body.course-menu-expanded #kl_wrapper_3.kl_basic_color #kl_navigation > ul li {display: table-cell; padding: 0; border: none; width:100%; float: none;} } /* BASIC COLOR PANEL NAVIGAION */ #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {margin: 0; list-style-type: none; padding: 0;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a i {margin-right: 10px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 3px 0; display: block;} /* Media Queries w/ & w/out Course Menu Collapsed */ @media screen and (min-width: 640px) { #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 213px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 14px 15px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 159px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 529px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 7px 15px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation {width: 100%; font-family: "Helvetica", "Arial", sans-serif; font-size: 16px; font-weight: bold; margin: 0; min-width: 250px; overflow-x: hidden; overflow-y: auto; position: absolute;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {background-color: rgba(255, 255, 255, 0.90); height: 193px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation .kl_nav_list_1 {float: left;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation .kl_nav_list_2 {float: right;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li {display: block;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 11px 15px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a:focus {background: #fff; text-decoration: none;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {display: block; padding: 5px 15px 6px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 160px;} #kl_wrapper_3.kl_basic_color_panel_nav {max-width: 100%; width: 636px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {max-width: 100%; min-width: 456px;} } @media screen and (min-width: 950px) { #kl_wrapper_3.kl_basic_color_panel_nav {width: 809px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 243px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 18px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 189px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 629px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 11px 15px;} } @media screen and (min-width: 1050px) { #kl_wrapper_3.kl_basic_color_panel_nav {width: 909px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 273px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 21px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 219px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 729px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 15px;} } @media screen and (min-width: 1150px) { #kl_wrapper_3.kl_basic_color_panel_nav {width: 1009px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 303px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 25px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 249px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 830px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 18px;} } @media screen and (min-width: 992px) { body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 563px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 169px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 9px 15px;} } @media screen and (min-width: 1020px) { body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 591px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 178px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 10px 15px;} } @media screen and (min-width: 1060px) { body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 631px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 190px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 11px 15px;} } @media screen and (min-width: 1100px) { body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 671px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 202px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 13px 15px;} } @media screen and (min-width: 1140px) { body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 531px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 160px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 8px 15px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 711px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 215px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 14px 15px;} } @media screen and (min-width: 1180px) { body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 571px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 172px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 9px 15px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 751px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 225px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 16px;} } @media screen and (min-width: 1220px) { body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 611px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 185px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 11px 15px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 791px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 237px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 17px;} } @media screen and (min-width: 1250px) { #kl_wrapper_3.kl_basic_color_panel_nav {width: 100%;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 330px;} #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 29px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 275px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 917px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 22px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 641px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 193px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 12px 15px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 821px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 246px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 18px;} } @media screen and (min-width: 1280px) { body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 671px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 215px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 13px 15px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 851px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 255px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 19px;} } @media screen and (min-width: 1320px) { body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 711px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 215px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 14px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 891px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 268px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 21px;} } @media screen and (min-width: 1350px) { .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 25px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 304px;} .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 1015px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 741px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 225px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 16px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav {width: 921px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 276px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 22px;} } @media screen and (min-width: 1434px) { .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 330px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav, body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav, .course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav {width: 100%;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 257px;} body.with-right-side.course-menu-expanded #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 18px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul {height: 309px;} body.with-right-side:not(.course-menu-expanded) #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul li a {padding: 25px;} } /*********************************************************************/ /***** BOOKMARK THEME ****************************************/ #kl_wrapper_3.kl_bookmark > div {overflow: hidden; margin: 0; } #kl_wrapper_3.kl_bookmark #kl_banner {font-family: "PT Sans"; margin: 0 0 5px; position: relative; } #kl_wrapper_3.kl_bookmark #kl_banner h2 {position: relative; background-color: #0F2439; color: #FFF; margin: 0 0 5px; } #kl_wrapper_3.kl_bookmark.kl_show_title #kl_banner {margin-top: 22px; } #kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left {border-right: 3px solid #fff; display: table-cell; vertical-align: top; min-width: 50px; padding: 5px; } #kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left .kl_mod_text {padding: 0 10px; display: block; font-size: 16px; line-height: 19px; } #kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left .kl_mod_num {background: url(https://designtools.ciditools.com/css/images/bookmark.png) no-repeat center top; background-size: contain; width: 100%; height: 35px; color: #0F2439; margin: 3px auto 0; font-size: 0.8em; font-weight: bold; padding-top: 3px; text-align: center; display: block; line-height: 1em; } #kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_right {padding: 5px 10px; display: table-cell; } #kl_wrapper_3.kl_bookmark #kl_banner .kl_subtitle {background: url(https://designtools.ciditools.com/css/images/ribbon_right.png) no-repeat right center; background-size: contain; display: inline-block; font-size: 16px; line-height: 34px; margin-bottom: 5px; color: #fff; background-color: #AD2A2A; padding: 0 40px 0 10px; } #kl_wrapper_3.kl_bookmark h3:not(.ui-state-default) {background: #0F2439 url(https://designtools.ciditools.com/css/images/ribbon_right.png) no-repeat right center; background-size: contain; color: #fff; display: table; font-family: "PT Sans", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 34px; margin: 5px 0 20px; padding: 0 80px 0 10px; } #kl_wrapper_3.kl_bookmark h3:not(.ui-state-default) i {margin-right: 10px; } #kl_wrapper_3.kl_bookmark > div > i:before {font-size: 16px; line-height: 34px;} #kl_wrapper_3.kl_bookmark > div > i {background: #0F2439 url(https://designtools.ciditools.com/css/images/ribbon_right.png) no-repeat right center; background-size: contain; color: #fff; display: inline-block; float: left; font-size: 16px; font-weight: bold; height: 34px; margin: 5px 10px 5px 0; padding: 0 25px 0 10px; line-height: 34px; width: inherit;} #kl_wrapper_3.kl_bookmark h4:not(.kl_panel_heading), #kl_wrapper_3.kl_bookmark h5:not(.kl_panel_heading) {clear:both; background: #565656 url(https://designtools.ciditools.com/css/images/ribbon_right.png) no-repeat right center; background-size: contain; color: #fff; display: table; font-family: "PT Sans", Helvetica, Arial, sans-serif; font-weight: bold; margin: 5px 0 10px; padding: 0 65px 0 10px; } #kl_wrapper_3.kl_bookmark #kl_banner #kl_description {font-size: 16px; padding: 10px; border: 1px solid #0F2439; } #kl_wrapper_3.kl_bookmark #kl_navigation {overflow: hidden; position: relative; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul {width: 100%; margin: 0 0 0 2px; list-style-type: none; padding: 0; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul li i {width: 20px; text-align: center; margin-right: 10px; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a {display: block; padding: 3px 10px; background: #fff; color: #0F2439; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; margin: 2px 10px 4px 0; border-radius: 5px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.17); font-size: 1.2em; height: 36px; border: 1px solid #eaeaea; line-height: 30px; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:focus {margin-right: 5px; } /* Canvas file download link */ #kl_wrapper_3.kl_bookmark #kl_navigation a.file_download_btn {top: 1px; right: 5px; box-shadow: none; line-height: 1em; height: unset;} #kl_wrapper_3.kl_bookmark .kl_quick_check, #kl_wrapper_3.kl_bookmark #kl_modules .kl_module_current, #kl_wrapper_3.kl_bookmark #kl_modules .ui-tabs-panel {background: #fff; } @media screen and (min-width: 500px) { #kl_wrapper_3.kl_bookmark #kl_navigation {height: inherit; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul {width: 100%; position: initial; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul li {display: inline-block; width: 50%; float: left; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:focus {margin-right: 5px; } } @media screen and (min-width: 975px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul {display: table; table-layout: fixed; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul li {display: table-cell; width: 100%; float: none; } } @media screen and (min-width: 1100px) { } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul {display: table; table-layout: fixed; } body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul li {display: table-cell; width: 100%; float: none; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a {padding: 1px 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0 10px 2px 0; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation {overflow:visible; height: 1px; width:300px; margin: 0 2px -3px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul {margin: 0; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul li {display: block; width: 100%; float: none; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:hover, body:not(.course-menu-expanded) #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:focus {margin-right: 5px; } } @media screen and (min-width: 1300px) { body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a {padding: 1px 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0 10px 2px 0; } body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation {overflow:visible; height: 1px; width:300px; margin: 0 2px -3px; } body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul {margin: 0; } body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul li {display: block; width: 100%; float: none; } body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:hover, body.course-menu-expanded #kl_wrapper_3.kl_bookmark #kl_navigation > ul li a:focus {margin-right: 5px; } } /*********************************************************************/ /***** BOX LEFT THEMES 1, 2, 3 **********************************/ /* BASE */ #kl_wrapper_3.kl_box_left > div, #kl_wrapper_3.kl_box_left_1 > div, #kl_wrapper_3.kl_box_left_2 > div, #kl_wrapper_3.kl_box_left_3 > div {overflow-y: hidden; overflow-x: auto; } #kl_wrapper_3.kl_box_left h2, #kl_wrapper_3.kl_box_left_1 h2, #kl_wrapper_3.kl_box_left_2 h2, #kl_wrapper_3.kl_box_left_3 h2 {border-bottom: 2px solid #c2c2c2; padding-bottom: 15px; margin: 0 0 5px; } #kl_wrapper_3.kl_box_left h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default) {border-bottom: 1px solid #c2c2c2; border-top: 1px solid #c2c2c2; padding: 5px 10px; margin: 35px 0 20px; background-color: #fff; } #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) i, #kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default) i {display: inline-block; width: 35px; text-align: center; height: 35px; line-height: 35px; margin-right: 10px; -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); margin-left: -10px; } #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default) i:before {line-height: 35px; font-size: 22px; } #kl_wrapper_3.kl_box_left #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_box_left_1 #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_box_left_2 #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_box_left_3 #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_box_left div.kl_quick_check h3, #kl_wrapper_3.kl_box_left_1 div.kl_quick_check h3, #kl_wrapper_3.kl_box_left_2 div.kl_quick_check h3, #kl_wrapper_3.kl_box_left_3 div.kl_quick_check h3 { margin-top: 0; } #kl_wrapper_3.kl_box_left #kl_banner, #kl_wrapper_3.kl_box_left_1 #kl_banner, #kl_wrapper_3.kl_box_left_2 #kl_banner, #kl_wrapper_3.kl_box_left_3 #kl_banner {margin: 0 0 5px; } #kl_wrapper_3.kl_box_left #kl_banner_left, #kl_wrapper_3.kl_box_left_1 #kl_banner_left, #kl_wrapper_3.kl_box_left_2 #kl_banner_left, #kl_wrapper_3.kl_box_left_3 #kl_banner_left {font-weight: normal; font-size: 16px; line-height: 20px; display: inline-block; margin: 0px 10px 0 0; -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); } #kl_wrapper_3.kl_box_left #kl_banner_left .kl_mod_text, #kl_wrapper_3.kl_box_left_1 #kl_banner_left .kl_mod_text, #kl_wrapper_3.kl_box_left_2 #kl_banner_left .kl_mod_text, #kl_wrapper_3.kl_box_left_3 #kl_banner_left .kl_mod_text {padding: 10px 5px 10px 10px; display: inline-block; } #kl_wrapper_3.kl_box_left #kl_banner_left .kl_mod_num, #kl_wrapper_3.kl_box_left_1 #kl_banner_left .kl_mod_num, #kl_wrapper_3.kl_box_left_2 #kl_banner_left .kl_mod_num, #kl_wrapper_3.kl_box_left_3 #kl_banner_left .kl_mod_num {padding: 10px 10px 10px 5px; display: inline-block; } #kl_wrapper_3.kl_box_left #kl_banner_right, #kl_wrapper_3.kl_box_left_1 #kl_banner_right, #kl_wrapper_3.kl_box_left_2 #kl_banner_right, #kl_wrapper_3.kl_box_left_3 #kl_banner_right {font-size: 25px; font-weight: normal; padding: 0px 10px; } #kl_wrapper_3.kl_box_left #kl_banner .kl_subtitle, #kl_wrapper_3.kl_box_left_1 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_box_left_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_box_left_3 #kl_banner .kl_subtitle {font-size: 1.5em; line-height: 1.5em; text-align: right; margin-top: -38px; } #kl_wrapper_3.kl_box_left #kl_banner #kl_description, #kl_wrapper_3.kl_box_left_1 #kl_banner #kl_description, #kl_wrapper_3.kl_box_left_2 #kl_banner #kl_description, #kl_wrapper_3.kl_box_left_3 #kl_banner #kl_description {padding: 10px; background: #fff; border: 1px solid #C2C2C2; } #kl_wrapper_3.kl_box_left #kl_navigation, #kl_wrapper_3.kl_box_left_1 #kl_navigation, #kl_wrapper_3.kl_box_left_2 #kl_navigation, #kl_wrapper_3.kl_box_left_3 #kl_navigation {width: 100%; margin: 0; display: table; table-layout: fixed; } #kl_wrapper_3.kl_box_left #kl_navigation > ul, #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul {margin: 0; display: table-row; width: 100%; padding:0; } #kl_wrapper_3.kl_box_left #kl_navigation > ul li, #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li {font-weight: normal; list-style-type: none; display: table-cell; width: auto; float: none; display: block; width: 100%; } #kl_wrapper_3.kl_box_left #kl_navigation > ul li i, #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li i, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li i, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li i {margin-right: 10px; } #kl_wrapper_3.kl_box_left #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li a {font-size: 1.2em; display: block; padding: 12px 22px 12px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px; } #kl_wrapper_3.kl_box_left > div > i:before, #kl_wrapper_3.kl_box_left_1 > div > i:before, #kl_wrapper_3.kl_box_left_2 > div > i:before, #kl_wrapper_3.kl_box_left_3 > div > i:before {line-height: 30px;font-size: 16px;} #kl_wrapper_3.kl_box_left > div > i, #kl_wrapper_3.kl_box_left_1 > div > i, #kl_wrapper_3.kl_box_left_2 > div > i, #kl_wrapper_3.kl_box_left_3 > div > i {color: #fff; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); width: 30px; height: 30px; line-height: 30px; text-align: center; float: left; -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.09); margin-right: 10px; margin-bottom: 3px; } /* Color Defaults for Configurations Page Version */ /* BASE THEME */ #kl_wrapper_3.kl_box_left h2 {border-bottom: 2px solid lightgray; } #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) {border-bottom: 1px solid lightgray; border-top: 1px solid lightgray;} #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) i { background: darkslategray; color: #fff;} #kl_wrapper_3.kl_box_left #kl_modules div.kl_module_content h3 {border: 1px solid lightgray; } #kl_wrapper_3.kl_box_left #kl_banner #kl_description {background: #fff; border: 1px solid lightgray; } #kl_wrapper_3.kl_box_left > div > i {color: #fff; clear: left; } #kl_wrapper_3.kl_box_left #kl_banner #kl_banner_left {background: darkslategray; color: #fff; } #kl_wrapper_3.kl_box_left > div > i {background: darkslategray; } #kl_wrapper_3.kl_box_left #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left #kl_navigation > ul li a:visited {background: #fff; color: #000; border: 1px solid lightsteelblue; } #kl_wrapper_3.kl_box_left #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_box_left #kl_navigation > ul li a:focus {background: lightsteelblue; color: #000; } /* VARIATION #2 */ #kl_wrapper_3.kl_box_left.variation_2 #kl_banner #kl_banner_left {background: gainsboro; color: #000; } #kl_wrapper_3.kl_box_left.variation_2 > div > i {background: gainsboro; color: #000; } #kl_wrapper_3.kl_box_left.variation_2 h3:not(.ui-state-default) i {background: gainsboro; color: #000; } #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul li a:visited {background: #fff; color: #000; border: 1px solid lightsteelblue; } #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul li a:focus, #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul li a:hover {background: lightsteelblue; color: #000; } /* VARIATION #3 */ #kl_wrapper_3.kl_box_left.variation_3 #kl_banner #kl_banner_left {background: lightsteelblue; color: #000; } #kl_wrapper_3.kl_box_left.variation_3 > div > i {background: lightsteelblue; color: #000; } #kl_wrapper_3.kl_box_left.variation_3 h3:not(.ui-state-default) i {background: lightsteelblue; color: #000; } #kl_wrapper_3.kl_box_left.variation_3 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left.variation_3 #kl_navigation > ul li a:visited {background: #fff; color: #000; border: 1px solid lightsteelblue; } #kl_wrapper_3.kl_box_left.variation_3 #kl_navigation > ul li a:focus, #kl_wrapper_3.kl_box_left.variation_3 #kl_navigation > ul li a:hover {background: lightsteelblue; color: #000; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li{font-weight: normal; list-style-type: none; display: table-cell; width: auto; float: none; display: block; width: 50%; float:left; } } @media screen and (min-width: 850px) { body.course-menu-expanded #kl_wrapper_3.kl_box_left #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_box_left #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li{background:none; display:block; padding: 0; border: none; width: 50%; float:left; display: inline-block; float: left; } } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_box_left #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; width: 100%; } body.course-menu-expanded #kl_wrapper_3.kl_box_left #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li{display: table-cell; width: 100%; float:none; } } /* VARIATIONS */ #kl_wrapper_3.kl_box_left_1 #kl_banner #kl_banner_left {background: #0F2439; color: #fff;} #kl_wrapper_3.kl_box_left_2 #kl_banner #kl_banner_left {background: #bfa793; color: #000;} #kl_wrapper_3.kl_box_left_3 #kl_banner #kl_banner_left {background: #c2c9ce; color: #000;} #kl_wrapper_3.kl_box_left_1 > div > i { background: #0F2439;} #kl_wrapper_3.kl_box_left_2 > div > i { background: #bfa793; color: #000;} #kl_wrapper_3.kl_box_left_3 > div > i { background: #c2c9ce; color: #000;} #kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default) i { background: #0F2439; color: #fff;} #kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default) i { background: #bfa793; color: #000; } #kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default) i { background: #c2c9ce; color: #000; } #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li a:visited, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li a, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li a:visited, /*#kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li a:visited { background: #0F2439; color: #fff; border: 1px solid #0F2439; }*/ #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li a:visited { background: #fff; color: #000; border: 1px solid #c2c9ce; } #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_box_left_1 #kl_navigation > ul li a:focus { background: #c2c9ce; color: #0F2439;} #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li a:focus, #kl_wrapper_3.kl_box_left_2 #kl_navigation > ul li a:focus, #kl_wrapper_3.kl_box_left_3 #kl_navigation > ul li a:hover { background: #c2c9ce; color: #0F2439;} /*********************************************************************/ /***** CIRCLE-LEFT THEMES 1, 2, 3 **********************************/ /* BASE */ #kl_wrapper_3.kl_circle_left, #kl_wrapper_3.kl_circle_left_1, #kl_wrapper_3.kl_circle_left_2, #kl_wrapper_3.kl_circle_left_3 {border: 1px solid; padding:10px; } #kl_wrapper_3.kl_circle_left > div, #kl_wrapper_3.kl_circle_left_1 > div, #kl_wrapper_3.kl_circle_left_2 > div, #kl_wrapper_3.kl_circle_left_3 > div {overflow-y: hidden; overflow-x: auto; } /* Banner Elements */ #kl_wrapper_3.kl_circle_left h2, #kl_wrapper_3.kl_circle_left_1 h2, #kl_wrapper_3.kl_circle_left_2 h2, #kl_wrapper_3.kl_circle_left_3 h2 {margin: 9px 0; } #kl_wrapper_3.kl_circle_left #kl_banner, #kl_wrapper_3.kl_circle_left_1 #kl_banner, #kl_wrapper_3.kl_circle_left_2 #kl_banner, #kl_wrapper_3.kl_circle_left_3 #kl_banner {position:relative; margin: 5px 0; padding-top: 5px; } #kl_wrapper_3.kl_circle_left #kl_banner_left, #kl_wrapper_3.kl_circle_left_1 #kl_banner_left, #kl_wrapper_3.kl_circle_left_2 #kl_banner_left, #kl_wrapper_3.kl_circle_left_3 #kl_banner_left {float: left; border-radius: 40px; width: 66px; height: 66px; text-align: center; margin: -15px 10px 0 5px; border: 5px solid #fff; } #kl_wrapper_3.kl_circle_left .kl_mod_text, #kl_wrapper_3.kl_circle_left_1 .kl_mod_text, #kl_wrapper_3.kl_circle_left_2 .kl_mod_text, #kl_wrapper_3.kl_circle_left_3 .kl_mod_text {display:none; } #kl_wrapper_3.kl_circle_left .kl_mod_num, #kl_wrapper_3.kl_circle_left_1 .kl_mod_num, #kl_wrapper_3.kl_circle_left_2 .kl_mod_num, #kl_wrapper_3.kl_circle_left_3 .kl_mod_num {margin-top: 10px; display: block; font-size: 25px; } #kl_wrapper_3.kl_circle_left #kl_banner_right, #kl_wrapper_3.kl_circle_left_1 #kl_banner_right, #kl_wrapper_3.kl_circle_left_2 #kl_banner_right, #kl_wrapper_3.kl_circle_left_3 #kl_banner_right {padding: 0 5px; font-weight: normal; display: flex; } #kl_wrapper_3.kl_circle_left #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left_1 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left_3 #kl_banner .kl_subtitle {padding: 5px; display: block; font-size: 1.2em; text-align: right; margin: -10px 0 0; border-bottom: 4px solid; } #kl_wrapper_3.kl_circle_left #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left_1 #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left_2 #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left_3 #kl_banner #kl_description {padding: 10px; border-bottom: 5px solid; } /* Banner Image */ #kl_wrapper_3.kl_circle_left #kl_banner_image, #kl_wrapper_3.kl_circle_left_1 #kl_banner_image, #kl_wrapper_3.kl_circle_left_2 #kl_banner_image, #kl_wrapper_3.kl_circle_left_3 #kl_banner_image {padding: 0; } #kl_wrapper_3.kl_circle_left #kl_banner_image img, #kl_wrapper_3.kl_circle_left_1 #kl_banner_image img, #kl_wrapper_3.kl_circle_left_2 #kl_banner_image img, #kl_wrapper_3.kl_circle_left_3 #kl_banner_image img {padding-bottom: 5px; border-bottom: 5px solid; } /* General Content */ #kl_wrapper_3.kl_circle_left h3:not(.ui-state-default), #kl_wrapper_3.kl_circle_left_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_circle_left_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_circle_left_3 h3:not(.ui-state-default) {position: relative; line-height: 30px; border-radius: 20px; border: 2px solid; background-color: #fff; padding: 0 15px; margin-bottom: 15px;} #kl_wrapper_3.kl_circle_left #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_circle_left_1 #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_circle_left_2 #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_circle_left_3 #kl_modules div.kl_module_content h3 {margin-bottom: 20px; margin-top: 10px;} #kl_wrapper_3.kl_circle_left > div, #kl_wrapper_3.kl_circle_left_1 > div, #kl_wrapper_3.kl_circle_left_2 > div, #kl_wrapper_3.kl_circle_left_3 > div {overflow:hidden; } /* Icons */ #kl_wrapper_3.kl_circle_left > div > h3:not(.ui-state-default) i, #kl_wrapper_3.kl_circle_left_1 > div > h3:not(.ui-state-default) i, #kl_wrapper_3.kl_circle_left_2 > div > h3:not(.ui-state-default) i, #kl_wrapper_3.kl_circle_left_3 > div > h3:not(.ui-state-default) i, #kl_wrapper_3.kl_circle_left #kl_modules div.kl_module_content h3 i, #kl_wrapper_3.kl_circle_left_1 #kl_modules div.kl_module_content h3 i, #kl_wrapper_3.kl_circle_left_2 #kl_modules div.kl_module_content h3 i, #kl_wrapper_3.kl_circle_left_3 #kl_modules div.kl_module_content h3 i {width: 50px; height: 50px; line-height: 40px; text-align: center; border-radius: 25px; border: 5px solid #fff; float: left; margin: -10px 10px 0 -20px; } #kl_wrapper_3.kl_circle_left #kl_modules div.kl_module_content h3 i, #kl_wrapper_3.kl_circle_left_1 #kl_modules div.kl_module_content h3 i, #kl_wrapper_3.kl_circle_left_2 #kl_modules div.kl_module_content h3 i, #kl_wrapper_3.kl_circle_left_3 #kl_modules div.kl_module_content h3 i {border: none; float: left; margin: -10px 10px 0 -22px; } #kl_wrapper_3.kl_circle_left > div > i, #kl_wrapper_3.kl_circle_left_1 > div > i, #kl_wrapper_3.kl_circle_left_2 > div > i, #kl_wrapper_3.kl_circle_left_3 > div > i {width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 22px; margin-right: 10px; } #kl_wrapper_3.kl_circle_left > div > i:before, #kl_wrapper_3.kl_circle_left_1 > div > i:before, #kl_wrapper_3.kl_circle_left_2 > div > i:before, #kl_wrapper_3.kl_circle_left_3 > div > i:before, #kl_wrapper_3.kl_circle_left > div > h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_circle_left_1 > div > h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_circle_left_2 > div > h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_circle_left_3 > div > h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_circle_left #kl_modules div.kl_module_content h3 i:before, #kl_wrapper_3.kl_circle_left_1 #kl_modules div.kl_module_content h3 i:before, #kl_wrapper_3.kl_circle_left_2 #kl_modules div.kl_module_content h3 i:before, #kl_wrapper_3.kl_circle_left_3 #kl_modules div.kl_module_content h3 i:before {line-height: 43px; font-size: 22px; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul li i:before, #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li i:before, #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li i:before, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li i:before {line-height: 40px; font-size: 16px; } #kl_wrapper_3.kl_circle_left h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_1 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_2 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_3 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left h5:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_1 h5:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_2 h5:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_3 h5:not(.kl_panel_heading) {border: 1px solid; border-radius: 20px; padding: 0 20px; } /* Navigation */ #kl_wrapper_3.kl_circle_left #kl_navigation, #kl_wrapper_3.kl_circle_left_1 #kl_navigation, #kl_wrapper_3.kl_circle_left_2 #kl_navigation, #kl_wrapper_3.kl_circle_left_3 #kl_navigation {margin: 5px 0; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul, #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul, #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul {margin: 0; padding: 0; overflow: hidden; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul li, #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li, #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li {font-weight: normal; list-style-type: none; position: relative; height: 43px; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li a {font-size: 16px; display: block; padding: 0 20px; line-height: 40px; white-space: nowrap; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; border-radius: 20px; margin: 3px 0; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul li i, #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li i, #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li i, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li i {width: 45px; height: 45px; line-height: 40px; text-align: center; border-radius: 24px; position: absolute; right: 0; border: 3px solid #fff; margin: -3px -2px 0 0; } /* Canvas file download link */ #kl_wrapper_3.kl_circle_left #kl_navigation a.file_download_btn { top: 5px; right: 7px; box-shadow: none; line-height: 1em; height: unset; background: #fff; } /* Color Defaults for Configurations Page Version */ /* BASE THEME */ #kl_wrapper_3.kl_circle_left #kl_banner_left {border: 5px solid #fff; } #kl_wrapper_3.kl_circle_left h3:not(.ui-state-default) {background-color: #fff; } #kl_wrapper_3.kl_circle_left > div > h3:not(.ui-state-default) i, #kl_wrapper_3.kl_circle_left #kl_modules div.kl_module_content h3 i {border: 5px solid #fff; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul li i {border: 3px solid #fff; background: lightsteelblue; color: darkslategray; } #kl_wrapper_3.kl_circle_left, #kl_wrapper_3.kl_circle_left #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left h3:not(.ui-state-default), #kl_wrapper_3.kl_circle_left h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left h5, #kl_wrapper_3.kl_circle_left #kl_banner_image img {border-color: lightsteelblue; } #kl_wrapper_3.kl_circle_left #kl_banner_left, #kl_wrapper_3.kl_circle_left h3 i, #kl_wrapper_3.kl_circle_left > div > i {background: darkslategray; color: #fff; } #kl_wrapper_3.kl_circle_left #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left #kl_navigation > ul li a {background: darkslategray; color: #FFF; } #kl_wrapper_3.kl_circle_left #kl_banner h2 {background: lightsteelblue; color: #000; } /* Mobile App and collapsed course menu */ @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left h2, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 h2, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 h2, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 h2 {line-height: 1.8em; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_banner_left, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_banner_left, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_banner_left, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_banner_left {margin: -13px 10px 0 25px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_banner_right, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_banner_right, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_banner_right, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_banner_right {padding: 0 10px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_banner .kl_subtitle, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_banner .kl_subtitle, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_banner .kl_subtitle, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_banner .kl_subtitle {clear: initial; margin: -15px 0 0; } } @media screen and (min-width: 550px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li {float: left; width: 49%; } } @media screen and (min-width: 850px) { body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav).kl_active a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav).kl_active a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav).kl_active a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav).kl_active a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li a:focus, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li a:focus, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li a:focus, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li a:focus {width: 200px; margin-left: -180px; padding-left: 20px; box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.31); } body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 {margin-right: 44px; } body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav), body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav), body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav), body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) {position: absolute; top: 65px; right: -5px; overflow: visible; } body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul {overflow: visible; } body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li {float: none; } body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li a, body.no-touch:not(.course-menu-expanded) #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li a {position: absolute; padding: 0; top: 0; width: 40px; overflow: visible; z-index: 1; } } /* Expanded Course Menu */ @media screen and (min-width: 800px) { body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li {float: left; width: 49%; } body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation > ul li:nth-child(even), body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li:nth-child(even), body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li:nth-child(even), body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li:nth-child(even) {margin-left: 2%; } } @media screen and (min-width: 950px) { body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation.kl_active:not(.kl_fixed_nav) a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation.kl_active:not(.kl_fixed_nav) a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation.kl_active:not(.kl_fixed_nav) a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation.kl_active:not(.kl_fixed_nav) a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li a:hover, body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li a:focus, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li a:focus, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li a:focus, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li a:focus {width: 220px; margin-left: -180px; padding-left: 20px; box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.31); } body.course-menu-expanded #kl_wrapper_3.kl_circle_left, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 {margin-right: 44px; } body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav), body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav), body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav), body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) {position: absolute; top: 65px; right: -5px; overflow: visible; } body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul {overflow: visible; } body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li {float: none; } body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation:not(.kl_fixed_nav) ul li a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_1 #kl_navigation:not(.kl_fixed_nav) ul li a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_2 #kl_navigation:not(.kl_fixed_nav) ul li a, body.course-menu-expanded #kl_wrapper_3.kl_circle_left_3 #kl_navigation:not(.kl_fixed_nav) ul li a {position: absolute; padding: 0; top: 0; width: 40px; z-index: 1; overflow: hidden;} /* Canvas file download link */ body.course-menu-expanded #kl_wrapper_3.kl_circle_left #kl_navigation ul li a.file_download_btn { top: 5px; right: 0; box-shadow: none; line-height: 1em; height: unset; background: #fff; width: 30px !important; text-align: center; } } /* VARIATIONS */ /* 1 */ #kl_wrapper_3.kl_circle_left_1, #kl_wrapper_3.kl_circle_left_1 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left_1 #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_circle_left_1 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_1 h5, #kl_wrapper_3.kl_circle_left_1 #kl_banner_image img {border-color: #c2c9ce; } #kl_wrapper_3.kl_circle_left_1 #kl_banner_left, #kl_wrapper_3.kl_circle_left_1 h3 i, #kl_wrapper_3.kl_circle_left_1 > div > i {background: #0F2439; color: #fff; } /*#kl_wrapper_3.kl_circle_left_1 #kl_navigation.kl_active a,*/ #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li i {background: #c2c9ce; color: #0F2439; } #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left_1 #kl_navigation > ul li a {background: #0F2439; color: #FFF; } #kl_wrapper_3.kl_circle_left_1 #kl_banner h2 {background: #c2c9ce; color: #000; } /* 2 */ #kl_wrapper_3.kl_circle_left_2, #kl_wrapper_3.kl_circle_left_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left_2 #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left_2 #kl_banner_image {border-color: #bfa793; } #kl_wrapper_3.kl_circle_left_2 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_2 h5, #kl_wrapper_3.kl_circle_left_2 h3:not(.ui-state-default) {border-color: #0f2439; } #kl_wrapper_3.kl_circle_left_2 #kl_banner_left, #kl_wrapper_3.kl_circle_left_2 h3 i, #kl_wrapper_3.kl_circle_left_2 > div > i {background: #bfa793; color: #000; } #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li i {background: #0F2439; color: #fff; } #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left_2 #kl_navigation > ul li a {background: #bfa793; color: #000; } #kl_wrapper_3.kl_circle_left_2 #kl_banner h2 {background: #0F2439; color: #FFF; } /* 3 */ #kl_wrapper_3.kl_circle_left_3, #kl_wrapper_3.kl_circle_left_3 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left_3 #kl_banner #kl_description, #kl_wrapper_3.kl_circle_left_3 #kl_banner_image {border-color: #c2c9ce; } #kl_wrapper_3.kl_circle_left_3 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left_3 h5, #kl_wrapper_3.kl_circle_left_3 h3:not(.ui-state-default) {border-color: #0F2439; } #kl_wrapper_3.kl_circle_left_3 #kl_banner_left, #kl_wrapper_3.kl_circle_left_3 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_circle_left_3 > div > i {background: #c2c9ce; color: #000; } #kl_wrapper_3.kl_circle_left_3 #kl_navigation.kl_active a, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li i {background: #0F2439; color: #fff; } #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li a, #kl_wrapper_3.kl_circle_left_3 #kl_navigation > ul li a {background: #c2c9ce; color: #000; } #kl_wrapper_3.kl_circle_left_3 #kl_banner h2 {background: #0F2439; color: #FFF; } /*********************************************************************/ /***** CIRCLES OVERLAP THEME *******************************/ #kl_wrapper_3.kl_circles_overlap #kl_banner {position: relative; margin-bottom: 0; overflow: visible; } #kl_wrapper_3.kl_circles_overlap #kl_banner h2 {margin: 0; } #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_left {display: block; font-weight: 300; font-size: 30px; margin-left: 25px; } #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right {position: absolute; top: 50px; left: 0; right: 0; padding: 20px 70px 20px 20px; display: block; font-size: 40px; line-height: 40px; text-transform: uppercase; font-weight: 300; color: #696969; background: rgba(255, 255, 255, 0.68);} #kl_wrapper_3.kl_circles_overlap > div {overflow: hidden; clear: both;} #kl_wrapper_3.kl_circles_overlap #kl_navigation {height: 95px; overflow: visible; background: none; margin-top:-55px; } #kl_wrapper_3.kl_circles_overlap #kl_banner .kl_subtitle {position: absolute; left: 0; right: 0; background: rgba(255, 255, 255, 0.72); font-size: 1.8em; top: 148px; padding: 10px 45% 10px 10px;} #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {position: absolute; width: 40%; right: 10px; top: 115px; background-color: #fff; padding: 10px 10px 20px 10px; max-height: 150px; overflow-y: scroll; border-radius: 5px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.42); } #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul {display: block;} #kl_wrapper_3.kl_circles_overlap #kl_navigation li {border-radius: 85px; float:left; overflow: visible; vertical-align: middle; padding: 0; margin: 8px; position: relative; list-style-type: none; width: 75px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation li a, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:focus, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:visited { color: #fff; } #kl_wrapper_3.kl_circles_overlap #kl_navigation li a {font-family: 'Satisfy', Arial, cursive; background-color: #003366; font-size: 24px; width: 74px; height: 74px; overflow: hidden; display: inline-block; position: relative; white-space: nowrap; border-radius: 35px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i[class*=icon-]:before, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i[class^=icon-]:before{font-size: 45px; height: 45px; line-height: 68px;} #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i{font-size: 45px; line-height: 75px; width: 75px; text-align: center; margin-right: 10px; } #kl_wrapper_3.kl_circles_overlap > div > i, #kl_wrapper_3.kl_circles_overlap h3:not(.ui-state-default) i{background-color: #87898A; color: #fff; font-size: 24px; width: 50px; text-align: center; margin-right: 10px; height: 50px; line-height: 50px; border-radius: 25px;} #kl_wrapper_3.kl_circles_overlap > div > i[class*=icon-]:before, #kl_wrapper_3.kl_circles_overlap > div > i[class^=icon-]:before, #kl_wrapper_3.kl_circles_overlap h3:not(.ui-state-default) i[class*=icon-]:before, #kl_wrapper_3.kl_circles_overlap h3:not(.ui-state-default) i[class^=icon-]:before {font-size: 24px; } #kl_wrapper_3.kl_circles_overlap .kl_quick_check h3 {margin-top:0;} #kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:focus {color: #fff; background: #87898A !important; text-decoration: none; overflow: visible; width: initial; position: absolute; top: -50px; height: 40px; line-height: 40px; padding: 0 30px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a i, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover i, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:focus i {position: absolute; bottom: -85px; left: 0; background-color: #87898A; height: 75px; overflow: visible; border-radius: 40px; } @media screen and (max-width: 1300px) { #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {max-height: 135px; } } @media screen and (max-width: 1250px) { #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {max-height: 120px; } } /* Course Nav Disappears */ @media screen and (max-width: 1200px) { #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {top: 90px; max-height: 130px; } } @media screen and (max-width: 1100px) { #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right {top: 40px; font-size: 30px; line-height: 40px; padding: 10px 20px; } #kl_wrapper_3.kl_circles_overlap #kl_banner .kl_subtitle {top: 125px; font-size: 1.5em; } #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul {margin: 0;} #kl_wrapper_3.kl_circles_overlap #kl_navigation li {width: 70px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation {margin-top: -40px; } #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {top: 110px; max-height: 140px; } } @media screen and (max-width: 1000px) { #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right {top: 40px; font-size: 1.0em; line-height: 1.0em; padding: 10px 20px; } #kl_wrapper_3.kl_circles_overlap #kl_banner .kl_subtitle {top: 95px; font-size: 1.3em; } #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul {margin: 0;} #kl_wrapper_3.kl_circles_overlap #kl_navigation li {width: 55px; height: 55px;} #kl_wrapper_3.kl_circles_overlap #kl_navigation li a {width: 65px; height: 65px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:focus {top: -40px; font-size: 18px; line-height: 30px; padding: 0 15px; height: 30px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover i { height: 65px; bottom: -75px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i{font-size: 40px; line-height: 65px; width: 65px; height: 65px;} #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i[class*=icon-]:before, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i[class^=icon-]:before{font-size: 40px; height: 53px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a i, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover, #kl_wrapper_3.kl_circles_overlap #kl_navigation li a:focus {bottom: -75px;} #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {top: 75px; max-height: 92px; } #kl_wrapper_3.kl_circles_overlap #kl_navigation {margin-top: -40px; } .course-menu-expanded #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_left {font-size: 0.8em; margin-left: 0; } .course-menu-expanded #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right {position: initial; padding: 5px 0; font-size: 0.8em;} .course-menu-expanded #kl_wrapper_3.kl_circles_overlap #kl_banner .kl_subtitle {top: 75px;} .course-menu-expanded #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {top: 81px; right: 1px;} } /* Canvas file download link */ #kl_wrapper_3.kl_circles_overlap #kl_navigation a.file_download_btn, #kl_wrapper_3.kl_circles_overlap #kl_navigation a.file_download_btn:hover, #kl_wrapper_3.kl_circles_overlap #kl_navigation a.file_download_btn:focus { bottom: 5px; right: -16px; position: absolute; width: 30px; height: 30px; background: #fff !important; line-height: 1em; text-align: center; top: 0; } /*********************************************************************/ /***** COLORED HEADINGS THEMES **************************************/ /* SHARED */ #kl_wrapper_3.kl_colored_headings_box_left > div, #kl_wrapper_3.kl_colored_headings > div {background-color: #fff; border: 1px solid #c2c2c2; font-size: 16px; margin: 0 0 10px; overflow-y: hidden; overflow-x: auto; padding: 20px; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul {background-color: #2F4661; color: #fff; margin: 0; display: table; table-layout: fixed; width: 100%; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li, #kl_wrapper_3.kl_colored_headings #kl_navigation li {display: block; font-size: 1.2em; font-weight: normal; list-style-type: none; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a, #kl_wrapper_3.kl_colored_headings #kl_navigation li a {display: block; padding: 5px 10px; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:focus, #kl_wrapper_3.kl_colored_headings #kl_navigation li a:focus, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:hover, #kl_wrapper_3.kl_colored_headings #kl_navigation li a:hover {border-left:none; border-right: none; color: #fff; background-color: #3e3e3e; text-decoration: none; -moz-box-shadow: inset 0 0 3px #fff; -webkit-box-shadow: inset 0 0 3px #fff; box-shadow: inset 0 0 3px #fff; } /* With Banner */ #kl_wrapper_3.kl_colored_headings_box_left #kl_banner {border: none; background: #2F4661; color: #fff; margin: 0 0 5px 0; padding: 0 0 5px; overflow: visible; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner h2 {position: relative; text-transform: uppercase; padding: 10px 0 0; margin: 0; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner_image {border: none; margin: 0; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left {background-color: #fff; color: #696969; font-size: 18px; line-height: 20px; padding: 5px; border-bottom: 5px solid #696969; display: block; margin: 0 10px 5px; text-align: center; z-index: 100; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_right {display: block; font-size: 26px; margin: 0 10px; text-align: center; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner .kl_subtitle {display: block; font-size: 1.2em; line-height: 1.2em; padding: 5px 10px; background-color: #fff; color: #000; text-align: center; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_description {padding: 0 10px 5px; } /* Without default banner */ #kl_wrapper_3.kl_colored_headings #kl_banner {background: #2F4661; color: #fff; padding: 0 0 10px; margin: 0 0 10px; } #kl_wrapper_3.kl_colored_headings #kl_banner h2 { position: relative; text-align: center; text-transform: uppercase; margin: 0;} #kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_left {background-color: #fff; color: #696969; display: inline-block; font-size: 18px; line-height: 20px; margin: 0 auto 10px; padding: 5px 20px; } #kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_right {display: block; font-size: 22px; margin-top: 0; } #kl_wrapper_3.kl_colored_headings #kl_banner .kl_subtitle { display: block; font-size: 16px; line-height: 20px; margin: 10px 0; text-transform: uppercase; text-align: center; border-top: 3px solid #fff; border-bottom: 3px solid #fff; padding: 5px;} #kl_wrapper_3.kl_colored_headings #kl_banner #kl_description { background-color: #fff; color: #000; padding: 10px;} #kl_wrapper_3.kl_colored_headings_box_left #kl_banner_image, #kl_wrapper_3.kl_colored_headings #kl_banner_image {margin-bottom: 5px; padding: 0; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner_image img, #kl_wrapper_3.kl_colored_headings #kl_banner_image img {border: none; padding: 0; } #kl_wrapper_3.kl_colored_headings_box_left > div > i, #kl_wrapper_3.kl_colored_headings > div > i {display: inline-block; background-color: #fff; color: #696969; border: 1px solid #ccc; border-bottom: 4px solid #696969; font-size: 20px; height: 35px; line-height: 30px; text-align: center; width: 35px; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation, #kl_wrapper_3.kl_colored_headings #kl_navigation {padding: 0; overflow: hidden; padding: 0; width: 100%; border:none;} #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul.kl_nav_list_1, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul.kl_nav_list_1 { margin: 0 0 5px; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li, #kl_wrapper_3.kl_colored_headings #kl_navigation li {background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 45px;} #kl_wrapper_3.kl_colored_headings #kl_navigation li a, #kl_wrapper_3.kl_colored_headings #kl_navigation li a:hover, #kl_wrapper_3.kl_colored_headings #kl_navigation li a:focus, #kl_wrapper_3.kl_colored_headings #kl_navigation li a:visited, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:hover, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:focus, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:visited { color: #fff; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation i, #kl_wrapper_3.kl_colored_headings #kl_navigation i {width: 40px;} #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation i, #kl_wrapper_3.kl_colored_headings #kl_navigation i {display: inline-block; background: #fff; padding: 4px 0px 6px; text-align: center; color: #696969; margin-right: 8px; border-bottom: 5px solid #696969; width: 30px; height: inherit;} /* Default Headings */ #kl_wrapper_3.kl_colored_headings_box_left > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) {position: relative; background-color: #747474; border-top: 5px solid #4e4e4e; color: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 18px; letter-spacing: 3px; line-height: 18px; margin: 10px -20px 20px; text-align: center; text-transform: uppercase; padding: 10px 55px 10px; min-height: 23px; } #kl_wrapper_3.kl_colored_headings_box_left > div > h3:not(.ui-state-default):first-child, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default):first-child {margin-top: -21px;} #kl_wrapper_3.kl_colored_headings_box_left > div > h3 i, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) i {position: absolute; background-color: #fff; color: #696969; display: block; font-size: 18px; height: 28px; line-height: 30px; text-align: center; width: 30px; top: 5px; left: 10px; border-bottom: 4px solid #696969; } #kl_wrapper_3.kl_colored_headings_box_left h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) i:before {font-size: 18px; line-height: 30px; } /* Introduction */ #kl_wrapper_3.kl_colored_headings_box_left #kl_introduction, #kl_wrapper_3.kl_colored_headings #kl_introduction {margin: 10px 0; } #kl_wrapper_3.kl_colored_headings_box_left #kl_introduction p:first-child, #kl_wrapper_3.kl_colored_headings #kl_introduction p:first-child {font-size: 21px; font-weight: 200; line-height: 30px; } /* Objectives Blue*/ #kl_wrapper_3.kl_colored_headings_box_left #kl_objectives h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_objectives h3:not(.ui-state-default) {background-color: #337cac; border-top: 5px solid #1b5378; color: #fff; } /* Readings Red */ #kl_wrapper_3.kl_colored_headings_box_left #kl_readings h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_readings h3:not(.ui-state-default) {background-color: #d24536; border-top: 5px solid #ae3225; color: #fff; } /* Lectures Green */ #kl_wrapper_3.kl_colored_headings_box_left #kl_lectures h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_lectures h3:not(.ui-state-default) {background-color: #28834e; border-top: 5px solid #176c3b; color: #fff; } /* Activities Orange */ #kl_wrapper_3.kl_colored_headings_box_left #kl_activities h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_activities h3:not(.ui-state-default) {background-color: #bf5900; border-top: 5px solid #913a01; color: #fff; } /* Assignments Purple */ #kl_wrapper_3.kl_colored_headings_box_left #kl_assignments h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_assignments h3:not(.ui-state-default) {background-color: #9b59b6; border-top: 5px solid #8e44ad; color: #fff; } /* Other Styles */ #kl_wrapper_3.kl_colored_headings_box_left h4, #kl_wrapper_3.kl_colored_headings h4 {border-bottom: 1px solid #E0E0E0; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; letter-spacing: 3px; margin: 40px 0 20px; text-transform: uppercase; } #kl_wrapper_3.kl_colored_headings_box_left h5, #kl_wrapper_3.kl_colored_headings h5 {border-bottom: 1px solid #E0E0E0; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 3px; margin: 40px 0 20px; } #kl_wrapper_3.kl_colored_headings_box_left .link_holder img, #kl_wrapper_3.kl_colored_headings .link_holder img {background: none; border: none; } #kl_wrapper_3.kl_colored_headings_box_left .well, #kl_wrapper_3.kl_colored_headings .well {background-color: #f5f5f5; border-radius: 4px; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); margin-bottom: 20px; min-height: 20px; padding: 19px; } @media screen and (min-width: 520px) { #kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_right {font-size: 35px;} #kl_wrapper_3.kl_colored_headings #kl_banner .kl_subtitle { font-size: 20px;} #kl_wrapper_3.kl_colored_headings_box_left > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) {position: relative; font-size: 22px; letter-spacing: 3px; line-height: 30px; padding: 10px 20px 10px 55px; min-height: 48px; } #kl_wrapper_3.kl_colored_headings_box_left > div > h3 i, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) i {font-size: 20px; height: 35px; line-height: 35px; text-align: center; width: 35px; top: 7px; border-bottom-width: 2px; } #kl_wrapper_3.kl_colored_headings_box_left h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) i:before {font-size: 20px; line-height: 35px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings #kl_navigation li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: inline-block; width: 50%; float: left; } } @media screen and (min-width: 650px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left {position: absolute; top: 10px; left: 10px; min-width:115px; border-bottom-width: 10px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_banner .kl_subtitle, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_description, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_right {padding: 3px 10px 3px 185px; margin: 0; text-align: left; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left .kl_mod_text, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left .kl_mod_num {width: 100%; padding: 2px 0 1px; display: block; font-size: 24px; line-height: 26px; text-align: center; } } @media screen and (min-width: 800px) { body.course-menu-expanded #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body.course-menu-expanded #kl_wrapper_3.kl_colored_headings #kl_navigation li, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: inline-block; width: 50%; float: left; } } @media screen and (min-width:1050px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings #kl_navigation li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: table-cell; font-size: 1.2em; float: none; } } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left {position: absolute; top: 10px; left: 10px; min-width:115px; border-bottom-width: 10px; } body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_banner .kl_subtitle, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_description, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_right {padding: 3px 10px 3px 185px; margin: 0; text-align: left; } body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left .kl_mod_text, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left .kl_mod_num {width: 100%; padding: 2px 0 1px; display: block; font-size: 24px; line-height: 26px; text-align: center; } } @media screen and (min-width:1140px) { body.with-right-side #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body.with-right-side #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body.with-right-side #kl_wrapper_3.kl_colored_headings #kl_navigation li, body.with-right-side #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: inline-block; width: 50%; float: left; } } @media screen and (min-width:1300px) { body.course-menu-expanded #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_colored_headings #kl_navigation li, body.course-menu-expanded #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: table-cell; font-size: 1.2em; float: none; } body.with-right-side #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body.with-right-side #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body.with-right-side #kl_wrapper_3.kl_colored_headings #kl_navigation li, body.with-right-side #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: inline-block; width: 50%; float: left; } } @media screen and (min-width:1450px) { body.with-right-side #kl_wrapper_3.kl_colored_headings #kl_navigation > ul, body.with-right-side #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body.with-right-side #kl_wrapper_3.kl_colored_headings #kl_navigation li, body.with-right-side #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li {display: table-cell; font-size: 1.2em; float: none; } } /*********************************************************************/ /***** EMTA THEME ********************************************/ #kl_wrapper_3.kl_emta { color: #0F2439; width: 100%; } #kl_wrapper_3.kl_emta > div {overflow-x: auto; overflow-y: hidden; } #kl_wrapper_3.kl_emta #kl_banner h2 { display: table; width: 100%; background-color: #0F2439; color: #fff; height: 60px; margin: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: "PT Sans";} #kl_wrapper_3.kl_emta #kl_banner #kl_banner_left {margin: 3px 5px; padding: 0; text-align: center; width: 70px; height: 40px; border-right: 2px solid #fff; display: table-cell; } #kl_wrapper_3.kl_emta #kl_banner #kl_banner_left .kl_mod_text{ display:none; } #kl_wrapper_3.kl_emta #kl_banner #kl_banner_left .kl_mod_num{display: block; background: url(images/badge.png) no-repeat left top; background-size: contain; width: 50px; height: 50px; color: #0F2439; margin: 0 auto; font-size: 18px; font-weight: bold; padding-top: 6px; line-height: 37px; } #kl_wrapper_3.kl_emta #kl_banner #kl_banner_right {display: table-cell; padding: 10px; } #kl_wrapper_3.kl_emta #kl_banner {background: #CACDCF; border-radius: 5px; margin-bottom: 10px;} #kl_wrapper_3.kl_emta #kl_banner .kl_subtitle {margin: 0; padding: 5px 12px; font-size: 18px; } #kl_wrapper_3.kl_emta #kl_banner #kl_description {background: #0F2439; color: #fff; margin: 0 10px 10px; padding: 5px 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #kl_wrapper_3.kl_emta #kl_banner_image img {border: none; padding: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #kl_wrapper_3.kl_emta h3:not(.ui-state-default) {color: #0F2439;background: #CACDCF;font-family: "PT Sans",Helvetica,Arial,sans-serif;margin: 20px 0;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;padding: 0 10px;line-height: 40px;} #kl_wrapper_3.kl_emta h3:not(.ui-state-default) i { margin: 0 10px 0 0; } #kl_wrapper_3.kl_emta #kl_navigation {width: 100%; margin: 5px 0; } #kl_wrapper_3.kl_emta #kl_navigation > ul {display: table; table-layout: fixed; width: 100%; background-color: #0F2439; color: #fff; overflow: hidden; margin: 5px 0; border-radius: 5px; padding:0; } #kl_wrapper_3.kl_emta #kl_navigation li {font-size: 1.2em; font-weight: normal; list-style-type: none; padding: 12px 10px 12px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #kl_wrapper_3.kl_emta #kl_navigation > ul li:first-of-type { padding-left: 20px;} #kl_wrapper_3.kl_emta #kl_navigation li i { margin-right: 10px;} #kl_wrapper_3.kl_emta #kl_navigation li a, #kl_wrapper_3.kl_emta #kl_navigation li a:hover, #kl_wrapper_3.kl_emta #kl_navigation li a:focus, #kl_wrapper_3.kl_emta #kl_navigation li a:visited { color: #fff; } #kl_wrapper_3.kl_emta #kl_modules { border: 1px solid #575757; border-radius: 5px; margin: 5px 0; } #kl_wrapper_3.kl_emta #kl_modules .kl_module_content { background: #fff; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_emta #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_emta #kl_navigation li {border-radius: 5px; display: inline-block; width: 44%; float: left; } } @media screen and (min-width: 850px) { body.course-menu-expanded #kl_wrapper_3.kl_emta #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body.course-menu-expanded #kl_wrapper_3.kl_emta #kl_navigation li {padding: 12px 22px 12px 10px; border-radius: 5px; display: inline-block; width: 44%; float: left; } } @media screen and (min-width: 900px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_emta #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_emta #kl_navigation li {display: table-cell; font-size: 1.2em; padding: 12px 22px 12px 10px; width: 44%; float: none; } } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_emta #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_emta #kl_navigation li {display: table-cell; font-size: 1.2em; padding: 12px 22px 12px 10px; width: 44%; float: none; } } /********************************************************************/ /**** FLAT SECTIONS THEME ***********************************/ /**** FLAT SECTIONS MAIN ****/ #kl_wrapper_3.kl_flat_sections_main #kl_banner {background: #1e5799; color: #fff; margin-bottom: 5px; padding: 0 0 7px 0; position:relative; overflow: visible; } #kl_wrapper_3.kl_flat_sections_main #kl_banner h2 {margin: 0; text-transform: uppercase; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left .kl_mod_text {display: block; padding: 21px 0 0; text-align: center; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left .kl_mod_num {display: block; padding: 0 0 21px; text-align: center; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left{background-color: #fff; border-radius: 50px; color: #696969; display: inline-block; font-size: 0.9em; left: 12px; top: 10px; line-height: 30px; overflow: hidden; position: absolute; height: 100px; width: 100px; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_right {display: block; font-size: 1em; padding: 10px 10px 10px 125px; min-height: 85px; } #kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle {display: block; font-size: medium; line-height: 20px; margin: 10px; background: #fff; color: black; padding: 5px 15px; border-radius: 20px; text-align: center; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_description {padding: 5px 15px; border-top: 2px solid #fff; margin-top: 10px; } @media screen and (min-width: 600px) { #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_right {min-height: 0; } #kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle {margin: 0 63px 25px; padding: 5px 50px 5px 62px; text-align: left; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_description {padding: 10px 50px 10px 125px; } } /**** FLAT SECTIONS ****/ #kl_wrapper_3.kl_flat_sections #kl_banner {background: #1e5799; padding: 20px 0; color: #fff; margin: 0 0 10px; overflow: visible; } #kl_wrapper_3.kl_flat_sections #kl_banner h2 {text-transform: uppercase; text-align: center; border-top: 1px solid #fff; margin: 0; } #kl_wrapper_3.kl_flat_sections #kl_banner #kl_banner_left{display: block; background-color: #fff; font-size: 18px; line-height: 30px; width: 250px; margin: -15px auto 10px; border-radius: 30px; color: #696969; } #kl_wrapper_3.kl_flat_sections #kl_banner #kl_banner_right {font-size: 22px; margin: 5px; display: block;} #kl_wrapper_3.kl_flat_sections #kl_banner .kl_subtitle {display: block; font-size: 16px; line-height: 16px; margin: 0; text-transform: uppercase; text-align: center; border-top: 1px solid; padding: 10px; background: #fff; color: #696969; } #kl_wrapper_3.kl_flat_sections #kl_banner #kl_description {display: block; font-size: 18px; line-height: 20px; margin: 10px 10px -10px; padding: 10px; background: #fff; color: #696969; } /**** SHARED ****/ #kl_wrapper_3.kl_flat_sections_main, #kl_wrapper_3.kl_flat_sections {font-size: 16px; } #kl_wrapper_3.kl_flat_sections_main #kl_banner_image, #kl_wrapper_3.kl_flat_sections #kl_banner_image {padding: 0; margin-bottom: 5px; background: #fff;} #kl_wrapper_3.kl_flat_sections_main #kl_banner_image img, #kl_wrapper_3.kl_flat_sections #kl_banner_image img {border: none; padding: 0 0 3px 0; } #kl_wrapper_3.kl_flat_sections_main #kl_progress_bar, #kl_wrapper_3.kl_flat_sections #kl_progress_bar {background: #fff; padding: 5px; margin: 25px 0 40px; } /* Navigation */ #kl_wrapper_3.kl_flat_sections_main #kl_navigation, #kl_wrapper_3.kl_flat_sections #kl_navigation {margin: 0 0 10px; overflow: hidden; padding: 0; } #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul {background-color: #1e5799; margin: 0; color: #fff; overflow: hidden; list-style-type: none; } #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, #kl_wrapper_3.kl_flat_sections #kl_navigation li {font-size: 1.2em; font-weight: normal; list-style-type: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #kl_wrapper_3.kl_flat_sections #kl_navigation li a, #kl_wrapper_3.kl_flat_sections #kl_navigation li a:visited, #kl_wrapper_3.kl_flat_sections_main #kl_navigation li a, #kl_wrapper_3.kl_flat_sections_main #kl_navigation li a:visited {padding: 5px 15px; display: block; color: #fff; } #kl_wrapper_3.kl_flat_sections #kl_navigation li a:hover, #kl_wrapper_3.kl_flat_sections #kl_navigation li a:focus, #kl_wrapper_3.kl_flat_sections_main #kl_navigation li a:hover, #kl_wrapper_3.kl_flat_sections_main #kl_navigation li a:focus {background: #444; color: #fff; } #kl_wrapper_3.kl_flat_sections_main #kl_navigation i, #kl_wrapper_3.kl_flat_sections #kl_navigation i {display: inline-block; background: #fff; text-align: center; border-radius: 20px; color: #696969; margin-right: 8px; border: 1px solid #696969; width: 30px; height: 30px; line-height: 30px; } #kl_wrapper_3.kl_flat_sections_main #kl_navigation i:before, #kl_wrapper_3.kl_flat_sections #kl_navigation i:before {line-height: 30px; font-size: 1em; } /* Canvas file download link */ #kl_wrapper_3.kl_flat_sections_main #kl_navigation ul li a.file_download_btn, #kl_wrapper_3.kl_flat_sections #kl_navigation ul li a.file_download_btn { top: 2px; right: 2px; } /* Content */ #kl_wrapper_3.kl_flat_sections_main #kl_modules div.kl_module_content h3, #kl_wrapper_3.kl_flat_sections #kl_modules div.kl_module_content h3 {margin-top: 25px; } #kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default), #kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) {color: #000; border-top: 1px solid #E0E0E0; text-align: center; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; margin-top: 15px;} #kl_wrapper_3.kl_flat_sections_main > div > i, #kl_wrapper_3.kl_flat_sections > div > i {color: #696969; display: block; margin: 0 auto; text-align: center; border: 1px solid #E0E0E0; width: 50px; line-height: 50px; border-radius: 50px; height: 50px; line-height: 50px; background: #fff; font-size: 25px; position: relative; padding-left: 3px; } #kl_wrapper_3.kl_flat_sections_main > div > i:before, #kl_wrapper_3.kl_flat_sections > div > i:before, #kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) i:before {font-size: 25px; line-height: 50px; } #kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default) i:first-child, #kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) i:first-child {color: #696969; display: block; margin: -25px auto 0; text-align: center; border: 1px solid #E0E0E0; width: 50px; border-radius: 50px; height: 50px; line-height: 50px; background: #fff; font-size: 25px; position: relative; padding-left: 3px; } #kl_wrapper_3.kl_flat_sections_main h4, #kl_wrapper_3.kl_flat_sections h4 {color: #000; border-bottom: 1px solid #E0E0E0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; margin: 40px 0 20px; } #kl_wrapper_3.kl_flat_sections_main h5, #kl_wrapper_3.kl_flat_sections h5 {color: #000; border-bottom: 1px solid #E0E0E0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; letter-spacing: 3px; margin: 40px 0 20px; } #kl_wrapper_3.kl_flat_sections_main > div, #kl_wrapper_3.kl_flat_sections > div {padding: 20px 20px 30px; font-size: 16px; overflow-y: hidden; overflow-x: auto; } body.kl_app_css #kl_wrapper_3.kl_flat_sections_main > div, body.kl_app_css #kl_wrapper_3.kl_flat_sections > div {padding: 10px 10px 20px; font-size: 16px; overflow-y: hidden; overflow-x: auto; } #kl_wrapper_3.kl_flat_sections_main > div:nth-child(odd), #kl_wrapper_3.kl_flat_sections > div:nth-child(odd) {background: #f8f8f8; } #kl_wrapper_3.kl_flat_sections_main > div:nth-child(odd) .context_module, #kl_wrapper_3.kl_flat_sections > div:nth-child(odd) .context_module {background: #fff; } #kl_wrapper_3.kl_flat_sections_main .well, #kl_wrapper_3.kl_flat_sections .well {min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); } #kl_wrapper_3.kl_flat_sections_main #kl_introduction p:first-child, #kl_wrapper_3.kl_flat_sections #kl_introduction p:first-child {font-size: 21px; font-weight: 200; line-height: 30px; } #kl_wrapper_3.kl_flat_sections_main blockquote, #kl_wrapper_3.kl_flat_sections blockquote {border-left: 5px solid #E0E0E0; } /* Expanded Menu */ @media screen and (min-width: 800px) { body.course-menu-expanded #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, body.course-menu-expanded #kl_wrapper_3.kl_flat_sections #kl_navigation li {display: block; width: 50%; float: left; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_right, #kl_wrapper_3.kl_flat_sections #kl_banner #kl_banner_right {font-size: 30px;} #kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle, #kl_wrapper_3.kl_flat_sections #kl_banner .kl_subtitle {font-size: 20px; line-height: 20px;} #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_description, #kl_wrapper_3.kl_flat_sections #kl_banner #kl_description {font-size: 18px; line-height: 20px;} } @media screen and (min-width: 1200px) { body.course-menu-expanded #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_flat_sections #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; width: 100%; } body.course-menu-expanded #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, body.course-menu-expanded #kl_wrapper_3.kl_flat_sections #kl_navigation li {display: table-cell; width: 100%; float:none; } body.with-right-side #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, body.with-right-side #kl_wrapper_3.kl_flat_sections #kl_navigation li {display: block; width: 50%; float: left; } } /* Collapsed Menu */ @media screen and (min-width: 600px) { #kl_wrapper_3.kl_flat_sections_main > div, #kl_wrapper_3.kl_flat_sections > div {padding: 20px 40px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_flat_sections #kl_navigation li {display: block; width: 50%; float: left; } } @media screen and (min-width: 1000px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_flat_sections #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; width: 100%; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_flat_sections #kl_navigation li {display: table-cell; width: 100%; float:none; } } @media screen and (min-width: 1450px) { body.with-right-side #kl_wrapper_3.kl_flat_sections_main #kl_navigation li, body.with-right-side #kl_wrapper_3.kl_flat_sections #kl_navigation li {display: table-cell; width: 100%; float:none; } } /*********************************************************************/ /***** GENERIC THEME ************************************************/ #kl_wrapper_3.kl_generic #kl_banner {margin: 0; } #kl_wrapper_3.kl_generic .kl_subtitle {font-size: 16px; display: block; line-height: 15px; } #kl_wrapper_3.kl_generic h3:not(.ui-state-default) i {margin-right: 10px; } #kl_wrapper_3.kl_generic #kl_navigation {margin: 5px 0; } #kl_wrapper_3.kl_generic #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; margin: 0; width: 100%; } #kl_wrapper_3.kl_generic #kl_navigation li {display: table-cell; font-size: 1.2em; font-weight: normal; list-style-type: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #kl_wrapper_3.kl_generic #kl_navigation > ul li:first-of-type {padding-left: 20px; } #kl_wrapper_3.kl_generic #kl_navigation li a {display: block; padding: 5px 0; } #kl_wrapper_3.kl_generic #kl_navigation li i {margin-right: 10px; } #kl_wrapper_3.kl_generic > div {overflow-y: hidden; overflow-x: auto; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_generic #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_generic #kl_navigation li {border-radius: 5px; display: inline-block; width: 50%; float: left; } } @media screen and (min-width: 850px) { body.course-menu-expanded #kl_wrapper_3.kl_generic #kl_navigation > ul {padding-bottom:0px; display: inline-block; float: left; } body.course-menu-expanded #kl_wrapper_3.kl_generic #kl_navigation li {border-radius: 5px; display: inline-block; width: 50%; float: left; } } @media screen and (min-width: 900px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_generic #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_generic #kl_navigation li {display: table-cell; font-size: 1.2em; float: none; } } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_generic #kl_navigation > ul {display: table; table-layout: fixed; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_generic #kl_navigation li {display: table-cell; font-size: 1.2em; float: none; } } /*********************************************************************/ /***** RIBBONS THEME *****************************************/ #kl_wrapper_3.kl_ribbons_main > div {overflow-x: auto; overflow-y: hidden; } #kl_wrapper_3.kl_ribbons_main #kl_banner {overflow: visible; margin-bottom: 10px; } #kl_wrapper_3.kl_ribbons_main #kl_banner h2 {margin: 0; } #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left {background: #545454; color: #fff; display: block; font-size: 16px; line-height: 29px; padding: 0 10px; text-transform: uppercase; text-align: center; } #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right {background: rgba(255, 255, 255, 0.65); display: block; text-align: center; font-size: 20px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; padding: 5px 10px; border-bottom: 1px solid #b9b9b9; } #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle {background: rgba(255, 255, 255, 0.65); border: 1px solid #b9b9b9; display: block; font-size: 16px; line-height: 25px; text-transform: uppercase; text-align: center; padding: 0 10px; margin: 5px 0 0; } #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description {padding: 10px; border: 4px double #b9b9b9; background: rgba(255, 255, 255, 0.8); margin: 10px 0; } #kl_wrapper_3.kl_ribbons_main #kl_navigation {margin: 0; padding-bottom: 10px; position: relative; overflow: hidden; left: 0; } #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul {display: block; list-style: none; margin: 0; padding: 0; } #kl_wrapper_3.kl_ribbons_main #kl_navigation a i {background: #545454; color: #FFF; font-size: 14px; height: 24px; line-height: 24px; margin: 2px 8px 2px 2px; padding: 0; text-align: center; width: 25px; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } #kl_wrapper_3.kl_ribbons_main #kl_navigation a i:before {line-height: 20px; } #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; background: rgba(255, 255, 255, 0.8); color: #545454; display: block; font-size: 14px; letter-spacing: 0.1em; line-height: 27px; padding: 0 35px 0 0; white-space: nowrap; text-overflow: ellipsis; text-transform: lowercase; border: 1px solid #b9b9b9; } #kl_wrapper_3.kl_ribbons_main #kl_navigation li {margin: 2px 0; } #kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) {background: #0F2439 url(https://designtools.ciditools.com/css/images/ribbon_right.png) no-repeat right center; background-size: contain; color: #fff; display: inline-block; font-family: "PT Sans",Helvetica,Arial,sans-serif; font-size: 16px; font-weight: bold; line-height: 34px; margin: 5px 0 20px; padding: 0 80px 0 10px; } #kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) i {background: #FFF; color: #0F2439; width: 27px; height: 27px; text-align: center; display: inline-block; padding-top: 3px; margin: 4px 10px 4px 0; } #kl_wrapper_3.kl_ribbons_main > div > i {background: #0F2439 url(https://designtools.ciditools.com/css/images/ribbon_right.png) no-repeat right center; background-size: contain; color: #fff; display: inline-block; font-size: 16px; font-weight: bold; height: 34px; width: inherit; margin: 5px 10px 5px 0; padding: 0 25px 0 10px; line-height: 34px; } #kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) i, #kl_wrapper_3.kl_ribbons_main > div > i, #kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) i[class*=icon-]:before, #kl_wrapper_3.kl_ribbons_main > div > i[class*=icon-]:before {font-size: 20px; } #kl_wrapper_3.kl_ribbons_main > div > i, #kl_wrapper_3.kl_ribbons_main > div > i[class*=icon-]:before {line-height: 34px; } #kl_wrapper_3.kl_ribbons_main .kl_quick_check, #kl_wrapper_3.kl_ribbons_main #kl_modules .kl_module_content, #kl_wrapper_3.kl_ribbons_main #kl_modules .ui-tabs-panel {background: #fff; } /* Navigation above in two columns */ @media screen and (min-width: 500px) { #kl_wrapper_3.kl_ribbons_main #kl_navigation li {float: left; width: 50%; height: 29px; } #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{margin: 1px; } } /* Course Menu Expanded */ @media screen and (min-width: 950px) { body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation {margin-top: 0px; position: relative; padding: 0; overflow:visible; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul {width: 100%; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{margin: 0; border:none; background: #fff; position: absolute; right: 0; text-align: right; top: 0; text-align: right; font-size: 14px; line-height: 30px; padding: 0 26px 0 15px; width: auto; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation a i {height: 20px; line-height: 20px; right: -6px; top: 5px; width: 20px; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); position: absolute; right: -10px; text-align: center; top: 3px; width: 24px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after {content: ""; position: absolute; border: 22px solid #fff; border-left: 20px solid transparent; border-right: 0; z-index: -1; top: 0; left: -20px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li {float:none; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); width: 200px; padding: 0; position: absolute; top: 101px; margin: 0; height: 0;} body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li a:focus, body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li a:hover{padding: 0 40px 0 35px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_0 {left: -90px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_1 {left: -56px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_2 {left: -22px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_3 {left: 12px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_4 {left: 46px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_5 {left: 80px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_6 {left: 114px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_7 {left: 148px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_0 a:after {border-bottom-width: 15px; border-left-width: 20px; border-top-width: 15px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_1 a:after {border-bottom-width: 15px; border-left-width: 20px; border-top-width: 15px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_2 a:after {border-bottom-width: 19px; border-left-width: 15px; border-top-width: 11px; left: -15px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_3 a:after {border-bottom-width: 11px; border-left-width: 13px; border-top-width: 19px; left: -13px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_4 a:after {border-bottom-width: 18px; border-left-width: 13px; border-right-width: 0; border-top-width: 12px; left: -13px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_5 a:after {border-bottom-width: 15px; border-left-width: 10px; border-right-width: 0; border-top-width: 15px; left: -10px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_6 a:after {border-bottom-width: 12px; border-left-width: 19px; border-right-width: 0; border-top-width: 18px; left: -19px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_7 a:after {border-bottom-width: 15px; border-left-width: 15px; border-right-width: 0; border-top-width: 15px; left: -15px; } } /* Navigation on left */ /* Course Menu Collapsed */ @media screen and (min-width: 970px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li {float: none; width: 100%; height:29px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner {position: absolute; overflow: visible; margin: 0 0 0 202px; top: 30px; left: 0; right: 0; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right {text-align: right; margin: 2px; border: none; font-size: 26px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle {text-align: right; border: none; margin: 2px; padding: 10px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description {background-clip: padding-box; margin-right: 2px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation {margin: 0; padding: 0; height: 1px; position: relative; overflow: visible; left: 0; width: 200px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left {position: absolute; right: 0px; top: -29px; } } /* Banner text above Navigation as ribbons */ /* Course Menu Collapsed */ @media screen and (min-width: 800px) and (max-width: 969px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation {margin-top: 0px; position: relative; padding: 0; overflow:visible; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul {width: 100%; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{margin: 0; border:none; background: #fff; position: absolute; right: 0; text-align: right; top: 0; text-align: right; font-size: 14px; line-height: 30px; padding: 0 26px 0 15px; width: auto; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a i {height: 20px; line-height: 20px; right: -6px; top: 5px; width: 20px; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); position: absolute; right: -10px; text-align: center; top: 3px; width: 24px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after {content: ""; position: absolute; border: 22px solid #fff; border-left: 20px solid transparent; border-right: 0; z-index: -1; top: 0; left: -20px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li {float:none; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); width: 200px; padding: 0; position: absolute; top: 101px; margin: 0; height: 0;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a:focus, body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a:hover{padding: 0 40px 0 35px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_0 {left: -90px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_1 {left: -56px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_2 {left: -22px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_3 {left: 12px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_4 {left: 46px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_5 {left: 80px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_6 {left: 114px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_7 {left: 148px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_0 a:after {border-bottom-width: 15px; border-left-width: 20px; border-top-width: 15px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_1 a:after {border-bottom-width: 15px; border-left-width: 20px; border-top-width: 15px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_2 a:after {border-bottom-width: 19px; border-left-width: 15px; border-top-width: 11px; left: -15px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_3 a:after {border-bottom-width: 11px; border-left-width: 13px; border-top-width: 19px; left: -13px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_4 a:after {border-bottom-width: 18px; border-left-width: 13px; border-right-width: 0; border-top-width: 12px; left: -13px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_5 a:after {border-bottom-width: 15px; border-left-width: 10px; border-right-width: 0; border-top-width: 15px; left: -10px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_6 a:after {border-bottom-width: 12px; border-left-width: 19px; border-right-width: 0; border-top-width: 18px; left: -19px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_7 a:after {border-bottom-width: 15px; border-left-width: 15px; border-right-width: 0; border-top-width: 15px; left: -15px; } } /* Navigation as rotated ribbons */ /* Course Menu Collapsed */ @media screen and (min-width: 1000px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner {position: absolute; overflow: visible; margin: 0 0 0 210px; top: 30px; left: 0; right: 0; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner {margin: 0; top: 50px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right {padding: 5px 10px 5px 290px; font-size: 30px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left {top: -49px; font-size: 20px; padding: 5px 10px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle {padding: 5px 10px 5px 290px; font-size: 18px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description {margin-left: 282px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation {margin-top: 0px; position: relative; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul {width: 100%; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{margin: 0; border:none; background: #fff; position: absolute; right: 0; text-align: right; top: 0; text-align: right; font-size: 14px; line-height: 30px; padding: 0 26px 0 15px; width: auto; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a i {height: 20px; line-height: 20px; right: -6px; top: 5px; width: 20px; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); position: absolute; right: -10px; text-align: center; top: 3px; width: 24px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after {content: ""; position: absolute; border: 22px solid #fff; border-left: 20px solid transparent; border-right: 0; z-index: -1; top: 0; left: -20px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li {float:none; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); width: 200px; padding: 0; position: absolute; top: 101px; margin: 0; height: 0;} body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a:focus, body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a:hover{padding: 0 40px 0 35px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_0 {left: -90px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_1 {left: -56px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_2 {left: -22px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_3 {left: 12px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_4 {left: 46px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_5 {left: 80px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_6 {left: 114px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_7 {left: 148px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_0 a:after {border-bottom-width: 15px; border-left-width: 20px; border-top-width: 15px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_1 a:after {border-bottom-width: 15px; border-left-width: 20px; border-top-width: 15px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_2 a:after {border-bottom-width: 19px; border-left-width: 15px; border-top-width: 11px; left: -15px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_3 a:after {border-bottom-width: 11px; border-left-width: 13px; border-top-width: 19px; left: -13px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_4 a:after {border-bottom-width: 18px; border-left-width: 13px; border-right-width: 0; border-top-width: 12px; left: -13px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_5 a:after {border-bottom-width: 15px; border-left-width: 10px; border-right-width: 0; border-top-width: 15px; left: -10px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_6 a:after {border-bottom-width: 12px; border-left-width: 19px; border-right-width: 0; border-top-width: 18px; left: -19px; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li#kl_nav_item_7 a:after {border-bottom-width: 15px; border-left-width: 15px; border-right-width: 0; border-top-width: 15px; left: -15px; } } /* Course Menu Expanded */ @media screen and (min-width: 1160px) { body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner {position: absolute; overflow: visible; margin: 0 0 0 202px; top: 30px; left: 0; right: 0; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right {text-align: right; margin: 2px; border: none; font-size: 26px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle {text-align: right; border: none; margin: 2px; padding: 10px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description {background-clip: padding-box; margin-right: 2px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation {margin: 0; padding: 0; height: 1px; position: relative; overflow: visible; left: 0; width: 200px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left {position: absolute; right: 0px; top: -29px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner {position: absolute; overflow: visible; margin: 0 0 0 210px; top: 30px; left: 0; right: 0; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner {margin: 0; top: 50px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right {padding: 5px 10px 5px 290px; font-size: 30px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left {top: -49px; font-size: 20px; padding: 5px 10px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle {padding: 5px 10px 5px 290px; font-size: 18px; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description {margin-left: 282px; } } /*********************************************************************/ /***** ROUNDED-INSET THEMES 1, 2, 3 **********************************/ /* BASE */ #kl_wrapper_3.kl_rounded_inset #kl_banner, #kl_wrapper_3.kl_rounded_inset_1 #kl_banner, #kl_wrapper_3.kl_rounded_inset_2 #kl_banner, #kl_wrapper_3.kl_rounded_inset_3 #kl_banner { position:relative; padding: 6px 0; } #kl_wrapper_3.kl_rounded_inset > div, #kl_wrapper_3.kl_rounded_inset_1 > div, #kl_wrapper_3.kl_rounded_inset_2 > div, #kl_wrapper_3.kl_rounded_inset_3 > div { margin: 0 0 20px 0; overflow-y: hidden; overflow-x: auto;} #kl_wrapper_3.kl_rounded_inset h2, #kl_wrapper_3.kl_rounded_inset_1 h2, #kl_wrapper_3.kl_rounded_inset_2 h2, #kl_wrapper_3.kl_rounded_inset_3 h2 {display: table; max-width: 90%; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: solid 1px #8A8A8A; border-left: none; margin: 0; font-weight: normal; background: #fff; min-height: 40px; color: #000; } #kl_wrapper_3.kl_rounded_inset h2 > span, #kl_wrapper_3.kl_rounded_inset_1 h2 > span, #kl_wrapper_3.kl_rounded_inset_2 h2 > span, #kl_wrapper_3.kl_rounded_inset_3 h2 > span {display: table-cell; } #kl_wrapper_3.kl_rounded_inset #kl_banner_left, #kl_wrapper_3.kl_rounded_inset_1 #kl_banner_left, #kl_wrapper_3.kl_rounded_inset_2 #kl_banner_left, #kl_wrapper_3.kl_rounded_inset_3 #kl_banner_left { padding: 0 10px; border-right: 2px solid; text-align: center; } #kl_wrapper_3.kl_rounded_inset .kl_mod_num, #kl_wrapper_3.kl_rounded_inset_1 .kl_mod_num, #kl_wrapper_3.kl_rounded_inset_2 .kl_mod_num, #kl_wrapper_3.kl_rounded_inset_3 .kl_mod_num { margin-right: 7px; } #kl_wrapper_3.kl_rounded_inset #kl_banner_right, #kl_wrapper_3.kl_rounded_inset_1 #kl_banner_right, #kl_wrapper_3.kl_rounded_inset_2 #kl_banner_right, #kl_wrapper_3.kl_rounded_inset_3 #kl_banner_right { padding: 0 50px 0 10px; } #kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_3 h3:not(.ui-state-default) { text-transform: uppercase; border: 4px solid #efefef; border-left: none; border-top-right-radius: 25px; border-bottom-right-radius: 25px; width: 95%; padding-left: 10px; background-color: #fff; line-height: 2;} #kl_wrapper_3.kl_rounded_inset .kl_module_content h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_1 .kl_module_content h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_2 .kl_module_content h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_3 .kl_module_content h3:not(.ui-state-default) { margin-left: -10px; } #kl_wrapper_3.kl_rounded_inset .kl_quick_check h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_1 .kl_quick_check h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_2 .kl_quick_check h3:not(.ui-state-default), #kl_wrapper_3.kl_rounded_inset_3 .kl_quick_check h3:not(.ui-state-default) { margin: 0 -20px; } #kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default) i, #kl_wrapper_3.kl_rounded_inset_1 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_rounded_inset_2 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_rounded_inset_3 h3:not(.ui-state-default) i {margin-right: 10px;} #kl_wrapper_3.kl_rounded_inset > div > i, #kl_wrapper_3.kl_rounded_inset_1 > div > i, #kl_wrapper_3.kl_rounded_inset_2 > div > i, #kl_wrapper_3.kl_rounded_inset_3 > div > i {border: 4px solid #efefef; border-left: none; border-top-right-radius: 20px; border-bottom-right-radius: 20px; display: inline-block; padding: 10px; width: 100px; margin: 0 0 10px; height: inherit;} #kl_wrapper_3.kl_rounded_inset #kl_banner .kl_subtitle, #kl_wrapper_3.kl_rounded_inset_1 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_rounded_inset_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_rounded_inset_3 #kl_banner .kl_subtitle {padding: 10px 20px; font-size: 20px; line-height: 15px; text-align: right; text-transform: uppercase; border-bottom: 1px solid; margin: 0; } #kl_wrapper_3.kl_rounded_inset #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset_1 #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset_2 #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset_3 #kl_banner #kl_description {padding: 10px; } #kl_wrapper_3.kl_rounded_inset #kl_navigation, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation, #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation {width: 100%; margin: 0; display: table; table-layout: fixed; } #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul, #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul {margin: 0 0 10px 0; display: table-row; } #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li, #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li {font-weight: normal; list-style-type: none; display: block; } #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li i, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li i, #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li i, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li i { margin-right: 10px;} #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li a {font-size: 16px; display: block; padding: 5px 20px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px; border-radius: 30px; border: 2px solid;} /* Canvas file download link */ #kl_wrapper_3.kl_rounded_inset #kl_navigation ul li a.file_download_btn { top: 2px; right: 5px; } /* VARIATIONS */ #kl_wrapper_3.kl_rounded_inset_1 #kl_banner { background: #0F2439; color: #fff; } #kl_wrapper_3.kl_rounded_inset_2 #kl_banner { background: #c2ae9e; color: #000;} #kl_wrapper_3.kl_rounded_inset_3 #kl_banner { background: #c2c9ce; color: #000;} #kl_wrapper_3.kl_rounded_inset_1 #kl_banner_left {border-color: #0F2439;} #kl_wrapper_3.kl_rounded_inset_2 #kl_banner_left {border-color: #c2ae9e;} #kl_wrapper_3.kl_rounded_inset_3 #kl_banner_left {border-color: #c2c9ce;} #kl_wrapper_3.kl_rounded_inset_1 #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset_1 #kl_banner .kl_subtitle {color: #fff;} #kl_wrapper_3.kl_rounded_inset_2 #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset_2 #kl_banner .kl_subtitle {color: #000;} #kl_wrapper_3.kl_rounded_inset_3 #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset_3 #kl_banner .kl_subtitle {color: #000;} #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li a:visited { color: #0F2439; border-color: #0F2439; } #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li a:visited { color: #000; border-color: #ac927b; } #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li a:visited { color: #0F2439; border-color: #c2c9ce; } #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li a:focus { background: #0F2439; color: #FFF;} #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li a:focus { background: #c2ae9e; color: #000;} #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li a:focus, #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li a:hover { background: #c2c9ce; color: #0F2439;} /* Color Defaults for Configurations Page Version */ #kl_wrapper_3.kl_rounded_inset h2 {border-color: #8A8A8A; background: #fff; color: #000; } #kl_wrapper_3.kl_rounded_inset #kl_banner {background: darkslategray; color: #fff; } #kl_wrapper_3.kl_rounded_inset #kl_banner_left {border-color: darkslategray; } #kl_wrapper_3.kl_rounded_inset #kl_banner #kl_description, #kl_wrapper_3.kl_rounded_inset #kl_banner .kl_subtitle {color: #fff;} #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li a, #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li a:visited { color: darkslategray; border-color: darkslategray;} #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li a:focus {background: darkslategray; color: #FFF; } #kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default) {border-color: #efefef; background-color: #fff; } #kl_wrapper_3.kl_rounded_inset > div > i {border-color: #efefef; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li{font-weight: normal; list-style-type: none; display: table-cell; width: auto; float: none; display: block; width: 50%; float:left; } } @media screen and (min-width: 700px) { body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li{background:none; display:block; padding: 0; border: none; width: 50%; float:left; display: inline-block; float: left; } #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li a {font-size: 1.2em; padding: 12px 22px 12px 10px;} } @media screen and (min-width: 1100px) { body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li {background:none; display:block; padding: 0; border: none; width: 100%; float:none; display: table-cell; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_rounded_inset_3 #kl_navigation > ul li{background:none; display:block; padding: 0; border: none; width: 100%; float:none; display: table-cell; } } /*********************************************************************/ /***** SQUARE RIGHT THEMES 1, 2, 3 **********************************/ /* BASE */ #kl_wrapper_3.kl_square_right > div, #kl_wrapper_3.kl_square_right_1 > div, #kl_wrapper_3.kl_square_right_2 > div, #kl_wrapper_3.kl_square_right_3 > div {overflow-y: hidden; overflow-x: auto;} #kl_wrapper_3.kl_square_right #kl_banner, #kl_wrapper_3.kl_square_right_1 #kl_banner, #kl_wrapper_3.kl_square_right_2 #kl_banner, #kl_wrapper_3.kl_square_right_3 #kl_banner {overflow: visible; margin-bottom: 30px;} #kl_wrapper_3.kl_square_right .kl_mod_text, #kl_wrapper_3.kl_square_right_1 .kl_mod_text, #kl_wrapper_3.kl_square_right_2 .kl_mod_text, #kl_wrapper_3.kl_square_right_3 .kl_mod_text {display: block; padding: 9px 8px; line-height: 20px;} #kl_wrapper_3.kl_square_right .kl_mod_num, #kl_wrapper_3.kl_square_right_1 .kl_mod_num, #kl_wrapper_3.kl_square_right_2 .kl_mod_num, #kl_wrapper_3.kl_square_right_3 .kl_mod_num {font-size: 30px; line-height: 30px; display: block; padding: 1px 0 11px;} #kl_wrapper_3.kl_square_right > div, #kl_wrapper_3.kl_square_right_1 > div, #kl_wrapper_3.kl_square_right_2 > div, #kl_wrapper_3.kl_square_right_3 > div { margin: 0 0 20px 0;} #kl_wrapper_3.kl_square_right h2, #kl_wrapper_3.kl_square_right_1 h2, #kl_wrapper_3.kl_square_right_2 h2, #kl_wrapper_3.kl_square_right_3 h2 {position: relative; font-weight: normal; padding: 5px; margin-top: 20px; line-height: 30px; } #kl_wrapper_3.kl_square_right h3:not(.ui-state-default), #kl_wrapper_3.kl_square_right_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_square_right_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_square_right_3 h3:not(.ui-state-default) {position: relative; border: 1px solid #D5D5D5; padding: 0 60px 0 20px; margin: 10px 0 30px; line-height: 35px; overflow: visible; background-color: #fff;} #kl_wrapper_3.kl_square_right h3:not(.ui-state-default) i, #kl_wrapper_3.kl_square_right_1 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_square_right_2 h3:not(.ui-state-default) i, #kl_wrapper_3.kl_square_right_3 h3:not(.ui-state-default) i {display: inline-block; width: 45px; text-align: center; height: 45px; line-height: 45px; font-size: 25px; margin-right: 5px; position: absolute; right: 5px; top: -6px; } #kl_wrapper_3.kl_square_right > div > i, #kl_wrapper_3.kl_square_right_1 > div > i, #kl_wrapper_3.kl_square_right_2 > div > i, #kl_wrapper_3.kl_square_right_3 > div > i {display: inline-block; width: 45px; height: 45px; line-height: 45px; font-size: 25px; margin: 0 10px 10px; float: right; text-align: center; } #kl_wrapper_3.kl_square_right h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_square_right_1 h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_square_right_2 h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_square_right_3 h3:not(.ui-state-default) i:before, #kl_wrapper_3.kl_square_right > div > i:before, #kl_wrapper_3.kl_square_right_1 > div > i:before, #kl_wrapper_3.kl_square_right_2 > div > i:before, #kl_wrapper_3.kl_square_right_3 > div > i:before {font-size: 25px; line-height: 45px;} #kl_wrapper_3.kl_square_right #kl_banner_left, #kl_wrapper_3.kl_square_right_2 #kl_banner_left, #kl_wrapper_3.kl_square_right_3 #kl_banner_left {color: #fff; float: right; font-size: 16px; height: 80px; min-width: 80px; margin: 0; text-align: center; display: inline-block; position: absolute; top: -20px; right: 10px; } #kl_wrapper_3.kl_square_right_1 #kl_banner_left, #kl_wrapper_3.kl_square_right_2 #kl_banner_left, #kl_wrapper_3.kl_square_right_3 #kl_banner_left {color: #fff; float: right; font-size: 16px; height: 80px; min-width: 80px; margin: 0; text-align: center; display: inline-block; position: absolute; top: -20px; right: 10px; } #kl_wrapper_3.kl_square_right #kl_banner_right, #kl_wrapper_3.kl_square_right_1 #kl_banner_right, #kl_wrapper_3.kl_square_right_2 #kl_banner_right, #kl_wrapper_3.kl_square_right_3 #kl_banner_right {padding: 3px 90px 3px 20px; display: block;} #kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle, #kl_wrapper_3.kl_square_right_1 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_square_right_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_square_right_3 #kl_banner .kl_subtitle {padding: 0 5px 10px 25px; display: block; color: #575757; font-size: medium; border-bottom: 5px solid; } #kl_wrapper_3.kl_square_right #kl_banner #kl_description, #kl_wrapper_3.kl_square_right_1 #kl_banner #kl_description, #kl_wrapper_3.kl_square_right_2 #kl_banner #kl_description, #kl_wrapper_3.kl_square_right_3 #kl_banner #kl_description {border: 4px double; padding: 10px; } #kl_wrapper_3.kl_square_right #kl_navigation, #kl_wrapper_3.kl_square_right_1 #kl_navigation, #kl_wrapper_3.kl_square_right_2 #kl_navigation, #kl_wrapper_3.kl_square_right_3 #kl_navigation {width: 100%; margin: 0; display: table; table-layout: fixed;} #kl_wrapper_3.kl_square_right #kl_navigation > ul, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul {margin: 0 0 10px; display: table-row; } #kl_wrapper_3.kl_square_right #kl_navigation > ul li, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li {font-weight: normal; list-style-type: none; height: 100%; position: relative; display: block; } #kl_wrapper_3.kl_square_right #kl_navigation > ul li i, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li i, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li i, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li i {margin-right: 10px; font-size: 20px; background: #000; line-height: 40px; position: absolute; right: -10px; top: 0; color: #fff; width: 45px; height: 45px; text-align: center; } #kl_wrapper_3.kl_square_right #kl_navigation > ul li i:before, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li i:before, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li i:before, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li i:before {font-size: 20px; line-height: 45px;} #kl_wrapper_3.kl_square_right #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li a {font-size: 1.2em; display: block; padding: 8px 22px 8px 30px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px; position: relative;} /* Canvas file download link */ #kl_wrapper_3.kl_square_right #kl_navigation ul li a.file_download_btn { top: 4px; left: 0; position: absolute; width: 25px; text-align: center; } #kl_wrapper_3.kl_square_right h3, #kl_wrapper_3.kl_square_right_1 h3, #kl_wrapper_3.kl_square_right h4, #kl_wrapper_3.kl_square_right_1 h4, #kl_wrapper_3.kl_square_right h5, #kl_wrapper_3.kl_square_right_1 h5, #kl_wrapper_3.kl_square_right h6, #kl_wrapper_3.kl_square_right_1 h6, #kl_wrapper_3.kl_square_right_2 h3, #kl_wrapper_3.kl_square_right_2 h4, #kl_wrapper_3.kl_square_right_2 h5, #kl_wrapper_3.kl_square_right_2 h6, #kl_wrapper_3.kl_square_right_3 h3, #kl_wrapper_3.kl_square_right_3 h4, #kl_wrapper_3.kl_square_right_3 h5, #kl_wrapper_3.kl_square_right_3 h6 {clear: both; } #kl_wrapper_3.kl_square_right #kl_modules .kl_module_content, #kl_wrapper_3.kl_square_right_1 #kl_modules .kl_module_content, #kl_wrapper_3.kl_square_right_2 #kl_modules .kl_module_content, #kl_wrapper_3.kl_square_right_3 #kl_modules .kl_module_content {background-color: #fff;} /* VARIATIONS */ #kl_wrapper_3.kl_square_right_1 h2 {background: #c2c9ce; color: #000;} #kl_wrapper_3.kl_square_right_1 #kl_banner_left {background: #0F2439; } #kl_wrapper_3.kl_square_right_1 > div > i, #kl_wrapper_3.kl_square_right_1 h3:not(.ui-state-default) i { background: #0F2439; color: #fff;} #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li a:visited { background: #fff; color: #000; border: 1px solid #c2c9ce; } #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li a:focus { background: #0F2439; color: #FFF;} #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li i { background: #c2c9ce; color: #000; } #kl_wrapper_3.kl_square_right_1 #kl_banner #kl_description, #kl_wrapper_3.kl_square_right_1 #kl_banner .kl_subtitle { border-color: #c2c9ce; } #kl_wrapper_3.kl_square_right_2 h2 {background: #0F2439; color: #ffffff; } #kl_wrapper_3.kl_square_right_2 #kl_banner_left {background: #85715f; } #kl_wrapper_3.kl_square_right_2 > div > i, #kl_wrapper_3.kl_square_right_2 h3:not(.ui-state-default) i { background: #85715f; color: #fff;} #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li a:visited { background: #fff; color: #000; border: 1px solid #c2c9ce; } #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li a:focus { background: #c2ae9e; color: #000;} #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li i { background: #0F2439; color: #fff;} #kl_wrapper_3.kl_square_right_2 #kl_banner #kl_description, #kl_wrapper_3.kl_square_right_2 #kl_banner .kl_subtitle { border-color: #0F2439; } #kl_wrapper_3.kl_square_right_3 h2 {background: #0F2439; color: #ffffff;} #kl_wrapper_3.kl_square_right_3 #kl_banner_left {background: #c2c9ce; color: #000;} #kl_wrapper_3.kl_square_right_3 > div > i, #kl_wrapper_3.kl_square_right_3 h3:not(.ui-state-default) i { background: #c2c9ce; color: #000;} #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li a:visited { background: #fff; color: #000; border: 1px solid #c2c9ce; } #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li a:focus { background: #c2c9ce; color: #0F2439;} #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li i { background: #0F2439; color: #fff; } #kl_wrapper_3.kl_square_right_3 #kl_banner #kl_description, #kl_wrapper_3.kl_square_right_3 #kl_banner .kl_subtitle { border-color: #0F2439; } /* Color Defaults for Configurations Page Version */ #kl_wrapper_3.kl_square_right #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right #kl_navigation > ul li a:visited {border: 1px solid #c2c9ce; } #kl_wrapper_3.kl_square_right h2 {background: lightsteelblue; color: #000; } #kl_wrapper_3.kl_square_right #kl_banner_left { background: darkslategray; color: #fff; } #kl_wrapper_3.kl_square_right #kl_banner #kl_description, #kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle { border-color: lightsteelblue; } #kl_wrapper_3.kl_square_right h3:not(.ui-state-default) { border-color: #D5D5D5; background-color: #fff; } #kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle { color: darkslategray; } #kl_wrapper_3.kl_square_right #kl_navigation > ul li i { background: lightsteelblue; color: #000; } #kl_wrapper_3.kl_square_right > div > i, #kl_wrapper_3.kl_square_right h3:not(.ui-state-default) i { background: darkslategray; color: #fff; } #kl_wrapper_3.kl_square_right #kl_navigation > ul li a, #kl_wrapper_3.kl_square_right #kl_navigation > ul li a:visited { background: #fff; color: #000; border-color: lightsteelblue; } #kl_wrapper_3.kl_square_right #kl_navigation > ul li a:hover, #kl_wrapper_3.kl_square_right #kl_navigation > ul li a:focus { background: darkslategray; color: #FFF; } @media screen and (min-width: 500px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li{font-weight: normal; list-style-type: none; display: table-cell; width: auto; float: none; display: block; width: 50%; float:left; } } @media screen and (min-width: 700px) { body.course-menu-expanded #kl_wrapper_3.kl_square_right #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_square_right #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li{background:none; display:block; padding: 0; border: none; width: 50%; float:left; display: inline-block; float: left; } } @media screen and (min-width: 1200px) { body.course-menu-expanded #kl_wrapper_3.kl_square_right #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul, body.course-menu-expanded #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body.course-menu-expanded #kl_wrapper_3.kl_square_right #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li, body.course-menu-expanded #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li{background:none; display:block; padding: 0; border: none; width: 100%; float:none; display: table-cell; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul {padding-bottom:0px; overflow: hidden; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_1 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_2 #kl_navigation > ul li, body:not(.course-menu-expanded) #kl_wrapper_3.kl_square_right_3 #kl_navigation > ul li{background:none; display:block; padding: 0; border: none; width: 100%; float:none; display: table-cell; } } /**********************************************************************/ /************** END KENNETHWARE THEMES **************/ /**********************************************************************/ /************** END KENNETHWARE STYLING **************/ /**********************************************************************/ @media print { .kl_wrapper .kl_panel_content { display: block !important; } .kl_wrapper .kl_expand_controls {display: none;} a.jump_to_today_link {display: none;} a.edit_syllabus_link {display: none;} .kl_no_print {display: none !important;} body.syllabus h1.ic-Action-header__Heading {font-size: 20px;} } /* Remove bold from headings in quizzes */ .quiz-header .kl_wrapper h1, .quiz-header .kl_wrapper h2 { font-weight: normal; } .kl_hangingindent { padding-left: 22px ; text-indent: -22px ; } ul.kl_hangingindent { padding-left: 0; text-indent: 0; list-style-type: none; margin: 0; } ul.kl_hangingindent li { padding-left: 22px ; text-indent: -22px ; margin: 10px 0; } ol.kl_hangingindent { margin-left: 0.3em; } ol.kl_hangingindent li { padding-left: 22px ; text-indent: -22px ; margin: 10px 0; } .kl_tools_wrapper.ui-accordion .ui-accordion-content {padding: 0; } .kl_wrapper .ui-accordion-header, .kl_panels_wrapper .ui-accordion-header {line-height: 1;} .kl_wrapper .ui-accordion-header a, .kl_panels_wrapper .ui-accordion-header a {font-weight: normal; } .kl_wrapper .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active, .kl_panels_wrapper.ui-accordion .ui-accordion-header.ui-state-default.ui-state-active, .kl_wrapper .ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header, .kl_panels_wrapper.ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header, .kl_wrapper .ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header, .kl_panels_wrapper.ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--ic-brand-primary-darkened-5); border-bottom: 1px solid var(--ic-brand-primary-darkened-5); background: var(--ic-brand-primary); font-weight: normal; font-size: 1.3em; } .kl_wrapper .ui-accordion-header, .kl_panels_wrapper .ui-accordion-header {background: #f5f5f5; border-radius: 3px;} /* Horizontal Rule Styles */ :root { --hr-color: #777777; } hr[class*='dp-hr-'] { border: 0; margin: 2em auto; max-width: 100%; background-position: 50%; box-sizing: border-box; overflow: visible; text-align: center; color: var(--hr-color); } /* From https://css-tricks.com/examples/hrs/ */ /* Gradient color1 - color2 - color1 */ hr.dp-hr-fade-one { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, var(--hr-color), #ccc); text-align: center; } /* Gradient transparent - color - transparent */ hr.dp-hr-style-two { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--hr-color), rgba(0, 0, 0, 0)); text-align: center; } /* Double-color dashed line */ hr.dp-hr-dash { border: 0; border-top: 1px dashed var(--hr-color); text-align: center; } /* Inset, by Dan Eden */ hr.dp-hr-solid-light { border: 0; height: 0; border-top: 1px solid var(--hr-color); border-bottom: 1px solid rgba(255, 255, 255, 0.3); text-align: center; } /************************/ /* Based on https://codepen.io/joeyhoer/pen/BmqIx */ hr.dp-hr-fade-two { border-width: 1px 0 0; border-image: linear-gradient(90deg, rgba(135, 206, 235, 0), var(--hr-color) 50%, rgba(135, 206, 235, 0) 100%) 100% 0 0; border-style: solid; } hr.dp-hr-fade-three { height: 3px; background-image: radial-gradient(closest-side, var(--hr-color), rgba(128, 128, 128, 0) 100%, transparent); position: relative; } hr.dp-hr-pill { height: 0px; border-radius: 2px; border: 2px solid var(--hr-color); width: 80%; } hr.dp-hr-vertical-lines { height: 4px; background-image: linear-gradient(90deg, var(--hr-color), var(--hr-color) 33.33%, transparent 33.33%, transparent 100%); background-size: 6px 100%; width: 60%; } hr.dp-hr-horizontal-lines { overflow: visible; /* For IE */ padding: 0; border: none; border-top: medium double var(--hr-color); text-align: center; } hr.dp-hr-slash { height: 3px; background-image: linear-gradient(-45deg, transparent, transparent 25%, var(--hr-color) 25%, var(--hr-color) 50%, transparent 50%, transparent 75%, var(--hr-color) 75%); background-size: 25px 25px; width: 50%; } hr.dp-hr-bookends { position: relative; border-width: 5px; border-color: var(--hr-color) transparent; height: 11px; border-style: double; width: 20%; max-width: 98%; } hr.dp-hr-bookends:before, hr.dp-hr-bookends:after { content: "" !important; position: absolute !important; bottom: -3.536px; width: 7.071px; height: 7.071px; top: unset !important; display: block !important; border-width: 0 7.071px 7.071px 0; border-color: var(--hr-color); border-style: double; box-sizing: border-box; padding: 0!important; } hr.dp-hr-bookends:before { /*content: "";*/ transform: translateZ(0) rotate(-45deg); left: -21px; } hr.dp-hr-bookends:after { transform: translateZ(0) rotate(135deg); right: -21px; } hr.dp-hr-bookends-dots { position: relative; border-bottom: 1px solid var(--hr-color); width: 50%; } hr.dp-hr-bookends-dots:before, hr.dp-hr-bookends-dots:after { content: "" !important; position: absolute !important; bottom: -5px; width: 10px; height: 10px; display: block !important; border-width: 0 1px 1px 0; border-color: var(--hr-color); border-style: solid; box-sizing: border-box; border-radius: 100%; top: unset !important; font-size: 1em !important; padding: 0 !important; } hr.dp-hr-bookends-dots:before { content: ""; transform: translateZ(0) rotate(-45deg); left: -10px; } hr.dp-hr-bookends-dots:after { content: ""; transform: translateZ(0) rotate(135deg); right: -10px; } hr.dp-hr-bookends-alt { position: relative; border-bottom: 1px solid var(--hr-color); width: 50%; } hr.dp-hr-bookends-alt:before, hr.dp-hr-bookends-alt:after { content: "" !important; position: absolute !important; bottom: -3.536px; width: 7.071px; height: 7.071px; top: unset !important; display: block !important; border-width: 0 7.071px 7.071px 0; border-color: var(--hr-color); border-style: double; box-sizing: border-box; padding: 0!important; font-size: 1em !important; } hr.dp-hr-bookends-alt:before { content: ""; transform: translateZ(0) rotate(-45deg); left: -10px; } hr.dp-hr-bookends-alt:after { content: ""; transform: translateZ(0) rotate(135deg); right: -10px; } /* Flaired edges, by Tomas Theunissen */ hr.dp-hr-bookends-flair { overflow: visible; /* For IE */ height: 20px; border-style: solid; border-color: var(--hr-color); border-width: 1px 0 0 0; border-radius: 20px; } hr.dp-hr-bookends-flair:before { /* Not really supposed to work, but does */ display: block; content: ""; height: 20px; margin-top: -21px; border-style: solid; border-color: var(--hr-color); border-width: 0 0 1px 0; border-radius: 20px; } /* Shine */ hr.dp-hr-drop-shadow-one { height: 8px; width: 70%; background-image: radial-gradient(farthest-side at 50% -50%, var(--hr-color), rgba(0, 0, 0, 0)); position: relative; } hr.dp-hr-drop-shadow-one::before { content: ""; height: 1px; position: absolute; top: -1px; left: 0; right: 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0)); } hr.dp-hr-drop-shadow-two { height: 4px; width: 70%; background-image: radial-gradient(farthest-side at 50% -50%, var(--hr-color), rgba(0, 0, 0, 0)); position: relative; } hr.dp-hr-drop-shadow-two::before { content: ""; height: 1px; position: absolute; top: -1px; left: 0; right: 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0)); } /* Stars */ hr.dp-hr-shapes { height: auto; text-align: center; } hr.dp-hr-shapes:after { content: "★"; font-size: 1.5em; text-shadow: -3em 0, -1.5em 0, 1.5em 0, 3em 0; } hr.dp-hr-glyph-gap:after { content: "§"; /*content: "☢";*/ display: inline-block; position: relative; top: -0.79em; font-size: 1.5em; padding: 0 0.25em; background: white; border-radius: 1.5em; } hr.dp-hr-glyph-overlap:after { content: "§"; /*content: "☢";*/ display: inline-block; position: relative; top: -0.79em; font-size: 1.5em; padding: 0 0.25em; } hr.dp-hr-glyph-upper-blade-scissors:after { content: "✁"; } hr.dp-hr-glyph-black-scissors:after { content: "✂"; } hr.dp-hr-glyph-lower-blade-scissors:after { content: "✃"; } hr.dp-hr-glyph-tape-drive:after { content: "✇"; } hr.dp-hr-glyph-airplane:after { content: "✈"; } hr.dp-hr-glyph-envelope:after { content: "✉"; } hr.dp-hr-glyph-lower-right-pencil:after { content: "✎"; } hr.dp-hr-glyph-pencil:after { content: "✏"; } hr.dp-hr-glyph-upper-right-pencil:after { content: "✐"; } hr.dp-hr-glyph-check-mark:after { content: "✓"; } hr.dp-hr-glyph-heavy-check-mark:after { content: "✔"; } hr.dp-hr-glyph-ballot-x:after { content: "✗"; } hr.dp-hr-glyph-heavy-ballot-x:after { content: "✘"; } hr.dp-hr-glyph-outlined-greek-cross:after { content: "✙"; } hr.dp-hr-glyph-heavy-greek-cross:after { content: "✚"; } hr.dp-hr-glyph-open-center-cross:after { content: "✛"; } hr.dp-hr-glyph-heavy-open-center-cross:after { content: "✜"; } hr.dp-hr-glyph-maltese-cross:after { content: "✠"; } hr.dp-hr-glyph-star-of-david:after { content: "✡"; } hr.dp-hr-glyph-four-teardrop-spoked-asterisk:after { content: "✢"; } hr.dp-hr-glyph-four-balloon-spoked-asterisk:after { content: "✣"; } hr.dp-hr-glyph-heavy-four-balloon-spoked-asterisk:after { content: "✤"; } hr.dp-hr-glyph-four-club-spoked-asterisk:after { content: "✥"; } hr.dp-hr-glyph-black-four-pointed-star:after { content: "✦"; } hr.dp-hr-glyph-white-four-pointed-star:after { content: "✧"; } hr.dp-hr-glyph-stress-outlined-white-star:after { content: "✩"; } hr.dp-hr-glyph-circled-white-star:after { content: "✪"; } hr.dp-hr-glyph-open-center-black-star:after { content: "✫"; } hr.dp-hr-glyph-black-center-white-star:after { content: "✬"; } hr.dp-hr-glyph-outlined-black-star:after { content: "✭"; } hr.dp-hr-glyph-heavy-outlined-black-star:after { content: "✮"; } hr.dp-hr-glyph-pinwheel-star:after { content: "✯"; } hr.dp-hr-glyph-heavy-asterisk:after { content: "✱"; } hr.dp-hr-glyph-open-center-asterisk:after { content: "✲"; } hr.dp-hr-glyph-eight-spoked-asterisk:after { content: "✳"; } hr.dp-hr-glyph-eight-pointed-black-star:after { content: "✴"; } hr.dp-hr-glyph-eight-pointed-pinwheel-star:after { content: "✵"; } hr.dp-hr-glyph-six-pointed-black-star:after { content: "✶"; } hr.dp-hr-glyph-eight-pointed-rectilinear-black-star:after { content: "✷"; } hr.dp-hr-glyph-heavy-eight-pointed-rectilinear-black-star:after { content: "✸"; } hr.dp-hr-glyph-twelve-pointed-black-star:after { content: "✹"; } hr.dp-hr-glyph-sixteen-pointed-asterisk:after { content: "✺"; } hr.dp-hr-glyph-teardrop-spoked-asterisk:after { content: "✻"; } hr.dp-hr-glyph-open-center-teardrop-spoked-asterisk:after { content: "✼"; } hr.dp-hr-glyph-heavy-teardrop-spoked-asterisk:after { content: "✽"; } hr.dp-hr-glyph-six-petalled-black-and-white-florette:after { content: "✾"; } hr.dp-hr-glyph-black-florette:after { content: "✿"; } hr.dp-hr-glyph-white-florette:after { content: "❀"; } hr.dp-hr-glyph-eight-petalled-outlined-black-florette:after { content: "❁"; } hr.dp-hr-glyph-circled-open-center-eight-pointed-star:after { content: "❂"; } hr.dp-hr-glyph-heavy-teardrop-spoked-pinwheel-asterisk:after { content: "❃"; } hr.dp-hr-glyph-snowflake:after { content: "❄"; } hr.dp-hr-glyph-tight-trifoliate-snowflake:after { content: "❅"; } hr.dp-hr-glyph-heavy-chevron-snowflake:after { content: "❆"; } hr.dp-hr-glyph-sparkle:after { content: "❇"; } hr.dp-hr-glyph-heavy-sparkle:after { content: "❈"; } hr.dp-hr-glyph-balloon-spoked-asterisk:after { content: "❉"; } hr.dp-hr-glyph-eight-teardrop-spoked-propeller-asterisk:after { content: "❊"; } hr.dp-hr-glyph-heavy-eight-teardrop-spoked-propeller-asterisk:after { content: "❋"; } hr.dp-hr-glyph-shadowed-white-circle:after { content: "❍"; } hr.dp-hr-glyph-lower-right-drop-shadowed-white-square:after { content: "❏"; } hr.dp-hr-glyph-upper-right-drop-shadowed-white-square:after { content: "❐"; } hr.dp-hr-glyph-lower-right-shadowed-white-square:after { content: "❑"; } hr.dp-hr-glyph-upper-right-shadowed-white-square:after { content: "❒"; } hr.dp-hr-glyph-black-diamond-minus-white-x:after { content: "❖"; } hr.dp-hr-glyph-light-vertical-bar:after { content: "❘"; } hr.dp-hr-glyph-heavy-single-turned-comma-quotation-mark-ornament:after { content: "❛"; } hr.dp-hr-glyph-heavy-single-comma-quotation-mark-ornament:after { content: "❜"; } hr.dp-hr-glyph-heavy-double-turned-comma-quotation-mark-ornament:after { content: "❝"; } hr.dp-hr-glyph-heavy-double-comma-quotation-mark-ornament:after { content: "❞"; } hr.dp-hr-glyph-heavy-low-single-comma-quotation-mark-ornament:after { content: "❜"; } hr.dp-hr-glyph-heavy-low-double-comma-quotation-mark-ornament:after { content: "❞"; } hr.dp-hr-glyph-curved-stem-paragraph-sign-ornament:after { content: "❡"; } hr.dp-hr-glyph-heavy-exclamation-mark-ornament:after { content: "❢"; } hr.dp-hr-glyph-heavy-heart-exclamation-mark-ornament:after { content: "❣"; } hr.dp-hr-glyph-heavy-black-heart:after { content: "❤"; } hr.dp-hr-glyph-rotated-heavy-black-heart-bullet:after { content: "❥"; } hr.dp-hr-glyph-floral-heart:after { content: "❦"; } hr.dp-hr-glyph-rotated-floral-heart-bullet:after { content: "❧"; } hr.dp-hr-glyph-medium-left-parenthesis-ornament:after { content: "❨"; } hr.dp-hr-glyph-medium-right-parenthesis-ornament:after { content: "❩"; } hr.dp-hr-glyph-medium-left-pointing-angle-bracket-ornament:after { content: "❬"; } hr.dp-hr-glyph-medium-right-pointing-angle-bracket-ornament:after { content: "❭"; } hr.dp-hr-glyph-heavy-left-pointing-angle-quotation-mark-ornament:after { content: "❮"; } hr.dp-hr-glyph-heavy-right-pointing-angle-quotation-mark-ornament:after { content: "❯"; } hr.dp-hr-glyph-heavy-left-pointing-angle-bracket-ornament:after { content: "❰"; } hr.dp-hr-glyph-heavy-right-pointing-angle-bracket-ornament:after { content: "❱"; } hr.dp-hr-glyph-light-left-tortoise-shell-bracket-ornament:after { content: "❲"; } hr.dp-hr-glyph-light-right-tortoise-shell-bracket-ornament:after { content: "❳"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-one:after { content: "❶"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-two:after { content: "❷"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-three:after { content: "❸"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-four:after { content: "❹"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-five:after { content: "❺"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-six:after { content: "❻"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-seven:after { content: "❼"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-eight:after { content: "❽"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-nine:after { content: "❾"; } hr.dp-hr-glyph-dingbat-negative-circled-digit-ten:after { content: "❿"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-one:after { content: "➀"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-two:after { content: "➁"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-three:after { content: "➂"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-four:after { content: "➃"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-five:after { content: "➄"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-six:after { content: "➅"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-seven:after { content: "➆"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-eight:after { content: "➇"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-nine:after { content: "➈"; } hr.dp-hr-glyph-dingbat-circled-sans-serif-digit-ten:after { content: "➉"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-one:after { content: "➊"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-two:after { content: "➋"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-three:after { content: "➌"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-four:after { content: "➍"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-five:after { content: "➎"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-six:after { content: "➏"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-seven:after { content: "➐"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-eight:after { content: "➑"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-nine:after { content: "➒"; } hr.dp-hr-glyph-dingbat-negative-circled-sans-serif-digit-ten:after { content: "➓"; } hr.dp-hr-glyph-heavy-wide-headed-rightward-arrow:after { content: "➔"; } hr.dp-hr-glyph-heavy-south-east-arrow:after { content: "➘"; } hr.dp-hr-glyph-heavy-rightward-arrow:after { content: "➙"; } hr.dp-hr-glyph-heavy-north-east-arrow:after { content: "➚"; } hr.dp-hr-glyph-drafting-point-rightward-arrow:after { content: "➛"; } hr.dp-hr-glyph-heavy-round-tipped-rightward-arrow:after { content: "➜"; } hr.dp-hr-glyph-triangle-headed-rightward-arrow:after { content: "➝"; } hr.dp-hr-glyph-heavy-triangle-headed-rightward-arrow:after { content: "➞"; } hr.dp-hr-glyph-dashed-triangle-headed-rightward-arrow:after { content: "➟"; } hr.dp-hr-glyph-heavy-dashed-triangle-headed-rightward-arrow:after { content: "➠"; } hr.dp-hr-glyph-black-rightward-arrow:after { content: "➡"; } hr.dp-hr-glyph-three-d-top-lighted-rightward-arrowhead:after { content: "➢"; } hr.dp-hr-glyph-three-d-bottom-lighted-rightward-arrowhead:after { content: "➣"; } hr.dp-hr-glyph-black-rightward-arrowhead:after { content: "➤"; } hr.dp-hr-glyph-white-feathered-rightward-arrow:after { content: "➳"; } hr.dp-hr-glyph-black-feathered-south-east-arrow:after { content: "➴"; } hr.dp-hr-glyph-black-feathered-rightward-arrow:after { content: "➵"; } hr.dp-hr-glyph-black-feathered-north-east-arrow:after { content: "➶"; } hr.dp-hr-glyph-heavy-black-feathered-south-east-arrow:after { content: "➷"; } hr.dp-hr-glyph-heavy-black-feathered-rightward-arrow:after { content: "➸"; } hr.dp-hr-glyph-heavy-black-feathered-north-east-arrow:after { content: "➹"; } hr.dp-hr-glyph-teardrop-barbed-rightward-arrow:after { content: "➺"; } hr.dp-hr-glyph-heavy-teardrop-shanked-rightward-arrow:after { content: "➻"; } hr.dp-hr-glyph-wedge-tailed-rightward-arrow:after { content: "➼"; } hr.dp-hr-glyph-heavy-wedge-tailed-rightward-arrow:after { content: "➽"; } hr.dp-hr-glyph-open-outlined-rightward-arrow:after { content: "➾"; } hr.dp-hr-glyph-open-outlined-rightward-arrow:after { content: "➾"; } hr.dp-hr-glyph-diamond-black:after { content: "◆"; } hr.dp-hr-glyph-diamond-white:after { content: "◇"; } hr.dp-hr-glyph-diamond-white-black:after { content: "◈"; } /* Canvas Quiz Header overflow correction */ body.using_design_tools .quiz-header { overflow: unset; } /* More Spacing for list items */ .kl_more_space ol, .kl_more_space ul, .kl_more_space li { margin-top: 0.5em; } ul.kl_large_link_grid { list-style-type:none; column-count: unset !important; margin:0; display: flex; flex-wrap: wrap; align-items: stretch; } ul.kl_large_link_grid > li { white-space: unset !important; width: 49%; min-height: 4em; border: 1px solid var(--dt-color-primary); background: white; font-size: 1.2em; margin: 0.2em 0; text-align: center; } ul.kl_large_link_grid > li > a { /*display: block;*/ padding: 0.5em; min-height: 4em; padding-top: 1em; display: block; text-decoration: none !important; color: var(--dt-color-primary-dark-text); } ul.kl_large_link_grid > li > a > i { display: block; font-size: inherit; text-align:center; margin-bottom: 0.5em } ul.kl_large_link_grid > li > a > i:before { font-size: 1.5em; } ul.kl_large_link_grid > li:nth-child(odd) { margin-right: 1%; } ul.kl_large_link_grid > li:nth-child(even) { margin-left: 1%; } ul.kl_large_link_grid > li img { max-width: 100% !important; } ul.kl_large_link_grid > li.kl_current, ul.kl_large_link_grid > li.kl_current > a { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } ul.kl_large_link_grid > li:hover, ul.kl_large_link_grid > li:focus, ul.kl_large_link_grid > li:hover a, ul.kl_large_link_grid > li:focus a, ul.kl_large_link_grid > li > a:hover, ul.kl_large_link_grid > li > a:focus { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } @media screen and (min-width: 1000px) { ul.kl_large_link_grid > li { font-size: 1.5em; } } /* Swap primary and secondary colors */ ul.kl_large_link_grid.kl_colors_secondary > li > a { color: var(--dt-color-secondary-dark-text); } ul.kl_large_link_grid.kl_colors_secondary > li { border: 1px solid var(--dt-color-secondary); } ul.kl_large_link_grid.kl_colors_secondary > li.kl_current, ul.kl_large_link_grid.kl_colors_secondary > li.kl_current > a { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } ul.kl_large_link_grid.kl_colors_secondary > li:hover, ul.kl_large_link_grid.kl_colors_secondary > li:focus, ul.kl_large_link_grid.kl_colors_secondary > li:hover a, ul.kl_large_link_grid.kl_colors_secondary > li:focus a, ul.kl_large_link_grid.kl_colors_secondary > li > a:hover, ul.kl_large_link_grid.kl_colors_secondary > li > a:focus { background-color: var(--dt-color-primary) !important; color: var(--dt-color-primary-contrast) !important; } /* Left aligned option */ ul.kl_large_link_grid.kl_align_left > li, ul.kl_large_link_grid.kl_align_left > li i { text-align: left; } /* Right aligned option */ ul.kl_large_link_grid.kl_align_right > li, ul.kl_large_link_grid.kl_align_right > li i { text-align: right; } /*********************************************************************/ /***** BEGIN DESIGN TOOLS THEME CUSTOMIZATIONS ***********************/ /*********************************************************************/ #kl_wrapper_3.kl_apple #kl_banner h2 { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_apple #kl_banner .kl_mod_num { color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_apple #kl_banner .kl_subtitle { background-color: var(--dt-color-secondary); border-color: var(--dt-color-secondary-contrast); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_apple #kl_description { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_apple h3:not(.ui-state-default) { border-color: var(--dt-color-graybg); background: var(--dt-color-graybg); color: var(--dt-color-graybg-contrast); } #kl_wrapper_3.kl_apple h3:not(.ui-state-default) i { color: var(--dt-color-graybg-contrast); } #kl_wrapper_3.kl_apple h4:not(.ui-state-default), #kl_wrapper_3.kl_apple h5:not(.ui-state-default) { border-color: var(--dt-color-graybg); } #kl_wrapper_3.kl_apple #kl_navigation > ul { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_apple #kl_navigation > ul > li > a { color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_apple #kl_modules { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_apple > div > i, #kl_wrapper_3.kl_apple.variation_2 > div > i { border-color: var(--dt-color-graybg); background: var(--dt-color-graybg); color: var(--dt-color-graybg-contrast); } #kl_wrapper_3.kl_apple.variation_2 #kl_banner .kl_subtitle { background-color: var(--dt-color-accent); border-color: var(--dt-color-accent-contrast); color: var(--dt-color-accent-contrast); } #kl_wrapper_3.kl_apple.variation_2 #kl_navigation > ul { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_apple.variation_2 #kl_navigation > ul > li > a { color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_apple.variation_2 h3:not(.ui-state-default) { border-color: var(--dt-color-primary); background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_apple.variation_2 h3:not(.ui-state-default) i { color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_apple.variation_2 > div > i { border-color: var(--dt-color-primary); background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_bar #kl_banner h2 { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_bar #kl_banner .kl_subtitle { color: var(--dt-color-secondary-contrast); border-color: var(--dt-color-secondary-contrast); background-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_basic_bar #kl_banner #kl_description { border-color: var(--dt-color-primary); color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_basic_bar h3:not(.ui-state-default) { border-bottom-color: var(--dt-color-primary-dark-text); color: #000; text-transform: none; } #kl_wrapper_3.kl_basic_bar h3:not(.ui-state-default) i { color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_basic_bar.variation_2 #kl_banner h2 { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_bar.variation_2 #kl_banner .kl_subtitle { color: var(--dt-color-secondary-dark-text); border-color: var(--dt-color-secondary-dark-text); background-color: #fff; } #kl_wrapper_3.kl_basic_bar.variation_2 #kl_banner #kl_description { border-color: var(--dt-color-primary); color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_basic_bar.variation_2 h3:not(.ui-state-default) { border-bottom-color: var(--dt-color-secondary-dark-text); color: #000; } #kl_wrapper_3.kl_basic_bar.variation_2 h3:not(.ui-state-default) i { color: var(--dt-color-secondary-dark-text); } #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner .kl_subtitle { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border-color: #fff; border-top: 3px solid #fff; border-right: none; border-left: none; } #kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_description { border-top: 3px solid #fff; } #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul > li > a { color: var(--dt-color-primary-dark-text); text-decoration: none; } #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul > li > a:focus { color: #000; } #kl_wrapper_3.kl_basic_color_panel_nav h3:not(.ui-state-default) { color: #000; text-transform: none; } #kl_wrapper_3.kl_basic_color_panel_nav h3:not(.ui-state-default) i { color: var(--dt-color-primary-dark-text); } @media screen and (min-width: 640px) { #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul { background-color: rgba(255, 255, 255, 0.75); } #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul > li > a:hover { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation > ul > li > a:focus { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } } #kl_wrapper_3.kl_basic_color_panel_nav.variation_2 #kl_banner .kl_subtitle { background-color: #fff; color: var(--dt-color-secondary-dark-text); } #kl_wrapper_3.kl_basic_color_panel_nav.variation_2 h3:not(.ui-state-default) { color: #000; text-transform: none; } #kl_wrapper_3.kl_basic_color_panel_nav.variation_2 h3:not(.ui-state-default) i { color: var(--dt-color-secondary-dark-text); } @media screen and (min-width: 640px) { #kl_wrapper_3.kl_basic_color_panel_nav.variation_2 #kl_navigation > ul > li > a:focus { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_basic_color_panel_nav.variation_2 #kl_navigation > ul > li > a:hover { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } } #kl_wrapper_3.kl_basic_color #kl_banner { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_color #kl_banner #kl_banner_left { border-color: #fff; } #kl_wrapper_3.kl_basic_color #kl_banner .kl_subtitle { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border-color: #fff; border-top: 3px solid #fff; border-right: none; border-left: none; } #kl_wrapper_3.kl_basic_color #kl_banner #kl_description { border-top: 3px solid #fff; } #kl_wrapper_3.kl_basic_color #kl_navigation > ul > li { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_color #kl_navigation > ul > li > a { border-bottom: 3px solid #fff; text-decoration: none; color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_color #kl_navigation > ul > li > a:hover { color: var(--dt-color-primary-contrast); text-decoration: underline; } #kl_wrapper_3.kl_basic_color #kl_navigation > ul > li > a:focus { color: var(--dt-color-primary-contrast); text-decoration: underline; } #kl_wrapper_3.kl_basic_color #kl_navigation > ul > li > a:visited { color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_basic_color h3:not(.ui-state-default) { color: #000; text-transform: none; } #kl_wrapper_3.kl_basic_color h3:not(.ui-state-default) i { color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_basic_color.variation_2 #kl_banner .kl_subtitle { background-color: #fff; color: var(--dt-color-secondary-dark-text); } #kl_wrapper_3.kl_basic_color.variation_2 h3:not(.ui-state-default) { color: #000; text-transform: none; } #kl_wrapper_3.kl_basic_color.variation_2 h3:not(.ui-state-default) i { color: var(--dt-color-secondary-dark-text); } #kl_wrapper_3.kl_basic_color.variation_2 #kl_navigation > ul > li { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_basic_color.variation_2 #kl_navigation > ul > li > a { border-bottom: 3px solid #fff; text-decoration: none; color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_basic_color.variation_2 #kl_navigation > ul > li > a:hover { color: var(--dt-color-secondary-contrast); text-decoration: underline; } #kl_wrapper_3.kl_basic_color.variation_2 #kl_navigation > ul > li > a:focus { color: var(--dt-color-secondary-contrast); text-decoration: underline; } #kl_wrapper_3.kl_basic_color.variation_2 #kl_navigation > ul > li > a:visited { color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_bookmark #kl_banner h2 { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left { border-right-color: #fff; } #kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left .kl_mod_num { color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_bookmark #kl_banner .kl_subtitle { background-color: var(--dt-color-accent); color: var(--dt-color-accent-contrast); } #kl_wrapper_3.kl_bookmark #kl_banner #kl_description { border: 1px solid var(--dt-color-primary); } #kl_wrapper_3.kl_bookmark h3:not(.ui-state-default) { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); font-weight: normal; } #kl_wrapper_3.kl_bookmark > div > i { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_bookmark h4:not(.kl_panel_heading), #kl_wrapper_3.kl_apple.kl_bookmark h5:not(.kl_panel_heading) { background-color: var(--dt-color-graybg); color: var(--dt-color-graybg-contrast); font-weight: normal; } #kl_wrapper_3.kl_bookmark h5:not(.kl_panel_heading) { background-color: var(--dt-color-graybg); color: var(--dt-color-graybg-contrast); font-weight: normal; } #kl_wrapper_3.kl_bookmark #kl_navigation > ul > li > a { background: white; color: var(--dt-color-primary-dark-text); border-color: #F4F4F4; text-decoration: none; } #kl_wrapper_3.kl_bookmark .kl_quick_check, #kl_wrapper_3.kl_bookmark #kl_modules .ui-tabs-panel { background: #fff; } #kl_wrapper_3.kl_bookmark.variation_2 h3:not(.ui-state-default) { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); font-weight: normal; } #kl_wrapper_3.kl_bookmark.variation_2 > div > i { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_box_left h2 { border-bottom-color: var(--dt-color-primary); } #kl_wrapper_3.kl_box_left #kl_banner #kl_description { background: #fff; border: 1px solid var(--dt-color-graybg); } #kl_wrapper_3.kl_box_left #kl_banner #kl_banner_left { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_box_left #kl_navigation > ul > li > a { border: 1px solid var(--dt-color-primary); text-decoration: none; } #kl_wrapper_3.kl_box_left #kl_navigation > ul > li > a:visited { background: #fff; color: #000; border: 1px solid var(--dt-color-primary); text-decoration: none; } #kl_wrapper_3.kl_box_left #kl_navigation > ul > li > a:hover { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_box_left #kl_navigation > ul > li > a:focus { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) { border-bottom: 1px solid lightgray; border-top: 1px solid lightgray; } #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_box_left #kl_modules div.kl_module_content h3 { border: 1px solid var(--dt-color-graybg); } #kl_wrapper_3.kl_box_left > div > i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_box_left.variation_2 h2 { border-bottom-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_box_left.variation_2 #kl_banner #kl_description { border: 1px solid var(--dt-color-secondary); } #kl_wrapper_3.kl_box_left.variation_2 #kl_banner #kl_banner_left { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul > li > a { border: 1px solid var(--dt-color-primary); } #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul > li > a:visited { color: var(--dt-color-secondary-dark-text); border: 1px solid var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul > li > a:hover { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_box_left.variation_2 #kl_navigation > ul > li > a:focus { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_box_left.variation_2 h3:not(.ui-state-default) i { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); box-shadow: none; } #kl_wrapper_3.kl_box_left.variation_2 > div > i { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); box-shadow: none; } #kl_wrapper_3.kl_circle_left { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_circle_left #kl_banner h2 { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left #kl_banner #kl_banner_left { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_circle_left #kl_banner .kl_subtitle { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_circle_left #kl_banner #kl_description { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_circle_left #kl_banner_image img { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_circle_left #kl_navigation > ul > li i { border: 3px solid #fff; background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left #kl_navigation > ul > li > a { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); text-decoration: none; } #kl_wrapper_3.kl_circle_left > div > i { border: 5px solid #fff; background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_circle_left h3:not(.ui-state-default) i { border: 5px solid #fff; background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_circle_left h3:not(.ui-state-default) { background: var(--dt-color-primary); border-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left h4:not(.kl_panel_heading), #kl_wrapper_3.kl_apple.kl_circle_left h5:not(.kl_panel_heading) { background: var(--dt-color-primary); border-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left h5:not(.kl_panel_heading) { background: var(--dt-color-primary); border-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left.variation_2 { border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_circle_left.variation_2 #kl_banner h2 { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_circle_left.variation_2 #kl_banner #kl_banner_left { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left.variation_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_circle_left.variation_2 #kl_banner #kl_description { border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_circle_left.variation_2 #kl_navigation > ul > li i { border: 3px solid #fff; background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_circle_left.variation_2 #kl_navigation > ul > li > a { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left.variation_2 #kl_banner_image img { border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_circle_left.variation_2 h3:not(.ui-state-default) { border-color: var(--dt-color-secondary); background-color: #fff; color: #000; } #kl_wrapper_3.kl_circle_left.variation_2 h3:not(.ui-state-default) i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_circle_left.variation_2 > div > i { background: var(--dt-color-primary); color: #fff; } #kl_wrapper_3.kl_circle_left.variation_2 h4:not(.kl_panel_heading), #kl_wrapper_3.kl_apple.kl_circle_left.variation_2 h5:not(.kl_panel_heading), #kl_wrapper_3.kl_circle_left.variation_2 h5 { border-color: var(--dt-color-secondary); background-color: #fff; color: #000; } #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right { color: #000; background: rgba(255, 255, 255, 0.8); text-transform: none; } #kl_wrapper_3.kl_circles_overlap #kl_banner .kl_subtitle { background: rgba(255, 255, 255, 0.8); } #kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description { background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.42); } #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul > li > a { color: var(--dt-color-primary-contrast); background-color: var(--dt-color-primary); } #kl_wrapper_3.kl_circles_overlap > div > i, #kl_wrapper_3.kl_circles_overlap h3:not(.ui-state-default) i { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a, #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul > li > a:focus #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul > li > a:hover { color: var(--dt-color-secondary-contrast); background: var(--dt-color-secondary) !important; } #kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a i, #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_circles_overlap #kl_navigation > ul > li > a:focus i { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_colored_headings_box_left > div, #kl_wrapper_3.kl_colored_headings > div { background-color: #fff; border: 1px solid lightgray; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner, #kl_wrapper_3.kl_colored_headings #kl_banner { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner h2, #kl_wrapper_3.kl_colored_headings #kl_banner h2 { text-transform: none; } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left, #kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_left { background-color: #fff; color: #000; border-bottom-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_colored_headings_box_left #kl_banner .kl_subtitle, #kl_wrapper_3.kl_colored_headings #kl_banner .kl_subtitle { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); text-transform: none; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a { color: var(--dt-color-primary-contrast); text-decoration: none; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:focus, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:focus { color: #000; background-color: #fff; -moz-box-shadow: inset 0 0 3px #fff; -webkit-box-shadow: inset 0 0 3px #fff; box-shadow: inset 0 0 3px #fff; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:focus i, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:focus i { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:visited, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:visited { color: var(--dt-color-primary-contrast); text-decoration: none; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:focus, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:focus { color: #000; } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation > ul > li > a:focus i, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_colored_headings #kl_navigation > ul > li > a:focus i { border-bottom-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_colored_headings_box_left #kl_navigation i, #kl_wrapper_3.kl_colored_headings #kl_navigation i { background: #fff; color: #444; border-bottom-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_colored_headings_box_left #kl_modules .ui-widget-content, #kl_wrapper_3.kl_colored_headings #kl_modules .ui-widget-content { border: 1px solid lightgray; background: #fff; } #kl_wrapper_3.kl_colored_headings_box_left #kl_modules h3, #kl_wrapper_3.kl_colored_headings_box_left > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings #kl_modules h3, #kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) { background-color: var(--dt-color-secondary); border-top: 5px solid var(--dt-color-primary); color: var(--dt-color-secondary-contrast); text-transform: none; } #kl_wrapper_3.kl_colored_headings_box_left > div > h3 i, #kl_wrapper_3.kl_colored_headings_box_left #kl_modules h3 i, #kl_wrapper_3.kl_colored_headings > div > h3 i, #kl_wrapper_3.kl_colored_headings #kl_modules h3 i { background-color: #fff; color: var(--dt-color-primary-dark-text); border-bottom: 4px solid var(--dt-color-primary); } #kl_wrapper_3.kl_colored_headings_box_left h4, #kl_wrapper_3.kl_apple.kl_colored_headings_box_left h5, #kl_wrapper_3.kl_colored_headings_box_left h5, #kl_wrapper_3.kl_colored_headings_box_left h6, #kl_wrapper_3.kl_colored_headings h4, #kl_wrapper_3.kl_apple.kl_colored_headings h5, #kl_wrapper_3.kl_colored_headings h5, #kl_wrapper_3.kl_colored_headings h6 { border-bottom: 1px solid lightgray; color: #000; text-transform: none; } #kl_wrapper_3.kl_colored_headings_box_left .well, #kl_wrapper_3.kl_colored_headings .well { background-color: #f5f5f5; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul > li > a, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul > li > a { color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul > li > a:focus, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul > li > a:focus { color: #000; } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul > li > a:focus i, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul > li > a:focus i { border-bottom-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_navigation > ul > li > a i, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_navigation > ul > li > a i { border-bottom-color: var(--dt-color-primary); } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_banner #kl_banner_left, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_banner #kl_banner_left { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border-bottom-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_banner .kl_subtitle { background-color: #fff; color: #000; } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_modules h3, #kl_wrapper_3.kl_colored_headings_box_left.variation_2 > div > h3:not(.ui-state-default), #kl_wrapper_3.kl_colored_headings.variation_2 #kl_modules h3, #kl_wrapper_3.kl_colored_headings.variation_2 > div > h3:not(.ui-state-default) { background-color: var(--dt-color-primary); border-top: 5px solid var(--dt-color-secondary); color: var(--dt-color-primary-contrast); text-transform: none; } #kl_wrapper_3.kl_colored_headings_box_left.variation_2 > div > h3 i, #kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_modules h3 i, #kl_wrapper_3.kl_colored_headings.variation_2 > div > h3 i, #kl_wrapper_3.kl_colored_headings.variation_2 #kl_modules h3 i { background-color: #fff; color: #000; border-bottom: 4px solid var(--dt-color-secondary); } #kl_wrapper_3.kl_emta { color: #000; } #kl_wrapper_3.kl_emta #kl_banner { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border: 1px solid var(--dt-color-primary); } #kl_wrapper_3.kl_emta #kl_banner h2 { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_emta #kl_banner #kl_banner_left { border-right: 2px solid #fff; } #kl_wrapper_3.kl_emta #kl_banner #kl_banner_left .kl_mod_num { color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_emta #kl_banner #kl_description { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_emta h3:not(.ui-state-default) { color: var(--dt-color-secondary-contrast); background: var(--dt-color-secondary); font-weight: normal; } #kl_wrapper_3.kl_emta #kl_navigation > ul { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_emta #kl_navigation > ul > li > a { color: var(--dt-color-primary-contrast); text-decoration: none; } #kl_wrapper_3.kl_emta #kl_navigation > ul > li > a:visited { color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_emta #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_emta #kl_navigation > ul > li > a:focus { color: var(--dt-color-primary-contrast); text-decoration: underline; } #kl_wrapper_3.kl_emta #kl_modules { border: 1px solid var(--dt-color-primary); } #kl_wrapper_3.kl_flat_sections_main, #kl_wrapper_3.kl_flat_sections { /* Content */ } #kl_wrapper_3.kl_flat_sections_main #kl_banner, #kl_wrapper_3.kl_flat_sections #kl_banner { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_flat_sections_main #kl_banner h2, #kl_wrapper_3.kl_flat_sections #kl_banner h2 { text-transform: none; border-top-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left, #kl_wrapper_3.kl_flat_sections #kl_banner #kl_banner_left { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle, #kl_wrapper_3.kl_flat_sections #kl_banner .kl_subtitle { background: #fff; color: #000; text-transform: none; } #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_description, #kl_wrapper_3.kl_flat_sections #kl_banner #kl_description { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul > li > a { border: 1px solid var(--dt-color-primary); color: var(--dt-color-primary-contrast); text-decoration: none; } #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:visited, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul > li > a:visited { color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:focus, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul > li > a:focus { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:focus i, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_flat_sections #kl_navigation > ul > li > a:focus i { background: var(--dt-color-secondary-contrast); color: var(--dt-color-secondary); border: 1px solid var(--dt-color-secondary); } #kl_wrapper_3.kl_flat_sections_main #kl_navigation i, #kl_wrapper_3.kl_flat_sections #kl_navigation i { background: #fff; color: #444; border: 1px solid #444; } #kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default), #kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) { color: #000; border-top: 1px solid lightgray; text-transform: none; } #kl_wrapper_3.kl_flat_sections_main > div > i, #kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default) i:first-child, #kl_wrapper_3.kl_flat_sections > div > i, #kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) i:first-child { color: var(--dt-color-primary-contrast); border: 1px solid lightgray; background: var(--dt-color-primary); } #kl_wrapper_3.kl_flat_sections_main h4, #kl_wrapper_3.kl_apple.kl_flat_sections_main h5, #kl_wrapper_3.kl_flat_sections_main h5, #kl_wrapper_3.kl_flat_sections_main h6, #kl_wrapper_3.kl_flat_sections h4, #kl_wrapper_3.kl_apple.kl_flat_sections h5, #kl_wrapper_3.kl_flat_sections h5, #kl_wrapper_3.kl_flat_sections h6 { color: #000; border-bottom: 1px solid lightgray; text-transform: none; } #kl_wrapper_3.kl_flat_sections_main > div:nth-child(odd), #kl_wrapper_3.kl_flat_sections > div:nth-child(odd) { background: whitesmoke; } #kl_wrapper_3.kl_flat_sections_main .well, #kl_wrapper_3.kl_flat_sections .well { background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } #kl_wrapper_3.kl_flat_sections_main.variation_2, #kl_wrapper_3.kl_flat_sections.variation_2 { /* Content */ } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_banner h2, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_banner h2 { border-top-color: white; } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_banner #kl_banner_left, #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_banner #kl_description, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_banner #kl_banner_left, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_banner .kl_subtitle, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_banner #kl_description { background-color: #fff; color: #444; } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul > li > a, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul > li > a { border: 1px solid var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul > li > a:visited, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul > li > a:visited { color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul > li > a:focus, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul > li > a:focus { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation > ul > li > a:focus i, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation > ul > li > a:focus i { background: var(--dt-color-primary-contrast); color: var(--dt-color-primary); border: 1px solid var(--dt-color-primary); } #kl_wrapper_3.kl_flat_sections_main.variation_2 #kl_navigation i, #kl_wrapper_3.kl_flat_sections.variation_2 #kl_navigation i { background: #fff; color: #444; border: 1px solid #444; } #kl_wrapper_3.kl_flat_sections_main.variation_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_flat_sections.variation_2 h3:not(.ui-state-default) { color: #000; border-top: 1px solid lightgray; } #kl_wrapper_3.kl_flat_sections_main.variation_2 > div > i, #kl_wrapper_3.kl_flat_sections_main.variation_2 h3:not(.ui-state-default) i:first-child, #kl_wrapper_3.kl_flat_sections.variation_2 > div > i, #kl_wrapper_3.kl_flat_sections.variation_2 h3:not(.ui-state-default) i:first-child { color: var(--dt-color-primary-dark-text); border: 1px solid lightgray; background: #fff; } #kl_wrapper_3.kl_flat_sections_main #kl_description { border-top: 2px solid #fff; border-bottom: 2px solid #fff; } #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); text-transform: none; } #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right { background: rgba(255, 255, 255, 0.8); border-bottom: 1px solid #fff; } #kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle { background: rgba(255, 255, 255, 0.8); border: 1px solid #fff; text-transform: none; } #kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description { border: 4px double #fff; background: rgba(255, 255, 255, 0.8); } #kl_wrapper_3.kl_ribbons_main #kl_navigation a i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul > li > a { background: rgba(255, 255, 255, 0.8); color: #545454; border: 1px solid #fff; text-decoration: none; } #kl_wrapper_3.kl_ribbons_main > div > i, #kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) { background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); font-weight: normal; font-size: 1.2em; } #kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) i { background: #FFF; color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_ribbons_main .kl_quick_check, #kl_wrapper_3.kl_ribbons_main #kl_modules .ui-tabs-panel { background: #fff; } @media screen and (min-width: 950px) { body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul > li > a { background: #fff; } body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after { border: 22px solid #fff; border-left: 20px solid transparent; } } @media screen and (min-width: 800px) and (max-width: 969px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul > li > a { background: #fff; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after { border: 22px solid #fff; border-left: 20px solid transparent; } } @media screen and (min-width: 1000px) { body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation > ul > li > a { background: #fff; } body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after { border: 22px solid #fff; border-left: 20px solid transparent; } } #kl_wrapper_3.kl_ribbons_main.variation_2 #kl_navigation a i { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_ribbons_main.variation_2 h3:not(.ui-state-default) { background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_rounded_inset #kl_banner { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_rounded_inset #kl_banner h2 { border-color: var(--dt-color-secondary); background: #fff; color: #000; } #kl_wrapper_3.kl_rounded_inset #kl_banner .kl_subtitle { color: var(--dt-color-primary-contrast); text-transform: none; } #kl_wrapper_3.kl_rounded_inset #kl_banner #kl_description { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border-bottom: 1px solid #fff; } #kl_wrapper_3.kl_rounded_inset #kl_banner_left { border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul > li > a { color: var(--dt-color-primary-dark-text); border-color: var(--dt-color-primary); text-decoration: none; } #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul > li > a:visited { color: var(--dt-color-primary-dark-text); border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_rounded_inset #kl_navigation > ul > li > a:focus { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default) { border-color: var(--dt-color-secondary); background-color: #fff; text-transform: none; border-width: 2px; } #kl_wrapper_3.kl_rounded_inset > div > i, #kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default) i { color: #000; border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner h2 { border-color: var(--dt-color-secondary-contrast); background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner .kl_subtitle { color: var(--dt-color-primary-contrast); text-transform: none; } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner #kl_description { background: #fff; color: #000; border-bottom: 1px solid #fff; } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner_left { border-color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation > ul > li > a { color: var(--dt-color-secondary-dark-text); border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation > ul > li > a:visited { color: var(--dt-color-secondary); border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation > ul > li > a:focus { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_rounded_inset.variation_2 h3:not(.ui-state-default) { border-color: var(--dt-color-primary); background-color: #fff; text-transform: none; border-width: 2px; } #kl_wrapper_3.kl_rounded_inset.variation_2 > div > i, #kl_wrapper_3.kl_rounded_inset.variation_2 h3:not(.ui-state-default) i { color: #000; border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_square_right #kl_banner #kl_description, #kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_square_right #kl_banner #kl_description { border-color: var(--dt-color-primary); } #kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle { color: var(--dt-color-primary-dark-text); } #kl_wrapper_3.kl_square_right h2 { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_square_right #kl_banner_left { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_square_right h3:not(.ui-state-default) { border-color: var(--dt-color-primary); background-color: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_square_right #kl_navigation > ul > li i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); border-left: 1px solid #fff; } #kl_wrapper_3.kl_square_right #kl_navigation > ul > li > a { text-decoration: none; } #kl_wrapper_3.kl_square_right #kl_navigation > ul > li > a:visited { background: #fff; color: #000; border-color: var(--dt-color-primary); text-decoration: none; } #kl_wrapper_3.kl_square_right #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_square_right #kl_navigation > ul > li > a:focus { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_square_right #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_square_right #kl_navigation > ul > li > a:focus i { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_square_right > div > i, #kl_wrapper_3.kl_square_right h3:not(.ui-state-default) i { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_square_right.variation_2 #kl_banner #kl_description, #kl_wrapper_3.kl_square_right.variation_2 #kl_banner .kl_subtitle { border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_square_right.variation_2 #kl_banner #kl_description { border-color: var(--dt-color-secondary); } #kl_wrapper_3.kl_square_right.variation_2 #kl_banner .kl_subtitle { color: var(--dt-color-secondary-dark-text); } #kl_wrapper_3.kl_square_right.variation_2 h2 { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_square_right.variation_2 #kl_banner_left { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_square_right.variation_2 h3:not(.ui-state-default) { border-color: var(--dt-color-secondary); background-color: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_square_right.variation_2 #kl_navigation > ul > li i { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); border-left: 1px solid #fff; } #kl_wrapper_3.kl_square_right.variation_2 #kl_navigation > ul > li > a:visited { background: #fff; color: #000; border-color: var(--dt-color-secondary); text-decoration: none; } #kl_wrapper_3.kl_square_right.variation_2 #kl_navigation > ul > li > a:hover, #kl_wrapper_3.kl_square_right.variation_2 #kl_navigation > ul > li > a:focus { background: var(--dt-color-secondary); color: var(--dt-color-secondary-contrast); } #kl_wrapper_3.kl_square_right.variation_2 #kl_navigation > ul > li > a:hover i, #kl_wrapper_3.kl_square_right.variation_2 #kl_navigation > ul > li > a:focus i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } #kl_wrapper_3.kl_square_right.variation_2 > div > i, #kl_wrapper_3.kl_square_right.variation_2 h3:not(.ui-state-default) i { background: var(--dt-color-primary); color: var(--dt-color-primary-contrast); } :root { --dp-tabs-nav-bg: var(--dt-color-primary); --dp-tabs-nav-bg-text: var(--dt-color-primary-contrast); --dp-tabs-nav-dark-text: var(--dt-color-primary-dark-text); } /* Theme Colors */ :root { --dt-color-primary: #A51417; --dt-color-primary-contrast: #FFFFFF; --dt-color-primary-dark-text: #A51417; --dt-color-secondary: #C8C8C8; --dt-color-secondary-contrast: #000000; --dt-color-secondary-dark-text: #474747; --dt-color-accent: #007360; --dt-color-accent-contrast: #FFFFFF; --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: #000000; } .kl_app_only {display: none !important;} /*********************************************************************/ /***** END DESIGN TOOLS HEME IMPORT & CUSTOMIZATION ****************/ /*********************************************************************/