/*---font imports---*/ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); /*********************************************************************/ /***** BEGIN DESIGN TOOLS THEME IMPORT & CUSTOMIZATION **************/ /*********************************************************************/ /* Import statements need to be at the top of your CSS file */ /* For Main CSS file */ @import url(https://designtools.ciditools.com/css/themes.css); /* For Mobile app CSS file */ /*@import url(https://designtools.ciditools.com/css/app.css);*/ /* Institution color customizations */ @import url(https://designtools.ciditools.com/css/inst_theme_overrides.css); /* Theme Colors */ :root { --dt-color-primary: #9E1B2A; --dt-color-primary-contrast: #FFFFFF; --dt-color-primary-dark-text: #9E1B2A; --dt-color-secondary: #000000; --dt-color-secondary-contrast: #FFFFFF; --dt-color-secondary-dark-text: #000000; --dt-color-accent: #57C6CA; --dt-color-accent-contrast: #000000; --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: #000000; } /*********************************************************************/ /***** END DESIGN TOOLS HEME IMPORT & CUSTOMIZATION ****************/ /*********************************************************************/ /*---------------------------------------------MTSAC 1 LIGHT THEME START------------------------------------------- Version: 2020.08.20:03:44pm ----------------------------------------------------------------------------------- Insert description of theme here: this is a theme produced for Mt. SAC ------------- ------------------------------------------------------------------------------------------------------------*/ /*---brand colors---*/ /*This changes the colors for institution items items like links.*/ .kl_ms1_light { /*primary colors for theme*/ --dt-color-primary: #862633; /*primary:maroon*/ --dt-color-primary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-primary-dark-text: var(--dt-color-light-2); /*light gray*/ --dt-color-primary-darkened-5: #6cac1d; /*5% darker*/ --dt-color-primary-darkened-10: #5e9e05; /*10% darker*/ --dt-color-primary-darkened-15: #519100; /*15% darker*/ --dt-color-primary-lightened-5: #88c73d; /*5% lighter*/ --dt-color-primary-lightened-10: #96d54b; /*10% lighter*/ --dt-color-primary-lightened-15: #96d54b; /*15% lighter*/ /*secondary colors for theme*/ --dt-color-secondary: var(--dt-color-dark-3); /*secondary:dark gray*/ --dt-color-secondary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-secondary-dark-text: var(--dt-color-light-2);/*light gray*/ --dt-color-secondary-darkened-5: #595959; /*5% darker*/ --dt-color-secondary-darkened-10: #4e4e4e; /*10% darker*/ --dt-color-secondary-darkened-15: #424242; /*15% darker*/ --dt-color-secondary-lightened-5: #727272; /*5% lighter*/ --dt-color-secondary-lightened-10: #7f7f7f; /*10% lighter*/ --dt-color-secondary-lightened-15: #8b8b8b; /*15% lighter*/ /*accent colors*/ --dt-color-accent: #4C5360; --dt-color-accent-contrast: var(--dt-color-light-1); /*gray background colors*/ --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: var(--dt-color-dark-1); /*tabs*/ --dp-tabs-nav-bg:#474747; --dp-tabs-nav-bg-text:var(--dt-color-light-1); --dp-tabs-nav-dark-text:#474747; --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); /*brand colors*/ --ic-brand-primary:var(--dt-color-primary);/*primary color - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-5:var(--dt-color-primary-darkened-5); /*5% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-10:var(--dt-color-primary-darkened-10); /*10% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-15:var(--dt-color-primary-darkened-15); /*15% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-5:var(--dt-color-primary-lightened-5); /*5% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-10:var(--dt-color-primary-lightened-10); /*10% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-15:var(--dt-color-primary-lightened-15); /*15% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ /*secondary colors*/ --ic-brand-secondary:var(--dt-color-secondary);/*primary color - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-5:var(--dt-color-secondary-darkened-5); /*5% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-10:var(--dt-color-secondary-darkened-10); /*10% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-15:var(--dt-color-secondary-darkened-15); /*15% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-5:var(--dt-color-secondary-lightened-5); /*5% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-10:var(--dt-color-secondary-lightened-10); /*10% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-15:var(--dt-color-secondary-lightened-15); /*15% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ /*brand primary button colors*/ --ic-brand-button-primary-bgd:var(--dt-color-primary); --ic-brand-button-primary-text:var(--dt-color-light-1); --ic-brand-button-primary-bgd-darkened-5:var(--dt-color-primary-darkened-5); --ic-brand-button-primary-bgd-darkened-15:var(--dt-color-primary-darkened-15); /*brand secondary button colors*/ --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text:var(--dt-color-light-1); --ic-brand-button-secondary-bgd-darkened-5:var(--dt-color-secondary-darkened-5); --ic-brand-button-secondary-bgd-darkened-15:var(--dt-color-secondary-darkened-15); /*brand font colors*/ --ic-brand-font-color-dark: #2D3B45; --ic-brand-font-color-dark-lightened-15: #4C5860; --ic-brand-font-color-dark-lightened-30: #6C757C; /*links*/ --ic-link-color: var(--dt-color-dark-3); /*non-hover color*/ --ic-link-color-darkened-10: var(--dt-color-dark-2); /*hover:10% darker*/ --ic-link-color-lightened-10: var(--dt-color-dark-1); /*hover:10% lighter*/ /*buttons*/ --ic-brand-button-primary-bgd: var(--dt-color-primary); --ic-brand-button-primary-text: var(--dt-color-light-1); --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text: var(--dt-color-light-1); /*other global colors*/ --dt-black-transparency:rgba(0,0,0,0.25); --dt-color-light-1:#FFFFFF; --dt-color-light-2:#f0f0f0; --dt-color-light-3:#d9d9d9; --dt-color-light-4:#c9c9c9; --dt-color-dark-3:#333333; --dt-color-dark-2:#666666; --dt-color-dark-1:#000000; } /*-----global-----*/ /*container and general styles*/ .kl_ms1_light { background-color:var(--dt-color-light-1); max-width: 1102px; height: 100%; font-family: source sans pro, sans-serif; font-size: 18px; color: var(--dt-color-dark-3); text-align: left; position: relative; box-shadow: 0px 0px 5px #c9c9c9; margin-bottom:20px; } .kl_ms1_light p, .kl_ms1_light li, .kl_ms1_light td { color:var(--dt-color-dark-3); font-family: source sans pro, sans-serif; } .kl_ms1_light p, .kl_ms1_light h4, .kl_ms1_light h5, .kl_ms1_light h6, .kl_ms1_light dl { margin:0px 40px 40px; } /*general:media query*/ @media (max-width: 800px) { .kl_ms1_light p, .kl_ms1_light h4, .kl_ms1_light h5, .kl_ms1_light h6, .kl_ms1_light dl { margin:0px 20px 20px; } } .kl_ms1_light > div { padding-bottom:40px; } /*---links---*/ .kl_ms1_light a:hover { text-decoration:none !important; } /*---headings---*/ /*heading styles for every type of block available*/ .kl_ms1_light h2, .kl_ms1_light h3, .kl_ms1_light h4, .kl_ms1_light h5, .kl_ms1_light h6 { font-family: Lato, sans-serif; font-weight: 900 !important; position: relative; } .kl_ms1_light h3 { color: var(--dt-color-light-1); font-size: 28px; padding-left: 40px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: var(--dt-color-secondary); padding-right: 20px; margin: 0px 0px 30px 0px; background-repeat:no-repeat; background-position:top right; background-size: 20%; } .kl_ms1_light h4 { color:var(--dt-color-primary); margin-top:40px; margin-bottom:20px; } .kl_ms1_light h5 { color: var(--dt-color-dark-3); } .kl_ms1_light h6 { color: var(--dt-color-primary); } @media (max-width: 800px) { .kl_ms1_light h3 { margin: 0px 0px 10px 0px; } } /*---heading icons---*/ /*font awesome icon styles within h3 heading tags*/ .kl_ms1_light h3 .fa, .kl_ms1_light h3 .fas, .kl_ms1_light h3 .far, .kl_ms1_light h3 .fal, .kl_ms1_light h3 .fad, .kl_ms1_light h3 .fab, .kl_ms1_light h2 .fa, .kl_ms1_light h2 .fas, .kl_ms1_light h2 .far, .kl_ms1_light h2 .fal, .kl_ms1_light h2 .fad, .kl_ms1_light h2 .fab { color: var(--dt-color-light-1); background-color: var(--dt-color-primary); border-right:5px solid var(--dt-color-light-1); width: 70px; height: 65px; display: inline-flex; align-items: center; justify-content: center; position: relative; margin-top: -8px; margin-bottom: -8px; margin-left:-40px; margin-right:20px; } /*---list types---*/ .kl_ms1_light ul, .kl_ms1_light ol { margin:0px 40px 20px 40px; } /*list (block specific): unordered list*/ .kl_ms1_light #kl_objectives2 ul, .kl_ms1_light #kl_activities2 ul, .kl_ms1_light #kl_readings2 ul, .kl_ms1_light #kl_assignments2 ul { margin:0px 0px 40px 0px; list-style: none; padding:0px; } .kl_ms1_light #kl_objectives2 ul li, .kl_ms1_light #kl_activities2 ul li, .kl_ms1_light #kl_readings2 ul li, .kl_ms1_light #kl_assignments2 ul li { background-color:var(--dt-color-light-2); padding: 20px 40px; margin: 5px 80px; } .kl_ms1_light #kl_objectives2 ul li:before, .kl_ms1_light #kl_activities2 ul li:before, .kl_ms1_light #kl_readings2 ul li:before, .kl_ms1_light #kl_assignments2 ul li:before { content:none; } /*list: ordered list*/ .kl_ms1_light #kl_objectives2 ol, .kl_ms1_light #kl_activities2 ol, .kl_ms1_light #kl_readings2 ol, .kl_ms1_light #kl_assignments2 ol { margin:0px 0px 40px 0px; list-style: none; padding:0px; counter-reset: my-awesome-counter; } .kl_ms1_light #kl_objectives2 ol li, .kl_ms1_light #kl_activities2 ol li, .kl_ms1_light #kl_readings2 ol li, .kl_ms1_light #kl_assignments2 ol li { background-color:var(--dt-color-light-2); counter-increment: my-awesome-counter; padding:20px; margin: 5px 80px; } .kl_ms1_light #kl_objectives2 ol li:before, .kl_ms1_light #kl_activities2 ol li:before, .kl_ms1_light #kl_readings2 ol li:before, .kl_ms1_light #kl_assignments2 ol li:before { content: counter(my-awesome-counter) ""; border: 0px; text-align: center; color: var(--dt-color-light-1); font-weight: bold; font-size: 24px; width:20px; display:inline-block; background-color:var(--dt-color-primary); padding:0px 10px; margin-left:-40px; margin-right:20px; } /*list: media queries*/ @media (max-width: 800px) { .kl_ms1_light ul, .kl_ms1_light ol { margin:0px 20px 20px 20px; } .kl_ms1_light #kl_objectives2 ul, .kl_ms1_light #kl_activities2 ul, .kl_ms1_light #kl_readings2 ul, .kl_ms1_light #kl_assignments2 ul, .kl_ms1_light #kl_objectives2 ol, .kl_ms1_light #kl_activities2 ol, .kl_ms1_light #kl_readings2 ol, .kl_ms1_light #kl_assignments2 ol { margin:0px 0px 20px 0px; } .kl_ms1_light #kl_objectives2 ol li, .kl_ms1_light #kl_activities2 ol li, .kl_ms1_light #kl_readings2 ol li, .kl_ms1_light #kl_assignments2 ol li { padding:10px 10px 10px 30px; margin: 5px 40px; } .kl_ms1_light #kl_objectives2 ol li:before, .kl_ms1_light #kl_activities2 ol li:before, .kl_ms1_light #kl_readings2 ol li:before, .kl_ms1_light #kl_assignments2 ol li:before { margin-right:10px; margin-left:-50px; } .kl_ms1_light #kl_objectives2 ul li, .kl_ms1_light #kl_activities2 ul li, .kl_ms1_light #kl_readings2 ul li, .kl_ms1_light #kl_assignments2 ul li { padding: 10px 20px; margin: 5px 40px; } .kl_ms1_light h3 .fa, .kl_ms1_light h3 .fas, .kl_ms1_light h3 .far, .kl_ms1_light h3 .fal, .kl_ms1_light h3 .fad, .kl_ms1_light h3 .fab, .kl_ms1_light h2 .fa, .kl_ms1_light h2 .fas, .kl_ms1_light h2 .far, .kl_ms1_light h2 .fal, .kl_ms1_light h2 .fad, .kl_ms1_light h2 .fab { display:none; } } /*---navigation---*/ /*nav: wrapper*/ .kl_ms1_light #kl_navigation ul { background-color: var(--dt-color-secondary); width:100%; margin:0px; display:table; } /*nav: bullets*/ .kl_ms1_light #kl_navigation ul li { background-color:var(--dt-color-secondary); list-style-type: none; width:25%; padding:10px 20px; display:table-cell; } .kl_ms1_light #kl_navigation ul li a, .kl_ms1_light #kl_navigation ul li a:visited, .kl_ms1_light #kl_navigation ul li a:active { color:var(--dt-color-light-1); font-weight:900; } .kl_ms1_light #kl_navigation ul li:hover { background-color:var(--dt-color-primary); } .kl_ms1_light #kl_navigation ul li a:hover { text-decoration:none; } /*nav: icons*/ .kl_ms1_light #kl_navigation .fa, .kl_ms1_light #kl_navigation .fab, .kl_ms1_light #kl_navigation .fad, .kl_ms1_light #kl_navigation .fal, .kl_ms1_light #kl_navigation .far, .kl_ms1_light #kl_navigation .fas { padding-right:10px; } /*----buttons---*/ /*button inert style*/ .kl_ms1_light .bs-btn-primary { background-color:var(--dt-color-primary) !important; color:var(--dt-color-light-1) !important; border:0px; margin-right:20px; margin-bottom:5px; } /*button hover style*/ .kl_ms1_light .bs-btn-primary:hover { background-color:var(--dt-color-primary) !important; color:var(--dt-color-light-1) !important; border:0px; } /*button icons*/ .kl_ms1_light .bs-btn-primary .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*-----accordion-----*/ /*accordion container*/ .kl_ms1_light .kl_panels_accordion, .kl_ms1_light .kl_panels_expander { margin:0px 40px 40px 40px; } /*accordion button*/ .kl_ms1_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms1_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms1_light .kl_panels_expander.ui-accordion .ui-accordion-header a, .kl_ms1_light .kl_panels_expander.ui-accordion .ui-accordion-header a { padding:20px 40px !important; background-color:var(--dt-color-light-1); border:1px solid var(--dt-color-light-3); border-left:20px solid var(--dt-color-primary); } /*accordion icons*/ .kl_ms1_light .kl_panel_heading .ui-accordion-tab .fa, .kl_ms1_light .kl_panel_heading .fas, .kl_ms1_light .kl_panel_heading .far, .kl_ms1_light .kl_panel_heading .fal, .kl_ms1_light .kl_panel_heading .fad, .kl_ms1_light .kl_panel_heading .fab { position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; } /*inactive accordion styling*/ .kl_ms1_light .kl_panels_wrapper .ui-accordion-header, .kl_ms1_light .kl_wrapper .ui-accordion-header { background-color:var(--dt-color-light-3); } /*inactive accordion link color*/ .kl_ms1_light .ui-accordion .ui-state-default a, .kl_ms1_light .ui-accordion .ui-state-default a:link, .kl_ms1_light .ui-accordion .ui-state-default a:visited { color:var(--dt-color-dark-3); font-weight:900; } /*inactive accordion link hover*/ .kl_ms1_light .ui-accordion .ui-state-default a:hover, { color:var(--dt-color-light-2); font-weight:900; } /*active accordion*/ .kl_ms1_light .kl_panels_wrapper.ui-accordion .ui-accordion-header.ui-state-default.ui-state-active, .kl_ms1_light .kl_wrapper .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active { background-color:var(--dt-color-primary); } /*active accordion/expander: link*/ .kl_ms1_light .ui-accordion .ui-state-active a, .kl_ms1_light .ui-accordion .ui-state-active a:link, .kl_ms1_light .ui-accordion .ui-state-active a:visited { color:var(--dt-color-light-1); background-color:var(--dt-color-primary); font-weight:900; } /*accordion panel*/ .kl_ms1_light .kl_panels_wrapper.ui-accordion .ui-accordion-content { padding-top:40px; } /*inactive accordion ui icons*/ .kl_ms1_light .ui-state-default .ui-icon, .kl_ms1_light .ui-progressbar .ui-widget-header .ui-icon { margin-left:20px; background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_222222_256x240-a2c05c5e96.png"); } /*active accordion ui icons*/ .kl_ms1_light .ui-state-active .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*accordion media queries*/ @media (max-width: 800px) { .kl_ms1_light .kl_panels_accordion, .kl_ms1_light .kl_panels_expander { margin:0px 20px 20px 20px; } /*accordion button*/ .kl_ms1_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms1_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms1_light .kl_panels_expander.ui-accordion .ui-accordion-header a, .kl_ms1_light .kl_panels_expander.ui-accordion .ui-accordion-header a { font-size:18px; padding:10px 20px !important; border:1px solid var(--dt-color-light-3); border-left:20px solid var(--dt-color-primary); } } /*-----tabs-----*/ /*styling for tab blocks-add necessary items*/ .kl_ms1_light .ui-tabs { margin:0px 40px; } /*all tabs: properties*/ .kl_ms1_light .ui-tabs .ui-tabs-nav li { min-width:150px; } /*all tabs: links*/ /*active tab:links*/ .kl_ms1_light .ui-tabs .ui-tabs-nav li.ui-tabs-active a { font-weight:900; width:100%; text-align:center; color:var(--dt-color-dark-3); } .kl_ms1_light .ui-tabs .ui-tabs-nav li.ui-tabs-active a:hover { color:var(--dt-color-primary); } /*tab icons*/ .kl_ms1_light .ui-tabs-nav .fa, .kl_ms1_light .ui-tabs-nav .fas, .kl_ms1_light .ui-tabs-nav .far, .kl_ms1_light .ui-tabs-nav .fal, .kl_ms1_light .ui-tabs-nav .fad, .kl_ms1_light .ui-tabs-nav .fab, .kl_ms1_light .ui-tabs-nav .icon-instructure { display:flex; align-content: center; justify-content: center; padding:10px; font-size:18px; } /*active tab: positining for bottom border overlap*/ .kl_ms1_light .ui-tabs .ui-tabs-nav li.ui-tabs-active { background-color:var(--dt-color-light-1); border:1px solid var(--dt-color-light-3); border-top:10px solid var(--dt-color-primary); top:3px; } /*inactive tab: links*/ .kl_ms1_light .ui-tabs .ui-tabs-nav li a { font-weight:900; width:100%; text-align:center; color:var(--dt-color-light-1); } .kl_ms1_light .ui-tabs .ui-tabs-nav li a:hover { color:var(--dt-color-light-2); } /*inactive tab: background and border color*/ .kl_ms1_light .kl_panel_heading.ui-widget-header .ui-state-default, .kl_ms1_light .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) { background-color:var(--dt-color-primary); border:0px; border-top:10px solid var(--dt-color-primary); margin-bottom:3px; top:3px; } /*inactive tab: border*/ .kl_ms1_light .ui-state-default, .kl_ms1_light .ui-widget-header .ui-state-default { border:0px; } /*active panel: border thickness*/ .kl_ms1_light .ui-widget-content { border:1px solid var(--dt-color-light-3); background-color:var(--dt-color-light-1); } /*active panel: top border thickness*/ .kl_ms1_light .ui-tabs .ui-tabs-nav { border:0px; } /*tab: corners*/ .kl_ms1_light .ui-corner-all, .kl_ms1_light .ui-corner-top, .ui-corner-right, .kl_ms1_light .ui-corner-tr { border-radius:0px; } .kl_ms1_light .ui-corner-all, .kl_ms1_light .ui-corner-top, .kl_ms1_light .ui-corner-left, .kl_ms1_light .ui-corner-tl { border-radius:0px; } /*tabs: panel contents*/ .kl_ms1_light .ui-tabs .ui-tabs-panel { padding-top: 40px; } @media (max-width: 800px) { .kl_ms1_light .ui-tabs { margin:0px 20px; } .kl_ms1_light .ui-tabs .ui-tabs-nav li { min-width:0px; } } /*-----banner-----*/ .kl_ms1_light #kl_banner { background-color: var(--dt-color-primary) !important; color: var(--dt-color-light-1); padding-bottom:0px; } /*banner: number block*/ .kl_ms1_light #kl_banner_left { display:inline-block; position:absolute; top:40px; left:-20px; background-color:var(--dt-color-dark-1); text-align:center; padding:10px 40px; } /*banner: title block*/ .kl_ms1_light #kl_banner_right { display:inline-block; padding: 20px 40px; padding-bottom: 23px; padding-top: 23px; background-color:var(--dt-color-primary); width:100%; border-top:5px solid var(--dt-color-light-1); } .kl_ms1_light #kl_banner h2 { padding-top:0px; padding-bottom:0px; margin:0px; position:inherit; } .kl_ms1_light #kl_banner2 { background-color: var(--dt-color-secondary); padding-top: 1px; padding-bottom: 1px; } .kl_ms1_light #kl_description { background-color:var(--dt-color-dark-3); margin-top:0px; margin-bottom:0px; color:var(--dt-color-light-1); padding:10px 20px; } .kl_ms1_light .kl_mod_text, .kl_ms1_light .kl_mod_num { font-size:36px; } @media (max-width: 800px) { .kl_ms1_light #kl_banner_left { top:20px; left:-20px; padding:0px 20px 10px 20px; } .kl_ms1_light #kl_banner_right { display:inline-block; padding: 10px 20px; } .kl_ms1_light .kl_mod_text, .kl_ms1_light .kl_mod_num { font-size:18px; } } /*banner: banner image*/ .kl_ms1_light #kl_banner_image { margin:0px; width:100%; height:auto; padding-bottom:0px; } /*---tables---*/ /*table: overall*/ .kl_ms1_light .table-bordered, .kl_ms1_light .ic-Table { display:table; width:calc(100% - 80px) !important; margin:0px 40px !important; } /*ic table: headers*/ .kl_ms1_light .ic-Table.ic-Table--striped th, .kl_ms1_light .table th { background-color:var(--dt-color-secondary); color:var(--dt-color-light-1); width:100%; } @media (max-width: 800px) { .kl_ms1_light .table-bordered, .kl_ms1_light .ic-Table { margin:0px 20px !important; } } /*---progress bar-icon versiona---*/ /*progress bar: wrapper*/ .kl_ms1_light .kl_progress_icons { background-color:var(--dt-color-secondary); padding:20px; } /*progress bar: main bar*/ .kl_ms1_light .kl_complete { border:0px; } /*progress bar: completed*/ .kl_ms1_light .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_ms1_light .kl_progress_icons li.kl_current .kl_colored_bar { background-color:var(--dt-color-primary); } /*---progress bar-standard version---*/ /*progress bar: bg color*/ .kl_ms1_light .kl_progress-bar { background-color:var(--dt-color-primary) !important; } .kl_ms1_light .kl_progress_icons ul li { border:0px; } .kl_ms1_light .kl_progress_icons li a { top:-1px; right:3px; border:5px solid var(--dt-color-light-1); } .kl_ms1_light .kl_progress_icons li i { display:flex; align-items: center; justify-content: center; } .kl_ms1_light .kl_progress_icons li .kl_colored_bar { border:0px; } /*---specific blocks---*/ /*introduction text*/ .kl_ms1_light .kl_subtitle { background-color:var(--dt-color-primary); color:var(--dt-color-light-1); margin-top:0px; padding-bottom:0px; font-weight:900; } .kl_ms1_light #kl_introduction { margin-top:40px; } .kl_ms1_light #kl_introduction p, .kl_ms1_light .main p { font-size:18pt; } /*objectives block*/ /*assignments block*/ /*assignments;unorderd list*/ /*assignments: table*/ .kl_ms1_light #kl_assignments2 table { margin:0px 80px; width:calc(100% - 160px); } .kl_ms1_light #kl_assignments2 table, .kl_ms1_light #kl_assignments2 th, .kl_ms1_light #kl_assignments2 td { border: 1px solid var(--dt-color-dark-2); } .kl_ms1_light #kl_assignments2 th { margin-top:0px; padding:10px 20px; background-color:var(--dt-color-secondary-darkened-10); } .kl_ms1_light #kl_assignments2 td:nth-child(1) { font-family:Lato, sans-serif; font-weight:900; width:10%; background-color:var(--dt-color-primary); padding:20px; text-align:center; font-size:36px; color:var(--dt-color-light-1); } .kl_ms1_light #kl_assignments2 td:nth-child(2) { background-color:var(--dt-color-light-2); padding:20px; font-size:24px; } @media (max-width: 800px) { .kl_ms1_light #kl_assignments2 table { margin:0px 20px; width:calc(100% - 40px); } .kl_ms1_light #kl_assignments2 td:nth-child(1) { font-size:24px; padding:10px; } .kl_ms1_light #kl_assignments2 td:nth-child(2) { background-color:var(--dt-color-light-2); padding:10px; font-size:18px; } } /*quick check block*/ .kl_ms1_light .kl_quick_check, .kl_ms1_light .problem, .kl_ms1_light #Welcome_Letter { margin:20px 40px !important; position: relative; border:1px solid var(--dt-color-light-3) !important; border-left:20px solid var(--dt-color-primary) !important; background-color: var(--dt-color-light-1); padding: 40px 40px 0px 40px !important; } .kl_ms1_light .kl_quick_check h3, .kl_ms1_light .kl_quick_check h4 { background-color:transparent; margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:20px; padding:0px; background-image:none; color:var(--dt-color-dark-3); } .kl_ms1_light .kl_quick_check p { margin:0px 0px 20px 0px; } .kl_ms1_light .kl_quick_check h3 .fa, .kl_ms1_light .kl_quick_check h3 .fas, .kl_ms1_light .kl_quick_check h3 .far, .kl_ms1_light .kl_quick_check h3 .fal, .kl_ms1_light .kl_quick_check h3 .fad, .kl_ms1_light .kl_quick_check h3 .fab { background-color:var(--dt-color-primary); color:var(--dt-color-light-1); height:40px; width:40px; margin-left:0px; margin-right:20px; border:0px; } .kl_ms1_light .kl_quick_check h4 .fa, .kl_ms1_light .kl_quick_check h4 .fas, .kl_ms1_light .kl_quick_check h4 .far, .kl_ms1_light .kl_quick_check h4 .fal, .kl_ms1_light .kl_quick_check h4 .fad, .kl_ms1_light .kl_quick_check h4 .fab { margin-left:0px; } .kl_ms1_light .kl_quick_check_response { background-color:var(--dt-color-light-1) !important; } /*instruction block*/ .kl_ms1_light #kl_instructions { background-color: var(--dt-color-light-3); color: #ffffff; padding: 20px 40px; margin-top: 20px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_ms1_light #kl_instructions ol, .kl_ms1_light #kl_instructions ul { margin-top:20px; margin-left:20px; padding:0px; } .kl_ms1_light #kl_instructions p { margin:0px 0px 20px 0px; padding:0px; } /*video block*/ .kl_ms1_light iframe { display:block !important; margin-left:auto; margin-right:auto; margin-bottom:40px; border:5px solid var(--dt-color-dark-2); } /*instructions block*/ .kl_ms1_light #kl_instructions { background-color: var(--dt-color-light-3); color: var(--dt-color-dark-1); padding: 40px 40px 20px 40px; margin: 0px 40px 40px 40px; } .kl_ms1_light #kl_instructions h3 { margin:0px 0px 10px 40px; padding:0px; background-image:none; background-color:transparent; } .kl_ms1_light #kl_instructions h3 .fa, .kl_ms1_light #kl_instructions h3 .fas, .kl_ms1_light #kl_instructions h3 .far, .kl_ms1_light #kl_instructions h3 .fal, .kl_ms1_light #kl_instructions h3 .fad, .kl_ms1_light #kl_instructions h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; } /*footer block*/ .kl_ms1_light .kl_user_details p { margin:0px 20px; font-size:14px; color:var(--dt-color-light-1); } .kl_ms1_light .kl_user_details a, .kl_ms1_light .kl_user_details a:visited, .kl_ms1_light .kl_user_details a:active { color:var(--dt-color-light-1); } .kl_ms1_light .kl_user_details a:hover { color:var(--dt-color-light-3); text-decoration:none !important; } .kl_ms1_light .kl_user_details { background-color:var(--dt-color-primary); padding:20px 40px; background-image:url('https://www.mtsac.edu/studio13/images/mtsac-logo-white.png'); background-position:calc(100% - 40px); background-repeat:no-repeat; background-size: 152px 100px; margin:0px; } @media (max-width: 800px) { .kl_ms1_light .kl_user_details { background-image:none; } } /*---module list---*/ .kl_ms1_light #kl_modules { background-color:var(--dt-color-light-3); } .kl_ms1_light #kl_modules>ul li a { color:var(--dt-color-dark-1) !important; } .kl_ms1_light #kl_modules>ul li a:hover { color:var(--dt-color-dark-3) !important; } /*---snippets---*/ /*bootstrap snippets*/ .kl_ms1_light .bs-container { margin:0px 40px 40px 40px; width:calc(100% - 80px); padding:0px; } .kl_ms1_light .bs-container p { margin:0px 10px 20px 10px; } .kl_ms1_light blockquote { margin:0px 40px; } .kl_ms1_light .kl_code_highlight { margin:0px 40px; } .kl_ms1_light .bs-callout-primary { margin:15px 40px; } .kl_ms1_light .kl_message_block { margin:15px 40px !important; } @media (max-width: 800px) { .kl_ms1_light .bs-container { margin:0px 15px 20px 15px; } .kl_ms1_light blockquote { margin:0px 20px; } .kl_ms1_light .kl_code_highlight { margin:0px 20px; } } /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------MTSAC 1 LIGHT THEME END---------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------MTSAC 2 LIGHT THEME START------------------------------------------- Version: 2020.08.20:03:44pm ----------------------------------------------------------------------------------- Insert description of theme here: this is a theme produced for the Graphic Design (ARTC) program ------------- ------------------------------------------------------------------------------------------------------------*/ /*---font imports---*/ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap'); /*---brand colors---*/ /*This changes the colors for institution items items like links.*/ .kl_ms2_light { /*primary colors for theme*/ --dt-color-primary: #862633; /*primary:maroon*/ --dt-color-primary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-primary-dark-text: var(--dt-color-light-2); /*light gray*/ --dt-color-primary-darkened-5: #6cac1d; /*5% darker*/ --dt-color-primary-darkened-10: #5e9e05; /*10% darker*/ --dt-color-primary-darkened-15: #519100; /*15% darker*/ --dt-color-primary-lightened-5: #88c73d; /*5% lighter*/ --dt-color-primary-lightened-10: #96d54b; /*10% lighter*/ --dt-color-primary-lightened-15: #96d54b; /*15% lighter*/ /*secondary colors for theme*/ --dt-color-secondary: var(--dt-color-dark-3); /*secondary:dark gray*/ --dt-color-secondary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-secondary-dark-text: var(--dt-color-light-2);/*light gray*/ --dt-color-secondary-darkened-5: #595959; /*5% darker*/ --dt-color-secondary-darkened-10: #4e4e4e; /*10% darker*/ --dt-color-secondary-darkened-15: #424242; /*15% darker*/ --dt-color-secondary-lightened-5: #727272; /*5% lighter*/ --dt-color-secondary-lightened-10: #7f7f7f; /*10% lighter*/ --dt-color-secondary-lightened-15: #8b8b8b; /*15% lighter*/ /*accent colors*/ --dt-color-accent: #4C5360; --dt-color-accent-contrast: var(--dt-color-light-1); /*gray background colors*/ --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: var(--dt-color-dark-1); /*tabs*/ --dp-tabs-nav-bg:#474747; --dp-tabs-nav-bg-text:var(--dt-color-light-1); --dp-tabs-nav-dark-text:#474747; --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); /*brand colors*/ --ic-brand-primary:var(--dt-color-primary);/*primary color - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-5:var(--dt-color-primary-darkened-5); /*5% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-10:var(--dt-color-primary-darkened-10); /*10% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-15:var(--dt-color-primary-darkened-15); /*15% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-5:var(--dt-color-primary-lightened-5); /*5% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-10:var(--dt-color-primary-lightened-10); /*10% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-15:var(--dt-color-primary-lightened-15); /*15% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ /*secondary colors*/ --ic-brand-secondary:var(--dt-color-secondary);/*primary color - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-5:var(--dt-color-secondary-darkened-5); /*5% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-10:var(--dt-color-secondary-darkened-10); /*10% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-15:var(--dt-color-secondary-darkened-15); /*15% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-5:var(--dt-color-secondary-lightened-5); /*5% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-10:var(--dt-color-secondary-lightened-10); /*10% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-15:var(--dt-color-secondary-lightened-15); /*15% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ /*brand primary button colors*/ --ic-brand-button-primary-bgd:var(--dt-color-primary); --ic-brand-button-primary-text:var(--dt-color-light-1); --ic-brand-button-primary-bgd-darkened-5:var(--dt-color-primary-darkened-5); --ic-brand-button-primary-bgd-darkened-15:var(--dt-color-primary-darkened-15); /*brand secondary button colors*/ --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text:var(--dt-color-light-1); --ic-brand-button-secondary-bgd-darkened-5:var(--dt-color-secondary-darkened-5); --ic-brand-button-secondary-bgd-darkened-15:var(--dt-color-secondary-darkened-15); /*brand font colors*/ --ic-brand-font-color-dark: #2D3B45; --ic-brand-font-color-dark-lightened-15: #4C5860; --ic-brand-font-color-dark-lightened-30: #6C757C; /*links*/ --ic-link-color: var(--dt-color-dark-3); /*non-hover color*/ --ic-link-color-darkened-10: var(--dt-color-dark-2); /*hover:10% darker*/ --ic-link-color-lightened-10: var(--dt-color-dark-1); /*hover:10% lighter*/ /*buttons*/ --ic-brand-button-primary-bgd: var(--dt-color-primary); --ic-brand-button-primary-text: var(--dt-color-light-1); --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text: var(--dt-color-light-1); /*other global colors*/ --dt-black-transparency:rgba(0,0,0,0.65); --dt-color-light-1:#FFFFFF; --dt-color-light-2:#f0f0f0; --dt-color-light-3:#eeeeee; --dt-color-light-4:#d9d9d9; --dt-color-dark-3:#333333; --dt-color-dark-2:#666666; --dt-color-dark-1:#000000; } /*-----global-----*/ /*container and general styles*/ .kl_ms2_light { background-color:var(--dt-color-light-1); border:1px solid var(--dt-color-light-4); max-width: 1102px; height: 100%; font-family: lato, sans-serif; font-size: 18px; color: var(--dt-color-dark-3); text-align: left; position: relative; margin-bottom:20px; } .kl_ms2_light p, .kl_ms2_light li, .kl_ms2_light td { color:var(--dt-color-dark-3); font-family: lato, sans-serif; } .kl_ms2_light p, .kl_ms2_light h4, .kl_ms2_light h5, .kl_ms2_light h6 { margin:0px 0px 20px 0px; } .kl_ms2_light > div { margin:0px 40px 40px; } /*div media query*/ @media (max-width: 800px) { .kl_ms2_light > div { margin:0px 20px 20px; } } /*---links---*/ .kl_ms2_light a:hover { text-decoration:none !important; } .kl_ms2_light a.external:hover span, .kl_ms2_light a.external:focus span, .kl_ms2_light a.external:active span { text-decoration:none; } /*---headings---*/ /*heading styles for every type of block available*/ .kl_ms2_light h2, .kl_ms2_light h3, .kl_ms2_light h4, .kl_ms2_light h5, .kl_ms2_light h6 { font-family: Oswald, sans-serif; font-weight: 400 !important; position: relative; } .kl_ms2_light h3 { color: var(--dt-color-primary); font-size: 28px; padding:20px 0px; margin: 0px 0px 20px 0px; background-repeat:no-repeat; background-position:top right; background-size: 20%; border-bottom:1px solid var(--dt-color-light-4); } .kl_ms2_light h4 { color:var(--dt-color-primary); margin-top:40px; margin-bottom:20px; } .kl_ms2_light h5 { color: var(--dt-color-dark-3); } .kl_ms2_light h6 { color: var(--dt-color-primary); } @media (max-width: 800px) { .kl_ms2_light h2 { font-size: 24px; } .kl_ms2_light h3 { font-size: 21px; padding:10px 0px } } /*---heading icons---*/ /*font awesome icon styles within h3 heading tags*/ .kl_ms2_light h3 .fa, .kl_ms2_light h3 .fas, .kl_ms2_light h3 .far, .kl_ms2_light h3 .fal, .kl_ms2_light h3 .fad, .kl_ms2_light h3 .fab, .kl_ms2_light h2 .fa, .kl_ms2_light h2 .fas, .kl_ms2_light h2 .far, .kl_ms2_light h2 .fal, .kl_ms2_light h2 .fad, .kl_ms2_light h2 .fab { color: var(--dt-color-primary); display: inline-flex; align-items: center; justify-content: left; position: relative; margin-top: -8px; margin-bottom: -8px; margin-right:20px; } /*---list types---*/ /*list: unordered list*/ .kl_ms2_light #kl_objectives2 ul, .kl_ms2_light #kl_activities2 ul, .kl_ms2_light #kl_readings2 ul, .kl_ms2_light #kl_assignments2 ul { margin:0px 0px 40px 0px; padding:0px; list-style-type: none; } .kl_ms2_light #kl_objectives2 ul li, .kl_ms2_light #kl_activities2 ul li, .kl_ms2_light #kl_readings2 ul li, .kl_ms2_light #kl_assignments2 ul li { margin: 0px; display:flex; padding:10px; } .kl_ms2_light #kl_objectives2 ul li:before, .kl_ms2_light #kl_activities2 ul li:before, .kl_ms2_light #kl_readings2 ul li:before, .kl_ms2_light #kl_assignments2 ul li:before { content: "\25A0"; color: var(--dt-color-primary) !important; font-weight: bold; display: inline-block; width: 60px; margin-left: -10px; margin-right:-10px; font-size:80px; line-height:18px; } /*list: ordered list*/ .kl_ms2_light #kl_objectives2 ol, .kl_ms2_light #kl_activities2 ol, .kl_ms2_light #kl_readings2 ol, .kl_ms2_light #kl_assignments2 ol { margin:0px 0px 40px 0px; list-style: none; padding:0px; counter-reset: my-awesome-counter; } .kl_ms2_light #kl_objectives2 ol li, .kl_ms2_light #kl_activities2 ol li, .kl_ms2_light #kl_readings2 ol li, .kl_ms2_light #kl_assignments2 ol li { counter-increment: my-awesome-counter; padding:10px; margin: 0px 0px 0px 40px; } .kl_ms2_light #kl_objectives2 ol li:before, .kl_ms2_light #kl_activities2 ol li:before, .kl_ms2_light #kl_readings2 ol li:before, .kl_ms2_light #kl_assignments2 ol li:before { content: counter(my-awesome-counter) ""; border: 0px; text-align: center; color: var(--dt-color-light-1); font-weight: bold; font-size: 18px; display:inline-block; background-color:var(--dt-color-primary); padding:0px 10px; margin-left:-40px; margin-right:10px; } @media (max-width: 800px) { .kl_ms2_light #kl_objectives2 ul li:before, .kl_ms2_light #kl_activities2 ul li:before, .kl_ms2_light #kl_readings2 ul li:before, .kl_ms2_light #kl_assignments2 ul li:before { margin-right:5px; } .kl_ms2_light #kl_objectives2 ul, .kl_ms2_light #kl_activities2 ul, .kl_ms2_light #kl_readings2 ul, .kl_ms2_light #kl_assignments2 ul, .kl_ms2_light #kl_objectives2 ol, .kl_ms2_light #kl_activities2 ol, .kl_ms2_light #kl_readings2 ol, .kl_ms2_light #kl_assignments2 ol { margin:0px 0px 20px 0px; } .kl_ms2_light #kl_objectives2 ul li, .kl_ms2_light #kl_activities2 ul li, .kl_ms2_light #kl_readings2 ul li, .kl_ms2_light #kl_assignments2 ul li, .kl_ms2_light #kl_objectives2 ol li, .kl_ms2_light #kl_activities2 ol li, .kl_ms2_light #kl_readings2 ol li, .kl_ms2_light #kl_assignments2 ol li { padding:0px; } } /*---navigation---*/ /*nav: wrapper*/ .kl_ms2_light #kl_navigation { padding:0px; margin:40px 0px; } .kl_ms2_light #kl_navigation ul { background-color: var(--dt-color-primary); width:100%; display:table; margin:0px; } /*nav: bullets*/ .kl_ms2_light #kl_navigation ul li { background-color:var(--dt-color-primary); list-style-type: none; width:25%; padding:10px 20px; display:table-cell; } .kl_ms2_light #kl_navigation ul li a, .kl_ms2_light #kl_navigation ul li a:visited, .kl_ms2_light #kl_navigation ul li a:active { color:var(--dt-color-light-1); font-weight: 400; } .kl_ms2_light #kl_navigation ul li:hover { background-color:var(--dt-color-secondary); } .kl_ms2_light #kl_navigation ul li a:hover { text-decoration:none; } /*nav: icons*/ .kl_ms2_light #kl_navigation .fa, .kl_ms2_light #kl_navigation .fab, .kl_ms2_light #kl_navigation .fad, .kl_ms2_light #kl_navigation .fal, .kl_ms2_light #kl_navigation .far, .kl_ms2_light #kl_navigation .fas { padding-right:10px; } /*nav: media query*/ @media (max-width: 800px) { .kl_ms2_light #kl_navigation ul li { display:inline-block; width:100%; } } /*----buttons---*/ .kl_ms2_light .bs-btn-primary { background-color:var(--dt-color-primary) !important; color:var(--dt-color-light-1) !important; border:0px; margin-right:20px; margin-bottom:5px; } .kl_ms2_light .bs-btn-primary:hover { background-color:var(--dt-color-secondary) !important; color:var(--dt-color-light-1) !important; border:0px; } .kl_ms2_light .bs-btn-primary .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*-----accordion-----*/ /*accordion and expander link style*/ .kl_ms2_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms2_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms2_light .kl_panels_expander.ui-accordion .ui-accordion-header a, .kl_ms2_light .kl_panels_expander.ui-accordion .ui-accordion-header a { padding:20px 50px !important; font-family:lato, sans-serif; font-weight:bold !important; font-size:14pt; } /*inactive accordion styling*/ .kl_ms2_light .kl_panels_wrapper .ui-accordion-header, .kl_ms2_light .kl_wrapper .ui-accordion-header { background-color:var(--dt-color-light-3); } /*active accordion styling*/ .kl_ms2_light .kl_panels_wrapper.ui-accordion .ui-accordion-header.ui-state-default.ui-state-active, .kl_ms2_light .kl_wrapper .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active { background-color:var(--dt-color-dark-2); } /*inactive accordion link color*/ .kl_ms2_light .ui-accordion .ui-state-default a, .kl_ms2_light .ui-accordion .ui-state-default a:link, .kl_ms2_light .ui-accordion .ui-state-default a:visited { color:var(--dt-color-dark-3); font-weight:400; } /*inactive accordion link hover*/ .kl_ms2_light .ui-accordion .ui-state-default a:hover, { color:var(--dt-color-light-2); font-weight:400; } /*inactive accordion ui icons*/ .kl_ms2_light .ui-state-default .ui-icon, .kl_ms2_light .ui-progressbar .ui-widget-header .ui-icon { margin-left:10px; background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_222222_256x240-a2c05c5e96.png"); } /*active accordion ui icons*/ .kl_ms2_light .ui-state-active .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*active accordion/expander: link*/ .kl_ms2_light .ui-accordion .ui-state-active a, .kl_ms2_light .ui-accordion .ui-state-active a:link, .kl_ms2_light .ui-accordion .ui-state-active a:visited { color:var(--dt-color-light-1); font-weight:400; } /*accordion panel*/ .kl_ms2_light .kl_panels_wrapper.ui-accordion .ui-accordion-content { padding:40px 60px 20px 60px; } /*-----tabs-----*/ /*styling for tab blocks-add necessary items*/ .kl_ms2_light .ui-tabs { margin:0px; } /*all tabs: properties*/ .kl_ms2_light .ui-tabs .ui-tabs-nav li { min-width:150px; } /*all tabs: links*/ /*active tab:links*/ .kl_ms2_light .ui-tabs .ui-tabs-nav li.ui-tabs-active a { font-weight:900; width:100%; text-align:center; color:var(--dt-color-dark-3); } .kl_ms2_light .ui-tabs .ui-tabs-nav li.ui-tabs-active a:hover { color:var(--dt-color-primary); } /*active tab: positining for bottom border overlap*/ .kl_ms2_light .ui-tabs .ui-tabs-nav li.ui-tabs-active { background-color:var(--dt-color-light-2); border:0px; top:3px; } /*inactive tab: links*/ .kl_ms2_light .ui-tabs .ui-tabs-nav li a { font-weight:900; width:100%; text-align:center; color:var(--dt-color-light-1); } .kl_ms2_light .ui-tabs .ui-tabs-nav li a:hover { color:var(--dt-color-light-2); } /*inactive tab: background and border color*/ .kl_ms2_light .kl_panel_heading.ui-widget-header .ui-state-default, .kl_ms2_light .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) { background-color:var(--dt-color-primary); border:0px; margin-bottom:3px; top:3px; } /*inactive tab: border*/ .kl_ms2_light .ui-state-default, .kl_ms2_light .ui-widget-header .ui-state-default { border:0px; } /*active panel: border thickness*/ .kl_ms2_light .ui-widget-content { border:0px; border-top:0px; background-color:var(--dt-color-light-2); } /*active panel: top border thickness*/ .kl_ms2_light .ui-tabs .ui-tabs-nav { border:0px; } /*tab: corners*/ .kl_ms2_light .ui-corner-all, .kl_ms2_light .ui-corner-top, .ui-corner-right, .kl_ms2_light .ui-corner-tr { border-radius:0px; } .kl_ms2_light .ui-corner-all, .kl_ms2_light .ui-corner-top, .kl_ms2_light .ui-corner-left, .kl_ms2_light .ui-corner-tl { border-radius:0px; } /*tabs: panel contents*/ .kl_ms2_light .ui-tabs .ui-tabs-panel { padding:40px; margin:0px 0px 40px 0px; } @media (max-width: 800px) { /*all tabs: properties*/ .kl_ms2_light .ui-tabs .ui-tabs-nav li { min-width:0px; } } /*-----banner-----*/ .kl_ms2_light #kl_banner { background-color: var(--dt-color-primary) !important; color: var(--dt-color-light-1); margin:0px; } /*banner: title block*/ .kl_ms2_light #kl_banner_right { display:inline-block; padding: 20px 40px; } .kl_ms2_light #kl_banner h2 { padding-top:0px; padding-bottom:0px; margin:0px; position:inherit; } .kl_ms2_light #kl_description { background-color:var(--dt-color-dark-3); margin-top:0px; margin-bottom:0px; color:var(--dt-color-light-1); padding:10px 20px; } .kl_ms2_light .kl_mod_text { font-size:36px; display:block; text-align:center; width:100%; } /*banner: number block*/ .kl_ms2_light #kl_banner_left { display:inline-block; position:absolute; top:0px; left:40px; width:200px; background-color:var(--dt-black-transparency); display:flex !important; flex-wrap:wrap; align-items: center; justify-content: center; padding:20px; } .kl_ms2_light .kl_mod_num { font-size:96px; line-height:96px; font-weight:900; display:block; text-align:center; width:100%; } .kl_ms2_light #kl_banner_right { background-color:var(--dt-color-primary); width:100%; border-top:5px solid var(--dt-color-light-1); } @media (max-width: 800px) { .kl_ms2_light .kl_mod_text { font-size:18px; } .kl_ms2_light #kl_banner_left { width:20%; left:20px; padding:10px; font-size:18px; } .kl_ms2_light .kl_mod_num { font-size:36px; line-height:36px; } .kl_ms2_light #kl_banner_right { display:inline-block; padding: 10px 20px; } } /*banner: banner image*/ .kl_ms2_light #kl_banner_image { margin:0px; width:100%; height:auto; } /*---tables---*/ /*table: overall*/ .kl_ms2_light .table-bordered, .kl_ms2_light .ic-Table { display:table; width:100%; margin:0px 0px 40px 0px !important; overflow:visible; } .kl_ms2_light .table-bordered td, .kl_ms2_light .ic-Table td { padding:5px !important; } /*table: media query*/ @media (max-width: 800px) { .kl_ms2_light .table-bordered, .kl_ms2_light .ic-Table { margin:0px !important; } } /*ic table: headers*/ .kl_ms2_light .ic-Table.ic-Table--striped th, .kl_ms2_light .table th { background-color:var(--dt-color-secondary); color:var(--dt-color-light-1); width:100%; } /*---progress bar-icon version---*/ /*progress bar: wrapper*/ .kl_ms2_light .kl_progress_icons { background-color:var(--dt-color-secondary); padding:20px; } /*progress bar: main bar*/ .kl_ms2_light .kl_complete { border:0px; } /*progress bar: completed*/ .kl_ms2_light .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_ms2_light .kl_progress_icons li.kl_current .kl_colored_bar { background-color:var(--dt-color-primary); } /*---progress bar-standard version---*/ /*progress bar: bg color*/ .kl_ms2_light .kl_progress-bar { background-color:var(--dt-color-primary) !important; } .kl_ms2_light .kl_progress_icons ul li { border:0px; } .kl_ms2_light .kl_progress_icons li a { top:-1px; right:3px; border:5px solid var(--dt-color-light-1); } .kl_ms2_light .kl_progress_icons li i { display:flex; align-items: center; justify-content: center; } .kl_ms2_light .kl_progress_icons li .kl_colored_bar { border:0px; } /*---specific blocks---*/ /*subtitle text*/ .kl_ms2_light .kl_subtitle { background-color:var(--dt-color-primary); margin:0px; padding:20px 40px; border-top:1px solid var(--dt-color-light-1); color: var(--dt-color-light-1); font-weight:900; } /*subtitle paragraph padding*/ .kl_ms2_light .kl_subtitle p { padding:0px; margin:0px; } /*introduciton block*/ .kl_ms2_light #kl_introduction { margin-top:40px; } .kl_ms2_light .main p, .kl_ms2_light #kl_introduction p { font-size:24px; } /*objectives block*/ .kl_ms2_light #kl_objectives2, .kl_ms2_light #kl_assignments2, .kl_ms2_light #kl_activities2 { background-color:var(--dt-color-light-3); padding:0px 40px; } .kl_ms2_light #kl_objectives2 h3, .kl_ms2_light #kl_assignments2 h3, .kl_ms2_light #kl_activities2 h3 { margin:20px 0px; border-bottom:1px solid var(--dt-color-dark-2); } @media (max-width: 800px) { .kl_ms2_light #kl_objectives2, .kl_ms2_light #kl_assignments2, .kl_ms2_light #kl_activities2 { background-color:var(--dt-color-light-3); padding:0px 20px; } .kl_ms2_light #kl_objectives2 h3, .kl_ms2_light #kl_assignments2 h3, .kl_ms2_light #kl_activities2 h3 { margin:10px 0px; border-bottom:1px solid var(--dt-color-dark-2); } .kl_ms2_light #kl_introduction { padding:10px 20px; } } .kl_ms2_light #kl_objectives2 p, .kl_ms2_light #kl_objectives2 h4, .kl_ms2_light #kl_objectives2 h5, .kl_ms2_light #kl_objectives2 h6, .kl_ms2_light #kl_assignments2 p, .kl_ms2_light #kl_assignments2 h4, .kl_ms2_light #kl_assignments2 h5, .kl_ms2_light #kl_assignments2 h6, .kl_ms2_light #kl_activities2 p, .kl_ms2_light #kl_activities2 h4, .kl_ms2_light #kl_activities2 h5, .kl_ms2_light #kl_activities2 h6 { margin:0px 0px 20px 0px; } /*assignments block*/ /*assignments;unorderd list*/ /*assignments: table*/ .kl_ms2_light #kl_assignments2 table { display:table; margin:0px 0px 40px 0px !important; } .kl_ms2_light #kl_assignments2 table, .kl_ms2_light #kl_assignments2 th, .kl_ms2_light #kl_assignments2 td { border: 0px solid var(--dt-color-dark-2); background-color:transparent !important; } .kl_ms2_light #kl_assignments2 th { margin-top:0px; padding:10px 20px; background-color:transparent; color:var(--dt-color-dark-2); border-top:1px solid var(--dt-color-dark-2); } .kl_ms2_light #kl_assignments2 tr { border-bottom:1px solid var(--dt-color-dark-2); } .kl_ms2_light #kl_assignments2 td:nth-child(1) { font-weight:900; font-family:oswald, sans-serif; width:10%; padding:20px; text-align:center; font-size:36px; color: var(--dt-color-primary); } .kl_ms2_light #kl_assignments2 td:nth-child(2) { padding:20px; font-size:24px; } .kl_ms2_light .ic-Table.ic-Table--striped tbody tr:nth-child(odd), .kl_ms2_light .ic-Table.ic-Table--striped tbody tr:nth-child(even) { background-color:transparent; } @media (max-width: 800px) { .kl_ms2_light #kl_assignments2 table { margin:0px 0px 20px 0px !important; } .kl_ms2_light #kl_assignments2 td:nth-child(1) { font-size:24px; } .kl_ms2_light #kl_assignments2 td:nth-child(2) { padding:20px; font-size:18px; } } /*quick check block*/ .kl_ms2_light .kl_quick_check, .kl_ms2_light .problems, .kl_ms2_light #Welcome_Letter { background-color: var(--dt-color-light-3); padding-top:40px !imporant; padding-bottom:40px !imporant; padding-left:40px !important; padding-right:40px !important; margin:20px 40px !important; position: relative; border:0px !important; background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_ms2_light .ui-tabs-panel .kl_quick_check { margin:20px 0px !important; background-color:var(--dt-color-light-1); } .kl_ms2_light .kl_quick_check h3, .kl_ms2_light .ui-tabs-panel .kl_quick_check h4 { background-color:transparent; margin-top:0px; margin-bottom:20px; padding:0px; } .kl_ms2_light .kl_quick_check p { margin:0px 0px 20px 0px; } .kl_ms2_light .kl_quick_check_response { background-color:var(--dt-color-light-1) !important; } @media (max-width: 800px) { .kl_ms2_light .kl_quick_check { margin:20px !important; } } /*instruction block*/ .kl_ms2_light #kl_instructions { background-color: var(--dt-color-light-3); color: #ffffff; padding: 20px 40px; margin-top: 20px; } .kl_ms2_light #kl_instructions ol, .kl_ms2_light #kl_instructions ul { margin-top:20px; margin-left:20px; padding:0px; } .kl_ms2_light #kl_instructions p { margin:0px 0px 20px 0px; padding:0px; } /*video block*/ .kl_ms2_light iframe { display:block !important; margin-left:auto; margin-right:auto; margin-bottom:40px; border:5px solid var(--dt-color-dark-2); } /*instructions block*/ .kl_ms2_light #kl_instructions { background-color: var(--dt-color-light-3); color: var(--dt-color-dark-1); padding: 40px 40px 20px 40px; margin: 0px 40px 40px 40px; } .kl_ms2_light #kl_instructions h3 { margin:0px 0px 10px 40px; padding:0px; background-color:transparent; } .kl_ms2_light #kl_instructions h3 .fa, .kl_ms2_light #kl_instructions h3 .fas, .kl_ms2_light #kl_instructions h3 .far, .kl_ms2_light #kl_instructions h3 .fal, .kl_ms2_light #kl_instructions h3 .fad, .kl_ms2_light #kl_instructions h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; } /*footer block*/ .kl_ms2_light .kl_user_details p { margin:0px 20px; font-size:14px; color:var(--dt-color-light-1); } .kl_ms2_light .kl_user_details a, .kl_ms2_light .kl_user_details a:visited, .kl_ms2_light .kl_user_details a:active { color:var(--dt-color-light-1); } .kl_ms2_light .kl_user_details a:hover { color:var(--dt-color-light-3); text-decoration:none !important; } .kl_ms2_light .kl_user_details { background-color:var(--dt-color-primary); padding:20px 40px; background-image:url('https://www.mtsac.edu/studio13/images/mtsac-logo-white.png'); background-position:calc(100% - 40px); background-repeat:no-repeat; background-size: 152px 100px; margin:0px; } @media (max-width: 800px) { .kl_ms2_light .kl_user_details { background-image:none; } } /*---module list---*/ .kl_ms2_light #kl_modules { background-color:var(--dt-color-light-3); } .kl_ms2_light #kl_modules>ul li a { color:var(--dt-color-dark-1) !important; } .kl_ms2_light #kl_modules>ul li a:hover { color:var(--dt-color-dark-3) !important; } /*---snippets---*/ /*bootstrap snippets*/ .kl_ms2_light .bs-container { margin:0px 0px 40px 0px; width:calc(100% - 80px); padding:0px; } .kl_ms2_light .bs-container p { margin:0px 10px 20px 10px; } .kl_ms2_light blockquote { margin:0px 40px; } .kl_ms2_light .kl_code_highlight { margin:0px 40px; } /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------MTSAC 2 LIGHT THEME END---------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------*/ /*---font imports---*/ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); /*---------------------------------------------MTSAC 3 LIGHT THEME START------------------------------------------- Version: 2020.08.20:03:44pm ----------------------------------------------------------------------------------- Insert description of theme here: this is a theme produced for the Graphic Design (ARTC) program ------------- ------------------------------------------------------------------------------------------------------------*/ /*---brand colors---*/ /*This changes the colors for institution items items like links.*/ .kl_ms3_light { /*primary colors for theme*/ --dt-color-primary: #862633; /*primary:maroon*/ --dt-color-primary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-primary-dark-text: var(--dt-color-light-2); /*light gray*/ --dt-color-primary-darkened-5: #6cac1d; /*5% darker*/ --dt-color-primary-darkened-10: #5e9e05; /*10% darker*/ --dt-color-primary-darkened-15: #519100; /*15% darker*/ --dt-color-primary-lightened-5: #88c73d; /*5% lighter*/ --dt-color-primary-lightened-10: #96d54b; /*10% lighter*/ --dt-color-primary-lightened-15: #96d54b; /*15% lighter*/ /*secondary colors for theme*/ --dt-color-secondary: var(--dt-color-dark-3); /*secondary:dark gray*/ --dt-color-secondary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-secondary-dark-text: var(--dt-color-light-2);/*light gray*/ --dt-color-secondary-darkened-5: #595959; /*5% darker*/ --dt-color-secondary-darkened-10: #4e4e4e; /*10% darker*/ --dt-color-secondary-darkened-15: #424242; /*15% darker*/ --dt-color-secondary-lightened-5: #727272; /*5% lighter*/ --dt-color-secondary-lightened-10: #7f7f7f; /*10% lighter*/ --dt-color-secondary-lightened-15: #8b8b8b; /*15% lighter*/ /*accent colors*/ --dt-color-accent: #4C5360; --dt-color-accent-contrast: var(--dt-color-light-1); /*gray background colors*/ --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: var(--dt-color-dark-1); /*tabs*/ --dp-tabs-nav-bg:#474747; --dp-tabs-nav-bg-text:var(--dt-color-light-1); --dp-tabs-nav-dark-text:#474747; --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); /*brand colors*/ --ic-brand-primary:var(--dt-color-primary);/*primary color - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-5:var(--dt-color-primary-darkened-5); /*5% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-10:var(--dt-color-primary-darkened-10); /*10% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-15:var(--dt-color-primary-darkened-15); /*15% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-5:var(--dt-color-primary-lightened-5); /*5% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-10:var(--dt-color-primary-lightened-10); /*10% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-15:var(--dt-color-primary-lightened-15); /*15% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ /*secondary colors*/ --ic-brand-secondary:var(--dt-color-secondary);/*primary color - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-5:var(--dt-color-secondary-darkened-5); /*5% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-10:var(--dt-color-secondary-darkened-10); /*10% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-15:var(--dt-color-secondary-darkened-15); /*15% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-5:var(--dt-color-secondary-lightened-5); /*5% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-10:var(--dt-color-secondary-lightened-10); /*10% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-15:var(--dt-color-secondary-lightened-15); /*15% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ /*brand primary button colors*/ --ic-brand-button-primary-bgd:var(--dt-color-primary); --ic-brand-button-primary-text:var(--dt-color-light-1); --ic-brand-button-primary-bgd-darkened-5:var(--dt-color-primary-darkened-5); --ic-brand-button-primary-bgd-darkened-15:var(--dt-color-primary-darkened-15); /*brand secondary button colors*/ --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text:var(--dt-color-light-1); --ic-brand-button-secondary-bgd-darkened-5:var(--dt-color-secondary-darkened-5); --ic-brand-button-secondary-bgd-darkened-15:var(--dt-color-secondary-darkened-15); /*brand font colors*/ --ic-brand-font-color-dark: #2D3B45; --ic-brand-font-color-dark-lightened-15: #4C5860; --ic-brand-font-color-dark-lightened-30: #6C757C; /*links*/ --ic-link-color: var(--dt-color-dark-3); /*non-hover color*/ --ic-link-color-darkened-10: var(--dt-color-dark-2); /*hover:10% darker*/ --ic-link-color-lightened-10: var(--dt-color-dark-1); /*hover:10% lighter*/ /*buttons*/ --ic-brand-button-primary-bgd: var(--dt-color-primary); --ic-brand-button-primary-text: var(--dt-color-light-1); --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text: var(--dt-color-light-1); /*other global colors*/ --dt-black-transparency:rgba(0,0,0,0.65); --dt-color-light-1:#FFFFFF; --dt-color-light-2:#f0f0f0; --dt-color-light-3:#eeeeee; --dt-color-light-4:#d9d9d9; --dt-color-dark-3:#333333; --dt-color-dark-2:#666666; --dt-color-dark-1:#000000; } /*-----global-----*/ /*container and general styles*/ .kl_ms3_light { background-color:var(--dt-color-light-1); border:1px solid var(--dt-color-light-4); max-width: 1102px; height: 100%; font-family: Raleway, sans-serif; font-size: 18px; color: var(--dt-color-dark-3); text-align: left; position: relative; border-radius:10px; margin-bottom:20px; } .kl_ms3_light p, .kl_ms3_light li, .kl_ms3_light td { color:var(--dt-color-dark-3); font-family: Raleway, sans-serif; } .kl_ms3_light p, .kl_ms3_light h4, .kl_ms3_light h5, .kl_ms3_light h6 { margin:0px 0px 20px 0px; } .kl_ms3_light div { overflow:visible; } .kl_ms3_light > div { margin:0px 0px 40px 0px; padding:0px 40px; } /*div media query*/ @media (max-width: 800px) { .kl_ms3_light > div { padding:0px 20px; } } /*---links---*/ .kl_ms3_light a:hover { text-decoration:none !important; } .kl_ms3_light a.external:hover span, .kl_ms3_light a.external:focus span, .kl_ms3_light a.external:active span { text-decoration:none; } /*---headings---*/ /*heading styles for every type of block available*/ .kl_ms3_light h2, .kl_ms3_light h3, .kl_ms3_light h4, .kl_ms3_light h5, .kl_ms3_light h6 { font-family: Montserrat, sans-serif; font-weight: 700 !important; position: relative; } .kl_ms3_light h3 { color: var(--dt-color-light-1); background-color: var(--dt-color-primary); font-size: 28px; padding: 10px 40px; margin: 10px 0px 40px -40px; background-repeat:no-repeat; background-position:top right; background-size: 20%; display:table; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .kl_ms3_light h4 { color:var(--dt-color-primary); margin-top:40px; margin-bottom:20px; } .kl_ms3_light h5 { color: var(--dt-color-dark-3); } .kl_ms3_light h6 { color: var(--dt-color-primary); } /*headings: media queries*/ @media (max-width: 800px) { .kl_ms3_light h3 { font-size:24px; } } /*---heading icons---*/ /*font awesome icon styles within h3 heading tags*/ .kl_ms3_light h3 .fa, .kl_ms3_light h3 .fas, .kl_ms3_light h3 .far, .kl_ms3_light h3 .fal, .kl_ms3_light h3 .fad, .kl_ms3_light h3 .fab, .kl_ms3_light h2 .fa, .kl_ms3_light h2 .fas, .kl_ms3_light h2 .far, .kl_ms3_light h2 .fal, .kl_ms3_light h2 .fad, .kl_ms3_light h2 .fab { color: var(--dt-color-light-1); background-color:var(--dt-color-dark-3); border:5px solid var(--dt-color-light-1); border-radius:40px; height: 80px; width:80px; margin-right:20px; margin-top:-25px; margin-bottom:-25px; display:inline-flex; align-items: center; justify-content: center; position: relative; } /*heading icons: media queries*/ @media (max-width: 800px) { .kl_ms3_light h3 .fa, .kl_ms3_light h3 .fas, .kl_ms3_light h3 .far, .kl_ms3_light h3 .fal, .kl_ms3_light h3 .fad, .kl_ms3_light h3 .fab, .kl_ms3_light h2 .fa, .kl_ms3_light h2 .fas, .kl_ms3_light h2 .far, .kl_ms3_light h2 .fal, .kl_ms3_light h2 .fad, .kl_ms3_light h2 .fab { display:none; } } /*---list types---*/ /*list: unordered list*/ .kl_ms3_light #kl_objectives2 ul, .kl_ms3_light #kl_activities2 ul, .kl_ms3_light #kl_readings2 ul, .kl_ms3_light #kl_assignments2 ul { margin:0px 0px 20px 0px; padding:0px; list-style-type: none; } .kl_ms3_light #kl_objectives2 ul li, .kl_ms3_light #kl_activities2 ul li, .kl_ms3_light #kl_readings2 ul li, .kl_ms3_light #kl_assignments2 ul li { margin: 5px 40px; display:flex; padding:20px 40px; background-color:var(--dt-color-light-3); border-radius:5px; margin:5px 40px; } .kl_ms3_light #kl_objectives2 ul li:before, .kl_ms3_light #kl_activities2 ul li:before, .kl_ms3_light #kl_readings2 ul li:before, .kl_ms3_light #kl_assignments2 ul li:before { } /*list: ordered list*/ .kl_ms3_light #kl_objectives2 ol, .kl_ms3_light #kl_activities2 ol, .kl_ms3_light #kl_readings2 ol, .kl_ms3_light #kl_assignments2 ol { margin:0px 0px 20px 0px; list-style: none; padding:0px; counter-reset: my-awesome-counter; } .kl_ms3_light #kl_objectives2 ol li, .kl_ms3_light #kl_activities2 ol li, .kl_ms3_light #kl_readings2 ol li, .kl_ms3_light #kl_assignments2 ol li { counter-increment: my-awesome-counter; padding:20px 40px; background-color:var(--dt-color-light-3); border-radius:5px; margin:5px 40px; } .kl_ms3_light #kl_objectives2 ol li:before, .kl_ms3_light #kl_activities2 ol li:before, .kl_ms3_light #kl_readings2 ol li:before, .kl_ms3_light #kl_assignments2 ol li:before { content: counter(my-awesome-counter) ""; border: 0px; border-radius:30px; text-align: center; color: var(--dt-color-light-1); font-weight: 900; font-size: 18px; font-family:Montserrat, sans-serif; display:inline-block; background-color:var(--dt-color-primary); padding:0px 10px; margin-left:0px; margin-right:10px; } /*list:media queries*/ @media (max-width: 800px) { .kl_ms3_light #kl_objectives2 ul li, .kl_ms3_light #kl_activities2 ul li, .kl_ms3_light #kl_readings2 ul li, .kl_ms3_light #kl_assignments2 ul li, .kl_ms3_light #kl_objectives2 ol li, .kl_ms3_light #kl_activities2 ol li, .kl_ms3_light #kl_readings2 ol li, .kl_ms3_light #kl_assignments2 ol li { margin: 5px 0px; padding: 10px 20px; } } /*---navigation---*/ /*nav: wrapper*/ .kl_ms3_light #kl_navigation { margin:20px; padding:0px; border-radius:5px; overflow: hidden; } .kl_ms3_light #kl_navigation ul { background-color: var(--dt-color-primary); width:100%; display:table; margin:0px; } /*nav: bullets*/ .kl_ms3_light #kl_navigation ul li { background-color:var(--dt-color-primary); list-style-type: none; width:25%; padding:10px 20px; display:table-cell; } .kl_ms3_light #kl_navigation ul li:hover { background-color:var(--dt-color-secondary); } .kl_ms3_light #kl_navigation ul li a, .kl_ms3_light #kl_navigation ul li a:visited, .kl_ms3_light #kl_navigation ul li a:active { color:var(--dt-color-light-1); font-weight: 400; } .kl_ms3_light #kl_navigation ul li a:hover { text-decoration:none; } /*nav: icons*/ .kl_ms3_light #kl_navigation .fa, .kl_ms3_light #kl_navigation .fab, .kl_ms3_light #kl_navigation .fad, .kl_ms3_light #kl_navigation .fal, .kl_ms3_light #kl_navigation .far, .kl_ms3_light #kl_navigation .fas { padding-right:10px; } /*nav: media query*/ @media (max-width: 800px) { .kl_ms3_light #kl_navigation ul li { display:inline-block; width:100%; } } /*----buttons---*/ .kl_ms3_light .bs-btn-primary { background-color:var(--dt-color-primary) !important; color:var(--dt-color-light-1) !important; border:0px; margin-right:20px; margin-bottom:5px; } .kl_ms3_light .bs-btn-primary:hover { background-color:var(--dt-color-secondary) !important; color:var(--dt-color-light-1) !important; border:0px; } .kl_ms3_light .bs-btn-primary .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*---homepage---*/ .kl_ms3_light.homepage { background-image: url('/courses/88055/files/4517549/preview'); background-repeat: no-repeat; background-position: top 15 0px center; } .kl_ms3_light #kl_custom_block_0 h2 { margin-top: 0px; } .kl_ms3_light.homepage h3 { color: var(--dt-color-primary); text-align: center; font-size: 20px; padding-left: 80px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: transparent; padding-right: 20px; } .kl_ms3_light.homepage .header { width: 100%; height: auto; margin-bottom: 300px; } .kl_ms3_light.homepage li { border: 0px; text-align: center; } .kl_ms3_light.homepage ol { list-style: none; counter-reset: my-awesome-counter; } .kl_ms3_light.homepage ol li { counter-increment: my-awesome-counter; } .kl_ms3_light.homepage ol li:before { content: counter(my-awesome-counter) ". "; border: 0px; text-align: center; color: var(--dt-color-secondary); font-weight: 400; font-size: 24px; } /*-----accordion-----*/ /*accordion padding*/ .kl_ms3_light .kl_custom_accordion.ui-accordion .ui-accordion-header a, .kl_ms3_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms3_light .kl_panels_expander.ui-accordion .ui-accordion-header a, .kl_custom_accordion.ui-accordion .ui-accordion-header a, .kl_ms3_light .kl_panels_accordion.ui-accordion .ui-accordion-header a, .kl_ms3_light .kl_panels_expander.ui-accordion .ui-accordion-header a { padding:20px 40px; padding-top:20px !important; padding-bottom:20px !important; font-family:Raleway, sans-serif; font-weight:bold !important; font-size:14pt; } /*accordion icons-standard effect*/ /*.kl_ms3_light .kl_panel_heading .ui-accordion-tab .fa, .kl_ms3_light .kl_panel_heading .fas, .kl_ms3_light .kl_panel_heading .far, .kl_ms3_light .kl_panel_heading .fal, .kl_ms3_light .kl_panel_heading .fad, .kl_ms3_light .kl_panel_heading .fab { color: var(--dt-color-primary); position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; }*/ /*inactive accordion/expander: border*/ .kl_ms3_light .ui-state-default, .kl_ms3_light .ui-widget-header .ui-state-default { border:3px solid var(--dt-color-light-3); } /*inactive accordion styling*/ .kl_ms3_light .kl_panels_wrapper .ui-accordion-header, .kl_ms3_light .kl_wrapper .ui-accordion-header { background-color:var(--dt-color-light-3); border-radius:5px; } .kl_ms3_light .kl_panels_wrapper .ui-accordion-header:hover, .kl_ms3_light .kl_wrapper .ui-accordion-header:hover { background-color:var(--dt-color-light-4); border-radius:5px; } /*inactive accordion link color*/ .kl_ms3_light .ui-accordion .ui-state-default a, .kl_ms3_light .ui-accordion .ui-state-default a:link, .kl_ms3_light .ui-accordion .ui-state-default a:visited { color:var(--dt-color-dark-3); font-weight:400; } /*inactive accordion link hover*/ .kl_ms3_light .ui-accordion .ui-state-default a:hover, { color:var(--dt-color-light-2); font-weight:400; } /*inactive accordion ui icons*/ .kl_ms3_light .ui-state-default .ui-icon, .kl_ms3_light .ui-progressbar .kl_ms3_light .ui-widget-header .ui-icon { margin-left:10px; background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_222222_256x240-a2c05c5e96.png"); } /*active accordion*/ .kl_ms3_light .kl_panels_wrapper.ui-accordion .ui-accordion-header.ui-state-default.ui-state-active, .kl_ms3_light .kl_panels_wrapper.ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header, .kl_ms3_light .kl_panels_wrapper.ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header, .kl_ms3_light .kl_wrapper .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active, .kl_ms3_light .kl_wrapper .ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header, .kl_ms3_light .kl_wrapper .ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header { background-color:var(--dt-color-dark-2); } /*active accordion/expander: link*/ .kl_ms3_light .ui-accordion .ui-state-active a, .kl_ms3_light .ui-accordion .ui-state-active a:link, .kl_ms3_light .ui-accordion .ui-state-active a:visited { color:var(--dt-color-light-1); font-weight:400; } /*active accordion ui icons*/ .kl_ms3_light .ui-state-active .ui-icon { margin-left:10px; background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*-----expander-----*/ .kl_ms3_light .ui-accordion h3 { color: var(--dt-color-light-1); background-color: var(--dt-color-light-3); display:block; } .kl_ms3_light .ui-accordion h3:hover { color: var(--dt-color-light-1); background-color: var(--dt-color-light-4); display:block; } /*-----tabs-----*/ /*styling for tab blocks-add necessary items*/ .kl_ms3_light .ui-tabs { margin:0px; } /*all tabs: properties*/ .kl_ms3_light .ui-tabs .ui-tabs-nav li { min-width:150px; } /*tab icons*/ .kl_ms3_light .ui-tabs-nav .fa, .kl_ms3_light .ui-tabs-nav .fas, .kl_ms3_light .ui-tabs-nav .far, .kl_ms3_light .ui-tabs-nav .fal, .kl_ms3_light .ui-tabs-nav .fad, .kl_ms3_light .ui-tabs-nav .fab, .kl_ms3_light .ui-tabs-nav .icon-instructure { display:flex; align-content: center; justify-content: center; padding:10px; font-size:48px; } /*all tabs: links*/ /*active tab:links*/ .kl_ms3_light .ui-tabs .ui-tabs-nav li.ui-tabs-active a { font-weight:900; width:100%; text-align:center; color:var(--dt-color-dark-3); } .kl_ms3_light .ui-tabs .ui-tabs-nav li.ui-tabs-active a:hover { color:var(--dt-color-primary); } /*active tab: positining for bottom border overlap*/ .kl_ms3_light .ui-tabs .ui-tabs-nav li.ui-tabs-active { background-color:var(--dt-color-light-2); border:0px; top:3px; border-radius:5px 5px 0px 0px; } /*inactive tab: links*/ .kl_ms3_light .ui-tabs .ui-tabs-nav li a { font-weight:900; width:100%; text-align:center; color:var(--dt-color-light-1); padding:20px; } .kl_ms3_light .ui-tabs .ui-tabs-nav li a:hover { color:var(--dt-color-light-3); } /*inactive tab: background and border color*/ .kl_ms3_light .kl_panel_heading.ui-widget-header .ui-state-default, .kl_ms3_light .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) { background-color:var(--dt-color-primary); border:0px; margin-bottom:3px; top:3px; border-radius:5px 5px 0px 0px; } /*inactive tab: border*/ .kl_ms3_light .ui-state-default, .kl_ms3_light .ui-widget-header .ui-state-default { border:0px; } /*active panel: border thickness*/ .kl_ms3_light .ui-widget-content { border:0px; border-top:0px; background-color:var(--dt-color-light-2); } /*active panel: top border thickness*/ .kl_ms3_light .ui-tabs .ui-tabs-nav { border:0px; } /*tab: corners*/ .kl_ms3_light .ui-corner-all, .kl_ms3_light .ui-corner-top, .ui-corner-right, .kl_ms3_light .ui-corner-tr { border-radius:0px; } .kl_ms3_light .ui-corner-all, .kl_ms3_light .ui-corner-top, .kl_ms3_light .ui-corner-left, .kl_ms3_light .ui-corner-tl { border-radius:0px; } /*tabs: panel contents*/ .kl_ms3_light .ui-tabs .ui-tabs-panel { padding:40px; border-radius:0px 5px 5px 5px; } @media (max-width: 800px) { /*all tabs: properties*/ .kl_ms3_light .ui-tabs .ui-tabs-nav li { min-width:0px; } } /*-----banner-----*/ .kl_ms3_light #kl_banner { background-color: var(--dt-color-dark-3) !important; color: var(--dt-color-light-1); overflow:visible; margin:0px; padding:0px; } /*banner: number block*/ .kl_ms3_light #kl_banner_left { display:inline-block; width:20%; background-color:var(--dt-color-primary); border:5px solid var(--dt-color-light-1); display:flex !important; flex-wrap:wrap; align-items: center; justify-content: center; border-radius:100px; height:130px; width:130px; margin-top:-20px; margin-bottom:-20px; margin-left:40px; z-index:1; } /*banner: title block*/ .kl_ms3_light #kl_banner_right { display:inline-block; padding: 20px 20px; padding-bottom: 23px; padding-top: 23px; width:80%; } .kl_ms3_light #kl_banner h2 { position:inherit; padding-top:0px; padding-bottom:0px; margin:0px; display:flex; border-top:5px solid var(--dt-color-light-1); overflow:visible; } .kl_ms3_light #kl_banner2 { background-color: var(--dt-color-secondary); padding-top: 1px; padding-bottom: 1px; } .kl_ms3_light #kl_description { background-color:var(--dt-color-dark-3); margin-top:0px; margin-bottom:0px; color:var(--dt-color-light-1); padding:10px 20px; } .kl_ms3_light .kl_mod_text { font-size:36px; display:block; text-align:center; width:100%; display:none; } .kl_ms3_light .kl_mod_num { font-size:72px; line-height:120px; font-weight:700; display:flex; align-content: center; justify-content: center; width:100%; } /*banner: banner image*/ .kl_ms3_light #kl_banner_image { margin:0px; width:100%; height:auto; margin:0px; padding:0px; } /*banner: media queries*/ @media (max-width: 800px) { .kl_ms3_light #kl_banner_left { height:90px; width:90px; margin-top:-10px; margin-left:10px; margin-right:10px; } .kl_ms3_light #kl_banner_right { padding:10px; } .kl_ms3_light .kl_mod_num { font-size:48px; line-height:80px; } } /*---tables---*/ /*table: overall*/ .kl_ms3_light .table-bordered, .kl_ms3_light .ic-Table { display:table; width:100%; margin:0px; border:1px solid var(--dt-color-light-3); border-radius:5px; } /*table: media query*/ @media (max-width: 800px) { .kl_ms3_light .table-bordered, .kl_ms3_light .ic-Table { margin:0px !important; } } /*ic table: headers*/ .kl_ms3_light .ic-Table.ic-Table--striped th, .kl_ms3_light .table th { background-color:var(--dt-color-secondary); color:var(--dt-color-light-1); width:100%; } /*---progress bar-icon version---*/ /*progress bar: wrapper*/ .kl_ms3_light .kl_progress_icons { background-color:var(--dt-color-secondary); padding:20px; } /*progress bar: main bar*/ .kl_ms3_light .kl_complete { border:0px; } /*progress bar: completed*/ .kl_ms3_light .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_ms3_light .kl_progress_icons li.kl_current .kl_colored_bar { background-color:var(--dt-color-primary); } /*---progress bar-standard version---*/ /*progress bar: bg color*/ .kl_ms3_light .kl_progress-bar { background-color:var(--dt-color-primary) !important; } .kl_ms3_light .kl_progress_icons ul li { border:0px; } .kl_ms3_light .kl_progress_icons li a { top:-1px; right:3px; border:5px solid var(--dt-color-light-1); } .kl_ms3_light .kl_progress_icons li i { display:flex; align-items: center; justify-content: center; } .kl_ms3_light .kl_progress_icons li .kl_colored_bar { border:0px; } /*---specific blocks---*/ /*introduction text*/ .kl_ms3_light .kl_subtitle { background-color:var(--dt-color-light-3); margin-top:0px; margin-left:0px; margin-right:0px; padding:20px 40px 20px 190px; font-family:Montserrat, sans-serif; font-weight:700; } /*introduction paragraph padding*/ .kl_ms3_light .kl_subtitle p { padding:0px; margin:0px; } /*main info*/ .kl_ms3_light #kl_introduction { margin-top:40px; } .kl_ms3_light .main p, .kl_ms3_light #kl_introduction p { font-size:24px; } /*bottom blocks*/ .kl_ms3_light #kl_assignments2, .kl_ms3_light #kl_activities2 { padding-top:20px; padding-bottom:20px; margin-bottom:0px; } .kl_ms3_light #kl_activities2 { background-color:var(--dt-color-light-3); } .kl_ms3_light #kl_assignments2 { background-color:var(--dt-color-light-4); } .kl_ms3_light #kl_assignments2 li, .kl_ms3_light #kl_activities2 li { background-color:var(--dt-color-light-1) !important; } .kl_ms3_light #kl_assignments2 h3, .kl_ms3_light #kl_activities2 h3 { margin:20px -40px; border-bottom:1px solid var(--dt-color-dark-2); } .kl_ms3_light #kl_objectives2 h4, .kl_ms3_light #kl_objectives2 h5, .kl_ms3_light #kl_objectives2 h6, .kl_ms3_light #kl_assignments2 p, .kl_ms3_light #kl_assignments2 h4, .kl_ms3_light #kl_assignments2 h5, .kl_ms3_light #kl_assignments2 h6, .kl_ms3_light #kl_activities2 p, .kl_ms3_light #kl_activities2 h4, .kl_ms3_light #kl_activities2 h5, .kl_ms3_light #kl_activities2 h6 { margin:0px 40px 20px 40px; } /*bottom block headings: media queries*/ @media (max-width: 800px) { .kl_ms3_light #kl_objectives2 h4, .kl_ms3_light #kl_objectives2 h5, .kl_ms3_light #kl_objectives2 h6, .kl_ms3_light #kl_assignments2 p, .kl_ms3_light #kl_assignments2 h4, .kl_ms3_light #kl_assignments2 h5, .kl_ms3_light #kl_assignments2 h6, .kl_ms3_light #kl_activities2 p, .kl_ms3_light #kl_activities2 h4, .kl_ms3_light #kl_activities2 h5, .kl_ms3_light #kl_activities2 h6 { margin:0px 0px 20px 0px; } } /*assignments block*/ /*assignments: table*/ .kl_ms3_light #kl_assignments2 table { margin:0px 40px; width:calc(100% - 80px); border-collapse: separate; border-spacing: 0 5px; } .kl_ms3_light #kl_assignments2 table, .kl_ms3_light #kl_assignments2 th, .kl_ms3_light #kl_assignments2 td { border: 0px solid var(--dt-color-dark-2); background-color:transparent !important; } .kl_ms3_light #kl_assignments2 thead th:first-child { background-color:var(--dt-color-dark-3) !important; border-radius:5px 0px 0px 5px; margin-bottom:5px; } .kl_ms3_light #kl_assignments2 thead th:last-child { background-color:var(--dt-color-dark-3) !important; border-radius:0px 5px 5px 0px; margin-bottom:5px; } .kl_ms3_light #kl_assignments2 tr td:first-child { background-color:var(--dt-color-primary) !important; color:var(--dt-color-light-1); border-radius:5px 0px 0px 5px; margin-bottom:5px; } .kl_ms3_light #kl_assignments2 tr td:last-child { background-color:var(--dt-color-light-1) !important; border-radius:0px 5px 5px 0px; margin-bottom:5px; } .kl_ms3_light #kl_assignments2 th { padding:10px 20px; color:var(--dt-color-light-1); } .kl_ms3_light #kl_assignments2 tr { } .kl_ms3_light #kl_assignments2 td:nth-child(1) { font-weight:700; font-family:Montserrat, sans-serif; width:10%; padding:20px; text-align:center; font-size:36px; color: var(--dt-color-primary); } .kl_ms3_light #kl_assignments2 td:nth-child(2) { padding:20px; font-size:24px; } .kl_ms3_light #kl_assignments2 .ic-Table.ic-Table--striped tbody tr:nth-child(odd), .kl_ms3_light #kl_assignments2 .ic-Table.ic-Table--striped tbody tr:nth-child(even) { background-color:transparent; } /*table: media queries*/ @media (max-width: 800px) { .kl_ms3_light #kl_assignments2 table { margin:0px; width:100%; } .kl_ms3_light #kl_assignments2 td:nth-child(1) { width:10%; padding:10px; font-size:24px; } .kl_ms3_light #kl_assignments2 td:nth-child(2) { padding:10px; font-size:18px; } } /*quick check-problems block*/ .kl_ms3_light .problems, .kl_ms3_light .kl_quick_check, .kl_ms3_light #Welcome_Letter { background-color:var(--dt-color-light-3); border:0px !important; padding:40px 40px 20px 40px !important; margin:0px 40px 40px 40px !important; border-radius:5px; overflow:visible; } .kl_ms3_light .ui-tabs-panel .kl_quick_check { margin:20px 0px !important; background-color:var(--dt-color-light-1); } .kl_ms3_light .kl_quick_check h4 { margin:0px 0px 20px 0px; } .kl_ms3_light .kl_quick_check p { margin:0px 0px 20px 0px; padding:0px; } .kl_ms3_light .kl_quick_check_response { background-color:var(--dt-color-light-1) !important; } /*instruction block*/ .kl_ms3_light #kl_instructions { background-color: var(--dt-color-light-3); color: #ffffff; padding: 20px 40px; margin-top: 20px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_ms3_light #kl_instructions ol, .kl_ms3_light #kl_instructions ul { margin-top:20px; margin-left:20px; padding:0px; } .kl_ms3_light #kl_instructions p { margin:0px 0px 20px 0px; padding:0px; } /*video block*/ .kl_ms3_light iframe { display:block !important; margin-left:auto; margin-right:auto; margin-bottom:40px; border:20px solid var(--dt-color-light-4); border-radius:5px; } /*instructions block*/ .kl_ms3_light #kl_instructions { background-color: var(--dt-color-light-3); color: var(--dt-color-dark-1); padding: 40px 40px 20px 40px; margin: 0px 40px 40px 40px; } .kl_ms3_light #kl_instructions h3 { margin:0px 0px 10px 40px; padding:0px; background-image:none; background-color:transparent; } .kl_ms3_light #kl_instructions h3 .fa, .kl_ms3_light #kl_instructions h3 .fas, .kl_ms3_light #kl_instructions h3 .far, .kl_ms3_light #kl_instructions h3 .fal, .kl_ms3_light #kl_instructions h3 .fad, .kl_ms3_light #kl_instructions h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; } /*footer block*/ .kl_ms3_light .kl_user_details p { margin:0px 20px; font-size:14px; color:var(--dt-color-light-1); } .kl_ms3_light .kl_user_details a, .kl_ms3_light .kl_user_details a:visited, .kl_ms3_light .kl_user_details a:active { color:var(--dt-color-light-1); } .kl_ms3_light .kl_user_details a:hover { color:var(--dt-color-light-3); text-decoration:none !important; } .kl_ms3_light .kl_user_details { background-color:var(--dt-color-primary); padding:20px 40px; background-image:url('https://www.mtsac.edu/studio13/images/mtsac-logo-white.png'); background-position:calc(100% - 40px); background-repeat:no-repeat; background-size: 152px 100px; margin:0px -20px; } /*footer: media queries*/ @media (max-width: 800px) { .kl_ms3_light .kl_user_details { background-image:none; } } /*---module list---*/ .kl_ms3_light #kl_modules { background-color:var(--dt-color-light-3); margin-bottom:0px !important; } .kl_ms3_light #kl_modules>ul li a { color:var(--dt-color-dark-1) !important; } .kl_ms3_light #kl_modules>ul li a:hover { color:var(--dt-color-dark-3) !important; } /*---snippets---*/ /*bootstrap snippets*/ .kl_ms3_light .bs-container { margin:0px 0px 40px 0px; width:calc(100% - 80px); padding:0px; } .kl_ms3_light .bs-container p { margin:0px 10px 20px 10px; } .kl_ms3_light blockquote { margin:0px 40px; } .kl_ms3_light .kl_code_highlight { margin:0px 40px; } /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------GD-LIGHT THEME END---------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------GD-LIGHT THEME START------------------------------------------- Version: 2020.08.20:03:44pm ----------------------------------------------------------------------------------- Insert description of theme here: this is a theme produced for the Graphic Design (ARTC) program ------------- ------------------------------------------------------------------------------------------------------------*/ /*---font imports---*/ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap'); /*---brand colors---*/ /*This changes the colors for institution items items like links.*/ .kl_gd_light { /*primary colors for theme*/ --dt-color-primary: #79b82b; /*primary:green*/ --dt-color-primary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-primary-dark-text: var(--dt-color-light-2); /*light gray*/ --dt-color-primary-darkened-5: #6cac1d; /*5% darker*/ --dt-color-primary-darkened-10: #5e9e05; /*10% darker*/ --dt-color-primary-darkened-15: #519100; /*15% darker*/ --dt-color-primary-lightened-5: #88c73d; /*5% lighter*/ --dt-color-primary-lightened-10: #96d54b; /*10% lighter*/ --dt-color-primary-lightened-15: #96d54b; /*15% lighter*/ /*secondary colors for theme*/ --dt-color-secondary: var(--dt-color-dark-2); /*primary:dark gray*/ --dt-color-secondary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-secondary-dark-text: var(--dt-color-light-2);/*light gray*/ --dt-color-secondary-darkened-5: #595959; /*5% darker*/ --dt-color-secondary-darkened-10: #4e4e4e; /*10% darker*/ --dt-color-secondary-darkened-15: #424242; /*15% darker*/ --dt-color-secondary-lightened-5: #727272; /*5% lighter*/ --dt-color-secondary-lightened-10: #7f7f7f; /*10% lighter*/ --dt-color-secondary-lightened-15: #8b8b8b; /*15% lighter*/ /*accent colors*/ --dt-color-accent: #4C5360; --dt-color-accent-contrast: var(--dt-color-light-1); /*gray background colors*/ --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: var(--dt-color-dark-1); /*tabs*/ --dp-tabs-nav-bg:#474747; --dp-tabs-nav-bg-text:var(--dt-color-light-1); --dp-tabs-nav-dark-text:#474747; --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); /*brand colors*/ --ic-brand-primary:var(--dt-color-primary);/*primary color - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-5:var(--dt-color-primary-darkened-5); /*5% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-10:var(--dt-color-primary-darkened-10); /*10% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-15:var(--dt-color-primary-darkened-15); /*15% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-5:var(--dt-color-primary-lightened-5); /*5% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-10:var(--dt-color-primary-lightened-10); /*10% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-15:var(--dt-color-primary-lightened-15); /*15% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ /*secondary colors*/ --ic-brand-secondary:var(--dt-color-secondary);/*primary color - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-5:var(--dt-color-secondary-darkened-5); /*5% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-10:var(--dt-color-secondary-darkened-10); /*10% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-15:var(--dt-color-secondary-darkened-15); /*15% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-5:var(--dt-color-secondary-lightened-5); /*5% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-10:var(--dt-color-secondary-lightened-10); /*10% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-15:var(--dt-color-secondary-lightened-15); /*15% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ /*brand primary button colors*/ --ic-brand-button-primary-bgd:var(--dt-color-primary); --ic-brand-button-primary-text:var(--dt-color-light-1); --ic-brand-button-primary-bgd-darkened-5:var(--dt-color-primary-darkened-5); --ic-brand-button-primary-bgd-darkened-15:var(--dt-color-primary-darkened-15); /*brand secondary button colors*/ --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text:var(--dt-color-light-1); --ic-brand-button-secondary-bgd-darkened-5:var(--dt-color-secondary-darkened-5); --ic-brand-button-secondary-bgd-darkened-15:var(--dt-color-secondary-darkened-15); /*brand font colors*/ --ic-brand-font-color-dark: #2D3B45; --ic-brand-font-color-dark-lightened-15: #4C5860; --ic-brand-font-color-dark-lightened-30: #6C757C; /*links*/ --ic-link-color: var(--dt-color-dark-3); /*non-hover color*/ --ic-link-color-darkened-10: var(--dt-color-dark-2); /*hover:10% darker*/ --ic-link-color-lightened-10: var(--dt-color-dark-1); /*hover:10% lighter*/ /*buttons*/ --ic-brand-button-primary-bgd: var(--dt-color-primary); --ic-brand-button-primary-text: var(--dt-color-light-1); --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text: var(--dt-color-light-1); /*other global colors*/ --dt-black-transparency:rgba(0,0,0,0.25); --dt-color-light-1:#FFFFFF; --dt-color-light-2:#f9f9f9; --dt-color-light-3:#d9d9d9; --dt-color-light-4:#c9c9c9; --dt-color-dark-3:#333333; --dt-color-dark-2:#666666; --dt-color-dark-1:#000000; } /*-----global-----*/ /*container and general styles*/ .kl_gd_light { background-color:var(--dt-color-light-2); max-width: 1102px; height: 100%; font-family: source sans pro; font-size: 18px; color: var(--dt-color-dark-3); text-align: left; position: relative; margin-bottom:20px; } .kl_gd_light p, .kl_gd_light li, .kl_gd_light td { color:var(--dt-color-dark-3); font-family: source sans pro; } .kl_gd_light p, .kl_gd_light h4, .kl_gd_light h5, .kl_gd_light h6 { margin:0px 40px 40px; } .kl_gd_light .fa, .kl_gd_light .fas, .kl_gd_light .far, .kl_gd_light .fal, .kl_gd_light .fad, .kl_gd_light .fab, .kl_gd_light .icon-instructure { color:var(--dt-color-dark-3); } .kl_gd_light > div { padding-bottom:40px; background-color:var(--dt-color-light-2); } /*---links---*/ .kl_gd_light a:hover { text-decoration:none; } /*---headings---*/ /*heading styles for every type of block available*/ .kl_gd_light h2, .kl_gd_light h3, .kl_gd_light h4, .kl_gd_light h5, .kl_gd_light h6 { font-family: Montserrat; font-weight: bold !important; position: relative; } .kl_gd_light h3, .kl_gd_light h2 { color: var(--dt-color-dark-3); font-size: 28px; padding-left: 40px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: var(--dt-color-primary); padding-right: 20px; margin: 0px 0px 30px 0px; background-image:url('http://www.mtsac.edu/studio13/canvas/graphic_design/heading-corner-gray.png'); background-repeat:no-repeat; background-position:top right; background-size: 20%; } .kl_gd_light #kl_banner_image { margin: 0px; padding: 0px ; } .kl_gd_light #kl_banner_image h2 { margin: 0px; padding: 0px; background-color:transparent; background-image:none; width:100%; } .kl_gd_light h4 { color:var(--dt-color-primary); margin-top:40px; margin-bottom:20px; } .kl_gd_light h5 { color: var(--dt-color-dark-3); } .kl_gd_light h6 { color: var(--dt-color-primary); } /*---heading icons---*/ /*font awesome icon styles within h3 heading tags*/ .kl_gd_light h3 .fa, .kl_gd_light h3 .fas, .kl_gd_light h3 .far, .kl_gd_light h3 .fal, .kl_gd_light h3 .fad, .kl_gd_light h3 .fab, .kl_gd_light h2 .fa, .kl_gd_light h2 .fas, .kl_gd_light h2 .far, .kl_gd_light h2 .fal, .kl_gd_light h2 .fad, .kl_gd_light h2 .fab { color: var(--dt-color-primary); background-color: var(--dt-color-dark-3); width: 65px; height: 65px; display: inline-flex; align-items: center; justify-content: center; position: relative; margin-top: -8px; margin-bottom: -8px; margin-left:-40px; margin-right:20px; } /*---list types---*/ /*list: unordered list*/ .kl_gd_light ul, .kl_gd_light ol { margin: 0px 40px 20px; padding:0px 40px; } .kl_gd_light ul li { } .kl_gd_light ul li::before { } /*list: ordered list*/ .kl_gd_light ol { } .kl_gd_light ol li { } .kl_gd_light ol li::before { } /*---navigation---*/ /*nav: wrapper*/ .kl_gd_light #kl_navigation ul { background-color: var(--dt-color-primary); width:100%; margin:0px; display:table; } /*nav: bullets*/ .kl_gd_light #kl_navigation ul li { background-color:var(--dt-color-primary); list-style-type: none; width:25%; padding:10px 20px; display:table-cell; } .kl_gd_light #kl_navigation ul li a, .kl_gd_light #kl_navigation ul li a:visited, .kl_gd_light #kl_navigation ul li a:active { color:var(--dt-color-light-1); font-weight:bold; } .kl_gd_light #kl_navigation ul li:hover { background-color:var(--dt-color-secondary); } .kl_gd_light #kl_navigation ul li a:hover { text-decoration:none; } /*nav: icons*/ .kl_gd_light #kl_navigation .fa, .kl_gd_light #kl_navigation .fab, .kl_gd_light #kl_navigation .fad, .kl_gd_light #kl_navigation .fal, .kl_gd_light #kl_navigation .far, .kl_gd_light #kl_navigation .fas { padding-right:10px; } /*---content block: list types---*/ /*cblock list: unordered list*/ .kl_gd_light .cblock ul li { } .kl_gd_light .cblock ul li::before { } /*cblock list: ordered list*/ .kl_gd_light .cblock ol { } .kl_gd_light .cblock ol li { } .kl_gd_light .cblock ol li::before { } /*----buttons---*/ .kl_gd_light .bs-btn-primary { background-color:var(--dt-color-primary) !important; color:var(--dt-color-dark-1) !important; border:0px; margin-right:20px; margin-bottom:5px; } .kl_gd_light .bs-btn-primary:hover { background-color:var(--dt-color-light-1) !important; border:0px; } /*---homepage---*/ .kl_gd_light.homepage { background-image: url('/courses/88055/files/4517549/preview'); background-repeat: no-repeat; background-position: top 15 0px center; } .kl_gd_light #kl_custom_block_0 h2 { margin-top: 0px; } .kl_gd_light.homepage h3 { color: var(--dt-color-primary); text-align: center; font-size: 20px; padding-left: 80px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: transparent; padding-right: 20px; } .kl_gd_light.homepage .header { width: 100%; height: auto; margin-bottom: 300px; } .kl_gd_light.homepage li { border: 0px; text-align: center; } .kl_gd_light.homepage ol { list-style: none; counter-reset: my-awesome-counter; } .kl_gd_light.homepage ol li { counter-increment: my-awesome-counter; } .kl_gd_light.homepage ol li:before { content: counter(my-awesome-counter) ". "; border: 0px; text-align: center; color: var(--dt-color-secondary); font-weight: bold; font-size: 24px; } /*-----accordion-----*/ /*accordion icons-standard effect*/ .kl_gd_light .kl_panel_heading .ui-accordion-tab .fa, .kl_gd_light .kl_panel_heading .fas, .kl_gd_light .kl_panel_heading .far, .kl_gd_light .kl_panel_heading .fal, .kl_gd_light .kl_panel_heading .fad, .kl_gd_light .kl_panel_heading .fab { color: var(--dt-color-primary); position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; } /*inactive accordion/expander: border*/ .kl_gd_light .ui-state-default, .kl_gd_light .ui-widget-header .ui-state-default { border:3px solid var(--dt-color-light-3); } /*inactive accordion styling*/ .kl_gd_light .kl_panels_wrapper .ui-accordion-header, .kl_gd_light .kl_wrapper .ui-accordion-header { background-color:var(--dt-color-light-3); } /*inactive accordion link color*/ .kl_gd_light .ui-accordion .ui-state-default a, .kl_gd_light .ui-accordion .ui-state-default a:link, .kl_gd_light .ui-accordion .ui-state-default a:visited { color:var(--dt-color-dark-3); font-weight:bold; } /*inactive accordion link hover*/ .kl_gd_light .ui-accordion .ui-state-default a:hover, { color:var(--dt-color-light-2); font-weight:bold; } /*inactive accordion ui icons*/ .kl_gd_light .ui-state-default .ui-icon, .kl_gd_light .ui-progressbar .kl_gd_light .ui-widget-header .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*active accordion/expander: link*/ .kl_gd_light .ui-accordion .ui-state-active a, .kl_gd_light .ui-accordion .ui-state-active a:link, .kl_gd_light .ui-accordion .ui-state-active a:visited { color:var(--dt-color-dark-3); font-weight:bold; } /*-----expander-----*/ .kl_gd_light #kl_panel_expander h3 { color: var(--dt-color-dark-3); background-color: var(--dt-color-primary); } /*-----tabs-----*/ /*styling for tab blocks-add necessary items*/ .kl_gd_light .ui-tabs { margin:0px 40px; } /*all tabs: properties*/ .kl_gd_light .ui-tabs .ui-tabs-nav li { min-width:150px; } /*all tabs: links*/ .kl_gd_light .ui-tabs .ui-tabs-nav li a { font-weight:bold; width:100%; text-align:center; } .kl_gd_light .ui-tabs .ui-tabs-nav li.ui-state-hover a, .kl_gd_light .ui-tabs .ui-tabs-nav li:hover a { color:var(--dt-color-dark-1); } /*active tab: border & bg*/ .kl_gd_light .ui-tabs .ui-tabs-nav li.ui-tabs-active, .kl_gd_light .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover, .kl_gd_light .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover { border:0px; background-color:var(--dt-color-light-3); } /*inactive tab: background and border color*/ .kl_gd_light .kl_panel_heading.ui-widget-header .ui-state-default, .kl_gd_light .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) { background-color:var(--dt-color-primary); border:0px; font-weight:bold; margin-bottom:3px; } /*inactive tab: border*/ .kl_gd_light .ui-state-default, .kl_gd_light .ui-widget-header .ui-state-default { border:0px; } /*inactive tab: links*/ .ui-tabs .ui-tabs-nav li a { color:var(--dt-color-dark-3); } /*active tab: positining for bottom border overlap*/ .kl_gd_light .ui-tabs .ui-tabs-nav li { top:3px; } /*active tab: border thickness*/ .kl_gd_light .ui-state-active, .kl_gd_light .ui-progressbar .ui-widget-header, .kl_gd_light .ui-widget-header .ui-state-active, .kl_gd_light .ui-widget-header .ui-progressbar .ui-widget-header, .kl_gd_light .ui-progressbar .ui-widget-header .ui-widget-header { border:0px; } /*active panel: border thickness*/ .kl_gd_light .ui-widget-content { border:0px; border-top:0px; background-color:var(--dt-color-light-3); } /*active panel: top border thickness*/ .kl_gd_light .ui-tabs .ui-tabs-nav { border:0px; } /*tab: corners*/ .kl_gd_light .ui-corner-all, .kl_gd_light .ui-corner-top, .ui-corner-right, .kl_gd_light .ui-corner-tr { border-radius:0px; } .kl_gd_light .ui-corner-all, .kl_gd_light .ui-corner-top, .kl_gd_light .ui-corner-left, .kl_gd_light .ui-corner-tl { border-radius:0px; } /*panel: contents*/ .kl_gd_light .ui-tabs .ui-tabs-panel { padding-top: 60px; } /*panel contents*/ /*panel tabs-active*/ /*panel tabs-hover*/ /*tab icons*/ /*tab icons-standard effect*/ .kl_gd_light .kl_panel_heading .ui-tabs-tab .fa, .kl_gd_light .kl_panel_heading .fas, .kl_gd_light .kl_panel_heading .far, .kl_gd_light .kl_panel_heading .fal, .kl_gd_light .kl_panel_heading .fad, .kl_gd_light .kl_panel_heading .fab { color: var(--dt-color-dark-3); position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; margin-top:0px; margin-bottom:10px; } /*tab icons-hover effect*/ .kl_gd_light .kl_panel_heading .ui-tabs-tab .fa:hover, .kl_gd_light .kl_panel_heading .fas:hover, .kl_gd_light .kl_panel_heading .far:hover .kl_gd_light .kl_panel_heading .fal:hover .kl_gd_light .kl_panel_heading .fad:hover .kl_gd_light .kl_panel_heading .fab:hover { color: var(--dt-color-dark-1); } /*-----banner-----*/ .kl_gd_light #kl_banner { background-color: var(--dt-color-primary); } /*banner: number block*/ .kl_gd_light #kl_banner_left { display:inline-block; padding: 20px; } /*banner: title block*/ .kl_gd_light #kl_banner_right { display:inline-block; padding: 20px; padding-bottom: 23px; padding-top: 23px; } .kl_gd_light #kl_banner h2 { padding-top:0px; padding-bottom:0px; border-bottom: var(--dt-color-light-1) solid 3px; margin:0px; } .kl_gd_light #kl_banner2 { background-color: var(--dt-color-secondary); padding-top: 1px; padding-bottom: 1px; } .kl_gd_light .kl_subtitle { background-color: var(--dt-color-secondary); margin:0px; color:var(--dt-color-light-1); padding:10px 20px; } .kl_gd_light #kl_description { background-color:var(--dt-color-dark-3); margin-top:0px; margin-bottom:0px; color:var(--dt-color-light-1); padding:10px 20px; } /*banner: banner image*/ .kl_gd_light #kl_banner_image { margin:0px; width:100%; height:auto; border-bottom:5px solid var(--dt-color-light-1); } /*---tables---*/ /*table: overall*/ .kl_gd_light .table-bordered, .kl_gd_light .ic-Table { width:100% !important; margin:0px 40px !important; display:table; } /*ic table: headers*/ .kl_gd_light .ic-Table.ic-Table--striped th, .kl_gd_light .table th { background-color:var(--dt-color-secondary); color:var(--dt-color-light-1); } /*---progress bar-icon version---*/ /*progress bar: wrapper*/ .kl_gd_light .kl_progress_icons { background-color:var(--dt-color-secondary); padding:20px; } /*progress bar: main bar*/ .kl_gd_light .kl_complete { border:0px; } /*progress bar: completed*/ .kl_gd_light .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_gd_light .kl_progress_icons li.kl_current .kl_colored_bar { background-color:var(--dt-color-primary); } /*---progress bar-standard version---*/ /*progress bar: bg color*/ .kl_gd_light .kl_progress-bar { background-color:var(--dt-color-primary) !important; } .kl_gd_light .kl_progress_icons ul li { border:0px; } .kl_gd_light .kl_progress_icons li a { top:-1px; right:3px; border:5px solid var(--dt-color-light-1); } .kl_gd_light .kl_progress_icons li i { display:flex; align-items: center; justify-content: center; } .kl_gd_light .kl_progress_icons li .kl_colored_bar { border:0px; } /*---specific blocks---*/ /*header image block*/ .kl_gd_light .kl_image_full_width { border-bottom:10px solid var(--dt-color-light-1); } /*objectives block*/ .kl_gd_light #kl_objectives2 { background-color:var(--dt-color-dark-3); padding:20px 40px 40px 40px; margin-bottom:2px; } .kl_gd_light #kl_objectives2 h3 { background-color:transparent; background-image:none; color:var(--dt-color-light-1); margin-top:20px; margin-bottom:20px; padding:0px; margin-left:40px; } .kl_gd_light #kl_objectives2 ol, .kl_gd_light #kl_objectives2 ul { margin:0px; list-style: none; padding:0px; } .kl_gd_light #kl_objectives2 ol li, .kl_gd_light #kl_objectives2 ul li { color:var(--dt-color-light-1); background-color:var(--dt-black-transparency); padding: 20px 40px; margin-bottom:10px; font-size: 18pt; } .kl_gd_light #kl_objectives2 ol li:before, .kl_gd_light #kl_objectives2 ul li:before { content:none; } .kl_gd_light #kl_objectives2 h3 .fa, .kl_gd_light #kl_objectives2 h3 .fas, .kl_gd_light #kl_objectives2 h3 .far, .kl_gd_light #kl_objectives2 h3 .fal, .kl_gd_light #kl_objectives2 h3 .fad, .kl_gd_light #kl_objectives2 h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; } /*assignments block*/ .kl_gd_light #kl_assignments2 { background-color:var(--dt-color-light-4); padding:20px 40px 40px 40px; } .kl_gd_light #kl_assignments2 h3 { background-color:transparent; background-image:none; color:var(--dt-color-dark-3); margin-top:20px; margin-bottom:20px; padding:0px; margin-left:40px; } .kl_gd_light #kl_assignments2 p { margin:0px 0px 20px 0px; } .kl_gd_light #kl_assignments2 ol, .kl_gd_light #kl_assignments2 ul { margin:0px; list-style: none; padding:0px; } .kl_gd_light #kl_assignments2 ol li, .kl_gd_light #kl_assignments2 ul li { background-color:var(--dt-black-transparency); padding: 20px 40px; } .kl_gd_light #kl_assignments2 ol li:before, .kl_gd_light #kl_assignments2 ul li:before { content:none; } .kl_gd_light #kl_assignments2 h3 .fa, .kl_gd_light #kl_assignments2 h3 .fas, .kl_gd_light #kl_assignments2 h3 .far, .kl_gd_light #kl_assignments2 h3 .fal, .kl_gd_light #kl_assignments2 h3 .fad, .kl_gd_light #kl_assignments2 h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; } /*assignments: table*/ .kl_gd_light #kl_assignments2 table, .kl_gd_light #kl_assignments2 th, .kl_gd_light #kl_assignments2 td { border: 1px solid var(--dt-color-dark-2); margin:0px !important; } .kl_gd_light #kl_assignments2 th { margin-top:0px; padding:10px 20px; background-color:var(--dt-color-secondary-darkened-10); } .kl_gd_light #kl_assignments2 td:nth-child(1) { font-family:Montserrat; font-weight:bold; width:10%; background-color:var(--dt-color-primary); padding:20px; text-align:center; font-size:36px; color:var(--dt-color-dark-3); } .kl_gd_light #kl_assignments2 td:nth-child(2) { background-color:var(--dt-color-light-2); padding:20px; font-size:24px; } /*quick check block*/ .kl_gd_light .kl_quick_check { background-color: var(--dt-color-light-3); padding-top:40px !imporant; padding-bottom:40px !imporant; padding-left:40px !important; padding-right:40px !important; margin:20px 40px !important; position: relative; border:0px !important; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_gd_light .kl_quick_check h3 { background-color:transparent; margin-top:0px; margin-bottom:20px; padding:0px; background-image:none; } .kl_gd_light .kl_quick_check p { margin:0px 0px 20px 0px; } .kl_gd_light .kl_quick_check h3 .fa, .kl_gd_light .kl_quick_check h3 .fas, .kl_gd_light .kl_quick_check h3 .far, .kl_gd_light .kl_quick_check h3 .fal, .kl_gd_light .kl_quick_check h3 .fad, .kl_gd_light .kl_quick_check h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; margin-left:0px; margin-right:20px; } .kl_gd_light .kl_quick_check_response { background-color:var(--dt-color-dark-3) !important; } /*problems block*/ .kl_gd_light .problems { background-color:var(--dt-color-light-3); padding:40px 40px 20px 40px; margin:0px 40px 40px 40px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_gd_light .problems h3 { margin:0px 0px 10px 0px; padding:0px; background-image:none; background-color:transparent; color:var(--dt-color-dark-3); } .kl_gd_light .problems h3 .fa, .kl_gd_light .problems h3 .fas, .kl_gd_light .problems h3 .far, .kl_gd_light .problems h3 .fal, .kl_gd_light .problems h3 .fad, .kl_gd_light .problems h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; margin-left:0px; margin-right:20px; } .kl_gd_light .problems p { margin:0px 0px 20px 0px; padding:0px; } /*instruction block*/ .kl_gd_light .instructions, .kl_gd_light #kl_instructions { background-color: var(--dt-color-light-3); color: #ffffff; padding: 20px 40px; margin-top: 20px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_gd_light .instructions ol, .kl_gd_light .instructions ul, .kl_gd_light #kl_instructions ol, .kl_gd_light #kl_instructions ul { margin-top:20px; margin-left:20px; padding:0px; } .kl_gd_light .instructions p, .kl_gd_light #kl_instructions p { margin:0px 0px 20px 0px; padding:0px; } /*submission block*/ .kl_gd_light .submission { background-color: var(--dt-color-light-3); padding: 40px; } .kl_gd_light .submission h3 { background-color:transparent; background-image:none; margin-bottom:20px; padding:0px; margin-left:40px; } .kl_gd_light .submission h3 .fa, .kl_gd_light .submission h3 .fas, .kl_gd_light .submission h3 .far, .kl_gd_light .submission h3 .fal, .kl_gd_light .submission h3 .fad, .kl_gd_light .submission h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; } .kl_gd_light .submission ul { list-style-type: none; margin:0px; padding:0px; } .kl_gd_light .submission li { padding: 20px; background-color: var(--dt-color-light-2); margin-bottom: 10px; } /*video block*/ .kl_gd_light iframe { display:block !important; width: 800px; height: 450px; margin-left:auto; margin-right:auto; border:5px solid var(--dt-color-dark-2); } /*instructions block*/ .kl_gd_light .instructions, .kl_gd_light #kl_instructions { background-color: var(--dt-color-light-3); color: var(--dt-color-dark-1); padding: 40px 40px 20px 40px; margin: 0px 40px 40px 40px; } .kl_gd_light .instructions h3, .kl_gd_light #kl_instructions h3 { margin:0px 0px 10px 40px; padding:0px; background-image:none; background-color:transparent; } .kl_gd_light .instructions h3 .fa, .kl_gd_light .instructions h3 .fas, .kl_gd_light .instructions h3 .far, .kl_gd_light .instructions h3 .fal, .kl_gd_light .instructions h3 .fad, .kl_gd_light .instructions h3 .fab, .kl_gd_light #kl_instructions h3 .fa, .kl_gd_light #kl_instructions h3 .fas, .kl_gd_light #kl_instructions h3 .far, .kl_gd_light #kl_instructions h3 .fal, .kl_gd_light #kl_instructions h3 .fad, .kl_gd_light #kl_instructions h3 .fab { background-color:var(--dt-color-dark-3); color:var(--dt-color-light-3); height:40px; width:40px; } /*main info*/ .kl_gd_light .main p, .kl_gd_light #kl_introduction { font-size:18pt; } /*footer block*/ .kl_gd_light .footer p { margin:0px 20px; font-size:14px; color:var(--dt-color-dark-3); } .kl_gd_light .footer a, .kl_gd_light .footer a:visited, .kl_gd_light .footer a:active { color:var(--dt-color-dark-1); } .kl_gd_light .footer a:hover { color:var(--dt-color-dark-3); } .kl_gd_light .footer { background-color:var(--dt-color-primary); padding:20px 15% 20px 20px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/footer-gray.png'); background-position:top right; background-repeat:no-repeat; background-size: contain; } /*---module list---*/ .kl_gd_light #kl_modules { background-color:var(--dt-color-light-3); } .kl_gd_light #kl_modules>ul li a { color:var(--dt-color-dark-1) !important; } .kl_gd_light #kl_modules>ul li a:hover { color:var(--dt-color-dark-3) !important; } /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------GD-LIGHT THEME END---------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------GD-DARK THEME START------------------------------------------- Version: 2020.08.20:03:44pm ----------------------------------------------------------------------------------- Insert description of theme here: this is a theme produced for the Graphic Design (ARTC) program ------------- ------------------------------------------------------------------------------------------------------------*/ /*---brand colors---*/ /*This changes the colors for institution items items like links.*/ .kl_gd_dark { /*primary colors for theme*/ --dt-color-primary: #79b82b; /*primary:green*/ --dt-color-primary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-primary-dark-text: var(--dt-color-light-2); /*light gray*/ --dt-color-primary-darkened-5: #6cac1d; /*5% darker*/ --dt-color-primary-darkened-10: #5e9e05; /*10% darker*/ --dt-color-primary-darkened-15: #519100; /*15% darker*/ --dt-color-primary-lightened-5: #88c73d; /*5% lighter*/ --dt-color-primary-lightened-10: #96d54b; /*10% lighter*/ --dt-color-primary-lightened-15: #96d54b; /*15% lighter*/ /*secondary colors for theme*/ --dt-color-secondary: var(--dt-color-dark-2); /*primary:dark gray*/ --dt-color-secondary-contrast: var(--dt-color-light-1); /*white*/ --dt-color-secondary-dark-text: var(--dt-color-light-2);/*light gray*/ --dt-color-secondary-darkened-5: #595959; /*5% darker*/ --dt-color-secondary-darkened-10: #4e4e4e; /*10% darker*/ --dt-color-secondary-darkened-15: #424242; /*15% darker*/ --dt-color-secondary-lightened-5: #727272; /*5% lighter*/ --dt-color-secondary-lightened-10: #7f7f7f; /*10% lighter*/ --dt-color-secondary-lightened-15: #8b8b8b; /*15% lighter*/ /*accent colors*/ --dt-color-accent: #4C5360; --dt-color-accent-contrast: var(--dt-color-light-1); /*gray background colors*/ --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: var(--dt-color-dark-1); /*tabs*/ --dp-tabs-nav-bg:#474747; --dp-tabs-nav-bg-text:var(--dt-color-light-1); --dp-tabs-nav-dark-text:#474747; --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); /*brand colors*/ --ic-brand-primary:var(--dt-color-primary);/*primary color - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-5:var(--dt-color-primary-darkened-5); /*5% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-10:var(--dt-color-primary-darkened-10); /*10% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-15:var(--dt-color-primary-darkened-15); /*15% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-5:var(--dt-color-primary-lightened-5); /*5% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-10:var(--dt-color-primary-lightened-10); /*10% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-15:var(--dt-color-primary-lightened-15); /*15% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ /*secondary colors*/ --ic-brand-secondary:var(--dt-color-secondary);/*primary color - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-5:var(--dt-color-secondary-darkened-5); /*5% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-10:var(--dt-color-secondary-darkened-10); /*10% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-15:var(--dt-color-secondary-darkened-15); /*15% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-5:var(--dt-color-secondary-lightened-5); /*5% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-10:var(--dt-color-secondary-lightened-10); /*10% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-15:var(--dt-color-secondary-lightened-15); /*15% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ /*brand primary button colors*/ --ic-brand-button-primary-bgd:var(--dt-color-primary); --ic-brand-button-primary-text:var(--dt-color-light-1); --ic-brand-button-primary-bgd-darkened-5:var(--dt-color-primary-darkened-5); --ic-brand-button-primary-bgd-darkened-15:var(--dt-color-primary-darkened-15); /*brand secondary button colors*/ --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text:var(--dt-color-light-1); --ic-brand-button-secondary-bgd-darkened-5:var(--dt-color-secondary-darkened-5); --ic-brand-button-secondary-bgd-darkened-15:var(--dt-color-secondary-darkened-15); /*brand font colors*/ --ic-brand-font-color-dark: #2D3B45; --ic-brand-font-color-dark-lightened-15: #4C5860; --ic-brand-font-color-dark-lightened-30: #6C757C; /*links*/ --ic-link-color: var(--dt-color-light-1); /*non-hover color*/ --ic-link-color-darkened-10: var(--dt-color-light-2); /*hover:10% darker*/ --ic-link-color-lightened-10: var(--dt-color-light-1); /*hover:10% lighter*/ /*buttons*/ --ic-brand-button-primary-bgd: var(--dt-color-primary); --ic-brand-button-primary-text: var(--dt-color-light-1); --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text: var(--dt-color-light-1); /*other global colors*/ --dt-black-transparency:rgba(0,0,0,0.25); --dt-color-light-1:#FFFFFF; --dt-color-light-2:#d9d9d9; --dt-color-dark-3:#333333; --dt-color-dark-2:#666666; --dt-color-dark-1:#000000; } /*-----global-----*/ /*container and general styles*/ .kl_gd_dark { background-color:var(--dt-color-dark-3); max-width: 1102px; height: 100%; font-family: source sans pro; font-size: 18px; color: var(--dt-color-light-1); text-align: left; position: relative; margin-bottom:20px; } .kl_gd_dark p, .kl_gd_dark li, .kl_gd_dark td { color:var(--dt-color-light-1); font-family: source sans pro; } .kl_gd_dark p, .kl_gd_dark h4, .kl_gd_dark h5, .kl_gd_dark h6 { margin:0px 40px 40px; } .kl_gd_dark .fa, .kl_gd_dark .fas, .kl_gd_dark .far, .kl_gd_dark .fal, .kl_gd_dark .fad, .kl_gd_dark .fab, .kl_gd_dark .icon-instructure { color:var(--dt-color-light-1); } .kl_gd_dark > div { padding-bottom:40px; background-color:var(--dt-color-dark-3); } /*---links---*/ .kl_gd_dark a:hover { text-decoration:none; } /*---headings---*/ /*heading styles for every type of block available*/ .kl_gd_dark h2, .kl_gd_dark h3, .kl_gd_dark h4, .kl_gd_dark h5, .kl_gd_dark h6 { font-family: Montserrat; font-weight: bold !important; position: relative; } .kl_gd_dark h3, .kl_gd_dark h2 { color: var(--dt-color-light-1); font-size: 28px; padding-left: 40px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: var(--dt-color-secondary); padding-right: 20px; margin: 0px 0px 30px 0px; background-image:url('http://www.mtsac.edu/studio13/canvas/graphic_design/heading-corner-green.png'); background-repeat:no-repeat; background-position:top right; background-size: 20%; } .kl_gd_dark #kl_banner_image { margin: 0px; padding: 0px ; } .kl_gd_dark #kl_banner_image h2 { margin: 0px; padding: 0px ; background-color:transparent; background-image:none; width:100%; } .kl_gd_dark h4 { color:var(--dt-color-primary); margin-top:40px; margin-bottom:20px; } .kl_gd_dark h5 { color: var(--dt-color-light-1); } .kl_gd_dark h6 { color: var(--dt-color-primary); } .kl_gd_dark .kl_quick_check h3 { margin-top:0px; } /*---heading icons---*/ /*font awesome icon styles within h3 heading tags*/ .kl_gd_dark h3 .fa, .kl_gd_dark h3 .fas, .kl_gd_dark h3 .far, .kl_gd_dark h3 .fal, .kl_gd_dark h3 .fad, .kl_gd_dark h3 .fab, .kl_gd_dark h2 .fa, .kl_gd_dark h2 .fas, .kl_gd_dark h2 .far, .kl_gd_dark h2 .fal, .kl_gd_dark h2 .fad, .kl_gd_dark h2 .fab { color: var(--dt-color-dark-3); background-color: var(--dt-color-primary); width: 65px; height: 65px; display: inline-flex; align-items: center; justify-content: center; position: relative; margin-top: -8px; margin-bottom: -8px; margin-left:-40px; margin-right:20px; } /*---list types---*/ /*list: unordered list*/ .kl_gd_dark ul, .kl_gd_dark ol { margin: 0px 40px 20px; padding:0px 40px; } .kl_gd_dark ul li { } .kl_gd_dark ul li::before { } /*list: ordered list*/ .kl_gd_dark ol { } .kl_gd_dark ol li { } .kl_gd_dark ol li::before { } /*---navigation---*/ /*nav: wrapper*/ .kl_gd_dark #kl_navigation ul { background-color: var(--dt-color-primary); width:100%; margin:0px; display:table; } /*nav: bullets*/ .kl_gd_dark #kl_navigation ul li { background-color:var(--dt-color-primary); list-style-type: none; width:25%; padding:10px 20px; display:table-cell; } .kl_gd_dark #kl_navigation ul li a, .kl_gd_dark #kl_navigation ul li a:visited, .kl_gd_dark #kl_navigation ul li a:active { color:var(--dt-color-light-1); font-weight:bold; } .kl_gd_dark #kl_navigation ul li:hover { background-color:var(--dt-color-secondary); } .kl_gd_dark #kl_navigation ul li a:hover { text-decoration:none; } /*nav: icons*/ .kl_gd_dark #kl_navigation .fa, .kl_gd_dark #kl_navigation .fab, .kl_gd_dark #kl_navigation .fad, .kl_gd_dark #kl_navigation .fal, .kl_gd_dark #kl_navigation .far, .kl_gd_dark #kl_navigation .fas { padding-right:10px; } /*---content block: list types---*/ /*cblock list: unordered list*/ .kl_gd_dark .cblock ul li { } .kl_gd_dark .cblock ul li::before { } /*cblock list: ordered list*/ .kl_gd_dark .cblock ol { } .kl_gd_dark .cblock ol li { } .kl_gd_dark .cblock ol li::before { } /*----buttons---*/ .kl_gd_dark .bs-btn-primary { background-color:var(--dt-color-primary) !important; color:var(--dt-color-dark-1) !important; border:0px; margin-right:20px; margin-bottom:5px; } .kl_gd_dark .bs-btn-primary:hover { background-color:var(--dt-color-light-1) !important; border:0px; } /*---homepage---*/ .kl_gd_dark.homepage { background-image: url('/courses/88055/files/4517549/preview'); background-repeat: no-repeat; background-position: top 15 0px center; } .kl_gd_dark #kl_custom_block_0 h2 { margin-top: 0px; } .kl_gd_dark.homepage h3 { color: var(--dt-color-primary); text-align: center; font-size: 20px; padding-left: 80px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: transparent; padding-right: 20px; } .kl_gd_dark.homepage .header { width: 100%; height: auto; margin-bottom: 300px; } .kl_gd_dark.homepage li { border: 0px; text-align: center; } .kl_gd_dark.homepage ol { list-style: none; counter-reset: my-awesome-counter; } .kl_gd_dark.homepage ol li { counter-increment: my-awesome-counter; } .kl_gd_dark.homepage ol li:before { content: counter(my-awesome-counter) ". "; border: 0px; text-align: center; color: var(--dt-color-secondary); font-weight: bold; font-size: 24px; } /*-----accordion-----*/ /*accordion icons-standard effect*/ .kl_gd_dark .kl_panel_heading .ui-accordion-tab .fa, .kl_gd_dark .kl_panel_heading .fas, .kl_gd_dark .kl_panel_heading .far, .kl_gd_dark .kl_panel_heading .fal, .kl_gd_dark .kl_panel_heading .fad, .kl_gd_dark .kl_panel_heading .fab { color: var(--dt-color-primary); position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; } /*inactive accordion/expander: border*/ .kl_gd_dark .ui-state-default, .kl_gd_dark .ui-widget-header .ui-state-default { border:3px solid var(--dt-color-secondary); } /*inactive accordion styling*/ .kl_gd_dark .kl_panels_wrapper .ui-accordion-header, .kl_gd_dark .kl_wrapper .ui-accordion-header { background-color:var(--dt-color-secondary); } /*inactive accordion link color*/ .kl_gd_dark .ui-accordion .ui-state-default a, .kl_gd_dark .ui-accordion .ui-state-default a:link, .kl_gd_dark .ui-accordion .ui-state-default a:visited { color:var(--dt-color-light-1); font-weight:bold; } /*inactive accordion link hover*/ .kl_gd_dark .ui-accordion .ui-state-default a:hover, { color:var(--dt-color-light-2); font-weight:bold; } /*inactive accordion ui icons*/ .kl_gd_dark .ui-state-default .ui-icon, .kl_gd_dark .ui-progressbar .kl_gd_dark .ui-widget-header .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*active accordion/expander: link*/ .kl_gd_dark .ui-accordion .ui-state-active a, .kl_gd_dark .ui-accordion .ui-state-active a:link, .kl_gd_dark .ui-accordion .ui-state-active a:visited { color:var(--dt-color-dark-3); font-weight:bold; } /*-----expander-----*/ .kl_gd_dark #kl_panel_expander h3 { color: var(--dt-color-light-1); background-color: var(--dt-color-primary); } /*-----tabs-----*/ /*styling for tab blocks-add necessary items*/ .kl_gd_dark .ui-tabs { margin:0px 40px; } /*all tabs: properties*/ .kl_gd_dark .ui-tabs .ui-tabs-nav li { min-width:150px; } /*all tabs: links*/ .kl_gd_dark .ui-tabs .ui-tabs-nav li a { color:var(--dt-color-light-1); font-weight:bold; width:100%; text-align:center; } .kl_gd_dark .ui-tabs .ui-tabs-nav li.ui-state-hover a, .kl_gd_dark .ui-tabs .ui-tabs-nav li:hover a { color:var(--dt-color-light-2); } /*active tab: border & bg*/ .kl_gd_dark .ui-tabs .ui-tabs-nav li.ui-tabs-active, .kl_gd_dark .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover, .kl_gd_dark .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover { border:0px; background-color:var(--dt-color-dark-2); } /*inactive tab: background and border color*/ .kl_gd_dark .kl_panel_heading.ui-widget-header .ui-state-default, .kl_gd_dark .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) { background-color:var(--dt-color-primary); border:0px; font-weight:bold; } /*inactive tab: border*/ .kl_gd_dark .ui-state-default, .kl_gd_dark .ui-widget-header .ui-state-default { border:0px; } /*active tab: positining for bottom border overlap*/ .kl_gd_dark .ui-tabs .ui-tabs-nav li { top:3px; } /*active tab: border thickness*/ .kl_gd_dark .ui-state-active, .kl_gd_dark .ui-progressbar .ui-widget-header, .kl_gd_dark .ui-widget-header .ui-state-active, .kl_gd_dark .ui-widget-header .ui-progressbar .ui-widget-header, .kl_gd_dark .ui-progressbar .ui-widget-header .ui-widget-header { border:0px; } /*active panel: border thickness*/ .kl_gd_dark .ui-widget-content { border:0px; border-top:0px; background-color:var(--dt-color-dark-2); } /*active panel: top border thickness*/ .kl_gd_dark .ui-tabs .ui-tabs-nav { border:0px; } /*tab: corners*/ .kl_gd_dark .ui-corner-all, .kl_gd_dark .ui-corner-top, .kl_gd_dark .ui-corner-right, .kl_gd_dark .ui-corner-tr { border-radius:0px; } .kl_gd_dark .ui-corner-all, .kl_gd_dark .ui-corner-top, .kl_gd_dark .ui-corner-left, .kl_gd_dark .ui-corner-tl { border-radius:0px; } /*panel: contents*/ .kl_gd_dark .ui-tabs .ui-tabs-panel { padding-top: 60px; } /*panel contents*/ /*panel tabs-active*/ /*panel tabs-hover*/ /*tab icons*/ /*tab icons-standard effect*/ .kl_gd_dark .kl_panel_heading .ui-tabs-tab .fa, .kl_gd_dark .kl_panel_heading .fas, .kl_gd_dark .kl_panel_heading .far, .kl_gd_dark .kl_panel_heading .fal, .kl_gd_dark .kl_panel_heading .fad, .kl_gd_dark .kl_panel_heading .fab { color: var(--dt-color-light-1); position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; margin-top:0px; margin-bottom:10px; } /*tab icons-hover effect*/ .kl_gd_dark .kl_panel_heading .ui-tabs-tab .fa:hover, .kl_gd_dark .kl_panel_heading .fas:hover, .kl_gd_dark .kl_panel_heading .far:hover .kl_gd_dark .kl_panel_heading .fal:hover .kl_gd_dark .kl_panel_heading .fad:hover .kl_gd_dark .kl_panel_heading .fab:hover { color: var(--dt-color-light-2); background-color: rgba(var(--color), 0.8); } /*-----banner-----*/ .kl_gd_dark #kl_banner { background-color: var(--dt-color-primary); } /*banner: number block*/ .kl_gd_dark #kl_banner_left { display:inline-block; padding: 20px; } /*banner: title block*/ .kl_gd_dark #kl_banner_right { display:inline-block; padding: 20px; padding-bottom: 23px; padding-top: 23px; } .kl_gd_dark #kl_banner h2 { padding-top:0px; padding-bottom:0px; border-bottom: var(--dt-color-light-1) solid 3px; margin:0px; } .kl_gd_dark #kl_banner2 { background-color: var(--dt-color-secondary); padding-top: 1px; padding-bottom: 1px; } .kl_gd_dark .kl_subtitle { background-color: var(--dt-color-secondary); margin:0px; color:var(--dt-color-light-1); padding:10px 20px; } .kl_gd_dark #kl_description { background-color:var(--dt-color-dark-3); margin-top:0px; margin-bottom:0px; color:var(--dt-color-light-1); padding:10px 20px; } /*banner: banner image*/ .kl_gd_dark #kl_banner_image { margin:0px; width:100%; height:auto; border-bottom:5px solid var(--dt-color-light-1); } /*---tables---*/ /*standard table: overall*/ .kl_gd_dark .table-bordered, .kl_gd_dark .ic-Table { width:100% !important; margin:0px 40px !important; display:table; } /*ic table: headers*/ .kl_gd_dark .ic-Table.ic-Table--striped th, .kl_gd_dark .table th { background-color:var(--dt-color-secondary); color:var(--dt-color-light-1); } /*all table: rows*/ .kl_gd_dark .ic-Table.ic-Table--striped tbody tr:nth-child(odd), .kl_gd_dark .table-bordered tr:nth-child(odd) { background-color:var(--dt-color-dark-1); } .kl_gd_dark .ic-Table.ic-Table--striped tbody tr:nth-child(even), .kl_gd_dark .table-bordered tr:nth-child(even) { background-color:var(--dt-color-dark-3); } .kl_gd_dark .table-bordered td { background-color:transparent !important; } /*---progress bar-icon version---*/ /*progress bar: wrapper*/ .kl_gd_dark .kl_progress_icons { background-color:var(--dt-color-secondary); padding:20px; } /*progress bar: main bar*/ .kl_gd_dark .kl_complete { border:0px; } /*progress bar: completed*/ .kl_gd_dark .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_gd_dark .kl_progress_icons li.kl_current .kl_colored_bar { background-color:var(--dt-color-primary); } /*---progress bar-standard version---*/ /*progress bar: bg color*/ .kl_gd_dark .kl_progress-bar { background-color:var(--dt-color-primary) !important; } .kl_gd_dark .kl_progress_icons ul li { border:0px; } .kl_gd_dark .kl_progress_icons li a { top:-1px; right:3px; border:5px solid var(--dt-color-light-1); } .kl_gd_dark .kl_progress_icons li i { display:flex; align-items: center; justify-content: center; } .kl_gd_dark .kl_progress_icons li .kl_colored_bar { border:0px; } /*---specific blocks---*/ /*header image block*/ .kl_gd_dark .kl_image_full_width { border-bottom:10px solid var(--dt-color-light-1); } /*objectives block*/ .kl_gd_dark #kl_objectives2 { background-color:var(--dt-color-primary); padding:20px 40px 40px 40px; margin-bottom:2px; } .kl_gd_dark #kl_objectives2 h3 { background-color:transparent; background-image:none; color:var(--dt-color-dark-3); margin-top:20px; margin-bottom:20px; padding:0px; margin-left:40px; } .kl_gd_dark #kl_objectives2 ol, .kl_gd_dark #kl_objectives2 ul { margin:0px; list-style: none; padding:0px; } .kl_gd_dark #kl_objectives2 ol li, .kl_gd_dark #kl_objectives2 ul li { background-color:var(--dt-black-transparency); padding: 20px 40px; margin-bottom:10px; } .kl_gd_dark #kl_objectives2 ol li:before, .kl_gd_dark #kl_objectives2 ul li:before { content:none; } .kl_gd_dark #kl_objectives2 h3 .fa, .kl_gd_dark #kl_objectives2 h3 .fas, .kl_gd_dark #kl_objectives2 h3 .far, .kl_gd_dark #kl_objectives2 h3 .fal, .kl_gd_dark #kl_objectives2 h3 .fad, .kl_gd_dark #kl_objectives2 h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; } /*assignments block*/ .kl_gd_dark #kl_assignments2 { background-color:var(--dt-color-secondary); padding:20px 40px 40px 40px; } .kl_gd_dark #kl_assignments2 h3 { background-color:transparent; background-image:none; margin-top:20px; margin-bottom:20px; padding:0px; margin-left:40px; } .kl_gd_dark #kl_assignments2 p { margin:0px 0px 20px 0px; } .kl_gd_dark #kl_assignments2 ol, .kl_gd_dark #kl_assignments2 ul { margin:0px; list-style: none; padding:0px; } .kl_gd_dark #kl_assignments2 ol li, .kl_gd_dark #kl_assignments2 ul li { background-color:var(--dt-black-transparency); padding: 20px 40px; } .kl_gd_dark #kl_assignments2 ol li:before, .kl_gd_dark #kl_assignments2 ul li:before { content:none; } .kl_gd_dark #kl_assignments2 h3 .fa, .kl_gd_dark #kl_assignments2 h3 .fas, .kl_gd_dark #kl_assignments2 h3 .far, .kl_gd_dark #kl_assignments2 h3 .fal, .kl_gd_dark #kl_assignments2 h3 .fad, .kl_gd_dark #kl_assignments2 h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; } /*assignments: table*/ .kl_gd_dark #kl_assignments2 table, .kl_gd_dark #kl_assignments2 th, .kl_gd_dark #kl_assignments2 td { border: 1px solid var(--dt-color-dark-2); margin:0px !important; } .kl_gd_dark #kl_assignments2 th { margin-top:0px; padding:10px 20px; background-color:var(--dt-color-secondary-darkened-10); } .kl_gd_dark #kl_assignments2 td:nth-child(1) { font-family:Montserrat; font-weight:bold; width:10%; background-color:var(--dt-color-primary); padding:20px; text-align:center; font-size:36px; color:var(--dt-color-dark-3); } .kl_gd_dark #kl_assignments2 td:nth-child(2) { background-color:var(--dt-color-dark-3); padding:20px; font-size:24px; } /*---quick check block---*/ .kl_gd_dark .kl_quick_check { background-color: var(--dt-color-dark-2); padding-top:40px !imporant; padding-bottom:40px !imporant; padding-left:40px !important; padding-right:40px !important; margin:20px 40px !important; position: relative; border:0px !important; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_gd_dark .kl_quick_check h3 { background-color:transparent; margin-top:0px; margin-bottom:20px; padding:0px; } .kl_gd_dark .kl_quick_check p { margin:0px 0px 20px 0px; } .kl_gd_dark .kl_quick_check h3 .fa, .kl_gd_dark .kl_quick_check h3 .fas, .kl_gd_dark .kl_quick_check h3 .far, .kl_gd_dark .kl_quick_check h3 .fal, .kl_gd_dark .kl_quick_check h3 .fad, .kl_gd_dark .kl_quick_check h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; margin-left:0px; margin-right:20px; } .kl_gd_dark .kl_quick_check_response { background-color:var(--dt-color-dark-3) !important; } /*problems block*/ .kl_gd_dark .problems { background-color:var(--dt-color-dark-2); padding:40px 40px 20px 40px; margin:0px 40px 40px 40px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_gd_dark .problems h3 { margin:0px 0px 10px 0px; padding:0px; background-image:none; } .kl_gd_dark .problems h3 .fa, .kl_gd_dark .problems h3 .fas, .kl_gd_dark .problems h3 .far, .kl_gd_dark .problems h3 .fal, .kl_gd_dark .problems h3 .fad, .kl_gd_dark .problems h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; margin-left:0px; margin-right:20px; } .kl_gd_dark .problems p { margin:0px 0px 20px 0px; padding:0px; } /*instruction block*/ .kl_gd_dark .instructions, .kl_gd_dark #kl_instructions { background-color: #333333; color: #ffffff; padding: 20px 40px; margin-top: 20px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/corner-element-green.png'); background-position: top right; background-repeat: no-repeat; background-size:25%; } .kl_gd_dark .instructions ol, .kl_gd_dark .instructions ul, .kl_gd_dark #kl_instructions ol, .kl_gd_dark #kl_instructions ul { margin-top:20px; margin-left:20px; padding:0px; } .kl_gd_dark .instructions p, .kl_gd_dark #kl_instructions p { margin:0px 0px 20px 0px; padding:0px; } /*submission block*/ .kl_gd_dark .submission { background-color: #d9d9d9; padding: 40px; } .kl_gd_dark .submission h3 { background-color:transparent; background-image:none; margin-bottom:20px; padding:0px; margin-left:40px; } .kl_gd_dark .submission h3 .fa, .kl_gd_dark .submission h3 .fas, .kl_gd_dark .submission h3 .far, .kl_gd_dark .submission h3 .fal, .kl_gd_dark .submission h3 .fad, .kl_gd_dark .submission h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; } .kl_gd_dark .submission ul { list-style-type: none; margin:0px; padding:0px; } .kl_gd_dark .submission li { padding: 20px; background-color: var(--dt-color-light-2); margin-bottom: 10px; } /*video block*/ .kl_gd_dark iframe { display:block !important; width: 800px; height: 450px; margin-left:auto; margin-right:auto; border:5px solid var(--dt-color-dark-2); } /*instructions block*/ .kl_gd_dark .instructions, .kl_gd_dark #kl_instructions { background-color: var(--dt-color-dark-3); color: var(--dt-color-light-1); padding: 40px 40px 20px 40px; margin-top: 20px; } .kl_gd_dark .instructions h3, .kl_gd_dark #kl_instructions h3 { margin:0px 0px 10px 40px; padding:0px; background-image:none; background-color:transparent; } .kl_gd_dark .instructions h3 .fa, .kl_gd_dark .instructions h3 .fas, .kl_gd_dark .instructions h3 .far, .kl_gd_dark .instructions h3 .fal, .kl_gd_dark .instructions h3 .fad, .kl_gd_dark .instructions h3 .fab, .kl_gd_dark #kl_instructions h3 .fa, .kl_gd_dark #kl_instructions h3 .fas, .kl_gd_dark #kl_instructions h3 .far, .kl_gd_dark #kl_instructions h3 .fal, .kl_gd_dark #kl_instructions h3 .fad, .kl_gd_dark #kl_instructions h3 .fab { background-color:var(--dt-black-transparency); color:var(--dt-color-light-1); height:40px; width:40px; } /*main info*/ .kl_gd_dark .main p, .kl_gd_dark #kl_introduction { font-size:18pt; } /*footer block*/ .kl_gd_dark .footer p { margin:0px 20px; font-size:14px; color:var(--dt-color-dark-3); } .kl_gd_dark .footer a, .kl_gd_dark .footer a:visited, .kl_gd_dark .footer a:active { color:var(--dt-color-dark-1); } .kl_gd_dark .footer a:hover { color:var(--dt-color-dark-3); } .kl_gd_dark .footer { background-color:var(--dt-color-primary); padding:20px 15% 20px 20px; background-image:url('https://www.mtsac.edu/studio13/canvas/graphic_design/footer-gray.png'); background-position:top right; background-repeat:no-repeat; background-size: contain; } /*---module list---*/ .kl_gd_dark #kl_modules { background-color:var(--dt-color-dark-2); } .kl_gd_dark #kl_modules>ul li a { color:var(--dt-color-light-1) !important; } .kl_gd_dark #kl_modules>ul li a:hover { color:var(--dt-color-light-2) !important; } /*-----------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------GD-DARK THEME END---------------------------------------------*/ /*-----------------------------------------------------------------------------------------------------------*/ /*---brand colors---*/ /*This changes the colors for institution items items like links.*/ .kl_nf_light { /*primary colors for theme*/ --dt-color-primary: #283593; /*primary:dark purple*/ --dt-color-primary-contrast: #FFFFFF; /*white*/ --dt-color-primary-dark-text: #D9D9D9; /*light gray*/ --dt-color-primary-darkened-5: #1a1954; /*5% darker*/ --dt-color-primary-darkened-10: #0d0e49; /*10% darker*/ --dt-color-primary-darkened-15: #00003e; /*15% darker*/ --dt-color-primary-lightened-5: #302b6b; /*5% lighter*/ --dt-color-primary-lightened-10: #3c3578; /*10% lighter*/ --dt-color-primary-lightened-15: #473f84; /*15% lighter*/ /*secondary colors for theme*/ --dt-color-secondary: #9E1F63; /*primary:red violet*/ --dt-color-secondary-contrast: #FFFFFF; /*white*/ --dt-color-secondary-dark-text: #D9D9D9;/*light gray*/ --dt-color-secondary-darkened-5: #910059; /*5% darker*/ --dt-color-secondary-darkened-10: #84004e; /*10% darker*/ --dt-color-secondary-darkened-15: #770043; /*15% darker*/ --dt-color-secondary-lightened-5: #ad3370; /*5% lighter*/ --dt-color-secondary-lightened-10: #bb427c; /*10% lighter*/ --dt-color-secondary-lightened-15: #c95087; /*15% lighter*/ /*accent colors*/ --dt-color-accent: #4C5360; --dt-color-accent-contrast: #FFFFFF; /*gray background colors*/ --dt-color-graybg: #E6E6E6; --dt-color-graybg-contrast: #000000; /*tabs*/ --dp-tabs-nav-bg:#474747; --dp-tabs-nav-bg-text:#ffffff; --dp-tabs-nav-dark-text:#474747; --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); /*brand colors*/ --ic-brand-primary:var(--dt-color-primary);/*primary color - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-5:var(--dt-color-primary-darkened-5); /*5% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-10:var(--dt-color-primary-darkened-10); /*10% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-darkened-15:var(--dt-color-primary-darkened-15); /*15% darker - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-5:var(--dt-color-primary-lightened-5); /*5% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-10:var(--dt-color-primary-lightened-10); /*10% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ --ic-brand-primary-lightened-15:var(--dt-color-primary-lightened-15); /*15% lighter - MODIFY VARIABLE IN PRIMARY COLORS*/ /*secondary colors*/ --ic-brand-secondary:var(--dt-color-secondary);/*primary color - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-5:var(--dt-color-secondary-darkened-5); /*5% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-10:var(--dt-color-secondary-darkened-10); /*10% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-darkened-15:var(--dt-color-secondary-darkened-15); /*15% darker - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-5:var(--dt-color-secondary-lightened-5); /*5% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-10:var(--dt-color-secondary-lightened-10); /*10% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ --ic-brand-secondary-lightened-15:var(--dt-color-secondary-lightened-15); /*15% lighter - MODIFY VARIABLE IN SECONDARY COLORS*/ /*brand primary button colors*/ --ic-brand-button-primary-bgd:var(--dt-color-primary); --ic-brand-button-primary-text:#ffffff; --ic-brand-button-primary-bgd-darkened-5:var(--dt-color-primary-darkened-5); --ic-brand-button-primary-bgd-darkened-15:var(--dt-color-primary-darkened-15); /*brand secondary button colors*/ --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text:#ffffff; --ic-brand-button-secondary-bgd-darkened-5:var(--dt-color-secondary-darkened-5); --ic-brand-button-secondary-bgd-darkened-15:var(--dt-color-secondary-darkened-15); /*brand font colors*/ --ic-brand-font-color-dark: #2D3B45; --ic-brand-font-color-dark-lightened-15: #4C5860; --ic-brand-font-color-dark-lightened-30: #6C757C; /*links*/ --ic-link-color: var(--dt-color-primary); /*non-hover color*/ --ic-link-color-darkened-10: var(--dt-color-primary-darkened-10); /*hover:10% darker*/ --ic-link-color-lightened-10: var(--dt-color-primary-lightened-10); /*hover:10% lighter*/ /*buttons*/ --ic-brand-button-primary-bgd: var(--dt-color-primary); --ic-brand-button-primary-text: #ffffff; --ic-brand-button-secondary-bgd:var(--dt-color-secondary); --ic-brand-button-secondary-text: #ffffff; /*other global colors*/ --dt-black-transparency:rgba(0,0,0,0.25); --dt-color-light-1:#FFFFFF; --dt-color-light-2:#d9d9d9; --dt-color-dark-3:#333333; --dt-color-dark-2:#666666; --dt-color-dark-1:#000000; } /*-----global-----*/ /*container and general styles*/ .kl_nf_light { max-width: 1102px; height: 100%; font-family: source sans pro; font-size: 18px; color: black; text-align: left; position: relative; } .kl_nf_light p, .kl_nf_light li, .kl_nf_light td { font-family: source sans pro; } .kl_nf_light p { margin-bottom:20px; } /*---headings---*/ /*heading styles for every type of block available*/ .kl_nf_light h2, .kl_nf_light h3, .kl_nf_light h4, .kl_nf_light h5, .kl_nf_light h6 { font-family: Raleway; font-weight: bold; position: relative; } .kl_nf_light h2, .kl_nf_light h3 { color: #FFFFFF; } .kl_nf_light h4 { color: var(--dt-color-secondary); } .kl_nf_light h5 { color: var(--dt-color-primary); } .kl_nf_light h6 { color: var(--dt-color-secondary); } .kl_nf_light h3 { font-size: 20px; padding-left: 20px; padding-right: 20px; padding-top: 8px; padding-bottom: 8px; background-color: var(--dt-color-primary); padding-right: 20px; margin: 30px 0px; } .kl_nf_light .kl_quick_check h3 { margin-top:0px; } .kl_nf_light h4 { color:var(--dt-color-secondary); margin-top:40px; margin-bottom:20px; } /*---heading icons---*/ /*font awesome icon styles within h3 heading tags*/ .kl_nf_light h3 .fa, .kl_nf_light h3 .fas, .kl_nf_light h3 .far, .kl_nf_light h3 .fal, .kl_nf_light h3 .fad, .kl_nf_light h3 .fab { color: white; background-color: var(--dt-color-secondary); width: 65px; height: 65px; border-radius: 65px; border: solid white 5px; display: inline-flex; align-items: center; justify-content: center; position: relative; margin-top: -20px; margin-bottom: -20px; margin-right:10px; } @media (max-width: 800px) { .kl_nf_light h3 .fa, .kl_nf_light h3 .fas, .kl_nf_light h3 .far, .kl_nf_light h3 .fal, .kl_nf_light h3 .fad, .kl_nf_light h3 .fab { display:none; } } /*---list types---*/ /*list: unordered list*/ .kl_nf_light ul { margin:0px 20px 20px; } .kl_nf_light ul li { } .kl_nf_light ul li::before { color: var(--dt-color-secondary); } /*list: ordered list*/ .kl_nf_light ol { margin:0px 20px 20px -20px; list-style: none; counter-reset: my-awesome-counter; } .kl_nf_light ol li { counter-increment: my-awesome-counter; } .kl_nf_light ol li::before { content: counter(my-awesome-counter) ". "; border: 0px; text-align: center; color: #9E1F63; font-weight: bold; font-size: 24px; } /*---navigation---*/ /*nav: wrapper*/ .kl_nf_light #kl_navigation ul { background-color: var(--dt-color-primary); width:100%; margin:0px; display:table; } /*nav: bullets*/ .kl_nf_light #kl_navigation ul li { background-color:var(--dt-color-primary); list-style-type: none; width:25%; padding:10px 20px; display:table-cell; } .kl_nf_light #kl_navigation ul li a, .kl_nf_light #kl_navigation ul li a:visited, .kl_nf_light #kl_navigation ul li a:active { color:#FFFFFF; font-weight:bold; } .kl_nf_light #kl_navigation ul li:hover { background-color:var(--dt-color-secondary); } .kl_nf_light #kl_navigation ul li a:hover { text-decoration:none; } /*nav: icons*/ .kl_nf_light #kl_navigation .fa, .kl_nf_light #kl_navigation .fab, .kl_nf_light #kl_navigation .fad, .kl_nf_light #kl_navigation .fal, .kl_nf_light #kl_navigation .far, .kl_nf_light #kl_navigation .fas { padding-right:10px; } /*---content block: list types---*/ /*cblock list: unordered list*/ .kl_nf_light .cblock ul li { list-style-position: inside; padding: 10px; margin-bottom: -3px; border: 3px solid var(--dt-color-primary); } .kl_nf_light .cblock ul li::before { color: #9E1F63; } /*cblock list: ordered list*/ .kl_nf_light .cblock ol { list-style: none; counter-reset: my-awesome-counter; } .kl_nf_light .cblock ol li { counter-increment: my-awesome-counter; list-style-position: inside; padding: 10px; margin-bottom: -3px; border: 3px solid #262261; } .kl_nf_light .cblock ol li::before { content: counter(my-awesome-counter) ". "; border: 0px; text-align: center; color: var(--dt-color-secondary); font-weight: bold; font-size: 24px; } .kl_nf_light .cblock ol ol li, .kl_nf_light .cblock ul ul li { border:0px; } /*-----banner-----*/ /*banner: wrapper*/ .kl_nf_light #kl_banner { background-color: var(--dt-color-primary); border-top: solid white 3px; border-bottom: solid white 3px; } /*banner: number*/ .kl_nf_light #kl_banner_left { padding: 20px; } /*banner: heading*/ .kl_nf_light #kl_banner_right { padding: 20px; padding-bottom: 23px; padding-top: 23px; border-left: solid white 3px; } .kl_nf_light #kl_banner2 { background-color: var(--dt-color-secondary); padding-top: 1px; padding-bottom: 1px; } /*banner: image*/ .kl_nf_light #kl_banner_image { border-bottom:3px solid #FFFFFF; } .kl_nf_light .subtitle { background-color:var(--dt-color-secondary); padding:20px 40px; font-weight:bold; color:var(--dt-color-light-1); margin-bottom:20px; } .kl_nf_light .subtitle p { font-family: Raleway, sans-serif; margin:0px; } /*----buttons---*/ .kl_nf_light .bs-btn-primary { background-color:var(--dt-color-secondary) !important; color:var(--dt-color-light-1) !important; border:0px; margin-right:20px; margin-bottom:5px; } .kl_nf_light .bs-btn-primary:hover { background-color:var(--dt-color-primary) !important; border:0px; } /*button icons*/ .kl_nf_light .bs-btn-primary .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*---homepage---*/ .kl_nf_light.homepage { background-image: url('https://www.mtsac.edu/studio13/canvas/nutrition/top.png'); background-repeat: no-repeat; background-position: top 15 0px center; } .kl_nf_light #kl_custom_block_0 h2 { margin-top: 0px; } .kl_nf_light.homepage h3 { color: var(--dt-color-primary); text-align: center; font-size: 20px; padding-left: 80px; padding-right: 20PX; padding-top: 8px; padding-bottom: 8px; background-color: transparent; padding-right: 20px; } .kl_nf_light.homepage .header { width: 100%; height: auto; margin-bottom: 300px; } .kl_nf_light.homepage li { border: 0px; text-align: center; } .kl_nf_light.homepage ol { list-style: none; counter-reset: my-awesome-counter; } .kl_nf_light.homepage ol li { counter-increment: my-awesome-counter; } .kl_nf_light.homepage ol li:before { content: counter(my-awesome-counter) ". "; border: 0px; text-align: center; color: var(--dt-color-secondary); font-weight: bold; font-size: 24px; } /*-----accordion-----*/ /*accordion icons-standard effect*/ .kl_nf_light .kl_panel_heading .ui-accordion-tab .fa, .kl_nf_light .kl_panel_heading .fas, .kl_nf_light .kl_panel_heading .far, .kl_nf_light .kl_panel_heading .fal, .kl_nf_light .kl_panel_heading .fad, .kl_ms3_light .kl_panel_heading .fab { background-color:transparent; margin:0px 10px 0px 0px; border:0px; height:auto; width:auto; } /*inactive accordion/expander: border*/ .kl_nf_light .ui-state-default, .kl_nf_light .ui-widget-header .ui-state-default { border:3px solid var(--dt-color-secondary); } /*inactive accordion styling*/ .kl_nf_light .kl_panels_wrapper .ui-accordion-header, .kl_nf_light .kl_wrapper .ui-accordion-header { background-color:var(--dt-color-secondary); } /*inactive accordion link color*/ .kl_nf_light .ui-accordion .ui-state-default a, .kl_nf_light .ui-accordion .ui-state-default a:link, .kl_nf_light .ui-accordion .ui-state-default a:visited { color:#FFFFFF; font-weight:bold; } /*inactive accordion link hover*/ .kl_nf_light .ui-accordion .ui-state-default a:hover { color:#d9d9d9; font-weight:bold; } /*inactive accordion ui icons*/ .kl_nf_light .ui-state-default .ui-icon, .kl_nf_light .ui-progressbar .ui-widget-header .ui-icon { background-image: url("https://du11hjcvx0uqb.cloudfront.net/dist/images/jqueryui/ui-icons_ffffff_256x240-ed886cdf6e.png"); } /*-----expander-----*/ .kl_nf_light #kl_panel_expander h3 { color: #FFFFFF; background-color: var(--dt-color-primary); } /*-----tabs-----*/ /*styling for tab blocks-add necessary items*/ /*all tabs: properties*/ .kl_nf_light .ui-tabs .ui-tabs-nav li { min-width:150px; } /*all tabs: links*/ .kl_nf_light .ui-tabs .ui-tabs-nav li a { font-weight:bold; width:100%; text-align:center; } .kl_nf_light .ui-tabs .ui-tabs-nav li.ui-state-hover a, .kl_nf_light .ui-tabs .ui-tabs-nav li:hover a { color:var(--dt-color-secondary); } /*active tab: border & bg*/ .kl_nf_light .ui-tabs .ui-tabs-nav li.ui-tabs-active, .kl_nf_light .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover, .kl_nf_light .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover { border-color:var(--dt-color-primary); } /*inactive tab: background and border color*/ .kl_nf_light .kl_panel_heading.ui-widget-header .ui-state-default, .kl_nf_light .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) { background-color:#f0f0f0; border:3px solid var(--dt-color-secondary); font-weight:bold; } /*inactive tab: border*/ .kl_nf_light .ui-state-default, .kl_nf_light .ui-widget-header .ui-state-default { border:3px solid var(--dt-color-secondary); } /*active tab: positining for bottom border overlap*/ .kl_nf_light .ui-tabs .ui-tabs-nav li { top:1px; } /*active tab:links*/ .kl_nf_light .ui-tabs .ui-tabs-nav li.ui-tabs-active { top:3px; margin-top:-2px; padding-bottom:3px; } /*active tab: border thickness*/ .kl_nf_light .ui-state-active, .kl_nf_light .ui-progressbar .ui-widget-header, .kl_nf_light .ui-widget-header .ui-state-active, .kl_nf_light .ui-widget-header .kl_nf_light .ui-progressbar .ui-widget-header, .kl_nf_light .ui-progressbar .ui-widget-header .ui-widget-header { border:3px solid var(--dt-color-primary); } /*active panel: border thickness*/ .kl_nf_light .ui-widget-content { border:3px solid var(--dt-color-primary); border-top:0px; } /*active panel: top border thickness*/ .kl_nf_light .ui-tabs .ui-tabs-nav { border-bottom:3px solid var(--dt-color-primary); } /*tab: corners*/ .kl_nf_light .ui-corner-all, .kl_nf_light .ui-corner-top, .kl_nf_light .ui-corner-right, .kl_nf_light .ui-corner-tr { border-radius:0px; } .kl_nf_light .ui-corner-all, .kl_nf_light .ui-corner-top, .kl_nf_light .ui-corner-left, .kl_nf_light .ui-corner-tl { border-radius:0px; } /*panel: contents*/ .kl_nf_light .ui-tabs-panel { padding: 40px; } @media (max-width: 800px) { .kl_nf_light .kl_panel_heading .ui-tabs-tab .fa, .kl_nf_light .kl_panel_heading .fas, .kl_nf_light .kl_panel_heading .far, .kl_nf_light .kl_panel_heading .fal, .kl_nf_light .kl_panel_heading .fad, .kl_nf_light .kl_panel_heading .fab { display:none !important; } } /*tab icons*/ /*tab icons-standard effect*/ .kl_nf_light .ui-tabs-nav .fa, .kl_nf_light .ui-tabs-nav .fas, .kl_nf_light .ui-tabs-nav .far, .kl_nf_light .ui-tabs-nav .fal, .kl_nf_light .ui-tabs-nav .fad, .kl_nf_light .ui-tabs-nav .fab, .kl_nf_light .ui-tabs-nav .icon-instructure { position:relative; left:0; border:0px; font-size:200%; background-color: transparent; width: 100%; height: auto; border-radius: 48px; display: flex; align-items: center; justify-content: center; margin-top:0px; margin-bottom:10px; } /*-----banner-----*/ .kl_nf_light #kl_banner { background-color: var(--dt-color-primary); border-top: solid #FFFFFF 3px; border-bottom: solid #FFFFFF 3px; } /*banner: number block*/ .kl_nf_light #kl_banner_left { display:inline-block; padding: 20px; } /*banner: title block*/ .kl_nf_light #kl_banner_right { display:inline-block; padding: 20px; padding-bottom: 23px; padding-top: 23px; border-left: #FFFFFF solid 3px; } .kl_nf_light #kl_banner h2 { padding-top:0px; padding-bottom:0px; border-bottom: #FFFFFF solid 3px; margin-top:0px; margin-bottom:0px; } .kl_nf_light #kl_banner2 { background-color: var(--dt-color-secondary); padding-top: 1px; padding-bottom: 1px; } .kl_nf_light .kl_subtitle { background-color: var(--dt-color-secondary); margin-top:0px; margin-bottom:0px; color:#FFFFFF; padding:10px 20px; border-bottom:3px solid #FFFFFF; } .kl_nf_light #kl_description { background-color: var(--dt-color-secondary); margin-top:0px; margin-bottom:0px; color:#FFFFFF; padding:10px 20px; } @media (max-width: 800px) { .kl_nf_light #kl_banner_right { border-top: #FFFFFF solid 3px; border-left: #FFFFFF solid 0px; width:100%; } .kl_nf_light #kl_banner h2 { font-size:24px; } } /*---tables---*/ /*table: headers*/ .kl_nf_light .ic-Table.ic-Table--striped th, .kl_nf_light .table th { background-color:var(--dt-color-secondary); color:#FFFFFF; } /*---quick check---*/ .kl_nf_light .kl_quick_check { border:3px solid var(--dt-color-primary) !important; } /*---progress bar-icon version---*/ /*progress bar: wrapper*/ .kl_nf_light .kl_progress_icons { background-color:var(--dt-color-secondary); padding:20px; } /*progress bar: main bar*/ .kl_nf_light .kl_complete { border:0px; } /*progress bar: completed*/ .kl_nf_light .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_nf_light .kl_progress_icons li.kl_current .kl_colored_bar { background-color:var(--dt-color-primary); } /*---progress bar-standard version---*/ /*progress bar: bg color*/ .kl_nf_light .kl_progress-bar { background-color:var(--dt-color-primary) !important; } .kl_nf_light .kl_progress_icons ul li { border:0px; } .kl_nf_light .kl_progress_icons li a { top:-1px; right:3px; border:5px solid #FFFFFF; } .kl_nf_light .kl_progress_icons li i { display:flex; align-items: center; justify-content: center; } .kl_nf_light .kl_progress_icons li .kl_colored_bar { border:0px; } /*main info*/ .kl_nf_light #kl_introduction p { font-size:18pt !important; } /*footer block*/ .kl_nf_light .kl_user_details p { margin:0px 20px; font-size:14px; color:var(--dt-color-light-1); } .kl_nf_light .kl_user_details a, .kl_nf_light .kl_user_details a:visited, .kl_nf_light .kl_user_details a:active { color:var(--dt-color-light-1); } .kl_nf_light .kl_user_details a:hover { color:var(--dt-color-light-3); text-decoration:none !important; } .kl_nf_light .kl_user_details { background-color:#9e1f63; font-size:12pt; padding:20px 40px; background-image:url('https://www.mtsac.edu/studio13/images/mtsac-logo-white.png'); background-position:calc(100% - 40px); background-repeat:no-repeat; background-size: 152px 100px; margin:40px 0px; } /*footer: media queries*/ @media (max-width: 800px) { .kl_nf_light .kl_user_details { background-image:none; } } /*----------------------------------------NF_LIGHT THEME END----------------------------------------*/