/* ======================================================================== SECTION ======================================================================== */ /* Box Layouts */ .bloc100 { width: 100%; padding: 1% 0%; clear: both; box-sizing: border-box; } .bloc100c { width: 100%; padding: 1% 0%; text-align: center; clear: both; box-sizing: border-box; } .bloc20T { width: 20%; padding: 1% 1.2% 1% 1.4%; float: left; box-sizing: border-box; height: 8.2rem; border-bottom: 8px solid white; border-right: 8px solid white; background-color: whitesmoke;} .bloc25 { width: 25%; padding: 1% 4.2% 1% 0; float: left; box-sizing: border-box; overflow-wrap: break-word; } .bloc25r { width: 25%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .bloc33 { width: 33%; padding: 1% 4.2% 1% 0; float: left; box-sizing: border-box; } .bloc33r { width: 33%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .bloc33c { width: 33%; padding: 1% 2.2% 1% 2.2%; float: left; box-sizing: border-box; } .bloc33cl { width: 33%; padding: 1% 2.5% 1% 2.5%; float: left; border-left: 1px solid black; box-sizing: border-box; } .bloc33SH { width: calc(33% - 2px); padding: 1% 1.8% 1% 0; float: left; box-sizing: border-box;} .bloc33SHr { width: calc(33% - 2px); padding: 1% 0%; float: left; box-sizing: border-box;} #explore .bloc33c { padding: 1% 3.2% 1% 4.0%; } .bloc40 { width: 40%; padding: 1% 4.2% 1% 0; float: left; box-sizing: border-box; } .bloc40r { width: 40%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .bloc50 { width: 50%; padding: 1% 4.2% 1% 0; float: left; box-sizing: border-box; } .bloc50r { width: 50%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .bloc60 { width: 60%; padding: 1% 4.2% 1% 0; float: left; box-sizing: border-box; } .bloc60r { width: 60%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .videoso { width: 40%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .Latest-News .bloc50 { padding: 1%; } .Latest-News .bloc50r { padding: 1%; } .Explore .bloc50 { padding: 0.5%; } .Explore .bloc50r { padding: 0.5%; } .Explore .bloc100 { padding: 0.5%; } .Explore-H .bloc50 { padding: 0.5% 2.0% 0.5% 0; } .Explore-H .bloc50r { padding: 0.5% 0 0.5% 2.0%; } .Spotlight .bloc33c { padding: 1% 2% 1% 0; } .Spotlight .bloc33c h3 {font-size: 1.0rem; margin: 0rem 0 0.2rem 0; padding: 0rem 0 0.2rem 0;} .Spotlight .bloc33c p {font-size: 0.9rem;} .Spotlight .bloc33c a {font-size: 1.0rem;} .Home { margin: 0.2% 0 1.2% 0; display: inline-block;} .Home .bloc33c { padding: 1% 1% 1% 1%; border-right: 5px solid white;} .Home .ftC {padding: 6px 0 2px 0;} .Home .blocOutls { padding: 5px; margin: 1% 1% 1% 0; float: left; width: 48%; box-sizing: border-box;} .Home .blocOutlsr { padding: 5px; margin: 1% 1% .5% 0; float: right; width: 48%; box-sizing: border-box;} .Home .blocOutls3 { padding: 5px; margin: 1% 1.3% 1% 0; float: left; width: 32%; box-sizing: border-box;} .Home .blocOutls100 { border: 2px solid #dadad8; padding: 5px; margin: 2% 1% 4% 0; box-shadow: 5px 6px #f5f5f5; float: left; max-width: 100%; box-sizing: border-box;} .bloc40-50r { width: 40%; padding: 1% 0% 1% 4.2%; float: right; box-sizing: border-box; } .bloc60 { width: 60%; padding: 1% 4.2% 1% 0; float: left; box-sizing: border-box; } .bloc25r .imageRight, .bloc33r .imageRight { max-width:100%!important;} .blocOutl {border: 2px solid #DADAD8; padding: 3% 4%; margin: 1%; } /* Outline for Bloc*/ .blocOutl2 {border: 2px solid #DADAD8; padding: 2% 2%; margin: 1%; } /* Outline for Bloc - small borders*/ .blocPOutl {border: 2px solid #DADAD8; padding: 2% 3%; margin: 3% 1% 3% 0%; border-radius: 5px; } /* Outline for

text*/ .blocBGC {background-color: whitesmoke; padding: 3% 4%; border-radius: 5px; } /* Background Colour for Bloc*/ .blocPBGC {background-color: whitesmoke; padding: 2% 3%; margin: 3% 0%; border-radius: 5px; } /* Background Colour for

text*/ .blocPBGRCN { background-color: #fafff9; padding: 1% 2%; margin: 2% 0% 3%; border-radius: 5px; border: 1px dashed black;} /* Green Background Colour for

text Narrow*/ .blocTesti30 { border-radius: 15px; background-color: #f1f1ff; border: 2px solid #66D303; margin: 1%; float: left; width: 26%; padding: 1% 1.5%; box-sizing: border-box; } /* Small Outline for Testimoinals*/ .blocTesti40 { border-radius: 15px; background-color: #f1f1ff; border: 2px solid #66D303; margin: 1%; float: left; width: 41%; padding: 1% 1.5%; box-sizing: border-box; } /* Medium Outline for Testimoinals*/ .blocTesti100 { border-radius: 15px; background-color: #f1f1ff; border: 2px solid #66D303; margin: 1%; float: left; width: 95%; padding: 1% 1.5%; box-sizing: border-box; } /* Medium Outline for Testimoinals*/ .SingleSpotlight img { border: 1px solid #DADAD8;} .section { border-top: solid 3px #ddd; margin: 15px 0 0 0; padding: 10px 0 10px 0; width: 100%; } .boxls { width: 30%; float: left; padding: 3px; margin-top: 4px; margin-bottom: 4px; margin-left: 0px; margin-right: 8px;} .boxlm { width: 40%; float: left; padding: 3px; margin: 4px 8px 4px 0px;} .boxlspot { width: 40%; float: left; padding: 3px; margin: 4px 8px 4px 0px;} .boxll { width: 45%; float: left; padding: 3px; margin: 4px 25px 4px 0px;} .boxlxl { width: 55%; float: left; padding: 3px; margin: 4px 25px 4px 0px;} .outlineL { padding: 5px; border: 2px solid #DDDCDD; margin: 10px 10px 10px 0px;} .outlineR { padding: 5px; border: 2px solid #DDDCDD; margin: 10px 0px 10px 10px;} .outlineSH { padding: 0px 10px 5px; border: 2px solid #DDDCDD; margin: 0px 0px 10px 10px;} .section { border-top: 1px solid #669; margin: 15px 0px 0px; padding: 10px 0px; width: 100%;} #extraproducttext .bloc100 { width: 100%; padding: 1% 0%; clear: both; box-sizing: border-box; } #extraproducttext .blocOutl {border: 2px solid #DADAD8; padding: 2%; margin: 1%; box-shadow: 5px 6px whitesmoke; margin: 0%; } #extraproducttext .blocOutlp {border: 1px solid #DA3AB3; padding: 2%; margin: 1%; box-shadow: 5px 6px whitesmoke; margin: 0%; } .blocOutlp h3 { padding: 0px; margin: 0px;} #extraproducttext hr {border-width: 5px 0 0;} #extrainformation .bloc100 { width: 100%; padding: 1% 0%; clear: both; box-sizing: border-box; } #extrainformation .blocOutl {border: 2px solid #DADAD8; padding: 2%; margin: 1%; box-shadow: 5px 6px whitesmoke; margin: 0%; } #extrainformation .blocOutlp {border: 1px solid #DA3AB3; padding: 2%; margin: 1%; box-shadow: 5px 6px whitesmoke; margin: 0%; } .flash { border: 1px solid #66D303; padding: 0.5% 1% 1% 1%; background: #EFEFEF; margin: 1% 0% 1%;} .flash p { line-height: 2.0rem;} .newsflash { border-bottom: 1px solid #d7c1d0; padding: 0% 3%; background: #f5f1f2; margin: 0; display: inline-block; width: 100%; text-align: center;} .newsflash p {line-height: 2.0rem; color: #0a3e34; font-size: 0.92rem;} .ftC p::before { content: ''; display: inline-block; height: 0.5rem; width: 0.5rem; border-radius: 50%; background-color: #fff; margin-right: 0.5rem; border: 1px solid gray;} .ftC2 p::before { content: ''; display: inline-block; height: 0.7rem; width: 0.7rem; border-radius: 50%; background-color: #daecbe; margin-right: 0.5rem; border: 1px solid gray;} .linkSpot { border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; padding: 5px 15px 5px 5px; } .boxrxs { width: 27%; float: right; padding: 3px; margin-top: 4px; margin-bottom: 4px; margin-left: 8px; margin-right: 0px;} .specials { font-size: 98%; font-weight: 600; padding: 8px 10px 8px 15px; border-radius: 5px; border: 2px solid gold; margin-right: 10px; } .boxrs { width: 30%; float: right; padding: 3px; margin: 4px 0px 4px 25px;} .boxrm { width: 40%; float: right; padding: 3px; margin: 4px 0px 4px 25px;} .boxrl { width: 50%; float: right; padding: 3px; margin: 4px 0px 4px 8px; } .boxrxl { width: 59%; float: right; padding: 3px; margin: 4px 0px 4px 8px;} .boxrspot { width: 37%; float: right; padding: 3px; margin: 4px 0px 4px 10px;} .sets { width: 250px; margin-left: 15px; padding-left: 15px; float: right; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #006600;} .sets1 { float: right; height: auto; width: 160px; margin-top: 2px; margin-right: 5px; margin-bottom: 0px; margin-left: 20px; padding-top: 5px; padding-right: 2px; padding-bottom: 0px; padding-left: 2px; clear: none; display: block;} .boxbd { width: 55%; float: right; padding: 3px; margin: 4px 0px 4px 25px;} .clear { clear: both; } .line { background-color: #006600; height: 1px; display: block; margin: 0px; padding: 0px;} .line2 { background-color: #006600; height: 3px; padding: 0px; margin: 10px 0px 0px 0px; } .line1 { background-color: #006600; height: 3px; padding: 0px; margin: 10px 0px 0px 0px; } .quote40 { width: 40%; float: right; padding: .5rem 0 .5rem 1rem; margin: .5rem 0 1rem 2.5rem; border-bottom: 5px solid #b967b9; text-align: right; box-sizing: border-box;} .quote100 { width: 100%; float: right; padding: .5rem 0 .5rem 1rem; margin: .5rem 0 1rem 2.5rem; border-bottom: 5px solid #b967b9; text-align: right; box-sizing: border-box;} .quote30 p, .quote40 p, .quote100 p, .quoteBloc p, .quote90 p, .quote100L p { line-height: 1.95rem; font-size: 1.3rem; font-style: italic; display: inline-block;} .quoteBk1 { width: 34%; float: right; padding: 10px; margin-top: 5px; margin-bottom: 10px; margin-left: 20px; border-bottom: 5px solid #B967B9; text-align: left; text-align: right;} .quoteBk1 p { line-height: 20px; font-size: 13pt; font-style: italic; font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;} .quoteBk11 { max-width: 100%; float: right; padding: 10px; margin-top: 5px; margin-bottom: 10px; margin-left: 20px; border-bottom: 5px solid #B967B9; text-align: right;} .quoteBk11 p { line-height: 20px; font-size: 13pt; font-style: italic; font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;} .quoteBk2 { max-width: 37%; float: right; padding: 10px; margin-top: 5px; margin-bottom: 10px; margin-left: 20px; border-bottom: 5px solid #B967B9; text-align: right;} .quoteBk2 p { line-height: 20px; font-size: 13pt; font-style: italic; font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;} .quoteBkl { float: left; padding: 10px; margin: 5px 20px 10px; border-bottom: 5px solid #B967B9;} .quoteBkl p { line-height: 20px; font-size: 13pt; font-style: italic; font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;} .quoteProd {width: 80%; float: right; padding: 10px; margin: 5px 20px 30px; border-bottom: 3px solid #B967B9; text-align: right; } .quoteProd p {line-height: 1.5rem; font-size: 1.2rem; font-style: italic; font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;} .quoteProdL {max-width: 60%; float: left; padding: 5px 5px; margin: 5px 20px 10px 1px; border-bottom: 3px solid #B967B9; text-align: left; } .quoteProdL p {line-height: 20px; font-size: 12pt; font-style: italic; font-family: Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;} .spot { padding-top: 5px; padding-bottom: 5px; border-left: 12px solid #4EA103; padding-left: 16px; margin-bottom: 5px; float: none; margin-top: 16px; border-bottom: 1px solid #66D303; width: 45%;} .spot1 { padding: 5px 0px 5px 16px; font-size: 13px; border-left: 12px solid #4EA103; margin: 16px 0px 5px 0px; float: none; border-bottom: 1px solid #66D303; width: 80%;} .handmade { border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #666699; border-bottom-color: #666699; margin-top: 25px; margin-bottom: 20px; background-color: #FFFFCC; padding: 5px;} .keyI { width: 40%; float: right; padding: 1px 3px 3px; margin: 1px 0px 4px 20px;} .keyI li { font-size: 13px; font-weight: normal; line-height:18px; } .esearch { border-top: 1px solid #66D303; border-bottom: 1px solid #66D303; padding: 4px 0 4px 11px; font-size: 0.90rem; font-weight: 600; } #rhColmenu { max-width: 100%; margin: 5px 0px 20px -4px;} #rhColmenu a { display: block; background-image: url(/images/ch/osteo.jpg); background-repeat: no-repeat; height: auto; margin: 6px -2px 6px 0px; padding: 7px 8px 8px 35px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; text-decoration: none; color: #006633; font-size: 95%; font-weight: bold; background-position: left; text-align: left; border-right: 1px solid #999999;} #rhColmenu a:hover { background-color: #009900; color: #FFFFFF;} #specials { height: 60px; width: 100%; margin-bottom: 20px; margin-top: 3px; padding-bottom: 8px;} #consultations { background-image: url(https://shop.crystalherbs.com/images/ch/catherine_mugshot.jpg); max-width: 100%; height: auto; background-repeat: no-repeat; padding-left: 50px; border-bottom: medium solid #da3ab3; border-top: thin solid #da3ab3; background-color: #FFFFFF; margin: 25px 0px 10px 0px;} .socialcol { border-top: 2px solid #B967B9; border-bottom: 2px solid #B967B9; min-height: 25px; padding-top: 6px; clear: both; width: 100%; float: left; padding-bottom: 4px; margin: 18px 0px 12px;} a img { border: none;} .socialcol img { margin: 2px 4px; }.join a { display: block; padding: 8px 15px 8px 15px; font-size: 108%; margin: 12px 0px 5px 0px; border: 1px solid #66D303; font-weight: bold; color: #036; width: 45%; background-color: #E6E8EA; text-align: center;} .FB { background:url('/images/ch/social/social_sprites.png') -4px -0px; width:27px;height:27px;} .GO { background:url('/images/ch/social/social_sprites.png') -35px -0px; width:27px;height:27px;} .INST { background:url('/images/ch/social/social_sprites.png') -66px -0px; width:27px;height:27px;} .PI { background:url('/images/ch/social/social_sprites.png') -97px -0px; width:27px;height:27px;} .TW { background:url('/images/ch/social/social_sprites.png') -128px -0px; width:27px;height:27px;} .FB-m {background:url('https://www.crystalherbs.com/images/social/social_sprites_l.png') -1px -0px;width:50px;height:42px;} .INST-m {background:url('https://www.crystalherbs.com/images/social/social_sprites_l.png') -55px -0px;width: 50px;height: 42px;} .YOU-m {background:url('https://www.crystalherbs.com/images/social/social_sprites_l.png') -110px -0px;width: 49px;height: 42px;} .TW-m {background: url('https://www.crystalherbs.com/images/social/social_sprites_l.png') -168px -0px;width: 50px;height: 42px;} .PI-m {background: url('https://www.crystalherbs.com/images/social/social_sprites_l.png') -223px -0px;width: 50px;height: 42px;} .VIM-m {background: url('https://www.crystalherbs.com/images/social/social_sprites_l.png') -275px -0px;width: 50px;height: 42px;} .join a:hover { background-color: #009900; color: #FFFFFF;} .field { padding: 8px 10px 8px 10px; font-size: 102%; margin: 5px 0px; border: 1px solid #036; width: 50%;} /* ======================================================================== PAGE - Home page and custom page (CMS) ======================================================================== */ #custompagetext { margin: 20px 0 15px 0; } #homepage div.chunk ul { list-style: none; margin: 0; padding: 0; } #homepage div.chunk ul li { padding: 0 0 5px 0 } #homepage .news ul li { width: 205px; margin: 0 20px 30px 0; float: left; } #homepage .news ul div.news_lastupdated, #homepage .news ul div.news_datecreated { display: block; margin: 5px 0 0 0; color: #090; font-size: 12px; } #homepage .news ul div.news_link a { font-size: 14px; font-weight: bold; color: #000; margin: 5px 0 5px 0; } #homepage .news ul div.news_text { line-height: 15px; font-size: 13px; } /* ======================================================================== CATEGORY - Single page category ======================================================================== */ .category .main { display: block; padding: 2px 0 5px 0; border: 0; box-sizing: border-box; } .category .main .imageblock { text-align: center; float: left; margin: 0 30px 0px 0; overflow: visible; width: 100px; } .category .main .imageviewer_holder { text-align: center; float: left; margin: 0 25px 6px 0; overflow: visible; width: 150px; height: 150px; display: none;} .category .main .pad { margin: 0 0 0 0; zoom: 100%; /* To fix IE 'invisible text' rendering bug (http: //archivist.incutio.com/viewlist/css-discuss/57305) */; overflow: hidden; /* To fix image flow in extended view, mozz/opera */ } /* ======================================================================== CATEGORY FILTERS - if you have the PowerPack installed ======================================================================== */ .page_category #filterbar_pad { padding: 3px 10px 10px 0; background: #fff; } .page_category #customprice { padding: 5px 0; } .page_category .filterattributes { padding: 15px 0 10px 0; } .page_category .shorttext { display: inline-block; } .page_category select, .page_category input { margin: 1px 0 3px 5px; } .page_category label, .page_category span.attribute_title { font-size: 11px; text-transform: uppercase; display: inline-block; letter-spacing: 0px; color: #777; margin-bottom: 3px; font-weight: normal; vertical-align: top; } .page_category table { margin: 0 0 10px 0; background: none; border-bottom: solid 1px #ccc; } .page_category table tr td { background: #fff; padding: 1px; border: none; } .page_category table tr td label { color: #333; text-transform: none; font-size: 100%; } /* ======================================================================== SUBCATEGORIES - Multiple categories/subcategories per page listing ======================================================================== */ .subcategories { padding: 0px 0px 10px 0px; overflow: hidden; } .subcategories .pad { margin-bottom: 8px; padding: 0px; zoom: 100%; /* To fix IE 'invisible text' rendering bug (http: //archivist.incutio.com/viewlist/css-discuss/57305) */; overflow: hidden; /* To fix image flow in extended view, mozz/opera */ } .subcategories h2 a { color: #036;} /* ------------------------------------------------------------------------ SUBCATEGORIES - NORMAL FORMAT ------------------------------------------------------------------------ */ .subcategories_normal { padding-top: 0 } .subcategories_normal .item { padding: 3px 0; border-top: solid 1px #fc5; } .subcategories_normal .item .imageblock { text-align: center; margin-top: 5px; } .subcategories_normal .item .details { } .subcategories_normal .item h2 { font-size: 110%; margin: 10px 0 0 0; } .subcategories_normal .item h2 a { margin-top: 0; font-weight: bold; } .subcategories_normal .item .minprice { font-weight: bold; padding: 0 0 20px 0; } .subcategories_normal .item .strapline { display: block; margin: 4px 0px 4px 0px; padding: 0; color: #111; font-weight: bold; font-style: normal; } .subcategories_normal .item p.description { padding: 0 0 10px 0 } .subcategories_normal .item a.link2 { display: inline-block; font-size: 90%; margin: 0 0 10px 0; } /* ------------------------------------------------------------------------ SUBCATEGORIES - SHORTENED FORMAT ------------------------------------------------------------------------ */ .subcategories_shortened { } .subcategories_shortened .item { text-align: center; width: calc(25% - 4px); display: block; float: left; padding: 2px; box-sizing: border-box; border: solid 4px #f6f6f6; height: 280px; margin: 2px 2px; overflow: hidden;} .subcategories_shortened .item .box { border: solid 4px #f6f6f6; height: 260px; } .subcategories_shortened .item:hover .box { border: solid 4px #fff; } .subcategories_shortened .item:hover { border: solid 1px #fc5; } .subcategories_shortened .item .box .pad { overflow: hidden; padding: 0.5rem 0.6rem; text-align: center; } .subcategories_shortened .item .topsec { height: 65px; } .subcategories_shortened .item h2 { margin: 0; padding: 7px 8px 0 8px; font-weight: bold; font-size: 100%; line-height: 1.3rem; } .subcategories_shortened .item h2 a { font-size: 70%; line-height: 1.3rem; } .subcategories_shortened .item .imageholder { display: block; margin: 0 auto; padding-bottom: 10px; height: 100% !important; } .subcategories_shortened .imagelink { display: block; float: left; margin: 0 0 10px 0; text-align: center; } /* ------------------------------------------------------------------------ SUBCATEGORIES - LINK FORMAT ------------------------------------------------------------------------ */ .subcategories_link { padding: 10px 0 10px 0 } .subcategories_link a { display: block; white-space: nowrap; margin-bottom: 5px; } /* ------------------------------------------------------------------------ SUBCATEGORIES - TEXT FORMAT ------------------------------------------------------------------------ */ .subcategories_text { padding-top: 0px } .subcategories_text h2 { } .subcategories_text .item .pad { background: none; border: none; padding: 0; margin: 0; } .subcategories_text .item .pad p { margin: 4px 0 8px 0 } /* ======================================================================== PRODUCT - Single page product ======================================================================== */ .product #strapline { display: block; margin: 10px 0px 12px 0px; padding: 0; color: #006600; font-weight: bold; font-size: 95%; } .product #description { margin: .65rem 0 .15rem; font-weight: normal; line-height: 1.6rem;} .product div.imagecolumn { margin: 0 0 0px 0; padding: 10px 20px 0 0; width: 25%;} .product div.imagecolumn div.pad { padding: 10px 0 10px 0 } .product div.imagecolumn .imageviewer { width: 100% } .product div.imagecolumn .singleimage { } .product div.imagecolumn .largeview { } .product div.textcolumn #comparelink { margin: 5px 0 0 0 } .product div.textcolumn { padding: 0 0 20px 10px; } .product div.versions-holder { float: right; } .product .section_promotions { } .mainimage img { width: auto; } /* ======================================================================== PRODUCTS - Multiple products per page listing ======================================================================== */ .products { padding: 0px 0px 10px 0px; overflow: hidden; } .products .minprice { display: block; font-weight: bold; padding-top: 10px; color: #090; } .products .pad { margin-bottom: 8px; padding: 0px; zoom: 100%; /* To fix IE 'invisible text' rendering bug (http: //archivist.incutio.com/viewlist/css-discuss/57305) */; overflow: hidden; /* To fix image flow in extended view, mozz/opera */ } #popup .pad { padding: 10px } .products h2 a { color: #036; } .carryonshopping h2 a { font-size: 90%; line-height: 1.2rem;} /* ------------------------------------------------------------------------ PRODUCTS - NORMAL FORMAT ------------------------------------------------------------------------ */ .products_normal { padding-top: 0px } .products_normal .item { padding: 3px 0; border-top: solid 1px #fc5; } .products_normal .item .imageblock { text-align: center; margin-top: 5px; } .products_normal .item .details { } .products_normal .item .details h2 { font-size: 110%; margin: 10px 0 0 0; } .products_normal .item h2 a, .products_normal .item h2 a:hover { margin-top: 0; font-weight: bold; text-decoration: none; } .products_normal .item .minprice { font-weight: normal; padding: 0 0 10px 0; } .products_normal .item .strapline { display: block; margin: 4px 0px 4px 0px; padding: 0; color: #888; font-weight: normal; } .products_normal .item p.description { padding: 0 0 0 0 } .products_normal .item a.link2 { display: inline-block; font-size: 90%; margin: 0 0 10px 0; } .products_normal img { width: auto; } /* ------------------------------------------------------------------------ PRODUCTS - SHORTENED FORMAT ------------------------------------------------------------------------ */ .products_shortened { } #featuredproducts .products_shortened { margin: 10px 0 15px 0;} .products_shortened .item { text-align: center; width: calc(25% - 14px); background-color: #fff; display: block; float: left; padding: 15px 6px 0px; box-sizing: border-box; border: solid 1px #66D303; height: 280px; margin: 7px 7px; border-radius: 10px;} #featuredproducts .products_shortened .item {height: 300px;} .products_shortened .item:hover { border: solid 4px #fc5; } .products_shortened .item .box .pad { overflow: hidden; padding: 7px; text-align: center; } .products_shortened .item .topsec { height: 65px; } .products_shortened .item h2 { margin: 0; padding: 0; line-height: 15px; font-weight: bold; text-decoration: underline; } .products_shortened a { text-decoration: none; } .products_shortened h2:hover { text-decoration: none; color: #F60;} .products_shortened .item a h2 { font-size: 100%; line-height: 1.3rem; } .products_shortened .item .strapline { display: none; } .products_shortened .item .imageholder { display: block; margin: 0 auto 10px auto; padding-bottom: 10px; } .products_shortened .imagelink { display: block; float: left; margin: 0 10px 10px 0; text-align: center; } .products_shortened .minprice { font-weight: bold; font-size: 1.0rem; text-decoration: none; } .products_shortened img { width: auto; } /* ------------------------------------------------------------------------ PRODUCTS - TABULAR FORMAT ------------------------------------------------------------------------ */ .products_tabular .item { border: solid 1px #ccc; text-align: center; width: 192px; float: left; padding: 0; margin: 5px 10px 5px 0; } .carryonshopping .products_tabular .item { width: 30%; float: left; margin: 5px 10px 5px 0;} .related .carryonshopping { margin: 0px 0 0 5px; border-top: none;} .related .carryonshopping .products_tabular .item { width: 11%;} .related .carryonshopping h2 a { font-size: 75%; line-height: 1.2rem; font-weight: 600;} .related .imageblock { height: 100px;} .related .products_tabular .item .box { height: 170px; border: none;} .related .imageholder img { height: 90px;} .related .products { padding: 0px; overflow: hidden;} .related .products_tabular .item { border: none;} .related .products_tabular .item .box .pad { padding: 0px;} .related .products_tabular .item:hover { border: none; } .related h3 {margin:0; padding: 0;} .products_tabular .item:hover { border: solid 1px #fc5; } .products_tabular .item .imageblock { margin: 0; } .products_tabular .item .box { text-align: center; border: solid 4px #f6f6f6; height: 225px; background-color: #fff; } .products_tabular .item:hover .box { border: solid 4px #fff; } .products_tabular .item .box .pad { overflow: hidden; padding: 10px; text-align: center; } .products_tabular .item .topsec { height: 65px; } .products_tabular .item h2 { margin: 0; padding: 0; line-height: 15px; font-weight: bold; font-size: 110%; } .products_tabular .item .imageholder { display: block; margin: 0 auto; padding-bottom: 10px; } /* ------------------------------------------------------------------------ PRODUCTS - IMAGE ONLY FORMAT ------------------------------------------------------------------------ */ .products_imageonly { padding-top: 0px; } .products_imageonly .item { padding: 3px; display: inline-block; float: left; border: solid 1px #ccc; margin: 3px 8px 3px 0; text-align: center; } .products_imageonly .item:hover { border: solid 1px #fc5; } .products_imageonly .box { background-color: #fff; border: solid 3px #fff; text-align: center; } .products_imageonly img { margin: 0 auto; float: none; } /* ------------------------------------------------------------------------ PRODUCTS - EXTENDED FORMAT ------------------------------------------------------------------------ */ .products_extended { padding-top: 0 } .products_extended .item { padding: 20px 0px 5px 0px; } .products_extended .item .imageblock { text-align: center; margin-top: 5px; } .products_extended .item .details { } .products_extended .item h2 { font-size: 110%; margin: 10px 0 0 0; margin: 0; padding: 0; } .products_extended .item h2 a, .products_extended .item h2 a:hover { font-size: 110%; margin-top: 0; font-weight: bold; text-decoration: none; } .products_extended .item .strapline { display: block; margin: 4px 0px 4px 0px; padding: 0; color: #006600; font-weight: normal; font-style:normal; } .products_extended .item p.description { padding: 5px 0px 20px 0px; } .products_extended .item a.link2 { font-size: 90% } .products_extended .item .versions { margin: 0 0 2.0rem 0; border: none; padding: 0; background-color: #fff; border-radius: 0;} .products_extended .item .versions table thead { background-color: white;} /* ------------------------------------------------------------------------ VERSIONS ------------------------------------------------------------------------ */ .versions { width: auto; border: 1px solid #66D303; box-shadow: 5px 6px whitesmoke; margin: 2.0rem 0 1.5rem 0; padding: 2% 2% 1%; background-color: whitesmoke; border-radius: 10px;} .versions table { border: none } .versions table tr.description { } .versions table tr td { text-align: center; padding: 12px 2px 12px 10px; vertical-align: top; border-bottom: solid 1px #ddd; } .versions table tr.description td { border: none } .versions table tr.headrow th, .versions table thead tr th { text-align: center; padding-right: 5px; } .versions td.extra { padding: 5px 0 15px 4px; background-image: none; background-color: transparent; } /* --- cells (td and th) --- */ .versions .info, .versions .description { text-align: left } .versions .description { display: block; color: #555; font-size:90% } .versions .description .imageholder { float: left; margin: 0 10px 10px 0; } /* --- cells (td only) --- */ .versions th.price { white-space: nowrap; } .versions td.info { color: #777; vertical-align: middle; padding: 1.5rem 0.5rem; } .versions td.info .name { font-weight: bold; color: #004777; font-size: 100%; line-height: 1.5rem; } .versions td.rrp { font-weight: normal; color: #f00; width: 10%; white-space: nowrap; text-decoration: line-through; } .versions td.price { font-weight: bold; color: #060; width: 12%; white-space:nowrap; padding:2px 10px 2px 10px; vertical-align: middle;font-size: 110%;background-color:#f0f0f0; border-bottom: 1px solid #ddd; } .versions td.price.inctax { font-size: 112%; padding: 10px 9px 7px 10px;} .versions td.weight { font-size: 80%; padding: 10px 0px 8px 0px;} .versions td.addtobasket img { float: none; } .versions td.addtobasket { white-space: nowrap; width: 25%; touch-action: none; vertical-align: middle; } .versions td.addtobasket div { background-color: transparent; background-image: none; display: inline; } .versions .imageviewer_holder { margin: 0 10px 5px 0; } .versions .cancustomizetag, .versions td.addtobasket div.cancustomizetag { vertical-align: middle; display: inline-block; width: 15px; height: 15px; background-image: url(Images/icon_customizable.png); background-position: top left; background-repeat: no-repeat; float: left; margin: 5px 5px 0 5px; } /* --- versions in dropdown format --- */ .versions .prices { padding: 5px; text-align: right; color: #666; text-transform: uppercase; } .versions span.inctax { margin-left: 5px } .versions span.figure { color: #090; font-weight: bold; font-size: 130%; } .versions .line { text-align: right; padding: 0px; } .versions .multipleversiondropdown { background-color: #f5f5f5; border-top: solid 1px #f90; border-bottom: solid 1px #ddd; } .versions .addtobasket { clear: both } .versions .addtobasket .dropdown { width: 49px; cursor: pointer; margin: 0px 12px 0px 20px; border-radius: 4px; } .versions .addtobasket .textbox { width: 85px } .versions .addtobasket div.selector { white-space: nowrap; text-align: right; float: right; } .versions .addtobasket div.outofstock { color: #f00; font-weight: bold; } .versions .addtobasket span.outofstock { color: #f00; font-weight: bold; } .versions td.info .codenumber { display: none;} .boxinset.line {margin: 0px 0px 60px 0px; } /* ------------------------------------------------------------------------ OPTIONS ------------------------------------------------------------------------ */ .options { border-top: solid 1px #f90; margin-top: 10px; padding-bottom: 20px; } .options .pad { } .options .addtobasket { text-align: right; padding: 5px; clear: both; } .outofstockmessage em { display: block; margin-top: 10px; } .options .option { border-bottom: solid 1px #ddd; background-color: #f5f5f5; clear: both; padding: 8px 5px 3px 0; margin: 0; } .options .option label { text-transform: none; font-size: 100%; display: block; } .options .option label.optiontitle { display: inline-block; color: #036; font-weight: bold; width: 180px; float: left; } .options .option label.optiontitle span.optiondesc { display: block; font-weight: normal; color: #666; font-size: 12px; } .options .option div { display: block; margin: 0px; } .options .option select { width: auto; } .options .option table.checkboxlist input, .options .option table.radiobuttonlist input { display: block; float: left; margin-right: 5px; border-style: none; background-color: transparent; width: 16px; } .options .option ul.radiobuttonlist li label { text-transform: uppercase; color: #444; font-size: 75%; } .options .highlight_error { padding: 0 5px 0 3px; display: inline-block; color: #fff; font-weight: bold; text-decoration: blink; background-color: #f00; border-radius: 3px; } .boxinset .addtobasket .prices { display: block; text-align: right; } .options div.addtobasket img { float: none; text-align: right; } div.addtobasket { width: auto; text-align: left; padding: 5px; } div.addtobasket div { display: inline } /* Individual options lines */ .options table, .options table tr td { border: none; background-image: none; background-color: Transparent; } /* ======================================================================== QUANTITY DISCOUNTS ======================================================================== */ #section_quantitydiscounts { border: none; margin: 5px 0 0 0; } #section_quantitydiscounts th.name { text-align: left; color: #000; font-size: 100%; text-transform: none; font-weight: bold; } #section_quantitydiscounts td.price, #section_quantitydiscounts th.price, #section_quantitydiscounts td.quantity, #section_quantitydiscounts th.quantity { text-align: right } #section_quantitydiscounts td.price { color: #090; font-weight: bold; } #section_quantitydiscounts p { margin: 0 0 20px 0 } /* ======================================================================== SEARCH ======================================================================== */ .search .inputform { padding: 0; height: 40px; } .search .inputform .small { width: 50px; text-align: right; } .search .inputform span { display: inline; float: none; margin: 0px 5px 0px 5px; } .search .inputform input { display: inline; } .search .inputform div.advanceline { margin: 5px 0px 0px 5px; display: block; } .search .results { border-top: solid 1px #fc5; padding-top: 10px; margin-top: 5px; } .search .results #searchsummary { padding: 0.5rem 0 0.3rem 0; margin: 0 0 0.5rem 0; color: #036; border-bottom: 2px solid #da3ab3; } .search .results #searchsummary strong { color: #000 } .search .results .products_classicsearch { padding: 15px 0 17px 0 } .search .results .products_classicsearch .item { } .search .results .products_classicsearch .item .box .pad { padding: 5px 0 15px 0 } .search .results .products_classicsearch .item .imageblock { text-align: center; float: left; margin: 0 0 0 5px; overflow: visible; width: 150px; } .search .results .products_classicsearch .item .details { float: left; } .search .results .products_classicsearch .item h2 { font-size: 110%; padding: 0; margin: 0 0 3px 0; } .search .results .products_classicsearch .item h2 a { color: #04d; text-decoration: underline; } .search .results .products_classicsearch .item .highlight { background-color: #fd6; color: #d30; } .search .results .products_classicsearch .item .minprice { font-weight: normal; color: #090; padding: 5px 0 5px 0; } /* ======================================================================== KNOWLEDGEBASE ======================================================================== */ #knowledgebase .inputform { padding: 20px 0 10px 0; height: 20px; } #knowledgebase .inputform .small { width: 50px; text-align: right; } #knowledgebase .inputform label { display: inline; width: auto; float: none; margin: 0px 5px 0px 5px; } #knowledgebase .results { padding: 13px 0 7px 0 } #knowledgebase .results #searchsummary { padding: 0; margin: 0 0 0 0; color: #666; } #knowledgebase .results #searchsummary strong { color: #000 } #knowledgebase .results .item { padding: 5px 0 5px 0; max-width: 630px; } #knowledgebase .results .item h2 a { font-size: 80%; color: #04d; font-weight: normal; text-decoration: underline; } #knowledgebase .results .item .highlight { background-color: #fd6; font-style: italic; } #knowledgebase .summary { color: #aaa; font-weight: normal; padding: 0 0 10px 0; } #knowledgebase .updatedate { color: #aaa; font-weight: normal; } #knowledgebase p.article { padding: 10px 0 0 0 } /* ======================================================================== SUPPORT TICKETS ======================================================================== */ #supporttickets .section { border: none; } #supporttickets td.idfield { width: 45px } #supporttickets td.subject { font-weight: bold } #supporttickets td.opened { width: 100px } #supporttickets td.closed { width: 100px } #supporttickets td.selectfield { width: 55px; text-align: right; } #supporttickets div.userreply { border-top: solid 1px #ccc; margin: 10px 0 5px 0; padding: 3px 15px 10px 15px; background-color: #f5f5f5; } #supporttickets div.ownerreply { border-top: solid 1px #fc5;margin: 10px 0 5px 0; padding: 3px 15px 10px 15px; background-color: #fe9; } #supporttickets p.details { color: #999; padding-bottom: 5px; } #supporttickets p.message { white-space: pre-wrap } #supporttickets textarea { width: 100%; height: 150px; } #supporttickets .expirywarning { display: block; width: auto; border: dotted 1px #999; color: #999; background-color: #f6f6f6; padding: 3px 9px 3px 9px; margin: 2px 0 15px 0; } #supporttickets .expiredwarning { display: block; width: auto; border: dotted 1px #f00; color: #f00; background-color: #f6e6e6; padding: 3px 9px 3px 9px; margin: 2px 0 15px 0; } #supporttickets .filled .sp_highlight_ticket td { background-color: #fd5 } /* ======================================================================== REVIEWS AND CROSS-SELLING ======================================================================== */ .reviews { margin: 0 0 10px 0 } .reviews .reviews_list { margin: 5px 0 20px 0 } .reviews .box { } .reviews .ratingStar { font-size: 0pt; width: 13px; height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; } .reviews .review { margin: 0 0 10px 0 } .reviews .review .pad { padding: 0 0 10px 0 } .reviews .review .stars { display: block; margin-right: 2px; width: 100%; } .reviews .review .reviewer { padding: 2px 0 5px 0; font-style: italic; color: #888; } .reviews .review .date { float: right; color: #090; } .reviews .review strong { font-size: 110%; font-style: italic; color: #333; } /* Review add page */ .addreview { margin: -2px 0 10px 0 } .addreview form strong { display: block } .addreview form p { margin: 0px 0px 5px 180px } .addreview textarea { height: 100px; } .addreview h3 { } /* ======================================================================== PRODUCT ATTRIBUTES ======================================================================== */ .attributes { width: auto; margin: 5px 0 25px 0; display: block; } /* ======================================================================== PRODUCT PROMOTIONS ======================================================================== */ .section_promotions { border-top: solid 1px #fc5; padding: 10px 0px 0px;} .product .section_promotions { border-top: solid 1px #fc5; padding: 10px 20px 0px 20px; background-color: #FFFFCC; } .section_promotions .promotion { clear: both; vertical-align: middle; margin: 8px 0px 8px 0px; display: block; } .section_promotions .promotion .box { width: 100%; margin: 0; } .section_promotions .promotion .box .pad { padding: 0; overflow: hidden; } .section_promotions .promotion .box .pad strong { color: #000 } .section_promotions a { text-decoration: none; color: #777; border-bottom: dotted 1px #777; } .section_promotions .promotion .box .pad .imageblock { float: left; margin: 0 20px 0 0px; width: 70px; text-align: center; } .section_promotions .promotion .box .pad .imageblock img { float: none } /* ======================================================================== PRODUCT COMPARISON ======================================================================== */ .comparison { } .comparison p { margin: 0 0 20px 0 } .comparison .items { } .comparison .item { text-align: center; } .comparison .item h2 { font-size: 105%; margin: 0 0 0 0; padding: 0; height: 30px; } .comparison .item h2 a { color: #000; } .comparison .item .imageblock { float: none; margin: 0 0 5px 0; } .comparison .item p.minprice { font-weight: bold; color: #090; margin: 0 0 20px 0; } .comparison .item table { margin-bottom: 10px; text-align: left; } .comparison .item table tr td { border-top: solid 1px #fff; background-color: #eee; background-image: none; padding: 3px 10px 2px 5px; } .comparison .item .removelink { text-align: left } /* ======================================================================== LOGIN / MY ACCOUNT ======================================================================== */ #login .recoverpassword { margin-top: 30px; padding-top: 10px; } #login .radio strong { color: #000; font-size: 110%; } #login .Kartris-DetailsView-Data { width: 100% } /* ======================================================================== PASSWORD STRENGTH ======================================================================== */ .barIndicator_poor, .barIndicator_weak, .barIndicator_good, .barIndicator_strong, .barIndicator_excellent { z-index: 100002; background-image: url(Images/pws_bar.png); background-position: top right; background-repeat: no-repeat; margin: 3px 0 0 -9px; } .barIndicatorBorder { margin: 2px 0 0 -10px; width: 110px; z-index: 100002; background-image: url(Images/pws_background.png); background-position: top left; background-repeat: no-repeat; } /* ======================================================================== CARRY ON SHOPPING / CROSS SELLING ======================================================================== */ .carryonshopping { margin: 30px 0 0 0; border-top: 7px solid #ddd; } /* ======================================================================== ADDRESSES ======================================================================== */ .address { padding: 15px 10px; background-color: whitesmoke; border: 1px solid #66D303; margin: 1.3rem 1.8rem 0.8rem 0; border-radius: 10px;} #checkout .address { width: 100%; display: inline-block;} .address div { line-height: 1.3rem;} .address .inputform div.Kartris-DetailsView-Value { width: 260px; max-width: 100%; } .address .inputform .bold { font-weight: bold } .address div.phone { font-weight: bold; padding: 5px 0 5px 0; } /* ======================================================================== BASKET (and ORDER DISPLAY in MY ACCOUNT) ======================================================================== */ #page_basket h1 { padding: 0.6rem 0 0.5rem 0 !important; margin: 0.3rem 0 1.5rem 0 !important; border-bottom: 2px dotted #da3ab3;} .basket .basketwarning { display: block; width: auto; border: solid 1px #f00; color: #d00; font-weight: bold; background-color: #fcc; padding: 3px 9px 3px 9px; margin: 2px 0 15px 0; } .basket .baskettable { margin-bottom: 2.5rem; } .basket .baskettable tr th { padding: 20px 0 15px; } .basket .baskettable tr th.name { } .basket table.baskettable tr td { background-color: #fff; vertical-align: middle; } .basket .products_imageonly { margin-top: 8px; } .basket td.image_cell { width: 90px; text-align: center; padding: 0 10px 5px 5px; } .basket .item { background-color: #fff; border: solid 1px #ddd; margin: 5px 0 0 0; padding: 4px; border-radius: 10px; } .basket .item .box { margin: 0; padding: 2px; } .basket .extax, .basket .inctax, .basket .price, .basket .quantity, .basket .remove { width: 10%; text-align: center; white-space: nowrap; min-width: 62px; } .basket .tax, .basket .total { text-align: center; white-space: nowrap; } .basket table.baskettable tr td div.name strong a, .basket table.baskettable tr td div.name strong { display: block; width: 100%; font-weight: bold; padding: 5px 0 0 0; color: #036; font-size: 0.95rem; line-height: 1.3rem; } .basket table.baskettable tr td div.details { display: block; width: 100%; margin: 0; } .basket table.baskettable tr td div.details div.info { display: block; padding: 0 0 2px 0; } .basket table.baskettable tr td div.details div.info strong { color: #777 } .basket table.baskettable tr td div.info { padding: 0px 5px 1px 0px; } .basket table.baskettable tr.product_row td div.info { } .basket td.quantity { vertical-align: middle; width: 10%; text-align: center; } .basket td.quantity div { } .basket td.quantity input { width: 45px; text-align: center; height: 45px; font-weight: bold; position: relative; bottom: -9px; border:1px dotted #090; border-radius: 5px;} .basket td.quantity div.smallupdateprogress { position: relative; float: left; } .basket td.extax, .basket td.inctax, .basket td.tax, .basket td.price { font-weight: bold; color: #090; width: 10%; font-size: 1.09rem; vertical-align: middle; padding: 5% 0%; white-space: nowrap;} .basket td.total { font-weight: bold; width: 20%; font-size: 110%; color:#036; white-space: nowrap; padding: 5% 2%; vertical-align: middle; } .basket .totals .extax { padding: 18px 0px 12px 20px !important;} .basket th.remove, .basket td.remove { width: 30px; vertical-align: middle; } .basket .applycoupon td label { color: #000; font-weight: bold; margin: 20px 0 10px 0; } .basket .applycoupon .couponbox { width: 300px; margin: 4px 0 15px 0; border: 1px dashed green; border-radius: 5px;} .basket table tr.totals td { background-color: #fff; } .basket table tr.totals #totaltaxrow, .basket table tr.totals #totallabel { text-align: right } .basket table tr.totals .total { font-size: 185%; padding: 18px 20px 12px; text-align: right;} .basket .controls { text-align: center; margin: 8px 0 20px 0; } .basket .promotions { margin: 10px 0 10px 0 } .basket .links { display: none; margin: 10px 0 20px 0; } .basket .links div { width: 30%; margin: 10px 20px 0 0; padding: 0; float: left; } .basket .links div p { margin: 0; padding: 8px 4px 0 0; } .basket .links img { margin-right: 4px } .basket .continueshopping { margin-top: 8px; text-align: right; } .basket .continueshopping .submit { float: left; text-align: left; } /* shipping select dropdown menu */ .basket tr.shippingrow div.smallupdateprogress { float: left; margin-top: -20px; } .basket tr.couponrow div.smallupdateprogress { } .basket table .totals { border-bottom: solid 1px #eee; background-color: #fff; } .basket table.baskettable tr.footerrow td { background: none; font-weight: bold; color: #f00; text-align: right; white-space: nowrap; border-top: dotted 1px #bbb; } .basket table.baskettable tr.footerrow td.subtotal { border-top: dotted 1px #bbb; color: #bbb; } .basket table.baskettable tr.footerrow td.subtotal span.totallabel { color: #bbb } .basket table.baskettable tr.footerrow td.grandtotal { border-top: dotted 1px #daa; border-bottom: dotted 1px #daa; background-color: #fdd; } .basket table.baskettable tr.footerrow td span.totallabel { float: left; width: 150px; color: #000; text-align: left; } #shippingestimate { margin: 15px 0 30px 0; background: #f0eded; border-radius: 10px; padding: 10px;} #shippingestimate select { padding: 1%; height: auto; width: auto;} #shippingestimate table { margin: 10px 0 0 0 } #shippingestimate table td.name { font-weight: bold; color: #036; padding: 5% 2%; } #shippingestimate table td.datafield { border: 1px solid green; border-radius: 7px; padding: 0 0.8rem 0.5rem 0.8rem; background-color: whitesmoke; vertical-align: middle; } /* ======================================================================== CHECKOUT ======================================================================== */ /* shipping */ #checkout .basket table.baskettable tr.product_row td div.info { } #checkout span.ship_currency { display: block; text-align: left; color: #bbb; font-weight: bold; padding: 5px 0 5px 0; } #checkout span.ship_currency span.figure { color: #090; font-weight: bold; padding: 0 0 0 5px; } #checkout span.free { color: #090; font-weight: bold; padding: 0; } #checkout span.extax, #checkout span.inctax { padding-right: 10px } #checkout textarea { width: 100%; border:1px dashed green; border-radius:5px;} #checkout span.checkbox { display: block; padding: 10px 0 10px 0; } #checkout .checkoutaddress { width: 95% !important; float: left; margin: 5px;} #checkout #confirmation .checkoutaddress { } #checkout .checkoutaddress .noaddress { width: 90%; height: 120px; margin: 10px 30px 10px 0; overflow: hidden; float: left; padding: 10px; border: dashed 1px #999; } #checkout #checkoutbasket { margin: 20px 0 20px 0 } #checkout .basket th.total, #checkout .basket td.total { width: 10%; } #checkout .basket .totals td.total { background-color: #069; color: white; border-radius: 18px; text-align: center;} #checkout #euvatsection strong { float: right; font-size: 130%; color: #999; } #checkout tr.totals span { display: inline-block; } /* ======================================================================== WISHLIST ======================================================================== */ #page_wishlist { margin-bottom: 30px; } #page_wishlist table { } #page_wishlist table th { } #page_wishlist table td { color: #000; vertical-align: top; background-color: #fff; border-top: solid 1px #fff; background-position: top left; background-repeat: repeat-x; padding: 5px 5px 10px 5px; } #page_wishlist table td a { display: block; color: #04d; font-weight: bold; margin: 0 0 5px 0; padding: 0; } #page_wishlist table td span.versioncode { color: #888 } /* ======================================================================== MY ACCOUNT / CUSTOMER AREA ======================================================================== */ #customer table.filled td.itemname { width: 170px } #customer .section { margin-bottom: 30px } #customer .vieworder .Kartris-DetailsView-Data ul li { min-height: 0px; padding-top: 1px; } #customer .vieworder .Kartris-DetailsView-Data ul li img { margin-right: 5px } #customer .basket .baskettable { border-bottom: none; margin-top: 20px; } #customer a.link2, span.link2 a, #cntMain_KartrisLoginStatus2 { padding: 7px 15px; text-transform: uppercase; font-size: 95%; font-weight: bold; text-decoration: none; color: #036; margin: 10px 10px 10px 0px; border-radius: 3px; display: inline-block; background-color: whitesmoke; border: 1px solid #da3ab3;} .label { padding: 0.75rem 0.75rem; font-size: 0.75rem; border-radius: 5px;} #customer-balance {float: right;} /* ======================================================================== ORDER HISTORY / MY ACCOUNT ======================================================================== */ #orderhistory table tr th.number { width: 45px } #orderhistory table tr th.orderdate { width: 130px } #orderhistory table tr th.lastupdate { width: 120px } #orderhistory table tr th.amount { text-align: right; width: 60px; } #orderhistory table tr td.amount { font-weight: bold; text-align: right; } #orderhistory .radio strong { color: #000 } /* ======================================================================== AFFILIATES / MY ACCOUNT ======================================================================== */ #affiliates table.filled td.value, #affiliates table.filled th.value { width: 70px; text-align: right; font-weight: bold; padding-right: 10px; } #affiliates table.filled td.value_percent, #affiliates table.filled th.value_percent { width: 70px; text-align: right; padding-right: 10px; } #affiliates table.filled td.commission, #affiliates table.filled th.commission { width: 80px; text-align: right; padding-right: 10px; } #affiliates table.filled td.total, #affiliates table.filled th.total { width: 70px; text-align: right; font-weight: bold; padding-right: 10px; } #affiliates table.filled td.paid, #affiliates table.filled th.paid { width: 40px; text-align: right; } #affiliates table.filled td.month, #affiliates table.filled th.month { width: 120px; text-align: left; height: 42px; } #affiliates div.halfwidth { display: block; float: left; width: 48%; } #affiliates div#rawsales { float: right } /* ======================================================================== NEWS - News page and front page news items (summary) ======================================================================== */ #news div.news_strapline { font-weight: bold; padding: 0 0 5px 0; color: #111; } #news div.news_lastupdated, #news div.news_datecreated { margin: 5px 0; color: #090; } #news div.news_text { margin: 5px 15px 115px 0px; } #news #summary ul li { background-color: #f5f5f5; border-bottom: solid 1px #ddd; padding: 0 0 10px 0; } #news #summary ul { border-top: solid 1px #fc5; margin: 0 0 20px 0; list-style-type: none; padding: 0; } #news #summary ul div.news_lastupdated, #news #summary ul div.news_datecreated { font-size: 12px; display: block; width: 90px; margin: 5px; color: #090; float: left; } #news #summary ul div.news_link a { font-weight: bold; margin: 5px 0 0 0; float: left; font-size: 13px; color: #000; } #news #summary ul div.news_text { font-size: 13px; margin: 0 0 5px 100px } /* ======================================================================== POPUPS - customization, add to basket, etc. ======================================================================== */ .popup_customization textarea { width: 100% } .popup_customization .price { font-weight: bold; color: #090; } .popup_addtobasket { width: 350px; height: 120px; max-width: 100%; } .popup_addtobasket p { margin: 0 0 15px 0 } /* ======================================================================== HTML EMAIL STYLING The emails themselves contain this stylesheet, but we include it here so that email text displayed as order confirmation can be styled to match the same format as the email ======================================================================== */ #mail_container { border: solid 1px #999; padding: 20px; width: 600px; max-width: 100%; } #mail_container p { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-size: 13px; font-weight: normal; color: #555; padding: 5px 0; margin: 0; } #mail_container h1 { font-family: "Segoe UI Light", Segoe UI, Arial, Helvetica, Sans-Serif; font-weight: lighter; font-size: 180%; letter-spacing: 0px; color: #000; margin: 3px 0 10px 0; } #mail_container h2 { font-family: "Segoe UI Light", Segoe UI, Arial, Helvetica, Sans-Serif; font-weight: lighter; font-size: 140%; letter-spacing: 0px; color: #000; margin: 8px 0 3px 0; } #mail_container .line { margin-top: 10px; border-bottom: solid 1px #ccc; } #mail_container table { background-color: #eee; border-collapse: collapse; width: 100%; } #mail_container th { background-color: #fff; border-bottom: solid 1px #000; padding: 2px 5px; text-transform: uppercase; font-size: 85%; color: #999; } #mail_container td { border-bottom: solid 1px #ccc; padding: 2px 5px; text-align: right; } #mail_container .col1 { text-align: left; } #mail_container .col2 { text-align: right; vertical-align: top; } #mail_container .row_totals strong { color: #f00; } #mail_container .row_item .col2 { color: #090; } #mail_container a { font-weight: normal; color: #04d; } p.modedescription { font-weight: bold; display: block; padding: 10px 0 20px 0; } table.checkbox { width: auto; }