CRP on "Replacing Header text with logo image"

I want to replace the header text on my site with a logo image. I've tried following the instructions on other forum posts to no avail, and my website editing knowledge is rudimentary at most so I would be grateful for detailed instructions.

Here's a link to my site: http://www.communityrendezvous.co.uk/

The logo I wish to insert is: http://www.communityrendezvous.co.uk/wp-content/uploads/2013/06/CR-logo.jpg

Here's what it says in the Appearance editor section:

/* =Header
----------------------------------------------- */

#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
#branding img {
height: auto;
display: block;
width: 100%;
}

Thanks in advance!