| Current File : /home/lifechur/test-static.lifechurchboston.org/diva/divaFAQ/divaFAQ2.css |
/* v1.1.0 ; 110 adds .showDD2 class; 100 adds zoom to dt styling and comments with each img url; 036 changed default image for two image button, removed redundant rule (avant dernière); 035 add left 0 to dl hide; 032 added vertical align to ONi and OFFi img style; 031 style and comment edits; 030 now use Q/Q_06-1.gif for DT icons; */
/* Questions are in the DTs, Answers are in the DDs */
/* You may want to go "shorthand" with all these rules but not this one: a.divaFAQ_OFF,a.divaFAQ_ON {} nor for Dreamweaver users any background rules that include image urls*/
/* Use this rule to style all the Definition Lists. */
.divaFAQ_DL {
margin-top:15px; /* this first value creates space between the DL and the text or image-buttons above */
margin-right:0; /* zeroing out all other margins and all paddings */
margin-bottom:0;
margin-left:0;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:0
}
/* zeroing out padding and margin for the DTs and DDs */
.divaFAQ_DL dd,.divaFAQ_DL dt {
margin:0;padding:0
}
/* margin values for the Questions (the DTs) */
.divaFAQ_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 */
.divaFAQ_DL dt a,
.divaFAQ_DL dt a:visited {
zoom:1;/*Move this rule into a Conditional Comment in your document's Head if you need this document to Validate. See the divaFAQ FAQ page (search it for 'zoom') for more information */
color:#039;
background-color:transparent;
background-position:0 0;
background-repeat:no-repeat;
padding-left:32px;
text-decoration:none;
font-weight:normal;
display:block
}
/* This is to create a "rollover effect" on the Questions (same effect through keyboard navigation) */
.divaFAQ_DL dt a:hover,
.divaFAQ_DL dt a:active,
.divaFAQ_DL dt a:focus {
color:#00f
}
/* these two rules are used to set the default background images of the Questions (the "+" and "-" gif). These urls are ignored in favor of your customization done in the DW UserInterface in the Dreamweaver version, or in the divaFAQ variable itself for the Standalone version. */
.divaFAQ_DL .DTplus a {
background-image:url(i/Q/Q_06-1_open.gif)
}
.divaFAQ_DL .DTminus a {
background-image:url(i/Q/Q_06-1_close.gif)
}
/* this rule is for the Answers, we are using it to set a background image and some padding. The img url is ignored in favor of your customization done in the DW UserInterface in the Dreamweaver version, or in the divaFAQ variable itself for the Standalone version.*/
.divaFAQ_DL dd {
color:#333;
background-color:transparent;
background-image:url(i/A/A_08-1.gif);
background-repeat:no-repeat;
/* padding-left:55px; */
padding-left:0px;
padding-bottom:6px;
}
/*.divaFAQ_DL dd.showDD2 {
background-image:none;
}
*/
dd.divaFAQsubhead{
font-size: larger;
font-weight: bold;
color: #666666;
}
/* these 2 are used to set a minimum height for the Answers, the DDs (both values *must* match) */
.divaFAQ_DL dd {min-height:40px}
@media screen {* html .divaFAQ_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) and is also useful for styling purposes: */
img.divaFAQ_twoi_spacer {
width:10px;/* this value dictates the space between the two buttons (text or image) */
height:20px;/* use this to create space *above* the two buttons (option #1 and #2). */
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 ".divaFAQ_DL img.divaFAQ_twoi_spacer{}" rule above*/
a.divaFAQ_OFF,a.divaFAQ_ON {
color:#fff;
background-color:#4961B1;
text-decoration:none;
padding:1px 5px; /* for best results, you have to use shorthand for padding */
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.divaFAQ_OFF,
a:hover.divaFAQ_ON,
a:active.divaFAQ_OFF,
a:active.divaFAQ_ON,
a:focus.divaFAQ_OFF,
a:focus.divaFAQ_ON {
color:#000;
background-color:#e5eecc;
border-color:#ccc;
}
/******************* 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 ".divaFAQ_DL img.divaFAQ_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 */
.divaFAQ_ONi img, .divaFAQ_OFFi img {
background-position:left center;
background-repeat:no-repeat;
background-color:transparent;
vertical-align:bottom;
border:none !important;
width:54px !important; /* width and height for these images */
height:20px !important;
}
/* this is the image we use to open the Answers. This url is ignored in favor of your customization done in the DW UserInterface in the Dreamweaver version, or in the divaFAQ variable itself for the Standalone version. */
.divaFAQ_ONi img {
background-image:url(i/toggler/T_0_open.gif)
}
/* this is the image we use to close the Answers. This url is ignored in favor of your customization done in the DW UserInterface in the Dreamweaver version, or in the divaFAQ variable itself for the Standalone version. */
.divaFAQ_OFFi img {
background-image:url(i/toggler/T_0_close.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.divaFAQ_ONi img,
a:hover.divaFAQ_OFFi img,
a:active.divaFAQ_ONi img,
a:active.divaFAQ_OFFi img,
a:focus.divaFAQ_ONi img,
a:focus.divaFAQ_OFFi img {
background-position:right center;
}
/************************ OPTION #3: (Single Text String) ********************
This is the single string of text with an icon on the left hand-side that appears above the Definition List with Option #3. These image urls are ignored in favor of your customization done in the DW UserInterface in the Dreamweaver version, or in the divaFAQ variable itself for the Standalone version. */
.divaFAQstate_openall,.divaFAQstate_closeall {
text-decoration:none;
font-weight:normal;
background-image:url(i/Q/Q_05-1_open.gif);
background-position:left center;
background-repeat:no-repeat;
padding-left:22px;
display:block;
}
.divaFAQstate_closeall{
background-image:url(i/Q/Q_05-1_close.gif)
}
/********************** OPTION #4: (No Toggler) *************************
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 is the "hook" for the named anchors in the DTs (the Questions) */
a.divaFAQ_namedanchor {display:inline}/* */
/* this is used to hide/reveal the DDs (the Answers) */
.divaFAQ_DL .showDD, .divaFAQ_DL .showDD2 {position:relative;top:0}/* */
.divaFAQ_DL dd,.divaFAQ_DL .hideDD{left:0;top:-9999px;position:absolute}/* */