/* --------------------------------------------------
Responsive grid - #fuckomega
Because if you want something done right...
-------------------------------------------------- */

/* clear out some grid crap we cant opt-out of cause of omega */

#messages,
#zone-content,
#region-content,
#directory-map-wrapper,
#map-embed,
#region-footer-first,
footer#section-footer{
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

body,
#page { min-width: 480px; }

#region-menu {
  width: auto;
}

/* so the dropshadow on the menu bar are above stuff we need to position it and give it a z-index */
#zone-menu {
  position: relative;
  z-index: 498;
}
/* facets need to be at a z-index below the search bar, but for the search bar to not obscure the facets,
we need to position #region-menu statically, and give a relative pos and z-ndex to #edit-search (in responsive block well below)
*/
.not-front.solr-search #zone-menu {
  position: static;
}

#region-sidebar-first{
  position: absolute;
  z-index: 220;
  top: 0;
  right: 0;
  margin: 0;
}

.not-front #region-sidebar-first .region-inner,
.not-front #region-sidebar-first .region-content-inner {
  margin-top: 3.125em;
}

.solr-search #region-sidebar-first .region-inner {
  margin-top: 0;
}


/*
------------------------------------------------------------
Footer
------------------------------------------------------------
*/

footer#section-footer {
  box-shadow: 0 -.25em .5em rgba( 0, 0, 0, .675 );
}

footer#section-footer #block-menu-menu-add-your-occupation {
  width: 300px;
  float: left;
}

footer#section-footer #block-menu-menu-feeds-and-exports {
  width: 12em;
  float: right;
  padding-bottom: 3em;
  background-color: #aaa;
  border-left: 1px #000 solid;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

footer#section-footer #block-menu-menu-feeds-and-exports:hover {
  transform: translate(0,-160px);
  -ms-transform: translate(0,-160px); /* IE 9 */
  -webkit-transform: translate(0,-160px); /* Safari and Chrome */
  -o-transform: translate(0,-160px); /* Opera */
  -moz-transform: translate(0,-160px); /* Firefox */
}


@media all and ( min-width: 650px ) and ( max-width: 949px ){

  .not-front #region-content .region-content-inner {
    margin: 0 14em 2em 0;
    padding-right: 2em;
    padding-top: 2em;
  }

  .not-front #region-sidebar-first{
    min-width: 14em;
    padding-top: 2em;
  }

}

/* General width */
@media all and ( min-width: 950px ){

  .not-front #zone-content {
    padding: 0;
    width: auto;
  }

  .not-front #region-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .not-front #region-content .region-content-inner {
    padding-right: 2em;
    margin: 0 18em 2em 7em;
    padding-top: 4em;
    max-width: 600px;
  }

  .not-front #region-sidebar-first{
    min-width: 16em;
    padding-top: 4em;
  }


 .not-front.solr-search #region-sidebar-first:before {
    position: relative;
    float: left;
    top: .925em;
    left: 9em;
    color: #dedede;
    font-size: .875em;
    content: 'Filter by:';
  }

}

@media all and ( min-width: 950px ) {

  .not-front #region-content .region-content-inner{
    max-width: 800px;
    margin: 0 28em 2em 8em;
    padding-top: 4em;
  }


  .not-front #region-sidebar-first{
    min-width: 22em;
    padding-top: 4em;
  }

  .solr-search.not-front #region-content .region-content-inner {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .solr-search #region-sidebar-first{
    padding-top: 0;
  }

}

@media all and ( max-width: 949px ) {

   .not-front.solr-search #region-sidebar-first, 
   #region-sidebar-first {
    position: static;
    width: 100%;
    clear: both;
    padding: 0;
    margin-top: .5em;
  }

  .not-front.solr-search #region-sidebar-first:before {
    position: relative;
    float: left;
    top: 1em;
    left: 9em;
    color: #aaa;
    font-size: .875em;
    content: 'Filter by:';
  }

}

@media all and ( max-width: 520px ) {
  .not-front.solr-search #region-sidebar-first:before {
    position: relative;
    float: left;
    top: 1em;
    left: 2.25em;
    color: #aaa;
    font-size: .875em;
    content: 'Filter by:';
  }

}





/*
-----------------------------------
  Nodes
-----------------------------------
*/


/* General width */
@media all and ( max-width: 1019px ){

  .occupation .ds-right {
    position: absolute;
    z-index: 450;
    top: 11em;
    left: 1.25em;
  }
}

