#archives:after {   
    clear: both;   
    display: block;   
    visibility: hidden;   
    height: 0!important;   
    content: " ";   
    font-size: 0!important;   
    line-height: 0!important  
} 
 
#archives {   
    zoom: 1  
} 
 
#archives-content {   
    float: right;   
    width: 550px  
} 
 
#archive-nav {   
    float: left;   
    width: 50px  
} 
 
.archive-nav {   
    display: block;   
    position: fixed;   
    background: #f9f9f9;   
    width: 40px;   
    padding: 5px;   
    border: 1px solid #eee;   
    text-align: center  
} 
 
.year {   
    border-top: 1px solid #ddd  
} 
 
.month {   
    color: #ccc;   
    padding: 5px;   
    cursor: pointer;   
    background: #f9f9f9  
} 
 
.month.monthed {   
    color: #777  
} 
 
.month.selected,.month:hover {   
    background: #f2f2f2  
} 
 
.monthall {   
    display: none  
} 
 
.year.selected .monthall {   
    display: block  
} 
 
.year-toogle {   
    display: block;   
    padding: 5px;   
    text-decoration: none;   
    background: #eee;   
    color: #333;   
    font-weight: bold  
} 
 
.archive-title {   
    padding-bottom: 40px  
} 
 
.brick {   
    margin-bottom: 10px  
} 
 
.archives a {   
    position: relative;   
    display: block;   
    padding: 20px 30px;
    margin-bottom: 20px;   
    background-color: #f9f9f9;   
    color: #333;   
    font-style: normal;   
    line-height: 18px;
    transition: all 0.3s ease-in-out;
} 
 .archives a:hover {   
    padding: 20px 10px 20px 50px;
    background-color: #f9f9f9; 
} 
.time {   
    color: #888;   
    padding-right: 10px  
} 
 
 
.article h3 {   
    padding-bottom: 40px  
} 
 
.brick em {   
    color: #aaa;   
    padding-left: 10px  
}  

#archives-content {
float: none;
width: auto;
margin-left: 300px;
}
@media only screen and (max-width: 420px) {
#archives-content {
margin-left: 0;
}
}