/*
Styles for the Cambridge University 'Reporter'

This file contains style rules for the following aspects of 
the main content. Other parts of the page (nav, header, footer)
are elsewhere.

- subsections
- headings
- paragraphs
- general modifiers
- tables
- lists
- 'End of the official part of the reporter'
- footnotes
- occasional use
- "cam-only" related
- help tooltips
- links
- contents
- dev-only

GENERAL NOTES

- Scaling: 100% = 10pt in source document 
- To affect only the main content area, clarify rules with 
  div.subsection or #body 

$Revision: 3 $
$Author: snr21 $
$LastChangedDate: 2010-09-29 10:53:32 +0100 (Wed, 29 Sep 2010) $

Created by Simon Redhead
*/


@import "page-template.css";


/* SUBSECTIONS */

div.subsection {
    margin : 0.5em 0 0.8em 0;
    padding : 0;
    border : solid #9999cc;
    border-width : 1px 0 0 0;
}
div.subsection.noheadings {
    border : 0;
}
div.subsection > p:first-child {
    margin-top : 0.7em;
}

/* HEADINGS */

h1 {
    text-align : left;
    text-transform : uppercase;
    font-weight : bold;
    font-style : normal;
    font-size : 140%;
    letter-spacing : .12em;
    margin : 0.5em 0 0.8em 0;
}


h2 {
    font-size : 120%;
    letter-spacing : 0;
    padding : 0.3em 0 0.3em 0;
    margin-top : 0.2em;
    margin-bottom : 0.3em;
}


h3 {
    font-size : 90%;
    font-style : italic;
    font-weight : normal;
}


h4 {
    font-size : 90%;
    font-style : normal;
    margin-top : 1em;
    margin-bottom : 0.6em;
    font-weight : bold;
}


h4.smallcap {
    font-size : 100%;
    font-weight : normal;
    font-variant : small-caps;
}

h4.large {
    text-align : center;
    font-size : 110%;
}

/* Reduce space between adjacent headings, or before those 
   explicitly marked up. */
h2 + h4,
h2 + h3,
h3 + h4,
.NoSpaceBefore {
    margin-top : 0.5em;
}

/* PARAGRAPHS */

p {
    font-size : 90%;
    text-indent : 1em;
    margin : 0 0 0.6em 0;
    text-align : justify;
    min-height : 1em; /* To preserve spacing required by empty paragraphs */
}

p.fullout {
    text-indent : 0;
}

p.hanging {
    text-indent : -1em;
    padding-left : 1em;
    margin-bottom : 0;
    line-height : 1.8em;
}

p.unjustified {
    text-indent : 0;
    text-align : left;
}
/* enhanging should follow unjustified in CSS (it trumps it) */
p.enhanging {
    text-indent : -0.5em;
    padding-left : 0.5em;
    margin-bottom : 0;
}

p.justified {
    /* this, in fact, is the default */
    text-align : justify;
}


p._1em2em {
    text-indent : -1em;
    padding-left : 2em;
}

._10pt {
    /* A distinction in text size is made in the print edition for included
   extracts, but this doesn't work well online; you can turn it on here 
   to see the effect. */
    /*   font-size: 100%;*/
}

p.quote {
    /* For quoted passages */
    text-indent : 0;
    padding-left : 2em;
    padding-right : 1em;
    line-height : 1.3em;
}

p.centre {
    text-align : center;
}

p.right {
    text-align : right;
}

/* Lists of dates are formatted as large hanging indents */
p.dates {
    text-align : left;
    text-indent : -16em;
    padding-left : 16em;
}
p.dates span.date {
    display : inline-block;
    width : 14.5em;
    text-indent : 0em;
}


/* GENERAL MODIFIERS */

.quad {
    padding-left : 1.5em;
}

.roman {
    font-style : normal;
}
.smallcap {
    font-variant : small-caps;
}
.smallcap roman {
    font-variant : small-caps;
    font-style : normal;
}

strong.semi {
    font-weight : inherit; /* inherit, because this tag appears in different font-weight contexts. 400=normal, 700=bold */
}

.cap {
    text-transform : uppercase;
}


