/*-------------------------------------------------

		- GLOBAL -						

-------------------------------------------------*/

body { 

	font-family: tahoma, arial, sans-serif; 

	font-size: 75%; font-weight : normal; color: #333; 

	background: #62655e url('../images/back_01.jpg'); 

	letter-spacing : 0; line-height: 1.4em;

	margin: 0; padding: 0;

	}

		

#container { 

	width: 775px; 

	position: relative; 

	margin: 0 auto; 

	text-align: left; 

	background: #fff url('../images/back_container.gif') repeat-y; 

	}

	

a { text-decoration: underline; color: #669900;}

a:hover { text-decoration: none;}



a.up {

		padding: 5px 0 10px 40px;

		background: url('../images/action_up.jpg') no-repeat;

		vertical-align: middle;

	}

a.pdf {

		padding: 10px 0 10px 40px;

		background: url("../images/pdf.gif") no-repeat left;

		vertical-align: middle;

	}

a.gallery {

		margin: 0 0 0 10px;

		padding: 10px 0 10px 35px;

		background: url("../images/gallery.gif") no-repeat left;

		vertical-align: middle;

	}



.ghost { display : none; }

.center { text-align : center; }



p { margin: 0; padding: 8px;}

ul { margin: 0 20px; padding: 8px; }



span { color: #336600;}



div.hr {

	width: 90%; height: 5px;

	line-height: 0;

	background: #eaeaea url('../images/hr.gif') no-repeat right;

	margin: 15px auto 20px auto; padding: 0;

}





/*-------------------------------------------------

		- IMAGES -					

-------------------------------------------------*/



a img.raam { 

	color: #333;

	background: #f9f9f9;

	padding: 5px; margin: 8px 6px;

	border: 1px solid #ccc; 

	}

a:hover img.raam {

	background: #ccc;

}



img.skoon { border: 0; }





div.gallery {

	padding: 8px 0 20px 8px;

}

	div.gallery img {

		border: 3px solid #669900;

		margin: 8px 7px 0 0; padding: 0;

	}



/*-------------------------------------------------

		- HEADERS -					

-------------------------------------------------*/

div#top_big { background: url('../images/back_top01.gif') repeat-x 0 49px; }

div#top_small { background: url('../images/back_top02.gif') repeat-x; }



#header_01 { 

	clear: both;

	background: #fff url('../images/header_top.gif') no-repeat;

	height: 50px; color: #fff;

	font-size: 90%;

	}	

	#header_01 p {

			padding: 15px 0 0 62px;

	}

	#header_01 p a {

		text-decoration: none;

	}

	#header_01 p a:hover {

		text-decoration: underline;

	}

	

#header_02 { 

	clear: both; background: #eee url('../images/header_2_back.gif') repeat-x; 

	height: 174px; color: #fff;

	}

	#header_02 #h2_left { 

		float: left;

		background: #eee url('../images/header_left.jpg') no-repeat;

		width: 363px; height: 174px;

		color: #fff;

	}

	#header_02 #h2_right { 

		float: right;

		background: #eee url('../images/header_right.gif') no-repeat;

		width: 407px; height: 174px;

		color: #fff;

	}

	

#header_bottom { 

	clear: both;

	color: #333;

	}

#top_big div#header_bottom {

	background: #eee url('../images/header_bottom01.gif') no-repeat; height: 83px;

	}

#top_small div#header_bottom {

	background: #eee url('../images/header_bottom02.gif') no-repeat; height: 19px;

	}

	

	#header_bottom table#head_table {

		width: 100%;

		border-collapse: collapse;

		border: 0;

		font-size: 80%;

	}

	

	#header_bottom table#head_table td { vertical-align: top; }

	#header_bottom table#head_table td p { padding-top: 2px; }

	

	#header_bottom table#head_table td.left { width: 180px; }

	#header_bottom table#head_table td.middle { width: 255px; }

	#header_bottom table#head_table td.right {  }

	#header_bottom table#head_table td.right p { padding-left: 23px; padding-right: 25px;}



/*-------------------------------------------------

			- LEFT -				

-------------------------------------------------*/