@media all and ( max-width: 949px ){

  .occupation .ds-middle .group_header {
    position: absolute;
    top: 4em;
    left: 16.75em;
  }

  .occupation .ds-left {
  }

  .occupation .ds-left .field-name-field-occupation-website {
    float: left;
  }

  .occupation .ds-middle .group-occupation-description {
    margin-top: 1em;
  }

  .occupation .ds-left .field-name-field-occupation-image,
  .occupation .ds-left .group-donate-info,
  .occupation .ds-left .group-contact {
    display: inline-block;
    vertical-align: top;
    margin-right: 1em;
  }

  .occupation .ds-left .field-name-field-occupation-image {
    margin-right: 2em;
  }


  .occupation .ds-left .group-contact,
  .occupation .ds-left .group-donate-info {
    margin-top: 5em;
    width: 14em;
  }

  .occupation .ds-left .group-contact {
    margin-right: 2em;
  }

  .occupation .ds-left .group_info_misc {
    position: relative;
    margin-left: 17.5em;
  }

  .occupation .ds-middle {
    clear: both;
    position: static;
  }

  .link-group {
    margin: 0 1em .125em 0;
    padding: 1em;
    font-size: .875em;
    background: #eee;
  }

  .link-group ul,
  .link-group .link-listing {
    padding: 0;
  }

  .occupation .ds-left a,
  .item-wrapper a,
  .link-group li a,
  .link-group li {
    display: inline-block;
    width: auto;
  }

  .ds-middle .link-group h3,
  .ds-middle .link-group .label-above {
    padding: 0em;
    margin-top: 0;
  }

  .link-group a,
  .occupation .ds-left a,
  .flyoutmenu .item-wrapper a,
  .occupation .ds-left .group-donate-info a,
  .link-group a:hover,
  .occupation .ds-left a:hover,
  .flyoutmenu .item-wrapper a:hover,
  .occupation .ds-left .group-donate-info a:hover {
    width: auto;
  }

  .node-type-occupation #region-content,
  .page-comment #region-content {
    margin: 0 0 0 0;
  }

  .node-type-occupation #region-content,
  .page-comment #region-content,
  .node-type-occupation #region-content .region-content-inner,
  .page-comment #region-content .region-content-inner{
    width: auto;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .node-type-occupation #region-content .region-content-inner,
  .page-comment #region-content .region-content-inner{
    margin: 2em 0 0 1.5em;
  }
}

@media all and ( min-width: 975px ) {

  .link-listing .field {
    display: inline-block;
    float: left;
  }

  .occupation .ds-left {
    display: inline-block;
    float: left;
    width: 16em;
    margin-left: .5em;
  }

  .occupation .ds-middle {
    width: 45em;
    margin-left: 17em;
  }

  .occupation .ds-right {
    position: absolute;
    left: 67em;
    width: 12em;
    margin-top: .675em;
  }

  .link-group {
    width: 22em;
    margin: 0 1em 1em 0;
    padding: 0;
    background: #eee;
    display: inline-block;
    vertical-align: top;
  }

  .link-group:nth-child(2n+2){
    margin-right: 0;
  }

  .link-group ul,
  .link-group .link-listing {
    padding-left: 1em;
    height: 7em;
    min-height: 7em;
    overflow: auto;
    overflow-y: visible;
    overflow-x: hidden;
  }

  .link-listing:hover,
  .link-group:hover,
  .link-group:hover ul {
    height: auto;
    overflow: auto;
    overflow-y: visible;
    overflow-x: hidden;
  }

  .link-group ul li {
    display: inline-block;
  }

  .link-group a:hover,
  .occupation .ds-left a:hover,
  .occupation .flyoutmenu .item-wrapper a:hover,
  .occupation .ds-left .group-donate-info a:hover {
    color: #fc0;
    width: auto;
    /*margin-bottom:2px;*/
    text-overflow: visible;
    overflow: visible;
  }

  .ds-middle .link-group h3,
  .ds-middle .link-group .label-above {
    padding-left: .75em;
  }

  .node-type-occupation #region-content,
  .node-type-occupation #region-content .region-content-inner,
  .page-comment #region-content,
  .page-comment #region-content .region-content-inner{
    width: auto;
    margin: 0 0 0 3.75em;
    padding: 0 0 0 0;
    max-width: none;
  }

}


/*
------------------------------------------------------------
Overrides
------------------------------------------------------------
*/


.field-name-mapbox-static-map-full {
  overflow: hidden;
  margin-bottom: 2em;
}

.field-name-mapbox-static-map-full img {
  overflow: hidden;
}


.not-front.solr-search #region-content .region-content-inner,
.not-front.solr-search #zone-content {
  width: 100%;
  margin: 0;
  max-width: none;
  padding: 0 0 0 0;
}

.not-front #section-content {
  padding-bottom: 8em;
}

.solr-search #section-content{
  padding-bottom: 0;
}

.occupation .group_meta {
  font-size: .875em;
  color: #666;
  line-height: 1.2;
  margin-bottom: 1em;
}

.occupation .field-name-title h1 {
  margin: 0;
  line-height: 1.125em;
}

.occupation .field-name-field-occupation-image img{
  width: 14.75em;
  height: 14.75em;
  margin-left: -.25em;
  border: .5em #fafafa solid;
  box-shadow: 1px 1px 1px rgba( 0,0,0, .3 );
  margin-bottom: 1em;
}

.occupation .field-name-field-occupation-image{
  float: left;
}

article.occupation { margin-top: 2em; }


.occupation #region-content .region-content-inner {
  margin: 0 auto;
  padding-top: 3em;
  padding-left: 6em;
  box-sizing: border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}