/*
** $CVSHeader: $
*/

body {
    background-color: white;
    color: black;
    font-family: Georgia,Times,Times New Roman,serif;
    border-collapse: collapse;
    }
table, tr, th, td {
    border: thin solid black;
    border-collapse: collapse;
    padding: 0.2em;
    vertical-align: top;
    }
.category {
    margin-bottom: 0.3em;
    width: 100%;
    }
.category table {
    width: 100%;
    }
.categoryhead {
    text-align: left;
    font-size: 110%;
    font-weight: bold;
    /* only show new category names (commented out) */
    /*display: none;
    }
.newcategory tr.categoryhead {
    display: table-row;*/
    }
/*
** colours: we keep the same s and v values
** (hsv model) for each group, changing the hue
** through 0, 29, 58 ...
*/

/* category names (s=83, v=238) */
.c1  .categoryhead { background-color: #EEA1A1; }
.c2  .categoryhead { background-color: #EEC6A1; }
.c3  .categoryhead { background-color: #EEEBA1; }
.c4  .categoryhead { background-color: #CBEEA1; }
.c5  .categoryhead { background-color: #A6EEA1; }
.c6  .categoryhead { background-color: #A1EEC1; }
.c7  .categoryhead { background-color: #A1EEE6; }
.c8  .categoryhead { background-color: #A1D0EE; }
.c9  .categoryhead { background-color: #A1ABEE; }
.c10 .categoryhead { background-color: #BCA1EE; }
.c11 .categoryhead { background-color: #E1A1EE; }
.c12 .categoryhead { background-color: #EEA1D5; }
.c13 .categoryhead { background-color: #EEA1B0; }

/* questions (s=42, v=247) */
.c1  .question { background-color: #F7CECE; }
.c2  .question { background-color: #F7E2CE; }
.c3  .question { background-color: #F7F6CE; }
.c4  .question { background-color: #E5F7CE; }
.c5  .question { background-color: #D1F7CE; }
.c6  .question { background-color: #CEF7DF; }
.c7  .question { background-color: #CEF7F3; }
.c8  .question { background-color: #CEE7F7; }
.c9  .question { background-color: #CED4F7; }
.c10 .question { background-color: #DDCEF7; }
.c11 .question { background-color: #F0CEF7; }
.c12 .question { background-color: #F7CEEA; }
.c13 .question { background-color: #F7CED6; }

/* backgrounds (s=20, v=255) */
.c1  .background { background-color: #FFEBEB; }
.c2  .background { background-color: #FFF5EB; }
.c3  .background { background-color: #FFFEEB; }
.c4  .background { background-color: #FFFEEB; }
.c5  .background { background-color: #ECFFEB; }
.c6  .background { background-color: #EBFFF3; }
.c7  .background { background-color: #EBFFFD; }
.c8  .background { background-color: #EBF7FF; }
.c9  .background { background-color: #EBEEFF; }
.c10 .background { background-color: #F2EBFF; }
.c11 .background { background-color: #FCEBFF; }
.c12 .background { background-color: #FFEBF9; }
.c13 .background { background-color: #FFEBEF; }

.headings {
    background-color: #ddd;
    }
.question {
    width: 100%;
    font-style: italic;
    font-weight: normal;
    }
.background {
    width: 100%;
    }
.view1, .view2 {
    width: 50%;
    }
/*
** questions
*/
div#Questions {
    width: 75%;
    margin-left: 23%;
    }
div#Questions span.navig a {
    text-decoration: none;
    color: #666;
    background-color: #eee;
    border-top: none;
    border-right: thin solid black;
    border-bottom: thin solid black;
    border-left: none;
    }
div#Questions span.navig a:hover {
    color: red;
    background-color: #ffe;
    border-top: thin solid black;
    border-right: none;
    border-bottom: none;
    border-left: thin solid black;
    }
div#Questions .question {
    font-size: 120%;
    font-weight: bold;
    }
/*
** table of contents
*/
div#ToC {
    font-size: 90%;
    float:left;
    width: 20%;
    padding: 0 3em 0 0;
    }
div#ToC h1 {
    font-size: 90%;
    letter-spacing: 1em;
    text-align: center;
    }
div#ToC a {
    color: #666;
    text-decoration: none;
    }
div#ToC a:hover {
    color: black;
    background-color: rgb(255,255,201);
    text-decoration: underline;
    }
div#ToC .category {
    width: 100%;
    }
div#ToC div.categoryhead {
    display: block;
    width: 100%;
    }
div#ToC .question {
    text-indent: -1em;
    margin-left: 1em;
    margin-right: 1em;
    }

/*
** printed output
*/
@media print {
    @page {
        margin: 0.3cm;
        }
        
    tr, td, th {
        font-size: 10pt;
        }
        
    tbody {
        page-break-inside: avoid;
        }
    
    div#ToC {
        float: none;
        width: 100%;
        }
    div#ToC a, div#ToC a:hover {
        text-decoration: none;
        color: black;
        background-color: #fff;
        }
    div#ToC div.categoryhead {
        display: block;
        }
    div#ToC div.c6 {
        page-break-before: always; /* manual pagination */
        }
    div#ToC span.navig {
        display: none;
        }
    div#ToC .question {
        padding: 0;
        color: black;
        background-color: #fff;
        }
    
    div#Questions {
        width: 100%;
        margin: auto;
        }
    div#Questions span.navig {
        display: none;
        }

    /*
    ** need to use divs for pagination control, because
    ** page-break-* apply to block-level constructs only
    ** (eg not tr, th, td, etc, but table is)
    **
    ** HOWEVER, browser support is patchy: Opera will
    ** honour page-break-inside, firefox and IE won't
    ** (except that firefox 2.0.0.6 seems OK if we put
    ** !important, so I probably have the cascading wrong;
    ** I guess the compatibility site was out of date) 
    */
    table {
        page-break-inside: avoid;
        }
    .category {
        page-break-inside: avoid !important;
        }
    .newcategory {    
        page-break-before: always !important;
        }
    .firstcategory {
        page-break-before: avoid;
        }
    .categoryhead {
        page-break-after: avoid;
        }
    .headings {
        page-break-after: avoid;
        }
    /*
    ** pagination: let's take a sledgehammer to crack
    ** this particular walnut. Essentially, manual
    ** pagination (yuk)
    */
    .q1,  .q2,  .q3,  .q4,  .q5,  .q6,  .q7,  .q8,  .q9,  .q10,
    .q11, .q12, .q13, .q14, .q15, .q16, .q17, .q18, .q19, .q20,
    .q21, .q22, .q23, .q24, .q25, .q26, .q27, .q28, .q29, .q30,
    .q31, .q32, .q33, .q34, .q35, .q36, .q37, .q38, .q39, .q40,
    .q41, .q42, .q43, .q44, .q45, .q46, .q47, .q48, .q49, .q50,
    .q51, .q52, .q53, .q54, .q55, .q56, .q57, .q58, .q59, .q60,
    .q61, .q62, .q63, .q64, .q65, .q66, .q67, .q68, .q69, .q70,
    .q71, .q72, .q73, .q74, .q75, .q76 {
        page-break-before: auto;
        }
    .q2, .q4, .q6, .q8, .q12, .q15, .q19, .q23, .q28, .q33, .q42, .q49, .q56, .q62, .q65, .q69, .q74 {
        page-break-before: always;
        }
    /*
    ** we can also control display of the category, since we
    ** are manually setting the page breaks (yuk again)
    */
    .categoryhead {
        display: none;
        }
    .newcategory tr.categoryhead,
    .q1  tr.categoryhead, .q2  tr.categoryhead, .q4  tr.categoryhead, .q6  tr.categoryhead,
    .q8  tr.categoryhead, .q12 tr.categoryhead, .q15 tr.categoryhead, .q19 tr.categoryhead,
    .q23 tr.categoryhead, .q28 tr.categoryhead, .q33 tr.categoryhead, .q42 tr.categoryhead,
    .q49 tr.categoryhead, .q56 tr.categoryhead, .q62 tr.categoryhead, .q65 tr.categoryhead,
    .q69 tr.categoryhead, .q74 tr.categoryhead {
        display: table-row;
        }
    }