/* TABLES */

/* Tables are dealt with quite generically, as almost all styling is done per-cell.
   Empty rows should still occupy space. 

   Very wide tables should be manually wrapped in <div class="scrollpane"/> to
   reduce the text slightly and to cause the browser to add scrollbars if needed.

    */


.scrollpane {
    overflow : auto;
    overflow-y : hidden;
    -ms-overflow-y : hidden;
    border : 1px solid #e8e8e8;
}

.scrollpane table {
    font-size : 95%;
}

table {
    width : 100%;
    font-size : 100%;
    border-collapse : separate;
    margin : 0.5em 0 1em 0;
    empty-cells : show;
}

td {
    padding-right : 0.8em;
    vertical-align : top;
}

td.empty {
    padding : 0.5em 0 0.5em 0;
}

td p,
td p.hanging {
    margin : 0;
    line-height : 1.2em;
}

td p.figright {
    text-indent : 0;
    text-align : right;
    padding-right : 35%;
}

/* Decimal style below added by Angela Bennett, December 2011 */
td p.decimal {
    text-indent : 0;
    text-align : right;
    padding-right : 46%;
}

table.Signature,
table.Tablesignatures {
    line-height : 1em;
}


/* Optional table styles */

/* add borders to table cells. s* means "strong"
   e.g. class="bb br" for borders on right-hand and bottom edges
*/
td.bb {
    border-bottom : 1px solid black;
}
td.bt {
    border-top : 1px solid black;
}
td.bl {
    border-left : 1px solid black;
}
td.br {
    border-right : 1px solid black;
}
td.sbb {
    border-bottom : 2px solid black;
}
td.sbt {
    border-top : 2px solid black;
}
td.sbl {
    border-left : 2px solid black;
}
td.sbr {
    border-right : 2px solid black;
}

table.borders {
    border : 1px solid black;
    border-collapse : collapse;
}
table.borders td {
    border : 1px solid black;
    padding : 0.3em 0.5em;
}


/* LISTS */

/*  RangedLeft is generally used for alphabetic lists (a), (b), (c) etc  which tend to be 'level 1' lists
    RangedRight is used for l.c. roman numeralled lists, (i), (ii), (iii) etc  which tend to be 'level 2' lists
 
    Because our markup intent is typographical and not semantic, we don't represent any of this in the 
    HTML "nested lists" way. In fact, oftentimes /partial/ lists are presented (e.g. beginning at (g)), so 
    the HTML way is on dodgy semantic ground anyway.

    The text-indent/padding combinations interact, taking some effort to get right, so don't tweak
    unless you understand the 'big picture' fully - and have time to test the results! And time also
    to test in, and inevitably hack, IE.

    It would be better to fix the style of an individual troublesome element directly in HTML 
    (with style="something: value") than to inadvertently break the general case.

*/

span.item-designator {
    display : inline-block;
    padding-right : 0.5em;
    text-indent : 0;
    text-align : left;
}

p.ListRangedLeft {
    text-indent : -2em;
    padding-left : 3em;
    margin-bottom : 0.3em;
}


p.ListRangedLeft span.item-designator {
    width : 1.5em;
    text-align : left;
    text-indent : 0;
}
p.ListRangedLeft span.item-designator.bulleted {
    text-indent : 0.8em;
}


p.ListRangedRight {
    text-indent : -4.5em;
    padding-left : 4.5em;
    margin-bottom : 0.3em;
}

p.ListRangedRight span.item-designator {
    width : 2em;
    padding-left : 2em;
    text-align : right;
    text-indent : 0;
}

span.leading-element {
    font-style : italic;
    display : inline-block;
    width : 3.5em;
    padding-left : 3em;
    text-indent : 0;
}

p.with-leading-element span.item-designator.pointed {
    padding-left : 5em;
    padding-right : 0.5em;
}

p.ListRangedRight.with-leading-element span.item-designator {
    padding-left : 0;
}

p.ListRangedRight.with-leading-element {
    text-indent : -9em;
    padding-left : 9em;
}

p.ListRangedLeft.with-leading-element span.item-designator {
    padding-left : 0;
}

