/* CREDITS Title: Immo-Town - CSS Main Stylesheet Author: David Candreva Date: 10/03/08 Last Edit: 10/03/08 David Candreva */ /* Algemene Styles ---------------------------------------------------------- */ html { height: 100%} body{font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#FFF url(/design/images/layout/body_tile.gif) repeat-x 0 47px; } strong,b{font-weight:bold; color:#042e57;} em{font-style:italic;} a{outline:none;} a.info{color:#fdba31; font-size:11px; padding:0 0 0 9px; background:url(/design/images/layout/bullet_info.gif) no-repeat 0 center;} a.info:hover{text-decoration:none;} fieldset legend, #search_sidebar h4{font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;} button{border:0; cursor:pointer;} p.noitems { padding: 20px; text-align:center; } .clear { clear: both; } /* Container ---------------------------------------------------------- */ #container{margin:0 auto; width:868px; padding:0 33px; position:relative; background:url(/design/images/layout/header_background.jpg) no-repeat 0 0;} /* Header ---------------------------------------------------------- */ #header{height:248px; width:868px; position:relative;} /*headings*/ #header h1 a{display:block; width:151px; height:121px; position:absolute; left:18px; top:0; text-indent:-9000px;} #header h2{font-size:11px; color:#44729e; position:absolute; right:5px; top:30px;} /*spotlight*/ #header #spotlight{position:relative; top:104px; left:232px; height:124px; width:464px; visibility: hidden; } #header #spotlight img{border:2px solid #eee; float:left;} #header #spotlight div.description{padding: 0 0 0 12px; float:left; width:289px; overflow:hidden;} #header #spotlight h3{color:#44729e; font-size:18px; font-weight:bold; font-family:"Myriad Pro",Arial, Helvetica, sans-serif;} #header #spotlight h4{color:#FFF; font-weight:bold;} #header #spotlight h4 em{color:#fdba31; font-style:normal; font-weight:bold; margin-left:6px;} #header #spotlight div.info{color:#FFF; font-size:11px; margin:3px 0 0 0; width:100%; overflow:hidden;} #header #spotlight a.info{clear:both; line-height:19px;} /*search_form*/ #header .search_form{position:absolute; top:181px; left:18px; width: 160px;} #header .search_form legend{font-weight:bold; color:#44729e; padding:0 0 0 6px;} #header .search_form input{width:109px; height:17px; padding:2px 4px 0 4px; border:0; font-size:11px; color:#0C365C; font-weight:bold; float:left; background:url(/design/images/layout/search_input_background.png) no-repeat 0 0;} #header .search_form button{height:19px; width:29px; margin:0 0 0 5px; background:url(/design/images/layout/search_button_background.png) no-repeat 0 0;} /*badge*/ #badge{width:128px; height:126px; position:absolute; z-index:10; right:21px; top:126px;} /*navigation*/ ul.navigation{position:absolute; left:169px; top:47px; width:699px; background:url(/design/images/layout/navigation_background.png) no-repeat 0 0;} ul.navigation li{float:left; text-shadow:#e3891b;} ul.navigation li a{float:left; display:block; height:48px; line-height:48px; text-indent:-9000px;} ul.navigation li a:hover, ul.navigation li.active a {background:url(/design/images/layout/navigation_background.png) no-repeat 0 100%;} ul.navigation li a.over-ons{width:73px;} ul.navigation li a.te-koop{width:63px;} ul.navigation li a.te-huur{width:59px;} ul.navigation li a.nieuwbouw{width:130px;} ul.navigation li a.tips{width:87px;} ul.navigation li a.verkopen{width:72px;} ul.navigation li a.syndicus{width:65px;} ul.navigation li a.rentmeester{width:88px;} ul.navigation li a.contact{width:62px;} ul.navigation li a.over-ons:hover, ul.navigation li.active a.over-ons{background-position:0 100%;} ul.navigation li a.te-koop:hover, ul.navigation li.active a.te-koop{background-position:-73px 100%;} ul.navigation li a.te-huur:hover, ul.navigation li.active a.te-huur{background-position:-136px 100%;} ul.navigation li a.nieuwbouw:hover, ul.navigation li.active a.nieuwbouw{background-position:-195px 100%;} ul.navigation li a.tips:hover, ul.navigation li.active a.tips{background-position:-325px 100%;} ul.navigation li a.verkopen:hover, ul.navigation li.active a.verkopen{background-position:-412px 100%;} ul.navigation li a.syndicus:hover, ul.navigation li.active a.syndicus{background-position:-484px 100%;} ul.navigation li a.rentmeester:hover, ul.navigation li.active a.rentmeester{background-position:-549px 100%;} ul.navigation li a.contact:hover, ul.navigation li.active a.contact{background-position:-637px 100%;} /* Content ---------------------------------------------------------- */ #content_container{width:100%; clear:both; overflow:hidden;} #content{width:582px; float:left; overflow: hidden; padding:15px 18px; background:#f4f4f4 url(/design/images/layout/text_symbol.gif) no-repeat right bottom; } #content h2{color:#fdba31; padding:0 0 5px; font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:24px; letter-spacing:-1px; font-weight:bold; background:url(/design/images/layout/dotted_tile.gif) repeat-x left bottom;} #content div.text{width:100%; clear:both; overflow:hidden; padding:9px 0; color:#2c292a;} #content div.text a{color:#fdba31;} #content div.text a:hover{text-decoration:none;} #content div.text p { padding: 5px 0 20px; line-height: 16px; } #content div.text h3 { color: #faba34; font-weight: bold; } #content div.text div.image { height: 100%; overflow: hidden; } #content div.text div.image p { float: left; width: 415px; } #content div.text div.image img { float:right; clear: right; display: inline; border: 3px solid #28537d; margin: 5px 0 10px; } #content div.text ul { padding: 0 0 15px 25px; list-style-type: disc; } #content div.text p.readmore { text-align:right; clear:both; margin:0; padding:0 0 20px; } #content div.text p.readmore a { text-decoration: none; } #content div.text p.readmore a:hover { text-decoration: underline; } #content div.text span.bold {font-weight:bold; color:#042e57;} #content_full{width:832px; float:left; padding:15px 18px; background:#f4f4f4 url(/design/images/layout/text_symbol.gif) no-repeat right bottom;} #content_full h2{color:#fdba31; padding:0 0 5px; font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:24px; letter-spacing:-1px; font-weight:bold; background:url(/design/images/layout/dotted_tile.gif) repeat-x left bottom;} #content_full div.text{width:100%; clear:both; overflow:hidden; padding:9px 0; color:#2c292a;} #content_full div.text a{color:#fdba31;} #content_full div.text a:hover{text-decoration:none;} #content_full div.text p { padding: 5px 0 20px; line-height: 16px; } #content_full div.text h3 { color: #faba34; font-weight: bold; } #content_full div.text div.image { height: 100%; overflow: hidden; } #content_full div.text div.image p { float: left; width: 415px; } #content_full div.text div.image img { float:right; clear: right; display: inline; border: 3px solid #28537d; margin: 5px 0 10px; } #content_full div.text ul { padding: 0 0 15px 25px; list-style-type: disc;} #content_full div.text-narrow { width: 466px !important; clear: none; float: left; } #content_full ul.project_cta { float: left; margin: 0 0 0 26px; } .building_wrapper{margin:18px 0 0 25px; width:808px; overflow:hidden;} .building_wrapper h4{ clear: both; color:#002b54; font-weight:bold; font-size:14px; margin:14px 0 2px; border-bottom:1px solid #dbdada; padding:0 0 3px 0;} .building_wrapper .left{float:left; width:450px;} .building_wrapper .left .text { padding: 0!important; } .building_wrapper .right{float:right; width: 342px; } .building_wrapper .right a img{border:4px solid #083259; margin:4px 4px 4px 0;} .building_wrapper .right #gmaps { clear:both; width: 330px; height: 330px; border:4px solid #083259; } .building_wrapper .right a{color:#002B54;} .building_wrapper .right a:hover { text-decoration: none; } .building_wrapper .right ul { margin-bottom: 10px; } .building_wrapper .right h4 { padding-top: 10px; } .building_wrapper .right #video { border: 4px solid #083259; background: #083259; margin: 4px auto 4px; display: none; width: 330px; overflow: hidden; } .building_wrapper .right #big_image{width:100%; clear:both; overflow:hidden;} .building_wrapper .right #big_image a{display:block;} .building_wrapper .right #big_image a img {display:block;} .building_wrapper .images { clear:both; overflow:hidden; width:100%;} .building_wrapper .images div { float: left; width: 108px; height: 108px; margin: 0 6px 4px 0; } .building_wrapper .images div a { display: block; position: relative; height: 108px; text-decoration:none; } .building_wrapper .images div a img { margin: 0; } .building_wrapper .images div a img.overlay { border:0; position: absolute; top: 15px; left: 19px; } .building_wrapper .images div a span { display: block; position: absolute; left: 0; top: 91px; background-color: #feba31; font-size: 9px; text-align: center; height: 13px; line-height: 13px; width: 100px; margin: 0 4px; } .building_wrapper li { line-height: 18px; } .building_wrapper ul.split { height: 100%; overflow: hidden; } .building_wrapper ul.split li { float:left; width: 220px; } .building_wrapper strong, .building_wrapper b { color: black; } .building_wrapper sup { font-size: 8px; margin: 8px 0 0; } .building_wrapper .actions a { float: left; margin: 0px 10px 10px 0; text-align: center; cursor: pointer; text-decoration: none; width: 104px; height: 30px; line-height: 32px; background:url(/design/images/layout/action_button.png); } .building_wrapper .actions a:hover span { text-decoration: underline; } .building_wrapper .actions a img { border: none; vertical-align:middle; } .building_wrapper .actions a span { color: black; text-decoration: none; vertical-align:middle; } .building_overview .item{width:385px; border:1px solid #eaeaea; background:#FFF url(../images/layout/item_background_right.gif) no-repeat right bottom; padding:10px; overflow:hidden; position:relative; float:left; margin:0 9px 16px 0;} .building_overview .item div.image { width:106px; height: 106px; position:relative; float: left; } .building_overview .item div.image span { display: block; position: absolute; left: 0; top: 90px; background-color: #feba31; font-size: 9px; text-align: center; height: 13px; line-height: 13px; width: 100px; margin: 0 3px; } .building_overview .item div.image span.new { display: block; width: 100px; height: 100px; background: url(../images/layout/img_label_new.png) no-repeat top right; text-indent: -9999px; position: absolute; top: 3px; right: 0; } .building_overview .item div.image span.sold { display: block; width: 100px; height: 100px; background: url(../images/layout/img_label_sold.png) no-repeat top right; text-indent: -9999px; position: absolute; top: 3px; right: 0; } .building_overview .item div.image span.rented { display: block; width: 100px; height: 100px; background: url(../images/layout/img_label_rented.png) no-repeat top right; text-indent: -9999px; position: absolute; top: 3px; right: 0; } .building_overview .item div.image a:hover span.new { background-image: url(../images/layout/img_label_new_h.png); } .building_overview .item div.image a:hover span.sold { background-image: url(../images/layout/img_label_sold_h.png); } .building_overview .item div.image a:hover span.rented { background-image: url(../images/layout/img_label_rented_h.png); } .building_overview .item div.image img{ border:3px solid #153c62;} .building_overview .item div.image a:hover img{border:3px solid #fdba31;} .building_overview .item .description{float:left; width:259px; height: 105px; padding:0 0 0 11px;} .building_overview .item .description h3{color:#153c62 !important; font-weight:bold; padding:0 0 3px 0; white-space: nowrap; overflow: hidden; font-size:12px !important; background:url(../images/layout/item_h3_tile.gif) repeat-x left bottom;} .building_overview .item .description .tekst{padding:3px 0 !important; color:#153c62 !important; line-height:14px !important; font-size:11px;} .building_overview .item span.price{font-size:16px; font-weight:bold; color:#fdba31; position:absolute; left:146px; bottom:10px; } .building_overview .item a.moreinfo{background:url(../images/layout/meer_info_item_overview.gif) no-repeat 0 0; height:17px; width:78px; text-indent:-9000px; display:block; position:absolute; right:17px; bottom:12px;} .building_overview .item a.moreinfo:hover{background:url(../images/layout/meer_info_item_overview.gif) no-repeat 0 100%;} a.cta_360 { display: block; width: 340px; height: 117px; background: url(../images/layout/btn_cta_360.jpg) no-repeat left top; margin: 10px 0; text-indent: -9999px; } a.cta_360:hover { background-position: left bottom; } a.cta_plan { display: block; width: 340px; height: 117px; background: url(../images/layout/btn_cta_plan.jpg) no-repeat left top; text-indent: -9999px; margin: 10px 0; } a.cta_plan:hover { background-position: left bottom; } a.cta_info { display: block; width: 340px; height: 117px; background: url(../images/layout/btn_cta_info.jpg) no-repeat left top; text-indent: -9999px; margin: 10px 0; } a.cta_info:hover { background-position: left bottom; } a.cta_brochure { display: block; width: 340px; height: 117px; background: url(../images/layout/btn_cta_brochure.png) no-repeat left top; text-indent: -9999px; margin: 10px 0; } a.cta_brochure:hover { background-position: left bottom; } a.cta_testimonials { float: left; display: block; width: 303px; height: 149px; background: url(../images/layout/btn_cta_testimonials.jpg) no-repeat left top; text-indent: -9999px; margin: 10px 0; } a.cta_testimonials:hover { background-position: left bottom; } a.cta_sellProperty { float: left; display: block; width: 308px; height: 149px; background: url(../images/layout/btn_cta_sellProperty.jpg) no-repeat left top; text-indent: -9999px; margin: 10px 6px 10px 0; } a.cta_sellProperty:hover { background-position: left bottom; } a.cta_hmodh { display: block; width: 340px; height: 117px; background: url(../images/layout/btn_cta_hmodh.jpg) no-repeat left top; text-indent: -9999px; margin: 10px 0; } a.cta_hmodh:hover { background-position: left bottom; } .building_wrapper .right #big_image { position: relative; } .building_wrapper .right #big_image a span.new { display: block; width: 330px; height: 260px; background: url(../images/layout/img_label_big_new.png) no-repeat top right; text-indent: -9999px; position: absolute; top: 8px; right: 8px; } .building_wrapper .right #big_image a span.sold { display: block; width: 330px; height: 260px; background: url(../images/layout/img_label_big_sold.png) no-repeat top right; text-indent: -9999px; position: absolute; top: 8px; right: 8px; } .building_wrapper .right #big_image a span.rented { display: block; width: 330px; height: 260px; background: url(../images/layout/img_label_big_rented.png) no-repeat top right; text-indent: -9999px; position: absolute; top: 8px; right: 8px; } .searchresults .building_overview .item{width:260px; } .searchresults .building_overview .item .description { width: 250px; padding-left: 5px; } .searchresults .building_overview .item span.price { left: 15px; } .testimonials_overview .left { width: 407px; overflow: hidden; float: left; margin-right: 9px; } .testimonials_overview .right { float: left; width: 407px; overflow: hidden; } .testimonials_overview .item {width:385px; border:1px solid #eaeaea; background:#FFF; padding:10px; overflow:hidden; position:relative; float:left; margin:0 0 16px 0;} .testimonials_overview .item div.image { width:106px; height: 106px; position:relative; float: left; } .testimonials_overview .item div.image span { display: block; position: absolute; left: 0; top: 90px; background-color: #feba31; font-size: 9px; text-align: center; height: 13px; line-height: 13px; width: 100px; margin: 0 3px; } .testimonials_overview .item div.image img{ border:3px solid #153c62;} .testimonials_overview .item div.image a img:hover{border:3px solid #fdba31;} .testimonials_overview .item .description{float:left; width:259px; padding:0 0 0 11px;} .testimonials_overview .item .description h3{color:#153c62 !important; font-weight:bold; padding:0 0 3px 0; font-size:12px !important; background:url(../images/layout/item_h3_tile.gif) repeat-x left bottom;} .testimonials_overview .item .description .tekst{padding:3px 0 !important; color:#153c62 !important; line-height:14px !important; font-size:11px;} ul.pagination{clear:both;} ul.pagination li {float:left; background:#143B62; margin:0 3px 0 0;} ul.pagination li a.active{background:#E18B1E;} ul.pagination li a.active{font-weight:bold;} ul.pagination li a{float:left; color:#FFF; text-decoration:none; padding:3px 5px;} ul.pagination li a:hover{background:#E18B1E;} /*contact*/ .contact_wrapper{ width:808px; overflow:hidden;} .contact_wrapper .left{float:left; width:450px;} .contact_wrapper .right{float:right; width: 342px; } .contact_wrapper .right #gmaps { clear:both; width: 330px; height: 330px; border:4px solid #083259; } .contact_wrapper address { padding: 10px 0; } /*search_sidebar*/ div.search_sidebar{width:243px; float:right; background:url(/design/images/layout/search_sidebar/repeat_tile.png) repeat-y 0 0;} div.search_wrapper{width:243px; float:right; background:url(/design/images/layout/search_sidebar/top_image.png) no-repeat 0 0;} div.search_bottom{width:217px; float:right; padding:8px 13px 35px; background:url(/design/images/layout/search_sidebar/bottom_image.png) no-repeat left bottom;} div.search_sidebar label{color:#FFF;} div.search_sidebar h4{color:#FFF; width:217px; display:block; background:url(/design/images/layout/dotted_tile.gif) repeat-x left bottom;} div.search_sidebar .entry{clear:both; overflow:hidden; width:100%; margin:6px 0;} div.search_sidebar .entry_checkbox{ margin:16px 0; width:100%; clear:both; overflow:hidden;} div.search_sidebar .entry_checkbox label{margin:0 15px 0 0; float:left;} div.search_sidebar .entry_checkbox label input{margin:0 3px 0 0; float:left;} div.search_sidebar .entry label{display:block; width:100%; padding:0 0 2px;} div.search_sidebar .entry select{width:212px; padding:0 0 0 3px; color:#0C365C; line-height:23px; height:23px; border:0; background:url(/design/images/layout/search_sidebar/input_background.png) no-repeat 0 0;} div.search_sidebar .entry select option{background:#FFF; color:#0C365C;} div.search_sidebar .entry input{width:209px; padding:3px 3px 0; height:22px; color:#0C365C; border:0; background:url(/design/images/layout/search_sidebar/input_background.png) no-repeat 0 0;} div.search_sidebar .btn{width:100%; clear:both; overflow:hidden; margin:15px 0 0 0;} div.search_sidebar .btn button.search{text-align:center; height:25px; width:89px; background:url(/design/images/layout/search_sidebar/zoeken_btn_background.png) no-repeat 0 0;} div.search_sidebar .btn button.inschrijven{text-align:center; height:25px; width:89px; background:url(/design/images/layout/search_sidebar/inschrijven_btn_background.png) no-repeat 0 0;} div.subscribe_sidebar{width:243px; color:#FFF; float:right; margin:0 0 8px; background:url(/design/images/layout/search_sidebar/repeat_tile.png) repeat-y 0 0;} div.subscribe_wrapper{width:243px; float:right; background:url(/design/images/layout/search_sidebar/top_image.png) no-repeat 0 0;} div.subscribe_bottom{width:217px;float:right; padding:8px 13px 13px; background:url(/design/images/layout/search_sidebar/bottom_image_2.png) no-repeat left bottom;} div.subscribe_sidebar h4{color:#FFF; width:217px; display:block; background:url(/design/images/layout/dotted_tile.gif) repeat-x left bottom;} div.subscribe_sidebar p{margin:10px 0;} div.subscribe_sidebar a{color:#FFF;} div.subscribe_sidebar a:hover{text-decoration:none;} div.subscribe_sidebar a.inschrijven{text-align:center; height:25px; width:164px; display:block; background:url(/design/images/layout/search_sidebar/inschrijven_btn_background.png) no-repeat 0 0;} /* Mailform ---------------------------------------------------------- */ #mailform { clear: both; margin: 15px 0; display:none; } #mailform form.niceField{width:300px;} /* Footer ---------------------------------------------------------- */ #footer{border-top:1px solid #dfdede; width:852px; clear:both; margin:6px 0 0 0; font-size:11px; color:#6f6f6f; text-transform:uppercase; padding:2px 8px;} #footer p { float: left; padding-top: 6px; } #footer p.credits { float: right; width: 74px; padding-top: 0; } #footer p.credits a { display: block; width: 74px; height: 22px; overflow: hidden; text-indent: -9000px; background:url(/design/images/icons/credits.png) top no-repeat; } #footer p.credits a:hover { background-position: bottom; }