/**============================================================================================================*/

/** Standardised body and content styling */
body {
	color: #2f2f2f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 81.25% /* 13px */;
	line-height: 1.385 /* 18px */;
}

/** Page-centred body container */
div#body {
	margin: 0 auto;
	padding-bottom: 40px;
	width: 964px;
}


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

/** Standard hyperlink style is blue and underlined */
a {color: #4689b1; text-decoration: underline;}
a:hover {color: #e72b1f; text-decoration: underline;}

/** Standard <h1> style is serif text followed by a thick grey rule */
h1 {
	border-bottom: 8px solid #ececec;
	font-family: "Times New Roman", Times, serif;
	font-size: 353.8% /* 46px */;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: 8px;
	padding: 10px 0 13px 0;
}

/** Comment */
h1.shrunk {
	font-size: 276.9% /* 36px */;
	padding-bottom: 16px;
	padding-top: 18px;
}

/** Standard <h2> is bold and slightly enlarged */
h2 {
	color: #2f2f2f;
	font-size: 138.5% /* 18px */;
	font-weight: bold;
}

/** Standard <h3> is slightly enlarged */
h3 {
	color: #2f2f2f;
	font-size: 138.5% /* 18px */;
	font-weight: normal;
}

/** Standard blockquote styling is large and blue */
blockquote {
	color: #4689b1; 
	font-size: 115.4% /* 15px */; 
}


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

/** Shortcut to add a slightly darker background shade to an element */
.shadedBack {background-color: #ececec;}
.shadedBack-Padded {padding: 12px;}

/** Shortcut to add a dark gradient background to an element */
.ribbonBack {
	background: #202a34 url(/images/bg/ribbon.png) 0 0 repeat-x;
	color: #ececec;
}


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

/** Common styling between layout grid-columns  */
.layoutGrid111, .layoutGrid100, .layoutGrid011, .layoutGrid010, .layoutGrid001 {
	float: left; 
	position: relative;
}

/** Set the specific width of each grid-column */
.layoutGrid111 {width: 964px;}
.layoutGrid100 {width: 203px;}
.layoutGrid011 {width: 761px;}
.layoutGrid010 {width: 552px;}
.layoutGrid001 {width: 209px;}

/** Allow absolute positioning for grid-columns */
.layoutGridBottom {position: absolute; bottom: 0;}
.layoutGridLeft {position: absolute; left: 0;}
.layoutGridRight {position: absolute; right: 0;}
.layoutGridTop {position: absolute; top: 0;}

/** Comment */
.layoutGridSpace {padding-bottom: 20px;}

/** Horizontal padding to be applied to grid-columns */
.layoutGrid011 .layoutGridPad-H {padding-left: 32px; padding-right: 0;}
.layoutGrid010 .layoutGridPad-H {padding-left: 32px; padding-right: 32px;}
.layoutGrid111 .layoutGridPad-H {padding-left: 32px; padding-right: 0;}

/** Vertical padding to be applied to grid-columns */
.layoutGrid011 .layoutGridPad-V {padding-bottom: 0; padding-top: 14px;}
.layoutGrid010 .layoutGridPad-V {padding-bottom: 0; padding-top: 14px;}
.layoutGrid111 .layoutGridPad-V {padding-bottom: 0; padding-top: 14px;}



/**============================================================================================================*/

/** Specific styling the for the page header bar */
#layoutHeader {
	background-color: #1f2a34; 
	color: #fff; 
	line-height: 1.2;
	z-index: 9999 /* IE fix */;
}
#layoutHeader div.homeLine {
	font-size: 123.1% /* 16px */;
	font-weight: normal;
	height: 44px;
	padding: 8px 23px 0 0;
}
#layoutHeader div.homeLine big {
	float: right;
	padding: 7px 12px 0 0;
}
#layoutHeader div.homeLine a.block {float: right;}


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

/** Specific styling for the header news-ticker area */
#layoutNewsTicker {
	background: #111b26 url(/images/bg/newsticker.png) 0 0 no-repeat; 
	color: #b7e7ff;
	font-size: 107.7% /* 14px */;
	height: 30px;
	margin-left: 24px;
	overflow: hidden;
	width: 715px;
}

/** Specific styling for the news-ticker textbox */
#layoutNewsTicker p {padding: 6px 8px;}

/** Specific styling for the news-ticker left-hand bulletpoint */
#layoutNewsTicker p img {margin-bottom: -2px;}

