/*This style sheet is for the HOMEPAGE ONLY.  You will use the interiorcss.css file for the other pages.===*/
/*===Template 40 color change is very simple but if you don't follow the directions it could get complicated really fast.  Read all of the instructions carefully and changing the colors on this template 
will be a piece of cake===*/
/*===Though most of the specific stylings are in this stylesheet and the interiorcss.css file you can find additional instructions on the index page.===*/
/*===Global Style===*/
#body {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	/*===In order to change the background image you must either delete this image or replace it with the new one you created===*/
	background-image: url('images/background.png');
	background-repeat: repeat;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
/*===Header Styles===*/
#headWrapper {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	height: 5px;
}
#mastHead {
	position: relative;
	margin: 0;
	padding: 0;
}
#mastHead #logo {
	position: absolute;
	top: 10px;
	left: 30px;
	margin: 0;
	padding: 0;
	border: 0;
}
#mastHead #con {
	position: absolute;
	top: 0px;
	left: 700px;
	margin: 0;
	padding: 0;
}
/*===This is where you can edit the content color and size within the yellowish box in the top right corner of this template===*/
#mastHead p {
	position: absolute;
	top: 20px;
	left: 730px;
	font: 18px Arial, Helvetica, Tahoma, sans-serif;
	color: #ffffff;
	margin: 0;
	padding: 0;
}
#mastHead ul {
	position: absolute;
	top: 125px;
	left: 775px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#mastHead li {
	display: inline;
	text-decoration: none;
	padding: 0;
	margin: 0;
}
/*===This is the where you can change the font color and size of the three links that are on top of the large red area===*/
#mastHead a {
	float: left;
	color: #ffffff;
	display: inline;
	text-transform: uppercase;
	font: 10px Arial, Helvetica, Tahoma, sans-serif;
	text-align: center;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	border-right: 1px solid #000;
}
#mastHead a:hover {
	color: #5e0e01;
}
/*===Be sure that the last link to the right has this id tag so that the right border does not appear next to it===*/
#mastHead .last {
	border-right: 0;
}
/*===Banner Styles===*/
#bannerWrapper {
	width: 1000px;
	margin: 140px auto;
	padding: 0;
	/*===This image includes everything that is not text or the call to action buttons.  It is one large image and should not be replaced by a color code.  You must do the color change
	of this portion in Photoshop===*/
	background-image: url('images/bannerback.png');
	background-repeat: no-repeat;
	width: 1000px;
	height: 333px;
}
#mastBanner {
	position: relative;
	margin: 0;
	padding: 0;
}
/*===This is where the large buying or selling a home banner text can be edited. NOTE: the words OR and A must be color changed within the HTML file.===*/
#mastBanner h1 {
	position: absolute;
	top: 85px;
	left: 80px;
	margin: 0;
	color: #826b19;
	font: 42px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0 20px 0 0;
}
/*===This is where you can edit the size and color of the paragraph under the buying or selling banner===*/
#mastBanner p {
	position: absolute;
	top: 165px;
	left: 80px;
	margin: 0;
	width: 440px;
	color: #ffffff;
	font: 14px Arial, Helvetica, Tahoma, sans-serif;
}
/*===You can change the color of the button text within this style sheet but the buttons themselves must be edited in Photoshop===*/
/*===Left Button===*/
#mastBanner .leftLink {
	position: absolute;
	top: 250px;
	left: 100px;
	display: block;
	color: #ffffff;
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	margin: 0;
	padding: 15px 0 0 40px;
	background-image: url('images/banner_button.png');
	background-repeat: no-repeat;
	width: 188px;
	height: 48px;
}
#mastBanner .leftLink:hover {
	color: #a79d8c;
}
#mastBanner .rightLink {
	position: absolute;
	top: 250px;
	left: 300px;
	display: block;
	color: #ffffff;
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	margin: 0;
	padding: 15px 0 0 35px;
	background-image: url('images/banner_button.png');
	background-repeat: no-repeat;
	width: 188px;
	height: 48px;
}
#mastBanner .rightLink:hover {
	color: #a79d8c;
}
/*===Content Area Styles===*/
/*===The index_wrapper is just a positioning and background-coloring (the faint tan color, NOT the grey) tool for the three content boxes that are on the homepage.  To fully change the 
color of this you must also edit the content footer as well.  See instructions below.===*/
#index_wrapper {
	width: 1000px;
	margin: -140px auto;
	padding: 0;
	background-color: #b9ad9b;
	height: 285px;
}
/*===These are styles that are you used globally by the three content areas on this page===*/
#main_content {
	position: relative;
	padding: 0;
	margin: 0;
}
#main_content a {
	color: #ffffff;
	font: 14px Arial, Helvetica, Tahoma, sans-serif;
}
#main_content a:hover {
	color: #a79d8c;
}
/*===If the content is too large for the smaller version of icon_back then replace it with either icon_back_medium.png or icon_back_larger.png to make room for the content.  NOTE if you do so 
you will most likely have to do some positioning corrections in addition to the image replacement.===*/
/*===Left Icon Style===*/
#leftIcon {
	position: absolute;
	top: 10px;
	left: 50px;
	width: 250px;
	/*===This image is the same for all three of the content areas and must be edited within photoshop to achieve a color change===*/
	background-image: url('images/icon_back.png');
	background-repeat: no-repeat;
	margin: 0;
	padding: 0 30px 0 0;
}
#leftIcon h2 {
	text-align: center;
	width: 250px;
	color: #ffffff;
	font: 24px Arial, Helvetica, Tahoma, sans-serif;
	padding-top: 5px;
	margin: 0;
}
#leftIcon p {
	text-align: left;
	width: 250px;
	color: #000000;
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0 5px 0 5px;
	margin: 0;
}
/*===All three content areas are layed out this way with the read more button, the read more button text, and then the image.===*/
#leftIcon #buy_btn {
	float: left;
	margin: 4px 0 0 150px;
	padding: 0;
}
/*===You may change the size and positioning of the read more button text here but the color and rollover state are changed within the Content Area Global Styles listed above===*/
#leftIcon #read_buy {
	float: left;
	clear: left;
	margin: -24px 0 0 73px;
	text-align: center;
	font: 14px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0;
}
/*===This is where you can edit the positioning of the keys within the left content area.  The image itself is to be replaced inside the HTML document.===*/
#keys {
	float: left;
	clear: left;
	margin: 3px 0 0 50px;
}
/*===Center Icon Styles===*/
#centerIcon {
	position: absolute;
	top: 10px;
	left: 370px;
	width: 250px;
	background-image: url('images/icon_back.png');
	background-repeat: no-repeat;
	margin: 0;
	padding: 0 30px 0 0;
}
#centerIcon h2 {
	text-align: center;
	width: 250px;
	color: #ffffff;
	font: 24px Arial, Helvetica, Tahoma, sans-serif;
	padding-top: 5px;
	margin: 0;
}
#centerIcon p {
	text-align: left;
	width: 250px;
	color: #000000;
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0 5px 0 5px;
	margin: 0;
}
#centerIcon #sell_btn {
	float: left;
	margin: 4px 0 0 155px;
	padding: 0;
}
#centerIcon #read_sell {
	float: left;
	margin: -24px 0 0 80px;
	text-align: center;
	font: 14px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0;
}
#sign {
	float: left;
	clear: left;
	margin: 27px 0 4px 18px;
	padding: 0 0 5px 0;
}
/*===Right Icon Styles===*/
#rightIcon {
	position: absolute;
	top: 10px;
	left: 685px;
	width: 250px;
	background-image: url('images/icon_back.png');
	background-repeat: no-repeat;
	margin: 0;
	padding: 0 30px 0 0;
}
#rightIcon h2 {
	text-align: center;
	width: 250px;
	color: #ffffff;
	font: 24px Arial, Helvetica, Tahoma, sans-serif;
	padding-top: 5px;
	margin: 0;
}
#rightIcon p {
	text-align: left;
	width: 250px;
	color: #000000;
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0 5px 0 5px;
	margin: 0;
}
#rightIcon #stop_btn {
	float: left;
	margin: 4px 0 0 155px;
	padding: 0;
}
#rightIcon #read_stop {
	float: left;
	margin: -24px 0 0 80px;
	text-align: center;
	font: 14px Arial, Helvetica, Tahoma, sans-serif;
	padding: 0;
}
#stop {
	float: left;
	clear: left;
	margin: -5px 0 0 86px;
}
#index_content_footer {
	position: absolute;
	top: 285px;
	left: 0;
	width: 1000px;
	height: 50px;
	margin: 0;
	/*===This index_content_footer is not the same as the content_footer on the interior pages, simply because the interior background is a much brighter tan than
	the homepages. They colors on both must be changed independantly in Photoshop===*/
	background-image: url('images/index_content_footer.png');
	background-repeat: no-repeat;
}
/*===Footer Styles===*/
#footerWrapper {
	width: 1000px;
	margin: 175px auto 0 auto;
	padding: 0;
	height: 65px;
	/*===This is where you can change the color on the middle part of the footer (the part that houses the links and the copyright paragraph).===*/
	background-color: #5e0e01;
}
#mastFooter {
	position: relative;
	margin: 0;
	padding: 0;
}
/*===This where you can change the size and color of the Copyright paragraph text.===*/
#mastFooter p {
	color: #a79d8c;
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	text-align: center;
}
#mastFooter UL {
	list-style-type: none;
}
#mastFooter LI {
	display: inline;
}
/*===This is where you can change the color and size of the footer links.===*/
#mastFooter a {
	font: 12px Arial, Helvetica, Tahoma, sans-serif;
	color: #a79d8c;
	border-right: 1px solid #a79d8c;
	margin: 0 0 0 5px;
	padding: 0 5px 0 0;
}
#mastFooter a:hover {
	color: #ffffff;
}
/*===Be sure that the last link in the list and the last link on a specific line (if your navigation stretches more than one line) has this class assigned to it to eliminate
the right border.===*/
#mastFooter .last {
	border-right: 0;
}
/*===This is where you can replace both the top and bottom rounded corners of the footer.  The color must be changed with Photoshop.===*/
#top_bar {
	position: absolute;
	top: -10px;
	left: 0px;
	background-image: url('images/footer_top.png');
	background-repeat: no-repeat;
	width: 1000px;
}
#bottom_bar {
	position: absolute;
	top: 65px;
	left: 0px;
	background-image: url('images/footer.png');
	background-repeat: no-repeat;
	width: 1000px;
}