www.aleph1.co.uk Git - yaffs-website/blob - vendor/mehrpadin/superfish/css/superfish.css

   1 .block-superfish {
   2   width: 100%;
   3 }
   4 .sf-hidden {
   5   background: transparent !important;
   6   border: 0 none !important;
   7   clip: rect(1px 1px 1px 1px);
   8   clip: rect(1px, 1px, 1px, 1px);
   9   position: absolute !important;
  10   height: 1px !important;
  11   margin:  !important;
  12   overflow: hidden !important;
  13   padding: 0 !important;
  14   width: 1px !important;
  15 }
  16 ul.sf-menu,
  17 ul.sf-menu li {
  18   list-style: none;
  19 }
  20 ul.sf-menu,
  21 ul.sf-menu ul,
  22 ul.sf-menu ol,
  23 ul.sf-menu li,
  24 ul.sf-menu a,
  25 ul.sf-menu span,
  26 ul.sf-menu div {
  27   margin: 0;
  28   padding: 0;
  29 }
  30 ul.sf-menu {
  31   line-height: 1.0;
  32   z-index: 497;
  33 }
  34 ul.sf-menu ul {
  35   left: 0;
  36   position: absolute;
  37   top: -9999px;
  38   width: 12em;
  39 }
  40 ul.sf-menu ul li {
  41   width: 100%;
  42 }
  43 ul.sf-menu li {
  44   float: left;
  45   position: relative;
  46   z-index: 498;
  47 }
  48 ul.sf-menu a,
  49 ul.sf-menu span.nolink {
  50   display: block;
  51   padding: 1em 1.5em;
  52   position: relative;
  53 }
  54 ul.sf-menu li:hover,
  55 ul.sf-menu li.sfHover,
  56 ul.sf-menu li:hover ul,
  57 ul.sf-menu li.sfHover ul {
  58   z-index: 499;
  59 }
  60 ul.sf-menu li:hover > ul,
  61 ul.sf-menu li.sfHover > ul {
  62   left: 0;
  63   top: 2.5em;
  64 }
  65 ul.sf-menu li li:hover > ul,
  66 ul.sf-menu li li.sfHover > ul {
  67   left: 12em;
  68   top: 0;
  69 }
  70 ul.sf-menu.menu,
  71 ul.sf-menu.menu ul,
  72 ul.sf-menu.menu li {
  73   margin: 0;
  74   padding: 0;
  75 }
  76 /**
  77  * Arrows.
  78  */
  79 ul.sf-menu .sf-with-ul {
  80   padding-right: 3em;
  81 }
  82 ul.sf-menu .sf-sub-indicator {
  83   height: 12px;
  84   line-height: 9999px;
  85   opacity: 0.75;
  86   overflow: hidden;
  87   position: absolute;
  88   right: 0.75em;
  89   speak: none;
  90   text-indent: -9999px;
  91   top: 50%;
  92   -webkit-transform: translateY(-50%);
  93   -moz-transform: translateY(-50%);
  94   -ms-transform: translateY(-50%);
  95   -o-transform: translateY(-50%);
  96   transform: translateY(-50%);
  97   width: 12px;
  98 }
  99 ul.sf-menu .sf-sub-indicator:after {
 100   content: "▼";
 101   left: 0;
 102   line-height: 1;
 103   position: absolute;
 104   text-indent: 0;
 105   top: 0;
 106 }
 107 ul.sf-menu ul .sf-sub-indicator:after {
 108   content: "►";
 109 }
 110 ul.sf-menu a:focus > .sf-sub-indicator,
 111 ul.sf-menu a:hover > .sf-sub-indicator,
 112 ul.sf-menu a:active > .sf-sub-indicator,
 113 ul.sf-menu li:hover > a > .sf-sub-indicator,
 114 ul.sf-menu li.sfHover > a > .sf-sub-indicator,
 115 ul.sf-menu span.nolink:hover > .sf-sub-indicator,
 116 ul.sf-menu li:hover > span.nolink > .sf-sub-indicator,
 117 ul.sf-menu li.sfHover > span.nolink > .sf-sub-indicator {
 118   opacity: 1;
 119 }
 120 /**
 121  * Shadow.
 122  */
 123 ul.sf-menu.sf-horizontal.sf-shadow ul,
 124 ul.sf-menu.sf-vertical.sf-shadow ul,
 125 ul.sf-menu.sf-navbar.sf-shadow ul ul {
 126   -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
 127   -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
 128   box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
 129 }
 130 ul.sf-menu.sf-shadow ul.sf-shadow-off {
 131   -webkit-box-shadow: none;
 132   -moz-box-shadow: none;
 133   box-shadow: none;
 134 }
 135 /**
 136  * Multi-column sub-menus.
 137  * Supersubs.js can adjust column widths too and this is a fallback.
 138  */
 139 ul.sf-menu li.sf-multicolumn-column {
 140   display: inline;
 141   float: left;
 142 }
 143 ul.sf-menu li.sf-parent-children-1 ul.sf-multicolumn {
 144   width: 12em;
 145 }
 146 ul.sf-menu li.sf-parent-children-2 ul.sf-multicolumn {
 147   width: 24em;
 148 }
 149 ul.sf-menu li.sf-parent-children-3 ul.sf-multicolumn {
 150   width: 36em;
 151 }
 152 ul.sf-menu li.sf-parent-children-4 ul.sf-multicolumn {
 153   width: 48em;
 154 }
 155 ul.sf-menu li.sf-parent-children-5 ul.sf-multicolumn {
 156   width: 60em;
 157 }
 158 ul.sf-menu li.sf-parent-children-6 ul.sf-multicolumn {
 159   width: 72em;
 160 }
 161 ul.sf-menu li.sf-parent-children-7 ul.sf-multicolumn {
 162   width: 84em;
 163 }
 164 ul.sf-menu li.sf-parent-children-8 ul.sf-multicolumn {
 165   width: 96em;
 166 }
 167 ul.sf-menu li.sf-parent-children-9 ul.sf-multicolumn {
 168   width: 108em;
 169 }
 170 ul.sf-menu li.sf-parent-children-10 ul.sf-multicolumn {
 171   width: 120em;
 172 }
 173 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(2),
 174 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(1) {
 175   width: 50%;
 176 }
 177 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(3),
 178 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(2),
 179 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(1) {
 180   width: 32.333%;
 181 }
 182 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(4),
 183 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(3),
 184 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(2),
 185 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(1) {
 186   width: 25%;
 187 }
 188 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(5),
 189 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(4),
 190 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(3),
 191 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(2),
 192 ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(1) {
 193   width: 20%;
 194 }
 195 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(6),
 196 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(5),
 197 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(4),
 198 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(3),
 199 ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(2),
 200 ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(1) {
 201   width: 16.665%;
 202 }
 203 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(7),
 204 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(6),
 205 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(5),
 206 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(4),
 207 ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(3),
 208 ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(2),
 209 ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(1) {
 210   width: 14.2855%;
 211 }
 212 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(8),
 213 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(7),
 214 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(6),
 215 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(5),
 216 ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(4),
 217 ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(3),
 218 ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(2),
 219 ul.sf-menu li.sf-multicolumn-column:nth-child(8):nth-last-child(1) {
 220   width: 14.2855%;
 221 }
 222 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(9),
 223 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(8),
 224 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(7),
 225 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(6),
 226 ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(5),
 227 ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(4),
 228 ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(3),
 229 ul.sf-menu li.sf-multicolumn-column:nth-child(8):nth-last-child(2),
 230 ul.sf-menu li.sf-multicolumn-column:nth-child(9):nth-last-child(1) {
 231   width: 11.111%;
 232 }
 233 ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(10),
 234 ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(9),
 235 ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(8),
 236 ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(7),
 237 ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(6),
 238 ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(5),
 239 ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(4),
 240 ul.sf-menu li.sf-multicolumn-column:nth-child(8):nth-last-child(3),
 241 ul.sf-menu li.sf-multicolumn-column:nth-child(9):nth-last-child(2),
 242 ul.sf-menu li.sf-multicolumn-column:nth-child(10):nth-last-child(1) {
 243   width: 10%;
 244 }
 245 /**
 246  * "Vertical" type.
 247  */
 248 ul.sf-menu.sf-vertical {
 249   width: 12em;
 250 }
 251 ul.sf-menu.sf-vertical li {
 252   width: 100%;
 253 }
 254 ul.sf-menu.sf-vertical li:hover > ul,
 255 ul.sf-menu.sf-vertical li.sfHover > ul {
 256   left: 12em;
 257   top: 0;
 258 }
 259 ul.sf-menu.sf-vertical .sf-sub-indicator:after {
 260   content: "►";
 261 }
 262 /**
 263  * "Navbar" type.
 264  */
 265 ul.sf-menu.sf-navbar {
 266   position: relative;
 267 }
 268 ul.sf-menu.sf-navbar li {
 269   position: static;
 270 }
 271 ul.sf-menu.sf-navbar li li {
 272   position: relative;
 273 }
 274 ul.sf-menu.sf-navbar li ul,
 275 ul.sf-menu.sf-navbar li li li {
 276   width: 100%;
 277 }
 278 ul.sf-menu.sf-navbar li li {
 279   width: auto;
 280   float: left;
 281 }
 282 ul.sf-menu.sf-navbar li li:hover > ul,
 283 ul.sf-menu.sf-navbar li li.sfHover > ul,
 284 ul.sf-menu.sf-navbar > li.active-trail > ul {
 285   left: 0;
 286   top: 2.5em;
 287 }
 288 ul.sf-menu.sf-navbar li li li:hover > ul,
 289 ul.sf-menu.sf-navbar li li li.sfHover > ul {
 290   left: 12em;
 291   top: 0;
 292 }
 293 ul.sf-menu.sf-navbar ul .sf-sub-indicator:after {
 294   content: "▼";
 295 }
 296 ul.sf-menu.sf-navbar ul ul .sf-sub-indicator:after {
 297   content: "►";
 298 }
 299 /**
 300  * sfSmallscreen.
 301  */
 302 ul.sf-menu.sf-accordion {
 303   display: none;
 304   position: absolute;
 305 }
 306 ul.sf-menu.sf-accordion,
 307 ul.sf-menu.sf-accordion ul,
 308 ul.sf-menu.sf-accordion li {
 309   float: left;
 310   width: 100%;
 311 }
 312 ul.sf-menu.sf-accordion ul {
 313   margin: 0;
 314   padding: 0;
 315 }
 316 ul.sf-menu.sf-accordion.sf-expanded,
 317 ul.sf-menu.sf-accordion li.sf-expanded > ul {
 318   left: auto !important;
 319   position: relative;
 320   top: auto !important;
 321 }
 322 ul.sf-menu.sf-accordion .sf-sub-indicator:after {
 323   content: "▼";
 324 }
 325 ul.sf-menu.sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
 326   content: "▼";
 327   margin: 0 0 0 1em;
 328 }
 329 ul.sf-menu.sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
 330   content: "▲";
 331 }
 332 /**
 333  * RTL support.
 334  */
 335 ul.sf-menu.rtl,
 336 ul.sf-menu.rtl li {
 337   float: right;
 338 }
 339 ul.sf-menu.rtl li:hover > ul,
 340 ul.sf-menu.rtl li.sfHover > ul {
 341   left: auto;
 342   right: 0;
 343 }
 344 ul.sf-menu.rtl li li:hover > ul,
 345 ul.sf-menu.rtl li li.sfHover > ul {
 346   left: auto;
 347   right: 12em;
 348 }
 349 ul.sf-menu.rtl ul {
 350   left: auto;
 351   right: 0;
 352 }
 353 ul.sf-menu.rtl .sf-sub-indicator {
 354   left: 0.75em;
 355   right: auto;
 356 }
 357 ul.sf-menu.rtl.sf-horizontal ul .sf-sub-indicator:after {
 358   content: "◄";
 359 }
 360 ul.sf-menu.rtl.sf-horizontal.sf-shadow ul,
 361 ul.sf-menu.rtl.sf-vertical.sf-shadow ul,
 362 ul.sf-menu.rtl.sf-navbar.sf-shadow ul ul {
 363   -webkit-box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
 364   -moz-box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
 365   box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
 366 }
 367 ul.sf-menu.rtl li.sf-multicolumn-column {
 368   float: right;
 369 }
 370 ul.sf-menu.rtl.sf-vertical li:hover > ul,
 371 ul.sf-menu.rtl.sf-vertical li.sfHover > ul {
 372   left: auto;
 373   right: 12em;
 374 }
 375 ul.sf-menu.rtl.sf-vertical .sf-sub-indicator:after {
 376   content: "◄";
 377 }
 378 ul.sf-menu.rtl.sf-navbar li li {
 379   float: right;
 380 }
 381 ul.sf-menu.rtl.sf-navbar ul ul .sf-sub-indicator:after {
 382   content: "◄";
 383 }
 384 ul.sf-menu.rtl.sf-navbar li li:hover > ul,
 385 ul.sf-menu.rtl.sf-navbar li li.sfHover > ul {
 386   left: auto;
 387   right: 0;
 388 }
 389 ul.sf-menu.rtl.sf-navbar li li li:hover > ul,
 390 ul.sf-menu.rtl.sf-navbar li li li.sfHover > ul {
 391   left: auto;
 392   right: 12em;
 393 }
 394 ul.sf-menu.rtl.sf-accordion.sf-expanded,
 395 ul.sf-menu.rtl.sf-accordion li.sf-expanded > ul {
 396   right: auto !important;
 397 }