/*** 
All House Price www.allHousePrice.my
Name	:	style.css
Create	:	3 Jun 2009
Modified:	9 Dec 2009
Note	: 	Ref http://colorschemedesigner.com/
			Color Scheme: Complement 
			Color Hue: Green (RGB #12B812) , Hue 180 degree, Red 7% Green 72% Blue 7%
			Adjust Scheme: High Contrast
			Primary (Green):					Complement (Brown, Red Orange, Pink):
			Green			#12B812	1218412		Brick Red		#E61717	2302323			
			Dark Green		#327332	5011550		Light Brown		#8F3F3F	1436363
			Darkest Green	#025702				Dark Brown		#6D0303
			Light Green		#68ED68	104237104	Pink			#F96D6D
			Pastel Green	#A8EDA8	168237168	Pastel Pink		#F9B0B0
			
			light grey		#D5D6D6

Favicon.ico: http://www.html-kit.com/favicon/

Layout Design
1. #mainpage (Homepage)
		#pageheader
			logo
			smalladv
			pipemenu
		#pagebanner
		#pagecontent
			leftcolume
				searchbox
				quicklink
			rightcolume
				welcome
				testimonial
		#pagefooter
			pipemenu
2. #mainpage (Non homepage)
		#pageheader
			logo
			smalladv
			pipemenu
		#pagecontent
			leftcolume
				searchbox
				listbox
				pagelink
			rightcolune
				adv
		#pagefooter
			pipemenu		
***/


