Hi
I have created a list, which has arrows in the stylesheet for my bullet points. My 5th item is a pdf and I want to use a download image so I dulplicated the class.

I am getting 2 issues:

1. There is no space between the download image and the text?
2. There is a bigger gap between the 5th item and the last one. I want to be able to reuse thie list and have the download icon appear where ever I want in the list order?

Can anyone help or is there a better way to do what I am trying to do?

Code:
<h3>Links</h3>
<ul class="link-list">
                         
<li><a href="#">List Item 1</a> </li>
<li><a href="#">List Item 2</a> </li>
<li><a href="#">List Item 3</a> </li>
<li><a href="#">List Item 4</a> </li>

</ul>

<ul class="link-list-download">                       
<li><a href="#" target="_blank">List Item 5<span class="icon-pdf"> PDF (201Kb)</span></a></li>
</ul>
 
<ul class="link-list">                    
<li><a href="#">List Item 4</a></li>
</ul>
Code:
ul.link-list , ul.link-list li {
	list-style:none;
	margin:0;
	background-image:none;
	font-size:1em;
	zoom:1;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
ul.link-list {
	margin-bottom: 17px;
}
ul.link-list li {
	margin-bottom: 10px;
}
.puff ul.link-list {
	margin-bottom: 0;
	padding: 0;
}
ul.link-list li {
	font-size: 1.2em;
}

.link-list a {
	padding-left:12px;
	background:url("../img/sprites/orange-arrow-sml.gif") left 0.3em transparent no-repeat;
	font-weight:bold;
	color:#007bc3;
	text-decoration:none;
	display: block;
}


ul.link-list-download , ul.link-list-download li {
	list-style:none;
	margin:0;
	background-image:none;
	font-size:1em;
	zoom:1;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
ul.link-list-download {
	margin-bottom: 17px;
}
ul.link-list-download li {
	margin-bottom: 10px;
}
.puff ul.link-list-download {
	margin-bottom: 0;
	padding: 0;
}
ul.link-list-download li {
	font-size: 1.2em;
}

.link-list-download a {
	padding-left:12px;
	background:url("../img/orange-arrow-sml.gif") left 0.3em transparent no-repeat;
	font-weight:bold;
	color:#007bc3;
	text-decoration:none;
	display: block;
}

.link-list-download a {
	padding-left:12px;
	background:url("../img/download.gif") left 0.3em transparent no-repeat;
	font-weight:bold;
	color:#007bc3;
	text-decoration:none;
	display: block;
}