/** * Navigation stylesheet for manchester.ac.uk v2 (2013) * * @author Robert J Lambert * @version 2.40 * @copyright Copyright: (c) 2013 The University of Manchester, UK, all rights reserved. * @thanks Zurb Foundation, foundation.zurb.com; paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/; */ /*********** Table of Contents ************** :: Rock the Nav Bar :: IE8, IE7.. (must stay here, directly after main styling) :: Flyouts :: Sub Nav Flyouts :: Vertical Side Nav Bar :: Related Links :: Breadcrumbs :: Others :: Fluid, Responsive Layouts :: New SideNav and Breadcrumbs */ /** * Rock the Nav Bar. * * Desktop Layout (769px+). Inherits styles from Mobile & Tablet Layout */ .nav-bar { height: 38px; margin: 0px 0 0 0; } .nav-bar>li { list-style: none; margin: 0 6px 0 0; padding: 0; display: block; position: relative; float: left; line-height: 38px; color: #fff; /*background-image: -moz-linear-gradient(top, #565656, #343434); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #565656), color-stop(1.0, #343434))*/; background-color: #343434; border: 1px solid #666; border-bottom: none; border-color: #666 #555 #444 #555; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } /*** TEMP disable background gradient due to Mac Safari 9 tabs going green ***/ .nav-bar>li:hover, .nav-bar>li.active { background-color: #fff /* background: rgb(220,220,220); background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(244,244,244,1) 20%, rgba(255,255,255,1) 60%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(220,220,220,1)), color-stop(20%, rgba(244,244,244,1)), color-stop(60%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(244,244,244,1) 20%, rgba(255,255,255,1) 60%); background: -o-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(244,244,244,1) 20%, rgba(255,255,255,1) 60%); background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(244,244,244,1) 20%, rgba(255,255,255,1) 60%); background: linear-gradient(to bottom, rgba(220,220,220,1) 0%, rgba(244,244,244,1) 20%, rgba(255,255,255,1) 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#ffffff', GradientType=0);*/ } .nav-bar>li:hover { color: #333; /* border: 1px solid #666; */ border-color: #ccc #bbb #aaa #bbb; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } /* .nav-bar>li.active:hover>a { cursor: default; } */ .nav-bar>li>a { position: relative; display: block; padding: 0 30px; /* margin: 0 0px 0 0; */ font-size: 1.2em; text-decoration: none; color: #fff; } /*** the "margin: 0 0px 0 0;" caused slight nudge left of active nav-bar text ***/ /* ****** Home icon *******/ .nav-bar>li.home, .nav-bar>li.home a { f; height: 38px; } .nav-bar>li.home>a { width: auto; min-width: 44px; /* line-height: 32px; height: 32px; */ margin: 0; padding: 0; text-align: center; background: #343434 url("/medialand/shared/images/icons/general/home-white.png") center no-repeat; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-bar>li.home>a:hover { background: #fff url("/medialand/shared/images/icons/general/home-black.png") center no-repeat; } .nav-bar>li.home.active/* , .nav-bar>li.home.active>a */ { /* height: 44px; */ border-bottom: none; border-bottom: 1px solid #fff; } .nav-bar>li.home.active>a { background: #fefefe url("/medialand/shared/images/icons/general/home-black.png") center no-repeat; } .nav-bar>li.home.active>a:hover { background: #fff url("/medialand/shared/images/icons/general/home-black.png") center no-repeat; } .nav-bar>li a:hover, .flyout:hover { color: #333; background: none; } .nav-bar>li ul { margin-bottom: 0; } .nav-bar>li.has-flyout>a:first-child { padding-right: 22px; margin-right: 14px; position: relative; } .nav-bar>li.has-flyout>a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #ddd transparent transparent transparent; position: absolute; right: 4%; top: 18px; } .nav-bar>li.has-flyout>a.flyout-toggle { position: absolute; display: block; z-index: 2; right: 0px; top: 0; padding: 20px; margin: 0 0 0px 0; border-left: 0 !important; } .nav-bar>li.has-flyout.is-touch>a.flyout-toggle { border-left: 1px dashed #ddd; } .nav-bar>li.has-flyout>a:first-child:after { right: 2%; top: 18px; } .nav-bar>li>a:first-child { } /* ****** Quick Links icon *******/ .nav-bar>li.quick-links, .nav-bar>li.quick-links:hover { background: none !important; border: none; } .lt-ie9 .nav-bar>li.quick-links, .lt-ie9 .nav-bar>li.quick-links:hover { background: none !important; border: none; } /* ****** Active *******/ .nav-bar>li.active { height: 44px; /* line-height: 44px; */ color: #343434; border: 1px solid #ccc; /* border-bottom: 5px solid #fff; */ } .nav-bar>li.active a { color: #343434; } .nav-bar>li.active.without-link { padding: 0 30px; font-size: 1.2em; } .nav-bar ul li, .nav-bar ol li { line-height: 1.4; margin: 0; padding: 0; } .nav-bar>li.active/* , .nav-bar>li.home.active>a */ { /* height: 44px; */ border-bottom: none; border-bottom: 1px solid #fff; } /*** Trying to make active tabs when using dynamic megamenu main tabs nav object: ***/ .nav-bar>li:empty { padding: 0 90px; font-size: 14px; text-decoration: none; color: #890; background: #343434; } .nav-bar>li:not(.nav-bar>li>a) { padding: 0 30px; font-size: 14px; text-decoration: none; color: #890; /*background: #343434; */} #MainNavigation .nav-bar>li.active>a, #MainNavigation .nav-bar>li:hover>a { color: #343434; } /***/ /** * IE tweaks & fixes */ .lt-ie9 #MainNavigation .nav-bar { min-width: 750px; } .lt-ie9 #MainNavigation .nav-bar>li { padding: 0 0.5%; margin: 0 5px 0 0; } .lt-ie9 #MainNavigation .nav-bar>li.home { padding: 0; margin-right: 5px; } .lt-ie9 .nav-bar>li { list-style: none; margin: 0 6px 0 0; padding: 0 1.2%; } .lt-ie9 .nav-bar>li.has-flyout>a:first-child { padding-right: 18px; margin-right: 4px; } /* .lt-ie9 .nav-bar>li.has-flyout>a:first-child:after { right: -8px; } */ .lt-ie9 .nav-bar>li>a { padding: 0 10px; font-size: 1.1em; } .lt-ie9 .nav-bar>li>a { padding: 0 0px; margin: 0; font-size: 1.1em; text-decoration: none; color: #fff; } .lt-ie9.no-js #MobileTopNav { display: none; } .lt-ie8 #MobileTopNav /* .nav-bar */ { min-height: 140px; } .lt-ie8 .nav-bar li.has-flyout a { padding-right: 10px } .lt-ie8 .nav-bar li.has-flyout a:after { border-top: none } /* .lt-ie8 .nav-bar .flyout { z-index: 999; display: block; } */ /***/ /** * Flyouts */ .nav-bar .flyout { display: none; } .nav-bar .flyout { padding: 10px 0; background: #fff; color: #343434; margin: 0; border: 1px solid #d9d9d9; position: absolute; top: 38px; left: -1px; width: 250px; z-index: 9999940; -webkit-box-shadow: 6px 7px 15px rgba(0,0,0,0.6); -moz-box-shadow: 6px 7px 15px rgba(0,0,0,0.6); box-shadow: 5px 15px 15px rgba(0,0,0,0.6); border-top: none; } .nav-bar .flyout h1, .nav-bar .flyout h2, .nav-bar .flyout h3, .nav-bar .flyout h4, .nav-bar .flyout h5, .nav-bar .nav-bar .nav-bar .flyout li a, .nav-bar .flyout li, .nav-bar .flyout h4 a, .nav-bar .flyout h5 a { color: #343434; list-style: none; } .nav-bar .flyout.small { width: 200px; } .nav-bar .flyout.smedium { width: 250px; } .nav-bar .flyout.medium { width: 300px; } .nav-bar .flyout.medlarge { width: 350px; } .nav-bar .flyout.large { width: 400px; } .nav-bar .flyout.vlarge { width: 450px; } .nav-bar .flyout.xlarge { width: 500px; } .nav-bar .flyout.xvlarge { width: 550px; } .nav-bar .flyout.xxlarge { width: 600px; } .nav-bar .flyout.xxxlarge { width: 700px; } .nav-bar .flyout.ularge { width: 740px; } @media only screen and (max-width: 768px) { .nav-bar .flyout.ularge { width: 700px; } } .nav-bar .flyout.right { left: auto; right: -2px; } /* .nav-bar .flyout *:first-child { margin-top: 0; } */ .nav-bar .flyout *:last-child { margin-bottom: 0; } .nav-bar .flyout h4 { margin: 0px; font-size: 1.4em } .nav-bar .flyout h5 { margin: 5px 0 2px 0; padding-top: 5px; font-size: 1.2em; font-weight: bold; } .nav-bar .flyout h6 { margin: 4px 0 2px 0; padding-top: 4px; font-size: 1.1em; font-style: italic; font-weight: bold; } /* .nav-bar .flyout ul { margin-bottom: 10px !important;} */ .nav-bar .flyout ul.special { margin: 2px 0 0 0; } .nav-bar .flyout ul.special li { margin-right: 15px; } .nav-bar .flyout ul.special li a { font-size: 100%; padding: 0 4px 0 2px; font-weight: bold; } .nav-bar .flyout ul li { font-size: 0.9em; line-height: 1.4em; } .nav-bar .flyout ul li a { display: block; width: 100%; padding: 1px 6px; color: #343434; } .nav-bar .flyout ul li a:hover, .nav-bar li ul li a:hover { background: #343434; color: #fff; list-style: none; } @media screen and (max-height: 900px) { .nav-bar .flyout .shrunk ul li { line-height: 1.2em; } .nav-bar .flyout .magic-links.three-level.shrunk>ul>li>a { margin-top: 2px; margin-bottom: 1px; font-size: 1.7em; } .nav-bar .flyout .magic-links.three-level.shrunk>ul>li>ul>li>a { margin-top: 3px; margin-bottom: 2px; font-size: 1.2em; } .nav-bar .flyout .magic-links.three-level.shrunk>ul>li>ul>li>ul>li>a { margin-top: 0px; margin-bottom: 2px; font-size: 1em; line-height: 1.1em; } } @media screen and (max-height: 768px) { .nav-bar .flyout .shrunk ul li { line-height: 1.1em; } .nav-bar .flyout .magic-links.three-level.shrunk>ul>li>a { margin-top: 2px; margin-bottom: 1px; font-size: 1.7em; } .nav-bar .flyout .magic-links.three-level.shrunk>ul>li>ul>li>a { margin-top: 3px; margin-bottom: 2px; font-size: 1.1em; } .nav-bar .flyout .magic-links.three-level.shrunk>ul>li>ul>li>ul>li>a { margin-top: 0px; margin-bottom: 2px; font-size: 0.95em; line-height: 1em; } } .it-ie9 .nav-bar .flyout .shrunk ul li { line-height: 1.1em; } /***/ /** * Vertical Side Nav */ .nav-bar.vertical { height: auto; margin: 0px 0 20px 0; } .nav-bar.vertical ul { list-style: none; } .nav-bar.vertical>li { float: none; margin: 0; padding: 0px; color: #333; background: #ddd; border: 1px solid #ccc; border-bottom: none; border-color: #bbb #bbb #aaa #bbb; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .nav-bar.vertical>li:last-child { border-bottom: 1px solid #ccc; } .nav-bar.vertical>li:hover { background: #fff; } .nav-bar.vertical>li.active { background: #fff; border-right: none; } .nav-bar.vertical>li a { color: #222; padding: 8px 15px; font-size: 16px; line-height: 1.2em; } /* 1.1em */ /*.nav-bar.vertical>li a:hover { }*/ /*** Current selection / branch ***/ .nav-bar.vertical li span.currentbranch0 { display: block; background: #fff; } .nav-bar.vertical li span.currentbranch0 a { display: block; color: #343434; } .nav-bar.vertical li, .nav-bar.vertical li span.currentbranch0, .nav-bar.vertical li span.currentbranch0 a { border-right: none; } /*** Sub nav items ***/ .nav-bar.vertical li ul.multilevel-linkul-0 { background: #eee; } .nav-bar.vertical li ul.multilevel-linkul-0 li { border-top: 1px solid #ddd; } .nav-bar.vertical li ul.multilevel-linkul-0 li:hover { background: #fff; } .nav-bar.vertical li ul.multilevel-linkul-0 li a { display: block; margin: 0; padding: 5px 5px 5px 20px; font-size: 0.9em; line-height: 1.2em; } .nav-bar.vertical li ul.multilevel-linkul-0 li a:hover { color: #333; background: #fff; } .nav-bar.vertical li ul li:last-child { border-bottom: 1px solid #ddd; } /*.nav-bar>li .currentsection, .nav-bar>li .currentbranch, .nav-bar .currentbranch0 { color: #343434; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#fff)); background: -moz-linear-gradient(top, #f7f7f7 0%, #fff); border: 1px solid #ccc; border-bottom: 5px solid #fff; }*/ /*.nav-bar.vertical>li li a{ width: 100%; height:100%; } .nav-bar.vertical>li span.currentbranch0 { width:100%; height:100%; margin: 5px 0 0 0;}*/ .nav-bar.vertical>li .flyout { left: 100%; top: -1px; } .nav-bar.vertical>li .flyout.right { left: auto; right: 100%; } @media only screen and (max-width: 1200px) { .nav-bar.vertical>li a { font-size: 1.1em; line-height: 1.2em; } } @media only screen and (max-width: 1000px) { .nav-bar.vertical>li a { font-size: 1em; } } /******* Side Nav Title *******/ .side-nav-title { margin: 0; /* margin-right: 6px; */ padding: 5px 0 5px 16px; font-size: 1.4em; border: 1px solid #ccc; border-bottom: none; } @media only screen and (min-width: 1200px) { .side-nav-title { font-size: 1.6em; } } .side-nav-title a { padding: 0; color: #505050; } .side-nav-title a:hover { border-bottom: none; } .side-nav-title small { font-size: 0.8em; } .side-nav-title small a { color: #a9a9a9; } .lt-ie8 .nav-bar.vertical>li { line-height: 1em; } /******/ /** * Breadcrumbs */ #MainBreadcrumbs { overflow: hidden; height: 50px; padding-bottom: 6px; } .breadcrumbs { width: 100%; text-rendering: optimizeLegibility; line-height: 1; background: #fff; margin: 0; padding: 0.0em 0 0em 0; } .breadcrumbs ul { margin: 0; line-height: 0; padding: 0; } .breadcrumbs ul li, .breadcrumbs ol li { line-height: 0; margin: 0; padding: 0; } .breadcrumbs li { float: left; list-style: none; padding: 0 0 0em 0; } /*.breadcrumbs li:before { content: " "; } .breadcrumbs li:after { content: " "; }*/ .breadcrumbs li:first-child { margin-left: 4px; padding-left: 0px; } .breadcrumbs li:first-child a { padding-left: 0em; } .breadcrumbs li:last-child, .breadcrumbs li.breadcrumbs-last-child, .breadcrumbs li.breadcrumbs-last-child:only-child { color: #a9a9a9; } .breadcrumbs li:last-child { margin-left: 28px; margin-top: 14px; } .breadcrumbs li.breadcrumbs-last-child { margin-left: 28px; margin-top: 14px; } .breadcrumbs li.breadcrumbs-last-child:only-child { margin-left: 2px; margin-top: 15px; margin-bottom: 10px; } .breadcrumbs a { float: left; position: relative; padding: 1em 1em 0.7em 2em; text-decoration: none; color: #343434; } .breadcrumbs a:hover { background: #fff; } .breadcrumbs a::after, .breadcrumbs a::before { content: ""; position: absolute; top: 50%; margin-top: -0.2em; border-top: .4em solid transparent; border-bottom: .4em solid transparent; border-left: 0.6em solid #999; right: -1em; } .breadcrumbs a::before { border-left-color: #bababa; right: -1.1em; z-index: 1; } .breadcrumbs .current, .breadcrumbs .current:hover, .breadcrumbs .current a, .breadcrumbs .current a::after, .breadcrumbs .current a::before { font-weight: bold; background: #fff; border: none; content: normal; cursor: default; } .lt-ie9 .breadcrumbs a:hover { text-decoration: underline; } .lt-ie8 .breadcrumbs a, .lt-ie8 .breadcrumbs a::after, .lt-ie8 .breadcrumbs a::before { content: ""; padding: 0; margin: 0; border: none; } .lt-ie8 .breadcrumbs a { padding: 10px 20px 6px 0; } /***/ /** * Related Links */ .related-links { margin-top: 30px; } .related-links h6 { margin: 0 0 0.6em 1.2em; font-size: 1.2em; } .related-links .nav-bar.vertical { margin-top: 0; } .related-links .nav-bar.vertical li a { font-size: 0.9em; } .related-links .nav-bar.vertical ul li a { font-size: 100% } /***/ /** * Others */ #NavLine { height: 6px; display: block; border-top: 6px solid #343434; width: 100.1%; } /* #MobileTopNav { display: none; } */ /***/ /** * Responsive Layouts */ @media only screen and (min-width: 1450px) { #NavLine { width: 100%; } } @media only screen and (max-width: 1200px) { /* .nav-bar>li { margin: 0 6px 0 0; padding: 0 ; } */ .nav-bar>li>a { padding: 0 15px; font-size: 1.2em; } .nav-bar>li.active.without-link { padding: 0 15px; font-size: 1.1em; } } /******* Small Desktop & Tablet Landscape Layout: 1024px *******/ @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 1000px) { /* .nav-bar>li { margin: 0 6px 0 0; padding: 0; } */ .nav-bar>li>a { padding: 0 15px; font-size: 1em; } .nav-bar>li.active.without-link { padding: 0 15px; font-size: 1em; } } @media only screen and (max-width: 900px) { .nav-bar>li>a { padding: 0 12px; font-size: 0.9em; } .nav-bar>li.active.without-link { padding: 0 12px; font-size: 0.9em; } } /******* Tablet Portrait Layout: 768px *******/ @media only screen and (max-width: 768px) { .nav-bar>li>a { padding: 0 10px; font-size: 0.9em; } } /******* Mobile Layout: 767px- *** Must remain max-width: 767px for the MegaMenu with flyouts to appear on iPad portrait. *******/ @media only screen and (max-width: 767px) { #MobileTopNav .nav-bar { height: 30px; margin: 0; } #MobileTopNav .nav-bar>li { width: 49%; margin: 0;/* line-height: 30px; */ } #MobileTopNav .nav-bar>li:nth-child(even) { margin-right: 2%; } #MobileTopNav .nav-bar>li a { font-size: 1em; } .nav-bar>li { text-align: center; } .nav-bar>li.has-flyout>a:first-child:after { right: 8%; } .nav-bar { height: 32px; margin: 10px 0 0 0; } .nav-bar>li { width: auto; padding: 0 1%; margin: 0 2px 0 0; line-height: 32px; } .nav-bar>li.home, .nav-bar>li.home a { margin: 0; padding: 0; height: 32px; } .nav-bar>li a { margin: 0 0px 0 0; padding: 0 2px; font-size: 12px; } .nav-bar>li.has-flyout>a:first-child { padding-right: 10px; } .nav-bar>li.has-flyout>a:first-child:after { right: 6px; top: 4px; } .nav-bar>li.has-flyout>a.flyout-toggle { padding: 10px 2px; margin-right: 0px; } .nav-bar>li.has-flyout.is-touch>a:first-child { padding-right: 1px; } .nav-bar.vertical>li { text-align: left; } } /******* Large Mobile Portrait & Medium Mobile Landscape Layout: 480px- *******/ @media only screen and (max-width: 480px) { .nav-bar>li>a { padding: 0 5px; } } /******* Medium Mobile Portrait & Small Mobile Landscape Layout: 320px- *******/ @media only screen and (max-width: 320px) { } /******* Smaill Mobile Portrait Layout: 240px- *******/ @media only screen and (max-width: 240px) { } /***/ /****** * ye olde problem of having the mobile nav still displayed above 768px when the window size is increased while the #MobileTopNav is shown (slideToggle open). I think this is due to css and js not being able to communicate with each other ******/ .js #MobileTopNav { display: none; } @media only screen and (min-width: 768px) { /* .no-js */ #MobileTopNav { display: none; } } @media only screen and (min-width: 769px) { /* #MobileTopNav { display: none; background:#890;} .nav-bar #MobileTopNav { display: none; } */ } @media screen and (max-width: 767px) { .nav-bar>li.active { border-bottom: none; } #MobileTopNav .nav-bar>li.home { width: 100%; margin: 0; line-height: 30px; } } /* * Fix exaggerated line-height on long button names when viewing mobile main menu ***********/ @media only screen and (max-width: 350px) { #MobileTopNav .nav-bar>li a[href="/schools-and-colleges/"] { padding-top: 3px; padding-bottom: 3px; line-height: 1em; } } @media only screen and (max-width: 270px) { #MobileTopNav .nav-bar>li a[href="/news-and-events/"], #MobileTopNav .nav-bar>li a[href="/newsandevents/"], #MobileTopNav .nav-bar>li a[href="/news/"] { padding-top: 3px; padding-bottom: 3px; line-height: 1em; } } @media only screen and (max-width: 210px) { #MobileTopNav .nav-bar>li a[href="/our-research/"] { padding-top: 3px; padding-bottom: 3px; line-height: 1em; } } /***/ /** * New SideNav and Breadcrumbs * * @date Oct, 2014 */ /** * Page Title and Sub-Title */ #PageHeader #Title { line-height: 1.2em; } #PageHeader #Title h1 { font-size: 1em; margin-bottom: 0.1em; } #PageHeader #Title a { line-height: 1.2em; } #PageHeader #Title .sub-title { color: #9d9a9c; } /***/ /** * Side Navigation */ #sidebar, #sidebar .nav-bar.vertical ul, #sidebar .nav-bar.vertical li, #sidebar .nav-bar.vertical span, #sidebar .nav-bar.vertical li a { display: block; position: relative; } #sidebar .nav-bar.vertical { margin: 0; display: block; position: relative; } #sidebar .nav-bar.vertical ul { left: 0; display: block; position: relative; } #sidebar .nav-bar.vertical li { background: #fff; border: none; border-top: 1px solid #E2E2E2; border-bottom: 1px solid #FFFFFF; } #sidebar .nav-bar.vertical li a { padding: 0.8em 0.8em 0.8em 40px; -webkit-highlight: inherit; -webkit-user-select: none; -webkit-touch-callout: none; } #sidebar .nav-bar.vertical li a:hover { background-color: #F7F7F7;/* border-left: 2px solid #999; */ } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li { background: #ebeced url('//assets.manchester.ac.uk/corporate/images/design/menu-arrow-left-closed-grey.png') 0.5em 0.9em no-repeat; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li:hover { background: #ebeced url('//assets.manchester.ac.uk/corporate/images/design/menu-arrow-left-closed-grey.png') 0.5em 0.9em no-repeat; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i1 { background-color: #ebeced; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i2 { background-color: #e7e8e9; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i3 { background-color: #e4e5e6; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i4 { background-color: #e1e2e3; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i5 { background-color: #e0e0e0; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i6 { background-color: #dddedf; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li.i7 { background-color: #dadbdc; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs li a:hover { background-color: initial; } #sidebar .nav-bar.vertical.sidenav-breadcrumbs .currentbranch0:hover { background: #F7F6F6 url('//assets.manchester.ac.uk/corporate/images/design/menu-arrow-down-open-grey.png') 0.6em 0.9em no-repeat; } #sidebar .nav-bar.vertical .currentbranch0, #sidebar .nav-bar.vertical.sidenav-breadcrumbs .currentbranch0 { background: #F7F7F7 url('//assets.manchester.ac.uk/corporate/images/design/menu-arrow-down-open-grey.png') 0.6em 0.9em no-repeat; border-bottom: none; } #sidebar .nav-bar.vertical .currentbranch0 a:hover { background: none; } #sidebar .nav-bar.vertical.no-children li a { font-size: 0.9em; } #sidebar .nav-bar.vertical.no-children .currentbranch0 { background: none; background: #F7F7F7; border-left: 2px solid #999; } #sidebar .nav-bar.vertical .multilevel-linkul-0 li:hover { background-position-x: inherit; } /***/ /** * Breadcrumbs */ #MainBreadcrumbs .breadcrumbs li { padding: 1em 1em 1em 0em; } #MainBreadcrumbs .breadcrumbs a::after, .breadcrumbs a::before { border: none; } #MainBreadcrumbs .breadcrumbs a { padding: 0 1em 0 0; } #MainBreadcrumbs .breadcrumbs a:hover { text-decoration: underline; } #MainBreadcrumbs .breadcrumbs li.breadcrumbs-last-child, #MainBreadcrumbs .breadcrumbs li:last-child { margin: 0; } /***/ /** * IE tweaks & fixes */ .lt-ie10 #sidebar .nav-bar.vertical.sidenav-breadcrumbs li a:hover { background: inherit; } .lt-ie9 #PageHeader #Title { line-height: 1.1em; } /***/