/*
 * Breakpoint mixin. See: http://css-tricks.com/conditional-media-query-mixins/
 *
 * Use:
 * .row {
 *  @include bp(mobile, min) {
 *    //mobile styles
 *  };
 * }
 *
 * Breakpoints are set in _config.scss e.g. $bp1
 */
.mobile-only {
  display: none;
}
@media (max-width: 37.625em) {
  .mobile-only {
    display: block;
  }
}

@media (max-width: 37.625em) {
  .hidden-on-mobile {
    display: none !important;
  }
}

/**
 * Mixins for doing CSS3 cross-browser stuff:
 */
/**
 * Special grayscale mixin to support IE rather than using
 *	@include filter(grayscale(100%)) 
 * which IE does not support
*/
/**
 * Provides a number of styles from the SilverStripe BlackCandy theme that are required for the 
 * proper functioning of the content editor, as well as a few other useful styles.
 */
/* LINK ICONS - shows type of file
------------------------------------ */
.typography a[href$=".pdf"],
.typography a[href$=".PDF"],
.typography a.pdf {
  padding: 2px;
  padding-left: 20px;
  background: url(../images/icons/page_white_acrobat.png) no-repeat left center;
}

.typography a[href$=".doc"],
.typography a[href$=".DOC"],
.typography a.doc {
  padding: 2px;
  padding-left: 20px;
  background: url(../images/icons/page_word.png) no-repeat left center;
}

.typography a[href$=".xls"],
.typography a[href$=".XLS"],
.typography a.xls {
  padding: 2px;
  padding-left: 20px;
  background: url(../images/icons/page_excel.png) no-repeat left center;
}

.typography a[href$=".gz"],
.typography a[href$=".GZ"],
.typography a[href$=".gzip"],
.typography a[href$=".GZIP"],
.typography a[href$=".zip"],
.typography a[href$=".ZIP"],
.typography a.archive {
  padding: 2px;
  padding-left: 20px;
  background: url(../images/icons/page_white_zip.png) no-repeat left center;
}

.typography a[href$=".exe"],
.typography a[href$=".EXE"],
.typography a.application {
  padding: 2px;
  padding-left: 20px;
  background: url(../images/icons/application.png) no-repeat left center;
}

/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.typography .left {
  text-align: left;
}

.typography .center {
  text-align: center;
}

.typography .right {
  text-align: right;
}

/* IMAGES 
-------------------------------------------- */
.typography img {
  border: none;
}

.typography img.right {
  float: right;
  margin-left: 20px;
}

.typography img.left {
  float: left;
}

.typography img.leftAlone {
  float: left;
  margin-right: 100%;
}

#tinymce.typography img.leftAlone {
  float: none;
}

.typography img.center,
.typography .captionImage.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}