/* CSS ATTRIBUTES 
Date       		Version  		Author 			Comments  c0bebf
-----------------------------------------------------------------
08/11/07  		001      		HS     			telereal.com - page layout
-----------------------------------------------------------------
*/


/*********************************************************************/
/******************** container & layout elements ********************/
/*********************************************************************/

#maincontainer { 
	position:relative;
	width: 754px; /*Width of main container*/
	margin: 0 auto; /*Center container on page*/
	margin-top:0.5em;
	margin-bottom:0.5em;
	text-align:left;
	background: #fff;
	border:1em solid #fff;
	border-right:0;
}
html>body #maincontainer { border-right:1px solid #fff;} /* IE ignores this */
#header {
	position:relative;
	/*border-bottom:1em solid #2c4e96;*/
	background:#008bc2;
	height: 75px; /*Height of top section*/
	width:744px;
}
#tabnav {
	width:744px;
	border-bottom:1px solid #fff;
}
#channels {
	width:744px;
	display:block;
}
#contentwrapper {
	float: left;
	width: 744px;
	background:#fff; 
}
#contentcolumn {
	margin: 0 0 0 185px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
	background: #fff;
	border-bottom:1px solid #f9f9f9;
}
#leftside {
	float: left;
	width: 185px; /*Width of left column in pixel*/
	margin-left: -744px; /*Set margin to that of -(MainContainerWidth)*/
	text-align:left;
	display:block;
	border-right:1px solid #fff;
}
#footer {
	clear: both;
	display:block;
	width:744px;
	height:22px;
	background: #008bc2;
	color: #fff;
	font-size:85%;
	border-top:1px solid #fff;
}

/*********************************************************************/
/************************ header & tabnav elements *******************/
/*********************************************************************/

.hide { visibility:hidden;}
.logo { background: url("../images/layout/logo_telerealtrillium.gif") no-repeat top left; float:left; width:135px; height:51px; margin:1em 0 0 0.5em; }
html>body .logo { margin:1em;} /* IE ignores this */

