/*
	STRUCTURE
	=========
	+----------------------+
	|         978px        |
	+-------+------+-------+
	| 249px |  *   | 214px |
	+-------+------+-------+
	| 249px |    729px     |
	+-------+------+-------+
*/


/*
	GLOBLAL STYLE DEFINITIONS
	=========================
*/

BODY
{
	margin: 0;
	padding: 0;

	background-image: url(images/background.png);
	background-repeat: repeat-x;
	background-color: #d47c75; /* (Red/Pink as at bottom of image) */

	font-family: Verdana, Sans-Serif;
	font-size: 0.75em;
}

DIV
{
	margin: 0;
	padding: 0;
	border: 0;
}

TABLE
{
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	border: 0;
}

TR,TH,TD
{
	vertical-align: top;
}

P
{
	text-align: left;
	margin-top: 0.25em;
	margin-bottom: 1em;
}

A
{
	color: #ec4e16;
}

IMG
{
	border: 0;
	padding: 0;
	margin: 0;
}

H1
{
	margin: 0;
	font-size: 1.5em;
	color: #6C625F;
    margin-top: 0.25em;
    margin-bottom: 0.75em;
}

H2
{
	margin-top: 1em;
	margin-bottom: 0.25em;

	font-family: Arial, Sans-Serif;
	font-weight: bold;
	font-size: 1.3em;

	color: #df0800; /* dark red */
}









/* 
	FRAME CONTROL - That which controls the outer structure of the website
	=============
*/
DIV#container
{
	width: 978px;
	margin: 0 auto;
	text-align: left;
}





/*
	BODY
	====
	Description: This table style defines one, two and three column body sections (left and right columns both being optional).
	All columns have a white background, with the left amd right areas (where applicable) is 270px wide.  A shaded vertical line
	runs down the left edge of the main line
	This is compatible with the "shade" or "shadeindent" class styles.
*/
TABLE.body
{
	width: 978px;
	clear : both;
}

TABLE.body TD.body-left
{
	width: 247px;	/* 249px - 2px */
	background-color: white;
}

TABLE.body TD.body-main
{
	background-color: white;
}

TABLE.body TD.body-right
{
/*	width: 727px;	/ * 729px - 2px */
/*	width: 247px;	/ * 249px - 2px */
	width: 212px;	/*  214px - 2px */
	background-color: white;
}



/* leftsection appears inside TD.body-left to provide the appropriate padding */
DIV.left-padding
{
	padding: 11px 7px;
}

DIV.right-padding
{
	padding: 11px 7px;
	text-align: right;
	
}

DIV.main-padding
{
	padding: 11px 15px;
}






/*
	HEADER 
	======
*/
DIV#header
{
	background-color: White;
}

IMG.header-logo
{
	margin: 14px 0 17px 14px;
}

P#header-topmenu
{
	margin: 4px 8px 2px;
	padding: 0;
	font-family: Verdana, Sans-Serif;
	font-size: 0.9em;
	text-align: right;
}
P#header-topmenu A
{
	color: Black;
	text-decoration: none;
}
P#header-topmenu A:hover
{
	text-decoration: underline;
}

P#header-banner
{
	margin: 0;
}

TD#header-left
{
	width: 249px;
}

TD#header-right
{
	width: 729px;
}





/*
	FOOTER 
	======
*/
DIV#footer
{
	border-top: solid 1px #df0800; /* dark red */
	background-color: white;
	padding: 10px;
}
DIV#footer P.developer
{
	text-align: center;
}
DIV#footer P.developer A
{
	color: black;
}
DIV#footer P.shortcuts A
{
	color: black;
}




/*	SHADE
	=====
	The shade classes "shade" and "shadeindent" provide a shaded vertical line in the background of the containing object.
	The shadeindent version indents by the equivilent of a left column (270 pixels).  You can add these to DIV or TD objects
    by appending them to the existing class style.
*/
.shade
{
	background-image: url(images/shade-line-alpha.png);
	background-repeat: repeat-y;
}

.shadeindent
{
	background-image: url(images/shade-line-alpha.png);
	background-repeat: repeat-y;
	background-position: 249px top;	
}








