Get rid of Spry Accordion bluebox

Question

I have two questions. First I am using a spry accordion for this website I'm designing, however its the fist time I've used it so I wanted to know how to turn off the blue box that surrounds it everytime you press on it. Does anyone know? I tried to revise the css but I know its not in there.

My second question is how do I make all the tabs closed when you open the website? Here is the example of the website, I think it will make it easier to visualize. Spry Panel Example

Thanks! Sophie

Answer 1

I figured it out, you actually need to erase the tab index at the beginning of the accordion html code:

<div id="Accordion1" class="Accordion" tabindex="0">

Answer 2

It actually seems to have nothing to do with spry, what I'd do is add this to your CSS:

.Accordion {
  border:none;
  outline:none;
}

Answer 3

Actually none of the above worked for me, what you have to do is instead of saying border and outline NONE it works best if you apply the background colour. so instead of trying to get rid of it - disguise it. works a treat