@import url('custom-styles.css');

/**

 * @file

 * Base styles

 *

 * - Gutter widths.

 * - Default container alignment.

 * - Flexible images and media declarations.

 * - Copies of the SCSS mixins for reference, which includes improved

 *   element-invisible and focusable styles.

 */



/* =============================================================================

   Gutters

   ========================================================================== */



/* If gutters are set in theme settings they will override these

   values: see Extensions > Modify Output > Design */

#main-content,

.block-inner,

.pane-inner,

.menu-wrapper,

.branding-elements,

.breadcrumb-wrapper,

.attribution,

.at-panel .rounded-corner,

div.messages {

  margin-left: 10px;

  margin-right: 10px;

}





/* Panel pages need negative margin equal to the gutter width applied to #content,

  this is taken care of in theme settings as per above for normal gutters */

.page-panels #content {

  margin-left: -10px;

  margin-right: -10px;

}





/* =============================================================================

   Flexible Media and Cross browser improvements

   ========================================================================== */



/**

 * - This can cause issues in table cells where no width is set on the column,

 *   only in some versions of webkit and IE 7/8.

 * - declaring the width attribute on image elements and using max-width causes

 *   the "dissappering images" bug in IE8.

 * - Mapping services such as Google Maps may break also, see below for fixes.

 */



img {

  height: auto;

}





/* /ht Ethan Marcotte - http://front.ie/l8rJaA */

img,

embed,

object,

video {

  max-width: 100%;

}





/* Disable flexiblity for IE8 and below */

.lt-ie9 img,

.lt-ie9 object,

.lt-ie9 embed,

.lt-ie9 video {

  max-width: none;

}





/* Override max-width 100% for moduels and widgets where this fails */

#map img,

.gmap img,

.view-gmap img,

.openlayers-map img,

#getlocations_map_canvas img,

#locationmap_map img,

.geofieldMap img,

.views_horizontal_slider img,

.field-widget-imagefield-crop-widget img {

  max-width: none !important;

}





/* =============================================================================

   Misc helpers, Accessibility classes etc

   ========================================================================== */



/* Prevent overflowing content */

header[role=banner],

.content-inner,

.nav,

.region-sidebar-first,

.region-sidebar-second,

.region-secondary-content,

.region-tertiary-content,

.region-footer {

  overflow: visible;

  word-wrap: break-word;

}





/**

 * General classes for hiding content. These are all included as SASS mixins.

 * @SEE: sass/custom.scss

 */



/**

 * Image replacement

 * Kellum Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

 * Additional helpers from http://html5boilerplate.com/docs/css/

 */

.ir {

  /* Kellum Method */

  display: block !important;

  text-indent: 100%;

  white-space: nowrap;

  overflow: hidden;

  /* Additional helpers */

  border: 0; /* Remove the default border from elements like button */

  font: 0/0 a; /* Crush the text down to take up no space */

  text-shadow: none; /* Remove any text shadows */

  color: transparent; /* Hide any residual text in Safari 4 and any mobile devices that may need it */

  background-color: transparent; /* Hide the default background color on elements like button */

}





/* More robust element-invisible and element-focuable classes */

.element-invisible {

  border: 0;

  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

  clip: rect(1px, 1px, 1px, 1px);

  height: 1px;

  overflow: hidden;

  padding: 0;

  position: absolute;

  width: 1px;

}





.element-invisible.element-focusable:active,

.element-invisible.element-focusable:focus {

  clip: auto;

  height: auto;

  overflow: visible;

  position: static;

  width: auto;

}





/* Shift content offscreen, can be usefull when you reall need to do this */

.offscreen {

  position: absolute;

  top: -99999em;

  width: 1px;

  height: 1px;

  overflow: hidden;

  outline: 0;

}





/* Hide content from all users */

.element-hidden {

  display: none;

}