/** Specific styling for hyperlinks in news-ticker */
#layoutNewsTicker a {color: #b7e7ff; text-decoration: none;}
#layoutNewsTicker a:hover {color: #b7e7ff; text-decoration: underline;}


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

/** Specific styling for the main mega-menu */
#layoutMegaMenu {
	clear: both /* IE fix */;
	display: none;
	height: 267px;
	position: absolute; 
	overflow: hidden;
	top: 100%;
}
#layoutMegaMenu div.megaMenu {
	position: absolute;
	bottom: 0;
	width: 100%;
}


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

/** Specific styling for branch-list text in left-hand channel */
#layoutSideChan div.branchList {font-weight: bold; padding: 18px 8px 22px 9px;}

/** Comment */
#layoutSideChan .shadedBack {
	background-image: url(/images/bg/search_tail.png);
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

/** Comment */
#layoutSideChan .propSearch div.radios {
	float: left;
	font-size: 92.3% /* 12px */;
	font-weight: bold;
	line-height: 1.15;
	padding: 8px 0;
}
#layoutSideChan .propSearch div.radios-Sale {
	padding-left: 9px;
	width: 82px;
}
#layoutSideChan .propSearch div.radios-Type {
	background: url(/images/bg/search_divide.png) no-repeat 0 50%;
	padding-left: 6px;
	width: 106px;
}

/** Comment */
#layoutSideChan .propSearch div.postcode {
	background: url(/images/bg/search_input.png) no-repeat 50% 0;
	clear: both;
	height: 31px;
	padding: 7px 0 0 16px;
}
.propSearch div.postcode input {
	border-color: transparent;
	border-width: 0;
	color: #222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 2px;
	width: 166px;
}

/** Specific styling for branch-finder image in left-hand channel */
#layoutSideChan div.branchFinder a.block {border: 1px solid #dbdbdb;}


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

/** Specific styling for "Free Valuation Request" quickform in right-hand channel */
#freeValRequest {
	background-image: url(/images/icons/house_red_pound.png);
	background-position: 12px 10px;
	background-repeat: no-repeat;
	margin-bottom: 20px;
}
#freeValRequest h3 {
	font-size: 115.4% /* 15px */;
	line-height: 1.15;
	padding: 0 0 0 22px;
}
#freeValRequest h3 strong {
	color: #e72b1f;
	font-weight: normal;
	text-transform: uppercase;
}
#freeValRequest p.question {
	font-size: 92.3% /* 12px */;
	font-weight: bold;
	padding: 3px 0 9px 0;
}


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

/** Specific styling for "loading" content inside GoogleMap container */
#googleMap div.copy {padding: 8px 20px;}

/** Specific styling of anchors within Google Map */
#googleMap a, 
#googleMap a:hover {color: #00f;}


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

/** Specific styling for the footer sitemap area */
#layoutSiteLinks {padding-top: 16px;}
#layoutSiteLinks .headedPanel {
	float: left;
	padding-right: 10px;
	width: 215px;
}


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

/** Specific styling for the tailing footer area */
#layoutFooter {
	color: #5d646b;
	font-size: 84.6% /* 11px */;
	line-height: 1.5;
	padding-top: 12px;
}
#layoutFooter a {color: #5d646b; text-decoration: none;}
#layoutFooter a:hover {color: #e72b1f; text-decoration: underline;}

#layoutFooter a.block {
	display: inline;
	float: right; 
	margin-left: 18px;
}



/**============================================================================================================*/

/** List styling for the horizontal main menu at top of page */
ul.mainMenu {
	background: #d7d7d7 url(/images/bg/mainmenu.png) 0 100% repeat-x;
	float: left;
	height: 41px;
	width: 100%;
}

/** List element styling for the main menu */
ul.mainMenu li {
	display: block;
	float: left;
	height: 41px;
}

