@import 'compass/utilities/general/clearfix';
@import 'compass/css3/images';
@import 'compass/css3/background-clip';
@import 'compass/css3/border-radius';
@import 'compass/css3/box-sizing';
@import 'compass/css3/box-shadow';
@import 'compass/css3/images';
@import 'compass/css3/text-shadow';
@import 'compass/css3/transition';

@import 'mixins';
@import 'forms';
@import 'navigation';
@import 'palette';
@import 'gallery';
@import 'search';
@import 'ezmark';
@import 'simplenews';
@import 'faq';
@import 'slider';
@import 'agents';
@import 'partners';
@import 'filters';
@import 'properties';
@import 'propertydetail';
@import 'carousel';
@import 'features';
@import 'header';
@import 'triptych';
@import 'footer';

html { height: 100%; }
body { -webkit-font-smoothing: antialiased; background-color: $gray-lighter; color: $gray; font-family: 'Roboto', 'Arial', sans-serif; font-size: 14px; height: 100%; margin: 0px; padding: 0px;
	a { @include transition(color .1s ease-in); color: $blue;
		&:hover { color: darken($blue, 10%);  text-decoration: underline; }
	}
  hr { border-top: 0px; }
  p {
    line-height: 20px;
    &.content-icon-spacing { padding-left: 55px; }
  }

  iframe.map { @include box-sizing(border-box); @include shadow; border: 15px solid #ffffff; margin-bottom: 20px; width: 100%; }

	#wrapper-outer { height: 100%; 
		#wrapper { @include transition(left .3s ease-in); display: table; height: 100%; position: relative; width: 100%;
			#wrapper-inner { display: table-row; height: 100%; }
			#footer-wrapper { display: table-row; height: 1px; }
		}
	}
  #bottom { margin-bottom: 0px; }

	&.toolbar-drawer { padding-top: 65px !important; 
		#footer-wrapper { margin-top: -65px; }
	}
}

@media(min-width: 980px) {
  body {
    padding-top: 0px;
  }
}

h1.page-header { border: 0px; color: $blue-dark; font-size: 30px; font-weight: lighter; line-height: 30px; margin: 20px 0px; padding: 0px; }
h2 { color: $blue-dark; font-size: 24px; font-weight: lighter; margin: 20px 0px; }
h3 { color: $black; font-size: 18px; font-weight: normal;
  &.address { background-image: url('../img/icons/bubble-address.png'); background-position: left center; background-repeat: no-repeat; background-size: 34px 35px; padding-left: 55px; }
  &.call-us { background-image: url('../img/icons/bubble-call-us.png'); background-position: left center; background-repeat: no-repeat; background-size: 34px 35px; padding-left: 55px; }
  &.email { background-image: url('../img/icons/bubble-email.png'); background-position: left center; background-repeat: no-repeat; background-size: 34px 35px; padding-left: 55px; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    &.address { background-image: url('../img/icons/bubble-address@2x.png'); }
    &.call-us { background-image: url('../img/icons/bubble-call-us@2x.png'); }
    &.email { background-image: url('../img/icons/bubble-email@2x.png'); }
  }
}

@media (max-width: 979px) {
  body {
    &.nav-open {
      #wrapper-outer { overflow-x: hidden;
        #wrapper {  left: 70%; }
      }
    }
  }
}
#wrapper-outer.no-triptych { 
    #content { padding-bottom: 30px; }
}

#content {
  section {
    article { }
    iframe { width: 100% !important; }
    .faces {     
      h2 { text-align: center; margin-bottom: 0px; }
      p { text-align: center; }
    }
  }
}

@media (max-width: 767px) {
  #content {
    section { 
      article { margin-left: 20px; margin-right: 20px;     
        .faces { text-align: center;
          h2 { text-align: center; }
          p { text-align: center; }
        }
      }
    }
  }
}