p.ListRangedLeft.with-leading-element {
    text-indent : -6.5em;
    padding-left : 5.5em;
}

p.ListRangedLeft .leading-element {
    padding-left : 1em;
}



/* 'End of the official part of the reporter' */


#body .EndOfOfficial {
    text-indent : 0;
    margin-top : 4em;
    padding : 1em 0;
    border : solid #000088;
    border-width : 1px 0;
    font-style : normal;
    font-weight : bold;
    text-align : center;
    text-transform : uppercase;
}

#body .on-this-page .EndOfOfficial {
    text-indent : 0;
    margin : 0.8em 0;
    padding : 0;
    border : 0;
    font-style : italic;
    font-weight : normal;
    text-align : left;
    text-transform : none;
}



/* FOOTNOTES */

span.footnote-ref {
    font-size : 70%;
    vertical-align : top;
    padding : 0 0.2em;
    font-weight : bold;
}

.table-of-footnotes {
    margin : 1em 0 0 0;
    border-top : 1px solid #ddddee;
    border-bottom : 1px solid #ddddee;
}

.table-of-footnotes h1,
.table-of-footnotes h2 {
    margin-top : 0;
    font-size : 85%;
}

div.footnotes-for-section {
    padding : 0.5em 0 0 0;
}

ul.footnotes {
    list-style-type : none;
    padding : 0 0 0.5em 0;
    line-height : 1.1em;
    margin : 0;
}

ul.footnotes li {
    margin-bottom : 0.8em;
}

ul.footnotes span.footnote-num {
    width : 1.875em;
    font-size : 80%;
    vertical-align : top;
    text-indent : 0;
    display : inline-block;
    text-align : right;
    padding-right : 0.5em;
}

ul.footnotes li p {
    margin : 0.4em 0;
    text-align : left;
    text-indent : -2em;
    padding-left : 2em;
}
ul.footnotes p.runon {
    margin-top : 0;
    padding-left : 2em;
    text-indent : 0;
}
.footnotes li:target {
    border-left : 5px #c83030 solid;
    outline : none;
}



/* OCCASIONAL USE */

span.dropcap {
    float : left;
    font-size : 300%;
    height : 1em;
    margin : 0;
    overflow : visible;
    padding : 0;
    position : relative;
    text-transform : uppercase;
    top : -0.25em;
    vertical-align : top;
    width : 1em;
    padding-right : 0.1em;
    text-align : right;
}

h2.degree {
    text-align : center;
    font-style : normal;
    font-weight : normal;
}
h3.degree {
    text-align : center;
    font-style : normal;
}
p.degree {
    text-align : center;
    margin-bottom : 0.4em;
}
p.graceline {
    margin-bottom : 0.8em;
}
p.leaded {
    margin-top : 1.8em;
    margin-bottom : 0.6em;
}

p.honorary-degrees {
    text-indent : 0;
}

hr {
    border : 1px solid #ccccdd;
}


/* FOR SUBLISTS - indents the list more and provides morespace for the item-designator.
    Use thus: <p class="ListRangedLeft sublist><span class="item-designator">2.3.4</span>...</p>*/
p.ListRangedLeft.sublist {
    padding-left : 8em;
    text-indent : -3.5em;
}
p.ListRangedLeft.sublist .item-designator {
    width : 3em;
}

/* EXTRA INDENTING: manually add to list classes to indent the 
    whole thing while retaining any hanging indents.
    Useful for quoted lists. [Never added automatically]  
    e.g. <p class="ListRangedLeft indent">...</p>
 */
p.indent {
    margin-left : 3em;
}
p.indent-more {
    margin-left : 5.5em;
}

/* IMAGES - wrap hyperlinked thumb images in a div with class="image" */

.image {
    padding : 1em 0;
}
.image p {
    padding-left : 1.2em;
} /* for legend */
.image img {
    margin-left : 2em;
}
.image a img {
    border : #ffffff 2px solid;
}
.image a:hover img {
    border-color : #cccccc;
}

/* "CAM-ONLY"-RELATED */

div.acs-cam-only {
}

