BigCommerce-Template-Guide-Appendix-1
/* @override http://hdblz.mybigcommerce.com/templates/__custom/Styles/custom.css / / Zach */
/* UniForm ------------------------------------------------------------ */ div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span { background-image: url(../../Munchen/images/munchen/icon_sprite.png); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; } .selector, .radio, .checker, .uploader, .button, .selector *, .radio *, .checker *, .uploader , .button * { margin: 0; padding: 0; } / INPUT & TEXTAREA / input.text, input.email, input.password, textarea.uniform { color: #444440; font-size: 11px; font-weight: normal; font-style: italic; padding: 3px; border-top: solid 1px #aaa; border-left: solid 1px #aaa; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; outline: 0; } input.text:focus, input.email:focus, input.password:focus, textarea.uniform:focus { -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); border-color: #999; } / SPRITES / / Select / div.selector, div.selector span { line-height: 25px; height: 25px; } div.selector select { / change these to adjust positioning of select element / top: 0px; left: 0px; } / Checkbox / div.checker { height: 18px; width: 16px; } div.checker input { height: 18px; width: 16px; } div.checker span { background-position: 0px -55px; height: 18px; width: 16px; } div.checker span.checked, div.checker:active span.checked, div.checker.active span.checked, div.checker.focus span.checked, div.checker:hover span.checked { background-position: -22px -55px; } div.checker.disabled span, div.checker.disabled:active span, div.checker.disabled.active span { } div.checker.disabled span.checked, div.checker.disabled:active span.checked, div.checker.disabled.active span.checked { } / Radio / div.radio { width: 18px; height: 18px; background: none; } div.radio input { width: 18px; height: 18px; } div.radio span { height: 16px; width: 16px; background-position: 0px -82px; } div.radio span.checked, div.radio:active span.checked, div.radio.active span.checked, div.radio.focus span.checked, div.radio:hover span.checked { background-position: -22px -82px; } / Uploader / div.uploader { background-position: 0px -297px; height: 28px; } div.uploader span.action { background-position: right -409px; height: 24px; line-height: 24px; } div.uploader span.filename { height: 24px; / change this line to adjust positioning of filename area / margin: 2px 0px 2px 2px; line-height: 24px; } div.uploader.focus, div.uploader.hover, div.uploader:hover { background-position: 0px -353px; } div.uploader.focus span.action, div.uploader.hover span.action, div.uploader:hover span.action { background-position: right -437px; } div.uploader.active span.action, div.uploader:active span.action { background-position: right -465px; } div.uploader.focus.active span.action, div.uploader:focus.active span.action, div.uploader.focus:active span.action, div.uploader:focus:active span.action { background-position: right -493px; } div.uploader.disabled { background-position: 0px -325px; } div.uploader.disabled span.action { background-position: right -381px; } div.button { background-position: 0px -523px; } div.button span { background-position: right -643px; } div.button.focus, div.button:focus, div.button:hover, div.button.hover { background-position: 0px -553px; } div.button.focus span, div.button:focus span, div.button:hover span, div.button.hover span { background-position: right -673px; } div.button.active, div.button:active { background-position: 0px -583px; } div.button.active span, div.button:active span { background-position: right -703px; color: #555; } div.button.disabled, div.button:disabled { background-position: 0px -613px; } div.button.disabled span, div.button:disabled span { background-position: right -733px; color: #bbb; cursor: default; } / PRESENTATION / / Button / div.button { height: 30px; } div.button span { margin-left: 13px; height: 22px; padding-top: 8px; font-weight: bold; font-size: 12px; text-transform: uppercase; padding-left: 2px; padding-right: 15px; } / Select / div.selector { width: 200px; color: #444440; font-size: 14px; background: #ffffff url(../../Munchen/images/munchen/icon_arrow_down.png) no-repeat right center !important; border: 1px solid #ccc; height: 28px; line-height: 28px; min-height: 28px !important; margin: 0; padding: 3px 0 !important; } div.selector select { color: #444440; font-size: 12px; line-height: 18px; border: solid 1px #fff; width: 100%; } div.selector span { padding: 5px 25px 5px 10px !important; cursor: pointer; background: none; line-height: 20px; } div.selector.disabled span { color: #bbb; } / Checker / div.checker { margin-right: 5px; } / Radio / div.radio { margin-right: 3px; } / Uploader / div.uploader { width: 300px; cursor: pointer; } div.uploader span.action { width: 85px; text-align: center; text-shadow: #fff 0px 1px 0px; background-color: #fff; font-size: 11px; font-weight: bold; } div.uploader span.filename { color: #777; width: 82px; border-right: solid 1px #bbb; font-size: 11px; width: 175px; } div.uploader input { width: 190px; } div.uploader.disabled span.action { color: #aaa; } div.uploader.disabled span.filename { border-color: #ddd; color: #aaa; } / CORE FUNCTIONALITY Not advised to edit stuff below this line
*/ .selector, .checker, .button, .radio, .uploader { display: -moz-inline-box; display: inline-block; vertical-align: middle; zoom: 1; display: inline; } .selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus { outline: 0; } / Button / div.button a, div.button button, div.button input { position: absolute; } div.button { cursor: pointer; position: relative; } div.button span { display: -moz-inline-box; display: inline-block; line-height: 1; text-align: center; } / Select */ div.selector { float: none; position: relative; display: inline-block; *display: inline; zoom: 1;
} div.selector span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; } div.selector select { position: absolute; opacity: 0; filter: alpha(opacity=0); /* use '=' here, not ':' / -moz-opacity: 0; height: 36px; border: none; background: none; } / Checker / div.checker { position: relative; } div.checker span { display: -moz-inline-box; display: inline-block; text-align: center; } div.checker input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; display: inline-block; background: none; } / Radio / div.radio { position: relative; } div.radio span { display: -moz-inline-box; display: inline-block; text-align: center; } div.radio input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; text-align: center; display: inline-block; background: none; } / Uploader */ div.uploader { position: relative; overflow: hidden; cursor: default; margin-bottom: 10px; } div.uploader span.action { float: left; display: inline; padding: 2px 10px; width: auto; overflow: hidden; cursor: pointer; } div.uploader span.filename { padding: 0px 10px; float: left; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; } div.uploader input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; float: right; height: 25px; border: none; cursor: default; width: 175px !important; }
.ProductList .pname, .brand-name{ float: left; width: auto; margin: 0; padding-right: 10px; color: #1f1f1c; font-size: 13px; } .ProductList .pname:hover, .brand-name:hover { color: #f9ac39; } .brand-name{ padding: 5px 0 5px 4%; text-align: left; min-height: 30px;
}
.ProductList .pname{ margin-bottom: 0; }
.ProductList .p-name a, .fastCartBottom .ProductList .ProductDetails a{ color: #1f1f1c; }
.ProductList .p-name a:hover, .brand-name:hover, .fastCartBottom .ProductList .ProductDetails a:hover{ color: #f9ac39; }
.CompareButton .btn { background-color: #333; } .CompareButton .btn:hover { background-color: #f9ac39; }
#CheckoutStepPaymentDetails input[type=submit] { margin: 0 20px; } #CheckoutStepPaymentDetails input[type=submit]:hover { background-color: #1f1f1c; }
#Container .ProductList li .ProductActionAdd .icon-Add.To,
#Container .ProductList li .ProductActionAdd .icon-Choose.Options,
#ModalContainer .ProductList li .ProductActionAdd .icon-Add.To,
#ModalContainer .ProductList li .ProductActionAdd .icon-Choose.Options {
float: left;
height: 36px !important;
margin: 0!important;
background: #f9ac39 url(../../Munchen/images/munchen/viewOpt.png) no-repeat 10px 50% !important;
line-height: 36px;
padding: 0 10px 0 35px !important;
color: #fff;
font-weight: 500;
-moz-transition: background-color 100ms ease;
-webkit-transition: background-color 100ms ease;
-o-transition: background-color 100ms ease;
transition: background-color 100ms ease;
}
.ProductList li .ProductActionAdd .icon-Add.To {
background: #f9ac39 url(../../Munchen/images/munchen/addCart.png) no-repeat 10px 50% !important;
padding-left: 40px !important;
}
#Container .ProductList li .ProductActionAdd .icon-Add.To:hover, #Container .ProductList li .ProductActionAdd .icon-Choose.Options:hover{ background-color: #333 !important; -moz-transition: background-color 100ms ease; -webkit-transition: background-color 100ms ease; -o-transition: background-color 100ms ease; transition: background-color 100ms ease; }
#Container .btn-addto, #ModalContainer .btn-addto { color: #f9ac39; height: 35px; cursor: pointer; border: none; border: solid 0px; padding-right: 20px; font-size: 14px; font-weight: bold; /background:transparent url(../../Munchen/images/munchen/wish.png) no-repeat 100% 50%;/ background: none; -moz-transition: background-color 100ms ease; -webkit-transition: background-color 100ms ease; -o-transition: background-color 100ms ease; transition: background-color 100ms ease; } .btn-addto:hover { color: #1F1F1C; } .AddToWishlistLink { color: #f9ac39; }
.ProductList .p-price{ float: left; padding: 6px 0 0 0; font-size: 13px; font-weight: bold; clear: both; }
.right{ float: right; }
.txt24{ font-size: 24px!important; } .txt24 em{ font-style: normal !important; }
.txt17-bold{ font-size: 17px; font-weight: 700; margin-bottom: 0; }
.txt-bold{ font-weight: 700!important; }
.txt-black{ color: #1f1f1c!important; }
.p-relative{ position: relative; }
.p-absolute{ position: absolute; left: 50px; bottom: 33%; }
#Container .icon, #Container .icon-add{ float: left; width: 15px; height: 18px; /background: url(../../Munchen/images/munchen/icon_sprite.png) no-repeat 0 -24px;/ background: none; }
.icon-add{ position: absolute; right: 0; top: 9px; width: 35px; height: 35px; background-position: 0 -107px; }
.icon-delete, .icon-edit, .icon-share, #WishLists .txt-hide a{ float: left; width: 18px; height: 21px; margin-right: 10px; background: url(../../Munchen/images/munchen/icons_off.png) no-repeat -170px -152px; }
.icon-delete:hover, .icon-edit:hover, .icon-share:hover, #WishLists .txt-hide a:hover, #WishLists .txt-hide .icon-delete:hover, #WishLists .txt-hide .icon-edit:hover{ background: url(../../Munchen/images/munchen/icons_on.png) no-repeat -170px -152px; }
.icon-edit, .icon-edit:hover, #WishLists .txt-hide .icon-edit, #WishLists .txt-hide .icon-edit:hover{ background-position: -140px -152px; }
.icon-delete, .icon-delete:hover, #WishLists .txt-hide .icon-delete, #WishLists .txt-hide .icon-delete:hover{ background-position: -108px -152px; }
.c-wrap{ width: 980px; margin: 0 auto; display: block; clear: both; } .sub-title{ display: block; clear: both; padding: 1em 0; font-size:16px; margin-bottom: 0px; }
.txt-center{ text-align: center!important; }
.txt-left{ text-align: left!important; }
.sub-title1{ display: block; margin: 15px 0; background: url(../../Munchen/images/munchen/bg_heading_small.png) no-repeat 10px center; }
.sub-title1.l1{ margin: 8px 0; }
.sub-title1 .bul{ margin: 0 10px; padding: 0 30px 5px 30px; background: url(../../Munchen/images/munchen/bg_heading_small.png) no-repeat right center; }
.Content h3.fline {
padding: 10px 0 !important;
font-size: 16px !important;
}
.Content h3.fline span {
padding: 0 30px 0 0 !important;
display: inline-block;
*display: inline;
zoom: 1;
}
small{ font-size: 12px!important; }
strong, b{ font-weight: 600; color: #1f1f1c; }
ul{ margin: 0 0 20px 30px; list-style-image: url(../../Munchen/images/munchen/bullet.png); }
ul ul ul{ list-style-image: url(../../Munchen/images/munchen/bullet_line.png); }
ul li{ padding: 2px 0; }
.multiStep,
.multiStep li {
list-style-type: none;
margin: 0;
padding: 0;
list-style-image: none;
}
.multiStep {
text-align: center;
border-bottom: 1px solid #F1F1F1;
position: relative;
min-height: 1px;
zoom: 1;
}
.multiStep li {
color: #e3e1e1;
font-size: 16px;
font-weight: bold;
margin: 0 20px;
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
padding: 20px 0;
}
.multiStep li a {
color: #e3e1e1;
}
.multiStep li .icon {
background: url("../../Munchen/images/munchen/nav_active.png") no-repeat;
display: block;
float: left;
height: 8px;
left: 50%;
margin-left: -7px;
position: absolute;
bottom: -5px;
width: 13px;
}
.multiStep li.ActivePage, .multiStep li.ActivePage a {
color: #f9ac39;
}
.multiStep li.Completed, .multiStep li.Completed a { color: #1f1f1c; } .li-list { border-bottom: 1px solid #DEDEDE; padding: 20px 0; } .li-list h4 { position: relative; z-index: 1; } .li-list form { position: relative; z-index: 10; }
.icon, .icon-add { background: url("../../Munchen/images/munchen/icon_sprite.png") no-repeat scroll 0 -24px transparent; float: left; height: 18px; width: 15px; }
.icon-add {
background: #f9ac39 url("../../Munchen/images/munchen/add.png") no-repeat scroll 50% 50%;
float: left;
height: 36px;
margin: 0 !important;
padding: 0 !important;
transition: background-color 100ms ease 0s;
width: 36px;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
-moz-transition: background-color 100ms ease;
-webkit-transition: background-color 100ms ease;
-o-transition: background-color 100ms ease;
transition: background-color 100ms ease;
}
.icon-add:hover {
background-color: #333;
-moz-transition: background-color 100ms ease;
-webkit-transition: background-color 100ms ease;
-o-transition: background-color 100ms ease;
transition: background-color 100ms ease;
}
.clear, .jta-clear { clear:both; display: block; overflow: hidden; visibility: hidden; height: 0; }
/* btn styles */
.btn, .btn-clear, #CheckoutStepPaymentDetails input[type=submit]{ cursor: pointer; color: #fff !important; height: 35px!important; line-height: 35px!important; font-size: 14px; font-weight: 500; background: #f9ac39; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border: none; padding: 0 20px; text-transform: none; -webkit-appearance: none; } a.btn{ float: left; }
.btn a{ color: #ffffff!important; }
.btn-secondary{ font-size: 13px; background: #1f1f1c; height: 35px!important; line-height: 35px!important; padding: 0 15px; }
#Container .Button, .btn-clear { cursor: pointer; color: #fff !important; height: 35px !important; line-height: 35px!important; font-size: 14px; font-weight: bold; background: #1f1f1c; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid #000; padding: 0 20px; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; transition: all 100ms ease; } #Container .Button:hover, .btn-clear:hover { background-color: #f9ac39; border: 1px solid #f9ac39; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; transition: all 100ms ease; } a.Button{ float: left; }
.Button a{ color: #ffffff!important; }
.btn-small, .QuickSearchAllResults a{ font-size: 13px; background: #1f1f1c; height: 30px!important; line-height: 30px!important; padding: 0 15px; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; transition: all 100ms ease; }
#Container .btn-small:hover { background-color: #f9ac39 !important; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; transition: all 100ms ease; }
#Container .btn-addtocart, #ContainerModal .btn-addtocart { background-color: #f9ac39 !important; border-color: #ca8a2a !important; background-image: url(../../Munchen/images/munchen/icon_shop_bag.png); background-repeat: no-repeat; background-position: 15px 8px; padding-left: 35px; }
.btn-arrowleft{ background-image: url(../../Munchen/images/munchen/icon_arrow_left.png); background-repeat: no-repeat; background-position: 15px center; padding-left: 35px; }
.btn-arrowright{ background-image: url(../../Munchen/images/munchen/icon_arrow_right.png); background-repeat: no-repeat; background-position: right center; padding-right: 35px; }
#ModalContainer .btn-addtocart:hover, #ModalContainer .btn:hover, #Container .btn-addtocart:hover, #Container .btn:hover{ background-color: #1F1F1C !important; border-color: #1F1F1C !important; }
.btn-clear{ color: #f9ac39!important; background: none !important; padding: 0 8px; } .btn-clear:hover{ color: #1f1f1c!important; background: none !important; }
#Container .Button, #Container .btn-clear, #ModalContainer .Button, #ModalContainer .btn-clear { cursor: pointer; color: #fff !important; height: 35px !important; line-height: 35px!important; font-size: 14px; font-weight: bold; background: #1f1f1c; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid #000; padding: 0 20px; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; transition: all 100ms ease; } #Container .Button:hover, #Container .btn-clear:hover, #ModalContainer .Button:hover, #ModalContainer .btn-clear:hover { background-color: #f9ac39; border: 1px solid #f9ac39; -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; transition: all 100ms ease; }
#Container .ProductList li .ProductActionAdd .icon-Add.To,
#Container .ProductList li .ProductActionAdd .icon-Choose.Options,
#ModalContainer .ProductList li .ProductActionAdd .icon-Add.To,
#ModalContainer .ProductList li .ProductActionAdd .icon-Choose.Options {
float: left;
height: 36px;
margin: 0!important;
background: #f9ac39 url(../../Munchen/images/munchen/viewOpt.png) no-repeat 10px 50% !important;
line-height: 36px;
padding: 0 10px 0 35px !important;
color: #fff !important;
font-weight: 500;
-moz-transition: background-color 100ms ease;
-webkit-transition: background-color 100ms ease;
-o-transition: background-color 100ms ease;
transition: background-color 100ms ease;
}
/#Container .ProductList li .ProductActionAdd .icon-Add.To,
#ModalContainer .ProductList li .ProductActionAdd .icon-Add.To {
background: #f9ac39 url(../../Munchen/images/munchen/addCart.png) no-repeat 10px 50% !important;
padding-left: 40px !important;
}/
.ProductList li .ProductActionAdd .icon-Add.To:hover, .ProductList li .ProductActionAdd .icon-Choose.Options:hover{ background-color: #333 !important; -moz-transition: background-color 100ms ease; -webkit-transition: background-color 100ms ease; -o-transition: background-color 100ms ease; transition: background-color 100ms ease; }
a.Button{ float: left; }
.full-width{
display: block;
clear: both;
padding: 0 !important;
}
.full-width .zeroLeft {
padding-left: 0 !important
}
.cpage .Content.Wide{ padding: 30px 0 0 45px; width: 635px; border-left: 1px solid #e8e8e8; }
.productlist-page.Content{ width: 100%; padding: 0; }
.productlist-page.Content .ProductList.List .ProductDetails{ width: 640px; }
h6 a{ color: #000000!important; } h6 a:hover{ color: #f9ac39!important; }
.product-nav{ display: block; padding: 10px 0 0 0; clear: both; min-height: 45px; } .productlist-page.Content .product-nav{ border: none; }
.product-nav.btm{ border: none; padding-bottom: 0!important; border-top: 1px solid #e8e8e8!important; }
.nav-prev, .nav-next{ float: left; width: 12px; height: 12px; margin-top: 5px; text-indent: 99px; overflow: hidden; background: url(../../Munchen/images/munchen/icon_sprite.png) no-repeat -42px -27px; }
.nav-next{ background-position: -54px -27px; }
.mtop{ margin-top: 27px; }
.pbtm{ padding-bottom: 30px; }
.no-ptop{ padding-top: 0!important; }
.list{ margin: 0; padding: 10px 0; list-style: none; }
.list li{ padding-top: 5px; }
.list-icon, .list-news{ margin: 0; padding: 0; list-style: none; }
.list-icon li{ color: #1f1f1c; line-height: 23px; padding: 0 0 10px 0; }
.list-icon .icon{ width: 23px; height: 23px; margin: 0 15px 0 0; background-position: -41px 0; }
.list-news li p{ margin-bottom: 10px; }
.form{ display: block; clear: both; width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; }
.form li{ display: block; clear: both; width: 100%; padding: 10px 0; }
.form li label, .form dt{ float: left; width: 175px; padding: 7px 25px 0 0; text-align: right; line-height: 22px; }
.form input.Textbox { width: 180px; }
.form dd{ margin-left: 0; float: none; }
.boxin{ display: block; width: 100%; padding: 30px 0 25px 0; border-bottom: 1px solid #dedede; }
.boxin .mtop{ margin-top: 20px; }
.addto{ display: block; clear: both; border-top: 1px solid #ececec; }
.addto .BulkDiscount{ float: left; }
.addto #SideProductAddToWishList{ padding: 0; margin: 20px 0 0 10px; float: left; display: block; width: auto; clear: none; }
.txt-hide{ text-indent: -999px; overflow: hidden; color: #ffffff; }
#Wrapper .left-content .ProductList{ border: none; } .left-content .ProductList li{ width: 98px!important; } .left-content .ProductList .ProductImage{ width: 97px!important; height: 95px!important; min-width: 97px!important; min-height: 95px!important; overflow: hidden; border: 1px solid #dbdbdb; } .left-content .ProductList .p-name{ float: left; font-size: 12px; margin: 5px 0 25px 0; padding: 5px 0 3px 5%; border-left: 2px solid #ececec; }
.boxin h3 { font-weight: normal !important; line-height: 1.25 !important; position: relative; color: #312E29 !important; font-size: 26px !important; font-weight: 600 !important; }
.ProductList .p-price, .ProductPriceRating { width: auto !important; margin-top: 5px !important; } .ProductList .p-price { padding-top:2px; } .ProductPriceRating { float: right !important; clear: none !important; padding-right: 10px !important; } a.CustomizeItemLink { font-size: 11px; color: #f9ac39; } a.CustomizeItemLink:hover { color: #312E29; }