/*  @ Title: Concep DTZ layout style sheet
	@ Client: DTZ
	@ Author: Ben Copping
	@ Date: 24/01/2009 */

body {
	font: 62.5%/1.5  "helvetica", "arial", Verdana, sans-serif;
	background: #d6d6d6 url('../images/topWrapperBg.jpg') top left repeat-x;
	}

a {color:#ff0033; text-decoration: underline;}
a:hover {color:#009966;}
p {font-size:1.1em;}

/*-- handy margins --*/
.marT-5		{margin-top:5px;}
.marLR-5	{margin:0 5px 0 5px;}
.marT-10	{margin-top:10px;}
.marR-10	{margin-right:10px;}
.marT-15	{margin-top:15px;}
.marT-20	{margin-top:20px;}
.marB-10	{margin-bottom:10px;}
.marB-15	{margin-bottom:15px;}
.marTB-15	{margin-bottom:15px;margin-top:15px;}
.marB-20	{margin-bottom:20px;}
.marB-30	{margin-bottom:30px;}
.marTB-20	{margin-bottom:20px;margin-top:20px;}
.borderB	{border-bottom:1px solid #e2e2e4;}
.borderT	{border-top:1px solid #e2e2e4;}
.borderGrey	{border:1px solid #e2e2e4;}
.fLeft		{float:left;}
.fRight		{float:right;}
.abLeft		{position:absolute; left:0;}
.abRight	{position:absolute;right:0;}
img.borderPad {padding:1px;border:1px solid #ccc;}

/*-- ordered list --*/
ol { list-style-type: decimal; margin:0 0 0 17px; font-weight:bold;}
ol li {margin:15px 0 15px 0;}
ol li span {margin: 0 0 0 -4px;}
ol li ul {font-weight:normal; margin:0 0 0 -16px;}
ol li ul li {margin:0;}

/*-- common list type with arrow icon--*/
ul.iconArrow li a {
	background: url('../images/commonLiBgArrow.gif') 0 1px no-repeat;
	padding: 0 0 0 16px;
	}
	
ul.iconArrowPadded li  {margin: 10px 0 10px 0;}

ul.iAInline li {
	display:inline;
	margin:0 10px 0 0;
	line-height:1em;
	}

ul.iAInline li.last {margin:0;}
	
/*-- common content splitter - dashed horizontal border - dont use height here ie 6 doesnt render the height at 1px but like 20 or something... --*/
.contentSplitter {
	background: url(../images/contentSplitterBg.gif) 0 0 repeat-x;
	padding:1px 0 0 0;
	}	 

/*--common gradient background --*/
.gradientBgFrame {
	margin-top:15px;
	background: url(../images/twoColFormFrameBg.gif) bottom left repeat-x;
	padding:1px;
	}

.gradientBgInner {
	background: #f7f7f7 url(../images/formBg.gif) bottom left repeat-x;
	border:1px solid #FFF;
	padding:12px;
	}
	
/*-- sets our content - center and fix width --*/
.content {
	width: 933px;
	margin: 0 auto;
	position:relative;
	}
	
/*-- sign in panel overlay --*/
#signInPanel {
	position:absolute;
	top:10px;
	left:0;
	z-index:1000;
	width:280px; 
	height:300px;
	}
	
#signInPanel.hidden				{display:none;}
#signInPanel .gradientBgFrame	{margin-top:0;}
#signInPanel .gradientBgInner	{padding:2px 9px 9px 9px}
#signInPanel #sipHeader span	{font-size:1.2em;color:#8c8c8c;}
#signInPanel #sipHeader a.closePop {margin:0}

#signInPanel ul li {
	background: url('../images/liBgArrowWhiteRed.gif') 0 1px no-repeat;
	padding: 0 0 0 16px;
	margin: 3px 0 3px 0;
	}
	
/*-- container for utilities - login - search - text size - rss etc --*/
#utilities {
	height: 50px;
	padding-top:10px;
	background-position: bottom left;
	background-repeat:repeat-x;
	background-image: url('../images/utilitiesBg.gif');
	}

/*-- common utilities and footer navigation --*/
#utilities .welcome span {color:#666;font-size:1.4em;margin-top:4px;display:block;}
#utilities .welcome a {margin:8px 0 0 5px;display:block;}
ul#footerNav a, #utilities a {
	color: #666;
	text-decoration: none;
	}
	
ul#footerNav a:hover, #utilities a:hover {text-decoration: underline;}

ul#footerNav, 
ul#footerNav li,
#utilities ul,
#utilities ul li {
	display: inline;
	position:relative;
	float:left;
	margin: 0px;
	padding: 0px;
	}

ul#footerNav {float:right;}

#utilities ul {
	margin-top:3px;
	margin-left:12px;
	}	

