/* ==========================================================================
 HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
 ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222; }

body {
  font-size: 1em;
  line-height: 1.4; }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

img {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/* ==========================================================================
 Author's custom styles
 ========================================================================== */
#logo h1 {
  background: url("../img/BN_sprites.png") no-repeat 0 0;
  float: left;
  height: 163px;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  width: 163px; }

ul#bonernoises {
  list-style: none;
  margin: 25px auto;
  overflow: hidden;
  padding: 0;
  width: 193px; }
  ul#bonernoises li {
    float: left;
    margin: 15px; }
  ul#bonernoises a {
    background: url("../img/BN_sprites.png") no-repeat -173px 0;
    display: block;
    height: 163px;
    text-indent: -9999px;
    width: 163px; }
    ul#bonernoises a#spring_button {
      background-position: -173px 0; }
      ul#bonernoises a#spring_button:hover {
        background-position: -173px -173px; }
    ul#bonernoises a#whistle_button {
      background-position: -346px 0; }
      ul#bonernoises a#whistle_button:hover {
        background-position: -346px -173px; }
    ul#bonernoises a#ruler_button {
      background-position: -519px 0; }
      ul#bonernoises a#ruler_button:hover {
        background-position: -519px -173px; }

/* ==========================================================================
 Media Queries
 ========================================================================== */
@media only screen and (min-width: 386px) {
  ul#bonernoises {
    margin-top: 50px;
    width: 386px; } }
@media only screen and (min-width: 772px) {
  ul#bonernoises {
    margin-top: 100px;
    width: 772px; } }
/* ==========================================================================
 Helper classes
 ========================================================================== */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px; }

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%; }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }