/*
		You can choose whether to use or delete
		this first declaration.
		It sets a 0 margin & padding on the most
		regularly used tags. You can then customise
		each individual tag (or group of tags) to
		provide the spacing required.
		It seems to be better to use padding for
		consistency as different browsers use 
		different rules for collapsing margins.
*/
body, form,
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 0;
        padding: 0;
}

/*** STRUCTURAL ****************************/

#frame {
	text-align: left;
	width: 925px;
	background-color: #FFFFFF;
}

#home_left	{
	width: 428px;
	background-color: #FFFFFF;
	float: left;
}

#home_right	{
	width: 497px;
	float: right;
	background-image: url(../images/home/bottom_filigree.gif);
	background-color: #E5E4DD;
	background-position: bottom left;
	background-repeat: no-repeat;
}

#left_col	{
	width: 469px;
	background-color: #FFFFFF;
	float: left;
}

#right_col	{
	width: 456px;
	float: right;
}

.bottom_filigree	{
	background: url(../images/filigree_bg_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #e5e4dd;
}

.suites_filigree	{
	background: url(../images/suites/filigree_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #E5E4DD;
}

.chalets_filigree	{
	background: url(../images/chalets/filigree_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #E5E4DD;
}

.olive_production_filigree	{
	background: url(../images/olive_production/filigree_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #E5E4DD;
}

.tripadv_filigree	{
	background-image: url(../images/tripadvisor/filigree_bottom.gif); 
	background-repeat: no-repeat; 
	background-position: bottom left;
}

.clr {
	clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;
}

#toggleButton	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	color: #B68540;
	background-color: #E5E4DD;
	font-weight: bold;
	border: 0;
	padding: 0;
	cursor: pointer;
	width: 130px;
}

.toggle_button_hover	{

	color: #B68540 !important;
	text-decoration: underline;
}




/*** ELEMENTS ****************************/

h2	{
	font-size: 22px;
	color: #52554E;
	font-weight: normal;
	font-family: "Times New Roman", Times, serif;
}

h3	{
	font-family: "Times New Roman", Times, serif;
	font-size: 19px; 
	color: #80756b;
	font-weight: normal;
}

p	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #484747;
	padding-left: 35px;
	padding-bottom: 10px;
	margin: 0;
}


.bull li	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type: none;
	padding-left: 35px;
	line-height: 17px;
}

.rates_par	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #484747;
	padding-bottom: 10px;
	margin: 0;
}


.contact_par	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #484747;
	padding: 0;
	padding-bottom: 10px;
	margin: 0;
}

.contact_par2	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #484747;
	padding: 0;
	margin: 0;
}

.large_pic	{
	border: solid #c6d2b0 2px;
}

.sml_pic	{
	border: solid #c6d2b0 1px;
	margin-right: 1px;
}

#photos img {
  position: absolute;
	margin-left: 19px;
	margin-right: 19px;
}

#photos {
  width: 390px;
  height: 292px;
}

.item {
    width:115px;
    height:202px;  
   
     
    /* required to hide the image after resized */
    overflow:hidden;
     
    /* for child absolute position */
    position:relative;
     
    /* display div in line */
    float:left;
}
 
.item .caption {
    width:115px;
    height:202px;
    background:#000;
    color: #A3A19F;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
         
    /* fix it at the bottom */
    position:absolute;
    left:0;
 
    /* hide it by default */
    display:none;
 
    /* opacity setting */
    filter:alpha(opacity=80);    /* ie  */
    -moz-opacity:0.8;    /* old mozilla browser like netscape  */
    -khtml-opacity: 0.8;    /* for really really old safari */ 
    opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */
 
}
 
.item .caption a {
    text-decoration:none;
    color:#0cc7dd;
    font-size:12px;
     
    /* add spacing and make the whole row clickable*/
    padding:5px;
    display:block;
}
 
.item .caption p {
    padding:5px;   
    margin:0;
    font-size:12px;
}
 
.product {
    border:0;
     
    /* allow javascript moves the img position*/
    position:absolute;
}
 
.clear {
    clear:both;
}





/*  Drop Down Menu  ****************************/

#container {
  position: relative;
}

#menu {
  position: absolute;
  top: 0;
  right: 17;
  background: url(../images/nav_bg.gif);
  height: 40px;
}

#menu, #menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu li {
  float: left;
  background: ;
  margin-right: 3px;
  margin-top: 5px;
  vertical-align: middle; 
}

#menu .sub {
	margin: 0;
	border-bottom: solid #5E885D 4px;
}

#menu .sub a	{
	font-size: 13px;
	color:#ffffff;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: normal;
	width: 130px;
}
#menu .sub a:hover	{
	font-size: 13px;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: normal;
	width: 130px;
}

