1.sm-clean { 2 background: #eeeeee; 3 border-radius: 5px; 4} 5.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { 6 padding: 13px 20px; 7 /* make room for the toggle button (sub indicator) */ 8 padding-right: 58px; 9 color: #555555; 10 font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif; 11 font-size: 18px; 12 font-weight: normal; 13 line-height: 17px; 14 text-decoration: none; 15} 16.sm-clean a.current { 17 color: #D23600; 18} 19.sm-clean a.disabled { 20 color: #bbbbbb; 21} 22.sm-clean a .sub-arrow { 23 position: absolute; 24 top: 50%; 25 margin-top: -17px; 26 left: auto; 27 right: 4px; 28 width: 34px; 29 height: 34px; 30 overflow: hidden; 31 font: bold 16px/34px monospace !important; 32 text-align: center; 33 text-shadow: none; 34 background: rgba(255, 255, 255, 0.5); 35 border-radius: 5px; 36} 37.sm-clean a .sub-arrow::before { 38 content: '+'; 39} 40.sm-clean a.highlighted .sub-arrow::before { 41 content: '-'; 42} 43.sm-clean > li:first-child > a, .sm-clean > li:first-child > :not(ul) a { 44 border-radius: 5px 5px 0 0; 45} 46.sm-clean > li:last-child > a, .sm-clean > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { 47 border-radius: 0 0 5px 5px; 48} 49.sm-clean > li:last-child > a.highlighted, .sm-clean > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted { 50 border-radius: 0; 51} 52.sm-clean li { 53 border-top: 1px solid rgba(0, 0, 0, 0.05); 54} 55.sm-clean > li:first-child { 56 border-top: 0; 57} 58.sm-clean ul { 59 background: rgba(162, 162, 162, 0.1); 60} 61.sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active { 62 font-size: 16px; 63 border-left: 8px solid transparent; 64} 65.sm-clean ul ul a, 66.sm-clean ul ul a:hover, 67.sm-clean ul ul a:focus, 68.sm-clean ul ul a:active { 69 border-left: 16px solid transparent; 70} 71.sm-clean ul ul ul a, 72.sm-clean ul ul ul a:hover, 73.sm-clean ul ul ul a:focus, 74.sm-clean ul ul ul a:active { 75 border-left: 24px solid transparent; 76} 77.sm-clean ul ul ul ul a, 78.sm-clean ul ul ul ul a:hover, 79.sm-clean ul ul ul ul a:focus, 80.sm-clean ul ul ul ul a:active { 81 border-left: 32px solid transparent; 82} 83.sm-clean ul ul ul ul ul a, 84.sm-clean ul ul ul ul ul a:hover, 85.sm-clean ul ul ul ul ul a:focus, 86.sm-clean ul ul ul ul ul a:active { 87 border-left: 40px solid transparent; 88} 89 90@media (min-width: 768px) { 91 /* Switch to desktop layout 92 ----------------------------------------------- 93 These transform the menu tree from 94 collapsible to desktop (navbar + dropdowns) 95 -----------------------------------------------*/ 96 /* start... (it's not recommended editing these rules) */ 97 .sm-clean ul { 98 position: absolute; 99 width: 12em; 100 } 101 102 .sm-clean li { 103 float: left; 104 } 105 106 .sm-clean.sm-rtl li { 107 float: right; 108 } 109 110 .sm-clean ul li, .sm-clean.sm-rtl ul li, .sm-clean.sm-vertical li { 111 float: none; 112 } 113 114 .sm-clean a { 115 white-space: nowrap; 116 } 117 118 .sm-clean ul a, .sm-clean.sm-vertical a { 119 white-space: normal; 120 } 121 122 .sm-clean .sm-nowrap > li > a, .sm-clean .sm-nowrap > li > :not(ul) a { 123 white-space: nowrap; 124 } 125 126 /* ...end */ 127 .sm-clean { 128 padding: 0 10px; 129 background: #eeeeee; 130 border-radius: 100px; 131 } 132 .sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { 133 padding: 12px 12px; 134 color: #555555; 135 border-radius: 0 !important; 136 } 137 .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { 138 color: #D23600; 139 } 140 .sm-clean a.current { 141 color: #D23600; 142 } 143 .sm-clean a.disabled { 144 color: #bbbbbb; 145 } 146 .sm-clean a.has-submenu { 147 padding-right: 24px; 148 } 149 .sm-clean a .sub-arrow { 150 top: 50%; 151 margin-top: -2px; 152 right: 12px; 153 width: 0; 154 height: 0; 155 border-width: 4px; 156 border-style: solid dashed dashed dashed; 157 border-color: #555555 transparent transparent transparent; 158 background: transparent; 159 border-radius: 0; 160 } 161 .sm-clean a .sub-arrow::before { 162 display: none; 163 } 164 .sm-clean li { 165 border-top: 0; 166 } 167 .sm-clean > li > ul::before, 168 .sm-clean > li > ul::after { 169 content: ''; 170 position: absolute; 171 top: -18px; 172 left: 30px; 173 width: 0; 174 height: 0; 175 overflow: hidden; 176 border-width: 9px; 177 border-style: dashed dashed solid dashed; 178 border-color: transparent transparent #bbbbbb transparent; 179 } 180 .sm-clean > li > ul::after { 181 top: -16px; 182 left: 31px; 183 border-width: 8px; 184 border-color: transparent transparent #fff transparent; 185 } 186 .sm-clean ul { 187 border: 1px solid #bbbbbb; 188 padding: 5px 0; 189 background: #fff; 190 border-radius: 5px !important; 191 box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); 192 } 193 .sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { 194 border: 0 !important; 195 padding: 10px 20px; 196 color: #555555; 197 } 198 .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { 199 background: #eeeeee; 200 color: #D23600; 201 } 202 .sm-clean ul a.current { 203 color: #D23600; 204 } 205 .sm-clean ul a.disabled { 206 background: #fff; 207 color: #cccccc; 208 } 209 .sm-clean ul a.has-submenu { 210 padding-right: 20px; 211 } 212 .sm-clean ul a .sub-arrow { 213 right: 8px; 214 top: 50%; 215 margin-top: -5px; 216 border-width: 5px; 217 border-style: dashed dashed dashed solid; 218 border-color: transparent transparent transparent #555555; 219 } 220 .sm-clean .scroll-up, 221 .sm-clean .scroll-down { 222 position: absolute; 223 display: none; 224 visibility: hidden; 225 overflow: hidden; 226 background: #fff; 227 height: 20px; 228 } 229 .sm-clean .scroll-up:hover, 230 .sm-clean .scroll-down:hover { 231 background: #eeeeee; 232 } 233 .sm-clean .scroll-up:hover .scroll-up-arrow { 234 border-color: transparent transparent #D23600 transparent; 235 } 236 .sm-clean .scroll-down:hover .scroll-down-arrow { 237 border-color: #D23600 transparent transparent transparent; 238 } 239 .sm-clean .scroll-up-arrow, 240 .sm-clean .scroll-down-arrow { 241 position: absolute; 242 top: 0; 243 left: 50%; 244 margin-left: -6px; 245 width: 0; 246 height: 0; 247 overflow: hidden; 248 border-width: 6px; 249 border-style: dashed dashed solid dashed; 250 border-color: transparent transparent #555555 transparent; 251 } 252 .sm-clean .scroll-down-arrow { 253 top: 8px; 254 border-style: solid dashed dashed dashed; 255 border-color: #555555 transparent transparent transparent; 256 } 257 .sm-clean.sm-rtl a.has-submenu { 258 padding-right: 12px; 259 padding-left: 24px; 260 } 261 .sm-clean.sm-rtl a .sub-arrow { 262 right: auto; 263 left: 12px; 264 } 265 .sm-clean.sm-rtl.sm-vertical a.has-submenu { 266 padding: 10px 20px; 267 } 268 .sm-clean.sm-rtl.sm-vertical a .sub-arrow { 269 right: auto; 270 left: 8px; 271 border-style: dashed solid dashed dashed; 272 border-color: transparent #555555 transparent transparent; 273 } 274 .sm-clean.sm-rtl > li > ul::before { 275 left: auto; 276 right: 30px; 277 } 278 .sm-clean.sm-rtl > li > ul::after { 279 left: auto; 280 right: 31px; 281 } 282 .sm-clean.sm-rtl ul a.has-submenu { 283 padding: 10px 20px !important; 284 } 285 .sm-clean.sm-rtl ul a .sub-arrow { 286 right: auto; 287 left: 8px; 288 border-style: dashed solid dashed dashed; 289 border-color: transparent #555555 transparent transparent; 290 } 291 .sm-clean.sm-vertical { 292 padding: 10px 0; 293 border-radius: 5px; 294 } 295 .sm-clean.sm-vertical a { 296 padding: 10px 20px; 297 } 298 .sm-clean.sm-vertical a:hover, .sm-clean.sm-vertical a:focus, .sm-clean.sm-vertical a:active, .sm-clean.sm-vertical a.highlighted { 299 background: #fff; 300 } 301 .sm-clean.sm-vertical a.disabled { 302 background: #eeeeee; 303 } 304 .sm-clean.sm-vertical a .sub-arrow { 305 right: 8px; 306 top: 50%; 307 margin-top: -5px; 308 border-width: 5px; 309 border-style: dashed dashed dashed solid; 310 border-color: transparent transparent transparent #555555; 311 } 312 .sm-clean.sm-vertical > li > ul::before, 313 .sm-clean.sm-vertical > li > ul::after { 314 display: none; 315 } 316 .sm-clean.sm-vertical ul a { 317 padding: 10px 20px; 318 } 319 .sm-clean.sm-vertical ul a:hover, .sm-clean.sm-vertical ul a:focus, .sm-clean.sm-vertical ul a:active, .sm-clean.sm-vertical ul a.highlighted { 320 background: #eeeeee; 321 } 322 .sm-clean.sm-vertical ul a.disabled { 323 background: #fff; 324 } 325} 326 327/*# sourceMappingURL=sm-clean.css.map */ 328