/*
body { background:url(../images/pageBg.png) repeat-x top white; margin:0; font-family:Arial, sans-serif; }
*/

body {  background:url(../images/background_luxuryproperty.jpeg) 50% 0 no-repeat fixed;  margin:0; font-family:Arial;   }

.toph2 { font-size:12px;  font-weight:bold; color:#ffd700; margin:0 0 6px 0; padding:0; background-color:#191919; padding:2px; border-width:1px; border-color:#cccccc; border-style:none; letter-spacing:1px; background: url('../../images/tlo_menu.png') repeat-x; }


div.overallWrapper { text-align:center; width:966px; margin:auto auto; min-height:400px; }
div.leftColumn, div.bodyWrapper, div.rightColumn { text-align:left; }

div.outerBodyWrapper { background:url(../images/outerBodyWrapperBg.png) repeat-y;  }
#homepage div.outerBodyWrapper { background:url(../images/outerBodyWrapperBg.png) repeat-y; }
div.bodyWrapper { clear:both; background:#111111; padding:6px 7px 0 7px; }
div.outerBodyWrapperBottom { background:url(../images/outerBodyWrapperBottomBg.png) no-repeat; height:8px; }


.leftColumn { width:232px; float:left; background:none; }
.middleColumnTop { width:488px; float:left; }
.middleColumnTop2 { width:700px; float:left; }
.rightColumn { float:left; width:232px; padding-top:0; background:none; border-bottom:none; }
.middleColumnBottom { width:720px; float:left; } /* this is below rightColumn in the HTML */

.doubleWideColumn {  }



/* 240 px pieces */
.top240, .bottom240 { width:232px; height:4px; }
.middle240 { width:208px; } /* the padding below makes this one total 232px */
.top240 { background:#111111; }
.bottom240 { background:url(../images/bottom240.png) no-repeat; }
.middle240 { background:url(../images/middle240.png) repeat-y; padding:8px 12px 8px 12px; }
.middle240 .hr { line-height:0; font-size:0; height:1px; background-color:#111111; clear:both;  }


/* 480 px pieces */
.top480, .bottom480 { width:488px; height:4px; }
.top4802, .bottom4802 { width:700px; height:4px; }
.middle480 { width:488px; } /* the padding below makes this one total 488px */
.top480 { background:#111111;  }
.top4802 { background:#111111;  }

.bottom480 { background:url(../images/bottom480.png) no-repeat; }
.middle480 { background:url(../images/middle480.png) repeat-y; padding:8px 12px 12px 12px; width:464px; }
.middle4802 { background:#fff; padding:8px 12px 12px 12px; width:692px; }




/* 720 pieces */
.top720, .bottom720 { width:720px; height:4px; }
.middle720 { width:712px; height:700px;  } /* the padding below makes this one total 488px */
.top720 { background:url(../images/top720.png) no-repeat; }
.bottom720 { background:url(../images/bottom720.png) no-repeat; }
.middle720 { background:url(../images/middle720.png) repeat-y; padding:8px 4px 0 4px; } /* has just 4px left/right padding b/c padding is below in middle720column */


/* these are the 4 cols that make up 'Full Serve | Reference System | $2500 Rental ...' */
.middle720column { float:left; width:146px; margin:0 0 10px 0; padding:6px 14px 8px 12px; text-align:center; } /* there's more right padding than left so spacing is even despite 2px border-right */
.middle720columnDivider { float:left; width:2px; margin:0 0 10px 0; padding:6px 0 8px 0; background:#111111; height:131px; }
.middle720column img { margin:10px 0 10px 0; } /* there's an ie hack for this */
.fullServiceSection .middle720column:hover { background:#111111; cursor:pointer; }


/* for the 4 icons */
.icon { width:60px; height:55px; margin:10px auto; display:block; }
.pad { background:url(../images/icons/pad.png) no-repeat; }
.check { background:url(../images/icons/check.png) no-repeat; }
.lock { background:url(../images/icons/lock.png) no-repeat; }
.world { background:url(../images/icons/world.png) no-repeat; }
/* ie 6 hack */
* html .pad { background:url(../images/icons/pad-whiteBg.png) no-repeat; }
* html .check { background:url(../images/icons/check-whiteBg.png) no-repeat; }
* html .lock { background:url(../images/icons/lock-whiteBg.png) no-repeat; }
* html .world { background:url(../images/icons/world-whiteBg.png) no-repeat; }





.middle720 .first { margin-left:9px; }

.temp { background:url(../images/temp.jpg) no-repeat; width:720px; height:340px; }




/* ---------- typography ---------- */


/* general rules*/
p, h2, h4, ul, ol, li { margin:0; padding:0;  }


/* 11px paragraph font */
.featuredProperty a, .recentListings p, .searchTextInput { font-size:11px; }
.notetextarea { font-size:11px; font-family:Arial, sans-serif; }


/* 12px paragraph font */
p, td, li, form, .middle480 a, .rightColumn, .logInTextInput, select { font-size:12px; }
p, td, li, form { color:#423423; line-height:14px; } /* line-height just to make safari pc behave -- it changes nothing on the other browsers */
.middle480 p, .middle480 ul, .middle480 ol, .middle716 p, .middle716 ul, .middle716 ol { padding-bottom:11px; }
.propertyDetails .middle240 p { padding-bottom:6px; }


/* 12px header font */
h2, h4, .mastheadTopRight, .mastheadBottomRight { font-size:12px; font-weight:normal;  }
h2, h4 { color:#000000; font-weight:bold;  }
h2 { margin:0 0 6px 0; padding:0;  } /* come back to this ... looks better w/ line-height of 1em or 14px, but poorly cross-browsers */
.recentListingMenuChild h4 { text-transform:uppercase; }
.middle480 h2 { margin:0 0 11px 0; }
.middle720 h2 { margin:0 8px 6px 8px; }


/* lists */
ul, ol { margin-left:30px; }


/* special pieces */
.top { text-align:center; padding-top:8px; }



/* ---------- links ---------- */


a { color:#222; text-decoration:none; outline:none; } /* outline:none removes dotted lines around clicked links in ffox */
a:hover { text-decoration:underline; color:#000000; }
a:focus {  } /* remove dotted line around clicked links in ffox */
.mastheadTopRight a:hover { color:#000000; }
.smallLink { margin-top:6px; } /* these are the "Advanced Search >>" style links*/
.rightAligned { text-align:right; }




/* ---------- common ---------- */


.clear { clear:both; height:0; line-height:0; font-size:0; }

img.left { float:left; margin:0 14px 14px 0; }
img.right { float:right; margin:0 0 14px 14px; }




/* ---------- forms ---------- */


form { margin:6px 0 0 0; }
.logInForm {  } /* there's a hack for this */


/* log in sticky */
.stickyChild .logInForm { margin-bottom:-3px; }


/* form text inputs */
.searchTextInput, .logInTextInput { color:#666666;  width:148px; height:18px; margin:0 5px 0 0; padding:6px 2px 1px 4px; vertical-align:top; border:solid 1px #88adc8; } /* this is ie hacked below */
.logInTextInput { width:74px; height:14px; margin-right:4px; padding:3px 2px 2px 4px; }
.notetextarea { color:#666666; border:solid 1px #88adc8; } /* this is ie hacked below */
.notebutton { color:#666666; border:solid 1px #88adc8; } /* this is ie hacked below */


/* form dropdowns */
.searchByCriteriaLeft { float:left; width:178px; }
.searchByCriteriaLeft select, .quickSearch select { width:86px; height:22px; color:#666666; padding:2px 1px 1px 1px; margin:0 0 4px 0; /*padding:2px 2px 1px 2px; */ }
.quickSearch select { width:208px; }






/* ---------- kamil forms ---------- */

td.formhead { background:#ededed; padding:8px 8px 8px 8px; }
td.formlines { padding:4px 8px 4px 8px; }

/* ----------- brad -----------*/

td.inboxbody { padding:4px 8px 4px 8px; border-bottom:solid 1px #88adc8; border-top:solid 1px #88adc8; }



/* ---------- masthead ---------- */


div.masthead { background:url(../images/mastheadBg.png) no-repeat; height:120px; }

.mastheadLeft { width:273px; height:120px; float:left; margin-right:10px; text-align:left; }
.mastheadLeft a { display:block; width:210px; height:107px; margin-left:10px; } /* the home link */
.mastheadRight { width:628px; height:120px; float:left; }


.mastheadTopRight { width:628px; height:23px; padding-top:4px; } /* there's a hack for this */

/* these three rules fix problem of skype adding width to phone number and pushing it below its box */
.mastheadTopRight a { display:block; float:left; margin-right:27px; } 
.mastheadTopRight a.first  { margin-left:26px; } /* there's a hack for this */
.mastheadTopRight a.last  { margin-right:0; text-align:left; }
.mastheadTopRight a.skype { width:94px; margin-right:20px; }
/* end three skype rules */

.mastheadMiddleRight { height:34px; }
.mastheadMiddleRight .stickyChild { height:22px; height:32px; padding:0 0 0 26px; border-top:dotted 1px #111111; border-bottom:dotted 1px #111111; text-align:left; }
.mastheadMiddleRight .stickyChild a { color:white; /*border-bottom:dotted 1px white;*/ }
.mastheadMiddleRight .stickyChild a:hover { color:#000000; border-bottom:dotted 1px white; }
.mastheadMiddleRight .stickyChild .logInForm { margin:0; }

.mastheadBottomRight { width:628px; height:43px; margin:16px 0 0 0; padding-top:2px;  }

a.tab { width:82px; height:37px; margin:0 4px 0 4px; padding-top:4px; float:left; }
a.tab:hover, .tabOn { color:#000000; background-color:#FFD700; text-decoration:none; } /* the background colour change here is only for the tabs with no rollovers; the tabs w/ rollovers change colour via the at_show and at_hide js funcions */







/* ---------- rollovers ---------- */


/* tabs */
.tabMenuChild, .recentListingMenuChild { visibility:hidden; position:absolute; border:solid white 2px; border-top:0;  background:#FFD700; width:200px; margin-top:-12px; margin-left:-2px; text-align:left; }
.tabMenuChild { padding-bottom:10px; }
.tabMenuChild h4 { margin:8px 8px 6px 8px; border-bottom:solid 1px #000000; }
.tabMenuChild p { line-height:18px; }
.tabMenuChild a { display:block; padding:1px 8px 1px 8px; }
.tabMenuChild a:hover { background-color:white; }


/* recent listings */
.recentListingMenuParent { float:left; padding:4px 0 4px 0; }
.recentListingMenuParent p { width:100px; }
.recentListingMenuChild { width:580px; margin-left:208px; border:solid #111111; 2px; border-left:0; padding:8px 8px 8px 10px; z-index:2; } /* make margin-top  -190ish to center vertically; z-index is so these show above the stepcarousel images */
#recentListingMenuChild1 { margin-top:-92px; }
#recentListingMenuChild2 { margin-top:-137px; } 
#recentListingMenuChild3 { margin-top:-178px; } 
#recentListingMenuChild4 { margin-top:-219px; }
#recentListingMenuChild5 { margin-top:-259px; }

.recentListingMenuChild img { float:left; margin:0; }
.recentListingMenuChild p, .recentListingMenuChild h4 { float:left; margin-left:8px; width:270px; }
.recentListingMenuChild h4 { margin-top:2px; }




/* ---------- recent listings ---------- */


.recentListings img { float:left; margin:0 8px 0px 0; }
.recentListings p { float:left; }




/* ---------- available properties ---------- */


/* available properties */
/* this is like a 480, but is a fixed height with one big background image w/ a gradient */
.availableProperties { background:url(../images/availablePropertiesBg.png) no-repeat; width:464px; height:362px; padding:12px 12px 12px 12px; } /* this one needs 12px padding b/c it's a bigger bg image by 4px */

.availableProperty { height:252px; width:464px; top:0; left:0; cursor:pointer; display:none; }

#availableProperty1, #countryName1 { display:block; } /* shows first thumb and countryName */
#availablePropertyImg1 { border-top:solid 2px #000000; border-bottom:solid 2px #000000; margin-top:2px; margin-bottom:-20px; } /* this all disappears if they hover over any other stepcarousel thumb */

.availablePropertyText { background:url(../images/blueSemiTransparent.png) bottom repeat-x; height:20px; padding-top:2px; margin-bottom:0; }
.availablePropertyText p { color:white; text-align:center; padding-top:2px; }



/* ---------- stepcarousel ---------- */


.stepcarouselWrapper{ float:left; margin-top:14px; } /* there's an ie hack for this */

.stepcarousel{ position: relative; overflow: scroll; width: 399px; height: 80px; float: left; } /*leave position and overflow alone; width should be width of carousel viewer itself; height should be enough to fit content's height */

.stepcarousel .belt{ position: absolute; left: 0; top: 0; } /*leave position alone*/

.stepcarousel .panel{ float: left; overflow: hidden; margin: 0px; width:56px; height:72px; padding: 0 1px 0 0; text-align:center; } /* leave float alone; overflow clips content that go outside dimensions of holding panel DIV; margin is the margin around each panel; width is the of each panel holding each content. If removed, widths should be individually defined on each content DIV */

.stepcarousel .panel a img { margin:4px 0; border:none; padding:2px 0; } /* when rolled the margin disappears to make room for the top border */
.stepcarousel .panel a { width:56px; height:58px; color:white; display:block; }
.countryName { display:none; color:#000000; margin-top:0; padding-top:0; }


/* stepcarousel's arrows */
a#arrowLeft, a#arrowRight, a#arrowRightLight { float:left; height:46px; margin:6px 0; }
a#arrowLeft { background:url(../images/arrowLeftDark.png) no-repeat; width:32px; margin-right:1px; }
a#arrowLeft:hover { background:url(../images/arrowLeftDarkO.png) no-repeat; /*border-top:solid 2px #000000; border-bottom:solid 2px #000000;*/ }
a#arrowRight { background:url(../images/arrowRightDark.png) no-repeat; width:32px; margin-left:0px; } /* arrowRight is 1px wider to make up for uneven number here; 1px left margin */
a#arrowRight:hover { background:url(../images/arrowRightDarkO.png) no-repeat; /*border-top:solid 2px #000000; border-bottom:solid 2px #000000;*/ }
a#arrowRightLight { background:url(../images/arrowRightLight.png) no-repeat; width:32px; margin-left:0px; } /* arrowRight is 1px wider to make up for uneven number here; 1px left margin */
a#arrowRightLight:hover { background:url(../images/arrowRightLightO.png) no-repeat; /*border-top:solid 2px #000000; border-bottom:solid 2px #000000;*/ }

a.arrow, a.arrowLight { padding:0; }
a.arrow img { border:0; }




/* ---------- testimonials ---------- */


.testimonials { float:left; height:154px; text-align:left; width:322px; } 





/* ---------- map ---------- */


.map { margin-top:8px; } /* there's an ie hack for this */




/* ---------- log in ---------- */


/* this is like a 240, but is a fixed height with one big background image w/ a gradient */
.logIn { background:url(../images/logInBg.png) no-repeat; width:208px; height:61px; padding:12px 12px 12px 12px; } /* this one needs 12px padding b/c it's a bigger bg image by 4px */
/* if this changes to a normal 240 box in future watch out ... ie6 will give it a margin-bottom of -9 (see hacks) */




/* ---------- footer  bottom---------- */  

.bottom { clear:both; width:100%; height:400px; background:url(../images/footerBg.png) repeat-y; margin:0 auto 0 auto; padding-top:44px; }

.footer { clear:both; width:952px; height:38px; background:url(../images/footerBg.png) no-repeat; margin:0 auto 0 auto; padding-top:44px; }
#homepage .footer { background:url(../images/footerBg.png) repeat-y;  }

.footerLeftColumn { width:702px; margin-left:125px; float:left; text-align:center; }
.footerRightColumn { float:left; width:113px; text-align:right; padding-right:12px; }


.belowFooter { margin-top:10px; }
.belowFooterColumn { float:left; width: 132px; margin:0 2px 30px 2px; text-align:left; }
.belowFooter .first { margin-left:5px; }
.belowFooter .last { margin-right:0; }






/* ---------- search page, OCP, pricelist table ----------*/

table.propertyResult { background-color:#f5f5f5; padding:5px; padding-bottom:14px; border:solid 1px #cccccc; border-left:none; border-right:none; }

table.priceListTable td { padding:5px; } /* pricelist on details.php*/

table.OCPpriceListTable td.formlines { padding-left:2px; padding-right:2px; } /* OCP pricelist */



/* ---------- hacks ---------- */


/* -- all browsers -- */

/* because all browsers (even firefox) get a mystery 3px margin below */
.logInForm { margin-bottom:-3px; }

/* because the FEATURED PROPERTY images add 3 px margin below unless displayed as block; this fix is for ffox, ie fixes below */
#image_rotate img { vertical-align:bottom; }


/* -- ie 6 -- */

/* because everything below the tabs gets pushed down the page */
* html div.outerBodyWrapper { margin-top:-2px; } 

/* because leftColumn top240s get 14px and other top 240s get 10px of margin-bottom */
* html .top240 { margin-bottom:-11px; } /* this was 10 before 12 px font */
* html .leftColumn .top240 { margin-bottom:-13px; }
* html .rightColumn .bottom240 { margin-bottom:-11px; }/* this didn't exist before 12 px font */

/* because bottom240s get 10px extra margin-bottom */
* html .bottom240 { margin-bottom:-10px; }
* html .leftColumn .bottom240 { margin-bottom:-14px; }

/* because top720s and 480s get 14px extra margin-bottom */
* html .top720 { margin-bottom:-14px; }
* html .top480 { margin-bottom:-14px; }

/* because availableProperties gets 5px extra margin-bottom */
* html .middleColumnBottom { margin-top:-5px;  }

/* because bottom720s and 480s get 13px extra margin-bottom */
* html .bottom720 { margin-bottom:-14px; }
* html .bottom480 { margin-bottom:-14px; }

* html .middle720column { width:150px; margin:0 0 10px 0; padding:6px 14px 8px 12px; text-align:center; } /* there's more right padding than left so spacing is even despite 2px border-right */
* html .middle720columnDivider { float:left; width:2px; margin:0 0 10px 0; padding:6px 0 8px 0; background:#111111; height:131px; }
* html .fullServiceSection .first { margin-left:0px; }
* html .testimonialWrapper .first { margin-left:5px; }

* html .second { margin-top:-14px; }

* html .testimonialsImage { margin-bottom:-10px; }

/* because the footerLeftColumn is too wide */
* html .footerLeftColumn { margin-left:60px; float:left; text-align:center; }

/* because the thin body background continues for too far in ie6 */
* html .belowFooter, * html .belowFooterColumn { /*background:white;*/ }

/* because the belowFooter gets pushed down too far */
* html .outerBodyWrapperBottom { margin-bottom:-13px; }

/* to fix double-margin bug; cuts margin from 26 to 13 */
* html .mastheadTopRight a.first  { margin-left:13px; }

/* for the extra padding below the logInSticky */
* html .mastheadMiddleRight .stickyChild { margin-bottom:-2px; }




/* to add border:solid red 1px; */
.leftColumn, .middleColumnTop, .middleColumnBottom, .rightColumn  {  }

.top240, .availableProperties, .middleColumnBottom, .rightColumn  {  }





/* -- ie 7 -- */




/* -- ies (both) -- */

/* because the stepcarousel wrapper gets an extra 4px margin-top (# is 18 for good browsers, 14 for ies) */
* html .stepcarouselWrapper{ margin-top:14px; }
*:first-child+html .stepcarouselWrapper{ margin-top:14px; }

/* because the go buttons (for search and log in) are a pixel too high otherwise */
* html .searchTextInput, * html .logInTextInput { margin-top:-1px; }
*:first-child+html .searchTextInput, *:first-child+html .logInTextInput { margin-top:-1px; }

/* because the search form and map and middle720column images get an extra 3px margin-bottom (ie 3 pixel bug) */
* html .searchForm { margin-bottom:-3px; }
*:first-child+html .searchForm { margin-bottom:-3px; } 
* html .map { margin-bottom:-3px; }
*:first-child+html .map { margin-bottom:-3px; } 
* html .middle720column img { margin-bottom:7px; } /* is 10 for non-ie browsers */
*:first-child+html .middle720column img { margin-bottom:7px; } /* is 10 for non-ie browsers */