/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute; left:-9999em; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Give a strong clear visual idea as to what is currently in focus */
/*:focus,*/
a:focus {
  background-color: #ffbf47;
  outline: 3px solid #ffbf47;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline: 3px solid #ffbf47;
}

#global-header h1 a:focus {
  background-color: transparent;
  outline: none;
}

#global-header a:focus {
	color: #000;
}
/* For image replacement */
.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;

  br {
    display: none;
  }
}

/* Hide for both screenreaders and browsers */
.hidden {
  display: none;
  visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden {
  position: absolute;
  left: -9999em;

  /*
   * Extends the .visuallyhidden class to allow the element to be
   * focusable when navigated to via the keyboard
   */
  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}

/* Give a strong clear visual idea as to what is currently in focus */
a:focus {
  background-color: #ffbf47;
  outline: 3px solid #ffbf47;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline: 3px solid #ffbf47;
}

#global-header {
  h1 a:focus {
    background-color: transparent;
    outline: none;
  }

  a:focus {
	  color: #000;
  }
}

Update to use SCSS stacking and improve readibility
Update to use SCSS stacking and improve readibility

Due to the way that this file was written, most of the effort here is to
improve readibility of the CSS by pulling apart attributes.