p.login {
    font-style : italic;
    text-indent : 0;
    border : 1px solid #d0d0d0;
    padding : 0.7em;
}
p.login a {
    font-weight : bold;
}


p.acs-cam-only {
    padding-right : 18px;
    text-indent : 0;
    display : inline-block;
    background : url('../images/icon-restricted.gif') top right no-repeat;
}

.on-this-page li.acs-cam-only a {
    padding-right : 18px;
    text-indent : 0;
    background-image : url('../images/icon-restricted.gif');
    background-position : top right;
    background-repeat : no-repeat;
}
.on-this-page li.acs-cam-only li a {
    padding-right : 0;
    background-image : none;
}
div.acs-cam-only h2.subsection {
    padding-right : 20px;
    text-indent : 0;
    background-image : url('../images/icon-restricted.gif');
    background-position : center right;
    background-repeat : no-repeat;
}


/* HELP TOOLTIPS */

p.help {
    margin : 0;
    font-size : 80%;
}


/* LINKS */

a {
    color : #000088;
    text-decoration : none;
}

a:hover {
    text-decoration : underline;
}
a:active,
a:focus {
    color : #ff0000 !important;
    text-decoration : underline;
}


div.subsection a {
    font-weight : bold;
} /* don't use #body - it's too specific in TOC */

#body a:visited {
    color : #550055;
}

a.icon-pdf,
a.pdf {
    display : inline-block;
    padding : 0 0 0 21px;
    min-height : 17px;
    background : 0px 2px no-repeat url("/global/images/icons/pdf.gif");
}




/* CONTENTS */

/* serves double duty both on contents page and at head of each section */

.on-this-page ul {
    border : solid #9999cc;
    border-width : 1px 0 0 0;
    font-size : 90%;
    margin : 0;
    list-style-type : none;
    padding : 0.4em 0 0 0;
    font-weight : bold;
}


.on-this-page ul ul {
    padding : 0.2em 0 0 2em;
    font-weight : normal !important;
    border : none;
}

.on-this-page ul ul ul {
    margin-top : 0.25em;
}

.on-this-page ul.toc3 {
    font-style : italic;
}

.on-this-page li {
    line-height : 1.1em;
    margin-bottom : 0.25em;
}





/* DEV ONLY: tags unmatched by the XSLT get this wrapper by default, 
    with a class named after the unmatched element... end result is XML-like highlighted tags*/
span.unknown {
    font-family : monospace;
    display : inline;
}
span.unknown span {
    background : #ffffbb;
    display : inline;
}
span.unknown > span:before {
    background : #ffcccc;
    content : "<" attr(class) ">";
}
span.unknown > span:after {
    background : #ffcccc;
    content : "</" attr(class) ">";
}
/* make footnotes easier to spot 
span.footnote-ref {
  background: #ff8888;
}
*/
/* end dev only */

/*
 * Duplicates pre-existing embedded style tag for .col-01, but
 * with the addition of .col-2, and .col-4, so it is globally
 * available instead of copying style tag into html files.
 */
.col-02 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;

    -webkit-column-rule: 0px inset #ddddee; /* Chrome, Safari, Opera */
    -moz-column-rule: 0px inset #ddddee; /* Firefox */
    column-rule: 0px inset #ddddee;

    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
}

/* .col-01 is specified for historical purposes
 * and dates to when this particular class was
 * pasted into the body as part of a style tag to
 * provide a 3-column layout.
 * If those style tags were ever removed this would 
 * ensure they continued to render correctly, although
 * search and replace col-01 with col-03 would also suffice.
 */
.col-01,
.col-03 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;

    -webkit-column-rule: 0px inset #ddddee; /* Chrome, Safari, Opera */
    -moz-column-rule: 0px inset #ddddee; /* Firefox */
    column-rule: 0px inset #ddddee;

    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
}

.col-04 {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;

    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;

    -webkit-column-rule: 0px inset #ddddee; /* Chrome, Safari, Opera */
    -moz-column-rule: 0px inset #ddddee; /* Firefox */
    column-rule: 0px inset #ddddee;

    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
}