/*
This is a comment line, made to give you guidence on how to edit the CSS file.  Do not worry about breaking it, you can always unzip it again and start over, no big deal.  Each section covers a different part of the equation here, to simplify it a little.
The first part will be the layout of the pages.
The second part will be the font sizes and colors.
The third part will be the bullets for the lists.
The fourth part will cover the specialized spans and divs.  
*/

/*
PART ONE notice that the widths are fixed and that the heights are almost all set to auto.  This allow people with different font sizes to not have overlapping text, ruining the layout, and probably losing sales.  If they can't read the page they probably can not read the report.
These should not need to be adjusted too much, if at all, but, you may want to.
*/

.theBod {
/* The body does not need dimensions */
background-color : #de0000;
}

.theTab {
/* this is the table's dimensions, referred to as dims from now on */
width : 790px;
height : auto;
background-color : #fff;
}

.theHeader {
/* this is the header's dims */
width : 100%;
/* this is 100% of the width of the table the part that the div is in, if there were no table it would be 100% of the screen with, not the browser window width */
height : 100px;
/* Notice I put a size in here, this is just my habit to make it as tall as the graphic */
background-image : url(header.png);
/* easy to add images I don't need the other background-image attributes, but I will add them so that you can see them. */
background-repeat : no-repeat;
/* if you leave this out the background will try to tile and repeat all over the screen, or area, that the background is in, except in a case like this, where the div size and the image are the same size. */ 
background-position : center center;
/* The first center is for vertical alignment and the second is side to side */
}

div.theGrabber {
/* this is the dims for your headline, notice that I used the div. method of classing this one.  This is to allow for the hover later in Part Four. */
width : 790px;
height : auto;
}

/* Notice that I have the content area divided up in to three sections, one for each paragraph, this is to make them stand out later in Part Four using the hover technique.  To eliminate the hover just remove the div before the dot */ 

div.theContentAreaA {
/* this is for your money area, there will be spans and divs later spicing up your page */
width : 790px;
height : auto;
}

div.theContentAreaB {
/* this is for your money area, there will be spans and divs later spicing up your page */
width : 790px;
height : auto;
}

div.theContentAreaC {
/* this is for your money area, there will be spans and divs later spicing up your page */
width : 790px;
height : auto;
}

div.listArea {
/* there is that div again. I am making this div a bit narrower than the others */
width : 700px;
height : auto;
}

.concludeThis {
/* time to wrap this puppy up */
width : 790px;
height : auto;
}

.theFooter {
/* this is the, yep, you guessed. A place to put another graphic if wanted ;) */
width : 790px;
height : 100px;
background-image : url(footer.png);
/* notice I am not adding the other items. */
}


/* PART TWO fonts, sizes and colors */

div.theGrabber {
/*  */
font-size : 30px;
color : red;
/* you can use color names or in hex as #?????? or #??? or rgb as rgb(?,?,?) I will show you all three, but I find hex a lot easier to use. */
text-align : center;
/* I did not align the text for the header in the page, so I did it here.  Had to show you someplace */ 
}

.theContentAreaA {
/* I no alignment needed here, unless you want to */
font-size : 24px;
color : #000;
/* see how much extra typing that would call for, YUCK */
}

.theContentAreaB {
/* I no alignment needed here, unless you want to */
font-size : 24px;
color : #000;
/* see how much extra typing that would call for, YUCK */
}

.theContentAreaC {
/* I no alignment needed here, unless you want to */
font-size : 24px;
color : #000;
/* see how much extra typing that would call for, YUCK */
}

div.listArea {
font-size : 28px;
/* I made the font a little bigger than the normal font as I want it to stand out */
color : #000;
/* so much easier.  */
}

.concludeThis {
/* time to wrap this puppy up */
font-size : 24px;
font-size : #000;
/* black is #000 or #000000 in hex and in rgb as rgb(0,0,0) */
}

.theFooter {
/* I want this to be here, but not really paid attention too, a sneaky way to have them, and you, agree to certain terms buy purchasing or signing up */
font-size : 12px;
color : #ff0;
/* the three letter/number combo for colors if for when you have the groupings the same, yellow is #ffff00 or, #ff0
I would not normally use the bright color, but, this allows you to see the text in the footer easier for this and gives you something to change */
}


/* PART THREE the bullets bullets have a lot of ways to be done, discs, dots, squares, images.....  That's it.  I have two types of bullets that I need for this */

.liBullet {
/* this is for the reasons to buy list */
list-style-image:url('red-glass.jpg');
}

.liBullet2 {
/* this is for the reasons to buy list */
list-style-image:url('059.gif');
}


/* PART FOUR the special stuff. Now, to make the hover spots notice the :hover */

/* Notice that I have the content area divided up in to three sections, one for each paragraph, this is to make them stand out later in Part Four using the hover technique.  To eliminate the hover just remove the div before the dot */ 

div.theGrabber:hover {
/* simple color change */
background-color : #f5f5f5;
/* no short hand for that */
}

div.theContentAreaA:hover {
/* An image, centered top to bottom and side to side */
background-image : url(bg_fff.png);
background-position : center center;
background-repeat : no-repeat;
}

div.theContentAreaB:hover {
/* Change both the color and add the image */
background-image : url(bg_fff.png);
background-position : center center;
background-repeat : no-repeat;
background-color : #f5f5f5;
}

div.theContentAreaC:hover {
/* repeating background image that starts centered */
background-image : url(bg_fff.png);
background-position : center center;
}

div.listArea:hover {
/* none centered repeating image */
background-image : url(bg_fff.png);
}

.clicker:link {
color : #00c;
font-size : 30px;
text-decoration : none;
}

.clicker:visited {
display : none;
}

.clicker:hover {
color : #00f;
}

.clicker:active {
color : #fff;
}