#navigator {
margin: -5px 0 0 0; /*use this is to move the top navigation up on top of the page*/
width: 950px;
float: left;
border-top: 0;
border-left: 2px;
border-right: 2px;
border-bottom: 0;
border-style: solid;		
border-color: #2f2920;
}

.homebutton {
width: 110px;
text-align: center;
position: relative;
}

.homebutton a {
display: block;
width: 110px;
height: 40px;
background-image: url(../image-files/home-button.jpg);
background-repeat: no-repeat;
}

.homebutton a:hover {
background: url(../image-files/home-button.jpg) no-repeat 0px -40px;
}

.sellingbutton {
width: 120px;
text-align: center;
position: relative;
}

.sellingbutton a {
display: block;
width: 120px;
height: 40px;
background-image: url(../image-files/selling-button.jpg);
background-repeat: no-repeat;
}

.sellingbutton a:hover {
background: url(../image-files/selling-button.jpg) no-repeat 0px -40px;
}

.buyingbutton {
width: 120px;
text-align: center;
position: relative;
}

.buyingbutton a {
display: block;
width: 120px;
height: 40px;
background-image: url(../image-files/buying-button.jpg);
background-repeat: no-repeat;
}

.buyingbutton a:hover {
background: url(../image-files/buying-button.jpg) no-repeat 0px -40px;
}

.rentingbutton {
width: 120px;
text-align: center;
position: relative;
}

.rentingbutton a {
display: block;
width: 120px;
height: 40px;
background-image: url(../image-files/renting-button.jpg);
background-repeat: no-repeat;
}

.rentingbutton a:hover {
background: url(../image-files/renting-button.jpg) no-repeat 0px -40px;
}

.investingbutton {
width: 140px;
text-align: center;
position: relative;
}

.investingbutton a {
display: block;
width: 140px;
height: 40px;
background-image: url(../image-files/investing-button.jpg);
background-repeat: no-repeat;
}

.investingbutton a:hover {
background: url(../image-files/investing-button.jpg) no-repeat 0px -40px;
}

.mortgagebutton {
width: 140px;
text-align: center;
position: relative;
}

.mortgagebutton a {
display: block;
width: 140px;
height: 40px;
background-image: url(../image-files/mortgage-button.jpg);
background-repeat: no-repeat;
}

.mortgagebutton a:hover {
background: url(../image-files/mortgage-button.jpg) no-repeat 0px -40px;
}

.findagentbutton {
width: 200px;
text-align: center;
position: relative;
}

.findagentbutton a {
display: block;
width: 200px;
height: 40px;
background-image: url(../image-files/find-agent-button.jpg);
background-repeat: no-repeat;
}

.findagentbutton a:hover {
background: url(../image-files/find-agent-button.jpg) no-repeat 0px -40px;
}

/* (the logo class is currently just blank space, add an image if desired) */

#logo {	   		 /* (this creates some space if needed) */
width: 950px;
height: 15px;	
}

div.half-width-box-left { /* (this chops the content area in half to place inages or content to the left) */
    background-color: #fff;
	padding: 5px;
	border: 0;
	width: 45%;
	float: left;
	}

	
div.half-width-box-right { /* (this chops the content area in half to place inages or content to the right) */
    background-color: #fff;
	padding: 5px;
	border: 0;
	width: 45%;
	float: right;
	}

div.half-width-box-left-gray { /* (this chops the content area in half to place inages or content to the left) */
    background-color: #dbdbdb;
	
	padding: 5px;
	border: 0;
	width: 45%;
	float: left;
	}

	
div.half-width-box-right-gray { /* (this chops the content area in half to place inages or content to the right) */
    background-color: #dbdbdb;
	padding: 5px;
	border: 0;
	width: 45%;
	float: right;
	}	
	
.callout-box {	 /* (places a 1/3 sized box floating right with a colored background) */
background-color: #dbdbdb;
width: 33%;
margin: 10px 0px 10px 10px;
border: 0px solid #000;
padding: 4px;
color: black;
float: right;
font-style: italic;
font-size: 90%;
}

div.callout-box p {
margin: 10px;
}

p.callout-box {
padding: 10px;
}

div.callout-box h1,
div.callout-box h2,
div.callout-box h3,
div.callout-box h4,
div.callout-box h5,
div.callout-box h6 {
margin: 5px 0 5px 0;
text-align: center;
font-style: normal;
}
	
.solid {   		 /* (this is a 1px horizontal line) */
    border-top: 1px solid #000;
    border-bottom: hidden;
    border-left: hidden; 
    border-right: hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#controls {		  /* (the div that holds images for control buttons of the slideshow) */
	width:10%;
	height:0px; /*set to the height of your header*/
	margin: 15px 0 0 0; /*move the header up on top of butons*/
	background-color: transparent;
	position: relative;
	z-index: 3;
	}