aside {
  .block {
    .title {
      h2 { color: $gray; font-size: 24px; font-weight: lighter; line-height: 30px; }
    }
    .content {
      .sf-menu { float: none; width: auto;
        li { background-color: transparent; background-image: url('../img/block-nav-border.png'); background-position: left bottom; background-repeat: repeat-x; color: $blue-dark; float: none; list-style: disc; list-style-position: inside; padding: 6px 0px; width: auto;
          a { border: 0px; color: $blue; display: inline-block; line-height: 23px; padding: 0px;
            &:hover { background-color: transparent; }
          }
          &:first-child { padding-top: 0px; }
          &:last-child { background-image: none; }
        }
      }
      .nav {
        li { background-image: url('../img/block-nav-border.png'); background-position: left bottom; background-repeat: repeat-x; color: $blue-dark; list-style: disc; list-style-position: inside; padding: 6px 0px;
          a { color: $blue; display: inline-block; line-height: 23px;
            &:hover { background-color: transparent; }
          }
          &:first-child { padding-top: 0px; }
          &:last-child { background-image: none; }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  h1.page-header { padding-left: 20px; padding-right: 20px; }
  aside { padding-left: 20px; padding-right: 20px; }
}

.sidebar {
	.well { @include border-radius(0px); @include box-shadow(none); background-color: transparent; border: 0px; padding: 0px;
		.title {
			h2 { font-size: 24px; font-weight: 100; }
		}
		.content { background-color: #fff; padding: 20px; }
	}	
}

.btn {
  @include transition(background-color .2s ease-in); @include background-image(none); @include border-radius(0px); @include box-shadow(none); @include text-shadow(none); border: 0px; color: #fff; padding: 7px 15px 7px 15px;
  &:hover, &:active, &:focus {
    @include border-radius(0px); @include box-shadow(none); @include text-shadow(none); @include transition(background-color .2s ease-in); border: 0px; color: #fff;
  }

  &.btn-primary { background-color: $blue;
    &:hover { background-color: darken($blue, 10%); }
  }
}

.view-display-id-frontpage_slider { height: 428px; overflow: hidden; 
	.views-row {
		img { height: 428px; width: 100%; }
	}
}

.breadcrumb-wrapper { background-color: $breadcrumbs-color; border-bottom: 1px solid transparent;
  .breadcrumb { @include border-radius(0px); background-color: transparent; margin: 0px; padding: 0px;
    li { @include text-shadow(none); color: #ffffff; font-size: 12px; 
      a { @include text-shadow(none); color: $blue; display: inline-block; padding: 3px 5px; }
      .divider { @include text-shadow(none); color: #ffffff; }
    }
  }
}

@media (max-width: 767px) {
  .breadcrumb-wrapper { padding-left: 20px; padding-right: 20px;
    .breadcrumb {
      li {
        &:first-child {
          a { padding-left: 0px; }
        }
      }
    }
  }
}


ul.pager { @include border-radius(0px); @include box-shadow(none); margin-bottom: 0px; margin-top: 30px;
  li {
    a { @include border-radius(0px); @include box-shadow(0px 1px 1px rgba(1, 1, 1, .25)); background-color: #fff; border: 0px; margin: 0px 10px; padding: 7px 14px;
      &:hover { background-color: $blue; color: #ffffff; }
    }
    &.active {
      a { background-color: $blue-light; color: #ffffff; }
    }
    &:first-child, &:last-child {
      a { @include border-radius(0px); }
    }
  }
}

@media (max-width: 767px) {
  ul.pager {
    li {
      a { margin: 0px 3px; }
    }
  }
}

.not-found { background-image: url('../img/icons/404.png'); background-position: center top; background-repeat: no-repeat; background-size: 197px 218px; margin-bottom: 100px; margin-top: 100px; padding-top: 120px;
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    background-image: url('../img/icons/404@2x.png');
  }
  strong { color: $blue-dark; display: block; font-size: 222px; font-weight: normal; margin-bottom: 100px; text-align: center; }
  h1 { font-size: 30px; font-weight: lighter; text-align: center; }
  hr { margin: 20px auto; width: 365px; }
  .form-search { float: none; margin: 27px auto 10px auto; width: 360px;
    .input-append {
    label { display: none; }
    input { @include border-radius(0px); border-right: 0px; width: 326px; }
    button { @include background-image(none); @include border-radius(0px); @include box-shadow(none); @include text-shadow(none);
      background-color: #fff; background-image: url('../img/icons/search.png'); background-position: center center; background-repeat: no-repeat; background-size: 13px 13px; border: 1px solid $gray-medium; border-left: 0px; display: inline-block; margin: 0px 0px 0px -5px; padding: 6px 15px; vertical-align: top; text-indent: -9999px; }
    }
    .control-group { display: inline-block; margin: 0px; }
  }
  p { font-size: 18px; text-align: center;
    a { text-decoration: underline; }
  }
}

.infoBox { position: relative;
  > img { display: none; }

  .infobox { @include clearfix-normal; background-color: #fff; padding: 10px; position: relative; width: 270px; z-index: 500;
    .views-field-field-image { float: left; margin-bottom: 10px; margin-right: 10px; }
    .views-field-title { font-size: 18px; 
      a {
        &:href { text-decoration: none; }
      }
    }
    .views-field-field-location {}
    .views-field-field-area { color: $black; margin-top: 5px; 
      .views-label { float: left; font-weight: bold; }
    }
    .views-field-field-price { clear: left; color: $black; float: left; font-size: 18px; margin-top: 8px; }
    .views-field-view-node { 
      a { @include buttonize; clear: right; float: right; 
        &:hover { text-decoration: none; }
      }
    }
    &:before { bottom: -16px; border: 8px solid transparent; border-top-color: #ffffff; content: ''; height: 0px; margin-left: -8px; left: 50%; position: absolute; width: 0px; z-index: 100; }
  }
}


.marker {
  background-image: url('../img/markers/marker-blue.png'); background-position: center top; background-repeat: no-repeat; background-size: 42px 57px; cursor: pointer; height: 57px; opacity: .8; position: relative; width: 42px;
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    background-image: url('../img/markers/marker-blue@2x.png');
  }

  .marker-inner {
    background-image: url('../img/markers/icons/other.png'); background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

  }

  &:hover {
    margin-top: -10px; padding-bottom: 10px; opacity: 1;
  }

  &.term-1 {
    .marker-inner {
      background-image: url('../img/markers/icons/single-house.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

  &.term-2 {
    .marker-inner {
      background-image: url('../img/markers/icons/family-house.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

  &.term-3 {
    .marker-inner {
      background-image: url('../img/markers/icons/apartment.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

  &.term-4 {
    .marker-inner {
      background-image: url('../img/markers/icons/villa.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

  &.term-5 {
    .marker-inner {
      background-image: url('../img/markers/icons/condo.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

  &.term-6 {
    .marker-inner {
      background-image: url('../img/markers/icons/cottage.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

  &.term-7 {
    .marker-inner {
      background-image: url('../img/markers/icons/building-area.png') !important; background-position: 6px 5px; background-repeat: no-repeat; width: 36px; height: 36px; position: relative;

    }
  }

}

.clusterer {
  @include border-radius(36px, 36px); border: 5px solid $blue; background-color: #ffffff; width: 24px; height: 24px; opacity: .8;
  .clusterer-inner {
    text-align: center; line-height: 24px; color: $blue-dark; font-weight: 900; width: 100%; height: 100%;
  }
}

body.green {
  .marker {
    background-image: url('../img/markers/marker-green.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-green@2x.png');
    }
  }
}

body.green-light {
  .marker {
    background-image: url('../img/markers/marker-green-light.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-green-light@2x.png');
    }
  }
}

body.brown {
  .marker {
    background-image: url('../img/markers/marker-brown.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-brown@2x.png');
    }
  }
}

body.brown-dark {
  .marker {
    background-image: url('../img/markers/marker-brown-dark.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-brown-dark@2x.png');
    }
  }
}

body.turquiose {
  .marker {
    background-image: url('../img/markers/marker-brown-dark.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-brown-dark@2x.png');
    }
  }
}

body.orange {
  .marker {
    background-image: url('../img/markers/marker-orange.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-orange@2x.png');
    }
  }
}

body.magenta {
  .marker {
    background-image: url('../img/markers/marker-magenta.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-magenta@2x.png');
    }
  }
}

body.red {
  .marker {
    background-image: url('../img/markers/marker-red.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-red@2x.png');
    }
  }
}

body.violet {
  .marker {
    background-image: url('../img/markers/marker-violet.png');
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/markers/marker-violet@2x.png');
    }
  }
}

body.pattern-cloth-alike {
  #content { background-image: url('../img/patterns/large/cloth-alike.png'); background-repeat: repeat; background-size: 102px 78px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/cloth-alike@2x.png');
    } 
  }
}

body.pattern-corrugation {
  #content { background-image: url('../img/patterns/large/corrugation.png'); background-repeat: repeat; background-size: 8px 5px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/corrugation@2x.png');
    } 
  }
}

body.pattern-diagonal-noise {
  #content { background-image: url('../img/patterns/large/diagonal-noise.png'); background-repeat: repeat; background-size: 100px 100px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/diagonal-noise@2x.png');
    } 
  }
}

body.pattern-dust {
  #content { background-image: url('../img/patterns/large/dust.png'); background-repeat: repeat; background-size: 400px 300px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/dust@2x.png');
    } 
  }
}

body.pattern-fabric-plaid {
  #content { background-image: url('../img/patterns/large/fabric-plaid.png'); background-repeat: repeat; background-size: 102px 78px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/fabric-plaid@2x.png');
    } 
  }
}

body.pattern-farmer {
  #content { background-image: url('../img/patterns/large/farmer.png'); background-repeat: repeat; background-size: 200px 200px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/farmer@2x.png');
    } 
  }
}

body.pattern-grid-noise {
  #content { background-image: url('../img/patterns/large/grid-noise.png'); background-repeat: repeat; background-size: 98px 98px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/grid-noise@2x.png');
    } 
  }
}

body.pattern-lightpaperfibers {
  #content { background-image: url('../img/patterns/large/lightpaperfibers.png'); background-repeat: repeat; background-size: 500px 300px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/lightpaperfibers@2x.png');
    } 
  }
}

body.pattern-retina-wood {
  #content { background-image: url('../img/patterns/large/retina-wood.png'); background-repeat: repeat; background-size: 512px 512px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/retina-wood@2x.png');
    } 
  }
}

