/* ======================================
Introduction
====================================== */
/*
------------------------------------
About
------------------------------------
Name: ShopDirect Boilerplate (White)
Version: 0.9b "White Slate"
Author: Quintin Schnehage
*/
/* -------------------------------------------------------------------------------------
WELCOME:
Ahoy, designers! You're looking at the latest version of the ShopDirect Boilerplate!
You lucky devils, you.
This file has been designed with ease of editability in mind. If you find this file in
any way difficult to use, or if you have any suggestions, go to the
"!ShopDirect Boilerplate" project there and let me know what's bugging you in the
Discussions section.
My goal with this Boilerplate is to make it as simple for you to turn out great sites
as quickly as possible… so if I can improve it in any way, let me know.
PLEASE KEEP THIS STYLESHEET ORGANISED. Be kind and think of the designer / developer who may
need to edit this file when you are sick, on holiday, have moved on to another company or
have died in a gruesome accident (Erm, touch wood).
IMPORTANT: Once this theme has been completed, the CSS should be run through a CSS
minifier to strip out all these (very informative and worth-reading) comments to shave
some kilobytes off the CSS file. e-Commerce sites need to load FAST.
I recommend you use YUI's CSS minifier: http://www.minifycss.com/css-compressor/
This will slice the file size in half. Minifying this file results in a 50.6% size
reduction at the time of writing, which equates to 25.513KB.
Happy coding!
--Q
-------------------------------------------------------------------------------------
*/
/* ======================================
Table of Contents
====================================== */
/*
1. Colour Pallette.
2. CSS Reset
3. Basic Element Styles *
3.1. Structured Content (HTML Elements)
3.2. ShopDirect Elements (Classes and IDs)
3.2.1. Emphasis and Warning
3.2.2. Various Messages
3.2.3. Form Elements
4. Main Layout *
4.1. Layout Wrappers and Containers
4.2. Fluid Container
4.3. Popup Containers
4.4. Pages with a Sidebar
4.5. Pages without a Sidebar
4.6. Widgets (Content Components)
4.6.1. Basic Widget Styles
4.6.2. Carousel Banners
4.6.3. Category List
4.7. Header
4.7.1. Basic Header Styles
4.7.2. Header Content
4.7.3. Search Box in Header
4.7.4. Branding Area
4.7.5. Extra Branding Area
4.7.6. Logo
4.7.7. Site Menu
4.7.8. Link to Shopping Cart
4.7.9. Mini Cart
4.7.10. Main Menu
4.9. Footer
4.9.1. Basic Footer Styles
4.9.2. Footer Content
4.9.3. Footer Menu
4.9.4. Footer Custom Menu
4.9.5. Copyright
4.9.6. Powered by ShopDirect Message
4.10. Breadcrumbs
5. Page-Specific CSS
5.1. Home Page *
5.2. Category Page **
5.2.1. Basic Page Styles
5.2.2. Grid View
5.2.3. List View
5.2.4. Detailed List View
5.2.5. List View with Properties
5.3. Product Page **
5.4. Customer Service Pages **
5.4.1 Contact Us
5.4.2 Help
5.4.3 Privacy Policy
5.4.4 Terms and Conditions
5.4.5 Order History
5.4.6 Affiliate Program
5.4.7 Gift Certificates
5.4.7 Return Requests
5.4.8 Loyalty Points
5.5. Cart Page
5.6. Checkout Page
5.7. Order Review Page
5.8. Login Page
6. Customisations
6.1. Single Page Checkout
6.2. Layout Components
7. Tweaks
8. Bug Fixes
9. Utility Classes
10. Cruft
11. Third Party CSS
* - Styled as part of Basic
** - Styled as part of Basic and Advanced Package
---------------------------------------------------------------------------------------
TIP: To navigate this voluminous file easily, hit CTRL+F and type in the number before
each section and you'll be taken to it immediately.
If you want to change something on the Cart page:
CTRL+F -> Search for "5.5." -> hit enter. And you're there!
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
TIP: Use code-folding in Dreamweaver to keep this file easily navigable!
---------------------------------------------------------------------------------------
*/
/*
======================================
1. Colour Pallette
======================================
THIS SECTION IS UNDER CONSTRUCTION. Do not use yet!
This section will allow you to find / replace major colours used throughout the theme
in a flash.
The tokens on the left hand side of the colons are like variables. If you run a
find and replace using the two values as the find / replace terms, you'll replace the
colours fo
This will eventually be handled by a CSS Pre-Processor.
--------------------------------------
Link Colours:
[Link:Link] : #ffcf01;
[Link:Hover] : #fff600;
[Link:Visited] : N/A
--------------------------------------
--------------------------------------
Special Colours:
#000, #333, #666, #999, #ccc, #eee, #f5f5f5, #fff
Special Colors:
#9f0, #f00, #ffc, #ffb5b5, #ffe
*/
/* ======================================
2. CSS Reset
====================================== */
/* Info
This section contains the latest version of Eric Meyer's CSS Reset.
All browsers have a "default" stylesheet, the black-on-white "Hello World" Times New Roman
text. Each browser has different default values for things like div and table padding and
margins, text and link colours, etc. This is the cause of many browser compatibility problems.
The Eric Meyer CSS Reset sets the properties of all elements to a default "zero" value,
which eliminates most of these problems before they become an issue.
Please include the latest version of the reset in every new site!
/*
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ======================================
3. Basic Styles
====================================== */
/* Info
This section contains the CSS rules for all basic element styles.
Having a basic element style set for every element is very important, since the
Eric Meyer CSS Reset zero's EVERY CSS attribute. If you find an unstyled element
somewhere in your site, you probably didn't do something here.
*/
/* --------------------------------------
3.1. Structured Content (HTML Elements)
-------------------------------------- */
html {
}
body {
background: url(images/topback.png) repeat-x top #fbfbfb;
color: #666666;
font-size: 12px;
font-family: Arial;
line-height: 140%;
text-align: center;
}
/* Tabular Data */
table td {
/* vertical-align: top; */
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
color: #000000;
line-height: 110%;
margin-top: .75em;
margin-bottom: .5em;
}
h1 {
font-size: 2.2em;
margin-top: 0;
}
h2 {
font-size: 2.0em;
}
h3 {
font-size: 1.8em;
}
h4 {
font-size: 1.6em;
}
h5 {
font-size: 1.4em;
}
h6 {
font-size: 1.4em;
}
h1 a, h1 a:link, h1 a:visited, h1 a:active {
}
h1 a:hover {
}
h2 a, h2 a:link, h2 a:visited, h2 a:active {
}
h2 a:hover {
}
h3 a, h3 a:link, h3 a:visited, h3 a:active {
}
h3 a:hover {
}
h4 a, h4 a:link, h4 a:visited, h4 a:active {
}
h4 a:hover {
}
h5 a, h5 a:link, h5 a:visited, h5 a:active {
}
h5 a:hover {
}
h6 a, h6 a:link, h6 a:visited, h6 a:active {
}
h6 a:hover {
}
ul {
}
ol {
}
ul li {
list-style-type: none;
}
ol li {
list-style-type: decimal;
list-style-position: inside;
}
p {
margin-bottom: 1em;
}
b, strong {
font-weight: bold;
}
i, em {
font-style: italic;
}
a, a:link, a:visited, a:active {
text-decoration: none;
color: #927101;
}
a:hover {
color: ;
}
img {
}
option {
min-width: 1.5em;
}
blockquote {
}
/* Form Elements */
input[type="text"], texarea {
background-color: #fff;
border: #cdcdcd 1px solid;
color: #666;
padding: 3px;
width: 120px;
vertical-align: top;
height: 26px;
}
select {
font-size: 11px;
}
select option {
}
/* --------------------------------------
3.2. Basic ShopDirect Elements (Classes and IDs)
-------------------------------------- */
/* 3.2.1. Emphasis and Warning Classes */
.emphasis {
}
.warning {
}
/* 3.2.2. Various Messages and Warnings */
.ErrorMessage, .ErrorMessage UL, .ErrorMessage li {
font: bold 12px/12px Arial;
color: #860202;
line-height: 20px;
list-style-type: none;
}
.SuccessMessage {
font: 11px/14px Arial;
color: #26931c;
padding: 3px 0px;
text-align: left;
display: block;
}
.WebPageMessage {
background:#fff;
border: 1px dashed #e6e6e6;
margin-bottom: 1em;
}
.WebPageMessageError, .WebPageMessageWarning, .WebPageMessageInformation, .WebPageMessageQuestion, .WebPageMessageOK {
padding: 5px;
background-position: 5px 5px;
background-repeat: no-repeat;
}
.WebPageMessage .Message {
font-size: 11px;
height:38px;
padding: 0 0 0 50px;
color:#333;
}
.WebPageMessageError {
background-image: url(images/message-icon-error.png);
background-color:#C00
}
.WebPageMessageWarning {
background-image: url(images/message-icon-warning.png);
}
.WebPageMessageInformation {
background-image: url(images/message-icon-information.png);
}
.WebPageMessageQuestion {
background-image: url(images/message-icon-question.png);
}
.WebPageMessageOK {
background-image: url(images/message-icon-ok.png);
}
/*
3.2.3. Form Elements
*/
.formlabel {
font-family: Arial;
font-size: 12px;
color: #927101;
vertical-align: middle;
text-align: left;
padding: 0px;
}
/* All Text Input Fields */
#LoginControl1_inUsername, #LoginControl1_inPassword, #NewUserControl1_inUsername, #NewUserControl1_inPassword, #NewUserControl1_inPassword2, #NewUserControl1_inFirstName, #NewUserControl1_inLastName, #FromEmailField, #inEmail, .SearchBoxFormContent .FormInput, .MailingListSignupFormContent .FormInput {
/*
background-color: #030303;
border: #3a3a3a 1px solid;
border-radius: 5px;
color: #666;
padding: 3px;
width: 120px;
vertical-align: top;
*/
}
/* ======================================
4. Main Layout
====================================== */
/* --------------------------------------
4.1. Layout Wrappers and Containers
-------------------------------------- */
#pagewrap {
margin-bottom: 0px;
text-align:center; /*IE Alignment Fix */
}
#homepage #pagewrap {
background: none;
}
#cartwrap, #container {
width: 960px;
margin: 0px auto 0px auto;
text-align:center; /*IE Alignment Fix */
overflow: hidden;
height: 100%;
}
#form1 {
background: url(images/topBackground.png) top center no-repeat;
}
.trHeader {
padding-bottom: 1em;
text-align:center; /*IE Alignment Fix Reset */
}
.trContent {
padding: 0 10px;
vertical-align: top;
text-align:center; /*IE Alignment Fix Reset */
}
.trContent td, #PageHome #maincontent, #HomeTable {
height: 100%;
}
.trFooter {
text-align:center; /*IE Alignment Fix Reset */
}
#maincontent {
text-align:left; /*IE Alignment Fix Reset */
}
/* --------------------------------------
4.2. - Fluid Container
-------------------------------------- */
/* --------------------------------------
4.3. - Pop-up Containers
-------------------------------------- */
#popupContainer {
width:90%;
margin: 0;
padding: 10px 10px 20px;
}
#popupContainer #pnlMain {
padding: 1em;
background-color: #e6e6e6;
border: none;
}
#popupContainer #pnlMain h3 {
margin-top: 0;
}
#popupContainer p {
}
#popupContainer .BVText {
display:none;
}
/* --------------------------------------
4.4. - Pages with a Sidebar
-------------------------------------- */
#navcolumn {
vertical-align: top;
padding: 15px 0px 0px 15px;
text-align:left; /* IE Alignment Reset */
background: #fff;
width: 203px;
*width: 218px;
}
#navcolumn .HomePageBlock {
margin-bottom: 10px;
}
#navcolumnRight {
vertical-align: top;
width: 18.75%;
padding-right: 10px;
text-align:left; /* IE Alignment Reset */
display: none;
}
#navcolumnRight .HomePageBlock {
/* Hack to fix layout between home and product pages (problem caused due to inconsistent markup between page types. */
width: 160px;
margin-bottom: 2em;
}
#ContentColumn {
/* Only present on Category and Product Pages */
height: 100%;
*width: 100%;
padding: 0 15px;
vertical-align: top;
text-align:left; /* IE Alignment Reset */
background: #fff;
*width: 742px;
}
/* --------------------------------------
4.5. - Pages Without a Sidebar
-------------------------------------- */
#page, #pag {
padding: 10px 10px;
background: #fff;
height: 100%;
}
#page h1, #pag h1, #page h3, #pag h3 {
margin-top: 10px;
}
#page #CheckoutTable h1, #pag #CheckoutTable h1, #page #CheckoutTable h3, #pag #CheckoutTable h3 {
}
/* --------------------------------------
4.6. - Widgets (Content Components)
-------------------------------------- */
/* 4.6.1. Basic Widget Styles */
.NavColumnBlock, .CategoryList, .MailingListSignupForm, .SearchBoxForm, .sizeChart, .socialMedia, .aerialDance {
/* width: 180px; */
margin-bottom: 10px;
width: 218px;
background: none;
padding: 0px 0px 7px 0px;
}
.socialMedia {
text-align: center;
}
.NavColumnBlock h4, .CategoryList h4, .MailingListSignupForm h4, .SearchBoxForm h4, .sizeChart h4, #HomeColumn2 h4 {
background: #927101;
color: #fff;
height: 40px;
font-size: 16px;
font-family: Arial;
line-height: 40px;
vertical-align: bottom;
margin: 0px;
padding: 0px 0px 0px 12px;
text-align:left;
}
.NavColumnBlockContent, .SearchBoxFormContent, .MailingListSignupFormContent, .NavColumnBlockContent, .CategoryListContent {
text-align: left;
color: #979797;
background: none;
}
.SearchBoxFormContent, .MailingListSignupFormContent, .aerialDanceContent {
padding: 10px 0 10px 12px;
}
.aerialDanceContent p {
color: #927101;
}
.socialMediaContent {
padding: 10px 0 10px 0px;
}
.sizeChartContent {
background: url(images/fitImage.jpg) top left no-repeat;
padding: 65px 0px 15px 10px;
}
.MailingListSignupFormContent img {
margin: 0px 10px 0px 0px;
}
.SearchBoxFormContent .FormInput, .MailingListSignupFormContent .FormInput {
border: #cdcdcd 1px solid;
color: #666;
padding: 3px;
width: 128px;
vertical-align: top;
height: 23px;
margin-top:4px;
}
/* _________________________
Search Button Position */
#ContentColumn1__ctl1_btnGoSearch, #ContentColumn4__ctl1_btnGoSearch, #ContentColumn5__ctl1_btnGoSearch { /* Adjust as needed. */
vertical-align: middle;
}
#ContentColumn1__ctl2_btnGoSearch, #ContentColumn4__ctl2_btnGoSearch, #ContentColumn5__ctl2_btnGoSearch { /* Adjust as needed. */
vertical-align: middle;
}
/* 4.6.2. Carousel Banners */
/* The styles for carousel banners are found in an external stylesheet, under User Files -> Banner */
/* 4.7.3. Category List */
.wrapper #metacontainer #slidecontainer {
background-color: transparent !important;
}
/* Category Level One */
.NavColumnBlockContent li, .CategoryListContent li {
}
.NavColumnBlockContent a, .NavColumnBlockContent a:link, .NavColumnBlockContent a:visited, .CategoryListContent a, .CategoryListContent a:link, .CategoryListContent a:visited {
color: #000;
text-decoration: none;
display: block;
margin: 0px 0px 0px 0px;
padding: 8px 0px 8px 10px;
border-bottom: 1px dashed #ccc;
font-size:12px;
}
.NavColumnBlockContent a:hover, .CategoryListContent a:hover {
text-decoration: underline;
}
.CategoryListContent .CurrentCategory a:link, .CategoryListContent .CurrentCategory a:active, .CategoryListContent .CurrentCategory a:visited, .CategoryListContent .CurrentCategory a:hover {
}
.CategoryListContent .OtherCategory a:link, .CategoryListContent .OtherCategory a:active, .CategoryListContent .OtherCategory a:visited {
}
.CategoryListContent .OtherCategory a:hover {
}
/* Category Level Two */
.CategoryListContent ul ul {
background: #eee;
}
.CategoryListContent li li a, .CategoryListContent li li a:link, .CategoryListContent li li a:visited {
color: #5a5a5a;
text-decoration: none;
display: block;
padding: 10px 0px 10px 20px;
}
.CategoryListContent li li a:hover {
text-decoration: underline;
}
.CategoryListContent li li .CurrentCategory a:link, .CategoryListContent li li .CurrentCategory a:active, .CategoryListContent li li .CurrentCategory a:visited, .CategoryListContent li li .CurrentCategory a:hover {
}
.CategoryListContent li li .OtherCategory a:link, .CategoryListContent li li .OtherCategory a:active, .CategoryListContent li li .OtherCategory a:visited {
}
.CategoryListContent li li .OtherCategory a:hover {
}
/* Category Level Three */
.CategoryListContent ul ul ul {
background: #ccc;
}
.CategoryListContent li li li a, .CategoryListContent li li li a:link, .CategoryListContent li li li a:visited {
color: #fff;
display: block;
padding: 10px 0px 10px 30px;
}
.CategoryListContent li li li a:hover {
text-decoration: underline;
}
.CategoryListContent li li li .CurrentCategory a:link, .CategoryListContent li li li .CurrentCategory a:active, .CategoryListContent li li li .CurrentCategory a:visited, .CategoryListContent li li li .CurrentCategory a:hover {
}
.CategoryListContent li li li .OtherCategory a:link, .CategoryListContent li li li .OtherCategory a:active, .CategoryListContent li li li .OtherCategory a:visited {
}
.CategoryListContent li li li .OtherCategory a:hover {
}
.CategoryListContent li li li .SubCategory a:link, .CategoryListContent li li li .SubCategory a:active, .CategoryListContent li li li .SubCategory a:visited {
}
.CategoryListContent li li li .SubCategory a:hover {
}
/* --------------------------------------
4.7. - Header
-------------------------------------- */
/* 4.7.1. Basic Header Styles */
/*
If the basic styling of your header (link colours, text sizes etc.) Differs from
your Structured Content styles, set them here.
*/
#Header {
font-size: .9em;
position: relative;
width: 100%;
padding: 0px 0px 10px 0px;
text-align: left;
background: url(images/Header.png) top right no-repeat transparent;
}
#Header p {
}
#Header a {
color: #585858;
}
#Header a:hover {
color: #000;
}
/* 4.7.2. Header Content */
#HeaderContent {
position:absolute;
top:12px;
left:12px;
font-size: .9em;
}
#HeaderContent table {
position: absolute;
margin-top: 10px;
margin-left: 10px;
}
/* 4.7.3. Search Box in Header */
.SearchBoxFormHeader {
position: absolute;
top: 208px;
left: 733px;
width: 220px;
}
.SearchBoxFormHeader h4 {
display:none;
}
.SearchBoxFormContentHeader {
}
#Header1_ctl00_KeywordField, #Header_ctl00_KeywordField {
width: 218px;
padding-right:25px;
height: 28px;
background:#fff;
border:1px solid #cdcdcd;
}
#Header1_ctl00_btnGoSearch, #Header_ctl00_btnGoSearch {
vertical-align:middle;
margin: 5px 0px 0px -25px;
}
/* 4.7.4. Branding Area */
#BrandingArea {
width:100%;
height: 197px;
background: none;
}
/* 4.7.5. Extra Branding Area */
#BrandingArea2 {
width:100%;
height: 125px;
margin-bottom: 20px;
}
/* 4.7.6. Logo */
#Logo a {
position: absolute;
top: 50px;
display: block;
z-index: 2;
}
/* 4.7.7. Site Menu */
#SiteMenu {
/* Site Controls at the top of the screen (Sign Out, Your Account, Customer Service, Search). */
position: absolute;
top: 8px;
right: -26px;
z-index: 100; /* To make Shopping Cart Link appear above MiniCart */
width: 340px;
height:85px;
}
#SiteMenu ul {
text-align: left;
padding: 0px 0px 0px 0px;
}
#SiteMenu li {
display: inline;
}
#SiteMenu a {
padding: 0 10px 0 5px;
border-right: 1px solid #784800;
color: #784800;
font: 12px Arial, Helvetica, sans-serif;
}
#SiteMenu a:hover {
color: #784800;
text-decoration: underline;
}
/* Site Menu Icons */
/* Here is an example of how you can add icons with a hover effect
to your site menu for better link recognition. */
#SiteMenu a#Header_LoginStatusControl1_lnkStatus, #SiteMenu a#Header1_LoginStatusControl1_lnkStatus {
}
#SiteMenu a#Header_lnkMyAccount, #SiteMenu a#Header1_lnkMyAccount {
}
#SiteMenu a#Header_lnkCustomerService, #SiteMenu a#Header1_lnkCustomerService {
border-right:0;
}
#SiteMenu a#Header_lnkSearch, #SiteMenu a#Header1_lnkSearch {
border-left: 1px solid #784800;
border-right: medium none;
}
#SiteMenu a#Header_lnkCart, #SiteMenu a#Header1_lnkCart {
border-right:0;
}
#SiteMenu a:hover#Header_LoginStatusControl1_lnkStatus, #SiteMenu a:hover#Header1_LoginStatusControl1_lnkStatus {
}
#SiteMenu a:hover#Header_lnkMyAccount, #SiteMenu a:hover#Header1_lnkMyAccount {
}
#SiteMenu a:hover#Header_lnkCustomerService, #SiteMenu a:hover#Header1_lnkCustomerService {
}
#SiteMenu a:hover#Header_lnkSearch, #SiteMenu a:hover#Header1_lnkSearch {
}
#SiteMenu a:hover#Header_lnkCart, #SiteMenu a:hover#Header1_lnkCart {
}
/* 4.7.8. Link to Shopping Cart */
#ShoppingCartLink {
position: absolute;
margin: 70px 0px 0px 137px;
z-index: 500;
padding: 0px 0px 30px 0px;
}
#ShoppingCartLink a, #ShoppingCartLink a:link, #ShoppingCartLink a:active, #ShoppingCartLink a:visited {
font:bold 14px Arial, Helvetica, sans-serif;
color: #fff;
}
#ShoppingCartLink a:hover {
color:#fff;
}
/* 4.7.9. Mini Cart */
#Header_MiniCartTotal_MiniCartTotal, #Header1_MiniCartTotal_MiniCartTotal {
font: 14px Arial;
}
#MiniCart {
text-align: left;
color: #fff;
position: absolute;
width: 210px;
top: 125px;
left: 790px;
border-left: none;
padding: 0px 0px 0px 0px;
z-index: 550;
font: 14px Arial, Helvetica, sans-serif;
}
#MiniCart #ItemCount {
}
#MiniCart #SubTotal {
}
/* 4.7.10. Main Menu */
#MainMenu {
font-size: 12px;
background: url(images/mainshadow.png) no-repeat bottom center transparent;
margin: 0px 0px 0px 0px;
padding-bottom:12px;
}
#MenuLevel1 {
padding: 0px 0px 0px 0px;
background:url(images/mainback.png) repeat-x top;
height:48px;
border:1px solid #9a7801;
border-bottom:none;
}
#MenuLevel1 table {
}
/*
Category Top-Banner Tab Links
*/
/* (comment out the following if you're using category images, see above) */
#MenuLevel1 .MenuItem {
height: 48px;
}
#MenuLevel1 .MenuItem a {
display: block;
padding: 0px 10px;
font: 14px Arial;
line-height: 48px;
text-decoration: none;
cursor:pointer;
color: #fff;
background: url("images/div.png") top right no-repeat;
}
#MenuLevel1 .MenuItem a:hover {
color: #fff;
text-decoration: underline;
font: 14px Arial;
line-height: 48px;
}
#MenuLevel1 .MenuItem img {
position: absolute;
margin-top: 10px;
}
#MenuLevel1 table tbody {
display: block;
float:right;
}
#MenuLevel1 .MenuItemActive {
height: 48px;
background: #927101;
}
#MenuLevel1 .MenuItemActive a {
display: block;
color: #fff;
height: 48px;
padding: 0px 10px;
font: 14px Arial;
line-height: 48px;
cursor:pointer;
background: url("images/div.png") top right no-repeat;
}
#MenuLevel1 .MenuItemActive a:hover {
color: #fff;
background: url("images/div.png") top right no-repeat;
text-decoration: underline;
font: 14px Arial;
line-height: 48px;
}
/*
Sub-Category Links Under Tabs
*/
#MenuLevel2 {
width:100%;
height: 30px;
display: none;
}
#MenuLevel2 table {
}
#MenuLevel2 .MenuItem {
text-align: center;
background:transparent;
}
#MenuLevel2 a {
font: 12px Tahoma, Geneva, sans-serif;
color: #504f4f;
padding: 0px 10px 0px 8px;
}
#MenuLevel2 a:hover {
color: #f8e699;
text-decoration: underline;
}
/* 4.7.11. Welcome Message */
#WelcomeMessage {
display:block;
width: 150px;
height: 20px;
position:absolute;
top:9px;
left: 500px;
font: 11px Arial;
}
#WelcomeMessageDesc {
}
#WelcomeMessageName {
font-weight: bold;
}
/* 4.7.11. Call Us Message */
#callUs {
position: absolute;
top: 56px;
left: 396px;
font: bold 18px Arial, Helvetica, sans-serif;
color: #ff008f;
text-align: center;
width: 210px;
}
#callUs span {
color: #927101;
}
/* --------------------------------------
4.10. Breadcrumbs
-------------------------------------- */
#BreadCrumbs {
height: 35px;
line-height: 35px; /* Centers the breadcrumb text inside the breadcrumb bar. */
font-size: 11px;
vertical-align: center;
margin-bottom: 1.5em;
text-align:left; /*IE Alignment Fix Reset */
/* background: url("images/background-breadcrumbs.png") repeat-x; */
border-bottom: 1px dotted #e6e6e6;
padding-left: 10px;
}
#BreadCrumbs a, #BreadCrumbs a:link, #BreadCrumbs a:visited {
}
#BreadCrumbs a:hover {
}
.BreadCrumbTrailSpacer {
padding: 0 5px;
}
/* --------------------------------------
4.11. Extra Div's
-------------------------------------- */
#extraDiv1 {
}
#extraDiv2 {
}
#extraDiv3 {
}
#extraDiv4 {
}
#extraDiv5 {
}
#extraDiv6 {
}
/* --------------------------------------
4.9. Footer
-------------------------------------- */
/* 4.9.1. Basic Footer Styling */
/*
If the basic styling of your footer (link colours, text sizes etc.) Differs from
your Structured Content styles, set them here.
*/
#footer {
background: none;
clear: both;
color: #a8a8a8;
font-size: .9em;
text-align: left;
position:relative;
height: 123px;
background: url("images/footer.png") top left no-repeat;
margin-top:20px;
}
/* 4.9.2. Footer Content */
#FooterContent {
position:absolute;
margin: -165px 0px 0px 300px;
text-align:left;
clear:both;
}
#FooterContent span {
text-align: left;
}
/* 4.9.3. Footer Menu */
#footermenu {
width: 512px;
float:left;
margin: 10px 0px 0px 15px;
}
#footermenu a, #footermenu a:active, #footermenu a:visited, #footercustommenu a, #footercustommenu a:active, #footercustommenu a:visited {
display: inline;
text-decoration: none;
padding-right: 1em;
font: 12px Arial;
color: #fff;
border-right:1px solid #fff;
}
#footermenu a:hover, #footercustommenu a:hover {
color: #fff;
text-decoration: underline;
}
/* 4.9.4. Footer Custom Menu */
#footercustommenu {
}
/* 4.9.5. Copyright */
#copyright {
text-align: right;
float:right;
display:block;
font: 12px Arial;
color: #fff;
margin: 16px 10px 0px 0px;
}
#copyright a {
color: #fff;
text-decoration: underline;
}
#copyright a:hover {
text-decoration: underline;
}
/* 4.9.6. Powered By Shopdirect Message */
#poweredby {
display:none;
}
/* ======================================
5. Page-Specific CSS
====================================== */
/*
This section contains CSS Specific to individual page templates.
*/
/* --------------------------------------
5.1. Home Page
-------------------------------------- */
#HomeColumn1, #HomeColumn2, #HomeColumn3 {
text-align:left; /* IE Alignment Reset */
padding: 10px 10px;
}
#HomeColumn1 {
padding: 15px 0 0 15px;
background: #fff;
border:1px solid #ececec;
border-right: none;
}
#HomeColumn1 .HomepageBlock {
}
#HomeColumn1 .HomepageBlock .SingleProductDisplay, #HomeColumn1 .HomepageBlock .SingleCategoryDisplay {
margin: 0;
}
#HomeColumn2 {
width: 100%;
padding: 15px 15px 0 12px;
background: #fff;
border:1px solid #ececec;
border-left:none;
}
#HomeColumn2 .HomepageBlock {
}
#HomeColumn2 .HomepageBlock .SingleProductDisplay {
}
#HomeColumn3 {
padding: 0px;
display: none;
}
#HomeColumn3 .HomepageBlock {
}
#HomeColumn1 .HomepageBlock .SingleProductDisplay, #HomeColumn1 .HomepageBlock .SingleCategoryDisplay {
margin: 0;
}
/* Sample Content (Currently displayed when store is setup. To be replaced with sample content database and "clear" script. */
#HomepageSample1 {
background: #fff url(FreshStartImage.png) no-repeat 50% 50%;
}
#HomepageSample2 {
}
/* --------------------------------------
5.2. Category Page
-------------------------------------- */
/* 5.2.1. Basic Page Styles */
/* Category Control Bar (Top) */
#LayoutTable {
background-color: #927101;
background-repeat: repeat-x;
width: 100%;
}
#LayoutTable2 {
background-color: #927101;
background-repeat: repeat-x;
width: 100%;
}
#CategoryListHeader {
border: 1px solid #eee;
margin-bottom: 10px;
}
#LayoutTable td {
vertical-align: middle;
color: #fff;
}
#LayoutTable td a {
color: #fff;
}
/*
Records Table (?)
*/
#RecordsFound {
}
#Records table {
width: 100%;
}
#Records table tr td {
text-align:center;
}
#Records table table {
width:100%;
}
#RecordsFound {
padding: 10px;
}
#RecordsFound2 {
padding: 10px;
color: #fff;
}
#Pager {
padding: 10px;
}
#Pager2, #Pager2 a {
padding-top: 10px;
color: #fff;
}
#Sorter {
padding: 10px;
}
#Sorter2 {
padding: 10px;
}
span#lblSorter2 {
color: #fff;
}
/* "New" Image Position */
.NewProductBadge {
position: absolute;
top: -128px;
left: -60px;
}
/* 5.2.2. Grid View */
.SingleCategoryDisplay {
display: block;
text-align: center;
vertical-align:middle;
margin: 5px auto;
width: 160px;
background: url("images/mainback.png") repeat-x scroll center top transparent;
position: relative;
border: 1px solid #cba00f;
}
.SingleProductDisplayName {
height: 60px;
overflow: hidden;
}
.SingleCategoryDisplayName {
padding: 0px;
}
.SingleCategoryDisplayName a, .SingleCategoryDisplayName a:link, .SingleCategoryDisplayName a:visited {
color: #6b5405;
font-weight:bold;
display:block;
width: 100%;
height: 30px;
overflow: hidden;
padding: 10px 0px 0px;
vertical-align: text-bottom;
margin: auto;
}
.ListCategoryDisplay a, .ListCategoryDisplay a:link, .ListCategoryDisplay a:visited {
display: block;
font-size: 14px;
line-height: 18px;
height:18px;
padding: 8px;
}
.SingleCategoryDisplayname a:hover, .ListCategoryDisplay a:hover {
}
.SingleProductDisplay {
display: block;
width: 170px;
vertical-align:top;
margin: 10px 0px;
text-align:center;
border: none;
padding: 10px 0px;
border: 1px solid #e9e9e9;
}
.SingleProductDisplayImage {
padding: 10px 0px 0px 0px;
height: 156px;
overflow: hidden;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.SingleProductDisplayImage img {
}
.SingleProductDisplayImage a {
display: block;
}
.SingleProductDisplayName a, .SingleProductDisplayName a:link, .SingleProductDisplayName a:visited {
display: block;
font-family:Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
color: #7f7f7f;
padding: 5px 0px 5px;
}
.SingleProductDisplayName a:hover {
}
.SingleProductDisplayExtraHeading {
font-size: 10px;
height: 30px;
overflow: hidden;
color:#d3d3d3;
}
.SingleProductDisplayPrice a, .SingleProductDisplayPrice a:link, .SingleProductDisplayPrice a:visited {
display: block;
font-family: Arial;
font-size: 11px;
color: #ff0000;
text-align: center;
background: url(images/buyMore.jpg) center bottom no-repeat;
padding: 0px 0px 26px 0px;
}
.SingleProductDisplayPrice a:hover {
text-decoration:none;
}
.ListPrice {
text-decoration: line-through;
color: #666;
font-weight: normal;
}
.SitePriceDiscounted {
color: #ff0000;
}
/* 5.2.3. Simple List View */
.ListProductDisplay {
height: 100%;
}
.ListProductDisplayName, .ListProductDisplayName a {
color: #202020;
}
.ListProductDisplayName, .ListProductDisplayName a:hover {
}
.ListProductDisplayName, .ListProductDisplayName td, .ListCategoryDisplayName, .ListCategoryDisplayName td {
text-align:left !important;
padding: 0px;
}
.ListProductDisplayPrice, .ListProductDisplayPrice td {
text-align:left !important;
margin: 10px 0px;
padding-left: 0px;
text-decoration: none;
}
/* 5.2.4. Detailed List View */
.DetailProductDisplay {
margin: 15px 15px 10px 0px;
height: 155px;
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: left !important;
}
.DetailProductDisplayName td, .DetailProductDisplayPrice td, .DetailProductDisplayDescription td, .DetailProductDisplayControls td {
text-align:left !important;
float:left !important;
}
.DetailProductDisplayDescription {
padding-left: 0px;
}
.DetailProductDisplayControls {
padding-left: 4px;
}
.DetailProductDisplayName a, .DetailProductDisplayName a:link, .DetailProductDisplayName a:visited {
color: #202020;
text-decoration:none;
padding: 0px;
}
.DetailProductDisplayName a:hover {
text-decoration: underline;
}
.DetailProductDisplayPrice a, .DetailProductDisplayPrice a:link, .DetailProductDisplayPrice a:visited {
display: block;
padding: 5px 5px 5px 0px;
text-decoration:none;
}
.DetailProductDisplayPrice a:hover {
}
#Records .DetailProductDisplayImage {
width:155px;
float:right;
text-align:right;
}
/* 5.2.5. List View with Properties */
#tblProdProp tr td {
text-align: left !important;
}
#TDProdNameH, #TDProdPriceH, #TDProdPropNameH1, #TDProdPropNameH2 {
padding: 10px 0px 20px 0px;
font: bold 16px Arial;
}
#TDProdPropProd {
width: 216px;
}
#TDProdPropProd, #TDProdPropPrice, #TDProdPropControl, #TDProdPropL1, #TDProdPropL2 {
padding: 5px 0px;
}
#TDProdPropProd a, #TDProdPropPrice a, #TDProdPropControl a, #TDProdPropL1 a, #TDProdPropL2 a {
}
#TDProdPropProd a:hover, #TDProdPropPrice a:hover, #TDProdPropControl a:hover, #TDProdPropL1 a:hover, #TDProdPropL1 a:hover {
}
#TDProdPropPrice a .SitePriceDiscounted {
}
/* 5.2.6. "New" Image Position */
.NewProductBadge {
position: absolute;
top: -128px;
left: -60px;
}
/* --------------------------------------
5.3. Product Page
-------------------------------------- */
#ProductPageContainer {
}
#ProductPageImageColumn {
padding: 10px 20px 0 0;
vertical-align:top;
text-align:center;
}
#ProductPageImageColumn .ImageDescriptor {
display:block;
margin-bottom: 1em;
font-size: .9em;
}
#ProductPageContentColumn {
padding-bottom: 2em;
}
#ProductDescription {
}
#ProductDescription2 {
}
/* Sharing Buttons */
#imgZoom, #PrintThisPage, #EmailThisPage {
margin-bottom: .5em;
}
#PrintThisPage {
}
#EmailThisPage {
}
#ProductImage a, #ProductImage a:hover {
text-decoration: none;
}
/* SKU */
#ProductSKU {
margin-bottom: 1em;
font-size: .8em;
}
#lblSKU {
}
/* Product Controls Box */
#ProductControls {
background: #fff;
border: 1px solid #e6e6e6;
padding: 20px;
margin: 2em 0;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
}
/* Product Properties */
.ProductPropertyLabel {
color: #666;
font-weight: bold;
}
#ProductProperties {
text-align:left;
}
#ProductProperties ul {
margin: 5px 0 0 50px;
padding: 0;
}
#ProductProperties ul li {
margin-top:3px;
}
#ProductProperties ul ul {
margin: 5px 0 0 0;
}
/* Prices */
#Prices {
}
#Prices table {
padding-bottom: 20px;
margin-bottom: 1em;
border-bottom: 1px solid #e6e6e6;
}
#Prices table tbody {
padding-bottom: 1em;
}
#Prices td {
text-align: left !important;
vertical-align: center;
padding: .5em 2em .5em 0;
}
/* Volume Pricing */
#VolumeDiscounts {
}
.VolumePricingHeader {
color:#FFF;
background:#999;
}
.VolumePricingText {
color:#363636;
}
/* Cross-Sells */
.RelatedItemsBlock {
text-align: center;
margin: 0 auto;
padding: 0 0 3px 0;
background: transparent;
border: 1px solid #E8E8E8;
}
.RelatedItemsBlock H3 {
font: bold 16px Arial;
color: #000;
margin: 10px 0 4px 0;
padding: 3px;
text-decoration: underline;
text-align: center;
}
.RelatedItemsBlockContent {
text-align: center;
}
.RelatedItemsBlock .SingleProductDisplay {
margin: 0 20px 20px;
}
.RelatedItemsBlock .SingleProductDisplayName a, .RelatedItemsBlock .SingleProductDisplayName a:link, .RelatedItemsBlock .SingleProductDisplayName a:visited, .RelatedItemsBlock .SingleProductDisplayName a:hover {
font: bold 14px Arial;
}
/* Customer Reviews */
#ProductReviewDisplay1_lblTitle {
}
#pnlReviewDisplay {
border:none;
}
#pnlReviewDisplay h3 {
margin-top: 0;
}
#ProductReviews {
margin: 20px 0 0 0;
padding: 0 0 3px 0;
line-height: 18px;
}
#pnlWriteAReview {
}
#pnlWriteAReview tr td {
/* Creates white space between form elements. */
padding: .5em 0;
vertical-align: top;
}
#pnlWriteAReview .formlabel {
color: #666;
font-size: 1em;
padding-right: 1em;
text-transform: none;
font-weight: bold;
}
#pnlWriteAReview textarea {
width: 250px;
height: 150px;
}
#ProductReviewDisplay1_dlReviews tbody {
width: 100%;
}
#pnlWriteAReview, .ProductReview {
background: url("images/background-panel.png") repeat-x #fff;
border: 1px solid #e7e7e7;
width: 500px;
margin: 1em 0;
padding: 1em;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.ProductReviewDescription {
display:block;
margin-top: 1em;
}
.ProductReviewRating {
display:block;
margin-bottom: 1em;
}
.ProductReviewRating #lblRating {
margin-right: 1em;
}
#lblRating, #ProductReviewDisplay1_lblRating {
/* "Average Rating" text */
font-size: 16px;
font-weight: normal;
b padding-right: 1em;
}
#ProductReviewDisplay1_dlReviews {
display:block;
margin-bottom: 1em;
}
#ProductReviewDisplay1_lnkAllReviews, #ProductReviewDisplay1_lnkWriteAReview {
/* Buttons for Reviews (Should be global button style) */
background: url("images/button-background.png") #fff bottom repeat-x;
border: 1px solid #e6e6e6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
color: #646464;
font-weight:bold;
margin-right: 1em;
margin-bottom: 1em;
cursor: pointer;
display:block;
float:left;
font-size: 12px;
padding: 5px 10px;
}
#ProductReviewDisplay1_lnkAllReviews:hover, #ProductReviewDisplay1_lnkWriteAReview:hover {
background: url("images/button-background-over.png") #fff bottom repeat-x;
cursor: pointer;
}
#ProductReviews a, #ProductReviews a:link, #ProductReviews a:visited {
}
#ProductReviews a:hover {
}
.ProductReviewRating {
}
/* Karma Buttons */
.ProductReviewKarma {
display:block;
margin-top: 1em;
color: #666;
font-size: 1em;
font-weight: bold;
}
#pnlReviewDisplay {
}
.reviews {
margin: 0;
padding: 0;
list-style-type: none;
}
.reviews .review {
margin: 0;
padding: 0;
list-style-type: none;
}
.reviews .review.last {
border-bottom: 1px solid #e6e6e6;
}
.reviews .review .reviewer {
float:right;
}
/* --------------------------------------
5.4. Customer Service Pages
-------------------------------------- */
/*
5.4.1. Help
*/
/*
5.4.2. Privacy Policy
*/
/*
5.4.3. Terms and Conditions
*/
/*
5.4.4. Order History
*/
/*
5.4.5. Affiliate Program
*/
/*
5.4.6. Gift Certificates
*/
/*
5.4.7. Return Requests
*/
/*
5.4.8. Loyalty Points
*/
/* --------------------------------------
5.5. Checkout Page
-------------------------------------- */
#tblItems {
border: px solid #333;
width:98%;
margin:5px;
}
table#dgOrders {
width:100%;
border: 1px solid #333333;
}
table #dgOrders .Header {
background-color: #333333;
}
#dgLists .Header {
width:100%;
padding-top: 4px;
display: block;
border: 1px solid #333333;
background-color: #333333;
}
#dgLists .Item td {
padding-left: 10px;
}
#dgLists__ctl2_SubscribeButton {
margin-left: -120px;
}
#dgItems td {
vertical-align: middle !important;
padding: 0px;
padding-right: 10px;
}
#dgItems tr {
display: block;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#dgItems .SingleProductDisplay {
margin: 0px;
}
#CheckoutTable {
}
#CheckoutTable input, #CheckoutTable select {
margin-bottom: 1em;
}
#SubmitButton {
position: absolute;
margin-left: 210px;
margin-top: -25px;
}
.Header {
color: #fff;
height: 30px;
line-height: 30px;
margin: 0;
}
.Header p, .Header tr, .Header td {
color: #fff;
padding-left: 8px;
vertical-align: middle;
}
.CheckoutDescription {
line-height: 18px;
}
/*
Checkout Steps
*/
#CheckoutTable #CheckoutSteps {
margin: 0 auto 10px;
padding: 0px;
}
#CheckoutTable #CheckoutSteps table tbody tr {
}
.checkoutstepswrapper {
width: 420px;
height: 45px;
margin: 15px auto;
}
.CheckoutStep {
}
.CheckoutStep a, .CheckoutStep a:link, .CheckoutStep a:visited {
padding: 5px;
display:block;
float:left;
width: 75px;
text-align: center;
}
.CheckoutStep a:hover {
}
.CheckoutStep .CheckoutStepCurrent, .CheckoutStep a:link.CheckoutStepCurrent, .CheckoutStep a:visited.CheckoutStepCurrent, .CheckoutStep a:hover.CheckoutStepCurrent {
text-decoration: none;
background-color: #EEEEEE;
color: #000;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* --------------------------------------
5.6. Shopping Cart Page
-------------------------------------- */
#CartTitle {
width:100%;
margin-left: 0px;
margin-top: 15px;
}
#CartSubTitle {
color: #000;
display: block;
}
table#CartContainer {
width: 100%;
*width: 100%;
padding:0;
margin:5px 0 0 0px;
}
table#CartContainer tr td {
vertical-align:middle;
}
#CartItemBlock .Header {
height: 45px;
background-color: #333333;
}
#CartItemBlock {
height: 45px;
margin:0px;
padding:0px;
border-top: solid 1px #ccc;
border-right: solid 1px #ccc;
border-left: solid 1px #ccc;
}
#CartItemBlock Table {
margin:0px;
width:100%;
}
#CartUpdateBlock {
width:75%;
margin:0px;
text-align: left;
vertical-align:middle;
}
#CartTotalBlock {
width:25%;
margin:0px;
padding:10px;
text-align: right;
vertical-align:middle;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
border-left: solid 1px #ccc;
}
#lblSubTotal {
font: bold 14px Arial;
color: #e90e0e;
}
#CartCheckoutButtons {
width: 100%;
text-align:right;
margin-top:10px;
margin-bottom: 15px;
}
.CartItem, .CartAlternateItem {
padding: 5px;
color: #000;
text-align: left;
border-bottom: 1px solid #ccc;
white-space: nowrap;
}
.CartItem {
}
.CartAlternateItem {
}
.CartItem a, .CartItem a:link, .CartItem a:visited, .CartAlternateItem a, .CartAlternateItem a:link, .CartAlternateItem a:visited {
color: #000;
text-decoration: none;
font: bold 16px Arial;
}
.CartItem a:hover, .CartAlternateItem a:hover {
color: #000;
text-decoration: underline;
}
/* ________________________
Shipping Methods List */
#ShipMethodsList {
margin-left: 0px;
display: block;
}
/* __________________
Checkout Styles */
#AddressBookPanel {
width:100%;
margin:0;
}
#AddressList td {
border: 1px solid #ccc;
background-color: #eee;
padding: 20px;
margin-top: 20px;
}
#AddressList td:hover {
background: #eee;
}
.ContentBox {
margin: 3px 0px 5px 20px;
text-align:left;
background:#fff;
border: solid 1px #ccc;
padding:10px;
}
#lblGrandTotal {
border-top: 1px solid #ccc;
width: 200px;
}
#PlaceOrderCell {
padding:0px;
margin: 0;
background: url(body.gif) repeat-y top right;
text-align:center;
vertical-align: bottom;
}
.ControlArea {
background: transparent;
display: block;
}
.ControlArea h3 {
margin-top: 0;
}
.ControlArea table {
width: 300px;
}
.ControlArea .FormLabel {
}
#CheckoutPayment .BVSmallText {
color: #666;
}
#btnSubmit3 {
margin-left: 40px;
}
#btnSubmit2 {
margin-top: 5px;
margin-left: 5px;
}
/* --------------------------------------
5.7. Order Review Page
-------------------------------------- */
#CheckoutPayment, #CheckoutTotals {
padding: 10px;
margin-bottom: 1em;
}
#CheckoutPayment h6 {
margin-top: 0;
}
#InstructionsField {
}
#OrderItemPreview table {
}
#OrderItemPreview table table {
}
#ShipToMultipleAddressesButton {
}
#EditPaymentLink {
}
#PackageList .FormLabel {
vertical-align: top;
padding-left: 5px;
}
#PackageList_ctl01_PackageItems td {
padding-left: 5px;
}
#PackageList .BVSmallText {
border-right: 1px solid #363636;
padding-bottom: 10px;
width: 256px;
}
/* --------------------------------------
5.8. Login Page
-------------------------------------- */
#LoginControl1_valSummary li {
}
#LoginControl1_valSummary ul {
}
#NewUserControl1_valSummary li {
}
#NewUserControl1_valSummary ul {
}
#login a {
}
#login a:hover {
}
#LoginControl1_pnlLogin {
}
#LoginControl1_pnlLogin .ContentCell, #NewUserControl1_pnlNewUser .ContentCell {
background-color: #f1f1f1;
border: 1px dotted #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
}
#LoginControl1_pnlLogin .ContentCell .FormLabel, #NewUserControl1_pnlNewUser .ContentCell .FormLabel {
padding-bottom: 15px;
}
.ContentCell {
width: 390px;
padding: 20px;
border: 1px solid #ccc;
background-color: #eee;
}
.ContentCell .Formlabel {
color: #666;
text-transform: none;
font-size: 12px;
}
.ContentCell .FormInput, .ContentCell .FormInputError {
width: 200px;
}
#LoginControl1_valSummary, #NewUserControl1_valSummary {
}
/* --------------------------------------
Miscellaneous Visual Styles
-------------------------------------- */
.BVText, .CartText {
color: #bf0202;
}
#OrderViewer1_lblGrandTotal {
color: #BF0202;
}
.BVSmallText {
color:#444;
font-size: 11px;
}
.BVSmallText a {
color:#000;
line-height: 18px;
}
#AddressList_ctl00_AddressDisplay {
display: block;
margin-top: 10px;
}
a#LoginControl1_lnkForgotPassword {
text-decoration: underline;
color: #927101;
font-size: 14px;
}
#btnUpdateTotals {
}
#PackageList a, #CheckoutPayment a {
text-decoration: none;
font-weight: bold;
}
.BVText .Stories {
text-align: justify;
}
#ItemsGrid .Header {
background: #333333;
border: 1px solid #333333;
}
#ItemsGrid .Item {
background: #fff;
}
.Item td, .AlternateItem td {
padding: 5px 0px 5px 10px;
}
.AlternateItem {
background-color: #e1e1e1;
}
.FormTable {
margin: 3px 20px 15px 0px;
}
.FormTable .formlabel {
margin: 0px;
text-align: left;
}
#CheckoutTable .FormTable td {
}
.contentcell {
width: 390px;
padding: 20px;
border: 1px solid #ccc;
background-color: #eee;
}
#CommentsField {
height: 112px;
}
.ContentCell .FormInput, .ContentCell .FormInputError {
width: 200px;
color: #666666;
}
.FormInput:focus {
background: #fffff;
} /* changes color of focused input box */
#btnSearch {
margin: 2px 0 0 3px;
} /* fixes alignment of search button on search page */
.FormInputError {
font: bold 10px/14px Arial;
color: #666;
height: 18px;
padding-left: 2px;
background: #fff;
border: #ccc 1px solid;
}
#FirstAddressControl_CompanyNameRow .formlabel {
vertical-align: top;
}
#SecondAddressControl_CompanyNameRow .formlabel {
vertical-align: top;
}
#btnContinue3, #btnContinue2 {
margin-bottom: 20px;
}
.CheckoutDescription span.FormLabel label {
padding:2px;
background: #fff;
}
span.FormLabel label:before {
content: "\00AB \0020"; /* adds a "<<", not visible on IE */
}
.FormLabelStrong, #lblTelephoneDescription, #lblPayPalDescription, #lblPurchaseOrderDescription {
font: 14px Arial;
color: #333;
letter-spacing: normal;
line-height: 18px;
}
#trCreditCard .FormLabelStrong #rbCreditCard {
margin: 0;
}
#trCreditCard .FormLabelStrong label {
padding-left: 11px;
color: #444444;
font: 12px/25px Arial;
}
#trCreditCard, #trPayPal, #trPurchaseOrder, #trTelephone, #trEmail, #trFax, #trCheckByMail {
display: block;
padding: 10px 0px;
border-bottom: 1px solid #ccc;
}
span#lblAddress {
font: 14px Arial;
color: #444;
line-height: 24px;
}
.indent {
margin-left:20px;
}
.Padded {
margin:10px 0 0 0;
padding: 0px;
}
#dlPolicy, #dlPolicy a, #dlPolicy a:hover {
font: 12px Arial;
color: #927101;
}
#dgPolicy td {
border: none;
}
.text {
font: 12px Arial;
color: #363636;
padding-bottom: 8px;
}
select {
color: #363636;
}
a#lnkMyAccount, a:link#lnkMyAccount, a:visited#lnkMyAccount {
font: bold 12px Arial;
color: #555;
}
a:hover#lnkMyAccount {
text-decoration: underline;
}
/* --------------------------------------
Footer
-------------------------------------- */
#checkoutNavColumn {
padding: 10px 30px 10px 0px;
}
#checkoutContentColumn {
padding: 10px 0px 10px 20px;
}
#pnlGiftCertificate {
width: 300px;
padding: 22px 0 0 0px;
}
#pnlGiftCertificate .FormInput {
vertical-align: top;
height: 22px;
}
#inCVV {
margin-right: 5px;
}
#PromotionalCode1_pnlCoupon {
width: 300px;
margin: 0 0 15px 0;
padding: 22px 0 0 15px;
text-align: left;
border: 3px double #ccc;
}
#poweredby {
display: none;
}
.aaa {
position: absolute;
margin-left: 615px;
top: 80px;
*top: 89px;
}
#LoginControl1_valSummary li {
font: bold 12px Arial, Geneva, sans-serif;
color: #860202;
line-height: 20px;
list-style-type: none;
}
#LoginControl1_valSummary ul {
margin-left: 0px;
padding-left: 0px;
}
#NewUserControl1_valSummary li {
font: bold 12px Arial, Geneva, sans-serif;
color: #860202;
line-height: 20px;
list-style-type: none;
}
#NewUserControl1_valSummary ul {
margin-left: 0px;
padding-left: 0px;
}
#ContentColumn1__ctl2_btnGoEmail {
vertical-align: text-top;
}
#login a {
font: bold 14 Arial;
line-height: 20px;
color: #FFF;
margin-left: 18px;
position: absolute;
top: 165px;
}
#login a:hover {
text-decoration: underline;
}
#PromotionalCode1_inCouponCode {
width: 200px;
}
#PromotionalCode1_btnApply {
vertical-align: bottom;
}
#Payment a, #Payment a:active, #Payment a:visited {
font: 10px Arial, Geneva, sans-serif;
color: #504f4f;
padding-top: 14px;
padding-left: 10px;
padding-right: 5px;
position: absolute;
text-decoration: none;
}
#Payment a:hover {
text-decoration: underline;
}
#pnlForm .FormLabel {
}
#trCheckByMail label {
display: none;
}
#lblEmailDescription, #lblCheckByMail, #lblFaxDescription {
font: 14px/18px Arial, Arial;
}
#formcont {
text-align: left;
}
.FormHead {
font: bold 18px Arial;
margin-top: 10px;
margin-bottom: 10px;
}
.topsection {
display: block;
border: 1px solid #ccc;
padding: 10px;
background: #eee;
width: 98%;
}
.topsection h1 {
}
#pnlInstuctions .formlabel {
}
#formbtncont, #btnSubmit, #btnCancel, #btnSave {
text-align:left;
margin-top: 10px;
margin-bottom: 10px;
background-colour: #fff;
}
#LoginControl1_valSummary, #NewUserControl1_valSummary {
padding: 5px 0px 5px 0px;
}
#pnlOKAY table {
width: 100% !important;
}
/* --------------------------------------
Address Book
-------------------------------------- */
#AddressBookDescription a:link, #AddressBookDescription a:visited, #AddressBookDescription a:active, #AddressBookDescription a:hover {
text-decoration: underline;
}
/* --------------------------------------
Shipping
-------------------------------------- */
#pnlShipping a:link, #pnlShipping a:visited, #pnlShipping a:active, #pnlShipping a:hover {
text-decoration: underline;
}
#ShipMethodsList input {
margin-left: 0px;
}
/* --------------------------------------
Buttons
-------------------------------------- */
#ContinueButton {
margin-bottom: 10px;
}
/* ======================================
6. Customisations and "Plugins"
====================================== */
/* Info
This section will contain CSS for styling new customisations to the system. The
CSS will live here until it is incorporated into the ShopDirect Boilerplate in a
new release.
If you need to style a customisation, please add a sub-section to this and mark it in
the index! This will make it easy for another designer who needs to style the same
customisation to find it and copy it for use in their new site.
*/
/* --------------------------------------
6.1. Single Page Checkout
-------------------------------------- */
/* Overrides (To be reset in Boilerplate) */
#CartContainer {
}
#CartContainer #CartItemBlock {
border:none;
}
#CartContainer .header {
height: 36px;
}
.CartItem a, .CartItem a:link, .CartItem a:visited, .CartAlternateItem a, .CartAlternateItem a:link, .CartAlternateItem a:visited {
color: #000000;
font-size: 14px;
}
#pnlCart #CartContainer {
border: 1px solid #E4E4E4;
}
/* Layout containers */
#cartcontent {
}
#cartcontent #page {
padding: 0;
}
/* Checkout Steps */
#checkoutstepsspc {
border: 1px dotted #cccccc;
border-left: none;
border-right: none;
text-align: center;
padding-top: 16px;
padding-bottom: 16px;
}
.inactivestepspc, .activestepspc {
width: 106px;
height: 38px;
line-height: 38px;
float:left;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .25);
-o-box-shadow: 0 0 8px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .25);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.activestepspc {
color: #fff;
background: url("images/Pages/SinglePageCheckout/checkoutstep-background-active.png") repeat-x #000;
}
.inactivestepspc {
color: #000;
background: url("images/Pages/SinglePageCheckout/checkoutstep-background-inactive.png") repeat-x #fff;
}
.massive {
width: 50px;
float:left;
height: 38px;
line-height: 38px;
text-indent: -9999px;
background: url("images/Pages/SinglePageCheckout/checkoutstep-divider.png") no-repeat 20px 15px;
}
/* Cart Container */
#pnlCart {
padding-left: 10px;
}
#CartContainer .FormTable {
margin:0;
}
#pnlShip .BVSmallText {
display:block;
font-size: 11px;
}
#pnlShip .ShippingPolicy {
float:left;
margin: 1em 0;
}
.CartAlternateItem, .CartItem {
padding: 10px;
border-bottom: 1px solid #e6e6e6;
}
.CartAlternateItem.CartItemImage, .CartItem.CartItemImage {
}
.CartAlternateItem.CartItemProd, .CartItem.CartItemProd {
}
.CartAlternateItem.CartItemName, .CartItem.CartItemProd .CartItemName {
font-size: 12px;
}
.CartAlternateItem.CartItemPrice, .CartItem.CartItemPrice {
font-weight: normal;
}
.CartAlternateItem.CartItemPrice, .CartItem.CartItemPrice {
}
.CartAlternateItem.CartItemQty, .CartItem.CartItemQty {
}
.CartAlternateItem.CartItemTot, .CartItem.CartItemTot {
}
.CartAlternateItem.CartItemDelete, .CartItem.CartItemDelete {
}
#CartContainer .header {
background: url("images/Pages/SinglePageCheckout/cartcontainer-header.png") repeat-x #3f3f3f;
color: #fff;
font-weight: bold;
font-size: 14px;
}
#CartContainer #Td1 {
text-align:right;
}
#CartContainer #CartUpdateBlock {
}
#UpdateBlockWrapper {
padding: 10px 0;
height: 25px;
line-height: 25px;
padding-right: 10px;
}
/* Cart Statement */
#updTotals {
float:right;
text-size: 12px;
}
#carttotalspc {
width: 255px;
}
#carttotalspc td {
padding: 5px 0;
}
#carttotalspc td.label {
}
#carttotalspc td.value {
}
#carttotalspc .label.major {
color: #333;
font-weight: bold;
}
#carttotalspc #CartTotalsSubtotal {
}
#carttotalspc #CartTotalsSubtotal .label {
}
#carttotalspc #CartTotalsSubtotal .value {
}
#carttotalspc #CartTotalsDiscount {
}
#carttotalspc #CartTotalsDiscount .label {
}
#carttotalspc #CartTotalsDiscount .value {
}
#carttotalspc #CartTotalsGiftwrap {
}
#carttotalspc #CartTotalsGiftwrap .label {
}
#carttotalspc #CartTotalsGiftwrap .value {
}
#carttotalspc #CartTotalsShipping {
}
#carttotalspc #CartTotalsShipping .label {
}
#carttotalspc #CartTotalsShipping .value {
}
#carttotalspc #CartTotalsVAT {
}
#carttotalspc #CartTotalsVAT .label {
}
#carttotalspc #CartTotalsVAT .value {
}
#carttotalspc #CartTotalsHandling {
}
#carttotalspc #CartTotalsHandling .label {
}
#carttotalspc #CartTotalsHandling .value {
}
#carttotalspc #CartTotalsGiftCertificates {
}
#carttotalspc #CartTotalsGiftCertificates .label {
}
#carttotalspc #CartTotalsGiftCertificates .value {
}
#carttotalspc #CartTotalsFinal {
}
#carttotalspc #CartTotalsFinal .label {
}
#carttotalspc #CartTotalsFinal .value {
}
#lblSubTotal {
}
#upTotals .label.major {
color: #000;
}
/* Shipping Block */
#tblShipCC {
margin-top: 50px;
}
#tblShipCC #pnlAddress .FormTable td {
padding-bottom: 1em;
}
#tblShipCC #pnlShip .CheckoutDescription, #tblShipCC #pnlAddress .CheckoutDescription {
color: #000;
display:block;
width: 100px;
float:left;
}
#tblShipCC #pnlShip select, #tblShipCC #pnlAddress select {
width: 140px;
float:right;
}
#tblShipCC #btnContinueShopping {
margin-bottom: 1em;
}
/* Contact Details
___________________________________________ */
#contactDetails {
position: absolute;
top: -5px;
left: -7px;
width: 310px;
font: 11px Arial;
color: #565656;
display: none;
}
#contactDetails span {
font: bold 12px Arial;
color: #565656;
}
/* Merchandising Block
_________________________________________ */
#merchBlocks {
text-align: left;
}
.merchBlock {
background: url(images/merchBlock.jpg) top left no-repeat;
width: 287px;
*width: 307px;
padding: 0px 0px 0px 20px;
float: left;
margin: 10px 0px 10px 10px;
}
.merchBlock h2 {
font: 18px Arial;
color: #4E82B4;
margin: 11px 0px;
line-height: 22px;
}
.merchBlock h2 span {
font: 18px Arial;
color: #fff;
}
.merchBlock img {
margin: 10px 10px 15px 0px;
}
/* Product Header
______________________________________ */
.prodHeader {
background: url(images/cath4.jpg) top right no-repeat #927101;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 10px 0 10px;
padding: 10px 0 9px 15px;
vertical-align: bottom;
clear: both;
}
#merchHeader {
margin: 0px 0px 0px;
}
/* Clear Both
_____________________________________ */
.clearBoth {
clear: both;
}
/* --------------------------------------
6.2. Layout Blocks
-------------------------------------- */
/*
This section styles a set of generic "blocks" that can be used and re-
used in a layout.
These are modular interface components that can be used in a variety of
contexts.
The layout system is built on a 16 Column Grid with 10px margins / 20px gutters.
See new-components.html for an example.
Syntax:
.block.appearance - where .block is the basic object and .theme is the appearance.
.block
.block.bold
.block.emphasis
.block.dotted
Utility Classes:
.shadow - Add a black shadow with 8px blur and .25 opacity.
Reference:
.right - width:45%; text-align:right, float:right;
.left - width:45%; text-align:left, float:left;
.major - Makes "something" MAJOR. e.g., makes a heading bigger and red.
*/
.block {
width: 280px;
background-color: #fff;
border: 1px solid #e4e4e4;
margin: 10px;
}
.block .header {
height: 38px;
line-height: 38px;
background: url("images/Pages/SinglePageCheckout/cartcontainer-header.png") repeat-x #3f3f3f;
}
.block .header h3 {
margin:0;
color: #fff;
font-size: 14px;
font-weight: bold;
height: 38px;
line-height: 38px;
padding: 0px 5%;
display:inline-block;
}
.block .header h3.major {
margin:0;
color: #fcc200;
font-size: 1.5em;
font-weight: bold;
text-align: right;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.block .header h3.right {
width: 45%;
text-align: right;
float:right;
}
.block .header h3.left {
width: 45% text-align: left;
float:left;
}
.block .content {
padding: 10px;
}
.block .footer {
height: 38px;
line-height: 38px;
background: url("images/Pages/SinglePageCheckout/cartcontainer-header.png") repeat-x #3f3f3f;
clear:both;
}
.block label {
font-weight: bold;
color: #000;
float:left;
}
.block input[type="text"], .block select {
float:right;
width: 150px;
}
.block input[type="image"] {
float:right;
margin-bottom: 0.5em;
}
.block .form-element {
display:block;
float:left;
width: 100%;
line-height: 25px;
padding-bottom: 1em;
}
/* DOTTED */
.block.dotted {
background-color: #f1f1f1;
border: 1px dotted #cccccc;
}
.block.dotted .footer, .block.dotted .header {
height: 38px;
line-height: 38px;
background: #fafafa;
color: #666;
}
.block.dotted .header h3 {
margin:0;
color: #666;
font-weight: bold;
height: 38px;
line-height: 38px;
padding: 0px 5%;
display:inline-block;
}
.block.dotted .header h3.major {
margin:0;
color: #fcc200;
font-size: 1.5em;
font-weight: bold;
text-align: right;
}
.block.dotted .header h3.right {
width: 45%;
text-align: right;
float:right;
}
.block.dotted .header h3.left {
width: 45% text-align: left;
float:left;
}
.block.dotted .content {
padding: 10px;
}
/* ROUNDED */
.block.rounded {
border: 1px solid #cccccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
overflow:hidden;
background: url("images/Components/rounded-content-background.png") repeat-x #fff;
}
.block.rounded .footer, .block.rounded .header {
background: none;
}
.block.rounded .header h3 {
color: #666;
}
.block.rounded .header h3.major {
color: #000;
}
.block.rounded .header h3.right {
}
.block.rounded .header h3.left {
}
.block.rounded .content {
padding: 10px;
}
/* ALERT */
/* ROUNDED */
.block.alert {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, .1) inset;
overflow:hidden;
background: #fbf1c3;
}
.block.alert .footer, .block.alert .header {
background: none;
}
.block.alert .header h3 {
color: #666;
}
.block.alert .header h3.major {
color: #000;
}
.block.alert .header h3.right {
}
.block.alert .header h3.left {
}
.block.alert .content {
padding: 10px;
}
/* Utility Classes */
.width-40 {
width:40px;
}
.width-60 {
width:60px;
}
.width-80 {
width:80px;
}
.width-100 {
width:100px;
}
.width-120 {
width:120px;
}
.width-140 {
width:140px;
}
.width-160 {
width:160px;
}
.width-180 {
width:180px;
}
.width-200 {
width:200px;
}
.width-220 {
width:220px;
}
.width-240 {
width:240px;
}
.width-260 {
width:260px;
}
.width-280 {
width:280px;
}
.width-300 {
width:300px;
}
.width-320 {
width:320px;
}
.width-340 {
width:340px;
}
.width-360 {
width:360px;
}
.width-380 {
width:380px;
}
.width-400 {
width:400px;
}
.width-420 {
width:420px;
}
.width-440 {
width:440px;
}
.width-460 {
width:460px;
}
.width-480 {
width:480px;
}
.shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .25);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .25);
-khtml-box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}
/* ======================================
7. Tweaks
====================================== */
/*
Any tweaks to the code that can't be handled inside the CSS cascade should be
kept here.
*/
/* Hack to fix layout between home and product pages (
problem caused due to inconsistent markup between page types. */
#navcolumnRight .HomePageBlock {
width: 160px;
margin-bottom: 2em;
}
#pnlWriteAReview h3 {
margin-top: 0;
}
/* ======================================
8. Bug Fixes
====================================== */
/* Info
Any CSS that is used to fix bugs front-end bugs in the system (table rows
that don't collapse, layout bugs, etc., other kinds of CSS bug-related
nastiness) should be kept here.
Any code in here should be earmarked as a bug and logged in the ActiveCollab
"!ShopDirect Boilerplate" Project's Bugs! discussion.
If you fix a bug here, please add a comment as well with a short description
of the problem and solution, and put it in the bug's discussion thread.
*/
#ProductReviews br {
display:none;
}
.SingleProductDisplay br, #ProductPageContentColumn #ProductDescription br, #ProductPageContentColumn #ProductProperties br, #ProductPageContentColumn #ProductControls br, #ProductPageContentColumn #ProductDescription2 br, .BVSmallText br, #lblAddress br, #lblExtraContent br {
display:inline;
}
#CartSubTitle, #CartCheckoutButtons, table#CartContainer {
width: 100%;
padding:0;
margin: 0 auto;
}
#CartItemBlock .Header {
height: 36px;
background-color: #000;
font-weight: bold;
font-size: 14px;
background: #333333;
}
.CartAlternateItem input[type="text"], .CartItem input[type="text"] {
width: 40px;
}
#CartUpdateBlock {
width:75%;
padding-right:15px;
text-align: right;
vertical-align:middle;
}
#CartCheckoutButtons {
text-align:right;
padding-top: 20px;
}
#CartSubTitle {
}
/* Order Preview Page */
#CheckoutPayment {
text-align: left;
}
/* Fix for if there's a background in the site and it shows through on the Order Preview page. */
#pnlCheckoutSteps {
background: #fff;
}
#PlaceOrderCell {
background: #fff;
}
#CheckoutNavColumn {
background: #fff;
}
#CheckoutContentColumn {
background: #fff;
}
#pnlCheckoutSteps {
}
#CheckoutSteps {
padding: 15px 0px 0px 10px;
background: url("images/content-bg.jpg") repeat;
}
#CheckoutSteps table {
margin: 0;
border: 1px dotted #ccc;
}
#CheckoutSteps table tbody tr td {
padding: 10px;
text-align:center;
}
#pnlInstuctions .formlabel, #NonShippingLabel {
font-size: 1.6em;
color: #000;
margin-bottom: 1em;
}
#InstructionsField, #NonPackageItems {
margin-top: 1em;
}
/* Checkout Receipt Page */
#pnlOKAY table {
}
#btnContinue {
margin-top: 2em;
}
#btnContinue2 {
}
/* Padding off Home, Nav and Content Columns - Third Column Error */
/* Shopping Cart and Checkout Pages */
/* Off-centre Banner Navs */
/* --------------------------------------
8.1 Removals (display:none;)
-------------------------------------- */
br /* Fixes issue of presentational
tags with content. Use ,
and margin-bototm:1em
instead. */ {
/* display: none; */
}
/* --------------------------------------
8.2 Restores
-------------------------------------- */
/* Info
This section restores any of the above that are needed for proper functioning
in specific instances around the site.
Essentially, this section fixes any bugs that the bug fixes caused. (Gah!)
*/
/* Restoring Inline Elements */
.SingleProductDisplay br, #ProductPageContentColumn #ProductDescription br, #ProductPageContentColumn #ProductProperties br, #ProductPageContentColumn #ProductControls br, #ProductPageContentColumn #ProductDescription2 br, .BVSmallText br, #lblAddress br, #lblExtraContent br {
display:inline;
}
/* ======================================
9. Utility Classes
====================================== */
/* Info
This section should contain any CSS classes that are context-agnostic
and can be re-used throughout the site to create a change in appearance
on any element.
*/
.float-left {
float:left;
}
.float-right {
float:right;
}
.float-none {
float:none;
}
.clear-both {
clear:both;
}
.display-none {
display: none;
}
.indent {
margin-left:20px;
}
.small {
font-size: .9em;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.black {
color: #000;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* ======================================
10. Cruft
====================================== */
/* Info
Any redundant, ancient, buggy, disused elements that are hidden by using
display:none should be kept in this section. If an element can be considered
cruft, add its ID to the candidate list below and log it in the "Cruft!" discussion
in ActiveCollab.
*/
/* --------------------------------------
10.1 Cruft Candidates
-------------------------------------- */
#lnkwrite /* "Write a Review for this Product" text in review popup - removed for distraction. */ {
display:none;
}
/* --------------------------------------
10.2 Cruft!
-------------------------------------- */
/* Info
Any code put into this section should be considered as earmarked for removal
from the system… in other words, the Powers that Be have agreed that it should
be axed by the devs.
In other words, an element will only appear in this section if none of us ever,
ever want to see it again.
*/
/* ======================================
11. Third Party CSS
====================================== */
/* Info
This section should contain the code for any third party CSS, code snippets, etc.
This includes CSS for MailChimp, Campaign Monitor, ShareThis, etc. etc. ESPECIALLY
code that overrides CSS from those widgets.
*/
/* --------------------------------------
Payline 3D
-------------------------------------- */
#dvFrame iframe {
height: 360px;
}
/* Footer List
__________________________________________________________ */
#footerList ul {
float: left;
margin: 0px 70px 0px 0px;
}
#footerList li {
font: 11px Arial;
padding: 2px 0px;
color: #fff;
list-style-type: disc;
}
/* Merchandising Blocks
__________________________________________________________ */
#merchandisingBlock {
margin: 0px 0px 10px 0px;
background: url("images/merchBackground.png") top center no-repeat;
}
#merchandisingBlockInner {
padding: 0px 10px 20px;
}
.merchLeft {
float: left;
}
.merchLeft .mainImage, .merchRight .mainImage {
margin: 10px 8px 10px 10px;
}
.merchLeft h2 {
font: bold 12px Arial;
line-height: 34px;
color: #fff;
text-transform: uppercase;
margin: 15px 0px 15px;
background: url("images/merchHeader.jpg") top center no-repeat;
}
.merchLeft a, .merchLeft a:active, .merchLeft a:link, .merchLeft a:visited {
color: #fff;
}
.merchLeft a:hover {
color: #fff;
text-decoration: underline;
}
/* Clear Both
________________________________________________________ */
.clearBoth {
clear: both;
}
/* Social Media
________________________________________________________ */
#socialMedia {
background: url("images/socialBackground.jpg") top left no-repeat;
padding: 17px 0px 17px 17px;
margin: 0px 0px 10px 0px;
}
#socialMedia img {
margin: 0px 5px 0px 0px;
}
/* Merchandising Blocks
_________________________________________________________ */
#merch {
background:url(images/merchback.png) no-repeat top center;
display:block;
margin:10px 0px 20px 0px;
height:207px;
*height:237px;
padding-top:30px;
}
#merchblock {
display:inline-block;
*display:inline;
zoom:1;
width:317px;
height:185px;
position:relative;
text-align:left;
}
#merchblock h4 {
font:20px Arial, Helvetica, sans-serif;
color:#402802;
margin:20px 0px 0px 20px;
}
#merchblock a {
position:absolute;
bottom:-21px;
left:20px;
}
.rosary {
background:url(images/rosary.png) no-repeat top center transparent;
}
.crucifixes {
background:url(images/crucifixes.png) no-repeat top center transparent;
}
.specials {
background:url(images/specials.png) no-repeat top center transparent;
}
/* The End! */
#contacttop {
position:absolute;
top:-5px;
width:375px;
}
#contacttop p {
font:12px Arial, Helvetica, sans-serif;
color:#565656;
line-height:18px;
}
/* Loading Module
__________________________________________________________ */
.loadingprogresscontainerdiv {
position: relative;
z-index: 120;
}
.loadingprogressdiv {
height: 100%;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
}
.loadingprogressinnerdiv {
display: inline-block;
position: relative;
}
#divLoading {
position: absolute;
top: 300px;
}
#divLoading {
background: #fff;
padding: 10px 0px;
width: 200px;
font: 12px Arial, Helvetica, sans-serif;
color: #696a6c;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.08) inset;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.08) inset;
box-shadow: 0px 0px 10px #ababab;
margin-left: -77px;
}
#divLoading img{
margin: 0px 80px 10px;
}
#loadingprogresscontainerdiv {
text-align: center;
}
#StartShopping {
display: none;
}