The Quickest and Easiest way to work out what does what on the CSS style sheet

Hi thought this would be helpful for noobies like me doing their store up for the first time - it will help explain what you are looking at. It's a help sheet only - please fool around with yours:laugh:

my comments are in blue the rest is the code

/** Comment Tab - Open

• Main CSS Stylesheet File Title Info
• @package templateSystem Info
• @copyright Copyright 2003-2007 Zen Cart Development Team Info
• @copyright Portions Copyright 2003 osCommerce Info
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 Info
• @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $ Info
  */ Comment Tab – Close

body { This is the area around the main cart
margin: 0;
font-family: verdana, arial, helvetica, sans-serif; this is the font used un the cart font-size: 62.5%;
color: #000000; this is the text colour on your page – i.e. the little home link in breadcrumbs
background-color: #2c445d; Colours the Background around the main cart }

a img {border: none; }Unsure

a:link, #navEZPagesTOC ul li a {the colour of the Log yourself in link and the links of your products etc
color: #00ffff;
text-decoration: none;
}

a:visited {links that you’ve been too
color: #09F;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000; the colour of the link when the mouse pointer is over it }

a:active {Unsure
color: #0FF;
}

h1 {
font-size: 1.5em; size of it
color: #9a9a9a; Changes the size of the Titles of your shopping cart items – i.e. if you had an item under the heading of artwork – then the title of artwork is controlled here
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}

/* Might uncomment either or both of these if having problems with IE peekaboo bug: Comment Tab - Open
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {Unsure
height: 1%;
}
*/ Comment Tab – Close

CODE {
font-family: arial, verdana, helvetica, sans-serif; changing this changes these types of messages

This content is located in the file at: /languages/english/html_includes/YOUR_TEMPLATE/define_main_page.php

font-size: 1em; this changes the size of the above
}

FORM, SELECT, INPUT {
display: inline;
font-size: 1em; when I changed this to 15 the top bar where the Home link is repeated continually for a bit margin: 0.1em;
}

TEXTAREA {Unsure
margin: auto;
display: block;
width: 95%; }

input:focus, select:focus, textarea:focus {
background: #E4FEF5; Unsure
}

FIELDSET {Unsure
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}

LEGEND {Unsure
font-weight: bold;
padding: 0.3em;
color: black;
}

LABEL, h4.optionName {
line-height: 1.5em; changed the heading of the right side boxes to get a repeating action padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em; changed the location of words to buttons on the client registration page moved it further right
}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left; Unsure
}

#logo {display:none;} Unsure
LABEL.inputLabel { Unsure
width: 9em;
float: left;
}

LABEL.inputLabelPayment { Unsure
width: 14em;
float: left;
padding-left: 2.5em;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel { Unsure
width: 11em;
float: left;
}

#checkoutPayment LABEL.radioButtonLabel { Unsure
font-weight: bold;
}

P, ADDRESS {Unsure
padding: 0.5em; }

ADDRESS {Unsure
font-style: normal; }

.clearBoth {Unsure
clear: both;
}

HR {
height: 15px; Changes the size of the horizontal lines
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #000000; changes the solid density of the hr and the colour }

/warnings, errors, messages/ Comment Tab – Open and Close

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution { Unsure

line-height: 1.8em;
padding: 0.2em;
border: 1px solid #9a9a9a;
}

.messageStackWarning, .messageStackError { Unsure

background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess { Unsure
background-color: #99FF99;
color: #000000;
}

.messageStackCaution { Unsure
background-color: #FFFF66;
color: #000000;
}

/wrappers - page or section containers/ Comment Tab – Open and Close

#mainWrapper {
background-color: #006666; Changes the main colour inside the cart text-align: left;
width: 750px; Changes the width of the cart – try to leave at 750 for old monitors are only 800 px wide
vertical-align: top;
border: 1px solid #000000; Changes the line that goes around the outside of the cart }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper{
background-image: url(/images/header_bg.jpg); Where the header image is background-repeat: repeat-x;
background-color: #000000; Unsure
height:300px; the size of the image in the header
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em; pushes left row boxes to the right
margin-right: 0.5em; pushes right row boxes to the left
}

#tagline {
color:#000000; Unsure – as I may have removed this before doing this. font-size: 2em;
text-align : center;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #cacaca; Unsure
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%; Unsure }

.wrapperAttribsOptions {
margin: 0.3em 0em; Unsure
}

**/navigation/ **Comment Tab – Open and Close

.navSplitPagesResult {} Unsure
.navSplitPagesLinks {} Unsure
.navNextPrevCounter { Unsure margin: 0em;
font-size: 0.9em;
}
.navNextPrevList { Unsure display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3; Unsure
background-image: url( /images/tile_back.gif); this background image at the top of your store and side boxes padding: 0.5em 0.2em; this controls the box – or that little annoying line you sometimes get at the top of the header image – also doe some of the others – look around your store font-weight: bold; Unsure color: #000000; Unsure
height: 1%; Unsure }