#utilities ul li,
ul#footerNav li {
	background-image: url('../images/commonLiBgGrey.gif');
	background-repeat:repeat-y;	
	background-position: top left;
	height:22px;
	padding: 0px 10px 0px 12px;	
	}

#utilities ul li a{
	display:block;
	padding: 5px 0px 3px 0px;
	}

ul#footerNav li {height:16px;}

ul#footerNav li a {
	display:block;
	padding: 0px 0 8px 0;
	}

#utilities ul li a#decreaseTextSize, 
#utilities ul li a#increaseTextSize {
	display: block;
	height:16px;
	width:16px;
	margin-top:3px;
	background-image: url('../images/decreaseTextGrey.gif');
	background-position: 0 0;
	background-repeat:no-repeat;
	}

#utilities ul li a#increaseTextSize {background-image: url('../images/increaseTextGrey.gif');}

#utilities ul li a#increaseTextSize span,
#utilities ul li a#decreaseTextSize span {
	display:none;
	}

#utilities ul li a#rss,
#utilities ul li a#register,
#utilities ul li a#selectLang  {
	background-image: url('../images/rssBgGrey.gif');
	background-position: top right;
	background-repeat:no-repeat;
	padding-right: 22px;
	}

#utilities ul li a#register		{background-image: url('../images/registerBgGrey.gif');}
#utilities ul li a#selectLang	{background-image: url('../images/langDrop.gif');}

ul#footerNav li.first 	{background-image:none !important}
#utilities ul li.first	{background-image:none;}

#utilities ul li ul {
	position: absolute; 
	z-index:100;
	top: 18px;
	left: 30px;
	display:block;
	width:135px;
	padding: 19px 0 0 0;
	background: url(../images/selectLangBg.png) top left no-repeat;
	}

#utilities ul li ul.hidden {left:-9000px;}

#utilities ul li ul li {
	margin:0;
	padding:0;
	display:block;
	width:135px;
	background: none;
	}	

#utilities ul li ul li a {	
	border-bottom:1px solid #bec1c8;
	border-left:1px solid #bec1c8;
	border-right:1px solid #bec1c8;
	display: block;
	padding: 8px 10px 5px 10px;
	text-decoration: none;
	color:#444b5c;
	font-size:1.1em;
	background: #FFF;
	cursor:pointer;	
	margin:0 0 -1px 0;
	}

#utilities ul li ul li a.odd {background: #f0f0f1;}
	
/*-- container for the main navigation including logo --*/
#mainNav {
	height:100px;
	background: #FFF;
	}
	
/*-- the main dtz logo --*/
#logo {	
	background: url('../images/logo.png') top left no-repeat;
	position: absolute;
	left:15px;
	top:15px;	
	}

#logo h1 {
	margin:0;
	padding:0;
	}

#logo, #logo h1 a {
	position: relative;
	display: block;
	height: 71px;
	width: 56px;
	float: left;
	}

#logo h1 a span {
	position: absolute;
	left:-9000px;
	}

/* The main navigation */
#ulNavContainer {
	display:block;
	height:77px;
	width:859px;
	float:right;
	}

ul#nav {float:right;}

ul#nav, ul#nav li 	{
	display: inline;
	margin: 0px;
	padding: 0px;
	}
	
ul#nav li a {
	text-decoration: none;
	float: left;
	text-align: center;
	padding: 24px 10px 5px 10px;
	color: #444b5c;
	font-size:150%;
	font-weight: lighter;
	border-left:1px solid #dadbde;
	}

ul#nav li a:hover {color: #ff0033;}

div#currentCountry {color: #8f939d;float:right; margin-right:10px; width:300px; text-align:right;}
div#currentCountry a {color: #444b5c; text-decoration:underline;}