body.pattern-lghtmesh {
  #content { background-image: url('../img/patterns/large/lghtmesh.png'); background-repeat: repeat; background-size: 256px 256px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/lghtmesh@2x.png');
    } 
  }
}

body.pattern-pw-maze-white {
  #content { background-image: url('../img/patterns/large/pw-maze-white.png'); background-repeat: repeat; background-size: 46px 23px;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/patterns/large/pw-maze-white@2x.png');
    } 
  }
}

body.header-light {
  .breadcrumb-wrapper { background-color: #ffffff; border-bottom: 1px solid $gray-lighter;
    span { color: $gray !important;  }
  }
  #navigation { background-color: $blue-medium; 
    .block-superfish {
      .nolink, a { color: #fff !important; }
      .menuparent {
        > .nolink,
        > a { background-image: url('../img/arrow-bottom-white.png') !important;
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/arrow-bottom-white@2x.png') !important;
          }
        }
        .menuparent {
          > .nolink,
          > a { background-image: url('../img/arrow-right-white.png') !important;
            @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
              background-image: url('../img/arrow-right-white@2x.png') !important;
            }
          }
        }
      }  
    }
  }
}

body.header-dark {
  .breadcrumb-wrapper { background-color: $blue-dark; border-bottom: 1px solid $blue-dark; }
  #header-inner { background-color: $blue-medium; color: #fff; 
    .site-name {
      a { color: #fff !important; }
    }
    .site-phone {
      span { background-image: url("../img/icons/phone-white.png") !important; color: #fff !important; 
        @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
          background-image: url("../img/icons/phone-white@2x.png") !important;
        }
      }
    }
    .site-email {
      a { background-image: url("../img/icons/mail.png") !important; color: #fff !important; 
        @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
          background-image: url("../img/icons/mail@2x.png") !important;
        }
      }
    }
  }
}
