/* ------------------------------------------------- */ /* GENERAL RULES /* ------------------------------------------------- */ html, body { height:100%; } body { margin:0; padding:0; font:11px/18px HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#2f352d; background:#FFF; } h1 { font:21px/21px HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin-bottom:27px; font-weight:normal; } p { margin-bottom:27px; } textarea, input { font:12px/12px HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; } textarea:focus, input:focus { outline:none; background:#85939A; } img { border:none; } a, a:active, a:visited { color:#304754;} a:hover { color:#2f352d; text-decoration:none;} a span { display:none; } button{position:relative;border:0;padding:0;cursor:pointer;overflow:visible;/* removes extra side padding in IE */} button::-moz-focus-inner{border:none;/* overrides extra padding in Firefox */} button span{position:relative;display:block;white-space:nowrap;} @media screen and (-webkit-min-device-pixel-ratio:0){ button span{margin-top:-1px;} } button { margin-left:80px; padding:0 23px 0 0; color:#304754; font:18px/18px HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align:center; background:transparent url(../img/bg-btn-right.png) no-repeat right top;} button span { padding:21px 0 0 23px; height:39px; background:transparent url(../img/bg-btn-left.png) no-repeat left top; color:#304754; line-height:18px; } button span:hover { color:#000; } table.cake-sql-log { z-index:100000; position:relative; } /* ------------------------------------------------- */ /* SUPER SEIZED /* ------------------------------------------------- */ #loading { position:absolute;top:40px;left:40px;z-index:3;width:24px;height:24px;text-indent:-999em;background-image:url(../img/loader.gif); } #supersize { position:fixed; } #supersize img { height:100%;width:100%;position:absolute;z-index:0; } /* ------------------------------------------------- */ /* LAYOUT RULES /* ------------------------------------------------- */ #wrapper { position:relative; float:right; min-height:100%; overflow:hidden; background-color:#FFF; } #wrapper #header { position:fixed; top:0px; right:0px; width:100%; height:150px; background-color:#FFF; text-align:right; z-index:12; } #wrapper div.col { float:left; width:240px; padding:20px 40px 0px 40px; margin-top:150px; margin-bottom:80px; } #footer { position:fixed; right:0px; bottom:0px; width:100%; height:100px; background-color:#FFF; text-align:right; } /* ------------------------------------------------- */ /* HOME PAGE /* ------------------------------------------------- */ #logo { position:absolute; right:0px; bottom:0px; z-index:10; } #floater { float:left; width:100%; height:50%; margin-bottom:-264px; } #homepage-wrapper { clear:both; width:660px; height:528px; margin:0 auto; } #homepage-wrapper a { display:block; width:660px; height:528px; background:url(../img/ga-binnen-en-ontdek.png) no-repeat left bottom; } #homepage-wrapper a:hover { background:url(../img/ga-binnen-en-ontdek.png) no-repeat right bottom; } #homepage-wrapper img { float:left; display:block; } /* ------------------------------------------------- */ /* PAGE SPECIFIC CSS /* ------------------------------------------------- */ /* MERELBEKE */ #merelbeke { width:370px !important; } /* LIGGING */ #ligging-picture-wrapper { width:575px !important; padding-right:0px !important; } /* ARCHITECTUUR */ #architectuur-content { width:340px !important; } #architectuur-scrollable-wrapper { position:relative; width:495px !important; padding-right:0px !important; margin-top:152px !important; } a.navigation { position:absolute; cursor:pointer; top:0px; left:40px; width:11px; height:12px; background:url(../img/arrow.png) no-repeat 0 0; z-index:50; } a.next { background-position: 0 0; } a.next:hover { background-position: 0 -12px; } a.prev { left:58px; background-position: -11px 0; } a.prev:hover { background-position: -11px -12px; } #architectuur-scrollable-wrapper div.scrollable { position:relative; width:495px; height:375px; overflow:hidden; } #architectuur-scrollable-wrapper div.scrollable div.items { position:absolute; width:20000em; } #architectuur-scrollable-wrapper div.scrollable div.items div.item { float:left; width:495px; } /* PLANNEN EN LASTENBOEK */ #plannen-table-wrapper { width:399px !important; padding:20px 0px 0px 0px !important; border-left:1px solid #85939A; min-height:510px; } #top-logo.plannen { border-left:1px solid #eff1f2; margin-right:80px; } #plannen-table-wrapper h1 { padding-left:20px; } #plannen-table-wrapper table { width:399px; } #plannen-table-wrapper table th { font-weight:bold; background:#6d7d86; padding:11px 0px 11px 15px; color:#FFF; } #plannen-table-wrapper table th a { color:#FFF; text-decoration:none; } #plannen-table-wrapper table td { padding:11px 0px 11px 15px; color:#2f352d; background:#ecece7; } #plannen-table-wrapper table td.even { padding:11px 0px 11px 15px; background:#f9f9f7; } #plannen-table-wrapper table tr td { cursor:pointer; } #plannen-table-wrapper table tr:hover td { background:#c6ccce; } #plannen-table-wrapper table tr.selected td { background:#c6ccce; } #plannen-table-wrapper #table-controls { font-size:12px; color:#1A3240; list-style:none; margin:15px; } #plannen-table-wrapper #table-controls li { display:inline; list-style:none; margin:0; padding:0; } #plannen-table-wrapper #table-controls li a, #plannen-table-wrapper #table-controls li div { display:block; float:left; height:20px; text-decoration:none; color:#1A3240; line-height:20px; margin-right:10px; } #plannen-table-wrapper #table-controls li #prev { padding-right:15px; background:url(../img/right-arrow.png) no-repeat right 0; text-decoration:underline; } #plannen-table-wrapper #table-controls li #next { padding-left:15px; background:url(../img/left-arrow.png) no-repeat left 0; text-decoration:underline; } #plannen-table-wrapper #table-controls li #prev:hover, #plannen-table-wrapper #table-controls li #prev.disabled { color:#C8CED1; padding-right:15px; background:url(../img/right-arrow.png) no-repeat right -20px; text-decoration:none; } #plannen-table-wrapper #table-controls li #next:hover, #plannen-table-wrapper #table-controls li #next.disabled { color:#C8CED1; padding-left:15px; background:url(../img/left-arrow.png) no-repeat left -20px; text-decoration:none; } #plannen-data-wrapper { position:relative; width:560px !important; padding:20px 0 0 0 !important; } #plannen-data-wrapper #small-inplantingsplan { position:absolute; width:560px; height:420px; cursor: url('../img/cursor-zoom.png'), pointer; z-index:2; } #plannen-data-wrapper #big-inplantingsplan { position:relative; cursor:move; width:560px; height:420px; overflow:hidden; background:#FFF url(../img/loader.gif) no-repeat 50% 50%; } #plannen-data-wrapper #big-inplantingsplan #close-zoom { position:absolute; cursor:pointer; font-weight:bold; background:#304754 url(../img/close-btn.png) no-repeat 5px 7px; padding:4px 10px 5px 20px; color:#FFF; z-index:1; } /* DETAIL PLANNEN EN LASTENBOEK */ #detail-wrapper { position:relative; width:560px !important; padding:0 !important; height:530px; } #detail-wrapper #plan { position:absolute; width:560px !important; padding:0 !important; height:530px; display:none; } #detail-wrapper #photos { position:absolute; width:560px !important; padding:20px 0 0 0 !important; height:510px; display:none; } #detail-wrapper #description { position:absolute; width:530px; bottom:0px; padding:15px; background-color:#6d7d86; display:none; } #detail-wrapper #description h2 { font-weight:bold; color:#FFF; font-size:14px; margin-bottom:5px; } #detail-wrapper #description p { margin-bottom:0px; color:#FFF; } #detail-wrapper #description a.close { position:absolute; top:10px; right:10px; width:13px; height:13px; background:url(../img/close-btn.png) no-repeat scroll top left; } div.scrollable { position:relative; width:560px; height:530px; overflow:hidden; } div.scrollable div.items { position:absolute; width:20000em; } div.scrollable div.items div.item { float:left; width:560px; text-align:center; } /* INSCHRIJVEN */ #inschrijven-txt { border-left:1px solid #85939A; width:239px !important; } #inschrijven-form { width:290px !important; } #top-logo.inschrijven { border-left:1px solid #eff1f2; } form div { float:left; width:290px; margin-bottom:10px; } form label { float:left; width:90px; line-height:22px; } form label.error { float:left; width:194px !important; margin-left:90px; color:#FFF; background:url(../img/bg-error.png) no-repeat bottom left; padding:3px; font:11px/11px 'Helvetica Neue', Arial, Helvetica, sans-serif; } form textarea.error, form input.error { background:#85939A; } form input, form textarea { width:190px; height:12px; background:#f0f0ec; border:none; padding:5px; margin:0; } form textarea { height:54px; } div.formnieuwsbriefblok label { float:left; width:200px; line-height:14px; } div.formnieuwsbriefblok div.checkbox-wrapper { float:left; width:90px; text-align:center; } div.formnieuwsbriefblok input { background:transparent; margin:0 auto; } /* ------------------------------------------------- */ /* MENU /* ------------------------------------------------- */ #menu-btn { position:fixed; cursor:pointer; top:50%; width:104px; height:66px; background:url(../img/menu.png) no-repeat 0 -66px; margin-top:-33px; z-index:10; } #menu-btn:hover { background-position:0 0; } #menu-btn span { display:none; } #menu-wrapper { position:fixed; top:50%; left:0px; width:100%; height:66px; background:#f0f0ec; margin-top:-33px; z-index:20; text-align:center; } #menu-wrapper ul { margin:0 auto; padding:0; list-style:none; width:886px; height:66px; } #menu-wrapper ul li { display:inline; margin:0; padding:0; list-style:none; height:66px; } #menu-wrapper ul li a { float:left; display:block; height:66px; background:url(../img/menu.png) no-repeat 0 0; } #menu-wrapper ul #btn01 a { background-position:-230px -66px; width:160px; } #menu-wrapper ul #btn02 a { background-position:-390px -66px; width:156px; } #menu-wrapper ul #btn03 a { background-position:-546px -66px; width:108px; } #menu-wrapper ul #btn04 a { background-position:-654px -66px; width:173px; } #menu-wrapper ul #btn05 a { background-position:-827px -66px; width:289px; } #menu-wrapper ul #btn01 a:hover, #menu-wrapper ul #btn01 a.current { background-position:-230px 0px; width:160px; } #menu-wrapper ul #btn02 a:hover, #menu-wrapper ul #btn02 a.current { background-position:-390px 0px; width:156px; } #menu-wrapper ul #btn03 a:hover, #menu-wrapper ul #btn03 a.current { background-position:-546px 0px; width:108px; } #menu-wrapper ul #btn04 a:hover, #menu-wrapper ul #btn04 a.current { background-position:-654px 0px; width:173px; } #menu-wrapper ul #btn05 a:hover, #menu-wrapper ul #btn05 a.current { background-position:-827px 0px; width:289px; } /* ------------------------------------------------- */ /* NEWS-FLASH RULES /* ------------------------------------------------- */ #news-flash { position:fixed; top:40px; right:270px; width:263px; } #news-flash #close-btn { position:absolute; width:13px; height:13px; right:10px; top:0px; cursor:pointer; background:url(../img/close-btn.png); } #news-flash #news-flash-content { float:left; width:229px; background:url(../img/bg-newsflash-top.png) no-repeat 0 0; padding:15px 17px 10px 17px; } #news-flash #news-flash-bottom { float:left; width:263px; height:10px; background:url(../img/bg-newsflash-bottom.png) no-repeat 0 0; } #news-flash h4 { font:14px/20px Helvetica, Arial, serif; color:#304754; font-weight:bold; margin-bottom:15px; } #news-flash p { font:11px/20px Helvetica, Arial, serif; color:#304754; margin-bottom:15px; } #news-flash a.more { display:block; font:14px/19px Helvetica, Arial, serif; color:#304754; font-weight:bold; text-decoration:none; background:url(../img/bg-a-more.png) no-repeat; padding-left:12px; margin-left:5px; height:19px; } /* ------------------------------------------------- */ /* BANNER /* ------------------------------------------------- */ #banner { position:fixed; bottom:13px; right:320px; width:133px; height:115px; background: url(../img/39-woningen-11-appartementen-banner.png) no-repeat scroll top left; } #banner span { display:none; } /* ------------------------------------------------------------------------ This you can customize ------------------------------------------------------------------------- */ label.checkbox span.holder { height:102px;/* Total height of your checkbox image */ background:url(../img/bg-radio.png) 0 0 no-repeat;/* Path to your checkbox image */} label.radio span.holder{height:102px;/* Total height of your radio buttons image */ background:url(../img/bg-radio.png) 0 0 no-repeat;/* Path to your radio button image */} label.checkbox:hover span.holder, label.radio:hover span.holder{top:-34px !important;} /* Background position on mouseover */ label.checked span.holder, label.checked span.holder, label.checked:hover span.holder, label.checked:hover span.holder{top:-68px !important;} /* Background position when checked */ /* ------------------------------------------------------------------------ Customize at your own risk ------------------------------------------------------------------------- */ label.list {float:left;clear:left;margin:0 0 5px 0;} label.inline {float:left;margin:0 10px 0 0;} label.prettyCheckbox {width:290px !important;} input.hiddenCheckbox{position:absolute;left:-10000px;/* Hide the input */} label.prettyCheckbox span.holderWrap {display:block;float:left;position:relative;margin:0px 28px;overflow:hidden;} label.prettyCheckbox span.holder {display:block;position:absolute;top:0;left:0;}