/*

	Accessibility styles

	chris@inathought.com

*/

@media only screen and (max-width: 800px) {

	/* Remove toolbar on small screens */

	.a11y-responsive {

		display: none;

	}

}



.focusable:focus {

    outline: none !important;

}



.has-focus {

    background: yellow;

}



/* reset styles */

.a11y-toolbar button {

  border: 0;

  color: inherit;

  background-color: transparent;

  text-decoration: none;

  padding: 0;

  line-height: inherit;

  margin: 0;

  font: inherit;

  width: 100%;

  height: 100%;

  text-align: left;

}



.a11y-toolbar {

    position: fixed;

    z-index: 99999;

    top: 43%;

    left: 0;

}



.a11y-toolbar ul {

    list-style: none;

    margin: 0;

    padding: 0;

    border-top-right-radius: 4px;

    border-bottom-right-radius: 4px;

}



.a11y-toolbar ul li {

	margin: 0;

	padding: 0;

    display: block;

}



.a11y-toolbar ul li button {

    font-size: 1.6em;

    padding: .25em;

}



.a11y-toolbar button {

    color: #000 !important;

}



.a11y-toolbar button.active {

    color: #fff !important;

}



.a11y-toolbar ul li button {

    display: block;

    background: #e2e2e2;

    text-align: center;

    border-top: 1px solid #f5f5f5;

    border-bottom: 1px solid #d2d2d2;

	position: relative;

}



.a11y-toolbar ul li button:hover {

    background: #fff;

}



.a11y-toolbar ul li button.active {

    background: #181818;

    border-bottom: 1px solid #525252;

}



.a11y-toolbar ul li:first-child button {

    border-top-right-radius: 4px;

}



.a11y-toolbar ul li:last-child button {

    border-bottom-right-radius: 4px;

}





.a11y-toolbar .offscreen, .a11y_stylesheet_path {

    position: absolute !important;

    clip: rect(1px, 1px, 1px, 1px);

	clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);	

	white-space: nowrap;

    padding: 0 !important;

    border: 0 !important;

    height: 1px !important;

    width: 1px !important;

    overflow: hidden;

	-webkit-transition: width .3s, clip .3s, clip-path .3s, background-color .5s;

	transition: width .3s, clip .3s, clip-path .3s, background-color .5s;

}



/* a11y toolbar RTL */

.a11y-toolbar.rtl, .a11y-toolbar.right {

    right: 0;

    left: auto;

}



.a11y-toolbar.rtl ul, .a11y-toolbar.right ul {

    border-top-left-radius: 4px;

    border-bottom-left-radius: 4px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

}



.a11y-toolbar.rtl ul li:first-child button, .a11y-toolbar.right ul li:first-child button {

    border-top-left-radius: 4px;

    border-top-right-radius: 0;

}



.a11y-toolbar.rtl ul li:last-child button, .a11y-toolbar.right ul  li:last-child button {

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 0;

}



.desaturated {

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important;

    filter: grayscale(100%) !important;

    -webkit-filter: grayscale(100%) !important;

    -webkit-filter: grayscale(1) !important;

    -moz-filter: grayscale(100%) !important;

    -ms-filter: grayscale(100%) !important;

    -o-filter: grayscale(100%) !important;

    filter: gray !important;

}



.a11y-toolbar button:hover .offscreen, .a11y-toolbar button:focus .offscreen {

	height: auto !important;

	width: 12em !important;

	clip: unset !important;

	clip-path: unset !important;

	color: #333;

	background: #ffd; 

	padding: 2px;

	box-shadow: 0 0 1px #000;

	border-radius: 2px;

	font-size: 13px;

	text-transform: none;

	font-family: Arial;

	top: 25%;

	display: block;

}



.a11y-toolbar.right  button:hover .offscreen, .a11y-toolbar.right  button:focus .offscreen{

	right: 3em;

	left: auto;

}



.a11y-toolbar  button:hover .offscreen, .a11y-toolbar  button:focus .offscreen{

	left: 3em;

}