#left { 

	float: left; clear: left; 

	width: 205px;

	color: #fff;

	margin: 10px 0 0 0; padding: 0 0 0 20px;

	}

	#left h2 {

	  height: 30px;

	  border-bottom: 1px dashed #eee;

	  margin: 0 15px 0 10px; padding: 0;

	}

	#left h2 em { display: none; }

	#left h2.main_menu { background: #303030 url('../images/side_mainmenu.gif') no-repeat; }

	#left h2.news { background: #303030 url('../images/side_news.gif') no-repeat; }

	#left h2.fernkloof_menu { background: #303030 url('../images/side_fernkloof.gif') no-repeat; }

	

	div.menu ul {

		margin: 0 8px 0 8px; padding: 0;

		list-style: none;

		font-size: 1.0em;

		}



	div.menu ul li a {

		display: block;

		text-transform: uppercase;

		font-weight: normal;

		letter-spacing: 0.1em;

		text-decoration: none; color: #ccc;

		background: url('../images/bal_org.gif') no-repeat 6px 10px;

		padding: 8px 0 7px 30px; margin: 0;

		border-bottom: 1px dashed #666;

		height: 16px;

		}

		

		div.menu ul li a.on {

			background: #3e3e3e url('../images/bal_hover.gif') no-repeat 6px 10px; 

			color: #99cc00;

		}

		

	div.menu ul li a:hover { 

		display: block;

		background: #3e3e3e url('../images/bal_hover.gif') no-repeat 6px 10px; 

		color: #99cc00;

		} /* Hover Styles */

        

    

    div.newsitem {

      margin: 20px 10px 20px 10px; padding: 0;

    }

    div.newsitem p {

      padding: 0; margin: 0;

	font-size: 90%;

    }

    div.newsitem h4 {

      padding: 0 0 5px 0; margin: 0;

      color: #99cc00;

	font-size: 110%;

    }

    



/*-------------------------------------------------

			- MAIN -				

-------------------------------------------------*/



#main {

	margin: 0 20px 20px 245px;

	line-height: 1.6em;

	}

#main_content { margin: 0; padding: 0; }







#main p.more a {

	height: 13px; width: 53px;

	background: #fff url('../images/more.jpg') no-repeat;

	display: block;

}

#main p.more a:hover { background-image: url('../images/more_hover.jpg'); }

#main p.more a span { display: none; }





#main h2 {

	height: 25px;

	background-color: #fff;

	background-repeat: no-repeat;

	padding: 0; margin: 15px 0 0 7px;

	}	

	#main h2 em { display: none; }

	

	#main h2.welcome { background-image: url('../images/head/head_welcome.gif') }

	#main h2.investment { background-image: url('../images/head/head_investment.gif') }

	#main h2.development { background-image: url('../images/head/head_dev.gif') }

	#main h2.legal { background-image: url('../images/head/head_legal.gif') }

	#main h2.area { background-image: url('../images/head/head_area.gif') }

		#main h2.hermanus { background-image: url('../images/head/head_hermanus.gif') }

		#main h2.hgc { background-image: url('../images/head/head_hgc.gif') }

		#main h2.fernkloof { background-image: url('../images/head/head_fernkloof.gif') }

	#main h2.gallery { background-image: url('../images/head/head_gallery.gif') }

	#main h2.contact { background-image: url('../images/head/head_contact.gif') }

	#main h2.news { background-image: url('../images/head/head_news.gif') }



#main h3 {

	padding: 15px 0 0 8px; margin: 0;

	font-size: 120%;

}



#main div#map {

	margin: 8px 0 8px 8px;

	background : url('../images/maps/development.jpg') no-repeat;

	border: 1px solid #666;

	width: 480px; height: 332px;

}

	#main div#map #premap a {

		position: relative;

		text-decoration: none;

		display: block;		

	}

	

	#main div#map #premap a i { display: none; }

	

	a#pre1 { top: 180px; left: 5px; height: 30px; width: 20px;}

	a#pre2 { top : 185px; left: 18px; height: 25px; width: 45px;}

	a#pre5 { top : 126px; left: 240px; height: 70px; width: 55px;}

	a#pre6 { top : -12px; left: 260px; height: 65px; width: 75px; }

	a#pre7 { top : -120px; left: 220px; height: 55px; width: 65px; }

	a#pre8 { top : -240px; left: 360px; width: 100px; height: 80px; }



	

