/** TITLE **/ .search-page-title { font-size:2.5em; text-transform:uppercase; margin:20px 0px; font-weight:300; } .search-page-title { color:#4E3779; width:60%; display:inline-block; } .search-page-title .sub-title { font-size:0.7em; color:#429A95; } .search-page-title-spacing { margin:20px 0px; } /** VIEW BAR **/ .search-page-view { clear:both; width:30%; margin:0px 0px 20px 0px; display:inline-block; float:right; } .search-page-view ul { float:left; list-style:none; margin:0px; padding:0px; max-width:350px; } .search-page-view ul li { margin:0px; padding:0px; display:inline-block; } .search-page-view ul li a { margin:0px; padding:15px 20px 15px 40px; display:inline-block; text-align:center; } .search-page-view .search-page-buttons { float:right; width:170px; text-align:right; } .search-page-view .search-page-buttons .btn, .search-page-view .results-save-status { margin:8px 0px 0px 0px; } .search-page-view .search-page-sort { float:right; width:125px; margin:40px 0px 0px 0px; } .search-page-view .search-page-sort .styledd { width:100%; } .search-page-view .search-page-sort label { display:none; } .search-page-view ul li a { color:#FFFFFF; background-repeat:no-repeat; background-position:0% 50%; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; } .search-page-view ul li a:hover, .search-page-view ul li a.active { background-color:#429A95; color:#FFFFFF; } .search-page-view a.search-page-list-view { background-image:url(icons/list-on.png); } .search-page-view a.search-page-list-view.active, .search-page-view a.search-page-list-view:hover { background-image:url(icons/list-active.png); } .search-page-view a.search-page-map-view { background-image:url(icons/map-on.png); } .search-page-view a.search-page-map-view.active, .search-page-view a.search-page-map-view:hover { background-image:url(icons/map-active.png); } .search-page-view .search-page-buttons { color:#4E3779; } .search-page-view .search-page-buttons a { color:#4E3779; text-decoration:underline; } .search-page-view .search-page-buttons a:hover { color:#429A95; } .search-page-view .search-page-buttons .btn { background-color:#4E3779; color:#FFFFFF; text-decoration:none; } .search-page-view .search-page-buttons .btn:hover { background-color:#429A95; color:#FFFFFF; } .search-page-view .search-page-sort .styledd { background-color:#FFFFFF; } .search-header h1 { text-transform:uppercase; font-size:3em; margin:0px 330px 0px 0px; font-weight:300; } .search-header h1 .sub-title { text-transform:none; font-size:0.6em; display:block; clear:both; } .search-header h1 .sub-title { color:#777777; } /** LISTINGS **/ ul.property-list { list-style:none; margin:0px; padding:0px; } ul.property-list li.property-list-item { display:block; float:left; width:100%; clear:both; padding:2%; margin-bottom:15px; position:relative; } ul.property-list .property-list-photo { position:relative; float:left; width:330px; text-align:center; } ul.property-list .property-list-no-photo img { width:100%; max-width:800px; max-height:600px; } ul.property-list .property-list-details { float:right; width:60%; } ul.property-list .property-list-details .addr, ul.property-list .property-list-details .address { display:block; clear:both; font-size:1.2em; text-transform:uppercase; } ul.property-list .property-list-details .townPostcode { display:block; clear:both; font-size:0.9em; } ul.property-list .property-list-details .property-list-attributes { display:block; clear:both; margin:20px 0px; padding:5px 0px; font-size:1.4em; font-weight:300; } ul.property-list .property-list-details .property-list-brief { display:block; clear:both; overflow:hidden; font-size:1.2em; line-height:1.6em; } ul.property-list .property-list-details .property-list-base { display:block; clear:both; margin:32px 0px 0px 0px; } ul.property-list .property-list-details .property-list-price { float:left; padding:5px; font-size:1.3em; } ul.property-list .property-list-details .property-list-price .price-value { font-size:1.5em; font-weight:300; } ul.property-list .property-list-details .btn-more { float:right; padding:10px; margin-top:10px; } ul.property-list li.property-list-item { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:4px solid #F6F6F6; background:#F6F6F6; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease; } ul.property-list li.property-list-item:hover { border:4px solid transparent; background:#F5F5F5; box-shadow:0 0 6px rgba(0, 0, 0, 0.15); cursor:pointer; } ul.property-list .property-list-photo { border:1px solid #EFEFEF; } ul.property-list .property-list-details .address { color:#4E3779; } ul.property-list .property-list-details .property-list-attributes { color:#429A95; } ul.property-list .property-list-details .townPostcode, ul.property-list .property-list-details .property-list-brief { color:#262626; } ul.property-list .property-list-details .property-list-price { color:#262626; } ul.property-list .property-list-details .property-list-price .price-value { color:#429A95; } ul.property-list .property-list-details .btn-more { background:#4E3779; color:#FFFFFF; border:none; font-size:1.2em; } ul.property-list li:hover .property-list-details .btn-more { background:#429A95; color:#FFFFFF; border:none; } /** STATUS **/ ul.property-list .property-list-item .status-banner { position:absolute; height:139px; width:139px; z-index:1; top:0; left:0; } ul.property-list .property-list-item .status-banner img { width:100%; max-width:139px; max-height:139px; } ul.property-list .property-list-item.status-saleAgreed .status-banner, ul.property-list .property-list-item.status-sold .status-banner, ul.property-list .property-list-item.status-letAgreed .status-banner, ul.property-list .property-list-item.status-let .status-banner { background-repeat:no-repeat; background-position:100% 0%; } ul.property-list .property-list-item.status-saleAgreed .status-banner { background-image:url(property/status-sale-agreed.png); } ul.property-list .property-list-item.status-sold .status-banner { background-image:url(property/status-sold.png); } ul.property-list .property-list-item.status-letAgreed .status-banner { background-image:url(property/status-let-agreed.png); } ul.property-list .property-list-item.status-let .status-banner { background-image:url(property/status-let.png); } /** PAGINATION **/ .search-page-pagination { clear:both; margin:20px 0px 20px 0px; padding:3px; } .search-page-pagination .paging-prev, .search-page-pagination .paging-next { display:inline-block; float:left; width:auto; } .search-page-pagination ul { float:left; list-style:none; margin:0px; padding:0px; display:inline-block; } .search-page-pagination ul li { margin:0px; display:inline-block; float:left; } .search-page-pagination .paging-prev, .search-page-pagination .paging-next, .search-page-pagination ul li span, .search-page-pagination ul li a { display:inline-block; padding:12px 20px; } .search-page-pagination .paging-prev, .search-page-pagination .paging-next { margin:0px 0px 0px 5px; } .search-page-pagination ul li.paging-numbers-separator { padding:5px 5px; color:#429A95; } .search-page-pagination .prevNext { float:right; } .search-page-pagination { background:#F5F5F5; color:#FFFFFF; font-size:1.4em; } .search-page-pagination a { color:#666666; } .search-page-pagination a:hover, .search-page-pagination .paging-numbers-current { background-color:#429A95; color:#FFFFFF; } .search-page-pagination .paging-prev, .search-page-pagination .paging-next { color:#777777; text-transform:uppercase; } .search-page-pagination .paging-prev:hover, .search-page-pagination .paging-next:hover { background-color:#429A95; color:#FFFFFF; } /** NO PROPERTIES **/ .no-properties-wrapper { text-align:center; padding:30px 0px; } /** RESPONSIVE **/ @media screen and (max-width:960px){ ul.property-list .property-list-details { width:50%; } } @media screen and (max-width:790px){ ul.property-list .property-list-details { width:45%; } ul.property-list .property-list-no-photo img { width:100%; max-width:800px; max-height:600px; } } @media screen and (max-width:690px){ ul.property-list .property-list-photo, ul.property-list .property-list-details { float:none; clear:both; width:90%; margin:0px auto 10px auto; } .search-page-title .sub-title { font-size:0.6em; color:#429A95; } } @media screen and (max-width:500px){ .search-page-pagination .paging-prev, .search-page-pagination .paging-next, .search-page-pagination ul li span, .search-page-pagination ul li a { padding:12px 15px; } .search-page-title, .search-page-view { width:100%; display:block; float:none;} .search-page-view .search-page-buttons, .search-page-view .search-page-buttons .btn, .search-page-view .results-save-status, .search-page-view .search-page-sort { float:none; width:100%; margin:10px 0px; display:block; } .search-page-view .search-page-buttons .btn { max-width:150px; margin:10px auto; font-size:1.2em; padding:15px; } .search-page-view .results-save-status { text-align:center; } } @media screen and (max-width:400px){ ul.property-list .property-list-photo img { max-width:100%; height:auto !important; } ul.property-list .property-list-details .address { font-size:1.1em; } ul.property-list .property-list-price { clear:both; margin:0px 0px 10px 0px; } ul.property-list .property-list-details .btn-more { display:block; float:none; clear:both; margin:20px auto; } }