/*-- banner area for page image and search tools (site wide) --*/
#banner-tools {
	height:175px;
	background-image: url('../images/bannerToolsBg.jpg');
	background-repeat: no-repeat;
	background-position: 0 0;
	border-bottom: 7px solid #ff283d;
	}
	
#homeKeyMsgs {
	width:455px;
	padding:20px 0 0 0;
	}

#homeKeyMsgs h2 {
	/*--color defined in JS this is SIFR text --*/
	color: #FFF;
	font-size:3em;
	padding:0;
	margin:0 0 0 14px;
	line-height:1.2em;
	}

#homeKeyMsgs p {
	margin:10px 0 0 15px;
	color:#FFF;
	font-size:1.1em;
	}

#searchTools {
	position:relative;
	display:block;
	height:175px;
	width:315px;
	}

#searchTools ul {
	position:relative;
	margin: 0 auto;
	margin-top:22px;
	width: 275px;
	}
		
#searchTools ul li 	{
	display: inline;
	margin: 0px;
	padding: 0px;
	}

#searchTools ul li a {
	text-decoration: none;
	float: left;
	text-align: center;
	padding: 0 12px 0 12px;
	margin: 0 5px 0 0;
	cursor:pointer;
	font-size:1.3em;
	}

#searchTools ul li.first a {padding-left:0;}
#searchTools ul li.last a {padding-right:0;}

#searchTools ul li span.flashContainer,
#searchTools ul li span#propertyFlash  {
	margin: 0 auto;
	}
	
#searchTools ul li a {
	color: #FFF;
	text-decoration: none;
	}

#searchTools ul li a:hover {color:#ff0033;} 

#searchTools ul li a object  {margin-bottom: -30px;}

/*-- the search tools pop up area (find a property etc) --*/
#searchToolsPop {
	display:block;
	width:284px;
	position: absolute;
	z-index:20;
	top:-7px;
	right:0;
	background-color: #FFF;
	background-image: url('../images/searchToolsPopBg.jpg');
	background-repeat:no-repeat;
	background-position: top left;
	border-bottom: 7px solid #ff283d;
	border-left:1px solid #999;
	border-right:1px solid #999;
	padding: 20px 15px 15px 15px;
	color: #444b5c;
	}
	
a.closePop {
	background: url('../images/closePopBg.gif') top right no-repeat;
	font-size:1em;
	color:#666;
	text-transform: uppercase;
	text-decoration:none;
	padding: 0 15px 0 0;
	margin: -10px -5px 0 0;
	cursor:pointer;
	}

#searchToolsPop h4 {
	color: #444b5c;
	font-size:1.6em;
	margin:0 0 5px 0;
	font-weight: lighter
	}

/*-- home page main body container --*/
#bodyHome {
	display:block;
	height:440px;
	position: relative;
	}	

#homeFlash {
	position: absolute;
	z-index: 0;
	}
	
/*-- homepage feature sliding panel (promo areas home page) --*/
.slidingPanel {
	position: absolute;
	z-index:10;
	height: 118px;
	width: 440px;
	display:block;
	border-bottom:1px solid #fe293f;
	background: url('../images/slidingPanelBg.png') top left repeat;
	color: #000;
	}

.spClosed {width:15px;}

/*-- individual sliding panel ids to position correctly on the homepage --*/
#sp1 {top:10px;}
#sp2 {top:139px;}
#sp3 {top:268px;}
/*-- sliding panel image --*/
.spImage {
	display: block;
	float: left;
	padding: 15px;
	width: 62px;
	height: 88px;
	}
/*-- sliding panel text content container --*/	
.spContent {
	display:block;
	float: left;
	width: 325px;
	margin: 12px 0 0 0;
	}
/*-- sliding panel header (styled with sifr see sIFR-screen.css) --*/	
.spContent h3 {
	color:#ff0033;
	font-size:1.3em;
	}
