scss/global.scss

   1 /* This file will hold styles for the mobile version of your website (mobile first). */
   2 /* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */
   3 /* Override Omega */
   4
   5 /* Include Default Variables & Mixins */
   6 @import "variables.scss";
   7 @import "mixins.scss";
   8 /* End Variables & Mixins */
   9
  10 /*------------------------------------------------
  11 [Table of contents]
  12 0. Reset
  13 1. Global
  14   1.1. Zones
  15   1.2. Regions
  16 2. Section header
  17   2.1. Zone user
  18     2.1.1. Region user first
  19     2.1.2. Region user second
  20   2.2. Zone branding
  21   2.3. Zone menu
  22   2.4. Zone header
  23 3. Section content
  24   3.1. Zone preface
  25   3.2. Zone content
  26     3.2.1. Sidebar first
  27     3.2.2. Content
  28     3.2.3. Sidebar second
  29   3.3. Zone postscript
  30 4. Section footer
  31   4.1. Zone footer
  32   4.2. Zone footer2
  33 5. Commerce specific
  34   5.1. Search & Collection page
  35   5.2. All products page
  36   5.3. Product page
  37   5.4. Checkout process
  38 6. Kickstart specific
  39   6.1. Homepage elements
  40 7. Blog
  41   7.1. Blog comments
  42 8. User account
  43 ------------------------------------------------*/
  44
  45 /**************************************************
  46 * --
  47 * - 0. Reset
  48 * --
  49 **************************************************/
  50 /**
  51  * Flexible Media and Cross browser improvements
  52  * - This can cause issues in table cells where no width is set on the column,
  53  *   only in some versions of webkit and IE 7/8.
  54  * - Google maps break also, see below for fixes.
  55  */
  56 img {
  57   max-width: 100%;
  58   height: auto;
  59   border: 0;
  60   -ms-interpolation-mode: bicubic;
  61 }
  62 figure {
  63   margin: 0;
  64   padding: 0;
  65 }
  66 object,
  67 embed,
  68 video {
  69   max-width: 100%;
  70 }
  71 /* Kill flexible images in IE6-8 */
  72 .ie6-8 img {
  73   max-width: none;
  74 }
  75 /* Override max-width 100% for map displays */
  76 .gmap img,
  77 .view-gmap img,
  78 .openlayers-map img,
  79 #getlocations_map_canvas img,
  80 #locationmap_map img {
  81   max-width: none !important;
  82 }
  83 /* Improve IE's resizing of images */
  84 svg:not(:root) {
  85   overflow: hidden;
  86 }
  87 /**
  88  * Reset Omega text shadow
  89  */
  90 button, input[type="reset"], input[type="submit"], input[type="button"] {
  91   text-shadow: 0 0 0 transparent;
  92 }
  93 /**************************************************
  94 * --
  95 * 1. Global
  96 * --
  97 **************************************************/
  98
  99 html {
 100   width: 100%;
 101   height: 100%;
 102   margin: 0;
 103   padding: 0;
 104   overflow-x: hidden;
 105 }
 106 body {
 107   background: $bodybg;
 108   font-family: $headerfont;
 109   font-weight: 400;
 110   font-size: 14px;
 111   margin: 0;
 112   width: 100%;
 113   overflow-x: hidden;
 114 }
 115 // default region positioning on mobile
 116 .region {
 117   margin: 0 10px;
 118 }
 119 h1, h2, h3, h4, h5, h6 {
 120   font-family: $headerfont;
 121   font-weight: 700;
 122   letter-spacing: 0;
 123 }
 124 ul.primary li a {
 125   -webkit-border-top-left-radius: 4px;
 126   -webkit-border-top-right-radius: 4px;
 127   -moz-border-radius-topleft: 4px;
 128   -moz-border-radius-topright: 4px;
 129   border-top-left-radius: 4px;
 130   border-top-right-radius: 4px;
 131 }
 132 a:link, a:visited {
 133     color: #2698F2;
 134     text-decoration: none;
 135 }
 136 a:hover {
 137   color: #000000;
 138 }
 139 h1#page-title {
 140   font-size: 28px;
 141   font-weight: 600;
 142   margin-left: 10px;
 143   text-transform: uppercase;
 144 }
 145 .node-page {
 146   margin: 0 10px;
 147 }
 148 textarea,
 149 select,
 150 input[type="date"],
 151 input[type="datetime"],
 152 input[type="datetime-local"],
 153 input[type="email"],
 154 input[type="month"],
 155 input[type="number"],
 156 input[type="password"],
 157 input[type="search"],
 158 input[type="tel"],
 159 input[type="text"],
 160 input[type="time"],
 161 input[type="url"],
 162 input[type="week"] {
 163   background: #fbfafa;
 164   border: 1px solid #e0e0e0;
 165   color: #4c4c4c;
 166   height: 25px;
 167   margin: 1px;
 168   max-width: 100%;
 169   padding: 5px;
 170 }
 171 /* Tweaks for Safari + Chrome. */
 172 @media (-webkit-min-device-pixel-ratio: 0) {
 173   select,
 174   select[size],
 175   select[multiple] {
 176     background-image: url('../images/select-arrow.gif');
 177     background-repeat: no-repeat;
 178     background-position: right center;
 179     padding: 5px;
 180     padding-right: 20px;
 181   }
 182 }
 183 select[size],
 184 select[multiple] {
 185   height: 25px;
 186 }
 187 /**************************************************
 188 * --
 189 * 2. Section header
 190 * --
 191 **************************************************/
 192 /**********************************************
 193 * 2.1. Zone user
 194 **********************************************/
 195 .zone-user-wrapper {
 196   background-color: $topbarbackground;
 197   height: 34px;
 198   //overflow: hidden;
 199   width: 100%;
 200 }
 201 .zone-user {
 202   height: 100%;
 203 }
 204 /*******************************************
 205 * 2.1.1. Region user first
 206 *******************************************/
 207 #region-user-first {
 208   float: left;
 209 }
 210 /* User menu */
 211 .block-menu-kickstart-user-menu .content {
 212   float: left;
 213   width: 100%;
 214   overflow: hidden;
 215   position: relative;
 216 }
 217 .block-menu-kickstart-user-menu .content ul {
 218   clear: left;
 219   float: left;
 220   list-style: none;
 221   position: relative;
 222   left: 50%;
 223   text-align: center;
 224   margin-top: 2px;
 225 }
 226 .block-menu-kickstart-user-menu .content ul li {
 227   display: block;
 228   float: left;
 229   font-size: 0.9em;
 230   list-style: none;
 231   margin: 0;
 232   padding: 0;
 233   padding-bottom: 3px;
 234   position: relative;
 235   right: 50%;
 236 }
 237
 238 .block-menu-kickstart-user-menu .content ul li a {
 239   display: block;
 240   font-family: $headerfont;
 241   font-weight: 400;
 242   border-radius: 4px;
 243   color: #ffffff;
 244   padding: 5px 6px;
 245   text-decoration: none;
 246 }
 247 .block-menu-kickstart-user-menu ul li a.active {
 248   color: #717171;
 249   text-decoration: underline;
 250 }
 251 .block-menu-kickstart-user-menu ul li a.active:hover,
 252 .block-menu-kickstart-user-menu ul li a:hover {
 253   color: #ffffff;
 254   text-decoration: underline;
 255 }
 256 /*******************************************
 257 * 2.1.2. Region user second
 258 *******************************************/
 259 #region-user-second {
 260   background-color: #FFFFFF;
 261   margin: 0;
 262   float: right;
 263 }
 264 .region-user-second,
 265 .region-user-second .region-user-second-inner {
 266   height: 100%;
 267 }
 268 /**
 269 * Cart block
 270 */
 271 #block-views-shopping-cart-block {
 272   margin: 0 auto;
 273   //width: 300px;
 274 }
 275 .block-shopping-cart-block,
 276 .block-shopping-cart-block .block-inner,
 277 .block-shopping-cart-block .content {
 278   height: 100%;
 279 }
 280 .block-shopping-cart-block .content {
 281   background: #ffffff url('../images/picto_cart.png') 5px 5px no-repeat;
 282   float: right;
 283   padding-left: 40px;
 284 }
 285 .block-shopping-cart-block .content .view-shopping-cart .view-content,
 286 .block-shopping-cart-block .content .view-shopping-cart .view-footer,
 287 .block-shopping-cart-block .content .view-shopping-cart .view-empty {
 288   display: inline;
 289   float: left;
 290   font-family: $headerfont;
 291   font-weight: 400;
 292 }
 293 .block-shopping-cart-block .content .view-shopping-cart .view-empty p {
 294   float: left;
 295 }
 296 .block-shopping-cart-block .content .view-shopping-cart .view-empty p,
 297 .block-shopping-cart-block .content .view-shopping-cart .line-item-quantity {
 298   display: inline;
 299   float: left;
 300   line-height: 13px;
 301   margin: 0;
 302   margin-left: 5px;
 303   padding-top: 8px;
 304   vertical-align: middle;
 305 }
 306 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary {
 307   display: inline;
 308   float: left;
 309   height: 34px;
 310   margin: 0;
 311   position: relative;
 312 }
 313 .block-shopping-cart-block .content .view-shopping-cart .view-empty p {
 314   display: none;
 315 }
 316 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary .line-item-quantity {
 317   color: #2698F2;
 318   text-decoration: none;
 319 }
 320 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary .line-item-total {
 321   color: #888888;
 322   float: left;
 323   font-family: $headerfont;
 324   font-weight: 300;
 325   height: 100%;
 326   line-height: 30px;
 327   padding: 0 12px 0 6px;
 328 }
 329 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary .line-item-total-label {
 330   display: none;
 331 }
 332 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary .links {
 333   background-color: $cartceckoutbg;
 334   color: $cartceckoutcolor;
 335   clear: none;
 336   float: right;
 337   font-family: $headerfont;
 338   font-weight: 300;
 339   height: 100%;
 340   line-height: 30px;
 341   margin: 0 0 0 5px;
 342   padding: 0 10px;
 343 }
 344 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary .links a {
 345   color: #ffffff;
 346   font-weight: 700;
 347 }
 348 .block-shopping-cart-block .content .view-shopping-cart .line-item-summary .links a:hover {
 349   text-decoration: underline;
 350 }
 351 /**********************************************
 352 * 2.2. Zone branding
 353 **********************************************/
 354 .zone-branding .region-branding {
 355   margin-top: 50px;
 356   margin-right: 0;
 357 }
 358 #region-branding {
 359   .logo-img {
 360     margin: 0;
 361     float: none;
 362     text-align: center;
 363   }
 364 }
 365 /**
 366 * Search block
 367 */
 368 #block-views-exp-display-products-page {
 369   //float: right;
 370   padding-top: 28px;
 371   margin-bottom: 10px;
 372 }
 373
 374 #block-views-exp-display-products-page .views-exposed-widgets {
 375   position: relative;
 376   width: 60%;
 377   float: right;
 378   margin-right: 10px;
 379   margin-bottom: 0;
 380 }
 381
 382 #block-views-exp-display-products-page .views-exposed-widget {
 383   padding: 0;
 384   position: relative;
 385   //left: 20px;
 386 }
 387
 388 #block-views-exp-display-products-page #edit-search-api-views-fulltext {
 389   border-color: #d7d7d7;
 390   -webkit-border-radius: 3px;
 391   -moz-border-radius: 3px;
 392   border-radius: 3px;
 393   font-family: $headerfont;
 394   font-weight: 400;
 395   height: 36px;
 396   width: 100%;
 397   position: relative;
 398   padding: 5px 28px 5px 5px;
 399 }
 400
 401 #block-views-exp-display-products-page #edit-search-api-views-fulltext-wrapper {
 402   float: none;
 403 }
 404
 405 #block-views-exp-display-products-page .views-submit-button {
 406   position: absolute;
 407   right: 5px;
 408   top: 6px;
 409   z-index: 100;
 410
 411   .form-submit {
 412     background: transparent url('../images/picto_magnifying_glass.png') 98% center no-repeat;
 413     border: 0;
 414     -webkit-border-radius: 0;
 415     -moz-border-radius: 0;
 416     border-radius: 0;
 417     margin: 0;
 418     position: relative;
 419     text-indent: -9999px;
 420   }
 421 }
 422 /**********************************************
 423 * 2.3. Zone menu
 424 **********************************************/
 425 .zone-menu .region-menu {
 426
 427 }
 428 #region-menu {
 429
 430 }
 431 /**
 432 * Navigation
 433 */
 434 .navigation {
 435   background: $mobilemenubg;
 436   padding-bottom: 10px;
 437   display: none;
 438 }
 439 .navigation .primary-menu,
 440 .navigation .second-menu {
 441   font-size: 1em;
 442   margin: 0 10px;
 443   padding: 10px 0 0 0;
 444   display: block;
 445
 446   h2 {
 447     font-size: 1.2em;
 448     font-family: $headerfont;
 449     font-variant: small-caps;
 450     color: #999;
 451     padding: 0 0 10px 0;
 452     margin: 0;
 453     font-weight: 600;
 454   }
 455 }
 456 .menu-toggle {
 457   position: absolute;
 458   left: 10px;
 459   top: -46px;
 460   display: block;
 461   clip: inherit;
 462   margin: 0;
 463   padding: 0;
 464   height: 36px;
 465   width: 36px;
 466   background: #666;
 467   -webkit-border-radius: 3px;
 468   -moz-border-radius: 3px;
 469   border-radius: 3px;
 470
 471   &:hover {
 472     background: #777;
 473   }
 474
 475   .toggle-help {
 476     position: absolute;
 477     left: 45px;
 478     top: 6px;
 479     font-size: 1.2em;
 480     font-family: $headerfont;
 481     font-variant: small-caps;
 482     color: #999;
 483     padding: 0 0 10px 0;
 484     margin: 0;
 485     font-weight: 600;
 486   }
 487   .line {
 488     border-bottom: 2px solid #CCC;
 489     display: block;
 490     width: 26px;
 491     margin: 4px auto 4px auto;
 492   }
 493   .first-line {
 494     padding-top: 4px;
 495   }
 496   .last-line {
 497     padding-bottom: 0;
 498   }
 499 }
 500 .navigation .primary-menu .main-menu ul li,
 501 .navigation .second-menu .secondary-menu ul li,
 502 .navigation .primary-menu .main-menu li,
 503 .navigation .second-menu .secondary-menu li {
 504   margin: 0 0 7px 0;
 505   padding: 0;
 506   width: 100%;
 507   display: inline-block;
 508 }
 509 .main-menu a,
 510 .secondary-menu a {
 511   font-family: $headerfont;
 512   font-weight: 600;
 513   display: block;
 514
 515   padding: 12px 16px;
 516   text-decoration: none;
 517 }
 518 .navigation li a {
 519
 520 }
 521 .navigation li a:hover {
 522
 523 }
 524 /* Main menu */
 525 .main-menu a {
 526   color: $mainmenulinkcolor;
 527   text-transform: capitalize;
 528 }
 529 .navigation .primary-menu li a {
 530   background-color: $mainmenuitembg;
 531   border: $mainmenuitemborder;
 532 }
 533 .navigation .primary-menu li a.active,
 534 .navigation .primary-menu li a:hover {
 535   background-color: $mainmenuitembghover;
 536   border: $mainmenuitemborderhover;
 537 }
 538 .navigation .primary-menu li a.active {
 539   color: $mainmenuitemfontactive;
 540 }
 541 .navigation .primary-menu li a:hover {
 542   color: $mainmenuitemfonthover;
 543 }
 544 /* Secondary menu */
 545 .navigation .second-menu {
 546   clear: left;
 547 }
 548 .secondary-menu a {
 549   color: $secondarymenulinkcolor;
 550   padding: 12px 18px;
 551 }
 552 .navigation .second-menu li a {
 553   background-color: $secondarymenuitembg;
 554   border: $secondarymenuitemborder;
 555 }
 556 .navigation .second-menu li a.active,
 557 .navigation .second-menu li a:hover {
 558   background-color: $secondarymenuitembghover;
 559   border: $secondarymenuitemborderhover;
 560 }
 561 .navigation .second-menu li a.active {
 562   color: $secondarymenuitemfontactive;
 563 }
 564 .navigation .second-menu li a:hover {
 565   color: $secondarymenuitemfonthover;
 566 }
 567 /**************************************************
 568 * --
 569 * 3. Section content
 570 * --
 571 **************************************************/
 572 .section-content {
 573   min-height: 500px;
 574   height: 100%;
 575 }
 576 /**********************************************
 577 * 3.1. Zone preface
 578 **********************************************/
 579 .zone-preface {
 580   background-color: #ffffff;
 581   margin-bottom: 0;
 582   padding-top: 20px;
 583   position: relative;
 584 }
 585 /**
 586 * Pseudo Breadcrumb
 587 */
 588 #region-breadcrumb {
 589   margin: 0px 10px;
 590   padding-bottom: 0;
 591   position: relative;
 592 }
 593 #region-breadcrumb .pseudo-breadcrumb {
 594   background-color: #eeeeee;
 595   border: 1px solid #d7d7d7;
 596   margin: 20px 0;
 597   padding: 10px 21px 35px 5px;
 598 }
 599 #region-breadcrumb .pseudo-breadcrumb,
 600 .breadcrumb {
 601   -webkit-border-radius: 8px;
 602   -moz-border-radius: 8px;
 603   border-radius: 8px;
 604 }
 605 #breadcrumb {
 606   padding-top: 1px;
 607 }
 608 #region-breadcrumb .pseudo-breadcrumb-total-results {
 609   font-family: $headerfont;
 610   font-weight: 400;
 611   margin: 0 0 0 10px;
 612 }
 613 #region-breadcrumb .pseudo-breadcrumb-total-results em {
 614   color: #2698F2;
 615   font-style: normal;
 616 }
 617 .pseudo-breadcrumb a {
 618   color: #898a8c;
 619   font-weight: bold;
 620   text-decoration: none;
 621 }
 622 .pseudo-breadcrumb a {
 623   background: url('../images/btn_close.png') left center no-repeat;
 624   display: block;
 625   float: left;
 626   padding: 0 5px 0 0;
 627   text-indent: -9999px;
 628   width: 20px;
 629 }
 630 #region-breadcrumb li {
 631   color: #898a8c;
 632   float: left;
 633   font-weight: bold;
 634   line-height: 23px;
 635   text-decoration: none;
 636 }
 637 /**********************************************
 638 * 3.2. Zone content
 639 **********************************************/
 640 .zone-content-wrapper {
 641   height: 100%;
 642 }
 643 .zone-content {
 644   background-color: #ffffff;
 645   margin-bottom: 40px;
 646   position: relative;
 647 }
 648 .region-content-inner {
 649   min-height: 400px;
 650   padding: 10px 0 45px 0;
 651 }
 652 /*******************************************
 653 * 3.2.1. Sidebar first
 654 *******************************************/
 655 /* Search api facet blocks */
 656 .region-sidebar-first .block-facetapi {
 657   border-top: 1px solid #000000;
 658   margin-top: 15px;
 659   margin-bottom: 30px;
 660   margin-left: 15px;
 661   padding-left: 15px;
 662 }
 663 .region-sidebar-first .block-facetapi ul {
 664   list-style: none;
 665   list-style-image: none;
 666 }
 667 .region-sidebar-first .block-facetapi li  {
 668   background: none;
 669   line-height: 22px;
 670   list-style: none;
 671   list-style-image: none;
 672   margin: 0;
 673 }
 674 .region-sidebar-first .block-facetapi h2 {
 675   font-family: $headerfont;
 676   font-weight: 700;
 677   font-size: 16px;
 678   line-height: 30px;
 679   padding-bottom: 10px;
 680 }
 681 .region-sidebar-first .block-facetapi a {
 682   color: #8e8e8e;
 683   font-family: $headerfont;
 684   font-weight: 700;
 685   text-decoration: none;
 686 }
 687 .region-sidebar-first .block-facetapi a:hover {
 688   text-decoration: underline;
 689 }
 690 /* Price range */
 691 #search-api-ranges-block-view-form .text-range {
 692   font-size: 12px;
 693   margin: 5px 0;
 694   text-align: center;
 695   text-transform: uppercase;
 696 }
 697 #search-api-ranges-block-view-form .range-slider-box {
 698   margin: 0 auto;
 699   width: 90%;
 700 }
 701 #search-api-ranges-block-view-form label {
 702   float: left;
 703   line-height: 24px;
 704   margin-right: 5px;
 705   text-align: right;
 706   white-space: nowrap;
 707   width: 25%;
 708 }
 709 #search-api-ranges-block-view-form label:after {
 710   content: ":";
 711 }
 712 #search-api-ranges-block-view-form #edit-range-from,
 713 #search-api-ranges-block-view-form #edit-range-to {
 714   width: 80px;
 715 }
 716 #search-api-ranges-block-view-form #edit-submit {
 717   background: #cecece;
 718   border: 0;
 719   -webkit-border-radius: 8px;
 720   -moz-border-radius: 8px;
 721   border-radius: 8px;
 722   color: #FFFFFF;
 723   font-size: 14px;
 724   font-weight: normal;
 725   padding: 5px 12px;
 726 }
 727 /* Category */
 728 .region-sidebar-first .block-facetapi.field_category .item-list {
 729   border: 1px solid #d9d9d9;
 730   height: 220px;
 731   padding: 10px 20px;
 732   overflow-y: scroll;
 733 }
 734 /*******************************************
 735 * 3.2.2. Content
 736 *******************************************/
 737 /**
 738 * Blocks
 739 */
 740 /* HP blocks: Top advert */
 741 #promotional_banner {
 742   background-color: $promobannerbg;
 743   color: $promobannercolor;
 744   font-size: 16px;
 745   padding: 5px 10px 20px 10px;
 746   position: relative;
 747   top: 0;
 748
 749 }
 750 #promotional_banner .promotional_banner_saving {
 751   font-family: $headerfont;
 752   font-weight: 900;
 753   font-size: 28px;
 754   padding: 0;
 755   width: 100%;
 756   display: block;
 757   line-height: 38px;
 758 }
 759 #promotional_banner span {
 760   font-family: $headerfont;
 761   font-weight: 400;
 762   font-size: 16px;
 763   line-height: 24px;
 764   text-transform: uppercase;
 765 }
 766 #promotional_banner .promotional_banner_special_offer {
 767
 768   position: absolute;
 769   top: 10px;
 770   right: 10px;
 771   background-color: $promobannerbuttonbg;
 772   -webkit-border-radius: 4px;
 773   -moz-border-radius: 4px;
 774   border-radius: 4px;
 775   color: $promobannerbuttoncolor;
 776   font-family: $headerfont;
 777   border: $promobannerbuttonborder;
 778   font-weight: 700;
 779   padding: 5px 28px;
 780   text-transform: capitalize;
 781 }
 782 /* HP blocks: Slideshow */
 783 .block-demo-content-block-3 {
 784   position: relative;
 785 }
 786 .bx-wrapper,
 787 .bx-wrapper .bx-window {
 788   padding-bottom: 0;
 789   width: 100% !important;
 790   max-width: 100% !important;
 791   height: auto;
 792   overflow: visible !important;
 793   @include clearfix();
 794 }
 795
 796 .bx-wrapper ul {
 797   //max-height: 165px;
 798   width: 100%;
 799   max-width: 100%;
 800   //height: auto;
 801 }
 802 .view-display-id-block_3 .item-list .event-slider li {
 803   margin: 0 auto;
 804   max-width: 100%;
 805   @include clearfix();
 806 }
 807 .view-display-id-block_3 .item-list .event-slider li a {
 808   display: block;
 809 }
 810 .view-display-id-block_3 .item-list .event-slider li img {
 811   width: 100%;
 812   max-width: 100%;
 813   height: auto;
 814 }
 815 .event-slider .views-field-nothing,
 816 .event-slider .views-field-nothing em,
 817 .view-display-id-block_3 .bx-prev,
 818 .view-display-id-block_3 .bx-prev em,
 819 .view-display-id-block_3 .bx-next,
 820 .view-display-id-block_3 .bx-next em {
 821   display: none;
 822   text-indent: -9999px;
 823 }
 824 /* HP blocks: Side advert */
 825 .block-shipping-discount {
 826
 827 }
 828 #shipping {
 829   border: 6px solid #ffffff;
 830   background-color: #000000;
 831   color: #2698F2;
 832   display: block;
 833   font-size: 13px;
 834   line-height: 24px;
 835   text-align: center;
 836   padding: 10px 5px;
 837 }
 838 #shipping #shipping_message span {
 839   border-bottom: 1px solid #ffffff;
 840   display: block;
 841   color: #ffffff;
 842   font-size: 20px;
 843   padding: 10px 0 4px 0;
 844   text-transform: uppercase;
 845 }
 846 #shipping #shipping_message span em {
 847   font-size: 27px;
 848   font-style: normal;
 849 }
 850 #shipping #shipping_currency {
 851   display: block;
 852   font-size: 27px;
 853   margin-top: 2px;
 854 }
 855 #shipping #shipping_message {
 856   font-family: $headerfont;
 857   font-weight: 400;
 858 }
 859 #shipping #shipping_message span,
 860 #shipping #shipping_message span em,
 861 #shipping #shipping_currency {
 862   font-family: $headerfont;
 863   font-weight: 700;
 864 }
 865 /**
 866 * Breadcrumb
 867 */
 868 .breadcrumb {
 869   background-color: #eeeeee;
 870   border: 1px solid #d7d7d7;
 871   margin: 20px 0;
 872   padding: 13px 27px;
 873 }
 874 .breadcrumb,
 875 .breadcrumb a {
 876   color: #898a8c;
 877 }
 878 .breadcrumb a {
 879   font-weight: bold;
 880   text-decoration: none;
 881 }
 882 .breadcrumb a:hover {
 883   text-decoration: underline;
 884 }
 885 /*******************************************
 886 * 3.2.3. Sidebar second
 887 *******************************************/
 888 #block-views-blog-category-list-block,
 889 #block-views-blog-blog-archives {
 890
 891 }
 892 #block-views-blog-category-list-block table {
 893   width: 100%;
 894 }
 895 #block-views-blog-category-list-block td {
 896   width: 50%;
 897 }
 898 /**********************************************
 899 * 3.3. Zone postscript
 900 **********************************************/
 901 .zone-postscript {
 902   margin-top: 20px;
 903   margin-bottom: 24px;
 904   margin-bottom: 24px;
 905 }
 906 .region-postscript-first,
 907 .region-postscript-second {
 908   margin-bottom: 5px;
 909 }
 910 /* HP blocks */
 911 .view-display-id-block_1 .views-rows,
 912 .view-display-id-block_2 .views-rows {
 913   display: inline;
 914   float: left;
 915   margin: 0;
 916   margin-bottom: 5px;
 917 }
 918 .view-display-id-block_1 .views-row,
 919 .view-display-id-block_2 .views-row,
 920 .block-blog-block .block-inner {
 921   background-color: #cccccc;
 922   border: 1px solid #b1b1b1;
 923   padding: 5px 0px;
 924 }
 925 .view-display-id-block_1 .views-row img,
 926 .view-display-id-block_2 .views-row img {
 927   margin: 0 15px;
 928 }
 929 .view-display-id-block_1 .views-row img,
 930 .view-display-id-block_2 .views-row img,
 931 .block-blog-block img {
 932   border: 4px solid #ffffff;
 933   display: block;
 934   margin: auto;
 935 }
 936 .view-display-id-block_1 .views-row .views-field-field-tagline,
 937 .view-display-id-block_2 .views-row .views-field-field-tagline,
 938 .block-blog-block .views-field-title {
 939   margin: 0 10px;
 940 }
 941 .view-display-id-block_1 .views-row .views-field-field-image,
 942 .view-display-id-block_1 .views-row .views-field-field-tagline,
 943 .view-display-id-block_2 .views-row .views-field-field-image,
 944 .view-display-id-block_2 .views-row .views-field-field-tagline,
 945 .block-blog-block .views-field-title {
 946   display: block;
 947   margin-top: 0;
 948 }
 949 .view-display-id-block_1 .views-row .views-field-field-tagline,
 950 .view-display-id-block_2 .views-row .views-field-field-tagline,
 951 .block-blog-block .views-field-title,
 952 .view-display-id-block_1 .views-row .views-field-field-tagline a,
 953 .view-display-id-block_2 .views-row .views-field-field-tagline a,
 954 .block-blog-block .views-field-title a {
 955   color: #ffffff;
 956   font-family: $headerfont;
 957   font-weight: 700;
 958   text-align: center;
 959   text-decoration: none;
 960   text-transform: capitalize;
 961 }
 962 .view-display-id-block_1 .views-row .views-field-field-tagline .field-content,
 963 .view-display-id-block_2 .views-row .views-field-field-tagline .field-content,
 964 .block-blog-block .views-field-title .field-content {
 965   color: #ffffff;
 966   font-size: 20px;
 967   min-height: 90px;
 968   line-height: 18px;
 969   padding: 0px;
 970   border: 4px solid #ffffff;
 971 }
 972 .view-display-id-block_1 .views-row .views-field-field-tagline a,
 973 .view-display-id-block_2 .views-row .views-field-field-tagline a,
 974 .block-blog-block .views-field-title a {
 975   display: block;
 976   line-height: 26px;
 977   padding: 15px 10px;
 978   min-height: 60px;
 979 }
 980 .view-display-id-block_1 .views-row .views-field-field-headline,
 981 .view-display-id-block_2 .views-row .views-field-field-headline {
 982   font-family: Georgia, 'Times New Roman', serif;
 983 }
 984 .view-display-id-block_1 .views-row .views-field-field-tagline .field-content,
 985 .view-display-id-block_2 .views-row .views-field-field-tagline .field-content,
 986 .block-blog-block .views-field-title .field-content {
 987   background: #666;
 988 }
 989 .view-display-id-block_1 .views-row:hover .views-field-field-tagline .field-content,
 990 .view-display-id-block_2 .views-row:hover .views-field-field-tagline .field-content,
 991 .block-blog-block .view-content:hover .views-field-title .field-content,
 992 .view-display-id-block_1 .views-row .views-field-field-tagline .field-content:hover,
 993 .view-display-id-block_2 .views-row .views-field-field-tagline .field-content:hover,
 994 .block-blog-block .views-field-title .field-content:hover {
 995   background: #999;
 996 }
 997 .block-blog-block .block-title {
 998   background: none;
 999   background-color: #262626;
1000   color: #ffffff;
1001   font-family: $headerfont;
1002   font-weight: 700;
1003   font-size: 16px;
1004   height: 50px;
1005   margin: 0 auto;
1006   padding-top: 11px;
1007   padding-left: 0;
1008   text-align: center;
1009   width: 130px;
1010 }
1011 .block-blog-block .views-field-title .field-content {
1012   display: block;
1013   width: 100%;
1014 }
1015 .block-blog-block .views-field-title .field-content p {
1016   margin-bottom: 0;
1017 }
1018 /**************************************************
1019 * --
1020 * 4. Section footer
1021 * --
1022 **************************************************/
1023 .section-footer {
1024   background-color: #3f3f3f;
1025 }
1026 /**********************************************
1027 * 4.1. Zone footer
1028 **********************************************/
1029 .zone-footer-wrapper {
1030   background-color: $footerbg;
1031   padding-top: 32px;
1032   padding-bottom: 36px;
1033 }
1034 /**
1035 * Menu footer navigation
1036 */
1037 .block-menu-menu-footer-navigation {
1038   width: auto;
1039 }
1040 .section-footer ul.menu {
1041   width: 100%;
1042 }
1043 .section-footer ul.menu ul.menu {
1044   margin: 10px 0 20px 0;
1045 }
1046 .section-footer ul.menu .expanded {
1047   padding-bottom: 10px;
1048 }
1049 .section-footer ul.menu,
1050 .section-footer ul.menu li {
1051   list-style: none;
1052   list-style-image: none;
1053   margin: 0;
1054   padding: 0px 30px 0 0;
1055 }
1056 .section-footer ul.menu .expanded span,
1057 .section-footer ul.menu li a {
1058   color: $footermenuheadercolor;
1059   font-family: $headerfont;
1060   font-weight: 600;
1061   text-decoration: none;
1062 }
1063 .section-footer ul.menu .expanded a.active {
1064   color: #2698F2;
1065 }
1066 .section-footer ul.menu .expanded a:hover {
1067   text-decoration: underline;
1068 }
1069 .section-footer ul.menu .expanded ul.menu li {
1070   display: block;
1071   float: none;
1072   padding: 0;
1073 }
1074 .section-footer ul.menu .expanded ul.menu li a {
1075   color: $footermenulinkcolor;
1076   font-family: $headerfont;
1077   font-weight: 400;
1078   font-weight: normal;
1079 }
1080 /**
1081 * Connect with us
1082 */
1083 .block-social h2 {
1084   font-size: inherit;
1085   color: $footermenuheadercolor;
1086   font-family: $headerfont;
1087   font-weight: 600;
1088   text-decoration: none;
1089 }
1090 .block-social .content ul#social {
1091   list-style: none;
1092 }
1093 .block-social .content #social li {
1094   color: #666;
1095   font-family: $headerfont;
1096   font-weight: 400;
1097   line-height: 1.2em;
1098   margin-top: 0;
1099   margin-bottom: 0;
1100 }
1101 .block-social #facebook {
1102   background: url('../images/social/facebook.png') 0 50% no-repeat;
1103   line-height: 16px;
1104 }
1105 .block-social #twitter {
1106   background: url('../images/social/twitter.png') 0 50% no-repeat;
1107   line-height: 16px;
1108 }
1109 .block-social #pinterest {
1110   background: url('../images/social/pinterest.png') 0 50% no-repeat;
1111   line-height: 16px;
1112 }
1113 .block-social .content li a,
1114 .block-social .content li span {
1115   color: $footermenulinkcolor;
1116   font-family: $headerfont;
1117   font-weight: 400;
1118   display: block;
1119   height: 32px;
1120   padding-top: 15px;
1121   padding-left: 42px;
1122   text-decoration: none;
1123 }
1124
1125 .block-social .content a:hover {
1126   cursor: pointer;
1127   text-decoration: underline;
1128 }
1129 /**********************************************
1130 * 4.2. Zone footer2
1131 **********************************************/
1132 .zone-footer2-wrapper {
1133   background-color: $footer2bg;
1134   padding: 20px 0;
1135   min-height: 60px;
1136 }
1137 body.activebar-container .zone-footer2-wrapper {
1138   min-height: 100px;
1139 }
1140 .zone-footer2 {
1141
1142 }
1143 /**
1144 * Powered by Drupal Commerce
1145 */
1146 .block-powered-drupal-commerce a {
1147   color: #1d76bc;
1148   font-weight: 600;
1149   text-decoration: none;
1150 }
1151 /**
1152 * Payment blocks
1153 */
1154 .block-payment {
1155   background-color: #ffffff;
1156   color: #3f3f3f;
1157   padding: 10px;
1158 }
1159 ul#payments {
1160   margin-bottom: 0;
1161 }
1162 ul#payments li {
1163   display: inline;
1164   float: left;
1165 }
1166 ul#payments li:first-child {
1167   margin-left: 10px;
1168 }
1169 #payments #payment_visa_premier,
1170 #payments #payment_paypal,
1171 #payments #payment_mastercard,
1172 #payments #payment_american_express,
1173 #payments #payment_visa {
1174   display: block;
1175   height: 30px;
1176   margin: 5px 6px;
1177   text-indent: -9999px;
1178   width: 50px;
1179 }
1180 #payments #payment_visa_premier {
1181   background: url('../images/picto_visa_premier.png') left top no-repeat;
1182   margin-left: 0;
1183 }
1184 #payments #payment_paypal {
1185   background: url('../images/picto_paypal.png') left top no-repeat;
1186 }
1187 #payments #payment_mastercard {
1188   background: url('../images/picto_mastercard.png') left top no-repeat;
1189 }
1190 #payments #payment_american_express {
1191   background: url('../images/picto_american_express.png') left top no-repeat;
1192 }
1193 #payments #payment_visa {
1194   background: url('../images/picto_visa.png') left top no-repeat;
1195 }
1196 /**************************************************
1197 * --
1198 * 5. Commerce specific
1199 * --
1200 **************************************************/
1201 /**********************************************
1202 * 5.1. Search & Collection page
1203 **********************************************/
1204 .view-collection-taxonomy-term .products-per-collection li .commerce-product-field,
1205 .page-products .view-display-products li .commerce-product-field {
1206   margin-bottom: 5px;
1207 }
1208 .view-collection-taxonomy-term .products-per-collection li header,
1209 .page-products .view-display-products li header {
1210   background: url('../images/bg_product_attributes_top.png') center top no-repeat;
1211   padding-top: 20px;
1212 }
1213 .view-collection-taxonomy-term .products-per-collection li h2,
1214 .page-products .view-display-products li h2 {
1215   font-size: 14px;
1216   height: 35px;
1217   line-height: 16px;
1218   margin: 0 4px;
1219 }
1220 .view-collection-taxonomy-term .products-per-collection li a,
1221 .view-collection-taxonomy-term .products-per-collection li .commerce-product-field,
1222 .page-products .view-display-products li a,
1223 .page-products .view-display-products li .commerce-product-field {
1224   color: #000000;
1225   font-size: 14px;
1226   text-decoration: none;
1227 }
1228 .view-collection-taxonomy-term .products-per-collection li .field-type-commerce-price,
1229 .page-products .view-display-products li .field-type-commerce-price {
1230   color: #858787;
1231   font-family: $headerfont;
1232   font-weight: 400;
1233 }
1234 .page-products .view-display-products li .content .commerce-product-field-commerce-price {
1235   font-family: $headerfont;
1236   font-weight: 700;
1237 }
1238 .view-collection-taxonomy-term .products-per-collection li.views-row.last,
1239 .page-products .view-display-products li.views-row.last {
1240   padding-right: 0;
1241 }
1242 .views-field-field-extractor-field-product ul li {
1243   border: 1px solid #CBCDCC;
1244   float: left;
1245   margin: 0 0.5em 0 0;
1246   padding:2px;
1247 }
1248 .commerce-fancy-attributes-color {
1249   border: none;
1250 }
1251 /**
1252 * Collection page
1253 */
1254 .view-collection-taxonomy-term .view-header {
1255   position: relative;
1256 }
1257 .view-collection-taxonomy-term .view-header h2 {
1258   font-size: 48px;
1259   margin: 0;
1260   position: absolute;
1261   bottom: 0px;
1262   left: 15px;
1263 }
1264 .view-collection-taxonomy-term .view-header h2 a {
1265   color: #ffffff;
1266   ffont-family: $headerfont;
1267   font-weight: 700;
1268   text-decoration: none;
1269   text-shadow: 0 1px 1px #C3C3C3;
1270   text-transform: capitalize;
1271 }
1272 .view-collection-taxonomy-term .view-header .collection-terms {
1273 }
1274 .view-collection-taxonomy-term .view-header .views-row {
1275   border: 1px solid #d7d7d7;
1276   margin: 0;
1277   margin-bottom: 20px;
1278 }
1279 .view-collection-taxonomy-term .view-header .collection-terms .view-header {
1280   color: #ffffff;
1281 }
1282 .view-collection-taxonomy-term .view-header .collection-terms .view-header,
1283 .view-collection-taxonomy-term .view-header .collection-terms .view-content {
1284   display: inline;
1285   float: left;
1286 }
1287 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-content .item-list ul {
1288   display: none;
1289 }
1290 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-header,
1291 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-content .item-list {
1292   margin-bottom:7px;
1293 }
1294 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-content .item-list {
1295   clear: none;
1296   display: inline;
1297   float: left;
1298   margin-right: 6px;
1299 }
1300 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-header p {
1301   margin: 6px 15px 0 0;
1302 }
1303 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-content .item-list h3 {
1304   margin-bottom: 0;
1305 }
1306 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-content .item-list h3 a {
1307   background-color: #cecece;
1308   border: 1px solid #cecece;
1309   -webkit-border-radius: 8px;
1310   -moz-border-radius: 8px;
1311   border-radius: 8px;
1312   color: #000000;
1313   font-family: $headerfont;
1314   font-weight: 400;
1315   font-size: 16px;
1316   padding: 5px 15px;
1317   text-decoration: none;
1318 }
1319 .view-collection-taxonomy-term .view-header .view-collection-taxonomy-term .view-content .item-list h3 a:hover {
1320   background-color: #ffffff;
1321   border: 1px solid #cecece;
1322   color: #000000;
1323 }
1324 .view-collection-taxonomy-term .view-content .item-list {
1325   clear: both;
1326 }
1327 .view-collection-taxonomy-term .item-list h3 {
1328   position: relative;
1329 }
1330 .view-collection-taxonomy-term .item-list h3 span {
1331   display: block;
1332   position: absolute;
1333   top: -70px;
1334 }
1335 .view-collection-taxonomy-term .item-list h3 .collection {
1336   background: url("../images/bg.png") repeat scroll left top #ECECEC;
1337   font-size: 0.8em;
1338   padding: 0 0 4px;
1339   text-transform: uppercase;
1340 }
1341 .view-collection-taxonomy-term .item-list h3 .collection a {
1342   background-color: #FFFFFF;
1343   color: #B8B8B8;
1344   display: block;
1345   padding: 5px;
1346 }
1347 .view-collection-taxonomy-term .products-per-collection li.views-row {
1348   display: inline;
1349   float: left;
1350   height: auto;
1351   margin: 0;
1352   padding-right: 5px;
1353   padding-bottom: 30px;
1354   width: 230px;
1355 }
1356 .view-collection-taxonomy-term .products-per-collection li.views-row:nth-child(4n+5) {
1357   clear: left;
1358   float: left;
1359 }
1360 /**********************************************
1361 * 5.2. All products page
1362 **********************************************/
1363 .page-products .view-display-products {
1364   margin-top: 20px;
1365 }
1366 .page-products .view-display-products ul li.views-row {
1367   display: inline;
1368   float: left;
1369   height: auto;
1370   margin: 0;
1371   padding-right: 5px;
1372   padding-bottom: 30px;
1373   width: 230px;
1374 }
1375 .page-products .view-display-products ul li.views-row:nth-child(3n) {
1376   padding-right: 0;
1377 }
1378 .page-products .view-display-products ul li.views-row:nth-child(3n+4) {
1379   clear: left;
1380   float: left;
1381 }
1382 .page-products .commerce-product-extra-field-title {
1383   background: url('../images/bg_search_product_name.png') left top no-repeat;
1384   margin-top: 4px;
1385   padding-top: 17px;
1386   font-size: 14px;
1387   text-decoration: none;
1388 }
1389 /**
1390 * Search sort block
1391 */
1392 .block-search-api-sorts:after {
1393   clear: both;
1394   content: ".";
1395   display: block;
1396   height: 0;
1397   visibility: hidden;
1398 }
1399 .block-search-sorts .block-inner {
1400   float: right;
1401   clear: right;
1402 }
1403 .block-search-sorts h2 {
1404   display: inline;
1405   float: left;
1406   font-size: 13px;
1407   line-height: 32px;
1408   margin-right: 5px;
1409   text-transform: uppercase;
1410 }
1411 .block-search-sorts .content {
1412   float: left;
1413 }
1414 .block-search-sorts .content li {
1415   display: inline;
1416   float: left;
1417   margin: 0;
1418   margin-left: 5px;
1419   text-align: center;
1420 }
1421 .block-search-api-sorts ul.search-api-sorts {
1422   margin: 0;
1423 }
1424 .block-search-api-sorts .content li span {
1425   background-color: #8e8e8e;
1426   -webkit-border-radius: 8px;
1427   -moz-border-radius: 8px;
1428   border-radius: 8px;
1429 }
1430 .block-search-api-sorts .content li a {
1431   background-color: #cecece;
1432   -webkit-border-radius: 8px;
1433   -moz-border-radius: 8px;
1434   border-radius: 8px;
1435 }
1436 .block-search-api-sorts .content li span,
1437 .block-search-api-sorts .content li a {
1438   display: block;
1439   padding: 5px 12px;
1440 }
1441 .block-search-api-sorts .content li span a {
1442   background: none;
1443   display: inline;
1444   padding: 0;
1445 }
1446 .block-search-api-sorts .content li,
1447 .block-search-api-sorts .content li .search-api-sort-active,
1448 .block-search-api-sorts .content li a {
1449   color: #ffffff;
1450   text-decoration: none;
1451 }
1452 .block-search-api-sorts .content li .search-api-sort-active .search-api-sort-remove {
1453   display: block;
1454   float: left;
1455   text-indent: -9999px;
1456   width: 0;
1457 }
1458 .block-search-api-sorts .content li .search-api-sort-active .sort-asc img,
1459 .block-search-api-sorts .content li .search-api-sort-active .sort-desc img {
1460   margin: 0 0 8px 5px;
1461 }
1462 /**********************************************
1463 * 5.3. Product page
1464 **********************************************/
1465 .block-search-api-sorts .content a {
1466
1467 }
1468 div.messages.commerce-kickstart-add-to-cart {
1469   background-color: #E4F5FE;
1470   border-color: #D7D7D7;
1471   padding: 5px 10px 25px 30px;
1472 }
1473 .commerce-kickstart-add-to-cart {
1474   background-color: white;
1475   color: #aeaaa5;
1476   margin-left: -30% !important; /* width/2 */
1477   position: absolute;
1478   top: 50px;
1479   left: 50%;
1480   text-align: center;
1481   width: 60%;
1482   z-index: 100;
1483 }
1484 .commerce-kickstart-add-to-cart .placeholder {
1485   background: transparent url('../images/bg_add_to_cart.png') left center no-repeat;
1486   font-style: normal;
1487   font-weight: bold;
1488   padding-top: 5px;
1489   padding-left: 35px;
1490 }
1491 .commerce-kickstart-add-to-cart .field-name-field-images {
1492   float: left;
1493 }
1494 .commerce-kickstart-add-to-cart .commerce-product-title {
1495   clear: both;
1496   margin-bottom: 10px;
1497   text-transform: uppercase;
1498   font-weight: bold;
1499   color: #696458;
1500   text-align: left;
1501 }
1502 .commerce-kickstart-add-to-cart .view-confirm-message-product-display {
1503   width: 350px;
1504 }
1505 .commerce-kickstart-add-to-cart .button-wrapper {
1506   float: right;
1507   padding-right: 30px;
1508   padding-top: 35px;
1509 }
1510 .commerce-kickstart-add-to-cart .added-product-title {
1511   color: #696458;
1512   font-weight: bold;
1513   margin-top: 10px;
1514   font-size: 15px;
1515   text-transform: uppercase;
1516 }
1517 .commerce-kickstart-add-to-cart-close {
1518   background: url('../images/btn_close.png') no-repeat 0 0;
1519   width: 18px;
1520   height: 17px;
1521   display: block;
1522   position: absolute;
1523   top: -9px;
1524   right: -9px;
1525 }
1526 .commerce-kickstart-add-to-cart .button-wrapper .button .commerce-kickstart-add-to-cart-close {
1527   position: static;
1528   background: none;
1529   width: auto;
1530 }
1531 .commerce-kickstart-add-to-cart .button-wrapper .button {
1532   margin-bottom: 10px;
1533 }
1534 .commerce-kickstart-add-to-cart .button-wrapper .button a {
1535   font-weight: bold;
1536   color: white;
1537 }
1538 .commerce-kickstart-add-to-cart .button-wrapper .button.checkout {
1539   background-color: #2698F2;
1540   padding: 10px;
1541   color: white;
1542   font-weight: bold;
1543 }
1544 .commerce-kickstart-add-to-cart .button-wrapper .button.continue {
1545   background-color: #6ebaf5;
1546   padding: 10px;
1547   color: white;
1548   font-weight: bold;
1549 }
1550 .commerce-kickstart-add-to-cart .button-wrapper .button.checkout:hover,
1551 .commerce-kickstart-add-to-cart .button-wrapper .button.continue:hover {
1552   cursor: pointer;
1553 }
1554 .commerce-kickstart-add-to-cart .field-name-field-images img {
1555   border: #D7D7D7 solid 1px;
1556 }
1557 .commerce-kickstart-add-to-cart .views-field-title,
1558 .commerce-kickstart-add-to-cart .views-field-field-images {
1559   text-align: left; /* LTR */
1560 }
1561 .commerce-product-sku .commerce-product-sku-label,
1562 .commerce-kickstart-add-to-cart .views-label-quantity,
1563 .commerce-kickstart-add-to-cart .views-label-commerce-price {
1564     float: left; /* LTR */
1565   font-weight: bold;
1566 }
1567 .commerce-kickstart-add-to-cart .field-items  {
1568   float: none;
1569 }
1570 .commerce-kickstart-add-to-cart .commerce-product-sku-label,
1571 .commerce-kickstart-add-to-cart .views-label-commerce-price,
1572 .commerce-kickstart-add-to-cart .views-label-quantity,
1573 .commerce-kickstart-add-to-cart .field-label {
1574   color: #878380;
1575 }
1576 .commerce-kickstart-add-to-cart .field,
1577 .commerce-kickstart-add-to-cart .commerce-product-sku {
1578   clear: both;
1579   float: left;
1580   text-align: right; /* LTR */
1581   margin-right: 20px; /* LTR */
1582 }
1583 .commerce-kickstart-add-to-cart .views-field-commerce-price {
1584   color: #2698F2;
1585   font-weight: bold;
1586 }
1587 .commerce-kickstart-add-to-cart .field:after,
1588 .entity-commerce-product:after {
1589   content: initial;
1590 }
1591 .node-product-type .product-title {
1592   clear: both;
1593   font-family: $headerfont;
1594   font-weight: 700;
1595   font-size: 24px;
1596 }
1597 .node-product-type .commerce-product-sku {
1598   color: #b1b1b1;
1599   font-family: $headerfont;
1600   font-weight: 400;
1601   font-size: 13px;
1602 }
1603 .node-product-type .commerce-product-sku-label {
1604   font-weight: normal;
1605 }
1606 .node-product-type .commerce-product-field {
1607   color: #54A8E5;
1608   font-family: $headerfont;
1609   font-weight: 700;
1610   font-size: 30px;
1611   margin-bottom: 20px;
1612 }
1613 .node-product-type .field-name-body {
1614   font-family: $headerfont;
1615   font-weight: 400;
1616   line-height: 20px;
1617   margin-bottom: 20px;
1618 }
1619 .node-product-type .field-name-body .read-more,
1620 .node-product-type .field-name-body .read-less,
1621 .node-product-type .field-name-body .read-more a,
1622 .node-product-type .field-name-body .read-less a {
1623   font-family: $headerfont;
1624   font-size: 14px;
1625   font-weight: 400;
1626 }
1627 .node-product-type .field-name-body .read-more a,
1628 .node-product-type .field-name-body .read-less a {
1629   color: #898a8c;
1630   display: block;
1631   height: 18px;
1632   margin-top: 10px;
1633   text-indent: 25px;
1634   text-decoration: none;
1635   text-transform: capitalize;
1636 }
1637 .node-product-type .field-name-body .read-more a {
1638   background: url('../images/btn_read_more.png') left top no-repeat;
1639 }
1640 .node-product-type .field-name-body .read-less a {
1641   background: url('../images/btn_read_less.png') left top no-repeat;
1642 }
1643 .node-product-type .field-name-body .read-more a:hover,
1644 .node-product-type .field-name-body .read-less a:hover {
1645   cursor: pointer;
1646   text-decoration: underline;
1647 }
1648 .commerce-add-to-cart {
1649   background: url('../images/bg_product_attributes_top.png') center top no-repeat;
1650   padding-top: 40px;
1651 }
1652 .node-product-type .field-name-field-product {
1653   background: url('../images/bg_product_attributes_bottom.png') center bottom no-repeat;
1654   margin-bottom: 15px;
1655   padding-bottom: 50px;
1656 }
1657 /* Cloud zoom */
1658 .cloud-zoom-container #wrap {
1659   z-index: 2 !important; /* Fix overlay */
1660 }
1661 .node-product-type #wrap {
1662   float: inherit;
1663 }
1664 .node-product-type .cloud-zoom-gallery-thumbs {
1665   clear: both;
1666 }
1667 .node-product-type .cloud-zoom-gallery {
1668   border: 1px solid #5b5b5b;
1669   display: block;
1670   float: left;
1671   margin: 5px 0;
1672 }
1673 /* Product details */
1674 .commerce-add-to-cart label {
1675   float: left;
1676   font-family: $headerfont;
1677   font-weight: 600;
1678   margin-right: 5px;
1679   width: 45%;
1680   white-space: nowrap;
1681 }
1682 .commerce-add-to-cart label:after {
1683   content: " :";
1684 }
1685 .commerce-add-to-cart .form-item {
1686   margin-top: 0;
1687 }
1688 .commerce-add-to-cart .form-submit {
1689   background: #2698F2 url('../images/bg_add_to_cart.png') 90% 50% no-repeat;
1690   border: 0;
1691   -webkit-border-radius: 8px;
1692   -moz-border-radius: 8px;
1693   border-radius: 8px;
1694   color: #ffffff;
1695   font-family: $headerfont;
1696   font-weight: 400;
1697   font-size: 17px;
1698   font-weight: normal;
1699   margin-top: 40px;
1700   margin-left: 5px;
1701   padding: 5px 50px 5px 10px;
1702 }
1703 .service-links {
1704   float: right;
1705   width: 315px;
1706 }
1707 .service-links ul li {
1708   display: inline;
1709   float: left;
1710   margin: 0;
1711   padding: 0;
1712   width: 90px;
1713 }
1714 /* Clearfix */
1715 .form-type-commerce-fancy-attributes-ajax:after {
1716   display: block;
1717   clear: both;
1718   content: ".";
1719   height: 0;
1720   visibility: hidden;
1721 }
1722 /* Positioning the color attribute squares so that when there's multiple they display properly */
1723 .form-type-commerce-fancy-attributes #edit-attributes-field-color {
1724   float: left;
1725   width: 50%;
1726 }
1727 /* Styling for the color attributes. */
1728 .form-type-commerce-fancy-attributes-ajax .form-item-attributes-field-color {
1729   float: left;
1730   margin-right: 5px;
1731   width: auto;
1732 }
1733 .commerce-add-to-cart .attribute-widgets > .form-item { /* Positions the throbber */
1734   position: relative;
1735 }
1736 .commerce-add-to-cart .attribute-widgets > .form-item .ajax-progress-throbber { /* Positions the throbber */
1737   display: none;
1738   position: absolute;
1739 }
1740 .commerce-add-to-cart .attribute-widgets .form-item .description {
1741   position: relative;
1742 }
1743 .commerce-add-to-cart .attribute-widgets .field-name-field-category-color {
1744   border: 1px solid #CBCDCC;
1745   padding:3px;
1746 }
1747 .commerce-add-to-cart .attribute-widgets .description-selected .field-name-field-category-color {
1748   border-color: #2698F2;
1749 }
1750 .commerce-fancy-attributes-color {
1751   height: 20px;
1752   width: 20px;
1753 }
1754 /**********************************************
1755 * 5.4. Checkout process
1756 **********************************************/
1757 /**
1758 * Shopping cart page
1759 * Checkout page
1760 * Review order page
1761 */
1762 .page-cart #views-form-commerce-cart-form-default table,
1763 .page-checkout #commerce-checkout-form-checkout .view-content table,
1764 .page-checkout #commerce-checkout-form-checkout .view-footer table,
1765 .page-checkout #commerce-checkout-form-review .view-content table,
1766 .page-checkout #commerce-checkout-form-review .view-footer table,
1767 .page-checkout #commerce-checkout-form-review .checkout_review table {
1768   width: 100%;
1769 }
1770 .page-cart #views-form-commerce-cart-form-default table thead th,
1771 .page-checkout #commerce-checkout-form-checkout table thead th {
1772   color: #777777;
1773   font-size: 13px;
1774   padding: 0 10px 10px 10px;
1775   text-transform: uppercase;
1776 }
1777 .view-commerce-line-item-table table tbody tr td {
1778   padding: 25px 10px;
1779 }
1780 .page-cart #views-form-commerce-cart-form-default .views-field-line-item-title {
1781   width: 400px;
1782 }
1783 .page-cart #views-form-commerce-cart-form-default .views-field-edit-delete {
1784   text-align: right;
1785 }
1786 .page-cart #views-form-commerce-cart-form-default .line-item-summary {
1787 }
1788 .page-cart #views-form-commerce-cart-form-default table tbody tr.odd,
1789 .page-checkout #commerce-checkout-form-checkout table tbody tr.odd {
1790   background-color: transparent;
1791 }
1792 .page-cart #views-form-commerce-cart-form-default table tbody tr.even,
1793 .page-checkout #commerce-checkout-form-checkout table tbody tr.even,
1794 .page-checkout #commerce-checkout-form-review .checkout_review table tbody tr.even {
1795   background-color: transparent;
1796 }
1797 /* Remove & update cart button styling */
1798 .commerce-line-item-views-form .views-field-edit-delete input[type="submit"],
1799 .commerce-line-item-actions input[value="Update cart"] {
1800   background: none;
1801   border: none transparent;
1802   border-bottom: 1px solid #888;
1803   border-radius: 0;
1804   color: #666666;
1805   font-weight: normal;
1806   padding: 0 0 1px 0;
1807 }
1808 .commerce-line-item-actions input[value="Update cart"] {
1809   margin-right:20px;
1810 }
1811 /* Checkout button */
1812 .commerce-line-item-actions input[value="Checkout"] {
1813   background: #2698F2 none 0 0 no-repeat;
1814   border: 0;
1815   -webkit-border-radius: 8px;
1816   -moz-border-radius: 8px;
1817   border-radius: 8px;
1818   color: #ffffff;
1819   font-family: $headerfont;
1820   font-weight: 600;
1821   font-size: 15px;
1822   font-weight: normal;
1823   padding: 6px 12px;
1824 }
1825 .page-cart .views-field-nothing {
1826   position: relative;
1827 }
1828 .page-cart .entity-commerce-product {
1829   display: inline;
1830 }
1831 .page-cart .entity-commerce-product:after {
1832   clear: none;
1833 }
1834 .page-cart .entity-commerce-product h2 {
1835   display: none;
1836   font-size: 0;
1837   text-indent: -9999px;
1838 }
1839 .page-cart .entity-commerce-product .content .field:after {
1840   clear: none;
1841   margin-bottom: 3px;
1842 }
1843 .page-cart .entity-commerce-product .content .field-name-field-images {
1844   display: inline;
1845   float: left;
1846   margin-right: 8px;
1847 }
1848 .page-cart .entity-commerce-product .content .field-name-field-images img {
1849   border: 1px solid #9d9d9d;
1850 }
1851 .page-cart a.view_product_details {
1852   color: #7d7d7d;
1853   font-size: 11px;
1854   margin-top: 5px;
1855 }
1856 .page-cart .entity-commerce-product .content .commerce-product-sku-label,
1857 .page-cart .entity-commerce-product .content .field-label {
1858   font-size: 11px;
1859   font-weight: normal;
1860   line-height: 22px;
1861   text-transform: uppercase;
1862   vertical-align: bottom;
1863 }
1864 .page-cart .entity-commerce-product .content .field-label-inline .field-items {
1865   float: inherit;
1866 }
1867 .page-cart .entity-commerce-product .content .commerce-product-title {
1868   font-weight: bold;
1869 }
1870 /* Review order page */
1871 table.checkout-review .pane-title td {
1872   font-weight: 600;
1873   padding: 5px 10px;
1874   text-transform: uppercase;
1875 }
1876 table.checkout-review td.pane-data-full {
1877   padding: 20px;
1878 }
1879 .page-checkout #commerce-checkout-form-review .checkout-help {
1880   margin: 0 0 10px 10px;
1881 }
1882 .page-checkout #commerce-checkout-form-review .checkout_review tr.pane-data,
1883 .page-checkout #commerce-checkout-form-review .checkout_review tr.pane-data td.pane-data-full{
1884   border-bottom: 0;
1885 }
1886 .page-checkout #commerce-checkout-form-review .checkout_review tr.pane-data td.pane-data-full {
1887   padding-bottom: 10px;
1888 }
1889 .page-checkout #commerce-checkout-form-review .checkout_review .view-commerce-cart-summary {
1890   margin-top: 5px;
1891 }
1892 .page-checkout #commerce-checkout-form-review .checkout_review .view-commerce-cart-summary thead tr {
1893   font-weight: bold;
1894 }
1895 /* Payment information */
1896 .commerce_payment .fieldset-wrapper {
1897   padding: 0 10px;
1898 }
1899 /* Checkout complete */
1900 .page-checkout #commerce-checkout-form-complete {
1901   margin: 0 10px;
1902   padding-top: 15px;
1903 }
1904 /**
1905 * Checkout page
1906 * Shipping page
1907 */
1908 .page-checkout fieldset {
1909   padding: 10px;
1910 }
1911 .page-checkout fieldset legend {
1912   border-bottom: 1px solid #d7d7d7;
1913   margin: 0 0 10px 0;
1914   padding: 0px;
1915   width: 100%;
1916 }
1917 .page-checkout fieldset legend span {
1918   font-weight: 600;
1919   padding-left: 10px;
1920   text-transform: uppercase;
1921 }
1922 .page-checkout #commerce-checkout-form-checkout table thead th {
1923   font-size: 16px;
1924 }
1925 .page-checkout fieldset.customer_profile_shipping .form-item-customer-profile-shipping-commerce-customer-address-und-0-name-line,
1926 .page-checkout fieldset.customer_profile_shipping .form-item-customer-profile-shipping-commerce-customer-address-und-0-country .form-item,
1927 .page-checkout fieldset.customer_profile_shipping .street-block .form-item,
1928 .page-checkout fieldset.customer_profile_billing .form-item-customer-profile-billing-addressbook .form-item,
1929 .page-checkout fieldset.customer_profile_billing .form-item-customer-profile-billing-commerce-customer-address-und-0-name-line,
1930 .page-checkout fieldset.customer_profile_billing .form-item-customer-profile-billing-commerce-customer-address-und-0-country .form-item,
1931 .page-checkout fieldset.customer_profile_billing .street-block .form-item {
1932   width: 100%;
1933 }
1934 .page-checkout fieldset.account .form-item-account-login-mail label,
1935 .page-checkout fieldset.customer_profile_shipping .form-item-customer-profile-shipping-commerce-customer-address-und-0-name-line label,
1936 .page-checkout fieldset.customer_profile_shipping .form-item-customer-profile-shipping-commerce-customer-address-und-0-country label,
1937 .page-checkout fieldset.customer_profile_shipping .street-block label,
1938 .page-checkout fieldset.customer_profile_billing .form-item-customer-profile-billing-addressbook label,
1939 .page-checkout fieldset.customer_profile_billing .form-item-customer-profile-billing-commerce-customer-address-und-0-name-line label,
1940 .page-checkout fieldset.customer_profile_billing .form-item-customer-profile-billing-commerce-customer-address-und-0-country label,
1941 .page-checkout fieldset.customer_profile_billing .street-block label {
1942   display: block;
1943   float: left;
1944   width: 20%;
1945 }
1946 .page-checkout .form-item-commerce-shipping-shipping-service {
1947   border-bottom: 1px solid #f8f3f3;
1948   clear: left;
1949   float: left;
1950   margin: 0;
1951   padding: 25px 8px;
1952   width: 400px;
1953 }
1954 .page-checkout .form-item-commerce-shipping-shipping-service label {
1955   font-weight: 400;
1956   padding: 0 0 0 10px;
1957 }
1958 .page-checkout #commerce-checkout-form-shipping .commerce_shipping .form-item-commerce-shipping-shipping-service .ajax-progress-throbber {
1959   position: absolute;
1960   top: 0;
1961   left: 0;
1962 }
1963 .page-checkout #commerce-checkout-form-shipping .commerce_shipping .form-item-commerce-shipping-shipping-service:hover,
1964 .page-checkout #commerce-checkout-form-shipping .commerce_shipping .form-item-commerce-shipping-shipping-service:hover .option {
1965   background-color: #ececec;
1966   cursor: pointer;
1967 }
1968 /* Checkout continue button */
1969 input.checkout-continue {
1970   margin: 0 10px 0 0;
1971   padding: 10px 15px;
1972 }
1973 .checkout-buttons .checkout-cancel,
1974 .checkout-buttons .checkout-back {
1975   margin: 0 5px;
1976 }
1977 /**************************************************
1978 * --
1979 * 6. Kickstart specific
1980 * --
1981 **************************************************/
1982 /**********************************************
1983 * 6.1 Homepage elements
1984 **********************************************/
1985 .front .zone-content {
1986   margin-bottom: 0;
1987 }
1988 .front .region-content-inner {
1989   min-height: 100%;
1990   padding: 0;
1991 }
1992 /**************************************************
1993 * --
1994 * 7. Blog
1995 * --
1996 **************************************************/
1997 .page-blog .view-content .views-row {
1998   display: inline;
1999   clear: left;
2000   float: left;
2001   padding: 0;
2002   width: 49%;
2003 }
2004 .page-blog .view-content .views-row-even {
2005   clear: right;
2006   float: right;
2007 }
2008 .page-blog .views-row {
2009   border: 1px solid #E0E3E6;
2010   margin: 15px 0 0px 0;
2011   padding: 10px;
2012 }
2013 .page-blog .view-content .views-row .node-blog-post {
2014   padding: 10px 15px;
2015   position: relative;
2016 }
2017 .page-blog .view-content .views-row h2 {
2018   font-size: 18px;
2019   font-weight: 400;
2020   margin-bottom: 0;
2021   text-transform: uppercase;
2022 }
2023 .page-blog .view-content .views-row h2 a {
2024   color: #656565;
2025   text-decoration: none;
2026 }
2027 .node-type-blog-post h1#page-title,
2028 .node-type-blog-post .comment-wrapper .title {
2029   color: #656565;
2030   font-weight: 400;
2031   margin-bottom: 0;
2032   text-transform: uppercase;
2033 }
2034 .page-blog .view-content .views-row .submitted,
2035 .node-type-blog-post .submitted {
2036   font-size: 12px;
2037   margin: 5px 0;
2038   text-transform: uppercase;
2039 }
2040 .page-blog .view-content .views-row .submitted,
2041 .page-blog .view-content .views-row .submitted a,
2042 .node-type-blog-post .submitted,
2043 .node-type-blog-post .submitted a {
2044   color: #A0A0A0;
2045 }
2046 .page-blog .view-content .views-row .content .field-name-field-image,
2047 .node-type-blog-post .content .field-name-field-image {
2048   margin: 0 0 15px;
2049 }
2050 .page-blog .view-content .views-row .content .field-name-field-tags,
2051 .node-type-blog-post .content .field-name-field-tags {
2052   border-top: 1px dotted #777777;
2053   font-size: 11px;
2054   margin-bottom: 5px;
2055   padding: 3px;
2056 }
2057 .page-blog .view-content .views-row .content .field-name-field-blog-category,
2058 .node-type-blog-post .content .field-name-field-blog-category {
2059   font-size: 11px;
2060   padding: 3px;
2061 }
2062 .page-blog .view-content .views-row .content .field-type-taxonomy-term-reference .field-items .field-item,
2063 .node-type-blog-post .content .field-type-taxonomy-term-reference .field-items .field-item {
2064   padding-right: 3px;
2065
2066 }
2067 /* Teaser links */
2068 .page-blog .view-content .views-row .node-links ul li {
2069   margin: 0;
2070   padding: 0;
2071   margin-right: 5px;
2072 }
2073 .page-blog .view-content .views-row .node-links,
2074 .page-blog .view-content .views-row .node-links a {
2075   font-size: 12px;
2076 }
2077 .page-blog .view-content .views-row .node-links a {
2078   font-weight: 600;
2079   text-decoration: none;
2080 }
2081 /**********************************************
2082 * 7.1. Blog comments
2083 **********************************************/
2084 .node-type-blog-post .comment-wrapper {
2085   padding: 0px 12px;
2086 }
2087 .node-type-blog-post .comment-wrapper h2.comment-form {
2088   border-bottom: 1px solid #E0E3E6;
2089   margin-top: 20px;
2090 }
2091 /* Comment */
2092 .node-type-blog-post .comment {
2093   padding: 10px 0 5px 0;
2094 }
2095 .node-type-blog-post .comment header {
2096   float: right;
2097 }
2098 .node-type-blog-post .comment footer.comment-submitted {
2099   border-bottom: 1px dotted #E0E3E6;
2100   font-size: 12px;
2101   margin: 5px 0;
2102   text-transform: uppercase;
2103 }
2104 .node-type-blog-post .comment .comment-links {
2105   border-top: 1px solid #E0E3E6;
2106   border-bottom: 1px solid #E0E3E6;
2107   font-size: 13px;
2108   padding: 5px;
2109   text-transform: uppercase;
2110 }
2111 /* Comment form */
2112 .node-type-blog-post .comment-wrapper .comment-form {
2113   background-color: #ececec;
2114   padding: 15px;
2115 }
2116
2117 .node-type-blog-post .comment-wrapper .comment-form .form-item label {
2118   float: left;
2119   padding-right: 8px;
2120   text-align: right;
2121   width: 110px;
2122 }
2123 .node-type-blog-post .comment-wrapper .comment-form .form-item label:after {
2124   clear: both;
2125   content: ":";
2126 }
2127 .node-type-blog-post .comment-wrapper .comment-form #edit-author--2 {
2128   margin: 0;
2129 }
2130 .node-type-blog-post .comment-wrapper .comment-form #edit-author--2 label {
2131   display: inline;
2132 }
2133
2134 .node-type-blog-post .comment-wrapper .comment-form .form-textarea-wrapper {
2135   float: left;
2136   width: 65%;
2137 }
2138 .node-type-blog-post .comment-wrapper .comment-form .filter-wrapper {
2139   clear: both;
2140 }
2141 .node-type-blog-post .comment-wrapper .comment-form .filter-wrapper .fieldset-wrapper {
2142   font-size: 11px;
2143   margin: 0 auto;
2144   width: 80%;
2145 }
2146
2147 .node-type-blog-post .comment-wrapper .comment-form .filter-wrapper .form-item {
2148   margin-top: 0;
2149 }
2150 .node-type-blog-post .comment-wrapper .comment-form .filter-wrapper .form-item label {
2151   float: inherit;
2152   text-align: inherit;
2153   width: inherit;
2154 }
2155 .node-type-blog-post .comment-wrapper .comment-form #edit-actions {
2156 }
2157 .node-type-blog-post .comment-wrapper .comment-form .form-submit {
2158   font: normal 16px/21px "Open Sans", Arial, sans-serif;
2159   line-height: 30px;
2160   padding: 4px 15px;
2161 }
2162 /**************************************************
2163 * --
2164 * 8. User account
2165 * --
2166 **************************************************/
2167 /* User login, registration, lost password */
2168 #user_login_form,
2169 #user_pass_form,
2170 #user_register_form,
2171 #user-register-form .form-actions,
2172 .create-account {
2173   clear: both;
2174   float: none;
2175   width: auto;
2176 }
2177 #user_login_form h1,
2178 .create-account h2,
2179 #user_pass_form h1,
2180 #user_register_form h1 {
2181   font: normal 300 38px/38px "Open Sans", Arial, sans-serif;
2182 }
2183 #user_login_form .form-submit,
2184 #user_pass_form .form-submit,
2185 #user-register-form .form-submit {
2186   background: #60aa20 url(../images/button.png) repeat-x;
2187   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #60aa20), color-stop(1, #199107));
2188   background: -moz-linear-gradient(top center, #60aa20 0%, #199107 100%);
2189   -webkit-border-radius: 4px;
2190   -moz-border-radius: 4px;
2191   border-radius: 4px;
2192   color: #ffffff;
2193   padding: 10px 15px;
2194 }
2195 #user_login_form .form-submit:hover,
2196 #user_pass_form .form-submit:hover,
2197 #user-register-form .form-submit:hover {
2198   background: #60aa20;
2199 }
2200 a.login-register,
2201 a.login-account {
2202   background: #2698F2 url(../images/button.png) repeat-x;
2203   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2698F2), color-stop(1, #207cca));
2204   background: -moz-linear-gradient(top center, #2698F2 0%, #207cca 100%);
2205   -webkit-border-radius: 4px;
2206   -moz-border-radius: 4px;
2207   border-radius: 4px;
2208   color: #ffffff;
2209   font-size: 16px;
2210   margin-left: 0px;
2211   padding: 15px 20px;
2212 }
2213 a.login-register:hover,
2214 a.login-account:hover {
2215   background: #2698f2;
2216 }
2217 /* User/login */
2218 #user_login_form {
2219   border: 0;
2220 }
2221 .create-account {
2222   margin-top: 20px;
2223 }
2224  .login-password {
2225   color: #2698F2;
2226 }
2227 #user_login_form .login-password:hover {
2228   color: #2698F2;
2229   text-decoration: underline;
2230 }
2231 /* Registration */
2232 #user-register-form .form-actions {
2233   float: left;
2234   width: 50%;
2235 }
2236 #user-register-form .back-to-login {
2237   float: right;
2238   margin: 8px;
2239 }
2240 .password-suggestions ul {
2241   margin-left: 20px;
2242 }
2243 .password-confirm .ok,
2244 .password-confirm .error {
2245   font-weight: bold;
2246 }
2247 .password-confirm .ok {
2248   color: #60aa20;
2249 }
2250 .password-confirm .error {
2251   color: #EA2C2C;
2252 }
2253 /* Lost password */
2254 #user_pass_form .form-actions {
2255   float: left;
2256   margin-right: 20px;
2257 }
2258 #user_pass_form .back-to-login {
2259   float: right;
2260   margin: 1em 0;
2261   padding-top: 9px;
2262 }
2263 a.login-account {
2264   font-size: 14px;
2265   padding: 10px 15px;
2266 }
2267 /* User home */
2268 .page-user .profile h3 {
2269   clear: both;
2270   margin-top: 20px;
2271   text-transform: uppercase;
2272 }
2273 .page-user .profile ul.user-information {
2274   width: 100%;
2275 }
2276 .page-user .profile ul,
2277 .page-user .profile ul li {
2278   list-style: none;
2279   list-style-image: none;
2280 }
2281 .page-user .profile ul.user-information li {
2282   float: left;
2283   height: 150px;
2284   min-height: 150px;
2285   margin-bottom: 20px;
2286   position: relative;
2287   padding-bottom: 30px;
2288   width: 300px;
2289 }
2290 .page-user .profile ul.user-information li h4 {
2291   font-size: 14px;
2292   text-transform: uppercase;
2293 }
2294 .page-user .profile ul.user-information li a {
2295   border: 1px solid #D8D8D8;
2296   padding: 5px 10px;
2297   position: absolute;
2298   bottom: 0;
2299 }
2300 .page-user .profile ul.user-recent-orders li .view-commerce-backoffice-user-orders td {
2301   padding: 10px;
2302 }
2303
2304 /* User primary menu/tabs */
2305 .page-user ul.primary {
2306   border-bottom: 1px solid #D8D8D8;
2307   border-top: 1px solid #D8D8D8;
2308   padding: 10px 0;
2309   margin: 0 0 30px 0;
2310 }
2311 .page-user ul.primary li a {
2312   background-color: transparent;
2313   border: 0 none;
2314   border-radius: 0;
2315   color:#898A8C;
2316 }
2317 .page-user ul.primary li a.active {
2318   color:#000000;
2319   font-weight: bold;
2320 }
2321 .page-user .block-system-main {
2322   margin: 10px;
2323 }
2324 /* User secondary menu/tabs */
2325 .page-user ul.secondary {
2326   border-bottom: 0 transparent;
2327   padding: 0.5em 0;
2328 }
2329 .page-user ul.secondary li {
2330   border-right: 0 transparent;
2331 }
2332 .page-user ul.secondary a {
2333   color: #898A8C;
2334   border: 1px solid #D8D8D8;
2335   padding:5px 10px;
2336 }
2337 .page-user ul.secondary a.active {
2338   color: #000000;
2339   font-weight: bold;
2340 }
2341 /* Account headers */
2342 .profile h3 {
2343   border-bottom: 0 transparent;
2344   background-color: #ECECEC;
2345   color: #898A8C;
2346   font-size: 1.1em;
2347   padding: 5px 10px;
2348 }
2349 /* Address book */
2350 .page-user-addressbook ul.action-links {
2351   list-style: none;
2352   margin: 1.5em 0 2em 0.5em;
2353 }
2354 .page-user-addressbook ul.action-links li a {
2355   background: -moz-linear-gradient(center top , #FFFFFF 0%, #DDDDDD 100%) repeat scroll 0 0 transparent;
2356   border-color: #DDDDDD #BBBBBB #999999;
2357   border-radius: 11px 11px 11px 11px;
2358   border-style: solid;
2359   border-width: 1px;
2360   color: #333333;
2361   font-size: 12px;
2362   font-weight: bold;
2363   padding: 3px 10px 4px;
2364   text-decoration: none;
2365   text-shadow: 0 1px 1px #FFFFFF;
2366 }
2367 .page-user-addressbook .view-commerce-addressbook .views-field {
2368   border: 1px solid #D8D8D8;
2369   margin: 0 15px 15px 0;
2370   padding: 20px;
2371 }
2372 .page-user-addressbook .field-name-commerce-customer-address {
2373   color: #5F6061;
2374   font-size: 13px;
2375   margin-bottom: 15px;
2376 }
2377 .page-user-addressbook .view-commerce-addressbook-defaults .views-field {
2378   background-color: #F0F0F0;
2379   border: 1px solid #D8D8D8;
2380   float: left;
2381   margin: 0 15px 20px 0;
2382   padding: 20px;
2383 }
2384 .page-user #commerce-addressbook-billing-list {
2385   clear: both;
2386 }
2387
2388
2389 /* Connector */
2390 .not-logged-in #block-connector-one-click-block {
2391   margin-left: 10px; /* LTR */
2392 }
2393
2394 .not-logged-in #block-connector-one-click-block .connector-button {
2395   color: transparent;
2396   cursor:pointer;
2397   height: 30px;
2398   width: 30px;
2399   margin-right: 10px;
2400   border-radius: 0;
2401 }
2402
2403 .not-logged-in #block-connector-one-click-block #edit-oauthconnector-facebook {
2404   background:url('../images/btn_facebook.png') no-repeat;
2405 }
2406
2407 .not-logged-in #block-connector-one-click-block #edit-oauthconnector-twitter {
2408   background:url('../images/btn_twitter.png') no-repeat;
2409 }
2410
2411 .not-logged-in #block-connector-one-click-block #edit-oauthconnector-google {
2412   background:url('../images/btn_google.png') no-repeat;
2413 }
2414
2415 /* Orders */
2416 /* Order table styles including - user order table, order page table & order activity stream */
2417 .page-user-orders .view-commerce-line-item-table table,
2418 .page-user-orders .view-commerce-user-orders table,
2419 .view-commerce-backoffice-user-orders table,
2420 .view-commerce-backoffice-order-messages table {
2421   width: 100%;
2422 }
2423 .page-user-orders .view-commerce-line-item-table th,
2424 .page-user-orders .view-commerce-user-orders th,
2425 .view-commerce-backoffice-user-orders th,
2426 .view-commerce-backoffice-order-messages th,
2427 .view-commerce-cart-summary th {
2428   color: #777777;
2429   font-size: 13px;
2430   padding: 0 10px 10px;
2431   text-align: left;
2432   text-transform: uppercase;
2433 }
2434 .page-user-orders .view-commerce-user-orders table thead th a,
2435 .view-commerce-backoffice-user-orders th a {
2436   color: #777777;
2437   text-decoration: none;
2438 }
2439 .page-user-orders .view-commerce-line-item-table table tbody tr td,
2440 .commerce-line-item-views-form table.views-table tbody tr td,
2441 .view-commerce-user-orders td,
2442 .view-commerce-backoffice-user-orders td,
2443 .view-commerce-backoffice-order-messages td,
2444 .view-commerce-cart-summary td {
2445   background-color: transparent;
2446   padding: 25px 10px;
2447 }
2448 .page-user-orders .view-commerce-line-item-table tr.even,
2449 .page-user-orders .view-commerce-line-item-table tr.odd,
2450 .page-user-orders .view-commerce-user-orders tr.even,
2451 .page-user-orders .view-commerce-user-orders tr.odd,
2452 .view-commerce-backoffice-user-orders tr.even,
2453 .view-commerce-backoffice-user-orders tr.odd,
2454 .view-commerce-backoffice-order-messages tr.even,
2455 .view-commerce-backoffice-order-messages tr.odd,
2456 .view-commerce-cart-summary tr.even,
2457 .view-commerce-cart-summary tr.odd {
2458   background-color: transparent;
2459 }
2460 .page-user-orders td.views-field-created,
2461 .page-user-orders td.views-field-changed,
2462 .view-commerce-backoffice-order-messages .views-field-timestamp {
2463   color: #898A8C;
2464   font-size: 13px;
2465 }
2466 .page-user-orders .field-name-commerce-customer-billing {
2467   margin-left: 10px;
2468   margin-right: 20px;
2469 }
2470 .page-user-orders .field-name-commerce-customer-billing,
2471 .page-user-orders .field-name-commerce-customer-shipping {
2472   float: left;
2473   margin: 5px 5% 0 0;
2474   width: 45%;
2475 }
2476 .page-user-orders .field-name-commerce-customer-billing .field-label,
2477 .page-user-orders .field-name-commerce-customer-shipping .field-label,
2478 .view-commerce-backoffice-order-messages h2.title {
2479   background-color: #E5E5E5;
2480   font-size: 14px;
2481   padding:7px 10px;
2482 }
2483 .field-name-commerce-customer-billing .field-items,
2484 .field-name-commerce-customer-shipping .field-items {
2485   padding:5px;
2486 }
2487 .field-name-commerce-order-total .commerce-price-formatted-components {
2488   padding: 10px 15px;
2489 }
2490 .field-name-commerce-order-total tr.even,
2491 .field-name-commerce-order-total tr.odd {
2492   background-color: transparent;
2493 }
2494 .field-name-commerce-order-total .commerce-price-formatted-components tr.component-type-commerce-price-formatted-amount {
2495   background-color: transparent;
2496   color: #000000;
2497 }
2498 .page-user-orders .commerce-backoffice-order-status-form {
2499   clear: both;
2500 }
2501 .page-user-orders .commerce-backoffice-order-status-form {
2502   padding: 20px 0;
2503 }
2504 .page-user-orders .commerce-backoffice-order-status-form .form-type-select,
2505 .page-user-orders .commerce-backoffice-order-status-form .form-submit {
2506   display: inline;
2507 }
2508 /* Order summary for checkout & order history page*/
2509 .commerce-order-handler-area-order-total .field-items,
2510 .field-name-commerce-order-total .field-items {
2511   background-color:#E5E5E5;
2512   float: right;
2513   margin-bottom: 15px;
2514   padding: 10px 15px;
2515   width: 25%;
2516 }
2517 .field-name-commerce-order-total:after {
2518   content: ".";
2519   display: block;
2520   height: 0;
2521   clear: both;
2522   visibility: hidden;
2523 }
2524 /* IE7
2525 *:first-child + html .field-name-commerce-order-total {
2526  �min-height: 1%;
2527 }*/
2528 .field-name-commerce-order-total .commerce-price-formatted-components {
2529   width: 100%;
2530 }
2531 .commerce-price-formatted-components td {
2532   padding: 5px;
2533 }
2534 .commerce-price-formatted-components .component-title {
2535   color: #767676;
2536   font-size: 13px;
2537 }
2538 .component-type-commerce-price-formatted-amount .component-title {
2539   color: #000000;
2540 }
2541 .commerce-line-item-actions {
2542   clear: both;
2543 }
2544 /* Order activity stream */
2545 /* Order states */ /* Need generic markup */
2546 .commerce_order_state,
2547 .commerce_order_payment_entered {
2548   border: 1px solid #E5E5E5;
2549   border-radius: 3px;
2550   padding:4px 7px;
2551 }
2552 /* Add comment */
2553 html.js #commerce-backoffice-message-form fieldset .fieldset-legend {
2554   background-image: url('../images/icon_add.png');
2555   background-position: 0 50%;
2556   padding: 0 0 0 30px;
2557 }
2558 #commerce-backoffice-message-form .fieldset-legend a {
2559   color: #2698F2;
2560   font-family: $headerfont;
2561   font-weight: 700;
2562   text-decoration: none;
2563   text-transform: uppercase;
2564 }
2565
2566 /* Maintenance Page Styles */
2567 .in-maintenance {
2568   margin: 0;
2569 }
2570 .in-maintenance .body-wrapper {
2571   border-top: 5px solid #8E8E8E;
2572 }
2573 .in-maintenance #branding,
2574 .in-maintenance #page {
2575   width: 960px;
2576   margin: 0 auto;
2577 }
2578 .in-maintenance #branding {
2579   padding: 20px 0 10px 0;
2580 }
2581 .in-maintenance #page .page-wrapper {
2582   background: #fff;
2583   padding: 10px 10px 20px 10px;
2584 }
2585
2586 #toolbar {
2587   z-index: 1001;
2588 }