<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/andrewfarinella/pen/LkgPYb?depth=everything&order=popularity&page=20&q=card+list&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@font-face {
font-family: 'Avenir Light';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.otf") format("opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Light.svg#AvenirLTStd-Light") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenir Bold';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.otf") format("opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirNextLTPro-Bold.svg#AvenirNextLTPro-Bold") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenir Medium';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.otf") format("opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/AvenirLTStd-Medium.svg#AvenirLTStd-Medium") format("svg");
font-weight: normal;
font-style: normal;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row [class^=col] {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.col-full {
width: 100%;
max-width: 100%;
}
.row .col-flex {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.col-1of2 {
width: calc( (100% / 2 ) * 1 );
max-width: calc( (100% / 2 ) * 1 );
}
.col-1of3 {
width: calc( (100% / 3 ) * 1 );
max-width: calc( (100% / 3 ) * 1 );
}
.col-2of3 {
width: calc( (100% / 3 ) * 2 );
max-width: calc( (100% / 3 ) * 2 );
}
.col-1of4 {
width: calc( (100% / 4 ) * 1 );
max-width: calc( (100% / 4 ) * 1 );
}
.col-2of4 {
width: calc( (100% / 4 ) * 2 );
max-width: calc( (100% / 4 ) * 2 );
}
.col-3of4 {
width: calc( (100% / 4 ) * 3 );
max-width: calc( (100% / 4 ) * 3 );
}
.col-1of5 {
width: calc( (100% / 5 ) * 1 );
max-width: calc( (100% / 5 ) * 1 );
}
.col-2of5 {
width: calc( (100% / 5 ) * 2 );
max-width: calc( (100% / 5 ) * 2 );
}
.col-3of5 {
width: calc( (100% / 5 ) * 3 );
max-width: calc( (100% / 5 ) * 3 );
}
.col-4of5 {
width: calc( (100% / 5 ) * 4 );
max-width: calc( (100% / 5 ) * 4 );
}
.col-1of6 {
width: calc( (100% / 6 ) * 1 );
max-width: calc( (100% / 6 ) * 1 );
}
.col-2of6 {
width: calc( (100% / 6 ) * 2 );
max-width: calc( (100% / 6 ) * 2 );
}
.col-3of6 {
width: calc( (100% / 6 ) * 3 );
max-width: calc( (100% / 6 ) * 3 );
}
.col-4of6 {
width: calc( (100% / 6 ) * 4 );
max-width: calc( (100% / 6 ) * 4 );
}
.col-5of6 {
width: calc( (100% / 6 ) * 5 );
max-width: calc( (100% / 6 ) * 5 );
}
.col-1of7 {
width: calc( (100% / 7 ) * 1 );
max-width: calc( (100% / 7 ) * 1 );
}
.col-2of7 {
width: calc( (100% / 7 ) * 2 );
max-width: calc( (100% / 7 ) * 2 );
}
.col-3of7 {
width: calc( (100% / 7 ) * 3 );
max-width: calc( (100% / 7 ) * 3 );
}
.col-4of7 {
width: calc( (100% / 7 ) * 4 );
max-width: calc( (100% / 7 ) * 4 );
}
.col-5of7 {
width: calc( (100% / 7 ) * 5 );
max-width: calc( (100% / 7 ) * 5 );
}
.col-6of7 {
width: calc( (100% / 7 ) * 6 );
max-width: calc( (100% / 7 ) * 6 );
}
.col-1of8 {
width: calc( (100% / 8 ) * 1 );
max-width: calc( (100% / 8 ) * 1 );
}
.col-2of8 {
width: calc( (100% / 8 ) * 2 );
max-width: calc( (100% / 8 ) * 2 );
}
.col-3of8 {
width: calc( (100% / 8 ) * 3 );
max-width: calc( (100% / 8 ) * 3 );
}
.col-4of8 {
width: calc( (100% / 8 ) * 4 );
max-width: calc( (100% / 8 ) * 4 );
}
.col-5of8 {
width: calc( (100% / 8 ) * 5 );
max-width: calc( (100% / 8 ) * 5 );
}
.col-6of8 {
width: calc( (100% / 8 ) * 6 );
max-width: calc( (100% / 8 ) * 6 );
}
.col-7of8 {
width: calc( (100% / 8 ) * 7 );
max-width: calc( (100% / 8 ) * 7 );
}
.col-1of9 {
width: calc( (100% / 9 ) * 1 );
max-width: calc( (100% / 9 ) * 1 );
}
.col-2of9 {
width: calc( (100% / 9 ) * 2 );
max-width: calc( (100% / 9 ) * 2 );
}
.col-3of9 {
width: calc( (100% / 9 ) * 3 );
max-width: calc( (100% / 9 ) * 3 );
}
.col-4of9 {
width: calc( (100% / 9 ) * 4 );
max-width: calc( (100% / 9 ) * 4 );
}
.col-5of9 {
width: calc( (100% / 9 ) * 5 );
max-width: calc( (100% / 9 ) * 5 );
}
.col-6of9 {
width: calc( (100% / 9 ) * 6 );
max-width: calc( (100% / 9 ) * 6 );
}
.col-7of9 {
width: calc( (100% / 9 ) * 7 );
max-width: calc( (100% / 9 ) * 7 );
}
.col-8of9 {
width: calc( (100% / 9 ) * 8 );
max-width: calc( (100% / 9 ) * 8 );
}
.col-1of10 {
width: calc( (100% / 10 ) * 1 );
max-width: calc( (100% / 10 ) * 1 );
}
.col-2of10 {
width: calc( (100% / 10 ) * 2 );
max-width: calc( (100% / 10 ) * 2 );
}
.col-3of10 {
width: calc( (100% / 10 ) * 3 );
max-width: calc( (100% / 10 ) * 3 );
}
.col-4of10 {
width: calc( (100% / 10 ) * 4 );
max-width: calc( (100% / 10 ) * 4 );
}
.col-5of10 {
width: calc( (100% / 10 ) * 5 );
max-width: calc( (100% / 10 ) * 5 );
}
.col-6of10 {
width: calc( (100% / 10 ) * 6 );
max-width: calc( (100% / 10 ) * 6 );
}
.col-7of10 {
width: calc( (100% / 10 ) * 7 );
max-width: calc( (100% / 10 ) * 7 );
}
.col-8of10 {
width: calc( (100% / 10 ) * 8 );
max-width: calc( (100% / 10 ) * 8 );
}
.col-9of10 {
width: calc( (100% / 10 ) * 9 );
max-width: calc( (100% / 10 ) * 9 );
}
.col-1of11 {
width: calc( (100% / 11 ) * 1 );
max-width: calc( (100% / 11 ) * 1 );
}
.col-2of11 {
width: calc( (100% / 11 ) * 2 );
max-width: calc( (100% / 11 ) * 2 );
}
.col-3of11 {
width: calc( (100% / 11 ) * 3 );
max-width: calc( (100% / 11 ) * 3 );
}
.col-4of11 {
width: calc( (100% / 11 ) * 4 );
max-width: calc( (100% / 11 ) * 4 );
}
.col-5of11 {
width: calc( (100% / 11 ) * 5 );
max-width: calc( (100% / 11 ) * 5 );
}
.col-6of11 {
width: calc( (100% / 11 ) * 6 );
max-width: calc( (100% / 11 ) * 6 );
}
.col-7of11 {
width: calc( (100% / 11 ) * 7 );
max-width: calc( (100% / 11 ) * 7 );
}
.col-8of11 {
width: calc( (100% / 11 ) * 8 );
max-width: calc( (100% / 11 ) * 8 );
}
.col-9of11 {
width: calc( (100% / 11 ) * 9 );
max-width: calc( (100% / 11 ) * 9 );
}
.col-10of11 {
width: calc( (100% / 11 ) * 10 );
max-width: calc( (100% / 11 ) * 10 );
}
.col-1of12 {
width: calc( (100% / 12 ) * 1 );
max-width: calc( (100% / 12 ) * 1 );
}
.col-2of12 {
width: calc( (100% / 12 ) * 2 );
max-width: calc( (100% / 12 ) * 2 );
}
.col-3of12 {
width: calc( (100% / 12 ) * 3 );
max-width: calc( (100% / 12 ) * 3 );
}
.col-4of12 {
width: calc( (100% / 12 ) * 4 );
max-width: calc( (100% / 12 ) * 4 );
}
.col-5of12 {
width: calc( (100% / 12 ) * 5 );
max-width: calc( (100% / 12 ) * 5 );
}
.col-6of12 {
width: calc( (100% / 12 ) * 6 );
max-width: calc( (100% / 12 ) * 6 );
}
.col-7of12 {
width: calc( (100% / 12 ) * 7 );
max-width: calc( (100% / 12 ) * 7 );
}
.col-8of12 {
width: calc( (100% / 12 ) * 8 );
max-width: calc( (100% / 12 ) * 8 );
}
.col-9of12 {
width: calc( (100% / 12 ) * 9 );
max-width: calc( (100% / 12 ) * 9 );
}
.col-10of12 {
width: calc( (100% / 12 ) * 10 );
max-width: calc( (100% / 12 ) * 10 );
}
.col-11of12 {
width: calc( (100% / 12 ) * 11 );
max-width: calc( (100% / 12 ) * 11 );
}
.col-offset-1of1 {
margin-left: calc(100% / 1);
}
.col-offset-1of2 {
margin-left: calc(100% / 2);
}
.col-offset-1of3 {
margin-left: calc(100% / 3);
}
.col-offset-1of4 {
margin-left: calc(100% / 4);
}
.col-offset-1of5 {
margin-left: calc(100% / 5);
}
.col-offset-1of6 {
margin-left: calc(100% / 6);
}
.col-offset-1of7 {
margin-left: calc(100% / 7);
}
.col-offset-1of8 {
margin-left: calc(100% / 8);
}
.col-offset-1of9 {
margin-left: calc(100% / 9);
}
.col-offset-1of10 {
margin-left: calc(100% / 10);
}
.col-offset-1of11 {
margin-left: calc(100% / 11);
}
.col-offset-1of12 {
margin-left: calc(100% / 12);
}
/**
* Alignment styles
* ----------------------------------------------------------------------------
*
* Utility classes for adjusting content alignment
*/
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.vertical-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vertical-center > * {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
/**
* Spacing styles
* ----------------------------------------------------------------------------
*
* Utility classes for adjusting content alignment
*/
.m-t-0 {
margin-top: 0 !important;
}
.m-t-1 {
margin-top: calc( 30px / 2 ) !important;
}
.m-t-2 {
margin-top: 30px !important;
}
.m-t-3 {
margin-top: calc( 30px * 1.5 ) !important;
}
.m-b-0 {
margin-bottom: 0 !important;
}
.m-b-1 {
margin-bottom: calc( 30px / 2 ) !important;
}
.m-b-2 {
margin-bottom: 30px !important;
}
.m-b-3 {
margin-bottom: calc( 30px * 1.5 ) !important;
}
.m-l-0 {
margin-left: 0 !important;
}
.m-l-1 {
margin-left: calc( 30px / 2 ) !important;
}
.m-l-2 {
margin-left: 30px !important;
}
.m-l-3 {
margin-left: calc( 30px * 1.5 ) !important;
}
.m-r-0 {
margin-right: 0 !important;
}
.m-r-1 {
margin-right: calc( 30px / 2 ) !important;
}
.m-r-2 {
margin-right: 30px !important;
}
.m-r-3 {
margin-right: calc( 30px * 1.5 ) !important;
}
.m-a-0 {
margin: 0 !important;
}
.m-a-1 {
margin: calc( 30px / 2 ) !important;
}
.m-a-2 {
margin: 30px !important;
}
.m-a-3 {
margin: calc( 30px * 1.5 ) !important;
}
.m-x-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.m-x-1 {
margin-left: calc( 30px / 2 ) !important;
margin-right: calc( 30px / 2 ) !important;
}
.m-x-2 {
margin-left: 30px !important;
margin-right: 30px !important;
}
.m-x-3 {
margin-left: calc( 30px * 1.5 ) !important;
margin-right: calc( 30px * 1.5 ) !important;
}
.m-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-y-1 {
margin-top: calc( 30px / 2 ) !important;
margin-bottom: calc( 30px / 2 ) !important;
}
.m-y-2 {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.m-y-3 {
margin-top: calc( 30px * 1.5 ) !important;
margin-bottom: calc( 30px * 1.5 ) !important;
}
.p-t-0 {
padding-top: 0 !important;
}
.p-t-1 {
padding-top: calc( 30px / 2 ) !important;
}
.p-t-2 {
padding-top: 30px !important;
}
.p-t-3 {
padding-top: calc( 30px * 1.5 ) !important;
}
.p-b-0 {
padding-bottom: 0 !important;
}
.p-b-1 {
padding-bottom: calc( 30px / 2 ) !important;
}
.p-b-2 {
padding-bottom: 30px !important;
}
.p-b-3 {
padding-bottom: calc( 30px * 1.5 ) !important;
}
.p-l-0 {
padding-left: 0 !important;
}
.p-l-1 {
padding-left: calc( 30px / 2 ) !important;
}
.p-l-2 {
padding-left: 30px !important;
}
.p-l-3 {
padding-left: calc( 30px * 1.5 ) !important;
}
.p-r-0 {
padding-right: 0 !important;
}
.p-r-1 {
padding-right: calc( 30px / 2 ) !important;
}
.p-r-2 {
padding-right: 30px !important;
}
.p-r-3 {
padding-right: calc( 30px * 1.5 ) !important;
}
.p-a-0 {
padding: 0 !important;
}
.p-a-1 {
padding: calc( 30px / 2 ) !important;
}
.p-a-2 {
padding: 30px !important;
}
.p-a-3 {
padding: calc( 30px * 1.5 ) !important;
}
.p-x-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.p-x-1 {
padding-left: calc( 30px / 2 ) !important;
padding-right: calc( 30px / 2 ) !important;
}
.p-x-2 {
padding-left: 30px !important;
padding-right: 30px !important;
}
.p-x-3 {
padding-left: calc( 30px * 1.5 ) !important;
padding-right: calc( 30px * 1.5 ) !important;
}
.p-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-y-1 {
padding-top: calc( 30px / 2 ) !important;
padding-bottom: calc( 30px / 2 ) !important;
}
.p-y-2 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.p-y-3 {
padding-top: calc( 30px * 1.5 ) !important;
padding-bottom: calc( 30px * 1.5 ) !important;
}
/**
* Image styles
* ----------------------------------------------------------------------------
*
* Utility classes for adjusting image display
*/
.rounded {
border-radius: 50%;
}
/**
* Text styles
* ----------------------------------------------------------------------------
*
* Utility classes for affecting text display
*/
.text-uppercase {
text-transform: uppercase !important;
}
.text-large {
font-size: 150% !important;
}
.text-small {
font-size: 40% !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-muted {
color: #888 !important;
}
.hidden {
display: none !important;
}
.card__title, .filters .button:hover span {
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
background-image: -webkit-gradient(linear, left top, right top, from(currentColor), to(currentColor));
background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
background-repeat: repeat-x;
background-position: 0 96%;
background-size: 100% 2px;
}
body {
margin: 0;
padding: 60px 0 0;
color: #555;
font-family: "Avenir Light";
}
.site-logo {
max-height: 30px;
}
.site-header {
position: fixed;
z-index: 10000;
top: 0;
height: 60px;
max-height: 60px;
width: 100%;
padding-top: 5px;
background-color: white;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03);
}
.site-nav {
margin: 0;
padding: 0;
list-style-type: none;
}
.site-nav__item {
display: inline-block;
padding: 5px 15px;
line-height: 30px;
font-size: 14px;
vertical-align: middle;
}
.site-nav__item--featured {
position: relative;
z-index: 0;
border: 1px solid #eee;
border-radius: 3px;
color: black;
font-family: 'Avenir Medium';
overflow: hidden;
}
.site-nav__item--featured::before {
content: "";
position: absolute;
left: -30px;
top: -10px;
z-index: -1;
height: 300%;
width: 14px;
background-color: #74c9f7;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.site-nav__item--featured:hover::before {
left: calc(100%);
width: 150px;
}
.user-image {
width: 30px;
height: auto;
margin-top: 5px;
}
#search_bar {
position: fixed;
z-index: 100;
width: 100%;
}
#location_search {
margin-top: 0;
-webkit-transition: margin-top 0.35s ease-out;
transition: margin-top 0.35s ease-out;
}
.search-bar {
background-color: white;
}
.search-bar__item {
padding-top: 30px;
padding-bottom: 15px;
background-color: white;
border-bottom: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
}
.search-bar__item.col-full {
border-left: 1px solid #f2f2f2;
}
#feature_search .search-bar__item:first-of-type {
border-left: 1px solid #f2f2f2;
border-bottom-left-radius: 3px;
}
#feature_search .search-bar__item:last-of-type {
border-bottom-right-radius: 3px;
}
.search-label {
position: absolute;
top: 15px;
left: 30px;
color: #ccc;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.75px;
}
.search-bar input {
width: 100%;
padding: 10px 15px;
border-radius: 3px;
border: 1px solid #f2f2f2;
}
.search-advanced-link {
color: #888;
font-size: 10px;
text-transform: uppercase;
}
.button {
display: block;
padding: 5px 10px;
color: #777;
border: 1px solid #ccc;
border-radius: 3px;
background-color: white;
-webkit-transition: background-color 0.1s ease-out, color 0.1s ease-out;
transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
.button:hover {
background-color: #0d95de;
border-color: #0d95de;
color: white;
-webkit-transition: background-color 0.1s ease-out, color 0.1s ease-out;
transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
.search-bar .button:only-of-type {
min-height: 43px;
width: 100%;
font-family: 'Avenir Light';
font-size: 14px;
line-height: 25px;
}
.range-slider {
position: relative;
z-index: 0;
height: 40px;
width: 100%;
}
.range-slider::before {
content: "";
position: absolute;
top: 50%;
left: 10px;
right: 10px;
height: 5px;
background-color: #f2f2f2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.handle {
position: absolute;
top: 50%;
z-index: 10;
width: 20px;
height: 20px;
background-color: #0d95de;
border: 3px solid white;
border-radius: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.handle:hover {
-webkit-box-shadow: 0 0 10px rgba(13, 149, 222, 0.4);
box-shadow: 0 0 10px rgba(13, 149, 222, 0.4);
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.handle--left {
left: 0;
}
.handle--right {
right: 0;
}
.filter-list {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
}
.filter-list__item {
padding: 5px 0;
}
.button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.button-group .button {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding: 10px 0 7px;
text-align: center;
border-radius: 0;
border-right: 0;
line-height: 24px;
}
.button-group .button img {
max-height: 16px;
}
.button-group .button:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.button-group .button:last-of-type {
border-right: 1px solid #ccc;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.button-group .button:hover {
border-right: 1px solid #0d95de;
}
.button:hover + .button,
.button:hover + input + .button {
border-left: 0;
}
input:checked + .button {
color: white;
background-color: #0d95de;
border-right: 1px solid #0d95de;
border-color: #0d95de;
}
input:checked + .button + input + .button {
border-left: 0;
}
.page-title h1 {
letter-spacing: 1px;
}
.card {
margin-bottom: 30px;
padding-bottom: 15px;
}
.card__title {
position: relative;
top: -5px;
font-family: 'Avenir Medium';
font-size: 24px;
letter-spacing: 0.4px;
}
.card__title small {
font-size: 14px;
}
.card__price {
position: relative;
display: block;
}
.card__featured {
position: absolute;
top: 50%;
right: 0;
color: #0d95de;
font-size: 19px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.card__featured::after {
content: "\f00c";
color: white;
position: absolute;
left: 2.5px;
top: 4px;
font-size: 11px;
}
.card__image {
position: relative;
width: 100%;
background-size: cover;
background-position: center;
}
.card__image img {
visibility: hidden;
max-width: 100%;
}
.card__banner {
position: absolute;
bottom: 10px;
left: -10px;
max-width: 100%;
padding: 7px 10px 5px;
color: white;
background-color: #0d95de;
vertical-align: middle;
}
.card__price {
font-family: 'Avenir Medium';
font-size: 28px;
}
.card__meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 7px;
}
.meta__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: table-cell;
height: 100%;
vertical-align: middle;
padding: 0 10px;
color: #0d95de;
border-right: 1px solid #f2f2f2;
font-family: 'Avenir Medium';
font-size: 14px;
}
.meta__item.text-muted {
color: #ccc;
font-family: 'Avenir Light';
}
.meta__item:first-of-type {
padding-left: 0;
}
.meta__item:last-of-type {
border: 0;
}
.card__text {
font-size: 16px;
line-height: 22px;
}
.card__actions .button {
color: #333;
font-family: 'Avenir Light';
font-size: 12px;
letter-spacing: 1px;
}
.card__actions .button:hover {
color: white;
}
#map-canvas {
width: 100%;
height: 350px;
}
.list-three-columns {
margin: 0;
padding: 0;
list-style-type: none;
-webkit-columns: 3;
columns: 3;
}
.footer {
position: relative;
z-index: 1000;
padding: 30px;
background-color: #333;
font-size: 12px;
}
.footer a {
color: white;
text-decoration: none;
-webkit-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
}
.footer a:hover {
-webkit-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
}
.footer-title {
color: white;
font-family: 'Avenir Medium';
font-size: 14px;
letter-spacing: 0.75px;
text-transform: uppercase;
}
.footer .list-three-columns {
margin-top: 15px;
padding-left: 30px;
letter-spacing: 0.5px;
}
.footer .list-three-columns li {
margin-bottom: 10px;
}
.footer .list-three-columns li a {
color: #ccc;
}
.footer .list-three-columns li a:hover {
color: white;
}
.sub-footer {
padding: 30px;
background-color: #111;
}
.sub-footer p {
margin: 0;
color: #ccc;
}
.sub-footer p:not(:last-of-type) {
padding-bottom: 30px;
}
.filters {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1005;
display: none;
width: 100%;
padding: 30px;
padding-top: 90px;
color: white;
background-color: #0d95de;
}
.filter-label {
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.filters .button:hover {
color: #0d95de;
border-color: #ccc;
background-color: white;
}
.filters .button:hover span {
color: #0d95de;
text-shadow: 1px 0 0 #fff, -1px 0 0 #fff;
}
</style></head><body>
<header class="site-header row">
<div class="col-5of6 col-offset-1of12">
<div class="row">
<div class="col-3of4">
<ul class="site-nav">
<li class="site-nav__item">
<img class="site-logo" src="https://leasingkc.com/wp-content/themes/leasingkc-new/assets/img/logo-blue.png" alt="Leasing KC" />
</li>
<li class="site-nav__item">
Search
</li>
<li class="site-nav__item">
Apply
</li>
<li class="site-nav__item">
About
</li>
<li class="site-nav__item site-nav__item--featured">
List with us!
</li>
</ul>
</div>
<div class="col-1of4 text-right">
<ul class="site-nav">
<li class="site-nav__item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/01c84f5cba77757bd10a5e6f75dbfd5b.jpeg" alt="" class="rounded user-image" />
</li>
<li class="site-nav__item" style="margin-top: -5px;">
My Account <i class="fa fa-caret-down"></i>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="row" id="search_bar">
<div class="col-5of6 col-offset-1of12">
<div class="search-bar">
<div class="row" id="location_search">
<div class="col-full search-bar__item p-x-2">
<span class="search-label">Location</span>
<input type="text" id="pac-input" class="input-inline" placeholder="Select your location..." />
</div>
</div>
<div class="row" id="feature_search">
<div class="col-3of10 search-bar__item p-x-2">
<span class="search-label">Price: $0 to $2500+</span>
<div class="range-slider">
<span class="handle handle--left"></span>
<span class="handle handle--right"></span>
</div>
</div>
<div class="col-3of10 search-bar__item p-x-2">
<span class="search-label">Bedrooms</span>
<div class="button-group">
<input type="checkbox" class="hidden" id="bedrooms_0" />
<label for="bedrooms_0" class="button">Studio</label>
<input type="checkbox" class="hidden" id="bedrooms_1" />
<label for="bedrooms_1" class="button">1</label>
<input type="checkbox" class="hidden" id="bedrooms_2" />
<label for="bedrooms_2" class="button">2</label>
<input type="checkbox" class="hidden" id="bedrooms_3" />
<label for="bedrooms_3" class="button">3</label>
<input type="checkbox" class="hidden" id="bedrooms_4" />
<label for="bedrooms_4" class="button">4+</label>
</div>
</div>
<div class="col-1of5 search-bar__item p-x-2">
<span class="search-label">Pets</span>
<div class="button-group">
<input type="checkbox" class="hidden" id="pet_dogs" />
<label for="pet_dogs" class="button">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/sitting-dog.svg" alt="" />
</label>
<input type="checkbox" class="hidden" id="pet_cats" />
<label for="pet_cats" class="button">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/138442/halloween-black-cat.svg" alt="" />
</label>
</div>
<span class="search-advanced-link">Advanced Pet Search</span>
</div>
<div class="col-1of5 search-bar__item p-x-2">
<span class="search-label">Filters</span>
<button class="button btn--clear">Add Filter</button>
</div>
</div>
</div>
</div>
</div>
<div class="row page-title">
<div class="col-4of5 col-offset-1of10">
<h1>Pet-friendly apartments in Overland Park, KS</h1>
</div>
</div>
<div class="row m-t-2">
<div class="col-4of5 col-offset-1of10">
<div class="row m-b-1">
<div class="col-1of2">
Sort by: <span class="text-muted">Relevance <i class="fa fa-caret-down"></i></span>
</div>
<div class="col-1of2 text-right">
<span class="text-muted">142 results</span>
</div>
</div>
</div>
<div class="col-3of5 col-offset-1of10">
<div class="card-list">
<div class="card">
<div class="row">
<div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/05/2.jpg');">
<img src="https://leasingkc.com/wp-content/uploads/2016/05/2.jpg" alt="" />
<span class="card__banner">This listing has a longer special!</span>
</div>
<div class="col-5of8 p-x-2">
<span class="card__title">The Denton Building <small class="text-muted">KC420</small></span>
<span class="card__price">$550 - $1200 <i class="card__featured fa fa-certificate"></i></span>
<div class="card__meta">
<span class="meta__item">Studio - 2 Bed</span>
<span class="meta__item">1 - 2 Bath</span>
<span class="meta__item">5 Floor Plans</span>
<span class="meta__item text-muted">Updated 2 days ago</span>
</div>
<p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p>
<div class="card__actions">
<button class="button">Check Availability</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/07/IMG_2232-1-768x512.jpg');">
<img src="https://leasingkc.com/wp-content/uploads/2016/07/IMG_2232-1-768x512.jpg" alt="" />
</div>
<div class="col-5of8 p-x-2">
<span class="card__title">2202 W. 47th Terrace, Westwood, KS <small class="text-muted">KC369</small></span>
<span class="card__price">$550 - $1200</span>
<div class="card__meta">
<span class="meta__item">Studio - 2 Bed</span>
<span class="meta__item">1 - 2 Bath</span>
<span class="meta__item">5 Floor Plans</span>
<span class="meta__item text-muted">Updated 2 days ago</span>
</div>
<p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p>
<div class="card__actions">
<button class="button">Check Availability</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/07/IMG_2595.jpg');">
<img src="https://leasingkc.com/wp-content/uploads/2016/07/IMG_2595.jpg" alt="" />
</div>
<div class="col-5of8 p-x-2">
<span class="card__title">2543 Cherry St. <small class="text-muted">KC369</small></span>
<span class="card__price">$550 - $1200</span>
<div class="card__meta">
<span class="meta__item">Studio - 2 Bed</span>
<span class="meta__item">1 - 2 Bath</span>
<span class="meta__item">5 Floor Plans</span>
<span class="meta__item text-muted">Updated 2 days ago</span>
</div>
<p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p>
<div class="card__actions">
<button class="button">Check Availability</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/07/IMG_2270-1.jpg');">
<img src="https://leasingkc.com/wp-content/uploads/2016/07/IMG_2270-1.jpg" alt="" />
<span class="card__banner">Free first month!</span>
</div>
<div class="col-5of8 p-x-2">
<span class="card__title">Park South <small class="text-muted">KC369</small></span>
<span class="card__price">$550 - $1200</span>
<div class="card__meta">
<span class="meta__item">Studio - 2 Bed</span>
<span class="meta__item">1 - 2 Bath</span>
<span class="meta__item">5 Floor Plans</span>
<span class="meta__item text-muted">Updated 2 days ago</span>
</div>
<p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p>
<div class="card__actions">
<button class="button">Check Availability</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/06/Steeplechase-Exterior-1-768x512.jpg');">
<img src="https://leasingkc.com/wp-content/uploads/2016/06/Steeplechase-Exterior-1-768x512.jpg" alt="" />
</div>
<div class="col-5of8 p-x-2">
<span class="card__title">Steeplechase Apartment Community <small class="text-muted">KC369</small></span>
<span class="card__price">$550 - $1200</span>
<div class="card__meta">
<span class="meta__item">Studio - 2 Bed</span>
<span class="meta__item">1 - 2 Bath</span>
<span class="meta__item">5 Floor Plans</span>
<span class="meta__item text-muted">Updated 2 days ago</span>
</div>
<p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p>
<div class="card__actions">
<button class="button">Check Availability</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-3of8 p-t-1 card__image" style="background-image: url('https://leasingkc.com/wp-content/uploads/2016/05/1914-main-8-768x576.jpg');">
<img src="https://leasingkc.com/wp-content/uploads/2016/05/1914-main-8-768x576.jpg" alt="" />
</div>
<div class="col-5of8 p-x-2">
<span class="card__title">1914 Main <small class="text-muted">KC369</small></span>
<span class="card__price">$550 - $1200</span>
<div class="card__meta">
<span class="meta__item">Studio - 2 Bed</span>
<span class="meta__item">1 - 2 Bath</span>
<span class="meta__item">5 Floor Plans</span>
<span class="meta__item text-muted">Updated 2 days ago</span>
</div>
<p class="card__text">Welcome to the Denton Building! The brand new Denton Building offers sophisticated apartment living in a unique community that combines retail shops, office space and luxury apartments. Spacious one and two bedroom apartment homes feature …</p>
<div class="card__actions">
<button class="button">Check Availability</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1of5">
<div id="map-canvas"></div>
</div>
</div>
<footer class="footer">
<div class="row">
<div class="col-4of5 col-offset-1of10">
<span class="footer-title">Popular Locations</span>
<ul class="list-three-columns">
<li><a href="https://leasingkc.com/listings/bonner-springs">Bonner Springs Apartments</a></li>
<li><a href="https://leasingkc.com/listings/fairway">Fairway Apartments</a></li>
<li><a href="https://leasingkc.com/listings/gardner">Gardner Apartments</a></li>
<li><a href="https://leasingkc.com/listings/kansas-city,-ks">Kansas City, KS Apartments</a></li>
<li><a href="https://leasingkc.com/listings/lansing">Lansing Apartments</a></li>
<li><a href="https://leasingkc.com/listings/lawrence">Lawrence Apartments</a></li>
<li><a href="https://leasingkc.com/listings/leavenworth">Leavenworth Apartments</a></li>
<li><a href="https://leasingkc.com/listings/leawood">Leawood Apartments</a></li>
<li><a href="https://leasingkc.com/listings/lenexa">Lenexa Apartments</a></li>
<li><a href="https://leasingkc.com/listings/merriam">Merriam Apartments</a></li>
<li><a href="https://leasingkc.com/listings/mission">Mission Apartments</a></li>
<li><a href="https://leasingkc.com/listings/olathe">Olathe Apartments</a></li>
<li><a href="https://leasingkc.com/listings/osawatomie">Osawatomie Apartments</a></li>
<li><a href="https://leasingkc.com/listings/overland-park">Overland Park Apartments</a></li>
<li><a href="https://leasingkc.com/listings/prairie-village">Prairie Village Apartments</a></li>
<li><a href="https://leasingkc.com/listings/roeland-park">Roeland Park Apartments</a></li>
<li><a href="https://leasingkc.com/listings/shawnee">Shawnee Apartments</a></li>
<li><a href="https://leasingkc.com/listings/spring-hill">Spring Hill Apartments</a></li>
<li><a href="https://leasingkc.com/listings/topeka">Topeka Apartments</a></li>
<li><a href="https://leasingkc.com/listings/westwood">Westwood Apartments</a></li>
<li><a href="https://leasingkc.com/listings/belton">Belton Apartments</a></li>
<li><a href="https://leasingkc.com/listings/blue-springs">Blue Springs Apartments</a></li>
<li><a href="https://leasingkc.com/listings/gladstone">Gladstone Apartments</a></li>
<li><a href="https://leasingkc.com/listings/grandview">Grandview Apartments</a></li>
<li><a href="https://leasingkc.com/listings/harrisonville">Harrisonville Apartments</a></li>
<li><a href="https://leasingkc.com/listings/independence">Independence Apartments</a></li>
<li><a href="https://leasingkc.com/listings/kansas-city,-mo">Kansas City, MO Apartments</a></li>
<li><a href="https://leasingkc.com/listings/lees-summit">Lee's Summit Apartments</a></li>
<li><a href="https://leasingkc.com/listings/lexington">Lexington Apartments</a></li>
<li><a href="https://leasingkc.com/listings/liberty">Liberty Apartments</a></li>
<li><a href="https://leasingkc.com/listings/nevada">Nevada Apartments</a></li>
<li><a href="https://leasingkc.com/listings/north-kansas-city">North Kansas City Apartments</a></li>
<li><a href="https://leasingkc.com/listings/oak-grove">Oak Grove Apartments</a></li>
<li><a href="https://leasingkc.com/listings/raytown">Raytown Apartments</a></li>
<li><a href="https://leasingkc.com/listings/riverside">Riverside Apartments</a></li>
<li><a href="https://leasingkc.com/listings/savannah">Savannah Apartments</a></li>
<li><a href="https://leasingkc.com/listings/st.-joseph">St. Joseph Apartments</a></li>
<li><a href="https://leasingkc.com/listings/warrensburg">Warrensburg Apartments</a></li>
<li><a href="https://leasingkc.com/listings/excelsior-springs">Excelsior Springs Apartments</a></li>
<li><a href="https://leasingkc.com/listings/18th-&-vine-district">18th & Vine District Apartments</a></li>
<li><a href="https://leasingkc.com/listings/briarcliff">Briarcliff Apartments</a></li>
<li><a href="https://leasingkc.com/listings/brookside">Brookside Apartments</a></li>
<li><a href="https://leasingkc.com/listings/crossroads">Crossroads Apartments</a></li>
<li><a href="https://leasingkc.com/listings/downtown">Downtown Apartments</a></li>
<li><a href="https://leasingkc.com/listings/east-kc">East KC Apartments</a></li>
<li><a href="https://leasingkc.com/listings/hyde-park">Hyde Park Apartments</a></li>
<li><a href="https://leasingkc.com/listings/midtown">Midtown Apartments</a></li>
<li><a href="https://leasingkc.com/listings/northeast-kc">Northeast KC Apartments</a></li>
<li><a href="https://leasingkc.com/listings/northland">Northland Apartments</a></li>
<li><a href="https://leasingkc.com/listings/platte-woods">Platte Woods Apartments</a></li>
<li><a href="https://leasingkc.com/listings/plaza">Plaza Apartments</a></li>
<li><a href="https://leasingkc.com/listings/river-market">River Market Apartments</a></li>
<li><a href="https://leasingkc.com/listings/south-kc">South KC Apartments</a></li>
<li><a href="https://leasingkc.com/listings/umkc-:-rockhurst">UMKC / Rockhurst Apartments</a></li>
<li><a href="https://leasingkc.com/listings/union-hill">Union Hill Apartments</a></li>
<li><a href="https://leasingkc.com/listings/volker-:-39th-street">Volker / 39th Street Apartments</a></li>
<li><a href="https://leasingkc.com/listings/waldo">Waldo Apartments</a></li>
<li><a href="https://leasingkc.com/listings/west-bottoms">West Bottoms Apartments</a></li>
<li><a href="https://leasingkc.com/listings/westport">Westport Apartments</a></li>
<li><a href="https://leasingkc.com/listings/westside-dowtown">Westside Dowtown Apartments</a></li>
<li><a href="https://leasingkc.com/listings/zona-rosa">Zona Rosa Apartments</a></li>
<li><a href="https://leasingkc.com/listings/ku-med">KU Med Apartments</a></li>
<li><a href="https://leasingkc.com/listings/legends-:-kansas-speedway">Legends / Kansas Speedway Apartments</a></li>
</ul>
</div>
</div>
</footer>
<footer class="sub-footer">
<p class="text-center">LeasingKC is a veteran owned company and we proudly support our troops and all our veterans!</p>
<p class="text-center">info@leasingkc.com | P.O. Box 22595 Kansas City, MO 64113</p>
</footer>
<div class="filters" id="filters">
<div class="row">
<div class="col-1of2 p-x-2">
<span class="filter-label">Property Type</span>
<div class="button-group">
<input type="checkbox" class="hidden" id="pt_apartment" />
<label for="pt_apartment" class="button"><span>Apartment</span></label>
<input type="checkbox" class="hidden" id="pt_condo" />
<label for="pt_condo" class="button"><span>Condo</span></label>
<input type="checkbox" class="hidden" id="pt_loft" />
<label for="pt_loft" class="button"><span>Loft</span></label>
<input type="checkbox" class="hidden" id="pt_house" />
<label for="pt_house" class="button"><span>House</span></label>
<input type="checkbox" class="hidden" id="pt_duplex" />
<label for="pt_duplex" class="button"><span>Duplex</span></label>
<input type="checkbox" class="hidden" id="pt_55" />
<label for="pt_55" class="button"><span>55+</span></label>
<input type="checkbox" class="hidden" id="pt_office" />
<label for="pt_office" class="button"><span>Office</span></label>
</div>
</div>
<div class="col-1of2 p-x-2">
<span class="filter-label">Bathrooms</span>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/headroom.min.js'></script>
<script >// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')){
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595,13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
}
// grab an element
var myElement = document.getElementById("search_bar");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
headroom.onPin = function() {
$('#location_search').css('marginTop', '0');
};
headroom.onUnpin = function() {
$('#location_search').css('marginTop', '-' + $('#location_search').outerHeight() + 'px');
};
headroom.tolerance = {
up: 50,
down: 15
};
var pageTitle = $('.page-title');
var height = $('#search_bar').outerHeight();
pageTitle.css('marginTop', height);
//# sourceURL=pen.js
</script>
</body></html>
