Problem med bakgrundsbilder i en ul lista

Jag håller på att göra en lista med länkar till en text som är översatt i diverse språk. Det jag inte lyckas med är att ha en flagga för varje <li> tag, att ha en och samma flagga för alla är inga problem, jag vill ha olika för varje <li> hoppas ni förstår. Problemet jag har nu är att jag inte ser en enda flagga.

Html koden ser ut enlig följande:¨

  <ul id="flagga">
    <li class="france">Fanska</li>
    <li class="spain">Spanska</li>
    <li class="ryska">Ryska</li>
    <li class="arabi">Arabiska</li>
    <li class="uk">Engelska</li>
  </ul>

Css koden ser ut enligt följande:

#flagga { 
			margin-left: 5;
			padding-left: 5;
			list-style: none;
		}

#flagga li.france {  
	background-image: url:(../../images/france.gif); 
 	padding-left: 10px;
	background-repeat: no-repeat;
	background-position: 0 .5em;
			}
			
#flagga li.spain {  
	background-image: url:(../../images/spain.gif); 
	padding-left: 10px;
	background-repeat: no-repeat;
	background-position: 0 .5em;
		          }
		
#flagga li.ryska {  
        background-image: url:(../../images/ryska.gif); 
	padding-left: 10px;
        background-repeat: no-repeat;
        background-position: 0 .5em;
                          }

#flagga li.arabi {  
       background-image: url:(../../images/arabi.gif); 
       padding-left: 10px;
       background-repeat: no-repeat;
       background-position: 0 .5em;
                         }

#flagga li.uk {  
      background-image: url: url(../../images/uk.gif); 
      padding-left: 10px;
      background-repeat: no-repeat;
      background-position: 0 .5em;
                      }

Tack på förhand