#header-wrapper {
  background: #e6e7e8; /* BRAND COLOR: Light Grey */
}
#header {
  background: url(/sites/all/themes/luna/images/bg-white-radial.png) no-repeat;
}
#navigation-wrapper {
  position: relative;     /* so we can adjust the surroundings for the shadows    */
  background-color: #252526; /* BRAND COLOR: Obsessed Grey */
}
#banner-wrapper {
  background-color: white;
  /* border-bottom: 1px solid #d7d8d6; */
}
#cta {
  background-color: rgba(37,37,38,0.666666667);
}
/* Place the c21 seal. TODO: Spacing needs adjusting */
@media screen and (min-width: 1171px) {
  #banner-wrapper.century21-seal::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: '';
    background-image: url("../../images/seal-relentless-gold.svg");
    background-repeat: no-repeat;
    z-index: 1;
  }
}
@media screen and (min-width: 1171px) and (max-width: 1240px) {
  #banner-wrapper.century21-seal::before {
    background-size: 175px;
  }
  #banner-wrapper.century21-seal.seal-top-left::before {
    background-position: left -50px;
  }
  #banner-wrapper.century21-seal.seal-top-right::before {
    background-position: right -50px;
  }
  #banner-wrapper.century21-seal.seal-bottom-left::before {
    background-position: left bottom -70px;
  }
  #banner-wrapper.century21-seal.seal-bottom-right::before {
    background-position: right bottom -70px;
  }
}
@media screen and (min-width: 1241px) and (max-width: 1440px) {
  #banner-wrapper.century21-seal::before {
    background-size: 250px;
  }
  #banner-wrapper.century21-seal.seal-top-left::before {
    background-position: left -75px;
  }
  #banner-wrapper.century21-seal.seal-top-right::before {
    background-position: right -75px;
  }
  #banner-wrapper.century21-seal.seal-bottom-left::before {
    background-position: left bottom -100px;
  }
  #banner-wrapper.century21-seal.seal-bottom-right::before {
    background-position: right bottom -100px;
  }
}
@media screen and (min-width: 1441px) {
  #banner-wrapper.century21-seal::before {
    background-size: 350px;
  }
  #banner-wrapper.century21-seal.seal-top-left::before {
    background-position: left -100px;
  }
  #banner-wrapper.century21-seal.seal-top-right::before {
    background-position: right -100px;
  }
  #banner-wrapper.century21-seal.seal-bottom-left::before {
    background-position: left bottom -140px;
  }
  #banner-wrapper.century21-seal.seal-bottom-right::before {
    background-position: right bottom -140px;
  }
}
#page-wrapper {
  background: #e6e7e8 /* BRAND COLOR: Light Grey */ url(/sites/all/themes/luna/images/bg-content.png) repeat-x;
  border-top: 1px solid #c7c8c6;
}
#footer-wrapper {
  background: url(/sites/all/themes/luna/images/bg-footer.png) repeat-x;
  padding-top: 16px;      /* 16px for the shadow effect at the top                */
  position: relative;     /* so we can adjust the surrounding for the shadows     */
  top: -3px;              /* push the top part of the shadow up over page-wrapper */
}
/* 
 * TODO: Maybe the shadow effects on the page and footer wrappers should
 *   go on banner and page, since those are the objects casting the shadows
 */
h1.title, h2.section-title, .block h2.title, h2.pane-title {
  background-color: #808285; /* BRAND COLOR: Medium Grey */
  height: 38px;
  line-height: 40px;
  color: #BEAF87; /* BRAND COLOR: Relentless Gold */;
  font-size: 14px;
  padding: 0 15px;
  font-weight: bold;
}
#content .box {
  border: 1px solid #EAEBEC;
}
#content .box > .title {
  font-size: 1em;
  padding: .5em;
  background: #EAEBEC;
  color: #A19276;
}
.search-results .search-snippet strong {
  /* Highlight the keyword in the search results */
  color: #A19276;
  font-style: italic;
}

