/* =============================================*/
/* Marginal Notes                               */
/*                                              */
/* Version 1.1                                  */
/* February 28, 2010                            */
/*                                              */
/* by Steve Palmer                              */
/* =============================================*/
/*                                              */
/* Introduction to this stylesheet:             */
/*

This sheet provides a number of styles intended
for use in documents which need to present handwritten 
notes written in a book, article or notebook.

These annotations supplement whatever other
stylesheets are used, in the same way that annotations
are a supplement to the original printed text.

Features include:
* A text model which provides a consistent
  margin for marginal annotations.
* Use of a 'cursive' font to simulate handwritten
  notes.
* Text effects which include over and underlining,
  'hiliting', various combinations of bold, italic
  and underlining.
* 'Boxing' effects to provide effects such as
  vertical lines emphasizing certain text,
  boxes around text, yellow sticky 'Post-It' 
  notes etc.

Declaration
-----------
It should be declared in an additional link element
in the markup. E.g.:

<link rel="stylesheet" type="text/css" 
   href="./css/works-blue.css" />
<link rel="stylesheet" type="text/css" 
   href="./css/marginal-notes.css" />

Layout model
------------
The basic idea is to treat the entire text as
a mn-page class, split into mn-text class (the
actual text which is the object of the annotations)
and mn-note class (the annotations). 

mn-page and mn-text are referenced using <DIV> tags, 
while mn-note is referenced by <SPAN> tags.

The mn-page class is a container for both text 
and notes and lays down a thin margin around both, 
intended to suggest a printed page.

The mn-text class is used to create a broad margin
on the left of the text, leaving room for mn-notes.

The mn-note class aligns spanned text within
the broad margin and uses a cursive font to suggest
handwritten notes. The text is aligned to the right,
up against the commented text.

Text effects
------------
Text effects available include 'boxing' and
emphasis. 

Emphasis effects include:
mn-ul - used for single underlining to
avoid using html <ul> tag.
mn-hilite - a yellow 'hiliter' effect.

Boxing effects
--------------
'Boxing' effects draw a box around
the spanned text, which can be used to
reproduce circled text, double vertical or
horizontal lines etc. Details under the 
'Boxing' section.
                                        */
								 
/* =====================================*/
/* General page model                   */
/* =====================================*/

div.mn-page
{
width:100%:
margin:20px;
border:1px solid #D7D7D7;
line-height:150%;
}
div.mn-text
{
margin-left:220px;
padding:1em;
}
span.mn-note
{
font-family:cursive;
text-indent:0em;
text-align:left;
padding-right:5px;
position:absolute;
left:30px; 
width:220px
}

/* =====================================*/
/* Effects                              */
/* =====================================*/

/* Text effects:

mn-cu
 - cursive font
mn-ul
 - underline
mn-ulol
 - underline and overline
mn-hilite
 - gives text a 'neon yellow'
   colour, as if a 'hiliter'
   pen has been used
mn-bold
 - bold
mn-ital
 - italic
mn-bold-ital
 - bold, italics
mn-bold-ital-ul
 - bold, italics, underline

*/

span.mn-left{
text-align:left;
}
span.mn-cu{
font-family: cursive;
}
span.mn-ul{
text-decoration: underline;
}
span.mn-ulol{
text-decoration: underline overline;
}
span.mn-hilite{
background-color: #FFFF00;
}
span.mn-bold{
font-weight: bold;
}
span.mn-ital{
font-style: italic;
}
span.mn-ital-ul{
font-style: italic;
text-decoration: underline;
}
span.mn-bold-ital{
font-weight: bold;
font-style: italic;
}
span.mn-bold-ul{
font-weight: bold;
text-decoration: underline;
}
span.mn-bold-ital-ul{
font-weight: bold;
font-style: italic;
text-decoration: underline;
}

/* =====================================*/
/* 'boxing'                             */
/* =====================================*/

/*
box-styles are identified by always beginning
with 'mn-box-', followed by drawing instructions 
described by a combination of letter pairs. Eg:
'mn-box-rd' will produce, at the (r)ight edge of 
the text, a (d)ouble vertical line
 

The letter pairs indicate which edge is being
described and what effect is being applied to
that edge.

The *first* letter of each pair
indicates which edge of the box is being
described: 
t - top 
b - bottom 
l - left
r - right. 

Thus, diagrammatically:

     top           t
left    right =  l   r
   bottom          b

In order to avoid confusion,
these should always be used in clockwise 
order from the top: top-right-bottom-left

The *second* letter of each pair
indicates the style used: 

s - single = |  
d - double = || 
o - dotted = ......  
a - dashed = - - - -

'Pure' boxes (all four sides the same style)
will just have a single letter 
indicating the style used.
Eg, 'mn-box-s' draws a single line around
the spanned text.

'mn-box-ldrd' draws vertical double
bars at each end of the spanned text.

*/

/* Right Double */
/* Double vertical lines to right
of spanned text */
span.mn-box-rd
{
border-style: none double none none;
}

/* Left Double */
/* Double vertical lines to left
of spanned text */
span.mn-box-ld
{
border-style: none none none double;
}

/* Bottom and Left Double */
/* Double horizontal underlining
of spanned text and double vertical 
lines to left */
span.mn-box-bdld
{
border-style: none none double double;
}

/* Right and Left Double */
/* Double vertical lines to right
and left of spanned text*/
span.mn-box-rdld
{
border-style: none double none double;
}

/* Complete box */
/* Surrounds spanned text with
a box */
span.mn-box-s
{
border-style: solid solid solid solid;
}

/* Single top right and bottom */
/* Draws line above, beneath and to right
of spanned text */
span.mn-box-tsrsbs
{
border-style: solid solid solid none;
}

/* Single top bottom and left */
/* Draws line above, beneath and to left
of spanned text */
span.mn-box-tsbsls
{
border-style: solid none solid solid;
}

/* yellow sticky*/
/* Creates 'Post-It' type note around text */
span.mn-yellow-sticky{
background-color: #FFFF00;
border-top-width: thin;
border-left-width: thin;
border-right-width: thick;
border-right-color: grey;
border-bottom-color: grey;
border-style: solid solid solid solid;
}
/* =====================================*/
/* Adjustments for Mobile Devices       */
/* =====================================*/

@media (max-width: 480px) {
  p { font-size: 12pt; margin-left: 1%; margin-right: 1%; margin-bottom: 4pt; margin-top: 4pt; line-height: 125%; }
  p.indentb { margin-left: 6%; margin-right: 1%; }
  p.quoteb { margin-left: 6%; margin-right: 1%; }
  p.index { margin-left: 6%; margin-right: 1%; }
  h1 { font-size: 18pt; margin-left: 1%; margin-right: 1%; }
  h2 { font-size: 16pt; margin-left: 1%; margin-right: 1%; }
  h3 { font-size: 14pt; margin-left: 1%; margin-right: 1%; }
  h4 { font-size: 13pt; }
  h5 { margin-left: 1%; }
  h6 { margin-left: 1%; }
  img { width: 150px; height: auto; }
  img.auto {width: auto ; height: auto; }
  blockquote {margin-left: 1%; }
}