I'm working with an existing shopping cart template - their html, their css - and I'm trying to make it work for our application.
The problem I have is trying to get nested divs to extend to 100% height of its parent div. I've read other posts on this and I tried to follow the advice given, but it still ain't workin' and I'm hoping you can help.
I've included the CSS and the layout page below. It's the .Left and .Right that I'm trying to get to extend to the .Footer. Right now .Left and .Right stop where their content ends.
LAYOUT...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
%%Panel.HTMLHead%%
<body>
<div id="Container">
%%Panel.Header%%
<div id="Wrapper">
<div class="Left" id="LayoutColumn1">
%%Panel.SideCategoryList%%
%%Panel.SidePopularVendors%%
%%Panel.SideShopByBrand%%
%%Panel.SideNewsletterBox%%
%%Panel.SideLiveChatServices%%
</div>
<div class="Content" id="LayoutColumn2">
%%Discount.FreeShippingEligibility%%
%%Banner.TopBanner%%
%%Panel.HomeFeaturedProducts%%
%%Panel.HomeNewProducts%%
%%Panel.HomeRecentBlogs%%
%%Banner.BottomBanner%%
</div>
<div class="Right" id="LayoutColumn3">
%%Panel.SideCartContents%%
%%Panel.SideTopSellers%%
%%Panel.SideNewProducts%%
%%Panel.SidePopularProducts%%
</div>
<br class="Clear" />
</div>
<br class="Clear" />
<div id="Footer">
<p>
%%GLOBAL_AllPricesAreInCurrency%%
Copyright %%GLOBAL_Year%% %%GLOBAL_StoreName%%.
%%SNIPPET_SitemapLink%%
%%GLOBAL_MobileSiteLink%%
%%GLOBAL_PoweredBy%%
</p>
%%GLOBAL_DebugDetails%%
</div>
<br class="Clear" />
</div>
%%GLOBAL_DesignModeHTML%%
%%GLOBAL_QueryList%%
%%GLOBAL_DesignModeScriptTag%%
%%GLOBAL_LiveChatFooterCode%%
%%GLOBAL_OptimizerTrackingScript%%
%%GLOBAL_OptimizerConversionScript%%
%%GLOBAL_OptimizerSetCookieScript%%
%%GLOBAL_FooterScripts%%
%%SNIPPET_FastCartThickBoxJs%%
</div>
</body>
</html>CSS...
/* Global Reset */
* {
margin: 0;
padding: 0;
}
/* General */
/* html, body {height: 100%;}*/ /* tried this and it did not work, reverted to body only below */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
height: 100%;
}
input, select {
font-size: 11px;
}
input {
padding: 1px;
}
p {
line-height: 1.3;
margin-bottom: 15px;
}
a {
text-decoration: underline;
}
h2, .TitleHeading {
font-size: 2.2em;
margin: 6px 0 6px 0;
}
h3 {
font-size: 1.4em;
font-weight: normal;
margin-bottom: 6px;
}
h4 {
font-size: 1.1em;
margin-bottom: 4px;
}
img, img a {
border: 0;
}
ul, ol {
margin: 0 0 10px 30px;
}
li {
margin: 0;
margin-bottom: 2px;
padding: 0;
}
blockquote {
margin-left: 28px;
}
select option {
padding: 0 10px;
}
hr {
margin: 10px 0;
padding: 0;
height: 1px;
border:0;
}
/* Forms */
.HorizontalFormContainer dl, .VerticalFormContainer dl {
margin: 0;
}
.HorizontalFormContainer dt img {
vertical-align: middle;
float: left;
}
.HorizontalFormContainer dt .fieldLabel {
float:left;
padding-top: 4px;
padding-left: 4px;
}
.HorizontalFormContainer dt {
width: 160px;
float: left;
clear: left;
}
.HorizontalFormContainer dd.ProductField {
height: 20px;
}
.HorizontalFormContainer dd {
padding-top:4px;
margin-left: 170px;
}
.NarrowFormContainer dt {
width: 110px;
}
.NarrowFormContainer dd {
margin-left: 120px;
}
.HorizontalFormContainer p.Submit {
margin-left: 170px;
}
.NarrowFormContainer p.Submit {
margin-left: 120px;
}
.VerticalFormContainer dt {
margin-bottom: 6px;
}
.VerticalFormContainer dd {
margin-bottom: 6px;
margin-left: 10px;
}
/* Page Container */
#Container {
width: 958px;
margin: 0 auto;
background-color: #B7E2FF;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
height: 100%;
}
/* Main Navigation Menu */
#mainNav {
clear: both;
margin: 0;
padding: 0;
height: 39px;
}
/*sub navigation menu */
#subNav {
clear: both;
margin: 0;
padding: 0;
height: 30px;
}
/* Outer Content Wrapper (Surrounds header & content) */
#Outer {
clear: both;
}
#Wrapper {
clear: both;
height: 100%;
}
/* Header */
#Header {
clear: both;
width: 958px;
height: 79px;
background: #fff url(../../__custom/images/vitafit/header-bg.png) repeat-x;
}
#headerNav {
height: 27px;
width: 488px;
float: right;
}
/*New Logo */
#newLogo {
height: 79px;
width: 272px;
float: left;
}
/* Top Search Form */
#SearchForm {
float: right;
width: 295px;
padding: 0;
margin: 14px 10px 0 0;
display: inline;
}
#SearchForm form {
}
#SearchForm label {
display: none;
}
#SearchForm input.Textbox {
width: 214px;
font-size: 0.9em;
padding: 2px;
}
#SearchForm .Button {
width: 69px;
height: 23px;
padding: 0;
margin: 0;
vertical-align: top;
}
#SearchForm p {
margin: 0px 0px 0px 30px;
font-size: 0.85em;
}
#SearchForm a {
text-decoration: none;
}
#SearchForm a:hover {
text-decoration: underline;
}
/* Slider Banner */
#slider {
width: 798px;
height: 341px;
clear: left;
background-color: #CCCC66;
float: left;
}
#homeOptinBox {
float: right;
width: 160px;
font-size: 0.85em;
padding-bottom: 10px;
background-color: #999966;
height: 434px;
}
/* Left Content Area */
.Left {
float: left;
width: 160px;
font-size: 0.85em;
margin-right: 10px;
height: 100%;
background-color: #FFFF66;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
}
.Left Block {
}
.Left .BlockContent {
padding: 10px 5px 15px 5px;
}
.Left h2 {
font-size: 1.3em;
padding: 8px 5px 8px 5px;
margin: 0;
width: 148px;
}
.Left ul {
margin: 0;
padding: 0;
}
.Left li {
clear: both;
list-style: none;
margin: 0;
padding: 3px 0;
}
.Left li a {
text-decoration: none;
}
.Left li a:hover {
text-decoration: underline;
}
.Left #SideCategoryList li ul {
}
.Left #SideCategoryList li.LastChild {
border-bottom: 0 !important;
}
.Left #SideCategoryList li{
padding: 2px 0 1px 0;
}
.Left #SideCategoryList li ul {
padding-left: 8px;
}
/* Primary Content Area */
.Content {
float: left;
width: 618px;
/* min-height: 500px; */
margin: 0;
padding: 0 0 10px 0;
height: 100%;
}
.Content .Block {
clear: both;
}
.Block {
margin-top: 10px;
margin-bottom: 10px;
}
.Content h2, .TitleHeading {
margin: 10px 0;
}
.Content a:hover {
text-decoration: underline;
}
/* Primary Content Area (column span of 2) */
.Content.Wide {
width: 778px;
}
/* Primary Content Area (column span of 3 - spans entire page width) */
.Content.Widest {
width: 958px;
margin-left: 10px;
display: inline;
}
/* Right Content Area */
.Right {
float: right;
width: 160px;
font-size: 0.85em;
padding-bottom: 10px;
height: 100%;
background-color:#FFCC00;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #999999;
}
.Right .Block {
}
.Right .BlockContent {
padding: 10px 5px 15px 5px;
}
.Right h2 {
font-size: 1.3em;
padding: 8px 5px 8px 5px;
margin: 0;
width: 148px;
}
.Right ul {
margin: 0;
padding: 0;
}
.Right li {
clear: both;
list-style: none;
margin: 0;
padding: 3px 0;
}
.Right li a {
text-decoration: none;
}
.Right li a:hover {
text-decoration: underline;
}
/* Page Footer */
#Footer {
clear: both;
width: 958px;
font-size: 0.85em;
text-align: center;
margin: 30px 0 0 0;
padding: 30px 0 20px 0;
}
#Footer ul {
list-style: none;
margin: 0 0 30px 115px;
padding: 0;
}
#Footer li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#Footer li a {
text-decoration: none;
padding: 0 10px 0 10px;
}
/* Newsletter Subscription Form */
.NewsletterSubscription {
clear: both;
}
.NewsletterSubscription label {
clear: both;
float: left;
}
.NewsletterSubscription input {
width: 129px;
font-size: 0.9em;
padding: 3px;
margin-bottom: 5px;
}
.NewsletterSubscription .Button {
width: 90px;
height: 20px;
border: 0;
padding: 0;
margin-top: 6px;
vertical-align: middle;
background: transparent;
}
/* Product Listings */
.ProductList {
list-style: none;
margin: 0;
padding: 0;
}
.Content .ProductList li {
min-height: 12em;
float: left;
width: 299px !important;
margin: 4px 4px 8px 4px;
padding: 0;
overflow: hidden;
display: inline;
}
.Content .ProductList .ProductImage {
float: left;
width: 120px !important;
height: 120px !important;
text-align: center;
padding: 15px 15px 5px 15px;
margin: 0 0 5px 0;
}
.ProductList .ProductImage img {
max-height:120px;
max-width:120px;
}
.Content .ProductList .ProductDetails {
padding: 10px 5px 0 0;
margin: 0 0 5px 0;
}
.ProductList p {
margin: 5px 0 5px 5px;
}
.ProductList a {
text-decoration: none;
}
.ProductList strong, .ProductList strong a {
}
.ProductPrice, .ProductList em {
font-style: normal;
font-weight: bold;
}
.ProductList .Rating {
font-size: 0.9em;
font-weight: bold;
}
.ProductList li .ProductCompareButton {
margin-top: 3px;
}
.Left .ProductList .ProductImage, .Right .ProductList .ProductImage {
display: none;
}
.Left .ProductList li, .Right .ProductList li {
clear: both;
width: 145px;
list-style: none;
margin: 0;
margin-top: 5px;
padding: 3px 0 5px 0;
}
/* Top Seller Block Specific */
.Left .TopSellers li .TopSellerNumber, .Right .TopSellers li .TopSellerNumber { /* Contains the number of the item */
float: left;
width: 18px;
font-size: 2em;
}
.Left .TopSellers .ProductDetails, .Right .TopSellers .ProductDetails { /* Contains the details of the item */
margin-left: 25px;
padding: 3px 0 3px 0;
}
.Left .TopSellers li.TopSeller1, .Right .TopSellers li.TopSeller1 { /* No1 seller box */
clear: both;
float: left;
width: 145px;
margin: 0 0 5px 0;
overflow: visible;
display: inline;
}
.Left .TopSellers li.TopSeller1 img, .Right .TopSellers li.TopSeller1 img {
text-align: center;
overflow: hidden;
}
.Left .TopSellers li.TopSeller1 img, .Right .TopSellers li.TopSeller1 .ProductImage img {
width: 130px !important;
}
.Left .TopSellers li.TopSeller1 .TopSellerNumber, .Right .TopSellers li.TopSeller1 .TopSellerNumber {
display: none;
}
.Left .TopSellers li.TopSeller1 .ProductDetails, .Right .TopSellers li.TopSeller1 .ProductDetails {
clear: both;
}
.Left .TopSellers li.TopSeller1 .ProductImage, .Right .TopSellers li.TopSeller1 .ProductImage {
width: 130px;
display: inline;
text-align: center;
overflow: hidden;
padding: 0;
margin: 0 0 0 5px;
}
.Content .TopSellers li .TopSellerNumber {
display: none;
}
/* Page Breadcrumbs */
.Breadcrumb ul, .Breadcrumb li {
list-style: none;
margin: 0;
padding: 0;
}
.Breadcrumb {
font-size: 0.9em;
padding-bottom: 4px;
}
.Breadcrumb li {
padding-left: 6px;
display: inline;
}
.Breadcrumb li a {
padding-right: 10px;
background: url('../../Bargains/images/BreadcrumbSep.gif') no-repeat right;
}
.FindByCategory ul, .FindByCategory li {
list-style: none;
padding: 0;
margin: 0;
}
.FindByCategory li {
padding-left: 12px;
background: url('../../Bargains/images/BreadcrumbSep.gif') no-repeat 3px 5px;
padding-right: 8px;
display: inline;
}
/* Miscellaneous Definitions */
.Meta {
font-size: 0.93em;
}
.Left .FeedLink, .Right .FeedLink {
float: left;
margin: 2px 5px 0 0;
}
.Content .FeedLink {
float: left;
margin: 8px 10px 0 0;
}
.FloatRight {
float: right;
}
.FloatLeft {
float: left;
}
.ClearRight {
clear: right;
}
.ClearLeft {
clear: left;
}
.SortBox {
font-size: 0.95em;
}
.CompareButton {
clear: both;
text-align: right;
margin-top: 12px;
padding: 4px;
}
.Clear {
clear: both;
}
.Field45 {
width: 45px;
}
.Field100 {
width: 100px;
}
.Field150 {
width: 150px;
}
.Field200 {
width: 200px;
}
.Field250 {
width: 250px;
}
.Field300 {
width: 300px;
}
.Field350 {
width: 350px;
}
.Field400 {
width: 400px;
}
.MB10 { margin-bottom:10px; }
.MT0 { margin-top:0px; }
.LH140 { line-height:140%; }
.PLRB5 { padding:0px 5px 5px 5px; }
.PLR10 { padding:0px 10px 0px 10px; }
.PL20 { padding:0px 0px 0px 20px; }
.PL40 { padding:0px 0px 0px 40px; }
.ML20 { margin:0px 0px 0px 20px; }
.MT10 { margin-top:10px; }
.PL10 { padding-left:10px; }
.PB2 { padding-bottom:2px; }
.NoMarginBottom { margin-bottom: 0; }
.Required {
font-weight: bold;
visibility: visible;
}
.InfoMessage {
padding: 8px 6px 8px 28px;
margin-bottom: 10px;
}
.SuccessMessage {
padding: 8px 6px 8px 28px;
margin-bottom: 10px;
}
.ErrorMessage {
padding: 8px 6px 8px 28px;
margin-bottom: 10px;
}
/************* Page Specific: Create Account / Login Page *************/
.CreateAccount {
float: left;
width: 335px;
padding-right: 20px;
}
.AccountLogin {
float: left;
padding-left: 20px;
width: 335px;
}
ul.ShippingAddressList, ul.ShippingAddressList li {
list-style: none;
margin: 0;
padding: 0;
}
ul.ShippingAddressList li {
width: 30%;
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
.PrimaryProductDetails .ProductThumb {
float: left;
width: 180px;
text-align: center;
padding: 10px 0 0 0;
margin: 0 15px 0 0;
}
.PrimaryProductDetails .ProductMain {
width: 360px;
float: left;
}
.PrimaryProductDetails dl {
font-size: 0.90em;
}
.PrimaryProductDetails dt {
font-weight: bold;
width: 80px;
clear: left;
}
.PrimaryProductDetails dd {
margin-left: 90px;
}
.Right hr {
margin: 5px 0 0;
}
.Content h3 {
margin-bottom: 5px;
}
.ComparisonCheckbox {
float: left;
}
.SideRecentlyViewed .CompareButton {
margin: 10px 0 0 0;
padding: 0;
}
.SideRecentlyViewed .ProductList li {
margin-left: 0;
}
.SideRecentlyViewed .ProductDetails {
margin-left: 20px;
}
/* Product Comparisons */
.ComparisonTable { width: 100%; }
.ComparisonTable td { vertical-align:top; font-size: 11px }
.CompareFieldName { width:95px; padding:8px 10px 8px 15px; }
.CompareFieldTop { padding:5px; text-align:center; }
.CompareFieldTop a { text-decoration:none; font-size:10px; }
.CompareFieldTop a:hover { text-decoration:underline; }
.CompareLeft { padding:5px 10px 5px 10px; }
.CompareCenter { text-align:center; padding:5px; }
.CompareRating { text-align:center; padding-top:8px; vertical-align:middle; }
.CompareProductOption { margin-left:20px; padding-left:5px; }
.Availability { }
.LittleNote { font-size: 0.85em; }
.ViewCartLink {
padding-left: 30px;
padding-top: 4px;
padding-bottom: 8px;
}
/* General Tables */
table.General,
table.CartContents, table.General {
width: 100%;
margin: 10px 0;
}
table.General thead tr th,
table.CartContents thead tr th {
padding: 6px 10px;
text-align: left;
}
table.General tbody td,
table.CartContents tbody td {
padding: 6px 10px;
vertical-align: top;
}
table.General tbody tr.First td {
border-top: 0;
}
/* Cart Contents Table */
.CartContents tbody td {
border-bottom: 0;
}
.CartContents .ProductName a {
font-weight: bold;
}
.CartContents tfoot .SubTotal td {
text-align: right;
font-weight: bold;
}
.ProceedToCheckout {
text-align: right;
}
.Content .ProceedToCheckout {
width: 200px;
float: right;
}
.ProceedToCheckout a {
padding-top: 5px;
}
.ProductOptionList {
margin-bottom: 10px;
}
.MiniCart .SubTotal {
text-align: center;
font-size: 115%;
}
.MiniCart .CartProductOptionList {
display: block;
}
.JustAddedProduct {
width: 128px;
overflow: hidden;
margin: auto;
text-align: center;
padding: 5px;
margin-bottom: 10px;
}
.JustAddedProduct strong, .JustAddedProduct a {
font-weight: bold;
font-size: 1.02em;
display: block;
margin-bottom: 3px;
}
.CategoryPagination .PagingList, .CategoryPagination .PagingList li {
list-style: none;
padding: 0;
margin: 0;
}
.CategoryPagination {
padding: 5px;
text-align: center;
}
.CategoryPagination .PagingList li {
display: inline;
padding: 0 5px;
}
/* Quick Search */
.QuickSearch { margin: 0; padding: 0; text-align: left; border-collapse: collapse; }
.QuickSearchTitle td, .QuickSearchAllResults td { font-weight: bold; padding: 4px; font-size: 11px; }
.QuickSearchResult td { font-size: 11px; padding:8px 0px 8px 8px; cursor: pointer; }
.QuickSearchResultImage { margin-left: 4px; margin-right: 10px; text-align: center; }
.QuickSearchResultNoImage { padding-top: 10px; }
.QuickSearchResultName { font-weight: bold; text-decoration: none; display: block; padding-bottom: 5px; }
.QuickSearchResult .Price { font-size: 11px; }
.QuickSearchHover td{ }
.QuickSearchHover a { text-decoration: underline; font-weight:bold; }
.QuickSearchAllResults { text-indent: -7000px; }
.QuickSearchAllResults a { text-decoration: underline; height: 25px; display: block; }
.QuickSearchAllResults a:active, .QuickSearchAllResults a { outline: none; -moz-outline-style: none; }
/* Brand Tag Clouds */
.BrandCloud .smallest { font-size:12px; }
.BrandCloud .small { font-size:15px; }
.BrandCloud .medium { font-size:18px; }
.BrandCloud .large { font-size:20px; }
.BrandCloud .largest { font-size:26px; }
.BrandCloud a { padding-right: 5px; }
.DownloadExpires { padding-top: 3px; font-style: italic; }
.DownloadExpiresToday { }
.CheckoutRedeemCoupon { padding: 10px; width: 300px; margin-bottom: 10px; }
.CheckoutRedeemCoupon h4 { margin-top: 0; }
.CheckoutRedeemCoupon p { margin-top: 10px; margin-bottom: 0;}
.BillingDetails {
float: left;
width: 48%;
margin-right: 10px;
margin-bottom: 15px;
}
.ShippingDetails {
float: left;
width: 48%;
margin-bottom: 15px;
}
.ProductDetailsGrid dt {
width: 140px;
margin-bottom: 6px;
float: left;
font-weight: bold;
}
.ProductDetailsGrid dd {
margin-left: 145px;
margin-bottom: 6px;
}
.SubCategoryList {
padding: 4px;
}
.SubCategoryList ul, .SubCategoryList li {
list-style: none;
margin-left: 0;
}
.SubCategoryList li {
margin-bottom: 4px;
padding-left: 25px;
background: url('../../Bargains/images/SubCategory.gif') no-repeat 3px 1px;
}
.SearchTips .Examples {
padding: 8px;
margin-left: 30px;
margin-bottom: 10px;
}
.PrimaryProductDetails .ProductThumb p {
margin-top: 10px;
font-size: 0.9em;
}
.ProductReviewList {
clear: both;
}
.SortBox select {
font-size: 0.9em;
}
.SortBox option {
}
.YourAccount li {
margin-bottom: 8px;
}
.SoldOut {
}
.RemoveFromWishlistForm {
margin: 5px;
}
.ShippingProviderList {
list-style: none;
}
small {
font-size: 11px;
}
.HowToPay {
margin-bottom: 10px;
}
.ProductList em, .ProductList .Rating {
display: block;
}
.ProductOptionList {
display: block;
}
.GoogleCheckout p,
.PayPalExpressCheckout p,
.AlternativeCheckout p {
margin: 0;
font-size: 90%;
}
.GoogleCheckout,
.PayPalExpressCheckout,
.AlternativeCheckout {
text-align: center;
margin-bottom: 10px;
}
.KeepShopping {
width: 180px;
clear: both;
text-align: right;
}
/** Top Right Locale Chooser (list of flags) **/
#TopMenu li.Flag {
}
#TopMenu li.Flag div {
border: 0;
}
#TopMenu li.Flag img {
margin: 3px;
}
#TopMenu li.Flag img.Last {
margin-right: 0px;
}
#TopMenu li.Flag img.Selected {
margin: 1px 3px;
}
/** Currency Selector **/
.CurrencyList dl {
margin: 0;
padding: 0;
}
.CurrencyList dd {
padding: 0px;
margin: 0px;
clear: both;
}
.CurrencyList a {
padding: 0 3px 0 5px;
display: block;
line-height: 1.8;
text-decoration: none;
font-size: 11px;
}
.CurrencyList a.Sel {
}
.CurrencyList a:hover .Text {
text-decoration: underline;
}
.CurrencyList a .Flag {
margin-top: 4px;
display: block;
float: left;
width: 24px;
padding-right: 2px;
vertical-align: middle;
}
.CurrencyList a .Text {
display: block;
padding-left: 24px;
}
.PrimaryProductDetails .YouSave {
font-weight: bold;
margin-top: 3px;
display: block;
}
/* Shipping Estimation on Cart Contents Page */
.EstimateShipping {
margin-top: 4px;
margin-bottom: 4px;
font-weight: normal;
width: 320px;
padding: 7px;
float: right;
}
.EstimateShipping dt {
width: 100px;
float: left;
margin-bottom: 8px;
clear: left;
}
.EstimateShipping dd {
margin-bottom: 8px;
font-weight: normal;
text-align: left;
margin-left: 114px;
}
.EstimateShipping p.Submit {
margin-top: 10px;
margin-bottom: 3px;
}
.EstimateShipping label {
display: block;
margin-bottom: 5px;
}
.EstimatedShippingMethods {
text-align: left;
}
.EstimatedShippingMethods table {
width: 100%;
border-collapse: collapse;
}
.EstimatedShippingMethods .VendorShipping {
margin-left: 20px;
margin-bottom: 10px;
}
.EstimatedShippingMethods .Submit {
text-align: right;
}
.CartContents tfoot .SubTotal .EstimatedShippingMethods tbody td {
text-align: left;
}
.CartContents tfoot .SubTotal .EstimatedShippingMethods tbody td.Price {
text-align: right;
}
.SharePublicWishList {
padding:5px;
}
/* Express Checkout */
.ExpressCheckoutBlock .ExpressCheckoutTitle {
position: relative;
padding: 6px;
margin-bottom: 10px;
}
.ExpressCheckoutBlock h3 a {
font-size: 12px;
}
.ExpressCheckoutBlock {
padding-top: 6px;
}
.ExpressCheckoutBlock .ExpressCheckoutCompletedContent {
display: none;
}
.ExpressCheckoutBlockCompleted .ExpressCheckoutCompletedContent {
display: inline;
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.ExpressCheckoutBlockCollapsed .ExpressCheckoutContent {
display: none;
}
a.ChangeLink {
position: absolute;
right: 15px;
}
.ExpressCheckoutBlock a.ChangeLink {
display: none;
}
.ExpressCheckoutBlockCompleted a.ChangeLink {
display: inline;
}
.ExpressCheckoutCompletedContent {
position: absolute;
left: 250px;
}
.LoadingIndicator {
margin-left: 10px;
}
.LoadingIndicator img {
vertical-align: middle;
margin-right: 10px;
}
#TopMenu li.HeaderLiveChat {
}
#TopMenu li.HeaderLiveChat div {
border-left: 0;
}
.HeaderLiveChat img {
vertical-align: middle;
}
#ProductOtherDetails .ProductDetailsGrid {
margin-left: 25px;
}
.SubCategoryListGrid {
padding: 4px;
}
.SubCategoryListGrid ul, .SubCategoryListGrid li {
list-style: none;
margin-left: 0;
}
.SubCategoryListGrid li {
margin-bottom: 4px;
padding: 10px;
margin-left: 10px;
background: #fff;
float: left;
text-align: center;
}
.SubCategoryListGrid ol {
clear: both;
}
.SubBrandList {
padding: 4px;
}
.SubBrandList ul, .SubBrandList li {
list-style: none;
margin-left: 0;
}
.SubBrandList li {
margin-bottom: 4px;
padding-left: 25px;
background: url('../../Bargains/images/SubBrand.gif') no-repeat 3px 1px;
}
.SubBrandListGrid {
padding: 4px;
}
.SubBrandListGrid ul, .SubBrandListGrid li {
list-style: none;
margin-left: 0;
}
.SubBrandListGrid li {
margin-bottom: 4px;
padding: 10px;
margin-left: 10px;
background: #fff;
float: left;
text-align: center;
}
.SubBrandListGrid ol {
clear: both;
}
.ProductAddToCart input.Textbox, #CartEditProductFieldsForm input.Textbox{
width:181px;
}
.ProductAddToCart textarea, #CartEditProductFieldsForm textarea{
width:183px;
height: 50px;
}
.ProductFields dd {
margin-bottom: 4px;
float:left;
margin-left:20px;
}
.ProductFields {
margin-bottom: 15px;
}
.ProductFields input.Textbox {
width:100%;
}
.ProductFields TextArea {
width:100%;
}
.CartContents .CartProductFieldsLink {
font-size: 11px;
margin-top: 6px;
padding-left: 22px;
background: url('../../Bargains/images/GiftWrappingAvailable.gif') no-repeat;
padding-bottom: 4px;
}
.CartContents .CartProductFieldsRow {
border-top: 0;
}
.CartContents .CartProductFieldsRow dl {
margin-top:15px;
}
p.QuantityInput, p.AddCartButton {
text-align: center;
}
.ProductAddToCart dt.QuantityInput {
margin-top: 4px;
}
.ProductAddToCart dd.AddCartButton span {
margin-top: 4px;
padding-right: 5px;
}
.ProductActionAdd {
display: block;
margin-top: 5px;
}
.ProductActionAdd a, .ProductActionAdd strong a {
text-decoration: underline;
}
.TagList {
margin-top: 20px;
}
.CartThumb {
text-align: center;
width: 1px;
}
.WrappingOptions {
font-size: 11px;
margin-top: 6px;
padding-left: 22px;
background: url('../../Bargains/images/GiftWrappingAvailable.gif') no-repeat;
padding-bottom: 4px;
line-height: 1.6;
}
.ViewAllLink a {
padding-top: 10px;
display: block;
}
.SelectGiftWrapMultiple {
max-height: 400px;
}
/* Tabbed Navigation */
.TabNav, .TabNav li {
list-style: none;
margin: 0;
padding: 0;
}
.TabNav {
font-size: 11px;
margin-bottom: 10px;
padding: 6px 4px 6px 4px;
}
.TabNav li {
display: inline;
}
.TabNav li a {
position: relative;
top: 2px;
font-size: 12px;
padding: 4px 6px;
margin-right: 3px;
margin-top: 3px;
text-decoration: none;
}
.TabNav li a:hover {
text-decoration: none;
}
.TabNav li.Active a {
margin-top: 0px;
padding-top: 7px;
font-weight: bold;
}
.ProductAddToCart dd.AddCartButton div.BulkDiscount {
display: inline-block;
float:left;
}
.ProductAddToCart dd.AddCartButton div.BulkDiscount div.BulkDiscountLink {
padding-left: 4px;
}
#VendorLogo .BlockContent, #VendorPhoto .BlockContent {
margin: 0;
text-align: center;
}
.TransitTime {
font-weight: normal;
}
.Content .ProductList.List li {
margin: 0;
margin-top: 6px;
display: block;
width: auto !important;
float: none;
padding: 6px;
min-height: 0;
height: 132px;
background-image: none;
}
.Content .ProductList.List .ProductImage {
margin: 0 !important;
padding: 0px;
margin-right: 15px;
float: left;
background-image: none;
width: 120px !important;
height: 120px !important;
}
.Content .ProductList.List .ProductImage img{
max-height: 120px;
max-width: 120px;
}
.Content .ProductList.List .ProductDetails {
height: auto;
display: block;
clear: none;
padding: 0px;
padding-left: 5px;
margin: 0px;
margin-left: 135px;
text-align: left;
background-image: none;
}
.Content .ProductList.List .ProductQty {
margin-left: 10px;
}
.Content .ProductList.List .ProductDescription {
font-style: italic;
margin-top: 5px;
}
.Content .ProductList .ProductRightCol {
float: right;
}
.Content .ProductList.List li .ProductCompareButton {
text-align: left;
margin-top: 10px;
}
.OrderItemMessage {
padding:7px;
margin:10px 0px 10px 0px;
}
/* Custom Fields - Start */
.LittleNotePassword {
font-size: 0.85em;
padding:2px 0px 2px 0px;
}
.RequiredClear {
visibility: hidden;
}
/* Custom Fields - End */
/* Product Details */
.ProductDetailsGrid .DetailRow {
clear: left;
margin-top: 6px;
padding-left: 140px;
}
.ProductDetailsGrid .Label {
margin: 0 0 6px -140px;
float: left;
width: 130px;
font-weight: bold;
padding-top: 1px;
display: inline;
position: relative;
text-align: right;
}
.ProductDetailsGrid .Value {
display: inline;
}
.ProductDetailsGrid .Label .Required {
position: absolute;
left: -1em;
}
.ProductOptionList ul, .ProductOptionList li {
list-style: none;
margin: 0;
padding: 0;
}
.ProductOptionList li {
margin-bottom: 3px;
}
.ProductOptionList input {
vertical-align: middle;
}
/* Product Videos */
#FeaturedVideo, #VideoList, #VideoSingle {
float: left;
}
#VideoList {
padding-left: 5px;
}
.VideoSeparator {
clear: both;
}
.videoRow {
clear: both;
margin-bottom: 4px;
display: block;
height: 75px;
}
.previewImageContainer {
height: 30px;
width: 50px;
}
.videoRow img {
float: left;
padding-right: 5px;
}
.videoRowTitle {
font-weight: bold;
}
.videoRowDescription {
max-height: 50px;
overflow:hidden;
}
.VideoOverlay {
background-image: url('../images/VideoOverlay.png');
background-position: center center;
position: absolute;
left: 0;
height: 100%;
width: 100%;
top: 0;
}
.VideoContentContainer {
position: relative;
margin-left: 3px;
padding-left: 92px;
}
/** If you change the width of the .VideoPreviewSize class below, change the padding-left of the .VideoContentContainer class above **/
.VideoPreviewSize {
width: 92px;
height: 69px;
}
.videoRowLength {
padding-left: 4px;
}
.videoRow, .videoRowTitle, .videoRow img, .videoRowLength {
cursor: pointer;
}
#VideoList ul {
position: relative;
overflow-y: auto;
padding:0;
margin: 0;
width: 275px;
height: 265px;
}
#VideoSingle {
padding-left: 10px;
width:275px;
}
#VideoContainer {
padding: 5px 0 5px 5px;
height: 265px;
}
.HideElement {
display: none;
}
.VideoSingleTitle {
font-weight: bold;
}
.VideoSingleDescription {
padding-top: 10px;
overflow-y: auto;
height: 220px;
padding-right:5px;
}
.Left #VideoMiddleContainer, .Right #VideoMiddleContainer {
display: none;
}
.Content #VideoSideContainer {
display: none;
}
#VideoSideContainer ul {
text-align: center;
}
#VideoSideContainer ul li {
margin-bottom: 5px;
}
.VideoSideDescription {
padding: 2px 10px;
}
.VideoImageContainer {
position: relative;
float: left;
}
/** Search All Form Result - Start **/
.SearchPaging {
float: right;
font-size: 0.95em;
}
.SearchSorting {
float: right;
font-size: 0.95em;
margin: 8px 0px;
}
.SearchSorting select {
font-size: 0.95em;
}
#SearchResultsCategoryAndBrand {
margin: 5px;
padding: 5px;
}
.ContentList em, .QuickSearchResultMeta em {
font-size: 0.8em;
}
/** Search All Form Result - End **/
/** AJAX loading box - Start **/
#AjaxLoading {
display: none;
text-align: center;
background: #FCF5AA;
width: 180px;
z-index: 10000000000;
padding: 5px 10px;
}
#AjaxLoading img {
vertical-align: bottom;
margin-right: 5px;
}
/** AJAX loading box - End **/
/** Product images gallary **/
#ProductDetails #ImageScrollPrev,
#ProductDetails #ImageScrollNext {
float: left;
background:none;
border:none;
margin-top:16px;
cursor:pointer;
display: none;
}
#ProductDetails .ProductTinyImageList {
float: left;
margin-top:10px;
white-space:nowrap;
width: 80%;
overflow: hidden;
margin-left:auto;
}
#ProductDetails .ProductTinyImageList ul li {
width: 40px;
height: 30px;
overflow: hidden;
float: left;
margin-left:3px;
border: 1px solid gray;
}
#ProductDetails .ProductTinyImageList ul li div {
display: table-cell;
text-align: center;
}
#ProductDetails .ProductTinyImageList ul li #TinyOuterDiv {
border: 2px solid white;
}
#ProductDetails .ProductTinyImageList ul {
margin: 0pt;
padding: 0pt;
position: relative;
list-style-type: none;
white-space:nowrap;
width: 2500px;
}
#ProductDetails .ProductThumbImage {
height: 220px;
width: 220px;
margin:auto;
}
.carousel {
position: relative;
visibility: hidden;
left: -5000px;
width: 180px;
}
/** Product images gallary end **/
/* Category flyout styles (structural) */
/* Menu containers */
#SideCategoryList .sf-menu,
#SideCategoryList .sf-menu ul,
#SideCategoryList .sf-menu li {
width: 148px; /* the width must be fixed to the use of floats */
}
/* Menu links */
#SideCategoryList .sf-menu a {
padding: 5px 8px 5px 8px;
width: 132px; /* this + paddings must equal the root width above for hovers to work */
}
/* Child override: menu containers */
#SideCategoryList .sf-menu ul {
left: 148px;
}
/* Child override: menu links */
#SideCategoryList .sf-menu ul a {
padding: 5px 8px 5px 8px;
width: 132px; /* this + paddings must equal the child width above for hovers to work */
}
/* End: category flyout styles */