/* For making pictures "float" to the left or
right side of the screen, with text wrapping
around it. */
.float-left {
  margin-right: 20px;
  float: left;
}
.float-right {
  margin-left: 20px;
  float: right;
}

/* For styling buttons */
/* Big, main buttons: */
.btn {
  background: #1A245B;
  background-image: -webkit-linear-gradient(top, #1A245B, #0F0838);
  background-image: -moz-linear-gradient(top, #1A245B, #0F0838);
  background-image: -ms-linear-gradient(top, #1A245B, #0F0838);
  background-image: -o-linear-gradient(top, #1A245B, #0F0838);
  background-image: linear-gradient(to bottom, #1A245B, #0F0838);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #FFD000;
  font-size: 20px;
  padding: 7.5px 12.5px;
  text-decoration: none;
}
.btn:hover, .sbtn {
  background: #E5BB00;
  background-image: -webkit-linear-gradient(top, #E5BB00, #C09000);
  background-image: -moz-linear-gradient(top, #E5BB00, #C09000);
  background-image: -ms-linear-gradient(top, #E5BB00, #C09000);
  background-image: -o-linear-gradient(top, #E5BB00, #C09000);
  background-image: linear-gradient(to bottom, #E5BB00, #C09000);
  color: #1A245B;
}
/* Small, footer button: */
.sbtn {
  height: 26px;
  font-family: Open Dyslexic;
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border: 2px solid #C09000;
  border-radius: 18px;
  font-size: 15px;
  padding: 0px 10px;
  text-decoration: none;
  margin-left: 2.5px;
}
.sbtn:hover {
  background: #FFD000;
  background-image: -webkit-linear-gradient(top, #FFD000, #E5BB00);
  background-image: -moz-linear-gradient(top, #FFD000, #E5BB00);
  background-image: -ms-linear-gradient(top, #FFD000, #E5BB00);
  background-image: -o-linear-gradient(top, #FFD000, #E5BB00);
  background-image: linear-gradient(to bottom, #FFD000, #E5BB00);
  color: #1A245B;
}

/* For making iframe embedded videos keep their ratio */
.iframe-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%; /* This is what makes it work; you can make it larger/smaller for different ratios as seen below. */
}
/* For making iframes in slideshows keep their ratio */
.iframe-slide {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 8%;
}
/* For making iframe embedded documents keep their ratio */
.iframe-doc {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 70%;
}
.iframe-video iframe, .iframe-doc iframe, .iframe-slide iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

/* Makes content wider */
#content article.fullwidth {
  max-width: 100%;
}

/* This makes third headers that are links not be bright gold (for sponsor page) */
h3 a {
  color: #8A7200;
}
h3 a:hover {
  color: #E5BB00;
}

/* This styles the container for all of the font stuff in the footer */
#font-stuff {
  margin-bottom: 10px;
  display: none;
}

/* Styles nav for slideshow */
.videos-nav {
  background-color: #FFD000;
}
.nav-slide {
  text-align:center;
  cursor: pointer;
  background-color: #FFD000;
  color: #1A245B;
  border-radius: 7px;
  padding: 0px 7px;
  margin: 6px 3px;
  overflow: hidden;
  transition: all .25s linear;
  -webkit-transition: all .25s linear;
}
.nav-slide:focus {
  outline: none;
}