wai-style-changes.css

/* Corrects `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* Corrects `inline-block` display not defined in IE 8/9. */
audio,
canvas,
video {
  display: inline-block;
}

/* Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices. */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden] {
  display: none;
}

#tagline {
  display: block;
  overflow: hidden;
  /* Let height include floats */
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: #993300;
  min-height: 23px;
  /* Height of rounded corner */
  border-radius: 0 28px 0 0;
}
#tagline p {
  margin: 0;
  padding: 0.3em 20px 0.3em 0.3em;
  /* 20px makes room for rounded corner */
  text-align: right;
}
.status {
  padding: .25em;
  margin-bottom: -1.5em;
}
.status h3, .status p {
  display: inline;
  color: inherit;
  font-size: 1em;
}
.draft .status {
  background-color: #CFC;
}
.editors-draft .status {
  background-color: #FCC;
}
#nav {
  float: none;
  width: auto;
}
#main {
  margin: 0;
}
.main-inner {
  overflow: auto;
}
#logos img {
  max-width: none;
}

p.totop {
  background-color: inherit;
  display: auto;
}

p.totop a {
  background: #eff5fb url("http://www.w3.org/Icons/topofpage.png") no-repeat scroll 0.5em center;
  display: inline-block;
  padding: 0.2em 0.7em 0.3em 1.8em;
  border-radius: 2px;
	text-decoration: none;
}

p.totop a:hover, p.totop a:focus {
	text-decoration: underline;
}

.btn {
  background: linear-gradient(to bottom, #e6e6e6, #ccc);
  color: #333;
  font-weight: normal;
  font-size: 1em;
  line-height: 244.44444%;
  padding: .5em .75em;
  text-decoration: none;
  white-space: nowrap;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  border-radius: .25em;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
  background: linear-gradient(to bottom, #ccc, #b3b3b3);
}

.btn:visited {
  color: #036;
}

.contribute {
  box-sizing: border-box;
  border: 1px solid #666 !important;
  background-color: #fff7f0;
  border-radius: .5em;
  padding: 1em;
  margin: 3em auto 1em;
  width: 90%;
}
.contribute .heading {
  color: #333333 !important;
  border-bottom: none !important;
  font-weight: bold;
  font-size: 1em;
  margin: 0 !important;
  padding: 0 !important;
}
.contribute .heading + p {
  margin-top: 0.5em;
}
.contribute .buttons {
  text-align: center;
  margin-top: 1em;
  padding: .5em 0 0;
  border-top: 1px solid #ccc;
  line-height: 300%;
}

@media screen and (min-width: 43em) {
  #nav {
    float: left;
    width: 24%;
  }
  #main {
    margin: 0 0 0 27%;
  }
  .contribute {
    width: 65%;
  }
}

@media print {
  body {
    background: #ffffff;
  }
  header img {
    max-width: none;
  }
  header #masthead {
    margin: 0;
    float: left;
  }
  header #masthead > p, header #masthead p {
    margin: 0;
    width: auto;
    border-right: none;
  }
  header #tagline {
    background: none;
    color: #333;
  }
  header #tagline p {
    text-align: left;
  }
  #main {
    margin: 0;
  }
  #controls, #nav, nav.section, .contribute, .permalink {
    display: none;
  }
  .color-alone img {
    width: 150px;
    height: 150px;
  }
}

/** PERMALINKS **/

.permalink-wrapper {
  position: relative;
  margin-right: 1px;
}