#menu a {
  display: block;
  padding: 5px;
  padding-left: 10px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

#menu a:hover {
  display: block;
  padding: 5px;
  padding-left: 10px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #000000;
  text-decoration: none;
}

#menu li ul {
  position: absolute;
  background-color: #86A176;
  width: 130px;
  text-align: left;
}

#menu li:hover ul, #menu li ul:hover {
  left:auto;
}



/***** LINKS ******************************/

.enter_site	{
	font-family: "Times New Roman", Times, serif;
	font-size: 23px;
	color: #8c7e71;
	text-decoration: underline;
}

.enter_site:hover	{
	font-family: "Times New Roman", Times, serif;
	font-size: 23px;
	color: #8c7e71;
	text-decoration: none;
}

.karoo_property	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #004B1C;
	font-weight: bold;
	text-decoration: none;
}

.karoo_property:hover	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #004B1C;
	font-weight: bold;
	text-decoration: underline;
}

.site_link	{
	font-weight: bold;
	color: #484747;
	text-decoration: none;
}

.site_link:hover	{
	font-weight: bold;
	color: #484747;
	text-decoration: underline;
}

.activities_link	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #671b0c;
	padding-left: 57px;
	text-decoration: none;
}

.activities_link:hover	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #E65106;
	padding-left: 57px;
	text-decoration: underline;
}

.contact_link	{
	color: #B68540;
	text-decoration: none;
}

.contact_link:hover	{
	color: #B68540;
	text-decoration: underline;
}

a.restaurant_tag  {
	background: transparent url('../images/catering/restaurant_tag.gif') no-repeat;
	background-position: 0px 0px;
	height: 93px;
	width: 369px;
	display: block;
}

a.restaurant_tag:hover {
	background-position: 0px -93px;
}

a.check_availability  {
	background: transparent url('../images/contact/check_availability.gif') no-repeat;
	background-position: 0px 0px;
	height: 66px;
	width: 398px;
	display: block;
}

a.check_availability:hover {
	background-position: 0px -66px;
}

a.nightsbridge	{
	background: transparent url('../images/book_online/nightsbridge_button.gif') no-repeat;
	background-position: 0px 0px;
	height: 135px;
	width: 350px;
	display: block;
}

a.nightsbridge:hover	{
	background-position: 0px -135px;
}

/****** Contact & Form ******/

#contact_page {
	text-align: center;
}
.contact_message {
	color: #c00; 
	font-size: 24px; 
	font-weight: bold; 
	margin: 15px 0;
}
.form wrapper {
	text-align: center;
	width: 400px;
}
.form_inputs {
	color: #52554E;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	margin: 12px 0;
	text-align: right;
	width: 340px;
}
.form_inputs span {
	color: #C00;
	font-size: 16px;
}
.form_inputs input {
	border: solid #434300 1px;
	color: #313100;
	font-size: 13px;
	height: 20px;
}
.form_enquiry {
	color: #6C6D01;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 12px;
}
.form_enquiry textarea {
	border: solid #434300 1px;
	color: #313100;
	font-family: verdana, sans-serif;
	font-size: 13px;
}
.textfield {
	color: #6C6D01;
}
.form_text {
	color: #dd5500;	font-size: 11px; font-weight: normal ; font-size: 12px;
	font-family: Verdana, sans-serif;	padding-top: 8px; padding-bottom: 8px;
}
.form_captcha {
	border: solid #C8D4B3 1px;
}
.form_security {
	font-size: 13px; 
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	margin: 15px 45px; 
	color: #ad6806; 
	text-align: left;
	width: 340px;
}
.button {
	font-family: Arial, sans-serif; background-color: #B68540; font-weight: bold;
	font-size: 12px; color: #ffffff; cursor: pointer; border: 1px solid #ffffff;	
}


/* WebWorX */
#wwx { 
	clear: both;
	color: #aaa; 
	font-family: verdana, san-serif; 
	font-size: 0.7em;
	padding: 1.2em 0 0.7em 0;
	text-align: center;
}
#wwx_site { 
	border: solid #007700 1px; 
	background-color: #ffffff;
	padding: 0 0.3em 0.2em 0.3em;
}
#wwx_link { 
	color: #007700;
	font-family: verdana, arial, sans-serif; 
	font-size: 0.9em; 
	font-weight: bold; 
	text-decoration: none;
}
#wwx_link:hover {  
	color: #ff7700;
	font-family: verdana, arial, sans-serif; 
	font-weight: bold; 
	text-decoration: none;
}
#wwx_link span {
	color: #FF7700;
}
#wwx_link:hover span { 
	color: #007700;
}