/* v 1.0.3 =100 */
/* Questions are in the DTs, Answers are in the DDs */
/* You may want to go "shorthand" with all these rules but this one: a.easyFAQ_OFF,a.easyFAQ_ON {} */ 

/* Use this rule to style all the Definition Lists. Here we're zeroing out both padding and margin */
.easyFAQ_DL {
/* this first value create space between the DL and the text or image-buttons above */
margin-top:15px;
margin-right:0;
margin-bottom:0;
margin-left:0;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:0;
}
/* zeroing out padding and margin for both elements (the DTs and the DDs) */
.easyFAQ_DL dd,.easyFAQ_DL dt {margin:0;padding:0} 
/* margin values for the Questions (the DTs) */
.easyFAQ_DL dt {
margin-top:7px;
margin-right:0;
margin-bottom:7px;
margin-left:0;
}
/* Use this rule to style the anchors that the script creates inside the DTs (they wrap the Questions). */
/* You will not see them in the markup because we are using the DOM to plug them when the page loads in the browser */
.easyFAQ_DL dt a {
color:#039;
background-color:transparent;
background-position:0 0;
background-repeat:no-repeat;
padding-left:32px;
text-decoration:none;
font-weight:normal;
display:block;
border-bottom: 1px solid #eee!important;
}
/* This is to create a "rollover effect" on the Questions (same effect through keyboard navigation) */
.easyFAQ_DL dt a:hover,
.easyFAQ_DL dt a:active,
.easyFAQ_DL dt a:focus {color:#00f; border-bottom: 1px solid #000!important;} 
/* the two rules below are used to set the background images of the Questions (the "+" and "-" gif) */
.easyFAQ_DL .DTplus a {background:url(toggleDLplus.gif) no-repeat }
.easyFAQ_DL .DTminus a {background:url(toggleDLminus.gif) no-repeat}
/* this rule is for the Answers, we are using it to set a background image and some padding */
.easyFAQ_DL dd {
color:#333;
background-color:transparent;
background:url(answer.gif);
background-repeat:no-repeat;
padding-left: 50px;
}
/* these 2 are used to set a minimum height for the Answers, the DDs (both values *must* match) */
.easyFAQ_DL dd {min-height:40px} @media screen {* html .easyFAQ_DL dd {height:40px}}

/* This is a "spacer" image between the two buttons in options #1 and #2. It is there to address checkpoint 10.5 of the WCAG (Web Content Accessibility Guidelines). */
/* Its height value may be used to add a buffer space above the two buttons (option #1 and #2) */
img.easyFAQ_twoi_spacer {
/* this value dictates the space between the two buttons (text or image) */
width:10px;
/* use this to create space *above* the two buttons (option #1 and #2). */
height:20px;
border:none !important;
}

/**************************************************************************************************/
/* OPTION #1: (Two Text-Buttons)
These are the two text buttons that appear above the Definition List with Option #1
if you need to alter the space between these 2 buttons, use the ".easyFAQ_DL img.easyFAQ_twoi_spacer{}" rule */
/**************************************************************************************************/

a.easyFAQ_OFF,a.easyFAQ_ON {
color:#fff;
background-color:#66c;
text-decoration:none;
/* for best results, you have to use shorthand for padding */
padding:1px 5px;
border:1px solid #66c;
}
/* This is to create a "rollover effect" (color and background-color swap) on these buttons (same effect through keyboard navigation) */
a:hover.easyFAQ_OFF,
a:hover.easyFAQ_ON,
a:active.easyFAQ_OFF,
a:active.easyFAQ_ON,
a:focus.easyFAQ_OFF,
a:focus.easyFAQ_ON {
color:#000;
background:#f63;
}
/**************************************************************************************************/
/* OPTION #2: (Two Image-Buttons) 
These are the two image buttons that appear above the Definition List with Option #2 
if you need to create space between these 2 buttons, use the ".easyFAQ_DL img.easyFAQ_twoi_spacer{}" rule */
/**************************************************************************************************/
/* in the generated markup we are using transparent images so we use the rule below to set up background properties common to both images */
.easyFAQ_ONi img, .easyFAQ_OFFi img {
background-position:left center;
background-repeat:no-repeat;
background-color:transparent;
border:none !important;
/* width and height for these images */
width:54px !important;
height:24px !important;
}
/* this is the image we use to open the Answers */
.easyFAQ_ONi img {background-image:url(easyFAQ_ONi.gif)}
/* this is the image we use to close the Answers */
.easyFAQ_OFFi img {background-image:url(easyFAQ_OFFi.gif)}
/* This is to create a "rollover effect" (background-image swap) on these image buttons (same effect through keyboard navigation). Note that we are using only one image per element (that image contains both states), the idea is to move that image in the background to show the area we want to show. */
a:hover.easyFAQ_ONi img,
a:hover.easyFAQ_OFFi img,
a:active.easyFAQ_ONi img,
a:active.easyFAQ_OFFi img,
a:focus.easyFAQ_ONi img,
a:focus.easyFAQ_OFFi img {
background-position:right center;
}
/***************************************************************************************************/
/* OPTION #3: 
This is the single string of text with an icon on the left hand-side that appears above the Definition List with Option #3 */
/***************************************************************************************************/
.easyFAQstate_openall,.easyFAQstate_closeall {
text-decoration:none;
font-weight:normal;
background-image:url(i/DTBlue1arrowRt.gif);
background-position:left center;	
background-repeat:no-repeat;
padding-left:32px;
display:block;
}
.easyFAQstate_closeall{background-image:url(i/DTBlue1minus.gif)}
/**************************************************************************************************/
/* OPTION #4: (None)
There is no master toggler inserted before the FAQ hence nothing special to style */
/**************************************************************************************************/

/* there are no special rules with this option. Common rules above will apply */

/***************************************************************************************************/
/*********************** YOU SHOULD NOT EDIT ANYTHING BELOW THIS ***********************************/
/***************************************************************************************************/

/* this is the "hook" for the named anchors in the DTs (the Questions) */
a.easyFAQ_namedanchor {display:inline}
/* this is used to hide/reveal the DDs (the answers) */
.easyFAQ_DL .showDD {position:relative;top:0}
.easyFAQ_DL dd,.easyFAQ_DL .hideDD{top:-9999px;position:absolute; width: 500px;}