stylesheet.css (15770B)
1 body { 2 font-family: 'Open Sans', sans-serif; 3 font-weight: 400; 4 color: #000000; 5 font-size: 12px; 6 line-height: 20px; 7 width: 100%; 8 } 9 h1, h2, h3, h4, h5, h6 { 10 color: #444; 11 } 12 /* default font size */ 13 .fa { 14 font-size: 14px; 15 } 16 /* Override the bootstrap defaults */ 17 h1 { 18 font-size: 33px; 19 } 20 h2 { 21 font-size: 27px; 22 } 23 h3 { 24 font-size: 21px; 25 } 26 h4 { 27 font-size: 15px; 28 } 29 h5 { 30 font-size: 12px; 31 } 32 h6 { 33 font-size: 10.2px; 34 } 35 a { 36 color: #25723A; 37 } 38 a:hover { 39 text-decoration: none; 40 } 41 legend { 42 font-size: 18px; 43 padding: 7px 0px 44 } 45 label { 46 font-size: 12px; 47 font-weight: normal; 48 } 49 select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control { 50 font-size: 12px; 51 } 52 .input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover { 53 font-size: 12px; 54 } 55 .input-group .input-group-addon { 56 font-size: 12px; 57 height: 30px; 58 } 59 /* Fix some bootstrap issues */ 60 span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg { 61 display: inline; 62 } 63 64 .nav-tabs { 65 margin-bottom: 15px; 66 } 67 div.required .control-label:before { 68 content: '* '; 69 color: #F00; 70 font-weight: bold; 71 } 72 /* Gradent to all drop down menus */ 73 .dropdown-menu li > a:hover { 74 text-decoration: none; 75 color: #ffffff; 76 background-color: #229ac8; 77 background-image: linear-gradient(to bottom, #FFE518, #FFE518); 78 background-repeat: repeat-x; 79 } 80 /* top */ 81 #top { 82 background-color: #25723A; 83 border-bottom: 1px solid #e2e2e2; 84 padding: 4px 0px 3px 0; 85 margin: 0 0 20px 0; 86 min-height: 40px; 87 } 88 #top .container { 89 padding: 0 20px; 90 } 91 #top #form-currency .currency-select, 92 #top #form-language .language-select { 93 text-align: left; 94 } 95 #top #form-currency .currency-select:hover, 96 #top #form-language .language-select:hover { 97 text-shadow: none; 98 color: #ffffff; 99 background-color: #229ac8; 100 background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); 101 background-repeat: repeat-x; 102 } 103 #top .btn-link, #top-links li, #top-links a { 104 color: #FFF; 105 text-decoration: none; 106 } 107 #top .btn-link:hover, #top-links a:hover { 108 color: #000000; 109 } 110 #top-links .dropdown-menu a { 111 color: #000; 112 text-shadow: none; 113 } 114 #top-links .dropdown-menu a:hover { 115 color: #FFF; 116 } 117 #top .btn-link strong { 118 font-size: 14px; 119 line-height: 14px; 120 } 121 #top-links { 122 padding-top: 6px; 123 } 124 #top-links a + a { 125 margin-left: 15px; 126 } 127 /* logo */ 128 #logo { 129 margin: 0 0 10px 0; 130 } 131 /* search */ 132 #search { 133 margin-bottom: 10px; 134 } 135 #search .input-lg { 136 height: 40px; 137 line-height: 20px; 138 padding: 0 10px; 139 } 140 #search .btn-lg { 141 font-size: 15px; 142 line-height: 18px; 143 padding: 10px 35px; 144 text-shadow: 0 1px 0 #FFF; 145 } 146 /* cart */ 147 #cart { 148 margin-bottom: 10px; 149 } 150 #cart > .btn { 151 font-size: 12px; 152 line-height: 18px; 153 color: #000000; 154 } 155 #cart.open > .btn { 156 background-image: none; 157 background-color: #FFE518; 158 border: 1px solid #E6E6E6; 159 color: #666; 160 box-shadow: none; 161 text-shadow: none; 162 } 163 #cart.open > .btn:hover { 164 color: #000000; 165 } 166 #cart .dropdown-menu { 167 background: #eee; 168 z-index: 1001; 169 } 170 #cart .dropdown-menu { 171 min-width: 100%; 172 } 173 @media (max-width: 478px) { 174 #cart .dropdown-menu { 175 width: 100%; 176 } 177 } 178 #cart .dropdown-menu table { 179 margin-bottom: 10px; 180 } 181 #cart .dropdown-menu li > div { 182 min-width: 427px; 183 padding: 0 10px; 184 } 185 @media (max-width: 478px) { 186 #cart .dropdown-menu li > div { 187 min-width: 100%; 188 } 189 } 190 #cart .dropdown-menu li p { 191 margin: 20px 0; 192 } 193 /* menu */ 194 #menu { 195 background-color: #229ac8; 196 background-image: linear-gradient(to bottom, Darkgreen, #25723A); 197 background-repeat: repeat-x; 198 border-color: #1f90bb #1f90bb #145e7a; 199 min-height: 40px; 200 } 201 #menu .nav > li > a { 202 color: #fff; 203 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 204 padding: 10px 15px 10px 15px; 205 min-height: 15px; 206 background-color: transparent; 207 } 208 #menu .nav > li > a:hover, #menu .nav > li.open > a { 209 background-color: rgba(0, 0, 0, 0.1); 210 } 211 #menu .dropdown-menu { 212 padding-bottom: 0; 213 } 214 #menu .dropdown-inner { 215 display: table; 216 } 217 #menu .dropdown-inner ul { 218 display: table-cell; 219 } 220 #menu .dropdown-inner a { 221 min-width: 160px; 222 display: block; 223 padding: 3px 20px; 224 clear: both; 225 line-height: 20px; 226 color: #333333; 227 font-size: 12px; 228 } 229 #menu .dropdown-inner li a:hover { 230 color: #000000; 231 } 232 #menu .see-all { 233 display: block; 234 margin-top: 0.5em; 235 border-top: 1px solid #DDD; 236 padding: 3px 20px; 237 -webkit-border-radius: 0 0 4px 4px; 238 -moz-border-radius: 0 0 4px 4px; 239 border-radius: 0 0 3px 3px; 240 font-size: 12px; 241 } 242 #menu .see-all:hover, #menu .see-all:focus { 243 text-decoration: none; 244 color: #000000; 245 background-color: #FFE518; 246 background-image: linear-gradient(to bottom, #FFE518, #FFE518); 247 background-repeat: repeat-x; 248 } 249 #menu #category { 250 float: left; 251 padding-left: 15px; 252 font-size: 16px; 253 font-weight: 700; 254 line-height: 40px; 255 color: #fff; 256 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 257 } 258 #menu .btn-navbar { 259 font-size: 15px; 260 font-stretch: expanded; 261 color: #FFF; 262 padding: 2px 18px; 263 float: right; 264 background-color: #229ac8; 265 background-image: linear-gradient(to bottom, #FFE518, #FFE518); 266 background-repeat: repeat-x; 267 border-color: #1f90bb #1f90bb #145e7a; 268 } 269 #menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] { 270 color: #ffffff; 271 background-color: #229ac8; 272 } 273 @media (min-width: 768px) { 274 #menu .dropdown:hover .dropdown-menu { 275 display: block; 276 } 277 } 278 @media (max-width: 767px) { 279 #menu { 280 border-radius: 4px; 281 } 282 #menu div.dropdown-inner > ul.list-unstyled { 283 display: block; 284 } 285 #menu div.dropdown-menu { 286 margin-left: 0 !important; 287 padding-bottom: 10px; 288 background-color: rgba(0, 0, 0, 0.1); 289 } 290 #menu .dropdown-inner { 291 display: block; 292 } 293 #menu .dropdown-inner a { 294 width: 100%; 295 color: #fff; 296 } 297 #menu .dropdown-menu a:hover, 298 #menu .dropdown-menu ul li a:hover { 299 background: rgba(0, 0, 0, 0.1); 300 } 301 #menu .see-all { 302 margin-top: 0; 303 border: none; 304 border-radius: 0; 305 color: #fff; 306 } 307 } 308 /* content */ 309 #content { 310 min-height: 600px; 311 } 312 /* footer */ 313 footer { 314 margin-top: 30px; 315 padding-top: 30px; 316 background-color: #303030; 317 border-top: 1px solid #ddd; 318 color: #e2e2e2; 319 } 320 footer hr { 321 border-top: none; 322 border-bottom: 1px solid #666; 323 } 324 footer a { 325 color: #ccc; 326 } 327 footer a:hover { 328 color: #fff; 329 } 330 footer h5 { 331 font-family: 'Open Sans', sans-serif; 332 font-size: 13px; 333 font-weight: bold; 334 color: #fff; 335 } 336 /* alert */ 337 .alert { 338 padding: 8px 14px 8px 14px; 339 } 340 /* breadcrumb */ 341 .breadcrumb { 342 margin: 0 0 20px 0; 343 padding: 8px 0; 344 border: 1px solid #ddd; 345 } 346 .breadcrumb i { 347 font-size: 15px; 348 } 349 .breadcrumb > li { 350 text-shadow: 0 1px 0 #FFF; 351 padding: 0 20px; 352 position: relative; 353 white-space: nowrap; 354 } 355 .breadcrumb > li + li:before { 356 content: ''; 357 padding: 0; 358 } 359 .breadcrumb > li:after { 360 content: ''; 361 display: block; 362 position: absolute; 363 top: -3px; 364 right: -5px; 365 width: 26px; 366 height: 26px; 367 border-right: 1px solid #DDD; 368 border-bottom: 1px solid #DDD; 369 -webkit-transform: rotate(-45deg); 370 -moz-transform: rotate(-45deg); 371 -o-transform: rotate(-45deg); 372 transform: rotate(-45deg); 373 } 374 .pagination { 375 margin: 0; 376 } 377 /* buttons */ 378 .buttons { 379 margin: 1em 0; 380 } 381 .btn { 382 padding: 7.5px 12px; 383 font-size: 12px; 384 border: 1px solid #cccccc; 385 border-radius: 4px; 386 box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 387 } 388 .btn-xs { 389 font-size: 9px; 390 } 391 .btn-sm { 392 font-size: 10.2px; 393 } 394 .btn-lg { 395 padding: 10px 16px; 396 font-size: 15px; 397 } 398 .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover { 399 font-size: 12px; 400 } 401 .btn-group > .btn-xs { 402 font-size: 9px; 403 } 404 .btn-group > .btn-sm { 405 font-size: 10.2px; 406 } 407 .btn-group > .btn-lg { 408 font-size: 15px; 409 } 410 .btn-default { 411 color: #777; 412 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 413 background-color: #e7e7e7; 414 background-image: linear-gradient(to bottom, #eeeeee, #dddddd); 415 background-repeat: repeat-x; 416 border-color: #dddddd #dddddd #b3b3b3 #b7b7b7; 417 } 418 .btn-primary { 419 color: #000000; 420 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 421 background-color: #FFE518; 422 background-image: linear-gradient(to bottom, #FFE518, #FFE518); 423 background-repeat: repeat-x; 424 border-color: #000000; 425 } 426 .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { 427 background-color: #FFE518; 428 background-position: 0 -15px; 429 } 430 .btn-warning { 431 color: #ffffff; 432 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 433 background-color: #faa732; 434 background-image: linear-gradient(to bottom, #fbb450, #f89406); 435 background-repeat: repeat-x; 436 border-color: #f89406 #f89406 #ad6704; 437 } 438 .btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { 439 box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1); 440 } 441 .btn-danger { 442 color: #ffffff; 443 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 444 background-color: #da4f49; 445 background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); 446 background-repeat: repeat-x; 447 border-color: #bd362f #bd362f #802420; 448 } 449 .btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { 450 box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1); 451 } 452 .btn-success { 453 color: #ffffff; 454 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 455 background-color: #5bb75b; 456 background-image: linear-gradient(to bottom, #62c462, #51a351); 457 background-repeat: repeat-x; 458 border-color: #51a351 #51a351 #387038; 459 } 460 .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { 461 box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1); 462 } 463 .btn-info { 464 color: #ffffff; 465 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 466 background-color: #df5c39; 467 background-image: linear-gradient(to bottom, #e06342, #dc512c); 468 background-repeat: repeat-x; 469 border-color: #dc512c #dc512c #a2371a; 470 } 471 .btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { 472 background-image: none; 473 background-color: #df5c39; 474 } 475 .btn-link { 476 border-color: rgba(0, 0, 0, 0); 477 cursor: pointer; 478 color: #25723A; 479 border-radius: 0; 480 } 481 .btn-link, .btn-link:active, .btn-link[disabled] { 482 background-color: rgba(0, 0, 0, 0); 483 background-image: none; 484 box-shadow: none; 485 } 486 .btn-inverse { 487 color: #ffffff; 488 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 489 background-color: #363636; 490 background-image: linear-gradient(to bottom, #FFE518, #FFE518); 491 background-repeat: repeat-x; 492 border-color: #222222 #222222 #000000; 493 } 494 .btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { 495 background-color: #FFE518; 496 background-image: linear-gradient(to bottom, #FFE518, #FFE518); 497 } 498 /* list group */ 499 .list-group a { 500 border: 1px solid #DDDDDD; 501 color: #888888; 502 padding: 8px 12px; 503 } 504 .list-group a.active, .list-group a.active:hover, .list-group a:hover { 505 color: #444444; 506 background: #eeeeee; 507 border: 1px solid #DDDDDD; 508 text-shadow: 0 1px 0 #FFF; 509 } 510 /* carousel */ 511 .carousel-caption { 512 color: #FFFFFF; 513 text-shadow: 0 1px 0 #000000; 514 } 515 .carousel-control .icon-prev:before { 516 content: '\f053'; 517 font-family: FontAwesome; 518 } 519 .carousel-control .icon-next:before { 520 content: '\f054'; 521 font-family: FontAwesome; 522 } 523 /* product list */ 524 .product-thumb { 525 border: 1px solid #ddd; 526 margin-bottom: 20px; 527 overflow: auto; 528 } 529 .product-thumb .image { 530 text-align: center; 531 } 532 .product-thumb .image a { 533 display: block; 534 } 535 .product-thumb .image a:hover { 536 opacity: 0.8; 537 } 538 .product-thumb .image img { 539 margin-left: auto; 540 margin-right: auto; 541 } 542 .product-grid .product-thumb .image { 543 float: none; 544 } 545 @media (min-width: 767px) { 546 .product-list .product-thumb .image { 547 float: left; 548 padding: 0 15px; 549 } 550 } 551 .product-thumb h4 { 552 font-weight: bold; 553 } 554 .product-thumb .caption { 555 padding: 0 20px; 556 min-height: 180px; 557 } 558 .product-list .product-thumb .caption { 559 margin-left: 230px; 560 } 561 @media (max-width: 1200px) { 562 .product-grid .product-thumb .caption { 563 min-height: 210px; 564 padding: 0 10px; 565 } 566 } 567 @media (max-width: 767px) { 568 .product-list .product-thumb .caption { 569 min-height: 0; 570 margin-left: 0; 571 padding: 0 10px; 572 } 573 .product-grid .product-thumb .caption { 574 min-height: 0; 575 } 576 } 577 .product-thumb .rating { 578 padding-bottom: 10px; 579 } 580 .rating .fa-stack { 581 font-size: 8px; 582 } 583 .rating .fa-star-o { 584 color: #999; 585 font-size: 15px; 586 } 587 .rating .fa-star { 588 color: #FC0; 589 font-size: 15px; 590 } 591 .rating .fa-star + .fa-star-o { 592 color: #E69500; 593 } 594 h2.price { 595 margin: 0; 596 } 597 .product-thumb .price { 598 color: #444; 599 } 600 .product-thumb .price-new { 601 font-weight: 600; 602 } 603 .product-thumb .price-old { 604 color: #999; 605 text-decoration: line-through; 606 margin-left: 10px; 607 } 608 .product-thumb .price-tax { 609 color: #999; 610 font-size: 12px; 611 display: block; 612 } 613 .product-thumb .button-group { 614 border-top: 1px solid #ddd; 615 background-color: #eee; 616 overflow: auto; 617 } 618 .product-list .product-thumb .button-group { 619 border-left: 1px solid #ddd; 620 } 621 @media (max-width: 768px) { 622 .product-list .product-thumb .button-group { 623 border-left: none; 624 } 625 } 626 .product-thumb .button-group button { 627 width: 60%; 628 border: none; 629 display: inline-block; 630 float: left; 631 background-color: #eee; 632 color: #888; 633 line-height: 38px; 634 font-weight: bold; 635 text-align: center; 636 text-transform: uppercase; 637 } 638 .product-thumb .button-group button + button { 639 width: 20%; 640 border-left: 1px solid #ddd; 641 } 642 .product-thumb .button-group button:hover { 643 color: #444; 644 background-color: #ddd; 645 text-decoration: none; 646 cursor: pointer; 647 } 648 @media (max-width: 1200px) { 649 .product-thumb .button-group button, .product-thumb .button-group button + button { 650 width: 33.33%; 651 } 652 } 653 @media (max-width: 767px) { 654 .product-thumb .button-group button, .product-thumb .button-group button + button { 655 width: 33.33%; 656 } 657 } 658 .thumbnails { 659 overflow: auto; 660 clear: both; 661 list-style: none; 662 padding: 0; 663 margin: 0; 664 } 665 .thumbnails > li { 666 margin-left: 20px; 667 } 668 .thumbnails { 669 margin-left: -20px; 670 } 671 .thumbnails > img { 672 width: 100%; 673 } 674 .image-additional a { 675 margin-bottom: 20px; 676 padding: 5px; 677 display: block; 678 border: 1px solid #ddd; 679 } 680 .image-additional { 681 max-width: 78px; 682 } 683 .thumbnails .image-additional { 684 float: left; 685 margin-left: 20px; 686 } 687 688 @media (min-width: 1200px) { 689 #content .col-lg-2:nth-child(6n+1), 690 #content .col-lg-3:nth-child(4n+1), 691 #content .col-lg-4:nth-child(3n+1), 692 #content .col-lg-6:nth-child(2n+1) { 693 clear:left; 694 } 695 } 696 @media (min-width: 992px) and (max-width: 1199px) { 697 #content .col-md-2:nth-child(6n+1), 698 #content .col-md-3:nth-child(4n+1), 699 #content .col-md-4:nth-child(3n+1), 700 #content .col-md-6:nth-child(2n+1) { 701 clear:left; 702 } 703 } 704 @media (min-width: 768px) and (max-width: 991px) { 705 #content .col-sm-2:nth-child(6n+1), 706 #content .col-sm-3:nth-child(4n+1), 707 #content .col-sm-4:nth-child(3n+1), 708 #content .col-sm-6:nth-child(2n+1) { 709 clear:left; 710 } 711 } 712 713 /* fixed colum left + content + right*/ 714 @media (min-width: 768px) { 715 #column-left .product-layout .col-md-3 { 716 width: 100%; 717 } 718 719 #column-left + #content .product-layout .col-md-3 { 720 width: 50%; 721 } 722 723 #column-left + #content + #column-right .product-layout .col-md-3 { 724 width: 100%; 725 } 726 727 #content + #column-right .product-layout .col-md-3 { 728 width: 100%; 729 } 730 } 731 732 /* fixed product layouts used in left and right columns */ 733 #column-left .product-layout, #column-right .product-layout { 734 width: 100%; 735 } 736 737 /* fixed mobile cart quantity input */ 738 .input-group .form-control[name^=quantity] { 739 min-width: 50px; 740 } 741 742 /* Missing focus and border color to overwrite bootstrap */ 743 .btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { 744 background-image: none; 745 background-color: #df5c39; 746 }