#navCatTabsWrapper {
background-color: #000000; changes category colour under the header color: #9a9a9a; Unsure
background-image:none; Unsure}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em; changes some dimensions of boxes – look around list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff; changed the Home links white-space: nowrap;
}

#navCatTabs ul li a {
color: #000; changes the colour of the links in the categories line }

#navEZPagesTOCWrapper { Unsure font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul { Unsure margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li { Unsure white-space: nowrap;
}

#navEZPagesTOC ul li a { Unsure
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription { Unsure
margin: 0.5em;
}

#navMainSearch { Unsure
float: right;
}
**
#navBreadCrumb **{
padding: 0.5em 0.5em;
background-color: #006666; changes the colour of the breadcrumbs line font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop { Unsure background-color: #abbbd3;
background-image: url(images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

**#navColumnOne, #navColumnTwo **{
background-color: transparent; changing this colours in the left and right side box columns }

**/The main content classes/ **Comment Tab – Open and Close

#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

**/.content,/ **Comment Tab – Open and Close

#productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.alert {
color: #FF0000; changing this changes the warnings in the client logon and maybe other areas too
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/Shopping Cart Display/ Comment Tab – Open and Close – for the shopping cart I made no changes
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}

.tableHeading TH {
border-bottom: 1px solid #9a9a9a;
}

.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #33CC33;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartOldItem {
color: #660099;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

.cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #E4FEf5;
border: 1px solid #003D00;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/Image Display/ Comment Tab – Open and Close

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {
margin: 0.5em 1em;
}

/Attributes/ Comment Tab – Open and Close

.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

/list box contents/ Comment Tab – Open and Close

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

.centerBoxWrapper {
border: 1px solid #9a9a9a; changes with of the box- usually seen around new products height: 1%;
margin: 1.1em 0;
}

h2.centerBoxHeading { changes new product heading
font-size: 1.3em;
color: #ffffff;
}

/sideboxes/ Comment Tab – Open and Close

.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em; WOW change this to 15 and see what you get - lol color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em; pretty clear what this changes
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(/images/tile_back.gif);
padding: 0.5em 0.2em;
}

.leftBoxContainer, .rightBoxContainer { increases the spaces between the boxes on the left and right margin: 0em;
border: 1px solid #000000;
border-bottom: 5px solid #000000;
margin-top: 1.5em;
}

