div.slideshow-window {
	background-color: inherit;
	border: none;
}

.page #secondary #search {
    display: none;
}

It leaves the area to the left of the content blank. I tried resizing the slideshow and can't yet figure out how to increase the size of the image. Resizing the images though, if I can figure out how, has a caveat as you will then be asking the browser to resize the images, and that will mean a loss of image quality and sharpness.

Also I would love to get rid of the search boxes that show up on my pages. Please advise.

http://willowandbert.com/styling/
http://willowandbert.com/photography/

Many thanks

.slideshow-window {
border: 20px solid #FFFFFF!important;
background-color: #FFFFFF!important;
}

.slideshow-window {
border: 20px solid #FFFFFF!important;
}

.slideshow-window {
background-color: #FFFFFF!important;
}

.slideshow-window {
border: 20px solid #FFFFFF !important;
}

If you would like to change the color of the border you can use the code below.

.slideshow-window {
border: 20px solid #fff;
}

The slide show also has a background color that will show in the event that an image does not have the same aspect ratio as the slide window. Here is the code to change that background.

.slideshow-window {
background-color: #222;
}

And if you like to change both you can combine the two.

.slideshow-window {
background-color: #222;
border: 20px solid #fff;
}

Last, because you mentioned having the border removed you also can tell the border not to display.

.slideshow-window {
border: 0 none;
}

Now, do you know how I can change the size of the gravatar?

Well, you can stretch the image with CSS rules, but the size the original image is set by the theme's PHP code and cannot be adjusted with CSS only. That means that changing the size will probably make the image look blurry. It might work if you only change the size a little. Here is a CSS rule you can experiment with:

.avatar {
	width: 70px;
	height: 70px;
}

An alternative would be to replace the image manually with CSS, but it has a downside which is that it gets rid of the hovercard feature. Here it is an example if you want to try it out:

.avatar {
	display: none;
}

.entry-header > a {
	background: url(http://2.gravatar.com/avatar/89d03635943476a1a503a911b2926b65?s=75) no-repeat;
	float: left;
	margin: 9px 0 0 -16.66666666%;
	width: 75px;
	height: 75px;
}

Note how I changed the Gravatar URL so that it ended with "?s=75". Make sure that number matches whatever width/height you pick.

.avatar {
	background-color: #ff0;
	border: 1px solid #00f;
}

Change the color codes to colors of your choice.
http://en.wikipedia.org/wiki/Web_colors#X11_color_names

#inner-wrapper {border-style:solid;
border-color: #000;
border-width:5px;}

Of course you can change the width, etc.

.lay1 > div {
	border-bottom: 7px solid red !important;
}

Adjust the color code as necessary.

style="border: medium none;

Check your post in the HTML tab, look at the code and if the above is there, delete this bit from it:

border: medium none;

I made some changes on the css of my blog (with support assistance, I don't know much about it hehe) and the bars of the last post of each page disappeared...
You can see it here: http://danielkons1.files.wordpress.com/2012/05/untitled-11.jpg
I'm wondering if someone could help me to fix that issue...

Also, if it's possible to change the colors of these bars, I would appreciate a lot...

Thanks.

So is there a workaround for this? Or will these options be added to the widget in the future?

This support forum is for WordPress.com hosted blogs only. If you have a self-hosted WordPress blog you need to seek help at the WordPress.org forums, not here.

If you don't understand the difference, you may find this information helpful.