/* Everything inside the browser window */
body{ 
	margin: 0px;				/* no gap between mainpage and browser window */
	padding: 0px;				/* set default padding */
	background: #EEEEEE;		/* light gray on left-right of browser window */
}

	/* Standard container for every pages */
	/* Two fonts scheme; header=serif, text=sans-serif */
	#mainpage h1, h2, h3, h4, h5, h6 {font-family: Georgia, Baskerville, serif}	/* header=serif */									
	#mainpage { 			
		padding: 0px 8px;														/* extra padding on left-right for shadow */
		background: url("../images/pageshadow_968.png") repeat-y left; 			/* main page=950+8+8px for left-right shadow */
		font-family: Arial, Verdana, Lucida Grande, sans-serif;					/* text=san-serif */
	}
		/* Page header for every pages */
		#pageheader {
			height: 70px;						/* Small adv banner need 300x60px */
			background: url('../images/headerpattern.jpg');
			border-bottom: 4px solid #12B812;	/* bottom green border */
		}	
			#pageheader img{					/* Image Replacement Ref: http://css-tricks.com/css-image-replacement/ */				
				margin: 2px 40px; 				/* logo size of 282x67px with 2px from top and 40px from left-right */ 
				border: none; 					/* prevent border since logo is selectable */
				float: left;					/* always on left of page header */
			} 
			#topmenu {
				float: right;					/* pipemenu position at top right of page header */
				font-size: small;				/* Alternative positioning use: */
				font-weight: bold;				/*		#pageheader {position: relative:} */
				color: green;					/*		#topmenu {position: absolute; top: 0; right: 0;} */
			}
			#topmenu a{color: #8F3F3F;}

		/* Page banner only for homepage */	
		#pagebanner .span-9 {margin-right: 0px}	/* Hack to fit in non standard colume 600px width images */
		#pagebanner {	
			height: 250px;						/* Photo height, location for adv banner as well */
			background: #327332;				/* Dark green banner */
		}
			/* Main Tilte */
			#bannertitle h1 {margin: 25px 20px; color: white;}
			#bannertitle p {margin: 0px 25px; font-size: medium; color: white;}
			/* Start Quote and End Quote Ref: http://24ways.org/2005/swooshy-curly-quotes-without-images */
			#bannertitle .bqstart {
				margin-left: 20px;						/* overall text start position */
				float: left;							/* start quote on left, end quote on the right */
				height: 40px;							/* control over flow of text below the quote */ 
				margin-top: -20px; 						/* adjust the y-axis of the text */
				padding-right: 15px;					/* space after quote, not too near */
				font: 700% Georgia, Baskerville, serif;	/* 5x size, serif font type */
				color: #A8EDA8;							/* light green font text */
			}
			#bannertitle .bqend {
				margin-right: 25px;
				float: right;
				height: 45px;
				margin-top: -30px;
				padding-left: 5px;
				font: 700% Georgia, Baskerville, serif;
				color: #A8EDA8;
			 }
		/* Page Banner: hold the dynamic image, could be adv banner 600x250px */
		#bannerimages{
			/*width: 500px; height: 200px;	/* Max size of each dynamic image */
			/*overflow: hidden;				/* Oversize image will be clipped away */
			position: relative;
		}

		/* Dynamic Image with CCS z-index and Javascript */
		/* Ref: http://www.devarticles.com/c/a/HTML/Changing-and-Moving-Pictures-with-CSS/ */
		#image1 {
			position: absolute;				/* Require for the dynamic image to change */
			width: 600px;					/* Scale the image and maintained the image ratio by width */
			z-index: 0;						/* Higher index on top to be display, ower index below and hidden */
			border: none;
		}
		#image2 {
			position: absolute;
			width: 600px;
			z-index: 0;
			border: none;
		}
		#image3 {
			position: absolute;
			width: 600px;
			z-index: 0;
			border: none;
		}
		#image4 {
			position: absolute;
			width: 600px;
			z-index: 0;
			border: none;
		}
		#image5 {
			position: absolute;
			width: 600px;
			z-index: 0;
			border: none;
		}	
		#image6 {
			position: absolute;
			width: 600px;
			z-index: 0;
			border: none;
		}			

		/* Page Content, with 2 columns */
		#pagecontent {
			background: white;
		}
		
			#colume-left {
				padding-bottom: 50px;	/* Extra white space before footer */
			}
				#introduction {
					margin: 10px 20px;
				}
				#introduction h2, h3 {color: #025702;}
		
			#colume-right {
			}
				#reviews{
					margin: 20px 25px 10px 0px;
				}
				#reviews h2 {margin-top: 20px; color: #025702;}


		/* Search Box */
		#searchbox1 { 							/* Search box in the index.php */
			margin: 10px 15px;					/* std 15px left-right, 10px top-bottom margin */	
		}

		#searchbox2 { 							/* Search box in ghe search.php */
			margin: 10px 15px;					/* std 15px left-right, 10px top-bottom margin */
			width: 60%;							/* Avoid search box extend to occupied the whole width */
		}
			
		/* Page footer for everypage */
		#pagefooter { 
			background: #327332;			/* dark green for footer*/
		}
		#pagefooter .pipemenu {
			margin-top: 0.5em;				/* control overall footer bar height */
			margin-left: 2em;				/* space from left margin */
		}
		#pagefooter a{color: #68ED68;}		/* light green text color for pipe menu link */
		#pagefooter p {
			margin-left: 2em;				/* space from left margin */
			margin-bottom: 0.5em;			/* control overall footer bar height */
			color: rgb(151, 163, 165);		/* grey for copyright text */
		}	


/* Pipe Menu Class */
/* Ref: http://css.maxdesign.com.au/index.htm */
.pipemenu {
	margin: 0px;
	padding: 0px;
	overflow: hidden;		/* hide the border for the first item */	
	list-style-type: none;	/* disable bullet for the list */
}	
	.pipemenu li{
		display: inline;				/* horizontal menu, default is vertical */
		margin: 0pt 0.5em 0pt -0.5em;	/* overlap first item hid the first left border */
		padding: 0pt 0.5em;				/* left-right spacing from border is 0.5em, top-bottom is 0em */
		line-height: 1.5em;
		border-left: 1px solid rgb(151, 163, 165);	/* grey left border as item seperation */
	}
	.pipemenu li a {text-decoration: none;}						/* no underline */
	.pipemenu li a:hover {text-decoration: underline !important;}	/* highlight underline when mouse pointer on item */


