How to separate site-name and site-slogan

Here are some modifications I made using a local.css file:

/* This is a local CSS Override file to change some of the default styling used in the Marinelli
* Base Theme
*/

/* Make the top margin of the Title and Slogan a little smaller */
#title-slogan {
float: left;
margin-top: 5px;
}


/* The default site title is normal, make it italic and add some margin under it */
#site-title {
font-size: 4em;
line-height: 0.8em;
font-style: italic;
margin-bottom: 10px;
}

/* The default color of the site title is white, make it yellow */
#site-title a {
  color : #EAE469;
} 

/* The site slogan is a little large, make it smaller */
#site-slogan {
font-size: 1.2em;
text-indent: 0.5em;
}

/* Push the search box so that it horizontally lines up with title and logo */
#search {
position: absolute;
right: 0px;
top: 0px;
}

/* Push the menus and everything underneath up a little */
#top {
float: left;
width: 100%;
height: 100px;
position: relative;
margin-bottom: 10px;
}

/* The default header image title text is normal, make it italic */

#header-image-title {
font-size: 1.6em;
font-weight: bold;
font-style: italic;
}

/* The default header image description text is italic, make it normal */

#header-image-description {
font-size: 1em;
font-style: normal;
color: #898989;
}

/* Make the bar behind the banner image text transparent */

.rgba #header-image-text {
background: rgba(0, 0, 0, 0.8);
}

Thanks very much. This is a very helpful post.

I'm glad it helped.