body {
	background-color: #FFFFFF;
	background-image: url(images/page_background.jpg);
	background-repeat: repeat-y;
	background-position: 0px 0px;
	margin-top: 0px;
	margin-left: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}
p, li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	margin-top: 0px;
	margin-bottom: 8px;
	line-height: 120%;
}
h1 {
	font-size: 90%;
	font-weight: bold;
	color: #2A3746;
	margin-top: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
h2 {
	font-size: 85%;
	font-weight: bold;
	color: #E09F0A;
	margin-top: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.5em;
	padding-bottom: 0px;
}

/*these divs and their associated text styles are used either on the top page
only or throughout the site, they are commented such*/

#topbanner   { /*used on all pages*/
	width:105%;
	height:95px;
	z-index:1;
	background-image: url(images/top_banner_background.jpg);
	background-repeat: repeat;
	background-position: 0px 0px;
	overflow: hidden;
}

#TopPageTopnav   { /*used on top page only where we want an absolute 760px layout*/
	height: 85px;
	width: 203px;
	position: absolute;
	left: 543px;
	top: 7px;
	text-align: right;	
}
 
 

#navbar   {  /*used on top page only, slightly different on 2nd pages*/
	background-color: #FAD98C;
	background-image: url(images/top_nav_background.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 23px;
	width: 105%;
	padding-left: 150px;
	
}  

#topwrapper   { /*used on top page only, has to be an absolute depth and have the water ripple background*/
	background-color: #FFFFFF;
	width: 105%;
	height: 482px;
	background-image: url(images/top_content_background.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	
}

#bottominfo   {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	width: 500px;
	padding-left: 150px;
	padding-top: 8px;
	margin-bottom: 40px;
	padding-bottom: 40px;
}
#bottominfo a:link   {
	color: #FFFFFF;
	text-decoration: underline;
	
}
#bottominfo a:visited   {
	color: #FFFFFF;
	text-decoration: underline;
	
}
#toptext   {  /*used on top page only, holds the text*/
	width: 340px;
	position: absolute;
	left: 150px;
	top: 238px;
	
}
#toptext p   {
	color: #FFFFFF;
	
}
.TopTextTable { /*used on top page only, holds the text and picture about bruisedpixels*/
	font-size: 70%;
	color: #FFFFFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #949BA2;
	margin-top: 10px;
}

.TopTextTable a:link   {
	color: #FFFFFF;
	text-decoration: underline;
}

.TopTextTable a:visited   {
	color: #FFFFFF;
	text-decoration: underline;
}

#topFlashes   { /*used on top page only, holds the rotating flash files of examples*/
	position: absolute;
	left: 587px;
	top: 148px;
	
}

.borderImage { /*used on top page only, styles the bruisedpixel image example*/
	border: 1px solid 2A3746;
}
.topFlashImages { /*used on top page only, styles the flash images*/
	border: 1px solid #2A3746;
	margin-bottom: 20px;
}


/*these divs and their associated text styles are used on secondary pages*/

#Topnav   {
	height: 85px;
	width: 203px;
	text-align: right;
	float: right;
	padding-top: 7px;
	overflow: hidden; 
	padding-right: 40px;
	margin-right: 20px;
} 

#navbar2nd { /*on secondary pages the navbar has to accommodate the home button so it is slightly different*/

	background-color: #FAD98C;
	background-image: url(images/top_nav_background.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 23px;
	width: 105%;
}

#content   { /*this is a wrapper div that holds the sidebar and textarea divs on some 2nd pages*/
	width: 100%;
	background-color: #FFFFFF;
	
}

#sidebar   { /*styles the sidebar nav for secondary pages. Note that because we are doing a different
picture over here for each portfolio, you will also have to have an inline #sidebar on each page to define
the background image. See portfolio_template.html for example*/
	background-color: #FFFFFF;
	width: 150px;
	padding-top: 50px;
	float: left;
	height: 488px;
	
}
/* use these with light background photo */
#sidebar p   {
	color: #2A3746;
	margin-left: 10px;
	font-weight: bold;
	margin-bottom: 2em;
}

#sidebar a:link   {
	color: #2A3746;
	text-decoration: none;
	
}
#sidebar a:visited   {
	color: #2A3746;
	text-decoration: none;
	
}
#sidebar a:hover   {
	color: #5F6974;
	text-decoration: underline;
	
}
/* use these with dark background photo */
#sidebar p   {
	color: #FFFFFF;
	margin-left: 10px;
	font-weight: bold;
	margin-bottom: 2em;
}

#sidebar a:link   {
	color: #FFFFFF;
	text-decoration: none;
	
}
#sidebar a:visited   {
	color: #FFFFFF;
	text-decoration: none;
	
}
#sidebar a:hover   {
	color: #FFFFFF;
	text-decoration: underline;
	
}



#textarea { /*the holds the text on some 2nd pages and the thumbnails on portfolio pages*/
	padding-top: 50px;
	padding-left: 170px;
	padding-bottom: 20px;
	min-height: 448px;
}

.clearboth { /*you need this under the textarea div to make the sidebar and textarea even*/
	clear: both;
}

.portfolioTN { /*this styles the thumbnail images to space apart from each other and gives
them a border*/
	border: 1px solid #2A3746;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 0px;
}
.portfoliotopTN { /*this styles the thumbnail images to space apart from each other and gives
them a border*/
	border: 1px solid #2A3746;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 5px;
	margin-left: 0px;
}
.imageFloatRight { /*use to float images to the right in running text*/
	border: 1px solid #2A3746;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.imageFloatLeft { /*use to float images to the left in running text*/

	border: 1px solid #2A3746;
	float: left;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
}
#contentLarge { /*the Order page is different than other 2nd pages. It just has this one div in the
center to hold the text.*/
	width: 100%;
	background-color: #FFFFFF;
	padding-top: 30px;
	padding-left: 10px;
	margin-bottom: 20px;
}



/*styles for the large image pages, copied from the bruised pixels image_page.css and adjusted for brush of light */  
 
 
/* styles the scroll command that sits to the right of the large image */
.scrollcommand {
	width: 80px;
	font-style: italic;
	padding-left: 8px;
	margin-bottom: 30px;
	margin-top: 50px;
} 

/*pads the large image on the top and bottom*/
.largeImagePadding {
	margin-top: 8px;
	margin-bottom: 8px;
}

/*styles the font size for the table*/
td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
td p {
	font-size: 100%;
}
td h1 {
	font-size: 100%;
}

/* Reduce spacing caused by forms AJL 2005-07-20 */
form {
	margin: 0;
	padding: 0;
}

input {
	margin: 0;
	padding: 0;
}

/*styles the top cell with the main headers for the table*/
.headerCell {
	font-weight: bold;
	color: #FFFFFF;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	background-color: #878F97;
}
/*styles the cells with the sub-heads*/
.subheaderCell {
	background-color: #BFC3C7;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	padding-right: 0px;
	font-weight: bold;
}
/*styles all the information cells*/
.infoCell {
	background-color: #BFC3C7;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	padding-right: 3px;
	vertical-align: middle;
}
.notes {
	font-size: 90%;
	margin-top: 3px;
	width: 600px;
	font-weight: normal;
} 
.caption {
	width: 600px;
}
 
 
 
.scrollinstruction {
	font-style: italic;
	padding-top: 20px;
	clear: left;
	float: left;
}
.scrollarea {
	float: right;
	width: 90px;
	padding-left: 10px;
	vertical-align: top;
	display: inline;
}
.instructions {
	margin-bottom: 1.5em;
}
.breadcrumbs {
	font-size: 80%;
	font-weight: normal;
}