/* Tabs Menu */
/* http://www.dynamicdrive.com/style/csslibrary/item/corp_blue_css_menu/ */
#tabs {
	margin-left: 15px;					/* distant from left border to the first tab */	
	font-size: small;					/* Original default is 93% */
	font-weight: bold;
	line-height: normal;
	/*border-bottom: 10px solid #666;*/	/* bottom border for the tab, as seperator to box below */
	margin-bottom: 0em; 				/* margin between menu and rest of page*/
	overflow: hidden;
}
	#tabs ul {
		margin: 0;						/* reset all inherited margin/padding setting */
		padding: 0;
		list-style: none;
	}
	#tabs li {
		display:inline;
		margin:0;
		padding:0;
	}
	/* Active tab, small left part of the tab image */
	#tabs a.active {
		float: left;
		background: url("../images/left.png") no-repeat left top;
		margin-left: 0px;
		padding: 0 0 0 6px;
		text-decoration: none;
	}
	/* Active tab, large right part of the tab image */
	#tabs a.active span {
		float: left;
		display: block;
		background: url("../images/right.png") no-repeat right top;
		padding: 6px 15px 4px 6px;
		margin-right: 2px;
		color: white;				/* Tab text color */
	}
	/* Non-active tab, small left part of the tab image */
	#tabs a {
		float: left;
		background: url("../images/left2.png") no-repeat left top;
		margin: 0;
		padding: 0 0 0 6px;
		text-decoration: none;
	}
	/* Non-active tab, large right part of the tab image */
	#tabs a span {
		float: left;
		display: block;
		background: url("../images/right2.png") no-repeat right top;
		padding: 6px 15px 4px 6px;
		margin-right: 2px;
		color: white;				/* Tab text color */
	}
	/* Commented Backslash Hack hides rule from IE5-Mac \*/
	#tabs a span {float:none;}
	/* End IE5-Mac hack */
	/* When mouse hovered, change tab color by swapping below image */
	#tabs a:hover {background-position: 0% -42px;}
	#tabs a:hover span {background-position: 100% -42px;}
	/* When mouse hovered , underline word for non-active tabs only */
	#tabs a.active:hover  span {text-decoration: none !important; cursor: default}
	#tabs  a:hover span {text-decoration: underline !important;}


