/*------------------------------------------------------------------------------
 * Style Sheet: klQuiz.css
 * Contains style declarations for: HTML elements required by klQuiz script.
 * Copyright © 2003-2004 K&L Design Productions. All rights reserved. 
 *----------------------------------------------------------------------------*/

/*---------------------- IMPORTANT NOTICE TO WEB MASTER ------------------------
 * THE FOLLOWING COMMENTS ARE PROVIDED AS A GUIDANCE TO MAKING MODIFICAIONS TO
 * THIS FILE AND CAN BE DELETED PRIOR TO PUBLISHING IT
 *----------------------------------------------------------------------------*/
 
 
/* HTML element that contains quiz name string */
#klQuizName
  { text-align: center;
    font-weight: bold;
    margin: 15px 20px 5px 20px;
    padding-bottom:10px;
	background:      #6899ff;
    color: #fff;
  }

/* HTML block element that contains quiz question */
#klQuizQuestion
  { margin:    0px 20px;
    border:    solid #115 1px;
	 /*Limiting the element height and setting overflow to auto
	   will add the scroll bar to this element when the quiz question
	   does not fit the space. Leave these declarations out if you
	   want the element to automatically adjust to the size of its
	   content */
    height:     60px;
    overflow:   auto;
  }
  
/* Class name applied to quiz question area during question presentation */   
.klQuizQAquestion
  { background: #fff;
    color:      #115;
  }
    
/* Class name applied to quiz question area during question explanation */   
.klQuizQAexplanation
  { background: #fff;
    color:      #115;
  }
    
/* Class name applied to quiz question area during question review */   
.klQuizQAreview
  { background: #fff;
    color:      #115;
  }
    
/* Class name applied to quiz question area during repeat of wrong questions */   
.klQuizQArepeat
  { background: #fff;
    color:      #115;
  }
    
/* Style for an image that may be present in a quiz question */
#klQuizQuestion img
  { margin:     10px;
  }

/* Style for a textual part of the quiz question that is presented
   as a paragraph element, child of the #klQiuzQuestion block */ 
#klQuizQuestion p
  { margin:     5px;
    padding:    2px;
    font-size:  90%;
    font-weight: bold;
  }

/* HTML block element that contains quiz answers */
#klQuizAnswers
  { position: static;
    padding: 10px;
    margin: 10px 20px;
    border:    solid #115 1px;
    /* Limiting the element height and setting overflow to auto
	   will add the scroll bar to this element when the quiz question
	   does not fit the space. Leave these declarations out if you
	   want the element to automatically adjust to the size of its
	   content */
    height: 150px;
    overflow: auto;
  }

/* Class name applied to quiz question area during question presentation */   
.klQuizAAquestion
  { background: #fff;
    color:      #115;
  }
    
/* Class name applied to quiz question area during question explanation */   
.klQuizAAexplanation
  { background: #fff;
    color:      #115;
  }
    
/* Class name applied to quiz question area during question review */   
.klQuizAAreview
  { background: #fff;
    color:      #115;
  }
    
/* Class name applied to quiz question area during repeat of wrong questions */   
.klQuizAArepeat
  { background: #fff;
    color:      #115;
  }
    
/* Style of the input element representing either check box or radio
   button of the answer choice */
#klQuizAnswers input
  { cursor: pointer;
  }

/* Style of the label element containing the answer choice text*/
#klQuizAnswers label
  { display: block;
    margin: 2px;
    cursor: pointer;
	/* The following two declarations make the first line that contains
	   the input element stand out, which makes the beginning of the 
	   answer choice text that takes more than one line vertically 
	   aligned */ 
    text-indent: -1.5em;
    padding-left: 1.5em;
  }

/* Style of the class applied to correct answer choices upon grading */
#klQuizAnswers label.correct
  { color: #33e;
    text-decoration: underline;
  }

/* Style of the class applied to incorrect answer choices upon grading */
#klQuizAnswers label.incorrect
  { color:       #e33;
    text-decoration: line-through;
  }

/* Style of answer choice explanations*/
#klQuizAnswers p.explanation
  { padding:      0px 5px 5px 20px;
    border-bottom: groove #33e 3px;
    margin:         0px 0px 10px 0px;
  }
  
/* HTML block element that contains quiz controls */
#klQuizControls
  { text-align: center;
  }

/* Quiz control buttons style applied to "Next Action" and "Reset" buttons */  
#klQuizControls button
  { margin:          2px 5px;
    padding:         2px 15px;
    background:      #eef;
    color:           #115;
    font-weight:     bold;
    border-color:    #33e;
	white-space:     nowrap;
  }

/* Styling of disabled control button */
#klQuizControls button.disabled
  { margin:          2px 5px;
    padding:         2px 15px;
    background:      #eef;
    color:           #99f;
    font-weight:     bold;
    border-color:    #33e;
  }

/* HTML block element containing quiz statistics string */
#klQuizStats
  { font-weight: bold;
    margin: 0px;
    text-align: center;
	background:      #6899ff;
    color:      #fff;
  }

/* Style of the span elements, children of #klQuizStats. These
   elements contain the statistics numbers which can also be 
   individually styled using their IDs*/
#klQuizStats span
  { margin: 0;
  }

/* Style of the spacer span element. Adjust the padding number for
   the desired spacing.*/
#klQuizStats span.spacer
  { padding-left: 3em;
  }


/* Styles for the results screen applied to quiz question and 
   answer areas */
.klQuizResultsQA
  { background: #fff;
    color:      #115;
	text-align: center;
  }

.klQuizResultsAA
  { background: #fff;
    color:      #115;
  }


/* Transition screen styles applied to quiz question and answer
   areas. These classes are passed to the klQuiz script via the
   quiz configuration object. */
   
  /* Quiz Start Transition Screen */ 
.klQuizStartQA
  { font-size: 2em;
    padding-top: 0.5em;
    text-align: center;
    background: #fff;
    color:      #115;
  }

.klQuizStartAA
  { font-weight: bold;
    text-align: center;
    background: #fff;
    color:      #115;
  }
  
  /* Review Quiz Transition Screen */ 
.klQuizReviewQA
  { font-size: 1.5em;
    padding-top: 0.5em;
    background: #fff;
    color:      #115;
	text-align: center;
  }

.klQuizReviewAA
  { font-weight: bold;
    background: #fff;
    color:      #115;
  }
  
  /* Repeat Wrong Answers Transition Screen */ 
.klQuizWrongRepeatQA
  { font-size: 1.5em;
    padding-top: 0.5em;
    background: #fff;
    color:      #115;
    text-align: center;
  }

.klQuizWrongRepeatAA
  { background: #fff;
    color:      #115;
  }
  
  /* Quiz End Transition Screen */ 
.klQuizEndQA
  { font-size: 2em;
    padding-top: 0.5em;
    text-align: center;
	background: #fff;
    color:      #115;
  }

.klQuizEndAA
  { font-weight: bold;
    text-align: center;
	background: #fff;
    color:      #115;
  }