/* --------------- navigation ---------------- */ /* === Main menu settings === */ #navigation-wrap { /* navigation menu container to edge of screen */ background: url(../images/navi_background.png) top repeat-x #cecece; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */ margin:0; } .navigation { /* navigation menu container to edge of dislay area */ margin:0; z-index:500; position:relative; padding:0 2%; } #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; } #menubox, #searchbox { /* navigation menu and search field containers */ clear:both; padding:0 0 10px 0; /* padding between 'Menu' and 'Search' buttons and espanded menu */ padding:0 0 1rem 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: url(../images/navi_background.png) top repeat-x #cecece; /* 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-image:url(../images/navi_background.png); background-position:top; background-repeat:repeat-x; background-color:#cecece; color:#333; /* top level tab font color*/ font-size:16px; /* font-size for top menu*/ font-size:1.6rem; /* 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 */ cursor:pointer; } ul.nice-menu li a { /* navigation menu tabs */ border-bottom:1px solid #8B8f90; /* 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, #menu-icon:hover, #search-icon:hover { /* navigation menu tabs on hover */ background-image:url(../images/navi_hover.png); background-position:top; background-repeat:repeat-x; background-color:#599034; color:#111; /* 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-image:url(../images/navi_hover.png); background-position:top; background-repeat:repeat-x; background-color:#599034; color:#111; /* 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-image:url(../images/navi_hover.png); background-position:top; background-repeat:repeat-x; background-color:#599034; color:#111; /* top level active tab font color */ } /* --------------- 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 */ } #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 */ } } @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 */ max-width:1024px; /* max width of navigatation area on desktop */ width:auto; 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: url(../images/navi_background.png) top repeat-x #cecece; /* 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 */ border-left:1px solid #8B8f90; /* left border ccolour on each 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 20px !important; /* text padding left and right of each tab */ padding:0 2rem !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-left:1px solid #fff; /* left border ccolour on each tab */ border-right:1px solid #8B8f90; /* right border ccolour on each tab */ 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 { border-right:1px solid #fff; /* right border ccolour on each 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 */ border-left:1px solid #eaf5e4; /* left border ccolour on each tab */ border-right:1px solid #8B8f90; /* right border ccolour on each tab */ } 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 */ border-left:1px solid #eaf5e4; /* left border ccolour on each tab */ border-right:1px solid #8B8f90; /* right border ccolour on each tab */ } ul.nice-menu li a.active, ul.nice-menu li.active-trail a { /* navigation menu active tabs */ border-left:1px solid #eaf5e4; /* left border ccolour on each tab */ border-right:1px solid #8B8f90; /* right border ccolour on each tab */ } } @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 */ }