/* 
    Styles for accessibility
    Created on : 17.01.2017, 15:25:21
    Author     : coster, www.utilo.eu
*/

/*
The following are the recommended styles for visually hiding content that will be read by a screen reader.
The .hidden CSS class should then be referenced from within the tag of the element being hidden, as shown:
<div class="hidden">This text is hidden.</div>
*/
.hidden 
{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
/*
"Skip to main content" links are one of the few places where accessibility has a direct and distinct impact on visual design. 
In order to be useful, the "skip" link should be one of the first on the page. Designers may balk at the idea of providing a link as the first thing on the page - 
particularly when that link is unlikely to be utilized by the majority of the site visitors. 
However, hiding the link makes them unusable to sighted keyboard users - a user group that can greatly benefit from this link.
One way to reconcile the impact that "skip" links have on visual design with the needs of screen reader users and 
users with mobility impairments is to use a technique that hides the "skip to main content" link until the user tabs to it. 
When the link receives focus, the link becomes visible to sighted users. This would allow both blind and sighted keyboard 
users to take advantage of the link's functionality
In order to accomplish this, two styles are created - one for the <a> element and one for the a:focus pseudo-class. 
The style for the a:focus pseudo-class will only be active when the user tabs to the link (i.e., it has focus), and the link will 
revert back to its default style (i.e., it will be hidden off-screen again) when the user tabs away from the link.
<div id="skip"><a href="#content">Skip to Main Content</a></div>
*/
#skip a
{ 
    position:absolute; 
    left:-10000px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden;
} 
#skip a:focus 
{ 
    top: 0;
    position: absolute;
    width: 200px;
    height: 50px;
    z-index: 10000;
    left: 0;
} 
/* show focus */
.sf-menu a:focus,
:focus{
     outline: 1px dotted #000!important;
}
a.styleswitcher{
    float: right;
	margin-left: 10px;
}
a.styleswitcher img{
    margin-top: 4px;
}
#footer-outer .w3eden .row {
    padding: 0px;
    margin-bottom: 0px;
}
#text-8 .w3eden .row {
    margin-right: 0px; 
    margin-left:  0px;
}