solsticeint
asked on
jquery accordion color help
I am using an accordion and I can not seem to get the bullets to to know take the default of the title in terms of color. I add links to it and it defaults to my text on the heading part. I have added the css and html below.
The links want to be white #fff. If I change this it messes up the h3 setting. Ideas?
Thank you
The links want to be white #fff. If I change this it messes up the h3 setting. Ideas?
Thank you
/*****accordion*****/
#app-accordion h3 a{padding-left:15px;}
.ui-icon-circle-arrow-s, .ui-icon-circle-arrow-e{display:none;}
dl#accordion {
list-style-type:none;
margin: 0;
padding: 0;
width:100%;
overflow:hidden;
}
dl#accordion a {
display: block;
text-decoration: none;
}
dl#accordion dt {
border-right:1px solid #cacaca;
border-bottom:1px solid #cacaca;
background:url(../images/acardion-dt-tail.gif) 0 0 repeat-x #f6f8f0;
margin-bottom:2px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
dl#accordion dt.last {
margin-bottom:0px;
}
dl#accordion dt a {
font-size:18px;
line-height:35px;
color:#000;
text-decoration:none;
display:block;
background:url(../images/acardion-marker.png) 8px 10px no-repeat;
padding-left:38px;
}
dl#accordion dt a:hover {
cursor:pointer;
}
dl#accordion dt.active {
background-image:url(../images/acardion-dt-active.gif);
}
dl#accordion dd {
display:none;
margin-bottom:0;
height:233px;
font-size:14px;
line-height:19px;
font-style:italic;
color:#8d927d;
}
dl#accordion dd .ind {
padding:30px 5px 0px 17px;
}
/* Application Accordion */
#app-accordion{
}
#app-accordion h3{
margin:0;
color:#fff;
font-size:15px;
font-weight:normal;
border:1px solid #716036;
cursor:pointer;
background-color: #9b8449;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9b8449), to(#594c2a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #9b8449, #594c2a); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #9b8449, #594c2a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #9b8449, #594c2a); /* IE10 */
background-image: -o-linear-gradient(top, #9b8449, #594c2a); /* Opera 11.10+ */
background-image: linear-gradient(top, #9b8449, #594c2a);
-pie-background: linear-gradient(#9b8449, #594c2a);
}
#app-accordion h3.first{
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
#app-accordion h3.last{
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
#app-accordion a{
display:block;
color:#fff;
padding:5px 15px;
text-decoration:none;
border-top:1px solid #cdc1a4;
}
#app-accordion a.first{
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
#app-accordion h3.last{
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
#app-accordion .active{font-size:22px;}
#app-accordion div{padding:5px 15px; border:1px solid #ccc;}
#app-accordion p{}
<div id="app-accordion">
<h3><a href="#">WRITTEN MATERIAL</a></h3>
<div>
<div class="extra-wrap">
<h3>Literature</h3>
<ul>
<li><A href="pdf/premier_Rev3.pdf">Premier Informational Flyer (2 page Flyer)</A></li>
<li><a href="pdf/CLEARFlyerRev2.pdf">Clear Flyer (2 page Flyer)</a></li>
<li><A href="Calibration_Check_Flyer.pdf">Calibration Flyer (2 page Flyer)</A></li>
</ul>
</div> </div>
<h3><a href="#">SUBJECT 2</a></h3>
<div>
<p>Test<a href="pdf/article1.pdf">tanks</a>. Test text 1</p>
<p>Test Text 2.</p>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.