/******* Bootstrap Overrides for D3 Nav Bars ******* */ /***** Used to override the tag in the themes CSS files *****/ body { background-color: #FFF !important; } a.skip-main { left:-999px; position:absolute; top:auto; width:1px; height:1px; overflow:hidden; z-index:-999; } a.skip-main:focus, a.skip-main:active { color: #fff; background-color:#5a5a5a; left: auto; top: auto; width: 25%; height: auto; overflow:auto; margin: 10px 35%; padding:4px; text-align:center; font-size:1.2em; z-index:999; /* font-family:Arial, Helvetica, sans-serif; */ } #D3TopNavBar .navbar { border: none!important; } #D3TopNavBar .navbar-inverse { background-color: transparent !important; border-color: transparent !important; /* margin-bottom:-10px!important; */ } #D3TopNavBar .navbar-inverse .navbar-toggle { border:none!important; } #D3TopNavBar.navbar-inverse .pull-right { background-color: #FFF !important; } .col-sm-12, .col-xs-3, .col-xs-6 { padding-left: 0px !important; padding-right: 0px !important; } /******** Hamburger Menu ********/ #D3TopNavBar .navbar-toggle { display: none!important; background-color: transparent !important; background-image: none !important; float: none !important; border-radius: 0 0 !important; margin: 0 0 0 5px !important; } .navbar-toggle .ham-icon[name="menu-outline"], .navbar-toggle .ham-icon[name="close-outline"] { width: 2.2em; height: 2.6em; margin-top: -7px; padding-left:5px; display: block; } .D3navWrapper .navbar-collapse.collapse { display: block !important; } .D3navWrapper .navbar-collapse.collapse.in { display: block !important; } #D3schoolBannerBox p { margin: 0 !important; } #D3TopNavBar button { width: auto !important; } .D3headContainer { background-color: #FFF; } #D3TopNavBar { height: 2.8em; width: fit-content !important; border-top: none !important; border-bottom: none !important; } .D3navWrapper { display: flex; justify-content: flex-end; height: auto; width: auto; position: relative; margin-top:-2.4em; } .D3NavButtonBox { width: auto; right: -2.4%; } #D3TopNavBar.navbar { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: 0; margin: 0 auto; } .navbar-default { background-color: transparent; border: none; } .navbar-collapse { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .mobile-search { display: none; } /****** Google Translator Image ******/ #translate-container #translateButton img { width:80%; height: auto; margin-top:0px; } /*********** D3 Disclosure Menu ************/ .D3navWrapper .disclosure-nav { background-color:#FFF; display: flex; list-style-type: none; padding: 0; margin: 0; border-left:none; flex-wrap: wrap; } .D3navWrapper .disclosure-nav .main-link { padding: 0.28em 0.78em; text-decoration: none; color:#000; } .D3navWrapper .disclosure-nav button{ padding:0.28em 0.38em; margin-left:-8px; } .D3navWrapper .disclosure-nav ul { background-color: #FFF; border: 1px solid #484848; border-bottom:5px solid #484848; border-radius: 0 0 10px 10px; min-width: 375px; padding: 1em; z-index: 100; overflow: hidden; } .D3navWrapper .disclosure-nav ul { right:0; left:-6.8em; } .D3navWrapper .disclosure-nav li { border-right:none!important; } .D3navWrapper .disclosure-nav > li { display: flex; position: relative; } .D3navWrapper li.levelhighlightTop { margin:0.18em 0 0 0.10em; font-weight: bold; text-transform: uppercase; width: 100%; font-size: 1.1em; /* background-color:pink; */ } .D3navWrapper ul .menuItemsTopBox { display: flex; flex-direction: row; flex-wrap: wrap; position:inherit; border: none; border-top: none!important; padding: 0; justify-content: space-between; width: min-content; gap:5%; padding-right:1.6em; } .D3navWrapper .menuItemsTopBox li { display: flex; flex:1 1 auto; width:40%; /**/ /* border:1px solid green; */ } .D3navWrapper .disclosure-nav ul .menuItemsTopBox a { left:0; border: 0; color: #000; padding: 0.3em 0em; text-decoration: none; } .D3navWrapper .disclosure-nav button:focus, .D3navWrapper .disclosure-nav .main-link:focus { border-color: transparent; outline: none; } /********* Controls the Top Menu dropdown arrow ************/ .D3navWrapper .disclosure-nav button:hover, .D3navWrapper .disclosure-nav button[aria-expanded="true"] { background-color: transparent; /* border: 1px solid #dc3545; */ } .D3navWrapper .disclosure-nav button:hover::after, .D3navWrapper .disclosure-nav button[aria-expanded="true"]::after { border-color: #000; } .D3navWrapper .disclosure-nav ul a:hover, .D3navWrapper .disclosure-nav ul a:focus { background-color: #FFF; } .D3navWrapper .disclosure-nav ul a:focus { outline: 1px dotted rgb(6 55 50 / 100%); } /************** #dnnMenu USED FOR MOBILE VIEW ***************/ #dnnMenu .topLevel > li > a, #dnnMenu .topLevel > li > a:focus, #dnnMenu .topLevel > li > a:hover { text-decoration: none; font-size: 1.2em; border-right-style: solid; border-right-width: 1px; height: 2.6em !important; padding-top: 0.68em; } /**** Top menu selected ****/ #D3NavBarBkg #D3TopNavBar.navbar-inverse .navbar-nav .active > a { } #D3NavBarBkg #dnnMenu .navbar-default .topLevel > li > a { -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } /**** D3 top menu dropdown ****/ #D3NavBarBkg #dnnMenu .dropdown-menu { -moz-border-radius: 0; -webkit-border-radius: 0; padding: 10px 0 6px 0; font-size: 100% !important; border-bottom: 10px solid #484848; border-radius: 0 0 8px 8px; } /**** D3 top menu dropdown for top arrow ****/ #D3NavBarBkg #dnnMenu .dropdown-menu::after { bottom: 100%; content: " "; height: 0; width: 55%; border-width: 2px; position: absolute; pointer-events: none; top: 0; left: 0; margin-left: 0; } /**** D3 top menu dropdown bottom border color ****/ #D3NavBarBkg #dnnMenu .dropdown-menu li { background: none; float: none; clear: both; width: auto; padding: 1px 1px; -o-transition: all .3s ease 0s; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; transition: all .3s ease 0s; border: none; } #dnnMenu .dropdown-menu li:hover { background: #eaf9fc; } #dnnMenu .dropdown-menu li:last-child { border: none; } /*** D3 Top menu dropdown text color ***/ #dnnMenu .dropdown-menu li > a { background: transparent; text-decoration: none; color: #204B89; /* Text color for all dropdown menus */ } #dnnMenu .dropdown-menu li.active > a, #dnnMenu .dropdown-menu li.active a:hover, #dnnMenu .dropdown-menu li.active a:focus { text-decoration: none; background: none; } #dnnMenu .dropdown-menu a:hover { color: #2d75c1; } #dnnMenu .subLevelRight::after { border: none; } /**** Top menu selected dropdown ****/ #D3TopNavBar.navbar-inverse #dnnMenu .dropdown-menu li.active, #D3TopNavBar.navbar-inverse #dnnMenu .dropdown-menu li.active > a { font-weight: bold; background: #eaf9fc; } /**** Top menu selected hover dropdown ****/ #D3TopNavBar.navbar-inverse #dnnMenu .dropdown-menu li.active > a:hover { background: #eaf9fc; } /****** 971 Fix ************/ @media only screen and (max-width:991px) { /******** Hamburger Menu ********/ #D3TopNavBar .navbar-toggle { display: block!important; } .desktopMenu { display: block; } .menuIcon-hidden{ display: none; } .D3headContainer { padding:1em 0 2em 0; margin-top:2em; } .D3SearchItemsWrapper { margin-right: 1em; } .D3SchoolLogo { margin-left: 1em; } .mobile-search { display:block; padding: 0.48em 1em; margin-bottom: -0.58em; border-top: 1px solid red; } #D3TopNavBar .navbar-toggle { display: block!important; } .navbar-toggle .ham-icon[name="menu-outline"] { display: block; cursor: pointer; } .navbar-toggle .ham-icon[name="close-outline"] { display: block; } .D3navWrapper .navbar-collapse.collapse { display: none!important; } .D3navWrapper .navbar-collapse.collapse.show { display: block!important; margin-top: 1.6em; } .D3SearchItemsWrapper #schoolSearchItemsBox { position: relative; z-index: 10; height: 2.8em; right:4.5em; width:50%; display: flex; flex-direction: column; align-items: end; } .D3NavButtonBox { margin-right:1em; } .D3SchoolLogo img { width:80%; height: auto; } .D3NavButtonBox { margin-right: 1em; position: absolute; top: 0; right: 1em; } .D3navWrapper { display: block; } .D3navWrapper .disclosure-nav ul { border-top: 1px solid #ccc; display: block; } /***** Mobile Menu Styles *******/ .D3navWrapper .disclosure-nav { flex-direction: column; margin-top:-2px; } /******** Lever 1 Items ***************/ .D3navWrapper, .D3navWrapper .disclosure-nav, .D3navWrapper .disclosure-nav button { border:none; background-color: #3F3F3F!important; } .D3navWrapper .disclosure-nav .main-link { background-color: #3F3F3F!important; border-left: 1px solid #3F3F3F!important; color:#FFF!important; border-bottom: 1px solid #2f2f2f; } /***************************************/ /******** Arrow Items ***************/ .D3navWrapper .disclosure-nav button[aria-expanded="false"], .D3navWrapper .disclosure-nav button[aria-expanded="true"] { position: absolute; right: 0.28em; top: 6px; width: 2em; } .D3navWrapper .disclosure-nav button:hover::after, .D3navWrapper .disclosure-nav button[aria-expanded="true"]::after { border-color: #FFF!important; } .D3navWrapper .disclosure-nav button::after { border-bottom: 1px solid #FFF!important; border-right: 1px solid #FFF!important; } .D3navWrapper .disclosure-nav li { display:block; } .D3navWrapper .disclosure-nav li:last-child { display:block; } .D3navWrapper .disclosure-nav ul a:hover, .D3navWrapper .disclosure-nav ul a:focus { background-color: black; } /***************************************/ /******** 2nd Level Items ***************/ .D3navWrapper .d2-level2-one { width:100%!important; border-radius: 0 0 0 0!important; padding:0!important; min-width:100%!important; left:0!important; border:none!important; background-color:#000!important; position: relative; } .D3navWrapper .disclosure-nav ul { left:0; } .D3navWrapper ul .menuItemsTopBox { display: block; background-color: #000; position:relative!important; border-radius: 0 0 0 0!important; width:100%!important; } .D3navWrapper .disclosure-nav ul .menuItemsTopBox a { padding-left:1.8em; color:#FFF; } .D3navWrapper .levelhighlightTop { display:none!important; } } @media only screen and (max-width:640px) { .D3NavButtonBox { top: 3.5em; right:-0.48em; } /****** Google Translator Image ******/ .translate-button { text-align: right; margin-right: 1em; } #translate-container #translateButton img { width:65%; } } @media only screen and (max-width:510px) { .D3SchoolLogo img { width:80%; height: auto; } .D3SearchItemsWrapper { margin-right: -0.88em; } .icon-GoogleTrans img { width:85%; height: auto; } .icon-GoogleTrans { margin-right: -1em; margin-bottom: -1.2em; } #D3NavBarBkg #navBar.navbar-collapse.collapse.in { margin-bottom:-2.5em; background-color: #e2cd62; } } @media only screen and (max-width:420px) { .D3SchoolLogo img { width:50%; } .D3searchMenuContainer { display: block; margin-top: -2.8em; } /****** Google Translator Image ******/ #translate-container #translateButton img { width:75%; } .D3NavButtonBox { top: 4em; } } @media only screen and (max-width:300px) { .D3SearchItemsWrapper { margin-right: -2em; } /****** Google Translator Image ******/ #translate-container #translateButton img { width:55%; } .D3SearchItemsWrapper .searchInputContainer { width: 60%; } .D3SearchItemsWrapper #schoolSearchItemsBox #dnn_dnnSEARCH_ClassicSearch .NormalTextBox { margin-left: 0.78em; } .D3SearchItemsWrapper .search a.SearchButton:link, .D3SearchItemsWrapper .SearchButton { right: 0; } }