@charset "UTF-8";
/* CSS Document */

/* Timber Tech = - development CSS */

/* http://thinkingspaceweb.co.za */


* { 			margin:0;padding:0;border:0px none;}
ul, ol, li { 	list-style-type:none; }
a { 			text-decoration:none; }
a:hover {		text-decoration:none;}


/*

#321405 - darkest wood
#fdf1d4 - yellow in logo

*/



/* Mods March 2025 ( 13 years after this site was built - crikey) 

 - Removing the old PHP contact form
 - Note - Also remove/modify the PHP Mailer - percivaliweb.php */

span.contact-mail-phone{
    font-size: 160%!important;
    color:#fdf1d4!important;
    padding: 0 0 4% 4%!important;
    
}

/* End March 2025 Mods */



.square_c2a a p,.sidebar_square_c2a a p{padding:5px;}

.testimonialer{											 text-align:right; font-style:italic;}


body{ 



	background-image: url(../images/bg1.jpg); 
	background-repeat:repeat-x;
	
	 
	background-color: #000;
	margin: 5px 0 0 0;  /* to match bg1 if used */
	color:#cccccc; 
	font:15px 'Varela', Arial, Helvetica, sans-serif; line-height:25px;}
	
/* layout */

#wrapper{width:975px; margin:0px auto 0px auto;  /*top margin ( 20px) if thats your thing*/}

/*  rounded corners,   */
/*-moz-border-radius:14px;
-khtml-border-radius:14px;
-webkit-border-radius:14px;
*/


#content,#header,#footer{width:975px; float:left;}

#content  {	/*border: 1px solid green;*/}

#header {	/*border: 1px solid blue;*/}

#footer { 	/*border:1px solid cyan;*/} 
	
	

#logo,#strapline,#phone{float:left;}
#logo,#phone{width:325px;padding:10px;background:#930; line-height:0px;}

p.strap_left{text-align:left;padding: 10px  0 0 10px ;}
p.strap_right{text-align:right;padding: 6px 10px 0 0 ;}


#strapline{width:263px; font-family:'Varela', Arial, Helvetica, sans-serif;font-size:12px;color:#fdf1d4;/*border:solid 1px green;*/}

.four-column-full,.two-column-main-rh-bar{float:left; padding:5px 20px 25px 20px;}
	
	/* products.php */
	
	#show_hide_wrapper{width:670px;float:left; padding:10px; margin:-20px 0 0 -10px; /* corrects content indent *//*border:solid 1px white;*/}
	
	#proj_1,#proj_2,#proj_3,#proj_4,#proj_5,#proj_6{position:relative;}

#proj_1{top:	8px;}
#proj_2{top:	-545px;}
#proj_3{top:	-1095px;}
#proj_4{top:	-1645px;}
#proj_5{top:	-2195px;}
#proj_6{top:	0px;}

#proj_intro h1 { margin: 10px 0 0 0 ;}

 	/* products php - rh sidebar nav */

ul.projects_nav li{ 			margin: 0 0 30px 0;}

.two-column-side-rh-bar h1 {	/*color:red;*/ margin:-20px 0 20px 0;}


 	/* products php - galleries */
	
	
	.gallery_instructions{margin:240px 20px 0 0; width:200px;float:right;font-size:80%; text-align:right;}
 
