hi _

i have custom styled a collapsible panel header which conforms to the written code until the mouse comes off the panel title (mouse-out???)
when this happens the title appears to revert to bootstrap default styling for a hover state and ONLY goes back to my styling if i click another area of the page or refresh

state1.jpg state2.jpg

the first image shows the anchor tag before mouse-hover or click occurs
as you can see from the CSS below the hover state turns the font style white and no text-decoration
BUT after mouse-click the font becomes blue and underlined!
and will only revert back to orange if the mouse is clicked anywhere else on the page or the page is refreshed

at first i thought it might be javascript problem because things go wrong on mouse-out but checking back over things i'm not sure
Bootstrap website says if you're linking to the minified version then transitions.js is included and so i've reverted to looking at the CSS again

i have used firebug to go through all possible css inheritances before bothering you guys with the problem but i'm stuck
(the solution is probably staring me in the face!)

HTML
Code:
	<section id="introPanel">
		<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		  <div class="panel panel-default">
			<div class="panel-heading" role="tab" id="headingOne">
			  <h6>
				<a class="panelTitle defocus" role="button" data-toggle="collapse" href="#introDetails" data-parent="#accordion" aria-expanded="false" aria-controls="collapseOne">
				  FOR MORE DETAILS CLICK HERE
				</a>
			  </h6>
			</div><!-- end panelheading -->
			<div id="introDetails" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
			  <div class="panel-body">
				<p class="orange12b">PGR offers new subscribers a 14 DAY FREE TRIAL* to try out our great service. 
				<!-- just text styling from here onwards >>> -->
				<p class="white10">* Terms &amp; Conditions apply
				</p>
			  </div><!-- end panel-body -->
			</div><!-- end introDetails -->
		  </div><!-- end panel panel-default -->
		  
		</div><!-- end panel-group -->

	</section><!-- end introPanel -->

CUSTOM CSS
these are the classes relating to the above

Code:
.panelTitle {
  font-family: 'Audiowide';
  font-size: 14pt;
  color: #F78922;
  padding: 5px;
  cursor: pointer;
}

.panelTitle:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.defocus:focus {
	outline: none;
	-moz-focus-inner: border: 0;
}
Any assistance bootstrappers can give me will be VERY gratefully received _ Thank you