@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap'); /* Parameter Key Defaults: 0. Font-Family 1. Background-Colour 2. Font-Size Masthead 3. Background Colour 6. Border Color 4. Current Role Tab Text Color / Login Bar Text Color 5. Current Role Tab Background Color / Login Bar Background Color 7. Other Role Tab Text Color (DELETE)?? 8. Other Role Tab Background Color (DELETE)?? 7. learnerButtonHoverColor 8. learnerButtonBgHoverColor Buttons 9. Text Color 10. Background Color Tabs 30. Selected Tab Background Colour 33. Selected Tab Text Colour 31. Unselected Tab Background Colour 32. Unselected Tab Text Colour Main Menu 11. Text Color 12. Background Color 13. Current Menu Item Text Color 14. Current Menu Item Background Color 37. Menu Bar Item Separator Content Boxes 15. Background Color 16. Title Background Color 17. Border Color Forms 18. Fieldset Legend Text Color 19. Fieldset and Legend Background Color 20. Fieldset and Legend Border Color Tables 21. Table Header Background Color 22. Table Sub Header Background Color 23. Table Sub Sub Header Background Color 24. Table Sub Sub Sub Header Background Color 25. Table Content Row 0 Background Color 26. Table Content Row 1 Background Color 27. Table Row Dividers Background Color 38. Table Header Text Color 39. Table Sub Header Text Color 40. Table Sub Sub Header Text Color 41. Table Sub Sub Sub Header Text Color 42. Table Row 0 Text Color 43. Table Row 1 Text Color Sections backgrounds 112. Catalogue Menu Background image 45. My Agenda Menu Background image 46. My Courses Menu Background image 47. My Competency Maps Menu Background image 48. My Communications Menu Background image 113. Glossary Menu Background image 49. My Learners Menu Background image 44. Forums Menu Background image 50. Chat Menu Background image 51. Mailbox Menu Background image 52. learnerContentBoxTitleTextColor 114. My Profile Menu Background image Login 53. loginBackground image Home 54. contentPagesBackground Links 28. Text Color 29. Font weight Headings 34. Heading 1 35. Heading 2 36. Heading 3 Course Masthead: 55. Logo Image (Param passed to the template) 56. Background Colour 57. Text Colour 58. Back Icon 59. Next Icon 60. Exit Icon Course Menu Flyout: 61. Background Colour 62. Course Background Color 63. Text Colour 64. Show Course Menu (SCO List) (Param passed to the template) Status Icons: 65. Not Started Icon 66. In Progress Icon 67. Completed and Passed Icon 68. Completed and Failed Icon 69. Completed (no success is being tracked) Icon Resource Icons: 70. Audio Icon 71. Blogger Icon 72. Book Icon 73. Delicious Icon 74. Excel Icon 75. Facebook Icon 77. Flash Icon 78. Flickr Icon 79. Document (unknown type) Icon 80. Image Icon 81. LinkedIn Icon 82. PDF Icon 83. Photobucket Icon 84. Powerpoint Icon 85. Slideshare Icon 86. Twitter Icon 87. Video Icon 88. Vimeo Icon 89. Website Icon 90. Wikipedia Icon 91. Word Icon 92. Wordpress Icon 93. Youtube Icon Assessments: 93. Question Text Color Answer Choices: 94. Answer Choice Text Color 95. Answer Choice Background Color 96. Answer Choice Border Color 97. Answer Hover Selected Text Color 98. Answer Hover Selected Background Color 99. Answer Hover SelectedBorder Color 100. Correct Choice Text Color 101. Correct Choice Background Color 102. Correct Choice Border Color 103. Incorrect Choice Text Color 104. Incorrect Choice Background Color 105. Incorrect Choice Border Color Feedback Messages: 106. Answered Correctly Text Color 107. Answered Correctly Background Color 108. Answered Correctly Border Color 109. Answered Incorrectly Text Color 110. Answered Incorrectly Background Color 111. Answered Incorrectly Border Color Footer: 115: Background Color 116: Background Text Color */ /*declare here the rest of the LESS variables making sure the names are unique and change the css below to use the LESS variable instead of parameter*/ /*??*/ /*old*/ /*end old*/ /* Defaults */ /*body.modal for iframed body.modal (body with a .modal class) only, not for a regular modals!!!*/ body.modal { display: block; position: absolute; height: 100%; width: 100%; overflow: unset; } body.modal.questionnaire { overflow-y: auto !important; } body.modal #log_in_bar, body.modal #masthead, body.modal #footer { display: none; } body { margin: 0px; padding: 0px; background-color: white; font-family: 'Proxima Nova', 'Montserrat', sans-serif; font-size: 10pt; line-height: 1.5em; } body.login { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/loginBackground.gif'); } body.page { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/contentPagesBackground.gif'); } body form, body textarea, body input, body select { font-family: 'Proxima Nova', 'Montserrat', sans-serif; } a { color: #005245; font-weight: bold; text-decoration: underline; } a:hover { text-decoration: none; } /* Custom Colours */ div.pageHeaderStudent { background-color: #005245; } /* Login */ div.loginFooterStudent { width: 100%; height: 10px; border-top: solid 6px white; } div.loginContentStudent { float: left; border-left: solid white 70px; border-right: solid white 1px; background-color: white; width: 263px; height: 276px; } div.loginLogoStudent { background-color: white; height: 276px; overflow: hidden; } /* Header (AKA Masthead) */ #masthead, #header { background-color: #005245; } /* border:solid 1px #ffffff;*/ #masthead #login_info, #login_info.bar { color: #363d47; background-color: white; } /* border-bottom:solid 1px #005245;*/ #masthead #login_info span.left_corner, #masthead #login_info span.right_corner { background-color: #005245; } #masthead #login_info span.tab:hover { color: #363d47; background-color: white; } #masthead #login_info a, #login_info.bar a { color: #363d47; } #masthead #login_info a.btn.log_in, #login_info.bar a.btn.log_in, #login_info.bar a.btn, #masthead #login_info a.btn { color: white; } #masthead #main_menu_tabs a.tab { color: white; background-color: #153833; } /* border-bottom:solid 1px #005245;*/ #masthead #search a { background-color: #005245; color: white; } /* border-bottom:solid 1px #005245;*/ #masthead #main_menu_tabs a.tab span.left_corner, #masthead #main_menu_tabs a.tab span.right_corner, #masthead #search.tab span.left_corner, #masthead #search.tab span.right_corner { background-color: #005245; } #masthead #main_menu_tabs a.tabCurrent { color: #c8e982; background-color: #153833; border-bottom: solid 1px #153833; } #masthead #main_menu_tabs a.tab:hover { color: white; background-color: #153833; } button.search-close svg.fa-magnifying-glass { display: none; } button.search-btn svg.fa-circle-x { display: none; } #masthead #main_menu_bar { background-color: #153833; } #masthead #main_menu_bar a.tab { color: white; background-color: Transparent; } #masthead #main_menu_bar span.separator { color: white; } #masthead #main_menu_bar a.tabCurrent { color: #c8e982; } #masthead #main_menu_bar a.tab:hover { color: #c8e982; } /*Content Page*/ #content_page, #login_page, #login_page_slideshow, #content.container { background-color: white; } /* border:solid 1px #ffffff;*/ #content_page div.submenu_container.right { border-left: solid 1px white; } #content_page div.submenu_container.left { border-right: solid 1px white; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Proxima Nova', 'Montserrat', sans-serif; } h1 { color: #153c35; } h2 { color: #153c35; } h3 { color: #153c35; } #login_page span.login_form div.dividerLabel span { color: #153c35; } div.note { color: #153c35; } /*#content_page button, #content_page select, #content_page th, #content_page td, {font-family:'Proxima Nova','Montserrat',sans-serif; font-size:10pt; line-height:1.5em;}*/ hr { background-color: white; color: white; } #catalogue #slideshow div.features { background-color: #005245; color: white; } select.cohort-select { margin: 0px 10px 0px 0px; } /*Login*/ #login_page span.logo { background-color: #005245; } /*#login_page span.login_form {background-color:#ffffff}*/ #login_page span.login_form form div span input, #login_page_slideshow span.login_form form div span input { border: solid 1px white; } #login_page span.login_form form div span.button input, #login_page_slideshow span.login_form form div span.button input { border: none 0px Transparent; } #slideshow .container div.index span.current { color: #153c35; } /*TILES*/ #domain_stats_tile { border-top: solid 1px white; border-bottom: solid 1px white; } body.page div.domain_wall_tile { border: solid 1px white; } #custom_features_tile ul li { border-bottom: solid 1px #ecd9c7; border-top: solid 1px #ecd9c7; } .metadata.cloud-tag .label { width: auto; font-weight: bold; opacity: 0.8; display: inline-block; color: rgba(0, 0, 0, 0.6); } .metadata.cloud-tag .label:nth-of-type(odd) { color: rgba(0, 0, 0, 0.7); } /*Section Menu*/ #content_page #section_menu h3 { background-color: #666666; } #content_page #section_menu li { background-color: #ecd9c7; border: solid 1px white; } #content_page #section_menu li span.button span.topleft_corner { background-color: white; } #content_page #section_menu li span.button span.bottomleft_corner, #content_page #section_menu li span.button span.topright_corner, #content_page #section_menu li span.button span.bottomright_corner { background-color: #005245; } #content_page #section_menu li.catalogue { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/backgroundimages/studentcatalogue.gif'); } #content_page #section_menu li.myagenda { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/myAgendaBackground.gif'); } #content_page #section_menu li.mycourses { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/myCoursesBackground.gif'); } #content_page #section_menu li.mycompetencymaps, #content_page #section_menu li.mylearningpaths { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/myCompetencyMapsBackground.gif'); } #content_page #section_menu li.mycommunications { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/myCommunicationsBackground.gif'); } #content_page #section_menu li.glossary { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/glossaryBackground.gif'); } #content_page #section_menu li.mylearners { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/myLearnersBackground.gif'); } #content_page #section_menu li.forums { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/forumsBackground.gif'); } #content_page #section_menu li.chatrooms { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/chatBackground.gif'); } #content_page #section_menu li.mailbox { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/mailboxBackground.gif'); } #content_page #section_menu li.profile { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/myProfileBackground.gif'); } #content_page #section_menu li.background div.section_text { background-color: #666666; } #content_page #section_menu li.background h3 { color: white; background-color: Transparent; } #content_page #section_menu li.background div.text { color: white; } /*Sections 44. Dashboard 45. My Agenda 46. My Courses 47. My Competency Maps 48. My Communications 49. My Learners */ /*Buttons*/ #content_page span.button, #login_page span.button, #searchCourses span.button { background-color: #005245; color: white; } #content_page span.button span.topleft_corner, #content_page span.button span.bottomleft_corner, #content_page span.button span.topright_corner, #content_page span.button span.bottomright_corner, #login_page span.button span.topleft_corner, #login_page span.button span.bottomleft_corner, #login_page span.button span.topright_corner, #login_page span.button span.bottomright_corner, #searchCourses span.button span.topleft_corner, #searchCourses span.button span.bottomleft_corner, #searchCourses span.button span.topright_corner, #searchCourses span.button span.bottomright_corner { background-color: white; } #search.bar #searchCourses span.button span.topleft_corner, #search.bar #searchCourses span.button span.bottomleft_corner, #search.bar #searchCourses span.button span.topright_corner, #search.bar #searchCourses span.button span.bottomright_corner { background-color: #153833; } #content_page span.buttonSpacing span.button.Disabled { background-color: #bbddeb; cursor: default; } #content_page span.button.disabled, #login_page span.button.disabled { background-color: #c1dae5; color: #f3f7f9; } #content_page span.dropdown span.dropdown_arrow { background-color: #005245; color: white; } #content_page input[type=submit], #content_page input[type=button], #content_page input.input_button, #content_page input.button, #login_page span.button input { background-color: #005245; color: white; } #content_page div.button_container { text-align: right; clear: both; height: 35px; } #content_page div.button_container.left { text-align: left; clear: both; height: 35px; } #content_page div.button_container span.button { margin-left: 10px; } #content_page div.button_container.left span.button { float: none; margin-right: 10px; } #content_page div.button_container input.button { background-color: #005245; color: white; border: none; } #content_page span.button.Disabled { background-color: #dddddd; } /*Tabs Tabs 30. Selected Tab Background Colour 32. Selected Tab Text Colour 31. Unselected Tab Background Colour 33. Unselected Tab Text Colour*/ #content_page #tabs { border-bottom: solid 1px #005245; } #content_page #tabs span.tab { color: white; background-color: white; border-bottom: solid 1px white; } #content_page #tabs span.tab span.left_corner, #content_page #tabs span.tab span.right_corner { background-color: white; } #content_page #tabs span.currentTab { color: #005245; background-color: #005245; border-bottom: solid 1px #005245; } #content_page #tabs span.tab:hover { color: #005245; background-color: #005245; } /*Tables*/ #content_page table thead th, #content_page table tr.tableHeader td { background-color: #005245; color: white; border-bottom: solid 1px white; border-right: solid 1px white; } #content_page table tbody tr.tableSubHeader { background-color: #7ebc00; color: #153c35; border-bottom: solid 1px white; } #content_page table tbody tr.tableSubSubHeader { background-color: #ecd9c7; color: #153c35; border-bottom: solid 1px white; } #content_page table tbody tr.tableRow1, #content_page table tbody tr.tableRow:nth-child(even) { background-color: #ecd9c7; color: #153c35; border-bottom: solid 1px white; } #content_page table tbody tr.tableRow0, #content_page table tbody tr.tableRow:nth-child(odd) { background-color: #ecd9c7; color: #153c35; border-bottom: solid 1px white; } #content_page table tbody td { border-right: solid 1px white; } div#mycourse div.box div.wrapper { background-color: #ecd9c7; color: #153c35; } /*fieldsets*/ #content_page fieldset { border: solid 1px white; background-color: white; } #content_page fieldset legend { color: #153c35; background-color: white; } #content_page fieldset div:hover, #content_page #CustomMetadata_FieldTable tbody tr:hover { background-color: white; } #content_page fieldset span.label, #content_page span.label, #content_page #MyForums #section_menu li div h4, .label { color: #153c35; } #content_page fieldset #openIDLoginDiv div.dividerLabel span { background-color: white; } #content_page fieldset table.optionsgrid td.dividerLabel span { background-color: white; } /*Login*/ #login_page span.login_form { background-color: white; } #login_page p.login_welcome_text { color: #153c35; } /*My Agenda*/ #content_page div.dateHeader { background-color: #005245; color: white; border-bottom: solid 1px white; } #content_page ol.eventList li.dateHeader { background-color: #7ebc00; color: #153c35; border-bottom: solid 1px white; } #content_page ol.eventList li.event { border-bottom: solid 1px white; } #content_page ol.eventList li.row0 { background-color: #ecd9c7; } #content_page ol.eventList li.row1 { background-color: #ecd9c7; } /*Catalogue 25. Table Content Row 0 Background Color 26. Table Content Row 1 Background Color 9. Button Text Color 10. Button Background Color */ #catalogue #categories li.item1, #catalogue #courses li.item1, #catalogue #course_details li.item1 { background-color: #ecd9c7; } #catalogue #categories li.item0, #catalogue #courses li.item0, #catalogue #course_details li.item0 { background-color: #ecd9c7; } #catalogue #categories li.item0:hover, #catalogue #courses li.item0:hover, #catalogue #course_details li.item0:hover, #catalogue #categories li.item1:hover, #catalogue #courses li.item1:hover, #catalogue #course_details li.item1:hover { background-color: #ecd9c7; } #catalogue #courses li div.type, #catalogue #course_details li div.type, #content_page #MyForums #section_menu li span.type, #content_page #Courses ol.course_list li.course > div.type { background-color: #005245; color: white; } /*My Courses*/ #content_page #MyCourses #tabs { border-bottom: solid 1px #005245; } #content_page #MyCourses #tabs span.tab { color: #005245; background-color: white; border-bottom: solid 1px white; } #content_page #MyCourses #tabs span.tab span.left_corner, #content_page #MyCourses #tabs span.tab span.right_corner { background-color: white; } #content_page #MyCourses #tabs span.currentTab { color: white; background-color: #005245; border-bottom: solid 1px #005245; } #content_page #MyCourses #tabs span.tab:hover { color: white; background-color: #005245; } #content_page #Courses div.program { border-bottom: solid 1px white; background-color: #005245; color: white; } #content_page #Courses ol.course_list { border-bottom: solid 1px white; } /* background-color:#005245;*/ /*#content_page #Courses ol.course_list li.course {}border-bottom:solid 1px #ffffff;*/ #content_page #Courses ol.course_list li.course:hover { background-color: #ecd9c7; } #content_page #Courses ol.course_list li.course span.details { border-left: solid 1px white; } #content_page #Courses ol.course_list li.row0 { background-color: #ecd9c7; } #content_page #Courses ol.course_list li.row1 { background-color: #ecd9c7; } #content_page #Courses ol.course_list li div span.disabled { background-color: #dddddd; } #content_page #Courses ol.course_list li.course div span.label { color: #153c35; } /*ecommerce #progress_bar {border-bottom:dotted 1px #ffffff;}*/ span.instructions { color: #153c35; } #progress_bar span.arrow { color: #005245; } #progress_bar span.step { color: #005245; } #progress_bar span.step.current { color: #005245; } #progress_bar span.step.completed { color: #005245; } #progress_bar span.step span.number { background-color: #005245; color: white; } /* 30. Selected Tab Background Colour 33. Selected Tab Text Colour 31. Unselected Tab Background Colour 32. Unselected Tab Text Colour*/ /*My Learning Paths*/ #content_page #LearningPaths div.program { border-bottom: solid 1px white; background-color: #005245; color: white; } #content_page #LearningPaths ol.learningPath_list { border-bottom: solid 1px white; background-color: #005245; color: white; } #content_page #LearningPaths ol.learningPath_list li.course { border-bottom: solid 1px white; } #content_page #LearningPaths ol.learningPath_list li.row0 { background-color: #ecd9c7; } #content_page #LearningPaths ol.learningPath_list li.row1 { background-color: #ecd9c7; } #content_page #LearningPaths ol.learningPath_list li div span.disabled { background-color: #dddddd; } #content_page #Courses ol.course_list li ol.objectives_list li.objective > h3 { background-color: #7ebc00; color: #153c35; border-bottom: solid 1px white; } #content_page #Courses ol.course_list li div.LP_details_overlay ol.objectives_list li.highlight, #content_page #Courses ol.course_list li div.LP_details_overlay ol.objectives_list li.last.highlight, #mycourse div.LP_details_overlay ol.objectives_list li.highlight, #mycourse div.LP_details_overlay ol.objectives_list li.last.highlight { background-color: #ecd9c7; } /*Transcript*/ #content_page #CourseReport { background-color: #ecd9c7; } #content_page #ProgressOverview { background-color: #ecd9c7; } body.Transcript .learner-info .custom-field { margin-bottom: 10px; } body.Transcript .learner-info .custom-field label { width: auto; font-weight: bold; margin-right: 5px; margin-bottom: 0px; } body.Transcript .learner-info .md-values .md-value { margin-right: 5px; } /*My Agenda*/ #content_page #References div.dateHeader { border-bottom: solid 1px white; background-color: #005245; color: white; } #content_page #References ul li.referenceHeader { border-bottom: solid 1px white; background-color: #7ebc00; } #content_page #References ul li.reference { border-bottom: solid 1px white; } #content_page #References ul li.row0 { background-color: #ecd9c7; } #content_page #References ul li.row1 { background-color: #ecd9c7; } /*Forums*/ #forum_threads li.votes-high, #one_post li.votes-high { background-color: #153c35; color: white; border: solid 1px #153c35; } #forum_threads li.votes-high h3, #one_post li.votes-high h3 { color: white; } #forum_threads li.votes-low, #one_post li.votes-low { background-color: white; color: #153c35; border: solid 1px #153c35; } #forum_threads li.votes-low h3, #one_post li.votes-low h3 { color: #153c35; } #forum_threads li.answers-high, #one_post li.answers-high { background-color: #153c35; color: white; border: solid 1px #153c35; } #forum_threads li.answers-high h3, #one_post li.answers-high h3 { color: white; } #forum_threads li.answers-low, #one_post li.answers-low { background-color: white; color: #153c35; border: solid 1px #153c35; } #forum_threads li.answers-low h3, #one_post li.answers-low h3 { color: #153c35; } #forum_threads li.views-high, #one_post li.views-high { background-color: #153c35; color: white; border: solid 1px #153c35; } #forum_threads li.views-high h3, #one_post li.views-high h3 { color: white; } #forum_threads li.views-low, #one_post li.views-low { background-color: white; color: #153c35; border: solid 1px #153c35; } #forum_threads li.views-low h3, #one_post li.views-low h3 { color: #153c35; } li.question_details span.author_photo { border: solid 1px white; } li.question_details h4 { color: #153c35; } #one_post ul li.question_details span.author_photo, #one_post ul.original_post li.author span.author_photo { border: solid 1px white; } #userProfile img.bio_photo { border: solid 1px white; } #forum_details { background-color: #ecd9c7; } #forum_threads li.row0 { background-color: #ecd9c7; } #forum_threads li.row1 { background-color: #ecd9c7; } #one_post ul.original_post, #one_post #post_reply_form { background-color: #ecd9c7; } #one_post ul.row0 { background-color: #ecd9c7; } #one_post ul.row1 { background-color: #ecd9c7; } #one_post ul ul { border-bottom: none; } #one_post ul li.stats ul li.vote_button { background-color: #153c35; border: solid 1px #153c35; color: white; } .author-pull-left .body { width: 100%; float: left; padding-left: 5px; } /*Footer*/ #footer div.copyright { color: #005245; } #footer.container, #footer.container .copyright, #footer.container a { color: #005245; } /* Buttons */ span.MyCalendar-tabSelected { background-color: #005245; display: inline-block; color: #005245; cursor: pointer; padding: 10px; margin: 10px 10px 0px 0px; } span.MyCalendar-tabNotSelected { background-color: white; display: inline-block; color: #005245; cursor: pointer; padding: 10px; margin: 10px 10px 0px 0px; } /* Breadcrumbs */ #breadcrumbs a, #breadcrumbs li > *, #breadcrumbs li > a { color: #005245; font-size: 0.8em; font-weight: bold; line-height: 1.1em; text-decoration: none; cursor: hand; } #breadcrumbs a:hover { color: #005245; text-decoration: underline; } /* Menu and Section Header Box Styles */ /* Content Header (Contains the top corners and page title or menu box title and includes the shorter background image) */ #contentBox1Student div.contentHeader, #menuBox1Student div.contentHeader, #contentBox2Student div.contentHeader, #menuBox2Student div.contentHeader, #contentBox3Student div.contentHeader, #menuBox3Student div.contentHeader, #contentBox4Student div.contentHeader, #menuBox4Student div.contentHeader, #contentBox5Student div.contentHeader, #menuBox5Student div.contentHeader, #contentBox6Student div.contentHeader, #menuBox6Student div.contentHeader, #contentBox7Student div.contentHeader, #menuBox7Student div.contentHeader, #contentBoxCustom div.contentHeader, #menuBoxCustom div.contentHeader { background-color: white; margin: 0px 0px 0px 0px; border-top: solid 1px white; border-right: solid 1px white; } /* Content Title (Contains the page title or menu box title and includes the taller background image) */ #contentBox1Student td.contentTitle, #menuBox1Student td.contentTitle, #contentBox2Student td.contentTitle, #menuBox2Student td.contentTitle, #contentBox3Student td.contentTitle, #menuBox3Student td.contentTitle, #contentBox4Student td.contentTitle, #menuBox4Student td.contentTitle, #contentBox5Student td.contentTitle, #menuBox5Student td.contentTitle, #contentBox6Student td.contentTitle, #menuBox6Student td.contentTitle, #contentBox7Student td.contentTitle, #menuBox7Student td.contentTitle, #contentBoxCustom td.contentTitle, #menuBoxCustom td.contentTitle { background-color: #666666; color: white; font-weight: bold; margin: 0px 0px 0px 0px; padding: 0px 5px 1px 5px; } /* Content background (Defines the left and right borders and background colour) */ #contentBox1Student div.contentBG, #menuBox1Student div.contentBG, #contentBox2Student div.contentBG, #menuBox2Student div.contentBG, #contentBox3Student div.contentBG, #menuBox3Student div.contentBG, #contentBox4Student div.contentBG, #menuBox4Student div.contentBG, #contentBox5Student div.contentBG, #menuBox5Student div.contentBG, #contentBox6Student div.contentBG, #menuBox6Student div.contentBG, #contentBox7Student div.contentBG, #menuBox7Student div.contentBG, #contentBoxCustom div.contentBG, #menuBoxCustom div.contentBG { background-color: white; padding: 10px 10px 40px 10px; margin: 0px 0px 0px 0px; border-left: solid 1px white; border-right: solid 1px white; } /* Content Bottom (Contains the bottom corners and page title or menu box title and includes the shorter background image) */ #contentBox1Student div.contentBottom, #menuBox1Student div.contentBottom, #contentBox2Student div.contentBottom, #menuBox2Student div.contentBottom, #contentBox3Student div.contentBottom, #menuBox3Student div.contentBottom, #contentBox4Student div.contentBottom, #menuBox4Student div.contentBottom, #contentBox5Student div.contentBottom, #menuBox5Student div.contentBottom, #contentBox6Student div.contentBottom, #menuBox6Student div.contentBottom, #contentBox7Student div.contentBottom, #menuBox7Student div.contentBottom, #contentBoxCustom div.contentBottom, #menuBoxCustom div.contentBottom { background-color: white; border-bottom: solid 1px white; border-left: solid 1px white; border-right: solid 1px white; margin: 0px 0px 0px 0px; } #contentBox4Student table { display: inline-block; } /* Form Colours for fieldsets and legends (form section titles) */ #contentBox1Student fieldset, #contentBox2Student fieldset, #contentBox3Student fieldset, #contentBox4Student fieldset, #contentBox5Student fieldset, #contentBox6Student fieldset, #contentBox7Student fieldset, #contentBoxCustom fieldset { background-color: white; border-style: solid; border-color: white; width: 95%; border-width: 1px 0px 1px 0px; margin: 20px 0px 20px 0px; padding: 0px 10px 10px 10px; display: block; position: relative; font-size: 1em; } /* Legends */ #contentBox1Student legend, #contentBox2Student legend, #contentBox3Student legend, #contentBox4Student legend, #contentBox5Student legend, #contentBox6Student legend, #contentBox7Student legend { background-color: white; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #666666; color: #153c35; font-weight: bold; letter-spacing: 2px; font-size: 1em; padding: 2px 5px; margin: 0px 0px 10px 0px; top: -12px; position: relative; } /*Wizards*/ div.seriesCoursesWizardPages, div.seriesCoursesLPInfoDiv { border: 1px solid #005245; } div.seriesCoursesWizardActionsDiv input.button, #skipDiv input.button { background-color: #005245; border: 1px solid #005245; color: white; } seriesCoursesLPInfoDiv { color: #153c35; } /* list rows (colors for rows) */ div.pageListHolder table.pageList thead th.tableHeader1, thead tr.tableHeader1, div.pageListHolder table.pageList thead th.tableHeader2, thead tr.tableHeader2, div.pageListHolder table.pageList thead th.tableHeader3, thead tr.tableHeader3, div.pageListHolder table.pageList thead th.tableHeader4, thead tr.tableHeader4, div.pageListHolder table.pageList thead th.tableHeader5, thead tr.tableHeader5, div.pageListHolder table.pageList thead th.tableHeader6, thead tr.tableHeader6, div.pageListHolder table.pageList thead th.tableHeader7, thead tr.tableHeader7 { background-color: #005245; padding: 3px 5px 3px 5px; text-align: left; } div.pageListHolder table.pageList thead th.tableHeader1, thead tr.tableHeader1 th div, div.pageListHolder table.pageList thead th.tableHeader2, thead tr.tableHeader2 th, div.pageListHolder table.pageList thead th.tableHeader3, thead tr.tableHeader3 th, div.pageListHolder table.pageList thead th.tableHeader4, thead tr.tableHeader4 th, div.pageListHolder table.pageList thead th.tableHeader5, thead tr.tableHeader5 th, div.pageListHolder table.pageList thead th.tableHeader6, thead tr.tableHeader6 th, div.pageListHolder table.pageList thead th.tableHeader7, thead tr.tableHeader7 th { text-align: left; padding: 3px 5px 3px 5px; } div.pageListHolder table.pageList tbody tr.tableSubHeader1, div.pageListHolder table.pageList tbody tr.tableSubHeader2, div.pageListHolder table.pageList tbody tr.tableSubHeader3, div.pageListHolder table.pageList tbody tr.tableSubHeader4, div.pageListHolder table.pageList tbody tr.tableSubHeader5, div.pageListHolder table.pageList tbody tr.tableSubHeader6, div.pageListHolder table.pageList tbody tr.tableSubHeader7 { background-color: #7ebc00; height: 28px; font-weight: bold; text-align: left; } div.pageListHolder table.pageList thead tr.tableSubHeader1 th, div.pageListHolder table.pageList thead tr.tableSubHeader2 th, div.pageListHolder table.pageList thead tr.tableSubHeader3 th, div.pageListHolder table.pageList thead tr.tableSubHeader4 th, div.pageListHolder table.pageList thead tr.tableSubHeader5 th, div.pageListHolder table.pageList thead tr.tableSubHeader6 th, div.pageListHolder table.pageList thead tr.tableSubHeader7 th { text-align: left; padding: 3px 5px 3px 5px; } div.pageListHolder table.pageList tbody tr.tableSubSubHeader1, div.pageListHolder table.pageList tbody tr.tableSubSubHeader2, div.pageListHolder table.pageList tbody tr.tableSubSubHeader3, div.pageListHolder table.pageList tbody tr.tableSubSubHeader4, div.pageListHolder table.pageList tbody tr.tableSubSubHeader5, div.pageListHolder table.pageList tbody tr.tableSubSubHeader6, div.pageListHolder table.pageList tbody tr.tableSubSubHeader7 { background-color: #ecd9c7; height: 28px; font-weight: bold; text-align: left; } div.pageListHolder table.pageList thead tr.tableSubSubHeader1 th, div.pageListHolder table.pageList thead tr.tableSubSubHeader2 th, div.pageListHolder table.pageList thead tr.tableSubSubHeader3 th, div.pageListHolder table.pageList thead tr.tableSubSubHeader4 th, div.pageListHolder table.pageList thead tr.tableSubSubHeader5 th, div.pageListHolder table.pageList thead tr.tableSubSubHeader6 th, div.pageListHolder table.pageList thead tr.tableSubSubHeader7 th { text-align: left; padding: 3px 5px 3px 5px; } div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader1, div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader2, div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader3, div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader4, div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader5, div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader6, div.pageListHolder table.pageList tbody tr.tableSubSubSubHeader7 { background-color: #ecd9c7; height: 28px; font-weight: bold; text-align: left; } /* Row Dividers */ div.pageListHolder table.pageList tbody td { border-bottom: solid 1px #ecd9c7; } div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow1-0, div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow2-0, div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow3-0, div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow4-0, div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow5-0, div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow6-0, div.pageListHolder table.pageList tbody tr.tableRow1-1 tr.tableRow7-0 { background-color: #ecd9c7; height: 28px; } div.pageListHolder table.pageList tbody tr.tableRow1-1, div.pageListHolder table.pageList tbody tr.tableRow2-1, div.pageListHolder table.pageList tbody tr.tableRow3-1, div.pageListHolder table.pageList tbody tr.tableRow4-1, div.pageListHolder table.pageList tbody tr.tableRow5-1, div.pageListHolder table.pageList tbody tr.tableRow6-1, div.pageListHolder table.pageList tbody tr.tableRow7-1 { background-color: #ecd9c7; height: 28px; } /* Row Dividers */ td.rowDivider1, td.rowDivider2, td.rowDivider3, td.rowDivider4, td.rowDivider5, td.rowDivider6 { background-color: white; } #content_page ul.long_content.glossary { border-color: white; } #content_page ul.long_content.glossary > li { border-top: solid 1px white; } #content_page ul.long_content.glossary > li > div.definition > span.thumbnail > img, #content_page ul.long_content.glossary > li > div.definition > span.zoomed_image > img { border: solid 1px white; } /*Feedback*/ #feedback li div.LikertScale span.spectrum { color: #153c35; } /*Course Templates*/ #course_template { color: white; background-color: white; padding: 0px; margin: 0px; font-family: 'Proxima Nova', 'Montserrat', sans-serif; } /*Course Masthead: 55. Logo Image (Param passed to the template) 56. Background Colour 57. Text Colour 58. Back Icon 59. Next Icon 60. Exit Icon */ #course_template #Masthead { background-color: white; color: black; } /*Course Menu Flyout: 61. Background Colour 62. Course Background Color 63. Text Colour 64. Show Course Menu (SCO List) (Param passed to the template)*/ #CourseMenu { color: white; font-family: 'Proxima Nova', 'Montserrat', sans-serif; background-color: white; } #CourseMenu div { background-color: white; color: white; } #CourseMenu div.tab, #CourseMenu #courseMenuTab { border-color: white; background-color: white; } #CourseMenu div.tab span, #CourseMenu #courseMenuTab span { color: white; } #CourseMenu div.menu { border-color: white; background-color: white; } #CourseMenu div a, #CourseMenu div h3 { color: white; } #CourseMenu #courseMenuTab { border-color: white; } #CourseMenu #courseMenuLists { border-color: white; } #CourseMenu #courseMenuLists div.sco a { color: white; } /*Status Icons: Status Icons: 65. Not Started Icon 66. In Progress Icon 67. Completed and Passed Icon 68. Completed and Failed Icon 69. Completed (no success is being tracked) Icon*/ #CourseMenu div.menu div.passed { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuCompletedPassed.gif'); } #CourseMenu div.menu div.failed { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuCompletedFailed.gif'); } #CourseMenu div.menu div.completed { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuCompleted.gif'); } #CourseMenu div.menu div.in-progress { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuInProgress.gif'); } #CourseMenu div.menu div.not-started { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuNotStarted.gif'); } /*Resource Icons: Resource Icons: 70. Audio Icon 71. Blogger Icon 72. Book Icon 73. Delicious Icon 74. Excel Icon 75. Facebook Icon 77. Flash Icon 78. Flickr Icon 79. Document (unknown type) Icon 80. Image Icon 81. LinkedIn Icon 82. PDF Icon 83. Photobucket Icon 84. Powerpoint Icon 85. Slideshare Icon 86. Twitter Icon 87. Video Icon 88. Vimeo Icon 89. Website Icon 90. Wikipedia Icon 91. Word Icon 92. Wordpress Icon 93. Youtube Icon*/ #course_template #Menu div.menu div.Book { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuBook.gif'); } #course_template #Menu div.menu div.Twitter { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuTwitter.gif'); } #course_template #Menu div.menu div.LinkedIn { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuLinkedIn.gif'); } #course_template #Menu div.menu div.Facebook { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuFacebook.gif'); } #course_template #Menu div.menu div.GooglePlus { background-image: url(TBD); } #course_template #Menu div.menu div.MySpace { background-image: url(TBD); } #course_template #Menu div.menu div.Wikipedia { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuWikipedia.gif'); } #course_template #Menu div.menu div.Wordpress { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuWordpress.gif'); } #course_template #Menu div.menu div.Blogger { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuBlogger.gif'); } #course_template #Menu div.menu div.SlideShare { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuSlideshare.gif'); } #course_template #Menu div.menu div.Photobucket { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuPhotobucket.gif'); } #course_template #Menu div.menu div.Flickr { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuFlickr.gif'); } #course_template #Menu div.menu div.YouTube { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuYouTube.gif'); } #course_template #Menu div.menu div.Vimeo { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuVimeo.gif'); } #course_template #Menu div.menu div.Delicious { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuDelicious.gif'); } #course_template #Menu div.menu div.Website { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuWebsite.gif'); } #course_template #Menu div.menu div.Excel { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuExcel.gif'); } #course_template #Menu div.menu div.Word { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuWord.gif'); } #course_template #Menu div.menu div.PowerPoint { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuPowerpoint.gif'); } #course_template #Menu div.menu div.PDF { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuPDF.gif'); } #course_template #Menu div.menu div.Image { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuImage.gif'); } #course_template #Menu div.menu div.Audio { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuAudio.gif'); } #course_template #Menu div.menu div.Flash { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuFlash.gif'); } #course_template #Menu div.menu div.Text { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuDocument.gif'); } #course_template #Menu div.menu div.Video { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuVideo.gif'); } #course_template #Menu div.menu div.PowerPoint { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/learnerView/courseMenuPowerpoint.gif'); } /*Assessment Questions*/ body#tc-assessment { background-color: white; color: black; } #AssessmentQuestion, #AssessmentQuestion #content_page { color: black; background-color: white; font-family: 'Proxima Nova', 'Montserrat', sans-serif; } #AssessmentQuestion h2 { color: black; } #AssessmentQuestion #mcq_answers a.answer { color: black; background-color: white; border: solid 1px black; } #AssessmentQuestion #mcq_answers a.answer:hover { color: #0099ff; background-color: white; border: solid 1px black; } #AssessmentQuestion #mcq_answers a.answer.correct { color: white; background-color: #00cc00; border: solid 1px #00cc00; } #AssessmentQuestion #mcq_answers a.answer.incorrect { color: white; background-color: red; border: solid 1px red; } /*#AssessmentQuestion #mcq_answers a.answer span.topleft_corner, #AssessmentQuestion #mcq_answers a.answer span.bottomleft_corner, #AssessmentQuestion #mcq_answers a.answer span.topright_corner, #AssessmentQuestion #mcq_answers a.answer span.bottomright_corner {background-color:#FFFFFF;}*/ #AssessmentQuestion ol.draganddrop { color: black; } #AssessmentQuestion ol.draganddrop span.drag, #AssessmentQuestion ol.draganddropimage span.drag { color: black; background-color: white; border: solid 1px black; } #AssessmentQuestion ol.draganddrop span.drop, #AssessmentQuestion ol.draganddropimage span.drop { color: #0099ff; background-color: white; border: solid 1px black; } #AssessmentQuestion ol.draganddrop span.correct, #AssessmentQuestion ol.draganddropimage span.correct { color: white; background-color: #00cc00; border: solid 1px #00cc00; } #AssessmentQuestion ol.draganddrop span.incorrect, #AssessmentQuestion ol.draganddropimage span.incorrect { color: white; background-color: red; border: solid 1px red; } #AssessmentQuestion #correctfb { color: white; background-color: #66a103; border: solid 1px #66a103; } #AssessmentQuestion #incorrectfb { color: black; background-color: #de2145; border: solid 1px #de2145; } .modal ul li { list-style-type: initial !important; display: list-item !important; } .modal ol li { list-style-type: decimal !important; display: list-item !important; } .fr-counter { visibility: hidden; } /* override new bootstrap margin*/ .checkbox .filterCB input[type=checkbox] { margin-left: 0px !important; } body.AdvancedSearch .metadataFilterDiv .checkbox, body.AdvancedSearch .languagesFilterDiv .checkbox { margin-left: 20px !important; } /* override for lists in threads */ .thread ol { list-style-type: decimal; } .thread ul { list-style-type: disc; } /*#captcha > div{margin:40px auto;}*/ /*Course ratings*/ .tc.user-rating .fa { margin: 0px 0px 0px 5px; font-size: 1.5em; } .tc.user-rating .fa-frown-o.selected { color: red; } .tc.user-rating .fa-meh-o.selected { color: yellow; } .tc.user-rating .fa-smile-o.selected { color: green; } .tc.user-rating .fa-star { background-color: yellow; } .tc.user-rating .fa-thumbs-up.selected, .tc.user-rating .fa-thumbs-down.selected { color: green; } /*Tables Assessments: 93. Question Text Color Answer Choices: 94. Answer Choice Text Color 95. Answer Choice Background Color 96. Answer Choice Border Color 97. Answer Hover Selected Text Color 98. Answer Hover Selected Background Color 99. Answer Hover SelectedBorder Color 100. Correct Choice Text Color 101. Correct Choice Background Color 102. Correct Choice Border Color 103. Incorrect Choice Text Color 104. Incorrect Choice Background Color 105. Incorrect Choice Border Color Feedback Messages: 106. Answered Correctly Text Color 107. Answered Correctly Background Color 108. Answered Correctly Border Color 109. Answered Incorrectly Text Color 110. Answered Incorrectly Background Color 111. Answered Incorrectly Border Color */ /*Resources*/ #resource-library .fa.checked { color: #005245; } #resource-library .fa { color: #005245; } #resource-library .filters .filter-type { margin: 0px 0px 15px 0px; padding: 0px; } #resource-library .count { border-bottom: solid 1px #eeeeee; margin-bottom: 15px; min-height: 3em; } #resource-library .pagination { margin: 0px; } #resource-library .filters i { line-height: 3em; } #resource-library .resources { background-color: #f6f6f6; } #resource-library .resources .search.input-group { margin-bottom: 15px; } #resource-library .resources .search.input-group .fa { color: white; } #resource-library .resources .count i { margin-top: 1em; display: inline-block; } #resource-library .resources .thumbnail { background-color: white; border: 0px; border-radius: 0px; padding: 5px; } #resource-library .resources .thumbnail .poster, .media-preview.poster { background-color: #005245; padding: 5px; min-height: 140px; } #resource-library .resources .thumbnail .poster .fa, .media-preview.poster .fa:before { font-size: 6em; color: white; margin: 20px; } #resource-library .resources .thumbnail .poster > span { width: 100%; height: 130px; } #resource-library .resources .thumbnail .poster img { width: 100%; height: 130px; object-fit: cover; object-position: center center; overflow: hidden; } #resource-library .resources .thumbnail .caption { text-align: left; padding: 5px 0px 0px 0px; min-height: 50px; } #resource-library .resources .thumbnail .caption .fa, #resource-library .resources .thumbnail .caption svg { font-size: 0.8em; color: #36b3a8; display: inline-block; margin: 5px 5px 15px 0px; float: left; } #resource-library .resources .thumbnail .caption a { color: #5e5e5e; } #resource-library .resources .thumbnail .caption a:hover { color: #36b3a8; } #resource-library .resources .caption { height: 80px; text-overflow: ellipsis; } #resource-library .resources .caption .fa-download { margin-bottom: 50px !important; } .label.filter.filetype { cursor: pointer; } .media-preview.poster .fa:before { font-size: 50px; font-size: 15vw; } .media-preview { text-align: center; } .modal ol.no-list li { list-style-type: none !important; } ol.sessions li.session { margin: 0px 0px 5px 0px; } .course-row { margin: 0px 0px 5px 0px; } .speakers { margin: 5px 0px 0px 0px; } .speakers-agenda { margin: 0px 0px 10px 0px; } .custom-fields { margin: 10px 0px 0px 0px; } .custom-fields .custom-value { margin: 0px 0px 5px 0px; } .invalid.form-control { color: red; } .fullClassLabel { margin: 0px 10px 0px 0px; font-weight: bold; } .fullClassLabel.badge.badge-warning { background-color: #f0ad4e; } .seriesCoursesSeriesSelectionDiv input[type=radio] { margin-right: 15px !important; } table tbody td.code { word-break: break-all; } /*print css for transcripts*/ @media print { body.Course_Progress .label { width: 130px; border: none !important; font-weight: bold !important; } body.Course_Progress #masthead.container.hidden-print { display: none !important; } body.Course_Progress #footer .text-right.copyright { width: 100%; text-align: center !important; } body.Course_Progress h2 { font-size: 2em !important; } .fieldset_container div { margin: 5px 0px 15px 0px; } } .description-text { word-break: break-word; } .panel-default.search input { border: none; width: 200px; padding: 0px 5px 0px 5px; margin: 5px; } .panel-default.search datalist { width: 200px; } .panel-default.search datalist option { width: 200px; word-break: break-word; overflow: hidden; } /* USER SURVEY */ #ExternalTrainingModal li { margin-bottom: 10px; padding: 0px; } #ExternalTrainingModal .modal-dialog { width: 80%; } #ExternalTrainingModal .label { width: auto; } #ExternalTrainingModal ol, #ExternalTrainingModal ol li { list-style-type: none !important; margin: 0px 0px 20px 0px; } #ExternalTrainingModal label { display: block; padding-left: 15px; text-indent: -15px; } #ExternalTrainingModal #feedbackHTML > div.col-md-12, #ExternalTrainingModal #feedbackHTML ol { padding: 0px; } #ExternalTrainingModal textarea, #ExternalTrainingModal select, #ExternalTrainingModal input[type="text"] { width: 80%; } #ExternalTrainingModal input[type="checkbox"], #ExternalTrainingModal input[type="radio"] { width: 13px; height: 13px; padding: 0; margin: 0 5px 0px; vertical-align: bottom; position: relative; top: -5px; *overflow: hidden; } /*Learner Notes*/ .modal-footer.learner-note { border: none !important; } .modal .wysihtml5-toolbar li { list-style-type: none !important; } .learner-note .fa-sticky-note { font-size: 1.2em; } .panel-body.badges img { width: 75px; } /* BADGES*/ .badge-criteria img { width: 75px; } .badge-panel { border: solid 1px #dddddd; padding: 0px !important; margin: 10px 3.7% 20px 3.7%; } .badge-panel .panel-heading { background-color: whitesmoke; } .badge-panel .media img { max-height: 90px !important; max-width: 100%; } .badge-panel .media { margin: 10px 0px 20px 0px; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* center forms*/ fieldset.col-md-8 { margin-left: 16%; } /*catalogue search*/ .search_container.catalogue, .search_container.media { border: solid 1px #cccccc; display: inline-block; padding: 3px 5px; background-color: white; margin: 0px 0px 10px 0px; border-radius: 4px; width: 100%; } .search_container.catalogue button, .search_container.media button { cursor: pointer; float: right; background-color: transparent; border: none 0px; border-collapse: collapse; } .search_container.catalogue input, .search_container.media input { border: none 0px; margin: 0px 0px 0px 5px; color: #999999; width: 85%; } .search_container.catalogue input:focus, .search_container.media input:focus { outline: none; } .media-container .back, .media-container .next { cursor: pointer; } .media-container .fa.fa-file-word-o, .media-container .fa-file-powerpoint { font-size: 125pt; margin-top: 20px; color: black; } #catalogueResults .highlight { background-color: yellow; } .media-filter-type .type-count { margin-left: 5px; } .panel-default.search .radio-inline input { width: auto !important; margin: 0px 0px 0px -20px !important; } .SupervisorView .filter-container ul { list-style-type: none; margin: 0px; padding: 0px; } *[data-file] img, *[data-file] video { max-width: 300px; } .SupervisorView td.activity-type::first-letter { text-transform: uppercase; } /* course details ratings */ #catalogueResults .course-rating { margin-left: 8px; } #catalogueResults .course-rating[data-rating="0"], #catalogueResults .course-rating[data-rating="undefined"] { display: none; visibility: hidden; } .page-header .course-rating .fa-star, .page-header .course-rating .fa-star-half, #catalogueResults .course-rating .fa-star, #catalogueResults .course-rating .fa-star-half { font-size: 1.2em; color: #f5b507; margin: 0px 5px 0px 0px; } #catalogueResults .course-rating .fa-star, #catalogueResults .course-rating .fa-star-half { margin: 0px 0px 0px 0px; } #catalogueResults .course-title { display: inline-block; } /* Added as per Isobel's request*/ #catalogueResults .tc-btn-group .btn { margin-bottom: 5px; } #MyForums li.page-item { cursor: pointer; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Styles */ body.ForgotPassword.modal { font-size: 1em; } body.ForgotPassword fieldset > legend, body.ForgotPasswordfieldset > legend h1 { border: none; } body.ForgotPassword.modal p, body.ForgotPassword.modal h1, body.ForgotPassword.modal h2, body.ForgotPassword.modal { background-image: none; background-color: white; color: black; font-family: Arial, Helvetica, sans-serif; } body.ForgotPassword legend { display: none; } .label { width: 100% !important; font-size: 1em; font-weight: bold; } input[type="text"] { width: 100% !important; } .button_container { text-align: center; } } /*** credit categories*/ .cc-name { cursor: pointer; text-decoration: underline; } #catalogue_details .cc-name { cursor: default; text-decoration: none; } .cc-name:hover { text-decoration: none; } .credit-details .label { font-weight: bold; display: block; } .credit-details .modal-body div { margin-bottom: 5px; } .panel.objective-credits { padding: 0px 10px 10px 20px; } .panel.objective-credits label { font-weight: bold; } /* custom spinner */ .tc.tc-cog { font: normal normal normal 14px/1 FontAwesome; display: inline-block; } .tc.tc-cog:before { content: "\f013"; } .tc-spinner { -webkit-animation: tc-spin 2s infinite linear; animation: tc-spin 2s infinite linear; } @-webkit-keyframes tc-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes tc-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /*HTML Editor Media display*/ .fr-wrapper .thumb.placeholder { display: none; } .vid-inline { max-width: 80%; } .audio-inline { display: block; margin: 5px 5px 10px 5px; } .word-inline:before { content: "\f1c2"; margin: 0px 5px 0px 5px; } .ppt-inline:before { content: "\f1c4"; margin: 0px 5px 0px 5px; } .pdf-inline:before { content: "\f1c1"; margin: 0px 5px 0px 5px; } .excel-inline:before { content: "\f1c3"; margin: 0px 5px 0px 5px; } .btn-group.obj-fb { position: absolute; bottom: 10px; } .credit-claiming label { width: auto !important; } /* hide the extra button for enrolled lp's*/ button[data-status="Active"][data-coursetype="learning path"] { display: none; } button[data-status="Completed"][data-coursetype="learning path"] { display: none; } #mycourse .activity-overview .activity_summary_info > .row > .credits { display: block; visibility: visible; } /* zen desk on help */ iframe#launcher { z-index: 100 !important; } /* sales force widget */ button.sf.widget { position: fixed; z-index: 100; display: block; bottom: 20px; right: 20px; } /* invalid text input */ input:invalid { color: red; } /* Feedback css */ .subQuestion { display: inline-block; } .feedbackControl { z-index: 1; } /* Adjust css as per Accessibility requirements */ .pagination > .disabled > a, .pagination > .disabled > a:hover { color: black !important; } #searchHeading { font-size: 1.75rem; margin: 0px; } .missed-question h3 { color: red; } /* Adjust Button css*/ .button_container { margin-bottom: 40px; } /*#Tile-AgendaTile td.date{ min-width:200px; } #Tile-AgendaTile td.title { min-width: 220px; }*/ #Tile-AgendaTile td.actions { padding: 4px; } #Tile-AgendaTile td.actions .btn { margin-right: 5px; } span.course-badge { height: 100%; } img.course-badge { height: 50px; } .activity_calendar_modal .modal-dialog { width: 800px; } .panel.activity[data-status="completed"] .btn.transfer { display: none; } .choices .radio { width: 100%; display: block; float: left; clear: both; } .choices .subQuestion { display: block; float: left; clear: both; } .SupervisorView .filter-container .panel-body { max-height: 250px; min-height: 180px; overflow-y: auto; } .panel-heading label { width: 100%; } .modal .dixa-messenger-namespace { display: none !important; } .modal-open .dixa-messenger-namespace { display: none !important; } a.btn.recommendations { margin-left: 20px; } .media-container .media .panel:nth-child(odd) { margin-right: 10px; } .media-container .media .panel button i { margin-left: 5px; } .media-container .media-filter-type { list-style: none; margin-left: 0px; padding-left: 0px; } .media-filter-type input { margin-right: 5px; } @page { margin: 0cm; size: A4 landscape; } @media print { #GOSHButton { display: none; } body.Transcripts #content.container { margin: 0px 5px 0px 5px; width: 100%; } html body.Transcripts #content.container { font-size: 12pt; } body.Transcript #content.container { margin: 0px 5px 0px 5px; width: 100%; } html body.Transcript #content.container { font-size: 1.2em; } } :root { /* Typography */ --font-scale: 1; /* #97802: font size selector multiplies all learner-view font sizes by this */ --typography-font-family: 'Proxima Nova', 'Montserrat', sans-serif; --typography-headers-font-family: 'Proxima Nova', 'Montserrat', sans-serif; --typography-size: 10pt; --typography-h1: #153c35; --typography-h2: #153c35; --typography-h3: #153c35; --typography-links-color: #005245; --typography-link-weight: bold; /* Body */ --body-background-colour: white; --body-login-background-image: https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/loginBackground.gif; /* Masthead */ --masthead-background-colour: #005245; --masthead-current-role-tab-text-color: #363d47; --masthead-current-role-tab-background-color: white; --masthead-border-color: white; --masthead-menu-item-text-color: white; --masthead-menu-item-background-color: #153833; --masthead-menu-item-active-text-color: #c8e982; --masthead-menu-item-active-background-color: #153833; /* Content */ --content-background-color: white; --content-border-color: white; /* Buttons */ --button-text-color: white; --button-background-color: #005245; --button-hover-text-color: #153c35; --button-hover-background-color: #c8e982; /* Forms */ --forms-legend-text-color: #153c35; --forms-legend-background-color: white; --forms-fieldset-border-color: white; /* Tables */ --table-header-row-background-color: #005245; --table-header-text-color: white; --table-row-subheader-1-background-color: #7ebc00; --table-row-subheader-1-text-color: #153c35; --table-row-subheader-2-background-color: #ecd9c7; --table-row-subheader-2-text-color: #153c35; --table-row-subheader-3-background-color: #ecd9c7; --table-row-subheader-3-text-color: #153c35; --table-row-border-color: white; --table-row-0-text-color: #153c35; --table-row-0-background-color: #ecd9c7; --table-row-1-text-color: #153c35; --table-row-1-background-color: #ecd9c7; /* Tabs */ --tab-background-color: white; --tab-text-color: #005245; --tab-active-text-color: white; --tab-active-background-color: #005245; /*Supervisors*/ --logins-text: #b32d6a; --logins-bg: rgba(138, 33, 85, 0.2); --completions-text: #1c7c46; --completions-bg: rgba(39, 104, 69, 0.2); --notifications-text: #d6ac00; --notifications-bg: rgba(204, 154, 0, 0.2); --enrollments-text: #0073a8; --enrollments-bg: rgba(0, 104, 140, 0.2); /* Footer */ --footer-background-color: white; --footer-font-color: #005245; } /*************** #97802 font-scale: Bootstrap 3 typography follows the learner font selector ***************/ /* Values mirror js/cdn/bootstrap.min.3.36.css exactly - visually identical at --font-scale: 1 */ html { font-size: calc(10px * var(--font-scale, 1)); } h1, .h1 { font-size: calc(36px * var(--font-scale, 1)); } h2, .h2 { font-size: calc(30px * var(--font-scale, 1)); } h3, .h3 { font-size: calc(24px * var(--font-scale, 1)); } h4, .h4 { font-size: calc(18px * var(--font-scale, 1)); } h5, .h5 { font-size: calc(14px * var(--font-scale, 1)); } h6, .h6 { font-size: calc(12px * var(--font-scale, 1)); } .lead { font-size: calc(16px * var(--font-scale, 1)); } @media (min-width: 768px) { .lead { font-size: calc(21px * var(--font-scale, 1)); } } .btn { font-size: calc(14px * var(--font-scale, 1)); } .btn-group-xs > .btn, .btn-xs { font-size: calc(12px * var(--font-scale, 1)); } .btn-group-sm > .btn, .btn-sm { font-size: calc(12px * var(--font-scale, 1)); } .btn-group-lg > .btn, .btn-lg { font-size: calc(18px * var(--font-scale, 1)); } .form-control, .input-group-addon, output { font-size: calc(14px * var(--font-scale, 1)); } .input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn, .input-group-addon.input-sm, .form-group-sm .form-control, .form-group-sm .form-control-static, .form-horizontal .form-group-sm .control-label { font-size: calc(12px * var(--font-scale, 1)); } .input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn, .input-group-addon.input-lg, .form-group-lg .form-control, .form-group-lg .form-control-static, .form-horizontal .form-group-lg .control-label { font-size: calc(18px * var(--font-scale, 1)); } .dropdown-menu { font-size: calc(14px * var(--font-scale, 1)); } .dropdown-header { font-size: calc(12px * var(--font-scale, 1)); } .badge { font-size: calc(12px * var(--font-scale, 1)); } .tooltip { font-size: calc(12px * var(--font-scale, 1)); } .popover, .popover-title { font-size: calc(14px * var(--font-scale, 1)); } .panel-title { font-size: calc(16px * var(--font-scale, 1)); } .pagination-sm > li > a, .pagination-sm > li > span { font-size: calc(12px * var(--font-scale, 1)); } .pagination-lg > li > a, .pagination-lg > li > span { font-size: calc(18px * var(--font-scale, 1)); } legend, .close { font-size: calc(21px * var(--font-scale, 1)); } pre { font-size: calc(13px * var(--font-scale, 1)); } blockquote { font-size: calc(17.5px * var(--font-scale, 1)); } .progress-bar { font-size: calc(12px * var(--font-scale, 1)); } /* #97802: let Bootstrap 3 form controls grow with the font instead of clipping it. height:auto computes to exactly 34/30/46px at --font-scale: 1 (padding + line-height + border) */ .form-control { height: auto; } .input-sm, select.input-sm, .form-group-sm .form-control, .form-group-sm select.form-control, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn, select.input-group-sm > .form-control, select.input-group-sm > .input-group-addon, select.input-group-sm > .input-group-btn > .btn { height: auto; } .input-lg, select.input-lg, .form-group-lg .form-control, .form-group-lg select.form-control, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn, select.input-group-lg > .form-control, select.input-group-lg > .input-group-addon, select.input-group-lg > .input-group-btn > .btn { height: auto; } html { height: 100%; min-height: 100%; } html body { height: auto; min-height: 100%; position: relative; background-color: white; font-family: 'Proxima Nova', 'Montserrat', sans-serif; font-size: calc(10pt * var(--font-scale, 1)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility !important; } @media print { body { font-family: 'Proxima Nova', 'Montserrat', sans-serif; font-size: calc(10pt * var(--font-scale, 1)); } } @media (min-width: 1200px) { body .row { margin-left: -15px; } } /*allows the survey to scroll within a modal */ html[data-pagename="SurveyFeedback"], html[data-pagename="PreviewFeedback"] { overflow: scroll; } /*Allows the disclaimer to scroll*/ body.modal.Disclaimer { overflow-y: auto; } html body .modal { display: none; } html body .modal.in { display: inline-block; } /*not sure why we are using 2 different data names*/ html[data-pagename="design questionnaire"] { overflow: scroll; } html body.Login { background-image: url('https://education.ontariodigauthority.ca/FormatResource.ashx/programLearnerView_e56ec53a-ec65-45b0-a303-a31d75c51848/loginBackground.gif'); } html body.fit_bg_to_page { background-size: cover; background-attachment: fixed; background-position: center center; } body.popup { padding-top: 15px; padding-bottom: 15px; } /*Log in bar*/ #masthead #login_info { background-color: white; color: #363d47; } #log_in_bar.container { background-color: white; color: #363d47; } #log_in_bar .login_in_bar_loginlinks_container { display: flex; justify-content: flex-end; flex-direction: row; flex-wrap: nowrap; align-items: center; } /*Masthead*/ #masthead { background-color: #005245; border-bottom: solid 1px white; padding: 15px; } #masthead #logo { margin: 10px 0px; } .visible-print-inline-block.visible-inline-block { display: inline-block !important; } #masthead #login_info { width: auto; font-size: 0.9em; margin-top: 0.25em; color: #363d47; background-color: white; } #masthead .keep_right #login_info { float: right; margin: 0px; } /*#masthead .keep_right #login_info #languageSelection .form-control {padding:7px 12px 6px 12px;}*/ #masthead .keep_right #search { clear: none; margin: 0px 0px 0px 10px; } #masthead .keep_right #search .search_container { margin: 0px; padding: 5px 12px 5px 12px; } #masthead #login_info .btn-group.profile-menu { margin: 0px 0px 0px 15px; } #masthead #login_info .btn-group.profile-menu .dropdown-header, #masthead #login_info .btn-group.profile-menu li.dropdown-header .timezone { color: black; } #masthead #login_info .label.sr-only { display: none; } #masthead #login_info img.profile { float: right; margin-left: 5px; object-fit: cover; } #masthead #login_info .loggedinas img.profile { height: 35px !important; padding: 0px; border: none 0px; } #masthead #login_info > div > .loggedinas { margin-right: 0.5em; } #masthead #login_info > div > .username { margin-right: 1em; } #masthead #login_info > div > input#Password, #log_in_bar input#Password { width: 100px !important; } #masthead #login_info span.separator, #log_in_bar span.separator { margin: 0px 5px; color: #363d47; } #masthead #login_info span.language_selector { text-transform: uppercase; } #log_in_bar #languageSelection, .profile-menu #languageSelection { margin: 0 0 0 0.5em; } #masthead #login_info #languageSelection .form-control { height: auto; padding: 6px 12px; } #masthead #login_info .notloggedin .form-control { width: auto; } #masthead #login_info .notloggedin > *, #log_in_bar .notloggedin > * { float: right !important; margin-left: 1em; margin-right: 0; } #masthead #log_in_bar a.home, #login_info a.home, #log_in_bar a.home { font-size: 2em; display: inline-block; padding: 2px 0px; } #log_in_bar .form-control { width: auto; } #log_in_bar .row > div > div.profile-menu { margin-right: 0; } #log_in_bar .row > div > div.profile-menu > * { float: right !important; } .profile-menu .dropdown-menu { min-width: 210px; font-size: 0.9em; } #log_in_bar .row > div > div.profile-menu > .profile-dropdown { float: right; margin-left: 15px; } #masthead #cart_icon { font-size: 2em; display: inline-block; position: relative; margin-right: 15px; } #masthead #cart_icon #cart_count { background-color: #e17a27; border-radius: 50%; width: 17px; height: 17px; display: inline-block; text-align: center; font-size: calc(12px * var(--font-scale, 1)); line-height: 1.4167; position: absolute; top: -7px; left: 12px; color: white; background-color: #005245; } #masthead #cart_icon .svg-inline--fa { font-size: calc(24px * var(--font-scale, 1)); } #masthead .profile_links #inbox_unread.badge { color: white; background-color: #005245; margin: -1em 0px 0px 3px; font-size: 0.8em; } #masthead #inbox_unread_menu.badge { color: white; background-color: #005245; margin-left: 7px; font-size: 0.8em; } #masthead #inbox_unread_menu.badge:empty { display: none; } #masthead .profile-inbox { margin-left: 10px; } .modal.purchase-alert .purchase-item { display: inline-block; width: 100%; margin: 15px 0px; } .modal.purchase-alert .purchase-item .marquee_wrap { margin-right: 15px; border: solid 1px #f6f6f6; float: left; min-height: 3em; } .modal.purchase-alert .purchase-item .purchase-title { font-weight: bold; } #masthead #login_info .profile_links > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; align-content: stretch; } .profile-menu .caret { margin: 0 0 4px 6px; } .profile-menu li { text-align: left; } .profile-menu li.dropdown-header { text-transform: uppercase; font-size: 1em; min-height: 40px; color: black; } .profile-menu li img.profile, #log_in_bar .profile-menu li img.profile { float: right; margin: 0 0.5em 0.5em 0; position: relative; top: auto; right: auto; } .profile-menu li .timezone { font-size: 1em; } .profile-menu li .fa, .profile-menu li svg { margin-right: 10px; width: 15px; height: 15px; text-align: center; } .profile-menu li a { font-size: 1.1em; } #masthead #search { margin: 10px 0px; clear: right; } #masthead #search span.search_container, #footer #search_tile span.search_container { border: solid 1px #cccccc; display: inline-block; padding: 3px 5px; background-color: white; } #masthead #search span.search_container button, #masthead #search span.search_container span, #footer #search_tile span.search_container span { cursor: pointer; cursor: hand; float: right; background-color: transparent; border: none 0px; border-collapse: collapse; } #masthead #search span.search_container input, #footer #search_tile span.search_container input { border: none 0px; margin: 0px 0px 0px 5px; color: #999999; width: 160px; } #masthead #search span.search_container input:focus, #footer #search_tile span.search_container input:focus { outline: none; } #footer #search_tile span.search_container input { width: 120px; } #masthead #search span.search_container, #footer #search_tile span.search_container { border-radius: 4px; margin-top: 1em; padding: 6px 12px; } .sidebar-nav { padding: 9px 0; } .dropdown-menu { font-size: 1em; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown > .dropdown-menu { display: none; } .dropdown:hover > .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .nav .dropdown-menu { margin-top: 0; } .nav .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .nav .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid white; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } .navbar-default .navbar-nav > li > a { text-decoration: none; } .navbar-nav > li > .dropdown-menu { z-index: 1030; } .navbar-static-top { border-width: 0px; z-index: 99; } body > #viewCourseModal { background-color: white; } .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; display: none !important; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block !important; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: white; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } #masthead #main_menu_bar, #masthead #main_menu_bar .navbar-default { background-color: #153833; border-color: white; margin-bottom: 0px; } #masthead #main_menu_bar .navbar-default { z-index: 1; } #masthead #main_menu_bar .navbar-default > .container { display: flex; align-content: stretch; align-items: flex-start; } #masthead .masthead_menu #main_menu_bar .navbar-default .container { width: auto; padding: 0px; } #masthead .masthead_menu #main_menu_bar .navbar-default > .container > .navbar-header, #masthead .masthead_menu #main_menu_bar .navbar-default > .container > .navbar-collapse { float: left; } #masthead .masthead_menu #login_info, #masthead .masthead_menu #search, #masthead .masthead_menu #main_menu_bar { float: right; margin: 0px; clear: none; } #masthead .masthead_menu #search span.search_container { margin-top: 0px; } #masthead .masthead_menu #login_info .btn-group.profile-menu { margin: 0px; } /*#masthead .masthead_menu #login_info .btn-group.profile-menu .profile-dropdown, #masthead #login_info .btn-group.profile-menu .profile-dropdown, #masthead #login_info .btn-group.profile-menu .profile-inbox { margin-left: 10px; }*/ #masthead #login_info .btn-group.profile-menu .profile-inbox #inbox_unread { margin-left: 5px; } #masthead .masthead_menu #login_info .btn-group.profile-menu #languageSelection, #masthead #login_info #languageSelection { margin: 0px; } #masthead .masthead_menu #login_info .btn-group.profile-menu #languageSelection .form-control, #masthead #login_info #languageSelection .form-control { padding: 8px 12px; } #masthead .masthead_menu #login_info a.home { display: none; } #masthead > .row.menu + .row.breadcrumbs #breadcrumbs > .breadcrumb { border-radius: 0px; margin-bottom: 0px; } #masthead #login_info img.profile, #log_in_bar img.profile { height: 40px !important; } #login_info .profile_links ul, #log_in_bar .profile_links ul { display: inline-block; margin: 0px; padding: 0px; } #login_info .profile_links ul li, #log_in_bar .profile_links ul li { display: inline-block; float: left; margin: 0px; padding: 0px 10px 0px 0px; } #login_info .profile_links ul li .fa, #log_in_bar .profile_links ul li .fa, #login_info .profile_links ul li .svg-inline--fa, #log_in_bar .profile_links ul li .svg-inline--fa, #masthead #login_info .dropdown-menu > li > a .svg-inline--fa, #masthead #login_info .dropdown-menu > li > a svg { margin-right: 3px; width: 20px; } #login_info .profile_links ul li > a, #log_in_bar .profile_links ul li > a, #masthead #login_info .dropdown-menu > li > a { display: flex; align-items: center; } #login_info .login_details > span + span, #log_in_bar .login_details > span + span { margin-left: 0.025em; line-height: calc(40px * var(--font-scale, 1)); } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a, #masthead #main_menu_bar .navbar > .container .home.navbar-brand { color: white; background-color: #153833; } #masthead #main_menu_bar .navbar-default .navbar-brand { color: white; } #masthead #main_menu_bar .navbar-default .navbar-nav > .active > a, #masthead #main_menu_bar .dropdown-menu > .active > a { color: #c8e982; background-color: #153833; } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a:hover, #masthead #main_menu_bar .navbar-default .navbar-nav > li > a:focus, #masthead #main_menu_bar .navbar > .container .home.navbar-brand:hover, #masthead #main_menu_bar .navbar > .container .home.navbar-brand:focus, #masthead #main_menu_bar .dropdown-menu > .active > a:focus, #masthead #main_menu_bar .dropdown-menu > .active > a:hover { color: #c8e982; background-color: #153833; } #masthead #main_menu_bar .navbar-default .navbar-nav > li.separator { color: white; } @media print { #masthead.container, #masthead.container .row:first-child, #masthead.container .row:first-child > div, #masthead.container .row:first-child > div #logo, #masthead.container .row:first-child > div #logo a.pageLogo { display: block !important; width: 100% !important; height: auto !important; clear: both; } #masthead #logo > a.pageLogo[href]:after { content: none !important; } #masthead.container .row:first-child > div #logo a.pageLogo img { display: inline-block !important; visibility: visible !important; width: auto !important; height: 60px !important; clear: both; filter: invert(0%); } } /*Footer*/ #footer { /*position:absolute; bottom:0px; width:100%!important;*/ margin-left: auto; margin-right: auto; background-color: white; } #footer.container { padding: 1em 15px; } #footer.container .copyright { line-height: calc(35px * var(--font-scale, 1)); } #footer.container .tile { min-height: 80px; } #footer.container address { white-space: pre-line; display: inline-block; } #footer.container #contact_us_tile .glyphicon, #footer.container #contact_us_tile .svg-inline--fa { margin: 2px 5px 0px 0px; float: left; width: 16px; } #footer.container #follow_us_tile.tile > div > a { margin: 0px 5px 5px 0px; display: inline-block; } #footer.container #follow_us_tile.tile > div > a img { max-width: 60px; } @media print { #footer.container .copyright { text-align: right; } } /*Content*/ .text-center { text-align: center; } body.Home > #content.container { padding: 0px 15px 20px 15px; background-color: white; border-color: white; } body > #content.container { padding: 0px 15px 15px 15px; background-color: white; border-color: white; } /*Defaults*/ /*h1 {font-size:1.5em; line-height:1.4em; font-weight:600; color:@Headings-h1;} h2 {font-size:1.25em; line-height:1.4em; font-weight:600; color:@Headings-h2;} h3 {font-size:1em; line-height:1.4em; font-weight:600; color:@Headings-h3; margin:0px;} h3.link {cursor:pointer; text-decoration:underline;} h3.link:hover {cursor:pointer; text-decoration:none;} h4 {font-size:1em; line-height:1.5em; font-weight:600;}*/ body h1 { font-size: 2em; line-height: 1.4em; font-weight: 400; color: #153c35; } body h2 { font-size: 1.8em; line-height: 1.4em; font-weight: 400; color: #153c35; } body h3 { font-size: 1.5em; line-height: 1.4em; font-weight: 400; color: #153c35; margin: 0px; } body h3.link { cursor: pointer; cursor: hand; text-decoration: underline; } body h3.link:hover { cursor: pointer; cursor: hand; text-decoration: none; } body table h3, body table thead > tr > th { font-size: 1.1em; font-weight: 600; } body h4 { font-size: 1.2em; line-height: 1.5em; font-weight: 600; } body h5 { font-size: 1.1em; line-height: 1.2em; font-weight: 600; } body h6 { font-size: 1em; line-height: 1.2em; font-weight: 600; } a { color: #005245; font-weight: bold; } .breadcrumb li > span { font-size: 0.8em; line-height: 1.1em; text-decoration: none; } .breadcrumb > li * { margin: 0px; display: inline; } #content.container > .page-header h1 { font-size: 3em; } #content.container > .page-header h1 small { font-size: 0.3em; display: block; margin: 5px 0px 0px 0px; } body > #content.container p { margin-bottom: 1em; } ul.list-unstyled { margin: 1em; } ul.long_content li, .description_links ul li, ul.list-unstyled li { list-style-type: disc; display: list-item; margin-left: 15px; } img.no-image { display: none !important; } .img-64x64 { max-width: 64px; max-height: 64px; } span.padded { padding: 1em; display: inline-block; } .nowrap { white-space: nowrap; } th { font-weight: bold; } h3 > .glyphicon { margin-right: 0.25em; font-size: 0.75em; } /*Carousel/Slideshow*/ #myCarousel, .carousel-inner > .item { max-height: 300px; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; } .carousel.slide.subobjective { min-height: 300px; height: auto; } .carousel-indicators { bottom: 0px; } .carousel-caption { bottom: 0px; width: 100%; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.5); } .carousel-caption > h1 { color: white; } .carousel-caption > div { margin: 0 20px; } .carousel-caption > div > a { color: white; } /*Tabs*/ .nav-tabs:empty { border: none 0px; } .tab-content { padding: 15px; } #tabs { margin-bottom: 1em; } #tabs li.term, #tabs li.noterm { width: 42px; } #tabs li.noterm a { text-decoration: none; color: #dddddd; } .tab-content .glossary li { margin-bottom: 15px; clear: both; } .tab-content .definition { display: inline-block; width: 100%; } #Courses .img-thumbnail, #Category_Matches .img-thumbnail { float: left; margin: 0px 5px 5px 0px; max-width: 250px; } #Courses .img-thumbnail.zooms { cursor: pointer; } .zoomed_image { float: left; padding: 4px; margin: 0px 5px 5px 0px; max-width: auto; line-height: 1.428571429; background-color: white; border: 1px solid #dddddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .zoomed_image > img { max-width: 250px; } .thumbnail.bottom-space { margin: 0px 15px 15px 0px; } /*Tabs*/ .nav-tabs { border-color: #005245; } .nav-tabs > li > a { text-decoration: none; background-color: white; color: #005245; border-bottom: solid 1px #005245; } .nav-tabs > li > a:hover, .nav-tabs > li > a:active, .nav-tabs > li > a:focus { background-color: #005245; color: white; border-bottom: solid 1px #005245; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { background-color: #005245; color: white; border-bottom: solid 1px #005245; } .nav-tabs > li.disabled > span { text-decoration: none; background-color: white; color: #005245; border-bottom: solid 1px #005245; opacity: 0.3; margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; position: relative; display: block; padding: 10px 15px; } .nav-tabs > li > a .badge { margin-left: 0.25em; } .nav.nav-tabs.lp li span.glyphicon { margin-left: 0.5em; } /*Navbars (not main meu)*/ nav.navbar-default { border-color: white; background-color: white; color: #005245; } .navbar-default .navbar-brand, .navbar-default .navbar-text.title { color: #005245; font-size: 1.1em; font-weight: bold; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover, #SupervisorView .dropdown:hover > .dropdown-menu li a .badge.count, #SupervisorView .badge.count { background-color: #005245; color: white; } nav.navbar-default .navbar-nav > li > a { text-decoration: none; background-color: white; color: #005245; } nav.navbar-default #filter_by_options .dropdown-menu { min-width: 240px; } nav.navbar-default #sort_by_options .dropdown-menu > li > span, nav.navbar-default #filter_by_options .dropdown-menu > li > span { cursor: pointer; cursor: hand; float: left; display: inline-block; width: 100%; padding: 5px; font-size: 0.9em; } nav.navbar-default #sort_by_options .dropdown-menu > li > span.sort .fa-check-circle, nav.navbar-default #filter_by_options .dropdown-menu > li > span.show .fa-check-circle { display: inline-block; } nav.navbar-default #sort_by_options .dropdown-menu > li > span.sort .fa-circle-o, nav.navbar-default #filter_by_options .dropdown-menu > li > span.show .fa-circle-o { display: none; } nav.navbar-default #sort_by_options .dropdown-menu > li > span .fa-check-circle, nav.navbar-default #filter_by_options .dropdown-menu > li > span .fa-check-circle { display: none; } nav.navbar-default #sort_by_options .dropdown-menu > li > span .fa-circle-o, nav.navbar-default #filter_by_options .dropdown-menu > li > span .fa-circle-o { display: inline-block; } nav.navbar-default #sort_by_options .dropdown-menu > li > span .svg-inline--fa, nav.navbar-default #filter_by_options .dropdown-menu > li > span .svg-inline--fa { margin: 0 0.25em 0 1em; } /*#tabs span.tab {margin-right:2px; line-height:1.428571429; border:1px solid transparent; border-radius:4px 4px 0 0;} #tabs span.tab span {position:relative; display:inline-block; padding:10px 15px;} #tabs span.tab span.left_corner, #tabs span.tab span.right_corner {display:none;}*/ /*Alerts*/ .alert.alert-cookie { background-color: black; background-color: rgba(0, 0, 0, 0.8); border-radius: 0px; color: white; padding: 15px 0px; } .alert.alert-cookie h2 { color: white; } .alert.alert-cookie .close { color: white; opacity: 1; filter: alpha(opacity=100); top: auto; right: auto; float: right; margin-top: 15px; } .alert.alert-cookie .button_container { margin: 0px 0px 15px 0px; } .alert.alert-cookie .more-cookie-info { margin: 0px 0px 0px 15px; } .alert:empty, .alert.alert-danger:empty { display: none; } .alert-danger, .alert-warning { display: block; } /*Fortumo Offer*/ .alert-offer { background-color: transparent; border: solid 1px #eeeeee; } /*Panels*/ .panel { position: relative; } .panel-primary { border-color: white; } .panel-primary > .panel-heading { background-color: #005245; border-color: white; color: white; } .panel-default > .panel-heading { background-color: #ecd9c7; border-color: white; color: #153c35; } .panel-default > .panel-content, .panel-default > .panel-body, .panel-default > .panel-body:hover { background-color: #ecd9c7; border-color: white; color: #153c35; } .floating_children { display: inline-block; width: 100%; } .overview { margin-bottom: 1em; } .overview ul, .description ol { overflow: hidden; } .overview ul > li, .description ul > li { display: list-item; list-style-type: disc; margin-left: 18px; } .overview ol > li, .description ol > li { display: list-item; list-style-type: decimal; margin-left: 18px; } /*.type {font-size:0.8em; text-transform:uppercase;}*/ .panel .type { width: auto; font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; color: #bbbbbb; text-transform: uppercase; } /*.panel .panel-body:hover {background-color:#FDFDF8;}*/ .panel-default { padding-left: 0px; padding-right: 0px; } /*Cards*/ .card .card-body { padding: 15px; } @media (min-width: 768px) { #catalogue .col-sm-6:nth-child(2n+1) { clear: left; } #catalogue .col-md-4:nth-child(3n+1) { clear: none; } #catalogue .col-lg-3:nth-child(4n+1) { clear: none; } } @media (min-width: 992px) { #catalogue .col-md-4:nth-child(3n+1) { clear: left; } #catalogue .col-lg-3:nth-child(4n+1) { clear: none; } #catalogue .col-sm-6:nth-child(2n+1) { clear: none; } } @media (min-width: 1200px) { #catalogue .catalogue-match.col-lg-3:nth-child(4n+1) { clear: left; } #catalogue .catalogue-match.col-md-4:nth-child(3n+2) { clear: none; } #catalogue .catalogue-match.col-sm-6:nth-child(2n+1) { clear: none; } } nav.inline { display: inline-block !important; } .pagination.left { float: left; } span.search { margin: 20px 0px 20px 0px; display: inline-block; width: 100%; } span.search input { width: 100%; } .ui-autocomplete { width: 200px !important; overflow: hidden; border-radius: 0px; } .ui-autocomplete .ui-menu-item { background-color: white; color: black; } .ui-autocomplete .ui-menu-item a:hover, .ui-autocomplete .ui-menu-item:hover { background-color: white; } .ui-menu .ui-menu-item a { color: black; border-radius: 0px; border: 0px; cursor: pointer; } .custom-combobox-input, .custom-combobox-input:focus, .custom-combobox-input:active { border-radius: 4px; border-color: #cccccc; outline: none; } .custom-combobox { position: relative; display: inline-block; background: none; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding: 5px 10px; } .custom-combobox-input.ui-widget.ui-widget-content.ui-state-default.ui-corner-left.ui-autocomplete-input { background: none; color: black; font-weight: normal; } #Category_Matches .nav-tabs > li > a { padding: 8px; } #Category_Matches .tab-content .col-md-4:nth-child(3n+1) { clear: left; } #Category_Matches .tab-content .col-md-6:nth-child(2n+1) { clear: left; } #Category_Matches .panel .img-thumbnail { max-width: 328px; } #Category_Matches .panel-heading h3 { margin-top: 1.5em; } #Category_Matches .matched_item_details { display: inline-block; } #Category_Matches .description_links { display: inline-block; } #Category_Matches .description_links .description-optional { width: auto; max-width: 100%; } #Category_Matches .description_links > div { display: inline-block; width: 100%; } #Category_Matches img.course-marquee.img-responsive { margin: 0px; max-width: 350px; } #Category_Matches .matched_item_details span, #Category_Matches .description_links span { display: inline-block; } #Category_Matches .matched_item_details span.label { padding-left: 0px; } #Category_Matches .description_links span.label { width: 140px; } #Category_Matches table { margin-top: 1em; } #Category_Matches table tr > *:nth-child(2n) { max-width: 500px; } #Category_Matches table tr > *:nth-child(2n) > div { white-space: pre-line; } #Category_Matches .nofilters .panel .panel-heading > *, #Category_Matches .nofilters .panel .panel-body > * { width: 100%; padding-left: 0px; padding-right: 0px; } #hasCredits { font-size: 1.2em; line-height: 2em; display: inline-block; width: auto; clear: right; } #LearningActivities #hasCredits { clear: none; margin-right: 15px; } #hasCredits > label { float: left; width: auto; margin: 0px 5px 0px 0px; } #hasCredits > span { display: inline-block; } #catalogueResults > .panel[data-creditstoggle="on"] { display: inherit; visibility: inherit; } #LearningActivities table#MyLearningActivities > tbody > tr[data-creditstoggle="on"], #LearningActivities table#MyLearningActivities > tbody > tr[data-creditstoggle="on"][show="show"], #LearningActivities table#MyLearningActivities > tbody > tr[show="show"], #MyTranscripts table.transcript_table > tbody > tr[data-creditstoggle="on"], #MyTranscripts table.transcript_table > tbody > tr[data-creditstoggle="on"][show="show"], #MyTranscripts table.transcript_table > tbody > tr[show="show"] { display: table-row !important; visibility: inherit; width: 100%; } #catalogueResults > .panel[data-creditstoggle="off"], #LearningActivities table#MyLearningActivities > tbody > tr[data-creditstoggle="off"], #LearningActivities table#MyLearningActivities > tbody > tr[show="hide"], #LearningActivities table#MyLearningActivities > tbody > tr[data-creditstoggle="off"][show="show"], #LearningActivities table#MyLearningActivities > tbody > tr[data-creditstoggle="off"][show="hide"], #MyTranscripts table.transcript_table > tbody > tr[data-creditstoggle="off"], #MyTranscripts table.transcript_table > tbody > tr[show="hide"], #MyTranscripts table.transcript_table > tbody > tr[data-creditstoggle="off"][show="show"], #MyTranscripts table.transcript_table > tbody > tr[data-creditstoggle="off"][show="hide"] { display: none !important; visibility: hidden; } #MyTranscripts table > tbody > tr > .credit-categories .credit-category-name:after { content: ": "; } #catalogueResults #calendar .fc-col-header, #catalogueResults #calendar .fc-daygrid-body.fc-daygrid-body-unbalanced, #catalogueResults #calendar .fc-daygrid-body.fc-daygrid-body-unbalanced table { width: 100% !important; } #catalogueResults .modal.activity_calendar_modal .modal-header .badge { font-size: 0.8em; padding: 5px 10px; margin: -15px 15px 0px 15px; border-radius: 0px 0px 3px 3px; background-color: #7ebc00; color: #153c35; } #catalogueResults .modal.activity_calendar_modal .row > div { margin-bottom: 15px; } #catalogueResults .modal.activity_calendar_modal label { font-weight: bold; margin: 0px; padding: 0px; width: 100%; } #catalogueResults .modal.activity_calendar_modal .value { margin: 0px; padding: 0px; width: 100%; } /* Added as per Isobel's request*/ #catalogueResults .tc-btn-group .btn { margin-bottom: 5px; } #catalogueResults .panel .description_links .label { float: left; } #catalogueResults .panel .description_links .value { padding: 0px; } #catalogueResults .panel .description_links .credit-category .credit-category-name:after { content: ":"; } /* Filter Labels */ .learning-activity-list #filtersPanel:empty { display: none; visibility: hidden; } .learning-activity-list #filtersPanel:empty + .learning-activities { width: 100%; } #filtersPanel label { width: auto; word-break: break-word; } #filtersPanel #metadataDiv .panel > .panel-body { max-height: 360px; overflow: auto; } /*#filtersPanel #metadataDiv .panel > .panel-body .show_moreless {max-height:360px; overflow:auto;}*/ #filtersPanel #metadataDiv .panel > .panel-body .show_moreless a[aria-expanded="true"] .show_more, #filtersPanel #metadataDiv .panel > .panel-body .show_moreless .show_less, #filtersPanel #metadataDiv .panel > .panel-body .show_moreless a[aria-expanded="false"] .show_less { display: none; visibility: hidden; } #filtersPanel #metadataDiv .panel > .panel-body .show_moreless a[aria-expanded="true"] .show_less, #filtersPanel #metadataDiv .panel > .panel-body .show_moreless a[aria-expanded="false"] .show_more { display: inline-block; visibility: visible; } #filtersPanel #CCFilters .children { padding-left: 20px; } #filtersPanel .panel { width: 100%; } #filtersPanel .form-check input.form-check-input { margin-top: 2px; } #filtersPanel .form-check { margin-bottom: 6px !important; } .suboptions { padding-left: 1.5rem; border-left: 2px solid #dee2e6; } #filtersPanel .suboptions { margin-left: -18px; } #filtersPanel .panel-heading, #filtersPanel .panel-heading h3, #filtersPanel .panel-heading .panel-heading__title { font-size: calc(16px * var(--font-scale, 1)); } #filtersPanel .panel .panel-body.in { max-height: 200px; overflow: auto; } .learning_path_activities { border-top: solid 1px #dddddd; } /*.pass-activities.learning-activity-list[number_activities="0"] {display:none; visibility:hidden;}*/ #mycourse .col-md-3 .panel-body > div { display: block; clear: both; } #mycourse .col-md-3 .panel-body > div.btn-group, #mycourse .col-md-3 .panel-body > div.button_container { display: inline-block; width: 100%; clear: both; } #mycourse .col-md-3 .panel-body > div > span { display: inline-block; width: 80px; float: left; } #mycourse .col-md-3 .panel-body > div > span.label + span { width: 150px; } #mycourse .panel.activity .separator, #mycourse .progress-breakdown .modal small .separator { margin: 0px 0.5em; } #mycourse .progress-breakdown .modal small .glyphicon { margin: 0px 0.5em 0px 0px; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row { padding-left: 0px; margin: 0px; display: flex; flex-wrap: wrap; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row.next_activity_group_container { display: inline-block; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row li { padding-left: 0px; display: inline-block; list-style-type: none; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row { padding-left: 0px; margin: 0px; display: flex; flex-wrap: wrap; width: 100%; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row > div { display: flex; align-items: stretch; padding-bottom: 15px; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row > div > .panel { display: inline-block; width: 100%; align-items: stretch; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row > div > .panel > .panel-body { background-color: #ecd9c7; border-color: white; color: #153c35; align-items: stretch; height: 100%; } #activity-content > iframe { width: 100%; min-height: 300px; border: none 0px; border-collapse: collapse; margin: 0px auto; } #mycourse .name .svg-inline--fa.fa-asterisk { margin-right: 3px; font-size: 0.7em; vertical-align: super; } #mycourse tbody th.item_progress { font-weight: 300; font-style: italic; font-size: 0.8em; } #mycourse .btn.activity-document .svg-inline--fa { margin-right: 5px; } #mycourse .modal-content .marquee.pull-left { max-width: 300px; margin: 0px 15px 15px 0px; } body.SurveyFeedback.modal { overflow-y: scroll; position: relative; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; overflow: auto; -webkit-overflow-scrolling: touch; outline: inherit; } /*Assignments*/ #mycourse .panel.progress-breakdown .panel-body > #StudentAssignments { display: flex; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; align-items: stretch; } #mycourse .panel.progress-breakdown .panel-body > #StudentAssignments .card .card-body { padding: 15px; } #mycourse .panel.progress-breakdown .panel-body > #StudentAssignments .modal-dialog.modal-lg { height: 90% !important; } #mycourse .panel.progress-breakdown .panel-body > #StudentAssignments .modal-dialog.modal-lg .modal-content { height: 100% !important; } #mycourse .panel.progress-breakdown .panel-body > #StudentAssignments .modal-dialog.modal-lg .modal-content .modal-body { height: calc(100% - 118px) !important; padding: 0px; } body.submit.assignment.modal, body.review assignment { overflow-y: auto !important; } #AssignmentDetails #Instruction img { max-width: 100%; } /*Credits*/ #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-group-credits .panel.credits_certificates, #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-group-credits .panel.credits_certificates .panel-body { width: 100%; background-color: #ecd9c7 !important; border-color: white; color: #153c35; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-group-credits .panel.credits_certificates .credit-provider-container { margin: 8px 0px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-group-credits .panel.credits_certificates .credit-provider-container .credit-provider { font-weight: bold; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-group-credits .panel.credits_certificates .credit-category .credit-category-name { margin-right: 5px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-group-credits .panel.credits_certificates .credit-category .credit-category-name:after { content: ":"; } #mycourse .row.Learning_Path .lp_activities .tab-pane .credit-details.modal .credit { margin: 0px; padding: 0px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .credit-details.modal .credit + .credit { border-top: solid 1px #eeeeee; margin-top: 15px; padding-top: 15px; } #mycourse .panel.credits_certificates .credit-category .credit-category-name .credit-status { margin-left: 1em; } #mycourse .panel.credits_certificates .credit-category .credit-status.reporting-error { display: inline-block; width: 100%; color: red; font-weight: bold; margin-bottom: 5px; } /*Embed*/ .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive.embed-responsive-16by9 { padding-bottom: 56.25%; } /*Forms*/ form:focus { outline: none; } form.form-inline { display: inline; } fieldset { border: none 0px; padding: 1em; margin-bottom: 1em; background-color: white; } fieldset > legend, fieldset > legend h1 { font-size: calc(21px * var(--font-scale, 1)); font-weight: normal; color: #153c35; background-color: white; border-color: white; } fieldset > legend h1 { margin: 0px; } input[type="radio"], input[type="checkbox"], fieldset input[type="radio"] + .label, fieldset input[type="checkbox"] + .label { width: auto; } fieldset .label { width: 240px; height: auto; } .label { white-space: normal; } #Message .label { width: 185px; } fieldset > div { clear: both; margin-bottom: 0.5em; } fieldset #CustomMetadata_FieldTable tr > * { padding-bottom: 0.5em; } fieldset #availableCoursesLanguage + label { width: auto; margin-left: 5px; } .checkbox.form-control { padding-left: 15px; } .checkbox.form-control input[type="checkbox"] { margin-left: 0px; margin-right: 0.25em; } .checkbox.form-control label { width: auto; } .form-control.datepicker, .date-range .input-group-addon, .input-group.date-range { width: auto; display: inline-block; } .input-group.date-range { float: right; margin: 15px 0px; } .input-group.date-range > * { float: none; } .input-group.date-range .label { width: auto; padding: 0px 12px; line-height: calc(34px * var(--font-scale, 1)); } .input-group.date-range .form-control { width: auto; } .input-group.date-range .input-group-addon { line-height: calc(20px * var(--font-scale, 1)); } .input-group.date-range .form-control.datepicker { padding: 0px; cursor: pointer !important; cursor: hand !important; } .input-group.date-range .form-control.datepicker input { background: none !important; border: none 0px; padding: 6px 12px !important; } .input-group.date-range .input.hasDatepicker { background: none !important; } .input-group.date-range .btn { margin-left: 1em; } .row.mytranscripts span.form-control.datepicker { float: none; } input#transcript_search { max-width: 262px; display: inline-block; margin: 7px; } .input-group .form-control, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group { z-index: 0; } span.form-control.datepicker { padding: 0px; background-image: url(../../images/calendar/calendar.png); background-repeat: no-repeat; background-position: right; } span.form-control.datepicker input[onmousedown*="datepicker"] { border: none 0px; background: none transparent !important; cursor: pointer; cursor: hand; } #ExternalTrainingModal .form-group { margin-bottom: 1em; width: 100%; } textarea { resize: vertical; } div.details > div { margin-bottom: 1px; } .label, label { font-size: 1em; font-weight: 300; display: inline-block; width: 115px; text-align: left; padding-left: 0px; } .label.col-sm-3, label.col-sm-3 { width: 25%; } .label.text-right { text-align: right; } .label.text-left { text-align: left; } .label.left { float: left; line-height: 1.1em; } .label.label-info { padding: 0.2em 0.6em 0.3em 0.6em; color: white; width: auto; } .value { display: inline-block; line-height: 1.1em; padding: 0.2em 0.6em; } /* width:115px;*/ input[type="radio"] { vertical-align: middle; margin: 0px 2px 0px 10px; height: 1.5em; } div.details h3 { width: auto; } .myprofile .form-horizontal .form-group:hover { background-color: #f6f6f6; } #login_info .form-group, #login_info #register, #login_info .log_in { margin-right: 0.5em; } #login_info .glyphicon.glyphicon-home { font-size: 2em; height: 34px; top: 9px; } #masthead #login_info .dropdown-menu { z-index: 10000; } #masthead #login_info .dropdown-menu > li > a { color: #333333; text-align: left; text-decoration: none; } #defaultSortingChoose label { width: auto; } #MyCourses .sort { font-size: 0.9em; } #MyCourses .details .status_breakdown { font-size: 0.9em; margin-top: -5px; } #MyCourses div.details div.row.status_breakdown > div { padding-bottom: 0; } #MyCourses .details label { text-align: right; } #ExternalTrainingModal .form-group { margin-bottom: 1em; } /*Images*/ .profile.img-thumbnail, .profile.img-rounded { margin: 0 0.5em 0.5em 0; } .img-thumbnail.profile.fullsize { width: auto; height: auto; max-width: 300px; max-height: 300px; } .panel > img.profile { width: 100%; max-width: 300px; max-height: 300px; } /*Equivalancy Modal*/ #LPActivityEquivalenciesSelection #lpTitleDiv h1 { margin-top: 0px; } #LPActivityEquivalenciesSelection #series_titleDiv { margin-bottom: 1em; } #LPActivityEquivalenciesSelection #series_selectionDiv .course-row { margin: 0px 0px 15px 0px; } #LPActivityEquivalenciesSelection #series_selectionDiv .course-row .option { border: solid 1px #eeeeee; padding: 15px 15px 15px 3em; position: relative; } #LPActivityEquivalenciesSelection #series_selectionDiv .course-row .option:hover { background-color: #c8e982; } #LPActivityEquivalenciesSelection #series_selectionDiv .course-row .option input { position: absolute; top: 1em; left: 5px; } /*Buttons*/ .btn, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, #SupervisorView .btn-group.chart-nav .btn.active { text-decoration: none; color: white; border-color: #005245; background-color: #005245; z-index: 0; } .btn:hover, .btn:active, .btn:focus, #SupervisorView .btn-group.chart-nav .btn.active:hover { text-decoration: none; color: #153c35; border-color: #c8e982; background-color: #c8e982; } #SupervisorView .btn-group.chart-nav .btn { color: #005245; border-color: #005245; } .btn.single-resource .svg-inline--fa { margin-right: 0.25em; } .course-buttons .btn, .course-buttons .btn-group { margin: 0px 5px 0px 0px; } .course-buttons .btn-group > .btn { margin: 0px; } .course-buttons .btn-group > .btn-refresh { margin-left: 1px; } .course-buttons .btn-group > .btn-refresh .svg-inline--fa { font-size: 0.7em; } .btn-group { margin: 0.5em 0em; } .btn-group.primaryButtons { float: right; margin: 0px 0px 5px 15px; } .btn.btn-disabled, .btn[disabled], .btn-primary[disabled], .btn.btn-default[disabled] { background-color: white !important; color: #cccccc !important; border: 1px solid #cccccc !important; } .btn .topleft_corner, .btn .bottomleft_corner, .btn .bottomright_corner, .btn .topright_corner { display: none; } #GoBackbtn + #btnPrint { margin-right: 0.5em; } .btn.btn-icon { background-color: transparent; border-color: transparent; color: #005245; } .btn.btn-icon:hover { background-color: transparent; border-color: transparent; color: #c8e982; } #collapseCountryAlt .well { display: block; border: none 0px; background-color: transparent; padding: 15px 0px; font-style: italic; font-size: 0.9em; text-align: center; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } #collapseCountryAlt.collapse .well { border: none 0px; background-color: transparent; padding: 15px 0px; font-style: italic; font-size: 0.9em; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } /*List Groups*/ .list-group-item[onclick] { cursor: pointer; } .list-group-item[onclick]:hover { background-color: #f4f8fa; } .list-group-item.active { background-color: #ecd9c7; border-color: white; color: #153c35; } .list-group-item.active a { color: #153c35; } .list-group-item { background-color: #ecd9c7; border-color: white; color: #153c35; } .session-list { margin-top: 1.5em; } .session-list > li { display: list-item; list-style-type: disc; margin-left: 18px; } /*Modals*/ .modal-header { color: black; } .modal-body { color: black; } .modal ul.nav-tabs > li { display: inline-block !important; list-style-type: none !important; margin-left: 0px; } .modal .modal-body .container { width: 100% !important; } .modal .modal-dialog.modal-sm .modal-body .label, .modal .modal-dialog.modal-sm .modal-body .form-control { float: none; text-align: center; width: 100%; } /*Tables*/ table.table { font-size: 1em; } table.course_progress { clear: both; } .table > thead > tr > th, .table > thead > tr > td, .table > thead > tr > th.type, .table > thead > tr > th.success, .panel-heading, .table.grid tbody > tr.table_header > th { background-color: #005245; color: white; border-color: white; } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tfoot > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td { vertical-align: middle; border-color: white; } table.table > tbody > tr.tableSubHeader td, table.table > tbody > tr.tableSubHeader th, table.table thead tr.tableSubHeader th, table.table > tbody > tr.tableSubHeader.active th, table.table > tbody > tr.tableSubHeader.active:hover th, table.table > tbody > tr.objective.tableSubHeader, table.table > tbody > tr.tableSubHeader:hover td, table.table > tbody > tr.tableSubHeader:hover th, table.table > tbody > tr.objective.tableSubHeader:hover, .table tr:nth-child(2n).tableSubHeader td, .table tr:nth-child(2n).tableSubHeader th, .table tr:nth-child(2n).objective.tableSubHeader, .table tr:nth-child(2n).tableSubHeader:hover td, .table tr:nth-child(2n).tableSubHeader:hover th, .table tr:nth-child(2n).objective.tableSubHeader:hover { background-color: #7ebc00; color: #153c35; } .tablesorter-header-inner { cursor: pointer; } .table .tableSubSubHeader td, .table .tableSubSubHeader th, caption.tableSubSubHeader { background-color: #ecd9c7; color: #153c35; border-color: white; } .table .tableSubSubSubHeader td { background-color: #ecd9c7; color: #153c35; border-color: white; } .table > tbody > tr:nth-child(2n-1) > td { background-color: #ecd9c7; color: #153c35; border-color: white; } .table > tbody > tr:nth-child(2n) > td { background-color: #ecd9c7; color: #153c35; } #content table > tbody > tr.divider > * { background-color: white; padding: 0px; height: 2px; } .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { background-color: #d9edf7; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-width: 1px 0px 0px 0px; } tr.table-footer > th, .table.grid tr:last-child > * { border-top: double 3px white; background-color: transparent; } .table.grid tr:last-child > * > table { width: 100%; } .table.grid tr:last-child > * > table tr > * { padding: 8px; line-height: 1.428571429; vertical-align: top; } html[dir=rtl] .table tr td, html[dir=rtl] .table tr th { text-align: right !important; direction: rtl !important; } .table tr > th:first-child, .table tr > td:first-child { text-align: left; } .table th.text, .table td.text { text-align: center; } .table th.number, .table td.number { text-align: right; } .table .actions { white-space: nowrap; } .table .actions .modal { white-space: normal; } .table .moderators { white-space: nowrap; } .table td .courseTitle { margin-left: 15px; display: block; } td.badges img { width: 200px; } @media (max-width: 767px) { th, td { display: inline-block !important; float: left; width: 100%; } .picker__table th, .picker__table td { width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: inherit; border-spacing: 0; border-color: inherit; vertical-align: inherit; text-align: center; font-weight: inherit; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; display: table-cell !important; float: none !important; } .picker__table { text-align: center; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: inherit; width: 100%; margin-top: 0.75em; margin-bottom: 0.5em; } .picker__weekday { width: 14.285714286% !important; font-size: 0.75em !important; padding-bottom: 0.25em !important; color: #999999 !important; font-weight: 500 !important; } .visible-sm.visible-xs { border-width: 0px; } table > tbody > tr > td.course { border-top-width: 1px; } td.course span.courseTitle, td span.courseTitle { margin-left: 0px !important; } .table > tbody > tr { border: solid 0px white; border-bottom-width: 5px; } .table > tbody > tr > td { border-width: 0px; padding: 2px 15px 2px 15px; } .table > tbody > tr > td:first-child { border-width: 0px; padding: 15px 15px 0px 15px; } .table > tbody > tr > td:last-child { border-width: 0px; padding: 0px 15px 15px 15px; } } @media (max-width: 768px) { .table > * > tr > td.hidden-sm { width: 0px; padding: 0px; } } @media print { th, td { display: table-cell; float: none; /*width:;*/ } } .table td .btn { margin-right: 0.5em; } #MyLearningPaths .progress, .progress-breakdown .progress.progress-bar { margin-bottom: 0px; min-width: 200px; width: 100%; height: 30px; white-space: nowrap; } .progress-breakdown .progress[data-percent="10000%"] .progress-bar { width: 100% !important; } .progress-breakdown .progress.progress-bar { background-color: #f3f3f3; height: 30px; margin-bottom: 10px; -webkit-box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.2); } .progress-breakdown .progress.progress-bar .progress-bar-success { line-height: calc(30px * var(--font-scale, 1)); } .progress.completed .progress-bar-success { background-color: #7ebc00; color: #153c35; } .progress.active .progress-bar-success { background-color: #005245; color: white; } .progress.inactive .progress-bar-success { background-color: #005245; color: #153c35; } .progress_legend { font-size: 0.9em; line-height: calc(15px * var(--font-scale, 1)); color: #888888; text-align: right; padding: 10px 0px; display: none; visibility: hidden; } .doughnut.progress_breakdown .progress_legend { position: absolute; bottom: -8px; } .progress_legend > div { display: inline-block; float: left; margin-right: 30px; } .progress_legend > div > .progress-bar { display: inline-block; float: left; margin-right: 5px; width: 15px; height: 15px; border-radius: 50%; } .activity-group-progress .progress-bar-required-inprogress, .activity-group-progress .progress-bar-optional-inprogress { opacity: 0.5; } .progress_legend > div.required-inprogress > .progress-bar, .progress_legend > div.optional-inprogress > .progress-bar { opacity: 0.4; } #MyLearningPaths .progress.progress-bar { height: 30px; } #MyLearningPaths .progress.progress-bar .progress-bar-success { line-height: calc(30px * var(--font-scale, 1)); } #MyLearningPaths .progress.inactive .progress-bar-success { margin-left: 10px; } #MyLearningPaths .progress.inactive .progress-bar-success[aria-valuenow="0"] { padding-left: 0px; } .progress-bar.progress-bar-success[aria-valuenow="0"] { color: #333333; } .progress-bar-success[aria-valuenow="0"] { color: #7ebc00; margin-left: 5px; padding-left: 0; } .progress-bar-success { height: 100%; line-height: calc(30px * var(--font-scale, 1)); font-size: 0.8em; white-space: nowrap; padding-left: 5px; } .my_learning_path .item_progress { min-width: 160px; border-radius: 0; } @media (max-width: 767px) { #MyLearningPaths .lp-score > div { text-align: left; } } .my_learning_path .actions .btn { margin: 0; } .my_learning_path .actions { min-width: 200px; text-align: right; } .my_learning_path .actions .modal { text-align: left; } .my_learning_path .actions .modal #lpTitleLabel { margin: 0px; } .activity_progress_visuals .doughnut, .activity_progress_visuals .doughnut_score { width: 175px !important; height: 175px !important; } .wedge.slice_0 { fill: #005245; color: #153c35; } .wedge.slice_1 { fill: #005245; color: #153c35; opacity: 0.2; } .ct-chart .ct-series.ct-series-a .ct-bar, .ct-chart .ct-series.ct-series-a .ct-line, .ct-chart .ct-series.ct-series-a .ct-point, .ct-chart .ct-series.ct-series-a .ct-slice.ct-donut, .ct-chart-donut .ct-series-a { stroke: #005245; color: #005245; fill: #005245; } .ct-chart .ct-series.ct-series-b .ct-bar, .ct-chart .ct-series.ct-series-b .ct-line, .ct-chart .ct-series.ct-series-b .ct-point, .ct-chart .ct-series.ct-series-b .ct-slice.ct-donut, .ct-chart-donut .ct-series-b { stroke: whitesmoke; color: whitesmoke; fill: whitesmoke; } .doughnut.score_breakdown .wedge.slice_1, .doughnut_score .wedge.slice_1, .progress_completed .wedge.slice_1 { fill: whitesmoke; opacity: 1; } /*.score_completed .wedge.slice_1, .score_breakdown .wedge.slice_1 {fill:#f5f5f5; opacity:1;}*/ .doughnut.score_breakdown + small { float: left; margin: 0px 0px 0px 0px; width: 175px; text-align: center; } #mycourse .progress-breakdown small .result-success { margin-left: 0.25em; } #mycourse .row.Learning_Path > tbody.objective { display: table-row-group !important; } #mycourse .row.Learning_Path tbody.objective .description ul, #mycourse .row.Learning_Path tbody.objective .description ol { padding-left: 0px; } #mycourse .row.Learning_Path tbody.objective.collapse:not(.collapsed) tr.tableSubHeader .icon .svg-inline--fa { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #mycourse .row.Learning_Path tbody.objective.collapse.collapsed tr.tableSubHeader .icon .svg-inline--fa { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #mycourse .row.Learning_Path tbody.objective:hover { cursor: pointer; cursor: hand; } #mycourse .row.Learning_Path tbody.objective th.name { font-weight: 300; } #mycourse .row.Learning_Path tbody.objective th.name .objective-name { text-decoration: underline; font-weight: bold; } #mycourse .row.Learning_Path tbody.objective:hover th.name { text-decoration: none; } @media (max-width: 767px) { #transcript_list #transcripts_completed tr > td.lesson > div[style*="margin-left:"]:before { content: "- "; } #transcript_list #transcripts_completed tr > td.text-center { text-align: left; } } #mycourse .row.Learning_Path .panel.progress-breakdown .tab-content .tab-pane .subobjectiveactive.well ul { padding: 0px; } #mycourse .row.Learning_Path .panel.progress-breakdown .tab-content .tab-pane .subobjectiveactive.well li { list-style-type: none; display: inline-block; } .modal-body { display: inline-block; width: 100%; } .row.Learning_Path .progress-breakdown > .tab-content > .tab-pane > .row li.col-md-4:nth-child(3n+1) { clear: left; } .row.Learning_Path ul.prerequisites { margin-left: 0px; padding-left: 0px; display: block; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row ul.prerequisites li { margin-left: 1.4em; display: list-item; list-style-type: disc; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row ul.prerequisites li h3 { margin-top: 0px; } #mycourse .progress-breakdown > .tab-content > .tab-pane > .row ul.prerequisites li h3 { margin-top: 0px; } #mycourse .row.activity .activity-document { padding: 15px; margin-bottom: 15px; border: 1px solid #e3e3e3; } #mycourse tr.session .speaker { line-height: 1.2em; margin-bottom: 5px; } #mycourse tr.session .speaker img.profile.img-rounded { margin: 0px 5px 0px 0px; width: 1.2em; height: 1.2em; } #mycourse tr.session .location .provider-logo { margin-bottom: 10px; } #mycourse > .row.Learning_Path .next_activity_group { padding-left: 15px; } #learners table td.metadata .label { width: 130px; } #learners th.columns_7, #learners th.columns_6, #learners th.columns_5, #learners th.columns_4 { white-space: nowrap; } #learners th { white-space: normal; } #mylearningpath .overview .label { font-weight: bold; } #mylearningpath .lp_doughnut_progress, #mylearningpath .lp_doughnut_score { width: 200px !important; height: 200px !important; overflow: hidden; } /*This is redundant it messes up the display of the chart*/ /*#mylearningpath .lp_doughnut_progress x-pie, #mylearningpath .lp_doughnut_score x-pie {width:200px !important; height:200px !important;}*/ #mylearningpath #accordion tbody.objective[aria-expanded="true"] th.icon .svg-inline--fa.fa-chevron-circle-right { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #mylearningpath #accordion tbody.objective th.item_progress .progress, #mylearningpath #accordion tbody.activities td.item_progress .progress { height: 30px; margin-bottom: 0px; } #mylearningpath #accordion tbody.objective th.item_progress .progress .progress-bar-success, #mylearningpath #accordion tbody.activities td.item_progress .progress .progress-bar-success { height: 30px; } #mylearningpath #accordion tbody.objective th.name .svg-inline--fa.fa-check-circle { margin-left: 3px; } #mylearningpath #accordion tbody .actions .svg-inline--fa.fa-check-circle { margin-left: 3px; } .progress { margin-bottom: 0px; height: 30px; } .item_progress .progress { height: 30px; } #mycourse #mylearningpath .actions .btn.enter, #mycourse #mylearningpath .actions .btn.Enter, #mycourse #mylearningpath .actions button.btn[onclick*="#activity_"], #mycourse #mylearningpath .name .svg-inline--fa.fa-check { display: inline-block !important; visibility: visible !important; } /*My Activity Details page - rows layout*/ #mycourse .activity-overview .activity_summary_info > .row { clear: left; margin-bottom: 15px; } #mycourse .activity-overview .activity_summary_info .course-buttons { text-align: left; } #mycourse .activity-overview .activity_summary_info .course-buttons > .btn { margin: 0px 5px 0px 0px; } #mycourse .activity-overview .activity_summary_info label, #mycourse .activity-overview label { font-weight: bold; width: 100%; margin-bottom: 0px; } #mycourse .activity-overview .activity_summary_info .marquee { max-width: 300px; padding: 0px 15px 15px 0px; } #mycourse .activity-overview .activity_summary_info .credit-categories > div { display: block !important; } #mycourse .activity-overview .activity_summary_info .custom-fields { margin: 0px -15px 15px -15px; } #mycourse .activity-overview .activity_summary_info .credit-category .credit-category-name { margin-right: 5px; } #mycourse .activity-overview .activity_summary_info .credit-category .credit-category-name:after { content: ":"; } #mycourse .activity-overview .activity_progress_visuals { text-align: right; } #mycourse .activity-overview .activity_progress_visuals .progress-bar.in_progress { opacity: 0.4; } /*#mycourse .activity-overview .activity_progress_visuals .doughnut {width:100% !important; height:100% !important; position:relative; margin:0px 0px 0px 0px;}*/ /*#mycourse .activity-overview .activity_progress_visuals .doughnut x-pie {width:140%; height:100%; text-align:left; margin:-10% 0px 0px -20%;}*/ /* set the width and height of the pie chart and it will take this and render dynamically based of these values */ #transcript_progress_doughnut.activity_progress_visuals { max-width: 175px; margin-top: -175px; } #mycourse .activity_progress_visuals x-pie, #mycourse .column-packageresources .progress-breakdown x-pie, #transcript_progress_doughnut.activity_progress_visuals x-pie { width: 350px; height: 350px; margin: 0px auto; } #mycourse .activity_progress_visuals x-pie svg, #mycourse .column-packageresources .progress-breakdown x-pie svg, #transcript_progress_doughnut.activity_progress_visuals x-pie svg { margin-left: -88px; margin-top: -88px; overflow: visible; } #mycourse .activity_progress_visuals x-pie svg .inner_fill, #mycourse .column-packageresources .progress-breakdown x-pie svg .inner_fill, #transcript_progress_doughnut.activity_progress_visuals x-pie svg .inner_fill { r: 76; fill: #ecd9c7; stroke-width: 1 !important; cx: 175 !important; cy: 175 !important; } #mycourse .activity_progress_visuals x-pie svg .inner_shadow, #mycourse .column-packageresources .progress-breakdown x-pie svg .inner_shadow, #mycourse .activity_progress_visuals x-pie svg .large_shadow, #mycourse .column-packageresources .progress-breakdown x-pie svg .large_shadow, #transcript_progress_doughnut.activity_progress_visuals x-pie svg .inner_shadow, #transcript_progress_doughnut.activity_progress_visuals x-pie svg .large_shadow { display: none; visibility: hidden; } /*My LP Details page - nav with containers view*/ #mycourse #learning_path_nav { border-radius: 0px; } #mycourse #current_activity_group { padding: 0px; } #mycourse #learning_path_nav .navbar-text.title { font-size: 1.1em; color: #005245; margin-left: 0px; } #mycourse #learning_path_nav .chevron { padding: 0px; } #mycourse #learning_path_nav .chevron button { line-height: calc(48px * var(--font-scale, 1)); padding: 0px 15px; border-radius: 0px; margin: 0px; border-color: white; background-color: white; color: #005245; } #mycourse #learning_path_nav .chevron button:hover { background-color: #005245; color: white; } /*#mycourse .activity-content #activities .navbar-default .navbar-nav > .active > a { background-color:@Tabs-Unselected-Tab-Background-Color; color:@Tabs-Unselected-Tab-Text-Color;}*/ #mycourse .activity-content #activities .navbar .svg-inline--fa { margin-right: 5px; } #mycourse .activity-content #activities .navbar .svg-inline--fa.completed { color: #5cb85c; } #mycourse .activity-content #activities .navbar .svg-inline--fa.incomplete { color: white; } /*#mycourse .activity-content #activities .navbar .fa.locked {color:#5cb85c;}*/ #mycourse .row.Learning_Path .lp_activities .tab-pane > .activity-group-progress .progress-bar-inprogress { opacity: 0.5; } #mycourse .row.Learning_Path .lp_activities .tab-pane > .activity-group-progress .progress-bar[style="width:0%"] { padding: 0px; } #mycourse .row.Learning_Path .lp_activities .tab-pane > .activity-group-progress .progress-bar[style="width:0%"] { padding: 0px; } #mycourse .row.Learning_Path .lp_activities .tab-pane > .activity-group-progress .optional-statement b { margin: 0px 0.25em; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity-description { padding: 15px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .alert-locked .svg-inline--fa.fa-lock { margin-right: 5px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block[lock="lock"] { position: relative; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block[lock="lock"] > .lock { position: absolute; top: 50%; left: 50%; margin: -30px 0px 0px -30px; z-index: 1000; font-size: calc(60px * var(--font-scale, 1)); width: 60px; text-align: center; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block[lock="lock"] > .panel { opacity: 0.3; background-color: #aaaaaa !important; position: relative; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .activity_number { border: solid 1px #333333; display: inline-block; border-radius: 50%; width: 2em; height: 2em; text-align: center; line-height: 1.7em; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .status_icon { position: absolute; top: 0.5em; right: 0.5em; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block label { font-weight: bold; margin-bottom: 0; width: 100%; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .panel-body > div { margin-bottom: 5px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .percentage_completed { margin: 15px 0px 0px 0px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .percentage_completed div.progress { background-color: #f6f6f6; } /*#mycourse .activity-content #activities .activity_block li[lock="lock"] div.progress {background-color:#bbbbbb;}*/ #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .percentage_completed div.progress, #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .percentage_completed div.progress > .progress-bar { height: 4px; } /*#mycourse .progress-breakdown > .tab-content > .tab-pane > .row li[lock="lock"] div.progress + label {font-size:0.8em;}*/ #mycourse .activity-content .tab-content .tab-pane .row.activities { padding: 0px; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li { display: inline-block; list-style-type: none; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li:nth-child(3n+1) { clear: left; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity { overflow: hidden; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity[data-lock="true"] { opacity: 0.5; position: relative; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity[data-lock="true"] .lock_icon { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; line-height: 100%; text-align: center; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity .activity_number { display: inline-block; border: solid 1px #333333; border-radius: 50%; width: 22px; height: 22px; line-height: calc(22px * var(--font-scale, 1)); text-align: center; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity .status_icon { position: absolute; top: 0px; right: 0px; width: 90px; height: 90px; background-color: whitesmoke; transform: rotate(-45deg); margin: -45px -45px 0 0; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity .status_icon .svg-inline--fa { transform: rotate(45deg); margin: 36px 0px 0px 12px; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity img.marquee { margin: 15px 0px; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity h3 { margin-bottom: 1em; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity label { width: 100%; font-weight: bold; margin-bottom: 0px; } #mycourse .activity-content .tab-content .tab-pane .row.activities > li .panel.activity .panel-body > div { margin-bottom: 8px; } #mycourse .lp_activities .row.activity_group_resources_container.next_activity_group_container > div { display: inline-block !important; } #mycourse .lp_activities .row.activity_group_resources_container .activity-group-resources div { display: block; width: 100%; } #mycourse .lp_activities .row.activity_group_resources_container .activity-group-resources .single-resource, #mycourse .lp_activities .activity-modal .activity-resources .single-resource { margin: 0px 5px 5px 0px; } #mycourse .lp_activities .row.next_activity_group_container .next_activity_group { border-left: solid 1px #e7d8d8; padding-left: 15px; } #mycourse .modal.credit-details .manual-claim label { font-weight: bold; } #mycourse .modal.credit-details .manual-claim .input-group { max-width: 200px; } #mycourse .modal.credit-details .manual-claim .input-group input[disabled] { display: none; visibility: hidden; } #mycourse .modal.credit-details .manual-claim .input-group input[disabled] + .input-group-btn .btn { border-radius: 4px; } /* Printed Tables */ @media print { table { margin: 2em 0; text-align: left; display: table; width: 100%; clear: both; } thead { display: table-row-group; } tbody { display: table-row-group; } tfoot { font-style: italic; display: table-footer-group; } tr { display: table-row; white-space: nowrap; } table thead tr th, table tbody tr td, table tbody tr th { border-bottom: 1px solid #333333; padding: 4px 10px 4px 0; display: table-cell !important; float: none !important; width: inherit !important; color: black !important; text-align: center; } table thead tr th:first-child, table tbody tr td:first-child, table tbody tr th:first-child { text-align: left; white-space: normal; } th { font-weight: bold; font-size: 1.2em; } table tbody tr td { border-bottom: 1px solid #666666 !important; } table thead tr th.actions, table tbody tr td.actions { display: none !important; } caption { background: white; margin-bottom: 2em; text-align: left; } img, tr { page-break-inside: avoid; } table #myTab > li { display: block; } } /*Jumbotron*/ .jumbotron small { font-size: 0.5em; } .jumbotron .category_marquee { float: left; margin: 0px 1em 0px 0px; } #catalogue .category .jumbotron h1, #catalogue .category .jumbotron .h1 { font-size: 2em; } #catalogue .category .jumbotron p { font-size: 1.4em; line-height: 1.4em; } /*Spinner*/ body > div#spinner.hidden { display: none; } body > div#spinner { position: absolute; top: 50%; left: 50%; z-index: 10000; width: 100px; height: 100px; margin: -50px 0 0 -50px; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-name: spin; } body > div#spinner:before { content: ""; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: #5e9e71; border-radius: 50%; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-name: throb; } body > div#spinner > i { position: absolute; bottom: 50%; left: 50%; width: 6px; height: 50px; margin: 0 0 0 -3px; -webkit-transform-origin: 50% 100%; } body > div#spinner > i:nth-child(1) { -webkit-transform: rotate(23deg); } body > div#spinner > i:nth-child(2) { -webkit-transform: rotate(45deg); } body > div#spinner > i:nth-child(3) { -webkit-transform: rotate(68deg); } body > div#spinner > i:nth-child(4) { -webkit-transform: rotate(90deg); } body > div#spinner > i:nth-child(5) { -webkit-transform: rotate(113deg); } body > div#spinner > i:nth-child(6) { -webkit-transform: rotate(135deg); } body > div#spinner > i:nth-child(7) { -webkit-transform: rotate(158deg); } body > div#spinner > i:nth-child(8) { -webkit-transform: rotate(180deg); } body > div#spinner > i:nth-child(9) { -webkit-transform: rotate(203deg); } body > div#spinner > i:nth-child(10) { -webkit-transform: rotate(225deg); } body > div#spinner > i:nth-child(11) { -webkit-transform: rotate(248deg); } body > div#spinner > i:nth-child(12) { -webkit-transform: rotate(270deg); } body > div#spinner > i:nth-child(13) { -webkit-transform: rotate(293deg); } body > div#spinner > i:nth-child(14) { -webkit-transform: rotate(315deg); } body > div#spinner > i:nth-child(15) { -webkit-transform: rotate(338deg); } body > div#spinner > i > b { display: block; position: absolute; bottom: 100%; left: 0; width: 6px; height: 6px; background: #5e9e71; border-radius: 50% 50% 0 0; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: move; } @-webkit-keyframes move { 0% { bottom: 0%; } 50% { bottom: 100%; } 100% { bottom: 0%; } } @-webkit-keyframes throb { 0% { width: 2px; height: 2px; margin: -1px 0 0 -1px; opacity: 0.75; } 50% { width: 100px; height: 100px; margin: -50px 0 0 -50px; opacity: 0; } 51% { width: 2px; height: 2px; margin: -1px 0 0 -1px; opacity: 0; } 100% { width: 2px; height: 2px; margin: -1px 0 0 -1px; opacity: 0; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } /*Home*/ .tile { margin-top: 0px; margin-bottom: 15px; } #Tile-DomainStats { margin: 0px 0px 15px 0px; } #Tile-DomainStats ul { width: 100%; height: auto; margin: 15px 0px; padding: 0px; display: block; text-align: center; background-color: #f7f7ed; } #Tile-DomainStats ul li { display: inline-block; padding: 0.5em; margin: 0px; font-size: 1.5em; text-align: center; border: solid 1px #f6f6f6; } #Tile-DomainStats ul li span.count { display: block; height: 2em; line-height: 2em; } #Tile-DomainStats ul li h3 { display: block; height: 25px; line-height: 1em; font-size: 0.55em; font-weight: normal; } #Tile-DomainStats #lmsstats li { float: none; text-align: center; font-size: 1.4em; line-height: 1.4em; } #Tile-DomainStats #lmsstats li i { display: inline-block; float: none; font-size: 0.8em; line-height: 2em; margin-right: 0.2em; } #Tile-DomainStats #lmsstats li span.count { display: inline-block; float: none; } #Tile-DomainStats ul li h3 { display: block; width: 100%; clear: both; height: 2em; line-height: 1.2em; font-size: 0.5em; font-weight: normal; text-align: center; text-transform: uppercase; } @media (max-width: 767px) { span.count { font-size: 0.7em; } } #Tile-FeatureSlider { display: block; height: 179px; overflow: hidden; margin: 0px 15px 15px 15px; padding: 0px; position: relative; background-color: #f6f6f6; } #Tile-FeatureSlider .mtile { height: 179px; padding: 0px; margin: 0px; cursor: pointer; } #Tile-FeatureSlider .mtile h2 { font-size: 1.2em; font-weight: normal; display: block; width: 100%; padding: 0px 10px !important; position: absolute; bottom: 50px; background-color: rgba(255, 255, 255, 0.8); z-index: 10; } #Tile-FeatureSlider .mtile img { position: absolute; top: 0px; width: 100%; } #Tile-FeatureSlider .mtile div { display: block; width: 100%; height: 50px; padding: 0px 10px !important; font-size: 0.8em; line-height: 1.2em; white-space: normal; position: absolute; bottom: 0px; background-color: rgba(255, 255, 255, 0.8); z-index: 10; } #Tile-FeatureSlider ul { display: block; height: 169px; margin: 0px; overflow-y: hidden; white-space: nowrap; } #Tile-AboutMeTile .about_me_tile .svg-inline--fa { margin-right: 3px; } #Tile-AboutMeTile .about_me_tile .profile-container { display: block; width: 100%; background-color: #ecd9c7; border-bottom: solid 1px white; text-align: center; margin: 0px 0px 15px 0px; } #Tile-AboutMeTile .about_me_tile .profile { margin: 0px auto; width: 100%; } #Tile-AboutMeTile .about_me_tile .panel-body > h4.learner-name { margin-bottom: 0px; } #Tile-AboutMeTile .about_me_tile .label { font-weight: bold; width: 100%; } #Tile-AboutMeTile .panel-body > .row { margin: 15px -15px; } #Tile-AboutMeTile .panel-body > .row.user_stats .user_stat { margin-bottom: 10px; display: inline-block; } #Tile-AboutMeTile .panel-body .user-credit-categories > div { margin-bottom: 5px; } #Tile-AboutMeTile .panel-body .user-credit-categories .category-name { width: 130px; display: inline-block; } #Tile-SharePage #share_page_tile { display: block; margin: 0; padding: 0; } #Tile-SharePage #share_page_tile li { display: inline-block; float: left; list-style-type: none; margin: 0 0.25em; } #Tile-SharePage #share_page_tile li.facebook a.btn.btn-default { background-color: #306199; border-color: #306199; color: white; } #Tile-SharePage #share_page_tile li.linkedin a.btn.btn-default { background-color: #007bb6; border-color: #007bb6; color: white; } #Tile-SharePage #share_page_tile li.twitter a.btn.btn-default { background-color: #26c4f1; border-color: #26c4f1; color: white; } #Tile-SharePage #share_page_tile li.googleplus a.btn.btn-default { background-color: #e93f2e; border-color: #e93f2e; color: white; } #Tile-SharePage #share_page_tile li.email a.btn.btn-default, #Tile-SharePage #share_page_tile li.email a.btn.btn-default:hover { background-color: #9c9c9c; border-color: #9c9c9c; color: white; } #Tile-CalendarTile #calendar_tile_container #calendar h2 { margin-top: 0; margin-bottom: 0; font-size: 1em; font-weight: 300; } #Tile-SectionFeatures #section_menu.row { display: flex; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; align-items: stretch; } #Tile-SectionFeatures #section_menu.row > div { margin-bottom: 30px; float: left !important; } #Tile-SectionFeatures #section_menu.row > div > .panel { width: 100%; height: 100%; } #Tile-SectionFeatures #section_menu.row > .background > .panel { background-size: cover; background-position: center center; } #Tile-SectionFeatures #section_menu .background .panel-default .panel-heading { max-height: 100px; margin-top: 140px; background-color: rgba(255, 255, 255, 0.8); padding-bottom: 0; } #Tile-SectionFeatures #section_menu .background .panel-default .panel-body { height: calc(100% - 240px); background-color: rgba(255, 255, 255, 0.8); padding-top: 0; } #Tile-SectionFeatures #section_menu .panel-default .panel-heading { min-height: 120px; } #Tile-CustomFeatures #custom_features_tile > .row { display: flex; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; align-items: stretch; } #Tile-CustomFeatures #custom_features_tile > .row > div { margin-bottom: 30px; float: left !important; } #Tile-CustomFeatures #custom_features_tile > .row > div > .thumbnail { width: 100%; height: 100%; } #Tile-CouponTile #codeTile-learnerResponse ul { padding-left: 18px; } #Tile-CouponTile #codeTile-learnerResponse ul li { clear: both; } #Tile-CouponTile #codeTile-learnerResponse ul li button { float: right; margin-bottom: 8px; } .waitDialog { z-index: 20000; } /*#Tile-NewCoursesTile .courses.panel-body thumbnail {margin:0 -15px;} #Tile-NewCoursesTile .thumbnail {display:inline-block; float:left; margin:15px;} #Tile-NewCoursesTile .thumbnail img {width:auto; height:194px;} #Tile-NewCoursesTile .thumbnail.nomarquee {width:auto; max-width:240px; height:240px; background-color:@Tables-Header-Background-Color; color:@Tables-Header-Text-Color; text-decoration:none;} #Tile-NewCoursesTile .thumbnail.nomarquee h3 {color:@Tables-Header-Text-Color; text-decoration:none; font-size:1.4em;}*/ /*.tile .thumbnail { min-height: 370px; }*/ .tile #posts .post { border-bottom: solid 1px #eeeeee; } .chat_messages, .posts { min-height: 120px; max-height: 380px; overflow: auto; padding: 10px 14px 10px 10px; } .chat_message, .post { margin-top: 20px; } .chat_message img, .post img, .wallposts #posts li.post div.wallcontainer .profile-pic { width: 48px; height: 48px; margin-right: 10px; border-color: #e3e3e3; float: left; } .chat_message_body, .post_body { padding: 10px; border: 1px solid #e3e3e3; position: relative; overflow: hidden; } .chat_message_body .wall-title, .wallcontainer .wall-title { font-weight: 600; } .chat_message_author, .post_author { border-top: solid 1px #eeeeee; padding-top: 1em; font-size: 0.9em; } .chat_message_author img, .post_author img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 50%; float: left; margin-bottom: 5px; } .chat_message_date, .post_date { color: #999999; font-size: 0.8em; } .post_body .forum_name { color: #999999; font-size: calc(11px * var(--font-scale, 1)); } #Tile-NewCoursesTile .panel-body { padding: 0px; background-color: #ecd9c7; } #Tile-NewCoursesTile #carousel-NewCoursesTile, #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-inner > .item { min-height: 200px; } #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-inner > .item .carousel-caption { padding-bottom: 35px; } #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-inner > .item .carousel-caption h3, #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-inner > .item .carousel-caption > * { color: white; } #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-inner > .item .carousel-caption div { font-size: 0.9em; line-height: 1.2em; } #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-control { width: 24px; } #Tile-NewCoursesTile #carousel-NewCoursesTile .carousel-control .glyphicon { font-size: calc(20px * var(--font-scale, 1)); width: 20px; } /*.tile .panel {min-height:280px;}*/ #Tile-CouponTile #validCode #validfor_course { font-weight: bold; } /*Global*/ .profile-menu li.dropdown-header .timezone { font-size: 0.8em; white-space: normal; line-height: 1em; } .timezone.space-left { margin-left: 0.25em; } /*Search*/ #filtersDiv .btn-group { width: 100%; margin-bottom: 20px; } #filtersDiv .btn-group > .btn { float: none; } #filtersDiv .panel-body { max-height: 150px; overflow-x: auto; font-size: 0.9em; } .advancedSearchResultsSortSpan { margin: 0px 0px 0px 5px; text-transform: uppercase; font-size: 0.8em; } #SearchType label { font-size: 0.9em; width: auto; clear: left; } #resultsSortDiv { margin-bottom: 20px; } .advancedSearchResultsSortSpan { line-height: 1.5em; } .advancedSearchResultsSortSpan input[type="radio"] { vertical-align: middle; margin: 0px 2px 0px 10px; height: 1.5em; } #more { clear: both; margin: 1em 0em; } #advancedSearchResultsDiv .thumbnail { height: 340px; overflow: hidden; position: relative; } #advancedSearchResultsDiv .thumbnail .caption { cursor: pointer; } #advancedSearchResultsDiv .thumbnail .caption:hover .advancedSearchResultsItemTitle h3 { text-decoration: underline; } #advancedSearchResultsDiv .thumbnail img { max-width: 100%; max-height: 100px; } #advancedSearchResultsDiv .thumbnail .label { width: 70px; text-align: left; padding-left: 0px; } .advancedSearchResultsItemTitle { height: 3em; margin-top: 1.4em; } div.advancedSearchResultsItemType { height: 1.4em; position: absolute; top: 0px; right: 5%; background-color: #eeeeee; color: #888888; border-radius: 0px 0px 4px 4px; font-size: 0.8em; padding: 0px 0.5em; } .advancedSearchResultsItemDetails { border-top: solid 1px #dddddd; margin-top: 1em; padding-top: 0.5em; font-size: 0.9em; } .advancedSearchResultsItemDetails div { clear: both; } .advancedSearchResultsItemDetails span span { display: inline-block; width: auto; float: left; } /*.advancedSearchResultsItemDetailsLanguage > span:nth-child(2n) {text-transform:upp.list-group-itemercase;}*/ .advancedSearchResultsItemDetailsDescription { margin-bottom: 1em; } .advancedSearchResultsItemDetails .advancedSearchResultsItemDetailsDescription span { width: 100%; } /*Catalogue*/ .carousel { overflow: hidden; } #Category-Features { border: solid 1px white; border-radius: 6px; margin: 0px -15px 30px -15px; } #Category-Features .carousel-caption { width: 30%; min-width: 300px; height: 100%; overflow: hidden; top: 0px; left: auto; right: 114px; text-align: left; } @media (max-width: 767px) { #catalogue #Category-Features .item { background-image: none; } #catalogue #Category-Features .carousel-caption { width: 100%; } } #Category-Features .item { background-size: 100% auto; } #Category-Features .carousel-caption > * { margin-left: 15%; margin-right: 15%; } #Category-Features .carousel-caption > h3 { font-size: 1.2em; color: white; } #Category-Features .carousel-indicators, #myCarousel .carousel-indicators { width: 50%; left: 75%; bottom: 5px; } #Category-Features .carousel-indicators { width: auto; left: auto; right: 129px; bottom: 0px; text-align: right; } #Category-Features .carousel-indicators li { border-color: rgba(255, 255, 255, 0.8); } #Category-Features .carousel-indicators li.active { background-color: white; } #Category-Features .carousel-control { z-index: 10; width: 10%; } #Category_Matches .tab-content { padding: 15px 0px; } #catalogue .col-md-8 #container { margin: 0px; width: 100%; overflow: hidden; } #catalogue .popover.active { display: block; position: relative; top: auto; left: auto; width: 100%; max-width: 360px; } #catalogue .popover.top.active { margin: 0px; } .popover.active { z-index: 10; } #catalogue .thumbnail { padding-bottom: 2em; } #categories .media { padding-bottom: 2em; } /*#categories div.list-group-item.active, #categories div.list-group-item.active:hover,#categories div.list-group-item.active:focus { background-color:#428bca; border-color:#428bca; color:#fff;}*/ #Category_Matches .img-responsive { /*max-width:400px;*/ float: left; margin-right: 1em; margin-bottom: 1em; } #categories .img-responsive { width: 100%; max-height: 150px; float: left; margin-right: 1em; margin-bottom: 1em; } #catalogue_details .custom-field { display: block; margin-bottom: 1em; } #catalogue_details table.activity-sessions tr > .session-start, #catalogue_details table.activity-sessions tr > .session-end { max-width: 140px; } #catalogue_details .price.discounts-applied, #Category_Matches .price.discounts-applied, #Category_Matches .price.discounts-applied span { text-decoration: line-through; } #catalogue_details .price .discounts ul, #Category_Matches .price .discounts ul { margin-left: 0px; padding-left: 1.2em; } #catalogue_details .discount span, #Category_Matches .discount span, #catalogue_details .discount em, #Category_Matches .discount em { display: block; width: 100%; white-space: normal; } #catalogue_details #resources ul li { margin-bottom: 1.5em; } #catalogue_details #resources ul li svg { margin: 0px 5px 0px 0px; vertical-align: middle; } /******************************* ecommerce **************************************/ span.instructions { font-family: MV Boli; float: left; font-size: 1.2em; } #progress_bar { position: absolute; top: 0px; right: 0px; display: inline-block; float: right; z-index: 5; } #progress_bar.ShoppingCart-LoggedOut { display: none; } #progress_bar span.instructions { padding: 10px 0px 10px 10px; } #progress_bar span.step { display: inline-block; padding: 10px 0px; margin: 0px; width: 140px; text-align: left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4; } #progress_bar span.step span { display: inline-block; margin: 0px 5px 0px 0px; width: 65px; font-weight: normal; float: left; font-size: 0.9em; line-height: 1em; } #progress_bar span.step span.number { font-weight: bold; margin: 0px 3px 0px 5px; width: 2em; height: 2em; line-height: 2em; -webkit-border-radius: 1em; -moz-border-radius: 1em; text-align: center; } #progress_bar span.step.current { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #buy.btn.btn-primary { margin: 1em 0; } span.payment_logos { display: inline-block; float: left; white-space: nowrap; } span.payment_logos span { display: inline-block; margin-right: 10px; vertical-align: middle; } div.shoppingCartList, div.shoppingCartMessages { margin-top: 50px; } div.shoppingCartList span.label, div.shoppingCartMessages span.label { display: inline-block; } span.shoppingCartPrint { background-color: #427d8b; color: white; cursor: pointer; float: right; padding: 1px 5px; } /* Payment Confirmation result layout (#92305) */ .paymentConfirmHeading { font-weight: bold; font-size: calc(16px * var(--font-scale, 1)); } .paymentConfirmRow { margin: 2px 0; } .paymentConfirmLabel { display: inline-block; min-width: 200px; font-weight: bold; font-size: calc(13px * var(--font-scale, 1)); } .paymentEnrollmentSection { margin-top: 12px; } .paymentEnrollmentLabel { display: block; font-weight: bold; font-size: calc(13px * var(--font-scale, 1)); margin-bottom: 6px; } span.couponUsed { color: #cdcdcd; } div.courseListDiscounts { position: absolute; top: 90px; left: 340px; background-color: #cdcdcd; width: 250px; height: auto; overflow: auto; z-index: 1000; } div.courseDetailsDiscounts { position: absolute; top: 90px; left: -240px; background-color: #cdcdcd; width: 250px; height: auto; overflow: auto; z-index: 1000; } div.courseDiscounts li { min-height: 10px; height: auto; } div.itemMixedPriceDetailsDiscountsDiv { position: absolute; /*top:120px; left:500px;*/ background-color: #cdcdcd; width: 250px; height: auto; overflow: auto; z-index: 1000; } div.itemMixedPriceDetailsInfo span.label { display: inline-block; } div.itemMixedPriceDetailsHeader { background-color: #cdcdcd; color: white; } div.itemMixedPriceDetailsHeader span.itemMixedPriceDetailsIndex, div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsIndex { width: 15px; display: inline-block; } div.itemMixedPriceDetailsHeader span.itemMixedPriceDetailsForName, div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsForName { width: 300px; display: inline-block; } div.itemMixedPriceDetailsHeader span.itemMixedPriceDetailsForEmail, div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsForEmail { width: 300px; display: inline-block; } div.itemMixedPriceDetailsHeader span.itemMixedPriceDetailsQuantity, div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsQuantity { width: 55px; display: inline-block; } div.itemMixedPriceDetailsHeader span.itemMixedPriceDetailsPrice, div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsPrice { width: 65px; display: inline-block; } div.itemMixedPriceDetailsHeader span.itemMixedPriceDetailsDiscounts, div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsDiscounts { width: 100px; display: inline-block; } div.itemMixedPriceDetailsRow span.itemMixedPriceDetailsDiscounts, span.itemPriceDetailsDiscounts { cursor: pointer; color: red; } #masthead #login_info.tab span.shoppingCartIcon, #masthead #login_info.tab span.ms_portal_icon { padding: 0px 2px 0px 0px; height: 16px; cursor: pointer; cursor: hand; } #content_page #tabs span.tab span.availableTokensNumber { width: 10px; padding: 0px 10px 0px 0px; background-image: url("../../images/layout/UnreadReport_BG.png"); background-repeat: no-repeat; color: white; cursor: pointer; display: inline-block; height: 16px; line-height: calc(16px * var(--font-scale, 1)); text-align: center; } /********************** Billing Info ***************************/ fieldset .label { color: black; width: 232px; display: inline-block; text-align: left; } fieldset div { margin-bottom: 10px; } /*My Agenda*/ .download_calendar.panel label { width: auto; margin-right: 5px; } .events .address { word-wrap: break-word; } .resources .tab-content { padding-top: 0px; } .resources .tab-content ul.long_content { padding-left: 0px; } .events ul.list-group > .list-group-item .date-box > .date_container { background-color: #005245; color: white; display: inline-block; padding: 15px; text-align: center; min-width: 95px; } .events ul.list-group > .list-group-item .date-box > .date_container > .day { display: block; font-size: 2.5em; line-height: 1.1em; } .events ul.list-group > .list-group-item .date-box > .date_container > .month { display: block; } .events ul.list-group > .list-group-item img.marquee { max-width: 200px; max-height: 200px; object-fit: cover; margin: 3px 1em 1em 0; } .events ul.list-group > .list-group-item label { font-weight: bold; width: 100%; margin-bottom: 0px; } .events ul.list-group > .list-group-item h3 { font-weight: bold; font-family: 'Proxima Nova', 'Montserrat', sans-serif; font-size: calc(10pt * var(--font-scale, 1)); } .events ul.list-group > .list-group-item .resources { width: 100%; clear: both; } .events ul.list-group > .list-group-item .event-location .provider-logo { margin-bottom: 10px; } .events ul.list-group > .list-group-item .actions .btn { margin-right: 5px; } /*Learning Activities*/ #LearningActivities #tabs #filter_by_options .dropdown-menu > li > span, #LearningActivities #tabs #sort_by_options .dropdown-menu > li > span { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333333; white-space: nowrap; cursor: pointer; cursor: hand; } #LearningActivities #tabs #filter_by_options .dropdown-menu > li:hover > span, #LearningActivities #tabs #sort_by_options .dropdown-menu > li:hover > span { background-color: #f6f6f6; } #LearningActivities #tabs #sort_by_options .dropdown-menu > li > span.sort .fa-check-circle, #LearningActivities #filter_by_options .dropdown-menu > li > span.show .fa-check-circle { display: inline-block; } #LearningActivities #tabs #sort_by_options .dropdown-menu > li > span.sort .fa-circle-o, #LearningActivities #filter_by_options .dropdown-menu > li > span.show .fa-circle-o { display: none; } #LearningActivities #tabs #sort_by_options .dropdown-menu > li > span .fa-check-circle, #LearningActivities #filter_by_options .dropdown-menu > li > span .fa-check-circle { display: none; } #LearningActivities #tabs #sort_by_options .dropdown-menu > li > span .fa-circle-o, #LearningActivities #filter_by_options .dropdown-menu > li > span .fa-circle-o { display: inline-block; } #LearningActivities #tabs #sort_by_options .dropdown-menu > li > span .svg-inline--fa, #LearningActivities #filter_by_options .dropdown-menu > li > span .svg-inline--fa { margin: 0 0.25em 0 1em; } #LearningActivities .sorting, #LearningActivities .filters { font-size: 0.9em; width: auto; float: right; } #LearningActivities .sorting label, #LearningActivities .filters label { width: auto; float: left; } #LearningActivities .sorting > span, #LearningActivities .filters .filter-type > span { cursor: pointer; float: left; } #LearningActivities .sorting > span.sort .fa-check-circle, #LearningActivities .filters .filter-type > span.show .fa-check-circle { display: inline-block; } #LearningActivities .sorting > span.sort .fa-circle-o, #LearningActivities .filters .filter-type > span.show .fa-circle-o { display: none; } #LearningActivities .sorting > span .fa-check-circle, #LearningActivities .filters .filter-type > span .fa-check-circle { display: none; } #LearningActivities .sorting > span .fa-circle-o, #LearningActivities .filters .filter-type > span .fa-circle-o { display: inline-block; } #LearningActivities .sorting .fa, #LearningActivities .filters .fa { margin: 0 0.25em 0 1em; } table#MyLearningActivities .la-expand a.collapsed .fa-chevron-down, table#MyLearningActivities .la-expand a .fa-chevron-right { display: none; visibility: hidden; } table#MyLearningActivities .la-expand a .fa-chevron-down, table#MyLearningActivities .la-expand a.collapsed .fa-chevron-right { display: inline-block; visibility: visible; } table#MyLearningActivities .la-type .badge { border-radius: 4px; font-weight: normal; background-color: #e0e0e0; color: #333333; padding: 5px 8px; } table#MyLearningActivities .la-title .new { font-size: 0.9em; font-weight: normal; } table#MyLearningActivities .la-title .well { margin: 1em 0; padding: 0px; background-color: transparent; border: none 0px; -webkit-box-shadow: none; box-shadow: none; } table#MyLearningActivities .la-title .well .marquee { margin: 0 15px 15px 0; float: left; } table#MyLearningActivities .la-title .well .marquee + .description_text { float: left; width: 100%; } table#MyLearningActivities .la-title .well .row { margin: 1em -15px 0 -15px; font-size: 0.9em; clear: both; } table#MyLearningActivities .la-title .well .row > div { margin-bottom: 15px; } table#MyLearningActivities .la-title .well .row label { font-weight: bold; } table#MyLearningActivities .la-title .well .custom-fields .custom-field { margin-bottom: 1em; } table#MyLearningActivities .la-progress .progress { height: 30px; } table#MyLearningActivities thead > tr > th, table#MyLearningActivities tbody > tr > th, table#MyLearningActivities tbody > tr > td, table#MyLearningActivities tfoot > tr > th, table#MyLearningActivities tfoot > tr > td { vertical-align: top; } #catalogueResults table#MyLearningActivities .la-progress > .progress { width: 100% !important; min-width: 100%; margin: 0px; } #catalogueResults table#MyLearningActivities .la-progress > .progress .progress-bar > span { white-space: nowrap; line-height: calc(30px * var(--font-scale, 1)); margin-left: 5px; text-align: left; } #catalogueResults table#MyLearningActivities tr > * { padding: 15px; } #catalogueResults table#MyLearningActivities tbody > tr > td.la-title .well > .row { display: flex; flex-wrap: wrap; } #catalogueResults table#MyLearningActivities tbody > tr > td.la-title .well > .row > div.col-md-4 { align-items: stretch; padding-bottom: 15px; } #catalogueResults table#MyLearningActivities tbody > tr > td.la-title .well > .row > div.col-md-4 > label, #catalogueResults table#MyLearningActivities tbody > tr > td.la-title .well > .row > div.col-md-4 > div, #catalogueResults table#MyLearningActivities tbody > tr > td.la-title .well > .row > div.col-md-4 > div.value { display: inline-block; width: 100%; align-items: stretch; margin: 0px; padding: 0px; } /*Courses/Learning Paths*/ .modal.fade.course .modal-body { padding: 0px; } .modal.course .modal-content { border: none 0px; } div.details div.col-md-5 { padding-right: 0px; } div.details div.row > div > span { padding-right: 0px; } div.details div.row > div { padding-bottom: 0.6em; } div.details div.alert-details { background-color: #f6f6f6; } #mycourse .tab-content .slide.subobjective .carousel-inner > .item .row { padding-left: 0px; } #mycourse .tab-content .slide.subobjective .carousel-inner > .item .row > li { display: inline-block; list-style-type: none; } #mycourse .tab-content .slide.subobjective .carousel-inner > .item .prerequisites > li { margin-left: 1.25em; } #mycourse .tab-content .panel { min-height: 180px; } #mycourse .overview img.profile.profile-thumbnail.img-thumbnail { max-height: 40px; max-width: 40px; } #mycourse .panel.activity .glyphicon { top: 0.5em; right: 0.5em; position: absolute; } #mycourse .panel.activity .modal-header .glyphicon { margin-right: 0.5em; position: relative; right: auto; top: auto; } .panel.activity .modal-body .img-thumbnail.pull-left { margin: 0 0.5em 0.5em 0; max-width: 200px; } .panel.activity .panel-body > .btn { display: block; } .panel .nav-tabs.lp { padding: 15px 15px 0px 15px; } #mycourse h3 { margin: 1em 0 0 0; } #mycourse .carousel-inner > .item > h3 { text-align: center; } #mycourse .carousel-control { width: 5%; } #mycourse .carousel-control.left, #mycourse .carousel-control.right { background-image: none; } #mycourse .carousel-control .glyphicon { margin-right: 0px; } #mycourse .carousel-control .glyphicon-chevron-left, #mycourse .carousel-control .glyphicon-chevron-right { top: 30px; } #mycourse .modal-title .label { margin-left: 0.5em; } #mycourse .panel.activity small { display: block; } #mycourse .reference h4 .svg-inline--fa, #Courses .reference h4 .svg-inline--fa { margin-right: 3px; } #mycourse .partial_score, #Courses .partial_score, #StudentCourseProgress .partial_score { font-size: 0.8em; line-height: 1.2em; font-style: italic; display: inline-block; } .status_breakdown .list-group-item, .status_breakdown .divider { display: inline-block; width: 100%; } .status_breakdown .divider { border-width: 2px 0 0 0; height: 1px; display: block; } .status_breakdown .pull-right { max-width: 180px; text-align: right; line-height: 1.2em; } /*.list-group-item.active {background-color:#eee; border-color:#ddd; color:#333; font-weight:bold;}*/ #MyCoursesNote { display: block; } #mycourse .profile.img-thumbnail { max-width: 40px; max-height: 40px; } #mycourse .note.approver > span + span { margin-left: 0.25em; } @media (min-width: 768px) { .modal-lg { width: 600px; margin: 30px auto; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } .modal div.seriesCoursesWizardPages, .modal div.seriesCoursesLPInfoDiv { border: none 0px; } ul.seriesSelectionILTSessionsDiv { display: block; margin-left: 1.8em; } ul.seriesSelectionILTSessionsDiv li { display: list-item; margin-left: 1.5em; list-style-type: disc; margin-bottom: 0.5em; } ul.seriesSelectionILTSessionsDiv li h3 { display: block; } /*Forums*/ /*#GoToForumsDropDown {max-width:90%;}*/ #MyForums th.type, #MyForums td.type { text-transform: none; } #MyForums tr > .title { word-break: break-word; max-width: 400px; } #MyForums tr > .lastpost { word-break: break-word; max-width: 300px; } #forum_threads, #forum_threads .row, #replies .row { padding: 0px; } #forum_threads > li.col-md-12 { border-bottom: solid 1px #e7e7e7; margin-bottom: 1em; } #forum_threads .panel-heading, #forum_threads .panel-body { padding: 0.5em 0.8em; } .author-details { display: inline-block; } .profile-container { display: inline-block; float: left; margin-top: 3px; } #one_post .jumbotron ul.original_post, #one_post .jumbotron #post_reply_form { background-color: transparent; } /*.votes .btn {font-size:0.8em;}*/ .svg-inline--fa.fa-circle.unread { font-size: 0.8em; line-height: inherit; margin-right: 3px; } #one_post .votes .btn { margin-bottom: 1em; } #one_post .panel { margin-bottom: 1em; } #replies .row { border-bottom: solid 1px #dddddd; margin-bottom: 1em; } #one_post #your_reply #post_reply_form { background-color: transparent; } #post_reply_form .row { margin-bottom: 1em; } #post_reply_form textarea { height: 8em; } #MyForums .type { color: #bbbbbb; font-size: 0.8em; text-transform: none; } #MyForums .profile, #forum_threads .profile, .moderators .profile, .jumbotron .profile { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin-right: 5px; margin-bottom: 5px; } .forum_thread .body .edit-post, .forum_thread .body .delete-post { margin-left: 0.5em; } #one_post .well .original_post.row .author .profile { max-width: 80px; max-height: 100px; } #one_post .tab-content .author .profile { max-width: 40px; max-height: 60px; } .question_details div .body, .question_details .body { white-space: pre-line; display: inline-block; width: 100%; } .question_details div .body .edit-post, .question_details .body .edit-post, .question_details div .body .delete-post, .question_details .body .delete-post { margin-left: 0.5em; cursor: pointer; cursor: hand; } #forum_threads .row > li.question_details > h2, #one_post ul.original_post li.question_details > h2 { margin: 0px; word-break: break-word; } #one_post ul.original_post li, .votes, #forum_threads > li, #forum_threads .row > li, #replies .row > li { display: inline-block; list-style-type: none; } #forum_details .jumbotron .stat-summary { font-size: 0.5em; } #forum_details .jumbotron .stat-summary span { margin-right: 1em; } #forum_details .jumbotron .stat-summary span i { margin-right: 0.25em; } #forum_details { background-color: transparent; } #forum_details .forum.well, .forum_thread .forum.well { display: inline-block; width: 100%; background-color: transparent; box-shadow: none; -webkit-box-shadow: none; padding: 0px 0px 15px 0px; border: none 0px; border-bottom: solid 1px #eeeeee; } .forum.well h1 { margin: 0px; } .forum.well img.profile { width: 32px; height: 32px; border-radius: 50%; margin-right: 5px; } #forum_details .forum.well .forum_buttons .btn, .forum_thread .forum.well .forum_buttons .btn { margin-right: 5px; font-size: 0.9em; } #forum_details + .forum_thread .thread.row.original_post { margin-top: 0px; } .forum_thread .thread.row { margin-right: 0px; margin-top: 30px; position: relative; clear: both; } .thread.row.original_post h2 { margin: 0px 0px 5px 0px; } .thread.row.original_post h2 p { margin-bottom: 0px !important; margin: 0px; } .forum_thread .thread.row.reply { border-left: solid 4px #dddddd; margin-left: 10px; } .forum_thread .thread.row.col-md-offset-0 { margin-left: 0px; } .forum_thread .ChildPosts { padding-left: 30px; display: inline-block; width: 100%; } .forum_thread .thread.row .svg-inline--fa.fa-caret-left { position: absolute; left: -9px; font-size: calc(25px * var(--font-scale, 1)); top: -5px; color: #dddddd; } .forum_thread .thread.row .panel { margin-bottom: 0px; } .forum_thread .profile-container { margin: 0px 10px 10px 0px; } .forum_thread .profile-container .profile { width: 60px; height: 60px; border-radius: 50%; } .forum_thread .thread.row.reply .profile-container .profile { width: 32px; height: 32px; border-radius: 50%; } .forum_thread .thread.row .badge { background-color: white; color: #333333; } .forum_thread .thread.row .badge.btn { color: white; border-color: #005245; background-color: #005245; } .forum_thread .thread.row .badge.btn:hover, .forum_thread .thread.row .badge.btn:active { text-decoration: none; color: #153c35; border-color: #c8e982; background-color: #c8e982; } .forum_thread .thread.row .panel .panel-footer { padding: 0px; } .forum_thread .thread.row .panel .panel-footer .btn { border-radius: 0px 0px 4px 4px; width: 100%; } .forum_thread .thread.row .btn.reply { margin-left: 0.3em; } .forum_thread .thread.row .author { margin-bottom: 5px; padding-bottom: 5px; width: 100%; } .forum_thread .thread.row.reply .author small { margin: 0px 5px; } .forum_thread small + small { margin-left: 5px; } .forum_thread .profile { width: 50px; height: 50px; border-radius: 50%; border: solid 1px #eeeeee; object-fit: cover; margin-right: 5px; float: left; } .forum_thread .thumbnail { margin-bottom: 0px; } .forum_thread .thread.row .body .attachment { margin: 0px 0px 5px 5px; width: 100%; } #discussion.Forum_Threads .forum_thread .thread.row .body .attachment { margin: 0px 0px 5px 5px; width: auto; } .forum_thread .thread.row .body .attachment a { display: inline-block; clear: both; width: auto; } #forum_details .forum.well .stats { display: block; padding: 5px 0px; } .forum_thread .thread.row.original_post .stats { display: inline-block; padding: 0px; } .forum_thread .thread.row.reply .stats { width: 100%; display: inline-block; padding: 5px 0px; } .forum_thread .stats .badge, #forum_details .forum.well .stats .badge { margin-right: 1em; border-radius: 4px; } #forum_details .forum.well .stats .badge { color: inherit !important; background-color: transparent; } .forum_thread .stats .badge.btn-disabled, #forum_details .forum.well .stats .badge.btn-disabled { color: #333333 !important; } .forum_thread .stats .badge .fa, #forum_details .forum.well .stats .badge .fa, .forum_thread .stats .badge svg, #forum_details .forum.well .stats .badge svg { margin-right: 0.5em; } .forum_thread .post_edit_delete small + small { margin-left: 1em; } .forum_thread .post_edit_delete small span[onclick], .post_edit_delete small span[onclick].btn-small { color: #005245; background-color: white; border: solid 1px #005245; border-radius: 4px; text-decoration: none; font-weight: bold; cursor: pointer; display: inline-block; padding: 3px 5px; margin-top: 5px; } .forum_thread .stats small span[onclick]:hover { text-decoration: underline; } .forum_thread .stats small span[onclick] .svg-inline--fa { margin-right: 0.25em; } .forum_thread .attachment { position: relative; display: inline-block; } .forum_thread .attachment .fa-external-link { position: absolute; top: 1px; right: 1px; padding: 5px; } .forum_thread .attachment.embedded_image .fa-external-link { background-color: white; padding: 7px; display: inline-block; } .forum_thread .reply-inline { position: relative; padding: 5px 0px; } .forum_thread .original_post .reply-inline { padding: 5px 0px 5px 0px; } .forum_thread .reply-inline .input-group-addon:first-child { padding: 0px; vertical-align: top; background-color: transparent; border: none 0px; } .forum_thread .reply-inline img.profile { width: 32px; height: 32px; border-radius: 50%; margin-right: 15px; } .forum_thread .reply-inline textarea.reply { padding-right: 30px; height: 34px; } .forum_thread .reply-inline .input-group-btn { white-space: nowrap; vertical-align: top; background-color: #eeeeee; } .forum_thread .reply-inline .btn.attachment { /*background-image:url(https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/attach.png); background-size:16px 16px; background-repeat:no-repeat; background-position:center center;*/ width: 34px; height: 34px; margin: 5px 0 0 0.5em; } .fa-rotate-45 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .forum_thread .reply-inline .btn.submit-reply { margin: 5px 0 0 0.25em; } .forum_thread .reply-inline input[type="file"] { cursor: inherit; font-size: calc(1000px * var(--font-scale, 1)) !important; width: 34px; height: 34px; overflow: hidden; margin: 0; padding: 0; opacity: 0; position: absolute; right: 0; bottom: 0; } .forum_thread .reply-inline .redactor_editor div, .forum_thread .reply-inline .redactor_editor p, .forum_thread .reply-inline .redactor_editor ul, .forum_thread .reply-inline .redactor_editor ol, .forum_thread .reply-inline .redactor_editor table, .forum_thread .reply-inline .redactor_editor dl, .forum_thread .reply-inline .redactor_editor blockquote, .forum_thread .reply-inline .redactor_editor pre, .forum_thread .redactor_editor, .forum_thread .redactor_editor div, .forum_thread .redactor_editor p, .forum_thread .redactor_editor ul, .forum_thread .redactor_editor ol, .forum_thread .redactor_editor table, .forum_thread .redactor_editor dl, .forum_thread .redactor_editor blockquote, .forum_thread .redactor_editor pre, .forum_thread .redactor_editor h1, .forum_thread .redactor_editor h2, .forum_thread .redactor_editor h3, .forum_thread .redactor_editor h4, .forum_thread .redactor_editor h5 { font-size: 1em !important; font-family: 'Proxima Nova', 'Montserrat', sans-serif !important; } .forum_thread .reply-inline .redactor_box { /*margin-left:42px;*/ border-radius: 4px; } .forum_thread .reply-inline .redactor_box .redactor_toolbar { border-radius: 4px 4px 0 0; background: #ecd9c7; border-bottom: 1px solid white; } .forum_thread .reply-inline .redactor_box .redactor_toolbar li { padding: 0px; } .forum_thread .reply-inline .redactor_box .redactor_toolbar li a { border: none 0px; margin: 0px 3px; height: 32px; } .forum_thread .reply-inline .redactor_box .redactor_toolbar li.redactor_separator { display: none; } .forum_thread .reply-inline .redactor_box .redactor_editor { padding: 5px; border-radius: 0 0 4px 4px; font-family: 'Proxima Nova', 'Montserrat', sans-serif; min-height: 80px; } /*Attachment Forums, i.e. Instagram*/ div.thread.display_attachment.row { margin: 0px; } div.thread.reply.display_attachment:nth-child(3n+1) { clear: left; } div.thread.display_attachment > .question_details { border: 1px solid #e6e6e6; padding: 0px; } div.thread.reply.display_attachment .question_details { display: inline-block; width: 100%; margin-bottom: 15px; } div.thread.display_attachment > .question_details > div, div.thread.display_attachment > .question_details > .attachment, div.thread.display_attachment.row > .question_details > h3 { display: inline-block; width: 100%; float: left; } div.thread.display_attachment.row > .question_details > h3 { padding: 15px; } div.thread.display_attachment > .question_details > .author { border-bottom: 1px solid #e6e6e6; padding: 15px; } div.thread.display_attachment > .question_details > .author img.profile { vertical-align: middle; border: solid 1px #fefefe; } div.thread.reply.display_attachment .question_details > .author img.profile { max-width: 40px !important; max-height: 40px !important; } div.thread.display_attachment.row .question_details > p { padding-left: 15px; padding-right: 15px; } div.thread.display_attachment > .question_details > div { padding: 0px; } div.thread.display_attachment > .question_details > .attachment:empty { background-color: #e6e6e6; min-height: 200px; } div.thread.display_attachment.row .question_details .attachment img, div.thread.reply.display_attachment > .question_details > .attachment img { border: none 0px; border-radius: 0px; padding: 0px; margin: 0px; width: 100% !important; height: auto !important; max-width: 2000px !important; max-height: 2000px !important; } div.thread.display_attachment .question_details .attachment .fa-external-link { background-color: rgba(255, 255, 255, 0.8); } /*div.thread.reply.display_attachment > .question_details > div {display:inline-block; width:100%; float:left;} div.thread.reply.display_attachment > .question_details > .author {border-bottom:1px solid #e6e6e6; padding:15px;} div.thread.reply.display_attachment > .question_details > .author img.profile {vertical-align:middle; max-width:40px !important; max-height:40px !important; border:solid 1px #fefefe;} div.thread.reply.display_attachment > .question_details > .author > a {float:none !important;} div.thread.reply.display_attachment > .question_details > .attachment img { border:none 0px; border-radius:0px; padding:0px; margin:0px; width:100% !important; height:auto !important; max-width:1000px !important; max-height:1000px !important;} div.thread.reply.display_attachment > .question_details > .content {padding:15px;}*/ div.thread.reply.display_attachment > .question_details > .content { padding: 15px; } div.thread.reply.display_attachment .question_details > .content .badge.btn { margin-bottom: 5px; } div.thread.reply.display_attachment .question_details > .content .badge.btn .fa, div.thread.reply.display_attachment .question_details > .content .badge.btn svg { margin-right: 3px; } div.modal .ChildPosts { padding-left: 0px; } div.modal .ChildPosts .attachment, div.modal .ChildPosts .attachment img { width: 100%; } div.modal .ChildPosts .thread.display_attachment { border: none 0px; width: 100%; } div.modal .ChildPosts .thread.display_attachment .fa-caret-left { display: none; visibility: hidden; } .modal.newpost .modal-body, #editPostModal.modal .modal-body { padding: 0px; } .modal.newpost .modal-header .close, #editPostModal.modal .modal-header .close { opacity: 1; filter: alpha(opacity=100); text-shadow: none; } .modal.newpost iframe, #editPostModal.modal iframe { width: 100%; min-height: 480px; border: none 0px; } .redactor_box { border: solid 1px #eeeeee; } .redactor_form-control.redactor_editor { padding: 15px; } /*Visual Forums, i.e. Instagram*/ #visual.Forum_Threads .visual-masthead > .well { border-radius: 0px; border: solid 1px #eeeeee; } #visual.Forum_Threads .forum_buttons { text-align: right; } #visual.Forum_Threads .forum_buttons .btn { margin: 0px 0px 5px 5px; } #visual.Forum_Threads .contributors .contributor { margin-bottom: 5px; } #visual.Forum_Threads .contributors .contributor .profile_image { margin-right: 5px; } #visual.Forum_Threads .contributors .contributor .profile_image > img { width: 30px; height: 30px; border: solid 1px #eeeeee; vertical-align: middle; float: none; object-fit: cover; } #visual.Forum_Threads .contributors .contributor .profile_name { margin: 0px 5px; line-height: calc(48px * var(--font-scale, 1)); } #visual.Forum_Threads .col-md-4:nth-child(3n+1) { clear: left; } #visual.Forum_Threads .thumbnail.post { border-radius: 0px; padding: 0px; margin: 0px 0px 15px 0px; display: inline-block; width: 100%; } #visual.Forum_Threads .thumbnail.post .caption { width: 100%; } #visual.Forum_Threads .thumbnail.post.comment { border: none 0px; } #visual.Forum_Threads .thumbnail.post.comment > div { padding: 30px 15px; } #visual.Forum_Threads .thumbnail.post a.attachment { width: 100%; } #visual.Forum_Threads .thumbnail.post a.attachment > img { object-fit: cover; } #visual.Forum_Threads .thumbnail.post .unread { position: absolute; top: -5px; right: 10px; } #visual.Forum_Threads .thumbnail.post > div { padding: 30px; display: inline-block; } #visual.Forum_Threads .thumbnail.post > div.contributor { padding: 15px; display: inline-block; } #visual.Forum_Threads .thumbnail.post > div.contributor img.profile { width: 30px; height: 30px; vertical-align: middle; float: none; object-fit: cover; border: solid 1px #eeeeee; } #visual.Forum_Threads .thumbnail.post > div.contributors a .name { text-decoration: underline; } #visual.Forum_Threads .thumbnail.post > a.attachment > img { width: 100% !important; height: 300px; object-fit: cover; } #visual.Forum_Threads .thumbnail.post.thread > a.attachment > img { width: 100% !important; height: 200px !important; object-fit: cover; } #visual.Forum_Threads .one-thread .thumbnail.post.thread > a.attachment > img { width: 100% !important; height: auto !important; object-fit: cover; } #visual.Forum_Threads .thumbnail.post > a.attachment > .fa-external-link { display: none; visibility: hidden; } /*.Forum_Threads .thumbnail.post .stats {font-size:1em; margin-bottom:15px;} .Forum_Threads .thumbnail.post .stats > .stat:hover {color:@Links-Text-Color;} .Forum_Threads .thumbnail.post .stats > .stat {margin-right:15px;} .Forum_Threads .thumbnail.post .stats > .stat.date-posted {border-left:solid 1px #eee; display:inline-block; padding-left:15px;} .Forum_Threads .thumbnail.post .stats > .stat > .fa .Forum_Threads .thumbnail.post .stats > .stat > svg {margin-right:5px;}*/ #visual.Forum_Threads .thumbnail { padding: 0px; } #visual.Forum_Threads .thumbnail > .contributor { border-bottom: 1px solid #dddddd; } #visual.Forum_Threads .thumbnail > .attachment { padding: 0px; } #visual.Forum_Threads .thumbnail > * { padding: 15px; } #visual.Forum_Threads .thumbnail > .attachment { padding: 0px; } #visual.Forum_Threads .thumbnail > .attachment a { width: 100%; } #visual.Forum_Threads .thumbnail > .attachment img { width: 100%; max-height: 100%; object-fit: cover; } #visual.Forum_Threads .thumbnail.comment > .attachment img { max-height: 300px !important; } #visual.Forum_Threads .thumbnail > .attachment.document { color: white; background-color: #005245; min-height: 200px; margin-bottom: 0px; position: relative; border-radius: 0px; } #visual.Forum_Threads .thumbnail > .attachment.document > .svg-inline--fa { color: white; position: absolute; top: 50%; left: 50%; margin: -30px 0px 0px -25px; padding: 0px; font-size: calc(60px * var(--font-scale, 1)); } #visual.Forum_Threads .thumbnail > .attachment > .fa #visual.Forum_Threads .thumbnail > .attachment > svg { margin: 0px auto; line-height: 100%; color: white; } #visual.Forum_Threads .thumbnail > .attachment > .fa-external-link { display: none; visibility: hidden; } #visual.Forum_Threads .visual-threads .thumbnail.post.thread .stats { margin-bottom: 15px; padding-bottom: 15px; } #visual.Forum_Threads .visual-threads .post .stats > .stat, #visual.Forum_Threads .visual-threads .post .stats > * { margin-right: 15px; } #visual.Forum_Threads .visual-threads .post .stats > .stat.date-posted { display: block; border-top: solid 1px #eeeeee; margin: 5px 0px 15px 0px; padding: 5px 0px 0px 0px; font-size: 1em; } #visual.Forum_Threads .visual-threads .post .stats > .stat.date-posted > .post_edit_delete { display: inline-block; float: right; padding-top: 5px; margin-top: 5px; margin-bottom: 15px; } #visual.Forum_Threads .visual-threads .thumbnail.post.thread .stats > .post_edit_delete > small { display: inline-block; padding-left: 15px; font-size: 1em; } #visual.Forum_Threads .visual-threads .post .post_edit_delete > small + small { margin-left: 5px; } #visual.Forum_Threads .visual-threads .post .post_edit_delete > small > .svg-inline--fa { margin-right: 5px; } #visual.Forum_Threads .visual-threads .post .stats > small { margin-right: 0px; } #visual.Forum_Threads .visual-threads .thumbnail.post.comment .stats > small.delete { margin-right: 0px; } #visual.Forum_Threads .visual-threads .thumbnail.post.comment .stats > small.delete + .move { margin-left: 15px; } #visual.Forum_Threads .visual-threads .thumbnail.post.thread .stats > small { display: none; visibility: hidden; } #visual.Forum_Threads .visual-threads .post .stats > * .fa, #visual.Forum_Threads .visual-threads .post .stats > * svg { margin-right: 5px; } #visual.Forum_Threads .visual-masthead .stats .stat { background-color: rgba(255, 255, 255, 0.5); } #visual.Forum_Threads .visual-threads .comment { padding-left: 40px; } #visual.Forum_Threads .visual-threads .comment .stats { display: block; width: 100%; padding-left: 40px; } /*Blog Forums*/ #blog.Forum_Threads .blog-masthead > .well { border-radius: 0px; border: solid 1px #eeeeee; } #blog.Forum_Threads .blog-info > * { padding: 0px 0px 30px 0px; border-bottom: solid 1px #eeeeee; margin-bottom: 30px; } #blog.Forum_Threads .blog-info .contributors .contributor { margin-bottom: 10px; } #blog.Forum_Threads .blog-info .contributors .contributor .profile_image { margin-right: 5px; } #blog.Forum_Threads .blog-info .contributors .contributor .profile_image > img { width: 40px; height: 40px; object-fit: cover; vertical-align: middle; float: none; border: solid 1px #eeeeee; } #blog.Forum_Threads .blog-info .contributors .contributor .profile_name { margin-right: 5px; } #blog.Forum_Threads .blog-info .forum_stats { display: inline-block; width: 100%; } #blog.Forum_Threads .blog-info .forum_buttons { text-align: left; } #blog.Forum_Threads .blog-info .forum_buttons .btn { margin: 0px 0px 5px 5px; } #blog.Forum_Threads .blog-threads .post.latest-post, #blog.Forum_Threads .blog-threads .post { border: solid 1px #eeeeee; margin: 0px 0px 15px 0px; } #blog.Forum_Threads .blog-threads .post .svg-inline--fa.unread { position: absolute; top: -5px; right: 10px; } #blog.Forum_Threads .blog-threads .post h3 { font-size: 1.4em; line-height: 1.2em; } #blog.Forum_Threads .blog-threads .post.latest-post .attachment { width: 100% !important; height: auto !important; display: inline-block; width: 100%; } #blog.Forum_Threads .blog-threads .post.latest-post .attachment > .fa, #blog.Forum_Threads .blog-threads .post.latest-post .attachment > svg { display: none; visibility: hidden; } #blog.Forum_Threads .blog-threads .post.latest-post .attachment > img { padding: 0px; width: 100% !important; height: 100% !important; min-height: 200px; object-fit: cover; } #blog.Forum_Threads .blog-threads .post.latest-post .caption { padding: 15px; display: inline-block; width: 100%; } .Forum_Threads .comments { margin-top: 15px; } .Forum_Threads .comments .thumbnail { display: inline-block; width: 100%; } .Forum_Threads .comments .badge { margin-left: 5px; color: white; border-color: #005245; background-color: #005245; } #blog.Forum_Threads .comments .post + .post { margin-top: 30px; border-top: solid 1px #eeeeee; padding-top: 30px; } .Forum_Threads .comments .post .text-content > *, #post_reply_form > * { margin-left: 58px; } .Forum_Threads .comments .post .text-content > .contributor, .Forum_Threads .comments .post .text-content > .stats, #post_reply_form > .profile_image { margin-left: 0px; } .Forum_Threads .comments .profile_image, #post_reply_form > .profile_image { width: 48px; height: 48px; margin-right: 10px; object-fit: cover; } .Forum_Threads .comments .post .text-content > .stats > span, .Forum_Threads .comments .post .text-content > .stats > small { margin-right: 15px; } .Forum_Threads .comments .post .text-content > .stats > span > .svg-inline--fa, .Forum_Threads .comments .post .text-content > .stats > small .fa, .Forum_Threads .comments .post .text-content > .stats > small svg { margin-right: 5px; } .Forum_Threads .comments .post .embedded_media { max-width: 300px; } #blog.Forum_Threads .blog-threads .post .attachment { height: 100% !important; text-align: center; } #blog.Forum_Threads .blog-threads .post .attachment.document { color: white; background-color: #005245; min-height: 200px; margin-bottom: 0px; position: relative; border-radius: 0px; } #blog.Forum_Threads .blog-threads .post .attachment.document > .fa, #blog.Forum_Threads .blog-threads .post .attachment.document > svg { color: white; position: absolute; top: 50%; left: 50%; margin: -30px 0px 0px -25px; font-size: calc(60px * var(--font-scale, 1)); } #blog.Forum_Threads .blog-threads .post .attachment > .fa, #blog.Forum_Threads .blog-threads .post .attachment > svg { margin: 0px auto; line-height: 100%; color: white; } #blog.Forum_Threads .blog-threads .post .attachment > .fa-external-link { display: none; visibility: hidden; } #blog.Forum_Threads .blog-threads .post .attachment > img { padding: 0px; width: 100% !important; height: 100% !important; min-height: 200px; object-fit: cover; } #blog.Forum_Threads .blog-threads .post .text-content { padding: 15px; } #blog.Forum_Threads .blog-threads .post .contributor, #blog.Forum_Threads .blog-threads .post .stats { display: inline-block; width: 100%; margin-bottom: 8px; } #blog.Forum_Threads .blog-threads .post .contributor img.profile-pic, #blog.Forum_Threads .blog-threads .post .contributor img.profile_image { vertical-align: middle; float: none; object-fit: cover; } #blog.Forum_Threads .blog-masthead .stats stat { border: solid 1px #eeeeee; } #blog.Forum_Threads .blog-threads .post .stats > .stat, #blog.Forum_Threads .blog-threads .post .stats > * { margin-right: 15px; } #blog.Forum_Threads .blog-threads .post .stats > .post_edit_delete { display: block; border-top: solid 1px #eeeeee; padding-top: 5px; margin-top: 5px; margin-bottom: 15px; } #blog.Forum_Threads .blog-threads .post .stats > .post_edit_delete > small { display: inline-block; padding-left: 15px; font-size: 1em; } #blog.Forum_Threads .blog-threads .post .stats > * .svg-inline--fa, #blog.Forum_Threads .blog-threads .post .stats > .post_edit_delete > small > .fa, #blog.Forum_Threads .blog-threads .post .stats > * svg, #blog.Forum_Threads .blog-threads .post .stats > .post_edit_delete > small > svg { margin-right: 5px; } /*Chatrooms*/ #ChatRoomModal .modal-body { padding: 0px; min-height: 400px; } #ChatRoomModal #ChatRoomIframe { width: 100%; height: 100%; min-height: 400px; border: none 0px; } /*Wall*/ .wallposts #posts { min-width: 200px; word-wrap: break-word; float: right; position: relative; top: 19px; margin: 0; } .wallposts #posts ul { display: block; margin: 0px; padding: 0px; } .wallposts #posts li.post { border-bottom: solid 1px #e8e8e8; display: inline-block; margin: 0px; padding: 15px; } .wallposts #posts li.post:first-child { border-top: solid 1px #e8e8e8; } .wallposts #posts li.post:hover { background-color: #f8f8f8; } .wallposts #posts li.post div.wallcontainer { background-color: transparent; display: inline-block; width: 100%; } .wallposts #posts li.post div.wallcontainer .btn.remove-wall-post { clear: both; } .wallposts #posts li.post div.wallcontainer .profile-pic { margin: 0px 0.5em 0.5em 0px; } .wallposts #posts li.post div.wallcontainer .modal .modal-header { clear: both; display: inline-block; width: 100%; } .wallposts #posts li.post div.wallcontainer .screenname { display: block; } .wallposts #posts li.post div.wallcontainer .post_details { display: block; font-size: 0.8em; color: #666666; } /*Portfolio*/ body.modal.userprofile > #content.container { width: 100%; } #LearnerPortfolio .jumbotron img.profile_pic { margin: 15px; } #LearnerPortfolio .jumbotron div { font-size: 1em; line-height: 1.4; } #LearnerPortfolio .jumbotron #portfolio_stats { margin-top: 30px; } #LearnerPortfolio .jumbotron #portfolio_stats div[data-count="0"] { display: none; visibility: hidden; } #LearnerPortfolio .jumbotron #portfolio_stats .stat { background-color: #ffffffde; padding: 15px; margin: 0px; text-align: center; display: inline-block; float: left; width: 100%; height: 100%; } body.modal.userprofile #LearnerPortfolio .jumbotron #portfolio_stats .stat { min-width: 110px; } #LearnerPortfolio .jumbotron #portfolio_stats .stat label { font-weight: bold; width: 100%; text-align: center; } #LearnerPortfolio .jumbotron #portfolio_stats .stat .count { font-size: 2em; line-height: 1.2em; } #LearnerPortfolio .jumbotron #portfolio_stats .stat .icon { font-weight: bold; width: 100%; } #LearnerPortfolio .jumbotron #portfolio_stats .stat .icon img, #LearnerPortfolio .jumbotron #portfolio_stats .stat .icon .fa, #LearnerPortfolio .jumbotron #portfolio_stats .stat .icon svg { font-size: calc(36px * var(--font-scale, 1)); width: 36px; height: 36px; } #LearnerPortfolio .card .card-body { padding: 15px; } .complete-msg { font-style: italic; font-weight: bold; } /*My Profile*/ #transcriptTabsPanel { display: inline-block; } xhtml[myprofile] #tabs { display: none; } .myprofile .nav-tabs { margin-bottom: 1em; } .myprofile .tab-pane { display: none !important; } .myprofile .tab-pane.active { display: block !important; } .myprofile .tab-pane.active fieldset { border: none 0px; margin-bottom: 1em; padding: 0px; } .myprofile .tab-pane.active legend { display: block !important; padding: 0.5em 0; margin: 1em 0 0.5em 0; } .myprofile .form-horizontal .form-group { margin-right: 0px; margin-left: 0px; } .myprofile .form-horizontal .control-label { padding: 6px 0px; text-align: left; } .myprofile input[type=checkbox] + label { width: auto; margin-left: 0.5em; } /* New myprofile */ .student-profile .card { border-radius: 10px; } .student-profile .card .card-header .profile_img { width: 150px; height: 150px; object-fit: cover; margin: 10px auto; /*border: 10px solid #ccc; border-radius: 50%;*/ } .student-profile .card h3 { font-size: calc(20px * var(--font-scale, 1)); font-weight: 700; } .student-profile .card p { font-size: calc(16px * var(--font-scale, 1)); color: black; } .student-profile .table th, .student-profile .table td { font-size: calc(14px * var(--font-scale, 1)); padding: 5px 10px; color: black; } /* End */ /*Media Cards*/ #mediaResults.flex-row { display: flex; flex-wrap: wrap; flex-direction: row; align-content: stretch; justify-content: flex-start; align-items: stretch; row-gap: 30px; } #mediaResults.flex-row .media.card { position: relative; display: flex; flex-direction: column; word-wrap: break-word; background-clip: border-box; border: 1px solid #eeeeee; border-radius: 4px; overflow: hidden; width: 100%; height: 100%; } body.media { overflow: scroll !important; } .media.card .card-img-top-container { background-color: #7ebc00; height: 200px; overflow: hidden; } .media.card .card-img-top-container > img { height: 200px; width: 100%; object-fit: cover; object-position: center center; } .media.card .card-img-top-container > svg { height: 90% !important; width: auto !important; object-fit: cover; object-position: center center; margin: 10px; } .media.card .card-body { flex: 1 1 auto; padding: 15px; color: var(--bs-card-color); } .media.card .card-body .card-title, .media.card .card-body .card-text { margin-bottom: 1em; } #transcriptsPanel span.courseTitle { display: inline-block; } #TranscriptExtras-Content { border: 1px solid #dddddd; } .availability .dayName, .availability .dayAvailability, .availability .exceptionDate, .availability .regularDate { display: inline-block; } .availability .dayName, .availability .exceptionDate { width: 120px; } ul.supervisors li { display: list-item; list-style-type: disc; margin-left: 2em; } #ForwardOptionDiv .form-control { width: auto; height: auto; } .ForwardOption ul { margin-left: 0px; } .ForwardOption .label, .ForwardOption label { width: auto; } .myprofile table#CustomMetadata4_FieldTable { border-top: solid 1px #dddddd; } .myprofile table#CustomMetadata4_FieldTable, .myprofile table#CustomMetadata1_FieldTable { width: 100%; max-width: 100%; } .myprofile table#CustomMetadata1_FieldTable tr > *, .myprofile table#CustomMetadata4_FieldTable tr > * { padding: 8px 8px 8px 0px; vertical-align: top; line-height: 1.42857143; border-top: 1px solid #dddddd; } .myprofile table#CustomMetadata1_FieldTable span.label, .myprofile table#CustomMetadata4_FieldTable span.label { white-space: normal; } .myprofile table#CustomMetadata1_FieldTable tr > * { width: 75%; padding-left: 15px; } .myprofile table#CustomMetadata1_FieldTable tr > *:first-child { width: 25%; padding-left: 0px; } #EditAccountDetails .btn > .fa, #EditAccountDetails .btn > svg { margin-right: 5px; } #EditAccountDetails .tc metadata.form-group, .myprofile .form-horizontal .form-group { margin: 0px; padding: 5px 15px; border-bottom: solid 1px white; } #EditAccountDetails .tc.metadata .controls.col-md-6 { width: 100%; } #EditAccountDetails .tc.metadata .controls.col-md-6 > * { display: inline-block; float: left; width: 300px; max-width: 100%; } #EditAccountDetails .tc.metadata .controls.col-md-6 > label { width: 200px !important; max-width: 100% !important; float: left; margin-right: 5px; } #EditAccountDetails .tc.metadata .controls.col-md-6 > label + .ro.learner.value + input { display: none; visibility: hidden; } #EditAccountDetails #block2 input[type="checkbox"] { float: left; } #EditAccountDetails #block2 input[type="checkbox"] + label { display: inline-block; float: left; margin-right: 2em; } .myprofile > .col-md-12 > .container { width: 100%; } /*Portfolio - aka public profile*/ #LearnerPortfolio img.img-round.profile_pic { width: 200px; height: 200px; object-fit: cover; object-position: center; } body.userprofile.modal #LearnerPortfolio img.img-round.profile_pic { width: 120px; height: 120px; object-fit: cover; } #LearnerPortfolio .display-flex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; margin: 0px -15px 30px -15px; } #LearnerPortfolio .display-flex > .card { margin: 15px 15px 30px 15px; } #LearnerPortfolio .display-flex > .card .card-body { padding: 30px; } #LearnerPortfolio .display-flex > .card .card-body .row > div { margin-bottom: 1em; } #LearnerPortfolio .display-flex > .card .card-body label { width: 100%; max-width: 100%; margin-bottom: 0px; font-weight: bold; } #StudentCourseProgress th[align="center"], #StudentCourseProgress td[align="center"] { text-align: center; } .course_progress .objective, .course_progress .objective > td, .course_progress .objective > td.score { float: none; } #pie_chart { width: auto !important; clear: right; } #pie_chart rect { fill: transparent !important; } #pie_chart .ct-chart-pie { min-height: 260px; padding: 10px; overflow: visible; } #pie_chart .ct-chart-pie path.ct-slice.ct-donut { fill: transparent; fill-opacity: 0; } #pie_chart .ct-chart-pie text.ct-label { stroke: none; } #pie_chart .ct-chart-pie .ct-series-a { stroke: #ecd9c7; } #pie_chart .ct-chart-pie .ct-series-b { stroke: #7ebc00; } #pie_chart .ct-chart-pie .ct-series-c { stroke: #005245; } @media print { #pie_chart { float: right; min-height: 100px; } #pie_chart .ct-chart-pie { margin-right: 50%; } #pie_chart .ct-chart-pie .ct-series-a { stroke: #eeeeee; -webkit-print-color-adjust: exact; } #pie_chart .ct-chart-pie .ct-series-b { stroke: #aaaaaa; -webkit-print-color-adjust: exact; } #pie_chart .ct-chart-pie .ct-series-c { stroke: black; -webkit-print-color-adjust: exact; } ul.legend .ct-series-a { fill: #aaaaaa; background-color: #eeeeee !important; -webkit-print-color-adjust: exact; } ul.legend .ct-series-b { fill: #eeeeee; background-color: #aaaaaa !important; -webkit-print-color-adjust: exact; } ul.legend .ct-series-c { fill: black; background-color: black !important; -webkit-print-color-adjust: exact; } table.course_progress th { font-size: 1em; } table.course_progress td:empty { display: table-cell !important; } table.course_progress .progress_bar.text-center.hidden-sm { display: table-cell !important; } } ul.legend { clear: right; } ul.legend li { display: inline-block; float: left; } ul.legend li svg { margin-right: 0.25em; margin-left: 1em; } ul.legend li svg rect { fill: transparent !important; } @media screen { ul.legend .ct-series-a { background-color: #ecd9c7 !important; } ul.legend .ct-series-b { background-color: #7ebc00 !important; } ul.legend .ct-series-c { background-color: #005245 !important; } } .course_progress .objective.tableSubHeader > * { background-color: #7ebc00 !important; } #CourseReport .button_container { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-content: stretch; align-items: stretch; justify-content: flex-start; column-gap: 10px; } #CourseReport .label, #ProgressOverview .summary-info .label { width: 135px; float: left; clear: left; } #CourseReport .formContent, #ProgressOverview .summary-info .formContent { float: left; } #ProgressOverview .summary-info { /*margin: 0px 15px 15px 15px;*/ padding-left: 30px; } table#MyPurchasesGrid { border: none 0px; margin: 1em 0; } table#MyPurchasesGrid tr > th.tablesorter-header { cursor: pointer; } table#MyPurchasesGrid tr > * { text-align: right; } table#MyPurchasesGrid tr > *:first-child { text-align: left; } /* My profile constsuction */ .student-profile .card { border-radius: 10px; } .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: white; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); } /* *******************My Transcripts********************* */ /*Transcripts*/ .training-title { color: #005245; font-weight: bold; text-decoration: underline; cursor: pointer; } .training-title:hover { text-decoration: none; } #btnSaveCeu { clear: right; margin-bottom: 1em; } #transcript_list td.title .activity-title { font-weight: bold; } #transcript_list td.title label { width: 100%; display: block; margin: 5px 0px 0px 0px; font-weight: normal; } #MyTranscripts .nav-tabs.date-range { border: none 0px; } #MyTranscripts .date-filter { margin: 15px 0px 0px 0px; padding: 5px 15px; border-radius: 8px 8px 0px 0px; background-color: white; color: #005245; } #MyTranscripts .nav-tabs.date-range li { border-bottom: solid 2px white; } #MyTranscripts .date-filter label { max-width: 300px; } #MyTranscripts .date-filter .form-control { max-width: 156px; display: inline-block; margin-left: 5px; margin-right: 15px; } #MyTranscripts .date-filter .btn-default { padding: 5px 15px; } #MyTranscripts #list_filters_sorting > div { padding: 0px; } #MyTranscripts #list_filters_sorting #filter_by_options li.dropdown-header { clear: both; } #MyTranscripts #list_filters_sorting #filter_by_options li { clear: both; } #MyTranscripts #transcript-search-container { min-width: 282px; } #MyTranscripts #transcript-search-container #transcript_search { max-width: 222px; } #MyTranscripts #transcript-search-container .clear-search { cursor: pointer; cursor: hand; margin-left: 0.5em; line-height: calc(34px * var(--font-scale, 1)); } #MyTranscripts #transcript-filters-sort .btn-group { margin-right: 10px; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu { min-width: 180px; max-height: 200px; overflow: auto; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li { color: #333333; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span:hover { background-color: #005245; color: white; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span { display: inline-block; width: 100%; padding: 5px 10px; cursor: pointer; cursor: hand; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span svg { margin-right: 4px; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span .fa-circle-check { display: none; visibility: hidden; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span.show .fa-circle, #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span.selected .fa-circle, #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span.show.selected .fa-circle { display: none; visibility: hidden; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span.show .fa-circle-check, #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span.selected .fa-circle-check, #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li span.show.selected .fa-circle-check { display: inline-block; visibility: visible; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li ul { padding-left: 0px; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li ul li.credit-category span { padding: 5px 10px 5px 27px; } #MyTranscripts #transcript-filters-sort .btn-group .dropdown-menu > li.credit-category + .credit-provider { border-top: solid 1px #cccccc; } #selected-filters { line-height: calc(30px * var(--font-scale, 1)); } #selected-filters .filter { display: inline-block; float: left; margin: 0px 0px 0px 15px; padding: 0px 0px 0px 10px; background-color: #005245; color: white; } #selected-filters .filter .remove { display: inline-block; padding: 0px 10px; margin-left: 10px; cursor: pointer; cursor: hand; background-color: white; color: #005245; } #filter-description { margin: 15px 0 0 0; } #filter-description > span { margin-right: 0.5em; } #filter-description > span:before { content: " | "; margin-right: 0.5em; } #filter-description > label + span.hidden:before, #filter-description > label + span:before, #filter-description > label + span.hidden + span:before, #filter-description > label + span.hidden + span.hidden + span:before, #filter-description > label + span.hidden + span.hidden + span.hidden + span:before, #filter-description > label + span.hidden + span.hidden + span.hidden + span.hidden + span:before { display: none; } @media (max-width: 767px) { #transcript_list #transcripts_completed tr > .credit-categories.text-center, #transcript_list #transcripts_completed tr > .credits-awarded.text-center { text-align: left; } #transcript_list #transcripts_completed tr > .total-credits.credits-awarded.text-right, #transcript_list #transcripts_completed tr > .total-credits.credits-awarded.text-center { text-align: center; } #transcript_list #transcripts_completed tfoot > tr > th:empty { display: none; } } @media (max-width: 499px) { #transcript_list #transcripts_completed tr > .total-credits.credits-awarded.text-center { text-align: right; } #transcript_list div.sdms-approval-number, #transcript_list div.domain { margin: 10px 0px 10px 0px; } } #transcript_list .digital-signature > span { font-size: 0.9em; } #transcript_list .actions { white-space: normal; } #transcript_list .actions .btn { margin-top: 2px; margin-bottom: 2px; } #transcript_list tbody tr > .credit-categories .credit-provider-container + .credit-provider-container { margin-top: 1em; } #transcript_list tbody tr > .credit-categories .credit-provider { font-weight: bold; } /*#transcript_list tbody tr > .credit-categories .credit-provider:after, #transcript_list tbody tr > .credit-categories .credit-category .credit-category-name:after {content:":";}*/ /*#transcript_list tbody tr > .credit-categories .credit-category {white-space:nowrap;}*/ /*Credentials Page*/ #creditCategoriesDIV.panel-group { margin: 30px 0px; } #creditCategoriesDIV.panel-group .panel-collapse { padding: 15px; } /*My Codes aka My Coupons*/ table.allocations td.expand span.collapse { display: inline-block; visibility: visible; cursor: pointer; cursor: hand; } table.allocations td.expand span.collapse[data-collpase="collapsed"] .fa-chevron-down { display: none; visibility: hidden; } table.allocations td.expand span.collapse[data-collpase="expanded"] .fa-chevron-right { display: none; visibility: hidden; } /*Login*/ .login-logo { width: 100%; max-height: 300px; margin-bottom: 1em; } #login_page fieldset > legend { display: block; } #Login .form-group { margin-right: 0px; margin-left: 0px; } #Login .control-label { text-align: left; width: 180px; } #Login #registrationButtonSpan { display: none; } #login_page span.button input { background-color: transparent; border: none 0px; } #dividerDiv { margin-top: 1em; } #login_page .select2-container.form-control { padding: 0px; border-radius: 4px; } #login_page .select2-dropdown-open .select2-choice, #login_page .select2-container .select2-choice { margin: 0px 0px; height: 34px; padding: 0px 20px 0px 12px; box-shadow: none; background: transparent; border: none 0px; } #login_page .select2-dropdown-open .select2-choice > *, #login_page .select2-container .select2-choice > * { height: 34px; } #login_page .federatedIcon { height: 30px; width: 30px; margin-right: 5px; } #login_page #FederationLoginButton { margin-left: 0.25em; } #login_page .select2-container.form-control > * { border-radius: 4px; } /* Adjusting custom css for line height - PCA skin */ .gigya-composite-control > p { line-height: 1.2 !important; } body.Login.Login_compressed > #content.container { padding: 0px 15px 30px 15px; } body.Login.Login_compressed #log_in_bar.container, body.Login.Login_compressed #masthead.container, body.Login.Login_compressed #content.container, body.Login.Login_compressed #footer.container { max-width: 400px; } body.Login.Login_compressed > .container:first-child { margin-top: 45px; } body.Login.Login_compressed #masthead .notloggedin { padding: 30px 30px 0px 30px; } body.Login.Login_compressed #masthead #logo { margin: 30px 30px 0px 30px; } body.Login.Login_compressed #masthead.container #logo img { max-height: 100px; } body.Login.Login_compressed #masthead.container > .row > div { width: 100%; } body.Login.Login_compressed #content.container #login_page { padding: 0px 45px; } body.Login.Login_compressed #content.container #login_page > * { width: 100%; } body.Login.Login_compressed #content.container .log-in-form { padding: 0px; } body.Login.Login_compressed #content.container fieldset { padding: 0px; margin: 0px; } body.Login.Login_compressed #content.container fieldset > legend { padding: 30px 0px 15px 0px; margin: 0px; border-bottom: solid 1px; } body.Login.Login_compressed #content.container fieldset > div.row, body.Login.Login_compressed #content.container .log-in-form fieldset > div.row div { margin-bottom: 0px; } body.Login.Login_compressed #content.container #Login .formContent.col-sm-6 { width: 100%; padding: 0px; } body.Login.Login_compressed #content.container fieldset .form-group { padding-bottom: 15px; display: inline-block; width: 100%; } body.Login.Login_compressed #content.container #Login .control-label { width: 100%; padding: 0px 0px 5px 0px; } body.Login.Login_compressed #content.container #Login .formContent.col-sm-6 { width: 100%; padding: 0px 0px 0px 0px; } body.Login.Login_compressed #footer.container > .row.logo-copyright > div { width: 100%; font-size: 0.8em; line-height: 1.5em; text-align: center; } span.loginForgot.pull-right { margin: -5px 0px 10px 0px; } /*Activity Modal*/ body.StudentMyCourse.activity-modal { background-image: none; background-color: white; } body.activity-modal #content.container { width: 100% !important; } body.activity-modal .page-header { display: none; visibility: hidden; } body.activity-modal #content.container .column-overview .panel.overview, body.activity-modal #content.container .column-packageresources .panel.resources { margin: 15px 15px 0px 15px; } /*Feedback Survey*/ .choices { display: inline-block; clear: both; margin-top: 0px; } .choices .choice { list-style-type: none; } .choices .choice.checkbox, .choices .choice.radio { display: block; width: auto; } .choices .choice.checkbox-inline, .choices .choice.radio-inline { width: auto; float: left; } .form-group[question_type="default"] .form-group[question_type="checkbox"] .choices.checkbox > label.choice, .form-group[question_type="default"] .form-group[question_type="radio"] .choices.radio > label.choice { width: 100%; clear: left; margin: 5px 0px; } #CourseFeedback select.form-control { width: auto; max-width: 100%; } .LikertScale.choices { clear: both; display: inline-block; } .LikertScale.choices .radio-inline { float: left; width: auto; } .LikertScale.choices .radio-inline:first-child { padding: 0px 2em 0px 0px; margin: 0px; font-weight: 600; } .LikertScale.choices .radio-inline:last-child { padding: 0px 0px 0px 2em; margin: 0px; font-weight: 600; } .LikertScale.choices .likert-selected { font-weight: 700; border: 2px solid currentColor; border-radius: 50%; padding: 0 0.3em; background-color: rgba(0, 0, 0, 0.07); } #CourseFeedback li[data-required="required"] > div > h3:before { content: "*"; float: left; margin-right: 5px; } #CourseFeedback li[question_type="radio"] .choices label { width: 100%; } #CourseFeedback .button_container { width: 100%; display: inline-block; margin: 1em 0; } #CourseFeedback select.feedbackControl.multiSelect { height: 100%; resize: both; overflow: auto; } body.SurveyFeedback #content.container #CourseFeedback li[question_type="checkbox"] .choices.checkbox, body.SurveyFeedback #content.container #CourseFeedback li[question_type="checkbox"] .choices.checkbox .checkbox, body.SurveyFeedback #content.container #CourseFeedback li[question_type="checkbox"] .choices.checkbox .checkbox label { width: 100%; } /* Admin Previeew */ body.PreviewFeedback #content.container #CourseFeedback li[question_type="checkbox"] .choices.checkbox, body.PreviewFeedback #content.container #CourseFeedback li[question_type="checkbox"] .choices.checkbox .checkbox, body.PreviewFeedback #content.container #CourseFeedback li[question_type="checkbox"] .choices.checkbox .checkbox label { width: 100%; } body.page_PreviewFeedback #container #CourseFeedback li[question_type="checkbox"] .choices.checkbox, body.page_PreviewFeedback #container #CourseFeedback li[question_type="checkbox"] .choices.checkbox .checkbox, body.page_PreviewFeedback #container #CourseFeedback li[question_type="checkbox"] .choices.checkbox .checkbox label { width: 100%; } .modal #CourseFeedback ol[type="a"] li { list-style-type: lower-alpha !important; display: list-item !important; } /*! * FullCalendar v1.6.1 Stylesheet * Docs & License:http://arshaw.com/fullcalendar/ * (c) 2013 Adam Shaw */ .fc { direction: ltr; text-align: left; } .fc table { border-collapse: collapse; border-spacing: 0; } html .fc, .fc table { font-size: 1em; } .fc td, .fc th { padding: 0; vertical-align: top; } .fc-theme-standard td.fc-day { min-height: 99px; } /* Header ------------------------------------------------------------------------*/ .fc-header { position: relative; } .fc-header .btn + .btn { margin-left: 6px; } .fc-header-title { margin: 0; white-space: nowrap; position: absolute; left: 0; top: 0; width: 100%; text-align: center; font: 300 calc(20px * var(--font-scale, 1))/1.7 'Roboto', sans-serif; } .fc .fc-header-space { padding-left: 10px; } .fc-header .fc-button { margin-bottom: 1em; vertical-align: top; } .fc-header-center { position: absolute; top: -35px; height: 34px; width: 100%; } .fc-button-prev, .fc-button-next { position: relative; z-index: 10; margin: 0 14px; line-height: 1.8889; font-size: calc(18px * var(--font-scale, 1)); cursor: pointer; } .fc-button-prev { float: left; } .fc-button-next { float: right; } .fc-header-left { padding: 14px; overflow: hidden; } .fc-header-left > span { display: inline-block; border: 1px solid #e1e1e1; padding: 2px 8px; cursor: pointer; } .fc-header-left > span + span { margin-left: 10px; } .fc-header-left > span.fc-state-active { border-color: rgba(0, 0, 0, 0.2); color: white; } /* Content ------------------------------------------------------------------------*/ .fc-content { clear: both; } .fc-view { width: 100%; /* needed for view switching (when view is absolute) */ overflow: hidden; } /* Cell Styles ------------------------------------------------------------------------*/ .fc-widget-header, /* , usually */ .fc-widget-content { /* , usually */ border: 1px solid #dddddd; } .fc-state-highlight { /* today cell */ /* TODO:add .fc-today to */ background: #fcf8e3; } .fc-state-highlight .fc-day-number { background: #f9f0c4 !important; } .fc-cell-overlay { /* semi-transparent rectangle while dragging */ background: #d6e4f8; opacity: 0.4; filter: alpha(opacity=40); /* for IE */ } .fc-border-separate tr .fc-first { border-left: none; } .fc-border-separate tr .fc-last { border-right: none; } .fc-border-separate tr.fc-last td { border-bottom: none; } .fc-button-today { float: right; } .fc-state-disabled { color: #999999; background: #f8f8f8; } /* Global Event Styles ------------------------------------------------------------------------*/ .fc-event { border: none; /* default BORDER color */ background-color: rgba(0, 0, 0, 0.4); /* default BACKGROUND color */ color: white; /* default TEXT color */ font-size: 0.85em; cursor: default; padding: 2px 1px; } a.fc-event { text-decoration: none; } a.fc-event:hover { text-decoration: none; color: #222222; } a.fc-event, .fc-event-draggable { cursor: pointer; } .fc-rtl .fc-event { text-align: right; } .fc-event-inner { width: 100%; height: 100%; overflow: hidden; line-height: calc(14px * var(--font-scale, 1)); padding: 1px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fc-event-time, .fc-event-title { padding: 0 1px; } .fc .ui-resizable-handle { display: block; position: absolute; z-index: 99999; overflow: hidden; /* hacky spaces (IE6/7) */ font-size: 300%; /* */ line-height: 50%; /* */ } /* Horizontal Events ------------------------------------------------------------------------*/ .fc-event-hori { border-width: 1px 0; margin-bottom: 2px; } .fc-ltr .fc-event-hori.fc-event-start, .fc-rtl .fc-event-hori.fc-event-end { border-left-width: 1px; } .fc-ltr .fc-event-hori.fc-event-end, .fc-rtl .fc-event-hori.fc-event-start { border-right-width: 1px; } /* resizable */ .fc-event-hori .ui-resizable-e { top: 0 !important; /* importants override pre jquery ui 1.7 styles */ right: -3px !important; width: 7px !important; height: 100% !important; cursor: e-resize; } .fc-event-hori .ui-resizable-w { top: 0 !important; left: -3px !important; width: 7px !important; height: 100% !important; cursor: w-resize; } .fc-event-hori .ui-resizable-handle { _padding-bottom: 14px; /* IE6 had 0 height */ } /* Reusable Separate-border Table ------------------------------------------------------------*/ table.fc-border-separate { border-collapse: separate; } .fc-border-separate th, .fc-border-separate td { border-width: 1px 0 0 1px; } .fc-border-separate th.fc-last, .fc-border-separate td.fc-last { border-right-width: 1px; } .fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td { border-bottom-width: 1px; } .fc-border-separate tbody tr.fc-first td, .fc-border-separate tbody tr.fc-first th { border-top-width: 0; } /* Month View, Basic Week View, Basic Day View ------------------------------------------------------------------------*/ .fc-grid th { text-align: center; text-transform: uppercase; background: #f4f4f4; } .fc .fc-week-number { width: 22px; text-align: center; } .fc .fc-week-number div { padding: 0 2px; } .fc-grid .fc-day-number { padding: 0 4px; background: #f8f8f8; text-align: right; font-size: calc(11px * var(--font-scale, 1)); } .fc-grid .fc-other-month .fc-day-number { opacity: 0.3; filter: alpha(opacity=30); /* for IE */ /* opacity with small font can sometimes look too faded might want to set the 'color' property instead making day-numbers bold also fixes the problem */ } .fc-grid .fc-day-content { clear: both; padding: 2px 2px 1px; /* distance between events and day edges */ } /* event styles */ .fc-grid .fc-event-time { font-weight: bold; } /* right-to-left */ .fc-rtl .fc-grid .fc-day-number { float: left; } .fc-rtl .fc-grid .fc-event-time { float: right; } /* Agenda Week View, Agenda Day View ------------------------------------------------------------------------*/ .fc-agenda table { border-collapse: separate; } .fc-agenda-days th { text-align: center; } .fc-agenda .fc-agenda-axis { width: 50px; padding: 0 4px; vertical-align: middle; text-align: right; white-space: nowrap; font-weight: normal; } .fc-agenda .fc-week-number { font-weight: bold; } .fc-agenda .fc-day-content { padding: 2px 2px 1px; } /* make axis border take precedence */ .fc-agenda-days .fc-agenda-axis { border-right-width: 1px; } .fc-agenda-days .fc-col0 { border-left-width: 0; } /* all-day area */ .fc-agenda-allday th { border-width: 0 1px; } .fc-agenda-allday .fc-day-content { min-height: 34px; /* TODO:doesnt work well in quirksmode */ _height: 34px; } /* divider (between all-day and slots) */ .fc-agenda-divider-inner { height: 2px; overflow: hidden; } .fc-widget-header .fc-agenda-divider-inner { background: #eeeeee; } /* slot rows */ .fc-agenda-slots th { border-width: 1px 1px 0; } .fc-agenda-slots td { border-width: 1px 0 0; background: none; } .fc-agenda-slots td div { height: 20px; } .fc-agenda-slots tr.fc-slot0 th, .fc-agenda-slots tr.fc-slot0 td { border-top-width: 0; } .fc-agenda-slots tr.fc-minor th, .fc-agenda-slots tr.fc-minor td { border-top-style: dotted; } .fc-agenda-slots tr.fc-minor th.ui-widget-header { border-top-style: solid; /* doesn't work with background in IE6/7 */ } /* Vertical Events ------------------------------------------------------------------------*/ .fc-event-vert { border-width: 0 1px; } .fc-event-vert.fc-event-start { border-top-width: 1px; } .fc-event-vert.fc-event-end { border-bottom-width: 1px; } .fc-event-vert .fc-event-time { white-space: nowrap; font-size: calc(10px * var(--font-scale, 1)); } .fc-event-vert .fc-event-inner { position: relative; z-index: 2; } .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0.25; filter: alpha(opacity=25); } .fc .ui-draggable-dragging .fc-event-bg, /* TODO:something nicer like .fc-opacity */ .fc-select-helper .fc-event-bg { display: none \9; /* for IE6/7/8. nested opacity filters while dragging don't work */ } /* resizable */ .fc-event-vert .ui-resizable-s { bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */ width: 100% !important; height: 8px !important; overflow: hidden !important; line-height: 0.7273 !important; font-size: calc(11px * var(--font-scale, 1)) !important; font-family: monospace; text-align: center; cursor: s-resize; } .fc-agenda .ui-resizable-resizing { /* TODO:better selector */ _overflow: hidden; } .highcharts-title { font-size: 1.2em !important; } table.course_progress tr > .description { min-width: 300px; } /*@media print (max-width:767px) { table.course_progress tr { display:block; float:none; clear:both;} table.course_progress th, table.course_progress .objective > td { display:inline-block !important; float:left; text-align:left;} table.course_progress td{text-align:left;} table.course_progress td.hidden-xs, table.course_progress th.hidden-xs { display:none !important; float:left;} table.course_progress>tbody>tr>td > div, table.course_progress>tbody>tr>th > div {margin-left:0 !important; padding-left:0 !important;} .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {border-top:none 0px; padding:3px 8px;} table.course_progress>tbody>tr>th:first-child, table.course_progress>tbody>tr>td:first-child {border-top:solid 1px;} .course_progress .objective > td.score {width:100% !important;} .course_progress .activity > td.title {font-size:1.2em; font-weight:600;} .course_progress .activity > td.description {display:block !important;} .course_progress td h3 {width:120px; font-weight:bold; display:inline-block !important; float:left; margin:0px;} }*/ /*Browser Detection*/ #browser-detection { background: #ffffe5; color: #333333; position: fixed; _position: absolute; padding: 10px 15px; font-size: calc(13px * var(--font-scale, 1)); font-family: "Trebuchet MS", "Segoe UI", Arial, Tahoma, sans-serif; border-radius: 5px; border: 1px solid #d6d6c1; -moz-border-radius: 5px; width: 700px; z-index: 1001; top: 180px !important; } #browser-detection P { margin: 0; padding: 0; background: transparent; line-height: 135%; width: auto; float: none; border: none; text-align: center; } #browser-detection P.bd-title { padding-top: 0px; font-size: calc(25px * var(--font-scale, 1)); line-height: 100%; } #browser-detection P.bd-notice { padding-bottom: 5px; padding-top: 28px; } #browser-detection SPAN.bd-highlight { color: #b50e0e; } #browser-detection A#browser-detection-close { width: 15px; height: 15px; outline: none; position: absolute; right: 10px; top: 10px; text-indent: -500em; line-height: 100%; background: url(./images/close.gif) no-repeat center center; } #browser-detection A#browser-detection-close:HOVER { background-color: beige; } #browser-detection UL.bd-browsers-list, #browser-detection UL.bd-browsers-list LI, #browser-detection UL.bd-skip-buttons, #browser-detection UL.bd-skip-buttons LI { padding: 0; margin: 0; float: left; list-style: none; } #browser-detection UL.bd-browsers-list { clear: both; margin-top: 3px; padding: 7px 0; border-top: 1px solid beige; border-bottom: 1px solid beige; width: 100%; } #browser-detection UL.bd-browsers-list LI { text-align: left; } #browser-detection UL.bd-browsers-list LI A { width: 60px; height: 55px; display: block; color: #666666; padding: 10px 10px 0 65px; text-decoration: none; } #browser-detection UL.bd-browsers-list LI A:HOVER { text-decoration: underline; } #browser-detection UL.bd-browsers-list LI.firefox A { background: url(./images/firefox.gif) no-repeat left top; } #browser-detection UL.bd-browsers-list LI.chrome A { background: url(./images/chrome.gif) no-repeat left top; } #browser-detection UL.bd-browsers-list LI.safari A { background: url(./images/safari.gif) no-repeat left top; } #browser-detection UL.bd-browsers-list LI.opera A { background: url(./images/opera.gif) no-repeat left top; } #browser-detection UL.bd-browsers-list LI.msie A { background: url(./images/msie.gif) no-repeat left top; } #browser-detection UL.bd-skip-buttons { margin-top: 10px; } #browser-detection UL.bd-skip-buttons LI { display: inline; margin-right: 10px; } #browser-detection UL.bd-skip-buttons LI BUTTON { font-size: calc(13px * var(--font-scale, 1)); } #browser-detection DIV.bd-poweredby { font-size: calc(9px * var(--font-scale, 1)); position: absolute; bottom: 10px; right: 10px; font-style: italic; } #browser-detection DIV.bd-poweredby, #browser-detection DIV.bd-poweredby A { color: #aaaaaa; } #browser-detection DIV.bd-poweredby A { text-decoration: underline; } #browser-detection DIV.bd-poweredby A:HOVER { text-decoration: none; } /* Accessibility for Amazon Compliance */ a.showOnFocus { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } a.showOnFocus:focus, a.showOnFocus:active { overflow: visible; height: auto; width: auto; clip: auto; } /* End */ #black_overlay { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1000; -moz-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); } /*assessment*/ body#tc-assessment { background-color: white; color: black; } body#tc-assessment .qustion .question-text { color: black; } body#tc-assessment ol.choices li { color: black; background-color: white; border: solid 1px black; } body#tc-assessment ol.choices li:hover, body#tc-assessment ol.choices li.selected { color: #0099ff; background-color: white; border: solid 1px black; } body#tc-assessment ol.choices li.correct { color: white; background-color: #00cc00; border: solid 1px #00cc00; } body#tc-assessment ol.choices li.incorrect { color: white; background-color: red; border: solid 1px red; } body#tc-assessment .feedback.alert { border-radius: 6px; } body#tc-assessment .correct.feedback.alert-success { color: white; background: #66a103; border: solid 1px #66a103; } body#tc-assessment .incorrect.feedback.alert-danger { color: black; background: #de2145; border: solid 1px #de2145; } #tc-assessement .fb-review.incorrect { color: black; background: #de2145; border: solid 1px #de2145; width: 90%; min-height: 50px; margin: 20px 0px 0px 30px; padding: 10px; } #tc-assessement .fb-review.correct { color: white; background: #66a103; border: solid 1px #66a103; width: 90%; min-height: 50px; margin: 20px 0px 0px 30px; padding: 10px; } /* Scheduler */ .AvailabilityScheduler { width: 100%; font-size: 0.9em; /*position:relative; max-height:500px; overflow-y:auto; display:block;*/ } .AvailabilityScheduler > table { width: 100%; } .AvailabilityScheduler > table > tr > td { padding: 0px; border: none 0px; } /*.AvailabilityScheduler table table.headerTable {position:absolute; top:0px; left:0px; z-index:10; margin-top:0px;}*/ .AvailabilityScheduler table table { padding: 0px; margin: 0px 0px 0px 0px; border: none 0px; width: 100%; } .AvailabilityScheduler table table tr > td { width: 10%; padding: 8px; border: none 0px; cursor: pointer; border-bottom: solid 1px white; } .AvailabilityScheduler table thead tr > td, .AvailabilityScheduler table table tr > td.hours { background-color: #005245; color: white; } .AvailabilityScheduler table thead tr > td:last-child { padding-left: 0px; padding-right: 0px; width: 17px !important; display: none; } .AvailabilityScheduler table table thead tr > td.month, .AvailabilityScheduler table table tr > td.hours { width: 150px !important; cursor: default !important; } /*.AvailabilityScheduler table >tbody > tr > td > div {height:auto !important; overflow-y:visible !important;}*/ .AvailabilityScheduler table table thead tr > td.days:nth-child(odd), .AvailabilityScheduler table table tr > td.selected:nth-child(odd) { opacity: 0.9 !important; } .AvailabilityScheduler table table tr > td.selected { background-color: #7ebc00; color: #153c35; } .AvailabilityScheduler table table tr > td.unselected:nth-child(odd) { background-color: #ecd9c7; color: #153c35; } .AvailabilityScheduler table table tr > td.unselected:nth-child(even) { background-color: #ecd9c7; color: #153c35; } .AvailabilityScheduler td.selectedlegend { background-color: #ff5900; color: black; border-color: black; cursor: pointer; } .AvailabilityScheduler td.unavailable { background-color: lightgray; color: black; border-color: black; } .AvailabilityScheduler td.marked { background-color: green; color: black; border-color: black; cursor: pointer; } .AvailabilityScheduler .unselectable { -moz-user-select: none; -webkit-user-select: none; } #transcript_list #transcripts_completed tr > .credit-categories .cc-value.show { font-weight: 400; display: inline-block !important; margin-left: 4px; } /*Learner Notes*/ .modal-footer.learner-note { border: none !important; } .modal .wysihtml5-toolbar li { list-style-type: none !important; } .learner-note .fa-sticky-note { font-size: 1.2em; } .tc-btn-group .btn { margin-left: 5px; } /*Supervisor View*/ body.SuperviserView .counters > div { padding: 15px; } body.SuperviserView .counters .box { height: 240px; border: solid 1px white; padding: 30px; } body.SuperviserView .counters .box .count { font-size: 3em; } #SupervisorView .filter-container #filters { display: inline-block; width: 100%; } .counters .box .count-container { display: inline-block; margin: 15px 0px; padding: 15px; width: 100%; } .my-learners .filters { margin-top: 15px; padding: 15px; display: inline-block; width: 100%; border: solid 1px #eeeeee; } .my-learners .filters label, .my-learners .filters .label { display: block; width: 100%; } .my-learners .filters ul { padding: 15px; border: solid 1px #eeeeee; height: 200px; overflow: auto; } .my-learners .filters ul input[type="radio"], .my-learners .filters ul input[type="checkbox"] { margin-right: 3px; } .my-learners .filters ul, .my-learners .filters ul li { list-style-type: none; } .my-learners table, .my-modules table, .my-assignments table { margin-top: 15px; } .my-modules tr:hover.hover, .my-modules tr:hover.hover td { background-color: #ababab !important; } .my-modules tr.hover { cursor: pointer; } .my-modules .enrollment-actions > .btn { margin-bottom: 15px; } /* Learner view dougnut charts*/ div.doughnut, span.doughnut { width: 300px; height: 300px; display: inline-block; } x-pie { display: block; width: 525px; height: 400px; margin: -50px auto; text-align: left; } svg { overflow: visible; } svg .wedge { cursor: pointer; } x-pie h1 { font-size: 1.5em; } /*draggable notes cursor*/ .learner-note .modal-header { cursor: pointer; } /*draggable notes cursor*/ .learner-note .modal-header { cursor: pointer; } /* Accessibility Settings */ .page-header.AccessibilityPreference { display: none; } #frmAccessibilityPreferences { margin-top: 15px; } /* Text Size */ #textSizeDiv > #TextSizeLabel { margin-right: 1rem; } /* Line Spacing */ #lineSpacingDiv #LineSpacingLabel { margin-right: 1rem; } /* Contrast */ .abw { color: black !important; background-color: white !important; } .awb { color: white !important; background-color: black !important; } .aby { color: black !important; background-color: yellow !important; } .ayb { color: yellow !important; background-color: black !important; } #contrastDiv > #ContrastLabel { margin-right: 1rem; } /* Font */ .fl-font-arial { font-family: Arial !important; } .fl-font-times { font-family: Georgia, Times, Times New Roman, serif !important; } .fl-font-verdana { font-family: Verdana !important; } .fl-font-open { font-family: OpenDyslexic, sans-serif !important; } #fontDiv > #FontLabel { margin-right: 1rem; } .enhance-inputs { font-weight: bold; } /* My Profile (2022) */ #MyProfile { position: relative; } #MyProfile .cover { margin: 0px -15px 15px -15px; position: relative; height: 200px; } #MyProfile .cover img.cover_bg { position: absolute; top: -4px; width: calc(100% + 8px); height: 200px; object-fit: cover; object-position: center center; filter: blur(8px); -webkit-filter: blur(8px); opacity: 0.2; } #MyProfile #Avatar { position: relative; top: -160px; width: 100%; height: 0; padding-bottom: 80%; margin-bottom: -120px; overflow: hidden; } #MyProfile #Avatar img.profile { position: absolute; top: 0px; left: 0; width: 80%; height: 100%; object-fit: cover; } #MyProfile .supervisor { margin-bottom: 1em; } #MyProfile .supervisor img.profile, #MyProfile .connections img.profile, #MyProfile .collaborations img.profile { padding: 0px; border: solid 1px #f6f6f6; width: 40px; height: 40px; object-fit: cover; object-position: center center; } #MyProfile .supervisor > a { margin-right: 5px; } #MyProfile .stats { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: stretch; margin-left: -15px; margin-right: -15px; } #MyProfile .stats > div { margin-bottom: 30px; } #MyProfile .stats .stat { background-color: white; padding: 15px; margin: 0px; text-align: center; display: inline-block; float: left; width: 100%; height: 100%; } #MyProfile .stats .stat.certificate { padding-bottom: 5em !important; position: relative; } #MyProfile .stats .stat.certificate .btn { position: absolute; bottom: 15px; left: auto; right: 15px; } #MyProfile .stats .stat .count { font-size: 2em; line-height: 1.2em; } #MyProfile .stats .stat label { font-weight: bold; width: 100%; text-align: center; } #MyProfile .stats .stat .icon { background-color: white; padding: 15px; text-align: center; display: inline-block; border-radius: 50%; } #MyProfile .stats .stat .icon img, #MyProfile .stats .stat .icon .fa, #MyProfile .stats .stat .icon svg { font-size: calc(36px * var(--font-scale, 1)); width: 36px; height: 36px; } #MyProfile .card { margin-bottom: 15px; } #MyProfile .card .card-body { padding: 15px; } #MyProfile .card .card-body label { font-weight: bold; width: 100%; } #MyProfile .card .card-body .setting, #MyProfile .card .card-body .custom-field, #MyProfile .card .card-body .preference, #MyProfile .card .card-body .certificate, #MyProfile .card .card-body .openbadge { margin-bottom: 1em; } #MyProfile .card .card-body .setting > div { display: inline-block; width: 100%; line-height: calc(60px * var(--font-scale, 1)); } #MyProfile .card .card-body .setting .profile { width: 60px; height: 60px; object-fit: cover; margin: 0px 5px 0px 0px; float: left; clear: left; } #MyProfile .card .card-body .custom-field .field-value:empty { content: "�"; } #MyProfile .card .card-body .certificate, #MyProfile .card .card-body .openbadge { text-align: center; } #MyProfile .card .card-body .certificate .icon, #MyProfile #myBadges .badge-panel .media { background-color: white; padding: 15px; text-align: center; display: inline-block; border-radius: 50%; margin: 0px !important; } #MyProfile .card .card-body .certificate .certificate_thumbnail img, #MyProfile #myBadges .badge-panel .media img { width: 100%; height: auto; } #MyProfile .card .card-body .certificate .icon img, #MyProfile #myBadges .badge-panel .media img { width: 36px; height: 36px; } #MyProfile .card .card-body .certificate label, #MyProfile .card .card-body .openbadge label { text-align: center; } /* #MyProfile .card .card-body .connectionType .connection tr > * { padding: 5px; }*/ #MyProfile .card .card-body table tr .waitDialog.connection-options { white-space: nowrap; } #MyProfile .card .card-body .btn-share img { height: 14px; } #MyProfile #myBadges > .row { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: stretch; } #MyProfile #myBadges > .row .badge-panel { margin: 0px 30px 30px 0px !important; border: none 0px !important; text-align: center; position: relative; } #MyProfile #myBadges > .row .badge-panel .panel-heading, #MyProfile #myBadges > .row .badge-panel .panel-body, #MyProfile #myBadges > .row .badge-panel .panel-footer { background-color: transparent !important; border: none 0px !important; padding: 0px !important; } #MyProfile #myBadges > .row .badge-panel .panel-heading { min-height: 4em; } #MyProfile #myBadges > .row .badge-panel .panel-heading h4 { font-size: 1em; } #MyProfile #myBadges > .row .badge-panel .panel-body .list-group { display: none; visibility: hidden; } #MyProfile #myBadges > .row .badge-panel .panel-footer .btn-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } #MyProfile #myBadges > .row .badge-panel .panel-footer .btn-group .btn { clear: both; border-radius: 4px; margin-bottom: 2px; border: none 0px; } #MyProfile #myBadges > .row .badge-panel .panel-footer .btn-group .btn:empty { display: none; visibility: hidden; } #MyProfile #myBadges > .row .badge-panel .panel-footer .btn-group .btn .fa, #MyProfile #myBadges > .row .badge-panel .panel-footer .btn-group .btn svg { margin-right: 5px; } #MyProfile .card.connections .connectionType { margin-bottom: 1em; } #MyProfile .card.connections .connectionType > .connection { display: flex; align-items: center; align-content: stretch; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 5px; margin: 0px -5px 5px -5px; height: auto; } #MyProfile .card.connections .connectionType > .connection:hover { background-color: white; } #MyProfile #accountDetailsModalForm .form-group { display: inline-block; width: 100%; margin-bottom: 1em; } #MyProfile .card .custom-field > span > div { display: flex; justify-content: space-between; align-items: flex-start; } #MyProfile .card .custom-field .edit-container .md-field { display: flex; justify-content: space-between; align-items: flex-end; } #MyProfile .card .custom-field .edit-container > div, #MyProfile .card .custom-field .edit-container > div .controls { padding: 0px; margin-bottom: 0px; } #MyProfile .card .custom-field .edit-container > div .controls { width: 100%; } #MyProfile .card .custom-field .edit-container .btn.save-md { margin: 0px 0px 0px 15px; } /*Inbox*/ #Inbox #inbox-pagination ul.pagination { margin: 0px; } #Inbox #unread_counts { line-height: calc(38px * var(--font-scale, 1)); margin: 0px 15px; } #Inbox #inbox-search .input-group { max-width: 200px; } #Inbox > .row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } #Inbox #inbox-messages .well { border: solid 1px white; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; height: 100%; background-color: #ecd9c7; background-color: white; color: #153c35; } #Inbox #inbox-messages .well .message { margin-bottom: 1em; } #Inbox #inbox-messages .well .message .readstatus { display: inline-block; float: left; margin-right: 5px; } #Inbox #inbox-messages .well .message .readstatus .fa, #Inbox #inbox-messages .well .message .readstatus svg { color: #005245; } #Inbox #inbox-messages .well .message .subject { font-weight: bold; text-decoration: underline; color: #005245; cursor: pointer; cursor: hand; } #Inbox #inbox-messages .well .message .subject:hover { text-decoration: none; } #Inbox #inbox-content:empty { text-align: center; } #Inbox #inbox-content:empty:before { content: "\f1ce"; display: inline-block; font: normal normal normal calc(14px * var(--font-scale, 1))/1 FontAwesome; font-size: 2em; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 60px auto; -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } #Inbox #inbox-content .message_full .message_head { margin-bottom: 2em; } #Inbox #inbox-content .message_full .message_body { border: solid 1px white; width: 100%; overflow: auto; padding: 15px; word-break: break-word; } #CollaborationLearners #AvailableLearners, #CollaborationLearners #ConnectedLearners { width: 100%; display: inline-block; } #CollaborationLearners #AvailableLearners > .learners, #CollaborationLearners #ConnectedLearners > .learners { width: 100%; display: flex; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; align-items: stretch; } #CollaborationLearners .learner { display: flex; flex-wrap: nowrap; flex-direction: row; align-content: stretch; justify-content: flex-start; align-items: stretch; margin-bottom: 30px; text-transform: capitalize; } #CollaborationLearners .profile_pic img.profile_pic { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin: 0px 5px 5px 0px; border: solid 1px #eeeeee; } #CollaborationLearners .learner .btn { margin-bottom: 5px; } #CollaborationLearners #CollaborationMessage { border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd; padding: 15px; margin-bottom: 15px; } /*Esignature modal*/ #modal_esignature_submission .modal-header { display: flex; justify-content: space-between; align-items: flex-start; } #modal_esignature_submission .modal-header > .modal-title { flex-grow: 1; } #modal_esignature_submission .modal-header > .btn-close { border: none 0px; background: transparent; } #modal_esignature_submission .tab-content { padding: 15px 0px; } #modal_esignature_submission .tab-content > .tab-pane.active { display: inline-block !important; width: 100%; } #modal_esignature_submission .mb-3 { margin-bottom: 1em; } #modal_esignature_submission .acknowledgment .full-name { font-weight: bold; padding: 0px 5px; display: inline-block; border-bottom: solid 1px black; } #modal_esignature_submission .signature-drawn-display { display: inline-block; border-radius: 10px; border-left: solid 2px black; } #modal_esignature_submission .signature-typed-display { font-family: 'Alex Brush', 'Birthstone', 'Dancing Script', 'Ephesis', 'Great Vibes', 'Kalam', 'Marck Script', 'Monte Carlo', 'Satisfy', 'Whisper', 'Dancing Script', 'Pacifico', 'Great Vibes', 'Satisfy', 'Cedarville Cursive', 'Lucida Handwriting', 'MV Boli', cursive; font-size: calc(24px * var(--font-scale, 1)); display: inline-block; border: solid 1px black; border-width: 0px 0px 1px 0px; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; padding: 5px 0px 0px 0px; } #modal_esignature_submission #eSignature_submission_response { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; } #modal_esignature_submission #eSignature_submission_response:empty { display: none; visibility: hidden; } #signatureData .signature { display: inline-block; border-radius: 12px !important; border-left: solid 3px black; padding: 10px; background: #f9f9f9; margin-bottom: 5px; } #signatureData .signature #eSigLearnerName.written { display: block; } #signatureData .signature #eSigLearnerName.written:after { content: ":"; } #signatureData .signature #eSigLearnerName.drawn { display: block; font-family: 'Alex Brush', 'Birthstone', 'Dancing Script', 'Ephesis', 'Great Vibes', 'Kalam', 'Marck Script', 'Monte Carlo', 'Satisfy', 'Whisper', 'Dancing Script', 'Pacifico', 'Great Vibes', 'Satisfy', 'Cedarville Cursive', 'Lucida Handwriting', 'MV Boli', cursive; font-size: calc(24px * var(--font-scale, 1)); padding: 20px; } /* #90440 modal-page: hide chrome when page is loaded in a modal iframe */ body.modal-page #log_in_bar, body.modal-page #masthead, body.modal-page #footer { display: none; } /*************** #97802 font-scale: Froala editor UI follows the learner font selector ***************/ /* Values mirror froala_editor.pkgd(.min).css; body prefix guarantees the override wins regardless of stylesheet load order. Visually identical at --font-scale: 1 */ body .fr-box.fr-basic .fr-element { font-size: calc(14px * var(--font-scale, 1)); } body .fr-box a.fr-floating-btn i, body .fr-box a.fr-floating-btn svg { font-size: calc(14px * var(--font-scale, 1)); } body .fr-wrapper .fr-placeholder { font-size: calc(14px * var(--font-scale, 1)); } body .fr-tooltip { font-size: calc(11px * var(--font-scale, 1)); } body .fr-toolbar .fr-command.fr-btn span, body .fr-popup .fr-command.fr-btn span, body .fr-modal .fr-command.fr-btn span { font-size: calc(14px * var(--font-scale, 1)); } body .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li { font-size: calc(15px * var(--font-scale, 1)); } body .fr-modal .fr-modal-wrapper .fr-modal-head h4 { font-size: calc(20px * var(--font-scale, 1)); } body .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command { font-size: calc(16px * var(--font-scale, 1)); } body .fr-popup .fr-icon { font-size: calc(20px * var(--font-scale, 1)); } body .fr-popup .fr-input-line input[type="text"], body .fr-popup .fr-input-line textarea { font-size: calc(14px * var(--font-scale, 1)); } body .fr-popup .fr-input-line input + label, body .fr-popup .fr-input-line textarea + label { font-size: calc(14px * var(--font-scale, 1)); } body .fr-popup .fr-input-line input.fr-not-empty + label, body .fr-popup .fr-input-line textarea.fr-not-empty + label { font-size: calc(11px * var(--font-scale, 1)); } body .fr-popup .fr-action-buttons button.fr-command { font-size: calc(16px * var(--font-scale, 1)); } body .fr-popup .fr-checkbox-line { font-size: calc(14px * var(--font-scale, 1)); } body .fr-box .fr-counter { font-size: calc(14px * var(--font-scale, 1)); } body textarea.fr-code { font-size: calc(14px * var(--font-scale, 1)); } body .fr-box.fr-inline .fr-command.fr-btn.html-switch i { font-size: calc(24px * var(--font-scale, 1)); } body .fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons button.fr-command { font-size: calc(13px * var(--font-scale, 1)); } body .fr-popup .fr-color-set > span > i, body .fr-popup .fr-color-set > span > svg { font-size: calc(13px * var(--font-scale, 1)); } body .fr-popup .fr-color-set > span .fr-selected-color { font-size: calc(13px * var(--font-scale, 1)); } body .fr-popup .fr-file-upload-layer, body .fr-popup .fr-image-upload-layer, body .fr-popup .fr-video-upload-layer { font-size: calc(14px * var(--font-scale, 1)); } body .fr-popup .fr-file-progress-bar-layer > h3, body .fr-popup .fr-image-progress-bar-layer > h3, body .fr-popup .fr-video-progress-bar-layer > h3 { font-size: calc(16px * var(--font-scale, 1)); } body div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before { font-size: calc(15px * var(--font-scale, 1)); } body .fr-popup .fr-buttons.fr-tabs .fr-special-character-category span { font-size: calc(16px * var(--font-scale, 1)); } body .fr-popup .fr-table-size .fr-table-size-info { font-size: calc(14px * var(--font-scale, 1)); } body .fr-view .fr-img-caption .fr-img-wrap > span { font-size: calc(14px * var(--font-scale, 1)); } /* Proxima Nova is commercial and the npm mirror is DMCA-blocked; Montserrat is the free metric-compatible stand-in. If ODA supplies a licensed Adobe Fonts kit, paste its here and Proxima Nova wins the stack. */ /*--Variables---------------------------------------------------------*/ :root { --font-scale: 1.2; --primary-green: #005245; --secondary-darkgreen: #153833; --LighterGreen: #c8e982; --FieryOrange: #a0422e; --Orange: #ff9219; --dark-text: #363d47; /* Fonts */ /* PRIMARY FONT - Proxima Nova: Black, ExtraBold, Medium, Regular, Italic regular */ --font-family-body: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* SECONDARY FONT - Benton Sans Compressed: Black, Bold, Regular */ --font-family-heading: 'urw-din-condensed', 'Benton Sans Compressed', 'Oswald', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; } /* Utilities */ .container { max-width: 100% !important; width: 100%; padding-right: 15px !important; padding-left: 15px !important; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .container { max-width: 750px !important; } } @media (min-width: 992px) { .container { max-width: 970px !important; } } @media (min-width: 1200px) { .container { max-width: 1170px !important; } } /* Masthead */ html body > #masthead { padding: 0px !important; max-width: unset !important; background: transparent !important; } #masthead #langSel { display: none !important; visibility: hidden !important; } #masthead #languageSelection .btn.btn-link { color: white !important; } #masthead .breadcrumbs { width: 100%; margin-top: 30px; background-color: transparent; } #masthead .breadcrumb { background-color: transparent; padding: 0; } #masthead #headerTopMenu .container, #masthead #headerBottomMenu .container { display: flex; align-items: center; } #masthead #headerTopMenu { background-color: var(--primary-green); } #masthead #headerBottomMenu { background-color: var(--secondary-darkgreen); } #masthead #headerBottomMenu .container { justify-content: space-between; } #masthead #search span.search_container { padding: 1px; display: flex; flex-direction: row-reverse; align-items: center; } #masthead #search span.search_container input { padding: 0; line-height: 1em; } #masthead #headerBottomMenu .container::before, #masthead #headerBottomMenu .container::after { content: unset; display: unset; visibility: unset; } #masthead .masthead_logo { flex-shrink: 0; width: auto; } #masthead #logo { margin: 0 !important; padding: 10px 0; } #masthead #logo img { width: 150px; } #masthead #languageSelection { margin-right: auto; padding: 5px 10px; line-height: 100%; height: 40px; width: 40px; justify-content: center; font-weight: 400; display: flex; align-items: center; margin-top: 0 !important; margin-bottom: 0 !important; } #masthead #search { margin: 0; margin-right: 20px; margin-left: auto; } #masthead #search .search_container { margin-top: 0 !important; } #masthead #login_info { background-color: transparent; color: white; gap: 0px; margin-top: 0; height: 40px; } #masthead #login_info svg { color: white; } #masthead #main_menu_bar .navbar-default .navbar-nav a { font-size: 0.8em !important; text-transform: uppercase; display: flex; align-items: center; } #masthead .notloggedin .log_in { padding: 0; border: none; font-size: 1em; background: transparent; font-weight: 500; margin-left: 0; } #masthead .caret { background-image: url('data:image/svg+xml,'); border: none; display: block; width: 11px; height: 8px; background-size: contain; background-repeat: no-repeat; flex-shrink: 0; margin-left: 5px; } #breadcrumbs a, #breadcrumbs li > *, #breadcrumbs li > a { color: black; } .breadcrumb li:last-child span { font-weight: 400 !important; font-size: 1em !important; } /*--Base layout dimensions---------------------------------------------------------*/ html > body { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-evenly; align-items: stretch; } /* Secondary menu */ #masthead > .row.main-brand > .col-md-8 { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; } #masthead .keep_right #login_info > div:empty { display: none; visibility: hidden; } #masthead #login_info .btn.btn-link.Contact_Us { font-weight: 600; text-decoration: none; text-transform: capitalize; } #masthead #login_info .btn.btn-link { text-transform: uppercase; } #masthead #login_info .btn-group.profile-menu { margin: 0px; } #masthead #login_info .btn.profile-dropdown, #masthead #login_info .btn.profile-dropdown:hover, #masthead #login_info .btn.profile-dropdown:focus { text-decoration: none; background-color: transparent; font-weight: bold !important; color: black !important; font-size: 1em; padding: 0px; border: none 0px; outline: none; line-height: 1em; } #masthead #login_info .btn-group.profile-menu li a { font-size: 1em !important; } #masthead #login_info .btn-group.profile-menu li.user-details { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-items: center; font-weight: bold; text-transform: capitalize; justify-content: space-between; padding: 10px 15px; } #masthead #login_info .btn-group.profile-menu li.user-details .profile.img-thumbnail { border-radius: 50%; margin: 0px; } #masthead #login_info .btn-group.profile-menu li.user-details .full_name { flex-grow: 1; } #masthead #login_info #languageSelection .label, #masthead #login_info #languageSelection select#langSel, #masthead #login_info .btn-group.profile-menu li.user-details br, #masthead #login_info .btn-group.profile-menu li.user-details .timezone, #masthead #login_info .btn-group.profile-menu li.divider, #masthead #login_info .btn-group.profile-menu li a svg, html[data-programid="3e863b2d-eefa-456d-82f7-16ee8d503d85"] #masthead #login_info .notloggedin #register, html[data-programid="3e863b2d-eefa-456d-82f7-16ee8d503d85"] #login_page #Login #registrationButtonSpan { display: none !important; visibility: hidden !important; } /* Main menu */ #masthead #main_menu_bar nav.navbar > .container { padding: 0 !important; } html[lang="en"] #masthead #main_menu_bar nav.navbar > .container .navbar-header a.home.navbar-brand { display: none; visibility: hidden; } #masthead #main_menu_bar nav.navbar > .container > .navbar-collapse > .navbar-nav { display: flex; align-content: stretch; align-items: stretch; justify-content: space-between; } #masthead #main_menu_bar .navbar > .container .home.navbar-brand, #masthead #main_menu_bar .navbar-default .navbar-nav > li > a { font-weight: 400; font-family: var(--font-family-heading); text-decoration: none; } #masthead #main_menu_bar .navbar-default .navbar-nav > li .dropdown-menu { padding: 0px; } #masthead #main_menu_bar .navbar-default .navbar-nav > li .dropdown-menu a, #masthead #main_menu_bar .navbar-default .navbar-nav > li .dropdown-menu a:hover, #masthead #login_info .btn-group.profile-menu li a { text-decoration: none; font-weight: 600; font-size: 0.7em; font-family: var(--font-family-body); padding: 10px 15px; } /*--Home---------------------------------------------------------*/ /* body.Home > #content.container > .page-header, body.Home > #content.container > h2 { padding: 60px 15px 30px 15px; display: inline-block; } */ /* body.Home > #content.container > .page-header > h2 { font-size: 2em; color: var(--secondary-darkgreen); font-weight: 600; } */ /* Slideshow */ #myCarousel, #myCarousel .carousel-inner > .item, #myCarousel .carousel-inner > .item > img { max-height: 500px; } #myCarousel .carousel-inner > .item > img { object-fit: cover; } #myCarousel .carousel-inner > .item .carousel-caption { padding: 30px 15px; font-size: 2em; text-align: left; background-color: transparent; } #myCarousel .carousel-inner > .item .carousel-caption > h1 { font-weight: 900; max-width: 600px; font-size: 3em; line-height: 1em; font-family: var(--font-family-body); letter-spacing: 0px; } #myCarousel .carousel-inner > .item .carousel-caption > div { margin: 0px; max-width: 600px; line-height: 1.1em; font-weight: 500; } #myCarousel .carousel-inner > .item .carousel-caption > div .more-button { display: inline-block; margin-top: 1em; background-color: var(--secondary-darkgreen); font-size: 0.7em; line-height: 60px; border-radius: 0px; padding: 0px 30px; text-decoration: none; font-weight: bold; } /* Custom features */ @media only screen and (min-width: 1200px) { #Tile-CustomFeatures #custom_features_tile > .row > div { width: 33.33333333%; width: 50%; } } #Tile-CustomFeatures #custom_features_tile > .row > div .thumbnail { border-radius: 30px; border: solid 2px var(--primary-gray); padding: 30px; } #Tile-CustomFeatures #custom_features_tile > .row > div .thumbnail .caption { padding: 0px; } #Tile-CustomFeatures #custom_features_tile > .row > div .thumbnail .caption .more-button #Tile-CustomFeatures #custom_features_tile > .row > div .thumbnail .caption .more-button > .a { margin: 0px; } #Tile-CustomFeatures #custom_features_tile > .row > div .thumbnail .caption .more-button > .a { background-color: var(--secondary-darkgreen); } /*--Content Styles---------------------------------------------------------*/ /* Page header */ body > #content.container .page-header { margin: 0px; border-bottom: none 0px; } body > #content.container .page-header > h1.page-title, body > #content.container .page-header > h2 { font-size: 36px; color: var(--secondary-darkgreen); font-weight: 600; } /* Buttons */ .btn, .btn.btn-default, .btn.btn-primary { border-radius: 0px; padding: 0px 30px; text-decoration: none; font-size: 1em; line-height: 40px; font-weight: bold; } .btn.btn-primary { background-color: var(--primary-green); border-color: var(--primary-green); } .btn.btn-link, .btn.btn-link:hover { text-decoration: none; background-color: transparent; font-weight: bold !important; color: black !important; font-size: 1em; } .btn.btn-knowrisk { color: white; background-color: var(--Orange); border-color: var(--Orange); } .btn.btn-knowrisk:hover { color: white; background-color: var(--FieryOrange); border-color: var(--FieryOrange); } .btn.btn-groundwork.pro { color: white; background-color: var(--OceanBlue); border-color: var(--OceanBlue); } .btn.btn-groundwork.pro:hover { color: var(--dark-text); background-color: var(--OceanBlueLight); border-color: var(--OceanBlue); } /* Progress bar */ .progress { max-width: 250px; height: 20px; border-radius: 10px; overflow: hidden; } /* LP activity-group progress bars span the full row — scoped tight to LP so .progress elsewhere in learner view keeps the 250px cap (#98589) */ #mycourse .row.Learning_Path .lp_activities .activity-group-progress .progress { max-width: 100%; width: 100%; } /* activity details panel (enrolled): the breakdown bar fills the visuals lane */ #mycourse .row-overview .activity-overview .activity_progress_visuals .progress { max-width: 100%; width: 100%; } .progress > .progress-bar { height: 20px; background-color: var(--primary-green); } /* Panels and Accordions */ .panel .panel-body { background-color: transparent; } .panel-group .panel-heading .panel-title a, .panel-group .panel-heading .panel-title a:focus { color: var(--dark-text); text-underline-offset: 2px; } .panel-group .panel-heading .panel-title { font-size: 1.2em; } .accordion .accordion-item .accordion-header { padding: 15px; border: solid 1px #cccccc; } .accordion .accordion-item .accordion-body { padding: 15px; border: solid 1px #cccccc; } /* Labels */ label, .form-label, body.Login.Login_compressed #content.container #Login .control-label { color: var(--secondary-darkgreen); font-weight: 700; } body.Login.Login_compressed #content.container fieldset { margin-top: 1em; } /* Learning Activities Lists */ #catalogueResults { display: flex; flex-wrap: wrap; align-content: stretch; justify-content: space-between; align-items: stretch; column-gap: 4%; } #catalogueResults > .panel { width: 100%; padding-top: 200px; border: none 0px; } @media only screen and (min-width: 768px) { #catalogueResults > .panel { width: 48%; } } @media only screen and (min-width: 992px) { #catalogueResults > .panel { width: 30.666%; } } #catalogueResults > .panel, #catalogueResults > .panel > .panel-heading, #catalogueResults > .panel > .panel-body { background-color: white; } #catalogueResults > .panel > .panel-body > .course-image-col { position: absolute; top: 0px; left: 0px; width: 100%; height: 200px; object-fit: cover; border-radius: 20px; overflow: hidden; } #catalogueResults > .panel > .panel-body { padding: 0px; } #catalogueResults > .panel > .panel-body .course-info-container { display: flex; flex-direction: column; width: 100%; row-gap: 20px; } #catalogueResults > .panel > .panel-body .course-info-container .description-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } #catalogueResults > .panel > .panel-body .course-info-container > div, #catalogueResults > .panel > .panel-body .course-info-container > div .progress { width: 100% !important; } html[lang="en"] #catalogueResults > .panel > .panel-body .price.no-discounts { font-family: var(--font-family-body); font-weight: 800; font-size: 1em; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: -6px; text-align: left; } html[lang="en"] #catalogueResults > .panel > .panel-body .price.no-discounts::after, html[lang="en-us"] #catalogueResults > .panel > .panel-body .price.no-discounts::after, html[lang="en-gb"] #catalogueResults > .panel > .panel-body .price.no-discounts::after, html[lang="en-ca"] #catalogueResults > .panel > .panel-body .price.no-discounts::after { content: " PER LEARNER"; } #catalogueResults > .panel > .panel-body .course-info-container > div.tc-btn-group { order: 3; } #catalogueResults > .panel > .panel-body .course-info-container > div .btn { padding: 0px 20px; font-size: 1em; line-height: 40px; border-radius: 0px; } #catalogueResults > .panel > .panel-heading .activity-type, #catalogueResults > .panel > .panel-body .course-code, #catalogueResults > .panel > .panel-body .course-start, #catalogueResults > .panel > .panel-body .course-status, #catalogueResults > .panel > .panel-body .price.no-discounts .label, #catalogueResults > .panel > .panel-body .tc-btn-group .btn.enter { display: none !important; visibility: hidden !important; } /* Catalogue details -----------------------------------------------------------------------------------------*/ /* Course banner image */ #catalogue_details .description-column > img.img-coursebanner { margin-bottom: 60px; } /* description */ #catalogue_details .description-column > .description { margin-bottom: 60px; } #catalogue_details .description-column > .description h2, #catalogue_details .description-column > .description h4, #catalogue_details .description-column > .description-benefits h2, #catalogue_details .custom-fields .custom-field-questions > h2, #catalogue_details .custom-fields > h2, #catalogue_details .custom-fields .custom-field.Support_and_Troubleshooting h2, #catalogue_details .custom-fields .custom-field.Support_and_Troubleshooting h3, #catalogue_details .custom-fields .custom-field .modal h3, #catalogue_details .description-column > .custom-fields > .custom-field h4, #catalogue_details .overview-column .custom-field.Related_Links h3 { color: var(--secondary-darkgreen) !important; font-size: 1.6em; font-weight: 700; line-height: 1.25; padding-bottom: 0.2em; font-family: "NexaRustSansBlack"; } #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column > .description h2, #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column > .description h4, #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column > .description-benefits h2, #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column > .custom-fields > h2, #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field-questions > h2, #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field.Support_and_Troubleshooting h3, #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field .modal h3, #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column > .custom-fields > .custom-field h4, #catalogue_details > .row[data-coursecategory="knowrisk"] .overview-column .custom-field.Related_Links h3 { color: #b45e16 !important; } #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column > .description h2, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column > .description h4, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column > .description-benefits h2, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column > .custom-fields > h2, #catalogue_details > .row[data-coursecategory="groundwork pro"] .custom-fields .custom-field-questions > h2, #catalogue_details > .row[data-coursecategory="groundwork pro"] .custom-fields .custom-field.Support_and_Troubleshooting h3, #catalogue_details > .row[data-coursecategory="groundwork pro"] .custom-fields .custom-field .modal h3, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column > .custom-fields > .custom-field h4, #catalogue_details > .row[data-coursecategory="groundwork pro"] .overview-column .custom-field.Related_Links h3 { color: #167788 !important; } /* benefits */ #catalogue_details .description-column .description-benefits .row-flex.row-benefits { display: flex; justify-content: space-evenly; flex-wrap: nowrap; align-items: flex-start; gap: 20px; } #catalogue_details .description-column .description-benefits .row-flex.row-benefits > .benefit { flex: 1 1 0; /* Grow: 1, Shrink: 1, Basis: 0 */ box-sizing: border-box; text-align: center; } #catalogue_details .description-column .description-benefits .row-flex.row-benefits > .benefit h4 { color: var(--dark-text); font-size: 1.35em; font-weight: 700; line-height: 1.35; letter-spacing: 0.1em; font-family: "NexaRustSansBlack"; } #catalogue_details .description-column .description-benefits .row-flex.row-benefits > .benefit img.benefit-icon { width: 128px; max-width: 100%; } /* register aka enrollment */ #catalogue_details .description-column .panel.enrollment-details { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; margin: 60px 0px; border: none 0px; box-shadow: none; } #catalogue_details .description-column .panel.enrollment-details .panel-heading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0px 8%; border-right: solid 5px var(--primary-green); background: #5f8f32 url(https://on1call.blob.core.windows.net/medialibrary/c101db45-6423-4aae-8198-2e12ab1e445c/a0102e7e-dc0f-4d65-9950-95aa74fd1b1e/1/a0102e7e-dc0f-4d65-9950-95aa74fd1b1e.png) repeat; } #catalogue_details > .row[data-coursecategory=""] .description-column .panel.enrollment-details .panel-heading { display: none; } #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .panel.enrollment-details .panel-heading { background: transparent url(https://on1call.blob.core.windows.net/learnerview/00000000-0000-0000-0000-000000000000/advanced/knowrisk-register-bkrd-1.svg) no-repeat; background-size: cover; height: 196px; min-height: 196px; border-right: none 0px; } #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column .panel.enrollment-details .panel-heading { background: transparent url(https://on1call.blob.core.windows.net/medialibrary/c101db45-6423-4aae-8198-2e12ab1e445c/d87306fc-f81d-41a6-8aa6-0156bf35ce94/1/d87306fc-f81d-41a6-8aa6-0156bf35ce94.png) no-repeat; background-size: 100% 100%; border-right: none 0px; } #catalogue_details .description-column .panel.enrollment-details .panel-heading img.icon-register { width: 109px; max-width: 100%; } #catalogue_details .description-column .panel.enrollment-details .btn.purchase, #catalogue_details .description-column .panel.enrollment-details .btn.purchase-bulk { background-color: transparent; border: none 0px; color: white; font-size: 1.6em; font-weight: 700; line-height: 1.35; font-family: "NexaRustSansBlack"; padding: 0px; border-bottom: dashed 2px; border-radius: 0px; } #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .btn.purchase { color: #211f20; } #catalogue_details .description-column .panel.enrollment-details .panel-heading .btn.purchase:hover, #catalogue_details .description-column .panel.enrollment-details .btn.purchase-bulk:hover { border-bottom-color: transparent; } #catalogue_details .description-column .panel.enrollment-details .panel-body, #catalogue_details .description-column .panel.enrollment-details .panel-body:hover { flex-grow: 1; min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; background: #d6e6c6 url(https://on1call.blob.core.windows.net/learnerview/00000000-0000-0000-0000-000000000000/advanced/dark-grass.svg) bottom repeat-x; } #catalogue_details > .row[data-coursecategory=""] .description-column .panel.enrollment-details .panel-body, #catalogue_details > .row[data-coursecategory=""] .description-column .panel.enrollment-details .panel-body:hover { min-height: 1em; background: none; padding: 0px; } #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .panel.enrollment-details .panel-body, #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .panel.enrollment-details .panel-body:hover { background: transparent url(https://on1call.blob.core.windows.net/learnerview/00000000-0000-0000-0000-000000000000/advanced/knowrisk-register-bkrd-2.svg) no-repeat; background-size: auto 100%; height: 196px; min-height: 196px; justify-content: center; } #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column .panel.enrollment-details .panel-body, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column .panel.enrollment-details .panel-body:hover { background: #3bc1cf; justify-content: center; } #catalogue_details .description-column .panel.enrollment-details .panel-body .price.no-discounts { display: flex; align-items: center; } #catalogue_details .description-column .panel.enrollment-details .panel-body .price.no-discounts span { color: var(--primary-green); font-size: 56px; font-family: "NexaRustSansBlack"; } #catalogue_details .description-column .panel.enrollment-details .panel-body .price.no-discounts:after { content: "+HST"; font-weight: bold; } #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .panel.enrollment-details .panel-body .price.no-discounts span, #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .panel.enrollment-details .panel-body .price.no-discounts:after { color: #ee8b3e !important; } #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column .panel.enrollment-details .panel-body .price.no-discounts span, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column .panel.enrollment-details .panel-body .price.no-discounts:after { color: #1e1d1b !important; } #catalogue_details .description-column .panel.enrollment-details .panel-body .btn.purchase-bulk { margin-top: auto; text-decoration-style: dashed !important; font-size: 1.3em; } #catalogue_details > .row[data-coursecategory="knowrisk"] .description-column .panel.enrollment-details .panel-body .btn.purchase-bulk, #catalogue_details > .row[data-coursecategory="groundwork pro"] .description-column .panel.enrollment-details .panel-body .btn.purchase-bulk { margin-top: 1em; } /* Custom metadata */ #catalogue_details .custom-fields { display: flex; flex-direction: column; flex-wrap: nowrap; } #catalogue_details .custom-fields .custom-field { margin-bottom: 30px; padding-bottom: 30px; border-bottom: dotted 6px #ecd7c5; } /* #catalogue_details .custom-fields .custom-field:last-child { border-bottom: none 0px; } */ #catalogue_details .custom-fields .custom-field.Training_Program_Details { order: 1; } #catalogue_details .custom-fields .custom-field.Questions { order: 2; } #catalogue_details .custom-fields .panel.enrollment-details { order: 3; } #catalogue_details .custom-fields .custom-field.Support_and_Troubleshooting { order: 4; } #catalogue_details .description-column > .custom-fields > .custom-field h4 { font-size: 1.35em !important; color: var(--secondary-darkgreen) !important; } #catalogue_details .custom-fields .custom-field.Training_Program_Details > div > value > ul { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 4em; } #catalogue_details .custom-fields .custom-field.Training_Program_Details > div > value > ul > li { flex: 0 0 45%; margin-left: -1em; } #catalogue_details .custom-fields .custom-field.Training_Program_Details > div > value > ul > li::marker { color: var(--FieryOrange); } #catalogue_details .custom-fields .custom-field.Training_Program_Details img.icon-syllabus[src*="groundwork pro-syllabus.svg"], #catalogue_details .custom-fields .custom-field.Training_Program_Details img.icon-syllabus[src*="groundwork_pro-syllabus.svg"] { display: none; visibility: hidden; } #catalogue_details .custom-fields .custom-field.Training_Program_Details .modal ul li { list-style-type: initial !important; display: list-item !important; } #catalogue_details .custom-fields .custom-field.Questions .row-flex.row-questions .question { display: flex; column-gap: 30px; align-items: flex-start; padding-bottom: 30px; } #catalogue_details .custom-fields .custom-field.Questions .row-flex.row-questions .question h4 { font-size: 1.6em; font-weight: 500; line-height: 1.35; letter-spacing: 0.1em; font-family: "BrixtonLead"; } #catalogue_details .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-who + div h4 { color: #a34808 !important; } #catalogue_details .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-howlong + div h4 { color: #167788 !important; } #catalogue_details .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-certificate + div h4 { color: #5f8f32 !important; } #catalogue_details .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-where + div h4 { color: #154678 !important; } #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-who + div h4, #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-certificate + div h4 { color: #b45e16 !important; } #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-howlong + div h4, #catalogue_details > .row[data-coursecategory="knowrisk"] .custom-fields .custom-field.Questions .row-flex.row-questions .question img.question-icon.icon-where + div h4 { color: #211f20 !important; } #catalogue_details .custom-fields .custom-field.Support_and_Troubleshooting h3 { display: block !important; visibility: visible !important; } #catalogue_details .custom-fields .custom-field.Program_Topics { order: 4; } #catalogue_details .custom-fields .custom-field.Online_Course_Duration { order: 5; } #catalogue_details .custom-fields .custom-field.Pass_Mark { order: 6; } #catalogue_details .custom-fields .custom-field.Certification_of_Completion { order: 7; } #catalogue_details .custom-fields .custom-field.Compatibility { order: 8; } #catalogue_details .overview-column .custom-field.Related_Links { background-color: var(--VeryLightGreen); padding: 20px 36px 120px 36px; position: relative; overflow: hidden; } #catalogue_details .overview-column .custom-field.Related_Links > * { position: relative; } #catalogue_details .overview-column .custom-field.Related_Links ul { display: block; list-style-type: none; padding: 0px; margin: 15px 0px 0px 0px; } #catalogue_details .overview-column .custom-field.Related_Links ul li { display: block; list-style-type: none; padding: 0px; margin: 0px 0px 0.5em 0px; } #catalogue_details .overview-column .custom-field.Related_Links a { color: var(--secondary-darkgreen); text-transform: uppercase; } #catalogue_details .overview-column .custom-field.Related_Links a.active { background-color: var(--secondary-darkgreen); color: white; padding: 5px 12px; border-radius: 4px; display: block; text-decoration: none; } /* #catalogue_details >.row[data-coursecategory="knowrisk"] #catalogue_details .overview-column .custom-field.Related_Links a { color: var(--secondary-darkgreen); text-transform: uppercase; padding: 5px 0px; } #catalogue_details >.row[data-coursecategory="groundowork pro"] #catalogue_details .overview-column .custom-field.Related_Links a { color: var(--secondary-darkgreen); text-transform: uppercase; padding: 5px 0px; } */ #catalogue_details .overview-column .custom-field.Related_Links > img.grass_bg { content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: 0; filter: invert(100%) brightness(200%); z-index: 0; } #catalogue_details .panel.overview, #catalogue_details .panel.overview .panel-body { padding: 0px; border: none 0px; box-shadow: none; } #catalogue_details .panel.enrollment-details .btn + .btn { margin-top: 1em; } #catalogue_details .custom-fields .custom-field.Course_Banner, #catalogue_details .custom-fields .custom-field.Benefits, #catalogue_details .custom-fields .custom-field.Course_Category, #catalogue_details .custom-fields .custom-fields > .custom-field.Syllabus, #catalogue_details .custom-fields .custom-field.Related_Links, #catalogue_details .description-column .custom-fields .custom-field > h3, #catalogue_details .custom-fields .custom-field.Questions value, #catalogue_details .description-column .panel.enrollment-details .panel-body .price.no-discounts .label, #catalogue_details .description-column .panel.enrollment-details .panel-body .currency-note, #catalogue_details .description-column .panel.enrollment-details .panel-body br, #catalogue_details .description-column > hr, #catalogue_details .description-column > table, #catalogue_details .description-column > table tr > *:last-child, #catalogue_details .panel.overview .panel-heading, #catalogue_details .panel.overview .panel-body > *, #catalogue_details .panel.key-dates { display: none; visibility: hidden; } /* Activity details (post-enrollment) */ #mycourse #myActivityTabs { margin: 0px 15px; } #mycourse #myActivityTabContent #about .marquee img { max-width: 300px; margin-right: 30px; } #mycourse #myActivityTabContent #home { padding: 15px 0px; margin: 0px -15px; } #mycourse .activity-overview .activity_summary_info #DescriptionBox.collapsed { max-height: 200px; overflow: hidden; position: relative; } #mycourse .activity-overview .activity_summary_info .custom-fields { margin: 0px 0px 30px 0px; } #mycourse .activity-overview .activity-info-container { justify-content: flex-start; margin-bottom: 30px; } #mycourse .custom-fields h6, #mycourse .activity-info-container h6 { font-family: var(--font-family-body); letter-spacing: 0px; font-weight: 800; } #mycourse .row-overview .activity-overview > .panel > .panel-body { background-color: transparent; } #mycourse .row-overview .activity-overview > .panel > .panel-body > .row { display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: row; justify-content: flex-start; gap: 24px 32px; } /* doughnut first, centered in its own lane; bootstrap column sizing/padding neutralized by the flex layout (#98589) */ #mycourse .row-overview .activity-overview > .panel > .panel-body > .row > .activity_progress_visuals { flex: 0 0 220px; padding-left: 0; padding-right: 0; overflow: visible !important; display: flex; flex-direction: column; flex-wrap: nowrap; row-gap: 30px; align-items: center; } #mycourse .row-overview .activity-overview > .panel > .panel-body > .row > .activity_summary_info { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; } /* <=992px stacked: doughnut first + centered, info full width below (#98589) */ @media (max-width: 992px) { #mycourse .row-overview .activity-overview > .panel > .panel-body > .row > .activity_progress_visuals { order: -1; /* stacked: doughnut first, centered */ margin-left: auto; margin-right: auto; } #mycourse .row-overview .activity-overview > .panel > .panel-body > .row > .activity_summary_info { flex: 1 1 100%; } } #mycourse .row-overview .activity-overview > .panel > .panel-body > .row > .activity_progress_visuals, #mycourse .row-overview .activity-overview .activity_progress_visuals .doughnut.progress_breakdown, #mycourse .row-overview .activity-overview .activity_progress_visuals .doughnut.progress_completed { width: 220px !important; } #mycourse .row-overview .activity_progress_visuals .doughnut.progress_breakdown, #mycourse .row-overview .activity_progress_visuals .doughnut.progress_completed { position: relative; height: 200px !important; } /* chart + label overlay: container is a fixed 220x200 box, chart fills it, label floats over the ring hole — the static 200px label used to push the chart under the container's max-height clip (#98589) */ #mycourse .row-overview .activity_progress_visuals .doughnut.progress_breakdown .chart.ct-chart, #mycourse .row-overview .activity_progress_visuals .doughnut.progress_completed .chart.ct-chart { position: absolute; inset: 0; } #mycourse .row-overview .activity_progress_visuals .doughnut.progress_breakdown .doughnut-label, #mycourse .row-overview .activity_progress_visuals .doughnut.progress_completed .doughnut-label { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; height: auto; padding-top: 0px; pointer-events: none; transform: none; /* lpdetails.css centers via top:50%+translateY(-50%) — kill it */ } #mycourse .row-overview .activity_progress_visuals .doughnut.progress_breakdown .doughnut-label .d-num { line-height: 1em; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block[lock="lock"] > .lock { position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 3em; margin: 0px; text-align: center; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block[lock="lock"] > .panel.activity { position: relative; opacity: 0.3; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .panel-body > div.btn-group { display: flex; column-gap: 10px; } #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .panel-body > div.btn-group .btn { border-radius: 0px; } #mycourse .activity-overview .activity_summary_info .course-buttons, #mycourse #learning_path_nav, #mycourse .activity-group-progress { padding: 0px 15px; } /* #mycourse .activity-overview .activity_summary_info .custom-fields > div[data-customfield], */ #mycourse .custom-fields .custom-field__metadata[data-customfield="Course_Banner"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Course_Category"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Benefits"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Questions"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Support_and_Troubleshooting"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Training_Program_Details"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Syllabus"], #mycourse .custom-fields .custom-field__metadata[data-customfield="Related_Links"], #mycourse .row-content .panel.progress-breakdown > .panel-body:empty, #mycourse .row.Learning_Path .lp_activities .tab-pane .activity_block .activity-type, #mycourse .row-overview .activity_progress_visuals .doughnut.progress_breakdown .doughnut-label br { display: none; visibility: hidden; } .MyCodes table.coupons .coupon-type, .MyCodes table.coupons .coupon-code, .MyCodes table.coupons .actions .btn.share { display: none !important; visibility: hidden !important; } /* Registration */ fieldset#disclaimerFieldset #disclaimerDiv > span { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; column-gap: 5px; } /*--Fonts---------------------------------------------------------*/ html body { font-family: var(--font-family-body); color: var(--dark-text); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-feature-settings: "lnum"; } body form, body textarea, body input, body select { font-family: var(--font-family-body); font-weight: 400; line-height: 1.5em; } html body b { font-weight: 700; } body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--font-family-heading); line-height: 1.3; margin-top: 1.6rem; letter-spacing: 0.1em; } body h1 { font-size: 2.7rem; font-weight: 400; margin-top: 4rem; } body h2 { font-size: 2.4rem; font-weight: 400; } body h3 { font-size: 2.1rem; font-weight: 400; } body h4 { font-size: 1.6rem; font-weight: 400; } body h5 { font-size: 1.4rem; font-weight: 400; } /* Montserrat */ /* BrixtonLead */ @font-face { font-family: 'BrixtonLead'; src: url('https://cdn.thinkingcap.com/cdn/fonts/BrixtonLead/brixton-lead-vector.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'BrixtonLead'; src: url('https://cdn.thinkingcap.com/cdn/fonts/BrixtonLead/Brixton-Lead-Vector.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } /* Nexa Rust Sans - Black */ @font-face { font-family: 'NexaRustSansBlack'; src: url('https://cdn.thinkingcap.com/cdn/fonts/Nexa-Rust-Sans/Nexa-Rust-Sans-Black.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } /* Nexa Rust Sans - Black 02 */ @font-face { font-family: 'NexaRustSansBlack-02'; src: url('https://cdn.thinkingcap.com/cdn/fonts/Nexa-Rust-Sans/Nexa-Rust-Sans-Black-02.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* #94116 */ .completion .table-span-value { display: block; float: unset; margin-left: 0; } /* #97709 */ body.StudentMyCourse .col-md-8.description-column { max-width: 100%; width: 100%; } body.StudentMyCourse .col-md-8.description-column .btn-unstiled { text-align: left !important; } body.StudentMyCourse [type="KnowR!sk"] .purchase.btn-unstiled, body.StudentMyCourse [type="KnowR!sk"] .purchase-bulk.btn-unstiled { background: #d67116; padding: 5px 25px; color: white; } body.StudentMyCourse [type="KnowR!sk"] .purchase.btn-unstiled:hover, body.StudentMyCourse [type="KnowR!sk"] .purchase-bulk.btn-unstiled:hover { background: #b45e16; } body.StudentMyCourse [type="GroundWork"] .purchase.btn-unstiled, body.StudentMyCourse [type="GroundWork"] .purchase-bulk.btn-unstiled { background: #7eba00; padding: 5px 25px; color: white; } body.StudentMyCourse [type="GroundWork"] .purchase.btn-unstiled:hover, body.StudentMyCourse [type="GroundWork"] .purchase-bulk.btn-unstiled:hover { color: #215732; } body.StudentMyCourse .two-columns { display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: 20px; } body.StudentMyCourse .two-columns .two-columns__marquee-column { flex-basis: 250px; display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; } #catalogue_details .description-column > img.img-coursebanner { width: 100%; } #catalogue_details .custom-fields .panel.enrollment-details { border-bottom: dotted 6px #ecd7c5; padding-bottom: 90px; margin-bottom: 40px; } @media (max-width: 768px) { body.StudentMyCourse .two-columns { flex-direction: column; } body.StudentMyCourse .two-columns .two-columns__marquee-column { align-items: center; } .panel.enrollment-details { flex-direction: column; } #catalogue_details .custom-fields .custom-field.Training_Program_Details > div > value ul { flex-direction: column; row-gap: 10px; } } /* ========================================================================== ODA rebrand — footer + Request a Locate + states + responsive (#98589) Font note: Proxima Nova is commercial — load only if ODA provides a licensed kit; Montserrat (already imported by the template) is the free metric-compatible fallback. Benton Sans Compressed -> Oswald. ========================================================================== */ :root { --oda-green: #005245; --oda-deep: #153833; --oda-tan: #b89475; --oda-pale: #ecd9c7; --oda-lime: #c8e982; --oda-vivid: #7ebc00; --oda-orange: #ff9219; --oda-terra: #a0422e; --oda-slate: #363d47; --oda-font-body: 'Proxima Nova', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oda-font-condensed: 'Benton Sans Compressed', 'Oswald', 'Montserrat', sans-serif; } /* --- Headings: geometric grotesque, ExtraBold for hero level ------------- */ body h1, body h2, body h3, body h4 { font-family: var(--oda-font-body); color: var(--oda-deep); letter-spacing: 0.01em; } body h1 { font-weight: 800; } body h2 { font-weight: 800; } body h3 { font-weight: 700; } body h4 { font-weight: 400; } /* Preheader / eyebrow style — medium caps, letterspaced */ .oda-preheader { font-family: var(--oda-font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--oda-green); } /* --- Main menu: caps like ontariodigauthority.ca ------------------------ */ #masthead #main_menu_bar .navbar-default .navbar-nav > li > a { font-family: var(--oda-font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } /* --- Request a Locate — lime CTA in the menu ----------------------------- */ #masthead #main_menu_bar .navbar-default .navbar-nav > li > a.oda-request-locate, #masthead #main_menu_bar .navbar-default .navbar-nav > li.oda-request-locate > a { background-color: var(--oda-lime); color: var(--oda-deep) !important; font-weight: 700; border-radius: 2px; padding: 10px 18px; margin: 6px 0 6px 12px; display: inline-flex; align-items: center; gap: 8px; } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a.oda-request-locate::after, #masthead #main_menu_bar .navbar-default .navbar-nav > li.oda-request-locate > a::after { content: "\2192"; /* → */ font-weight: 700; } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a.oda-request-locate:hover, #masthead #main_menu_bar .navbar-default .navbar-nav > li > a.oda-request-locate:focus-visible, #masthead #main_menu_bar .navbar-default .navbar-nav > li.oda-request-locate > a:hover, #masthead #main_menu_bar .navbar-default .navbar-nav > li.oda-request-locate > a:focus-visible { background-color: var(--oda-vivid); color: var(--oda-deep) !important; text-decoration: none; } /* --- Generic states -------------------------------------------------------- AA pairings per the brand guide: on lime/vivid -> deep green text; on green -> lime/pale/white text. */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--oda-vivid); outline-offset: 2px; } #masthead a:focus-visible, #masthead .btn:focus-visible { outline-color: var(--oda-lime); } /* --- Footer ---------------------------------------------------------------- */ #footer.container, #footer { background-color: white; color: var(--oda-slate); font-family: var(--oda-font-body); } #footer a { color: var(--oda-green); } #footer a:hover { color: var(--oda-deep); } .oda-footer { font-family: var(--oda-font-body); color: var(--oda-slate); } .oda-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 28px 0; } .oda-footer__logo img { width: 220px; max-width: 60vw; height: auto; display: block; } .oda-footer__cta { margin-left: auto; } .oda-footer__cta a { display: inline-flex; align-items: center; gap: 10px; background-color: var(--oda-green); color: white !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95em; padding: 12px 22px; border-radius: 2px; text-decoration: none; } .oda-footer__cta a::after { content: "\2192"; } .oda-footer__cta a:hover, .oda-footer__cta a:focus-visible { background-color: var(--oda-deep); text-decoration: none; } .oda-footer__nav { display: flex; gap: 56px; margin-left: auto; } .oda-footer__navcol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .oda-footer__navcol a { color: var(--oda-green); font-weight: 600; text-decoration: none; } .oda-footer__navcol a:hover, .oda-footer__navcol a:focus-visible { color: var(--oda-deep); text-decoration: underline; } .oda-footer__bottom { border-top: 1px solid var(--oda-tan); margin-top: 8px; padding: 16px 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .oda-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.85em; } .oda-footer__legal a { color: var(--oda-green); font-weight: 600; } .oda-footer__legal .oda-footer__sep { color: var(--oda-tan); } .oda-footer__social { margin-left: auto; display: flex; gap: 8px; list-style: none; padding: 0; } .oda-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; background-color: var(--oda-terra); color: white !important; text-decoration: none; } .oda-footer__social a:hover, .oda-footer__social a:focus-visible { background-color: var(--oda-deep); } .oda-footer__social svg { width: 16px; height: 16px; fill: currentColor; } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 991px) { .oda-footer__row { flex-direction: column; align-items: flex-start; gap: 18px; } .oda-footer__cta, .oda-footer__nav { margin-left: 0; } .oda-footer__nav { gap: 36px; flex-wrap: wrap; } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a.oda-request-locate, #masthead #main_menu_bar .navbar-default .navbar-nav > li.oda-request-locate > a { margin: 8px 0; justify-content: center; width: 100%; } } @media (max-width: 575px) { .oda-footer__nav { flex-direction: column; gap: 18px; } .oda-footer__cta a { width: 100%; justify-content: center; } .oda-footer__social { margin-left: 0; } } /* --- Footer inside the XSL .logo-copyright row ---------------------------- */ #footer .row.logo-copyright { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding: 28px 0 8px; } #footer .row.logo-copyright .footer-logo { flex: 0 0 auto; text-align: left; } #footer .row.logo-copyright .footer-logo img { width: 220px; max-width: 55vw; height: auto; display: block; } #footer .row.logo-copyright .copyright { flex: 1 1 420px; text-align: left; } #footer .row.logo-copyright .copyright .oda-footer__row { padding: 0 0 18px; } @media (max-width: 767px) { #footer .row.logo-copyright { flex-direction: column; } } /* Request a Locate — keyed to the page GUID (menu item + footer CTA) */ #masthead #main_menu_bar .navbar-default .navbar-nav > li > a[href*="0f691d9a-3e07-4df7-b210-11d70a8efe28"] { background-color: var(--oda-lime); color: var(--oda-deep) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; padding-top: 10px; padding-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a[href*="0f691d9a-3e07-4df7-b210-11d70a8efe28"]::after { content: "\2192"; font-weight: 700; } #masthead #main_menu_bar .navbar-default .navbar-nav > li > a[href*="0f691d9a-3e07-4df7-b210-11d70a8efe28"]:hover, #masthead #main_menu_bar .navbar-default .navbar-nav > li > a[href*="0f691d9a-3e07-4df7-b210-11d70a8efe28"]:focus-visible { background-color: var(--oda-vivid); color: var(--oda-deep) !important; text-decoration: none; } /* ========================================================================== ODA login page — fixed card on brand gradient (#98589) ========================================================================== */ /* her body flex rule (space-evenly) creates huge gaps on short pages */ html > body.Login { display: block !important; } /* brand background: deep-green diagonal wash */ html:has(body.Login), body.Login { background: #153833 !important; } body.Login { background: radial-gradient(1200px 600px at 85% -10%, rgba(200, 233, 130, 0.1), rgba(200, 233, 130, 0) 60%), linear-gradient(155deg, #153833 0%, #005245 58%, #153833 100%) !important; background-attachment: fixed !important; min-height: 100vh; } /* the JS-built header is empty on the login page — hide it */ body.Login #masthead .row.main-brand { display: none !important; } body.Login #headerMenu #headerTopMenu, body.Login #headerMenu #headerBottomMenu { background: transparent !important; } body.Login #masthead { margin-top: 0 !important; } /* content column centers the card */ body.Login > #content.container { background: transparent !important; display: flex !important; justify-content: center; max-width: 100% !important; width: 100% !important; padding: 0 16px !important; } body.Login > #content.container > .row { width: 100%; display: flex; justify-content: center; } /* hide the (empty) login image slot */ body.Login .log-in-image { display: none !important; } /* the card */ body.Login .log-in-form { flex: 0 1 460px; max-width: 460px; width: 100%; background: white; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); padding: 36px 40px 28px !important; margin: 7vh auto 6vh !important; float: none !important; } /* card carries the full-colour logo */ body.Login .log-in-form::before { content: ""; display: block; height: 58px; margin: 0 auto 22px; background-image: url("/FormatResource.ashx/programLearnerView_6986a8a8-8d3e-41ed-b84e-9ced3b563953/footerlogo.gif"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* title + welcome */ body.Login .log-in-form .login_text h2, body.Login .log-in-form h2 { font-family: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', sans-serif; font-weight: 800; color: #153c35; letter-spacing: 0.01em; margin: 0 0 6px; text-align: center; } body.Login .log-in-form .login_text p, body.Login .log-in-form .login_text { color: #363d47; text-align: center; margin-bottom: 18px; } /* fields */ body.Login .log-in-form .form-group { margin-bottom: 16px !important; } body.Login .log-in-form .control-label, body.Login .log-in-form label { color: #153c35 !important; font-weight: 700 !important; } body.Login .log-in-form .form-control { border: 1px solid #b8b8b8; border-radius: 4px; height: 44px; box-shadow: none; } body.Login .log-in-form .form-control:focus { border-color: #005245; box-shadow: 0 0 0 2px rgba(126, 188, 0, 0.35); outline: none; } /* submit */ body.Login .log-in-form .login_button .btn, body.Login .log-in-form input[type="submit"].btn { background-color: #005245 !important; border: none; color: white !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; padding: 12px 34px; min-width: 170px; } body.Login .log-in-form .login_button .btn:hover, body.Login .log-in-form .login_button .btn:focus-visible { background-color: #153c35 !important; outline: 2px solid #c8e982; outline-offset: 2px; } /* secondary links */ body.Login .log-in-form a { color: #005245; font-weight: 600; } body.Login .log-in-form a:hover { color: #153c35; } /* federation buttons block keeps card width too */ body.Login #federationSelectDiv { max-width: 460px; margin: 0 auto; } @media (max-width: 575px) { body.Login .log-in-form { padding: 26px 22px 20px !important; margin: 4vh auto !important; } body.Login .log-in-form::before { height: 46px; } } /* login_page wrapper is white in the template — let the gradient through */ body.Login #login_page, body.Login #mainDiv { background: transparent !important; } /* --- Login masthead: one line — logo left, language right ---------------- */ body.Login #headerMenu { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1170px; margin: 0 auto; padding: 14px 20px; } body.Login #headerMenu #headerTopMenu { order: 2; background: transparent !important; width: auto; } body.Login #headerMenu #headerBottomMenu { order: 1; background: transparent !important; width: auto; } body.Login #headerMenu #headerTopMenu .container, body.Login #headerMenu #headerBottomMenu .container { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } body.Login #masthead #logo { padding: 0 !important; } body.Login #masthead #logo img { width: 170px; max-width: 44vw; height: auto; } body.Login #masthead #languageSelection { margin: 0 !important; width: auto; height: auto; padding: 0; } body.Login #masthead #languageSelection .btn.btn-link { color: white !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 4px; } body.Login #masthead #languageSelection .btn.btn-link:hover { color: #c8e982 !important; text-decoration: none; } /* center the H1 like the welcome text */ body.Login .log-in-form > h1 { text-align: center; font-family: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', sans-serif; font-weight: 800; color: #153c35; letter-spacing: 0.01em; margin: 0 0 6px; } @media (max-width: 575px) { body.Login #headerMenu { padding: 10px 14px; } body.Login #masthead #logo img { width: 140px; } } /* short pages: her body flex space-evenly spreads children with big empty gaps (seen on Login and short content pages) — pack from the top instead */ html > body { justify-content: flex-start !important; } /* mobile login: her #login_page 45px side padding squeezes the card; full-width submit inside the card */ @media (max-width: 767px) { body.Login.Login_compressed #content.container #login_page { padding: 0 !important; } } body.Login .log-in-form .login_button .btn, body.Login .log-in-form input[type="submit"].btn { width: 100%; min-width: 0; } /* --- Top bar: links + Request a Locate --------------------------------- */ #masthead #headerTopMenu .container { display: flex; align-items: center; gap: 18px; } #masthead #headerTopMenu .oda-toplink { color: white; font-family: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; } #masthead #headerTopMenu .oda-toplink:hover, #masthead #headerTopMenu .oda-toplink:focus-visible { color: #c8e982; text-decoration: none; } #masthead #headerTopMenu a.Request_a_Locate { background-color: #c8e982; color: #153833 !important; font-family: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; } #masthead #headerTopMenu a.Request_a_Locate::after { content: "\2192"; font-weight: 700; } #masthead #headerTopMenu a.Request_a_Locate:hover, #masthead #headerTopMenu a.Request_a_Locate:focus-visible { background-color: #7ebc00; color: #153833 !important; text-decoration: none; } /* profile dropdown: her .caret is display:block and drops below the icon */ #masthead #login_info .btn.profile-dropdown { display: inline-flex; align-items: center; gap: 4px; } #masthead #login_info .btn.profile-dropdown .caret { display: inline-block; margin: 0; } @media (max-width: 991px) { #masthead #headerTopMenu .container { flex-wrap: wrap; gap: 10px 14px; } #masthead #headerTopMenu a.Request_a_Locate { margin-left: 0; } } /* --- Top bar refinement pack (#98589) -------------------------------------- NOTE dotless: calc(var()) MUST stay inside ~"..." escapes or the whole served file fails to compile. */ /* first-line items smaller than the second line */ #masthead #headerTopMenu .oda-toplink, #masthead #headerTopMenu a.Request_a_Locate { font-size: 0.7em; } /* cart: smaller icon, centered, orange counter badge */ #masthead #cart_icon { display: flex; align-items: center; justify-content: center; position: relative; } #masthead #cart_icon .svg-inline--fa { font-size: calc(15px * var(--font-scale, 1)); } #masthead #cart_icon #cart_count { background-color: #ff9219; color: #153833; width: 10px; height: 10px; top: -4px; left: 15px; position: absolute; font-size: 0.7em; line-height: 10px; text-align: center; font-weight: 700; } /* container pseudo-elements create edge gaps in the masthead bars */ #masthead #headerTopMenu .container::before, #masthead #headerTopMenu .container::after, #masthead #headerBottomMenu .container::before, #masthead #headerBottomMenu .container::after { content: none !important; display: none !important; } /* settings dropdown: no caret at all */ #masthead #login_info .btn.profile-dropdown .caret { display: none !important; } /* language button weight */ #masthead #languageSelection .btn.btn-link { font-weight: 400 !important; font-size: 0.85em; } /* search icon button (replaces the input) */ #masthead #headerTopMenu .oda-search-btn { color: white; display: inline-flex; align-items: center; text-decoration: none; } #masthead #headerTopMenu .oda-search-btn:hover, #masthead #headerTopMenu .oda-search-btn:focus-visible { color: #c8e982; } #masthead #headerTopMenu .oda-search-btn .svg-inline--fa { font-size: calc(12px * var(--font-scale, 1)); } /* top link dropdowns */ #masthead #headerTopMenu .oda-topitem { position: relative; display: inline-flex; align-items: center; } #masthead #headerTopMenu .oda-topdropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 190px; margin: 0; padding: 6px 0; list-style: none; background: #153833; border-radius: 0 0 4px 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); } #masthead #headerTopMenu .oda-topitem:hover .oda-topdropdown, #masthead #headerTopMenu .oda-topitem:focus-within .oda-topdropdown { display: block; } #masthead #headerTopMenu .oda-topdropdown a { display: block; padding: 8px 16px; color: white; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; } #masthead #headerTopMenu .oda-topdropdown a:hover, #masthead #headerTopMenu .oda-topdropdown a:focus-visible { background: #005245; color: #c8e982; text-decoration: none; } @media (max-width: 991px) { #masthead #headerTopMenu .oda-topdropdown { position: static; box-shadow: none; } } /* --- Mobile masthead: one collapse menu (#98589) ------------------------- */ @media (max-width: 991px) { /* top bar is emptied by the JS restructure — hide the husk */ #masthead #headerTopMenu { display: none !important; } /* bottom bar = logo | cog | toggle; no gap — the empty #main_menu_bar row would still reserve 12px around itself when collapsed */ #masthead #headerBottomMenu .container { display: flex; align-items: center; justify-content: space-between; gap: 0; } #masthead #headerBottomMenu .masthead_logo { flex: 0 0 auto; } #masthead #headerBottomMenu .navbar-toggle { display: block !important; margin: 0; border-color: rgba(255, 255, 255, 0.4); } #masthead #headerBottomMenu .navbar-toggle .icon-bar { background-color: white; } #masthead #login_info .btn-group.profile-menu { margin-left: auto; } /* collapse content */ #masthead #main_menu_bar .navbar-collapse { background: #153833; padding: 10px 15px 16px; } #masthead #main_menu_bar .oda-mob-buttons { display: flex; align-items: center; gap: 22px; padding: 6px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 6px; } #masthead #main_menu_bar .oda-mob-buttons #languageSelection { margin: 0; padding: 0; width: auto; height: auto; } #masthead #main_menu_bar .oda-mob-buttons .oda-search-btn, #masthead #main_menu_bar .oda-mob-buttons #cart_icon { color: white; display: inline-flex; align-items: center; } #masthead #main_menu_bar .oda-mob-buttons .oda-search-btn .svg-inline--fa { font-size: calc(11px * var(--font-scale, 1)); } /* tail: divider + top-bar items + RAL */ #masthead #main_menu_bar .oda-mob-tail { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; } #masthead #main_menu_bar .oda-mob-tail .oda-topitem { display: flex; flex-direction: column; align-items: stretch; } #masthead #main_menu_bar .oda-mob-tail .oda-toplink { padding: 10px 0; } /* dropdown children expanded inline on mobile */ #masthead #main_menu_bar .oda-mob-tail .oda-topdropdown { display: block; position: static; box-shadow: none; background: transparent; padding: 0 0 4px 16px; } #masthead #main_menu_bar .oda-mob-tail .oda-topdropdown a { padding: 6px 0; } /* RAL at the very bottom, full width */ #masthead #main_menu_bar .oda-mob-tail a.Request_a_Locate { margin-top: 12px; justify-content: center; padding: 12px 16px; } } /* --- Mobile collapse fixes: vertical list, readable colors (#98589) ------ */ @media (max-width: 991px) { #masthead #main_menu_bar .navbar-collapse .navbar-nav { float: none !important; margin: 0 !important; } #masthead #main_menu_bar .navbar-collapse .navbar-nav > li { float: none !important; display: block !important; } #masthead #main_menu_bar .navbar-collapse .navbar-nav > li > a { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 0 !important; color: white !important; background: transparent !important; } /* tail links were styled for #headerTopMenu — restate for the collapse */ #masthead #main_menu_bar .oda-mob-tail .oda-toplink { color: white; font-weight: 600; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.02em; text-decoration: none; } #masthead #main_menu_bar .oda-mob-tail .oda-toplink:hover, #masthead #main_menu_bar .oda-mob-tail .oda-toplink:focus-visible { color: #c8e982; } #masthead #main_menu_bar .oda-mob-tail .oda-topdropdown a { color: white; font-weight: 600; text-transform: uppercase; font-size: 0.75em; text-decoration: none; } #masthead #main_menu_bar .oda-mob-tail .oda-topdropdown a:hover, #masthead #main_menu_bar .oda-mob-tail .oda-topdropdown a:focus-visible { color: #c8e982; background: transparent; } /* RAL full lime block at the bottom */ #masthead #main_menu_bar .oda-mob-tail a.Request_a_Locate { background-color: #c8e982; color: #153833 !important; font-family: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; display: flex; align-items: center; gap: 8px; text-decoration: none; } #masthead #main_menu_bar .oda-mob-tail a.Request_a_Locate::after { content: "\2192"; font-weight: 700; } #masthead #main_menu_bar .oda-mob-tail a.Request_a_Locate:hover, #masthead #main_menu_bar .oda-mob-tail a.Request_a_Locate:focus-visible { background-color: #7ebc00; color: #153833 !important; } } @media (max-width: 991px) { /* her desktop rule keeps the collapse ul as a horizontal flex — kill it */ #masthead #main_menu_bar nav.navbar > .container > .navbar-collapse > .navbar-nav, #masthead #main_menu_bar .navbar-collapse .navbar-nav { display: block !important; } } @media (max-width: 991px) { /* bottom bar: logo|cog|toggle on line 1, collapse panel full-width below */ #masthead #headerBottomMenu .container { flex-wrap: wrap; } #masthead #headerBottomMenu #main_menu_bar { flex: 1 1 100%; order: 10; background-image: none !important; } } @media (max-width: 991px) { /* flat mobile bar: JS moves .navbar-header next to the logo; panel wraps below */ #masthead #headerBottomMenu .container { flex-wrap: wrap; } #masthead #headerBottomMenu .masthead_logo { flex: 0 0 auto; } #masthead #headerBottomMenu .navbar-header { display: flex; align-items: center; gap: 10px; float: none !important; margin: 0 !important; } #masthead #headerBottomMenu .navbar-toggle { background: transparent !important; float: none !important; } #masthead #headerBottomMenu #main_menu_bar { flex: 1 1 100%; background-image: none !important; } #masthead #headerBottomMenu #main_menu_bar .navbar-collapse { padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 991px) { /* duplicate navbar-header inside the nav + the little green home house */ #masthead #main_menu_bar .navbar-header { display: none !important; } #masthead #headerBottomMenu .home.navbar-brand { display: none !important; } } /* --- Unification + readability pack (#98589) ------------------------------- */ /* top items are
  • now — reset list look in the top bar */ #masthead #headerTopMenu li.oda-topitem { list-style: none; position: relative; display: inline-flex; align-items: center; } /* caret must sit inline with the label (her .caret is display:block) */ #masthead #headerTopMenu .oda-toplink { display: inline-flex; align-items: center; } #masthead #headerTopMenu .oda-toplink .caret { display: inline-block; margin-left: 5px; } /* desktop dropdown panel for the main-menu markup in the top bar */ #masthead #headerTopMenu li.oda-topitem > .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 190px; margin: 0; padding: 6px 0; list-style: none; background: #153833; border-radius: 0 0 4px 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); float: none; border: none; } #masthead #headerTopMenu li.oda-topitem:hover > .dropdown-menu, #masthead #headerTopMenu li.oda-topitem:focus-within > .dropdown-menu, #masthead #headerTopMenu li.oda-topitem.open > .dropdown-menu { display: block; } #masthead #headerTopMenu li.oda-topitem > .dropdown-menu a { display: block; padding: 8px 16px; color: white; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; background: transparent; } #masthead #headerTopMenu li.oda-topitem > .dropdown-menu a:hover, #masthead #headerTopMenu li.oda-topitem > .dropdown-menu a:focus-visible { background: #005245; color: #c8e982; text-decoration: none; } /* profile gear: strip the global .btn look (green bg, 30px padding, 40px line) */ #masthead #login_info .btn.profile-dropdown, #masthead #login_info .btn.profile-dropdown:hover, #masthead #login_info .btn.profile-dropdown:focus, #masthead #login_info .btn.profile-dropdown:active { background: transparent !important; background-color: transparent !important; border: none !important; border-color: transparent !important; padding: 0 !important; line-height: 1 !important; box-shadow: none !important; } #masthead #login_info .btn.profile-dropdown .caret { display: none !important; } @media (max-width: 991px) { /* bootstrap drives the collapse again */ #masthead #main_menu_bar .navbar-collapse { display: none !important; } #masthead #main_menu_bar .navbar-collapse.in { display: block !important; } /* divider between second-line and first-line groups */ #masthead #main_menu_bar .navbar-nav > li.oda-divider { border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 8px 0; list-style: none; } /* open dropdowns inline, readable colors (no gray-on-gray) */ #masthead #main_menu_bar .navbar-nav .dropdown-menu { position: static; float: none; background: transparent; border: none; box-shadow: none; padding: 0 0 6px 16px; } #masthead #main_menu_bar .navbar-nav .dropdown-menu > li > a, #masthead #main_menu_bar .navbar-nav .dropdown-menu a { color: white !important; background: transparent !important; font-weight: 600; text-transform: uppercase; font-size: 0.75em; padding: 7px 0; display: block; } #masthead #main_menu_bar .navbar-nav .dropdown-menu > li > a:hover, #masthead #main_menu_bar .navbar-nav .dropdown-menu > li > a:focus, #masthead #main_menu_bar .navbar-nav .dropdown-menu a:hover, #masthead #main_menu_bar .navbar-nav .dropdown-menu a:focus { color: #c8e982 !important; background: transparent !important; text-decoration: none; } /* RAL compact, not a giant block */ #masthead #main_menu_bar .navbar-nav > li.oda-ral-home { list-style: none; } #masthead #main_menu_bar a.Request_a_Locate { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.75em; margin-top: 10px; width: auto; } } @media (max-width: 991px) { /* collapsed #main_menu_bar was still 50px tall (bootstrap .navbar min-height) */ #masthead #main_menu_bar nav.navbar { min-height: 0 !important; margin-bottom: 0 !important; border: none !important; } /* keep the gear icon-sized so the bar fits on one line */ #masthead #login_info .btn.profile-dropdown { width: auto !important; min-width: 0 !important; } } @media (max-width: 991px) { /* RAL lime block inside the collapse (tail selectors died with the move) */ #masthead #main_menu_bar .navbar-nav > li.oda-ral-home > a.Request_a_Locate, #masthead #main_menu_bar a.Request_a_Locate { background-color: #c8e982 !important; color: #153833 !important; font-family: 'proxima-nova', 'Proxima Nova', 'Lato', 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; text-decoration: none; } #masthead #main_menu_bar .navbar-nav > li.oda-ral-home > a.Request_a_Locate::after, #masthead #main_menu_bar a.Request_a_Locate::after { content: "\2192"; font-weight: 700; } #masthead #main_menu_bar .navbar-nav > li.oda-ral-home > a.Request_a_Locate:hover, #masthead #main_menu_bar a.Request_a_Locate:hover, #masthead #main_menu_bar a.Request_a_Locate:focus-visible { background-color: #7ebc00 !important; color: #153833 !important; text-decoration: none; } } @media (max-width: 991px) { /* RAL compact: the generic nav-link flex stretches it full width — override */ #masthead #main_menu_bar .navbar-nav > li.oda-ral-home > a.Request_a_Locate { display: inline-flex !important; justify-content: flex-start !important; width: auto !important; max-width: 100%; } } @media (max-width: 991px) { /* the nav container is a desktop flex shell — collapse needs full width */ #masthead #main_menu_bar nav.navbar > .container { display: block !important; max-width: none !important; width: 100% !important; padding: 0 !important; } #masthead #main_menu_bar .navbar-collapse { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #masthead #main_menu_bar .navbar-collapse .navbar-nav { width: 100% !important; } } /* --- Round-4 fixes (#98589) ------------------------------------------------ */ /* breadcrumbs.css .dropdown a kills dropdown link paddings — !important */ #masthead .oda-topitem .dropdown-menu > li > a { padding: 8px 16px !important; } /* profile gear: selectors must follow the button everywhere (it leaves #login_info on mobile) */ #masthead .btn.profile-dropdown, #masthead .btn.profile-dropdown:hover, #masthead .btn.profile-dropdown:focus, #masthead .btn.profile-dropdown:active { background: transparent !important; background-color: transparent !important; border: none !important; border-color: transparent !important; padding: 0 !important; line-height: 1 !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; } #masthead .btn.profile-dropdown .caret { display: none !important; } /* RAL side paddings: my own vertical-list rule eats them — restore */ #masthead #main_menu_bar .navbar-nav > li.oda-ral-home > a.Request_a_Locate { padding: 8px 16px !important; } /* hover opens dropdowns on DESKTOP only */ @media (min-width: 992px) { #masthead #headerTopMenu li.oda-topitem:hover > .dropdown-menu, #masthead #headerTopMenu li.oda-topitem:focus-within > .dropdown-menu { display: block; } } /* on mobile: only explicit click (.open via JS) */ @media (max-width: 991px) { #masthead #main_menu_bar .oda-topitem.open > .dropdown-menu { display: block !important; position: static; float: none; background: transparent; border: none; box-shadow: none; } } /* --- Round-5 fixes (#98589) ------------------------------------------------ */ /* breadcrumbs.css ".dropdown a" (display:block; width:100%; padding:0 5px 5px) hits the top-bar dropdown TOGGLES: .oda-toplink never declared padding/width, so the 5px side/bottom padding leaked into Initiatives/About Us. Pin them. */ #masthead #headerTopMenu .oda-topitem > a.oda-toplink { padding: 0; width: auto; } /* second-row menu: last link flush with the content's right edge */ #masthead #main_menu_bar .navbar-default .navbar-nav > li:last-child > a { padding-right: 0; } /* 992–1199px: the whole second-row menu no longer fits on one line — shrink (font-size needs !important: her .navbar-nav a rule carries 0.8em!important) */ @media (min-width: 992px) and (max-width: 1199px) { #masthead #main_menu_bar .navbar-default .navbar-nav > li > a { font-size: 0.75em !important; padding-left: 10px; padding-right: 10px; } #masthead #main_menu_bar .navbar-default .navbar-nav > li:last-child > a { padding-right: 0; } } /* the little green home house must not exist anywhere — a mobile->desktop resize cycle used to resurrect a duplicate navbar-header showing it */ #masthead .home.navbar-brand { display: none !important; } @media (min-width: 992px) { /* stray header left in the bottom bar by a resize cycle (JS also cleans up) */ #masthead #headerBottomMenu > .container > .navbar-header { display: none !important; } } /* --- Footer fixes (#98589) -------------------------------------------------- */ /* the XSL renders its own logo col next to the custom footer — hide it; footerXHTML now carries the logo inside .oda-footer__row itself */ #footer .row.logo-copyright > .footer-logo { display: none !important; } /* the XSL .copyright col squeezes the custom footer to ~480px and stacks the bottom line (legal/privacy/social) into a column — give the custom footer the full container width so the bottom line spans it on one row */ #footer .row.logo-copyright .copyright { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; } /* full-VIEWPORT divider at the footer's top edge: #footer is a Bootstrap .container capped at 1170px, so the line must bleed — the stale Bootstrap clearfix pseudo is repurposed for it; the other one leaves a bottom gap under the flex row and is killed */ #footer { position: relative; } body { overflow-x: hidden; } #footer.container::before { content: "" !important; display: block !important; clear: none !important; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--oda-tan); } #footer.container::after { content: none !important; display: none !important; } /* same stale clearfix pair on the flexed .row inside */ #footer .row.logo-copyright::before, #footer .row.logo-copyright::after { content: none !important; display: none !important; } /* #footer's own Bootstrap padding (16px 15px) goes too; the row's -15px side margins are reined in so the content still lands on the container edges */ #footer.container { padding: 0; } #footer .row.logo-copyright { margin-left: 0; margin-right: 0; } /* one row: logo left, then CTA, then the link columns (markup order) */ .oda-footer__logo { margin-right: auto; } .oda-footer__cta { margin-left: 0; } /* footer CTA: mockup size, BOLD arrow after the text (KnowRisk mockup) */ .oda-footer__cta a { font-size: 0.75em; padding: 12px 16px; } .oda-footer__cta a::before { content: none; } .oda-footer__cta a::after { content: ""; flex: 0 0 auto; width: 13px; height: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* socials must share the copyright's horizontal axis — Bootstrap's ul margin-bottom lifts them off center */ .oda-footer__social { margin: 0 0 0 auto; } /* bigger social icons, same 30px buttons */ .oda-footer__social svg { width: 20px; height: 20px; } /* mockup spacing: clear gap between the CTA and the link columns; the stacked mobile layout keeps a modest 18px rhythm */ @media (min-width: 768px) { .oda-footer__row { gap: 72px; } } @media (max-width: 767px) { .oda-footer__row { gap: 18px; } } /* Privacy Policy: no underline */ .oda-footer__legal a { text-decoration: none; } /* template's 35px line-height on the copyright col tears a huge gap when the legal text wraps to two lines on mobile — spacing belongs in margins/padding */ #footer.container .copyright { line-height: 1.5; } /* no bottom padding on the footer row; bottom line gets its own rhythm */ #footer .row.logo-copyright { padding-bottom: 0; } .oda-footer__bottom { padding: 16px 0 14px; } /* 768–992px: logo left, link columns top-right, CTA right under the links (her <=991px rule turns the row into a column — restore row for this band) */ @media (min-width: 768px) and (max-width: 992px) { .oda-footer__row { flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 18px; } .oda-footer__cta { order: 1; flex: 1 1 100%; display: flex; justify-content: flex-end; margin-left: 0; } } /* --- Button states (#98589) -------------------------------------------------- the template's blanket ".btn:hover" (pale lime #c8e982 + dark text) only PARTIALLY beats .btn-primary's base: the green bg stayed but the text went dark — unreadable. On btn-default the lime was too harsh, with no transition. */ .btn.btn-primary, .btn.btn-default { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active { background-color: #153c35; border-color: #153c35; color: white; } .btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active { background-color: #ecd9c7; border-color: #b89475; color: #153c35; } /* --- Course landing pages: KnowR!sk / GroundWork (#98589) -------------------- JS adds body.oda-coursepage + body.oda-kr|oda-gw ONLY on those two pages (checks #catalogue_details .row[type]) — no other activity inherits these. */ body.oda-kr #catalogue_details { --oda-accent: #ff9219; --oda-accent-dark: #b66000; --oda-support-icon: url("https://on1call.blob.core.windows.net/learnerview/e56ec53a-ec65-45b0-a303-a31d75c51848/banner_icon_support.png"); } body.oda-gw #catalogue_details { --oda-accent: #7ebc00; --oda-accent-dark: #568100; --oda-support-icon: url("https://on1call.blob.core.windows.net/learnerview/e56ec53a-ec65-45b0-a303-a31d75c51848/banner_icon_support_gw.png"); } /* her .custom-fields is a flex COLUMN with order numbers on the fields — pin the mockup sequence explicitly (Related+Why, Teams, Details, banner, Support) */ body.oda-coursepage #catalogue_details .custom-fields .custom-field[class*="Why_Take"] { order: 1; } body.oda-coursepage #catalogue_details .custom-fields .custom-field.Training_for_Teams { order: 2; } body.oda-coursepage #catalogue_details .custom-fields .custom-field.Training_Program_Details { order: 3; } body.oda-coursepage #catalogue_details .custom-fields .oda-cta-banner--big { order: 4; } body.oda-coursepage #catalogue_details .custom-fields .custom-field.Support_and_Troubleshooting { order: 5; } /* she display:none's Related_Links inside .custom-fields — we rebuilt it as the mockup tabs, bring it back */ body.oda-coursepage #catalogue_details .custom-fields .custom-field.Related_Links { display: block; visibility: visible; } /* her orange #b45e16 !important on field h4/h3 — mockup wants dark titles, and the support/modal banners want white; the section titles must also use the condensed heading font (her NexaRustSansBlack is caps-only) */ body.oda-coursepage #catalogue_details > .row[data-coursecategory] .description-column > .custom-fields .custom-field h4 { color: #153833 !important; font-family: var(--font-family-body) !important; font-weight: 800; font-size: 1.9em !important; letter-spacing: 0.05em; } body.oda-coursepage #catalogue_details > .row[data-coursecategory] .custom-fields .custom-field.Support_and_Troubleshooting h3 { color: white !important; font-family: var(--font-family-heading) !important; font-weight: 800; letter-spacing: 0.01em; } body.oda-coursepage #catalogue_details > .row[data-coursecategory] .custom-fields .custom-field .modal h3 { color: white !important; } /* her dotted 6px separators under every custom-field give way to the mockup hairlines; spacing is re-driven by our section rules */ body.oda-coursepage #catalogue_details .custom-fields .custom-field { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* the description's own purchase buttons are replaced by the CTA banners */ body.oda-coursepage .replace.description button[class*="purchase"] { display: none; } /* the LMS course title is hidden (they will add it via the description) */ body.oda-coursepage h1.page-title { display: none; } /* hero: two half columns — text left, course banner right (mockup) */ body.oda-coursepage .oda-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; margin-bottom: 10px; } body.oda-coursepage .oda-hero__text, body.oda-coursepage .oda-hero__img { min-width: 0; } body.oda-coursepage .oda-hero__img img.img-coursebanner { width: 100%; height: auto; display: block; margin: 0; } body.oda-coursepage .replace.description h4, #catalogueResults .panel .panel-body .description-text h4 { font-family: var(--font-family-body); font-weight: 800; text-transform: uppercase; color: #153833; letter-spacing: 0.02em; font-size: 1em; margin: 0 0 10px; } body.oda-coursepage .replace.description p { color: #363d47; line-height: 1.55; } /* meta fields the mockup doesn't use */ body.oda-coursepage .custom-field.Course_Banner, body.oda-coursepage .custom-field.Course_Category, body.oda-coursepage .custom-field.Syllabus { display: none; } /* field h3 titles duplicate the content h4s — hidden; Support keeps its own (it becomes the banner heading). Related_Links leaves .custom-fields (it is the contentwrap rail now) — hide its title too. */ body.oda-coursepage .custom-fields .custom-field > h3, body.oda-coursepage .custom-field.Related_Links > h3 { display: none; } body.oda-coursepage .custom-field.Support_and_Troubleshooting > h3 { display: block; } /* section titles */ body.oda-coursepage .custom-field h4 { font-family: var(--font-family-body); font-size: 1.9em; font-weight: 800; color: #153833; letter-spacing: 0.05em; margin: 0 0 14px; } /* mockup hairlines between the content sections (the platform
    s go away) */ body.oda-coursepage .description-column > hr { display: none; } body.oda-coursepage .custom-field.Training_for_Teams, body.oda-coursepage .custom-field.Training_Program_Details { border-top: 1px solid #b89475; padding-top: 34px; margin-top: 34px; } /* small dark bullets for the Why/Teams lists */ body.oda-coursepage .custom-field ul.oda-checklist { list-style: none; margin: 0 0 12px; padding: 0; } body.oda-coursepage .custom-field ul.oda-checklist li { position: relative; padding-left: 24px; margin: 4px 0; font-weight: 700; } body.oda-coursepage .custom-field ul.oda-checklist li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #153833; } /* --- CTA banner (JS-built; real purchase buttons live inside) -------------- */ body.oda-coursepage .oda-cta-banner { display: flex; align-items: stretch; margin: 30px 0; clear: both; } body.oda-coursepage .oda-cta-banner__left { flex: 0 0 42%; background: var(--oda-accent); display: flex; align-items: center; justify-content: flex-start; gap: 18px; padding: 20px 30px; clip-path: polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%); } body.oda-coursepage .oda-cta-banner__icon { width: 96px; height: auto; display: block; } body.oda-coursepage .oda-cta-banner__title { font-family: var(--font-family-body); font-weight: 800; font-size: 1.7em; line-height: 1.1; color: #153833; } body.oda-coursepage .oda-cta-banner__right { flex: 1 1 auto; background: #153833; margin-left: -46px; padding: 20px 34px 20px 86px; display: flex; align-items: center; justify-content: space-evenly; gap: 26px; clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%); } body.oda-coursepage .oda-cta-banner__offer { text-align: left; } body.oda-coursepage .oda-cta-banner__label { color: var(--oda-accent); font-family: var(--font-family-body); font-weight: 800; font-size: 1em; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; text-align: left; } body.oda-coursepage .oda-cta-banner .btn, #catalogueResults > .panel > .panel-body .course-info-container > div .btn { display: inline-flex; align-items: center; gap: 8px; background-color: #005245 !important; border: none; color: white !important; font-weight: 700; text-transform: none; letter-spacing: 0.03em; font-size: 0.85em; line-height: 1.2; padding: 13px 37px; border-radius: 0; transition: background-color 0.2s ease; } body.oda-coursepage .oda-cta-banner .btn::after, #catalogueResults > .panel > .panel-body .course-info-container > div .btn::after { content: ""; flex: 0 0 auto; width: 12px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } body.oda-coursepage .oda-cta-banner .btn:hover, body.oda-coursepage .oda-cta-banner .btn:focus-visible { background-color: #0a6b58 !important; color: white !important; } /* big banner: same parts, larger, offers stacked */ body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__left { flex-basis: 45%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 36px 44px; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__icon { width: 100px; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__title { font-size: 2.2em; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__right { padding: 28px 40px 28px 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__offer { text-align: left; } /* --- Related Links + Why section ------------------------------------------- */ body.oda-coursepage .oda-contentwrap { display: flex; align-items: flex-start; gap: 34px; position: relative; margin-top: 30px; clear: both; } /* green divider at the very top edge of the whole content wrapper */ body.oda-coursepage .oda-contentwrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 3px solid #005245; } body.oda-coursepage .oda-main { flex: 1 1 auto; min-width: 0; } body.oda-coursepage .custom-field.Related_Links { flex: 0 0 200px; position: relative; z-index: 1; margin: 0; } body.oda-coursepage .custom-field.Related_Links img.grass_bg { display: none; } body.oda-coursepage .custom-field.Related_Links ul { list-style: none; margin: 0; padding: 0; } body.oda-coursepage .custom-field.Related_Links li + li { margin-top: 0; } /* unified on both courses: inactive = dark green, active = green, pale green text both, pale green strip on the active one */ body.oda-coursepage .custom-field.Related_Links a { display: block; background: #153833; color: #c8e982; text-decoration: none; font-weight: 600; padding: 10px 14px; border-left: 4px solid transparent; transition: background-color 0.2s ease, color 0.2s ease; } body.oda-coursepage .custom-field.Related_Links a:hover { background: #005245; color: #c8e982; } body.oda-coursepage .custom-field.Related_Links a.active { background: #005245; border-left-color: #c8e982; color: #c8e982; } /* the hairline passes behind the section title — give it a white ground */ body.oda-coursepage .oda-main .custom-field[class*="Why_Take"] h4 { background: white; display: inline-block; padding-right: 16px; position: relative; z-index: 1; } /* --- Training Program Details: numbered topics ------------------------------ */ body.oda-coursepage .custom-field.Training_Program_Details ul.oda-topics { counter-reset: odaTopic; list-style: none; margin: 18px 0 8px; padding: 0; display: flex; flex-wrap: wrap; } body.oda-coursepage #catalogue_details .custom-field.Training_Program_Details ul.oda-topics > li { counter-increment: odaTopic; flex: 0 0 46%; display: flex; align-items: flex-start; gap: 14px; padding: 9px 24px 9px 0; } body.oda-coursepage .custom-field.Training_Program_Details ul.oda-topics > li::before { content: counter(odaTopic, decimal-leading-zero); flex: 0 0 auto; background-color: #005245; color: var(--oda-accent); border: 2px solid var(--oda-accent); font-weight: 800; font-size: 0.9em; line-height: 1; padding: 13px 12px; } /* kill her legacy -1em pull on the topics items */ body.oda-coursepage #catalogue_details .custom-fields .custom-field.Training_Program_Details ul.oda-topics > li { margin-left: 0; } /* View the syllabus: dark button + bold arrow (kept, the icon img is removed); KR's class is btn-knowrisk, GW's is btn-groundwork — catch the modal trigger */ body.oda-coursepage .custom-field.Training_Program_Details .btn-knowrisk, body.oda-coursepage .custom-field.Training_Program_Details .btn-groundwork, body.oda-coursepage .custom-field.Training_Program_Details button[data-target="#Modal_Syllabus"], body.oda-coursepage .custom-field.Training_Program_Details button[data-bs-target="#Modal_Syllabus"] { display: inline-flex; align-items: center; gap: 8px; background-color: #005245 !important; border: none; color: white !important; font-weight: 700; text-transform: capitalize; letter-spacing: 0.03em; font-size: 0.85em; line-height: 1.2; padding: 10px 18px; border-radius: 0; transition: background-color 0.2s ease; } body.oda-coursepage .custom-field.Training_Program_Details .btn-knowrisk::after, body.oda-coursepage .custom-field.Training_Program_Details .btn-groundwork::after, body.oda-coursepage .custom-field.Training_Program_Details button[data-target="#Modal_Syllabus"]::after, body.oda-coursepage .custom-field.Training_Program_Details button[data-bs-target="#Modal_Syllabus"]::after { content: ""; flex: 0 0 auto; width: 12px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } body.oda-coursepage .custom-field.Training_Program_Details .btn-knowrisk:hover, body.oda-coursepage .custom-field.Training_Program_Details .btn-knowrisk:focus-visible, body.oda-coursepage .custom-field.Training_Program_Details .btn-groundwork:hover, body.oda-coursepage .custom-field.Training_Program_Details .btn-groundwork:focus-visible, body.oda-coursepage .custom-field.Training_Program_Details button[data-target="#Modal_Syllabus"]:hover, body.oda-coursepage .custom-field.Training_Program_Details button[data-bs-target="#Modal_Syllabus"]:hover { background-color: #005245 !important; color: white !important; } /* syllabus modal on brand */ body.oda-coursepage #Modal_Syllabus .modal-content { border-radius: 6px; overflow: hidden; } body.oda-coursepage #Modal_Syllabus .modal-header { background: #153833; border-bottom: none; padding: 16px 22px; } body.oda-coursepage #Modal_Syllabus .modal-title { color: white; font-family: var(--font-family-body); font-weight: 800; } body.oda-coursepage #Modal_Syllabus .btn-close { filter: invert(1); opacity: 0.9; } body.oda-coursepage #Modal_Syllabus .modal-body { color: #363d47; padding: 22px 26px; } body.oda-coursepage #Modal_Syllabus .modal-body h4 { color: #153833; font-family: var(--font-family-body); font-weight: 800; font-size: 1.25em; margin: 18px 0 8px; } body.oda-coursepage #Modal_Syllabus .modal-body h4:first-child { margin-top: 0; } /* team purchase button in the Teams section */ body.oda-coursepage .custom-field.Training_for_Teams button.purchase-bulk { display: inline-flex; align-items: center; gap: 8px; background-color: #005245; border: none; color: white; font-weight: 700; text-transform: none; letter-spacing: 0.03em; font-size: 0.85em; line-height: 1.2; padding: 10px 18px; cursor: pointer; transition: background-color 0.2s ease; } body.oda-coursepage .custom-field.Training_for_Teams button.purchase-bulk::after { content: ""; flex: 0 0 auto; width: 12px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } body.oda-coursepage .custom-field.Training_for_Teams button.purchase-bulk:hover, body.oda-coursepage .custom-field.Training_for_Teams button.purchase-bulk:focus-visible { background-color: #005245; color: white !important; } body.oda-coursepage .custom-field.Training_for_Teams a { color: var(--oda-accent-dark) !important; text-decoration: underline; } /* --- Support banner ---------------------------------------------------------- */ body.oda-coursepage .custom-field.Support_and_Troubleshooting { background: #153833; display: flex !important; justify-content: center; gap: 22px; padding: 22px 28px; margin-top: 0; } body.oda-coursepage .custom-field.Support_and_Troubleshooting::before { content: ""; flex: 0 0 auto; width: 77px; height: 69px; background-image: var(--oda-support-icon); background-repeat: no-repeat; background-position: center; background-size: contain; } body.oda-coursepage .custom-field.Support_and_Troubleshooting h3 { color: white; font-family: var(--font-family-heading); font-weight: 800; font-size: 1.5em; margin: 0 0 4px; } body.oda-coursepage .custom-field.Support_and_Troubleshooting p { color: white; margin: 0; } body.oda-coursepage .custom-field.Support_and_Troubleshooting a { color: var(--oda-accent) !important; text-decoration: underline; } body.oda-coursepage .oda-support__text { max-width: 530px; } /* --- course page mobile adaptations ------------------------------------------ */ @media (max-width: 767px) { body.oda-coursepage .description-column > img.img-coursebanner { float: none; width: 100%; max-width: none; margin: 0 0 16px; } body.oda-coursepage .oda-cta-banner { flex-direction: column; } body.oda-coursepage .oda-cta-banner__left { clip-path: none; padding: 18px 20px; } body.oda-coursepage .oda-cta-banner__right { clip-path: none; margin-left: 0; padding: 18px 20px; flex-direction: column; align-items: stretch; gap: 18px; } body.oda-coursepage .oda-cta-banner__offer { text-align: left; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__icon { width: 110px; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__title { font-size: 1.7em; } body.oda-coursepage .oda-hero { grid-template-columns: 1fr; gap: 16px; } body.oda-coursepage .oda-contentwrap { flex-direction: column; gap: 16px; } body.oda-coursepage .oda-contentwrap::before { display: none; } body.oda-coursepage .custom-field.Related_Links { flex: 0 0 auto; width: 100%; } body.oda-coursepage .custom-field.Training_Program_Details ul.oda-topics > li { flex: 0 0 100%; } body.oda-coursepage .custom-field.Support_and_Troubleshooting { align-items: flex-start; } } /* bold arrow on the masthead RAL button too (same as the footer CTA) */ #masthead a.Request_a_Locate::before { content: none !important; } #masthead a.Request_a_Locate::after { content: "" !important; flex: 0 0 auto; width: 12px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' fill='%23153833'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; font-weight: 700; } /* the description's purchase anchors become clones in place (btn-unstiled) — purchases moved into the CTA banner, so hide the clones (#98589) */ body.oda-coursepage .purchase.btn-unstiled, body.oda-coursepage .purchase-bulk.btn-unstiled { display: none !important; } /* course title added into the description metadata with inline display:none — force-shown for this branch per the mockup (same style both courses) */ body.oda-coursepage .oda-course-title, #catalogueResults .course-title { display: block !important; font-family: var(--font-family-body); font-weight: 800; font-size: 3em; line-height: 1.05; color: #153833; text-transform: none; letter-spacing: 0.01em; margin: 0 0 14px; } #catalogueResults .course-title { font-size: 2em; } /* "Topics include:" — upgraded to a real heading in the metadata. Alina 2026-09-30 (#98589): the condensed heading font has no weight heavy enough for the mockup — switch to the body font stack at 800 */ body.oda-coursepage .custom-field .oda-topics-title { font-family: var(--font-family-body); font-weight: 800; font-size: 1.6rem; color: #153833; letter-spacing: unset; margin: 18px 0 6px; } @media (max-width: 992px) { body.oda-coursepage .oda-course-title { font-size: 2.4em; } } @media (max-width: 767px) { body.oda-coursepage .oda-course-title { font-size: 2.1em; } } /* <=992px: big banner goes vertical, topics go full-width single column */ @media (max-width: 992px) { body.oda-coursepage .oda-cta-banner--big { flex-direction: column; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__left { clip-path: none; flex-basis: auto; } body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__right { clip-path: none; margin-left: 0; padding: 20px 26px; } } /* fields column gets a 60px offset under the rail top */ body.oda-coursepage .custom-fields { margin: 60px 0px 0px 0px; } /* --- CTA banner responsive bands -------------------------------------------- */ @media (max-width: 1200px) { body.oda-coursepage .oda-cta-banner__right { padding: 20px 25px 20px 64px; } } /* <993px: both banner parts stack internally; icon to the left edge */ @media (max-width: 992px) { body.oda-coursepage .oda-cta-banner__left { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; } body.oda-coursepage .oda-cta-banner__right { flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; } } /* <768px: everything in both banners centers */ @media (max-width: 767px) { body.oda-coursepage .oda-cta-banner__left { align-items: center; text-align: center; } body.oda-coursepage .oda-cta-banner__right { align-items: center; text-align: center; padding-left: 25px; /* drop the diagonal offset — left padding equals right */ } body.oda-coursepage .oda-cta-banner__offer { text-align: center; } body.oda-coursepage .oda-cta-banner__label { text-align: center; } /* the big banner's own left-align beats the generic centering — pin it too */ body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__left, body.oda-coursepage .oda-cta-banner--big .oda-cta-banner__right { align-items: center; text-align: center; } } /* <1200px: topic items need a wider gap — 45% columns */ @media (max-width: 1200px) { body.oda-coursepage #catalogue_details .custom-field.Training_Program_Details ul.oda-topics > li { flex: 0 0 45%; } } /* topics: single full-width column at 993px and below */ @media (max-width: 993px) { body.oda-coursepage #catalogue_details .custom-field.Training_Program_Details ul.oda-topics > li { flex: 0 0 100%; margin-left: 0; } } /* mobile: support banner stacks, centered; fields lose the 60px offset */ @media (max-width: 767px) { body.oda-coursepage .custom-field.Support_and_Troubleshooting { flex-direction: column; align-items: center; text-align: center; } body.oda-coursepage .custom-fields { margin-top: 0; } } /* ========================================================================== Feedback round 2026-09-23 (#98589): GroundWork Pro activation, KR Brandon Hall badge, Connections Hub cascade fix ========================================================================== */ /* --- GroundWork Pro: third program page — own accent (client icons: #69e5e3 on dark #153833, sampled from gwpheader.png / GWP1-4number.png) ---------- */ body.oda-gwp #catalogue_details { --oda-accent: #69e5e3; --oda-accent-dark: #008b89; --oda-support-icon: url("https://on1call.blob.core.windows.net/learnerview/e56ec53a-ec65-45b0-a303-a31d75c51848/gwphelp_icon.png"); } /* client's GWP counters sit on the DARK tile, not the KR/GW green one */ body.oda-gwp .custom-field.Training_Program_Details ul.oda-topics > li::before { background-color: #153833; } /* --- Connections Hub (SupervisorView): order-proof the masthead ------------ SupervisorView.aspx registers Responsive/css/bootstrap-responsive.min.css INSIDE the page content — AFTER this file — so its .container{width:1170px/ 724px} rules beat our non-!important width:100% and the masthead ends up offset/narrow with the main menu running off the page. Everywhere else this file loads last and wins. Scope the hardening to that page only. */ body[class*="supervisor_view"] #masthead #headerTopMenu .container, body[class*="supervisor_view"] #masthead #headerBottomMenu .container, body[class*="supervisor_view"] #masthead #main_menu_bar nav.navbar > .container { width: 100% !important; } body[class*="supervisor_view"] #masthead #main_menu_bar { width: auto !important; max-width: 100% !important; } body[class*="supervisor_view"] #masthead #main_menu_bar .navbar-nav { flex-wrap: wrap; } /* Connections Hub / SupervisorView (#98589): bootstrap loads AFTER the custom css there and its .container width rules stick — pin the masthead itself to full width so the top bar (search + Log In) reaches the right edge */ #masthead.container { width: 100% !important; max-width: 100% !important; } /* no language toggle in the top bar (French not offered): the visible search button carries the auto margin so search + Log In pin fully right (#98589) */ #masthead #headerTopMenu .container.oda-no-lang > .oda-search-btn, #masthead #headerTopMenu .container.oda-no-lang > #search { margin-left: auto; } /* Why-section second column (course thumbnail) hidden per client — the badge comeback was requested for the award section only (#98589) */ body.oda-coursepage .custom-field[class*="Why_Take"] .two-columns__marquee-column { display: none; } body.oda-coursepage .custom-field[class*="Why_Take"] .two-columns__content { flex: 1 1 100%; } /* ========================================================================== Landscape Ontario sample course page (#98589): the shared course-page JS builds the same oda-hero there (body.oda-coursepage.oda-lo). The footnote paragraph is marked in the description; no Related Links rail on this course, so the fields column keeps no top offset. ========================================================================== */ body.oda-coursepage .replace.description .oda-desc-footnote { font-size: 0.9em; color: #363d47; } body.oda-coursepage.oda-lo .custom-fields { margin-top: 0; } /* ========================================================================== Training for Teams tail (#98589): the in-value purchase anchor (rendered as an already-hidden .purchase-bulk clone) plus its trailing
    /empty

    left dead space at the section end. The neutral wrapper restyles nothing anywhere else; on ODA course pages the whole tail collapses. ========================================================================== */ body.oda-coursepage .custom-field.Training_for_Teams .oda-teams-purchase { display: none; } /* ========================================================================== Login page: the Log In / Register button spans go full-width stacked with a gap (#98589; flex blockifies the inline-block spans). ========================================================================== */ body.Login #lmsLoginPanel .login_button { display: flex; flex-direction: column; gap: 12px; } body.Login #lmsLoginPanel .login_button .login, body.Login #lmsLoginPanel .login_button .register { width: 100%; } body.Login #lmsLoginPanel .login_button .button { width: 100%; margin-left: 0; }