This is the second panel of the basic tab example. This is the second panel of the basic tab example.
Font Color 1
Background - Color 5
``` */ /* font colors */ @font-face { font-family: 'Tisa'; src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa.eot"); src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa.eot?#iefix") format("embedded-opentype"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa.woff") format("woff"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Tisa Medium'; src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa-Medium.eot"); src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa-Medium.eot?#iefix") format("embedded-opentype"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa-Medium.woff") format("woff"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/Tisa-Medium.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Tisa Sans'; src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans.eot"); src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans.eot?#iefix") format("embedded-opentype"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans.woff") format("woff"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Tisa Sans Bold'; src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Bold.eot"); src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Bold.eot?#iefix") format("embedded-opentype"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Bold.woff") format("woff"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Tisa Sans Medium'; src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Medium.eot"); src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Medium.eot?#iefix") format("embedded-opentype"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Medium.woff") format("woff"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSans-Medium.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Tisa Sans SC Medium'; src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSansSc-Medium.eot"); src: url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSansSc-Medium.eot?#iefix") format("embedded-opentype"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSansSc-Medium.woff") format("woff"), url("https://blog.teacollection.com/wp-content/themes/JointsWP/tea-assets/tisa/TisaSansSc-Medium.ttf") format("truetype"); font-weight: normal; font-style: normal; } /*--- Base --- */ /* Basic Structure */ body { margin: 0; padding: 0; color: #9b8b81; font-family: "Tisa", Arial, Helvetica, sans-serif; background: #fff; } /* Misc */ /*doc --- title: display name: display category: base --- Set the display for all html elements Usage: ```html_exampleDiv is positioned as relative
``` */ .relative { position: relative; } .absolute { position: absolute; } /* Set default size for text elements */ p, a, .button-to-link, li, span, td { font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ } /*doc --- title: font-styling name: font-styling category: Tools --- Set the font-styles for elements Usage: ```html_exampleStrong
Italic
Force Normal
Line through
Lower Text
capitalize text
``` */ .strong { font-weight: bold; } .italic { font-style: italic; } .normal { font-weight: normal !important; font-style: normal; } .line-through { text-decoration: line-through; } .lower-text { text-transform: lowercase !important; } .capitalize-text { text-transform: capitalize !important; } .breadcrumbs > * { text-transform: none; } /*doc --- title: Margins and Paddings name: Margins and Paddings category: Tools --- You can set the margin and/or padding of an element by adding this class, this classes are generated on sara_settings on foundation folder Available sizes: from 0 to 30 You can use merged paddings or margins with (m/p)(t/b/l/r) Also you can use the prefix {small, medium or large} if you want to add margin or padding only specific devices. Usage: ```html_exampleMargin left 30
padding top and left 20
padding top and bottom 30
padding top and bottom 30 only mobile
``` */ /*doc --- title: Font-Sizing name: Font-Sizing category: Tools --- You can set the font-size of an element by adding this class, this classes are generated on sara_settings on foundation folder Available sizes: from 10 to 30 Usage: ```html_exampleFont size 10
Font size 40
``` */ /* forms */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select, input { box-shadow: none; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"] { height: 1.625rem; } input[type="submit"], input[type="button"] { border: none; } input[type="checkbox"] + label, input[type="radio"] + label, input[type="checkbox"] + span, input[type="radio"] + span { font-size: 0.75rem; vertical-align: middle; max-width: 89%; } input[type="checkbox"], input[type="radio"] { margin: 0 !important; } select { padding: 3px 5px; } select.quarter { width: 25% !important; } select.half { width: 50%; } select.three-quarters { width: 75%; } select.full { width: 100%; } /*doc --- title: button to link name: button to link category: Tools --- Change a button display to look like a link Usage: ```html_example ``` */ .button-to-link { background-color: transparent; cursor: pointer; margin: 0; padding: 0; } /*doc --- title: error messages name: error messages category: Tools --- Class to add color for error message displays Usage: ```html_example ``` */ .error-message { color: #ff0033; } .error-input { border: 1px solid #ff0033; } /*doc --- title: Images name: Images category: Tools --- Image positioning & sizing Usage: ```html_example
```
*/
img.center {
vertical-align: middle;
}
img.horizontal-center {
display: block;
margin: 0 auto;
}
/* 20px X 20px */
img.picker-sz {
max-width: 1.25rem !important;
height: 1.25rem !important;
}
/* 68px X 68px */
img.x-small-sz {
width: 4.25rem;
max-width: 4.25rem !important;
}
/* 136px X 136px */
img.small-sz {
width: 8.5rem;
max-width: 8.5rem !important;
}
/* 173px X 173px */
img.medium-sz {
width: 10.81rem;
max-width: 10.81rem !important;
}
/* 500px X 500px */
img.large-sz {
width: 31.25rem;
max-width: 31.25rem !important;
}
/*doc
---
title: Pagination
name: Pagination
category: Tools
---
Pagination styles, this uses some of the foundation classes and js so it wont work correctly here, just posting example html
Usage:
```html_example
```
*/
/* Placeholder color */
::-webkit-input-placeholder {
color: #816b5b;
}
:-moz-placeholder {
color: #816b5b;
opacity: 1;
}
::-moz-placeholder {
color: #816b5b;
opacity: 1;
}
:-ms-input-placeholder {
color: #816b5b;
}
/* For Medium Only */
@media only screen and (max-width: 64rem) {
/* Image sizing */
/* 299px X 299px */
img.large-sz {
width: 18.69rem;
max-width: 18.69rem !important;
}
}
/* For Small Only */
@media only screen and (max-width: 47.94rem) {
/* Image sizing */
/* 122px X 122px */
img.small-sz {
width: 7.625rem;
max-width: 7.625rem !important;
}
/* 304px X 304px */
img.large-sz {
width: 19rem;
max-width: 19rem !important;
}
}
/*doc
---
title: print version
name: print version
category: Tools
---
Use this classes to control what we print or not
Usage:
```html_example
This will be printed
This won't be printed
``` */ @media print { .dont-print { display: none !important; } .print-this { display: block; } a[href]:after, [href].button-to-link:after { content: none !important; } } @media print and (color) { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* >>Base */ /*doc --- title: Core Objects name: Core Objects category: Core Objects --- The core objects are sass placeholders designed to be legacy code and can be extended in any part of the code Usage: Just place @extend %placeholder name; where you need to extend the css styles of the object and you are ready to compile. This placeholders do not generate any css by themselves. For more information about placeholders go here: Sass Placeholders Available core objects: - button: Basic button definition - icon button: Basic button with an icon, just add background image on extended class - slider-button: Buttons for sliders - links sec1 to sec5: All links versions on the styleguide definition - close link: this can be used for modals and other items. - pagination: modification for the base foundation paginator Definition of: left button, right button anchors, li and current element selected - category-header: Headers for main items mainly on homepage and category pages - category-item: Category landing items, not products Definition of: Image and link inside element - sub-category-item: defined as second level items, not products - products: defines general generic product display everywhere. Definition of: item, image inside, display image, quickview link(size and transition), name, price(old and new), reviews - minicart-product: used on the minicart and some places on the checkout process Definition of: item, header, image, description, name, id, pricing, promotional message and total - send-to-friend: for email to a friend item Definition of: item, image, description, name, id, pricing(before, sale), promotional message, and total - modal-container: basic elements for modal windows - checkout sections: all the elements on the checkout flow Definition of: Cart summary prices and address information - dashboard: elements on the landing page of my account Definition of: item, title, actions(links on top), content, content title, section - product description: used on the order product description in the checkout flow Definition of: Header, item, pricing(before and sale), and generic messages - general-form: Basic form definitions. Definition of: labels, inputs, generic messages, required elements, fieldsets, and placeholders - generic-table: Basic tables across the site - general-chevron: breadcrumb on the checkout process - tabs: modifications for foundation tabs Definition of: tab titles, links and active tab - sliding-menu-mobile: Basic styling for the mobile sliding menu, for further code please review ux.main.header.js Definition of: subcategory, list, empty space on li(no arrow item), quantity link, and last child - simple 1 level menu: filters or simple left menus on my account definition of: li and currently selected. */ .header .top-section .back-checkout, .header .search-button, button.big-primary-button, button.big-secondary-button, input[type="submit"].big-primary-button, input[type="submit"].big-secondary-button, input[type="button"].big-primary-button, input[type="button"].big-secondary-button, a.big-primary-button, .big-primary-button.button-to-link, a.big-secondary-button, .big-secondary-button.button-to-link, button.small-primary-button, button.small-secondary-button, .home-slider .slider-information button, input[type="submit"].small-primary-button, input[type="submit"].small-secondary-button, input[type="button"].small-primary-button, input[type="button"].small-secondary-button, a.small-primary-button, .small-primary-button.button-to-link, a.small-secondary-button, .small-secondary-button.button-to-link { font-size: 0.8125rem; font-weight: bold; font-family: "Tisa Sans"; color: #ffffff; text-transform: uppercase; padding: 1rem; line-height: 0; } .header .top-section .back-checkout, .header .search-button { width: 2rem; height: 2rem; background-position: center; background-repeat: no-repeat; } .owl-buttons .owl-prev, .owl-buttons .owl-next, #home-slideshow .owl-controls .owl-buttons .owl-prev, #home-slideshow .owl-controls .owl-buttons .owl-next, .generic-slider .owl-controls .owl-buttons .owl-prev, .generic-slider .owl-controls .owl-buttons .owl-next { width: 2.625rem; height: 2.625rem; position: absolute; top: 40%; border-radius: 0.125rem; } .my-account-nav > li > a, .static-content-left-nav > li > a, .my-account-nav > li > .button-to-link, .static-content-left-nav > li > .button-to-link, .category-header, .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description .name a, .cart-product .cart-product-list .item .description .name a, .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description .name .button-to-link, .cart-product .cart-product-list .item .description .name .button-to-link, .sub-category-item .name, .category-item .name, .category-nav-landing > li > a, .category-nav-landing > li > .button-to-link, .category-nav-landing > li .small-filters-container .filter-information .title, .category-nav-landing > li .small-filters-container .filter-information ul li a, .category-nav-landing > li .small-filters-container .filter-information ul li .button-to-link, .category-nav-landing > li .small-filters-container > li > a, .category-nav-landing > li .small-filters-container > li > .button-to-link, .category-nav-landing > li .filters-container .filter-information .title, .category-nav-landing > li .filters-container .filter-information ul li a, .category-nav-landing > li .filters-container .filter-information ul li .button-to-link, .category-nav-landing > li .filters-container > li > a, .category-nav-landing > li .filters-container > li > .button-to-link { font-weight: bold; font-size: 1rem; color: #572700; } .products .item .name, .generic-slider .item .name, .category-listing .item .name, .shop-by-menu-mobile li a, .shop-by-menu-mobile li .button-to-link { font-weight: bold; font-size: 1rem; color: #572700; } .express-checkout-modal .header h2 a.close-link, .email-to-friend .header h2 a.close-link, .express-checkout-modal .header .section-header span a.close-link, .section-header .express-checkout-modal .header span a.close-link, .email-to-friend .header .section-header span a.close-link, .section-header .email-to-friend .header span a.close-link, .express-checkout-modal .header h2 .close-link.button-to-link, .email-to-friend .header h2 .close-link.button-to-link, .express-checkout-modal .header .section-header span .close-link.button-to-link, .section-header .express-checkout-modal .header span .close-link.button-to-link, .email-to-friend .header .section-header span .close-link.button-to-link, .section-header .email-to-friend .header span .close-link.button-to-link, .header .top-section .top-menu .user-section .cart-container .minicart .cart-close { position: absolute; color: #ffffff; right: 0.625rem; top: 0.75rem; font-size: 0.875rem; font-style: normal; } .express-checkout-modal .header h2 a.close-link .cross, .email-to-friend .header h2 a.close-link .cross, .express-checkout-modal .header .section-header span a.close-link .cross, .section-header .express-checkout-modal .header span a.close-link .cross, .email-to-friend .header .section-header span a.close-link .cross, .section-header .email-to-friend .header span a.close-link .cross, .express-checkout-modal .header h2 .close-link.button-to-link .cross, .email-to-friend .header h2 .close-link.button-to-link .cross, .express-checkout-modal .header .section-header span .close-link.button-to-link .cross, .section-header .express-checkout-modal .header span .close-link.button-to-link .cross, .email-to-friend .header .section-header span .close-link.button-to-link .cross, .section-header .email-to-friend .header span .close-link.button-to-link .cross, .header .top-section .top-menu .user-section .cart-container .minicart .cart-close .cross { font-size: 1.5625rem; position: relative; bottom: -0.25rem; } .pagination li { background-color: #f7f8f8 !important; height: auto !important; margin-left: 0.125rem !important; } .pagination li a, .pagination li .button-to-link { padding: 0.375rem 0.5rem !important; color: #dad2c1 !important; margin-top: 0 !important; } .pagination li.arrow-left { background-image: url(/tea//ux/img/desktop/arrowleftblue.png); background-repeat: no-repeat; background-position: center; padding: 0.4375rem 0.3125rem !important; background-size: 30%; } .pagination li.arrow-right { background-image: url(/tea//ux/img/desktop/arrowrightblue.png); background-repeat: no-repeat; background-position: center; padding: 0.4375rem 0.3125rem !important; background-size: 30%; } .pagination .current a, .pagination .current .button-to-link { background-color: #f7f8f8 !important; color: #9b8b81 !important; font-weight: normal !important; } .tabs { border-bottom: 1px solid #572700; } .tabs .tab-title { outline: none; } .tabs .tab-title a, .tabs .tab-title .button-to-link { outline: none; background-color: #ffffff; padding: 0.3125rem 0.75rem; font-weight: bold; color: #c34c29; } .tabs .tab-title a:hover, .tabs .tab-title .button-to-link:hover { background-color: #ffffff; } .tabs .tab-title.active { border-bottom: 2px solid #EEECE5; } .header .bottom-section .mobile-menu-container .menu-mobile { position: absolute; z-index: 3; padding-top: 0.5rem; border: 1px solid #CAC8C8; background-color: #ffffff; } .header .bottom-section .mobile-menu-container .menu-mobile .row.gutter { padding: 0 0.5rem; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li { border-bottom: 1px solid #CAC8C8; margin-bottom: 0.25rem; background-repeat: no-repeat; background-position: 95% center; padding-left: 1.25rem; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li > ul { margin-left: 0; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li > ul li { margin-left: 0; border: none; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li > ul.subcategories { display: none; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li > ul.subcategories li.title { color: #572700; font-weight: bold; padding-bottom: 0.3125rem; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li > ul.subcategories li a, .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li > ul.subcategories li .button-to-link { padding: 0 0 0.3125rem 0; font-weight: normal; color: #9b8b81; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li.multiple-items { padding-left: 0; margin-left: 0; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li.multiple-items a, .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li.multiple-items .button-to-link { color: #816b5b; font-size: 0.5625rem; padding: 0.5rem 0; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li a, .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li .button-to-link { padding: 0.875rem 0; display: block; color: #572700; font-weight: bold; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li a.accordion-trigger, .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li .accordion-trigger.button-to-link { position: relative; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li a.accordion-trigger:after, .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li .accordion-trigger.button-to-link:after { position: absolute; right: 10%; content: "-"; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li a.accordion-trigger.reduced:after, .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li .accordion-trigger.reduced.button-to-link:after { content: "+"; } .header .bottom-section .mobile-menu-container .menu-mobile .menu-mobile-subcategory ul li:last-child { border-bottom: 0; } .my-account-nav, .static-content-left-nav { margin-right: 1rem; } .my-account-nav > li, .static-content-left-nav > li { padding-top: 0.5rem; } .my-account-nav > li > a, .static-content-left-nav > li > a, .my-account-nav > li > .button-to-link, .static-content-left-nav > li > .button-to-link { margin-bottom: 0.5rem; display: block; } .my-account-nav > li > a.current, .static-content-left-nav > li > a.current, .my-account-nav > li > .current.button-to-link, .static-content-left-nav > li > .current.button-to-link { color: #9b8b81; } .category-header { border-bottom: 0.1875rem #572700 solid; display: block; margin-bottom: 5px; text-transform: uppercase; } .category-item { border-bottom: 0.3125rem #572700 solid; } .category-item .image a, .category-item .image .button-to-link { display: block; text-align: center; } .sub-category-item { border: 1px solid #f7f8f8; } .products .product-hr, .generic-slider .product-hr, .category-listing .product-hr { border-bottom: 1px solid #572700; margin: 2rem 0 !important; padding-top: 1rem; } .products .item, .generic-slider .item, .category-listing .item { width: 100%; margin: 0 auto; } .products .item .image, .generic-slider .item .image, .category-listing .item .image { border: 1px solid #f7f8f8; margin-bottom: 0.25rem; position: relative; overflow: hidden; } .products .item .image:hover > .quickview-link, .generic-slider .item .image:hover > .quickview-link, .category-listing .item .image:hover > .quickview-link { top: 65%; opacity: 1; } .products .item .image > .display > img, .generic-slider .item .image > .display > img, .category-listing .item .image > .display > img { display: block; margin: 0 auto; } .products .item .image .quickview-link, .generic-slider .item .image .quickview-link, .category-listing .item .image .quickview-link { -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: absolute; background-color: #816b5b; color: #ffffff; text-transform: uppercase; font-weight: bold; text-align: center; top: 100%; left: 10%; padding: 0.625rem; line-height: 16px; opacity: 0; } .products .item .image .quickview-link img, .generic-slider .item .image .quickview-link img, .category-listing .item .image .quickview-link img { margin-right: 0.3125rem; } .products .item .image .quickview-link.medium-display, .generic-slider .item .image .quickview-link.medium-display, .category-listing .item .image .quickview-link.medium-display { left: 8% !important; right: 8% !important; } .products .item .image .quickview-link.small-display, .generic-slider .item .image .quickview-link.small-display, .category-listing .item .image .quickview-link.small-display { left: 4% !important; right: 4% !important; } .products .item .price, .generic-slider .item .price, .category-listing .item .price { margin-bottom: 0.25rem; padding-bottom: 0; } .products .item .price .old-price, .generic-slider .item .price .old-price, .category-listing .item .price .old-price { text-decoration: line-through; } .products .item .price .new-price, .generic-slider .item .price .new-price, .category-listing .item .price .new-price { color: #c80000; } .products .item .reviews span, .generic-slider .item .reviews span, .category-listing .item .reviews span { margin-left: 0.625rem; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item, .cart-product .cart-product-list .item { border-bottom: 1px solid #572700; padding-right: 1.25rem; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item.not-mini, .cart-product .cart-product-list .item.not-mini { padding-right: 0 !important; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .header, .cart-product .cart-product-list .item .header { font-weight: bold; margin-bottom: 0.25rem; padding-bottom: 0; margin-top: 1rem; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .image, .cart-product .cart-product-list .item .image { border: 1px solid #f7f8f8; text-align: center; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description p, .cart-product .cart-product-list .item .description p { font-size: 0.75rem; margin-bottom: 0; padding-bottom: 0; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description p span, .cart-product .cart-product-list .item .description p span { font-size: 0.75rem; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description .name a, .cart-product .cart-product-list .item .description .name a, .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description .name .button-to-link, .cart-product .cart-product-list .item .description .name .button-to-link { font-size: 0.75rem; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .description .id, .cart-product .cart-product-list .item .description .id { margin-bottom: 0; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .pricing p, .cart-product .cart-product-list .item .pricing p { overflow: hidden; font-size: 0.75rem; margin-bottom: 0rem; padding-bottom: 0; text-align: right; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .pricing p span, .cart-product .cart-product-list .item .pricing p span { font-size: 0.75rem; text-align: left; float: left; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .item .pricing .promotional, .cart-product .cart-product-list .item .pricing .promotional { text-align: center; padding: 0.75rem 1.5rem; margin: 0; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .total, .cart-product .cart-product-list .total { padding-top: 0.5rem; padding-bottom: 1rem; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .total p, .cart-product .cart-product-list .total p { font-size: 0.75rem; margin-bottom: 0.25rem; padding-bottom: 0; text-align: right; overflow: hidden; padding-left: 70%; } .header .top-section .top-menu .user-section .cart-container .minicart .minicart-list .total p span, .cart-product .cart-product-list .total p span { font-size: 0.75rem; float: left; } .email-to-friend .email-friend-item .item .image { border: 1px solid #f7f8f8; } .email-to-friend .email-friend-item .item .description p { font-size: 0.75rem; margin-bottom: 0.25rem; padding-bottom: 0; } .email-to-friend .email-friend-item .item .description .name { margin-top: 0.9375rem; font-size: 1.375rem; line-height: 1.25rem; } .email-to-friend .email-friend-item .item .description .id { margin-bottom: 1rem; } .email-to-friend .email-friend-item .item .description .pricing .before { text-decoration: line-through; } .email-to-friend .email-friend-item .item .description .pricing .sale { color: #c80000; } .email-to-friend .email-friend-item .item .description .promotional-message { background-color: #f7f8f8; } .email-to-friend .email-friend-item .item .description .promotional-message p { padding: 0.875rem; font-style: italic; } .email-to-friend .email-friend-item .total { padding-top: 0.5rem; padding-bottom: 1rem; } .email-to-friend .email-friend-item .total p { font-size: 0.75rem; margin-bottom: 0.25rem; padding-bottom: 0; text-align: right; overflow: hidden; padding-left: 70%; } .email-to-friend .email-friend-item .total p span { font-size: 0.75rem; float: left; } .modal-cont { padding: 0; margin: 0; } .express-checkout-modal .header, .email-to-friend .header { background-color: #EEECE5; } .express-checkout-modal .header h2, .email-to-friend .header h2, .express-checkout-modal .header .section-header span, .section-header .express-checkout-modal .header span, .email-to-friend .header .section-header span, .section-header .email-to-friend .header span { margin-top: 0; padding: 0.625rem; position: relative; color: #ffffff; } .express-checkout-modal .body, .email-to-friend .body { margin: 1.875rem; } .cart-summary .cart-summary-list .summary { border-bottom: 1px solid #572700; margin-top: 0.625rem; } .cart-summary .cart-summary-list .summary p { padding: 0; font-size: 0.75rem; } .cart-summary .cart-summary-list .summary .discount-total p { color: #c80000; } .cart-summary .cart-summary-list .summary:last-child { border-bottom: none; } .address-container, .single-address-container { padding-bottom: 0.625rem; } .address-container p, .single-address-container p { padding: 0 0 0 0; margin-bottom: 0; } .address-container p:first-child, .single-address-container p:first-child { padding-left: 0; } .address-container p input[type='radio'], .single-address-container p input[type='radio'] { margin-bottom: 0; } .dashboard .item, .address-book .item, .payment-methods .item, .gift-list .item { font-weight: bold; text-transform: capitalize; } .dashboard .item .title, .address-book .item .title, .payment-methods .item .title, .gift-list .item .title { border-bottom: 5px solid #EEECE5; } .dashboard .item .title .actions, .address-book .item .title .actions, .payment-methods .item .title .actions, .gift-list .item .title .actions { float: right; } .dashboard .item .content .content-title, .address-book .item .content .content-title, .payment-methods .item .content .content-title, .gift-list .item .content .content-title { font-size: 0.8125rem !important; margin-bottom: 1rem; text-transform: capitalize; } .dashboard .item .content .section, .address-book .item .content .section, .payment-methods .item .content .section, .gift-list .item .content .section { margin-bottom: 1rem; } .dashboard .item .content .section p, .address-book .item .content .section p, .payment-methods .item .content .section p, .gift-list .item .content .section p { margin-bottom: 0.25rem; padding-bottom: 0; } .dashboard .item .content .section p.no-cap, .address-book .item .content .section p.no-cap, .payment-methods .item .content .section p.no-cap, .gift-list .item .content .section p.no-cap { text-transform: none; } .dashboard .item .content .section p span, .address-book .item .content .section p span, .payment-methods .item .content .section p span, .gift-list .item .content .section p span { text-transform: capitalize; } .product-listing .header .columns, .wishlist .header .columns, .cart-product-gift .header .columns { border-bottom: 5px solid #EEECE5; font-size: 0.75rem; font-weight: bold; padding-top: 0.9375rem; padding-bottom: 0.25rem; } .product-listing .item, .wishlist .item, .cart-product-gift .item { margin-top: 10px !important; border-bottom: 1px solid #572700; padding-bottom: 0.25rem; } .product-listing .item .pricing .before, .wishlist .item .pricing .before, .cart-product-gift .item .pricing .before { text-decoration: line-through; } .product-listing .item .pricing .sale, .wishlist .item .pricing .sale, .cart-product-gift .item .pricing .sale { color: #c80000; } .product-listing .item .message, .wishlist .item .message, .cart-product-gift .item .message { text-align: center; font-style: italic; background-color: #f7f8f8; padding: 0.75rem 1.5rem; margin: 1rem 0; } form label { font-weight: bold; } form input[type="checkbox"] { margin-bottom: 1rem; position: relative; top: 0.125rem; } form input[type="checkbox"] + span { font-size: 0.75rem; } form .generic-message { margin: 0.5rem 0 1rem 0; padding-bottom: 0; font-weight: bold; } form .required { color: #c80000; } form fieldset { border: none; border-bottom: 1px solid #572700; } form hr ::-webkit-input-placeholder { /* WebKit browsers */ color: #bbb; } form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #bbb; opacity: 1; } form ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #bbb; opacity: 1; } form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #bbb; } .orders-table { width: 100%; border: none; border-collapse: collapse; } .orders-table thead { background-color: transparent; } .orders-table thead th { border-bottom: 5px #EEECE5 solid; } .orders-table tbody tr td:last-child { text-align: right; } .chevron-checkout { font-size: 0.8125rem; border-bottom: 0.0625rem solid #572700; } .chevron-checkout div { height: 3rem; line-height: 3rem; font-weight: bold; text-align: center; position: relative; padding-left: 1.5rem !important; background-color: #f7f8f8; } .chevron-checkout div a, .chevron-checkout div .button-to-link { line-height: 3rem; width: 100%; color: #9b8b81; } .chevron-checkout div:after, .chevron-checkout div:before { bottom: 0; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 2; left: 100%; } .chevron-checkout div:after { border-color: rgba(250, 250, 250, 0); border-left-color: #f7f8f8; border-width: 1.5rem; } .chevron-checkout div:before { border-color: rgba(190, 190, 190, 0); border-left-color: #572700; border-width: 1.5625rem; top: -0.0625rem; } .chevron-checkout div.start { text-align: left; padding-left: 1rem !important; font-size: 1.375rem; font-style: italic; font-weight: normal; background-color: #ffffff; } .chevron-checkout div.start.start:after { border-color: rgba(250, 250, 250, 0); border-left-color: #ffffff; } .chevron-checkout div.active { color: #ffffff; background-color: #816b5b; } .chevron-checkout div.active.active:after { border-color: rgba(250, 250, 250, 0); border-left-color: #816b5b; } @media only screen and (max-width: 47.94rem) { .dashboard, .address-book, .payment-methods, .gift-list { margin-top: 1rem !important; } .dashboard .item .title, .address-book .item .title, .payment-methods .item .title, .gift-list .item .title { border-bottom: none; border-bottom: 1px solid #666; padding: 0.875rem 0; margin-bottom: 0.25rem; background-image: url("/ux/img/mobile/arrowrightblue.png"); background-repeat: no-repeat; background-position: 95% center; padding-left: 1.25rem; color: #EEECE5 !important; font-size: 0.9375rem; } .dashboard .item .title .actions, .address-book .item .title .actions, .payment-methods .item .title .actions, .gift-list .item .title .actions { display: none; } .dashboard .item .content, .address-book .item .content, .payment-methods .item .content, .gift-list .item .content { display: none; } .dashboard .item .content.small-display, .address-book .item .content.small-display, .payment-methods .item .content.small-display, .gift-list .item .content.small-display { display: block !important; } .products .item .image a, .generic-slider .item .image a, .category-listing .item .image a, .products .item .image .button-to-link, .generic-slider .item .image .button-to-link, .category-listing .item .image .button-to-link { display: block; } .products .item .image a img, .generic-slider .item .image a img, .category-listing .item .image a img, .products .item .image .button-to-link img, .generic-slider .item .image .button-to-link img, .category-listing .item .image .button-to-link img { display: block; margin: 0 auto; } } /*doc --- title: owl-styles name: owl-carouser category: Owl CSS --- Styles for owl carousel Please visit http://owlgraphic.com/owlcarousel/ for further information */ .owl-buttons { width: 100%; position: absolute; } .owl-buttons .owl-prev, .owl-buttons .owl-next { position: absolute; top: 0; text-indent: -9999px; } .owl-buttons .owl-prev { left: -40px; background: url(/tea//ux/img/desktop/arrowleftgray.png) center center no-repeat rgba(255, 255, 255, 0.8); } .owl-buttons .owl-prev:hover { background-image: url(/tea//ux/img/desktop/arrowleftblue.png); } .owl-buttons .owl-next { right: -40px; background: url(/tea//ux/img/desktop/arrowrightgray.png) center center no-repeat rgba(255, 255, 255, 0.8); } .owl-buttons .owl-next:hover { background-image: url(/tea//ux/img/desktop/arrowrightblue.png); } .owl-theme .owl-controls { width: 100%; margin-top: 10px; text-align: center; position: absolute; left: 0; top: 24%; } .owl-pagination { display: none; } .owl-theme .owl-controls .owl-page { display: inline-block; /*zoom: 1; *display: inline;*/ /*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span { display: block; width: 12px; height: 12px; margin: 5px 7px; /*filter: Alpha(Opacity=50);*/ /*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { /*filter: Alpha(Opacity=100);*/ /*IE7 fix*/ opacity: 1; } .owl-theme .owl-controls .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; /**display: inline;*/ /*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span { display: block; width: 12px; height: 12px; margin: 5px 7px; /*filter: Alpha(Opacity=50);*/ /*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { /*filter: Alpha(Opacity=100);*/ /*IE7 fix*/ opacity: 1; } @media only screen and (max-width: 47.94rem) { .owl-buttons { display: none; } } /*doc --- title: magic-zoom-plus name: magic-zoom-plus category: magic zoom plus CSS --- Styles for magic zoom plus Please visit https://www.magictoolbox.com/magiczoomplus/ for further information */ /* Magic Zoom Plus v2.0.9 Copyright 2010 Magic Toolbox You must buy a license to use this tool. Go to www.magictoolbox.com/magiczoomplus/ */ .MagicZoom img { border: 0 !important; padding: 0 !important; margin: 0 !important; } /* Style of zoomed window */ .MagicZoomBigImageCont { border: 1px solid #999; } .MagicZoomBigImageCont img { max-width: none !important; } /* Style of header, activated with "title" attribute in tag */ .MagicZoomHeader { font-size: 8pt !important; line-height: normal !important; color: #fff; background: #666; text-align: center !important; } /* Style of small square under mouse */ .MagicZoomPup { border: 1px solid #aaa; background: #fff; cursor: move; } /* Style of message box while image is loading */ .MagicZoomLoading { border: 1px solid #ccc; background: #fff url(/tea/ux/vendors/magiczoomplus/graphics/loader.gif) no-repeat 2px 50%; padding: 4px 4px 4px 24px !important; margin: 0; text-decoration: none; text-align: left; font-size: 8pt; font-family: sans-serif; color: #444; } /* Style of the small image link */ .MagicZoomPlus { cursor: url(/tea/ux/vendors/magiczoomplus/graphics/zoomin.cur), pointer; outline: 0 !important; } /* Style of the small image */ .MagicZoomPlus img { border: 0 !important; padding: 0 !important; margin: 0 !important; } /* Style of the span inside the small image link */ .MagicZoomPlus span { display: none !important; } /* Style of hotspots */ .MagicHotspots { display: none; visibility: hidden; } .MagicHotspots a, .MagicHotspots .button-to-link { border: 1px solid #ccc; } .MagicHotspots a:hover, .MagicHotspots .button-to-link:hover { border: 1px solid red; } /* Style of the small image link */ .MagicThumb, .MagicThumb:hover { cursor: url(/tea/ux/vendors/magiczoomplus/graphics/zoomin.cur), pointer; outline: 0 !important; } /* Style of the small image when the large image is expanded */ .MagicThumb-expanded-thumbnail { cursor: default; } /* Style of the span inside the small image link */ .MagicThumb span { display: none !important; } /* Style of the small image */ .MagicThumb img { border: 0; outline: 0; } /* Style of the expanded image */ .MagicThumb-expanded { cursor: url(/tea/ux/vendors/magiczoomplus/graphics/zoomout.cur), pointer; background: transparent; border: 1px solid #ccc; outline: 0; padding: 0; } /* Style of the caption for the expanded image */ .MagicThumb-caption { color: #333; font: normal 10pt Verdana, Helvetica; background: #ccc; text-align: left; padding: 8px; border: 0 !important; outline: 0 !important; } /* Style of the close/next/previous buttons */ .MagicThumb-buttons { background: transparent url(/tea/ux/vendors/magiczoomplus/graphics/buttons1.png) no-repeat 0 0; height: 24px; display: block; } .MagicThumb-buttons a, .MagicThumb-buttons .button-to-link { width: 24px; height: 24px; margin: 0px 1px !important; overflow: hidden; } /* Style of the loading message box */ .MagicThumb-loader { font: normal 12pt sans-serif; border: 1px solid #000; background: #fff url(/tea/ux/vendors/magiczoomplus/graphics/loader.gif) no-repeat 2px 50%; padding: 2px 2px 2px 22px; margin: 0; text-decoration: none; text-align: left; } /* Style of the small images which swap the main image */ /* Style to hide caption on page. Only needed for #id method. */ .MagicThumb-external-caption { display: none; } /* For Medium Only */ /* For Small Only */ @media only screen and (max-width: 47.94rem) { .MagicZoomBigImageCont { display: none; } } .pc-main-1 { color: #ffffff; } .pc-main-2 { color: #9b8b81; } .bc-main-1 { background-color: #ffffff; } .bc-main-2 { background-color: #9b8b81; } .pc-1 { color: #572700; } .pc-2 { color: #d04d00; } .pc-3 { color: #816b5b; } .pc-4 { color: #c34c29; } .pc-5 { color: #EEECE5; } .pc-6 { color: #E0645A; } .pc-7 { color: #dad2c1; } .pc-8 { color: #000000; } .pc-9 { color: #CAC8C8; } .pc-10 { color: #f7f8f8; } .pc-11 { color: #c80000; } /* Background colors */ .bc-1 { background-color: #572700; } .bc-2 { background-color: #d04d00; } .bc-3 { background-color: #816b5b; } .bc-4 { background-color: #c34c29; } .bc-5 { background-color: #EEECE5; } .bc-6 { background-color: #E0645A; } .bc-7 { background-color: #dad2c1; } .bc-8 { background-color: #000000; } .bc-9 { background-color: #CAC8C8; } .bc-10 { background-color: #f7f8f8; } .bc-11 { background-color: #c80000; } /* Links */ /*doc --- title: Links name: Links category: base --- Basic Links used by default Usage: ```html_example Basic Link ``` */ a, .button-to-link { color: #572700; text-decoration: none; -ms-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Buttons */ /*doc --- title: Buttons name: Buttons category: base --- TODO: change class for primary and secondary buttons instead of colors Button styles, this buttons get their base code from core_objects.scss Added element close partial modal, copy of close reveal from foundation Usage: ```html_example ``` */ button.big-primary-button, button.big-secondary-button, input[type="submit"].big-primary-button, input[type="submit"].big-secondary-button, input[type="button"].big-primary-button, input[type="button"].big-secondary-button, a.big-primary-button, .big-primary-button.button-to-link, input.button-to-link[type="submit"].big-secondary-button, input.button-to-link[type="button"].big-secondary-button, a.big-secondary-button, .big-secondary-button.button-to-link { background-color: #572700; height: 2.1875rem; font-family: 'Tisa Sans', Arial, Helvetica, sans­-serif; font-weight: normal; font-size: 0.75rem; text-transform: uppercase; cursor: pointer; } button.big-primary-button.disabled, button.disabled.big-secondary-button, button.big-primary-button[disabled="disabled"], button[disabled="disabled"].big-secondary-button, input[type="submit"].big-primary-button.disabled, input[type="submit"].disabled.big-secondary-button, input[type="submit"].big-primary-button[disabled="disabled"], input[type="submit"][disabled="disabled"].big-secondary-button, input[type="button"].big-primary-button.disabled, input[type="button"].disabled.big-secondary-button, input[type="button"].big-primary-button[disabled="disabled"], input[type="button"][disabled="disabled"].big-secondary-button, a.big-primary-button.disabled, .big-primary-button.disabled.button-to-link, a.disabled.big-secondary-button, .disabled.big-secondary-button.button-to-link, a.big-primary-button[disabled="disabled"], .big-primary-button[disabled="disabled"].button-to-link, a[disabled="disabled"].big-secondary-button, [disabled="disabled"].big-secondary-button.button-to-link { background-color: #f7f8f8 !important; } button.big-primary-button:hover, button.big-secondary-button:hover, input[type="submit"].big-primary-button:hover, input[type="submit"].big-secondary-button:hover, input[type="button"].big-primary-button:hover, input[type="button"].big-secondary-button:hover, a.big-primary-button:hover, .big-primary-button.button-to-link:hover, a.big-secondary-button:hover, .big-secondary-button.button-to-link:hover { background-color: #816b5b; } button.big-secondary-button, input[type="submit"].big-secondary-button, input[type="button"].big-secondary-button, a.big-secondary-button, .big-secondary-button.button-to-link { background-color: #ffffff; color: #9b8b81; cursor: pointer; border: 1px solid #9b8b81; } button.big-secondary-button.disabled, button.big-secondary-button[disabled="disabled"], input[type="submit"].big-secondary-button.disabled, input[type="submit"].big-secondary-button[disabled="disabled"], input[type="button"].big-secondary-button.disabled, input[type="button"].big-secondary-button[disabled="disabled"], a.big-secondary-button.disabled, .big-secondary-button.disabled.button-to-link, a.big-secondary-button[disabled="disabled"], .big-secondary-button[disabled="disabled"].button-to-link { background-color: #f7f8f8 !important; } button.big-secondary-button:hover, input[type="submit"].big-secondary-button:hover, input[type="button"].big-secondary-button:hover, a.big-secondary-button:hover, .big-secondary-button.button-to-link:hover { background-color: #EEECE5; border: 1px solid #dad2c1; } button.small-primary-button, button.small-secondary-button, .home-slider .slider-information button, input[type="submit"].small-primary-button, input[type="submit"].small-secondary-button, input[type="button"].small-primary-button, input[type="button"].small-secondary-button, a.small-primary-button, .small-primary-button.button-to-link, input.button-to-link[type="submit"].small-secondary-button, input.button-to-link[type="button"].small-secondary-button, .home-slider .slider-information button.button-to-link, a.small-secondary-button, .small-secondary-button.button-to-link { background-color: #572700; font-family: 'Tisa Sans', Arial, Helvetica, sans­-serif; text-transform: uppercase; font-weight: normal; font-size: 0.75rem; height: 1.5625rem; padding: 0.5rem; cursor: pointer; } button.small-primary-button.disabled, button.disabled.small-secondary-button, .home-slider .slider-information button.disabled, button.small-primary-button[disabled="disabled"], button[disabled="disabled"].small-secondary-button, .home-slider .slider-information button[disabled="disabled"], input[type="submit"].small-primary-button.disabled, input[type="submit"].disabled.small-secondary-button, input[type="submit"].small-primary-button[disabled="disabled"], input[type="submit"][disabled="disabled"].small-secondary-button, input[type="button"].small-primary-button.disabled, input[type="button"].disabled.small-secondary-button, input[type="button"].small-primary-button[disabled="disabled"], input[type="button"][disabled="disabled"].small-secondary-button, a.small-primary-button.disabled, .small-primary-button.disabled.button-to-link, .home-slider .slider-information button.disabled.button-to-link, a.disabled.small-secondary-button, .disabled.small-secondary-button.button-to-link, a.small-primary-button[disabled="disabled"], .small-primary-button[disabled="disabled"].button-to-link, .home-slider .slider-information button[disabled="disabled"].button-to-link, a[disabled="disabled"].small-secondary-button, [disabled="disabled"].small-secondary-button.button-to-link { background-color: #f7f8f8 !important; } button.small-primary-button:hover, button.small-secondary-button:hover, .home-slider .slider-information button:hover, input[type="submit"].small-primary-button:hover, input[type="submit"].small-secondary-button:hover, input[type="button"].small-primary-button:hover, input[type="button"].small-secondary-button:hover, a.small-primary-button:hover, .small-primary-button.button-to-link:hover, .home-slider .slider-information button.button-to-link:hover, a.small-secondary-button:hover, .small-secondary-button.button-to-link:hover { background-color: #816b5b; } button.small-secondary-button, input[type="submit"].small-secondary-button, input[type="button"].small-secondary-button, a.small-secondary-button, .small-secondary-button.button-to-link { background-color: #d04d00; cursor: pointer; } button.small-secondary-button.disabled, button.small-secondary-button[disabled="disabled"], input[type="submit"].small-secondary-button.disabled, input[type="submit"].small-secondary-button[disabled="disabled"], input[type="button"].small-secondary-button.disabled, input[type="button"].small-secondary-button[disabled="disabled"], a.small-secondary-button.disabled, .small-secondary-button.disabled.button-to-link, a.small-secondary-button[disabled="disabled"], .small-secondary-button[disabled="disabled"].button-to-link { background-color: #f7f8f8 !important; } button.small-secondary-button:hover, input[type="submit"].small-secondary-button:hover, input[type="button"].small-secondary-button:hover, a.small-secondary-button:hover, .small-secondary-button.button-to-link:hover { background-color: #EEECE5; border: 1px solid #dad2c1; } a.big-green-button, .big-green-button.button-to-link, a.big-blue-button, .big-blue-button.button-to-link { padding: 12px 5px; display: inline-block; text-align: center; height: auto; } a.small-green-button, .small-green-button.button-to-link, a.small-blue-button, .small-blue-button.button-to-link { padding: 7px 5px; display: inline-block; text-align: center; height: auto; } .reveal-modal .not-close-reveal-modal { font-size: 2.5rem; line-height: 1; position: absolute; top: 0.3125rem; right: 0.6875rem; color: #aaaaaa; font-weight: bold; cursor: pointer; } .reveal-modal #modal-content { padding-top: 3.125rem !important; } /* Titles */ /*doc --- title: Titles name: Titles category: base --- Basic styles for Headings. Usage: ```html_exampleBasic Paragraph
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.