.sideBoxContent { changes colour of side boxes ad the padding
background-color: #2c445d;
padding: 0.4em;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover { Unsure
color: #FFFF33;
text-decoration: none;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited { Unsure
color: #FFFFFF;
}

Didn’t do any thing else from here down

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #000;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* categories box parent and child categories */ Comment Tab – Open and Close

A.category-top, A.category-top:visited {
color: #ccccff;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #00ffff;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #FF0000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */ Comment Tab – Open and Close

/misc/ Comment Tab – Open and Close

.back {
float: left;
}

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}

.hiddenField {
display: none;
}
.visibleField {
display: inline;
}

CAPTION {
/display: none;/ Comment Tab – Open and Close
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/vertical-align: top/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

TR.tableHeading {
background-color: #cacaca;
height: 2em;
}

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(file:///E|/my%20websites%20folder/public/mystore/includes/templates/MyTemplates/images/tile_back.gif);
height: 2em;
color: #00ffff;
}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
clear: both;
}

.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}

Thanks!

Thank you. This is the kind of stuff I need. After months of trying to figure out zen-cart I gave up. That was a year ago so I am back to conquer. Thanks again for the information.

You've done a lot of digging and analysis - but it wasn't necessary... :(

If you use Firefox browser with the Web Developer Plugin, it takes just a couple of seconds to analyse a displayed page, find out what style ID's and/or Classes apply to any displayed element and then do a quick (offline) edit to the stylesheet to see what changes occur. Your stylesheet edits in this offline mode can then easily be committed to your live stylesheet.

Most (if not all) of the regular helpers on the forum will at least have this tool - that's why we are often able to provide a very quick answer when people look for stylesheet assistance.

Web Developer Toolkit is also very useful for analysing and inspecting a host of other things as well...

You know, I downloaded that Firefox thing and can't figure out how to use it :laugh:

Sucks to be me - hahahahahaha :laugh::laugh::laugh:

Do you have the FireFox browser? It should add itself on once you request it.

Yes, I have it - was able to load the developer - now I have a lot of buttons - I press the css button and see the code that I see in dreamweaver.

Am I missing something?

OK Got It :smile:

For anyone who is having trouble with this:

In Firefox, once you install the developer module - you will see a bunch of buttons.

One of these says CSS with a drop down menu on the right.

Click the arrow and enable(click) view style information.

When you do the screen should split into two horizontal planes.

If you move you mouse over your page you will see a red box - clicking it will change the CSS code in the bottom half identifying what code you need to change. :laugh:

On the Web developer toolbar, there's a tab called "Information".

Call up a page on your site, then click this Information Tab, then click "Display ID and Class Details"...

Each element's style ID/Class will be rendered, showing you what is governing the elements' styles... Take note of the style ID/Class of the element you want to alter, then de-activate "Display ID and Class Details" so the descriptions disappear from the screen.

Then, press F12...

Then click the CSS tab that appears in the management console frame. Choose a stylesheet. Click EDIT (in the second grey row)...

Hey presto... ! You can now do an offline edit to the CSS and see real-time changes on-screen! (Remember this is OFFLINE - affecting only the page being displayed in your browser, so any changes you want to save will have to be committed to your live stylesheet(s) on the server.)

What I often do once I've done a stylesheet edit this way is highlight all the code, copy to clipboard, open the corresponding server-side stylehseet for editing, and just replace all the code (ctrl+v), save, then FTP the edited stylesheet back to the server... BUT while you're a novice, it's probably better to backup the original stylkesheet(s) first before you do this.

The firefox web developer addon is great, but I would highly recommend taking a look at the Firebug extension.
http://getfirebug.com/

I think this may be what schoolboy was referring to when he said to press F12, but there is a much quicker way to edit your stylesheet.

Once installed, just hit F12 to bring up the console. Click inspect element icon (2nd from the left) or push CTRL+SHIFT+C. Now you can hover over any element on the page, click and you be shown exactly where you are in the html tree in the left pane. On the right you will see any styles associated to the element you have selected and can make changes in real time.

There are lots of cool tricks, like clicking on a font size, or pixel dimension and use the up and down arrow keys to adjust the number incrementally.

You can also click anywhere in the html to select an element display it's associated styles.

There is a nice overview here.
http://www.evotech.net/blog/2007/06/introduction-to-firebug/

I've been looking around the forum for various issues and I've noticed a lot of questions about what does what on the style sheet.

Apologies for those who know about this but I thought it might be useful to some if I mentioned FireBug - it's the greatest web design tool ever invented in my view and if you've not used it, download and install it now. It'll change your life forever! :smile:

Obviously this is assuming that you use FireFox when designing websites (which is a very good idea).

Go to https://addons.mozilla.org/en-US/firefox/addon/1843 and download and install FireBug.

Once that's done there are two ways you can use it quickly and easily to see what element is doing what.

First you can simply right click on whatever bit of the website you're looking at and select "Inspect element". This will open up the Firebug window at the foot of your browser. On the left you'll see the source code, on the right you'll see the relevant CSS.

It shows you what stylesheeet it's on, and the best bit is that you can edit the values in each element and it'll change on the browser, so you can see in real time what different it's making.

Secondly, once you've got the Firebug window open (click the bug symbol on the status bar at the bottom of your browser) you can use your mouse to scroll over the screen and highlight each of the different elements used to make the page. Just click on the button shown on the top left of the Firebug window then run your mouse over the webpage.

I use this all the time as a way to determine exactly what's going on, what elements are being shaped and coloured by what parts of the style sheet and so on.

Thanks Graham!
Didn't know about this handy addon. Just installed and I can see this is going to be very helpful - especially to a novice like me.
Much appreciated.

Hi janissaire.

Thanks for the information.It's pleasure to be a part of your forum. I love to try also what you are discussing here. Thanks!

I just downloaded this and it is fantastic for sure! One thing I haven't figured out yet, is when I select an element on the page, Firebug automatically reverts to html when it's the css that I need to work with. When I select the css tab, it does indeed show stylesheet.css, however I'm still faced with the problem of locating in that file which bit I need to work with to change that portion of the page I want. Have the same problem with any editor. Which section of stylesheet.css controls which section of the site?

Not sure if you aware but the same type of tool is available for IE8out of the box. Just hit the same "F12" key as you would in Firefox. You can also outline any of the items, such as tables, divs, etc. a bit handy if you're working with css and trying to build table-less more fluid layouts. It also has built in IE modes which is helpful to aid in layouts for the more predominant browsers out there (IE).

I'm using firebug too and i can tell that is very simple to understand and modify the css. Great tool.

i dont know how to use these codes :( where i should paste em?? please helo me..

for sure i will try it ,, thank you ^^

This is great for css work.
Any tips on an easy method for altering the html.

Hi,

1. set Zen up on your local pc if you haven't done it yet.
2. If not sure where to look you can do a search *.css and it will pull up every css file on your pc - look to see which one is the zencart one.
3. open that in a text editor of some sort and you will see the code.
4. BE SURE TO MAKE A COPY OF IT BEFORE YOU START FOOLING AROUND WITH IT!!!:P