Focus dotted outline not showing

[carylizable]

The default browser focus (dotted box) is not working so I must be doing something to block it with my css. I even added focus styling to my css and it's not showing. I don't know what to try next. Any help would be much appreciated.

Here's the html:

<nav id="main">
<div class="row">
<div class="desktop-12 tablet-6 mobile-3">
<span class="shifter-handle mobile_handle">Menu</span>
<ul class="container">
<li class="cell">
<a href="about/index.htm" class="link">
<span class="title">About Durham Tech</span>
</a>

Here's the CSS:

a:focus { outline: 1px dotted; #fff}
focus { outline: 1px dotted; #fff}
#main .row{height:50px;width:100%}
#main .container{display:table;height:50px;margin-bottom:0;position:relative;width:100%}
#main .cell{background:transparent;display:table-cell;height:55px;padding:0}
#main .cell.active{background:#999}
#main .cell .link{background:#262626;display:block;height:50px;line-height:50px;width:100%}
#main .cell .link:focus{ outline: 1px dotted; #fff}
#main .cell .title{color:#fff;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.2;margin-top:-2px;padding:0 10px;vertical-align:middle;width:100%;}
#main .cell .title:focus{ outline: 1px dotted; #fff}
#main .cell .dropdown{background:#fff;display:none;left:0;position:absolute;top:55px;width:100%}
#main .cell.last .dropdown{left:auto;right:0}
#main .cell:hover{background:#00843D}
#main .cell.hover .dropdown{display:block}

[carylizable]

I figured it out. Stupid error of course. You actually have to link to the correct CSS file. This part of the code did the trick:
#main .cell .link:focus{ outline: 1px dotted #fff}