/* 
	RED BAR
	=======
	The red-bar describes a 20pixel high red bar that runs the width of the containing area.
	This is compatible with the "shade" or "shadeindent" class styles.
*/
DIV.red-bar
{
	width: 962px;		/* = 978px - 2 * 8px */
	min-height: 16px;	/* = 20px  - 2 * 2px */

	background-color: #009900; /* dark red */
	color: White;
	
	padding: 2px 8px;	/* (font and padding based on header-topmenu) */
	font-family: Verdana, Sans-Serif;
	font-size: 0.9em;
	text-align: right;
}
DIV.red-bar A
{
	color: White;
	text-decoration: none;
}
DIV.red-bar A:hover
{
	text-decoration: underline;
}




/* 
	YELLOW BAR
	==========
	Acts like a heading and as such, should be used in an H2 tag.
*/
H2.yellow-bar
{
	background-color: #fcd105; /* yellow/gold colour */
	color: Black;
	
	padding: 5px 8px;	/* (font and padding based on header-topmenu) */
	font-family: Arial, Sans-Serif;
	font-weight: bold;
	font-size: 1.3em;
}
H2.yellow-bar A
{
	color: black;
	text-decoration: none;
}
H2.yellow-bar A:hover
{
	text-decoration: underline;
}






/*
	BREADCRUMB
	==========
*/
DIV.breadcrumb
{
	margin-bottom: 1.4em;
}








/* 
	COLUMN SPLITTER
	===============
	Used to split main content into two or more columns.
	Suggest that all TDs start with a H2 followed by Ps.
	Irrespective of the number of columns you have, the final
	TD should contain class="lastsplit" to correct formatting.
*/
TABLE.columnsplitter
{	
}
TABLE.columnsplitter TD
{
	padding-right: 10px;
}
TABLE.columnsplitter TD.lastsplit
{
	padding-right: 0px;
}
TABLE.columnsplitter TD.cs50
{
	width: 50%;
}





/* 
	MAINMENU
	========
	Formatting via DIV.mainmenu using infocasa wayfinder classes to customise subcomponents
*/


DIV.mainmenu
{
	text-align: left;
	float: left;	
}

DIV.mainmenu LI.active A, 
DIV.mainmenu LI.active A:link, 
DIV.mainmenu LI.active A:visited

{
	color: #FFFF00;	
}

DIV.mainmenu LI.row
{
	padding-left:2px;
	text-align: left;
	float: left;
	display: inline;
}

DIV.mainmenu LI.last SPAN
{
	/* hide the list | character */
	display: none;
}

DIV.mainmenu UL.outer
{
	margin:0;
	padding: 0;	
		 
}



/* 
	SIDEMENU
	========
	Formatting via DIV.sidemenu in the left column
*/
DIV.sidemenu
{
}
DIV.sidemenu A
{
	color: #000000;	
	text-decoration: none;
}
DIV.sidemenu A:hover
{
	text-decoration: underline;
}
DIV.sidemenu P
{
	color: #000000;	
}

DIV.sidemenu LI SPAN
{
	display: none;
}

DIV.sidemenu UL.outer 
{
	margin-top: 0.5em;
	margin-left: 0.25em;
	padding-left: 0.25em;
	list-style-type: none;
}


DIV.sidemenu UL.outer LI
{
	margin-top: 0.6em;
}

DIV.sidemenu UL.inner
{
}
	
DIV.sidemenu UL.inner
{
	list-style-type: disc;
}

DIV.sidemenu UL.inner LI
{
	margin-top: 0;
}
DIV.sidemenu LI.parclass
{
}

DIV.sidemenu UL.inner LI.active A
{
	color: #FF0000;
	
}








/* 
	SITEMAPMENU
	===========
	Sitemap Menu as on the Sitmap Page
*/
DIV.sitemapmenu P
{
	color: #000000;	
}
DIV.sitemapmenu A
{
	color: #000000;	
	text-decoration: none;
}
DIV.sitemapmenu A:hover
{
	text-decoration: underline;
}

DIV.sitemapmenu LI SPAN
{
	display: none;
}


DIV.sitemapmenu UL.outer 
{
	margin-top: 0.5em;
	margin-left: 0.25em;
	padding-left: 0.25em;
	list-style-type: none;
}

DIV.sitemapmenu UL.outer LI
{
	margin-top: 0.6em;
}

DIV.sitemapmenu UL.inner
{
}
	
DIV.sitemapmenu UL.inner
{
	list-style-type: none;
}

