/* `XHTML, HTML4, HTML5 Reset ----------------------------------------------------------------------------------------------------*/ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0; font-size: 100%; } html, body { height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { /* Override the default (display: inline) for browsers that do not recognize HTML5 tags. IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv */ display: block; } b, strong { /* Makes browsers agree. IE + Opera = font-weight: bold. Gecko + WebKit = font-weight: bolder. */ font-weight: bold; } img { color: transparent; font-size: 0; vertical-align: middle; /* For IE. http://css-tricks.com/ie-fix-bicubic-scaling-for-images */ -ms-interpolation-mode: bicubic; } ol, ul { list-style: none; } li { /* For IE6 + IE7: "display: list-item" keeps bullets from disappearing if hasLayout is triggered. */ display: list-item; } table { border-collapse: collapse; border-spacing: 0; } th, td, caption { font-weight: normal; vertical-align: top; text-align: left; } q { quotes: none; } q:before, q:after { content: ''; content: none; } sub, sup, small { font-size: 75%; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } svg { /* For IE9. Without, occasionally draws shapes outside the boundaries of <svg> rectangle. */ overflow: hidden; } /* Idaho Digital Learning - School Portal (Common CSS) Portal Theme - Default. Original design by Luis Calas - Revised for ASP.NET use by Jerry E. Latimer ~ November 2013. */ .MVCBundleFail { display: none; } /**** SCHOOL SPECIFIC COLORS *****/ .pageBackground { background: #EFEEE6; } .pageText { color: #363636; } .headerBackground { background: #23394E; } .headertext { color: #EFEEE6; } .ShowHeaderText { display: inherit; } .primaryTileBackground { background: #B2BB1C; } .primaryTileText { color: #363636; } .hoverTileBackground { background: #CCD397; } .hoverTileText { color: #363636; } .noticeText { color: #00B1B0 !important; } .pdCalendarColor1 { background-color: #B2BB1C; } .pdCalendarColor2 { background-color: #CCD397; } .hoverBorder { border: none; } .hoverBorder:hover { border: #B7B7B7; } .grayText { color: #B7B7B7; } .contentBackground { color: #363636; background-color: #F7f7f7; } /* Currently only used on the resource management page */ /* This mimics the styling of the nested fieldsets */ /* Rather than using nesting contentBackground classes (which could affect existing controls in the site) using an explicit class for this */ .innerContentBackground { color: #363636; background-color: #ededed; } .inputPrimary { color: #23394E; } .inputSecondary { color: #00B1B0; } .inputText { color: #23394E; } .inputBackground { background-color: #FFFFFF; } .ColoredLink { color: #363636 !important; } .ColoredLink:hover { color: #363636 !important; } .MobileShow { display: none; } @media (max-width: 600px) { .MobileShow { display: inherit; } } .MobileHide { display: inherit; } @media (max-width: 600px) { .MobileHide { display: none !important; } } @media (min-width: 600px) { .FullHide { display: none !important; } } .NoTransition { transition: 0s !important; } .ui-button.Selected { color: #363636; background-color: #CCD397; } .ButtonBorder > label { box-shadow: 0 0 0 2px #363636; } .ButtonBorder.Selected > label { box-shadow: 0 0 0 2px #363636; } .contentBlock.infoList a:not(.notificationButton) { color: #00B1B0; text-decoration: underline; } .contentBlock.infoList a:hover:not(.notificationButton) { color: #363636; opacity: 0.8; } #notifications { padding-bottom: 0px !important; } .notification { padding-bottom: 2em; font-size: 1em; position: relative; clear: both; } .notificationMessage { padding-top: 1em; } /**** GLOBAL DEFAULTS *****/ html { font-family: Calibri, Arial; font-size: 1rem; } @media (max-width: 600px) { html { font-size: 0.75rem; } } body { height: auto; padding: 0 0 30px 0; } .header_wrapper { margin: 0 0 20px 0; padding: 5px 0; border-bottom: solid 1px #B7B7B7; width: 100%; height: 50px; } @media (max-width: 600px) { .header_wrapper { height: 40px; } } .headwrap { position: relative; margin: 0 auto; padding: 10px 10px 0 10px; max-width: 960px; } .head_title { height: 30px; font-size: 1.31rem; font-weight: normal; font-family: Calibri, Arial; background: none; float: left; } @media (max-width: 600px) { .head_title { display: none; } } .PageTitle { width: 100%; height: 70px; } @media (max-width: 600px) { .PageTitle { height: 0; } } .page_titleText { font-size: 2.25rem !important; font-weight: bold; font-family: "Titillium Web", Arial, sans-serif; overflow: hidden; white-space: nowrap; width: 90%; } @media (max-width: 600px) { .page_titleText { padding-top: 0.5em; font-size: 1.13rem !important; float: none; text-align: center; position: absolute; top: -60px; width: 76%; left: 12%; } } .page_titleText a, .page_titleText a:hover { color: #363636; text-decoration: none; } @media (max-width: 600px) { .page_titleText a, .page_titleText a:hover { color: #EFEEE6; } } .page_titleLogo { position: absolute; right: 8px; top: 0; background-color: #EFEEE6; } @media (max-width: 600px) { .page_titleLogo { display: none; } } .head_login { position: absolute; right: 10px; /*float: right;*/ padding: 0; margin: 0; background-color: #23394E; } @media (max-width: 600px) { .head_login { display: none; } } .providerLoginButton { border: none; padding: 2px; } .providerLoginButton:hover { padding: 0; border: 2px solid; } .controlLabel { padding-right: 10px; color: #fff; font-size: 0.81rem; font-family: "Titillium Web", Arial, sans-serif; } .controlField { width: 200px; padding-right: 4px; } .sectionLabel { font-size: 0.94rem; font-weight: bold; font-family: "Titillium Web", Arial, sans-serif; padding: 2px 0 4px 0; } .welcomeNameText { font-size: 0.94rem; font-weight: bold; font-family: Calibri, Arial; padding: 2px 25px 4px 0; text-decoration: none; } .tableStyle { border: none; } .tableStyle td { padding-bottom: 2px; } .errorText { color: #F15C22 !important; } /* Used by the K12Catalog Details, Event Details and Section Details (both on the catalog and the my enrollments page */ .DetailDescription { width: 100%; margin-top: 1.2em; max-height: 8em; font-size: 0.8em; overflow: hidden; } .FullText { max-height: inherit !important; } .MoreLessButton { font-style: italic; /*position: relative; float: right;*/ text-align: right; cursor: pointer; display: none; } /* Currently used on the EventDetails UserControl to distinguish lines in the table on the details tab */ .alternateRowColor { background-color: #808080; } /* Used to display the make payment iframe */ #MakePaymentDialog { text-align: center; } #MakePaymentIFrame { height: 99%; width: 100%; } /* ErrorHighlight for jquery highlight of validation errors */ .ErrorHighlight { border-color: #F15C22 !important; border-width: 1px !important; border-style: solid !important; } .ErrorHighlightWrapper input[type="text"].riTextBox.riEmpty, .ErrorHighlightWrapper input[type="text"].riTextBox.riEnabled, .ErrorHighlightWrapper input[type="text"].riTextBox.riSelected, .ErrorHighlightWrapper input[type="text"].riTextBox.riFocused { border-color: #F15C22 !important; } .hiddenText { display: none; } .floatLeft { float: left; padding-right: 5px; } .nonProductionEnvironmentText { color: red; font-weight: bold; display: inline; float: left; padding-left: 16px; } @media (max-width: 600px) { .nonProductionEnvironmentText { z-index: 1; position: absolute; right: 5px; top: 12px; } } .loginButton { border: 1px solid; display: inline-block; /*font-family: arial;*/ font-size: 0.81rem; font-weight: bold; padding: 6px 12px; text-decoration: none; } .loginButton:hover { border: 1px solid #FFF; text-decoration: underline; } .loginButton:active { position: relative; top: 1px; } .adminDropHoverTileStyle { margin: 10px; padding: 5px; height: 200px; width: 200px; vertical-align: middle; } .viewImgBtnStyle:hover { border: 1px solid white !important; } /* HEADINGS ----------------------------------------------------------------------------------------------------*/ h1 { font-size: 2.25rem; font-family: "Titillium Web", Arial, sans-serif; font-weight: bold; } h2 { font-size: 1.44rem; font-family: "Titillium Web", Arial, sans-serif; font-weight: bold; } h3 { font-size: 1.31rem; font-family: "Titillium Web", Arial, sans-serif; font-weight: bold; } h4 { font-size: 1.19rem; font-family: "Titillium Web", Arial, sans-serif; font-weight: bold; } h5 { font-size: 1.06rem; font-family: "Titillium Web", Arial, sans-serif; font-weight: bold; } h6 { font-size: 0.94rem; font-family: "Titillium Web", Arial, sans-serif; font-weight: bold; } /* SPACING ----------------------------------------------------------------------------------------------------*/ ol { list-style: decimal; } ul { list-style: disc; } li { margin-left: 30px; } a { color: #363636; text-decoration: none; } a:hover { text-decoration: underline; } p { padding: 10px 0; text-align: left; font-size: 0.81rem; } hr { border: 0 #ccc solid; border-top-width: 1px; clear: both; height: 0; } fieldset { border: solid #B7B7B7; position: relative; padding: 1.5em; padding-bottom: 2.4em; margin: 1em 0.5em; box-sizing: border-box; } fieldset::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ededed; content: ""; } fieldset fieldset::before { background-color: #F7f7f7; } fieldset > * { position: relative; } legend { font-weight: bold; padding: 0 0.5em; background-color: #F7f7f7; position: absolute; height: 0.9em; top: -0.9em; } fieldset fieldset legend { background-color: #ededed; } fieldset a { color: #363636; font-size: 0.85em; } fieldset a:hover { color: #00B1B0; } .outerTile { height: 230px; width: 230px; float: left; position: relative; margin: 4px; overflow: hidden; } .outerTileSmall { height: 110px; width: 110px; float: left; position: relative; margin: 4px; overflow: hidden; } .squareTile { padding: 15px; /*width: 215px; height: 215px;*/ color: #FFF; background: #B2BB1C; font-size: 1rem; } .squareTilePeek { padding: 15px; width: 200px; height: 215px; color: #FFF; background: #F3901D; font-size: 1rem; } .CustomTileCSSContainer { height: 230px; width: 230px; margin-top: -15px; margin-left: -15px; } .wideTile { padding: 150px; width: 215px; height: 215px; color: #FFF; background: #B2BB1C; font-size: 1rem; } .wideTilePeek { padding: 15px; width: 215px; height: 215px; color: #FFF; background: #F3901D; font-size: 1rem; } .squareTileSmall { width: 110px; height: 110px; text-align: center; vertical-align: middle; font-weight: bold; color: #FFF; background: #B2BB1C; font-size: 0.63rem; position: absolute; left: 0; top: 0; display: none; } .squareTileSmallPeek { width: 110px; height: 110px; text-align: center; vertical-align: middle; font-weight: bold; color: #FFF; background: #F3901D; font-size: 0.63rem; position: absolute; left: 0; top: 0; } .wideTileSmall { width: 230px; height: 110px; text-align: center; vertical-align: middle; font-weight: bold; color: #FFF; background: #B2BB1C; font-size: 0.94rem; } .wideTileSmallPeek { width: 230px; height: 110px; text-align: center; vertical-align: middle; font-weight: bold; color: #FFF; background: #F3901D; font-size: 0.94rem; } .tileTitleText { padding-top: 5px; } .SmallTileTitleText { padding: 5px !important; font-size: 0.75rem; } .tilePeekTitleText { padding-top: 5px; } .catalogHoverText { padding-top: 15px; font-size: 1.13rem; font-weight: bold; text-align: center; } .catalogTileFooterText { font-size: 0.81rem !important; position: absolute; bottom: 10px; color: silver; left: 80px; } .catalogTileFooterTextPeek { font-size: 0.81rem !important; position: absolute; bottom: 10px; color: silver; left: 80px; } .tileIconFrame { position: absolute; width: 52px; height: 52px; background-color: Black; top: 15px; left: 15px; -ms-opacity: 0; opacity: 0; } .tilePeekIconFrame { position: absolute; width: 52px; height: 52px; background-color: Black; top: 15px; left: 15px; -ms-opacity: 0; opacity: 0; } .tileIconImage { position: relative; } .footer_nav { float: right; position: relative; } fieldset .HelperText { position: absolute; bottom: 0; opacity: 0.6; font-style: italic; font-size: 0.8em; max-height: 2.3em; margin-bottom: 0.2em; overflow: hidden; } /* FOOTER MENU ----------------------------------------------------------------------------------------------------*/ ul.menu { margin: 0; padding: 0; list-style-type: none; width: auto; position: relative; text-transform: uppercase; font-size: 0.7rem; float: right; } ul.menu li { display: block; float: left; margin: 0; padding: 0; height: 2em; } ul.menu li a, ul.menu li span { display: block; text-decoration: none; padding: 10px 10px 0 10px; margin: 0; height: 2em; } ul.menu li a:hover { text-decoration: underline; } /* --------------- SETUP WIZARD STYLING ----------------------------------------------------------------------------------------------------*/ .wizardPanel { border: none; background: #5C5C5C; float: left; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; padding: 20px; width: 910px; height: auto; } .wizardOptionSet { color: #FFF; } .wizardRadioButton { font-size: 1.31rem; } .wizardOptionInfo { padding-left: 40px; width: 60%; display: block; color: #FFF; } .wizardEntryInstructions { display: block; color: #FFF; padding-top: 5px; } .wizardButtonRow { text-align: center; } .wizardButton { border: 1px solid #B7B7B7; display: inline-block; /*font-family: arial;*/ font-size: 0.81rem; font-weight: bold; padding: 6px 12px; text-decoration: none; } .wizardButton:hover { border: 1px solid #FFF; text-decoration: underline; } .wizardButton:active { position: relative; top: 1px; } .RegistrationButton { border: 1px solid; display: inline-block; /*font-family: arial;*/ font-size: 0.81rem; font-weight: bold; padding: 2px 12px; text-decoration: none !important; -moz-min-width: 52px; -ms-min-width: 52px; -o-min-width: 52px; -webkit-min-width: 52px; min-width: 52px; } .RegistrationButton:hover { border: 1px solid #FFF; text-decoration: underline; } .RegistrationButton:active { position: relative; top: 1px; } .RegistrationClosedLabel { border: 1px solid #B7B7B7; display: inline-block; /*font-family: arial;*/ font-size: 0.81rem; font-weight: bold; padding: 2px 6px 2px 6px; text-decoration: none; text-align: center; -moz-min-width: 52px; -ms-min-width: 52px; -o-min-width: 52px; -webkit-min-width: 52px; min-width: 52px; } .graybutton { border: 1px solid #B7B7B7; background-color: #99999a; padding: 4px 8px 4px 8px; text-align: left; color: #FFF; font-size: 0.81rem; text-decoration: none; } .graybutton:hover { border: 1px solid #FFF; text-decoration: underline; } .graybutton:active { position: relative; top: 1px; } .ui-button:disabled { cursor: default !important; opacity: 0.5 !important; } .ui-button:hover:disabled { cursor: default !important; background-color: #B2BB1C !important; color: #363636 !important; } .ButtonBorder:hover:disabled > label { box-shadow: 0 0 0 2px #363636; } .fullblock { display: inline; float: left; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; padding: 20px; width: 910px; height: auto; background: #5c5c5c; } .blockform { display: inline; float: left; padding: 20px; margin: 10px 0; width: 870px; background: #434444; } .dialogMaster { background: #434444; margin: 0; } .dialogform { display: inline; float: left; padding: 6px 6px 0 6px; margin: 0; background: #434444; width: 635px; height: 610px; overflow: hidden; } .dialogFormDetailsPopup { -moz-min-width: 630px; -ms-min-width: 630px; -o-min-width: 630px; -webkit-min-width: 630px; min-width: 630px; min-height: 600px; width: 680px; height: 600px; } .dialogBackground { background: #434444 !important; } .blockform1_lt, .blockform3_lt { margin: 10px 30px 10px 0; } .blockform1_rt, .blockform3_rt { margin: 10px 0; } .blockform3_lt, .blockform3_rt { height: 200px; } .blockform1_lt, .blockform1_rt { height: 90px; } .blockform1_lt, .blockform1_rt, .blockform3_lt, .blockform3_rt { display: inline; float: left; padding: 20px; width: 400px; background: #434444; } .blockform2_lt, .blockform2_md { margin: 10px 20px 10px 0; } .blockform2_rt { margin: 10px 0; } .blockform2_lt, .blockform2_md, .blockform2_rt { display: inline; float: left; padding: 20px; width: 250px; height: 200px; background: #434444; } .modalWindowStyle { width: 90%; height: 90%; padding: 10px; background: black; } /*** Custom Course Catalog Styling ******************************************************************************************************************************************************/ #table-b1 { font-size: 0.8em; margin: 0 0 20px 0; width: 100%; text-align: left; border-collapse: collapse; border: 0 solid #B2BB1C; } #table-b1 tbody { background: #B2BB1C; } #table-b1 td { padding: 10px; color: #000; vertical-align: middle; font-weight: bold; } #table-b { font-size: 1rem; margin: 0 0 20px 0; width: 100%; text-align: left; border-collapse: collapse; border: 0 solid #B2BB1C; } #table-b th { padding: 15px 10px 10px 10px; font-size: 1rem; color: #fff; border-bottom: 4px solid #5c5c5c; } #table-b tbody { background: none; } #table-b td { padding: 10px; color: #fff; border-top: 1px solid #5c5c5c; vertical-align: middle; } .portalSelectorBox { width: 470px; height: 231px; vertical-align: top; margin-top: 1px; float: left; } .portalLinkText { font-weight: bold; font-size: 1rem; /*margin-left: -10px;*/ /*padding-top: 2px;*/ } .portalLinkStyle { display: inline-block; background-color: gray; margin-left: -60px; padding: 5px 0 5px 20px; width: 410px; text-align: center; } .portalLinkStyle a:link, a:visited { text-decoration: underline !important; } .portalLinkStyle a:hover, a:active { color: #000000; } .portalSelectorText { font-size: 1.31rem; font-weight: normal; padding-left: 80px; padding-top: 5px; } .portalTitleText { font-size: 1.5rem; font-weight: bold; padding-left: 80px; padding-top: 5px; } .searchImage { width: 470px; height: 230px; padding-right: 10px; float: left; } .searchBox { width: 470px; height: 230px; vertical-align: top; float: left; } .searchText { font-size: 1.31rem; font-weight: normal; padding-left: 70px; padding-top: 40px; } .pdSearchBox { width: 470px; height: 230px; vertical-align: top; float: left; } .pdSearchText { font-size: 1.31rem; font-weight: normal; padding-left: 60px; padding-top: 40px; } .pdTitleText { font-size: 1.5rem; font-weight: bold; padding-left: 20px; } .toggleButtonStyle { margin-right: 20px; margin-top: 5px; } .titleText { font-size: 1.5rem; font-weight: bold; padding-left: 80px; } .CourseDetailsAddCourse { float: left; padding-bottom: 8px; padding-left: 30px; width: 300px; border: black 1px; font-weight: bold; } a.SyllabusLink { color: #FFCF00 !important; text-decoration: underline !important; } /* ===================================================================== */ .transparentTile { filter: alpha(opacity=32); /* IE */ -moz-opacity: 0.32; /* Mozilla */ opacity: 0.32; /* CSS3 */ } .courseSchedule { color: #FFF; padding-top: 10px; font-size: 1rem; } /* K12 Catalog */ .k12CourseDetailsScrollArea { overflow: auto; height: 120px !important; padding-top: 5px; padding-bottom: 5px; font-size: 0.81rem; line-height: normal; font-weight: normal; } .k12CourseDetailsScrollArea a:link, .k12courseDetailsScrollArea a:visited { text-decoration: underline !important; } .k12CourseDetailsScrollArea a:hover, .k12courseDetailsScrollArea a:active { text-decoration: underline !important; font-weight: bold; } /* PD Catalog */ .courseDetailsScrollArea { overflow: auto; height: 210px !important; padding-top: 5px; padding-bottom: 5px; } .courseDetailsScrollArea a:link, .courseDetailsScrollArea a:visited { text-decoration: underline; } .courseDetailsScrollArea a:hover, .courseDetailsScrollArea a:active { text-decoration: underline; font-weight: bold; } .searchHeader { text-align: left; font-weight: bold !important; font-size: 0.94rem !important; } .searchContent { text-align: left; font-size: 0.94rem !important; } .MedallionSection { float: left; padding-left: 10px; height: 100px; } .Medallion { float: left; text-align: center; padding: 5px; -ms-border-radius: 15px; border-radius: 15px; margin: 5px; -moz-min-width: 90px; -ms-min-width: 90px; -o-min-width: 90px; -webkit-min-width: 90px; min-width: 90px; height: 52px; font-weight: bold; } .Medallion .Header { font-weight: bold; font-size: 1rem; padding: 4px; } .Medallion.Green { background-color: green; color: white; } .Medallion.Blue { background-color: blue; color: white; } .Medallion.Orange { background-color: orange; color: white; } .Medallion.Purple { background-color: purple; color: white; } .Medallion.Yellow { background-color: yellow; color: black; } .Medallion.Gray { background-color: gray; color: white; } /* Overide firefox styling for telerik controls */ .rwConfirmDialog:before { content: none !important; } .rfdRadioUnchecked:before { content: none !important; } .rfdRadioChecked:before { content: none !important; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .FixedWidth { width: 960px; margin: auto; box-sizing: border-box; position: relative; } .MaxWidth { max-width: 960px; margin: auto; box-sizing: border-box; position: relative; min-width: 300px; } #Hamburger { position: absolute; top: 0; left: 0; width: 50px; height: 50px; cursor: pointer; z-index: 101; } #Hamburger > div { width: 26px; height: 2px; margin-top: 8px; margin-left: 12px; position: relative; background-color: #EFEEE6; display: none; } @media (max-width: 600px) { #Hamburger > div { display: inherit; } } .MainBody { -ms-transition: transform 500ms ease 0s; -o-transition: transform 500ms ease 0s; -webkit-transition: transform 500ms ease 0s; transition: transform 500ms ease 0s; } body.Open { overflow-x: hidden; } @media (max-width: 600px) { .Open .MainBody, .Open .MobileMenu { -ms-transform: translateX(250px); -webkit-transform: translateX(250px); transform: translateX(250px); -ms-transition: transform 500ms ease 0s; -o-transition: transform 500ms ease 0s; -webkit-transition: transform 500ms ease 0s; transition: transform 500ms ease 0s; } } .MobileMenu { position: fixed; width: 250px; left: -250px; top: 0; background-color: #23394E; height: 100vh; -ms-transition: transform 500ms ease 0s; -o-transition: transform 500ms ease 0s; -webkit-transition: transform 500ms ease 0s; transition: transform 500ms ease 0s; } @media (max-width: 600px) { .Open #MainBodyMask { position: fixed; width: 100%; height: 110%; background-color: #23394E; z-index: 100; opacity: 0.5; } } .MobileMenu ul.menu { float: none; left: -1em; } .MobileMenu ul.management { margin-top: -1.2em; } .MobileMenu ul.menu li { float: none; padding-left: 1em; margin: 0; height: auto; width: 100%; } .MobileMenu ul.menu li:first-child a { border-top: solid 1px #B7B7B7; } .MobileMenu ul.menu li a { color: #EFEEE6; float: none; padding: 15px 20px; font-size: 1rem; height: auto; border-bottom: solid 3px #B7B7B7; } .MobileMenu ul.menu li a:hover { text-decoration: none; background-color: #B2BB1C; color: #363636; } .MobileMenu_login { text-align: center; margin-top: 20px; } .MobileMenu_login .LoginOutButton { width: 200px; } .schoolLogoClass { left: initial !important; max-width: 200px; max-height: 60px; } .contentBlock { margin-bottom: 10px; padding: 20px; height: auto; background: #F7f7f7; color: #363636; } .headerIcon { height: 20px; width: 20px; padding-top: 5px; padding-right: 5px; } .headerIconIndicator { background-color: #B2BB1C; color: #363636; position: absolute; top: 0; right: 0; border-radius: 1em; height: 1.4em; width: 1.4em; text-align: center; font-size: 0.7em; padding-top: 0.1em; font-weight: bold; display: none; } /*-------------------------------------------------------*/ .Template { display: none; } .ClearFix::after { content: ""; clear: both; display: table; } /* Error Modal Classes */ .ErrorIcon { background: #B2BB1C url("/Themes/DEFAULT/ColoredImages//Icons/ErrorIconWhite.png") no-repeat 50%; width: 64px; height: 64px; box-sizing: border-box; } .WarningIcon { background: #B2BB1C url("/Themes/DEFAULT/ColoredImages//Icons/WarningIconWhite.png") no-repeat 50%; width: 64px; height: 64px; box-sizing: border-box; } /*-------------------------------------------------------*/ /* ERROR Formating */ .validation-summary-errors { font-weight: 800; color: #F15C22; padding-bottom: 5px; } /* styles for validation helpers */ .field-validation-error, .custom-error { color: #F15C22; font-size: 0.75em; } .field-validation-valid { display: none; } fieldset.input-validation-error { border-color: #F15C22 !important; } input.input-validation-error, select.input-validation-error + .ph-select-wrapper > .ph-select, input.input-validation-error[type=hidden] + .ph-wrapper > input, fieldset.validation-summary-errors, .mask-validation-error { border: 1px solid #F15C22 !important; box-shadow: 0 0 2px #F15C22; } input[type="checkbox"].input-validation-error { border: 0 none; } .validation-summary-errors { color: #F15C22; } /*========================================================= * Catalog Page CSS ==========================================================*/ .EventDetailsSection { width: 100%; padding-top: 0.3em; padding-bottom: 0.3em; } .AccordionHeader { background-color: #B2BB1C; color: #363636; padding: 0.3em; margin-top: 0.3em; border: 1px solid #B7B7B7; } .AccordionHeader:hover, .AccordionHeader.Active { background-color: #CCD397; color: #363636; } .ExpandCollapse::before { content: "\➤"; padding-left: 0.3em; padding-right: 0.6em; position: relative; display: inline-block; -ms-transform: scaleX(0.8); -webkit-transform: scaleX(0.8); transform: scaleX(0.8); cursor: pointer; } .ExpandCollapse.Active::before { transform: rotate(90deg) scaleX(0.8); left: -0.2em; top: 0.2em; } .AccordionHeader.Active + .AccordionBody { display: inherit; } .AccordionBody { background-color: #F7f7f7; color: #363636; display: none; padding: 1em; } .EventDetailsSectionsHeader { background-color: #CCD397; color: #363636; } .EventDetailsRow { background-color: #F7f7f7; color: #363636; } .EventDetailsAltRow { background-color: #EFEEE6; color: #363636; } /* The Number with a background circle displaying the count of tags, categories and filters selected */ .CollapsibleCheckedCount { background: #CCD397; color: #363636; float: right; border-radius: 0.5em; text-align: center; width: 2em; margin-top: 0.1em; font-size: 0.8em; } /* Offset color when the button is clicked/selected/checked - The Number with a background circle displaying the count of tags, categories and filters selected */ .AccordionHeader.ExpandCollapse.Active > span.CollapsibleCheckedCount, .AccordionHeader.ExpandCollapse:hover > span.CollapsibleCheckedCount, .ui-button:hover > span.CollapsibleCheckedCount, input:checked + label > span.CollapsibleCheckedCount { background-color: #B2BB1C; color: #363636; } .ButtonBorder:hover > label { box-shadow: 0 0 0 2px #363636; } /* OLARK Overrides */ #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button { background-color: #B2BB1C !important; transition: 0.3s !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button .olark-button-text { color: #363636 !important; transition: 0.3s !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button svg path, #hbl-live-chat-wrapper #olark-wrapper .olark-top-bar-arrow { /*fill: @PrimaryText !important;*/ stroke: #363636 !important; transition: 0.3s !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button svg circle { fill: #363636 !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button:hover, #hbl-live-chat-wrapper #olark-wrapper .olark-top-bar { background-color: #CCD397 !important; transition: 0.3s !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button:hover .olark-button-text, #hbl-live-chat-wrapper #olark-wrapper .olark-top-bar-text { color: #363636 !important; transition: 0.3s !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button:hover svg path, #hbl-live-chat-wrapper #olark-wrapper .olark-top-bar-arrow { /*fill: @SecondaryText !important;*/ stroke: #363636 !important; transition: 0.3s !important; } #hbl-live-chat-wrapper #olark-wrapper .olark-launch-button:hover svg circle { fill: #363636 !important; } /* Password Checker Classes*/ .PassReqMet { text-decoration: line-through; opacity: 0.7; } /****************************************************************************** Status Check Box ******************************************************************************/ .Status.MVCCheck h3:first-of-type { display: inherit; color: #B2BB1C; } .Status.MVCCheck h3:last-of-type { display: none; } /****************************************************************************** Footer link classes ******************************************************************************/ .FooterLink { margin-left: 7px; margin-right: 7px; white-space: nowrap; font-size: 0.75rem; opacity: 0.5; } /****************************************************************************** Full Screen Modal classes ******************************************************************************/ @media (min-width: 600px) { .fs-modal-titlebar { padding: 0 !important; border: 0 !important; } } @media (min-width: 600px) { .fs-modal-title { display: none !important; } } @media (min-width: 600px) { .fs-modal-titlebar-close { display: block !important; position: fixed !important; top: 0.4em !important; right: 0.4em !important; font-size: 4em !important; padding: 0.4em !important; box-shadow: 0 0 20px #000000 !important; background-image: url("/Themes/DEFAULT/ColoredImages/close.png") !important; background-repeat: no-repeat !important; background-position-x: 13px !important; background-position-y: 14px !important; } } @media (min-width: 600px) { .fs-modal-titlebar-close:hover { background-image: url("/Themes/DEFAULT/ColoredImages/close_hover.png") !important; } } @media (min-width: 600px) { .MainBody.blur { filter: blur(3px); } } .modalConfirmButtons, .modalAlertButtons { margin-top: 1em; width: 100%; text-align: center; } /****************************************************************************** Announcement classes ******************************************************************************/ @media (max-width: 600px) { #fsModalAnnouncements, #modalAllannouncements { max-height: 1000em !important; } } .announcement { float: left; position: relative; clear: both; margin: 1em 2.5em 0 2.5em; width: 85%; } @media (min-width: 600px) { .announcement { width: 92%; } } .announcement.announcementOverlay { margin: 1.5em 2em 1.5em 2em; } @media (max-width: 600px) { .announcement.announcementOverlay { margin: 1em; width: 94%; } } .announcement.announcementMainPage { position: absolute; top: 0; left: 0; } .announcementContents { float: left; width: 100%; } .announcementMainPage .announcementContents { overflow-x: auto; } .announcementMainPage.hide, .announcementOverlay.hide { display: none !important; } .announcementDismiss { position: absolute; top: 0; right: 0; } .announcementTitle { overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.5em; margin-right: 9em; white-space: nowrap; } @media (max-width: 600px) { .announcementTitle { margin-right: 0em; } } @media (max-width: 600px) { .announcementTitle.mannouncementMainPage { margin-right: 6em; } } .announcementMainPage .announcementMessage { max-height: 180px; overflow-x: auto; } @media (max-width: 600px) { .announcementMainPage .announcementMessage { max-height: 102px; } } .announcementMainPage .announcementMessage, .announcementAll .announcementMessage { font-size: 0.9em; } .announcementOverlay .announcementMessage { padding-top: 0.5em; font-size: 1.1em; } .announcementMessage p { padding: 0.1em 0; font-size: 1em; } .announcementMessage a, fieldset a:not(.ui-button) { color: #00B1B0 !important; text-decoration: underline; } .announcementMessage a:hover, fieldset a:hover:not(.ui-button) { color: rgba(0, 177, 176, 0.6) !important; } .announcementAction { cursor: pointer; text-decoration: underline; } @media (max-width: 600px) { .announcementAction { position: relative; clear: both; float: left; padding-top: 0.8em; } } @media (min-width: 600px) { .announcementAction { position: absolute; top: -0.2em; right: 0; } } .announcementAll .announcementAction, .announcement.hideAction .announcementAction { display: none !important; } #AnnouncementsMainPage { position: relative; max-height: 230px; height: 230px; overflow: hidden; margin: 0 8px 8px 0; } @media (max-width: 600px) { #AnnouncementsMainPage { margin: 0 4px 4px 1px; height: 150px; } } .announcementMainPageButton { position: absolute; top: 0; height: 100%; width: 2em; cursor: pointer; text-align: center; } #AnnouncementsMainPage.single .announcementMainPageButton, #AnnouncementsMainPage.swiping .announcementMainPageButton { display: none; } .announcementMainPageButton span { top: 50%; margin-top: -8px; } .announcementMainPageButton:hover { opacity: 0.2; background-color: #EFEEE6; } #announcementsMainPagePrev { left: 0; } #announcementsMainPageNext { right: 0; } #announcementsMainPageCircles { position: absolute; bottom: 0; width: 100%; text-align: center; } #announcementsMainPageCircles .ui-icon-bullet, #announcementsMainPageCircles .ui-icon-radio-off.selected { display: none; } #announcementsMainPageCircles .ui-icon-radio-off, #announcementsMainPageCircles .ui-icon-bullet.selected { display: inline-block; } #announcementsMainPageCircles .ui-icon-radio-off { cursor: pointer; } #AutoscrollTip { position: absolute; bottom: 0.3em; right: 0.3em; font-size: 0.7em; font-style: italic; } @media (max-width: 600px) { #AutoscrollTip { display: none; } } /*************************************************/ /********* Clarity Styles ***********************/ .ContentBox .Comment { color: #363636; background-color: #CCD397; } /*************************************************/ /********* Checkbox Styles ***********************/ input[type=checkbox] + label:not(.ui-checkboxradio-label) { padding-left: 22px; padding-right: 3px; margin-left: -21px; min-height: 18px; cursor: pointer; position: relative; } input[type=checkbox] + label:not(.ui-checkboxradio-label)::before { position: absolute; content: ""; background-color: #FFFFFF; border: 1px solid #23394E; height: 13px; width: 13px; left: 0; top: 0; } input[type=checkbox]:checked + label:not(.ui-checkboxradio-label)::after { content: "\2713"; font-family: sans-serif; font-weight: bolder; font-size: 15px; color: #23394E; left: 1px; top: -3px; position: absolute; } input[type=checkbox] + label:hover:not(.ui-checkboxradio-label)::before { border-color: #00B1B0; box-shadow: 0 0 2px 0 #00B1B0, 0 0 4px #00B1B0 !important; } /*************************************************/ /*************************************************/ /*************************************************/ /* Scroll Bars */ /*************************************************/ ::-webkit-scrollbar { width: 12px; height: 12px; } .contentBackground ::-webkit-scrollbar, .contentBackground::-webkit-scrollbar { width: 10px; height: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #888f15; border: solid 2px #888f15; } /* Handle */ ::-webkit-scrollbar-thumb { background: #363636; border: solid 2px #888f15; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: rgba(54, 54, 54, 0.6); } /* Buttons */ ::-webkit-scrollbar-button:single-button { width: 12px; height: 12px; background-color: #B2BB1C; background-image: url("/Themes/DEFAULT/ColoredImages/ui-icons_256x240.png"); } .contentBackground ::-webkit-scrollbar-button:single-button, .contentBackground::-webkit-scrollbar-button:single-button { width: 10px; height: 10px; background-size: 224px 210px; } ::-webkit-scrollbar-button:single-button:hover { background-color: #CCD397; background-image: url("/Themes/DEFAULT/ColoredImages/ui-icons_256x240_Hover.png"); } /* Up */ ::-webkit-scrollbar-button:single-button:vertical:decrement { background-position: -1px -18px; } .contentBackground ::-webkit-scrollbar-button:single-button:vertical:decrement, .contentBackground::-webkit-scrollbar-button:single-button:vertical:decrement { background-position: -1px -16px; } /* Down */ ::-webkit-scrollbar-button:single-button:vertical:increment { background-position: -66px -18px; } .contentBackground ::-webkit-scrollbar-button:single-button:vertical:increment, .contentBackground::-webkit-scrollbar-button:single-button:vertical:increment { background-position: -58px -16px; } /*Right*/ ::-webkit-scrollbar-button:single-button:horizontal:increment { background-position: -34px -19px; } .contentBackground ::-webkit-scrollbar-button:single-button:horizontal:increment, .contentBackground::-webkit-scrollbar-button:single-button:horizontal:increment { background-position: -31px -16px; } /*Left*/ ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-position: -98px -19px; } .contentBackground ::-webkit-scrollbar-button:single-button:horizontal:decrement, .contentBackground::-webkit-scrollbar-button:single-button:horizontal:decrement { background-position: -86px -16px; } ::-webkit-scrollbar-corner { background: #888f15; } /*************************************************/ /*************************************************/ /*************************************************/ /* Custom Tabs Widget */ /*************************************************/ .p-tabs-nav { background: transparent !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; padding-top: 0.3em !important; } .p-tabs-tab { border: 0 !important; background: transparent !important; } .p-tabs-tab.ui-state-hover { background: #CCD397 !important; color: #363636 !important; } .p-tabs-tab.ui-tabs-active { margin-bottom: 0 !important; padding-bottom: 0 !important; } /*.p-tabs-tab.ui-state-hover > a { color: @ContentWhite !im .ica-tabs-tab.ui-state-hover > a {*/ /*color: @ContentWhite !important*/ /*}*/ .p-tabs-tab.ui-tabs-active > a { background: #B2BB1C !important; color: #363636 !important; border: 0 !important; } /*************************************************/ /*************************************************/ /*-------------------------------------------------------*/ /* Loading Panel Classes */ .LoadingPanel { width: 100%; height: 100%; top: 0; left: 0; } .LoadingPanel .Background { background-color: #EFEEE6; -ms-opacity: 0.75; opacity: 0.75; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .LoadingPanel .Image { position: absolute; top: 50%; left: 50%; /*padding: 2% 1%;*/ box-sizing: border-box; /*background-color: blueviolet;*/ } .LoadingPanel .Box { float: left; height: 43%; width: 21%; margin: 2%; background-color: #B2BB1C; animation-name: LoadingBox; animation-duration: 2s; animation-iteration-count: infinite; } .LoadingPanel .Text { position: absolute; top: 50%; text-align: center; width: 100%; animation-name: TextFade; animation-duration: 2s; animation-iteration-count: infinite; opacity: 0; color: #363636; } .LoadingPanel .Box.One { width: 46% !important; animation-delay: 0s; } .LoadingPanel .Box.Two { animation-delay: 0.5s; } .LoadingPanel .Box.Three { animation-delay: 0.75s; } .LoadingPanel .Box.Seven { animation-delay: 1s; } .LoadingPanel .Box.Six { animation-delay: 1.25s; } .LoadingPanel .Box.Five { animation-delay: 1.5s; } .LoadingPanel .Box.Four { animation-delay: 1.75s; } @-moz-keyframes LoadingBox { 5% { background-color: #B2BB1C; } 20% { background-color: #CCD397; } 30% { background-color: #B2BB1C; } } @-webkit-keyframes LoadingBox { 5% { background-color: #B2BB1C; } 20% { background-color: #CCD397; } 30% { background-color: #B2BB1C; } } @keyframes LoadingBox { 5% { background-color: #B2BB1C; } 20% { background-color: #CCD397; } 30% { background-color: #B2BB1C; } } @-moz-keyframes TextFade { 10% { opacity: 0; } 40% { opacity: 0.8; } 60% { opacity: 0.8; } 90% { opacity: 0; } } @-webkit-keyframes TextFade { 10% { opacity: 0; } 40% { opacity: 0.8; } 60% { opacity: 0.8; } 90% { opacity: 0; } } @keyframes TextFade { 10% { opacity: 0; } 40% { opacity: 0.8; } 60% { opacity: 0.8; } 90% { opacity: 0; } } /*-------------------------------------------------------*/