.sleeper_stay_wrap 		{			width:658px; float:left;

padding:10px 0px 10px 0px;

									margin:25px 15px 25px 0px; 
									background:/*#fdf1d4*/ /*#5c3312 - no */ #fff!important;
									border: solid 1px #222;} /* pip */


.sleeper_stay_wrap ul{				padding:0px!important;}

.sleeper_stay_wrap ul li{			width:297px;display:inline; list-style:none;  float:left; 

margin:10px 0 0 20px;



}
	/* thumbnail image widths */

.sleeper_stay_wrap ul li img{ 		border:solid 1px #111;}

	



/* SQUARE c2As */

a.square_c2a{				width:227px; height:225px;}
a.sidebar_square_c2a{		width:231px; height:225px;}

a.square_c2a,a.sidebar_square_c2a{float: left; margin:5px; text-align:center; /*border: solid 1px blue;*/ 
background-image: url(../images/bg_sq.jpg);
/*background:#555; 
background:-moz-linear-gradient(100% 100% 90deg, #222, #555); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#222));
*/-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
box-shadow:0px 1px 3px rgba(0,0,0,0.5); 


}

a.square_c2a:hover,a.sidebar_square_c2a:hover{

background-image: url(../images/bg_sq_ro.jpg);
/*background: #777;

background:-moz-linear-gradient(100% 100% 90deg, #444, #777); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#444));*/
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
box-shadow:0px 1px 3px rgba(0,0,0,0.5);
}


.square_c2a{				width:227px; height:225px;float: left; margin:5px; text-align:center;color:#CCC;}
/* is this used ??? */


.square_c2a h1,.sidebar_square_c2a h1{margin:20px 0 0 0;}
.square_c2a p,.sidebar_square_c2a p{padding:5px;}


/* / SQUARE c2As */

/* SOCIAL MEDIA ICONS */

.social_icons_wrap#home{ width:228px;height:50px;float:left;margin:6px 0 30px -28px;}  /* margin bottom forces down web develope ran dcopyright */
.social_icons_wrap{      width:240px;height:50px;float:left;margin:6px 0 30px -35px;

background-image: url(../images/bg_sq.jpg);
/*background:#444; 
background:-moz-linear-gradient(100% 100% 90deg, #222, #555); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#222));*/
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
box-shadow:0px 1px 3px rgba(0,0,0,0.5); }


.social_icons_wrap ul li{ display:inline; list-style:none;}

.social_icons_wrap ul li a.icon{width:25px;height:25px; float:left;color:#444;}  /* color for the "." character in <li>.</li>*/
.social_icons_wrap#home ul li a.icon{width:25px;height:25px; float:left;color:#444;} /* l/r margins squeeze 'em in */ 



.social_icons_wrap ul li a.icon#fb{background:url(../images/footer/social_media/icon_facebook.png);margin:14px 0 0 20px;}
.social_icons_wrap ul li a.icon#tw{background:url(../images/footer/social_media/icon_twitter.png);margin:14px 0 0 60px;}
.social_icons_wrap ul li a.icon#li{background:url(../images/footer/social_media/icon_linkedin.png);margin:14px 0 0 60px;}
/*.social_icons_wrap ul li a.icon#gp{background:url(../images/footer/social_media/icon_google.png);}
.social_icons_wrap ul li a.icon#yt{background:url(../images/footer/social_media/icon_youtube.png);}
.social_icons_wrap ul li a.icon#rs{background:url(../images/footer/social_media/icon_rss.png);}*/

.social_icons_wrap ul li a.icon#fb:hover{background:url(../images/footer/social_media/icon_facebook_alive.png);}
.social_icons_wrap ul li a.icon#tw:hover{background:url(../images/footer/social_media/icon_twitter_alive.png);}
.social_icons_wrap ul li a.icon#li:hover{background:url(../images/footer/social_media/icon_linkedin_alive.png);}
/*.social_icons_wrap ul li a.icon#gp:hover{background:url(../images/footer/social_media/icon_google_alive.png);}
.social_icons_wrap ul li a.icon#yt:hover{background:url(../images/footer/social_media/icon_youtube_alive.png);}
.social_icons_wrap ul li a.icon#rs:hover{background:url(../images/footer/social_media/icon_rss_alive.png);}
*/
	
/* / SOCIAL MEDIA ICONS */	
	
	
	
	/*****************************************************************************************************************************************************************/
	
	
	
	
	
	
	/* accordion */

.accordion ul {margin:0 0 30px 0;display:block;}


.accordion ul li a { /*margin-bottom:20px*/}
.accordion ul li a:hover{text-decoration:none;}

.accordion ul li { list-style:none;
						color:#555; font: 14px 'Varela', Arial, Helvetica, sans-serif; line-height:24px; 
						
						margin:15px 15px 35px 15px;
						
						width:620px;display:block;
						
									/*border: solid 1px cyan;*/} 


/* nb display:none required fro script (check) */
.accordion ul li ul li { list-style:none; display:none;margin:0 0 20px 20px;
						
									/*border: 1px solid red;*/}

.accordion ul li ul li p{ margin:20px 0 0 10px; 

									/*border: 1px solid green;*/} /* keep if any text */


/* it goes like this  (check) 

.accordion ul li ul li div.sleeper_stay_wrap ul li [MT] img

*/


/* 			** This houses the gallery mz squares - colors separated in OO manner already do widths too later ** */

/*
	  ****************

0.0 - Core here

1.0 - Modified CSS and New CSS



2.0 - Original CSS (renamed only)

3.0 - Retiring and Retrenched CSS
   
   	  *****************

*/

/*0.0 - Core here*/

/* Colors */



#wrapper{						border:solid 1px #333;  }

#content,#header,#footer { 		/* DHK */ background:#6c3f2c; /*STEPHEN STYLE background:#434343; */}

#nav_bar, .four-column-full{ 						border-bottom: solid 1px #999;}
#footer{											border-top: solid 1px #999;}


.plan_holder{					background:#fff;}	/* white for plan images */
.sleeper_stay_wrap 		{		background:#444;}	/* gallery background */
.sleeper_wrap 		{			background:#ddd;border:solid 1px #222;}/* documents.php listings */
.wow_sleeper_content	{		background:#333;}	/* documents.php background */

.rh_sidebar_c2a,.lh_sidebar_c2a{background:#555; color:#eee;/*color:#ACCFFF;*/}/* cool friendly blue */


/* img */

.wow_sleeper_img		{		border: solid 1px #333;}  /*documents.php */	
#rh_sidebar_plan_thumb img{		border: solid 1px #333;} /* plans.php */

/* a */

#nav_bar ul li a { 			 		color:#CC6/*#FF99CC*/;} 
#nav_bar ul li a:hover {			color:#fff/*D3FFCB*/;	 }

#nav_bar ul li.contact a { 			color:#CC6/*#FF99CC*/;	}
#nav_bar ul li.contact a:hover {	color:#fff/*D3FFCB*/;}

a { 			 							color:#CC6/*#FF99CC*/;	}
a:hover {									color:#fff/*D3FFCB*/;	}

.accordion ul li a {						color:#cc6;	} 
.accordion ul li a:hover{					color:#fff;}


/* li and p */

.accordion ul li,.accordion ul li ul li { 	color:#cccccc;}
/*.wow_sleeper_text p		{				color:#cccccc;}    no need for this as takes .body. color*/
.wow_sleeper_title p	{					color:#ACCFFF;} /* cool friendly blue */

.wow_sleeper_text#prices_price p {			color:#FFCC66;} /* orange - affordable ! */
.wow_sleeper_text#prices_area{				color:#ACCFFF;} /* cool friendly blue */


/* spans */

.emphasis{									color:#cccccc;/*color:#FF99CC;*/} /* pink - hurry... (nobody likes this) ! */


/* H1, H2, spans. titles */

h1{											color:#eeeeee;} /* ! */


.hero_title,.plan_holder h1{								color:#444444;} /* Grey - under some hero images */

.new_post,.new_post_date,.full_width_heading{color:#ACCFFF;} /* cool friendly blue */




/* 1.0 - Modified CSS and New CSS */





/* spans */

.new_post_date{ width:30%;float:right;text-align:right;}

.superscript {font-size:50%;position:relative;top:-8px;}


/*HEADER DIVS*/
#top_wrap,#heroes,#nav_bar{width:955px; float :left; margin:10px; }

#nav_bar ul{	width: 945px; float: left /*right*/; text-align:/*left*/ right; padding:5px ;/*border:solid 1px red;*/}
#nav_bar ul li{	display:inline;list-style:none;font-size:11px; letter-spacing: 2px; padding:5px 10px; /*border:solid 1px #ccc;*/ }
#nav_bar ul li a{	/*LOWER CASE NAV */ font-size:140%;}

.plan_holder{ padding:20px 0 0 0;  /*border: solid 1px yellow;*/} 

/*padding was hack for "floor plan" drafts but looks OK for other heroes - so leave for now - othewise give sperate id without top padding to heroe images */
.plan_holder#phases{padding:0px;}


/* padding top + bg #fff used for plan holder  - padding on H1 aligns with content div H1s */

.plan_holder h1{ padding: 10px 0 0 10px; /*border: solid 1px cyan;*/}


/* two level apartments - toggle floor plans  - see plans_b5_l3_e1.php*/

.plan_holder span a{text-align:right;font-size:80%; margin: 30px 10px 0 780px; color:#060;} /* margin cos span don't like float try display:block later */
.plan_holder span a:hover{color:#f00;}

.floor_selectors{display:block; width:70%; float:right; /*border: solid 1px red;*/ margin:-28px 0 60px 0 ;} /* margin hack to align a: text and make space fo lower image*/
.floor_selectors#plans_home{margin:-28px 0 20px 0 ;} /* lesser margin bottom here as no second image underneath*/

.floor_selectors a{text-align:right;font-size:110%; padding:0 10px 0 20px; color:#060;}
.floor_selectors a:hover{color:#f00;}


/* slideshow */

#slideshow {
    position:relative;
    height:336px;
	width:955px;   
	float:left;
	margin:0 0 20px 0;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


/*CONTENT DIVS*/

.three-column-first, .three-column-second, .three-column-third,.two-column-side-lh-bar,.two-column-side-rh-bar,.two-column-main-lh-bar {

										float:left; padding:25px 20px 25px 20px; /*border: 1px solid yellow;*/}

.three-column-first,.two-column-side-lh-bar,
.three-column-third,.two-column-side-rh-bar{	width:215px;} 

.three-column-first{	/*border-right:1px solid #ccc;*/ }
.three-column-third{	/*border-left:1px solid #ccc;*/} 

.three-column-second {		 					width:416px;border-left:1px solid #444; border-right:1px solid #444; }

.two-column-main-lh-bar{						width:675px;border-left:1px solid #444;}
.two-column-main-rh-bar{						width:672px; border-right:1px solid #444;} /* for now - aligns with 3 col layout and footer */

/*			**  BROWSERS ** Firefox renders widths differently to  Chrome.Safari - using FF for safety - 
							above widths can be 677px in Chrome.Safari
*/



.four-column-full{width:935px;} 

.four-column-squares{width:234px;float:left;margin:20px 0 20px 5px;border: 1px solid #222;} /* top and bottom margins for space under/over horiz line*/
.four-column-squares#1{margin:20px 0 20px 5px;}
.four-column-squares#sidebar{width:241px;margin:20px 0 20px -10px;}

.in_page_mz { width:240; float:left; border: solid 1px yellow;}/* ?? rentrench this  ?? */


/* Documents.php */



.sleeper_wrap 		{width:675px; height:183px;float:left;padding:15px 0;margin:0 0 15px 0;}

.wow_sleeper_img		{width:215px; height:183px;/*padding:0 10px 0 10px;*/margin:0 10px 0 10px;float:left;}					
.wow_sleeper_content	{width:398px; height:183px;padding:0px 15px;float:left;}

.wow_sleeper_title p	{height:30px;/*border:solid 1px green;*/text-align:left;font-size:140%;margin:20px 0 0 0 ;padding:25px 5px 0 5px;line-height:26px;}
.wow_sleeper_text p		{height:58px;overflow:hidden;/*border:solid 1px green;*/text-align:left;font-size:90%;line-height:24px;padding:0px 5px 10px 5px;}
.wow_sleeper_more_from	{width:50%;float:right;text-align:right;}   /*DOWNLOAD (documents.php) and MORE... (prices.php)


/* Prices.php */
.wow_sleeper_title#prices_title { width:70%; float:left;/*border: solid 1px yellow;*/}
.wow_sleeper_title#prices_area { width:20%; float:right;/*border: solid 1px yellow;*/}
      /* nb _title */

.wow_sleeper_text#prices_text { width:70%; float:left;/*border: solid 1px yellow;*/}	
.wow_sleeper_text#prices_price { width:20%; float:right;/*border: solid 1px green;*/ }
.wow_sleeper_text#prices_area{ width:20%; float:right;/*border: solid 1px green; */}
.wow_sleeper_text#prices_price p,.wow_sleeper_title#prices_area p {text-align:right;}



/* FOOTER DIVS - - - SEE FOOTER STYLES BELOW*/




/* logo  ----MODIFY THESE ----------------------------*/


img#logo{float:left; margin:20px  0 25px 0;}			/* logo header - 
			margin bottom ensures content div column borders do not extend to top 
			margin top keeps logo from bothering css rounded corners  */



/* Main Content Area */

#content p{padding:0 0 20px 0; } /* padding bottom to create space between paras */




/*2.0 - Original CSS (renamed only)
*/

/* Font styles */

h1 {font:16px/24px 'Varela', Arial, Helvetica, sans-serif;  padding-bottom:25px;text-transform:uppercase;}
h2 {font:14px/18px 'Varela', Arial, Helvetica, sans-serif; margin-bottom:20px; }


.plan_holder span a,.floor_selectors a{ font-family:'Varela', Arial, Helvetica, sans-serif;}



/* accordion - moved up top */





/*clear css here
*/




.clearall {clear:both; width:100%; font-size:0px; line-height:0px;}

/*  core */

/* Layout Features */

/* Bubbles classes */

.client-feedback-bubble, .sidebar-bubble, .accordian-feedback-bubble {	
	border:solid 1px #ccc ;padding:25px 10px 5px 10px; width:650px;
-moz-border-radius:14px;
-khtml-border-radius:14px;
-webkit-border-radius:14px;}					/* padding-bottom adds to #content p padding  = 25 in total*/

.client-feedback-bubble,.accordian-feedback-bubble{		background:#FFF9F8;} 

.client-feedback-bubble, .sidebar-bubble{				margin: 0 0 25px 0;}

.accordian-feedback-bubble{	/* not needed  - but as we have it in the HTML will keep for now - you never know...*/ }



/* /Bubbles ids*/

#under-slider/*,#under-slider-newsletter*/{					margin:25px 0 0 0 ; width:189px; float:left;} 
														 /* margin-top moves below bottom slider */

/* NEWSLETTER SIGN UP   - bubble style version 1- rejected by client - if putting back remember to uncomment line above too */
/*
#under-slider-newsletter 				{width:199px;padding: 20px 0px 20px 8px;background:#FFFBF9;}	
#under-slider-newsletter a:hover 		{ text-decoration:none;}
*/	

/* NEWSLETTER SIGN UP 2   - nav menu style version 2 - alt to 1 - NB CSS derived from  #navigation a and #navigation li */

/*
#under-slider-newsletter a {		background-color:#ceae70;color:#505050;font-size:14px;padding:5px 0 5px 11px; margin:25px 0 0 0; 
									width:198px; display:block;float:left;}
									
#under-slider-newsletter a:hover {	background-color:#87736a;color:#FFFFFF; }
*/

/* NEWSLETTER SIGN UP   - nav menu style version 3 - alt to 2 - More or less the same, but no longer separate from menu - top margin now 0 - nb border top */

#under-slider-newsletter a {		background-color:#BF9264;color:#505050;font-size:14px;padding:5px 0 5px 11px; margin:0 0 0 0; 
									width:198px; display:block;float:left;border-top:1px solid #e7e3e1;}
									
#under-slider-newsletter a:hover {	background-color:#87736a;color:#FFFFFF; }

/* lists and checklists */

ul.list-needs,ul.list-benefits{ 							margin:0 0 25px 0;}
ul.list-needs li,ul.list-benefits li{						list-style:url(../images_stephen/tick_15.png);margin:0 0 10px 25px;}




/* case studies pages - small images */

img#l,img#lp{		    margin:11px 0 0 0 ;}
img#r{					margin:0 0 0 18px;}
img#rp{					margin:0 0 0 44px;}   /*portrait images when three of 'em */
/* add this social media */

ul.social_media {display:block; width:192px; float:left;margin:30px 0 0 0; padding: 0 0 0 8px;/*border: 3px solid green;*/}



/* footer styles */



#footer{						/*background:#111; 
background:-moz-linear-gradient(100% 100% 90deg, #111, #222); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#111));
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
box-shadow:0px 1px 3px rgba(0,0,0,0.5);*/ }

.footer_left {		     		float:left;width:215px;padding:25px 20px 25px 20px;/*border-right:1px solid #ccc;*/ }
.footer_centre{		 			float:left;width:456px;padding:0;/*psd image sixed to fit for dev site*/border-left:1px solid #ccc; border-right:1px solid #ccc; }

/* left and centre retrenched for now 15.6.12 */

.footer_partners{				float:left;width:667px;padding:25px 20px 25px 20px;}
.footer_partners#home{			float:left;width:718px;padding:25px 20px 25px 20px; margin: 0 0 0 -10px;}

.footer_right {		 			float:right;width:214px;padding:10px 0px 25px 0px;/*border:solid 1px red;*/}  


.footer_base{ 					float:left;width:975px;}
.footer_base#partners{ padding:10px 0 0 10px;}

div.footer_base ul{				width:100%;text-align:center; padding:0 0 25px 0;} 
div.footer_base ul li{			display:inline;font-size:11px; }

.footer_left,.footer_centre,.footer_right{		 margin: 10px 0 0 0;}
.footer_right p  {								font-size:13px;text-align:right;padding:18px 20px 0 0;} 





/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Form Styles */
form {font-size:14px; line-height:24px; margin-bottom:15px;}

form label {float:left; width:540px; text-align:left; padding: 0 0 15px 15px;font:14px 'Varela', Arial, Helvetica, sans-serif; line-height:24px;}

form input, form select, form textarea {font:14px 'Varela', Arial, Helvetica, sans-serif; line-height:24px; color:#321405;border:1px solid #ccc;  background:#fdf1d4; margin:0 0 10px; padding:5px; width:540px; -moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px}

/*  ORIGINAL  form input#send_message{font:22px 'Varela', Arial, Helvetica, sans-serif;line-height:55px;  background:#444; background:-moz-linear-gradient(100% 100% 90deg, #444, #888); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888), to(#444));
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
outline:none; width:550px; height:auto;  padding:5px 10px; color:#FFEDFC; text-decoration:none; 
border:1px solid #000;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;}
*/

form input#send_message{font:22px 'Varela', Arial, Helvetica, sans-serif;line-height:55px; 

 background:#444; background:-moz-linear-gradient(100% 100% 90deg, #321405, #250d01); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#250d01), to(#321405));
/*#321405 - darkest wood
#fdf1d4 - yell in logo*/
	
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); box-shadow:0px 1px 3px rgba(0,0,0,0.5); 
outline:none; width:550px; height:auto;  padding:5px 10px; color:#FFEDFC; text-decoration:none; 
border:1px solid #000;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;}


form input#contact_email{background:#e7e3e1;}

form select {padding:15px;}

form ol li {padding:0 0 5px 15px;}





/*	****************************************************************************************************

*3.0 - Retiring and Retrenched CSS

	****************************************************************************************************

*/   

/*SLIDING MENUS
*/

/*
ceae70			caramel			 default	
87736a			chocolate		 hover
d9c2a8			pale fawn		 sub menu
e7e3e1			even paler		 sub menu hover
*/

#navigation a {color:#505050; font-size:14px; padding:5px 0 5px 11px; width:198px; display:block}
#navigation a:hover {background-color:#87736a; color:#FFFFFF; background-image: url(../images_stephen/navigationWhiteArrow.jpg); background-repeat: no-repeat; background-position: right center;}


/*#navigation li  {background-color:#ceae70;  border-top:1px solid #e7e3e1; width:209px;}*/
#navigation li  {background-color:#BF9264;  border-top:1px solid #e7e3e1; width:209px;}

#navigation li {background-image: url(../images_stephen/navigationArrow_bg.gif); background-repeat: no-repeat; background-position: right center; width:209px; float:left;}

/*#navigation li.selected a {background-color:#d4b798; color:#FFFFFF; background-image: url(../images_stephen/navigation_arrow_down_d9c2a8.gif); background-repeat: no-repeat; background-position: right center;}*/

/* SELECTED option removed at client's request */

#navigation li ul.submenu {display:none;}
#navigation li.selected ul.submenu {display:block; }

/*sub menu background*/
#navigation li.selected ul.submenu li a {background-color:#d9c2a8; background-image:none; color:#505050; font-size:13px; padding-left:20px; width:189px;}

#navigation li.selected ul.submenu li a:hover,
#navigation li.selected ul.submenu li a#active_page   {color:#fff; text-decoration::none;background-color:#d4b798;}

#navigation li.last {border-bottom:1px solid #e7e3e1;}



/* /SLIDING MENUS


/*form input.btn {outline:none; width:auto; line-height:20px;}
form input.btn:hover {cursor:pointer; background-color:#222; border-color:black;}
form input.checkbox, form input.radio {width:auto; padding:0; border:0; margin-right:3px;}
form input:focus, form select:focus, form textarea:focus {color:black; border:1px solid black;} m select:focus, form textarea:focus {color:black; border:1px solid black;} */