DIV.sitemapmenu UL.inner LI
{
	margin-top: 0;
}
DIV.sitemapmenu LI.parclass
{
}

DIV.sitemapmenu LI.active A, 
DIV.sitemapmenu LI.active A:link, 
DIV.sitemapmenu LI.active A:visited
{
	color: #000000;	
}





/* 
	Images styling for Modx content
	===============================
*/

DIV.image-right

{
	float: right;
	margin-left: .75em;
	margin-bottom: .75em;
}


DIV.image-left

{
	float:left;
	margin-right: .75em;
	margin-bottom: .75em;
}

.image-left

{
	float:left;
	margin-right: .75em;
	margin-bottom: .75em;
}



/* 
	PROPERTY DETAILS (page)
	================
*/
DIV.propertydetails DIV.rsPageLinks
{
	width: 10px;
}


/* 
	FEATURED PROPERTIES
	===================
*/

DIV.webhighlight 
{
	clear: left;
	font-family: verdana, Sans-Serif;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
DIV.webhighlight DIV.whImage
{
	border: solid 1px black;
	padding: 0;
	margin: 0;
	width: 140px;
	float: left;
	margin-right: 10px;
	/* FireFox 2px gap fix */
	font-size: 0;
	line-height: 0;
}
DIV.webhighlight DIV.whArea
{
	margin-top: 0.5em;
	font-weight: bold;
}
DIV.webhighlight DIV.whPropertyType
{
	font-weight: bold;
}
DIV.webhighlight DIV.whPrice
{
	font-weight: bold;
}
DIV.webhighlight DIV.whPropertyDesc
{
	margin-top: 1em;
	margin-bottom: 0.5em;
}




/* 
	PROPERTY SEARCH BAR
	===================
*/

div#propsearch
{
	background: transparent url(images/search-fade.png) repeat-x left bottom;
	margin-bottom: 1em;
}

div#propsearch div#propsearch-map
{
	border-bottom: solid 1px #F5B0AD;

	font-size: 0;	/* 2px gap below flash in ff bug fix. */
	line-height: 0;
}

div#propsearch div#propsearch-body
{
	padding: 1em;
	padding-top: 0; /* QS Snippet contains a br element for padding. */
	text-align: right !important;
}


/* 
	DARK-RED BLOCK
	===============
	Defines the styles for a dark block with rounded corners.
*/

div.darkred-block-header
{
	background: Red url(images/search-title-fade.png) repeat-x top left;
}
div.darkred-block-header div
{
	background: transparent url(images/darkred-block-topleft.png) no-repeat top left;
}
div.darkred-block-header div div
{
	background: transparent url(images/darkred-block-topright.png) no-repeat top right;
	padding: 1em 0;
}

div.darkred-block-header h1
{
	font-size: 1.3em !important;
	font-weight: bold !important;
	color: White;
	text-align: center;
	margin: 0;
}

div.darkred-block-body
{
	border-left: solid 1px #E6A19F;
	border-right: solid 1px #E6A19F;
}

div.darkred-block-footer
{
	background: transparent url(images/darkred-block-bottom.png) repeat-x bottom;
	margin-bottom: 1em;
}

div.darkred-block-footer div
{
	background: transparent url(images/darkred-block-bottomleft.png) no-repeat bottom left;
}

div.darkred-block-footer div div
{
	background: transparent url(images/darkred-block-bottomright.png) no-repeat bottom right;
	min-height: 8px;
	height: 8px;
}

div.darkred-block-body p.feedback
{
	text-align: left;
	padding-top: 0.5em !important;
}

/* Override inherited styles */
div.qs_l,
div.label
{
	width: auto;
	font-weight: bold;
	text-align: left !important;
}

.qs_d,
.qs_ia,
div#propsearch input#rn
{
	margin: 0.25em 1em !important;
	margin-bottom: 0.5em !important;
	background-color: White !important;
	color: Black !important;
	border: solid 1px black !important;
	width: 184px !important;
}

.qs_ia,
div#propsearch input#rn
{
	width: 180px !important;
}

.qs_button
{
	font-size: 1em !important;
	padding: 0.25em 1em !important;
	margin: 1em !important;
}


/*
 * Generic error class -- initially hidden it is the
 * responsibility of js to hide/unhide the field if necessary
 */
P.feedback
{
	font-weight: bold !important;
	font-size: 1em !important;
	visibility: hidden;
}