/* ----------- stylized ----------- */
/*http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html*/
/* Search form: Quick Search and Easy Search */
#searchform {
	width: 100%;					/* occupy all space given by search box */
	border: solid 1px #D5D6D6;		/* line around the search form */
	border-top: 25px solid #327332;	/* bold line at the top */
	background: #eeeeee;			/* light grey background */
}
	/* Form Title and description */
	#searchform h2 {				/* Search form title */
		margin: 0px 10px 0px 15px;	/* no space on top, 10px on left and right, 0px bottom */
		color: #E61717;				/* brick red text */
	}		

	/* Quick Search */
	#quicksearch {
		margin: 10px 10px 0px 15px;/* space below search instruction */
	}
	#quicksearch  p {					/* Search instruction */
		margin-bottom: 1.0em;
		font-size: medium;
		color: #666666;				/* grey text */
	}
	#quicksearch label {				/* Input fields lable */
		display: block;				/* Force A line by itself */
		font-size: small;
		font-weight: normal;
		color: #666666;				/* grey label */
	}	
	#quicksearch input {				/* quick search field*/
		margin: 0em;				/* No spacing between top label and bottom example */
		width: 470px;				/* width of input field */
		font-size: large;
	}
	#quicksearch .example{ 			/* Example for input text */
		display: block;				/* Force a line by itself */
		font-size: small;
		color: #666666; 			/* grey text */
	}	
	/* Easy Search */
	/* Ref Multicolumne List: Method 4 in http://www.alistapart.com/articles/multicolumnlists/ */
	#easysearch {
		margin: 10px 15px;
		display: none;				/* disable by default, allow quicksearch form to be shown while loading */
	}
	#easysearch  p {					/* Search instruction */
		margin-bottom: 1.0em;
		font-size: medium;
		color: #666666;				/* grey text */
	}
	#easysearch ol {
		margin: 0; padding: 0;
		/*list-style-position: inside; /* No bullet indentation on the left */
		list-style-type: none;
	}
	#easysearch  li {
		width: 160px; 				/* left padding 5px + input field 150px + right padding 5px = 160px */
		height: 4em;				/* fix height, so li.reset can move 2nd and 3rd columne vertical up correctly */		
		color: #666666;				/* grey label */
	}
	#easysearch label {				/* Input fields lable */

		font-size: small;
		font-weight: normal;
		color: #666666;				/* grey label */
	}
	#easysearch select {
		margin: 0em;
		width: 150px;				/* width of input text field */
	}	
	#easysearch li.col1 {
		border-right: 1px solid #D5D6D6;/* light grey line */
	}
	#easysearch li.col2 {
		margin-left: 170px;				/* margin for 2nd colume */
		border-right: 1px solid #D5D6D6;/* light grey line */
	}
	#easysearch  li.col3 {
		margin-left: 340px;				/* margin for 3rd colume */
	}
	#easysearch li.reset{					/* Move 2nd and 3rd colume vertical up to the top */
		margin-top: -8em;				/* 2 li x 4em li height = 8em */
	}
	/* Search Button */
	#searchform button {
		/*float: right; */				/* Button always on the right of the search box, doesn't work in other browser */
		margin-top: 10px;				/* Right align and allow space from text input and bottom of the form */	
		margin-left: 365px;		
		margin-bottom: 10px;
		width: 125px; height: 31px;		/* button size */
		font-size: small;
		font-weight: bold; 
		color: #E61717;					/* brick red text */
	}
	#searchform button:hover {text-decoration: underline !important;}

/*
   Script name  : Ajax Auto Suggest
   File Name 	: style.css
   Developed By : Amit Patil (India)
   Email Id 	: amitpatil321@gmail.com
   last Updated : 9 June 2009
*/
/* Ajax loading icon generator: http://www.ajaxload.info/ */
#loading{
	visibility: hidden;
	padding-left: 5px;
}
#ajax_response{
	/*margin-top: 2.0em;*/				/* Push auto complete to below text input */
	border : 1px solid #D5D6D6;
	background : #FFFFFF;
	position: absolute;
	display: none;
	padding: 2px 3px;
	top: auto;
}
#ajax_response span{
	margin-left: 0px; 
	display: inline;
}

#ajax_response .list li {	
	float: none; 
}
#holder .list{
	padding:0px 0px;
	margin:0px;
	list-style: none; 
}
#ajax_response .list{
	padding:0px 0px;
	margin:0px;
	list-style: none; 
}

#ajax_response .list li  a{
	text-align : left;
	padding:2px;
	cursor:pointer;
	display:block;
	text-decoration : none;
	color:#000000;
}
#ajax_response .selected{
	background : #CCCFF2; 
}

#ajax_response .bold{
	font-weight:bold;
	color: #131E9F; 
	color: black;
}

