/* Shows background color is white and text is black, type face and size and margin is 10 pixels all sides. Look into
photoshop to find color numbers. White is all colors and black absence of colors. */
body              { background-color: #fff ;
                    color: #000 ;
                    font: .85em Verdana, Arial, Helvetica, sans-serif ;
                    margin: 10px ;
                    }

/* Table is always going to be 90 percent of the width of the screen. Padding is 10 pixels. That's the inner edge of the
cell to data (text). */
table            { width: 90% ;
                   padding: 10px ;
                   }

/* This is the left table data cell. It shows the background color, width of left table, allows text to flow around
them, use with images, extremely difficult to use, test it carefully before using;vertical -align is similar to 
how you align in a cell; padding is 10 pixels all the way around text */
td.left          { background-color: #fff ;
                    width: 60% ;
                    float: left ;
                    vertical-align: top ;
                    padding: 10px ;
                    }

/* Establishes that everything from this point will be aligned to the right hand side. This makes the border
l pixel wide and is double line and the color is red and padding is 10 pixels. */
div.right          { border: 1px groove #f33 ;
					 padding: 10px ;
                    }

/* This is the right table data cell. It shows the alignment, width and padding. */                    
td.right           { vertical-align: top ;
                     width: 25% ;
                     padding: 10px ;
                    }

/* This is the style for heading size 2. It includes its font style (normal, ital or oblique), font weight
which is in this case bold, size measurement is 1.25 which is larger than a standardized size letter. The type
is Georgia with a generic Times New Roman, and in mac if you put serif, it will default to serif. Always end
string in either serif or sans-serif. Letter spacing is 3 pixels. Front variant is normal or small caps. */
h2				  { font: italic bold 1.25em Georgia, "Times New Roman", serif ;
					color: #000 ;
					letter-spacing: 3px ;
					font-variant: small-caps ;
					}

/* See above*/
h3				  { font: bold 1em Georgia, "Times New Roman", serif ;
					color: #fff ;
					background-color: #000 ;
					letter-spacing: 1px ;
					font-variant: small-caps ;
					padding: 5px ;
					}
/* This is specific to the client page. Similar to h3 above. */
h3.clients		  { font: bold 1em Georgia, "Times New Roman", serif ;
					color: #000 ;
					background-color: #ddd ;
					letter-spacing: 1px ;
					font-variant: small-caps ;
					padding: 5px ;
					border: 1px solid #000 ;
					}

/* This is the guideline for any image. It will no border. */
img               { border: 0px ;
 					}

/* Anything with dot in front of it uses hairline boarder and centers the picture. */
img.intext		  { border: 1px solid #000 ;
                    text-align: center ;
					}

   .logo a:link     { border: 0px ;
                    background-color: #fff ;
                    }

   .logo a:visited  { border: 0px ;
                    background-color: #fff ;
                    }

   .logo a:hover    { border: 0px ;
                    background-color: #fff ;
                    }

   .logo a:active   { border: 0px ;
                    background-color: #fff ;
                    }

 /* The current page you are on in the link bar at the top. */                   
 .current		    { text-decoration: none ;
                    color:#000 ;
                    font-weight: bold ;
                    font-size: 1.25em ;
                    background-color: #fff ;
                    }

/* This is the standard paragraph font size. Could add in centered or whatever wanted. */                                       
p				  { font: .85em ;
					}

/* These are the sidebar quotes. */
p.quote			  { font: .85em ;
					font-style: italic ;
					}

/* This is the style for the type for the source of the quotes. */										
p.source 		  { color: #000 ;
					margin-left: 15px ;
					/*font-style: italic ;*/
					font-weight: bold ;
					line-height: 1.2em ;
					font-size: .75em ;
					margin-top: -1.5em ;
					}

/* Picture caption size, font, etc.  Margin top is -.5em to get it closer to the picture. */
p.caption 		  { color: #000 ;
					font-style: italic ;
					line-height: 1.2em ;
					font-size: .75em ;
					margin-top: -.5em ;
					width: 75% ;
					text-align: center ;
					}

/* Anything can use this as it moves things to be right aligned. */
 .more			  { text-align: right ;
					}

/* This is how you center a paragraph. */							                   
p.center          { text-align: center ;
					padding: 5px ;
                    width: 90% ;
                    border: 1px solid #f00 ;
                    background-color: #000 ;
                    color: #fff ;
					}

/* Centered paragraph, if there are links, this is the style. Every link has four states to it. They are:
link, visited, hover and active and you have to set them up in this sequence. You can see how these look
when you go to page properties. */
p.center a:link     { text-decoration: none ;
                    color: #fff ;
                    font-weight: bold ;
                    font-size: 1.25em ;
                    background-color: #000 ;
                    }
                    
p.center a:visited  { text-decoration: none ;
                    color: #fff ;
                    font-weight: bold ;
                    font-size: 1.25em ;
                    background-color: #000 ;
                    }

                    
p.center a:hover    { text-decoration: none ;
                    color:#000 ;
                    font-weight: bold ;
                    font-size: 1.25em ;
                    background-color: #fff ;
                    }

p.center a:active   { text-decoration: none ;
                    color:#fff ;
                    font-weight: bold ;
                    font-size: 1.25em ;
                    background-color: #000 ;
                    }

/* Bottom link paragraph styles. */
p.centerb         { text-align: center ;
				    }

/* List item for a list. Allows all kinds of flexibility in what you use as a bullet. Can use circle, disc, alpha, pictures.*/
li				  { font: .85em ;
					list-style-type: circle ;
					}

div.footer        { background-color: #000 ;
                    width: 90% ;
                    border: 1px solid #f00 ;
                    font: small-caps italic bold 90% Verdana, Arial, Helvetica, sans-serif ;
                    color: #fff ;
                    text-align: center ;
                    padding: 5px ;
                    }

/* These are the everything else links.They are pseudo links.If you don't set these up they are blue, purple, red active. */
:link             { text-decoration: none ;
                    color: #00f ;
                    font: bold 90% ;
                    background-color: #fff ;
                    }
                    
:visited          { text-decoration: none ;
                    color: #00f ;
                    font: bold 90% ;
                    background-color: #fff ;
                    }
                    
:hover            { text-decoration: underline ;
                    color:#00f ;
                    font: bold 90% ;
                    background-color: #fff ;
                    }

:active           { text-decoration: underline ;
                    color:#00f ;
                    font: bold 90% ;
                    background-color: #fff ;
                    }