What I would do use a web developer tool like Firebug (a free Firefox extension) or Chrome Developer Tools (comes built in with Chrome). Then you can inspect the elements that you are interested in and see what CSS rules are used.
I generally prefer Chrome Developer Tools, but for some reason I couldn’t get it to read the CSS for your WordPress.com site, so I will give you an example on how you can use Firebug to change the CSS for a particular element. For my example, I’ll pick the hover color for the featured post title. That is, on your old site, when you hover the mouse over the featured post (or any post), the post title turns green. On your new site, it turns blue on a mouse hover. I’m sure you want to change it so it turns green.
First, install Firebug on Firefox. Then, open each of the sites in a separate Firefox window. You could do it in separate tabs, but I prefer separate windows instead, since I can more easily switch windows by pressing the Alt-Tab key combination.
On the old site, right-click on the Half Life 3 and Left 4 Dead Expanded Teams title in the featured post and select Inspect Element from the pop-up menu. The Firebug console will open up in the bottom half of the browser window. Do the same with the window that contains the new site: right-click on the featured post title and select Inspect Element.
In the Firebug console, you’ll see the anchor tag (i.e., the link) highlighted on the left pane. On the right, you’ll see all of the CSS that affects that particular element. In both sites, the element selector is .featured-content .entry-title a, and the color value is rgb(58, 58, 58), which is a light gray. rgb means red/green/blue. If all three parameters are equal, then the color would be somewhere between black, rgb(0,0,0), and white, rgb(255,255,255). A pure blue color would be rgb(0,0,255).
You already know that the post title link color matches in the regular non-hover state, but how do you determine what color is used in the hover state? For each window, right-click on the highlighted line on the left side of the console (the anchor/link tag) and select :hover from the pop-up menu. This puts the post title in a hover state, i.e., it mimics what would happen if you were to move your mouse over the link.
You can see that the CSS over on the right-hand pane has now changed. For the old site, the hover color is rgb(34, 151, 11) (you might have to scroll down a little bit in the right-hand pane to see it), which is the green color that you now see as your post title. On the new site, the value is rgb(17, 123, 184), which gives it the cyan color that you see, but more importantly, you can see that the selector is .featured-content .entry-title a:hover. So all you have to do to change the hover color of the featured post title on the new site is to add this CSS rule, where you combine the selector of the new site with the properties & values from the site:
.featured-content .entry-title a:hover {
color: rgb(34, 151, 11);
}
Now, about changing the theme’s CSS (or adding new CSS). I don’t know if your theme has a Custom CSS option like many themes do. What you should not do is edit the theme’s CSS file directly: If the theme ever gets updated, you will lose your modifications. I see that you have the JetPack plugin installed, and JetPack has an option to add Custom CSS (you just have to activate it from the JetPack options page). Then all you have to do is go to Appearance > Edit CSS from the dashboard to add your CSS.
Give it a try and see if it works out. Let me know if you have any questions.