#content,
.polyptych.container .block,
.polyptych.container .panels_pane,
.region-content-top .block, .region-content-bottom .block,
.sidebar .block,
.footer-columns.container .block,
.region-lower-banner .block.titled-content {
  border: solid 1px #e8eae7;
  background: #fff;
}
/* TODO: Add menu item icons as backgrounds, add indentation for submenus */
/* TODO: Most of this doesn't belong in skin.css, move somewhere more appropriate */
/* TODO: Add a selector for views calendar blocks - might need to preprocess the view as well to get a generic enough selector */
.polyptych.container .block-menu,
.polyptych.container .block-aggregator,
.footer-columns.container .block-aggregator,
.sidebar .block-menu,
.sidebar .block-aggregator,
.sidebar .block-user,
#block-views-blog_posts-block_1,
.om-maximenu-content,
#header .om-maximenu-content .sf-vertical li:hover > ul, 
#header .om-maximenu-content .sf-vertical li.sfHover > ul {
  border: 1px solid #9d9d9f;
  background: #808285;
  background-size: contain;
}
#navigation ul.menu li ul.menu,
#navigation ul.sf-menu li.menuparent > ul,
.om-maximenu-content,
#header .om-maximenu-content .sf-vertical li:hover > ul, 
#header .om-maximenu-content .sf-vertical li.sfHover > ul {
  box-shadow: 0 10px 15px rgba(0,0,0,0.5);
  -mox-box-shadow: 0 10px 15px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.5);
  border-radius: 0 0 3px 3px;
}
.om-maximenu-content .om-maximenu-middle { background: none; }
.polyptych.container .block-menu h2.title,
.polyptych.container .block-aggregator h2.title,
.footer-columns.container .block-aggregator h2.title,
.sidebar .block-menu h2.title,
.sidebar .block-aggregator h2.title, 
.sidebar .block-user h2.title,
#block-views-blog_posts-block_1 h2.title {
  background-color: #252526;
}
.polyptych.container .block-menu .content,
.polyptych.container .block-aggregator .content,
#footer-columns.footer-columns.container .block-aggregator .content,
.sidebar .block-menu .content,
.sidebar .block-aggregator .content, 
.sidebar .block-user .content,
#block-views-blog_posts-block_1.block .content {
  padding: 0;
}
#footer-columns.footer-columns.container .block-aggregator .content span.ext {
  display: none;
}
.polyptych.container .block-menu ul,
.polyptych.container .block-aggregator ul,
.footer-columns.container .block-aggregator ul,
.sidebar .block-menu ul,
.sidebar .block-user ul,
.sidebar .block-aggregator ul,
#block-views-blog_posts-block_1 ul {
  padding: 0;
}
.polyptych.container .block-menu ul li,
.polyptych.container .block-aggregator ul li,
.footer-columns.container .block-aggregator ul li,
.sidebar .block-menu ul li,
.sidebar .block-aggregator ul li,
.sidebar .block-user ul li,
#block-views-blog_posts-block_1 ul li,
.om-maximenu-content ul.menu li,
.om-maximenu-content ul.sf-menu li {
    border-bottom: 1px solid #9d9d9f;
    border-top: none;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1em;
}
.polyptych.container .block-menu ul li.last,
.polyptych.container .block-aggregator ul li.last,
.footer-columns.container .block-aggregator ul li.last,
.sidebar .block-menu ul li.last,
.sidebar .block-aggregator ul li.last,
.sidebar .block-user ul li.last,
#block-views-blog_posts-block_1 ul li.views-row-last,
.om-maximenu-content ul.menu li.last,
.om-maximenu-content ul.sf-menu li.last { 
  border-bottom: none; 
}
.polyptych.container .block-menu ul li a,
.polyptych.container .block-aggregator ul li a,
.footer-columns.container .block-aggregator ul li a,
.sidebar .block-menu ul li a,
.sidebar .block-aggregator ul li a,
.sidebar .block-user ul li a,
.om-maximenu-content ul.menu li a,
.om-maximenu-content ul.sf-menu li a {
  padding: 0.5em 15px;
  text-decoration: none;
  display: block;
}
#block-views-blog_posts-block_1 ul li a {
  text-decoration: none;
}
#block-views-blog_posts-block_1 ul li .views-field {
  padding-left: 0.75em;
  padding-right: 0.75em;
}
#block-views-blog_posts-block_1 ul li .views-field.first {
  padding-top: 0.75em;
}
#block-views-blog_posts-block_1 ul li .views-field.last {
  padding-bottom: 0.75em;
}
.om-maximenu-content .sf-vertical li:hover > ul li, 
.om-maximenu-content .sf-vertical li.sfHover > ul li {
  background: url(/sites/all/files/images/ui_common/75pct_white.png);
}
.polyptych.container .block-menu ul li:hover,
.polyptych.container .block-aggregator ul li:hover,
.footer-columns.container .block-aggregator ul li:hover,
.sidebar .block-menu ul li:hover,
.sidebar .block-aggregator ul li:hover,
.sidebar .block-user ul li:hover,
#block-views-blog_posts-block_1 ul li:hover,
.om-maximenu-content ul.menu li:hover,
.om-maximenu-content ul.sf-menu li:hover {
  background: url(/sites/all/files/images/ui_common/40pct_white.png);
}
.om-maximenu-content .sf-vertical li:hover > ul li:hover, 
.om-maximenu-content .sf-vertical li.sfHover > ul li.sfHover {
  background: url(/sites/all/files/images/ui_common/50pct_white.png);
}
.polyptych.container .block-menu ul li a:hover,
.polyptych.container .block-aggregator ul li a:hover,
.footer-columns.container .block-aggregator ul li a:hover,
.sidebar .block-menu ul li a:hover,
.sidebar .block-aggregator ul li a:hover,
.sidebar .block-user ul li a:hover,
#block-views-blog_posts-block_1 ul li a:hover,
.om-maximenu-content ul.menu li a:hover,
.om-maximenu-content ul.sf-menu li a:hover {
  text-decoration: underline;
}
/* 
 * This is probably not necessary, but some browsers (older IE) don't respond to 
 * the :hover pseudo-class on elements other than a, so the text-decoration
 * effect was added to give some feedback when the li:hover effect is not applied.
 * This disables that for any browsers where the li:hover IS applied.
 * TODO: Check how limited this is -- if it's IE6 only, we can skip it, or at least
 * relegate it to an IE-only stylesheet.
 */
.polyptych.container .block-menu ul li:hover a:hover,
.polyptych.container .block-aggregator ul li:hover a:hover,
.footer-columns.container .block-aggregator ul li:hover a:hover,
.sidebar .block-menu ul li:hover a:hover,
.sidebar .block-aggregator ul li:hover a:hover,
.sidebar .block-user ul li:hover a:hover,
#block-views-blog_posts-block_1 ul li:hover a:hover {
  text-decoration: none;
}

/* Quicksearch - TODO: Deal with Title and optional tabs - maybe automatically jquery tabs multiple blocks in certain regions */
.polyptych.container #block-listingpointe_search-listingpointe_search_quicksearch .content,
.sidebar #block-listingpointe_search-listingpointe_search_quicksearch {
  background: #969696 url(../images/bg-tabgroup-content.png) repeat-x;
}