/* Page Listing. Prev 1 2 3 4 5... Next */
/* http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/ */
#pagination {
	height: 60px;					/* allow ample white space before footer */
	margin: 0 15px;	
	padding: 0 10px;
	}
	#pagination ul {
		margin: 0; padding: 0;		/* reset inheritage margin from #pagination */
		line-height: 2.5em;			/* more white space for line item */
		float: left;				/* right of the page */
	}
	#pagination li {
		list-style-type: none;		/* no bullet for all list item */
		display: inline;			/* align horizontal in a line */
	}
	#pagination a {
		padding: 5px 5px; 			/* well spaced box */
		border: 1px solid #327332; 	/* dark green border #9aafe5 */
		text-decoration: none; 		/* no underline for link */
		color: #327332;				/* dark green Text color, Original #2e6ab1*/
	}
	#pagination a:visited {
		/*color: #8F3F3F;			/* light brown visited link */
	}	
	#pagination a.prevnext {			/* should appear before a:hover */
		border: 0px;
	}
	/* Effect during mouse over a page link */
	#pagination a:hover, #pagination a:active {
		color: #E61717;				/* brick red text */
		border: 1px solid #F96D6D;	/* pink border */
		background-color: #A8EDA8;	/* light green background. */
	}
	#pagination a.prevnext:hover {
		text-decoration: underline;	/* underline the text */
		border: 0px;				/* overwrite with no border for prev and next */
		background: white;			/* overwrite with white */
	}
	/* Current page indicator, Bold White Number, with dark background */
	#pagination a.currentpage {
		font-weight: bold;		
		color: #FFF !important;		/* White bold number */
		background-color: #327332;	/* dark green background */
		border-color: white;		/* white box, make it appear slightly smaller box */
		cursor: default;
	}
	/* not used here */
	#pagination a.disablelink, #pagination a.disablelink:hover {
		background-color: white;
		cursor: default;
		color: #929292;
		border-color: #929292;
		font-weight: normal !important;
	}


/* Status: Result "gurney villa, jalan kelawai" Display: 11-20 of 6,808 total (0.33 seconds) */
#searchstatus {
	margin: 0 15px;					/* left-right margin from side of the page */	
	padding: 0 10px;				/* left-right padding from margin */
	clear: both; 					/* on its own line */
	font-size: small;
	line-height: 2em;				/* make status display wider */
	background: #eeeeee; 
	border-top: 1px solid #D5D6D6; 
}	

/* Display listing from DB */
/* Search Listing Main Container */
#searchlisting {
	margin: 15px 15px;				/* top-bottom and left-right margin from side of the page */
}
	#searchlisting a {
		/*color: #E61717;			/* brick red */
	}
	#searchlisting a:visited {
		/*color: #6D0303;			/* dark brown */
	}
	#searchlisting a:hover {
		color: #E61717;				/* brick red */
		text-decoration: none;
	}
	#searchlisting .size {
		color: #666666;				/* gray */
		font-size: smaller;
	}
	#searchlisting .landuse {
		color: #12B812;				/* green */
		font-size: smaller;
		/*padding-top: 0.5em;*/
	}
	/* Level 1 Group Listing, currently display 10 item per page */
	#searchlisting  ul {
		margin: 0; padding: 0;
		list-style: none;
	}
		/* Level 1 items: eg area name */
		#searchlisting ul li {
			margin: 0; padding: 10px; 	 
			border-bottom: 1px solid #D5D6D6;	/* light gray */
		}
			/* Level 2 Group Listing */
			#searchlisting ul ul {
				margin: 0; 
				padding-top: 10px;				/* separate with top item title */
				padding-bottom: 10px;			/* seperate with next title */
			}
				/* Level 2 item: eg state, district, street name, landuse type, building type etc  */
				#searchlisting ul ul li {
					/*width: 70%;				/* limit text display for easy reading */
					margin: 0; padding: 0; 	
					border: 0px;				/* overwrite border inherit above */
				}
				
/* Contact Us */
/* The Form and Thank You message */
#contactus ul  ul{
	margin-bottom: 0;
}
	#contactus ul  ul li{
		list-style: none;
	}
	#contactus ul  ul li label{
		color: #0c2763;
		font-weight: bold;
	}
	#contactus ul  ul .error{
		color: red;
		font-size: smaller;
	}

/* IE* bug to center button, http://haslayout.net/css/No-Auto-Margin-Center-on-Buttons-Inconsistency */	
#contactus  input[type="submit"] {
	display: block;
	margin: 0 auto;
	width: 10em;
	font-size: large;
}
#contactus span{
	color: red;
	text-align: center;
}