Magazine Pro CSS Conflict: Button div in sidebar text widget

[DTHkelly]

URL
http://vth.wpengine.com/sample-page/

Magazine Pro button div works in the page/post content area/WYSIWYG

The same button div does not work in a text widget in the sidebar - sidebar CSS conflict.

Button div:
<a class="button" href="#">JOIN OUR LISTSERV </a>

I cannot identify the combination of CSS selectors to change anything about the button div in text widget #12.

Selector for the specific text widget >> #text-12

I think this is part of the problem:

.sidebar a {
  color: #000;
  font-weight: 700;
  padding-bottom: 1px;
}

I know I need to be more specific than .sidebar a, but not sure how.

How do I combine selectors correctly? The combinations I've tried have changed nothing.

This is part of the Magazine Pro CSS conflict when the button div is used in the sidebar:

.sidebar {
  font-size: 15px;
  margin-top: 60px;
}

Because this is a Magazine Pro conflict, and not a customization issue, I submitted a help ticket to CopyBlogger. But the CopyBlogger Support Ticket Answer "Use Firebug" is treating this as a customization issue.
*sigh*

[Pixel Frau]

You should be able to target the sidebar button with .sidebar a.button.

[DTHkelly]

Julia:
Thank you so much - .sidebar a.button works!
Kelly

[DTHkelly]

Here's the CSS to fix the sidebar css conflict with the button div:

/* Button Div conflicting with Sidebar CSS in Text Widget */
.sidebar a.button{
color: #fff !important;
font-weight: normal !important;
padding-bottom: 15px;
}

[Author]

Posts