body {
		color: black;
		font-family: "Palatino Linotype", sans-serif; 
		font-size: 13pt;
		background-color:  #8f9593;
}

/*  this wrapper contains the header and the three columns and hides the overflow of the background  */
div#wrapper3columns {
	width: 1024px;
	overflow: hidden;
	margin: auto;
}

/* The header size is 900px wide by 200px high.  Padding was used to push the navigational buttons down and to the right.  Add the padding to the width and height to get 900x200.  */
div#header {
		padding-top: 130px;
		height: 70px; 			/* 130 plus 70 equals 200 px tall*/
		padding-left: 250px; /* careful!  this shifts the header off horizontal alignment ???Don't know why??? */
		width: 650px;				/* 250 plus 650 equals 900 px wide*/
		float: right;
		background-color: #8f9593;
		background-image: url('images/banner.jpg');
		background-repeat: no-repeat;
}

/* rollovers in header  */
#links {
		margin-left: 25px;
		width: 450px;
}

#links a {
	float: left;
	width: 150px;
	height: 30px;
	background-image: url(images/button.jpg);
}

#links a:hover { 
  	background-position: -150px 0px;
}

#links span {
		margin: 0px;
		padding: 0px 0px 0px 15px;
		font-size: 15px;
		font-weight: bold;
		cursor: pointer;
		color: #dee0d3;
		position:relative;
		top: 10%;
}

/* This layout utilizes three columns that each have a different height.  A hack was used to make the height of each column appear to be the same.  (most common hack for this would be the "faux columns" found at http://www.alistapart.com/articles/fauxcolumns/.)  I used a different hack found at http://www.ejeliot.com/blog/61.  This hack lowers the bottom-padding and then raises the bottom-margin equal amounts (except that I added 50px of padding to the bottom).  The wrapper then hides the overflow.  */

div#rightcolumn {
		width: 150px;
		padding-bottom: 2050px; /* lowers background */
		margin-bottom:-2000px;  /* raises background */
		float: right;
		background-color: #922523;
		color: #eaeaea;
}
 
div#content {
	width: 500px;
	padding-bottom: 2050px; /* lowers background */
	margin-bottom:-2000px;  /* raises background */
	float: right;
	background-color: #dee0d3;


}

/* background image and padding for the javascript pages main content div  */
.content_javascript {
	background-image: url(images/javascript_banner_background.jpg);
	background-repeat: no-repeat;
	background-position: top;
	padding-top: 105px;
}

div#navigation {
	float:right;
	font-weight: bold;
	background-color: #8f9593;
	line-height: 36pt;
	text-align: right;  /* aligns to the right */
	text-transform: capitalize;
}

/* pushes the vertical navigation links to the left*/
div#navigation a {
		padding-right: 30px;
}

/* creates the hover affect for the left, vertical navigation */
div#navigation a:hover {
		border-bottom: solid .3em #dee0d3;
		border-bottom-style: double;
}

div#footer {
	padding-top: 10px;
	width: 900px;
	float: right;
	background-color: #8f9593;
	font-size: 10pt;
}

p {
	padding: 0 1em;
	margin: 0 0 10px 0; 
}

h1, h2, h3, h4, h5, h6 {
	padding: 0 1em;
	margin: 0pt;
}

img {
		border: none;
		margin: 7px;
}

.centeredimage {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}


div.slide img {
		border: none;
		margin: 0px;
		display:block;
}


div#rightcolumn img {
		margin: 0px;  /* prevents the images from making the column wider  */
}

/* Link parameters */ 
a:link {text-decoration: none; color: #922523;}
a:visited {text-decoration: none; color: #5a2f43;}
a:hover {text-decoration: none; color: #FF8C00;}

a:link.right {text-decoration: none; color: #9bb29e;}
a:visited.right {text-decoration: none; color: #c8af8b;}
a:hover.right {text-decoration: none; color: #fae5c0;}
 
/* rollovers in webdesign page - id cannot be used twice on same page so use classes from now on  */
.links {
		width: 450px;
		margin-left: 25px;
}

.links a {
  	display: block;
		float: left;
		width: 150px;
  	height: 30px;
  	background: url("images/button.jpg");
}

.links a:hover { 
  	background-position: -150px 0px;
}

.links span {
		margin-left: 0px;
		padding: 0px 0px 0px 15px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
		color: #dee0d3;
}
.textbox {
	background-color: #FFFFFF;
	border: thin solid #666666;
	font-size: small;
}

.center {
	margin:auto;
}