#main div.left_pad {

	margin-left: 20px;

}

#main div.left_pad h2 {

	margin-top: -2px;

}



	

#main ul.precinctmenu {

	list-style-type: none;

	margin: 10px auto; padding: 0;

	font-size: 1em;

	width: 400px	

}

	

#main ul.precinctmenu li { margin: 10px 0 0 0;}

#main ul.precinctmenu li a {

		display: block;

		background: #eee;

		padding: 5px 20px; 

		text-align: right;

		text-decoration: none;

		text-transform: uppercase;

		line-height: 1.4em;

		border: 2px solid #ccc;

		color: #333;

	}

#main ul.precinctmenu li a:hover {

		background: #d5e2ad;

		text-decoration: none;

	}

	

	#main table#property {

		width: 95%;

		border-collapse: collapse;

		background: #fff; color: #333;

		margin: 10px auto;

	}

	

		#main table#property th, #main table#property td {

			border: 1px solid #ccc;

			padding: 0 5px;

		}

		#main table#property th {

			font-weight: bold;

			background: #eee;

		}

		

		#main table tr#highlight{ 

			background-color: #B8CDDC;

			cursor: pointer;

		}

		

  table.hi {

	border: 1px solid #eaeaea;

	border-collapse: collapse;

  }

  th.hi, td.hi {

	padding: 6px;

	border: 1px solid #eaeaea;

  }

  th.hi {

	background-color: #eaeaea;

	color: #666666;

	font-family: "Trebuchet MS", Tahoma, sans-serif;

	font-size: .9em;

  }

  tr.hi {

	background-color: white;

  }

  tr.highlight{ 

	background-color: #D8DEE7;

	cursor: pointer;

  }

  

  table#precinct {

	border: 0;

	width: 98%;

	border-collapse: collapse;

  }

  table#precinct td {

	vertical-align: top;

  }

  table#precinct td a img {

	margin: 0 0 8px 0;

	border: 2px solid #669900;

  }

  

  table#details {

	border: 0;

	width: 98%;

	border-collapse: collapse;

	color: #333;

  }

	table#details td {

		padding: 2px 5px;

		text-align: left;

	}

	table#details td.lefttd {

		text-align: right;

		font-weight: bold;

	}

	

#main ul#pdf {

	list-style-type: none;

	padding: 0; margin: 10px 0 0 10px;

}

	#main ul#pdf li a {

		padding: 12px 5px 12px 45px;

		background: url("../images/pdf.gif") no-repeat 5px 5px;

		margin: 5px auto;

		border: 1px solid #ccc;

		text-decoration: none;

		display: block;

		color: #333;

		width: 390px;

	}

	#main ul#pdf li a:hover {

		text-decoration: underline;

		background: #eee url("../images/pdf_over.gif") no-repeat 5px 5px;

	}



/*-------------------------------------------------

			- FOOTER -					

-------------------------------------------------*/



#footer {

  clear: both; height: 82px;

  color: #333;

  background: #fff url('../images/footer.jpg') no-repeat;

}

#footer img {

 border:0;

}
	

#footer p { 

	position: relative; top: 30px;

	color: #ffff66;

	line-height: 2em;

	text-align: right; 

	margin: 0 20px 0 0; padding: 0; 

	font-size : 0.9em; 

	}

#footer a {

	color: #ffff66;

  }

  

#footer p.menu a { text-decoration: none; padding: 0 5px;}

#footer p.menu a:hover { text-decoration: underline; }

  

/*-------------------------------------------------

			- PRELOAD -					

-------------------------------------------------*/



div#preload {

	position: absolute;

	top: -1000px; left: -1000px;

}



div#preload p.more_over {

	background-image: url('../images/more_hover.jpg');

}