/*-- sliding panel paragraph --*/ 
.spContent p {margin:10px 0; color:#444b5c;}
/*-- open and close links for the sliding panel--*/
a.closeSp, a.openSp {
	display: block;
	height: 112px;
	width:15px;
	float:right;
	background: url('../images/closeSpBg.png') top left no-repeat;
	cursor: pointer;
	}

a.openSp {background: url('../images/openSpBg.png') top left no-repeat;}

a.closeSp span,
a.openSp span {
	display:none;
	}

/*-- inner pages layout --*/
#bodyInnerPages {
	background: #FFF;
	border-bottom:#dedede;
	padding:0 0 20px 0;
	color:#444b5c;
	}
	
/*-- define left column --*/
#lCol {
	float:left;
	width:183px;
	}
	
/*-- define middle column --*/	
#mCol {
	float:left;
	width:405px;
	padding: 15px 15px 15px 15px;
	background: #FFF;
	}
		
/*-- define right column --*/	
#rCol {
	float:left;
	width:300px;
	background: #FFF;
	margin-top:15px;
	}
	
#rColInner {
	border:1px solid #eaeaea;
	}
	
/*-- left column navigation --*/
#lCol ul	{border-right:1px solid #EAEAEA;}
#lCol ul li	{border-bottom:1px solid #EAEAEA; padding:0;}

#lCol ul li a {
	display: block;
	font-weight: bold;
	padding: 12px 15px 9px 15px;
	text-decoration: none;
	color:#444b5c;
	font-size:1.1em;
	}

#lCol ul li ul {border-top:1px solid #EAEAEA; border-right:none;}	
#lCol ul li ul li {border-bottom:none}

#lCol ul li ul li a span {padding-left:10px;}
#lCol ul li a:hover, #lCol ul li.active a, #lCol ul li ul li.active a, #lCol ul li ul li a:hover {color:#ff263f;}
#lCol ul li ul li.active a span, #lCol ul li ul li a:hover span {background: url('../images/lSubNavBg.gif') 0px 4px no-repeat;}

#lCol ul li ul li a {
	background: #F5F5F5; 
	background-image:url('../images/lSubNavBgBorder.gif'); 
	background-position: bottom left;
	background-repeat: repeat-x; 
	padding-left:20px;
	}
	
#lCol ul li ul li.last a {background-image: none;}

/*-- MIDDLE COLUMN STYLES --*/
	
/*-- global breadcrumb trail --*/
span.breadcrumbStart {
	margin-top:-3px;
	color:#7c818d;
	width:70px;
	}
	
ul#breadcrumb {margin:-3px 0 0 0;width:325px;}

ul#breadcrumb li {
	display: inline;
	margin: 0 2px 0 0;
	padding: 0px;
	color:#7c818d;
	}

ul#breadcrumb li a {
	background: url(../images/breadcrumbBg.gif) center right no-repeat;
	padding-right:12px;
	color: #7c818d ;
	}
	
/*-- inner page middle column header (uses sifr)--*/
#mCol h1 {
	font-size:2.5em;
	margin: 8px 0 0 0;
	height:40px;
	}
	
#mCol h2 {
	font-size: 1.6em;
	color:#ff0033;
	margin: -5px 0 -5px 0;
	}
	
#mCol h3 {
	font-size: 1.4em;
	color:#ff0033;
	margin: 0;
	}
	
#mCol p {margin: 10px 0 10px 0;}

/*-- search results with image --*/
#mCol .searchResult	{padding: 6px 0 6px 0;}
#mCol .srLast 		{padding:15px 0 30px 0;}
#mCol .searchResult .srImage img {
	margin-top:5px;
	padding:1px;
	border:1px solid #CCC;
	}

/*-- search result - the image --*/
#mCol .searchResult .srImage {
	display: block;
	float: left;
	width:130px;
	}
	
/*-- search result - the copy --*/	
#mCol .searchResult .srCopy {
	display:block;
	float: left;
	width: 275px;
	}
	
#mCol .searchResult .srCopy p {margin: 5px 0 5px 0;}

/*-- plain text search results --*/
#mCol .searchResultText {
	background: url(../images/contentSplitterBg.gif) bottom left repeat-x;
	padding:15px 0 15px 0;
	}
	
#mCol .searchResultText p { margin:0 0 5px 0;}

