/*
*
* !DO NOT EDIT THE CSS FILES, THEY ARE BUILT WITH THE LESS CSS!
* less/header/tools.less
*
* ---------------------------
* Styles associated with the WDN Tools
* ---------------------------
*/
@import "../_mixins/all.less";
@import "../_mixins/spriteSheet.less";

@dir: '../';

#wdn_tool_links {
    display: none;
}

@media (min-width: 320px) {
    
}
@media (min-width: 480px) {

}
@media (min-width: 600px) {

}
@media (min-width: 768px) {
    #wdn_tool_links {
        display: block;
        float: right;
        position: absolute;
        right: 0;
        top: 23px;
        padding: 12px;
        
        li {
            display: inline;
            list-style: none;
            display: inline-block;
            margin: 0 2px;
            background-color: #fff;
            
            &:last-child {
                margin-right: 0;
            }
            
            &.focus a {
                border-color: #cba166;
                background-color: #f1e887;
            }
            
            a {
                #wdnSprite > .sprite(@dir, @tool_rss_bw_x + 5, @tool_rss_bw_y + 4, 20px, 20px);
                padding: 4px 5px;
                .text-hidden();
                border: 2px solid #e0e0e0;
                .border-radius(5px);
                position: relative;
                text-decoration: none;
                
                &:hover {
                    #wdnSprite > .sprite(@dir, @tool_rss_c_x + 5, @tool_rss_c_y + 4);
                    
                    &:before { //tootlips
                        content: attr(data-title);
                        padding: 4px;
                        position: absolute;
                        z-index: 1;
                        bottom: 130%;
                        right: 0;
                        width: 175px;
                        max-width: 175px;
                        .border-radius(3px);
                        text-indent: 0;
                        font-family: @impactFont;
                        font-weight: bold;
                        color: darken(#95B8CC, 50%);
                        font-size: 0.7em;
                        text-shadow: 1px 1px 1px #B1DAF2;
                        line-height: 1;
                        .linear-gradient(#B1DAF2, #95B8CC);
                    }
                    
                    &:after {
                        content: '';
                        position: absolute;
                        right: 5px;
                        bottom: 100%;
                        z-index: 1;
                        width: 0;
                        height: 0;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        border-top: 10px solid fadeout(#95B8CC, 5%);
                    }
                }
                &.weather {
                    #wdnSprite > .sprite(@dir, @tool_weat_bw_x + 5, @tool_weat_bw_y + 4);
                    &:hover {
                        #wdnSprite > .sprite(@dir, @tool_weat_c_x + 5, @tool_weat_c_y + 4);
                    }
                }
                &.events {
                    #wdnSprite > .sprite(@dir, @tool_cal_bw_x + 5, @tool_cal_bw_y + 4);
                    &:hover {
                        #wdnSprite > .sprite(@dir, @tool_cal_c_x + 5, @tool_cal_c_y + 4);
                    }
                }
                &.directory {
                    #wdnSprite > .sprite(@dir, @tool_dir_bw_x + 5, @tool_dir_bw_y + 4);
                    &:hover {
                        #wdnSprite > .sprite(@dir, @tool_dir_c_x + 5, @tool_dir_c_y + 4);
                    }
                }
                &.maps {
                    #wdnSprite > .sprite(@dir, @tool_map_bw_x + 5, @tool_map_bw_y + 4);
                    &:hover {
                        #wdnSprite > .sprite(@dir, @tool_map_c_x + 5, @tool_map_c_y + 4);
                    }
                }
                &.alert {
                    #wdnSprite > .sprite(@dir, @tool_siren_bw_x + 5, @tool_siren_c_y + 4);
                    &:hover {
                        #wdnSprite > .sprite(@dir, @tool_siren_c_x + 5, @tool_siren_c_y + 4);
                    }
                }
            }
        }
    }
}
@media (min-width: 960px) {
    
}
@media (min-width: 1040px) {
    #wdn_tool_links {
        top: 0;
    }
}