/* --------------- navigation ---------------- */ /* === Main menu settings === */ #navigation-wrap { /* navigation menu container to edge of screen */ background:#4c565c; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */ padding: 0; /* padding around 'Menu' and 'Search' buttons on mobile/tablet version */ margin:0; } .navigation { /* navigation menu container to edge of dislay area */ margin:0; z-index:500; position:relative; padding:0 4%; } #menu-icon { /* 'Menu' tab on mobile/tablet */ float:left; position:relative; display:none !important; } #search-icon { /* 'Search' tab on mobile/tablet */ float:right; position:relative; display:none !important; } .js #menu-icon, .js #search-icon { /* If there is javascript, show 'Menu' and 'Search' tabs on mobile/tablet */ display:block !important; background:#f4c300; color:#4C565C; cursor:pointer; float:right; position:relative; } #menubox, #searchbox { /* navigation menu and search field containers */ clear:both; padding:10px 0 0 0; /* padding between 'Menu' and 'Search' buttons and espanded menu */ padding:1rem 0 0 0; } .js #menubox, .js #searchbox { /* if there is javascript. hide the navigation menu and the search field */ display:none; } /* === Top level menu items === */ ul.nice-menu { /* navigation menu UL */ background:#4c565c; /* background of whole navigation bar */ padding-left:0 !important; /* distance between left edge and first tab */ margin:0; list-style:none; width:100%; } ul.nice-menu, ul.nice-menu ul, ul.nice-menu li { border:none; /*reset Nice-Menus CSS*/ } ul.nice-menu li { /* navigation menu tab container */ margin:0; /* make -1px to prevent doubling of borders between tabs. Should be the negative of the border width*/ position:relative; float:none; } ul.nice-menu li a, #menu-icon, #search-icon { /* navigation menu, 'Menu' and 'Search' tabs */ background:#4c565c; /* background for top level tab - usually the same as the navigation background */ color:white; /* top level tab font color*/ font-size:14px; /* font-size for top menu*/ font-size:1.4rem; /* font-size for top menu*/ padding:5px 5%; /* padding of each tab in mobile /tablet version */ padding:0.5rem 5%; font-weight:normal; text-decoration:none; display: block; /* required to makew the links appear as full height tabs */ } ul.nice-menu li a { /* navigation menu tabs */ border-bottom:1px solid #9098A0; /* colour of bottom border on top level menu items in mobile/tablet menu */ } ul.nice-menu li.first a { /* use to add/remove border on first navigation tab */ } ul.nice-menu li.last a { /* use to add/remove border on last navigation tab */ } /* Top level menu items - hover styles */ ul.nice-menu li.active-trail a:hover, /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */ ul.nice-menu li.active-trail:hover a, ul.nice-menu li a:hover, ul.nice-menu li:hover a { /* navigation menu tabs on hover */ background:#9098A0; /* background for top level tab on hover */ color:#fff; /* top level tab font color on hover */ visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */ } ul.nice-menu li a.active:hover, ul.nice-menu li.active-trail a:hover, ul.nice-menu li.active-trail:hover a { /* navigation menu active tabs on hover */ background:#F4c300; /* background for top level active tab on hover */ color:#4C565C; /* top level active tab font color on hover */ visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */ } ul.nice-menu li a.active, ul.nice-menu li.active-trail a { /* navigation menu active tabs */ background:#F4c300; /* background for top level active tab*/ color:#4C565C; /* top level active tab font color */ } /* === Drop down first level === */ /*Child Trigger */ ul.nice-menu li.menuparent .child-trigger { position:absolute; top:0; right:0; cursor:pointer; padding:5px 20px; padding:0.5rem 2rem; border-left:1px solid #ccc; } ul.nice-menu li.menuparent .child-trigger:hover { } ul.nice-menu li.menuparent .child-trigger .arrow { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); display:block; color:#fff; } ul.nice-menu li.menuparent.open-child .child-trigger .arrow { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /*First Level Styling*/ ul.nice-menu li.menuparent ul { /* Drop down navigation menu UL */ list-style:none; left:0; /* IE6&7 need this to position the sublist correctly on hover*/ top:0; /*position of first level drop down menu - height of top level menu plus height of border*/ background:#fff;/* IE needs some sort of background on the nested ul */ width:100%; /*width of drop down tab */ position:relative; /* position the sublist to nearest positioned ancestor, the (ul.nice-menu li) in this case*/ } ul.nice-menu li.menuparent ul li, ul.nice-menu li.menuparent ul li.menuparent ul li { /* Drop down navigation tab container */ border:none; /*reset borders from ul.nice-menu li*/ margin-top:0; /* prevents doubling of top and bottom border - should be a negative of the border width */ width:100% !important; } ul.nice-menu li.menuparent ul li a, ul.nice-menu li.menuparent ul li.menuparent ul li a { /* Drop down navigation tab */ background:#798085 !important; /* background of first level drop down menu in mobile/tablet menu */ color:#fff !important; /* text colour on first level drop down menu in mobile/tablet menu */ border-bottom: 1px solid #9098a0; /* border colour below tabs on mobile/tablet - same as left & right on navigation */ padding:5px 5% 5px 8%; /* padding above/below and left/right on the first level drop down menu */ padding:0.5rem 5% 0.5rem 8%; font-weight:normal; float: none; /*reset the float from ul.nice-menu li a*/ } ul.nice-menu li.menuparent ul li.active-trail a, ul.nice-menu li.menuparent ul li.menuparent ul li.active-trail a { /* Drop down navigation active tab */ background:#f4c300 !important; /* background of active first level drop down menu */ color:#4C565c !important; /* text colour on first level active drop down menu */ } /* drop down first level - hover styles */ ul.nice-menu li.menuparent ul li a:hover { /* Drop down navigation tab on hover */ background:#9098a0 !important; /* background for first level drop down menu on hover */ color:#fff !important; /* font colour on first level drop down menu on hover */ } ul.nice-menu li.menuparent ul li.active-trail a:hover { /* Drop down navigation active tab on hover*/ background:#f4c300 !important; /* background for first level drop down menu on active tab when hovering*/ color:#4c565C !important; /* font colour on first level drop down menu on hover on active tab */ } /*First Level Visibility */ ul.nice-menu li.menuparent ul { /* first level drop down menu */ display:none; /* Initially hide first level drop down menu on mobile/tablet */ visibility:hidden; } ul.nice-menu li:hover ul { /* first level drop down menu on hover */ } ul.nice-menu li.menuparent.open-child ul { /* first level drop down menu */ display:block; /* Display first level drop down menu on mobile/tablet when child trigger is clicked */ visibility:visible; } ul.nice-menu li:hover ul { /* first level drop down menu on hover */ } /* === Drop down Second level === */ ul.nice-menu li.menuparent ul li ul, ul.nice-menu li.menuparent.open-child ul li ul { /*Always hide second level drop down menu*/ display:none; /* Initially hide second level drop down menu */ } ul.nice-menu li.menuparent ul li .child-trigger, ul.nice-menu li.menuparent.open-child ul li .child-trigger { display:none; /*Always hide the child-trigger on second level dropdown menu */ } /* --------------- Responsive Adjustments ---------------- */ /* Note, the CSS outside these Media Queries is used for all devices incl. mobiles */ @media only screen and (min-width: 320px) { /* Mobile & Small screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min-resolution: 192dpi) and (min-width: 320px), only screen and (min-resolution: 2dppx) and (min-width: 320px) { /* Mobile & Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Tablet & Medium screen, non-retina */ /* --------------- navigation ---------------- */ /* === Main menu settings === */ #navigation-wrap { /* navigation menu container to edge of screen */ } .navigation { /* navigation menu container to edge of dislay area */ padding:0 2%; } #menu-icon { /* 'Menu' tab on mobile/tablet */ } #search-icon { /* 'Search' tab on mobile/tablet */ } .js #menu-icon, .js #search-icon { /* If there is javascript, show 'Menu' and 'Search' tabs on mobile/tablet */ } #menubox, #searchbox { /* navigation menu and search field containers */ } .js #menubox, .js #searchbox { /* if there is javascript. hide the navigation menu and the search field */ } /* === Top level menu items === */ ul.nice-menu { /* navigation menu UL */ } ul.nice-menu, ul.nice-menu ul, ul.nice-menu li { } ul.nice-menu li { /* navigation menu tab container */ } ul.nice-menu li a, #menu-icon, #search-icon { /* navigation menu, 'Menu' and 'Search' tabs */ } ul.nice-menu li a {/* navigation menu tabs */ } ul.nice-menu li.first a { /* use to add/remove border on first navigation tab */ } ul.nice-menu li.last a { /* use to add/remove border on last navigation tab */ } /* Top level menu items - hover styles */ ul.nice-menu li.active-trail a:hover, /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */ ul.nice-menu li.active-trail:hover a, ul.nice-menu li a:hover, ul.nice-menu li:hover a, #menu-icon:hover, #search-icon:hover { /* navigation menu tabs on hover */ } ul.nice-menu li a.active:hover, ul.nice-menu li.active-trail a:hover, ul.nice-menu li.active-trail:hover a { /* navigation menu active tabs on hover*/ } ul.nice-menu li a.active, ul.nice-menu li.active-trail a { /* navigation menu active tabs */ } /* === Drop down first level === */ ul.nice-menu li.menuparent ul { /* Drop down navigation menu UL */ } ul.nice-menu li.menuparent ul li, ul.nice-menu li.menuparent ul li.menuparent ul li { /* Drop down navigation tab container */ } ul.nice-menu li.menuparent ul li a, ul.nice-menu li.menuparent ul li.menuparent ul li a { /* Drop down navigation tab */ } ul.nice-menu li.menuparent ul li.active-trail a, ul.nice-menu li.menuparent ul li.menuparent ul li.active-trail a { /* Drop down navigation active tab */ } /* drop down first level - hover styles */ ul.nice-menu li.menuparent ul li a:hover { /* Drop down navigation tab on hover */ } ul.nice-menu li.menuparent ul li.active-trail a:hover { /* Drop down navigation active tab on hover*/ } ul.nice-menu li ul { /* first level drop down menu */ } ul.nice-menu li:hover ul { /* first level drop down menu on hover */ } ul.nice-menu li.menuparent ul li ul { /* second level drop down menu*/ } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and (min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min-resolution: 192dpi) and (min-width: 700px), only screen and (min-resolution: 2dppx) and (min-width: 700px) { /* Tablet & Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1024px) { /* Desktop & Large screen, non-retina */ /* --------------- navigation ---------------- */ /* === Main menu settings === */ #navigation-wrap { /* navigation menu container to edge of screen */ padding:0; /* Reset extra padding from mobile version */ } .navigation { /* navigation menu container to edge of dislay area */ width:auto; max-width:1024px; /* max width of navigatation area on desktop */ margin:0 auto; /* Centres the webpage left to right */ padding:0 2%; } #menu-icon { /* 'Menu' tab on desktop */ display:none !important; } #search-icon { /* 'Search' tab on desktop */ display:none !important; } .js #menu-icon, .js #search-icon { /* If there is javascript, hide 'Menu' and 'Search' tabs on desktop */ display:none !important; } #menubox, #searchbox { /* navigation menu and search field containers */ clear:none; padding:0; display:block; } #menubox { background:#4c565c; /* Colour of navigation area on desktop. If .navigation_wrap is set to none and this is set to none, then only tabs are coloured */ } .js #menubox, .js #searchbox { /* if there is javascript. hide the navigation menu and the search field */ clear:none; padding:0; display:block; } /* === Top level menu items === */ ul.nice-menu { /* navigation menu UL */ height:40px; /* height of navigation bar - should be the same height as 'line-height' in 'ul.nice-menu li a' */ height:4rem; /* height of navigation bar - should be the same height as 'line-height' in 'ul.nice-menu li a' */ width:auto; padding-left:0 !important; /* distance between left edge and first tab */ } ul.nice-menu, ul.nice-menu ul, ul.nice-menu li { } ul.nice-menu li { /* navigation menu tab container */ float:left; } ul.nice-menu li a, #menu-icon, #search-icon { /* navigation menu, 'Menu' and 'Search' tabs */ } ul.nice-menu li a {/* navigation menu tabs */ padding:0 30px !important; /* text padding left and right of each tab */ padding:0 3rem !important; /* text padding left and right of each tab */ line-height:40px; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */ line-height:4rem; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */ border-bottom:none; /* Reset border-bottom as set by Mobile version above */ } ul.nice-menu li.first a { /* use to add/remove border on first navigation tab */ } ul.nice-menu li.last a { /* use to add/remove border on last navigation tab */ } /* Top level menu items - hover styles */ ul.nice-menu li.active-trail a:hover, /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */ ul.nice-menu li.active-trail:hover a, ul.nice-menu li a:hover, ul.nice-menu li:hover a, #menu-icon:hover, #search-icon:hover {/* navigation menu tabs on hover */ } ul.nice-menu li a.active:hover, ul.nice-menu li.active-trail a:hover, ul.nice-menu li.active-trail:hover a { /* navigation menu active tabs on hover */ } ul.nice-menu li a.active, ul.nice-menu li.active-trail a { /* navigation menu active tabs */ } /* === Drop down first level === */ /*Child Trigger */ ul.nice-menu li.menuparent .child-trigger { display:none; /*Hide the child-trigger on Desktop devices */ } /*First Level Styling*/ ul.nice-menu li.menuparent ul { /* Drop down navigation menu UL */ width:185px; /*width of sub list tab - make same as 'ul.nice-menu li ul li a' below */ width:18.5rem; /*width of sub list tab - make same as 'ul.nice-menu li ul li a' below */ top:40px; /*position of first level drop down menu - height of top level menu plus height of border*/ top:4rem; /*position of first level drop down menu - height of top level menu plus height of border*/ position:absolute; /* position the sublist to nearest positioned ancestor, the (ul.nice-menu li) in this case*/ } ul.nice-menu li.menuparent ul li, ul.nice-menu li.menuparent ul li.menuparent ul li { /* Drop down navigation tab container */ } ul.nice-menu li.menuparent ul li a, ul.nice-menu li.menuparent ul li.menuparent ul li a { /* Drop down navigation tab */ background: #ececec !important; /* background of first level drop down menu */ color:#4c565c !important; /* text colour on first level drop down menu */ border-color: #ccc #aaa #aaa #ccc !important; /* border colour around tabs - same as left & right on navigation */ border-width:1px; border-style:solid; border-top:none; font-size:12px; /* font size of first level drop down menu */ font-size:1.2rem; /* font size of first level drop down menu */ padding:3px 15px !important; /* padding above/below and left/right on the first level drop down menu */ padding:0.3rem 15px !important; /* padding above/below and left/right on the first level drop down menu */ line-height:18px; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */ line-height:1.8rem; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */ } ul.nice-menu li.menuparent ul li.active-trail a, ul.nice-menu li.menuparent ul li.menuparent ul li.active-trail a { /* Drop down navigation active tab */ background: #c9c9c9 !important; /* background of active first level drop down menu */ color:#4c565c !important; /* text colour on first level active drop down menu */ } /* drop down first level - hover styles */ ul.nice-menu li.menuparent ul li a:hover { /* Drop down navigation tab on hover */ background:#c9c9c9 !important; /* background for first level drop down menu on hover */ color:#4c565c !important; /* font colour on first level drop down menu on hover */ visibility:visible; /* makes IE7 think something changes on hover, fixes IE sticking dropdown */ } ul.nice-menu li.menuparent ul li.active-trail a:hover { /* Drop down navigation active tab on hover*/ background:#c9c9c9 !important; /* background for first level drop down menu on active tab when hovering*/ color:#4c565c !important; /* font colour on first level drop down menu on hover on active tab */ visibility:visible; /* makes IE7 think something changes on hover, fixes IE sticking dropdown */ } /*First Level Visibility */ ul.nice-menu li.menuparent ul, ul.nice-menu li.menuparent.open-child ul { /* first level drop down menu */ display:none; } ul.nice-menu li.menuparent:hover ul, ul.nice-menu li.menuparent.open-child:hover ul { /* first level drop down menu on hover */ display:block; /* Show first level drop down menu on hover */ visibility:visible; } /*Second Level Visibility */ ul.nice-menu li.menuparent ul li ul, ul.nice-menu li.menuparent:hover ul li ul, ul.nice-menu li.menuparent.open-child ul li ul, ul.nice-menu li.menuparent.open-child:hover ul li ul { /* second level drop down menu*/ display:none; visibility:hidden; } } @media only screen and (-webkit-min-device-pixel-ratio: 2)and (min-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2)and (min-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px), only screen and (min-resolution: 192dpi) and (min-width: 1024px), only screen and (min-resolution: 2dppx) and (min-width: 1024px) { /* Desktop & Large screen, retina, stuff to override above media query */ }