/*-- item detail image and copy - image on the left--*/
#mCol .itemDetailImgLeft {padding:12px 0 0 0;width:183px;}
#mCol .itemDetailImgCopyRight {width:222px;}
/*-- image on the right --*/
#mCol .itemDetailImgRight {padding:12px 0 0 0px;width:163px;}
#mCol .itemDetailImgCopyLeft {width:230px;padding-right:10px;}
/*-- contact detail image and copy --*/
#mCol .contactDetailImg {margin-right:15px;display:block;overflow:hidden;}
#mCol .contactDetailImg img {}
#mCol .contactDetailCopy {width:195px;}
#mCol .contactDetailCopy p{margin:0 0 10px 0;}
ul.contactDetails {margin-top:-10px;}
ul.contactDetails li span {width:75px;display:block; float:left;}

/*-- gradiented border for the pagination --*/
.paginationFrame {
	margin: 10px 0 10px 0;
	height:25px;
	padding:1px;
	background: url(../images/paginationFrameBg.gif) top left repeat-x;
	}
	
/*-- inner gradient for the pagination --*/
.paginationInner {
	position:relative;
	display:block;
	height:15px;
	background: url(../images/paginationInnerBg.gif) top left repeat-x;
	padding:5px;
	}

/*-- the carousel - common page element --*/
#carousel {
	margin-top:15px;
	width:406px;
	height:215px;
	display: block;
	overflow:hidden;
	}
	
#carouselInner {
	height:214px;
	width:800px;
	}
	
/*-- carContentFrame (carousel) --*/
#carousel .carContentFrame {
	margin-right:8px;
	float:left;
	}
#carousel .carContentFrame img {
	border:1px solid #CCC;
	padding:1px;
}
#carousel .carContent {
	width:112px;
	padding: 8px;
	border-left:1px solid #c2c2c2;
	border-right:1px solid #c2c2c2;
	border-bottom:1px solid #c2c2c2;
	background:#ebebeb;
	}
#carousel .carContent p {margin:0px;}

#carousel .carContentFrame a.more {
	display:block;
	border-left:1px solid #c2c2c2;
	border-right:1px solid #c2c2c2;
	border-bottom:1px solid #c2c2c2;
	color:#343434;
	background: url(../images/moreArrow.gif) top right no-repeat;
	text-decoration:none;
	padding:5px 5px 5px 7px;
}

/*-- RIGHT COLUMN inner styles --*/
#rColInner .rColContent {padding: 15px;}
	
/*-- right column header --*/
#rColInner h3 {
	font-size:1.6em;
	margin:0 0 5px 0;
	line-height:1em;
	}
/*-- associated page contacts --*/	
#rColInner .contactPanel		{margin: 20px 0 0 0}
#rColInner .contactPanel img	{margin-right:10px;}
/*-- office map and address --*/
#rColInner .contactUsPanel		{margin: 15px 0 0 0;}
#rColInner .contactUsPanel img	{margin-right:15px;padding:1px;border:1px solid #afafaf;}

#rColInner .contentSplitter {
	margin-left:15px;
	margin-right:15px;
	}

/*-- our page actions lists (diggit etc) --*/
ul.pageActions {
	float: left;
	width: 120px;
	margin-top:5px;
	}
	
ul.pageActionsSecond {width: 140px;}

ul.pageActions li {margin: 13px 0 12px 0;}
	
ul.pageActions li a {
	background-image: url('../images/pageActionBg.gif');
	background-repeat: no-repeat;
	background-position: 0 0;
	padding: 5px 0 5px 21px;
	}
	
/*-- our custom backgrounds for each of the page actions --*/
ul.pageActions li a#diggThis	{background-image: url('../images/diggThisIco.gif');padding: 5px 0 5px 25px;}
ul.pageActions li a#delicious	{background-image: url('../images/deliciousIco.gif');padding: 5px 0 5px 25px;}
ul.pageActions li a#stumbleUpon	{background-image: url('../images/stumbleUponIco.gif');padding: 5px 0 5px 25px;}
ul.pageActions li a#reddit		{background-image: url('../images/redditIco.gif');padding: 5px 0 5px 25px;}

/*-- footerNav container --*/
#footer {
	height:30px;
	font-family: arial;
	background-image: url('../images/footerBg.gif');
	background-repeat: repeat-x;
	background-position: top left;
	padding-top:25px;
	color: #666;
	position: relative;
	}