/** Block-level hyperlink styling for main menu */
ul.mainMenu li a {
	color: #fff;
	display: block;
	float: left;
	font-size: 107.7% /* 14px */;
	font-weight: bold;
	height: 30px;
	line-height: 1.2;
	padding: 11px 32px 0 32px;
	text-decoration: none;
}
ul.mainMenu li a:hover {color: #fff; text-decoration: none;}

/** Hyperlink style for the currently selected item */
ul.mainMenu li.selected a {color: #000;}

/** Hyperlink style on mouse hover */
ul.mainMenu li a:hover {text-decoration: none;}



/**============================================================================================================*/

/** Mega-menu dropdown container */
div.megaMenu {
	background: #fff url(/images/bg/megamenu.png) 0 0 repeat-x;
	color: #2f2f2f;
	font-weight: bold;
	height: 267px;
	overflow: hidden;
}

/** Mega-menu 1/3-width column styling */
div.megaMenu div.megaColumn {
	background: transparent url(/images/bg/megamenu_divide.png) 0 0 no-repeat;
	float: left;
	height: 240px;
	overflow: hidden;
	padding: 17px 23px 10px 32px;
	width: 190px;
}
div.megaMenu div.megaColumn-Double {width: 435px;}

/** Give first mega-menu column a different divider image */
div.megaMenu div.megaColumn:first-child {
	background-image: url(/images/bg/megamenu_divide_first.png);
}

/** Red-coloured mega-menu heading styles */
div.megaMenu .megaHeading {
	background: transparent url(/images/bullets/arrow_small_red.png) 0 0.45em no-repeat;
	color: #e72b1f;
	cursor: default;
	display: block;
	font-size: 100%;
	font-weight: bold;
	padding: 0 0 7px 7px;
}
div.megaMenu .megaHeading a {color: #e72b1f; text-decoration: none;}
div.megaMenu .megaHeading a:hover {color: #e72b1f; text-decoration: underline;}

/** Paragraphs and other padded mega-menu containers */
div.megaMenu .megaCopy, 
div.megaMenu p {padding: 0 0 11px 7px;}
div.megaMenu p {font-size: 84.6% /* 11px */;}



/**============================================================================================================*/

/** Comment */
.arrowMenu {
	font-size: 92.3% /* 12px */;
	line-height: 1.5 /* 18px */;
}

/** Comment */
table.arrowMenu tr,
ul.arrowMenu li {background: transparent url(/images/bullets/arrow_small_light.png) 0 0.5em no-repeat;}
ul.arrowMenu li {padding: 0 0 0 0.7em;}

/** Comment */
table.arrowMenu tr th,
table.arrowMenu tr td {
	padding: 0 0 0 24px;
	text-align: left;
}
table.arrowMenu tr th:first-child,
table.arrowMenu tr td:first-child {padding-left: 0.7em;}


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

/** Comment */
ul.arrowMenu-Ribbon li {
	background-image: url(/images/bullets/arrow_small_dark.png);
	background-position: 0 0.75em;
}
ul.arrowMenu-Ribbon li a {
	color: #ececec;
	display: block;
	padding-bottom: 3px;
	padding-top: 3px;
	text-decoration: none;
}
ul.arrowMenu-Ribbon li a:hover {
	color: #e72b1f;
}

/** Comment */
ul.arrowMenu-Ribbon li.selected a {
	color: #72cfec;
}
ul.arrowMenu-Ribbon li.selected a:hover {
	color: #e72b1f;
}



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

/** Comment */
ul.arrowMenu-SiteNav {padding: 12px 15px 18px 17px;}


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

/** Comment */
.arrowMenu-MultiLine {line-height: 1.385 /* 18px */;}
ul.arrowMenu-MultiLine li, 
table.arrowMenu-MultiLine tr th, 
table.arrowMenu-MultiLine tr td {padding-bottom: 4px;}


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

/** Comment */
.arrowMenu-BlockLinks a {display: block; text-decoration: none;}



/**============================================================================================================*/

/** Comment */
.headedPanel {padding-bottom: 20px;}
.headedPanel h3 {padding-bottom: 4px;}


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

/** Comment */
.headedPanel-Floated {
	float: left;
	padding-right: 10px;
	width: 215px;
}


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

/** Comment */
.headedPanel-Shrunk {
	font-size: 92.3% /* 12px */;
}

/** Comment */
.headedPanel-Shrunk h3 {
	font-size: 100.0% /* 12px */;
	font-weight: bold;
}


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

/** Comment */
.headedPanel-Promotion .frame {
	float: left;
	margin-top: 6px;
}
.headedPanel-Promotion .frame a {float: left;}
.headedPanel-Promotion .frame img {float: left;}

/** Comment */
.headedPanel-Promotion p {
	clear: both;
	padding-left: 4px;
	padding-top: 2px;
}
.headedPanel-Promotion p.price {
	font-size: 107.7% /* 14px */;
	font-weight: bold;
	color: #e72b1f;
}
.headedPanel-Promotion p.address {font-size: 92.3% /* 12px */;}

/** Comment */
.headedPanel-Promotion .frame + p {padding-top: 6px;}
.headedPanel-Promotion p:last-child {padding-bottom: 6px;}



/**============================================================================================================*/

/** Copy-text container and heading */
.copy {line-height: 1.615 /* 21px */;}
.copy h2 {margin: 4px 0 8px 0;}

/** Copy-text grouping/paragraph elements */
.copy p, 
.copy ul, 
.copy ol, 
.copy div.copyGroup, 
.copy blockquote,
.copy address {margin: 8px 0 16px 0;}

/** Comment */
.copy ol {padding-left: 20px; list-style-type: decimal;}
.copy ul {padding-left: 20px; list-style-type: disc;}
.copy ol li {padding: 1px 0; list-style-type: decimal;}
.copy ul li {padding: 1px 0; list-style-type: disc;}

/** Copy-text intro block is bolded */
.copy address,
.copy div.copyGroup-Intro {font-weight: bold;}

/** Comment */
.copy div.copyGroup-Buttons {height: 25px;}
.copy div.copyGroup-Buttons a.button {
	float: left;
	margin-right: 8px;
}



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

/** Enlarged copy-text works well in the absence of a preceding <h1> tag */
.copy-Enlarged h2 {
	font-size: 176.9% /* 23px */;
	margin-top: 8px;
}


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

/** This copy-text replaces the intro section with a small information line (e.g. news posted date) */
.copy-WithDate h2 {margin-bottom: 0;}
.copy-WithDate div.copyGroup-Intro {
	color: #777;
	font-size: 84.6% /* 11px */;
	font-weight: bold;
	line-height: 1.15;
	margin-top: 0;
}


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

/** Comment */
.copy-Contact {line-height: 1.384;}
.copy-Contact h2 {padding: 4px 0;}
.copy-Contact div.copyGroup-Intro {font-size: 107.7% /* 14px */;}


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

/** Comment */
.copy-Property {}
.copy-Property h2 em {
	color: #e72b1f;
	font-size: 116.7%;
	font-style: normal;
}
.copy-Property address {font-size: 107.7% /* 14px */;}


/** Comment */
.copy-Property div.soldSTC {
	background: #e72b1f;
	color: #fff;
	cursor: default;
	font-size: 138.46% /* 18px */;
	font-weight: bold;
	margin: 13px 0 10px 0;
	padding: 2px;
	text-align: center;
	width: 16.0em;
}



/**============================================================================================================*/

/** A ribbonbar is a large image with overlaid text */
div.ribbonBar {
	background-position: 0 0; 
	color: #fff; 
	font-size: 153.8% /* 20px */;
	text-shadow: #333 1px 1px 1px;
}

/** Ribbonbar inner padding */
div.ribbonBar p {padding: 35px 0 80px 65px;}

/** First line of ribbonbar content is enlarged */
div.ribbonBar p strong {
	display: block; 
	font-size: 180% /* 36px */;
}

/** Ribbonbar anchor styling */
div.ribbonBar a {color: #fff; text-decoration: underline;}
div.ribbonBar a:hover {color: #e72b1f; text-decoration: underline;}



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

/** Ribbonbar on homepage has a specific height */
div.ribbonBar-Home {height: 305px;}



/**============================================================================================================*/

/** Styling of testimonial quote */
div.quote {margin-bottom: 20px;}

/** Testimonial quote may be followed by an emphasised label */
div.quote label {
	color: #2f2f2f;
	cursor: default;
	display: block;
	font-style: italic;
	font-weight: bold;
	margin-top: 10px;
}



/**============================================================================================================*/

/** Pipe-separated list styling */
ul.pipeList {}
ul.pipeList li {
	background: url(/images/blank.gif) no-repeat 7px 50%;
	display: inline;
	padding-left: 16px;
}
ul.pipeList li:first-child {background-image: none;}


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

/** Subnav pipe-separated menu is smaller and entirely inline */
ul.pipeList-Subnav {display: inline;}
ul.pipeList-Subnav li {
	background-image: url(/images/bullets/pipe_small_grey.png);
	padding-left: 16px;
}
ul.pipeList-Subnav li:first-child {background-image: url(/images/bullets/pipe_small_grey.png);}


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

/** Comment */
ul.pipeList-Pagenav {
	float: right;
	font-size: 16px;
	padding-right: 2px;
	padding-top: 14px;
}
ul.pipeList-Pagenav li {
	background-image: url(/images/bullets/pipe_small_grey.png);
	background-position: 5px 60%;
	padding-left: 12px;
}
ul.pipeList-Pagenav li a {
	padding: 0 2px;
	text-decoration: none;
}
ul.pipeList-Pagenav li a:hover {text-decoration: underline;}



/**============================================================================================================*/

/** Comment */
.frame {
	border: 1px solid #cdcdcd;
	display: block;
	padding: 2px;
}


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

/** Comment */
.frame-Left {
	display: inline;
	float: left;
	margin-bottom: 12px;
	margin-right: 15px;
}


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

/** Comment */
.frame-Right {
	display: inline;
	float: right;
	margin-bottom: 12px;
	margin-left: 15px;
}



/**============================================================================================================*/

/** Comment */
div.tiles {
	clear: both;
	float: left;
}
div.tiles div.tile {
	border: 1px solid #cdcdcd;
	float: left;
	padding: 7px 9px;
}


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

/** Comment */
div.tiles-Properties div.tile {
	font-size: 84.6% /* 11px */;
	line-height: 1.273;
	margin: 16px 0 0 18px;
	width: 211px;
}
div.tiles-Properties div.tile-StartRow {margin-left: 0;}
div.tiles-Properties div.tile > div {
	padding-left: 2px; 
	padding-right: 2px;
}

/** Comment */
div.tiles-Properties div.tile div {margin-bottom: 7px;}
div.tiles-Properties div.tile div em {
	color: #e72b1f;
	font-style: normal;
}

/** Comment */
div.tiles-Properties div.tile div.photo {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 1px solid #cdcdcd;
	margin: 2px 0;
	padding: 1px;
}
div.tiles-Properties div.tile div.photo a {
	border-width: 0;
	color: #fff;
	display: block;
	font-weight: bold;
	height: 144px;
	padding: 2px;
	text-decoration: none;
	width: 203px;
}
div.tiles-Properties div.tile div.photo a span {
	background: #000;
	color: #fff;
	cursor: pointer;
	display: none;
	float: right;
	padding: 0 2px 3px 5px;
}
div.tiles-Properties div.tile div.photo a:hover {
	border: 2px solid #000;
	padding: 0;
}
div.tiles-Properties div.tile div.photo a:hover span {
	display: block;
}

/** Comment */
div.tiles-Properties div.tile div.price {
	color: #4689b1; 
	color: #000; 
	
	font-weight: bold; 
	margin: 6px 0;
	width: 207px;
}

/** Comment */
div.tiles-Properties div.tile div.pipeLinks {
	color: #000; 
	margin-bottom: 2px;
	margin-top: 8px; 
}

div.tiles-Properties div.tile div.soldSTC {
	background: #e72b1f;
	color: #fff;
	cursor: default;
	float: right;
	font-weight: bold;
	margin-top: 2px;
	padding: 2px 3px;
}



/**============================================================================================================*/

/** Comment */
.functionBar {
	font-weight: bold;
	padding: 7px 10px;
}
.functionBar .item {
	float: right;
	font-weight: normal;
	padding-left: 24px;
}

/** Comment */
.functionBar form {float: right;}
.functionBar form .item {float: left;}


/**============================================================================================================*/

/** Comment */
ul.pagination {
	float: right;
}
ul.pagination li {
	float: left;
	font-weight: bold;
	padding-left: 6px;
}

/** Comment */
ul.pagination li a {padding: 0 2px;}
ul.pagination li.selected a {color: #e72b1f;}
ul.pagination li.selected a:hover {color: #a50000;}

/** Comment */
ul.pagination li.selected a.button-Tiny {background-image: url(/images/buttons/turquoise_tiny.png);}



/**============================================================================================================*/

/** Comment */
ul.gallery {}
ul.gallery li {}
ul.gallery li a.frame:hover {
	border: 2px solid #000;
	padding: 1px;
}
ul.gallery li a.frame:focus {outline: none;}


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

/** Comment */
ul.gallery-StackRight {float: right; margin-left: 24px;}
ul.gallery-StackRight li {padding-bottom: 8px;}
ul.gallery-StackRight li a.frame {width: 180px;}
ul.gallery-StackRight li a.frame img {}