.permalink {
  position: absolute;
  margin: 0 0 -0.3em 0.5em;
  bottom: 0;
  right: 0;
}
.permalink.h4 {
  margin-top: .75em;
}
.permalink > a {
/*  color: #333 !important;
  border: 1px solid;
  text-decoration: none;
  padding: 0.5em 0.5em 0.3em;
  display: inline-block;
  vertical-align: middle;
  margin-left: .5em;
  font-weight: bold;
  white-space: nowrap;*/
  font-size: .75em;
}
.permalink > a svg {
  vertical-align: middle;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  fill: currentcolor;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.permalink > a:hover, .permalink > a:focus {
  border: 1px solid darkgray;
}
.permalink .sharebox {
  font-size: 90%;
  display: none;
  position: absolute;
  z-index: 999;
  top: 120%;
  right: 0;
  border: 1px solid #8f8f8f;
  padding: .5em;
  min-width: 20em;
  max-width: 100%;
  box-shadow: 0 0 10px -5px #8f8f8f;
  background-color: #f5f5f5;
}
.permalink .sharebox.open {
  display: block;
}
.permalink .sharebox input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.permalink .sharebox label span {
  display: block;
  text-align: right;
}
.permalink .sharebox button {
  background: -webkit-linear-gradient(top, #c2c2c2, #cfcfcf);
  background: linear-gradient(to bottom, #c2c2c2, #cfcfcf);
  color: #4d4d4d;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.75;
  padding: .15em .4em;
  border-width: 1px;
  border-style: solid;
  border-radius: .25em;
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
}
.permalink .sharebox button:hover, .permalink .sharebox button:focus {
  background: -webkit-linear-gradient(top, #333333, #404040);
  background: linear-gradient(to bottom, #333333, #404040);
  color: gainsboro;
}
.permalink .sharebox p:first-child {
  margin-top: 0;
}

/* video styles */
video {
  max-width: 100%;
}

.video-container {
  clear:right;
  max-width: 450px !important;
}

.video-container + * {
  clear: both !important;
}
.able-media-container {
  padding-top: 56.25%;
  position: relative;
}

:-webkit-full-screen .able-media-container {
  padding-top: 0;
  position: static;
}

:-moz-full-screen .able-media-container {
  padding-top: 0;
  position: static;
}

:-ms-fullscreen .able-media-container {
  padding-top: 0;
  position: static;
}

:fullscreen .able-media-container {
  padding-top: 0;
  position: static;
}
.able-media-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

:-webkit-full-screen .able{
margin: 0;
}

:-moz-full-screen .able{
margin: 0;
}

:-ms-fullscreen .able{
margin: 0;
}

:fullscreen .able{
margin: 0;
}

.video-container .able {
  box-shadow: none;
}

/* Video List */

.video-listing {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.video-listing li {
  list-style: none;
  width: 100%;
}

.video-listing li:first-child {
  margin-top: 5px;
}

@media screen and (min-width: 53em) {
  .video-listing li {
    width: 50%;
  }
}

.video-listing a,
.video-listing .current {
  display:flex;
  overflow: hidden;
  align-items: center;
  padding: 5px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.video-listing a {
  width:100%;
  margin-right: 10px;
}

.video-listing .current {
  font-weight: bold;
}

.video-listing a:hover,
.video-listing a:focus {
  background-color: #F7F1F2;
  border-color: #00559E;
}

.video-listing a span {

}

.video-thumb {
  margin-right: 10px;
  position:relative;
  width: 160px;
  display:inline-block;
  float: left;
  vertical-align: middle;
  flex-shrink: 0;
}

.video-thumb img {
  display:block;
  width: 160px;
}

.current .video-thumb:before,
a:hover .video-thumb:before,
a:focus .video-thumb:before {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  content: '';
  background-image: url(img/play.svg);
  background-size: 100% 100%;
  opacity: .7;
}

.current .video-thumb:before {
  opacity: 1;
}

#what {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 135%;
  background: rgb(255,250,245);
  border: none !important;
  border-top: none !important;
  color: #930 !important;
  border-bottom: 1px dashed #930 !important;
}

#audio_description_button {
  color: #fff;
  background-color: #464646;
  border-color: #262626;
  padding: 1px 2px;
}

#audio_description_button img {
  height: 2em;
  vertical-align: middle;
  margin-right: .25em;
  pointer-events: none;
}

#audio_description_button span {
  pointer-events: none;
}