CSS-style guide

Styleguide ten behoeve van de nieuwe website. Dit document is levend en zal gaande weg de ontwikkeling van de nieuwe website worden aangevuld. Eerst volgende toevoegingen:

(Favicon blijft gelijk aan huisige site)
- Formulier stijlen

----------------------------------------------
Tekst:
----------------------------------------------
p{
     font-family:"Noto Sans",Arial,helvetica,sans-serif;
     font-size: 14px;
     line-height: 23px;
     letter-spacing: 0.02em;
}

.lead{
     font-family:"Roboto",Arial,helvetica,sans-serif;
     font-size: 15px;
     font-weight: 500;
     line-height: 23px;
     letter-spacing: 0.02em;
}

H1{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 26px;
     font-weight: 700;
     line-height: 30px;
     margin: 25px 0px 20px 0px;
     letter-spacing: 0.02em;
}

H2{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 17px;
     font-weight: 700;
     line-height: 23px;
     margin: 25px 0px 10px 0px;
     letter-spacing: 0.06em;
}

H3{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 18px;
     font-weight: 400;
     line-height: 23px;
     margin: 25px 0px 10px 0px;
     letter-spacing: 0.02em;
}

.onderschrift{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 14px;
     line-height: 26px;
     letter-spacing: 0.02em;
     font-weight: 300;
}

----------------------------------------------
Container:
----------------------------------------------
.box{
    border: #ccc 1px solid; 
    color: #333; 
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    width: 276px;
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 5px 0px;
}

.actie{
    border: #9be9a0 1px solid;
    background-color: #f3fcf4;
}

.afbeelding{
     width: 276px;
     margin: 0px 0px 0px 0px;
     border-radius: 9px 9px 0px 0px;
}

----------------------------------------------
Knop:
----------------------------------------------
.button {     
 font-family:"Roboto",Arial,helvetica,sans-serif;
 font-size:15px;
 font-weight: 400;
 padding:5px 9px;
 cursor:pointer;background:none repeat scroll 0 0 #585959;
 color:#fff;border:0;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 -webkit-transition:all 300ms ease;
 -moz-transition:all 300ms ease;
 -ms-transition:all 300ms ease;
 -o-transition:all 300ms ease;
 transition:all 300ms ease;
 -webkit-appearance:none;
 border: #4b4b4b 1px solid;
     -webkit-box-shadow: 2px 2px 2px -1px #ccc;
     -moz-box-shadow: 2px 2px 2px -1px #ccc;
     box-shadow: 2px 2px 2px -1px #ccc; 
} 

.button:hover {
 background-color:#4b4b4b;
}  

.licht{
     border: #999 1px solid;
     background-color: #fff;
     color:#777;
     -webkit-box-shadow: 2px 2px 2px -1px #ddd;
     -moz-box-shadow: 2px 2px 2px -1px #ddd;
     box-shadow: 2px 2px 2px -1px #ddd; 
}

.licht:hover {
     background-color:#f6f6f6;
}

.groen{
 border: #038d05 1px solid;
 background-color: #35b737; 
}  

.groen:hover {
 background-color:#34a035;
}

----------------------------------------------
Message:
---------------------------------------------- 
.message_nieuw {
    font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
    font-size: 18px;
    font-weight: 400;
    background-color: #00e000;
    border: #00c900 1px solid;
    padding:5px 10px;
    margin: 15px 0px;
    color:#fff;
    letter-spacing: 0.03em;
}

.waarschuwing{
    background-color: #ff6600;
    border: #e55c00 1px solid;
}

.fout{
    background-color: #ff0000;
    border: #cc0000 1px solid;
}

.icoon{
    width: 30px;
    height: 30px;
    float: left;
}