/*STYLES FOR 'ON THE WRONG SIDE!' FREQUENTLY ASKED QUESTIONS.*/

/*TOP BANNER*/
/*The style and position of the large title on the banner .*/
.titleonbanner {
    max-width: 782px; /*Accommodates all iPhones.*/
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 28pt;
    font-family: Garamond, "Times New Roman", serif;
    color: white;
}

/* CONTENT */
/* The main heading.*/
.faq-heading{
    max-width:1430px;
   margin-top: 10px;
    font-weight: bold;
    font-size: 16pt;
    font-family: Garamond, "Times New Roman", serif;
    text-align: center;
    text-indent: 0px;
}

.faq-section {padding-left: 5px} /*For each FAQ section.*/

/*For computer use.*/
@media screen and (min-width: 480px){
    .faq-heading{font-size: 22pt}
    .faq-section{padding-left: 10px}
}


/*DEFAULTS FOR THE TRIANGLES PRECEDING THE CHECKBOXES: i.e. when the checkbox/label is not checked.*/

/*The right-pointing triangle. The code is subtle, taking advantage of built-in properties of 'border', and by default assumes 'border-right' is zero. 
Experiment by adding border-right: 32px solid blue; or by changing colours from 'transparent.'*/
.triangle-r{
    display: block;/*This triangle is displayed.*/
    float: left; /*Place it to the left of what follows.*/
	width: 0px; 
	height: 0px; 
	border-top: 15px solid transparent;
	border-left: 30px solid black;
	border-bottom: 15px solid transparent;
    margin-top: 21px;/*Position the triangle so that it is level with the first line of the label.*/
}

/*The downward-pointing triangle.*/
.triangle-d{
    display: none;/*This triangle is NOT displayed.*/
    float: left; /*Place it to the left of what follows.*/
	width: 0px; 
	height: 0px; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 30px solid black;	
    margin-top: 21px;/*Position the triangle so that it is level with the first line of the label.*/
}


/*THE TRIANGLES: CHECKBOX CHECKED.*/
.faq-section input:checked~ .triangle-r{display: none} /*Hide the right-facing triangle ...*/
.faq-section input:checked~ .triangle-d{display: inline-block; float: left} /*... and display the downward-pointing triangle.*/

/*THE CHECKBOX.*/
.faq-section input{opacity: 0}	/*This hides the little 'checked' rectangle that lights up when the input is checked.*/

/*THE CHECKBOX'S QUESTION LABEL.*/
.faq-section label{
    display: block; 
    font-size: 12pt;
    background-color: lightyellow;
    max-width:1430px; /*Maximum width and minimum height of the question label.*/
	min-height: 30px;
    font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	border: 2px solid black;
    border-radius: 5px;
    padding-right: 25px;
    padding-left: 25px;
    position: relative;
    left: 25px;
    margin-left: 18px;
    margin-right: 25px; /*Essential for showing right border when width is less than maximum.*/
}

.faq-section label:hover{background-color: lightcyan; cursor: pointer} /*Colour of the label and change of cursor when hovering over it.*/

/*An aesthetic gap, determined by 'height', between a question label and the next one, but inoperative when the checkbox is checked. */
.gap1{Display: block; height: 30px; font-size: 0} 

.faq-section input:checked~p.gap1{display: none} 


/*THE ANSWER.*/
.answer{
	display: none; /*Nomally hidden ...*/
    font-size: 12pt;
    max-width:1500px;
    text-indent: 25px;
    font-family: Helvetica, Arial, sans-serif;
}

.faq-section input:checked~p.answer{display: block} /*... but visible when the checkbox is checked.*/

/*For computer use.*/
@media screen and (min-width: 480px){
    .faq-section label{font-size: 18pt}
    .answer{font-size: 18pt}
    }
    
/*ADDITIONALSTYLES NEEDED WHEN THERE IS AN IMAGE, AS IN QUESTION 8.*/

/*A gap for question 8, determined by 'height', between a question label and the following answer. See comments in the code section A.8 for the reason.*/
.gap8{Display: none; height: 2px; font-size: 0} 
.faq-section input:checked~p.gap8{display: block} 

.answer8image{
    display: none; /*Nomally hidden ...*/
    float: left;
    width:  150px;
    height: 200px;
    padding-left: 0%;
    padding-top: 10px;
}

.faq-section input:checked~p.answer8image{display: block} /*... but visible when the checkbox is checked.*/

/*PDF book extract as part of the answer to Q.11. */

.extract{  
    width: 95%;
    height:500px;
}

@media only screen and (min-width: 1597px) {
  .extract{
    width: 1580px;
    height:1000px;
  }
}

/*END OF QUESTIONS.*/

.gap2{Display: block; height: 30px; font-size: 0} /*An aesthetic gap, determined by 'height', between the end of questions and the colophon.*/

/*********************************************************************************************/