Styling Vertical Accordion: Styling 'hidden' headings not working

HTML & CSS
1

I have this site that I’m trying to style the ‘hidden’ content headings within the Accordion menu.

Here is the code:

body {
   background: white;
   }
#leftcol, #rightcol, p {
	font: 16pt/150% "Times New Roman", Times, serif!important;
}
#header, #logo, img, #footer, #footsoc, #textenlarge {
   display: none;
   }
.oneColFixCtrHdr, #container, #mainContent {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
#leftcol, #rightcol {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#Accordion1, .AccordionPanel.AccordionPanelOpen .AccordionPanelTab, .AccordionPanelContent,
.AccordionPanel.AccordionPanelClosed .AccordionPanelTab {
	font: 16pt/150% "Times New Roman", Times, serif!important;
}
.AccordionPanelTab, #Accordion1.Accordion {
	border: none!important;
}
.AccordionPanel.AccordionPanelClosed .AccordionPanelContent {
	display: block!important;
	height: auto!important;
}

The printout shows that everything else is printing as it should, but the ‘hidden’ content headings are NOT formatting to font: 16pt/150% “Times…”.

Would anyone know what I am not doing right?

2

The styles are being over-ridden with this rule:


.AccordionPanel.AccordionPanelClosed .AccordionPanelTab {
    background: none repeat scroll 0 0 #BBBBBB !important;
    color: #FFFFFF;
    font-size: 12px !important;
}

Just add that selector to your print stylesheet with the revised font and size.

3

I did happen to do that, but the style was still being overridden.

Silly me, I had the web page’s style within the web page itself which kept overriding the print style sheets. I simply moved the styles to an external stylesheet and it was cooperating.

Thank you for your help!