:root { --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url('common/font/material/MaterialIcons-Regular.eot'); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url('common/font/material/MaterialIcons-Regular.woff2') format('woff2'), url('common/font/material/MaterialIcons-Regular.woff') format('woff'), url('common/font/material/MaterialIcons-Regular.ttf') format('truetype'); } .material-icons, .m-icons{ font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .m-icons.m-icon-jobboard:before{ content: '\E862'; } .m-icons.m-icon-account:before{ content: '\E853'; } .m-icons.m-icon-cart:before{ content: '\E8CC'; } .material-icons.icons-chevron_left:before { content: "\e5cb"; } .material-icons.icons-chevron_right:before { content: "\e5cc"; } .material-icons.icons-help:before { content: "\e887"; } .material-icons.icons-cancel:before { content: "\e5c9"; } .material-icons.icons-check-circle:before{ content: "\E86C"; } /** * @license * MyFonts Webfont Build ID 2707799, 2013-12-13T14:01:04-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Proxima Nova S Cond Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-light/ * * Webfont: Proxima Nova A Cond Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-light/ * * Webfont: Proxima Nova S Cond Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-light-it/ * * Webfont: Proxima Nova A Cond Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-light-it/ * * Webfont: Proxima Nova A ExtraCond Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-thin-it/ * * Webfont: Proxima Nova S ExtraCond Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-thin-it/ * * Webfont: Proxima Nova A Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-extrabld-it/ * * Webfont: Proxima Nova S Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-extrabld-it/ * * Webfont: Proxima Nova S ExtraCond Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-bold-it/ * * Webfont: Proxima Nova A ExtraCond Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-bold-it/ * * Webfont: Proxima Nova A Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-thin/ * * Webfont: Proxima Nova S Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-thin/ * * Webfont: Proxima Nova A Cond Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-semibold-it/ * * Webfont: Proxima Nova S Cond Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-semibold/ * * Webfont: Proxima Nova S Cond Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-semibold-it/ * * Webfont: Proxima Nova A Cond Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-semibold/ * * Webfont: Proxima Nova A ExtraCond Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-extrabld-it/ * * Webfont: Proxima Nova S ExtraCond Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-extrabld-it/ * * Webfont: Proxima Nova S Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-extrabld/ * * Webfont: Proxima Nova A Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-extrabld/ * * Webfont: Proxima Nova S Cond Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-thin/ * * Webfont: Proxima Nova A Cond Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-thin/ * * Webfont: Proxima Nova A Cond Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-thin-it/ * * Webfont: Proxima Nova S Cond Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-thin-it/ * * Webfont: Proxima Nova S ExtraCond Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-regular/ * * Webfont: Proxima Nova S Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-semibold-it/ * * Webfont: Proxima Nova S Cond Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-black-it/ * * Webfont: Proxima Nova A Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-bold/ * * Webfont: Proxima Nova A Cond Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-bold/ * * Webfont: Proxima Nova A ExtraCond Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-semibold-it/ * * Webfont: Proxima Nova S Cond Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-black/ * * Webfont: Proxima Nova S Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-thin-it/ * * Webfont: Proxima Nova S ExtraCond Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-extrabld/ * * Webfont: Proxima Nova S ExtraCond Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-regular-it/ * * Webfont: Proxima Nova A Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-regular-it/ * * Webfont: Proxima Nova S ExtraCond Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-thin/ * * Webfont: Proxima Nova S Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-regular/ * * Webfont: Proxima Nova A Cond Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-extrabld-it/ * * Webfont: Proxima Nova A Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-light-it/ * * Webfont: Proxima Nova A ExtraCond Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-bold/ * * Webfont: Proxima Nova S ExtraCond Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-bold/ * * Webfont: Proxima Nova S Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-semibold/ * * Webfont: Proxima Nova A Cond Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-black-it/ * * Webfont: Proxima Nova S Cond Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-bold-it/ * * Webfont: Proxima Nova S Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-regular-it/ * * Webfont: Proxima Nova S Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-bold/ * * Webfont: Proxima Nova S Cond Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-bold/ * * Webfont: Proxima Nova S ExtraCond Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-black-it/ * * Webfont: Proxima Nova A Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-bold-it/ * * Webfont: Proxima Nova A ExtraCond Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-black-it/ * * Webfont: Proxima Nova S ExtraCond Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-semibold/ * * Webfont: Proxima Nova A Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-light/ * * Webfont: Proxima Nova A Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-semibold-it/ * * Webfont: Proxima Nova S Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-black-it/ * * Webfont: Proxima Nova A Cond Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-black/ * * Webfont: Proxima Nova A Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-semibold/ * * Webfont: Proxima Nova S Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-bold-it/ * * Webfont: Proxima Nova S Cond Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-regular-it/ * * Webfont: Proxima Nova A ExtraCond Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-extrabld/ * * Webfont: Proxima Nova S Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-black/ * * Webfont: Proxima Nova A ExtraCond Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-light/ * * Webfont: Proxima Nova A Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-regular/ * * Webfont: Proxima Nova S ExtraCond Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-light-it/ * * Webfont: Proxima Nova A Cond Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-regular-it/ * * Webfont: Proxima Nova S Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-light-it/ * * Webfont: Proxima Nova A ExtraCond Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-black/ * * Webfont: Proxima Nova A Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-black/ * * Webfont: Proxima Nova A Cond Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-bold-it/ * * Webfont: Proxima Nova S Cond Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-regular/ * * Webfont: Proxima Nova A Cond Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-extrabld/ * * Webfont: Proxima Nova S Cond Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-extrabld/ * * Webfont: Proxima Nova S Cond Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/scond-extrabld-it/ * * Webfont: Proxima Nova A Cond Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/acond-regular/ * * Webfont: Proxima Nova S ExtraCond Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-semibold-it/ * * Webfont: Proxima Nova S ExtraCond Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-light/ * * Webfont: Proxima Nova A ExtraCond Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-semibold/ * * Webfont: Proxima Nova A ExtraCond Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-regular/ * * Webfont: Proxima Nova S Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-light/ * * Webfont: Proxima Nova A Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-thin-it/ * * Webfont: Proxima Nova A Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-black-it/ * * Webfont: Proxima Nova A ExtraCond Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-thin/ * * Webfont: Proxima Nova A ExtraCond Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-light-it/ * * Webfont: Proxima Nova A ExtraCond Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/aex-cn-regular-it/ * * Webfont: Proxima Nova S ExtraCond Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/sex-cn-black/ * * Webfont: Proxima Nova Cond Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-light/ * * Webfont: Proxima Nova Cond Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-light-it/ * * Webfont: Proxima Nova ExtraCond Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-thin-it/ * * Webfont: Proxima Nova Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/extrabld-it/ * * Webfont: Proxima Nova ExtraCond Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-bold-it/ * * Webfont: Proxima Nova Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/thin/ * * Webfont: Proxima Nova Cond Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-semibold-it/ * * Webfont: Proxima Nova Cond Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-semibold/ * * Webfont: Proxima Nova ExtraCond Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-extrabld-it/ * * Webfont: Proxima Nova Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/extrabld/ * * Webfont: Proxima Nova Cond Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-thin/ * * Webfont: Proxima Nova Cond Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-thin-it/ * * Webfont: Proxima Nova ExtraCond Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-semibold/ * * Webfont: Proxima Nova Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/black/ * * Webfont: Proxima Nova Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/light-it/ * * Webfont: Proxima Nova ExtraCond Thin by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-thin/ * * Webfont: Proxima Nova ExtraCond Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-light/ * * Webfont: Proxima Nova Cond Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-bold-it/ * * Webfont: Proxima Nova Light by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/light/ * * Webfont: Proxima Nova Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/regular-it/ * * Webfont: Proxima Nova Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/semibold-it/ * * Webfont: Proxima Nova ExtraCond Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-extrabld/ * * Webfont: Proxima Nova Cond Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-regular/ * * Webfont: Proxima Nova Thin Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/thin-it/ * * Webfont: Proxima Nova Cond Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-black-it/ * * Webfont: Proxima Nova ExtraCond Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-black/ * * Webfont: Proxima Nova Semibold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/semibold/ * * Webfont: Proxima Nova ExtraCond Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-bold/ * * Webfont: Proxima Nova Cond Black by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-black/ * * Webfont: Proxima Nova Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/black-it/ * * Webfont: Proxima Nova Cond Extrabold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-extrabld/ * * Webfont: Proxima Nova ExtraCond Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-regular-it/ * * Webfont: Proxima Nova ExtraCond Light Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-light-it/ * * Webfont: Proxima Nova Cond Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-regular-it/ * * Webfont: Proxima Nova Cond Extrabold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-extrabld-it/ * * Webfont: Proxima Nova ExtraCond Black Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-black-it/ * * Webfont: Proxima Nova Bold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/bold-it/ * * Webfont: Proxima Nova ExtraCond Semibold Italic by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-semibold-it/ * * Webfont: Proxima Nova Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/regular/ * * Webfont: Proxima Nova ExtraCond Regular by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/ex-cn-regular/ * * Webfont: Proxima Nova Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/bold/ * * Webfont: Proxima Nova Cond Bold by Mark Simonson * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/cond-bold/ * * * License: http://www.myfonts.com/viewlicense?type=web&buildid=2707799 * Licensed pageviews: 20,000,000 * Webfonts copyright: Copyright (c) Mark Simonson, 2005. All rights reserved. * * © 2013 MyFonts Inc */ /* @import must be at top of file, otherwise CSS will not work */ /*@import url('//hello.myfonts.net/count/295157');*/ /** 1 Font Define **/ @font-face { font-family: 'TisaOT'; src: url('common/font/Tisa/TisaOT.eot'); src: url('common/font/Tisa/TisaOT.eot?#iefix') format('embedded-opentype'), url('common/font/Tisa/TisaOT.woff') format('woff'), url('common/font/Tisa/TisaOT.ttf') format('truetype'); } @font-face { font-family: 'TisaOT-Bold'; src: url('common/font/Tisa/TisaOT-Bold.eot'); src: url('common/font/Tisa/TisaOT-Bold.eot?#iefix') format('embedded-opentype'), url('common/font/Tisa/TisaOT-Bold.woff') format('woff'), url('common/font/Tisa/TisaOT-Bold.ttf') format('truetype'); } @font-face { font-family: 'TisaOT-BoldIta'; src: url('common/font/Tisa/TisaOT-BoldIta.eot'); src: url('common/font/Tisa/TisaOT-BoldIta.eot?#iefix') format('embedded-opentype'), url('common/font/Tisa/TisaOT-BoldIta.woff') format('woff'), url('common/font/Tisa/TisaOT-BoldIta.ttf') format('truetype'); } @font-face { font-family: 'TisaOT-Ita'; src: url('common/font/Tisa/TisaOT-Ita.eot'); src: url('common/font/Tisa/TisaOT-Ita.eot?#iefix') format('embedded-opentype'), url('common/font/Tisa/TisaOT-Ita.woff') format('woff'), url('common/font/Tisa/TisaOT-Ita.ttf') format('truetype'); } @font-face { font-family: 'TisaOT-Medi'; src: url('common/font/Tisa/TisaOT-Medi.eot'); src: url('common/font/Tisa/TisaOT-Medi.eot?#iefix') format('embedded-opentype'), url('common/font/Tisa/TisaOT-Medi.woff') format('woff'), url('common/font/Tisa/TisaOT-Medi.ttf') format('truetype'); } @font-face { font-family: 'TisaOT-MediIta'; src: url('common/font/Tisa/TisaOT-MediIta.eot'); src: url('common/font/Tisa/TisaOT-MediIta.eot?#iefix') format('embedded-opentype'), url('common/font/Tisa/TisaOT-MediIta.woff') format('woff'), url('common/font/Tisa/TisaOT-MediIta.ttf') format('truetype'); } /*Merged css atMon May 09 2016 14:50:05 GMT+0800 (China Standard Time)*/ /* Grid 1 Container Define 2 col-lg (width >= 1024) 3 col-md (1024 > width > 768) 4 col-sm (768 > width > 480) 5 col-xs (480 > width > 320) */ /** 1 Container Define **/ .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } /** 2 col-lg (width >= 1024) **/ /*@media (min-width: 1024px) {*/ .container { margin-right: auto; margin-left: auto; padding-left: 10px; padding-right: 10px; width: 980px; } .row { margin-left: -10px; margin-right: -10px; } .container > .row { margin-left: 0; margin-right: 0; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-5-1, .col-lg-7-1, .col-lg-8-1, .col-lg-9-1, .col-lg-10-1, .col-lg-11-1 { float: left; position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; } .col-lg-1 { width: 8.333333333333332%; } .col-lg-2 { width: 16.666666666666664%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333333333%; } .col-lg-5 { width: 41.66666666666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.333333333333336%; } .col-lg-8 { width: 66.66666666666666%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333333334%; } .col-lg-11 { width: 91.66666666666666%; } .col-lg-12 { width: 100%; } .col-lg-5-1{ width: 20%; } .col-lg-7-1{ width: 14.285714285714286%; } .col-lg-8-1{ width: 12.5%; } .col-lg-9-1{ width: 11.111111111111111%; } .col-lg-11-1{ width: 9.090909090909092%; } .col-lg-push-0 { left: auto; } .col-lg-push-1 { left: 8.333333333333332%; } .col-lg-push-2 { left: 16.666666666666664%; } .col-lg-push-3 { left: 25%; } .col-lg-push-4 { left: 33.33333333333333%; } .col-lg-push-5 { left: 41.66666666666667%; } .col-lg-push-6 { left: 50%; } .col-lg-push-7 { left: 58.333333333333336%; } .col-lg-push-8 { left: 66.66666666666666%; } .col-lg-push-9 { left: 75%; } .col-lg-push-10 { left: 83.33333333333334%; } .col-lg-push-11 { left: 91.66666666666666%; } .col-lg-pull-0 { right: auto; } .col-lg-pull-1 { right: 8.333333333333332%; } .col-lg-pull-2 { right: 16.666666666666664%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-4 { right: 33.33333333333333%; } .col-lg-pull-5 { right: 41.66666666666667%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-7 { right: 58.333333333333336%; } .col-lg-pull-8 { right: 66.66666666666666%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-10 { right: 83.33333333333334%; } .col-lg-pull-11 { right: 91.66666666666666%; } .col-lg-offset-0 { margin-left: 0; } .col-lg-offset-1 { margin-left: 8.333333333333332%; } .col-lg-offset-2 { margin-left: 16.666666666666664%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333333333333%; } .col-lg-offset-5 { margin-left: 41.66666666666667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.333333333333336%; } .col-lg-offset-8 { margin-left: 66.66666666666666%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333333333334%; } .col-lg-offset-11 { margin-left: 91.66666666666666%; } /*}*/ @media (min-width: 1024px) { .container{ width: 980px; } } /** 3 col-md (1024 > width > 768) **/ @media (min-width: 768px) and (max-width: 1023px) { .container { margin-right: auto; margin-left: auto; padding-left: 10px; padding-right: 10px; width: 748px; } .row { margin-left: -10px; margin-right: -10px; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-5-1, .col-md-7-1, .col-md-8-1, .col-md-9-1, .col-md-10-1, .col-md-11-1 { float: left; position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; } .col-md-1 { width: 8.333333333333332%; } .col-md-2 { width: 16.666666666666664%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333333333%; } .col-md-5 { width: 41.66666666666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.333333333333336%; } .col-md-8 { width: 66.66666666666666%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333333334%; } .col-md-11 { width: 91.66666666666666%; } .col-md-12 { width: 100%; } .col-md-5-1{ width: 20%; } .col-md-7-1{ width: 14.285714285714286%; } .col-md-8-1{ width: 12.5%; } .col-md-9-1{ width: 11.111111111111111%; } .col-md-11-1{ width: 9.090909090909092%; } .col-md-push-0 { left: auto; } .col-md-push-1 { left: 8.333333333333332%; } .col-md-push-2 { left: 16.666666666666664%; } .col-md-push-3 { left: 25%; } .col-md-push-4 { left: 33.33333333333333%; } .col-md-push-5 { left: 41.66666666666667%; } .col-md-push-6 { left: 50%; } .col-md-push-7 { left: 58.333333333333336%; } .col-md-push-8 { left: 66.66666666666666%; } .col-md-push-9 { left: 75%; } .col-md-push-10 { left: 83.33333333333334%; } .col-md-push-11 { left: 91.66666666666666%; } .col-md-pull-0 { right: auto; } .col-md-pull-1 { right: 8.333333333333332%; } .col-md-pull-2 { right: 16.666666666666664%; } .col-md-pull-3 { right: 25%; } .col-md-pull-4 { right: 33.33333333333333%; } .col-md-pull-5 { right: 41.66666666666667%; } .col-md-pull-6 { right: 50%; } .col-md-pull-7 { right: 58.333333333333336%; } .col-md-pull-8 { right: 66.66666666666666%; } .col-md-pull-9 { right: 75%; } .col-md-pull-10 { right: 83.33333333333334%; } .col-md-pull-11 { right: 91.66666666666666%; } .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: 8.333333333333332%; } .col-md-offset-2 { margin-left: 16.666666666666664%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333333333333%; } .col-md-offset-5 { margin-left: 41.66666666666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.333333333333336%; } .col-md-offset-8 { margin-left: 66.66666666666666%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333333334%; } .col-md-offset-11 { margin-left: 91.66666666666666%; } } /*3 col-sm (768 > width > 480)*/ @media (min-width: 481px) and (max-width: 767px) { .container { margin-right: auto; margin-left: auto; padding-left: 12px; padding-right: 12px; max-width: 100%; } .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } .row { margin-left: -6px; margin-right: -6px; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .container > .row { padding-left: 6px; padding-right: 6px; margin-left: -12px; margin-right: -12px; } .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; padding-left: 6px; padding-right: 6px; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } } /*4 col-xs (width < 480)*/ @media (min-width: 320px) and (max-width: 480px) { .container { margin-right: auto; margin-left: auto; padding-left: 10px; padding-right: 10px; max-width: 100%; } .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } .row { margin-left: -5px; margin-right: -5px; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .container > .row { padding-left: 5px; padding-right: 5px; margin-left: -10px; margin-right: -10px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; min-height: 1px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; padding-left: 5px; padding-right: 5px; } .col-xs-1 { width: 8.333333333333332%; } .col-xs-2 { width: 16.666666666666664%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333333333%; } .col-xs-5 { width: 41.66666666666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.333333333333336%; } .col-xs-8 { width: 66.66666666666666%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333333334%; } .col-xs-11 { width: 91.66666666666666%; } .col-xs-12 { width: 100%; } .col-xs-push-1 { left: 8.333333333333332%; } .col-xs-push-2 { left: 16.666666666666664%; } .col-xs-push-3 { left: 25%; } .col-xs-push-4 { left: 33.33333333333333%; } .col-xs-push-5 { left: 41.66666666666667%; } .col-xs-push-6 { left: 50%; } .col-xs-push-7 { left: 58.333333333333336%; } .col-xs-push-8 { left: 66.66666666666666%; } .col-xs-push-9 { left: 75%; } .col-xs-push-10 { left: 83.33333333333334%; } .col-xs-push-11 { left: 91.66666666666666%; } .col-xs-pull-1 { right: 8.333333333333332%; } .col-xs-pull-2 { right: 16.666666666666664%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-4 { right: 33.33333333333333%; } .col-xs-pull-5 { right: 41.66666666666667%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-7 { right: 58.333333333333336%; } .col-xs-pull-8 { right: 66.66666666666666%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-10 { right: 83.33333333333334%; } .col-xs-pull-11 { right: 91.66666666666666%; } .col-xs-offset-1 { margin-left: 8.333333333333332%; } .col-xs-offset-2 { margin-left: 16.666666666666664%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.33333333333333%; } .col-xs-offset-5 { margin-left: 41.66666666666667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.333333333333336%; } .col-xs-offset-8 { margin-left: 66.66666666666666%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.33333333333334%; } .col-xs-offset-11 { margin-left: 91.66666666666666%; } } /* Alerts 1 Default Alerts 2 Page Level Error 3 Inline Verification Error 4 Form Tip Message */ /** 1 Default Alerts **/ .error, .page-error, .inline-error{ color: #CC4631; } .block-success { display: block; width: 100%; color: #ff0000; margin-top: 5px; } select.error { padding: 3px 0; } /* 2 Page Level Error */ .page-error > p{ position: relative; font-size: 21px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; color: #595454; padding-left: 22px; } .page-error > ul > li { line-height: 18px; font-size: 15px; list-style: none; } .page-error > span { display: block; margin-top: 5px; padding: 0 0 0 20px; position: relative; } /** 3 Inline Verification Error **/ .inline-error{ font-weight: 400; font-size: 13px; padding: 0 0 0 20px; position: relative; line-height: 16px; display: block; margin-top: 5px; min-height: 16px; width: 100%; } .inline-error.secondary{ padding-bottom: 30px; } .inline-error:after, .page-error > p:after, .page-error > span:after { content: "\E000"; left: 0; position: absolute; top: -2px; color: #FF593E; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 18px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .page-error > p:after { top: 5px; } .price-error { display: inline-block; padding: 5px 0; font-size: 16px; font-weight: 600; color: #ff0000; line-height: 1.2; } .ps-error.color-list a { border: 1px solid #ff0000; } /** 4 Form Tip Message **/ .form-tip { position: relative; padding: 22px 20px 22px 30px; background: #ededed; } .form-tip > .ft-header { font-weight: 700; } .form-tip > .ft-body { margin-top: 15px; } .ft-item { position: relative; min-height: 19px; margin-top: 10px; } .ft-item > .fcheckbox { position: absolute; } .ft-item > .fcheckbox.error{ border: 1px solid #FF0000; background: #FFF; } .ft-item > .icon { position: absolute; } .ft-item > p { line-height: 16px; padding: 2px 0 2px 30px; } .form-tip:after { position: absolute; top: 12px; left: -24px; content: " "; pointer-events: none; border-width: 12px; border-style: solid; border-color: transparent #ededed transparent transparent; } /* Form 1 Fieldset styling 2 Form Group 3 Form Elements Formatting 3.1 Button 3.1.1 Default Button 3.1.2 Primary Button 3.1.3 Secondary Button 3.1.4 Tertiary Button 3.2 Text Input 3.3 Select 3.3.1 Primary Select 3.3.2 Secondary Select 3.3.3 Customized 3.4 Textarea 3.5 Radio & Checkbox 4 Inline Filed 5 Require Elements 6 Disabled Elements 7 Error Elements */ /** 1 Fieldset styling **/ .fieldset > dl > dt, .fieldset > dl > dd{ float: left; } .fieldset > dl + dl{ margin-top: 10px; } .fieldset > dl > dt{ width: 140px; } .fieldset > dl.button-box{ margin-top: 20px; } .fieldset > dl > dt + dd{ padding-left: 5px; } .fieldset > dl:before, .fieldset > dl:after{ content: " "; display: table; } .fieldset > dl:after{ clear: both; } /** 2 Form Group **/ .form-group { margin-bottom: 25px; padding-left: 20px; } .form-control { display: block; width: 100%; vertical-align: middle; } .form-btn { padding-left: 20px; } /** 3 Form Elements Formatting **/ button, input, select, textarea{ vertical-align: baseline; -webkit-border-radius: 0; -moz-border-radius: 0; line-height: normal; border-radius: 0; font-size: 100%; outline: none; border: 0; -webkit-appearance: none; -moz-appearance: 0; } label { font-weight: 700; display: inline-block; margin-bottom: 5px; font-size: 16px; color: #595454; } label > em { color: #595454; font-weight: normal; font-style: normal; font-family: TisaOT-Ita, Georgia, Sans-Serif; font-style: italic\0; font-size: 14px\0; } /* 3.1 Button */ /* 3.1.1 Default Button */ .button { cursor: pointer; padding: 5px 8px; line-height: 25px; display: inline-block; cursor: pointer; border-radius: 0; -webkit-appearance: none; -moz-appearance: 0; backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; } .button:focus, .button.primary:focus, .button.secondary:focus, .button.tertiary:focus{ background-color: #385cad; color: #ffffff; } .button.hover, .button.primary.hover, .button.secondary.hover, .button.tertiary.hover{ background-color: #385cad; color: #ffffff; } .button[disabled], .button.disabled { background: #b2b2b2 !important; cursor: default !important; color: #ffffff !important; } .button.large{ height: 55px; line-height: 17px; } .button.primary.no-focus:focus { background: #92bc02; } /* 3.1.2 Primary Button */ .button.primary{ font-weight: 700; text-transform: capitalize; background: #92bc02; text-align: center; font-size: 18px; color: #f6f6f6; height: 45px; } .button.primary.short { width: 100px; } .button.primary.middle { width: 200px; } .button.primary.long { width: 254px; } .button.primary.h40, .button.primary.h35 { padding-top: 0; padding-bottom: 0; height: 40px; line-height: 40px; font-weight: 700; } .button.primary.h35 { height: 35px; line-height: 35px; vertical-align: top; font-size: 16px; } /* 3.1.3 Secondary Button */ .button.secondary{ font-weight: 600; background: #015581; text-align: center; font-size: 16px; color: #f6f6f6; height: 35px; } .button.secondary.short { width: 140px; } .button.secondary.long { width: 240px; } /* 3.1.4 Tertiary Button */ .button.tertiary{ font-weight: 600; background: #d8e8f5; text-align: center; font-size: 16px; color: #00415c; height: 35px; } .button.tertiary.short { width: 90px; } .button.tertiary.middle { width: 140px; } .button.tertiary.long { width: 172px; } /*dark purple button*/ .button.dark-purple-button{ border-radius: 3px; background: #385CAD; color: #fff; } /*3.1.5 fourthly*/ .button.fourthly{ font-weight: 600; background: #faa519; text-align: center; font-size: 18px; color: #f6f6f6; height: 37px; } /*3.1.6 quaternary*/ .button.quaternary{ font-weight: 700; text-align: center; font-size: 16px; background-color: #fff; padding: .75em 1.2em .65em; border-radius: 3px; line-height: 1.2em; cursor: pointer; } .button.quaternary:hover{background-color: #d8e8f5;} .button.quaternary:active{background-color: #bbd8f0;} .button.quaternary:disabled,.button.quaternary[disabled]{background-color: #e2e2e2;color: #b3b3b3;} /* 3.2 Text Input */ .text-input{ border: 1px solid #004469; font-size: 13px; font-weight: 400; color: #828282; padding: 4px 8px; } .text-input.gray-border{ border-color: #857f7f; } .text-input.short, .text-input.qty{ width: 73px; } .text-input.mini { width: 60px; } .text-input{ font-size: 16px; height: 30px; } .text-input:disabled, .text-input.disabled { border-color: #cecccd !important; background: #FFF !important; color: #cecccd !important; } .text-input.placeholder{ color: #CCC; } .text-input.strong{ font-size: 16px; font-weight: 700; color: #595554; } .text-input.search{ border: 0; width: 340px; } /** 3.3 Select **/ select{ font-size: 20px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; height: 100%; width: 100%; z-index: 11; top: 0; left: 0; position: absolute; visibility: visible; } .select{ font-size: 13px; font-weight: 400; display: inline-block; position: relative; color: #828282; border: none; height: 36px; padding: 0; } .select-el { position: relative; display: inline-block; z-index: 100; height: 30px; width: 100%; outline: none; } .sim-select { background: #FFF; padding: 0; position: absolute; top: 0; left: 0; height: 30px; width: 100%; z-index: 9; outline: none; } .sim-select.open { z-index: 10; } .sim-select input{ position: absolute; border: 1px #ddd solid; left: 0px; z-index: -1; top: 0px; height: 0px; width: 0px; font-size: 0; } .sim-head { height: 36px; background: #FFF; } .sim-select .current { color: #595454; font-size: 13px; padding: 0 8px; cursor: default; height: 36px; display: block; line-height: 36px; white-space: nowrap; overflow: hidden; margin-right: 32px; } .sim-arrow { position: absolute; right: 10px; top: 15px; width: 0; height: 0; border-top: 5px #03324c solid; border-left: 5px transparent solid; border-right: 5px transparent solid; border-bottom: none; cursor: pointer; } .sim-select.open .sim-arrow { border-bottom: 5px #03324c solid; border-left: 5px transparent solid; border-right: 5px transparent solid; border-top: none; } .sim-select .sim-head:before { content: ""; border-left: 2px solid #ccced0; display: block; position: absolute; right: 1px; top: 5px; width: 29px; height: 26px; pointer-events: none; background: #FFF; } .sim-select .sim-list { display: none; border-top: 1px #FFF solid; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sim-select .sim-list ul { max-height: 264px; background-color: #f9f8f6; } .sim-select .sim-list li { padding: 7px 6px; font-size: 13px; cursor: pointer; list-style-type: none; } .sim-select .sim-list li.hover { background: #385CAD; color: #fff; } .sim-select .sim-list li.disabled, .sim-select .sim-list li.unavailable { background: #dddddd; cursor: default; } .sim-select .sim-list li.disabled:hover, .sim-select .sim-list li.unavailable:hover { background: #dddddd; color: #828282; } .select.error .sim-select .sim-head { border: 1px solid #ff0000 !important; } .select.error .sim-select .sim-head .current { color: #FF0000 !important; } .select .sim-select.open .sim-head { border: 1px solid #e4e3e3; } .select.error .sim-select.open .sim-head { border: 1px solid #ff0000; } .select .sim-select.open .sim-arrow { border-bottom-color: #385CAD; } /* 3.3.1 Primary Select */ .select.primary .sim-arrow { border-top-color: #385CAD; } .select.primary .sim-select .sim-head { border: 1px solid #857f7f; border-radius: 3px; } /* 3.3.2 Secondary Select */ .select.secondary .sim-arrow { border-top-color: #385CAD; } .select.secondary .sim-select .sim-head{ border: 1px solid #ccced0; border-radius: 3px; } .select.secondary .sim-select.open .sim-head { border: 1px solid #e4e3e3; } .select.secondary .current { font-size: 16px; } .select.secondary .sim-list li { font-size: 16px; min-height: 33px; } .select.tertiary .sim-arrow { border-top-color: #857f7f; } .select.tertiary .sim-select .sim-head{ border: 1px solid #857f7f; } .select.tertiary .sim-select.open .sim-head, .select.tertiary .sim-select.focus .sim-head{ border: 1px solid #e2e2e2; } .select.tertiary .current { font-size: 16px; padding: 0px 10px; font-weight: 400; } .select.tertiary .sim-list li { font-size: 16px; border-bottom: 1px #e4e3e1 solid; padding: 7px 11px; } .select.tertiary .sim-list li .so-title{ color: #595454; font-size: 16px; } .select.tertiary .sim-list li .so-body{ font-size: 13px; color: #595454; } .select.tertiary .sim-list li:hover .so-title, .select.tertiary .sim-list li:hover .so-body, .select.tertiary .sim-list li.hover .so-title, .select.tertiary .sim-list li.hover .so-body{ color: #FFF; } .select.tertiary .sim-list li .so-body i{ font-weight: 400; } /* 3.3.3 Customized */ .select.middle, .select.middle > select { width: 140px; } .select.long, .select.long > select { width: 280px; } .ps-error.select .sim-select .sim-head { border-color: #ff0000; } .ps-error.select .sim-arrow { border-top-color: #ff0000; } .ps-error.select .sim-head:before { border-left: 1px solid #ff0000; } .ps-error.select .sim-select .current { color: #ff0000; } /** 3.4 Textarea **/ .textarea{ border: 1px solid #004469; border-radius: 0; color: #828282; font-size: 16px; font-weight: 400; height: 118px; line-height: 18px; outline: none; padding: 4px; resize: none; width: 378px; vertical-align: baseline; *vertical-align: middle; -webkit-border-radius: 0; -moz-border-radius: 0; } .textarea.short{ height: 46px; } .textarea.error{ border: 1px #FF0000 solid !important; color: #FF0000 !important; } /** 3.5 Radio & Checkbox **/ .radio, .checkbox{ cursor: pointer; display: inline-block; height: 20px; line-height: 20px; margin-right: 5px; position: relative; top: -2px; vertical-align: middle; } .radio input[type="radio"], .checkbox input[type="checkbox"]{ margin: 3px 3px 3px 0; } .radio span, .checkbox span{ display: inline-block; line-height: 1; margin-top: 2px; zoom: 1; vertical-align: top; } .fradio, .fcheckbox { display: inline-block; padding: 0; vertical-align: middle; background-image: url('common/icon.png'); background-repeat: no-repeat; border: none; margin-right: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .fradio.fchecked + span { font-weight: 600; } .fradio { width: 16px; height: 17px; background-position: -61px -250px; } @-moz-document url-prefix(){ .fradio { height: 19px; background-position: -61px -249px; } } .fcheckbox { width: 20px; height: 20px; background-color: #FFF; border: 1px #857f7f solid; background-position: -101px -250px; } .secondary .fcheckbox{ width: 20px; height: 20px; background-position: -241px -301px; border: 1px #e3e3e3 solid; } .fradio.fchecked { background-position: -81px -250px; } @-moz-document url-prefix(){ .fradio.fchecked { background-position: -81px -249px; } } .fcheckbox.fchecked { background-color: #92bc02; background-position: -122px -251px; border: 1px #857f7f solid; } .secondary .fcheckbox.fchecked{ background-position: -261px -301px; background-color: #92bc02; border: 1px #92bc02 solid; } .fcheckbox.fdisabled{ background-color: #e4e3e3; background-position: -101px -270px; border: 1px #d0d0d0 solid; } .fcheckbox.fchecked.fdisabled{ background-color: #e4e3e3; background-position: -121px -270px; border: 1px #d0d0d0 solid; } .form-tip .fcheckbox{ width: 19px; height: 16px; z-index: -1; } .form-tip .fcheckbox.fchecked{ background-position: -240px -250px; z-index: 1; background-color: transparent; border: none; } label span{ font-weight: 400; } /** 4 Inline Filed **/ .inline-filed:before, .inline-filed:after { content: " "; display: table; } .inline-filed:after { clear: both; } .inline-filed .text-input { float: left; width: 60px; width: 56px\9; } .inline-filed { position: relative; left: -9px; } .inline-filed .input-bracket { text-align: center; float: left; display: block; color: #b2b2b2; padding-top: 8px; margin-right: 3px; margin-left: 2px; } .type-filed{ float: left; width: 144px; margin-right: 20px; } .phone-filed { padding-right: 0; float: left; } .ext-filed { float: left; width: 71px; } .phone-filed label span{ line-height: 1; font-weight: 400; margin-left: 5px; } .phone-filed label, .ext-filed label { height: 16px; } .inline-filed > .third-input { margin-left: 8px; } /** 5 Require Elements **/ .require:after{ content: "*"; font-family: "Verdana", Sans-Serif; position: relative; margin-left: 3px; top: 2px; } /** 6 Disabled Elements **/ .fieldset .text-input:disabled, .fieldset .select select:disabled, .fieldset .select.disabled:before, .fieldset .textarea:disabled{ background: #EBEBE4 !important; border: 1px solid #857f7f !important; } /** 7 Error Elements **/ .text-input.error{ border: 1px solid #FF593E !important; color: #FF593E !important; } .text-input.error::-webkit-input-placeholder{ color:red!important; } .text-input.error:-moz-placeholder{ color:red!important; } .text-input.error::-moz-placeholder{ color:red!important; } @media (max-width: 1023px) and (min-width: 0px) { .text-input.short, .text-input.qty { width: 50px; } .button.secondary.short { width: 104px; } .button.secondary { height: auto; } .button.secondary.long{ width: 166px; padding: 7px 14px; line-height: 20px; } .sim-select .sim-list ul { overflow-y: scroll; overflow-x: hidden; } } /* Icons 1 Default Icons 2 Customized */ /** 1 Default Icons **/ .icon{ display: inline-block; background: url('common/icon.png') no-repeat; overflow: hidden; } /** 2 Customized **/ .icon.i-youtube{ width: 52px; height: 52px; background-position: 0 0; } .icon.i-twitter{ width: 52px; height: 52px; background-position: -60px 0; } .icon.i-pinterest{ width: 52px; height: 52px; background-position: -120px 0; } .icon.i-houzz{ width: 52px; height: 52px; background-position: -180px 0; } .icon.i-facebook{ width: 52px; height: 52px; background-position: -240px 0; } .icon.i-currentstep{ width: 24px; height: 24px; background-position: -300px 0; } .icon.i-alert{ width: 44px; height: 41px; background-position: 0 -60px; } .icon.i-portrait{ width: 32px; height: 35px; background-position: -60px -60px; } .icon.i-portrait-hover{ width: 32px; height: 35px; background-position: -120px -60px; } .icon.i-pdfdown{ margin-bottom: -5px; margin-right: 5px; width: 35px; height: 27px; /* background-position: -180px -472px;*/ background-image:url('common/print_icon.png'); } .icon.i-search{ width: 23px; height: 22px; background-position: -240px -60px; } .icon.i-futurestep{ width: 24px; height: 24px; background-position: -300px -60px; } .icon.i-cart{ width: 39px; height: 36px; background-position: 0 -120px; } .icon.i-help{ width: 19px; height: 19px; background-position: -60px -120px; } .icon.i-error{ width: 16px; height: 19px; background-position: -60px -153px; } .icon.i-help-dark{ width: 20px; height: 20px; background-position: -90px -150px; } .icon.i-help-xs{ width: 15px; height: 15px; background-position: -91px -119px; } .icon.i-visa { background-position: -120px -120px; height: 38px; width: 58px; } .icon.i-mastercard { background-position: -181px -120px; height: 38px; width: 60px; } .icon.i-discover { background-position: -240px -120px; height: 38px; width: 60px; } .icon.i-ae { background-position: -299px -120px; height: 38px; width: 41px; } .icon.i-visa-lg { background: url('common/icon-card.png') 0 0; height: 47px; width: 73px; } .icon.i-mastercard-lg { background: url('common/icon-card.png') -77px 0; height: 47px; width: 79px; } .icon.i-discover-lg { background: url('common/icon-card.png') -160px 0; height: 47px; width: 75px; } .icon.i-ae-lg { background: url('common/icon-card.png') -239px 0; height: 47px; width: 74px; } .icon.i-close { background-position: -60px -284px; width: 25px; height: 25px; } .icon.i-check{ background-position: -241px -251px; width: 18px; height: 15px; } .icon.i-lead { background-position: 0 -360px; width: 20px; height: 20px; } .icon.i-nolead { background-position: -20px -360px; width: 20px; height: 20px; } .icon.i-pb-free { background-position: -40px -360px; width: 20px; height: 20px; } .icon.i-watertap { background-position: -60px -360px; width: 20px; height: 20px; } .icon.i-ada { background-position: -80px -381px; width: 20px; height: 20px; } .icon.i-green { background-position: -100px -359px; width: 20px; height: 20px; } .icon.i-hazardous { background-position: -120px -359px; width: 20px; height: 20px; } .icon.i-pbf { background-position: -120px -310px; width: 18px; height: 24px; } .icon.i-bell-small { background-position: -23px -60px; width: 12px; height: 15px; } .icon.i-note { background-position: -301px -300px; height: 17px; width: 14px; margin-top: 1px; } .icon.i-note.mute { background-position: -317px -300px; } .icon.i-chat { background-position: -241px -360px; height: 30px; width: 30px; } .icon.i-email { background-position: -241px -400px; width: 32px; height: 20px; } .icon.i-up-blue { background-position: -193px -266px; width: 12px; height: 12px; } .icon.i-up-white { background-position: -348px -240px; width: 12px; height: 11px; } .icon.i-up-green { background-position: -334px -240px; width: 12px; height: 11px; } .icon.i-down-blue { background-position: -180px -266px; width: 12px; height: 12px; } .icon.i-down-white { background-position: -348px -260px; width: 12px; height: 11px; } .icon.i-down-green { background-position: -334px -260px; width: 12px; height: 11px; } .icon.i-ok { background-position: -240px -250px; width: 19px; height: 16px; } .icon.i-qst-small { background-position: -92px -120px; width: 14px; height: 14px; } .icon.i-edit { background-position: -185px -305px; width: 24px; height: 24px; } .icon.i-delete { background-position: -210px -305px; width: 22px; height: 31px; } .icon.i-circle-sel { background-position: -326px -61px; width: 23px; height: 23px; } .icon.i-close-small{ background-position: -61px -310px; width: 15px; height: 15px; } /* Text Styling 1 Font Define 2 Links 3 Arrows 3.1 Yellow Arrow 3.2 Gray Arrow 3.3 Large Gray Arrow 3.4 Gray Light Arrow 3.5 Blue Arrow 3.5.1 Primary 3.5.2 Small 3.6 Small arrow 3.6.1 Primary 3.6.2 grey 3.6.3 Warn 3.6.4 Black 4 Headline 5 Font Weight 6 Font Family 7 Font Size 8 Font Color 9 Text Transform */ /** 2 Links **/ a{ cursor: pointer; color: #385CAD; text-decoration: none; font-size: 16px; font-weight: 600; } a:active, a:focus{ outline: none; } a:hover,a.hover{ text-decoration: none; outline: none; color:#9BB7FA; } a:focus{ text-decoration: none; outline: none; color:#677FB8; } a:active{ color:#7595E0; } a.blue{ color: #9BB7FA; } a.blue:focus{ color:#677FB8; } a.blue.hover{ color:#677FB8; } a.dark-purple{ color: #385CAD; } a.dark-purple:focus{ color: #385CAD; } a.dark-purple:hover{ color: #385CAD; } a.white{ color: #fff; } a.white:focus{ color: #015581; } a.white.hover{ color: #015581; } a.small{ font-size: 13px !important; } a.bold{ text-transform: uppercase !important; } a.show-ul { text-decoration: underline; } .pointer { cursor: pointer; } /** 3 Arrows **/ a.arrow{ padding-right: 25px; position: relative; } a.arrow:after{ position: absolute; background: url('common/icon.png') no-repeat -85px -188px; width: 16px; height: 16px; top: 0; right: 0; content: ""; } /* 3.1 Yellow Arrow */ a.yellow-arrow{ position: relative; padding-right: 40px; } a.yellow-arrow:after{ background: url('common/icon.png') no-repeat -60px -208px; position: absolute; width: 23px; height: 18px; top: 8px; right: 0; content: ""; } /* 3.2 Gray Arrow */ a.gray-arrow{ position: relative; padding-right: 25px; } a.gray-arrow:after{ background: url('common/icon.png') no-repeat -103px -188px; position: absolute; width: 16px; height: 16px; top: 0; right: 0; content: ""; } /* 3.3 Large Gray Arrow */ a.graylarge-arrow{ position: relative; padding-right: 40px; } a.graylarge-arrow:after{ background: url('common/icon.png') no-repeat -60px -190px; position: absolute; width: 23px; height: 18px; top: 8px; right: 0; content: ""; } /* 3.4 Gray Light Arrow */ a.graylight-arrow{ position: relative; padding-right: 25px; } a.graylight-arrow:after{ background: url('common/icon.png') no-repeat -137px -203px; position: absolute; width: 16px; height: 16px; top: 0; right: 0; content: ""; } /* 3.5 Blue Arrow */ /* 3.5.1 Primary */ a.blue-arrow{ position: relative; padding-right: 25px; } a.blue-arrow:after{ background: url('common/icon.png') no-repeat -120px -188px; position: absolute; width: 16px; height: 18px; top: 0; right: 0; content: " "; } /* 3.5.2 Small */ a.blue-arrow.small{ padding-right: 20px; display: inline-block; } a.blue-arrow.small:after{ position: absolute; background: url('common/icon.png') no-repeat -99px -206px; width: 12px; height: 12px; top:0; } .nav-myacct a.blue-arrow.small:after{ top:5px; } /* 3.6 Small Arrow */ /* 3.6.1 Primary */ a.small.arrow{ position: relative; padding-right: 20px; } a.small.arrow:after{ position: absolute; background: url('common/icon.png') no-repeat -85px -205px; width: 12px; height: 16px; top: 0; right: 0; content: ""; } .nav-myacct a.small.arrow:after{ top: -1; } /* 3.6.2 grey */ a.small.arrow.grey:after { background-position: -99px -205px; } /* 3.6.3 Warn */ a.arrow.small.warn:after { background-position: -113px -204px; width: 14px; right: -7px; } /* 3.6.4 Black */ a.arrow.small.black:after { width: 14px; background-position: -98px -206px; } /** 4 Headline **/ h1, h1 > a, h1 > a:hover{ color: #595454; font-weight: 400; font-size: 48px; text-transform: uppercase; } h2, h2 > a, h2 > a:hover{ color: #595454; font-weight: 700; font-size: 24px; text-transform: uppercase; } h3, h3 > a, h3 > a:hover{ color: #595454; font-weight: 700; font-size: 18px; text-transform: capitalize; } h4, h4 > a, h4 > a:hover, .label{ color: #03324c; font-weight: 700; font-size: 18px; } h5{ margin-top: 10px; font-size: 40px; font-weight: 100; padding: 10px 0; line-height: 49px; } h6{ text-transform: uppercase; font-weight: 600; color: #9BB7FA; font-size: 18px; line-height: 36px; } /** 5 Font Weight **/ .fw-stront{ font-weight: bold; } .fw-normal{ font-weight: normal; } /** 6 Font Family **/ .f-regu-it { font-weight: 400; } .f-regu { font-weight: 400; } .f-excn-semib { font-weight: 600; } .f-semib { font-weight: 600; } .f-excn-thin { font-weight: 100; } .f-excn-bold { font-weight: 700; } .f-excn-Light { font-weight: 300; } .f-cond-Light { font-weight: 300; } .f-cond-bold { font-weight: 700; } .f-excn-regu { font-weight: 400; } .f-a-regu { font-weight: 400; } .f-a-Light { font-weight: 300; } .f-t-thin { font-weight: 100; } .f-light { font-weight: 300; } .f-bold { font-weight: 700; } .f-t { font-family: TisaOT, Georgia, Sans-Serif; } .f-t-Medi { font-family: TisaOT-Medi, Georgia, Sans-Serif; } .f-t-Bold { font-family: TisaOT-Bold, Georgia, Sans-Serif; font-weight: bold\0; font-size: 14px\0; } .f-t-BoldIta { font-family: TisaOT-BoldIta, Georgia, Sans-Serif; font-weight: bold\0; font-style: italic\0; font-size: 14px\0; } .f-t-Ita { font-family: TisaOT-Ita, Georgia, Sans-Serif; font-style: italic\0; font-size: 14px\0; } .f-t-MediIta { font-family: TisaOT-MediIta, Georgia, Sans-Serif; font-style: italic\0; font-size: 14px\0; } .f-t-Medi { font-family: TisaOT-Ita, Georgia, Sans-Serif; font-style: italic\0 ; font-size: 14px\0;} .f-semib-it { font-weight: 600;} .f-regu-new { font-weight: 400; } .f-bold-new { font-weight: 700; } /** 7 Font Size **/ .fs-16{ font-size: 16px; line-height: 24px; } .fs-12{ line-height: 1.1; } .fs-13, .fs-14, .fs-18, .fs-19, .fs-20, .fs-22, .fs-24, .fs-25, .fs-26, .fs-28, .fs-30, .fs-32, .fs-38, .fs-39, .fs-41, .fs-48, .fs-56, .fs-62, .fs-80{ line-height: 1; } .fs-12{ font-size: 12px; } .fs-13{ font-size: 13px; } .fs-14{ font-size: 14px; } .fs-18{ font-size: 18px; } .fs-19{ font-size: 19px; } .fs-20{ font-size: 20px; } .fs-22{ font-size: 22px; } .fs-24{ font-size: 24px; } .fs-25{ font-size: 25px; } .fs-26{ font-size: 26px; } .fs-28{ font-size: 28px; } .fs-30{ font-size: 30px; } .fs-32{ font-size: 32px; } .fs-38{ font-size: 38px; } .fs-39{ font-size: 39px; } .fs-41{ font-size: 41px; } .fs-48{ font-size: 48px; } .fs-56{ font-size: 56px; } .fs-62{ font-size: 62px; } .fs-80{ font-size: 80px; } /** 8 Font Color **/ .fc-red { color: #FF0000; } .fc-blue { color: #36bbe4; } .fc-darkblue { color: #00446a; } .fc-green { color: #92bc02; } .fc-yellow { color: #FBA419; } .fc-darkgray { color: #3C3C3C; } .fc-white { color: #FFFFFF; } .fc-grey { color: #b2b2b2; } .fc-dark { color: #000000; } .fc-normal { color: #595454; } .fc-orange { color: #faa519; } .fc-black { color: #0e1318; } /** 9 Text Transform **/ .text-normal { text-transform: none; } .text-upper { text-transform: uppercase; } .text-low { text-transform: lowercase; } .text-case { text-transform: capitalize; } /* Utils 1 Float 2 Vertical Align 3 Text Align 4 Display 5 Margin & Padding 5.1 Margin 5.2 Padding 6 Background 7 Others 8 device (1023 > width > 768) */ /** 1 Float **/ .clearfix:before, .clearfix:after { content: " "; display: table; } q:before, q:after{ content: ''; content: none; } .clearfix:after { clear: both; } .pull-left { float: left !important; } .pull-right { float: right !important; } .pull-none { float: none !important; } /** 2 Vertical Align **/ .vl-middle { vertical-align: middle; } .vl-top { vertical-align: top; } .vl-bottom { vertical-align: bottom !important; } /** 3 Text Align **/ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } /** 4 Display **/ .hide { display: none !important; } .show { display: block !important; } .inline-block { display: inline-block; } .block { display: block; } .table{ display: table; width: 100%; } .table-auto{ display: table; } .table-row{ display: table-row; } .table-cell, ul.table-row > li{ display: table-cell; float: none; } .visi-hidden{ visibility: hidden; } /** 5 Margin & Padding **/ /* 5.1 Margin */ /* margin top */ .mt-5 { margin-top: 5px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-100 { margin-top: 100px; } /* margin bottom */ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-100 { margin-bottom: 100px; } /* margin left */ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-100 { margin-left: 100px; } /* margin right */ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } /* 5.2 Padding */ /* Padding top */ .pt-5{ padding-top: 5px; } .pt-10{ padding-top: 10px; } .pt-15{ padding-top: 15px; } .pt-20{ padding-top: 20px; } .pt-25{ padding-top: 25px; } .pt-30{ padding-top: 30px; } .pt-35{ padding-top: 35px; } .pt-40{ padding-top: 40px; } /* Padding bottom */ .pb-8{ padding-bottom: 8px; } .pb-5{ padding-bottom: 5px; } .pb-10{ padding-bottom: 10px; } .pb-15{ padding-bottom: 15px; } .pb-20{ padding-bottom: 20px; } .pb-25{ padding-bottom: 25px; } .pb-30{ padding-bottom: 30px; } /* Padding left */ .pl-5{padding-left: 5px;} .pl-10{ padding-left: 10px; } .pl-20{ padding-left: 20px; } /* Padding right */ .pr-10{ padding-right: 10px; } .pr-20{ padding-right: 20px; } /** 6 Background **/ .bc-orange { background: #faa519; } .bc-yellow { background: #efc92d; } .bc-blue { background: #9BB7FA; } .bc-updated { background: yellow !important; } .bc-none { background: none !important; } /** 7 Others **/ .disscroll{ height: 100%; overflow: hidden; } .none-border{ border: none !important; } .min-width-60{ min-width: 60px; } hr{ width: 100%; height: 1px; border: 0; background: #E4E3E3; clear: both; } .line-alone{ line-height: 1; } .line-base { line-height: 1.2; } .text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; width: 100%; } .email-item { display: inline-block; word-wrap: break-word; max-width: 100%; } .oitem-price .decimal, .pq-price .decimal, .cl-price .decimal { font-size: 11px; display: inline-block; vertical-align: top; line-height: 14px; margin-top: -2px; } .tip-message-box { position: absolute; top: 0; width: 960px; text-align: center; } .tip-message-box.fixed { position: fixed; top: 60px; z-index: 999; left: 0; width: 100%; } .tip-message-box .tm-cont { display: inline-block; padding: 15px 40px 15px 33px; background-color: #fbf0c5; } .tip-message-box .tm-cont p { position: relative; font-weight: 600; font-size: 20px; } .tip-message-box .tm-cont .operate-result, .tip-message-box .tm-cont .operate-success { padding-left: 32px; } .tip-message-box .tm-cont .operate-result.fail { padding-left: 25px; } .tip-message-box .tm-cont .operate-result:before, .tip-message-box .tm-cont .operate-success:before { position: absolute; top: 2px; left: 0; content: ""; width: 23px; height: 21px; background: url('common/icon.png') -260px -260px; } .tip-message-box .tm-cont .operate-result.fail:before { background-position: -242px -284px; width: 15px; height: 15px; top: 6px; } .tip-message-box .tm-cont a { text-decoration: underline; margin-left: 7px; } /** 8 Customized **/ .visible-xs, .visible-sm, .visible-md, .visible-xs-inline, .visible-sm-inline { display: none!important; } @media (max-width: 479px) { .visible-xs { display: block!important; } .hidden-xs{ display: none!important; } .visible-xs-inline { display: inline!important; } .fill-row{ margin-left: -10px; margin-right: -10px; } } @media (min-width: 480px) and (max-width: 767px) { .visible-sm { display: block!important; } .visible-sm-inline { display: inline !important; } .hidden-sm{ display: none!important; } .fill-row{ margin-left: -12px; margin-right: -12px; } } @media (max-width: 1023px) and (min-width: 0px) { .visible-md { display: block!important; } .hidden-md { display: none!important; } } /** 9 device (1023 > width > 768) **/ @media (min-width: 0px) and (max-width: 1023px) { .md-ml0{ margin-left: 0px !important; } .md-mt10{ margin-top:10px!important; } .md-mt15{ margin-top:15px!important; } .md-mt25{ margin-top:25px!important; } .md-mt45{ margin-top:45px!important; } .tip-message-box { position: absolute; top: 0; width: 748px; text-align: center; } .block-md{ display: block!important; } } .hero-img ul{ background: #00446b; } .hero-img ul li{ width: 100%; text-align: center; list-style-type: none; } .hero-img a{ display: block; height: 100%; } .green-line{ background: #92bc02; height: 15px; } .banner-wishlist{ border-top: 2px #CCC solid; border-bottom: 2px #CCC solid; margin: 0 -10px; margin-top: 60px; padding: 25px 85px 25px 27px; line-height: 35px; position: relative; } .banner-wishlist .arrow-icon{ background: url('common/icon.png') no-repeat -60px -208px; position: absolute; width: 23px; display: block; height: 18px; top: 50%; margin-top: -9px; right: 58px; content: ""; } .banner-wishlist > img{ position: absolute; top: -50px; left: 10px; } .banner-wishlist > p{ padding-left: 150px; } @media (max-width: 1023px) and (min-width: 0px) { .hero-img ul li img { min-height: inherit; max-width: none; width: 100%; } .hero-img ul li { height: auto; } .banner-wishlist{ padding: 9px 75px 9px 50px; } .banner-wishlist .arrow-icon{ right: 47px; } } /*== ADD Img Banner in message center ...*/ .banner-bgImg { background-repeat: no-repeat; background-size: cover; margin: 50px 0 60px; } .banner-bgImg .text-con { padding: 20px 25px; color: #fff; } .banner-bgImg .title { font-weight: 700; font-size: 24px; margin-bottom: 10px; } .banner-bgImg .desc { font-weight: 400; } .banner-bgImg .button { margin-top: 20px; padding-left: 20px; padding-right: 20px; } .dist-description{ margin-top: -10px; } .dist-description p{ font-weight: 700; font-size: 16px; } .dist-description p span{ font-weight: 400; font-size: 13px; } .dist-description p span.price{ font-size: 18px; font-weight: 700; } .dist-list{ display: table; width: 100%; border: 1px #CCC solid; background: #F7F7F7; } .dist-list ul { display: table-row; width: 100%; } .dist-list ul li{ display: table-cell; padding: 8px 10px; font-size: 13px; } .dist-list ul.list-header li{ background: #00446B; color: #FFF; font-weight: 700; cursor: pointer; } .dist-list ul.list-header li span.asc:after{ background: url('common/icon-arrow.png') no-repeat; content: " "; width: 7px; height: 8px; display: inline-block; margin-left: 5px; } .dist-list ul.list-header li span.des:after{ background: url('common/icon-arrow.png') no-repeat; background-position: -10px -2px; content: " "; width: 7px; height: 8px; display: inline-block; margin-left: 5px; } #checkStores .modal-dialog { width: 685px; margin: 10% auto 0; } #checkStores .pa-prod-item-box { margin-top: -8px; padding: 14px 12px; font-size: 0; } #checkStores.local .pa-prod-item-box { background-color: #f9f8f6; } #checkStores.every .pa-prod-item-box { background-color: #eff6fb; } .pa-prod-item-box .prod-img, .pa-prod-item-box .prod-desc, .pa-prod-item-box .price-qty { display: inline-block; vertical-align: top; } .pa-prod-item-box .prod-img { width: 23%; } .pa-prod-item-box .prod-desc { width: 40%; padding-left: 20px; padding-right: 20px; } .pa-prod-item-box .price-qty { width: 37%; } #checkStores .pa-prod-item-box .price-qty .total-button .button{ margin-bottom: 0px; } .pa-prod-item-box .prod-desc .pd-title { line-height: .95; } .pa-prod-item-box .prod-desc .pd-title a { font-weight: 700; font-size: 20px; cursor: default; } .pa-prod-item-box .prod-desc .pd-sku { margin-top: 5px; font-size: 16px; } .pa-prod-item-box .prod-desc .current-store-box { margin-top: 12px; } .prod-desc .current-store-box .cs-title { font-size: 14px; padding-right: 5px; } .prod-desc .current-store-box .cs-cont { font-size: 14px; font-weight: 700; cursor: default; } .pa-prod-item-box .price-qty .pq-price { font-weight: 700; font-size: 24px; color: #3d3c3a; line-height: 1; white-space: nowrap; } .pa-prod-item-box .price-qty .pq-price sup { font-size: 14px; padding-left: 2px; display: inline-block; vertical-align: top; line-height: 14px; font-weight: bold; } .pa-prod-item-box .price-qty .pq-price i, .pa-prod-item-box .price-qty .pq-price .unit, .pa-prod-item-box .price-qty .pq-price .unit-multi { font-size: 16px; font-style: initial; font-weight: 400; margin-left: 5px; } .pa-prod-item-box .price-qty .qty-box { margin-top: 15px; } .pa-prod-item-box .price-qty .qty-box label { display: inline-block; margin-bottom: 0; vertical-align: middle; } .pa-prod-item-box .price-qty .qty-box .text-input { width: 50px; margin-left: 13px; padding: 0; line-height: 28px; text-align: center; vertical-align: middle; } .pa-prod-item-box .price-qty .total-button { margin-top: 20px; } .pa-prod-item-box .price-qty .pq-uom{ font-size: 13px; line-height: 1.25; margin-top: 5px; font-family: TisaOT, Georgia, Sans-Serif; } .pa-prod-item-box .price-qty .pq-uom + .pq-uom { margin-top: 10px; } #checkStores .cs-txt-tip { margin-top: 13px; font-size: 23px; } #checkStores .avail-list-box { padding-top: 24px; margin-top: 20px; border-top: 1px solid #e4e3e3; } .avail-list-box .avail-tab-box { list-style: none; border-bottom: 4px solid #9BB7FA; } .avail-tab-box .avail-tab-item { position: relative; width: 50%; padding: 0 10px; text-align: center; } .avail-tab-box .avail-tab-item.active { background-color: #9BB7FA; } .avail-tab-box .avail-tab-item a { position: relative; display: inline-block; padding: 9px 0 9px 30px; } .avail-tab-box .avail-tab-item.active a { color: #fff; } .avail-tab-box .avail-tab-item .triangle-icon { position: absolute; display: none; } .avail-tab-box .avail-tab-item.active .triangle-icon { display: block; width: 15px; height: 8px; left: 49%; bottom: -12px; z-index: 99; background-position: -60px -530px; } .avail-tab-box .avail-tab-item .local-icon, .avail-tab-box .avail-tab-item .everywhere-icon { position: absolute; } .avail-tab-box .avail-tab-item .local-icon { left: 0; top: 9px; width: 19px; height: 25px; background-position: -30px -550px; } .avail-tab-box .avail-tab-item.active .local-icon { background-position: 0 -550px; } .avail-tab-box .avail-tab-item .everywhere-icon { left: -2px; top: 7px; width: 23px; height: 23px; background-position: -30px -520px; } .avail-tab-box .avail-tab-item.active .everywhere-icon { background-position: 0 -520px; } .avail-list-wrap .local-list, .avail-list-wrap .everywhere-list { list-style: none; max-height: 250px; -webkit-overflow-scrolling: touch; } .avail-list-wrap .local-list li { padding: 18px 22px 22px 18px; font-size: 0; } .avail-list-wrap .local-list li.odd-item { background-color: #f9f8f6; } .avail-list-wrap .everywhere-list li.odd-item { background-color: #eff6fb; } .local-list li .store-desc, .local-list li .make-store-btn, .local-list li .in-stock, .everywhere-list li .store-desc, .everywhere-list li .in-stock { display: inline-block; vertical-align: top; } .local-list li .store-desc { width: 42%; } .local-list li .make-store-btn { width: 29%; } .local-list li .in-stock { width: 29%; text-align: center; } .local-list li .store-desc .store-name, .everywhere-list li .store-desc .store-name { font-weight: 700; color: #535252; font-size: 16px; line-height: 1; } .local-list li .store-desc .store-addr1, .local-list li .store-desc .store-addr2 { font-size: 13px; line-height: 1; } .local-list li .store-desc .store-addr1 { margin-top: 5px; } .local-list li .store-desc .store-addr2 { margin-top: 2px; } .local-list li .in-stock .is-count, .everywhere-list li .in-stock .is-count { font-size: 48px; color: #92bc02; line-height: .7; } .local-list li .in-stock .is-count.zero-cont, .everywhere-list li .in-stock .is-count.zero-cont { color: #d3d3d3; } .local-list li .in-stock .is-txt, .everywhere-list li .in-stock .is-txt { margin-top: 8px; font-size: 14px; } .avail-list-wrap .everywhere-list li { padding: 17px 18px 24px; font-size: 0; } .everywhere-list li .store-desc { width: 68%; } .everywhere-list li .in-stock { width: 32%; text-align: center; } #checkStores .tipmsg { padding-top: 10px; color: #93bb02; font-weight: 600; height: 40px; position: relative; font-size: 16px; } #checkStores .error { font-size: 16px; font-weight: 600; color: #ff0000; } /*! * Datepicker for Bootstrap * * Copyright 2012 Stefan Petre * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * */ /* Copy to bootstrap ------------------------------------------*/ .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } /*.table-condensed th, .table-condensed td { padding: 4px; }*/ /*datepicker ------------------------------------------*/ .datepicker { top: 0; left: 0; padding: 4px 8px; margin-top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .datepicker:before { content: ''; display: inline-block; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; left: 50%; margin-left: -11px; } .datepicker:after { content: ''; display: inline-block; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; position: absolute; left: 50%; margin-left: -10px; } .datepicker-dropdown.datepicker-orient-top:before { top: -11px; } .datepicker-dropdown.datepicker-orient-top:after { top: -10px; } .datepicker-dropdown.datepicker-orient-bottom:before { bottom: -11px; border-bottom: 0; border-top: 11px solid #999; } .datepicker-dropdown.datepicker-orient-bottom:after { bottom: -10px; border-bottom: 0; border-top: 10px solid #fff; } .datepicker.datepicker-inline:after, .datepicker.datepicker-inline:before{ display:none; } .datepicker > div { display: none; } .datepicker table { width: 100%; margin: 0; } .datepicker td, .datepicker th { text-align: center; font-size: 12px; padding: 3px 4px 0px; } .datepicker td .number{ width: 26px; height: 26px; color: #949494; line-height: 26px; } .datepicker th{ color: #666; font-weight: 600; } .datepicker tr + tr th { padding-top: 3px; padding-bottom: 3px; } .datepicker td.day:hover .number{ background: #eeeeee; cursor: pointer; } .datepicker td.day.disabled .number{ color: #eeeeee; } .datepicker td.old .number, .datepicker td.new .number{ color: #b2b2b2; } .datepicker td.active .number, .datepicker td.active:hover .number{ color: #ffffff; background-color: #9BB7FA; } .datepicker td.active:hover .number, .datepicker td.active:hover:hover .number, .datepicker td.active:focus .number, .datepicker td.active:hover:focus .number, .datepicker td.active:active .number, .datepicker td.active:hover:active .number, .datepicker td.active.active .number, .datepicker td.active:hover.active .number, .datepicker td.active.disabled .number, .datepicker td.active:hover.disabled .number, .datepicker td.active[disabled] .number, .datepicker td.active:hover[disabled] .number{ color: #ffffff; background-color: #9BB7FA; } .datepicker td.active:active .number, .datepicker td.active:hover:active .number, .datepicker td.active.active .number, .datepicker td.active:hover.active .number{ background-color: #9BB7FA \9; } .datepicker .datepicker-years, .datepicker .datepicker-months{ width: 226px; } .datepicker td span { display: block; width: 50px; height: 50px; line-height: 50px; float: left; margin: 1px; cursor: pointer; } .datepicker td span:hover { background: #eeeeee; } .datepicker td span.active { color: #ffffff; background: #9BB7FA; } .datepicker td span.active:hover, .datepicker td span.active:focus, .datepicker td span.active:active, .datepicker td span.active.active, .datepicker td span.active.disabled, .datepicker td span.active[disabled] { color: #ffffff; background: #9BB7FA; } .datepicker td span.active:active, .datepicker td span.active.active { background: #9BB7FA; } .datepicker td span.old { color: #999999; } .datepicker th.switch { width: 145px; } .datepicker th.next, .datepicker th.prev { font-size: 21px; } .datepicker thead tr:first-child th { cursor: pointer; padding: 3px; } .datepicker thead tr:first-child .datepicker-switch{ font-size: 16px; color: #292929; } .datepicker thead tr:first-child th:hover { background: #eeeeee; } .input-append.date .add-on i, .input-prepend.date .add-on i { display: block; cursor: pointer; width: 16px; height: 16px; } /* 1. Footer 1.1 Connect Us 1.1.1 Share 1.1.2 Email Sign Up 1.2 Site Links /* 1. Footer ============================================================================================*/ .footer{ background: #FFF; } /* 1.1 Connect Us ----------------------------------------------------------*/ .footer-connect{ padding: 10px 0; background: #EEE; border-left: 0; border-right: 0; margin: 0 10px 60px !important; } .footer-connect .connect-us{ background: white; overflow: hidden; padding: 35px 10px 30px; border: 2px #CCC solid; border-left: 0; border-right: 0; margin: 0 -20px; } /* 1.1.1 Share ----------------------------------------------------------*/ .connect-us ul.share{ padding: 0 10px; } .connect-us ul.share > li{ float: left; list-style-type: none; margin-right: 10px; } .connect-us ul.share > li > a{ float: left; } /* 1.1.2 Share ----------------------------------------------------------*/ /* FG-9947 Author: leeli Date: 11/3/2015 ---------------------------------------------- .connect-us .sign-up{ float: right; padding: 0 10px; position: relative; } .connect-us .sign-up dl{ float: right; margin-top: 10px; } .connect-us .sign-up dl dt{ text-transform: uppercase; font-family: ProximaNova-Semibold, Sans-Serif; color: #B3B3B3; font-size: 16px; font-weight: normal; line-height: 30px; float: left; margin-right: 15px; } .connect-us .sign-up dl dd{ float: left; position: relative; } .connect-us .sign-up .text-input::-webkit-input-placeholder{ font-family: TisaOT, Georgia, Sans-Serif; font-size: 16px; line-height: 18px; color: #b3b3b3; } .connect-us .sign-up .text-input::-moz-placeholder{ font-family: TisaOT, Georgia, Sans-Serif; font-size: 16px; line-height: 18px; color: #b3b3b3; } .connect-us .sign-up .text-input:-moz-placeholder{ font-family: TisaOT, Georgia, Sans-Serif; font-size: 16px; line-height: 18px; color: #b3b3b3; } .connect-us .sign-up .text-input:-ms-input-placeholder{ font-family: TisaOT, Georgia, Sans-Serif; font-size: 16px; line-height: 18px; color: #b3b3b3; } .connect-us .sign-up .text-input.placeholder { font-family: TisaOT, Georgia, Sans-Serif; font-size: 16px; color: #b3b3b3; } .connect-us .sign-up .text-input{ width: 300px; border-color: #3C3C3C; padding-right: 60px; height: 30px; font-size: 16px; } .connect-us .sign-up .go-btn{ position: absolute; top: 1px; right: 1px; height: 28px; line-height: 28px; padding: 0 13px; font-size: 18px; color: #FFF; font-family: ProximaNova-Semibold, Sans-Serif; } .connect-us .identity-choose { position: absolute; right: 50px; top: -33px; } .connect-us .identity-choose label { font-size: 14px; margin-left: 5px; color: #595454; font-family: ProximaNova-Regular, Sans-Serif; } */ .connect-us .fradio { margin-right: 4px; margin-top: 2px; } /* Add new FG-9947 Author: leeli Date: 11/3/2015 -------------------------------------------------------*/ .connect-us .sign-up{ float: right; font-size: 0px; padding-right: 10px; } .connect-us .sign-up .button.secondary{ width: 140px; height: 45px; line-height: 35px; font-size: 18px; vertical-align: middle; } .connect-us .sign-up .text{ font-size: 16px; display: inline-block; width: 340px; text-align: right; vertical-align: middle; padding-right: 20px; color: #b2b2b2; } /* 1.2 Site Links ----------------------------------------------------------*/ .footer-site-links > ul > li{ list-style-type: none; } .footer-site-links{ margin-bottom: 120px; } .footer-site-links h6{ color: #b3b3b3; line-height: 38px; } .footer-site-links p{ padding: 6px 10px 6px 0; line-height: 18px; } .footer-site-links p a{ color: #666666; font-weight: 400; } .footer-site-links p a:focus{ color: #9BB7FA; } .footer-site-links p a:hover{ color: #9BB7FA; } .footer-site-links p.bold{ font-weight: 600; } .copyright{ margin-bottom: 60px; text-align: center; font-size: 14px; } .copyright a{ font-size: 14px; font-weight: 400; color: #9BB7FA; } .copyright a:focus, .copyright a:hover{ color: #595454; } /* pop-footer-tip ------------------------------------------*/ .pop-footer-tip:after{ margin-right: -85px; } @media (max-width: 1023px) and (min-width: 0px) { .footer-connect { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 30px !important; } .connect-us .sign-up { padding-top: 15px; } .footer-connect .connect-us { padding: 15px 10px 15px; box-shadow: 0px 0px 0px 10px #f5f5f5; } /*.connect-us .sign-up dl { margin-top: 0; } .connect-us .sign-up dl dt { line-height: 1; margin-bottom: 10px; font-size: 18px; margin-right: 0; }*/ .connect-us .sign-up .text{ width: 240px; } .connect-us .identity-choose { position: static; } .connect-us ul.share { padding-top: 15px; } .footer-site-links { margin-bottom: 80px; } } #galleryModal .modal-dialog { width: 660px; } .gallery-nav { position: absolute; top: 30%; height: 80px; width: 60px; } .gallery-nav > i { width: 22px; height: 40px; display: block; background-image: url('common/icon.png'); background-repeat: no-repeat; text-indent: -10000px; margin: 20px auto; cursor: pointer; } .gallery-nav-prev { left: -65px; } .gallery-nav-prev > i { background-position: -165px -190px; } .gallery-nav-prev.disabled > i { background-position: -257px -190px; cursor: default; } .gallery-nav-next { right: -65px; } .gallery-nav-next > i { background-position: -188px -190px; } .gallery-nav-next.disabled > i { background-position: -280px -190px; } .gallery-nav-prev.disabled:focus, .gallery-nav-next.disabled:focus { background-color: transparent; cursor: default; } .gallery-nav-prev.disabled:hover, .gallery-nav-next.disabled:hover { background-color: transparent; cursor: default; } #galleryModal .gallery-container { position: relative; padding-top: 14px; margin-left: auto; margin-right: auto; width: 516px; margin-bottom: -30px; } #galleryModal .hero-img img { display: block; } #galleryModal .thumbnails { margin-left: -16px; margin-top: 20px; } #galleryModal .thumbnails:before, #galleryModal .thumbnails:after { content: " "; display: table; } #galleryModal .thumbnails:after { clear: both; } #galleryModal .thumbnails li { width: 60px; height: 50px; float: left; list-style: none; margin-left: 16px; margin-bottom: 20px; transition: all 0.3s ease 0s; cursor: pointer; border-bottom: 5px solid transparent; } #galleryModal .thumbnails li img { height: 45px; width: 60px; } #galleryModal .thumbnails li:focus { border-bottom-color: #9BB7FA; } #galleryModal .thumbnails li:hover { border-bottom-color: #9BB7FA; } #galleryModal .thumbnails li.active { border-bottom-color: #92BC02; } @media (max-width: 1023px) and (min-width: 0px) { #galleryModal .gallery-container { margin-bottom: -20px; } .gallery-nav-prev { left: -70px; } .gallery-nav-next { right: -70px; } } /* 1. Header 1.1 LOGO 1.2 User Details 1.2.1 My Account 1.2.2 Cart 1.3 Main Navigation 1.4 Sub Navigation 1.5 Search Box 1.6 Fixed Menu Bar /* 1. Header ============================================================================================*/ /* 1.1 LOGO ----------------------------------------------------------*/ .header-logo{ height: 90px; padding-top: 30px; float: left; } .header-logo img { max-width: 230px\9; } /* 1.2 User Details ----------------------------------------------------------*/ /* public styling */ .header-details-user{ float: right; margin-top: 27px; margin-right: 10px; position: relative; } .header-details-user > ul > li{ float: left; margin-left: 10px; list-style-type: none; } .header-details-user > ul > li > a{ color: #FFF; font-weight: 600; font-size: 14px; height: 40px; display: table-cell; vertical-align: middle; padding-top: 1px; } .header-details-user > ul > li > a > span{ line-height: 13px; white-space: nowrap; display: block; } .header-details-user .pline:after{ content: "|"; color: #36BAE1; margin-right: 10px; } .header-details-user span.pline:after{ margin-left: 10px; } .header-details-user .pline > span, .header-details-user .pline > a{ margin-right: 20px; line-height: 40px; } /* 1.2.1 My Account ----------------------------------------------------------*/ .header-details-user .header-login{ margin: -15px -5px -15px -13px; background: none; position: relative; } .header-details-user .header-login.hover{ background: #FFF; } .header-details-user .header-login > a { padding: 15px 30px 15px 35px; display: block; height: inherit; line-height: 40px; text-transform: uppercase; } .header-details-user .header-login > a > span{ display: inline-block; } .header-details-user .header-login.hover > a{ color: #00446b; } .header-login .nav-login{ display: none; position: absolute; right: -50px; top: 70px; background: #f9f8f6; z-index: 502; } .header-login .nav-login:after{ content: " "; pointer-events: none; border-width: 20px; border-style: solid; border-color: white transparent transparent transparent; height: 0; background: #F9F8F6; position: absolute; top: 0; right: 125px; width: 0; } .nav-login .header-login-form{ width: 290px; padding: 30px 30px 20px; } .nav-login .header-login-form .title{ font-weight: 300; font-size: 26px; display: block; line-height: 35px; color: #00446b; } .nav-login .header-login-form .input{ margin-top: 5px; } .header-login-form .note label{ line-height: 40px; color: #595454; } .header-login-form .note .fcheckbox { margin-right: 5px; } .header-login-form .note a{ line-height: 23px; margin-top: 9px; font-weight: 700; } .header-login-form .btn .button.primary.middle{ width: 100%; } .header-login-form .input input{ width: 100%; border: 1px solid #857f7f; } .header-login-form .input input::-webkit-input-placeholder{ color: #595454; font-weight: 400; font-size: 14px; } .header-login-form .input input::-moz-placeholder{ color: #595454; font-weight: 400; font-size: 14px; } .header-login-form .input input:-moz-placeholder{ color: #595454; font-weight: 400; font-size: 14px; } .header-login-form .input input:-ms-input-placeholder{ color: #595454; font-weight: 400; font-size: 14px; } .header-login-form .input input.placeholder { color: #595454; font-weight: 400; font-size: 14px; } .header-login-form .inline-error{ margin-top: -5px; margin-bottom: 5px; } .nav-login .header-register{ padding: 10px 30px 20px; background: #36bae1; text-align: center; } .header-register .btn{ padding-top: 10px; } .header-register .btn a{ width: 100%; height: 45px; text-transform: uppercase; font-weight: 700; line-height: 35px; font-size: 18px; } .header-register .btn a:focus{ background: #D8E8F5 !important; color: #00415C !important; } .header-register .btn a:hover{ background: #D8E8F5 !important; color: #00415C !important; } .header-details-user .myacct{ margin: -15px 0; /*padding: 15px;*/ background: none; position: relative; } .header-details-user .myacct.hover, .header-details-user .myacct.active{ background: #FFF } .header-details-user .myacct.hover > a, .header-details-user .myacct.active > a{ color: #00446A; text-decoration: none; } .header-details-user .myacct > a{ line-height: 40px; display: inline-block; text-transform: uppercase; padding: 15px 71px 55px 15px; } .header-details-user .myacct > a i.i-icon{ position: absolute; width: 35px; height: 35px; right: 12px; background: url('common/icon.png') no-repeat -59px -60px; content: ""; display: block; top: 16px; right: 15px; } .header-details-user .myacct i.note{ position: absolute; font-size: 14px; color: #36BAE1; line-height: 15px; top: 45px; left: 25px; font-style: normal; text-transform: none; /*font-family: TisaOT, Sans-Serif;*/ font-family: Georgia, Sans-Serif; } .header-details-user .myacct.hover > a i.i-icon, .header-details-user .myacct.active > a i.i-icon{ background-position: -131px -60px; } .header-details-user .myacct:focus i.note, .header-details-user .myacct.hover i.note, .header-details-user .myacct.active i.note{ color: #3c3c3c; } .header-details-user .myacct i.icon.i-alert{ position: absolute; right: 47px; top: 10px; width: 16px; height: 19px; display: block; } .header-details-user .myacct.hover i.icon.i-alert{ display:none; } .header-details-user .nav-myacct{ display: none; position: absolute; right: -42px; top: 70px; background: #fff; z-index: 502; } .header-details-user .nav-myacct:after{ /*content: " ";*/ pointer-events: none; border-width: 20px; border-style: solid; border-color: white transparent transparent transparent; height: 0; background: #F9F8F6; position: absolute; top: 0; right: 54px; width: 0; } .header-details-user .nav-myacct > nav{ width: 260px; padding: 10px 20px 10px 35px; line-height: normal; margin: 20px auto; } .header-details-user .nav-location{ display: none; position: absolute; top: 70px; z-index: 502; background: #FFF; right: -314px; } .header-details-user .nav-location > nav{ width: 300px; float: left; position: relative; z-index: 99; } .header-details-user .nav-location > div{ width: 314px; margin-left: 300px; padding: 20px 20px 20px 30px; position: relative; z-index: 100; } .nav-location > nav > ul > li{ padding: 20px 20px 28px 55px; position: relative; background: #f9f8f6; cursor: pointer; list-style-type: none; } .nav-location > nav > ul > li.active{ background: #9BB7FA; } .nav-location > nav > ul > li i.i-icon{ position: absolute; width: 27px; height: 35px; left: 20px; background-image: url('common/icon.png'); background-repeat: no-repeat; content: ""; display: block; top: 16px; } .nav-location > nav > ul > li.n-jobcontract i.i-icon{ background-position: -143px -431px; } .nav-location > nav > ul > li.n-jobcontract.active i.i-icon{ background-position: -180px -431px } .nav-location > nav > ul > li.n-store i.i-icon{ background-position: -215px -431px; } .nav-location > nav > ul > li.n-store.active i.i-icon{ background-position: -107px -431px } .nav-location > nav > ul > li.active:after{ position: absolute; right: -40px; border-width: 20px; border-style: solid; border-color: transparent transparent transparent #9BB7FA; content: ""; display: block; top: 35%; } .nav-location .nl-title{ font-size: 20px; font-weight: 700; text-transform: uppercase; padding-top: 4px; position: relative; } .nav-location > div .nl-title{ color: #b3b3b3; } .nav-location li label{ margin-bottom: 3px; cursor: pointer; } .nav-location li.active .nl-title{ color: #FFF; } .nav-location li.active label{ color: #00446a; } .nav-location li.active p{ color: #FFF; } .nav-location span{ line-height: 1.1; display: block; font-size: 20px; color: #9BB7FA; font-weight: 600; } .nav-location span.fs-18{ font-size: 18px !important; } .nav-location span.un{ color: #b3b3b3; } .nav-location label.un{ color: #595454; } .nav-location li.active i, .nav-location li.active span, .nav-location li.active span.un{ color: #FFF; } /* settings */ .header-details-user nav.settings{ float: right; padding-bottom: 10px; } .header-details-user nav.settings ul li{ list-style-type: none; padding-bottom: 12px; } .header-details-user nav.settings ul li a.thin{ font-size: 18px; font-weight: bold; display: block; line-height: 35px; letter-spacing: -1px; white-space: nowrap; } .header-details-user nav.settings ul li span:not(.msg-num){ font-size: 14px; line-height: 18px; display: block; } .header-details-user nav.settings .msg-num { font-size: 18px; color: #385cad; font-weight: 700; margin-left: 5px; } /* notes */ .header-details-user nav.notes{ margin-right: 260px; border-right: 1px #e8e7e5 solid; min-height: 335px; } .header-details-user nav.notes > h6{ font-size: 17px; } .header-details-user nav.notes ul li{ list-style-type: none; margin-top: 20px; } .header-details-user nav.notes ul li span{ font-size: 14px; line-height: 18px; display: block; margin-bottom: 5px; } .header-details-user nav.notes > p.viewall{ line-height: 26px; margin-top: 30px; } /* Location */ .header-details-user .location{ margin: -15px 0; padding: 15px 15px 15px 25px; background: none; position: relative; } .header-details-user .location .slash{ color: #9BB7FA; padding: 0 5px; } .header-details-user .location > a{ padding-right: 45px; text-align: right; } .header-details-user .location > a span.contract{ color: #b3b3b3; font-size: 12px; } .header-details-user .location > a i.i-icon { position: absolute; width: 27px; height: 35px; right: 15px; background: url('common/icon.png') no-repeat -37px -431px; content: ""; display: block; top: 16px; } .header-details-user .location > a.only i.i-icon{ background-position: -73px -431px; } /* 1.2.2 Cart ----------------------------------------------------------*/ .header-details-user > ul > li.cart{ text-align: center; margin-left: 17px; text-transform: none; } .header-details-user > ul > li.cart.i-cart{ position: relative; padding-right: 40px; } .header-details-user > ul > li.cart > a:after { background: url('common/cart.png') no-repeat 0px 0px; content: ""; width: 40px; height: 38px; position: absolute; top: 4px; right: 0; } .header-details-user > ul > li.cart.c-empty{ background-position: right top; text-transform: uppercase; } .header-details-user > ul > li.cart > a{ text-decoration: none; height: 40px; background-color: #00446B; } .header-details-user .cart .count i{ font-style: normal; line-height: 10px; text-transform: none; font-weight: 400; width: 35px; display: inline-block; } .header-details-user .cart .count em{ display: block; font-weight: 400; font-size: 24px; color: #9BB7FA; font-style: normal; line-height: 26px; padding-top: 4px; } /* 1.3 Top Navigation ----------------------------------------------------------*/ .header-nav{ height: 50px; position: relative; z-index: 500; } .header-nav > .container{ background: #022C42; } .nav-container{ float: left; margin-left: -10px; } .nav-container > ul > li{ list-style-type: none; float: left; } .nav-container > ul > li > a{ line-height: 50px; color: #FFF; display: block; padding: 0 30px; text-transform: uppercase; font-weight: 600; font-size: 14px; text-decoration: none; } .nav-container > ul > li:hover > a, .nav-container > ul > li.active > a { background: #F9F8F6; color: #00446a; } .nav-container > ul > li .sub-nav{ display: none; position: absolute; width: 100%; background: #F9F8F6; left: 0; top: 50px; z-index: 999; } /* 1.4 Sub Navigation ----------------------------------------------------------*/ .sub-nav nav > h6{ padding-top: 26px; } .sub-nav nav > ul{ margin-bottom: 24px; } .sub-nav nav > ul > li{ list-style-type: none; } .sub-nav nav > ul > li a{ line-height: 27px; margin: 0 -20px; padding: 0 20px; color: #3d3c3a; display: block; font-weight: 400; } .sub-nav nav > ul.subNavList > li.hover a{ background: #9BB7FA; color: #FFF; text-decoration: none; } .sub-nav .viewall{ margin-bottom: 30px; line-height: 20px; } .subNavContent > li{ list-style-type: none; display: none; } .subNavContent > li.active{ display: block; } .ter-nav nav{ margin-bottom: 10px; } .ter-nav nav > h6{ padding: 5px 0 0 10px; } .ter-nav nav > ul{ margin-bottom: 0; } .ter-nav nav > ul > li{ float: left; width: 100%; line-height: 28px; } .ter-nav nav > ul > li a{ display: inline; padding: 0; margin: 0; } .ter-nav nav > ul > li a:focus{ background: none; color: #9BB7FA; } .ter-nav nav > ul > li a:hover{ background: none; color: #9BB7FA; } .nav-loops{ padding-bottom: 10px; } .nav-loops .viewall{ margin-bottom: 8px; line-height: 20px; } .nav-loops > h6{ padding-top: 6px; font-weight: 600; } .nav-loops > ul{ margin-bottom: 15px; } .nav-loops > ul > li{ line-height: 28px; list-style-type: none; } .nav-loops > ul > li a{ font-weight: 400; color: #3D3C3A; } .nav-loops > ul > li a:focus{ color: #9BB7FA; } .nav-loops > ul > li a:hover{ color: #9BB7FA; } .nav-loops > p{ margin-bottom: 7px; } /* 1.5 Search Box ----------------------------------------------------------*/ .header-search-box{ float: right; padding-top: 10px; margin-right: 10px; } .header-search-box fieldset{ position: relative; padding-right: 40px; z-index: 500; } .header-search-box fieldset input{ float: left; height: 30px; font-size: 16px; color: #7d7d7d; font-family: TisaOT, Georgia, Sans-Serif; line-height: 22px\0; } .header-search-box fieldset input:focus{ font-family: TisaOT-Ita, Georgia, Sans-Serif; font-style: italic\0; font-size: 14px\0; } .header-search-box fieldset input.placeholder { font-family: TisaOT, "Georgia Regular", Sans-Serif; font-size: 16px; line-height: 22px\0; } .header-search-box fieldset .icon.i-search{ position: absolute; right: 0; top: 0; width: 40px; height: 30px; background: #92BC02 url('common/icon-searchbtn.png') no-repeat center center; cursor: pointer; } /* 1.6 Fixed Menu Bar ----------------------------------------------------------*/ .header-nav-fixed{ height: 60px; background: #00446B; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; display: none; } .header-nav-fixed.normal { position: fixed; } .nav-container-fixed{ padding: 0 10px; width: 80px; float: left; } /* Fixed Navigation */ .nav-container-fixed > nav{ position: absolute; left: 0; top: 60px; background: #f9f8f6; width: 100%; display: none; padding: 40px 0 20px; } .nav-container-fixed > i{ height: 60px; display: block; cursor: pointer; position: relative; } .nav-container-fixed > i:after{ background: url('common/icon.png') no-repeat 0px -248px; content: ""; width: 26px; height: 26px; position: absolute; right: 16px; top: 16px; } .nav-container-fixed:focus > i , .nav-container-fixed.hover > i{ background-color: #FFF; } .nav-container-fixed:focus > i:after, .nav-container-fixed.hover > i:after{ background-position: 0px -284px; } .nav-container-fixed .viewall{ margin-top: 20px; } .viewall a{ color: #3D3C3A; } .viewall a:focus{ color: #9BB7FA; } .viewall a:hover{ color: #9BB7FA; } /* Fixed LOGO */ .header-nav-fixed .header-logo{ height: 60px; padding-top: 15px; float: left; } /* Fixed Cart */ .header-nav-fixed .cart{ float: right; background: #022c42; } .header-nav-fixed .cart a{ padding-right: 40px; padding-left: 15px; display: block; line-height: 60px; height: 60px; display: inline-block; margin-right: 15px; color: #FFF; font-weight: 600; font-size: 14px; text-transform: uppercase; text-decoration: none; position: relative; z-index: 10; } .header-nav-fixed .cart a:after{ background: url('common/cart.png') no-repeat 0px 0px; content: ""; width: 40px; height:38px; position: absolute; top:10px; right: 0; } .header-nav-fixed .cart .count i{ display: block; font-style: normal; line-height: 10px; text-transform: none; text-align: center; } .header-nav-fixed .cart .count em{ display: block; font-weight: 400; font-size: 24px; color: #9BB7FA; font-style: normal; line-height: 26px; padding-top: 12px; text-align: center; } /* Fixed Search Box */ .header-nav-fixed .header-search-box{ padding: 0; } .header-nav-fixed .header-search-box fieldset .icon.i-search{ width: 60px; height: 60px; position: static; } .header-nav-fixed .header-search-box fieldset{ padding-right: 0; } .header-nav-fixed .header-search-box .search-close{ width: 60px; background: #3D3C3A; display: none; height: 60px; line-height: 60px; text-align: center; color: #a8a7a6; width: 8px; overflow: hidden; text-decoration: none; } .header-nav-fixed .text-input.search{ height: 60px; position: absolute; right: 60px; width: 8px; display: none; padding: 18px 4px; } .impersonate-fixed{ background: #022C42; padding: 10px 0; margin: 0; } .impersonate-fixed span{ color: #FFF; margin: 5px 0; display: inline-block; } .impersonate-fixed .button.secondary{ padding-left: 10px; padding-right: 10px; } #endSessionModal .modal-dialog .textarea{ width: 100%; } .inhert-tips{ position: absolute; top: 38px; width: 264px; background: #ededed; padding: 30px; z-index: 105; } .inhert-tips .tip-title{ font-weight: 700; color: #595954; text-transform: none; font-size: 16px; margin-bottom: 10px; } .inhert-tips .tip-body{ font-weight: 400; color: #595954; text-transform: none; font-size: 16px; } .icon.i-help-xs{ position: relative; overflow: visible; } .icon.i-help-xs.active:after{ content: ''; top: 3px; position: absolute; border-width: 15px; border-style: solid; border-color: transparent transparent #ededed transparent; left: -7px; } .pro-items > li{ list-style-type: none; float: left; } .pro-items > li img{ max-width: 100%; } .pro-items .pro-title{ text-align: center; margin-top: 10px; } .pro-items .pro-title a{ line-height: 23px; display: inline-block; color: #3D3C3A; } .pro-items .pro-title a:focus, .pro-items .pro-title a:hover{ color: #9BB7FA; } .header-nav>.container{ position: relative; } /*Job Board modal Leeli 4/23 2015*/ /*update FG-12946(FCE-88) leonliu 3/20 2017*/ .job-board{ width: 380px; } .job-board .modal-content { padding: 13px 20px 35px; } /* .job-board .modal-header h1{ padding-bottom: 14px; } */ .job-board .select-mod{ padding-bottom: 30px; } .job-board .store-select{ padding: 26px 0 50px; } .job-board .store-select-topBorder{ border-top: 1px solid #e4e3e3; } .job-board .button-row .button{ height: 40px; background:#385cad; } .job-board .content{ background: #fff; border: 1px solid #e8e7e7; padding: 20px 25px; cursor: pointer; position: relative; border-left: 5px solid #385cad; } .job-board .content .mod-title{ color: #3d3c3a; font-size: 18px; font-weight: 600; /*padding-right: 84px;*/ word-break: break-all; } .job-board .content .gray .mod-title, .job-board .content .gray .mod-desc{ color: gray; } .job-board .other-content .mod-title{ font-weight: 600; } .job-board .other-content .mod-desc{ font-size: 13px; padding: 0px; } .job-board .content .mod-desc{ color: #3d3c3a; font-size: 14px; /*padding-right: 68px;*/ } .job-board .content .change-btn{ position: absolute; display: inline-block; font-size: 16px; right: 0px; bottom: 0px; padding-right: 18px; color: #385cad; font-weight: 700; line-height:16px; } .job-board .content .change-btn:after{ position: absolute; content: ''; display: block; width:0px; height:0px; top: 4px; right: 0px; overflow: hidden; border-top: 7px solid #385cad; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom:0px; } .job-board .content.open .change-btn{ color: #385cad; } .job-board .content.open .change-btn:after{ border-top:0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid #385cad; } .job-board .inhert-tips{ width: 100%; padding: 15px 20px; z-index: 100001; } .job-board .relative{ position: relative; } .job-board .other-content{ list-style: none; position: absolute; width: 100%; z-index: 1; border-bottom: 1px solid #e4e3e3; border-top: none; display: none; } .job-board .active .content{ background: #fff; border-top:1px solid #385cad; border-right:1px solid #385cad; border-bottom:1px solid #385cad; box-shadow: 0px 2px 5px 0px #c4c4c4; z-index:100000; } .job-board .active .other-content{ display: block; } .job-board .select-mod .acsscrollbox{ max-height: 295px; -webkit-overflow-scrolling: touch; } .job-board .store-select .acsscrollbox{ max-height: 195px; -webkit-overflow-scrolling: touch; } .job-board .other-content ul{ list-style: none; width: 100%; } .job-board .other-content li{ list-style: none; background: #fff; cursor: pointer; border-left: 5px solid #385cad; border-right: 1px solid #e4e3e3; } .job-board .other-content .list-content{ border-bottom: 1px solid #e4e3e3; padding: 10px 12px; } .job-board .other-content li.hover{ color: #595454; background: #f9f8f6; border-left:5px solid #e4e3e3; } .job-board label{ color:#3d3c3a; } .job-board .other-content .job-account-list{ border-left: 1px solid #e4e3e3; } .job-board .other-content .job-account-list .list-content{ margin-left: 15px; margin-right: 30px; padding-left: 0px; padding-right: 0px; border-bottom: none; border-top: 1px solid #e4e3e3; } .job-board .content.open .mod-title,.job-board .content.open .mod-desc{ color:#385cad; } .job-board .other-content .main-account-list .list-content{ border-top: 1px solid #e4e3e3; } .job-board .other-content .main-account-list+.job-account-list .list-content,.job-board .other-content .main-account-list+.main-account-list .list-content{ border-top: none; } .job-board .other-content .main-account-list+.job-account-list .list-content:before{ content:''; position:absolute; width:0px; height:0px; border-top:10px solid #e4e3e3; border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent; display:block; top: 0px; left:50%; margin-left:-6px; } .job-board .other-content .main-account-list+.job-account-list .list-content:after{ content:''; position:absolute; border-top:10px solid #fff; border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent; display:block; top: -1px; left:50%; margin-left:-6px; } .job-board .other-content .main-account-list.hover+.job-account-list .list-content:after{ border-top:10px solid #f9f8f6; } .job-board .other-content .list-content{ position:relative; } .job-board .other-content .main-account-list+.job-account-list .mod-title{ margin-top:10px; } .job-board .js-jobboard-cancle{ color:#385cad; position:relative; text-decoration:none; } .job-board .js-jobboard-cancle:after{ position:absolute; display: block; content:''; border-top:1px solid #385cad; width:62px; height: 0px; top: 21px; left: 50%; margin-left: -31px; } /*.job-board .content{ padding:10px 12px; }*/ .job-board .content .mod-title,.job-board .other-content .mod-title{ font-size:16px; font-weight: 700; text-transform: uppercase; word-break: keep-all; } .job-board .content .mod-desc{ padding-top:0px !important; text-transform: uppercase; word-break: keep-all; } .job-board .other-content .mod-desc{ font-size:14px; text-transform: uppercase; word-break: keep-all; } .job-board .other-content .job-account-list .mod-title{ font-size: 14px; color: #3d3c3a; } .job-board .other-content .job-account-list.hover .list-content{ margin-left:12px; } .job-board .other-content .job-account-list.hover .mod-title{ /*font-size: 16px;*/ /*padding-right:54px;*/ color: #595454; } .job-board .other-content .job-account-list.hover .mod-desc{ font-size:14px; /*padding-right:38px;*/ } .job-board .other-content .main-account-list.hover .mod-title{ font-size: 16px; /*padding-right:84px;*/ } .job-board .other-content .main-account-list.hover .mod-desc{ font-size:14px; /*padding-right:68px;*/ } .job-board .content .change-btn-section{ position: relative; height: 14px; line-height: 14px; } /*END IMPERSONATE start*/ .table-frame-activity { max-height: 217px; border: 1px solid #ddd; overflow-y:auto; } .table-bordered-activity .table-left-border-none { border-left: 0; } .table-bordered-activity { width:100%; border-spacing: 0; border-collapse: collapse; } .table-bordered>tbody>tr>th{ min-width:75px; } .table-bordered-activity>tbody>tr>td,.table-bordered-activity>tbody>tr>th, .table-bordered-activity>tfoot>tr>td, .table-bordered-activity>tfoot>tr>th, .table-bordered-activity>thead>tr>td, .table-bordered-activity>thead>tr>th { border: 1px solid #ddd; padding:8px; word-break: keep-all; } #endSessionModal .modal-dialog { width: 700px; } #msgWarningModal .modal-dialog { max-width: 350px; } #msgWarningModal .modal-dialog .wlmr-register-btn a { width: 100%; } /*END IMPERSONATE end*/ @media (max-width: 1023px) and (min-width: 0px) { .subNavContent .ter-nav .row .col-md-4 li, .subNavContent .ter-nav .row .col-md-8 li{ display: inline-flex; } .subNavContent .ter-nav .row .col-md-4 li { padding-right: 95px; } .header-details-user { margin-right: 0; } .header-search-box { margin-right: 0; } .header-nav { background-color: #022C42; } .header-nav>.container{ position: static; } .header-nav-fixed .container { width: 100%; padding-left: 0; padding-right: 0; } .nav-container-fixed { padding-left: 0; } .header-nav-fixed .header-search-box { margin-right: 0; } .nav-container-fixed > i:after { right: 22px; } .nav-container { margin-left: -20px; } .nav-container > ul > li > a { padding: 0 20px; } .text-input.search { width: 210px; } .sub-nav nav > ul > li a { margin-right: 0; } .nav-container-fixed > nav { padding-top: 20px; } .nav-loops h5 { font-size: 32px; padding: 0; margin-top: 5px; line-height: 45px; } .pro-items .viewall a { font-size: 14px; } .header-nav-fixed .text-input.search { font-size: 20px; padding-left: 20px; font-family: TisaOT, Sans-Serif; } .header-details-user .location .visible-md{ display: table-cell!important; } } @media (max-width: 767px) and (min-width: 0px) { .header-details-user { margin-right: 0; } .header-search-box { margin-right: 0; } #wrapper{ width: 100%; } #wrapper > main > .container{ padding-bottom: 60px; } .header-nav-fixed { width: 100%; } } .modal-open { overflow: hidden; } .modal { z-index: 1040; display: none; left: 0; overflow-x: auto; overflow-y: auto; position: fixed; right: 0; top: 0; bottom: 0; } .modal.upon { z-index: 1052; } .fade { opacity: 0; transition: opacity 0.15s linear 0s; } .fade.in { opacity: 1; } .modal.fade .modal-dialog { transform: translate(0px, -25%); transition: transform 0.3s ease-out 0s; } .modal.in .modal-dialog { transform: translate(0px, 0px); } .modal-dialog { margin: 10% auto 0; z-index: 1050; position: relative; } .modal.upon .modal-dialog { z-index: 1053; } .modal-content { padding: 20px 30px 35px; background-color: #FFFFFF; position: relative; outline: 0 none; border-radius: 3px; } .modal-header { position: relative; margin-bottom: 25px; } .modal-header h1 { font-size: 24px; font-weight: 700; border-bottom: 1px solid #e4e3e3; padding-bottom: 10px; color: #595454; } .modal-header .close { position: absolute; right: 0; top: -5px; color: #385cad; } .modal-body { max-height: none; overflow: visible; } .modal.modal-absolute { position: absolute; z-index: 950; } .modal .loading-mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 6px; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .modal-backdrop { background-color: #000000; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 1030; } .modal-backdrop.upon { z-index: 1051; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.fade.in { opacity: 0.7; filter: alpha(opacity=70); } #validationModal .modal-dialog { width: 730px; } #cancelModal .modal-dialog { width: 605px; } #securityCodeModal .modal-dialog { width: 700px; } #cardSecurityCodeModal .modal-dialog{ width: 540px; } #cardSecurityCodeModal .modal-dialog .modal-content{ padding: 20px 22px 35px; } #cardSecurityCodeModal .modal-header .close{ right: -10px; } #termConditions .modal-dialog{ width: 780px; } #endSessionModal .modal-dialog, #delListModal .modal-dialog, #checkDcAvilability .modal-dialog, #videoModal .modal-dialog, #retrunDocuments .modal-dialog { width: 600px; } #videoModal .modal-dialog{ max-width: 90%; } #returnInstructions .modal-dialog{ width: 840px; } #videoModal .modal-dialog .modal-body{ height: 400px; } #videoModal .modal-content{ padding: 25px; } #videoModal .i-close{ position: absolute; right: 10px; top: 10px; } #securityCodeModal .modal-dialog .modal-content{ padding: 20px 22px 35px; } #securityCodeModal .modal-header .close{ right: -10px; } /* Responsive */ @media (max-width: 1023px) and (min-width: 0px) { #termConditions .modal-dialog{ width: 640px; } } @media (max-width: 979px) { .modal-content { padding: 20px 20px 30px; } #validationModal .modal-dialog { /*width: 100%;*/ } #quickViewModal .modal-dialog { /*width:100%;*/ } } /*.loading-spinner { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; } /** 3 My List Icons **/ .myList-icons24 { display: inline-block; background: url(common/mylist-icon@24px.png) no-repeat; overflow: hidden; vertical-align: middle; } .myList-icons24.i-copy { background-position: -27px 0; width: 20px; height: 23px; } .myList-icons24.i-checkCircle, .myList-icons24.i-checkCircle.bg-green { background-position: -519px 0; width: 20px; height: 22px; } .myList-icons24.i-checkCircle.bg-green { background-position: -559px 0; } /*== modal skin */ .modal-orange .modal-content { border: 3px solid #ff9d35; border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; padding: 0; } .modal-orange .modal-header { background: #ffedda; padding: 17px 50px 17px 15px; margin-bottom: 0; } .modal-orange .modal-header .title { border-bottom: none; padding-bottom: 0; } .modal-orange .modal-header .close { top: 15px; right: 17px; } .modal-orange .modal-body { padding: 15px; } /*Purchase History Modal start*/ .modal .prod-img{ float: left; width: 78px; height: 78px; } .modal .prod-img img{ max-width:76px; max-height: 76px; } .modal .prod-desc{ margin-left: 108px; } .modal .prod-desc p{ padding-bottom: 5px; word-wrap: break-word; } .avail-list-wrap .select-head{ margin: 10px 15px; } .avail-list-wrap .select-options{ list-style: none; border: 1px solid #afb0b4; max-height: 245px; -webkit-overflow-scrolling: touch; } .avail-list-wrap .select-option{ display: block; width: 100%; margin: 0px; padding: 0.65em 1.2em; padding-right: 15px; padding-left: 15px; border-radius: 0px; background-color: transparent; box-shadow: inset 0 -1px 0 0 #afb0b4; color: #595454; text-align: left; letter-spacing: 0px; -webkit-transition: background-color 200ms ease, color 200ms ease; transition: background-color 200ms ease, color 200ms ease; cursor: pointer; } .avail-list-wrap .select-option:hover, .avail-list-wrap .select-option.selected{ background-color: #d8e8f5; color: #385cad; } .avail-list-wrap .select-options-title{ padding-right: 15px; padding-left: 15px; color: #595454; background-color: #e4e3e3; font-size: 0.8rem; line-height: 1.6; text-transform: none; } .avail-list-wrap .select-option-title{ line-height: 20px; font-size: 16px; font-weight: 700; } .avail-list-wrap .select-option-desc{ margin-top: -2px; margin-bottom: -2px; line-height: 1.6; font-size: 0.8em; } .avail-list-wrap .descriptor{ color: #b3b3b3; font-weight: 400; } .avail-list-wrap .select-option-list{ position: relative; display: block; list-style-type: none; } .avail-list-wrap .select-option-list li{ display: block; line-height: 20px; } .avail-list-wrap .sbar-cov{ width: 5px; } .avail-list-wrap .sbar-cov .sbar-bg{ width: 5px; } .avail-list-wrap .sort{ display: inline-block; position: absolute; top: -5px; width: 30px; height: 30px; background: url(common/swap_sort.png) no-repeat 0px 0px; cursor: pointer; } .avail-list-wrap .sort.asc{ background-position: -30px 0px; } .avail-list-wrap .sort.desc{ background-position: -60px 0px; } #purchaseHistoryModal{ z-index:10010; } #purchaseHistoryModal .modal-dialog{ width: 705px; margin: 10px auto; z-index: 10020; } #purchaseHistoryModal .modal-content{ margin-top: 20px; padding: 20px 0px; } #purchaseHistoryModal+.modal-backdrop{ z-index:10000; } #purchaseHistoryModal .modal-header{ margin: 0px 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 15px; } #purchaseHistoryModal .modal-header h1{ border-bottom: none; } #purchaseHistoryModal .modal-header .close{ color: #385cad; background: none; top: 0px; } #purchaseHistoryModal .modal-header .close>i:after{ content: '\E5CD'; } #purchaseHistoryModal .button-group{ margin-top: 20px; padding: 0px 20px; text-align: right; } #purchaseHistoryModal .button-group .button.mainly{ padding: .6em 1.2em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); -webkit-transition: background-color 200ms ease, color 200ms ease; transition: background-color 200ms ease, color 200ms ease; letter-spacing: 0.5px; } #purchaseHistoryModal .button-group .button.secondly{ padding: .6em 1.2em; -webkit-transition: background-color 200ms ease, color 200ms ease; transition: background-color 200ms ease, color 200ms ease; letter-spacing: 0.5px; } #purchaseHistoryModal .button-group .button.quaternary{ padding: .6em 1.2em; background-color: transparent; -webkit-transition: background-color 200ms ease, color 200ms ease; transition: background-color 200ms ease, color 200ms ease; letter-spacing: 0.5px; } #purchaseHistoryModal .button-group .button.quaternary:hover{ background-color: #c7dff3; } #purchaseHistoryModal .avail-desc{ padding: 20px; } #purchaseHistoryModal .avail-list-tab{ padding: 10px 20px; border-bottom: 1px solid #d8d8d8; } #purchaseHistoryModal .avail-tab-item{ padding: 10px 20px; color: #595454; font-size: 18px; font-weight: 400; } #purchaseHistoryModal .avail-tab-item.active{ border: 1px solid #d8d8d8; border-bottom: 1px solid #fff; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; color: #385cad; } #purchaseHistoryModal .avail-list-wrap{ padding: 0px 20px; } #purchaseHistoryModal .avail-list-wrap .select-option{ padding: 8px 15px; cursor: auto; } #purchaseHistoryModal label{ margin: 2px 0px 2px 5px; line-height: 21px; color: #595454; font-weight: 400; } #purchaseHistoryModal .text-input{ border: 1px solid #e4e2e3; border-radius: 4px; width: 75px; height: 36px; } #purchaseHistoryModal .avail-list-wrap .select-options{ max-height: 216px; min-height: 216px; } #purchaseHistoryModal .sbarContent, #purchaseHistoryModal .sbar-cov .sbar-button{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #purchaseHistoryModal .sbarContent{ min-height: 216px; } #purchaseHistoryModal .avail-list-wrap .select-option-title{ font-weight: 700; font-size: 15px; } #purchaseHistoryModal .avail-list-wrap .select-option .select-option-title{ color: #385cad; } #purchaseHistoryModal .select-option-list li{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; } #purchaseHistoryModal .select-option-list .order{ margin-right: 550px; width: 105px; } #purchaseHistoryModal .select-option-list .date{ position: absolute; top: 50%; right: 425px; margin-top: -10px; width: 100px; } #purchaseHistoryModal .select-option-list .job-name{ position: absolute; top: 50%; right: 220px; margin-top: -10px; width: 200px; } #purchaseHistoryModal .select-option-list .po-num{ position: absolute; top: 50%; right: 0px; margin-top: -10px; width: 200px; } #purchaseHistoryModal .btn-purchase{ margin: 0px 2px; padding: 0px; vertical-align: top; } #purchaseHistoryModal .btn-purchase>i{ padding: 6px; } #purchaseHistoryModal .btn-purchase>.remove:before{ content: "\E15B"; } #purchaseHistoryModal .btn-purchase>.add:before{ content: "\E145"; } #purchaseHistoryModal .purchase-qty{ vertical-align: top; text-align: center; } #purchaseHistoryModal .purchase-qty.warning{ border: 2px solid #faa419; } #purchaseHistoryModal .btn-purchase-group{ display: inline-block; } #purchaseHistoryModal .purchase-quantity{ position: relative; padding: 20px 0px; margin: 10px 20px; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; text-align: right; } #purchaseHistoryModal .purchase-label{ position: absolute; top: 26px; right: 180px; } .purchase-quantity-box{ display: inline-block; width: 165px; } .purchase-quantity-box>p{ position: relative; margin-top: 5px; padding-left: 24px; font-size: 14px; line-height: 20px; text-align: left; } .purchase-quantity-box>.warning:before{ position: absolute; left: 0px; color: #faa419; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 18px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; content: '\E000'; } #purchaseHistoryModal .load-more-option{ padding: 9px 15px; background-color: #eff3f6; } #purchaseHistoryModal .btn-load-more{ display: block; margin: 0px auto; padding: 10px 0px; border: 1px solid #c3cfdd; width: 122px; height: 36px; line-height: 16px; } #purchaseHistoryModal .error-content{ position: relative; display: block; margin: 8px; padding: 10px 24px 10px 48px; border: 2px solid #eb3c37; border-radius: 4px; line-height: 24px; background: #fadbd9; font-weight: 400; } #purchaseHistoryModal .m-icons.m-icon-cancel{ position: absolute; left: 15px; color: #ea3d37; cursor: pointer; } /*Purchase History Modal end*/ /* Order Summary ----------------------------------------------------------*/ .summary-totals{ border: 1px #bbbdc0 solid; padding: 8px 8px 20px; color: #0e1318; font-size: 14px; } .summary-totals.changed { background-color: #fbefc5; } .summary-totals .price { color: #595454; } .summary-totals .price, .summary-totals .pending { text-align: right; } /*.summary-totals .pending { font-family: ProximaNova-RegularIt, Sans-Serif; font-size: 14px; }*/ .summary-totals .btn{ text-align: center; margin-top: 20px; } .summary-totals .sub-total, .summary-totals .order-total{ padding: 10px 0; font-size: 16px; font-weight: 700; margin: 0; line-height: 1; } .summary-totals .order-total { margin: 0; } .summary-totals .sub-total .price, .summary-totals .order-total .price{ font-size: 16px; word-wrap: break-word; word-break: break-all; padding-left: 5px; } .summary-totals .block{ margin-bottom: 8px; padding: 18px 10px; background: #ededed; position: relative; } .summary-totals .block .esti-title, .summary-totals .block .price, .summary-totals .block .pending { width: 50%; line-height: 1; } .summary-totals .block .esti-title { width: 40%; } .summary-totals.changed .block { background-color: #eadfb9; } .summary-totals .block.first{ margin-top: 7px; } .summary-totals .select{ margin-top: 8px; margin-bottom: 8px; } .summary-totals .select, .summary-totals .select select, .summary-totals .button{ width: 100%; } .summary-totals .button { text-transform: capitalize; font-size: 16px; } .summary-totals .order-total span{ line-height: 17px; float: none; padding: 0; } .summary-totals span.tips{ width: 85px; } .summary-totals .table-cell{ vertical-align: middle; } .summary-help-tip { margin-left: -86px; } .summary-help-tip.popover:after { right: 39px; } .summary-totals .st-tip-msg { padding-top: 4px; /*padding-bottom: 18px;*/ font-size: 13px; text-align: center; line-height: 16px; } .summary-totals .esti-total{ font-size: 18px; font-weight: 700; margin: 0; line-height: 1; } .subtotal-select-container { padding-bottom: 7px !important; margin-top: 0 !important; } .esti-tax-container .esti-title { width: 60% !important; } .pagination-bar { padding: 22px 0; } .pagination-bar .instead-of-color { color: #385CAD; } .pagination-bar .display-desc { float: left; } .pagination-bar .display-desc .search-key { font-weight: 700; color: #3d3c3a; } .pagination-bar .pagination { float: right; } .pagination-bar + .tool-bar { margin-top: 15px; margin-bottom: 20px; } /* pagination */ .pagination .prev-icon, .pagination .arrow-text, .pagination .page-wrap, .pagination .next-icon { float: left; } .pagination .prev-icon, .pagination .arrow-text, .pagination .next-icon { /*background-color: #f8f8f8;*/ } .pagination .arrow-text { padding: 0 6px; margin-right: 10px; line-height: 20px; font-weight: 600; } .pagination a.arrow-text:focus, .pagination a.arrow-text:hover { background-color: #385CAD; color: #fff; } .pagination .next-icon, .pagination .prev-icon { display: inline-block; padding: 0 10px; height: 20px; position: relative; } .pagination .prev-icon { margin-right: 10px; } .pagination .next-icon:after, .pagination .prev-icon:after { display: inline-block; content: " "; width: 8px; height: 7px; background-image: url('common/icon.png'); background-repeat: no-repeat; position: absolute; left: 6px; top: 7px; } .pagination .next-icon:after { background-position: -128px -243px; } .pagination .prev-icon:after { background-position: -120px -243px; } .pagination a.next-icon:focus, .pagination a.prev-icon:focus, .pagination a.next-icon:hover, .pagination a.prev-icon:hover { background-color: #385cad; } .pagination a.next-icon:focus:after, .pagination a.next-icon:hover:after { background-position: -140px -240px; } .pagination a.prev-icon:focus:after, .pagination a.prev-icon:hover:after { background-position: -148px -240px; } .pagination .page-wrap { margin-right: 10px; } .pagination .page-wrap > a { color: #385CAD; padding: 0 4px; } .pagination .arrow-text, .pagination .page-wrap > a.current { color: #595454; } .pagination .page-wrap > a.current { cursor: default; } .popover{ width: 270px; padding: 20px; position: absolute; background: #ededed; } .popover:after{ content: " "; background-image: url('common/icon.png'); position: absolute; bottom: -10px; right: 125px; width: 20px; background-repeat: no-repeat; background-position: -157px -267px; height: 10px; } /* 1. Carousel 1.1 Carousel(Promo Carousel & Product Carousel) 1.2 Carousel button 1.3 Carousel pager */ /* 1. Carousel ============================================================================================*/ /* 1.1 Carousel(Promo Carousel & Product Carousel) ----------------------------------------------------------*/ .carousel-content{ position: relative; width: 100%; overflow: hidden; } .carousel-content > ul{ position: absolute; } /* 1.2 Carousel button ----------------------------------------------------------*/ .carousel-btn{ position: absolute; top: 50px; z-index: 30; width: 100%; } .carousel-btn > a{ position: absolute; display: inline-block; background-size: 70px; width: 50px; height: 60px; } .carousel-prev{ left: 15px; background-image: url('common/chevron-left-purple.png'); } .carousel-next{ right: 15px; background-image: url('common/chevron-right-purple.png'); } /*.carousel-prev:hover{ background-position: -211px -190px; } .carousel-next:hover{ background-position: -234px -190px; }*/ .carousel-prev.disabled{ cursor: default; background-image: url('common/chevron-left-grey.png'); } .carousel-next.disabled{ cursor: default; background-image: url('common/chevron-right-grey.png'); } .promo { position: relative; margin-bottom: 20px; } .promo-content { position: absolute; width: 100%; bottom: 0; left: 0; padding: 4px 10px; } .promo .video-btn{ display: block; position: relative; } .promo .video-btn:after{ content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin-top: -23px; margin-left: -23px; background: url('common/icon.png') -64px -470px no-repeat; } /* 1.5 Help Promo ----------------------------------------------------*/ .help-promo { /*background: url('common/bg-need-help.png') no-repeat right 0 #fff;*/ height: 200px; color: #00446b; padding: 15px 10px; font-size: 13px; margin-top: 20px; /*border: 1px solid #e5ecf0;*/ } .help-promo h3 { font-size: 20px; color: #385CAD; font-weight: 700; text-transform: none; } .help-promo h3:first-child { font-weight: 300; } .help-promo-content { line-height: 16px; margin-bottom: 15px; margin-top: 20px; font-weight: 300; } .help-promo h4 { font-weight: 700; color: #00446b; text-transform: uppercase; font-size: 13px; } /* 1.6 Chat Promo ---------------------------------------------------*/ .chat-promo { background: #9BB7FA; height: 220px; color: #FFFFFF; font-size: 13px; margin-top: 20px; position: relative; overflow: hidden; } .chat-promo img { width: 100%; } .chat-promo h3 { color: #FFFFFF; font-size: 20px; font-weight: 700; } .chat-promo-content { bottom: 10px; position: absolute; padding-left: 13px; padding-right: 13px; } /* 1.7 Become Member Promo --------------------------------------------------------*/ .member-promo { background: #00446b; height: 270px; width: 270px; color: #FFFFFF; margin-top: 10px; position: relative; } .member-promo h3 { color: #FFFFFF; font-weight: 700; font-size: 24px; } .member-promo-content { bottom: 0; position: absolute; padding: 15px 40px 15px 23px; background-color: #00446B; } .member-promo-content p { font-weight: 300; font-size: 18px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; } .member-promo-content a { font-weight: 600; color: #ffffff; position: relative; } .member-promo-content a:after { background: url('common/icon.png') no-repeat scroll -120px -188px rgba(0, 0, 0, 0); content: ""; height: 16px; position: absolute; right: -30px; top: 1px; width: 16px; } /* Return Promo ------------------------------------*/ .return-promo { background-color: #fff; height: 220px; margin-top: 20px; position: relative; } .return-promo-content h3 { font-size: 20px; line-height: 20px; width: 65%; margin-bottom: 5px } .return-promo-content { background-color: #fff; bottom: 30px; position: absolute; } .return-promo-content p { line-height: 13px; } .promo-1 { height: 115px; } .promo-1 img { display: block; margin-left: 14px; } .promo-1 .promo-content { padding-left: 20px; padding-right: 20px; } .promo.promo-last { margin-bottom: 0; } .promo-2 .promo-content { padding: 7px 15px; color: #FFFFFF; } .promo-3 .promo-content { color: #fff; padding: 5px 10px 7px; } @media (max-width: 1023px) and (min-width: 0px) { .member-promo { height: 337px; width: 229px; } .member-promo-content { padding: 15px 5px 30px 17px; } .promo-1 { height: 140px; } } #quickViewModal .modal-dialog { width: 840px; } .quickview-nav { position: absolute; top: 44%; height: 80px; width: 60px; } .quickview-nav:focus, .quickview-nav:hover { background-color: #9BB7FA; } #quickViewModal .quickview-nav > i { width: 22px; height: 40px; display: block; background-image: url('common/icon.png'); background-repeat: no-repeat; text-indent: -10000px; margin: 20px auto; } .quickview-nav-prev { left: -59px; } .quickview-nav-prev > i { background-position: -165px -190px; } .quickview-nav-prev:focus > i, .quickview-nav-prev:hover > i { background-position: -303px -190px; } .quickview-nav-prev.disabled > i { background-position: -257px -190px; cursor: default; } .quickview-nav-next { right: -59px; } .quickview-nav-next > i { background-position: -188px -190px; } .quickview-nav-next:focus > i, .quickview-nav-next:hover > i { background-position: -326px -190px; } .quickview-nav-next.disabled > i { background-position: -280px -190px; } .quickview-nav-prev.disabled:focus, .quickview-nav-next.disabled:focus, .quickview-nav-prev.disabled:hover, .quickview-nav-next.disabled:hover { background-color: transparent; cursor: default; } .quick-preview { display: none; width: 80px; height: 80px; text-align: center; line-height: 60px; border: 10px solid #e4e3e3; position: absolute; } .quick-preview img{ max-width: 100%; max-height: 100%; } .quick-preview:after { background: transparent; border-color: #E4E3E3 transparent transparent; border-style: solid; border-width: 10px; bottom: -30px; content: " "; height: 0; pointer-events: none; position: absolute; right: 18px; width: 0; } #quickViewModal .modal-header{ margin-bottom: 16px; } #quickViewModal .brand-logo { margin-top: 10px; } #quickViewModal .brand-logo img { max-height: 50px; max-width: 100px; } #quickViewModal .brand-logo span { line-height: 20px; padding: 15px 0; display: inline-block; } #quickViewModal .pro-img{ padding-top: 10px; } #quickViewModal .pro-img .hero-img{ height: 220px; width: 220px; line-height: 220px; text-align: center; } #quickViewModal .pro-img .hero-img img{ max-height: 100%; max-width: 100%; visibility: visible; } #quickViewModal .pro-img .hero-img .video-img{ text-align: center; line-height: 220px; position: relative; } #quickViewModal .pro-img .hero-img .video-img:before{ position: absolute; top: 50%; left: 50%; margin-top: -23.5px; margin-left: -23.5px; content: ''; background: url('common/icon.png') -63px -470px no-repeat; width: 47px; height: 47px; } #quickViewModal .pro-block { width: 240px; padding-right: 0; } #quickViewModal .des-block { width: 560px; } #quickViewModal .button-box .tipmsg{ padding-top: 10px; color: #93bb02; font-weight: 600; height: 40px; display: none; padding-left: 45px; position: relative; font-size: 16px; float: left; width: 260px; margin-right: 20px; line-height: 17px; } #quickViewModal .button-box .tipmsg:after { background: url('common/icon.png') no-repeat scroll -241px -247px rgba(0, 0, 0, 0); content: ""; height: 18px; left: 15px; position: absolute; top: 9px; width: 18px; } #quickViewModal .thumb-img { padding-top: 5px; margin-right: -10px; } #quickViewModal .thumb-img li { float: left; list-style-type: none; margin-right: 12px; margin-top: 15px; cursor: pointer; height: 34px; width: 34px; border: 1px solid #595454; overflow: hidden; } #quickViewModal .thumb-img li.active { border: 3px solid #857f7f; } #quickViewModal .thumb-img a{ display: block; width: 32px; height: 32px; margin: 0; border: 0; line-height: 0; } #quickViewModal .thumb-img .video-thumb{ display: block; position: relative; } #quickViewModal .thumb-img .video-thumb:before{ position: absolute; top: 50%; left: 50%; margin-top: -11.5px; margin-left: -11.5px; content: ''; background: url('common/icon.png') -121px -482px no-repeat; width: 23px; height: 23px; } #quickViewModal .thumb-img li img{ width: 32px; height: 32px; margin: 0; max-width: none; } #quickViewModal .thumb-img li.active a{ margin: -2px; } #quickViewModal .pro-badges { font-size: 0; padding-top: 30px; border-top: 2px solid #e2e2e2; margin-top: 30px; } #quickViewModal .pro-badges .icon { margin-right: 9px; } #quickViewModal .product-info { border-bottom: 1px solid #CCCCCC; margin-top: 0; padding-bottom: 15px; } #quickViewModal .pro-name { color: #00446A; font-weight: 700; font-size: 18px; } #quickViewModal .pro-id { padding-top: 0; padding-bottom: 15px; border-bottom: 1px solid #e4e3e3; } #quickViewModal .pro-id .customer-code { color: #92bc02; } #quickViewModal .color-selecter { margin-top: 0; border-bottom: 0; } #quickViewModal .select-label { color: #00446A; font-weight: 700; padding: 15px 0 7px; text-transform: uppercase; } #quickViewModal .color-list { font-size: 0; margin-bottom: 0px; margin-right: -30px; } #quickViewModal .color-selecter .ps-error a { border: 1px solid #ff0000; } #quickViewModal .color-selecter a { border: 1px solid #857F7F; display: inline-block; height: 23px; margin-bottom: 15px; margin-right: 20px; float: left; width: 45px; overflow: hidden; } #quickViewModal .color-selecter a.active { border-width: 3px; } #quickViewModal .color-selecter a img { width: 45px; height: 23px; margin: -1px; vertical-align: top; max-width: none; } #quickViewModal .color-selecter a.active img { margin: -3px; } #quickViewModal .pro-description { margin-bottom: 20px; max-height: 115px; overflow: hidden; } #quickViewModal .pro-description .bd { /* max-height: 98px; max-height: 95px\9; overflow-y: hidden; */ text-overflow: ellipsis; } #quickViewModal .pro-description.mutiple { border-top: 0; margin-bottom: 15px; max-height: 100px; overflow: hidden; text-overflow: ellipsis; margin-top: 5px; } #quickViewModal .pro-description.mutiple li { float: left; width: 40%; } #quickViewModal .pro-description .name { color: #00446A; font-weight: 700; line-height: 1; text-transform: uppercase; padding-top: 15px; margin-bottom: 13px; } #quickViewModal .pro-description li { list-style-position: inherit; list-style-type: circle; margin-left: 18px; margin-top: 0px; line-height: 1.5; } #quickViewModal .total-qty { border-bottom: none; padding: 18px 20px 20px 0; } #quickViewModal .total-qty .available { color: #FAA519; } #quickViewModal .total-qty .text-input { border-color: #857F7F; margin-right: 20px; text-align: center; width: 60px; padding-left: 0; padding-right: 0; } #quickViewModal .total-qty .text-input.combo-input { width: 60px; margin-right: 20px; } #quickViewModal .total-qty .name { color: #00446A; font-weight: 700; line-height: 1; margin-bottom: 5px; text-transform: uppercase; } #quickViewModal .total-price { margin: 10px 0 5px; padding: 0; } #quickViewModal .total-content { margin-top: 0; } #quickViewModal .total-content .total-disabled { padding: 10px; background: #feedd3; color: #fba51c; font-weight: 600; text-align: center; margin-top: 10px; } #quickViewModal .total-content .tipmsg { color: #93BB02; display: none; font-weight: 600; height: 45px; line-height: 18px; margin: 5px 0 20px; padding-left: 30px; padding-top: 10px; position: relative; } #quickViewModal .total-content .tipmsg:after { background: url('common/icon.png') no-repeat scroll -241px -247px rgba(0, 0, 0, 0); content: ""; height: 18px; left: 0px; position: absolute; top: 9px; width: 18px; } #quickViewModal .total-content .total-price-combo { padding-top: 15px; padding-bottom: 18px; } #quickViewModal .total-content .total-price-combo .price-is-for { display: block; font-size: 13px; } #quickViewModal .total-content .points-info { display: inline-block; font-size: 18px; font-weight: 400; color: #faa51b; margin-top: 8px; } #quickViewModal .total-content .points-circle { display: inline-block; width: 31px; height: 31px; line-height: 31px; text-align: center; background: url('common/point-bg.png') no-repeat center center; color: #fff; font-weight: 700; letter-spacing: 1px; } #quickViewModal .total-button .button { font-size: 18px !important; height: 45px; margin-bottom: 20px; } #quickViewModal .sku-container { margin-top: 20px; border-bottom: 1px #E4E3E3 solid; /*padding-bottom: 15px;*/ } #quickViewModal .sku-container li { list-style-type: none; } #quickViewModal .sku-container li.sku-header { background: #e4e3e3; font-weight: 700; overflow: hidden; line-height: 35px; } #quickViewModal .st-left { float: left; width: 65%; padding: 0 10px; } #quickViewModal .st-right { float: right; width: 30%; text-align: right; padding-right: 16px; } #quickViewModal .sku-header .st-left .sku-price { float: right; position: relative; cursor: pointer; } #quickViewModal .st-left .sku-price .range-up { height: 7px; width: 12px; display: inline-block; background-image: url('common/icon.png'); background-repeat: no-repeat; content: ""; margin-left: 10px; margin-bottom: 3px; background-position: -180px -279px; } #quickViewModal .st-left .sku-price .range-down { height: 7px; width: 12px; display: inline-block; background-image: url('common/icon.png'); background-repeat: no-repeat; content: ""; margin-left: 10px; margin-bottom: 3px; background-position: -193px -279px; } #quickViewModal .sku-list { background: #f8f8f8; } #quickViewModal .sku-list.signle-row { background: #FFF; } #quickViewModal .sku-list.open { background: #f9f8f6; border-top: 1px #dededc solid; border-bottom: 1px #dededc solid; margin-top: -1px; } #quickViewModal .sku-list.open .sku-title .st-arrow i { background-position: -193px -266px; } #quickViewModal .sku-list-inner { max-height: 320px; } #quickViewModal .range-up { height: 7px; width: 12px; display: inline-block; background-image: url('common/icon.png'); background-repeat: no-repeat; content: ""; margin-left: 10px; margin-bottom: 3px; background-position: -180px -279px; } #quickViewModal .sku-list .sku-title { overflow: hidden; line-height: 38px; } #quickViewModal .sku-list .sku-title .st-arrow a{ font-size: 15px; padding-right: 20px; margin-right: -20px; position: relative; } #quickViewModal .sku-list .sku-title .st-arrow i { height: 7px; width: 12px; display: inline-block; background-image: url('common/icon.png'); background-repeat: no-repeat; content: ""; margin-left: 8px; background-position: -180px -266px; } #quickViewModal .sku-list.open .sku-title .st-arrow i { background-position: -193px -266px; } #quickViewModal .sku-list .st-left { padding-top: 2px; padding-bottom: 1px; } #quickViewModal .sku-list .st-left .sku-price { float: right; position: relative; font-size: 22px; font-weight: 700; padding-top: 5px; } #quickViewModal .sku-list .st-left .sku-price .decimal { font-size: 14px; padding-left: 2px; display: inline-block; vertical-align: top; line-height: 14px; margin-top: 8px; } #quickViewModal .sku-list .st-left .sku-price i { font-weight: 400; font-size: 16px; font-style: normal; margin-left: 5px; } #quickViewModal .sku-list .st-right { padding-top: 10px; } #quickViewModal .sku-name a { font-size: 18px; } #quickViewModal .sku-list .sku-id { line-height: 1; padding-bottom: 9px; font-size: 14px; } #quickViewModal .sku-list .sku-id span { color: #92bc02; } #quickViewModal .sku-list .sku-name{ line-height: 1; padding-top: 10px; } #quickViewModal .sku-list .sku-extend { padding-bottom: 18px; display: tabel-row; } #quickViewModal .sku-extend .as-head { font-weight: 700; font-size: 16px; } #quickViewModal .sku-extend .as-body { margin-top: -5px; font-size: 15px; line-height: 16px; } #quickViewModal .sku-extend .as-body > p { margin-top: 12px; } #quickViewModal .sku-list.open .sku-extend { display: block; margin-top: 16px; } #quickViewModal .sku-extend .se-left{ display: table-cell; width: 270px; padding: 0 15px; border-right: 1px #cdcdcd solid; vertical-align: top; } #quickViewModal .sku-extend .se-right{ display: table-cell; padding: 0 20px; margin-top: 15px; width: 270px; } #quickViewModal .sku-extend .se-right .button-box { margin: 0; padding: 0; } #quickViewModal .sku-extend .se-right .button-box .button { margin-bottom: 0; width: 100%; margin-top: 10px; height: 45px; } #quickViewModal .sku-extend .se-right > span{ display: inline-block; margin-right: 5px; line-height: 1; text-transform: uppercase; color: #00446A; font-weight: 700; vertical-align: middle; } #quickViewModal .sku-extend .se-right .text-input { width: 65px; } #quickViewModal .available-store { line-height: 16px; } #quickViewModal .available-store a { font-size: 15px; } #quickViewModal .available-store span { color: #92bc02; font-size: 18px; font-weight: 600; } #quickViewModal .available-store span.gray{ color: #b2b2b2; } #quickViewModal .sku-extend .available-store { margin-top: 0; } #quickViewModal .se-right .points-info span{ color: #faa51b; } #quickViewModal .se-right .points-info .points-circle{ display: inline-block; height: 21px; width: 21px; line-height: 21px; text-align: center; background: url('common/icon.png') no-repeat -300px -274px;; color: #fff; font-weight: 700; } #quickViewModal .se-right .points-info{ margin: 7px 0; font-size: 13px; font-weight: 400; display: inline-block; margin-right: -100px; } #quickViewModal .se-right .note-txt.error { color: #ed1c22; font-weight: 600; position: relative; font-size: 16px; float: left; } #quickViewModal .se-right .note-txt.success { color: #93bb02; font-weight: 600; position: relative; font-size: 16px; float: left; } #quickViewModal .total-qty.error{ margin: 10px 0 10px -10px; padding: 10px; border: 0; background: #fde6e7; } #quickViewModal .total-qty.error .text-input { border-color: red; color: red; } #quickViewModal .check-dc{ padding: 0px 0 0px; margin-bottom: -5px; line-height: 1; } #quickViewModal .check-dc .inline-error{ margin: 0; } #quickViewModal .size-selector .select{ display: block; } .popover-tool-tip{ margin-top: 30px; padding: 7px; border: 1px solid #d0e693; background-color: #ffffcc; width: auto; line-height: 1; font-size: 14px; font-weight: 600; z-index: 1041; max-width: 200px; } .popover-add-to-wishlist, .popover-add-to-cart{ width: 240px; z-index: 1041; margin-top: 20px; } .popover-add-to-wishlist:after, .popover-add-to-cart:after { right: 188px; } .popover-tool-tip:after{ right: 230px; display: none; } #quickViewModal .sub-includes-box { margin-top: 20px; } .sub-includes-box .si-title { margin-bottom: 20px; font-weight: 700; color: #03324c; } .sub-includes-box .si-list { list-style: none; } .sub-includes-box .si-list .si-item { padding-bottom: 12px; } #quickViewModal .si-item .si-item-img { float: left; width: 20%; } #quickViewModal .si-item .si-item-detail { float: left; width: 80%; padding-left: 18px; padding-right: 10px; } .si-item .si-item-img img { width: 100%; border: 1px solid #645f5f; } .si-item-detail .si-item-title { line-height: 1.1; } .si-item-detail .si-item-sku { line-height: 1.4; } .si-item-detail .si-item-sku .customer-code { color: #92bc02; } #quickViewModal .price-view-type .select { width: 100%; height: 34px; } #quickViewModal .total-content .total-price .price-info { display: table-cell; cursor: pointer; margin-top: 0; margin-bottom: -4px; padding-right: 15px; word-break: break-all; position: relative; } #quickViewModal .total-content .total-price .price-info-per { display: inline; vertical-align: text-bottom; margin: 10px 5px 6px; font-size: 16px; font-style: initial; font-weight: 400; } #quickViewModal .total-content .total-price .js-price-switch+.price-info-per { display: table-cell; vertical-align: middle; } #quickViewModal .total-content .total-price { word-break: break-word; } #quickViewModal .total-content .total-price.no-arrow .price-info { cursor: default; } #quickViewModal .total-content .total-price .price-info .price-box { line-height: inherit; } #quickViewModal .total-content .total-price i { font-size: 16px; font-style: initial; font-weight: 400; white-space: nowrap; display: inline-block; } #quickViewModal .total-content .total-price .price-info .price-box span { display: inline-block; vertical-align: top; padding-top: 12px; padding-right: 5px; font-size: 18px; } #quickViewModal span.decimal { font-size: 14px; padding-left: 2px; display: inline-block; vertical-align: top; line-height: 14px; font-weight: bold; } #quickViewModal .total-content .total-price .price-view-type { margin-bottom: -2px; margin-top: 0; height: 34px; } #quickViewModal .price-view-type .select .select-el, #quickViewModal .price-view-type .select .sim-select, #quickViewModal .price-view-type .select .sim-head { height: 34px; } #quickViewModal .price-view-type .select .sim-select .current { height: 34px; line-height: 32px; } #quickViewModal .price-view-type .select .sim-select .sim-head:before { height: 24px; } #quickViewModal .price-view-type .select .sim-arrow { top: 14px; } #quickViewModal .sku-container .price-view-type { width: 65%; margin-top: -34px; margin-left: -4px; height: 34px; } #quickViewModal .sku-container .price-view-type .select { width: 65%; height: 34px; margin-left: 35%; } #quickViewModal .total-content .total-price .points-circle { display: inline-block; width: 31px; height: 31px; line-height: 31px; text-align: center; background: url('common/point-bg.png') no-repeat center center; color: #fff; font-weight: 700; } #quickViewModal .total-content .total-price .points-info { padding: 7px 0; font-size: 18px; font-weight: 400; letter-spacing: 1px; color: #faa51b; } #quickViewModal .total-content .total-price .price-info:after { display: inline-block; margin-left: 5px; height: 7px; width: 12px; background-image: url('common/icon.png'); background-repeat: no-repeat; background-position: -180px -279px; vertical-align: middle; content: ""; top: 50%; right: 0px; margin-top: -1px; position: absolute; } #quickViewModal .total-content .total-price.no-arrow .price-info:after { display: none; } #quickViewModal .total-content .total-price{ padding-bottom: 11px; } @media (max-width: 1023px) and (min-width: 0px) { #quickViewModal .modal-dialog { width: 640px; } #quickViewModal .pro-block { width: 165px; } #quickViewModal .des-block { width: 455px; } #quickViewModal .pro-img .hero-img { width: 155px; } #quickViewModal .modal-header { margin-bottom: 10px; } #quickViewModal .thumb-img li { margin-right: 8px; } #quickViewModal .thumb-img { margin-right: -8px; } #quickViewModal .button-box .button { width: 200px; } #quickViewModal .button-box .tipmsg { width: 200px; } .popover-add-to-wishlist:after { right: 120px; } #quickViewModal .sku-list .sku-list-inner { overflow-y: scroll; overflow-x: hidden; } #quickViewModal .sku-list .sku-list-inner::-webkit-scrollbar { width: 3px; } #quickViewModal .sku-list .sku-list-inner::-webkit-scrollbar-thumb { background: rgba(111, 111, 111, 0.8); } #quickViewModal .sku-list .sku-list-inner::-webkit-scrollbar-thumb:window-inactive { background: rgba(111, 111, 111, 0.4); } #quickViewModal .total-qty { padding-right: 0; } #quickViewModal .sku-extend .se-left{ width: 211px; } #quickViewModal .sku-extend .se-right{ width: 224px; } #quickViewModal .sku-extend .se-right span.visible-md{ display: inline-block!important; } #quickViewModal .sku-list .sku-title .st-arrow a{ display: inline-block; width: 86px; vertical-align: middle; line-height: 16px; } #quickViewModal .sku-list .sku-title .st-arrow i{ vertical-align: middle; } #quickViewModal .line-alone { margin-top: 30px; } } .dis-scroll { position: relative; } .sbar-cov { position:absolute; right: 0; width: 10px; z-index: 130; } .sbar-cov .sbar-bg { position: absolute; width: 10px; } .sbar-cov .sbar-button{ position: relative; background: #857f7f; border-left: 1px solid #d0cdcc; border-right: 1px solid #d0cdcc; } /** * typeahead css style * */ .header-nav-fixed .type-ahead { right: 120px; top: 60px; } .header-nav .type-ahead { top: 30px; left: 0; } .type-ahead { position: absolute; padding-bottom: 20px; background-color: #fff; display: none; } .type-ahead .ta-result-list, .type-ahead .ta-product-list, .type-ahead .ta-video-list { list-style: none; width: 100%; } .type-ahead .ta-product-list, .type-ahead .ta-article-box, .type-ahead .ta-video-box { border-top: 1px solid #dedddb; } .type-ahead .ta-product-list { margin-top: 10px; padding: 0 20px; } .type-ahead .ta-result-list .ta-result-item { padding: 6px 0 6px 10px; } .type-ahead .ta-result-list .ta-result-item.hover { /*background-color: #36BAE1;*/ } .type-ahead .ta-result-list .ta-result-item.hover > a { /*color: #fff;*/ text-decoration: underline; color: #385cad; } .type-ahead .ta-result-list a { display: block; font-weight: 400; color: #595554; } .type-ahead .ta-result-list a>b{ font-weight: 700; } .type-ahead img{ max-width: 100%; max-height: 100%; } .ta-product-list .ta-product-item { width: 100%; display: table; margin-top: 20px; } .ta-product-list .ta-product-item .left-img-cell, .ta-product-list .ta-product-item .right-name-cell { display: table-cell; vertical-align: middle; } .ta-product-list .ta-product-item .left-img-cell { width: 60px; } .ta-product-list .ta-product-item .left-img-cell a{ display: block; text-align: center; line-height: 60px; height: 60px; width: 60px; } .ta-product-list .ta-product-item .right-name-cell { padding-left: 20px; padding-right: 20px; line-height: 1.2; } .ta-product-list .ta-product-item .right-name-cell .name { height: 40px; overflow: hidden; } .ta-product-list .ta-product-item .right-name-cell .name a{ color: #565759; font-weight: 700; } .type-ahead .ta-article-box { margin-top: 20px; padding: 0 20px; } .ta-article-box .taa-title, .ta-video-box .tav-title { padding-top: 20px; padding-bottom: 5px; line-height: 1; font-weight: 700; font-size: 18px; text-transform: uppercase; } .ta-article-box .ta-article-list { padding-left: 20px; padding-top: 5px; list-style-type: disc; } .ta-article-list .ta-article-item { margin-bottom: 15px; line-height: 1.2; } .ta-article-list .ta-article-item a{ color: #565759; font-weight: 700; } .ta-article-list .ta-article-item .imgbox{ display: block; height:60px; width: 60px; text-align: center; } .type-ahead .ta-video-box { margin: 15px 0; padding: 0 20px; } .ta-video-list .ta-video-item { float: left; width: 50%; padding-right: 10px; } .ta-video-list .ta-video-item .imgbox{ display: block; height: 80px; line-height: 80px; width: 80px; text-align: center; } .ta-video-list .ta-video-item .video-name { padding-top: 7px; line-height: 1.2; } .ta-video-list .ta-video-item .video-name a{ color: #565759; font-weight: 700; } @media (max-width: 1023px) and (min-width: 0px) { .ta-product-list .ta-product-item .right-name-cell { padding-left: 10px; padding-right: 0; } .ta-product-list .ta-product-item .left-img-cell { width: 40%; } .ta-product-list .ta-product-item .right-name-cell a, .ta-article-list .ta-article-item a, .ta-video-list .ta-video-item a { font-size: 13px; } .ta-video-list .ta-video-item { padding-right: 5px; } } /* Wish list*/ #wishListModal .modal-content { width: 662px; padding: 20px 20px 35px; } #wishListModal .modal-header .close { right: -10px; } #wishListModal .modal-dialog { width: 700px; } #wishListModal.confirm .modal-dialog { width: 540px; } #wishListModal .wishlist-inner { margin-top: 30px; } #wishListModal .wishlist-inner .inline-error{ margin-bottom: 5px; } #wishListModal .h-line { border-top: 1px solid #e3e3e3; margin-bottom: 10px; margin-top: 40px; } #wishListModal .line-text { background-color: #FFFFFF; color: #03324C; display: block; font-weight: 700; font-size: 16px; margin: 0 auto; padding-left: 5px; padding-right: 5px; position: relative; text-align: center; top: -10px; width: 40px; } #wishListModal .pro-name { color: #00446A; font-weight: 700; font-size: 20px; line-height: 0.95 } #wishListModal .pro-id { padding-top: 5px; margin-bottom: 10px; } #wishListModal .total-qty .name{ color: #00446A; font-weight: 700; line-height: 1; vertical-align: middle; } #wishListModal .total-qty .qty-label{ width: 50px; display: inline-block; padding-left: 10px; vertical-align: middle; } #wishListModal .pro-id .customer-code { color: #92bc02; } #wishListModal .form-actions { margin-top: 73px; } #wishListModal .form-actions .button.primary { margin-bottom: 10px; font-size: 16px; } #wishListModal .form-actions .button { width: 300px; height: 40px; line-height: 30px; } #wishListModal .pro-img{ margin-top: -10px; margin-left: -10px; padding-top: 20px; padding-bottom: 45px; } #wishListModal .pro-img .hero-img { padding: 0; height: 160px; width: 220px; margin: 0 auto; text-align: center; } #wishListModal .hero-img img { max-width: 100%; max-height: 100%; visibility: visible; } .wishlist-inner-login { padding-top: 10px; } .wishlist-inner-login .form-group { padding-left: 0; } .wishlist-inner-login .wlm-register-box { margin-left: 25px; padding: 30px 25px; background-color: #9BB7FA; } .wishlist-inner input[name='qty'] { padding-left: 0; padding-right: 0; } .wlm-register-box .wlmr-title { font-weight: 700; font-size: 20px; color: #fff; } .wlm-register-box .wlmr-cont { padding: 15px 0; text-align: center; color: #fff; line-height: 1.5; } .wlm-register-box .wlmr-register-btn { padding-top: 14px; } .wlm-register-box .wlmr-register-btn .button { width: 100%; font-weight: 700; color: #fff; text-transform: uppercase; height: 45px; padding-top: 10px; font-size: 18px; } .wlm-register-box .wlmr-register-btn .button:focus, .wlm-register-box .wlmr-register-btn .button:hover { background: #D8E8F5; color: #00415C; } @media (max-width: 1023px) and (min-width: 0px) { #wishListModal .modal-dialog { width: 640px; } .wishlist-inner-login .wlm-register-box { text-align: center; } } /*.zoomPad{ position:relative; float:left; z-index:102; cursor:crosshair; width: 100%; } .zoomPreload{ -moz-opacity:0.8; opacity: 0.8; filter: alpha(opacity = 80); color: #333; font-size: 12px; font-family: Tahoma, Sans-Serif; text-decoration: none; border: 1px solid #CCC; background-color: white; padding: 8px; text-align:center; background-image: url('common/zoomloader.gif'); background-repeat: no-repeat; background-position: 43px 30px; z-index:110; width:110px; height:60px; position:absolute; top:0px; left:0px; * width:100px; * height:49px; } .zoomPup{ overflow:hidden; background-color: #9BB7FA; -moz-opacity:0.66; opacity: 0.66; filter: alpha(opacity = 66); z-index:120; position:absolute; z-index:101; cursor:crosshair; } .zoomOverlay{ position:absolute; left:0px; top:0px; background:#FFF; z-index:5000; width:100%; height:100%; display:none; z-index:101; } .zoomWindow{ position:absolute; left:110%; top:40px; background:#FFF; z-index:6000; height:auto; z-index:10000; z-index:110; } .zoomWrapper{ position:relative; border:1px solid #3d3c3a; z-index:110; } .zoomWrapperTitle{ display:block; background:#999; color:#FFF; height:18px; line-height:18px; width:100%; overflow:hidden; text-align:center; font-size:10px; position:absolute; top:0px; left:0px; z-index:120; -moz-opacity:0.6; opacity: 0.6; filter: alpha(opacity = 60); } .zoomWrapperImage{ display:block; position:relative; overflow:hidden; z-index:110; } .zoomWrapperImage img{ border:0px; display:block; position:absolute; z-index:101; max-width: none; } .zoomIframe{ z-index: -1; filter:alpha(opacity=0); -moz-opacity: 0.80; opacity: 0.80; position:absolute; display:block; }*/ /********************************************************* / When clicking on thumbs jqzoom will add the class / "zoomThumbActive" on the anchor selected /*********************************************************/ *{ margin: 0; padding: 0; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight: normal; } html{ font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow:hidden; overflow-y:auto; } body{ font-family: var(--font-primary); font-weight: 400; background: #fff; color: #595454; font-size: 16px; overflow:hidden; overflow-y:auto; } fieldset, abbr, acronym{ border: 0; } caption, th{ text-align: left; } iframe{ border: none; } img{ border: 0; vertical-align: middle; max-width: 100%; } main, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{ display: block; } audio, canvas, video{ display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]), [hidden], hide{ display: none; } strong, b{ font-weight: 700; } #wrapper{ border-top: 0px; } #wrapper > header{ margin-top: 0px; background-color: #735d41; } #wrapper.marketing{ border-top: 0px; } #wrapper.marketing > header{ margin-top: 0px; } #wrapper > main > .container { position: relative; background: #ffffff; min-height: 320px; padding-bottom: 100px; } @media (max-width: 1023px) and (min-width: 0px) { #wrapper { border-top: 0; } #wrapper > header { border-top: none; margin-top: 0; background-color: #735d41; } #wrapper > main > .container { padding-bottom: 60px; } } /** vector 2x icon **/ @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .icon.i-pdfdown { background-size: 35px 27px; background-position: 0 0; background-image: url('common/print_icon@2x.png'); } .header-details-user > ul > li.cart > a:after { background-image: url('common/cart@2x.png'); background-position: 0 0; background-size: 40px 38px; content: ""; width: 40px; height: 38px; position: absolute; top: 4px; right: 0; } .header-nav-fixed .cart a:after{ background-image: url('common/cart@2x.png'); background-position: 0 0; background-size: 40px 38px; content: ""; width: 40px; height: 38px; position: absolute; top: 10px; right: 0; } } /*ipad style*/ @media screen and (max-device-width : 1024px){ .job-board .select-mod .acsscrollbox{ max-height: 390px; -webkit-overflow-scrolling: touch; overflow:scroll; margin-right:-8px; } .job-board .store-select .acsscrollbox{ max-height: 215px; -webkit-overflow-scrolling: touch; overflow:scroll; margin-right:-8px; } .job-board .other-content ul{ list-style: none; width: 98%; } } /*LTL message*/ .ltl-msg{font-weight: 400;font-size:14px;color:#595454;} .ltl-msg-link{font-weight: 700;font-size:13px;color:#9BB7FA;} .text-nowrap{white-space:nowrap;} .sign-up-link{font-weight: 400;} .price-shipping{background: #ededed;padding:0px;margin:0px;} .price-shipping .ps-top{padding:0px 10px;} .price-shipping .ps-bot{padding:10px 10px 0px;} /*check store modal start*/ #checkStores{ z-index:10010; } #checkStores .modal-dialog{ z-index: 10020; } #checkStores+.modal-backdrop{ z-index:10000; } #checkStores .modal-header{ margin-bottom: 5px; } #checkStores .modal-header h1{ border-bottom: none; } #checkStores .title-link{ color: #0292e5; font-size: 16px; text-transform: none; font-weight: 700; display: inline-block; margin: 0px 10px; } #checkStores .modal-header .close{ color: #385cad; background: url('common/new-close-icon.png') no-repeat; background-size:25px 25px; top: 0px; } #checkStores .prod-img{ float: left; width: 78px; height: 78px; margin-left: 10px; margin-right: 10px; border: 1px solid #979797; } #checkStores .prod-img img{ max-width:76px; max-height: 76px; } #checkStores .prod-desc{ margin-left: 108px; } #checkStores .prod-desc p{ padding: 10px 0px; word-wrap: break-word; } #checkStores .avail-list-box { border-top: 0px; padding-top: 0px; } #checkStores .avail-list-box .sbar-cov,#checkStores .avail-list-box .sbar-cov .sbar-bg{ width: 16px; } #checkStores .avail-list-wrap .local-list,#checkStores .everywhere-list{ max-height: 445px; } #checkStores .avail-list-wrap .local-list li,#checkStores .everywhere-list li{ border-top:2px solid #f1f1f1; border-bottom:2px solid #f1f1f1; } #checkStores .avail-list-wrap .local-list li+li,#checkStores .everywhere-list li+li{ border-top:0px; } #checkStores .local-list li .in-stock .count,#checkStores .everywhere-list li .in-stock .count{ font-weight: 700; font-size: 16px; color: #3d3c3a; } #checkStores .local-list li .in-stock .count.zero-cont,#checkStores .everywhere-list li .in-stock .count.zero-cont{ color: #b3b3b3; } #checkStores .local-list li .current-store{ width: 29%; display: inline-block; font-size:16px; font-weight: 700; text-align:center; width: 160px; color: #595454; } #checkStores .local-list li .current-store span{ color: #595454; } #checkStores .local-list li .store-desc .store-name{ color: #0292e5; } .button.fifthly{ font-weight: 400; background: #385cad; text-align: center; color: #f6f6f6; height: 37px; } #checkStores .button.fifthly{ font-size: 14px; height: 40px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 160px; } #checkStores .local-list li .store-desc,#checkStores .local-list li .make-store-btn, #checkStores .local-list li .in-stock,#checkStores .local-list li .current-store, #checkStores .everywhere-list li .store-desc,#checkStores .everywhere-list li .in-stock{ vertical-align: middle; } #checkStores .local-list li .store-desc .store-addr1, #checkStores .local-list li .store-desc .store-addr2 { margin-top: 2px; font-size: 14px; } #checkStores .everywhere-list li{ padding: 17px 18px 17px; } #checkStores .everywhere-list li.odd-item { background-color: #fff; } #checkStores .everywhere-list li .in-stock,#checkStores .local-list li .in-stock{ text-align: right; } #checkStores .local-list li .in-stock .count{ margin-right: 35px; } #checkStores .everywhere-list li .in-stock .count{ margin-right: 15px; } /*check store modal end*/ /*header quick link start*/ .quicklink-section{background-color: #022c42;margin-bottom: 10px;} .quicklink-container:before,.quicklink-container:after { content: " "; display: table; } .quicklink-container:after{ clear: both; } .quicklink-section > .quicklink-container{ max-width: 980px; margin: 0 auto; } .quicklink-section > .quicklink-container > .quicklink-list{ float: right; list-style: none; } .quicklink-section > .quicklink-container > .quicklink-list > .quicklink-item{ display: inline-block; float: left; margin-left: 35px; } .quicklink-link { padding: 10px 15px; -webkit-transition: background-color 200ms ease; transition: background-color 200ms ease; color: #fff; font-size: 11px; display: block; font-weight: 400; } .quicklink-link:hover { text-decoration: underline; } .header-container{ height: 50px; margin: 10px auto 6px; max-width: 980px; } .header-container:before,.header-container:after { content: " "; display: table; } .header-container:after{ clear: both; } .header-container .header-logo img{ max-width: 100%; } .header-container .header-search-box{ float: left; margin-left: 10px; margin-right: 0px; padding: 7px 0px; position: relative; z-index: 600; } .header-container .header-search-box.guest{width:465px;} .header-container .header-search-box.logged-in{width:485px;} .header-container .header-logo{ width: 176px; height: auto; padding:0px; line-height: 50px; margin-right: 10px; margin-left: 10px; } .header-container .header-logo>a{ display:block; } .header-container .header-search-box fieldset input.text-input{ width: 100%; height: 36px; border-radius: 3px 0px 0px 3px; font-weight: 400; color: #999; } .header-container .header-search-box fieldset .icon.i-search{ height: 36px; border-radius: 0px 3px 3px 0px; background: #92BC02 url('common/search-icon.png') no-repeat center center; } .header-container .header-details-user{ margin: 0px; right: -10px; } .header-container .header-details-user .header-login{ margin:0px; list-style: none; } .header-container .header-details-user .header-login>a{padding: 0px 10px;line-height: 50px;font-weight: 400;} .header-container .header-details-user .cart>a{padding: 0px 10px;line-height: 50px;font-weight: 400;} .header-container .header-details-user .header-login>a:hover, .header-container .header-details-user .cart>a:hover{ background-color: #022c42; color:#FFF; } .header-container .header-details-user .header-login.hover>a:hover{ background-color: #FFF; color: #00446b; } .header-container .type-ahead{top:36px;left: 0px;} .header-container .header-details-user > ul > li{ margin: 0px; } .header-container .header-details-user > ul > li.cart.i-cart{ position: relative; padding-right: 0px; } .header-container .header-details-user > ul > li.cart > a:before { background-image: none; content: ""; display: table; clear: both; } .header-container .header-details-user > ul > li.cart > a:after { background-image: none; content: ""; display: table; clear: both; } .header-container .header-details-user .cart .count{line-height: 50px;text-transform: uppercase;font-size: 14px;} .header-container .header-details-user .cart .count .cart-icon{ display: block; float: left; background: url('common/new-cart.png') no-repeat 0px 0px; width: 30px; height: 30px; margin: 10px 7px 10px 0px; } .header-nav-fixed .cart a:after{ background: none; } .header-nav-fixed .cart .count .cart-icon{ display: block; float: left; background: url('common/new-cart.png') no-repeat 0px 0px; width: 30px; height: 30px; margin: 15px 7px 15px 0px; } .header-nav-fixed .cart a{ padding: 0px 15px; margin: 0px; } .header-container .header-login .nav-login{ display: none; position: absolute; right: 0px; top: 50px; background: #fff; z-index: 502; } .header-container .header-details-user .myacct > a{ line-height: 50px; display: inline-block; text-transform: uppercase; padding: 0px 10px 0px 50px; height: 50px; position: relative; font-weight: 400; } .header-container .header-details-user .myacct > a i.i-icon{ width: 30px; height: 30px; top: 10px; left: 10px; position: absolute; background: url('common/account.png') no-repeat 0px 0px; } .header-container .header-details-user .myacct.hover>a{ background-color:#022c42; color:#FFF; } .header-container .header-details-user .myacct.hover> a i.i-icon{ background-color:#022c42; } .header-container .header-details-user .nav-myacct{ position: absolute; top: 50px; } .header-container .header-details-user .myacct > a i.account-alert{ position: absolute; width: 13px; height: 13px; top: 10px; background-color: #00446b; left: 32px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; } .header-container .header-details-user .myacct > a i.account-alert:after{ position: absolute; width: 7px; height: 7px; top: 3px; background-color: #faa519; left: 3px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; content:''; } .quicklink-section > .quicklink-container > .job-board-list{ float:left; list-style: none; margin: 0px 20px; cursor:pointer; } .quicklink-section > .quicklink-container > .job-board-list >li{ display:inline-block; float:left; } .quicklink-section > .quicklink-container > .job-board-list li.job-logo{ max-width: 25px; width: 25px; } .quicklink-section > .quicklink-container > .job-board-list >li img{ height:20px; margin: 7px 5px 7px 0px; } .quicklink-section > .quicklink-container > .job-board-list >li span{ font-size:11px; color:#fff; line-height: 35px; font-weight: 400; } .quicklink-section > .quicklink-container > .job-board-list >li span.store{ display:block; opacity:0.6; } .quicklink-section > .quicklink-container > .job-board-list >li span.contract{ opacity:0.6; text-transform:uppercase; } .header-container + .header-nav > .container{ background: #03324c; } .header-container + .header-nav > .container .nav-container > ul > li > a{ padding: 0px 20px; font-weight: 400; } .header-container + .header-nav > .container .nav-container > ul > li> a:hover{ background-color:#022c42; color:#FFF; } .hopscotch-bubble{z-index: 900 !important;} @media (min-width: 0px) and (max-width: 1023px) { .header-container{ max-width: 728px; padding: 0px; margin: 0px auto; } .header-container .header-search-box, .header-container .header-search-box.guest, .header-container .header-search-box.logged-in{ width: 306px; } .header-container .header-details-user .cart .count .cart-title{ display:none; } /*.header-nav-fixed .cart .count .cart-title{ display:none; }*/ .header-container + .header-nav{ background: #03324c; } .quicklink-section > .quicklink-container > .job-board-list li.job-logo{ max-width: 30px; width: 30px; } .quicklink-section > .quicklink-container > .job-board-list >li img{ height:20px; margin-left:10px; } .header-container .header-details-user .cart>a { padding: 0px 5px; } .header-container .header-logo{ /*margin-left: 0px;*/ } .quicklink-section > .quicklink-container > .job-board-list{ margin: 0px 10px; } .quicklink-section+ .header-container{ /*margin: 10px auto 6px;*/ } } /*header quick link end*/ /*tour slide start*/ .button.mainly{ font-weight: 700; text-align: center; font-size: 16px; background-color: #385CAD; padding: .75em 1.2em .65em; border-radius: 3px; color: #fff; line-height: 1.2em; cursor: pointer; } .button.mainly:hover{background-color: #9BB7FA;} .button.mainly:active{background-color: #9BB7FA;} .button.mainly:disabled,.button.mainly[disabled]{background-color: #b3b3b3;} .button.secondly{ font-weight: 700; text-align: center; font-size: 16px; background-color: #d8e8f5; padding: .75em 1.2em .65em; border-radius: 3px; color: #385CAD; line-height: 1.2em; cursor: pointer; } .button.secondly:hover{background-color: #9BB7FA;} .button.secondly:active{background-color: #9BB7FA;} .button.secondly:disabled,.button.secondly[disabled]{background-color: #e2e2e2;color: #b3b3b3;} .tour-slide-container{ position: relative; border: 1px solid #E4E3E3; overflow: hidden; margin-bottom: 20px; transition: height 500ms; height: 150px; } .tour-slide-container .tour-slide{ padding: 20px; width: 100%; height: 100%; position: absolute; left: 0; transition: left 300ms; } .tour-slide-container .tour-slide.tour-slide-bg{ background-image:url('common/mylist-illustration-combo-background.png'); background-position: 50% 100%; background-size: 100%; background-repeat: no-repeat; } .tour-slide-container .tour-slide .tour-slide-content{ width: 50%; float: left; } .tour-slide-container .tour-slide .tour-slide-content .tour-info-section{ position: absolute; top:50%; right: 20px; margin-top: -30px; width: 329px; } .tour-slide-container .tour-slide .tour-slide-content .tour-title{ text-transform: none; font-size: 24px; line-height: 30px; margin-bottom: 10px; } .tour-slide-container .tour-slide .tour-slide-content .tour-description{ } .tour-slide-container .tour-slide .tour-slide-content .tour-image{ width: 269px; height: 269px; margin-left: 30px; margin-right: 0px; max-width: 100%; } .tour-slide-container .tour-button-group{ position: absolute; right: 20px; bottom: 20px; } .tour-slide-container .tour-button-group .button{ display: block; float: left; margin-left: 10px; min-width: 87px; } .tour-slide-container .tour-button-group .slide-previous{ background-color: transparent; } .tour-slide-container .tour-button-group .slide-previous:hover{background-color: #d8e8f5;} .tour-slide-container .tour-button-group .slide-previous:active{background-color: #bbd8f0;} .tour-slide-container .tour-slide.slide-1{ left: 0; transition: left 300ms,opacity 300ms; height: 150px; } .tour-slide-container .tour-slide.slide-2{ left: 100%; transition: left 300ms,opacity 300ms; height: 298px; padding: 15px 20px; } .tour-slide-container .tour-slide.slide-3{ left: 200%; transition: left 300ms,opacity 300ms; height: 298px; } .tour-slide-container .tour-slide.slide-4{ left: 300%; transition: left 300ms,opacity 300ms; height: 298px; } .tour-slide-container .tour-slide.slide-5{ left: 400%; transition: left 300ms,opacity 300ms; height: 298px; } .tour-again-section{ background-image: url('common/mylist-illustration-combo-background.png'); background-position: 50% 100%; background-size: 350px; height: 50px; margin-top: 19px; border: 1px solid #e4e3e3; text-align: center; } .tour-again-section a{ display: block; height: 50px; color: #385cad; line-height: 50px; } a.active-blue{ color: #385cad; } .button.active-blue{ font-weight: 700; text-align: center; font-size: 16px; background-color: #FFF; padding: .75em 1.2em .65em; border-radius: 3px; color: #385cad; line-height: 1.2em; cursor: pointer; } @media (min-width: 0px) and (max-width: 1024px) { .tour-slide-container .tour-slide .tour-slide-content .tour-image{ margin: 0px; width: 100%; } .tour-slide-container .tour-slide .tour-slide-content .tour-info-section{ width: 240px; } } /*tour slide end*/ .none-cursor{ cursor: default !important; } /* flip error start */ .flip-error-container{ width: 100%; background-color: #ffffff; border: 3px solid #faa519; border-radius: 3px; box-shadow: 0 17px 35px -14px rgba(39, 26, 5, .3); color: #333; font-weight: 400; font-size: 13px; z-index: 501; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-background-clip: padding; /* for Mozilla browsers*/ -webkit-background-clip: padding; /* Webkit */ background-clip: padding-box; /* browsers with full support */ } .flip-error-container .flip-error-title{ margin: 0px; padding: 17px 50px 17px 15px; background-color: rgba(250, 165, 25, .2); color: #333; font-size: 18px; line-height: 19px; font-weight: 700; } .flip-error-container .flip-error-content{ margin: 5px 15px 0px; padding: 8px 0px 0px; font-size: 16px; line-height: 1.4em; font-weight: 400; } .flip-error-container .flip-error-bottom{ margin: 15px; text-align: right; } .flip-error-container a,.flip-error-container .button.mainly{ font-weight: 700; } /* flip error end */ /* Style for the maintenance message on the cart page start */ .site-maintenance-message{ border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(250, 165, 25); border-right-color: rgb(250, 165, 25); border-bottom-color: rgb(250, 165, 25); border-left-color: rgb(250, 165, 25); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; color: rgb(51, 51, 51); font-weight: 400; font-size: 13px; z-index: 700; box-sizing: content-box; background-clip: padding-box; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .site-maintenance-container{ position: relative; overflow-x: hidden; overflow-y: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: left; -webkit-font-smoothing: antialiased; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-weight: normal; } .site-maintenance-title{ background-color: rgba(250, 165, 25, 0.2); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 17px; padding-right: 50px; padding-bottom: 17px; padding-left: 15px; font-weight: 700; color: rgb(51, 51, 51); font-size: 18px; line-height: 19px; font-weight: 400; text-transform: none; box-sizing: content-box; display: block; -webkit-margin-start: 0px; -webkit-margin-end: 0px; text-align: left; -webkit-font-smoothing: antialiased; } .site-maintenance-content{ margin-top: 5px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; padding-top: 8px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; line-height: 1.4em; font-weight: 400; } /* Style for the maintenance message on the cart page end */ .jobBoard-branch-locked{ border-left: 5px solid #e4e3e3 !important; } .jobBoard-branch-locked-text{ color: rgb(250, 165, 25); font-weight: bold; font-size: 15px; } /*adadasdasdasdasdasd*/ /*code for global cart product detail with qty start*/ .cart-list > ul > li{ list-style-type: none; padding-top: 38px; padding-bottom: 38px; } .cl-image{ float: left; width: 100px; height: 100px; text-align: center; } .cl-image img{ max-height: 100%; max-width: 100%; } .cl-summary{ margin-left: 160px; } .cl-info .cl-name a{ font-size: 18px; line-height: 18px; display: inline-block; } .cl-info .error-txtbox > p + p, .cl-info > p + p{ margin-top: 2px; } .clp-left{ float: left; text-align: left; } .clp-left .cl-badges{ padding-bottom: 5px; } .clp-left .cl-badges > i{ float: left; margin-right: 10px; } .cl-price{ padding-top: 8px; padding-bottom: 5px; } .price-container{ display: inline-block; text-align: left; } .cl-price .quantity, .cl-price .total-price{ font-weight: 700; font-size: 16px; color: #3d3c3a; float: left; } .cl-price .per-price{ margin-top: 4px; color: #595454; } .cl-price .per-price span.unit{ font-weight: 400; vertical-align: middle; } .cl-price .quantity{ width: 175px; text-align: left; margin-left: 30px; } .cl-price .quantity span{ font-weight: 400; padding-right: 4px; } .cl-price .quantity button.disabled { cursor: pointer; color: #bbbdc0; } .cl-price .qty-box{ width: 60px; padding-left: 0; padding-right: 0; text-align: center; border-color: #ccced0; height: 30px; color: #595454; font-weight: 700; border-radius: 3px; } .cl-price .quantity button{ padding: 5px 12px; border: 1px solid #ccced0; border-radius: 3px; background: transparent; font-family: Arial; font-weight: bold; color: #385cad; cursor: pointer; } .cl-price .extend{ margin-left: 40px; margin-right: -75px; padding-top: 6px; font-size: 13px; line-height: 16px; } .cl-price .extend > p{ line-height: 15px; } .cl-price .extend p.error{ padding: 3px 0 5px; margin-right: -50px; } .cl-price .total-price{ min-width: 120px; text-align: right; margin-top: 4px; } /*code for global cart product detail with qty end*/ /*for ie10 button not the same big PW-1011 start*/ #endSessionModal .button.tertiary.short{ height: 30px \9\0; } /*for ie10 button not the same big PW-1011 end*/ @media (max-width: 767px) { .breadcrumb { margin-top: 50px !important; } .header-nav-fixed .type-ahead{ max-height: 300px; overflow-y: auto; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; /* margin-left: auto; margin-right: auto;*/ } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*==Product Carousel ( Recently view, Recommendation)*/ .prod-carousel { border-top: 1px solid #d8d8d8; padding: 30px 0; position: relative; } .prod-carousel .arrows { position: absolute; right: 0; top: 30px; } .prod-carousel .arrows button { width: 0; height: 0; border: 6px solid transparent; background: transparent; vertical-align: middle; } .prod-carousel .arrows button:not(.slick-disabled) { cursor: pointer; } .prod-carousel .arrows .arrow-prev { border-right-color: #385cad; margin-right: 5px; } .prod-carousel .arrows .arrow-prev.slick-disabled { border-right-color: #bbbdc0; } .prod-carousel .arrows .arrow-next { border-left-color: #385cad; margin-left: 5px; } .prod-carousel .arrows .arrow-next.slick-disabled { border-left-color: #bbbdc0; } .prod-carousel .title { font-size: 20px; font-weight: 600; color: #0e1318; } .prod-carousel .items { margin-left: -15px; margin-right: -15px; padding-top: 25px; } .prod-carousel .items .item { padding-left: 15px; padding-right: 15px; outline: none; } .prod-carousel .prd-title { margin-top: 15px; height: 65px; line-height: 1.1; } .prod-carousel .prd-title p { color: #1f3361; font-weight: 700; font-size: 18px; } .prod-carousel .img-box { width: 160px; height: 160px; line-height: 160px; text-align: center; } .prod-carousel .item-badges { height: 20px; margin-bottom: 15px; } .prod-carousel .starting-at { min-height: 19px; } .prod-carousel .prd-price { font-weight: 700; color: #3d3c3a; font-size: 22px; } .prod-carousel .prd-price .decimal { font-size: 14px; padding-left: 2px; display: inline-block; vertical-align: top; line-height: 14px; font-weight: bold; } .prod-carousel .available { font-style: italic; color: #0e1318; font-size: 13px; min-height: 15px; } .prod-carousel .button { width: 100%; height: 35px; font-size: 16px; text-transform: none; } .prod-carousel .rec-item .prd-title p { color: #385cad; font-size: 16px; line-height: 18px; font-weight: 400; } .prod-carousel .rec-item .prd-price { font-size: 16px; } .prod-carousel .arrows-lg button { position: absolute; top: 42%; z-index: 2; background-color: transparent; border: none; color: #385cad } .prod-carousel .arrows-lg button.slick-disabled { color: #bbbdc0; } .prod-carousel .arrows-lg button.arrow-prev { left: -25px; } .prod-carousel .arrows-lg button.arrow-next { right: -25px; } @media ( max-width: 767px ) { .prod-carousel .items { margin-left: 0; margin-right: 0; padding-left: 50px; padding-right: 50px; } } .prod-carousel .arrows-lg .material-icons { font-size: 100px; } .panel { border: 1px solid #d9d9d9; } .panel .panel-header { background: #d9d9d9; font-weight: 700; padding: 12px 22px; color: #3d3c3a; } .panel-orange { border: none; } .panel-orange .panel-header { background: #eec829; color: #fff; font-size: 18px; } .panel-orange .panel-body { background: #f5f5f5; } .panel-orange ul { list-style : none; padding: 12px 50px 30px; } .panel-orange li { width: 50%; margin-top: 8px; float: left; font-weight: 700; font-size: 18px; } .panel-orange a { font-weight: 700; color: #385cad; text-decoration: underline; } /*code for popup of plp sort start*/ .plp-sort-modal .modal-dialog{ margin-top: 0px !important; height: 100%; } .plp-sort-modal .modal-dialog .modal-content{ border-radius: 0; padding-left: 0; padding-right: 0; height: 100%; } .plp-sort-modal .modal-dialog .modal-content .modal-header{ padding-left: 20px; padding-right: 20px; border-bottom: 2px solid #e4e3e3; margin-bottom: 0; } .plp-sort-modal .modal-dialog .modal-content .modal-header h1{ color: #0C0F12; text-transform: capitalize; border-bottom: none; } .plp-sort-modal .modal-dialog .modal-content .modal-header .close{ right: 20px; background: none; color: #385CAD; top: 0; width: 27px; height: 27px; } .plp-sort-modal .modal-dialog .modal-content .modal-header .close > i{ font-size: 28px; } .plp-sort-modal .modal-body .plp-sort-select ul{ list-style: none; } .plp-sort-modal .modal-body .plp-sort-select ul li{ padding: 13px 20px; } .plp-sort-modal .modal-body .plp-sort-select ul li a{ color: #3d3c3a; font-weight: 400; } .plp-sort-modal .modal-body .plp-sort-select ul li a > i{ vertical-align: middle; margin-left: 15px; } .plp-sort-modal .modal-body .plp-sort-select ul li:hover, .plp-sort-modal .modal-body .plp-sort-select ul li:active, .plp-sort-modal .modal-body .plp-sort-select ul li.active { background: #7591d2; } .plp-sort-modal .modal-body .plp-sort-select ul li:hover a, .plp-sort-modal .modal-body .plp-sort-select ul li:active a, .plp-sort-modal .modal-body .plp-sort-select ul li.active a { font-weight: normal; color: #ffffff; } /*code for popup of plp sort end*/ /*code for popup of plp filter start*/ .plp-filter-modal .modal-dialog{ margin-top: 0 !important; height: 100%; background: #ffffff; } .plp-filter-modal .modal-dialog .modal-content{ border-radius: 0; padding-left: 0; padding-right: 0; } .plp-filter-modal .modal-dialog .modal-content .modal-header{ padding-left: 20px; padding-right: 20px; border-bottom: 2px solid #e4e3e3; margin-bottom: 10px; } .plp-filter-modal .modal-dialog .modal-content .modal-body .refinements > .refine-item{ padding-left: 20px; padding-right: 20px; background: #fff; } .plp-filter-modal .modal-dialog .modal-content .modal-header h1{ color: #0C0F12; text-transform: capitalize; border-bottom: none; } .plp-filter-modal .modal-dialog .modal-content .modal-header .close{ right: 20px; background: none; color: #385CAD; top: 0; width: 27px; height: 27px; } .plp-filter-modal .modal-dialog .modal-content .modal-header .close > i{ font-size: 28px; } .plp-filter-modal .modal-dialog .refine-item .select-cont span.close:before{ background: none; } .plp-filter-modal .modal-dialog .refine-item .select-cont span.close > i{ top: -2px; left: -22px; position: absolute; color: #385CAD; } .plp-filter-modal .modal-dialog .refine-item .select-cont span.close > i:hover{ cursor: pointer; } .plp-filter-modal .modal-dialog .refine-item .select-button-box > a { color: #385CAD; } .plp-filter-modal .modal-dialog .refine-item.ri-close .ri-title{ background-color: #3d3c3a; color: #ffffff; padding: 12px 35px 12px 20px; } .plp-filter-modal .modal-dialog .ri-close p.refine-showmore{ display: none !important; } .plp-filter-modal .modal-dialog .refine-item .ri-cont label.fchecked + span.filter-item{ font-weight: 600; color: #0C0F12; } .plp-filter-modal .modal-dialog .refine-item .ri-cont.select-cont{ background-color: #ffffff; } .plp-filter-modal .modal-dialog .refine-item .ri-cont.select-cont li{ padding: 5px 0; } .plp-filter-modal .modal-dialog .refine-item .ri-cont.select-cont a{ margin-left: 10px; } .plp-filter-modal .modal-dialog .refine-item .refine-showmore{ background-color: #EDEDED; padding: 0 0 20px 20px; } .plp-filter-modal .modal-dialog .refine-item a.show-more{ color: #385CAD; } .plp-filter-modal .modal-dialog .show-more-results{ margin-top: 20px; padding: 15px 20px; text-align: center; background: #1f3361; } .plp-filter-modal .modal-dialog .show-more-results > a{ width: 100%; line-height: 36px; } /*code for popup of plp filter end*/ /* 1.Breadcrumb /* 1. Breadcrumb ============================================================================================*/ .breadcrumb { width: 100%; margin: 20px 10px 0; } .breadcrumb:after{ content: " "; display: table; clear: both; } .breadcrumb li{ list-style-type: none; float: left; font-size: 13px; color: #535252; font-weight: 400; margin-right: 10px; text-transform: capitalize; } .breadcrumb li span, .breadcrumb li a{ font-size: 13px; color: #385CAD; font-weight: 400; text-decoration: none; } .breadcrumb li.disabled span, .breadcrumb li.disabled a { cursor: default; color: #535252; } .breadcrumb li .prop-title:after, .breadcrumb li a:not(.last-clickable):after{ content: ">"; padding-left: 10px; color: #535252; } .breadcrumb li span.prev:after, .breadcrumb li a.prev:after{ content: ""; padding-left: 0; } .breadcrumb li span.prev:before, .breadcrumb li a.prev:before{ content: "<"; padding-right: 10px; } @media (max-width: 1023px) and (min-width: 0px) { .breadcrumb { margin-left: 0; } } @media (max-width: 767px) { .breadcrumb { margin-top: 50px; } } /*==Alert Success*/ .alert-success > .container { border: 2px solid #1abc81; border-radius: 3px; background-color: #d5f2e8; position: relative; padding: 20px 15px; max-width: 980px; } .alert-success .close { position: absolute; right: 20px; top: 10px; } .alert-success .i-checkCircle { margin-right: 15px; } .alert-success.fixed { position: fixed; left: 0; top: 20px; right: 0; display: block; margin-right: auto; margin-left: auto; /*opacity: 0;*/ z-index: 1000; /*margin-top: -70px;*/ } .m-icons.m-icon-info-outline:before{ content: '\e88f'; } #purchaseHistoryModal .inhert-tips{ position: absolute; display: block; top: -95px; left: 36px; padding: 4px 18px; border-radius: 5px; width: 240px; height: 85px; background-color: #595454; color: #fff; } #purchaseHistoryModal .inhert-tips:before{ position: absolute; left: 50%; bottom: -10px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #595454 transparent transparent transparent; content: ''; } #purchaseHistoryModal .inhert-tips .tip-title{ color: #fff; } #purchaseHistoryModal .inhert-tips .tip-body{ color: #fff; line-height: 1.5em; font-size: 16px; font-weight: 400; text-align: center; } #purchaseHistoryModal .m-icon-info-outline{ position: relative; top: 3px; left: 10px; border-radius: 100px; background-color: #fff; color: #1c88c7; font-size: 18px; } .quicklink-list .quicklink-link { font-weight: 600; } .summary-totals .sub-total .table-cell { font-weight: 700; }