.headerlinks { text-align:right; float:right; color:#fff; font-size:85%; margin:1em 1em 0 0; }
.headerlinks a { color:#fff; position:relative; z-index:1000; }
.headerlinks a:hover { color:#000066; }
.headerlinks ul { list-style:none; float:left; margin-top:0; float:left;}
.headerlinks ul li { float:left;}
.telereallogo { float:left; width:135px; height:51px; }

#flashchannels { width:744px; height:144px;}
.flashbanner { width:744px; height:144px;}
.flashwidget { width:185px; height:67px; }
.getflashhome { position:absolute; bottom:3em; right:1em; }
.getflashcontent { position:absolute; top:25em; right:1em;  }
.getflashcontent_Acrobat { position:absolute; top:28em; right:1em;  }
.getacrobat { position:absolute; top:25em; right:1em;}
	
.searchLeft { float:left;  margin-top:2px; }
.searchRight { float:right;  margin-top:2px; }
.search { width:360px; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; padding:0 0 0 0; }
html>body .search {  padding:0 0 1em 0; } /* IE ignores this */
.searchfield { width:100px; font-family:Tahoma; font-size:90%; background:#fff; border:1px solid #e4e4e4; margin-top:1.5em; padding:0.2em 0 0.2em 0;}
.searchTxtBox { width:125px; font-family:Tahoma; font-size:90%; background:#fff; border:1px solid #e4e4e4; padding:0.2em 0 0.2em 0.2em; }

.searchResults { text-align:left; display:block; vertical-align:top; margin-bottom:1em; clear:both; }
.searchResultsTitle a { font-weight:bold; color:#666; }

.resultsSize { width:360px; background:#f3f3f3; padding:1em 0 1em 0; height:1em; margin-bottom:1em; }
html>body .resultsSize { padding:1em 0 1.5em 0;} /* IE ignores this */
.resultsSizeTubeLeft { float:left; margin-left:0.5em;}
.resultsSizeTubeRight { float:right; width:50px; margin:0 0.5em;}
.resultsSizeDropDown { width:50px; border:1px solid #ccc; font-size:80%; padding:0; margin:0; }

.go { position:relative; top:3px; }

/*********************************************************************/
/************************ leftside elements **************************/
/*********************************************************************/

.leftmenu { }
.leftmenu a {  padding:0.5em;}
.leftmenu a:hover { background:#ccc;display:block;padding:0.5em;}

/*********************************************************************/
/************************ content elements ***************************/
/*********************************************************************/

.breadcrumb {  color:#fff; height:24px; font-size:0.85em; line-height:22px; padding:0 0 0 1em;}
.breadcrumb  a { color:#fff; }
.breadcrumb  a:hover { color:#000066; }

#tab0 .breadcrumb { background:#006495; } /* Default */
#tab1 .breadcrumb { background:#006495; } /* About Us */
#tab2 .breadcrumb { background:#008bc2; } /* Investment */
#tab3 .breadcrumb { background:#00b4e3; } /* People */
#tab4 .breadcrumb { background:#00b7b2; } /* Corporate */
#tab5 .breadcrumb { background:#d70b8c; } /* Property */
#tab6 .breadcrumb { background:#807f83; } /* Contact */

#tab0 #contentwrapper { background:#008bc2; }
#tab1 #contentwrapper { background:#008bc2; }
#tab2 #contentwrapper { background:#008bc2; }
#tab3 #contentwrapper { background:#008bc2; }
#tab4 #contentwrapper { background:#008bc2; }
#tab5 #contentwrapper { background:#008bc2; }
#tab6 #contentwrapper { background:#008bc2; }

.contenttube { margin:1em 1em 4em 1em; }

.sectionTitle { font-size:1.5em; font-weight:bold; margin-left:0.6em;border-bottom:1px solid #ccc; width:100%;}
.pageTitle {  border-bottom:1px solid #a5b0c7; width:360px; margin-bottom:1em;}
.pageSectionImage { border:1px solid #ccc; margin:0 0 1em 1em; text-align:right; float:right; width:150px; }
.pageSectionIcon { float:right; border:1px solid #ccc; width:75px; margin:0 0 1em 1em; } 

.pagebody { width:360px;}

#usefullinks { border:1px solid #eeeeff;float:right; width:160px; position:relative; bottom:3.4em;}
#usefullinks .usefullinkstitle { background:#b3c6d7; color:#fff; font-weight:bold; padding:0.5em;}
#usefullinks .usefullinkstube { margin:0.5em}
#usefullinks ul { list-style-type:square; margin:0; padding-left:1.3em;} 

.fourColumnIconLayout { width:90px; float:left;}
.fourColumnIconLayout img { margin:0 0 1em 0;border:1px solid #ccc; width:75px;}
.fourColumnIconLayout span { width:75px; margin:0 0 2em 0; }

.threeColumnIconLayout { width:120px; float:left;}
.threeColumnIconLayout img { margin:0 0 1em 0;border:1px solid #ccc; width:75px;}
.threeColumnIconLayout span { width:75px; margin:0 0 2em 0; }

.twoColumnIconLayout { width:180px; float:left;}
.twoColumnIconLayout img {  float:left; margin:0 1em 1em 0;border:1px solid #ccc; width:75px;}
.twoColumnIconLayout span { float:left; width:90px; margin:0 0 2em 0; }

.oneColumnIconLayout { width:360px; float:left; margin-bottom:1em; background:#fff; }
.oneColumnIconLayout ul { margin-top:0; }
.oneColumnIconLayout img {  float:right; margin:0 0 0 1em; border:0; border:1px solid #ccc;  width:75px;}
.oneColumnText { float:left; width:267px;}
.oneColumnCaseStudy { float:right; width:70px; }

.row { clear:left; margin:0; padding:0;}

.logoRight { float:right; }
 
.javascriptBtns { display:none;width:360px; position:absolute; bottom:2em; border-top:1px solid #a5b0c7; }
.backtotop ul { float:right; font-size:0.85em; list-style-type:none; margin:0.5em 0 0 0 ; padding:0; margin-bottom:1em;}
.backtotop li { float:right; margin-left:1em;}

.breakoutbox { border:1px solid #e4e4e4;background:#f8f8f8;padding:1em; width:336px; clear:both;}
.icon_content { float:left; margin-right:1em; }
.divider {width:360px; border-top:1px solid #ccc;}
.dividerdotted {width:360px; border-top:1px dotted #ccc;}
html>body .divider { margin:1em 0 1em 0;} /* IE ignores this */
.indent { margin-left:2.5em;}
.display { display:none;}



/*********************************************************************/
/************************ homepage elements **************************/
/*********************************************************************/

#tab0 .box { width: 185px; height:271px; float:left; background: #d2dbe3; color:#666; border-right:1px solid #f3f3f3; }

#tab0 .boxtitle { width: 185px; }

#tab0 .boxtitletube { height:16px; padding:0.5em 0.5em 0.5em 1em; line-height:15px; }
#tab0 .boxtitle a { color:#fff; }
#tab0 .boxtitle a:hover { color:#000066; }

#tab0 #box_widgets { border-right:1px solid #fff; width:185px; height:67px; margin:0; padding:0 }
#tab0 #box_widgets img { width:185px; height:67px; }
#tab0 #box_widgets div { border-bottom:1px solid #fff; }

.widget { width:185px; height:67px;}

#tab0 #box_telereal .boxtitle { background: #006495; }
#tab0 #box_investment .boxtitle { background: #008bc2; }
#tab0 #box_services .boxtitle { background: #00b4e3; }

#tab0 .boxcontent { padding:0em 0 2em 0;background: #fff; }

#tab0 .boxtube { margin:1em 1em 0 1em; }
#tab0 .boxtube ul { list-style:square; color:#000099; margin:1em 0 0 1.5em; padding:0; }

#tab0 .last { width:186px;  border-right:0;}
#tab0 #box_widgets img.last { width:185px;  }

.homenewsimage {  border:1px solid #ccc; margin-left:0.4em; float:right;} 

.channelnews1 { margin-top:0.1em; padding:0.5em 1em 0 1em; }
html>body .channelnews1 { margin-top:0.5em; padding:0.2em 1em 0 1em; }

.channelnews2 { margin-top:0.5em; padding:0.5em 1em 0 1em; }
html>body .channelnews2 { margin-top:0.5em; padding:0.2em 1em 0 1em; }

.homerightside {height:260px; width:500px; margin-left:200px; padding-top:1em;}

/*********************************************************************/
/************************ news elements ******************************/
/*********************************************************************/

.newsDetail {width:150px; border:1px solid #e4e4e4;}
.newslist { }
.newsstory { float:left; margin-bottom:1em;}
.newsstory a { font-weight:bold; color:#666; }
.newsdetail { width:360px;}
.newslistimage { border:1px solid #ccc; width:75px; height:75px; margin-left:1em; float:right;}
.newsdetailimage { margin-left:1em;}


/*********************************************************************/
/************************ property elements **************************/
/*********************************************************************/

.propertyList { float:left;	margin-top:0.5em; }

.propertyRecord { text-align:left; display:block; vertical-align:top; margin-bottom:1em; padding-bottom:3em; clear:both; }
.propertyRecordTitle a { font-weight:bold; color:#666; }

.propertyListDetails {float:left; width:250px;}
.propertyListImg { float:right; width:100px; vertical-align:top; }
.propertyListImg img { margin:0 0 1em 0; border:1px solid #ccc;}

.propertyimage { width:205px; margin:1em 1em 0 1em;  border:1px solid #fff;}
html>body .propertyimage { width:200px; }
.propertyDetailImgContainer { float:right; width:205px; background:#b3c6d7; margin-top: 0.45em;}
html>body .propertyDetailImgContainer { width:225px; }
.thumbDetailImageContainer {  margin:1em; }
.thumbDetailImage {  width:75px; border:1px solid #fff; vertical-align:top; margin-bottom:0.4em;}

.propertyHighlightBox { float:left; width:100px; background:#f3f3f3; padding:1em; margin-top:0.4em;}

.pagination { clear:both;width:360px; height:2em; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; margin-bottom:1em;}
.paginationDetails { width:360px; background:#f3f3f3; padding:0.5em 0 0.5em 0; margin-bottom:1em;}
.paginationDetails span { margin:0.5em }
.propertyDescription { clear:both;width:335px; border:1px solid #fff; padding:1em 1em 0 1em;}
.paginationlefttube { float:left; margin:0.5em 0 0.5em 0; }
.paginationrighttube { float:right;  margin:0.5em 0 0.5em 0;}
.paginationrighttube ul { list-style-type:none; margin:0; padding:0; }
.paginationrighttube ul li { float:left; margin:0 0 0 0.5em; padding:0;}

.wraplink { width: 5em;            /* constrain width try 20em */
    height: 1em;            /* constrain height */
    line-height:1em;        /* to be adjusted */
    overflow: hidden;       /* hide excess */
    position:relative;      /* Fix IE missing overflow bug of r.p. span */
    background: yellow;     /* for demo */
  }
.searchIcon {float:left;}

#tab1 .box { width: 119px; float:left; background: #fff; color:#666; border-right:1px solid #fff; }
#tab1 .boxtitle { width: 119px; color:#fff;}
#tab1 .boxtitletube { height:14px; padding:0.2em 0.5em 0.2em 1em; line-height:12px; }
#tab1 .boxtitle a { color:#fff; }
#tab1 .boxtitle a:hover { color:#000066; }

#tab1 #box_office .boxtitle { background: #b1bebb; }
#tab1 #box_industrial .boxtitle { background: #b1bebb; }
#tab1 #box_retail .boxtitle { background: #b1bebb; }

#tab1 .box img { width:119px;  }

#tab1 .boxtube { margin:1em 1em 0 1em; }
#tab1 .boxtube ul { list-style:square; color:#000099; margin:1em 0 0 1.5em; padding:0; }

ul.planningApps  { margin:1em 0 1em 0 ; padding:0;}
.planningApps li { width:46%; background:#d5e0e9; border-bottom:1px solid #fff; list-style-type:none; padding:0.5em; margin:0; float:left;} 

/*********************************************************************/
/************************ contact elements ***************************/
/*********************************************************************/

#tab5 .box { width: 179px; float:left; background: #fff; color:#666; border-right:1px solid #fff; }
#tab5 .boxtitle { width: 100px; color:#666; font-weight:bold;}
#tab5 .boxtitletube { height:14px; padding:0.2em 0em 0.2em 0em; line-height:12px; }
#tab5 .boxtitle a { color:#fff; }
#tab5 .boxtitle a:hover { color:#000066; }

#tab5 #box_investment { float:left;width: 150px; }
#tab5 #box_services {float:left;width: 130px; margin-left:58px;}
#tab5 #box_office {width:175px;}
#tab5 #box_office .boxtitle { width:175px;background: #ede3d9; }

#tab5 .boxtube { margin:1em 0em 0 0em; }
#tab5 .boxtube ul { list-style:square; color:#000099; margin:1em 0 0 1.5em; padding:0; }

/*********************************************************************/
/************************ form elements ******************************/
/*********************************************************************/

/* All forms in page content areas use the following styles.*/

form.content {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  margin: 0;
  padding: 0;
  min-width: 360px;
  max-width: 360px;
  width: 360px; 
}
form.content fieldset {
  /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border: 1px solid #e4e4e4;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}
form.content fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
    color:#666;                   /* be careful with padding, it'll shift the nice offset on top of border  */
	font-weight:bold;
	padding:0 10px 2px 8px;
}
form.content label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 100px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}
form.content input, form.content textarea, form.content select {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}
form.content input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

form.content textarea { overflow: auto; }
form.content .stdTxtArea { width:200px; }
form small {
	display: block;
	margin: 5px 0 10px 15px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}
form.content .required{
	font-weight:bold; /* uses class instead of div, more efficient */
	color: red;
} 

form.content br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
form.content .radiobtn {
	width:200px;
	position:relative;
	top:2px; 
}
html>body form.content .radiobtn {
	position:relative;
	top:0;
}
.contactform {
	width:360px;
	position:relative;
	left:0;
	clear:left;
}
.propertysearchform {
	width:360px;
	position:relative;
	left:0;
	clear:left;
}
.lanapstdTxtBox {
	float:right;
}
/*********************************************************************/
/************************ footer elements ****************************/
/*********************************************************************/

.footerleft {float:left;margin:0.5em;}
html>body .footerleft {margin:0.5em 0.5em 0.5em 1em;}
.footerright {float:right;margin:0.5em;}
html>body  .footerright {float:right;margin:0.5em 1em 0.5em 0.5em;}
.footerleft ul, .footerright ul { list-style-type:none;margin:0;padding:0;}
.footerleft li, .footerright li { float:left;margin-right:0.5em;}
#footer a { color:#fff; }
#footer a:hover { color:#000066;}

/*********************************************************************/
/************************ bottom elements ****************************/
/*********************************************************************/

a.button {
background: #5b75ae url('../images/buttons/viewdetails.gif') no-repeat top right;
display: block;
float: left;
line-height: 6px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 16px; /* Height of button background height */
padding-left:6px;
text-decoration: none;
}
a:link.button, a:visited.button, a:active.button{
color: #fff; /*button text color*/
}
a.button span {
display: block;
padding: 2px 6px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
margin-bottom:5px;
font-variant:small-caps;
color:#fff;
}
html>body a.button span {padding: 4px 6px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/} /* IE ignores this */
input.button { 
background: #5b75ae url('../images/buttons/viewdetails.gif') no-repeat top right;
float: left;
text-decoration: none; 
font-variant:small-caps;
color:#fff;
border:0;
height:16px;
padding-bottom:4px;
font-size:100%;
cursor:pointer;
}
a.button:hover{  
background: #7999b4;
background-position: bottom left;
}

/*a.button:hover span{  Hover state CSS 
background-position: bottom right;
color: black;
}
*/
/* .buttonwrapper{ Container you can use to surround a CSS button to clear float 
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html 
width: 100%;
}*/

/*********************************************************************/
/************************ miscellaneous ******************************/
/*********************************************************************/

.innertube {
	margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
	margin-top:0;
}

.clear {clear:left;}
.clearright { clear:right;}
.clearboth { clear:both;}
.skiptocontent { float:left;}

.listIcon {margin:1em 1em 1em 0;height:50px;}
.listIconImg {margin-right:1em;border:1px solid #ccc;}
.showHideButtonStyle { cursor: pointer;}
.cursorStyle { cursor: pointer;}
.cursorStyleNotSelectable { cursor: default;}

/*********************************************************************/
/************************ Captcha ************************************/
/*********************************************************************/

#CaptchaDiv {
  margin: 0;
  padding: 0;
  width:300px;
  height:50px;
  padding-bottom: 5px;
}

#CaptchaImage {
  float: left;
  margin: 0;
  padding: 0;
  width:200px;
  height:30px;
  margin-bottom:0.1em;
  margin-left:1em;
}

#CaptchaIcons {
  width: 52px;
  height: 50px;
  float: right;
  text-align: left;
  margin: 0;
  padding: 0;
}

#CodeIncorrectLabel {
  width:100px;
  color: Red;
  margin-left:10em;
  clear:both
}