/* Front Page fancy content */
#bodycontainer {
	width: 100%;
	background-color: #8B7F73;
	text-align: center;
}
#body {
	width: 862px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#flash {
	margin-left: 1px;
	margin-right: 1px;
	width: 860px;
	height: 238px;
}

/* define broad layout for each of the fixed-size cells */
.fourcolumns {
	width: 204px;
	height: 86px;
	padding: 5px;
	margin: 1px 1px 0px 0px;
	float: left;
	color: #ffffff;
	overflow: hidden;
}
/* define each background image (the only thing different between cells, 
   other than some tweaks to make the irregular spacings in this example work) */
.agriculture {
	background-image: url(../images/agricultural_tours2.jpg);
	margin-left: 1px;
}
.safari {
	background-image: url(../images/background_buffalo_dark.jpg);
}
.zambia {
	background-image: url(../images/background_sunset.jpg);
	padding-left: 6px;
}
.team {
	background-image: url(../images/background_skull.jpg);
}

/* Header text is hidden, and we set the background to a header graphic elsewhere
   this is done so humans see pretty, and search engines see <hx> tags */
.header {
	text-indent: -9000px;
	margin: 0;
	height: 25px;
	width: 200px;
	background-repeat: no-repeat;
	background-position: top left;
	position: absolute;
}
.agriculture .header {
	background-image: url(../images/agricultural_tours.gif);
}
.safari .header {
	background-image: url(../images/safaris.gif);
}
.zambia .header {
	background-image: url(../images/coming_to_zambia.gif);
}
.team .header {
	background-image: url(../images/meet_the_team.gif);
}
.content {
	margin-left: 3px;
	margin-top: 26px;
	position: absolute;
}


.twocolumns {
	width: 418px;
	padding: 5px;
	margin: 1px 1px 0px 0px;
	float: left;
	color: #999999;
	margin-bottom: 0;
}
.twocolumns p, .twocolumns div {
	margin-left: 10px;
}
.one {
	margin-left: 1px;
	background-position: bottom left;
	background-image: url(../images/africa_top.gif);
	background-repeat: no-repeat;
}
.two {
	width: 419px;
	border-left: 1px solid #999999;
}
.three {
	margin-top: 0;
	margin-left: 1px;
	width: 419px;
	height: 81px;
	overflow: hidden;
	background-image: url(../images/africa_middle.jpg);
}
.three .content {
	margin-left: 158px;
	width: 251px;
	color: #ffffff;
}
.three .header {
	margin-left: 155px;
	background-image: url(../images/agricultural_tours_bottom.gif);
	overflow: visible;
}
.three .more, .four .more {
	float: right;
	margin-top: 65px;
}
.three .more a { color: #ffffff; }
.four {
	margin-top: 0;
	width: 420px;
	height: 81px;
	overflow: hidden;
	background-image: url(../images/man_with_tiger.jpg);
}
.four .header {
	background-image: url(../images/we_care.gif);
}
.four .content {
	margin-left: 3px;
	margin-right: 150px;
	color: #333333;
	width: 400px;
}
.four .more a {
	margin-right: 150px;
	color: #333333;
}
/* in fourcolumns, 'more' must also line up horizontally, so we fix its position by floating */
.fourcolumns .more {
	float: right;
	margin-top: 70px;
}
.fourcolumns .more a { color: #ffffff; }