/*
 * 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
*/
body, body.mceContentBody.typography, p,
h1, h2, h3, h4,
input {
  font-family: Arial, serif;
}

h1, h2, h3, h4 {
  font-weight: bold;
}

#doc .typography h1 {
  font-size: 1.5em;
}
@media (min-width: 30.125em) {
  #doc .typography h1 {
    font-size: 2.5em;
    /* 30px / 12px = 250% */
    line-height: 1.7em;
    /* 51px / 30px = 170% */
    padding: 5px 0 0 30px;
  }
}

.type_HomePage h1 {
  padding-left: 3.5%;
}

h2 {
  font-size: 1.166667em;
  /* 14px / 12px = 116.6667% */
  padding-bottom: 0.3em;
}

h3 {
  font-size: 1em;
  /* 12px / 12px = 100% */
  padding-bottom: 0.3em;
}

.type_HomePage h2 {
  font-size: 2.5em;
  /* 30px / 12px = 250% */
}

h4 {
  font-style: italic;
  font-size: 1em;
  /* 12px / 12px = 100% */
}

.typography,
.typography p {
  line-height: 1.4;
  /* 20px / 12px = 166.6667% */
}
.typography:empty,
.typography p:empty {
  display: none;
}

.typography h1,
.typography h2,
.typography h3,
.typography h4 {
  line-height: 1.1em;
}

.intro-text,
p.intro-text {
  font-size: 4.666667em;
  /* 56px / 12px = 466.6667% */
  color: #6fce0f;
  margin: 0 0 25px;
  line-height: 60px;
  font-weight: normal;
}

.content-left {
  width: 290px;
  float: left;
  clear: left;
}

.content-right {
  width: 290px;
  float: right;
  margin-right: 15px;
  float: right;
}

.content-right-thin {
  float: right;
  width: 202px !important;
  margin: 0 0 40px 20px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 a:hover {
  text-decoration: none;
}

.dark-text {
  color: #666;
}

.small-dark-text {
  color: #666;
  font-size: 0.916667em;
  /* 11px / 12px = 91.6667% */
}

@media (min-width: 30.125em) {
  #primary img {
    margin: 1em;
  }
}

@media (min-width: 30.125em) {
  #primary img.leftAlone {
    margin-right: 100%;
  }
}

#hd-container .fbbutton {
  margin: 0;
}

#top-nav, #cn-right, #secondary, #ft {
  /* this rule stops bizarro IE behaviour, like large/italic fonts in sidebars and footers */
  font-size: 12px;
  font-style: normal;
}