﻿:root {
  --focuscolordark: #666666;  
  --focuscolorlight: #eeeeee;
  --focuscoloraccented: #ff6b00;
  --focuscoloraccenteddark: #414141;
}

.epresto.bartersite header#mainHeader a:focus, .epresto.bartersite footer#mainFooter a:focus {
    outline: 0px;
}


.epresto.bartersite header#mainHeader .banner a:focus {
    display: block;
    }

.epresto.bartersite header#mainHeader .banner a:focus .logo {
    background-image: url(../Pix/BSR_Logo_focus.png);
}

@media screen and (max-width: 1240px) {
    .epresto.bartersite header#mainHeader a:focus .logo {      
        background-image: url(../Pix/BSR_LogoS_focus.png);
    }
}

.epresto.bartersite header#mainHeader h2 a:focus {
    background-color: var(--focuscolordark);
    border: 4px solid var(--focuscolordark);
}


.epresto.bartersite header#mainHeader a:focus .butAdd, .epresto.bartersite header#mainHeader a:focus .butEdit {
    background-color: var(--focuscolordark);
}

.epresto.bartersite header#mainHeader button#butOpenMainMenu:focus {
    outline: 0px;
    background-color: var(--focuscolordark);
}

.epresto.bartersite nav#mainMenu a:focus, .epresto.bartersite nav#mainMenu a#butCloseMainMenu:focus {
    color: var(--focuscolordark);
    background-color: var(--focuscolorlight);
    outline: 0px;

}

.epresto.bartersite nav#mainMenu a#butCloseMainMenu:focus {
    background-image: url(../Pix/MainMenuCloseIcon_focus.png);
}

.epresto.bartersite div.list section#filterElements select:focus {
    outline: 0px;
    background-color: var(--focuscolordark);
    
}

.epresto.bartersite div.list section#searchElements input {             
    height: 38px;   
}

.epresto.bartersite div.list section#searchElements input:focus {       
    background-color: #dbdbdb;
    
}

/*Remove chrome autofill color from inputs*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000000s ease-in-out 0s;  
}

.epresto.bartersite .form section input:focus, .epresto.bartersite .form section textarea:focus {
    outline: 0px;
    background-color: var(--focuscolorlight);        
}

.epresto.bartersite .form section textarea.hasCharacterCounter:focus + div {
    background-color: var(--focuscolorlight);
}

.epresto.bartersite div.list section#searchElements input:focus.textField {
    
}

.epresto.bartersite div.list section#searchElements input:focus::placeholder {
    
   color:var(--focuscolordark);
}

.epresto.bartersite div.list section#searchElements input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
}

.epresto.bartersite div.list section#searchElements input:focus::-ms-input-placeholder { /* Microsoft Edge */        
}



.epresto.bartersite div.list section#searchElements input:focus + button#searchKeyButReset { /* ! */
    background-image: url(../Pix/Icons.png);
    background-position: -857px center;
    width: 34px;
    height: 34px;
    
    margin-top: 2px;
    margin-left: -42px;
    border: 0px;

}

.epresto.bartersite div.list section#searchElements button#searchKeyButReset:focus {
    background-color: #ffffff; /*  x color */
    background-image: url(../Pix/Icons.png);   
    background-position: -959px center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    margin-top: 2px;
    margin-left: -42px;
    border: 0px;
}

.epresto.bartersite article.galleryView:focus {
    background-color: var(--focuscolordark);
    outline: 0px;
}

.epresto.bartersite article.galleryView:focus div.coverage .textContainer small, .epresto.bartersite article.galleryView:focus div.coverage .textContainer h3, .epresto.bartersite article.galleryView:focus div.coverage .textContainer h2 {
    color: #ffffff;
}

.epresto.bartersite div.list nav.paging a:focus {
    background-color: var(--focuscoloraccenteddark);    
    outline: 0px;                                   
}

.epresto.bartersite div.list nav.paging button:focus {
    background-color: var(--focuscoloraccenteddark);
    color: var(--focuscoloraccenteddark);
    outline: 0px;
    
}

.epresto.bartersite footer#mainFooter a:focus {
    color: #ffffff;
    background-color: var(--focuscolordark);
    border: 4px solid var(--focuscolordark);
}

.epresto.bartersite div.detail header#pageHeader button.close:focus {
    background-color: orangered;
}

.epresto.bartersite div.detail header#pageHeader button.close, .epresto.lightbox.overlay .dialogBox header button.close {
    width: 25px;
    height: 25px;
    margin-right: 3px;
    background-color: #ffffff;
    background-image: url(../Pix/Icons.png);
    background-repeat: no-repeat;
    background-position: -914px center;

    background-clip: content-box;
    border: 1px solid #ffffff;
    background-size: 1000px 50px;
    cursor: pointer;
    position: relative;
}

.epresto.bartersite div.detail header#pageHeader button.close:focus::before, .epresto.lightbox.overlay .dialogBox header button.close:focus::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    
    background-color: var(--focuscolordark);
    border: 0px;
    background-image: url(../Pix/Icons.png); 
    background-repeat: no-repeat;
    background-position: -208px center;
    background-size: 1000px 50px;
    background-clip: content-box;
    position: absolute;
    top: -5px;
    left: -5px;
}

.epresto.bartersite .iPopup.cta:focus {
    color: var(--focuscoloraccented);
    outline: 0px;
}

.epresto.bartersite .form section header .iPopup.cta:focus {
    color: var(--focuscolordark);
}

.epresto .picUp div.fileSelectorPanel label:focus {
    background-color: var(--focuscolordark);
    color: #ffffff;    
    outline: 0px;
    padding-left: 0.25em;
    padding-right: 0.25em;    
}

.epresto .picUp button.butFileSelector:focus, .epresto .picUp button.butRotate:focus {
    background-color: var(--focuscolordark);    
}

.epresto.bartersite .form section select:focus {    
    background-color: var(--focuscoloraccented);
    outline: 0px;      
}

.epresto.bartersite .form section input[type='checkbox']:focus + label{
     background-color: var(--focuscoloraccented);
}

.epresto.bartersite section.formButtonBar button:focus {
    background-color: var(--focuscoloraccenteddark);
}

.epresto.bartersite section div.tiles button.tile:focus {
    background-color: var(--focuscolordark);      
}

.epresto.bartersite article.detailView div.imageContainer div.imageBox:focus {
    
    outline: 2px solid var(--focuscolordark)
}

.epresto.lightbox.overlay .dialogBox header button.close:focus {
    color: green;
    background-color: blue;
}

.epresto.lightbox.overlay .dialogBox footer nav button.leafButton:focus {
    background-color: var(--focuscolordark);      
}

.epresto.lightbox.overlay .dialogBox footer nav button.leafButton:focus, .epresto.lightbox.overlay .dialogBox footer nav button:focus {
    background-color: var(--focuscoloraccenteddark);
    color: #ffffff;
    outline: 0px;
    
}

.epresto.lightbox.overlay .dialogBox header h1:focus {
    outline: 0px;
}

.epresto.bartersite div.detail section.slider header button:focus {
    background-color: var(--focuscoloraccenteddark);    
}

.epresto.bartersite div.detail section.slider div.shareElementsContainer button:focus {
    background-color: var(--focuscoloraccented);
}


