Admin CSS sidebar template

Could I get some feedback on my simple start to an admin template:
http://jsfiddle.net/spadez/GHKxW/3/

HTML

    
      

      
        Dashboard

      
    

    
      Title
    Content
    
  

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

li {
    list-style: none;
}
a {
    text-decoration: none
}

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

.navigation {
}
.navigation li {
}
.navigation li span {
    display: inline-block;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    width: 16px;
    height: 16px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
}
.navigation li a {
    display: block;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.navigation li a:hover {
    background-color: #495C6D;
}
.navigation li a.active {
    background-color: #495C6D
}
#rss span {
    background-position: -52px -68px;
}
#photos span {
    background-position: -90px -66px;
}
#links span {
    background-position: -45px 0;
}

h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 30px; font-weight: 500;}

.logo {height: 50px; margin-bottom: 30px;}

.btn {
    letter-spacing: 1px;
    font-weight:bold;
    padding-left: 10px;
    padding-right: 10px;
    height: 34px;
    border-radius:3px;
    border: 0px;
    text-transform:uppercase;
    font-size:12px;
}

#btn_pri {
    background-color: #60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

This looks pretty good for a start.

the only thing that I see right away is your CSS formatting

a {
    text-decoration: none
}

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

Here you switch between what I would call Minified CSS and Egyptian Brackets and the last rule here is a mix.

you should always stay consistent with your Formatting, especially in CSS because it can get confusing when you start adding more rules

so if you did this in all Egyptian Formatting.

a {
    text-decoration: none
}

html, body {
    height: 100%; 
    max-height: 100%; 
    padding:0; 
    margin:0;
}

.wrapper {
    display:table; 
    width:100%; 
    height:100%;
}

.wrapper > div {
    display:table-cell; 
    vertical-align: top;
}

.wrapper .left {
    width:200px; 
    background-color:#34495E
}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}

#btn_sec { 
    background-color: #e74c3c;
    color:white;
}

This is how I would do it personally, it is clear what rule is what, and it looks neat and tidy as well.

but how ever you decide to do it, please be consistent.

As far as these Empty Rules.

.navigation {
}
.navigation li {
}

I assume that you are going to use them in the future for something, if not, get rid of them, they will clutter up your code.

StackExchange Code Review Q#47475, answer score: 2