textured-agreement-clean-1.css

/*
COLOUR REFERENCE
#d40000         -   header red
#333            -   top header dark gray bg
#5fbcd3         -   header line blue / quote blue
#ffeb5c         -   warning yellow

IMAGE REFERENCE
left-quote.png  -   blue right quote (5fbcd3)
right-quote.png -   blue right quote (5fbcd3)
bullet-level1.png   black triangular bullet
warning.png     -   warning icon (!-on-triangle)

*/

body.textured-agreement {
    background: #FFF;
    color: #000;
    width: 500pt;
    font-family: "Helvetica", "Arial", "MgOpen Moderna", sans-serif;
    font-size: 12pt;
    font-size-adjust: 0.45;
    line-height: 14pt;
    margin: 0;
    padding: 0 32pt;
}


/* headers */
.textured-agreement h1 {
    font-size: 24pt;
    font-weight: bold;
    line-height: 32pt;
    margin: 0 -240pt 16pt -32pt;
    padding: 0 32pt;
    background: #333;
    color: #fff;
}
.textured-agreement h2 {
    font-size: 24pt;
    font-weight: bold;
    line-height: 24pt;
    margin: 16pt 0 4pt;
    padding: 0 0 2pt;
    color: #d40000;
    border-bottom: 2pt solid #5fbcd3;
}


/* normal paragraphs */
.textured-agreement p { 
    margin: 0 0 8pt;
    padding: 0;
    text-align: justify;
}
.textured-agreement p + p {
    text-indent: 16pt;
    margin-top: -8pt;
}


/* lead paragraphs */
.textured-agreement p.lead {
     font-size: 14pt;
    line-height: 18pt;
    margin-bottom: 12pt; 
}


/* quotes */
.textured-agreement .quote {
    font-size: 22pt;
    line-height: 18pt;
    color: #555;
    margin: 12pt 0;
    background: url("images/left-quote.png") no-repeat top left;
    text-align: left;
    padding: 0;
}
.textured-agreement .quote > div {
    background: url("images/right-quote.png") no-repeat bottom right;
    padding: 0pt 35px;
    overflow: visible;
}


/* polls */
.textured-agreement table.poll {
    border-spacing: 0;
    margin: 0;
    padding: 0;
}
.textured-agreement table.poll > tbody > tr > th, .textured-agreement table.poll > tbody > tr > td {
    margin: 0;
    border: 0;
    vertical-align: top;
}
.textured-agreement table.poll > tbody > tr > th {
    padding: 0 16pt 14pt 0;
    text-align: left;
    width: 60%;
    font-weight: normal;
}
.textured-agreement table.poll > tbody > tr > td {
    padding: 0;
    text-align: right;
    font-size: 40pt;
    line-height: 40pt;
    font-family: serif;
}

/* specific embellishment positions */
.textured-agreement .right {
    float: right;
    width: 192pt;
    margin-left: 16pt;
}

.textured-agreement .aside {
    float: right;
    width: 192pt;
    margin-right: -208pt;
}
.textured-agreement .aside h2 {
    margin-top: 8pt;
    color: #000000;
    border-color: #000000;
}
.textured-agreement .aside .quote {
    margin-top: 0;
}


/* lists */
.textured-agreement ul {
    display: block;
    margin: 0;
    padding: 0;
}
.textured-agreement li {
    text-indent: 0;
    text-align: justify;
    line-height: 14pt;
    list-style-type: none;
    list-style-position: inside;
    display: block;
    background: url("images/bullet-level1.png") no-repeat 0pt 2pt;
    margin: 8pt 0 8pt;
    padding: 0 0 0 16pt;
}


/* warnings
    this garbage allows warnings to auto-size, with the warning symbol
    independent of the paragraph size and background, but everything 
    centered vertically (tested on Firefox 3 and Opera so far). For 
    normal warnings, do this:
        <div class="warning"><div></div><table><tbody><tr><td></td><td><div>
            ... set of <p>s
        </div></td></tr></tbody></table></div>
    For list element warnings, do this:
        <li class="warning"><div></div><table><tbody><tr><td></td><td><div>
            ... set of <p>s
        </div></td></tr></tbody></table></li>
    */
.textured-agreement .warning {
    position: relative;
    margin: 0 0 8pt;
}
.textured-agreement .warning > div {
    width:85px;
    background: url("images/warning.png") no-repeat center center;
    position: absolute;
    left: 8pt;
    top: 0;
    bottom: 0;
}
.textured-agreement .warning > table {
    border-spacing: 0;
    margin: 0;
    padding: 0;
}
.textured-agreement .warning > table > tbody > tr:first-child {
    height: 75px;
    width: 0;
}
.textured-agreement .warning > table > tbody > tr > td {
    vertical-align: middle;
    padding: 0;
    margin: 0;
    border: 0;
}
.textured-agreement .warning > table > tbody > tr > td > div {
/*     background: #ffd900; */
    background: #ffeb5c;
    padding: 8pt 16pt 8pt 85px;
}
.textured-agreement .warning > table > tbody > tr > td > div > p {
    margin: 0 0 0 16pt;
}
/* list warnings: add extra padding to the left paddings of elements to add room for bullet, and move bullet down slightly due to additional top padding in warning*/
.textured-agreement li.warning {
    background: none;
    padding: 0;
}
.textured-agreement li.warning > div {
    left: 16pt;
}
.textured-agreement li.warning > table > tbody > tr > td > div {
    background-image: url("images/bullet-level1.png");
    background-repeat: no-repeat;
    background-position: 0pt 10pt;
}
.textured-agreement li.warning > table > tbody > tr > td > div > p {
    margin-left: 26pt;
}
/* warning highlighted text */
.textured-agreement .warning b, .textured-agreement .warning strong {
    color: #d40000;
}
.textured-agreement .warning i, .textured-agreement .warning em {
    color: #d40000;
    font-style: normal;
}

/* links */
.textured-agreement a {
    color: #000000;
    font-weight: bold;
}