
<!--
/* there are two css files for the site, one for the landing page and one for the rest of the site. the landing page has a different header - which is split into three parts in order to give the illusion that "breaks the box - the top is loading in the body element, the side is loading in the left column element and the bottom is loading in the content element - there are still some troubles with the footer and the wrapcontent i had to do but it's pointless to do more until you see what the header is like since i'm sure you're going to want to redesign it so that it works better */


/* set the background of the window to medium gray and the margins to 0 */
body {
	margin: 0% 0% 0% 0%;
	background: #9F0 url(../images/headertop.gif) no-repeat;
	background-position: -2px 0;
		}
	
	
h2 {
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 28px;
	font-weight: bold;
	line-height: 26px;
	}
	

h3 { font-family: Arial, Helvetica, sans-serif;
	color: #909;
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	}

h4 { font-family: Arial, Helvetica, sans-serif;
	color: #C30;
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	}
	
h5 { font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 10 px;
	font-weight: normal;
	line-height: 11px;
	margin-bottom: 2em;
	}
	
h6 { font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 10px;
	font-weight: bold;
	line-height: 12px;
	margin-bottom: 2em;
	}

/* use to bold phrases <span class ="bold"> phrase </span> */
.bold {font-weight: bold;} 

/* use "subject" to make red highlights like the subjects on the letter page <span class ="subject"> phrase </span> */	

.subject {color: #C30;}

/* use "sub" to for serif sub heads <span class ="sub"> phrase </span> */			
.sub {font-family: News Gothic MT, Times, serif; font-size: 18px;}

/* define default text values in paragraphs color to dark gray*/

p {
	font: 14px Arial, Helvetica, sans-serif;
	line-height: 16px;
	font-weight: bold;
	}
	

	
/* this places a 1px gray line at the bottom of a paragraph as a seperator - use at the start of the paragraph - <p class = "divider"> information </p>*/

p.divider {
    	border: solid 1px #666; 
      	border-width: 0 0 1px 0;
		padding: 0 0 2em 0;
		margin: 0 0 1.5em 0;}
/* set image borders to zero */		
img {
	border: 0;
	}
	
/* use ul and li for anything that's a list (like the contact list) */
	
ul {font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
	margin: 0 0 1em 0;
	padding: 0; 
	}	
	
li	{font: bold 12px Arial, Helvetica, sans-serif;
	 color: #666; 
	 list-style-type: none;	
	}

		
/* these define how links look that aren't in the menu - hover sets the color when a mouse is over the link */
a:link, a:visited, a:active {text-decoration: none;}
a:link {color: #C30; }
a:hover {color: #FF0; }

/* this defines the header and links to the image */

#header {
	margin: 0 0 0 0;
	height:	255px;
	font: bold 30px News Gothic MT, Times, serif;
	color: #C03;
	text-align: right;
	vertical-align: bottom;
	}

/* this defines the left column menu */

#leftcol {
	position: absolute;
	left: 0%;
	margin: 0%;
	padding: 0px;
	width: 140px;
	font: bold 18px Arial, Helvetica, sans-serif;
	color: red;
	background: #909 url(../images/headerBleft.gif) no-repeat;
	background-position: top right;
	}	
	
/* and this defines anything that a link in the left column menu */

#leftcol a {
	display: block; 
	border: 1px solid #606;
	border-width: .5px 1px .5px 1px;
	padding: 2px 0px 2px 10px;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #F9F;
	}
	
/* hide from IEmac \*/
* html #leftcol a {width: 100%;}
/* end hide */



/* and this defines what happens when the mouse is over the menu items */
#leftcol a:hover {background-color: #F9F; color: #FF0;}

/* these rules define the appearence of the center content and change the behavior of some of the header defaults when the are used in the content div */

#contentwrap {
	margin: 0%;
	background: #E0E0E0;
		} 

#content {
	margin: 0% 10% 0% 120px;
	padding: 12% 2% 2% 5%;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #666;
	line-height: 12px;
	text-align: right;
	background: #E0E0E0 url(../images/headerBright.gif) no-repeat;
	background-position: 0px 0;
		}
	
#content h1	{
	margin: 0px;
	font-family: News Gothic MT, Times, serif;
	color: #909;
	font-size: 30px;
	font-weight: normal;
	margin-top: .4em;
	margin-bottom: .2em;
	line-height: 28px;
	}

#content h4 {margin: 0; font-weight: bold;}
#content h5 {margin: 0; font-weight: bold;}
#content a {font-weight: bold;}


/* stying the table  - old css 

table#latestwork {
	width: 100%;
	}
	
tr#ill td {
	padding: 2em 0 0 1em;
	width: 30%;
	vertical-align: bottom;
			}

tr#caption td {
	padding: 0em 0 2em 1em;
	width: 30%;
	text-align: left;
	vertical-align: top;
		}	
*/

/* stying the table  - new css 7.5 */

table#latestwork {
	width: 75%;
	}
	
table#latestwork td {
				padding: 2em 0 0em 2em;
				width: 30%;
				vertical-align: center;
				horizontal-align: center;
				}

table#latestwork H4 {	
				text-align: center;
				padding: .5em;
				}



/* defines the appearence of the footer */
		
#footer {
	clear: both;
	margin: 0;
	padding: 2em;
	text-align: left;
	border: 1px solid #FF0;
	color: #FF0;
	background: #909 url(../images/banana_sm.GIF) no-repeat scroll;
	background-position: right;
	font: bold 12px Arial, Helvetica, sans-serif;
}
	
	
	
/*CSS that applies to the validation markers*/

#validation {position: relative;
	text-align: center;
	margin: 15% 0% 1% 0%;
	}
	
#validation img {border: 0;}





-->
		
